/* ============================================================
   Meckly Centre — theme v2, light "FAN Analysis" reference style
   Shared by every admin page. Edit here, not per-page, so the
   look never drifts page to page.

   STANDING RULE: no font-size below 12px anywhere in this file
   or in any page that links it.
   ============================================================ */

:root{
  /* CANDY_PALETTE_OVERHAUL_V1 — 27 Aug 2026, her sampled colours from a
     reference image, plus #008FEB as primary. Semantic variable NAMES kept
     the same (--pink, --orange, --amber) so every existing page/class that
     already references them repaints automatically — only the VALUES moved. */
  --brand:#008FEB;--brand-d:#0070BD;
  --sidebar-1:#131B3A;--sidebar-2:#0C1226;--sidebar-active:#008FEB;
  --bg1:#faf6ef;--bg2:#fffdfa;--bg3:#f5efe5;
  --bd:rgba(40,32,20,.18);--bd2:rgba(40,32,20,.28);--bd3:rgba(40,32,20,.40);
  --txt:#1c2438;--txt2:rgba(28,36,56,.95);--muted:rgba(28,36,56,.67);--faint:rgba(28,36,56,.45);
  --green:#2CBA61;--green-s:#e3f7ea;
  --purple:#8b7cf0;--purple-s:#efecfe;
  --pink:#EF5C93;--pink-s:#fdeaf1;
  --orange:#F79B84;--orange-s:#feefe9;
  --blue:#008FEB;--blue-s:#e5f3fd;
  --red:#ef5f6f;--red-s:#fdeaec;
  --amber:#FFD044;--amber-s:#fff8e5;
  /* --mono repointed from JetBrains Mono to Space Grotesk — numbers are
     sans now, not monospace, per her explicit instruction. Falls back to
     Inter bold until the real Space Grotesk .woff2 files are added (see
     fonts.css) so nothing breaks in the meantime. */
  --mono:'Space Grotesk','Inter',sans-serif;
  --font-display:'Space Grotesk','Inter',sans-serif;
  --r:20px;--r2:16px;--r3:12px;
  --shadow: 0 10px 26px rgba(10,10,10,.10);
}

*,*::before,*::after{box-sizing:border-box;}
body{
  font-family:'Inter','Segoe UI',system-ui,sans-serif;
  background:var(--bg1);color:var(--txt);
  -webkit-font-smoothing:antialiased;font-weight:400;letter-spacing:-.005em;
  font-size:13px;
}

/* ── App shell: fixed sidebar + scrolling main ── */
.app-shell{display:flex;min-height:100dvh;}
.sidebar{
  width:236px;flex-shrink:0;min-height:100dvh;position:sticky;top:0;align-self:flex-start;
  background:linear-gradient(180deg,var(--sidebar-1),var(--sidebar-2));
  color:#fff;padding:24px 18px;display:flex;flex-direction:column;
}

/* ── MOBILE_V1 — hamburger + slide-in drawer under 880px ── */
.mobile-menu-btn{
  display:none;width:36px;height:36px;border-radius:10px;background:var(--bg3);
  align-items:center;justify-content:center;font-size:16px;color:var(--txt2);
  border:none;cursor:pointer;flex-shrink:0;
}
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(20,28,48,.45);z-index:140;}
.sidebar-backdrop.open{display:block;}
.sidebar-close{display:none;background:none;border:none;color:rgba(255,255,255,.75);font-size:18px;cursor:pointer;position:absolute;top:18px;right:16px;}

