/* ============================================================================
   ARIA SECURITY — Design System v2.1 (Superset)
   Agentics Technology Solutions Ltd.

   PRESERVES every class name and CSS variable from the original aria.css
   so existing admin pages (staff, sites, assignments, incidents, registry,
   etc.) continue to render correctly.

   UPDATES from v1:
     • --accent: old orange → executive gold
     • --display font: old serif → Playfair Display
     • --body font: old sans → Inter
     • --text: warm off-white → bright white

   ADDS:
     • Left sidebar component (.aria-sidebar)
     • KPI tiles (.kpi-row, .kpi)
     • New pill classes (.pill-open, .pill-investigating, etc.)
     • Page header (.page-head)
     • Gold-threaded typography (.display-italic is now gold)
     • Panel (alias for .card)
     • Premium form styles (.form-field is alias for .field)
     • Admin table styles (.atable, .ctable, .etable)
     • Modals, banners, empty states, toasts
     • Marketing page styles
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
    /* Near-black palette — slightly bluer than pure black, matches Ghana night sky */
    --bg:           #0a0e14;
    --bg-elev:      #11161e;
    --bg-elev-2:    #161c26;
    --bg-elev-3:    #1f2630;
    --border:       #1f2630;
    --border-soft:  #161c26;
    --border-gold:  #c9a961;

    /* Text — bright white woven with gold per design direction */
    --text:         #ffffff;
    --text-body:    #e8e6e0;
    --text-muted:   #7d8595;
    --text-dim:     #4a5360;

    /* Executive gold — replaces vermillion orange of v1 */
    --accent:       #c9a961;
    --accent-hot:   #d4b574;
    --accent-soft:  rgba(201, 169, 97, 0.12);

    /* Gold tokens (for new components that need explicit gold refs) */
    --gold:         #c9a961;
    --gold-hot:     #d4b574;
    --gold-dim:     #8f784a;
    --gold-soft:    rgba(201, 169, 97, 0.1);
    --gold-glow:    rgba(201, 169, 97, 0.25);

    /* Status colors — same as v1 */
    --success:      #5fb3a8;
    --success-soft: rgba(95, 179, 168, 0.12);
    --warning:      #f6c177;
    --warning-soft: rgba(246, 193, 119, 0.12);
    --danger:       #e06c75;
    --danger-soft:  rgba(224, 108, 117, 0.12);

    /* Typography — Playfair + Inter + JetBrains Mono */
    --display:      'Playfair Display', Georgia, 'Times New Roman', serif;
    --body:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mono:         'JetBrains Mono', 'Courier New', monospace;

    --radius-sm:    4px;
    --radius:       8px;
    --radius-lg:    16px;
    --radius-xl:    20px;

    --shadow-sm:    0 1px 2px rgba(0,0,0,0.3);
    --shadow:       0 8px 24px rgba(0,0,0,0.4);
    --shadow-md:    0 8px 24px rgba(0,0,0,0.4);
    --shadow-lg:    0 24px 48px rgba(0,0,0,0.5);
    --shadow-gold:  0 0 0 1px var(--border-gold), 0 8px 32px rgba(201,169,97,0.08);

    --max-w:        1280px;

    /* Sidebar */
    --sidebar-w:    240px;
    --topbar-h:     60px;
}

/* RESET =================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--body);
    background: var(--bg);
    color: var(--text-body);
    line-height: 1.6;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    min-height: 100vh;
}

/* Subtle film grain — z-index:-1 keeps it behind all content without needing per-element stacking context */
body {
    position: relative;
}
body::before {
    content: '';
    position: fixed; inset: 0; pointer-events: none; z-index: -1;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.6;
}

/* TYPOGRAPHY ================================================================ */
.display {
    font-family: var(--display);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.05;
}

/* Display-italic — THE signature gold-threaded typography */
.display-italic {
    font-family: var(--display);
    font-style: italic;
    font-weight: 400;
    color: var(--gold);
}

.mono { font-family: var(--mono); letter-spacing: -0.01em; }

.eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--gold);
    display: inline-block;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--display);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--text);
}
h1 { font-size: clamp(48px, 8vw, 112px); }
h2 { font-size: clamp(36px, 5vw, 64px); }
h3 { font-size: clamp(24px, 3vw, 40px); }
h4 { font-size: 20px; font-weight: 500; }
h5 { font-size: 16px; font-weight: 500; }
h6 { font-size: 14px; font-weight: 500; }

