/* =====================================================================
   SiTeman 2.0 — lapisan tema (dimuat SETELAH app.css/siteman.css/calendar.css).
   Hanya mengganti tampilan; kelas HTML tidak berubah. Lepas file ini = kembali ke tema lama.
   Arah: sidebar navy mengambang, aksen kuning, kartu tanpa garis, tombol pil, font Plus Jakarta Sans.
   ===================================================================== */
@font-face{font-family:"Plus Jakarta Sans";src:url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}

:root{
  --navy:#0B2A4D;--navy-deep:#071A33;--navy-soft:#123C66;--sky:#00A0EC;
  --app-bg:#F2F6FA;--surface-soft:#F5F9FC;--border:#E3ECF4;--border-strong:#D3E4F2;
  --radius:20px;--radius-sm:12px;--radius-lg:28px;
  --shadow-xs:0 1px 2px rgba(11,42,77,.04);
  --shadow-sm:0 1px 2px rgba(11,42,77,.04),0 6px 18px rgba(11,42,77,.05);
  --shadow:0 2px 4px rgba(11,42,77,.04),0 14px 34px rgba(11,42,77,.08);
  --shadow-lg:0 24px 60px rgba(7,26,51,.18);
  --sidebar-w:278px;--topbar-h:78px;
}
body{font-family:"Plus Jakarta Sans",Inter,"Segoe UI",system-ui,sans-serif;font-size:14px;letter-spacing:0;word-spacing:.06em}
h1,h2,h3{font-weight:750;letter-spacing:-.015em;word-spacing:.08em}
.eyebrow{color:var(--primary);font-weight:750;letter-spacing:.12em}

/* ---------- latar halaman ---------- */
.app-body{background:radial-gradient(1100px 420px at 70% -120px,rgba(0,160,236,.10),transparent 70%),radial-gradient(700px 300px at 100% 0,rgba(252,204,16,.10),transparent 70%),var(--app-bg);background-attachment:fixed}

/* ---------- sidebar navy mengambang ---------- */
.sidebar{top:14px;bottom:14px;left:14px;width:calc(var(--sidebar-w) - 14px);padding:18px 14px;border:0;border-radius:26px;color:rgba(255,255,255,.72);
  background:radial-gradient(260px 200px at 0 0,rgba(0,160,236,.22),transparent 70%),radial-gradient(220px 180px at 100% 100%,rgba(252,204,16,.12),transparent 70%),linear-gradient(180deg,var(--navy-soft) 0%,var(--navy) 45%,var(--navy-deep) 100%);
  box-shadow:0 20px 50px rgba(7,26,51,.28);scrollbar-color:rgba(255,255,255,.18) transparent}