@media(max-width:880px){
  .sidebar{
    position:fixed;top:0;left:0;height:100dvh;z-index:150;width:250px;
    transform:translateX(-100%);transition:transform .22s ease;box-shadow:0 0 40px rgba(0,0,0,.28);
  }
  .sidebar.open{transform:translateX(0);}
  .sidebar-close{display:block;}
  .mobile-menu-btn{display:flex;}
  .page{padding:20px 16px 44px;}
  .topbar{padding:0 16px;gap:10px;}
}
.sidebar-brand{font-size:15px;font-weight:700;letter-spacing:-.01em;margin-bottom:28px;display:flex;align-items:center;gap:9px;}
.sidebar-brand-mark{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:15px;}
.sidebar-user{display:flex;flex-direction:column;align-items:center;text-align:center;padding:6px 4px 22px;border-bottom:1px solid rgba(255,255,255,.16);margin-bottom:18px;}
.sidebar-avatar{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:10px;}
.sidebar-user-name{font-size:13px;font-weight:600;}
.sidebar-user-sub{font-size:12px;color:rgba(255,255,255,.68);margin-top:2px;}
.sidebar-nav{display:flex;flex-direction:column;gap:2px;flex:1;}
.sidebar-link{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r3);border:1.5px solid transparent;
  color:rgba(255,255,255,.62);text-decoration:none;font-size:13px;font-weight:500;white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s;
}
.sidebar-link:hover{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.18);}
.sidebar-link.active{background:var(--sidebar-active);color:#fff;font-weight:600;border-color:rgba(255,255,255,.9);box-shadow:0 6px 16px rgba(0,143,235,.35);}
.sidebar-link .ic{width:16px;text-align:center;font-size:13px;}
.sidebar-foot{padding-top:14px;margin-top:8px;border-top:1px solid rgba(255,255,255,.16);}
.sidebar-foot .sidebar-link{color:rgba(255,255,255,.68);}

/* ── Main area ── */
.main-area{flex:1;min-width:0;padding-top:60px;}
.topbar{
  height:60px;background:var(--bg2);border-bottom:1px solid var(--bd);
  display:flex;align-items:center;padding:0 28px;gap:14px;position:fixed;top:0;left:236px;right:0;z-index:30;
}
@media(max-width:880px){.topbar{left:0;}}
.topbar-back{color:var(--muted);font-size:13px;text-decoration:none;}
.topbar-back:hover{color:var(--txt);}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:14px;}
.topbar-icon{width:34px;height:34px;border-radius:50%;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--muted);cursor:pointer;}
.topbar-time{font-family:var(--mono);font-size:12px;color:var(--muted);}
.page{max-width:1240px;margin:0 auto;padding:28px 28px 48px;}
.page-eyebrow{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brand);margin-bottom:6px;}
.page-title{font-family:var(--font-display);font-size:23px;font-weight:700;letter-spacing:-.02em;margin-bottom:5px;color:var(--txt);}
.page-sub{font-size:13px;color:var(--muted);max-width:600px;}
.section-label{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:26px 0 14px;display:flex;align-items:center;justify-content:space-between;}

