/*
 * Neo Elite UI — Bootstrap 5.3 theme
 *
 * Load after bootstrap.min.css. Pages keep using the standard Bootstrap
 * classes; this sheet only re-themes them (white / vivid cyan, light and dark).
 * The theme follows the `data-bs-theme` attribute set on <html>.
 *
 * Principles: frosted-glass surfaces over a fixed ambient cyan/blue backdrop,
 * translucent tints for semantic colours, hairline borders. Nested surfaces
 * are never blurred twice (readability and rendering cost).
 *
 * Sections
 *   1. Tokens (light, dark, shared)
 *   2. Base
 *   3. Bootstrap components
 *   4. Additions: .btn-ghost, .btn-icon, segmented control, app shell,
 *      stepper, timeline, avatar, empty state, entry page, calendar, dropzone,
 *      signature, chat, heatmap, charts, ID card
 *   5. Third-party libraries: Leaflet (+ markercluster), Select2,
 *      Flatpickr, Quill, SortableJS, driver.js (guided tours)
 */

/* 1. TOKENS
-------------------------------------------------- */
:root,
[data-bs-theme="light"] {
    color-scheme: light;

    --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-font-size: 0.875rem;
    --bs-body-line-height: 1.5;

    --bs-body-color: #3f3f46;
    --bs-body-color-rgb: 63, 63, 70;
    --bs-body-bg: #ffffff;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-emphasis-color: #09090b;
    --bs-emphasis-color-rgb: 9, 9, 11;
    --bs-heading-color: var(--bs-emphasis-color);
    --bs-secondary-color: #71717a;
    --bs-secondary-color-rgb: 113, 113, 122;
    --bs-secondary-bg: #f4f4f5;
    --bs-secondary-bg-rgb: 244, 244, 245;
    --bs-tertiary-color: #a1a1aa;
    --bs-tertiary-color-rgb: 161, 161, 170;
    --bs-tertiary-bg: #fafafa;
    --bs-tertiary-bg-rgb: 250, 250, 250;
    --bs-border-color: rgba(9, 9, 11, 0.08);
    --bs-border-color-translucent: rgba(9, 9, 11, 0.08);

    --bs-primary: #06b6d4;
    --bs-primary-rgb: 6, 182, 212;
    --bs-primary-text-emphasis: #0e7490;
    --bs-secondary: #71717a;
    --bs-secondary-rgb: 113, 113, 122;
    --bs-secondary-text-emphasis: #3f3f46;
    --bs-success: #15803d;
    --bs-success-rgb: 21, 128, 61;
    --bs-success-text-emphasis: #166534;
    --bs-info: #4f46e5;
    --bs-info-rgb: 79, 70, 229;
    --bs-info-text-emphasis: #4338ca;
    --bs-warning: #f59e0b;
    --bs-warning-rgb: 245, 158, 11;
    --bs-warning-text-emphasis: #b45309;
    --bs-danger: #dc2626;
    --bs-danger-rgb: 220, 38, 38;
    --bs-danger-text-emphasis: #b91c1c;
    --bs-light: #fafafa;
    --bs-light-rgb: 250, 250, 250;
    --bs-light-text-emphasis: #3f3f46;
    --bs-dark: #09090b;
    --bs-dark-rgb: 9, 9, 11;
    --bs-dark-text-emphasis: #09090b;

    --bs-link-color: #0e7490;
    --bs-link-color-rgb: 14, 116, 144;
    --bs-link-hover-color: #155e75;
    --bs-link-hover-color-rgb: 21, 94, 117;
    --bs-code-color: #0e7490;
    --bs-highlight-color: #09090b;
    --bs-highlight-bg: #fef3c7;

    --bs-form-valid-color: #15803d;
    --bs-form-valid-border-color: #16a34a;
    --bs-form-invalid-color: #dc2626;
    --bs-form-invalid-border-color: #ef4444;

    --bs-box-shadow-sm: 0 1px 2px rgba(9, 9, 11, 0.05);
    --bs-box-shadow: 0 12px 32px -8px rgba(9, 9, 11, 0.14), 0 2px 6px -2px rgba(9, 9, 11, 0.06);
    --bs-box-shadow-lg: 0 32px 64px -16px rgba(9, 9, 11, 0.28), 0 4px 12px -4px rgba(9, 9, 11, 0.08);
    --bs-box-shadow-inset: inset 0 1px 2px rgba(9, 9, 11, 0.06);

    /* Neo Elite additions */
    --ui-page-bg: #eef2f6;
    --ui-ambient-1: rgba(34, 211, 238, 0.42);
    --ui-ambient-2: rgba(59, 130, 246, 0.24);
    --ui-ambient-3: rgba(45, 212, 191, 0.26);
    --ui-glass-surface: rgba(255, 255, 255, 0.84);
    --ui-glass-chrome: rgba(255, 255, 255, 0.6);
    --ui-glass-bg: rgba(255, 255, 255, 0.8);
    --ui-glass-border: rgba(255, 255, 255, 0.75);
    --ui-glass-shadow: 0 0 0 1px rgba(9, 9, 11, 0.05), 0 10px 30px -16px rgba(8, 51, 68, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    --ui-nav-active-bg: rgba(255, 255, 255, 0.8);
    --ui-surface-raised: #ffffff;
    --ui-input-bg: rgba(255, 255, 255, 0.5);
    --ui-input-bg-focus: rgba(255, 255, 255, 0.92);
    --ui-input-border: rgba(9, 9, 11, 0.12);
    --ui-scroll-thumb: rgba(63, 63, 70, 0.42);
    --ui-control-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    --ui-control-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.05));
    --ui-hover: rgba(9, 9, 11, 0.04);
    --ui-active: rgba(9, 9, 11, 0.07);
    --ui-hover-mix: #000000;
    --ui-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.35);
    --ui-glow: 0 0 0 0 transparent;
    --ui-backdrop: rgba(15, 23, 42, 0.22);
    --ui-tint: 10%;
    --ui-tint-border: 20%;

    --ui-on-primary: #083344;
    --ui-on-secondary: #ffffff;
    --ui-on-success: #ffffff;
    --ui-on-info: #ffffff;
    --ui-on-warning: #1c1917;
    --ui-on-danger: #ffffff;
    --ui-on-light: #09090b;
    --ui-on-dark: #ffffff;

    /* Data viz: validated categorical order (all pairs, CVD-safe) and a
       single-hue sequential cyan ramp, lightest = lowest */
    --ui-chart-1: #0891b2;
    --ui-chart-2: #eb6834;
    --ui-chart-3: #4a3aa7;
    --ui-seq-1: #cffafe;
    --ui-seq-2: #67e8f9;
    --ui-seq-3: #06b6d4;
    --ui-seq-4: #0e7490;
    --ui-seq-5: #164e63;
    --ui-map-tiles-filter: saturate(0.65) contrast(1.02);

    /* Status marks (map pins, calendar, charts): validated for colour-vision
       deficiency in both modes; always paired with the status icon */
    --ui-status-done: #15803d;
    --ui-status-done-ink: #ffffff;
    --ui-status-progress: #0891b2;
    --ui-status-progress-ink: #ffffff;
    --ui-status-planned: #4f46e5;
    --ui-status-planned-ink: #ffffff;
    --ui-status-fix: #d4a017;
    --ui-status-fix-ink: #1c1407;
    --ui-status-cancel: #71717a;
    --ui-status-cancel-ink: #ffffff;

    --ui-sidebar-width: 15.5rem;
    --ui-topbar-height: 3.5rem;
    --ui-shell-gap: 0.5rem;
}

[data-bs-theme="dark"] {
    color-scheme: dark;

    --bs-body-color: #edf2f6;
    --bs-body-color-rgb: 237, 242, 246;
    --bs-body-bg: #303740;
    --bs-body-bg-rgb: 48, 55, 64;
    --bs-emphasis-color: #f8fafc;
    --bs-emphasis-color-rgb: 248, 250, 252;
    --bs-secondary-color: #d4dde6;
    --bs-secondary-color-rgb: 212, 221, 230;
    --bs-secondary-bg: #3a424c;
    --bs-secondary-bg-rgb: 58, 66, 76;
    --bs-tertiary-color: #c1cbd5;
    --bs-tertiary-color-rgb: 193, 203, 213;
    --bs-tertiary-bg: #363e47;
    --bs-tertiary-bg-rgb: 54, 62, 71;
    --bs-border-color: #4d5863;
    --bs-border-color-translucent: #4d5863;

    --bs-primary: #22d3ee;
    --bs-primary-rgb: 34, 211, 238;
    --bs-primary-text-emphasis: #67e8f9;
    --bs-secondary: #a1a1aa;
    --bs-secondary-rgb: 161, 161, 170;
    --bs-secondary-text-emphasis: #e4e4e7;
    --bs-success: #4ade80;
    --bs-success-rgb: 74, 222, 128;
    --bs-success-text-emphasis: #86efac;
    --bs-info: #818cf8;
    --bs-info-rgb: 129, 140, 248;
    --bs-info-text-emphasis: #a5b4fc;
    --bs-warning: #fbbf24;
    --bs-warning-rgb: 251, 191, 36;
    --bs-warning-text-emphasis: #fcd34d;
    --bs-danger: #f87171;
    --bs-danger-rgb: 248, 113, 113;
    --bs-danger-text-emphasis: #fca5a5;
    --bs-light: #46515c;
    --bs-light-rgb: 70, 81, 92;
    --bs-light-text-emphasis: #e4e4e7;
    --bs-dark: #fafafa;
    --bs-dark-rgb: 250, 250, 250;
    --bs-dark-text-emphasis: #fafafa;

    --bs-link-color: #22d3ee;
    --bs-link-color-rgb: 34, 211, 238;
    --bs-link-hover-color: #67e8f9;
    --bs-link-hover-color-rgb: 103, 232, 249;
    --bs-code-color: #67e8f9;
    --bs-highlight-color: #fafafa;
    --bs-highlight-bg: #713f12;

    --bs-form-valid-color: #4ade80;
    --bs-form-valid-border-color: #4ade80;
    --bs-form-invalid-color: #f87171;
    --bs-form-invalid-border-color: #f87171;

    --bs-box-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.22);
    --bs-box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.38), 0 2px 6px -2px rgba(0, 0, 0, 0.24);
    --bs-box-shadow-lg: 0 32px 72px -16px rgba(0, 0, 0, 0.54);

    /* Dark surface hierarchy: canvas, chrome, content, then controls. */
    --ui-page-bg: #1c2025;
    --ui-ambient-1: rgba(34, 211, 238, 0.055);
    --ui-ambient-2: rgba(59, 130, 246, 0.04);
    --ui-ambient-3: rgba(45, 212, 191, 0.03);
    --ui-glass-surface: rgba(48, 55, 64, 0.98);
    --ui-glass-chrome: rgba(39, 45, 52, 0.97);
    --ui-glass-bg: rgba(56, 64, 74, 0.98);
    --ui-scroll-thumb: #75818d;
    --ui-glass-border: #52606d;
    --ui-glass-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 12px 32px -14px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    --ui-nav-active-bg: #424c57;
    --ui-surface-raised: #404a55;
    --ui-input-bg: #3c4550;
    --ui-input-bg-focus: #46515d;
    --ui-input-border: #75818d;
    --ui-control-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --ui-control-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0));
    --ui-hover: rgba(255, 255, 255, 0.07);
    --ui-active: rgba(255, 255, 255, 0.12);
    --ui-hover-mix: #ffffff;
    --ui-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --ui-glow: 0 0 20px -4px rgba(34, 211, 238, 0.55);
    --ui-backdrop: rgba(0, 0, 0, 0.45);
    --ui-tint: 15%;
    --ui-tint-border: 30%;

    --ui-chart-1: #06a3c2;
    --ui-chart-2: #d95926;
    --ui-chart-3: #7c6ee0;
    --ui-seq-1: #10343d;
    --ui-seq-2: #0e5a6b;
    --ui-seq-3: #0891b2;
    --ui-seq-4: #22d3ee;
    --ui-seq-5: #a5f3fc;
    --ui-map-tiles-filter: invert(1) hue-rotate(180deg) brightness(0.85) contrast(0.9) saturate(0.45);

    --ui-status-done: #1f7f45;
    --ui-status-done-ink: #ffffff;
    --ui-status-progress: #06a3c2;
    --ui-status-progress-ink: #042f38;
    --ui-status-planned: #6366f1;
    --ui-status-planned-ink: #ffffff;
    --ui-status-fix: #b58900;
    --ui-status-fix-ink: #1c1407;
    --ui-status-cancel: #71717a;
    --ui-status-cancel-ink: #ffffff;

    --ui-on-primary: #083344;
    --ui-on-secondary: #09090b;
    --ui-on-success: #052e16;
    --ui-on-info: #1e1b4b;
    --ui-on-warning: #1c1407;
    --ui-on-danger: #2b0707;
    --ui-on-light: #fafafa;
    --ui-on-dark: #09090b;
}

/* Shared: translucent tints derived from the tones above */
:root,
[data-bs-theme] {
    --bs-primary-bg-subtle: color-mix(in srgb, var(--bs-primary) var(--ui-tint), transparent);
    --bs-primary-border-subtle: color-mix(in srgb, var(--bs-primary) var(--ui-tint-border), transparent);
    --bs-secondary-bg-subtle: color-mix(in srgb, var(--bs-secondary) var(--ui-tint), transparent);
    --bs-secondary-border-subtle: color-mix(in srgb, var(--bs-secondary) var(--ui-tint-border), transparent);
    --bs-success-bg-subtle: color-mix(in srgb, var(--bs-success) var(--ui-tint), transparent);
    --bs-success-border-subtle: color-mix(in srgb, var(--bs-success) var(--ui-tint-border), transparent);
    --bs-info-bg-subtle: color-mix(in srgb, var(--bs-info) var(--ui-tint), transparent);
    --bs-info-border-subtle: color-mix(in srgb, var(--bs-info) var(--ui-tint-border), transparent);
    --bs-warning-bg-subtle: color-mix(in srgb, var(--bs-warning) var(--ui-tint), transparent);
    --bs-warning-border-subtle: color-mix(in srgb, var(--bs-warning) var(--ui-tint-border), transparent);
    --bs-danger-bg-subtle: color-mix(in srgb, var(--bs-danger) var(--ui-tint), transparent);
    --bs-danger-border-subtle: color-mix(in srgb, var(--bs-danger) var(--ui-tint-border), transparent);
    --bs-light-bg-subtle: var(--ui-hover);
    --bs-light-border-subtle: var(--bs-border-color);
    --bs-dark-bg-subtle: var(--ui-active);
    --bs-dark-border-subtle: var(--ui-input-border);

    /* Radius scale: sm = items inside containers, default = every control
       (all sizes), lg = every container, xl = modals and side panels */
    --bs-border-radius-sm: 0.375rem;
    --bs-border-radius: 0.5rem;
    --bs-border-radius-lg: 0.75rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-xxl: 1.25rem;
    --bs-border-radius-2xl: 1.25rem;
    --bs-border-radius-pill: 50rem;

    --bs-focus-ring-width: 3px;
    --bs-focus-ring-opacity: 0.25;
    --bs-focus-ring-color: rgba(var(--bs-primary-rgb), 0.3);

    --ui-focus-border: var(--bs-primary);
    --ui-focus-ring: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.28);
    --ui-glass-filter: saturate(150%) blur(16px);

    --ui-check-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23083344' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    --ui-indeterminate-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23083344' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
    --ui-radio-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23083344'/%3e%3c/svg%3e");
    --ui-switch-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    --ui-chevron-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2371717a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M3 6l5 5 5-5'/%3e%3c/svg%3e");
    --ui-chevron-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M3 6l5 5 5-5'/%3e%3c/svg%3e");
}

/* 2. BASE
-------------------------------------------------- */
body {
    background-color: var(--ui-page-bg);
    font-feature-settings: "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Fixed ambient backdrop seen (blurred) through every glass surface */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    transform: translateZ(0);
    background:
        radial-gradient(42rem 32rem at 8% -5%, var(--ui-ambient-1), transparent 62%),
        radial-gradient(38rem 30rem at 95% 8%, var(--ui-ambient-2), transparent 62%),
        radial-gradient(44rem 34rem at 55% 105%, var(--ui-ambient-3), transparent 62%),
        var(--ui-page-bg);
    pointer-events: none;
}

::selection {
    background-color: rgba(var(--bs-primary-rgb), 0.25);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

h1, .h1 { font-size: 1.75rem; letter-spacing: -0.03em; }
h2, .h2 { font-size: 1.375rem; }
h3, .h3 { font-size: 1.125rem; }
h4, .h4 { font-size: 1rem; }
h5, .h5 { font-size: 0.9375rem; letter-spacing: -0.01em; }
h6, .h6 { font-size: 0.875rem; letter-spacing: -0.01em; }

.lead {
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--bs-secondary-color);
}

a {
    text-decoration: none;
    text-underline-offset: 0.2em;
}

a:hover {
    text-decoration: underline;
}

/* Links inside running text are underlined: colour alone is not enough */
a:not([class]) {
    text-decoration: underline;
    text-decoration-color: rgba(var(--bs-link-color-rgb), 0.4);
}

a:not([class]):hover {
    text-decoration-color: currentColor;
}

code {
    padding: 0.125rem 0.375rem;
    border-radius: var(--bs-border-radius-sm);
    background-color: var(--ui-active);
    font-size: 0.8125em;
}

kbd {
    padding: 0.0625rem 0.375rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
    background-color: var(--ui-hover);
    box-shadow: none;
    color: var(--bs-secondary-color);
    font-family: inherit;
    font-size: 0.75rem;
}

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

.text-tabular {
    font-variant-numeric: tabular-nums;
}

/* Text typed on several lines (e.g. in the report builder) keeps its line breaks. Report form
   fields apply it to their titles and hints. */
.ui-text-lines,
.rapport-field .form-label,
.rapport-field .form-text {
    white-space: pre-line;
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--ui-input-border) transparent;
}

/* The enhanced thumb sits above a scrollport. Native scrolling stays active
   while its painted bar no longer changes content or neighboring widths. */
[data-ui-overlay-active] {
    scrollbar-width: none !important;
}

[data-ui-overlay-active]::-webkit-scrollbar {
    display: none;
}

/* Scrollport whose bar would only add noise (e.g. a planning grid scrolled with the
   wheel or trackpad): no native bar and no painted thumb, scrolling still works. */
[data-ui-scroll-hidden] {
    scrollbar-width: none !important;
}

[data-ui-scroll-hidden]::-webkit-scrollbar {
    display: none;
}

.ui-overlay-scroll-host-static {
    position: relative;
}

.ui-overlay-scroll-rail {
    position: absolute;
    z-index: 3;
    width: 10px;
    border-radius: 999px;
    opacity: 0.5;
    touch-action: none;
    transition: opacity 0.15s ease;
}

.ui-overlay-scroll-rail[hidden] {
    display: none;
}

.ui-overlay-scroll-host:hover > .ui-overlay-scroll-rail,
.ui-overlay-scroll-host:focus-within > .ui-overlay-scroll-rail,
.ui-overlay-scroll-rail:hover,
.ui-overlay-scroll-rail[data-dragging] {
    opacity: 1;
}

.ui-overlay-scroll-thumb {
    position: absolute;
    right: 2px;
    left: 2px;
    border-radius: 999px;
    background: var(--ui-scroll-thumb);
}

@media (prefers-reduced-motion: reduce) {
    .ui-overlay-scroll-rail {
        transition: none;
    }
}

/* 3. BOOTSTRAP COMPONENTS
-------------------------------------------------- */

/* Buttons */
.btn {
    --bs-btn-font-size: 0.875rem;
    --bs-btn-font-weight: 500;
    --bs-btn-padding-x: 0.875rem;
    --bs-btn-padding-y: 0.4375rem;
    --bs-btn-border-radius: var(--bs-border-radius);
    --bs-btn-focus-box-shadow: var(--ui-focus-ring);
    --bs-btn-disabled-opacity: 0.45;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    letter-spacing: -0.005em;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease;
}

.btn-sm,
.btn-group-sm > .btn {
    --bs-btn-font-size: 0.8125rem;
    --bs-btn-padding-x: 0.625rem;
    --bs-btn-padding-y: 0.3125rem;
    --bs-btn-border-radius: var(--bs-border-radius);
    gap: 0.375rem;
}

.btn-lg,
.btn-group-lg > .btn {
    --bs-btn-font-size: 0.9375rem;
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: 0.625rem;
    --bs-btn-border-radius: var(--bs-border-radius);
}

/* Solid */
.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger {
    --ui-btn-tone: var(--bs-primary);
    --ui-btn-on: var(--ui-on-primary);
    --bs-btn-color: var(--ui-btn-on);
    --bs-btn-bg: var(--ui-btn-tone);
    --bs-btn-border-color: var(--ui-btn-tone);
    --bs-btn-hover-color: var(--ui-btn-on);
    --bs-btn-hover-bg: color-mix(in srgb, var(--ui-btn-tone) 92%, var(--ui-hover-mix));
    --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
    --bs-btn-active-color: var(--ui-btn-on);
    --bs-btn-active-bg: color-mix(in srgb, var(--ui-btn-tone) 85%, var(--ui-hover-mix));
    --bs-btn-active-border-color: var(--bs-btn-active-bg);
    --bs-btn-disabled-color: var(--ui-btn-on);
    --bs-btn-disabled-bg: var(--ui-btn-tone);
    --bs-btn-disabled-border-color: var(--bs-btn-border-color);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), var(--bs-box-shadow-sm);
}

.btn-primary:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), var(--bs-box-shadow-sm), var(--ui-glow);
}

