/* ═══════════════════════════════════════════════════════════════════════
 * Sinh Vũ Admin Shell · Shared chrome cho mọi trang admin.sinhvu.work
 * ═══════════════════════════════════════════════════════════════════════
 *
 * Pattern: Stripe Docs / Linear Docs / Vercel Dashboard
 *   - 1 brand bar sticky top:0 (logo + breadcrumb + actions)
 *   - 1 tabs strip sticky top:54px (subnav module-specific)
 *   - Khi cần auth, mount #adminAuthGate trước nội dung
 *   - Footer mini absolute link về yeucau.sinhvu.work
 *
 * Import sau sinhvu-tokens.css + sinhvu-components.css
 *   <link rel="stylesheet" href="/assets/admin-shell.css">
 *
 * Font roles (chuẩn Sinh Vũ DS):
 *   --sv-font-display: Noto Serif Display  → title narrative + italic emphasis
 *   --sv-font-heading: Noto Sans Display   → ui heading, button, label, NUMBERS
 *   --sv-font-body:    Noto Sans           → body text
 *   --sv-font-mono:    Noto Sans Mono      → eyebrow, label, data, code
 * ═══════════════════════════════════════════════════════════════════════ */

/* ─── RESET nhẹ cho admin shell ─── */
.sv-admin-body{
  font-family:var(--sv-font-body);
  background:var(--sv-color-surface-default);
  color:var(--sv-color-text-primary);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  min-height:100vh;display:flex;flex-direction:column
}
.sv-admin-body :where(svg[viewBox="0 0 24 24"]),
.sv-admin-body :where(.lucide){
  width:1.25em;height:1.25em;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none
}
.sv-admin-body :where(h1,h2,h3,h4){text-wrap:balance}
.sv-admin-body :where(p,li){text-wrap:pretty}

/* ─── BRAND BAR (top, sticky, 54px height) ─── */
.sv-admin-bar{
  position:sticky;top:0;z-index:40;height:54px;
  padding:0 24px;
  background:color-mix(in srgb, var(--sv-color-surface-raised) 92%, transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--sv-color-border-subtle);
  display:flex;align-items:center;gap:14px;flex-wrap:nowrap
}
.sv-admin-bar__brand{
  display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--sv-color-text-primary);flex-shrink:0
}
.sv-admin-bar__brand img{width:28px;height:28px}
.sv-admin-bar__brand-text{
  font-family:var(--sv-font-heading);font-weight:500;font-size:15px;letter-spacing:-0.005em;
  display:flex;align-items:baseline;gap:8px;white-space:nowrap
}
.sv-admin-bar__brand-text em{
  font-family:var(--sv-font-display);font-style:italic;font-weight:500;font-size:13px;
  color:var(--sv-color-text-accent)
}
.sv-admin-bar__crumb{
  font-family:var(--sv-font-mono);font-size:10.5px;font-weight:600;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--sv-color-text-muted);
  flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.sv-admin-bar__crumb-sep{margin:0 8px;opacity:0.6}
.sv-admin-bar__actions{display:inline-flex;align-items:center;gap:8px;flex-shrink:0}
.sv-admin-bar__btn{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--sv-font-mono);font-size:11px;font-weight:600;
  padding:7px 12px;border-radius:999px;border:1px solid var(--sv-color-border-default);
  background:transparent;color:var(--sv-color-text-secondary);text-decoration:none;cursor:pointer;
  text-transform:uppercase;letter-spacing:0.08em;
  transition:color 150ms, border-color 150ms
}
.sv-admin-bar__btn:hover{color:var(--sv-color-text-accent);border-color:var(--sv-color-text-accent)}
.sv-admin-bar__btn--signout:hover{color:var(--sv-color-accent-default);border-color:var(--sv-color-accent-default)}
.sv-admin-bar__btn .lucide{width:14px;height:14px}

/* ─── TABS STRIP (dưới brand bar, sticky top:54px) ─── */
.sv-admin-tabs{
  position:sticky;top:54px;z-index:30;
  background:color-mix(in srgb, var(--sv-color-surface-raised) 88%, transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--sv-color-border-subtle);
  padding:0 24px
}
.sv-admin-tabs__inner{
  max-width:1200px;margin:0 auto;
  display:flex;align-items:center;gap:2px;
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none
}
.sv-admin-tabs__inner::-webkit-scrollbar{display:none}
.sv-admin-tab{
  display:inline-flex;align-items:center;gap:6px;
  padding:14px 14px;
  font-family:var(--sv-font-heading);font-size:13.5px;font-weight:500;
  color:var(--sv-color-text-secondary);text-decoration:none;
  white-space:nowrap;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:color 150ms, border-color 150ms
}
.sv-admin-tab:hover{color:var(--sv-color-text-primary)}
.sv-admin-tab.is-active{
  color:var(--sv-color-text-accent);
  border-bottom-color:var(--sv-color-text-accent);
  font-weight:600
}
.sv-admin-tab .lucide{width:14px;height:14px}

