/* -----------------------------------------------------------------------------
   theme-system.css

   Global design-token stylesheet for the Aspire AI platform. Defines four
   named themes — light (default), soft, dark, and ai — each as a CSS custom
   property block on `:root` or a `[data-theme]` selector. Tokens cover colour
   palette, glass/aura surface variables, Bootstrap variable overrides, and
   animated aurora background gradients. Also provides global component
   overrides (buttons, forms, tables, modals, alerts, scrollbars) that consume
   the theme tokens, ensuring every Bootstrap component inherits the current
   theme automatically.

   Project : AspireAIApp.Web
   Author  : Theodor Harmse (Teddy)
   Created : 2026-03-06
----------------------------------------------------------------------------- */

/* ============================================================================
 * Theme System - Light Theme
 * ============================================================================ */

:root {
    color-scheme: light;

    /* Typography (2026-09-01 revamp): one modern stack for the whole app.
       Segoe UI Variable ships on Win11/Server 2022+; the rest of the stack
       degrades gracefully. app.css must NOT re-declare font-family. */
    --font-family-base: "Segoe UI Variable Text", "Segoe UI", -apple-system, "SF Pro Text", Inter, system-ui, Roboto, sans-serif;
    --font-size-xs: 0.8125rem;  /* eyebrows, chips, pills - never smaller */
    --font-size-sm: 0.875rem;   /* meta, captions, table headers */
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --bs-body-font-family: var(--font-family-base);

    /* Colors */
    --color-primary: #1478a8;
    --color-primary-dark: #0f5f86;
    --color-secondary: #5f6fd8;
    --color-success: #198754;
    --color-danger: #dc3545;
    --color-warning: #ffc107;
    --color-info: #2b8ab2;

    /* Light Theme */
    --bg-primary: #f7fafd;
    --bg-secondary: #ffffff;
    --bg-tertiary: #eef4f9;

    --text-primary: #0d1b2c;
    --text-secondary: #45586e;
    /* #6d7f92 measured ~3.8:1 on this near-white ground, under the 4.5:1 AA
       floor for normal text (it is used for section labels and meta lines).
       Darkened to ~4.6:1 while still reading as clearly de-emphasised. */
    --text-muted: #5e7082;

    --overlay-text: #ffffff;

    --border-color: #d9e3ee;
    --shadow-color: rgba(20, 34, 53, 0.1);
    --table-header-bg: #eef5fa;
    --table-row-bg: rgba(255, 255, 255, 0.82);
    --table-row-alt-bg: rgba(244, 249, 253, 0.82);
    --table-hover-bg: rgba(226, 242, 251, 0.9);

    /* Glass / aura design tokens */
    --glass-aura-cyan: #1e8fb8;
    --glass-aura-mint: #3fd0ad;
    --glass-aura-violet: #7d84e6;
    --glass-surface: rgba(255, 255, 255, 0.68);
    --glass-surface-strong: rgba(255, 255, 255, 0.86);
    --glass-surface-muted: rgba(238, 245, 250, 0.72);
    --glass-line: rgba(46, 72, 106, 0.34);
    --glass-line-soft: rgba(46, 72, 106, 0.18);
    --glass-glow: rgba(54, 127, 153, 0.1);
    --glass-shadow: rgba(20, 34, 53, 0.12);
    --glass-mix-base: #ffffff;
    --icon-color: #3c6b83;
    --icon-color-strong: #265b74;

    /* Module accents: kept restrained and mixed into glass surfaces/icons. */
    --module-accent-platform: #1f7ba3;
    --module-accent-knowledge: #7a52c7;
    --module-accent-ai: #1d90c0;
    --module-accent-clm: #b06f1c;
    --module-accent-risk: #c24356;
    --module-accent-bi: #4f57d6;
    --module-accent-sharepoint: #1f9478;
    --module-accent-security: #9c7817;
    --module-accent-admin: #5f7186;
    --module-accent-crm: #22a06a;
    --module-accent-tender: #ab4694;

    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'%3E%3Cpath d='M3 4.5 8 8.5l5-4' fill='none' stroke='%23466082' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    /* Light-only aura / shimmer accents */
    --bg-aurora:
        radial-gradient(circle at 14% 10%, rgba(54, 127, 153, 0.06), transparent 48%),
        radial-gradient(circle at 86% 16%, rgba(138, 143, 212, 0.075), transparent 45%),
        radial-gradient(circle at 54% 88%, rgba(117, 220, 197, 0.07), transparent 44%),
        linear-gradient(130deg, #f8fbfe 0%, #f3f7fc 48%, #f8fbfe 100%);
    --surface-aurora:
        radial-gradient(ellipse at 52% 112%, color-mix(in srgb, var(--glass-aura-cyan) 7%, transparent), transparent 52%),
        radial-gradient(circle at 94% 0, color-mix(in srgb, var(--glass-aura-violet) 8%, transparent), transparent 46%),
        linear-gradient(155deg, var(--glass-surface-strong), var(--glass-surface));
    --control-aurora:
        radial-gradient(ellipse at 50% 120%, color-mix(in srgb, var(--glass-aura-cyan) 4%, transparent), transparent 54%),
        linear-gradient(155deg, rgba(255, 255, 255, 0.94), rgba(248, 252, 255, 0.86));
    --surface-outline-glow: rgba(54, 127, 153, 0.035);
    --aurora-animation: auroraFloat 36s ease-in-out infinite;

    --nav-link: #14749f;

    /* Bootstrap variable bridge so Bootstrap controls inherit current theme */
    --bs-body-bg: var(--bg-primary);
    --bs-body-color: var(--text-primary);
    --bs-emphasis-color: var(--text-primary);
    --bs-secondary-color: var(--text-secondary);
    --bs-tertiary-color: var(--text-muted);
    --bs-border-color: var(--border-color);
    --bs-heading-color: var(--text-primary);
    --bs-link-color: var(--nav-link);
    --bs-link-hover-color: var(--color-primary-dark);
    --bs-primary: var(--color-primary);
    --bs-primary-rgb: 20, 120, 168;
    --bs-link-color-rgb: 20, 116, 159;
    --bs-link-hover-color-rgb: 15, 95, 134;
    
    /* Transitions */
    --transition-duration: 0.3s;
    --transition-timing: ease-in-out;
}

/* ============================================================================
 * Soft Theme — soft lavender (reworked 2026-07-30; the original soft was a
 * desaturated grey-blue that read as "light through fog"). A light theme
 * that is NOT white: lavender canvas, near-opaque lavender-white cards,
 * indigo ink text, periwinkle / lilac / sky accents. Surfaces are solid and
 * borders crisp on purpose — no translucent "mist".
 * ============================================================================ */
[data-theme="soft"] {
    color-scheme: light;

    --color-primary: #5f57b8;
    --color-primary-dark: #4c459c;
    --color-secondary: #8a7fc7;
    --color-success: #2f8a63;
    --color-danger: #c14f63;
    --color-warning: #c99a2e;
    --color-info: #5e77d1;
    --bs-primary-rgb: 95, 87, 184;
    --bs-link-color-rgb: 90, 81, 181;
    --bs-link-hover-color-rgb: 71, 63, 150;

    --bg-primary: #e9e7f6;
    --bg-secondary: #f6f5fb;
    --bg-tertiary: #dcd9ee;

    --text-primary: #221f3a;
    --text-secondary: #4c4870;
    /* Same AA correction as the light theme: #6f6b96 measured ~3.8:1 on the
       lavender canvas. */
    --text-muted: #5d5a86;

    --overlay-text: #fbfaff;

    --border-color: #c6c2e4;
    --shadow-color: rgba(42, 38, 80, 0.13);
    --table-header-bg: #e6e4f5;
    --table-row-bg: rgba(251, 250, 254, 0.85);
    --table-row-alt-bg: rgba(240, 239, 250, 0.85);
    --table-hover-bg: rgba(228, 226, 246, 0.9);

    --glass-aura-cyan: #6b74d8;
    --glass-aura-mint: #6fb1d8;
    --glass-aura-violet: #9a7fd9;
    --glass-surface: rgba(247, 246, 252, 0.97);
    --glass-surface-strong: rgba(252, 251, 255, 0.99);
    --glass-surface-muted: rgba(233, 231, 246, 0.97);
    --glass-line: rgba(94, 88, 150, 0.4);
    --glass-line-soft: rgba(94, 88, 150, 0.22);
    --glass-glow: rgba(107, 116, 216, 0.12);
    --glass-shadow: rgba(42, 38, 80, 0.15);
    --glass-mix-base: #ffffff;
    --icon-color: #5b567e;
    --icon-color-strong: #423d63;

    --module-accent-platform: #5b64c4;
    --module-accent-knowledge: #8257c9;
    --module-accent-ai: #4a7ec4;
    --module-accent-clm: #a8752c;
    --module-accent-risk: #c25064;
    --module-accent-bi: #5d55c8;
    --module-accent-sharepoint: #3f8fa0;
    --module-accent-security: #94802b;
    --module-accent-admin: #6d6f95;
    --module-accent-crm: #3f9070;
    --module-accent-tender: #a85697;

    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'%3E%3Cpath d='M3 4.5 8 8.5l5-4' fill='none' stroke='%235b567e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    --nav-link: #4f48ad;

    /* Deliberately flat (no radial colour clouds): soft is solid, not misty. */
    --bg-aurora:
        linear-gradient(130deg, #eae8f7 0%, #e4e1f3 48%, #edebf8 100%);
    --surface-aurora:
        linear-gradient(155deg, var(--glass-surface-strong), var(--glass-surface));
    --control-aurora:
        linear-gradient(155deg, #ffffff, #f4f3fb);
    --surface-outline-glow: rgba(107, 116, 216, 0.04);
    --aurora-animation: none;
}

/* ============================================================================
 * Dark Theme
 * ============================================================================ */
[data-theme="dark"] {
    color-scheme: dark;

    --color-primary: #3fa8d8;
    --color-primary-dark: #2f8fc0;
    --color-secondary: #8a96ec;
    --bs-primary-rgb: 63, 168, 216;
    --bs-link-color-rgb: 143, 208, 255;
    --bs-link-hover-color-rgb: 176, 224, 255;

    /* Semantic colours MUST be redefined per theme: the light-theme values
       (#dc3545 / #198754 / #ffc107) are tuned for white paper and drop to
       ~3.4:1 on this near-black ground, which failed on destructive controls
       like the Delete buttons. These are the same hues lifted for dark. */
    --color-success: #6ddaa4;
    --color-danger: #ff93a1;
    --color-warning: #f5c96a;
    --color-info: #7ed2ee;
    --bs-success: var(--color-success);
    --bs-success-rgb: 109, 218, 164;
    --bs-danger: var(--color-danger);
    --bs-danger-rgb: 255, 147, 161;
    --bs-warning: var(--color-warning);
    --bs-warning-rgb: 240, 192, 90;
    --bs-info: var(--color-info);
    --bs-info-rgb: 111, 201, 232;

    --bg-primary: #070e19;
    --bg-secondary: #0d1a2b;
    --bg-tertiary: #142539;

    --text-primary: #eef6fc;
    --text-secondary: #bfd0e2;
    --text-muted: #8598ad;

    --overlay-text: #e8f1fa;

    --border-color: #24405c;
    --shadow-color: rgba(0, 0, 0, 0.36);
    --table-header-bg: rgba(20, 37, 57, 0.85);
    --table-row-bg: rgba(13, 26, 43, 0.8);
    --table-row-alt-bg: rgba(16, 31, 50, 0.8);
    --table-hover-bg: rgba(31, 58, 84, 0.85);

    --glass-aura-cyan: #4fc3ff;
    --glass-aura-mint: #67d9bd;
    --glass-aura-violet: #8e96ec;
    --glass-surface: rgba(9, 20, 35, 0.6);
    --glass-surface-strong: rgba(11, 23, 40, 0.8);
    --glass-surface-muted: rgba(20, 37, 57, 0.6);
    --glass-line: rgba(66, 118, 160, 0.46);
    --glass-line-soft: rgba(66, 118, 160, 0.26);
    --glass-glow: rgba(79, 195, 255, 0.1);
    --glass-shadow: rgba(0, 0, 0, 0.36);
    --glass-mix-base: transparent;
    --icon-color: #8fc5dd;
    --icon-color-strong: #c0e4f4;

    --module-accent-platform: #6fc6e4;
    --module-accent-knowledge: #b69cff;
    --module-accent-ai: #62d3f7;
    --module-accent-clm: #f0b263;
    --module-accent-risk: #ff8296;
    --module-accent-bi: #98a0ff;
    --module-accent-sharepoint: #6fe0bf;
    --module-accent-security: #e8ca6e;
    --module-accent-admin: #a9b8cc;
    --module-accent-crm: #5ecb95;
    --module-accent-tender: #e08cc8;

    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'%3E%3Cpath d='M3 4.5 8 8.5l5-4' fill='none' stroke='%23b8d9e6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    --nav-link: #8fd0ff;

    --bg-aurora:
        radial-gradient(circle at 12% 8%, rgba(79, 195, 255, 0.09), transparent 46%),
        radial-gradient(circle at 88% 14%, rgba(142, 150, 236, 0.12), transparent 42%),
        radial-gradient(circle at 48% 90%, rgba(103, 217, 189, 0.09), transparent 44%),
        linear-gradient(135deg, #070e19 0%, #0a1424 52%, #070e19 100%);
    --surface-aurora:
        radial-gradient(ellipse at 52% 112%, color-mix(in srgb, var(--glass-aura-cyan) 8%, transparent), transparent 52%),
        radial-gradient(circle at 92% 0, color-mix(in srgb, var(--glass-aura-violet) 10%, transparent), transparent 48%),
        linear-gradient(155deg, var(--glass-surface-strong), var(--glass-surface));
    --control-aurora:
        radial-gradient(ellipse at 50% 120%, color-mix(in srgb, var(--glass-aura-cyan) 5%, transparent), transparent 54%),
        linear-gradient(155deg, rgba(15, 27, 46, 0.88), rgba(8, 17, 30, 0.82));
    --surface-outline-glow: rgba(63, 145, 165, 0.035);
    --aurora-animation: auroraFloat 42s ease-in-out infinite;
}

/* ============================================================================
 * AI Colors Theme
 * ============================================================================ */
[data-theme="ai"] {
    color-scheme: dark;

    --color-primary: #22b8d8;
    --color-primary-dark: #1a9cbd;
    --color-secondary: #8f88ff;
    --bs-primary-rgb: 34, 184, 216;
    --bs-link-color-rgb: 127, 231, 255;
    --bs-link-hover-color-rgb: 178, 242, 255;

    /* Semantic colours lifted for this near-black ground (see the dark theme
       note); slightly more luminous to sit with the ai palette's neon accents. */
    --color-success: #6bdba8;
    --color-danger: #ff8ba0;
    --color-warning: #f4cc6a;
    --color-info: #7ad8f0;
    --bs-success: var(--color-success);
    --bs-success-rgb: 107, 219, 168;
    --bs-danger: var(--color-danger);
    --bs-danger-rgb: 255, 139, 160;
    --bs-warning: var(--color-warning);
    --bs-warning-rgb: 244, 204, 106;
    --bs-info: var(--color-info);
    --bs-info-rgb: 122, 216, 240;

    --bg-primary: #05091a;
    --bg-secondary: #0c1430;
    --bg-tertiary: #131f47;

    --text-primary: #f0fbff;
    --text-secondary: #c2d9f0;
    --text-muted: #7fa3c4;

    --overlay-text: #e0f7ff;

    --border-color: #263e6e;
    --shadow-color: rgba(0, 0, 0, 0.4);
    --table-header-bg: rgba(19, 31, 71, 0.86);
    --table-row-bg: rgba(12, 20, 48, 0.8);
    --table-row-alt-bg: rgba(15, 25, 58, 0.8);
    --table-hover-bg: rgba(30, 52, 95, 0.86);

    --glass-aura-cyan: #55e0ff;
    --glass-aura-mint: #5ff0c8;
    --glass-aura-violet: #a490ff;
    --glass-surface: rgba(9, 15, 31, 0.58);
    --glass-surface-strong: rgba(12, 19, 38, 0.8);
    --glass-surface-muted: rgba(23, 35, 69, 0.58);
    --glass-line: rgba(50, 92, 130, 0.5);
    --glass-line-soft: rgba(50, 92, 130, 0.3);
    --glass-glow: rgba(69, 154, 172, 0.095);
    --glass-shadow: rgba(0, 0, 0, 0.38);
    --glass-mix-base: transparent;
    --icon-color: #99d0dc;
    --icon-color-strong: #c1edf4;

    --module-accent-platform: #86d9ef;
    --module-accent-knowledge: #c0a8ff;
    --module-accent-ai: #6ee4ff;
    --module-accent-clm: #f6c06e;
    --module-accent-risk: #ff8ba0;
    --module-accent-bi: #9aa2ff;
    --module-accent-sharepoint: #74efd0;
    --module-accent-security: #edd678;
    --module-accent-admin: #b2bfd6;
    --module-accent-crm: #6bd7a1;
    --module-accent-tender: #e796d2;

    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'%3E%3Cpath d='M3 4.5 8 8.5l5-4' fill='none' stroke='%23c7fbff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    --nav-link: #8be9ff;

    --bg-aurora:
        radial-gradient(circle at 12% 8%, rgba(69, 154, 172, 0.09), transparent 46%),
        radial-gradient(circle at 88% 14%, rgba(151, 146, 255, 0.13), transparent 42%),
        radial-gradient(circle at 48% 90%, rgba(107, 240, 203, 0.1), transparent 44%),
        linear-gradient(135deg, #070b18 0%, #0b1125 52%, #070b18 100%);
    --surface-aurora:
        radial-gradient(ellipse at 52% 112%, color-mix(in srgb, var(--glass-aura-cyan) 9%, transparent), transparent 52%),
        radial-gradient(circle at 92% 0, color-mix(in srgb, var(--glass-aura-violet) 11%, transparent), transparent 48%),
        linear-gradient(155deg, var(--glass-surface-strong), var(--glass-surface));
    --control-aurora:
        radial-gradient(ellipse at 50% 120%, color-mix(in srgb, var(--glass-aura-cyan) 5%, transparent), transparent 54%),
        linear-gradient(155deg, rgba(15, 23, 48, 0.88), rgba(7, 11, 24, 0.82));
    --surface-outline-glow: rgba(69, 154, 172, 0.04);
    --aurora-animation: auroraFloat 42s ease-in-out infinite;
}

/* ============================================================================
 * Global Styles
 * ============================================================================ */
* {
    transition: background-color var(--transition-duration) var(--transition-timing),
                color var(--transition-duration) var(--transition-timing),
                border-color var(--transition-duration) var(--transition-timing);
}

html, body {
    background-color: var(--bg-primary);
    background-image: var(--bg-aurora);
    background-size: 160% 160%, 160% 160%, 170% 170%, 160% 160%, 100% 100%;
    background-attachment: fixed;
    color: var(--text-primary);
    font-family: var(--font-family-base);
    animation: var(--aurora-animation);
}

/* Modern display type: slightly tight tracking on headings, comfy body leading. */
h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.015em;
}

body {
    line-height: 1.55;
}

/* Visible keyboard focus everywhere (subtle, accent-tinted). */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--color-primary) 65%, transparent);
    outline-offset: 2px;
}

label,
.form-label {
    color: var(--text-primary) !important;
}

.form-text {
    color: var(--text-secondary) !important;
}

a {
    color: var(--nav-link);
    text-decoration: none;
}

a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.btn-primary:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.card {
    background-color: var(--bg-secondary);
    background-image: var(--surface-aurora);
    border-color: var(--border-color);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--shadow-color) 66%, transparent),
                0 0 0 1px var(--surface-outline-glow);
}

