/*
 * UI System v2 — consistency layer
 * ------------------------------------------------------------------
 * Loaded AFTER app.css (and Bootstrap). app.css keeps the page-specific
 * components (dashboard, map, auth slideshow, profile…); this file owns
 * everything that must look the SAME on every screen:
 *
 *   1. Color tokens        – accessible "ink" + "on-solid" colors, dark-mode fixes
 *   2. Base                – type, links, focus, motion
 *   3. Shell               – content width, header controls (one height), sidebar
 *   4. Page header         – title / subtitle / actions
 *   5. Surfaces            – one radius, one padding, one shadow for every card
 *   6. Tables              – header, density, empty state, mobile cards
 *   7. Buttons             – two heights, soft outline variants, loading state
 *   8. Forms               – one control height, one focus ring
 *   9. Badges & pills      – one metric set, AA-contrast soft colors
 *  10. Alerts              – icon + semantic colors
 *  11. Overlays & nav      – dropdowns, modals, pagination, tabs, lists
 *  12. Empty states, grids, misc
 *
 * Every size/space/radius below resolves to a token declared in app.css :root
 * (--fs-*, --ctl-*, --radius-*, --gap, --card-pad, --ease, --dur*).
 */

/* ================================================================== */
/* 1. Color tokens                                                     */
/* ================================================================== */

:root {
    /* Muted text darkened slightly so it clears WCAG AA (4.5:1) on the
       page background as well as on white cards. */
    --color-text-muted: #5b6270;
    --color-border-strong: #cfd4de;

    /* "Ink" = the readable text color to use ON the matching soft tint.
       The base status colors are tuned for fills/icons and fall below AA
       as small text on their own soft backgrounds. */
    --color-success-ink: #146c47;
    --color-warning-ink: #7c5107;
    --color-danger-ink:  #b91c1c;
    --color-info-ink:    #1f5fc4;
    --color-info-soft:   #e9f1fd;

    /* Solid fills for buttons/icons that carry white text. */
    --color-success-solid: #167a4f;
    --color-warning-solid: #9a6209;
    --color-info-solid:    #1f68cf;
    --color-on-primary: #ffffff;
    --color-on-solid:   #ffffff;

    /* Bootstrap reads these for placeholders, .text-muted, .form-text… */
    --bs-secondary-color: var(--color-text-muted);
    --bs-tertiary-color: color-mix(in srgb, var(--color-text-muted) 75%, transparent);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-text-muted: #9aa3bd;
        --color-border-strong: #364060;
        --color-success-ink: #3fbf85;
        --color-warning-ink: #e0a63a;
        --color-danger-ink:  #f0817b;
        --color-info-ink:    #6ea4f7;
        --color-info-soft:   #14243d;
        --color-success-solid: #3fbf85;
        --color-warning-solid: #e0a63a;
        --color-info-solid:    #6ea4f7;
        --color-on-primary: #0b1a12;
        --color-on-solid:   #0b1220;
    }
}

:root[data-theme="dark"] {
    --color-text-muted: #9aa3bd;
    --color-border-strong: #364060;
    --color-success-ink: #3fbf85;
    --color-warning-ink: #e0a63a;
    --color-danger-ink:  #f0817b;
    --color-info-ink:    #6ea4f7;
    --color-info-soft:   #14243d;
    --color-success-solid: #3fbf85;
    --color-warning-solid: #e0a63a;
    --color-info-solid:    #6ea4f7;
    --color-on-primary: #0b1a12;
    --color-on-solid:   #0b1220;
}

/* ================================================================== */
/* 2. Base                                                             */
/* ================================================================== */

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: var(--fs-base);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

::selection { background: color-mix(in srgb, var(--color-primary) 22%, transparent); }

.small, small { font-size: var(--fs-xs); }
.text-muted { color: var(--color-text-muted) !important; }

a { text-underline-offset: 0.18em; }
a:hover { color: var(--color-primary-hover); }

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

code {
    color: var(--color-primary);
    background: var(--color-primary-soft);
    padding: 0.1em 0.38em;
    border-radius: 5px;
    font-size: 0.86em;
}
pre code { color: inherit; background: none; padding: 0; }

/* Numbers line up in every table, KPI and stat. */
.table, .kpi-value, .profile-stat-value, .entity-card-stat strong, .bar-list-value {
    font-variant-numeric: tabular-nums;
}

