/* ResQon design system (web).
   One place for the brand: the tokens below follow "ResQon – smjernice za redizajn" (v1.0, Oct 2026)
   and are mapped onto Tabler's own variables, so every existing view picks them up. Components use
   the tokens, never a hex of their own. Loaded after Tabler in _Layout.cshtml. */

/* ---------- Font: Inter (variable), self-hosted, OFL — see fonts/inter/LICENSE.txt ---------- */
@font-face {
    font-family: "Inter Var";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/inter/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: "Inter Var";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/inter/inter-latin-wght-normal.woff2") format("woff2-variations");
    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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
    /* Brand. --rq-brand is the logo red (accents, active navigation, indicators); white text on it
       is only ~4.2:1, so filled buttons use --rq-brand-strong (~5:1, WCAG AA). */
    --rq-brand: #ef233c;
    --rq-brand-rgb: 239, 35, 60;
    --rq-brand-strong: #d91e35;
    --rq-brand-strong-rgb: 217, 30, 53;
    --rq-brand-pressed: #b9142a;
    --rq-brand-tint: #fdecee;
    --rq-navy: #142333;
    --rq-navy-rgb: 20, 35, 51;
    --rq-navy-deep: #0b1722;

    /* Surfaces and text */
    --rq-bg: #f4f7fa;
    --rq-surface: #ffffff;
    --rq-surface-alt: #f8fafc;
    --rq-text: #172433;
    --rq-text-rgb: 23, 36, 51;
    --rq-text-muted: #5a6a7b;
    --rq-text-muted-rgb: 90, 106, 123;
    --rq-border: #dce4ec;
    --rq-border-soft: #e9eef3;
    --rq-link: #1d4ed8;
    --rq-link-hover: #1e40af;
    --rq-focus: #2563eb;
    --rq-focus-ring: 0 0 0 3px rgba(37, 99, 235, .35);

    /* Semantic status: text / background */
    --rq-success: #15803d;  --rq-success-bg: #dcfce7;
    --rq-info: #1d4ed8;     --rq-info-bg: #dbeafe;
    --rq-pending: #b45309;  --rq-pending-bg: #fef3c7;
    --rq-warning: #c2410c;  --rq-warning-bg: #ffedd5;  --rq-warning-pressed: #9a3412;
    --rq-danger: #b91c1c;   --rq-danger-bg: #fee2e2;
    --rq-neutral: #475569;  --rq-neutral-bg: #f1f5f9;
    --rq-special: #6d28d9;  --rq-special-bg: #f3e8ff;

    /* Shape, spacing, motion */
    --rq-radius-control: 8px;
    --rq-radius-card: 12px;
    --rq-radius-modal: 16px;
    --rq-radius-badge: 6px;
    --rq-space-1: 4px; --rq-space-2: 8px; --rq-space-3: 12px; --rq-space-4: 16px;
    --rq-space-6: 24px; --rq-space-8: 32px; --rq-space-10: 40px;
    --rq-control-height: 2.5rem;  /* 40 px */
    --rq-row-height: 2.875rem;    /* 46 px */
    --rq-shadow-float: 0 10px 30px -8px rgba(11, 23, 34, .22), 0 2px 6px rgba(11, 23, 34, .08);
    --rq-duration: 150ms;

    /* Sidebar */
    --rq-sidebar-width: 15rem;
    --rq-sidebar-text: rgba(255, 255, 255, .72);
    --rq-sidebar-label: rgba(255, 255, 255, .45);
    --rq-sidebar-hover: rgba(255, 255, 255, .06);
    --rq-sidebar-active: rgba(239, 35, 60, .16);
}

/* ---------- Tokens → Tabler (light theme: the page) ---------- */
:root,
[data-bs-theme=light] {
    --tblr-font-sans-serif: "Inter Var", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --tblr-body-bg: var(--rq-bg);
    --tblr-body-color: var(--rq-text);
    --tblr-body-color-rgb: var(--rq-text-rgb);
    --tblr-emphasis-color: var(--rq-navy);
    --tblr-bg-surface: var(--rq-surface);
    --tblr-bg-surface-secondary: var(--rq-surface-alt);
    --tblr-bg-surface-tertiary: var(--rq-surface-alt);
    --tblr-border-color: var(--rq-border);
    --tblr-border-color-translucent: var(--rq-border-soft);
    --tblr-border-radius: var(--rq-radius-control);
    --tblr-border-radius-sm: 6px;
    --tblr-border-radius-lg: var(--rq-radius-card);

    --tblr-primary: var(--rq-brand-strong);
    --tblr-primary-rgb: var(--rq-brand-strong-rgb);
    --tblr-primary-fg: #ffffff;
    --tblr-primary-darken: var(--rq-brand-pressed);
    --tblr-primary-lt: var(--rq-brand-tint);
    --tblr-primary-lt-rgb: 253, 236, 238;
    --tblr-primary-text-emphasis: var(--rq-brand-pressed);
    --tblr-primary-bg-subtle: var(--rq-brand-tint);
    --tblr-primary-border-subtle: #f7b8c0;

    --tblr-secondary: var(--rq-text-muted);
    --tblr-secondary-rgb: var(--rq-text-muted-rgb);
    --tblr-secondary-color: var(--rq-text-muted);
    --tblr-muted: var(--rq-text-muted);
    --tblr-muted-rgb: var(--rq-text-muted-rgb);
    --tblr-secondary-lt-rgb: 241, 245, 249;
    --tblr-dark: var(--rq-navy);
    --tblr-dark-rgb: var(--rq-navy-rgb);

    --tblr-link-color: var(--rq-link);
    --tblr-link-color-rgb: 29, 78, 216;
    --tblr-link-hover-color: var(--rq-link-hover);
    --tblr-link-hover-color-rgb: 30, 64, 175;
    --tblr-focus-ring-color: rgba(37, 99, 235, .35);

    /* Status colours: Tabler's named colours (bg-green, bg-green-lt, text-red …, used across the
       views) now speak the semantic palette, so badges and alerts read the same everywhere. */
    --tblr-green: var(--rq-success);   --tblr-green-rgb: 21, 128, 61;   --tblr-green-lt: var(--rq-success-bg); --tblr-green-lt-rgb: 220, 252, 231;
    --tblr-success: var(--rq-success); --tblr-success-rgb: 21, 128, 61; --tblr-success-lt: var(--rq-success-bg); --tblr-success-lt-rgb: 220, 252, 231;
    --tblr-blue: var(--rq-info);       --tblr-blue-rgb: 29, 78, 216;    --tblr-blue-lt: var(--rq-info-bg);     --tblr-blue-lt-rgb: 219, 234, 254;
    --tblr-azure: #0369a1;             --tblr-azure-rgb: 3, 105, 161;   --tblr-azure-lt: #e0f2fe;              --tblr-azure-lt-rgb: 224, 242, 254;
    --tblr-info: var(--rq-info);       --tblr-info-rgb: 29, 78, 216;    --tblr-info-lt: var(--rq-info-bg);     --tblr-info-lt-rgb: 219, 234, 254;
    --tblr-yellow: var(--rq-pending);  --tblr-yellow-rgb: 180, 83, 9;   --tblr-yellow-lt: var(--rq-pending-bg); --tblr-yellow-lt-rgb: 254, 243, 199;
    --tblr-orange: var(--rq-warning);  --tblr-orange-rgb: 194, 65, 12;  --tblr-orange-lt: var(--rq-warning-bg); --tblr-orange-lt-rgb: 255, 237, 213;
    --tblr-warning: var(--rq-warning); --tblr-warning-rgb: 194, 65, 12; --tblr-warning-lt: var(--rq-warning-bg); --tblr-warning-lt-rgb: 255, 237, 213;
    --tblr-red: var(--rq-danger);      --tblr-red-rgb: 185, 28, 28;     --tblr-red-lt: var(--rq-danger-bg);    --tblr-red-lt-rgb: 254, 226, 226;
    --tblr-danger: var(--rq-danger);   --tblr-danger-rgb: 185, 28, 28;  --tblr-danger-lt: var(--rq-danger-bg); --tblr-danger-lt-rgb: 254, 226, 226;
    --tblr-purple: var(--rq-special);  --tblr-purple-rgb: 109, 40, 217; --tblr-purple-lt: var(--rq-special-bg); --tblr-purple-lt-rgb: 243, 232, 255;
    /* The other named colours, darkened to AA on their light tints (used for groups and kinds). */
    --tblr-lime: #4d7c0f;   --tblr-lime-rgb: 77, 124, 15;   --tblr-lime-lt: #ecfccb;   --tblr-lime-lt-rgb: 236, 252, 203;
    --tblr-teal: #0f766e;   --tblr-teal-rgb: 15, 118, 110;  --tblr-teal-lt: #ccfbf1;   --tblr-teal-lt-rgb: 204, 251, 241;
    --tblr-cyan: #0e7490;   --tblr-cyan-rgb: 14, 116, 144;  --tblr-cyan-lt: #cffafe;   --tblr-cyan-lt-rgb: 207, 250, 254;
    --tblr-indigo: #4338ca; --tblr-indigo-rgb: 67, 56, 202; --tblr-indigo-lt: #e0e7ff; --tblr-indigo-lt-rgb: 224, 231, 255;
    --tblr-pink: #be185d;   --tblr-pink-rgb: 190, 24, 93;   --tblr-pink-lt: #fce7f3;   --tblr-pink-lt-rgb: 252, 231, 243;
    --tblr-success-text-emphasis: #14532d; --tblr-success-bg-subtle: var(--rq-success-bg); --tblr-success-border-subtle: #bbf7d0;
    --tblr-info-text-emphasis: #1e3a8a;    --tblr-info-bg-subtle: var(--rq-info-bg);       --tblr-info-border-subtle: #bfdbfe;
    --tblr-warning-text-emphasis: #7c2d12; --tblr-warning-bg-subtle: var(--rq-warning-bg); --tblr-warning-border-subtle: #fed7aa;
    --tblr-danger-text-emphasis: #7f1d1d;  --tblr-danger-bg-subtle: var(--rq-danger-bg);   --tblr-danger-border-subtle: #fecaca;

    --tblr-box-shadow-dropdown: var(--rq-shadow-float);
}

/* ---------- Base ---------- */
body {
    font-feature-settings: "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
}
.font-monospace, .tabular, code {
    font-variant-numeric: tabular-nums;
}
table, .tabular { font-variant-numeric: tabular-nums; }
a { transition: color var(--rq-duration); }
::selection { background: rgba(var(--rq-brand-rgb), .18); }

/* One focus look everywhere, distinct from the red of errors and the brand. */
:focus-visible { outline: none; }
a:focus-visible, button:focus-visible, .btn:focus-visible, [tabindex]:focus-visible,
summary:focus-visible, .nav-link:focus-visible, .page-link:focus-visible, .dropdown-item:focus-visible {
    outline: 2px solid var(--rq-focus);
    outline-offset: 2px;
    box-shadow: none;
}
.form-control:focus, .form-select:focus, .ts-wrapper.focus .ts-control {
    border-color: var(--rq-focus) !important;
    box-shadow: var(--rq-focus-ring) !important;
}
.form-check-input:focus { border-color: var(--rq-focus); box-shadow: var(--rq-focus-ring); }
.form-check-input:checked { background-color: var(--rq-navy); border-color: var(--rq-navy); }
.form-switch .form-check-input:checked { background-color: var(--rq-brand-strong); border-color: var(--rq-brand-strong); }