/* ── Icon-badge stat cards (the reference's colourful top-row cards) ── */
.badge-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px;}
@media(max-width:1000px){.badge-row{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.badge-row{grid-template-columns:1fr;}}
.badge-card{border-radius:var(--r2);padding:16px 18px;display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;transition:transform .15s,box-shadow .15s;cursor:pointer;}
.badge-card:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(20,28,48,.18);}
.badge-card.green{background:linear-gradient(135deg,#4ED07E,#2CBA61);}
.badge-card.purple{background:linear-gradient(135deg,#a78bfa,#7c6cf0);}
.badge-card.pink{background:linear-gradient(135deg,#F7799F,#EF5C93);}
.badge-card.orange{background:linear-gradient(135deg,#FAB49F,#F79B84);}
.badge-card.blue{background:linear-gradient(135deg,#33A9EE,#008FEB);}
.badge-icon{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.24);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;}
.badge-val{font-family:var(--mono);font-size:18px;font-weight:700;letter-spacing:-.01em;}
.badge-lbl{font-size:12px;color:rgba(255,255,255,.88);margin-top:1px;}

/* ── White panel cards (department nav cards, tables, etc) ── */
.panel-card{background:var(--bg2);border:1.5px solid var(--bd2);border-radius:var(--r2);box-shadow:var(--shadow);overflow:hidden;}
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media(max-width:900px){.cards-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.cards-grid{grid-template-columns:1fr;}}
.nav-card{
  background:var(--bg2);border:1.5px solid var(--bd2);border-radius:var(--r2);padding:22px;
  cursor:pointer;text-decoration:none;display:block;position:relative;color:var(--txt);
  box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s,border-color .15s;
}
.nav-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(28,36,56,.10);border-color:var(--brand);}
.nav-card .card-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:14px;}
.nav-card .card-icon.i-green{background:var(--green-s);color:var(--green);}
.nav-card .card-icon.i-purple{background:var(--purple-s);color:var(--purple);}
.nav-card .card-icon.i-pink{background:var(--pink-s);color:var(--pink);}
.nav-card .card-icon.i-orange{background:var(--orange-s);color:var(--orange);}
.nav-card .card-icon.i-blue{background:var(--blue-s);color:var(--blue);}
.nav-card .card-icon.i-red{background:var(--red-s);color:var(--red);}
.nav-card .card-title{font-family:var(--font-display);font-size:14px;font-weight:700;letter-spacing:-.01em;margin-bottom:5px;color:var(--txt);}
.nav-card .card-desc{font-size:12px;color:var(--muted);line-height:1.6;margin-bottom:14px;}
.nav-card .card-arrow{position:absolute;top:22px;right:22px;font-size:15px;color:var(--faint);}
.nav-card:hover .card-arrow{color:var(--brand);}
.nav-card .card-stats{display:flex;gap:16px;flex-wrap:wrap;}
.nav-card .card-stat{display:flex;flex-direction:column;gap:1px;}
.nav-card .card-stat-val{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--txt);}
.nav-card .card-stat-lbl{font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.05em;}

.tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:999px;border:1.5px solid rgba(0,0,0,.08);}
.tag.live{color:#fff;background:var(--green);}
.tag.wip{color:#5c4a00;background:var(--amber);}

/* ── Donut ring, pure CSS conic-gradient, no chart library ── */
.donut-card{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.donut-ring{
  width:120px;height:120px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;position:relative;
}
.donut-ring::before{content:'';position:absolute;inset:12px;background:var(--bg2);border-radius:50%;}
.donut-center{position:relative;text-align:center;z-index:1;}
.donut-center-val{font-family:var(--mono);font-size:17px;font-weight:700;color:var(--txt);}
.donut-center-lbl{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;}
.donut-legend{display:flex;flex-direction:column;gap:9px;}
.donut-legend-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--txt2);}
.donut-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.donut-legend-val{font-family:var(--mono);font-weight:700;color:var(--txt);margin-left:auto;}

/* ── Tables ── */
table{width:100%;border-collapse:collapse;}
th{text-align:left;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:11px 16px;border-bottom:1.5px solid var(--bd2);}
td{font-size:12.5px;padding:11px 16px 11px 13px;border-bottom:1.5px solid var(--bd);border-left:3px solid transparent;color:var(--txt2);vertical-align:middle;transition:background .12s,border-color .12s;}
tr:hover td{background:var(--bg3);border-left-color:var(--brand);}
tr:last-child td{border-bottom:none;}
.empty{padding:28px 16px;text-align:center;font-size:12px;color:var(--muted);}

/* ── Auth gate ── */
#authGate{position:fixed;inset:0;z-index:200;background:linear-gradient(160deg,var(--sidebar-1),var(--sidebar-2));display:flex;align-items:center;justify-content:center;padding:24px;}
#authGate.hidden{display:none;}
.auth-card{background:var(--bg2);border-radius:20px;padding:40px 36px;width:100%;max-width:380px;text-align:center;box-shadow:0 20px 50px rgba(20,28,48,.25);}
.auth-logo{width:48px;height:48px;border-radius:14px;background:var(--brand);display:flex;align-items:center;justify-content:center;font-size:22px;margin:0 auto 20px;color:#fff;}
.auth-title{font-size:19px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px;color:var(--txt);}
.auth-sub{font-size:12.5px;color:var(--muted);margin-bottom:24px;}
.auth-link{display:inline-block;color:var(--brand);font-size:12.5px;text-decoration:none;font-weight:600;}
.auth-inp{width:100%;height:44px;padding:0 15px;border-radius:var(--r3);border:1px solid var(--bd2);background:var(--bg3);color:var(--txt);font-size:14px;font-family:inherit;outline:none;margin-bottom:12px;}
.auth-inp:focus{border-color:var(--brand);}
.auth-btn{width:100%;height:44px;border:none;border-radius:var(--r3);background:var(--brand);color:#fff;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;}
.auth-btn:hover{background:var(--brand-d);}
.auth-err{font-size:12px;color:var(--red);margin-top:8px;min-height:16px;}

/* ── Buttons — CANDY_PALETTE_OVERHAUL_V1: rounded + shadowed ── */
.btn{border:none;border-radius:var(--r3);font-family:inherit;font-weight:700;cursor:pointer;box-shadow:0 6px 14px rgba(10,10,10,.12);}
.btn-primary{background:var(--brand);color:#fff;font-size:12.5px;padding:9px 16px;}
.btn-primary:hover{background:var(--brand-d);}
.btn-ghost{background:var(--bg3);color:var(--txt2);font-size:12px;padding:7px 12px;border:1px solid var(--bd2);box-shadow:none;}
.btn-ghost:hover{border-color:var(--bd3);color:var(--txt);}