/* ============================================================
   Statum KPI — Property Vulnerability Map
   Visual system mirrors askstatum.amberoon.com/deposits:
     - White header with 3px gold bottom rule
     - Primary blue #0B3D91, accent gold #FEC71E
     - Text-first branding, no logo image
     - Tabs with gold underline on active
     - Cards: white, 1px #E5E7EC border, radius 8px, no shadow
     - Tier chips: red/yellow/green vulnerability, gold/silver/bronze/none franchise
============================================================ */

:root{
  /* Surfaces */
  --bg:#F7F8FA;
  --card:#FFFFFF;
  --line:#E5E7EC;
  --line-soft:#EEF0F4;
  --th-bg:#F2F4F8;
  --row-hover:#FAFBFD;
  --info-bg:#EEF3FD;
  --info-border:#D4DEF3;

  /* Brand */
  --blue:#0B3D91;
  --blue-tint:rgba(11,61,145,.08);
  --gold:#FEC71E;
  --gold-warm:#FFF8E6;
  --gold-border:#F0D989;
  --gold-text:#5A4A10;

  /* Text */
  --ink:#1A2238;
  --ink-2:#2A2A33;
  --muted:#666677;
  --muted-2:#8a8a99;

  /* Tier — Vulnerability (Red / Yellow / Green) */
  --red-bg:#FEE6DC;   --red-text:#B8340A;
  --yel-bg:#FFF5D6;   --yel-text:#A6760D;
  --grn-bg:#D9F2E3;   --grn-text:#0A7A3F;

  /* Tier — Franchise (Gold / Silver / Bronze / None) */
  --gold-chip-bg:#FFF2C7;   --gold-chip-text:#8F5F07;
  --silver-bg:#E8ECF2;      --silver-text:#3D4758;
  --bronze-bg:#F3DFCC;      --bronze-text:#6F4518;
  --none-bg:#EEEEEE;        --none-text:#666677;

  /* Vulnerability band colors used on the map (same hue family as Statum) */
  --band-1:#0A7A3F;  /* Low — green */
  --band-2:#7CC1B5;  /* Moderate — teal */
  --band-3:#FEC71E;  /* Watch — gold */
  --band-4:#F4A41B;  /* Elevated — bright orange-amber */
  --band-5:#C81E1E;  /* Critical Review — vivid red */

  --radius:8px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:14px;
  line-height:1.5;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit}

