/* ── Brand typeface — used in the header to render the company name
   in the official Edwardian Script logotype instead of a low-res image. */
@font-face {
  font-family: 'Edwardian Script ITC';
  src: url('../assets/fonts/EdwardianScriptITC.ttf') format('truetype');
  /* This TTF ships a Regular weight ONLY (OS/2 usWeightClass 400, no bold
     bit set, subfamily "Regular") and there is no separate bold TTF in
     assets. Do NOT apply font-weight:bold to the logotype — the browser
     would synthesize a faux-bold, which looks bad on a thin script face.
     Declared normal explicitly so the logo always renders the real glyphs. */
  font-weight: normal;
  font-display: swap;
}

/* ── Brand variables (from docs/DESIGN_SPEC.md) ───────────────────────── */
:root {
  --crimson:      #8C0930;
  --crimson-dark: #6B0724;
  --navy:         #1E3A5F;
  --info-blue:    #1D4ED8;
  --off-white:    #F9F7F5;
  --light-gray:   #F3F4F6;
  --mid-gray:     #9CA3AF;
  --dark-gray:    #374151;
  --border:       #E5E7EB;
  --success:      #15803D;
  --error:        #DC2626;
  --warning-bg:   #FEFCE8;
  --warning-bd:   #CA8A04;
}

/* ── Reset / base ─────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: Arial, sans-serif;
  background: var(--off-white);
  color: var(--dark-gray);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
body { min-height: 100vh; padding-bottom: 60px; }

/* ── Header ───────────────────────────────────────────────────────────── */
header {
  background: var(--crimson);
  color: white;
  padding: 16px 24px;
}
.header-inner {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Brand + console-label lockup: [hamburger] Preferred Services | Dispatch Console */
.header-lockup {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}
.header-brand {
  font-family: 'Edwardian Script ITC', 'Apple Chancery', cursive;
  font-size: 42px;  /* +10% from 38px */
  line-height: 1;
  color: white;
  /* Edwardian Script has very thin strokes — a small text-shadow gives
     the strokes enough weight to read against the crimson background
     without darkening the letterforms themselves. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Edwardian Script's final "s" flourish overhangs the text box; with
     overflow:hidden it clips. Right padding gives the glyph room (and nudges
     the divider/console label over). */
  padding-right: 12px;
  flex: 0 1 auto;
  min-width: 0;
}
.header-divider {
  width: 1px;
  height: 30px;
  background: rgba(255, 255, 255, 0.45);
  margin: 0 16px;
  flex: 0 0 auto;
}
.header-title {
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: white;
  opacity: 0.9;
  white-space: nowrap;
  flex: 0 0 auto;
}
/* Account circle, pinned to the header's right (no Call # on this app). */
.header-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 0 0 auto;
  margin-left: 12px;
}
/* Re-anchor the shared PSAuth account control once relocated into the header:
   position:relative so its dropdown menu anchors to the avatar (and drop the
   injected fixed offsets). Higher specificity than `#psauth-userbar{fixed}`. */
.header-right #psauth-userbar {
  position: relative;
  top: auto;
  right: auto;
}
@media (max-width: 600px) {
  .header-brand { font-size: 31px; }  /* +10% from 28px */
  /* Tight phone widths: drop the divider + console label so the wordmark and
     account circle don't collide. */
  .header-divider, .header-title { display: none; }
}

/* ── Footer ──────────────────────────────────────────────────────────── */
footer {
  max-width: 860px;
  margin: 32px auto 0;
  padding: 16px 16px 24px;
  border-top: 1px solid var(--border);
  text-align: center;
  color: #6B7280;
  font-size: 12px;
  line-height: 1.6;
}
.footer-tagline {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #6B7280;
  margin-bottom: 6px;
}
.footer-line { display: block; }

/* ── Main container ───────────────────────────────────────────────────── */
main {
  max-width: 860px;
  margin: 0 auto;
  padding: 24px 16px 0;
}

/* ── Page heading ─────────────────────────────────────────────────────── */
.page-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 4px 0 16px;
}
.page-heading h1 {
  font-size: 24px;
  font-weight: bold;
  color: var(--dark-gray);
  margin: 0;
}
.page-heading .now {
  font-size: 13px;
  color: var(--mid-gray);
}

/* ── States: loading / error ──────────────────────────────────────────── */
.state-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 40px 20px;
  margin: 24px 0;
  text-align: center;
}
.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--light-gray);
  border-top-color: var(--crimson);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 14px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.state-text { font-size: 15px; color: var(--dark-gray); margin: 0; }
.state-error { color: var(--error); font-weight: bold; font-size: 16px; margin: 0 0 6px; }

/* ── Section card ─────────────────────────────────────────────────────── */
.section {
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
}
.section-label {
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--mid-gray);
  margin: 0 0 14px;
}

/* ── Fields ───────────────────────────────────────────────────────────── */
.field { margin-bottom: 14px; }
.field:last-child { margin-bottom: 0; }
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
/* Grid items: shrink past intrinsic content size so the SearchableDropdown's
   wrap + clear button can't force a column to overflow and visually appear
   to "stack" the row. Default grid item min-width is min-content. */
