/*
  ElixTechs identity — Bootstrap 5.3 theme.

  Loaded after bootstrap(.rtl).min.css and before site.css, in both the Portal
  and the Manager. The two copies are identical on purpose; change one, copy it
  to the other. The reference implementation of the identity is the company
  site (elixtechs.com, Website/src/assets/css/site.css).

  Palette: navy #03045E, blue #0077B6, cyan #00B4D8, sky #90E0EF, ice #CAF0F8.
  IBM Plex Sans / Plex Mono / Plex Sans Arabic, square corners, 1px hairlines,
  mono uppercase eyebrow labels (Arabic: the sans, no letter-spacing).

  How it is built: components use ROLE tokens (--elx-ink, --elx-label, …),
  never raw colours, and Bootstrap's variables are pointed at those tokens.
  The dark scheme only re-defines the tokens, so almost nothing needs a
  dark-specific rule. The few that do (inline SVG data URIs) are at the end.

  Contrast (WCAG AA):
    - Cyan is a fill, never text on a light ground (2.4:1). The primary action
      is cyan with navy text (7.2:1); links and labels on light are blue
      (4.9:1 on white, 4.6:1 on the page ground) — not on --elx-subtle.
    - Muted text #4A5B76 is 6.9:1 on white; #A6BDD3 is 9.4:1 on the dark surface.
    - Control borders (--elx-line-strong) clear 3:1 against their ground.

  No inline styles and no remote fonts: both apps send style-src 'self' and
  font-src 'self'.
*/

/* ---------------------------------------------------------------------------
   Faces (self-hosted, SIL OFL 1.1 — fonts/OFL-ibm-plex.txt). The Arabic faces
   carry a unicode-range, so pages without Arabic never download them.
   --------------------------------------------------------------------------- */

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 100 700;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 100 700;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+2000-206F, U+2212;
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url("../fonts/ibm-plex-mono-latin-500.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+2000-206F, U+2212;
}