.btn-success { --ui-btn-tone: var(--bs-success); --ui-btn-on: var(--ui-on-success); }
.btn-info { --ui-btn-tone: var(--bs-info); --ui-btn-on: var(--ui-on-info); }
.btn-warning { --ui-btn-tone: var(--bs-warning); --ui-btn-on: var(--ui-on-warning); }
.btn-danger { --ui-btn-tone: var(--bs-danger); --ui-btn-on: var(--ui-on-danger); }

/* Soft (outline-*): translucent tint */
.btn-outline-primary,
.btn-outline-success,
.btn-outline-info,
.btn-outline-warning,
.btn-outline-danger {
    --ui-btn-tone: var(--bs-primary);
    --ui-btn-on: var(--ui-on-primary);
    --ui-btn-text: var(--bs-primary-text-emphasis);
    --bs-btn-color: var(--ui-btn-text);
    --bs-btn-bg: color-mix(in srgb, var(--ui-btn-tone) 8%, transparent);
    --bs-btn-border-color: color-mix(in srgb, var(--ui-btn-tone) 22%, transparent);
    --bs-btn-hover-color: var(--ui-btn-text);
    --bs-btn-hover-bg: color-mix(in srgb, var(--ui-btn-tone) 15%, transparent);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--ui-btn-tone) 35%, transparent);
    --bs-btn-active-color: var(--ui-btn-on);
    --bs-btn-active-bg: var(--ui-btn-tone);
    --bs-btn-active-border-color: var(--ui-btn-tone);
    --bs-btn-disabled-color: var(--ui-btn-text);
    --bs-btn-disabled-bg: color-mix(in srgb, var(--ui-btn-tone) 8%, transparent);
    --bs-btn-disabled-border-color: transparent;
    background-image: var(--ui-control-sheen);
    box-shadow: var(--ui-control-highlight), var(--bs-box-shadow-sm);
}

.btn-outline-success { --ui-btn-tone: var(--bs-success); --ui-btn-on: var(--ui-on-success); --ui-btn-text: var(--bs-success-text-emphasis); }
.btn-outline-info { --ui-btn-tone: var(--bs-info); --ui-btn-on: var(--ui-on-info); --ui-btn-text: var(--bs-info-text-emphasis); }
.btn-outline-warning { --ui-btn-tone: var(--bs-warning); --ui-btn-on: var(--ui-on-warning); --ui-btn-text: var(--bs-warning-text-emphasis); }
.btn-outline-danger { --ui-btn-tone: var(--bs-danger); --ui-btn-on: var(--ui-on-danger); --ui-btn-text: var(--bs-danger-text-emphasis); }

/* Neutral default button */
.btn-outline-secondary {
    --bs-btn-color: var(--bs-emphasis-color);
    --bs-btn-bg: var(--ui-input-bg);
    --bs-btn-border-color: var(--ui-input-border);
    --bs-btn-hover-color: var(--bs-emphasis-color);
    --bs-btn-hover-bg: var(--ui-input-bg-focus);
    --bs-btn-hover-border-color: var(--ui-input-border);
    --bs-btn-active-color: var(--bs-emphasis-color);
    --bs-btn-active-bg: var(--ui-active);
    --bs-btn-active-border-color: var(--ui-input-border);
    --bs-btn-disabled-color: var(--bs-secondary-color);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-border-color);
    background-image: var(--ui-control-sheen);
    box-shadow: var(--ui-control-highlight), var(--bs-box-shadow-sm);
}

.btn-secondary {
    --bs-btn-color: var(--bs-emphasis-color);
    --bs-btn-bg: var(--ui-active);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--bs-emphasis-color);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-emphasis-color) 11%, transparent);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--bs-emphasis-color);
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-emphasis-color) 15%, transparent);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--bs-secondary-color);
    --bs-btn-disabled-bg: var(--ui-hover);
    --bs-btn-disabled-border-color: transparent;
}

.btn-light {
    --bs-btn-color: var(--bs-emphasis-color);
    --bs-btn-bg: var(--ui-hover);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-color: var(--bs-emphasis-color);
    --bs-btn-hover-bg: var(--ui-active);
    --bs-btn-hover-border-color: var(--bs-border-color);
    --bs-btn-active-color: var(--bs-emphasis-color);
    --bs-btn-active-bg: var(--ui-active);
    --bs-btn-active-border-color: var(--ui-input-border);
}

.btn-dark {
    --bs-btn-color: var(--bs-body-bg);
    --bs-btn-bg: var(--bs-emphasis-color);
    --bs-btn-border-color: var(--bs-emphasis-color);
    --bs-btn-hover-color: var(--bs-body-bg);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-emphasis-color) 85%, var(--bs-body-bg));
    --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
    --bs-btn-active-color: var(--bs-body-bg);
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-emphasis-color) 75%, var(--bs-body-bg));
    --bs-btn-active-border-color: var(--bs-btn-active-bg);
    box-shadow: var(--ui-highlight), var(--bs-box-shadow-sm);
}

.btn-link {
    --bs-btn-color: var(--bs-link-color);
    --bs-btn-hover-color: var(--bs-link-hover-color);
    --bs-btn-active-color: var(--bs-link-hover-color);
    --bs-btn-disabled-color: var(--bs-secondary-color);
    text-decoration: none;
}

.btn-link:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* A checked neutral toggle stays neutral: grey fill, no colour (pair it with a check mark) */
.btn-check:checked + .btn-outline-secondary,
.btn-check:active + .btn-outline-secondary {
    --bs-btn-active-color: var(--bs-emphasis-color);
    --bs-btn-active-bg: var(--ui-active);
    --bs-btn-active-border-color: var(--ui-input-border);
    position: relative;
    z-index: 2;
}

.btn-group > .btn {
    box-shadow: none;
}

.btn-group {
    border-radius: var(--bs-border-radius);
}

.btn-close {
    --bs-btn-close-focus-shadow: var(--ui-focus-ring);
    --bs-btn-close-opacity: 0.45;
    --bs-btn-close-hover-opacity: 0.85;
    border-radius: var(--bs-border-radius-sm);
}

/* Forms */
.form-label,
.col-form-label {
    margin-bottom: 0.375rem;
    color: var(--bs-emphasis-color);
    font-size: 0.8125rem;
    font-weight: 500;
}

.form-text {
    margin-top: 0.375rem;
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
}

/* Text area that starts as tall as an input and grows with its content (up to ~8 lines),
   so it lines up with the inputs of the same row: <textarea class="form-control ui-textarea-auto" rows="1">.
   Browsers without field-sizing keep the one-line height and scroll inside. */
.ui-textarea-auto {
    min-height: calc(1.5em + 0.875rem + calc(var(--bs-border-width) * 2));
    max-height: 12.5rem;
    resize: none;
    field-sizing: content;
}

.form-control,
.form-select {
    --ui-autofill-bg: var(--ui-input-bg);
    --ui-autofill-text: var(--bs-emphasis-color);
    --ui-autofill-shadow: 0 0 transparent;
    padding: 0.4375rem 0.75rem;
    border-color: var(--ui-input-border);
    border-radius: var(--bs-border-radius);
    background-color: var(--ui-input-bg);
    color: var(--bs-emphasis-color);
    font-size: 0.875rem;
    box-shadow: var(--ui-control-highlight), var(--bs-box-shadow-sm), var(--ui-autofill-shadow);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

/* Browsers force their autofill background. Clip it to the text, then paint the
   field with its current theme fill, including translucent light-mode surfaces.
   Keep the inset fill separate so focus, validation and grouped-field shadows survive. */
.form-control:is(:autofill, :-webkit-autofill) {
    --ui-autofill-shadow: inset 0 0 0 1000px var(--ui-autofill-bg);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: var(--ui-autofill-text);
    caret-color: var(--ui-autofill-text);
}

.form-select {
    padding-right: 2.25rem;
    background-position: right 0.625rem center;
}

.form-select option {
    background-color: var(--ui-surface-raised);
}

.form-control::placeholder {
    color: var(--bs-tertiary-color);
}

.form-control:hover:not(:disabled):not(:focus):not(.is-valid):not(.is-invalid),
.form-select:hover:not(:disabled):not(:focus):not(.is-valid):not(.is-invalid) {
    border-color: color-mix(in srgb, var(--bs-emphasis-color) 22%, transparent);
}

.form-control:focus,
.form-select:focus {
    --ui-autofill-bg: var(--ui-input-bg-focus);
    border-color: var(--ui-focus-border);
    background-color: var(--ui-input-bg-focus);
    color: var(--bs-emphasis-color);
    box-shadow: var(--ui-focus-ring), var(--ui-autofill-shadow);
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly]:not(.flatpickr-input) {
    --ui-autofill-bg: var(--ui-hover);
    --ui-autofill-text: var(--bs-secondary-color);
    background-color: var(--ui-hover);
    color: var(--bs-secondary-color);
    box-shadow: var(--ui-autofill-shadow);
}

.form-control-sm,
.form-select-sm {
    padding-top: 0.3125rem;
    padding-bottom: 0.3125rem;
    font-size: 0.8125rem;
    border-radius: var(--bs-border-radius);
}

.form-control-lg,
.form-select-lg {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    font-size: 0.9375rem;
    border-radius: var(--bs-border-radius);
}

.form-control::file-selector-button {
    padding: 0.4375rem 0.75rem;
    margin: -0.4375rem -0.75rem;
    margin-inline-end: 0.75rem;
    border-inline-end-color: var(--ui-input-border);
    background-color: var(--ui-hover);
    color: var(--bs-emphasis-color);
    font-weight: 500;
}

.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
    background-color: var(--ui-active);
}

.form-control.is-valid:focus,
.was-validated .form-control:valid:focus,
.form-select.is-valid:focus {
    box-shadow: 0 0 0 3px rgba(var(--bs-success-rgb), 0.2), var(--ui-autofill-shadow);
}

.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus,
.form-select.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(var(--bs-danger-rgb), 0.2), var(--ui-autofill-shadow);
}

.valid-feedback,
.invalid-feedback {
    margin-top: 0.375rem;
    font-size: 0.75rem;
}

.input-group {
    --ui-input-group-radius: var(--bs-border-radius);
    border-radius: var(--ui-input-group-radius);
    box-shadow: var(--ui-control-highlight), var(--bs-box-shadow-sm);
}

.input-group-lg {
    --ui-input-group-radius: var(--bs-border-radius-lg);
}

.input-group > .form-control,
.input-group > .form-select,
.input-group > .btn {
    box-shadow: var(--ui-autofill-shadow, none);
}

.input-group-text {
    padding: 0.4375rem 0.75rem;
    border-color: var(--ui-input-border);
    background-color: var(--ui-input-bg);
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
}

.input-group:focus-within {
    box-shadow: var(--ui-focus-ring);
}

.input-group:focus-within > .form-control:focus,
.input-group:focus-within > .form-select:focus {
    box-shadow: var(--ui-autofill-shadow);
}

/* Fields follow the group's focus state, like the addon text: :focus can lag behind
   :focus-within (autofocus in a background window), which split the group in two tones */
.input-group:focus-within > .form-control:not(.is-valid):not(.is-invalid),
.input-group:focus-within > .form-select:not(.is-valid):not(.is-invalid) {
    --ui-autofill-bg: var(--ui-input-bg-focus);
    border-color: var(--ui-focus-border);
    background-color: var(--ui-input-bg-focus);
}

/* Leading icon sits inside the field. Reserve Bootstrap's shared-border overlap
   so the focused control cannot cover the icon's right edge. */
.input-group > .input-group-text:first-child:has(> .bi) {
    padding-right: var(--bs-border-width);
    border-right: 0;
}

/* Trailing hint (e.g. a <kbd> shortcut) sits inside the field too */
.input-group > .form-control + .input-group-text:last-child:has(> kbd) {
    padding-left: 0;
    border-left: 0;
}

.input-group > .form-control:has(+ .input-group-text:last-child > kbd) {
    border-right: 0;
}

.input-group:focus-within > .input-group-text {
    border-color: var(--ui-focus-border);
    background-color: var(--ui-input-bg-focus);
}

.input-group > .input-group-text:first-child:has(> .bi) + .form-control {
    border-left: 0;
}

.input-group-sm {
    border-radius: var(--bs-border-radius);
}

.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text,
.input-group-sm > .btn {
    padding-top: 0.3125rem;
    padding-bottom: 0.3125rem;
    font-size: 0.8125rem;
    border-radius: var(--bs-border-radius);
}

/* Only visible controls define the ends; loading indicators, feedback and
 * dropdown menus must not leave the exposed end of a field square. */
.input-group > :is(.form-control, .form-select, .input-group-text, .btn, .form-floating),
.input-group > .form-floating > :is(.form-control, .form-select) {
    border-radius: 0;
}

.input-group > :is(.form-control, .form-select, .input-group-text, .btn, .form-floating):nth-child(1 of :is(.form-control, .form-select, .input-group-text, .btn, .form-floating):not([hidden], [type="hidden"]):not([x-cloak], .d-none):not([style*="display: none"], [style*="display:none"])),
.input-group > .form-floating:nth-child(1 of :is(.form-control, .form-select, .input-group-text, .btn, .form-floating):not([hidden], [type="hidden"]):not([x-cloak], .d-none):not([style*="display: none"], [style*="display:none"])) > :is(.form-control, .form-select) {
    border-top-left-radius: var(--ui-input-group-radius);
    border-bottom-left-radius: var(--ui-input-group-radius);
    margin-left: 0;
}

.input-group > :is(.form-control, .form-select, .input-group-text, .btn, .form-floating):nth-last-child(1 of :is(.form-control, .form-select, .input-group-text, .btn, .form-floating):not([hidden], [type="hidden"]):not([x-cloak], .d-none):not([style*="display: none"], [style*="display:none"])),
.input-group > .form-floating:nth-last-child(1 of :is(.form-control, .form-select, .input-group-text, .btn, .form-floating):not([hidden], [type="hidden"]):not([x-cloak], .d-none):not([style*="display: none"], [style*="display:none"])) > :is(.form-control, .form-select) {
    border-top-right-radius: var(--ui-input-group-radius);
    border-bottom-right-radius: var(--ui-input-group-radius);
}

.form-check {
    min-height: 1.25rem;
}

.form-check-label {
    color: var(--bs-body-color);
}

.form-check-input {
    --bs-form-check-bg: var(--ui-input-bg);
    width: 1rem;
    height: 1rem;
    margin-top: 0.15em;
    border-color: color-mix(in srgb, var(--bs-emphasis-color) 22%, transparent);
    box-shadow: var(--bs-box-shadow-sm);
}

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

.form-check-input:focus {
    border-color: var(--ui-focus-border);
    box-shadow: var(--ui-focus-ring);
}

.form-check-input:checked {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary);
}

.form-check-input:checked[type="checkbox"] {
    --bs-form-check-bg-image: var(--ui-check-icon);
}

.form-check-input:checked[type="radio"] {
    --bs-form-check-bg-image: var(--ui-radio-icon);
}

.form-check-input[type="checkbox"]:indeterminate {
    --bs-form-check-bg-image: var(--ui-indeterminate-icon);
    border-color: var(--bs-primary);
    background-color: var(--bs-primary);
}

/* Switch: filled track, white knob */
.form-switch .form-check-input,
.form-switch .form-check-input:focus,
.form-switch .form-check-input:checked {
    --bs-form-switch-bg: var(--ui-switch-icon);
}

[data-bs-theme] .form-switch .form-check-input:not(:checked):not(:focus) {
    --bs-form-switch-bg: var(--ui-switch-icon);
}

.form-switch .form-check-input {
    border-color: transparent;
    background-color: color-mix(in srgb, var(--bs-emphasis-color) 18%, transparent);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.form-switch .form-check-input:checked {
    background-color: var(--bs-primary);
}

.form-switch .form-check-input:focus {
    box-shadow: var(--ui-focus-ring);
}

.form-range::-webkit-slider-runnable-track {
    height: 0.375rem;
    background-color: var(--ui-active);
}

.form-range::-webkit-slider-thumb {
    margin-top: -0.3125rem;
    background-color: var(--bs-primary);
    box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.18);
}

.form-range::-moz-range-track {
    height: 0.375rem;
    background-color: var(--ui-active);
}

.form-range::-moz-range-thumb {
    background-color: var(--bs-primary);
    box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.18);
}

.form-range:focus::-webkit-slider-thumb {
    box-shadow: var(--ui-focus-ring);
}

.form-range:focus::-moz-range-thumb {
    box-shadow: var(--ui-focus-ring);
}

/*
 * Content surfaces (cards, lists, accordions) are translucent but NOT blurred:
 * a live backdrop-filter on every card is recomputed while scrolling and makes
 * long pages lag. Blur is reserved for the few chrome and floating layers.
 */

/* Cards */
.card {
    --bs-card-bg: var(--ui-glass-surface);
    --bs-card-border-color: var(--ui-glass-border);
    --bs-card-border-radius: var(--bs-border-radius-lg);
    --bs-card-inner-border-radius: calc(var(--bs-border-radius-lg) - 1px);
    --bs-card-cap-bg: transparent;
    --bs-card-cap-padding-x: 1.25rem;
    --bs-card-cap-padding-y: 0.875rem;
    --bs-card-spacer-x: 1.25rem;
    --bs-card-spacer-y: 1.25rem;
    --bs-card-title-spacer-y: 0.375rem;
    --bs-card-subtitle-color: var(--bs-secondary-color);
    box-shadow: var(--ui-glass-shadow);
}

.card .card {
    --bs-card-bg: var(--ui-input-bg);
    --bs-card-border-color: var(--bs-border-color);
    box-shadow: none;
}

.card-header,
.card-footer {
    border-color: var(--bs-border-color);
}

.card-title {
    color: var(--bs-emphasis-color);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.card-subtitle {
    font-size: 0.8125rem;
    font-weight: 400;
}

.card-footer {
    background-color: color-mix(in srgb, var(--bs-emphasis-color) 2%, transparent);
}

/* Containing block for absolutely positioned cell content (.visually-hidden labels):
   without it they escape the horizontal scroll and widen the page scrollport. */
.table-responsive {
    position: relative;
}

.card > .table,
.card > .table-responsive > .table {
    margin-bottom: 0;
}

.card > .table > :not(caption) > * > :first-child,
.card > .table-responsive > .table > :not(caption) > * > :first-child {
    padding-left: var(--bs-card-spacer-x);
}

.card > .table > :not(caption) > * > :last-child,
.card > .table-responsive > .table > :not(caption) > * > :last-child {
    padding-right: var(--bs-card-spacer-x);
}

.card > .table > :last-child > tr:last-child > *,
.card > .table-responsive > .table > :last-child > tr:last-child > * {
    border-bottom-width: 0;
}

/* Tables */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--bs-body-color);
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-striped-bg: color-mix(in srgb, var(--bs-emphasis-color) 2.5%, transparent);
    --bs-table-hover-bg: var(--ui-hover);
    --bs-table-hover-color: var(--bs-body-color);
    --bs-table-active-bg: color-mix(in srgb, var(--bs-primary) 7%, transparent);
    --bs-table-active-color: var(--bs-body-color);
    font-size: 0.875rem;
}

.table > :not(caption) > * > * {
    padding: 0.75rem;
}

.table-sm > :not(caption) > * > * {
    padding: 0.5rem 0.625rem;
}

/* Bootstrap's .table-light keeps a white fill and black text in dark mode: follow the theme */
[data-bs-theme="dark"] .table-light {
    --bs-table-color: var(--bs-body-color);
    --bs-table-bg: var(--bs-tertiary-bg);
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-striped-bg: var(--bs-tertiary-bg);
    --bs-table-striped-color: var(--bs-body-color);
    --bs-table-active-bg: var(--bs-secondary-bg);
    --bs-table-active-color: var(--bs-body-color);
    --bs-table-hover-bg: var(--bs-secondary-bg);
    --bs-table-hover-color: var(--bs-body-color);
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

.ui-row-clickable {
    cursor: pointer;
}

.table > thead {
    vertical-align: middle;
}

.table > thead > tr > th {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    color: var(--bs-secondary-color);
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
}

.table > thead > tr > th a,
.table > thead > tr > th .btn-link {
    color: inherit;
    font: inherit;
    text-decoration: none;
}

.table > thead > tr > th .btn-link {
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    gap: 0.25rem;
}

.table > thead > tr > th a:hover,
.table > thead > tr > th .btn-link:hover,
.table > thead > tr > th[aria-sort] {
    color: var(--bs-emphasis-color);
}

/* Header row kept visible while the rows scroll inside their container (e.g. an
   .overflow-auto .table-responsive); the header is painted with the card surface. */
.ui-table-sticky-head > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: linear-gradient(var(--bs-card-bg, var(--ui-surface-raised)), var(--bs-card-bg, var(--ui-surface-raised))) var(--bs-body-bg);
}

/* Column header written vertically (read bottom to top) so many narrow columns fit side
   by side, e.g. one column per person in a matrix. Long labels are cut; keep the full
   text in a title: <th class="ui-th-vertical" title="Name"><span>Name</span></th> */
.table > thead > tr > th.ui-th-vertical {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    vertical-align: bottom;
}

