/*
    The bridge between the ePMR tokens and Bootstrap.

    Slice 004's US-1 asked for Bootstrap's Sass variables to be overridden "so `.btn-primary`,
    `.badge`, `.alert`, `.card` inherit the brand with no per-use styling". That was never done. The
    tokens existed and were good; Bootstrap sat beside them rendering its own blue, its own 4px
    radius and its own greys, and fifty screens inherited the template look.

    This maps them at the custom-property layer rather than by recompiling Sass. Two reasons:

      - Bootstrap 5.3 exposes almost everything as `--bs-*`, so a mapping gets the same result
        without adding a Sass toolchain to the build.
      - A hospital network cannot fetch a compiler, and the deployment story is "copy the folder".
        One more build step is one more thing to go wrong on site.

    Everything is defined TWICE, once per theme, because slice 004 is explicit that neither theme is
    derived from the other. `[data-bs-theme]` is the same hook Bootstrap 5.3 uses, so a single
    attribute switches both layers together — which is precisely what was broken before: the page
    was on 5.1, `data-bs-theme` meant nothing to it, and the result was ePMR's dark navy behind
    Bootstrap's light components.
*/

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  /* ---- brand ------------------------------------------------------------------------------- */

  --bs-primary: var(--primary);
  --bs-link-color: var(--primary);
  --bs-link-hover-color: var(--primary-hover);

  /* ---- surfaces and text --------------------------------------------------------------------
     `--bs-body-*` drives the page; `--bs-emphasis-color` drives headings and strong text; the
     `-rgb` forms are what Bootstrap's own `rgba(var(--bs-*-rgb), .5)` utilities consume, and
     omitting them is why half-transparent utilities render black. */

  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-secondary-color: var(--text-2);
  --bs-tertiary-color: var(--text-3);
  --bs-emphasis-color: var(--text);
  --bs-secondary-bg: var(--surface-2);
  --bs-tertiary-bg: var(--surface-2);
  --bs-border-color: var(--border);
  --bs-border-color-translucent: var(--border);

  /* ---- geometry -----------------------------------------------------------------------------
     Bootstrap's 4px default against a design system whose cards are 18px is most of why the
     screens read as a template. */

  --bs-border-radius: var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-border-radius-xl: var(--radius-xl);
  --bs-border-radius-pill: var(--radius-pill);
  --bs-border-width: var(--border-width);

  /* ---- type ---------------------------------------------------------------------------------
     The font stack already loads and applies; the SIZE did not follow. 17px body is NFR-U6, and
     Bootstrap's 1rem was quietly overriding it on every control. */

  --bs-body-font-family: var(--font-body);
  --bs-body-font-size: var(--font-size-body);
  --bs-body-line-height: var(--line-height-latin);
  --bs-font-monospace: var(--font-mono);

  /* ---- components ---------------------------------------------------------------------------
     Card, form control and list group take the surface colour rather than a hardcoded white, which
     is the specific failure that made dark mode unreadable: white card, dark-theme label text. */

  --bs-card-bg: var(--surface);
  --bs-card-border-color: var(--border);
  --bs-card-border-radius: var(--radius-lg);
  --bs-card-cap-bg: var(--surface-2);

  --bs-form-control-bg: var(--surface);
  --bs-form-control-color: var(--text);

  --bs-list-group-bg: var(--surface);
  --bs-list-group-color: var(--text);
  --bs-list-group-border-color: var(--border);
  --bs-list-group-action-hover-bg: var(--surface-2);
  --bs-list-group-active-bg: var(--primary);
  --bs-list-group-active-border-color: var(--primary);
  --bs-list-group-active-color: var(--on-primary);

  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--border);

  --bs-heading-color: var(--text);

  /* ---- focus --------------------------------------------------------------------------------
     A visible focus ring in the brand colour, in both themes. Keyboard navigation is not an
     accessibility nicety on a ward: a scanner is a keyboard, and a pharmacist at a bench moves
     between fields without touching a mouse. */

  --bs-focus-ring-color: var(--primary-soft);
  --bs-focus-ring-width: 3px;
}

/*
    Arabic gets its own family and a taller line, both already defined as tokens. Bootstrap reads
    one variable for the body, so the swap happens here rather than in fifty places.
*/
[dir="rtl"] {
  --bs-body-font-family: var(--font-body-arabic);
  --bs-body-line-height: var(--line-height-arabic);
}

