/* WR1/BS1 dashboard theme v2.7.1: values lifted from the Figma redesign
   (navy #1f3a5f, primary #2f6bff, muted #66707f, hairline #a9b6d6,
   page #f3f5f8, Inter 400/500/600/700). Bootstrap supplies the grid and
   utilities; this file owns the shell, cards, pills, viewer and tables. */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/vendor/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/static/vendor/inter-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/static/vendor/inter-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/static/vendor/inter-latin-700-normal.woff2") format("woff2");
}
:root {
  --navy: #1f3a5f;
  --navy-2: #162945;
  --blue: #2f6bff;
  --blue-dark: #1f4fd1;
  --ink: #17233a;
  --muted: #66707f;
  --hairline: #a9b6d6;
  --card-border: #dde3ef;
  --bg: #f3f5f8;
  --high: #d92d20;
  --high-bg: #fee4e2;
  --medium: #dc6803;
  --medium-bg: #fef0c7;
  --low: #b54708;
  --low-bg: #fef7c3;
  --pass: #067647;
  --pass-bg: #d1fadf;
  --na: #475467;
  --na-bg: #eaecf0;
}
html { height: 100%; }
/* body must GROW with the page (min-height, not height): a 100vh-tall body clips the sticky
   range of .topbar to the first viewport, so the navbar scrolled away on long pages */
