/* ═══════════════════════════════════════════════════════════════════════════
   WeUni BackOffice — Global Design Layer
   Loads after Bootstrap 5 + AdminLTE 4. Overrides only CSS custom properties.
   No Bootstrap/AdminLTE classes are removed or renamed.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. TYPOGRAPHY ──────────────────────────────────────────────────────────
   Red Hat Display + Red Hat Text — designed for data-dense product UIs.
   Precise, accessible, institutional without being cold.
   Replaces Source Sans 3 (generic) and Figtree (overused). */

@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;500;600;700&family=Red+Hat+Text:wght@400;500;600&display=swap');


/* ── 2. LIGHT MODE ──────────────────────────────────────────────────────────
   All overrides scoped to [data-bs-theme="light"] + :root fallback.
   oklch() is supported in all major browsers since 2023. Bootstrap 5.3.x
   already uses CSS custom properties everywhere — safe to override. */

:root,
[data-bs-theme="light"] {

    /* Font stack */
    --bs-body-font-family: "Red Hat Text", ui-sans-serif, system-ui, sans-serif;
    --bs-font-sans-serif:  "Red Hat Text", ui-sans-serif, system-ui, sans-serif;

    /* Type scale — data-dense backoffice baseline.
       Body 14px aligns with Linear/Notion/Stripe Dashboard; heading scale
       compressed (ratio ~1.20) so h1 doesn't dwarf BO chrome. */
    --bs-body-font-size: 0.875rem;     /* 14px */
    --bs-h1-font-size:   1.75rem;      /* 28px */
    --bs-h2-font-size:   1.5rem;       /* 24px */
    --bs-h3-font-size:   1.25rem;      /* 20px */
    --bs-h4-font-size:   1.125rem;     /* 18px */
    --bs-h5-font-size:   1rem;         /* 16px */
    --bs-h6-font-size:   0.875rem;     /* 14px */

    /* Border radius — 0.375rem vs 0.5rem Bootstrap default: crisper, more precise */
    --bs-border-radius:      0.375rem;
    --bs-border-radius-sm:   0.25rem;
    --bs-border-radius-lg:   0.5rem;
    --bs-border-radius-xl:   0.75rem;
    --bs-border-radius-xxl:  1rem;
    --bs-border-radius-pill: 50rem;

    /* Shadows — tinted toward primary hue (219 = steel blue).
       Was: all shadows at opacity 0 (completely invisible). */
    --bs-box-shadow-sm:  0 2px 4px 0           oklch(0.25 0.04 219 / 0.06),
                         0 1px 2px -1px         oklch(0.25 0.04 219 / 0.04);
    --bs-box-shadow:     0 4px 6px -1px         oklch(0.25 0.04 219 / 0.08),
                         0 2px 4px -2px         oklch(0.25 0.04 219 / 0.05);
    --bs-box-shadow-lg:  0 10px 15px -3px       oklch(0.25 0.04 219 / 0.09),
                         0 4px 8px -4px         oklch(0.25 0.04 219 / 0.05);
    --bs-box-shadow-inset: inset 0 1px 2px      oklch(0.25 0.04 219 / 0.075);

    /* Surfaces — tinted toward primary hue.
       Creates subconscious brand cohesion without visible color.
       Was: pure grey (oklch chroma = 0). */
    --bs-body-bg:         oklch(0.9965 0.004 219);
    --bs-secondary-bg:    oklch(0.988  0.007 219);
    --bs-tertiary-bg:     oklch(0.982  0.009 219);

    /* Borders — more visible than Bootstrap default (#dee2e6 ≈ oklch 0.88).
       Compensates for removed card shadows — structure comes from borders, not elevation. */
    --bs-border-color:              oklch(0.82 0.014 219);
    --bs-border-color-translucent:  oklch(0.82 0.014 219 / 0.85);

    /* Primary — WeUni brand teal color(display-p3 0.20062 0.46325 0.55777).
       sRGB fallback ≈ #007891 (R=0 G=120 B=145). OKLCH: oklch(0.53 0.094 220).
       Naturally cohesive with our hue-219 surface system. */
    --bs-primary:                   oklch(0.53 0.094 220);
    --bs-primary-rgb:               0, 120, 145;
    --bs-primary-text-emphasis:     oklch(0.30 0.09 220);
    --bs-primary-bg-subtle:         oklch(0.93 0.025 220);
    --bs-primary-border-subtle:     oklch(0.78 0.06 220);
    --bs-link-color:                oklch(0.53 0.094 220);
    --bs-link-color-rgb:            0, 120, 145;
    --bs-link-hover-color:          oklch(0.46 0.094 220);
    --bs-link-hover-color-rgb:      0, 97, 117;

    /* Secondary — slate-blue (hue 245, low chroma).
       Same cool family as teal primary, distinct hue, never gray.
       Pairs naturally next to primary without competing. */
    --bs-secondary:                 oklch(0.45 0.045 245);
    --bs-secondary-rgb:             77, 93, 117;
    --bs-secondary-text-emphasis:   oklch(0.30 0.05 245);
    --bs-secondary-bg-subtle:       oklch(0.95 0.012 245);
    --bs-secondary-border-subtle:   oklch(0.82 0.025 245);

    /* Semantic role tokens — desaturated, brand-coherent. Hue map:
       success 155 (green), danger 15 (red), warning 75 (amber), info 210 (cyan-blue).
       Bootstrap defaults are saturated traffic-light → override here in OKLCH. */

    --bs-success:                   oklch(0.55 0.08 155);
    --bs-success-rgb:               58, 142, 92;
    --bs-success-text-emphasis:     oklch(0.32 0.10 155);
    --bs-success-bg-subtle:         oklch(0.95 0.025 155);
    --bs-success-border-subtle:     oklch(0.82 0.05 155);

    --bs-danger:                    oklch(0.55 0.13 15);
    --bs-danger-rgb:                177, 60, 50;
    --bs-danger-text-emphasis:      oklch(0.32 0.13 15);
    --bs-danger-bg-subtle:          oklch(0.95 0.030 15);
    --bs-danger-border-subtle:      oklch(0.82 0.06 15);

    --bs-warning:                   oklch(0.62 0.10 75);
    --bs-warning-rgb:               170, 130, 50;
    --bs-warning-text-emphasis:     oklch(0.36 0.10 65);
    --bs-warning-bg-subtle:         oklch(0.95 0.040 80);
    --bs-warning-border-subtle:     oklch(0.83 0.07 75);

    --bs-info:                      oklch(0.58 0.07 210);
    --bs-info-rgb:                  60, 130, 165;
    --bs-info-text-emphasis:        oklch(0.32 0.08 210);
    --bs-info-bg-subtle:            oklch(0.94 0.030 210);
    --bs-info-border-subtle:        oklch(0.82 0.05 210);
}


/* ── 3. DARK MODE ───────────────────────────────────────────────────────────
   [data-bs-theme="dark"] covers both: page dark mode AND the sidebar
   (which has data-bs-theme="dark" hardcoded on <aside>). */