.ui-th-vertical > span {
    display: inline-block;
    max-height: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* Grouped table: one collapsible summary row per group ([data-ui-group-toggle]), its rows
   hidden until opened. Group heads and their rows stay neutral (grey head, plain rows, a
   stronger rule closing the group): colour is kept for the row priority edge and the status
   badges, so it always means something. Rows without a group stay plain rows. */
.ui-table-group-row {
    --bs-table-bg: var(--bs-tertiary-bg);
}

.ui-table-group-item.is-last > * {
    border-bottom-color: var(--bs-border-color);
    border-bottom-width: 2px;
}

.ui-table-group-item > :nth-child(2) {
    padding-left: 1.75rem;
}

/* Priority rows: a coloured edge on the row, always paired with a worded badge in the row
   (e.g. "Urgent") so the urgency never relies on colour alone.
   <tr class="ui-row-urgent">…<span class="badge bg-danger"><i class="bi bi-exclamation-triangle-fill"></i>Urgent · statut</span>…</tr> */
.ui-row-urgent { --ui-row-edge: var(--bs-danger); --bs-table-bg: color-mix(in srgb, var(--bs-danger) 5%, var(--bs-body-bg)); }
.ui-row-attention { --ui-row-edge: var(--bs-warning); }

.ui-row-urgent > :first-child,
.ui-row-attention > :first-child {
    position: relative;
}

.ui-row-urgent > :first-child::before,
.ui-row-attention > :first-child::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background-color: var(--ui-row-edge);
}

/* Arrival highlight: the element the user was just taken to (e.g. "next changed field") lights up
   for a moment, then fades. Set with NeoUi.flash(element); a still outline replaces the fade when
   reduced motion is requested. */
@keyframes ui-flash {
    from {
        background-color: var(--bs-highlight-bg);
        box-shadow: 0 0 0 0.5rem var(--bs-highlight-bg);
    }

    to {
        background-color: transparent;
        box-shadow: 0 0 0 0.5rem transparent;
    }
}

.ui-flash {
    border-radius: var(--bs-border-radius);
    animation: ui-flash 2s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .ui-flash {
        animation: none;
        outline: 2px solid var(--bs-warning);
        outline-offset: 0.375rem;
    }
}

/* Secondary action of an item (e.g. a field's history) shown when the item is hovered or holds
   the keyboard focus. Mouse devices only: always visible on touch screens. Opacity (not
   visibility) keeps the action in the tab order.
   <div class="ui-hover-host">…<button class="btn btn-ghost btn-icon ui-hover-reveal">…</button></div> */
@media (hover: hover) {
    .ui-hover-host:not(:hover, :focus-within) .ui-hover-reveal {
        opacity: 0;
    }
}

.ui-group-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--bs-emphasis-color);
    font-weight: 600;
    text-align: start;
}

.ui-group-toggle > .bi-chevron-right {
    transition: transform 0.15s ease;
}

.ui-group-toggle[aria-expanded="true"] > .bi-chevron-right {
    transform: rotate(90deg);
}

/* Sub-groups of an open group: indented behind a rule so each level reads as part of its parent.
   <div class="ui-group-children">…nested group heads and rows…</div> */
.ui-group-children {
    margin-left: 1.25rem;
    border-left: 2px solid var(--bs-border-color);
}

@media (prefers-reduced-motion: reduce) {
    .ui-group-toggle > .bi-chevron-right {
        transition: none;
    }
}

/* Badges: pills with translucent tints */
.badge {
    --bs-badge-font-size: 0.75rem;
    --bs-badge-font-weight: 500;
    --bs-badge-padding-x: 0.5625rem;
    --bs-badge-padding-y: 0.25rem;
    --bs-badge-border-radius: var(--bs-border-radius-pill);
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    line-height: 1.15;
    vertical-align: 0.05em;
}

.badge.rounded-pill {
    --bs-badge-padding-x: 0.5rem;
}

/* Thin ring in the badge's own colour keeps tints legible on glass */
.badge[class*="-subtle"] {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent);
}

.badge.bg-primary, .text-bg-primary { color: var(--ui-on-primary) !important; }
.badge.bg-secondary, .text-bg-secondary { color: var(--ui-on-secondary) !important; }
.badge.bg-success, .text-bg-success { color: var(--ui-on-success) !important; }
.badge.bg-info, .text-bg-info { color: var(--ui-on-info) !important; }
.badge.bg-warning, .text-bg-warning { color: var(--ui-on-warning) !important; }
.badge.bg-danger, .text-bg-danger { color: var(--ui-on-danger) !important; }
.badge.bg-light, .text-bg-light { color: var(--ui-on-light) !important; }
.badge.bg-dark, .text-bg-dark { color: var(--ui-on-dark) !important; }

.btn .badge {
    top: 0;
}

/* Removable chip: <span class="badge …">Label <button class="btn-close"></button></span> */
.badge > .btn-close {
    margin-left: 0.125rem;
    font-size: 0.5rem;
}

/* Alerts */
.alert {
    --bs-alert-padding-x: 1rem;
    --bs-alert-padding-y: 0.875rem;
    --bs-alert-border-radius: var(--bs-border-radius-lg);
    font-size: 0.875rem;
}

.alert-heading {
    color: inherit;
    font-size: 0.875rem;
    font-weight: 600;
}

.alert-dismissible .btn-close {
    padding: 1.125rem 1rem;
}

/* Navs & tabs */
.nav {
    --bs-nav-link-color: var(--bs-secondary-color);
    --bs-nav-link-hover-color: var(--bs-emphasis-color);
    --bs-nav-link-disabled-color: var(--bs-tertiary-color);
    --bs-nav-link-font-size: 0.875rem;
    --bs-nav-link-font-weight: 500;
    --bs-nav-link-padding-x: 0.75rem;
    --bs-nav-link-padding-y: 0.4375rem;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nav-fill .nav-link,
.nav-justified .nav-link {
    justify-content: center;
}

.nav-link:hover {
    text-decoration: none;
}

.nav-link:focus-visible {
    box-shadow: var(--ui-focus-ring);
}

.nav-tabs {
    --bs-nav-tabs-border-color: var(--bs-border-color);
    --bs-nav-tabs-border-radius: var(--bs-border-radius);
    --bs-nav-tabs-link-hover-border-color: transparent;
    --bs-nav-tabs-link-active-color: var(--bs-emphasis-color);
    --bs-nav-tabs-link-active-bg: var(--ui-glass-bg);
    --bs-nav-tabs-link-active-border-color: var(--bs-border-color) var(--bs-border-color) transparent;
}

.nav-underline {
    --bs-nav-underline-gap: 1.25rem;
    --bs-nav-underline-border-width: 2px;
    --bs-nav-underline-link-active-color: var(--bs-emphasis-color);
    border-bottom: 1px solid var(--bs-border-color);
}

.nav-underline .nav-link {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    margin-bottom: -1px;
}

.nav-underline .nav-link:hover,
.nav-underline .nav-link:focus {
    border-bottom-color: var(--ui-input-border);
}

.nav-underline .nav-link.active,
.nav-underline .show > .nav-link {
    border-bottom-color: var(--bs-primary);
    font-weight: 500;
}

.nav-pills {
    --bs-nav-pills-border-radius: var(--bs-border-radius);
    --bs-nav-pills-link-active-color: var(--bs-emphasis-color);
    --bs-nav-pills-link-active-bg: var(--ui-active);
    gap: 0.25rem;
}

.nav-pills .nav-link:not(.active):hover {
    background-color: var(--ui-hover);
}

.nav .badge {
    font-size: 0.6875rem;
}

/* Breadcrumb */
.breadcrumb {
    --bs-breadcrumb-font-size: 0.8125rem;
    --bs-breadcrumb-margin-bottom: 0.5rem;
    --bs-breadcrumb-divider-color: var(--bs-tertiary-color);
    --bs-breadcrumb-item-active-color: var(--bs-emphasis-color);
    --bs-breadcrumb-item-padding-x: 0.5rem;
}

.breadcrumb-item a {
    color: var(--bs-secondary-color);
}

.breadcrumb-item a:hover {
    color: var(--bs-emphasis-color);
    text-decoration: none;
}

/* Pagination: separate rounded buttons */
.pagination {
    --bs-pagination-padding-x: 0.625rem;
    --bs-pagination-padding-y: 0.3125rem;
    --bs-pagination-font-size: 0.875rem;
    --bs-pagination-color: var(--bs-body-color);
    --bs-pagination-bg: transparent;
    --bs-pagination-border-color: transparent;
    --bs-pagination-border-radius: var(--bs-border-radius);
    --bs-pagination-hover-color: var(--bs-emphasis-color);
    --bs-pagination-hover-bg: var(--ui-hover);
    --bs-pagination-hover-border-color: transparent;
    --bs-pagination-focus-color: var(--bs-emphasis-color);
    --bs-pagination-focus-bg: var(--ui-hover);
    --bs-pagination-focus-box-shadow: var(--ui-focus-ring);
    --bs-pagination-active-color: var(--bs-emphasis-color);
    --bs-pagination-active-bg: var(--ui-input-bg);
    --bs-pagination-active-border-color: var(--ui-input-border);
    --bs-pagination-disabled-color: var(--bs-tertiary-color);
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-disabled-border-color: transparent;
    gap: 0.25rem;
    margin-bottom: 0;
}

/* Bootstrap's paginator keeps a paragraph margin beside the page buttons. */
.d-none.flex-sm-fill > div > p.small.text-muted {
    margin-bottom: 0;
}

.pagination-sm {
    --bs-pagination-padding-x: 0.5rem;
    --bs-pagination-padding-y: 0.1875rem;
    --bs-pagination-font-size: 0.8125rem;
    --bs-pagination-border-radius: var(--bs-border-radius);
}

.pagination > .page-item > .page-link {
    min-width: 2rem;
    margin-left: 0;
    border-radius: var(--bs-pagination-border-radius);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.pagination-sm > .page-item > .page-link {
    min-width: 1.75rem;
}

.pagination > .page-item.active > .page-link {
    box-shadow: var(--bs-box-shadow-sm);
    font-weight: 600;
}

.page-link:hover {
    text-decoration: none;
}

/* Floating layers: frosted glass */
.dropdown-menu {
    --bs-dropdown-min-width: 12rem;
    --bs-dropdown-padding-x: 0.3125rem;
    --bs-dropdown-padding-y: 0.3125rem;
    --bs-dropdown-font-size: 0.875rem;
    --bs-dropdown-color: var(--bs-body-color);
    --bs-dropdown-bg: var(--ui-glass-bg);
    --bs-dropdown-border-color: var(--bs-border-color);
    --bs-dropdown-border-radius: var(--bs-border-radius-lg);
    --bs-dropdown-inner-border-radius: var(--bs-border-radius);
    --bs-dropdown-box-shadow: var(--bs-box-shadow);
    --bs-dropdown-divider-bg: var(--bs-border-color);
    --bs-dropdown-divider-margin-y: 0.3125rem;
    --bs-dropdown-link-color: var(--bs-body-color);
    --bs-dropdown-link-hover-color: var(--bs-emphasis-color);
    --bs-dropdown-link-hover-bg: var(--ui-active);
    --bs-dropdown-link-active-color: var(--bs-emphasis-color);
    --bs-dropdown-link-active-bg: var(--ui-active);
    --bs-dropdown-link-disabled-color: var(--bs-tertiary-color);
    --bs-dropdown-item-padding-x: 0.625rem;
    --bs-dropdown-item-padding-y: 0.4375rem;
    --bs-dropdown-header-color: var(--bs-tertiary-color);
    --bs-dropdown-header-padding-x: 0.625rem;
    --bs-dropdown-header-padding-y: 0.375rem;
    box-shadow: var(--ui-highlight), var(--bs-dropdown-box-shadow);
    -webkit-backdrop-filter: var(--ui-glass-filter);
    backdrop-filter: var(--ui-glass-filter);
}

/* Native top-layer menus retain their DOM ancestry (Livewire and modal focus),
   but escape scrollable bodies and transformed/glass surfaces. */
[data-ui-floating][popover] {
    margin: 0;
    inset: auto;
    min-width: min(var(--ui-floating-min-width, 0px), calc(100vw - 1rem)) !important;
    max-width: calc(100vw - 1rem);
    max-height: calc(100dvh - 1rem);
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

:is(.dropdown-menu, .popover, .flatpickr-calendar)[data-ui-floating] {
    background: var(--ui-surface-raised);
}

.tooltip[data-ui-floating] {
    border: 0;
    background: transparent;
    overflow: visible;
}

.flatpickr-calendar[data-ui-floating] {
    position: fixed !important;
    top: var(--ui-floating-top) !important;
    left: var(--ui-floating-left) !important;
    right: auto !important;
}

.flatpickr-calendar[data-ui-floating].animate.open {
    animation: none;
}

[data-ui-floating].w-100 {
    width: var(--ui-floating-width) !important;
    min-width: min(var(--ui-floating-width), calc(100vw - 1rem)) !important;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    border-radius: var(--bs-border-radius-sm);
}

.dropdown-item:hover {
    text-decoration: none;
}

.dropdown-item > i {
    width: 1rem;
    color: var(--bs-secondary-color);
    text-align: center;
}

.dropdown-item.active > i,
.dropdown-item:active > i {
    color: var(--bs-primary-text-emphasis);
}

.dropdown-item.text-danger:hover,
.dropdown-item.text-danger:focus {
    background-color: var(--bs-danger-bg-subtle);
}

.dropdown-item.text-danger > i {
    color: inherit;
}

.dropdown-header {
    font-size: 0.75rem;
    font-weight: 500;
}

.dropdown-toggle::after {
    width: 0.625rem;
    height: 0.625rem;
    margin-left: 0;
    border: 0;
    background-color: currentColor;
    -webkit-mask: var(--ui-chevron-mask) center / contain no-repeat;
    mask: var(--ui-chevron-mask) center / contain no-repeat;
    opacity: 0.6;
    vertical-align: middle;
}

.toast {
    --bs-toast-padding-x: 1rem;
    --bs-toast-padding-y: 0.75rem;
    --bs-toast-font-size: 0.875rem;
    --bs-toast-color: var(--bs-body-color);
    --bs-toast-bg: var(--ui-glass-bg);
    --bs-toast-border-color: var(--bs-border-color);
    --bs-toast-border-radius: var(--bs-border-radius-lg);
    --bs-toast-box-shadow: var(--bs-box-shadow);
    --bs-toast-header-color: var(--bs-emphasis-color);
    --bs-toast-header-bg: transparent;
    --bs-toast-header-border-color: var(--bs-border-color);
    box-shadow: var(--ui-highlight), var(--bs-toast-box-shadow);
    -webkit-backdrop-filter: var(--ui-glass-filter);
    backdrop-filter: var(--ui-glass-filter);
}

.tooltip {
    --bs-tooltip-bg: var(--bs-emphasis-color);
    --bs-tooltip-color: var(--bs-body-bg);
    --bs-tooltip-font-size: 0.75rem;
    --bs-tooltip-padding-x: 0.5rem;
    --bs-tooltip-padding-y: 0.3125rem;
    --bs-tooltip-border-radius: var(--bs-border-radius-sm);
    --bs-tooltip-opacity: 1;
}

.tooltip-inner {
    font-weight: 500;
}

.popover {
    --bs-popover-bg: var(--ui-glass-bg);
    --bs-popover-border-color: var(--bs-border-color);
    --bs-popover-border-radius: var(--bs-border-radius-lg);
    --bs-popover-inner-border-radius: calc(var(--bs-border-radius-lg) - 1px);
    --bs-popover-box-shadow: var(--bs-box-shadow);
    --bs-popover-font-size: 0.8125rem;
    --bs-popover-header-bg: transparent;
    --bs-popover-header-color: var(--bs-emphasis-color);
    --bs-popover-header-font-size: 0.875rem;
    --bs-popover-header-padding-x: 0.875rem;
    --bs-popover-header-padding-y: 0.625rem;
    --bs-popover-body-padding-x: 0.875rem;
    --bs-popover-body-padding-y: 0.75rem;
    box-shadow: var(--ui-highlight), var(--bs-popover-box-shadow);
    -webkit-backdrop-filter: var(--ui-glass-filter);
    backdrop-filter: var(--ui-glass-filter);
}

.popover-header {
    padding-bottom: 0;
    border-bottom: 0;
    font-weight: 600;
}

/* Detail popover (hover card over dense content such as a planning): opaque
   surface, wider, title then a key line, then aligned icon + text rows. */
.ui-popover-detail {
    --bs-popover-max-width: 22rem;
    --bs-popover-header-font-size: 0.9375rem;
    --bs-popover-box-shadow: var(--bs-box-shadow-lg);
    background: linear-gradient(var(--bs-card-bg, var(--ui-surface-raised)), var(--bs-card-bg, var(--ui-surface-raised))) var(--bs-body-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Detail card carrying sentences (builder elements): wider */
.ui-popover-detail.ui-popover-detail-wide {
    --bs-popover-max-width: 26rem;
}

.ui-popover-detail .popover-body {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    color: var(--bs-body-color);
}

.ui-popover-detail-row {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
}

.ui-popover-detail-row > .bi {
    flex-shrink: 0;
    width: 1rem;
    color: var(--bs-secondary-color);
    text-align: center;
}

/* Modals & offcanvas: glass over a blurred backdrop */
/* Native dialogs use the kit's modal layout while staying above open forms. */
dialog.modal[open] {
    display: block;
}

dialog.modal::backdrop {
    background: var(--ui-backdrop);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.modal {
    --bs-modal-bg: var(--ui-glass-bg);
    --bs-modal-border-color: var(--ui-glass-border);
    --bs-modal-border-radius: var(--bs-border-radius-xl);
    --bs-modal-inner-border-radius: calc(var(--bs-border-radius-xl) - 1px);
    --bs-modal-box-shadow: var(--bs-box-shadow-lg);
    --bs-modal-padding: 1.5rem;
    --bs-modal-header-padding: 1.25rem 1.5rem 0;
    --bs-modal-header-border-width: 0;
    --bs-modal-footer-border-width: 0;
    --bs-modal-footer-gap: 0.5rem;
    --bs-modal-title-line-height: 1.4;
}

.modal-content {
    box-shadow: var(--ui-highlight), var(--bs-modal-box-shadow);
    -webkit-backdrop-filter: var(--ui-glass-filter);
    backdrop-filter: var(--ui-glass-filter);
}

.modal-title {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.015em;
}

/* Keep help and close together: two auto margins would split the free space. */
.modal-header:has(> [data-ui-tour-start]) {
    column-gap: 0.5rem;
}

.modal-header > [data-ui-tour-start] {
    margin-inline-start: auto;
    flex-shrink: 0;
}

.modal-header > [data-ui-tour-start] ~ .btn-close {
    margin-inline-start: 0;
    flex-shrink: 0;
}

.modal-header:not(.flex-column) > :has(> [data-ui-tour-start]):has(> .btn-close) {
    margin-inline-start: auto;
    flex-shrink: 0;
}

.modal-footer {
    gap: var(--bs-modal-footer-gap);
    padding: 0 1.5rem 1.25rem;
}

/* The gap replaces Bootstrap's per-button margins */
.modal-footer > * {
    margin: 0;
}

.modal-dialog-scrollable .modal-header {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.modal-dialog-scrollable .modal-footer {
    padding-top: 1rem;
    border-top: 1px solid var(--bs-border-color);
}

/* Wider than modal-xl on desktop (document previews); phones keep their own size */
@media (min-width: 992px) {
    .modal-xxl {
        --bs-modal-width: min(1800px, calc(100vw - 3rem));
    }
}

/* PDF pages rendered as canvases: one column, or side by side on desktop when the spread view is on */
.ui-pdf-pages {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: .5rem;
    padding: .5rem;
}

.ui-pdf-pages > canvas {
    display: block;
    width: 100%;
    height: auto;
}

@media (min-width: 992px) {
    .ui-pdf-pages.is-spread {
        grid-template-columns: repeat(var(--pdf-columns, 1), minmax(0, 1fr));
    }
}

/* Document preview whose header floats over the pages: a bar at the top, only its controls once the pages scroll */
.ui-doc-preview.has-floating-header > .ui-doc-preview-header {
    position: absolute;
    inset: 0 0 auto;
    z-index: 20;
    padding-bottom: 0.75rem;
    background-color: var(--bs-modal-bg);
    -webkit-backdrop-filter: var(--ui-glass-filter);
    backdrop-filter: var(--ui-glass-filter);
    transition: background-color 0.2s ease;
}

.ui-doc-preview.has-floating-header > .ui-doc-preview-header.is-floating {
    background-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    pointer-events: none;
}

.ui-doc-preview.has-floating-header > .ui-doc-preview-header.is-floating > * {
    pointer-events: auto;
    border-radius: var(--bs-border-radius);
    background-color: var(--ui-glass-surface);
    box-shadow: var(--ui-glass-shadow);
    -webkit-backdrop-filter: var(--ui-glass-filter);
    backdrop-filter: var(--ui-glass-filter);
}

.ui-doc-preview.has-floating-header > .ui-doc-preview-header.is-floating > .ui-segmented {
    background-image: linear-gradient(var(--ui-active), var(--ui-active));
}

.ui-doc-preview.has-floating-header > .ui-doc-preview-header.is-floating > :not(.ui-segmented) {
    padding: 0.1875rem;
}

.ui-doc-preview.has-floating-header .ui-pdf-pages {
    padding-top: var(--doc-preview-header-h, 0.5rem);
}

.ui-doc-preview.has-floating-header .ui-doc-preview-status {
    top: var(--doc-preview-header-h, 0) !important;
}

.modal-backdrop,
.offcanvas-backdrop {
    --bs-backdrop-bg: var(--ui-backdrop);
    --bs-backdrop-opacity: 1;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.offcanvas,
.offcanvas-xs, .offcanvas-sm, .offcanvas-md, .offcanvas-lg, .offcanvas-xl, .offcanvas-xxl {
    --bs-offcanvas-width: 26rem;
    --bs-offcanvas-padding-x: 1.5rem;
    --bs-offcanvas-padding-y: 1.25rem;
    --bs-offcanvas-bg: var(--ui-glass-bg);
    --bs-offcanvas-border-color: var(--ui-glass-border);
    --bs-offcanvas-box-shadow: var(--bs-box-shadow-lg);
    --bs-offcanvas-title-line-height: 1.4;
}

/* Floating side panel detached from the viewport edges */
.offcanvas.offcanvas-end,
.offcanvas.offcanvas-start {
    top: var(--ui-shell-gap);
    bottom: var(--ui-shell-gap);
    max-width: calc(100vw - 2 * var(--ui-shell-gap));
    border: 1px solid var(--bs-offcanvas-border-color);
    border-radius: var(--bs-border-radius-xl);
}

.offcanvas.offcanvas-end {
    right: var(--ui-shell-gap);
}

.offcanvas.offcanvas-start {
    left: var(--ui-shell-gap);
}

.offcanvas.showing,
.offcanvas.show:not(.hiding) {
    box-shadow: var(--ui-highlight), var(--bs-offcanvas-box-shadow);
}

.offcanvas {
    -webkit-backdrop-filter: var(--ui-glass-filter);
    backdrop-filter: var(--ui-glass-filter);
}

.offcanvas-title {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.015em;
}

/* Accordion */
.accordion {
    --bs-accordion-bg: var(--ui-glass-surface);
    --bs-accordion-color: var(--bs-body-color);
    --bs-accordion-border-color: var(--ui-glass-border);
    --bs-accordion-border-radius: var(--bs-border-radius-lg);
    --bs-accordion-inner-border-radius: calc(var(--bs-border-radius-lg) - 1px);
    --bs-accordion-btn-padding-x: 1.25rem;
    --bs-accordion-btn-padding-y: 0.875rem;
    --bs-accordion-btn-color: var(--bs-emphasis-color);
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-btn-icon-width: 0.875rem;
    --bs-accordion-btn-focus-box-shadow: inset var(--ui-focus-ring);
    --bs-accordion-body-padding-x: 1.25rem;
    --bs-accordion-body-padding-y: 0;
    --bs-accordion-active-color: var(--bs-emphasis-color);
    --bs-accordion-active-bg: transparent;
}

[data-bs-theme] .accordion-button::after {
    --bs-accordion-btn-icon: var(--ui-chevron-icon);
    --bs-accordion-btn-active-icon: var(--ui-chevron-icon);
}

.accordion-button {
    font-size: 0.875rem;
    font-weight: 500;
}

.accordion-button:hover {
    background-color: var(--ui-hover);
}

.accordion-button:not(.collapsed) {
    box-shadow: none;
}

/* Card accordions have no .accordion-item to provide Bootstrap's corner radii. */
.card.accordion > .card-header:first-child .accordion-button {
    border-top-left-radius: var(--bs-card-inner-border-radius);
    border-top-right-radius: var(--bs-card-inner-border-radius);
}

.card.accordion > .card-header:first-child .accordion-button.collapsed {
    border-bottom-left-radius: var(--bs-card-inner-border-radius);
    border-bottom-right-radius: var(--bs-card-inner-border-radius);
}

/* Keep the focus indicator visible in both the expanded and collapsed states. */
.accordion-button:focus {
    box-shadow: var(--bs-accordion-btn-focus-box-shadow);
}

.accordion-body {
    padding-bottom: 1rem;
    color: var(--bs-secondary-color);
}

.accordion:not(.accordion-flush) {
    border-radius: var(--bs-accordion-border-radius);
    box-shadow: var(--ui-glass-shadow);
}

.accordion-flush {
    --bs-accordion-bg: transparent;
    --bs-accordion-border-color: var(--bs-border-color);
}

/* List group */
.list-group {
    --bs-list-group-bg: var(--ui-glass-surface);
    --bs-list-group-color: var(--bs-body-color);
    --bs-list-group-border-color: var(--ui-glass-border);
    --bs-list-group-border-radius: var(--bs-border-radius-lg);
    --bs-list-group-item-padding-x: 1rem;
    --bs-list-group-item-padding-y: 0.75rem;
    --bs-list-group-action-color: var(--bs-body-color);
    --bs-list-group-action-hover-color: var(--bs-emphasis-color);
    --bs-list-group-action-hover-bg: var(--ui-hover);
    --bs-list-group-action-active-color: var(--bs-emphasis-color);
    --bs-list-group-action-active-bg: var(--ui-active);
    --bs-list-group-active-color: var(--bs-emphasis-color);
    --bs-list-group-active-bg: var(--ui-active);
    --bs-list-group-active-border-color: var(--bs-border-color);
    --bs-list-group-disabled-color: var(--bs-tertiary-color);
    font-size: 0.875rem;
}

.list-group:not(.list-group-flush) {
    box-shadow: var(--ui-glass-shadow);
}

:is(.card, .modal-content, .offcanvas) .list-group {
    --bs-list-group-bg: transparent;
    --bs-list-group-border-color: var(--bs-border-color);
    box-shadow: none;
}

:is(.modal-content, .offcanvas) .list-group:not(.list-group-flush) {
    --bs-list-group-bg: var(--ui-input-bg);
}

.list-group-item.active {
    font-weight: 500;
}

.list-group-item-action:hover {
    text-decoration: none;
}

/* Progress & spinners */
.progress,
.progress-stacked {
    --bs-progress-height: 0.375rem;
    --bs-progress-font-size: 0.6875rem;
    --bs-progress-bg: var(--ui-active);
    --bs-progress-border-radius: var(--bs-border-radius-pill);
    --bs-progress-bar-color: var(--ui-on-primary);
    --bs-progress-bar-bg: var(--bs-primary);
}

.progress > .progress-bar {
    border-radius: inherit;
}

.progress-bar.bg-success { color: var(--ui-on-success); }
.progress-bar.bg-warning { color: var(--ui-on-warning); }
.progress-bar.bg-danger { color: var(--ui-on-danger); }
.progress-bar.bg-info { color: var(--ui-on-info); }

.progress-stacked > .progress > .progress-bar {
    border-radius: 0;
}

.spinner-border {
    --bs-spinner-border-width: 0.15em;
}

.spinner-border-sm {
    --bs-spinner-width: 0.875rem;
    --bs-spinner-height: 0.875rem;
    --bs-spinner-border-width: 0.125em;
}

.placeholder {
    background-color: var(--bs-emphasis-color);
    border-radius: var(--bs-border-radius-sm);
    opacity: 0.07;
}

.placeholder-glow .placeholder {
    animation: ui-placeholder-glow 1.6s ease-in-out infinite;
}

@keyframes ui-placeholder-glow {
    50% {
        opacity: 0.03;
    }
}

/* Shimmer: a light band sweeps across the placeholders while a list or card loads */
.placeholder-shimmer .placeholder {
    opacity: 1;
    background-color: transparent;
    background-image: linear-gradient(90deg,
        color-mix(in srgb, var(--bs-emphasis-color) 6%, transparent) 25%,
        color-mix(in srgb, var(--bs-emphasis-color) 12%, transparent) 37%,
        color-mix(in srgb, var(--bs-emphasis-color) 6%, transparent) 63%);
    background-size: 400% 100%;
    animation: ui-shimmer 1.4s ease-in-out infinite;
}

@keyframes ui-shimmer {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .placeholder-shimmer .placeholder {
        animation: none;
    }
}

/* 4. ADDITIONS
-------------------------------------------------- */

/* Loading region: while a request refreshes a result zone (a list, a
 * calendar, a map), that zone alone dims and a thin bar fills along its top
 * edge, slowing down as it waits; its clicks are blocked. When the response
 * arrives, ui.js adds .is-loaded: the bar completes and fades while the fresh
 * content fades in. Never put it on filters, which must stay clickable in a
 * row. Toggle .is-loading, e.g. wire:loading.class="is-loading" with
 * wire:loading.attr="aria-busy" and a wire:target scoped to the zone. Nothing
 * shows for requests shorter than 0.15 s. */
.ui-loading-region {
    position: relative;
}

/* Veil */
.ui-loading-region::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: inherit;
    background-color: color-mix(in srgb, var(--bs-body-bg) 55%, transparent);
    cursor: progress;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

/* Progress bar: transitions (not animations) so completing starts from where it stopped */
.ui-loading-region::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 6;
    height: 0.1875rem;
    border-radius: inherit;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background-color: var(--bs-primary);
    box-shadow: 0 0 0.5rem color-mix(in srgb, var(--bs-primary) 50%, transparent);
    transform-origin: left;
    scale: 0 1;
    opacity: 0;
    pointer-events: none;
}

.ui-loading-region.is-loading::after {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease 0.15s, visibility 0s linear 0.15s;
}

.ui-loading-region.is-loading::before {
    scale: 0.9 1;
    opacity: 1;
    transition: scale 8s cubic-bezier(0.1, 0.8, 0.2, 1) 0.15s, opacity 0s linear 0.15s;
}

.ui-loading-region.is-loaded::before {
    scale: 1 1;
    opacity: 0;
    transition: scale 0.2s ease-out, opacity 0.3s ease 0.2s;
}

/* A busy zone nested in another busy zone keeps a single bar and veil */
.ui-loading-region.is-loading .ui-loading-region::before,
.ui-loading-region.is-loading .ui-loading-region::after {
    opacity: 0;
    visibility: hidden;
}

.ui-loading-region.is-loaded > * {
    animation: ui-loading-fade-in 0.3s ease both;
}

@keyframes ui-loading-fade-in {
    from {
        opacity: 0.5;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ui-loading-region.is-loading::before {
        transition-duration: 0s;
    }

    .ui-loading-region.is-loaded > * {
        animation: none;
    }
}

/* Ghost button: transparent until hovered (toolbars, row actions) */
.btn-ghost {
    --bs-btn-color: var(--bs-secondary-color);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--bs-emphasis-color);
    --bs-btn-hover-bg: var(--ui-active);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--bs-emphasis-color);
    --bs-btn-active-bg: var(--ui-active);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--bs-tertiary-color);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
}

/* Square icon-only button; combine with any .btn-* variant */
.btn-icon {
    --bs-btn-padding-x: 0;
    width: calc(1.3125rem + 2 * var(--bs-btn-padding-y) + 2px);
    flex-shrink: 0;
}

.btn-icon.btn-sm {
    width: calc(1.21875rem + 2 * var(--bs-btn-padding-y) + 2px);
}

.btn-icon.btn-lg {
    width: calc(1.40625rem + 2 * var(--bs-btn-padding-y) + 2px);
}

/* Segmented control: a .btn-group of .btn-check radios, or .ui-segmented with .active buttons */
.ui-segmented,
.btn-group:has(> .btn-check) {
    gap: 0.125rem;
    padding: 0.1875rem;
    border-radius: var(--bs-border-radius);
    background-color: var(--ui-active);
}

.ui-segmented > .btn,
.btn-group:has(> .btn-check) > .btn {
    --bs-btn-padding-y: 0.25rem;
    --bs-btn-color: var(--bs-secondary-color);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--bs-emphasis-color);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--bs-emphasis-color);
    --bs-btn-active-bg: var(--bs-body-bg);
    --bs-btn-active-border-color: transparent;
    margin-left: 0 !important;
    border-radius: calc(var(--bs-border-radius) - 0.1875rem) !important;
    background-image: none;
    box-shadow: none;
}

.ui-segmented > .btn.active,
.btn-group:has(> .btn-check) > .btn-check:checked + .btn {
    box-shadow: var(--bs-box-shadow-sm), 0 0 0 1px var(--bs-border-color);
}

[data-bs-theme="dark"] .ui-segmented > .btn,
[data-bs-theme="dark"] .btn-group:has(> .btn-check) > .btn {
    --bs-btn-active-bg: rgba(255, 255, 255, 0.1);
}

.ui-segmented > .btn-icon,
.btn-group:has(> .btn-check) > .btn-icon {
    width: 2rem;
}

/* Status dot: colour follows `text-*` utilities */
.ui-dot {
    display: inline-block;
    width: 0.4375rem;
    height: 0.4375rem;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: currentColor;
}

/* Icon tile: colour follows `bg-*-subtle` / `text-*-emphasis` utilities */
.ui-icon-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    border-radius: var(--bs-border-radius);
    font-size: 1.0625rem;
}

.ui-icon-tile-lg {
    width: 3rem;
    height: 3rem;
    border-radius: var(--bs-border-radius-lg);
    font-size: 1.375rem;
}

/* Avatar */
.ui-avatar {
    --ui-avatar-size: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ui-avatar-size);
    height: var(--ui-avatar-size);
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 50%;
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    font-size: calc(var(--ui-avatar-size) * 0.38);
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
}

.ui-avatar > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ui-avatar-sm { --ui-avatar-size: 1.5rem; }
.ui-avatar-lg { --ui-avatar-size: 2.75rem; }
.ui-avatar-xl { --ui-avatar-size: 4rem; }

.ui-avatar-status {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 28%;
    height: 28%;
    border-radius: 50%;
    background-color: currentColor;
    box-shadow: 0 0 0 2px var(--bs-body-bg);
}

.ui-avatar-group {
    display: inline-flex;
}

/* Opaque tint (from the text colour) so overlapping avatars stay readable */
.ui-avatar-group > .ui-avatar {
    background-image: linear-gradient(
        color-mix(in srgb, currentColor 16%, var(--bs-body-bg)),
        color-mix(in srgb, currentColor 16%, var(--bs-body-bg))
    );
    box-shadow: 0 0 0 2px var(--bs-body-bg);
}

.ui-avatar-group > .ui-avatar + .ui-avatar {
    margin-left: -0.3rem;
}

/* Empty state */
.ui-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    max-width: 26rem;
    margin: 0 auto;
    padding: 2.5rem 1rem;
    text-align: center;
}