.grid-2 > * { min-width: 0; }
@media (max-width: 600px) {
  .grid-2 { grid-template-columns: 1fr; gap: 0; }
  .grid-2 > * { margin-bottom: 14px; }
}
/* 3-up row for Decedent Age/Race/Gender (mirrors the driver app's
   field-row-3). Collapses to a single column on narrow viewports. */
.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
.grid-3 > * { min-width: 0; }
@media (max-width: 600px) {
  .grid-3 { grid-template-columns: 1fr; gap: 0; }
  .grid-3 > * { margin-bottom: 14px; }
}
/* Transporter Driver+Van# row — uses flexbox instead of inheriting
   .grid-2 so the @media (max-width: 600px) .grid-2 collapse rule can't
   touch it. Single dedicated class, no shared selectors with the rest
   of the form's grid-2 layout. Always side-by-side at every viewport.
   (Yes, this is intentionally redundant with .grid-2's 50/50 layout
   at wide viewports — the point is to be a separate layout primitive
   so nothing accidentally collapses it.) */
.transporter-row {
  display: flex;
  flex-direction: row;
  gap: 16px;
  width: 100%;
}
.transporter-row > .field {
  flex: 1 1 0;
  min-width: 0;
  margin-bottom: 0;
}
label {
  display: block;
  font-size: 12px;
  font-weight: bold;
  color: var(--dark-gray);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
label .req { color: var(--error); margin-left: 2px; }
label .optional { color: var(--mid-gray); font-weight: normal; text-transform: none; letter-spacing: 0; margin-left: 6px; }

input[type="text"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="date"],
select,
textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 15px;
  font-family: Arial, sans-serif;
  color: var(--dark-gray);
  background: white;
  border: 1px solid var(--border);
  border-radius: 6px;
  -webkit-appearance: none;
  appearance: none;
}
/* Native <select> (Decedent Race/Gender): re-add a dropdown arrow since the
   shared rule above sets appearance:none. Mirrors the driver app's select. */
select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%239CA3AF' d='M0 0l6 8 6-8z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}
textarea { min-height: 90px; resize: vertical; }
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
}
input[readonly] {
  background: var(--light-gray);
  color: var(--dark-gray);
}
input.error,
.sd-input.error {
  border-color: var(--error);
}
.error-msg {
  display: none;
  color: var(--error);
  font-size: 12px;
  margin-top: 4px;
}
.error-msg.show { display: block; }

/* ── Button group (segmented control) ─────────────────────────────────── */
.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.button-group button {
  flex: 1;
  min-width: 110px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  font-family: Arial, sans-serif;
  color: var(--dark-gray);
  background: white;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.12s ease;
}
.button-group button:hover { border-color: var(--mid-gray); }
.button-group button.active {
  background: var(--navy);
  color: white;
  border-color: var(--navy);
}
.button-group.urgent button[data-value="Urgent"].active {
  background: var(--crimson);
  border-color: var(--crimson);
}
/* Pickup Type: 4 buttons top row, 3 centered on bottom row,
   all equal width (1/4 of the row minus gaps). */
#pickupTypeGroup {
  justify-content: center;
}
#pickupTypeGroup button {
  flex: 0 0 calc((100% - 24px) / 4);
  min-width: 0;
}

/* ── Searchable Dropdown ──────────────────────────────────────────────── */
.sd-hint {
  font-size: 11px;
  color: var(--mid-gray);
  margin: 0 0 4px 2px;
}
.sd-wrap { position: relative; }
.sd-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 15px;
  font-family: Arial, sans-serif;
  color: var(--dark-gray);
  background: white;
  border: 1px solid var(--border);
  border-radius: 6px;
}
/* Clear ("✕") button — same UX as the driver app's select clears.
   Visually small but a 44px hit area for touch. Hidden until something
   is selected/typed. The matching .sd-input--has-clear adds enough
   right-padding so the input text never sits under the button. */
.sd-clear {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  line-height: 1;
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--mid-gray);
  font-size: 18px;
  z-index: 1;
}
.sd-clear--visible { display: flex; }
.sd-input--has-clear { padding-right: 44px; }
.sd-input:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
}
.sd-panel {
  position: absolute;
  left: 0; right: 0; top: calc(100% + 4px);
  background: white;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  max-height: 280px;
  overflow-y: auto;
  z-index: 10;
}
.sd-option {
  padding: 9px 12px;
  cursor: pointer;
  font-size: 14px;
  color: var(--dark-gray);
  border-bottom: 1px solid var(--light-gray);
}
.sd-option:last-child { border-bottom: none; }
.sd-option:hover, .sd-option.active { background: var(--light-gray); }
.sd-option .secondary {
  display: block;
  font-size: 12px;
  color: var(--mid-gray);
  margin-top: 2px;
}
.sd-empty {
  padding: 12px;
  font-size: 14px;
  color: var(--mid-gray);
  text-align: center;
}

/* ── Maps link ────────────────────────────────────────────────────────── */
.maps-link {
  display: inline-block;
  margin-top: 6px;
  color: var(--info-blue);
  text-decoration: underline;
  font-size: 13px;
}
.maps-link.disabled {
  color: var(--mid-gray);
  pointer-events: none;
  text-decoration: none;
}

/* ── Inline notes / warnings ──────────────────────────────────────────── */
.field-note {
  font-size: 12px;
  color: var(--mid-gray);
  margin-top: 6px;
}
.field-warning {
  font-size: 12px;
  color: var(--warning-bd);
  margin-top: 6px;
  display: none;
}