@font-face {
    font-family: "IBM Plex Sans Arabic";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-arabic-400.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
    font-family: "IBM Plex Sans Arabic";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-arabic-500.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
    font-family: "IBM Plex Sans Arabic";
    font-style: normal;
    font-weight: 600 700;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans-arabic-600.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

/* ---------------------------------------------------------------------------
   Tokens — light (the default)
   --------------------------------------------------------------------------- */

:root,
[data-bs-theme="light"] {
    /* Brand ramp — reference only; components use the roles below. */
    --elx-navy: #03045e;
    --elx-blue: #0077b6;
    --elx-cyan: #00b4d8;
    --elx-sky: #90e0ef;
    --elx-ice: #caf0f8;

    /* Roles */
    --elx-bg: #f6f9fb;
    --elx-surface: #ffffff;
    --elx-subtle: #eef4f8;
    --elx-line: #dce7ee;
    --elx-line-strong: #7d8ea6;
    --elx-ink: #03045e;
    --elx-muted: #4a5b76;
    --elx-label: #0077b6;
    --elx-on-label: #ffffff;
    --elx-link: #0077b6;
    --elx-link-hover: #03045e;
    --elx-rule-strong: #03045e;
    --elx-focus: #0077b6;
    --elx-ring: rgba(0, 119, 182, 0.35);
    --elx-wash: #e3f5fa;
    --elx-wash-ink: #03045e;

    --elx-danger: #b3261e;
    --elx-on-danger: #ffffff;
    --elx-danger-ink: #8c1d18;
    --elx-danger-wash: #fdecea;
    --elx-warn: #d98e04;
    --elx-warn-ink: #7a4b00;
    --elx-warn-wash: #fff4e0;

    /* The action: cyan fill, navy text, in both schemes. */
    --elx-action: #00b4d8;
    --elx-action-ink: #03045e;
    --elx-action-hover: #90e0ef;

    /* Navy bands (header, footer, console bar) keep their colours in both schemes. */
    --elx-band: #03045e;
    --elx-band-raised: #0a0f6b;
    --elx-band-ink: #ffffff;
    --elx-band-body: #caf0f8;
    --elx-band-label: #90e0ef;
    --elx-band-line: rgba(144, 224, 239, 0.22);

    --elx-font-sans: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
    --elx-font-mono: "IBM Plex Mono", "IBM Plex Sans Arabic", ui-monospace, "Cascadia Mono", Consolas, monospace;

    --elx-radius: 2px;
    --elx-shadow-sm: none;
    --elx-shadow-md: 0 1px 2px rgba(3, 4, 94, 0.06), 0 4px 14px rgba(3, 4, 94, 0.06);
    --elx-shadow-lg: 0 14px 36px rgba(3, 4, 94, 0.14);

    /* Bootstrap's literal RGB triplets (they cannot be derived from tokens). */
    --bs-primary: #0077b6;
    --bs-primary-rgb: 0, 119, 182;
    --bs-secondary: #4a5b76;
    --bs-secondary-rgb: 74, 91, 118;
    --bs-success: #0077b6;
    --bs-success-rgb: 0, 119, 182;
    --bs-info: #0077b6;
    --bs-info-rgb: 0, 119, 182;
    --bs-warning: #d98e04;
    --bs-warning-rgb: 217, 142, 4;
    --bs-danger: #b3261e;
    --bs-danger-rgb: 179, 38, 30;
    --bs-light: #f6f9fb;
    --bs-light-rgb: 246, 249, 251;
    --bs-dark: #03045e;
    --bs-dark-rgb: 3, 4, 94;
    --bs-body-color-rgb: 3, 4, 94;
    --bs-body-bg-rgb: 246, 249, 251;
    --bs-emphasis-color-rgb: 3, 4, 94;
    --bs-secondary-color-rgb: 74, 91, 118;
    --bs-secondary-bg-rgb: 238, 244, 248;
    --bs-tertiary-color-rgb: 74, 91, 118;
    --bs-tertiary-bg-rgb: 238, 244, 248;
    --bs-link-color-rgb: 0, 119, 182;
    --bs-link-hover-color-rgb: 3, 4, 94;

    color-scheme: light;
}

/* ---------------------------------------------------------------------------
   Tokens — dark (chosen, or following a dark system setting; the fallback
   copy below applies when elx-theme.js did not run)
   --------------------------------------------------------------------------- */

[data-bs-theme="dark"] {
    --elx-bg: #01022e;
    --elx-surface: #060a4c;
    --elx-subtle: #0b1158;
    --elx-line: #1d2c6b;
    --elx-line-strong: #5b6fae;
    --elx-ink: #eaf7fb;
    --elx-muted: #a6bdd3;
    --elx-label: #90e0ef;
    --elx-on-label: #01022e;
    --elx-link: #90e0ef;
    --elx-link-hover: #ffffff;
    --elx-rule-strong: #00b4d8;
    --elx-focus: #90e0ef;
    --elx-ring: rgba(144, 224, 239, 0.4);
    --elx-wash: #10205e;
    --elx-wash-ink: #caf0f8;

    --elx-danger: #ff8a80;
    --elx-on-danger: #01022e;
    --elx-danger-ink: #ffb4ab;
    --elx-danger-wash: #2c0f3f;
    --elx-warn: #f2b33d;
    --elx-warn-ink: #ffd27a;
    --elx-warn-wash: #2a2145;

    --elx-shadow-sm: none;
    --elx-shadow-md: 0 0 0 1px rgba(144, 224, 239, 0.06), 0 4px 14px rgba(0, 0, 0, 0.35);
    --elx-shadow-lg: 0 0 0 1px rgba(144, 224, 239, 0.08), 0 14px 36px rgba(0, 0, 0, 0.5);

    --bs-primary: #90e0ef;
    --bs-primary-rgb: 144, 224, 239;
    --bs-secondary: #a6bdd3;
    --bs-secondary-rgb: 166, 189, 211;
    --bs-success: #90e0ef;
    --bs-success-rgb: 144, 224, 239;
    --bs-info: #90e0ef;
    --bs-info-rgb: 144, 224, 239;
    --bs-warning: #f2b33d;
    --bs-warning-rgb: 242, 179, 61;
    --bs-danger: #ff8a80;
    --bs-danger-rgb: 255, 138, 128;
    --bs-light: #0b1158;
    --bs-light-rgb: 11, 17, 88;
    --bs-dark: #01022e;
    --bs-dark-rgb: 1, 2, 46;
    --bs-body-color-rgb: 234, 247, 251;
    --bs-body-bg-rgb: 1, 2, 46;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color-rgb: 166, 189, 211;
    --bs-secondary-bg-rgb: 11, 17, 88;
    --bs-tertiary-color-rgb: 166, 189, 211;
    --bs-tertiary-bg-rgb: 11, 17, 88;
    --bs-link-color-rgb: 144, 224, 239;
    --bs-link-hover-color-rgb: 255, 255, 255;

    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --elx-bg: #01022e;
        --elx-surface: #060a4c;
        --elx-subtle: #0b1158;
        --elx-line: #1d2c6b;
        --elx-line-strong: #5b6fae;
        --elx-ink: #eaf7fb;
        --elx-muted: #a6bdd3;
        --elx-label: #90e0ef;
        --elx-on-label: #01022e;
        --elx-link: #90e0ef;
        --elx-link-hover: #ffffff;
        --elx-rule-strong: #00b4d8;
        --elx-focus: #90e0ef;
        --elx-ring: rgba(144, 224, 239, 0.4);
        --elx-wash: #10205e;
        --elx-wash-ink: #caf0f8;

        --elx-danger: #ff8a80;
        --elx-on-danger: #01022e;
        --elx-danger-ink: #ffb4ab;
        --elx-danger-wash: #2c0f3f;
        --elx-warn: #f2b33d;
        --elx-warn-ink: #ffd27a;
        --elx-warn-wash: #2a2145;

        --elx-shadow-sm: none;
        --elx-shadow-md: 0 0 0 1px rgba(144, 224, 239, 0.06), 0 4px 14px rgba(0, 0, 0, 0.35);
        --elx-shadow-lg: 0 0 0 1px rgba(144, 224, 239, 0.08), 0 14px 36px rgba(0, 0, 0, 0.5);

        --bs-primary: #90e0ef;
        --bs-primary-rgb: 144, 224, 239;
        --bs-secondary: #a6bdd3;
        --bs-secondary-rgb: 166, 189, 211;
        --bs-success: #90e0ef;
        --bs-success-rgb: 144, 224, 239;
        --bs-info: #90e0ef;
        --bs-info-rgb: 144, 224, 239;
        --bs-warning: #f2b33d;
        --bs-warning-rgb: 242, 179, 61;
        --bs-danger: #ff8a80;
        --bs-danger-rgb: 255, 138, 128;
        --bs-light: #0b1158;
        --bs-light-rgb: 11, 17, 88;
        --bs-dark: #01022e;
        --bs-dark-rgb: 1, 2, 46;
        --bs-body-color-rgb: 234, 247, 251;
        --bs-body-bg-rgb: 1, 2, 46;
        --bs-emphasis-color-rgb: 255, 255, 255;
        --bs-secondary-color-rgb: 166, 189, 211;
        --bs-secondary-bg-rgb: 11, 17, 88;
        --bs-tertiary-color-rgb: 166, 189, 211;
        --bs-tertiary-bg-rgb: 11, 17, 88;
        --bs-link-color-rgb: 144, 224, 239;
        --bs-link-hover-color-rgb: 255, 255, 255;

        color-scheme: dark;
    }
}

