/*
 * MHD Odoo <-> QuickBooks Bridge — operator UI design system.
 * Served from public/assets/css/app.css to satisfy CSP `style-src 'self'`.
 *
 * Sections:
 *   1.  Design tokens (light + dark)
 *   2.  Base / reset / typography
 *   3.  App shell (sidebar + topbar + content)
 *   4.  Navigation
 *   5.  Panels, cards & stat tiles
 *   6.  Tables (grid)
 *   7.  Status pills & badges
 *   8.  Buttons & forms
 *   9.  Flash / toasts
 *   10. Connection + brand logos
 *   11. Auth screens
 *   12. Utilities & responsive
 */

/* ============================================================= *
 * 1. DESIGN TOKENS
 * ============================================================= */
:root {
    color-scheme: light;

    /* Brand — MHD red */
    --brand:          #ed1b34;
    --brand-hover:    #c8152b;
    --brand-weak:     rgba(237, 27, 52, 0.10);
    --brand-weaker:   rgba(237, 27, 52, 0.06);
    --brand-contrast: #ffffff;

    /* Neutrals */
    --bg:           #f3f4f7;
    --surface:      #ffffff;
    --surface-2:    #f7f8fb;
    --sidebar-bg:   #ffffff;
    --fg:           #1a2233;
    --fg-muted:     #5c6678;
    --fg-faint:     #8a93a3;
    --border:       #e4e8ef;
    --border-strong:#d3dae4;

    /* Semantic */
    --success:    #1f8f4d;
    --success-bg: rgba(31, 143, 77, 0.12);
    --warning:    #b25b00;
    --warning-bg: rgba(178, 91, 0, 0.12);
    --danger:     #d12f2f;
    --danger-bg:  rgba(209, 47, 47, 0.12);
    --info:       #1f6feb;
    --info-bg:    rgba(31, 111, 235, 0.12);

    /* Effects */
    --radius:      12px;
    --radius-sm:   8px;
    --radius-pill: 999px;
    --shadow-sm:   0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.06);
    --shadow-md:   0 4px 12px rgba(16, 24, 40, 0.08), 0 2px 4px rgba(16, 24, 40, 0.05);
    --shadow-lg:   0 12px 32px rgba(16, 24, 40, 0.14);
    --ring:        0 0 0 3px rgba(237, 27, 52, 0.22);

    --sidebar-w:   244px;
    --topbar-h:    60px;

    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Dark tokens — applied for OS preference (unless explicitly set light). */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --brand:          #f5455a;
        --brand-hover:    #ed1b34;
        --brand-weak:     rgba(245, 69, 90, 0.16);
        --brand-weaker:   rgba(245, 69, 90, 0.10);
        --brand-contrast: #ffffff;

        --bg:           #11141b;
        --surface:      #1a1e27;
        --surface-2:    #222734;
        --sidebar-bg:   #161a22;
        --fg:           #e6e9f0;
        --fg-muted:     #98a2b3;
        --fg-faint:     #6b7585;
        --border:       #2a2f3c;
        --border-strong:#3a4150;

        --success:    #46c07b;
        --success-bg: rgba(70, 192, 123, 0.16);
        --warning:    #e3a155;
        --warning-bg: rgba(227, 161, 85, 0.16);
        --danger:     #f0656c;
        --danger-bg:  rgba(240, 101, 108, 0.16);
        --info:       #5da9e9;
        --info-bg:    rgba(93, 169, 233, 0.16);

        --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-md:  0 4px 14px rgba(0, 0, 0, 0.45);
        --shadow-lg:  0 14px 38px rgba(0, 0, 0, 0.55);
        --ring:       0 0 0 3px rgba(245, 69, 90, 0.30);
    }
}

/* Dark tokens — explicit toggle override. */
:root[data-theme="dark"] {
    color-scheme: dark;
    --brand:          #f5455a;
    --brand-hover:    #ed1b34;
    --brand-weak:     rgba(245, 69, 90, 0.16);
    --brand-weaker:   rgba(245, 69, 90, 0.10);
    --brand-contrast: #ffffff;

    --bg:           #11141b;
    --surface:      #1a1e27;
    --surface-2:    #222734;
    --sidebar-bg:   #161a22;
    --fg:           #e6e9f0;
    --fg-muted:     #98a2b3;
    --fg-faint:     #6b7585;
    --border:       #2a2f3c;
    --border-strong:#3a4150;

    --success:    #46c07b;
    --success-bg: rgba(70, 192, 123, 0.16);
    --warning:    #e3a155;
    --warning-bg: rgba(227, 161, 85, 0.16);
    --danger:     #f0656c;
    --danger-bg:  rgba(240, 101, 108, 0.16);
    --info:       #5da9e9;
    --info-bg:    rgba(93, 169, 233, 0.16);

    --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md:  0 4px 14px rgba(0, 0, 0, 0.45);
    --shadow-lg:  0 14px 38px rgba(0, 0, 0, 0.55);
    --ring:       0 0 0 3px rgba(245, 69, 90, 0.30);
}

