*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.hidden {
  display: none !important;
}

:root {
  --bg: #f5ebe0;
  --surface: #ffffff;
  --sidebar: #3d2e1f;
  --sidebar-hover: #4d3a28;
  --text: #3d2e1f;
  --text-muted: #7a6654;
  --border: #e8dcc8;
  --primary: #a67c52;
  --primary-dark: #8b6344;
  --primary-light: #f5ebe0;
  --brand-light: #d4b896;
  --indigo: #4f46e5;
  --rose: #e11d48;
  --teal: #0d9488;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(61, 46, 31, 0.08), 0 4px 16px rgba(61, 46, 31, 0.04);
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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

.sidebar {
  width: 220px;
  background: var(--sidebar);
  color: #e2e8f0;
  display: flex;
  flex-direction: column;
  padding: 1rem 0.65rem;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 200;
  pointer-events: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 0.5rem;
}

.brand-icon,
.brand-logo {
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, #a67c52, #8b6344);
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: white;
  flex-shrink: 0;
  overflow: hidden;
}

.brand-logo.has-logo {
  background: #fff;
  padding: 2px;
}

.brand-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: none;
}

.brand-logo.has-logo .brand-logo-img {
  display: block;
}

.brand-logo.has-logo .brand-logo-fallback {
  display: none;
}

.brand strong {
  display: block;
  font-size: 0.95rem;
  color: white;
}

.brand span {
  font-size: 0.75rem;
  color: #94a3b8;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#app-nav .nav-btn.hidden,
#app-nav .nav-section.hidden,
#app-nav .nav-btn[hidden],
.publik-nav-tabs a.hidden {
  display: none !important;
}

/* Slot menu: default tampil layout admin; profil guru/wali memakai CSS awal dari sessionStorage */
#app-nav [data-nav-slot="guru"],
#app-nav [data-nav-slot="guru-top"],
#app-nav [data-nav-slot="wali"],
#app-nav [data-nav-group="jadwal-aktif"] {
  display: none !important;
}

html[data-nav-profile="guru"] #app-nav [data-nav-slot="admin"],
html[data-nav-profile="wali_kelas"] #app-nav [data-nav-slot="admin"],
html[data-nav-profile="kamad"] #app-nav [data-nav-slot="admin"],
html[data-nav-profile="guru"] #app-nav [data-nav-group="pengaturan"],
html[data-nav-profile="wali_kelas"] #app-nav [data-nav-group="pengaturan"],
html[data-nav-profile="kamad"] #app-nav [data-nav-group="pengaturan"],
html[data-nav-profile="guru"] #app-nav [data-nav="identitas"],
html[data-nav-profile="guru"] #app-nav [data-nav="catatan"],
html[data-nav-profile="guru"] #app-nav [data-nav="kelas"],
html[data-nav-profile="guru"] #app-nav [data-nav="alumni"],
html[data-nav-profile="guru"] #app-nav [data-nav="presensi"],
html[data-nav-profile="wali_kelas"] #app-nav [data-nav="identitas"],
html[data-nav-profile="wali_kelas"] #app-nav [data-nav="catatan"],
html[data-nav-profile="wali_kelas"] #app-nav [data-nav="alumni"],
html[data-nav-profile="kamad"] #app-nav [data-nav="identitas"],
html[data-nav-profile="kamad"] #app-nav [data-nav="catatan"],
html[data-nav-profile="kamad"] #app-nav [data-nav="alumni"] {
  display: none !important;
}

html[data-nav-profile="guru"] #app-nav [data-nav-group="jadwal-aktif"],
html[data-nav-profile="wali_kelas"] #app-nav [data-nav-group="jadwal-aktif"],
html[data-nav-profile="kamad"] #app-nav [data-nav-group="jadwal-aktif"],
html.nav-is-guru-admin #app-nav [data-nav-group="jadwal-aktif"] {
  display: flex !important;
}

html[data-nav-profile="guru"] #app-nav [data-nav-slot="guru"],
html[data-nav-profile="guru"] #app-nav [data-nav-slot="guru-top"],
html[data-nav-profile="wali_kelas"] #app-nav [data-nav-slot="guru"],
html[data-nav-profile="wali_kelas"] #app-nav [data-nav-slot="guru-top"],
html[data-nav-profile="kamad"] #app-nav [data-nav-slot="guru"],
html[data-nav-profile="kamad"] #app-nav [data-nav-slot="guru-top"],
html.nav-is-guru-admin #app-nav [data-nav-slot="guru"],
html.nav-is-guru-admin #app-nav [data-nav-slot="guru-top"] {
  display: flex !important;
}

html[data-nav-profile="kamad"] #app-nav [data-nav="kemajuan-kelas"] {
  display: none !important;
}

/* Admin: Jurnal Kelas di grup Kelas.
   Guru: Jurnal Guru di Jadwal Aktif.
   Wali: Jurnal Guru di Jadwal Aktif + Jurnal Kelas di grup Kelas. */
html[data-nav-profile="admin"] #app-nav [data-nav="kemajuan-kelas"][data-nav-slot="admin"],
html[data-nav-profile="super_admin"] #app-nav [data-nav="kemajuan-kelas"][data-nav-slot="admin"] {
  display: flex !important;
}

html[data-nav-profile="guru"] #app-nav [data-nav="kemajuan-kelas"][data-nav-slot="guru"],
html[data-nav-profile="wali_kelas"] #app-nav [data-nav="kemajuan-kelas"][data-nav-slot="guru"],
html.nav-is-guru-admin #app-nav [data-nav="kemajuan-kelas"][data-nav-slot="guru"] {
  display: flex !important;
}

html[data-nav-profile="wali_kelas"] #app-nav [data-nav="kemajuan-kelas"][data-nav-slot="wali"] {
  display: flex !important;
}

/* Kamad: sembunyikan panel/aksi input; Berita & Kegiatan tetap boleh diisi. */
html[data-nav-profile="kamad"] .siswa-admin-only,
html[data-nav-profile="kamad"] [data-role="admin"],
html[data-nav-profile="kamad"] #kelas-add-section,
html[data-nav-profile="kamad"] #kelas-extra-section,
html[data-nav-profile="kamad"] #siswa-add-panel,
html[data-nav-profile="kamad"] #siswa-import-panel,
html[data-nav-profile="kamad"] .foto-bulk-panel,
html[data-nav-profile="kamad"] #btn-presensi-save,
html[data-nav-profile="kamad"] #btn-presensi-kbm-save,
html[data-nav-profile="kamad"] #btn-jurnal-add-row,
html[data-nav-profile="kamad"] #btn-jurnal-save,
html[data-nav-profile="kamad"] #btn-jurnal-print-guru,
html[data-nav-profile="kamad"] #btn-foto-pick,
html[data-nav-profile="kamad"] #btn-foto-upload,
html[data-nav-profile="kamad"] #presensi-panel-input,
html[data-nav-profile="kamad"] #presensi-kbm-panel-input,
html[data-nav-profile="kamad"] #presensi-kbm-nav-actions,
html[data-nav-profile="kamad"] #page-presensi .presensi-tab-btn[data-tab="input"],
html[data-nav-profile="kamad"] #page-presensi-kbm .presensi-kbm-tab-btn[data-tab="input"] {
  display: none !important;
}

/* Guru / wali / kamad: Mutasi Murid hanya lihat daftar, tanpa form input. */
html[data-nav-profile="guru"] #page-mutasi form,
html[data-nav-profile="wali_kelas"] #page-mutasi form,
html[data-nav-profile="kamad"] #page-mutasi form,
html[data-nav-profile="guru"] #page-mutasi .mutasi-massal-actions,
html[data-nav-profile="wali_kelas"] #page-mutasi .mutasi-massal-actions,
html[data-nav-profile="kamad"] #page-mutasi .mutasi-massal-actions,
html[data-nav-profile="guru"] #page-mutasi .btn-mutasi-edit,
html[data-nav-profile="wali_kelas"] #page-mutasi .btn-mutasi-edit,
html[data-nav-profile="kamad"] #page-mutasi .btn-mutasi-edit,
html[data-nav-profile="guru"] #page-mutasi .btn-mutasi-delete,
html[data-nav-profile="wali_kelas"] #page-mutasi .btn-mutasi-delete,
html[data-nav-profile="kamad"] #page-mutasi .btn-mutasi-delete,
html[data-nav-profile="guru"] #page-mutasi .mutasi-input-panel,
html[data-nav-profile="wali_kelas"] #page-mutasi .mutasi-input-panel,
html[data-nav-profile="kamad"] #page-mutasi .mutasi-input-panel {
  display: none !important;
}

#app-nav [data-nav="print"],
#app-nav [data-nav="alumni-rekap"] {
  display: none !important;
}

html[data-nav-profile="admin"] #app-nav [data-nav="alumni-daftar"],
html[data-nav-profile="super_admin"] #app-nav [data-nav="alumni-daftar"] {
  display: none !important;
}

/* Cadangan: guru mapel tidak melihat menu Presensi (harian). */
body.nav-is-guru-mapel #app-nav [data-nav="presensi"] {
  display: none !important;
}

.nav-section {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.nav-submenu {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  padding-left: 0;
}

.nav-menu-label {
  display: block;
  padding: 0.55rem 0.45rem 0.2rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--brand-light);
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-menu-link {
  width: 100%;
  padding: 0.3rem 0.4rem;
  border: none;
  background: transparent;
  color: #f1f5f9;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: left;
  border-radius: 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

.nav-menu-link:hover {
  background: var(--sidebar-hover);
  color: #f8fafc;
}

.nav-menu-link.active {
  background: rgba(166, 124, 82, 0.28);
  color: #f5ebe0;
}

.nav-menu-link:active {
  background: rgba(166, 124, 82, 0.28);
  color: #f5ebe0;
}

.brand-link {
  cursor: pointer;
}

.brand-link:hover {
  opacity: 0.92;
}

.nav-menu-link:focus {
  outline: none;
}

.nav-menu-link:focus-visible {
  outline: 2px solid rgba(212, 184, 150, 0.85);
  outline-offset: 2px;
}

a.nav-menu-link {
  text-decoration: none;
  display: block;
}

.nav-btn {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.38rem 0.5rem;
  border: none;
  background: transparent;
  color: #cbd5e1;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  line-height: 1.2;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  transition: background 0.12s ease, color 0.12s ease;
}

.nav-btn:focus {
  outline: none;
}

.nav-btn:focus-visible {
  outline: 2px solid rgba(212, 184, 150, 0.85);
  outline-offset: 2px;
}

.nav-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-btn > span {
  min-width: 0;
  flex: 1;
}

.nav-btn:hover {
  background: var(--sidebar-hover);
  color: #f8fafc;
}

.nav-btn:hover svg {
  opacity: 1;
}

.nav-btn.active {
  background: rgba(166, 124, 82, 0.28);
  color: #f5ebe0;
}

.nav-btn.active svg {
  opacity: 1;
  color: var(--brand-light);
}

.nav-btn.nav-guru-jadwal-top {
  width: 100%;
  min-height: 42px;
  margin-bottom: 0.15rem;
  padding: 0.55rem 0.65rem;
  background: rgba(166, 124, 82, 0.18);
  color: #f5ebe0;
  font-size: 0.82rem;
  font-weight: 650;
  border: 1px solid rgba(212, 184, 150, 0.2);
}

.nav-section[data-nav-group="jadwal-aktif"] {
  margin-bottom: 0.35rem;
}

.nav-section[data-nav-group="jadwal-aktif"] .nav-submenu {
  padding-left: 0;
}

.nav-btn.nav-guru-jadwal-top:hover,
.nav-btn.nav-guru-jadwal-top.active {
  background: rgba(166, 124, 82, 0.38);
  color: #fff;
}

#page-catatan.catatan-readonly #tbl-prestasi input,
#page-catatan.catatan-readonly #tbl-prestasi select,
#page-catatan.catatan-readonly #tbl-catatan input,
#page-catatan.catatan-readonly #tbl-catatan select,
#page-catatan.catatan-readonly #tbl-catatan-lain input {
  background: #f8fafc;
  color: #475569;
  cursor: default;
}

#page-catatan #tbl-catatan-lain {
  table-layout: fixed;
  width: 100%;
}

#page-catatan #tbl-catatan-lain th:nth-child(1),
#page-catatan #tbl-catatan-lain td:nth-child(1) {
  width: 3.2rem;
}

#page-catatan #tbl-catatan-lain th:nth-child(2),
#page-catatan #tbl-catatan-lain td:nth-child(2) {
  width: 9.75rem;
}

#page-catatan #tbl-catatan-lain th:nth-child(3),
#page-catatan #tbl-catatan-lain td:nth-child(3) {
  width: 22%;
}

#page-catatan #tbl-catatan-lain th:nth-child(4),
#page-catatan #tbl-catatan-lain td:nth-child(4) {
  width: auto;
}

#page-catatan #tbl-catatan-lain th:nth-child(5),
#page-catatan #tbl-catatan-lain td:nth-child(5) {
  width: 5.75rem;
}

#page-catatan #tbl-catatan-lain .catatan-lain-aksi-cell {
  white-space: nowrap;
  vertical-align: middle;
}

#page-catatan #tbl-catatan-lain .btn-del {
  white-space: nowrap;
  min-width: 4.25rem;
}

#page-catatan #tbl-catatan-lain .date-ddmmyyyy {
  width: 100%;
}

#page-catatan #tbl-catatan-lain .cl-kegiatan,
#page-catatan #tbl-catatan-lain .cl-keterangan,
#page-catatan #tbl-catatan-lain .cl-tanggal {
  width: 100%;
  min-width: 0;
}

#page-catatan .catatan-readonly-hint {
  margin: 0.35rem 0 0;
  color: #b45309;
  font-size: 0.88rem;
}

.nav-btn.nav-sub {
  padding: 0.36rem 0.5rem;
  font-size: 0.8rem;
  width: 100%;
}

.nav-btn.nav-sub svg {
  display: block;
}

a.nav-btn.nav-sub {
  text-decoration: none;
  color: #cbd5e1;
}

a.nav-btn.nav-sub:visited {
  color: #cbd5e1;
}

a.nav-btn.nav-sub:hover,
a.nav-btn.nav-sub.active,
a.nav-btn.nav-sub.active:visited {
  color: #f5ebe0;
}

.panel.panel-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.panel-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.catatan-preview-jenis-field {
  margin: 0;
  min-width: 12rem;
}

.catatan-preview-jenis-field > span {
  font-size: 0.78rem;
  margin-bottom: 0.15rem;
}

.catatan-preview-jenis-field select {
  min-height: 2.35rem;
}

#page-catatan .catatan-save-actions .btn-catatan-preview {
  min-width: 9.5rem;
}

.catatan-save-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.65rem;
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border, #e5e7eb);
}

#page-catatan #btn-save.btn-save-green {
  min-width: 10.5rem;
}

#page-daftar-catatan .daftar-catatan-nama {
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 700;
  color: #1e3a5f;
  text-decoration: underline;
  text-decoration-color: rgba(30, 58, 95, 0.35);
  text-underline-offset: 0.2rem;
  cursor: pointer;
  text-align: left;
}

#page-daftar-catatan .daftar-catatan-nama:hover,
#page-daftar-catatan .daftar-catatan-nama:focus-visible {
  color: #8a5631;
  text-decoration-color: currentColor;
}

#page-daftar-catatan .daftar-catatan-toolbar {
  align-items: flex-end;
}

#page-daftar-catatan .daftar-catatan-toolbar .field {
  margin: 0;
}

#page-daftar-catatan .daftar-catatan-tanggal-field input[type="date"] {
  min-height: 2.35rem;
}

#page-daftar-catatan .daftar-catatan-list-head {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

#page-daftar-catatan .daftar-catatan-search-field {
  margin: 0;
  max-width: 22rem;
}

#page-daftar-catatan #daftar-catatan-search {
  width: 100%;
  max-width: 22rem;
}

#page-daftar-catatan .daftar-catatan-hint,
#page-daftar-catatan .daftar-catatan-empty {
  margin: 0;
  color: var(--text-muted, #7a6654);
  font-size: 0.875rem;
  line-height: 1.4;
}

#page-daftar-catatan .daftar-catatan-empty {
  margin-top: 0.75rem;
}

#page-daftar-catatan .table-wrap {
  position: relative;
  z-index: 0;
  clear: both;
}

.alumni-list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.alumni-list-head h2 {
  margin: 0;
}

.alumni-list-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
}

.alumni-filter-tahun,
.alumni-filter-sort {
  min-width: 9.5rem;
}

/* Daftar alumni: area tabel scroll, judul panel & header kolom tetap */
.alumni-daftar-scroll {
  max-height: min(65vh, 36rem);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}

.alumni-daftar-scroll .data-table {
  border-collapse: separate;
  border-spacing: 0;
}

.alumni-daftar-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #faf6f0;
  box-shadow: 0 1px 0 var(--border);
}

@media print {
  .alumni-daftar-scroll {
    max-height: none;
    overflow: visible;
    border: none;
  }
}

.sidebar-footer {
  padding: 1rem 0.75rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #64748b;
  font-size: 0.75rem;
}

.app-creator {
  display: block;
  margin-top: 0.5rem;
  color: #64748b;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
}

.app-creator [data-app-creator] {
  color: #94a3b8;
  font-weight: 600;
}