/* ---------------------------------------------------------------------------
   Bootstrap, pointed at the tokens (resolved per scheme, declared once)
   --------------------------------------------------------------------------- */

:root,
[data-bs-theme] {
    --bs-primary-text-emphasis: var(--elx-wash-ink);
    --bs-secondary-text-emphasis: var(--elx-ink);
    --bs-success-text-emphasis: var(--elx-wash-ink);
    --bs-info-text-emphasis: var(--elx-wash-ink);
    --bs-warning-text-emphasis: var(--elx-warn-ink);
    --bs-danger-text-emphasis: var(--elx-danger-ink);
    --bs-light-text-emphasis: var(--elx-ink);
    --bs-dark-text-emphasis: var(--elx-ink);

    --bs-primary-bg-subtle: var(--elx-wash);
    --bs-secondary-bg-subtle: var(--elx-subtle);
    --bs-success-bg-subtle: var(--elx-wash);
    --bs-info-bg-subtle: var(--elx-wash);
    --bs-warning-bg-subtle: var(--elx-warn-wash);
    --bs-danger-bg-subtle: var(--elx-danger-wash);
    --bs-light-bg-subtle: var(--elx-subtle);
    --bs-dark-bg-subtle: var(--elx-line);

    --bs-primary-border-subtle: var(--elx-label);
    --bs-secondary-border-subtle: var(--elx-line);
    --bs-success-border-subtle: var(--elx-label);
    --bs-info-border-subtle: var(--elx-label);
    --bs-warning-border-subtle: var(--elx-warn);
    --bs-danger-border-subtle: var(--elx-danger);
    --bs-light-border-subtle: var(--elx-line);
    --bs-dark-border-subtle: var(--elx-line-strong);

    --bs-font-sans-serif: var(--elx-font-sans);
    --bs-font-monospace: var(--elx-font-mono);
    --bs-body-font-family: var(--elx-font-sans);
    --bs-body-line-height: 1.6;
    --bs-body-color: var(--elx-ink);
    --bs-body-bg: var(--elx-bg);
    --bs-emphasis-color: var(--elx-ink);
    --bs-secondary-color: var(--elx-muted);
    --bs-secondary-bg: var(--elx-subtle);
    --bs-tertiary-color: var(--elx-muted);
    --bs-tertiary-bg: var(--elx-subtle);
    --bs-heading-color: var(--elx-ink);

    --bs-link-color: var(--elx-link);
    --bs-link-hover-color: var(--elx-link-hover);
    --bs-link-decoration: underline;
    --bs-code-color: var(--elx-ink);
    --bs-highlight-color: var(--elx-ink);
    --bs-highlight-bg: var(--elx-wash);

    --bs-border-color: var(--elx-line);
    --bs-border-color-translucent: var(--elx-line);
    --bs-border-radius: var(--elx-radius);
    --bs-border-radius-sm: var(--elx-radius);
    --bs-border-radius-lg: var(--elx-radius);
    --bs-border-radius-xl: var(--elx-radius);
    --bs-border-radius-xxl: var(--elx-radius);
    --bs-border-radius-2xl: var(--elx-radius);
    --bs-border-radius-pill: var(--elx-radius);

    --bs-box-shadow: var(--elx-shadow-md);
    --bs-box-shadow-sm: var(--elx-shadow-sm);
    --bs-box-shadow-lg: var(--elx-shadow-lg);

    --bs-focus-ring-width: 3px;
    --bs-focus-ring-color: var(--elx-ring);

    --bs-form-valid-color: var(--elx-label);
    --bs-form-valid-border-color: var(--elx-label);
    --bs-form-invalid-color: var(--elx-danger);
    --bs-form-invalid-border-color: var(--elx-danger);
}

/* ---------------------------------------------------------------------------
   Base
   --------------------------------------------------------------------------- */

body {
    font-family: var(--elx-font-sans);
    background: var(--elx-bg);
    color: var(--elx-ink);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--elx-font-sans);
    font-weight: 600;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

h5, h6, .h5, .h6 {
    font-weight: 600;
}

[dir="rtl"] :is(h1, h2, h3, h4, .h1, .h2, .h3, .h4) {
    letter-spacing: 0;
    line-height: 1.4;
}

code, kbd, pre, samp, .font-monospace {
    font-family: var(--elx-font-mono);
}

::selection {
    background: var(--elx-sky);
    color: var(--elx-navy);
}

:focus-visible {
    outline: 2px solid var(--elx-focus);
    outline-offset: 2px;
}

@media (forced-colors: active) {
    :focus-visible { outline: 3px solid Highlight; }
}

.text-secondary, .text-body-secondary, .text-muted {
    color: var(--elx-muted) !important;
}

.bg-body-tertiary {
    background-color: var(--elx-surface) !important;
}

.border, .border-top, .border-bottom, .border-start, .border-end {
    border-color: var(--elx-line) !important;
}

.lead {
    color: var(--elx-muted);
}

.shadow-sm { box-shadow: var(--elx-shadow-sm) !important; }
.shadow { box-shadow: var(--elx-shadow-md) !important; }
.shadow-lg { box-shadow: var(--elx-shadow-lg) !important; }

.rounded, .rounded-1, .rounded-2, .rounded-3, .rounded-4, .rounded-5, .rounded-pill {
    border-radius: var(--elx-radius) !important;
}

/* A mono, uppercase label above a heading (Arabic: the sans, no tracking). */
.elx-eyebrow {
    font-family: var(--elx-font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--elx-label);
}

[dir="rtl"] .elx-eyebrow {
    font-family: var(--elx-font-sans);
    font-size: 0.875rem;
    letter-spacing: 0;
    text-transform: none;
}

/* ---------------------------------------------------------------------------
   Brand lockup
   --------------------------------------------------------------------------- */

