/* ============================================================
   Aero skin — the Win7 glass look, rebuilt on top of tokens.css.

   The visual identity is deliberately unchanged; what changed is
   everything underneath it:
     - every colour/size now comes from a token, so the look is
       tunable in one file instead of 34 templates
     - one status vocabulary (.st) replaces the two competing systems
       (.status-* CSS classes AND raw Bootstrap .badge.bg-*) that had
       drifted apart — Pending was yellow on one screen, blue on another
     - a visible focus ring on every interactive element
     - contrast raised to WCAG AA (muted text was 2.4:1 and unreadable)
     - tables are density-aware and have sticky headers

   Load order: tokens.css -> aero.css -> ux.css
   ============================================================ */

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-ui);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    background: linear-gradient(to bottom, var(--aero-bg-top) 0%, var(--aero-bg-bottom) 100%);
    background-attachment: fixed;
    color: var(--text);
    min-height: 100vh;
    /* Stop iOS Safari inflating type in landscape on the FSL screens. */
    -webkit-text-size-adjust: 100%;
}

/* Money and quantities use tabular figures so columns align. */
.num, .text-end, td.num, .money-input,
.kpi-value, .kpi-currency-line {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ---------- Focus: one ring, everywhere ----------
   :focus-visible so mouse users never see it and keyboard users
   always do. Previously there was no ring at all: tabbing through
   the nav gave zero feedback about where you were. */
:focus { outline: none; }
:focus-visible,
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--r-sm);
    position: relative;
    z-index: var(--z-sticky);
}

/* Skip link: first tab stop on every page. */
.skip-link {
    position: absolute;
    left: var(--sp-5);
    top: -60px;
    z-index: var(--z-palette);
    background: #fff;
    color: var(--text-link);
    padding: var(--sp-4) var(--sp-6);
    border-radius: var(--r-md);
    box-shadow: var(--el-3);
    font-weight: var(--fw-semi);
    transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--sp-5); }

/* ---------- Global top navigation ---------- */

.global-nav {
    background: var(--aero-glass-nav);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--aero-glass-border);
    box-shadow: var(--el-2), var(--el-inset-top);
    color: var(--text);
    padding: 0 var(--sp-7);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    min-height: var(--nav-h);
    position: sticky;      /* was static: the nav scrolled away on long
                              FSL logs, so Search/Approvals needed a
                              scroll-to-top first. */
    top: 0;
    z-index: var(--z-nav);
}

.global-nav .brand {
    display: flex;
    align-items: center;
    font-weight: var(--fw-semi);
    font-size: var(--fs-h3);
    margin-right: var(--sp-8);
    text-shadow: var(--text-emboss);
    border: none;
    padding: 0;
}
.global-nav .brand img { height: 34px; }

.global-nav .nav-links {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
    align-items: center;
}

/* Every nav item is the same 38px pill so nothing sits off-baseline. */
.global-nav .nav-links > a,
.global-nav .nav-item-btn {
    height: 38px;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 0 var(--sp-5);
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    color: var(--text);
    text-decoration: none;
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    font-family: inherit;
    text-shadow: var(--text-emboss);
    background: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
}

.global-nav .nav-links > a:hover,
.global-nav .nav-item-btn:hover,
.global-nav .nav-item-btn[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.52);
    border-color: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 0 5px var(--aero-glass-highlight), var(--el-1);
}

/* Active page: a fill AND a 3px underline. Fill alone is a colour-only
   signal, which disappears for low-vision and greyscale users. */
.global-nav a.active,
.global-nav .nav-item-btn.active {
    background: rgba(255, 255, 255, 0.58);
    border-color: rgba(255, 255, 255, 0.85);
    box-shadow: inset 0 0 6px var(--aero-glass-highlight), var(--el-1),
                inset 0 -3px 0 var(--text-link);
    font-weight: var(--fw-semi);
}

