/* Exxir Parking — the Exxir Dash design system (Hospitality section look).
   Tokens copied from exxir-dash src/styles/globals.css: dark by default, `.light` on <html> for light mode.
   Accent = the Hospitality coral (#E09378). Values: gold = current actual, green up / paid, red down / expired. */
:root {
  --dash-bg: 12 17 24;
  --dash-elevated: 26 35 50;
  --dash-panel: 17 24 39;
  --dash-cream: 245 240 232;
  --dash-amber: 212 168 67;
  --dash-muted: 139 134 128;
  --dash-border: 42 42 42;
  --dash-positive: 52 211 153;
  --dash-negative: 248 113 113;
  --dash-iris: 92 95 235;
  --dash-iris-hi: 160 162 255;
  --dash-coral: 224 147 120;
  --accent: #E09378;
  /* map */
  --m-ground: 12 17 24; --m-road: 26 35 50; --m-block: 17 24 39; --m-lot: 33 43 60; --m-line: 245 240 232;
  --m-green: 30 52 44; --m-tree: 52 92 72; --m-bldg: 36 44 58;
  --lot-F: 212 168 67; --lot-L1: 224 147 120; --lot-L2: 143 179 217;
  --radius: 8px; --radius-lg: 16px;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Montserrat", system-ui, -apple-system, sans-serif;
  color-scheme: dark;
}
/* aliases used by page-level styles */
:root { --ink: rgb(var(--dash-cream)); --ink-soft: rgb(var(--dash-cream) / .8); --line: rgb(var(--dash-border)); --paper: rgb(var(--dash-bg));
  --ok: rgb(var(--dash-positive)); --warn: rgb(var(--dash-amber)); --bad: rgb(var(--dash-negative)); --idle: rgb(var(--dash-muted));
  --copper: rgb(var(--lot-F)); --navy: rgb(var(--lot-L1)); --sage: rgb(var(--lot-L2)); --gold: rgb(var(--dash-amber)); }
.light {
  --dash-bg: 248 247 244;
  --dash-elevated: 240 238 233;
  --dash-panel: 255 255 255;
  --dash-cream: 23 23 23;
  --dash-amber: 138 86 26;
  --dash-muted: 82 82 82;
  --dash-border: 196 189 175;
  --dash-positive: 4 122 80;
  --dash-negative: 198 28 28;
  --dash-iris: 58 48 188;
  --dash-iris-hi: 58 48 188;
  --dash-coral: 172 88 58;
  --accent: #AC583A;
  --m-ground: 240 238 233; --m-road: 226 222 213; --m-block: 255 255 255; --m-lot: 64 70 82; --m-line: 255 255 255;
  --m-green: 222 232 214; --m-tree: 180 202 165; --m-bldg: 228 224 216;
  --lot-F: 176 128 34; --lot-L1: 192 104 72; --lot-L2: 70 112 160;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; max-width: 100%; overflow-x: clip; }
body { background: rgb(var(--dash-bg)); color: rgb(var(--dash-cream)); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); }
button { font: inherit; border-radius: 6px; }
::-webkit-scrollbar { width: 6px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgb(var(--dash-border)); border-radius: 3px; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fade { animation: fadeIn .4s ease-out both; }

/* ---------- header (Dash sticky header) ---------- */
.brandbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  background: rgb(var(--dash-bg) / .95); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-bottom: 1px solid rgb(var(--dash-border) / .5); }
.brandbar img, .logo { height: 24px; width: auto; filter: invert(.94) sepia(.08); }
.light .brandbar img, .light .logo { filter: none; }
.brandbar .t { font: 600 18px var(--serif); color: rgb(var(--dash-cream)); border-left: 1px solid rgb(var(--dash-border)); padding-left: 12px; }
.brandbar .sp { flex: 1; }
.iconbtn { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgb(var(--dash-border)); background: transparent; color: rgb(var(--dash-amber)); cursor: pointer; border-radius: 8px; }
.iconbtn:hover { background: rgb(var(--dash-elevated)); }

