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

html,body { overflow:hidden; }

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

/* ── Embed mode (set via ?embed=1 query param) ───────────────────────────── */
html.embed-mode .app-header { display:none !important; }
/* Slim the inner spacing so the iframe is content-dense */
html.embed-mode .fbar-wrap { padding:8px 14px; gap:8px; }
html.embed-mode .fbar-selected { padding:0 14px 6px; }
html.embed-mode #content { padding:12px; }
/* Optional further trimming */
html.embed-no-filters .fbar-wrap,
html.embed-no-filters .fbar-selected { display:none !important; }
html.embed-no-map  #map-panel  { display:none !important; }
html.embed-no-cards #content   { display:none !important; }
html.embed-no-cards #map-panel { width:100% !important; border-left:none; }
html.embed-no-map   #content   { width:100% !important; }

.fbar-wrap {
  background:var(--surface); border-bottom:1px solid var(--border);
  padding:10px 20px; display:flex; gap:10px;
  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%; }
/* Make the Reset button match the height of form-controls / ms-trigger */
.fbar-wrap #btn-reset { padding:7px 14px; font-size:13px; }

/* ── Multi-select dropdown trigger button (replaces chip-filter-group) ──── */
.ms-trigger {
  display:flex; align-items:center; gap:6px; min-width:170px;
  padding:7px 10px; background:var(--surface); color:var(--text);
  border:1px solid var(--border); border-radius:var(--radius-sm);
  font:inherit; font-size:13px; cursor:pointer;
  transition:border-color .15s, box-shadow .15s;
}
.ms-trigger:hover { border-color:var(--accent-glow); }
.ms-trigger.open  { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
.ms-trigger-label { flex:1; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ms-trigger-count {
  background:var(--accent); color:#fff; font-size:10px; font-weight:700;
  padding:1px 7px; border-radius:10px; line-height:1.4; flex-shrink:0;
}
.ms-trigger-caret { color:var(--text-light); font-size:10px; flex-shrink:0; }

/* Selected chip strip below the filter bar */
.fbar-selected {
  display:none; flex-wrap:wrap; gap:5px;
  padding:0 20px 10px;
  background:var(--surface); border-bottom:1px solid var(--border);
}
.fbar-selected.show { display:flex; }
.fbar-sel-chip {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 4px 3px 10px; font-size:11px; font-weight:600;
  background:var(--accent-glow); color:var(--accent);
  border-radius:14px;
}
.fbar-sel-chip button {
  background:transparent; border:none; cursor:pointer;
  color:var(--accent); font-size:10px; padding:2px 6px;
  border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
}
.fbar-sel-chip button:hover { background:rgba(74,124,255,.25); }

/* Anchored dropdown panel */
.ms-panel {
  position:fixed; z-index:200;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-md);
  width:320px; max-width:calc(100vw - 24px);
  max-height:420px; display:none; flex-direction:column;
}
.ms-panel.show { display:flex; }
.ms-panel-search {
  padding:8px 10px; border-bottom:1px solid var(--border-subtle);
  display:flex; gap:6px; align-items:center;
}
.ms-panel-search input {
  flex:1; padding:6px 9px; font-size:12px;
  background:var(--surface); color:var(--text);
  border:1px solid var(--border); border-radius:14px;
}
.ms-panel-search input:focus {
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent-glow);
}
.ms-panel-clear {
  font-size:11px; padding:5px 9px; border:none; background:transparent;
  color:var(--text-muted); cursor:pointer; border-radius:4px;
  font-family:inherit;
}
.ms-panel-clear:hover { background:var(--surface-alt); color:#dc2626; }
.ms-panel-list { flex:1; overflow-y:auto; padding:4px 0; }
.ms-panel-item {
  display:flex; align-items:center; gap:9px;
  padding:7px 14px; font-size:13px; cursor:pointer;
  user-select:none; color:var(--text);
}
.ms-panel-item:hover { background:var(--surface-alt); }
.ms-panel-item.checked { background:var(--accent-glow); color:var(--accent); font-weight:600; }
.ms-panel-item input { margin:0; cursor:pointer; accent-color:var(--accent); }
.ms-panel-item i.ms-item-icon { width:18px; text-align:center; color:var(--accent); font-size:13px; }
.ms-panel-item .ms-item-label { flex:1; }
.ms-panel-empty {
  padding:20px 14px; text-align:center;
  font-size:12px; color:var(--text-muted); font-style:italic;
}

/* ── Mobile filters bottom sheet ─────────────────────────────────────────── */
.fbar-mobile-toggle {
  display:none; align-items:center; gap:6px;
  padding:8px 14px; background:var(--accent); color:#fff;
  border:none; border-radius:var(--radius-sm); cursor:pointer;
  font:600 12px/1 inherit; white-space:nowrap;
}
.fbar-mobile-toggle .badge {
  background:rgba(255,255,255,.25); padding:1px 7px; border-radius:10px; font-size:10px;
}

.fsheet-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.5);
  z-index:1500; display:none;
}
.fsheet-overlay.show { display:flex; align-items:flex-end; }
.fsheet {
  background:var(--surface); width:100%; max-height:90vh;
  border-radius:var(--radius) var(--radius) 0 0;
  display:flex; flex-direction:column; overflow:hidden;
  animation:fsheet-up .25s ease;
}
@keyframes fsheet-up { from { transform:translateY(100%); } }
.fsheet-header {
  padding:14px 18px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:10px; flex-shrink:0;
}
.fsheet-header h2 { flex:1; font-size:15px; font-weight:700; }
.fsheet-close {
  background:none; border:none; color:var(--text-muted);
  font-size:18px; cursor:pointer; padding:4px 8px;
}
.fsheet-body { flex:1; overflow-y:auto; padding:14px 18px; }
.fsheet-section { margin-bottom:18px; }
.fsheet-section-title {
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.5px; color:var(--text-muted); margin-bottom:8px;
  display:flex; align-items:center; justify-content:space-between;
}
.fsheet-section .ms-panel-search { padding:0 0 6px; border-bottom:none; }
.fsheet-section .ms-panel-list {
  max-height:240px; border:1px solid var(--border-subtle); border-radius:var(--radius-sm);
}
.fsheet-footer {
  padding:12px 18px; border-top:1px solid var(--border);
  display:flex; gap:8px; flex-shrink:0;
}
.fsheet-footer .btn { flex:1; }

