/* Vegetation Management demo viewer
   Codex Land / IPIS. Layout: fixed header, full-bleed map, floating panel.

   Brand: Off-Black #0F0F0F, Light Gray #DAD9D9, Codex Orange #FA4C0C.
   Orange is an emphasis colour only: active states, hover, checkbox accents
   and the collapsed filter button. Everything else defaults to neutral grey.

   Risk category and work order status colours are data encoding, not brand,
   and are deliberately left unchanged. */

:root {
  --brand-black: #0F0F0F;
  --brand-gray:  #DAD9D9;
  --accent:      #FA4C0C;
  --accent-dark: #D33E07;
  --accent-tint: #FFF3EE;

  --ink:       #1A1A1A;
  --ink-2:     #5C5C5C;
  --ink-3:     #8A8A8A;
  --rule:      #E1E0DF;
  --rule-firm: #C9C7C5;
  --surface:   #FFFFFF;
  --surface-2: #F5F4F3;

  /* data visualisation, unchanged */
  --risk-high: #c62828;
  --risk-med:  #f9a825;
  --risk-low:  #2e7d32;

  --header-h: 58px;
  --radius:   6px;
  --shadow:   0 2px 10px rgba(15, 15, 15, 0.18);

  --font-head: "Rubik", Arial, Helvetica, sans-serif;
  --font-body: "Nunito Sans", Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--surface-2);
  -webkit-text-size-adjust: 100%;
}

/* ---------------- header ---------------- */

.appbar {
  flex: 0 0 auto;
  height: var(--header-h);
  background: var(--brand-black);
  color: var(--brand-gray);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 18px;
  z-index: 1200;
}

.brand-logo {
  height: 38px;
  width: auto;
  display: block;
  flex: 0 0 auto;
}

.appbar-rule {
  width: 1px;
  height: 24px;
  background: rgba(218, 217, 217, 0.24);
  flex: 0 0 auto;
}

.apptitle {
  margin: 0;
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.005em;
  color: var(--brand-gray);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* lets the title truncate rather than push the link off the bar */
  min-width: 0;
}

/* Cross-link to the analytics dashboard. margin-left:auto anchors this and
   everything after it to the right of the bar. */
.appbar-link {
  margin-left: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 4px;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--brand-gray);
  text-decoration: none;
  white-space: nowrap;
}

/* the glyph marks it as opening in a new tab */
.appbar-link::after {
  content: "\2197";
  font-size: 11px;
  opacity: 0.65;
}

.appbar-link:hover,
.appbar-link:focus-visible {
  color: var(--accent);
  background: rgba(250, 76, 12, 0.12);
}

.appbar-link:hover::after,
.appbar-link:focus-visible::after { opacity: 1; }

.appbar-note {
  margin: 0;
  font-family: var(--font-head);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(218, 217, 217, 0.5);
  white-space: nowrap;
}

/* ---------------- map ---------------- */

.map-wrap { position: relative; flex: 1 1 auto; min-height: 0; }

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

/* ---------------- panel ---------------- */

/* Collapsed filter button carries the accent: it is the one call to action
   when the panel is hidden. */
.panel-toggle {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1100;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: #FFFFFF;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: var(--shadow);
}

.panel-toggle:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

.panel-toggle-bars {
  width: 14px;
  height: 10px;
  background:
    linear-gradient(currentColor, currentColor) 0 0   / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 4px / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 8px / 100% 2px no-repeat;
}

.panel {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1101;
  width: 272px;
  max-height: calc(100% - 24px);
  display: none;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--rule-firm);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.panel.is-open { display: flex; }

.panel-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 8px 10px 14px;
  border-bottom: 1px solid var(--rule);
  background: var(--surface-2);
}

.panel-head h2 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.icon-btn {
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font-size: 22px;
  line-height: 1;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  cursor: pointer;
}

.icon-btn:hover { background: rgba(15, 15, 15, 0.07); color: var(--accent); }

.panel-body { flex: 1 1 auto; overflow-y: auto; padding: 4px 14px 14px; }

.group { padding: 12px 0 4px; border-bottom: 1px solid var(--rule); }
.group:last-child { border-bottom: 0; }

.group-title {
  margin: 0 0 8px;
  font-family: var(--font-head);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* checkboxes */

.check {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 0;
  font-size: 13.5px;
  cursor: pointer;
  min-height: 32px;
}

.check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);   /* brand accent on checkbox fill */
  flex: 0 0 auto;
  cursor: pointer;
  margin: 0;
}

.check:hover .check-label { color: var(--accent-dark); }

.check-label { flex: 1 1 auto; }

.swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18) inset;
}

.count { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* buttons: neutral by default, accent only on hover and active */

.btn-row { display: flex; flex-wrap: wrap; gap: 6px; }

.btn {
  flex: 1 1 auto;
  padding: 8px 10px;
  min-height: 34px;
  border: 1px solid var(--rule-firm);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink-2);
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

.btn:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
  background: var(--accent-tint);
}

.btn:active { background: #FFE6DA; }

.segmented {
  display: flex;
  border: 1px solid var(--rule-firm);
  border-radius: 4px;
  overflow: hidden;
}

.seg {
  flex: 1 1 0;
  padding: 8px 10px;
  min-height: 34px;
  border: 0;
  background: var(--surface);
  color: var(--ink-2);
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
}

.seg + .seg { border-left: 1px solid var(--rule-firm); }
.seg:hover { color: var(--accent-dark); background: var(--accent-tint); }
.seg.is-active { background: var(--accent); color: #FFFFFF; }
.seg.is-active:hover { background: var(--accent-dark); }

/* Four-option variant, laid out 2x2. Must come after the .seg + .seg rule
   above: both selectors carry the same specificity, so source order decides
   which border wins. */
.segmented-quad { display: grid; grid-template-columns: 1fr 1fr; }
.segmented-quad .seg { border: 0; }
.segmented-quad .seg:nth-child(2n)   { border-left: 1px solid var(--rule-firm); }
.segmented-quad .seg:nth-child(n+3)  { border-top: 1px solid var(--rule-firm); }

/* work impact summary */

.impact-note {
  margin: 8px 0 2px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-2);
}

.impact-note b {
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* legend */

.legend { list-style: none; margin: 0; padding: 0; font-size: 12.5px; color: var(--ink-2); }
.legend li { display: flex; align-items: center; gap: 9px; padding: 4px 0; }

.lg-line { width: 20px; height: 0; flex: 0 0 auto; border-radius: 2px; }
.lg-ehv   { border-top: 4px solid #0A2540; }
.lg-trans { border-top: 3px solid #123B5E; }
.lg-dist  { border-top: 2px solid #8FB3C7; }
/* Matches the 0.3mm grey stroke QGIS Server renders for the HIFLD layer. */
.lg-hifld { border-top: 2px solid #8C8C8F; }

.lg-sq { width: 12px; height: 12px; flex: 0 0 auto; border: 2px solid; background: transparent; }

/* Dark basemap. The circuit palette shifts client-side (see LINE_STYLE_DARK
   in app.js), so the legend shifts with it and sits on a ground matching the
   tiles. Without the dark ground the pale strokes would be invisible against
   the light panel and the legend would contradict the map.

   Work order colours are deliberately NOT remapped here. They are the same
   values as label_colors in the Superset dashboard, so changing them would
   desync the two tools. A white halo lifts them off the dark ground instead,
   which keeps the colour identical and still makes the marker findable. The
   same halo is applied to the markers themselves. */
body.basemap-dark .legend {
  background: #474749;
  color: #E4E4E6;
  padding: 8px 10px;
  border-radius: 4px;
}

body.basemap-dark .lg-ehv   { border-top-color: #B3E1FF; }
body.basemap-dark .lg-trans { border-top-color: #5FA8D8; }
body.basemap-dark .lg-dist  { border-top-color: #62798A; }

body.basemap-dark .lg-sq,
body.basemap-dark .wo-marker { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55); }

/* ---------------- refresh control ---------------- */

.refresh-btn {
  margin-left: auto;
  padding: 4px 10px;
  border: 1px solid var(--rule-firm);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font-family: var(--font-head);
  font-size: 11.5px;
  line-height: 1.4;
  cursor: pointer;
  white-space: nowrap;
  transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
}

.refresh-btn:hover:not([disabled]) {
  color: var(--accent-dark);
  border-color: var(--accent);
  background: var(--accent-tint);
}

.refresh-btn[disabled] { opacity: 0.55; cursor: progress; }
.refresh-btn.is-busy::after { content: " ..."; }

/* ---------------- corridor data fold ---------------- */

.group-fold { border-top: 1px solid var(--rule); padding-top: 12px; }

.group-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 7px;
  user-select: none;
}

.group-summary::-webkit-details-marker { display: none; }

/* Disclosure triangle drawn from borders, rotating on open. */
.group-summary::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 150ms ease;
}

.group-fold[open] .group-summary::before { transform: rotate(90deg); }
.group-summary:hover { color: var(--accent-dark); }

.fold-note {
  margin: 2px 0 8px;
  font-size: 11.5px;
  color: var(--ink-3, var(--ink-2));
  opacity: 0.75;
}

.fold-sub {
  margin: 10px 0 4px;
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-2);
  opacity: 0.75;
}

/* Line and point swatches read differently from the polygon blocks. */
.swatch-line { height: 3px; border-radius: 2px; align-self: center; }
.swatch-dot  { border-radius: 50%; }

/* ---------------- generic feature popup ---------------- */

.pop-title {
  margin: 0 0 8px;
  font-family: var(--font-head);
  font-size: 13.5px;
  color: var(--accent-dark);
}

.kv {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 12.5px;
}

.kv:last-child { border-bottom: 0; }
.kv-k { color: var(--ink-2); flex: 0 0 auto; }
.kv-v { text-align: right; font-variant-numeric: tabular-nums; }
.kv-empty { font-size: 12.5px; color: var(--ink-2); font-style: italic; }

/* ---------------- toast ---------------- */

.toast {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 1200;
  transform: translate(-50%, 8px);
  max-width: min(78vw, 380px);
  padding: 9px 15px;
  border-radius: 999px;
  background: rgba(15, 15, 15, 0.9);
  color: #fff;
  font-size: 12.5px;
  line-height: 1.35;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}

.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------------- status / errors ---------------- */

.status {
  position: absolute;
  left: 12px;
  /* clears Leaflet's scale control, which sits bottom-left */
  bottom: 42px;
  z-index: 1100;
  padding: 7px 12px;
  border-radius: var(--radius);
  background: rgba(15, 15, 15, 0.92);
  color: var(--brand-gray);
  font-size: 12.5px;
  box-shadow: var(--shadow);
}

.status.is-hidden { display: none; }

.status.is-error {
  background: #8E1F16;
  color: #FFFFFF;
  max-width: min(440px, calc(100vw - 24px));
  line-height: 1.45;
}

/* ---------------- work order marker ---------------- */

.wo-marker { border: 2px solid #757575; background: transparent; box-sizing: border-box; }

/* ---------------- popups ---------------- */

.leaflet-popup-content-wrapper { border-radius: var(--radius); }

.leaflet-popup-content {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
}

.pop { min-width: 232px; }

.pop-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--rule);
}

.pop-title {
  margin: 0;
  font-family: var(--font-head);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  flex: 1 1 auto;
}

.pop-sub {
  margin: 2px 0 0;
  font-family: var(--font-head);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.badge {
  flex: 0 0 auto;
  min-width: 40px;
  text-align: center;
  padding: 4px 7px;
  border-radius: 4px;
  color: #fff;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.badge-high   { background: var(--risk-high); }
.badge-medium { background: var(--risk-med); color: #3A2A00; }
.badge-low    { background: var(--risk-low); }

.pop-rows {
  margin: 0;
  padding: 9px 13px 11px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
}

.pop-rows dt { color: var(--ink-2); font-size: 12.5px; }
.pop-rows dd { margin: 0; font-size: 12.5px; font-variant-numeric: tabular-nums; text-align: right; }

.pop-foot {
  padding: 9px 13px;
  border-top: 1px solid var(--rule);
  background: var(--surface-2);
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }

.pop-none { color: var(--ink-3); font-style: italic; }

/* ---------------- focus ---------------- */

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.leaflet-container a { color: var(--accent-dark); }
.leaflet-container { font-family: var(--font-body); }

/* ---------------- responsive ---------------- */

@media (max-width: 620px) {
  :root { --header-h: 52px; }

  .brand-logo { height: 30px; }
  .apptitle { font-size: 13.5px; }
  .appbar-note { display: none; }
  .appbar { gap: 11px; padding: 0 12px; }
  /* keeps the analytics link reachable without crowding the bar */
  .appbar-link { font-size: 12.5px; padding: 6px 8px; gap: 5px; }

  .panel {
    top: 8px;
    right: 8px;
    left: 8px;
    width: auto;
    max-height: calc(100% - 16px);
  }

  .panel-toggle { top: 8px; right: 8px; padding: 12px 16px; }

  /* larger touch targets */
  .check { min-height: 40px; padding: 8px 0; }
  .check input[type="checkbox"] { width: 20px; height: 20px; }
  .btn, .seg { min-height: 42px; font-size: 13.5px; }

  .pop { min-width: 216px; }
  .pop-rows dt, .pop-rows dd { font-size: 13px; }

  .status { left: 8px; right: 8px; bottom: 38px; }
}

@media (max-width: 380px) {
  .apptitle { display: none; }
  .appbar-rule { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}