.ui-empty-title {
    margin: 0.5rem 0 0;
    color: var(--bs-emphasis-color);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.ui-empty-text {
    margin: 0;
    color: var(--bs-secondary-color);
}

.ui-empty-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* Entry page (sign-in and account access): one centred column over the ambient
   backdrop: logo, welcome title, then the form in a glass card. */
.ui-entry {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 1rem 1.25rem;
}

/* Page tools (theme menu) pinned to the top corner */
.ui-entry-tools {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
}

.ui-entry-inner {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 36rem;
    padding: 3rem 0 2rem;
}

.ui-entry-intro {
    margin-bottom: 1.75rem;
    text-align: center;
}

.ui-entry-logo {
    display: inline-flex;
    margin: 0 auto 1.25rem;
}

.ui-entry-logo:hover {
    text-decoration: none;
}

.ui-entry-logo .ui-brand-mark {
    width: 4.5rem;
    height: 2.25rem;
}

.ui-entry-eyebrow {
    margin: 0 0 0.5rem;
    color: var(--bs-primary-text-emphasis);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ui-entry-title {
    margin: 0;
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.15;
}

/* Highlighted words of the title: cyan to indigo, both text-emphasis tones */
.ui-entry-title-accent {
    background-image: linear-gradient(90deg, var(--bs-primary-text-emphasis), var(--bs-info-text-emphasis));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ui-entry-lead {
    margin: 0.75rem 0 0;
    color: var(--bs-secondary-color);
    font-size: 0.9375rem;
}

/* The welcome may run wider than the form, which keeps a comfortable measure */
.ui-entry-card {
    width: 100%;
    max-width: 26rem;
    margin-inline: auto;
}

.ui-entry-card > .card-body {
    padding: 1.5rem;
}

.ui-entry-note {
    margin: 1.25rem 0 0;
    color: var(--bs-secondary-color);
    font-size: 0.8125rem;
    text-align: center;
}

@media (min-width: 576px) {
    .ui-entry-title {
        font-size: 2.25rem;
    }

    .ui-entry-card > .card-body {
        padding: 2rem;
    }
}

/* Stepper */
.ui-stepper {
    display: flex;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: ui-step;
}

.ui-step {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
    color: var(--bs-secondary-color);
    font-size: 0.8125rem;
    font-weight: 500;
    counter-increment: ui-step;
}

.ui-step:last-child {
    flex: 0 0 auto;
}

.ui-step::before {
    content: counter(ui-step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.625rem;
    height: 1.625rem;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--ui-active);
    font-size: 0.75rem;
    font-weight: 600;
}

.ui-step:not(:last-child)::after {
    content: "";
    flex: 1 1 auto;
    min-width: 1rem;
    height: 1px;
    background-color: var(--bs-border-color);
}

.ui-step.is-active {
    color: var(--bs-emphasis-color);
}

.ui-step.is-active::before {
    background-color: var(--bs-body-bg);
    box-shadow: 0 0 0 1.5px var(--bs-primary), 0 0 0 5px rgba(var(--bs-primary-rgb), 0.18);
    color: var(--bs-primary-text-emphasis);
}

.ui-step.is-complete::before {
    content: "\F633"; /* bootstrap-icons check-lg */
    background-color: var(--bs-primary);
    color: var(--ui-on-primary);
    font-family: "bootstrap-icons";
}

.ui-step.is-complete::after {
    background-color: var(--bs-primary);
}

/* Semantic step colours, with a continuous transition to the next step. */
.ui-step[data-ui-step-tone="success"] { --ui-step-color: var(--bs-success); --ui-step-on: var(--ui-on-success); }
.ui-step[data-ui-step-tone="warning"] { --ui-step-color: var(--bs-warning); --ui-step-on: var(--ui-on-warning); }
.ui-step[data-ui-step-tone="danger"] { --ui-step-color: var(--bs-danger); --ui-step-on: var(--ui-on-danger); }
.ui-step[data-ui-step-tone="info"] { --ui-step-color: var(--bs-info); --ui-step-on: var(--ui-on-info); }
.ui-step[data-ui-step-next-tone="success"] { --ui-step-next-color: var(--bs-success); }
.ui-step[data-ui-step-next-tone="warning"] { --ui-step-next-color: var(--bs-warning); }
.ui-step[data-ui-step-next-tone="danger"] { --ui-step-next-color: var(--bs-danger); }
.ui-step[data-ui-step-next-tone="info"] { --ui-step-next-color: var(--bs-info); }

.ui-step[data-ui-step-tone]:is(.is-complete, .is-active)::before {
    background-color: var(--ui-step-color, var(--bs-primary));
    color: var(--ui-step-on, var(--ui-on-primary));
}

.ui-step[data-ui-step-tone].is-active::before {
    box-shadow: 0 0 0 1.5px var(--bs-body-bg), 0 0 0 5px color-mix(in srgb, var(--ui-step-color, var(--bs-primary)) 20%, transparent);
}

.ui-step[data-ui-step-next-tone].is-complete::after {
    background: linear-gradient(to right, var(--ui-step-color, var(--bs-primary)), var(--ui-step-next-color, var(--bs-primary)));
}

@media (max-width: 767.98px) {
    .ui-stepper {
        flex-direction: column;
    }

    .ui-step:not(:last-child)::after {
        display: none;
    }
}

/* Timeline (history, activity) */
.ui-timeline {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ui-timeline-item {
    position: relative;
    display: flex;
    gap: 0.875rem;
    padding-bottom: 1.25rem;
}

.ui-timeline-item:last-child {
    padding-bottom: 0;
}

.ui-timeline-item:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 2rem;
    bottom: 0.25rem;
    left: 0.875rem;
    width: 1px;
    background-color: var(--bs-border-color);
}

.ui-timeline-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--ui-active);
    color: var(--bs-secondary-color);
    font-size: 0.8125rem;
}

.ui-timeline-body {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 0.25rem;
}

/* Week calendar (planning), built for volume: one row per time slot, each
   cell stacks compact one-line events and collapses the rest into "+N" */
.ui-calendar {
    display: grid;
    grid-template-columns: 3.5rem repeat(var(--ui-cal-days, 5), minmax(9.5rem, 1fr));
    overflow-x: auto;
    font-size: 0.75rem;
}

.ui-calendar-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    padding: 0.625rem 0.5rem;
    color: var(--bs-secondary-color);
    font-weight: 500;
}

