/* =====================================================================
   ABSKENSA — redesign.css  (dimuat SETELAH style.css)
   Mengganti token warna, font, dan tampilan komponen. Tidak mengubah logika.
   ===================================================================== */

/* ---------- 1. TOKEN: ADMIN & GURU ---------- */
:root{
  --bg:#F5F7FF; --surface:#FFFFFF; --surface-2:#EEF2FF;
  --text:#0F1B4C; --text-muted:#4A5578; --border:#DCE3F7;
  --brand:#1D4ED8; --brand-ink:#1E3A8A;
  --accent:#F97316; --accent-strong:#C2410C; --gold:#F6C21C;
  --sidebar:#0B1749; --sidebar-text:#C7D2FE; --sidebar-active:rgba(255,255,255,.10);
  --ring:rgba(29,78,216,.25);
  --r-card:1.25rem; --r-ctl:.8rem;
  --shadow:0 1px 2px rgba(15,27,76,.05), 0 16px 36px -20px rgba(15,27,76,.32);
  --font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

/* ---------- 2. TOKEN: MODE GELAP ---------- */
html.dark{
  --bg:#0A1030; --surface:#111A44; --surface-2:#0E1638;
  --text:#EEF2FF; --text-muted:#A9B4DD; --border:#22306F;
  --brand:#6C8DFF; --brand-ink:#A9BDFF;
  --accent:#FF8A4C; --accent-strong:#D9480F;
  --sidebar:#070C26; --sidebar-text:#AEBBEA; --sidebar-active:#16225A;
  --ring:rgba(108,141,255,.32);
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 12px 28px -14px rgba(0,0,0,.6);
}

/* ---------- 3. TOKEN: SISWA (cream + warna jurusan) ---------- */
/* --brand diisi otomatis oleh JavaScript sesuai jurusan siswa (jangan diubah di sini) */
body.theme-siswa{
  --bg:#FFF7E8;
  --surface:color-mix(in srgb,var(--brand) 5%,#FFFFFF);
  --surface-2:color-mix(in srgb,var(--brand) 11%,#FFF7E8);
  --border:color-mix(in srgb,var(--brand) 20%,#EADFC8);
  --text:#2A2118; --text-muted:#6B5F4E;
  --brand-ink:color-mix(in srgb,var(--brand) 72%,#000);
  --accent:var(--brand); --accent-strong:var(--brand);
  --sidebar:color-mix(in srgb,var(--brand) 84%,#000);
  --sidebar-text:#FBEFD6; --sidebar-active:rgba(255,255,255,.14);
  --ring:color-mix(in srgb,var(--brand) 28%,transparent);
  --shadow:0 1px 2px rgba(42,33,24,.05), 0 16px 34px -22px var(--brand);
}

/* ---------- 4. FONT & HIERARKI ---------- */
body{font-family:var(--font);font-size:15px;line-height:1.55;letter-spacing:-.005em;}
h1,h2,h3,.font-display{font-family:var(--font);letter-spacing:-.025em;}
.font-display{font-weight:800;}
.section-title{font-weight:800;font-size:1.05rem;letter-spacing:-.02em;margin:1.6rem 0 .8rem;}

/* ---------- 5. SIDEBAR ---------- */
.side-link{padding:.65rem .85rem;border-radius:.85rem;font-weight:600;}
.side-link:hover{transform:translateX(2px);}
.side-link.active{background:var(--accent-strong);color:#fff;box-shadow:0 12px 22px -14px var(--accent);}
body.theme-siswa .side-link.active{background:rgba(255,255,255,.16);box-shadow:inset 3px 0 0 var(--gold);}

/* ---------- 6. KARTU ---------- */
.surface{border:1px solid var(--border);}
.surface.rounded-2xl,.surface.rounded-xl{border-radius:var(--r-card);}
.shadow-card{box-shadow:var(--shadow);}

/* ---------- 7. TOMBOL ---------- */
.btn{border-radius:var(--r-ctl);padding:.62rem 1.1rem;font-weight:700;min-height:2.5rem;
  transition:transform .15s ease,box-shadow .2s ease,filter .15s ease,background .2s ease;}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-ink));box-shadow:0 12px 24px -14px var(--brand);}
.btn-accent{background:var(--accent-strong);box-shadow:0 12px 24px -14px var(--accent);}
.btn-outline{border:1.5px solid var(--border);}
html.dark .btn-primary{background:var(--brand);color:#0A1030;}
html.dark .btn-accent{color:#fff;}

/* ---------- 8. FORM ---------- */
input.rounded-lg,select.rounded-lg,textarea.rounded-lg{border-radius:var(--r-ctl);border-width:1.5px;}
input::placeholder,textarea::placeholder{color:var(--text-muted);opacity:.65;}

/* ---------- 9. TABEL ---------- */
table thead th{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  color:var(--text-muted);background:var(--surface-2);}
table tbody tr{transition:background .12s ease;}
table tbody tr:hover{background:var(--surface-2);}

/* ---------- 10. BADGE ---------- */
.badge{padding:.25rem .65rem;font-weight:700;letter-spacing:.01em;}

/* ---------- 11. MODAL & TOAST ---------- */
@keyframes rd-fade{from{opacity:0}to{opacity:1}}
@keyframes rd-modal{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.modal-backdrop{animation:rd-fade .18s ease;}
.modal-card{animation:rd-modal .22s cubic-bezier(.2,.8,.2,1);border-radius:1.5rem;}
.toast{border-radius:1rem;box-shadow:0 18px 40px -18px rgba(0,0,0,.45);}

/* ---------- 12. SPLASH SCREEN ---------- */
#splashScreen{background:linear-gradient(160deg,#0B1749,#1D4ED8);}
.splash-logo{color:#1D4ED8;}

/* ---------- 13. KARTU STATISTIK (KPI) ---------- */
.kpi{position:relative;overflow:hidden;padding:1.1rem 1.25rem;border-radius:var(--r-card);
  transition:transform .2s ease,box-shadow .2s ease;}
.kpi::after{content:"";position:absolute;right:-30px;top:-30px;width:104px;height:104px;border-radius:50%;
  background:var(--kpi-c,var(--brand));opacity:.10;}
.kpi:hover{transform:translateY(-3px);}
.kpi-click{cursor:pointer;}
.kpi-icon{width:2.75rem;height:2.75rem;border-radius:.95rem;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--kpi-c,var(--brand)) 14%,transparent);color:var(--kpi-c,var(--brand));}
.kpi-label{margin-top:.85rem;font-size:.78rem;font-weight:700;color:var(--text-muted);}
.kpi-value{font-size:1.9rem;font-weight:800;letter-spacing:-.03em;line-height:1.1;margin-top:.15rem;}

/* ---------- 14. BANNER ADMIN, JALAN PINTAS, CHIP JURUSAN ---------- */
.hero-admin{position:relative;overflow:hidden;display:flex;gap:1.25rem;align-items:center;
  padding:1.5rem 1.75rem;border-radius:1.75rem;margin-bottom:1.25rem;color:#fff;
  background:radial-gradient(120% 150% at 100% 0%,rgba(249,115,22,.55),transparent 55%),
             linear-gradient(135deg,#0B1749,#1D4ED8);}
.hero-admin::after{content:"";position:absolute;right:-50px;bottom:-70px;width:230px;height:230px;
  border-radius:50%;border:30px solid rgba(255,255,255,.07);}
.hero-logos{display:flex;gap:.5rem;padding:.5rem;border-radius:1.1rem;background:rgba(255,255,255,.94);flex-shrink:0;}
.hero-logos img{width:3rem;height:3rem;object-fit:contain;}
.hero-eyebrow{font-size:.8rem;font-weight:600;opacity:.85;}
.hero-title{font-size:clamp(1.4rem,1rem + 1.6vw,2rem);font-weight:800;letter-spacing:-.03em;line-height:1.15;}
.hero-sub{opacity:.88;font-size:.9rem;margin-top:.35rem;max-width:42rem;}

.quick-link{display:flex;align-items:center;gap:.75rem;width:100%;text-align:left;padding:.85rem 1rem;
  border-radius:1rem;font-weight:700;font-size:.9rem;background:var(--surface);border:1px solid var(--border);
  color:var(--text);box-shadow:var(--shadow);transition:transform .15s ease,border-color .15s ease;}
.quick-link svg:first-child{color:var(--accent-strong);}
.quick-link span{flex:1;}
.quick-link svg:last-child{color:var(--text-muted);}
.quick-link:hover{transform:translateY(-2px);border-color:var(--brand);}

.jur-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.75rem;}
.jur-chip{display:flex;align-items:center;gap:.75rem;padding:.75rem .9rem;border-radius:1rem;
  background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--c,var(--brand));}
.jur-chip img{width:2.6rem;height:2.6rem;object-fit:contain;flex-shrink:0;}
.jur-chip b{display:block;font-size:.85rem;font-weight:800;}
.jur-chip span{display:block;font-size:.72rem;color:var(--text-muted);line-height:1.3;}

/* ---------- 15. PENGGANTI CLASS YANG TIDAK BEKERJA ---------- */
.hover-lift{transition:transform .18s ease,box-shadow .2s ease;}
.hover-lift:hover{transform:translateY(-3px);box-shadow:0 0 0 4px var(--ring),var(--shadow);}
html.dark .qr-dot{background:#fff;}

/* ---------- 16. RESPONSIF ---------- */
@media (max-width:640px){
  .kpi{padding:.95rem 1rem;}
  .kpi-value{font-size:1.55rem;}
  .hero-admin{flex-direction:column;align-items:flex-start;padding:1.25rem;}
  table thead th{white-space:nowrap;}
}
@media (pointer:coarse){
  button.w-8.h-8,button.w-9.h-9{width:2.5rem;height:2.5rem;}
}
@media (hover:none){
  .kpi:hover,.hover-lift:hover,.quick-link:hover,.side-link:hover{transform:none;}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}