.form-control {
    background-color: var(--bg-secondary);
    background-image: var(--control-aurora);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.form-select {
    background-color: var(--bg-secondary);
    background-image: var(--control-aurora);
    color: var(--text-primary) !important;
    border-color: var(--border-color);
}

.form-control,
.form-select,
textarea,
input,
select {
    color: var(--text-primary) !important;
}

.form-select option {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.form-control:disabled,
.form-select:disabled {
    color: color-mix(in srgb, var(--text-primary) 72%, var(--text-secondary)) !important;
    -webkit-text-fill-color: color-mix(in srgb, var(--text-primary) 72%, var(--text-secondary));
    opacity: 0.95;
}

.form-control:focus {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.18);
}

.form-select:focus {
    background-color: var(--bg-secondary);
    color: var(--text-primary) !important;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.18);
}

.form-control::placeholder,
.form-select::placeholder,
textarea::placeholder,
input::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

input[type="time"],
.form-control[type="time"],
.theme-time-picker {
    color-scheme: light;
}

[data-theme="dark"] input[type="time"],
[data-theme="dark"] .form-control[type="time"],
[data-theme="dark"] .theme-time-picker,
[data-theme="ai"] input[type="time"],
[data-theme="ai"] .form-control[type="time"],
[data-theme="ai"] .theme-time-picker {
    color-scheme: dark;
}