.ui-calendar-head strong {
    color: var(--bs-emphasis-color);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.ui-calendar-head.is-today strong {
    color: var(--bs-primary-text-emphasis);
}

.ui-calendar-time {
    padding: 0.4375rem 0.625rem 0 0;
    border-top: 1px solid var(--bs-border-color);
    color: var(--bs-tertiary-color);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.ui-calendar-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    min-height: 2.5rem;
    padding: 0.25rem;
    border-top: 1px solid var(--bs-border-color);
}

.ui-calendar-cell.is-today,
.ui-calendar-head.is-today {
    background-color: color-mix(in srgb, var(--bs-primary) 5%, transparent);
}

/* Compact planning (work pages): one-line day heads (day, date, count) that stay
   visible while the grid scrolls inside its container (the container scrolls on both
   axes, so the grid itself must not clip). Today keeps its tint. */
.ui-calendar-compact {
    grid-template-columns: 3rem repeat(var(--ui-cal-days, 5), minmax(var(--ui-cal-day-min, 6.5rem), 1fr));
    overflow: visible;
}

.ui-calendar-compact > :first-child,
.ui-calendar-compact .ui-calendar-head {
    position: sticky;
    top: 0;
    z-index: 2;
    border-bottom: 1px solid var(--bs-border-color);
    /* Opaque like .ui-table-sticky-head: the card surface painted over the page */
    background: linear-gradient(var(--bs-card-bg, var(--ui-surface-raised)), var(--bs-card-bg, var(--ui-surface-raised))) var(--bs-body-bg);
}

.ui-calendar-compact .ui-calendar-head {
    flex-flow: row wrap;
    justify-content: center;
    align-items: baseline;
    column-gap: 0.375rem;
    padding: 0.5rem;
}

.ui-calendar-compact .ui-calendar-head strong {
    font-size: 1rem;
}

.ui-calendar-compact .ui-calendar-head.is-today {
    background:
        linear-gradient(color-mix(in srgb, var(--bs-primary) 5%, transparent), color-mix(in srgb, var(--bs-primary) 5%, transparent)),
        linear-gradient(var(--bs-card-bg, var(--ui-surface-raised)), var(--bs-card-bg, var(--ui-surface-raised))) var(--bs-body-bg);
}

/* Events coloured by owner (e.g. one colour per inspector, set with --ui-status):
   stronger tint; the icon still carries the status and the label names the owner,
   so colour is never the only cue. */
.ui-calendar-owner .ui-calendar-event {
    background-color: color-mix(in srgb, var(--ui-event-tone) 22%, transparent);
}

.ui-calendar-owner .ui-calendar-event:hover,
.ui-calendar-owner .ui-calendar-event:focus-visible {
    background-color: color-mix(in srgb, var(--ui-event-tone) 34%, transparent);
}

.ui-calendar-event {
    --ui-event-tone: var(--bs-primary);
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    padding: 0.125rem 0.375rem;
    border: 0;
    border-radius: var(--bs-border-radius-sm);
    background-color: color-mix(in srgb, var(--ui-event-tone) 12%, transparent);
    color: var(--bs-emphasis-color);
    font: inherit;
    line-height: 1.5;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.ui-calendar-event:hover,
.ui-calendar-event:focus-visible {
    background-color: color-mix(in srgb, var(--ui-event-tone) 22%, transparent);
    outline: 0;
}

.ui-calendar-event[class*="ui-status-"] {
    --ui-event-tone: var(--ui-status);
}

.ui-calendar-event > time {
    flex-shrink: 0;
    color: var(--bs-secondary-color);
    font-variant-numeric: tabular-nums;
}

.ui-calendar-event > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-calendar-more {
    align-self: flex-start;
    padding: 0.0625rem 0.375rem;
    border: 0;
    border-radius: var(--bs-border-radius-sm);
    background: none;
    color: var(--bs-secondary-color);
    font: inherit;
    font-weight: 500;
}

.ui-calendar-more:hover {
    background-color: var(--ui-active);
    color: var(--bs-emphasis-color);
}

/* Onboarding checklist (guided tours): done = check icon, todo = empty ring */
.ui-checklist-mark {
    display: inline-flex;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    border: 1.5px dashed var(--bs-tertiary-color);
    border-radius: 50%;
}

.ui-checklist-item.is-done .ui-checklist-title {
    color: var(--bs-secondary-color);
}

/* Floating actions: page tools kept within reach wherever the user scrolls (report PDF
   preview, conformity). Pinned bottom-right above the content; a toast container on the
   same page gets .ui-float-actions-offset so it opens above the group. */
.ui-float-actions {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem;
    border-radius: var(--bs-border-radius-pill);
    background-color: var(--ui-surface-raised);
    box-shadow: var(--ui-glass-shadow), var(--bs-box-shadow);
}

.ui-float-actions-offset {
    margin-bottom: 3.5rem;
}

/* Dropdown panel (notifications…): wider menu with header, list and footer */
.ui-dropdown-panel {
    --bs-dropdown-padding-x: 0;
    --bs-dropdown-padding-y: 0;
    width: min(24rem, calc(100vw - 1rem));
    overflow: hidden;
}

/* Wider panel for lists whose rows carry a sentence (action history…) */
.ui-dropdown-panel.ui-dropdown-panel-wide {
    width: min(30rem, calc(100vw - 1rem));
}

.ui-dropdown-panel .list-group {
    --bs-list-group-bg: transparent;
    --bs-list-group-border-color: var(--bs-border-color);
    box-shadow: none;
}

.ui-dropdown-panel .list-group-item {
    border-right: 0;
    border-left: 0;
}

.ui-dropdown-panel .list-group-item.is-unread {
    background-color: color-mix(in srgb, var(--bs-primary) 6%, var(--ui-surface-raised));
}

/*
 * A blurred parent (topbar, sidebar) is a "backdrop root": menus opened inside
 * it cannot blur the page behind, so they would look see-through. Keep them opaque.
 */
:is(.ui-topbar, .ui-sidebar) .dropdown-menu {
    --bs-dropdown-bg: var(--ui-surface-raised);
}

/* Counter pinned on an icon button */
.ui-count {
    position: absolute;
    top: 0.125rem;
    right: 0.125rem;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.25rem;
    border-radius: var(--bs-border-radius-pill);
    background-color: var(--bs-danger);
    box-shadow: 0 0 0 2px var(--bs-body-bg);
    color: var(--ui-on-danger);
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1rem;
    text-align: center;
}

/* Status: colour + icon, never colour alone.
   <span class="ui-status-icon ui-status-done"><i class="bi bi-check-lg"></i></span> */
.ui-status-done { --ui-status: var(--ui-status-done); --ui-status-ink: var(--ui-status-done-ink); }
.ui-status-progress { --ui-status: var(--ui-status-progress); --ui-status-ink: var(--ui-status-progress-ink); }
.ui-status-planned { --ui-status: var(--ui-status-planned); --ui-status-ink: var(--ui-status-planned-ink); }
.ui-status-fix { --ui-status: var(--ui-status-fix); --ui-status-ink: var(--ui-status-fix-ink); }
.ui-status-cancel { --ui-status: var(--ui-status-cancel); --ui-status-ink: var(--ui-status-cancel-ink); }

.ui-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--ui-status, var(--bs-primary));
    color: var(--ui-status-ink, #ffffff);
    font-size: 0.625rem;
    line-height: 1;
}

.ui-status-icon > .bi::before {
    -webkit-text-stroke: 0.4px currentColor;
}

/* Bare status icon (dense places such as calendar events): no disc, the glyph
   takes the tone. */
.ui-status-icon-plain {
    background-color: transparent;
    color: var(--ui-status, var(--bs-primary));
    font-size: 0.75rem;
}

/* Synchronisation state of a form that keeps working offline: a ghost button (opening a
   dropdown panel with the details) whose icon takes the tone of the state, always with a
   label and the number of entries waiting to be sent, never colour alone.
   data-ui-sync: synced (bi-cloud-check) | pending (bi-cloud-arrow-up) | sending (bi-arrow-repeat,
   turns) | offline (bi-wifi-off) | warning (bi-exclamation-triangle) | error (bi-exclamation-octagon).
   The attribute also tones any .ui-sync-icon inside another container (e.g. the panel header).
   <button class="btn btn-ghost btn-sm ui-sync" data-ui-sync="offline">
       <i class="bi bi-wifi-off ui-sync-icon"></i><span class="ui-sync-label">Hors ligne</span>
       <span class="ui-sync-count">3<span class="visually-hidden"> saisies en attente</span></span>
   </button> */
[data-ui-sync] { --ui-sync-tone: var(--bs-secondary-color); }
[data-ui-sync="synced"] { --ui-sync-tone: var(--ui-status-done); }
[data-ui-sync="pending"],
[data-ui-sync="sending"] { --ui-sync-tone: var(--ui-status-progress); }
[data-ui-sync="offline"],
[data-ui-sync="warning"] { --ui-sync-tone: var(--ui-status-fix); }
[data-ui-sync="error"] { --ui-sync-tone: var(--bs-danger); }

.ui-sync {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
}

.ui-sync-icon {
    display: inline-block;
    color: var(--ui-sync-tone, var(--bs-secondary-color));
}

[data-ui-sync="sending"] .ui-sync-icon {
    animation: ui-sync-turn 1s linear infinite;
}

@keyframes ui-sync-turn {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    [data-ui-sync="sending"] .ui-sync-icon { animation: none; }
}

.ui-sync-count {
    min-width: 1.25rem;
    padding: 0 0.375rem;
    border-radius: var(--bs-border-radius-pill);
    background-color: color-mix(in srgb, var(--ui-sync-tone, var(--bs-secondary-color)) 16%, var(--bs-body-bg));
    color: var(--bs-emphasis-color);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25rem;
    text-align: center;
}

/* Filter steps: a compact bar of joined, checkable segments (e.g. the demande journey).
   Neutral surface; only the icon carries the tone. A checked segment gets a tinted
   background, a tone border and a check mark (never colour alone).
   <div class="ui-filter-steps" role="group" aria-label="Étape">
       <input type="checkbox" class="btn-check" id="s1">
       <label class="ui-filter-step ui-filter-step-success" for="s1">
           <span class="ui-filter-step-icon"><i class="bi bi-file-earmark-pdf"></i></span>
           <span class="ui-filter-step-body"><strong>12</strong><small>Rapports émis</small></span>
           <i class="bi bi-check-circle-fill ui-filter-step-check"></i>
       </label>
       …
   </div> */
.ui-filter-steps {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    background-color: var(--ui-input-bg);
}

@media (max-width: 767.98px) {
    .ui-filter-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-flow: row;
    }
}

.ui-filter-step {
    --ui-filter-rgb: var(--bs-primary-rgb);
    --ui-filter-ink: var(--bs-primary-text-emphasis);
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    box-shadow: inset 1px 0 0 var(--bs-border-color);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease;
}

.ui-filter-steps > .btn-check:first-child + .ui-filter-step {
    box-shadow: none;
}

.ui-filter-step:hover {
    background-color: var(--ui-hover);
}

.btn-check:checked + .ui-filter-step {
    background-color: rgba(var(--ui-filter-rgb), 0.1);
}

.btn-check:focus-visible + .ui-filter-step {
    z-index: 1;
    box-shadow: var(--ui-focus-ring);
}

.ui-filter-step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border-radius: var(--bs-border-radius);
    background-color: rgba(var(--ui-filter-rgb), 0.12);
    color: var(--ui-filter-ink);
    font-size: 1rem;
}

.ui-filter-step-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.ui-filter-step-body > strong {
    color: var(--bs-emphasis-color);
    font-size: 1.0625rem;
    font-variant-numeric: tabular-nums;
}

.ui-filter-step-body > small {
    overflow: hidden;
    color: var(--bs-secondary-color);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-check:checked + .ui-filter-step .ui-filter-step-body > small {
    color: var(--ui-filter-ink);
    font-weight: 500;
}

/* Selection mark: an empty ring says "selectable", the filled check says "selected" */
.ui-filter-step-check {
    display: inline-flex;
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--bs-secondary-color) 55%, transparent);
    color: transparent;
    line-height: 1;
}

.ui-filter-step-check::before {
    vertical-align: 0;
}

.btn-check:checked + .ui-filter-step .ui-filter-step-check {
    box-shadow: none;
    color: rgb(var(--ui-filter-rgb));
}

/* Compact bar for narrow cards: smaller icon tile and padding, same reading order */
.ui-filter-steps-sm .ui-filter-step {
    gap: 0.375rem;
    padding: 0.4375rem 0.5rem;
}

.ui-filter-steps-sm .ui-filter-step-icon {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.875rem;
}

/* Grouped filter steps: each step heads a column listing its work queues, so a queue is
   read under the step it belongs to. The column carries the step tone; queue icons take it,
   a checked queue gets a tint and a check mark instead of its icon (never colour alone).
   Steps and queues stay separate checkboxes. Columns stack on small screens.
   <div class="ui-filter-steps ui-filter-steps-grouped" role="group" aria-label="Étapes">
       <div class="ui-filter-step-group ui-filter-step-warning">
           <input type="checkbox" class="btn-check" id="s2">
           <label class="ui-filter-step ui-filter-step-warning" for="s2">…</label>
           <div class="ui-filter-queues" role="group" aria-label="Files : RDV à planifier">
               <input type="checkbox" class="btn-check" id="q1">
               <label class="ui-filter-queue" for="q1">
                   <i class="bi bi-calendar-plus ui-filter-queue-icon"></i><i class="bi bi-check-lg ui-filter-queue-check"></i>
                   <span class="ui-filter-queue-label">À placer</span><span class="ui-filter-queue-count">12</span>
               </label>
           </div>
       </div>
       …
   </div> */
.ui-filter-steps-grouped {
    --ui-filter-queue-pad: 0.5rem;
    --ui-filter-queue-icon: 2rem;
    --ui-filter-queue-gap: 0.625rem;
}

.ui-filter-steps-grouped.ui-filter-steps-sm {
    --ui-filter-queue-pad: 0.25rem;
    --ui-filter-queue-icon: 1.5rem;
    --ui-filter-queue-gap: 0.375rem;
}

.ui-filter-step-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
    box-shadow: inset 1px 0 0 var(--bs-border-color);
}

.ui-filter-steps-grouped > .ui-filter-step-group:first-child,
.ui-filter-step-group > .ui-filter-step {
    box-shadow: none;
}

/* Only the filled check is shown: the queues below already make the column read as a filter */
.ui-filter-steps-grouped .ui-filter-step-check {
    box-shadow: none;
}

/* Steps without queues (none authorised or none pending) share one column when another step
   has queues: their tiles stack and split its height, so no column is left blank.
   <div class="ui-filter-step-group ui-filter-step-stack"> btn-check + ui-filter-step, … </div> */
.ui-filter-step-stack > .ui-filter-step {
    flex: 1 1 0;
}

.ui-filter-step-stack > .ui-filter-step:not(:last-child) {
    border-bottom: 1px solid var(--bs-border-color);
}

@media (max-width: 767.98px) {
    .ui-filter-steps-grouped {
        grid-template-columns: minmax(0, 1fr);
    }

    .ui-filter-step-group {
        box-shadow: inset 0 1px 0 var(--bs-border-color);
    }
}

.ui-filter-queues {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 1px;
    padding: 0.25rem;
    border-top: 1px solid var(--bs-border-color);
}

.ui-filter-queue {
    display: flex;
    align-items: center;
    gap: var(--ui-filter-queue-gap);
    min-width: 0;
    padding: 0.1875rem var(--ui-filter-queue-pad);
    border-radius: var(--bs-border-radius);
    color: var(--bs-body-color);
    font-size: 0.875rem;
    line-height: 1.25;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease;
}

.ui-filter-queue:hover {
    background-color: var(--ui-hover);
}

.btn-check:checked + .ui-filter-queue {
    background-color: rgba(var(--ui-filter-rgb), 0.1);
    color: var(--ui-filter-ink);
    font-weight: 500;
}

.btn-check:focus-visible + .ui-filter-queue {
    box-shadow: var(--ui-focus-ring);
}

.ui-filter-queue-icon,
.ui-filter-queue-check {
    flex-shrink: 0;
    width: var(--ui-filter-queue-icon);
    color: var(--ui-filter-ink);
    text-align: center;
}

.ui-filter-queue-check,
.btn-check:checked + .ui-filter-queue .ui-filter-queue-icon {
    display: none;
}

.btn-check:checked + .ui-filter-queue .ui-filter-queue-check {
    display: inline-block;
}

.ui-filter-queue-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-filter-queue-count {
    flex-shrink: 0;
    color: var(--bs-secondary-color);
    font-variant-numeric: tabular-nums;
}

.btn-check:checked + .ui-filter-queue .ui-filter-queue-count {
    color: var(--ui-filter-ink);
}

.ui-filter-step-primary { --ui-filter-rgb: var(--bs-primary-rgb); --ui-filter-ink: var(--bs-primary-text-emphasis); }
.ui-filter-step-info { --ui-filter-rgb: var(--bs-info-rgb); --ui-filter-ink: var(--bs-info-text-emphasis); }
.ui-filter-step-success { --ui-filter-rgb: var(--bs-success-rgb); --ui-filter-ink: var(--bs-success-text-emphasis); }
.ui-filter-step-warning { --ui-filter-rgb: var(--bs-warning-rgb); --ui-filter-ink: var(--bs-warning-text-emphasis); }
.ui-filter-step-danger { --ui-filter-rgb: var(--bs-danger-rgb); --ui-filter-ink: var(--bs-danger-text-emphasis); }
.ui-filter-step-secondary { --ui-filter-rgb: var(--bs-secondary-rgb); --ui-filter-ink: var(--bs-secondary-text-emphasis); }

/* Colour choice (e.g. a binder's colour): round swatches on btn-check radios, one class per
   kit tone. Each swatch has a text label (visually hidden) and a title; the selected one
   shows a check mark and an outer ring, so the choice never relies on colour alone.
   <input type="radio" class="btn-check" name="color" id="c1" checked>
   <label class="ui-color-option ui-color-option-success" for="c1" title="Vert">
       <i class="bi bi-check-lg"></i><span class="visually-hidden">Vert</span>
   </label> */
.ui-color-option {
    --ui-color-option: var(--bs-primary);
    --ui-color-option-ink: var(--ui-on-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--ui-color-option);
    box-shadow: inset 0 0 0 1px rgba(var(--bs-emphasis-color-rgb), 0.12);
    color: var(--ui-color-option-ink);
    cursor: pointer;
    transition: box-shadow 0.15s ease;
}

.ui-color-option > .bi {
    display: none;
    font-size: 0.875rem;
}

.btn-check:checked + .ui-color-option {
    box-shadow: 0 0 0 2px var(--bs-body-bg), 0 0 0 4px var(--ui-color-option);
}

.btn-check:checked + .ui-color-option > .bi {
    display: inline-block;
}

.btn-check:focus-visible + .ui-color-option {
    box-shadow: 0 0 0 2px var(--bs-body-bg), var(--ui-focus-ring);
}

.ui-color-option-primary { --ui-color-option: var(--bs-primary); --ui-color-option-ink: var(--ui-on-primary); }
.ui-color-option-info { --ui-color-option: var(--bs-info); --ui-color-option-ink: var(--ui-on-info); }
.ui-color-option-success { --ui-color-option: var(--bs-success); --ui-color-option-ink: var(--ui-on-success); }
.ui-color-option-warning { --ui-color-option: var(--bs-warning); --ui-color-option-ink: var(--ui-on-warning); }
.ui-color-option-danger { --ui-color-option: var(--bs-danger); --ui-color-option-ink: var(--ui-on-danger); }
.ui-color-option-secondary { --ui-color-option: var(--bs-secondary); --ui-color-option-ink: var(--ui-on-secondary); }

/* Choice toggle (a form's radio or checkbox options shown as buttons): btn-check +
   .btn-outline-secondary.ui-choice. The optional --ui-choice-color tints the whole button;
   the selection mark (empty ring, then a filled check) keeps its state explicit.
   <input type="radio" class="btn-check" name="c" id="c1">
   <label class="btn btn-outline-secondary ui-choice" for="c1" style="--ui-choice-color: #1e7a46">
       <i class="bi bi-check-circle-fill ui-choice-mark"></i>
       <span>Conforme</span>
   </label> */
.ui-choice {
    --bs-btn-bg: color-mix(in srgb, var(--ui-choice-color, transparent) 14%, var(--ui-input-bg));
    --bs-btn-border-color: color-mix(in srgb, var(--ui-choice-color, transparent) 30%, var(--ui-input-border));
    --bs-btn-hover-bg: color-mix(in srgb, var(--ui-choice-color, transparent) 22%, var(--ui-input-bg-focus));
    --bs-btn-hover-border-color: var(--bs-btn-border-color);
    --bs-btn-disabled-bg: var(--bs-btn-bg);
    --bs-btn-disabled-border-color: var(--bs-btn-border-color);
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    text-align: start;
}

.btn-check:checked + .ui-choice,
.btn-check:active + .ui-choice {
    --bs-btn-active-bg: color-mix(in srgb, var(--ui-choice-color, transparent) 28%, var(--ui-active));
    --bs-btn-active-border-color: color-mix(in srgb, var(--ui-choice-color, transparent) 65%, var(--ui-input-border));
}

.ui-choice-mark {
    display: inline-flex;
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--bs-secondary-color) 55%, transparent);
    color: transparent;
    line-height: 1;
}

.ui-choice-mark::before {
    vertical-align: 0;
}

.btn-check:checked + .ui-choice .ui-choice-mark {
    box-shadow: none;
    color: var(--bs-emphasis-color);
}

/* Several answers can be ticked: square mark (bi-check-square-fill) instead of the ring. */
.ui-choice-mark-square {
    border-radius: 0.2em;
}

/* Dropzone & file list */
.ui-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    border: 1.5px dashed var(--ui-input-border);
    border-radius: var(--bs-border-radius-lg);
    background-color: var(--ui-input-bg);
    color: var(--bs-secondary-color);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ui-dropzone:hover,
.ui-dropzone.is-dragover {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary-bg-subtle);
}

.ui-dropzone:focus-within {
    box-shadow: var(--ui-focus-ring);
}

.ui-file {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background-color: var(--ui-input-bg);
}

.ui-file + .ui-file {
    margin-top: 0.5rem;
}

.ui-file-body {
    flex: 1 1 auto;
    min-width: 0;
}

/* Image preview in a file row, in place of its icon tile */
.ui-file-thumb {
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border-radius: var(--bs-border-radius);
    object-fit: cover;
    box-shadow: 0 0 0 1px var(--bs-border-color);
}

.ui-file-name {
    overflow: hidden;
    color: var(--bs-emphasis-color);
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
    gap: 0.5rem;
}

.ui-thumb {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--bs-border-radius);
    background-color: var(--ui-active);
    box-shadow: inset 0 0 0 1px var(--bs-border-color);
}

.ui-thumb > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ui-thumb > .badge {
    position: absolute;
    bottom: 0.375rem;
    left: 0.375rem;
}

/* Signature pad */
.ui-signature {
    position: relative;
    height: 11rem;
    border: 1px solid var(--ui-input-border);
    border-radius: var(--bs-border-radius);
    background-color: var(--ui-input-bg);
    box-shadow: var(--ui-control-highlight);
    touch-action: none;
}