/* ── Transporter rows ─────────────────────────────────────────────────── */
.transporter {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--light-gray);
}
.transporter:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.transporter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.transporter-num {
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--mid-gray);
}
.add-link, .remove-link {
  display: inline-block;
  background: none;
  border: none;
  color: var(--navy);
  font-size: 13px;
  text-decoration: underline;
  padding: 4px 0;
  margin-top: 8px;
  cursor: pointer;
  font-family: Arial, sans-serif;
}
.remove-link { color: var(--error); }

/* ── Submit ───────────────────────────────────────────────────────────── */
.submit-btn {
  display: block;
  width: 100%;
  height: 52px;
  background: var(--crimson);
  color: white;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 8px;
  -webkit-appearance: none;
  appearance: none;
}
.submit-btn:active { background: var(--crimson-dark); }
.submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.submit-btn .btn-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.5);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
  margin-right: 8px;
}
/* Cancel control — shown only in edit mode below the Save button. Reuses
   the submit-btn shape but a muted secondary fill so it reads as the
   non-primary action. */
.edit-cancel-btn {
  background: var(--mid-gray);
  margin-top: 10px;
}
.edit-cancel-btn:active { background: var(--dark-gray); }

/* Restored-draft notice — sits directly above the form when unsubmitted
   local entries were put back. Informational (blue), not an error, and
   always paired with a way to throw the draft away. */
