/* XRoster overrides — loaded LAST so it wins over the vendor theme.
   Keep this file small and purposeful; it is ours, style.css is not.
   ------------------------------------------------------------------ */

/* ── Badge / pill legibility ────────────────────────────────────────
   The theme pairs pale badge backgrounds with same-hue pale text, e.g.
   `.bg-warning-subtle .text-warning` measured 1.24:1 and `.bg-light-info`
   1.98:1 — effectively unreadable (WCAG AA wants 4.5:1 for body text).

   Fix by luminance, not by one blanket colour:
     • PALE background  → deep same-hue text (white would be worse — white
       on pale amber is ~1.6:1).
     • SOLID dark background → white text.
     • Amber and cyan are light even at full saturation, so those keep
       dark text when solid.
   Uses Bootstrap's own *-text-emphasis tones, which are built for this. */

.badge.bg-warning-subtle,
.badge.bg-light-warning {
  color: #664d03 !important;
  border-color: #ffe69c !important;
}

.badge.bg-info-subtle,
.badge.bg-light-info {
  color: #055160 !important;
  border-color: #b6effb !important;
}

.badge.bg-primary-subtle,
.badge.bg-light-primary {
  color: #084298 !important;
  border-color: #b6d4fe !important;
}

.badge.bg-success-subtle,
.badge.bg-light-success {
  color: #0a3622 !important;
  border-color: #a3cfbb !important;
}

.badge.bg-danger-subtle,
.badge.bg-light-danger {
  color: #58151c !important;
  border-color: #f1aeb5 !important;
}

.badge.bg-secondary-subtle,
.badge.bg-light-secondary {
  color: #343a40 !important;
  border-color: #dee2e6 !important;
}

/* Solid, dark-enough backgrounds → white text. */
.badge.bg-primary,
.badge.bg-success,
.badge.bg-danger,
.badge.bg-dark,
.badge.bg-secondary {
  color: #fff !important;
}

/* Solid but LIGHT backgrounds — white would fail here, so go dark. */
.badge.bg-warning,
.badge.bg-info,
.badge.bg-light {
  color: #212529 !important;
}

/* ── Scrollable modals that wrap their body in a <form> ─────────────
   Bootstrap's `.modal-dialog-scrollable` assumes the flex chain
   .modal-content → .modal-body. Nearly every form modal here inserts a
   <form> in between, which breaks the chain: .modal-body can no longer
   resolve a bounded height, so long content overflows and .modal-content's
   `overflow:hidden` CLIPS it — the dialog simply won't scroll.

   Re-establish the chain for any element sitting between the two. */
.modal-dialog-scrollable .modal-content > form,
.modal-dialog-scrollable .modal-content > div:not(.modal-header):not(.modal-footer):not(.modal-body) {
  display: flex;
  flex-direction: column;
  min-height: 0;      /* lets the flex child actually shrink */
  overflow: hidden;
  flex: 1 1 auto;
}

.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
  min-height: 0;
}

/* Tall modals that were never marked scrollable still shouldn't run off
   the screen — cap the body and let it scroll. */
.modal-dialog:not(.modal-dialog-scrollable) .modal-body {
  max-height: calc(100vh - 12rem);
  overflow-y: auto;
}

