/* ============================================================
   SISTEM MANAJEMEN PRAMUKA - SMKS Brantas Karangkates
   CSS v2.0 - Biru SMK Brantas Theme
   ============================================================ */

:root {
  /* SMK Brantas Blue Palette */
  --biru-tua:   #0D47A1;
  --biru:       #1565C0;
  --biru-muda:  #1976D2;
  --biru-light: #E3F2FD;
  --biru-mid:   #BBDEFB;
  --kuning:     #F9A825;
  --kuning-light: #FFF8E1;
  --orange:     #E65100;

  /* Neutral */
  --white:    #ffffff;
  --gray-50:  #F8FAFC;
  --gray-100: #F1F5F9;
  --gray-200: #E2E8F0;
  --gray-300: #CBD5E1;
  --gray-400: #94A3B8;
  --gray-500: #64748B;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1E293B;
  --gray-900: #0F172A;

  /* Status */
  --success: #22C55E;
  --danger:  #EF4444;
  --warning: #F59E0B;
  --info:    #3B82F6;

  /* Layout */
  --sidebar-width:    260px;
  --sidebar-collapsed: 72px;
  --topbar-height:    62px;
  --border-radius:    12px;
  --border-radius-sm: 8px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow:    0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05);
  --transition: all .25s cubic-bezier(.4,0,.2,1);

  /* Theme Light */
  --bg-body:    #EFF4FB;
  --bg-card:    #FFFFFF;
  --bg-sidebar: #0D47A1;
  --text-primary:   #1E293B;
  --text-secondary: #64748B;
  --border-color:   #E2E8F0;
}

[data-theme="dark"] {
  --bg-body:    #0B1120;
  --bg-card:    #131C30;
  --bg-sidebar: #081035;
  --text-primary:   #E2E8F0;
  --text-secondary: #94A3B8;
  --border-color:   #1E2D4A;
  --gray-50:  #131C30;
  --gray-100: #172035;
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:14px; scroll-behavior:smooth; }
body {
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  background:var(--bg-body); color:var(--text-primary);
  line-height:1.6; overflow-x:hidden;
}
a { text-decoration:none; color:inherit; }

/* ── SIDEBAR ─────────────────────────────────────────────── */
.sidebar {
  position:fixed; top:0; left:0;
  width:var(--sidebar-width); height:100vh;
  background:linear-gradient(180deg, #0D47A1 0%, #1565C0 60%, #0D3A8A 100%);
  display:flex; flex-direction:column;
  z-index:1000; transition:var(--transition);
  overflow:hidden;
  box-shadow: 4px 0 24px rgba(13,71,161,.35);
}
.sidebar.collapsed { width:var(--sidebar-collapsed); }

.sidebar-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px; min-height:70px;
  border-bottom:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.15);
}
.sidebar-logo { display:flex; align-items:center; gap:10px; overflow:hidden; }
.sidebar-logo img {
  width:34px; height:34px; object-fit:contain;
  border-radius:6px; flex-shrink:0;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));
}
.logo-text { display:flex; flex-direction:column; white-space:nowrap; overflow:hidden; }
.logo-title { font-size:14px; font-weight:700; color:white; letter-spacing:.5px; }
.logo-sub   { font-size:10px; color:rgba(255,255,255,.55); }

.sidebar-toggle {
  background:rgba(255,255,255,.12); border:none; border-radius:8px;
  color:white; padding:7px 9px; cursor:pointer;
  flex-shrink:0; transition:var(--transition); font-size:17px; line-height:1;
}
.sidebar-toggle:hover { background:rgba(255,255,255,.22); }

.sidebar-menu { flex:1; overflow-y:auto; padding:8px 0; }
.sidebar-menu::-webkit-scrollbar { width:3px; }
.sidebar-menu::-webkit-scrollbar-thumb { background:rgba(255,255,255,.2); border-radius:2px; }

