/* RescueDesk styles */
:root {
  --rd-accent: #c8102e;
  --rd-accent-soft: #fde8eb;
  --rd-present: #198754;
  --rd-present-soft: #d1f1dd;
}

body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

.navbar-brand .bi-shield-plus { font-size: 1.3rem; }

.card { border: 1px solid rgba(0,0,0,.08); }
.card-header { background-color: rgba(0,0,0,.02); font-weight: 600; }

/* #161 (Amber): make each Today section read as a distinct, labeled BOX — a clearer
   border + subtle shadow, with a CENTERED, bold heading — so the sections separate
   at a glance. `var(--bs-border-color)` is theme-aware (works in light + dark);
   overriding `--bs-card-border-radius` rounds the card AND its header's top corners
   together (no mismatched-corner notch). */
.today-section {
  --bs-card-border-radius: .6rem;
  border-color: var(--bs-border-color);
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.today-section > .card-header {
  text-align: center;
  font-weight: 700;
  font-size: 1.05rem;
}
/* A header with a right-side action ([title][link]) becomes a 3-column GRID so the
   TITLE is centered in the card regardless of the link's width, with the action
   pinned right — no magic gutter, and no !important war with Bootstrap's flex
   utilities (grid overrides `.d-flex`'s `display:flex`, which IS forced with
   !important — hence the !important on `display` only). A title-only header (crew's
   checklist has no Edit link) just centers its lone child. Plain non-flex headers
   (Swap, Expiring credentials) center via the `text-align` above. */
.today-section > .card-header.d-flex {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  gap: .5rem;
  align-items: center;
}
.today-section > .card-header.d-flex > :first-child { grid-column: 2; min-width: 0; }
.today-section > .card-header.d-flex > :last-child:not(:first-child) {
  grid-column: 3;
  justify-self: end;
  font-weight: 400;
}

.stat-tile {
  border-left: 4px solid var(--bs-secondary);
  background: white;
}
.stat-tile.accent { border-left-color: var(--rd-accent); }
.stat-tile.ok     { border-left-color: var(--bs-success); }
.stat-tile.warn   { border-left-color: var(--bs-warning); }
.stat-tile.danger { border-left-color: var(--bs-danger); }
.stat-tile .stat-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: #6c757d; }
.stat-tile .stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }

.big-action {
  font-size: 1.15rem;
  padding: 1rem 1.25rem;
  width: 100%;
}
.big-clock {
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* --- weekly schedule grid --- */
.schedule-grid .day-col {
  min-height: 200px;
  background: white;
  border-radius: 0.5rem;
  padding: 0.5rem;
  margin-bottom: .5rem;
  border: 1px solid rgba(0,0,0,.08);
}
.schedule-grid .day-col.today { border-color: var(--rd-accent); box-shadow: 0 0 0 3px var(--rd-accent-soft); }
.schedule-grid .day-col .day-label { font-weight: 700; font-size: .9rem; color: #495057; }
.schedule-grid .shift-pill {
  display: block;
  background: #eef3ff;
  border-left: 3px solid #3d6bf0;
  padding: .4rem .55rem;
  border-radius: .35rem;
  margin-top: .35rem;
  font-size: .82rem;
}
/* "My shifts" emphasis — a signed-in person's own shifts pop so they can spot
   their days at a glance (suggestion #2, Gisela/Amber). Ring + bold on top of
   the accent-soft background. */
.schedule-grid .shift-pill.mine {
  background: var(--rd-accent-soft);
  border-left-color: var(--rd-accent);
  box-shadow: inset 0 0 0 2px var(--rd-accent);
  font-weight: 600;
}
.schedule-grid .shift-pill.swap { background: #fff7e0; border-left-color: #f0a93d; }
.schedule-grid .shift-pill.present {
  background: var(--rd-present-soft);
  border-left-color: var(--rd-present);
}
/* station sub-header within a day column (shown when a day spans 2+ stations) */
.schedule-grid .station-group-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #6c757d;
  margin: .55rem 0 .1rem;
  padding-bottom: .1rem;
  border-bottom: 1px dashed rgba(0,0,0,.12);
}
.schedule-grid .station-group-label:first-child { margin-top: .2rem; }
/* #162 (Amber): station sub-header inside the Today "On duty" list-group and the
   full on-duty board. Theme-aware (Bootstrap vars) so it reads in light + dark;
   the schedule-grid rule above is a different, hardcoded-light context. */
.list-group-item.station-group-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--bs-secondary-color);
  background: var(--bs-tertiary-bg);
}
/* double-booked: same person scheduled twice on one day */
.schedule-grid .shift-pill.double-booked,
.month-pill.double-booked {
  border: 1px solid #dc3545;
  border-left-width: 3px;
  background: #fde8ea;
}
/* availability conflict: person scheduled on a day they're marked unavailable
   (suggestions #35/#36). Amber-stripe so it reads distinctly from double-booked. */