.draft-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  color: #1E3A5F;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 14px;
}
.draft-notice button {
  font: inherit;
  font-size: 13px;
  border: 0;
  background: #1E3A5F;
  color: #fff;
  border-radius: 6px;
  padding: 7px 14px;
  cursor: pointer;
}
.draft-notice button:hover { background: #16304E; }

/* ── Top error banner ─────────────────────────────────────────────────── */
.error-banner {
  background: #FEF2F2;
  border: 1px solid #FECDD3;
  color: var(--error);
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 14px;
  display: none;
}
.error-banner.show { display: block; }
/* Success/info variant of the banner — reused by All Dispatches to confirm
   an edit saved (green instead of the default red error styling). */
.error-banner.is-notice {
  background: #F0FDF4;
  border-color: #BBF7D0;
  color: var(--success);
}

/* ── Confirmation card ────────────────────────────────────────────────── */
.confirm-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 36px 28px;
  text-align: center;
  margin: 24px 0;
}
.confirm-icon {
  font-size: 40px;
  color: var(--success);
  line-height: 1;
  margin-bottom: 8px;
}
.confirm-headline {
  color: var(--success);
  font-size: 22px;
  font-weight: bold;
  margin: 0 0 16px;
}
.confirm-row { font-size: 14px; color: var(--dark-gray); margin: 6px 0; }
.confirm-label {
  color: var(--mid-gray);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-right: 6px;
}
.confirm-card button {
  margin-top: 20px;
  padding: 10px 22px;
  background: var(--navy);
  color: white;
  font-size: 14px;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
/* Secondary action on the confirmation card — "View All Dispatches". Crimson
   (vs. the navy "Submit Another Dispatch" primary) and stacked beneath it.
   Rendered as an <a> for full-page nav into ?view=all, so it needs button-
   like display: block + fit-content keeps it button-sized and centered on
   its own line. */
.confirm-card .confirm-link-btn {
  display: block;
  width: fit-content;
  margin: 12px auto 0;
  padding: 10px 22px;
  background: var(--crimson);
  color: white;
  font-size: 14px;
  font-weight: bold;
  border-radius: 6px;
  text-decoration: none;
}
.confirm-card .confirm-link-btn:active { background: var(--crimson-dark); }

/* ════════════════════════════════════════════════════════════════════
   All Dispatches + hamburger nav + Help.
   Ported from driver-app/index.html — the two apps don't share CSS, so
   the needed classes are copied here (the per-row status-management
   control has no driver-app analog and is dispatcher-only).
   ════════════════════════════════════════════════════════════════════ */

/* ── Hamburger nav ────────────────────────────────────────────────────── */
/* header-inner is the positioning context so the menu anchors under the
   hamburger icon (its left edge) and extends to the right. */
.header-inner { position: relative; }
.nav-toggle {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  margin: -4px 12px -4px -8px;
  padding: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  -webkit-appearance: none;
  appearance: none;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: white;
  border-radius: 2px;
}
.nav-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 230px;
  background: white;
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
  z-index: 9997;
  display: none;
  overflow: hidden;
}
.nav-menu.is-open { display: block; }
.nav-menu__item {
  display: block;
  padding: 15px 20px;
  font-size: 15px;
  font-weight: bold;
  color: var(--dark-gray);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.nav-menu__item:last-child { border-bottom: none; }
.nav-menu__item:active { background: var(--light-gray); }

/* ── The Admin folder ──────────────────────────────────────────────────
   One collapsible row over the gated management pages. The toggle is a
   <button> styled as a menu item (full width, same padding, a chevron that
   turns when open); the pages sit indented beneath it. Tap toggles `is-open`
   (initNav). Deliberately NO hover-open: it was built and taken back out the
   same day — a folder that opens under a passing pointer is a menu that
   moves while you aim at the row below it. */
.nav-menu__group { border-bottom: 1px solid var(--border); }
.nav-menu__group-toggle {
  width: 100%; text-align: left; background: none; border: none; border-bottom: none;
  cursor: pointer; font-family: inherit; -webkit-appearance: none; appearance: none;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-menu__group-toggle::after {
  content: '\25B8';                                    /* ▸ */
  font-size: 13px; color: var(--mid-gray); transition: transform .15s;
}
.nav-menu__group.is-open .nav-menu__group-toggle::after { transform: rotate(90deg); }
.nav-menu__sub { display: none; background: var(--light-gray, #F3F4F6); }
.nav-menu__group.is-open .nav-menu__sub { display: block; }
.nav-menu__sub .nav-menu__item { padding-left: 36px; font-weight: 600; }
.nav-menu__sub .nav-menu__item:last-child { border-bottom: none; }
.nav-menu__sub .nav-menu__item.is-current { color: var(--crimson); }

/* ── All Dispatches list ──────────────────────────────────────────────── */
.ad-filter { margin-bottom: 16px; }

.dispatch-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 12px;
  background: white;
}
.dispatch-card:last-child { margin-bottom: 0; }
.dispatch-card__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 2px 10px;
  margin-bottom: 4px;
}
.dispatch-card__call {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: bold;
  color: var(--crimson);
  white-space: nowrap;
}
.dispatch-card__time {
  font-size: 12px;
  color: var(--mid-gray);
  text-align: right;
}
/* Time Dispatched, stacked under the date. display:block is all the layout
   work needed — the head is already flex-wrap with baseline alignment. */
.dispatch-card__clock {
  display: block;
  font-size: 11px;
  color: var(--mid-gray);
}
.dispatch-card__name {
  font-size: 16px;
  font-weight: bold;
  color: var(--dark-gray);
  margin: 8px 0 6px;
}
.dispatch-card__meta { font-size: 13px; color: var(--dark-gray); margin: 3px 0; }
.dispatch-card__meta .dc-label {
  display: inline-block;
  min-width: 90px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--mid-gray);
}
.pickup-type-badge {
  display: inline-block;
  background: var(--navy);
  color: white;
  font-size: 11px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}
.md-empty {
  font-size: 14px;
  color: var(--mid-gray);
  text-align: center;
  padding: 12px 0;
  margin: 0;
}

/* Per-row status management control (no driver-app analog) */
.dispatch-card__manage {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--light-gray);
}
.dispatch-card__manage .ad-status-select { flex: 1 1 auto; min-width: 0; }
.ad-update-btn, .ad-action-btn {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 8px 18px;
  background: var(--navy);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.ad-update-btn:active, .ad-action-btn:active { background: var(--navy); filter: brightness(0.85); }
.ad-update-btn:disabled, .ad-action-btn:disabled { opacity: 0.6; cursor: not-allowed; }
/* Edit (<a class="ad-action-btn ad-edit-btn">) gets its button look and
   centering from the shared a.ad-action-btn rule in the payroll section —
   don't re-add a .ad-edit-btn display rule here: the a.ad-action-btn
   selector out-specifies it and the override silently loses. */

/* Per-row Mileage panel (completed calls only). Inline inside the card —
   this app has no modal, and a split correction is read against the call
   it belongs to. */
.ad-mileage-panel {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--light-gray);
}
.ad-mileage-panel h4 {
  margin: 0 0 4px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mid-gray);
}
.ad-mileage-panel .ad-mi-note {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--mid-gray);
}
.ad-mi-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.ad-mi-row label { flex: 1 1 auto; min-width: 0; font-size: 14px; }
.ad-mi-row .ad-mi-van { color: var(--mid-gray); font-size: 12px; }
.ad-mi-row input[type="number"] { flex: 0 0 90px; min-height: 42px; }
.ad-mi-row select { flex: 0 0 84px; min-height: 42px; }
/* Column heads over the two per-driver inputs. The Yes/No select is
   otherwise unlabelled on screen — its aria-label serves screen readers,
   but a sighted dispatcher has nothing telling them what the answer is
   to. Widths mirror the input/select flex-basis above so the heads sit
   over their own columns; keep the three in sync. */
.ad-mi-cols {
  display: flex; gap: 8px; align-items: baseline;
  margin: 14px 0 2px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--mid-gray);
}
.ad-mi-cols .ad-mi-cols-gap { flex: 1 1 auto; min-width: 0; }
.ad-mi-cols .ad-mi-col-miles { flex: 0 0 90px; }
.ad-mi-cols .ad-mi-col-del   { flex: 0 0 84px; }
/* Parks the call-mileage input in the Miles column instead of letting it
   stretch to the panel edge, so the total sits above the shares. */
.ad-mi-row .ad-mi-gap { flex: 0 0 84px; }
.ad-mi-actions { display: flex; gap: 8px; margin-top: 12px; }
.ad-mi-error {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--error);
}

/* ── Help view ────────────────────────────────────────────────────────── */
.help-view h2 { font-size: 16px; color: var(--dark-gray); margin: 0 0 8px; }
.help-view p { font-size: 14px; line-height: 1.6; color: var(--dark-gray); margin: 0 0 12px; }
.help-view a { color: var(--navy); }