input[type="time"]::-webkit-calendar-picker-indicator,
.form-control[type="time"]::-webkit-calendar-picker-indicator,
.theme-time-picker::-webkit-calendar-picker-indicator {
    opacity: 0.82;
    cursor: pointer;
}

[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] .form-control[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] .theme-time-picker::-webkit-calendar-picker-indicator,
[data-theme="ai"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="ai"] .form-control[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="ai"] .theme-time-picker::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.18);
}

.form-control[type="file"] {
    padding: 0;
    overflow: hidden;
}

.form-control[type="file"]::file-selector-button {
    margin-inline-end: 0.85rem;
    padding: 0.58rem 0.95rem;
    border: 0;
    border-inline-end: 1px solid var(--border-color);
    background:
        linear-gradient(145deg,
            color-mix(in srgb, var(--color-primary) 18%, var(--bg-tertiary)),
            color-mix(in srgb, var(--color-primary) 10%, var(--bg-secondary)));
    color: var(--text-primary);
    font-weight: 600;
    cursor: pointer;
}

.form-control[type="file"]::file-selector-button:hover {
    background:
        linear-gradient(145deg,
            color-mix(in srgb, var(--color-primary) 24%, var(--bg-tertiary)),
            color-mix(in srgb, var(--color-primary) 14%, var(--bg-secondary)));
}

