/* =====================================================================
   Farm MSP — stylesheet
   Design system: "WattVision" data-console
   Technical reliability + control. Dark surface, high-contrast data,
   monospaced metrics. Not a social app — an instrument panel.

   Palette
     --bg       #121212  app background
     --surface  #1E1E1E  card / panel surface
     --accent   #00E58A  primary data accent (charts, KPIs, actions)
     --alert    #FF453A  alerts, spikes, overdue
     --ok       #32D74B  live / normal / healthy
     --line     #2C2C2E  hairline borders + chart grid
     --text     #FFFFFF  primary text
     --muted    #98989D  labels, secondary text
   ===================================================================== */

:root {
  /* --- surfaces --- */
  --bg: #121212;
  --surface: #1E1E1E;
  --surface-2: #252525;
  --surface-3: #2C2C2E;
  --line: #2C2C2E;
  --line-soft: #232325;

  /* --- data accents --- */
  --accent: #00E58A;
  --accent-dim: #00B872;
  --accent-glow: rgba(0, 229, 138, 0.14);
  --ok: #32D74B;
  --ok-dim: #30D158;
  --alert: #FF453A;
  --alert-bg: #3A1C1C;
  --warn: #FFD60A;
  --warn-bg: #3A331C;
  --info: #64D2FF;

  /* --- text --- */
  --text: #FFFFFF;
  --muted: #98989D;
  --muted-2: #8A8A90; /* 4.6:1 on --surface — also used for real text (nav headers, empty states) */

  /* --- legacy aliases (kept so existing pages keep rendering) --- */
  --pine: #FFFFFF;
  --pine-2: #1E1E1E;
  --leaf: #00E58A;
  --leaf-dark: #00E58A;
  --harvest: #FFD60A;
  --paper: #121212;
  --card: #1E1E1E;
  --ink: #FFFFFF;
  --clay: #FF453A;

  /* --- geometry: everything is a multiple of 8 --- */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.28);

  /* --- readable text on filled accents --- */
  --on-accent: #002A1C;
  --on-warn: #2B2400;

  /* --- form fields --- */
  --field-border: #3A3A3C;
  --field-focus-bg: #1A1A1A;
  --field-disabled-bg: #1A1A1A;

  /* Tells the browser to paint native dropdowns, date pickers and
     scrollbars dark. Overridden by the light theme below. */
  color-scheme: dark;

  /* --- type --- */
  --font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", "Fira Code", ui-monospace, "Cascadia Mono", "Consolas", monospace;
}

/* =====================================================================
   LIGHT THEME
   Same instrument-panel structure, ink on paper. Accents are darkened
   so every one of them clears 4.5:1 on white — neon cyan does not.
   The theme is set on <html data-theme> before first paint by the
   bootstrap script in includes/header.php.
   ===================================================================== */
:root[data-theme="light"] {
  --bg: #F1F3F6;
  --surface: #FFFFFF;
  --surface-2: #F4F6F9;
  --surface-3: #E6EAEF;
  --line: #DCE1E8;
  --line-soft: #EDF0F4;

  --accent: #047857;
  --accent-dim: #059669;
  --accent-glow: rgba(4, 120, 87, 0.10);
  --ok: #15803D;
  --ok-dim: #16A34A;
  --alert: #DC2626;
  --alert-bg: #FDECEA;
  --warn: #B45309;
  --warn-bg: #FDF3E3;
  --info: #0369A1;

  --text: #131720;
  --muted: #5B6472;
  --muted-2: #6B7280; /* 4.83:1 on white — group headers are small uppercase text */

  --on-accent: #FFFFFF;
  --on-warn: #FFFFFF;

  --field-border: #C7CED8;
  --field-focus-bg: #FFFFFF;
  --field-disabled-bg: #EFF1F4;

  /* Native dropdowns and date pickers must follow the light theme too —
     this is what made <select> popups render black on white. */
  color-scheme: light;

  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 8px 24px rgba(16, 24, 40, 0.08);

  /* legacy aliases follow the theme too */
  --pine: #131720;
  --pine-2: #FFFFFF;
  --leaf: #047857;
  --leaf-dark: #047857;
  --harvest: #B45309;
  --paper: #F1F3F6;
  --card: #FFFFFF;
  --ink: #131720;
  --clay: #DC2626;
}

/* Cards need a little lift on a light background; on dark the border does it. */
:root[data-theme="light"] .card,
:root[data-theme="light"] .panel,
:root[data-theme="light"] .kpi,
:root[data-theme="light"] .table-wrap { box-shadow: var(--shadow); }
:root[data-theme="light"] .modal-backdrop { background: rgba(16, 24, 40, 0.45); }
:root[data-theme="light"] .topbar { background: rgba(241, 243, 246, 0.86); }
:root[data-theme="light"] .chart-tip { background: var(--surface); }
:root[data-theme="light"] .leaflet-tooltip { background: var(--surface); }
:root[data-theme="light"] .leaflet-control-attribution {
  background: rgba(255, 255, 255, .86) !important;
}
:root[data-theme="light"] .bell { filter: none; }
:root[data-theme="light"] .leaflet-container,
:root[data-theme="light"] .map-canvas { background: var(--surface-3); }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 14px; }
body {
  font-family: var(--font); background: var(--bg); color: var(--text);
  line-height: 1.5; font-size: 1rem; -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: #5FF3B8; }
img { max-width: 100%; }
::selection { background: var(--accent-glow); }

/* Firefox + WebKit scrollbars tuned for the dark shell */
* { scrollbar-color: #3A3A3C var(--bg); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #3A3A3C; border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #4A4A4C; }

/* ---------- App shell ---------- */
.app-shell { display: flex; min-height: 100vh; }
.main-area { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.content { flex: 1; padding: var(--s3); }

/* ---------- Sidebar ---------- */
.sidebar {
  width: 248px; flex-shrink: 0; background: var(--surface); color: var(--muted);
  display: flex; flex-direction: column; position: sticky; top: 0;
  height: 100vh; overflow-y: auto; border-right: 1px solid var(--line);
}
.brand {
  display: flex; align-items: center; gap: 10px; padding: 18px var(--s2) var(--s2);
  border-bottom: 1px solid var(--line);
}
.brand-mark {
  font-size: 1.1rem; width: 34px; height: 34px; flex-shrink: 0;
  display: grid; place-items: center; border-radius: var(--radius-sm);
  background: var(--accent-glow); border: 1px solid rgba(0, 229, 138, 0.28);
}
.brand-name { display: block; font-weight: 600; color: var(--text); font-size: .95rem; line-height: 1.25; }
.brand-sub { display: block; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }

/* =====================================================================
   NAV — collapsible groups
   Thirty-odd destinations only stay scannable if most of them are
   folded away. One group opens at a time by default: the one you are in.
   ===================================================================== */
.nav { padding: var(--s1) 10px var(--s4); }

.nav-link {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 12px; margin: 1px 0; border-radius: 8px;
  color: var(--muted); font-size: .86rem; text-decoration: none;
  transition: background .12s, color .12s;
}
.nav-link:hover { background: var(--surface-2); color: var(--text); }
.nav-link.active {
  background: var(--accent-glow); color: var(--text); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--accent);
}
.nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Pinned top-level entry (Dashboard / Platform Overview) */
.nav-pinned {
  margin-bottom: 6px; padding: 11px 12px; font-size: .9rem; font-weight: 600;
  color: var(--text); background: var(--surface-2); border: 1px solid var(--line);
}
.nav-pinned:hover { background: var(--surface-3); }
.nav-pinned.active { border-color: transparent; }

/* Plain destinations get a quiet dot so labels align with analytics rows */
.nav-dot {
  width: 12px; flex-shrink: 0; display: flex; justify-content: center;
}
.nav-dot::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--muted-2); opacity: .55;
}
.nav-link:hover .nav-dot::before, .nav-link.active .nav-dot::before { opacity: 1; }