/* One keyboard-focus language for everything that isn't a text field. */
:where(a, button, summary, [tabindex]):focus-visible {
    outline: 2px solid color-mix(in srgb, var(--color-primary) 75%, transparent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible { outline: none; }

/* Headings (Bootstrap's responsive .h4/.h6 sizes replaced by the type scale) */
.app-content h1.h4,
.page-title {
    font-size: var(--fs-xl);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.25;
    color: var(--color-text);
}

.app-content h1.h4 + p { font-size: var(--fs-sm); color: var(--color-text-muted); margin-top: 0.2rem; }

.app-content h2.h6,
.app-content h3.h6 {
    font-size: var(--fs-md);
    font-weight: 650;
    letter-spacing: -0.005em;
    line-height: 1.3;
    color: var(--color-text);
}

/* Section eyebrow: the "H6 uppercase muted" heading used above card groups. */
.app-content .h6.text-uppercase {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}

/* Restrained page-load fade (opacity only — no transform, so it never
   creates a containing block for fixed/dropdown children). */
@media (prefers-reduced-motion: no-preference) {
    .app-content { animation: adcPageIn 0.22s var(--ease) backwards; }
}
@keyframes adcPageIn { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ================================================================== */
/* 3. Shell                                                            */
/* ================================================================== */

.app-content {
    padding: 1.25rem 1.5rem 2rem;
    max-width: 1480px;
    width: 100%;
    margin-inline: auto;
}

@media (max-width: 767.98px) {
    .app-content { padding: 1rem 0.875rem 1.75rem; }
}

.app-header { padding: 0 1.5rem; gap: 0.75rem; box-shadow: none; }
.app-header-right { gap: 0.5rem; }

@media (max-width: 767.98px) {
    .app-header { padding: 0 0.875rem; }
}

/* The page's own <h1> already names the screen right below the header, so
   the header copy would be a duplicate. Pages WITHOUT an h1 (e.g. My
   Profile) keep it. */
.app-shell:has(.app-content h1) .app-header-heading { display: none !important; }

.app-header-heading { font-size: var(--fs-md); font-weight: 700; letter-spacing: -0.01em; }

/* -- Header controls: every one is exactly --hdr-ctl tall ------------ */

.icon-btn {
    width: var(--hdr-ctl);
    height: var(--hdr-ctl);
    border-radius: var(--radius-sm);
    font-size: var(--fs-md);
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.lang-switch { height: var(--hdr-ctl); font-size: var(--fs-xs); }

.theme-switch { height: var(--hdr-ctl); width: 60px; }
.theme-switch-thumb { width: 26px; height: 26px; font-size: var(--fs-xs); transition: transform var(--dur) var(--ease); }
:root[data-theme="dark"] .theme-switch-thumb { transform: translateX(26px); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-switch-thumb { transform: translateX(26px); }
}

.sync-indicator-chip {
    height: var(--hdr-ctl);
    padding: 0 0.8rem;
    font-size: var(--fs-xs);
    white-space: nowrap;
    transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.sync-indicator-chip .small { font-size: var(--fs-xs); }

.app-install-chip { height: var(--hdr-ctl); padding: 0 0.85rem 0 0.35rem; font-size: var(--fs-xs); }
.app-install-chip-icon { width: 24px; height: 24px; color: var(--color-on-primary); }
.app-install-chip:hover .app-install-chip-icon { color: var(--color-primary); }

.account-chip { height: var(--hdr-ctl); padding: 0 0.6rem 0 0.15rem; gap: 0.5rem; }
.account-chip .avatar-sm { width: 28px; height: 28px; font-size: var(--fs-2xs); }
.account-chip-name { font-size: var(--fs-xs); }
.account-chip-role { font-size: var(--fs-2xs); }

.avatar { color: var(--color-on-primary); }

/* -- Sidebar --------------------------------------------------------- */

.app-sidebar .nav-link { font-size: var(--fs-sm); padding: 0.45rem 0.65rem; }
.app-sidebar .nav-link i { font-size: var(--fs-base); width: 24px; height: 24px; }
.app-sidebar .nav-link.active i { color: var(--color-on-primary); }
.sidebar-section-label { font-size: var(--fs-2xs); letter-spacing: 0.07em; opacity: 1; margin: 1.1rem 0 0.3rem; }
.sidebar-brand-mark { color: var(--color-on-primary); }
.sidebar-user-name { font-size: var(--fs-sm); }
.sidebar-user-role { font-size: var(--fs-2xs); }

/* Mobile drawer uses the same nav markup but sits outside .app-sidebar. */
.offcanvas .nav-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    font-weight: 500;
    padding: 0.5rem 0.65rem;
    border-radius: var(--radius-sm);
}
.offcanvas .nav-link.active { background: var(--color-primary-soft); color: var(--color-primary); font-weight: 600; }
.offcanvas .nav-link:hover { background: var(--color-surface-alt); color: var(--color-text); }
.offcanvas .nav-link i { width: 24px; text-align: center; font-size: var(--fs-base); }
.offcanvas .sidebar-section-label { padding: 0 0.65rem; margin: 1.1rem 0 0.3rem; text-transform: uppercase; font-weight: 700; color: var(--color-text-muted); }
.offcanvas-header { padding: 0.875rem 1rem; border-bottom: 1px solid var(--color-border); }
.offcanvas-body { padding: 0.75rem; }

/* ================================================================== */
/* 4. Page header                                                      */
/* ================================================================== */

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    margin-bottom: var(--gap);
}
.page-header > :first-child { min-width: 0; }
.page-header h1 { margin: 0; }
.page-header p { margin: 0.2rem 0 0; font-size: var(--fs-sm); color: var(--color-text-muted); }
.page-header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

/* Bare page titles (form/detail pages) get the same bottom rhythm. */
.app-content > h1.h4 { margin-bottom: var(--gap); }

/* ================================================================== */
/* 5. Surfaces — one radius, padding, border and shadow for all cards  */
/* ================================================================== */

.card,
.kpi-card,
.kpi-card-v2,
.chart-card,
.map-card,
.entity-card,
.toolbar-card,
.profile-hero,
.profile-stat-card,
.profile-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}

.card {
    --bs-card-border-radius: var(--radius-lg);
    --bs-card-inner-border-radius: calc(var(--radius-lg) - 1px);
    --bs-card-spacer-y: var(--card-pad);
    --bs-card-spacer-x: var(--card-pad);
    --bs-card-cap-padding-y: 0.75rem;
    --bs-card-cap-padding-x: var(--card-pad);
    --bs-card-cap-bg: var(--color-surface-alt);
    --bs-card-border-color: var(--color-border);
}

.card-header, .card-footer { font-size: var(--fs-sm); font-weight: 600; }

.kpi-card-v2,
.chart-card,
.map-card,
.entity-card,
.profile-panel { padding: var(--card-pad); }

.kpi-card-v2 { padding-left: calc(var(--card-pad) + 3px); border-radius: var(--radius-lg); }
.kpi-card-v2::before { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }

/* Only cards that are actually clickable react to hover; static cards stay
   still so motion always means "you can click this". */
.kpi-card-v2:hover,
.chart-card:hover {
    transform: none;
    box-shadow: var(--shadow-xs);
    border-color: var(--color-border);
}

.entity-card {
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.entity-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-card);
    border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
}
.entity-card-icon { width: 40px; height: 40px; font-size: var(--fs-lg); border-radius: var(--radius-sm); }
.entity-card-title { font-size: var(--fs-md); }
.entity-card-subtitle { font-size: var(--fs-xs); }
.entity-card-stat strong { font-size: var(--fs-md); }

.kpi-card-v2 .kpi-value { font-size: var(--fs-2xl); }
.kpi-card-v2 .kpi-label { font-size: var(--fs-2xs); }
.kpi-icon { width: 34px; height: 34px; border-radius: var(--radius-sm); font-size: var(--fs-base); }
.kpi-icon--primary { color: var(--color-on-primary); }
/* Icon tiles are graphics (3:1 is enough), so they keep the vivid base colors. */
.kpi-icon--success { background: var(--color-success); color: var(--color-on-solid); }
.kpi-icon--warning { background: var(--color-warning); color: var(--color-on-solid); }
.kpi-icon--info    { background: var(--color-info);    color: var(--color-on-solid); }
.kpi-icon--danger  { color: var(--color-on-solid); }

.chart-card-title { font-size: var(--fs-md); }
.chart-card-subtitle { font-size: var(--fs-xs); }

/* Toolbar (filter bar). Bootstrap's .row gutters would otherwise shift the
   card 0.25rem outside the column of the cards around it. */
.toolbar-card { padding: 0.75rem var(--card-pad) 0.875rem; }
.toolbar-card.row { margin-left: 0; margin-right: 0; margin-top: 0; }
.toolbar-card .form-label {
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: 0.25rem;
}

/* One shared grid gap between every group of cards. */
.kpi-grid, .panel-grid, .entity-grid, .profile-stat-grid { gap: var(--gap); }
.kpi-grid, .entity-grid { margin-bottom: var(--gap); }
.kpi-grid.mb-3, .entity-grid.mb-3 { margin-bottom: var(--gap) !important; }

.profile-hero { padding: 1.25rem; }
.profile-hero-name { font-size: var(--fs-xl); }
.profile-stat-card { padding: 0.875rem var(--card-pad); }
.profile-stat-value { font-size: var(--fs-lg); }
.profile-panel-title { font-size: var(--fs-md); }
.profile-tabs .nav-link { font-size: var(--fs-sm); }
.profile-tabs .nav-link.active { color: var(--color-on-primary); }

/* Detail pages: definition lists read as tidy label/value rows. */
.card dl { margin-bottom: 0; }
.card dt { font-size: var(--fs-xs); font-weight: 600; color: var(--color-text-muted); }
.card dd { font-size: var(--fs-base); color: var(--color-text); margin-bottom: 0.65rem; }

/* Empty-state cards used across the list pages. */
.card.p-4.text-center.text-muted { padding: 2.25rem 1.5rem !important; font-size: var(--fs-sm); border-style: dashed; box-shadow: none; background: color-mix(in srgb, var(--color-surface-alt) 60%, var(--color-surface)); }

/* ================================================================== */
/* 6. Tables                                                           */
/* ================================================================== */

.table {
    --bs-table-bg: transparent;
    --bs-table-hover-bg: var(--color-surface-alt);
    --bs-table-color: var(--color-text);
    font-size: var(--fs-sm);
    margin-bottom: 0;
}

.table > :not(caption) > * > *,
.table-sm > :not(caption) > * > * {
    padding: 0.6rem 0.9rem;
    border-bottom-color: var(--color-border);
}

.table thead th {
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
    border-bottom: 1px solid var(--color-border);
}

.table > tbody > tr > * { vertical-align: middle; }
.table > tbody > tr { transition: background-color var(--dur-fast) var(--ease); }
.table > tbody > tr:hover > * { background-color: var(--color-surface-alt); }

/* Tables inside a card: rounded top corners on the header, no dangling
   rule under the last row. */
.card > .table-responsive { border-radius: calc(var(--radius-lg) - 1px); }
.card > .table-responsive > .table > thead > tr:first-child > th:first-child { border-top-left-radius: calc(var(--radius-lg) - 1px); }
.card > .table-responsive > .table > thead > tr:first-child > th:last-child  { border-top-right-radius: calc(var(--radius-lg) - 1px); }
.card .table > tbody > tr:last-child > * { border-bottom-width: 0; }

/* Primary cell link (record title): quiet until hovered, so a column of
   links doesn't shout. */
.table a:not(.btn):not(.dropdown-item) { font-weight: 600; color: var(--color-text); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
.table a:not(.btn):not(.dropdown-item):hover { color: var(--color-primary); text-decoration: underline; text-underline-offset: 0.2em; }

/* "No records" row */
.table tbody td[colspan].text-center { padding: 2.25rem 1rem; color: var(--color-text-muted); font-size: var(--fs-sm); }

/* Row action cell: keep buttons on one line and right-aligned. */
.table td:last-child .btn + .btn,
.table td:last-child form + .btn,
.table td:last-child .btn + form { margin-left: 0.25rem; }

@media (max-width: 767.98px) {
    /* Stacked-card tables: the cards themselves become the surface. */
    .card:has(> .table-responsive > .table-responsive-cards) {
        background: transparent;
        border: 0;
        box-shadow: none;
    }
    .table-responsive-cards tbody tr {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-xs);
        margin-bottom: 0.625rem;
        padding: 0.5rem 0.875rem;
    }
    .table-responsive-cards tbody td {
        padding: 0.35rem 0;
        border-bottom: 0;
        align-items: center;
        font-size: var(--fs-sm);
    }
    .table-responsive-cards tbody td::before {
        font-size: var(--fs-xs);
        font-weight: 600;
        color: var(--color-text-muted);
        flex-shrink: 0;
    }
    .table-responsive-cards tbody td:empty { display: none; }
    .table-responsive-cards tbody td[colspan] { display: block; text-align: center; }
    .table-responsive-cards tbody td[colspan]::before { display: none; }
}

/* ================================================================== */
/* 7. Buttons                                                          */
/* ================================================================== */

.btn,
.btn:not(.btn-sm):not(.btn-lg) {
    --bs-btn-font-size: var(--fs-sm);
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--radius-sm);
    --bs-btn-focus-box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 28%, transparent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: var(--ctl-h);
    padding: 0.3rem 0.95rem;
    font-size: var(--fs-sm);
    line-height: 1.25;
    letter-spacing: 0;
    border-radius: var(--radius-sm);
    transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.btn.btn-sm {
    --bs-btn-font-size: var(--fs-sm);
    min-height: var(--ctl-h-sm);
    padding: 0.15rem 0.7rem;
    gap: 0.35rem;
    font-size: var(--fs-sm);
    border-radius: var(--radius-sm);
}

.btn.btn-lg { min-height: 2.75rem; padding: 0.5rem 1.25rem; font-size: var(--fs-base); }

/* Icon spacing comes from the flex gap — cancel the manual me-* margins. */
.btn > .bi.me-1, .btn > .bi.me-2, .btn > .bi.ms-1 { margin-inline: 0 !important; }
.btn > .bi { line-height: 1; }

/* Icon-only buttons (class added by app.js when a button has no text). */
.btn.btn-icon { padding: 0; width: var(--ctl-h); }
.btn.btn-sm.btn-icon { width: var(--ctl-h-sm); }

/* Calm, jitter-free interaction: no lift, just color + a press state. */
.btn:hover,
.btn-primary:hover, .btn-success:hover, .btn-danger:hover,
.btn-warning:hover, .btn-info:hover, .btn-secondary:hover { transform: none; box-shadow: none; }
.btn:active { transform: none; }
.btn:disabled, .btn.disabled { opacity: 0.55; }

/* Loading state (set by app.js on form submit) */
.btn.is-loading { position: relative; pointer-events: none; color: transparent !important; }
.btn.is-loading > * { visibility: hidden; }
.btn.is-loading::after {
    content: "";
    position: absolute;
    width: 1em;
    height: 1em;
    inset: 0;
    margin: auto;
    border: 2px solid var(--_spin, #fff);
    border-right-color: transparent;
    border-radius: 50%;
    animation: adcSpin 0.6s linear infinite;
}
.btn-primary.is-loading { --_spin: var(--color-on-primary); }
.btn-outline-primary.is-loading, .btn-outline-secondary.is-loading, .btn-outline-danger.is-loading { --_spin: var(--color-text-muted); }
@keyframes adcSpin { to { transform: rotate(360deg); } }

.btn-link { text-decoration: none; font-weight: 600; }
.btn-link:hover { text-decoration: underline; }

/* Form footer: primary action + cancel, separated from the fields. */
.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

/* ================================================================== */
/* 8. Forms                                                            */
/* ================================================================== */

.form-label {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0.375rem;
}

.form-control,
.form-select {
    min-height: var(--ctl-h);
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    padding-left: 0.75rem;
    font-size: var(--fs-base);
    color: var(--color-text);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.form-control { padding-right: 0.75rem; }

.form-control:hover:not(:focus):not(:disabled):not([readonly]),
.form-select:hover:not(:focus):not(:disabled) {
    border-color: color-mix(in srgb, var(--color-text-muted) 55%, var(--color-border-strong));
}

.form-control:focus,
.form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent);
    background-color: var(--color-surface);
}

.form-control::placeholder { color: color-mix(in srgb, var(--color-text-muted) 80%, transparent); }

.form-control:disabled, .form-control[readonly], .form-select:disabled {
    background-color: var(--color-surface-alt);
    color: var(--color-text-muted);
    opacity: 1;
}

.form-control-sm, .form-select-sm {
    min-height: var(--ctl-h-sm);
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    padding-left: 0.6rem;
    font-size: var(--fs-sm);
    border-radius: var(--radius-sm);
}
.form-control-sm { padding-right: 0.6rem; }

textarea.form-control { min-height: 5.5rem; line-height: 1.5; }
input[type="file"].form-control { padding-top: 0.3rem; padding-bottom: 0.3rem; }
input[type="color"].form-control { padding: 0.2rem; min-height: var(--ctl-h); }

.form-check-input {
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0.19rem;
    border-color: var(--color-border-strong);
    background-color: var(--color-surface);
    transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.form-check-input:checked { background-color: var(--color-primary); border-color: var(--color-primary); }
.form-check-label { font-size: var(--fs-base); }
.form-switch .form-check-input { width: 2rem; }

.form-text, .invalid-feedback, .valid-feedback { font-size: var(--fs-xs); margin-top: 0.3rem; }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--color-danger); }
.form-control.is-invalid:focus, .form-select.is-invalid:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 22%, transparent); }

