/* Admin panel stylesheet — extends the main style.css design tokens */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --bg:#ffffff; --bg-soft:#f3f5fb; --bg-dark:#0e1326;
  --ink:#11131a; --ink-soft:#5c6275; --ink-faint:#9aa0b4; --line:#e6e9f2;
  --brand:#3457ff; --brand-dark:#1f36cc; --brand-soft:#eaefff;
  --accent:#ff5c35; --accent-soft:#ffe8e0;
  --correct:#1fae6b; --correct-soft:#e3f8ee;
  --font-display:'Space Grotesk',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
  --radius-lg:20px; --radius:14px; --radius-sm:8px;
  --shadow-sm:0 4px 16px -8px rgba(17,19,26,.12);
  --shadow:0 16px 40px -16px rgba(17,19,26,.18);
  --sidebar:240px;
}

*, *::before, *::after { box-sizing:border-box; }
html, body { height:100%; }
body { margin:0; font-family:var(--font-body); color:var(--ink); background:var(--bg-soft); font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:var(--brand); text-decoration:none; }
h1,h2,h3,h4 { font-family:var(--font-display); line-height:1.15; margin:0 0 .5em; letter-spacing:-0.01em; }
p { margin:0 0 .8em; color:var(--ink-soft); }
img { max-width:100%; display:block; }
:focus-visible { outline:2px solid var(--brand); outline-offset:3px; border-radius:4px; }

/* ── Shell ── */
.admin-shell { display:grid; grid-template-columns:var(--sidebar) 1fr; min-height:100vh; }