p { color: var(--text-muted); font-size: 16px; line-height: 1.7; }
.lead, .lede { font-size: 20px; line-height: 1.55; color: var(--text); font-weight: 300; max-width: 64ch; }

a { color: var(--gold); text-decoration: none; transition: opacity 0.15s, color 0.15s; }
a:hover { opacity: 0.75; color: var(--gold-hot); }

/* LAYOUT =================================================================== */
.container {
    max-width: var(--max-w); margin: 0 auto; padding: 0 32px;
    position: relative; z-index: 2;
}
.section { padding: 120px 0; position: relative; z-index: 2; }
.divider { height: 1px; background: var(--border); margin: 0; }

/* TOP NAV (v1) — preserved but hidden when sidebar is active ================ */
.nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    backdrop-filter: blur(20px) saturate(180%);
    background: rgba(10, 14, 20, 0.7);
    border-bottom: 1px solid var(--border-soft);
}
.nav-inner {
    max-width: var(--max-w); margin: 0 auto; padding: 18px 32px;
    display: flex; align-items: center; justify-content: space-between;
}
.brand {
    font-family: var(--display); font-size: 22px; font-weight: 500;
    color: var(--text); letter-spacing: -0.02em;
    display: flex; align-items: center; gap: 10px;
}
.brand-mark {
    width: 28px; height: 28px; border-radius: 6px;
    background: linear-gradient(135deg, var(--gold), var(--gold-dim));
    display: grid; place-items: center;
    font-family: var(--mono); font-weight: 700; font-size: 14px;
    color: var(--bg);
}
.nav-links { display: flex; gap: 32px; align-items: center; }
.nav-links a {
    color: var(--text-muted); font-family: var(--body); font-weight: 500;
    font-size: 14px;
}
.nav-links a:hover { color: var(--text); opacity: 1; }

/* When sidebar is mounted, hide the old top-nav */
body.with-sidebar .nav { display: none; }

/* BUTTONS ================================================================== */
.btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 22px; border-radius: var(--radius);
    font-family: var(--body); font-size: 14px; font-weight: 500;
    cursor: pointer; transition: all 0.2s;
    border: 1px solid transparent; text-decoration: none;
    white-space: nowrap; background: transparent; color: var(--text);
}
.btn:hover { opacity: 1; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-primary {
    background: var(--gold); color: var(--bg);
    box-shadow: 0 4px 16px rgba(201, 169, 97, 0.25);
    font-weight: 600;
}
.btn-primary:hover {
    background: var(--gold-hot); transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(201, 169, 97, 0.35);
}
.btn-ghost {
    background: transparent; color: var(--text); border-color: var(--border);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn-link {
    background: none; border: none; color: var(--gold);
    padding: 0; font-size: 15px; font-weight: 500;
}
.btn-danger { color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: var(--danger-soft); }

.btn-arrow::after { content: '→'; transition: transform 0.2s; }
.btn-arrow:hover::after { transform: translateX(4px); }

.btn-small { padding: 7px 14px; font-size: 12px; }
.btn-large { padding: 14px 26px; font-size: 15px; }
.btn-block { width: 100%; justify-content: center; }

/* FORMS — .field (v1) and .form-field (v2) both supported ================== */
.field, .form-field { margin-bottom: 22px; position: relative; }
.field label, .form-field label {
    display: block; font-size: 12px; font-weight: 500;
    color: var(--text-muted); margin-bottom: 8px;
    font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.15em;
}
.field input, .field select, .field textarea,
.form-field input, .form-field select, .form-field textarea {
    width: 100%; padding: 12px 14px;
    background: var(--bg-elev); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius);
    font-family: var(--body); font-size: 14px;
    transition: border-color 0.15s;
}
.field input:focus, .field select:focus, .field textarea:focus,
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
    outline: none; border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-soft);
}
.field textarea, .form-field textarea { resize: vertical; min-height: 80px; }
.field-help, .hint { font-size: 13px; color: var(--text-dim); margin-top: 6px; }
.field-error { font-size: 13px; color: var(--danger); margin-top: 6px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row.three { grid-template-columns: 2fr 1fr 1fr; }

/* CARDS — .card (v1) and .panel (v2) ========================================= */
.card, .panel {
    background: var(--bg-elev); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 28px;
    position: relative; z-index: 2;
}
.card-hover, .panel-hover { transition: all 0.2s; }
.card-hover:hover, .panel-hover:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
}
.panel--featured, .card--featured {
    border-top: 2px solid var(--gold);
}