/* ── Metrics view (Module 6) ─────────────────────────────────────────── */
/* Chart mark colors are chart-tuned steps of the brand hues (the brand
   crimson/navy are too dark for series-identity work — validated with the
   dataviz palette checks): crimson mark #B01840, second series --info-blue,
   de-emphasis gray for the manual-log baseline context. */
.m-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.m-tile {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--light-gray);
  padding: 12px 14px;
}
.m-tile-value {
  font-size: 26px;
  font-weight: bold;
  color: var(--dark-gray);
  line-height: 1.15;
}
.m-tile-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--mid-gray);
  margin-top: 4px;
}
.m-tile-sub { font-size: 11px; color: var(--mid-gray); margin-top: 2px; }
.m-chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.m-chart-stack { display: grid; grid-template-columns: 1fr; gap: 16px; }
.m-chart-block { min-width: 0; }
.m-chart-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--dark-gray);
  margin: 0 0 6px;
}
.m-canvas-wrap { position: relative; height: 200px; }
.m-canvas-tall { height: 260px; }
.m-status-row, .m-shift-row {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px;
}
.m-pill {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); border-radius: 999px;
  background: white; padding: 5px 12px;
  font-size: 12px; font-weight: 600; color: var(--dark-gray);
}
.m-pill-dot {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
}
.m-assumptions {
  border: 1px solid var(--warning-bd);
  background: var(--warning-bg);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.m-assumptions-badge {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px;
  color: var(--warning-bd);
  margin-bottom: 8px;
}
.m-assumptions-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.m-assumptions-fields .field { margin: 0; }
.m-baseline-note {
  font-size: 11px; color: var(--mid-gray); margin: 12px 0 0;
}

/* ── Payroll view (Module 3) ─────────────────────────────────────────── */
.p-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 12px 0 16px;
}
.p-fields .field { margin: 0; }
.p-driver-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
  margin: 12px 0 16px;
}
.p-driver {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 6px;
  background: white; font-size: 14px;
  cursor: pointer;
}
/* One sizing rule for every checkbox in this view — the driver checklist,
   the recipient picker, and the pre-send ack. It was written per-family
   twice before; a third copy is how they drift apart. */
.p-driver input,
.p-recipient input,
.p-gate-ack input { width: 16px; height: 16px; flex: none; }
.p-driver-calls { margin-left: auto; color: var(--mid-gray); font-size: 12px; }
.p-driver--unmatched { border-color: var(--warning-bd); background: var(--warning-bg); }
.p-driver--all { margin: 12px 0 0; font-weight: 600; }
.p-warnings {
  border: 1px solid var(--warning-bd); background: var(--warning-bg);
  border-radius: 8px; padding: 10px 14px; margin: 12px 0; font-size: 13px;
}
.p-warnings ul { margin: 6px 0 0; padding-left: 18px; }
.p-warnings li { margin: 2px 0; }
/* Grouped body (cause → driver → calls). Cause and driver rows are the
   scannable part, so the leaf calls sit quieter and the whole block gets
   a scroll cap — one pay period can produce 200+ leaves and an
   unbounded list buries the Send button all over again. */
#pWarningsList { max-height: 40vh; overflow-y: auto; }
.p-warn-group { list-style: none; margin: 8px 0 0; }
.p-warn-group > ul { list-style: none; padding-left: 12px; }
.p-warn-group > ul > li { margin: 4px 0; font-weight: 600; }
.p-warn-group > ul.p-warn-plain > li {
  font-weight: normal; color: var(--mid-gray);
}
.p-warn-group > ul > li > ul {
  padding-left: 12px; font-weight: normal; color: var(--mid-gray);
}
/* The card renders COLLAPSED — a routine run emits a dozen routine
   warnings, and a wall of them pushes the driver checklist and the Send
   button off the screen on a flow whose whole point is a short
   preview → confirm loop. It stays amber even when folded: the 2026-08-20
   run went out short five drivers because warnings went unread, so the
   collapsed state still has to look like something to check. */
.p-warnings-head { display: flex; align-items: center; gap: 8px; }
.p-warnings-toggle {
  flex: 1; text-align: left;
  background: none; border: none; padding: 0;
  font-size: 13px; font-weight: 600; color: var(--dark-gray);
  cursor: pointer;
}
/* Same affordance as the searchable-dropdown clear, at 32px rather than
   its 44px: this card is padded 10px/14px and a 44px hit box would nearly
   double its collapsed height. Desktop/tablet admin page — deliberate. */
.p-warnings-clear {
  flex: none;
  width: 32px; height: 32px; margin: -4px -6px -4px 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; padding: 0;
  font-size: 18px; line-height: 1; color: var(--mid-gray);
  cursor: pointer;
}
/* Money-affecting warnings. These sit OUTSIDE the collapsible list and
   have no clear button: the flat list is collapsed and dismissible for a
   reason (246 lines of "no mileage" is noise), but "this driver will be
   paid the wrong amount" is not something to tidy away before sending. */