/* ---------- Dropdowns (click, keyboard, aria) ----------
   These were hover-only <div>s: unreachable by keyboard, invisible to
   screen readers, and impossible on touch. Now <button aria-expanded>
   toggled by ux.js, opened on click or Enter/Space/ArrowDown. */
.dropdown { position: relative; display: inline-flex; align-items: center; }

.dropdown-menu-aero {
    display: none;
    position: absolute;
    top: calc(100% + var(--sp-2));
    left: 0;
    min-width: 210px;
    background: rgba(246, 249, 252, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--aero-glass-border);
    box-shadow: var(--el-3);
    z-index: var(--z-dropdown);
    border-radius: var(--r-md);
    overflow: hidden;
    padding: var(--sp-2);
}
.dropdown-menu-aero[data-open="true"] {
    display: block;
    animation: aeroFadeIn var(--dur) var(--ease);
}
.dropdown-menu-aero.align-end { left: auto; right: 0; }

.dropdown-menu-aero a,
.dropdown-menu-aero button {
    color: var(--text);
    padding: var(--sp-4) var(--sp-5);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
    width: 100%;
    border: 0;
    background: none;
    border-radius: var(--r-sm);
    font: inherit;
    font-size: var(--fs-body);
    text-align: left;
    cursor: pointer;
}
.dropdown-menu-aero a:hover,
.dropdown-menu-aero button:hover,
.dropdown-menu-aero a[data-active="true"],
.dropdown-menu-aero a:focus-visible,
.dropdown-menu-aero button:focus-visible {
    background: rgba(31, 111, 235, 0.12);
}
.dropdown-menu-aero .menu-sep {
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
    margin: var(--sp-2) var(--sp-3);
}
.dropdown-menu-aero .menu-label {
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    padding: var(--sp-4) var(--sp-5) var(--sp-2);
    font-weight: var(--fw-semi);
}
/* Keyboard hint on the right of a menu row — teaches shortcuts in place. */
.dropdown-menu-aero kbd { flex: none; }

@keyframes aeroFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Cards ---------- */

.card {
    background: var(--aero-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--aero-glass-border);
    border-radius: var(--r-lg);
    box-shadow: var(--el-2), var(--el-inset-top);
}

.card-header {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.72) 0%, rgba(220, 230, 240, 0.6) 100%);
    border-bottom: 1px solid var(--aero-glass-border);
    color: var(--text);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    text-shadow: var(--text-emboss);
    padding: var(--sp-4) var(--sp-6);
    font-size: var(--fs-lead);
    font-weight: var(--fw-semi);
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}
.card-header h4, .card-header h5, .card-header h6 {
    font-size: var(--fs-lead);
    font-weight: var(--fw-semi);
    margin: 0;
}
/* Bootstrap's solid header fills fight the glass; neutralise them. */
.card-header.bg-primary {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.72) 0%, rgba(220, 230, 240, 0.6) 100%);
    color: var(--text);
}
.card-header.bg-primary h4 { color: var(--text); text-shadow: var(--text-emboss); }

.card-footer {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.58) 0%, rgba(226, 233, 242, 0.5) 100%);
    border-top: 1px solid var(--aero-glass-border);
    padding: var(--sp-3) var(--sp-6);
    font-size: var(--fs-small);
}

/* A search/filter strip is chrome, not content — it must not look like
   another card competing with the data table for attention. */
