/* Velorona Map -- dark theme, Velorona brand alignment.
   Tokens sourced from the shared design system repo (read-only reference,
   not vendored as a build dependency -- values copied by hand):
     /Users/aidedgeinc./Downloads/aidedge-velorona-web/packages/design-system/src/styles/theme-velorona.css
       (:root[data-brand='velorona'] block -- Velorona-specific overrides,
       itself sampled from the live reference site's shipped CSS per that
       file's own header comment)
     /Users/aidedgeinc./Downloads/aidedge-velorona-web/packages/design-system/src/styles/tokens.css
       (brand-neutral radius scale, motion easing)
   Font: Geist Sans, self-hosted (see @font-face below), files copied from
     /Users/aidedgeinc./Downloads/aidedge-velorona-web/apps/velorona/public/fonts/geist-sans/
     into web/fonts/geist-sans/ -- same weights (400/500/600/700) as the
     marketing app's own src/styles/fonts.css. */

@font-face {
  font-family: 'Geist Sans';
  src: url('fonts/geist-sans/Geist-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Sans';
  src: url('fonts/geist-sans/Geist-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Sans';
  src: url('fonts/geist-sans/Geist-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Sans';
  src: url('fonts/geist-sans/Geist-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Velorona brand tokens (theme-velorona.css) --- */
  --bg: #05090C;
  --bg-elevated: #081116;
  --surface: #081116;

  --accent: #5F98D1;
  --accent-secondary: #7AAEE3;
  --accent-deep: #224B75;
  --accent-strong: #99C6F3;
  --accent-glow: #99C6F3;
  --cyan: #99C6F3;
  --accent-soft: rgba(95, 152, 209, 0.12);
  --accent-line: rgba(153, 198, 243, 0.24);
  --glow: rgba(153, 198, 243, 0.16);

  --border: rgba(96, 108, 118, 0.22);
  --border-strong: rgba(96, 108, 118, 0.4);

  --radius-lg: 14px;
  --radius-md: 14px;
  --radius-sm: 8px;
  --radius-pill: 999px;

  --text: #F5F7FA;
  --text-muted: #AAB8C2;
  --text-faint: #7c8790;

  --font-display: 'Geist Sans', system-ui, sans-serif;
  --font-body: 'Geist Sans', system-ui, sans-serif;
  --weight-bold: 700;

  --ease-calm: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-fast: 220ms;

  /* --- App-specific status colors (not part of the Velorona token set --
     these describe link-clearance analysis results, not brand identity.
     Chosen for AA contrast against --bg / --bg-elevated and mutual hue
     separation from the marker palette below.) --- */
  --clear: #3FBE72;
  --marginal: #E0A73B;
  --obstructed: #E2594F;
  --near-threshold: #B98CE0;

  --topbar-h: 56px;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  overflow: hidden;
}

/* ---- Top bar (exactly one) ---- */
.topbar {
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 20px;
  padding: 0 18px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}

.topbar-title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 16px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--text);
}

.topbar-actions { display: flex; gap: 8px; }

.topbar-btn {
  font-size: 13px; font-weight: 600; padding: 8px 16px;
  border-radius: var(--radius-pill); border: 1px solid var(--border-strong);
  background: transparent; color: var(--text-muted);
  cursor: pointer; font-family: var(--font-display);
  transition: border-color var(--motion-fast) var(--ease-calm),
              color var(--motion-fast) var(--ease-calm),
              box-shadow var(--motion-fast) var(--ease-calm);
}
.topbar-btn:hover:not(:disabled) {
  border-color: var(--accent-line); color: var(--text);
  box-shadow: 0 0 18px -6px var(--glow);
}
.topbar-btn:disabled { color: var(--text-faint); opacity: 0.5; cursor: default; }

/* ---- Workspace: left panel + map (exactly one left panel) ---- */
.workspace {
  display: flex;
  height: calc(100vh - var(--topbar-h));
}

.left-panel {
  width: 300px;
  min-width: 260px;
  max-width: 22%;
  overflow-y: auto;
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
  padding: 16px;
}

.map-area {
  flex: 1;
  position: relative;
  background: var(--bg);
}

#map { position: absolute; inset: 0; background: var(--bg); }

/* Dark basemap via CSS filter on the standard OSM raster tiles -- see the
   comment in app.js on the tileLayer for why (CARTO's keyless dark tiles
   now watermark "API KEY REQUIRED"; Esri's clean keyless dark canvas is
   restricted to non-commercial use). Applied to the tile pane rather than
   individual tiles (Leaflet's TileLayer has no per-tile className option)
   -- markers/tooltips/lines live in separate panes and are unaffected.
   invert(1) flips light-on-dark to dark-on-light; hue-rotate(180deg)
   corrects the resulting hue shift so water reads as blue-ish rather than
   the orange invert(1) alone would produce; brightness/contrast/saturate
   tuned down slightly so the result reads as a muted dark map, not a
   harsh photo-negative. */
.leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.88) saturate(0.7);
}