.p-warn-critical {
  margin: 0 0 8px; padding: 10px 12px;
  border-left: 3px solid var(--red, #c0392b);
  background: rgba(192, 57, 43, 0.08);
  font-size: 13px; color: var(--dark-gray);
}
.p-warn-critical strong { display: block; margin-bottom: 4px; }
.p-warn-critical ul { margin: 0; padding-left: 18px; }
.p-warn-critical li + li { margin-top: 4px; }
.p-summary { font-size: 14px; color: var(--mid-gray); margin: 0 0 4px; }
.p-result-links { display: flex; gap: 12px; flex-wrap: wrap; margin: 10px 0 0; }
/* Every <a> styled as an action button (payroll links, All Dispatches
   Edit). inline-flex + centering — inline-block blockifies inside the
   flex-row containers these sit in and pins the label to the top edge
   of the 42px min-height box. */
a.ad-action-btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.p-note { font-size: 11px; color: var(--mid-gray); margin: 10px 0 0; }
.p-run {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; margin: 8px 0;
  border: 1px solid var(--border); border-radius: 6px;
  background: white; font-size: 14px;
}
.p-run-name { font-weight: 600; }
.p-run-meta { color: var(--mid-gray); font-size: 12px; }
.p-run-badge {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--mid-gray);
}
.p-run-badge--sent { border-color: var(--success); color: var(--success); }
.p-run-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.p-recipient {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 10px; margin: 4px 0;
  border: 1px solid var(--border); border-radius: 6px;
  background: white; font-size: 13px;
}
.p-recipient-email { color: var(--mid-gray); }
.p-recipient-rows { margin-left: auto; color: var(--mid-gray); font-size: 12px; }
.p-recipient--skipped { background: var(--warning-bg); border-color: var(--warning-bd); }
.p-recipient--pick { cursor: pointer; }
/* Check-register preview (Module 3c). Amounts are right-aligned and
   tabular so a column of figures scans as a column of figures. */
.p-amount {
  margin-left: auto; font-variant-numeric: tabular-nums;
  font-weight: 600; color: var(--dark-gray);
}
.p-amount--blank { font-weight: 400; color: var(--mid-gray); }
/* Breathing room between the recipient list and the register — they are
   two different questions ("who gets mail" vs "what gets paid"). */
.p-register { margin-top: 18px; }
.p-register-total {
  display: flex; gap: 8px; padding: 8px 10px; margin: 6px 0 0;
  border-top: 2px solid var(--border); font-size: 13px; font-weight: 600;
}
.p-register-total .p-amount { font-variant-numeric: tabular-nums; }
/* The pre-send gate. Deliberately heavier than .p-warnings (error border,
   not the amber warning one): everything it lists is a person who worked
   this period and will NOT be paid. It carries the only checkbox in the
   payroll view that disables a button. */
.p-gate {
  border: 1px solid var(--error); border-radius: 8px;
  padding: 10px 14px; margin: 12px 0; font-size: 13px;
}
.p-gate-title { color: var(--error); font-weight: 600; margin: 0 0 6px; }
.p-gate-ack {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 0 0; font-weight: 600; cursor: pointer;
}
.p-recipient--failed { border-color: var(--error); }
.p-recipient--failed .p-recipient-email { color: var(--error); }

/* ── Drivers view (roster admin) ──────────────────────────────────────── */
/* ONE list does everything: each row carries its own Edit/Remove, and
   editing or adding swaps that row's content for inputs in place. Rows are
   .p-run (the payroll-runs row) so the two lists stay visually identical —
   these rules only add the row-level action cluster and the inline form. */
.dv-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; }
.dv-head .p-summary { margin: 0; }
.dv-head .ad-action-btn { margin-left: auto; }
.dv-row-actions { margin-left: auto; display: flex; gap: 8px; flex: none; }
/* Inputs are width:100% globally, so a row-embedded field needs an explicit
   flex basis or one field eats the row. align-items:flex-end keeps the
   inputs' baselines level with the buttons despite the labels above them. */
.dv-row--form { align-items: flex-end; gap: 12px; }
.dv-row--form .field { margin: 0; flex: 1 1 180px; min-width: 0; }
.dv-row--active { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1); }
/* flex-basis:100% drops the note onto its own line inside the wrapping row. */
.dv-note { flex-basis: 100%; font-size: 11px; color: var(--mid-gray); margin: 4px 0 0; }
/* Secondary-destructive: a solid red button on every row would shout. */
/* ── Roster health panel (Task 2) ──────────────────────────────────────
   Tom reads the top of this list and stops, so severity drives the visual
   weight: a blocker (someone does not get paid) is bordered in the error
   colour, a warning in amber, and advisories are muted AND collapsed
   behind a toggle. Rendering forty "you could stamp an ID here" notes at
   the same weight as one missing driver is how a health panel teaches the
   person reading it to skip the whole thing. */