/* ============================================================= *
 * 2. BASE / RESET / TYPOGRAPHY
 * ============================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { height: 100%; }

body {
    margin: 0;
    min-height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    background: var(--bg);
    color: var(--fg);
    line-height: 1.55;
}

h1, h2, h3, h4 { line-height: 1.25; color: var(--fg); }
h1 { font-size: 1.5rem;  font-weight: 650; margin: 0 0 0.75rem; letter-spacing: -0.01em; }
h2 { font-size: 1.15rem; font-weight: 620; margin: 0 0 0.6rem;  letter-spacing: -0.005em; }
h3 { font-size: 1rem;    font-weight: 600; margin: 0 0 0.5rem; }

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); text-decoration: underline; }

p { margin: 0 0 0.75rem; }
code, pre, kbd { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; }
code {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 0.05rem 0.35rem;
    font-size: 0.85em;
}

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 4px; }

/* ============================================================= *
 * 3. APP SHELL
 * ============================================================= */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-w);
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    z-index: 40;
    transition: transform 0.22s ease;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    height: var(--topbar-h);
    padding: 0 1.1rem;
    border-bottom: 1px solid var(--border);
}
.sidebar-brand img { height: 30px; width: auto; display: block; }
.sidebar-brand .brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.sidebar-brand .brand-text strong { font-size: 0.95rem; font-weight: 680; letter-spacing: 0.01em; }
.sidebar-brand .brand-text span { font-size: 0.72rem; color: var(--fg-muted); }

.sidebar-nav { flex: 1; overflow-y: auto; padding: 0.75rem 0.6rem; display: flex; flex-direction: column; gap: 0.15rem; }
.sidebar-section-label {
    font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--fg-faint); padding: 0.75rem 0.7rem 0.35rem;
}
.sidebar-footer { padding: 0.75rem 0.9rem; border-top: 1px solid var(--border); font-size: 0.78rem; color: var(--fg-faint); }

.app-main {
    flex: 1;
    min-width: 0;
    margin-left: var(--sidebar-w);
    display: flex;
    flex-direction: column;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.5rem;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: saturate(160%) blur(8px);
    border-bottom: 1px solid var(--border);
}
.topbar-title { font-size: 1.02rem; font-weight: 620; letter-spacing: -0.005em; }
.topbar-spacer { flex: 1; }
.topbar-actions { display: flex; align-items: center; gap: 0.6rem; }

.content { flex: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 1.75rem 1.5rem 3rem; }

/* Icon button (theme toggle, sidebar toggle) */
.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; padding: 0; margin: 0;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--fg-muted); cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.icon-btn:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-weaker); }
.icon-btn svg { width: 18px; height: 18px; }
.sidebar-toggle { display: none; }

/* User menu in topbar */
.user-menu { display: flex; align-items: center; gap: 0.55rem; padding-left: 0.4rem; }
.user-menu .user-meta { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.user-menu .user-email { font-size: 0.82rem; font-weight: 550; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.scrim { display: none; position: fixed; inset: 0; z-index: 35; background: rgba(10, 14, 22, 0.45); }

/* ============================================================= *
 * 4. NAVIGATION
 * ============================================================= */
.nav-item {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.55rem 0.7rem;
    border-radius: var(--radius-sm);
    color: var(--fg-muted);
    font-size: 0.9rem; font-weight: 530;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background 0.14s, color 0.14s;
}
.nav-item svg { width: 18px; height: 18px; flex: none; opacity: 0.85; }
.nav-item:hover { background: var(--surface-2); color: var(--fg); text-decoration: none; }
.nav-item.active { background: var(--brand-weak); color: var(--brand); font-weight: 620; }
.nav-item.active svg { opacity: 1; }

/* ============================================================= *
 * 5. PANELS, CARDS & STAT TILES
 * ============================================================= */
.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow-sm);
}
.panel > h1:first-child,
.panel > h2:first-child { margin-top: 0; }