.form-control[type="file"]::-webkit-file-upload-button {
    margin-inline-end: 0.85rem;
    padding: 0.58rem 0.95rem;
    border: 0;
    border-inline-end: 1px solid var(--border-color);
    background:
        linear-gradient(145deg,
            color-mix(in srgb, var(--color-primary) 18%, var(--bg-tertiary)),
            color-mix(in srgb, var(--color-primary) 10%, var(--bg-secondary)));
    color: var(--text-primary);
    font-weight: 600;
    cursor: pointer;
}

.input-group-text {
    background-color: var(--bg-tertiary);
    background-image: var(--control-aurora);
    color: var(--text-primary);
    border-color: var(--border-color);
}

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

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

.form-check-label {
    color: var(--text-primary);
}

.dropdown-menu {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

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

.dropdown-item {
    color: var(--text-primary);
}

.dropdown-item:hover,
.dropdown-item:active {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.modal-content {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

.modal-header {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.modal-body {
    color: var(--text-primary);
}

.modal-footer {
    border-color: var(--border-color);
}

.card-header {
    background-color: var(--bg-tertiary);
    background-image: var(--surface-aurora);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.table {
    color: var(--text-primary);
    border-color: var(--border-color);
}

.table > :not(caption) > * > * {
    background-color: var(--table-row-bg);
    background-image: var(--surface-aurora);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.table thead th {
    background-color: color-mix(in srgb, var(--table-header-bg) 88%, var(--bg-secondary));
    background-image: none;
    color: var(--text-primary);
    border-color: var(--border-color);
}

.table tbody tr:nth-of-type(even) > * {
    background-color: var(--table-row-alt-bg);
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--table-hover-bg);
    color: var(--text-primary);
}

.table .text-muted {
    color: var(--text-secondary) !important;
}

/* Bootstrap's .badge is 0.75em, which renders at 12px inside normal body text
   and is the last widespread "text too small" surface (status chips on CRM,
   Tender, Todo and the admin pages). Pin it to the chip floor in rem so it
   cannot compound inside already-small containers. */
.badge {
    font-size: var(--font-size-xs);
}

.small,
small {
    color: var(--text-secondary);
    /* rem floor: Bootstrap's 0.875em compounds inside already-small text;
       a fixed 0.875rem keeps every meta line readable. */
    font-size: var(--font-size-sm);
}

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

.navbar, .sidebar {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

.btn-outline-primary {
    color: var(--color-primary);
    border-color: color-mix(in srgb, var(--color-primary) 70%, var(--border-color));
}

.btn-outline-primary:hover {
    color: var(--overlay-text);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-outline-secondary {
    color: var(--text-primary);
    border-color: var(--border-color);
}

.btn-outline-secondary:hover {
    color: var(--text-primary);
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
}

hr {
    border-color: var(--border-color);
}

.btn-secondary {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}

.btn-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
}

/* ============================================================================
 * Shared Aura Glass UI
 * ============================================================================ */

.page-header {
    position: relative;
    overflow: hidden;
    margin-bottom: 1rem;
    padding: clamp(1.1rem, 1.8vw, 1.5rem);
    border: 1px solid var(--glass-line);
    border-radius: 14px;
    background:
        radial-gradient(ellipse at 18% 110%, color-mix(in srgb, var(--glass-aura-cyan) 7%, transparent), transparent 52%),
        radial-gradient(circle at 92% 0, color-mix(in srgb, var(--glass-aura-violet) 10%, transparent), transparent 48%),
        linear-gradient(145deg, var(--glass-surface-strong), var(--glass-surface));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.13),
        0 16px 34px var(--glass-shadow);
    backdrop-filter: blur(18px) saturate(1.14);
}

.page-header::after {
    content: "";
    position: absolute;
    left: 1.25rem;
    right: 1.25rem;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--glass-aura-cyan) 34%, var(--glass-line)), transparent);
    opacity: 0.26;
}

.page-header h1,
.page-header h2,
.page-header h3 {
    margin-bottom: 0.35rem;
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: 0;
}

.page-header p {
    margin-bottom: 0;
    max-width: 82ch;
    color: var(--text-secondary);
}

.card,
.panel-card,
.modal-content,
.dropdown-menu,
.toast,
.list-group-item {
    border-radius: 14px;
    border-color: var(--glass-line) !important;
    background-color: transparent;
    background-image: var(--surface-aurora);
    color: var(--text-primary);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 14px 32px var(--glass-shadow),
        0 0 0 1px var(--surface-outline-glow);
    backdrop-filter: blur(18px) saturate(1.12);
}

.panel-card.card,
.card.panel-card,
.auth-panel.card {
    background-color: transparent !important;
    background-image: var(--surface-aurora) !important;
}

.card-header,
.modal-header,
.toast-header,
.card-footer,
.modal-footer {
    background-color: transparent;
    background-image:
        radial-gradient(ellipse at 50% 120%, color-mix(in srgb, var(--glass-aura-cyan) 4%, transparent), transparent 54%),
        linear-gradient(145deg, color-mix(in srgb, var(--glass-surface-muted) 88%, transparent), color-mix(in srgb, var(--glass-surface) 72%, transparent));
    border-color: var(--glass-line-soft) !important;
    color: var(--text-primary);
}

.card-title,
.modal-title,
.toast-header strong,
.fw-semibold,
strong {
    color: var(--text-primary);
}

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

.form-control,
.form-select,
.form-check-input,
.input-group-text,
textarea,
input,
select {
    border-radius: 10px;
}

.form-control,
.form-select,
.input-group-text {
    min-height: 2.45rem;
    border-color: var(--glass-line) !important;
    background-color: transparent;
    background-image: var(--control-aurora);
    color: var(--text-primary) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 8px 18px color-mix(in srgb, var(--glass-shadow) 42%, transparent);
}

.form-select {
    background-image: var(--select-chevron), var(--control-aurora);
    background-repeat: no-repeat, no-repeat;
    background-position: right 0.75rem center, center;
    background-size: 16px 12px, cover;
    padding-right: 2.2rem;
}

.form-control-sm,
.form-select-sm {
    min-height: 2.05rem;
    border-radius: 8px;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    background-color: transparent;
    border-color: color-mix(in srgb, var(--glass-aura-cyan) 48%, var(--glass-line)) !important;
    box-shadow:
        0 0 0 0.12rem color-mix(in srgb, var(--glass-aura-cyan) 12%, transparent),
        0 0 12px var(--glass-glow);
}

.form-control[readonly],
.form-control:disabled,
.form-select:disabled {
    background-color: color-mix(in srgb, var(--glass-surface-muted) 68%, transparent);
    background-image: var(--control-aurora);
    color: color-mix(in srgb, var(--text-primary) 72%, var(--text-secondary)) !important;
    -webkit-text-fill-color: color-mix(in srgb, var(--text-primary) 72%, var(--text-secondary));
}

input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"],
.form-control[type="date"],
.form-control[type="datetime-local"],
.form-control[type="month"],
.form-control[type="week"],
.form-control[type="time"],
.theme-time-picker {
    color-scheme: light;
}

[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] input[type="month"],
[data-theme="dark"] input[type="week"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] .form-control[type="date"],
[data-theme="dark"] .form-control[type="datetime-local"],
[data-theme="dark"] .form-control[type="month"],
[data-theme="dark"] .form-control[type="week"],
[data-theme="dark"] .form-control[type="time"],
[data-theme="dark"] .theme-time-picker,
[data-theme="ai"] input[type="date"],
[data-theme="ai"] input[type="datetime-local"],
[data-theme="ai"] input[type="month"],
[data-theme="ai"] input[type="week"],
[data-theme="ai"] input[type="time"],
[data-theme="ai"] .form-control[type="date"],
[data-theme="ai"] .form-control[type="datetime-local"],
[data-theme="ai"] .form-control[type="month"],
[data-theme="ai"] .form-control[type="week"],
[data-theme="ai"] .form-control[type="time"],
[data-theme="ai"] .theme-time-picker {
    color-scheme: dark;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
.form-control[type="date"]::-webkit-calendar-picker-indicator,
.form-control[type="datetime-local"]::-webkit-calendar-picker-indicator,
.form-control[type="month"]::-webkit-calendar-picker-indicator,
.form-control[type="week"]::-webkit-calendar-picker-indicator,
.form-control[type="time"]::-webkit-calendar-picker-indicator,
.theme-time-picker::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.76;
}

[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="week"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] .form-control[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] .form-control[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] .form-control[type="month"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] .form-control[type="week"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] .form-control[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] .theme-time-picker::-webkit-calendar-picker-indicator,
[data-theme="ai"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="ai"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-theme="ai"] input[type="month"]::-webkit-calendar-picker-indicator,
[data-theme="ai"] input[type="week"]::-webkit-calendar-picker-indicator,
[data-theme="ai"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="ai"] .form-control[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="ai"] .form-control[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-theme="ai"] .form-control[type="month"]::-webkit-calendar-picker-indicator,
[data-theme="ai"] .form-control[type="week"]::-webkit-calendar-picker-indicator,
[data-theme="ai"] .form-control[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="ai"] .theme-time-picker::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.18) saturate(0.9);
    opacity: 0.86;
}