[data-bs-theme="dark"] {

    --bs-body-font-family: "Red Hat Text", ui-sans-serif, system-ui, sans-serif;
    --bs-font-sans-serif:  "Red Hat Text", ui-sans-serif, system-ui, sans-serif;

    --bs-body-font-size: 0.875rem;
    --bs-h1-font-size:   1.75rem;
    --bs-h2-font-size:   1.5rem;
    --bs-h3-font-size:   1.25rem;
    --bs-h4-font-size:   1.125rem;
    --bs-h5-font-size:   1rem;
    --bs-h6-font-size:   0.875rem;

    --bs-border-radius:      0.375rem;
    --bs-border-radius-sm:   0.25rem;
    --bs-border-radius-lg:   0.5rem;
    --bs-border-radius-xl:   0.75rem;
    --bs-border-radius-xxl:  1rem;
    --bs-border-radius-pill: 50rem;

    /* Shadows stronger in dark — tinted same hue */
    --bs-box-shadow-sm:  0 2px 4px 0           oklch(0.08 0.03 219 / 0.35),
                         0 1px 2px -1px         oklch(0.08 0.03 219 / 0.25);
    --bs-box-shadow:     0 4px 6px -1px         oklch(0.08 0.03 219 / 0.40),
                         0 2px 4px -2px         oklch(0.08 0.03 219 / 0.30);
    --bs-box-shadow-lg:  0 10px 15px -3px       oklch(0.08 0.03 219 / 0.45),
                         0 4px 8px -4px         oklch(0.08 0.03 219 / 0.30);
    --bs-box-shadow-inset: inset 0 1px 2px      oklch(0.08 0.03 219 / 0.50);

    /* Tinted dark surfaces */
    --bs-body-bg:         oklch(0.138 0.010 219);
    --bs-secondary-bg:    oklch(0.188 0.012 219);
    --bs-tertiary-bg:     oklch(0.220 0.008 219);

    /* Borders — more visible in dark to compensate for removed shadows */
    --bs-border-color:              oklch(0.30 0.018 219);
    --bs-border-color-translucent:  oklch(0.30 0.018 219 / 0.85);

    /* Primary — WeUni brand teal, lightened for dark surfaces */
    --bs-primary:                   oklch(0.67 0.094 220);
    --bs-primary-rgb:               0, 172, 207;
    --bs-primary-text-emphasis:     oklch(0.82 0.06 220);
    --bs-primary-bg-subtle:         oklch(0.22 0.04 220);
    --bs-primary-border-subtle:     oklch(0.38 0.07 220);
    --bs-link-color:                oklch(0.67 0.094 220);
    --bs-link-color-rgb:            0, 172, 207;
    --bs-link-hover-color:          oklch(0.75 0.08 220);
    --bs-link-hover-color-rgb:      51, 195, 227;

    /* Secondary — slate-blue lightened for dark surfaces */
    --bs-secondary:                 oklch(0.65 0.045 245);
    --bs-secondary-rgb:             140, 156, 180;
    --bs-secondary-text-emphasis:   oklch(0.85 0.04 245);
    --bs-secondary-bg-subtle:       oklch(0.25 0.025 245);
    --bs-secondary-border-subtle:   oklch(0.40 0.04 245);

    /* Semantic role tokens — lightened for dark surfaces */

    --bs-success:                   oklch(0.72 0.10 155);
    --bs-success-rgb:               90, 195, 130;
    --bs-success-text-emphasis:     oklch(0.85 0.10 155);
    --bs-success-bg-subtle:         oklch(0.22 0.05 155);
    --bs-success-border-subtle:     oklch(0.38 0.07 155);

    --bs-danger:                    oklch(0.72 0.14 15);
    --bs-danger-rgb:                225, 110, 100;
    --bs-danger-text-emphasis:      oklch(0.85 0.10 15);
    --bs-danger-bg-subtle:          oklch(0.22 0.06 15);
    --bs-danger-border-subtle:      oklch(0.38 0.08 15);

    --bs-warning:                   oklch(0.78 0.10 75);
    --bs-warning-rgb:               225, 175, 90;
    --bs-warning-text-emphasis:     oklch(0.88 0.09 75);
    --bs-warning-bg-subtle:         oklch(0.25 0.06 75);
    --bs-warning-border-subtle:     oklch(0.40 0.08 75);

    --bs-info:                      oklch(0.74 0.08 210);
    --bs-info-rgb:                  120, 175, 215;
    --bs-info-text-emphasis:        oklch(0.85 0.08 210);
    --bs-info-bg-subtle:            oklch(0.22 0.05 210);
    --bs-info-border-subtle:        oklch(0.38 0.06 210);
}


/* ── 4. DISPLAY FONT — headings + nav brand ─────────────────────────────── */