.subpanel {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1.1rem 1.25rem;
    margin: 0.85rem 0;
    background: var(--surface-2);
}
.subpanel h2 { margin: 0 0 0.6rem; font-size: 1.02rem; }

.crumbs { color: var(--fg-faint); font-size: 0.8rem; margin-bottom: 0.85rem; letter-spacing: 0.01em; }
.crumbs a { color: var(--fg-muted); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.85rem; margin: 0.5rem 0 1.25rem; }
.card {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.95rem 1.1rem;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.16s, transform 0.16s;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.card-label {
    display: flex; align-items: center; gap: 0.4rem;
    color: var(--fg-muted); font-size: 0.76rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.card-label img.logo-mark { height: 16px; width: auto; }
.card-value { font-size: 1.6rem; font-weight: 680; margin-top: 0.4rem; letter-spacing: -0.01em; }
.card-value a { color: inherit; }
.card-value.ok   { color: var(--success); }
.card-value.warn { color: var(--warning); }

dl.kv {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.4rem 1.25rem;
    margin: 0.75rem 0 1rem;
    font-size: 0.9rem;
}
dl.kv dt { color: var(--fg-muted); font-weight: 530; }
dl.kv dd { margin: 0; }

/* ============================================================= *
 * 6. TABLES
 * ============================================================= */
table.grid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.88rem; }
table.grid thead th {
    position: sticky; top: var(--topbar-h);
    text-align: left; padding: 0.6rem 0.7rem;
    color: var(--fg-muted); font-weight: 600; font-size: 0.76rem;
    text-transform: uppercase; letter-spacing: 0.04em;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}
table.grid tbody td { padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--border); vertical-align: top; }
table.grid tbody tr { transition: background 0.12s; }
table.grid tbody tr:hover { background: var(--surface-2); }
table.grid tbody tr:last-child td { border-bottom: none; }
table.grid tr.row-error { background: var(--danger-bg); }
table.grid tr.row-error:hover { background: var(--danger-bg); }
table.grid tr.resolved { opacity: 0.55; }
td.truncate, .truncate { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================= *
 * 7. STATUS PILLS & BADGES
 * ============================================================= */
.status {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.12rem 0.55rem;
    border-radius: var(--radius-pill);
    font-size: 0.76rem; font-weight: 600;
    border: 1px solid transparent;
    text-transform: capitalize;
}
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-success, .status-completed, .status-fallback_applied,
.status-resolved, .status-acknowledged { color: var(--success); background: var(--success-bg); }
.status-failed, .status-cancelled, .status-error { color: var(--danger); background: var(--danger-bg); }
.status-blocked, .status-orphan, .status-completed_with_blocks { color: var(--warning); background: var(--warning-bg); }
.status-running { color: var(--info); background: var(--info-bg); }
.status-pending, .status-queued, .status-draft, .status-new { color: var(--fg-muted); background: var(--surface-2); border-color: var(--border); }

.badge {
    display: inline-flex; align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: var(--radius-pill);
    background: var(--brand); color: var(--brand-contrast);
    font-size: 0.7rem; font-weight: 650;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.badge.warn { background: var(--warning); }
.badge.neutral { background: var(--surface-2); color: var(--fg-muted); border: 1px solid var(--border); }

.env-badge {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.2rem 0.6rem; border-radius: var(--radius-pill);
    font-size: 0.72rem; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase;
    background: var(--surface-2); color: var(--fg-muted); border: 1px solid var(--border);
}

/* ============================================================= *
 * 8. BUTTONS & FORMS
 * ============================================================= */
.button, button {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.45rem 0.95rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--fg);
    cursor: pointer;
    font: inherit; font-size: 0.88rem; font-weight: 550;
    text-decoration: none;
    transition: background 0.14s, border-color 0.14s, color 0.14s, box-shadow 0.14s;
}
.button:hover, button:hover { border-color: var(--border-strong); background: var(--surface-2); text-decoration: none; }
.button:active, button:active { transform: translateY(0.5px); }

/* Primary — solid MHD red */
.button.primary, button.primary, .button-primary {
    background: var(--brand); border-color: var(--brand); color: var(--brand-contrast);
}
.button.primary:hover, button.primary:hover, .button-primary:hover {
    background: var(--brand-hover); border-color: var(--brand-hover); color: var(--brand-contrast);
}

/* Danger — outlined red, distinct from solid brand primary */
button.danger, .button.danger {
    border-color: var(--danger); color: var(--danger); background: transparent;
}
button.danger:hover, .button.danger:hover { background: var(--danger-bg); border-color: var(--danger); }

button.linklike { background: none; border: none; color: var(--brand); cursor: pointer; font: inherit; padding: 0; }
button.linklike:hover { color: var(--brand-hover); text-decoration: underline; }

.actions { display: flex; gap: 0.55rem; margin: 0.85rem 0; flex-wrap: wrap; }
form.inline { display: inline; margin: 0; }

input[type="text"], input[type="email"], input[type="password"], input[type="search"],
select, textarea {
    font: inherit; font-size: 0.9rem;
    color: var(--fg);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.65rem;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
label { font-size: 0.88rem; font-weight: 530; }

form.stacked { display: flex; flex-direction: column; gap: 0.5rem; max-width: 480px; margin-top: 0.85rem; }
.filters { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin: 0.5rem 0 1.25rem; }
.filters label { display: inline-flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; color: var(--fg-muted); }
.filters label.checkbox { flex-direction: row; align-items: center; gap: 0.4rem; }

/* ============================================================= *
 * 9. FLASH / TOASTS
 * ============================================================= */
.toast-stack {
    position: fixed; top: calc(var(--topbar-h) + 0.75rem); right: 1.25rem;
    z-index: 60; display: flex; flex-direction: column; gap: 0.6rem;
    width: min(360px, calc(100vw - 2rem));
}
.toast {
    display: flex; align-items: flex-start; gap: 0.6rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--info);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    padding: 0.75rem 0.85rem;
    font-size: 0.88rem;
    animation: toast-in 0.25s ease;
}
.toast.is-hiding { animation: toast-out 0.2s ease forwards; }
.toast .toast-body { flex: 1; }
.toast .toast-close {
    width: 22px; height: 22px; padding: 0; border: none; background: none;
    color: var(--fg-faint); cursor: pointer; line-height: 1;
}
.toast .toast-close:hover { color: var(--fg); background: none; }
.toast-success { border-left-color: var(--success); }
.toast-success .toast-icon { color: var(--success); }
.toast-error,
.toast-danger  { border-left-color: var(--danger); }
.toast-error .toast-icon, .toast-danger .toast-icon { color: var(--danger); }
.toast-warning { border-left-color: var(--warning); }
.toast-warning .toast-icon { color: var(--warning); }
.toast-info    { border-left-color: var(--info); }
.toast-info .toast-icon { color: var(--info); }
.toast .toast-icon { flex: none; margin-top: 1px; }
.toast .toast-icon svg { width: 17px; height: 17px; }

@keyframes toast-in  { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to   { opacity: 0; transform: translateX(12px); } }

/* Static (non-toast) flash fallback within panels */
.flash {
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    border-left: 4px solid var(--info);
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
    background: var(--surface);
}
.flash p { margin: 0; }
.flash.flash-error,   .flash.flash-danger  { border-left-color: var(--danger);  background: var(--danger-bg); }
.flash.flash-success { border-left-color: var(--success); background: var(--success-bg); }
.flash.flash-warning, .flash.flash-warn    { border-left-color: var(--warning); background: var(--warning-bg); }
.warn-panel { border-left: 4px solid var(--warning); background: var(--warning-bg); }

/* ============================================================= *
 * 10. CONNECTION + BRAND LOGOS
 * ============================================================= */
.system-logo { height: 22px; width: auto; display: inline-block; vertical-align: middle; }
.subpanel-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.6rem; }
.subpanel-head .system-logo { height: 26px; }
.subpanel-head h1, .subpanel-head h2 { margin: 0; }