.elx-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--elx-ink);
    text-decoration: none;
}

.elx-brand:hover { color: var(--elx-ink); text-decoration: none; }

/* The product mark: the desktop application's own tile. */
.elx-brand-icon {
    width: 2.25rem;
    height: 2.25rem;
    flex: none;
}

.elx-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.elx-brand-name {
    font-size: 1.08rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.elx-brand-sub {
    font-family: var(--elx-font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--elx-muted);
}

[dir="rtl"] .elx-brand-sub {
    font-family: var(--elx-font-sans);
    font-size: 0.78rem;
    letter-spacing: 0;
    text-transform: none;
}

/* The company wordmark: ELIXTECHS in Plex Sans 600, tracked, always LTR. */
.elx-wordmark {
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    direction: ltr;
    unicode-bidi: isolate;
}

.elx-mark {
    width: 1rem;
    height: 1rem;
    flex: none;
}

/* ---------------------------------------------------------------------------
   Buttons — square, Plex Sans 500
   --------------------------------------------------------------------------- */

.btn {
    --bs-btn-font-family: var(--elx-font-sans);
    --bs-btn-font-weight: 500;
    --bs-btn-border-radius: var(--elx-radius);
    --bs-btn-padding-x: 1.1rem;
    --bs-btn-padding-y: 0.55rem;
    --bs-btn-focus-box-shadow: 0 0 0 3px var(--elx-ring);
}

.btn-sm {
    --bs-btn-border-radius: var(--elx-radius);
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.3rem;
}

.btn-lg {
    --bs-btn-border-radius: var(--elx-radius);
    --bs-btn-padding-x: 1.6rem;
    --bs-btn-padding-y: 0.8rem;
    --bs-btn-font-size: 1rem;
}

.btn-primary {
    --bs-btn-color: var(--elx-action-ink);
    --bs-btn-bg: var(--elx-action);
    --bs-btn-border-color: var(--elx-action);
    --bs-btn-hover-color: var(--elx-action-ink);
    --bs-btn-hover-bg: var(--elx-action-hover);
    --bs-btn-hover-border-color: var(--elx-action-hover);
    --bs-btn-active-color: var(--elx-action-ink);
    --bs-btn-active-bg: var(--elx-ice);
    --bs-btn-active-border-color: var(--elx-ice);
    --bs-btn-disabled-color: var(--elx-action-ink);
    --bs-btn-disabled-bg: var(--elx-action);
    --bs-btn-disabled-border-color: var(--elx-action);
}

.btn-secondary,
.btn-dark {
    --bs-btn-color: var(--elx-bg);
    --bs-btn-bg: var(--elx-ink);
    --bs-btn-border-color: var(--elx-ink);
    --bs-btn-hover-color: var(--elx-on-label);
    --bs-btn-hover-bg: var(--elx-label);
    --bs-btn-hover-border-color: var(--elx-label);
    --bs-btn-active-color: var(--elx-on-label);
    --bs-btn-active-bg: var(--elx-label);
    --bs-btn-active-border-color: var(--elx-label);
    --bs-btn-disabled-color: var(--elx-bg);
    --bs-btn-disabled-bg: var(--elx-ink);
    --bs-btn-disabled-border-color: var(--elx-ink);
}

.btn-success,
.btn-info {
    --bs-btn-color: var(--elx-on-label);
    --bs-btn-bg: var(--elx-label);
    --bs-btn-border-color: var(--elx-label);
    --bs-btn-hover-color: var(--elx-bg);
    --bs-btn-hover-bg: var(--elx-ink);
    --bs-btn-hover-border-color: var(--elx-ink);
    --bs-btn-active-color: var(--elx-bg);
    --bs-btn-active-bg: var(--elx-ink);
    --bs-btn-active-border-color: var(--elx-ink);
    --bs-btn-disabled-color: var(--elx-on-label);
    --bs-btn-disabled-bg: var(--elx-label);
    --bs-btn-disabled-border-color: var(--elx-label);
}

.btn-danger {
    --bs-btn-color: var(--elx-on-danger);
    --bs-btn-bg: var(--elx-danger);
    --bs-btn-border-color: var(--elx-danger);
    --bs-btn-hover-color: var(--elx-on-danger);
    --bs-btn-hover-bg: var(--elx-danger-ink);
    --bs-btn-hover-border-color: var(--elx-danger-ink);
    --bs-btn-active-color: var(--elx-on-danger);
    --bs-btn-active-bg: var(--elx-danger-ink);
    --bs-btn-active-border-color: var(--elx-danger-ink);
    --bs-btn-disabled-color: var(--elx-on-danger);
    --bs-btn-disabled-bg: var(--elx-danger);
    --bs-btn-disabled-border-color: var(--elx-danger);
    --bs-btn-focus-box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.35);
}

.btn-warning {
    --bs-btn-color: #03045e;
    --bs-btn-bg: var(--elx-warn);
    --bs-btn-border-color: var(--elx-warn);
    --bs-btn-hover-color: #03045e;
    --bs-btn-hover-bg: #f2b33d;
    --bs-btn-hover-border-color: #f2b33d;
    --bs-btn-active-color: #03045e;
    --bs-btn-active-bg: #ffd27a;
    --bs-btn-active-border-color: #ffd27a;
}

.btn-light {
    --bs-btn-color: var(--elx-ink);
    --bs-btn-bg: var(--elx-subtle);
    --bs-btn-border-color: var(--elx-line);
    --bs-btn-hover-color: var(--elx-ink);
    --bs-btn-hover-bg: var(--elx-line);
    --bs-btn-hover-border-color: var(--elx-line-strong);
    --bs-btn-active-color: var(--elx-ink);
    --bs-btn-active-bg: var(--elx-line);
    --bs-btn-active-border-color: var(--elx-line-strong);
}