h1, h2, h3, h4,
.h1, .h2, .h3, .h4,
.brand-text,
.app-content-header h1,
.page-header {
    font-family: "Red Hat Display", ui-sans-serif, system-ui, sans-serif;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.app-content-header h1 {
    letter-spacing: -0.02em;
}

.sidebar-brand .brand-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

.sidebar-brand .brand-logo {
    height: 22px;
    width: auto;
    display: block;
}

.sidebar-brand .brand-text {
    font-size: 0.75rem;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.7;
}

/* Collapsed sidebar: logo unreadable at narrow width, show "CMS" instead */
body.sidebar-collapse .sidebar-brand .brand-logo {
    display: none;
}

aside.app-sidebar:hover .brand-logo {
    display: inline-block;
}

body.sidebar-collapse .sidebar-brand .brand-text {
    display: inline-block;
    max-width: none;
    margin-left: 0;
    overflow: visible;
    visibility: visible;
    opacity: 1;
    animation: none;
}


/* ── 5. TABULAR NUMBERS — tables, badges, metrics ──────────────────────── */

table td,
table th,
.badge,
code, kbd {
    font-variant-numeric: tabular-nums;
}


/* ── 6. CARD STRUCTURE — Border-based, no shadows ───────────────────────── */

/* Shadows removed: structure comes from border + header bg distinction.
   Dropdowns/modals/tooltips still use --bs-box-shadow (not overridden here).
   !important needed to override AdminLTE's more-specific card rules. */
.card,
.info-box,
.small-box {
    box-shadow: none !important;
}

.card {
    background-color: var(--bs-tertiary-bg) !important;
}

/* Card header — distinct background creates internal hierarchy without shadows */
.card-header {
    background-color: var(--bs-tertiary-bg);
    border-bottom-color: var(--bs-border-color);
}
.card-footer {
    background-color: var(--bs-tertiary-bg);
    border-top-color: var(--bs-border-color);
}


/* ── 7. TABLE STRIPE + HOVER REFINEMENT ─────────────────────────────────── */

:root,
[data-bs-theme="light"] {
    /* Subtler stripe — barely-there tint instead of Bootstrap's harsh 5% grey */
    --bs-table-striped-bg: oklch(0.983 0.006 219 / 0.6);
    /* Hover tinted toward primary for brand cohesion */
    --bs-table-hover-bg:   oklch(0.87 0.04 219 / 0.10);
}

[data-bs-theme="dark"] {
    --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
    --bs-table-hover-bg:   oklch(0.5 0.05 219 / 0.18);
}


/* ── 8. DATATABLES — Global Refinements ─────────────────────────────────── */

/* DataTables Bootstrap 5 theme generates .row.mt-2 for toolbar rows (top + bottom).
   Add padding so toolbar content doesn't touch the card border. */
.card-body.p-0 .dt-container .row.mt-2 {
    padding-inline: 1rem;
    padding-block: 0.5rem;
    margin-top: 0 !important;
}

/* Table header — uppercase labels, display font, institutional feel.
   Applies to every .table (key-value detail tables, static lists, etc.).
   DataTable headers below override with denser sizing + secondary background. */
.table > :not(caption) > * > th {
    font-family: "Red Hat Display", ui-sans-serif, system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    vertical-align: middle;
    white-space: nowrap;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    background-color: inherit !important;
}
.table > :not(caption) > * > td {
    vertical-align: middle;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    background-color: inherit !important;
}

/* DataTable headers: denser sizing + tinted background for data-dense rows.
   Header sized just below cell (11px vs 13px) so gap reads as hierarchy, not strappo. */
table.dataTable thead th,
table.dataTable thead td {
    font-size: 0.6875rem;
    background-color: var(--bs-secondary-bg);
    border-bottom-width: 2px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* Data-dense rows: 14px cell + tighter padding = +20-25% more rows visible per viewport */
table.dataTable tbody td {
    font-size: 0.875rem;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    vertical-align: middle;
    border-color: var(--bs-border-color);
}

/* Visible row separator — stronger than Bootstrap default */
table.dataTable tbody tr {
    border-bottom-color: var(--bs-border-color);
}

/* Action buttons in table rows — uniform square sizing whether wrapped in btn-group or standalone.
   Square (width = height) icon-only buttons. Covers DataTable `td.actions` cells and the
   `.opt-column` wrapper used in static templates (institution detail tabs, etc.). */
table.dataTable td.actions .btn.btn-sm,
table.dataTable .btn-group .btn.btn-sm,
.opt-column .btn.btn-sm {
    border-radius: var(--bs-border-radius-sm);
    padding: 0;
    font-size: 0.8125rem;
    line-height: 1;
    width: 1.875rem;
    height: 1.875rem;
    min-width: 1.875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Spacing between adjacent action buttons (no btn-group wrapper) */
table.dataTable td.actions > .btn-group + .btn,
table.dataTable td.actions > .btn + .btn,
.opt-column > .btn + .btn,
.opt-column > a.btn + a.btn {
    margin-left: 4px;
}

/* Clip card corners on edge-to-edge table so thead doesn't overflow radius.
   Only clip horizontally: vertical must stay visible so the SearchBuilder /
   Filter dropdown can overflow below a short (few/no rows) table.
   overflow-x:clip + overflow-y:visible is a valid combo (clip, unlike hidden,
   does not coerce the other axis to auto). */
.card:has(> .card-body.p-0) {
    overflow-x: clip;
    overflow-y: visible;
}


/* ── 8b. DATATABLE TOOLBAR BUTTONS — Filter / Export / Mass Action ───────── */

/* DataTables Buttons Bootstrap5 theme adds .dt-button class on top of our .btn variant.
   Default .dt-button cascade can clobber our --bs-btn-* tokens — re-assert outline pattern.
   SearchBuilder Filter button uses className 'btn btn-outline-secondary' from list templates;
   we promote it to brand teal for better visibility (filter is a primary tool, not a discard). */

.dt-buttons .btn.btn-outline-secondary,
button.dtsb-button.btn.btn-outline-secondary {
    --bs-btn-color:              oklch(0.45 0.045 245);
    --bs-btn-bg:                 transparent;
    --bs-btn-border-color:       oklch(0.62 0.045 245);
    --bs-btn-hover-color:        #fff;
    --bs-btn-hover-bg:           oklch(0.45 0.045 245);
    --bs-btn-hover-border-color: oklch(0.45 0.045 245);
    --bs-btn-active-color:       #fff;
    --bs-btn-active-bg:          oklch(0.39 0.045 245);
    --bs-btn-active-border-color:oklch(0.37 0.045 245);
}

/* Dark mode: invert luminance — light text/border on dark bg, dark text on light fill on hover. */
[data-bs-theme="dark"] .dt-buttons .btn.btn-outline-secondary,
[data-bs-theme="dark"] button.dtsb-button.btn.btn-outline-secondary {
    --bs-btn-color:              oklch(0.82 0.035 245);
    --bs-btn-bg:                 transparent;
    --bs-btn-border-color:       oklch(0.55 0.045 245);
    --bs-btn-hover-color:        oklch(0.18 0.03 245);
    --bs-btn-hover-bg:           oklch(0.82 0.035 245);
    --bs-btn-hover-border-color: oklch(0.82 0.035 245);
    --bs-btn-active-color:       oklch(0.18 0.03 245);
    --bs-btn-active-bg:          oklch(0.88 0.035 245);
    --bs-btn-active-border-color:oklch(0.88 0.035 245);
}

/* SearchBuilder Filter button — promote to brand teal outline.
   Filter is a primary navigation tool: it deserves more presence than a generic neutral button. */
button.dtsb-button.btn,
.dt-buttons button.dt-button.btn-outline-secondary:has(.fa-filter),
.dt-buttons .btn.btn-outline-secondary:has(.fa-filter) {
    --bs-btn-color:              oklch(0.53 0.094 220);
    --bs-btn-bg:                 transparent;
    --bs-btn-border-color:       oklch(0.62 0.094 220);
    --bs-btn-hover-color:        #fff;
    --bs-btn-hover-bg:           oklch(0.53 0.094 220);
    --bs-btn-hover-border-color: oklch(0.53 0.094 220);
}

/* Active filter state — fill with brand teal to signal "filter is on". */
button.dtsb-button.dtsb-button-active,
.dt-buttons .dt-button.active.btn-outline-secondary,
.dt-buttons .btn.btn-outline-secondary.dtsb-button-active {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
    border-color: var(--bs-primary) !important;
}

/* DT-button collection dropdown — when SearchBuilder opens, the parent button gets `.dt-button-active`.
   Keep brand teal fill so the open state reads as deliberate. */
.dt-buttons .dt-button.dt-button-active {
    background-color: var(--bs-primary);
    color: #fff;
    border-color: var(--bs-primary);
}

/* Mass Action "Go!" button — disabled state must remain readable.
   Default Bootstrap disabled opacity 0.65 over slate-blue makes white text fade to gray.
   Bump opacity and keep text contrast. */
.dt-layout-start button.btn-primary:disabled,
.dt-layout-start button.btn-secondary:disabled {
    opacity: 0.5;
    color: #fff !important;
}


/* ── 9. INFO-BOX — Desaturate traffic-light colors ──────────────────────── */

/* AdminLTE's info-box with text-bg-* fills the entire box with saturated color.
   Override to subtle tint + colored icon area only. Light mode. */

:root .info-box.text-bg-primary,
[data-bs-theme="light"] .info-box.text-bg-primary {
    background-color: oklch(0.94 0.025 219) !important;
    color: oklch(0.30 0.06 219) !important;
}
:root .info-box.text-bg-danger,
[data-bs-theme="light"] .info-box.text-bg-danger {
    background-color: oklch(0.95 0.025 15) !important;
    color: oklch(0.35 0.09 15) !important;
}
:root .info-box.text-bg-success,
[data-bs-theme="light"] .info-box.text-bg-success {
    background-color: oklch(0.94 0.025 155) !important;
    color: oklch(0.32 0.08 155) !important;
}
:root .info-box.text-bg-warning,
[data-bs-theme="light"] .info-box.text-bg-warning {
    background-color: oklch(0.95 0.04 80) !important;
    color: oklch(0.38 0.10 65) !important;
}
:root .info-box.text-bg-info,
[data-bs-theme="light"] .info-box.text-bg-info {
    background-color: oklch(0.93 0.03 210) !important;
    color: oklch(0.30 0.07 210) !important;
}
:root .info-box.text-bg-light,
[data-bs-theme="light"] .info-box.text-bg-light {
    background-color: oklch(0.96 0.005 219) !important;
    color: var(--bs-body-color) !important;
}

/* Icon area inside full-color info-box — restore a more saturated accent */
.info-box.text-bg-primary .info-box-icon {
    background-color: oklch(0.5292 0.0958 219) !important;
    color: white !important;
}
.info-box.text-bg-danger .info-box-icon {
    background-color: oklch(0.577 0.245 27.325) !important;
    color: white !important;
}
.info-box.text-bg-success .info-box-icon {
    background-color: oklch(0.595 0.151 156.562) !important;
    color: white !important;
}
.info-box.text-bg-warning .info-box-icon {
    background-color: oklch(0.702 0.179 55.934) !important;
    color: oklch(0.15 0.03 65) !important;
}
.info-box.text-bg-info .info-box-icon {
    background-color: oklch(0.55 0.12 210) !important;
    color: white !important;
}
.info-box.text-bg-light .info-box-icon {
    background-color: oklch(0.80 0.01 219) !important;
    color: oklch(0.30 0.04 219) !important;
}

/* Progress bar track inside desaturated info-boxes */
.info-box.text-bg-primary .progress,
.info-box.text-bg-danger .progress,
.info-box.text-bg-success .progress,
.info-box.text-bg-warning .progress,
.info-box.text-bg-info .progress,
.info-box.text-bg-light .progress {
    background-color: oklch(0.88 0.01 219 / 0.4);
}

/* Dark mode info-box full-color variants */
[data-bs-theme="dark"] .info-box.text-bg-primary {
    background-color: oklch(0.25 0.04 219) !important;
    color: oklch(0.82 0.06 219) !important;
}
[data-bs-theme="dark"] .info-box.text-bg-danger {
    background-color: oklch(0.25 0.06 15) !important;
    color: oklch(0.82 0.08 15) !important;
}
[data-bs-theme="dark"] .info-box.text-bg-success {
    background-color: oklch(0.24 0.05 155) !important;
    color: oklch(0.80 0.08 155) !important;
}
[data-bs-theme="dark"] .info-box.text-bg-warning {
    background-color: oklch(0.28 0.06 70) !important;
    color: oklch(0.85 0.10 70) !important;
}
[data-bs-theme="dark"] .info-box.text-bg-info {
    background-color: oklch(0.24 0.05 210) !important;
    color: oklch(0.80 0.07 210) !important;
}

/* Icon-only bg-* on .info-box-icon — map Bootstrap's bg-info to primary hue */
.info-box-icon.bg-info {
    background-color: oklch(0.55 0.12 210) !important;
}

/* bg-*-subtle info-boxes (used in WeUni/Unbounce/Meta sections).
   These don't use text-bg-* so §9 color rules don't apply.
   Give the icon area a slightly more opaque tint to distinguish it from content. */
:root .info-box.bg-primary-subtle .info-box-icon,
[data-bs-theme="light"] .info-box.bg-primary-subtle .info-box-icon {
    background-color: oklch(0.86 0.04 219);
    color: oklch(0.35 0.09 219);
}
:root .info-box.bg-success-subtle .info-box-icon,
[data-bs-theme="light"] .info-box.bg-success-subtle .info-box-icon {
    background-color: oklch(0.86 0.04 155);
    color: oklch(0.35 0.09 155);
}
:root .info-box.bg-warning-subtle .info-box-icon,
[data-bs-theme="light"] .info-box.bg-warning-subtle .info-box-icon {
    background-color: oklch(0.87 0.06 75);
    color: oklch(0.38 0.10 65);
}
:root .info-box.bg-danger-subtle .info-box-icon,
[data-bs-theme="light"] .info-box.bg-danger-subtle .info-box-icon {
    background-color: oklch(0.87 0.04 15);
    color: oklch(0.38 0.09 15);
}
:root .info-box.bg-info-subtle .info-box-icon,
[data-bs-theme="light"] .info-box.bg-info-subtle .info-box-icon {
    background-color: oklch(0.86 0.04 210);
    color: oklch(0.32 0.08 210);
}
:root .info-box.bg-secondary-subtle .info-box-icon,
[data-bs-theme="light"] .info-box.bg-secondary-subtle .info-box-icon {
    background-color: oklch(0.86 0.025 245);
    color: oklch(0.32 0.05 245);
}

/* Dark mode bg-*-subtle info-box icons */
[data-bs-theme="dark"] .info-box.bg-primary-subtle .info-box-icon {
    background-color: oklch(0.32 0.05 219);
    color: oklch(0.82 0.06 219);
}
[data-bs-theme="dark"] .info-box.bg-success-subtle .info-box-icon {
    background-color: oklch(0.30 0.06 155);
    color: oklch(0.82 0.08 155);
}
[data-bs-theme="dark"] .info-box.bg-warning-subtle .info-box-icon {
    background-color: oklch(0.32 0.07 75);
    color: oklch(0.85 0.10 75);
}
[data-bs-theme="dark"] .info-box.bg-danger-subtle .info-box-icon {
    background-color: oklch(0.30 0.07 15);
    color: oklch(0.82 0.08 15);
}
[data-bs-theme="dark"] .info-box.bg-info-subtle .info-box-icon {
    background-color: oklch(0.30 0.06 210);
    color: oklch(0.82 0.07 210);
}
[data-bs-theme="dark"] .info-box.bg-secondary-subtle .info-box-icon {
    background-color: oklch(0.32 0.03 245);
    color: oklch(0.80 0.05 245);
}

/* Canonical info-box pattern: subtle bg + 3px accent border-left.
   Number color matches the role for hero metric emphasis. */
.info-box.bg-primary-subtle   { border-left: 3px solid var(--bs-primary-border-subtle); }
.info-box.bg-success-subtle   { border-left: 3px solid var(--bs-success-border-subtle); }
.info-box.bg-warning-subtle   { border-left: 3px solid var(--bs-warning-border-subtle); }
.info-box.bg-danger-subtle    { border-left: 3px solid var(--bs-danger-border-subtle); }
.info-box.bg-info-subtle      { border-left: 3px solid var(--bs-info-border-subtle); }
.info-box.bg-secondary-subtle { border-left: 3px solid var(--bs-secondary-border-subtle); }

.info-box.bg-primary-subtle   .info-box-number { color: var(--bs-primary-text-emphasis); }
.info-box.bg-success-subtle   .info-box-number { color: var(--bs-success-text-emphasis); }
.info-box.bg-warning-subtle   .info-box-number { color: var(--bs-warning-text-emphasis); }
.info-box.bg-danger-subtle    .info-box-number { color: var(--bs-danger-text-emphasis); }
.info-box.bg-info-subtle      .info-box-number { color: var(--bs-info-text-emphasis); }
.info-box.bg-secondary-subtle .info-box-number { color: var(--bs-secondary-text-emphasis); }


/* ── 9b. INFO-BOX LAYOUT — Compact icon, clear text hierarchy ───────────── */

/* AdminLTE default: 90px icon area, 1.875rem icon — too dominant.
   Reduce to compact column; let the number and label carry the hierarchy. */
.info-box {
    min-height: 68px;
    height: 100%;          /* fills col height → equal heights in same Bootstrap row */
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
}

/* .info-box .info-box-icon — higher specificity to beat AdminLTE's own rule */
.info-box .info-box-icon {
    width: 52px;
    min-width: 52px;
    font-size: 0.9375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: stretch;
}

.info-box-content {
    padding: 10px 14px;
    min-width: 0; /* prevents flex overflow on long text */
}

/* Label — higher specificity (.info-box .info-box-text) to beat AdminLTE's rule.
   Full wrap, no clamp — title always fully readable. */
.info-box .info-box-text {
    font-family: "Red Hat Display", ui-sans-serif, system-ui, sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.80;
    display: block;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    line-height: 1.3;
}

/* Number — the hero value, prominent */
.info-box-number {
    font-family: "Red Hat Display", ui-sans-serif, system-ui, sans-serif;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    display: block;
    margin: 2px 0;
}

/* Description: hidden — shown via tooltip on ⓘ icon (see home.html.twig JS).
   !important needed to beat inline head_style overrides. */
.info-box .progress-description {
    font-size: smaller;
}

/* Tooltip trigger icon added by JS */
.info-box-tooltip-trigger {
    font-size: 0.6875rem;
    opacity: 0.50;
    cursor: help;
    vertical-align: middle;
    margin-left: 3px;
    transition: opacity 0.15s ease;
}
.info-box-tooltip-trigger:hover {
    opacity: 1;
}

/* Progress bar track — thinner */
.info-box .progress {
    height: 3px;
    margin: 4px 0 2px;
    border-radius: 2px;
}



/* ── 10. CARD VARIANTS — Neutralize AdminLTE colored top border ──────────── */

/* .card-primary.card-outline adds border-top: 3px solid primary — banned pattern.
   Neutralize to standard border. */
.card.card-primary.card-outline,
.card.card-info.card-outline,
.card.card-success.card-outline,
.card.card-warning.card-outline,
.card.card-danger.card-outline {
    border-top-width: 1px !important;
    border-top-color: var(--bs-border-color) !important;
}

/* Card header — reduce h1.card-title which AdminLTE renders large */
.card-header .card-title,
.card-header h1.card-title,
.card-header h2.card-title,
.card-header h3.card-title {
    font-family: "Red Hat Display", ui-sans-serif, system-ui, sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin-bottom: 0;
    text-transform: none;
}


/* ── 11. BUTTONS — Brand primary + desaturate warning/info variants ─────── */

/* btn-primary: WeUni brand teal oklch(0.53 0.094 220) ≈ #007891 */
.btn-primary {
    --bs-btn-color:                 #fff;
    --bs-btn-bg:                    oklch(0.53 0.094 220);
    --bs-btn-border-color:          oklch(0.53 0.094 220);
    --bs-btn-hover-color:           #fff;
    --bs-btn-hover-bg:              oklch(0.47 0.094 220);
    --bs-btn-hover-border-color:    oklch(0.45 0.092 220);
    --bs-btn-active-color:          #fff;
    --bs-btn-active-bg:             oklch(0.43 0.090 220);
    --bs-btn-active-border-color:   oklch(0.41 0.088 220);
    --bs-btn-disabled-bg:           oklch(0.53 0.094 220);
    --bs-btn-disabled-border-color: oklch(0.53 0.094 220);
    --bs-btn-focus-shadow-rgb:      0, 120, 145;
}

/* btn-outline-primary: matching brand teal */
.btn-outline-primary {
    --bs-btn-color:              oklch(0.53 0.094 220);
    --bs-btn-border-color:       oklch(0.53 0.094 220);
    --bs-btn-hover-color:        #fff;
    --bs-btn-hover-bg:           oklch(0.53 0.094 220);
    --bs-btn-hover-border-color: oklch(0.53 0.094 220);
    --bs-btn-active-color:       #fff;
    --bs-btn-active-bg:          oklch(0.47 0.094 220);
    --bs-btn-active-border-color:oklch(0.45 0.092 220);
    --bs-btn-focus-shadow-rgb:   0, 120, 145;
}

/* btn-warning: was harsh orange — now muted amber */
.btn-warning {
    --bs-btn-color:             oklch(0.15 0.03 65);
    --bs-btn-bg:                oklch(0.78 0.12 75);
    --bs-btn-border-color:      oklch(0.78 0.12 75);
    --bs-btn-hover-color:       oklch(0.10 0.02 65);
    --bs-btn-hover-bg:          oklch(0.72 0.14 72);
    --bs-btn-hover-border-color:oklch(0.72 0.14 72);
    --bs-btn-active-bg:         oklch(0.68 0.14 72);
    --bs-btn-active-border-color:oklch(0.68 0.14 72);
}

/* btn-info: was Bootstrap's teal — now aligned to primary hue */
.btn-info {
    --bs-btn-color:             oklch(0.98 0 0);
    --bs-btn-bg:                oklch(0.62 0.09 219);
    --bs-btn-border-color:      oklch(0.62 0.09 219);
    --bs-btn-hover-color:       oklch(0.98 0 0);
    --bs-btn-hover-bg:          oklch(0.56 0.10 219);
    --bs-btn-hover-border-color:oklch(0.56 0.10 219);
    --bs-btn-active-bg:         oklch(0.52 0.10 219);
    --bs-btn-active-border-color:oklch(0.52 0.10 219);
}


/* btn-secondary: filled slate-blue, distinct from primary teal */
.btn-secondary {
    --bs-btn-color:                 #fff;
    --bs-btn-bg:                    oklch(0.45 0.045 245);
    --bs-btn-border-color:          oklch(0.45 0.045 245);
    --bs-btn-hover-color:           #fff;
    --bs-btn-hover-bg:              oklch(0.39 0.045 245);
    --bs-btn-hover-border-color:    oklch(0.37 0.045 245);
    --bs-btn-active-color:          #fff;
    --bs-btn-active-bg:             oklch(0.34 0.045 245);
    --bs-btn-active-border-color:   oklch(0.32 0.045 245);
    --bs-btn-disabled-bg:           oklch(0.45 0.045 245);
    --bs-btn-disabled-border-color: oklch(0.45 0.045 245);
    --bs-btn-focus-shadow-rgb:      77, 93, 117;
}

/* btn-outline-secondary: slate-blue text + border, fills on hover.
   Readable on light backgrounds, never gray-on-gray. */
.btn-outline-secondary {
    --bs-btn-color:              oklch(0.45 0.045 245);
    --bs-btn-border-color:       oklch(0.62 0.045 245);
    --bs-btn-hover-color:        #fff;
    --bs-btn-hover-bg:           oklch(0.45 0.045 245);
    --bs-btn-hover-border-color: oklch(0.45 0.045 245);
    --bs-btn-active-color:       #fff;
    --bs-btn-active-bg:          oklch(0.39 0.045 245);
    --bs-btn-active-border-color:oklch(0.37 0.045 245);
    --bs-btn-focus-shadow-rgb:   77, 93, 117;
}

/* Dark mode: light slate text + border on dark bg; fill becomes light, text becomes dark on hover. */
[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color:              oklch(0.82 0.035 245);
    --bs-btn-border-color:       oklch(0.55 0.045 245);
    --bs-btn-hover-color:        oklch(0.18 0.03 245);
    --bs-btn-hover-bg:           oklch(0.82 0.035 245);
    --bs-btn-hover-border-color: oklch(0.82 0.035 245);
    --bs-btn-active-color:       oklch(0.18 0.03 245);
    --bs-btn-active-bg:          oklch(0.88 0.035 245);
    --bs-btn-active-border-color:oklch(0.88 0.035 245);
    --bs-btn-focus-shadow-rgb:   180, 188, 200;
}

/* btn-danger: desaturated brick-red, distinct from btn-warning amber. */
.btn-danger {
    --bs-btn-color:                 #fff;
    --bs-btn-bg:                    oklch(0.55 0.13 15);
    --bs-btn-border-color:          oklch(0.55 0.13 15);
    --bs-btn-hover-color:           #fff;
    --bs-btn-hover-bg:              oklch(0.49 0.13 15);
    --bs-btn-hover-border-color:    oklch(0.47 0.13 15);
    --bs-btn-active-color:          #fff;
    --bs-btn-active-bg:             oklch(0.45 0.13 15);
    --bs-btn-active-border-color:   oklch(0.43 0.13 15);
    --bs-btn-disabled-bg:           oklch(0.55 0.13 15);
    --bs-btn-disabled-border-color: oklch(0.55 0.13 15);
    --bs-btn-focus-shadow-rgb:      177, 60, 50;
}

/* btn-outline-danger: brick-red text + border, fills on hover. */
.btn-outline-danger {
    --bs-btn-color:              oklch(0.55 0.13 15);
    --bs-btn-border-color:       oklch(0.72 0.10 15);
    --bs-btn-hover-color:        #fff;
    --bs-btn-hover-bg:           oklch(0.55 0.13 15);
    --bs-btn-hover-border-color: oklch(0.55 0.13 15);
    --bs-btn-active-color:       #fff;
    --bs-btn-active-bg:          oklch(0.49 0.13 15);
    --bs-btn-active-border-color:oklch(0.47 0.13 15);
    --bs-btn-focus-shadow-rgb:   177, 60, 50;
}

/* btn-success: desaturated muted green. */
.btn-success {
    --bs-btn-color:                 #fff;
    --bs-btn-bg:                    oklch(0.55 0.08 155);
    --bs-btn-border-color:          oklch(0.55 0.08 155);
    --bs-btn-hover-color:           #fff;
    --bs-btn-hover-bg:              oklch(0.49 0.08 155);
    --bs-btn-hover-border-color:    oklch(0.47 0.08 155);
    --bs-btn-active-color:          #fff;
    --bs-btn-active-bg:             oklch(0.45 0.08 155);
    --bs-btn-active-border-color:   oklch(0.43 0.08 155);
    --bs-btn-focus-shadow-rgb:      58, 142, 92;
}


/* ── 12. INTERACTIONS — Hover/focus/active states ───────────────────────── */

/* Smooth transitions on all interactive surfaces. No transform — flat institutional feel. */
.btn,
.nav-link,
.dropdown-item,
.info-box {
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.card {
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Buttons — flat, no lift, no inset active shadow. Border-radius slightly softer (0.5rem)
   than global tokens (0.375rem) for a more refined, modern silhouette without going pill-ish. */
.btn {
    --bs-btn-border-radius:    0.5rem;
    --bs-btn-border-radius-sm: 0.3rem;
    --bs-btn-border-radius-lg: 0.625rem;
    --bs-btn-active-shadow:    none;
    --bs-btn-box-shadow:       none;
}

/* No hover lift, no active press scale — color change carries the feedback. */
.btn:not(:disabled):hover,
.btn:not(:disabled):active,
.btn:not(:disabled).active {
    transform: none;
    box-shadow: none;
}

/* Focus ring — match primary hue */
:focus-visible {
    outline: 2px solid oklch(0.5292 0.0958 219);
    outline-offset: 2px;
    border-radius: var(--bs-border-radius-sm);
}


/* ── 13. NAVIGATION — Pills + Breadcrumb + Sidebar ──────────────────────── */

/* Nav pills — refined active state */
.nav-pills .nav-link {
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: var(--bs-border-radius-sm);
    padding: 0.35rem 0.75rem;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--bs-primary);
    font-weight: 600;
}

/* Breadcrumb — smaller, more restrained */
.breadcrumb {
    font-size: 0.8125rem;
    font-weight: 500;
    margin-bottom: 0;
}

/* ── Sidebar — unified font, spacing, arrow ────────── */

/* All nav-links in sidebar: consistent font stack + size */
.nav-sidebar .nav-item .nav-link {
    font-family: "Red Hat Text", ui-sans-serif, system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.005em;
    border-radius: var(--bs-border-radius);
    margin-inline: 6px;
    padding: 0.45rem 0.75rem;
}
.nav-sidebar .nav-item .nav-link.active {
    font-weight: 600;
}

/* Icon: fixed width so label text stays aligned across all items */
.nav-sidebar .nav-icon {
    font-size: 0.95rem;
    width: 1.5rem;
    text-align: center;
    flex-shrink: 0;
}

/* <p> inside nav-link: AdminLTE may leave margin-bottom; zero it */
.nav-sidebar .nav-link > p {
    font-family: "Red Hat Text", ui-sans-serif, system-ui, sans-serif;
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
    line-height: inherit;
}

/* Arrow chevron — transition + rotation when open */
.nav-sidebar .nav-link .nav-arrow {
    font-size: 0.7rem;
    opacity: 0.65;
    transition: transform 0.18s ease;
    margin-left: auto;
    flex-shrink: 0;
}
.nav-sidebar .nav-item.menu-open > .nav-link .nav-arrow {
    transform: rotate(90deg);
    opacity: 1;
}

/* Sub-menu (treeview) — slightly smaller, indented */
.nav-sidebar .nav-treeview .nav-link {
    font-family: "Red Hat Text", ui-sans-serif, system-ui, sans-serif;
    font-size: 0.8125rem;
    font-weight: 400;
    padding-left: 2.5rem;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}
.nav-sidebar .nav-treeview .nav-link.active {
    font-weight: 600;
}
.nav-sidebar .nav-treeview .nav-icon {
    font-size: 0.75rem;
    opacity: 0.6;
}


/* ── 14. BADGES — Refined sizing and tracking ────────────────────────────── */

.badge {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0.3em 0.55em;
}

/* Badge color variants — desaturated to match brand palette.
   Bootstrap text-bg-* generates saturated traffic-light fills; override here. */
.badge.text-bg-primary {
    background-color: oklch(0.53 0.094 220) !important;
    color: oklch(0.98 0 0) !important;
}
.badge.text-bg-secondary {
    background-color: oklch(0.55 0.045 245) !important;
    color: oklch(0.98 0 0) !important;
}
.badge.text-bg-success {
    background-color: oklch(0.55 0.08 155) !important;
    color: oklch(0.98 0 0) !important;
}
.badge.text-bg-danger {
    background-color: oklch(0.55 0.13 15) !important;
    color: oklch(0.98 0 0) !important;
}
.badge.text-bg-warning {
    background-color: oklch(0.78 0.12 75) !important;
    color: oklch(0.20 0.04 70) !important;
}
.badge.text-bg-info {
    background-color: oklch(0.62 0.09 210) !important;
    color: oklch(0.98 0 0) !important;
}
.badge.text-bg-dark {
    background-color: oklch(0.30 0.02 219) !important;
    color: oklch(0.98 0 0) !important;
}
.badge.text-bg-light {
    background-color: oklch(0.93 0.01 219) !important;
    color: oklch(0.30 0.04 219) !important;
}

[data-bs-theme="dark"] .badge.text-bg-primary {
    background-color: oklch(0.55 0.094 220) !important;
}
[data-bs-theme="dark"] .badge.text-bg-secondary {
    background-color: oklch(0.50 0.04 245) !important;
}
[data-bs-theme="dark"] .badge.text-bg-success {
    background-color: oklch(0.50 0.10 155) !important;
}
[data-bs-theme="dark"] .badge.text-bg-danger {
    background-color: oklch(0.52 0.14 15) !important;
}
[data-bs-theme="dark"] .badge.text-bg-warning {
    background-color: oklch(0.65 0.13 72) !important;
    color: oklch(0.15 0.03 70) !important;
}
[data-bs-theme="dark"] .badge.text-bg-info {
    background-color: oklch(0.55 0.10 210) !important;
}
[data-bs-theme="dark"] .badge.text-bg-light {
    background-color: oklch(0.30 0.02 219) !important;
    color: oklch(0.92 0.01 219) !important;
}


/* ── 15. SCROLLBAR — Subtle, brand-tinted ───────────────────────────────── */

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: oklch(0.75 0.04 219);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: oklch(0.60 0.07 219);
}


/* ── 16. HEADER — User dropdown ─────────────────────────────────────────── */

/* .user-header text-bg-primary: saturated blue bg in dropdown. Neutralize. */
.user-header.text-bg-primary {
    background-color: oklch(0.94 0.025 219) !important;
    color: oklch(0.25 0.07 219) !important;
}
[data-bs-theme="dark"] .user-header.text-bg-primary {
    background-color: oklch(0.22 0.04 219) !important;
    color: oklch(0.82 0.06 219) !important;
}


/* ── 17. ALERTS — Refine flash message spacing ───────────────────────────── */

.alert {
    border-radius: var(--bs-border-radius);
    font-size: 0.875rem;
}
.alert h5 {
    font-family: "Red Hat Display", ui-sans-serif, system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

/* Alert color variants — bg subtle + 3px accent border-left for institutional restraint. */
.alert-primary {
    --bs-alert-color:        var(--bs-primary-text-emphasis);
    --bs-alert-bg:           var(--bs-primary-bg-subtle);
    --bs-alert-border-color: var(--bs-primary-border-subtle);
    border-left: 3px solid var(--bs-primary);
}
.alert-secondary {
    --bs-alert-color:        var(--bs-secondary-text-emphasis);
    --bs-alert-bg:           var(--bs-secondary-bg-subtle);
    --bs-alert-border-color: var(--bs-secondary-border-subtle);
    border-left: 3px solid var(--bs-secondary);
}
.alert-success {
    --bs-alert-color:        var(--bs-success-text-emphasis);
    --bs-alert-bg:           var(--bs-success-bg-subtle);
    --bs-alert-border-color: var(--bs-success-border-subtle);
    border-left: 3px solid var(--bs-success);
}
.alert-danger {
    --bs-alert-color:        var(--bs-danger-text-emphasis);
    --bs-alert-bg:           var(--bs-danger-bg-subtle);
    --bs-alert-border-color: var(--bs-danger-border-subtle);
    border-left: 3px solid var(--bs-danger);
}
.alert-warning {
    --bs-alert-color:        var(--bs-warning-text-emphasis);
    --bs-alert-bg:           var(--bs-warning-bg-subtle);
    --bs-alert-border-color: var(--bs-warning-border-subtle);
    border-left: 3px solid var(--bs-warning);
}
.alert-info {
    --bs-alert-color:        var(--bs-info-text-emphasis);
    --bs-alert-bg:           var(--bs-info-bg-subtle);
    --bs-alert-border-color: var(--bs-info-border-subtle);
    border-left: 3px solid var(--bs-info);
}


/* ── 18. TEXT EMPHASIS — Desaturated semantic colors for inline icons ───── */

/* Bootstrap defaults give saturated traffic-light text colors; override to brand-aligned tokens. */
.text-success { color: var(--bs-success) !important; }
.text-danger  { color: var(--bs-danger)  !important; }
.text-warning { color: var(--bs-warning) !important; }
.text-info    { color: var(--bs-info)    !important; }

.text-success-emphasis { color: var(--bs-success-text-emphasis) !important; }
.text-danger-emphasis  { color: var(--bs-danger-text-emphasis)  !important; }
.text-warning-emphasis { color: var(--bs-warning-text-emphasis) !important; }
.text-info-emphasis    { color: var(--bs-info-text-emphasis)    !important; }


/* ── 19. SEMANTIC INTEGRATION — Bootstrap defaults that pull from primary blue ──
   Bootstrap 5 uses #0d6efd (--bs-primary) as the default accent for many components.
   Some components hardcode the value or use dedicated tokens we haven't overridden.
   Re-route everything to brand teal hue 220. */

/* Pagination — active page, hover, focus.
   Bootstrap defaults: --bs-pagination-active-bg = primary, --bs-pagination-color = primary. */
.pagination {
    --bs-pagination-color:               oklch(0.53 0.094 220);
    --bs-pagination-hover-color:         oklch(0.45 0.094 220);
    --bs-pagination-hover-bg:            oklch(0.93 0.025 220);
    --bs-pagination-hover-border-color:  oklch(0.78 0.06 220);
    --bs-pagination-focus-color:         oklch(0.45 0.094 220);
    --bs-pagination-focus-bg:            oklch(0.93 0.025 220);
    --bs-pagination-focus-box-shadow:    0 0 0 0.25rem oklch(0.53 0.094 220 / 0.25);
    --bs-pagination-active-color:        #fff;
    --bs-pagination-active-bg:           oklch(0.53 0.094 220);
    --bs-pagination-active-border-color: oklch(0.53 0.094 220);
}

/* Pagination spacing — separate page items (default Bootstrap joins them).
   Applies to Bootstrap .pagination wrappers (DataTables bootstrap5 theme inherits this). */
.pagination .page-item {
    margin: 0 2px;
}
.pagination .page-item .page-link {
    border-radius: var(--bs-border-radius-sm);
}

[data-bs-theme="dark"] .pagination {
    --bs-pagination-color:               oklch(0.78 0.07 220);
    --bs-pagination-hover-color:         oklch(0.85 0.07 220);
    --bs-pagination-hover-bg:            oklch(0.25 0.05 220);
    --bs-pagination-hover-border-color:  oklch(0.40 0.07 220);
    --bs-pagination-active-color:        #fff;
    --bs-pagination-active-bg:           oklch(0.55 0.094 220);
    --bs-pagination-active-border-color: oklch(0.55 0.094 220);
}

/* Form checkbox + radio — checked state. Default fills with primary blue. */
.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color:     var(--bs-primary);
}
.form-check-input:focus {
    border-color: oklch(0.62 0.094 220);
    box-shadow:   0 0 0 0.25rem oklch(0.53 0.094 220 / 0.25);
}
.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--bs-primary);
    border-color:     var(--bs-primary);
}

/* Form control / form-select — focus border + ring */
.form-control:focus,
.form-select:focus {
    border-color: oklch(0.62 0.094 220);
    box-shadow:   0 0 0 0.25rem oklch(0.53 0.094 220 / 0.20);
}

/* form-control-sm Bootstrap default = 0.875rem (matched our new body).
   Push it below body so the small variant remains visually distinct. */
.form-control-sm,
.form-select-sm,
.input-group-sm > .form-control,
.input-group-sm > .form-select {
    font-size: 0.8125rem;
}

/* List-group — active item */
.list-group {
    --bs-list-group-active-color:        #fff;
    --bs-list-group-active-bg:           var(--bs-primary);
    --bs-list-group-active-border-color: var(--bs-primary);
    --bs-list-group-action-active-color: var(--bs-body-color);
    --bs-list-group-action-active-bg:    var(--bs-primary-bg-subtle);
}

/* Dropdown — active link in menu */
.dropdown-menu {
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg:    var(--bs-primary);
}

/* Progress bar — fill */
.progress,
.progress-stacked {
    --bs-progress-bar-bg:    var(--bs-primary);
    --bs-progress-bar-color: #fff;
}

/* DataTables — selected row highlight (default theme uses bootstrap blue tint) */
table.dataTable tbody tr.selected td,
table.dataTable tbody tr.selected,
table.dataTable tbody tr.selected.odd td,
table.dataTable tbody tr.selected.even td {
    background-color: oklch(0.92 0.04 220) !important;
    color: oklch(0.30 0.09 220) !important;
    box-shadow: inset 0 0 0 9999px oklch(0.53 0.094 220 / 0.10) !important;
}

[data-bs-theme="dark"] table.dataTable tbody tr.selected td,
[data-bs-theme="dark"] table.dataTable tbody tr.selected {
    background-color: oklch(0.30 0.06 220) !important;
    color: oklch(0.85 0.07 220) !important;
    box-shadow: inset 0 0 0 9999px oklch(0.53 0.094 220 / 0.20) !important;
}

/* Selected row applies a tint via inset box-shadow + forced text color.
   Outline buttons have transparent bg, so the tint bleeds through and
   washes the text. Restore color and give outline btns a solid surface
   only — filled btns (primary/secondary/danger) already have their own bg
   and must not be overridden. */
table.dataTable tbody tr.selected td [class*="btn-outline-"] {
    color: var(--bs-btn-color) !important;
    background-color: var(--bs-body-bg) !important;
    border-color: var(--bs-btn-border-color) !important;
}
table.dataTable tbody tr.selected td [class*="btn-outline-"] > * {
    color: inherit !important;
}
table.dataTable tbody tr.selected td [class*="btn-outline-"]:hover {
    color: var(--bs-btn-hover-color) !important;
    background-color: var(--bs-btn-hover-bg) !important;
    border-color: var(--bs-btn-hover-border-color) !important;
}
table.dataTable tbody tr.selected td [class*="btn-outline-"]:active,
table.dataTable tbody tr.selected td [class*="btn-outline-"].active {
    color: var(--bs-btn-active-color) !important;
    background-color: var(--bs-btn-active-bg) !important;
    border-color: var(--bs-btn-active-border-color) !important;
}
table.dataTable tbody tr.selected td [class*="btn-outline-"]:disabled,
table.dataTable tbody tr.selected td [class*="btn-outline-"].disabled {
    color: var(--bs-btn-disabled-color) !important;
}

/* Same as buttons: anchor links keep their own --bs-link-color (teal), which on
   the tinted selected-row bg washes to grey. Force them to the row's high-contrast
   text color; keep underline so they stay recognizable as links. */
table.dataTable tbody tr.selected td a:not([class*="btn"]) {
    color: oklch(0.30 0.09 220) !important;
    text-decoration: underline;
}
[data-bs-theme="dark"] table.dataTable tbody tr.selected td a:not([class*="btn"]) {
    color: oklch(0.85 0.07 220) !important;
}

/* DataTables — sort icon on active sorted column */
table.dataTable thead .dt-orderable-asc.dt-ordering-asc,
table.dataTable thead .dt-orderable-desc.dt-ordering-desc {
    color: var(--bs-primary);
}

/* DataTables — select-all checkbox + checkbox column tint when row selected */
table.dataTable .select-checkbox {
    color: var(--bs-primary);
}

/* Select2 (bootstrap-5 theme) — highlighted (keyboard hover) + selected option.
   Default theme paints these with #0d6efd. Override to brand teal. */
.select2-container--bootstrap-5 .select2-results__option--highlighted,
.select2-container--bootstrap-5 .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}
.select2-container--bootstrap-5 .select2-results__option--selected,
.select2-container--bootstrap-5 .select2-results__option[aria-selected="true"] {
    background-color: var(--bs-primary-bg-subtle) !important;
    color: var(--bs-primary-text-emphasis) !important;
}
.select2-container--bootstrap-5 .select2-results__option--highlighted.select2-results__option--selected {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}
.select2-container--bootstrap-5 .select2-selection:focus,
.select2-container--bootstrap-5 .select2-selection--multiple:focus-within,
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: var(--bs-primary) !important;
    box-shadow:   0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.20) !important;
}