#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); }
[data-theme="dark"] .back-btn { color:var(--accent); }

.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:18px;
}
/* Restore browser-default indentation for rich-HTML content that the global
   * { padding:0 } reset otherwise strips. */
.detail-desc p           { margin:4px 0; }
.detail-desc ul,
.detail-desc ol          { margin:8px 0 8px 22px; padding-left:8px; }
.detail-desc li          { margin:3px 0; padding-left:2px; }
.detail-desc li::marker  { color:var(--accent); }
.detail-desc h1,
.detail-desc h2,
.detail-desc h3,
.detail-desc h4,
.detail-desc h5,
.detail-desc h6 {
  margin:14px 0 4px; font-weight:700; color:var(--text);
  line-height:1.3;
}
.detail-desc h3 { font-size:15px; color:var(--accent); }
.detail-desc h4 { font-size:14px; }
.detail-desc strong, .detail-desc b { color:var(--text); font-weight:700; }
.detail-desc a { color:var(--accent); text-decoration:underline; }
.detail-desc blockquote {
  margin:8px 0 8px 12px; padding:6px 0 6px 12px;
  border-left:2px solid var(--border); color:var(--text-light);
  font-style:italic;
}
.detail-desc hr {
  border:none; border-top:1px solid var(--border-subtle); margin:14px 0;
}

.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:88vh; 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; }

/* Prev / Next arrows */
#lightbox-prev, #lightbox-next {
  position:fixed; top:50%; transform:translateY(-50%);
  width:54px; height:54px; border-radius:50%;
  background:rgba(255,255,255,.1); color:#fff;
  border:none; cursor:pointer; font-size:20px;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s, opacity .15s;
}
#lightbox-prev { left:24px; }
#lightbox-next { right:24px; }
#lightbox-prev:hover, #lightbox-next:hover { background:rgba(255,255,255,.22); }
#lightbox-prev:disabled, #lightbox-next:disabled { opacity:.25; cursor:default; }
#lightbox.single-photo #lightbox-prev,
#lightbox.single-photo #lightbox-next { display:none; }

/* Photo counter ("3 / 12") */
#lightbox-counter {
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  color:#fff; background:rgba(0,0,0,.5);
  padding:5px 14px; border-radius:14px;
  font-size:12px; font-weight:600; letter-spacing:.4px;
}
#lightbox-counter:empty { display:none; }

@media (max-width:600px) {
  #lightbox-prev, #lightbox-next { width:44px; height:44px; font-size:16px; }
  #lightbox-prev { left:8px; } #lightbox-next { right:8px; }
}

/* ── 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:768px) {
  /* Collapse desktop dropdowns; show single "Filters" button instead */
  .fbar-group.fbar-desktop-filter { display:none; }
  .fbar-mobile-toggle             { display:inline-flex; }
  .fbar-search { flex:1; min-width:0; }
  .fbar-actions { flex-shrink:0; }
  .fbar-selected { padding:0 14px 8px; }
}
@media (max-width:900px) {
  .fbar-wrap input[type=text] { min-width:60%; }
  .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)); }
}