/* ============================================================= *
 * 11. AUTH SCREENS
 * ============================================================= */
.auth-wrap {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 2rem 1.25rem;
    background:
        radial-gradient(1200px 600px at 50% -10%, var(--brand-weaker), transparent 60%),
        var(--bg);
}
.auth-card {
    width: 100%; max-width: 400px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 2rem 1.85rem;
}
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: 0.65rem; margin-bottom: 1.5rem; text-align: center; }
.auth-brand img { height: 44px; width: auto; }
.auth-brand .auth-title { font-size: 1.1rem; font-weight: 650; }
.auth-brand .auth-sub { font-size: 0.82rem; color: var(--fg-muted); }
.auth-card form { display: flex; flex-direction: column; gap: 0.85rem; }
.auth-field { display: flex; flex-direction: column; gap: 0.3rem; }
.auth-field label { font-size: 0.82rem; color: var(--fg-muted); font-weight: 550; }
.auth-field input { width: 100%; }
.auth-card button[type="submit"] { width: 100%; justify-content: center; padding: 0.6rem; background: var(--brand); border-color: var(--brand); color: var(--brand-contrast); }
.auth-card button[type="submit"]:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.auth-row { display: flex; align-items: center; justify-content: space-between; font-size: 0.82rem; }
.auth-foot { margin-top: 1.1rem; text-align: center; font-size: 0.85rem; color: var(--fg-muted); }
.auth-error { background: var(--danger-bg); border: 1px solid var(--danger); color: var(--danger); border-radius: var(--radius-sm); padding: 0.6rem 0.8rem; font-size: 0.85rem; }
.auth-checkbox { display: flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; color: var(--fg-muted); }