/* ---- the `-rgb` forms, per theme --------------------------------------------------------------
   Bootstrap 5.3 does not read `--bs-primary` for `.text-primary`, `.bg-primary`, `.border-primary`
   or `.text-bg-primary`; it reads `--bs-primary-rgb` and composes an `rgba()` from it. Setting the
   colour without the triplet themes the buttons and leaves every utility on Bootstrap's own blue —
   which is what the working-location badge in the page header was still wearing.

   These cannot be derived: CSS has no way to take a hex custom property apart into channels, so the
   triplet is written beside the colour it belongs to. If a token here ever changes, change both
   lines, or the utilities quietly disagree with the components.

   `--on-status` is the ink for a filled status chip, and it exists because `#fff` is right in only
   one of the two themes. Light's status colours are dark (#2F7D60, #8A3F07) and take white; dark's
   are pastels (#4FB98D, #F0A648) where white lands around 2:1 — unreadable, on the badges 32 views
   render. Dark takes the page's own near-black ink instead. */

:root,
[data-bs-theme="light"] {
  --bs-primary-rgb: 30, 154, 171;
  --bs-body-color-rgb: 30, 51, 72;
  --bs-body-bg-rgb: 247, 250, 252;
  --bs-success-rgb: 47, 125, 96;
  --bs-danger-rgb: 168, 53, 46;
  --bs-warning-rgb: 138, 63, 7;
  --bs-info-rgb: 20, 108, 122;
  --bs-secondary-rgb: 75, 94, 114;

  --on-status: #FFFFFF;

  /* Ink for the hero's journey gradient. Light's journey colours are deep (#1C5F7F → #128173) and
     take white; dark's are bright (#3E93AB → #3FC6B0), where a 32px white headline does not even
     clear the 3:1 large-text bar. */
  --on-journey: #FFFFFF;

  /* Backgrounds that are dark in BOTH themes — the blocked-gate slab — so this one really is white
     either way. Named rather than literal so it is searchable with the rest of them. */
  --on-emphasis: #FFFFFF;

  /* The page header band. PRD §13.0.1 specifies a fixed navy gradient header, and the Flutter app
     has had exactly this since slice 034 — same three brand stops, same direction. The web band was
     transparent, which is most of why the owner said the product "feels like all white": the one
     piece of chrome that is meant to anchor the brand was not painting anything at all.

     It does NOT follow light/dark. That is the point of it: chrome anchors, content adapts. */
  --gradient-header: linear-gradient(
      100deg,
      var(--brand-navy-900) 0%,
      var(--brand-navy-800) 45%,
      var(--brand-blue-700) 100%);

  /* Ink on the band. Not `--on-primary`, which is near-black in the dark theme and would vanish. */
  --on-band: #FFFFFF;
  --on-band-quiet: rgba(255, 255, 255, .75);
  --on-band-fill: rgba(255, 255, 255, .16);

  /* The menu is its own plane, not another white panel.

     It used to paint `--surface` — the same white as the cards — so a white sidebar sat beside a
     near-white page holding white cards and the whole shell read as one flat sheet. A blue tint one
     step off the page, plus a shadow at its inline edge, makes it a surface that the content sits
     BESIDE rather than continues into. Kept light rather than navy so it does not compete with the
     header band above it, which is the brand's anchor. */
  --sidebar-bg: #D2E4F2;
  --sidebar-border: #B4D2E8;
  --sidebar-shadow: 0 0 14px rgba(6, 21, 43, .14);
  --sidebar-hover: #C0D9EC;
}