.sidebar::before{display:none}
.sidebar::after{background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);mask-image:linear-gradient(180deg,#000 0,transparent 220px);-webkit-mask-image:linear-gradient(180deg,#000 0,transparent 220px)}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18)}
.sidebar-brand{justify-content:center;padding:6px 8px 18px}
.sidebar-brand .siteman-logo{height:84px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.25))}
.school-chip{margin:0 2px 6px;border:1px solid rgba(255,255,255,.10);border-radius:16px;background:rgba(255,255,255,.06);color:#fff;box-shadow:none}
.school-chip small,.school-switch-form label,.school-switch-form .school-switch-hint{color:rgba(255,255,255,.55)}
.school-chip strong{color:#fff}.school-icon{background:rgba(0,160,236,.18);color:#7FD3FA}
.school-switch-form select{background-color:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.14);border-radius:12px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
.school-switch-form select:hover,.school-switch-form select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(252,204,16,.18)}
.school-switch-form option{background:var(--navy);color:#fff}
.nav-label{color:rgba(255,255,255,.38);letter-spacing:.18em;margin:20px 0 8px}
.nav-item{min-height:44px;border-radius:14px;color:rgba(255,255,255,.74);font-weight:600;font-size:13px}
.nav-item i{color:rgba(255,255,255,.5)}
.nav-item::before{display:none}
.nav-item:hover:not(.disabled){color:#fff;background:rgba(255,255,255,.07);box-shadow:none;transform:translateX(2px)}
.nav-item:hover:not(.disabled) i{color:var(--accent)}
.nav-item.active{color:var(--navy-deep);background:var(--accent);box-shadow:0 10px 24px rgba(252,204,16,.28);font-weight:750}
.nav-item.active i{color:var(--navy-deep)}
.nav-item small,.nav-count{background:var(--sky);color:#fff}
.nav-item.active small,.nav-item.active .nav-count{background:var(--navy);color:#fff}
.sidebar-bottom{border-top:1px solid rgba(255,255,255,.10);color:rgba(255,255,255,.7)}
.sidebar-bottom strong{color:#fff}.sidebar-bottom small{color:rgba(255,255,255,.5)}
.sidebar-close{background:rgba(255,255,255,.1)!important;color:#fff;border-color:rgba(255,255,255,.16)}

/* ---------- area utama & topbar ---------- */
.app-main{width:calc(100% - var(--sidebar-w) - 14px);margin-left:calc(var(--sidebar-w) + 14px)}
.topbar{height:var(--topbar-h);padding:0 34px;border-bottom:0;background:rgba(242,246,250,.78)}
body.is-scrolled .topbar{box-shadow:0 1px 0 var(--border),0 10px 30px rgba(11,42,77,.06)}
.topbar-title .eyebrow{color:var(--sky);font-size:8.5px}
.topbar-title h2{font-size:18px;font-weight:800}
.icon-button{width:42px;height:42px;border:0;border-radius:14px;background:#fff;box-shadow:var(--shadow-sm);color:var(--navy)}
.icon-button:hover{background:var(--navy);color:var(--accent);box-shadow:var(--shadow)}
.notification-dot{right:10px;top:10px}
.user-chip{padding:5px 14px 5px 5px;border:0;border-radius:999px;background:#fff;box-shadow:var(--shadow-sm)}
.user-chip:hover{box-shadow:var(--shadow)}
.user-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(145deg,var(--sky),var(--primary));box-shadow:0 0 0 2px #fff,0 0 0 4px var(--accent)}
.app-content{padding:22px 34px 34px}
.app-footer{border-top:0;color:#8A9BB0}

/* ---------- judul halaman ---------- */
.page-heading h1{padding-left:0;font-size:30px;font-weight:800;letter-spacing:-.025em}
.page-heading h1::before{display:none}
.page-heading .eyebrow,.panel-heading .eyebrow,.onboarding .eyebrow{display:inline-flex;padding:5px 10px;border-radius:999px;background:var(--primary-soft);color:var(--primary)}

/* ---------- panel & kartu ---------- */
.panel{border:0;border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.panel:hover{box-shadow:var(--shadow)}
.panel-heading{border-bottom:1px dashed var(--border-strong)}
.panel-heading::after{display:none}
.panel-heading h3{font-size:16px;font-weight:800}

.stat-card{border:0;border-radius:22px;padding:22px 22px 20px;min-height:132px;box-shadow:var(--shadow-sm);flex-direction:column;gap:14px}
.stat-card::before{display:none}
.stat-card::after{right:-40px;top:auto;bottom:-50px;width:150px;height:150px;background:radial-gradient(circle,rgba(0,160,236,.10),transparent 70%)}
.stat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.stat-icon{width:46px;height:46px;flex-basis:46px;border-radius:15px;font-size:20px}
.stat-icon.blue{background:var(--sky);color:#fff}.stat-icon.emerald{background:#16a34a;color:#fff}.stat-icon.amber{background:var(--accent);color:var(--navy-deep)}.stat-icon.violet{background:#7c3aed;color:#fff}
.stat-card strong{font-size:34px;font-weight:800}
.stats-grid>.stat-card:first-child{background:radial-gradient(200px 140px at 100% 0,rgba(0,160,236,.35),transparent 70%),linear-gradient(150deg,var(--navy-soft),var(--navy-deep))}
.stats-grid>.stat-card:first-child p,.stats-grid>.stat-card:first-child small{color:rgba(255,255,255,.65)}
.stats-grid>.stat-card:first-child strong{color:#fff}
.stats-grid>.stat-card:first-child .stat-icon{background:var(--accent);color:var(--navy-deep)}
.stats-grid>.stat-card:first-child::after{display:none}

/* ---------- banner sambutan ---------- */
.welcome-banner{border-radius:var(--radius-lg);min-height:290px;padding:38px 44px}
.welcome-banner::before{background:radial-gradient(520px 260px at 82% 50%,rgba(0,160,236,.22),transparent 70%),radial-gradient(260px 200px at 0 100%,rgba(252,204,16,.14),transparent 70%),linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px) 0 0/34px 34px,linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/34px 34px}
.welcome-banner h1{font-size:40px;font-weight:800;letter-spacing:-.025em;word-spacing:.1em}
.welcome-banner .eyebrow{display:inline-flex;padding:6px 12px;border-radius:999px;background:rgba(252,204,16,.14);color:var(--accent)}
.welcome-banner p{color:rgba(255,255,255,.72)}
.orbit{border-color:rgba(0,160,236,.28)}

/* ---------- tombol ---------- */
.button{min-height:42px;padding:10px 20px;border-radius:999px;font-weight:700;box-shadow:none;border-color:var(--border-strong)}
.button:hover{background:var(--primary-soft);border-color:var(--primary-soft);color:var(--primary);box-shadow:none}
.button.primary,.primary-button{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:0 10px 22px rgba(11,42,77,.22)}
.button.primary:hover,.primary-button:hover{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 12px 26px var(--primary-glow)}
.button-white{background:var(--accent);color:var(--navy-deep);box-shadow:0 10px 24px rgba(252,204,16,.32)}
.button.small{min-height:32px;padding:6px 14px;border-radius:999px}
.text-link{color:var(--primary);font-weight:700}

/* ---------- form ---------- */
input,select,textarea{border-radius:12px;background-color:var(--surface-soft);border-color:var(--border)}
input:hover,select:hover,textarea:hover{border-color:var(--border-strong)}
input:focus,select:focus,textarea:focus{background-color:#fff;border-color:var(--sky);box-shadow:0 0 0 4px rgba(0,160,236,.14)}
.input-wrap{border-radius:14px;background:var(--surface-soft);border-color:var(--border)}
.input-wrap:focus-within{background:#fff;border-color:var(--sky);box-shadow:0 0 0 4px rgba(0,160,236,.14)}
.input-wrap input,.input-wrap input:focus,.input-wrap input:hover{background:transparent;border:0;box-shadow:none}

/* ---------- tabel ---------- */
.table-panel{border-radius:var(--radius)}
th{background:#fff;color:#7C8DA3;border-bottom:1px solid var(--border);font-weight:750}
td{border-bottom:1px solid #EEF3F8}
tbody tr:hover td{background:#F3F9FD}
tbody tr:hover td:first-child{box-shadow:inset 3px 0 var(--sky)}
.pager-nav button{border-radius:10px}
.pager-nav button.is-current{background:var(--navy);border-color:var(--navy);box-shadow:inset 0 -2px 0 var(--accent)}

/* ---------- lain-lain ---------- */
.badge{font-weight:700}
.alert{border-radius:16px}
.trend-bar{border-radius:10px 10px 4px 4px;background:linear-gradient(180deg,var(--sky),var(--primary))}
.empty-state>i{border-radius:22px;background:var(--navy);color:var(--accent)}
.initial,.date-tile,.module-number{border-radius:14px}
.onboarding{border:2px dashed #BEE0F6;background:#fff}

/* ---------- halaman masuk: navy penuh, kartu putih mengambang ---------- */
.auth-body,.auth-form-panel{background:transparent}
.auth-body{background:radial-gradient(700px 500px at 15% 20%,rgba(0,160,236,.22),transparent 70%),radial-gradient(600px 400px at 90% 90%,rgba(252,204,16,.14),transparent 70%),linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(160deg,var(--navy-soft),var(--navy-deep) 70%)}
.auth-brand-panel{background:transparent;box-shadow:none;margin:0}
.auth-brand-panel::after{display:none}
.auth-brand-panel h1{letter-spacing:-.03em;word-spacing:.1em}
.auth-lead{color:rgba(255,255,255,.7)}
.security-points span{border-radius:999px;border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.06)}
.login-card{border:0;border-radius:30px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.login-icon{border-radius:16px;background:var(--navy);color:var(--accent);box-shadow:none}
.login-heading h2{font-weight:800}
.auth-footer{color:rgba(255,255,255,.5)}
.primary-button{border-radius:999px}

/* ---------- responsif ---------- */
@media(max-width:820px){
  .sidebar{top:0;bottom:0;left:0;width:var(--sidebar-w);border-radius:0 26px 26px 0}
  .app-main{width:100%;margin-left:0}
  .auth-brand-panel{margin:0}
}
@media(max-width:640px){
  .app-content{padding:18px 15px}.topbar{padding:0 15px}.topbar-title h2{font-size:14px}
  .welcome-banner{padding:26px 24px;min-height:230px}.welcome-banner h1{font-size:30px}
  .stat-card{min-height:118px;padding:16px 14px;gap:10px}.stat-card strong{font-size:26px}
  .page-heading h1{font-size:24px}
}
@media print{.app-body{background:#fff}}
/* ---------- halaman error ---------- */
.error-page{background:radial-gradient(600px 400px at 30% 20%,rgba(252,204,16,.16),transparent 70%),radial-gradient(600px 400px at 80% 90%,rgba(0,160,236,.2),transparent 70%),linear-gradient(160deg,var(--navy-soft),var(--navy-deep) 70%)}
.error-page p{color:rgba(255,255,255,.65)}.error-page a{border-radius:999px}