/* ============================================================= *
 * 12. UTILITIES & RESPONSIVE
 * ============================================================= */
.muted { color: var(--fg-muted); font-size: 0.9rem; }
.warn  { color: var(--warning); }
.is-hidden { display: none !important; }
.stub-note { color: var(--warning); font-style: italic; }
.empty-state {
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    padding: 2.25rem 1rem; text-align: center; color: var(--fg-muted);
}
.empty-state svg { width: 34px; height: 34px; opacity: 0.5; }

pre.codeblock {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.85rem;
    overflow-x: auto;
    font-size: 0.82rem;
    white-space: pre-wrap;
    word-break: break-word;
}

@media (max-width: 880px) {
    .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
    .sidebar.open { transform: none; }
    .app-main { margin-left: 0; }
    .sidebar-toggle { display: inline-flex; }
    body.sidebar-open .scrim { display: block; }
    table.grid thead th { top: 0; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ============================================================= *
 * 13. ERROR / STATUS PAGES (403 / 404 / 400 / 500)
 * ============================================================= */
.error-wrap {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 2rem 1.25rem;
    background:
        radial-gradient(1200px 600px at 50% -10%, var(--brand-weaker), transparent 60%),
        var(--bg);
}
.error-card {
    width: 100%; max-width: 480px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 2.5rem 2rem;
    text-align: center;
}
.error-card .error-logo { display: block; height: 40px; width: auto; margin: 0 auto 1.6rem; }
.error-code {
    display: inline-block;
    font-size: 0.74rem; font-weight: 650; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--brand);
    background: var(--brand-weak);
    border: 1px solid var(--brand-weak);
    border-radius: var(--radius-pill);
    padding: 0.28rem 0.9rem;
    margin-bottom: 1.1rem;
}
.error-card h1 { font-size: 1.5rem; line-height: 1.2; margin: 0 0 0.7rem; color: var(--fg); }
.error-card p { margin: 0 auto 0.45rem; max-width: 40ch; color: var(--fg-muted); font-size: 0.94rem; }
.error-detail {
    margin-top: 1.2rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.7rem 0.85rem;
    font-size: 0.84rem;
    color: var(--fg);
    text-align: center;
    white-space: pre-wrap;
    word-break: break-word;
}
.error-actions { margin-top: 1.7rem; }
.error-actions a {
    display: inline-block;
    padding: 0.55rem 1.15rem;
    background: var(--brand); color: var(--brand-contrast);
    border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 550;
    text-decoration: none;
    transition: background 0.15s ease;
}
.error-actions a:hover { background: var(--brand-hover); }

/* ------------------------------------------------------------------ */
/* Table toolbar — filter links (left) + paging links (right)         */
/* ------------------------------------------------------------------ */
.table-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0.85rem 0;
}
.table-toolbar .filter-links { margin: 0 auto 0 0; }
.table-toolbar .pagination { margin: 0; }

/* ------------------------------------------------------------------ */
/* Pagination (CodeIgniter pager — default_full template)             */
/* Rendered above and below paginated tables.                         */
/* ------------------------------------------------------------------ */
.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    list-style: none;
    margin: 0.85rem 0;
    padding: 0;
}
.pagination li { margin: 0; }
.pagination li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    height: 2.1rem;
    padding: 0 0.6rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--fg);
    font-size: 0.85rem;
    font-weight: 550;
    text-decoration: none;
    transition: background 0.14s, border-color 0.14s, color 0.14s;
}
.pagination li a:hover {
    background: var(--surface-2);
    border-color: var(--border-strong);
    text-decoration: none;
}
.pagination li.active a {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--brand-contrast);
    cursor: default;
}
.pagination li.active a:hover {
    background: var(--brand);
    border-color: var(--brand);
}