[data-bs-theme="dark"] {
  --bs-primary-rgb: 41, 171, 184;
  --bs-body-color-rgb: 232, 239, 245;
  --bs-body-bg-rgb: 6, 21, 43;
  --bs-success-rgb: 79, 185, 141;
  --bs-danger-rgb: 232, 99, 90;
  --bs-warning-rgb: 240, 166, 72;
  --bs-info-rgb: 41, 171, 184;
  --bs-secondary-rgb: 147, 166, 184;

  --on-status: #06152B;
  --on-journey: #06152B;
  --on-emphasis: #FFFFFF;

  /* One step lighter than the light theme's, and that is not a contradiction of "the band does not
     follow light/dark" — the band's JOB is to be a band. Against a #0A1D33 page and a #0C2340
     sidebar, starting at navy-900 (#06152B) made the first half of it disappear and the header only
     became visible where the blue end arrived. Same three brand stops, moved up the ramp so the
     band still reads as one. */
  --gradient-header: linear-gradient(
      100deg,
      var(--brand-navy-700) 0%,
      var(--brand-blue-700) 55%,
      var(--brand-teal-600) 100%);

  --on-band: #FFFFFF;
  --on-band-quiet: rgba(255, 255, 255, .75);
  --on-band-fill: rgba(255, 255, 255, .16);

  /* A blue DEGREE above the page rather than a light tint: on a #06152B ground the menu has to be
     lighter to separate, where in the light theme it has to be darker. Same job, opposite direction. */
  --sidebar-bg: #10314F;
  --sidebar-border: #1B4468;
  --sidebar-shadow: 0 0 16px rgba(0, 0, 0, .40);
  --sidebar-hover: #17416A;
}

/* ---- buttons ---------------------------------------------------------------------------------
   Bootstrap 5.3 exposes per-button custom properties, so the primary button follows the brand
   without a single `!important` and without touching any markup. */

.btn-primary {
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-color: var(--on-primary);
  --bs-btn-hover-bg: var(--primary-hover);
  --bs-btn-hover-border-color: var(--primary-hover);
  --bs-btn-hover-color: var(--on-primary);
  --bs-btn-active-bg: var(--primary-hover);
  --bs-btn-active-border-color: var(--primary-hover);
  --bs-btn-disabled-bg: var(--primary);
  --bs-btn-disabled-border-color: var(--primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--primary);
  --bs-btn-hover-border-color: var(--primary);
  --bs-btn-hover-color: var(--on-primary);
  --bs-btn-active-bg: var(--primary);
  --bs-btn-active-border-color: var(--primary);
}

.btn-outline-secondary {
  --bs-btn-color: var(--text-2);
  --bs-btn-border-color: var(--border-2);
  --bs-btn-hover-bg: var(--surface-2);
  --bs-btn-hover-border-color: var(--border-2);
  --bs-btn-hover-color: var(--text);
  --bs-btn-active-bg: var(--surface-2);
  --bs-btn-active-color: var(--text);
  --bs-btn-active-border-color: var(--primary);
}

/* ---- navigation ------------------------------------------------------------------------------
   Pills and tabs carry their own active colour, which the generic --bs-primary does not reach. An
   active tab in Bootstrap blue beside a teal button is the tell that a theme was half-applied. */

.nav-pills {
  --bs-nav-pills-link-active-bg: var(--primary);
  --bs-nav-pills-link-active-color: var(--on-primary);
  --bs-nav-link-color: var(--text-2);
  --bs-nav-link-hover-color: var(--primary);
}

.nav-tabs {
  --bs-nav-tabs-link-active-bg: var(--surface);
  --bs-nav-tabs-link-active-color: var(--text);
  --bs-nav-tabs-link-active-border-color: var(--border-2);
  --bs-nav-link-color: var(--text-2);
  --bs-nav-link-hover-color: var(--primary);
}

/* The paging control on any long list. */
.pagination {
  --bs-pagination-color: var(--text-2);
  --bs-pagination-bg: var(--surface);
  --bs-pagination-border-color: var(--border);
  --bs-pagination-hover-bg: var(--surface-2);
  --bs-pagination-hover-color: var(--text);
  --bs-pagination-active-bg: var(--primary);
  --bs-pagination-active-border-color: var(--primary);
  --bs-pagination-active-color: var(--on-primary);
}

/* Progress bars — the ward completion strip and anything else measuring how far through we are. */
.progress {
  --bs-progress-bg: var(--surface-2);
  --bs-progress-bar-bg: var(--journey-administered);
}

/* ---- status colours --------------------------------------------------------------------------
   `text-bg-*` is what every screen in this product reaches for on a badge. Mapped to the clinical
   status palette so a warning badge is the same amber as a warning anywhere else — the whole point
   of slice 004 being that no screen invents its own status colour. */

