:root {
  --navy: #0a2540;
  --navy-soft: #15314f;
  --accent: #1a73c2;
  --ink: #1c2733;
  --muted: #62707e;
  --line: #e3e8ee;
  --bg: #f5f7fa;
  --panel: #ffffff;
  --green: #1f9d57;
  --amber: #e2a72e;
  --gray: #8a97a4;
  --shadow: 0 1px 3px rgba(16, 33, 53, .08), 0 4px 16px rgba(16, 33, 53, .06);
  --radius: 10px;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

#app { display: flex; flex-direction: column; height: 100vh; }

/* ---- Top bar ---- */
header.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  height: 58px;
  background: var(--navy);
  color: #fff;
  flex: 0 0 auto;
  z-index: 1200;
}
.brand { display: flex; align-items: center; gap: 10px; line-height: 1; }
.brand .brandlogo { height: 28px; width: auto; display: block; background: transparent; }
.brand .sub {
  font-size: 12px; color: #9fb3c8; line-height: 1; white-space: nowrap;
  padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, .18);
}
.survey-title { font-size: 13px; color: #cdd9e5; }
.survey-title strong { color: #fff; font-weight: 600; }
.topbar .spacer { flex: 1; }

/* Topbar nav (Task 9). Summary/Data/Broker tools are labeled shells for now. */
.topnav { display: flex; gap: 4px; }
.topnav-btn {
  font: inherit; font-size: 13px; font-weight: 600; color: #cdd9e5;
  background: transparent; border: 1px solid rgba(255,255,255,.18);
  padding: 6px 12px; border-radius: 7px; cursor: pointer;
  transition: background .12s, color .12s;
}
.topnav-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
.topnav-btn.active { background: rgba(255,255,255,.16); color: #fff; }

.btn {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 8px 14px;
  cursor: pointer;
  background: var(--accent);
  color: #fff;
  transition: background .15s, border-color .15s, opacity .15s;
}
.btn:hover { background: #155a99; }
.btn.ghost { background: transparent; border-color: rgba(255,255,255,.35); color: #fff; }
.btn.ghost:hover { background: rgba(255,255,255,.1); }
.btn.subtle { background: #eef2f6; color: var(--ink); border-color: var(--line); }
.btn.subtle:hover { background: #e2e8f0; }
.btn.danger { background: #c43d3d; }
.btn.danger:hover { background: #a82f2f; }
.btn.small { padding: 5px 10px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: default; }

.editmode-flag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: #ffd479;
  border: 1px solid rgba(255, 212, 121, .5);
  padding: 3px 9px;
  border-radius: 20px;
}

/* ---- Main split ---- */
main { flex: 1 1 auto; display: flex; min-height: 0; }
#map { flex: 2 1 0; min-width: 0; }

aside.listpane {
  flex: 1 1 0;
  min-width: 330px;
  max-width: 460px;
  background: var(--panel);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.listpane .listhead {
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.listhead h2 { margin: 0; font-size: 14px; font-weight: 700; }
.listhead .count { font-size: 12px; color: var(--muted); }

.cards { overflow-y: auto; padding: 12px; flex: 1 1 auto; }

/* ---- Filter pills + search (Task 4) ---- */
.listfilter { padding: 10px 12px; border-bottom: 1px solid var(--line); background: #fbfcfd; flex: 0 0 auto; }
.filter-search {
  width: 100%; font: inherit; font-size: 13px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; margin-bottom: 8px;
}
.filter-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(26,115,194,.12); }
.filter-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.fpill {
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 5px 11px; border-radius: 20px; border: 1px solid var(--line);
  background: #fff; color: var(--muted); transition: background .12s, color .12s, border-color .12s;
}
.fpill:hover { border-color: #c6d2de; }
.fpill.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.filter-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.filter-actions .fa-hint { font-size: 11px; color: var(--muted); }
.filter-actions .fa-spacer { flex: 1 1 auto; }

/* Survey-level drop zone on an EMPTY survey (Run #2, 1d) */
.survey-dropzone {
  margin: 10px; padding: 34px 18px; text-align: center;
  border: 2px dashed #c2cfdd; border-radius: 12px; background: #fbfcfe; color: var(--muted);
  transition: border-color .12s, background .12s;
}
.survey-dropzone.hot { border-color: var(--accent); background: #eef5fc; color: var(--ink); }
.survey-dropzone .dz-ico { font-size: 30px; line-height: 1; }
.survey-dropzone .dz-title { font-size: 14px; font-weight: 700; color: var(--ink); margin: 8px 0 4px; }
.survey-dropzone .dz-sub { font-size: 12px; line-height: 1.5; }
.folder-card.drop-hot-card { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(26,115,194,.3); }

/* Card rent + parking lines (Priorities 2 & 3) */
.card-rent { font-size: 12px; font-weight: 650; color: var(--ink); margin-top: 8px; }
.card-parking { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.card-parking-cost { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* Suites list under a building card */
.card-suites { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.card-suites .cs-toggle {
  display: flex; align-items: center; gap: 6px; width: 100%;
  background: none; border: none; cursor: pointer; padding: 2px 0; font: inherit;
  font-size: 9.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--muted);
}
.card-suites .cs-toggle:hover { color: var(--ink); }
.card-suites .cs-arrow { font-size: 11px; line-height: 1; transition: transform .15s; display: inline-block; }
.card-suites.open .cs-arrow { transform: rotate(180deg); }
.card-suites .cs-parking { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 700; color: var(--ink); }
.card-suites .cs-list { margin-top: 6px; }
.suite { border: 1px solid var(--line); border-radius: 7px; margin-bottom: 5px; overflow: hidden; background: #fbfcfd; }
.suite.open { border-color: #c6d2de; }
.suite-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 9px; cursor: pointer; font-size: 12px;
}
.suite-row:hover { background: #f2f6fa; }
.suite-row .su-exp { color: var(--muted); font-size: 10px; width: 10px; flex: 0 0 auto; }
.suite-row .su-suite { font-weight: 700; color: var(--ink); flex: 0 0 auto; }
.suite-row .su-sf { color: var(--muted); flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suite-row .su-rate { font-weight: 650; color: var(--ink); flex: 0 0 auto; white-space: nowrap; }
.suite-detail { padding: 6px 9px 8px 27px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-top: 1px solid var(--line); background: #fff; }
.suite-detail .sd { min-width: 0; }
.suite-detail .sd-k { display: block; font-size: 9px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); }
.suite-detail .sd-v { display: block; font-size: 13px; font-weight: 700; color: var(--ink); margin-top: 1px; }
.rent-tag {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .3px;
  padding: 1px 6px; border-radius: 10px; background: rgba(26,115,194,.12); color: #155a99;
}
.unplaced {
  font-size: 10.5px; font-weight: 600; color: #9a6f12;
  background: rgba(226,167,46,.16); padding: 1px 6px; border-radius: 9px; white-space: nowrap;
}

/* CoStar detail fields (Priority 4) */
.amenity-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.amenity { font-size: 11px; font-weight: 600; color: var(--ink); background: #eef2f6; border: 1px solid var(--line); padding: 2px 9px; border-radius: 14px; }
.costar-fields { margin-bottom: 14px; border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; }
.costar-fields > summary { font-size: 12px; font-weight: 700; color: var(--muted); cursor: pointer; padding: 6px 0; }

/* ---- Property card (redesign) ---- */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 12px;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: border-color .15s, transform .05s, box-shadow .15s;
  position: relative;
  overflow: hidden;
}
.card:hover { border-color: #c6d2de; transform: translateY(-1px); }
.card.active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(26,115,194,.25), var(--shadow); }
.card.drop-photo { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(26,115,194,.35); }
.card.drop-photo .card-media::after {
  content: "📷 Drop to set photo"; position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,37,64,.55); color: #fff; font-size: 12px; font-weight: 700;
}
.photo-upload { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.photo-upload input[type=file] { font-size: 12px; flex: 1 1 auto; min-width: 0; }

.card-media { position: relative; height: 132px; background: #e9eef3; }
.card-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.card-photo.placeholder { display: flex; align-items: center; justify-content: center; color: #aeb9c6; font-size: 34px; }
.card-num {
  position: absolute; top: 8px; left: 8px;
  width: 24px; height: 24px; border-radius: 50%;
  color: #fff; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3); z-index: 2;
}
.card-fav {
  position: absolute; bottom: 8px; left: 8px; z-index: 2;
  border: none; background: rgba(255,255,255,.9); color: #c43d3d;
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.25); transition: transform .1s, background .12s;
}
.card-fav:hover { transform: scale(1.1); background: #fff; }
.card-fav.on { color: #e0245e; }
.card-del {
  position: absolute; bottom: 8px; right: 8px; z-index: 2;
  border: none; background: rgba(255,255,255,.9); color: #a82f2f;
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.25); transition: transform .1s, background .12s;
}
.card-del:hover { transform: scale(1.1); background: #fff; color: #c43d3d; }
.card-badge {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px;
  text-transform: capitalize; box-shadow: 0 1px 3px rgba(0,0,0,.25);
  color: #fff;   /* solid fill (below) for legibility over bright photos */
}
.card-badge.status-available { background: var(--green); color: #fff; }
.card-badge.status-pending { background: var(--amber); color: #fff; }
.card-badge.status-leased { background: var(--gray); color: #fff; }
.card-badge.card-sub { top: 36px; background: #7c5cd6; color: #fff; }  /* stacks under the status badge */
.su-sub, .dt-sub {
  display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: .04em;
  padding: 1px 5px; border-radius: 8px; background: #7c5cd6; color: #fff;
  vertical-align: 1px;
}
.card-main { padding: 11px 13px 13px; min-width: 0; }
.card-name {
  font-weight: 700; font-size: 15px; margin: 0 0 2px; line-height: 1.25; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-addr {
  font-size: 12px; color: var(--muted); margin-bottom: 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.card-specs .sc { min-width: 0; }
.card-specs .sc-k { font-size: 9.5px; font-weight: 700; letter-spacing: .5px; color: var(--muted); text-transform: uppercase; }
.card-specs .sc-v {
  font-size: 12.5px; font-weight: 650; color: var(--ink); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.status-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 650;
  padding: 2px 8px; border-radius: 20px;
  text-transform: capitalize;
}
.status-chip .dot { width: 7px; height: 7px; border-radius: 50%; }
.status-available { background: rgba(31,157,87,.12); color: #14773f; }
.status-available .dot { background: var(--green); }
.status-pending { background: rgba(226,167,46,.15); color: #9a6f12; }
.status-pending .dot { background: var(--amber); }
.status-leased { background: rgba(138,151,164,.18); color: #5a6672; }
.status-leased .dot { background: var(--gray); }

/* ---- Leaflet numbered pins ---- */
.pin-marker {
  width: 30px; height: 30px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 2px solid #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center;
}
.pin-marker span { transform: rotate(45deg); color: #fff; font-weight: 700; font-size: 13px; }
.pin-available { background: var(--green); }
.pin-pending { background: var(--amber); }
.pin-leased { background: var(--gray); }
.pin-marker.active { box-shadow: 0 0 0 4px rgba(26,115,194,.45), 0 2px 6px rgba(0,0,0,.4); }

/* ---- Basemap switcher ---- */
.basemap-switch {
  background: #fff;
  border-radius: 8px;
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  border: 1px solid var(--line);
}
.basemap-switch button {
  border: none; background: #fff; font: inherit; font-size: 12px; font-weight: 600;
  color: var(--muted); padding: 7px 12px; cursor: pointer;
}
.basemap-switch button + button { border-left: 1px solid var(--line); }
.basemap-switch button.active { background: var(--navy); color: #fff; }

.map-hint {
  background: var(--accent); color: #fff;
  padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow); display: none;
}
.map-hint.show { display: block; }

/* ---- Detail / form panel ---- */
.overlay {
  position: fixed; inset: 0; background: rgba(10,37,64,.35);
  display: none; z-index: 1500;
}
.overlay.show { display: block; }
.panel {
  position: fixed; top: 0; right: 0; height: 100vh;
  width: 440px; max-width: 92vw;
  background: #fff; box-shadow: -6px 0 30px rgba(10,37,64,.2);
  z-index: 1600;
  transform: translateX(100%);
  transition: transform .22s ease;
  display: flex; flex-direction: column;
}
.panel.show { transform: translateX(0); }
.panel .phead {
  padding: 16px 20px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto;
}
.panel .phead h3 { margin: 0; font-size: 16px; }
.panel .pbody { overflow-y: auto; padding: 0 0 20px; flex: 1 1 auto; }
.iconbtn { background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--muted); }
.iconbtn:hover { color: var(--ink); }

.detail-photo { width: 100%; height: 200px; object-fit: cover; background: #e9eef3; display: block; }
.detail-section { padding: 16px 20px; border-bottom: 1px solid var(--line); }
.detail-section:last-child { border-bottom: none; }
.detail-section h4 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.spec-grid .spec .k { font-size: 11px; color: var(--muted); }
.spec-grid .spec .v { font-size: 14px; font-weight: 600; }
.detail-notes { font-size: 14px; line-height: 1.55; color: #2c3a47; white-space: pre-wrap; }

/* Nearby panel — UI stub (Task 10) */
.nearby-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.nearby-cell {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: #fbfcfd;
}
.nearby-cell .nb-ico { font-size: 16px; }
.nearby-cell .nb-name { flex: 1 1 auto; font-size: 13px; font-weight: 600; color: var(--ink); }
.nearby-cell .nb-count { font-size: 13px; font-weight: 700; color: var(--muted); }
.filelist { list-style: none; margin: 0; padding: 0; }
.filelist li { margin-bottom: 8px; }
.filelist a { color: var(--accent); text-decoration: none; font-size: 14px; font-weight: 600; display: inline-flex; gap: 7px; align-items: center; }
.filelist a:hover { text-decoration: underline; }
.detail-addr { font-size: 13px; color: var(--muted); margin: 2px 20px 0; }
.detail-title-row { padding: 16px 20px 4px; }
.detail-title-row h3 { margin: 0; font-size: 19px; }

/* ---- Form ---- */
form.propform { padding: 8px 20px 20px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 14px;
  padding: 9px 10px; border: 1px solid var(--line); border-radius: 7px; background: #fff;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(26,115,194,.12); }
.field textarea { resize: vertical; min-height: 70px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.coord-pick { display: flex; gap: 8px; align-items: center; }
.coord-pick .latlng { font-size: 12px; color: var(--muted); flex: 1; }
.files-editor .file-row { display: flex; gap: 8px; margin-bottom: 8px; }
.files-editor .file-row input { flex: 1; }
.form-actions { display: flex; gap: 10px; padding-top: 6px; }
.form-actions .spacer { flex: 1; }

/* ---- Modal (login) ---- */
.modal-back { position: fixed; inset: 0; background: rgba(10,37,64,.45); display: none; align-items: center; justify-content: center; z-index: 2000; }
.modal-back.show { display: flex; }
.modal { background: #fff; border-radius: 12px; width: 360px; max-width: 92vw; box-shadow: var(--shadow); overflow: hidden; }
.modal .mhead { padding: 18px 22px 6px; }
.modal .mhead h3 { margin: 0 0 3px; font-size: 17px; }
.modal .mhead p { margin: 0; font-size: 13px; color: var(--muted); }
.modal form { padding: 12px 22px 22px; }
.modal .err { color: #c43d3d; font-size: 13px; margin: 0 0 10px; min-height: 16px; }

/* Full-window drag-drop overlay (broker survey view) */
.dropveil {
  position: fixed; inset: 0; z-index: 3000; display: none;
  align-items: center; justify-content: center;
  background: rgba(10, 37, 64, .55);
}
.dropveil.show { display: flex; }
.dropveil-box {
  pointer-events: none;   /* only the backdrop handles drag events (simple counter) */
  background: rgba(255, 255, 255, .06);
  border: 3px dashed rgba(255, 255, 255, .85);
  border-radius: 16px; padding: 46px 64px; text-align: center; color: #fff;
  box-shadow: 0 12px 44px rgba(0, 0, 0, .35);
}
.dropveil-box .dv-ico { font-size: 44px; line-height: 1; }
.dropveil-box .dv-label { font-size: 18px; font-weight: 700; margin-top: 12px; }
.dropveil-box .dv-sub { font-size: 13px; opacity: .82; margin-top: 5px; }

.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--navy); color: #fff; padding: 11px 18px; border-radius: 8px;
  font-size: 13px; box-shadow: var(--shadow); opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; z-index: 2500;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.empty { padding: 40px 20px; text-align: center; color: var(--muted); font-size: 14px; }

@media (max-width: 820px) {
  main { flex-direction: column; }
  #map { flex: 1 1 55%; }
  aside.listpane { max-width: none; flex: 1 1 45%; border-left: none; border-top: 1px solid var(--line); }
}

/* ===== Phase 2 (redesign): three-level views, breadcrumb, folder cards ===== */
.content { flex: 1 1 auto; min-height: 0; position: relative; display: flex; flex-direction: column; }
.view { display: none; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.view.active { display: flex; flex-direction: column; }
.view-list { overflow-y: auto; background: var(--bg); }
.view-list.active { display: block; }
#viewMap.active { display: flex; }
#viewMap main { flex: 1 1 auto; display: flex; min-height: 0; width: 100%; }

.list-wrap { max-width: 1040px; margin: 0 auto; padding: 30px 26px 50px; }
.list-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.list-head h1 { font-size: 22px; margin: 0; font-weight: 700; color: var(--navy); }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }

.folder-card {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); cursor: pointer; overflow: hidden;
  transition: border-color .15s, transform .05s; display: flex; flex-direction: column;
}
.folder-card:hover { border-color: #c6d2de; transform: translateY(-1px); }
.folder-card .fc-body { padding: 18px 18px 14px; flex: 1 1 auto; display: flex; gap: 13px; align-items: flex-start; }
.folder-card .fc-ico { font-size: 26px; line-height: 1; margin-top: 1px; }
.folder-card .fc-name { font-size: 16px; font-weight: 650; color: var(--ink); margin: 0 0 3px; }
.folder-card .fc-meta { font-size: 12.5px; color: var(--muted); }
.folder-card .fc-status-line { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.fc-pill { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px; display: inline-flex; align-items: center; gap: 5px; }
.fc-pill .dot { width: 7px; height: 7px; border-radius: 50%; }
.folder-card .fc-actions {
  display: flex; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--line);
  background: #fafbfc;
}
.folder-card .fc-actions .spacer { flex: 1; }
.fc-share-dot { color: var(--accent); font-weight: 600; }

.empty-big { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty-big .eb-ico { font-size: 40px; opacity: .5; }

/* Map-level PDF drop (broker) */
#map.drop-hot { outline: 3px dashed var(--accent); outline-offset: -8px; }
#map.drop-hot::after {
  content: "📄  Drop to attach to a property";
  position: absolute; left: 50%; top: 16px; transform: translateX(-50%);
  background: var(--navy); color: #fff; padding: 8px 16px; border-radius: 20px;
  font-size: 13px; font-weight: 600; z-index: 1000; pointer-events: none;
  box-shadow: var(--shadow); white-space: nowrap;
}
.kind-toggle { display: inline-flex; gap: 0; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; vertical-align: middle; margin: 0 2px; }
.kind-toggle .ktog { border: none; background: #fff; font: inherit; font-size: 12px; font-weight: 600; color: var(--muted); padding: 4px 10px; cursor: pointer; }
.kind-toggle .ktog + .ktog { border-left: 1px solid var(--line); }
.kind-toggle .ktog.active { background: var(--navy); color: #fff; }

.pick-row {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px;
  margin-bottom: 8px; cursor: pointer; transition: border-color .12s, background .12s;
}
.pick-row:hover { border-color: var(--accent); background: #f3f8fc; }
.pick-row .pick-num {
  width: 24px; height: 24px; border-radius: 50%; color: #fff; flex: 0 0 auto;
  font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.pick-row .pick-name { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Attachments (Phase 4) */
.att-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; }
.att-badge.ok { background: rgba(31,157,87,.14); color: #14773f; }
.att-badge.bad { background: rgba(196,61,61,.14); color: #a82f2f; }
.att-badge.warn { background: rgba(226,167,46,.16); color: #9a6f12; }
.att-badge.pending { background: rgba(26,115,194,.14); color: #155a99; }
.attach-list li { margin-bottom: 10px; }
.att-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.att-links { font-size: 12px; margin-top: 2px; }
.att-links a { color: var(--accent); text-decoration: none; }
.att-links a:hover { text-decoration: underline; }
.att-form-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.att-form-row .att-nm { flex: 1 1 auto; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attach-upload { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.attach-upload input[type=file] { font-size: 12px; flex: 1 1 auto; min-width: 0; }
.attach-hint { font-size: 11.5px; color: var(--muted); margin-top: 6px; line-height: 1.4; }

.lh-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.backbtn {
  background: none; border: none; color: var(--accent); font: inherit;
  font-weight: 600; font-size: 13px; cursor: pointer; padding: 4px 8px;
  border-radius: 6px; white-space: nowrap;
}
.backbtn:hover { background: #eef2f6; }

/* Breadcrumb */
.crumbs { display: flex; align-items: center; gap: 4px; font-size: 13px; color: #9fb3c8; overflow: hidden; }
.crumbs .crumb { color: #cdd9e5; white-space: nowrap; }
.crumbs .crumb.link { cursor: pointer; }
.crumbs .crumb.link:hover { color: #fff; text-decoration: underline; }
.crumbs .crumb.current { color: #fff; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.crumbs .sep { color: #62809c; opacity: .8; }

.shared-flag {
  font-size: 11px; font-weight: 700; letter-spacing: .4px;
  color: #bfe3cf; border: 1px solid rgba(127,210,160,.5);
  padding: 4px 10px; border-radius: 20px;
}

.btn.xsmall { padding: 3px 8px; font-size: 11px; border-radius: 6px; }

/* Navigator */
.navpane {
  flex: 0 0 250px; width: 250px;
  background: #f8fafc; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; min-height: 0;
  transition: margin-left .2s ease;
}
.navpane.collapsed { margin-left: -250px; }
.navhead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--line);
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  color: var(--muted);
}
.navtree { overflow-y: auto; padding: 8px 6px; flex: 1 1 auto; }

.nav-company { margin-bottom: 4px; }
.nav-company-row {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 6px; border-radius: 6px; cursor: pointer;
}
.nav-company-row:hover { background: #eef2f6; }
.nav-company-row .caret { width: 14px; color: var(--muted); font-size: 11px; flex: 0 0 auto; }
.nav-company-row .cname { font-weight: 650; font-size: 13px; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-company-row .cmeta { font-size: 11px; color: var(--muted); }
.nav-actions { display: none; gap: 2px; }
.nav-company-row:hover .nav-actions,
.nav-survey-row:hover .nav-actions { display: flex; }
.nav-actions button {
  border: none; background: none; cursor: pointer; font-size: 12px;
  padding: 2px 4px; border-radius: 4px; color: var(--muted); line-height: 1;
}
.nav-actions button:hover { background: #dde6ee; color: var(--ink); }

.nav-surveys { margin: 2px 0 4px 16px; }
.nav-survey-row {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13px;
  border-left: 2px solid transparent;
}
.nav-survey-row:hover { background: #eef2f6; }
.nav-survey-row.active { background: #e7f0f9; border-left-color: var(--accent); font-weight: 600; }
.nav-survey-row .sname { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-survey-row .smeta { font-size: 11px; color: var(--muted); }
.nav-survey-row .share-dot { color: var(--accent); font-size: 11px; }
.nav-empty { padding: 18px 12px; font-size: 12px; color: var(--muted); }
.nav-addsurvey { font-size: 12px; color: var(--accent); cursor: pointer; padding: 4px 8px 4px 16px; font-weight: 600; }
.nav-addsurvey:hover { text-decoration: underline; }

/* Login gate */
.gate { position: absolute; inset: 58px 0 0 0; background: var(--bg); display: flex; align-items: center; justify-content: center; z-index: 900; }
.gate-card { text-align: center; background: #fff; padding: 40px 48px; border-radius: 14px; box-shadow: var(--shadow); }
/* Gate sits on a white card; the transparent logo's wordmark is white, so give it a navy plate. */
.gate-card .brandlogo { height: 44px; width: auto; display: block; margin: 0 auto 12px; background: #1d3f8a; padding: 12px 16px; border-radius: 8px; }
.gate-card h2 { margin: 6px 0 4px; font-size: 18px; }
.gate-card p { margin: 0 0 18px; color: var(--muted); font-size: 14px; }

/* Share modal */
.modal.wide { width: 540px; }
.modal-body { padding: 6px 22px; max-height: 60vh; overflow-y: auto; }
.share-row {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px;
}
.share-row .sr-main { flex: 1 1 auto; min-width: 0; }
.share-row .sr-scope {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  padding: 2px 7px; border-radius: 10px; margin-right: 6px;
}
.sr-scope.survey { background: rgba(26,115,194,.12); color: #155a99; }
.sr-scope.company { background: rgba(31,157,87,.14); color: #14773f; }
.share-row .sr-url {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; margin-top: 4px;
}
.share-row .sr-label { font-size: 12px; color: var(--muted); }
.share-empty { padding: 16px 0; color: var(--muted); font-size: 13px; text-align: center; }
.share-actions { display: flex; gap: 6px; flex: 0 0 auto; }

.modal .help { font-size: 12px; color: var(--muted); margin: 0 22px 4px; }

/* ---- In-app PDF viewer (overlay iframe; links no longer leave the app) ---- */
.pdfviewer {
  position: fixed; inset: 0; z-index: 1980; display: flex; flex-direction: column;
  background: rgba(10, 37, 64, .55); backdrop-filter: blur(2px);
}
.pdfviewer[hidden] { display: none; }
.pv-head {
  display: flex; align-items: center; gap: 14px; flex: 0 0 auto;
  background: var(--navy); color: #fff; padding: 10px 16px;
}
.pv-title {
  font-weight: 600; font-size: 14px; flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pv-act {
  color: rgba(255,255,255,.85); font-size: 12.5px; text-decoration: none;
  border: 1px solid rgba(255,255,255,.25); border-radius: 6px; padding: 4px 10px;
}
.pv-act:hover { background: rgba(255,255,255,.12); color: #fff; }
.pv-close {
  background: transparent; border: 0; color: rgba(255,255,255,.85); font-size: 16px;
  cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.pv-close:hover { background: rgba(255,255,255,.12); color: #fff; }
.pv-frame {
  flex: 1; border: 0; width: min(1100px, calc(100% - 32px));
  margin: 0 auto 16px; background: #fff; border-radius: 0 0 8px 8px;
}
body.pv-open { overflow: hidden; }

/* ---- Geo locate confirm bar (provisional pin awaiting broker confirm) ---- */
.geoconfirm {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 250; display: flex; align-items: center; gap: 12px;
  background: var(--navy); color: #fff; padding: 10px 16px;
  border-radius: 10px; box-shadow: var(--shadow); max-width: min(720px, 92vw);
}
.geoconfirm[hidden] { display: none; }
.geoconfirm .gc-text {
  font-size: 12.5px; color: rgba(255,255,255,.9);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- Data tab: suite comparison table over the open survey -------------- */
.dataview {
  position: fixed; inset: 0; z-index: 1900; display: flex; flex-direction: column;
  background: var(--bg);
}
.dataview[hidden] { display: none; }
.dv-head {
  display: flex; align-items: center; gap: 14px; flex: 0 0 auto;
  background: var(--navy); color: #fff; padding: 10px 18px;
}
.dv-title { font-weight: 700; font-size: 15px; }
.dv-count { color: rgba(255,255,255,.7); font-size: 12.5px; flex: 1; }
.dv-close {
  background: transparent; border: 0; color: rgba(255,255,255,.85); font-size: 16px;
  cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.dv-close:hover { background: rgba(255,255,255,.12); color: #fff; }
.dv-body { flex: 1; overflow: auto; padding: 18px; }
.dv-table {
  width: 100%; border-collapse: collapse; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  font-size: 13px;
}
.dv-table th {
  position: sticky; top: 0; background: #eef2f6; color: var(--muted);
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line);
  cursor: pointer; user-select: none; white-space: nowrap;
}
.dv-table th.sorted { color: var(--accent); }
.dv-table td { padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dv-table td.dv-b { font-weight: 600; }
.dv-table tbody tr:hover { background: #fbfcfd; }
.dv-table tr[hidden] { display: none; }          /* hidden must beat any display rule */
.dv-table tr.dv-group:not(.dv-single) { cursor: pointer; background: #f6f8fa; }
.dv-table tr.dv-group:not(.dv-single):hover { background: #eef2f6; }
.dv-caret { display: inline-block; width: 1.1em; color: var(--muted); }
.dv-table td.dv-leaf-b { font-weight: 400; color: var(--muted); padding-left: 30px; }

/* ---- Broker tools tabs (Files / Accounts / Lessons) ----------------------- */
.bt-tabs { display: inline-flex; gap: 4px; margin-left: 14px; }
.bt-tab {
  border: 1px solid rgba(255,255,255,.25); background: transparent; color: #cdd6e0;
  font-size: 12px; padding: 4px 12px; border-radius: 16px; cursor: pointer;
}
.bt-tab.active { background: #fff; color: var(--ink); border-color: #fff; font-weight: 600; }
.bt-forms { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 12px; }
.bt-form {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 14px;
}
.bt-form h4 { margin: 0 6px 0 0; font-size: 12px; color: var(--muted); text-transform: uppercase; }
.bt-form input { border: 1px solid var(--line); border-radius: 6px; padding: 6px 9px; font-size: 13px; }
.bt-hint { color: var(--muted); font-size: 12px; margin: 0 0 10px; }

/* ---- Review screen (approve-before-publish): original | scrubbed --------- */
.reviewview {
  position: fixed; inset: 0; z-index: 1950; display: flex; flex-direction: column;
  background: var(--bg);
}
.reviewview[hidden] { display: none; }
.rv-head {
  display: flex; align-items: center; gap: 12px; flex: 0 0 auto;
  background: var(--navy); color: #fff; padding: 10px 18px;
}
.rv-title {
  font-weight: 700; font-size: 14px; flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rv-close {
  background: transparent; border: 0; color: rgba(255,255,255,.85); font-size: 16px;
  cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.rv-close:hover { background: rgba(255,255,255,.12); color: #fff; }
.rv-panes { flex: 1; display: flex; gap: 14px; padding: 14px; min-height: 0; }
.rv-pane { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.rv-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
            color: var(--muted); margin-bottom: 6px; }
.rv-pane iframe { flex: 1; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.att-badge.review { background: rgba(226,167,46,.16); color: #9a6b12; }

/* ---- Summary tab tiles ---- */
.sv-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
            gap: 12px; margin-bottom: 18px; }
.sv-tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
           box-shadow: var(--shadow); padding: 14px 16px; }
.sv-tile .sv-v { font-size: 20px; font-weight: 700; color: var(--navy); }
.sv-tile .sv-k { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
                 color: var(--muted); margin-top: 2px; }
.sv-tile .sv-s { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.su-plan { font-size: 11px; margin-left: 2px; }
/* the hidden attribute must actually hide (display:grid above outranks the UA
   default) — without this every suite row rendered permanently expanded and
   the ▸/▾ toggles were no-ops */
.suite-detail[hidden] { display: none; }

/* ---- Draw-to-redact mode (review Phase C) ---- */
.rv-draw { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.rv-drawbar { display: flex; align-items: center; gap: 8px; padding: 6px 2px;
              font-size: 12px; color: var(--muted); }
.rv-drawbar .spacer { flex: 1; }
.rv-pagelbl { font-weight: 700; color: var(--ink); }
.rv-drawhint { font-size: 11.5px; }
.rv-pending { color: #c43d3d; font-weight: 700; }
.rv-canvaswrap { position: relative; flex: 1; overflow: auto;
                 border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.rv-canvaswrap img { display: block; width: 100%; height: auto; user-select: none; }
.rv-canvaswrap canvas { position: absolute; left: 0; top: 0; cursor: crosshair; }
#rvRedactBtn.active { background: #c43d3d; color: #fff; border-color: #c43d3d; }
.rv-draw[hidden] { display: none; }

/* ---- Files dashboard status chips ---- */
.fv-chip { background: #eef2f6; border-radius: 12px; padding: 2px 10px; margin-right: 6px;
           font-size: 11.5px; color: var(--ink); white-space: nowrap; }
.fv-chip b { font-weight: 700; }
.fv-chip.fv-needs_review { background: rgba(226,167,46,.18); }
.fv-chip.fv-failed, .fv-chip.fv-rejected { background: rgba(196,61,61,.14); }
.fv-chip.fv-done { background: rgba(31,157,87,.14); }
.bt-sec { margin: 18px 0 4px; font-size: 12px; color: var(--muted); text-transform: uppercase; }
#grantTarget { max-width: 340px; }
.bt-form select { border: 1px solid var(--line); border-radius: 6px; padding: 6px 9px; font-size: 13px; }
.bt-check { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.bt-form[hidden], #usersTable[hidden] { display: none; }  /* hidden must beat display:flex/table */