/* ============================================================
   Kensington English — PORTAL stylesheet
   Shared across: Portal-CRM, Portal-Admin, Portal-Student,
   Portal-Teacher, Portal-Partner and their *-Login pages.
   Companion to assets/site.css (which powers the public site).
   ============================================================ */

/* ── Fonts ─────────────────────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap");

/* ── Design tokens (single source of truth) ───────────────── */
:root{
  --navy:#292662;
  --navy-ink:#1a1846;
  --navy-10:#eceaf3;
  --orange:#F04F25;
  --orange-600:#d8411a;
  --orange-soft:#fff5f2;
  --cream:#FCEFE8;
  --cream-soft:#FBF7F3;
  --paper:#ffffff;
  --line:#e6e1d9;
  --line-soft:#f0ece4;
  --line-strong:#1a1846;
  --ink:#141329;
  --muted:#5b5870;
  --muted-soft:#8a8798;

  --ok:#16a34a;
  --warn:#d97706;
  --danger:#dc2626;
  --info:#2563eb;

  --display:"Fraunces","Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;

  --radius-sm:8px;
  --radius:12px;
  --radius-lg:16px;
  --radius-pill:999px;

  --shadow-sm:0 1px 2px rgba(20,19,41,.05);
  --shadow:0 1px 0 rgba(20,19,41,.04), 0 8px 24px -8px rgba(20,19,41,.10);
  --shadow-lg:0 1px 0 rgba(20,19,41,.04), 0 24px 48px -12px rgba(20,19,41,.18), 0 8px 16px -8px rgba(20,19,41,.08);

  --topbar-h:64px;
}

/* ── Base ─────────────────────────────────────────────────── */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.portal{
  font-family:var(--sans);
  font-size:14px;
  line-height:1.5;
  color:var(--ink);
  background:var(--cream-soft);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100dvh;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit}

/* Focus — visible to keyboard, invisible to mouse */
:where(a,button,input,select,textarea,[tabindex]):focus{outline:none}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--orange);
  outline-offset:2px;
  border-radius:6px;
}

/* ── App shell ────────────────────────────────────────────── */
.app-topbar{
  position:sticky;top:0;z-index:40;
  height:var(--topbar-h);
  background:var(--paper);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;
  padding:0 24px;gap:24px;
}
.app-topbar .brand{
  display:inline-flex;align-items:center;gap:10px;
}
.app-topbar .brand img{height:28px;width:auto}
.app-topbar .brand-name{
  font-family:var(--display);
  font-weight:600;
  font-variation-settings:"opsz" 72;
  font-size:18px;
  color:var(--navy);
  letter-spacing:.01em;
}
.app-topbar .brand-tag{
  font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin-left:8px;
  padding-left:10px;border-left:1px solid var(--line);
}
.app-topbar .topbar-spacer{flex:1}
.app-topbar nav{display:flex;align-items:center;gap:4px}
.app-topbar nav a{
  padding:8px 12px;border-radius:8px;
  font-size:13.5px;font-weight:500;color:var(--muted);
  transition:background .15s,color .15s;
}
.app-topbar nav a:hover{background:var(--cream-soft);color:var(--ink)}
.app-topbar nav a.active{color:var(--navy);background:var(--cream)}

/* User menu (right side of topbar) */
.user-menu{display:inline-flex;align-items:center;gap:10px}
.user-menu .who{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px 6px 6px;border-radius:var(--radius-pill);
  border:1px solid var(--line);background:#fff;
}
.user-menu .avatar{
  width:26px;height:26px;border-radius:50%;
  background:var(--navy);color:#fff;
  display:grid;place-items:center;
  font-size:11px;font-weight:600;letter-spacing:.02em;
}
.user-menu .who-name{font-size:13px;font-weight:500}
.user-menu .who-role{
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);font-weight:600;
}