/* TomSelect — same treatment for consistency (used in SearchBuilder multiselect filters) */
.ts-dropdown .active {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}
.ts-control .item.active {
    background-color: var(--bs-primary-bg-subtle) !important;
    color: var(--bs-primary-text-emphasis) !important;
}
.ts-wrapper.focus .ts-control {
    border-color: oklch(0.62 0.094 220) !important;
    box-shadow:   0 0 0 0.25rem oklch(0.53 0.094 220 / 0.20) !important;
}

/* Loading overlay spinner — explicit teal so initial-load state never flashes Bootstrap blue */
.loading-overlay .spinner-border,
#loading-overlay .spinner-border,
#modal-overlay .spinner-border,
.overlay-wrapper .spinner-border.text-primary {
    color: var(--bs-primary) !important;
    border-color: var(--bs-primary);
    border-right-color: transparent;
}

/* DataTables processing indicator — bouncing dots use rgb(13,110,253) hardcoded fallback.
   Override the dt-row-selected custom prop and the dot bg directly. */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --dt-row-selected: 0, 120, 145; /* WeUni teal RGB; matches --bs-primary-rgb */
}

div.dt-processing > div:last-child > div {
    background: var(--bs-primary) !important;
}
div.dt-processing {
    color: var(--bs-primary);
}