.card.search-panel {
    background: rgba(255, 255, 255, 0.38);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(255, 255, 255, 0.62);
    box-shadow: none;
}
.card.search-panel .card-header {
    background: transparent;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* ---------- Tables ---------- */

.table {
    background: rgba(255, 255, 255, 0.32);
    backdrop-filter: blur(5px);
    margin-bottom: 0;
    color: var(--text);
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

/* Sticky header: scrolling a 200-row FSL log used to lose the column
   names, so people counted columns by hand to find "Balance Due". */
.table > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: linear-gradient(to bottom, rgba(248, 251, 254, 0.98) 0%, rgba(223, 232, 242, 0.96) 100%);
    border-bottom: 1px solid var(--aero-glass-border);
    border-right: 1px solid rgba(255, 255, 255, 0.4);
    font-weight: var(--fw-semi);
    font-size: var(--fs-small);
    letter-spacing: 0.3px;
    padding: var(--sp-4) var(--cell-pad-x);
    color: var(--text-soft);
    text-shadow: var(--text-emboss);
    white-space: nowrap;
    text-align: left;
}

.table > tbody > tr > td {
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.4);
    padding: var(--row-pad-y) var(--cell-pad-x);
    font-size: var(--fs-body);
    vertical-align: middle;
    height: var(--row-h);
}

.table > tbody > tr:nth-child(even) > td { background: rgba(255, 255, 255, 0.22); }

.table-hover > tbody > tr:hover > td {
    background-color: rgba(210, 228, 250, 0.55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Keyboard row cursor for j/k navigation — see ux.js. */
.table > tbody > tr[data-row-active="true"] > td {
    background-color: rgba(31, 111, 235, 0.14) !important;
    box-shadow: inset 3px 0 0 var(--text-link);
}

/* Selected rows (bulk approve) read as selected without relying on hue. */
.table > tbody > tr[data-selected="true"] > td {
    background-color: rgba(31, 111, 235, 0.10) !important;
}

.table a { color: var(--text-link); text-decoration: none; }
.table a:hover { text-decoration: underline; }

/* Dense grid used by FSL / AP / AR. */
.fsl-table { font-size: var(--fs-small); white-space: nowrap; }
.fsl-table th { padding: var(--sp-3) var(--sp-5); }
.fsl-table td { padding: var(--sp-2) var(--sp-5); }

/* ---------- Forms ---------- */

.form-label {
    display: block;
    font-size: var(--fs-small);
    font-weight: var(--fw-semi);
    color: var(--text-soft);
    margin-bottom: var(--sp-2);
    text-shadow: var(--text-emboss);
}
/* Required marker is textual, not colour-only. */
.form-label .req { color: var(--bad-border); font-weight: var(--fw-bold); }

.form-control, .form-select {
    display: block;
    width: 100%;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid #9fb0c8;
    border-radius: var(--r-sm);
    font-family: inherit;
    font-size: var(--fs-body);
    color: var(--text);
    padding: var(--sp-3) var(--sp-4);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.07);
    transition: border-color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
    /* 16px min on touch stops iOS zooming the whole page on focus. */
    min-height: 34px;
}
.form-control:focus, .form-select:focus {
    background: #fff;
    border-color: var(--focus-color);
    box-shadow: var(--focus-ring);
}
.form-control::placeholder { color: #7a8ba3; }
.form-control[readonly], .form-control:disabled,
.form-select:disabled {
    background: rgba(233, 237, 242, 0.85);
    color: var(--text-soft);
    border-style: dashed;
    cursor: default;
}

/* Invalid state: red border AND an icon AND a message (three signals). */
.form-control[aria-invalid="true"], .form-select[aria-invalid="true"] {
    border-color: var(--bad-border);
    background: #fff6f7;
}
.field-error {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    color: var(--bad-fg);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    margin-top: var(--sp-2);
}
.field-error::before { content: "\26A0"; flex: none; }

.form-text, small.form-text {
    display: block;
    font-size: var(--fs-small);
    color: var(--text-muted);
    margin-top: var(--sp-2);
}

.errorlist {
    list-style: none;
    margin: var(--sp-2) 0 0;
    padding: 0;
    color: var(--bad-fg);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
}

.aero-form-errors {
    background: linear-gradient(to bottom, rgba(248, 215, 218, 0.94) 0%, rgba(241, 174, 181, 0.88) 100%);
    border: 1px solid var(--bad-border);
    border-left-width: 4px;
    border-radius: var(--r-md);
    color: var(--bad-fg);
    font-size: var(--fs-body);
    padding: var(--sp-5) var(--sp-6);
    margin-bottom: var(--sp-6);
    box-shadow: var(--el-inset-top);
}

.form-check-input {
    border: 1px solid var(--aero-silver-border);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    width: 17px;
    height: 17px;
    flex: none;
}
.form-check-input:checked { background-color: #1f6feb; border-color: var(--aero-btn-border); }

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    border-radius: var(--r-sm);
    font-family: inherit;
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    line-height: 1;
    padding: var(--sp-4) var(--sp-6);
    /* 34px: below this, touch targets start failing on tablets, and
       operators use this on warehouse tablets. */
    min-height: 34px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}
.btn-sm { font-size: var(--fs-small); padding: var(--sp-3) var(--sp-5); min-height: 28px; }
.btn-xs { font-size: var(--fs-micro); padding: var(--sp-2) var(--sp-4); min-height: 24px; gap: var(--sp-2); }
.btn:active:not([disabled]) {
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.25);
    transform: translateY(1px);
}
.btn[disabled], .btn.disabled, .btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-primary {
    background: linear-gradient(to bottom, var(--aero-btn-top) 0%, var(--aero-btn-bottom) 100%);
    border: 1px solid var(--aero-btn-border);
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), var(--el-1);
}
.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(to bottom, #6cb4ff 0%, #1a7ae8 100%);
    border-color: var(--aero-btn-border);
    color: #fff;
}

