@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');
/* Presentation-only theme. Attendance statuses keep distinct semantic colors. */
:root{--bg:#08080a;--surface:#13171d;--ink:#f0f1f3;--muted:#a3aab5;--line:#2a303a;--navy:#101722;--navy-2:#23324a;--primary:#e3c765;--accent:#d4af37;--hadir:#63cf97;--terlambat:#efc269;--alpha:#f28d9a;--izin:#91b8fa;--sakit:#bc9af5;--radius:16px;--shadow:0 12px 34px #0003;--font:Poppins,"Segoe UI",system-ui,sans-serif;color-scheme:dark}
body{background:radial-gradient(ellipse at 92% 0,#d4af370d,transparent 48%),repeating-linear-gradient(125deg,transparent 0 119px,#d4af3704 120px,transparent 121px),var(--bg);font-size:13px}
h1,h2,h3,h4{letter-spacing:-.025em}
.sidebar{width:256px;height:100dvh;background:linear-gradient(180deg,#141d2a,#0b0e13);border-right:1px solid #d4af3724}
.sidebar .brand{padding:27px 22px 22px;gap:14px}.warjok-mark{width:54px;height:38px;object-fit:contain}.sidebar .brand b{font-size:20px;letter-spacing:.1em}.sidebar .brand span{font-size:8px;letter-spacing:.15em;color:var(--accent)}
.school-identity{display:flex;gap:10px;align-items:center;margin:16px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#ffffff03;min-width:0}.school-identity .logo{width:32px;height:32px;border-radius:6px;object-fit:contain!important;flex-shrink:0}.school-identity b{font-size:11px;display:block;overflow-wrap:anywhere}.school-identity span{font-size:9px;display:block;color:var(--muted)}
.nav{padding:0 12px 14px}.nav .group{color:#8190a5;letter-spacing:.15em;font-size:9px}.nav a{font-size:12px;padding:10px 12px;margin-bottom:4px;color:#b7c0ce;border-radius:10px}.nav a.active{background:linear-gradient(90deg,#d4af3724,#d4af3708);border-left-color:var(--accent);color:#f0d77e}.nav a:hover{background:#ffffff07;color:#fff}.nav .ic{font-size:13px}.foot{color:var(--muted)!important}.foot span{font-size:10px;color:#748196}
.topbar{height:76px;background:#0c0f14ed;backdrop-filter:blur(16px);padding:0 28px}.topbar .page-title{font-size:17px}.topbar .user .av{background:#d4af371a;border:1px solid #d4af3750;color:#e3c765}.content{padding:28px;max-width:1440px}
.eyebrow{font-size:10px;font-weight:600;letter-spacing:.17em;color:var(--accent);margin:0 0 10px}.dashboard-welcome{padding:26px 28px;margin-bottom:24px;border:1px solid #d4af3730;border-radius:20px;background:radial-gradient(ellipse at 90% 0,#d4af3714,transparent 70%),linear-gradient(120deg,#19212e,#11151b)}.dashboard-welcome h2{font-size:26px;margin-bottom:8px}.dashboard-welcome .muted{font-size:12px}
.card,.stat{background:linear-gradient(145deg,#171c24,#11151b);border-color:#ffffff12}.card-head{gap:12px;flex-wrap:wrap}.stat{padding:20px;min-width:0}.stat .val{font-size:32px;font-weight:600}.stat.s-total .bar{background:var(--accent)}.stat.s-total .val{color:var(--primary)}.stat .bar{width:3px}.stats{gap:14px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
table.tbl{font-size:12px}table.tbl th{background:#1b222d;color:#b6bfcd;font-size:10px;padding:14px 12px}table.tbl td{padding:14px 12px}table.tbl tbody tr:hover{background:#ffffff04}.table-wrap{max-width:100%;border-radius:0 0 16px 16px}table.tbl tr[style*="background"]{background:#1a202a!important}
.btn{min-height:38px;border-radius:10px;font-size:12px;padding:10px 16px;justify-content:center}.btn-primary,.btn-accent{background:linear-gradient(135deg,#e3c765,#d4af37);color:#101318;box-shadow:0 6px 18px #d4af3710}.btn-primary:hover,.btn-accent:hover{background:#ecd27b;color:#101318}.btn-ghost{background:#1b222d;color:#dce1e8;border-color:#35404f}.btn-ghost:hover{background:#263144}.btn-danger{background:#381d25;border-color:#70313f;color:#ffb1bd}.btn-danger:hover{background:#522333}.btn-sm{min-height:30px;font-size:11px;padding:7px 11px}
.form-row label{color:#cbd2dd;font-size:12px}.form-control{background:#0c1016;color:#e7ebf1;border-color:#35404f;font-size:13px;padding:12px}.form-control:focus{border-color:#d4af37;box-shadow:0 0 0 3px #d4af3719}input,select,textarea,button{font-family:var(--font)}input[type=checkbox],input[type=radio]{accent-color:#d4af37}
.pill.hadir,.alert-success{background:#123528;color:#9de5bd;border-color:#2a6548}.pill.terlambat,.alert-warning{background:#3b3017;color:#f4d591;border-color:#705b29}.pill.alpha,.alert-danger{background:#391f28;color:#ffb6c1;border-color:#763545}.pill.izin,.pill.cuti,.alert-info{background:#1b2c47;color:#adcafa;border-color:#385b87}.pill.sakit{background:#302245;color:#d4b9fa}.pill.dinas{background:#173735;color:#9cddd4}.pill.libur{background:#252e3b;color:#b1bdce}
.login-wrap{grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);gap:70px;align-content:center;padding:60px max(28px,calc((100vw - 1120px)/2));background:radial-gradient(ellipse at 85% 25%,#d4af371a,transparent 48%),repeating-linear-gradient(125deg,transparent 0 119px,#d4af3708 120px,transparent 121px),linear-gradient(140deg,#121a26,#08080a 65%)}
.login-intro{max-width:600px}.login-wordmark{display:flex;align-items:center;gap:16px;margin-bottom:64px}.login-wordmark img{width:74px;height:48px;object-fit:contain}.login-wordmark strong{font-size:26px;letter-spacing:.12em}.login-intro h1{font-size:clamp(30px,3.8vw,48px);line-height:1.2;margin-bottom:22px}.login-intro h1 span{color:#e3c765}.login-intro>p:not(.eyebrow){font-size:14px;color:#aab4c3;line-height:1.85;max-width:46ch}.login-features{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}.login-features span{font-size:10px;border:1px solid #d4af3730;border-radius:999px;padding:7px 12px;color:#ccb777}
.login-card{max-width:420px;padding:36px;border:1px solid #d4af3735;border-radius:24px;background:linear-gradient(150deg,#1b222d,#10141b);box-shadow:0 24px 70px #0007}.login-card .logo{object-fit:contain!important}.login-card h2{font-size:21px;margin-bottom:10px}.login-card .sub{line-height:1.7}.login-card .btn{min-height:44px;margin-top:12px}
.login-wrap:not(:has(.login-intro)){grid-template-columns:1fr}
.menu-toggle{color:var(--primary);background:#171d27}.donut::after{background:var(--surface)!important}#cycleList,#cycleList>div{background:#171e28!important;color:var(--ink)}
.backdrop.show{backdrop-filter:blur(4px)}:focus-visible{outline:2px solid #e3c765;outline-offset:4px}
@media(max-width:1000px){.login-wrap{gap:32px;padding:40px 28px}.content{padding:22px}.login-wordmark{margin-bottom:34px}}
@media(max-width:860px){.sidebar{left:-270px}.topbar{padding:0 18px}.login-wrap{grid-template-columns:1fr;padding:32px 20px;gap:28px}.login-intro{width:100%;max-width:420px}.login-intro h1{font-size:29px}.login-wordmark{margin-bottom:24px}.login-features{display:none}.login-card{padding:28px;width:100%}}
@media(max-width:520px){.content{padding:16px}.topbar{height:auto;min-height:72px;gap:10px;flex-wrap:wrap;padding:12px 16px}.topbar .page-title{font-size:14px}.topbar .user{font-size:11px;gap:8px}.topbar .user .av{display:none}.dashboard-welcome{padding:20px}.dashboard-welcome h2{font-size:22px}.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.stat{padding:15px}.stat .val{font-size:26px}.stat .lbl{font-size:11px}.card .card-body{padding:16px}.card .card-head{padding:14px 16px}.card .card-head h3{font-size:13px}.login-intro>p:not(.eyebrow){font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}html{scroll-behavior:auto}}