.btn-outline-primary,
.btn-outline-success,
.btn-outline-info {
    --bs-btn-color: var(--elx-label);
    --bs-btn-border-color: var(--elx-label);
    --bs-btn-hover-color: var(--elx-on-label);
    --bs-btn-hover-bg: var(--elx-label);
    --bs-btn-hover-border-color: var(--elx-label);
    --bs-btn-active-color: var(--elx-on-label);
    --bs-btn-active-bg: var(--elx-label);
    --bs-btn-active-border-color: var(--elx-label);
    --bs-btn-disabled-color: var(--elx-label);
    --bs-btn-disabled-border-color: var(--elx-label);
}

/* The secondary action: ink on a hairline outline. */
.btn-outline-secondary {
    --bs-btn-color: var(--elx-ink);
    --bs-btn-border-color: var(--elx-line-strong);
    --bs-btn-hover-color: var(--elx-ink);
    --bs-btn-hover-bg: var(--elx-subtle);
    --bs-btn-hover-border-color: var(--elx-ink);
    --bs-btn-active-color: var(--elx-ink);
    --bs-btn-active-bg: var(--elx-line);
    --bs-btn-active-border-color: var(--elx-ink);
    --bs-btn-disabled-color: var(--elx-muted);
    --bs-btn-disabled-border-color: var(--elx-line);
}

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

.btn-outline-warning {
    --bs-btn-color: var(--elx-warn-ink);
    --bs-btn-border-color: var(--elx-warn);
    --bs-btn-hover-color: #03045e;
    --bs-btn-hover-bg: var(--elx-warn);
    --bs-btn-hover-border-color: var(--elx-warn);
    --bs-btn-active-color: #03045e;
    --bs-btn-active-bg: var(--elx-warn);
    --bs-btn-active-border-color: var(--elx-warn);
}

.btn-outline-dark,
.btn-outline-light {
    --bs-btn-color: var(--elx-ink);
    --bs-btn-border-color: var(--elx-ink);
    --bs-btn-hover-color: var(--elx-bg);
    --bs-btn-hover-bg: var(--elx-ink);
    --bs-btn-hover-border-color: var(--elx-ink);
    --bs-btn-active-color: var(--elx-bg);
    --bs-btn-active-bg: var(--elx-ink);
    --bs-btn-active-border-color: var(--elx-ink);
}

.btn-link {
    --bs-btn-color: var(--elx-link);
    --bs-btn-hover-color: var(--elx-link-hover);
    --bs-btn-active-color: var(--elx-link-hover);
    --bs-btn-disabled-color: var(--elx-muted);
}

.btn-close:focus {
    box-shadow: 0 0 0 3px var(--elx-ring);
}

/* ---------------------------------------------------------------------------
   Cards, panels, list groups — hairline, square, flat
   --------------------------------------------------------------------------- */

.card {
    --bs-card-border-width: 1px;
    --bs-card-border-color: var(--elx-line);
    --bs-card-border-radius: 0;
    --bs-card-inner-border-radius: 0;
    --bs-card-bg: var(--elx-surface);
    --bs-card-color: var(--elx-ink);
    --bs-card-cap-bg: transparent;
    --bs-card-cap-color: var(--elx-ink);
    --bs-card-cap-padding-y: 0.9rem;
    --bs-card-cap-padding-x: 1.25rem;
    --bs-card-spacer-y: 1.2rem;
    --bs-card-spacer-x: 1.25rem;
    box-shadow: none;
}

.card-header {
    border-bottom: 1px solid var(--elx-line);
    font-weight: 600;
}

.card-footer {
    border-top: 1px solid var(--elx-line);
}

.list-group {
    --bs-list-group-color: var(--elx-ink);
    --bs-list-group-bg: var(--elx-surface);
    --bs-list-group-border-color: var(--elx-line);
    --bs-list-group-border-radius: 0;
    --bs-list-group-action-color: var(--elx-ink);
    --bs-list-group-action-hover-color: var(--elx-ink);
    --bs-list-group-action-hover-bg: var(--elx-subtle);
    --bs-list-group-action-active-bg: var(--elx-line);
    --bs-list-group-active-bg: var(--elx-label);
    --bs-list-group-active-border-color: var(--elx-label);
    --bs-list-group-active-color: var(--elx-on-label);
    --bs-list-group-disabled-color: var(--elx-muted);
}

/* ---------------------------------------------------------------------------
   Navigation
   --------------------------------------------------------------------------- */

.navbar {
    --bs-navbar-padding-y: 0.6rem;
    --bs-navbar-color: var(--elx-muted);
    --bs-navbar-hover-color: var(--elx-ink);
    --bs-navbar-active-color: var(--elx-ink);
    --bs-navbar-brand-color: var(--elx-ink);
    --bs-navbar-brand-hover-color: var(--elx-ink);
    --bs-navbar-toggler-border-color: var(--elx-line-strong);
    --bs-navbar-toggler-border-radius: var(--elx-radius);
    --bs-navbar-toggler-focus-width: 3px;
}

.navbar .nav-link {
    padding-inline: 0.75rem !important;
    font-size: 0.9rem;
    font-weight: 500;
    border-bottom: 2px solid transparent;
}

.navbar .nav-link.active {
    border-bottom-color: var(--elx-cyan);
}

/* The navy band: the Portal's header and footer and the Manager's console bar.
   Same colours in both schemes, like the company site's header. */