.btn-secondary {
    background: linear-gradient(to bottom, var(--aero-silver-top) 0%, var(--aero-silver-bottom) 100%);
    border: 1px solid var(--aero-silver-border);
    color: var(--text);
    text-shadow: var(--text-emboss);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), var(--el-1);
}
.btn-secondary:hover, .btn-secondary:focus {
    background: linear-gradient(to bottom, #fff 0%, #e2e9f2 100%);
    border-color: #7d90a8;
    color: var(--text);
}

/* Approve is the most-clicked button in the app, so its label has to clear
   WCAG AA at normal weight. The lighter green it used to be measured 4.29:1
   against white; #1b8040 measures 4.99:1. */
.btn-success {
    background: linear-gradient(to bottom, #47b268 0%, #1b8040 100%);
    border: 1px solid #135e2e;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), var(--el-1);
}
.btn-success:hover, .btn-success:focus {
    background: linear-gradient(to bottom, #55bd74 0%, #1f8f48 100%);
    border-color: #135e2e; color: #fff;
}

.btn-danger {
    background: linear-gradient(to bottom, #e8737f 0%, #c02736 100%);
    border: 1px solid #96222d;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), var(--el-1);
}
.btn-danger:hover, .btn-danger:focus {
    background: linear-gradient(to bottom, #ef8895 0%, #d13444 100%);
    border-color: #96222d; color: #fff;
}

/* Outline variants: silver Aero body with a coloured label. */
.btn-outline-primary, .btn-outline-success,
.btn-outline-danger, .btn-outline-secondary {
    background: linear-gradient(to bottom, var(--aero-silver-top) 0%, var(--aero-silver-bottom) 100%);
    border: 1px solid var(--aero-silver-border);
    text-shadow: var(--text-emboss);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), var(--el-1);
}
.btn-outline-primary   { color: var(--text-link); }
.btn-outline-success   { color: var(--ok-border); }
.btn-outline-danger    { color: var(--bad-border); }
.btn-outline-secondary { color: var(--text); }

.btn-outline-primary:hover {
    background: linear-gradient(to bottom, var(--aero-btn-top) 0%, var(--aero-btn-bottom) 100%);
    border-color: var(--aero-btn-border); color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-outline-success:hover {
    background: linear-gradient(to bottom, #47b268 0%, #1b8040 100%);
    border-color: #135e2e; color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.28);
}
.btn-outline-danger:hover {
    background: linear-gradient(to bottom, #e8737f 0%, #c02736 100%);
    border-color: #96222d; color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-outline-secondary:hover {
    background: linear-gradient(to bottom, #fff 0%, #e2e9f2 100%);
    border-color: #7d90a8; color: var(--text);
}

/* Icon-only buttons still need an accessible name — templates pass
   aria-label. This just keeps them square and tappable. */
.btn-icon { padding: var(--sp-3); width: 30px; min-height: 30px; }

/* ============================================================
   ONE status vocabulary.

   Before: `.status-pending` existed in CSS but AP/AR rendered
   `<span class="badge bg-info text-dark">Pending Approval</span>`,
   the approvals queue used `bg-warning`, and FSL used `bg-light`.
   Same state, three colours. Now every state maps to exactly one
   .st--* class, and the legacy Bootstrap classes are aliased onto
   the same values so nothing looks wrong mid-migration.
   ============================================================ */

.st, .status-badge, .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-4);
    font-size: var(--fs-micro);
    font-weight: var(--fw-semi);
    line-height: 1.6;
    border-radius: var(--r-sm);
    border: 1px solid;
    white-space: nowrap;
    text-shadow: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
    vertical-align: middle;
}

/* A leading glyph means the state survives greyscale printing and
   colour-blindness — colour is reinforcement, never the only signal. */
.st::before { font-size: 0.95em; line-height: 1; }

.st--draft,    .status-draft,    .badge.bg-secondary, .badge.bg-light {
    background: linear-gradient(to bottom, #f8f9fa 0%, #e2e6ea 100%);
    border-color: var(--neutral-border); color: var(--neutral-fg);
}
.st--draft::before { content: "\270E"; }          /* pencil */

.st--pending,  .status-pending,  .badge.bg-warning {
    background: linear-gradient(to bottom, var(--warn-bg) 0%, #ffe69c 100%);
    border-color: var(--warn-border); color: var(--warn-fg);
}
.st--pending::before { content: "\25CB"; }        /* open circle = waiting */

.st--approved, .status-approved, .badge.bg-info {
    background: linear-gradient(to bottom, var(--info-bg) 0%, #9ec5fe 100%);
    border-color: var(--info-border); color: var(--info-fg);
}
.st--approved::before { content: "\2713"; }       /* check */

.st--paid,     .status-paid,     .badge.bg-success {
    background: linear-gradient(to bottom, var(--ok-bg) 0%, #a3cfbb 100%);
    border-color: var(--ok-border); color: var(--ok-fg);
}
.st--paid::before { content: "\2714"; }           /* heavy check */

.st--overdue,  .status-overdue,  .badge.bg-danger {
    background: linear-gradient(to bottom, var(--bad-bg) 0%, #f1aeb5 100%);
    border-color: var(--bad-border); color: var(--bad-fg);
}
.st--overdue::before { content: "\26A0"; }        /* warning */

.st--rejected {
    background: linear-gradient(to bottom, #ffe3e6 0%, #f6bfc5 100%);
    border-color: var(--bad-border); color: var(--bad-fg);
}
.st--rejected::before { content: "\2715"; }       /* cross */

.st--void, .status-void, .badge.bg-dark {
    background: linear-gradient(to bottom, #eef1f4 0%, #d3d9e0 100%);
    border-color: #6c757d; color: #5a636c;
    text-decoration: line-through;
}
.st--void::before { content: "\2298"; text-decoration: none; }

/* Counter pill (queue sizes, unread counts). Not a status. */
.st--count {
    background: linear-gradient(to bottom, #fff 0%, #eef2f7 100%);
    border-color: var(--neutral-border);
    color: var(--text-soft);
    border-radius: var(--r-pill);
    padding: 0 var(--sp-4);
    min-width: 20px;
    justify-content: center;
}
.st--count[data-hot="true"] {
    background: linear-gradient(to bottom, #e8737f 0%, #c02736 100%);
    border-color: #96222d;
    color: #fff;
}
.st--count::before { content: none; }

/* Bootstrap's utility text colours, retuned for our contrast floor. */
.text-muted   { color: var(--text-muted) !important; }
.text-success { color: var(--money-in) !important; }
.text-danger  { color: var(--money-out) !important; }
.text-warning { color: #8a6100 !important; }   /* #ffc107 on glass was 1.6:1 */
.text-info    { color: var(--info-border) !important; }

/* ---------- Alerts (messages framework) ---------- */

.aero-messages { position: relative; z-index: var(--z-sticky); padding: var(--sp-5) var(--sp-7) 0; }

.alert {
    position: relative;
    backdrop-filter: blur(10px);
    border: 1px solid var(--aero-glass-border);
    border-left-width: 4px;
    border-radius: var(--r-md);
    box-shadow: var(--el-1), var(--el-inset-top);
    font-size: var(--fs-body);
    padding: var(--sp-4) var(--sp-9) var(--sp-4) var(--sp-6);
    margin-bottom: var(--sp-4);
}
.alert-success { background: linear-gradient(to bottom, rgba(209, 231, 221, 0.94) 0%, rgba(163, 207, 187, 0.85) 100%); border-color: var(--ok-border);   color: var(--ok-fg); }
.alert-danger  { background: linear-gradient(to bottom, rgba(248, 215, 218, 0.94) 0%, rgba(241, 174, 181, 0.85) 100%); border-color: var(--bad-border);  color: var(--bad-fg); }
.alert-info    { background: linear-gradient(to bottom, rgba(207, 226, 255, 0.94) 0%, rgba(158, 197, 254, 0.85) 100%); border-color: var(--info-border); color: var(--info-fg); }
.alert-warning { background: linear-gradient(to bottom, rgba(255, 243, 205, 0.94) 0%, rgba(255, 230, 156, 0.85) 100%); border-color: var(--warn-border); color: var(--warn-fg); }

/* ---------- List groups ---------- */

.list-group-item {
    background: rgba(255, 255, 255, 0.52);
    border-color: rgba(255, 255, 255, 0.72);
    transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.list-group-item-action:hover {
    background: rgba(255, 255, 255, 0.88);
    box-shadow: inset 0 0 6px rgba(255, 255, 255, 1), var(--el-1);
}

/* ---------- Layout & headings ---------- */

.container, .container-fluid { padding-top: var(--sp-7); padding-bottom: var(--sp-9); }
.container-fluid { max-width: var(--page-max); margin-inline: auto; }

h1, h2, h3, h4, h5 {
    color: var(--text);
    text-shadow: var(--text-emboss);
    font-weight: var(--fw-semi);
    letter-spacing: 0.1px;
    margin: 0;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3, h4 { font-size: var(--fs-h3); }
h5 { font-size: var(--fs-lead); }

/* ---------- Scrollbars ---------- */

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.3); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #cfdcec 0%, #a9bcd4 100%);
    border: 2px solid rgba(255, 255, 255, 0.65);
    border-radius: var(--r-md);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(to bottom, #bfd0e5 0%, #93aac8 100%); }

/* ---------- Responsive ---------- */

@media (max-width: 1280px) {
    .global-nav { padding: 0 var(--sp-5); }
    .global-nav .brand { margin-right: var(--sp-5); }
    .global-nav .nav-links { gap: var(--sp-1); }
    .global-nav .nav-links > a, .global-nav .nav-item-btn { padding: 0 var(--sp-4); font-size: 13px; }
}

@media (max-width: 992px) {
    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table { min-width: 700px; }
    .container, .container-fluid { padding-left: var(--sp-5); padding-right: var(--sp-5); }
    /* 16px prevents the iOS focus-zoom that leaves the form off-screen. */
    .form-control, .form-select { font-size: 16px; }
}