.wrap { max-width: 1280px; margin: 0 auto; padding: 20px 16px 48px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; margin: 0; color: rgb(var(--dash-cream)); }
h1 { font-size: 28px; }
.eyebrow, .label { font: 600 10px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--dash-muted)); }
.eyebrow.accent { color: var(--accent); }
.muted { color: rgb(var(--dash-muted)); }

/* ---------- panels & KPI cards ---------- */
.card, .panel { background: rgb(var(--dash-panel)); border: 1px solid rgb(var(--dash-border)); border-radius: var(--radius-lg); padding: 16px; }
.kpi { background: rgb(var(--dash-panel)); border: 1px solid rgb(var(--dash-border)); border-radius: var(--radius); padding: 16px; }
.kpi .label { display: block; margin-bottom: 4px; }
.kpi b { display: block; font: 700 24px var(--sans); font-variant-numeric: tabular-nums; color: rgb(var(--dash-amber)); }
.kpi small { display: block; font-size: 12px; margin-top: 4px; color: rgb(var(--dash-muted)); }
.mapcard { background: rgb(var(--dash-panel)); border: 1px solid rgb(var(--dash-border)); border-radius: var(--radius-lg); padding: 8px; overflow: hidden; }
.legend { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 12px 4px 0; font-size: 12px; color: rgb(var(--dash-muted)); }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 7px; }

/* ---------- tabs (Dash GroupedTabBar) ---------- */
.tabs-groups { display: flex; gap: 2px; border-bottom: 1px solid rgb(var(--dash-border)); overflow-x: auto; }
.tabs-groups button { background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 10px 12px; font: 500 11px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--dash-muted)); cursor: pointer; white-space: nowrap; }
.tabs-groups button:hover { color: rgb(var(--dash-cream)); }
.tabs-groups button[aria-pressed="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.tabs-pills { display: flex; gap: 4px; overflow-x: auto; }
.tabs-pills button { background: none; border: 1px solid transparent; padding: 7px 10px; font: 600 10.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--dash-muted)); cursor: pointer; white-space: nowrap; border-radius: 6px; }
.tabs-pills button:hover { color: rgb(var(--dash-cream)); border-color: rgb(var(--dash-border)); }
.tabs-pills button[aria-pressed="true"] { background: var(--accent); color: rgb(var(--dash-panel)); }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--accent); border-radius: 8px; padding: 12px 18px;
  font: 700 12px var(--sans); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; background: var(--accent); color: rgb(var(--dash-panel)); text-decoration: none; }