.ui-signature::after {
    content: "";
    position: absolute;
    right: 1.5rem;
    bottom: 2.25rem;
    left: 1.5rem;
    border-bottom: 1px dashed var(--ui-input-border);
    pointer-events: none;
}

.ui-signature > canvas {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    cursor: crosshair;
}

/* Square pad for a fixed square canvas (e.g. 500 × 500 report signatures) so strokes keep their ratio */
.ui-signature-square {
    width: 100%;
    max-width: 31.25rem;
    height: auto;
    aspect-ratio: 1 / 1;
}

.ui-signature-hint {
    position: absolute;
    bottom: 0.75rem;
    left: 1.5rem;
    color: var(--bs-tertiary-color);
    font-size: 0.75rem;
    pointer-events: none;
}

/* Chat */
.ui-chat {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
}

.ui-chat-day {
    margin: 0.5rem 0;
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
}

.ui-message {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    max-width: 75%;
}

.ui-message-bubble {
    padding: 0.5rem 0.75rem;
    border-radius: var(--bs-border-radius-lg);
    border-bottom-left-radius: var(--bs-border-radius-sm);
    border: 1px solid color-mix(in srgb, var(--bs-info) 25%, var(--bs-body-bg));
    background-color: color-mix(in srgb, var(--bs-info) 10%, var(--bs-body-bg));
    color: var(--bs-emphasis-color);
}

.ui-message-meta {
    margin-top: 0.125rem;
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
}

.ui-message.is-mine {
    flex-direction: row-reverse;
    align-self: flex-end;
    text-align: right;
}

.ui-message.is-mine .ui-message-bubble {
    border-bottom-right-radius: var(--bs-border-radius-sm);
    border-bottom-left-radius: var(--bs-border-radius-lg);
    border-color: color-mix(in srgb, var(--bs-primary) 45%, var(--bs-body-bg));
    background-color: color-mix(in srgb, var(--bs-primary) 22%, var(--bs-body-bg));
    color: var(--bs-emphasis-color);
    text-align: left;
}

/* Hover preview card: floats beside a list row, same glass as the sidebar flyout.
   Read-only and pointer-transparent, so it never steals the hover from the list. */
.ui-peek {
    position: fixed;
    z-index: 1060;
    display: flex;
    flex-direction: column;
    width: 22rem;
    max-height: min(24rem, calc(100vh - 1rem));
    overflow: hidden;
    border: 1px solid var(--ui-glass-border);
    border-radius: var(--bs-border-radius-lg);
    background-color: var(--ui-surface-raised);
    box-shadow: var(--bs-box-shadow-lg);
    pointer-events: none;
    animation: ui-nav-panel-in 0.16s ease-out;
}

.ui-peek[hidden] {
    display: none;
}

.ui-peek-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem 0.5rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.ui-peek-title {
    color: var(--bs-emphasis-color);
    font-size: 0.9375rem;
    font-weight: 600;
}

.ui-peek-header > .badge {
    margin-left: auto;
}

/* Latest messages stay in view: the body is anchored to its bottom edge. */
.ui-peek-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.5rem;
    min-height: 0;
    overflow: hidden;
    padding: 0.625rem 0.875rem;
}

.ui-peek-message {
    flex-shrink: 0;
}