.btn {
    border-radius: 10px;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.btn-primary {
    background:
        radial-gradient(ellipse at 50% 120%, color-mix(in srgb, var(--glass-aura-mint) 22%, transparent), transparent 58%),
        linear-gradient(145deg, color-mix(in srgb, var(--color-primary) 92%, white 8%), color-mix(in srgb, var(--color-primary-dark) 92%, black 8%));
    border-color: color-mix(in srgb, var(--glass-aura-cyan) 56%, var(--glass-line));
    color: #ffffff;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--glass-glow) 55%, transparent);
}

.btn-primary:hover,
.btn-primary:focus {
    background:
        radial-gradient(ellipse at 50% 120%, color-mix(in srgb, var(--glass-aura-mint) 26%, transparent), transparent 58%),
        linear-gradient(145deg, color-mix(in srgb, var(--color-primary) 96%, white 4%), var(--color-primary-dark));
    border-color: color-mix(in srgb, var(--glass-aura-cyan) 72%, var(--glass-line));
    color: #ffffff;
}

.btn-outline-light,
.btn-outline-secondary,
.btn-outline-primary {
    background: color-mix(in srgb, var(--glass-surface) 64%, transparent);
    color: var(--text-primary);
    border-color: var(--glass-line) !important;
}

.btn-outline-light:hover,
.btn-outline-secondary:hover,
.btn-outline-primary:hover {
    background: color-mix(in srgb, var(--glass-aura-cyan) 8%, var(--glass-surface));
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--glass-aura-cyan) 26%, var(--glass-line)) !important;
    box-shadow: 0 0 10px var(--glass-glow);
}

