/* =========================================================
   SARKUM — tema di atas Bootstrap 5.3
   Hijau pandan sebagai warna kerja, kuning diraja Melayu
   hanya untuk penanda konteks (semester aktif) dan fokus.
   ========================================================= */

@font-face { font-family: "Plus Jakarta Sans"; font-weight: 400; font-display: swap; src: url("../vendor/fonts/PlusJakartaSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 500; font-display: swap; src: url("../vendor/fonts/PlusJakartaSans-Medium.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 600; font-display: swap; src: url("../vendor/fonts/PlusJakartaSans-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 700; font-display: swap; src: url("../vendor/fonts/PlusJakartaSans-Bold.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 800; font-display: swap; src: url("../vendor/fonts/PlusJakartaSans-ExtraBold.woff2") format("woff2"); }

:root {
  --sk-kertas: #F5F7F5;
  --sk-permukaan: #FFFFFF;
  --sk-tinta: #1C2B2A;
  --sk-tinta-2: #4F5F5C;
  --sk-tinta-3: #7D8B88;
  --sk-garis: #DFE5E2;
  --sk-garis-2: #EDF1EF;
  --sk-pandan: #05604A;
  --sk-pandan-gelap: #0A5246;
  --sk-pandan-muda: #E4F1EE;
  --sk-kuning: #E4A85F;
  --sk-kuning-muda: #FBF1D6;
  --sk-kuning-tinta: #6B4E07;

  --sk-draf: #5E6B7A;      --sk-draf-bg: #EEF1F4;
  --sk-diajukan: #9A5B00;  --sk-diajukan-bg: #FDF0DB;
  --sk-disetujui: #1E7A45; --sk-disetujui-bg: #E2F3E8;
  --sk-ditolak: #B42318;   --sk-ditolak-bg: #FCE8E6;

  --sk-sidebar: 264px;
  --sk-radius-kecil: 6px;
  --sk-radius: 10px;

  /* Bootstrap */
  --bs-body-font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-font-size: .9375rem;
  --bs-body-line-height: 1.55;
  --bs-body-color: var(--sk-tinta);
  --bs-body-bg: var(--sk-kertas);
  --bs-border-color: var(--sk-garis);
  --bs-primary: var(--sk-pandan);
  --bs-primary-rgb: 14, 107, 92;
  --bs-link-color: var(--sk-pandan);
  --bs-link-color-rgb: 14, 107, 92;
  --bs-link-hover-color: var(--sk-pandan-gelap);
  --bs-link-hover-color-rgb: 10, 82, 70;
  --bs-secondary-color: var(--sk-tinta-2);
  --bs-border-radius: var(--sk-radius-kecil);
  --bs-focus-ring-color: rgba(228, 168, 95, .45);
}

body { font-feature-settings: "tnum" 1; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5 { color: var(--sk-tinta); letter-spacing: -.01em; }
:focus-visible { outline: 3px solid var(--sk-kuning); outline-offset: 2px; }

/* ---------- Kerangka ---------- */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sk-sidebar);
  flex: 0 0 var(--sk-sidebar);
  background: var(--sk-permukaan);
  border-right: 1px solid var(--sk-garis);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar > * { flex-shrink: 0; } /* jangan memampatkan motif & menu di layar pendek */
.brand { padding: 1.25rem 1.25rem .9rem; display: flex; gap: .75rem; align-items: center; text-decoration: none; }
.brand-logo { width: 38px; height: 38px; object-fit: contain; border-radius: 9px; background: #fff; flex: 0 0 auto; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 9px;
  background: var(--sk-pandan); color: #fff;
  display: grid; place-items: center;
  font-weight: 800; font-size: 1.05rem;
}
.brand-nama { font-weight: 800; font-size: 1.125rem; color: var(--sk-tinta); line-height: 1.1; letter-spacing: .02em; }
.brand-sekolah { font-size: .75rem; color: var(--sk-tinta-3); line-height: 1.3; }

/* Motif pucuk rebung: deret segitiga, penanda identitas Melayu Riau */
.rebung {
  height: 7px;
  margin: 0 1.25rem .75rem;
  background-image:
    linear-gradient(135deg, var(--sk-pandan) 25%, transparent 25%),
    linear-gradient(225deg, var(--sk-pandan) 25%, transparent 25%);
  background-size: 14px 14px;
  background-position: 0 0, 0 0;
  background-repeat: repeat-x;
  opacity: .9;
  border-bottom: 2px solid var(--sk-kuning);
}

.nav-grup { padding: .25rem .75rem .5rem; }
.nav-grup-judul { font-size: .75rem; font-weight: 600; color: var(--sk-tinta-3); padding: .75rem .5rem .35rem; }
.nav-sk { list-style: none; margin: 0; padding: 0; }
.nav-sk a, .nav-sk .nav-nonaktif {
  display: flex; align-items: center; gap: .65rem;
  padding: .5rem .6rem;
  border-radius: var(--sk-radius-kecil);
  color: var(--sk-tinta-2);
  text-decoration: none;
  font-weight: 500;
  font-size: .9rem;
}
.nav-sk a:hover { background: var(--sk-garis-2); color: var(--sk-tinta); }
.nav-sk a.aktif { background: var(--sk-pandan-muda); color: var(--sk-pandan-gelap); font-weight: 600; box-shadow: inset 3px 0 0 var(--sk-pandan); }
.nav-sk .bi { font-size: 1.05rem; width: 1.2rem; text-align: center; }
.nav-sk .nav-nonaktif { color: var(--sk-tinta-3); cursor: default; }
.nav-sk .nav-nonaktif .modul { margin-left: auto; font-size: .6875rem; font-weight: 600; color: var(--sk-tinta-3); background: var(--sk-garis-2); border-radius: 20px; padding: 0 .45rem; }

.sidebar-kaki { margin-top: auto; padding: 1rem 1.25rem; border-top: 1px solid var(--sk-garis); display: flex; gap: .65rem; align-items: center; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--sk-kuning-muda); color: var(--sk-kuning-tinta); display: grid; place-items: center; font-weight: 700; font-size: .85rem; flex: none; }
.sidebar-kaki .nama { font-weight: 600; font-size: .875rem; line-height: 1.2; }
.sidebar-kaki .peran { font-size: .75rem; color: var(--sk-tinta-3); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: 64px;
  display: flex; align-items: center; gap: 1rem;
  padding: 0 2rem;
  background: rgba(245, 247, 245, .9);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--sk-garis);
  position: sticky; top: 0; z-index: 1020;
}
.topbar .btn-menu { display: none; }