/* ---------- Typography scale ---------- */
.page-title { font-size: 1.625rem; font-weight: 700; line-height: 1.25; color: var(--rq-navy); letter-spacing: -.01em; }
.page-subtitle { color: var(--rq-text-muted); font-size: .875rem; margin-top: 2px; }
.page-pretitle { font-size: .75rem; letter-spacing: .06em; color: var(--rq-text-muted); }
.card-title { font-size: 1rem; font-weight: 600; color: var(--rq-navy); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--rq-navy); }
.text-secondary, .text-muted { color: var(--rq-text-muted) !important; }
.small, small { font-size: .8125rem; }
.form-label { font-size: .8125rem; font-weight: 600; color: var(--rq-text); margin-bottom: 6px; }
.form-hint { color: var(--rq-text-muted); font-size: .8125rem; }

/* ---------- Application shell: sidebar ---------- */
.navbar-vertical.rq-sidebar {
    --tblr-navbar-bg: var(--rq-navy);
    --tblr-navbar-color: var(--rq-sidebar-text);
    --tblr-navbar-hover-color: #ffffff;
    --tblr-navbar-active-color: #ffffff;
    --tblr-navbar-active-bg: var(--rq-sidebar-active);
    --tblr-navbar-border-color: transparent;
    --tblr-border-color: rgba(255, 255, 255, .08);
    width: var(--rq-sidebar-width);
    background: var(--rq-navy);
    box-shadow: none;
}
.rq-sidebar .navbar-brand { padding: 1.25rem 1rem .75rem; justify-content: flex-start; }
.rq-sidebar .navbar-brand img { height: 2.5rem; width: auto; max-width: 100%; }
.rq-sidebar .rq-user {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: .75rem 1rem 1rem; margin: 0 .75rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.rq-sidebar .rq-user .avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, .12); }
.rq-sidebar .rq-user-name { color: #fff; font-weight: 600; margin-top: .5rem; line-height: 1.3; }
.rq-sidebar .rq-user-meta { color: var(--rq-sidebar-label); font-size: .75rem; line-height: 1.4; word-break: break-word; }
.rq-sidebar .rq-user-badge {
    margin-top: .375rem; font-size: .6875rem; font-weight: 600; padding: 2px 8px;
    border-radius: var(--rq-radius-badge); background: rgba(239, 35, 60, .18); color: #ffb3bd;
}
.rq-sidebar .navbar-nav { padding: .5rem .5rem 0; gap: 2px; }
.rq-sidebar .rq-nav-label {
    padding: .875rem .75rem .25rem; font-size: .6875rem; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; color: var(--rq-sidebar-label);
}
.rq-sidebar .navbar-nav .nav-link {
    position: relative; min-height: 2.5rem; padding: .5rem .75rem !important;
    border-radius: var(--rq-radius-control); color: var(--rq-sidebar-text); font-weight: 500;
    transition: background-color var(--rq-duration), color var(--rq-duration);
}
.rq-sidebar .navbar-nav .nav-link:hover { background: var(--rq-sidebar-hover); color: #fff; }
.rq-sidebar .navbar-nav .nav-link.active { background: var(--rq-sidebar-active); color: #fff; font-weight: 600; }
.rq-sidebar .navbar-nav .nav-link.active::before {
    content: ""; position: absolute; left: -.5rem; top: .375rem; bottom: .375rem;
    width: 3px; border-radius: 0 3px 3px 0; background: var(--rq-brand);
}
.rq-sidebar .navbar-nav .nav-link.active .nav-link-icon { color: var(--rq-brand); }
.rq-sidebar .nav-link-icon { width: 1.25rem; margin-right: .625rem; font-size: 1.125rem; color: inherit; opacity: .9; }
.rq-sidebar .rq-sidebar-foot {
    margin-top: auto; padding: .75rem; border-top: 1px solid rgba(255, 255, 255, .08);
    display: flex; gap: .5rem; align-items: center;
}
.rq-sidebar .rq-sidebar-foot .form-select {
    --tblr-bg-forms: rgba(255, 255, 255, .06);
    background-color: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12);
    color: #fff; min-height: 2.25rem; padding-top: .25rem; padding-bottom: .25rem; font-size: .8125rem;
}
.rq-sidebar .rq-sidebar-foot .form-select option { color: var(--rq-text); }
.rq-sidebar .rq-logout {
    color: var(--rq-sidebar-text); white-space: nowrap; font-size: .8125rem; font-weight: 500;
    min-height: 2.25rem; padding: .25rem .625rem; border-radius: var(--rq-radius-control);
    background: transparent; border: 0; display: inline-flex; align-items: center; gap: .375rem;
}
.rq-sidebar .rq-logout:hover { background: var(--rq-sidebar-hover); color: #fff; }
/* A thin dark scrollbar when the menu is taller than the screen. */
.rq-sidebar, .rq-sidebar .navbar-collapse { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }
@media (max-width: 991.98px) {
    .navbar-vertical.rq-sidebar { width: auto; }
    /* Phones and tablets: menu button on the left, the wordmark centred in the bar (the brand takes
       the rest of the row and gives back the button's width on the right, so the centre is the bar's). */
    .rq-sidebar .navbar-toggler { width: 2.75rem; flex: none; padding-left: 0; padding-right: 0; }
    .rq-sidebar .navbar-brand {
        order: 0; flex: 1 1 0; min-width: 0; margin: 0 2.75rem 0 0; padding: .5rem 0;
        display: flex; justify-content: center;
    }
    .rq-sidebar .navbar-brand img { height: 2rem; }
}

/* ---------- Top bar (back, help, notifications) ---------- */
.rq-topbar {
    position: sticky; top: 0; z-index: 1020;
    background: var(--rq-surface); border-bottom: 1px solid var(--rq-border);
}
.rq-topbar-inner { display: flex; align-items: center; gap: .5rem; min-height: 3.5rem; }
.rq-topbar-back { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.rq-topbar-back .btn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: -.5rem; }
.rq-topbar-tools { display: flex; align-items: center; gap: .25rem; flex: none; }
.rq-topbar-tools .btn-icon { min-width: 2.5rem; }

/* ---------- Page header ---------- */
.page-header { margin-top: 0; padding-top: 1.25rem; padding-bottom: .25rem; }
/* The title keeps room for itself: with many actions they wrap under it instead of squeezing it. */
.page-header .col-xl { min-width: min(100%, 22rem); }
.rq-page-icon {
    width: 3rem; height: 3rem; border-radius: var(--rq-radius-card); flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--rq-brand-tint); color: var(--rq-brand); font-size: 1.5rem;
}
/* Phones: the content starts higher — no icon tile, the subtitle at most two lines. */
@media (max-width: 575.98px) {
    .page-title { font-size: 1.375rem; }
    .rq-page-icon { display: none; }
    .page-subtitle { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* ---------- Cards ---------- */
.card {
    --tblr-card-border-radius: var(--rq-radius-card);
    --tblr-card-inner-border-radius: calc(var(--rq-radius-card) - 1px);
    --tblr-card-border-color: var(--rq-border);
    --tblr-card-box-shadow: none;
    --tblr-card-cap-bg: transparent;
    box-shadow: none;
}
.card-header { min-height: 3.25rem; }
.card-footer { background: var(--rq-surface-alt); }

/* KPI tile: the number first, its label and period right with it. */
.rq-kpi { display: flex; align-items: center; gap: var(--rq-space-4); padding: var(--rq-space-4) var(--rq-space-4); }
.rq-kpi-icon {
    width: 2.75rem; height: 2.75rem; border-radius: 50%; flex: none; font-size: 1.375rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--rq-neutral-bg); color: var(--rq-neutral);
}
.rq-kpi-label { font-size: .8125rem; color: var(--rq-text-muted); font-weight: 500; }
.rq-kpi-value { font-size: 1.75rem; font-weight: 700; color: var(--rq-navy); line-height: 1.15; font-variant-numeric: tabular-nums; }
.rq-kpi-hint { font-size: .75rem; color: var(--rq-text-muted); }
a.rq-kpi-card { color: inherit; text-decoration: none; transition: border-color var(--rq-duration), background-color var(--rq-duration); }
a.rq-kpi-card:hover { border-color: #c5d1dd; background: var(--rq-surface-alt); }
a.rq-kpi-card.active { border-color: var(--rq-navy); box-shadow: inset 0 0 0 1px var(--rq-navy); }

/* ---------- Buttons ---------- */
.btn {
    --tblr-btn-font-weight: 600;
    --tblr-btn-border-radius: var(--rq-radius-control);
    --tblr-btn-box-shadow: none;
    min-height: var(--rq-control-height);
    gap: .375rem;
    transition: background-color var(--rq-duration), border-color var(--rq-duration), color var(--rq-duration);
}
.btn-sm, .btn-group-sm > .btn { min-height: 2rem; --tblr-btn-border-radius: 6px; }
.btn-lg { min-height: 3rem; }
.btn-icon { min-width: var(--rq-control-height); }
.btn-icon.btn-sm { min-width: 2rem; }
/* Primary: the one main action of a context (brand red, AA contrast). */
.btn-primary {
    --tblr-btn-bg: var(--rq-brand-strong);
    --tblr-btn-hover-bg: var(--rq-brand-pressed);
    --tblr-btn-active-bg: var(--rq-brand-pressed);
    --tblr-btn-disabled-bg: var(--rq-brand-strong);
}
/* Outline primary: an emphasised secondary action (navy outline), so solid red stays the one main
   action of a context and the page isn't a wall of red. */
.btn-outline-primary {
    --tblr-btn-color: var(--rq-navy);
    --tblr-btn-bg: var(--rq-surface);
    --tblr-btn-border-color: #9fb0c2;
    --tblr-btn-hover-color: #fff;
    --tblr-btn-hover-bg: var(--rq-navy);
    --tblr-btn-hover-border-color: var(--rq-navy);
    --tblr-btn-active-color: #fff;
    --tblr-btn-active-bg: var(--rq-navy-deep);
    --tblr-btn-active-border-color: var(--rq-navy-deep);
}
/* Secondary: white surface, navy text, grey border. */
.btn-outline-secondary, .btn-secondary, .btn-white, .btn-light {
    --tblr-btn-color: var(--rq-navy);
    --tblr-btn-bg: var(--rq-surface);
    --tblr-btn-border-color: var(--rq-border);
    --tblr-btn-hover-color: var(--rq-navy);
    --tblr-btn-hover-bg: var(--rq-surface-alt);
    --tblr-btn-hover-border-color: #c5d1dd;
    --tblr-btn-active-color: var(--rq-navy);
    --tblr-btn-active-bg: var(--rq-neutral-bg);
    --tblr-btn-active-border-color: #c5d1dd;
}
/* Urgent operational action (Quick call-out): red, but set apart from creating a record. */
.btn-urgent {
    --tblr-btn-color: #fff;
    --tblr-btn-bg: var(--rq-brand-strong);
    --tblr-btn-border-color: var(--rq-brand-strong);
    --tblr-btn-hover-color: #fff;
    --tblr-btn-hover-bg: var(--rq-brand-pressed);
    --tblr-btn-hover-border-color: var(--rq-brand-pressed);
    --tblr-btn-active-color: #fff;
    --tblr-btn-active-bg: var(--rq-brand-pressed);
    box-shadow: 0 0 0 3px rgba(var(--rq-brand-rgb), .16);
}
/* Destructive: dark red, always with words saying what goes. */
.btn-danger {
    --tblr-btn-bg: var(--rq-danger);
    --tblr-btn-border-color: var(--rq-danger);
    --tblr-btn-hover-bg: #991b1b;
    --tblr-btn-hover-border-color: #991b1b;
    --tblr-btn-active-bg: #7f1d1d;
}
.btn-outline-danger, .btn-ghost-danger { --tblr-btn-color: var(--rq-danger); }
/* While a request is out: no second click, a spinner where the icon was. */
.btn.is-busy { position: relative; pointer-events: none; opacity: .75; }
.btn.is-busy::after {
    content: ""; width: 1em; height: 1em; border-radius: 50%;
    border: 2px solid currentColor; border-right-color: transparent;
    animation: rq-spin .6s linear infinite; flex: none;
}
@keyframes rq-spin { to { transform: rotate(360deg); } }

/* ---------- Form controls ---------- */
.form-control, .form-select {
    min-height: var(--rq-control-height);
    border-radius: var(--rq-radius-control);
    border-color: var(--rq-border);
}
.form-control-sm, .form-select-sm { min-height: 2rem; border-radius: 6px; }
textarea.form-control { min-height: 4.5rem; }
.form-control::placeholder { color: #8796a5; }
.form-control[readonly]:not(.flatpickr-input), .form-control:disabled, .form-select:disabled {
    background-color: var(--rq-surface-alt); color: var(--rq-text-muted);
}
.input-group > .form-control, .input-group > .form-select, .input-group > .btn { min-height: var(--rq-control-height); }
.input-icon .form-control { min-height: var(--rq-control-height); }
.ts-wrapper.single .ts-control, .ts-wrapper.multi .ts-control { min-height: var(--rq-control-height); border-radius: var(--rq-radius-control); }
/* An error says so in words next to the field (the guide: never a red frame on its own). */
.invalid-feedback, .field-validation-error { font-size: .8125rem; font-weight: 500; color: var(--rq-danger); }
@media (pointer: coarse) {
    .btn:not(.btn-sm), .form-control:not(.form-control-sm), .form-select:not(.form-select-sm) { min-height: 2.75rem; }
}

/* Filter bar: one row of controls of the same height above a list. */
.rq-filterbar { display: flex; flex-wrap: wrap; gap: var(--rq-space-2) var(--rq-space-3); align-items: center; }
.rq-filterbar .rq-filter-search { flex: 1 1 18rem; min-width: 12rem; }
.rq-filterbar > .form-select, .rq-filterbar > .rq-filter { flex: 0 1 12rem; min-width: 9rem; }

/* ---------- Badges / status ---------- */
.badge {
    --tblr-badge-border-radius: var(--rq-radius-badge);
    --tblr-badge-font-weight: 600;
    --tblr-badge-padding-y: .3125em;
    --tblr-badge-padding-x: .625em;
    --tblr-badge-font-size: .75rem;
    line-height: 1.2;
    letter-spacing: .005em;
}
.badge .ti { font-size: 1em; vertical-align: -.1em; }
/* A filled badge has white text (every filled colour above is dark enough for it). */
.badge:is(.bg-green, .bg-blue, .bg-azure, .bg-yellow, .bg-orange, .bg-red, .bg-purple, .bg-lime, .bg-teal,
          .bg-cyan, .bg-indigo, .bg-pink, .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger,
          .bg-secondary, .bg-dark) { color: #fff; }
/* Status badge: text always, icon optional; colour only helps. */
.rq-status { display: inline-flex; align-items: center; gap: .3125rem; white-space: nowrap; }
.rq-status-success { background: var(--rq-success-bg) !important; color: var(--rq-success) !important; }
.rq-status-info    { background: var(--rq-info-bg) !important;    color: var(--rq-info) !important; }
.rq-status-pending { background: var(--rq-pending-bg) !important; color: var(--rq-pending) !important; }
.rq-status-warning { background: var(--rq-warning-bg) !important; color: var(--rq-warning) !important; }
.rq-status-danger  { background: var(--rq-danger-bg) !important;  color: var(--rq-danger) !important; }
.rq-status-neutral { background: var(--rq-neutral-bg) !important; color: var(--rq-neutral) !important; }
.rq-status-special { background: var(--rq-special-bg) !important; color: var(--rq-special) !important; }

/* ---------- Tables ---------- */
.table {
    --tblr-table-hover-bg: rgba(var(--rq-navy-rgb), .025);
    --tblr-table-border-color: var(--rq-border-soft);
}
.table > :not(caption) > * > * { padding: .625rem .75rem; }
.table thead th {
    background: var(--rq-surface-alt);
    font-size: .6875rem; font-weight: 600; letter-spacing: .06em;
    color: var(--rq-text-muted);
    padding-top: .625rem; padding-bottom: .625rem;
    border-bottom: 1px solid var(--rq-border);
}
.table thead th a { color: inherit; }
.table thead th a:hover { color: var(--rq-navy); }
.table tbody tr { transition: background-color var(--rq-duration); }
.card-table tbody tr > * { height: var(--rq-row-height); }
.table-vcenter > :not(caption) > * > * { vertical-align: middle; }
.table-hover > tbody > tr:hover > * { --tblr-table-bg-state: rgba(var(--rq-navy-rgb), .03); }
.rq-cell-title { font-weight: 600; color: var(--rq-navy); }
.rq-cell-sub { font-size: .8125rem; color: var(--rq-text-muted); }
.table .rq-truncate { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A list keeps its header in view while scrolling a long page. */
.rq-sticky-head thead th { position: sticky; top: 0; z-index: 2; }

/* ---------- Tabs, pagination, dropdowns, alerts ---------- */
/* Tabs: a line under the strip, the active one underlined in brand red (not a box). Card-header
   tabs keep Tabler's own look. */
.nav-tabs:not(.card-header-tabs) { border-bottom: 1px solid var(--rq-border); gap: var(--rq-space-1); }
.nav-tabs:not(.card-header-tabs) .nav-link {
    border: 0; border-bottom: 2px solid transparent; border-radius: 0; margin-bottom: -1px;
    padding: .625rem .875rem; min-height: 2.75rem; font-weight: 500; color: var(--rq-text-muted);
    background: transparent; gap: .375rem;
}
.nav-tabs:not(.card-header-tabs) .nav-link:hover { color: var(--rq-navy); border-bottom-color: var(--rq-border); }
.nav-tabs:not(.card-header-tabs) .nav-link.active {
    color: var(--rq-brand-strong); font-weight: 600; border-bottom-color: var(--rq-brand); background: transparent;
}
.nav-tabs .nav-link .badge { background: var(--rq-neutral-bg); color: var(--rq-neutral); }
.nav-pills { --tblr-nav-pills-link-active-bg: var(--rq-navy); }
.pagination {
    --tblr-pagination-border-radius: var(--rq-radius-control);
    --tblr-pagination-active-bg: var(--rq-brand-strong);
    --tblr-pagination-active-border-color: var(--rq-brand-strong);
    gap: 4px;
}
.page-link { min-width: 2.25rem; min-height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--rq-radius-control) !important; }
.dropdown-menu {
    --tblr-dropdown-border-radius: var(--rq-radius-card);
    --tblr-dropdown-border-color: var(--rq-border);
    --tblr-dropdown-link-active-bg: var(--rq-neutral-bg);
    --tblr-dropdown-link-active-color: var(--rq-navy);
    box-shadow: var(--rq-shadow-float);
    padding: 4px;
}
.dropdown-item { border-radius: 6px; min-height: 2.25rem; display: flex; align-items: center; gap: .5rem; }
.alert { --tblr-alert-border-radius: var(--rq-radius-card); }
.tooltip { --tblr-tooltip-bg: var(--rq-navy-deep); --tblr-tooltip-border-radius: 6px; }

/* ---------- Overlays ---------- */
.modal {
    --tblr-modal-border-radius: var(--rq-radius-modal);
    --tblr-modal-inner-border-radius: calc(var(--rq-radius-modal) - 1px);
    --tblr-modal-box-shadow: var(--rq-shadow-float);
}
.modal-backdrop { --tblr-backdrop-bg: var(--rq-navy-deep); --tblr-backdrop-opacity: .45; }
.modal-title { font-size: 1.125rem; font-weight: 600; color: var(--rq-navy); }
.modal-footer { background: var(--rq-surface-alt); border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }
/* The shared HTMX dialog is modal-lg; a partial whose header carries .rq-dialog-xl (tables,
   member lists, import results) gets the room on desktop. Phones are unchanged. */
@media (min-width: 992px) {
    .modal-dialog:has(.rq-dialog-xl) { max-width: min(1140px, calc(100vw - 4rem)); }
}

/* Toasts: white card with a coloured edge and icon (the text says what happened). */
.rq-toast {
    display: flex; align-items: flex-start; gap: .625rem; min-width: 18rem; max-width: 26rem;
    background: var(--rq-surface); color: var(--rq-text); border: 1px solid var(--rq-border);
    border-left: 4px solid var(--rq-success); border-radius: var(--rq-radius-card);
    box-shadow: var(--rq-shadow-float); padding: .75rem .75rem .75rem .875rem; margin-bottom: .5rem;
}
.rq-toast .ti { font-size: 1.25rem; color: var(--rq-success); margin-top: 1px; }
.rq-toast.is-error { border-left-color: var(--rq-danger); }
.rq-toast.is-error .ti { color: var(--rq-danger); }
.rq-toast-text { flex: 1; font-weight: 500; line-height: 1.4; }

/* ---------- Empty / loading / error states ---------- */
.empty { padding: var(--rq-space-8) var(--rq-space-4); }
.empty-icon { color: var(--rq-text-muted); }
.empty-title { color: var(--rq-navy); font-weight: 600; }
.rq-empty-icon {
    width: 3.5rem; height: 3.5rem; border-radius: 50%; margin: 0 auto var(--rq-space-3);
    display: flex; align-items: center; justify-content: center;
    background: var(--rq-neutral-bg); color: var(--rq-text-muted); font-size: 1.75rem;
}
.rq-empty.is-error .rq-empty-icon { background: var(--rq-danger-bg); color: var(--rq-danger); }
.rq-skeleton {
    display: block; height: .875rem; border-radius: 4px;
    background: linear-gradient(90deg, var(--rq-neutral-bg) 0%, #e7edf3 50%, var(--rq-neutral-bg) 100%);
    background-size: 200% 100%; animation: rq-shimmer 1.2s ease-in-out infinite;
}
@keyframes rq-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* HTMX: whatever is being reloaded dims a little instead of jumping. */
.htmx-request.rq-loading-dim, .htmx-request .rq-loading-dim { opacity: .55; transition: opacity var(--rq-duration); }

/* ---------- Footer ---------- */
.footer { border-top: 0; color: var(--rq-text-muted); font-size: .75rem; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- Layout helpers ---------- */
.rq-container { max-width: 110rem; }
.min-w-0 { min-width: 0; }

/* ---------- KPI icon tones ---------- */
.rq-kpi-icon-running { background: var(--rq-brand-tint); color: var(--rq-brand); }
.rq-kpi-icon-warning { background: var(--rq-warning-bg); color: var(--rq-warning); }
.rq-kpi-icon-success { background: var(--rq-success-bg); color: var(--rq-success); }
.rq-kpi-icon-info    { background: var(--rq-info-bg); color: var(--rq-info); }
a.rq-kpi-card { height: 100%; }

/* ---------- Lists: meta line, filters ---------- */
.rq-list-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--rq-space-3);
    padding: .5rem 1rem; font-size: .8125rem; color: var(--rq-text-muted);
    border-bottom: 1px solid var(--rq-border-soft);
}
.rq-reset-link { display: inline-flex; align-items: center; gap: .25rem; font-weight: 600; }
.rq-filter-dates { display: flex; align-items: center; gap: .375rem; flex: 0 1 17rem !important; }
.rq-filter-dates .form-control { min-width: 0; }

/* ---------- Mission type picture ---------- */
.rq-type-icon {
    width: 2.25rem; height: 2.25rem; border-radius: var(--rq-radius-control); flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--rq-neutral-bg); color: var(--rq-navy); font-size: 1.25rem;
}
.rq-type-icon.is-running { background: var(--rq-brand-tint); color: var(--rq-brand); }
.rq-type-icon-sm { width: 1.5rem; height: 1.5rem; font-size: 1rem; border-radius: 6px; vertical-align: middle; }
.rq-type-badge { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }
.rq-icon-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: .5rem; }
.rq-icon-option { position: relative; display: flex; flex-direction: column; align-items: center; gap: .25rem; cursor: pointer; text-align: center; }
.rq-icon-option input { position: absolute; opacity: 0; pointer-events: none; }
.rq-icon-option .rq-icon-tile {
    width: 100%; height: 3rem; border-radius: var(--rq-radius-control); border: 1px solid var(--rq-border);
    display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--rq-navy);
    background: var(--rq-surface); transition: border-color var(--rq-duration), background-color var(--rq-duration);
}
.rq-icon-option:hover .rq-icon-tile { background: var(--rq-surface-alt); }
.rq-icon-option input:checked + .rq-icon-tile { border-color: var(--rq-brand); background: var(--rq-brand-tint); color: var(--rq-brand); box-shadow: inset 0 0 0 1px var(--rq-brand); }
.rq-icon-option input:focus-visible + .rq-icon-tile { outline: 2px solid var(--rq-focus); outline-offset: 2px; }
.rq-icon-name { font-size: .6875rem; color: var(--rq-text-muted); line-height: 1.2; }

/* ---------- Missions table ---------- */

.rq-live-dot {
    width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; flex: none;
    box-shadow: 0 0 0 0 currentColor; animation: rq-pulse 1.8s ease-out infinite;
}
@keyframes rq-pulse { 0% { box-shadow: 0 0 0 0 rgba(29, 78, 216, .45); } 100% { box-shadow: 0 0 0 .4rem rgba(29, 78, 216, 0); } }
.rq-map-link { color: var(--rq-brand); line-height: 1.5; }
.rq-map-link:hover { color: var(--rq-brand-pressed); }
.rq-participants { display: inline-flex; flex-direction: column; gap: 4px; min-width: 4.5rem; text-decoration: none; }
.rq-meter { display: block; height: 4px; border-radius: 2px; background: var(--rq-neutral-bg); overflow: hidden; width: 4.5rem; }
.rq-meter > span { display: block; height: 100%; background: var(--rq-success); border-radius: 2px; }

/* Phone cards */
.rq-mission-cards { display: flex; flex-direction: column; }
.rq-mission-card {
    display: block; padding: .875rem 1rem; color: inherit; text-decoration: none;
    border-bottom: 1px solid var(--rq-border-soft);
}
.rq-mission-card:hover, .rq-mission-card:focus-visible { background: var(--rq-surface-alt); color: inherit; }
.rq-mission-card-facts { display: flex; flex-wrap: wrap; gap: .25rem .875rem; margin-top: .5rem; font-size: .8125rem; color: var(--rq-text-muted); }
.rq-mission-card-facts span { display: inline-flex; align-items: center; gap: .25rem; min-width: 0; }
.rq-mission-card-facts .ti { font-size: 1rem; }
/* Less important columns only on wide screens (the guide: hide them before shrinking text). */
@media (max-width: 1799.98px) { .rq-col-wide { display: none !important; } }
@media (min-width: 1800px) { .rq-col-narrow { display: none !important; } }
/* The title column takes what is left and truncates (full text in its tooltip), so the table fits
   the screen instead of scrolling sideways. */
.rq-fluid-cell { width: 100%; max-width: 0; min-width: 13rem; }
.rq-fluid-cell .rq-truncate { max-width: 100%; }
.rq-mission-table .rq-location { max-width: 9rem; }
.rq-mission-table .rq-leader { min-width: 7rem; max-width: 9.5rem; line-height: 1.3; }
.rq-mission-table > :not(caption) > * > * { padding-left: .625rem; padding-right: .625rem; }

/* Phones: the counts stay a compact 2 x 2 grid above the list, not a screen of their own. */
@media (max-width: 575.98px) {
    .rq-kpi { gap: var(--rq-space-3); padding: var(--rq-space-3); align-items: flex-start; }
    .rq-kpi-icon { width: 2rem; height: 2rem; font-size: 1.125rem; }
    .rq-kpi-value { font-size: 1.375rem; }
    .rq-kpi-label { font-size: .75rem; line-height: 1.25; }
    .rq-kpi-hint { display: none; }
}

/* ---------- Mission detail ---------- */
/* Label/value list with an icon per row (the mission's basic information). */
.rq-info-list { margin: 0; }
.rq-info-list > div {
    display: grid; grid-template-columns: minmax(9rem, 13rem) 1fr; gap: .75rem;
    padding: .625rem 1rem; border-bottom: 1px solid var(--rq-border-soft);
}
.rq-info-list > div:last-child { border-bottom: 0; }
.rq-info-list dt { display: flex; align-items: flex-start; gap: .5rem; font-weight: 500; color: var(--rq-text-muted); }
.rq-info-list dt .ti { font-size: 1.125rem; margin-top: 1px; }
.rq-info-list dd { margin: 0; font-weight: 500; color: var(--rq-text); min-width: 0; }
@media (max-width: 575.98px) { .rq-info-list > div { grid-template-columns: 1fr; gap: .125rem; } }
.rq-coords { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; margin-top: .125rem; font-size: .8125rem; color: var(--rq-text-muted); }

/* Vertical timeline: a dot per step on a line, done green, skipped grey, the next one ringed. */
.rq-steps { list-style: none; margin: 0; padding: .5rem 1rem; }
.rq-step {
    position: relative; display: grid; grid-template-columns: 2rem 1fr auto auto; align-items: center;
    gap: .25rem .75rem; min-height: 3rem; padding: .375rem 0;
}
.rq-step::before {
    content: ""; position: absolute; left: calc(1rem - 1px); top: 0; bottom: 0; width: 2px; background: var(--rq-border);
}
.rq-step:first-child::before { top: 50%; }
.rq-step:last-child::before { bottom: 50%; }
.rq-step-dot {
    position: relative; z-index: 1; width: 2rem; height: 2rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1rem;
    background: var(--rq-surface); border: 2px solid var(--rq-border); color: var(--rq-text-muted);
}
.rq-step.is-done .rq-step-dot { background: var(--rq-success); border-color: var(--rq-success); color: #fff; }
.rq-step.is-skipped .rq-step-dot { background: var(--rq-neutral-bg); border-style: dashed; }
.rq-step.is-next .rq-step-dot { border-color: var(--rq-brand); color: var(--rq-brand); box-shadow: 0 0 0 4px rgba(var(--rq-brand-rgb), .15); }
.rq-step-label { font-weight: 600; color: var(--rq-navy); }
.rq-step.is-pending .rq-step-label { color: var(--rq-text-muted); font-weight: 500; }
.rq-step-time { color: var(--rq-text); text-align: right; white-space: nowrap; }
.rq-step-actions { display: flex; gap: .375rem; justify-content: flex-end; }
@media (max-width: 575.98px) {
    .rq-step { grid-template-columns: 2rem 1fr auto; }
    .rq-step-actions { grid-column: 2 / -1; justify-content: flex-start; }
}

/* The report card once nothing is missing. */
.rq-report-done {
    display: flex; align-items: center; gap: .75rem; padding: .875rem 1rem; border-radius: var(--rq-radius-control);
    background: var(--rq-success-bg); color: var(--rq-success);
}
.rq-report-done .ti { font-size: 1.75rem; }
.rq-report-done .fw-semibold { color: #14532d; }
.rq-inline-link { display: inline-flex; align-items: center; gap: .25rem; font-size: .8125rem; font-weight: 600; }

/* Phones: a tab strip scrolls sideways instead of wrapping onto several lines. */
@media (max-width: 767.98px) {
    .nav-tabs:not(.card-header-tabs) { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .nav-tabs:not(.card-header-tabs)::-webkit-scrollbar { display: none; }
    .nav-tabs:not(.card-header-tabs) .nav-link { white-space: nowrap; }
}

/* ---------- Members ---------- */
.rq-row-muted > td, .rq-mission-card.rq-row-muted { opacity: .62; }
@media (max-width: 1399.98px) { .rq-col-mid { display: none !important; } }
.rq-profile-avatar .avatar { width: 8rem; height: 8rem; font-size: 2.75rem; --tblr-avatar-size: 8rem; box-shadow: 0 0 0 4px var(--rq-surface), 0 0 0 5px var(--rq-border); }
.rq-field-label { font-size: .75rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--rq-text-muted); margin-bottom: .25rem; }
.rq-field-value { font-weight: 500; color: var(--rq-text); }
/* Phones: filter selects two to a row under the full-width search, not a column of their own. */
@media (max-width: 575.98px) {
    .rq-filterbar > .form-select, .rq-filterbar > .rq-filter { flex: 1 1 calc(50% - .375rem); min-width: 0; }
    .rq-filterbar > .rq-filter-dates { flex-basis: 100% !important; }
}

/* ---------- Phonebook ---------- */
/* A number is a tap target (min. 40 px; 44 on touch screens), with its kind as an icon. */
.rq-dial-list { display: flex; flex-wrap: wrap; gap: .375rem; }
.rq-dial {
    display: inline-flex; align-items: center; gap: .375rem; min-height: 2.5rem; max-width: 100%;
    padding: .375rem .75rem; border-radius: var(--rq-radius-control);
    background: var(--rq-surface); border: 1px solid var(--rq-border); color: var(--rq-navy);
    font-weight: 600; text-decoration: none; white-space: nowrap;
    transition: background-color var(--rq-duration), border-color var(--rq-duration);
}
.rq-dial .ti { font-size: 1.125rem; color: var(--rq-success); }
a.rq-dial:hover { background: var(--rq-success-bg); border-color: #86efac; color: var(--rq-navy); text-decoration: none; }
.rq-dial.is-static { font-weight: 500; color: var(--rq-text-muted); background: var(--rq-surface-alt); }
.rq-dial.is-static .ti { color: var(--rq-text-muted); }
.rq-dial.is-mail { white-space: normal; font-weight: 500; }
.rq-dial.is-mail .ti { color: var(--rq-info); }
a.rq-dial.is-mail:hover { background: var(--rq-info-bg); border-color: #93c5fd; }
@media (pointer: coarse) { .rq-dial { min-height: 2.75rem; } }
.rq-phonebook-table .rq-phonebook-name { min-width: 12rem; }

/* A folding group heading inside a list (phonebook categories). */
.rq-group-row > td, .rq-group-button {
    background: var(--rq-surface-alt); cursor: pointer; user-select: none;
    font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--rq-text-muted);
}
.rq-group-row:hover > td, .rq-group-button:hover { color: var(--rq-navy); }
.rq-group-button {
    display: flex; align-items: center; gap: .375rem; width: 100%; min-height: 2.75rem; padding: .5rem 1rem;
    border: 0; border-bottom: 1px solid var(--rq-border-soft); text-align: left;
}

/* ---------- Organization logos ---------- */
.rq-logo-box {
    height: 7rem; display: flex; align-items: center; justify-content: center; padding: .75rem;
    background: var(--rq-surface-alt); border: 1px solid var(--rq-border-soft); border-radius: var(--rq-radius-control);
}
.rq-logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.rq-logo-box.no-logo { border-style: dashed; border-color: var(--rq-border); color: var(--rq-text-muted); flex-direction: column; gap: .25rem; }
.rq-form-map { height: 16rem; }
/* The timeline's Now/Skip are field commands: full touch size on phones and tablets. */
@media (pointer: coarse) { .rq-step-actions .btn { min-height: 2.75rem; padding-left: .875rem; padding-right: .875rem; } }

/* ---------- Courses and exams ---------- */
.rq-pre-line { white-space: pre-line; }
.rq-min-14 { min-width: min(100%, 14rem); }
.rq-min-16 { min-width: min(100%, 16rem); }
/* A step of the curriculum, an exam station's number. */
.rq-section-no {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.75rem; height: 1.75rem; padding: 0 .375rem; border-radius: 6px;
    background: var(--rq-neutral-bg); color: var(--rq-navy); font-size: .8125rem; font-weight: 600;
}
.rq-course-table .rq-location { max-width: 12rem; }
.rq-course-table .rq-leader { max-width: 11rem; }
/* The caller's own station's people in a course's or exam's tables; rows set apart (headings, not eligible). */
.rq-row-own > td { background: color-mix(in srgb, var(--rq-info-bg) 55%, transparent); }
.rq-row-alt, .rq-row-alt > td { background: var(--rq-surface-alt); }
/* A suggestion inside a card (an exam type template to start from). */
.rq-callout { background: var(--rq-info-bg); }
/* The details card sits in a narrow column: a shorter label column. */
.rq-info-list.is-compact > div { grid-template-columns: minmax(7rem, 9rem) 1fr; }
.rq-requirements > li + li { margin-top: .25rem; }
/* Course days: the day's number in the dot until its roll call is taken. */
.rq-days .rq-step { grid-template-columns: 2rem 1fr auto; }
.rq-days .rq-step-dot { font-size: .8125rem; font-weight: 600; }
/* The roll-call button stays beside its day on phones too (the mission steps put theirs below). */
.rq-days .rq-step-actions { grid-column: auto; }
.rq-filterbar > .rq-filter-wide { flex: 0 1 22rem; }

/* ---------- Activities and station events ---------- */
/* What I answered to a station event: a pill that can't be missed. */
.rq-answer-pill { font-size: .8125rem; padding: .25rem .5rem; }
.rq-event-bar { height: .625rem; }
.rq-dot-neutral { background: var(--rq-border); }
.station-event-description {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line;
}

/* ---------- Segmented control (one of a few choices; the active one in brand red) ---------- */
.rq-segmented { display: inline-flex; border: 1px solid var(--rq-border); border-radius: var(--rq-radius-control); overflow: hidden; background: var(--rq-surface); }
.rq-segmented > button {
    border: 0; background: transparent; color: var(--rq-navy); font-weight: 600; font-size: .875rem;
    min-height: calc(var(--rq-control-height) - 2px); padding: 0 1rem; display: inline-flex; align-items: center; gap: .375rem;
}
.rq-segmented > button + button { border-left: 1px solid var(--rq-border); }
.rq-segmented > button:hover { background: var(--rq-surface-alt); }
.rq-segmented > button.active { background: var(--rq-brand-strong); color: #fff; }
.rq-segmented > button:focus-visible { outline: 2px solid var(--rq-focus); outline-offset: -2px; }

/* ---------- Calendar ---------- */
/* One colour per kind (legend, events, the upcoming list): activity blue, course green, exam purple, event orange. */
.rq-ev-activity { --ev: var(--rq-info); }
.rq-ev-course { --ev: var(--rq-success); }
.rq-ev-exam { --ev: var(--rq-special); }
.rq-ev-event { --ev: #ea580c; }
.rq-cal-bar { gap: var(--rq-space-3); }
.rq-cal-bar .rq-filter-search { flex: 1 1 12rem; max-width: 18rem; min-width: 10rem; }
.rq-cal-stations { flex: 0 1 16rem; min-width: 12rem; }
.rq-cal-legend { display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
.rq-cal-chip {
    display: inline-flex; align-items: center; gap: .375rem; border: 0; background: transparent; padding: .25rem .375rem;
    border-radius: 6px; font-size: .8125rem; font-weight: 500; color: var(--rq-text);
}
.rq-cal-chip:hover { background: var(--rq-surface-alt); }
.rq-cal-chip.is-off { opacity: .45; text-decoration: line-through; }
.rq-cal-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--ev); }

.rq-calendar {
    --fc-border-color: var(--rq-border-soft); --fc-page-bg-color: var(--rq-surface);
    --fc-today-bg-color: rgba(var(--rq-brand-rgb), .04); --fc-neutral-bg-color: var(--rq-surface-alt);
    --fc-list-event-hover-bg-color: var(--rq-surface-alt);
}
.rq-calendar .fc-toolbar.fc-header-toolbar { margin-bottom: 1rem; }
.rq-calendar .fc-toolbar-title { font-size: 1.25rem; font-weight: 700; color: var(--rq-navy); text-transform: capitalize; }
/* FullCalendar's buttons as ours: white with a grey border; the view chosen in brand red. */
.rq-calendar .fc-button {
    background: var(--rq-surface); border: 1px solid var(--rq-border); color: var(--rq-navy); font-weight: 600; font-size: .875rem;
    min-height: var(--rq-control-height); padding: 0 .875rem; border-radius: var(--rq-radius-control); box-shadow: none !important; text-transform: capitalize;
}
.rq-calendar .fc-button:hover { background: var(--rq-surface-alt); color: var(--rq-navy); border-color: var(--rq-border); }
.rq-calendar .fc-button:disabled { opacity: .5; background: var(--rq-surface); color: var(--rq-navy); }
.rq-calendar .fc-button-primary:not(:disabled).fc-button-active,
.rq-calendar .fc-button-primary:not(:disabled):active { background: var(--rq-brand-strong); border-color: var(--rq-brand-strong); color: #fff; }
.rq-calendar .fc-button:focus-visible { outline: 2px solid var(--rq-focus); outline-offset: 1px; }
.rq-calendar .fc-prev-button, .rq-calendar .fc-next-button { padding: 0 .625rem; }
.rq-calendar .fc-col-header-cell { background: var(--rq-surface-alt); }
.rq-calendar .fc-col-header-cell-cushion { padding: .5rem; font-size: .8125rem; font-weight: 600; color: var(--rq-text-muted); text-transform: capitalize; }
.rq-calendar .fc-daygrid-day-frame { min-height: 6rem; }
.rq-calendar .fc-daygrid-day-number { font-size: .8125rem; font-weight: 500; color: var(--rq-text); padding: .375rem .5rem; }
.rq-calendar .fc-day-other .fc-daygrid-day-number { color: var(--rq-text-muted); opacity: .6; }
/* Today: the number in a red circle. */
.rq-calendar .fc-day-today .fc-daygrid-day-number {
    background: var(--rq-brand); color: #fff; border-radius: 50%; width: 1.75rem; height: 1.75rem; padding: 0;
    display: inline-flex; align-items: center; justify-content: center; margin: .25rem;
}
/* Entries: tinted in their kind's colour with a strong left edge, the time under the title. */
.rq-calendar .rq-ev:not(.fc-list-event) {
    background: color-mix(in srgb, var(--ev) 12%, var(--rq-surface)); border: 0; border-left: 3px solid var(--ev);
    border-radius: 6px; margin: 1px 4px 3px; padding: .1875rem .375rem; color: var(--rq-text); cursor: pointer;
}
.rq-calendar .rq-ev:not(.fc-list-event):hover { background: color-mix(in srgb, var(--ev) 20%, var(--rq-surface)); }
.rq-calendar .rq-ev .fc-event-main { color: inherit; }
.rq-ev-body { min-width: 0; line-height: 1.25; }
.rq-ev-title { font-size: .75rem; font-weight: 600; color: color-mix(in srgb, var(--ev) 70%, var(--rq-text)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rq-ev-time { font-size: .6875rem; color: var(--rq-text-muted); font-variant-numeric: tabular-nums; }
.rq-calendar .fc-list-event-dot { border-color: var(--ev); }
.rq-calendar .fc-daygrid-more-link { font-size: .75rem; font-weight: 600; color: var(--rq-link); margin-left: 4px; }
.rq-calendar .cal-waiting { opacity: .75; border-left-style: dashed; }
.rq-calendar .cal-open { opacity: .7; background-image: repeating-linear-gradient(45deg, transparent 0 6px, rgba(255, 255, 255, .5) 6px 12px); }
.rq-calendar .cal-draft { opacity: .55; }
.rq-calendar .cal-cancelled, .rq-calendar .cal-declined { opacity: .5; }
.rq-calendar .cal-cancelled .rq-ev-title, .rq-calendar .cal-cancelled .fc-list-event-title { text-decoration: line-through; }
@media (max-width: 767.98px) {
    .rq-calendar .fc-header-toolbar { flex-wrap: wrap; gap: .5rem; }
    .rq-calendar .fc-toolbar-title { font-size: 1.0625rem; }
}

/* The small month beside it. */
.rq-mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.rq-mini-head { font-size: .6875rem; font-weight: 600; color: var(--rq-text-muted); padding: .25rem 0; text-transform: uppercase; }
.rq-mini-day {
    position: relative; border: 0; background: transparent; border-radius: 50%; aspect-ratio: 1; max-width: 2rem; width: 100%; margin: 0 auto;
    font-size: .75rem; color: var(--rq-text); font-variant-numeric: tabular-nums;
}
.rq-mini-day:hover { background: var(--rq-surface-alt); }
.rq-mini-day.is-other { color: var(--rq-text-muted); opacity: .55; }
.rq-mini-day.has-events::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--rq-text-muted); }
.rq-mini-day.is-today { background: var(--rq-brand); color: #fff; font-weight: 600; }
.rq-mini-day.is-today::after { background: #fff; }

/* Upcoming: a date tile, the kind's icon, title and time. */
.rq-upcoming { display: flex; align-items: center; gap: .75rem; }
.rq-upcoming-date {
    flex: none; width: 2.75rem; display: flex; flex-direction: column; align-items: center; line-height: 1.1;
    border: 1px solid var(--rq-border); border-radius: 8px; padding: .25rem 0;
}
.rq-upcoming-date strong { font-size: 1rem; color: var(--rq-navy); }
.rq-upcoming-date span { font-size: .625rem; font-weight: 600; text-transform: uppercase; color: var(--rq-text-muted); }
.rq-upcoming-icon {
    flex: none; width: 2.25rem; height: 2.25rem; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--ev) 14%, var(--rq-surface)); color: var(--ev); font-size: 1.125rem;
}
.rq-calendar .fc-list-day-cushion a { color: var(--rq-navy); font-weight: 600; text-transform: capitalize; }

/* ---------- Gear ---------- */
.rq-empty-hide:empty { display: none !important; }
.rq-skeleton-block { height: 8rem; border-radius: var(--rq-radius-control); }
.datagrid-title { font-size: .75rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--rq-text-muted); }
/* A loan's history: a dot per step on a line, the newest last. */
.rq-history .rq-step { grid-template-columns: 2rem 1fr; align-items: start; }
.rq-history .rq-step-dot { width: 1.25rem; height: 1.25rem; margin: .125rem .375rem 0; font-size: .75rem; }
.rq-history .rq-step::before { left: calc(1rem - 1px); }
.rq-kpi-icon-pending { background: var(--rq-pending-bg); color: var(--rq-pending); }
.rq-kpi-icon-danger  { background: var(--rq-danger-bg); color: var(--rq-danger); }
.rq-kpi-icon-special { background: var(--rq-special-bg); color: var(--rq-special); }
.rq-kpi-icon-neutral { background: var(--rq-neutral-bg); color: var(--rq-neutral); }

/* ---------- Statistics ---------- */
.rq-tone-info { background: var(--rq-info); }
.rq-tone-success { background: var(--rq-success); }
.rq-tone-danger { background: var(--rq-danger); }
.rq-tone-warning { background: var(--rq-warning); }
.rq-tone-special { background: var(--rq-special); }
/* Missions per month: a bar per month, the count over it, the month under it. */
.rq-month-chart { display: grid; grid-template-columns: repeat(12, 1fr); gap: .375rem; height: 13rem; }
.rq-month { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; }
.rq-month-count { font-size: .75rem; font-weight: 600; color: var(--rq-text-muted); min-height: 1.125rem; font-variant-numeric: tabular-nums; }
.rq-month-track { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; min-height: 0; }
.rq-month-bar { width: 100%; max-width: 2.5rem; border-radius: 4px 4px 0 0; background: var(--rq-info); }
.rq-month-label { font-size: .6875rem; color: var(--rq-text-muted); margin-top: .25rem; padding-top: .25rem; border-top: 1px solid var(--rq-border); width: 100%; text-align: center; text-transform: capitalize; }
.rq-breakdown + .rq-breakdown { margin-top: .625rem; }
.rq-breakdown-track { height: .5rem; border-radius: 4px; background: var(--rq-neutral-bg); overflow: hidden; margin-top: .25rem; }
.rq-breakdown-bar { display: block; height: 100%; border-radius: 4px; }
.rq-scroll-32 { max-height: 32rem; overflow-y: auto; }

/* ---------- Administration ---------- */
/* A list of choices beside a panel (reference tables, organizations, languages): the chosen one marked like the menu. */
.rq-subnav { display: flex; flex-direction: column; padding: .375rem; gap: 1px; }
.rq-subnav-label {
    font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--rq-text-muted);
    padding: .75rem .75rem .25rem;
}
.rq-subnav-label:first-child { padding-top: .375rem; }
.rq-subnav-item {
    position: relative; display: flex; align-items: center; gap: .625rem; width: 100%; min-height: 2.5rem;
    padding: .375rem .75rem; border: 0; border-radius: 8px; background: transparent; color: var(--rq-text);
    font-weight: 500; font-size: .875rem; text-align: left;
}
.rq-subnav-item .ti { font-size: 1.125rem; color: var(--rq-text-muted); }
.rq-subnav-item.is-nested { padding-left: 2.25rem; }
.rq-subnav-item:hover:not(:disabled) { background: var(--rq-surface-alt); }
.rq-subnav-item:disabled { opacity: .45; cursor: not-allowed; }
.rq-subnav-item.active, .rq-subnav-row.active { background: var(--rq-brand-tint); color: var(--rq-navy); font-weight: 600; }
.rq-subnav-item.active .ti { color: var(--rq-brand); }
.rq-subnav-item.active::before, .rq-subnav-row.active::before {
    content: ""; position: absolute; left: 0; top: .5rem; bottom: .5rem; width: 3px; border-radius: 2px; background: var(--rq-brand);
}
.rq-subnav-row { position: relative; display: flex; align-items: center; border-radius: 8px; }
.rq-subnav-row:hover { background: var(--rq-surface-alt); }
.rq-subnav-row.active .rq-subnav-item { background: transparent; }
.rq-w-25 { width: 25%; }
.rq-w-30 { width: 30%; }
.rq-section-title { font-size: 1.0625rem; font-weight: 600; color: var(--rq-navy); }
/* Audit changes: old value struck out red, new one green. */
.audit-changes { margin: 0; padding: 0; list-style: none; font-size: .8125rem; }
.audit-changes li { overflow-wrap: anywhere; }
.audit-changes .audit-col { color: var(--rq-text-muted); margin-right: .25rem; }
.audit-changes del { color: var(--rq-danger); text-decoration: line-through; }
.audit-changes ins { color: var(--rq-success); text-decoration: none; }
.audit-changes summary { cursor: pointer; color: var(--rq-text-muted); }
/* Notifications: unread ones tinted with a brand edge. */
.rq-notification { position: relative; }
.rq-notification.is-unread { background: var(--rq-brand-tint); }
.rq-notification.is-unread::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--rq-brand); }
.rq-notification-icon {
    flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--rq-neutral-bg); color: var(--rq-neutral); font-size: 1.125rem;
}
.rq-notification.is-unread .rq-notification-icon { background: var(--rq-surface); color: var(--rq-brand); }

/* ---------- Dialogs ---------- */
.modal-title .ti { color: var(--rq-brand); }
/* Go ahead despite warnings: the warning colour, white text (AA). */
.btn-warning {
    --tblr-btn-bg: var(--rq-warning); --tblr-btn-border-color: var(--rq-warning); --tblr-btn-color: #fff;
    --tblr-btn-hover-bg: var(--rq-warning-pressed); --tblr-btn-hover-border-color: var(--rq-warning-pressed); --tblr-btn-hover-color: #fff;
    --tblr-btn-active-bg: var(--rq-warning-pressed); --tblr-btn-active-border-color: var(--rq-warning-pressed);
}
/* Long lists inside a dialog scroll on their own; the footer stays in view. */
.rq-scroll-45 { max-height: 45vh; overflow-y: auto; }
.rq-scroll-50 { max-height: 50vh; overflow-y: auto; }
.rq-scroll-55 { max-height: 55vh; overflow-y: auto; }
.rq-qty { width: 5rem; }
/* Numbered pieces to tick (handover, issue, transfers): a grid of small cards, ticked ones in the info colour. */
.rq-piece-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .5rem; }
.rq-piece-choice {
    display: flex; gap: .5rem; align-items: flex-start; padding: .5rem; cursor: pointer;
    border: 1px solid var(--rq-border); border-radius: var(--rq-radius-control); background: var(--rq-surface);
}
.rq-piece-choice:has(input:checked) { border-color: var(--rq-info); background: var(--rq-info-bg); }
.rq-piece-choice .form-check-input { margin-top: .2rem; flex-shrink: 0; }
.rq-piece-no { font-weight: 600; font-variant-numeric: tabular-nums; }
.rq-piece-meta { font-size: .75rem; color: var(--rq-text-muted); line-height: 1.3; }
.rq-mw-7 { max-width: 7rem; }
.rq-mw-10 { max-width: 10rem; }
.rq-mw-12 { max-width: 12rem; }
.rq-mw-16 { max-width: 16rem; }
.rq-mw-18 { max-width: 18rem; }
.rq-min-4 { min-width: 4.5rem; }
.rq-min-10 { min-width: 10rem; }
.rq-min-12 { min-width: 12rem; }
.rq-w-7rem { width: 7rem; }
.rq-w-11rem { width: 11rem; }
.rq-w-45 { width: 45%; }

/* ---------- Members' mission pages ---------- */
/* An empty state only once the last card is gone (e.g. after declining). */
.member-cards:not(:has(.member-card)) { display: none; }
.member-cards:has(.member-card) + .member-empty { display: none; }
.member-card-description { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rq-reserve-form { background: var(--rq-warning-bg); }
.rq-mw-24 { max-width: 24rem; }

/* ---------- User guide (/Guide) ---------- */
.rq-guide-role {
    display: flex; align-items: flex-start; gap: var(--rq-space-2);
    padding: var(--rq-space-3) var(--rq-space-4); border-radius: var(--rq-radius-card);
    background: var(--rq-info-bg); color: var(--rq-info);
}
.rq-guide-role .ti { font-size: 1.25rem; line-height: 1.25; }
a.rq-guide-card { color: inherit; text-decoration: none; transition: border-color var(--rq-duration), background-color var(--rq-duration); }
a.rq-guide-card:hover { border-color: #c5d1dd; background: var(--rq-surface-alt); }
.rq-guide-card-icon {
    width: 2.75rem; height: 2.75rem; border-radius: var(--rq-radius-card); flex: none; font-size: 1.375rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--rq-brand-tint); color: var(--rq-brand);
}
.rq-guide-card-title { font-weight: 600; color: var(--rq-navy); margin-bottom: .25rem; }
.rq-guide-card-text { font-size: .875rem; color: var(--rq-text-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rq-guide-nav { position: sticky; top: 1rem; }
.rq-guide-nav .list-group-item.active { border-left: 3px solid var(--rq-brand); }
.rq-guide-toc { padding: var(--rq-space-3) var(--rq-space-4); margin-bottom: var(--rq-space-6); border-radius: var(--rq-radius-control); background: var(--rq-surface-alt); border: 1px solid var(--rq-border-soft); }
.rq-guide-toc ul { list-style: none; margin: 0; padding: 0; columns: 2 16rem; column-gap: var(--rq-space-6); }
.rq-guide-toc li { padding: .125rem 0; break-inside: avoid; }
.rq-guide-contents { margin: 0; columns: 2 16rem; column-gap: var(--rq-space-6); }
.rq-guide-step { display: flex; flex-direction: column; text-decoration: none; max-width: 48%; }
.rq-guide-step .rq-field-label { margin-bottom: 0; }
.rq-guide-chapter-title { display: flex; align-items: center; gap: var(--rq-space-2); font-size: 1.5rem; color: var(--rq-navy); margin-bottom: var(--rq-space-4); }
.rq-guide-chapter-title .ti { color: var(--rq-brand); }

/* The chapter text: readable line length, clear headings, notes as info boxes. */
.rq-guide { max-width: 52rem; line-height: 1.6; }
.rq-guide h2 { font-size: 1.25rem; color: var(--rq-navy); margin: var(--rq-space-8) 0 var(--rq-space-3); padding-top: var(--rq-space-2); border-top: 1px solid var(--rq-border-soft); scroll-margin-top: 1rem; }
.rq-guide > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.rq-guide h3 { font-size: 1rem; color: var(--rq-navy); margin: var(--rq-space-6) 0 var(--rq-space-2); scroll-margin-top: 1rem; }
.rq-guide p, .rq-guide ul, .rq-guide ol { margin-bottom: var(--rq-space-3); }
.rq-guide li { margin-bottom: .25rem; }
.rq-guide li > ul, .rq-guide li > ol { margin-top: .25rem; margin-bottom: 0; }
.rq-guide strong { color: var(--rq-navy); }
.rq-guide blockquote {
    margin: var(--rq-space-4) 0; padding: var(--rq-space-3) var(--rq-space-4);
    border-left: 4px solid var(--rq-info); border-radius: 0 var(--rq-radius-control) var(--rq-radius-control) 0;
    background: var(--rq-info-bg); color: var(--rq-text);
}
.rq-guide blockquote p:last-child { margin-bottom: 0; }
.rq-guide table { width: 100%; margin-bottom: var(--rq-space-4); border-collapse: collapse; font-size: .875rem; }
.rq-guide th, .rq-guide td { padding: .5rem .625rem; border: 1px solid var(--rq-border); vertical-align: top; text-align: left; }
.rq-guide th { background: var(--rq-surface-alt); color: var(--rq-navy); font-weight: 600; }
.rq-guide code { font-size: .875em; color: var(--rq-navy); background: var(--rq-neutral-bg); padding: .1em .35em; border-radius: 4px; }
@media (max-width: 575.98px) {
    .rq-guide table { display: block; overflow-x: auto; }
    .rq-guide-step { max-width: 100%; }
}
@media print {
    .rq-sidebar, .footer { display: none !important; }
    .page-wrapper { margin: 0 !important; }
    .rq-guide-chapter { break-before: page; border: 0; }
    .rq-guide-chapter:first-of-type { break-before: auto; }
    .rq-guide { max-width: none; }
}

/* ── From the layout: third-party fixes ───────────────────────────────── */
/* Tom Select's Bootstrap theme reads --bs-* variables; Tabler only defines --tblr-* ones,
   so without this the dropdown has no background. */
.ts-wrapper, .ts-dropdown {
    --bs-body-bg: var(--tblr-bg-surface, #fff);
    --bs-body-color: var(--tblr-body-color);
    --bs-secondary-bg: var(--tblr-bg-surface-secondary);
    --bs-tertiary-bg: var(--tblr-bg-surface-tertiary);
    --bs-border-color: var(--tblr-border-color);
    --bs-border-color-translucent: var(--tblr-border-color-translucent);
    --bs-border-width: var(--tblr-border-width);
    --bs-border-radius: var(--tblr-border-radius);
    --bs-border-radius-sm: var(--tblr-border-radius-sm);
    --bs-form-invalid-color: var(--tblr-form-invalid-color, var(--rq-danger));
}
/* A validation summary with nothing to report still renders its (empty) box; hide it so the
   red alert only shows when there is a message. */
.validation-summary-valid { display: none; }
.ts-dropdown { z-index: 2000; box-shadow: var(--tblr-box-shadow-dropdown, 0 .5rem 1rem rgba(0,0,0,.15)); }

/* Alpine: hidden until Alpine has started (then x-show decides). */
[x-cloak] { display: none !important; }

/* ── Small utilities (instead of inline style attributes) ─────────────── */
.rq-pre-line { white-space: pre-line; }
.rq-cover-square { aspect-ratio: 1; object-fit: cover; }
.rq-scroll-12, .rq-scroll-14, .rq-scroll-16, .rq-scroll-18, .rq-scroll-22, .rq-scroll-24, .rq-scroll-32 { overflow-y: auto; }
.rq-scroll-12 { max-height: 12rem; }
.rq-scroll-14 { max-height: 14rem; }
.rq-scroll-16 { max-height: 16rem; }
.rq-scroll-18 { max-height: 18rem; }
.rq-scroll-22 { max-height: 22rem; }
.rq-scroll-24 { max-height: 24rem; }
.rq-scroll-32 { max-height: 32rem; }

/* Maps (Leaflet markers read these too): the scene red, the meeting point blue. */
:root { --rq-map-scene: var(--rq-brand); --rq-map-meeting: var(--rq-info); --rq-map-ring: #fff; }
.rq-map-dot { display: inline-block; width: .75rem; height: .75rem; border-radius: 50%; }
.rq-map-dot-scene { background: var(--rq-map-scene); }
.rq-map-dot-meeting { background: var(--rq-map-meeting); }

/* The participant picker (_ParticipantPicker). */
#participant-picker .participant-group-row > td {
    background: var(--tblr-bg-surface-tertiary);
    border-top: 2px solid var(--tblr-border-color);
}
#participant-picker .participant-passive td:not(:first-child) { opacity: .75; }

/* Search planning map (MissionSearch): the map fills the window beside its panel; shapes read
   their colours from these tokens (Leaflet styles are set by the page script). */
:root {
    --rq-search-free: #5f3dc4; --rq-search-assigned: #f59f00; --rq-search-searching: #1c7ed6;
    --rq-search-searched: #2f9e44; --rq-search-hazard: #c92a2a; --rq-search-clue: #fcc419;
    --rq-search-find: #2b8a3e; --rq-search-hasty: #0b7285; --rq-search-gap: #e8590c; --rq-search-warning: #c92a2a;
}
.rq-search-map-wrap { position: relative; }
.rq-search-map { height: max(28rem, calc(100vh - 17rem)); border-radius: inherit; }
@media (max-width: 1199.98px) { .rq-search-map { height: 62vh; min-height: 22rem; } }
.rq-search-toolbar { position: absolute; top: .75rem; left: 3.5rem; right: 6.5rem; z-index: 500; display: flex; flex-wrap: wrap; gap: .5rem; pointer-events: none; }
.rq-search-toolbar > * { pointer-events: auto; box-shadow: 0 1px 4px rgba(20, 35, 51, .14); }
/* Narrow maps: the toolbar keeps its icons, the words go to the tooltip. */
@media (max-width: 767.98px) { .rq-search-toolbar > .btn > span { display: none; } .rq-search-toolbar > .btn > .ti { margin: 0; } }
.rq-search-hint { position: absolute; left: .75rem; right: .75rem; bottom: .75rem; z-index: 500; display: flex; align-items: center; gap: .75rem;
    background: var(--tblr-bg-surface); border: 1px solid var(--tblr-border-color); border-radius: var(--rq-radius, 8px); padding: .5rem .75rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.rq-search-map.rq-picking, .rq-search-map.rq-picking .leaflet-interactive { cursor: crosshair; }
.rq-hasty-icon { color: var(--rq-search-hasty); }
.rq-hasty-marker span { display: block; width: 12px; height: 12px; transform: rotate(45deg); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }
/* The legend floats on the map's bottom left; it hides while a mode's hint takes the bottom. */
.rq-search-legend { position: absolute; left: .75rem; bottom: .75rem; z-index: 500; max-width: calc(100% - 10rem);
    background: color-mix(in srgb, var(--tblr-bg-surface) 94%, transparent); border: 1px solid var(--tblr-border-color);
    border-radius: var(--rq-radius, 8px); box-shadow: 0 1px 4px rgba(20, 35, 51, .14); padding: .35rem .75rem; color: var(--rq-text-muted); }
.rq-search-legend > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; color: var(--rq-navy); }
.rq-search-legend > summary::-webkit-details-marker { display: none; }
.rq-search-legend[open] > summary { display: none; }
.rq-search-legend-items { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: center; }
.rq-search-legend-items > span { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
/* Each legend item switches its kind on the map (mission-search.js). */
.rq-legend-toggle { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; padding: .1rem .35rem;
    border: 0; border-radius: var(--rq-radius-badge); background: none; color: inherit; font: inherit; cursor: pointer; }
.rq-legend-toggle:hover { background: var(--rq-surface-alt); }
.rq-legend-toggle:focus-visible { outline: 2px solid var(--rq-focus); outline-offset: 1px; }
.rq-legend-toggle.is-off { opacity: .45; text-decoration: line-through; }
.rq-legend-track { --c: var(--rq-search-searching); }
.rq-legend-sweep { --c: var(--rq-search-searching); border-top-width: 7px; opacity: .3; }
.rq-legend-radio { background: var(--rq-radio-seen); }
#search-hint:not(.d-none) ~ .rq-search-legend { display: none; }
@media (max-width: 767.98px) { .rq-search-legend { bottom: 2.5rem; max-width: calc(100% - 1.5rem); } }
.rq-legend-dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }
.rq-legend-clue { background: var(--rq-search-clue); }
.rq-legend-find { background: var(--rq-search-find); }
/* A team's latest position: its letter on its colour; red ring and pulse while the watch warns (TeamWatch). */
.rq-team-marker span { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%;
    border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 1px 4px rgba(0, 0, 0, .3); color: #fff; font-weight: 700; font-size: .8rem; }
.rq-team-marker.is-warning span { box-shadow: 0 0 0 3px var(--rq-search-warning); animation: rq-team-warn 1.6s ease-out infinite; }
.rq-team-marker.is-silent span { opacity: .6; }
@keyframes rq-team-warn { 0% { box-shadow: 0 0 0 3px var(--rq-search-warning); } 100% { box-shadow: 0 0 0 10px transparent; } }
@media (prefers-reduced-motion: reduce) { .rq-team-marker.is-warning span { animation: none; } }
.rq-legend-team { display: inline-block; width: .85rem; height: .85rem; border-radius: 50%; background: var(--rq-search-free); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }
.rq-team-live:empty { display: none; }
.rq-team-live { margin-top: .15rem; }
/* The urgency rating (SearchUrgency): factors as option boxes, the total large beside its level. */
.rq-urgency-factor { margin-bottom: .75rem; }
.rq-urgency-factor .form-selectgroup-label { height: 100%; }
@media (min-width: 576px) { .rq-urgency-factor .form-selectgroup { flex-wrap: nowrap; } .rq-urgency-factor .form-selectgroup-item { flex: 1 1 0; min-width: 0; } }
.rq-urgency-number { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; border-radius: 50%;
    background: var(--tblr-bg-surface-secondary); font-weight: 700; }
.form-selectgroup-input:checked + .form-selectgroup-label .rq-urgency-number { background: var(--tblr-primary); color: #fff; }
.rq-urgency-result { display: flex; align-items: center; gap: .75rem; }
.rq-urgency-total { font-size: 1.75rem; font-weight: 700; line-height: 1; color: var(--rq-navy); }
.rq-urgency-factors { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .5rem; }
.rq-urgency-chip { font-size: .75rem; padding: .1rem .45rem; border-radius: 999px; border: 1px solid var(--tblr-border-color); color: var(--rq-text-muted); }
.rq-urgency-chip[data-rating="1"] { border-color: var(--rq-search-warning); color: var(--rq-search-warning); }
.rq-legend-diamond { display: inline-block; width: .6rem; height: .6rem; transform: rotate(45deg); background: var(--rq-search-hasty); margin: 0 .1rem; }
.rq-legend-line { display: inline-block; width: 1.4rem; border-top: 3px solid var(--c, #343a40); }
.rq-legend-dashed { border-top-style: dashed; border-top-width: 2px; }
.rq-legend-box { display: inline-block; width: .9rem; height: .9rem; border-radius: 2px; }
.rq-legend-segment { background: color-mix(in srgb, var(--rq-search-free) 25%, transparent); border: 1.5px solid var(--rq-search-free); }
.rq-legend-hazard { background: color-mix(in srgb, var(--rq-search-hazard) 30%, transparent); border: 1.5px dashed var(--rq-search-hazard); }
/* Approach routes (MissionApproach): one colour per kind of route, read by the map script and the
   elevation profiles; saved routes are wide and pale under the planned ones. */
:root {
    --rq-route-fastest: #1c7ed6; --rq-route-easiest: #2f9e44; --rq-route-other: #e8590c;
    --rq-route-saved: #ae3ec9; --rq-route-terrain: #868e96;
}
.rq-route-fastest { --c: var(--rq-route-fastest); }
.rq-route-easiest { --c: var(--rq-route-easiest); }
.rq-route-other { --c: var(--rq-route-other); }
.rq-legend-saved { --c: var(--rq-route-saved); border-top-width: 6px; opacity: .5; }
.rq-legend-terrain { border: 1.5px dashed var(--rq-route-terrain); }
.rq-approach-map { height: calc(100vh - 18rem); min-height: 26rem; border-radius: var(--rq-radius, 8px) var(--rq-radius, 8px) 0 0; }
@media (max-width: 1199.98px) { .rq-approach-map { height: 55vh; min-height: 20rem; } }
.rq-approach-map.rq-picking, .rq-approach-map.rq-picking .leaflet-interactive { cursor: crosshair; }
.rq-route-card { border-top: 3px solid var(--c); }
.rq-route-figures { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.rq-route-figures > div { display: inline-flex; align-items: center; gap: .35rem; }
.rq-route-profile { display: block; width: 100%; height: 4.5rem; }
.rq-route-profile polygon { fill: var(--c); fill-opacity: .15; }
.rq-route-profile polyline { fill: none; stroke: var(--c); stroke-width: 2; }
.leaflet-tooltip.rq-seg-label { background: transparent; border: 0; box-shadow: none; padding: 0; text-align: center; line-height: 1.1;
    font-weight: 700; font-size: .75rem; color: #212529; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; }
.leaflet-tooltip.rq-seg-label::before { display: none; }
.rq-hide-labels .leaflet-tooltip.rq-seg-label { display: none; }
.rq-team-dot { display: inline-block; width: .75rem; height: .75rem; border-radius: 50%; background: var(--c, #495057); flex: none; }
/* A track's colour on the map, picked per browser: colours that stand out on topo maps and on imagery. */
:root { --rq-track-1: #e03131; --rq-track-2: #ff00ff; --rq-track-3: #ffd400; --rq-track-4: #00e5ff;
    --rq-track-5: #2f9e44; --rq-track-6: #1c3faa; --rq-track-7: #000000; --rq-track-8: #ffffff; }
.rq-track-colour { padding: .25rem; border: 0; background: none; line-height: 0; border-radius: 50%; }
.rq-track-colour .rq-team-dot { width: .875rem; height: .875rem; box-shadow: 0 0 0 1px var(--rq-border); }
.rq-track-swatches { display: grid; grid-template-columns: repeat(4, 1.75rem); gap: .375rem; padding: .25rem .75rem .5rem; }
.rq-track-swatch { width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1px solid var(--rq-border); background: var(--c); padding: 0; }
.rq-track-swatch.is-picked { box-shadow: 0 0 0 2px var(--rq-surface), 0 0 0 4px var(--rq-focus); }
.rq-search-row.is-active > td { background: var(--rq-info-bg); }

/* Search workspace (MissionSearch/Index): map + field activity on the left, Mission insights on the right
   (sticky, own scroll, width dragged on the separator, folded away with is-collapsed); full screen = the map
   over the whole window. Below 1200 px everything stacks. */
.rq-search-workspace { --rq-insights-width: 420px; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.rq-search-main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.rq-search-map-card { overflow: hidden; }
.rq-search-resizer { display: none; }
.rq-search-viewctl { position: absolute; top: .75rem; right: .75rem; z-index: 500; display: flex; flex-direction: column; gap: .5rem; }
.rq-search-viewctl .btn { box-shadow: 0 1px 4px rgba(20, 35, 51, .14); }
.rq-search-map .leaflet-top.leaflet-right { top: 0; right: 3.25rem; }
.rq-search-show-panel { display: none !important; }
@media (min-width: 1200px) {
    .rq-search-workspace { grid-template-columns: minmax(0, 1fr) .5rem var(--rq-insights-width); gap: 0 .5rem; align-items: start; }
    .rq-search-resizer { display: block; align-self: stretch; cursor: col-resize; border-radius: 4px; position: relative; }
    .rq-search-resizer::after { content: ""; position: absolute; top: 50%; left: 50%; width: 4px; height: 2.5rem; margin: -1.25rem 0 0 -2px;
        border-radius: 2px; background: var(--rq-border); transition: background .15s; }
    .rq-search-resizer:hover::after, .rq-resizing .rq-search-resizer::after { background: var(--rq-text-muted); }
    /* Sticky below the layout's top bar. */
    .rq-search-aside { position: sticky; top: 4.5rem; }
    .rq-search-aside .rq-insights { max-height: calc(100vh - 5.5rem); }
    .rq-search-workspace.is-collapsed { grid-template-columns: minmax(0, 1fr); }
    .rq-search-workspace.is-collapsed .rq-search-resizer, .rq-search-workspace.is-collapsed .rq-search-aside { display: none; }
    .rq-search-workspace.is-collapsed .rq-search-show-panel { display: inline-flex !important; }
}
.rq-resizing { cursor: col-resize; user-select: none; }
.rq-resizing .rq-search-map { pointer-events: none; }

/* Full screen: the map and the panel over the whole window; field activity waits underneath. */
.rq-search-fullscreen { overflow: hidden; }
.rq-search-workspace.is-fullscreen { position: fixed; inset: 0; z-index: 1035; padding: .75rem; background: var(--tblr-body-bg); }
.rq-search-workspace.is-fullscreen #search-activity { display: none; }
.rq-search-workspace.is-fullscreen .rq-search-map { height: calc(100vh - 1.5rem); min-height: 0; }
.rq-search-workspace.is-fullscreen .rq-search-aside { top: 0; }
.rq-search-workspace.is-fullscreen .rq-insights { max-height: calc(100vh - 1.5rem); }
@media (max-width: 1199.98px) {
    .rq-search-workspace.is-fullscreen { grid-template-columns: minmax(0, 1fr); }
    .rq-search-workspace.is-fullscreen .rq-search-aside { display: none; }
}

/* Mission insights: one card, tabs at the top, the body scrolls. */
.rq-insights { display: flex; flex-direction: column; margin-bottom: 0; }
.rq-insights-head { flex: none; }
/* Too many tabs for a narrow panel: they scroll sideways (a thin bar, the mouse wheel, the picked one brought into view). */
.rq-insights-tabs { flex: none; padding: 0 .5rem; margin-bottom: 0; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.rq-insights-tabs::-webkit-scrollbar { height: 4px; }
.rq-insights-tabs::-webkit-scrollbar-thumb { background: var(--rq-border); border-radius: 2px; }
.rq-insights-tabs .nav-item { flex: 1 1 auto; }
.rq-insights-tabs .nav-link { width: 100%; justify-content: center; padding-left: .375rem; padding-right: .375rem; white-space: nowrap; }
.rq-insights .rq-info-list.is-compact > div { grid-template-columns: 7rem minmax(0, 1fr); }
.rq-insights-body { overflow-y: auto; overscroll-behavior: contain; min-height: 0; flex: 1 1 auto; }
.rq-insights-section { padding: 1rem; border-bottom: 1px solid var(--rq-border); }
.rq-insights-section:last-child { border-bottom: 0; }
.rq-insights-heading { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .9375rem; font-weight: 600; color: var(--rq-navy); margin-bottom: .75rem; }
.rq-insights-heading > .ti { color: var(--rq-text-muted); font-size: 1.125rem; }
.rq-insights-table { margin-bottom: 0; }
.rq-insights-table > :not(caption) > * > :first-child { padding-left: 1rem; }
.rq-insights-table > :not(caption) > * > :last-child { padding-right: 1rem; }
.rq-insights .list-group-item { padding-left: 1rem; padding-right: 1rem; }
.rq-search-aside .is-picked, #search-activity .is-picked { background: var(--rq-info-bg); box-shadow: inset 3px 0 0 var(--rq-info); }

/* The chance of success: the one figure the page is about. */
.rq-pos { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.rq-pos-tile { border: 1px solid var(--rq-border); border-radius: var(--rq-radius, 8px); padding: .75rem; text-align: center; background: var(--rq-surface-alt); }
.rq-pos-main { background: var(--rq-success-bg); border-color: transparent; }
.rq-pos-value { font-size: 1.75rem; font-weight: 700; line-height: 1.1; color: var(--rq-navy); font-variant-numeric: tabular-nums; }
.rq-pos-main .rq-pos-value { color: var(--rq-success); }
.rq-pos-label { font-size: .8125rem; color: var(--rq-text-muted); margin-top: .25rem; }

/* Most likely segments, and the selected segment's figures. */
.rq-likely { display: flex; flex-direction: column; }
.rq-likely-row { display: grid; grid-template-columns: 3rem 1fr 3.5rem 4.25rem; align-items: center; gap: .75rem; padding: .4rem .25rem;
    color: inherit; text-decoration: none; border-bottom: 1px solid var(--rq-border); font-variant-numeric: tabular-nums; }
.rq-likely-row:last-child { border-bottom: 0; }
.rq-likely-row:hover { background: var(--rq-surface-alt); color: inherit; }
.rq-likely-bar { display: block; height: 6px; border-radius: 3px; background: var(--rq-neutral-bg); overflow: hidden; }
.rq-likely-bar > span { display: block; height: 100%; background: var(--rq-search-free); border-radius: 3px; }
.rq-poa-bar { background: var(--rq-search-free); }
.rq-selected { background: var(--rq-surface-alt); box-shadow: inset 3px 0 0 var(--rq-search-free); }
.rq-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.rq-facts > div { display: flex; flex-direction: column; background: var(--rq-surface); border: 1px solid var(--rq-border); border-radius: var(--rq-radius, 8px); padding: .4rem .5rem; }
.rq-facts span { font-size: .75rem; color: var(--rq-text-muted); }
.rq-facts strong { font-size: 1rem; font-variant-numeric: tabular-nums; }

/* Field activity: who is out and the spots to check, side by side on wide screens. */
.rq-activity { margin-bottom: 0; }
.rq-activity-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.rq-activity-grid > div + div { border-top: 1px solid var(--rq-border); }
@media (min-width: 1400px) {
    .rq-activity-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .rq-activity-grid > div + div { border-top: 0; border-left: 1px solid var(--rq-border); }
}
.rq-activity-section { padding: 1rem; }
.rq-activity-section + .rq-activity-section { border-top: 1px solid var(--rq-border); }
.rq-activity-list { margin: 0 -1rem; }
.rq-activity-list .list-group-item { padding-left: 1rem; padding-right: 1rem; }

/* An active search pulses red (the status the page is about). */
.rq-status-danger .rq-live-dot { animation-name: rq-pulse-danger; }
@keyframes rq-pulse-danger { 0% { box-shadow: 0 0 0 0 rgba(185, 28, 28, .45); } 100% { box-shadow: 0 0 0 .4rem rgba(185, 28, 28, 0); } }
.rq-region-map { height: 22rem; border-radius: var(--rq-radius, 8px); }
.rq-region-map.rq-picking { cursor: crosshair; }

/* Search category form: the find-location classes line up. */
.rq-find-class { min-width: 7.5rem; }

/* Search: light and weather at the starting point (plan form and panel). */
.rq-weather-strip { display: flex; gap: .25rem; overflow-x: auto; }
.rq-weather-block { flex: 0 0 auto; min-width: 4.25rem; text-align: center; padding: .25rem; border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius); }
.rq-attribution { font-size: .75rem; }

/* Search: radio coverage on the map, a link's profile, radio sites. */
:root { --rq-radio-seen: #0c8599; --rq-radio-ground: #868e96; --rq-radio-los: #1c7ed6; --rq-radio-fresnel: #f59f00; --rq-radio-block: #e03131; }
.rq-radio-profile { border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius); padding: .25rem; }
.rq-radio-svg { display: block; width: 100%; height: 170px; }
.rq-radio-ground { fill: var(--rq-radio-ground); fill-opacity: .35; stroke: var(--rq-radio-ground); stroke-width: 1; }
.rq-radio-los { stroke: var(--rq-radio-los); stroke-width: 2; }
.rq-radio-los-blocked { stroke: var(--rq-radio-block); stroke-dasharray: 6 4; }
.rq-radio-fresnel { fill: none; stroke: var(--rq-radio-fresnel); stroke-width: 1.5; stroke-dasharray: 4 3; }
.rq-radio-block { stroke: var(--rq-radio-block); stroke-width: 1.5; }
.rq-radio-icon { color: var(--rq-radio-seen); }