.schedule-grid .shift-pill.avail-conflict {
  border: 1px solid #dc3545;
  border-left-width: 3px;
  background: repeating-linear-gradient(
    -45deg, #fde8ea, #fde8ea 6px, #fff0c2 6px, #fff0c2 12px);
}
/* pairing lens (request audit 2026-07-20 R1): a do-not-pair duo crewed
   together, or two drivers in one crew — the generator's strong rules flagged
   on manual edits. Purple, so it reads distinctly from the red conflicts. */
/* :not() guards keep the RED hard-error paint (double-book / unavailable) on
   top when a pill carries both — purple must never mask a harder problem. */
.schedule-grid .build-pill.pair-conflict:not(.double-booked):not(.avail-conflict),
.build-month .build-pill.pair-conflict:not(.double-booked):not(.avail-conflict) {
  border: 1px solid #8e44ad;
  border-left-width: 3px;
  background: #f6ecfb;
}
.pair-conflict-text { color: #6f2d91; }

/* leaves-early: a shift trimmed shorter than a full shift of its type, so
   someone leaves early and the gap may need coverage (suggestions #29 / #174).
   A FULL amber box (+ soft glow) around the whole square so it can't be
   overlooked (Amber #174) — amber, matching the -Xh badge + "check coverage"
   note, distinct from the red hard-error / purple pairing flags. The :not()
   guards keep a harder red/purple box on top when a pill carries both, so amber
   never masks a worse problem (mirrors the pair-conflict rule above). */
.schedule-grid .shift-pill.leaves-early:not(.double-booked):not(.avail-conflict):not(.pair-conflict),
.build-pill.leaves-early:not(.double-booked):not(.avail-conflict):not(.pair-conflict) {
  border: 2px solid #ffc107;
  border-left-width: 4px;      /* keep the heavier heads-up left edge */
  background: #fff8e6;
  box-shadow: 0 0 0 2px rgba(255, 193, 7, .35);
}
/* compact station sub-header inside the small month cells */
/* crew availability calendar (suggestion #10) */
.avail-pick { margin-top: .15rem; font-size: .72rem; padding: .1rem .3rem; }

/* #243 (Gisela): color-code the per-day availability selects by shift type, on
   BOTH the crew calendar (.avail-pick) and the supervisor editor (.avail-select).
   The color is driven by a `data-avail="<value>"` attribute that
   availability_colors.js sets on load + change (and the supervisor bulk buttons
   repaint via window.rdAvailPaintAll). Coloring the SELECT — not the month cell —
   sidesteps the pre-existing dark-mode bug where the old all-green `.avail-set`
   cell tint was out-specified by `[data-bs-theme=dark] .schedule-month .month-cell`
   and vanished in dark mode. Tokens carry a dark-mode variant so the fills stay
   readable in both themes; the text labels stay (color is additive, colorblind-
   safe). Matches what Gisela was told: Any=green, Unavailable=red, Days=yellow,
   24 hr=blue, Nights=purple (First 12 / day combos share the Days yellow). */
:root {
  --rd-av-any-bg:   #d1f1dd; --rd-av-any-fg:   #0f5132;   /* Any shift — green  */
  --rd-av-off-bg:   #f8d7da; --rd-av-off-fg:   #842029;   /* Unavailable — red  */
  --rd-av-day-bg:   #fff3cd; --rd-av-day-fg:   #664d03;   /* Days / First 12 — yellow */
  --rd-av-24-bg:    #cfe2ff; --rd-av-24-fg:    #084298;   /* 24 hr — blue       */
  --rd-av-night-bg: #e7d8f5; --rd-av-night-fg: #59359a;   /* Nights / Back 12 — purple */
}
[data-bs-theme="dark"] {
  --rd-av-any-bg:   #14361f; --rd-av-any-fg:   #9be7b4;
  --rd-av-off-bg:   #3d1c20; --rd-av-off-fg:   #f1a7ad;
  --rd-av-day-bg:   #3a2f10; --rd-av-day-fg:   #f2d98a;
  --rd-av-24-bg:    #122a4d; --rd-av-24-fg:    #9ec5ff;
  --rd-av-night-bg: #2b1d44; --rd-av-night-fg: #cdb0f0;
}
/* Set only background-COLOR (not the `background` shorthand) so Bootstrap's
   form-select dropdown-arrow background-image survives. The [data-avail]
   attribute selector (class + attr) out-specifies plain `.form-select`. */
.avail-pick[data-avail="any"],  .avail-select[data-avail="any"]  { background-color: var(--rd-av-any-bg);   color: var(--rd-av-any-fg); }
.avail-pick[data-avail="off"],  .avail-select[data-avail="off"]  { background-color: var(--rd-av-off-bg);   color: var(--rd-av-off-fg); }
.avail-pick[data-avail="24hr"], .avail-select[data-avail="24hr"] { background-color: var(--rd-av-24-bg);    color: var(--rd-av-24-fg); }
.avail-pick[data-avail="day_truck"],      .avail-select[data-avail="day_truck"],
.avail-pick[data-avail="split_24_day"],   .avail-select[data-avail="split_24_day"],
.avail-pick[data-avail="day_or_front12"], .avail-select[data-avail="day_or_front12"] { background-color: var(--rd-av-day-bg); color: var(--rd-av-day-fg); }
.avail-pick[data-avail="split_24_night"], .avail-select[data-avail="split_24_night"] { background-color: var(--rd-av-night-bg); color: var(--rd-av-night-fg); }

/* The small legend shown under both editors. The swatch dot uses the same
   theme-aware tokens, so the legend tracks the selects in light + dark. */
.avail-legend { display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: center; }
.avail-legend .avail-swatch { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; }
.avail-legend .avail-dot {
  width: .95rem; height: .95rem; border-radius: .2rem;
  border: 1px solid rgba(0,0,0,.2); display: inline-block; flex: 0 0 auto;
}
.avail-legend .avail-dot.any   { background: var(--rd-av-any-bg); }
.avail-legend .avail-dot.off   { background: var(--rd-av-off-bg); }
.avail-legend .avail-dot.day   { background: var(--rd-av-day-bg); }
.avail-legend .avail-dot.t24   { background: var(--rd-av-24-bg); }
.avail-legend .avail-dot.night { background: var(--rd-av-night-bg); }
.month-station-label {
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #6c757d;
  margin: .25rem 0 .05rem;
  line-height: 1;
}

/* --- schedule builder --- */
.employee-tray { max-height: 70vh; overflow-y: auto; }
.employee-chip {
  display: flex; align-items: center; gap: .5rem;
  cursor: grab;
  user-select: none;
}
.employee-chip:hover { background: #f8f9fa; }
.employee-chip.dragging { opacity: .5; }
.build-day {
  min-height: 220px;
  transition: background .12s, box-shadow .12s;
}
.build-day.drop-target {
  background: var(--rd-present-soft);
  box-shadow: inset 0 0 0 2px var(--rd-present);
}
/* per-station drop zones inside a day column (suggestion #11) */
.station-drop {
  border: 1px dashed rgba(0,0,0,.15);
  border-radius: .35rem;
  padding: .25rem .35rem;
  margin-top: .4rem;
  transition: background .12s, box-shadow .12s;
}
.station-drop.drop-target {
  background: var(--rd-present-soft);
  box-shadow: inset 0 0 0 2px var(--rd-present);
  border-color: var(--rd-present);
}
.station-drop .station-drop-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #6c757d;
}
.station-drop .drop-hint { opacity: .6; }

/* editable MONTH layout on the build screen (suggestion #41) — the crew month
   grid, but every cell is an editable drop zone. Overrides the tall week .build-day
   / roomy .station-drop sizing to stay compact. */
.build-month-wrap { overflow-x: auto; }
.build-month {
  display: grid;
  grid-template-columns: repeat(7, minmax(118px, 1fr));
  gap: 3px;
  min-width: 820px;
}
.build-month .bm-dow {
  text-align: center; font-weight: 700; font-size: .72rem; color: #6c757d; padding: 1px 0;
}
.build-month .bm-cell {
  min-height: 86px;                    /* override .build-day's 220px */
  background: #fff; border: 1px solid #e6e8eb; border-radius: .25rem;
  padding: 2px 3px; font-size: .72rem;
}
.build-month .bm-cell.today { border-color: var(--rd-accent); box-shadow: 0 0 0 2px var(--rd-accent-soft); }
.build-month .bm-cell.bm-outside { opacity: .5; }
.build-month .bm-date { font-size: .72rem; }
.build-month .bm-drop {
  margin-top: 2px; padding: 1px 2px; border: 0; border-top: 1px dashed rgba(0,0,0,.12);
  border-radius: 0;
}
.build-month .bm-drop.drop-target { background: var(--rd-present-soft); box-shadow: inset 0 0 0 2px var(--rd-present); }
.build-month .bm-station { font-size: .58rem; font-weight: 700; text-transform: uppercase; color: #6c757d; }
/* compact pills inside month cells, but keep the edit modal full-size/readable */
.build-month .shift-pill { font-size: .66rem; padding: 1px 4px; margin-top: 1px; }
.build-month .shift-pill .bi { font-size: .7rem; }
.build-month .open-slot .form-select-sm,
.build-month .open-slot .btn { font-size: .6rem; padding: 0 2px; }
.build-month .modal { font-size: 1rem; }

.build-pill { cursor: grab; }            /* draggable to move (suggestion #17) */
.build-pill:active { cursor: grabbing; }
.build-pill.dragging { opacity: .5; }
.preset-tray .btn.active { background: var(--bs-primary); color: white; }

/* #75: drag-to-remove drop zone — a fixed bar that appears only while an
   existing shift/open pill is being dragged (body.rd-drag-existing). */
.rd-remove-zone {
  display: none;
  position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%);
  z-index: 1080; max-width: 92vw;
  align-items: center; gap: .5rem;
  padding: .6rem 1.1rem; border-radius: .6rem;
  background: var(--bs-danger); color: #fff;
  border: 2px dashed rgba(255, 255, 255, .8);
  box-shadow: 0 .3rem 1rem rgba(0, 0, 0, .3);
  font-size: .9rem;
}
body.rd-drag-existing .rd-remove-zone { display: flex; }
.rd-remove-zone.drop-target { background: #a71d2a; transform: translateX(-50%) scale(1.04); }
.rd-remove-zone i { font-size: 1.2rem; }

/* --- level (certification) color coding --------------------------------- *
 * Each level maps to a color via a `lvl-<slug>` class (slug from the
 * `levelslug` Jinja filter). The color is exposed as --lvl-color so the same
 * class can tint a dot, a chip's left edge, or a builder pill's left border.
 * Added for tester suggestion #3 (2026-06-19, "Can each level be color coded?").
 * NOTE: EMT (yellow) and EMR (green) were set per Gisela's request (#20,
 * 2026-06-26) — these intentionally OVERLAP the schedule's state colors
 * (amber=swap, green=present), so the team's expected level colors won.
 * Shades are nudged slightly off the exact state hues for legibility, and the
 * color legend on each schedule view labels which dot is which level. The other
 * levels still avoid the state palette. */
.lvl-paramedic  { --lvl-color: #0d6efd; }  /* blue   */
.lvl-emt        { --lvl-color: #e8b500; }  /* yellow (#20) */
.lvl-aemt       { --lvl-color: #d63384; }  /* pink   */
.lvl-emr        { --lvl-color: #2e9e4f; }  /* green  (#20) */
.lvl-supervisor { --lvl-color: #6f42c1; }  /* purple */

.lvl-dot {
  display: inline-block;
  width: .6rem; height: .6rem;
  border-radius: 50%;
  background: var(--lvl-color, #6c757d);
  margin-right: .25rem;
  flex: 0 0 auto;
  vertical-align: middle;
}
.lvl-legend { display: flex; flex-wrap: wrap; gap: .25rem .9rem; align-items: center; }
.lvl-legend .lvl-legend-item { display: inline-flex; align-items: center; font-size: .8rem; color: #495057; }

/* color the builder pill + employee chip by the person's level */
.schedule-grid .build-pill { border-left-color: var(--lvl-color, #3d6bf0); }
.employee-chip { border-left: 4px solid var(--lvl-color, transparent); }

/* --- monthly schedule grid --- */
.schedule-month { background: white; border-radius: .5rem; padding: .5rem; border: 1px solid rgba(0,0,0,.08); }
.schedule-month .month-header,
.schedule-month .month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.schedule-month .month-dow {
  text-align: center; font-weight: 700; font-size: .8rem; color: #6c757d;
  padding: .25rem 0;
}
.schedule-month .month-cell {
  min-height: 90px;
  background: #f8f9fa;
  border-radius: .25rem;
  padding: .25rem .35rem;
  font-size: .75rem;
}
.schedule-month .month-cell.today { background: var(--rd-accent-soft); }
.schedule-month .month-cell.outside { opacity: .45; }
.schedule-month .month-cell-date { font-weight: 700; }
.schedule-month .month-pill {
  background: #eef3ff;
  border-left: 2px solid #3d6bf0;
  padding: .1rem .25rem;
  border-radius: .25rem;
  margin-top: .15rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.schedule-month .month-pill.mine {
  background: var(--rd-accent-soft);
  border-left-color: var(--rd-accent);
  box-shadow: inset 0 0 0 2px var(--rd-accent);
  font-weight: 700;
}

/* OPEN slots — unfilled seats crew can pick up (suggestion #35b). Made to stand
   out: dashed amber outline + soft amber fill, distinct from staffed pills. */
.shift-pill.open-slot,
.month-pill.open-slot {
  background: #fff7e6 !important;
  border: 1.5px dashed #f0a93d !important;
  border-left: 1.5px dashed #f0a93d !important;
  color: #8a5a00;
}
.month-pill.open-slot { display: block; font-weight: 600; }
.shift-pill.open-slot strong { color: #b9770e; }

/* Pay-period blocks on the month view (Amber #63). A subtle alternating tint
   distinguishes each 2-week pay period, and a full-width strip after it totals
   the scheduled hours — "a block around each 2-week pay period" without clutter. */
.schedule-month .month-cell.pp-1 { background: #e9edf2; }
/* today's highlight must beat the period tint (3 classes > 2). */
.schedule-month .month-cell.today.pp-0,
.schedule-month .month-cell.today.pp-1 { background: var(--rd-accent-soft); }
.schedule-month .month-payperiod {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .25rem .75rem;
  padding: .3rem .65rem;
  margin: .1rem 0 .3rem;
  border-radius: .3rem;
  font-size: .8rem;
  background: #e7ebf0;
  border: 1px solid #d3dae2;
  color: #3a4756;
}
.schedule-month .month-payperiod.pp-1 { background: #dfe4ea; }
.schedule-month .month-payperiod strong { font-size: .95rem; color: #22303f; }

/* Rig-check editor: collapse a compartment's item list (Gisela, 2026-07-17 —
   folds away the items so a long checklist isn't a long scroll). The header
   (name, reorder arrows, count, chevron) stays visible; the inputs inside the
   hidden list are still submitted with the form. */
.cat-card.cat-collapsed > .list-group { display: none; }

/* print: schedule calendars on paper (suggestion #32). Chrome is hidden via
   Bootstrap's d-print-none; here we make the month grid lay out cleanly on a
   sheet and force the level/status colors to actually print. */
@media print {
  @page { margin: 0.5cm; size: landscape; }
  body { background: #fff !important; }
  main.container-fluid { max-width: none !important; padding: 0 !important; }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  /* Hide interactive chrome only — NOT <form>, because the month-view OPEN-slot
     pills are <button> wrapped in a pickup <form>; hiding forms dropped them from
     the printout (Amber, #38). The OPEN button has no .btn class, so it survives
     the .btn hide and prints. */
  .btn, .btn-group, .alert, .navbar, .preset-tray { display: none !important; }
  /* The click-a-name selection is screen chrome: the strip card carries
     d-print-none, and the highlight ring must not print either (#69). */
  .pp-selected { outline: none !important; }
  a[href]::after { content: ""; }          /* don't append URLs to links */
  .print-title { display: block !important; }
  /* Compact the calendar so a full month fits on one landscape page (#38). */
  .schedule-month .month-grid { gap: 2px; }
  .schedule-month .month-dow { font-size: .6rem; padding: 0; }
  .schedule-month .month-cell { min-height: 0; padding: 1px 2px; font-size: .58rem; break-inside: avoid; }
  .schedule-month .month-cell-date { font-size: .62rem; }
  .schedule-month .month-pill { font-size: .58rem; padding: 0 2px; margin-top: 1px; white-space: normal; border-left-width: 2px; }
  .month-station-label { font-size: .54rem; margin: 1px 0 0; }
  .schedule-month .month-payperiod { font-size: .56rem; padding: 1px 4px; margin: 1px 0; break-inside: avoid; }
  .schedule-month .month-payperiod strong { font-size: .6rem; }
  h1, .h3 { font-size: 1.1rem; }
}
.print-title { display: none; }

/* availability editor — calendar layout (suggestion #31) */
.avail-cal-wrap { overflow-x: auto; }
.avail-cal {
  display: grid;
  grid-template-columns: repeat(7, minmax(108px, 1fr));
  gap: 4px;
  min-width: 760px;            /* keeps the 7-col shape; wrap scrolls on phones */
}
.avail-cal-dow {
  text-align: center; font-weight: 700; font-size: .78rem; color: #6c757d;
  padding: .2rem 0;
}
.avail-cal-blank { background: transparent; }
.avail-cal-cell {
  background: #f8f9fa; border-radius: .25rem; padding: .25rem .3rem;
}
.avail-cal-cell.weekend { background: #eef1f6; }
.avail-cal-date { font-weight: 700; font-size: .8rem; margin-bottom: .15rem; }

/* save reminder: pulse the Save button while there are unsaved availability edits */
@keyframes savePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,53,69,.5); }
  50%      { box-shadow: 0 0 0 .35rem rgba(220,53,69,0); }
}
.save-pulse { animation: savePulse 1.4s ease-out infinite; }

.checklist-row { padding: .5rem .75rem; border-bottom: 1px solid rgba(0,0,0,.05); }
.checklist-row:last-child { border-bottom: none; }
.checklist-row .form-select-sm { max-width: 130px; }
/* #243 (Gisela): alternate row shading on the rig-check form so a long
   compartment is easier to scan line-by-line. `var(--bs-tertiary-bg)` is
   theme-aware (works light + dark); `:nth-of-type(even)` is scoped to each
   `.accordion-body`, so the stripe pattern RESETS per compartment (every
   compartment opens with an un-shaded first row). `.checklist-row` is unique to
   rigcheck_new.html, so this touches no other screen. */
.accordion-body .checklist-row:nth-of-type(even) { background: var(--bs-tertiary-bg); }

.cred-row.critical { background: #fde8eb; }
.cred-row.warning  { background: #fff7e0; }
.cred-row.expired  { background: #f8d7da; }

.priority-urgent { border-left: 4px solid var(--bs-danger); }
.priority-important { border-left: 4px solid var(--bs-warning); }
.priority-normal { border-left: 4px solid var(--bs-secondary); }

.avatar-circle {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #495057; color: white; border-radius: 50%;
  font-weight: 600; font-size: .85rem;
}

.login-card .role-pill {
  font-size: .7rem; padding: .15rem .5rem;
  border-radius: 999px; background: #e9ecef;
}

/* --- signature pad --- */
.signature-pad .signature-canvas-wrap {
  position: relative;
  background: #fff;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: .35rem;
  height: 160px;
  overflow: hidden;
}
.signature-pad canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}
.signature-pad .signature-baseline {
  position: absolute;
  left: 12px; right: 12px; bottom: 36px;
  border-top: 1px dashed rgba(0,0,0,.25);
  pointer-events: none;
}
.signature-pad .signature-x {
  position: absolute;
  left: 12px; bottom: 28px;
  font-size: 1.1rem; color: rgba(0,0,0,.3);
  pointer-events: none;
}
.signature-display svg {
  max-width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: .35rem;
  padding: .25rem;
}

/* Help / FAQ — native <details> styled to read as clickable rows */
.faq-item {
  background: #fff;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: .35rem;
  padding: .5rem .75rem;
}
.faq-item > summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::before {
  content: "\F285";                /* bootstrap-icons chevron-right */
  font-family: "bootstrap-icons";
  font-weight: normal;
  margin-right: .5rem;
  color: var(--rd-accent);
  display: inline-block;
  transition: transform .15s ease;
}
.faq-item[open] > summary::before { transform: rotate(90deg); }
.faq-item > .faq-body {
  margin-top: .5rem;
  padding-left: 1.4rem;
  color: #333;
}

/* ---- Rig checklist editor (suggestions #48 reorder / #50 master save) ---- */
.cl-savebar {
  position: sticky;
  bottom: 0;
  background: var(--bs-body-bg, #fff);
  padding: .7rem;
  margin-top: .5rem;
  border-top: 1px solid var(--bs-border-color, #dee2e6);
  box-shadow: 0 -6px 12px rgba(0, 0, 0, .06);
  z-index: 5;
}
.cat-card .card-header .cat-name { display: inline-block; }
.item-row.item-inactive { opacity: .55; }
.item-row.item-inactive input[name^="name::"] { text-decoration: line-through; }
/* selecting Remove visually flags the whole row */
.item-row:has(.remove-chk:checked) { background: #fbeaea; }
.item-row:has(.remove-chk:checked) input[name^="name::"] { text-decoration: line-through; }

/* ============================================================================
   Theme toggle (light / dark, app-wide) + Echo landing gate
   Added 2026-07-19. Bootstrap 5.3 data-bs-theme drives Bootstrap components;
   the [data-bs-theme="dark"] block near the end re-skins this file's custom
   light-only surfaces (schedule grids, tiles, cells) so dark mode is coherent.
   ============================================================================ */

/* --- theme toggle button (used in the navbar + as a floating control) --- */
.rd-theme-toggle { line-height: 1; cursor: pointer; background: transparent; border: 0; color: inherit; }
.rd-theme-light-icon { display: none; }
[data-bs-theme="dark"] .rd-theme-dark-icon { display: none; }
[data-bs-theme="dark"] .rd-theme-light-icon { display: inline; }
.rd-theme-float {
  position: fixed; top: .85rem; right: .85rem; z-index: 1040;
  width: 2.5rem; height: 2.5rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.4); background: rgba(20,24,30,.55); color: #fff;
  font-size: 1.1rem; display: inline-flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}
.rd-theme-float:hover { background: rgba(20,24,30,.85); }
/* Only when the ACF strip actually precedes the floating toggle (base.html's
   logged-out pages) do we drop the toggle below it. Scoped via the sibling
   combinator so gate.html — which reuses .rd-theme-float but renders NO strip —
   keeps its toggle in the normal top corner (no phantom gap). */
.rd-acf-strip ~ .rd-theme-float { top: 2.6rem; }
.navbar .rd-theme-toggle { color: rgba(255,255,255,.85); font-size: 1.15rem; padding: .25rem .5rem; }
.navbar .rd-theme-toggle:hover { color: #fff; }

/* --- ACF maintenance strip (top-of-page banner, above the navbar) ---
   Announces that the site is built + maintained by the Autonomous Claude AI
   Framework (ACF). Subtle + branded + theme-aware via Bootstrap 5.3 "subtle"
   tokens, so it stays legible in light AND dark and reads as distinct from the
   always-dark navbar directly below it. */
.rd-acf-strip {
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
  border-bottom: 1px solid var(--bs-primary-border-subtle);
  font-size: .78rem;
  line-height: 1.35;
  text-align: center;
  padding: .28rem .75rem;
}
.rd-acf-strip .rd-acf-tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.rd-acf-strip .bi-robot { opacity: .9; }

/* ===================== Echo landing / access gate ===================== */
.gate-body { background: var(--bs-body-bg); min-height: 100vh; }
.gate-flash { position: fixed; top: .75rem; left: 50%; transform: translateX(-50%); z-index: 1050; width: min(94vw, 540px); }

.gate-hero { position: relative; display: flex; min-height: clamp(580px, 90vh, 840px); overflow: hidden; color: #fff; }
.gate-hero-media { position: absolute; inset: 0; background-size: cover; background-position: center 42%; transform: scale(1.02); }
.gate-hero-scrim { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,15,20,.74) 0%, rgba(11,15,20,.5) 42%, rgba(11,15,20,.86) 100%); }
.gate-hero-inner { position: relative; z-index: 2; width: 100%; max-width: 1200px; margin: 0 auto;
  padding: clamp(1.25rem, 4vw, 2.5rem); display: flex; flex-direction: column; }
.gate-brandbar { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; margin-bottom: auto; }
.gate-brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800;
  font-size: clamp(1.4rem, 3vw, 1.95rem); letter-spacing: -.01em; }
.gate-brand .bi { color: var(--rd-accent); font-size: 1.1em; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.gate-brand-name { text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.gate-brand-sub { font-size: .8rem; opacity: .88; font-weight: 500; }
.gate-hero-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center; padding: 2.25rem 0 1rem; flex: 1; }
.gate-eyebrow { text-transform: uppercase; letter-spacing: .13em; font-size: .78rem; font-weight: 700;
  color: #ffcdd3; margin-bottom: .5rem; }
.gate-title { font-weight: 800; font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.05; letter-spacing: -.02em;
  text-shadow: 0 2px 14px rgba(0,0,0,.45); margin-bottom: .75rem; }
.gate-lede { font-size: clamp(1rem, 1.5vw, 1.15rem); max-width: 46ch; opacity: .95; margin-bottom: 1.25rem; }
.gate-highlights { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1.25rem; max-width: 30rem; }
.gate-highlights li { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .95rem; }
.gate-highlights .bi { color: #ff8a97; flex: 0 0 auto; }
.gate-login { border: 0; border-radius: 1rem; }

.gate-main { background: var(--bs-body-bg); }
.gate-wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); }
.gate-section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.gate-section-alt { background: var(--bs-tertiary-bg); }
.gate-kicker { text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; font-weight: 700; color: var(--rd-accent); margin-bottom: .3rem; }
.gate-h2 { font-weight: 800; font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -.015em; margin-bottom: 1.5rem; }

/* Gallery: a gap-free mosaic — fleet is a 2x2 feature, Rescue 3 a wide banner,
   Medic 2 + interior fill the remaining two cells (fleet + wide + 2 = 8 cells). */
.gate-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; grid-auto-rows: 195px; }
.gate-shot { position: relative; margin: 0; border-radius: .75rem; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,.14); }
.gate-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.gate-shot:hover img { transform: scale(1.05); }
.gate-shot figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: .85rem .75rem .5rem;
  color: #fff; font-size: .82rem; font-weight: 600; background: linear-gradient(0deg, rgba(0,0,0,.72), transparent); }
.gate-shot-feature { grid-column: span 2; grid-row: span 2; }
.gate-shot-wide { grid-column: span 2; }

.gate-contact { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.gate-contact-card { display: flex; flex-direction: column; gap: .1rem; padding: 1.25rem; border-radius: .75rem;
  text-decoration: none; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
  color: var(--bs-body-color); transition: transform .15s, box-shadow .15s, border-color .15s; }
.gate-contact-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,.12); border-color: var(--rd-accent); }
.gate-contact-card .bi { font-size: 1.5rem; color: var(--rd-accent); margin-bottom: .3rem; }
.gate-contact-label { text-transform: uppercase; letter-spacing: .06em; font-size: .7rem; font-weight: 700; color: var(--bs-secondary-color); }
.gate-contact-val { font-weight: 600; line-height: 1.35; }

.gate-footer { background: #1b1f24; color: rgba(255,255,255,.85); padding: 1.5rem 0; }
[data-bs-theme="dark"] .gate-footer { background: #05070a; }
.gate-footer-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; align-items: center; font-size: .9rem; }
.gate-footer-fine { opacity: .78; font-size: .82rem; }

@media (max-width: 767.98px) {
  .gate-hero-grid { grid-template-columns: 1fr; padding-top: 1.25rem; gap: 1.5rem; }
  /* 2-col mosaic: feature + wide banner each span the full width, Medic 2 +
     interior share the last row — still gap-free. */
  .gate-gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 155px; }
  .gate-shot-feature { grid-column: span 2; grid-row: span 1; }
  .gate-contact { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .gate-highlights { grid-template-columns: 1fr; }
  .gate-contact { grid-template-columns: 1fr; }
}

/* --- ACF credibility badge (hero) + trust band (landing) ---
   The front-page signal for county/EMS decision-makers: RescueDesk is fully
   maintained by an advanced AI system (ACF). Badge = at-a-glance in the hero;
   band = the "runs the whole lifecycle, including talking to the crew" message.
   Theme-aware; the band reuses the landing's card language. */
.gate-acf-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  align-self: center;                /* center the pill, don't baseline-align it against the brand text */
  margin-left: auto;                 /* float to the right of the hero brand bar on wide screens */
  font-size: .72rem; font-weight: 600;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 50rem; padding: .3rem .75rem;
  -webkit-backdrop-filter: blur(3px);   /* iPad Safari needs the prefix */
  backdrop-filter: blur(3px);
}
.gate-acf-badge .bi-robot { opacity: .95; }
.gate-acf-band .gate-acf-lede {
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  max-width: 64ch; line-height: 1.6; margin-bottom: 1.75rem;
}
.gate-acf-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.gate-acf-point {
  display: flex; align-items: center; gap: .7rem;
  padding: 1.1rem 1.25rem; border-radius: .75rem;
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
  font-weight: 600; line-height: 1.3;
}
.gate-acf-point .bi { font-size: 1.5rem; color: var(--rd-accent); flex: 0 0 auto; }
/* Below the lg desktop breakpoint (tablet-portrait iPads / phones) the long badge
   takes its own full-width line in the wrapping brand bar instead of crowding or
   overflowing beside the brand name (review 2026-09-19). */
@media (max-width: 991.98px) {
  .gate-acf-badge { margin-left: 0; flex-basis: 100%; }
}
@media (max-width: 767.98px) {
  .gate-acf-points { grid-template-columns: 1fr; }
}

/* ===================== dark-mode re-skin of light-only custom surfaces ===================== */
[data-bs-theme="dark"] .stat-tile,
[data-bs-theme="dark"] .schedule-grid .day-col,
[data-bs-theme="dark"] .schedule-month,
[data-bs-theme="dark"] .build-day,
[data-bs-theme="dark"] .build-month .bm-cell,
[data-bs-theme="dark"] .faq-item,
[data-bs-theme="dark"] .avatar-circle { background: var(--bs-secondary-bg); }
[data-bs-theme="dark"] .schedule-grid .day-col,
[data-bs-theme="dark"] .schedule-month,
[data-bs-theme="dark"] .build-month .bm-cell,
[data-bs-theme="dark"] .faq-item { border-color: var(--bs-border-color); }
[data-bs-theme="dark"] .schedule-month .month-cell,
[data-bs-theme="dark"] .avail-cal-cell { background: var(--bs-tertiary-bg); }
[data-bs-theme="dark"] .avail-cal-cell.weekend { background: var(--bs-secondary-bg); }
[data-bs-theme="dark"] .login-card .role-pill { background: var(--bs-secondary-bg); color: var(--bs-body-color); }
[data-bs-theme="dark"] .card-header { background-color: rgba(255,255,255,.03); }
/* signature pad stays white in dark — the ink is black; a dark pad would hide it */

/* ===================== builder: open-slot drop targets + pay-period strip (2026-07-20) ===================== */
/* While a person (chip or shift pill) is dragged, spotlight the OPEN slots —
   dropping onto one gives that person the slot's shift (Amber 2026-07-20). */
body.rd-dragging-person .shift-pill.open-slot {
  outline: 2px dashed var(--rd-present);
  outline-offset: 1px;
}
.shift-pill.open-slot.drop-target {
  background: var(--rd-present-soft) !important;
  outline: 2px solid var(--rd-present);
  outline-offset: 1px;
}
[data-bs-theme="dark"] .shift-pill.open-slot.drop-target { color: #0c3823; }

/* Click-a-name pay-period hours (month build view, Amber 2026-07-20): the
   selected person's strip sticks below the navbar, and every one of their
   pills (plus their sidebar chip) is ringed. */
.pp-strip { position: sticky; top: 62px; z-index: 100; }
/* The hours are the answer a supervisor is after (Amber 2026-08-18); make them
   the visually dominant part of each pay-period badge. */
.pp-strip .badge .pp-hrs { font-size: 1.15em; font-weight: 700; }
/* amber-sched-strip (R-SCHED-44): each period badge now carries a per-week
   breakdown (Wk 1 … | Wk 2 … · Total …). Let it read as normal weight running
   text with the hours figures standing out, left-aligned and allowed to wrap so
   the two-week breakdown fits a phone without truncation. */
.pp-strip .badge.pp-period {
  font-weight: 400;
  white-space: normal;
  text-align: left;
  line-height: 1.35;
}
.pp-strip .badge.pp-period .pp-sep { opacity: 0.55; margin: 0 0.15rem; }
.build-pill.pp-selected,
.month-pill.pp-selected,
.employee-chip.pp-selected {
  outline: 2px solid #3d6bf0;
  outline-offset: 1px;
}
[data-bs-theme="dark"] .build-pill.pp-selected,
[data-bs-theme="dark"] .month-pill.pp-selected,
[data-bs-theme="dark"] .employee-chip.pp-selected { outline-color: #7c9bff; }
[data-bs-theme="dark"] .schedule-grid .build-pill.pair-conflict:not(.double-booked):not(.avail-conflict),
[data-bs-theme="dark"] .build-month .build-pill.pair-conflict:not(.double-booked):not(.avail-conflict) { background: #3a2a44; }
[data-bs-theme="dark"] .pair-conflict-text { color: #cfa6ec; }
/* #174: darker amber fill for the leaves-early box in dark mode (border/glow keep amber) */
[data-bs-theme="dark"] .schedule-grid .shift-pill.leaves-early:not(.double-booked):not(.avail-conflict):not(.pair-conflict),
[data-bs-theme="dark"] .build-pill.leaves-early:not(.double-booked):not(.avail-conflict):not(.pair-conflict) { background: #3a3320; }
[data-bs-theme="dark"] .pp-strip .badge.bg-light { background: var(--bs-secondary-bg) !important; color: var(--bs-body-color) !important; }