:root{
  --primary:#4f46e5;
  --primary-dark:#3730a3;
  --primary-light:#eef2ff;
  --accent:#06b6d4;
  --success:#16a34a;
  --danger:#dc2626;
  --warning:#f59e0b;
  --bg:#f5f6fb;
  --sidebar-w:260px;
  --text-dark:#1e293b;
  --text-muted:#64748b;
  --radius:14px;
}
*{box-sizing:border-box;}
body{
  font-family:'Plus Jakarta Sans',sans-serif;
  background:var(--bg);
  color:var(--text-dark);
  margin:0;
}
a{text-decoration:none;}

/* ===== LOGIN ===== */
.login-wrapper{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#4f46e5 0%,#06b6d4 100%);
  padding:20px;
}
.login-card{
  background:#fff;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 25px 60px rgba(0,0,0,.25);
  max-width:900px;
  width:100%;
  display:flex;
}
.login-visual{
  flex:1;
  background:linear-gradient(160deg,var(--primary),var(--primary-dark));
  color:#fff;
  padding:50px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.login-visual i{font-size:3.2rem;margin-bottom:15px;}
.login-form-box{flex:1;padding:50px;}

/* ===== APP LAYOUT ===== */
.app-wrapper{display:flex;min-height:100vh;}
.sidebar{
  width:var(--sidebar-w);
  background:#111827;
  color:#cbd5e1;
  position:fixed;
  top:0;left:0;bottom:0;
  overflow-y:auto;
  transition:.25s;
  z-index:1000;
}
.sidebar-brand{
  display:flex;align-items:center;gap:10px;
  padding:22px 24px;
  font-size:1.05rem;font-weight:800;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);
  line-height:1.25;
}
.sidebar-brand span{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.sidebar-brand i{color:var(--accent);font-size:1.6rem;flex-shrink:0;}
.sidebar-logo{width:36px;height:36px;object-fit:contain;border-radius:8px;background:#fff;flex-shrink:0;}
.nav-section{
  padding:16px 24px 6px;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#64748b;
  font-weight:700;
}
.sidebar-nav .nav-link{
  display:flex;align-items:center;gap:12px;
  padding:11px 24px;
  color:#cbd5e1;
  font-weight:500;
  font-size:.92rem;
  border-left:3px solid transparent;
  transition:.15s;
}
.sidebar-nav .nav-link i{font-size:1.05rem;width:20px;}
.sidebar-nav .nav-link:hover{background:rgba(255,255,255,.06);color:#fff;}
.sidebar-nav .nav-link.active{
  background:rgba(79,70,229,.18);
  color:#fff;
  border-left-color:var(--accent);
}

.main-content{
  margin-left:var(--sidebar-w);
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  transition:.25s;
}
body.sidebar-collapsed .sidebar{margin-left:calc(var(--sidebar-w) * -1);}
body.sidebar-collapsed .main-content{margin-left:0;}

.topbar{
  height:68px;
  background:#fff;
  display:flex;
  align-items:center;
  gap:16px;
  padding:0 24px;
  position:sticky;top:0;z-index:900;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.btn-toggle{
  border:none;background:var(--bg);
  width:38px;height:38px;border-radius:10px;
  font-size:1.1rem;color:var(--text-dark);
}
.avatar-circle{
  width:36px;height:36px;border-radius:50%;
  background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;
}
.page-content{padding:26px;flex:1;}
.page-footer{
  text-align:center;padding:16px;color:var(--text-muted);font-size:.82rem;
}

/* ===== CARDS ===== */
.stat-card{
  border:none;
  border-radius:var(--radius);
  padding:22px;
  background:#fff;
  box-shadow:0 4px 18px rgba(15,23,42,.05);
  display:flex;
  align-items:center;
  gap:16px;
  height:100%;
}
.stat-icon{
  width:54px;height:54px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;color:#fff;flex-shrink:0;
}
.stat-value{font-size:1.5rem;font-weight:800;line-height:1.2;}
.stat-label{color:var(--text-muted);font-size:.83rem;font-weight:500;}

.card-modern{
  border:none;border-radius:var(--radius);
  background:#fff;box-shadow:0 4px 18px rgba(15,23,42,.05);
}
.card-modern .card-header{
  background:#fff;border-bottom:1px solid #f1f5f9;
  border-radius:var(--radius) var(--radius) 0 0 !important;
  font-weight:700;padding:18px 22px;
}
.card-modern .card-body{padding:22px;}

.btn-primary{background:var(--primary);border-color:var(--primary);}
.btn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark);}
.btn-soft-primary{background:var(--primary-light);color:var(--primary);border:none;font-weight:600;}
.btn-soft-primary:hover{background:var(--primary);color:#fff;}

.badge-status{padding:6px 12px;border-radius:20px;font-weight:600;font-size:.75rem;}

table.dataTable{border-collapse:separate !important;border-spacing:0;}
.table thead th{
  background:#f8fafc;font-size:.78rem;text-transform:uppercase;
  letter-spacing:.03em;color:var(--text-muted);font-weight:700;
  border-bottom:none !important;
}
.card-modern .table{margin-bottom:0;}

.siswa-search-result{
  border:1px solid #e2e8f0;border-radius:12px;padding:14px 18px;
  cursor:pointer;transition:.15s;margin-bottom:8px;
}
.siswa-search-result:hover{border-color:var(--primary);background:var(--primary-light);}

@media (max-width:991px){
  .sidebar{margin-left:calc(var(--sidebar-w) * -1);}
  .main-content{margin-left:0;}
  body.sidebar-collapsed .sidebar{margin-left:0;}
  .login-visual{display:none;}
}