/* Bootstrap utilities — text-primary, bg-primary, border-primary safety net.
   Already pull from --bs-primary-rgb but enforce explicit tokens for stylesheets ordering. */
.text-primary { color: rgba(var(--bs-primary-rgb), 1) !important; }
.bg-primary   { background-color: rgba(var(--bs-primary-rgb), 1) !important; }
.border-primary { border-color: var(--bs-primary) !important; }

/* Active state on links / nav items / buttons that use Bootstrap default `.active` class */
.nav-link.active:not(.nav-pills .nav-link) {
    color: var(--bs-primary);
}

/* ============================================================
   Form + Select2 — centralized global styles
   Previously duplicated across add-edit templates and the
   `layout/form/select2_dark_mode.html.twig` partial.
   ============================================================ */

/* Required-field marker — was inline in every add-edit head_style. */
label.required:after {
    content: " *";
    color: var(--bs-danger);
}

/* Select2 (bootstrap-5) — sizing parity with .form-control */
.select2-container--bootstrap-5 .select2-selection {
    min-height: calc(1.5em + 0.75rem + 2px) !important;
    padding: 0.375rem 0.75rem !important;
    border-radius: 0.375rem !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    line-height: 1.5 !important;
    padding: 0 !important;
    color: var(--bs-body-color) !important;
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
    height: calc(1.5em + 0.75rem) !important;
}