/* ============================================================
   HEADER (text-first, white, gold rule)
============================================================ */
.topbar{
  background:var(--card);
  padding:20px 28px;
  border-bottom:3px solid var(--gold);
}
.topbar-row{
  max-width:1400px;
  margin:0 auto;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
}
.brand{flex:1; min-width:0}
.brand-name{
  font-size:22px;
  font-weight:700;
  color:var(--blue);
  letter-spacing:-.005em;
  line-height:1.4;
}
.brand-sub{
  font-size:13px;
  color:var(--muted);
  margin-top:4px;
}
/* Mode switch — inline, simple, blue/gray */
.mode-switch{
  display:flex; align-items:center; gap:10px;
  white-space:nowrap;
  padding-top:4px;
}
.mode-label{font-size:12.5px; font-weight:600; color:var(--blue); letter-spacing:.3px; text-transform:uppercase}
.mode-hint{font-size:11px; color:var(--muted); min-width:130px; text-align:left}
.switch{position:relative; display:inline-block; width:40px; height:22px}
.switch input{opacity:0; width:0; height:0}
.slider{position:absolute; cursor:pointer; inset:0; background:#C8CED9; border-radius:22px; transition:.2s}
.slider::before{content:""; position:absolute; height:16px; width:16px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 2px rgba(0,0,0,.15)}
.switch input:checked + .slider{background:var(--blue)}
.switch input:checked + .slider::before{transform:translateX(18px)}

/* Hide the old logo SVG — we are text-first */
.logo{display:none}

/* ============================================================
   TABS — uppercase, gold underline on active
============================================================ */
.tabs{
  background:var(--card);
  border-bottom:1px solid var(--line);
  padding:0 28px;
  display:flex;
  gap:4px;
  overflow-x:auto;
  max-width:none;
}
.tabs-inner{max-width:1400px; margin:0 auto; display:flex; gap:4px; width:100%}
.tab{
  padding:14px 22px;
  font-size:12.5px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--muted);
  border:0;
  border-bottom:3px solid transparent;
  background:transparent;
  white-space:nowrap;
  cursor:pointer;
  transition:color .15s, background .15s, border-color .15s;
}
.tab:hover{color:var(--blue); background:#FAFAFA}
.tab.active{color:var(--blue); border-bottom-color:var(--gold)}

/* ============================================================
   PAGES + GLOBAL CONTAINER
============================================================ */
.page{display:none}
.page.active{display:block; animation:fade .25s ease}
@keyframes fade{
  0%{opacity:0; transform:translateY(4px)}
  100%{opacity:1; transform:none}
}
.page-pad{
  max-width:1400px;
  margin:0 auto;
  padding:24px 28px 60px;
}

/* Page header pattern */
.page-header h1{
  font-size:22px;
  font-weight:700;
  color:var(--blue);
  margin:0 0 4px;
  letter-spacing:-.005em;
}
.page-sub{
  font-size:13px;
  color:var(--muted);
  margin:0 0 22px;
}

/* ============================================================
   MAP PAGE — keep dashboard structure, restyle chrome
============================================================ */
#page-map{height:calc(100vh - 64px - 49px); /* topbar + tabs */ }
#page-map.active{
  display:grid;
  grid-template-columns:320px 1fr;
  animation:fade .25s ease;
}
.sidebar{
  background:var(--card);
  border-right:1px solid var(--line);
  padding:18px 18px 24px;
  overflow-y:auto;
}
.search-box input{
  width:100%;
  padding:7px 10px;
  border:1px solid #CCCCDD;
  border-radius:6px;
  background:var(--card);
  font-size:13px;
  color:var(--ink);
  height:33px;
}
.search-box input:focus{
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 2px rgba(11,61,145,.15);
}

.filter-group{margin-top:14px}
.filter-group:first-of-type{margin-top:4px}
.filter-label{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.4px;
  color:var(--blue);
  margin-bottom:8px;
  padding-bottom:5px;
  border-bottom:1px solid var(--line-soft);
}
.field{display:block; margin-bottom:8px}
.field>span{
  display:block;
  font-size:11px;
  color:var(--muted);
  margin-bottom:4px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.4px;
}
.field select, .field input{
  width:100%;
  padding:5px 10px;
  border:1px solid #CCCCDD;
  border-radius:6px;
  background:var(--card);
  font-size:12.5px;
  color:var(--ink);
  height:30px;
}
.field select:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 2px rgba(11,61,145,.15)}

.check{display:flex; align-items:center; gap:8px; padding:3px 0; font-size:12.5px; cursor:pointer; color:var(--ink-2)}
.check input{accent-color:var(--blue)}
.dot{width:10px; height:10px; border-radius:50%; background:var(--c); display:inline-block; border:1px solid rgba(0,0,0,.08)}

.legend-row{display:flex; align-items:center; gap:8px; padding:2px 0; font-size:12px; color:var(--ink-2)}
.swatch{width:12px; height:12px; border-radius:3px; display:inline-block; flex-shrink:0}

/* Statum-style yellow note */
.footnote{
  margin-top:14px;
  background:var(--gold-warm);
  border-left:3px solid var(--gold);
  padding:9px 12px;
  font-size:11.5px;
  color:var(--gold-text);
  line-height:1.45;
  border-radius:0 4px 4px 0;
}