.user-box {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.65rem 0.7rem;
  margin-bottom: 0.75rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.user-avatar {
  width: 36px;
  height: 36px;
  flex: none;
  border: none;
  padding: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #a67c52, #8b6344);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.user-avatar.has-photo {
  background: rgba(255, 255, 255, 0.08);
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.user-avatar.is-clickable {
  cursor: pointer;
  position: relative;
}

.user-avatar.is-clickable:hover {
  box-shadow: 0 0 0 2px rgba(199, 210, 254, 0.45);
}

.user-avatar.is-clickable::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(15, 23, 42, 0.18);
  opacity: 0;
  transition: opacity 0.15s;
}

.user-avatar.is-clickable:hover::after {
  opacity: 1;
}

.user-meta {
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}

.user-meta strong {
  display: block;
  color: #e2e8f0;
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-meta span {
  display: block;
  color: #94a3b8;
  font-size: 0.7rem;
}

.user-actions {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.user-action-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: 9px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.user-action-btn svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.user-action-pass {
  background: rgba(166, 124, 82, 0.22);
  color: #f5ebe0;
}

.user-action-pass:hover {
  background: rgba(166, 124, 82, 0.35);
  color: #fff;
}

.user-action-logout {
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
}

.user-action-logout:hover {
  background: rgba(239, 68, 68, 0.25);
  color: #fecaca;
}

.user-action-pass.hidden {
  display: none;
}

.user-action-btn:disabled {
  opacity: 0.5;
  cursor: progress;
}

.main {
  flex: 1;
  margin-left: 220px;
  padding: 2rem 2.5rem;
  max-width: 1400px;
  position: relative;
  min-width: 0;
  z-index: 1;
}

.topbar {
  margin-bottom: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}

.update-available-banner {
  margin: 0 0 0.85rem;
  animation: update-banner-in 0.35s ease-out;
}

/* Peringatan TA ≠ periode kalender — merah (sudah lewat) / biru (belum saatnya) */
.active-ta-warning-banner {
  position: sticky;
  top: 0;
  z-index: 11000;
  margin: 0 0 0.65rem;
  animation: update-banner-in 0.35s ease-out;
}

.active-ta-warning-banner.hidden {
  display: none !important;
}

.active-ta-warning-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  color: #fff;
}

/* TA/semester sudah lewat */
.active-ta-warning-banner.is-past .active-ta-warning-banner-inner {
  border: 1px solid #b91c1c;
  background: linear-gradient(105deg, #dc2626 0%, #b91c1c 100%);
  box-shadow: 0 6px 18px rgba(185, 28, 28, 0.35);
}

/* TA/semester belum saatnya (lebih maju dari kalender) */
.active-ta-warning-banner.is-future .active-ta-warning-banner-inner {
  border: 1px solid #1d4ed8;
  background: linear-gradient(105deg, #2563eb 0%, #1e40af 100%);
  box-shadow: 0 6px 18px rgba(30, 64, 175, 0.4);
}

.active-ta-warning-banner-inner strong {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.35;
}

.active-ta-warning-close {
  flex: none;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.active-ta-warning-close:hover {
  background: rgba(255, 255, 255, 0.28);
}

.update-available-banner.hidden {
  display: none;
}

@keyframes update-banner-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.update-available-banner-inner {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.45rem 0.55rem 0.45rem 0.7rem;
  border-radius: 10px;
  border: 1px solid #c5d4b8;
  background: linear-gradient(105deg, #f3f8ee 0%, #eef6f1 55%, #f7f3ea 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 4px 14px rgba(61, 46, 31, 0.06);
}

.update-available-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  flex: none;
  border-radius: 999px;
  background: #2f6b4f;
  color: #f5fbf7;
}

.update-available-icon svg {
  width: 0.95rem;
  height: 0.95rem;
}

.update-available-copy {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
  flex: 1 1 auto;
  line-height: 1.25;
}

.update-available-copy strong {
  font-size: 0.82rem;
  font-weight: 700;
  color: #1f3d30;
  letter-spacing: 0.01em;
}

.update-available-copy span {
  font-size: 0.75rem;
  color: #4a6356;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.update-available-banner-inner .btn-primary.sm {
  flex: none;
  padding: 0.28rem 0.7rem;
  font-size: 0.75rem;
  min-height: 0;
  background: #2f6b4f;
  border-color: #2f6b4f;
}

.update-available-banner-inner .btn-primary.sm:hover:not(:disabled) {
  background: #275a42;
  border-color: #275a42;
}

.update-available-close {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #5a6f62;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

.update-available-close:hover {
  background: rgba(47, 107, 79, 0.1);
  color: #1f3d30;
}

@media (max-width: 640px) {
  .update-available-banner-inner {
    flex-wrap: wrap;
    gap: 0.45rem;
  }

  .update-available-copy span {
    white-space: normal;
  }

  .update-available-banner-inner .btn-primary.sm {
    margin-left: auto;
  }
}

.topbar-left {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
  flex: 1 1 240px;
}

.topbar-titles {
  min-width: 0;
}

.sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--primary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.sidebar-toggle svg {
  width: 22px;
  height: 22px;
}

.sidebar-toggle:focus {
  outline: none;
}

.sidebar-toggle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.sidebar-overlay {
  display: none;
  pointer-events: none;
}

body.sidebar-open {
  overflow: hidden;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.lang-switch {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}

.lang-btn {
  border: none;
  background: transparent;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  color: #64748b;
  padding: 0.38rem 0.65rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  letter-spacing: 0.03em;
}

.lang-btn:hover {
  background: #e2e8f0;
  color: #334155;
}

.lang-btn.active {
  background: var(--primary);
  color: #fff;
}

.mode-switch {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}

.mode-switch a {
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--primary-dark);
  padding: 0.4rem 0.85rem;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.mode-switch a:hover { background: var(--primary-light); }

.mode-switch a.active { background: var(--primary); color: #fff; }

.db-status {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  white-space: nowrap;
}

.db-status.mysql {
  background: #dcfce7;
  color: #166534;
}

.db-status.static {
  background: #fef3c7;
  color: #92400e;
}

.db-status.hidden {
  display: none;
}

.loading,
.loading.active {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  color: var(--text-muted);
  pointer-events: none !important;
}

.loading.active {
  display: flex;
}

.app.loading-active .main,
.app.loading-active .main .page.active,
.app .main,
.app .main button,
.app .main a,
.app .main input,
.app .main select,
.app .main textarea {
  pointer-events: auto;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 1rem;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.app.loading-active .page {
  display: none !important;
}

.app.loading-active .page.active {
  /* Jangan tampilkan Beranda (atau halaman lain) di balik spinner saat boot */
  display: none !important;
}

.app.loading-active .sidebar,
.app.loading-active .sidebar * {
  pointer-events: auto;
}

#page-identitas.page.active {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 7rem);
}

.identitas-embed-frame {
  width: 100%;
  flex: 1 1 auto;
  min-height: calc(100dvh - 8.5rem);
  border: 0;
  border-radius: 12px;
  background: #fff;
}

.topbar p {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-top: 0.25rem;
}

.page {
  display: none;
}

.page.active {
  display: block;
  pointer-events: auto;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: grid;
  place-items: center;
}

.stat-icon svg {
  width: 24px;
  height: 24px;
}

.stat-icon.blue { background: #f5ebe0; color: #a67c52; }
.stat-icon.indigo { background: #e0e7ff; color: #4f46e5; }
.stat-icon.rose { background: #ffe4e6; color: #e11d48; }
.stat-icon.teal { background: #ccfbf1; color: #0d9488; }

.stat-label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
}

.stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.panel {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  margin-bottom: 1.5rem;
}

.panel h2 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.panel-desc {
  color: var(--text-muted);
  font-size: 0.875rem;
  margin: -0.5rem 0 1rem;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 900px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

.bar-chart {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.bar-row {
  display: grid;
  grid-template-columns: 60px 1fr 48px;
  align-items: center;
  gap: 0.75rem;
}

.bar-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}

.bar-track {
  height: 28px;
  background: #f1f5f9;
  border-radius: 6px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, #a67c52, #8b6344);
  transition: width 0.6s ease;
  min-width: 4px;
}

.bar-tingkat-10 .bar-fill {
  background: linear-gradient(90deg, #3b82f6, #2563eb);
}
.bar-tingkat-11 .bar-fill {
  background: linear-gradient(90deg, #10b981, #059669);
}
.bar-tingkat-12 .bar-fill {
  background: linear-gradient(90deg, #f59e0b, #d97706);
}

.bar-value {
  font-size: 0.85rem;
  font-weight: 600;
  text-align: right;
}

/* —— Beranda: Rekap per Kelas (matrix warna per tingkat) —— */
.panel-dash-rekap > h2 {
  margin-bottom: 1rem;
}

.dash-rekap-wrap {
  display: grid;
  gap: 1.15rem;
}

.dash-rekap-empty {
  margin: 0;
  color: var(--text-muted, #64748b);
  font-size: 0.9rem;
}

.dash-rekap-tingkat {
  border-radius: 14px;
  border: 1px solid transparent;
  overflow: hidden;
  background: #fff;
}

.dash-rekap-tingkat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.7rem 1rem;
}

.dash-rekap-tingkat-head h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.dash-rekap-tingkat-sum {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.92;
}

.dash-rekap-tingkat-sum strong {
  font-size: 0.95rem;
}

.dash-rekap-matrix-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.65rem 0.75rem 0.85rem;
}

.dash-rekap-matrix {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: max(100%, 280px);
  font-variant-numeric: tabular-nums;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.dash-rekap-matrix th,
.dash-rekap-matrix td {
  padding: 0.55rem 0.5rem;
  text-align: center;
  font-size: 0.88rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  border-right: 1px solid rgba(15, 23, 42, 0.05);
  white-space: nowrap;
}

.dash-rekap-matrix th:last-child,
.dash-rekap-matrix td:last-child {
  border-right: 0;
}

.dash-rekap-matrix tbody tr:last-child th,
.dash-rekap-matrix tbody tr:last-child td {
  border-bottom: 0;
}

.dash-rekap-matrix thead th {
  font-size: 0.8rem;
  font-weight: 700;
  background: #f8fafc;
}

.dash-rekap-matrix .dash-rekap-corner,
.dash-rekap-matrix tbody th {
  text-align: left;
  padding-left: 0.75rem;
  font-weight: 700;
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fff;
  min-width: 4.2rem;
  box-shadow: 4px 0 8px -6px rgba(15, 23, 42, 0.2);
}

.dash-rekap-matrix thead .dash-rekap-corner {
  background: #f1f5f9;
  z-index: 2;
}

.dash-rekap-matrix .dash-rekap-col-total {
  font-weight: 700;
  background: rgba(15, 23, 42, 0.03);
}

.dash-rekap-row-male td { color: #1d4ed8; }
.dash-rekap-row-female td { color: #be123c; }
.dash-rekap-row-total td,
.dash-rekap-row-total th {
  font-weight: 700;
  background: rgba(15, 23, 42, 0.03);
}

/* Tingkat 10 — biru */
.dash-rekap-t10 {
  border-color: #93c5fd;
  background: linear-gradient(165deg, #eff6ff 0%, #dbeafe 55%, #f8fbff 100%);
}
.dash-rekap-t10 .dash-rekap-tingkat-head {
  background: linear-gradient(90deg, #2563eb, #3b82f6);
  color: #fff;
}
.dash-rekap-t10 .dash-rekap-matrix thead th {
  background: #dbeafe;
  color: #1e3a8a;
}
.dash-rekap-t10 .dash-rekap-matrix thead .dash-rekap-corner {
  background: #bfdbfe;
}
.dash-rekap-t10 .dash-rekap-matrix tbody th {
  background: #eff6ff;
  color: #1e40af;
}
.dash-rekap-t10 .dash-rekap-row-total td,
.dash-rekap-t10 .dash-rekap-row-total th,
.dash-rekap-t10 .dash-rekap-col-total {
  background: #dbeafe;
}

/* Tingkat 11 — hijau */
.dash-rekap-t11 {
  border-color: #6ee7b7;
  background: linear-gradient(165deg, #ecfdf5 0%, #d1fae5 55%, #f6fffb 100%);
}
.dash-rekap-t11 .dash-rekap-tingkat-head {
  background: linear-gradient(90deg, #059669, #10b981);
  color: #fff;
}
.dash-rekap-t11 .dash-rekap-matrix thead th {
  background: #d1fae5;
  color: #065f46;
}
.dash-rekap-t11 .dash-rekap-matrix thead .dash-rekap-corner {
  background: #a7f3d0;
}
.dash-rekap-t11 .dash-rekap-matrix tbody th {
  background: #ecfdf5;
  color: #047857;
}
.dash-rekap-t11 .dash-rekap-row-total td,
.dash-rekap-t11 .dash-rekap-row-total th,
.dash-rekap-t11 .dash-rekap-col-total {
  background: #d1fae5;
}

/* Tingkat 12 — amber */
.dash-rekap-t12 {
  border-color: #fcd34d;
  background: linear-gradient(165deg, #fffbeb 0%, #fef3c7 55%, #fffdf5 100%);
}
.dash-rekap-t12 .dash-rekap-tingkat-head {
  background: linear-gradient(90deg, #d97706, #f59e0b);
  color: #fff;
}
.dash-rekap-t12 .dash-rekap-matrix thead th {
  background: #fef3c7;
  color: #92400e;
}
.dash-rekap-t12 .dash-rekap-matrix thead .dash-rekap-corner {
  background: #fde68a;
}
.dash-rekap-t12 .dash-rekap-matrix tbody th {
  background: #fffbeb;
  color: #b45309;
}
.dash-rekap-t12 .dash-rekap-row-total td,
.dash-rekap-t12 .dash-rekap-row-total th,
.dash-rekap-t12 .dash-rekap-col-total {
  background: #fef3c7;
}

/* Tingkat lain */
.dash-rekap-other {
  border-color: #cbd5e1;
  background: linear-gradient(165deg, #f8fafc 0%, #e2e8f0 100%);
}
.dash-rekap-other .dash-rekap-tingkat-head {
  background: linear-gradient(90deg, #475569, #64748b);
  color: #fff;
}

@media (max-width: 640px) {
  .dash-rekap-tingkat-head {
    padding: 0.65rem 0.75rem;
  }

  .dash-rekap-matrix-wrap {
    padding: 0.5rem 0.55rem 0.7rem;
  }

  .dash-rekap-matrix th,
  .dash-rekap-matrix td {
    padding: 0.45rem 0.4rem;
    font-size: 0.82rem;
  }
}

.gender-chart {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 0.5rem 0;
}

.gender-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.gender-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  font-weight: 500;
}

.gender-bar {
  height: 12px;
  background: #f1f5f9;
  border-radius: 99px;
  overflow: hidden;
}

.gender-fill.laki { background: #4f46e5; height: 100%; border-radius: 99px; }
.gender-fill.perempuan { background: #e11d48; height: 100%; border-radius: 99px; }

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
  align-items: center;
}

.search-box {
  flex: 1;
  min-width: 220px;
  position: relative;
}

.search-box svg {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--text-muted);
}

.search-box input {
  width: 100%;
  padding: 0.65rem 1rem 0.65rem 2.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.9rem;
  background: var(--surface);
}

.search-box input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(166, 124, 82, 0.18);
}

select {
  padding: 0.65rem 2rem 0.65rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.875rem;
  background: var(--surface);
  cursor: pointer;
}

.btn-outline {
  padding: 0.65rem 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-outline:hover:not(:disabled) {
  background: #f8fafc;
}

.btn-outline:disabled,
.btn-outline.is-waiting-file {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-outline.is-busy {
  opacity: 0.7;
  cursor: wait;
}

.btn-danger {
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #b91c1c;
  padding: 0.55rem 1rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.btn-danger:hover:not(:disabled) {
  background: #fee2e2;
  border-color: #fca5a5;
}

.btn-danger:disabled,
.btn-danger.is-busy {
  opacity: 0.5;
  cursor: not-allowed;
}

.danger-action-item-separated {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px dashed #fecaca;
}

.danger-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.update-app-panel {
  border: 1px solid #bfdbfe;
  background: #f8fbff;
}

.update-app-info {
  display: grid;
  gap: 0.35rem;
  margin: 0.75rem 0 1rem;
  font-size: 0.92rem;
}

.update-app-info p {
  margin: 0;
}

.update-app-label {
  display: inline-block;
  min-width: 6.5rem;
  color: #64748b;
}

.update-token-ok {
  color: #15803d;
  font-weight: 600;
}

.update-token-missing {
  color: #b45309;
  font-weight: 600;
}

.update-app-progress {
  margin: 0.25rem 0 1rem;
}

.update-app-progress-track {
  height: 10px;
  background: #e0e7ff;
  border-radius: 999px;
  overflow: hidden;
}

.update-app-progress-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: #0f172a;
  transition: width 0.35s ease;
}

.update-app-progress-fill.is-indeterminate {
  width: 38%;
  animation: update-progress-slide 1.15s ease-in-out infinite;
}

@keyframes update-progress-slide {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}

.update-app-progress-label {
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
  color: #64748b;
}

.update-app-progress.is-success .update-app-progress-fill {
  background: #059669;
}

.update-app-progress.is-warning .update-app-progress-fill {
  background: #d97706;
}

.update-app-progress.is-error .update-app-progress-fill {
  background: #dc2626;
}

.update-app-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.update-app-help {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: #334155;
}

.update-app-help code {
  display: block;
  margin-top: 0.35rem;
  padding: 0.55rem 0.7rem;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 8px;
  color: #312e81;
  word-break: break-all;
}

.update-app-output {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: #0f172a;
  color: #e2e8f0;
  font-size: 0.8rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 12rem;
  overflow: auto;
}

.reset-password-defaults {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
  line-height: 1.7;
}

.reset-password-defaults code {
  background: #f1f5f9;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-size: 0.85em;
}

.user-password-table code {
  background: #f1f5f9;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-size: 0.85em;
}

.inline-pass-input {
  width: 100%;
  min-width: 10rem;
  max-width: 14rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font: inherit;
  font-size: 0.88rem;
}

.guru-table-wrap {
  max-height: min(68vh, 680px);
  overflow: auto;
  scrollbar-width: thin;
}

.guru-data-table {
  min-width: 980px;
}

.guru-data-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  white-space: normal;
  line-height: 1.25;
  vertical-align: middle;
  background: var(--cream, #f7f1e8);
  box-shadow: 0 1px 0 var(--border);
}

.guru-data-table tbody td {
  white-space: nowrap;
}

.table-actions-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.reset-password-panel .btn-outline {
  font-weight: 600;
}

.danger-panel {
  border: 1px solid #fecaca;
  background: #fffbfb;
}

.danger-panel h2 {
  color: #b91c1c;
}

.danger-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 0.75rem;
}

.danger-action-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid #fee2e2;
  border-radius: 10px;
  background: #fff;
}

.danger-action-item strong {
  display: block;
  margin-bottom: 0.25rem;
}

@media (max-width: 640px) {
  .danger-action-item {
    flex-direction: column;
    align-items: stretch;
  }

  .danger-action-item .btn-danger {
    width: 100%;
  }
}

.btn-primary {
  padding: 0.65rem 1.25rem;
  border: none;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-primary:hover {
  background: var(--primary-dark);
}

.btn-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Tombol Preview — biru muda transparan kalem */
.btn-preview,
button.btn-primary[id*="preview"]:not([id*="close"]),
button.btn-outline[id*="preview"]:not([id*="close"]),
#btn-preview,
#btn-kegiatan-print-open {
  background: rgba(147, 197, 253, 0.32);
  color: #1e4b8a;
  border: 1px solid rgba(96, 165, 250, 0.42);
  box-shadow: none;
}

.btn-preview:hover:not(:disabled),
button.btn-primary[id*="preview"]:not([id*="close"]):hover:not(:disabled),
button.btn-outline[id*="preview"]:not([id*="close"]):hover:not(:disabled),
#btn-preview:hover:not(:disabled),
#btn-kegiatan-print-open:hover:not(:disabled) {
  background: rgba(147, 197, 253, 0.5);
  color: #163a6b;
  border-color: rgba(59, 130, 246, 0.5);
}

.btn-preview:disabled,
button.btn-primary[id*="preview"]:not([id*="close"]):disabled,
button.btn-outline[id*="preview"]:not([id*="close"]):disabled,
#btn-preview:disabled,
#btn-kegiatan-print-open:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: rgba(147, 197, 253, 0.22);
  color: #3b6ea5;
}

.kelas-form-panel,
.kelas-page-panel {
  margin-bottom: 1.25rem;
}

.kelas-page-panel .kelas-form {
  margin-bottom: 0.5rem;
}

.kelas-add-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.kelas-add-toolbar h2 {
  margin: 0;
}

.kelas-extra-section {
  margin: 1.25rem 0 1.5rem;
  padding: 1rem 1.1rem 1.15rem;
  border: 1px solid rgba(45, 74, 62, 0.18);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(232, 244, 238, 0.55), rgba(255, 255, 255, 0.9));
}

.kelas-extra-section.hidden,
.kelas-extra-section[hidden] {
  display: none !important;
}

.kelas-extra-section h2 {
  margin: 0 0 0.35rem;
}

.kelas-extra-tables {
  margin-top: 1rem;
}

.kelas-extra-siswa-list {
  max-height: min(58vh, 420px);
  overflow: auto;
  margin: 0.75rem 0 1rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  padding: 0.5rem 0.65rem;
}

.kelas-extra-siswa-group {
  margin-bottom: 0.85rem;
}

.kelas-extra-siswa-group h4 {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
}

.kelas-extra-siswa-item {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  padding: 0.2rem 0;
  font-size: 0.92rem;
}

.modal-card-wide {
  width: min(720px, 96vw);
  max-width: 96vw;
}

.jurnal-extra-actions {
  margin-top: 0.35rem;
}

.jurnal-extra-source-note {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  color: #2d4a3e;
}

.jurnal-extra-source-note.hidden {
  display: none !important;
}

.jurnal-row-extra-mirror td {
  background: rgba(232, 244, 238, 0.45);
}

.jurnal-extra-badge {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #1f4d3a;
  background: rgba(46, 125, 90, 0.12);
}

.kelas-add-section:not(.hidden):not([hidden]) {
  margin-bottom: 1rem;
}

.kelas-tables-grid {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.kelas-tingkat-block {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.kelas-tingkat-title {
  margin: 0;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-weight: 700;
}

.kelas-tingkat-10 {
  border-color: #93c5fd;
}

.kelas-tingkat-10 .kelas-tingkat-title {
  background: #dbeafe;
  color: #1e40af;
}

.kelas-tingkat-10 .kelas-table thead th {
  background: #eff6ff;
  color: #1e3a8a;
}

.kelas-tingkat-10 .kelas-table-wrap {
  border: none;
  border-radius: 0;
}

.kelas-tingkat-11 {
  border-color: #6ee7b7;
}

.kelas-tingkat-11 .kelas-tingkat-title {
  background: #d1fae5;
  color: #047857;
}

.kelas-tingkat-11 .kelas-table thead th {
  background: #ecfdf5;
  color: #065f46;
}

.kelas-tingkat-11 .kelas-table-wrap {
  border: none;
  border-radius: 0;
}

.kelas-tingkat-12 {
  border-color: #c4b5fd;
}

.kelas-tingkat-12 .kelas-tingkat-title {
  background: #ede9fe;
  color: #5b21b6;
}

.kelas-tingkat-12 .kelas-table thead th {
  background: #f5f3ff;
  color: #4c1d95;
}

.kelas-tingkat-12 .kelas-table-wrap {
  border: none;
  border-radius: 0;
}

.kelas-table-wrap {
  margin-top: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.kelas-table {
  margin: 0;
}

.kelas-table th,
.kelas-table td {
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  text-align: center;
}

.kelas-table th:nth-child(2),
.kelas-table td:nth-child(2),
.kelas-table th:nth-child(6),
.kelas-table td:nth-child(6) {
  text-align: left;
}

.kelas-table thead th {
  background: #f8fafc;
  font-weight: 600;
}

.link-edit {
  border: none;
  background: none;
  padding: 0;
  color: var(--primary);
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
}

.link-edit:hover {
  color: var(--primary-dark);
}

.btn-aksi {
  display: inline-block;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--primary);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.btn-aksi + .btn-aksi {
  margin-left: 0.35rem;
}

.btn-aksi:hover {
  background: var(--primary-light);
  border-color: var(--primary);
}

.btn-aksi-catatan {
  color: var(--primary);
}

.btn-aksi-catatan:hover {
  background: var(--primary-light);
  border-color: var(--primary);
}

.btn-aksi-reset-pass {
  color: #a16207;
}

.btn-aksi-reset-pass:hover {
  background: #fef9c3;
  border-color: #ca8a04;
}

.btn-aksi-delete {
  color: #b91c1c;
}

.btn-aksi-delete:hover {
  background: #fef2f2;
  border-color: #ef4444;
  color: #991b1b;
}

.col-aksi {
  white-space: nowrap;
  min-width: 9.5rem;
}

.aksi-empty {
  color: var(--text-muted);
}

/* Kolom preview foto di tabel Data Siswa */
.col-foto {
  width: 48px;
  text-align: center;
}

.siswa-foto-thumb {
  width: 38px;
  height: 50px;
  border-radius: 5px;
  object-fit: cover;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  background: #f1f5f9;
  border: 1px solid var(--border);
}

img.siswa-foto-thumb {
  cursor: zoom-in;
  transition: transform 0.12s;
}

img.siswa-foto-thumb:hover {
  transform: scale(1.04);
}

.siswa-foto-none {
  color: #cbd5e1;
  font-size: 0.9rem;
}

.foto-zoom {
  cursor: zoom-in;
}

.foto-hover-preview {
  position: fixed;
  z-index: 1100;
  pointer-events: none;
  padding: 4px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.35);
}

.foto-hover-preview.hidden {
  display: none;
}

.foto-hover-preview img {
  display: block;
  width: 150px;
  height: 200px;
  object-fit: cover;
  border-radius: 6px;
  background: #f1f5f9;
}

/* Lightbox pratinjau foto */
.foto-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15, 23, 42, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  cursor: zoom-out;
}

.foto-lightbox.hidden {
  display: none;
}

.foto-lightbox img {
  max-width: min(90vw, 520px);
  max-height: 90vh;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  background: #fff;
}

/* Foto Siswa */
.foto-bulk-panel code {
  background: #f1f5f9;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-size: 0.8rem;
}

.foto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
}

.foto-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.15s;
}

.foto-card:hover {
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

.foto-card.foto-uploading {
  opacity: 0.5;
  pointer-events: none;
}

.foto-thumb {
  aspect-ratio: 3 / 4;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.foto-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.foto-placeholder {
  color: #cbd5e1;
}

.foto-placeholder svg {
  width: 46px;
  height: 46px;
}

.foto-meta {
  padding: 0.55rem 0.65rem 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-height: 0;
}

.foto-meta strong {
  font-size: 0.82rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.foto-meta span {
  font-size: 0.72rem;
  color: var(--muted, #64748b);
}

.foto-card-actions {
  display: flex;
  gap: 0.35rem;
  padding: 0.5rem 0.65rem 0.65rem;
  margin-top: auto;
}

.foto-card-actions .btn-aksi {
  flex: 1;
  text-align: center;
}

.foto-source-card,
.foto-camera-card {
  width: min(100%, 420px);
}

.foto-source-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.foto-source-actions .btn-primary,
.foto-source-actions .btn-outline {
  width: 100%;
  min-height: 48px;
}

.foto-camera-body {
  margin-bottom: 0.75rem;
}

.foto-camera-video,
.foto-camera-canvas {
  display: block;
  width: 100%;
  max-height: min(55vh, 420px);
  border-radius: 10px;
  background: #0f172a;
  object-fit: cover;
}

.foto-camera-actions {
  flex-wrap: wrap;
}

.foto-camera-actions .btn-primary,
.foto-camera-actions .btn-outline {
  min-height: 44px;
}

.foto-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--muted, #64748b);
  padding: 1.5rem 0;
}

.foto-bulk-report {
  margin-top: 0.85rem;
  border-top: 1px solid var(--border);
  padding-top: 0.75rem;
  max-height: 260px;
  overflow-y: auto;
}

.foto-report-group h4 {
  margin: 0.4rem 0 0.3rem;
  font-size: 0.82rem;
}

.foto-report-group ul {
  margin: 0;
  padding-left: 0.5rem;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.foto-report-group li {
  font-size: 0.78rem;
  color: #475569;
}

.foto-report-group .ok {
  color: #059669;
  font-weight: 700;
}

.foto-report-group .err {
  color: #dc2626;
  font-weight: 700;
}

.kelas-form {
  display: grid;
  grid-template-columns: 140px minmax(0, 2fr) minmax(0, 1.4fr) auto;
  gap: 1rem;
  align-items: end;
  max-width: 100%;
}

.kelas-form-guru {
  grid-template-columns: minmax(260px, 2fr) minmax(160px, 1fr) minmax(100px, 0.7fr);
  gap: 0.65rem 0.8rem;
}

.kelas-form-guru .field-check {
  grid-column: auto;
  align-items: center;
  min-height: 32px;
  padding: 0;
}

.kelas-form-guru .kelas-form-actions {
  grid-column: 1 / -1;
  justify-content: flex-start;
  margin-top: 0;
}

.kelas-form-panel:has(#form-guru) {
  padding: 1rem 1.25rem;
}

.kelas-form-panel:has(#form-guru) h2 {
  margin-bottom: 0.55rem;
}

.kelas-form-panel:has(#form-guru) .panel-desc {
  margin: -0.2rem 0 0.75rem;
}

.kelas-form-guru .field input:not([type="checkbox"]) {
  min-height: 44px;
  padding-block: 0.65rem;
}

.kelas-form-mutasi {
  grid-template-columns: minmax(360px, 2fr) minmax(220px, 1.2fr) auto;
}

.kelas-form-naik-kelas {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  grid-template-columns: unset;
}

.naik-kelas-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
  width: 100%;
}

.naik-kelas-col {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
}

.naik-kelas-col .field {
  margin: 0;
}

.naik-kelas-tip {
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  background: #fce8e8;
  color: #5c2a2a;
  font-size: 0.88rem;
  line-height: 1.45;
  border: 1px solid color-mix(in srgb, #c45c5c 28%, transparent);
}

.naik-kelas-tip strong {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 700;
}

.naik-kelas-tip ol {
  margin: 0;
  padding-left: 1.15rem;
}

.naik-kelas-tip-asal {
  text-align: left;
}

.naik-kelas-tip-tujuan {
  text-align: right;
}

.naik-kelas-tip-tujuan ol {
  list-style-position: inside;
  padding-left: 0;
}

.naik-kelas-panel-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

@media (max-width: 900px) {
  .naik-kelas-columns {
    grid-template-columns: 1fr;
  }
  .naik-kelas-tip-tujuan {
    text-align: left;
  }
  .naik-kelas-tip-tujuan ol {
    list-style-position: outside;
    padding-left: 1.15rem;
  }
}

.siswa-add-panel {
  margin-bottom: 1rem;
}

.siswa-add-panel.hidden {
  display: none !important;
}

.siswa-import-panel.hidden {
  display: none !important;
}

#siswa-import-panel:not(.hidden),
#siswa-add-panel:not(.hidden) {
  position: relative;
  z-index: 5;
  pointer-events: auto;
}

#siswa-import-panel .import-actions,
#siswa-import-panel .import-actions button,
#siswa-import-panel .import-actions a {
  pointer-events: auto;
}

#siswa-list-view.hidden {
  display: none !important;
}

.siswa-add-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.siswa-add-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 0.5rem;
}

#btn-toggle-tambah-siswa.active,
#btn-toggle-import-siswa.active {
  background: var(--primary-dark);
}

.siswa-add-panel .template-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 1100px;
}

.siswa-add-panel .tpl-row-nama {
  grid-template-columns: 28px 200px minmax(520px, 1fr);
}

.siswa-add-panel .tpl-input-nama {
  min-width: 280px;
  max-width: 100%;
}

.siswa-add-panel .tpl-input-alamat-wali {
  min-width: 280px;
  min-height: 88px;
  max-width: 100%;
  resize: vertical;
}

.siswa-add-panel .tpl-row,
.siswa-add-panel .tpl-sub {
  display: grid;
  grid-template-columns: 28px 200px 1fr;
  gap: 10px;
  align-items: start;
}

.siswa-add-panel .tpl-row-2 {
  grid-template-columns: 28px 200px 1fr 28px 160px 120px;
}

.siswa-add-panel .tpl-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
}

.siswa-add-panel .tpl-sub {
  grid-template-columns: 48px 152px 1fr;
  padding-left: 28px;
}

.siswa-add-panel .tpl-no {
  font-weight: 700;
  color: #334155;
  padding-top: 10px;
}

.siswa-add-panel .tpl-label,
.siswa-add-panel .tpl-sub-label {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  padding-top: 10px;
}

.siswa-add-panel .tpl-input {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  background: #fff;
  box-sizing: border-box;
}

.siswa-add-panel .tpl-inline {
  display: grid;
  grid-template-columns: 1fr 180px;
  gap: 8px;
}

.siswa-add-panel .tpl-short {
  max-width: 180px;
}

@media (max-width: 768px) {
  .siswa-add-panel .tpl-row,
  .siswa-add-panel .tpl-sub,
  .siswa-add-panel .tpl-row-2,
  .siswa-add-panel .tpl-row-nama {
    grid-template-columns: 1fr;
  }

  .siswa-add-panel .tpl-sub {
    padding-left: 0;
  }

  .siswa-add-panel .tpl-no,
  .siswa-add-panel .tpl-label,
  .siswa-add-panel .tpl-sub-label {
    padding-top: 0;
  }

  .siswa-add-panel .tpl-inline {
    grid-template-columns: 1fr;
  }
}

.kelas-form-mutasi .field-wide {
  grid-column: span 1;
}

.kelas-form .field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

body.kelas-ketua-only .kelas-form .field.is-locked {
  opacity: 0.72;
}

body.kelas-ketua-only .kelas-form .field.is-locked input,
body.kelas-ketua-only .kelas-form .field.is-locked select {
  pointer-events: none;
  background: var(--surface-muted, #f3f4f6);
  color: #64748b;
}

.kelas-form .field.field-wide {
  grid-column: span 2;
}

.kelas-form .field span {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
}

.kelas-form .field input,
.kelas-form .field select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0.9rem 1rem;
  min-height: 52px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: inherit;
  font-size: 1rem;
  background: var(--surface);
  box-sizing: border-box;
}

/* Native <select> tends to size to the longest option (guru + NIP). */
.kelas-form .field select {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kelas-form .field input:focus,
.kelas-form .field select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(166, 124, 82, 0.18);
}

.kelas-form-actions {
  display: flex;
  align-items: flex-end;
}


.ringkasan-head-actions {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 0.75rem;
}

.naik-kelas-siswa-wrap {
  margin-top: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface, #fff) 92%, var(--primary) 8%);
  overflow: hidden;
}

.naik-kelas-tujuan-wrap {
  background: color-mix(in srgb, var(--surface, #fff) 94%, #64748b 6%);
}

.naik-kelas-siswa-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface, #fff) 96%, var(--primary) 4%);
}

.naik-kelas-select-all {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  margin: 0;
}

.naik-kelas-siswa-count {
  font-size: 0.82rem;
  color: var(--muted, #6b7280);
  white-space: nowrap;
}

.naik-kelas-siswa-list {
  max-height: 420px;
  overflow: auto;
  padding: 0.35rem 0;
}

.naik-kelas-siswa-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.9rem;
  margin: 0;
}

.naik-kelas-siswa-item.is-action {
  cursor: pointer;
}

.naik-kelas-siswa-item.is-readonly {
  cursor: default;
}

.naik-kelas-siswa-item.is-action:hover {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.naik-kelas-siswa-item.is-readonly:hover {
  background: transparent;
}

.naik-kelas-siswa-item .naik-siswa-info {
  min-width: 0;
  flex: 1 1 auto;
}

.naik-kelas-siswa-item .naik-siswa-meta {
  color: var(--muted, #6b7280);
  font-size: 0.82rem;
}

.naik-kelas-siswa-item .btn-naik-siswa {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 0.78rem;
  padding: 0.28rem 0.55rem;
}

.naik-kelas-siswa-empty {
  padding: 0.85rem;
  color: var(--muted, #6b7280);
  font-size: 0.9rem;
}

.naik-kelas-section + .naik-kelas-section {
  border-top: 1px solid var(--border);
}

.naik-kelas-section-title {
  padding: 0.55rem 0.85rem 0.25rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted, #64748b);
}

.naik-kelas-section-existing .naik-kelas-siswa-item.is-readonly {
  background: color-mix(in srgb, var(--surface, #fff) 88%, #94a3b8 12%);
}

.rollover-mode-options {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding-top: 0.15rem;
}

.rollover-mode-options .field-check-label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  margin: 0;
}

.mutasi-register-panel {
  overflow-x: auto;
}

#page-mutasi h2.mutasi-head-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 0.75rem;
}

#page-mutasi .panel h2:not(.mutasi-head-title) {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
}

.mutasi-section {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.mutasi-section-title {
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.kelas-form-mutasi-reg {
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  margin-bottom: 1rem;
}

.kelas-form-mutasi-reg .field-wide {
  grid-column: span 2;
}

.kelas-form-mutasi-reg .kelas-form-actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
}

.btn-save-red {
  background: #dc2626;
  min-height: 52px;
  padding: 0.9rem 1.75rem;
  font-size: 1rem;
  border-radius: 10px;
  white-space: nowrap;
  color: #fff;
  border: none;
  cursor: pointer;
}

.btn-save-red:hover {
  background: #b91c1c;
}

.btn-save-red:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.mutasi-tables {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.mutasi-semester-block h4 {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  font-weight: 700;
}

.mutasi-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.mutasi-table th,
.mutasi-table td {
  border: 1px solid #111;
  padding: 0.45rem 0.5rem;
  text-align: left;
  vertical-align: top;
}

.mutasi-table th {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.mutasi-table-masuk thead th {
  background: #92d050;
}

.mutasi-table-keluar thead th {
  background: #f4b084;
}

.mutasi-table .col-no {
  width: 40px;
  text-align: center;
}

.mutasi-table .col-jns {
  width: 42px;
  text-align: center;
}

.mutasi-table .col-action {
  width: 96px;
  text-align: center;
  white-space: nowrap;
}

.btn-mutasi-edit,
.btn-mutasi-delete {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0.15rem 0.35rem;
}

.btn-mutasi-edit {
  color: #1d4ed8;
}

.btn-mutasi-edit:hover {
  text-decoration: underline;
}

.btn-mutasi-delete {
  color: #b91c1c;
}

.btn-mutasi-delete:hover {
  text-decoration: underline;
}

.btn-delete-kelas {
  border: none;
  background: transparent;
  color: #b91c1c;
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0.15rem 0.35rem;
}

.btn-delete-kelas:hover:not(:disabled) {
  text-decoration: underline;
}

.btn-delete-kelas:disabled {
  color: #9ca3af;
  cursor: not-allowed;
}

.btn-save-green {
  background: #059669;
  min-height: 52px;
  padding: 0.9rem 1.75rem;
  font-size: 1rem;
  border-radius: 10px;
  white-space: nowrap;
}

.btn-save-green:hover {
  background: #047857;
}

.btn-save-green:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Preview mengalahkan hijau simpan jika keduanya ada */
.btn-primary.btn-save-green.btn-preview,
#btn-daftar-kelas-preview {
  background: rgba(147, 197, 253, 0.32);
  color: #1e4b8a;
  border: 1px solid rgba(96, 165, 250, 0.42);
}

.btn-primary.btn-save-green.btn-preview:hover:not(:disabled),
#btn-daftar-kelas-preview:hover:not(:disabled) {
  background: rgba(147, 197, 253, 0.5);
  color: #163a6b;
  border-color: rgba(59, 130, 246, 0.5);
}

.form-msg {
  margin-top: 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.form-msg.success {
  color: #059669;
  white-space: pre-line;
}

.form-msg.error {
  color: #e11d48;
  white-space: pre-line;
}

.pekerjaan-jenis-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 0.82rem;
  font: inherit;
}

.pekerjaan-settings-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 1rem;
}

.pekerjaan-jenis-panel {
  flex: 1 1 320px;
  max-width: min(100%, 560px);
  padding: 1rem 1.1rem;
}

.mapel-pekerjaan-panel {
  flex: 1 1 320px;
  max-width: min(100%, 560px);
  padding: 1rem 1.1rem;
}

.mapel-pekerjaan-panel h2 {
  font-size: 0.95rem;
  margin-bottom: 0.35rem;
}

.mapel-pekerjaan-panel .panel-desc {
  font-size: 0.78rem;
  margin: 0 0 0.65rem;
}

.mapel-pekerjaan-table-wrap {
  max-height: 220px;
  overflow-y: auto;
  margin-bottom: 0.5rem;
}

.mapel-pekerjaan-table th,
.mapel-pekerjaan-table td {
  padding: 0.35rem 0.5rem;
  font-size: 0.8rem;
}

.mapel-pekerjaan-table th:first-child,
.mapel-pekerjaan-table td:first-child {
  width: 36px;
  text-align: center;
}

.mapel-pekerjaan-table th:last-child,
.mapel-pekerjaan-table td:last-child {
  width: 64px;
  text-align: center;
}

.mapel-pekerjaan-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 0.82rem;
  font: inherit;
}

.mapel-pekerjaan-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.mapel-pekerjaan-panel .btn-primary.sm,
.mapel-pekerjaan-panel .btn-outline.sm {
  min-height: 32px;
}

.pekerjaan-jenis-panel h2 {
  font-size: 0.95rem;
  margin-bottom: 0.35rem;
}

.pekerjaan-jenis-panel .panel-desc {
  font-size: 0.78rem;
  margin: 0 0 0.65rem;
}

@media (max-width: 768px) {
  .pekerjaan-settings-row {
    flex-direction: column;
  }

  .pekerjaan-jenis-panel,
  .mapel-pekerjaan-panel {
    flex: 1 1 auto;
    max-width: 100%;
  }
}

.pekerjaan-jenis-table-wrap {
  max-height: 220px;
  overflow-y: auto;
  margin-bottom: 0.5rem;
}

.pekerjaan-jenis-table th,
.pekerjaan-jenis-table td {
  padding: 0.35rem 0.5rem;
  font-size: 0.8rem;
}

.pekerjaan-jenis-table th:first-child,
.pekerjaan-jenis-table td:first-child {
  width: 36px;
  text-align: center;
}

.pekerjaan-jenis-table th:last-child,
.pekerjaan-jenis-table td:last-child {
  width: 64px;
  text-align: center;
}

.pekerjaan-jenis-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.pekerjaan-jenis-panel .btn-primary.sm,
.pekerjaan-jenis-panel .btn-outline.sm {
  padding: 5px 10px;
  font-size: 0.78rem;
}

.pekerjaan-jenis-panel .form-msg {
  font-size: 0.78rem;
  margin-top: 0.35rem;
}

.form-msg.hidden {
  display: none;
}

.sekolah-settings-grid {
  display: grid;
  grid-template-columns: 220px minmax(560px, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.sekolah-media-settings {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sekolah-media-label {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sekolah-settings-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.sekolah-settings-form .field {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 0.75rem 1rem;
  align-items: center;
}

.sekolah-settings-form .field span {
  font-size: 0.9rem;
  font-weight: 600;
  color: #334155;
}

.sekolah-settings-form .field input,
.sekolah-settings-form .field textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  font-size: 0.95rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: inherit;
  box-sizing: border-box;
}

.sekolah-settings-form .field textarea {
  min-height: 72px;
  resize: vertical;
}

.sekolah-settings-form .field.full {
  grid-column: auto;
}

.sekolah-settings-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.sekolah-settings-row .field {
  min-width: 0;
}

.sekolah-settings-form .btn-primary {
  margin-top: 0.25rem;
  align-self: flex-start;
}

.sekolah-logo-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: #f8fafc;
}

.sekolah-logo-preview {
  width: 120px;
  height: 120px;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--border);
}

.sekolah-logo-preview.hidden {
  display: none;
}

.sekolah-logo-empty {
  width: 120px;
  height: 120px;
  display: grid;
  place-items: center;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  color: #94a3b8;
  font-size: 0.8rem;
  text-align: center;
  padding: 0.5rem;
}

.sekolah-logo-empty.hidden {
  display: none;
}

.sekolah-favicon-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: #f8fafc;
}

.sekolah-favicon-preview {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--border);
}

.sekolah-favicon-preview.hidden {
  display: none;
}

.sekolah-favicon-empty {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  color: #94a3b8;
  font-size: 0.65rem;
  text-align: center;
  padding: 0.25rem;
}

.sekolah-favicon-empty.hidden {
  display: none;
}

@media (max-width: 768px) {
  .sekolah-settings-grid {
    grid-template-columns: 1fr;
  }

  .sekolah-settings-form .field {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .sekolah-settings-row {
    grid-template-columns: 1fr;
  }
}

.import-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.import-filename {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.file-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.table-info {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.siswa-selected-info {
  color: var(--primary);
  font-weight: 500;
}

.data-table .col-check {
  width: 2.5rem;
  text-align: center;
  padding-left: 0.75rem;
  padding-right: 0.5rem;
}

.data-table .col-check input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: var(--primary);
}

.field-check {
  display: flex;
  align-items: center;
}

.field-check-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  cursor: pointer;
  user-select: none;
}

.field-check-label input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--primary);
}

.td-check {
  text-align: center;
  white-space: nowrap;
}

.guru-izin-toggle,
.guru-berita-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}

.guru-izin-toggle input,
.guru-berita-toggle input {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--primary);
}

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.data-table th {
  text-align: left;
  padding: 0.75rem 1rem;
  background: #faf6f0;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.data-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
}

.data-table tbody tr:hover {
  background: #f8fafc;
}

.data-table.compact td,
.data-table.compact th {
  padding: 0.6rem 0.875rem;
}

.data-table tfoot td {
  font-weight: 700;
  background: #f1f5f9;
  border-top: 2px solid var(--border);
}

.data-table tbody tr.rekap-tingkat-total td {
  font-weight: 700;
  border-top: 2px solid transparent;
  border-bottom: 1px solid transparent;
}

.data-table tbody tr.rekap-tingkat-10 td { background: #f5f7ff; }
.data-table tbody tr.rekap-tingkat-10.rekap-tingkat-total td {
  background: #e0e7ff;
  border-top-color: #a5b4fc;
  border-bottom-color: #c7d2fe;
  color: #312e81;
}

.data-table tbody tr.rekap-tingkat-11 td { background: #f0fdf4; }
.data-table tbody tr.rekap-tingkat-11.rekap-tingkat-total td {
  background: #bbf7d0;
  border-top-color: #4ade80;
  border-bottom-color: #86efac;
  color: #14532d;
}

.data-table tbody tr.rekap-tingkat-12 td { background: #fffbeb; }
.data-table tbody tr.rekap-tingkat-12.rekap-tingkat-total td {
  background: #fde68a;
  border-top-color: #fbbf24;
  border-bottom-color: #fcd34d;
  color: #78350f;
}

.data-table tbody tr.rekap-tingkat-other td { background: #f8fafc; }
.data-table tbody tr.rekap-tingkat-other.rekap-tingkat-total td {
  background: #e2e8f0;
  border-top-color: #94a3b8;
  border-bottom-color: #cbd5e1;
  color: #0f172a;
}

.badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}

.badge.l { background: #e0e7ff; color: #4338ca; }
.badge.p { background: #ffe4e6; color: #be123c; }

.pagination {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}

.page-btn {
  min-width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s;
}

.page-btn:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
}

.page-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal.hidden {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}

.modal-card {
  position: relative;
  width: min(100%, 920px);
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.2);
  padding: 1.25rem;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.modal-header h2 {
  font-size: 1.1rem;
}

.modal-close {
  border: none;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted);
}

.modal-form {
  grid-template-columns: 140px minmax(140px, 1fr) minmax(220px, 2fr) auto;
}

.modal-form.guru-edit-form {
  grid-template-columns: minmax(280px, 2fr) minmax(200px, 1fr);
}

.modal-form.guru-edit-form .field-check {
  grid-column: 1 / -1;
}

.modal-form.guru-edit-form .kelas-form-actions {
  grid-column: 1 / -1;
}

.modal-form .kelas-form-actions {
  justify-content: flex-end;
  gap: 0.5rem;
}

.modal-form .kelas-form-actions .btn-outline {
  min-height: 52px;
  padding: 0.9rem 1.25rem;
  font-size: 1rem;
  border-radius: 10px;
}

.daftar-kelas-modal-card {
  width: min(100%, 960px);
  max-height: calc(100vh - 2rem);
  overflow: auto;
}

.daftar-kelas-form .form-grid.two-col {
  margin-bottom: 0.75rem;
}

.daftar-kelas-ket-wrap {
  max-height: 340px;
  overflow: auto;
  margin: 0.75rem 0 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.daftar-kelas-ket-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
}

.daftar-kelas-ket-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

@media (max-width: 900px) {
  .kelas-form,
  .modal-form {
    grid-template-columns: 1fr 1fr;
  }

  .kelas-form-actions,
  .modal-form .kelas-form-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .kelas-form-actions .btn-save-green,
  .modal-form .kelas-form-actions .btn-outline {
    flex: 1;
  }
}

@media (max-width: 560px) {
  .kelas-form,
  .modal-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .sidebar-toggle {
    display: inline-flex;
  }

  .sidebar {
    width: min(280px, 88vw);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: none;
    padding-top: max(1rem, env(safe-area-inset-top));
    padding-bottom: max(0.65rem, env(safe-area-inset-bottom));
    padding-left: max(0.65rem, env(safe-area-inset-left));
    /* Pastikan drawer HP bisa men-scroll seluruh menu guru */
    max-height: 100dvh;
    overflow: hidden;
  }

  .sidebar .nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  body.sidebar-open .sidebar {
    transform: translateX(0);
    box-shadow: 8px 0 32px rgba(61, 46, 31, 0.28);
  }

  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 150;
    background: rgba(61, 46, 31, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }

  body.sidebar-open .sidebar-overlay {
    display: block;
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
  }

  /* Overlay jangan menutupi bottom nav — Home/Menu tetap bisa diklik */
  body.has-mobile-bottom-nav.sidebar-open .sidebar-overlay {
    bottom: calc(var(--mobile-bottom-nav-height, 64px) + env(safe-area-inset-bottom, 0px));
  }

  .main {
    margin-left: 0;
    padding: 1rem;
    padding-top: max(1rem, env(safe-area-inset-top));
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
    max-width: 100%;
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  .app {
    max-width: 100vw;
    overflow-x: hidden;
  }

  .page,
  .panel,
  .panel-toolbar-actions,
  .field,
  .form-grid,
  .siswa-preview-panel,
  .siswa-preview-card,
  .siswa-preview-body {
    min-width: 0;
    max-width: 100%;
  }

  .field > select,
  .field > input,
  .siswa-search-row,
  .siswa-search-row input {
    max-width: 100%;
    box-sizing: border-box;
  }

  .panel-toolbar-actions {
    width: 100%;
  }

  .panel-toolbar-actions > .btn-outline,
  .panel-toolbar-actions > .btn-primary {
    flex: 1 1 auto;
  }

  .topbar {
    margin-bottom: 1.25rem;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
  }

  .topbar h1 {
    font-size: 1.35rem;
  }

  .topbar p {
    font-size: 0.88rem;
  }

  .topbar-right {
    width: 100%;
    justify-content: flex-start;
  }

  .mode-switch {
    width: 100%;
  }

  .mode-switch a {
    flex: 1;
    text-align: center;
    white-space: normal;
  }

  .panel {
    padding: 1.1rem;
    margin-bottom: 1rem;
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .stat-card {
    padding: 1rem;
    gap: 0.75rem;
  }

  .stat-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }

  .stat-icon svg {
    width: 22px;
    height: 22px;
  }

  .stat-label {
    font-size: 0.75rem;
    line-height: 1.3;
  }

  .stat-value {
    font-size: 1.45rem;
  }

  .dashboard-tabs {
    flex-wrap: nowrap;
    margin-left: -0.15rem;
    margin-right: -0.15rem;
    padding: 0.15rem;
  }

  .dashboard-tab,
  .presensi-tab-btn {
    min-height: 48px;
    padding: 0.65rem 1.1rem;
  }

  .nav-btn,
  .nav-btn.nav-sub {
    min-height: 36px;
    padding-top: 0.28rem;
    padding-bottom: 0.28rem;
    padding-left: 0.45rem;
    padding-right: 0.45rem;
    line-height: 1.2;
  }

  .nav {
    gap: 0.2rem;
  }

  .nav-section {
    gap: 0.05rem;
  }

  .nav-submenu {
    gap: 0;
    padding-left: 0;
  }

  .nav-menu-label {
    padding: 0.45rem 0.4rem 0.12rem;
    font-size: 0.66rem;
  }

  .nav-section[data-nav-group="jadwal-aktif"] {
    margin-bottom: 0.15rem;
  }

  .nav-btn.nav-guru-jadwal-top {
    min-height: 40px;
    margin-bottom: 0.05rem;
    padding: 0.4rem 0.55rem;
  }

  .lang-btn {
    min-height: 40px;
    min-width: 40px;
    padding: 0.45rem 0.75rem;
  }

  .table-wrap {
    margin-left: -0.25rem;
    margin-right: -0.25rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .berita-panel-head {
    flex-direction: column;
    align-items: stretch;
  }

  .berita-panel-head .btn-primary {
    width: 100%;
    min-height: 48px;
  }

  .toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .search-box {
    min-width: 0;
    width: 100%;
  }

  .toolbar select,
  .toolbar .btn-outline,
  .toolbar .btn-primary {
    width: 100%;
  }

  .panel.panel-toolbar,
  .kemajuan-toolbar,
  .siswa-add-head,
  .kemajuan-table-head,
  .alumni-list-head {
    flex-direction: column;
    align-items: stretch;
  }

  .kemajuan-toolbar-actions,
  .kemajuan-table-actions,
  .alumni-list-filters {
    width: 100%;
  }

  .kelas-form-mutasi-reg {
    grid-template-columns: 1fr 1fr;
  }

  .kelas-form-mutasi-reg .field-wide {
    grid-column: span 2;
  }

  .modal {
    padding: 0.5rem;
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
    align-items: flex-end;
  }

  .modal-backdrop {
    background: rgba(61, 46, 31, 0.45);
  }

  .modal-card {
    width: 100%;
    max-height: calc(100dvh - 1rem - env(safe-area-inset-top));
    overflow: auto;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    -webkit-overflow-scrolling: touch;
  }

  .modal-card.kegiatan-print-card {
    overflow: visible;
  }

  .modal-close {
    min-width: 48px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .daftar-kelas-modal-card {
    max-height: calc(100vh - 0.5rem);
  }

  .foto-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.75rem;
  }

  .mutasi-semester-block {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .pagination {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 560px) {
  .main {
    padding: 0.75rem;
    padding-top: max(0.75rem, env(safe-area-inset-top));
    padding-left: max(0.75rem, env(safe-area-inset-left));
    padding-right: max(0.75rem, env(safe-area-inset-right));
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  }

  /* Pertahankan 2 kolom seperti pola perpustakaan (stat cards) */
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stat-card {
    padding: 0.85rem 0.9rem;
  }

  .stat-value {
    font-size: 1.45rem;
  }

  .panel h2 {
    font-size: 1rem;
  }

  .panel-desc {
    font-size: 0.82rem;
  }

  .topbar h1 {
    font-size: 1.2rem;
  }

  .topbar-left {
    align-items: center;
  }

  .lang-switch,
  .mode-switch {
    width: 100%;
  }

  .lang-btn,
  .mode-switch a {
    flex: 1;
    text-align: center;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .bar-row {
    grid-template-columns: 48px 1fr 40px;
    gap: 0.5rem;
  }

  .kelas-form-mutasi-reg {
    grid-template-columns: 1fr;
  }

  .kelas-form-mutasi-reg .field-wide {
    grid-column: span 1;
  }

  .data-table {
    font-size: 0.8rem;
  }

  .data-table th,
  .data-table td {
    padding: 0.55rem 0.65rem;
  }

  .foto-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .user-actions {
    flex-direction: column;
  }

  .user-action-btn {
    width: 100%;
    justify-content: center;
  }
}

.kemajuan-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}

.kemajuan-toolbar-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.kemajuan-periode-cetak {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border, #e2e8f0);
  display: grid;
  gap: 0.4rem;
}

.kemajuan-periode-cetak.hidden {
  display: none !important;
}

.kegiatan-lain-periode-cetak {
  margin: 0.75rem 0 0.35rem;
  padding: 0.75rem 0 0;
  border-top: 1px solid var(--border, #e2e8f0);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 220px));
  gap: 0.65rem 1rem;
  align-items: end;
}

.kegiatan-lain-periode-cetak .kegiatan-lain-periode-hint {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.82rem;
}

.kegiatan-lain-periode-cetak .date-ddmmyyyy {
  width: 100%;
  max-width: 220px;
}

/* Jurnal: satu panel, 2 kolom (keterangan+kelas | tanggal cetak+preview) */
.jurnal-header-panel {
  display: grid;
  gap: 0.85rem;
}

.jurnal-header-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(200px, 0.85fr);
  gap: 1.25rem 1.75rem;
  align-items: stretch;
}

.jurnal-header-left,
.jurnal-header-right {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  align-content: start;
  min-height: 100%;
}

.jurnal-header-left .panel-desc {
  margin: 0;
}

.jurnal-header-left .kemajuan-pekan-label {
  margin: 0;
  padding-bottom: 0;
  font-size: 0.88rem;
  opacity: 0.92;
}

.jurnal-header-left .jurnal-header-status {
  margin: auto 0 0;
  align-self: start;
  min-height: 2.4rem;
  display: flex;
  align-items: center;
}

.jurnal-header-left .jurnal-header-status.hidden {
  visibility: hidden;
  display: flex;
}

.jurnal-header-right.kemajuan-periode-cetak {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.jurnal-header-right .field > span {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--muted, #6b5a4a);
}

.jurnal-header-right .date-ddmmyyyy {
  width: 100%;
  max-width: 220px;
}

.jurnal-header-print-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: auto;
  min-height: 2.4rem;
}

.jurnal-header-print-actions .btn-outline {
  min-width: 6.5rem;
}

.jurnal-header-print-actions #btn-jurnal-export-word {
  min-width: 8.5rem;
}

.jurnal-header-grid:has(.jurnal-header-right.hidden) {
  grid-template-columns: 1fr;
}

@media (max-width: 820px) {
  .jurnal-header-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .jurnal-header-right .date-ddmmyyyy {
    max-width: none;
  }
}

.form-grid {
  display: grid;
  gap: 0.65rem 1rem;
}

.kemajuan-filter-grid {
  grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
  align-items: end;
}

.kemajuan-filter-grid .kemajuan-pekan-label {
  margin: 0;
  padding-bottom: 0.55rem;
  align-self: end;
}

.kemajuan-filter-grid .jurnal-tgl-filter {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  cursor: text;
}

.kemajuan-filter-grid .jurnal-tgl-filter.is-invalid {
  border-color: #dc2626;
  box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.2);
}

.jurnal-periode-date-range {
  display: grid;
  grid-template-columns: minmax(145px, 1fr) auto minmax(145px, 1fr);
  gap: 0.55rem;
  align-items: end;
  max-width: 28rem;
}

.jurnal-periode-date-range label {
  display: grid;
  gap: 0.3rem;
}

.jurnal-periode-date-range small {
  color: var(--muted, #64748b);
  font-size: 0.72rem;
  font-weight: 500;
}

.date-ddmmyyyy {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.date-ddmmyyyy > input[type="text"] {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  padding-right: 2.5rem;
  box-sizing: border-box;
}

/* Hanya area ikon: native date disembunyikan total agar tidak menimpa teks DD/MM/YYYY */
.date-ddmmyyyy-picker {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  width: 2.5rem;
  max-width: 2.5rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  color: transparent;
  background: transparent;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
}

.date-ddmmyyyy-picker::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0;
}

.date-ddmmyyyy-picker::-webkit-datetime-edit,
.date-ddmmyyyy-picker::-webkit-datetime-edit-fields-wrapper,
.date-ddmmyyyy-picker::-webkit-datetime-edit-text,
.date-ddmmyyyy-picker::-webkit-datetime-edit-month-field,
.date-ddmmyyyy-picker::-webkit-datetime-edit-day-field,
.date-ddmmyyyy-picker::-webkit-datetime-edit-year-field,
.date-ddmmyyyy-picker::-webkit-inner-spin-button {
  display: none !important;
  width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Ikon kalender di kanan field teks */
.date-ddmmyyyy::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0.65rem;
  z-index: 2;
  width: 1.1rem;
  height: 1.1rem;
  transform: translateY(-50%);
  pointer-events: none;
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

.jurnal-periode-date-range .date-ddmmyyyy,
.kemajuan-filter-grid .date-ddmmyyyy {
  max-width: 100%;
}

.jurnal-form-table .jurnal-tgl {
  min-width: 9.5rem;
  width: 9.5rem;
  cursor: text;
}

.jurnal-periode-date-range .jurnal-periode-tgl {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  cursor: text;
  width: 100%;
}

.jurnal-periode-separator {
  padding-bottom: 0.7rem;
  color: var(--muted, #64748b);
}

.kemajuan-periode-hint {
  margin: 0;
  max-width: 36rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--muted, #64748b);
}

.kemajuan-filter-actions {
  display: flex;
  align-items: flex-end;
}

.kemajuan-filter-actions .btn-outline {
  white-space: nowrap;
}

.kemajuan-admin-note {
  margin: 0 0 0.75rem;
}

.kemajuan-table-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.kemajuan-table-head h3 {
  margin: 0;
  font-size: 1rem;
}

.kemajuan-table-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

/* Panel form jurnal: tinggi mengikuti konten agar tombol navigasi terlihat */
#page-kemajuan-kelas.page.active {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#page-kemajuan-kelas .panel-jurnal-form {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  padding-bottom: 0.75rem;
}

#page-kemajuan-kelas .panel-jurnal-form .kemajuan-table-head {
  flex: 0 0 auto;
}

.jurnal-guru-nav-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 0.85rem;
  padding-bottom: 0.35rem;
}

.jurnal-guru-nav-actions.hidden {
  display: none;
}

.jurnal-guru-nav-actions #btn-jurnal-ke-jadwal,
.jurnal-guru-nav-actions #btn-presensi-kbm-ke-jadwal {
  background: #c5d4cb;
  border-color: #7a9484;
  color: #2a3a32;
}

.jurnal-guru-nav-actions #btn-jurnal-ke-jadwal:hover:not(:disabled),
.jurnal-guru-nav-actions #btn-presensi-kbm-ke-jadwal:hover:not(:disabled) {
  background: #b4c7bb;
  border-color: #5f7a6a;
  color: #1e2b24;
}

#btn-jurnal-add-row,
#btn-jurnal-print-guru {
  background: #c5d4cb;
  border-color: #7a9484;
  color: #2a3a32;
}

#btn-jurnal-add-row:hover:not(:disabled),
#btn-jurnal-print-guru:hover:not(:disabled) {
  background: #b4c7bb;
  border-color: #5f7a6a;
  color: #1e2b24;
}

.jurnal-guru-nav-actions #btn-jurnal-ke-beranda,
.jurnal-guru-nav-actions #btn-presensi-kbm-ke-jurnal {
  background: #e8eee9;
  border-color: #b7c4ba;
  color: #3f5248;
}

.jurnal-guru-nav-actions #btn-jurnal-ke-beranda:hover:not(:disabled),
.jurnal-guru-nav-actions #btn-presensi-kbm-ke-jurnal:hover:not(:disabled) {
  background: #dce6de;
  border-color: #8aa193;
  color: #2f3f37;
}

.jurnal-table-wrap {
  flex: 0 0 auto;
  overflow-x: auto;
  overflow-y: visible;
  min-height: 0;
  max-height: none;
  padding-bottom: 0.35rem;
}

/* Saat popup jam terbuka: jangan clip scroller (overflow-x:auto memaksa clip vertikal). */
.jurnal-table-wrap.jam-picker-open {
  overflow: visible;
}

@media (max-width: 820px) {
  /* Di HP tetap bisa geser tabel; popup jam diposisikan fixed via JS */
  .jurnal-table-wrap.jam-picker-open {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }

  .jurnal-jam-picker.is-open .jurnal-jam-popup {
    position: fixed;
    z-index: 6000;
  }
}

.jurnal-form-table {
  overflow: visible;
  width: 100%;
}

.jurnal-form-table.data-table.compact td,
.jurnal-form-table.data-table.compact th {
  padding: 0.75rem 0.65rem;
}

.jurnal-form-table th,
.jurnal-form-table td {
  vertical-align: top;
  min-width: 90px;
}

.jurnal-form-table thead th {
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

.jurnal-form-table .jurnal-input {
  width: 100%;
  min-width: 72px;
  min-height: 2.5rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.4;
  background: #fff;
}

.jurnal-form-table .jurnal-textarea {
  min-width: 120px;
  min-height: 7.5rem;
  resize: vertical;
  line-height: 1.45;
}

.jurnal-textarea-materi,
.jurnal-cell-materi,
.jurnal-cell-math,
.jurnal-math-field,
.jurnal-math-preview {
  font-family: 'Noto Naskh Arabic', 'Noto Sans Javanese', 'Plus Jakarta Sans', 'Noto Sans Math', 'Cambria Math', 'Segoe UI Symbol', serif;
  unicode-bidi: plaintext;
  text-align: start;
}

.jurnal-math-editor {
  position: relative;
  min-height: 4.5rem;
}

.jurnal-math-editor .jurnal-math-field {
  display: none;
  width: 100%;
  min-height: 4.5rem;
  box-sizing: border-box;
  border: 1px solid var(--border, #cbd5e1);
  border-radius: 6px;
  background: #fff;
  padding: 0.45rem 0.55rem;
}

.jurnal-math-editor.is-editing .jurnal-math-field {
  display: block;
}

.jurnal-math-editor.is-editing .jurnal-math-preview {
  display: none;
}

.jurnal-math-preview {
  min-height: 4.5rem;
  box-sizing: border-box;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--border, #cbd5e1);
  border-radius: 6px;
  background: #fff;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  cursor: text;
}

.jurnal-math-preview:hover,
.jurnal-math-preview:focus {
  border-color: #94a3b8;
  background: #fff;
  outline: none;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06);
}

.jurnal-math-preview:empty::before {
  content: attr(data-placeholder);
  color: #94a3b8;
  font-style: italic;
}

.jurnal-msqrt {
  display: inline-flex;
  align-items: flex-start;
  white-space: nowrap;
  vertical-align: middle;
}

.jurnal-msqrt-rad {
  font-size: 1.2em;
  line-height: 1;
  margin-right: 0.02em;
}

.jurnal-msqrt-body {
  border-top: 1.6px solid currentColor;
  padding: 0 0.14em 0 0.04em;
  margin-top: 0.12em;
  line-height: 1.25;
}

.jurnal-msup {
  font-size: 0.72em;
  vertical-align: super;
  line-height: 0;
}

.jurnal-msub {
  font-size: 0.72em;
  vertical-align: sub;
  line-height: 0;
}

.jurnal-mdot {
  margin: 0 0.06em;
}

.jurnal-mfn {
  font-style: italic;
}

.jurnal-mabs {
  white-space: nowrap;
}

.jurnal-cell-materi.jurnal-cell-script {
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 3rem;
}

.jurnal-cell-math .jurnal-msqrt,
.jurnal-math-preview .jurnal-msqrt {
  white-space: nowrap;
}

.jurnal-materi-cell {
  min-width: 168px;
}

.jurnal-materi-cell .jurnal-textarea-materi,
.jurnal-materi-cell .jurnal-math-preview {
  min-height: 8.5rem;
}

/* Panel Arab / Jawa / Matematika — mengambang di atas, bisa digeser */
.jurnal-symbols-float.modal {
  align-items: flex-start;
  justify-content: center;
  padding: 0.65rem 0.75rem 0;
  background: transparent;
  pointer-events: none;
}

.jurnal-symbols-float .modal-backdrop {
  display: none;
}

.jurnal-symbols-card {
  pointer-events: auto;
  position: fixed;
  top: 0.65rem;
  left: 50%;
  transform: translateX(-50%);
  width: min(640px, calc(100vw - 1.5rem));
  max-height: min(78vh, 720px);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  z-index: 90;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22);
}

.jurnal-symbols-card.is-dragging {
  transition: none;
  user-select: none;
}

.jurnal-symbols-drag-handle {
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.jurnal-symbols-drag-handle:active,
.jurnal-symbols-card.is-dragging .jurnal-symbols-drag-handle {
  cursor: grabbing;
}

.jurnal-symbols-drag-handle .modal-close {
  cursor: pointer;
}

.jurnal-symbols-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.jurnal-symbols-target-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
}

.jurnal-symbols-target-hint {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted, #7a6654);
}

.jurnal-symbols-target-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.jurnal-symbols-target {
  border: 1px solid rgba(166, 124, 82, 0.35);
  background: #fff;
  color: var(--text, #3d2e1f);
  border-radius: 8px;
  padding: 0.35rem 0.7rem;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.jurnal-symbols-target.is-active {
  background: rgba(166, 124, 82, 0.16);
  border-color: var(--primary, #a67c52);
  color: var(--primary-dark, #8b6344);
}

.jurnal-symbols-tab {
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: #f8fafc;
  color: #0f172a;
  border-radius: 8px;
  padding: 0.4rem 0.85rem;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.jurnal-symbols-tab.is-active {
  background: #0f172a;
  border-color: #0f172a;
  color: #fff;
}

.jurnal-symbols-body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-height: 0;
  overflow: auto;
}

.jurnal-symbols-compose {
  width: 100%;
  min-height: 4.5rem;
  resize: vertical;
  border: 1px solid rgba(15, 23, 42, 0.16);
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
  font-size: 1.25rem;
  line-height: 1.7;
  background: #fff;
}

.jurnal-symbols-compose.arab {
  font-family: 'Noto Naskh Arabic', 'Amiri', 'Traditional Arabic', serif;
  direction: rtl;
  text-align: right;
}

.jurnal-symbols-compose.jawa {
  font-family: 'Noto Sans Javanese', 'Noto Naskh Arabic', serif;
  font-size: 1.45rem;
  line-height: 1.9;
}

.jurnal-sym-keys {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.jurnal-sym-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  justify-content: flex-start;
}

.jurnal-sym-row.wrap {
  justify-content: flex-start;
}

.jurnal-sym-key {
  min-width: 2.35rem;
  min-height: 2.35rem;
  padding: 0.2rem 0.4rem;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font: inherit;
  line-height: 1.2;
}

.jurnal-sym-key:hover {
  background: #f1f5f9;
}

.jurnal-sym-key.arab {
  font-family: 'Noto Naskh Arabic', serif;
  font-size: 1.2rem;
}

.jurnal-sym-key.arab.harakat {
  color: #b45309;
  font-size: 1.35rem;
}

.jurnal-sym-key.jawa {
  font-family: 'Noto Sans Javanese', serif;
  font-size: 1.35rem;
  min-width: 2.6rem;
  min-height: 2.6rem;
}

.jurnal-sym-key.jawa.sand {
  color: #1d4ed8;
}

.jurnal-sym-key.math {
  font-family: 'Noto Sans Math', 'Cambria Math', serif;
  font-size: 1.05rem;
}

.jurnal-sym-key.wide {
  min-width: 4.5rem;
}

.jurnal-sym-keys[dir="rtl"] .jurnal-sym-row {
  justify-content: flex-start;
}

.jurnal-symbols-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding-top: 0.35rem;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.jurnal-symbols-compose-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.jurnal-cell-materi,
.jurnal-math-preview,
.jurnal-textarea-materi {
  font-feature-settings: 'liga' 1;
}

@media (max-width: 720px) {
  .jurnal-symbols-card {
    width: calc(100vw - 1rem);
    max-height: min(72vh, 640px);
    top: 0.5rem;
  }
  .jurnal-sym-key {
    min-width: 2.1rem;
    min-height: 2.1rem;
  }
}

.jurnal-math-editor.is-dragover .jurnal-math-field,
.jurnal-math-editor.is-dragover .jurnal-math-preview {
  outline: 2px dashed #2563eb;
  outline-offset: 2px;
  background: rgba(37, 99, 235, 0.06);
}

.jurnal-materi-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.35rem;
}

.jurnal-materi-tools-hint {
  font-size: 0.75rem;
  color: #64748b;
}

.jurnal-materi-img,
.jurnal-math-preview .jurnal-materi-img,
.jurnal-cell-materi .jurnal-materi-img {
  display: block;
  max-width: 100%;
  max-height: 220px;
  width: auto;
  height: auto;
  margin: 0.4rem 0;
  border-radius: 6px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  object-fit: contain;
  background: #fff;
}

.jurnal-form-table .jurnal-hari { min-width: 72px; }

.jurnal-form-table th.jurnal-th-kode,
.jurnal-form-table td.jurnal-kode-cell {
  width: 3.75rem;
  max-width: 4rem;
  min-width: 3.5rem;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}

.jurnal-form-table th.jurnal-th-kode {
  white-space: normal;
  line-height: 1.15;
  text-align: center;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}

.jurnal-form-table .jurnal-kode-guru {
  min-width: 0;
  width: 100%;
  max-width: 3.4rem;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
  text-align: center;
  background: #f3eee8;
  color: #5c4a3a;
  cursor: default;
  pointer-events: none;
}

.jurnal-form-table th:nth-child(2),
.jurnal-form-table td.jurnal-tgl-cell,
.jurnal-form-table td:nth-child(2) {
  min-width: 10rem;
  width: 10rem;
}

.jurnal-jam-cell {
  min-width: 88px;
  position: relative;
  overflow: visible;
}

.jurnal-jam-picker {
  position: relative;
  width: 100%;
  overflow: visible;
}

.jurnal-jam-picker-anchor {
  position: relative;
  width: 100%;
  z-index: 1;
}

.jurnal-jam-picker.is-open .jurnal-jam-picker-anchor {
  z-index: 420;
}

.jurnal-jam-picker.is-open .jurnal-jam-jadwal-hint {
  position: relative;
  z-index: 0;
}

.jurnal-jam-display {
  width: 100%;
  min-width: 72px;
  min-height: 2.5rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 2;
  background: #fff;
  color: inherit;
}

.jurnal-jam-popup {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 400;
  min-width: 118px;
  max-height: min(11.5rem, 42vh);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
  padding: 0.45rem 0.4rem 0.45rem 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  pointer-events: auto;
}

.jurnal-jam-popup::-webkit-scrollbar {
  width: 8px;
}

.jurnal-jam-popup::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--brand, #a67c52) 55%, #c4b5a0);
  border-radius: 999px;
}

.jurnal-jam-popup::-webkit-scrollbar-track {
  background: #f3eee7;
  border-radius: 999px;
}

.jurnal-jam-check-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.jurnal-jam-check-item input {
  margin: 0;
  cursor: pointer;
}

.jurnal-jam-check-item.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.jurnal-jam-check-item.is-disabled input {
  cursor: not-allowed;
}

.jurnal-jam-check-item.is-scheduled:not(.is-disabled) {
  color: var(--brand, #a67c52);
  font-weight: 600;
}

.jurnal-jam-check-item.is-scheduled:not(.is-disabled) span {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.jurnal-jam-jadwal-hint {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.72rem;
  color: var(--brand, #a67c52);
  line-height: 1.25;
}

.jurnal-jam-jadwal-hint.is-empty {
  color: var(--muted, #64748b);
}

.jurnal-jam-empty {
  color: var(--muted, #64748b);
  font-size: 0.82rem;
}

.jurnal-empty {
  text-align: center;
  color: var(--muted, #64748b);
  padding: 2rem;
}

.jadwal-kemajuan-card {
  max-width: 720px;
  width: calc(100% - 2rem);
}

.jadwal-kemajuan-body {
  padding: 0 1.25rem 1.25rem;
}

.kemajuan-settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mapel-kemajuan-table .mapel-kemajuan-input {
  width: 100%;
  min-width: 180px;
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
  background: #fff;
}

.mapel-kemajuan-toolbar {
  margin-top: 0.75rem;
}

.jurnal-form-table .jurnal-mapel { min-width: 120px; }

.jurnal-form-table .jurnal-mapel.jurnal-mapel-invalid {
  border-color: #b91c1c;
  box-shadow: 0 0 0 2px rgba(185, 28, 28, 0.2);
}

.jadwal-kemajuan-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
}

.jadwal-hari-jam-table {
  max-width: 320px;
}

.jadwal-hari-jam-table .jadwal-jam-count {
  width: 100%;
  min-width: 72px;
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
  background: #fff;
}

.jadwal-data-panel {
  position: relative;
  overflow: hidden;
  border-color: #dfd2c3;
  background:
    radial-gradient(circle at 100% 0%, rgba(212, 184, 150, 0.2), transparent 34%),
    linear-gradient(180deg, #fffdf9 0%, #fff 42%);
  box-shadow: 0 14px 36px rgba(91, 58, 37, 0.1);
}

.jadwal-data-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, #8b5e3c, #d4a574 45%, #4f8f78);
}

.jadwal-data-toolbar {
  align-items: center;
  gap: 1rem;
}

.jadwal-data-heading {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  min-width: 0;
}

.jadwal-data-icon {
  display: grid;
  grid-template-columns: repeat(3, 6px);
  align-items: end;
  gap: 4px;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  padding: 10px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, #5b3a25, #9b6b49);
  box-shadow: 0 8px 18px rgba(91, 58, 37, 0.22);
  box-sizing: border-box;
}

.jadwal-data-icon span {
  display: block;
  border-radius: 4px 4px 2px 2px;
  background: #fff5e8;
}

.jadwal-data-icon span:nth-child(1) { height: 12px; opacity: 0.72; }
.jadwal-data-icon span:nth-child(2) { height: 23px; }
.jadwal-data-icon span:nth-child(3) { height: 17px; opacity: 0.86; }

.jadwal-data-copy {
  min-width: 0;
}

.jadwal-data-eyebrow {
  display: block;
  margin-bottom: 0.18rem;
  color: #9a6a43;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.jadwal-data-copy h2 {
  margin: 0;
  color: #3f2a1d;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}

.jadwal-data-copy #jadwal-guru-name {
  margin: 0.42rem 0 0;
  line-height: 1.35;
}

.jadwal-data-copy #jadwal-summary {
  margin: 0.28rem 0 0;
  line-height: 1.4;
}

.jadwal-data-insights {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.7rem;
}

.jadwal-data-insights > span {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid #eadbcb;
  border-radius: 999px;
  background: rgba(255, 250, 243, 0.86);
  color: #76543d;
  font-size: 0.72rem;
  box-shadow: 0 2px 8px rgba(91, 58, 37, 0.06);
}

.jadwal-data-insights strong {
  color: #3f2a1d;
  font-size: 0.86rem;
}

.jadwal-data-insights .jadwal-guru-jurnal-hint {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0.3rem 0.15rem;
  color: #8a6548;
  font-size: 0.78rem;
  font-weight: 550;
  font-style: italic;
}

.jadwal-data-insights .jadwal-guru-jurnal-hint.hidden {
  display: none;
}

.jadwal-view-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.jadwal-view-toggle {
  display: inline-flex;
  gap: 0.2rem;
  padding: 0.25rem;
  border: 1px solid #e1d4c6;
  border-radius: 12px;
  background: rgba(247, 241, 232, 0.8);
  box-shadow: inset 0 1px 2px rgba(91, 58, 37, 0.06);
}

.jadwal-view-toggle .btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 38px;
  padding: 0.55rem 0.8rem;
  border-color: transparent;
  background: transparent;
  color: #76543d;
}

.jadwal-view-toggle .btn-outline.is-active {
  background: linear-gradient(135deg, #5b3a25, #81583c);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(91, 58, 37, 0.2);
}

.jadwal-matrix-wrap {
  max-height: min(70vh, 720px);
  overflow: auto;
  border: 1px solid #dfd2c3;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(91, 58, 37, 0.08);
  scrollbar-width: thin;
  scrollbar-color: #bca78f #f5f1eb;
  -webkit-overflow-scrolling: touch;
}

.jadwal-data-toolbar {
  transition: opacity 0.16s ease;
}

#jadwal-data-panel.is-matrix-focus .jadwal-data-toolbar {
  display: none;
}

.jadwal-show-controls {
  display: none;
  position: static;
  width: max-content;
  margin: 0.4rem 0.4rem 0.45rem auto;
  padding: 0.38rem 0.65rem;
  border: 1px solid #d8c6b4;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 252, 247, 0.98), rgba(246, 235, 222, 0.98));
  color: #5b3a25;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 650;
  box-shadow: 0 3px 12px rgba(91, 58, 37, 0.14);
  cursor: pointer;
  backdrop-filter: blur(6px);
}

.jadwal-show-controls::before {
  content: "☷";
  margin-right: 0.35rem;
}

#jadwal-data-panel.is-matrix-focus .jadwal-show-controls {
  display: block;
}

.jadwal-matrix-table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.85rem;
  width: max-content;
  min-width: 100%;
}

.jadwal-matrix-table th,
.jadwal-matrix-table td {
  text-align: center;
  white-space: nowrap;
  min-width: 2.4rem;
  padding: 0.3rem 0.35rem;
  box-sizing: border-box;
}

.jadwal-matrix-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: linear-gradient(180deg, #fffaf3 0%, #f1e7da 100%);
  color: #5b3a25;
  border-bottom: 1px solid #d9cabb;
}

/* Kolom Hari lama (dipertahankan untuk kompatibilitas tampilan). */
.jadwal-matrix-table.data-table.compact th.jadwal-sticky-col:not(.jadwal-sticky-jam),
.jadwal-matrix-table.data-table.compact td.jadwal-sticky-col:not(.jadwal-sticky-jam) {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fff;
  text-align: left;
  font-weight: 600;
  width: 50px;
  min-width: 50px;
  max-width: 50px;
  padding: 0.3rem 0.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jadwal-matrix-table.data-table.compact th.jadwal-sticky-jam,
.jadwal-matrix-table.data-table.compact td.jadwal-sticky-jam {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fff;
  text-align: center;
  font-weight: 600;
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  padding: 0.3rem 0.1rem;
  overflow: hidden;
}

.jadwal-matrix-table thead th.jadwal-sticky-col {
  z-index: 3;
  background: var(--cream, #f7f1e8);
}

.jadwal-matrix-table.data-table.compact th.jadwal-matrix-jam-head {
  left: 0;
  width: 40px;
  min-width: 40px;
  max-width: 40px;
}

.jadwal-matrix-table .jadwal-hari-header-row th {
  position: relative;
  z-index: 1;
  padding: 0.48rem 0.65rem;
  background: linear-gradient(90deg, var(--day-accent), var(--day-soft));
  color: var(--day-text);
  text-align: left;
  font-weight: 700;
  border-top: 2px solid var(--day-accent);
  border-bottom: 1px solid color-mix(in srgb, var(--day-accent) 35%, #fff);
}

.jadwal-matrix-table .jadwal-hari-header-row th span {
  display: inline;
}

.jadwal-matrix-table .jadwal-hari-header-row th small {
  display: inline;
  margin-left: 0.55rem;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--day-text);
  opacity: 0.78;
}

.jadwal-matrix-table:not(.mon-matrix-table) .jadwal-jam-row td {
  background: var(--day-row);
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.jadwal-matrix-table:not(.mon-matrix-table) .jadwal-jam-row:nth-child(even) td {
  background: color-mix(in srgb, var(--day-row) 68%, #fff);
}

.jadwal-matrix-table:not(.mon-matrix-table) .jadwal-jam-row:hover td {
  background: var(--day-hover);
}

.jadwal-matrix-table:not(.mon-matrix-table) .jadwal-jam-row td:not(.jadwal-sticky-jam):not(:empty) {
  color: var(--day-text);
  font-weight: 650;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--day-accent) 24%, transparent);
}

.jadwal-matrix-table:not(.mon-matrix-table) .jadwal-jam-row td.jadwal-sticky-jam {
  background: color-mix(in srgb, var(--day-accent) 68%, #fff);
  color: var(--day-text);
  border-right: 2px solid var(--day-accent);
  box-shadow: inset -1px 0 0 color-mix(in srgb, var(--day-text) 18%, transparent);
}

.jadwal-day-tone-1 {
  --day-accent: #93c5fd;
  --day-soft: #dbeafe;
  --day-row: #f3f8ff;
  --day-hover: #e5f0ff;
  --day-text: #1e3a5f;
}

.jadwal-day-tone-2 {
  --day-accent: #86efac;
  --day-soft: #dcfce7;
  --day-row: #f2fcf5;
  --day-hover: #e3f8e9;
  --day-text: #14532d;
}

.jadwal-day-tone-3 {
  --day-accent: #c4b5fd;
  --day-soft: #ede9fe;
  --day-row: #f8f6ff;
  --day-hover: #eeeafe;
  --day-text: #4c1d95;
}

.jadwal-day-tone-4 {
  --day-accent: #fcd34d;
  --day-soft: #fef3c7;
  --day-row: #fffbeb;
  --day-hover: #fef3c7;
  --day-text: #713f12;
}

.jadwal-day-tone-5 {
  --day-accent: #fda4af;
  --day-soft: #ffe4e6;
  --day-row: #fff5f6;
  --day-hover: #ffe9ec;
  --day-text: #881337;
}

.jadwal-day-tone-6 {
  --day-accent: #67e8f9;
  --day-soft: #cffafe;
  --day-row: #f0fdff;
  --day-hover: #dcfaff;
  --day-text: #164e63;
}

.jadwal-matrix-table .jadwal-kode-parallel {
  color: #9f1239 !important;
  font-weight: 750;
  background: #fff1f2 !important;
  box-shadow: inset 0 0 0 1px #fecdd3 !important;
}

.jadwal-list-wrap {
  overflow: hidden;
  border: 1px solid #e6d9ca;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(91, 58, 37, 0.07);
}

.jadwal-list-table {
  margin: 0;
}

.jadwal-list-table thead th {
  padding-block: 0.75rem;
  background: linear-gradient(180deg, #fffaf3, #f3e8da);
  color: #5b3a25;
  border-bottom-color: #dfd0bf;
}

.jadwal-list-table tbody tr {
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.jadwal-list-table tbody tr:nth-child(even) {
  background: #fffcf8;
}

.jadwal-list-table tbody tr:hover {
  background: #f8f1e8;
}

.jadwal-list-number {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 8px;
  background: #f1e6d9;
  color: #76543d;
  font-size: 0.75rem;
  font-weight: 700;
}

.jadwal-list-kelas {
  color: #3f2a1d;
}

.jadwal-kelas-link {
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(154, 106, 67, 0.4);
  text-underline-offset: 0.2rem;
  cursor: pointer;
}

.jadwal-kelas-link:hover,
.jadwal-kelas-link:focus-visible {
  color: #8a5631;
  text-decoration-color: currentColor;
}

.jadwal-list-day,
.jadwal-list-code,
.jadwal-list-jam {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}

.jadwal-list-day {
  min-width: 4.8rem;
  padding: 0.15rem 0.55rem;
  background: var(--day-soft);
  color: var(--day-text);
  border: 1px solid var(--day-accent);
}

.jadwal-list-jam {
  min-width: 1.75rem;
  background: #eef6f2;
  color: #25624e;
}

.jadwal-list-code {
  min-width: 2.6rem;
  padding: 0.15rem 0.55rem;
  background: #ede9fe;
  color: #5b21b6;
}

.jadwal-list-guru {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  max-width: 100%;
}

.jadwal-list-guru-nama {
  font-size: 0.82rem;
  font-weight: 550;
  color: #4b5563;
  line-height: 1.25;
}

.jadwal-list-code.is-parallel {
  background: #ffe4e6;
  color: #9f1239;
}

@media (max-width: 700px) {
  .jadwal-data-panel {
    padding: 1rem;
    border-radius: 14px;
  }

  .jadwal-data-toolbar {
    align-items: stretch;
  }

  .jadwal-data-heading {
    gap: 0.7rem;
  }

  .jadwal-data-icon {
    width: 42px;
    height: 42px;
    padding: 8px;
    border-radius: 12px;
  }

  .jadwal-data-copy h2 {
    font-size: 1.05rem;
  }

  .jadwal-data-insights {
    gap: 0.3rem;
    margin-top: 0.55rem;
  }

  .jadwal-data-insights > span {
    padding: 0.24rem 0.48rem;
    font-size: 0.67rem;
  }

  .jadwal-view-actions {
    width: 100%;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .jadwal-view-toggle {
    flex: 1 1 auto;
  }

  .jadwal-view-toggle .btn-outline {
    flex: 1 1 0;
    min-height: 40px;
    padding-inline: 0.65rem;
  }

  .jadwal-list-wrap {
    overflow-x: auto;
  }

  .jadwal-list-table {
    min-width: 560px;
  }

  .jadwal-matrix-wrap {
    max-height: 68vh;
    border-radius: 9px;
  }

  .jadwal-matrix-table {
    font-size: 0.78rem;
  }

  .jadwal-matrix-table th,
  .jadwal-matrix-table td {
    min-width: 46px;
    padding: 0.34rem 0.28rem;
  }

  .jadwal-matrix-table.data-table.compact th.jadwal-sticky-jam,
  .jadwal-matrix-table.data-table.compact td.jadwal-sticky-jam,
  .jadwal-matrix-table.data-table.compact th.jadwal-matrix-jam-head {
    width: 34px;
    min-width: 34px;
    max-width: 34px;
  }

  .jadwal-matrix-table .jadwal-hari-header-row th {
    padding: 0.5rem 0.55rem;
  }

  .jadwal-matrix-table .jadwal-hari-header-row th span {
    font-size: 0.86rem;
  }

  .jadwal-matrix-table .jadwal-hari-header-row th small {
    font-size: 0.68rem;
  }
}

@media (max-width: 900px) {
  .kemajuan-filter-grid {
    grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
  }

  .jurnal-periode-date-range {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0.35rem;
    max-width: none;
  }
}

@media (max-width: 560px) {
  .kemajuan-filter-grid {
    grid-template-columns: 1fr;
  }

  .kemajuan-filter-grid .kemajuan-pekan-label {
    padding-bottom: 0;
  }
}

/* Presensi */
.stat-icon.green { background: #dcfce7; color: #16a34a; }
.stat-icon.amber { background: #fef3c7; color: #d97706; }

.panel-nested {
  margin-bottom: 0;
  box-shadow: none;
  border: 1px solid var(--border);
  background: #f8fafc;
}

.panel-nested h3 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.85rem;
}

.presensi-dash-kelas-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem 0.85rem;
  margin-bottom: 0.85rem;
}

.presensi-dash-kelas-head h3 {
  margin: 0;
}

.presensi-dash-kelas-head select {
  min-width: 9.5rem;
  min-height: 2.1rem;
  font-size: 0.88rem;
}

.presensi-dash-guru-panel {
  margin-top: 1rem;
}

.presensi-dash-guru-panel .presensi-dash-kelas-head {
  align-items: flex-start;
}

.presensi-dash-guru-panel .panel-desc {
  margin: 0.2rem 0 0;
}

#chart-presensi-guru {
  max-height: 28rem;
  overflow: auto;
}

#chart-presensi-guru .bar-label {
  min-width: 9rem;
  max-width: 14rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.presensi-stats-grid {
  margin-bottom: 1rem;
}

.presensi-dash-absensi {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.presensi-dash-absensi-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.85rem 1rem;
  margin-bottom: 0.85rem;
}

.presensi-dash-absensi-head h3 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
}

.presensi-dash-absensi-head .panel-desc {
  margin: 0;
}

.presensi-dash-absensi-filters {
  margin: 0;
  min-width: min(100%, 360px);
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 640px) {
  .presensi-dash-absensi-filters {
    width: 100%;
    grid-template-columns: 1fr;
  }
}

.presensi-dash-detail-card {
  width: min(640px, 100%);
  max-height: min(80vh, 720px);
  overflow: auto;
}

.presensi-dash-detail-card .modal-header {
  align-items: flex-start;
  gap: 0.75rem;
}

.presensi-dash-detail-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.presensi-dash-detail-card .modal-header .panel-desc {
  margin: 0.2rem 0 0;
}

.aduan-keluhan-cell {
  white-space: pre-wrap;
  max-width: 28rem;
  line-height: 1.45;
}

.aduan-murid-filters {
  align-items: end;
}

.aduan-murid-filter-actions {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.aduan-murid-filter-actions > span {
  display: block;
  min-height: 1.1rem;
}

.aduan-table-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.aduan-table-toolbar .aduan-delete-hint {
  margin: 0;
}

#btn-aduan-murid-hapus-terpilih.is-ready {
  border-color: #b42318;
  color: #b42318;
  background: #fff5f5;
  font-weight: 600;
}

#page-aduan-murid .aduan-check-col {
  width: 2.5rem;
}

#page-aduan-murid .aduan-check-col input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
}

#page-aduan-murid .aduan-media-cell {
  min-width: 4.5rem;
}

#page-aduan-murid .aduan-media-thumb {
  display: inline-flex;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border, #e5d5bf);
  background: #faf6f0;
}

#page-aduan-murid .aduan-media-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#page-aduan-murid .aduan-media-link {
  font-weight: 600;
  text-decoration: none;
}

#page-aduan-murid .aduan-table-scroll {
  max-height: calc(2.75rem + (20 * 2.75rem));
  overflow: auto;
}

#page-aduan-murid .aduan-table-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #faf6f0;
  color: var(--brand, #6b4f2a);
  font-weight: 700;
  box-shadow: 0 1px 0 var(--border, rgba(0, 0, 0, 0.08));
}

.presensi-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.presensi-tab-btn {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.8);
  color: var(--text);
  border-radius: 8px;
  padding: 0.45rem 0.9rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.presensi-tab-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.presensi-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: end;
}

.presensi-filter-grid.presensi-report-auto-grid,
#panel-cetak-presensi-individu .presensi-filter-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.presensi-filter-grid.presensi-kbm-semester-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.presensi-filter-actions .presensi-action-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: stretch;
}

.presensi-filter-grid .field > select,
.presensi-filter-grid .field > input[type="date"],
.presensi-filter-actions .btn-primary {
  min-height: 42px;
  box-sizing: border-box;
}

.presensi-status-select {
  min-width: 110px;
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
  background: #fff;
}

.presensi-status-select.hadir { border-color: #86efac; background: #f0fdf4; }
.presensi-status-select.sakit { border-color: #fde68a; background: #fffbeb; }
.presensi-status-select.izin { border-color: #93c5fd; background: #eff6ff; }
.presensi-status-select.alpha { border-color: #fca5a5; background: #fef2f2; }
.presensi-status-select.tugas { border-color: #c4b5fd; background: #f5f3ff; }

.presensi-riwayat-ket {
  min-width: 10rem;
  max-width: 28rem;
  white-space: normal;
  word-break: break-word;
  color: #1f2937;
  font-weight: 550;
}

.presensi-riwayat-ket .muted {
  color: #94a3b8;
  font-weight: 400;
}

.presensi-ringkasan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 0.65rem;
  margin-bottom: 1rem;
}

.presensi-ring-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
  background: #f8fafc;
}

.presensi-ring-item span {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
}

.presensi-ring-item strong {
  font-size: 1.2rem;
}

.presensi-ring-item.hadir { border-color: #86efac; }
.presensi-ring-item.sakit { border-color: #fde68a; }
.presensi-ring-item.izin { border-color: #93c5fd; }
.presensi-ring-item.alpha { border-color: #fca5a5; }
.presensi-ring-item.tugas { border-color: #c4b5fd; }
.presensi-ring-item.total { border-color: #c4b5fd; }

.presensi-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}

.presensi-badge.h { background: #dcfce7; color: #166534; }
.presensi-badge.s { background: #fef3c7; color: #92400e; }
.presensi-badge.i { background: #dbeafe; color: #1e40af; }
.presensi-badge.a { background: #fee2e2; color: #991b1b; }
.presensi-badge.t { background: #ede9fe; color: #5b21b6; }
.presensi-badge.empty { background: #e2e8f0; color: #475569; }

.gender-fill.presensi-hadir { background: #22c55e; }
.gender-fill.presensi-sakit { background: #f59e0b; }
.gender-fill.presensi-izin { background: #3b82f6; }
.gender-fill.presensi-alpha { background: #ef4444; }
.gender-fill.presensi-tugas { background: #8b5cf6; }

.bar-fill.presensi-bar { background: #a8c93c; }

#presensi-kbm-laporan-mapel .bar-row,
#chart-presensi-kbm-mapel .bar-row,
#chart-presensi-kbm-kelas .bar-row {
  grid-template-columns: minmax(125px, 155px) minmax(100px, 1fr) 48px;
  gap: 0.65rem;
}

#presensi-kbm-laporan-mapel .bar-label,
#chart-presensi-kbm-mapel .bar-label,
#chart-presensi-kbm-kelas .bar-label {
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
}

#presensi-kbm-laporan-mapel .bar-track,
#chart-presensi-kbm-mapel .bar-track,
#chart-presensi-kbm-kelas .bar-track {
  height: 6px;
  border-radius: 999px;
  background: #eef2e6;
}

#presensi-kbm-laporan-mapel .bar-fill,
#chart-presensi-kbm-mapel .bar-fill,
#chart-presensi-kbm-kelas .bar-fill {
  border-radius: 999px;
  min-width: 2px;
}

@media (max-width: 640px) {
  #presensi-kbm-laporan-mapel .bar-row,
  #chart-presensi-kbm-mapel .bar-row,
  #chart-presensi-kbm-kelas .bar-row {
    grid-template-columns: minmax(90px, 120px) minmax(70px, 1fr) 42px;
    gap: 0.45rem;
  }
}

.presensi-kbm-input-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 1rem 1.5rem;
  align-items: start;
}

.presensi-kbm-input-left,
.presensi-kbm-input-right {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-width: 0;
}

.presensi-kbm-input-left .field,
.presensi-kbm-input-right .field {
  margin: 0;
}

.presensi-kbm-input-left .presensi-action-row {
  margin-top: 0.15rem;
}

.presensi-kbm-input-right .field {
  position: relative;
}

.presensi-kbm-hari-ajar-hint {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: #475569;
}

.presensi-kbm-tanggal-wrap {
  position: relative;
  overflow: visible;
}

.presensi-kbm-tanggal-wrap.is-guru-cal .date-ddmmyyyy-picker {
  pointer-events: none;
  z-index: 0;
}

.presensi-kbm-cal-trigger {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 5;
  width: 2.5rem;
  height: 100%;
  min-height: 2.25rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0 8px 8px 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
}

.presensi-kbm-cal-trigger::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.1rem;
  height: 1.1rem;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

.presensi-kbm-tanggal-wrap.is-guru-cal::after {
  display: none;
}

.presensi-kbm-date-cal {
  position: absolute;
  z-index: 60;
  top: calc(100% + 0.35rem);
  left: 0;
  right: auto;
  width: min(100vw - 2rem, 320px);
  min-width: 280px;
  max-width: 320px;
  padding: 0.75rem;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
}

.presensi-kbm-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}

.presensi-kbm-cal-title {
  font-size: 0.95rem;
  text-transform: capitalize;
}

.presensi-kbm-cal-nav {
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 8px;
  background: #f8fafc;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}

.presensi-kbm-cal-weekdays,
.presensi-kbm-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.2rem;
}

.presensi-kbm-cal-weekdays {
  margin-bottom: 0.25rem;
}

.presensi-kbm-cal-weekdays span {
  text-align: center;
  font-size: 0.72rem;
  color: #64748b;
  font-weight: 600;
}

.presensi-kbm-cal-day {
  aspect-ratio: 1;
  min-height: 2rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  color: #0f172a;
}

.presensi-kbm-cal-day.is-empty {
  visibility: hidden;
  pointer-events: none;
}

.presensi-kbm-cal-day.is-other-month:not(.is-active-week) {
  opacity: 0.45;
}

.presensi-kbm-cal-day.is-other-month.is-active-week {
  opacity: 1;
}

.presensi-kbm-cal-day.is-outside-week,
.presensi-kbm-cal-day.is-off {
  color: #94a3b8;
  background: #f8fafc;
  cursor: not-allowed;
}

.presensi-kbm-cal-day.is-active-week:not(.is-ajar):not(.is-selected) {
  background: #fffbeb;
  border-color: #fcd34d;
  color: #92400e;
  font-weight: 600;
}

.presensi-kbm-cal-day.is-ajar {
  background: #ecfdf5;
  border-color: #6ee7b7;
  color: #065f46;
  font-weight: 700;
}

.presensi-kbm-cal-day.is-active-week:not(.is-selected) {
  box-shadow: inset 0 0 0 1px #f59e0b;
}

.presensi-kbm-cal-day.is-ajar.is-active-week:not(.is-selected) {
  box-shadow: inset 0 0 0 2px #059669;
}

.presensi-kbm-cal-day.is-today {
  box-shadow: inset 0 0 0 1px #2563eb;
}

.presensi-kbm-cal-day.is-active-week.is-today:not(.is-selected) {
  box-shadow: inset 0 0 0 2px #2563eb;
}

.presensi-kbm-cal-day.is-selected {
  background: #0f172a;
  border-color: #0f172a;
  color: #fff;
  opacity: 1;
}

.presensi-kbm-cal-day.is-ajar.is-selected {
  background: #047857;
  border-color: #047857;
}

.presensi-kbm-cal-day:disabled {
  pointer-events: none;
}

.presensi-kbm-cal-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
  margin: 0.55rem 0 0;
  font-size: 0.78rem;
  color: #475569;
}

.presensi-kbm-cal-legend .dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  border: 1px solid #6ee7b7;
  background: #ecfdf5;
  display: inline-block;
}

.presensi-kbm-cal-legend .dot.is-week {
  border-color: #f59e0b;
  background: #fffbeb;
}

.presensi-kbm-cal-week-range {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  color: #64748b;
}

.presensi-kbm-jam-block {
  margin-top: 0;
}

.presensi-kbm-jam-block .field-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.45rem;
  color: var(--text-muted, #64748b);
}

.presensi-kbm-jam-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.75rem;
}

.presensi-kbm-jam-list > .panel-desc {
  margin: 0;
  width: 100%;
  line-height: 1.45;
}

#presensi-kbm-jam-note {
  margin: 0.35rem 0 0;
  line-height: 1.45;
}

#presensi-wali-note,
#presensi-kbm-wali-note {
  margin: 0;
  line-height: 1.45;
  clear: both;
}

@media (max-width: 720px) {
  .presensi-kbm-input-grid {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
}

.presensi-kbm-jam-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  background: #f8fafc;
  cursor: pointer;
  font-size: 0.875rem;
}

.presensi-kbm-jam-item:has(input:checked) {
  border-color: #86efac;
  background: #f0fdf4;
}

.jurnal-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  white-space: nowrap;
}

.panel-nested-title {
  margin: 1rem 0 0.5rem;
  font-size: 0.95rem;
}

.empty-cell {
  text-align: center;
  color: var(--text-muted);
  padding: 1.25rem !important;
}

@media (max-width: 900px) {
  .presensi-filter-grid {
    grid-template-columns: 1fr 1fr;
  }

  .presensi-filter-grid.presensi-report-auto-grid,
  #panel-cetak-presensi-individu .presensi-filter-grid,
  .presensi-filter-grid.presensi-kbm-semester-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .presensi-filter-grid {
    grid-template-columns: 1fr;
  }

  .presensi-filter-grid.presensi-report-auto-grid,
  #panel-cetak-presensi-individu .presensi-filter-grid,
  .presensi-filter-grid.presensi-kbm-semester-grid {
    grid-template-columns: 1fr;
  }

  #presensi-panel-input .presensi-filter-grid {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  #presensi-panel-input .presensi-filter-grid > .field:first-child {
    grid-column: 1 / -1;
  }

  #presensi-panel-input .presensi-filter-actions > span {
    display: none;
  }

  #presensi-panel-input .presensi-filter-actions,
  #presensi-panel-input .presensi-action-row {
    align-self: end;
  }
}

.tenant-sekolah-list {
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}
.tenant-sekolah-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f8fafc;
  font-size: 0.9rem;
}
.tenant-sekolah-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.tenant-sekolah-info code {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.tenant-sekolah-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
}
.tenant-aktif-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  user-select: none;
}
.tenant-aktif-toggle input {
  accent-color: var(--primary, #2563eb);
}
.tenant-sekolah-list li.is-inactive {
  opacity: 0.65;
  background: #f1f5f9;
}
.tenant-protected-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #64748b;
  background: #e2e8f0;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
}
.tenant-onboard-credentials {
  margin-top: 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid #86efac;
  background: #f0fdf4;
  font-size: 0.9rem;
}
.tenant-onboard-details {
  margin-top: 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 0.65rem 0.9rem 0.9rem;
  background: #f8fafc;
}
.tenant-onboard-details > summary {
  cursor: pointer;
  font-weight: 700;
  color: #334155;
  list-style: none;
}
.tenant-onboard-details > summary::-webkit-details-marker { display: none; }
.tenant-onboard-details[open] > summary {
  margin-bottom: 0.65rem;
}
.tenant-sekolah-list {
  max-height: 320px;
  overflow: auto;
}
.tenant-onboard-credentials strong {
  display: block;
  margin-bottom: 0.4rem;
  color: #166534;
}
.tenant-onboard-steps {
  margin: 0.35rem 0 0.65rem 1.1rem;
  padding: 0;
}
.tenant-onboard-steps code {
  background: #dcfce7;
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
}

.dashboard-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.dashboard-tabs::-webkit-scrollbar {
  display: none;
}

.dashboard-tab {
  padding: 0.55rem 1rem;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  flex-shrink: 0;
}

.dashboard-tab:hover {
  background: var(--primary-light);
}

.dashboard-tab.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.kegiatan-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.kegiatan-head-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.kegiatan-print-card {
  width: min(680px, calc(100vw - 2rem));
  overflow: visible;
}

.kegiatan-print-card:focus-within {
  overflow: visible;
}

.kegiatan-print-form-grid {
  margin-bottom: 0.75rem;
}

.kegiatan-print-form-grid .field > label,
.kegiatan-print-form-grid .field > .field-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted, #64748b);
  margin-bottom: 0.35rem;
}

#kegiatan-print-wakil-jabatan {
  width: 100%;
  margin-bottom: 0.45rem;
  min-height: 42px;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  font: inherit;
  background: #fff;
  color: inherit;
  box-sizing: border-box;
}

#kegiatan-print-wakil-jabatan:focus {
  outline: none;
  border-color: var(--primary, #a67c52);
  box-shadow: 0 0 0 3px rgba(166, 124, 82, 0.18);
}

.kegiatan-picker {
  position: relative;
  margin-top: 0;
}

.kegiatan-picker-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  background: #fff;
  color: var(--text, #0f172a);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.kegiatan-picker-toggle.is-placeholder {
  color: #94a3b8;
}

.kegiatan-picker-toggle::after {
  content: '';
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.55;
  flex: 0 0 auto;
}

.kegiatan-picker-list {
  position: absolute;
  z-index: 40;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  max-height: 220px;
  overflow: auto;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: #fff;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
}

.kegiatan-picker-list.hidden {
  display: none !important;
}

.kegiatan-picker-option {
  width: 100%;
  display: block;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  color: inherit;
  cursor: pointer;
}

.kegiatan-picker-option:hover,
.kegiatan-picker-option:focus-visible {
  background: #f8fafc;
  outline: none;
}

.kegiatan-picker-empty {
  padding: 0.65rem;
  color: #94a3b8;
  font-size: 0.9rem;
}

.kegiatan-table-wrap {
  border: 1px solid #d7ccc0;
  border-radius: 10px;
  overflow: auto;
  background: #fff;
}

.kegiatan-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

.kegiatan-table thead th {
  background: #f7f1e8;
  color: #3f2a1d;
  border-bottom: 1px solid #d7ccc0;
  font-weight: 700;
}

.kegiatan-table th,
.kegiatan-table td {
  border: 1px solid #e2d6c8;
  padding: 0.55rem 0.65rem;
  vertical-align: middle;
}

.kegiatan-table th:nth-child(1),
.kegiatan-table td:nth-child(1) {
  width: 38px;
  min-width: 38px;
  max-width: 38px;
  padding-inline: 0.3rem;
}

.kegiatan-table th:nth-child(3),
.kegiatan-table td:nth-child(3) {
  width: 46%;
}

.kegiatan-table th:nth-child(6),
.kegiatan-table td:nth-child(6) {
  width: 54px;
  min-width: 54px;
  max-width: 54px;
  padding-inline: 0.3rem;
}

.kegiatan-table .text-center {
  text-align: center;
}

.kegiatan-status {
  font-size: 1.05rem;
  font-weight: 700;
}

.kegiatan-status.is-done {
  color: #15803d;
}

.kegiatan-status.is-pending {
  color: #94a3b8;
}

.kegiatan-actions-cell {
  white-space: nowrap;
}

.kegiatan-actions-cell .btn-outline {
  margin-right: 0.25rem;
}

.kegiatan-lain-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin: 0;
}

.kegiatan-lain-table thead th {
  background: #f7f1e8;
  color: #3f2a1d;
  border-bottom: 1px solid #d7ccc0;
  font-weight: 700;
  white-space: nowrap;
}

.kegiatan-lain-table th,
.kegiatan-lain-table td {
  border: 1px solid #e2d6c8;
  padding: 0.55rem 0.65rem;
  vertical-align: top;
}

.kegiatan-lain-table td {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  overflow: hidden;
}

.kegiatan-lain-table .text-center {
  text-align: center;
}

.kegiatan-lain-table .kegiatan-lain-col-no,
.kegiatan-lain-table th:nth-child(1) {
  width: 2.75rem;
}

.kegiatan-lain-table th:nth-child(2),
.kegiatan-lain-table td.kegiatan-lain-col-nama {
  width: 21rem;
}

.kegiatan-lain-table th:nth-child(3),
.kegiatan-lain-table td.kegiatan-lain-col-ket {
  width: auto;
}

.kegiatan-lain-table th:nth-child(4),
.kegiatan-lain-table td.kegiatan-lain-col-tgl {
  width: 8.5rem;
  white-space: nowrap;
  overflow: visible;
  word-break: normal;
  overflow-wrap: normal;
}

.kegiatan-lain-table th:nth-child(5),
.kegiatan-lain-table td.kegiatan-lain-col-waktu {
  width: 5rem;
  white-space: nowrap;
  overflow: visible;
  word-break: normal;
  overflow-wrap: normal;
}

.kegiatan-lain-table th:nth-child(6),
.kegiatan-lain-table td.kegiatan-actions-cell {
  width: 7rem;
  max-width: 7rem;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: middle;
  padding: 0.35rem 0.3rem;
  box-sizing: border-box;
}

.kegiatan-lain-table td.kegiatan-actions-cell .btn-outline,
.kegiatan-lain-table td.kegiatan-actions-cell .btn-outline.sm {
  display: inline-block;
  box-sizing: border-box;
  margin: 0 0.2rem 0 0;
  padding: 0.15rem 0.4rem;
  min-height: 0;
  height: auto;
  font-size: 0.72rem;
  line-height: 1.2;
  vertical-align: middle;
}

.kegiatan-lain-table td.kegiatan-actions-cell .btn-outline:last-child {
  margin-right: 0;
}

.kegiatan-waktu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.kegiatan-waktu-grid + .panel-desc {
  margin: 0.2rem 0 0.85rem;
  line-height: 1.45;
  clear: both;
}

.kegiatan-waktu-grid input[type="time"],
.kegiatan-waktu-grid input[type="hidden"] {
  width: 100%;
  min-height: 42px;
  box-sizing: border-box;
}

.kegiatan-waktu-grid input[type="hidden"] {
  display: none;
  min-height: 0;
}

.kegiatan-time24-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.4rem;
}

.kegiatan-time24-picker select {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  border: 1.5px solid var(--border, #e8dcc8);
  border-radius: 10px;
  padding: 0.55rem 0.65rem;
  background: #fff;
  color: var(--text, #3d2e1f);
  font: inherit;
}

.kegiatan-time24-picker select:focus {
  outline: none;
  border-color: var(--primary, #a67c52);
  box-shadow: 0 0 0 3px rgba(166, 124, 82, 0.15);
}

.kegiatan-time-separator {
  color: var(--text, #3d2e1f) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
}

.kegiatan-bidang-input,
#kegiatan-bidang-table .kegiatan-bidang-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 0.82rem;
  box-sizing: border-box;
}

@media (max-width: 700px) {
  .kegiatan-panel-head {
    flex-direction: column;
    align-items: stretch;
  }

  .kegiatan-head-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .kegiatan-head-actions > button {
    width: 100%;
  }

  .kegiatan-print-form-grid {
    grid-template-columns: 1fr;
  }

  .kegiatan-waktu-grid {
    grid-template-columns: 1fr;
  }

  .kegiatan-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    max-width: 100%;
    min-width: 0;
  }

  .kegiatan-table {
    min-width: 640px;
  }

  /* Kegiatan Lain: sama seperti Kegiatan Sekolah — lebar tetap + digeser di HP */
  .kegiatan-lain-table {
    width: max-content;
    min-width: 640px;
    max-width: none;
    table-layout: auto;
  }

  .kegiatan-lain-table th,
  .kegiatan-lain-table td {
    overflow: visible;
  }

  .kegiatan-lain-table th:nth-child(1),
  .kegiatan-lain-table td.kegiatan-lain-col-no {
    width: auto;
    min-width: 2.75rem;
  }

  .kegiatan-lain-table th:nth-child(2),
  .kegiatan-lain-table td.kegiatan-lain-col-nama {
    width: auto;
    min-width: 9rem;
    max-width: 14rem;
  }

  .kegiatan-lain-table th:nth-child(3),
  .kegiatan-lain-table td.kegiatan-lain-col-ket {
    width: auto;
    min-width: 10rem;
    max-width: 16rem;
  }

  .kegiatan-lain-table th:nth-child(4),
  .kegiatan-lain-table td.kegiatan-lain-col-tgl,
  .kegiatan-lain-table th:nth-child(5),
  .kegiatan-lain-table td.kegiatan-lain-col-waktu {
    width: auto;
    white-space: nowrap;
  }

  .kegiatan-lain-table th:nth-child(6),
  .kegiatan-lain-table td.kegiatan-actions-cell {
    width: auto;
    max-width: none;
    overflow: visible;
  }
}

.berita-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.berita-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.berita-empty {
  text-align: center;
  color: var(--muted, #64748b);
  padding: 2rem 1rem;
}

.berita-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  background: #fff;
}

.berita-card-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}

.berita-card-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.berita-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--primary-dark);
  background: var(--primary-light);
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  margin-bottom: 0.35rem;
}

.berita-title {
  margin: 0;
  font-size: 1.05rem;
}

.berita-meta {
  margin: 0.25rem 0 0;
  font-size: 0.82rem;
  color: var(--muted, #64748b);
}

.berita-body-text {
  white-space: pre-wrap;
  line-height: 1.55;
}

.berita-caption {
  margin: 0 0 0.65rem;
  color: var(--muted, #64748b);
  line-height: 1.5;
}

.berita-image {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: min(70vh, 520px);
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #f8fafc;
}

.berita-image-pending {
  min-height: 180px;
  background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
}

.berita-image-link {
  display: block;
  text-decoration: none;
}

.berita-image-zoom {
  cursor: zoom-in;
}

.berita-media {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}

.berita-embed-frame {
  display: block;
  width: 100%;
  min-height: 420px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #f8fafc;
}

.berita-pdf-frame {
  min-height: 520px;
}

.berita-pdf-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  padding: 1.25rem 1rem;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
  text-align: center;
}

.berita-pdf-fallback-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 12px;
  background: #dc2626;
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
}

.berita-pdf-fallback-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

.berita-pdf-fallback-note {
  margin: 0;
  max-width: 28rem;
  color: var(--muted, #64748b);
  font-size: 0.9rem;
  line-height: 1.5;
}

.berita-pdf-fallback-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  width: 100%;
}

.berita-image-broken {
  opacity: 0.35;
}

.berita-file-missing {
  background: #f8f1e8;
  border: 1px dashed #c4a574;
}

.berita-file-missing .berita-pdf-fallback-icon {
  background: #c4a574;
}

.berita-image-error {
  margin: 0;
  color: #b91c1c;
  font-size: 0.88rem;
  text-align: center;
}

.berita-image-open-link {
  margin-top: 0.15rem;
}

@media (max-width: 900px) {
  .berita-media {
    max-width: 100%;
  }

  .berita-image {
    max-height: none;
  }

  .berita-pdf-frame,
  .berita-link-frame {
    display: none;
  }

  .berita-pdf-fallback-actions .btn-primary,
  .berita-pdf-fallback-actions .btn-outline,
  .berita-open-btn {
    min-height: 48px;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 1rem;
  }

  .berita-pdf-fallback-actions .btn-primary,
  .berita-pdf-fallback-actions .btn-outline {
    flex: 1 1 140px;
    justify-content: center;
    text-align: center;
  }

  .berita-link-card {
    min-height: 48px;
    justify-content: center;
  }
}

.berita-youtube-frame {
  aspect-ratio: 16 / 9;
  min-height: 280px;
  height: auto;
}

.berita-link-frame {
  min-height: 360px;
}

.berita-link-card {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #f8fafc;
  color: var(--primary);
  text-decoration: none;
}

.berita-link-card:hover {
  background: #eef2ff;
}

.berita-link-card-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
}

.berita-link-card-url {
  font-size: 0.82rem;
  word-break: break-word;
  color: var(--primary);
}

.berita-empty-inline {
  margin: 0;
  color: var(--muted, #64748b);
}

.berita-link {
  color: var(--primary);
  word-break: break-word;
}

.berita-pdf-link {
  display: inline-flex;
}

.berita-modal-card {
  max-width: 560px;
  width: calc(100% - 2rem);
}

.berita-form .field textarea {
  min-height: 7rem;
  resize: vertical;
}

.berita-file-current {
  margin-top: 0.5rem;
}

.berita-form-preview {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: min(50vh, 280px);
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #f8fafc;
}

.berita-form-preview-frame {
  display: block;
  width: 100%;
  min-height: 220px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f8fafc;
}

/* Mobile dashboard refinements (aligned with login breakpoints) */
@media (max-width: 640px) {
  .topbar p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .page-btn {
    min-width: 44px;
    min-height: 44px;
  }

  .btn-outline,
  .btn-primary {
    min-height: 44px;
  }

  .presensi-tab-btn {
    flex: 1;
    text-align: center;
    min-height: 48px;
  }

  .monitoring-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.4rem;
    overflow-x: auto;
    padding: 0.1rem 0.05rem 0.35rem;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .monitoring-tabs .monitoring-tab-btn {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0.55rem 0.72rem;
    font-size: 0.78rem;
    line-height: 1.15;
    white-space: nowrap;
  }

  #page-monitoring.is-matrix-view .monitoring-above-tabs {
    display: none;
  }

  [data-monitoring-panel="matrix"] .kemajuan-toolbar {
    gap: 0.35rem;
    margin-bottom: 0.4rem !important;
  }

  [data-monitoring-panel="matrix"] .kemajuan-toolbar h3 {
    margin-bottom: 0.1rem;
  }

  [data-monitoring-panel="matrix"] .kemajuan-toolbar .panel-desc {
    margin: 0;
    line-height: 1.3;
  }

  [data-monitoring-panel="matrix"] .mon-matrix-date-field {
    width: 100%;
    min-width: 0;
    margin-top: 0.15rem;
  }

  .panel-nested {
    padding: 1rem;
  }

  .gender-header {
    font-size: 0.82rem;
  }
}

@media (max-width: 380px) {
  .topbar h1 {
    font-size: 1.1rem;
  }

  .stat-value {
    font-size: 1.45rem;
  }

  .dashboard-tab {
    padding: 0.6rem 0.9rem;
    font-size: 0.88rem;
  }

  .sidebar-toggle {
    width: 44px;
    height: 44px;
  }
}

@media (hover: none) and (pointer: coarse) {
  .nav-btn:active,
  .nav-menu-link:active {
    background: rgba(166, 124, 82, 0.35);
    color: #fff;
  }

  .dashboard-tab:active:not(.active) {
    background: var(--primary-light);
  }

  .sidebar-toggle:active {
    background: var(--primary-light);
  }
}

/* —— Monitoring Jurnal & Presensi —— */
#page-monitoring .presensi-filter-grid {
  margin-bottom: 0.85rem;
}
#monitoring-range-label {
  margin: 0;
  padding-top: 0;
  clear: both;
}
.mon-context-block {
  margin: 0.85rem 0 0;
  padding-top: 0.15rem;
  display: grid;
  gap: 0.35rem;
}
.mon-guru-label {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text, #1e293b);
  line-height: 1.35;
  word-break: break-word;
}
#monitoring-msg {
  margin-top: 0.15rem;
}
.mon-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}
.mon-stat-card {
  border: 1px solid var(--border, #e5d9cc);
  border-radius: 8px;
  padding: 0.45rem 0.55rem;
  background: #fffdf9;
}
.mon-stat-card.mon-stat-alert {
  background: #fff5f0;
  border-color: #efc4b0;
}
.mon-stat-label {
  display: block;
  font-size: 0.68rem;
  color: var(--muted, #6b5b4f);
  margin-bottom: 0.1rem;
  line-height: 1.2;
}
.mon-stat-value {
  font-size: 1.05rem;
  color: var(--ink, #3a2f28);
  line-height: 1.1;
}
.mon-stat-card small {
  display: block;
  margin-top: 0.2rem;
  color: var(--muted, #6b5b4f);
  font-size: 0.65rem;
  line-height: 1.25;
}
.mon-bar {
  position: relative;
  margin-top: 0.3rem;
  height: 12px;
  border-radius: 999px;
  background: #efe6dc;
  overflow: hidden;
}
.mon-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
}
.mon-bar-ok { background: #6a9b5a; }
.mon-bar-warn { background: #d4a017; }
.mon-bar-bad { background: #c45c3e; }
.mon-bar em {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 700;
  color: #3a2f28;
}
.mon-hari-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 0.45rem;
}
.mon-hari-card {
  border: 1px solid var(--border, #e5d9cc);
  border-radius: 8px;
  padding: 0.4rem 0.5rem;
  background: #fff;
}
.mon-hari-card strong {
  display: block;
  margin-bottom: 0.1rem;
  font-size: 0.82rem;
}
.mon-hari-card span {
  font-size: 0.7rem;
  color: var(--muted, #6b5b4f);
}
.mon-hari-card .mon-bar {
  margin-top: 0.25rem;
  height: 10px;
}
.mon-row-alert td {
  background: #fff8f4;
}
.mon-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}
.mon-badge.ok {
  background: #e5f2df;
  color: #3f6b34;
}
.mon-badge.warn {
  background: #fff0d6;
  color: #8a5a00;
}
.mon-kode {
  color: var(--muted, #6b5b4f);
  font-size: 0.85em;
}
.mon-pres-detail {
  display: block;
  color: var(--muted, #6b5b4f);
  font-size: 0.7rem;
}

.mon-matrix-date-field {
  min-width: 12rem;
  margin: 0;
}

[data-monitoring-panel="matrix"].is-matrix-focus .monitoring-matrix-toolbar {
  display: none;
}

.monitoring-show-date {
  display: none;
  width: max-content;
  margin: 0 0 0.55rem auto;
  padding: 0.38rem 0.7rem;
  border: 1px solid #d8c6b4;
  border-radius: 999px;
  background: #fffaf3;
  color: #5b3a25;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 650;
  cursor: pointer;
}

[data-monitoring-panel="matrix"].is-matrix-focus .monitoring-show-date {
  display: block;
}

.mon-matrix-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}

.mon-legend-swatch {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 3px;
  margin-right: 0.3rem;
  vertical-align: -0.1rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.mon-legend-swatch.filled {
  background: #10b981;
  border-color: #059669;
}

.mon-legend-swatch.missing {
  background: #f3f0ea;
}

/* Monitoring matriks: hijau/krem harus menang atas gaya jadwal. */
.mon-matrix-table td.mon-matrix-filled {
  background: #10b981 !important;
  color: #fff !important;
  font-weight: 600;
}

.mon-matrix-table td.mon-matrix-missing {
  background: #f8f5f0 !important;
  color: #4a2c1a !important;
}

.mon-matrix-table td.mon-matrix-empty {
  background: #fff !important;
}

.mon-matrix-table td.jadwal-sticky-jam {
  background: #c9aa88 !important;
  color: #3f281a;
  font-weight: 750;
  border-right: 2px solid #9b7653;
}

.mon-matrix-table th.jadwal-sticky-jam {
  background: #b78a5d !important;
  color: #fff;
  border-right: 2px solid #8a6342;
}

@media (max-width: 900px) {
  .mon-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .mon-stats-grid {
    grid-template-columns: 1fr;
  }
}

/* Langganan per sekolah / tahun ajaran */
.langganan-lock-banner {
  margin: 0 1rem 0.75rem;
  padding: 0.65rem 0.9rem;
  border-radius: 10px;
  background: #fef3c7;
  border: 1px solid #f59e0b;
  color: #92400e;
  font-size: 0.92rem;
}
.langganan-lock-banner strong {
  margin-right: 0.35rem;
}
.langganan-status-box {
  margin-top: 0.5rem;
}
.langganan-status-card {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  background: #fff;
}
.langganan-status-card.ok {
  border-color: #86efac;
  background: #f0fdf4;
}
.langganan-status-card.warn {
  border-color: #fcd34d;
  background: #fffbeb;
}
.langganan-status-card.bad {
  border-color: #fca5a5;
  background: #fef2f2;
}
.langganan-status-pill {
  display: inline-block;
  margin-top: 0.35rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}
.langganan-status-pill.ok { background: #dcfce7; color: #166534; }
.langganan-status-pill.warn { background: #fef3c7; color: #92400e; }
.langganan-status-pill.bad { background: #fee2e2; color: #991b1b; }
.langganan-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.45rem;
  font-size: 0.86rem;
  color: #64748b;
}
.langganan-submit-form {
  margin-top: 0.85rem;
}
.langganan-pay-list {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
}
.langganan-pay-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #e2e8f0;
  font-size: 0.88rem;
}
.langganan-pay-status {
  margin-left: 0.5rem;
  font-size: 0.78rem;
  color: #64748b;
}
.langganan-done {
  font-size: 0.82rem;
  color: #166534;
  font-weight: 600;
}
.langganan-admin-actions {
  white-space: nowrap;
}
.langganan-admin-filters {
  margin: 0.65rem 0 0.35rem;
}
.langganan-admin-count {
  margin: 0.25rem 0 0.5rem !important;
  font-size: 0.84rem;
  color: #64748b;
}
.langganan-admin-table-wrap {
  max-height: 420px;
  overflow: auto;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}
.langganan-admin-table-wrap thead th {
  position: sticky;
  top: 0;
  background: #f8fafc;
  z-index: 1;
}
.btn-langganan-block {
  border-color: #fca5a5 !important;
  color: #b91c1c !important;
}
body.langganan-locked .page:not(#page-pengaturan) {
  pointer-events: none;
  opacity: 0.45;
}
body.langganan-locked #page-pengaturan {
  opacity: 1;
  pointer-events: auto;
}

/* ========== HP-friendly / PWA polish (semua akun) ========== */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 900px) {
  .main {
    padding: 0.75rem;
    padding-top: max(0.75rem, env(safe-area-inset-top));
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }

  .topbar {
    margin-bottom: 0.85rem;
    padding-bottom: 0.55rem;
    gap: 0.5rem;
  }

  .topbar h1 {
    font-size: 1.2rem;
    line-height: 1.25;
  }

  .topbar p {
    font-size: 0.82rem;
  }

  .panel {
    padding: 0.9rem;
    margin-bottom: 0.75rem;
    border-radius: 12px;
  }

  .panel-toolbar,
  .kemajuan-toolbar,
  .jadwal-data-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
  }

  .btn-primary,
  .btn-outline,
  .presensi-tab-btn,
  .dashboard-tab {
    min-height: 44px;
  }

  #app-nav .nav-btn {
    min-height: 36px;
  }

  .btn-primary.sm,
  .btn-outline.sm {
    min-height: 40px;
    padding: 0.45rem 0.75rem;
  }

  .field > input,
  .field > select,
  .field > textarea,
  .presensi-filter-grid .field > select,
  .presensi-filter-grid .field > input,
  .kemajuan-filter-grid .field > select,
  .kemajuan-filter-grid .field > input,
  .form-grid .field > select,
  .form-grid .field > input {
    min-height: 44px;
    font-size: 16px; /* cegah zoom iOS */
  }

  .form-grid,
  .presensi-filter-grid,
  .presensi-filter-grid.presensi-report-auto-grid,
  .presensi-filter-grid.presensi-kbm-semester-grid,
  #panel-cetak-presensi-individu .presensi-filter-grid,
  .kemajuan-filter-grid,
  .dashboard-grid {
    grid-template-columns: 1fr !important;
  }

  .presensi-filter-actions,
  .kemajuan-filter-actions,
  .kemajuan-toolbar-actions,
  .kemajuan-table-actions,
  .jadwal-view-actions,
  .presensi-action-row,
  .jurnal-guru-nav-actions,
  .import-actions,
  .topbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
  }

  .presensi-filter-actions .btn-primary,
  .presensi-filter-actions .btn-outline,
  .presensi-action-row > .btn-primary,
  .presensi-action-row > .btn-outline,
  .kemajuan-table-actions > .btn-primary,
  .kemajuan-table-actions > .btn-outline,
  .jurnal-guru-nav-actions > .btn-outline,
  .jurnal-guru-nav-actions > .btn-primary {
    flex: 1 1 calc(50% - 0.25rem);
    justify-content: center;
  }

  /* Aksi jempol: sticky di bawah untuk navigasi/aksi akhir halaman */
  .jurnal-guru-nav-actions {
    position: sticky;
    bottom: max(0.5rem, env(safe-area-inset-bottom));
    z-index: 20;
    background: rgba(255, 252, 247, 0.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 0.55rem;
    border: 1px solid var(--border, #eadbcb);
    border-radius: 12px;
    box-shadow: 0 -4px 18px rgba(61, 46, 31, 0.08);
  }

  #page-kemajuan-kelas .kemajuan-table-actions,
  #page-presensi .presensi-action-row,
  #page-presensi-kbm .presensi-action-row {
    gap: 0.5rem;
  }

  .table-wrap,
  .jurnal-table-wrap,
  .jadwal-matrix-wrap,
  .jadwal-list-wrap,
  .kegiatan-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    max-width: 100%;
    min-width: 0;
  }

  /* min-width hanya di dalam .table-wrap agar tidak melebar seluruh halaman */
  .table-wrap > .data-table,
  .table-wrap > table.data-table {
    min-width: 520px;
  }

  .data-table {
    min-width: 0;
  }

  /* Tabel catatan/prestasi: kolom lebih ringkas di HP */
  #page-catatan .table-wrap > .data-table {
    min-width: 420px;
  }

  #page-catatan .data-table.compact th,
  #page-catatan .data-table.compact td {
    padding: 0.5rem 0.45rem;
    font-size: 0.78rem;
  }

  #page-catatan .panel h2 {
    font-size: 0.98rem;
    line-height: 1.35;
    word-break: break-word;
  }

  #page-catatan .siswa-preview-body h2 {
    font-size: 1.05rem;
    word-break: break-word;
  }

  #page-catatan .siswa-preview-meta div {
    grid-template-columns: 1fr;
    gap: 0.1rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid rgba(61, 46, 31, 0.06);
  }

  #page-catatan .siswa-preview-meta dt {
    font-size: 0.72rem;
  }

  #page-catatan select#siswa_id {
    width: 100%;
    max-width: 100%;
    text-overflow: ellipsis;
  }

  .presensi-table,
  .jurnal-form-table,
  .jadwal-list-table {
    min-width: 640px;
  }

  /* Sticky kolom pertama pada tabel kritis (kecuali Hari di form jurnal — ikut digeser horizontal) */
  .presensi-table th:first-child,
  .presensi-table td:first-child,
  .jadwal-list-table th:nth-child(2),
  .jadwal-list-table td:nth-child(2) {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fffdf9;
    box-shadow: 4px 0 8px -6px rgba(61, 46, 31, 0.35);
  }

  .jurnal-form-table th:nth-child(1),
  .jurnal-form-table td:nth-child(1),
  .jurnal-form-table th.jurnal-hari,
  .jurnal-form-table td.jurnal-hari {
    position: static;
    left: auto;
    z-index: auto;
    box-shadow: none;
  }

  /* Form jurnal HP: Tanggal lebar, Kode Guru sempit tapi kotak nyaman disentuh */
  .jurnal-form-table th:nth-child(2),
  .jurnal-form-table td.jurnal-tgl-cell,
  .jurnal-form-table td:nth-child(2) {
    min-width: 10.5rem;
    width: 10.5rem;
  }

  .jurnal-form-table .jurnal-tgl {
    min-width: 9.75rem;
    width: 9.75rem;
  }

  .jurnal-form-table th.jurnal-th-kode,
  .jurnal-form-table td.jurnal-kode-cell {
    width: 3.9rem;
    max-width: 4.1rem;
    min-width: 3.6rem;
    padding-left: 0.3rem;
    padding-right: 0.3rem;
  }

  .jurnal-form-table th.jurnal-th-kode {
    white-space: normal;
    line-height: 1.15;
    text-align: center;
  }

  .jurnal-form-table .jurnal-kode-guru {
    min-width: 0;
    width: 100%;
    max-width: 3.5rem;
    min-height: 2.6rem;
    padding-left: 0.3rem;
    padding-right: 0.3rem;
    font-size: 0.9rem;
    text-align: center;
  }

  .presensi-tabs,
  .dashboard-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0.35rem;
    padding-bottom: 0.15rem;
  }

  .presensi-tab-btn,
  .dashboard-tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .stats-grid,
  .presensi-stats-grid,
  .mon-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.55rem;
  }

  .siswa-search-row,
  .import-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .siswa-search-row input,
  .siswa-search-row button,
  .import-actions > * {
    width: 100%;
  }

  .nav-btn.nav-sub {
    padding: 0.32rem 0.55rem;
  }

  .user-card {
    gap: 0.65rem;
  }
}