/* ── Sidebar ── */
.admin-sidebar {
  background:var(--bg-dark); color:#b9bfd9;
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sidebar-brand {
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:700; font-size:18px;
  color:#fff; padding:24px 20px 20px; border-bottom:1px solid rgba(255,255,255,.07);
}
.sidebar-brand .brand-mark {
  width:34px; height:34px; border-radius:9px;
  background:var(--brand); display:flex; align-items:center; justify-content:center;
  position:relative; flex-shrink:0;
}
.sidebar-brand .brand-mark::after {
  content:''; width:12px; height:12px; border-radius:50%;
  background:var(--accent); border:2px solid var(--bg-dark);
  position:absolute; top:-3px; right:-3px;
}
.sidebar-brand .brand-mark svg { width:16px; height:16px; }
.sidebar-brand small { font-family:var(--font-mono); color:var(--accent); font-size:13px; }

.sidebar-nav { padding:16px 12px; flex:1; }
.sidebar-section { font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:#6e759a; padding:16px 10px 6px; }
.sidebar-nav a {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px; margin-bottom:2px;
  color:#b9bfd9; font-size:14px; font-weight:500;
  transition:background .15s, color .15s;
}
.sidebar-nav a svg { width:17px; height:17px; flex-shrink:0; opacity:.7; }
.sidebar-nav a:hover { background:rgba(255,255,255,.07); color:#fff; }
.sidebar-nav a.active { background:var(--brand); color:#fff; }
.sidebar-nav a.active svg { opacity:1; }

.sidebar-footer { padding:14px 12px; border-top:1px solid rgba(255,255,255,.07); }
.sidebar-footer a { display:flex; align-items:center; gap:8px; color:#6e759a; font-size:13.5px; padding:8px 10px; border-radius:8px; }
.sidebar-footer a:hover { color:#fff; }

/* ── Main area ── */
.admin-main { display:flex; flex-direction:column; min-height:100vh; }
.admin-topbar {
  background:#fff; border-bottom:1px solid var(--line);
  padding:14px 28px; display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:50;
}
.admin-topbar h1 { font-size:19px; margin:0; }
.topbar-actions { display:flex; align-items:center; gap:10px; }
.admin-body { padding:28px; flex:1; }

/* ── Stats row ── */
.admin-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
@media (max-width:1100px) { .admin-stats { grid-template-columns:repeat(2,1fr); } }
.astat {
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 22px;
}
.astat .astat-icon {
  width:40px; height:40px; border-radius:10px;
  background:var(--brand-soft); color:var(--brand);
  display:flex; align-items:center; justify-content:center; margin-bottom:12px;
}
.astat .astat-icon svg { width:19px; height:19px; }
.astat .astat-num { font-family:var(--font-display); font-size:26px; font-weight:700; }
.astat .astat-label { font-size:12.5px; color:var(--ink-faint); margin-top:2px; }

/* ── Card ── */
.acard { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px; margin-bottom:20px; }
.acard-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:10px; }
.acard-head h2 { font-size:17px; margin:0; }

/* ── Table ── */
.atable-wrap { overflow-x:auto; }
.atable { width:100%; border-collapse:collapse; font-size:14px; }
.atable th { text-align:left; padding:10px 14px; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); border-bottom:1px solid var(--line); white-space:nowrap; }
.atable td { padding:11px 14px; border-bottom:1px solid var(--line); color:var(--ink-soft); vertical-align:middle; }
.atable tr:last-child td { border-bottom:none; }
.atable tr:hover td { background:var(--bg-soft); }
.atable td:first-child { color:var(--ink); }
.atable .mono { font-family:var(--font-mono); font-size:12.5px; }

/* ── Form ── */
.aform { display:grid; gap:16px; }
.aform-2 { grid-template-columns:1fr 1fr; }
.aform-3 { grid-template-columns:1fr 1fr 1fr; }
@media (max-width:760px) { .aform-2,.aform-3 { grid-template-columns:1fr; } }
.field { display:flex; flex-direction:column; gap:5px; }
.field label { font-size:13px; font-weight:600; color:var(--ink); }
.field input,.field select,.field textarea {
  padding:10px 13px; font-size:14.5px; border:1px solid var(--line);
  border-radius:var(--radius-sm); font-family:var(--font-body); background:#fff; color:var(--ink);
  transition:border-color .15s;
}
.field input:focus,.field select:focus,.field textarea:focus { outline:none; border-color:var(--brand); }
.field textarea { resize:vertical; min-height:90px; }
.field-full { grid-column:1/-1; }

/* ── Buttons ── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; font-family:var(--font-body); font-weight:600; font-size:14px; padding:10px 20px; border-radius:999px; border:1px solid transparent; cursor:pointer; transition:transform .15s, box-shadow .15s, background .15s, color .15s, border-color .15s; white-space:nowrap; text-decoration:none; }
.btn-primary { background:var(--brand); color:#fff; box-shadow:0 6px 16px -6px rgba(52,87,255,.5); }
.btn-primary:hover { background:var(--brand-dark); transform:translateY(-1px); }
.btn-danger { background:#b3261e; color:#fff; }
.btn-danger:hover { background:#8b1a14; }
.btn-ghost { background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover { border-color:var(--brand); color:var(--brand); }
.btn-sm { padding:7px 14px; font-size:12.5px; }
.btn-xs { padding:4px 10px; font-size:12px; border-radius:6px; }

/* ── Alerts ── */
.alert { padding:12px 15px; border-radius:var(--radius-sm); font-size:14px; margin-bottom:16px; }
.alert-error { background:#fdecec; color:#b3261e; border:1px solid #f6c5c2; }
.alert-success { background:var(--correct-soft); color:#146c44; border:1px solid #b9e8d0; }

/* ── Badge ── */
.badge { display:inline-block; font-family:var(--font-mono); font-size:11px; font-weight:600; padding:3px 8px; border-radius:5px; }
.badge-green { background:var(--correct-soft); color:#146c44; }
.badge-orange { background:var(--accent-soft); color:#b8401d; }
.badge-blue { background:var(--brand-soft); color:var(--brand-dark); }
.badge-gray { background:var(--bg-soft); color:var(--ink-soft); }

/* ── Pagination ── */
.pagination { display:flex; gap:6px; margin-top:16px; flex-wrap:wrap; }
.pagination a,.pagination span { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:8px; font-size:13.5px; font-weight:600; border:1px solid var(--line); color:var(--ink-soft); }
.pagination a:hover { border-color:var(--brand); color:var(--brand); }
.pagination .active { background:var(--brand); color:#fff; border-color:var(--brand); }

/* ── Auth page ── */
.admin-auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg-dark); padding:32px; background-image:radial-gradient(600px 400px at 20% 10%,rgba(52,87,255,.2),transparent 70%),radial-gradient(400px 300px at 80% 90%,rgba(255,92,53,.15),transparent 70%); }
.admin-auth-card { background:#fff; border-radius:var(--radius-lg); padding:40px; max-width:400px; width:100%; box-shadow:var(--shadow); }
.admin-auth-card h1 { font-size:24px; }
.admin-auth-card .sub { color:var(--ink-soft); font-size:14.5px; margin-bottom:22px; }

/* ── Mobile sidebar toggle ── */
@media (max-width:900px) {
  .admin-shell { grid-template-columns:1fr; }
  .admin-sidebar { position:fixed; left:-100%; top:0; bottom:0; z-index:200; transition:left .25s ease; width:var(--sidebar); }
  .admin-sidebar.open { left:0; }
  .sidebar-toggle { display:flex; }
}
@media (min-width:901px) { .sidebar-toggle { display:none !important; } }
.sidebar-toggle { background:none; border:none; cursor:pointer; padding:6px; align-items:center; }
.sidebar-toggle svg { width:24px; height:24px; }
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:190; }
.sidebar-overlay.open { display:block; }