/* BADGES — .badge (v1) and .pill (v2) both supported ======================= */
.badge, .pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 100px;
    font-family: var(--mono); font-size: 11px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.08em;
    border: 1px solid transparent;
}

/* v1 badge variants — preserved */
.badge-accent { background: var(--gold-soft); color: var(--gold); }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-dim { background: var(--bg-elev-2); color: var(--text-muted); }

/* v2 pill variants — add borders for premium look */
.pill {
    border: 1px solid var(--border);
    color: var(--text-muted);
    background: transparent;
}

/* Staff status */
.pill-active { border-color: var(--success); color: var(--success); }
.pill-terminated { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }
.pill-suspended { border-color: var(--warning); color: var(--warning); }

/* Flag severity */
.pill-warning { border-color: var(--warning); color: var(--warning); }
.pill-severe { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }

/* Assignment status */
.pill-scheduled { border-color: var(--warning); color: var(--warning); }
.pill-deployed, .pill-prompted { border-color: var(--gold); color: var(--gold); }
.pill-in_progress { border-color: var(--gold); color: var(--gold); background: var(--gold-soft); }
.pill-completed, .pill-responded, .pill-resolved { border-color: var(--success); color: var(--success); }
.pill-cancelled, .pill-hidden, .pill-closed { border-color: var(--text-dim); color: var(--text-dim); }

/* Assignment type */
.pill-temporary { border-color: var(--gold); color: var(--gold); }
.pill-permanent { border-color: var(--success); color: var(--success); }
.pill-emergency { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }

/* Awake check status */
.pill-alarmed, .pill-escalated, .pill-missed, .pill-incident_raised {
    border-color: var(--danger); color: var(--danger); background: var(--danger-soft);
}

/* Incident status */
.pill-open { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }
.pill-investigating { border-color: var(--warning); color: var(--warning); background: var(--warning-soft); }

/* Severity */
.pill-low { border-color: var(--text-muted); color: var(--text-muted); }
.pill-medium { border-color: var(--warning); color: var(--warning); }
.pill-high { border-color: var(--danger); color: var(--danger); }
.pill-critical { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); font-weight: 600; }

/* Registry */
.pill-disputed { border-color: var(--warning); color: var(--warning); background: var(--warning-soft); }

/* ============================================================================
   SIDEBAR NAVIGATION — v2 addition
   Body gets padding-left to clear the fixed sidebar. No content wrapping.
   ============================================================================ */
body.with-sidebar {
    padding-left: var(--sidebar-w);
    padding-top: 24px;
    min-height: 100vh;
}
@media (max-width: 900px) {
    body.with-sidebar {
        padding-left: 0;
        padding-top: 56px;
    }
}

.aria-sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: var(--sidebar-w);
    background: linear-gradient(180deg, #0c1017 0%, #0a0e14 100%);
    border-right: 1px solid var(--border);
    z-index: 150;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}
.aria-sidebar__brand {
    padding: 22px 24px 18px;
    display: flex; align-items: center; gap: 12px;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
}
.aria-sidebar__brand:hover { opacity: 1; color: inherit; }
.aria-sidebar__mark {
    width: 34px; height: 34px;
    background: var(--gold);
    color: var(--bg);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--display);
    font-weight: 600;
    font-size: 20px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}