/* Semantic outline buttons: Bootstrap compiles these variants with LITERAL
   hex values, so they ignore the theme tokens entirely and stayed at the
   light-theme hues on dark grounds (Delete buttons measured ~3.4:1). Route
   them through the tokens, and keep hover as a tint rather than a solid fill
   so the label contrast holds in every theme. */
.btn-outline-danger,
.btn-outline-success,
.btn-outline-warning {
    background: color-mix(in srgb, var(--glass-surface) 64%, transparent);
}

/* Drive them through Bootstrap 5.3's own --bs-btn-* variables so EVERY state
   (rest, hover, active, disabled) follows the theme instead of the compiled
   literal - setting `color` alone leaves the disabled state on #dc3545. */
.btn-outline-danger {
    --bs-btn-color: var(--color-danger);
    --bs-btn-border-color: color-mix(in srgb, var(--color-danger) 52%, var(--glass-line));
    --bs-btn-disabled-color: var(--color-danger);
    --bs-btn-disabled-border-color: color-mix(in srgb, var(--color-danger) 40%, var(--glass-line));
    color: var(--color-danger);
    border-color: color-mix(in srgb, var(--color-danger) 52%, var(--glass-line)) !important;
}

.btn-outline-success {
    --bs-btn-color: var(--color-success);
    --bs-btn-border-color: color-mix(in srgb, var(--color-success) 52%, var(--glass-line));
    --bs-btn-disabled-color: var(--color-success);
    --bs-btn-disabled-border-color: color-mix(in srgb, var(--color-success) 40%, var(--glass-line));
    color: var(--color-success);
    border-color: color-mix(in srgb, var(--color-success) 52%, var(--glass-line)) !important;
}