/* ---------- Group header ---------- */
.nav-group { margin-bottom: 2px; }
.nav-toggle {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border: none; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--muted-2);
  font-family: inherit; font-size: .66rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  transition: background .12s, color .12s;
}
.nav-toggle:hover { background: var(--surface-2); color: var(--text); }
.nav-toggle-text {
  flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-group.is-open .nav-toggle { color: var(--text); }

/* Count of destinations, hidden once the group is open to cut noise */
.nav-count {
  font-family: var(--mono); font-size: .62rem; font-weight: 700;
  color: var(--muted); background: var(--surface-2);
  border-radius: 999px; padding: 1px 6px; letter-spacing: 0;
}
.nav-group.is-open .nav-count { opacity: 0; }

.nav-chev {
  width: 8px; height: 8px; flex-shrink: 0; margin-left: 2px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg) translate(-1px, -1px);
  transition: transform .2s ease;
}
.nav-group.is-open .nav-chev { transform: rotate(45deg) translate(-1px, -1px); }

/* ---------- Analytics emphasis ---------- */
.nav-ico { width: 12px; height: 12px; flex-shrink: 0; fill: var(--accent); }

.nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 5px;
  background: var(--accent-glow); border: 1px solid var(--accent);
}
.nav-badge .nav-ico { width: 9px; height: 9px; }
.nav-group.has-analytics .nav-toggle-text { color: inherit; }

.nav-link.is-analytics {
  color: var(--text); font-weight: 600;
  background: linear-gradient(90deg, var(--accent-glow), transparent 85%);
}
.nav-link.is-analytics:hover { background: var(--accent-glow); }
.nav-link.is-analytics.active { box-shadow: inset 2px 0 0 var(--accent); }

.nav-tag {
  font-size: .55rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-glow);
  border: 1px solid var(--accent); border-radius: 4px; padding: 1px 4px;
  flex-shrink: 0; opacity: .9;
}

/* ---------- Collapse mechanics ----------
   grid-template-rows 0fr→1fr animates to the content's natural height,
   which max-height cannot do without a magic number. */
.nav-items {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .22s ease;
}
.nav-group.is-open .nav-items { grid-template-rows: 1fr; }
.nav-items-inner { overflow: hidden; min-height: 0; }
.nav-group.is-open .nav-items-inner { padding-bottom: 4px; }

/* No JS: never leave a farmer stranded with a nav they cannot open */
.no-js .nav-items { grid-template-rows: 1fr; }
.no-js .nav-chev { display: none; }

/* ---------- Topbar ---------- */
.topbar {
  display: flex; align-items: center; gap: var(--s2);
  background: rgba(18, 18, 18, 0.86); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  padding: 14px var(--s3); position: sticky; top: 0; z-index: 20;
}
.page-title { font-size: 1.35rem; font-weight: 600; color: var(--text); flex: 1; letter-spacing: -.01em; }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.menu-toggle {
  display: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 1.05rem; padding: 5px 11px; cursor: pointer; color: var(--text);
}
.bell {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px; color: var(--muted);
  border: 1px solid transparent; transition: background .15s, color .15s, border-color .15s;
}
.bell:hover { background: var(--surface-2); color: var(--accent); border-color: var(--line); }
.bell-count {
  position: absolute; top: -6px; right: -10px; background: var(--alert); color: #fff;
  font-size: .6rem; font-weight: 700; border-radius: 999px; padding: 1px 5px;
  font-family: var(--mono);
}
/* =====================================================================
   ICON SYSTEM (includes/icons.php)
   Stroke icons inheriting currentColor — no emoji, so they render the
   same on every OS and never fight the palette.
   ===================================================================== */
.ico { display: inline-block; vertical-align: -0.18em; flex-shrink: 0; }
.btn .ico { vertical-align: -0.2em; margin-right: 2px; }

.brand-mark { color: var(--accent); }
.brand-mark .ico { vertical-align: 0; }

.kpi-icon { color: var(--muted); }
.kpi-icon .ico { vertical-align: 0; }
.kpi.is-alert .kpi-icon { color: var(--alert); }
.kpi.is-ok .kpi-icon    { color: var(--ok); }
.kpi.is-warn .kpi-icon  { color: var(--warn); }
.kpi.is-accent .kpi-icon { color: var(--accent); }

/* =====================================================================
   AUTH CINEMATIC STAGE — sign-in only.
   A three-shot farm loop (irrigated crop, grazing herd, harvester) sits
   behind the card. The footage is decoration, so it carries a scrim
   heavy enough that every label on top keeps its normal contrast, and
   the poster frame stands in until the video is allowed to play.
   ===================================================================== */