@media (max-width: 560px) {
  .main {
    padding: 0.6rem;
  }

  .panel {
    padding: 0.75rem;
  }

  .stats-grid,
  .presensi-stats-grid,
  .mon-stats-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .stat-card {
    padding: 0.75rem;
  }

  .mon-stat-card {
    padding: 0.45rem 0.55rem;
  }

  .jadwal-data-insights {
    gap: 0.35rem;
  }

  .jadwal-data-insights > span,
  .jadwal-data-insights .jadwal-guru-jurnal-hint {
    font-size: 0.72rem;
  }

  .jadwal-view-toggle {
    width: 100%;
  }

  .jadwal-view-toggle .btn-outline {
    flex: 1;
  }

  .presensi-filter-actions .btn-primary,
  .presensi-filter-actions .btn-outline,
  .presensi-action-row > .btn-primary,
  .presensi-action-row > .btn-outline,
  .jurnal-guru-nav-actions > .btn-outline,
  .jurnal-guru-nav-actions > .btn-primary,
  .kemajuan-table-actions > .btn-primary,
  .kemajuan-table-actions > .btn-outline {
    flex: 1 1 100%;
  }

  .data-table.compact td,
  .data-table.compact th {
    padding: 0.55rem 0.45rem;
    font-size: 0.82rem;
  }

  #page-dashboard .panel-desc,
  #page-jadwal .panel-desc,
  #page-kemajuan-kelas .panel-desc,
  #page-presensi .panel-desc,
  #page-presensi-kbm .panel-desc {
    font-size: 0.82rem;
  }
}