/* Same treatment for non-badge chips/pills used around the app. */
.chip.bg-warning-subtle, .chip.bg-light-warning { color: #664d03 !important; }
.chip.bg-info-subtle,    .chip.bg-light-info    { color: #055160 !important; }
.chip.bg-success-subtle, .chip.bg-light-success { color: #0a3622 !important; }
.chip.bg-danger-subtle,  .chip.bg-light-danger  { color: #58151c !important; }

/* ── Phone input: country dial-code + local number ────────────────────
   widgets.js rebuilds `<input data-widget="phone">` into an input-group
   holding a country <select>, a number input and a hidden field that
   carries the merged value back to Django.

   These rules used to live inside templates/onboarding/apply.html, which
   meant the widget was styled on exactly one page. Everywhere else that
   used data-widget="phone" — account settings, customer detail — Tom
   Select's generated `.ts-wrapper` inherited no width at all and stretched
   across the row, squashing the number field next to it.

   Sizing has to target `.ts-wrapper` rather than the select. Tom Select
   hides the original element and renders its own markup as a sibling, so
   the `max-width` and `flex-grow-0` set on the select in JS never apply
   to what the user actually sees. */
.xr-phone-input { flex-wrap: nowrap; }

.xr-phone-input .ts-wrapper,
.xr-phone-input .xr-dial-select {
  flex: 0 0 9.5rem;
  max-width: 9.5rem;
  min-width: 9.5rem;
}

/* Keep the group looking like one control: square the inner edges. */
.xr-phone-input .ts-wrapper .ts-control,
.xr-phone-input .xr-dial-select {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.xr-phone-input > input[type="tel"] {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -1px;   /* collapse the doubled border */
}

/* The closed control shows "flag +code" only — the country name is in the
   option text so the dropdown is searchable by name, and is trimmed by the
   item renderer in widgets.js. Stop it wrapping onto a second line while
   the list is being built. */
.xr-phone-input .ts-control {
  white-space: nowrap;
  overflow: hidden;
}

/* Narrow screens: let the dial code shrink rather than force a scrollbar. */
@media (max-width: 575.98px) {
  .xr-phone-input .ts-wrapper,
  .xr-phone-input .xr-dial-select {
    flex-basis: 7.5rem;
    max-width: 7.5rem;
    min-width: 7.5rem;
  }
}

/* Invalid state has to reach the generated control, not the hidden select. */
.is-invalid + .ts-wrapper .ts-control { border-color: #dc3545 !important; }

/* A select enhanced inside an auto-width column (filter bars: "All
   positions", "All records") is sized to its own text, and Bootstrap
   draws the caret in the wrapper's right padding — the text ran under
   it. Reserve the caret's room on the inner control and give the
   closed control a floor so short labels do not become a 90px box. */
.ts-wrapper.form-select:not(.multi) .ts-control { padding-right: 1.75rem !important; }
.ts-wrapper.form-select.form-select-sm:not(.multi) .ts-control { padding-right: 1.6rem !important; }
.col-auto > .ts-wrapper.form-select { min-width: 9rem; }

/* The loading skeletons used to be defined here. They are inline in
   base.html now: this file is served unhashed, and a browser holding a
   previous copy of it drew the placeholder shapes on top of a page that
   had finished loading. Anything whose DEFAULT state matters belongs in
   the document, not in a stylesheet that may arrive late. */

/* ── Accessibility: skip link + focus visibility ─────────────────────
 * The skip link is the first focusable element on every authenticated
 * page. It is off-screen until it receives keyboard focus, then sits
 * over the header so a keyboard or screen-reader user can jump past
 * the sidebar and header straight to the page content. */
.xr-skip-link {
  position: absolute; left: -999px; top: 0; z-index: 2000;
  background: #1e3a8a; color: #fff; padding: .6rem 1rem;
  border-radius: 0 0 .5rem 0; font-weight: 600; text-decoration: none;
}
.xr-skip-link:focus { left: 0; outline: 3px solid #fbbf24; outline-offset: 0; }
main.pc-content { display: block; }
main.pc-content:focus { outline: none; }
/* Keyboard focus must be visible on every control, including the ones
 * whose theme styling removed it. Mouse clicks keep the quiet look. */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
.form-control:focus-visible, .form-select:focus-visible, .btn:focus-visible {
  outline: 2px solid #2563eb !important; outline-offset: 2px;
}
/* Submit buttons a form has already fired — see page-loading.js. */
form[data-xr-submitted] [type="submit"] { pointer-events: none; opacity: .65; }

/* ── The crewing right-click menu (run timeline + crew page) ───────── */
.crew-day-menu { position: fixed; z-index: 2000; display: none; min-width: 240px;
  background: var(--bs-body-bg, #fff); border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: .375rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); padding: .25rem 0; }
.crew-day-menu .cdm-head { font-size: .72rem; color: var(--bs-secondary-color, #6c757d);
  padding: .3rem .8rem .35rem; border-bottom: 1px solid var(--bs-border-color, #dee2e6); }
.crew-day-menu .cdm-sep { border-top: 1px solid var(--bs-border-color, #dee2e6); margin: .2rem 0; }
.crew-day-menu > button, .crew-day-menu form button { font-size: .82rem; }
.crew-day-menu > button { display: block; width: 100%; text-align: left; border: 0;
  background: none; padding: .4rem .8rem; }
.crew-day-menu > button:hover { background: var(--bs-tertiary-bg, #f8f9fa); }
.crew-day-menu > button.danger { color: var(--bs-danger, #dc3545); }
.crew-day-menu .cdm-form { padding: .5rem .8rem .6rem; min-width: 300px; }
.crew-day-menu .cdm-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.crew-day-menu .cdm-row label { width: 5.5rem; font-size: .75rem; color: var(--bs-secondary-color, #6c757d); margin: 0; }
.crew-day-menu .cdm-row input { flex: 1; font-size: .8rem; padding: .2rem .4rem;
  border: 1px solid var(--bs-border-color, #dee2e6); border-radius: .25rem; }
.crew-day-menu .cdm-actions { display: flex; justify-content: flex-end; gap: .4rem; margin-top: .3rem; }
.crew-day-menu .cdm-actions button { border: 1px solid var(--bs-border-color, #dee2e6); background: none;
  border-radius: .25rem; padding: .25rem .6rem; }
.crew-day-menu .cdm-actions .cdm-primary { background: var(--bs-primary, #0d6efd); color: #fff; border-color: transparent; }


/* ════════════════════════════════════════════════════════════════════
   DARK MODE — the parts the vendor theme does not know about
   ════════════════════════════════════════════════════════════════════

   style-preset.css already carries a complete dark palette (756 rules
   under [data-pc-theme=dark]) and it covers every component that came
   with the theme: cards, dropdowns, tables, the sidebar, pagination.
   Nothing below repeats any of that.

   What it cannot cover is the colour WE wrote. Three kinds:

     1. Bootstrap utilities that name a fixed colour rather than a role
        — .link-dark, .text-dark, .bg-white. The theme has no opinion
        on them because in light mode they are correct.
     2. Our own overrides further up this file, which pin the pale
        badge palette to deep ink with !important. Correct on paper,
        invisible on #1b232d.
     3. Third-party widgets loaded from a CDN — SweetAlert2 and Tom
        Select — which ship one palette and no dark build.

   Measured, not guessed: a contrast probe walking every text node on a
   page and comparing its colour to its nearest painted ancestor found
   40 unreadable elements on the legality watch before these rules and
   is the check used after each block below.
   ──────────────────────────────────────────────────────────────── */

/* The project's named tones, so a template can ask for "the muted ink"
   and get something that survives a change of palette. Light first,
   dark second: `:root` and `[data-pc-theme=dark]` have identical
   specificity (0,1,0), so the winner is whichever is written last —
   getting this order wrong silently paints the dark page in the light
   values, which is exactly what it did on the first attempt. The
   `:root` prefix on the dark block makes that no longer a matter of
   ordering. */
:root {
  --xr-ink: #1f2937;          /* headings, names, primary figures     */
  --xr-ink-soft: #374151;     /* body prose                           */
  --xr-ink-muted: #64748b;    /* captions, units, secondary detail    */
  --xr-surface: #ffffff;      /* a card or panel                      */
  --xr-surface-2: #f8f9fa;    /* a well, a table head, a striped row  */
  --xr-surface-3: #eef1f5;    /* hover, a raised chip                 */
  --xr-line: #dee2e6;         /* borders and rules                    */

  /* Status tints: a pale wash, its edge, and the ink that sits on it.
     Three parts per hue, always changed together — a dark number on a
     wash that has gone dark is the failure mode this exists to stop. */
  --xr-tint-danger: #fff7f7;  --xr-edge-danger: #f3c2c2;  --xr-on-danger: #c0392b;
  --xr-tint-warning: #fffaf0; --xr-edge-warning: #f5dfb0; --xr-on-warning: #b7791f;
  --xr-tint-success: #eafaf1; --xr-edge-success: #a3cfbb; --xr-on-success: #1e8449;
  --xr-tint-info: #eff4ff;    --xr-edge-info: #bfdbfe;    --xr-on-info: #1d4ed8;
  --xr-tint-accent: #fce7f3;  --xr-edge-accent: #f9a8d4;  --xr-on-accent: #be185d;
}

:root[data-pc-theme="dark"] {
  /* The vendor file ships `--bs-body-color-rgb: to-rgb(#bfbfbf)` — an
     uncompiled Sass call, so the variable is invalid and every
     `rgba(var(--bs-body-color-rgb), …)` in the theme silently resolves
     to nothing. Faint dividers and hover tints disappear. */
  --bs-body-color-rgb: 191, 191, 191;

  --xr-ink: #e9edf2;
  --xr-ink-soft: #bfc7d1;
  --xr-ink-muted: #8d9aa8;
  --xr-surface: #1b232d;
  --xr-surface-2: #19212a;
  --xr-surface-3: #232e3a;
  --xr-line: #303f50;

  /* The wash becomes a low-alpha tint of the SATURATED hue rather than
     a dark shade of the pale one: #fff7f7 darkened is just grey, and
     the tile stops saying "breach". The ink becomes the light emphasis
     tone — the same inversion the pale badges get further down. */
  --xr-tint-danger: rgba(220, 53, 69, .16);
  --xr-edge-danger: rgba(234, 134, 143, .40);
  --xr-on-danger: #ea868f;
  --xr-tint-warning: rgba(255, 193, 7, .14);
  --xr-edge-warning: rgba(255, 218, 106, .38);
  --xr-on-warning: #ffda6a;
  --xr-tint-success: rgba(25, 135, 84, .18);
  --xr-edge-success: rgba(117, 183, 152, .40);
  --xr-on-success: #75b798;
  --xr-tint-info: rgba(13, 110, 253, .16);
  --xr-edge-info: rgba(158, 197, 254, .38);
  --xr-on-info: #9ec5fe;
  --xr-tint-accent: rgba(219, 39, 119, .16);
  --xr-edge-accent: rgba(249, 168, 212, .38);
  --xr-on-accent: #f0a6c8;

  /* The sidebar's section captions — "Today", "Planning", "Resources".
     The theme gives them #748892 on a #1d2630 sidebar: 3.9:1, just
     under AA, and they are the labels that tell a planner where they
     are in the navigation. */
  --pc-sidebar-caption-color: #93a3b1;
}

/* ── 1. Utilities that name a colour instead of a role ─────────────
   `.link-dark` is how nearly every list in this project renders a
   person's or aircraft's name, and it is a hard #212529. On a #1b232d
   card that is 40 crew names rendered in almost exactly the card's own
   colour — the single worst defect in dark mode. */
[data-pc-theme="dark"] .link-dark,
[data-pc-theme="dark"] a.link-dark,
[data-pc-theme="dark"] .text-dark,
[data-pc-theme="dark"] .text-black,
[data-pc-theme="dark"] .text-body-emphasis {
  color: var(--xr-ink) !important;
}
[data-pc-theme="dark"] a.link-dark:hover,
[data-pc-theme="dark"] a.link-dark:focus {
  color: #ffffff !important;
}

/* Surfaces painted white by name. `.bg-body` too: it resolves through
   --bs-body-bg and would otherwise put the page background inside a
   card, flattening the two into one shape. */
[data-pc-theme="dark"] .bg-white,
[data-pc-theme="dark"] .bg-body,
[data-pc-theme="dark"] .bg-body-tertiary {
  background-color: var(--xr-surface) !important;
}
[data-pc-theme="dark"] .bg-light {
  background-color: var(--xr-surface-2) !important;
  color: var(--xr-ink-soft) !important;
}
[data-pc-theme="dark"] .border,
[data-pc-theme="dark"] .border-top,
[data-pc-theme="dark"] .border-end,
[data-pc-theme="dark"] .border-bottom,
[data-pc-theme="dark"] .border-start,
[data-pc-theme="dark"] .border-light {
  border-color: var(--xr-line) !important;
}

/* Semantic text colours. These are the largest single cause of
   unreadable text in dark mode, and not for an obvious reason: they
   are not broken, they are simply the wrong end of the scale. Every
   one of them was chosen to sit on white — #198754 on #fff is 4.5:1,
   textbook AA — and the same green on a #1b232d card is 3.5:1, which
   fails. The fix is not "lighten a bit"; it is that a hue needs two
   values, one per background, and Bootstrap already publishes them as
   its dark *-text-emphasis tones.

   .text-muted is the highest-volume of the lot — roughly 130 of 180
   failures on the operations hub alone — because every caption, unit,
   timestamp and secondary line in this project is muted text. The
   theme's own #748892 measures 3.9:1. */
[data-pc-theme="dark"] .text-muted,
[data-pc-theme="dark"] .text-body-secondary,
[data-pc-theme="dark"] .text-secondary { color: #9aa8b5 !important; }

[data-pc-theme="dark"] .text-success { color: #75b798 !important; }
[data-pc-theme="dark"] .text-danger { color: #ea868f !important; }
[data-pc-theme="dark"] .text-warning { color: #ffda6a !important; }
[data-pc-theme="dark"] .text-info { color: #6edff6 !important; }
[data-pc-theme="dark"] .text-primary { color: #6ea8fe !important; }

/* Links inherit the same problem wherever they are not .link-dark. */
[data-pc-theme="dark"] .link-primary,
[data-pc-theme="dark"] a:not([class]) { color: #6ea8fe; }
[data-pc-theme="dark"] .link-secondary { color: #9aa8b5; }
[data-pc-theme="dark"] .link-success { color: #75b798; }
[data-pc-theme="dark"] .link-danger { color: #ea868f; }

/* Outline buttons. `.btn-outline-secondary` is the project's default
   quiet action — Cancel, Back, Export, every secondary control on the
   optimiser — and Bootstrap builds it from --bs-secondary, the grey
   meant to be a BACKGROUND with white on it. As a border-and-text
   colour on a dark surface it measures 2.8:1. The border can stay
   quiet; the label cannot. */
[data-pc-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: #b6c0ca;
  --bs-btn-border-color: #4a5b6d;
  --bs-btn-hover-bg: #39485a;
  --bs-btn-hover-border-color: #5a6b7d;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #39485a;
  --bs-btn-active-border-color: #5a6b7d;
  --bs-btn-active-color: #fff;
  /* Disabled, not illegible. A greyed "Timeline" button still has to
     say Timeline — that is how the planner knows what is unavailable
     and why they are looking for it elsewhere. The quietness comes
     from losing the border and the hover, not from hiding the word:
     this sits at ~5:1 against an active button's 15:1. */
  --bs-btn-disabled-color: #8b97a4;
  --bs-btn-disabled-border-color: #3a4756;
}
[data-pc-theme="dark"] .btn-outline-dark {
  --bs-btn-color: var(--xr-ink);
  --bs-btn-border-color: #4a5b6d;
  --bs-btn-hover-bg: #39485a;
  --bs-btn-hover-border-color: #5a6b7d;
  --bs-btn-hover-color: #fff;
}
[data-pc-theme="dark"] .btn-outline-light {
  --bs-btn-color: var(--xr-ink-soft);
  --bs-btn-border-color: var(--xr-line);
  --bs-btn-hover-bg: var(--xr-surface-3);
  --bs-btn-hover-color: var(--xr-ink);
}
[data-pc-theme="dark"] .btn-light {
  --bs-btn-bg: var(--xr-surface-3);
  --bs-btn-color: var(--xr-ink);
  --bs-btn-border-color: var(--xr-line);
  --bs-btn-hover-bg: #2c3a49;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: #4a5b6d;
}

/* Solid fills of the same hues keep white text — on a saturated
   background the dark tone above would be the unreadable one. */
[data-pc-theme="dark"] .bg-success,
[data-pc-theme="dark"] .bg-danger,
[data-pc-theme="dark"] .bg-primary { color: #fff !important; }

/* Our brand lockup, inline in base.html at a fixed slate. */
[data-pc-theme="dark"] .brand-text { color: var(--xr-ink); }
[data-pc-theme="dark"] .stat-mini { color: var(--xr-ink-muted); }
[data-pc-theme="dark"] .skel { background: var(--xr-surface-3); }
[data-pc-theme="dark"] .skel::after {
  background: linear-gradient(90deg, transparent,
                              rgba(255, 255, 255, .06), transparent);
}

/* ── 2. The pale badge palette, inverted ───────────────────────────
   Above, a pale background is paired with deep same-hue ink because
   white on pale amber is ~1.6:1. In dark mode the theme keeps the
   background pale-BY-ALPHA — rgba(220,53,69,.2) over #1b232d, which
   lands near #3a2228 — so the pairing flips: the tint is now the dark
   half and the text has to be the light one. Bootstrap's
   *-text-emphasis tones for dark are exactly these. */
[data-pc-theme="dark"] .badge.bg-warning-subtle,
[data-pc-theme="dark"] .badge.bg-light-warning,
[data-pc-theme="dark"] .chip.bg-warning-subtle,
[data-pc-theme="dark"] .chip.bg-light-warning,
[data-pc-theme="dark"] .btn-light-warning,
[data-pc-theme="dark"] .alert-warning {
  color: #ffda6a !important;
  border-color: rgba(255, 218, 106, .35) !important;
}
[data-pc-theme="dark"] .badge.bg-info-subtle,
[data-pc-theme="dark"] .badge.bg-light-info,
[data-pc-theme="dark"] .chip.bg-info-subtle,
[data-pc-theme="dark"] .chip.bg-light-info,
[data-pc-theme="dark"] .btn-light-info,
[data-pc-theme="dark"] .alert-info {
  color: #6edff6 !important;
  border-color: rgba(110, 223, 246, .35) !important;
}
[data-pc-theme="dark"] .badge.bg-primary-subtle,
[data-pc-theme="dark"] .badge.bg-light-primary,
[data-pc-theme="dark"] .chip.bg-primary-subtle,
[data-pc-theme="dark"] .chip.bg-light-primary,
[data-pc-theme="dark"] .btn-light-primary,
[data-pc-theme="dark"] .alert-primary {
  color: #9ec5fe !important;
  border-color: rgba(158, 197, 254, .35) !important;
}
[data-pc-theme="dark"] .badge.bg-success-subtle,
[data-pc-theme="dark"] .badge.bg-light-success,
[data-pc-theme="dark"] .chip.bg-success-subtle,
[data-pc-theme="dark"] .chip.bg-light-success,
[data-pc-theme="dark"] .btn-light-success,
[data-pc-theme="dark"] .alert-success {
  color: #75b798 !important;
  border-color: rgba(117, 183, 152, .35) !important;
}
[data-pc-theme="dark"] .badge.bg-danger-subtle,
[data-pc-theme="dark"] .badge.bg-light-danger,
[data-pc-theme="dark"] .chip.bg-danger-subtle,
[data-pc-theme="dark"] .chip.bg-light-danger,
[data-pc-theme="dark"] .btn-light-danger,
[data-pc-theme="dark"] .alert-danger {
  color: #ea868f !important;
  border-color: rgba(234, 134, 143, .35) !important;
}
[data-pc-theme="dark"] .badge.bg-secondary-subtle,
[data-pc-theme="dark"] .badge.bg-light-secondary,
[data-pc-theme="dark"] .chip.bg-secondary-subtle,
[data-pc-theme="dark"] .chip.bg-light-secondary {
  color: #dee2e6 !important;
  border-color: rgba(222, 226, 230, .3) !important;
}
/* The pale backgrounds themselves — the light-mode ones in base.html's
   inline block are opaque pastels (#d1e7dd), not alpha tints, so they
   stay bright and swallow their own text. Restate them as tints. */
[data-pc-theme="dark"] .bg-light-success,
[data-pc-theme="dark"] .badge.bg-light-success,
[data-pc-theme="dark"] .btn-light-success {
  background: rgba(25, 135, 84, .22) !important;
}
[data-pc-theme="dark"] .alert-success {
  --bs-alert-bg: rgba(25, 135, 84, .18);
  --bs-alert-color: #75b798;
  --bs-alert-border-color: rgba(117, 183, 152, .35);
  --bs-alert-link-color: #a3cfbb;
}

/* `.bg-light` carries a solid pastel on some cards; a badge sitting on
   the page background rather than a card needs the same treatment. */
[data-pc-theme="dark"] .badge.bg-light { background: var(--xr-surface-3) !important; }

/* Solid warning/info stay light-on-purpose, so their dark ink is right
   in both modes — nothing to do. Solid dark is the exception: on a dark
   page `.bg-dark` is invisible against the card behind it. */
[data-pc-theme="dark"] .badge.bg-dark,
[data-pc-theme="dark"] .bg-dark {
  background-color: #39485a !important;
  color: var(--xr-ink) !important;
}

/* ── 3. Tables ─────────────────────────────────────────────────────
   Most tables here are `.table` with no variant, which leaves
   --bs-table-color at the Bootstrap default rather than inheriting. */
[data-pc-theme="dark"] .table {
  --bs-table-color: var(--xr-ink-soft);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--xr-line);
  --bs-table-striped-bg: rgba(255, 255, 255, .025);
  --bs-table-striped-color: var(--xr-ink-soft);
  --bs-table-hover-bg: rgba(255, 255, 255, .045);
  --bs-table-hover-color: var(--xr-ink);
  --bs-table-active-bg: rgba(255, 255, 255, .06);
  --bs-table-active-color: var(--xr-ink);
}
[data-pc-theme="dark"] .table > thead th,
[data-pc-theme="dark"] .table-light,
[data-pc-theme="dark"] .table > :not(caption) > * > .table-light {
  background-color: var(--xr-surface-2) !important;
  color: var(--xr-ink-muted) !important;
  border-color: var(--xr-line) !important;
}

/* ── 4. Form controls ──────────────────────────────────────────────
   The theme styles .form-control, but not the states a form spends
   most of its life in: disabled, readonly, and a plaintext control. */
[data-pc-theme="dark"] .form-control:disabled,
[data-pc-theme="dark"] .form-control[readonly],
[data-pc-theme="dark"] .form-select:disabled {
  background-color: var(--xr-surface-2);
  color: var(--xr-ink-muted);
  border-color: var(--xr-line);
}
[data-pc-theme="dark"] .form-control::placeholder { color: #6b7886; }
[data-pc-theme="dark"] .input-group-text {
  background-color: var(--xr-surface-2);
  border-color: var(--xr-line);
  color: var(--xr-ink-muted);
}
[data-pc-theme="dark"] .form-text,
[data-pc-theme="dark"] .form-check-label,
[data-pc-theme="dark"] .form-label { color: var(--xr-ink-soft); }

/* ── 5. Modals ─────────────────────────────────────────────────────
   The theme gives .modal-content a dark surface but leaves the header
   and footer rules, the close cross and any header text we styled
   ourselves on their light values. */
[data-pc-theme="dark"] .modal-content {
  background-color: var(--xr-surface);
  border-color: var(--xr-line);
}
[data-pc-theme="dark"] .modal-header,
[data-pc-theme="dark"] .modal-footer {
  border-color: var(--xr-line);
  background-color: transparent;
}
[data-pc-theme="dark"] .modal-title { color: var(--xr-ink); }
[data-pc-theme="dark"] .modal-backdrop.show { opacity: .7; }
[data-pc-theme="dark"] .offcanvas-header,
[data-pc-theme="dark"] .offcanvas-title { color: var(--xr-ink); }
/* Bootstrap's close button is a black SVG. data-bs-theme=dark is set on
   <html> alongside data-pc-theme, which is what Bootstrap keys its own
   filter off — restated here because the CDN build is loaded before
   this file and the theme's copy is scoped to elements, not the root. */
[data-pc-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* ── 6. SweetAlert2 ────────────────────────────────────────────────
   Loaded from a CDN with one palette and no dark build, and it is the
   dialog that carries the consequential messages in this app — the
   LEON credential failures, the confirm-before-push prompts. A white
   modal fired over a dark ops screen at 03:00 is not a cosmetic
   problem. Scoped to the popup so the coloured status icons, which are
   drawn in their own saturated hues, are left alone. */
[data-pc-theme="dark"] .swal2-popup {
  background: var(--xr-surface) !important;
  color: var(--xr-ink-soft) !important;
  border: 1px solid var(--xr-line);
}
[data-pc-theme="dark"] .swal2-title { color: var(--xr-ink) !important; }
[data-pc-theme="dark"] .swal2-html-container,
[data-pc-theme="dark"] .swal2-content { color: var(--xr-ink-soft) !important; }
[data-pc-theme="dark"] .swal2-footer {
  color: var(--xr-ink-muted) !important;
  border-top-color: var(--xr-line) !important;
}
[data-pc-theme="dark"] .swal2-close { color: var(--xr-ink-muted) !important; }
[data-pc-theme="dark"] .swal2-close:hover { color: var(--xr-ink) !important; }
[data-pc-theme="dark"] .swal2-input,
[data-pc-theme="dark"] .swal2-textarea,
[data-pc-theme="dark"] .swal2-select,
[data-pc-theme="dark"] .swal2-file {
  background: var(--xr-surface-2) !important;
  color: var(--xr-ink) !important;
  border: 1px solid var(--xr-line) !important;
  box-shadow: none !important;
}
[data-pc-theme="dark"] .swal2-input::placeholder { color: #6b7886 !important; }
[data-pc-theme="dark"] .swal2-validation-message {
  background: rgba(220, 53, 69, .18) !important;
  color: #ea868f !important;
}
[data-pc-theme="dark"] .swal2-container.swal2-backdrop-show,
[data-pc-theme="dark"] .swal2-container.swal2-shown {
  background: rgba(0, 0, 0, .62) !important;
}
[data-pc-theme="dark"] .swal2-timer-progress-bar {
  background: rgba(255, 255, 255, .25) !important;
}

/* ── 7. Tom Select ─────────────────────────────────────────────────
   Every <select> in the project is replaced by Tom Select's own
   markup, so the theme's .form-select rules never reach what is
   actually on screen: the control, the dropdown and the chosen items
   are Tom Select's divs. */
[data-pc-theme="dark"] .ts-wrapper .ts-control,
[data-pc-theme="dark"] .ts-wrapper.single .ts-control {
  background: var(--bs-body-bg) !important;
  color: var(--xr-ink) !important;
  border-color: var(--xr-line) !important;
}
[data-pc-theme="dark"] .ts-wrapper.disabled .ts-control {
  background: var(--xr-surface-2) !important;
  opacity: .65;
}
[data-pc-theme="dark"] .ts-control input,
[data-pc-theme="dark"] .ts-control > input { color: var(--xr-ink) !important; }
[data-pc-theme="dark"] .ts-control input::placeholder { color: #6b7886 !important; }
[data-pc-theme="dark"] .ts-dropdown {
  background: #263240 !important;
  color: var(--xr-ink-soft) !important;
  border-color: var(--xr-line) !important;
  box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .45);
}
[data-pc-theme="dark"] .ts-dropdown .option { color: var(--xr-ink-soft); }
[data-pc-theme="dark"] .ts-dropdown .active {
  background: var(--xr-surface-3) !important;
  color: var(--xr-ink) !important;
}
[data-pc-theme="dark"] .ts-dropdown .optgroup-header {
  background: #263240 !important;
  color: var(--xr-ink-muted) !important;
}
[data-pc-theme="dark"] .ts-dropdown .no-results,
[data-pc-theme="dark"] .ts-dropdown .create { color: var(--xr-ink-muted) !important; }
[data-pc-theme="dark"] .ts-wrapper.multi .ts-control > div {
  background: var(--xr-surface-3) !important;
  color: var(--xr-ink) !important;
  border-color: var(--xr-line) !important;
}

/* ── 8. The crewing right-click menu ───────────────────────────────
   Already variable-driven above, except its shadow, which was tuned
   for a white surface and reads as a smudge on a dark one. */
[data-pc-theme="dark"] .crew-day-menu {
  background: #263240;
  box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .5);
}
[data-pc-theme="dark"] .crew-day-menu .cdm-row input {
  background: var(--bs-body-bg); color: var(--xr-ink);
}

/* ── 9. Print ──────────────────────────────────────────────────────
   A roster printed from a dark screen would otherwise come out as a
   sheet of toner. Paper is light whatever the screen is. */
@media print {
  [data-pc-theme="dark"] {
    --bs-body-bg: #fff; --bs-body-color: #212529;
    --xr-ink: #1f2937; --xr-ink-soft: #374151; --xr-ink-muted: #64748b;
    --xr-surface: #fff; --xr-surface-2: #f8f9fa; --xr-surface-3: #eef1f5;
    --xr-line: #dee2e6;
  }
  [data-pc-theme="dark"] .card,
  [data-pc-theme="dark"] .modal-content { background: #fff; color: #212529; }
}