.auth-wrap.has-video { position: relative; overflow: hidden; background: #06120D; }

.auth-stage { position: fixed; inset: 0; z-index: 0; background: #06120D center/cover no-repeat; }
.auth-stage-video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* A hair of overscale keeps the frame edges out of the viewport. */
  transform: scale(1.04);
  opacity: 0; transition: opacity .9s ease;
}
.auth-stage-video.is-live { opacity: 1; }
/* Every label now lives inside the white sheet, so the scrim is no longer
   carrying contrast — it only has to seat the card and stop the harvest
   dust from competing with it. Light enough that the footage still reads. */
.auth-stage-scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(1100px 620px at 50% 46%, rgba(4, 16, 11, .34), transparent 78%),
    linear-gradient(180deg, rgba(4, 16, 11, .30) 0%, rgba(4, 16, 11, .22) 45%, rgba(4, 16, 11, .48) 100%);
}

/* The card floats on the footage as a light sheet. It re-declares the
   palette locally instead of following data-theme: the sign-in screen
   sits on a bright field either way, and a half-dark card over moving
   grass never settles. The app behind it keeps whatever theme is set. */
.auth-sheet {
  position: relative; z-index: 1;
  border: none; border-radius: 18px;
  box-shadow: 0 40px 110px rgba(4, 16, 11, .55);

  --surface: #FFFFFF;
  --surface-2: #F5F8F6;
  --surface-3: #E8EEEA;
  --line: #E3E9E5;
  --line-soft: #EEF2EF;
  --text: #131720;
  --muted: #5B6472;
  --muted-2: #6B7280;
  --accent: #047857;
  --accent-dim: #059669;
  --accent-glow: rgba(4, 120, 87, .10);
  --ok: #15803D;
  --alert: #DC2626;
  --alert-bg: #FDECEA;
  --warn: #B45309;
  --warn-bg: #FDF3E3;
  --info: #0369A1;
  --on-accent: #FFFFFF;
  --field-border: #868F87; /* 3.34:1 on the sheet — the field outline is the control boundary (WCAG 1.4.11) */
  --field-focus-bg: #FFFFFF;
  color-scheme: light;

  /* Transparent, not white: the form column frosts the footage with
     backdrop-filter, which samples whatever is painted *behind* the card.
     An opaque sheet here would leave it blurring white. The panel supplies
     its own solid background, so only the form side lets the video through. */
  background: transparent;
  color: var(--text);
}

/* Two columns: what the system is, then the way in. The capability panel
   is the differentiator — a farmer who has never heard of us should know
   what this runs and who it was built for before typing a password. */
.auth-sheet.auth-split {
  display: grid; grid-template-columns: 1.05fr .95fr;
  width: min(1040px, 100%); overflow: hidden;
}

.auth-aside {
  padding: 40px 38px; display: flex; flex-direction: column; gap: 26px;
  background: linear-gradient(165deg, rgba(4, 120, 87, .11), transparent 58%), #F5F8F6;
  border-right: 1px solid var(--line);
}
.auth-aside-brand { display: flex; align-items: center; gap: 12px; }
.auth-aside-brand .mark {
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  color: var(--accent); background: var(--accent-glow); border: 1px solid var(--accent);
}
.auth-aside-name { font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; color: var(--text); }
.auth-aside-sub {
  font-size: .62rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent); font-weight: 700;
}
/* A tagline, not a section heading — the <h1> belongs to the form column,
   which is what this page is actually for. */
.auth-headline {
  font-size: 1.5rem; line-height: 1.25; font-weight: 600; letter-spacing: -.02em; color: var(--text);
}
.auth-headline em { font-style: normal; color: var(--accent); }

.auth-points { display: flex; flex-direction: column; gap: 15px; }
.auth-point { display: flex; gap: 12px; align-items: flex-start; }
.auth-point .ico { color: var(--accent); margin-top: 1px; }
.auth-point-t { font-size: .88rem; font-weight: 600; color: var(--text); }
.auth-point-d { font-size: .8rem; color: var(--muted); line-height: 1.45; }

/* The line that separates us from imported farm software. It sits on its
   own rule at the foot of the panel so it reads as a claim, not a bullet. */
.auth-region {
  margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: .78rem; font-weight: 600; color: var(--text);
  display: flex; align-items: center; gap: 8px;
}
.auth-region .ico { color: var(--ok); flex-shrink: 0; }

/* =====================================================================
   THE GLASS FORM COLUMN
   Frosted rather than solid, so the harvest keeps moving behind the
   fields. Everything below is contrast maths: a translucent panel has no
   fixed background, so each colour is checked against the WORST case —
   the glass sitting over a near-black frame of the footage, which floors
   the effective backdrop at about #949494. The tokens are restated here
   for that floor, not for the white sheet they were picked for.
   ===================================================================== */