@media (hover: none) and (pointer: coarse) {
  .btn-primary:active,
  .btn-outline:active {
    transform: scale(0.98);
  }

  .field > input,
  .field > select,
  .field > textarea {
    touch-action: manipulation;
  }
}

.pengaturan-literasi-form-title {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1e293b;
}

.pengaturan-literasi-form .kelas-form-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}

.pengaturan-literasi-pertanyaan-block {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: 100%;
  min-width: 0;
  margin-top: 0.15rem;
}

.pengaturan-literasi-pertanyaan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.pengaturan-literasi-pertanyaan-head > span {
  font-size: 0.9rem;
  font-weight: 600;
  color: #334155;
}

.pengaturan-literasi-pertanyaan-hint {
  margin: 0;
}

.pengaturan-literasi-pertanyaan-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  width: 100%;
  min-width: 0;
}

.pengaturan-literasi-pertanyaan-row {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.pengaturan-literasi-pertanyaan-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  font-weight: 700;
  color: #64748b;
}

.pengaturan-literasi-form .pengaturan-literasi-pertanyaan-row input[type="text"] {
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: 12px 14px;
  font-size: 0.95rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: inherit;
  box-sizing: border-box;
}

.pengaturan-literasi-pertanyaan-row .btn-outline {
  min-height: 42px;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .pengaturan-literasi-pertanyaan-row {
    grid-template-columns: 2rem minmax(0, 1fr);
  }

  .pengaturan-literasi-pertanyaan-row .btn-remove-pertanyaan {
    grid-column: 2;
    justify-self: start;
  }
}