.input-group-text {
    background: var(--color-surface-alt);
    border-color: var(--color-border-strong);
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    border-radius: var(--radius-sm);
}
.input-group > .form-control, .input-group > .form-select { min-height: var(--ctl-h); }
.input-group-sm > .form-control, .input-group-sm > .form-select, .input-group-sm > .input-group-text { min-height: var(--ctl-h-sm); font-size: var(--fs-sm); }

/* Full-width forms are capped so lines of fields stay readable on large screens. */
form.card:not(.toolbar-card) { padding: 1.25rem !important; }

/* Inline auto-width selects in page headers/filters */
.form-select.w-auto, .form-select-sm.w-auto { min-width: 7.5rem; }

/* ================================================================== */
/* 9. Badges & status pills                                            */
/* ================================================================== */

.badge,
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-pill);
    vertical-align: middle;
    white-space: nowrap;
}

/* Every badge is a soft tint with AA-contrast ink — no stock solid Bootstrap fills. */
.badge.text-bg-primary,   .badge.bg-primary   { background-color: var(--color-primary-soft) !important; color: var(--color-primary) !important; }
.badge.text-bg-success,   .badge.bg-success   { background-color: var(--color-success-soft) !important; color: var(--color-success-ink) !important; }
.badge.text-bg-warning,   .badge.bg-warning,
.badge.bg-warning.text-dark                    { background-color: var(--color-warning-soft) !important; color: var(--color-warning-ink) !important; }
.badge.text-bg-danger,    .badge.bg-danger    { background-color: var(--color-danger-soft) !important; color: var(--color-danger-ink) !important; }
.badge.text-bg-info,      .badge.bg-info      { background-color: var(--color-info-soft) !important; color: var(--color-info-ink) !important; }
.badge.text-bg-secondary, .badge.bg-secondary,
.badge.text-bg-light,     .badge.bg-light,
.badge.text-bg-dark,      .badge.bg-dark      { background-color: var(--color-surface-alt) !important; color: var(--color-text-muted) !important; }
.badge.text-bg-light.border, .badge.border    { border-color: var(--color-border) !important; }