/* Pita konteks semester — satu-satunya elemen kuning yang mencolok */
.pita-semester {
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--sk-kuning-muda);
  color: var(--sk-kuning-tinta);
  border: 1px solid #EED48E;
  border-radius: 999px;
  padding: .3rem .85rem .3rem .65rem;
  font-size: .8125rem; font-weight: 600;
  white-space: nowrap;
}
.pita-semester .titik { width: 8px; height: 8px; border-radius: 50%; background: var(--sk-kuning); box-shadow: 0 0 0 3px rgba(228, 168, 95, .25); }
.pita-semester.tanpa-semester { background: transparent; color: var(--sk-tinta-2); border: 1px dashed var(--sk-garis); font-weight: 500; }
.pita-semester.tanpa-semester .titik { background: var(--sk-tinta-3); box-shadow: none; }

.pratinjau { margin-left: auto; display: flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--sk-tinta-3); }
.pratinjau .form-select { width: auto; font-size: .8125rem; padding-top: .25rem; padding-bottom: .25rem; }

.content { padding: 2rem; max-width: 1240px; width: 100%; }

/* ---------- Kepala halaman ---------- */
.kepala { margin-bottom: 1.75rem; }
.kepala h1 { font-size: 1.625rem; font-weight: 700; margin-bottom: .25rem; }
.kepala p { color: var(--sk-tinta-2); margin: 0; max-width: 64ch; }
.kepala-aksi { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; }