/* show selected values and cursor inline */
.select2-selection--multiple .select2-selection__rendered {
    display: inline !important;
}

.select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    display: inline-block !important;
}

.select2-selection--multiple .select2-search.select2-search--inline {
    display: inline !important;
}

/* "Pozzetto chiaro" — campi più chiari (light) / staccati (dark) dalla card,
   con bordo sempre visibile. Era: stesso --bs-tertiary-bg della card → blend. */
.form-control,
.form-select,
.select2-container--bootstrap-5 .select2-selection,
.select2-container--bootstrap-5 .select2-selection--single,
.select2-container--bootstrap-5 .select2-selection--multiple {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    border: 1px solid var(--bs-border-color) !important;
}

/* Disabled / readonly — grigio neutro uniforme (niente hatch). */
.form-control:disabled,
.form-control[readonly],
textarea.form-control:disabled,
.form-select:disabled,
.select2-container--disabled .select2-selection {
    background-color: oklch(0.91 0.004 219) !important;
    background-image: none !important;
    color: var(--bs-secondary-color) !important;
    border: 1px solid var(--bs-border-color) !important;
    cursor: not-allowed !important;
    -webkit-text-fill-color: var(--bs-secondary-color);
}

/* Native date input — match other controls (pozzetto chiaro). */
input[type="date"].form-control {
    background-color: var(--bs-body-bg) !important;
    line-height: 1.5;
}

