/* ═══════════════════════════════════════════════════════════════════════════
   BallotCampaign V2 — brand tokens. THE central place colors change.
   Change the four --bc-* values below and the whole app rebrands: buttons,
   active nav, badges, focus rings, progress, links. In the production SCSS
   build these collapse to one $primary override; this file is the runtime
   equivalent so the chassis CSS stays untouched.

   Accessibility contract (measured): #FF6600 fails WCAG under white text
   (2.94:1), so ink-on-brand is used for identity moments and WHITE text only
   ever sits on --bc-brand-ink (#C24A00 · 4.91:1, AA pass).
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --bc-brand: #FF6600;        /* DATAALCOMMS orange — identity: logo, accents, active states */
  --bc-brand-rgb: 255, 102, 0;
  --bc-brand-ink: #C24A00;    /* interactive: filled buttons/white-text surfaces (AA) */
  --bc-brand-ink-hover: #A83F00;
  --bc-brand-soft: #FFF0E6;   /* tint: active nav, label badges */
}
[data-bs-theme="dark"] { --bc-brand-soft: #3D2410; }

:root { --bs-primary: var(--bc-brand); --bs-primary-rgb: var(--bc-brand-rgb); }

.btn-primary {
  --bs-btn-bg: var(--bc-brand-ink); --bs-btn-border-color: var(--bc-brand-ink);
  --bs-btn-hover-bg: var(--bc-brand-ink-hover); --bs-btn-hover-border-color: var(--bc-brand-ink-hover);
  --bs-btn-active-bg: var(--bc-brand-ink-hover); --bs-btn-active-border-color: var(--bc-brand-ink-hover);
  --bs-btn-disabled-bg: var(--bc-brand-ink); --bs-btn-disabled-border-color: var(--bc-brand-ink);
}
.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) { background: var(--bc-brand-soft); color: var(--bc-brand-ink); }
.menu-vertical .menu-item.active > .menu-link .menu-icon { color: var(--bc-brand-ink); }
.text-primary, .app-brand-text { color: var(--bc-brand) !important; }
.bg-label-primary { background: var(--bc-brand-soft) !important; color: var(--bc-brand-ink) !important; }
.progress-bar { background-color: var(--bc-brand); }
.form-control:focus, .form-select:focus { border-color: var(--bc-brand); box-shadow: 0 0 0 .25rem rgba(var(--bc-brand-rgb), .18); }
.form-check-input:checked { background-color: var(--bc-brand); border-color: var(--bc-brand); }
.nav-pills .nav-link.active { background-color: var(--bc-brand-ink); }
a { --bs-link-color-rgb: 194, 74, 0; --bs-link-hover-color-rgb: 168, 63, 0; }
.avatar-brand { background: var(--bc-brand) !important; color: #fff !important; }

/* ── Status legibility overrides ─────────────────────────────────────────────
   Materialize's default success is a pale lime with weak contrast on white.
   Deep-green tokens, defined once: chips, delta text and fills all inherit. */
:root {
  --bc-success: #0E9F6E;        /* fills: bars, progress, state dots */
  --bc-success-ink: #0A7B54;    /* text on light: 4.6:1 on white */
  --bc-success-soft: #DCF0E8;   /* chip tint */
}
[data-bs-theme="dark"] { --bc-success-soft: #123528; --bc-success-ink: #58C99A; }
.text-success { color: var(--bc-success-ink) !important; }
.bg-success { background-color: var(--bc-success) !important; }
.badge.bg-label-success, .bg-label-success { background: var(--bc-success-soft) !important; color: var(--bc-success-ink) !important; }
.border-success { border-color: var(--bc-success) !important; }

/* Same treatment for the other label chips — Materialize's defaults put pale
   text on pale tints (the sky-blue info chip failed David's review). Deep inks,
   defined once; every bg-label-* chip inherits. */
:root {
  --bc-info-ink: #1A64A8;    --bc-info-soft: #E1EFFB;   /* 5.2:1 on the tint */
  --bc-warning-ink: #92570A; --bc-warning-soft: #FAF0DA; /* 5.2:1 on the tint */
  --bc-danger-ink: #C13438;  --bc-danger-soft: #FBE4E5;
}
[data-bs-theme="dark"] {
  --bc-info-ink: #6FBDF2;    --bc-info-soft: #14324C;
  --bc-warning-ink: #E1B25C; --bc-warning-soft: #3A2E14;
  --bc-danger-ink: #F08A8D;  --bc-danger-soft: #452023;
}
.badge.bg-label-info, .bg-label-info { background: var(--bc-info-soft) !important; color: var(--bc-info-ink) !important; }
.badge.bg-label-warning, .bg-label-warning { background: var(--bc-warning-soft) !important; color: var(--bc-warning-ink) !important; }
.badge.bg-label-danger, .bg-label-danger { background: var(--bc-danger-soft) !important; color: var(--bc-danger-ink) !important; }

/* Inbox split layouts (Replies, future Triage): the selected list row carries the
   brand tint + a 3px brand rail, matching the menu's active treatment. */
.bc-list-selected { background: var(--bc-brand-soft) !important; box-shadow: inset 3px 0 0 var(--bc-brand); }

/* Check-chips — toolbar filter toggles: a chip that CONTAINS a real checkbox,
   so the affordance is explicit and the selected state still reads like every
   other "active" surface (soft brand tint + ink). Label wraps the input. */
.bc-check-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  border: 1px solid var(--bs-border-color); border-radius: 8px;
  padding: .35rem .7rem; cursor: pointer; user-select: none;
  font-size: .8125rem; color: var(--bs-secondary-color); background: transparent;
}
.bc-check-chip:hover { color: var(--bs-body-color); border-color: var(--bs-secondary-color); }
.bc-check-chip .form-check-input { margin: 0; cursor: pointer; flex-shrink: 0; }
.bc-check-chip:has(.form-check-input:checked) {
  background: var(--bc-brand-soft); border-color: var(--bc-brand-ink);
  color: var(--bc-brand-ink); font-weight: 600;
}

/* A modal opened FROM an offcanvas drawer must stack above it — Materialize ties both
   at z-index 1090, so DOM order wins and the drawer covers the modal. This utility (and
   the backdrop bump in the page JS) puts such modals on top. */
.bc-modal-over-drawer { --bs-modal-zindex: 1096; }

/* Status dots for pipeline pills — color never alone: every dot sits beside its
   plain-words state (Live / Paused / unknown). */
.bc-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.bc-dot-green { background: var(--bc-success); }
.bc-dot-amber { background: var(--bc-mood-2); }
.bc-dot-grey  { background: var(--bs-secondary-color); opacity: .55; }

/* Alerts (flash banners) inherit the same deep inks — Materialize's defaults are the
   same pale-on-pale problem at paragraph size. Bootstrap reads these vars per variant. */
.alert-success { --bs-alert-color: var(--bc-success-ink); --bs-alert-bg: var(--bc-success-soft); --bs-alert-border-color: color-mix(in srgb, var(--bc-success-ink) 25%, transparent); }
.alert-info    { --bs-alert-color: var(--bc-info-ink);    --bs-alert-bg: var(--bc-info-soft);    --bs-alert-border-color: color-mix(in srgb, var(--bc-info-ink) 25%, transparent); }
.alert-warning { --bs-alert-color: var(--bc-warning-ink); --bs-alert-bg: var(--bc-warning-soft); --bs-alert-border-color: color-mix(in srgb, var(--bc-warning-ink) 25%, transparent); }
.alert-danger  { --bs-alert-color: var(--bc-danger-ink);  --bs-alert-bg: var(--bc-danger-soft);  --bs-alert-border-color: color-mix(in srgb, var(--bc-danger-ink) 25%, transparent); }

/* ── Mood diverging scale (1 very unhappy → 5 very happy) ────────────────────
   Red pole → neutral midpoint → green pole. Every bar carries its emoji, label
   and percentage, so color is never the only signal. Central definition. */
:root {
  --bc-mood-1: #D64545;
  --bc-mood-2: #D97706;
  --bc-mood-3: #98A1B3;
  --bc-mood-4: #57B78E;
  --bc-mood-5: #0E9F6E;
}

/* ── Secondary text legibility ───────────────────────────────────────────────
   Materialize's muted text is too faint (David's review). One notch darker,
   still clearly secondary; .text-body-secondary everywhere inherits. */
:root { --bs-secondary-color: #6B7386; }
[data-bs-theme="dark"] { --bs-secondary-color: #98A1B5; }

/* ── Segmented control ───────────────────────────────────────────────────────
   Borderless: a soft track, muted unselected items, brand-tinted selected.
   Use on any window/mode switch: <div class="bc-seg"><button class="bc-seg-item active">…  */
.bc-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: #EDF0F5; }
[data-bs-theme="dark"] .bc-seg { background: #2A3245; }
.bc-seg-item {
  border: 0; background: transparent; color: var(--bs-secondary-color);
  font-size: .8125rem; font-weight: 500; line-height: 1;
  padding: .4rem .95rem; border-radius: 8px; text-decoration: none; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.bc-seg-item:hover { color: var(--bs-body-color); }
.bc-seg-item.active { background: var(--bc-brand-soft); color: var(--bc-brand-ink); font-weight: 600; }

/* ── Fill-column: a sibling column that matches the row's tallest column exactly and
   scrolls inside (the Ground map's drill pane). On lg+ the inner box is absolutely
   positioned so its content never drives the row height; stacked on mobile it flows
   normally with a viewport cap on the scroll area. ── */
/* The SVG scales to the column but never past ~3/4 of the viewport — the drill pane
   follows the map's height, so this cap sizes the whole card. */
#gmap svg { display: block; width: 100%; height: auto; max-height: 76vh; margin: 0 auto; }
#gmap-detail { overflow-y: auto; max-height: 60vh; }
@media (min-width: 992px) {
  .bc-fill-col { position: relative; }
  .bc-fill-col > .bc-fill-inner {
    position: absolute; top: 0; bottom: 0;
    left: calc(var(--bs-gutter-x) * .5); right: calc(var(--bs-gutter-x) * .5);
    display: flex; flex-direction: column;
  }
  .bc-fill-inner #gmap-detail { flex: 1 1 auto; max-height: none; min-height: 0; }
}
/* ── Selected list rows wear the brand, not the chassis purple — same soft-orange
   language as the active sidebar item. ── */
.list-group-item.active {
  background: var(--bc-brand-soft);
  color: var(--bc-brand-ink);
  border-color: var(--bs-border-color);
}
.list-group-item.active .text-body-secondary,
.list-group-item.active small { color: var(--bc-brand-ink) !important; }
.list-group-item.active .opacity-75 { opacity: .85 !important; }

/* ── Print: the board brief prints as the pack, not the app around it. ── */
@media print {
  #layout-menu, .layout-navbar, .layout-footer, .layout-overlay, .d-print-none { display: none !important; }
  .layout-wrapper .layout-page { margin-left: 0 !important; padding-left: 0 !important; }
  .content-wrapper .container-xxl, .content-wrapper .container-p-y { padding: 0 !important; margin: 0 !important; max-width: 100% !important; }
  html, body { background: #fff !important; }
  #board-brief { border: 0 !important; box-shadow: none !important; }
  #board-brief * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* ── Command Center: the wall's own type scale, staleness bands and attention states. ── */
.cc-big { font-size: 2.2rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cc-mid { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.cc-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); }
.cc-stamp { font-size: 10px; color: var(--bs-secondary-color); text-align: right; margin-top: .5rem; opacity: .7; }
.cc-stale { font-size: 11px; padding: 3px 10px; background: var(--bs-secondary-bg); color: var(--bs-secondary-color); border-top: 1px dashed var(--bs-border-color); }
.cc-case.cc-breach { background: color-mix(in srgb, var(--bs-danger) 8%, transparent); }
.cc-pulse { animation: ccpulse 1s ease-in-out 3; }
@keyframes ccpulse { 0%, 100% { box-shadow: none; } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--bs-danger) 45%, transparent); } }
.cc-focus { outline: 3px solid var(--bc-brand-soft); outline-offset: 2px; }
[data-bs-theme="dark"] .cc-map-svg svg [data-state-code] { stroke: #444 !important; }
html[data-bs-theme="dark"] body { background: #0d1117; }

/* ── Command Center polish: tighter headers, severity accent borders, wall density. ── */
.cc-panel > .card-header { padding: .55rem 1rem; border-bottom: 1px solid var(--bs-border-color); }
.cc-panel > .card-header h6 { letter-spacing: .05em; font-weight: 700; }
.cc-panel .cc-body { min-height: 96px; }
.cc-case { border-left: 3px solid transparent; padding-left: .5rem !important; }
.cc-case.cc-sev-critical { border-left-color: var(--bs-danger); }
.cc-case.cc-sev-high { border-left-color: var(--bc-hot); }
.cc-wall .cc-hide-wall { display: none !important; }
.cc-wall .cc-big { font-size: 3rem; }
.cc-wall .cc-stamp { opacity: .45; }

/* The Situation strip: one slim row, never a tall empty card. */
.cc-strip { position: relative; }
.cc-strip .cc-body { min-height: 0; padding: .5rem 1rem !important; }

/* Panel wrappers on Today/Ground: the wrapper is invisible chrome — the card inside
   is the visual; the stale band clings under it. */
.cc-panelw { min-width: 0; }
.cc-panelw .cc-stale { border: 1px dashed var(--bs-border-color); border-top: 0; border-radius: 0 0 .5rem .5rem; }

/* Responsive column divider for metric strips (md and up only). */
.border-end-md { border-right: 0 !important; }
@media (min-width: 768px) {
  .border-end-md { border-right: 1px solid var(--bs-border-color) !important; }
}

/* Wall panels: stamps sit on the same bottom line everywhere, short content or not. */
.cc-panel .cc-body { display: flex; flex-direction: column; }
.cc-panel .cc-body > .cc-stamp { margin-top: auto; padding-top: .5rem; }

/* Latest activity: rows newer than your last visit glow softly. */
.cc-tick.cc-new .timeline-event { background: rgba(255, 102, 0, .07); border-radius: .5rem; padding: .35rem .5rem; margin-left: -.5rem; }

/* The template ships no min-w-0 utility — without it a flex cell keeps min-width:auto
   and long titles push badges out of their row instead of wrapping. */
.min-w-0 { min-width: 0 !important; }

/* Composite-card column divider that only exists once columns sit side by side (lg+).
   The template's .border-end is unconditional and leaves a stray rule when stacked. */
@media (min-width: 992px) {
  .bc-border-end-lg { border-right: 1px solid var(--bs-border-color); padding-right: 1.5rem; }
}

/* ── HIGH urgency is heat, not caution (David 15 Aug): one step below critical's pure red,
   never amber — amber reads as "note it", HIGH means "move". Same label recipe as the
   core.css bg-label-* family so it sits correctly on both themes. ── */
:root { --bc-hot: #C8442A; }
[data-bs-theme="dark"] { --bc-hot: #E4694F; }
.badge.bg-label-hot {
  background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--bc-hot)) !important;
  color: var(--bc-hot) !important;
}

/* Clickable table rows (fact detail, drill-downs). */
.cursor-pointer { cursor: pointer; }

/* A column that DEFERS to its siblings' height and scrolls its own overflow (lg+):
   the absolute inner contributes no height, so the tallest sibling — the evidence — drives
   the row; below lg the column stacks and flows naturally. */
@media (min-width: 992px) {
  .bc-scroll-fill { position: relative; flex: 1 1 auto; min-height: 140px; }
  .bc-scroll-fill > div {
    position: absolute; inset: 0;
    overflow-y: auto; scrollbar-width: thin; padding-right: 6px;
  }
}

/* Command Center: the board column DEFERS to the map's height and scrolls its own
   overflow. flex-basis 0 keeps the board's content out of the row-height calculation, so
   the hotspot map drives; scoped OUT of wall mode (single-panel cycling would collapse). */
@media (min-width: 1200px) {
  #cc-grid:not(.cc-wall) .cc-defer-col .cc-body {
    flex: 1 1 0; min-height: 320px;
    display: flex; flex-direction: column; overflow: hidden;
  }
  /* Only the case rows scroll; the filter chip, the count/open-Incidents line and the
     computed stamp are panel chrome and stay put. */
  #cc-grid:not(.cc-wall) .cc-defer-col .cc-board-rows {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; scrollbar-width: thin;
  }
}