/* ============================================================
   MAP
============================================================ */
.map-wrap{position:relative; background:#dde3ea}
#map{height:100%; width:100%}

/* KPI strip floating on map — match KPI tile style */
.kpi-strip{
  position:absolute; top:14px; left:60px;
  display:flex; gap:0;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  z-index:400;
  overflow:hidden;
}
.kpi{
  padding:10px 16px;
  border-right:1px solid var(--line);
  min-width:0;
}
.kpi:last-child{border-right:none}
.kpi-label{
  font-size:11px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.5px;
  font-weight:600;
  white-space:nowrap;
}
.kpi-value{
  font-size:20px;
  font-weight:700;
  margin-top:3px;
  color:var(--blue);
  font-variant-numeric:tabular-nums;
  line-height:1;
}

/* ============================================================
   PARCEL CARD — Statum card on the map
============================================================ */
.parcel-card{
  position:absolute; top:14px; right:14px; width:340px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  z-index:500;
  padding:18px;
  max-height:calc(100% - 28px);
  overflow-y:auto;
  box-shadow:0 4px 14px rgba(11,61,145,.08);
}
.parcel-card.hidden{display:none}
.card-close{
  position:absolute; top:10px; right:12px;
  background:transparent; border:0; font-size:20px; cursor:pointer;
  color:var(--muted); width:24px; height:24px; line-height:1;
}
.card-close:hover{color:var(--blue)}

.card-head{display:flex; gap:12px; align-items:flex-start; margin-bottom:14px}
/* Replace the colored band pill with a Statum-style dim-badge */
.band-pill{
  width:42px; height:42px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:16px; color:#fff;
  flex-shrink:0;
}
.card-title{font-size:14px; font-weight:700; line-height:1.35; color:var(--blue)}
.card-sub{font-size:11px; color:var(--muted); margin-top:3px; font-variant-numeric:tabular-nums}

.meter-block{margin-bottom:14px}
.meter-row{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px}
.meter-label{
  font-size:11px; color:var(--muted); font-weight:600;
  text-transform:uppercase; letter-spacing:.4px;
}
.meter-value{font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--blue)}
.meter-bar{height:6px; background:var(--line-soft); border-radius:3px; overflow:hidden}
.meter-fill{height:100%; transition:width .3s, background .3s}

.card-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px}
.card-stat{
  padding:10px 12px;
  background:var(--bg);
  border:1px solid var(--line-soft);
  border-radius:6px;
}
.stat-label{font-size:10.5px; color:var(--muted); font-weight:600; line-height:1.3; text-transform:uppercase; letter-spacing:.3px}
.stat-value{font-size:15px; font-weight:700; margin-top:3px; font-variant-numeric:tabular-nums; color:var(--blue)}
.stat-bar{height:3px; background:var(--card); border-radius:2px; margin-top:6px; overflow:hidden}
.stat-bar>span{display:block; height:100%}

.card-meta{display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; margin-bottom:14px; padding-top:12px; border-top:1px solid var(--line-soft)}
.card-meta>div{display:flex; flex-direction:column; gap:2px}
.card-meta span{font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.3px; font-weight:600}
.card-meta b{font-size:13px; font-weight:600; color:var(--ink)}

.card-bank{padding-top:12px; border-top:1px solid var(--line-soft); margin-bottom:14px}
.bank-title{
  font-size:11px; color:var(--blue); font-weight:700;
  text-transform:uppercase; letter-spacing:.4px; margin-bottom:8px;
}
.bank-grid{display:grid; grid-template-columns:1fr 1fr; gap:6px 16px}
.bank-grid>div{display:flex; flex-direction:column}
.bank-grid span{font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.3px; font-weight:600}
.bank-grid b{font-size:12.5px; font-weight:600; color:var(--ink)}
.bank-grid .watch-row{
  grid-column:1/-1; padding:6px 10px; margin-top:6px;
  background:var(--red-bg); color:var(--red-text);
  border-radius:4px; font-size:11.5px; font-weight:700;
}

.card-drivers{padding-top:12px; border-top:1px solid var(--line-soft)}
.drivers-title{
  font-size:11px; color:var(--blue); font-weight:700;
  text-transform:uppercase; letter-spacing:.4px; margin-bottom:6px;
}
.drivers-text{font-size:12.5px; color:var(--ink-2); line-height:1.55}