.text-bg-success { background-color: var(--status-success) !important; color: var(--on-status) !important; }
.text-bg-danger  { background-color: var(--status-danger)  !important; color: var(--on-status) !important; }
.text-bg-warning { background-color: var(--status-warning) !important; color: var(--on-status) !important; }
.text-bg-info    { background-color: var(--status-info)    !important; color: var(--on-status) !important; }
.text-bg-secondary { background-color: var(--status-neutral) !important; color: var(--on-status) !important; }
.text-bg-primary { background-color: var(--primary) !important; color: var(--on-primary) !important; }

/*
    Alerts carry the same palette as tinted surfaces rather than Bootstrap's pastels, so a warning
    alert and a warning badge on the same screen are recognisably the same state.
*/
.alert-warning {
  --bs-alert-bg: var(--amber-soft);
  --bs-alert-border-color: var(--status-warning);
  --bs-alert-color: var(--text);
}

.alert-danger {
  --bs-alert-bg: var(--danger-soft);
  --bs-alert-border-color: var(--status-danger);
  --bs-alert-color: var(--text);
}

.alert-success {
  --bs-alert-bg: var(--green-soft);
  --bs-alert-border-color: var(--status-success);
  --bs-alert-color: var(--text);
}

.alert-info,
.alert-secondary {
  --bs-alert-bg: var(--primary-soft);
  --bs-alert-border-color: var(--status-info);
  --bs-alert-color: var(--text);
}

/* ---- the two token bugs Fable found -----------------------------------------------------------
   `components.css` asks for `--shadow-sm|md|lg`; the token generator emits `--sm|md|lg`, dropping
   the group prefix for shadows only. Every `epmr-card` shadow was therefore undefined and nobody
   noticed, because no feature screen used `epmr-card`. Aliased here rather than renaming the
   generated tokens, so the generator stays the source of truth. */

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --shadow-sm: var(--sm);
  --shadow-md: var(--md);
  --shadow-lg: var(--lg);
  --shadow-xl: var(--xl);

  /* `operations.css` referenced `--text-1`, which has never existed. */
  --text-1: var(--text);
}

/* ---- the other filled buttons -----------------------------------------------------------------
   `.btn-danger`, `.btn-success` and `.btn-warning` were never mapped, so every destructive action in
   the product wore Bootstrap's #dc3545 rather than the clinical danger colour, and `.btn-warning`
   was Bootstrap yellow with black text beside amber badges meaning the same thing. The outline is
   the more common of the two danger forms here — eleven views — because a destructive action in this
   product is an outline and not a filled slab, exactly as it is on the handheld. */

.btn-danger {
  --bs-btn-bg: var(--status-danger);
  --bs-btn-border-color: var(--status-danger);
  --bs-btn-color: var(--on-status);
  --bs-btn-hover-bg: var(--status-danger-emphasis);
  --bs-btn-hover-border-color: var(--status-danger-emphasis);
  --bs-btn-hover-color: var(--on-status);
  --bs-btn-active-bg: var(--status-danger-emphasis);
  --bs-btn-active-border-color: var(--status-danger-emphasis);
  --bs-btn-disabled-bg: var(--status-danger);
  --bs-btn-disabled-border-color: var(--status-danger);
}

.btn-outline-danger {
  --bs-btn-color: var(--status-danger);
  --bs-btn-border-color: var(--status-danger);
  --bs-btn-hover-bg: var(--status-danger);
  --bs-btn-hover-border-color: var(--status-danger);
  --bs-btn-hover-color: var(--on-status);
  --bs-btn-active-bg: var(--status-danger);
  --bs-btn-active-border-color: var(--status-danger);
  --bs-btn-active-color: var(--on-status);
}

.btn-success {
  --bs-btn-bg: var(--status-success);
  --bs-btn-border-color: var(--status-success);
  --bs-btn-color: var(--on-status);
  --bs-btn-hover-bg: var(--status-success);
  --bs-btn-hover-border-color: var(--status-success);
  --bs-btn-hover-color: var(--on-status);
  --bs-btn-active-bg: var(--status-success);
  --bs-btn-active-border-color: var(--status-success);
}

.btn-warning {
  --bs-btn-bg: var(--status-warning);
  --bs-btn-border-color: var(--status-warning);
  --bs-btn-color: var(--on-status);
  --bs-btn-hover-bg: var(--status-warning);
  --bs-btn-hover-border-color: var(--status-warning);
  --bs-btn-hover-color: var(--on-status);
  --bs-btn-active-bg: var(--status-warning);
  --bs-btn-active-border-color: var(--status-warning);
}