/* ─── AUTH GATE ─── */
.sv-admin-auth{
  max-width:420px;margin:60px auto;padding:36px 32px;
  background:var(--sv-color-surface-raised);
  border:1px solid var(--sv-color-border-subtle);border-radius:16px;text-align:center
}
.sv-admin-auth h1{
  font-family:var(--sv-font-display);font-weight:500;font-size:26px;
  letter-spacing:-0.01em;color:var(--sv-color-text-primary);margin-bottom:6px
}
.sv-admin-auth h1 em{font-style:italic;color:var(--sv-color-text-accent);font-weight:500}
.sv-admin-auth p{font-size:14px;color:var(--sv-color-text-secondary);line-height:1.5;margin-bottom:24px}
.sv-admin-auth input{
  width:100%;padding:12px 16px;font-family:var(--sv-font-body);font-size:15px;
  background:var(--sv-color-surface-sunken);border:1.5px solid var(--sv-color-border-default);
  border-radius:10px;color:var(--sv-color-text-primary);margin-bottom:14px
}
.sv-admin-auth input:focus{outline:none;border-color:var(--sv-color-text-accent)}
.sv-admin-auth button.primary{
  width:100%;padding:12px 18px;
  font-family:var(--sv-font-heading);font-size:14px;font-weight:600;
  background:var(--sv-color-text-primary);color:white;border:0;border-radius:999px;cursor:pointer;
  transition:background 150ms
}
.sv-admin-auth button.primary:hover{background:var(--sv-color-accent-default)}
.sv-admin-auth .hint{
  margin-top:14px;font-family:var(--sv-font-mono);font-size:11px;
  color:var(--sv-color-text-muted);letter-spacing:0.04em
}

/* ─── MAIN container ─── */
.sv-admin-main{
  flex:1;max-width:1200px;width:100%;
  margin:0 auto;padding:32px 24px 60px
}

/* ─── HERO chuẩn ─── */
.sv-admin-hero{margin-bottom:36px}
.sv-admin-hero__label{
  font-family:var(--sv-font-mono);font-size:11px;font-weight:600;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--sv-color-text-muted);
  display:inline-flex;align-items:center;gap:8px;margin-bottom:14px
}
.sv-admin-hero__label .lucide{width:14px;height:14px}
.sv-admin-hero h1{
  font-family:var(--sv-font-display);font-weight:500;font-size:clamp(28px, 4vw, 38px);
  letter-spacing:-0.012em;color:var(--sv-color-text-primary);line-height:1.15;margin-bottom:10px
}
.sv-admin-hero h1 em{font-style:italic;color:var(--sv-color-text-accent);font-weight:500}
.sv-admin-hero__lede{
  font-family:var(--sv-font-display);font-style:italic;font-size:17px;
  color:var(--sv-color-text-secondary);line-height:1.55;max-width:700px
}
.sv-admin-hero__lede strong{font-style:normal;font-weight:600;color:var(--sv-color-text-primary)}