/* ============================================================
   GENERIC PAGE COMPONENTS (Statum patterns)
============================================================ */

/* KPI tile row */
.stat-row{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:16px;
  margin-bottom:24px;
}
.big-stat{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
}
.bs-label{
  font-size:11px; color:var(--muted);
  text-transform:uppercase; letter-spacing:.5px; font-weight:600;
}
.bs-value{
  font-size:28px; font-weight:700; color:var(--blue);
  margin-top:6px; line-height:1;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.005em;
}
.bs-sub{font-size:12px; color:var(--muted); margin-top:6px}

/* Tier-colored KPI values */
.bs-value.tier-red{color:var(--red-text)}
.bs-value.tier-yellow{color:var(--yel-text)}
.bs-value.tier-green{color:var(--grn-text)}
.bs-value.tier-gold{color:var(--gold-chip-text)}

/* Cards */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
  margin-bottom:20px;
}
.card-h{
  font-size:16px;
  font-weight:700;
  color:var(--blue);
  margin-bottom:14px;
  letter-spacing:-.005em;
}
.card-h .em{color:var(--ink-2); font-weight:400; font-size:13px; margin-left:8px}

.muted{color:var(--muted); font-size:13px}
.muted.small{font-size:11.5px}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px}

/* Bar chart rows (no Chart.js — we keep them HTML/CSS, but styled like Statum) */
.bar-chart{display:flex; flex-direction:column; gap:8px}
.bar-row{
  display:grid;
  grid-template-columns:140px 1fr 100px;
  align-items:center;
  gap:12px;
  font-size:12.5px;
  color:var(--ink-2);
}
.bar-row .bar{height:16px; background:var(--line-soft); border-radius:3px; overflow:hidden}
.bar-row .bar>span{display:block; height:100%; border-radius:3px}
.bar-row .val{text-align:right; font-variant-numeric:tabular-nums; font-weight:600; color:var(--blue)}

/* Tables — Statum data-table */
.data-table{width:100%; border-collapse:collapse; font-size:13px}
.data-table th{
  text-align:left;
  padding:10px 12px;
  font-weight:700;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.4px;
  color:var(--blue);
  background:var(--th-bg);
  border-bottom:2px solid var(--line);
}
.data-table td{
  padding:9px 12px;
  border-bottom:1px solid var(--line-soft);
  vertical-align:middle;
  color:var(--ink);
}
.data-table tbody tr:hover{background:var(--row-hover); cursor:pointer}
.data-table small{color:var(--muted)}
.data-table code{font-family:"SF Mono","Menlo","Consolas",monospace; font-size:12px; color:var(--blue); font-weight:600}

/* Band tag — Statum chip */
.band-tag{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:20px; padding:0 8px;
  border-radius:12px;
  color:var(--ink); font-weight:700; font-size:11px;
  letter-spacing:.3px;
  background:var(--none-bg);
}
.band-tag.b1{background:var(--grn-bg); color:var(--grn-text)}
.band-tag.b2{background:var(--grn-bg); color:var(--grn-text)}
.band-tag.b3{background:var(--yel-bg); color:var(--yel-text)}
.band-tag.b4{background:var(--red-bg); color:var(--red-text)}
.band-tag.b5{background:var(--red-bg); color:var(--red-text)}

/* Direction arrows */
.dir{display:inline-block; font-weight:700; font-size:14px}
.dir.up{color:var(--red-text)}
.dir.down{color:var(--grn-text)}
.dir.flat{color:var(--muted)}

/* Confidence pills */
.conf-tag{display:inline-block; padding:2px 10px; border-radius:12px; font-size:11px; font-weight:700; letter-spacing:.3px}
.conf-H{background:var(--grn-bg); color:var(--grn-text)}
.conf-M{background:var(--yel-bg); color:var(--yel-text)}
.conf-L{background:var(--red-bg); color:var(--red-text)}

.watch-yes{color:var(--red-text); font-weight:700}
.watch-no{color:var(--muted)}

