:root{
  --paper:#F4F6F9;
  --paper-line:#E3E8EF;
  --ink:#2B2A26;
  --ink-soft:#6B7280;
  --teal:#1F5C55;
  --teal-dark:#153F3A;
  --teal-darker:#0F2E2A;
  --amber:#E0A63D;
  --amber-soft:#F6E3BC;
  --red-rule:#B9503F;
  --card:#FFFFFF;
  --danger:#B9503F;
  --ok:#2F7A5A;
  --radius:14px;
  --shadow:0 1px 3px rgba(16,24,40,0.08), 0 1px 2px rgba(16,24,40,0.04);
  --sidebar-w:250px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Manrope',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
h1,h2,h3{font-family:'Fraunces',serif;margin:0;letter-spacing:-0.01em;}
h4{font-family:'Fraunces',serif;margin:0;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;font-size:15px;}
a{color:inherit;}

/* ================= LAYOUT: SIDEBAR + TOPBAR (ala AdminLTE) ================= */
.wrapper{ display:flex; min-height:100vh; }

.main-sidebar{
  width:var(--sidebar-w); flex-shrink:0;
  background:linear-gradient(180deg, var(--teal-dark), var(--teal-darker));
  color:#fff;
  position:fixed; top:0; left:0; bottom:0;
  display:flex; flex-direction:column;
  z-index:40; overflow-y:auto;
  transition:transform .25s ease;
}
.brand-link{
  display:flex; align-items:center; gap:10px;
  padding:18px 16px; border-bottom:1px solid rgba(255,255,255,0.1);
}
.brand-icon{ font-size:26px; }
.brand-title{ font-family:'Fraunces',serif; font-weight:700; font-size:16.5px; color:#fff; line-height:1.2; }
.brand-sub{ font-size:10.5px; color:rgba(255,255,255,0.6); text-transform:uppercase; letter-spacing:0.08em; margin-top:1px; }

.sidebar-user{
  display:flex; align-items:center; gap:10px;
  padding:14px 16px; border-bottom:1px solid rgba(255,255,255,0.1);
}
.avatar{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:var(--amber); color:var(--teal-darker);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:16px;
}
.avatar-sm{ width:28px; height:28px; font-size:12.5px; }
.su-info{ min-width:0; }
.su-name{ font-weight:700; font-size:13.5px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px; }
.su-role{ font-size:11px; margin-top:2px; display:inline-block; padding:1px 8px; border-radius:20px; font-weight:700; }
.su-role.role-admin{ background:#F6E3BC; color:#7A5A12; }
.su-role.role-guru{ background:#CDE7DD; color:#155E4A; }
.su-role.role-murid{ background:#D9E4F5; color:#1E3A72; }
.su-role.role-kepala_sekolah{ background:#F0DDF0; color:#6B2C6B; }

.sidebar-menu{ display:flex; flex-direction:column; padding:10px 10px 20px; gap:2px; flex:1; }
.nav-link{
  display:flex; align-items:center; gap:11px;
  padding:10px 12px; border-radius:9px;
  color:rgba(255,255,255,0.82); text-decoration:none;
  font-size:14px; font-weight:600;
  border:none; background:none; width:100%; text-align:left;
}
.nav-link .ic{ font-size:16px; width:18px; text-align:center; }
.nav-link:hover{ background:rgba(255,255,255,0.08); color:#fff; }
.nav-link.active{ background:var(--amber); color:var(--teal-darker); }
.nav-logout{ color:rgba(255,140,120,0.9); }
.nav-logout:hover{ background:rgba(185,80,63,0.25); color:#fff; }
.menu-divider{
  font-size:10px; text-transform:uppercase; letter-spacing:0.1em;
  color:rgba(255,255,255,0.4); font-weight:700;
  padding:14px 12px 4px;
}

.sidebar-overlay{
  display:none; position:fixed; inset:0; background:rgba(15,23,32,0.5); z-index:35;
}

.content-wrapper{ flex:1; min-width:0; margin-left:var(--sidebar-w); display:flex; flex-direction:column; }

.topbar{
  display:flex; align-items:center; gap:12px;
  background:#fff; border-bottom:1px solid var(--paper-line);
  padding:12px 20px; position:sticky; top:0; z-index:20;
  box-shadow:0 1px 2px rgba(16,24,40,0.04);
}
.sidebar-toggle{
  display:none; background:none; border:none; font-size:20px; color:var(--teal-dark);
  padding:4px 6px; border-radius:8px;
}
.sidebar-toggle:hover{ background:var(--paper); }
.page-title{ font-size:19px; color:var(--teal-dark); flex:1; min-width:0; }

.topbar-right{ display:flex; align-items:center; gap:10px; }
.class-picker select{
  border:1.5px solid var(--paper-line); border-radius:9px; padding:7px 10px;
  background:#fff; color:var(--ink); font-weight:600; font-size:13px; max-width:190px;
}
.ta-picker select{
  border:1.5px solid var(--amber); border-radius:9px; padding:7px 10px;
  background:var(--amber-soft); color:var(--teal-dark); font-weight:700; font-size:12.5px; max-width:130px;
}
.mapel-picker select{
  border:1.5px solid var(--teal); border-radius:9px; padding:7px 10px;
  background:#E7F1FA; color:#2C5C85; font-weight:700; font-size:12.5px; max-width:170px;
}
.class-badge{ font-size:12px; }

.user-menu{ position:relative; }
.user-menu-btn{
  display:flex; align-items:center; gap:7px; background:none; border:none;
  padding:5px 6px 5px 5px; border-radius:20px; color:var(--ink);
}
.user-menu-btn:hover{ background:var(--paper); }
.umb-text{ font-weight:700; font-size:13px; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.umb-caret{ font-size:10px; color:var(--ink-soft); }
.user-menu-dropdown{
  display:none; position:absolute; right:0; top:calc(100% + 8px);
  background:#fff; border-radius:12px; box-shadow:0 8px 24px rgba(16,24,40,0.16);
  min-width:190px; overflow:hidden; z-index:30; border:1px solid var(--paper-line);
}
.user-menu-dropdown.open{ display:block; }
.umd-header{ padding:12px 14px; border-bottom:1px solid var(--paper-line); }
.umd-name{ font-weight:700; font-size:13.5px; }
.umd-role{ font-size:11px; margin-top:3px; display:inline-block; padding:1px 8px; border-radius:20px; font-weight:700; }
.umd-role.role-admin{ background:var(--amber-soft); color:#7A5A12; }
.umd-role.role-guru{ background:#CDE7DD; color:#155E4A; }
.umd-role.role-murid{ background:#D9E4F5; color:#1E3A72; }
.umd-role.role-kepala_sekolah{ background:#F0DDF0; color:#6B2C6B; }
.user-menu-dropdown a, .user-menu-dropdown button{
  display:block; width:100%; text-align:left; padding:10px 14px;
  font-size:13.5px; font-weight:600; color:var(--ink); text-decoration:none;
  background:none; border:none;
}
.user-menu-dropdown a:hover, .user-menu-dropdown button:hover{ background:var(--paper); }

.content{ padding:20px 22px 40px; max-width:980px; width:100%; margin:0 auto; }

@media (max-width: 900px){
  .main-sidebar{ transform:translateX(-100%); box-shadow:0 0 30px rgba(0,0,0,0.25); }
  .content-wrapper{ margin-left:0; }
  .sidebar-toggle{ display:inline-block; }
  body.sidebar-open .main-sidebar{ transform:translateX(0); }
  body.sidebar-open .sidebar-overlay{ display:block; }
  .umb-text{ display:none; }
  .content{ padding:16px 14px 32px; }
  .topbar{ padding:10px 14px; }
  .page-title{ display:none; }
  .ta-picker select{ max-width:76px; padding:7px 6px; font-size:11.5px; }
  .class-picker select{ max-width:110px; padding:7px 6px; font-size:11.5px; }
  .mapel-picker select{ max-width:100px; padding:7px 6px; font-size:11.5px; }
}

/* ================= LOGIN PAGE ================= */
.login-body{
  background:linear-gradient(160deg, var(--teal-dark), var(--teal-darker));
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
}
.login-wrap{ width:100%; max-width:400px; }
.login-card{
  background:#fff; border-radius:20px; padding:30px 28px; box-shadow:0 20px 50px rgba(0,0,0,0.3);
}
.login-brand{ text-align:center; margin-bottom:20px; }
.login-logo{ font-size:38px; display:block; margin-bottom:6px; }
.login-title{ font-family:'Fraunces',serif; font-size:22px; font-weight:700; color:var(--teal-dark); }
.login-sub{ font-size:12.5px; color:var(--ink-soft); margin-top:2px; }
.login-hint{
  margin-top:18px; font-size:11.5px; color:var(--ink-soft); background:var(--paper);
  border-radius:10px; padding:10px 12px; line-height:1.5;
}
.login-hint code{ background:#fff; border:1px solid var(--paper-line); padding:1px 5px; border-radius:5px; }

/* ================= CARD / FORM / BUTTON COMPONENTS ================= */
.card{ background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; margin-bottom:16px; border:1px solid var(--paper-line); }
.card.accent{ border-left:3px solid var(--red-rule); }
.card h3{ font-size:16px; margin-bottom:10px; color:var(--teal-dark); }
.muted{ color:var(--ink-soft); font-size:13px; }
.row{ display:flex; gap:10px; }
.row > *{ flex:1; }
label{ display:block; font-size:12.5px; font-weight:700; color:var(--ink-soft); margin-bottom:5px; margin-top:10px; text-transform:uppercase; letter-spacing:0.03em; }
label:first-child{ margin-top:0; }
input[type=text],input[type=password],input[type=date],input[type=number],input[type=file],select,textarea{
  width:100%; border:1.5px solid var(--paper-line); border-radius:10px; padding:10px 11px; background:#FFFFFF; color:var(--ink);
}
textarea{ resize:vertical; min-height:70px; }
input:focus,select:focus,textarea:focus{ outline:2px solid var(--amber); outline-offset:1px; border-color:var(--amber); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:none; border-radius:10px; padding:11px 16px; font-weight:700; font-size:14.5px;
  background:var(--teal); color:#fff; width:100%;
}
.btn.secondary{ background:var(--amber); color:var(--teal-dark); }
.btn.ghost{ background:transparent; color:var(--teal); border:1.5px solid var(--teal); }
.btn.danger{ background:transparent; color:var(--danger); border:1.5px solid var(--danger); }
.btn.small{ width:auto; padding:8px 12px; font-size:13px; }
.btn-row{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.btn-row .btn{ width:auto; flex:1; min-width:120px; }

.stamp{
  width:88px; height:88px; border-radius:50%;
  border:2.5px dashed rgba(255,255,255,0.55);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#fff; margin:12px auto 2px; transform:rotate(-4deg);
}
.stamp .d{ font-family:'Fraunces',serif; font-size:26px; font-weight:700; line-height:1; }
.stamp .m{ font-size:10px; text-transform:uppercase; letter-spacing:0.1em; margin-top:2px; }

.stat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; }
.stat{ background:var(--card); border-radius:12px; padding:12px 8px; text-align:center; box-shadow:var(--shadow); }
.stat .num{ font-family:'Fraunces',serif; font-size:22px; color:var(--teal); font-weight:700; }
.stat .lbl{ font-size:11px; color:var(--ink-soft); margin-top:2px; }

.item{ display:flex; justify-content:space-between; align-items:center; padding:11px 4px; border-bottom:1px solid var(--paper-line); gap:10px; }
.item:last-child{ border-bottom:none; }
.item .info{ flex:1; min-width:0; }
.item .info .t1{ font-weight:700; font-size:14.5px; }
.item .info .t2{ font-size:12.5px; color:var(--ink-soft); }
.icon-btn{ background:none; border:none; font-size:16px; padding:6px; color:var(--ink-soft); }
.icon-btn.del{ color:var(--danger); }

.edit-row{ display:none; padding:10px 4px 16px; border-bottom:1px solid var(--paper-line); }
.edit-row .row{ margin-bottom:8px; }
.edit-row .btn-row{ display:flex; gap:10px; }
.edit-row .btn-row .btn{ flex:1; }

.empty{ text-align:center; padding:26px 14px; color:var(--ink-soft); }
.empty .big{ font-size:30px; margin-bottom:6px; }

table{ width:100%; border-collapse:collapse; font-size:13.5px; }
th,td{ padding:8px 6px; text-align:left; border-bottom:1px solid var(--paper-line); }
th{ font-size:11px; text-transform:uppercase; color:var(--ink-soft); letter-spacing:0.03em; }
td select, td input[type=number]{ padding:6px; font-size:13px; }
.siswa-name{ font-weight:700; font-size:13.5px; }

.flash{ padding:10px 14px; border-radius:10px; font-size:13.5px; font-weight:600; margin-bottom:12px; }
.flash-ok{ background:#E1F1E8; color:var(--ok); }
.flash-err{ background:#FBE3DF; color:var(--danger); }

/* --- Tahun ajaran / role badge --- */
.badge{
  display:inline-block; background:var(--amber-soft); color:var(--teal-dark);
  font-size:11px; font-weight:700; padding:2px 9px; border-radius:20px; margin-top:2px;
}
.role-badge.role-admin{ background:var(--amber-soft); color:#7A5A12; }
.role-badge.role-guru{ background:#CDE7DD; color:#155E4A; }
.role-badge.role-murid{ background:#D9E4F5; color:#1E3A72; }
.role-badge.role-kepala_sekolah{ background:#F0DDF0; color:#6B2C6B; }

/* --- Badge kategori penilaian (Nilai) --- */
.cat-badge{ display:inline-block; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:20px; text-transform:uppercase; letter-spacing:0.02em; }
.cat-badge.cat-tugas{ background:#D9E4F5; color:#1E3A72; }
.cat-badge.cat-formatif{ background:#CDE7DD; color:#155E4A; }
.cat-badge.cat-sumatif{ background:#FBE3DF; color:#8A2E1F; }
.cat-badge.cat-lainnya{ background:#EDEBE3; color:#5F5E5A; }

/* --- Progress bar mini (progress pengisian nilai) --- */
.progress-track{ height:5px; background:var(--paper); border-radius:6px; margin-top:6px; overflow:hidden; max-width:220px; }
.progress-fill{ height:100%; background:var(--ok); border-radius:6px; transition:width .2s ease; }

/* ===== Penandaan warna NILAI AKHIR terhadap KKM =====
   hijau  = tuntas (>= KKM)
   kuning = belum tuntas (di bawah KKM)
   merah  = perlu perhatian khusus (di bawah 50)
   Dipakai bersama di halaman Rapor & tabel Ringkasan Nilai supaya
   penandaannya sama persis dengan yang ada di rekap Excel. */
.nilai-badge{
  display:inline-block; font-weight:800; border-radius:10px;
  padding:2px 10px; line-height:1.45; border:1.5px solid transparent;
}
.nilai-tuntas{ background:#EAF5EF; color:#1D6247; border-color:#9FD3BC; }
.nilai-belum{ background:#FDF4E4; color:#8A6212; border-color:var(--amber); }
.nilai-kritis{ background:#FBEDEA; color:#8A2E1F; border-color:var(--red-rule); }
.nilai-kosong{ background:var(--paper); color:var(--ink-soft); border-color:var(--paper-line); }

/* versi untuk sel tabel: warnai latar selnya, bukan pil */
td.nilai-cell{ font-weight:800; text-align:center; }
td.nilai-cell.nilai-tuntas{ background:#EAF5EF; color:#1D6247; }
td.nilai-cell.nilai-belum{ background:#FDF4E4; color:#8A6212; }
td.nilai-cell.nilai-kritis{ background:#FBEDEA; color:#8A2E1F; }
td.nilai-cell.nilai-kosong{ background:transparent; color:var(--ink-soft); font-weight:600; }

/* angka besar nilai akhir di rapor individu */
.nilai-hero{ font-family:'Fraunces',serif; font-size:38px; font-weight:700; line-height:1.1; }
.nilai-hero.nilai-tuntas{ color:var(--ok); }
.nilai-hero.nilai-belum{ color:#B07A15; }
.nilai-hero.nilai-kritis{ color:var(--red-rule); }
.nilai-hero.nilai-kosong{ color:var(--ink-soft); }

.legend-kkm{ font-size:11.5px; color:var(--ink-soft); margin-top:8px; }
.legend-kkm .dot{ margin-left:2px; }

@media print{
  /* pastikan warna kuning/merah tetap tercetak, tidak dibuang browser */
  .nilai-badge, td.nilai-cell, .nilai-hero{
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
}

/* --- Indikator warna nilai (grid input) --- */
.score-input.score-low{ border-color:var(--red-rule); background:#FBEDEA; color:var(--red-rule); font-weight:700; }
.score-input.score-mid{ border-color:var(--amber); background:#FDF4E4; color:#8A6212; font-weight:700; }
.score-input.score-high{ border-color:var(--ok); background:#EAF5EF; color:var(--ok); font-weight:700; }
.dot{ display:inline-block; width:9px; height:9px; border-radius:50%; vertical-align:middle; margin-right:3px; }

/* --- Warna status kehadiran (Pertemuan) --- */
.att-select.att-hadir{ border-color:var(--ok); background:#EAF5EF; color:var(--ok); font-weight:700; }
.att-select.att-sakit,.att-select.att-izin{ border-color:var(--amber); background:#FDF4E4; color:#8A6212; font-weight:700; }
.att-select.att-alpa{ border-color:var(--red-rule); background:#FBEDEA; color:var(--red-rule); font-weight:700; }

/* --- Warna predikat keaktifan A/B/C/D (Pertemuan) --- */
.akt-select.akt-a{ border-color:var(--ok); background:#EAF5EF; color:var(--ok); font-weight:700; }
.akt-select.akt-b{ border-color:#3E7CB1; background:#E7F1FA; color:#2C5C85; font-weight:700; }
.akt-select.akt-c{ border-color:var(--amber); background:#FDF4E4; color:#8A6212; font-weight:700; }
.akt-select.akt-d{ border-color:var(--red-rule); background:#FBEDEA; color:var(--red-rule); font-weight:700; }

/* --- Upload nilai box --- */
.upload-box{
  background:#FAFBFD; border:1.5px dashed var(--paper-line); border-radius:12px;
  padding:12px; margin-bottom:16px;
}

/* --- Pengaturan bobot nilai --- */
.weight-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; margin-top:6px;
}
.weight-grid > div{ display:flex; flex-direction:column; }
.weight-grid .wlabel{ font-size:12px; color:var(--ink-soft); font-weight:600; margin-bottom:3px; }
.weight-grid input{ padding:8px 9px; }

/* --- Grafik / chart --- */
.chart-box{ position:relative; height:220px; margin-top:8px; overflow:hidden; }
.chart-box.small{ height:150px; max-width:150px; margin:8px auto 0; }

/* --- Kelola Pengguna: pilih kelas untuk guru --- */
.checkbox-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; margin-top:8px; }
.checkbox-item{
  display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600;
  text-transform:none; color:var(--ink); margin:0;
}
.checkbox-item input[type=checkbox]{ width:auto; }
@media (max-width: 560px){ .checkbox-grid{ grid-template-columns:1fr; } }

/* --- Dropdown pencarian (searchable select) --- */
.search-select{ position:relative; }
.search-select-options{
  display:none; position:absolute; top:calc(100% + 4px); left:0; right:0;
  background:#fff; border:1.5px solid var(--paper-line); border-radius:10px;
  max-height:230px; overflow-y:auto; z-index:40; box-shadow:0 10px 26px rgba(16,24,40,0.14);
}
.search-select-options.open{ display:block; }
.search-select-option{ padding:9px 12px; font-size:13.5px; cursor:pointer; border-bottom:1px solid var(--paper-line); }
.search-select-option:last-child{ border-bottom:none; }
.search-select-option:hover, .search-select-option.active{ background:var(--paper); }
.search-select-option.hidden{ display:none; }
.search-select-empty{ padding:9px 12px; font-size:13px; color:var(--ink-soft); }

/* --- Print / mode presentasi rapor --- */
@media print{
  .no-print, .main-sidebar, .topbar, .sidebar-overlay{ display:none !important; }
  .content-wrapper{ margin-left:0 !important; }
  body{ background:#fff; }
  .content{ max-width:none; padding:0; }
  .card{ box-shadow:none; border:1px solid var(--paper-line); break-inside:avoid; }
}

/* --- Tabel Portofolio Guru --- */
.portofolio-table td, .portofolio-table th{ vertical-align:top; }
.portofolio-table td.pf-guru{
  background:#FAFBFD; border-right:2px solid var(--paper-line);
  vertical-align:middle;
}
.portofolio-table tr td{ border-bottom:1px solid var(--paper-line); }
tr.no-border td{ border-bottom:none; }

/* --- Matriks Peta Kelas x Mapel --- */
.peta-table{ border-collapse:separate; border-spacing:0; font-size:12px; }
.peta-table th{ vertical-align:bottom; }
.peta-sticky{
  position:sticky; left:0; z-index:2; background:var(--paper);
  border-right:2px solid var(--paper-line); min-width:120px;
}
.peta-table th.peta-sticky{ z-index:3; }
.peta-isi{
  text-align:center; background:#F3F8F6; border:1px solid var(--paper-line);
  line-height:1.3; padding:6px 8px;
}
.peta-isi.peta-tanpa-guru{ background:#FBEDEA; }
.peta-kosong{ background:transparent; border:1px solid var(--paper-line); }
@media print{
  .peta-isi, .peta-isi.peta-tanpa-guru{
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  .peta-sticky{ position:static; }
}