.status-pill--success { color: var(--color-success-ink); }
.status-pill--warning { color: var(--color-warning-ink); }
.status-pill--danger  { color: var(--color-danger-ink); }
.status-pill--muted   { border: 1px solid var(--color-border); }

/* ================================================================== */
/* 10. Alerts                                                          */
/* ================================================================== */

.alert {
    --bs-alert-padding-y: 0.65rem;
    --bs-alert-padding-x: 0.9rem;
    --bs-alert-border-radius: var(--radius);
    --bs-alert-margin-bottom: var(--gap);
    position: relative;
    font-size: var(--fs-sm);
    line-height: 1.45;
    border-radius: var(--radius);
}

.alert-success { --bs-alert-color: var(--color-success-ink); --bs-alert-bg: var(--color-success-soft); --bs-alert-border-color: color-mix(in srgb, var(--color-success) 30%, var(--color-border)); --bs-alert-link-color: var(--color-success-ink); }
.alert-danger  { --bs-alert-color: var(--color-danger-ink);  --bs-alert-bg: var(--color-danger-soft);  --bs-alert-border-color: color-mix(in srgb, var(--color-danger) 30%, var(--color-border));  --bs-alert-link-color: var(--color-danger-ink); }
.alert-warning { --bs-alert-color: var(--color-warning-ink); --bs-alert-bg: var(--color-warning-soft); --bs-alert-border-color: color-mix(in srgb, var(--color-warning) 30%, var(--color-border)); --bs-alert-link-color: var(--color-warning-ink); }
.alert-info    { --bs-alert-color: var(--color-info-ink);    --bs-alert-bg: var(--color-info-soft);    --bs-alert-border-color: color-mix(in srgb, var(--color-info) 30%, var(--color-border));    --bs-alert-link-color: var(--color-info-ink); }