.menu-group { margin-bottom:2px; }
.menu-label {
  display:block; padding:8px 18px 3px;
  font-size:9.5px; font-weight:700;
  color:rgba(255,255,255,.4); letter-spacing:1.5px;
  white-space:nowrap; overflow:hidden; transition:var(--transition);
}
.sidebar.collapsed .menu-label { opacity:0; height:0; padding:0; }

.menu-item {
  display:flex; align-items:center; gap:11px;
  padding:9px 18px; color:rgba(255,255,255,.82);
  font-size:13px; transition:var(--transition);
  position:relative; white-space:nowrap;
  border-left:3px solid transparent;
}
.menu-item:hover { background:rgba(255,255,255,.1); color:white; }
.menu-item.active {
  background:rgba(255,255,255,.15); color:white;
  border-left-color:var(--kuning);
}
.menu-item i { font-size:16px; flex-shrink:0; width:20px; text-align:center; }
.sidebar.collapsed .menu-item span { opacity:0; width:0; overflow:hidden; }
.sidebar.collapsed .menu-item { justify-content:center; padding:11px; gap:0; border-left:none; }
.sidebar.collapsed .menu-item i { font-size:19px; width:auto; }
.sidebar.collapsed .menu-item.active::before {
  content:''; position:absolute; left:0; top:0;
  width:3px; height:100%; background:var(--kuning); border-radius:0 3px 3px 0;
}