/* Weights panel */
.weights{display:flex; flex-direction:column; gap:10px; margin-top:10px}
.w-row{
  display:grid; grid-template-columns:170px 1fr 50px;
  align-items:center; gap:14px; font-size:13px; color:var(--ink-2);
}
.w-row label{font-weight:600}
.w-row input[type=range]{accent-color:var(--blue)}
.w-row span{
  text-align:right; font-variant-numeric:tabular-nums;
  font-weight:700; color:var(--blue);
}

/* Anchor jump nav (like Risk Drivers) */
.anchor-nav{
  background:var(--info-bg);
  border:1px solid var(--info-border);
  border-radius:6px;
  padding:10px 14px;
  margin-bottom:20px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  font-size:12.5px;
  color:var(--ink-2);
}
.anchor-nav strong{color:var(--blue); margin-right:6px; font-size:11px; letter-spacing:.4px; text-transform:uppercase}
.anchor-nav a{
  color:var(--blue);
  font-weight:600;
  text-decoration:none;
  padding:3px 10px;
  background:var(--card);
  border:1px solid #C8D4ED;
  border-radius:4px;
  font-size:12.5px;
}
.anchor-nav a:hover{background:#fff; border-color:var(--blue)}

/* Inline definition block */
.defs{
  font-size:12.5px;
  color:var(--ink-2);
  line-height:1.55;
  margin-top:10px;
}
.defs strong{color:var(--blue); font-weight:700}

/* ============================================================
   BOARD REPORT
============================================================ */
.board-toolbar{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:20px;
}
.board-toolbar h1{
  margin:0; font-size:22px; font-weight:700; color:var(--blue);
  letter-spacing:-.005em;
}
.toolbar-actions{display:flex; gap:8px}
.btn{
  padding:7px 14px;
  border-radius:6px;
  border:1px solid #CCCCDD;
  background:var(--card);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  color:var(--ink-2);
  transition:all .15s;
}
.btn:hover{background:#FAFBFD; border-color:var(--blue); color:var(--blue)}
.btn-primary{background:var(--blue); color:#fff; border-color:var(--blue)}
.btn-primary:hover{background:#08306f; color:#fff; border-color:#08306f}

.board{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:36px 40px;
  max-width:920px;
  margin:0 auto;
}
.board h2{
  font-size:14px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--blue);
  margin:28px 0 14px;
  padding-bottom:6px;
  border-bottom:2px solid var(--gold);
}
.board-head{
  display:flex; justify-content:space-between; align-items:flex-start;
  padding-bottom:18px;
  border-bottom:3px solid var(--gold);
}
.board-brand svg{display:none} /* text-first */
.board-title{
  font-size:20px; font-weight:700; color:var(--blue);
  letter-spacing:-.005em; line-height:1.3;
}
.board-sub{font-size:12.5px; color:var(--muted); margin-top:4px}

.board-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px,1fr));
  gap:12px;
}
.board-stats .bs{
  padding:14px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:6px;
}
.board-stats .bs-l{
  font-size:11px; color:var(--muted); font-weight:600;
  text-transform:uppercase; letter-spacing:.4px;
}
.board-stats .bs-v{
  font-size:22px; font-weight:700; color:var(--blue);
  margin-top:4px; line-height:1; font-variant-numeric:tabular-nums;
}
.board-map-placeholder{
  padding:14px 16px;
  background:var(--gold-warm);
  border:1px solid var(--gold-border);
  border-radius:6px;
  margin-bottom:10px;
}
.board-map-note{font-size:12.5px; color:var(--gold-text); margin-bottom:10px}
.board-city-list{list-style:none; padding:0; margin:0; columns:2; column-gap:24px}
.board-city-list li{
  padding:4px 0; font-size:12.5px;
  display:flex; justify-content:space-between; gap:8px;
  break-inside:avoid; color:var(--ink-2);
}
.board-city-list .swatch{width:10px; height:10px; border-radius:2px; display:inline-block; margin-right:6px; vertical-align:middle}
.action-list{margin:0; padding-left:18px; line-height:1.7; font-size:13px; color:var(--ink-2)}
.action-list li{margin-bottom:4px}
.methodology p{font-size:12.5px; line-height:1.6; color:var(--ink-2); margin:0 0 10px}
.confidence-line{font-size:12.5px; color:var(--ink-2)}
.board-footer{
  margin-top:28px; padding:10px 14px;
  background:var(--gold-warm);
  border:1px solid var(--gold-border);
  border-radius:4px;
  display:flex; justify-content:space-between; gap:16px;
  font-size:12px; color:var(--gold-text);
}