.auth-main {
  padding: 38px 38px 28px; display: flex; flex-direction: column; justify-content: center;
  background: rgba(255, 255, 255, .58);

  /* contrast() is the important one. Without it the panel simply wears
     whatever frame is behind it — pale over the sunset field, slate grey
     over the dark soy rows — so two people opening the same page seconds
     apart see visibly different screens. Compressing the backdrop's range
     toward mid-grey before the white overlay pins the panel to a narrow,
     predictable band; the footage still moves through it, but it supplies
     texture rather than tone. brightness() lifts the dark end of that band
     so the contrast floor below is comfortable rather than marginal. */
  backdrop-filter: blur(28px) saturate(180%) brightness(1.12) contrast(.62);
  -webkit-backdrop-filter: blur(28px) saturate(180%) brightness(1.12) contrast(.62);
  border-left: 1px solid rgba(255, 255, 255, .55);

  --muted: #232C38;        /* 5.9:1 on the floor — labels, lead, foot note */
  --field-border: #37443D; /* 4.2:1 on the glass, 7.7:1 on the field fill */
  --field-focus-bg: #FFFFFF;
}
.auth-main h1 { color: #0E131A; }

/* Near-solid fields. The glass is the decoration; what a farmer types has
   to stay readable over a bright sky and a dark field alike. */
.auth-main .form-group input { background: rgba(255, 255, 255, .88); color: #0E131A; }
.auth-main .form-group input:focus { background: #FFFFFF; }

/* The accent green is 2.1:1 on the floor, so links carry a much darker
   green and an underline — hue alone can't do the work here. The button
   keeps the real accent: it is opaque, so the footage never touches it. */
.auth-main a { color: #0A2A20; text-decoration: underline; text-underline-offset: 2px; }
.auth-main a:hover { color: #047857; }

/* Without backdrop-filter there is no frosting, only transparency — so
   fall back to a nearly solid panel rather than unreadable text. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .auth-main { background: rgba(255, 255, 255, .94); }
}

/* "Invalid email or password" is the message this screen shows most, and
   the global flash colours are picked for a dark surface. Restate them for
   the light sheet so the one thing a locked-out user must read is legible. */
.auth-sheet .flash-error   { color: #B91C1C; }
.auth-sheet .flash-success { color: #15803D; background: rgba(21, 128, 61, .10); }
.auth-sheet .flash-info    { color: var(--accent); background: rgba(4, 120, 87, .08); }

/* Form column head — left-aligned, no logo tile. The brand already sits in
   the panel to the left, so repeating it here only pushed the fields down. */
.auth-main h1 {
  font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em;
  color: var(--text); margin-bottom: 5px;
}
.auth-main .lead { font-size: .88rem; color: var(--muted); margin-bottom: 22px; }

/* Labelled rectangular fields, inheriting the app's standard .form-group
   and input styling rather than restating it — the sign-in form should not
   drift from every other form in the product. */
.auth-main .form-group { margin-bottom: 14px; }
.auth-main .form-group input { width: 100%; padding: 11px 14px; }

.auth-forgot { text-align: right; font-size: .8rem; margin: -2px 0 18px; }

.btn.btn-block {
  width: 100%; padding: 11px 20px; font-size: .92rem; font-weight: 600;
}

/* One column below the split point. The panel stacks above the form rather
   than being dropped: on a phone it is often the only thing a new visitor
   reads, so it keeps its points and its provenance line. */
@media (max-width: 860px) {
  .auth-sheet.auth-split { grid-template-columns: 1fr; width: min(460px, 100%); }
  .auth-aside {
    padding: 28px 26px; gap: 20px;
    border-right: none; border-bottom: 1px solid var(--line);
  }
  .auth-headline { font-size: 1.28rem; }
  .auth-region { margin-top: 4px; }
  /* Stacked, the glass sits below the panel — the seam moves to the top. */
  .auth-main { padding: 28px 26px 24px; border-left: none; border-top: 1px solid rgba(255, 255, 255, .55); }
}

@media (max-width: 520px) {
  .auth-sheet.auth-split { border-radius: 16px; }
  .auth-aside { padding: 24px 22px; }
  .auth-main { padding: 24px 22px 22px; }
  .auth-main h1 { font-size: 1.35rem; }
}

/* Placeholder-only fields still need a label in the accessibility tree. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.auth-brand .mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; margin: 0 auto 12px; border-radius: 18px;
  color: var(--accent); background: var(--accent-glow);
  border: 1px solid var(--accent);
}
.map-act-ico { vertical-align: -0.22em; margin-right: 4px; color: var(--muted); }

/* ---------- Theme toggle ---------- */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0; padding: 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 9px; cursor: pointer; color: var(--muted);
  transition: background .15s, color .15s, border-color .15s;
}
.theme-toggle:hover { background: var(--surface-2); color: var(--accent); border-color: var(--accent); }
.theme-toggle svg { width: 16px; height: 16px; fill: currentColor; }
/* Show the icon for the mode you would switch *to* */
.theme-toggle .ico-sun { display: block; }
.theme-toggle .ico-moon { display: none; }
:root[data-theme="light"] .theme-toggle .ico-sun { display: none; }
:root[data-theme="light"] .theme-toggle .ico-moon { display: block; }

.user-chip { text-align: right; line-height: 1.2; }
.user-name { display: block; font-weight: 500; font-size: .85rem; color: var(--text); }
.user-role { display: block; font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }

/* ---------- Cards / panels ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; margin-bottom: var(--s3);
}
.card-title {
  font-size: 1rem; font-weight: 600; color: var(--text); margin-bottom: var(--s2);
  letter-spacing: -.01em;
}

/* ---------- Legacy stat strip (still used by some pages) ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--s2); margin-bottom: var(--s3); }
.stat {
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius); padding: var(--s2) 20px;
}
.stat.gold { border-left-color: var(--warn); }
.stat.red { border-left-color: var(--alert); }
.stat-label { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.stat-value { font-family: var(--mono); font-size: 1.6rem; font-weight: 700; color: var(--text); margin-top: 4px; letter-spacing: -.02em; }
.stat-sub { font-size: .75rem; color: var(--muted); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }

/* =====================================================================
   DASHBOARD SYSTEM
   12-column grid. KPI row on top, main chart on 8, alerts rail on 4.
   ===================================================================== */
.dash { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s3); margin-bottom: var(--s3); }
.dash:last-child { margin-bottom: 0; }

.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-12 { grid-column: span 12; }

/* ---------- KPI tile ---------- */
.kpi {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; display: flex; flex-direction: column; gap: 6px; min-width: 0;
  position: relative; overflow: hidden;
}
.kpi::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--accent); opacity: .55;
}
.kpi.is-alert::after { background: var(--alert); opacity: 1; }
.kpi.is-ok::after    { background: var(--ok); }
.kpi.is-warn::after  { background: var(--warn); }
.kpi.is-quiet::after { opacity: .18; }

.kpi-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s1); }
.kpi-label {
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.kpi-icon {
  width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: var(--radius-sm); background: var(--surface-2);
  border: 1px solid var(--line); font-size: .95rem; line-height: 1;
}
.kpi.is-alert .kpi-icon { background: var(--alert-bg); border-color: rgba(255, 69, 58, .35); }
.kpi.is-ok .kpi-icon    { background: rgba(50, 215, 75, .12); border-color: rgba(50, 215, 75, .3); }

.kpi-value {
  font-family: var(--mono); font-weight: 700; font-size: 2rem; line-height: 1.15;
  color: var(--text); letter-spacing: -.035em; font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.kpi-value.is-accent { color: var(--accent); }
.kpi-value.is-alert  { color: var(--alert); }
.kpi-value.is-ok     { color: var(--ok); }
.kpi-value .unit { font-size: .95rem; color: var(--muted); font-weight: 400; margin-left: 4px; letter-spacing: 0; }

.kpi-sub { font-size: .78rem; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kpi-delta {
  font-family: var(--mono); font-size: .72rem; font-weight: 700; padding: 1px 6px;
  border-radius: 6px; letter-spacing: -.01em;
}
.kpi-delta.up   { color: var(--ok);    background: rgba(50, 215, 75, .12); }
.kpi-delta.down { color: var(--alert); background: rgba(255, 69, 58, .12); }
.kpi-delta.flat { color: var(--muted); background: var(--surface-2); }
.kpi-spark { margin-top: 4px; height: 34px; }

/* ---------- Panel (chart / list container) ---------- */
.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; display: flex; flex-direction: column; min-width: 0;
}
.panel-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s2); margin-bottom: var(--s2); flex-wrap: wrap;
}
.panel-title { font-size: 1rem; font-weight: 600; color: var(--text); letter-spacing: -.01em; }
.panel-sub { font-size: .76rem; color: var(--muted); margin-top: 2px; }
.panel-body { flex: 1; min-width: 0; }
.panel-foot {
  margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--line);
  font-size: .78rem; color: var(--muted); display: flex; justify-content: space-between; gap: var(--s1);
}

