/* =====================================================================
   QuizForge — Design System v2
   Brand: Deep violet-indigo primary. Vivid multi-colour subject cards.
   Clean white surfaces, dark nav, modern SaaS feel.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
    /* ── Brand ─────────────────────────────── */
    --brand:        #6D28D9;   /* violet-700 */
    --brand-dark:   #4C1D95;   /* violet-900 */
    --brand-mid:    #7C3AED;   /* violet-600 */
    --brand-light:  #EDE9FE;   /* violet-50  */
    --brand-soft:   #DDD6FE;   /* violet-100 */

    /* ── Neutrals ──────────────────────────── */
    --ink:          #0F172A;   /* slate-900  */
    --ink-soft:     #334155;   /* slate-700  */
    --muted:        #64748B;   /* slate-500  */
    --border:       #E2E8F0;   /* slate-200  */
    --surface:      #F8FAFC;   /* slate-50   */
    --white:        #FFFFFF;

    /* ── Semantic ──────────────────────────── */
    --green:        #059669;
    --green-bg:     #D1FAE5;
    --red:          #DC2626;
    --red-bg:       #FEE2E2;
    --gold:         #D97706;
    --gold-bg:      #FEF3C7;

    /* ── Legacy aliases (keeps old pages working) */
    --ink-soft:     #334155;
    --paper:        #F8FAFC;
    --paper-raised: #FFFFFF;
    --paper-line:   #E2E8F0;
    --gold-dark:    #B45309;
    --muted:        #64748B;

    /* ── Typography ────────────────────────── */
    --font-display: 'Plus Jakarta Sans', -apple-system, sans-serif;
    --font-body:    'Plus Jakarta Sans', -apple-system, sans-serif;
    --font-mono:    'JetBrains Mono', monospace;

    --radius:       10px;
    --radius-lg:    16px;
    --shadow-sm:    0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --shadow-md:    0 4px 16px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
    --shadow-lg:    0 12px 40px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
}