/* ============================================================
   FLOATING UPLOAD FAB — match Statum quiet button style
============================================================ */
.upload-fab{
  position:fixed; bottom:24px; right:24px;
  background:var(--card);
  color:var(--blue);
  padding:8px 16px;
  border:1px solid var(--blue);
  border-radius:6px;
  cursor:pointer;
  font-size:12.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.5px;
  z-index:8000;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:background .15s;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.upload-fab:hover{background:var(--blue); color:#fff}

/* ============================================================
   MODE VISIBILITY
============================================================ */
body:not(.mode-private) .private-only{display:none !important}

/* ============================================================
   LEAFLET
============================================================ */
.leaflet-container{font-family:inherit}
.leaflet-control-attribution{font-size:10px}
.leaflet-popup-content-wrapper, .leaflet-tooltip{
  border-radius:4px;
}
.leaflet-tooltip{
  background:rgba(11,61,145,.95);
  color:#fff;
  border:none;
  padding:6px 10px;
  font-size:12px;
  box-shadow:none;
}
.leaflet-tooltip-top:before, .leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before, .leaflet-tooltip-right:before{
  border-top-color:rgba(11,61,145,.95);
}

/* ============================================================
   PRINT
============================================================ */
@media print{
  .topbar, .tabs, .upload-fab, .board-toolbar{display:none !important}
  .page{display:none !important}
  #page-board{display:block !important}
  .page-pad{padding:0; max-width:none}
  .board{border:none; padding:0; max-width:none}
  body{background:#fff}
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width:1100px){
  .grid-2{grid-template-columns:1fr}
  .board-stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .tabs-inner{flex-wrap:nowrap}
  .topbar-row{flex-direction:column; gap:14px}
  .mode-switch{align-self:flex-start}
}
@media (max-width:760px){
  .brand-sub{display:none}
  #page-map.active{grid-template-columns:1fr}
  .sidebar{display:none}
  .parcel-card{width:calc(100% - 28px)}
}

/* ============================================================
   PORTFOLIO UPLOAD MODAL
============================================================ */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(15,23,42,0.55);
  display:flex; align-items:center; justify-content:center;
  z-index:9000; padding:24px;
}
.modal-backdrop.hidden{display:none}
.modal{
  background:#fff; border-radius:12px; max-width:880px; width:100%;
  max-height:90vh; overflow-y:auto; position:relative;
  box-shadow:0 24px 60px rgba(0,0,0,0.25);
  padding:32px 36px;
}
.modal-close{
  position:absolute; top:14px; right:14px; width:32px; height:32px;
  border:none; background:transparent; border-radius:50%;
  font-size:24px; cursor:pointer; color:#64748b;
}
.modal-close:hover{background:#f1f5f9; color:#0f172a}

.upload-step h2{ font-size:22px; font-weight:700; color:var(--blue); margin:0 0 8px }
.upload-step h3{ font-size:18px; margin:18px 0 8px }
.upload-step h4{ font-size:13px; font-weight:700; color:#334155; text-transform:uppercase; letter-spacing:0.04em; margin:24px 0 10px }

.upload-options{
  display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:20px 0 12px;
}
.option-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  padding:24px 22px; border:1.5px dashed var(--line); border-radius:10px;
  background:#fff; text-align:left; cursor:pointer; transition:.15s;
}
.option-card:hover, .option-card.drag{
  border-color:var(--blue); background:#F7F8FA;
}
.option-card.primary{
  background:linear-gradient(135deg, #0B3D91 0%, #143C7A 100%);
  border-color:var(--blue); color:#fff;
}
.option-card.primary .option-title{color:#fff}
.option-card.primary .option-sub{color:#cbd5e1}
.option-title{ font-size:16px; font-weight:700; color:var(--blue) }
.option-sub{ font-size:13px; color:#64748b; line-height:1.5 }

.loading-spinner{
  width:48px; height:48px; border:4px solid #e2e8f0; border-top-color:var(--blue);
  border-radius:50%; animation:spin 0.8s linear infinite; margin:24px auto;
}
@keyframes spin{ to { transform: rotate(360deg) } }

.map-table-wrap{ max-height:340px; overflow:auto; border:1px solid var(--line); border-radius:8px }
#mapTable{ width:100%; font-size:13px }
#mapTable td{ padding:10px 14px; vertical-align:top }
#mapTable td:first-child{ width:42% }
#mapTable .req{ color:var(--red, #C81E1E); font-weight:700 }
.map-select{
  width:100%; padding:7px 10px; border:1px solid var(--line); border-radius:6px;
  background:#fff; font-size:13px; font-family:inherit;
}

.upload-preview{ max-height:200px; overflow:auto; border:1px solid var(--line); border-radius:8px }
.upload-preview table{ font-size:12px }
.upload-preview td{ padding:6px 10px; max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

.modal-actions{
  display:flex; justify-content:flex-end; gap:10px; margin-top:24px;
  padding-top:18px; border-top:1px solid var(--line);
}
.btn-ghost{ background:transparent; color:var(--blue); border:1px solid var(--line) }
.btn-ghost:hover{ background:#F7F8FA }

.result-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin:18px 0;
}
.rs{ background:#F7F8FA; border:1px solid var(--line); border-radius:8px; padding:16px }
.rs-l{ font-size:11px; color:#64748b; text-transform:uppercase; letter-spacing:0.04em; font-weight:600 }
.rs-v{ font-size:22px; font-weight:700; color:var(--blue); margin-top:6px }
.unmatched-list{ font-size:13px; max-height:240px; overflow:auto; padding-left:18px }
.unmatched-list li{ margin:4px 0 }

/* New bar-chart structure (matches app.js generated markup) */
.bar-chart .bar-row{
  display:grid; grid-template-columns:180px 1fr 150px; gap:14px; align-items:center;
}
.bar-row .bar-label{ font-size:13px; color:#334155; display:flex; align-items:center; gap:8px }
.bar-row .bar-dot{ width:10px; height:10px; border-radius:2px; display:inline-block }
.bar-row .bar-track{ height:16px; background:var(--line-soft, #eef0f4); border-radius:3px; overflow:hidden }
.bar-row .bar-fill{ height:100%; border-radius:3px; transition:width .25s }
.bar-row .bar-val{ text-align:right; font-variant-numeric:tabular-nums; font-weight:600; color:var(--blue); font-size:13px }

/* Mode-private/public visibility */
body:not(.mode-private) .private-only{ display:none !important }

/* Compact table */
.data-table.compact th, .data-table.compact td{ padding:6px 10px; font-size:12.5px }

@media (max-width:720px){
  .upload-options{ grid-template-columns:1fr }
  .result-grid{ grid-template-columns:1fr 1fr }
  .modal{ padding:24px 18px }
  .bar-chart .bar-row{ grid-template-columns:120px 1fr 90px; gap:8px }
}

/* ---- SAMPLE DATA badge ---- */
.sample-badge{
  display:inline-block;
  vertical-align:middle;
  margin-left:12px;
  padding:4px 10px;
  background:#fff4d6;
  color:#7a4d00;
  border:1.5px solid #f4a41b;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-family:Inter,-apple-system,sans-serif;
  cursor:help;
  line-height:1.4;
  position:relative;
  top:-3px;
}
.sample-badge.hidden{ display:none }
.sample-badge::before{
  content:"●";
  color:#f4a41b;
  margin-right:6px;
}