/* Leading status icon (skipped when the alert already carries its own). */
.alert:not(:has(.bi)) { padding-left: 2.5rem; }
.alert:not(:has(.bi))::before {
    font-family: "bootstrap-icons";
    font-style: normal;
    font-weight: 400;
    content: "\f430";
    position: absolute;
    left: 0.9rem;
    top: 0.62rem;
    font-size: var(--fs-md);
    line-height: 1.3;
}
.alert-success:not(:has(.bi))::before { content: "\f26a"; }
.alert-danger:not(:has(.bi))::before  { content: "\f332"; }
.alert-warning:not(:has(.bi))::before { content: "\f33a"; }

.alert ul { padding-left: 1.1rem; }
/* Icon already marks the alert: list errors without a second bullet marker. */
.alert:not(:has(.bi)) ul { list-style: none; padding-left: 0; }
.alert:not(:has(.bi)) ul li + li { margin-top: 0.15rem; }
.alert.is-leaving { opacity: 0; transform: translateY(-4px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }

/* ================================================================== */
/* 11. Overlays & navigation                                           */
/* ================================================================== */

.dropdown-menu {
    --bs-dropdown-padding-x: 0.3rem;
    --bs-dropdown-padding-y: 0.3rem;
    --bs-dropdown-font-size: var(--fs-sm);
    --bs-dropdown-border-radius: var(--radius);
    --bs-dropdown-inner-border-radius: var(--radius-sm);
    --bs-dropdown-border-color: var(--color-border);
    --bs-dropdown-divider-bg: var(--color-border);
    --bs-dropdown-divider-margin-y: 0.3rem;
    --bs-dropdown-item-padding-x: 0.65rem;
    --bs-dropdown-item-padding-y: 0.42rem;
    --bs-dropdown-link-color: var(--color-text);
    --bs-dropdown-link-hover-color: var(--color-text);
    --bs-dropdown-link-hover-bg: var(--color-surface-alt);
    --bs-dropdown-link-active-bg: var(--color-primary-soft);
    --bs-dropdown-link-active-color: var(--color-primary);
    box-shadow: var(--shadow-pop);
}
.dropdown-menu.show { animation: adcMenuIn var(--dur) var(--ease); }
.dropdown-item { border-radius: var(--radius-sm); font-weight: 500; }
.dropdown-item.active, .dropdown-item:active { font-weight: 600; }
.dropdown-item.text-danger:hover { background: var(--color-danger-soft); }
.dropdown-item .bi { color: var(--color-text-muted); }
.dropdown-item.text-danger .bi { color: inherit; }

/* Individual `translate` so Popper's own transform is never overridden. */
@keyframes adcMenuIn { from { opacity: 0; translate: 0 -4px; } to { opacity: 1; translate: 0 0; } }

.modal-content {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-pop);
}
.modal-header { padding: 0.875rem 1.125rem; align-items: center; }
.modal-title { font-size: var(--fs-md); font-weight: 700; }
.modal-body { padding: 1.125rem; font-size: var(--fs-base); }
.modal-footer { padding: 0.75rem 1.125rem; gap: 0.5rem; }
.modal-footer > * { margin: 0; }
.modal.fade .modal-dialog { transition: transform 0.22s var(--ease); }
.modal-backdrop.show { opacity: 0.45; }