.navbar.bg-dark,
.navbar-dark,
.elx-band .navbar,
.navbar.elx-band {
    --bs-dark-rgb: 3, 4, 94;
    --bs-navbar-color: var(--elx-band-body);
    --bs-navbar-hover-color: #ffffff;
    --bs-navbar-active-color: #ffffff;
    --bs-navbar-brand-color: #ffffff;
    --bs-navbar-brand-hover-color: #ffffff;
    --bs-navbar-toggler-border-color: rgba(144, 224, 239, 0.35);
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23caf0f8' stroke-linecap='square' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar.bg-dark {
    background-color: var(--elx-band) !important;
    border-bottom: 1px solid var(--elx-band-line);
}

.elx-band :is(.elx-brand, .elx-brand:hover),
.navbar.bg-dark :is(.elx-brand, .elx-brand:hover) { color: #ffffff; }
.elx-band .elx-brand-sub,
.navbar.bg-dark .elx-brand-sub { color: var(--elx-band-label); }
.navbar.bg-dark .badge.text-bg-secondary {
    background: rgba(144, 224, 239, 0.16) !important;
    color: var(--elx-band-body) !important;
}
.elx-band :focus-visible,
.navbar.bg-dark :focus-visible { outline-color: var(--elx-sky); }

.dropdown-menu {
    --bs-dropdown-bg: var(--elx-surface);
    --bs-dropdown-color: var(--elx-ink);
    --bs-dropdown-border-color: var(--elx-line);
    --bs-dropdown-border-radius: 0;
    --bs-dropdown-inner-border-radius: 0;
    --bs-dropdown-link-color: var(--elx-ink);
    --bs-dropdown-link-hover-color: var(--elx-ink);
    --bs-dropdown-link-hover-bg: var(--elx-subtle);
    --bs-dropdown-link-active-color: var(--elx-on-label);
    --bs-dropdown-link-active-bg: var(--elx-label);
    --bs-dropdown-divider-bg: var(--elx-line);
    --bs-dropdown-box-shadow: var(--elx-shadow-lg);
    box-shadow: var(--elx-shadow-lg);
}

.dropdown-menu-dark {
    --bs-dropdown-bg: var(--elx-band);
    --bs-dropdown-color: var(--elx-band-body);
    --bs-dropdown-border-color: var(--elx-band-line);
    --bs-dropdown-link-color: var(--elx-band-body);
    --bs-dropdown-link-hover-color: #ffffff;
    --bs-dropdown-link-hover-bg: var(--elx-band-raised);
    --bs-dropdown-link-active-color: var(--elx-action-ink);
    --bs-dropdown-link-active-bg: var(--elx-action);
    --bs-dropdown-divider-bg: var(--elx-band-line);
}

.nav-tabs {
    --bs-nav-tabs-border-color: var(--elx-line);
    --bs-nav-tabs-border-radius: 0;
    --bs-nav-tabs-link-hover-border-color: var(--elx-line) var(--elx-line) var(--elx-line);
    --bs-nav-tabs-link-active-color: var(--elx-ink);
    --bs-nav-tabs-link-active-bg: var(--elx-surface);
    --bs-nav-tabs-link-active-border-color: var(--elx-line) var(--elx-line) var(--elx-surface);
    --bs-nav-link-color: var(--elx-muted);
    --bs-nav-link-hover-color: var(--elx-ink);
}

.nav-tabs .nav-link.active { box-shadow: inset 0 2px 0 var(--elx-cyan); }

.nav-pills {
    --bs-nav-pills-border-radius: 0;
    --bs-nav-pills-link-active-bg: var(--elx-label);
    --bs-nav-pills-link-active-color: var(--elx-on-label);
    --bs-nav-link-color: var(--elx-muted);
    --bs-nav-link-hover-color: var(--elx-ink);
}

.pagination {
    --bs-pagination-color: var(--elx-link);
    --bs-pagination-bg: var(--elx-surface);
    --bs-pagination-border-color: var(--elx-line);
    --bs-pagination-hover-color: var(--elx-link-hover);
    --bs-pagination-hover-bg: var(--elx-subtle);
    --bs-pagination-hover-border-color: var(--elx-line);
    --bs-pagination-focus-color: var(--elx-link-hover);
    --bs-pagination-focus-bg: var(--elx-subtle);
    --bs-pagination-focus-box-shadow: 0 0 0 3px var(--elx-ring);
    --bs-pagination-active-color: var(--elx-on-label);
    --bs-pagination-active-bg: var(--elx-label);
    --bs-pagination-active-border-color: var(--elx-label);
    --bs-pagination-disabled-color: var(--elx-muted);
    --bs-pagination-disabled-bg: var(--elx-subtle);
    --bs-pagination-disabled-border-color: var(--elx-line);
    --bs-pagination-border-radius: 0;
}

/* ---------------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------------- */

.form-control,
.form-select {
    background-color: var(--elx-surface);
    border-color: var(--elx-line-strong);
    border-radius: var(--elx-radius);
    color: var(--elx-ink);
}

.form-control-sm, .form-select-sm,
.form-control-lg, .form-select-lg,
textarea.form-control { border-radius: var(--elx-radius); }

.form-control:hover,
.form-select:hover { border-color: var(--elx-ink); }

.form-control:focus,
.form-select:focus {
    background-color: var(--elx-surface);
    border-color: var(--elx-label);
    box-shadow: 0 0 0 3px var(--elx-ring);
    color: var(--elx-ink);
}

.form-control::placeholder { color: var(--elx-muted); opacity: 1; }

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
    background-color: var(--elx-subtle);
}

.input-group-text {
    background: var(--elx-subtle);
    border-color: var(--elx-line-strong);
    border-radius: var(--elx-radius);
    color: var(--elx-muted);
}

.form-label {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--elx-ink);
}

.form-text { color: var(--elx-muted); }

.form-check-input {
    border-color: var(--elx-line-strong);
    background-color: var(--elx-surface);
    border-radius: var(--elx-radius);
}

.form-check-input[type="checkbox"] { border-radius: var(--elx-radius); }