.dv-health { margin: 0 0 18px; }
.dv-health-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 0 0 8px;
}
.dv-health-counts { font-size: 13px; color: var(--mid-gray); }
.dv-health-count { font-weight: 600; }
.dv-health-count--blocker { color: var(--error); }
.dv-health-count--warning { color: var(--warning-bd); }
.dv-health-ok {
  border: 1px solid var(--success); border-radius: 8px;
  padding: 10px 14px; font-size: 13px; color: var(--success);
  background: white;
}
.dv-issue {
  display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; margin: 6px 0;
  border: 1px solid var(--border); border-left-width: 4px;
  border-radius: 6px; background: white; font-size: 13px;
}
.dv-issue--blocker { border-left-color: var(--error); }
.dv-issue--warning {
  border-left-color: var(--warning-bd); background: var(--warning-bg);
}
.dv-issue--advisory { border-left-color: var(--border); }
.dv-issue-body { flex: 1 1 260px; min-width: 0; }
.dv-issue-subject { font-weight: 600; display: block; }
.dv-issue-detail { color: var(--dark-gray); margin: 2px 0 0; }
.dv-issue .ad-action-btn { flex: none; }
.dv-health-toggle {
  background: none; border: none; padding: 4px 0; margin: 4px 0 0;
  font-size: 12px; color: var(--mid-gray); text-decoration: underline;
  cursor: pointer;
}
.dv-health-unavailable {
  font-size: 12px; color: var(--mid-gray); margin: 8px 0 0;
  padding-left: 18px;
}
.dv-btn-danger { background: white; color: var(--error); border: 1px solid var(--error); }
.dv-btn-danger:active { background: var(--error); color: white; filter: none; }

/* ── Month Archive view ──────────────────────────────────────────────── */
.av-bar {
  height: 8px; border-radius: 999px; background: var(--light-gray);
  overflow: hidden; margin: 10px 0 6px;
}
.av-bar-fill {
  height: 100%; width: 0%; background: var(--navy); border-radius: 999px;
  transition: width 0.2s ease;
}

/* ── Hidden helper ────────────────────────────────────────────────────── */
[hidden] { display: none !important; }

/* Hide native Google Maps autocomplete branding overlap */
/* PlaceAutocompleteElement is a custom element — match the rest of the
   form's input styling so it doesn't look out of place. The element
   exposes a part for the inner input which we can target via ::part(). */
gmp-place-autocomplete {
  display: block;
  width: 100%;
}
gmp-place-autocomplete::part(input) {
  width: 100%;
  padding: 10px 12px;
  font-size: 15px;
  font-family: Arial, sans-serif;
  color: var(--dark-gray);
  background: white;
  border: 1px solid var(--border);
  border-radius: 6px;
}
gmp-place-autocomplete::part(input):focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
}

/* ── Time Off Approvals (?view=timeoff-admin) ─────────────────────────────
   Rows are .p-run, the same row the Payroll Runs and Drivers lists use, so
   the three admin queues stay visually identical. These rules only add what
   a time-off request needs that a run row doesn't: a stacked body (a request
   carries a date range, a reason and five meta facts, not one name), the
   status-coloured badge modifiers, and the ring for the row an email CTA
   pointed at.

   The decision form row takes .toa-decide, NOT .dv-row--form. It used to reuse
   that class — correct while it held one short input beside two buttons — but
   .dv-row--form is a horizontal flex row whose `.field { flex: 1 1 180px }`
   divides the row between every field in it. Adding the signature pad made
   that two ~200px columns: a note showing forty characters and a pad too
   narrow to sign in. A form with a canvas in it is a column, not a row. */
.toa-row { align-items: flex-start; }

/* ── The decision form ──
   A column: lead sentence, note, signature, actions. Each child spans the
   row, overriding .p-run's centred horizontal flex and .dv-row--form's
   flex-basis arithmetic (which this row no longer takes at all). */
.toa-decide {
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 14px;
  /* One measure for both inputs. They are a short reason and a signature, not
     a document — stretched across a 1300px management view they read as an
     invitation to write an essay into a box that prints one line. */
  --toa-measure: 560px;
}
.toa-decide .field { margin: 0; }
/* The lead reads before the inputs, so it is body text here rather than the
   11px .dv-note it was when it sat underneath them. */
.toa-decide-lead {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--mid-gray);
  max-width: var(--toa-measure);   /* full width is a 200-character line */
}
.toa-decide textarea {
  min-height: 72px;      /* ~3 lines; the global textarea min-height is 90 */
  resize: vertical;
  max-width: var(--toa-measure);
}
.toa-decide .field-note { max-width: var(--toa-measure); }
/* The counter only raises its voice near the ceiling. maxlength stops
   the keys dead at zero, so the warning has to arrive before that —
   mid-gray all the way to the last character would be no warning. */
.toa-decide .field-note.is-tight { color: var(--error); font-weight: 600; }
/* The pad is the one thing that wants a floor AND a ceiling: too narrow and a
   signature won't fit, full-bleed on a desktop and you are drawing a 1200px
   autograph with a mouse. Signing happens on an iPad or a phone, where this
   simply fills the width. */
.toa-decide .signature-wrap { max-width: var(--toa-measure); }
.toa-decide .signature-wrap canvas { height: 150px; }
.toa-decide .signature-actions { max-width: var(--toa-measure); }
/* Left-aligned, unlike the .dv-row-actions clusters this view's other rows
   use. Those sit right because their row's content fills the width; here the
   whole form is one 560px column and buttons stranded at the far right of a
   1300px card belong to nothing. */
.toa-decide-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  max-width: var(--toa-measure);
}
@media (max-width: 560px) {
  /* Full-width stacked buttons: this queue is worked from the phone the
     notification email was read on. column-reverse, so the commit lands at the
     BOTTOM — nearest the thumb, and the source order stays commit-first to
     match the other two admin queues for anyone on a keyboard or a desktop. */
  .toa-decide-actions { flex-direction: column-reverse; }
  .toa-decide-actions .ad-action-btn { width: 100%; }
}
.toa-main {
  display: flex; flex-direction: column; gap: 4px;
  flex: 1 1 260px; min-width: 0;
}
.toa-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* The dates are what the decision is actually about, so they carry the
   weight — the name above them only says whose. */