.btn-outline-warning {
    --bs-btn-color: var(--color-warning);
    --bs-btn-border-color: color-mix(in srgb, var(--color-warning) 52%, var(--glass-line));
    --bs-btn-disabled-color: var(--color-warning);
    --bs-btn-disabled-border-color: color-mix(in srgb, var(--color-warning) 40%, var(--glass-line));
    color: var(--color-warning);
    border-color: color-mix(in srgb, var(--color-warning) 52%, var(--glass-line)) !important;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:active {
    background: color-mix(in srgb, var(--color-danger) 15%, var(--glass-surface)) !important;
    color: var(--color-danger) !important;
    border-color: color-mix(in srgb, var(--color-danger) 72%, var(--glass-line)) !important;
}

.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active {
    background: color-mix(in srgb, var(--color-success) 15%, var(--glass-surface)) !important;
    color: var(--color-success) !important;
    border-color: color-mix(in srgb, var(--color-success) 72%, var(--glass-line)) !important;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-warning:active {
    background: color-mix(in srgb, var(--color-warning) 15%, var(--glass-surface)) !important;
    color: var(--color-warning) !important;
    border-color: color-mix(in srgb, var(--color-warning) 72%, var(--glass-line)) !important;
}

.btn-link {
    color: var(--nav-link);
}

.alert {
    border-radius: 12px;
    border-color: var(--glass-line) !important;
    color: var(--text-primary);
    background-image: var(--surface-aurora);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--glass-shadow) 72%, transparent);
}

.alert-info {
    background-color: color-mix(in srgb, var(--glass-aura-cyan) 13%, var(--glass-surface));
}