/* Leaflet control chrome (zoom buttons, attribution) restyled for dark bg */
.leaflet-control-zoom a {
  background: var(--bg-elevated) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.leaflet-control-zoom a:hover { background: #0d1922 !important; }
.leaflet-control-attribution {
  background: rgba(5, 9, 12, 0.75) !important;
  color: var(--text-faint) !important;
}
.leaflet-control-attribution a { color: var(--text-muted) !important; }

/* ---- Left panel content ---- */
.panel-block { margin-bottom: 20px; }
.panel-block-caveat { margin-top: 8px; }

.panel-heading {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-faint);
  margin: 0 0 10px;
}

.area-context {
  font-size: 12.5px; line-height: 1.5; color: var(--text-muted);
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 9px 11px;
}

.coverage-note {
  font-size: 11px; line-height: 1.5; color: var(--text-faint);
  margin: 6px 0 0;
}

.layer-row {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; padding: 5px 0; cursor: pointer;
  color: var(--text);
}

.layer-row input[type="checkbox"] { accent-color: var(--accent); }

.swatch {
  width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
}
.swatch.line { width: 16px; height: 3px; border-radius: 2px; }

.filter-input {
  width: 100%; font-size: 13px; padding: 8px 10px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font-family: var(--font-body); margin-bottom: 8px;
  background: var(--bg); color: var(--text);
}
.filter-input::placeholder { color: var(--text-faint); }
.filter-input:focus {
  outline: none; border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.filter-input.small { width: 48%; }
.filter-row { display: flex; gap: 4%; }
.filter-label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.filter-hint { font-size: 11px; color: var(--text-faint); margin: -4px 0 8px; line-height: 1.4; }

.caveat {
  font-size: 11.5px; line-height: 1.5; color: var(--text-muted);
  background: rgba(153, 198, 243, 0.06); border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm); padding: 9px 11px; margin: 0;
}

/* ---- Selection bar (floats over the map, not a fixed panel) ---- */
.selection-bar {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  z-index: 900;
  background: var(--bg-elevated); color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill); padding: 9px 14px;
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; box-shadow: 0 12px 30px -8px rgba(0,0,0,0.6);
}

.btn-small {
  font-size: 12px; font-weight: 600; padding: 6px 12px;
  border-radius: var(--radius-pill); border: 1px solid var(--border-strong);
  background: var(--accent-soft); color: var(--text); cursor: pointer;
  font-family: var(--font-display);
}
.btn-small:hover { border-color: var(--accent-strong); box-shadow: 0 0 16px -6px var(--glow); }
.btn-small.btn-ghost { background: transparent; border-color: transparent; opacity: 0.75; }

/* ---- Drawer (opens on click, closes -- not a fixed panel) ----
   No page-blocking backdrop: the container spans the full viewport for
   positioning only (pointer-events: none), so it never intercepts clicks
   on the top bar or left panel while open -- only the drawer panel
   itself (pointer-events: auto) is actually clickable. Multi-select via
   shift-click must keep working on the map while a drawer is open. */
.drawer-overlay {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; justify-content: flex-end;
  pointer-events: none;
}
.drawer-overlay .drawer { pointer-events: auto; }

.drawer {
  width: 380px; max-width: 92vw; height: 100%;
  background: var(--bg-elevated); border-left: 1px solid var(--border);
  box-shadow: -16px 0 40px -12px rgba(0,0,0,0.6);
  padding: 22px; overflow-y: auto; position: relative;
  color: var(--text);
}

.drawer-close {
  position: absolute; top: 14px; right: 16px;
  font-size: 22px; line-height: 1; background: none; border: none;
  cursor: pointer; color: var(--text-faint);
}
.drawer-close:hover { color: var(--text); }

.drawer h3 { margin: 0 0 4px; font-size: 17px; font-family: var(--font-display); color: var(--text); }
.drawer .drawer-source { font-size: 12px; color: var(--text-muted); margin: 0 0 14px; }
.drawer dl { margin: 0; }
.drawer dt { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); margin-top: 10px; }
.drawer dd { margin: 2px 0 0; font-size: 13.5px; color: var(--text); }
.drawer .provenance-block {
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text-muted); line-height: 1.6;
}