.aria-sidebar__name {
    display: flex; flex-direction: column; line-height: 1.2;
}
.aria-sidebar__name-main {
    font-family: var(--display);
    font-weight: 500;
    font-size: 19px;
    color: var(--text);
    letter-spacing: 0.01em;
}
.aria-sidebar__name-sub {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-top: 3px;
    font-weight: 500;
}
.aria-sidebar__nav { flex: 1; padding: 14px 0; }
.aria-sidebar__section {
    padding: 14px 24px 8px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-weight: 500;
}
.aria-sidebar__link {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 24px;
    font-size: 14px;
    color: var(--text-muted);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: all 0.15s;
    font-family: var(--body);
}
.aria-sidebar__link:hover {
    color: var(--text);
    background: rgba(255,255,255,0.02);
    border-left-color: var(--border);
    opacity: 1;
}
.aria-sidebar__link--active {
    color: var(--gold);
    background: var(--gold-soft);
    border-left-color: var(--gold);
    font-weight: 500;
}
.aria-sidebar__icon {
    width: 18px; height: 18px; flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.aria-sidebar__footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 10px;
}
.aria-sidebar__user {
    font-size: 12px;
    color: var(--text-muted);
    font-family: var(--mono);
}

/* Mobile bar */
.aria-mobile-bar {
    display: none;
    position: fixed; top: 0; left: 0; right: 0;
    height: 56px;
    padding: 0 16px;
    background: var(--bg-elev);
    border-bottom: 1px solid var(--border);
    align-items: center; gap: 14px;
    z-index: 140;
}
.aria-hamburger {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid var(--border);
    color: var(--text); border-radius: var(--radius-sm);
    cursor: pointer;
}
.aria-sidebar-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 145;
}
@media (max-width: 900px) {
    .aria-sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s;
    }
    .aria-sidebar--open { transform: translateX(0); }
    .aria-mobile-bar { display: flex; }
    .aria-sidebar-overlay--open { display: block; }
}

/* ============================================================================
   PAGE HEADERS — v2 addition
   ============================================================================ */
.page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin: 0 auto 36px;
    padding: 24px 32px 0;
    max-width: var(--max-w);
    flex-wrap: wrap;
    gap: 24px;
    position: relative; z-index: 2;
}
.page-head h1 {
    margin-top: 10px;
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    letter-spacing: -0.03em;
    line-height: 1.1;
}

/* ============================================================================
   KPI TILES — v2 addition
   ============================================================================ */
.kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin: 0 auto 32px;
    max-width: var(--max-w);
}
.kpi {
    background: var(--bg-elev);
    padding: 26px 24px;
    position: relative;
}
.kpi--featured { border-top: 2px solid var(--gold); }

.kpi__label, .kpi .label {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 500;
}
.kpi__value, .kpi .value {
    font-family: var(--display);
    font-size: 42px;
    font-weight: 400;
    color: var(--text);
    margin-top: 10px;
    letter-spacing: -0.02em;
    line-height: 1;
    font-feature-settings: "tnum";
}
.kpi__value--gold, .kpi--accent .value { color: var(--gold); }
.kpi__value--success, .kpi--success .value { color: var(--success); }
.kpi__value--warning, .kpi--warning .value { color: var(--warning); }
.kpi__value--danger, .kpi--danger .value { color: var(--danger); }
.kpi__hint, .kpi .hint { font-size: 12px; color: var(--text-dim); margin-top: 4px; }

/* ============================================================================
   ADMIN TABLES — v2 addition
   ============================================================================ */
.atable, .ctable, .etable {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-elev);
}
.atable th, .ctable th, .etable th {
    text-align: left;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 500;
    padding: 14px 20px;
    background: var(--bg-elev-2);
    border-bottom: 1px solid var(--border);
}
.atable td, .ctable td, .etable td {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-soft);
    font-size: 14px;
    color: var(--text-body);
    vertical-align: middle;
}
.atable tr:hover { background: var(--bg-elev-2); cursor: pointer; }
.atable tr:last-child td,
.ctable tr:last-child td,
.etable tr:last-child td { border-bottom: none; }

/* ============================================================================
   MODALS — v2 addition
   ============================================================================ */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(10, 14, 20, 0.85);
    backdrop-filter: blur(4px);
    z-index: 200;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 20px;
    overflow-y: auto;
}
.modal-overlay.open, .modal-overlay--open { display: flex; }
.modal {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    max-width: 640px; width: 100%;
    max-height: 90vh; overflow-y: auto;
    box-shadow: var(--shadow-md);
}
.modal-header {
    padding: 24px 28px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}
