/* =============================================================================
   public.css  –  Public-facing page styles
   ============================================================================= */

html,body { overflow:hidden; }

/* ── Layout ──────────────────────────────────────────────────────────────── */
#app { display:flex; flex-direction:column; height:100vh; }

.fbar-wrap {
  background:var(--surface); border-bottom:1px solid var(--border);
  padding:10px 20px; display:flex; gap:12px;
  flex-wrap:wrap; align-items:flex-end; flex-shrink:0;
}
.fbar-group {
  display:flex; flex-direction:column; gap:3px;
}
.fbar-search { flex:1; min-width:180px; }
.fbar-label {
  font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.5px; color:var(--text-muted); padding-left:1px;
}
.fbar-actions { display:flex; gap:6px; align-items:flex-end; }
.fbar-wrap .form-control { padding:7px 10px; }
.fbar-search .form-control { width:100%; }
.fbar-wrap select { min-width:140px; }
.fbar-wrap input[type=date] { width:136px; }

#main { display:flex; flex:1; overflow:hidden; position:relative; }

/* ── Content panel ───────────────────────────────────────────────────────── */
#content {
  flex:1; overflow-y:auto; padding:16px;
  scroll-behavior:smooth; position:relative;
}
#content::-webkit-scrollbar { width:6px; }
#content::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }

/* ── Card grid ───────────────────────────────────────────────────────────── */
.card-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:14px;
}

.proj-card {
  background:var(--surface); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow);
  border:1px solid var(--border); cursor:pointer;
  transition:box-shadow .2s,transform .2s;
}
.proj-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }

.card-thumb {
  width:100%; height:160px; object-fit:cover;
  background:var(--surface-alt); display:block;
}
.card-thumb-ph {
  width:100%; height:160px;
  background:linear-gradient(135deg,var(--primary),var(--primary-light));
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.3); font-size:36px;
}
.card-body { padding:12px 14px; }
.card-title { font-size:14px; font-weight:700; color:var(--text); margin:5px 0 4px; line-height:1.35; }
.card-meta  { font-size:11px; color:var(--text-muted); margin-bottom:6px; display:flex; align-items:center; gap:4px; }
.card-meta i { width:13px; color:var(--text-light); }

/* ── Detail view ─────────────────────────────────────────────────────────── */
#detail-view { display:none; }
#detail-view.show { display:block; }
#card-grid-view.hide { display:none; }

.back-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 16px; background:var(--surface);
  border:1px solid var(--border); border-radius:8px;
  font-size:13px; font-weight:600; cursor:pointer;
  color:var(--primary); font-family:inherit;
  margin-bottom:14px; transition:background .15s;
}
.back-btn:hover { background:var(--surface-alt); }