/* Chevron arrow on multi-select — match single-select look. Light theme. */
html[data-bs-theme="light"] .select2-container--bootstrap-5 .select2-selection--multiple,
:root .select2-container--bootstrap-5 .select2-selection--multiple {
    position: relative;
    padding-right: 3.75rem !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
}

/* Multi-tag pill — neutral, theme-aware. Overrides earlier primary-tinted rule. */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem;
    background-color: var(--bs-secondary-bg) !important;
    border: 1px solid var(--bs-border-color) !important;
    border-radius: 0.25rem !important;
    padding: 0 6px !important;
    margin-right: 5px !important;
    color: var(--bs-body-color) !important;
}

/* Per-tag × remove — × SVG propria (il tema la disegna come background-image),
   centrata verticalmente col testo del chip via flex. */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important;
    width: 0.8rem !important;
    height: 0.8rem !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 0;
    line-height: 1;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-width='2' d='M3 3l10 10M13 3 3 13'/%3e%3c/svg%3e") center / contain no-repeat !important;
    opacity: 0.85;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove:hover {
    opacity: 1;
}
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-width='2' d='M3 3l10 10M13 3 3 13'/%3e%3c/svg%3e") !important;
}

/* ----- Dark theme ----- */
/* Pozzetto: fill body-bg (più scuro della card tertiary) invece di transparent (= blend). */
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection {
    background-color: var(--bs-body-bg) !important;
    border: 1px solid var(--bs-border-color);
}
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple {
    padding-right: 3.75rem !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
}
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder {
    color: var(--bs-body-color) !important;
}
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown {
    color: var(--bs-body-color) !important;
    border: 1px solid var(--bs-border-color) !important;
    background-color: var(--bs-body-bg);
}
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
    background-color: transparent !important;
    color: var(--bs-body-color) !important;
}
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[role=group] .select2-results__group {
    color: var(--bs-secondary-color) !important;
}
html[data-bs-theme="light"] textarea {
    scrollbar-color: var(--bs-secondary-color) var(--bs-secondary-bg);
}