/* ─── STATUS PILLS ─── */
.sv-status-pills{display:inline-flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.sv-status-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:999px;
  font-family:var(--sv-font-mono);font-size:11px;font-weight:600;
  letter-spacing:0.05em;text-transform:uppercase
}
.sv-status-pill--ok{background:color-mix(in srgb, #16a34a 12%, transparent);color:#15803d}
.sv-status-pill--accent{background:color-mix(in srgb, var(--sv-color-text-accent) 10%, transparent);color:var(--sv-color-text-accent)}
.sv-status-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}

/* ─── SECTION H2 chuẩn ─── */
.sv-admin-h2{
  font-family:var(--sv-font-display);font-weight:500;font-size:24px;
  letter-spacing:-0.008em;color:var(--sv-color-text-primary);
  margin:36px 0 18px;line-height:1.2
}
.sv-admin-h2 .en{
  font-family:var(--sv-font-mono);font-weight:500;font-size:13px;
  color:var(--sv-color-text-muted);text-transform:none;letter-spacing:0.02em;margin-left:8px
}

/* ─── KPI STATS — CRITICAL: numbers dùng Sans Display + tabular-nums ─── */
.sv-kpi-grid{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  margin-bottom:40px
}
.sv-kpi{
  padding:18px 20px;background:var(--sv-color-surface-raised);
  border:1px solid var(--sv-color-border-subtle);border-radius:14px;
  position:relative;overflow:hidden
}
.sv-kpi::before{
  content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;
  background:var(--sv-color-text-accent);border-radius:0 3px 3px 0;opacity:0.7
}
.sv-kpi__label{
  font-family:var(--sv-font-mono);font-size:10.5px;font-weight:600;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--sv-color-text-muted);margin-bottom:8px
}
.sv-kpi__value{
  font-family:var(--sv-font-heading);   /* Noto Sans Display, KHÔNG Serif */
  font-weight:600;font-size:32px;
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.01em;color:var(--sv-color-text-primary);line-height:1.1
}
.sv-kpi__value--success{color:#15803d}
.sv-kpi__value .small{font-size:18px;color:var(--sv-color-text-muted);margin-left:4px;font-weight:500}
.sv-kpi__sub{
  font-family:var(--sv-font-display);font-style:italic;font-size:12.5px;
  color:var(--sv-color-text-muted);margin-top:6px;line-height:1.4
}

/* ─── MODULE CARDS GRID ─── */
.sv-modules{
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));margin-bottom:8px
}
.sv-module-card{
  display:flex;flex-direction:column;gap:12px;
  padding:24px 24px 22px;
  background:var(--sv-color-surface-raised);
  border:1px solid var(--sv-color-border-subtle);border-radius:16px;
  text-decoration:none;color:inherit;position:relative;overflow:hidden;
  transition:transform 180ms cubic-bezier(.2,.8,.2,1), border-color 180ms, box-shadow 180ms
}
.sv-module-card:hover{
  transform:translateY(-2px);border-color:var(--sv-color-text-accent);
  box-shadow:0 12px 30px -12px color-mix(in srgb, var(--sv-color-text-primary) 18%, transparent)
}
.sv-module-card__icon{
  width:44px;height:44px;border-radius:12px;
  background:color-mix(in srgb, var(--sv-color-accent-default) 8%, transparent);
  color:var(--sv-color-accent-default);
  display:inline-flex;align-items:center;justify-content:center
}
.sv-module-card__icon .lucide{width:22px;height:22px;stroke-width:2}
.sv-module-card h3{
  font-family:var(--sv-font-heading);font-weight:600;font-size:17px;
  color:var(--sv-color-text-primary);letter-spacing:-0.005em
}
.sv-module-card h3 .en{
  font-family:var(--sv-font-mono);font-weight:500;font-size:12px;
  color:var(--sv-color-text-muted);text-transform:none;letter-spacing:0.02em;margin-left:6px
}
.sv-module-card p{font-size:13.5px;color:var(--sv-color-text-secondary);line-height:1.5;flex:1}
.sv-module-card__arrow{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--sv-font-mono);font-size:11px;font-weight:600;
  letter-spacing:0.1em;text-transform:uppercase;
  color:var(--sv-color-text-accent);margin-top:auto
}
.sv-module-card__arrow .lucide{width:14px;height:14px}
.sv-module-card[data-status]::after{
  position:absolute;top:14px;right:14px;
  font-family:var(--sv-font-mono);font-size:10px;font-weight:700;letter-spacing:0.1em;
  padding:3px 7px;border-radius:6px
}
.sv-module-card[data-status="khach"]::after{
  content:"CHO KHÁCH";
  background:color-mix(in srgb, var(--sv-color-text-accent) 12%, transparent);
  color:var(--sv-color-text-accent)
}
.sv-module-card[data-status="qc"]::after{
  content:"KIỂM TRA";
  background:color-mix(in srgb, #16a34a 12%, transparent);
  color:#15803d
}
.sv-module-card[data-status="beta"]::after{
  content:"BETA";
  background:color-mix(in srgb, var(--sv-color-text-accent) 10%, transparent);
  color:var(--sv-color-text-accent)
}

/* ─── FOOTER mini ─── */
.sv-admin-foot{
  padding:24px 24px;border-top:1px solid var(--sv-color-border-subtle);
  font-family:var(--sv-font-mono);font-size:11px;
  color:var(--sv-color-text-muted);
  text-align:center;letter-spacing:0.05em
}
.sv-admin-foot a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}
.sv-admin-foot a:hover{color:var(--sv-color-text-accent)}

/* ─── FOCUS ring ─── */
.sv-admin-body :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--sv-color-text-accent);outline-offset:2px;border-radius:6px
}

/* ─── PREFERS REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce){
  .sv-admin-body *,.sv-admin-body *::before,.sv-admin-body *::after{
    animation-duration:.01ms !important;transition-duration:.01ms !important
  }
}

/* ─── MOBILE ─── */
@media (max-width:640px){
  .sv-admin-bar{padding:0 16px;gap:10px}
  .sv-admin-bar__brand-text em{display:none}
  .sv-admin-bar__crumb{font-size:10px}
  .sv-admin-bar__btn{padding:6px 10px;font-size:10px}
  .sv-admin-bar__btn span{display:none}
  .sv-admin-tabs{padding:0 16px}
  .sv-admin-main{padding:24px 16px 40px}
  .sv-module-card{padding:20px 18px}
}