.literasi-murid-nama-btn {
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 600;
  color: #8b6344;
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.literasi-murid-nama-btn:hover,
.literasi-murid-nama-btn:focus-visible {
  color: #6b4a32;
  outline: none;
}

.portal-perpustakaan-preview-wrap {
  margin: 0.25rem 0 0.75rem;
  max-width: 420px;
}

.portal-perpustakaan-preview {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(166, 124, 82, 0.35);
  box-shadow: 0 8px 20px rgba(61, 46, 31, 0.1);
  background: #f8fafc;
}

.checking-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
}

.checking-status.is-done {
  color: #15803d;
}

.checking-status.is-empty {
  color: #94a3b8;
}

#tbl-checking-literasi .checking-row-empty td {
  color: #64748b;
}

#page-checking-literasi .presensi-filter-grid {
  grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
}

.checking-literasi-tanggal-tema-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.checking-literasi-tanggal-tema-row > input[type="date"],
.checking-literasi-tanggal-tema-row > select {
  flex: 0 1 auto;
  width: min(22rem, 100%);
  max-width: 100%;
  min-height: 42px;
  box-sizing: border-box;
}

.checking-literasi-tema-inline {
  margin: 0;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}

#page-literasi-murid .presensi-filter-grid {
  grid-template-columns: minmax(10rem, 14rem) minmax(12rem, 1fr);
}