/* ── Disabled — dark variant ─────────────────────────────────────────────────
   Grigio neutro uniforme; specificità pari/sup. alla regola dark enabled
   (.select2-selection), piazzata dopo nel file per vincere a parità. */
html[data-bs-theme="dark"] .form-control:disabled,
html[data-bs-theme="dark"] .form-control[readonly],
html[data-bs-theme="dark"] textarea.form-control:disabled,
html[data-bs-theme="dark"] .form-select:disabled,
html[data-bs-theme="dark"] .select2-container--disabled .select2-selection {
    background-color: oklch(0.27 0.006 219) !important;
    background-image: none !important;
    color: var(--bs-secondary-color) !important;
    border: 1px solid var(--bs-border-color) !important;
    cursor: not-allowed !important;
    -webkit-text-fill-color: var(--bs-secondary-color);
}

/* Multiselect disabled — grigio neutro uniforme; deve battere le regole chevron
   (background-image) che hanno specificità più alta. */
html .select2-container--disabled.select2-container--bootstrap-5 .select2-selection--multiple {
    background-color: oklch(0.91 0.004 219) !important;
    background-image: none !important;
}
html[data-bs-theme="dark"] .select2-container--disabled.select2-container--bootstrap-5 .select2-selection--multiple {
    background-color: oklch(0.27 0.006 219) !important;
    background-image: none !important;
}

/* ── allow-clear: X di reset a sinistra del chevron, niente overlap ─────────── */
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    padding-right: 3rem !important;
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear {
    position: absolute;
    top: 50%;
    right: 1.9rem;
    transform: translateY(-50%);
    margin: 0 !important;
    padding: 0 !important;
    width: 1rem;
    height: 1rem;
    line-height: 1;
    color: var(--bs-secondary-color) !important;
    cursor: pointer;
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear:hover {
    color: var(--bs-danger) !important;
}

/* allow-clear su multiselect: chevron resta a destra (~0.75rem), X clear-all a
   sinistra del chevron. Il multiple deve essere position:relative anche in dark. */
.select2-container--bootstrap-5 .select2-selection--multiple {
    position: relative;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__clear {
    position: absolute !important;
    top: 50% !important;
    right: 2.25rem !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 0.85rem !important;
    height: 0.85rem !important;
    font-size: 0;
    line-height: 1;
    border: 0 !important;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-width='2' d='M3 3l10 10M13 3 3 13'/%3e%3c/svg%3e") center / contain no-repeat !important;
    cursor: pointer;
    opacity: 0.85;
    z-index: 2;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__clear:hover {
    opacity: 1;
}
/* X clear-all su dark theme: stroke chiaro per essere visibile. */
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__clear {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-width='2' d='M3 3l10 10M13 3 3 13'/%3e%3c/svg%3e") !important;
}