/* ---------- Panel ---------- */
.panel { background: var(--sk-permukaan); border: 1px solid var(--sk-garis); border-radius: var(--sk-radius); overflow: hidden; }
.panel-kepala { padding: 1rem 1.25rem; border-bottom: 1px solid var(--sk-garis); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.panel-kepala h2 { font-size: 1rem; font-weight: 700; margin: 0; }
.panel-badan { padding: 1.25rem; }
.panel-datar { background: transparent; border: 0; }

/* ---------- Checklist persiapan semester ---------- */
.langkah { list-style: none; margin: 0; padding: 0; counter-reset: langkah; }
.langkah li {
  counter-increment: langkah;
  display: grid;
  grid-template-columns: 2.25rem 1fr auto;
  gap: .25rem 1rem;
  align-items: start;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--sk-garis-2);
}
.langkah li:first-child { border-top: 0; }
.langkah li::before {
  content: counter(langkah);
  width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; font-size: .875rem;
  border: 2px solid var(--sk-garis); color: var(--sk-tinta-3);
}
.langkah li.selesai::before { content: "\2713"; background: var(--sk-pandan); border-color: var(--sk-pandan); color: #fff; }
.langkah li.berikutnya::before { border-color: var(--sk-kuning); color: var(--sk-kuning-tinta); background: var(--sk-kuning-muda); }
.langkah .judul { font-weight: 600; }
.langkah .ket { font-size: .875rem; color: var(--sk-tinta-2); }
.langkah .pelaksana { font-size: .75rem; color: var(--sk-tinta-3); }
.langkah .aksi { align-self: center; }

/* ---------- Ringkasan angka ---------- */
.ringkas { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.ringkas div { padding: 1rem 1.25rem; border-left: 1px solid var(--sk-garis-2); }
.ringkas div:first-child { border-left: 0; }
.ringkas b { display: block; font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.ringkas span { font-size: .8125rem; color: var(--sk-tinta-2); }

/* ---------- Badge status ---------- */
.status { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px; white-space: nowrap; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-draf { color: var(--sk-draf); background: var(--sk-draf-bg); }
.status-diajukan { color: var(--sk-diajukan); background: var(--sk-diajukan-bg); }
.status-disetujui { color: var(--sk-disetujui); background: var(--sk-disetujui-bg); }
.status-ditolak { color: var(--sk-ditolak); background: var(--sk-ditolak-bg); }
.status-aktif { color: var(--sk-kuning-tinta); background: var(--sk-kuning-muda); }
.status-final { color: #fff; background: var(--sk-pandan); }
.status-ditutup { color: var(--sk-tinta-2); background: var(--sk-garis-2); }

/* ---------- Tombol & form ---------- */
.btn { font-weight: 600; font-size: .875rem; padding: .5rem .95rem; border-radius: var(--sk-radius-kecil); }
.btn-primary { --bs-btn-bg: var(--sk-pandan); --bs-btn-border-color: var(--sk-pandan); --bs-btn-hover-bg: var(--sk-pandan-gelap); --bs-btn-hover-border-color: var(--sk-pandan-gelap); --bs-btn-active-bg: var(--sk-pandan-gelap); --bs-btn-disabled-bg: var(--sk-pandan); --bs-btn-disabled-border-color: var(--sk-pandan); }
.btn-outline-primary { --bs-btn-color: var(--sk-pandan); --bs-btn-border-color: var(--sk-pandan); --bs-btn-hover-bg: var(--sk-pandan); --bs-btn-hover-border-color: var(--sk-pandan); --bs-btn-active-bg: var(--sk-pandan-gelap); --bs-btn-active-border-color: var(--sk-pandan-gelap); --bs-btn-disabled-color: var(--sk-tinta-3); --bs-btn-disabled-border-color: var(--sk-garis); }
.btn-tenang { background: var(--sk-permukaan); border: 1px solid var(--sk-garis); color: var(--sk-tinta); }
.btn-tenang:hover { background: var(--sk-garis-2); border-color: var(--sk-garis); }
.btn-sm { padding: .3rem .65rem; font-size: .8125rem; }

.form-label { font-weight: 600; font-size: .875rem; margin-bottom: .35rem; }
.form-text { color: var(--sk-tinta-3); }
.form-control, .form-select { border-color: var(--sk-garis); font-size: .9375rem; background-color: var(--sk-permukaan); }
.form-control:focus, .form-select:focus { border-color: var(--sk-pandan); box-shadow: 0 0 0 .2rem rgba(5, 96, 74, .15); }

/* ---------- Tabel ---------- */
.table { --bs-table-color: var(--sk-tinta); --bs-table-border-color: var(--sk-garis-2); margin: 0; font-size: .9rem; }
.table > thead th { font-size: .78rem; font-weight: 600; color: var(--sk-tinta-2); background: #FAFBFA; border-bottom: 1px solid var(--sk-garis); padding: .7rem 1rem; white-space: nowrap; }
.table > tbody td { padding: .75rem 1rem; vertical-align: middle; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: #F7FAF9; }
.angka { text-align: right; font-variant-numeric: tabular-nums; }

/* Sel input nilai: rapat, rata kanan, mudah dipindai */
.input-nilai { width: 4.5rem; text-align: right; padding: .3rem .45rem; font-variant-numeric: tabular-nums; }
.input-nilai.is-invalid { background-image: none; padding-right: .45rem; }

/* ---------- Kosong & pesan ---------- */
.kosong { text-align: center; padding: 2.5rem 1.5rem; color: var(--sk-tinta-2); }
.kosong .bi { font-size: 2rem; color: var(--sk-tinta-3); display: block; margin-bottom: .5rem; }
.kosong h3 { font-size: 1rem; font-weight: 700; margin-bottom: .25rem; }
.kosong p { max-width: 46ch; margin: 0 auto 1rem; font-size: .9rem; }

.alert { border-radius: var(--sk-radius); font-size: .9rem; }
.alert-success { --bs-alert-color: var(--sk-pandan-gelap); --bs-alert-bg: var(--sk-pandan-muda); --bs-alert-border-color: #C3E0D9; }
.alert-danger { --bs-alert-color: var(--sk-ditolak); --bs-alert-bg: var(--sk-ditolak-bg); --bs-alert-border-color: #F4C7C2; }
.alert-info { --bs-alert-color: var(--sk-kuning-tinta); --bs-alert-bg: var(--sk-kuning-muda); --bs-alert-border-color: #EED48E; }

/* ---------- Responsif ---------- */
@media (max-width: 991.98px) {
  .sidebar { position: fixed; left: 0; top: 0; z-index: 1040; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 0 0 100vmax rgba(28, 43, 42, 0); }
  .sidebar.terbuka { transform: none; box-shadow: 0 0 0 100vmax rgba(28, 43, 42, .35); }
  .topbar { padding: 0 1rem; }
  .topbar .btn-menu { display: inline-flex; }
  .content { padding: 1.25rem 1rem; }
  .pratinjau span { display: none; }
  .pratinjau { min-width: 0; }
  .pratinjau .form-select { max-width: 9.5rem; }
  .topbar { gap: .6rem; }
}
@media (max-width: 575.98px) {
  .pita-semester .lengkap { display: none; }
  .langkah li { grid-template-columns: 2.25rem 1fr; }
  .langkah .aksi { grid-column: 2; justify-self: start; }
}
/* Gerak dikurangi diatur oleh html[data-gerak="minim"] di app.css */

/* ---------- Menu akun di topbar ---------- */
.akun { margin-left: auto; }
.btn-akun {
  display: flex; align-items: center; gap: .6rem;
  background: transparent; border: 1px solid transparent; border-radius: 999px;
  padding: .25rem .6rem .25rem .25rem; color: var(--sk-tinta);
}
.btn-akun:hover, .btn-akun[aria-expanded="true"] { background: var(--sk-permukaan); border-color: var(--sk-garis); }
.akun-teks { display: flex; flex-direction: column; text-align: left; line-height: 1.2; }
.akun-teks .nama { font-weight: 600; font-size: .875rem; }
.akun-teks .peran { font-size: .75rem; color: var(--sk-tinta-3); }
.btn-akun .bi-chevron-down { font-size: .75rem; color: var(--sk-tinta-3); }
.dropdown-menu { --bs-dropdown-font-size: .875rem; --bs-dropdown-border-color: var(--sk-garis); --bs-dropdown-link-active-bg: var(--sk-pandan-muda); --bs-dropdown-link-active-color: var(--sk-pandan-gelap); border-radius: var(--sk-radius); padding: .35rem; min-width: 14rem; box-shadow: 0 8px 24px rgba(28, 43, 42, .08); }
.dropdown-item { border-radius: var(--sk-radius-kecil); padding: .45rem .6rem; }
.dropdown-header { font-size: .75rem; color: var(--sk-tinta-3); padding: .4rem .6rem .25rem; }
@media (max-width: 575.98px) { .akun-teks { display: none; } }

/* ---------- Halaman masuk ---------- */
.masuk { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.masuk-sisi {
  background: var(--sk-pandan); color: #fff;
  padding: 3rem; display: flex; flex-direction: column; position: relative; overflow: hidden;
}
.masuk-sisi .brand-mark { background: #fff; color: var(--sk-pandan); }
.masuk-sisi h1 { color: #fff; font-size: clamp(2.5rem, 4.5vw, 3.75rem); font-weight: 800; letter-spacing: .02em; margin: auto 0 .5rem; line-height: 1; }
.masuk-sisi p { color: rgba(255, 255, 255, .82); max-width: 34ch; margin: 0 0 2rem; font-size: 1.0625rem; }
.masuk-sisi .pita-semester { align-self: flex-start; margin-bottom: 4.5rem; }
.masuk-rebung {
  position: absolute; left: 0; right: 0; bottom: 0; height: 36px;
  background-image:
    linear-gradient(135deg, var(--sk-kuning) 25%, transparent 25%),
    linear-gradient(225deg, var(--sk-kuning) 25%, transparent 25%);
  background-size: 36px 72px;
  background-position: 0 0;
  transform: rotate(180deg);
}
.masuk-form { display: flex; align-items: center; justify-content: center; padding: 3rem 1.5rem; }
.masuk-form form { width: 100%; max-width: 380px; }
.masuk-form h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: .35rem; }
.masuk-form .sub { color: var(--sk-tinta-2); margin-bottom: 2rem; }
.masuk-form .form-control { padding: .65rem .8rem; }
.masuk-form .btn-primary { width: 100%; padding: .7rem; font-size: .9375rem; }
.lihat-sandi { border-color: var(--sk-garis); background: var(--sk-permukaan); color: var(--sk-tinta-2); }
@media (max-width: 767.98px) {
  .masuk { grid-template-columns: 1fr; }
  .masuk-sisi { padding: 1.5rem 1.25rem 3rem; }
  .masuk-sisi h1 { margin-top: 1.5rem; font-size: 2.25rem; }
  .masuk-sisi p { margin-bottom: 1rem; }
  .masuk-sisi .pita-semester { margin-bottom: 0; }
  .masuk-rebung { height: 18px; background-size: 18px 36px; }
  .masuk-form { align-items: flex-start; padding-top: 2rem; }
}

/* ---------- Halaman ditolak ---------- */
.ditolak { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.ditolak .panel { max-width: 460px; width: 100%; padding: 2rem; }
.ditolak h1 { font-size: 1.375rem; font-weight: 700; }

/* ---------- Pemilih kelas / semester ---------- */
.pemilih { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-bottom: 1.25rem; }
.segmen { display: inline-flex; background: var(--sk-garis-2); border-radius: 999px; padding: 3px; gap: 2px; }
.segmen a { padding: .35rem .9rem; border-radius: 999px; font-size: .8125rem; font-weight: 600; color: var(--sk-tinta-2); text-decoration: none; white-space: nowrap; }
.segmen a:hover { color: var(--sk-tinta); }
.segmen a.aktif { background: var(--sk-permukaan); color: var(--sk-pandan-gelap); box-shadow: 0 1px 2px rgba(28, 43, 42, .12); }
.segmen-kecil a { padding: .25rem .75rem; font-size: .78rem; }

.legenda { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .78rem; color: var(--sk-tinta-2); }
.legenda span { display: inline-flex; align-items: center; gap: .35rem; }
.sel-contoh { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--sk-garis); display: inline-block; }

/* ---------- Leger nilai kelas ---------- */
.leger-wadah { max-height: 70vh; }
.leger { font-size: .84rem; border-collapse: separate; border-spacing: 0; }
.leger > thead th { position: sticky; top: 0; z-index: 2; padding: .5rem .55rem; }
.leger > thead tr:nth-child(2) th { top: 2.1rem; }
.leger > thead th.grup { text-align: center; border-left: 1px solid var(--sk-garis); color: var(--sk-tinta); }
.leger > thead th.mapel { font-weight: 600; min-width: 3.4rem; }
.leger > tbody td { padding: .5rem .55rem; border-bottom: 1px solid var(--sk-garis-2); }
.leger .kunci { position: sticky; background: var(--sk-permukaan); z-index: 1; }
.leger thead .kunci { background: #FAFBFA; z-index: 3; }
.leger .k1 { left: 0; width: 3rem; min-width: 3rem; }
.leger .k2 { left: 3rem; min-width: 15rem; white-space: nowrap; border-right: 1px solid var(--sk-garis); }
.leger tbody tr:hover td { background: #F7FAF9; }
.leger tbody tr:hover .kunci { background: #F2F7F5; }
.leger a { color: var(--sk-tinta); text-decoration: none; font-weight: 500; }
.leger a:hover { color: var(--sk-pandan); text-decoration: underline; }
.sel-kosong { background: var(--sk-ditolak-bg) !important; color: var(--sk-ditolak); font-weight: 700; }
.sel-draf { color: var(--sk-diajukan); font-style: italic; background: #FFFAF0 !important; }
.sel-tidak { background: repeating-linear-gradient(135deg, transparent 0 4px, var(--sk-garis-2) 4px 6px) !important; }
.legenda .sel-kosong, .legenda .sel-draf, .legenda .sel-tidak { border-color: transparent; }
.sel-luar { color: var(--sk-tinta-3, #9aa3ad) !important; text-decoration: line-through; background: repeating-linear-gradient(135deg, transparent 0 4px, var(--sk-garis-2) 4px 6px) !important; }
.legenda .sel-luar { border-color: transparent; }
tr.baris-luar td { color: var(--sk-tinta-3, #9aa3ad); }
tr.baris-luar td.angka { text-decoration: line-through; }
tr.baris-sub td { font-size: .85rem; color: var(--sk-tinta-2); }
tr.baris-sub td:first-child { padding-left: 1.4rem; }
.tabel-capaian td { line-height: 1.45; }

/* ---------- Nilai per siswa ---------- */
.baris-grup td { background: #FAFBFA; font-size: .75rem; font-weight: 600; color: var(--sk-tinta-2); padding-top: .45rem !important; padding-bottom: .45rem !important; }
.perkembangan { font-size: .82rem; }
.perkembangan td, .perkembangan th { padding: .4rem .6rem !important; }
.tren { width: 100%; height: auto; display: block; }
.tren text { font-size: 10px; fill: var(--sk-tinta-3); font-family: inherit; }
.tren text.nilai { fill: var(--sk-tinta); font-weight: 600; }
.tren polyline { fill: none; stroke: var(--sk-pandan); stroke-width: 2; stroke-linejoin: round; }
.tren circle { fill: var(--sk-permukaan); stroke: var(--sk-pandan); stroke-width: 2; }

/* Rentang semester 1–6 */
.rentang { display: inline-flex; gap: 2px; }
.rentang i { font-style: normal; width: 1.35rem; height: 1.35rem; display: grid; place-items: center; font-size: .7rem; font-weight: 600; border-radius: 4px; background: var(--sk-garis-2); color: var(--sk-tinta-3); }
.rentang i.isi { background: var(--sk-pandan-muda); color: var(--sk-pandan-gelap); }

/* ---------- Guru & akun ---------- */
.chip { display: inline-block; font-size: .72rem; font-weight: 600; padding: .1rem .5rem; margin: 0 .25rem .15rem 0; border-radius: 999px; background: var(--sk-pandan-muda); color: var(--sk-pandan-gelap); }
.panel-perhatian { border-color: #EED48E; background: #FFFDF6; }
.panel-perhatian .panel-kepala { border-color: #F3E3B5; }
.daftar-permintaan { list-style: none; margin: 0; padding: 0; }
.daftar-permintaan li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; padding: .85rem 1.25rem; border-top: 1px solid #F3E3B5; }
.daftar-permintaan li:first-child { border-top: 0; }
.kartu-sandi { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1.1rem 1.25rem; border-radius: var(--sk-radius); background: var(--sk-kuning-muda); border: 1px solid #EED48E; color: var(--sk-kuning-tinta); }
.kartu-sandi code { font-family: inherit; font-size: 1.5rem; font-weight: 700; color: var(--sk-tinta); background: transparent; letter-spacing: .02em; }
.info-akun { display: grid; grid-template-columns: 8.5rem 1fr; gap: .5rem 1rem; margin: 0; font-size: .9rem; }
.info-akun dt { font-weight: 500; color: var(--sk-tinta-2); }
.info-akun dd { margin: 0; }
.riwayat { list-style: none; margin: 0; padding: 0; font-size: .875rem; }
.riwayat li { padding: .75rem 1.25rem; border-top: 1px solid var(--sk-garis-2); }
.riwayat li:first-child { border-top: 0; }

/* Baris saringan di atas tabel */
.saring { display: flex; flex-wrap: wrap; gap: .5rem; }
.saring input[type=search] { width: 16rem; }
.saring .form-select { width: auto; }

/* Daftar kelas di samping (penempatan) */
.daftar-kelas { padding: .5rem 0; max-height: 75vh; overflow-y: auto; }
.daftar-kelas a { display: flex; justify-content: space-between; padding: .45rem 1rem; color: var(--sk-tinta-2); text-decoration: none; font-weight: 500; font-size: .9rem; }
.daftar-kelas a:hover { background: var(--sk-garis-2); color: var(--sk-tinta); }
.daftar-kelas a.aktif { background: var(--sk-pandan-muda); color: var(--sk-pandan-gelap); font-weight: 600; box-shadow: inset 3px 0 0 var(--sk-pandan); }
.daftar-kelas .jumlah { font-size: .78rem; color: var(--sk-tinta-3); font-variant-numeric: tabular-nums; }
.impor td:not(:last-child), .impor th { white-space: nowrap; }
.table > tbody > tr.baris-tetap > td { --bs-table-bg-state: var(--sk-diajukan-bg); }

/* Kartu pengampuan guru */
.kartu-ampu { color: var(--sk-tinta); transition: border-color .15s ease; }
.kartu-ampu:hover { border-color: var(--sk-pandan); }
.kartu-ampu .kelas { font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.kartu-ampu .mapel { color: var(--sk-tinta-2); font-size: .9rem; }

/* Grid mapel pilihan: muat 8 mapel tanpa geser */
.pilihan th, .pilihan td { padding-left: .4rem !important; padding-right: .4rem !important; }
.pilihan thead th.text-center { white-space: normal; font-size: .72rem; line-height: 1.2; min-width: 3.4rem; }
.pilihan thead tr.baris-semua th { background: var(--sk-diajukan-bg); font-size: .78rem; font-weight: 600; border-bottom-width: 2px; }
.pilihan thead th.grup-mapel { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--sk-tinta-2); border-bottom: 1px solid var(--sk-garis-2); }

/* ---------- Tujuan pembelajaran (Modul 5) ---------- */
.btn-ikon { border: 1px solid transparent; color: var(--sk-tinta-2); padding: .2rem .45rem; }
.btn-ikon:hover { background: var(--sk-garis-2); color: var(--sk-tinta); }
.btn-ikon:disabled { opacity: .3; border-color: transparent; }
.lingkup-blok { border: 1px solid var(--sk-garis); border-radius: 12px; padding: .9rem 1rem .5rem; background: #fff; }
.lingkup-blok + .lingkup-blok { margin-top: .9rem; }
.lingkup-kepala { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.lingkup-no { flex: 0 0 auto; width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center; background: var(--sk-pandan); color: #fff; font-weight: 700; font-size: .85rem; }
.tp-kepala { display: grid; grid-template-columns: 5.2rem 1fr 6.4rem; gap: .5rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--sk-tinta-3); padding: 0 0 .25rem; }
.tp-kepala span:first-child { padding-left: .1rem; }
.tp-baris { display: grid; grid-template-columns: 5.2rem 1fr 6.4rem; gap: .5rem; align-items: start; margin-bottom: .45rem; }
.tp-baris textarea { resize: none; overflow: hidden; min-height: 2.4rem; }
.tp-nomor { text-align: center; font-variant-numeric: tabular-nums; }
.tp-daftar { list-style: none; padding: 0; margin: 0; counter-reset: lk; }
.tp-daftar > li { counter-increment: lk; padding: .2rem 0 .8rem; }
.tp-daftar > li + li { border-top: 1px solid var(--sk-garis-2); padding-top: .8rem; }
.tp-lingkup { font-weight: 700; margin-bottom: .45rem; }
.tp-lingkup::before { content: counter(lk) ". "; color: var(--sk-pandan); }
.tp-daftar ul { list-style: none; padding: 0; margin: 0; }
.tp-daftar ul li { display: flex; gap: .7rem; align-items: flex-start; padding: .3rem 0; }
.tp-nomor-baca { flex: 0 0 auto; min-width: 2.6rem; text-align: center; font-size: .78rem; font-weight: 600; background: var(--sk-garis-2); border-radius: 6px; padding: .1rem .35rem; font-variant-numeric: tabular-nums; }
.tp-ditolak > span.flex-grow-1 { color: var(--sk-tinta-3); text-decoration: line-through; }
.seleksi-tabel td { vertical-align: top; }
.seleksi-tabel .pilih-seleksi { white-space: nowrap; }
.seleksi-tabel .pilih-seleksi .btn { --bs-btn-padding-y: .15rem; --bs-btn-padding-x: .55rem; --bs-btn-font-size: .8rem; }
.kartu-tp .baris-status { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .85rem; padding: .35rem 0; border-top: 1px solid var(--sk-garis-2); }
@media (max-width: 575.98px) {
  .tp-baris, .tp-kepala { grid-template-columns: 3.4rem 1fr 2.2rem; }
  .tp-aksi { flex-direction: column; }
}

.tp-aksi { display: flex; gap: .1rem; justify-content: flex-end; }
.tp-aksi .btn-ikon { padding: .2rem .35rem; }
@keyframes tp-sorot { from { background: var(--sk-diajukan-bg); } to { background: transparent; } }
.tp-baru { animation: tp-sorot .8s ease-out; border-radius: 8px; }

/* Beranda guru: TP per mapel */
.tp-akordeon details { border-top: 1px solid var(--sk-garis-2); }
.tp-akordeon details:first-child { border-top: 0; }
.tp-akordeon summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .75rem; padding: .85rem 1.1rem; }
.tp-akordeon summary::-webkit-details-marker { display: none; }
.tp-akordeon summary .bi-chevron-right { transition: transform .15s; color: var(--sk-tinta-3); }
.tp-akordeon details[open] summary .bi-chevron-right { transform: rotate(90deg); }
.tp-akordeon summary:hover { background: var(--sk-garis-2); }
.tp-akordeon .isi { padding: .2rem 1.1rem 1rem 2.6rem; }
.tp-kemajuan { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: var(--sk-garis-2); }
.tp-kemajuan span { display: block; height: 100%; }

/* ---------- Blanko nilai (Modul 6) ---------- */
.tab-nilai { border-bottom: 0; gap: .25rem; flex-wrap: nowrap; overflow-x: auto; }
.tab-nilai .nav-link { border-radius: 10px 10px 0 0; color: var(--sk-tinta-2); white-space: nowrap; font-weight: 600; font-size: .9rem; }
.tab-nilai .nav-link.active { background: #fff; border-color: var(--sk-garis) var(--sk-garis) #fff; color: var(--sk-tinta); }
.no-tab { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--sk-garis-2); font-size: .75rem; margin-right: .4rem; }
.tab-nilai .nav-link.active .no-tab { background: var(--sk-pandan); color: #fff; }
.panel-tab { border-top-left-radius: 0; }
.petunjuk { font-size: .85rem; color: var(--sk-tinta-2); margin: 0; padding: .75rem 1rem; border-bottom: 1px solid var(--sk-garis-2); background: #FBFCFB; }
.blanko-wadah { max-height: 70vh; }
.blanko { margin: 0; font-size: .88rem; }
.blanko th, .blanko td { vertical-align: middle; white-space: nowrap; }
.blanko thead th { position: sticky; top: 0; background: #F4F7F5; z-index: 2; font-size: .78rem; text-align: center; }
.blanko thead tr:nth-child(2) th { top: 2.05rem; }
.blanko thead th.grup, .blanko thead th.lingkup { color: var(--sk-tinta-2); font-weight: 600; }
.blanko thead th.tp { cursor: help; text-decoration: underline dotted; min-width: 3.9rem; }
.blanko .kunci { position: sticky; background: #fff; z-index: 1; text-align: left; }
.blanko thead .kunci { z-index: 3; background: #F4F7F5; }
.blanko .k1 { left: 0; width: 2.6rem; }
.blanko .k2 { left: 2.6rem; min-width: 12rem; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; border-right: 1px solid var(--sk-garis); }
.blanko td.hasil, .blanko th.hasil { text-align: right; font-variant-numeric: tabular-nums; background: #F7FAF8; min-width: 6rem; }
.blanko td.rapor { font-weight: 700; color: var(--sk-pandan); }
.blanko-sempit td:not(.kunci) { width: 8rem; }
.sel-nilai { width: 4.2rem; margin: 0 auto; text-align: center; padding: .2rem .3rem; font-variant-numeric: tabular-nums; border-color: #D3DDD8; }
.sel-nilai:not(.terisi):not([readonly]) { background: #FFF8EC; }
.sel-nilai.is-invalid { background: #FDECEC; border-color: #D9534F; padding-right: .3rem; background-image: none; }
.sel-nilai[readonly] { background: transparent; border-color: transparent; }
.sel-nilai:focus { box-shadow: 0 0 0 .2rem rgba(31, 107, 82, .2); border-color: var(--sk-pandan); }
.bilah-simpan { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; background: #fff; border: 1px solid var(--sk-garis); border-radius: 12px; padding: .65rem .9rem; margin-top: .8rem; box-shadow: 0 -6px 18px rgba(20, 40, 30, .06); }
.bilah-simpan input[name=alasan] { flex: 1 1 18rem; max-width: 34rem; }
.daftar-tp-ringkas summary { cursor: pointer; font-weight: 600; font-size: .9rem; }
.kartu-nilai .baris-status { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .85rem; padding: .35rem 0; border-top: 1px solid var(--sk-garis-2); }
.perhatian li { padding: .55rem 1rem; border-top: 1px solid var(--sk-garis-2); display: flex; gap: .75rem; align-items: flex-start; }
.perhatian li:first-child { border-top: 0; }
.periksa-tutup li { display: flex; gap: .9rem; align-items: flex-start; padding: .9rem 1.1rem; border-top: 1px solid var(--sk-garis-2); }
.periksa-tutup li:first-child { border-top: 0; }
.tp-capaian { display: grid; grid-template-columns: 3.2rem 1fr 3.6rem; gap: .6rem; align-items: center; padding: .4rem 0; }
.tp-capaian .batang { height: 10px; border-radius: 99px; background: var(--sk-garis-2); overflow: hidden; }
.tp-capaian .batang span { display: block; height: 100%; background: var(--sk-pandan); }
.tp-capaian.rendah .batang span { background: #E9A23B; }
.tren-naik { color: var(--sk-disetujui); }
.tren-turun { color: #C0392B; }
.perk-tabel td, .perk-tabel th { white-space: nowrap; }
.urut-daftar li { display: flex; align-items: center; gap: .6rem; padding: .5rem 1rem; border-top: 1px solid var(--sk-garis-2); }
.urut-daftar li:first-child { border-top: 0; }
.urut-no { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--sk-garis-2); font-size: .78rem; font-weight: 700; flex: 0 0 auto; }
.jadwal-semester { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: flex-end; }
.jadwal-semester label { display: flex; flex-direction: column; gap: .15rem; font-size: .75rem; color: var(--sk-tinta-2); }
.jadwal-semester input[type=date] { width: 9.3rem; }
.sel-hari { width: 4.5rem; margin: 0 auto; text-align: center; }
.pratinjau-logo { width: 64px; height: 64px; flex: 0 0 auto; border: 1px solid var(--sk-garis); border-radius: 10px; display: grid; place-items: center; background: #fff; overflow: hidden; }
.pratinjau-logo img { max-width: 56px; max-height: 56px; object-fit: contain; }
.identitas-cover { border-top: 1px solid var(--sk-garis); padding-top: 1rem; }
.identitas-cover > summary { cursor: pointer; }
.chip.chip-kosong { background: #FFF4E0; color: #8A5A00; font-weight: 500; }
.kartu-wa { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; padding: .85rem 1rem; border-radius: 12px; background: #E9F8EF; border: 1px solid #B9E6C9; }
.kartu-wa > .bi-whatsapp { font-size: 1.6rem; color: #1FA855; }
.btn-wa { background: #1FA855; border-color: #1FA855; color: #fff; font-weight: 600; }
.btn-wa:hover, .btn-wa:focus { background: #178A45; border-color: #178A45; color: #fff; }

/* =========================================================================
   PERALIHAN KE DESIGN SYSTEM BARU (Tailwind, lihat tailwind/input.css)
   Halaman yang belum dimigrasi tetap memakai kelas di atas; token warnanya
   diselaraskan dengan palet baru (nila/ungu) dan diberi versi mode gelap.
   ========================================================================= */
:root {
  --sk-kertas: #F6F2E4;
  --sk-permukaan: rgba(255, 255, 255, .9);
  --sk-tinta: #14273D;
  --sk-tinta-2: #47596E;
  --sk-tinta-3: #7B8C9C;
  --sk-garis: rgba(31, 122, 156, .16);
  --sk-garis-2: rgba(31, 122, 156, .08);
  --sk-pandan: #176282;          /* warna kerja: petrol (palet 2026) */
  --sk-pandan-gelap: #1B426D;
  --sk-pandan-muda: #EAF4F6;
  --sk-radius-kecil: 10px;
  --sk-radius: 18px;
  --bs-primary-rgb: 23, 98, 130;
  --bs-link-color-rgb: 23, 98, 130;
  --bs-link-hover-color-rgb: 6, 152, 115;
  --bs-focus-ring-color: rgba(228, 168, 95, .45);
}
[data-bs-theme="dark"] {
  --sk-kertas: #0A1828;
  --sk-permukaan: rgba(19, 42, 67, .82);
  --sk-tinta: #EAF0F2;
  --sk-tinta-2: #A9BAC6;
  --sk-tinta-3: #7B8C9C;
  --sk-garis: rgba(92, 196, 166, .18);
  --sk-garis-2: rgba(92, 196, 166, .09);
  --sk-pandan: #3D93B1;
  --sk-pandan-gelap: #8CC7D9;
  --sk-pandan-muda: rgba(31, 122, 156, .18);
  --sk-kuning-muda: rgba(228, 168, 95, .16);
  --sk-kuning-tinta: #EFD3A0;
  --sk-draf: #A9BAC6;     --sk-draf-bg: rgba(169, 186, 198, .14);
  --sk-diajukan: #FCD34D; --sk-diajukan-bg: rgba(245, 158, 11, .16);
  --sk-disetujui: #6EE7B7; --sk-disetujui-bg: rgba(16, 185, 129, .16);
  --sk-ditolak: #FDA4AF;  --sk-ditolak-bg: rgba(244, 63, 94, .16);
  --bs-primary-rgb: 95, 168, 194;
  --bs-link-color-rgb: 140, 199, 217;
  --bs-link-hover-color-rgb: 127, 211, 184;
  --bs-secondary-color: var(--sk-tinta-2);
  --bs-tertiary-bg: rgba(255, 255, 255, .04);
}
.panel { box-shadow: 0 1px 2px rgba(20, 39, 61, .04), 0 10px 30px -14px rgba(23, 98, 130, .22); }
[data-bs-theme="dark"] .panel { box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .6); }
.btn-primary {
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
  background-image: linear-gradient(100deg, #176282 0%, #05805F 100%); border-color: transparent;
  box-shadow: 0 8px 18px -10px rgba(23, 98, 130, .9); transition: transform .2s, box-shadow .2s, filter .2s;
}
.btn-primary:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 12px 22px -10px rgba(5, 128, 95, .9); }
.btn-primary:active { transform: scale(.98); }
.btn-tenang { transition: transform .2s, box-shadow .2s, background-color .2s; }
.btn-tenang:hover { color: var(--sk-tinta); transform: translateY(-1px); }
.status-final { background: linear-gradient(100deg, #059669, #10B981); }
.table { --bs-table-bg: transparent; }
.table > thead th { background: rgba(31, 122, 156, .05); }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: rgba(31, 122, 156, .05); }
[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * { --bs-table-bg-state: rgba(92, 196, 166, .07); }
.form-control:focus, .form-select:focus { border-color: #1F7A9C; box-shadow: 0 0 0 .2rem rgba(31, 122, 156, .18); }
.kepala h1 { font-weight: 800; letter-spacing: -.02em; }
.alert-success { --bs-alert-color: #06785C; --bs-alert-bg: #D8F1EA; --bs-alert-border-color: #A9E7D3; }
[data-bs-theme="dark"] .alert-success { --bs-alert-color: #6FCBAE; --bs-alert-bg: rgba(29, 174, 135, .14); --bs-alert-border-color: rgba(29, 174, 135, .3); }
[data-bs-theme="dark"] .alert-danger { --bs-alert-color: #F2A08A; --bs-alert-bg: rgba(214, 87, 61, .14); --bs-alert-border-color: rgba(214, 87, 61, .3); }
[data-bs-theme="dark"] .alert-info, [data-bs-theme="dark"] .alert-warning { --bs-alert-color: #EFD3A0; --bs-alert-bg: rgba(228, 168, 95, .13); --bs-alert-border-color: rgba(228, 168, 95, .3); }
[data-bs-theme="dark"] .baris-grup td { background: rgba(255, 255, 255, .03); }
[data-bs-theme="dark"] .chip { background: rgba(31, 122, 156, .2); color: #B4DCE6; }
[data-bs-theme="dark"] .chip.chip-kosong { background: rgba(228, 168, 95, .16); color: #EFD3A0; }
[data-bs-theme="dark"] .kartu-wa { background: rgba(29, 174, 135, .12); border-color: rgba(29, 174, 135, .3); }
/* Mode gelap untuk bagian yang memakai warna latar tetap (sel lengket harus padat) */
[data-bs-theme="dark"] .table > thead th, [data-bs-theme="dark"] .leger thead .kunci, [data-bs-theme="dark"] .blanko thead th, [data-bs-theme="dark"] .blanko thead .kunci { background: #16304D; }
[data-bs-theme="dark"] .leger tbody tr:hover td, [data-bs-theme="dark"] .leger tbody tr:hover .kunci { background: #17324F; }
[data-bs-theme="dark"] .blanko .kunci, [data-bs-theme="dark"] .bilah-simpan, [data-bs-theme="dark"] .lingkup-blok, [data-bs-theme="dark"] .tab-nilai .nav-link.active { background: #12273F; }
[data-bs-theme="dark"] .tab-nilai .nav-link.active { border-color: var(--sk-garis) var(--sk-garis) #12273F; }
[data-bs-theme="dark"] .blanko td.hasil, [data-bs-theme="dark"] .blanko th.hasil { background: #18204A; }
[data-bs-theme="dark"] .petunjuk { background: rgba(255, 255, 255, .03); }
[data-bs-theme="dark"] .sel-nilai:not(.terisi):not([readonly]) { background: rgba(228, 168, 95, .1); }
[data-bs-theme="dark"] .sel-nilai.is-invalid { background: rgba(214, 87, 61, .18); }
[data-bs-theme="dark"] .sel-draf { background: rgba(228, 168, 95, .1) !important; }
[data-bs-theme="dark"] .panel-perhatian { background: rgba(228, 168, 95, .08); border-color: rgba(228, 168, 95, .35); }
[data-bs-theme="dark"] .pratinjau-logo { background: #fff; }
.bilah-simpan { border-radius: var(--sk-radius); backdrop-filter: blur(12px); }