.pagination {
    --bs-pagination-padding-x: 0.6rem;
    --bs-pagination-padding-y: 0.25rem;
    --bs-pagination-font-size: var(--fs-sm);
    --bs-pagination-color: var(--color-text-muted);
    --bs-pagination-bg: var(--color-surface);
    --bs-pagination-border-color: var(--color-border);
    --bs-pagination-hover-color: var(--color-text);
    --bs-pagination-hover-bg: var(--color-surface-alt);
    --bs-pagination-hover-border-color: var(--color-border-strong);
    --bs-pagination-focus-bg: var(--color-surface-alt);
    --bs-pagination-active-color: var(--color-on-primary);
    --bs-pagination-disabled-color: var(--color-text-muted);
    --bs-pagination-disabled-bg: var(--color-surface-alt);
    --bs-pagination-disabled-border-color: var(--color-border);
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0;
}
.pagination .page-link {
    min-width: var(--ctl-h-sm);
    height: var(--ctl-h-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0;
    font-weight: 600;
    border-radius: var(--radius-sm) !important;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.pagination .page-item.is-gap .page-link { border-color: transparent; background: transparent; pointer-events: none; min-width: 1.25rem; padding-inline: 0.15rem; }
.pagination .page-item.is-hidden { display: none; }

.nav-pills { --bs-nav-pills-border-radius: var(--radius-sm); --bs-nav-link-font-size: var(--fs-sm); --bs-nav-link-font-weight: 600; --bs-nav-pills-link-active-color: var(--color-on-primary); }
.nav-pills .nav-link { color: var(--color-text-muted); }
.nav-pills .nav-link:hover:not(.active) { color: var(--color-text); background: var(--color-surface-alt); }

.nav-tabs {
    --bs-nav-tabs-border-color: var(--color-border);
    --bs-nav-tabs-border-radius: var(--radius-sm);
    --bs-nav-tabs-link-hover-border-color: transparent transparent var(--color-border);
    --bs-nav-tabs-link-active-color: var(--color-primary);
    --bs-nav-tabs-link-active-bg: transparent;
    --bs-nav-tabs-link-active-border-color: transparent transparent var(--color-primary);
    --bs-nav-link-font-size: var(--fs-sm);
    --bs-nav-link-font-weight: 600;
    --bs-nav-link-color: var(--color-text-muted);
    --bs-nav-link-hover-color: var(--color-text);
}
.nav-tabs .nav-link { border-width: 0 0 2px; margin-bottom: -1px; }

.list-group {
    --bs-list-group-border-color: var(--color-border);
    --bs-list-group-border-radius: var(--radius);
    --bs-list-group-item-padding-x: 0.9rem;
    --bs-list-group-item-padding-y: 0.6rem;
    --bs-list-group-bg: var(--color-surface);
    --bs-list-group-action-hover-bg: var(--color-surface-alt);
    font-size: var(--fs-sm);
}
.list-group-item.active { color: var(--color-on-primary); }

.breadcrumb { --bs-breadcrumb-font-size: var(--fs-xs); --bs-breadcrumb-divider-color: var(--color-text-muted); --bs-breadcrumb-item-active-color: var(--color-text-muted); margin-bottom: 0.5rem; }
.breadcrumb-item a { text-decoration: none; font-weight: 500; }

.progress { --bs-progress-height: 0.5rem; --bs-progress-bg: var(--color-surface-alt); --bs-progress-border-radius: var(--radius-pill); --bs-progress-font-size: var(--fs-2xs); }
.progress-bar { transition: width 0.4s var(--ease); }

.tooltip { --bs-tooltip-font-size: var(--fs-xs); --bs-tooltip-border-radius: var(--radius-sm); }
.popover { --bs-popover-font-size: var(--fs-sm); --bs-popover-border-radius: var(--radius); --bs-popover-border-color: var(--color-border); --bs-popover-header-bg: var(--color-surface-alt); }
.toast { --bs-toast-font-size: var(--fs-sm); --bs-toast-border-radius: var(--radius); --bs-toast-border-color: var(--color-border); box-shadow: var(--shadow-pop); }
.accordion { --bs-accordion-border-color: var(--color-border); --bs-accordion-border-radius: var(--radius); --bs-accordion-btn-padding-y: 0.75rem; --bs-accordion-btn-padding-x: 1rem; font-size: var(--fs-sm); }
.accordion-button { font-weight: 600; font-size: var(--fs-sm); }

.btn-close { transition: opacity var(--dur-fast) var(--ease); }

/* ================================================================== */
/* 12. Empty states, notifications, dashboard, misc                    */
/* ================================================================== */

.notification-panel { width: 360px; }
.notification-panel-title { font-size: var(--fs-sm); }
.notification-panel-mark { font-size: var(--fs-xs); }
.notification-item-title { font-size: var(--fs-sm); }
.notification-item-body { font-size: var(--fs-xs); }
.notification-item-time { font-size: var(--fs-2xs); }
.notification-item-icon { border-radius: var(--radius-sm); }

.chart-empty { border-radius: var(--radius); }

/* Dashboard filter selects share the control height of every other filter. */
.app-content .form-select-sm[style*="width: auto"] { min-width: 8rem; }

/* Scroll containers: consistent thin scrollbar everywhere. */
.table-responsive, .modal-body, .offcanvas-body, .dropdown-menu {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--color-text-muted) 45%, transparent) transparent;
}

/* Login / auth screens share the same control scale. */
.auth-input-group { border-radius: var(--radius-sm); min-height: 2.75rem; }
.auth-input-group input { font-size: var(--fs-base); padding-top: 0.55rem; padding-bottom: 0.55rem; }
.auth-submit { min-height: 2.75rem; border-radius: var(--radius-sm); font-size: var(--fs-base); color: var(--color-on-primary); }
.auth-card { border-radius: 16px; }
.auth-eyebrow { font-size: var(--fs-2xs); }
.auth-subtitle { font-size: var(--fs-sm); }

/* Print: never show chrome. */
@media print {
    .app-sidebar, .app-header, .page-header-actions, .form-actions, .toolbar-card, .pagination { display: none !important; }
    .app-content { max-width: none; padding: 0; animation: none; }
    .card { box-shadow: none; }
}