/* Checked controls are the action: cyan with a navy mark, in both schemes. */
.form-check-input:checked {
    background-color: var(--elx-action);
    border-color: var(--elx-label);
}

.form-check-input:checked[type="checkbox"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%2303045e' stroke-linecap='square' stroke-linejoin='miter' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.form-check-input:checked[type="radio"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%2303045e'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2303045e'/%3e%3c/svg%3e");
}

.form-check-input:focus {
    border-color: var(--elx-label);
    box-shadow: 0 0 0 3px var(--elx-ring);
}

.form-range::-webkit-slider-thumb { background-color: var(--elx-label); }
.form-range::-moz-range-thumb { background-color: var(--elx-label); }

.was-validated .form-control:invalid,
.form-control.is-invalid,
.input-validation-error {
    border-color: var(--elx-danger);
    background-color: var(--elx-danger-wash);
}

.invalid-feedback,
.field-validation-error,
.text-danger {
    color: var(--elx-danger) !important;
    font-weight: 500;
}

.validation-summary-errors ul {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Tables — mono header labels over hairline rows
   --------------------------------------------------------------------------- */

.table {
    --bs-table-color: var(--elx-ink);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--elx-line);
    --bs-table-striped-bg: var(--elx-subtle);
    --bs-table-striped-color: var(--elx-ink);
    --bs-table-hover-bg: var(--elx-subtle);
    --bs-table-hover-color: var(--elx-ink);
    --bs-table-active-bg: var(--elx-wash);
    --bs-table-active-color: var(--elx-ink);
}

.table > thead > tr > th,
.table > thead > tr > td {
    font-family: var(--elx-font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--elx-muted);
    border-bottom-color: var(--elx-line);
    white-space: nowrap;
}

[dir="rtl"] .table > thead > tr > th {
    font-family: var(--elx-font-sans);
    letter-spacing: 0;
    text-transform: none;
    font-size: 0.85rem;
}

.table-light {
    --bs-table-bg: var(--elx-subtle);
    --bs-table-color: var(--elx-ink);
    --bs-table-border-color: var(--elx-line);
}

.table-dark {
    --bs-table-bg: var(--elx-band);
    --bs-table-color: var(--elx-band-body);
    --bs-table-border-color: var(--elx-band-line);
}

.table-success,
.table-info { --bs-table-bg: var(--elx-wash); --bs-table-color: var(--elx-wash-ink); }
.table-warning { --bs-table-bg: var(--elx-warn-wash); --bs-table-color: var(--elx-warn-ink); }
.table-danger { --bs-table-bg: var(--elx-danger-wash); --bs-table-color: var(--elx-danger-ink); }

/* ---------------------------------------------------------------------------
   Alerts, badges, progress
   --------------------------------------------------------------------------- */

.alert {
    --bs-alert-border-radius: 0;
    --bs-alert-padding-x: 1.15rem;
    --bs-alert-border-color: var(--elx-line);
    border-inline-start-width: 3px;
}