.ui-peek-text {
    display: -webkit-box;
    overflow: hidden;
    color: var(--bs-body-color);
    font-size: 0.875rem;
    overflow-wrap: anywhere;
    white-space: pre-line;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.ui-peek-footer {
    padding: 0.375rem 0.875rem;
    border-top: 1px solid var(--bs-border-color-translucent);
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
}

.ui-message-text {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Quoted message a reply refers to, inside the bubble */
.ui-message-quote {
    margin-bottom: 0.375rem;
    padding-left: 0.5rem;
    border-left: 3px solid currentColor;
    color: var(--bs-secondary-text-emphasis);
    font-size: 0.8125rem;
}

/* Recorded action in a thread (call without answer, reopening…): tinted bubble by tone;
   an icon and a label (.ui-message-event) always carry the meaning, not the colour alone */
.ui-message .ui-message-bubble[class*="ui-message-bubble-"] {
    border: 1px solid var(--ui-message-tone-border);
    background: linear-gradient(var(--ui-message-tone-bg), var(--ui-message-tone-bg)), var(--bs-body-bg);
    color: var(--bs-emphasis-color);
}

.ui-message-bubble-primary {
    --ui-message-tone-bg: var(--bs-primary-bg-subtle);
    --ui-message-tone-border: var(--bs-primary-border-subtle);
    --ui-message-tone-text: var(--bs-primary-text-emphasis);
}

.ui-message-bubble-success {
    --ui-message-tone-bg: var(--bs-success-bg-subtle);
    --ui-message-tone-border: var(--bs-success-border-subtle);
    --ui-message-tone-text: var(--bs-success-text-emphasis);
}

.ui-message-bubble-info {
    --ui-message-tone-bg: var(--bs-info-bg-subtle);
    --ui-message-tone-border: var(--bs-info-border-subtle);
    --ui-message-tone-text: var(--bs-info-text-emphasis);
}

.ui-message-bubble-warning {
    --ui-message-tone-bg: var(--bs-warning-bg-subtle);
    --ui-message-tone-border: var(--bs-warning-border-subtle);
    --ui-message-tone-text: var(--bs-warning-text-emphasis);
}

.ui-message-bubble-danger {
    --ui-message-tone-bg: var(--bs-danger-bg-subtle);
    --ui-message-tone-border: var(--bs-danger-border-subtle);
    --ui-message-tone-text: var(--bs-danger-text-emphasis);
}

.ui-message-event {
    color: var(--ui-message-tone-text, inherit);
}

/* Reactions under a bubble, aligned with it */
.ui-message-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

.ui-message.is-mine .ui-message-reactions {
    justify-content: flex-end;
}

.ui-chat-composer {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.75rem;
    border-top: 1px solid var(--bs-border-color);
}

.ui-chat-composer > .form-control {
    resize: none;
}

/* Heatmap: discrete sequential steps via data-level 0–5 */
.ui-heatmap {
    display: grid;
    grid-template-columns: 2.25rem repeat(var(--ui-heatmap-cols, 12), minmax(0, 1fr));
    gap: 2px;
    font-size: 0.6875rem;
}

.ui-heatmap-label {
    display: flex;
    align-items: center;
    color: var(--bs-secondary-color);
    font-variant-numeric: tabular-nums;
}

.ui-heatmap-label.is-col {
    justify-content: center;
}

.ui-heatmap-cell {
    aspect-ratio: 1.6;
    border-radius: 4px;
    background-color: var(--ui-active);
}

.ui-heatmap-cell[data-level="1"] { background-color: var(--ui-seq-1); }
.ui-heatmap-cell[data-level="2"] { background-color: var(--ui-seq-2); }
.ui-heatmap-cell[data-level="3"] { background-color: var(--ui-seq-3); }
.ui-heatmap-cell[data-level="4"] { background-color: var(--ui-seq-4); }
.ui-heatmap-cell[data-level="5"] { background-color: var(--ui-seq-5); }

.ui-heatmap-cell:hover {
    box-shadow: 0 0 0 2px var(--bs-body-bg), 0 0 0 3px var(--bs-emphasis-color);
}

.ui-heatmap-scale {
    display: inline-flex;
    gap: 2px;
}

.ui-heatmap-scale > span {
    width: 1rem;
    height: 0.625rem;
    border-radius: 2px;
}

/* Chart containers: fixed height so the canvas never collapses */
.ui-chart {
    position: relative;
    height: var(--ui-chart-height, 16rem);
}

/* Chart taller than its panel (one bar per row of a long list): it keeps its full height
   and scrolls inside this frame, so the page never grows past the viewport. */
.ui-chart-scroll {
    max-height: min(24rem, 45vh);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ui-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin: 0;
    padding: 0;
    color: var(--bs-secondary-color);
    font-size: 0.8125rem;
    list-style: none;
}

.ui-chart-legend > li {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
}

.ui-chart-swatch {
    width: 0.625rem;
    height: 0.625rem;
    flex-shrink: 0;
    border-radius: 3px;
    background-color: var(--swatch);
}

.ui-meter {
    --bs-progress-height: 0.375rem;
    --bs-progress-bg: var(--bs-primary-bg-subtle);
    --bs-progress-bar-bg: var(--bs-primary);
}

/* Progress ring: small donut filled to --ui-ring-value (0–100), e.g. binder progress
   in the navigation. Always paired with a text or aria-label giving the figure; a full
   ring turns success and can carry a check next to it.
   <span class="ui-ring" style="--ui-ring-value: 60" role="img" aria-label="3 sur 5 terminés"></span> */
.ui-ring {
    --ui-ring-value: 0;
    --ui-ring-size: 1rem;
    --ui-ring-thickness: 3px;
    --ui-ring-color: var(--bs-primary);
    display: inline-block;
    flex: 0 0 var(--ui-ring-size);
    width: var(--ui-ring-size);
    height: var(--ui-ring-size);
    border-radius: 50%;
    background: conic-gradient(var(--ui-ring-color) calc(var(--ui-ring-value) * 1%), rgba(var(--bs-emphasis-color-rgb), 0.12) 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ui-ring-thickness)), #000 calc(100% - var(--ui-ring-thickness) + 0.5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - var(--ui-ring-thickness)), #000 calc(100% - var(--ui-ring-thickness) + 0.5px));
}

/* On arrival every ring fills up from zero to its value. */
@property --ui-ring-value {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .ui-ring {
        animation: ui-ring-fill 900ms cubic-bezier(0.33, 1, 0.68, 1) 150ms both;
    }
}

@keyframes ui-ring-fill {
    from { --ui-ring-value: 0; }
}

.ui-ring-lg {
    --ui-ring-size: 2.5rem;
    --ui-ring-thickness: 5px;
}

.ui-ring.is-complete {
    --ui-ring-color: var(--bs-success);
}

.ui-nav-link > .ui-ring {
    margin-left: auto;
}

/* Completion mark: gold ring + check for a finished item (e.g. a binder in the navigation).
   Rendered with .is-filling and an inner .ui-ring at 100: the ring fills up on arrival, then
   ui.js swaps it for the gold mark with .is-celebrating (on arrival only, never on hover):
   the mark squashes and springs back, the check is drawn in and bounces, a ripple and a
   burst of sparks leave the ring, then it glows. Purely decorative: the aria-label
   carries the figure. */
.ui-completion-mark {
    position: relative;
    display: inline-grid;
    place-items: center;
}

.ui-completion-mark > .bi {
    grid-area: 1 / 1;
}

.ui-completion-mark > .bi-check-lg {
    font-size: 0.7em;
}

.ui-completion-mark > .ui-ring {
    --ui-ring-size: 0.875em;
    grid-area: 1 / 1;
    display: none;
}

.ui-completion-mark.is-filling > .ui-ring {
    display: inline-block;
}

.ui-completion-mark.is-filling > .bi {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .ui-completion-mark.is-filling > .ui-ring {
        display: none;
    }

    .ui-completion-mark.is-filling > .bi {
        opacity: 1;
    }
}

.ui-completion-mark::before,
.ui-completion-mark::after {
    content: "";
    grid-area: 1 / 1;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
}

/* Ripple leaving the ring. */
.ui-completion-mark::after {
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
}

/* Sparks: one invisible dot thrown in eight directions by its shadows. */
.ui-completion-mark::before {
    width: 3px;
    height: 3px;
}

@media (prefers-reduced-motion: no-preference) {
    .ui-completion-mark.is-celebrating {
        animation:
            ui-completion-pop 620ms cubic-bezier(0.34, 1.56, 0.64, 1) both,
            ui-completion-shine 1100ms ease-out both;
    }

    .ui-completion-mark.is-celebrating > .bi-check-lg {
        animation: ui-completion-draw 520ms cubic-bezier(0.22, 1, 0.36, 1) 120ms both;
    }

    .ui-completion-mark.is-celebrating::after {
        animation: ui-completion-ripple 640ms cubic-bezier(0.22, 1, 0.36, 1) 260ms both;
    }

    .ui-completion-mark.is-celebrating::before {
        animation: ui-completion-sparks 620ms cubic-bezier(0.16, 1, 0.3, 1) 280ms both;
    }
}

@keyframes ui-completion-pop {
    0% { transform: scale(1); }
    18% { transform: scale(0.72); }
    55% { transform: scale(1.25); }
    78% { transform: scale(0.94); }
    100% { transform: scale(1); }
}

@keyframes ui-completion-draw {
    0% { clip-path: inset(0 100% 0 0); transform: scale(0.8); }
    35% { clip-path: inset(0 55% 0 0); transform: scale(0.9); }
    65% { clip-path: inset(0 0 0 0); transform: scale(1.3); }
    100% { clip-path: inset(0 0 0 0); transform: scale(1); }
}

@keyframes ui-completion-ripple {
    0% { opacity: 0.8; transform: scale(0.7); border-width: 2px; }
    100% { opacity: 0; transform: scale(2.1); border-width: 0.5px; }
}

@keyframes ui-completion-sparks {
    0% {
        opacity: 1;
        box-shadow:
            0 0 0 0.5px currentColor, 0 0 0 0.5px currentColor, 0 0 0 0.5px currentColor, 0 0 0 0.5px currentColor,
            0 0 0 0.5px currentColor, 0 0 0 0.5px currentColor, 0 0 0 0.5px currentColor, 0 0 0 0.5px currentColor;
    }
    70% { opacity: 1; }
    100% {
        opacity: 0;
        box-shadow:
            0 -1.05em 0 -1px currentColor, 0.74em -0.74em 0 -1px currentColor, 1.05em 0 0 -1px currentColor, 0.74em 0.74em 0 -1px currentColor,
            0 1.05em 0 -1px currentColor, -0.74em 0.74em 0 -1px currentColor, -1.05em 0 0 -1px currentColor, -0.74em -0.74em 0 -1px currentColor;
    }
}

@keyframes ui-completion-shine {
    0%, 40%, 100% { filter: drop-shadow(0 0 0 transparent); }
    62% { filter: drop-shadow(0 0 4px color-mix(in srgb, currentColor 75%, transparent)); }
}

.ui-sparkline {
    height: 2.5rem;
}

/* Sortable list */
.ui-sortable-handle {
    color: var(--bs-tertiary-color);
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.ui-sortable-handle:active {
    cursor: grabbing;
}

.sortable-ghost {
    opacity: 0.4;
}

.sortable-chosen {
    background-color: var(--ui-input-bg-focus);
    box-shadow: var(--bs-box-shadow);
}

/* Small icon tile for dense rows (tree rows, compact lists) */
.ui-icon-tile-sm {
    width: 1.625rem;
    height: 1.625rem;
    border-radius: var(--bs-border-radius-sm);
    font-size: 0.875rem;
}

/* Tree: an outline of nested items (e.g. the structure of a report form).
   <ul class="ui-tree" role="tree"> holds <li class="ui-tree-item" role="treeitem">; each item has
   one .ui-tree-row (drag handle, .ui-tree-toggle or .ui-tree-spacer, icon tile, .ui-tree-label
   with .ui-tree-title and .ui-tree-meta, trailing badges and .ui-tree-actions) and, for a
   container, a <ul class="ui-tree-group" role="group"> indented behind a guide line. The toggle's
   aria-expanded says whether the group is shown (hide the group with `hidden` or x-show). The
   selected row carries .active: tinted, with a bold title (never colour alone).
   Row actions appear on hover or focus and stay visible on touch screens. An empty group keeps
   a small drop zone so SortableJS can move items into an empty container. */
.ui-tree,
.ui-tree-group {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ui-tree-group {
    min-height: 0.375rem;
    margin-left: 1.3125rem;
    padding-left: 0.375rem;
    border-left: 1px solid var(--bs-border-color);
}

.ui-tree-drop-placeholder {
    min-height: 2.375rem;
    margin: 0.1875rem 0;
    padding: 0.5rem;
    border: 1px dashed var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    color: var(--bs-secondary-color);
    font-size: 0.8125rem;
    pointer-events: none;
}

.ui-tree-group:has(> .ui-tree-item) > .ui-tree-drop-placeholder {
    display: none;
}

.ui-tree-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.375rem;
    padding: 0.1875rem 0.375rem;
    border-radius: var(--bs-border-radius);
    font-size: 0.875rem;
}

.ui-tree-row:hover {
    background-color: var(--ui-hover);
}

.ui-tree-row.active {
    background-color: var(--ui-active);
}

.ui-tree-row.active .ui-tree-title {
    font-weight: 600;
    color: var(--bs-emphasis-color);
}

.ui-tree-toggle,
.ui-tree-spacer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    border-radius: var(--bs-border-radius-sm);
    background: none;
    color: var(--bs-secondary-color);
}

.ui-tree-toggle:hover {
    background-color: var(--ui-active);
    color: var(--bs-emphasis-color);
}

.ui-tree-toggle i {
    transition: transform 0.15s ease;
}

.ui-tree-toggle[aria-expanded="false"] i {
    transform: rotate(-90deg);
}

.ui-tree-label {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    text-align: left;
}

.ui-tree-label:focus-visible {
    border-radius: var(--bs-border-radius-sm);
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.ui-tree-text {
    min-width: 0;
    line-height: 1.25;
}

.ui-tree-title,
.ui-tree-meta {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-tree-title {
    color: var(--bs-body-color);
    font-weight: 500;
}

.ui-tree-meta {
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
}

.ui-tree-actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.125rem;
}

.ui-tree-row .ui-sortable-handle {
    flex-shrink: 0;
}

@media (hover: hover) {
    /* Top-layer dropdowns can briefly lose ancestor hover/focus on mousedown.
       Keep their actions visible until the menu closes so the click completes. */
    .ui-tree-row:not(:hover, :focus-within, .active, :has(.dropdown-menu.show)) .ui-tree-actions,
    .ui-tree-row:not(:hover, :focus-within) .ui-sortable-handle {
        visibility: hidden;
    }
}

/* Colour swatch: a small square showing --ui-swatch (set inline from the stored value);
   without a colour it shows a diagonal stroke meaning "none". Pair it with the colour code
   in text. Colour field: .input-group[data-ui-color-field] with a label.input-group-text
   holding the swatch and a visually hidden <input type="color" data-ui-color-picker>, then
   the text input [data-ui-color-text] (fields.js keeps both in sync). */
.ui-swatch {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
    background: var(--ui-swatch, linear-gradient(to top right, transparent calc(50% - 1px), var(--bs-secondary-color) 50%, transparent calc(50% + 1px)));
}

[data-ui-color-field] > label.input-group-text {
    cursor: pointer;
}

/* Value list: an ordered list of short values edited one per row (choices, headers…),
   stored as one string with a separator. fields.js renders the rows from
   [data-ui-value-list] > input[data-ui-value-list-input]: grip, position, input, remove,
   then an "add" button. */
.ui-value-list-index {
    min-width: 1.25rem;
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Wider side panel for a split view whose aside holds an editor (e.g. a component's settings) */
@media (min-width: 992px) {
    .ui-split-aside.ui-split-aside-wide {
        flex-basis: 26rem;
    }
}

@media (min-width: 1400px) {
    .ui-split-aside.ui-split-aside-wide {
        flex-basis: 32rem;
    }
}

/* App shell: sidebar on the page background, content in an inset panel */
.ui-app {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
}

.ui-sidebar {
    --bs-offcanvas-width: var(--ui-sidebar-width);
    --bs-offcanvas-border-color: var(--ui-glass-border);
    /* The glass sits on ::before; also overrides the offcanvas background below lg */
    background-color: transparent !important;
}

/*
 * Glass layer on a pseudo-element: a blurred element is a "backdrop root", so the
 * navigation panel opened from the sidebar could not blur the page behind it.
 */
.ui-sidebar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-color: var(--ui-glass-chrome);
    -webkit-backdrop-filter: var(--ui-glass-filter);
    backdrop-filter: var(--ui-glass-filter);
    pointer-events: none;
}

.ui-sidebar > .offcanvas-body {
    min-height: 0;
    padding: 0;
}

@media (min-width: 992px) {
    /* Floating glass panel */
    .ui-sidebar {
        position: sticky;
        top: var(--ui-shell-gap);
        display: flex;
        flex-direction: column;
        width: var(--ui-sidebar-width);
        height: calc(100vh - 2 * var(--ui-shell-gap));
        height: calc(100dvh - 2 * var(--ui-shell-gap));
        flex-shrink: 0;
        margin: var(--ui-shell-gap);
        border: 1px solid var(--ui-glass-border);
        border-radius: var(--bs-border-radius-lg);
        box-shadow: var(--ui-glass-shadow);
    }

    .ui-sidebar > .offcanvas-body {
        flex: 1 1 auto;
        flex-direction: column;
        overflow-y: auto;
    }
}

.ui-sidebar-brand {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.625rem;
    height: var(--ui-topbar-height);
    padding: 0 1.25rem;
    color: var(--bs-emphasis-color);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.ui-brand-mark {
    display: block;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 1.25rem;
    object-fit: contain;
}

.ui-nav {
    display: flex;
    flex-direction: column;
    gap: 1px;
    width: 100%;
    padding: 0.25rem 0.75rem 1rem;
}

.ui-nav-heading {
    padding: 1rem 0.625rem 0.375rem;
    color: var(--bs-tertiary-color);
    font-size: 0.75rem;
    font-weight: 500;
}

.ui-nav-heading:first-child {
    padding-top: 0.25rem;
}

.ui-nav-link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.375rem 0.625rem;
    border-radius: var(--bs-border-radius);
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
    font-weight: 500;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ui-nav-link > i {
    width: 1.125rem;
    font-size: 1rem;
    text-align: center;
}

.ui-nav-link > .badge {
    margin-left: auto;
}

.ui-nav-link:hover {
    background-color: var(--ui-hover);
    color: var(--bs-emphasis-color);
    text-decoration: none;
}

.ui-nav-link:focus-visible {
    outline: 0;
    box-shadow: var(--ui-focus-ring);
}

.ui-nav-link.active {
    background-color: var(--ui-nav-active-bg);
    box-shadow: var(--bs-box-shadow-sm), 0 0 0 1px var(--bs-border-color);
    color: var(--bs-emphasis-color);
}

.ui-nav-link.active > i {
    color: var(--bs-primary-text-emphasis);
}

/* Main navigation shell (layouts/partials/ui-navigation): built for ~100 entries.
   Sections stay in the sidebar; their pages open in one flyout panel at a time. */
.ui-navshell {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.ui-navshell-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.ui-navshell-search {
    padding: 0.25rem 0.75rem 0.5rem;
}

.ui-navshell-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0.25rem 0.75rem 0.75rem;
    scroll-padding-block: 0.75rem;
    scrollbar-width: none;
}

.ui-navshell-scroll::-webkit-scrollbar {
    display: none;
}

.ui-navshell-scroll-hints {
    position: absolute;
    z-index: 3;
    pointer-events: none;
    color: var(--bs-secondary-color);
}

.ui-navshell-scroll-hints[hidden],
.ui-navshell-scroll-hints > [hidden] {
    display: none;
}

.ui-navshell-scroll-hints > i {
    position: absolute;
    left: 50%;
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 0.875rem;
    border-radius: 999px;
    background: var(--ui-surface-raised);
    box-shadow: var(--bs-box-shadow-sm);
    font-size: 0.625rem;
    opacity: 0.8;
    transform: translateX(-50%);
}

.ui-navshell-scroll-hints > .bi-chevron-up {
    top: 1px;
}

.ui-navshell-scroll-hints > .bi-chevron-down {
    bottom: 1px;
}

.ui-navshell-scroll [data-ui-nav-home],
.ui-navshell-scroll [data-ui-nav-order-list],
.ui-navshell-scroll [data-ui-nav-rubric-list],
.ui-navshell-scroll [data-ui-nav-results],
.ui-navshell-scroll [data-ui-nav-pins-list],
.ui-navshell-scroll [data-ui-nav-results-list] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ui-navshell-scroll [hidden] {
    display: none !important;
}

.ui-navshell-orderable,
.ui-navshell-rubric {
    position: relative;
    min-width: 0;
}

.ui-navshell-orderable > [data-ui-nav-handle],
.ui-navshell-rubric > [data-ui-nav-rubric-handle] {
    position: absolute;
    top: 0.2rem;
    right: 0.1rem;
    z-index: 1;
    display: none;
}

.ui-navshell-orderable-group > .ui-nav-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ui-navshell-orderable-group > .ui-nav-heading [data-ui-nav-handle] {
    display: none;
}

.ui-navshell.is-editing .ui-navshell-orderable > [data-ui-nav-handle],
.ui-navshell.is-editing .ui-navshell-rubric > [data-ui-nav-rubric-handle],
.ui-navshell.is-editing .ui-navshell-orderable-group > .ui-nav-heading [data-ui-nav-handle] {
    display: inline-flex;
    background-color: var(--ui-hover);
}

.ui-navshell.is-editing .ui-navshell-orderable > .ui-nav-link,
.ui-navshell.is-editing .ui-navshell-orderable > .ui-navshell-item .ui-nav-link,
.ui-navshell.is-editing .ui-navshell-rubric > .ui-nav-link,
.ui-navshell.is-editing .ui-navshell-rubric > .ui-navshell-item .ui-nav-link {
    padding-right: 2.5rem;
}

.ui-navshell.is-editing .ui-navshell-orderable .ui-navshell-pin,
.ui-navshell.is-editing .ui-navshell-orderable .ui-navshell-chevron {
    display: none;
}

.ui-navshell.is-editing .ui-navshell-orderable > .ui-nav-link > .badge {
    display: none;
}

.ui-navshell-footer {
    padding: 0.5rem 0.75rem 0.75rem;
    border-top: 1px solid var(--bs-border-color);
}

.ui-navshell-footer [data-ui-nav-edit][aria-pressed="true"] {
    background-color: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
}

button.ui-nav-link {
    width: 100%;
    border: 0;
    background: none;
    font-family: inherit;
    line-height: inherit;
    text-align: left;
}

.ui-nav-link > span:not(.badge):not(.ui-ring) {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-navshell-chevron {
    width: auto !important;
    font-size: 0.6875rem !important;
    opacity: 0.55;
}

.ui-navshell-section.is-current {
    background-color: var(--ui-nav-active-bg);
    box-shadow: var(--bs-box-shadow-sm), 0 0 0 1px var(--bs-border-color);
    color: var(--bs-emphasis-color);
    font-weight: 600;
}

.ui-navshell-current-path {
    margin: 0.25rem 0.25rem 0.25rem 1.25rem;
    font-size: 0.75rem;
}

.ui-navshell-section.is-current > i:first-child {
    color: var(--bs-primary-text-emphasis);
}

.ui-navshell-section[aria-expanded="true"] {
    background-color: var(--ui-nav-active-bg);
    box-shadow: var(--bs-box-shadow-sm), 0 0 0 1px var(--bs-border-color);
    color: var(--bs-emphasis-color);
}

.ui-navshell-section[aria-expanded="true"] > .ui-navshell-chevron {
    opacity: 1;
}

.ui-navshell-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(100% + var(--ui-shell-gap) + 1px);
    z-index: 1035;
    display: flex;
    flex-direction: column;
    width: 18rem;
    border: 1px solid var(--ui-glass-border);
    border-radius: var(--bs-border-radius-lg);
    background-color: var(--ui-surface-raised);
    box-shadow: var(--bs-box-shadow-lg);
    animation: ui-nav-panel-in 0.16s ease-out;
}

.ui-navshell-panel[hidden] {
    display: none;
}

@keyframes ui-nav-panel-in {
    from {
        opacity: 0;
        transform: translateX(-0.375rem);
    }
}

.ui-navshell-panel-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 0.625rem 0.5rem 1rem;
}

.ui-navshell-panel-title {
    color: var(--bs-emphasis-color);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.ui-navshell-back {
    display: none;
}

.ui-navshell-panel-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0.25rem 0.625rem 1rem;
}

.ui-navshell-group-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem 0.25rem;
    color: var(--bs-tertiary-color);
    font-size: 0.75rem;
    font-weight: 500;
}

.ui-navshell-group.level-1 {
    margin-top: 0.25rem;
    margin-left: 1.25rem;
}

.ui-navshell-group.level-1 > .ui-navshell-group-title {
    padding-top: 0.25rem;
}

.ui-navshell-item {
    position: relative;
    display: flex;
    align-items: center;
}

.ui-navshell-item-divided {
    margin-top: 0.625rem;
    padding-top: 0.625rem;
    border-top: 1px solid var(--bs-border-color);
}

.ui-navshell-item > .ui-nav-link {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 2rem;
}

.ui-navshell-pin {
    position: absolute;
    right: 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 0;
    border-radius: var(--bs-border-radius-sm);
    background: none;
    color: var(--bs-tertiary-color);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.ui-navshell-item:hover > .ui-navshell-pin,
.ui-navshell-pin:focus-visible,
.ui-navshell-pin[aria-pressed="true"] {
    opacity: 1;
}

@media (hover: none) {
    .ui-navshell-pin {
        opacity: 1;
    }
}

.ui-navshell-pin:hover {
    background-color: var(--ui-active);
    color: var(--bs-emphasis-color);
}

.ui-navshell-pin[aria-pressed="true"] {
    color: var(--bs-warning-text-emphasis);
}

.ui-navshell-pin:focus-visible {
    outline: 0;
    box-shadow: var(--ui-focus-ring);
}

.ui-navshell-result-path {
    display: block;
    overflow: hidden;
    color: var(--bs-tertiary-color);
    font-size: 0.6875rem;
    font-weight: 400;
    text-overflow: ellipsis;
}

@media (min-width: 992px) {
    .ui-sidebar {
        z-index: 1030;
    }

    /* The flyout must escape the sidebar: the navshell scrolls its own list */
    .ui-sidebar > .offcanvas-body:has(> .ui-navshell) {
        overflow: visible;
    }

    /* Same glass as the sidebar (its blur sits on ::before, so the panel can blur the page) */
    .ui-navshell-panel {
        top: var(--ui-shell-gap);
        background-color: var(--ui-glass-chrome);
        box-shadow: var(--ui-glass-shadow);
        -webkit-backdrop-filter: var(--ui-glass-filter);
        backdrop-filter: var(--ui-glass-filter);
    }

    .ui-sidebar,
    .kit-nav-demo-sidebar {
        transition: width 0.2s ease;
    }

    /* Collapsed icon rail (html.ui-nav-collapsed, or .is-nav-collapsed on a frame) */
    html.ui-nav-collapsed .ui-sidebar,
    .is-nav-collapsed {
        --ui-sidebar-width: 4.25rem;
    }

    :is(html.ui-nav-collapsed .ui-sidebar, .is-nav-collapsed) :is(.ui-navshell-search .input-group, .ui-navshell-chevron, .ui-navshell-main .ui-nav-heading, .ui-navshell-current-path, .ui-sidebar-brand > span:not(.ui-brand-mark), .ui-sidebar-brand > .btn-close) {
        display: none !important;
    }

    :is(html.ui-nav-collapsed .ui-sidebar, .is-nav-collapsed) .ui-navshell-footer .ui-nav-link {
        justify-content: center;
        padding: 0.5rem 0;
    }

    :is(html.ui-nav-collapsed .ui-sidebar, .is-nav-collapsed) .ui-navshell-footer .ui-nav-link > span {
        display: none;
    }

    :is(html.ui-nav-collapsed .ui-sidebar, .is-nav-collapsed) :is(.ui-navshell-main .ui-nav-link > span:not(.badge):not(.ui-ring), .ui-navshell-main .ui-navshell-pin) {
        display: none;
    }

    :is(html.ui-nav-collapsed .ui-sidebar, .is-nav-collapsed) .ui-navshell-main .ui-nav-link {
        position: relative;
        justify-content: center;
        padding: 0.5rem 0;
    }

    :is(html.ui-nav-collapsed .ui-sidebar, .is-nav-collapsed) .ui-navshell-main .ui-nav-link > .badge {
        position: absolute;
        top: 0.125rem;
        right: 0.25rem;
        padding: 0.0625rem 0.3125rem;
        font-size: 0.625rem;
    }

    /* Progress ring shrinks into the icon's corner, like the counters */
    :is(html.ui-nav-collapsed .ui-sidebar, .is-nav-collapsed) .ui-navshell-main .ui-nav-link > .ui-ring {
        --ui-ring-size: 0.75rem;
        --ui-ring-thickness: 2px;
        position: absolute;
        top: 0.25rem;
        right: 0.375rem;
        margin: 0;
    }

    :is(html.ui-nav-collapsed .ui-sidebar, .is-nav-collapsed) :is(.ui-navshell-scroll, .ui-navshell-footer) {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }

    :is(html.ui-nav-collapsed .ui-sidebar, .is-nav-collapsed) .ui-navshell-scroll [data-ui-nav-pins] {
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--bs-border-color);
        margin-bottom: 0.5rem;
    }

    :is(html.ui-nav-collapsed .ui-sidebar, .is-nav-collapsed) .ui-sidebar-brand {
        justify-content: center;
        padding: 0;
    }
}

/* Mobile: the panel slides over the section list inside the offcanvas */
@media (max-width: 991.98px) {
    .ui-sidebar {
        --bs-offcanvas-width: min(20rem, calc(100vw - 3rem));
        height: 100dvh;
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .ui-sidebar::before {
        background-color: var(--ui-surface-raised);
    }

    .ui-sidebar > .offcanvas-body:has(> .ui-navshell) {
        overflow: hidden;
    }

    .ui-sidebar .ui-navshell-scroll,
    .ui-sidebar .ui-navshell-panel-body {
        overscroll-behavior-y: contain;
    }

    .ui-sidebar .ui-nav-link {
        min-height: 2.75rem;
    }

    .ui-sidebar .ui-navshell-search .form-control {
        min-height: 2.75rem;
        font-size: 1rem;
    }

    .ui-sidebar-brand > .btn-close {
        box-sizing: border-box;
        width: 2.75rem;
        height: 2.75rem;
        flex-shrink: 0;
    }

    .ui-navshell-panel-header {
        padding: 0.25rem 0.75rem 0.5rem;
        border-bottom: 1px solid var(--bs-border-color);
        margin-bottom: 0.25rem;
    }

    .ui-navshell-panel-header > .btn {
        min-width: 2.75rem;
        min-height: 2.75rem;
    }

    .ui-app:has(> .ui-sidebar:is(.show, .showing, .hiding)) > .ui-main {
        overflow-y: hidden;
    }

    .ui-navshell-panel {
        inset: 0;
        width: auto;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .ui-navshell-back {
        display: inline-flex;
    }

    .ui-navshell-footer {
        padding: 0.5rem 0.75rem 0.75rem;
    }

    .ui-navshell-footer > :not([data-ui-nav-edit]) {
        display: none;
    }
}

/* Transparent scroll container: content scrolls under the floating topbar */
.ui-main {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior-y: none;
}

.ui-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.75rem;
    height: var(--ui-topbar-height);
    padding: 0 1.5rem;
    border-bottom: 1px solid var(--ui-glass-border);
    background-color: var(--ui-glass-chrome);
    box-shadow: var(--ui-glass-shadow);
    -webkit-backdrop-filter: var(--ui-glass-filter);
    backdrop-filter: var(--ui-glass-filter);
}

/* Keep action groups at their natural width, including Livewire teleport slots. */
.ui-topbar > :not([data-ui-topbar-workspace]),
[data-ui-topbar-workspace] > * {
    flex-shrink: 0;
}

@media (max-width: 991.98px) {
    .ui-topbar {
        height: auto;
        min-height: var(--ui-topbar-height);
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }

    [data-ui-topbar-workspace] {
        flex-wrap: wrap;
    }
}

@media (min-width: 992px) {
    /* Starting the scrollport below the gap keeps content out of it */
    .ui-main {
        height: calc(100vh - var(--ui-shell-gap));
        height: calc(100dvh - var(--ui-shell-gap));
        margin-top: var(--ui-shell-gap);
    }

    .ui-topbar {
        margin-right: var(--ui-shell-gap);
        padding: 0 0.75rem;
        border: 1px solid var(--ui-glass-border);
        border-radius: var(--bs-border-radius-lg);
    }
}

/* Shared section navigation, measured by ui.js against its available space. */
[data-ui-responsive-tabs] {
    display: flex;
    flex-wrap: nowrap;
    flex-shrink: 0;
    white-space: nowrap;
}

[data-ui-responsive-menu] {
    flex-shrink: 0;
}

.ui-content {
    width: 100%;
    padding: 2rem 2rem 3rem;
}

/* Opt-in reading width for text or single-form pages */
.ui-content-narrow {
    max-width: 64rem;
    margin-right: auto;
    margin-left: auto;
}

/* Work page that fits the viewport from lg up: its panels scroll inside themselves.
   Below lg the page keeps its natural height and scrolls as a whole (phones). */
@media (min-width: 992px) {
    .ui-content-fill {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }
}

/* Container that disappears when none of its content is shown (e.g. a form section whose
   fields are all hidden by display conditions, or a grid cell left empty): mark the container
   with data-ui-hide-empty and each content root with data-ui-content, adding .d-none to a
   content root while it is hidden. Empty cells leave the grid instead of leaving holes. */
[data-ui-hide-empty]:not(:has([data-ui-content]:not(.d-none))) {
    display: none !important;
}

/* Split view: a main panel and a side panel (summary, checklist) side by side from lg up,
   each scrolling on its own; stacked below lg in document order (main panel first).
   Put it in a `.ui-content-fill` page. */
.ui-split {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ui-split-main,
.ui-split-aside {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

@media (min-width: 992px) {
    .ui-split {
        flex: 1 1 auto;
        flex-direction: row;
        min-height: 0;
    }

    /* Vertical scrolling only: a grid row's negative gutters must not add a horizontal bar */
    .ui-split-main,
    .ui-split-aside {
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .ui-split-main {
        flex: 1 1 auto;
    }

    /* Keep panel tools outside its inner scroller; phones retain viewport positioning. */
    .ui-split-main > .ui-float-actions {
        position: absolute;
    }

    .ui-split-aside {
        flex: 0 0 22rem;
    }
}

@media (min-width: 1400px) {
    .ui-split-aside {
        flex-basis: 24rem;
    }
}

/* A side panel slot still empty (filled later by a component, e.g. while the form loads)
   takes no gap, so both panels start on the same line */
.ui-split-aside > :empty {
    display: none !important;
}

/* Below lg the side panel dissolves into the split, so key blocks can move above the main
   panel with `order-first order-lg-0` (e.g. a summary). Wrappers inside the side panel that
   must dissolve too (a Livewire root, for instance) carry data-ui-split-dissolve. */
@media (max-width: 991.98px) {
    .ui-split-aside,
    .ui-split-aside [data-ui-split-dissolve] {
        display: contents !important;
    }
}

@media (max-width: 575.98px) {
    .ui-topbar {
        gap: 0.25rem;
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }

    .ui-content {
        padding-right: 1rem;
        padding-left: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .placeholder-glow .placeholder {
        animation: none;
    }
}

/* ID card: a physical-looking card (credit-card ratio) whose back shows a document, e.g. the
   inspector's professional card and accreditation. It stays white in both themes, like the
   printed object. A horizontal swipe, a mouse click or Enter/Space flips it (ui.js); a portrait
   document on the back is turned to fill the landscape face.
   <div class="ui-id-card-stage"><div class="ui-id-card" data-ui-id-card role="button" tabindex="0">
     <article class="ui-id-card-face ui-id-card-front">…</article>
     <article class="ui-id-card-face ui-id-card-back"><div class="ui-id-card-document">…</div></article>
   </div></div>
   In a .modal.ui-id-card-modal the card floats without a panel and fills a phone screen sideways. */
.ui-id-card-stage {
    --ui-id-card-blue: #1599d1;
    --ui-id-card-blue-deep: #0879ad;
    --ui-id-card-ink: #172f3b;
    --ui-id-card-muted: #53636b;
    width: min(100%, 780px);
    margin: 0 auto;
    perspective: 1800px;
    container-type: inline-size;
}

.ui-id-card {
    position: relative;
    width: 100%;
    aspect-ratio: 1.586 / 1;
    cursor: grab;
    outline: none;
    touch-action: pan-y;
    transform-style: preserve-3d;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    transition: transform 0.78s cubic-bezier(0.2, 0.72, 0.2, 1);
}

.ui-id-card.is-dragging {
    cursor: grabbing;
    transition: none;
}

.ui-id-card:focus-visible {
    border-radius: 4cqi;
    box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.35);
}

.ui-id-card.is-flipped {
    transform: rotateY(180deg);
}

.ui-id-card-face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(16, 92, 126, 0.18);
    border-radius: 3.4cqi;
    background: #fff;
    box-shadow: 0 24px 55px rgba(10, 52, 72, 0.24), 0 2px 8px rgba(10, 52, 72, 0.12);
    color: var(--ui-id-card-ink);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.ui-id-card-front {
    isolation: isolate;
    padding: 4.7% 5% 3.6%;
    background: linear-gradient(118deg, rgba(255, 255, 255, 0.98) 0 66%, rgba(232, 247, 252, 0.96) 100%), #fff;
}

/* Decorative rings in the corners */
.ui-id-card-front::before,
.ui-id-card-front::after {
    content: "";
    position: absolute;
    z-index: -1;
    aspect-ratio: 1;
    border: 7.5cqi solid rgba(21, 153, 209, 0.16);
    border-radius: 50%;
    pointer-events: none;
}

.ui-id-card-front::before {
    width: 42%;
    top: -23%;
    right: -8%;
}

.ui-id-card-front::after {
    width: 46%;
    bottom: -32%;
    left: -19%;
    border-color: rgba(8, 121, 173, 0.12);
}

.ui-id-card-brand {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.ui-id-card-brand img {
    width: 23%;
    height: auto;
}

.ui-id-card-brand > span {
    padding: 0.42em 0.78em;
    border: 1px solid rgba(21, 153, 209, 0.24);
    border-radius: 999px;
    background: rgba(21, 153, 209, 0.08);
    color: var(--ui-id-card-blue-deep);
    font-size: 1.6cqi;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ui-id-card-identity {
    display: grid;
    grid-template-columns: 24% minmax(0, 1fr) 20%;
    align-items: center;
    gap: 4%;
    min-height: 0;
    margin: auto 0;
}

.ui-id-card-photo {
    display: grid;
    width: 100%;
    aspect-ratio: 1;
    place-items: center;
    overflow: hidden;
    border: 0.7cqi solid #fff;
    border-radius: 18%;
    background: linear-gradient(145deg, #dff3fb, #b7ddea);
    box-shadow: 0 8px 24px rgba(9, 93, 128, 0.18);
    color: var(--ui-id-card-blue-deep);
    font-size: 5.2cqi;
    font-weight: 800;
}

.ui-id-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ui-id-card-person {
    min-width: 0;
}

.ui-id-card-company {
    display: block;
    margin-bottom: 0.35em;
    color: var(--ui-id-card-blue-deep);
    font-size: 1.6cqi;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.ui-id-card-name {
    margin: 0;
    color: var(--ui-id-card-ink);
    font-size: 4.2cqi;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.04;
}

.ui-id-card-role {
    margin: 0.35em 0 0.45em;
    color: var(--ui-id-card-muted);
    font-size: 2.5cqi;
    font-weight: 600;
    line-height: 1.15;
}

.ui-id-card-meta {
    display: block;
    overflow: hidden;
    color: var(--ui-id-card-muted);
    font-size: 1.5cqi;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-id-card-qr {
    text-align: center;
}

.ui-id-card-qr img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border: 0.6cqi solid #fff;
    border-radius: 10%;
    background: #fff;
    box-shadow: 0 7px 18px rgba(15, 67, 88, 0.14);
}

.ui-id-card-qr span {
    display: block;
    margin-top: 0.35em;
    color: var(--ui-id-card-muted);
    font-size: 1.3cqi;
    font-weight: 700;
    line-height: 1.15;
}

.ui-id-card-footer {
    display: grid;
    grid-template-columns: 1.6fr 1fr 0.8fr;
    gap: 3%;
    margin: 0;
    padding-top: 2.4%;
    border-top: 2px solid rgba(21, 153, 209, 0.55);
}

.ui-id-card-footer > div {
    min-width: 0;
}

.ui-id-card-footer dt,
.ui-id-card-footer dd {
    overflow: hidden;
    margin: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-id-card-footer dt {
    margin-bottom: 0.14em;
    color: var(--ui-id-card-muted);
    font-size: 1.25cqi;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ui-id-card-footer dd {
    color: #31515f;
    font-size: 1.5cqi;
    font-weight: 700;
}

/* "Flip" hint: icon + words, bottom-right of the front */
.ui-id-card-hint {
    position: absolute;
    right: 3%;
    bottom: 2.2%;
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    color: var(--ui-id-card-muted);
    font-size: 1.25cqi;
    font-weight: 700;
}

.ui-id-card-back {
    transform: rotateY(180deg);
}

.ui-id-card-document {
    position: relative;
    display: grid;
    flex: 1;
    min-height: 0;
    place-items: center;
    overflow: hidden;
    border-radius: inherit;
}

.ui-id-card-document > img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

/* Portrait document turned a quarter so it fills the landscape face (sized by ui.js) */
.ui-id-card-document > img.is-rotated {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: none;
    transform: translate(-50%, -50%) rotate(-90deg);
}

.ui-id-card-empty {
    display: grid;
    max-width: 60%;
    place-items: center;
    color: var(--ui-id-card-muted);
    font-size: 1.9cqi;
    font-weight: 600;
    text-align: center;
}

.ui-id-card-empty .bi {
    margin-bottom: 0.25em;
    color: rgba(21, 153, 209, 0.55);
    font-size: 7cqi;
}

/* Modal holding an ID card: no panel around it, a round close button on its corner */
.ui-id-card-modal .modal-dialog {
    width: calc(100% - 2rem);
    max-width: 780px;
}

.ui-id-card-modal .modal-content {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.ui-id-card-modal .modal-body {
    padding: 0;
}

.ui-id-card-close {
    position: absolute;
    z-index: 5;
    top: -14px;
    right: -14px;
    display: grid;
    width: 42px;
    height: 42px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(8, 121, 173, 0.18);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 8px 24px rgba(5, 25, 39, 0.3);
    color: #173642;
    font-size: 1.05rem;
    transition: transform 0.18s ease, background-color 0.18s ease;
}

.ui-id-card-close:hover,
.ui-id-card-close:focus-visible {
    background: #edf8fc;
    color: #0879ad;
    transform: scale(1.06);
}

/* Phone: the card is turned sideways to use the whole screen; it flips vertically */
@media (max-width: 575.98px) {
    .ui-id-card-modal .modal-dialog {
        width: calc(100% - 1rem);
        height: calc(100dvh - 1rem);
        margin: 0.5rem;
    }

    .ui-id-card-modal .modal-content,
    .ui-id-card-modal .modal-body {
        height: 100%;
    }

    .ui-id-card-modal .ui-id-card-stage {
        position: absolute;
        top: 50%;
        left: 50%;
        width: min(calc(100dvh - 2rem), calc((100vw - 2rem) * 1.586));
        transform: translate(-50%, -50%) rotate(-90deg);
    }

    .ui-id-card-modal .ui-id-card.is-flipped,
    .ui-id-card-modal .ui-id-card-back {
        transform: rotateX(180deg);
    }

    .ui-id-card-close {
        top: 10px;
        right: 10px;
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ui-id-card,
    .ui-id-card-close {
        transition: none;
    }
}

/* Utility: Alpine content hidden by x-show stays hidden until Alpine starts */
[x-cloak] {
    display: none !important;
}

/* Utility: lets a flex child shrink below its content so text-truncate works */
.min-w-0 {
    min-width: 0 !important;
}

/* Utility: lets a flex child of a fixed-height column shrink so its content scrolls inside it */
.min-h-0 {
    min-height: 0 !important;
}

/* Utility: bounded list inside a form (checkbox list of clients, users…) that scrolls on its own */
.ui-scroll-list {
    max-height: 16rem;
    overflow-y: auto;
}

/* Search
   Topbar field that opens the search dialog, stacked query + criteria fields,
   matched terms and result rows. */
.ui-topbar-search {
    flex: 1 1 auto;
    min-width: 12rem;
    max-width: 20rem;
}

/* Query and extra criteria share one column; side actions stay outside it */
.ui-search-fields {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

/* Matched term: tint + weight, never colour alone */
.ui-match {
    padding: 0 0.0625rem;
    border-radius: 0.1875rem;
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-emphasis-color);
    font-weight: 600;
}

/* Result row: icon tile, title line with status, single-line details, trailing action.
   Every line truncates so all rows keep the same height. */
[data-ui-search] input[type="search"]::-webkit-search-cancel-button {
    display: none;
}

.ui-result {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ui-result-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    color: var(--bs-secondary-color);
    font-size: 0.8125rem;
}

.ui-result-body > * {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-result-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ui-result-title {
    overflow: hidden;
    color: var(--bs-emphasis-color);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    text-overflow: ellipsis;
}

.ui-result-title:hover {
    color: var(--bs-emphasis-color);
}

.ui-result-head > .badge,
.ui-result-head > .ui-result-aside {
    flex-shrink: 0;
    max-width: 50%;
    margin-left: auto;
}

.ui-result-head > .badge > span,
.ui-result-head > .ui-result-aside {
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-result-actions {
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.ui-result-actions > .badge {
    overflow: hidden;
    max-width: min(50vw, 20rem);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-result-actions > .dropdown {
    flex: none;
}

/* Row actions stay clickable above the row's stretched link,
   and an open menu stacks above the following rows */
.ui-result > .dropdown > .btn,
.ui-result-actions > .dropdown > .btn {
    position: relative;
    z-index: 2;
}

.ui-result:has(> .dropdown > .dropdown-menu.show) {
    z-index: 3;
}

/* Users asking for less transparency get opaque surfaces */
@media (prefers-reduced-transparency: reduce) {
    :root,
    [data-bs-theme] {
        --ui-glass-surface: var(--bs-body-bg);
        --ui-glass-chrome: var(--bs-body-bg);
        --ui-glass-bg: var(--ui-surface-raised);
        --ui-glass-filter: none;
    }
}


/* 5. THIRD-PARTY LIBRARIES
-------------------------------------------------- */

/* Leaflet */
.leaflet-container {
    border-radius: inherit;
    background-color: var(--ui-page-bg);
    font-family: var(--bs-body-font-family);
    font-size: 0.8125rem;
}

.leaflet-tile-pane {
    filter: var(--ui-map-tiles-filter);
}

.leaflet-bar {
    overflow: hidden;
    border: 1px solid var(--ui-glass-border) !important;
    border-radius: var(--bs-border-radius) !important;
    box-shadow: var(--bs-box-shadow) !important;
}

.leaflet-bar a,
.leaflet-bar a:hover {
    width: 2rem;
    height: 2rem;
    border-bottom-color: var(--bs-border-color);
    background-color: var(--ui-glass-bg);
    color: var(--bs-emphasis-color);
    line-height: 2rem;
    -webkit-backdrop-filter: var(--ui-glass-filter);
    backdrop-filter: var(--ui-glass-filter);
}

.leaflet-bar a:hover {
    background-color: var(--ui-surface-raised);
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    background-color: var(--ui-glass-bg);
    color: var(--bs-body-color);
    box-shadow: var(--bs-box-shadow);
    -webkit-backdrop-filter: var(--ui-glass-filter);
    backdrop-filter: var(--ui-glass-filter);
}

.leaflet-popup-content-wrapper {
    border: 1px solid var(--ui-glass-border);
    border-radius: var(--bs-border-radius-lg);
}

.leaflet-popup-content {
    margin: 0.75rem 1rem;
    font-size: 0.8125rem;
    line-height: 1.45;
}

.leaflet-container a.leaflet-popup-close-button {
    color: var(--bs-secondary-color);
}

.leaflet-control-attribution {
    border-top-left-radius: var(--bs-border-radius-sm);
    background-color: var(--ui-glass-bg) !important;
    color: var(--bs-secondary-color);
    font-size: 0.625rem;
}

.leaflet-control-attribution a {
    color: inherit;
}

/* Map pin (L.divIcon): status colour + status icon
   <div class="ui-map-pin ui-status-done"><i class="bi bi-check-lg"></i></div> */
.ui-map-pin {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background-color: var(--ui-status, var(--bs-primary));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-status, var(--bs-primary)) 30%, transparent), 0 2px 6px rgba(0, 0, 0, 0.3);
    color: var(--ui-status-ink, #ffffff);
    font-size: 0.75rem;
}

/* Selected marker (e.g. the inspector picked in a form): larger, above the others */
.ui-map-pin.is-selected {
    transform: scale(1.3);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-status, var(--bs-primary)) 45%, transparent), 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* Map embedded in a page section (not a full work panel): fixed height, rounded like its card */
.ui-map {
    height: var(--ui-map-height, 18rem);
    overflow: hidden;
    border-radius: var(--bs-border-radius);
    box-shadow: inset 0 0 0 1px var(--bs-border-color);
}

/* markercluster */
.marker-cluster,
.marker-cluster div {
    background-color: transparent !important;
}

.marker-cluster div {
    width: 30px;
    height: 30px;
    margin: 5px 0 0 5px;
    border-radius: 50%;
    text-align: center;
    background-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 5px rgba(var(--bs-primary-rgb), 0.28), 0 2px 8px rgba(0, 0, 0, 0.25);
    color: var(--ui-on-primary);
    font: 600 0.75rem/30px var(--bs-body-font-family);
}

/* Select2 (default theme) */
.select2-container {
    font-size: 0.875rem;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: calc(1.3125rem + 0.875rem + 2px);
    border: 1px solid var(--ui-input-border);
    border-radius: var(--bs-border-radius);
    background-color: var(--ui-input-bg);
    box-shadow: var(--ui-control-highlight), var(--bs-box-shadow-sm);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 0.75rem;
    padding-right: 2.25rem;
    color: var(--bs-emphasis-color);
    line-height: calc(1.3125rem + 0.875rem);
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--bs-tertiary-color);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    right: 0.5rem;
    height: 100%;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    width: 0.625rem;
    height: 0.625rem;
    margin: -0.3125rem 0 0 -0.3125rem;
    border: 0;
    background-color: var(--bs-secondary-color);
    -webkit-mask: var(--ui-chevron-mask) center / contain no-repeat;
    mask: var(--ui-chevron-mask) center / contain no-repeat;
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection {
    border-color: var(--ui-focus-border);
    background-color: var(--ui-input-bg-focus);
    box-shadow: var(--ui-focus-ring);
}

.select2-container--default .select2-selection--multiple {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.375rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: contents;
}

.select2-container--default .select2-selection--multiple .select2-search--inline {
    flex: 1 1 4rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    padding: 0.125rem 0.5rem 0.125rem 0.25rem;
    border: 0;
    border-radius: var(--bs-border-radius-pill);
    background-color: var(--bs-primary-bg-subtle);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bs-primary) 22%, transparent);
    color: var(--bs-primary-text-emphasis);
    font-size: 0.75rem;
    font-weight: 500;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    position: static;
    padding: 0 0.25rem;
    border: 0;
    background: transparent;
    color: inherit;
    opacity: 0.6;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    background: transparent;
    color: inherit;
    opacity: 1;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    padding: 0;
}

.select2-container .select2-search--inline .select2-search__field {
    height: 1.5rem;
    margin: 0 0 0 0.25rem;
    vertical-align: middle;
    line-height: 1.5rem;
    color: var(--bs-emphasis-color);
    font-family: inherit;
}

.select2-dropdown {
    overflow: hidden;
    border: 1px solid var(--ui-glass-border);
    border-radius: var(--bs-border-radius-lg) !important;
    background-color: var(--ui-glass-bg);
    box-shadow: var(--bs-box-shadow);
    color: var(--bs-body-color);
    -webkit-backdrop-filter: var(--ui-glass-filter);
    backdrop-filter: var(--ui-glass-filter);
}

.select2-container--open .select2-dropdown--below {
    margin-top: 0.25rem;
}

.select2-container--open .select2-dropdown--above {
    margin-top: -0.25rem;
}

.select2-search--dropdown {
    padding: 0.5rem;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--ui-input-border);
    border-radius: var(--bs-border-radius);
    background-color: var(--ui-input-bg);
    color: var(--bs-emphasis-color);
    outline: 0;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--ui-focus-border);
    box-shadow: var(--ui-focus-ring);
}

.select2-results__options {
    padding: 0.3125rem;
}

.select2-container--default .select2-results > .select2-results__options {
    max-height: 16rem;
}

.select2-results__option {
    padding: 0.4375rem 0.625rem;
    border-radius: var(--bs-border-radius-sm);
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--ui-active);
    color: var(--bs-emphasis-color);
}

.select2-container--default .select2-results__option--selected {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    font-weight: 500;
}

.select2-container--default .select2-results__group {
    padding: 0.5rem 0.625rem 0.25rem;
    color: var(--bs-tertiary-color);
    font-size: 0.75rem;
    font-weight: 500;
}

/* Flatpickr */
.flatpickr-calendar {
    width: auto;
    padding: 0.5rem;
    border: 1px solid var(--ui-glass-border);
    border-radius: var(--bs-border-radius-lg);
    background: var(--ui-glass-bg);
    box-shadow: var(--bs-box-shadow);
    font-family: var(--bs-body-font-family);
    -webkit-backdrop-filter: var(--ui-glass-filter);
    backdrop-filter: var(--ui-glass-filter);
}

.flatpickr-calendar::before,
.flatpickr-calendar::after {
    display: none;
}

/* Inside a modal the glass blur stacks on the modal's own blur and Chromium then
   drops the modal content; use the opaque raised surface instead. */
.modal .flatpickr-calendar {
    background: var(--ui-surface-raised);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    background: transparent;
    color: var(--bs-emphasis-color);
    fill: var(--bs-emphasis-color);
}

.flatpickr-current-month {
    font-size: 0.9375rem;
    font-weight: 600;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    color: var(--bs-secondary-color);
    fill: var(--bs-secondary-color);
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--bs-primary);
}

span.flatpickr-weekday {
    color: var(--bs-tertiary-color);
    font-size: 0.75rem;
    font-weight: 500;
}

.flatpickr-day {
    border-radius: var(--bs-border-radius-sm);
    color: var(--bs-body-color);
    font-size: 0.8125rem;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
    border-color: transparent;
    background: var(--ui-active);
}

.flatpickr-day.today {
    border-color: var(--bs-primary-border-subtle);
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: var(--bs-tertiary-color);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    border-color: var(--bs-primary);
    background: var(--bs-primary);
    color: var(--ui-on-primary);
    font-weight: 600;
}

.flatpickr-day.selected.startRange,
.flatpickr-day.startRange.startRange,
.flatpickr-day.selected.endRange,
.flatpickr-day.endRange.endRange {
    border-radius: var(--bs-border-radius-sm);
}

.flatpickr-day.inRange {
    border-color: transparent;
    background: var(--bs-primary-bg-subtle);
    box-shadow: -5px 0 0 var(--bs-primary-bg-subtle), 5px 0 0 var(--bs-primary-bg-subtle);
}

.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm {
    color: var(--bs-emphasis-color);
}

.flatpickr-time input:hover,
.flatpickr-time input:focus {
    background: var(--ui-active);
}

/* Quill (snow) */
.ql-toolbar.ql-snow,
.ql-container.ql-snow {
    border-color: var(--ui-input-border);
    font-family: var(--bs-body-font-family);
}

.ql-toolbar.ql-snow {
    padding: 0.375rem;
    border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
    background-color: var(--ui-input-bg);
}

.ql-container.ql-snow {
    border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
    background-color: var(--ui-input-bg);
    color: var(--bs-emphasis-color);
    font-size: 0.875rem;
}

.ql-container.ql-snow {
    height: auto;
}

.ql-editor {
    min-height: 9rem;
}

.ql-editor.ql-blank::before {
    color: var(--bs-tertiary-color);
    font-style: normal;
}

.ql-snow.ql-toolbar button,
.ql-snow .ql-picker-label {
    border-radius: var(--bs-border-radius-sm);
}

.ql-snow.ql-toolbar button:hover,
.ql-snow.ql-toolbar button.ql-active {
    background-color: var(--ui-active);
}

.ql-snow .ql-stroke {
    stroke: var(--bs-secondary-color);
}

.ql-snow .ql-fill {
    fill: var(--bs-secondary-color);
}

.ql-snow .ql-picker {
    color: var(--bs-secondary-color);
}

.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-picker-label:hover .ql-stroke {
    stroke: var(--bs-primary-text-emphasis);
}

.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill {
    fill: var(--bs-primary-text-emphasis);
}

.ql-snow .ql-picker-options {
    border: 1px solid var(--ui-glass-border) !important;
    border-radius: var(--bs-border-radius);
    background-color: var(--ui-surface-raised);
    box-shadow: var(--bs-box-shadow);
}

.ql-snow a {
    color: var(--bs-link-color);
}

/* driver.js (guided tours) — popoverClass: "ui-tour" */
.driver-popover.ui-tour {
    --driver-popover-font-family: var(--bs-body-font-family);
    min-width: 18rem;
    max-width: 22rem;
    padding: 1rem 1.125rem;
    border: 1px solid var(--ui-glass-border);
    border-radius: var(--bs-border-radius-lg);
    background-color: var(--ui-glass-bg);
    box-shadow: var(--ui-highlight), var(--bs-box-shadow-lg);
    color: var(--bs-body-color);
    font-family: var(--bs-body-font-family);
    -webkit-backdrop-filter: var(--ui-glass-filter);
    backdrop-filter: var(--ui-glass-filter);
}

.driver-popover.ui-tour .driver-popover-title {
    padding-right: 1.75rem;
    color: var(--bs-emphasis-color);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.4;
}

.driver-popover.ui-tour .driver-popover-description {
    color: var(--bs-body-color);
    font-size: 0.875rem;
    line-height: 1.55;
}

.driver-popover.ui-tour .driver-popover-close-btn {
    top: 0.5rem;
    right: 0.5rem;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--bs-border-radius-sm);
    color: var(--bs-tertiary-color);
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.driver-popover.ui-tour .driver-popover-close-btn:hover,
.driver-popover.ui-tour .driver-popover-close-btn:focus-visible {
    background-color: var(--ui-active);
    color: var(--bs-emphasis-color);
}

.driver-popover.ui-tour .driver-popover-footer {
    gap: 0.75rem;
    margin-top: 1rem;
}

.driver-popover.ui-tour .driver-popover-progress-text {
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.driver-popover.ui-tour .driver-popover-navigation-btns {
    gap: 0.375rem;
}

.driver-popover.ui-tour .driver-popover-navigation-btns button + button {
    margin-left: 0;
}

.driver-popover.ui-tour .driver-popover-footer-btn {
    padding: 0.3125rem 0.75rem;
    border: 1px solid var(--ui-input-border);
    border-radius: var(--bs-border-radius);
    background-color: var(--ui-input-bg);
    background-image: var(--ui-control-sheen);
    box-shadow: var(--ui-control-highlight), var(--bs-box-shadow-sm);
    color: var(--bs-emphasis-color);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.5;
    text-shadow: none;
}

.driver-popover.ui-tour .driver-popover-footer-btn:hover {
    background-color: var(--ui-input-bg-focus);
}

.driver-popover.ui-tour .driver-popover-footer-btn:focus-visible {
    box-shadow: var(--ui-focus-ring);
}

.driver-popover.ui-tour .driver-popover-next-btn {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary);
    background-image: none;
    color: var(--ui-on-primary);
}

.driver-popover.ui-tour .driver-popover-next-btn:hover {
    background-color: color-mix(in srgb, var(--bs-primary) 90%, var(--ui-hover-mix));
}

.driver-popover.ui-tour .driver-popover-btn-disabled {
    display: none;
}

.driver-popover.ui-tour .driver-popover-arrow {
    border-width: 6px;
}

.driver-popover.ui-tour .driver-popover-arrow-side-left { border-color: transparent transparent transparent var(--ui-glass-bg); }
.driver-popover.ui-tour .driver-popover-arrow-side-right { border-color: transparent var(--ui-glass-bg) transparent transparent; }
.driver-popover.ui-tour .driver-popover-arrow-side-top { border-color: var(--ui-glass-bg) transparent transparent transparent; }
.driver-popover.ui-tour .driver-popover-arrow-side-bottom { border-color: transparent transparent var(--ui-glass-bg) transparent; }