.modal-header h2, .modal-header h3 {
    font-family: var(--display);
    font-size: 26px;
    font-weight: 400;
}
.modal-header .sub {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 500;
}
.close-x {
    background: none; border: none; color: var(--text-muted);
    cursor: pointer; font-size: 26px; padding: 0; line-height: 1;
}
.close-x:hover { color: var(--text); }
.modal-body { padding: 24px 28px; }

/* ============================================================================
   BANNERS — v2 addition
   ============================================================================ */
.error-banner {
    background: var(--danger-soft);
    border: 1px solid var(--danger);
    color: var(--danger);
    padding: 12px 16px;
    border-radius: var(--radius);
    margin: 10px 0;
    font-size: 13px;
}
.warning-banner {
    background: var(--warning-soft);
    border: 1px solid var(--warning);
    color: var(--warning);
    padding: 12px 16px;
    border-radius: var(--radius);
    margin: 10px 0;
    font-size: 13px;
}
.success-banner {
    background: var(--success-soft);
    border: 1px solid var(--success);
    color: var(--success);
    padding: 12px 16px;
    border-radius: var(--radius);
    margin: 10px 0;
    font-size: 13px;
}

/* ============================================================================
   EMPTY STATE — v2 addition
   ============================================================================ */
.empty-state {
    padding: 60px 24px;
    text-align: center;
}
.empty-state .icon {
    font-family: var(--display);
    font-size: 56px;
    color: var(--text-dim);
    font-weight: 300;
    margin-bottom: 14px;
}
.empty-state .msg {
    font-family: var(--display);
    font-size: 20px;
    color: var(--text-muted);
    font-weight: 400;
}

/* ============================================================================
   UTILITIES — v2 addition
   ============================================================================ */
.hidden { display: none !important; }
.build-tag {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    text-align: center;
    padding: 40px 0;
    position: relative; z-index: 2;
}

.spinner {
    display: inline-block;
    width: 12px; height: 12px;
    border: 2px solid var(--text-dim);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

.aria-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 24px;
    background: var(--bg-elev);
    border: 1px solid var(--gold);
    color: var(--text);
    border-radius: var(--radius);
    font-size: 14px;
    z-index: 300;
    box-shadow: var(--shadow-md);
    animation: toast-in 0.2s;
}
.aria-toast--error { border-color: var(--danger); color: var(--danger); }
.aria-toast--success { border-color: var(--success); color: var(--success); }
@keyframes toast-in {
    from { opacity: 0; transform: translate(-50%, 20px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ============================================================================
   ADMIN PAGE CONTENT — when sidebar is on, content starts nicely
   ============================================================================ */
body.with-sidebar .section { padding: 40px 0; }
body.with-sidebar .container { max-width: 1280px; padding: 0 32px; }

@media (max-width: 900px) {
    body.with-sidebar .section { padding: 24px 0; }
    body.with-sidebar .container { padding: 0 20px; }
}

/* Prevent old fixed nav from overlapping when sidebar is active */
body.with-sidebar > nav.nav,
body.with-sidebar nav.nav.active { display: none !important; }


/* PATCH_v2_2_RESTORE_APPLIED */
/* ============================================================================
   ARIA PATCH — appended to aria.css to fix remaining issues
   v2.2 restore
   ============================================================================ */

/* Force-hide legacy top nav — we've fully moved to sidebar */
nav.nav,
body > nav.nav,
body > .nav {
  display: none !important;
}

/* Belt-and-suspenders hidden-class */
.hidden { display: none !important; }
.method-section.hidden,
#qrSection.hidden,
#voiceSection.hidden,
#faceSection.hidden,
#fingerprintSection.hidden,
#pinSection.hidden {
  display: none !important;
}

/* Ensure sidebar content is always on top */
.aria-sidebar { z-index: 150 !important; }
.aria-mobile-bar { z-index: 140 !important; }

/* On pages WITHOUT sidebar (opt-out), content stays at normal position */
body:not(.with-sidebar) .aria-sidebar { display: none; }

/* Prevent horizontal scrollbar when sidebar is pushed off-screen on mobile */
body.with-sidebar { overflow-x: hidden; }

/* Defensive — make sure page containers are visible above any effects */
main, section, .container, .section, .panel, .card, .kpi-row, .page-head {
  position: relative;
  z-index: 2;
}