.btn.ghost { background: transparent; color: rgb(var(--dash-cream)); border-color: rgb(var(--dash-border)); }
.btn.ghost:hover { border-color: var(--accent); }
.btn.sm { padding: 8px 12px; font-size: 10.5px; }
.pill { display: inline-block; font: 700 10px var(--sans); letter-spacing: .14em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid currentColor; }
.pill.F { color: rgb(var(--lot-F)); background: rgb(var(--lot-F) / .1); }
.pill.L1 { color: rgb(var(--lot-L1)); background: rgb(var(--lot-L1) / .1); }
.pill.L2 { color: rgb(var(--lot-L2)); background: rgb(var(--lot-L2) / .1); }
input, select { font: 500 16px var(--sans); width: 100%; padding: 11px 12px; border: 1px solid rgb(var(--dash-border)); border-radius: 6px; background: rgb(var(--dash-bg)); color: rgb(var(--dash-cream)); }
input::placeholder { color: rgb(var(--dash-muted) / .7); }
input:focus, select:focus { outline: none; border-color: rgb(var(--dash-amber)); }
label { display: block; font: 600 10px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--dash-muted)); margin: 0 0 6px; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid rgb(var(--dash-border) / .6); font-size: 13px; }
th { font: 600 10px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--dash-muted)); cursor: pointer; user-select: none; white-space: nowrap; }
th[data-dir="asc"]::after { content: " ▲"; } th[data-dir="desc"]::after { content: " ▼"; }
tbody tr:hover { background: rgb(var(--dash-elevated) / .5); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- map ---------- */
.lotmap { display: block; width: 100%; height: auto; }
.m-ground { fill: rgb(var(--m-ground)); }
.m-road { fill: rgb(var(--m-road)); }
.m-alley { fill: rgb(var(--m-road) / .8); }
.m-centre { stroke: rgb(var(--dash-muted) / .45); stroke-width: 2; stroke-dasharray: 16 14; }
.m-block { fill: rgb(var(--m-block)); stroke: rgb(var(--dash-border)); stroke-width: 2; }
.m-green { fill: rgb(var(--m-green)); }
.m-tree { fill: rgb(var(--m-tree)); opacity: .85; }
.m-tree-in { fill: rgb(var(--m-tree)); filter: brightness(1.2); }
.m-private { fill: rgb(var(--m-bldg) / .6); }
.m-bldg { fill: rgb(var(--m-bldg)); }
.m-note { font: 600 14px var(--sans); fill: rgb(var(--dash-muted)); text-anchor: middle; letter-spacing: .16em; text-transform: uppercase; }
.m-lot { fill: rgb(var(--m-lot)); }
.m-space { stroke: rgb(var(--m-line) / .55); stroke-width: 1.3; }
.m-s-F { fill: rgb(var(--lot-F) / .14); }
.m-s-L1 { fill: rgb(var(--lot-L1) / .16); }
.m-s-L2 { fill: rgb(var(--lot-L2) / .16); }
.m-ada { fill: rgb(96 140 230 / .55); }
.m-num { font: 600 9.5px var(--sans); fill: rgb(var(--m-line) / .85); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.m-free-edge { fill: none; stroke: rgb(var(--lot-F)); stroke-width: 4; stroke-dasharray: 14 9; }
.m-arrow { fill: rgb(var(--dash-cream) / .8); }
.m-tag rect { stroke: rgb(var(--dash-bg)); stroke-width: 2; }
.m-tag text { font: 700 12.5px var(--sans); fill: rgb(12 17 24); text-anchor: middle; dominant-baseline: central; letter-spacing: .12em; }
.m-tag-F rect { fill: rgb(var(--lot-F)); } .m-tag-L1 rect { fill: rgb(var(--lot-L1)); } .m-tag-L2 rect { fill: rgb(var(--lot-L2)); }
.light .m-tag text { fill: #fff; }
.m-street { font: 600 18px var(--sans); fill: rgb(var(--dash-muted)); letter-spacing: .32em; text-anchor: middle; dominant-baseline: central; }
.m-alley-t { font: 600 12px var(--sans); fill: rgb(var(--dash-muted)); letter-spacing: .4em; text-anchor: middle; dominant-baseline: central; }
.m-north path { fill: rgb(var(--dash-muted)); } .m-north text { font: 700 13px var(--sans); fill: rgb(var(--dash-muted)); text-anchor: middle; }

.m-focus { fill: rgb(var(--dash-amber)) !important; stroke: rgb(var(--dash-cream)); stroke-width: 3; animation: pulse 1.6s ease-in-out infinite; }
.m-num-focus { fill: rgb(12 17 24) !important; font-weight: 800; font-size: 12px; }
@keyframes pulse { 50% { opacity: .55; } }

/* enforcement states (Dash value colours) */
.st-active { fill: rgb(var(--dash-positive) / .85) !important; }
.st-expiring { fill: rgb(var(--dash-amber) / .95) !important; }
.st-expired { fill: rgb(var(--dash-negative) / .9) !important; }
.st-free { fill: rgb(var(--dash-iris) / .9) !important; }
.st-flag { stroke: rgb(var(--dash-cream)) !important; stroke-width: 3 !important; }
.st-dim { opacity: .3; }
.st-unpaid { fill: rgb(var(--dash-negative)) !important; stroke: rgb(var(--dash-cream)) !important; stroke-width: 2.5 !important; }
.st-expired { fill: rgb(var(--dash-negative) / .45) !important; }
.st-left { fill: transparent !important; stroke: rgb(var(--dash-amber)) !important; stroke-width: 2 !important; stroke-dasharray: 4 3; }
.m-num-lbl { font-size: 8.5px; font-weight: 700; }