/* ---- Import panel / Results panel (same floating-drawer treatment) ---- */
.import-panel, .results-panel {
  position: fixed; top: 74px; right: 16px; z-index: 1500;
  width: 420px; max-width: 92vw; max-height: 80vh; overflow-y: auto;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px -16px rgba(0,0,0,0.7);
  padding: 22px;
  color: var(--text);
}

.results-panel { width: 640px; }

.import-panel h2, .results-panel h2 { margin: 0 0 10px; font-size: 17px; font-family: var(--font-display); }

.upload-help { font-size: 12.5px; line-height: 1.5; color: var(--text-muted); margin-bottom: 12px; }
.upload-help code { font-size: 11px; background: rgba(255,255,255,0.06); color: var(--accent-strong); padding: 2px 5px; border-radius: 4px; }

.actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Reusing the shared design system's .btn/.btn-primary/.btn-secondary
   visual treatment (packages/design-system/src/styles/base.css, ~line
   134-170): soft tinted-glass primary, transparent-until-hover
   secondary -- pill radius, accent-line border, glow on hover. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: 14px; padding: 10px 18px; border-radius: var(--radius-pill);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform var(--motion-fast) var(--ease-calm),
              background var(--motion-fast) var(--ease-calm),
              border-color var(--motion-fast) var(--ease-calm),
              box-shadow var(--motion-fast) var(--ease-calm);
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: var(--accent-soft); color: var(--text); border-color: var(--accent-line);
}
.btn-primary:hover { border-color: var(--accent-strong); box-shadow: 0 0 22px -4px var(--glow); }
.btn-secondary {
  background: transparent; color: var(--text-muted); border-color: var(--border-strong);
}
.btn-secondary:hover { border-color: var(--accent-line); color: var(--text); box-shadow: 0 0 18px -6px var(--glow); }

.status { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 13.5px; }
.status .status-line { margin: 0 0 6px; font-weight: 600; color: var(--text); }
.status .status-error { color: var(--obstructed); font-weight: 600; }

.results-header { display: flex; justify-content: space-between; align-items: center; }
.results-note { margin: 4px 0 12px; font-size: 12.5px; color: var(--text-muted); }

.disclaimer {
  font-size: 12px; line-height: 1.5; color: var(--text-muted);
  background: rgba(224, 167, 59, 0.08); border: 1px solid rgba(224, 167, 59, 0.35);
  border-radius: var(--radius-sm); padding: 9px 11px; margin-bottom: 12px;
}

.results-table-wrap { overflow-x: auto; }
.results-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.results-table th, .results-table td { text-align: left; padding: 8px 9px; border-bottom: 1px solid var(--border); color: var(--text); }
.results-table td:nth-child(4) { min-width: 220px; }
.results-table th { color: var(--text-faint); font-weight: 600; font-size: 10.5px; text-transform: uppercase; }
.results-table tbody tr { cursor: pointer; }
.results-table tbody tr:hover { background: rgba(255,255,255,0.03); }

.status-badge { display: inline-block; padding: 2px 9px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; color: #05090C; }
.status-badge.clear { background: var(--clear); }
.status-badge.marginal { background: var(--marginal); }
.status-badge.obstructed { background: var(--obstructed); color: #05090C; }
.status-badge.near-threshold { background: var(--near-threshold); color: #05090C; }

.profile-wrap { overflow-x: auto; margin-top: 10px; }
#profile-chart { max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); }

/* Site-point markers: L.divIcon (not L.circleMarker -- see app.js comment
   on dotIcon) so they're compatible with Leaflet.markercluster. Reset any
   inherited icon-box background/border so only the inline-styled colored
   dot shows. */
.site-dot-icon { background: transparent; border: none; }

/* Map feature labels (Leaflet tooltips) */
.map-label {
  background: rgba(8, 17, 22, 0.92) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text) !important;
  font-size: 11px !important; font-family: var(--font-body);
  padding: 2px 6px !important; border-radius: 4px !important;
  box-shadow: none !important;
}
.map-label::before { display: none; }

/* Marker cluster icons -- overridden from Leaflet.markercluster's default
   yellow/orange palette to the Velorona blue accent family, so clusters
   read as part of the same dark/blue system rather than a generic plugin
   default. */
.marker-cluster-velorona {
  background: var(--accent-soft);
  border: 2px solid var(--accent-line);
  border-radius: 50%;
}
.marker-cluster-velorona div {
  width: 100%; height: 100%; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(95, 152, 209, 0.28);
  color: var(--text); font-weight: 700; font-family: var(--font-display);
  font-size: 12px;
}

@media (max-width: 720px) {
  .left-panel { position: absolute; z-index: 800; height: 100%; max-width: 80%; }
  .import-panel, .results-panel { left: 8px; right: 8px; width: auto; }
}