/* ---- Button variants (generated: solid + soft-outline, one recipe) ---- */
.btn.btn-primary {
    --bs-btn-color: var(--color-on-primary); --bs-btn-bg: var(--color-primary); --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-color: var(--color-on-primary); --bs-btn-hover-bg: var(--color-primary-hover); --bs-btn-hover-border-color: var(--color-primary-hover);
    --bs-btn-active-color: var(--color-on-primary); --bs-btn-active-bg: color-mix(in srgb, var(--color-primary) 78%, var(--color-text)); --bs-btn-active-border-color: color-mix(in srgb, var(--color-primary) 78%, var(--color-text));
    --bs-btn-disabled-color: var(--color-on-primary); --bs-btn-disabled-bg: var(--color-primary); --bs-btn-disabled-border-color: var(--color-primary);
}
.btn.btn-success {
    --bs-btn-color: var(--color-on-solid); --bs-btn-bg: var(--color-success-solid); --bs-btn-border-color: var(--color-success-solid);
    --bs-btn-hover-color: var(--color-on-solid); --bs-btn-hover-bg: color-mix(in srgb, var(--color-success-solid) 88%, var(--color-text)); --bs-btn-hover-border-color: color-mix(in srgb, var(--color-success-solid) 88%, var(--color-text));
    --bs-btn-active-color: var(--color-on-solid); --bs-btn-active-bg: color-mix(in srgb, var(--color-success-solid) 78%, var(--color-text)); --bs-btn-active-border-color: color-mix(in srgb, var(--color-success-solid) 78%, var(--color-text));
    --bs-btn-disabled-color: var(--color-on-solid); --bs-btn-disabled-bg: var(--color-success-solid); --bs-btn-disabled-border-color: var(--color-success-solid);
}
.btn.btn-danger {
    --bs-btn-color: var(--color-on-solid); --bs-btn-bg: var(--color-danger); --bs-btn-border-color: var(--color-danger);
    --bs-btn-hover-color: var(--color-on-solid); --bs-btn-hover-bg: color-mix(in srgb, var(--color-danger) 88%, var(--color-text)); --bs-btn-hover-border-color: color-mix(in srgb, var(--color-danger) 88%, var(--color-text));
    --bs-btn-active-color: var(--color-on-solid); --bs-btn-active-bg: color-mix(in srgb, var(--color-danger) 78%, var(--color-text)); --bs-btn-active-border-color: color-mix(in srgb, var(--color-danger) 78%, var(--color-text));
    --bs-btn-disabled-color: var(--color-on-solid); --bs-btn-disabled-bg: var(--color-danger); --bs-btn-disabled-border-color: var(--color-danger);
}
.btn.btn-warning {
    --bs-btn-color: var(--color-on-solid); --bs-btn-bg: var(--color-warning-solid); --bs-btn-border-color: var(--color-warning-solid);
    --bs-btn-hover-color: var(--color-on-solid); --bs-btn-hover-bg: color-mix(in srgb, var(--color-warning-solid) 88%, var(--color-text)); --bs-btn-hover-border-color: color-mix(in srgb, var(--color-warning-solid) 88%, var(--color-text));
    --bs-btn-active-color: var(--color-on-solid); --bs-btn-active-bg: color-mix(in srgb, var(--color-warning-solid) 78%, var(--color-text)); --bs-btn-active-border-color: color-mix(in srgb, var(--color-warning-solid) 78%, var(--color-text));
    --bs-btn-disabled-color: var(--color-on-solid); --bs-btn-disabled-bg: var(--color-warning-solid); --bs-btn-disabled-border-color: var(--color-warning-solid);
}
.btn.btn-info {
    --bs-btn-color: var(--color-on-solid); --bs-btn-bg: var(--color-info-solid); --bs-btn-border-color: var(--color-info-solid);
    --bs-btn-hover-color: var(--color-on-solid); --bs-btn-hover-bg: color-mix(in srgb, var(--color-info-solid) 88%, var(--color-text)); --bs-btn-hover-border-color: color-mix(in srgb, var(--color-info-solid) 88%, var(--color-text));
    --bs-btn-active-color: var(--color-on-solid); --bs-btn-active-bg: color-mix(in srgb, var(--color-info-solid) 78%, var(--color-text)); --bs-btn-active-border-color: color-mix(in srgb, var(--color-info-solid) 78%, var(--color-text));
    --bs-btn-disabled-color: var(--color-on-solid); --bs-btn-disabled-bg: var(--color-info-solid); --bs-btn-disabled-border-color: var(--color-info-solid);
}
.btn.btn-secondary {
    --bs-btn-color: var(--color-text); --bs-btn-bg: var(--color-surface-alt); --bs-btn-border-color: var(--color-border-strong);
    --bs-btn-hover-color: var(--color-text); --bs-btn-hover-bg: color-mix(in srgb, var(--color-text) 8%, var(--color-surface-alt)); --bs-btn-hover-border-color: var(--color-border-strong);
    --bs-btn-active-color: var(--color-text); --bs-btn-active-bg: color-mix(in srgb, var(--color-text) 14%, var(--color-surface-alt)); --bs-btn-active-border-color: var(--color-border-strong);
    --bs-btn-disabled-color: var(--color-text-muted); --bs-btn-disabled-bg: var(--color-surface-alt); --bs-btn-disabled-border-color: var(--color-border);
}
.btn.btn-outline-primary,
.btn.btn-outline-primary:hover,
.btn.btn-outline-primary:active,
.btn.btn-outline-primary.active {
    --bs-btn-color: var(--color-primary); --bs-btn-bg: transparent; --bs-btn-border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
    --bs-btn-hover-color: var(--color-primary); --bs-btn-hover-bg: var(--color-primary-soft); --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-active-color: var(--color-primary); --bs-btn-active-bg: color-mix(in srgb, var(--color-primary) 16%, var(--color-primary-soft)); --bs-btn-active-border-color: var(--color-primary);
    --bs-btn-disabled-color: var(--color-primary); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
}
.btn.btn-outline-success,
.btn.btn-outline-success:hover,
.btn.btn-outline-success:active,
.btn.btn-outline-success.active {
    --bs-btn-color: var(--color-success-ink); --bs-btn-bg: transparent; --bs-btn-border-color: color-mix(in srgb, var(--color-success) 45%, var(--color-border));
    --bs-btn-hover-color: var(--color-success-ink); --bs-btn-hover-bg: var(--color-success-soft); --bs-btn-hover-border-color: var(--color-success);
    --bs-btn-active-color: var(--color-success-ink); --bs-btn-active-bg: color-mix(in srgb, var(--color-success) 16%, var(--color-success-soft)); --bs-btn-active-border-color: var(--color-success);
    --bs-btn-disabled-color: var(--color-success-ink); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: color-mix(in srgb, var(--color-success) 45%, var(--color-border));
}
.btn.btn-outline-danger,
.btn.btn-outline-danger:hover,
.btn.btn-outline-danger:active,
.btn.btn-outline-danger.active {
    --bs-btn-color: var(--color-danger-ink); --bs-btn-bg: transparent; --bs-btn-border-color: color-mix(in srgb, var(--color-danger) 45%, var(--color-border));
    --bs-btn-hover-color: var(--color-danger-ink); --bs-btn-hover-bg: var(--color-danger-soft); --bs-btn-hover-border-color: var(--color-danger);
    --bs-btn-active-color: var(--color-danger-ink); --bs-btn-active-bg: color-mix(in srgb, var(--color-danger) 16%, var(--color-danger-soft)); --bs-btn-active-border-color: var(--color-danger);
    --bs-btn-disabled-color: var(--color-danger-ink); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: color-mix(in srgb, var(--color-danger) 45%, var(--color-border));
}
.btn.btn-outline-warning,
.btn.btn-outline-warning:hover,
.btn.btn-outline-warning:active,
.btn.btn-outline-warning.active {
    --bs-btn-color: var(--color-warning-ink); --bs-btn-bg: transparent; --bs-btn-border-color: color-mix(in srgb, var(--color-warning) 45%, var(--color-border));
    --bs-btn-hover-color: var(--color-warning-ink); --bs-btn-hover-bg: var(--color-warning-soft); --bs-btn-hover-border-color: var(--color-warning);
    --bs-btn-active-color: var(--color-warning-ink); --bs-btn-active-bg: color-mix(in srgb, var(--color-warning) 16%, var(--color-warning-soft)); --bs-btn-active-border-color: var(--color-warning);
    --bs-btn-disabled-color: var(--color-warning-ink); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: color-mix(in srgb, var(--color-warning) 45%, var(--color-border));
}
.btn.btn-outline-info,
.btn.btn-outline-info:hover,
.btn.btn-outline-info:active,
.btn.btn-outline-info.active {
    --bs-btn-color: var(--color-info-ink); --bs-btn-bg: transparent; --bs-btn-border-color: color-mix(in srgb, var(--color-info) 45%, var(--color-border));
    --bs-btn-hover-color: var(--color-info-ink); --bs-btn-hover-bg: var(--color-info-soft); --bs-btn-hover-border-color: var(--color-info);
    --bs-btn-active-color: var(--color-info-ink); --bs-btn-active-bg: color-mix(in srgb, var(--color-info) 16%, var(--color-info-soft)); --bs-btn-active-border-color: var(--color-info);
    --bs-btn-disabled-color: var(--color-info-ink); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: color-mix(in srgb, var(--color-info) 45%, var(--color-border));
}
.btn.btn-outline-secondary,
.btn.btn-outline-secondary:hover,
.btn.btn-outline-secondary:active,
.btn.btn-outline-secondary.active {
    --bs-btn-color: var(--color-text-muted); --bs-btn-bg: var(--color-surface); --bs-btn-border-color: var(--color-border-strong);
    --bs-btn-hover-color: var(--color-text); --bs-btn-hover-bg: var(--color-surface-alt); --bs-btn-hover-border-color: color-mix(in srgb, var(--color-text-muted) 55%, var(--color-border-strong));
    --bs-btn-active-color: var(--color-text); --bs-btn-active-bg: color-mix(in srgb, var(--color-text) 8%, var(--color-surface-alt)); --bs-btn-active-border-color: var(--color-text-muted);
    --bs-btn-disabled-color: var(--color-text-muted); --bs-btn-disabled-bg: var(--color-surface); --bs-btn-disabled-border-color: var(--color-border);
}
.btn.btn-link { --bs-btn-color: var(--color-primary); --bs-btn-hover-color: var(--color-primary-hover); --bs-btn-active-color: var(--color-primary-hover); }