.toa-range { font-size: 15px; font-weight: 600; color: var(--dark-gray); }
.toa-days { font-weight: 400; color: var(--mid-gray); margin-left: 8px; }
.toa-meta { line-height: 1.5; }
.toa-decision { font-size: 12px; font-weight: 600; color: var(--mid-gray); }
/* Status badges extend .p-run-badge (which ships only the --sent variant).
   Pending is crimson because it is the one that wants something from you. */
.p-run-badge--submitted { border-color: var(--crimson); color: var(--crimson); }
.p-run-badge--approved  { border-color: var(--success); color: var(--success); }
.p-run-badge--denied    { border-color: var(--error);   color: var(--error); }
.p-run-badge--withdrawn { border-color: var(--border);  color: var(--mid-gray); }
/* The reason/note the office wrote. pre-wrap is on the TEXT span, never the
   box: put it on the container and the surrounding markup's own indentation
   prints with it. */
.toa-note {
  display: block; margin-top: 6px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--light-gray); font-size: 13px; line-height: 1.5;
}
.toa-note--deny { border-color: rgba(220, 38, 38, 0.35); background: #FEF2F2; }
.toa-note-label {
  display: block; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--mid-gray); margin-bottom: 2px;
}
.toa-note-text { white-space: pre-wrap; }
/* Tom's own request: the explanation stands exactly where the two buttons
   would have been, so the absence reads as an answer rather than a bug. */
.toa-self {
  margin-left: auto; max-width: 220px;
  font-size: 12px; font-style: italic; color: var(--mid-gray);
}
/* The row a notification email aimed at (?id=N). Navy ring, matching
   .dv-row--active — this app already means "the row you are working on" by
   it. It survives re-renders and clears when a filter chip is pressed. */
.toa-row--target {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
}

/* ── Vehicle Checklists (?view=checklists) ───────────────────────────────── */
/* The row is a .p-run like every other admin queue; these only add the stacked
   left column, because a checklist row carries a name, badges and two meta
   lines where a payroll run carries one. */
.cl-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* The three blocks on "Needs attention" are siblings with their own headings;
   the gap above each one is what stops a heading reading as a caption for the
   rows above it. The window is the plain-case tail of the gaps heading. */
.cl-block-label { margin-top: 28px; padding-top: 12px; border-top: 1px solid var(--border, #E5E7EB); }
#clFlaggedLabel { margin-top: 0; padding-top: 0; border-top: 0; }   /* not :first-of-type — #clExSummary is a <p> too */
.cl-block-window { text-transform: none; letter-spacing: 0; font-weight: normal; margin-left: 6px; }
/* Name and badges on one wrapping line — see clRowHtml. */
.cl-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.cl-damage { color: var(--warning-bd); }
/* Badge modifiers extend the .p-run-badge--<status> set the Time Off queue
   introduced. Blockers borrow the error colour, warnings the amber pair. */
.p-run-badge--open_too_long,
.p-run-badge--negative_duration,
.p-run-badge--no_timestamp,
.p-run-badge--missing {
  color: var(--error); border-color: var(--error);
}
.p-run-badge--closed_late,
.p-run-badge--damage,
.p-run-badge--no_pdf {
  color: var(--warning-bd); border-color: var(--warning-bd);
}
/* The office's own marks are advisories: the quiet, withdrawn-style tag. A
   coloured pill here would put Tom's own decision back on the queue visually
   after the server took it off. */
.p-run-badge--excused,
.p-run-badge--closed_by_office,
.p-run-badge--dismissed {
  color: var(--mid-gray); border-color: var(--border); border-style: dashed;
}
.cl-mark { color: var(--mid-gray); font-style: italic; }

/* ── The inline mark form (excuse / close out) ──
   A column under the row, the Time Off queue's decision-row shape minus the
   signature: lead sentence, an optional note, two buttons. */
.cl-mark-form {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 14px;
  --cl-measure: 560px;
}
/* The gaps panel's "N dismissed by the office" disclosure — folded by default,
   the quiet dashed style the excused rows use. */
.cl-dismissed { margin-top: 10px; }
.cl-dismissed > summary { cursor: pointer; color: var(--mid-gray, #6B7280); font-size: 14px; padding: 6px 0; }
.cl-dismissed-row { border-style: dashed; opacity: 0.85; }
.cl-mark-form .field { margin: 0; }
.cl-mark-lead {
  margin: 0; font-size: 13px; line-height: 1.5; color: var(--mid-gray);
  max-width: var(--cl-measure);
}
.cl-mark-form textarea { min-height: 56px; resize: vertical; max-width: var(--cl-measure); }
.cl-mark-actions { display: flex; gap: 8px; flex-wrap: wrap; max-width: var(--cl-measure); }
@media (max-width: 560px) {
  /* Worked from a phone: full-width, commit nearest the thumb. */
  .cl-mark-actions { flex-direction: column-reverse; }
  .cl-mark-actions .ad-action-btn { width: 100%; }
}