.sidebar-footer {
  display:flex; align-items:center; padding:13px 14px;
  border-top:1px solid rgba(255,255,255,.12); gap:10px;
  background:rgba(0,0,0,.15);
}
.user-info { display:flex; align-items:center; gap:9px; flex:1; overflow:hidden; }
.user-avatar {
  width:34px; height:34px; background:var(--kuning);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:14px; color:#0D47A1; flex-shrink:0;
}
.user-detail { display:flex; flex-direction:column; overflow:hidden; }
.user-name { font-size:12px; font-weight:600; color:white; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-role { font-size:10px; color:rgba(255,255,255,.5); }
.btn-logout {
  color:rgba(255,255,255,.55); padding:7px; border-radius:8px;
  transition:var(--transition); font-size:17px; flex-shrink:0;
}
.btn-logout:hover { color:#ef4444; background:rgba(239,68,68,.15); }

/* ── MAIN CONTENT ─────────────────────────────────────────── */
.main-content { margin-left:var(--sidebar-width); min-height:100vh; transition:var(--transition); display:flex; flex-direction:column; }
body.sidebar-collapsed .main-content { margin-left:var(--sidebar-collapsed); }
body.sidebar-collapsed .sidebar { width:var(--sidebar-collapsed); }

/* ── TOPBAR ─────────────────────────────────────────────── */
.topbar {
  height:var(--topbar-height); background:var(--bg-card);
  border-bottom:1px solid var(--border-color);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 22px; position:sticky; top:0; z-index:100;
  box-shadow:var(--shadow-sm);
}
.topbar::after {
  content:''; position:absolute; bottom:0; left:0; right:0;
  height:2px; background:linear-gradient(90deg, var(--biru) 0%, var(--biru-muda) 50%, var(--kuning) 100%);
}
.topbar-left, .topbar-right { display:flex; align-items:center; gap:12px; }
.topbar-toggle {
  background:none; border:none; font-size:21px; cursor:pointer;
  color:var(--text-secondary); padding:7px; border-radius:8px; transition:var(--transition);
}
.topbar-toggle:hover { background:var(--biru-light); color:var(--biru); }
.breadcrumb { display:flex; align-items:center; gap:5px; font-size:13px; color:var(--text-secondary); }
.breadcrumb a { color:var(--biru); }
.breadcrumb a:hover { text-decoration:underline; }
.bc-current { color:var(--text-primary); font-weight:600; }

.search-global {
  display:flex; align-items:center; gap:8px;
  background:var(--gray-100); border:1.5px solid var(--border-color);
  border-radius:10px; padding:7px 13px; transition:var(--transition);
}
.search-global:focus-within { border-color:var(--biru-muda); box-shadow:0 0 0 3px rgba(21,101,192,.12); }
.search-global i { color:var(--text-secondary); font-size:13px; }
.search-global input { border:none; background:none; outline:none; font-size:13px; color:var(--text-primary); width:190px; }

.btn-icon {
  width:36px; height:36px; border-radius:9px;
  border:1.5px solid var(--border-color); background:var(--bg-card);
  color:var(--text-secondary); display:flex; align-items:center;
  justify-content:center; cursor:pointer; font-size:15px; transition:var(--transition);
  position:relative;
}
.btn-icon:hover { background:var(--biru-light); color:var(--biru); border-color:var(--biru-mid); }

.profile-dropdown { position:relative; }
.profile-btn {
  width:36px; height:36px; border-radius:50%;
  border:2px solid var(--biru-muda); background:var(--biru-light);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.profile-btn:hover { border-color:var(--biru); }
.profile-avatar { font-weight:700; font-size:14px; color:var(--biru); }
.profile-menu {
  display:none; position:absolute; right:0; top:46px;
  background:var(--bg-card); border:1px solid var(--border-color);
  border-radius:12px; box-shadow:var(--shadow-lg);
  min-width:195px; padding:8px; z-index:1000;
}
.profile-menu.show { display:block; }
.profile-info { padding:7px 11px; }
.profile-info strong { display:block; font-size:13px; }
.profile-info small { color:var(--text-secondary); font-size:11px; }
.profile-menu hr { border:none; border-top:1px solid var(--border-color); margin:5px 0; }
.profile-menu a {
  display:flex; align-items:center; gap:8px;
  padding:8px 11px; border-radius:7px; font-size:13px;
  color:var(--text-primary); transition:var(--transition);
}
.profile-menu a:hover { background:var(--biru-light); color:var(--biru); }

/* ── PAGE CONTENT ─────────────────────────────────────────── */
.page-content { padding:22px; flex:1; }
.page-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:22px; gap:12px; flex-wrap:wrap; }
.page-title { font-size:21px; font-weight:700; color:var(--text-primary); }
.page-subtitle { font-size:13px; color:var(--text-secondary); margin-top:2px; }
.page-actions { display:flex; gap:8px; flex-wrap:wrap; }

/* ── CARDS ─────────────────────────────────────────────── */
.card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--border-radius); box-shadow:var(--shadow-sm); overflow:hidden; transition:var(--transition); }
.card:hover { box-shadow:var(--shadow); }
.card-header { padding:14px 18px; border-bottom:1px solid var(--border-color); display:flex; align-items:center; justify-content:space-between; }
.card-title { font-size:14px; font-weight:600; color:var(--text-primary); display:flex; align-items:center; gap:7px; }
.card-title i { color:var(--biru); }
.card-body { padding:18px; }
.card-footer { padding:12px 18px; border-top:1px solid var(--border-color); background:var(--gray-50); }
.mb-4 { margin-bottom:16px; } .mb-5 { margin-bottom:24px; }
.mt-4 { margin-top:16px; }   .mt-5 { margin-top:24px; }