/* Live indicator */
.live { display: inline-flex; align-items: center; gap: 6px; font-size: .7rem;
  text-transform: uppercase; letter-spacing: .12em; color: var(--ok); font-weight: 600; }
.live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 0 rgba(50, 215, 75, .6); animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(50, 215, 75, .55); }
  70%  { box-shadow: 0 0 0 7px rgba(50, 215, 75, 0); }
  100% { box-shadow: 0 0 0 0 rgba(50, 215, 75, 0); }
}

/* ---------- Charts ---------- */
.chart { width: 100%; position: relative; }
.chart svg { display: block; width: 100%; overflow: visible; }
.chart-empty {
  display: grid; place-items: center; min-height: 160px; color: var(--muted-2);
  font-size: .85rem; border: 1px dashed var(--line); border-radius: var(--radius-sm);
}
.chart-tip {
  position: absolute; pointer-events: none; z-index: 5; opacity: 0;
  background: #0C0C0C; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 8px 10px; font-size: .76rem; white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5); transition: opacity .12s;
  transform: translate(-50%, -110%);
}
.chart-tip.show { opacity: 1; }
.chart-tip b { display: block; color: var(--muted); font-weight: 600; font-size: .68rem;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.chart-tip .tv { font-family: var(--mono); color: var(--text); font-weight: 700; }
.chart-tip .row { display: flex; align-items: center; gap: 6px; }
.chart-tip .sw { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }

.legend { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; color: var(--muted); }
.legend-item i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

/* ---------- Alert rail ---------- */
.alert-list { display: flex; flex-direction: column; gap: var(--s1); }
.alert-item {
  background: var(--surface-2); border-left: 4px solid var(--muted-2);
  border-radius: var(--radius-sm); padding: 10px 14px;
}
.alert-item.crit { background: var(--alert-bg); border-left-color: var(--alert); }
.alert-item.crit .alert-title { color: var(--alert); }
.alert-item.warn { background: var(--warn-bg); border-left-color: var(--warn); }
.alert-item.warn .alert-title { color: var(--warn); }
.alert-item.ok   { background: rgba(50, 215, 75, .09); border-left-color: var(--ok); }
.alert-item.ok .alert-title { color: var(--ok); }
.alert-item.info { background: rgba(0, 229, 138, .08); border-left-color: var(--accent); }
.alert-item.info .alert-title { color: var(--accent); }

.alert-title {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .12em;
  font-weight: 700; color: var(--muted); margin-bottom: 3px;
}
.alert-body { font-size: .84rem; color: var(--text); line-height: 1.4; }
.alert-meta { font-size: .72rem; color: var(--muted); margin-top: 3px; font-family: var(--mono); }
.alert-empty {
  display: grid; place-items: center; gap: 6px; padding: var(--s4) var(--s2); text-align: center;
  border: 1px dashed var(--line); border-radius: var(--radius-sm); color: var(--muted);
  font-size: .84rem;
}

/* ---------- Breakdown bars (composition without a chart) ---------- */
.bars { display: flex; flex-direction: column; gap: 14px; }
.bar-row { display: grid; grid-template-columns: 1fr auto; gap: 4px var(--s1); align-items: baseline; }
.bar-name { font-size: .84rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-val { font-family: var(--mono); font-size: .84rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.bar-track {
  grid-column: 1 / -1; height: 6px; background: var(--surface-3);
  border-radius: 999px; overflow: hidden;
}
.bar-fill { height: 100%; background: var(--accent); border-radius: 999px; }
.bar-fill.ok    { background: var(--ok); }
.bar-fill.alert { background: var(--alert); }
.bar-fill.warn  { background: var(--warn); }
.bar-fill.muted { background: var(--muted-2); }

/* ---------- Compact metric list ---------- */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--s2); }
.metric { border-left: 2px solid var(--line); padding-left: 12px; }
.metric-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.metric-value {
  font-family: var(--mono); font-size: 1.1rem; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.metric.accent { border-left-color: var(--accent); }
.metric.accent .metric-value { color: var(--accent); }
.metric.ok     { border-left-color: var(--ok); }
.metric.ok .metric-value { color: var(--ok); }
.metric.alert  { border-left-color: var(--alert); }
.metric.alert .metric-value { color: var(--alert); }

/* Any number should read as data */
.mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer;
  font-family: inherit; font-size: .85rem; font-weight: 600; padding: 9px 16px;
  background: var(--accent); color: var(--on-accent); transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { background: var(--accent-dim); color: var(--on-accent); }
:root:not([data-theme="light"]) .btn:hover { background: #4FEEFF; }
/* The sign-in sheet is locally light whatever data-theme says, so it opts
   back out of the dark-theme cyan hover above — hence the matching weight. */
:root:not([data-theme="light"]) .auth-sheet .btn:hover { background: var(--accent-dim); }
.btn-gold { background: var(--warn); color: var(--on-warn); }
.btn-gold:hover { filter: brightness(1.12); }
.btn-danger { background: var(--alert); color: #fff; }
.btn-danger:hover { background: #FF6B62; }
.btn-light { background: var(--surface-2); color: var(--text); border-color: var(--line); }
.btn-light:hover { background: var(--surface-3); color: var(--text); }
.btn-sm { padding: 5px 11px; font-size: .78rem; }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.inline { display: inline; }

.page-actions {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-bottom: var(--s2); color: var(--muted); font-size: .88rem;
}
.page-actions .filters { display: flex; gap: var(--s1); flex-wrap: wrap; }

/* ---------- Tables ---------- */
.table-wrap {
  overflow-x: auto; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.data-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.data-table th {
  text-align: left; padding: 12px 16px; background: var(--surface-2); color: var(--muted);
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  font-weight: 600; border-bottom: 1px solid var(--line);
}
.data-table td {
  padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--text);
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--surface-2); }
.data-table td.num, .data-table th.num { text-align: right; }
.data-table td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.empty-row { text-align: center; color: var(--muted); padding: 32px !important; }
.actions-col { white-space: nowrap; width: 1%; }
.num { text-align: right; }

/* Tables sitting inside a panel lose their own chrome */
.panel .data-table, .card .data-table { font-size: .84rem; }
.panel .table-wrap, .card .table-wrap { border: none; border-radius: 0; background: transparent; }

/* ---------- Badges ---------- */
.badge {
  display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .7rem;
  font-weight: 600; text-transform: capitalize; border: 1px solid transparent;
}
.badge-green { background: rgba(50, 215, 75, .13); color: #4ADE68; border-color: rgba(50, 215, 75, .28); }
.badge-amber { background: rgba(255, 214, 10, .12); color: #FFD60A; border-color: rgba(255, 214, 10, .28); }
.badge-red   { background: rgba(255, 69, 58, .13);  color: #FF6B62; border-color: rgba(255, 69, 58, .3); }
.badge-grey  { background: var(--surface-3);        color: var(--muted); border-color: #3A3A3C; }
.badge-gold  { background: rgba(255, 214, 10, .12); color: #FFD60A; border-color: rgba(255, 214, 10, .28); }
.badge-cyan  { background: var(--accent-glow);      color: var(--accent); border-color: rgba(0, 229, 138, .3); }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.form-group { display: flex; flex-direction: column; }
.form-full { grid-column: 1 / -1; }
.form-group label { font-size: .76rem; font-weight: 600; color: var(--muted); margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: .06em; }
.req { color: var(--alert); }
input, select, textarea {
  font-family: inherit; font-size: .88rem; padding: 9px 12px;
  border: 1px solid var(--field-border); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
input[type="number"], input[type="date"] { font-family: var(--mono); }
input::placeholder, textarea::placeholder { color: var(--muted-2); }
input:focus, select:focus, textarea:focus {
  border-color: var(--accent); background: var(--field-focus-bg); outline: none;
  box-shadow: 0 0 0 3px var(--accent-glow);
}
input:disabled, select:disabled, textarea:disabled { color: var(--muted); background: var(--field-disabled-bg); }
/* Native control chrome (dropdown popups, date pickers, scrollbars) follows
   the theme via color-scheme on :root — never hard-code it per element. */
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; }
:root:not([data-theme="light"]) input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(.6);
}
.form-actions { display: flex; justify-content: flex-end; gap: var(--s1); margin-top: var(--s3); }

/* ---------- Searchable combobox (e.g. customer picker) ---------- */
.combo { position: relative; }
.combo-input { width: 100%; }
.combo.invalid .combo-input { border-color: var(--alert); box-shadow: 0 0 0 3px var(--alert-bg); }
.combo-menu {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 240px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: 0 12px 32px rgba(0, 0, 0, .35); z-index: 60; padding: 4px;
}
.combo.open .combo-menu { display: block; }
.combo-option {
  padding: 8px 10px; font-size: .88rem; border-radius: 6px; cursor: pointer; color: var(--text);
}
.combo-option:hover, .combo-option.is-active { background: var(--accent-glow); color: var(--text); }
.combo-option[hidden] { display: none; }
.combo-empty { display: none; padding: 8px 10px; font-size: .85rem; color: var(--muted); }
.combo.no-results .combo-empty { display: block; }

/* ---------- Flash ---------- */
.flash {
  padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: var(--s2);
  font-size: .88rem; font-weight: 500; border-left: 4px solid;
}
.flash-success { background: rgba(50, 215, 75, .1); color: #4ADE68; border-color: var(--ok); }
.flash-error   { background: var(--alert-bg); color: #FF6B62; border-color: var(--alert); }
.flash-info    { background: rgba(0, 229, 138, .08); color: var(--accent); border-color: var(--accent); }

/* ---------- Modal ---------- */
.modal-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(3px); z-index: 40;
}
.modal {
  display: none; position: fixed; z-index: 50; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: min(640px, 94vw); max-height: 88vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}
.modal.open, .modal-backdrop.open { display: block; }
.modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--s2) 20px; border-bottom: 1px solid var(--line);
}
.modal-head h3 { color: var(--text); font-size: 1rem; font-weight: 600; }
.modal-close { background: none; border: none; font-size: 1.3rem; cursor: pointer; color: var(--muted); }
.modal-close:hover { color: var(--text); }
.modal-body { padding: 20px; }

/* ---------- Auth pages ---------- */
.auth-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px;
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(0, 229, 138, .10), transparent 70%),
    var(--bg);
}
.auth-card {
  background: var(--surface); width: min(440px, 100%); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6); padding: var(--s4);
  border-top: 2px solid var(--accent);
}
.auth-card.wide { width: min(620px, 100%); }
.auth-brand { text-align: center; margin-bottom: var(--s3); }
.auth-brand h1 { font-size: 1.3rem; color: var(--text); font-weight: 600; }
.auth-brand p { font-size: .74rem; color: var(--accent); letter-spacing: .18em; text-transform: uppercase; }
.auth-card .form-group { margin-bottom: var(--s2); }
.auth-foot { text-align: center; margin-top: var(--s2); font-size: .85rem; color: var(--muted); }
.auth-crest { width: 158px; height: auto; display: block; margin: 0 auto 6px; }
.auth-lead { text-align: center; font-size: .86rem; color: var(--muted); margin: 10px 0 18px; }
.auth-rule {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: var(--s2) auto 4px; max-width: 240px; color: var(--muted-2); font-size: .74rem;
}
.auth-rule span { flex: 1; height: 1px; background: var(--line); }

/* ---------- Reports ---------- */
.report-summary { display: flex; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s2); color: var(--muted); font-size: .8rem; }
.report-summary div strong {
  display: block; font-family: var(--mono); font-size: 1.2rem; color: var(--text);
  font-weight: 700; font-variant-numeric: tabular-nums;
}

/* ---------- Support ticket thread ---------- */
.ticket-thread { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.msg {
  max-width: 78%; padding: 12px 16px; border-radius: var(--radius-sm); font-size: .88rem;
  background: var(--surface-2); border: 1px solid var(--line);
}
.msg.super { align-self: flex-end; background: rgba(0, 229, 138, .07); border-color: rgba(0, 229, 138, .25); }
.msg-meta { font-size: .7rem; color: var(--muted); margin-bottom: 4px; }
.msg-meta strong { color: var(--accent); }
.msg-body { white-space: pre-wrap; }

/* =====================================================================
   FIELD MAP
   Leaflet ships light chrome; everything below re-skins it to the
   console theme so the map reads as part of the app, not an embed.
   ===================================================================== */
.map-canvas {
  width: 100%; height: 520px; border-radius: var(--radius-sm);
  background: #0C0C0C; border: 1px solid var(--line); z-index: 1;
}
.map-canvas.is-drawing { cursor: crosshair; }
.map-canvas.is-drawing .leaflet-grab { cursor: crosshair; }

.map-tools { display: flex; gap: var(--s1); flex-wrap: wrap; }

.map-hint {
  margin-bottom: var(--s1); padding: 9px 14px; border-radius: var(--radius-sm);
  background: var(--accent-glow); border-left: 3px solid var(--accent);
  color: var(--accent); font-size: .82rem;
}

.map-draw-bar {
  display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap;
  margin-top: var(--s1); padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--line);
}
.map-draw-bar > span:first-child {
  font-family: var(--mono); font-size: .82rem; color: var(--accent);
  margin-right: auto; font-variant-numeric: tabular-nums;
}

.map-swatch {
  display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  margin-right: 8px; vertical-align: baseline; flex-shrink: 0;
}

.map-measure {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: var(--s2); padding: 12px 16px; border-radius: var(--radius-sm);
  background: var(--surface-2); border-left: 3px solid var(--accent);
  font-size: .8rem; color: var(--muted);
}
.map-measure-v {
  font-family: var(--mono); font-size: 1.3rem; font-weight: 700; color: var(--accent);
  letter-spacing: -.02em;
}

/* ---------- Leaflet chrome, re-skinned ---------- */
.leaflet-container { background: #0C0C0C; font-family: var(--font); }
.leaflet-bar,
.leaflet-control-layers {
  background: var(--surface); border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
  color: var(--text);
}
.leaflet-bar a, .leaflet-bar a:hover {
  background: var(--surface); color: var(--text); border-bottom-color: var(--line);
}
.leaflet-bar a:hover { background: var(--surface-2); }
.leaflet-bar a.leaflet-disabled { background: var(--surface); color: var(--muted-2); }
.leaflet-control-layers-expanded { padding: 10px 14px 10px 10px; color: var(--text); }
.leaflet-control-layers label { font-size: .82rem; margin-bottom: 4px; }
.leaflet-control-attribution {
  background: rgba(18, 18, 18, .82) !important; color: var(--muted-2) !important;
  font-size: .66rem; border-radius: 6px 0 0 0;
}
.leaflet-control-attribution a { color: var(--muted) !important; }

.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(0, 0, 0, .6);
}
.leaflet-popup-content-wrapper { border-radius: var(--radius-sm); }
.leaflet-popup-content { margin: 12px 14px; font-size: .84rem; }
.leaflet-popup-close-button { color: var(--muted) !important; }
.leaflet-tooltip {
  background: #0C0C0C; border: 1px solid var(--line); color: var(--text);
  font-size: .76rem; box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
}
.leaflet-tooltip-top::before { border-top-color: var(--line); }

.map-pop-head { display: flex; align-items: center; font-size: .95rem; margin-bottom: 4px; }
.map-pop-act { font-size: .76rem; color: var(--muted); margin-bottom: 6px; }
.map-pop-size { font-family: var(--mono); font-size: .76rem; color: var(--accent); }
.map-pop-note {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line);
  font-size: .8rem; color: var(--text); white-space: pre-wrap; max-width: 240px;
}
.map-pop-edit { margin-top: 10px; }

@media (max-width: 1024px) { .map-canvas { height: 420px; } }
@media (max-width: 768px) {
  .map-canvas { height: 340px; }
  .map-tools { width: 100%; }
  .map-tools .btn { flex: 1; }
}

@media print {
  .map-tools, .map-draw-bar, .map-hint, .leaflet-control-container { display: none !important; }
  .map-canvas { height: 320px; border: 1px solid #999; }
}

/* =====================================================================
   FINISH PASS
   Small, consistent responses to hover and focus. Nothing decorative —
   the point is that every surface feels deliberate rather than static.
   ===================================================================== */
.kpi, .panel, .card {
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.kpi:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.kpi::after { transition: opacity .18s ease, height .18s ease; }
.kpi:hover::after { height: 3px; opacity: 1; }

/* Rows in a data table should feel selectable, not just striped */
.data-table tbody tr { transition: background .12s ease; }

/* Alert rail entries lift slightly so the eye can track down the list */
.alert-item { transition: transform .15s ease, background .15s ease; }
.alert-item:hover { transform: translateX(2px); }

/* Bars animate up from nothing on first paint — reads as "measured",
   and is skipped entirely under reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .bar-fill { animation: barGrow .5s cubic-bezier(.22, 1, .36, 1) both; }
  @keyframes barGrow { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); } }
}

/* Keyboard focus must never be weaker than hover */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-link:focus-visible, .nav-toggle:focus-visible { outline-offset: -2px; }

/* ---------- Footer ---------- */
.app-footer {
  padding: var(--s2) var(--s3); font-size: .74rem; color: var(--muted-2);
  border-top: 1px solid var(--line); background: var(--surface);
}

/* =====================================================================
   Responsive — 1024 tablet / 768 large phone / 480 phone
   ===================================================================== */
.table-wrap { -webkit-overflow-scrolling: touch; }

@media (max-width: 1200px) {
  /* The 8/4 split stops earning its keep before the sidebar collapses */
  .dash .col-8, .dash .col-9, .dash .col-7 { grid-column: span 12; }
  .dash .col-4, .dash .col-5, .dash .col-3 { grid-column: span 6; }
}

@media (max-width: 1024px) {
  .sidebar {
    position: fixed; left: -270px; top: 0; z-index: 60; height: 100vh;
    transition: left .2s ease; box-shadow: 8px 0 32px rgba(0, 0, 0, 0.6);
  }
  .sidebar.open { left: 0; }
  .menu-toggle { display: inline-block; }
  .content { padding: 18px; }
  .grid-2 { grid-template-columns: 1fr; }
  .dash { gap: var(--s2); }
  .dash .col-6 { grid-column: span 12; }
}

@media (max-width: 768px) {
  html { font-size: 13.5px; }
  .content { padding: var(--s2) 14px; }
  .topbar { padding: 12px 14px; gap: 10px; }
  .page-title { font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .user-chip { display: none; }

  .dash .col-3, .dash .col-4, .dash .col-5 { grid-column: span 12; }
  .kpi { padding: var(--s2); }
  .kpi-value { font-size: 1.7rem; }

  .form-grid { grid-template-columns: 1fr; }
  .page-actions { flex-direction: column; align-items: stretch; }
  .page-actions .filters { width: 100%; }
  .page-actions .filters form { display: flex; gap: var(--s1); flex-wrap: wrap; width: 100%; }
  .page-actions .filters input, .page-actions .filters select { flex: 1; min-width: 120px; }
  .page-actions > .btn, .page-actions button.btn { width: 100%; }

  .report-summary { gap: 12px 20px; }
  .data-table { font-size: .82rem; }
  .data-table th { padding: 10px 12px; }
  .data-table td { padding: 10px 12px; }
  .actions-col .btn { margin-bottom: 4px; }

  .modal { width: 96vw; max-height: 92vh; }
  .modal-body { padding: var(--s2); }
  .form-actions { flex-direction: column-reverse; }
  .form-actions .btn { width: 100%; }

  .line-row { grid-template-columns: 1fr 1fr !important; }
  .line-row .form-group:first-child { grid-column: 1 / -1; }
  .msg { max-width: 92%; }
  .auth-card, .auth-card.wide { padding: var(--s3) 18px; }
}

@media (max-width: 480px) {
  html { font-size: 13px; }
  .content { padding: 12px 10px; }
  .dash { gap: 12px; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat { padding: 12px 14px; }
  .stat-value { font-size: 1.25rem; }
  .kpi-value { font-size: 1.5rem; }
  .card, .panel { padding: var(--s2); }
  .brand-name { font-size: .9rem; }
  .topbar-right { gap: var(--s1); }
  .line-row { grid-template-columns: 1fr !important; }
  .report-summary { flex-direction: column; gap: var(--s1); }
  .app-footer { font-size: .68rem; padding: 12px; text-align: center; }
}

@media (pointer: coarse) {
  .nav a, .nav-toggle { padding-top: 12px; padding-bottom: 12px; }
  input, select, textarea { padding: 11px 12px; }
  .btn-sm { padding: 7px 12px; }
}

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

/* ---------- Print: flip back to ink on paper ---------- */
@media print {
  :root { --text: #111; --muted: #555; --surface: #fff; --surface-2: #fff; --line: #999; --bg: #fff; }
  body { background: #fff; color: #111; }
  .sidebar, .topbar, .app-footer, .page-actions, .actions-col, .btn, .flash, .chart-tip { display: none !important; }
  .content { padding: 0; }
  .card, .panel, .table-wrap, .kpi { box-shadow: none; border: 1px solid #999; break-inside: avoid; }
  .dash { display: block; }
  .dash > * { margin-bottom: 12px; }
  .kpi-value, .stat-value, .metric-value { color: #111 !important; }
  .data-table th { background: #EEE; color: #111; }
  .data-table td { color: #111; }
}

/* =====================================================================
   Farming type / focus pickers, field hints, count inputs
   Added for: registration + farm profile farming-type selection,
   equipment sale modal, stock take variance grid.
   ===================================================================== */

.field-hint {
  font-size: .78rem;
  color: var(--muted-2);
  margin-top: 6px;
  line-height: 1.45;
}

/* --- radio cards: type of farming --- */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s1);
  margin-top: 6px;
}

.choice {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.choice:hover { border-color: var(--accent-dim); }
.choice input { margin: 2px 0 0; accent-color: var(--accent); flex: 0 0 auto; }
.choice-text { display: flex; flex-direction: column; gap: 2px; }
.choice-label { font-weight: 600; font-size: .92rem; color: var(--text); }
.choice-sub   { font-size: .78rem; color: var(--muted); line-height: 1.4; }

.choice:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-glow);
}
.choice:focus-within { outline: 2px solid var(--accent-dim); outline-offset: 2px; }

/* --- checkbox grid: livestock / crop focus --- */
.focus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
  margin-top: 6px;
}
.focus-grid label {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  font-size: .87rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  margin: 0;
  transition: border-color .15s ease, background .15s ease;
}
.focus-grid label:hover { border-color: var(--accent-dim); }
.focus-grid input { accent-color: var(--accent); margin: 0; }
.focus-grid label:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-glow);
}

.focus-block[hidden] { display: none !important; }

/* --- stock take --- */
.count-input { max-width: 130px; }
.st-sticky {
  position: sticky;
  left: 0;
  background: var(--surface);
  z-index: 1;
  white-space: nowrap;
}
.st-num { text-align: center; padding: 6px 5px; }
.st-none { color: var(--muted-2); }
.st-tot { text-align: center; font-weight: 700; }

/* attendance register tones */
.att-P { color: var(--ok); font-weight: 700; text-decoration: none; }
.att-A { color: var(--alert); font-weight: 700; text-decoration: none; }
.att-H { color: var(--warn); font-weight: 700; text-decoration: none; }
.att-L { color: var(--info); font-weight: 700; text-decoration: none; }

/* statement section headers (fixed vs current assets, etc.) */
.stmt-section td { background: var(--surface-2); font-weight: 600; }
.stmt-indent { padding-left: 26px; }
.stmt-total  { font-weight: 600; }
.stmt-grand td { font-weight: 700; background: var(--surface-3); }
.stmt-total td.num, .stmt-grand td.num { color: var(--accent); }

/* callout used by the equipment sale modal */
.callout {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 13px;
  font-size: .83rem;
  color: var(--muted);
  line-height: 1.55;
  margin-top: 10px;
}
.callout strong { color: var(--text); }