/* ── Reset ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

h1,h2,h3,h4 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 .5em;
    line-height: 1.25;
}

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

.container {
    width: 100%; max-width: 1100px;
    margin: 0 auto; padding: 0 24px;
}
.container-narrow {
    width: 100%; max-width: 520px;
    margin: 0 auto; padding: 0 24px;
}

/* ── Auth pages ─────────────────────────────────────────────────────── */
.auth-body { background: #EEF2FF; }
.auth-body main { padding: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   HEADER / NAV
   ═══════════════════════════════════════════════════════════════════════ */
.site-header {
    background: var(--ink);
    border-bottom: none;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 4px 20px rgba(0,0,0,.2);
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}

/* Logo */
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #fff;
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: -.02em;
}
.brand:hover { color: var(--brand-soft); }

.brand-logo {
    width: 36px; height: 36px;
    background: linear-gradient(135deg, var(--brand-mid) 0%, #4338CA 100%);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(109,40,217,.4);
}
.brand-logo svg { width: 20px; height: 20px; }

/* Nav links */
.nav-links {
    display: flex; align-items: center; gap: 6px;
    font-size: .88rem; font-weight: 500;
}
.nav-links a {
    color: rgba(255,255,255,.7);
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 8px;
    transition: background .15s, color .15s;
}
.nav-links a:hover { color: #fff; background: rgba(255,255,255,.08); }

.nav-user-pill {
    display: flex; align-items: center; gap: 7px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 999px;
    padding: 5px 14px 5px 10px;
    color: #fff !important;
    font-size: .84rem; font-weight: 600;
    cursor: pointer;
}
.nav-user-pill:hover { background: rgba(255,255,255,.16) !important; }

.nav-cta {
    background: var(--brand-mid) !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 7px 16px !important;
    font-weight: 600 !important;
}
.nav-cta:hover { background: var(--brand) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   MAIN / FOOTER
   ═══════════════════════════════════════════════════════════════════════ */
main { flex: 1; padding: 40px 0 72px; }

footer.site-footer {
    background: var(--ink);
    color: rgba(255,255,255,.45);
    padding: 28px 0;
    font-size: .82rem;
}
footer.site-footer .container {
    display: flex; align-items: center;
    justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
footer.site-footer a { color: rgba(255,255,255,.6); }
footer.site-footer a:hover { color: #fff; }
.footer-brand { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.7); font-weight: 700; font-size: .9rem; }

/* ═══════════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════════ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    font-family: var(--font-body); font-weight: 600; font-size: .9rem;
    padding: 10px 20px; border-radius: var(--radius);
    border: 2px solid transparent;
    cursor: pointer; text-decoration: none;
    transition: transform .12s, box-shadow .12s, background .12s;
    white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: none; box-shadow: none; }

.btn-primary  { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); color: #fff; }
.btn-gold     { background: var(--gold); border-color: var(--gold-dark); color: var(--ink); }
.btn-gold:hover { color: var(--ink); background: #EF8C00; }
.btn-outline  { background: transparent; border-color: var(--border); color: var(--ink); }
.btn-outline:hover { border-color: var(--brand); color: var(--brand); }
.btn-danger   { background: var(--red); color: #fff; }
.btn-block    { width: 100%; }
.btn-sm       { padding: 6px 13px; font-size: .82rem; border-radius: 7px; }

/* ═══════════════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════════════ */
.card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-sm);
}

/* ═══════════════════════════════════════════════════════════════════════
   ALERTS / FLASH
   ═══════════════════════════════════════════════════════════════════════ */
.alert {
    padding: 12px 16px; border-radius: var(--radius);
    margin-bottom: 18px; font-size: .88rem; font-weight: 500;
}
.alert-success { background: var(--green-bg); color: #065F46; border: 1px solid #A7F3D0; }
.alert-error   { background: var(--red-bg);   color: #991B1B; border: 1px solid #FECACA; }
.alert-info    { background: var(--brand-light); color: var(--brand-dark); border: 1px solid var(--brand-soft); }

/* ═══════════════════════════════════════════════════════════════════════
   PAGE HEAD
   ═══════════════════════════════════════════════════════════════════════ */
.page-head { margin-bottom: 28px; }
.page-head .eyebrow {
    display: inline-block;
    font-family: var(--font-mono); font-size: .7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em;
    color: var(--brand); margin-bottom: 8px;
}
.page-head h1 { font-size: 1.75rem; margin-bottom: 6px; }

/* ═══════════════════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════════════════ */
label {
    display: block; font-size: .82rem; font-weight: 600;
    color: var(--ink-soft); margin-bottom: 6px;
}
input[type=text], input[type=email], input[type=password],
input[type=tel], input[type=number], input[type=file],
select, textarea {
    width: 100%; padding: 11px 14px;
    border: 1.5px solid var(--border); border-radius: var(--radius);
    font: .95rem var(--font-body); background: var(--white); color: var(--ink);
    transition: border-color .15s, box-shadow .15s;
    margin-bottom: 4px;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(109,40,217,.12);
}
.form-hint { font-size: .76rem; color: var(--muted); margin-top: 3px; margin-bottom: 12px; }
.form-group { margin-bottom: 16px; }

/* ═══════════════════════════════════════════════════════════════════════
   WA BANNER
   ═══════════════════════════════════════════════════════════════════════ */
.wa-required-banner { background: linear-gradient(90deg,#075E54,#128C7E); padding: 10px 0; color:#fff; }
.wa-banner-inner { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.wa-banner-left { display:flex; align-items:center; gap:10px; }
.wa-banner-icon { width:32px; height:32px; background:rgba(255,255,255,.15); border-radius:8px; display:flex; align-items:center; justify-content:center; }
.wa-banner-left strong { display:block; font-size:.88rem; font-weight:700; }
.wa-banner-left span { font-size:.78rem; color:rgba(255,255,255,.75); }
.wa-banner-btn { background:#25D366; color:#fff; padding:7px 18px; border-radius:8px; font-weight:700; font-size:.82rem; text-decoration:none; }

/* ═══════════════════════════════════════════════════════════════════════
   ADMIN LAYOUT
   ═══════════════════════════════════════════════════════════════════════ */
.admin-shell { display: flex; min-height: calc(100vh - 64px); }

.admin-sidebar {
    width: 230px; flex-shrink: 0;
    background: var(--ink);
    padding: 28px 0;
    display: flex; flex-direction: column;
}
.admin-sidebar a {
    display: block; padding: 9px 22px;
    color: rgba(255,255,255,.6);
    text-decoration: none; font-size: .86rem; font-weight: 500;
    transition: background .12s, color .12s;
    border-left: 3px solid transparent;
}
.admin-sidebar a:hover { color: #fff; background: rgba(255,255,255,.06); }
.admin-sidebar a.active {
    color: #fff; background: rgba(109,40,217,.25);
    border-left-color: var(--brand-mid);
}
.sidebar-title {
    padding: 18px 22px 6px;
    font-size: .65rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .1em; color: rgba(255,255,255,.3);
}
.admin-main { flex: 1; padding: 36px 40px; min-width: 0; max-width: 100%; }
.admin-main > * { min-width: 0; }
.card { overflow: visible; }

/* ═══════════════════════════════════════════════════════════════════════
   DATA TABLE
   ═══════════════════════════════════════════════════════════════════════ */
.data-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.data-table th {
    text-align: left; padding: 10px 14px;
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--muted);
    border-bottom: 2px solid var(--border); background: var(--surface);
}
.data-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.data-table tr:hover td { background: var(--surface); }

/* Badges */
.badge { display:inline-block; padding:3px 9px; border-radius:20px; font-size:.72rem; font-weight:700; }
.badge-easy   { background:#D1FAE5; color:#065F46; }
.badge-medium { background:#FEF3C7; color:#92400E; }
.badge-hard   { background:#FEE2E2; color:#991B1B; }

/* Stat cards */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:12px; margin-bottom:28px; }
.stat-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px 20px; }
.stat-card .stat-val { font:700 2rem/1 var(--font-mono); color:var(--ink); display:block; margin-bottom:4px; }
.stat-card .stat-lbl { font-size:.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }

/* Toolbar */
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; flex-wrap:wrap; }

/* Filter pills */
.filter-pills { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.filter-pills a {
    padding:5px 14px; border-radius:20px; font-size:.8rem; font-weight:600;
    border:1.5px solid var(--border); color:var(--muted); text-decoration:none;
    transition:all .12s;
}
.filter-pills a:hover { border-color:var(--brand); color:var(--brand); }
.filter-pills a.active { background:var(--brand); color:#fff; border-color:var(--brand); }

/* Pagination */
.pagination { display:flex; gap:6px; margin-top:18px; flex-wrap:wrap; }
.pagination a, .pagination .current {
    padding:6px 12px; border-radius:7px; font-size:.82rem; font-weight:600;
    border:1.5px solid var(--border); text-decoration:none;
}
.pagination a { color:var(--ink); }
.pagination a:hover { border-color:var(--brand); color:var(--brand); }
.pagination .current { background:var(--brand); color:#fff; border-color:var(--brand); }

/* ═══════════════════════════════════════════════════════════════════════
   QUIZ PAGE
   ═══════════════════════════════════════════════════════════════════════ */
.quiz-progress-bar { position:sticky; top:64px; z-index:50; background:var(--white); border-bottom:1px solid var(--border); padding:10px 0; }
.quiz-progress-track { height:5px; background:var(--border); border-radius:99px; overflow:hidden; margin-top:6px; }
.quiz-progress-fill { height:100%; background:var(--brand); border-radius:99px; transition:width .3s; }
#quiz-timer { font-family:var(--font-mono); font-size:.82rem; color:var(--muted); }
.question-block { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px; margin-bottom:18px; box-shadow:var(--shadow-sm); }
.question-number { font-family:var(--font-mono); font-size:.7rem; font-weight:700; color:var(--brand); text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px; }
.question-text { font-size:1rem; font-weight:600; color:var(--ink); margin-bottom:18px; }
.option-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.option-item input[type=radio] { display:none; }
.option-item label {
    display:flex; align-items:center; gap:12px;
    padding:12px 16px; border:1.5px solid var(--border); border-radius:10px;
    cursor:pointer; font-size:.93rem; transition:border-color .12s, background .12s;
}
.option-item label:hover { border-color:var(--brand); background:var(--brand-light); }
.option-item input:checked + label { border-color:var(--brand); background:var(--brand-light); color:var(--brand-dark); }
.option-letter { width:28px; height:28px; border-radius:8px; background:var(--surface); border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; font:700 .78rem var(--font-mono); flex-shrink:0; }
.option-item input:checked + label .option-letter { background:var(--brand); border-color:var(--brand); color:#fff; }

/* ═══════════════════════════════════════════════════════════════════════
   RESULTS PAGE
   ═══════════════════════════════════════════════════════════════════════ */
.score-stamp { width:130px; height:130px; border-radius:50%; border:4px solid var(--red); display:flex; flex-direction:column; align-items:center; justify-content:center; transform:rotate(-8deg); margin:0 auto 24px; }
.score-stamp.pass { border-color:var(--green); }
.score-stamp .stamp-pct { font:700 2.2rem/1 var(--font-mono); color:var(--red); }
.score-stamp.pass .stamp-pct { color:var(--green); }
.score-stamp .stamp-label { font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-top:4px; }
.result-stats { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:28px; }
.result-stat { background:var(--white); border:1px solid var(--border); border-radius:12px; padding:14px 20px; text-align:center; }
.result-stat .rv { font:700 1.5rem/1 var(--font-mono); color:var(--ink); }
.result-stat .rl { font-size:.72rem; color:var(--muted); text-transform:uppercase; margin-top:3px; }
.review-item { background:var(--white); border:1px solid var(--border); border-radius:12px; padding:20px; margin-bottom:14px; }
.review-option { padding:8px 12px; border-radius:8px; margin-top:6px; font-size:.88rem; }
.review-option.correct { background:var(--green-bg); color:#065F46; }
.review-option.incorrect { background:var(--red-bg); color:#991B1B; }
.review-tag { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:2px 7px; border-radius:4px; margin-left:8px; }

/* ═══════════════════════════════════════════════════════════════════════
   ADMIN SUBJECTS
   ═══════════════════════════════════════════════════════════════════════ */
/* subject grid styles moved inline to dashboard.php */

/* ═══════════════════════════════════════════════════════════════════════
   DB STATUS PAGE
   ═══════════════════════════════════════════════════════════════════════ */
.db-hero{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:24px}
.db-hero-card{flex:1;min-width:150px;background:var(--white);border:1px solid var(--border);border-radius:12px;padding:16px 18px}
.db-hero-card .val{font:700 1.75rem/1 var(--font-mono);color:var(--ink);margin-bottom:4px}
.db-hero-card .lbl{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.db-hero-card.ok .val{color:var(--green)}
.db-hero-card.warn .val{color:var(--gold)}
.db-hero-card.err .val{color:var(--red)}
.section-head{display:flex;align-items:center;gap:10px;margin:28px 0 12px;border-bottom:2px solid var(--border);padding-bottom:8px}
.section-head h2{margin:0;font-size:1rem}
.tbl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-bottom:20px}
.tbl-card{background:var(--white);border:1.5px solid var(--border);border-radius:10px;padding:14px 16px;display:flex;align-items:center;gap:12px}
.tbl-card.missing{border-color:var(--red);background:var(--red-bg)}
.tbl-icon{font-size:1.5rem}
.tbl-info .name{font-weight:700;font-size:.9rem}
.tbl-info .meta{font-size:.76rem;color:var(--muted);margin-top:2px}
.tbl-badge{margin-left:auto;font:700 .72rem var(--font-mono);padding:3px 9px;border-radius:20px;white-space:nowrap}
.tbl-badge.ok{background:var(--green-bg);color:var(--green)}
.tbl-badge.missing{background:var(--red-bg);color:var(--red)}
.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle}
.status-dot.ok{background:var(--green)}
.status-dot.error{background:var(--red)}
.conn-block{background:var(--white);border:1px solid var(--border);border-radius:10px;padding:14px 18px;font-family:var(--font-mono);font-size:.82rem;line-height:1.8;margin-bottom:20px}
.conn-block span{color:var(--muted)}

/* ═══════════════════════════════════════════════════════════════════════
   MISC
   ═══════════════════════════════════════════════════════════════════════ */
.form-hint{font-size:.76rem;color:var(--muted);margin-top:3px}
.form-group{margin-bottom:14px}
.form-group label{display:block;margin-bottom:4px;font-weight:600;font-size:.86rem}

/* ═══════════════════════════════════════════════════════════════════════
   HAMBURGER NAV — mobile header
   ═══════════════════════════════════════════════════════════════════════ */
.nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px; height: 40px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 9px;
    cursor: pointer;
    padding: 0 10px;
    flex-shrink: 0;
}
.nav-hamburger span {
    display: block;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform .22s ease, opacity .22s ease, width .22s ease;
    width: 100%;
}
/* X state */
.nav-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity: 0; width: 0; }
.nav-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile first
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 700px and below: hamburger nav ─────────────────────────────────── */
@media (max-width: 700px) {
    /* Cards with explicit max-width: let them be full width on mobile */
    .card[style*="max-width"] { max-width: 100% !important; }
    .import-wrap { grid-template-columns: 1fr !important; }


    /* Show hamburger, hide nav by default */
    .nav-hamburger { display: flex; }

    .nav-links {
        display: none;
        position: fixed;
        top: 64px; left: 0; right: 0;
        background: #1a1a2e;
        border-top: 1px solid rgba(255,255,255,.08);
        flex-direction: column;
        padding: 12px 0 20px;
        z-index: 999;
        box-shadow: 0 12px 40px rgba(0,0,0,.3);
        gap: 2px;
    }
    .nav-links.nav-open { display: flex; }

    .nav-links a {
        padding: 12px 24px;
        border-radius: 0;
        font-size: .95rem;
        border-left: none;
        width: 100%;
    }
    .nav-links a:hover { background: rgba(255,255,255,.06); }

    .nav-user-pill {
        margin: 6px 16px 4px;
        border-radius: 10px !important;
        padding: 10px 16px !important;
        background: rgba(255,255,255,.08) !important;
        border-color: rgba(255,255,255,.12) !important;
        width: calc(100% - 32px);
        justify-content: flex-start;
    }
    .nav-cta {
        margin: 6px 16px 0;
        border-radius: 10px !important;
        padding: 12px 16px !important;
        width: calc(100% - 32px);
        text-align: center;
        justify-content: center;
    }
    .nav-logout {
        color: rgba(255,255,255,.4) !important;
        font-size: .85rem !important;
    }

    /* General mobile tweaks */
    .container { padding: 0 16px; }
    main { padding: 24px 0 48px; }
}

/* ── Admin panel mobile ──────────────────────────────────────────────── */
@media (max-width: 860px) {

    /* Stack sidebar below header as a horizontal scrollable pill bar */
    .admin-shell {
        flex-direction: column;
        overflow-x: hidden;
        width: 100%;
    }

    .admin-sidebar {
        width: 100%;
        padding: 0;
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        border-bottom: 1px solid rgba(255,255,255,.08);
        flex-shrink: 0;
        gap: 0;
        scrollbar-width: none;
    }
    .admin-sidebar::-webkit-scrollbar { display: none; }

    /* Hide section titles on mobile */
    .sidebar-title { display: none; }

    .admin-sidebar a {
        padding: 14px 18px;
        white-space: nowrap;
        border-left: none;
        border-bottom: 3px solid transparent;
        font-size: .84rem;
        flex-shrink: 0;
    }
    .admin-sidebar a.active {
        background: rgba(109,40,217,.2);
        border-bottom-color: var(--brand-mid);
        border-left: none;
        color: #fff;
    }
    .admin-sidebar a:hover { border-bottom-color: rgba(255,255,255,.2); }

    .admin-main {
        padding: 16px 14px 40px;
        overflow-x: hidden;
    }

    /* Stat grid: 2 columns on tablet/mobile */
    .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

    /* Two-col layout → stacked */
    .two-col { grid-template-columns: 1fr !important; }

    /* Data table: allow horizontal scroll */
    .data-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        max-width: 100%;
    }
    .data-table { min-width: 420px; }
    .data-table th, .data-table td { padding: 8px 10px; font-size: .8rem; white-space: nowrap; }

    /* Toolbar: wrap */
    .toolbar { flex-wrap: wrap; gap: 8px; }
    .filter-pills { flex-wrap: nowrap; overflow-x: auto; }
}

/* ── 480px: single column stats ─────────────────────────────────────── */
@media (max-width: 480px) {
    .stat-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .stat-card { padding: 12px 10px; }
    .stat-card .stat-val { font-size: 1.4rem; }
    .admin-main { padding: 14px 12px 40px; }
    .page-head h1 { font-size: 1.4rem; }
    .admin-main .card { padding: 16px; }
}