.detail-card {
  background:var(--surface); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--border);
}
.detail-hero {
  width:100%; height:300px; object-fit:cover;
  background:var(--surface-alt); display:block;
}
.detail-hero-ph {
  width:100%; height:200px;
  background:linear-gradient(135deg,var(--primary),var(--primary-light));
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.25); font-size:56px;
}
.detail-body { padding:22px 26px; }
.detail-badges { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.detail-title { font-size:22px; font-weight:800; color:var(--text); margin-bottom:16px; line-height:1.25; }
.detail-desc {
  font-size:14px; line-height:1.75; color:var(--text-muted);
  margin-bottom:22px; border-left:3px solid var(--accent); padding-left:14px;
}

.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.dg-item {
  padding:10px 14px; background:var(--surface-alt);
  border-radius:var(--radius-sm); border:1px solid var(--border-subtle);
}
.dg-label {
  font-size:10px; text-transform:uppercase; letter-spacing:.5px;
  color:var(--text-light); font-weight:600; margin-bottom:3px;
}
.dg-label i { width:14px; margin-right:2px; }
.dg-value { font-size:13px; color:var(--text); line-height:1.5; }
.dg-item.full { grid-column:1/-1; }

/* ── Attachments in detail view ──────────────────────────────────────────── */
.attach-section { margin-top:22px; border-top:1px solid var(--border); padding-top:18px; }
.attach-section-title {
  font-size:13px; font-weight:700; color:var(--text);
  margin-bottom:12px; display:flex; align-items:center; gap:6px;
}
.attach-section-title i { color:var(--accent); }

.photo-gallery {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px;
}
.photo-thumb {
  aspect-ratio:1; border-radius:var(--radius-sm); overflow:hidden;
  cursor:pointer; border:1px solid var(--border);
  transition:transform .15s,box-shadow .15s;
}
.photo-thumb:hover { transform:scale(1.04); box-shadow:var(--shadow-md); }
.photo-thumb img { width:100%; height:100%; object-fit:cover; display:block; }

.doc-list { display:flex; flex-direction:column; gap:6px; }
.doc-item {
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; background:var(--surface-alt);
  border-radius:var(--radius-sm); border:1px solid var(--border-subtle);
  text-decoration:none; color:var(--text);
  transition:background .15s;
}
.doc-item:hover { background:var(--border-subtle); text-decoration:none; }
.doc-item i.fa-file-pdf { color:#dc2626; font-size:18px; flex-shrink:0; }
.doc-name { flex:1; font-size:13px; font-weight:500; }
.doc-size { font-size:11px; color:var(--text-muted); }
.doc-item .fa-download { color:var(--text-light); font-size:13px; }

/* ── Lightbox ────────────────────────────────────────────────────────────── */
#lightbox {
  position:fixed; inset:0; background:rgba(0,0,0,.88);
  z-index:3000; display:none; align-items:center; justify-content:center;
  cursor:zoom-out;
}
#lightbox.show { display:flex; }
#lightbox img { max-width:90vw; max-height:90vh; object-fit:contain; border-radius:4px; }
#lightbox-close {
  position:fixed; top:16px; right:20px;
  color:#fff; font-size:24px; cursor:pointer;
  background:none; border:none; opacity:.7;
}
#lightbox-close:hover { opacity:1; }

/* ── Map panel ───────────────────────────────────────────────────────────── */
#map-panel {
  width:44%; min-width:380px;
  border-left:1px solid var(--border);
  display:flex; flex-direction:column; flex-shrink:0;
}
#viewDiv { flex:1; }
.map-legend {
  padding:8px 14px; background:var(--surface);
  border-top:1px solid var(--border);
  font-size:11px; display:flex; gap:14px;
  flex-wrap:wrap; flex-shrink:0;
}
.lg-item { display:flex; align-items:center; gap:5px; color:var(--text-muted); }
.lg-dot {
  width:9px; height:9px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.8);
  box-shadow:0 0 0 1px rgba(0,0,0,.15); flex-shrink:0;
}

/* ── Mobile map toggle ───────────────────────────────────────────────────── */
.mob-map-btn {
  display:none; position:fixed; bottom:18px; right:18px; z-index:40;
  width:48px; height:48px; border-radius:50%;
  background:var(--primary); color:#fff; border:none;
  font-size:18px; cursor:pointer;
  box-shadow:0 4px 16px rgba(28,42,86,.3);
  align-items:center; justify-content:center;
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width:900px) {
  .fbar-wrap input[type=text] { min-width:100%; flex-basis:100%; }
  .fbar-wrap select, .fbar-wrap input[type=date] { flex:1; min-width:0; }

  #map-panel {
    display:none; position:fixed;
    top:0; left:0; right:0; bottom:0;
    width:100%; z-index:30; border:none;
  }
  #map-panel.show { display:flex; }
  .mob-map-btn { display:flex; }

  .card-grid { grid-template-columns:1fr; }
  .detail-grid { grid-template-columns:1fr; }
  .detail-hero { height:200px; }
  .photo-gallery { grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); }
}