.alert-success {
    border-color: color-mix(in srgb, var(--color-success) 34%, var(--glass-line)) !important;
    background:
        radial-gradient(ellipse at 18% 110%, color-mix(in srgb, var(--color-success) 15%, transparent), transparent 56%),
        color-mix(in srgb, var(--color-success) 11%, var(--glass-surface));
    box-shadow:
        0 12px 28px color-mix(in srgb, var(--glass-shadow) 70%, transparent),
        0 0 18px color-mix(in srgb, var(--color-success) 11%, transparent);
}

.alert-warning {
    background-color: color-mix(in srgb, var(--color-warning) 15%, var(--glass-surface));
}

.alert-danger {
    border-color: color-mix(in srgb, var(--color-danger) 34%, var(--glass-line)) !important;
    background:
        radial-gradient(ellipse at 18% 110%, color-mix(in srgb, var(--color-danger) 15%, transparent), transparent 56%),
        color-mix(in srgb, var(--color-danger) 11%, var(--glass-surface));
    box-shadow:
        0 12px 28px color-mix(in srgb, var(--glass-shadow) 70%, transparent),
        0 0 18px color-mix(in srgb, var(--color-danger) 11%, transparent);
}

.badge,
.text-bg-primary,
.text-bg-secondary,
.text-bg-info {
    border: 1px solid color-mix(in srgb, var(--glass-aura-cyan) 20%, var(--glass-line));
    background: color-mix(in srgb, var(--glass-aura-cyan) 8%, var(--glass-surface)) !important;
    color: var(--text-primary) !important;
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-primary);
    color: var(--text-primary);
}

.table-responsive {
    border-radius: 12px;
}

.table > :not(caption) > * > * {
    background-image: none;
}

.table thead th {
    /* 2026-09-01 revamp: sentence-case 0.875rem headers replace the dated
       0.76rem uppercase microcaps (a top "text too small" complaint). */
    letter-spacing: 0.01em;
    font-size: var(--font-size-sm);
    font-weight: 650;
    color: color-mix(in srgb, var(--text-primary) 82%, var(--text-secondary));
    text-shadow: none;
}

/* Roomier data cells: less cramped, more modern density. */
.table > :not(caption) > * > * {
    padding: 0.62rem 0.75rem;
}

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

.list-item,
.lookup-type-item,
.risk-policy-list-item {
    border-radius: 12px;
    border: 1px solid transparent;
    color: var(--text-primary);
    background: transparent;
}

.list-item:hover,
.lookup-type-item:hover,
.risk-policy-list-item:hover,
.list-item.active,
.lookup-type-item.active,
.risk-policy-list-item.selected {
    border-color: color-mix(in srgb, var(--glass-aura-cyan) 22%, var(--glass-line));
    background:
        radial-gradient(ellipse at 50% 120%, color-mix(in srgb, var(--glass-aura-cyan) 6%, transparent), transparent 54%),
        color-mix(in srgb, var(--glass-surface-muted) 76%, transparent);
    color: var(--text-primary);
}

.spinner-border {
    color: var(--glass-aura-cyan);
}

.progress {
    background-color: color-mix(in srgb, var(--glass-line-soft) 70%, transparent);
    border-radius: 999px;
}

/* The `background` shorthand would wipe Bootstrap's striped background-image +
   background-size, leaving progress-bar-animated flickering a 1rem sliver —
   so striped bars are excluded and keep Bootstrap's own stripe pattern. */
.progress-bar:not(.progress-bar-striped) {
    background:
        linear-gradient(90deg, var(--color-primary), color-mix(in srgb, var(--glass-aura-mint) 70%, var(--color-primary)));
}

details.app-collapsible {
    border: 1px solid var(--glass-line-soft);
    border-radius: 12px;
    background:
        radial-gradient(ellipse at 50% 120%, color-mix(in srgb, var(--glass-aura-cyan) 4%, transparent), transparent 54%),
        color-mix(in srgb, var(--glass-surface-muted) 70%, transparent);
}

details.app-collapsible + details.app-collapsible {
    margin-top: 0.75rem;
}

details.app-collapsible > summary {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.82rem 1rem;
    color: var(--text-primary);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

details.app-collapsible > summary::-webkit-details-marker {
    display: none;
}

details.app-collapsible > summary::before {
    content: "";
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.18s ease;
    color: var(--icon-color);
}

details.app-collapsible[open] > summary::before {
    transform: rotate(45deg);
}

.app-collapsible__body {
    padding: 0 1rem 1rem;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--bg-primary) 74%, transparent);
}

::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--glass-line) 75%, var(--glass-aura-cyan));
    border: 2px solid color-mix(in srgb, var(--bg-primary) 92%, transparent);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--glass-aura-cyan) 50%, var(--glass-line));
}

@keyframes auroraFloat {
    0% {
        background-position: 0% 0%, 100% 16%, 48% 100%, 18% 78%, 0 0;
    }
    50% {
        background-position: 18% 10%, 84% 10%, 58% 86%, 26% 70%, 0 0;
    }
    100% {
        background-position: 0% 0%, 100% 16%, 48% 100%, 18% 78%, 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    html,
    body {
        animation: none;
    }
}

/* Print: the on-screen density revamp (roomier data cells, rem-floored small
   text) costs rows per page on the print-optimised A4 assessment reports, so
   printed output keeps the tighter compact metrics. Screen rules are unchanged. */
@media print {
    .table > :not(caption) > * > * {
        padding: 0.35rem 0.5rem;
    }

    .small,
    small {
        font-size: 0.8em;
    }
}