.checking-literasi-daftar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 0.65rem;
  min-width: 0;
}

.checking-literasi-daftar-head h3 {
  margin: 0;
  flex: 0 0 auto;
}

.checking-literasi-daftar-head #checking-literasi-summary {
  margin: 0;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}

/* Tampilkan ±20 baris; selebihnya digulir */
.checking-literasi-scroll {
  max-height: calc(2.4rem * 20 + 2.75rem);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
}

.checking-literasi-scroll .data-table {
  margin: 0;
}

.checking-literasi-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8fafc;
  box-shadow: 0 1px 0 #e2e8f0;
}

.literasi-murid-scroll {
  max-height: calc(2.4rem * 20 + 2.75rem);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
}

.literasi-murid-scroll .data-table {
  margin: 0;
}

.literasi-murid-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8fafc;
  box-shadow: 0 1px 0 #e2e8f0;
}

/* Toast notifikasi “Sudah disimpan” (semua tombol Simpan) */
.app-toast {
  position: fixed;
  left: 50%;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(12px);
  background: #0f172a;
  color: #fff;
  padding: 12px 18px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  z-index: 12000;
  max-width: min(92vw, 360px);
  text-align: center;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.app-toast.app-toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Buku Album */
.buku-album-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: flex-end;
}
.buku-album-toolbar .field {
  margin: 0;
  min-width: 140px;
}
.buku-album-settings {
  margin: 1rem 0 0.25rem;
  padding: 0.85rem 1rem;
  border: 1px solid #e8dcc8;
  border-radius: 12px;
  background: linear-gradient(180deg, #fffdf8 0%, #fff 70%);
}
.buku-album-guru-pesan-form {
  display: grid;
  gap: 0.75rem;
  max-width: 640px;
}
.buku-album-guru-pesan-form .field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.buku-album-settings h3 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  color: #3d2e1f;
}
.buku-album-settings .panel-desc {
  margin: 0 0 0.75rem;
}
.buku-album-kenangan-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}
.buku-album-kenangan-preview {
  width: 160px;
  height: 90px;
  border-radius: 8px;
  border: 1px solid #e5d5b8;
  background: #f3f0ea;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.7rem;
  color: #9ca3af;
  overflow: hidden;
  flex-shrink: 0;
}
.buku-album-ornamen-preview {
  width: 96px;
  height: 96px;
}
.buku-album-kenangan-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) sepia(0.14) contrast(1.02) brightness(1.12);
}
.buku-album-ornamen-preview img {
  object-fit: contain;
  filter: none;
  background: #fff;
  padding: 4px;
}
.buku-album-kenangan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}
.buku-album-file-btn {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.buku-album-kenangan-status {
  font-size: 0.82rem;
}
.buku-album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.buku-album-card {
  border: 1px solid #e8dcc8;
  border-radius: 12px;
  background: linear-gradient(180deg, #fffdf8 0%, #fff 70%);
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.buku-album-card-top {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}
.buku-album-card-photo {
  width: 84px;
  height: 108px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e5d5b8;
  background: #f3ebe2;
  flex-shrink: 0;
}
.buku-album-card-photo.ph {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.72rem;
  color: #9ca3af;
  padding: 0.4rem;
}
.buku-album-card-meta h3 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  color: #3d2e1f;
  line-height: 1.25;
}
.buku-album-card-meta p {
  margin: 0 0 0.2rem;
  font-size: 0.82rem;
  color: #4b5563;
  font-weight: 400;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.buku-album-card-meta span {
  color: #3d2e1f;
  font-weight: 700;
  margin-right: 0.25rem;
}
.buku-album-card-quotes {
  border-top: 1px solid #ead9bc;
  padding-top: 0.55rem;
  font-size: 0.8rem;
  color: #4b5563;
  font-weight: 400;
}
.buku-album-card-quotes p {
  margin: 0 0 0.4rem;
  line-height: 1.35;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.buku-album-card-quotes strong {
  color: #3d2e1f;
  font-weight: 700;
  margin-right: 0.25rem;
}
.buku-album-card-actions {
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
}

/* Kedip singkat saat tombol Simpan diklik */
@keyframes btn-save-blink {
  0%,
  100% {
    filter: brightness(1);
    box-shadow: none;
    transform: scale(1);
  }
  25%,
  75% {
    filter: brightness(1.35);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55), 0 0 14px rgba(196, 165, 116, 0.65);
    transform: scale(1.04);
  }
  50% {
    filter: brightness(0.88);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
    transform: scale(0.98);
  }
}

.btn-save-blink {
  animation: btn-save-blink 0.55s ease-in-out 2;
}


/* ========== Layout HP vs Laptop (pola bottom-nav) ========== */
:root {
  --mobile-bottom-nav-height: 64px;
}

.mobile-bottom-nav {
  display: none;
}

@media (max-width: 900px) {
  body.has-mobile-bottom-nav {
    --mobile-bottom-nav-height: 64px;
  }

  body.has-mobile-bottom-nav .main {
    padding-bottom: calc(var(--mobile-bottom-nav-height) + 1rem + env(safe-area-inset-bottom, 0px));
  }

  /* Topbar sticky ala app HP */
  body.has-mobile-bottom-nav .topbar {
    position: sticky;
    top: 0;
    z-index: 80;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
    margin-top: -0.75rem;
    padding: 0.65rem 0.75rem 0.55rem;
    padding-top: max(0.65rem, env(safe-area-inset-top));
    background: rgba(245, 235, 224, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
  }

  /* Hamburger diganti item Menu di bottom nav */
  body.has-mobile-bottom-nav .sidebar-toggle {
    display: none !important;
  }

  .mobile-bottom-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Di atas overlay (150) dan drawer sidebar (200) agar Beranda/Menu selalu bisa diklik */
    z-index: 210;
    height: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom, 0px));
    padding: 0.25rem 0.2rem calc(0.25rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 20px rgba(61, 46, 31, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  /*
   * Modal ada di dalam .main (z-index: 1), jadi kalah dari bottom nav (210).
   * Saat modal/lightbox terbuka, angkat .main agar isi panel tidak tertutup menu bawah.
   */
  body.has-mobile-bottom-nav:has(
    .modal:not(.hidden):not(.jurnal-symbols-float),
    .foto-lightbox:not(.hidden)
  ) .main {
    z-index: 300;
  }

  /* Sheet duduk di atas bottom nav — tabel/detail tidak ketutup Beranda–Menu */
  body.has-mobile-bottom-nav .modal:not(.jurnal-symbols-float) {
    padding-bottom: calc(var(--mobile-bottom-nav-height, 64px) + env(safe-area-inset-bottom, 0px));
  }

  body.has-mobile-bottom-nav .modal:not(.jurnal-symbols-float) .modal-card {
    max-height: calc(
      100dvh
      - var(--mobile-bottom-nav-height, 64px)
      - env(safe-area-inset-top, 0px)
      - env(safe-area-inset-bottom, 0px)
      - 0.75rem
    );
  }

  /* Detail ketidakhadiran: pastikan tinggi max menghormati bottom nav */
  body.has-mobile-bottom-nav .presensi-dash-detail-card {
    max-height: calc(
      100dvh
      - var(--mobile-bottom-nav-height, 64px)
      - env(safe-area-inset-top, 0px)
      - env(safe-area-inset-bottom, 0px)
      - 0.75rem
    );
  }

  .mobile-bottom-nav[hidden] {
    display: none !important;
  }

  .mobile-nav-item {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-width: 0;
    padding: 0.2rem 0.15rem;
    border-radius: 12px;
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .mobile-nav-item svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
  }

  .mobile-nav-item span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-nav-item.active {
    color: var(--primary-dark);
    background: rgba(166, 124, 82, 0.12);
  }

  .mobile-nav-item:active {
    background: rgba(166, 124, 82, 0.18);
  }

  /* Konten lebih padat di HP */
  body.has-mobile-bottom-nav .page-subtitle,
  body.has-mobile-bottom-nav #page-subtitle {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  body.has-mobile-bottom-nav .presensi-dash-absensi-filters {
    grid-template-columns: 1fr 1fr !important;
  }

  body.has-mobile-bottom-nav .presensi-dash-kelas-head {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  body.has-mobile-bottom-nav .presensi-dash-kelas-head select {
    width: 100%;
  }
}

@media (min-width: 901px) {
  .mobile-bottom-nav {
    display: none !important;
  }

  body.has-mobile-bottom-nav .sidebar-toggle {
    display: none;
  }
}

@media print {
  .mobile-bottom-nav {
    display: none !important;
  }
}