/* ── STATS CARDS ─────────────────────────────────────────── */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin-bottom:22px; }
.stat-card {
  background:var(--bg-card); border:1px solid var(--border-color);
  border-radius:var(--border-radius); padding:18px;
  display:flex; align-items:center; gap:14px;
  box-shadow:var(--shadow-sm); transition:var(--transition);
  position:relative; overflow:hidden;
}
.stat-card:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.stat-card::before { content:''; position:absolute; top:0; left:0; height:3px; width:100%; }
.stat-card.blue::before   { background:var(--biru); }
.stat-card.yellow::before { background:var(--kuning); }
.stat-card.green::before  { background:var(--success); }
.stat-card.red::before    { background:var(--danger); }
.stat-icon { width:50px; height:50px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.stat-card.blue   .stat-icon { background:var(--biru-light); color:var(--biru); }
.stat-card.yellow .stat-icon { background:var(--kuning-light); color:#e65100; }
.stat-card.green  .stat-icon { background:#dcfce7; color:#15803d; }
.stat-card.red    .stat-icon { background:#fef2f2; color:var(--danger); }
.stat-value { font-size:26px; font-weight:700; color:var(--text-primary); line-height:1; }
.stat-label { font-size:12px; color:var(--text-secondary); margin-top:3px; }

/* KAS CARDS */
.kas-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(185px,1fr)); gap:13px; }
.kas-card { background:linear-gradient(135deg,#0D47A1,#1565C0); border-radius:12px; padding:16px; color:white; position:relative; overflow:hidden; }
.kas-name   { font-size:11.5px; opacity:.8; margin-bottom:3px; }
.kas-saldo  { font-size:19px; font-weight:700; }
.kas-angkatan { font-size:10.5px; opacity:.65; margin-top:8px; }

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:5px; padding:8px 16px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; border:none; transition:var(--transition); white-space:nowrap; text-decoration:none; font-family:inherit; }
.btn-primary   { background:var(--biru); color:white; }
.btn-primary:hover { background:var(--biru-tua); color:white; transform:translateY(-1px); box-shadow:0 4px 12px rgba(21,101,192,.35); }
.btn-success   { background:var(--success); color:white; }
.btn-success:hover { background:#16a34a; color:white; }
.btn-danger    { background:var(--danger); color:white; }
.btn-danger:hover { background:#dc2626; color:white; }
.btn-warning   { background:#f59e0b; color:white; }
.btn-warning:hover { background:#d97706; color:white; }
.btn-info      { background:var(--info); color:white; }
.btn-info:hover { background:#2563eb; color:white; }
.btn-outline   { background:transparent; border:1.5px solid var(--border-color); color:var(--text-primary); }
.btn-outline:hover { background:var(--biru-light); border-color:var(--biru-mid); color:var(--biru); }
.btn-sm { padding:5px 11px; font-size:12px; border-radius:7px; }
.btn-lg { padding:11px 24px; font-size:14.5px; }
.btn:disabled { opacity:.6; cursor:not-allowed; transform:none !important; }
.w-100 { width:100%; }

/* ── FORMS ─────────────────────────────────────────────── */
.form-group { margin-bottom:14px; }
.form-label { display:block; font-size:13px; font-weight:600; color:var(--text-primary); margin-bottom:5px; }
.required { color:var(--danger); margin-left:2px; }
.form-control {
  width:100%; padding:9px 13px; border:1.5px solid var(--border-color);
  border-radius:8px; font-size:13px; background:var(--bg-card);
  color:var(--text-primary); transition:var(--transition); outline:none; font-family:inherit;
}
.form-control:focus { border-color:var(--biru-muda); box-shadow:0 0 0 3px rgba(21,101,192,.12); }
.form-control:disabled { background:var(--gray-100); cursor:not-allowed; }
select.form-control { cursor:pointer; }
textarea.form-control { resize:vertical; min-height:76px; }
.form-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:13px; }

/* ── TABLES ─────────────────────────────────────────────── */
.table-wrapper { overflow-x:auto; }
.table { width:100%; border-collapse:collapse; font-size:13px; }
.table th { background:linear-gradient(135deg,#0D47A1,#1565C0); color:white; font-weight:600; padding:11px 13px; text-align:left; white-space:nowrap; font-size:12px; }
.table td { padding:10px 13px; border-bottom:1px solid var(--border-color); color:var(--text-primary); vertical-align:middle; }
.table tr:last-child td { border-bottom:none; }
.table tr:hover td { background:var(--biru-light); }
.table tbody tr:nth-child(even) td { background:var(--gray-50); }
.table tbody tr:nth-child(even):hover td { background:var(--biru-light); }

/* ── BADGES ─────────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; gap:3px; padding:3px 9px; border-radius:50px; font-size:11px; font-weight:600; white-space:nowrap; }
.badge-success { background:#dcfce7; color:#15803d; }
.badge-danger  { background:#fee2e2; color:#dc2626; }
.badge-warning { background:#fef3c7; color:#d97706; }
.badge-info    { background:var(--biru-light); color:var(--biru); }
.badge-gray    { background:var(--gray-100); color:var(--gray-600); }
.badge-green   { background:#dcfce7; color:#15803d; }
.badge-blue    { background:var(--biru-light); color:var(--biru-tua); }

/* ── ALERTS ─────────────────────────────────────────────── */
.flash-container { margin-bottom:14px; }
.alert { display:flex; align-items:center; gap:9px; padding:11px 15px; border-radius:9px; font-size:13px; margin-bottom:9px; border:1px solid; position:relative; animation:fadeIn .4s ease; }
.alert-success { background:#dcfce7; border-color:#bbf7d0; color:#15803d; }
.alert-danger  { background:#fee2e2; border-color:#fecaca; color:#dc2626; }
.alert-warning { background:#fef3c7; border-color:#fde68a; color:#92400e; }
.alert-info    { background:var(--biru-light); border-color:var(--biru-mid); color:var(--biru-tua); }
.btn-close-alert { margin-left:auto; background:none; border:none; font-size:17px; cursor:pointer; color:inherit; opacity:.6; line-height:1; padding:0 4px; }
.btn-close-alert:hover { opacity:1; }

/* ── TABS ─────────────────────────────────────────────── */
.tabs { display:flex; gap:3px; border-bottom:2px solid var(--border-color); margin-bottom:18px; }
.tab-btn { padding:9px 17px; background:none; border:none; font-size:13px; font-weight:500; color:var(--text-secondary); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; transition:var(--transition); border-radius:7px 7px 0 0; font-family:inherit; }
.tab-btn:hover { color:var(--biru); background:var(--biru-light); }
.tab-btn.active { color:var(--biru); border-bottom-color:var(--biru); font-weight:700; }
.tab-content { display:none; }
.tab-content.active { display:block; }

/* ── MODAL ─────────────────────────────────────────────── */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:2000; align-items:center; justify-content:center; backdrop-filter:blur(3px); }
.modal-overlay.show { display:flex; }
.modal { background:var(--bg-card); border-radius:15px; box-shadow:0 25px 50px rgba(0,0,0,.25); max-width:540px; width:95%; max-height:90vh; overflow-y:auto; animation:slideUp .28s ease; }
.modal-header { padding:18px 22px; border-bottom:1px solid var(--border-color); display:flex; align-items:center; justify-content:space-between; }
.modal-title { font-size:15px; font-weight:700; }
.modal-close { background:none; border:none; font-size:21px; cursor:pointer; color:var(--text-secondary); line-height:1; padding:3px 7px; border-radius:6px; }
.modal-close:hover { background:var(--gray-100); color:var(--text-primary); }
.modal-body { padding:22px; }
.modal-footer { padding:14px 22px; border-top:1px solid var(--border-color); display:flex; justify-content:flex-end; gap:9px; }

/* ── PROGRESS ─────────────────────────────────────────────── */
.progress { height:7px; background:var(--gray-200); border-radius:50px; overflow:hidden; }
.progress-bar { height:100%; border-radius:50px; background:linear-gradient(90deg,var(--biru),var(--biru-muda)); transition:width .8s ease; }

/* ── ABSENSI ─────────────────────────────────────────────── */
.absensi-grid { display:grid; gap:8px; }
.absensi-row { display:grid; grid-template-columns:36px 1fr 200px 1fr; gap:10px; align-items:center; background:var(--bg-card); border:1.5px solid var(--border-color); border-radius:10px; padding:11px 15px; transition:var(--transition); }
.absensi-row:hover { border-color:var(--biru-muda); }
.absensi-no { width:30px; height:30px; background:var(--biru-light); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700; color:var(--biru-tua); }
.absensi-siswa .nama { font-weight:600; font-size:13px; }
.absensi-siswa .nis  { font-size:11px; color:var(--text-secondary); }
.absensi-status-btns { display:flex; gap:5px; flex-wrap:wrap; }
.status-btn { padding:4px 9px; border-radius:6px; border:1.5px solid var(--border-color); background:none; cursor:pointer; font-size:11px; font-weight:600; transition:var(--transition); color:var(--text-secondary); font-family:inherit; }
.status-btn:hover { border-color:var(--biru-muda); color:var(--biru); }
.selected-hadir     { background:#dcfce7 !important; border-color:var(--success) !important; color:#15803d !important; }
.selected-izin      { background:var(--biru-light) !important; border-color:var(--biru) !important; color:var(--biru-tua) !important; }
.selected-sakit     { background:#fef3c7 !important; border-color:var(--warning) !important; color:#92400e !important; }
.selected-alpha     { background:#fee2e2 !important; border-color:var(--danger) !important; color:#dc2626 !important; }
.selected-dispensasi{ background:#f3e8ff !important; border-color:#8b5cf6 !important; color:#6d28d9 !important; }

/* ── CHARTS ─────────────────────────────────────────────── */
.chart-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); gap:18px; margin-top:18px; }
.chart-container { position:relative; height:270px; }

/* ── LOGIN ─────────────────────────────────────────────── */
.login-page {
  min-height:100vh;
  background:linear-gradient(135deg, #0D47A1 0%, #1565C0 40%, #0A3570 100%);
  display:flex; align-items:center; justify-content:center; padding:18px;
  position:relative; overflow:hidden;
}
.login-page::before {
  content:''; position:absolute; top:-80px; right:-80px;
  width:400px; height:400px; border-radius:50%;
  background:rgba(255,255,255,.04);
}
.login-page::after {
  content:''; position:absolute; bottom:-60px; left:-60px;
  width:300px; height:300px; border-radius:50%;
  background:rgba(249,168,37,.06);
}
.login-card {
  background:white; border-radius:20px;
  padding:42px 38px; width:100%; max-width:420px;
  box-shadow:0 30px 70px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.1);
  animation:slideUp .45s ease; position:relative; z-index:1;
}
.login-logo { text-align:center; margin-bottom:28px; }
.login-logo img {
  width:90px; height:90px; object-fit:contain;
  margin-bottom:12px; filter:drop-shadow(0 4px 8px rgba(0,0,0,.15));
}
.login-logo h1 { font-size:19px; font-weight:700; color:var(--biru-tua); }
.login-logo p  { font-size:12px; color:var(--gray-500); margin-top:3px; }

/* ── UTILITIES ─────────────────────────────────────────────── */
.text-center { text-align:center; } .text-right { text-align:right; }
.text-muted   { color:var(--text-secondary); }
.text-success { color:var(--success); } .text-danger { color:var(--danger); }
.text-warning { color:var(--warning); } .text-info   { color:var(--info); }
.d-flex { display:flex; } .align-center { align-items:center; }
.justify-between { justify-content:space-between; }
.flex-wrap { flex-wrap:wrap; } .gap-2 { gap:8px; } .gap-3 { gap:12px; }
.hidden { display:none !important; } .fade-in { animation:fadeIn .4s ease; }

/* ── SCROLLBAR ─────────────────────────────────────────────── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--gray-300); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--gray-400); }

/* ── ANIMATIONS ─────────────────────────────────────────────── */
@keyframes fadeIn  { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes slideUp { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@keyframes spin    { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }

/* Loading */
.loading-overlay { position:fixed; inset:0; background:rgba(255,255,255,.85); display:flex; align-items:center; justify-content:center; z-index:9999; }
.loading-spinner { width:44px; height:44px; border:4px solid var(--gray-200); border-top-color:var(--biru); border-radius:50%; animation:spin .8s linear infinite; }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media(max-width:1024px) { .chart-grid { grid-template-columns:1fr; } }
@media(max-width:768px) {
  .sidebar { transform:translateX(-100%); width:var(--sidebar-width) !important; }
  .sidebar.mobile-open { transform:translateX(0); }
  .main-content { margin-left:0 !important; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .page-content { padding:14px; }
  .absensi-row { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .search-global input { width:130px; }
  .page-header { flex-direction:column; align-items:flex-start; }
}
@media(max-width:480px) {
  .stats-grid { grid-template-columns:1fr; }
  .login-card { padding:28px 20px; }
}