/* ================================================================== */
/* 13. Page-level action sizing                                        */
/* ================================================================== */

/* Header actions and form footers are page-level controls: they use the
   default control height so they sit on the same scale as form fields.
   (Row actions, filters and table buttons stay compact.) */
.page-header { align-items: center; }
.page-header:has(> :first-child > p) { align-items: flex-start; }

.page-header .btn.btn-sm,
.page-header-actions .btn.btn-sm,
.form-actions .btn.btn-sm {
    min-height: var(--ctl-h);
    padding: 0.3rem 0.95rem;
}
.page-header .btn.btn-sm.btn-icon,
.page-header-actions .btn.btn-sm.btn-icon,
.form-actions .btn.btn-sm.btn-icon { width: var(--ctl-h); padding: 0; }

/* Back-arrow + title cluster */
.page-header .d-flex.align-items-center.gap-2 { gap: 0.625rem !important; }

/* ================================================================== */
/* 14. Mobile shell fix                                                */
/* ================================================================== */

/* app.css hides the sidebar below md, but a later `.app-sidebar { display:
   flex }` (sidebar footer block) overrides it via source order, so phones
   rendered the desktop rail beside the content. The mobile drawer
   (#mobileNav offcanvas) is the intended navigation there. */
@media (max-width: 767.98px) {
    .app-sidebar { display: none !important; }
    .app-main { width: 100%; }
    .page-header .btn { flex-shrink: 0; }
    .toolbar-card .form-select, .toolbar-card .form-control { min-width: 0; }
    .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .app-install-chip .d-lg-none { display: none !important; }
    .notification-panel { width: calc(100vw - 1.75rem); }
}
.app-install-chip { white-space: nowrap; }