/* Role badges */
.role-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 10px;border-radius:var(--radius-pill);
  font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;
}
.role-pill.admin{background:#fde4d8;color:#9a2e0a}
.role-pill.teacher{background:var(--navy-10);color:var(--navy)}
.role-pill.student{background:#e6f5ec;color:#1d6e3a}
.role-pill.partner{background:#fde9f3;color:#8a1d56}

/* ── Layout primitives ───────────────────────────────────── */
.app-main{
  max-width:1320px;
  margin:0 auto;
  padding:24px;
}
.app-grid{
  display:grid;
  grid-template-columns:240px 1fr;
  gap:24px;
}
@media (max-width:900px){
  .app-grid{grid-template-columns:1fr}
}

.sidebar{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px;
  height:fit-content;
  position:sticky;top:calc(var(--topbar-h) + 24px);
}
.sidebar h6{
  margin:8px 10px 6px;
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:600;color:var(--muted);
}
.sidebar a{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:8px;
  font-size:13.5px;color:var(--ink);
  transition:background .15s,color .15s;
}
.sidebar a:hover{background:var(--cream-soft)}
.sidebar a.active{background:var(--cream);color:var(--navy);font-weight:600}
.sidebar a .count{
  margin-left:auto;font-size:11.5px;font-weight:600;
  color:var(--muted);background:var(--cream-soft);
  padding:2px 8px;border-radius:var(--radius-pill);
}
.sidebar a.active .count{background:#fff;color:var(--navy)}

/* ── Page header ─────────────────────────────────────────── */
.page-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;margin-bottom:18px;flex-wrap:wrap;
}
.page-head h1{
  margin:0;
  font-family:var(--display);
  font-weight:500;
  font-variation-settings:"opsz" 72;
  font-size:30px;letter-spacing:-.01em;
  color:var(--ink);
}
.page-head .sub{color:var(--muted);font-size:13.5px;margin-top:4px}
.page-head .actions{display:inline-flex;gap:8px;align-items:center}

/* ── Cards ──────────────────────────────────────────────── */
.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
}
.card h3{
  margin:0 0 12px;font-size:14px;font-weight:600;
  letter-spacing:.01em;color:var(--ink);
}
.card .card-sub{font-size:12.5px;color:var(--muted);margin-top:-6px;margin-bottom:12px}

/* KPI cards */
.kpi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px;margin-bottom:20px;
}
.kpi{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 18px;
}
.kpi .label{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);font-weight:600;
}
.kpi .value{
  font-family:var(--display);font-weight:500;
  font-variation-settings:"opsz" 72;
  font-size:30px;line-height:1.1;margin-top:6px;color:var(--ink);
}
.kpi .delta{font-size:12px;margin-top:4px;color:var(--muted)}
.kpi .delta.up{color:var(--ok)}
.kpi .delta.down{color:var(--danger)}
.kpi.hero{
  grid-column:span 2;background:var(--navy);color:#fff;border-color:var(--navy);
}
.kpi.hero .label,.kpi.hero .delta{color:rgba(255,255,255,.7)}
.kpi.hero .value{color:#fff}
@media (max-width:700px){.kpi.hero{grid-column:span 1}}

/* ── Buttons ─────────────────────────────────────────────── */
.btn{
  appearance:none;border:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:var(--radius-pill);
  font-size:13.5px;font-weight:600;letter-spacing:.01em;
  transition:transform .15s,background .15s,color .15s,border-color .15s,box-shadow .15s;
  white-space:nowrap;
}
.btn svg{width:14px;height:14px}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover:not(:disabled){background:var(--navy-ink);transform:translateY(-1px)}
.btn-orange{background:var(--orange);color:#fff}
.btn-orange:hover:not(:disabled){background:var(--orange-600);transform:translateY(-1px)}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover:not(:disabled){border-color:var(--navy);color:var(--navy)}
.btn-danger{background:#fff;color:var(--danger);border:1px solid #f4c4c4}
.btn-danger:hover:not(:disabled){background:var(--danger);color:#fff}
.btn-sm{padding:7px 12px;font-size:12.5px}
.btn-lg{padding:13px 22px;font-size:14.5px}
.icon-btn{
  width:34px;height:34px;padding:0;border-radius:8px;
  background:#fff;border:1px solid var(--line);color:var(--ink);
  display:inline-grid;place-items:center;cursor:pointer;
  transition:background .15s,border-color .15s;
}
.icon-btn:hover{background:var(--cream-soft);border-color:var(--navy)}
.icon-btn svg{width:16px;height:16px}

/* ── Forms ───────────────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--muted);
}
.field input,.field select,.field textarea{
  font:inherit;font-size:14px;color:var(--ink);
  padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:#fff;
  transition:border-color .15s,box-shadow .15s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(41,38,98,.12);
}
.field .hint{font-size:11.5px;color:var(--muted)}
.field .err{font-size:12px;color:var(--danger)}

/* ── Tables ──────────────────────────────────────────────── */
.table-wrap{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;
}
.table-toolbar{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;border-bottom:1px solid var(--line);
  background:var(--cream-soft);flex-wrap:wrap;
}
.table-toolbar .search{
  flex:1;min-width:200px;
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:7px 10px;
}
.table-toolbar .search input{
  border:0;outline:0;flex:1;font-size:13.5px;background:transparent;
}
table.app{
  width:100%;border-collapse:collapse;font-size:13.5px;
}
table.app th{
  text-align:left;padding:10px 14px;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;color:var(--muted);
  background:var(--cream-soft);border-bottom:1px solid var(--line);
}
table.app td{
  padding:12px 14px;border-bottom:1px solid var(--line-soft);
  vertical-align:middle;
}
table.app tbody tr{transition:background .12s;cursor:pointer}
table.app tbody tr:hover{background:var(--cream-soft)}
table.app tbody tr.selected{background:var(--orange-soft)}
table.app tbody tr:last-child td{border-bottom:0}
table.app .num{text-align:right;font-variant-numeric:tabular-nums}

/* ── Status badges ──────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 9px;border-radius:var(--radius-pill);
  font-size:11px;font-weight:600;letter-spacing:.04em;
}
.badge.ok{background:#e6f5ec;color:#15633a}
.badge.warn{background:#fef3d6;color:#7a4a06}
.badge.danger{background:#fde4e4;color:#8a1313}
.badge.info{background:#e3edfb;color:#1d3f87}
.badge.neutral{background:var(--cream-soft);color:var(--muted)}

/* ── Empty states ───────────────────────────────────────── */
.empty{
  text-align:center;padding:48px 24px;
}
.empty .empty-icon{
  width:56px;height:56px;margin:0 auto 14px;
  border-radius:50%;background:var(--cream);
  display:grid;place-items:center;color:var(--navy);
}
.empty h4{
  margin:0 0 6px;font-family:var(--display);
  font-weight:500;font-size:18px;color:var(--ink);
}
.empty p{margin:0 0 14px;color:var(--muted);font-size:13.5px}

/* ── Modal ──────────────────────────────────────────────── */
.modal-backdrop{
  position:fixed;inset:0;z-index:80;
  background:rgba(20,19,41,.45);
  display:grid;place-items:center;
  padding:24px;
}
.modal{
  background:var(--paper);
  border-radius:var(--radius-lg);
  width:min(560px,100%);
  max-height:88dvh;overflow:auto;
  box-shadow:var(--shadow-lg);
  padding:24px;
}
.modal h3{
  margin:0 0 6px;font-family:var(--display);font-weight:500;
  font-size:22px;color:var(--ink);
}
.modal .modal-sub{color:var(--muted);font-size:13.5px;margin-bottom:18px}
.modal-actions{
  display:flex;justify-content:flex-end;gap:8px;margin-top:18px;
}
@media (max-width:600px){
  .modal-backdrop{align-items:flex-end;padding:0}
  .modal{
    width:100%;max-width:100%;
    border-bottom-left-radius:0;border-bottom-right-radius:0;
    max-height:92dvh;
  }
}

/* ── Slide-over (detail panel) ──────────────────────────── */
.slideover{
  position:fixed;top:var(--topbar-h);right:0;bottom:0;
  width:min(460px,100%);
  background:var(--paper);
  border-left:1px solid var(--line);
  box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;
  z-index:30;transform:translateX(100%);
  transition:transform .25s ease;
}
.slideover.open{transform:translateX(0)}
.slideover-head{
  padding:16px 20px;border-bottom:1px solid var(--line);
  display:flex;align-items:flex-start;gap:12px;
}
.slideover-body{flex:1;overflow:auto;padding:20px}
@media (max-width:900px){
  .slideover{
    top:auto;left:0;right:0;bottom:0;
    width:100%;height:88dvh;
    border-left:0;border-top:1px solid var(--line);
    border-top-left-radius:var(--radius-lg);
    border-top-right-radius:var(--radius-lg);
    transform:translateY(100%);
  }
  .slideover.open{transform:translateY(0)}
}

/* ── Toasts ─────────────────────────────────────────────── */
.toast-stack{
  position:fixed;bottom:20px;right:20px;z-index:90;
  display:flex;flex-direction:column;gap:10px;
}
.toast{
  background:var(--ink);color:#fff;
  padding:12px 16px;border-radius:var(--radius);
  box-shadow:var(--shadow-lg);font-size:13.5px;
  display:flex;align-items:center;gap:10px;
  min-width:240px;max-width:360px;
}
.toast.ok{background:var(--ok)}
.toast.danger{background:var(--danger)}
.toast.warn{background:var(--warn)}

/* ── Tabs ───────────────────────────────────────────────── */
.tabs{
  display:inline-flex;gap:2px;
  background:var(--cream-soft);
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  padding:4px;
}
.tabs button{
  appearance:none;background:transparent;border:0;cursor:pointer;
  padding:7px 14px;border-radius:var(--radius-pill);
  font-size:13px;font-weight:500;color:var(--muted);
  transition:background .15s,color .15s;
  display:inline-flex;align-items:center;gap:8px;
}
.tabs button:hover{color:var(--ink)}
.tabs button.active{background:#fff;color:var(--navy);font-weight:600;box-shadow:var(--shadow-sm)}
.tabs button .count{
  font-size:11px;font-weight:600;padding:1px 7px;border-radius:var(--radius-pill);
  background:var(--cream);color:var(--muted);
}
.tabs button.active .count{background:var(--orange);color:#fff}

/* ── Login shell (shared by all *-Login pages) ──────────── */
body.portal-login{
  display:grid;place-items:center;min-height:100dvh;
  background:linear-gradient(160deg,var(--cream-soft) 0%,var(--cream) 100%);
  padding:24px;
}
.login-card{
  width:min(420px,100%);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:32px;box-shadow:var(--shadow);
}
.login-card .login-brand{
  display:flex;align-items:center;gap:10px;margin-bottom:20px;
}
.login-card .login-brand img{height:32px}
.login-card h1{
  margin:0 0 4px;font-family:var(--display);font-weight:500;
  font-size:24px;color:var(--ink);
}
.login-card .sub{color:var(--muted);font-size:13.5px;margin-bottom:20px}
.login-card .login-foot{
  margin-top:18px;text-align:center;
  font-size:12.5px;color:var(--muted);
}
.login-card .login-foot a{color:var(--navy);font-weight:600}

/* ============================================================
   Portal mobile shell — student/teacher/partner dashboards
   (.dash-shell) + their sub-pages (.wrap > .top).
   Below 820px: sidebar goes off-canvas behind a hamburger,
   and sub-page headers wrap cleanly instead of overlapping.
   Paired with assets/portal-mobile.js which injects the
   mobile topbar + wires the toggle.
   ============================================================ */
/* Mobile topbar + backdrop are injected on every portal-mobile page,
   but only rendered below the breakpoint. */
.pm-topbar,.pm-backdrop{display:none}

@media (max-width:820px){
  /* ── Dashboard pages (Portal-Student/Teacher/Partner) ── */
  body:has(.dash-shell){padding-top:56px}
  body:has(.dash-shell){overflow-x:hidden}
  .dash-shell{
    grid-template-columns:1fr !important;
    min-height:calc(100dvh - 56px);
  }
  .dash-shell aside.side{
    position:fixed !important;
    left:0;top:0;bottom:0;
    width:min(284px,86vw);
    height:100dvh !important;
    overflow-y:auto !important;
    z-index:61;
    transform:translateX(-100%);
    transition:transform .22s ease;
    box-shadow:0 0 30px rgba(0,0,0,.35);
  }
  body[data-nav-open="true"] .dash-shell aside.side{transform:translateX(0)}

  /* Injected mobile topbar (by portal-mobile.js) */
  .pm-topbar{
    display:flex !important;
    position:fixed;top:0;left:0;right:0;z-index:59;
    height:56px;background:#fff;
    border-bottom:1px solid var(--line);
    align-items:center;gap:12px;
    padding:0 16px;
  }
  .pm-topbar .pm-burger,
  .pm-topbar .pm-signout{
    width:40px;height:40px;border-radius:10px;
    background:var(--cream-soft);border:1px solid var(--line);
    display:grid;place-items:center;cursor:pointer;
    color:var(--navy);flex-shrink:0;
    appearance:none;font:inherit;
  }
  .pm-topbar .pm-burger:hover,
  .pm-topbar .pm-signout:hover{border-color:var(--navy)}
  .pm-topbar .pm-burger svg,
  .pm-topbar .pm-signout svg{width:18px;height:18px}
  .pm-topbar .pm-brand{
    display:flex;align-items:center;gap:9px;
    flex:1;min-width:0;text-decoration:none;color:inherit;
  }
  .pm-topbar .pm-brand svg{width:26px;height:26px;flex-shrink:0}
  .pm-topbar .pm-brand .kw{
    font-family:var(--display);font-weight:500;
    font-size:16px;color:var(--navy);line-height:1.1;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .pm-topbar .pm-brand .role{
    font-size:9px;letter-spacing:.28em;color:var(--orange);
    font-weight:600;text-transform:uppercase;
    display:block;margin-top:3px;
  }

  /* Backdrop when nav is open */
  .pm-backdrop{
    display:block !important;
    position:fixed;inset:0;z-index:58;
    background:rgba(20,19,41,.55);
    opacity:0;pointer-events:none;
    transition:opacity .22s ease;
  }
  body[data-nav-open="true"] .pm-backdrop{opacity:1;pointer-events:auto}

  /* Page's own small-screen header: drop the duplicated icon buttons */
  .dash-shell main.main .topbar .actions .icon-btn[aria-label="Back to main site"]{display:none}
  /* Wrap the topbar action row if the page crams too many buttons in it */
  .dash-shell main.main .topbar .actions{flex-wrap:wrap}

  /* ── Portal sub-pages (Timetable, Homework, Messages, etc.) ── */
  /* Fix the packed .top header so Back / user email / Sign out don't overlap */
  .wrap > .top{flex-wrap:wrap;gap:10px}
  .wrap > .top a.back{flex:0 0 auto;font-size:13px}
  .wrap > .top .user{
    margin-left:auto;gap:8px;
    font-size:12px;flex-shrink:0;
    display:inline-flex;align-items:center;
  }
  .wrap > .top .user > :not(button){
    max-width:150px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .wrap > .top .user button{
    white-space:nowrap;padding:7px 12px;font-size:12.5px;
  }
  .wrap{padding:24px 18px 60px !important}
  .wrap h1{font-size:clamp(28px,7vw,36px) !important;line-height:1.1 !important}

  /* Wide data tables in sub-pages — let them scroll horizontally inside
     their panel rather than overflow the viewport. */
  .wrap .panel:has(>table),
  .wrap .panel:has(>div>table){
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .wrap .panel > table,
  .wrap .panel > div > table{min-width:480px}
}

/* Extra-narrow phones — force single-column for the Partner's dashboard
   grids which otherwise cram two cards into <400px and clip content. */
@media (max-width:560px){
  .dash-shell .kpi-grid,
  .dash-shell .qa-grid,
  .dash-shell .donut-grid,
  .dash-shell .metrics,
  .dash-shell .grid-main,
  .dash-shell .grid-two{
    grid-template-columns:1fr !important;
  }
}

/* ============================================================
   Admin shell — persistent dark sidebar + white workspace.
   Used by: Portal-Admin.html, Portal-CRM.html,
   Portal-Admin-Accounting.html, Portal-Admin-Schedule.html,
   Portal-Admin-ViewAs.html. Any new admin page drops into
   <body class="admin-shell"> and gets the full layout.
   ============================================================ */
body.admin-shell{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--cream-soft);
  display:grid;
  grid-template-columns:236px 1fr;
  min-height:100dvh;
  font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* ── Sidebar ─────────────────────────────────────────────── */
.admin-nav{
  background:linear-gradient(180deg,#181634 0%,#0f0e22 100%);
  color:#fff;
  padding:20px 14px 16px;
  position:sticky;top:0;
  height:100dvh;
  display:flex;flex-direction:column;gap:4px;
  border-right:1px solid rgba(255,255,255,.06);
  z-index:5;
}
.admin-nav .an-brand{
  display:flex;align-items:center;gap:10px;
  padding:4px 10px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
  margin-bottom:12px;
}
.admin-nav .an-brand svg{flex-shrink:0}
.admin-nav .an-brand .an-kw{
  font-family:var(--display);font-weight:600;
  font-variation-settings:"opsz" 72;
  font-size:16px;color:#fff;letter-spacing:.005em;line-height:1;
}
.admin-nav .an-brand .an-tag{
  display:block;
  font-size:9.5px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--orange);font-weight:600;margin-top:4px;
}
.admin-nav .an-section{
  margin:14px 10px 4px;
  font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  font-weight:600;color:rgba(255,255,255,.38);
}
.admin-nav a{
  display:flex;align-items:center;gap:11px;
  padding:10px 12px;border-radius:9px;
  font-size:13.5px;font-weight:500;
  color:rgba(255,255,255,.74);
  transition:background .15s,color .15s,transform .1s;
  position:relative;
}
.admin-nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.admin-nav a.active{
  background:rgba(240,79,37,.14);
  color:#fff;font-weight:600;
}
.admin-nav a.active::before{
  content:"";position:absolute;left:-14px;top:8px;bottom:8px;
  width:3px;background:var(--orange);border-radius:0 2px 2px 0;
}
.admin-nav a svg{
  width:17px;height:17px;stroke-width:1.75;flex-shrink:0;
  color:inherit;opacity:.9;
}
.admin-nav a.active svg{opacity:1;color:var(--orange)}
.admin-nav a .an-count{
  margin-left:auto;font-size:11px;font-weight:600;
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.8);
  padding:2px 8px;border-radius:var(--radius-pill);
}
.admin-nav a.active .an-count{background:var(--orange);color:#fff}

.admin-nav .an-spacer{flex:1}
.admin-nav .an-user{
  border-top:1px solid rgba(255,255,255,.08);
  padding:14px 10px 4px;
  display:flex;align-items:center;gap:10px;
}
.admin-nav .an-user .avatar{
  width:34px;height:34px;border-radius:50%;
  background:var(--orange);color:#fff;
  display:grid;place-items:center;
  font-size:12px;font-weight:600;letter-spacing:.02em;
  flex-shrink:0;
}
.admin-nav .an-user .who{flex:1;min-width:0}
.admin-nav .an-user .who-name{
  font-size:13px;font-weight:600;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.admin-nav .an-user .who-role{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.5);font-weight:600;margin-top:2px;
}
.admin-nav .an-user .icon-btn{
  width:32px;height:32px;border-radius:8px;padding:0;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.8);
  display:grid;place-items:center;cursor:pointer;
  transition:background .15s,color .15s;
  flex-shrink:0;
}
.admin-nav .an-user .icon-btn:hover{background:rgba(240,79,37,.2);color:#fff;border-color:var(--orange)}
.admin-nav .an-user .icon-btn svg{width:15px;height:15px;stroke-width:1.8}

/* Mobile sidebar — collapsible */
.admin-nav-toggle{
  display:none;
  position:fixed;top:12px;left:12px;z-index:60;
  width:40px;height:40px;border-radius:10px;
  background:#fff;border:1px solid var(--line);
  place-items:center;cursor:pointer;
}
.admin-nav-toggle svg{width:18px;height:18px;color:var(--navy)}

@media (max-width:900px){
  body.admin-shell{grid-template-columns:1fr}
  .admin-nav{
    position:fixed;left:0;top:0;bottom:0;
    width:260px;height:100dvh;
    transform:translateX(-100%);
    transition:transform .25s ease;
    box-shadow:0 0 30px rgba(0,0,0,.3);
  }
  body.admin-shell[data-nav-open="true"] .admin-nav{transform:translateX(0)}
  .admin-nav-toggle{display:grid}
  .admin-workspace{padding-top:60px}
}

/* ── Workspace (right column) ────────────────────────────── */
.admin-workspace{
  min-width:0;
  display:flex;flex-direction:column;
}
.admin-topbar{
  position:sticky;top:0;z-index:4;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
  padding:14px 32px;
  display:flex;align-items:center;gap:16px;
}
.admin-crumbs{
  display:flex;align-items:center;gap:8px;
  font-size:13px;color:var(--muted);
  min-width:0;flex:1;
}
.admin-crumbs .sep{opacity:.5}
.admin-crumbs .current{color:var(--ink);font-weight:600}
.admin-topbar .actions{display:inline-flex;gap:8px;align-items:center}
.admin-topbar .search-mini{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--cream-soft);border:1px solid var(--line);
  border-radius:var(--radius-pill);padding:7px 14px;
  font-size:13px;color:var(--muted);
  min-width:220px;
  transition:background .15s,border-color .15s;
}
.admin-topbar .search-mini:hover{background:#fff;border-color:var(--navy-10)}
.admin-topbar .search-mini svg{width:14px;height:14px}
.admin-topbar .search-mini kbd{
  margin-left:auto;font-family:var(--sans);
  font-size:10.5px;font-weight:600;letter-spacing:.05em;
  background:#fff;border:1px solid var(--line);
  padding:1px 6px;border-radius:4px;color:var(--muted);
}
@media (max-width:700px){
  .admin-topbar{padding:12px 16px 12px 60px}
  .admin-topbar .search-mini{display:none}
}

.admin-main{
  padding:28px 32px 48px;
  max-width:1320px;width:100%;
}
@media (max-width:700px){.admin-main{padding:20px 16px 40px}}

.admin-page-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:20px;margin-bottom:22px;flex-wrap:wrap;
}
.admin-page-head .eyebrow{
  display:inline-flex;align-items:center;gap:6px;
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--orange);font-weight:700;margin-bottom:6px;
}
.admin-page-head .eyebrow .live-dot{
  width:6px;height:6px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 0 4px rgba(240,79,37,.18);
  animation:admin-pulse 2s infinite;
}
@keyframes admin-pulse{50%{box-shadow:0 0 0 8px rgba(240,79,37,.04)}}
.admin-page-head h1{
  margin:0;
  font-family:var(--display);font-weight:400;
  font-variation-settings:"opsz" 144;
  font-size:34px;line-height:1.1;letter-spacing:-.015em;
  color:var(--navy);
}
.admin-page-head h1 em{color:var(--orange);font-style:italic;font-weight:300}
.admin-page-head .sub{color:var(--muted);font-size:14px;margin-top:6px;max-width:60ch}
.admin-page-head .actions{display:inline-flex;gap:8px;align-items:center;flex-shrink:0}

/* ── Admin KPI tiles (the "stats" grid) ──────────────────── */
.admin-kpi-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:14px;margin-bottom:24px;
}
.admin-kpi{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px 20px;
  transition:border-color .15s,box-shadow .15s,transform .15s;
  position:relative;overflow:hidden;
}
.admin-kpi:hover{border-color:var(--navy-10);box-shadow:var(--shadow)}
.admin-kpi .label{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);font-weight:600;
  display:flex;align-items:center;gap:6px;
}
.admin-kpi .label svg{
  width:14px;height:14px;color:var(--orange);stroke-width:2;
}
.admin-kpi .value{
  font-family:var(--display);font-weight:500;
  font-variation-settings:"opsz" 72;
  font-size:34px;line-height:1.05;margin-top:10px;color:var(--navy);
}
.admin-kpi .value.skel-val{color:transparent;background:var(--cream-soft);border-radius:6px;width:60px;height:34px}
.admin-kpi .hint{font-size:12px;color:var(--muted);margin-top:6px}

/* ── Admin panels (section containers) ───────────────────── */
.admin-panel{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);
  margin-bottom:18px;overflow:hidden;
}
.admin-panel-head{
  padding:18px 22px 14px;
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
}
.admin-panel-head .title h2{
  margin:0;font-family:var(--display);font-weight:500;
  font-variation-settings:"opsz" 72;
  font-size:18px;color:var(--ink);letter-spacing:-.005em;
}
.admin-panel-head .title p{
  margin:4px 0 0;font-size:13px;color:var(--muted);max-width:64ch;
}
.admin-panel-head .panel-actions{display:inline-flex;gap:8px;align-items:center;flex-shrink:0}
.admin-panel-body{padding:0 22px 20px}
.admin-panel > .admin-table{border-radius:0;border:0;border-top:1px solid var(--line)}
.admin-panel > .admin-table table{font-size:13.5px}

/* ── Admin data tables ──────────────────────────────────── */
.admin-table{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.admin-table-scroll{overflow-x:auto}
.admin-table table{
  width:100%;border-collapse:collapse;font-size:13.5px;
}
.admin-table th{
  text-align:left;padding:11px 16px;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:var(--muted);
  background:var(--cream-soft);
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.admin-table th.num{text-align:right}
.admin-table td{
  padding:13px 16px;
  border-bottom:1px solid var(--line-soft);
  vertical-align:middle;
}
.admin-table td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:500}
.admin-table tr:last-child td{border-bottom:0}
.admin-table tbody tr{transition:background .12s}
.admin-table tbody tr:hover{background:var(--cream-soft)}
.admin-table td strong{font-weight:600;color:var(--ink)}
.admin-table td .sub{font-size:12px;color:var(--muted);margin-top:2px;display:block}
.admin-table td code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11.5px;background:var(--cream-soft);color:var(--muted);
  padding:2px 6px;border-radius:4px;
}

/* ── Chips / status tags ────────────────────────────────── */
.tag{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:var(--radius-pill);
  font-size:11px;font-weight:600;letter-spacing:.02em;
  background:var(--cream);color:var(--navy);
  white-space:nowrap;
}
.tag.ok{background:#e6f5ec;color:#15633a}
.tag.warn{background:#fef3d6;color:#7a4a06}
.tag.danger{background:#fde4e4;color:#8a1313}
.tag.info{background:#e3edfb;color:#1d3f87}
.tag.muted{background:var(--cream-soft);color:var(--muted);border:1px solid var(--line)}
.tag-dot{width:6px;height:6px;border-radius:50%;background:currentColor}

/* ── Admin inline form controls ─────────────────────────── */
.admin-input{
  font:inherit;font-size:13px;color:var(--ink);
  padding:7px 10px;border:1px solid var(--line);
  border-radius:8px;background:#fff;
  transition:border-color .15s,box-shadow .15s;
}
.admin-input:focus{
  outline:none;border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(41,38,98,.1);
}
.admin-input.num{width:90px;text-align:right;font-variant-numeric:tabular-nums}

/* ── Empty state (table / panel) ────────────────────────── */
.admin-empty{
  text-align:center;padding:36px 20px;color:var(--muted);
  font-size:13.5px;
}
.admin-empty .icon{
  width:44px;height:44px;margin:0 auto 10px;
  border-radius:50%;background:var(--cream);
  display:grid;place-items:center;color:var(--navy);
}
.admin-empty .icon svg{width:20px;height:20px}
.admin-empty h4{
  margin:0 0 4px;font-family:var(--display);font-weight:500;
  font-size:15px;color:var(--ink);
}

/* ── Tab nav inside a page (e.g. CRM sub-tabs) ──────────── */
.admin-subtabs{
  display:inline-flex;gap:2px;
  background:var(--cream-soft);
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  padding:4px;margin-bottom:18px;
}
.admin-subtabs a,.admin-subtabs button{
  appearance:none;background:transparent;border:0;cursor:pointer;
  padding:7px 14px;border-radius:var(--radius-pill);
  font-size:12.5px;font-weight:500;color:var(--muted);
  transition:background .15s,color .15s;
  display:inline-flex;align-items:center;gap:6px;
  font-family:inherit;text-decoration:none;
}
.admin-subtabs a:hover,.admin-subtabs button:hover{color:var(--ink)}
.admin-subtabs a.on,.admin-subtabs button.on{
  background:#fff;color:var(--navy);font-weight:600;
  box-shadow:var(--shadow-sm);
}

/* ── Filters row ────────────────────────────────────────── */
.admin-filters{
  display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap;align-items:center;
}
.admin-filters label{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:600;
}

/* ── Utilities ──────────────────────────────────────────── */
.muted{color:var(--muted)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px}
.row{display:flex;align-items:center;gap:10px}
.row.between{justify-content:space-between}
.stack{display:flex;flex-direction:column;gap:10px}
.hide-sm{}
@media (max-width:700px){.hide-sm{display:none!important}}
.skeleton{
  background:linear-gradient(90deg,var(--cream-soft) 0%,#fff 50%,var(--cream-soft) 100%);
  background-size:200% 100%;animation:skel 1.2s infinite;
  border-radius:6px;color:transparent;
}
@keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}}