.alert-primary,
.alert-success,
.alert-info      { --bs-alert-bg: var(--elx-wash); --bs-alert-color: var(--elx-wash-ink); --bs-alert-link-color: var(--elx-wash-ink); border-inline-start-color: var(--elx-label); }
.alert-secondary,
.alert-light     { --bs-alert-bg: var(--elx-subtle); --bs-alert-color: var(--elx-ink); --bs-alert-link-color: var(--elx-ink); }
.alert-warning   { --bs-alert-bg: var(--elx-warn-wash); --bs-alert-color: var(--elx-warn-ink); --bs-alert-link-color: var(--elx-warn-ink); border-inline-start-color: var(--elx-warn); }
.alert-danger    { --bs-alert-bg: var(--elx-danger-wash); --bs-alert-color: var(--elx-danger-ink); --bs-alert-link-color: var(--elx-danger-ink); border-inline-start-color: var(--elx-danger); }
.alert-dark      { --bs-alert-bg: var(--elx-band); --bs-alert-color: var(--elx-band-body); --bs-alert-link-color: #ffffff; --bs-alert-border-color: var(--elx-band); }

.badge {
    --bs-badge-border-radius: var(--elx-radius);
    --bs-badge-padding-x: 0.55em;
    --bs-badge-padding-y: 0.35em;
    --bs-badge-font-weight: 500;
    font-family: var(--elx-font-mono);
    letter-spacing: 0.04em;
}

[dir="rtl"] .badge { font-family: var(--elx-font-sans); letter-spacing: 0; }

/* Badges are tags: a wash with ink from the same family, never colour alone. */
.text-bg-primary,
.text-bg-success,
.text-bg-info      { color: var(--elx-wash-ink) !important; background-color: var(--elx-wash) !important; box-shadow: inset 0 0 0 1px var(--elx-label); }
.text-bg-secondary,
.text-bg-light     { color: var(--elx-ink) !important; background-color: var(--elx-subtle) !important; box-shadow: inset 0 0 0 1px var(--elx-line); }
.text-bg-warning   { color: var(--elx-warn-ink) !important; background-color: var(--elx-warn-wash) !important; box-shadow: inset 0 0 0 1px var(--elx-warn); }
.text-bg-danger    { color: var(--elx-on-danger) !important; background-color: var(--elx-danger) !important; }
.text-bg-dark      { color: var(--elx-band-body) !important; background-color: var(--elx-band) !important; }

.progress,
.progress-stacked {
    --bs-progress-bg: var(--elx-line);
    --bs-progress-border-radius: 0;
    --bs-progress-bar-bg: var(--elx-label);
    --bs-progress-bar-color: var(--elx-on-label);
}

/* ---------------------------------------------------------------------------
   Modals, toasts, tooltips, popovers, accordions
   --------------------------------------------------------------------------- */

.modal {
    --bs-modal-bg: var(--elx-surface);
    --bs-modal-color: var(--elx-ink);
    --bs-modal-border-width: 1px;
    --bs-modal-border-color: var(--elx-line);
    --bs-modal-border-radius: 0;
    --bs-modal-inner-border-radius: 0;
    --bs-modal-header-border-color: var(--elx-line);
    --bs-modal-footer-border-color: var(--elx-line);
    --bs-modal-box-shadow: var(--elx-shadow-lg);
}

.modal-backdrop { --bs-backdrop-bg: #01022e; --bs-backdrop-opacity: 0.6; }

.toast {
    --bs-toast-bg: var(--elx-surface);
    --bs-toast-color: var(--elx-ink);
    --bs-toast-border-color: var(--elx-line);
    --bs-toast-border-radius: 0;
    --bs-toast-header-bg: var(--elx-subtle);
    --bs-toast-header-color: var(--elx-ink);
}

.tooltip { --bs-tooltip-bg: #03045e; --bs-tooltip-color: #ffffff; --bs-tooltip-border-radius: 0; }

.popover {
    --bs-popover-bg: var(--elx-surface);
    --bs-popover-border-color: var(--elx-line);
    --bs-popover-border-radius: 0;
    --bs-popover-inner-border-radius: 0;
    --bs-popover-header-bg: var(--elx-subtle);
    --bs-popover-body-color: var(--elx-ink);
}

.accordion {
    --bs-accordion-color: var(--elx-ink);
    --bs-accordion-bg: var(--elx-surface);
    --bs-accordion-border-color: var(--elx-line);
    --bs-accordion-border-radius: 0;
    --bs-accordion-inner-border-radius: 0;
    --bs-accordion-btn-color: var(--elx-ink);
    --bs-accordion-btn-bg: var(--elx-surface);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 3px var(--elx-ring);
    --bs-accordion-active-color: var(--elx-ink);
    --bs-accordion-active-bg: var(--elx-subtle);
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2303045e' stroke-linecap='square' stroke-linejoin='miter'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230077b6' stroke-linecap='square' stroke-linejoin='miter'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}

hr {
    border-color: var(--elx-line);
    opacity: 1;
}

/* Keys, checksums, versions and other machine text. */
.mono,
.checksum,
.key-blob,
.fingerprint {
    font-family: var(--elx-font-mono);
}

/* ---------------------------------------------------------------------------
   Utilities replacing inline styles, which the CSP forbids
   --------------------------------------------------------------------------- */

.elx-narrow { max-width: 26rem; }
.elx-pre-wrap { white-space: pre-wrap; }
.elx-max-20 { max-width: 20rem; }

@media print {
    body { background: #fff; }
    .navbar { display: none; }
}

/* ---------------------------------------------------------------------------
   Light and dark switch

   js/elx-theme.js (loaded first in <head>) is the shared ElixTechs switch. It
   sets data-bs-theme and data-theme on <html> from the elx-theme cookie on
   .elixtechs.com, and falls back to the system setting. Its toggle is any
   [data-elx-theme-toggle] element; the icons below follow data-theme-choice.
   --------------------------------------------------------------------------- */

.elx-theme-toggle {
    display: inline-grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    padding: 0;
    border: 1px solid var(--elx-line-strong);
    border-radius: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.elx-theme-toggle:hover { border-color: currentColor; }
.elx-theme-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.elx-ti { inline-size: 1.1rem; block-size: 1.1rem; display: none; }
html:not([data-theme-choice]) .elx-ti-system,
html[data-theme-choice="system"] .elx-ti-system,
html[data-theme-choice="light"] .elx-ti-light,
html[data-theme-choice="dark"] .elx-ti-dark { display: block; }

/* In a navy bar it takes the links' colour and the band's hairline. */
.navbar .elx-theme-toggle { flex: none; color: var(--bs-navbar-color); }
.navbar .elx-theme-toggle:hover { color: var(--bs-navbar-hover-color); }
.navbar.bg-dark .elx-theme-toggle,
.elx-band .elx-theme-toggle { border-color: rgba(144, 224, 239, 0.3); }
.navbar.bg-dark .elx-theme-toggle:hover,
.elx-band .elx-theme-toggle:hover { border-color: var(--elx-sky); }

/* Dark-only details that live in SVG data URIs, which cannot read tokens.
   Bootstrap handles .btn-close and the select arrow under data-bs-theme; the
   media-query copies cover a page where elx-theme.js did not run. */

[data-bs-theme="dark"] .accordion {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23eaf7fb' stroke-linecap='square' stroke-linejoin='miter'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2390e0ef' stroke-linecap='square' stroke-linejoin='miter'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}

[data-bs-theme="dark"] .form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23eaf7fb' stroke-linecap='square' stroke-linejoin='miter' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .accordion {
        --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23eaf7fb' stroke-linecap='square' stroke-linejoin='miter'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
        --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2390e0ef' stroke-linecap='square' stroke-linejoin='miter'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
    }

    :root:not([data-theme]) .form-select {
        --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23eaf7fb' stroke-linecap='square' stroke-linejoin='miter' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    }

    :root:not([data-theme]) .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

    :root:not([data-theme]) .form-switch .form-check-input:not(:checked):not(:focus) {
        --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28234, 247, 251, 0.45%29'/%3e%3c/svg%3e");
    }
}

/* Paper is white whatever the screen was showing: print with navy ink. */
@media print {
    [data-bs-theme="dark"] {
        --elx-bg: #ffffff;
        --elx-surface: #ffffff;
        --elx-subtle: #eef4f8;
        --elx-line: #dce7ee;
        --elx-ink: #03045e;
        --elx-muted: #4a5b76;
        --elx-label: #0077b6;
        --elx-link: #0077b6;
        color-scheme: light;
    }
}