body { min-height: 100%; }
body {
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg); color: var(--ink); font-size: 14px;
  margin: 0;
}
a { color: var(--blue); }
/* ---------------------------------------------------------------- shell */
.topbar {
  background: var(--navy); color: #fff; min-height: 56px;
  display: flex; align-items: center; gap: 12px; padding: 8px 16px;
  position: sticky; top: 0; z-index: 1030;
}
.topbar .brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark {
  background: #fff; color: var(--navy); font-weight: 700; font-size: 14px;
  border-radius: 8px; padding: 4px 8px; white-space: nowrap;
}
.brand-title { font-weight: 700; font-size: 15px; line-height: 1.2; }
.brand-sub { font-size: 11px; color: #c3cde3; }
.topbar .spacer { flex: 1; }
.topbar .user { font-size: 12px; color: #dbe2f2; white-space: nowrap; }
.btn-dashboard {
  background: rgba(255,255,255,.14); color: #fff; border: 1px solid transparent;
  border-radius: 8px; padding: 6px 14px; font-weight: 600; font-size: 13px; text-decoration: none;
}
.btn-dashboard:hover { color: #fff; background: rgba(255,255,255,.22); }
.btn-signout {
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.55);
  border-radius: 8px; padding: 6px 14px; font-size: 13px;
}
.btn-signout:hover { background: rgba(255,255,255,.12); color: #fff; }
/* language toggle: two segments, active one filled (matches .btn-dashboard) */
.lang-toggle { display: inline-flex; border: 1px solid rgba(255,255,255,.55); border-radius: 8px; overflow: hidden; }
.lang-toggle a { color: #dbe2f2; font-size: 12px; font-weight: 600; padding: 6px 10px; text-decoration: none; }
.lang-toggle a + a { border-left: 1px solid rgba(255,255,255,.35); }
.lang-toggle a.on { background: rgba(255,255,255,.22); color: #fff; }
.lang-toggle a:hover { color: #fff; }
.hamburger { background: none; border: 0; color: #fff; padding: 6px; display: inline-block; cursor: pointer; }
.hamburger:hover { background: rgba(255,255,255,.12); border-radius: 8px; }
/* desktop sidebar collapse (mobile uses the slide-over .nav-open instead) */
@media (min-width: 1001px) {
  body.nav-collapsed .sidebar { display: none; }
  /* v2.8.1: sidebar sticks below the topbar so nav options stay visible while the page scrolls */
  .sidebar { position: sticky; top: 56px; height: calc(100vh - 56px); overflow-y: auto; }
}
.workspace { display: flex; min-height: calc(100vh - 56px); }
.sidebar {
  background: var(--navy); color: #cfd8ec; width: 192px; flex: 0 0 192px;
  padding: 16px 12px; display: flex; flex-direction: column; gap: 4px;
}
.snav {
  display: flex; align-items: center; gap: 9px; color: #cfd8ec; text-decoration: none;
  border-radius: 10px; padding: 10px 10px; font-weight: 500; font-size: 13px; white-space: nowrap;
}
.snav svg { flex: 0 0 auto; opacity: .9; }
.snav:hover { color: #fff; background: rgba(255,255,255,.08); }
.snav.active { background: var(--blue); color: #fff; font-weight: 600; }
.snav.disabled { opacity: .55; cursor: not-allowed; }
.snav.disabled:hover { background: none; color: #cfd8ec; }
.soon {
  margin-left: auto; font-size: 10px; font-weight: 600; background: rgba(255,255,255,.16);
  border-radius: 20px; padding: 1px 8px;
}
.content { flex: 1; min-width: 0; padding: 20px 24px 48px; }
.page-title { font-size: 22px; font-weight: 700; margin: 4px 0 16px; }
/* ---------------------------------------------------------------- cards */
.card { border: 1px solid var(--card-border); border-radius: 12px; box-shadow: 0 1px 2px rgba(16,24,40,.05); }
.card h3 { font-size: 16px; font-weight: 700; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.stat-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.stat { background: #fff; border: 1px solid var(--card-border); border-radius: 12px; padding: 14px 16px; }
.stat .k { font-size: 12px; color: var(--muted); font-weight: 500; }
.stat .v { font-size: 24px; font-weight: 700; margin: 2px 0; }
.stat .v.small-text { font-size: 14px; font-weight: 600; line-height: 1.35; }
.stat .s { font-size: 12px; color: var(--muted); }
.stat.warn { border-color: var(--medium); }
.stat .bar { height: 5px; background: #e6ebf5; border-radius: 4px; margin-top: 8px; }
.stat .bar > div { height: 100%; background: var(--blue); border-radius: 4px; }
/* ---------------------------------------------------------------- upload */
.dropzone {
  border: 2px dashed var(--hairline); border-radius: 12px; background: #fbfcff;
  min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 40px 20px; cursor: pointer; color: var(--muted);
}
.dropzone.over { border-color: var(--blue); background: #eef4ff; }
.dropzone .dz-icon { color: var(--navy); }
.dropzone strong { color: var(--ink); font-size: 16px; }
.file-list { display: flex; flex-direction: column; gap: 12px; margin: 12px 0; }
.file-row {
  display: flex; align-items: center; gap: 12px; background: #fff;
  border: 1px solid var(--card-border); border-radius: 10px; padding: 10px 14px;
}
.file-row .fname { font-weight: 600; }
.file-row .fsize { font-size: 12px; color: var(--muted); }
.file-row .grow { flex: 1; min-width: 0; }
.file-row .remove { border: 0; background: none; font-size: 18px; color: var(--muted); line-height: 1; }
.file-row .remove:hover { color: var(--high); }
.add-more {
  border: 2px dashed var(--hairline); border-radius: 10px; background: none; width: 100%;
  padding: 16px; font-weight: 600; font-size: 15px; color: var(--ink);
}
.add-more:hover { border-color: var(--blue); color: var(--blue); }
/* ---------------------------------------------------------------- pills */
.chip, .badge {
  display: inline-block; font-size: 12px; font-weight: 600; border-radius: 20px;
  padding: 2px 10px; line-height: 1.6; white-space: nowrap;
}
.chip.issue, .badge.issue { background: var(--high); color: #fff; }
.chip.pass, .badge.pass { background: var(--pass); color: #fff; }
.chip.na, .badge.na, .chip.N\/A, .badge.N\/A { background: var(--na); color: #fff; }
.chip.done { background: var(--pass); color: #fff; }
.chip.error { background: var(--high); color: #fff; }
.chip.queued, .chip.running { background: var(--blue); color: #fff; }
.counts .chip { margin-right: 4px; }
.src { font-size: 11px; color: var(--blue); border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; }
.pg { font-size: 11px; color: var(--muted); border: 1px solid var(--card-border); border-radius: 4px; padding: 0 4px; margin-left: 4px; }
.val { color: var(--muted); font-size: 12px; margin-left: 6px; }
/* filter chips (verify view; data-sev is the legacy attribute name) */
.fchip { border: 1px solid var(--card-border); background: #fff; border-radius: 8px; padding: 3px 12px; font-size: 12px; font-weight: 600; color: var(--muted); }
.fchip.on[data-sev="unverified"] { background: var(--na); border-color: var(--na); color: #fff; }
.fchip.on[data-sev="pass"] { background: var(--pass); border-color: var(--pass); color: #fff; }
/* ---------------------------------------------------------------- tables */
.table { font-size: 13px; }
.table thead th { color: var(--muted); font-weight: 600; font-size: 12px; border-bottom: 1px solid var(--card-border); }
.tabulator { font-size: 13px; border: 1px solid var(--card-border); border-radius: 12px; overflow: hidden; background: #fff; }
.tabulator .tabulator-header { background: #f8fafd; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--card-border); }
.tabulator .tabulator-row { border-bottom: 1px solid #eef1f7; }
.tabulator .tabulator-row:hover { background: #f4f7ff; }
.tabulator .tabulator-row.tabulator-selectable:hover { cursor: pointer; }
.tabulator .tabulator-row.no-form, .tabulator .tabulator-row.no-form:hover { cursor: default; background: inherit; }
.tabulator .cell-wrap { white-space: normal !important; word-break: break-word; }
.act-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.act-grid .btn { white-space: nowrap; }
/* ---------------------------------------------------------------- viewer */
.grid-viewer { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; align-items: start; }
.findings-col { min-width: 0; }
#values-table { width: 100%; table-layout: fixed; font-size: 12px; }
#values-table td, #values-table th { white-space: normal; overflow-wrap: anywhere; vertical-align: top; }
#values-table td:first-child { width: 26%; }
.viewer-card { position: sticky; top: 72px; }
/* v2.8.1: the scan scrolls inside the viewer when taller than the viewport, so annotation
   boxes are always reachable; .viewer-inner sizes the overlay to the full image */
.viewer { position: relative; background: #fff; max-height: calc(100vh - 220px); min-height: 320px; overflow-y: auto; }
.viewer-inner { position: relative; }
.viewer img { width: 100%; display: block; border-radius: 6px; }
#overlay { position: absolute; inset: 0; }
#overlay .box { position: absolute; border: 2px solid var(--blue); border-radius: 3px; cursor: pointer; opacity: .45; }
#overlay .box:hover { opacity: 1; }
#overlay .box.issue { border-color: var(--high); }
#overlay .box .tip {
  display: none; position: absolute; z-index: 5; top: 100%; left: 0; width: max-content; max-width: 280px;
  background: var(--ink); color: #fff; font-size: 11px; border-radius: 6px; padding: 4px 8px; white-space: normal;
}
#overlay .box:hover .tip { display: block; }
.tabs button { border: 1px solid var(--card-border); background: #fff; border-radius: 8px; padding: 3px 12px; font-size: 12px; font-weight: 600; color: var(--muted); margin-right: 6px; }
.tabs button.active { background: var(--navy); border-color: var(--navy); color: #fff; }
/* findings */
.cat { margin-bottom: 12px; }
.cat-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; }
.cat-head h4 { margin: 0; font-size: 14px; }
.finding { border-top: 1px solid #eef1f7; padding: 8px 14px; }
.finding .t { cursor: pointer; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.finding .title { font-weight: 600; }
.finding .caret { margin-left: auto; color: var(--muted); font-size: 10px; }
.finding .body { display: none; padding-top: 6px; font-size: 13px; }
.finding.open .body { display: block; }
.finding.open .caret { transform: rotate(90deg); display: inline-block; }
.finding.hl { background: #f4f7ff; }
.finding .fb { margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.finding .prior { font-size: 12px; color: var(--muted); }
/* v2.8.1: Yes/No reflect the latest verdict from anyone (not just the viewer) */
.finding .fb button.on-correct { background: var(--pass); border-color: var(--pass); color: #fff; }
.finding .fb button.on-incorrect { background: var(--high); border-color: var(--high); color: #fff; }
/* v2.8.1: temporary leader line from a hovered finding to its annotation box */
#leader-svg { position: fixed; inset: 0; pointer-events: none; z-index: 1500; }
/* v2.8.4: government-map panel (LandsD topographic tiles, red pin = verified address) */
#map { height: 280px; border-radius: 8px; background: #eef1f7; z-index: 0; }
#map .map-pin { background: #d92d20; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(16,24,40,.4); }
#map-card .leaflet-control-attribution { font-size: 10px; }
/* v2.8.1: heading over the reviewer-optional stack (missed-issue form + histories) */
.extras-heading { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 14px 2px 6px; }
/* misc carried over */
.muted { color: var(--muted); }
.small { font-size: 12px; }
.error { color: var(--high); }
.error-text { color: var(--high); font-size: 12px; margin-top: 4px; }
.historical { background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 8px 12px; }
.hbox { display: flex; align-items: center; gap: 10px; }
.grow { flex: 1 1 auto; min-width: 0; }
.card-flex { flex: 1 1 340px; min-width: 0; }
.wrap { flex-wrap: wrap; }
.space-between { justify-content: space-between; }
.hidden { display: none !important; }
.spin { display: inline-block; width: 11px; height: 11px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin 1s linear infinite; margin-right: 4px; vertical-align: -1px; }
@keyframes spin { to { transform: rotate(360deg); } }
.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; border-radius: 8px; padding: 10px 18px; z-index: 2000; font-size: 13px;
}
.feedback-list { list-style: none; padding-left: 0; }
.feedback-list li { margin-bottom: 8px; }
/* login */
.login-wrap { max-width: 420px; margin: 8vh auto; }
/* admin regen */
#regen-table td { vertical-align: top; }
/* field editor */
.field-editor { margin-top: 6px; }
.field-editor input { margin-bottom: 6px; }
/* buttons keep Bootstrap base; align sizes with the old UI */
.btn-sm { font-size: 12px; }
/* ---------------------------------------------------------------- responsive */
@media (max-width: 1000px) {
  .stat-grid, .stat-grid.cols-2 { grid-template-columns: 1fr 1fr; }
  .grid-viewer { grid-template-columns: 1fr; }
  .viewer-card { position: static; }
  .hamburger { display: inline-block; }
  .sidebar {
    position: fixed; top: 56px; bottom: 0; left: 0; z-index: 1040;
    transform: translateX(-105%); transition: transform .2s ease; width: 240px;
  }
  body.nav-open .sidebar { transform: none; box-shadow: 0 0 24px rgba(0,0,0,.3); }
  .brand-sub, .topbar .user { display: none; }
  .content { padding: 14px 12px 40px; }
}
@media (max-width: 640px) { .stat-grid, .stat-grid.cols-2 { grid-template-columns: 1fr; } }