/* ============================================================
   KERTAS KERJA BOSP 2026 — UI 3D (mengikuti referensi tab BKU)
   Design tokens mengikuti spek docs/analysis/reference/ui-design-spec.md
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body, *, *::before, *::after {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar { width: 0; height: 0; display: none; }

:root {
  /* Palet navy / sidebar */
  --navy-0: #0f2b4c;
  --navy-1: #16294a;
  --navy-2: #1e3a5f;
  --navy-deep: #0d2240;
  /* Biru aksen */
  --blue-from: #2b6cb0;
  --blue-to: #4299e1;
  --blue-pill-from: #3182ce;
  --blue-pill-to: #2b6cb0;
  --blue-hover: #ebf4ff;
  /* Hijau sukses */
  --green-from: #2f855a;
  --green-to: #48bb78;
  /* Merah destruktif */
  --red: #e53e3e;
  /* Teks & garis */
  --ink: #1a202c;
  --muted: #718096;
  --line: #e2e8f0;
  --grid: #edf2f7;
  --row-alt: #f7fafc;
  --bg: #eef1f6;
  --sidebar-top: #001c54;
  --sidebar-mid: #002c72;
  --sidebar-bottom: #001e58;
  --royal-from: #4778f9;
  --royal-to: #033dde;
  /* Bayangan 3D */
  --shadow-card: 0 12px 28px -6px rgba(15,42,76,.20), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -2px 0 rgba(15,42,76,.08);
  --shadow-sm: 0 4px 10px rgba(15,42,76,.12);
  --shadow-btn: 0 4px 10px rgba(15,42,76,.25);
}

html, body {
  width: 100%;
  min-height: 100%;
}

body {
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ---------- Ikon SVG (line-art) ---------- */
.ico {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Topbar (hanya di kanan sidebar) ---------- */
.topbar {
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(15,42,76,.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
  padding: 10px 24px;
  min-height: 68px;
  height: 68px;
  position: sticky;
  top: 0;
  z-index: 20;
}

/* Logo aplikasi (perisai + buku, dari ikon user) — sengaja lebih besar dari icon topbar */
.logo-img {
  width: 56px; height: 56px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Blok dokumen (ikon + semester) — sama besar dengan icon topbar lainnya */
.doc-block {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.doc-ico-img {
  width: 40px; height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}
.icon-img {
  width: 21px; height: 21px;
  object-fit: contain;
}
.icon-img-3d { width: 36px; height: 36px; }
.avatar-image {
  object-fit: contain;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.asset-card-icon { object-fit: contain; }
.sum-ico.asset-card-icon { width: 40px; height: 40px; object-fit: contain; }
.pdf-icon.asset-card-icon { width: 46px; height: 46px; object-fit: contain; background: transparent; }
.menu-item-img,
.theme-menu-item img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex: 0 0 28px;
  display: block;
}
.account-menu-item .menu-item-img,
.theme-menu-item img { margin: 0; }
.account-menu-item,
.theme-menu-item { gap: 10px; }
.account-menu-item .account-menu-arrow { margin-left: auto; }

.sec-shield-img {
  width: 22px; height: 22px;
  object-fit: contain;
  flex-shrink: 0;
  margin-top: 1px;
}
.doc-text { display: flex; flex-direction: column; line-height: 1.3; }
.doc-text b { font-size: 14px; font-weight: 800; color: #1a202c; white-space: nowrap; }
.doc-text span { font-size: 12px; color: #64748b; white-space: nowrap; }

/* Search pill global (putih sesuai referensi, posisi kanan-tengah mendekati ikon) */
.search-pill {
  flex: 0 1 420px; margin-left: auto;
  display: flex; align-items: center; gap: 9px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 11px 18px;
  color: #94a3b8; font-size: 13px;
  box-shadow: 0 1px 3px rgba(15,42,76,.06);
}
.search-pill .ico { width: 16px; height: 16px; color: #3182ce; }
.search-ph { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.top-actions { display: flex; align-items: center; gap: 14px; }
.top-actions .icon-btn { width: 44px; height: 44px; }
.top-actions .avatar-wrap { min-height: 46px; }
.notification-panel { position: fixed; z-index: 1200; top: 64px; right: 122px; width: min(360px, calc(100vw - 24px)); max-height: min(480px, calc(100vh - 84px)); overflow: auto; border: 1px solid #dbe4f0; border-radius: 14px; background: #fff; box-shadow: 0 18px 42px rgba(15,42,76,.24); }
.notification-panel.hidden { display: none; }
.notification-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px 11px; border-bottom: 1px solid #e2e8f0; }
.notification-panel-head h3 { margin: 0; color: #102b5c; font-size: 14px; }
.notification-panel-head p { margin: 3px 0 0; color: #64748b; font-size: 11px; }
.notification-close { border: 0; background: transparent; color: #64748b; font-size: 22px; line-height: 1; cursor: pointer; }
.notification-list { padding: 6px 8px 10px; }
.notification-item { display: flex; gap: 9px; padding: 10px 8px; border-radius: 9px; }
.notification-item.read { opacity: .72; }
.notification-dot { width: 8px; height: 8px; margin-top: 5px; flex: 0 0 8px; border-radius: 50%; background: #2563eb; }
.notification-dot.success { background: #16a34a; }
.notification-dot.warning { background: #d97706; }
.notification-item b { display: block; color: #1e293b; font-size: 12px; }
.notification-item p { margin: 2px 0; color: #475569; font-size: 11px; line-height: 1.35; }
.notification-item small { color: #94a3b8; font-size: 10px; }
.notification-empty { padding: 22px 10px; color: #64748b; font-size: 12px; text-align: center; }
.document-print-button { white-space: nowrap; }
.admin-export-card { width: min(560px, calc(100vw - 32px)); }
.admin-export-body { display: grid; gap: 14px; padding: 20px; }
.admin-export-field { display: grid; gap: 6px; color: #334155; font-weight: 700; font-size: 13px; }
.admin-export-field select { min-height: 40px; border: 1px solid #cbd5e1; border-radius: 9px; padding: 8px 10px; background: #fff; color: #0f172a; }
.admin-export-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.admin-export-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.admin-export-mode,
#admin-export-actions button { min-height: 36px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.26); border-radius: 10px; font-weight: 800; letter-spacing: .01em; box-shadow: inset 0 2px 0 rgba(255,255,255,.28), inset 0 -3px 0 rgba(15,42,76,.22), 0 3px 0 rgba(15,42,76,.20); transition: transform .12s ease, box-shadow .12s ease; }
.admin-export-mode:hover,
#admin-export-actions button:hover { transform: translateY(-1px); box-shadow: inset 0 2px 0 rgba(255,255,255,.32), inset 0 -3px 0 rgba(15,42,76,.24), 0 4px 0 rgba(15,42,76,.20); }
.admin-export-mode:active,
#admin-export-actions button:active { transform: translateY(1px); box-shadow: inset 0 2px 0 rgba(15,42,76,.20), inset 0 -1px 0 rgba(255,255,255,.18); }
.admin-export-mode.active { outline: 3px solid rgba(37,99,235,.25); transform: translateY(-1px); }
.admin-export-status { min-height: 20px; margin: 0; color: #475569; font-size: 12px; }
.admin-download-progress { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid #93c5fd; border-radius: 10px; background: rgba(219,234,254,.48); color: #1e3a8a; }
.admin-download-progress-head { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; font-weight: 800; }
.admin-download-progress-track { height: 9px; overflow: hidden; border-radius: 99px; background: rgba(148,163,184,.34); border: 1px solid rgba(100,116,139,.24); }
.admin-download-progress-bar { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #22c55e, #2563eb); transition: width .14s ease; box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.admin-download-progress.is-active .admin-download-progress-bar { width: 42%; animation: admin-download-indeterminate 1.15s ease-in-out infinite; }
@keyframes admin-download-indeterminate { 0% { transform: translateX(-120%); } 50% { transform: translateX(115%); } 100% { transform: translateX(250%); } }
body[data-theme="dark"] .admin-download-progress { border-color: #315a93; background: rgba(20,53,96,.72); color: #dbeafe; }
body[data-theme="dark"] .admin-export-mode,
body[data-theme="dark"] #admin-export-actions button { border-color: rgba(147,197,253,.3); box-shadow: inset 0 2px 0 rgba(255,255,255,.22), inset 0 -3px 0 rgba(0,0,0,.3), 0 3px 0 rgba(0,0,0,.28); }
@media (max-width: 760px) { .notification-panel { top: 58px; right: 10px; } .document-print-button { width: 100%; } .admin-export-modes, .admin-export-actions { grid-template-columns: 1fr; } }
.admin-period-button { display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; color: #334155; font-size: 12px; font-weight: 800; cursor: pointer; padding: 5px 7px; border-radius: 8px; }
.admin-period-button img { width: 30px; height: 30px; object-fit: contain; }
.admin-period-button:hover { background: #eff6ff; color: #1d4ed8; }
.validation-menu-wrap { position: relative; }
.validation-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 8px; background: transparent; color: #334155; cursor: pointer; padding: 7px 5px; font: inherit; font-size: 12px; font-weight: 700; }
.validation-icon-button { width: 44px; height: 44px; padding: 0; }
.validation-icon-button .icon-img { width: 36px; height: 36px; object-fit: contain; }
.validation-icon-button:hover, .validation-icon-button[aria-expanded="true"] { background: rgba(55,125,238,.16); }
.validation-toggle:hover, .validation-toggle[aria-expanded="true"] { background: #eff6ff; color: #1d4ed8; }
.validation-chevron { width: 13px; height: 13px; color: #64748b; transition: transform .18s ease; }
.validation-toggle[aria-expanded="true"] .validation-chevron { transform: rotate(180deg); }
.validation-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 110; width: 164px; padding: 7px; border: 1px solid #e2e8f0; border-radius: 11px; background: #fff; box-shadow: 0 16px 34px rgba(15,42,76,.18), 0 2px 0 rgba(119,157,214,.2); }
.validation-menu-item { width: 100%; display: flex; align-items: center; gap: 9px; border: 0; border-radius: 8px; padding: 9px; background: transparent; color: #334155; cursor: pointer; font: inherit; font-size: 12px; text-align: left; }
.validation-menu-item:hover { background: #f1f5f9; }
.validation-menu-item img { width: 24px; height: 24px; object-fit: contain; }
body[data-theme="dark"] .validation-toggle { color: #e5edf9; }
body[data-theme="dark"] .validation-icon-button:hover,
body[data-theme="dark"] .validation-icon-button[aria-expanded="true"] { background: rgba(55,125,238,.20); }
body[data-theme="dark"] .validation-menu { background: #14213a; border-color: #2a3d5e; }
body[data-theme="dark"] .validation-menu-item { color: #e5edf9; }
body[data-theme="dark"] .validation-menu-item:hover { background: #1c3152; }
 .admin-period-button.hidden { display: none; }
:root { --period-popup-width: 300px; }
.period-calendar-stage { position: fixed !important; top: 72px !important; right: 12px !important; left: auto !important; display: block; width: min(var(--period-popup-width), calc(100vw - 24px)) !important; max-width: calc(100vw - 24px) !important; margin: 0 !important; box-sizing: border-box; }
#period-calendar-modal { display: block; padding: 0; overflow: visible; }
#period-calendar-modal .period-calendar-stage { position: fixed !important; top: 72px !important; right: 12px !important; left: auto !important; }
.period-calendar-card { position: relative; z-index: 1; display: block; width: var(--period-popup-width) !important; max-width: var(--period-popup-width) !important; box-sizing: border-box; overflow: hidden; border: 0; border-radius: 14px; box-shadow: 0 18px 42px rgba(15,42,76,.28), 0 6px 14px rgba(37,99,235,.12); background: linear-gradient(145deg,#fff,#f8fbff); }
.period-calendar-card.period-card-hidden { display: none; }
.period-calendar-head { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; padding: 13px 14px 11px; border-bottom: 1px solid #e2e8f0; }
.period-calendar-head-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: linear-gradient(145deg,#4e91fb,#1457d9); box-shadow: inset 0 2px 2px rgba(255,255,255,.45), inset 0 -3px 0 rgba(4,57,145,.25), 0 5px 10px rgba(37,99,235,.25); }
.period-calendar-head-icon img { width: 23px; height: 23px; object-fit: contain; filter: brightness(0) invert(1); }
.period-calendar-head h3 { margin: 0; color: #102b5c; font-size: 14px; letter-spacing: -.2px; }
.period-calendar-head p { margin: 2px 0 0; color: #64748b; font-size: 9px; }
.period-calendar-form { min-height: 0; display: grid; gap: 9px; padding: 15px 14px 13px; }
.period-date-fields { display: grid; gap: 9px; align-content: start; padding-top: 0; }
.period-date-field { display: grid; grid-template-columns: 1fr 25px; grid-template-rows: auto auto; align-items: center; width: 100%; min-height: 43px; padding: 6px 9px 6px 12px; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; color: #172554; box-shadow: inset 0 1px 0 #fff, 0 4px 10px rgba(30,64,175,.09); }
.period-date-field:hover, .period-date-field:focus-within, .period-date-field.active { border-color: #75a7f8; box-shadow: 0 0 0 2px rgba(59,130,246,.12), 0 6px 12px rgba(30,64,175,.13); }
.period-date-field label { grid-column: 1; grid-row: 1; font-size: 9px; font-weight: 800; }
.period-date-manual { grid-column: 1; grid-row: 2; width: 100%; border: 0; outline: 0; background: transparent; color: #64748b; font-size: 13px; letter-spacing: .1px; padding: 0; }
.period-date-manual::placeholder { color: #64748b; opacity: 1; }
.period-date-manual.invalid { color: #b91c1c; }
.period-date-trigger { grid-column: 2; grid-row: 1 / span 2; border: 0; background: transparent; padding: 0; cursor: pointer; }
.period-date-trigger img { width: 25px; height: 25px; padding: 5px; border-radius: 7px; background: linear-gradient(145deg,#f8fbff,#e8f1ff); box-shadow: 0 3px 6px rgba(37,99,235,.15); }
.period-calendar-preview { margin: 5px 0 3px; min-height: 15px; color: #145cc7; font-size: 10px; font-weight: 800; }
.period-calendar-mark { font-size: 11px; }
.period-save-button { min-height: 31px; border: 0; border-radius: 7px; background: linear-gradient(180deg,#3988f4,#125bd3); color: #fff; font-size: 10px; font-weight: 700; box-shadow: 0 6px 11px rgba(37,99,235,.28), inset 0 1px 0 rgba(255,255,255,.35); cursor: pointer; }
.period-save-button:hover { background: linear-gradient(180deg,#4a95fb,#0f50c5); }
.period-calendar-popover { position: relative; z-index: 4; width: var(--period-popup-width) !important; max-width: var(--period-popup-width) !important; box-sizing: border-box; min-height: 0; margin: 0; padding: 14px 12px 9px; background: linear-gradient(145deg,#fff,#f8fbff); border: 1px solid #e6edf7; border-radius: 14px; box-shadow: 0 18px 42px rgba(15,42,76,.26), 0 6px 13px rgba(37,99,235,.12); }
.period-calendar-popover:before { display: none; }
.period-calendar-popover.hidden { display: none; }
.period-calendar-popover-head, .period-calendar-popover-foot { display: flex; align-items: center; justify-content: space-between; }
.period-calendar-heading { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.period-calendar-picker { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; color: #172554; font-size: 16px; font-weight: 800; padding: 4px 6px; cursor: pointer; }
.period-calendar-picker-chevron { font-size: 14px; color: #334155; }
.period-calendar-picker-menu { position: absolute; z-index: 20; top: 42px; left: 12px; width: 190px; max-height: 270px; overflow-y: auto; padding: 6px 7px; border: 1px solid #b9c4d3; border-radius: 5px; background: linear-gradient(145deg,#fff,#eef3f9); box-shadow: 6px 7px 0 rgba(15,42,76,.18), 0 14px 28px rgba(15,42,76,.28), inset 0 1px 0 rgba(255,255,255,.9); }
.period-calendar-picker-menu.hidden { display: none; }
.period-calendar-picker-current-year { padding: 6px 8px; color: #172554; font-size: 13px; font-weight: 800; background: #e9edf3; border-bottom: 1px solid #d8e0eb; }
.period-calendar-picker-months { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 5px 0; }
.period-calendar-picker-months button, .period-calendar-picker-years button { border: 0; background: transparent; color: #1e293b; padding: 6px 4px; font-size: 12px; cursor: pointer; }
.period-calendar-picker-months button:hover, .period-calendar-picker-years button:hover { background: #dbeafe; }
.period-calendar-picker-months button.selected, .period-calendar-picker-years button.selected { color: #fff; background: linear-gradient(180deg,#3988f4,#125bd3); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 4px rgba(15,42,76,.25); }
.period-calendar-picker-years { display: grid; gap: 1px; padding-top: 3px; border-top: 1px solid #d5dee9; }
.period-calendar-popover-head button, .period-calendar-popover-foot button { border: 0; background: #fff; color: #1e3a8a; border-radius: 10px; padding: 9px 11px; box-shadow: 0 5px 12px rgba(15,42,76,.10); cursor: pointer; font-weight: 800; }
.period-calendar-popover-head button + button { margin-left: 7px; }
.period-calendar-weekdays, .period-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; text-align: center; }
.period-calendar-weekdays { margin: 26px 0 9px; color: #1e293b; font-size: 11px; font-weight: 800; }
.period-calendar-weekdays span:first-child { color: #dc2626; }
.period-calendar-weekdays span:last-child { color: #2563eb; }
.period-calendar-grid button { min-height: 31px; border: 0; border-radius: 9px; background: #fff; color: #1e293b; box-shadow: 0 3px 8px rgba(15,42,76,.06); cursor: pointer; }
.period-calendar-grid button.muted { color: #94a3b8; box-shadow: none; }
.period-calendar-grid button.selected { color: #fff; background: linear-gradient(145deg,#4f8df7,#1457d9); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 6px 12px rgba(37,99,235,.32); }
.period-calendar-grid button.in-range { color: #1d4ed8; background: #e8f1ff; }
@media (max-width: 760px) { #period-calendar-modal { padding: 0; } .period-calendar-stage { top: 74px !important; right: 10px !important; width: min(var(--period-popup-width), calc(100vw - 20px)) !important; max-width: calc(100vw - 20px) !important; } .period-calendar-card, .period-calendar-popover { width: min(var(--period-popup-width), calc(100vw - 20px)) !important; max-width: calc(100vw - 20px) !important; } .period-calendar-card { max-height: calc(100vh - 40px); overflow: auto; } }
.icon-btn {
  position: relative;
  width: 48px; height: 48px; border-radius: 0; border: 0;
  background: transparent; cursor: pointer; color: #1a202c;
  display: flex; align-items: center; justify-content: center;
  box-shadow: none;
}
.icon-btn:hover { background: transparent; color: var(--blue-from); }
.icon-btn .badge {
  position: absolute; top: -5px; right: -5px;
  background: #3b82f6; color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 4px rgba(59,130,246,.4);
}
.account-menu-wrap { position: relative; }
.avatar-wrap { display: flex; align-items: center; gap: 2px; cursor: pointer; border: 0; background: transparent; padding: 0; box-shadow: none; }
.avatar {
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-from), var(--blue-to));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.4);
}
.avatar.avatar-image { width: 46px; height: 46px; background: transparent !important; border-radius: 50%; border: 0 !important; outline: 0 !important; box-shadow: none !important; }
.avatar-wrap .chev { width: 13px; height: 13px; color: #64748b; transition: transform .18s ease; }
.avatar-wrap[aria-expanded="true"] .chev { transform: rotate(180deg); }
.account-menu {
  position: absolute; top: calc(100% + 10px); right: 0; width: 292px; z-index: 100;
  padding: 8px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff;
  box-shadow: 0 16px 34px rgba(15,42,76,.18), 0 2px 0 rgba(119,157,214,.2);
}
.account-menu-profile { display: flex; align-items: center; gap: 10px; padding: 10px 9px 12px; border-bottom: 1px solid #edf2f7; }
.account-menu-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 34px; background: #f1f5f9; color: #334155; font-size: 12px; font-weight: 700; }
.account-menu-avatar.avatar-image { width: 44px; height: 44px; flex-basis: 44px; object-fit: contain; background: transparent !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; }
.account-menu-user { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.account-menu-user b, .account-menu-user span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-user b { color: #1e293b; font-size: 13px; }
.account-menu-user span { color: #64748b; font-size: 11px; }
.account-menu-arrow { width: 12px; height: 12px; color: #64748b; flex: 0 0 auto; }
.account-menu-item { width: 100%; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 8px; padding: 10px 9px; background: transparent; color: #334155; cursor: pointer; text-align: left; font: inherit; font-size: 12px; }
.account-menu-item:hover, .account-menu-item[aria-expanded="true"] { background: #f5f7fa; }
.menu-item-ico { width: 17px; height: 17px; color: #64748b; flex: 0 0 auto; }
.account-menu-item > span { flex: 1; }
.account-upgrade { color: #166534; font-weight: 700; background: #f0fdf4; margin-top: 6px; }
.account-upgrade .menu-item-ico { color: #16a34a; }
.account-logout { color: #b91c1c; margin-top: 5px; border-top: 1px solid #edf2f7; border-radius: 0 0 8px 8px; }
.account-logout .menu-item-ico { color: #dc2626; }
.theme-menu { padding: 2px 0 4px 30px; }
.theme-menu-item { width: 100%; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 7px; background: transparent; color: #475569; cursor: pointer; padding: 8px 10px; text-align: left; font: inherit; font-size: 12px; }
.theme-menu-item:hover, .theme-menu-item.active { background: #f1f5f9; color: #1d4ed8; }
.theme-menu-item span:first-child { width: 16px; text-align: center; color: #64748b; }

/* ---------- Layout ---------- */
.app-shell { display: flex; min-height: 100vh; }
.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ---------- Sidebar (navy pekat full-height, sesuai referensi #001E58) ---------- */
.sidebar {
  width: 280px;
  background: linear-gradient(180deg, var(--sidebar-top) 0%, var(--sidebar-mid) 46%, var(--sidebar-bottom) 100%);
  padding: 0 14px 16px;
  flex-shrink: 0;
  overflow: hidden;
  height: 100vh;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.side-logo {
  display: flex; align-items: center; gap: 10px;
  height: 68px;
  min-height: 68px;
  padding: 8px 6px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  margin-bottom: 12px;
}
.side-logo .emblem { width: 38px; height: 38px; }
.side-logo-text { min-width: 0; }
.side-logo-title { font-size: 12.5px; font-weight: 800; color: #fff; letter-spacing: .3px; white-space: nowrap; }
.side-logo-sub { font-size: 10px; color: #b8c6e6; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-label {
  font-size: 10px; font-weight: 700; color: #8ca5d4;
  letter-spacing: 1px; text-transform: uppercase;
  padding: 0 10px 8px;
}
.sidebar-settings { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  width: 100%; text-align: left;
  padding: 10px 11px; margin-bottom: 2px;
  border: none; border-radius: 10px;
  background: transparent; color: #ffffff;
  font-size: 13.5px; font-weight: 600; cursor: pointer;
  position: relative;
}
.nav-item:hover { background: rgba(255,255,255,.09); }
.nav-item.active,
.nav-item.active[data-module="bku"],
.nav-item.active[data-module="bhp"] {
  background: linear-gradient(135deg, var(--royal-from), var(--royal-to));
  color: #fff; font-weight: 700;
  box-shadow: 0 4px 14px rgba(3,61,222,.5), inset 0 1px 0 rgba(255,255,255,.3);
}
.nav-item.active::before {
  content: ''; position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 4px; border-radius: 4px; background: #9db8ff;
}
.nav-ico {
  width: 19px; height: 19px; flex-shrink: 0;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* Kotak keamanan (bawah sidebar) */
.sidebar-sec {
  display: none;
  margin-top: auto;
  background: #062a63;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 12px;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.3);
  position: relative;
}
.sec-row { display: flex; align-items: flex-start; gap: 9px; }
.sec-text { flex: 1; min-width: 0; }
.sec-shield { width: 18px; height: 18px; color: #38a169; flex-shrink: 0; margin-top: 1px; }
.sec-title { font-size: 11px; font-weight: 700; color: #fff; }
.sec-sub { font-size: 10px; color: #94a3b8; margin-top: 2px; line-height: 1.4; }
.sec-dot {
  position: absolute; bottom: 8px; right: 10px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #38a169;
  box-shadow: 0 0 6px #38a169;
}

/* ---------- Konten ---------- */
.content {
  flex: 1; padding: 24px 28px 44px; min-width: 0;
  background: linear-gradient(180deg, #eef1f6 0%, #f7f9fc 100%);
}
.panel { display: none; }
.panel.active { display: block; }
.page-head { margin-bottom: 16px; }
/* UI-17 (keputusan 63): kolom pencarian admin berdiri di SISI KANAN KEPALA HALAMAN,
   sejajar dengan kolom pencarian/pemilih di tab viewer. Karena itu ia anak LANGSUNG
   .editor-head-row (anak terakhir) — kalau ia duduk di dalam .editor-title-row, sisi
   kanannya hanya tepi blok judul dan kotaknya berhenti di tengah halaman.
   Saat layar <=900 px kepala halaman menjadi kolom, jadi ia turun ke barisnya sendiri
   (aturan responsif tambahan di public/app.js untuk <=600 px). */
.editor-title-row { display: flex; align-items: center; gap: 16px; min-width: 0; }
.editor-title-row h2 { min-width: 0; }
.editor-head-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.editor-head-copy { min-width: 0; flex: 1 1 auto; }
#editor-regional-school-select { min-width: 300px; max-width: 420px; }
#editor-import-slot { flex: 0 1 520px; min-width: 360px; }
#editor-import-slot .import-box { width: 100%; }
.school-import-slot { display: contents; }
.page-head h2 { font-size: 22px; font-weight: 800; color: #10234a; letter-spacing: -.02em; }
.period { font-size: 13px; color: var(--muted); margin-top: 3px; }

/* Viewer: pencarian REKAP TRIWULAN berada di sisi kanan judul tanpa mengubah layout umum. */
.viewer-title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* Nomor 14 (keputusan 64): kotak pemilih sekolah berdiri di sisi KANAN judul
   di tab BA REKON, LAM BA REKON, dan SPTJM — sebaris dengan posisi kolom
   pencarian milik admin. */
#regional-school-select { margin-left: auto; }
.viewer-title-row .search-input { flex: 0 0 280px; }
.viewer-title-row .search-input.hidden { display: none; }

.top-row { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }

/* Info sekolah — kartu 3D */
.school-info {
  flex: 1; min-width: 300px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  border: 1px solid #dbe4f0; border-radius: 14px;
  box-shadow: var(--shadow-card);
  padding: 18px 20px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 26px;
  position: relative;
}
.school-info::after {
  content: ''; position: absolute; inset: 1px; border-radius: 13px;
  pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
}
.si-item { display: flex; flex-direction: column; gap: 4px; }
.si-label {
  font-size: 10px; font-weight: 700; color: #64748b;
  text-transform: uppercase; letter-spacing: .05em;
  background: transparent; border: 0;
  padding: 0; border-radius: 0;
  align-self: flex-start;
}
.si-item b { font-size: 14px; font-weight: 700; color: #111827; }

/* Identitas: beri ruang khusus untuk metadata kanan agar nama sekolah panjang
   dapat turun dua baris tanpa menimpa Kabupaten/Kota dan Triwulan. */
.school-info { grid-template-columns: minmax(0, 1fr) minmax(270px, .9fr); column-gap: 52px; }
.si-content-block, .si-identity-block, .si-address-block, .si-name-copy, .si-address-copy, .si-meta-block, .si-meta-copy { min-width: 0; }
.si-name-copy b { display: block; max-width: 100%; overflow-wrap: anywhere; line-height: 1.2; }
.si-meta-block { padding-left: 28px; border-left: 1px solid #dbe4f0; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.si-meta-row { display: flex; align-items: center; gap: 18px; min-width: 0; }
.si-meta-icon { width: 38px; height: 38px; flex: 0 0 38px; object-fit: contain; }
.si-meta-copy { min-width: 0; }
.si-meta-copy b { display: block; overflow-wrap: anywhere; line-height: 1.25; }

/* Ringkasan + impor */
.summary-col { width: 390px; display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; }
.cards-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cards-row .sum-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 7px;
  align-items: center;
  padding-left: 12px;
  padding-right: 12px;
}
.cards-row .sum-ico {
  position: static;
  grid-column: 1;
  grid-row: 1 / span 2;
}
.cards-row .sum-label {
  grid-column: 2;
  grid-row: 1;
  padding: 0;
  align-self: end;
}
.cards-row .sum-value {
  grid-column: 2;
  grid-row: 2;
  margin-top: 1px;
  align-self: start;
}
.sum-card {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-card);
  padding: 14px 16px 16px;
  position: relative; overflow: hidden;
  min-height: 86px;
}
/* strip biru di atas kartu (sesuai referensi CARD) */
.sum-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 45%, #e9eff9 100%);
}
.sum-ico {
  position: absolute; top: 14px; left: 14px;
  width: 40px; height: 40px; border-radius: 10px;
  color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(15,42,76,.3), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(15,42,76,.2);
  overflow: hidden;
}
.sum-ico .ico { width: 22px; height: 22px; }
/* Ikon summary adalah glyph langsung, bukan kartu kecil di dalam kartu. */
.sum-ico { background: transparent; box-shadow: none; border-radius: 0; }
.sum-ico::after { content: none; }
.chip-blue { background: transparent; color: #2563eb; }
.chip-orange { background: transparent; color: #d97706; }
.sum-label {
  font-size: 10px; color: #475569; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
  padding-left: 52px;
  padding-right: 0;
  white-space: nowrap;
}
.sum-value {
  font-size: clamp(15px, 1.12vw, 20px); font-weight: 800; color: #0f172a; margin-top: 5px;
  font-variant-numeric: tabular-nums; letter-spacing: -.35px;
  white-space: nowrap; overflow: visible; text-overflow: clip;
}

.import-box {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  border-left: 3px solid #dc2626;
  box-shadow: var(--shadow-card);
  padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
  cursor: pointer;
}
.import-box.dragover { background: #f8fafc; border-color: var(--blue-to); }

/* Admin regional: BKU/BHP memaksimalkan area tabel; kartu identitas dan ringkasan
   hanya relevan untuk akun sekolah dan tidak ditampilkan di mode agregat admin. */
#view-wrap tr.rekap-selected-school td {
  background: #fff3a6 !important;
  box-shadow: inset 0 2px 0 #f59e0b, inset 0 -2px 0 #f59e0b;
  font-weight: 700;
}
body[data-theme="dark"] #view-wrap tr.rekap-selected-school td {
  background: #5b4510 !important;
  color: #fff7cc;
  box-shadow: inset 0 2px 0 #fbbf24, inset 0 -2px 0 #fbbf24;
}

#panel-editor.regional-editor-compact .school-info,
#panel-editor.regional-editor-compact .cards-row,
#panel-editor.regional-editor-compact .top-row { display: none; }
#panel-editor.regional-editor-compact .summary-col { width: 100%; }
#panel-editor.regional-editor-compact #editor-import-slot { flex: 0 1 520px; }
#panel-editor.regional-editor-compact .import-box { max-width: 100%; margin: 0; }
@media (max-width: 900px) {
  .editor-head-row { align-items: stretch; flex-direction: column; }
  #editor-import-slot { min-width: 0; flex-basis: auto; }
  /* UI-04. Mode ringkas (baris 569) memakai 2 id + 1 kelas sehingga MENGALAHKAN aturan
     `#editor-import-slot` di atas yang hanya 1 id. Karena itu `flex-basis: 520px` tetap
     menang — dan setelah `.editor-head-row` jadi kolom, flex-basis berlaku pada sumbu
     utama yang kini VERTIKAL, sehingga 520px berubah arti menjadi TINGGI.
     Angka cocok persis dengan temuan audit: 520 + 18 (gap) + 51 = 589 px.
     Aturan ini memakai selektor yang SAMA PERSIS dengan baris 569 supaya kekuatannya
     seimbang, lalu menang lewat urutan sumber. Tidak ada ukuran baru yang ditambahkan. */
  #panel-editor.regional-editor-compact #editor-import-slot { flex: 0 1 auto; min-width: 0; }
  .editor-title-row { align-items: flex-start; flex-wrap: wrap; }
  #editor-regional-school-select { min-width: min(300px, 100%); max-width: 100%; }
}
.pdf-icon {
  width: 46px; height: 46px; border-radius: 7px;
  background: #fff; border: 0;
  color: #dc2626;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.pdf-icon .ico { width: 42px; height: 42px; stroke-width: 1.35; filter: drop-shadow(0 2px 2px rgba(127,29,29,.18)); }
.pdf-icon::after { content: none; }
.import-info { flex: 1; min-width: 0; }
.import-file { font-size: 13px; font-weight: 700; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.import-hint { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* ---------- Tombol (gradient 3D) ---------- */
.btn-green {
  background: linear-gradient(180deg, var(--green-from), var(--green-to));
  color: #fff; border: none; border-radius: 8px;
  padding: 8px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  box-shadow: 0 4px 10px rgba(47,133,90,.4), inset 0 1px 0 rgba(255,255,255,.3), inset 0 -2px 0 rgba(15,42,76,.15);
}
.btn-green .ico { width: 15px; height: 15px; }
.btn-green:hover { filter: brightness(1.06); }
.btn-blue {
  background: linear-gradient(180deg, var(--blue-from), var(--blue-to));
  color: #fff; border: none; border-radius: 8px;
  padding: 8px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  box-shadow: 0 4px 10px rgba(43,108,176,.4), inset 0 1px 0 rgba(255,255,255,.3), inset 0 -2px 0 rgba(15,42,76,.15);
}
.btn-blue .ico { width: 15px; height: 15px; }
.btn-blue:hover { filter: brightness(1.06); }
.btn-outline {
  background: #fff; color: var(--blue-from); border: 2px solid var(--blue-pill-from); border-radius: 8px;
  padding: 7px 13px; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-outline .ico { width: 14px; height: 14px; }
.btn-outline:hover { background: var(--blue-hover); }
.btn-review-pdf, .btn-viled-file {
  color: #fff; border: 1px solid rgba(255,255,255,.5); border-radius: 8px;
  padding: 8px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer;
  white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
  box-shadow: 0 5px 0 rgba(0,0,0,.18), 0 7px 12px rgba(15,42,76,.2), inset 0 2px 0 rgba(255,255,255,.35);
  transform: translateY(0); transition: transform .15s, filter .15s;
}
.btn-review-pdf { background: linear-gradient(180deg, #35c77a, #11884f); }
.btn-viled-file { background: linear-gradient(180deg, #ff6872, #c62839); }
.btn-review-pdf:hover, .btn-viled-file:hover { transform: translateY(-1px); filter: brightness(1.06); }
.btn-review-pdf:active, .btn-viled-file:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.25); }
.btn-ghost {
  background: #fff; color: var(--blue-from); border: 1.5px solid var(--blue-pill-from); border-radius: 8px;
  padding: 7px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(49,130,206,.2);
}
.btn-ghost:hover { background: var(--blue-hover); }
.link-add {
  background: transparent; color: var(--blue-from); border: none;
  padding: 8px 10px; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
}
.link-add .ico { width: 15px; height: 15px; }
.link-add:hover { text-decoration: underline; }
.btn-green:active, .btn-blue:active, .btn-outline:active, .btn-ghost:active { transform: translateY(1px); box-shadow: 0 2px 6px rgba(15,42,76,.25); }
button:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- Tabel data (BKU/BHP) ---------- */
.table-card {
  background: #fff; border: 1px solid #dbe4f0; border-radius: 14px;
  box-shadow: var(--shadow-card);
  overflow: hidden; margin-bottom: 18px;
  position: relative;
}
.table-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.table-toolbar {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 13px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap;
  background: linear-gradient(180deg, #fff, #fbfdff);
}
.toolbar-left { display: flex; align-items: center; gap: 10px; }
#table-title { font-size: 15px; font-weight: 700; color: #0f172a; }
.row-count {
  font-size: 12px; font-weight: 700; color: #475569;
  background: #f1f5f9; border: 1px solid #e2e8f0;
  padding: 2px 11px; border-radius: 999px;
}
.toolbar-right { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.table-wrap {
  overflow: auto; max-height: 560px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.table-wrap::-webkit-scrollbar { width: 0; height: 0; display: none; }
.table-wrap.wide {
  max-height: calc(100vh - 240px);
  min-height: 300px;
  overflow: auto;
}
table { border-collapse: collapse; font-size: 12.5px; }
#data-table { width: 100%; min-width: 1480px; }
thead th {
  position: sticky; top: 0; z-index: 1;
  background: linear-gradient(180deg, #4778f9, #033dde); /* royal blue sesuai referensi */
  color: #fff;
  text-align: center; padding: 11px 8px; font-weight: 700; white-space: nowrap;
  text-transform: uppercase; font-size: 11.5px; letter-spacing: .3px;
  transition: background .16s ease, filter .16s ease;
}
thead th:hover { background: linear-gradient(180deg, #5d8cff, #1648e8); filter: brightness(1.08); }
/* BHP: header panjang dibungkus dua baris agar lebar kolom lebih hemat. */
body[data-module="bhp"] #data-table thead th.bhp-wrap-head {
  white-space: pre-line; line-height: 1.15; min-width: 92px; max-width: 118px;
  padding: 7px 6px;
}
/* BHP: KODE KEGIATAN dan NOMOR BUKTI dipadatkan agar seluruh tabel lebih lega. */
body[data-module="bhp"] #data-table th:nth-child(5),
body[data-module="bhp"] #data-table td[data-field="kodeKegiatan"],
body[data-module="bhp"] #data-table th:nth-child(7),
body[data-module="bhp"] #data-table td[data-field="nomorBukti"] {
  width: 84px; min-width: 84px; max-width: 84px;
  text-align: center;
}
body[data-module="bhp"] #data-table td[data-field="kodeKegiatan"],
body[data-module="bhp"] #data-table td[data-field="nomorBukti"] {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ARKAS, BKU, dan BHP read-only: kolom aksi memang tidak ditampilkan di aplikasi. */
body[data-module="bhp"] #data-table th.act,
body[data-module="bhp"] #data-table td.act,
body[data-module="bku"] #data-table th.act,
body[data-module="bku"] #data-table td.act,
body[data-module="arkas"] #data-table th.act,
body[data-module="arkas"] #data-table td.act { display: none; }
/* BHP mengikuti warna header tabel lain: royal blue. */
body[data-module="bhp"] thead th { background: linear-gradient(180deg, #4778f9, #033dde); }
body[data-module="bhp"] thead th:hover { background: linear-gradient(180deg, #5d8cff, #1648e8); }
tbody td { border-bottom: 1px solid var(--grid); padding: 6px 8px; vertical-align: middle; }
/* Grid tipis dipertahankan pada tabel editor ARKAS/BKU/BHP seperti viewer PAJAK. */
#data-table th,
#data-table td { border: 1px solid #e2e8f0; }
/* Hanya kolom URAIAN yang dilebarkan (permintaan 2026-09-11): ruang bekas kolom
   AKSI diserap ke sini, sedangkan kolom lain tetap selebar isinya. Batas 420px
   dilepas supaya uraian panjang tidak lagi terpotong. */
#data-table td[data-field="uraian"] { width: 100%; min-width: 420px; max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Keputusan 61 — KUNCI lebar kolom tab BKU pada ukuran yang SUDAH ADA.
   Sembilan kolom data diambil apa adanya dari pengukuran 2026-09-20
   (rendered width tiap kolom, pada 1366): 44,02 / 80,05 / 92,05 / 119,06 /
   126,08 / 119,06 / —URAIAN— / 96,05 / 106,06 / 96,14 px. Tidak ada yang
   diubah, hanya dikunci supaya tidak bergeser lagi, baik saat berpindah tab
   maupun saat layar diperkecil.
   Kolom URAIAN dipangkas: ia menyerap sisa ruang, jadi seluruh 10 kolom
   tampil sekaligus tanpa menggeser kiri-kanan. Untuk itu `min-width: 1480px`
   bawaan `#data-table` (baris 700) dihapuskan pada tab BKU saja.
   app.js tidak disentuh: gaya sebaris yang ditulis `renderTable()` tanpa
   `!important` kalah oleh aturan ber-`!important` di bawah. */
@media screen {
  body[data-module="bku"] #data-table {
    table-layout: fixed !important;
    /* Lebar tabel DIPATOK pada 1581 px (jumlah kesepuluh kolom di bawah),
       BUKAN `100%`. Ini inti masalahnya: kalau tabel memakai `100%`, lebarnya
       mengikuti lebar panel, dan di `table-layout: fixed` kelebihan ruang
       dibagi ke SEMUA kolom — sehingga lebar kolom ikut berubah begitu layar
       diperkecil. Dengan lebar tetap, lebar tabel dan kesepuluh kolomnya tidak
       bisa bergeser sama sekali: layar mengecil -> tabel digeser di dalam
       `.table-wrap`, kolom tetap. */
    width: 1581px !important;
    min-width: 1581px !important;
  }
  /* WAJIB menimpa `min-width` DAN `max-width`, bukan hanya `width`.
     `renderTable()` di app.js menulis ketiganya sekaligus sebagai gaya
     sebaris di tiap sel (`cell.style.width/minWidth/maxWidth = widths[i]`).
     Aturan `width` saja TIDAK cukup: `min-width`/`max-width` sebaris itu tetap
     menahan lebar kolom pada angka app.js, sehingga lebar yang dipatok di
     bawah tidak berpengaruh dan kelebihan ruang malah dibagi ke semua kolom
     (terukur 2026-09-20: seluruh kolom jadi 68,19 / 124,06 / … / 218,53 px).
     Dengan menetralkan min/max di sini, lebar tiap kolom mengikuti aturan
     `width` di bawah — persis angka yang sudah ada. */
  body[data-module="bku"] #data-table th,
  body[data-module="bku"] #data-table td { min-width: 0 !important; max-width: none !important; word-break: normal !important; }
  /* Sembilan kolom data dikunci pada lebar hasil pengukuran 2026-09-20.
     `table-layout: fixed` wajib: hanya di fixed kolom URAIAN (yang `width:
     auto`) menyerap PERSIS sisa ruang, sehingga kesembilan kolom ini tetap
     pada angkanya. Di `auto`, URAIAN justru melebar mengikuti isi sampai
     1028,75 px dan tabel jadi 1908 px (terukur 2026-09-20) — harus digeser. */
  body[data-module="bku"] #data-table th:nth-child(1),
  body[data-module="bku"] #data-table td:nth-child(1) { width: 44.02px !important; }
  body[data-module="bku"] #data-table th:nth-child(2),
  body[data-module="bku"] #data-table td:nth-child(2) { width: 80.05px !important; }
  body[data-module="bku"] #data-table th:nth-child(3),
  body[data-module="bku"] #data-table td:nth-child(3) { width: 92.05px !important; }
  body[data-module="bku"] #data-table th:nth-child(4),
  body[data-module="bku"] #data-table td:nth-child(4) { width: 119.06px !important; }
  body[data-module="bku"] #data-table th:nth-child(5),
  body[data-module="bku"] #data-table td:nth-child(5) { width: 126.08px !important; }
  body[data-module="bku"] #data-table th:nth-child(6),
  body[data-module="bku"] #data-table td:nth-child(6) { width: 119.06px !important; }
  body[data-module="bku"] #data-table th:nth-child(8),
  body[data-module="bku"] #data-table td:nth-child(8) { width: 96.05px !important; }
  body[data-module="bku"] #data-table th:nth-child(9),
  body[data-module="bku"] #data-table td:nth-child(9) { width: 106.06px !important; }
  body[data-module="bku"] #data-table th:nth-child(10),
  body[data-module="bku"] #data-table td:nth-child(10) { width: 96.14px !important; }
  /* URAIAN (kolom ke-7) — INI yang terakhir masih berubah ukurannya.
     Sebelumnya kolom ini dibuat `width: auto` supaya menyerap sisa ruang;
     akibatnya lebarnya MENGIKUTI lebar panel, jadi setiap kali layar
     diperkecil ukurannya ikut berubah. Sekarang dikunci pada lebar aslinya
     702,44 px, sama seperti sembilan kolom lainnya — jadi tidak ada satu pun
     kolom yang bisa berubah ukuran saat layar diperkecil.
     WAJIB memakai `th:nth-child(7)` juga, bukan hanya `td[data-field="uraian"]`:
     `renderTable()` menulis lebar px ke sel HEADER juga, dan header kolom ini
     tidak punya `data-field`, sehingga lebar dari app.js masih lolos dan
     membuat kesembilan kolom lain ikut berskala (terukur 2026-09-20: 44,02
     menjadi 45,72 px di 1366, dan berubah lagi sesudah pindah tab). */
  body[data-module="bku"] #data-table th:nth-child(7),
  body[data-module="bku"] #data-table td:nth-child(7) { width: 702.44px !important; }
}
#data-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* ARKAS: lebar kolom dikunci agar kode tidak meluber ke kolom sebelah. */
body[data-module="arkas"] #data-table {
  table-layout: fixed;
}
body[data-module="arkas"] #data-table th:nth-child(1),
body[data-module="arkas"] #data-table td:nth-child(1) { width: 3.2%; }
body[data-module="arkas"] #data-table th:nth-child(2),
body[data-module="arkas"] #data-table td:nth-child(2) { width: 8%; }
body[data-module="arkas"] #data-table th:nth-child(3),
body[data-module="arkas"] #data-table td:nth-child(3) { width: 8%; }
body[data-module="arkas"] #data-table th:nth-child(4),
body[data-module="arkas"] #data-table td:nth-child(4) { width: 32%; }
/* Ruang diambil dari VOLUME, SATUAN, dan TARIF HARGA untuk melegakan TRIWULAN 1-4. */
body[data-module="arkas"] #data-table th:nth-child(5),
body[data-module="arkas"] #data-table td:nth-child(5) { width: 5%; }
body[data-module="arkas"] #data-table th:nth-child(6),
body[data-module="arkas"] #data-table td:nth-child(6) { width: 4.5%; }
body[data-module="arkas"] #data-table th:nth-child(7),
body[data-module="arkas"] #data-table td:nth-child(7) { width: 6%; }
body[data-module="arkas"] #data-table th:nth-child(8),
body[data-module="arkas"] #data-table td:nth-child(8) { width: 8%; }
body[data-module="arkas"] #data-table th:nth-child(n+9),
body[data-module="arkas"] #data-table td:nth-child(n+9) { width: 6.325%; }
body[data-module="arkas"] #data-table td[data-field="kodeRekening"],
body[data-module="arkas"] #data-table td[data-field="kodeProgram"],
body[data-module="arkas"] #data-table td[data-field="uraian"] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-module="arkas"] .cards-row {
  grid-template-columns: .78fr 1.22fr;
}
body[data-module="arkas"] .cards-row .sum-value {
  padding-right: 4px;
}
body[data-module="arkas"] #data-table tr.arkas-row-total td {
  font-weight: 800;
  border-top: 1px solid #e2e8f0;
}
body[data-module="arkas"] #data-table tr.arkas-row-total .arkas-total-label {
  text-align: center;
  white-space: nowrap;
}
body[data-module="arkas"] #data-table tr.arkas-row-total .arkas-total-value {
  text-align: right;
  white-space: nowrap;
}

tbody tr:nth-child(even) { background: var(--row-alt); }
tbody tr:hover { background: var(--blue-hover); }
/* Semua kolom tabel utama ikut bergerak saat scroll horizontal.
   Tidak ada freeze/sticky pada kolom nomor agar scrolling tetap ringan. */
#data-table td:first-child {
  position: static;
  left: auto;
  z-index: auto;
  box-shadow: none;
}
/* Header pertama tetap mengikuti sticky header vertikal; tanpa left/right
   sehingga tetap ikut bergerak saat tabel discroll horizontal. */
#data-table thead th:first-child {
  left: auto;
  right: auto;
  box-shadow: none;
}
#data-table tbody tr:nth-child(even) td:first-child { background: transparent; }
#data-table tbody tr:hover td:first-child { background: transparent; }
#data-table tbody tr.arkas-row-group1,
#data-table tbody tr.arkas-row-group1 td { background: #F4CCCC; }
#data-table tbody tr.arkas-row-group2,
#data-table tbody tr.arkas-row-group2 td { background: #D9EAD3; }
#data-table tbody tr.arkas-row-group3,
#data-table tbody tr.arkas-row-group3 td { background: #FFF2CC; }
#data-table tbody tr.arkas-row-group1 td,
#data-table tbody tr.arkas-row-group2 td,
#data-table tbody tr.arkas-row-group3 td { font-weight: 700; }
#data-table tbody tr.arkas-row-group1:hover td { background: #F4CCCC; }
#data-table tbody tr.arkas-row-group2:hover td { background: #D9EAD3; }
#data-table tbody tr.arkas-row-group3:hover td { background: #FFF2CC; }
/* Warna kategori tetap terlihat pada kolom NO URUT, termasuk baris genap. */
#data-table tbody tr.arkas-row-group1 td:first-child,
#data-table tbody tr.arkas-row-group1:hover td:first-child { background: #F4CCCC; }
#data-table tbody tr.arkas-row-group2 td:first-child,
#data-table tbody tr.arkas-row-group2:hover td:first-child { background: #D9EAD3; }
#data-table tbody tr.arkas-row-group3 td:first-child,
#data-table tbody tr.arkas-row-group3:hover td:first-child { background: #FFF2CC; }
td[contenteditable="true"] { cursor: text; min-width: 46px; outline: none; }
td[contenteditable="true"]:hover { background: #fefce8; }
td[contenteditable="true"]:focus { background: #fef9c3; box-shadow: inset 0 0 0 1px #f59e0b; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.nowrap { white-space: nowrap; }
td[data-field="tanggal"] { min-width: 96px; }
td[data-field="kodeRekening"], td[data-field="kodeKegiatan"], td[data-field="nomorBukti"], td[data-field="idBarang"], td[data-field="kdjns"] { min-width: 118px; }
td.act { text-align: center; white-space: nowrap; }
.btn-del {
  background: transparent; color: var(--red); border: none;
  padding: 4px 6px; font-size: 12px; font-weight: 600; border-radius: 6px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.btn-del .ico { width: 13px; height: 13px; }
.btn-del:hover { background: #fef2f2; text-decoration: underline; }

.empty-note { padding: 34px; text-align: center; color: var(--muted); font-size: 13px; }

/* Footer tabel + pagination (sesuai referensi) */
.table-footer {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  background: #f8fafc;
  flex-wrap: wrap;
}
#page-info { font-size: 12px; color: var(--muted); font-weight: 600; }
.pager { display: flex; align-items: center; gap: 4px; }
.page-btn {
  min-width: 28px; height: 28px; padding: 0 6px;
  border: 1px solid var(--line); border-radius: 7px;
  background: #fff; color: #475569;
  font-size: 12px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 2px rgba(15,42,76,.05);
}
.page-btn .ico { width: 13px; height: 13px; }
.page-btn:hover:not(:disabled) { border-color: var(--blue-pill-from); color: var(--blue-from); }
.page-btn.active {
  background: linear-gradient(180deg, #4778f9, #033dde);
  color: #fff; border-color: transparent;
  box-shadow: 0 3px 8px rgba(3,61,222,.4);
}
.page-btn:disabled { opacity: .4; cursor: default; }
.page-ellipsis { color: #94a3b8; font-size: 12px; padding: 0 2px; }

/* Grafik rekap per sekolah (saat pencarian aktif) — SVG bar chart */
#view-chart { padding: 16px 18px; border-top: 1px solid var(--line); }
.rekap-chart { display: flex; flex-wrap: wrap; gap: 16px; }
.chart-card {
  flex: 1 1 480px;
  max-width: 880px;
  border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px 12px;
  background: #fff;
  box-shadow: var(--shadow-card);
}
.chart-title {
  font-weight: 800; font-size: 15px; margin-bottom: 14px;
  color: #0f172a; letter-spacing: .02em;
}
/* Kotak statistik (seperti referensi) */
.chart-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.stat-box {
  border: 1px solid var(--line);
  border-top: 4px solid #3b82f6;
  border-radius: 10px;
  padding: 10px 12px;
  background: #f8fafc;
}
.stat-value { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-label { font-size: 11px; font-weight: 700; color: #64748b; margin-top: 2px; text-transform: uppercase; letter-spacing: .04em; }

#view-chart.school-chart-shell { padding: 0; border-top: 0; border-radius: 0 0 16px 16px; }
#view-chart.school-dashboard-visible { display: block; }
.school-rekap-dashboard { width: 100%; max-width: none; box-sizing: border-box; margin: 0; padding: 14px 20px clamp(50px, 6vh, 58px); border: 1px solid #cbd5e1; border-radius: 16px; background: linear-gradient(145deg, #ffffff 0%, #f8fbff 58%, #e8eef7 100%); box-shadow: 0 14px 28px rgba(15,42,76,.16), 0 4px 8px rgba(15,42,76,.10), inset 0 1px 0 #fff, inset 0 -2px 0 rgba(15,42,76,.08); overflow: hidden; container-type: inline-size; }
.school-metric-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 14px); margin: 8px 0 14px; }
.school-metric-card { display: flex; align-items: center; gap: clamp(7px, 1vw, 12px); min-width: 0; min-height: 84px; padding: 12px clamp(8px, 1.1vw, 14px); border: 1px solid #cbd5e1; border-radius: 12px; background: linear-gradient(145deg, #ffffff 0%, #f8fafc 68%, #e7edf5 100%); box-shadow: 0 8px 14px rgba(15,42,76,.14), 0 2px 4px rgba(15,42,76,.10), inset 0 1px 0 #fff, inset 0 -2px 0 rgba(15,42,76,.08); }
.school-metric-icon { display: block; object-fit: contain; flex: 0 0 clamp(32px, 3.2vw, 46px); width: clamp(32px, 3.2vw, 46px); height: clamp(32px, 3.2vw, 46px); border-radius: 50%; }
.school-metric-body { min-width: 0; flex: 1 1 auto; }
.school-metric-label { display: block; color: #475569; font-size: 10px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.school-metric-value { display: block; margin-top: 4px; color: #0f274a; font-size: clamp(14px, 1.55vw, 22px); line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.school-metric-body small { display: block; margin-top: 5px; color: #94a3b8; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.school-chart-panel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.school-chart-panel { min-width: 0; min-height: clamp(330px, 40vh, 360px); padding: 14px 20px 10px; border: 1px solid #cbd5e1; border-radius: 14px; background: linear-gradient(145deg, #ffffff 0%, #f8fafc 65%, #e7edf5 100%); box-shadow: 0 10px 18px rgba(15,42,76,.14), 0 3px 6px rgba(15,42,76,.10), inset 0 1px 0 #fff, inset 0 -2px 0 rgba(15,42,76,.07); overflow: hidden; }
.school-chart-panel h3 { margin: 0; color: #0f172a; font-size: 15px; }
.school-chart-panel p { margin: 5px 0 14px; color: #94a3b8; font-size: 11px; }
.school-donut-layout { display: flex; align-items: center; gap: 18px; min-height: 220px; }
.school-donut { flex: 0 0 210px; width: 210px; height: 210px; border-radius: 50%; position: relative; isolation: isolate; box-shadow: inset 10px -9px 0 rgba(0,0,0,.18), inset -6px 7px 0 rgba(255,255,255,.28), 0 10px 18px rgba(15,42,76,.24); transform: translateY(-1px); }
.school-donut::before { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: 50%; pointer-events: none; background: linear-gradient(145deg, rgba(255,255,255,.42), transparent 34%, rgba(0,0,0,.16) 86%); mix-blend-mode: screen; }
.school-donut::after { content: ''; position: absolute; inset: 47px; z-index: 1; border-radius: 50%; background: #fff; box-shadow: inset 5px -5px 8px rgba(15,42,76,.20), inset -3px 3px 5px rgba(255,255,255,.70), 0 2px 4px rgba(15,42,76,.15); }
.school-donut-labels { z-index: 2; }
.school-donut-labels { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.school-donut-labels span { position: absolute; color: #fff; font-size: 12px; font-weight: 800; line-height: 1; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.4); transform: translate(-50%, -50%); white-space: nowrap; }
.school-donut-labels span.is-small { font-size: 10px; }
@media (max-width: 600px) { .school-donut-labels span { font-size: 10px; } .school-donut-labels span.is-small { font-size: 9px; } }
.school-donut-legend { display: grid; gap: 12px; min-width: 0; }
.school-donut-legend > div { display: flex; align-items: flex-start; gap: 8px; color: #475569; font-size: 11px; }
.school-donut-legend i, .school-chart-legend i { display: inline-block; flex: 0 0 11px; width: 11px; height: 11px; margin-top: 3px; border-radius: 50%; }
.school-donut-legend span { min-width: 0; }
.school-donut-legend b, .school-donut-legend small { display: block; margin-top: 2px; color: #334155; }
.school-donut-legend small { color: #64748b; }
.school-chart-total { margin-top: 12px; color: #475569; font-size: 11px; }
.school-compare-chart, .school-trend-chart { position: relative; display: grid; grid-template-columns: 42px 1fr; min-height: 220px; margin-top: 6px; padding: 6px 0 0; }
.school-chart-axis { z-index: 2; display: flex; flex-direction: column; justify-content: space-between; padding: 0 5px 28px 0; color: #64748b; font-size: 10px; text-align: right; }
.school-chart-grid-lines { position: absolute; inset: 8px 0 30px 42px; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.school-chart-grid-lines i { display: block; width: 100%; border-top: 1px solid #e2e8f0; }
.school-compare-bars { z-index: 1; display: flex; align-items: end; justify-content: space-around; gap: 18px; min-width: 0; padding: 0 12px 27px; border-bottom: 1px solid #94a3b8; }
.school-compare-bar { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: end; gap: 5px; min-width: 0; color: #475569; font-size: 10px; font-weight: 700; }
.school-compare-bar strong { color: #334155; font-size: 11px; white-space: nowrap; }
.school-compare-bar > div { width: min(78px, 70%); min-height: 8px; border-radius: 6px 6px 2px 2px; position: relative; isolation: isolate; box-shadow: inset 5px 0 0 rgba(255,255,255,.18), inset -7px 0 0 rgba(0,0,0,.14), 0 4px 7px rgba(15,42,76,.18); background-image: linear-gradient(90deg, rgba(255,255,255,.28), transparent 34%, rgba(0,0,0,.14)); }
.school-compare-bar > div::before { content: ''; position: absolute; top: -5px; left: 5px; right: 5px; height: 6px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.16)); }
.school-compare-bar > div::after { content: ''; position: absolute; top: 2px; right: 0; bottom: 0; width: 7px; border-radius: 0 3px 2px 0; background: rgba(0,0,0,.16); }
.school-compare-bar span { text-align: center; }
.school-chart-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 10px; color: #475569; font-size: 10px; }
.school-chart-legend span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.school-trend-chart svg { z-index: 1; width: 100%; height: auto; aspect-ratio: 320 / 250; min-height: 180px; max-height: 250px; overflow: visible; }
.school-trend-chart svg text { fill: #334155; font-size: 11px; font-weight: 700; }
.school-trend-chart svg circle { vector-effect: non-scaling-stroke; }
.school-trend-chart svg text { transform-box: fill-box; }
.school-trend-labels { position: absolute; right: 0; bottom: 8px; left: 42px; display: grid; grid-template-columns: 1fr 1fr 1fr; color: #64748b; font-size: 10px; text-align: center; }
.school-trend-labels span:empty { visibility: hidden; }
.school-chart-title { color: #0f172a; font-size: 16px; font-weight: 800; margin-bottom: 14px; }
.school-chart-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.school-chart-stat { border: 1px solid var(--line); border-top: 4px solid #3b82f6; border-radius: 10px; padding: 9px 10px; background: #f8fafc; }
.school-chart-stat strong { display: block; font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.school-chart-stat span { display: block; margin-top: 3px; color: #64748b; font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.school-chart-bars { display: flex; align-items: end; justify-content: space-around; gap: 18px; min-height: 190px; padding: 20px 12px 0; border-bottom: 1px solid #94a3b8; }
.school-chart-bar-group { display: flex; flex: 1 1 0; min-width: 0; flex-direction: column; align-items: center; justify-content: end; gap: 5px; color: #475569; font-size: 10px; font-weight: 800; }
.school-chart-bar-group strong { font-size: 11px; color: #0f172a; font-variant-numeric: tabular-nums; }
.school-chart-bar { width: min(70px, 70%); min-height: 8px; position: relative; border-radius: 6px 6px 2px 2px; background-image: linear-gradient(90deg, rgba(255,255,255,.30), transparent 34%, rgba(0,0,0,.14)); box-shadow: inset 5px 0 0 rgba(255,255,255,.18), inset -7px 0 0 rgba(0,0,0,.14), 0 4px 7px rgba(15,42,76,.18); }
.school-chart-bar::before { content: ''; position: absolute; top: -5px; left: 5px; right: 5px; height: 6px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.16)); }
.school-chart-bar::after { content: ''; position: absolute; top: 2px; right: 0; bottom: 0; width: 7px; border-radius: 0 3px 2px 0; background: rgba(0,0,0,.16); }
.school-chart-bar-group span { text-align: center; }
.school-chart-title { color: #0f172a; font-size: 15px; font-weight: 800; margin-bottom: 14px; }
.school-chart-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.school-chart-stat { border: 1px solid var(--line); border-top: 4px solid #3b82f6; border-radius: 10px; padding: 9px 10px; background: #f8fafc; }
.school-chart-stat strong { display: block; font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.school-chart-stat span { display: block; margin-top: 3px; color: #64748b; font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.school-chart-bars { display: flex; align-items: end; justify-content: space-around; gap: 18px; min-height: 190px; padding: 20px 12px 0; border-bottom: 1px solid #94a3b8; }
.school-chart-bar-group { display: flex; flex: 1 1 0; min-width: 0; flex-direction: column; align-items: center; justify-content: end; gap: 5px; color: #475569; font-size: 10px; font-weight: 800; }
.school-chart-bar-group strong { font-size: 11px; color: #0f172a; font-variant-numeric: tabular-nums; }
.school-chart-bar { width: min(70px, 70%); min-height: 8px; position: relative; border-radius: 6px 6px 2px 2px; background-image: linear-gradient(90deg, rgba(255,255,255,.30), transparent 34%, rgba(0,0,0,.14)); box-shadow: inset 5px 0 0 rgba(255,255,255,.18), inset -7px 0 0 rgba(0,0,0,.14), 0 4px 7px rgba(15,42,76,.18); }
.school-chart-bar::before { content: ''; position: absolute; top: -5px; left: 5px; right: 5px; height: 6px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.16)); }
.school-chart-bar::after { content: ''; position: absolute; top: 2px; right: 0; bottom: 0; width: 7px; border-radius: 0 3px 2px 0; background: rgba(0,0,0,.16); }
.school-chart-bar-group span { text-align: center; }

/* Viewer tables: hanya area tabel yang bergerak, scrollbar disembunyikan. */
#view-wrap.table-wrap {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#view-wrap.table-wrap::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Viewer sheet template — tampilan menyerupai template (tanpa huruf kolom & nomor baris) */
#view-wrap table { border-collapse: separate; border-spacing: 0; min-width: 100%; border-top: 1px solid #e2e8f0; border-left: 1px solid #e2e8f0; }
#view-wrap td {
  border-right: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0;
  padding: 5px 9px; font-size: 12px;
  white-space: nowrap; vertical-align: middle;
  overflow: hidden; text-overflow: ellipsis;
  background: #fff;
}
#view-wrap td:nth-child(-n+6) { white-space: nowrap; overflow: visible; text-overflow: clip; }
#view-wrap td:nth-child(2) { min-width: 150px !important; }
#view-wrap td:nth-child(3) { min-width: 92px !important; }
#view-wrap td:nth-child(4) { min-width: 110px !important; }
#view-wrap td:nth-child(5) { min-width: 150px !important; }
#view-wrap td:nth-child(6) { min-width: 92px !important; }
#view-wrap td.num { text-align: right; font-variant-numeric: tabular-nums; }
#view-wrap.pajak-view td:nth-child(7) {
  width: 420px; max-width: 420px; min-width: 280px !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  overflow-wrap: normal;
}
#view-wrap.pajak-view .pajak-text-left {
  text-align: left !important;
}
#view-wrap.pajak-view.pajak-compact-ntpn td:nth-child(7) {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}
#view-wrap.pajak-view .pajak-compact-header {
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  white-space: normal !important;
  overflow: hidden;
  word-break: break-word;
  line-height: 1.05;
}
#view-wrap.pajak-view.pajak-compact-ntpn td:nth-child(15),
#view-wrap.pajak-view.pajak-compact-ntpn tr.frz-row td:nth-child(15) {
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
}
#view-wrap.pajak-view .pajak-ntpn {
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  text-align: left !important;
}
#view-wrap.pajak-view .pajak-tax-equal {
  width: 112px !important;
  min-width: 112px !important;
  max-width: 112px !important;
  text-align: right !important;
  white-space: nowrap;
}
#view-wrap.pajak-view tr.frz-row .pajak-ntpn,
#view-wrap.pajak-view tr.frz-row .pajak-tax-equal {
  text-align: center !important;
}
#view-wrap.pajak-view td.sheet-editable {
  background: #fffbeb; outline: none; cursor: text;
}
#view-wrap.pajak-view td.sheet-editable:focus {
  background: #fef3c7; box-shadow: inset 0 0 0 2px #f59e0b;
}
#view-wrap tbody tr:nth-child(even) td:not(.vh) { background: var(--row-alt); }
#view-wrap td:hover { background: #f0f9ff; }
/* Header tabel viewer — biru royal semua (seperti header tabel BKU) */
#view-wrap td.vh {
  background: linear-gradient(180deg, #4778f9, #033dde);
  color: #fff;
  font-weight: 700;
  text-align: center;
  border-color: #0244c4;
}
#view-wrap td.vh:hover { background: #003dbb; }
#view-wrap tr.hdr-last td { border-bottom: 2px solid #94a3b8; }
/* Judul tabel — putih polos, rata tengah */
#view-wrap tr.hdr-title td {
  background: #fff !important;
  color: #111827 !important;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
}
/* Freeze vertikal: baris header di bawah judul menempel saat scroll */
#view-wrap td.frz-top { z-index: 2; }
#view-wrap td.f { color: inherit; }
#view-wrap td.f:hover { background: #fef9c3; }

/* REKAP TRIWULAN: lebar kolom & gaya judul mengikuti template Excel (warna header tetap biru).
   Menonaktifkan min-width generik (NPSN 150px / Status 110px) agar kolom selebar template. */
#view-wrap.rekap-tpl td:nth-child(2),
#view-wrap.rekap-tpl td:nth-child(3),
#view-wrap.rekap-tpl td:nth-child(4),
#view-wrap.rekap-tpl td:nth-child(5),
#view-wrap.rekap-tpl td:nth-child(6) { min-width: auto !important; }
#view-wrap.rekap-tpl td:nth-child(-n+6) { overflow: hidden; text-overflow: ellipsis; }
/* Header: teks boleh membungkus seperti di Excel (mis. "Belanja Modal Peralatan & Mesin") */
#view-wrap.rekap-tpl td.vh { font-weight: 500; font-size: 12px; white-space: normal; overflow: visible; text-overflow: clip; }
#view-wrap.rekap-tpl tr.hdr-title td { font-weight: 500; font-size: 13px; }

/* RO: header mengikuti gaya tabel BKU (uppercase, bold, nowrap, padding tinggi)
   dan tabel muat penuh tanpa scroll kiri-kanan. Hanya tampilan, download tidak berubah. */
#view-wrap.ro-tpl td:nth-child(2),
#view-wrap.ro-tpl td:nth-child(3),
#view-wrap.ro-tpl td:nth-child(4),
#view-wrap.ro-tpl td:nth-child(5),
#view-wrap.ro-tpl td:nth-child(6) { min-width: auto !important; }
#view-wrap.ro-tpl td:nth-child(-n+6) { overflow: hidden; text-overflow: ellipsis; }
#view-wrap.ro-tpl td.vh {
  text-transform: uppercase; letter-spacing: .3px;
  font-size: 11.5px; white-space: nowrap; padding: 11px 8px;
}

/* REKAP BELANJA: header membungkus seperti template (header 3 tingkat),
   lebar kolom mengikuti isi dan tabel muat penuh tanpa scroll. */
#view-wrap.belanja-tpl td:nth-child(2),
#view-wrap.belanja-tpl td:nth-child(3),
#view-wrap.belanja-tpl td:nth-child(4),
#view-wrap.belanja-tpl td:nth-child(5),
#view-wrap.belanja-tpl td:nth-child(6) { min-width: auto !important; }
#view-wrap.belanja-tpl td:nth-child(-n+6) { overflow: hidden; text-overflow: ellipsis; }
#view-wrap.belanja-tpl td.vh { font-weight: 500; font-size: 12px; white-space: normal; overflow: visible; text-overflow: clip; }
#view-wrap .rekap-editable { background: #fffdf0; cursor: text; outline: none; }
#view-wrap .rekap-editable:focus { background: #fff7cc; box-shadow: inset 0 0 0 2px #d69e2e; }
#view-wrap .rekap-row-invalid td { background: #fee2e2 !important; color: #991b1b; }
#view-wrap .rekap-row-valid td { background: #dcfce7 !important; color: #166534; }
#view-wrap .rekap-invalid { background: #fecaca !important; color: #991b1b !important; font-weight: 800; }
#view-wrap .rekap-valid { background: #bbf7d0 !important; color: #166534 !important; font-weight: 800; }
/* Keputusan 61 — kunci lebar kolom LAM. TAMPILAN TIDAK DIUBAH SAMA SEKALI.
   Ukuran kolom LAM sudah final: 190 px / sisa / 92 px di dalam kertas 794 px.
   Yang salah cuma satu: `.doc-sheet` punya `max-width: 100%`, jadi saat layar
   diperkecil kertasnya ikut menyusut -> tabel `width: 100%` ikut menyusut ->
   lebar kolom ikut berubah. Kuncinya di kertasnya, bukan di tabelnya:
   kertas LAM tidak boleh menyusut di bawah 794 px, lalu digeser di dalam
   wadah (`.table-wrap` sudah `overflow: auto`). Tidak ada ukuran yang diubah. */
@media screen {
  /* Padding kertas juga dikunci. Tanpa ini, dua media query layar sempit
     (`padding: 26px 22px` dan `padding: 20px 14px`) mengecilkan isi kertas,
     sehingga tabel `width: 100%` ikut berubah dan kolom tengah bergeser
     (terukur 401 px @1366 -> 481 px @375 pada verifikasi 2026-09-20).
     Dikunci ke nilai aslinya, jadi ukuran tabel sama di semua lebar layar.
     Sengaja hanya `screen` supaya tidak menyentuh jalur cetak. */
  #view-wrap.lam-compact-view .doc-lam {
    min-width: 794px; max-width: none;
    padding: 46px 54px; font-size: inherit;
  }
}
#view-wrap.lam-compact-view .doc-table { table-layout: fixed; width: 100%; }
#view-wrap.lam-compact-view .doc-table th:first-child,
#view-wrap.lam-compact-view .doc-table td:first-child { width: 114px; min-width: 114px; max-width: 114px; white-space: nowrap !important; word-break: keep-all !important; overflow: visible; text-overflow: clip; font-size: 11px; }
#view-wrap.lam-compact-view .doc-table th:nth-child(2),
#view-wrap.lam-compact-view .doc-table td:nth-child(2) { width: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view-wrap.lam-compact-view .doc-table th:nth-child(3),
#view-wrap.lam-compact-view .doc-table td:nth-child(3) { width: 92px; min-width: 92px; max-width: 92px; white-space: nowrap; text-align: right; }
#view-wrap.rekap-tpl .school-rekap-num { text-align: right; }
#view-wrap.rekap-tpl .school-rekap-bank-safe { min-width: 95px !important; width: 95px !important; max-width: 95px !important; overflow: visible !important; text-overflow: clip !important; white-space: nowrap !important; }
#view-wrap.rekap-tpl .school-rekap-keterangan { text-align: center; }

.filter-label { font-size: 12.5px; color: #475569; font-weight: 600; }
.filter-select {
  padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 8px;
  font-size: 12.5px; min-width: 180px; background: #fff; outline: none;
  box-shadow: 0 2px 5px rgba(15,42,76,.08), inset 0 1px 0 rgba(255,255,255,.9);
}
.filter-select:focus { border-color: var(--blue-to); box-shadow: 0 0 0 3px rgba(49,130,206,.15); }

/* ---------- Render dokumen (BA REKON / LAM BA REKON / SPTJM) ---------- */
.doc-sheet {
  box-sizing: border-box;
  width: 794px;            /* 210mm — lebar kertas F4 */
  min-height: 1247px;      /* 330mm — tinggi kertas F4 */
  max-width: 100%;
  margin: 0 auto;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  border: 1px solid #dbe4f0; border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15,42,76,.16), inset 0 1px 0 #fff, inset 0 -2px 0 rgba(15,42,76,.04);
  padding: 46px 54px;
  /* font disamakan dengan aplikasi (bukan serif/Times) */
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: #111827;
  line-height: 1.55;
}
.doc-title {
  text-align: center; font-size: 17px; font-weight: 700;
  margin-bottom: 2px; letter-spacing: .3px;
}
.doc-subtitle { text-align: center; font-size: 13.5px; font-weight: 600; margin-bottom: 18px; }
.doc-nomor { text-align: center; margin-bottom: 16px; font-size: 13px; }
.doc-editable-para[contenteditable="true"], .doc-editable-number[contenteditable="true"] { outline: none; cursor: text; }
.doc-editable-para[contenteditable="true"]:focus, .doc-editable-number[contenteditable="true"]:focus { outline: none; background: transparent; }
.doc-para { text-align: justify; margin: 10px 0; font-size: 13px; }
.doc-info { display: flex; gap: 8px; margin: 3px 0; font-size: 13px; }
.di-label { min-width: 190px; font-weight: 600; }
.di-colon { font-weight: 600; }
.di-val { flex: 1; }
.doc-line {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 2px 0; font-size: 13px;
}
.doc-line-sub { padding-left: 30px; }
.doc-line-bold { font-weight: 700; }
/* Kotak highlight biru muda untuk total/sisa (sesuai referensi) */
.doc-hl {
  background: #ebf4ff;
  border: 1px solid #bee3f8;
  border-radius: 6px;
  padding: 4px 8px;
  margin: 3px 0;
  color: #2b6cb0;
}
.doc-line-amt { white-space: nowrap; font-variant-numeric: tabular-nums; }
.doc-sign { display: flex; justify-content: space-between; margin-top: 30px; }
.doc-sign-col {
  width: 44%; display: flex; flex-direction: column;
  align-items: flex-start; gap: 2px; text-align: left; font-size: 13px;
}
.doc-sign-label { font-weight: 700; margin-bottom: 4px; }
.doc-sign-space { height: 56px; }
.doc-sign-line {
  width: 210px; height: 16px; border-bottom: 1px solid #111827;
  margin: 0 0 2px;
}
.doc-sign-col .doc-sign-name,
.doc-sign-col .doc-sign-nip { text-align: left; }
.doc-sign-role { font-weight: 700; }
.doc-sign-underlined { text-decoration: underline; text-underline-offset: 2px; }
.doc-sign-place { margin-bottom: 2px; }
.doc-sign-right {
  width: 42%; margin-top: 24px; margin-left: auto;
  display: flex; flex-direction: column;
  align-items: flex-start; gap: 3px;
  padding-left: 0; font-size: 13px; text-align: left;
}
.doc-sign-right .doc-sign-space { height: 62px; }
.doc-sign-right .doc-sign-name { min-width: 210px; }
.doc-sign-right .doc-sign-nip { white-space: nowrap; }
.doc-lam .doc-table {
  width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 12px;
}
#view-wrap .doc-table th, #view-wrap .doc-table td {
  border: 1px solid #64748b; padding: 4px 8px; font-size: 12px;
  background: #fff; white-space: normal; word-break: break-word; vertical-align: top;
}
#view-wrap .doc-table th {
  background: linear-gradient(180deg, #003dbb, #0244c4);
  color: #fff; font-weight: 700; text-align: center;
}
#view-wrap .doc-table td:hover { background: #fff; }
.ta-r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ta-kd { white-space: nowrap; }

/* Pengaturan */
.settings-meta { display: flex; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.settings-meta .sum-card { max-width: 280px; }
.tabs { display: flex; gap: 6px; border-bottom: 2px solid #d7e4f2; margin-bottom: 10px; }
.tab {
  background: transparent; color: #475569; border-radius: 8px 8px 0 0;
  padding: 9px 18px; font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -2px;
  font-size: 12.5px;
}
.tab.active { color: var(--blue-from); border-bottom-color: var(--blue-from); background: var(--blue-hover); }
.spanel { display: none; }
.spanel.active { display: block; }
table.editable { width: 100%; min-width: 1500px; }
table.editable thead th {
  white-space: nowrap;
  background: linear-gradient(180deg, #003dbb, #0244c4);
  color: #fff;
  text-align: center;
}
table.editable td { border-bottom: 1px solid var(--grid); padding: 6px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
table.editable td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.editable tbody tr:nth-child(even) { background: var(--row-alt); }
table.editable td[contenteditable] { cursor: text; min-width: 90px; outline: none; }
table.editable td[contenteditable]:focus { background: #fef9c3; }
.search-input {
  padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 8px;
  font-size: 12.5px; width: 280px; outline: none;
}
.search-input:focus { border-color: var(--blue-to); box-shadow: 0 0 0 3px rgba(49,130,206,.15); }

/* Unduh */
.download-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.dl-card { display: flex; flex-direction: column; gap: 8px; }
.dl-ico {
  width: 52px; height: 52px; border-radius: 12px;
  background: linear-gradient(135deg, var(--blue-from), var(--blue-to));
  color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(43,108,176,.4), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(15,42,76,.2);
  position: relative; overflow: hidden;
}
.dl-ico .ico { width: 26px; height: 26px; }
.dl-ico::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.35), rgba(255,255,255,0) 45%);
}
.dl-desc { font-size: 12px; color: var(--muted); flex: 1; }
.dl-card .btn-green, .dl-card .btn-blue { align-self: flex-start; }

/* Toast */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #0f172a; color: #fff; padding: 10px 18px; border-radius: 10px;
  font-size: 13px; z-index: 50; box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.hidden { display: none !important; }
.history-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-start; justify-content: flex-end; padding: 82px 28px 28px; background: rgba(15, 42, 76, .24); }
.history-modal.hidden { display: none !important; }
.history-modal-card { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 110px); overflow: hidden; background: #fff; border: 1px solid #dbe4f0; border-radius: 16px; box-shadow: 0 18px 45px rgba(15,42,76,.25); }
#period-calendar-modal .period-calendar-card { width: 100% !important; max-width: 100% !important; }
.history-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px 14px; border-bottom: 1px solid var(--line); }
.history-modal-head h3 { color: #173b78; font-size: 17px; margin: 0; }
.history-modal-head p { color: #718096; font-size: 12px; margin-top: 4px; }
.history-close { border: 0; background: transparent; color: #64748b; font-size: 26px; line-height: 1; cursor: pointer; }
.history-modal-body { padding: 12px; overflow: auto; max-height: calc(100vh - 190px); }
.history-empty { padding: 30px 18px; text-align: center; color: #718096; font-size: 13px; }
.history-item { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; padding: 13px 14px; border: 1px solid #e2e8f0; border-radius: 11px; margin-bottom: 9px; background: #fbfdff; }
.history-item-main { min-width: 0; cursor: pointer; }
.history-item-title { color: #1e3a8a; font-weight: 800; font-size: 13px; }
.history-item-subtitle { margin-top: 2px; color: #4d6684; font-size: 12px; font-weight: 600; }
.history-item-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; color: #64748b; font-size: 11px; margin-top: 4px; }
.history-status { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 8px; font-weight: 800; font-size: 10px; }
.history-status.synced { color: #166534; background: #dcfce7; }
.history-status.forwarded, .history-status.verified { color: #92400e; background: #fef3c7; }
.history-status.locked { color: #991b1b; background: #fee2e2; }
.history-delete { align-self: center; border: 1px solid #fecaca; border-radius: 8px; color: #b91c1c; background: #fff; padding: 6px 9px; cursor: pointer; font-size: 11px; }
.history-delete:hover { background: #fef2f2; }
@media (max-width: 600px) { .history-modal { padding: 74px 10px 10px; justify-content: center; } .history-modal-card { width: 100%; } }

/* ---------- Login & Verification ---------- */
.login-screen {
  min-height: 100vh;
  width: 100%;
  background: #f8fbff url('/assets/images/school-background.png') no-repeat center center;
  background-size: cover !important;
  background-attachment: scroll !important;
  font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  position: relative;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

/* Latar belakang untuk mode verifikasi tetap konsisten */
.login-screen.register-mode {
  background: #f8fbff url('/assets/images/school-background.png') no-repeat center center !important;
  background-size: cover !important;
}

/* Decoration Elements - Fixed Placement */
.decor-dots {
  position: absolute; width: 140px; height: 140px;
  background-image: radial-gradient(#cbd5e1 2px, transparent 2px);
  background-size: 20px 20px;
  z-index: 1; pointer-events: none;
  opacity: 0.6;
}
.dot-tl { top: 20px; right: 20px; } /* TR */
.dot-br { bottom: 80px; left: 40px; } /* BL */

.decor-wave {
  position: absolute; top: 0; right: 0; width: 50%; height: 100%;
  background: radial-gradient(circle at 100% 50%, rgba(59, 130, 246, 0.04) 0%, transparent 70%);
  z-index: 0; pointer-events: none;
}

.login-landing {
  flex: 1; width: 100%; display: grid; grid-template-columns: 1.6fr 0.9fr;
  background: transparent;
  position: relative; z-index: 2;
}

.login-hero {
  position: relative; padding: 50px 7% 50px 6%;
  display: flex; flex-direction: column; justify-content: space-between;
}

.login-hero-brand { display: flex; align-items: flex-start; gap: 20px; }
.login-hero-logo { display: block; width: 84px; height: 84px; overflow: visible !important; filter: drop-shadow(0 5px 0 rgba(30,73,145,.22)) drop-shadow(0 8px 10px rgba(0,0,0,.14)); }
.login-hero-kicker {
  color: #173a7b; font-size: 24px; font-weight: 900; letter-spacing: 0.05em; margin-bottom: 4px; /* 16px -> 24px atas permintaan pemilik 2026-09-25 (terukur: blok +9px, kartu di bawah tidak bergeser) */
  text-shadow: 0 1px 0 #fff, 0 2px 0 rgba(93,137,205,.28), 0 4px 6px rgba(29,64,125,.2);
}
.login-hero-title {
  color: #1e3a8a; font-size: 52px; line-height: 1; font-weight: 900; letter-spacing: -0.02em; -webkit-text-stroke: 1px currentColor; /* bobot 900 tak terwujud: font stack hanya punya muka Regular+Bold */
  text-shadow: 0 1px 0 #fff, 0 2px 0 #e6effd, 0 3px 0 #cfe0f8, 0 4px 0 #b9d1f2, 0 6px 0 #9dbde8, 0 8px 0 #7fa2d8, 0 11px 0 rgba(46,91,161,.42), 0 15px 0 rgba(36,76,140,.22), 0 22px 22px rgba(24,61,126,.32); /* 3D lebih dalam — permintaan pemilik 2026-09-25 (jangkauan bayangan 3px -> 28px di bawah huruf) */
}
.login-hero-brand p {
  color: #405878; font-size: 16px; line-height: 1.6; margin-top: 20px; max-width: 480px; font-weight: 600;
  text-shadow: 0 1px 0 rgba(255,255,255,.95), 0 2px 3px rgba(42,78,132,.18);
}

.login-benefits { display: flex; gap: 20px; margin-top: 40px; margin-bottom: 20px; }
.benefit-card {
  flex: 1; display: flex; align-items: center; gap: 15px;
  padding: 15px 18px; border-radius: 15px;
  background: linear-gradient(145deg, #ffffff 0%, #f4f8ff 100%);
  border: 1px solid rgba(255,255,255,.95);
  box-shadow: 0 12px 18px rgba(30, 74, 145, .18), 0 3px 0 rgba(111, 151, 211, .28), inset 0 2px 0 rgba(255,255,255,.95), inset 0 -2px 0 rgba(30,74,145,.08);
  position: relative; overflow: hidden;
}
.benefit-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.65), rgba(255,255,255,0) 42%);
}
.benefit-ico-wrap {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; background: linear-gradient(145deg, #3186f2, #0d58cf); color: #fff;
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 5px 9px rgba(20, 85, 190, .32), inset 0 2px 2px rgba(255,255,255,.45), inset 0 -3px 0 rgba(4,54,143,.2);
  position: relative; z-index: 1;
}
.benefit-ico-wrap .ico { width: 22px; height: 22px; stroke-width: 2.5; }
.benefit-card b, .benefit-card span { position: relative; z-index: 1; }
.benefit-card b { display: block; color: #183775; font-size: 15px; font-weight: 800; }
.benefit-card span { display: block; color: #5d6b83; font-size: 11px; margin-top: 2px; font-weight: 500; }

.login-card-container {
  display: flex; align-items: flex-end; justify-content: center; padding: 40px 40px 70px;
}

.login-card {
  width: 100%; max-width: 460px; height: 640px; min-height: 640px; align-self: flex-end; padding: 38px 40px 32px;
  border-radius: 25px;
  background: linear-gradient(145deg, rgba(255,255,255,.98) 0%, rgba(241,247,255,.96) 100%);
  border: 1px solid rgba(255,255,255,.95);
  box-shadow: 0 22px 28px rgba(25, 67, 132, .24), 0 5px 0 rgba(114, 154, 214, .32), inset 0 2px 0 rgba(255,255,255,.98), inset 0 -3px 0 rgba(46, 91, 156, .10), 0 0 0 7px rgba(255,255,255,.22);
  position: relative; overflow: hidden;
}
.login-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,0) 32%, rgba(224,237,255,.18) 100%);
}
.login-card > * { position: relative; z-index: 1; }

.login-card-header { text-align: center; margin-bottom: 28px; }
.login-card-logo { width: 68px; height: 64px; margin-bottom: 14px; object-fit: contain; filter: drop-shadow(0 5px 5px rgba(25,72,150,.18)); }
.login-card-title { color: #16326f; font-size: 28px; font-weight: 900; letter-spacing: -0.02em; margin: 0; }
.login-card-subtitle { color: #63718a; font-size: 12px; margin-top: 7px; font-weight: 500; }

.form-group { display: flex; flex-direction: column; gap: 7px; margin-bottom: 17px; }
.form-group label { color: #263653; font-size: 12px; font-weight: 800; }

.input-with-icon { position: relative; display: flex; align-items: center; }
.input-with-icon .input-ico {
  position: absolute; left: 14px; width: 18px; height: 18px; color: #2f78d8; stroke: #2f78d8; fill: none; stroke-width: 2.2; z-index: 1;
}
.input-with-icon .input-ico use { color: #2f78d8; }
.input-with-icon input {
  width: 100%; padding: 12px 42px 12px 43px; border: 1px solid #d3ddeb; border-radius: 10px;
  font-size: 12px; transition: all 0.2s; background: linear-gradient(180deg, #f7fbff, #eef4fb); font-weight: 600; color: #263b66;
  box-shadow: inset 0 2px 4px rgba(40, 76, 130, .08), 0 2px 0 rgba(255,255,255,.9);
}
.input-with-icon input:focus {
  border-color: #3981e9; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12), inset 0 2px 4px rgba(40, 76, 130, .06); outline: none; background: #fff;
}

.pass-toggle {
  position: absolute; right: 10px; border: none; background: none; color: #2f78d8; cursor: pointer; padding: 6px;
  display: flex; align-items: center; justify-content: center;
}
.pass-toggle .ico-sm { color: #2f78d8; fill: none; stroke: #2f78d8; stroke-width: 2.2; }
.pass-toggle:hover { color: #145fc5; }

.login-card .btn-ico { fill: none; stroke: currentColor; stroke-width: 2.5; }
.login-card .btn-google .btn-ico { fill: none; stroke: none; }
.login-card .btn-google .btn-ico use { fill: none; stroke: none; }

.login-form .checkbox-label input[type="checkbox"] { accent-color: #2f78d8; }

.form-options { display: flex; justify-content: space-between; align-items: center; margin-bottom: 21px; }
.checkbox-label { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #53627c; cursor: pointer; font-weight: 600; }
.forgot-link { font-size: 12px; color: #2d6fc6; text-decoration: none; font-weight: 800; }
.forgot-link:hover { text-decoration: underline; }

.login-submit {
  width: 100%; padding: 13px; border-radius: 10px; border: 1px solid rgba(255,255,255,.4);
  background: linear-gradient(180deg, #3988f4 0%, #125bd3 100%); color: #fff; font-size: 14px; font-weight: 800; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 7px 12px rgba(21, 86, 196, .32), inset 0 2px 0 rgba(255,255,255,.38), inset 0 -3px 0 rgba(4,57,145,.25);
  transition: all 0.2s;
}
.login-submit:hover { background: linear-gradient(180deg, #4a95fb 0%, #0f50c5 100%); transform: translateY(-1px); }
.login-submit:active { transform: translateY(1px); box-shadow: 0 3px 6px rgba(21, 86, 196, .28), inset 0 2px 0 rgba(4,57,145,.2); }

.login-divider {
  display: flex; align-items: center; text-align: center; color: #697792; font-size: 11px; margin: 20px 0;
}
.login-divider::before, .login-divider::after { content: ''; flex: 1; border-bottom: 1px solid #dfe7f2; }
.login-divider span { padding: 0 11px; font-weight: 700; }

.btn-google {
  width: 100%; padding: 11px; border-radius: 10px; border: 1px solid #d4deeb;
  background: linear-gradient(180deg, #ffffff 0%, #f1f5fa 100%); color: #41516c; font-size: 12px; font-weight: 800; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 4px 7px rgba(38, 71, 122, .14), inset 0 1px 0 #fff, inset 0 -2px 0 rgba(50, 88, 143, .08);
  transition: all 0.2s;
}
.btn-google:hover { background: linear-gradient(180deg, #fff 0%, #eaf2fc 100%); border-color: #b8cbe4; transform: translateY(-1px); }

.login-card-footer { text-align: center; margin-top: 24px; font-size: 11px; color: #65738a; font-weight: 600; }
.link-btn { background: none; border: none; color: #2869c5; font-weight: 800; cursor: pointer; padding: 0; font-size: inherit; }

.global-footer {
  width: 100%; padding: 20px 0; text-align: center;
  color: #94a3b8; font-size: 13px; font-weight: 600;
  background: transparent;
}

/* Icon & Action Sizing Fixes */
.ico-sm { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.btn-ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.5; }


.global-footer {
  position: absolute; bottom: 24px; left: 0; right: 0; text-align: center;
  color: #94a3b8; font-size: 13px; font-weight: 600; pointer-events: none;
  z-index: 10;
}

/* Verification Screen Styling */
.login-screen.register-mode {
  background: transparent;
}
.login-landing, .verification-container, .global-footer {
  position: relative; z-index: 1;
}
.login-screen.register-mode .global-footer {
  position: static; margin-top: auto; padding: 20px 0;
}
.login-screen.register-mode .login-landing { grid-template-columns: 1fr; }
.login-screen.register-mode .login-hero, 
.login-screen.register-mode .login-card-container { display: none; }

.verification-container {
  width: 100%; max-width: 1400px; margin: 0 auto; padding: 34px 38px 20px;
  display: flex; flex-direction: column; min-height: 100vh; position: relative;
  color: #15264d;
}

.verif-header { margin-bottom: 22px; }
.verif-title-block h1 { color: #142653; font-size: 24px; line-height: 1.2; font-weight: 800; margin: 0; letter-spacing: -0.02em; }
.verif-title-block p { color: #526078; font-size: 12px; margin-top: 7px; font-weight: 500; }
.verif-steps { display: flex; align-items: flex-start; max-width: 610px; margin-top: 28px; }
.verif-steps .step { position: relative; flex: 1; text-align: center; color: #667085; font-size: 11px; }
.verif-steps .step:not(:last-child)::after { content: ''; position: absolute; top: 17px; left: calc(50% + 20px); width: calc(100% - 40px); border-top: 2px dotted #b8c0cc; }
.verif-steps .step-num { position: relative; z-index: 1; width: 38px; height: 38px; margin: 0 auto 8px; border: 1px solid #e1e6ee; border-radius: 50%; background: rgba(255,255,255,.74); display: grid; place-items: center; color: #465064; font-size: 14px; }
.verif-steps .step.active { color: #1f4fba; font-weight: 700; }
.verif-steps .step.active .step-num { background: #1769df; border-color: #1769df; color: #fff; box-shadow: 0 4px 10px rgba(23,105,223,.2); }

/* Reference card: quiet white surfaces, compact fields, and a single blue action. */
.verification-container input {
  width: 100%; padding: 9px 11px; border: 1px solid #e4e8ee; border-radius: 6px;
  background: #f5f6f8; color: #273654; font-size: 12px; font-weight: 500;
  transition: all 0.2s; outline: none; box-sizing: border-box;
}
.verification-container input:focus {
  border-color: #4a8bea; background: #fff; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.08);
}
.verification-container input[readonly] { background: #f5f6f8; color: #64748b; cursor: default; }
.verification-container .form-group { gap: 6px; margin-bottom: 14px; }
.verification-container .form-group label { color: #17264b; font-size: 11px; font-weight: 700; }

.flex-1 { flex: 1; }
.input-action-row { display: block; margin-top: 15px; }
.input-action-group { display: flex; align-items: flex-end; gap: 8px; width: min(570px, 100%); }
.input-action-group > input { min-width: 0; flex: 1 1 auto; }
.npsn-status-slot {
  position: absolute; top: 36px; right: 8px; z-index: 2;
  width: 58px; height: 58px; display: inline-flex;
  align-items: center; justify-content: center;
}
.npsn-status-slot img { width: 54px; height: 54px; object-fit: contain; display: block; }
.npsn-status-slot.registered, .npsn-status-slot.matched { color: inherit; }
.verif-identity-heading-copy { min-width: 0; flex: 1 1 auto; }
.verif-identity-title-row { display: flex; align-items: center; min-width: 0; }
.verif-identity-title-row .verif-section-title { min-width: 0; white-space: nowrap; }
/* Ruang kanan khusus untuk ikon status di pojok card Identitas. */
.verif-col-left > .verif-card:first-child .verif-card-heading { padding-right: 68px; }
#npsn-status-text { font-weight: 800; margin-left: 4px; }
#npsn-status-text.registered { color: #b91c1c; }
#npsn-status-text.matched { color: #166534; }
#npsn-status-text.not-registered { color: #b91c1c; }
.npsn-status-slot.not-registered img { width: 54px; height: 54px; }
.required-mark { color: #dc2626; font-weight: 900; }
.btn-blue-action, .btn-danger-action, .btn-save-action {
  height: 32px; padding: 0 16px; border-radius: 7px; color: #fff; font-size: 11px; font-weight: 800; cursor: pointer;
  white-space: nowrap; transition: all 0.2s; display: inline-flex; align-items: center; justify-content: center;
}
.btn-blue-action {
  border: 1px solid rgba(255,255,255,.42); background: linear-gradient(180deg, #3988f4, #125bd3);
  box-shadow: 0 6px 10px rgba(21,86,196,.28), inset 0 2px 0 rgba(255,255,255,.35), inset 0 -3px 0 rgba(4,57,145,.22);
}
.btn-blue-action:hover { background: linear-gradient(180deg, #4a95fb, #0f50c5); transform: translateY(-1px); }
.btn-danger-action {
  border: 1px solid rgba(255,255,255,.46); background: linear-gradient(180deg, #f45d68, #c62839);
  box-shadow: 0 6px 10px rgba(171,30,47,.28), inset 0 2px 0 rgba(255,255,255,.38), inset 0 -3px 0 rgba(125,17,31,.24);
}
.btn-danger-action:hover { background: linear-gradient(180deg, #ff707a, #b91c2d); transform: translateY(-1px); }
.btn-save-action {
  border: 1px solid rgba(255,255,255,.5); background: linear-gradient(180deg, #39b978, #16834d);
  box-shadow: 0 6px 10px rgba(16,112,70,.28), inset 0 2px 0 rgba(255,255,255,.38), inset 0 -3px 0 rgba(8,91,49,.25);
}
.btn-save-action:hover { background: linear-gradient(180deg, #4dca89, #107343); transform: translateY(-1px); }

.verif-data-list { display: grid; gap: 9px; margin-top: 16px; }
.verif-data-list .si-item {
  background: #f5f6f8; padding: 8px 11px; border-radius: 5px;
  border: 1px solid #edf0f4; display: flex; flex-direction: column; gap: 3px;
}
.verif-data-list .si-label { font-size: 10px; color: #1f2c48; font-weight: 700; text-transform: none; letter-spacing: normal; }
.verif-data-list b { font-size: 11px; color: #536078; font-weight: 500; }

.school-preview {
  margin: 12px 0; padding: 10px 13px; border-radius: 6px;
  background: #eef8f3; border: 1px solid #b7e3cb; color: #17613b;
  display: flex; flex-direction: column; gap: 3px;
}
.school-preview b { font-size: 13px; }
.school-preview span { font-size: 11px; opacity: 0.8; }

.login-message { margin-top: 8px; padding: 9px 12px; border-radius: 6px; background: #f1f5f9; color: #475569; font-size: 11px; font-weight: 600; border: 1px solid #e2e8f0; }
.login-message.error { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }

.verif-top-box {
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(241,247,255,.96)); padding: 17px 20px 16px; border-radius: 13px;
  border: 1px solid rgba(255,255,255,.98); box-shadow: 0 14px 22px rgba(29,52,89,.16), 0 4px 0 rgba(119,157,214,.28), inset 0 2px 0 rgba(255,255,255,.98), inset 0 -3px 0 rgba(50,88,143,.08);
  margin-bottom: 18px; max-width: 510px; position: relative; overflow: hidden;
}
.verif-top-box::before, .verif-col::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,.7), rgba(255,255,255,0) 42%); }
.verif-card-heading { display: flex; align-items: flex-start; gap: 11px; position: relative; z-index: 1; }
.verif-card-icon { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #3988f4, #125bd3); border: 1px solid rgba(255,255,255,.65); box-shadow: 0 6px 10px rgba(21,86,196,.3), inset 0 2px 2px rgba(255,255,255,.42), inset 0 -3px 0 rgba(4,57,145,.25); }
.verif-card-icon .ico { width: 20px; height: 20px; stroke-width: 2.2; }
.verif-section-title { color: #16264c; font-size: 15px; line-height: 1.2; font-weight: 800; margin: 2px 0 5px; }
.verif-section-sub { color: #647087; font-size: 11px; line-height: 1.45; margin: 0 0 14px; }
.verif-card-heading > div:last-child { min-width: 0; }
.info-alert-inline { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 9px 10px; border: 1px solid #d4e1f4; border-radius: 8px; background: linear-gradient(180deg, #f3f8ff, #e9f2ff); color: #496287; font-size: 10px; line-height: 1.35; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 4px rgba(56,91,145,.08); }
.info-alert-inline .ico-sm { width: 14px; height: 14px; flex: 0 0 auto; }
.verif-status-img { width: 22px; height: 22px; flex: 0 0 22px; object-fit: contain; display: block; }
.icb-title .verif-status-img { width: 20px; height: 20px; flex-basis: 20px; }

.verif-content-grid { display: grid; grid-template-columns: 1.12fr 1fr 1fr; gap: 18px; align-items: stretch; }
.verif-col { min-width: 0; padding: 16px 16px 16px; background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(242,247,255,.95)); border: 1px solid rgba(255,255,255,.98); border-radius: 13px; box-shadow: 0 14px 22px rgba(29,52,89,.14), 0 4px 0 rgba(119,157,214,.25), inset 0 2px 0 rgba(255,255,255,.98), inset 0 -3px 0 rgba(50,88,143,.08); position: relative; overflow: hidden; }
.verif-col > * { position: relative; z-index: 1; }
.verif-col .verif-card-heading .verif-section-title { font-size: 14px; }
.verif-col .verif-section-sub { margin-bottom: 12px; }
.verif-col .form-group:last-of-type { margin-bottom: 0; }

/* Verifikasi satu halaman: ringkas agar muat penuh tanpa scroll */
.verif-header { margin-bottom: 14px; }
.verif-top-box { margin-bottom: 12px; }
.verif-top-box .verif-section-sub { margin-bottom: 10px; }

.verif-creds-box { margin-top: 24px; padding-top: 18px; border-top: 1px dashed #dfe5ed; }
.verif-data-title { font-size: 14px; font-weight: 800; color: #1e3a8a; margin-bottom: 15px; }
.info-card-blue { margin-top: 18px; padding: 12px 11px; border-radius: 8px; background: linear-gradient(180deg, #f3f8ff, #e9f2ff); border: 1px solid #d6e2f4; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 3px 6px rgba(56,91,145,.08); }
.icb-title { display: flex; align-items: center; gap: 7px; color: #3d5f96; font-weight: 800; font-size: 11px; margin-bottom: 7px; }
.info-card-blue p { color: #607397; font-size: 10px; line-height: 1.45; margin: 0; font-weight: 500; }
.verif-note-card { background: linear-gradient(180deg, #f3f8ff, #e9f2ff); border-color: #d6e2f4; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.verif-note-content { min-width: 0; }
.verif-note-card .icb-title { margin-bottom: 7px; }
.verif-note-card p { color: #607397; font-size: 12px; line-height: 1.5; margin: 0; font-weight: 600; }
.verif-note-card .btn-save-action { flex: 0 0 auto; min-width: 132px; }
.login-card #login-message.hidden { display: none; }
.verif-data-fields { display: grid; gap: 8px; }
.verif-data-fields .form-group { margin-bottom: 0; }

.verif-footer { margin-top: auto; display: flex; justify-content: flex-end; align-items: center; padding: 18px 0 0; }
.verif-footer #btn-prev { margin-right: auto; }
.btn-next { padding: 11px 21px; border-radius: 8px; background: linear-gradient(180deg, #3988f4, #125bd3); color: #fff; font-weight: 700; font-size: 12px; border: 1px solid rgba(255,255,255,.42); cursor: pointer; display: flex; align-items: center; gap: 8px; box-shadow: 0 7px 12px rgba(21,86,196,.3), inset 0 2px 0 rgba(255,255,255,.35), inset 0 -3px 0 rgba(4,57,145,.22); transition: all 0.2s; }
.btn-next:hover { background: linear-gradient(180deg, #4a95fb, #0f50c5); transform: translateY(-1px); }


/* responsive adjustments */
@media (max-width: 1200px) {
  .verification-container { padding: 40px 40px; }
  .verif-content-grid { grid-template-columns: 1fr 1fr; }
  .verif-col:last-child { grid-column: span 2; }
}
@media (max-width: 900px) {
  .login-landing { grid-template-columns: 1fr; }
  .login-card-container { background: transparent; }
  .verif-steps { display: none; }
  .verif-content-grid { grid-template-columns: 1fr; }
  .verif-col:last-child { grid-column: auto; }
}

/* Keluar dipindahkan ke dropdown akun; selector lama dipertahankan untuk kompatibilitas komponen lain. */
.logout-btn { display: none; }

/* Tema dashboard */
body[data-theme="dark"] { background: #0f172a; color: #e2e8f0; }
body[data-theme="dark"] .topbar, body[data-theme="dark"] .content, body[data-theme="dark"] .table-card, body[data-theme="dark"] .school-info, body[data-theme="dark"] .summary-card { background: #172033; color: #e2e8f0; }
body[data-theme="dark"] .account-menu { background: #172033; border-color: #334155; }
body[data-theme="dark"] .account-menu-profile { border-color: #334155; }
body[data-theme="dark"] .account-menu-user b, body[data-theme="dark"] .account-menu-item { color: #e2e8f0; }
body[data-theme="dark"] .account-menu-user span, body[data-theme="dark"] .menu-item-ico, body[data-theme="dark"] .account-menu-arrow { color: #94a3b8; }
body[data-theme="dark"] .account-menu-item:hover, body[data-theme="dark"] .account-menu-item[aria-expanded="true"], body[data-theme="dark"] .theme-menu-item:hover, body[data-theme="dark"] .theme-menu-item.active { background: #263449; }
body[data-theme="dark"] .account-logout { border-color: #334155; color: #fca5a5; }


/* ============================================================
   RESPONSIF — tablet & ponsel
   ============================================================ */

/* Laptop kecil / tablet lanskap */
@media (max-width: 1200px) {
  .editor-head-row { flex-wrap: wrap; }
}

/* ============================================================================
   B.1 nomor 1 (A-01/A-02) — boot/loading admin, dan catatan pemilik 2026-09-18:
   "kartu identitas, saldo, penerimaan, dan upload pdf untuk akun sekolah muncul di
   akun admin saat memuat data".

   Sebabnya: keempat elemen itu ada di `public/index.html` sejak awal (markup statis),
   jadi mereka dilukis pada paint PERTAMA — sementara penyembunyiannya baru datang
   belakangan: kelas `regional-editor-compact` dipasang di app.js:2301 dan penjaga
   boot disuntik di app.js:1111, keduanya SETELAH peran terbaca.

   Perbaikan: selagi peran belum diketahui, <body> memakai kelas `role-pending`
   (dipasang di markup), dan CSS ini menahan elemen yang bergantung peran. app.js
   melepas kelas itu menjadi `role-admin` / `role-school` begitu peran terbaca,
   sehingga tampilan akhir untuk kedua peran TIDAK berubah sama sekali.

   Catatan penting: kartu SALDO & PENERIMAAN (`#card-1`/`#card-2`) sengaja TIDAK
   diatur di sini — perilakunya sudah ditetapkan keputusan pemilik 2026-09-13
   (lihat SCOPE-GABUNGAN-BOSP Bagian K.11) dan tidak disentuh oleh perbaikan ini.
   ============================================================================ */
.role-pending #panel-editor .top-row,
.role-pending #panel-editor #import-box { display: none !important; }

/* Card unggah PDF milik AKUN SEKOLAH: ukurannya dikunci supaya tidak "turun ke baris
   bawah lalu memanjang" selagi data dimuat. Slotnya memakai `display: contents`
   (public/style.css:435), jadi kotak ini adalah anak langsung kolom ringkasan —
   tinggi 72px = ukuran alaminya yang sudah terukur (390x72 pada 1920 px). */
#panel-editor #school-import-slot .import-box { height: 72px; min-height: 72px; flex: 0 0 auto; }

/* ============================================================================
   A-06 (scope B.1 nomor 3) — tombol setelan sidebar di lebar sangat sempit.
   Terukur pada 375 px: tombol RESET EMAIL & PENGATURAN berada di left 339 → right 383,
   sedangkan rel sidebar berakhir di 375 → keluar 8 px DAN keluar viewport, lalu terpotong
   oleh `overflow: hidden` (sidebar juga tidak bisa digulir: scrollWidth 481 vs clientWidth 375).
   Perbaikan: di lebar sempit rel boleh membungkus, dan blok setelan memakai satu baris penuh
   sehingga tombolnya tidak pernah keluar rel. Lebar 600/760/900/1024 px tidak berubah.
   ============================================================================ */
@media (max-width: 430px) {
  .sidebar { flex-wrap: wrap; }
  .sidebar-settings {
    width: 100%;
    margin-top: 0;
    padding-top: 6px;
    border-top: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
}

@container (max-width: 1100px) {
  .school-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .school-chart-panel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .school-chart-panel:nth-child(3) { grid-column: 1 / -1; }
}

@container (max-width: 850px) {
  .school-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .school-chart-panel-grid { grid-template-columns: 1fr; }
  .school-chart-panel:nth-child(3) { grid-column: auto; }
}

@media (min-width: 601px) and (max-width: 1400px) {
  .school-donut-layout { flex-direction: row; align-items: center; gap: 12px; }
  .school-donut { flex-basis: clamp(130px, 15vw, 170px); width: clamp(130px, 15vw, 170px); height: clamp(130px, 15vw, 170px); }
  .school-donut::after { inset: clamp(28px, 3vw, 38px); }
  .school-donut-legend { width: auto; flex: 1 1 auto; gap: 7px; }
  .school-donut-legend > div { font-size: 10px; }
  .school-donut-legend b, .school-donut-legend small { display: block; margin-left: 0; }
}

/* Tablet — sidebar menyusut jadi rel ikon */
@media (max-width: 900px) {
  .sidebar { width: 64px; padding: 14px 8px; }
  .sidebar-settings { padding-top: 8px; }
  .side-logo-text, .sidebar-label, .sec-text { display: none; }
  .side-logo { justify-content: center; }
  .nav-item { justify-content: center; padding: 9px 4px; }
  .nav-item span:not(.nav-ico) { display: none; }
  /* teks label item menu adalah text-node, sembunyikan lewat ukuran font */
  #nav .nav-item { font-size: 0; gap: 0; }
  #nav .nav-item .nav-ico { font-size: initial; }
  .sidebar-sec { justify-content: center; padding: 10px 6px; }
  .search-pill { display: none; }
  .content { padding: 16px 16px 36px; }
  .summary-col { width: 100%; }
  .cards-row { flex-direction: row; }
  .cards-row .sum-card { flex: 1; }
  .school-info { min-width: 240px; }
  .table-wrap.wide { max-height: calc(100vh - 200px); }
  .doc-sheet { padding: 26px 22px; }
}

/* Ponsel — sidebar jadi bilah menu horizontal di atas */
@media (max-width: 600px) {
  body.school-rekap-layout #panel-view.active .table-card { margin-bottom: 4px; }
  body.school-rekap-layout #panel-view.active #view-wrap { height: auto; min-height: 0; max-height: 170px; }
  body.school-rekap-layout #panel-view.active #view-chart { max-height: none; overflow: visible; }
  .school-rekap-dashboard { padding: 12px 10px 44px; }
  .school-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .school-metric-card { padding: 9px 7px; gap: 7px; }
  .school-metric-icon { flex-basis: 32px; width: 32px; height: 32px; }
  .school-metric-value { font-size: 13px; }
  .school-chart-panel-grid { grid-template-columns: 1fr; }
  .school-chart-panel:nth-child(3) { grid-column: auto; }
  .school-donut-layout { flex-direction: column; align-items: center; }
  .school-donut { flex-basis: 160px; width: 160px; height: 160px; }
  .school-donut-legend { width: 100%; }
  .school-donut-legend > div { font-size: 10px; }
  .school-trend-chart svg { min-height: 180px; max-height: 210px; aspect-ratio: auto; height: 180px; }
  .school-compare-chart { gap: 24px; }
  .school-compare-bar > div { width: 58px; }
  .school-chart-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .school-chart-bars { gap: 8px; padding-left: 4px; padding-right: 4px; }
  .school-chart-bar { width: min(46px, 68%); }
  .school-chart-stat strong { font-size: 13px; }
}

@media (min-width: 601px) {
  /* Pengaturan akun harus mengikuti tinggi konten agar daftar sesi tidak terpotong. */
  body[data-module="admin-account"],
  body[data-module="admin-account"] .main-col,
  body[data-module="admin-account"] .content {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }
  body[data-module="admin-account"] .content {
    padding-bottom: 44px !important;
  }
  /* Dashboard akun sekolah mengikuti urutan reference: tabel ringkas di atas, grafik di bawah. */
  body.school-rekap-layout #panel-view.active .table-card { flex: 0 0 auto; margin-bottom: 6px; }
  body.school-rekap-layout #panel-view.active #view-wrap { flex: 0 0 auto; height: auto; min-height: 0; max-height: 190px; overflow: auto; }
  body.school-rekap-layout #panel-view.active #view-chart { flex: 0 0 auto; height: auto; max-height: none; overflow: visible; }
  body.school-rekap-layout #panel-view.active .school-rekap-dashboard { min-width: 0; width: 100%; }
  body.school-rekap-layout .main-col { height: 100vh; overflow: hidden; }
  body.school-rekap-layout .content { height: 100vh; overflow-y: auto; overflow-x: hidden; padding-bottom: 24px; }
  body.school-rekap-layout #panel-view.active { height: auto; min-height: 100%; }

  /* Semua tab tabel memakai shell fixed seperti BKU. */
  body:not([data-module="pengaturan"]):not(.school-rekap-layout) { height: 100vh; overflow: hidden; }
  body:not([data-module="pengaturan"]):not(.school-rekap-layout) .main-col { height: 100vh; overflow: hidden; }
  body:not([data-module="pengaturan"]):not(.school-rekap-layout) .content { overflow: hidden; padding-bottom: 0; }
  body:not([data-module="pengaturan"]) #panel-view.active { height: 100%; display: flex; flex-direction: column; min-height: 0; }
  body:not([data-module="pengaturan"]) #panel-view.active .page-head { flex: 0 0 auto; }
  body:not([data-module="pengaturan"]):not(.school-rekap-layout) #panel-view.active .table-card { flex: 1 1 auto; min-height: 0; margin-bottom: 0; display: flex; flex-direction: column; }
  body:not([data-module="pengaturan"]) #panel-view.active .table-toolbar { flex: 0 0 auto; }
  body:not([data-module="pengaturan"]):not(.school-rekap-layout) #panel-view.active #view-wrap { flex: 1 1 auto; min-height: 260px; max-height: none; }
  body:not([data-module="pengaturan"]) #panel-view.active #view-chart { flex: 0 0 auto; }

  body[data-module="bku"], body[data-module="arkas"], body[data-module="bhp"] { height: 100vh; overflow: hidden; }
  body[data-module="bku"] .main-col, body[data-module="arkas"] .main-col, body[data-module="bhp"] .main-col { height: 100vh; overflow: hidden; }
  body[data-module="bku"] .content, body[data-module="arkas"] .content, body[data-module="bhp"] .content { overflow: hidden; padding-bottom: 0; }
  /* Semua tab editor desktop memakai alur panel dan footer pager yang sama. */
  body[data-module="bku"] #panel-editor,
  body[data-module="arkas"] #panel-editor,
  body[data-module="bhp"] #panel-editor { height: 100%; display: flex; flex-direction: column; min-height: 0; }
  body[data-module="bku"] #panel-editor .top-row,
  body[data-module="arkas"] #panel-editor .top-row,
  body[data-module="bhp"] #panel-editor .top-row { flex: 0 0 auto; }
  body[data-module="bku"] #panel-editor .table-card,
  body[data-module="arkas"] #panel-editor .table-card,
  body[data-module="bhp"] #panel-editor .table-card { flex: 1 1 auto; min-height: 0; margin-bottom: 0; display: flex; flex-direction: column; }
  body[data-module="bku"] #panel-editor .table-wrap,
  body[data-module="arkas"] #panel-editor .table-wrap,
  body[data-module="bhp"] #panel-editor .table-wrap { flex: 1 1 auto; min-height: 260px; max-height: none; }
  body[data-module="bku"] #panel-editor .table-footer,
  body[data-module="arkas"] #panel-editor .table-footer,
  body[data-module="bhp"] #panel-editor .table-footer { flex: 0 0 auto; }
}

@media (max-width: 900px) {
  .login-landing { grid-template-columns: 1fr; }
  .login-hero { min-height: 220px; padding: 26px 24px 18px; }
  .login-benefits { display: none; }
  .login-card-container { padding: 26px 18px 32px; align-items: flex-start; }
  .login-card { margin: 0 auto; width: min(440px, calc(100% - 36px)); height: auto; min-height: 0; }
}

/* Login remains scrollable on short tablet/screen-share viewports; the app shell keeps its fixed dashboard behavior. */
@media (max-width: 900px) {
  body:has(#login-screen:not(.hidden)) {
    height: auto;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

/* Split-screen mode: preserve the reference login-card size and collapse only the benefit cards. */
@media (min-width: 601px) and (max-width: 1200px) {
  .login-landing {
    grid-template-columns: minmax(190px, 1fr) 500px;
    align-items: stretch;
    min-width: 690px;
  }
  .login-hero {
    min-width: 0;
    padding: 34px 14px 70px 24px;
  }
  .login-hero-brand { gap: 10px; }
  .login-hero-logo { width: 58px; height: 58px; }
  .login-hero-kicker { font-size: 15px; } /* proporsional dengan judul 32px di blok ini (rasio 0,46 = sama dengan layar lebar 24/52); dulu 11px = rasio 0,34 sehingga terlihat kekecilan */
  .login-hero-title { font-size: 32px; }
  .login-hero-brand p { font-size: 11px; line-height: 1.45; margin-top: 12px; }
  .login-benefits {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 12px;
    margin: auto 0 0;
  }
  .login-benefits .benefit-card {
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    padding: 0;
    justify-content: center;
    gap: 0;
    border-radius: 14px;
  }
  .login-benefits .benefit-card > div:last-child { display: none; }
  .login-benefits .benefit-ico-wrap { width: 38px; height: 38px; }
  .login-benefits .benefit-ico-wrap .ico { width: 20px; height: 20px; }
  .login-card-container {
    min-width: 500px;
    padding: 40px 20px 70px;
    align-items: flex-end;
    justify-content: center;
  }
  .login-card {
    width: 460px;
    max-width: 460px;
    height: 640px;
    min-height: 640px;
    padding: 38px 40px 32px;
    align-self: flex-end;
  }
}

/* Truly narrow phones: stack naturally and keep the card content-driven. */
@media (max-width: 600px) {
  .login-benefits { display: none; }
  .login-card-container { min-width: 0; }
  .login-card { width: min(440px, calc(100% - 36px)); height: auto; min-height: 0; }
}

@media (max-width: 600px) {
  .app-shell { flex-direction: column; min-height: 100vh; }
  body[data-module="bku"], body[data-module="arkas"], body[data-module="bhp"] { height: auto; overflow-x: hidden; }
  body[data-module="bku"] .main-col,
  body[data-module="bku"] .content,
  body[data-module="arkas"] .main-col,
  body[data-module="arkas"] .content,
  body[data-module="bhp"] .main-col,
  body[data-module="bhp"] .content { height: auto; overflow: visible; }
  .sidebar {
    width: 100%;
    height: auto;
    min-height: 56px;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    overflow: hidden;
    position: relative;
    top: auto;
    z-index: 30;
  }
  .sidebar .side-logo, .sidebar .sidebar-sec { display: none; }
  .sidebar #nav {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
    overflow: visible;
    padding-right: 0;
  }
  .sidebar .nav-item { flex: 0 0 44px; width: 44px; height: 40px; margin: 0; }

  .topbar { height: auto; min-height: 68px; padding: 8px 12px; gap: 8px; flex-wrap: nowrap; align-items: center; }
  .doc-block { min-width: 0; flex: 1 1 auto; }
  .doc-ico-img { width: 34px; height: 34px; }
  .doc-text { min-width: 0; overflow: hidden; }
  .doc-text b, .doc-text span { overflow: hidden; text-overflow: ellipsis; }
  .doc-text b { font-size: 12px; }
  .doc-text span { font-size: 10px; }
  .top-actions { flex: 0 0 auto; gap: 3px; margin-left: 0; }
  .top-actions .icon-btn { width: 32px; height: 32px; border-radius: 9px; }
  .top-actions .icon-img,
  .top-actions .icon-img-3d,
  .doc-ico-img { width: 28px; height: 28px; }
  .top-actions .avatar { width: 34px; height: 34px; font-size: 12px; }
  .top-actions .chev { width: 12px; height: 12px; }

  .content { padding: 14px 12px 32px; }
  .page-head h2 { font-size: 18px; }
  .top-row { gap: 12px; margin-bottom: 14px; }
  .school-info { min-width: 0; width: 100%; }
  .cards-row { flex-direction: column; }

  /* toolbar tabel menumpuk agar tombol tidak meluber */
  .table-toolbar, .table-footer { flex-direction: column; align-items: stretch; gap: 8px; }
  .toolbar-right { justify-content: flex-start; }
  .toolbar-right .btn-outline,
  .toolbar-right .btn-green,
  .toolbar-right .btn-blue { flex: 1 1 auto; justify-content: center; min-height: 40px; }
  .search-input { width: 100%; }

  .table-wrap, .table-wrap.wide { max-height: 62vh; }
  .doc-sheet { padding: 20px 14px; font-size: 12.5px; }
  .doc-info { flex-wrap: wrap; }
  .di-label { min-width: 130px; }
  .doc-sign { flex-direction: column; gap: 26px; }
  .doc-sign-col { width: 100%; }
  .toast { left: 12px; right: 12px; transform: none; text-align: center; }
}

/* Cegah scroll horizontal pada layar sempit */
@media (max-width: 600px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .main-col { min-width: 0; }
}

/* ============================================================
   CETAK — hanya dokumen (BA REKON / LAM BA REKON / SPTJM) & tabel
   ============================================================ */
/* ============================================================
   STEP 7 — Dark navy 3D skin
   CSS-only: tidak mengubah layout, DOM, data, atau perilaku.
   ============================================================ */
@media screen {
  body[data-theme="dark"] {
    --surface-1: #14213a;
    --surface-2: #101b30;
    --surface-3: #172640;
    --ink-strong: #eef4ff;
    --dark-shadow: 0 12px 28px rgba(0,0,0,.30), inset 0 1px 0 rgba(143,177,230,.10), inset 0 -2px 0 rgba(0,0,0,.20);
  }
  body[data-theme="dark"] .school-rekap-dashboard,
  body[data-theme="dark"] .school-metric-card,
  body[data-theme="dark"] .school-chart-panel {
    background: linear-gradient(145deg, var(--surface-1), var(--surface-2));
    border-color: #2a3d5e;
    box-shadow: var(--dark-shadow);
    color: var(--ink-strong);
  }
  body[data-theme="dark"] .school-metric-label,
  body[data-theme="dark"] .school-chart-panel p,
  body[data-theme="dark"] .school-chart-total,
  body[data-theme="dark"] .school-donut-legend > div,
  body[data-theme="dark"] .school-chart-legend,
  body[data-theme="dark"] .school-chart-axis,
  body[data-theme="dark"] .school-trend-labels { color: #91a2bd; }
  body[data-theme="dark"] .school-metric-value,
  body[data-theme="dark"] .school-chart-panel h3,
  body[data-theme="dark"] .school-donut-legend b { color: #eef4ff; }
  body[data-theme="dark"] .school-donut::after { background: #101b30; }
  body[data-theme="dark"] .school-chart-grid-lines i { border-color: #253653; }
  body[data-theme="dark"] .school-compare-bars { border-color: #4a638a; }
  body[data-theme="dark"] .school-metric-card img { filter: saturate(1.05) brightness(.96); }
  body[data-theme="dark"] .table-card,
  body[data-theme="dark"] .chart-card,
  body[data-theme="dark"] .doc-sheet,
  body[data-theme="dark"] .import-box,
  body[data-theme="dark"] .school-info,
  body[data-theme="dark"] .summary-card,
  body[data-theme="dark"] .stat-box {
    background: linear-gradient(145deg, var(--surface-1), var(--surface-2));
    border-color: #2a3d5e;
    box-shadow: var(--dark-shadow);
  }
  body[data-theme="dark"] .table-toolbar,
  body[data-theme="dark"] .table-footer { background: linear-gradient(180deg, #172640, #122039); border-color: #253653; }
  body[data-theme="dark"] .btn-blue,
  body[data-theme="dark"] .btn-green,
  body[data-theme="dark"] .btn-review-pdf { box-shadow: 0 5px 12px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.24); }
  body[data-theme="dark"] .btn-outline,
  body[data-theme="dark"] .btn-ghost { background: #14213a; border-color: #4f83e8; color: #9fc0ff; box-shadow: 0 4px 10px rgba(0,0,0,.22), inset 0 1px 0 rgba(143,177,230,.10); }
  body[data-theme="dark"] .btn-outline:hover,
  body[data-theme="dark"] .btn-ghost:hover { background: #1b3151; }
  body[data-theme="dark"] .row-count { background: #1d2b43; border-color: #2a3d5e; color: #a9bad1; }
  body[data-theme="dark"] .school-donut-labels span { color: #fff; text-shadow: 0 1px 3px #07101f, 0 0 2px rgba(255,255,255,.25); }
  body[data-theme="dark"] .page-btn { background: #14213a; border-color: #2a3d5e; color: #c8d5e8; }
  body[data-theme="dark"] .page-btn.active { background: linear-gradient(135deg, #4778f9, #033dde); border-color: #6d96ff; color: #fff; box-shadow: 0 4px 12px rgba(49,130,206,.42), inset 0 1px 0 rgba(255,255,255,.3); }
  body[data-theme="dark"] .filter-select,
  body[data-theme="dark"] .search-input { background: #101b30; border-color: #2a3d5e; color: #e5edf9; }
  body[data-theme="dark"] .filter-select:focus,
  body[data-theme="dark"] .search-input:focus { border-color: #4f83e8; box-shadow: 0 0 0 3px rgba(79,131,232,.18); }
}

@media print {
  @page { size: 210mm 330mm; margin: 14mm 12mm; } /* F4 */

  html, body {
    background: #fff !important;
    color: #000 !important;
    overflow: visible !important;
  }
  body { display: block; }
  .app-shell { display: block; }

  /* elemen antarmuka disembunyikan */
  .sidebar, .topbar, .table-toolbar, .table-footer, .import-box,
  .toolbar-left, .toolbar-right, .pager, .toast, #view-chart,
  .btn-outline, .btn-green, .btn-blue, .btn-ghost, .btn-del,
  .icon-btn, .avatar-wrap, .search-pill, .search-input { display: none !important; }

  .main-col, .content {
    display: block !important;
    padding: 0 !important;
    background: #fff !important;
  }

  /* KEPUTUSAN 66 / B.7 nomor 14 — sebab "LAM BA REKON hanya tercetak 1 halaman",
     TERBUKTI 2026-09-21.
     Blok cetak di atas melepas display/padding/background, tetapi TIDAK melepas
     height/overflow. Padahal @media (min-width: 601px) (baris 1908-1910) memasang
     `height: 100vh; overflow: hidden` pada body, .main-col, dan .content — dan
     kueri min-width itu IKUT MENYALA saat mencetak, karena lebar @page 210mm
     (baris 2164) = +/- 794px, jauh di atas 601px.
     Akibatnya isi dokumen dipotong setinggi satu halaman.
     Bukti: tmp/uji-cetak-lam-A.html (apa adanya) = 1 halaman,
            tmp/uji-cetak-lam-B.html (dengan aturan ini) = 4 halaman.
     SENGAJA DIBATASI ke body[data-module="lam"] supaya BA REKON, SPTJM, dan
     modul lain TIDAK tersentuh. Hanya jalur cetak; tampilan layar tidak berubah. */
  body[data-module="lam"],
  body[data-module="lam"] .main-col,
  body[data-module="lam"] main.content,
  body[data-module="lam"] #panel-view,
  body[data-module="lam"] .table-card,
  body[data-module="lam"] #view-wrap {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .panel { display: none !important; }
  .panel.active { display: block !important; }

  /* Judul panel (BA REKON/SPTJM) tidak ikut tercetak; judul dokumen tetap tampil. */
  .page-head { display: none !important; }
  .page-head h2 { font-size: 15pt; color: #000; }
  .period { color: #333; font-size: 9pt; }

  /* dokumen tercetak lebar penuh tanpa bayangan */
  .doc-sheet {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: #fff !important;
    font-size: 10.5pt;
  }
  .doc-hl {
    background: #ebf4ff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .doc-sign { page-break-inside: avoid; break-inside: avoid; }
  /* BA REKON: pusatkan kedua blok sebagai satu grup; jarak antarblok tetap. */
  body[data-module="barekon"] .doc-sign {
    width: 82%; margin-left: auto; margin-right: auto;
    justify-content: space-between;
  }
  /* SPTJM: blok tanda tangan tetap mengikuti posisi kanan yang sudah ditetapkan. */
  body[data-module="sptjm"] .doc-sign-right { margin-left: auto; }

  /* kartu & tabel */
  .table-card {
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
  }
  .table-wrap, .table-wrap.wide {
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  table { width: 100% !important; font-size: 8.5pt; }
  thead { display: table-header-group; }
  tr, .doc-table tr { page-break-inside: avoid; break-inside: avoid; }
  th, #view-wrap td.vh {
    background: #1e3a5f !important;
    color: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  td, th { border: 1px solid #94a3b8 !important; }
  td[contenteditable="true"] { background: #fff !important; }
  .empty-note { display: none !important; }
}

/* ===== Verifikasi — susunan card sesuai referensi (3 kolom, flat, tanpa scroll) ===== */
html:has(.login-screen.register-mode),
body:has(.login-screen.register-mode) {
  width: 100%; height: 100%; min-height: 100%; overflow: hidden;
  background: transparent;
}
.login-screen.register-mode {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  max-height: none;
  overflow: hidden;
}
.login-screen.register-mode .verification-container {
  width: 100%; height: 100%; min-height: 0; max-height: none; overflow: hidden;
  overflow-x: hidden; overflow-y: hidden; box-sizing: border-box;
  padding-bottom: 0;
}
.verification-container { width: 100%; max-width: 1536px; margin: 0 auto; padding: 24px 24px 8px; }
.verif-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.verif-brand-title { display: flex; align-items: center; gap: 16px; }
.verif-header-logo { width: 68px; height: 68px; object-fit: contain; flex: 0 0 68px; }
.verif-title-block h1 {
  font-size: 24px;
  margin: 0;
  color: #142a57;
  text-shadow: 0 2px 0 rgba(255,255,255,.9), 0 4px 7px rgba(22,58,122,.3);
  letter-spacing: -.2px;
}
.verif-title-block p {
  font-size: 13px;
  margin-top: 3px;
  color: #46638f;
  text-shadow: 0 1px 0 rgba(255,255,255,.9), 0 2px 4px rgba(43,83,145,.2);
}
.login-screen.register-mode .global-footer { display: none; }
.verif-main { flex: 0 0 auto; min-height: 0; display: grid; grid-template-columns: 1fr 1fr 1.04fr; gap: 14px; align-items: end; overflow: hidden; margin-top: auto; }
/* Urutan final: Akun kiri, Kepala/Bendahara tengah, Identitas/Data kanan. */
.verif-col-right { grid-column: 1; grid-row: 1; }
.verif-col-mid { grid-column: 2; grid-row: 1; }
.verif-col-left { grid-column: 3; grid-row: 1; }
.verif-col-left, .verif-col-mid, .verif-col-right { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; overflow: hidden; align-self: end; }
.verif-col-left > .verif-card:first-child { margin-bottom: 0; }
.verif-col-left > .verif-card:last-child { flex: 0 0 auto; min-height: 0; }
.verif-col-left > #school-preview, .verif-col-left > #verify-message { display: none !important; }
.verif-col-mid > .verif-card:first-child, .verif-col-mid > .verif-card:last-child { flex: 0 0 auto; min-height: 0; }
/* Gedung tetap berasal dari background halaman; logo hanya berada di header seperti reference. */
.verif-col-right > .verif-deco-panel { display: none; }
.verif-col-right > .verif-card { flex: 0 0 auto; min-height: 0; }
.verif-footer { flex: 0 0 auto; justify-content: flex-end; gap: 10px; padding-top: 12px; }
.verif-footer #btn-back-register { margin-right: 0; order: 1; }
.verif-footer #btn-submit-register { order: 2; min-width: 190px; }
.verif-card {
  background: linear-gradient(145deg, rgba(255,255,255,.99), rgba(241,247,255,.97));
  border-radius: 13px; padding: 14px 15px 13px;
  border: 1px solid rgba(255,255,255,.98);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.98), inset 0 -3px 0 rgba(50,88,143,.14);
  position: relative;
  overflow: hidden;
}
.verif-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,0) 42%);
}
.verif-card > * { position: relative; z-index: 1; }
.verif-card .verif-section-sub { margin-bottom: 10px; }
.verif-card .verif-data-list { margin-top: 10px; gap: 6px; }
.verif-card .si-item { padding: 6px 10px; }
.verif-card .form-group { margin-bottom: 10px; }
.verif-card .form-group:last-child { margin-bottom: 0; }
.verif-deco-panel {
  display: grid; place-items: center; padding: 12px;
  border-radius: 13px; min-height: 148px;
  background: linear-gradient(150deg, #e7efff, #c9dcfb);
  border: 1px solid #d5e3fb;
}
.verif-logo { width: 116px; height: 116px; object-fit: contain; }
@media (min-width: 601px) and (max-width: 1200px) {
  /* Sebelum mobile, pertahankan susunan dua kolom dan posisi card.
     Jangan biarkan wrapper lama mengubah urutan menjadi Akun lebih dulu. */
  .verif-main {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: start;
    width: 100%;
    max-width: none;
    margin: 0;
    overflow: visible;
  }
  .verif-col-left, .verif-col-mid, .verif-col-right { display: contents; }
  .verif-col-left > .verif-card:first-child { grid-column: 1 / -1; grid-row: 1; }
  .verif-col-mid > .verif-card:first-child { grid-column: 1; grid-row: 2; }
  .verif-col-mid > .verif-card:last-child { grid-column: 2; grid-row: 2; }
  .verif-col-right > .verif-card:not(.verif-note-card) { grid-column: 1; grid-row: 3; }
  .verif-col-left > .verif-card:last-child { grid-column: 2; grid-row: 3; }
  .verif-col-right > .verif-note-card { grid-column: 1 / -1; grid-row: 4; }
}
@media (max-width: 900px) {
  /* Layout reference layar sempit:
     baris 1 = Identitas full-width,
     baris 2 = Kepala | Bendahara,
     baris 3 = Akun | Data Sekolah. */
  .verif-main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: start; }
  .verif-col-left, .verif-col-mid, .verif-col-right { display: contents; }
  .verif-col-left > .verif-card:first-child { grid-column: 1 / -1; grid-row: 1; }
  .verif-col-mid > .verif-card:first-child { grid-column: 1; grid-row: 2; }
  .verif-col-mid > .verif-card:last-child { grid-column: 2; grid-row: 2; }
  .verif-col-right > .verif-card:not(.verif-note-card) { grid-column: 1; grid-row: 3; }
  .verif-col-right > .verif-note-card { grid-column: 1 / -1; grid-row: 4; }
  .verif-col-left > .verif-card:last-child { grid-column: 2; grid-row: 3; }
  .verif-deco-panel, #school-preview, #verify-message { display: none !important; }
  .verif-card { width: 100%; }
  .verif-footer { margin-top: 8px; }
}

/* Panel desktop kiri; card mengikuti isi secara proporsional, tidak melebar kosong. */
@media (min-width: 1201px) {
  .login-screen.register-mode .verif-main { width: 100%; max-width: 760px; }
  .login-screen.register-mode .verif-main input { max-width: 300px; }
  .login-screen.register-mode .verif-card { padding: 12px 13px 11px; }
  .login-screen.register-mode .verif-card .verif-section-sub { max-width: 300px; }
  .login-screen.register-mode .verif-footer { max-width: 760px; }
}

/* Final responsive layout: desktop cards sit low near the action buttons; small screens may scroll without visible bars. */
@media (min-width: 1201px) {
  /* Full screen memakai susunan screenshot sempit, tetapi panelnya berada di kanan. */
  /* Container tetap full layar supaya logo + judul tetap di kiri seperti login.
     Hanya blok card (.verif-main) yang diposisikan ke kanan. */
  .login-screen.register-mode .verification-container {
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    margin: 0;
    padding: 22px 4vw 8px;
    display: flex;
    flex-direction: column;
  }
  .login-screen.register-mode .verif-header {
    margin-bottom: 14px;
    position: relative;
  }
  .login-screen.register-mode .verif-main {
    margin-top: auto;
    margin-left: auto;
    margin-right: 0;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
    top: -44px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    width: min(600px, 44vw);
    max-width: 600px;
  }
  .login-screen.register-mode .verif-card { width: 100%; min-width: 0; }
  .login-screen.register-mode .verif-main > .verif-col-mid > .verif-card,
  .login-screen.register-mode .verif-main > .verif-col-right > .verif-card,
  .login-screen.register-mode .verif-main > .verif-col-left > .verif-card { width: 100%; }
  .login-screen.register-mode .verif-identity-card { position: relative; }
  .login-screen.register-mode .verif-identity-card > .verif-card-heading { padding-right: 78px; }
  .login-screen.register-mode .verif-main input { max-width: none; }
  .login-screen.register-mode .verif-col-left > .verif-card:first-child { width: 100%; }
  .login-screen.register-mode .verif-col-left > .verif-card:last-child { width: 100%; }
  .login-screen.register-mode .verif-data-fields { display: grid; gap: 8px; }
  .login-screen.register-mode .verif-data-fields .form-group { margin-bottom: 0; }
  .login-screen.register-mode .verif-note-card { grid-column: 1 / -1; grid-row: 4; }
  .login-screen.register-mode .verif-note-card p { margin: 0; }
  .login-screen.register-mode .verif-col-left,
  .login-screen.register-mode .verif-col-mid,
  .login-screen.register-mode .verif-col-right { display: contents; }
  .login-screen.register-mode .verif-col-left > .verif-card:first-child { grid-column: 1 / -1; grid-row: 1; }
  .login-screen.register-mode .verif-col-mid > .verif-card:first-child { grid-column: 1; grid-row: 2; }
  .login-screen.register-mode .verif-col-mid > .verif-card:last-child { grid-column: 2; grid-row: 2; }
  .login-screen.register-mode .verif-col-right > .verif-card:not(.verif-note-card) { grid-column: 1; grid-row: 3; }
  .login-screen.register-mode .verif-col-left > .verif-card:last-child { grid-column: 2; grid-row: 3; }
  .login-screen.register-mode .verif-col-right > .verif-note-card { grid-column: 1 / -1; grid-row: 4; }
  .login-screen.register-mode .verif-col-left > .verif-card:last-child,
  .login-screen.register-mode .verif-col-right > .verif-card:not(.verif-note-card) {
    align-self: stretch;
    height: auto;
    box-sizing: border-box;
  }
  .login-screen.register-mode .verif-col-right > .verif-deco-panel,
  .login-screen.register-mode #school-preview,
  .login-screen.register-mode #verify-message { display: none !important; }
  .login-screen.register-mode .verif-note-card { min-height: 64px; }
  .login-screen.register-mode .verif-data-fields { align-content: start; }

}

@media (max-width: 1200px) {
  html:has(.login-screen.register-mode),
  body:has(.login-screen.register-mode),
  .login-screen.register-mode {
    height: auto;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  html:has(.login-screen.register-mode)::-webkit-scrollbar,
  body:has(.login-screen.register-mode)::-webkit-scrollbar,
  .login-screen.register-mode::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
  .login-screen.register-mode {
    position: relative;
    inset: auto;
    height: auto;
    min-height: 100dvh;
    max-height: none;
    overflow: hidden;
  }
  .login-screen.register-mode .verification-container {
    height: auto;
    min-height: 100dvh;
    max-height: none;
    overflow: visible;
  }
  .login-screen.register-mode .verif-main {
    overflow: visible;
  }
}

/* ============================================================
   TEMA GELAP — seluruh dashboard dan semua tab
   ============================================================ */
@media screen {
  body[data-theme="dark"] {
    --bg: #080f1f;
    --ink: #e5edf9;
    --muted: #91a2bd;
    --line: #253653;
    --grid: #1f2d46;
    --row-alt: #101b30;
    --blue-hover: #162d55;
    background: #080f1f;
    color: #e5edf9;
  }
  body[data-theme="dark"] .app-shell { background: #080f1f; }
  body[data-theme="dark"] .main-col { background: #0b1427; }
  body[data-theme="dark"] .topbar {
    background: #0d172b;
    border-color: #253653;
    box-shadow: 0 2px 10px rgba(0,0,0,.28);
  }
  body[data-theme="dark"] .doc-text b { color: #e7eefb; }
  body[data-theme="dark"] .doc-text span, body[data-theme="dark"] .period { color: #91a2bd; }
  body[data-theme="dark"] .search-pill {
    background: #17243a; border-color: #2a3d5e; color: #94a8c7; box-shadow: none;
  }
  body[data-theme="dark"] .icon-btn { background: transparent; border: 0; color: #c8d5e8; box-shadow: none; }
  body[data-theme="dark"] .icon-btn:hover { background: transparent; color: #8eb7ff; }
  body[data-theme="dark"] .content { background: linear-gradient(180deg, #0b1427 0%, #0a1222 100%); }
  body[data-theme="dark"] .page-head h2 { color: #edf4ff; }
  body[data-theme="dark"] .school-info,
  body[data-theme="dark"] .sum-card,
  body[data-theme="dark"] .import-box,
  body[data-theme="dark"] .table-card,
  body[data-theme="dark"] .chart-card {
    background: linear-gradient(145deg, #14213a, #101b30);
    border-color: #2a3d5e;
    box-shadow: 0 10px 22px rgba(0,0,0,.22), inset 0 1px 0 rgba(143,177,230,.08);
  }
  body[data-theme="dark"] .school-info::after,
  body[data-theme="dark"] .table-card::before { box-shadow: inset 0 0 0 1px rgba(143,177,230,.08); }
  body[data-theme="dark"] .si-label,
  body[data-theme="dark"] .sum-label,
  body[data-theme="dark"] .stat-label { color: #93a6c2; }
  body[data-theme="dark"] .si-item b,
  body[data-theme="dark"] .sum-value,
  body[data-theme="dark"] .chart-title,
  body[data-theme="dark"] #table-title { color: #eef4ff; }
  body[data-theme="dark"] .import-file { color: #e6eefb; }
  body[data-theme="dark"] .import-hint,
  body[data-theme="dark"] .dl-desc,
  body[data-theme="dark"] .empty-note,
  body[data-theme="dark"] #page-info { color: #91a2bd; }
  body[data-theme="dark"] .import-box.dragover { background: #1b3151; }
  body[data-theme="dark"] .pdf-icon { background: #16243b; }
  body[data-theme="dark"] .table-toolbar { background: linear-gradient(180deg, #172640, #122039); border-color: #253653; }
  body[data-theme="dark"] .table-footer { background: #101b30; border-color: #253653; }
  body[data-theme="dark"] thead th { background: linear-gradient(180deg, #2458bd, #123b91); }
  body[data-theme="dark"] thead th:hover { background: linear-gradient(180deg, #3374e5, #1b4cae); }
  body[data-theme="dark"] body[data-module="bhp"] thead th { background: linear-gradient(180deg, #087f82, #07565f); }
  body[data-theme="dark"] tbody td,
  body[data-theme="dark"] table.editable td { color: #d5e0ef; border-color: #1f2d46; }
  body[data-theme="dark"] #data-table th,
  body[data-theme="dark"] #data-table td { border-color: #2a3d5e; }
  body[data-theme="dark"] tbody tr:nth-child(even),
  body[data-theme="dark"] table.editable tbody tr:nth-child(even) { background: #101b30; }
  body[data-theme="dark"] tbody tr:hover { background: #162d55; }
  body[data-theme="dark"] #data-table td:first-child { background: transparent; box-shadow: none; }
  body[data-theme="dark"] td[contenteditable="true"]:hover { background: #263449; }
  body[data-theme="dark"] td[contenteditable="true"]:focus,
  body[data-theme="dark"] table.editable td[contenteditable]:focus { background: #35445a; }
  body[data-theme="dark"] .page-btn { background: #14213a; border-color: #2a3d5e; color: #c8d5e8; box-shadow: none; }
  body[data-theme="dark"] .page-btn:hover:not(:disabled) { border-color: #4f83e8; color: #9fc0ff; background: #1a3155; }
  body[data-theme="dark"] .page-ellipsis { color: #7184a1; }
  body[data-theme="dark"] .tabs { border-color: #2a3d5e; }
  body[data-theme="dark"] .tab { color: #9aabc4; }
  body[data-theme="dark"] .tab.active { color: #9fc0ff; background: #162d55; border-color: #4c82ee; }
  body[data-theme="dark"] .search-input,
  body[data-theme="dark"] input,
  body[data-theme="dark"] select,
  body[data-theme="dark"] textarea { background: #101b30; border-color: #2a3d5e; color: #e5edf9; }
  body[data-theme="dark"] input::placeholder,
  body[data-theme="dark"] textarea::placeholder { color: #7184a1; }
  /* Form verifikasi tetap memakai bidang biru, bukan hitam, pada tema gelap. */
  body[data-theme="dark"] .verification-container input,
  body[data-theme="dark"] .verification-container input[readonly] {
    background: linear-gradient(180deg, #dbeafe, #bfdbfe) !important;
    border: 1px solid #1d4ed8 !important;
    color: #102a56 !important;
    box-shadow: inset 0 1px 3px rgba(29,78,216,.16), 0 1px 0 rgba(255,255,255,.7);
  }
  body[data-theme="dark"] .verification-container input:focus {
    background: #eff6ff !important;
    border-color: #1e3a8a !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,.2), inset 0 1px 3px rgba(29,78,216,.14);
  }
  body[data-theme="dark"] .verification-container input::placeholder { color: #355b92; }
  body[data-theme="dark"] .verification-container .form-group label { color: #102a56; }
  body[data-theme="dark"] .verification-container .info-alert-inline,
  body[data-theme="dark"] .verification-container .verif-note-card { border-color: #1d4ed8; }
  body[data-theme="dark"] .verification-container .info-alert-inline { background: linear-gradient(180deg, #dbeafe, #bfdbfe); color: #173b72; }
  body[data-theme="dark"] .verification-container .verif-note-card { background: linear-gradient(180deg, #dbeafe, #bfdbfe); }
  body[data-theme="dark"] .verification-container .verif-note-card p,
  body[data-theme="dark"] .verification-container .icb-title { color: #cfe1fb; } /* #173b72 = navy gelap di atas kartu gelap, praktis tak terbaca — dibetulkan 2026-09-25 atas permintaan pemilik */
  body[data-theme="dark"] .search-input:focus,
  body[data-theme="dark"] input:focus,
  body[data-theme="dark"] select:focus,
  body[data-theme="dark"] textarea:focus { background: #14243f; border-color: #4f83e8; }
  body[data-theme="dark"] .row-count { background: #1d2b43; border-color: #2a3d5e; color: #a9bad1; }
  body[data-theme="dark"] .account-menu { background: #14213a; border-color: #2a3d5e; box-shadow: 0 16px 34px rgba(0,0,0,.38), 0 2px 0 rgba(71,120,249,.25); }
  body[data-theme="dark"] .account-menu-profile { border-color: #2a3d5e; }
  body[data-theme="dark"] .account-menu-avatar { background: #243452; color: #dce8fb; }
  body[data-theme="dark"] .account-menu-user b,
  body[data-theme="dark"] .account-menu-item { color: #e5edf9; }
  body[data-theme="dark"] .account-menu-user span,
  body[data-theme="dark"] .menu-item-ico,
  body[data-theme="dark"] .account-menu-arrow { color: #91a2bd; }
  body[data-theme="dark"] .account-menu-item:hover,
  body[data-theme="dark"] .account-menu-item[aria-expanded="true"],
  body[data-theme="dark"] .theme-menu-item:hover,
  body[data-theme="dark"] .theme-menu-item.active { background: #1c3152; }
  body[data-theme="dark"] .account-upgrade { background: #123a35; color: #7ee2b5; }
  body[data-theme="dark"] .account-upgrade .menu-item-ico { color: #4ade80; }
  body[data-theme="dark"] .account-logout { border-color: #2a3d5e; color: #fda4af; }
  body[data-theme="dark"] .account-logout .menu-item-ico { color: #fb7185; }
  body[data-theme="dark"] .toast { background: #172640 !important; color: #e5edf9; border: 1px solid #2a3d5e; }
  body[data-theme="dark"] #view-wrap table { border-color: #2a3d5e; }
  body[data-theme="dark"] #view-wrap td,
  body[data-theme="dark"] #view-wrap .doc-table td { background: #101b30; color: #d5e0ef; border-color: #2a3d5e; }
  body[data-theme="dark"] #view-wrap tbody tr:nth-child(even) td:not(.vh) { background: #0d1729; }
  body[data-theme="dark"] #view-wrap td:hover,
  body[data-theme="dark"] #view-wrap .doc-table td:hover { background: #1b3151; }
  body[data-theme="dark"] #view-wrap tr.hdr-title td { background: #14213a !important; color: #eaf2ff !important; }
  body[data-theme="dark"] #view-wrap.pajak-view td.sheet-editable { background: #263449; color: #f7d794; }
  body[data-theme="dark"] #view-wrap.pajak-view td.sheet-editable:focus { background: #35445a; }
  body[data-theme="dark"] .filter-label { color: #a9bad1; }
  body[data-theme="dark"] .filter-select { background: #101b30; color: #e5edf9; border-color: #2a3d5e; box-shadow: none; }
  body[data-theme="dark"] .doc-sheet { background: linear-gradient(145deg, #14213a, #101b30); color: #e5edf9; border-color: #2a3d5e; box-shadow: 0 12px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(143,177,230,.08); }
  body[data-theme="dark"] .doc-hl { background: #162d55; border-color: #315895; color: #9fc0ff; }
  body[data-theme="dark"] #view-wrap .doc-table td { background: #101b30; }
  body[data-theme="dark"] #view-wrap .doc-table td:hover { background: #1b3151; }
  body[data-theme="dark"] .tabs { background: transparent; }
  body[data-theme="dark"] table.editable td[contenteditable]:focus { background: #35445a; }
  body[data-theme="dark"] .btn-outline,
  body[data-theme="dark"] .btn-ghost { background: #14213a; color: #9fc0ff; border-color: #4f83e8; }
  body[data-theme="dark"] .btn-outline:hover,
  body[data-theme="dark"] .btn-ghost:hover { background: #1b3151; }

  /* Sidebar dark mengikuti referensi: navy lebih dalam, state aktif tetap royal blue. */
  body[data-theme="dark"] .sidebar {
    background: linear-gradient(180deg, #020b1d 0%, #061737 48%, #03102b 100%);
    border-right: 1px solid #172b4b;
  }
  body[data-theme="dark"] .side-logo { border-color: rgba(148,180,232,.12); }
  body[data-theme="dark"] .sidebar-label { color: #7893c1; }
  body[data-theme="dark"] .sidebar-settings { border-color: rgba(148,180,232,.14); }
  body[data-theme="dark"] .nav-item:hover { background: rgba(88,136,220,.16); }
  body[data-theme="dark"] .nav-item.active,
  body[data-theme="dark"] .nav-item.active[data-module="bku"],
  body[data-theme="dark"] .nav-item.active[data-module="bhp"] {
    background: linear-gradient(135deg, #2563eb, #1247b8);
    box-shadow: 0 4px 14px rgba(29,78,216,.42), inset 0 1px 0 rgba(255,255,255,.22);
  }

  /* Header seluruh tabel tetap biru royal pada tema gelap. */
  body[data-theme="dark"] thead th,
  body[data-theme="dark"] table.editable thead th,
  body[data-theme="dark"] #view-wrap td.vh,
  body[data-theme="dark"] #view-wrap .doc-table th {
    background: linear-gradient(180deg, #4778f9, #033dde) !important;
    color: #fff !important;
    border-color: #2458bd;
  }
  body[data-theme="dark"] thead th:hover,
  body[data-theme="dark"] #view-wrap td.vh:hover { background: linear-gradient(180deg, #5d8cff, #1648e8) !important; }
}

/* Verifikasi mobile: semua card utama satu kolom dan satu lebar.
   Urutan tetap: Identitas, Kepala, Bendahara, Akun, Data Sekolah, Catatan. */
@media (max-width: 600px) {
  .login-screen.register-mode .verif-main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    max-width: none;
    margin: 0;
    overflow: visible;
  }
  .login-screen.register-mode .verif-col-left,
  .login-screen.register-mode .verif-col-mid,
  .login-screen.register-mode .verif-col-right {
    display: contents;
  }
  .login-screen.register-mode .verif-col-left > .verif-card:first-child { order: 1; }
  .login-screen.register-mode .verif-col-mid > .verif-card:first-child { order: 2; }
  .login-screen.register-mode .verif-col-mid > .verif-card:last-child { order: 3; }
  .login-screen.register-mode .verif-col-right > .verif-card:not(.verif-note-card) { order: 4; }
  .login-screen.register-mode .verif-col-left > .verif-card:last-child { order: 5; }
  .login-screen.register-mode .verif-col-right > .verif-note-card { order: 6; }
  .login-screen.register-mode .verif-card {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    align-self: stretch;
  }
  .login-screen.register-mode .verif-card:not(.verif-note-card) { min-height: 0; }
  .login-screen.register-mode .verif-note-card { min-height: 0; }
  .login-screen.register-mode .verification-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 18px 16px 10px;
    overflow: visible;
  }
  .login-screen.register-mode .verif-main,
  .login-screen.register-mode .verif-card,
  .login-screen.register-mode .verif-card-heading,
  .login-screen.register-mode .input-action-row,
  .login-screen.register-mode .input-action-group,
  .login-screen.register-mode .verif-identity-heading-copy {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  .login-screen.register-mode .verif-identity-title-row { align-items: flex-start; flex-wrap: nowrap; }
  .login-screen.register-mode .verif-card-heading { padding-right: 62px; }
  .login-screen.register-mode .npsn-status-slot { top: 32px; right: 6px; width: 52px; height: 52px; }
  .login-screen.register-mode .npsn-status-slot img { width: 48px; height: 48px; }
}

/* Final verifikasi layout: ikon status tetap di pojok kanan atas card Identitas,
   dan transisi lebar memakai container viewport penuh sebelum mobile. */
.login-screen.register-mode .verif-identity-card { position: relative; }
.login-screen.register-mode .verif-identity-card .npsn-status-slot {
  top: 10px;
  right: 12px;
}
.login-screen.register-mode .verif-identity-card .verif-card-heading {
  padding-right: 72px;
}

@media (min-width: 601px) and (max-width: 1200px) {
  .login-screen.register-mode .login-landing {
    min-width: 0;
    width: 100%;
  }
  .login-screen.register-mode .login-card-container {
    min-width: 0;
    width: 100%;
  }
  .login-screen.register-mode .verification-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding-left: 24px;
    padding-right: 24px;
  }
  .login-screen.register-mode .verif-main {
    width: min(600px, calc(100vw - 48px));
    max-width: 600px;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
}

@media (max-width: 600px) {
  .login-screen.register-mode .verification-container {
    width: 100vw;
    max-width: 100vw;
    min-width: 0;
    box-sizing: border-box;
    padding-left: 16px;
    padding-right: 16px;
  }
  .login-screen.register-mode .verif-main {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .login-screen.register-mode .verif-identity-card .verif-card-heading {
    padding-right: 62px;
  }
  .login-screen.register-mode .verif-identity-card .npsn-status-slot {
    top: 8px;
    right: 8px;
  }
}

/* ============================================================
   STEP 7 — FINAL DARK NAVY 3D CASCADE
   CSS-only skin: visual values only; DOM, layout, data and behavior stay unchanged.
   This block is intentionally last so it is the single visual authority for dark mode.
   ============================================================ */
@media screen {
  body[data-theme="dark"] {
    --bg: #080f1f;
    --surface-1: #14213a;
    --surface-2: #101b30;
    --surface-3: #172640;
    --ink: #e5edf9;
    --ink-strong: #eef4ff;
    --muted: #91a2bd;
    --line: #253653;
    --grid: #1f2d46;
    --row-alt: #0d1729;
    --hover: #162d55;
    --focus: #4f83e8;
    --dark-shadow: 0 12px 28px rgba(0,0,0,.30), inset 0 1px 0 rgba(143,177,230,.10), inset 0 -2px 0 rgba(0,0,0,.20);
    background: #080f1f !important;
    color: var(--ink) !important;
  }

  /* Shared frame: deep navy gradient with restrained blue glow. */
  body[data-theme="dark"] .app-shell,
  body[data-theme="dark"] .main-col,
  body[data-theme="dark"] .content {
    background: radial-gradient(circle at 76% 0%, rgba(52,103,206,.16), transparent 32%), linear-gradient(180deg, #080f1f 0%, #0b1427 48%, #071225 100%) !important;
    color: var(--ink) !important;
  }
  body[data-theme="dark"] .topbar {
    background: linear-gradient(180deg, #122341 0%, #0a1730 100%) !important;
    border-color: #294a7b !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.34), inset 0 -1px 0 rgba(89,151,255,.18) !important;
  }
  body[data-theme="dark"] .sidebar {
    background: linear-gradient(180deg, #16294a 0%, #0f2b4c 48%, #07152e 100%) !important;
    border-right-color: #1d4377 !important;
    box-shadow: 8px 0 24px rgba(0,0,0,.28), inset -1px 0 0 rgba(83,145,235,.14) !important;
  }
  body[data-theme="dark"] .side-logo,
  body[data-theme="dark"] .sidebar-settings { border-color: rgba(143,177,230,.16) !important; }
  body[data-theme="dark"] .sidebar-label { color: #8fa9ce !important; }
  body[data-theme="dark"] .side-logo-title,
  body[data-theme="dark"] .side-logo-sub,
  body[data-theme="dark"] .nav-item,
  body[data-theme="dark"] .nav-ico { color: #d5e3f8 !important; }
  body[data-theme="dark"] .nav-item:hover {
    background: linear-gradient(90deg, rgba(44,105,218,.30), rgba(27,63,125,.16)) !important;
    color: #fff !important;
  }
  body[data-theme="dark"] .nav-item.active,
  body[data-theme="dark"] .nav-item.active[data-module="bku"],
  body[data-theme="dark"] .nav-item.active[data-module="bhp"] {
    background: linear-gradient(135deg, #3d7cff 0%, #124bd0 55%, #092f93 100%) !important;
    border: 1px solid rgba(133,181,255,.52) !important;
    box-shadow: 0 0 18px rgba(49,130,246,.38), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 0 rgba(0,0,0,.22) !important;
    color: #fff !important;
  }
  body[data-theme="dark"] .nav-item.active::before { background: #b9d6ff !important; }

  /* Topbar controls and menus. Existing image assets remain untouched. */
  body[data-theme="dark"] .doc-text b,
  body[data-theme="dark"] .page-head h2,
  body[data-theme="dark"] .chart-title,
  body[data-theme="dark"] #table-title { color: var(--ink-strong) !important; }
  body[data-theme="dark"] .doc-text span,
  body[data-theme="dark"] .period { color: #8fa9ce !important; }
  body[data-theme="dark"] .search-pill {
    background: #17243a !important;
    border-color: #2a3d5e !important;
    color: #94a8c7 !important;
    box-shadow: inset 0 1px 0 rgba(145,190,255,.10), 0 4px 12px rgba(0,0,0,.22) !important;
  }
  body[data-theme="dark"] .icon-btn,
  body[data-theme="dark"] .avatar-wrap { color: #c8d5e8 !important; }
  body[data-theme="dark"] .icon-btn:hover,
  body[data-theme="dark"] .avatar-wrap:hover { background: transparent !important; color: #fff !important; }
  body[data-theme="dark"] .badge { border-color: #0a1730 !important; }
  body[data-theme="dark"] .account-menu,
  body[data-theme="dark"] .theme-menu,
  body[data-theme="dark"] .validation-menu,
  body[data-theme="dark"] .period-calendar-card,
  body[data-theme="dark"] .period-calendar-popover,
  body[data-theme="dark"] .period-calendar-picker-menu,
  body[data-theme="dark"] .history-modal-card {
    background: linear-gradient(145deg, #14213a 0%, #101b30 100%) !important;
    border-color: #2a3d5e !important;
    color: var(--ink) !important;
    box-shadow: 0 16px 34px rgba(0,0,0,.38), inset 0 1px 0 rgba(143,177,230,.10) !important;
  }
  body[data-theme="dark"] .account-menu-profile,
  body[data-theme="dark"] .history-modal-head,
  body[data-theme="dark"] .period-calendar-head { border-color: #253653 !important; }
  body[data-theme="dark"] .account-menu-user b,
  body[data-theme="dark"] .account-menu-item,
  body[data-theme="dark"] .theme-menu-item,
  body[data-theme="dark"] .validation-menu-item,
  body[data-theme="dark"] .history-modal-head h3,
  body[data-theme="dark"] .period-calendar-head h3,
  body[data-theme="dark"] .period-calendar-picker,
  body[data-theme="dark"] .period-calendar-picker-current-year { color: var(--ink-strong) !important; }
  body[data-theme="dark"] .account-menu-user span,
  body[data-theme="dark"] .menu-item-ico,
  body[data-theme="dark"] .account-menu-arrow,
  body[data-theme="dark"] .history-modal-head p,
  body[data-theme="dark"] .period-calendar-head p { color: var(--muted) !important; }
  body[data-theme="dark"] .account-menu-item:hover,
  body[data-theme="dark"] .account-menu-item[aria-expanded="true"],
  body[data-theme="dark"] .theme-menu-item:hover,
  body[data-theme="dark"] .theme-menu-item.active,
  body[data-theme="dark"] .validation-menu-item:hover { background: #1c3152 !important; }
  body[data-theme="dark"] .account-logout { border-color: #2a3d5e !important; color: #fda4af !important; }

  /* Reusable 3D surfaces: same gradient, bevel and depth across all tabs. */
  body[data-theme="dark"] .school-info,
  body[data-theme="dark"] .sum-card,
  body[data-theme="dark"] .import-box,
  body[data-theme="dark"] .table-card,
  body[data-theme="dark"] .chart-card,
  body[data-theme="dark"] .doc-sheet,
  body[data-theme="dark"] .stat-box,
  body[data-theme="dark"] .filter-card,
  body[data-theme="dark"] .summary-card,
  body[data-theme="dark"] .settings-meta .sum-card,
  body[data-theme="dark"] .school-rekap-dashboard,
  body[data-theme="dark"] .school-metric-card,
  body[data-theme="dark"] .school-chart-panel,
  body[data-theme="dark"] .period-calendar-card,
  body[data-theme="dark"] .period-calendar-popover {
    background: linear-gradient(145deg, #14213a 0%, #101b30 100%) !important;
    border-color: #2a3d5e !important;
    color: var(--ink-strong) !important;
    box-shadow: var(--dark-shadow) !important;
  }
  body[data-theme="dark"] .school-info::after,
  body[data-theme="dark"] .table-card::before { box-shadow: inset 0 0 0 1px rgba(143,177,230,.10) !important; }
  body[data-theme="dark"] .si-label,
  body[data-theme="dark"] .sum-label,
  body[data-theme="dark"] .stat-label,
  body[data-theme="dark"] .import-hint,
  body[data-theme="dark"] .empty-note,
  body[data-theme="dark"] #page-info,
  body[data-theme="dark"] .dl-desc { color: var(--muted) !important; }
  body[data-theme="dark"] .si-item b,
  body[data-theme="dark"] .sum-value,
  body[data-theme="dark"] .import-file,
  body[data-theme="dark"] .stat-value { color: var(--ink-strong) !important; }
  body[data-theme="dark"] .sum-card::before { background: linear-gradient(90deg, #3182ce 0%, #4299e1 52%, rgba(66,153,225,.08) 100%) !important; }
  body[data-theme="dark"] .pdf-icon { background: #16243b !important; }

  /* Toolbar, buttons and state treatment. Dimensions are inherited unchanged. */
  body[data-theme="dark"] .table-toolbar { background: linear-gradient(180deg, #172640, #122039) !important; border-color: #253653 !important; }
  body[data-theme="dark"] .table-footer { background: linear-gradient(180deg, #172640, #101b30) !important; border-color: #253653 !important; }
  body[data-theme="dark"] .btn-blue,
  body[data-theme="dark"] .btn-review-pdf { box-shadow: 0 5px 12px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.24) !important; }
  body[data-theme="dark"] .btn-green { box-shadow: 0 5px 12px rgba(24,96,63,.38), inset 0 1px 0 rgba(255,255,255,.24) !important; }
  body[data-theme="dark"] .btn-viled-file,
  body[data-theme="dark"] .btn-del { color: #ff9ca8 !important; }
  body[data-theme="dark"] .btn-outline,
  body[data-theme="dark"] .btn-ghost,
  body[data-theme="dark"] .page-btn {
    background: #14213a !important;
    border-color: #4f83e8 !important;
    color: #9fc0ff !important;
    box-shadow: 0 4px 10px rgba(0,0,0,.22), inset 0 1px 0 rgba(143,177,230,.10) !important;
  }
  body[data-theme="dark"] .btn-outline:hover,
  body[data-theme="dark"] .btn-ghost:hover,
  body[data-theme="dark"] .page-btn:hover:not(:disabled),
  body[data-theme="dark"] .btn-del:hover { background: #1b3151 !important; color: #dce9ff !important; }
  body[data-theme="dark"] .btn-blue:hover,
  body[data-theme="dark"] .btn-green:hover,
  body[data-theme="dark"] .btn-review-pdf:hover,
  body[data-theme="dark"] .btn-viled-file:hover { filter: brightness(1.10) saturate(1.05) !important; }
  body[data-theme="dark"] .btn-blue:active,
  body[data-theme="dark"] .btn-green:active,
  body[data-theme="dark"] .btn-outline:active,
  body[data-theme="dark"] .btn-ghost:active,
  body[data-theme="dark"] .page-btn:active { box-shadow: 0 2px 6px rgba(0,0,0,.35), inset 0 2px 0 rgba(0,0,0,.18) !important; }
  body[data-theme="dark"] .page-btn.active {
    background: linear-gradient(135deg, #4778f9, #033dde) !important;
    border-color: #6d96ff !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(49,130,206,.42), inset 0 1px 0 rgba(255,255,255,.30) !important;
  }
  body[data-theme="dark"] .row-count { background: #1d2b43 !important; border-color: #2a3d5e !important; color: #a9bad1 !important; }
  body[data-theme="dark"] .link-add { color: #9fc0ff !important; }

  /* Inputs, filters and editable states. */
  body[data-theme="dark"] .filter-select,
  body[data-theme="dark"] .search-input,
  body[data-theme="dark"] input:not(.verification-container input),
  body[data-theme="dark"] select,
  body[data-theme="dark"] textarea {
    background: #101b30 !important;
    border-color: #2a3d5e !important;
    color: #e5edf9 !important;
  }
  body[data-theme="dark"] input::placeholder,
  body[data-theme="dark"] textarea::placeholder { color: #7184a1 !important; }
  body[data-theme="dark"] .filter-select:focus,
  body[data-theme="dark"] .search-input:focus,
  body[data-theme="dark"] input:not(.verification-container input):focus,
  body[data-theme="dark"] select:focus,
  body[data-theme="dark"] textarea:focus,
  body[data-theme="dark"] td[contenteditable="true"]:focus {
    background: #35445a !important;
    border-color: #4f83e8 !important;
    box-shadow: 0 0 0 3px rgba(79,131,232,.18), inset 0 1px 0 rgba(143,177,230,.08) !important;
    outline: none !important;
  }

  /* All editor/viewer/document tables. */
  body[data-theme="dark"] thead th,
  body[data-theme="dark"] table.editable thead th,
  body[data-theme="dark"] #view-wrap td.vh,
  body[data-theme="dark"] #view-wrap .doc-table th {
    background: linear-gradient(180deg, #4778f9, #033dde) !important;
    color: #fff !important;
    border-color: #2458bd !important;
  }
  body[data-theme="dark"] thead th:hover,
  body[data-theme="dark"] #view-wrap td.vh:hover { background: linear-gradient(180deg, #5d8cff, #1648e8) !important; }
  body[data-theme="dark"] tbody td,
  body[data-theme="dark"] table.editable td,
  body[data-theme="dark"] #view-wrap td,
  body[data-theme="dark"] #view-wrap .doc-table td { background: #101b30 !important; color: #d5e0ef !important; border-color: #1f2d46 !important; }
  body[data-theme="dark"] tbody tr:nth-child(even) td,
  body[data-theme="dark"] table.editable tbody tr:nth-child(even) td,
  body[data-theme="dark"] #view-wrap tbody tr:nth-child(even) td:not(.vh) { background: #0d1729 !important; }
  body[data-theme="dark"] tbody tr:hover td,
  body[data-theme="dark"] #view-wrap td:hover,
  body[data-theme="dark"] #view-wrap .doc-table td:hover { background: #162d55 !important; }
  body[data-theme="dark"] #data-table th,
  body[data-theme="dark"] #data-table td,
  body[data-theme="dark"] #view-wrap table { border-color: #2a3d5e !important; }
  body[data-theme="dark"] td[contenteditable="true"]:hover { background: #263449 !important; }
  body[data-theme="dark"] td[contenteditable="true"]:focus,
  body[data-theme="dark"] table.editable td[contenteditable]:focus,
  body[data-theme="dark"] #view-wrap.pajak-view td.sheet-editable:focus { background: #35445a !important; color: #eef4ff !important; }
  body[data-theme="dark"] #data-table tbody tr.arkas-row-group1 td { background: #5b263f !important; color: #ffe5f0 !important; }
  body[data-theme="dark"] #data-table tbody tr.arkas-row-group2 td { background: #174b42 !important; color: #d8ffed !important; }
  body[data-theme="dark"] #data-table tbody tr.arkas-row-group3 td { background: #5b4b1d !important; color: #fff4c2 !important; }
  body[data-theme="dark"] #data-table tbody tr.arkas-row-group1:hover td,
  body[data-theme="dark"] #data-table tbody tr.arkas-row-group2:hover td,
  body[data-theme="dark"] #data-table tbody tr.arkas-row-group3:hover td { filter: brightness(1.12) !important; }
  body[data-theme="dark"] #view-wrap tr.hdr-title td { background: #14213a !important; color: #eaf2ff !important; }
  body[data-theme="dark"] #view-wrap.pajak-view td.sheet-editable { background: #263449 !important; color: #f7d794 !important; }
  body[data-theme="dark"] .tabs { border-color: #2a3d5e !important; background: transparent !important; }
  body[data-theme="dark"] .tab { color: #9aabc4 !important; }
  body[data-theme="dark"] .tab.active { color: #9fc0ff !important; background: #162d55 !important; border-color: #4c82ee !important; }

  /* School dashboard/chart surfaces and labels; data colors stay unchanged. */
  body[data-theme="dark"] .school-metric-label,
  body[data-theme="dark"] .school-metric-body small,
  body[data-theme="dark"] .school-chart-panel p,
  body[data-theme="dark"] .school-chart-total,
  body[data-theme="dark"] .school-donut-legend > div,
  body[data-theme="dark"] .school-donut-legend small,
  body[data-theme="dark"] .school-chart-legend,
  body[data-theme="dark"] .school-chart-axis,
  body[data-theme="dark"] .school-trend-labels,
  body[data-theme="dark"] .school-compare-bar,
  body[data-theme="dark"] .school-chart-bar-group { color: #91a2bd !important; }
  body[data-theme="dark"] .school-metric-value,
  body[data-theme="dark"] .school-chart-panel h3,
  body[data-theme="dark"] .school-chart-title,
  body[data-theme="dark"] .school-donut-legend b,
  body[data-theme="dark"] .school-compare-bar strong,
  body[data-theme="dark"] .school-chart-bar-group strong { color: #eef4ff !important; }
  body[data-theme="dark"] .school-donut::after { background: #101b30 !important; }
  body[data-theme="dark"] .school-donut-labels span { color: #fff !important; text-shadow: 0 1px 3px #07101f, 0 0 2px rgba(255,255,255,.25) !important; }
  body[data-theme="dark"] .school-chart-grid-lines i { border-color: #253653 !important; }
  body[data-theme="dark"] .school-compare-bars,
  body[data-theme="dark"] .school-chart-bars { border-color: #4a638a !important; }
  body[data-theme="dark"] .school-trend-chart svg text { fill: #d5e0ef !important; }
  body[data-theme="dark"] .school-metric-card img { filter: saturate(1.05) brightness(.96); }

  /* Toasts, alerts and secondary panels. */
  body[data-theme="dark"] .toast { background: #172640 !important; border-color: #2a3d5e !important; color: #e5edf9 !important; }
  body[data-theme="dark"] .history-item { background: #101b30 !important; border-color: #2a3d5e !important; }
  body[data-theme="dark"] .history-item-title { color: #9fc0ff !important; }
  body[data-theme="dark"] .history-item-subtitle,
  body[data-theme="dark"] .history-item-meta,
  body[data-theme="dark"] .history-empty { color: #91a2bd !important; }
  body[data-theme="dark"] .history-close { color: #c8d5e8 !important; }
  body[data-theme="dark"] .history-close:hover { color: #fff !important; background: #1b3151 !important; }
  body[data-theme="dark"] .doc-hl { background: #162d55 !important; border-color: #315895 !important; color: #9fc0ff !important; }
  body[data-theme="dark"] .filter-label { color: #a9bad1 !important; }
  body[data-theme="dark"] .validation-toggle { color: #e5edf9 !important; }
  body[data-theme="dark"] .period-calendar-popover-head button,
  body[data-theme="dark"] .period-calendar-popover-foot button,
  body[data-theme="dark"] .period-calendar-grid button { background: #14213a !important; color: #d5e0ef !important; border-color: #2a3d5e !important; }
  body[data-theme="dark"] .period-calendar-grid button.in-range { background: #162d55 !important; color: #9fc0ff !important; }
  body[data-theme="dark"] .period-calendar-weekdays { color: #a9bad1 !important; }

  /* Keep user-approved image assets as supplied; only their containers are skinned. */
  body[data-theme="dark"] .sum-ico.asset-card-icon,
  body[data-theme="dark"] .pdf-icon.asset-card-icon,
  body[data-theme="dark"] .school-metric-icon,
  body[data-theme="dark"] .avatar-image { filter: none !important; }

  /* Keyboard focus is visible without changing dimensions. */
  body[data-theme="dark"] :focus-visible { outline: 2px solid #6ea4ff !important; outline-offset: 2px; }
}

/* ============================================================
   STEP 7 — FINAL SKIN PASS (CSS ONLY)
   Existing DOM, dimensions, positions, spacing, assets and behavior stay unchanged.
   ============================================================ */
@media screen {
  body[data-theme="dark"] .content {
    background: radial-gradient(ellipse at 78% 0%, rgba(32,87,190,.20), transparent 34%), linear-gradient(180deg, #070e1e 0%, #081327 56%, #050d1b 100%) !important;
  }
  body[data-theme="dark"] .topbar {
    background: linear-gradient(180deg, #0c1c3b 0%, #06132b 100%) !important;
    border-bottom-color: rgba(74,137,242,.48) !important;
    box-shadow: 0 5px 18px rgba(0,0,0,.42), inset 0 -1px 0 rgba(87,157,255,.28) !important;
  }
  body[data-theme="dark"] .sidebar {
    background: linear-gradient(180deg, #06193a 0%, #071c43 50%, #031128 100%) !important;
    border-right-color: rgba(43,101,190,.46) !important;
    box-shadow: 8px 0 28px rgba(0,0,0,.34), inset -1px 0 rgba(88,154,245,.22) !important;
  }
  body[data-theme="dark"] .side-logo,
  body[data-theme="dark"] .sidebar-settings { border-color: rgba(120,176,255,.22) !important; }
  body[data-theme="dark"] .logo-img { filter: drop-shadow(0 0 8px rgba(45,129,255,.35)); }
  body[data-theme="dark"] .side-logo-title { color: #f7fbff !important; }
  body[data-theme="dark"] .side-logo-sub,
  body[data-theme="dark"] .sidebar-label { color: #aec7ed !important; }
  body[data-theme="dark"] .nav-item { color: #dceaff !important; }
  body[data-theme="dark"] .nav-item:hover { background: linear-gradient(90deg, rgba(44,105,218,.30), rgba(27,63,125,.16)) !important; color: #fff !important; }
  body[data-theme="dark"] .nav-item.active,
  body[data-theme="dark"] .nav-item.active[data-module="bku"],
  body[data-theme="dark"] .nav-item.active[data-module="bhp"] {
    background: linear-gradient(135deg, #3c72ff 0%, #1453de 52%, #07329c 100%) !important;
    border-color: rgba(151,201,255,.76) !important;
    box-shadow: 0 0 20px rgba(29,108,255,.58), inset 0 1px 0 rgba(255,255,255,.34), inset 0 -2px rgba(0,0,0,.24) !important;
  }
  body[data-theme="dark"] .nav-item.active::before { background: #b9d6ff !important; }
  body[data-theme="dark"] .doc-ico-img,
  body[data-theme="dark"] .top-actions .icon-img-3d { filter: drop-shadow(0 0 8px rgba(45,129,255,.30)); }
  body[data-theme="dark"] .doc-text b,
  body[data-theme="dark"] .page-head h2,
  body[data-theme="dark"] #table-title { color: #f7fbff !important; }
  body[data-theme="dark"] .doc-text span,
  body[data-theme="dark"] .period { color: #8fa9ce !important; }
  body[data-theme="dark"] .search-pill { background: rgba(10,28,61,.82) !important; border-color: #2a5798 !important; box-shadow: inset 0 1px rgba(139,191,255,.16), 0 0 12px rgba(31,93,195,.14) !important; }
  body[data-theme="dark"] .icon-btn:hover,
  body[data-theme="dark"] .avatar-wrap:hover { background: transparent !important; color: #fff !important; }

  /* Shared 3D surfaces: visual treatment only. */
  body[data-theme="dark"] .school-info,
  body[data-theme="dark"] .sum-card,
  body[data-theme="dark"] .import-box,
  body[data-theme="dark"] .table-card,
  body[data-theme="dark"] .chart-card,
  body[data-theme="dark"] .doc-sheet,
  body[data-theme="dark"] .stat-box,
  body[data-theme="dark"] .filter-card,
  body[data-theme="dark"] .summary-card,
  body[data-theme="dark"] .settings-meta .sum-card,
  body[data-theme="dark"] .school-rekap-dashboard,
  body[data-theme="dark"] .school-metric-card,
  body[data-theme="dark"] .school-chart-panel,
  body[data-theme="dark"] .dl-card {
    background: linear-gradient(145deg, #14213a 0%, #101b30 100%) !important;
    border-color: #2a3d5e !important;
    color: #eef4ff !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.30), inset 0 1px 0 rgba(143,177,230,.10), inset 0 -2px 0 rgba(0,0,0,.20) !important;
  }
  body[data-theme="dark"] .school-info::after,
  body[data-theme="dark"] .table-card::before { box-shadow: inset 0 0 0 1px rgba(143,177,230,.10) !important; }
  body[data-theme="dark"] .si-label,
  body[data-theme="dark"] .sum-label,
  body[data-theme="dark"] .stat-label,
  body[data-theme="dark"] .import-hint,
  body[data-theme="dark"] .dl-desc,
  body[data-theme="dark"] .school-metric-label,
  body[data-theme="dark"] .school-chart-panel p,
  body[data-theme="dark"] .school-chart-total,
  body[data-theme="dark"] .school-donut-legend > div,
  body[data-theme="dark"] .school-donut-legend small,
  body[data-theme="dark"] .school-chart-legend,
  body[data-theme="dark"] .school-chart-axis,
  body[data-theme="dark"] .school-trend-labels { color: #91a2bd !important; }
  body[data-theme="dark"] .si-item b,
  body[data-theme="dark"] .sum-value,
  body[data-theme="dark"] .import-file,
  body[data-theme="dark"] .stat-value,
  body[data-theme="dark"] .school-metric-value,
  body[data-theme="dark"] .school-chart-panel h3,
  body[data-theme="dark"] .school-chart-title,
  body[data-theme="dark"] .school-donut-legend b { color: #eef4ff !important; }
  body[data-theme="dark"] .sum-card::before { background: linear-gradient(90deg, #3182ce 0%, #4299e1 52%, rgba(66,153,225,.08) 100%) !important; }
  body[data-theme="dark"] .pdf-icon { background: #16243b !important; }
  body[data-theme="dark"] .school-donut::after { background: #101b30 !important; }
  body[data-theme="dark"] .school-donut-labels span { color: #fff !important; text-shadow: 0 1px 3px #07101f, 0 0 2px rgba(255,255,255,.25) !important; }
  body[data-theme="dark"] .school-chart-grid-lines i { border-color: #253653 !important; }
  body[data-theme="dark"] .school-compare-bars,
  body[data-theme="dark"] .school-chart-bars { border-color: #4a638a !important; }
  body[data-theme="dark"] .school-trend-chart svg text { fill: #d5e0ef !important; }

  /* Toolbar, buttons, pagination and state. */
  body[data-theme="dark"] .table-toolbar,
  body[data-theme="dark"] .table-footer { background: linear-gradient(180deg, #172640, #101b30) !important; border-color: #253653 !important; }
  body[data-theme="dark"] .btn-blue,
  body[data-theme="dark"] .btn-review-pdf { box-shadow: 0 5px 12px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.24) !important; }
  body[data-theme="dark"] .btn-green { box-shadow: 0 5px 12px rgba(24,96,63,.38), inset 0 1px 0 rgba(255,255,255,.24) !important; }
  body[data-theme="dark"] .btn-blue { background: linear-gradient(180deg, #3e8bff, #1255d5) !important; }
  body[data-theme="dark"] .btn-green { background: linear-gradient(180deg, #31c779, #11884f) !important; }
  body[data-theme="dark"] .btn-outline,
  body[data-theme="dark"] .btn-ghost,
  body[data-theme="dark"] .page-btn { background: #14213a !important; border-color: #4f83e8 !important; color: #9fc0ff !important; box-shadow: 0 4px 10px rgba(0,0,0,.22), inset 0 1px 0 rgba(143,177,230,.10) !important; }
  body[data-theme="dark"] .btn-outline:hover,
  body[data-theme="dark"] .btn-ghost:hover,
  body[data-theme="dark"] .page-btn:hover:not(:disabled),
  body[data-theme="dark"] .btn-del:hover { background: #1b3151 !important; color: #dce9ff !important; }
  body[data-theme="dark"] .btn-blue:hover,
  body[data-theme="dark"] .btn-green:hover,
  body[data-theme="dark"] .btn-review-pdf:hover,
  body[data-theme="dark"] .btn-viled-file:hover { filter: brightness(1.10) saturate(1.05) !important; }
  body[data-theme="dark"] .btn-viled-file,
  body[data-theme="dark"] .btn-del { color: #ff9ca8 !important; }
  body[data-theme="dark"] .page-btn.active { background: linear-gradient(135deg, #4e8cff, #1143cd) !important; border-color: #6d96ff !important; color: #fff !important; box-shadow: 0 0 12px rgba(50,128,255,.48), inset 0 1px rgba(255,255,255,.32) !important; }
  body[data-theme="dark"] .row-count { background: #1d2b43 !important; border-color: #2a3d5e !important; color: #a9bad1 !important; }
  body[data-theme="dark"] .link-add { color: #9fc0ff !important; }

  /* All data/viewer/document tables. */
  body[data-theme="dark"] thead th,
  body[data-theme="dark"] table.editable thead th,
  body[data-theme="dark"] #view-wrap td.vh,
  body[data-theme="dark"] #view-wrap .doc-table th {
    background: linear-gradient(180deg, #4778f9, #033dde) !important;
    color: #fff !important;
    border-color: #2458bd !important;
  }
  body[data-theme="dark"] thead th:hover,
  body[data-theme="dark"] #view-wrap td.vh:hover { background: linear-gradient(180deg, #5d8cff, #1648e8) !important; }
  body[data-theme="dark"] tbody td,
  body[data-theme="dark"] table.editable td,
  body[data-theme="dark"] #view-wrap td,
  body[data-theme="dark"] #view-wrap .doc-table td { background: #101b30 !important; color: #d5e0ef !important; border-color: #1f2d46 !important; }
  body[data-theme="dark"] tbody tr:nth-child(even) td,
  body[data-theme="dark"] table.editable tbody tr:nth-child(even) td,
  body[data-theme="dark"] #view-wrap tbody tr:nth-child(even) td:not(.vh) { background: #0d1729 !important; }
  body[data-theme="dark"] tbody tr:hover td,
  body[data-theme="dark"] #view-wrap td:hover,
  body[data-theme="dark"] #view-wrap .doc-table td:hover { background: #162d55 !important; }
  body[data-theme="dark"] td[contenteditable="true"]:hover { background: #263449 !important; }
  body[data-theme="dark"] td[contenteditable="true"]:focus,
  body[data-theme="dark"] table.editable td[contenteditable]:focus,
  body[data-theme="dark"] #view-wrap.pajak-view td.sheet-editable:focus { background: #35445a !important; color: #eef4ff !important; }
  body[data-theme="dark"] #data-table tbody tr.arkas-row-group1 td { background: #5b263f !important; color: #ffe5f0 !important; }
  body[data-theme="dark"] #data-table tbody tr.arkas-row-group2 td { background: #174b42 !important; color: #d8ffed !important; }
  body[data-theme="dark"] #data-table tbody tr.arkas-row-group3 td { background: #5b4b1d !important; color: #fff4c2 !important; }
  body[data-theme="dark"] #view-wrap tr.hdr-title td { background: #14213a !important; color: #eaf2ff !important; }
  body[data-theme="dark"] #view-wrap.pajak-view td.sheet-editable { background: #263449 !important; color: #f7d794 !important; }

  /* Inputs, menus, modals, documents and download cards. */
  body[data-theme="dark"] .filter-select,
  body[data-theme="dark"] .search-input,
  body[data-theme="dark"] input:not(.verification-container input),
  body[data-theme="dark"] select,
  body[data-theme="dark"] textarea { background: #101b30 !important; border-color: #2a3d5e !important; color: #e5edf9 !important; }
  body[data-theme="dark"] .filter-select:focus,
  body[data-theme="dark"] .search-input:focus,
  body[data-theme="dark"] input:not(.verification-container input):focus,
  body[data-theme="dark"] select:focus,
  body[data-theme="dark"] textarea:focus { background: #35445a !important; border-color: #4f83e8 !important; box-shadow: 0 0 0 3px rgba(79,131,232,.18) !important; }
  body[data-theme="dark"] .account-menu,
  body[data-theme="dark"] .theme-menu,
  body[data-theme="dark"] .validation-menu,
  body[data-theme="dark"] .period-calendar-card,
  body[data-theme="dark"] .period-calendar-popover,
  body[data-theme="dark"] .period-calendar-picker-menu,
  body[data-theme="dark"] .history-modal-card { background: linear-gradient(145deg, #14213a, #101b30) !important; border-color: #2a3d5e !important; color: #e5edf9 !important; box-shadow: 0 16px 34px rgba(0,0,0,.38), inset 0 1px 0 rgba(143,177,230,.10) !important; }
  body[data-theme="dark"] .account-menu-item:hover,
  body[data-theme="dark"] .account-menu-item[aria-expanded="true"],
  body[data-theme="dark"] .theme-menu-item:hover,
  body[data-theme="dark"] .theme-menu-item.active,
  body[data-theme="dark"] .validation-menu-item:hover { background: #1c3152 !important; }
  body[data-theme="dark"] .doc-hl { background: #162d55 !important; border-color: #315895 !important; color: #9fc0ff !important; }
  body[data-theme="dark"] .dl-desc { color: #91a2bd !important; }
  body[data-theme="dark"] .toast { background: #172640 !important; border-color: #2a3d5e !important; color: #e5edf9 !important; }
  body[data-theme="dark"] .btn-del { color: #ff7185 !important; }
  body[data-theme="dark"] :focus-visible { outline: 2px solid #6ea4ff !important; outline-offset: 2px; }
}

/* ============================================================
   STEP 7 — ACCOUNT SETTINGS SKIN (CSS ONLY)
   Keeps the existing account-settings DOM, dimensions and controls.
   ============================================================ */
@media screen {
  body[data-theme="dark"] .account-settings-card,
  body[data-theme="dark"] .account-settings-section {
    background: linear-gradient(145deg, #14213a 0%, #101b30 100%) !important;
    border-color: #2a3d5e !important;
    color: #eef4ff !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.30), inset 0 1px 0 rgba(143,177,230,.10), inset 0 -2px 0 rgba(0,0,0,.20) !important;
  }
  body[data-theme="dark"] .account-settings-heading h2,
  body[data-theme="dark"] .account-settings-section-head h3 { color: #f7fbff !important; }
  body[data-theme="dark"] .account-settings-heading p,
  body[data-theme="dark"] .account-settings-section-head p { color: #91a2bd !important; }
  body[data-theme="dark"] .account-settings-icon,
  body[data-theme="dark"] .account-settings-mini-icon,
  body[data-theme="dark"] .account-google-icon {
    background: linear-gradient(145deg, #17376e 0%, #0d2449 100%) !important;
    border-color: #3d70ba !important;
    color: #a9d4ff !important;
    box-shadow: 0 8px 16px rgba(0,0,0,.28), inset 0 1px 0 rgba(183,220,255,.18) !important;
  }
  body[data-theme="dark"] .account-field label { color: #d5e0ef !important; }
  body[data-theme="dark"] .account-password-wrap input {
    background: #101b30 !important;
    border-color: #2a3d5e !important;
    color: #e5edf9 !important;
    box-shadow: inset 0 2px 5px rgba(0,0,0,.24), 0 2px 6px rgba(0,0,0,.16) !important;
  }
  body[data-theme="dark"] .account-password-wrap input::placeholder { color: #7184a1 !important; }
  body[data-theme="dark"] .account-password-wrap input:focus {
    background: #35445a !important;
    border-color: #4f83e8 !important;
    box-shadow: 0 0 0 3px rgba(79,131,232,.18), inset 0 1px 0 rgba(143,177,230,.08) !important;
  }
  body[data-theme="dark"] .account-password-toggle { color: #91a2bd !important; }
  body[data-theme="dark"] .account-password-toggle:hover { color: #dce9ff !important; background: #1c3152 !important; }
  body[data-theme="dark"] .account-settings-divider { background: #253653 !important; }
  body[data-theme="dark"] .account-green-button,
  body[data-theme="dark"] .account-google-button {
    box-shadow: 0 5px 12px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.24), inset 0 -2px 0 rgba(0,0,0,.18) !important;
  }
  body[data-theme="dark"] .account-green-button:hover,
  body[data-theme="dark"] .account-google-button:hover { filter: brightness(1.10) saturate(1.05) !important; }
  body[data-theme="dark"] .account-google-status { background: #123a35 !important; border-color: #28785e !important; color: #8ce3bb !important; }
  body[data-theme="dark"] .google-glyph { background: #eef4ff !important; }
  body[data-theme="dark"] .account-password-wrap input::placeholder { color: #7184a1 !important; opacity: 1 !important; }
  body[data-theme="dark"] .account-password-wrap input:-webkit-autofill,
  body[data-theme="dark"] .account-password-wrap input:-webkit-autofill:hover,
  body[data-theme="dark"] .account-password-wrap input:-webkit-autofill:focus {
    -webkit-text-fill-color: #e5edf9 !important;
    caret-color: #e5edf9 !important;
    -webkit-box-shadow: 0 0 0 1000px #101b30 inset !important;
    box-shadow: 0 0 0 1000px #101b30 inset !important;
    border-color: #2a3d5e !important;
  }
  body[data-theme="dark"] #admin-account-message {
    background: #172640 !important;
    border-color: #2a3d5e !important;
    color: #d5e0ef !important;
  }
  /* Keep supplied artwork in its original colors. No blend/filter: those rules
     made the numbered assets black on the dark skin. */
  body[data-theme="dark"] .logo-img,
  body[data-theme="dark"] .avatar-image,
  body[data-theme="dark"] .password-icon-asset,
  body[data-theme="dark"] .numbered-icon {
    mix-blend-mode: normal !important;
    filter: none !important;
  }
  /* Remove the old blue icon tiles; the supplied artwork is the icon itself. */
  body[data-theme="dark"] .dl-ico,
  body[data-theme="dark"] .account-settings-icon,
  body[data-theme="dark"] .account-settings-mini-icon,
  body[data-theme="dark"] .account-google-icon {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  body[data-theme="dark"] .dl-ico::before,
  body[data-theme="dark"] .dl-ico::after { display: none !important; }
  .password-icon-asset,
  .numbered-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
  }
  .dl-ico .numbered-icon { width: 52px; height: 52px; }
  .account-settings-icon .numbered-icon { width: 42px; height: 42px; }
  .account-settings-mini-icon .numbered-icon,
  .account-google-icon .numbered-icon { width: 34px; height: 34px; }
}

/* Numbered icon containers: transparent in every theme and interaction state. */
.dl-ico,
.dl-ico:hover,
.dl-ico:focus,
.dl-ico:focus-within,
.dl-ico:active,
.account-settings-icon,
.account-settings-icon:hover,
.account-settings-mini-icon,
.account-settings-mini-icon:hover,
.account-google-icon,
.account-google-icon:hover {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
.dl-ico::before,
.dl-ico::after,
.account-settings-icon::before,
.account-settings-icon::after,
.account-settings-mini-icon::before,
.account-settings-mini-icon::after,
.account-google-icon::before,
.account-google-icon::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}
/* The topbar controls must never reveal a hover/focus tile around the artwork. */
.top-actions .icon-btn,
.top-actions .icon-btn:hover,
.top-actions .icon-btn:focus,
.top-actions .icon-btn:focus-visible,
.top-actions .icon-btn:active,
.top-actions .avatar-wrap,
.top-actions .avatar-wrap:hover,
.top-actions .avatar-wrap:focus,
.top-actions .avatar-wrap:focus-visible,
.top-actions .avatar-wrap:active {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
.top-actions .icon-btn::before,
.top-actions .icon-btn::after,
.top-actions .avatar-wrap::before,
.top-actions .avatar-wrap::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* ============================================================
   STEP 7 — GLASS + AMBIENT PASS (CSS ONLY, STAGE 1)
   Visual material only. Existing geometry, DOM and behavior remain unchanged.
   ============================================================ */
@media screen {
  body[data-theme="dark"] {
    background:
      radial-gradient(ellipse at 8% 18%, rgba(53, 123, 255, .20) 0%, transparent 32%),
      radial-gradient(ellipse at 92% 22%, rgba(112, 46, 196, .18) 0%, transparent 28%),
      radial-gradient(ellipse at 58% 92%, rgba(18, 126, 96, .15) 0%, transparent 30%),
      radial-gradient(ellipse at 74% 2%, rgba(172, 128, 48, .12) 0%, transparent 25%),
      #050d20 !important;
  }
  body[data-theme="dark"] .app-shell,
  body[data-theme="dark"] .main-col,
  body[data-theme="dark"] .content {
    background:
      radial-gradient(ellipse at 12% 10%, rgba(34, 111, 255, .16) 0%, transparent 30%),
      radial-gradient(ellipse at 88% 18%, rgba(109, 39, 174, .13) 0%, transparent 25%),
      radial-gradient(ellipse at 52% 96%, rgba(19, 109, 89, .12) 0%, transparent 28%),
      linear-gradient(180deg, rgba(8, 18, 43, .92), rgba(3, 12, 29, .96)) !important;
  }
  body[data-theme="dark"] .topbar {
    background: linear-gradient(180deg, rgba(25, 48, 91, .78), rgba(7, 20, 47, .72)) !important;
    border-color: rgba(112, 171, 255, .36) !important;
    -webkit-backdrop-filter: blur(16px) saturate(135%) !important;
    backdrop-filter: blur(16px) saturate(135%) !important;
  }
  body[data-theme="dark"] .sidebar {
    background: linear-gradient(180deg, rgba(19, 48, 91, .82), rgba(4, 20, 50, .88)) !important;
    -webkit-backdrop-filter: blur(14px) saturate(125%) !important;
    backdrop-filter: blur(14px) saturate(125%) !important;
  }
  body[data-theme="dark"] .school-info,
  body[data-theme="dark"] .sum-card,
  body[data-theme="dark"] .import-box,
  body[data-theme="dark"] .table-card,
  body[data-theme="dark"] .chart-card,
  body[data-theme="dark"] .doc-sheet,
  body[data-theme="dark"] .stat-box,
  body[data-theme="dark"] .filter-card,
  body[data-theme="dark"] .summary-card,
  body[data-theme="dark"] .settings-meta .sum-card,
  body[data-theme="dark"] .school-rekap-dashboard,
  body[data-theme="dark"] .school-metric-card,
  body[data-theme="dark"] .school-chart-panel,
  body[data-theme="dark"] .dl-card,
  body[data-theme="dark"] .account-settings-card,
  body[data-theme="dark"] .account-settings-section,
  body[data-theme="dark"] .account-menu,
  body[data-theme="dark"] .theme-menu,
  body[data-theme="dark"] .validation-menu,
  body[data-theme="dark"] .history-modal-card,
  body[data-theme="dark"] .period-calendar-card,
  body[data-theme="dark"] .period-calendar-popover {
    background: linear-gradient(145deg, rgba(30, 55, 98, .70), rgba(8, 23, 52, .72)) !important;
    border-color: rgba(111, 169, 255, .34) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(210, 232, 255, .16), inset 0 -2px 0 rgba(0, 0, 0, .22), 0 0 22px rgba(39, 110, 225, .10) !important;
    -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
    backdrop-filter: blur(18px) saturate(135%) !important;
  }
  body[data-theme="dark"] .table-toolbar,
  body[data-theme="dark"] .table-footer {
    background: linear-gradient(180deg, rgba(28, 56, 104, .72), rgba(8, 25, 57, .76)) !important;
    border-color: rgba(111, 169, 255, .30) !important;
    box-shadow: inset 0 1px 0 rgba(210, 232, 255, .12), inset 0 -1px 0 rgba(0, 0, 0, .22) !important;
    -webkit-backdrop-filter: blur(14px) saturate(125%) !important;
    backdrop-filter: blur(14px) saturate(125%) !important;
  }
  /* Stage 2 depth: layered edge, semantic color, and pressed-state material. */
  body[data-theme="dark"] .school-metric-card,
  body[data-theme="dark"] .school-chart-panel,
  body[data-theme="dark"] .chart-card,
  body[data-theme="dark"] .doc-sheet,
  body[data-theme="dark"] .account-settings-section {
    box-shadow: 0 14px 34px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(226, 241, 255, .18), inset 0 -3px 0 rgba(0, 0, 0, .26), 0 0 24px rgba(37, 113, 235, .12) !important;
  }
  body[data-theme="dark"] .school-metric-card::before,
  body[data-theme="dark"] .school-chart-panel::before,
  body[data-theme="dark"] .chart-card::before,
  body[data-theme="dark"] .doc-sheet::before,
  body[data-theme="dark"] .account-settings-section::before {
    background: linear-gradient(90deg, rgba(78, 163, 255, .42), rgba(78, 163, 255, .04) 68%, transparent) !important;
    opacity: .72 !important;
  }
  body[data-theme="dark"] thead th,
  body[data-theme="dark"] table.editable thead th,
  body[data-theme="dark"] #view-wrap td.vh,
  body[data-theme="dark"] #view-wrap .doc-table th {
    background: linear-gradient(180deg, rgba(82, 139, 255, .94), rgba(5, 48, 172, .96)) !important;
    box-shadow: inset 0 1px 0 rgba(231, 243, 255, .28), inset 0 -2px 0 rgba(0, 20, 88, .28) !important;
  }
  body[data-theme="dark"] tbody td,
  body[data-theme="dark"] table.editable td,
  body[data-theme="dark"] #view-wrap td,
  body[data-theme="dark"] #view-wrap .doc-table td {
    background: rgba(12, 29, 63, .72) !important;
    box-shadow: inset 0 1px 0 rgba(142, 190, 255, .035) !important;
  }
  body[data-theme="dark"] tbody tr:nth-child(even) td,
  body[data-theme="dark"] table.editable tbody tr:nth-child(even) td,
  body[data-theme="dark"] #view-wrap tbody tr:nth-child(even) td:not(.vh) {
    background: rgba(7, 21, 48, .78) !important;
  }
  body[data-theme="dark"] .school-chart-grid-lines i { border-color: rgba(120, 169, 235, .28) !important; }
  body[data-theme="dark"] .school-chart-panel svg path,
  body[data-theme="dark"] .school-trend-chart svg path { filter: drop-shadow(0 0 4px rgba(70, 159, 255, .28)); }
  body[data-theme="dark"] .btn-blue,
  body[data-theme="dark"] .btn-review-pdf { box-shadow: 0 7px 16px rgba(0, 36, 128, .42), inset 0 1px 0 rgba(239, 248, 255, .34), inset 0 -2px 0 rgba(0, 28, 112, .28) !important; }
  body[data-theme="dark"] .btn-green { box-shadow: 0 7px 16px rgba(0, 94, 58, .38), inset 0 1px 0 rgba(239, 255, 247, .32), inset 0 -2px 0 rgba(0, 70, 42, .28) !important; }
  body[data-theme="dark"] .btn-blue:active,
  body[data-theme="dark"] .btn-green:active,
  body[data-theme="dark"] .btn-review-pdf:active,
  body[data-theme="dark"] .btn-viled-file:active,
  body[data-theme="dark"] .page-btn:active {
    box-shadow: 0 2px 6px rgba(0, 0, 0, .42), inset 0 2px 0 rgba(0, 0, 0, .24) !important;
  }
  body[data-theme="dark"] .account-password-wrap input:-webkit-autofill,
  body[data-theme="dark"] .account-password-wrap input:-webkit-autofill:hover,
  body[data-theme="dark"] .account-password-wrap input:-webkit-autofill:focus {
    -webkit-text-fill-color: #e5edf9 !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(12, 29, 63, .96) inset !important;
    box-shadow: 0 0 0 1000px rgba(12, 29, 63, .96) inset !important;
    caret-color: #e5edf9 !important;
  }
  /* Remove the last light-theme leak from the verification surface/modal. */
  body[data-theme="dark"] .verification-container,
  body[data-theme="dark"] .verification-container .verif-col,
  body[data-theme="dark"] .verification-container .verif-card {
    background: linear-gradient(145deg, rgba(30, 55, 98, .70), rgba(8, 23, 52, .78)) !important;
    border-color: rgba(111, 169, 255, .34) !important;
    color: #e5edf9 !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(210, 232, 255, .14), inset 0 -2px 0 rgba(0, 0, 0, .22) !important;
    -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
    backdrop-filter: blur(18px) saturate(135%) !important;
  }
  body[data-theme="dark"] .verification-container input,
  body[data-theme="dark"] .verification-container input[readonly] {
    background: rgba(12, 29, 63, .86) !important;
    border-color: #416aa4 !important;
    color: #e5edf9 !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .30), 0 0 0 1px rgba(111, 169, 255, .08) !important;
  }
  body[data-theme="dark"] .verification-container input:focus {
    background: rgba(25, 55, 102, .92) !important;
    border-color: #6ea4ff !important;
    color: #f3f8ff !important;
    box-shadow: 0 0 0 3px rgba(79, 131, 232, .20), inset 0 1px 0 rgba(210, 232, 255, .12) !important;
  }
  body[data-theme="dark"] .verification-container .form-group label,
  body[data-theme="dark"] .verification-container .verif-section-title,
  body[data-theme="dark"] .verification-container .verif-data-title { color: #eef4ff !important; }
  body[data-theme="dark"] .verification-container .verif-section-sub,
  body[data-theme="dark"] .verification-container .verif-title-block p,
  body[data-theme="dark"] .verification-container .verif-note-card p { color: #91a2bd !important; }
  body[data-theme="dark"] .verification-container .info-alert-inline,
  body[data-theme="dark"] .verification-container .verif-note-card {
    background: rgba(18, 50, 92, .68) !important;
    border-color: rgba(111, 169, 255, .30) !important;
    color: #cfe1fb !important;
  }
}

/* Stage 3: colored light remains visible through the glass layers. */
@media screen {
  body[data-theme="dark"] .app-shell {
    background:
      radial-gradient(ellipse at 6% 34%, rgba(38, 111, 255, .28) 0%, transparent 28%),
      radial-gradient(ellipse at 96% 32%, rgba(142, 55, 207, .24) 0%, transparent 25%),
      radial-gradient(ellipse at 42% 96%, rgba(16, 143, 112, .20) 0%, transparent 27%),
      radial-gradient(ellipse at 70% 0%, rgba(185, 141, 60, .16) 0%, transparent 22%),
      #050d20 !important;
  }
  body[data-theme="dark"] .main-col,
  body[data-theme="dark"] .content,
  body[data-theme="dark"] .sidebar {
    background:
      radial-gradient(ellipse at 14% 20%, rgba(44, 121, 255, .20) 0%, transparent 26%),
      radial-gradient(ellipse at 86% 12%, rgba(124, 45, 193, .18) 0%, transparent 22%),
      radial-gradient(ellipse at 58% 88%, rgba(17, 132, 103, .14) 0%, transparent 24%),
      linear-gradient(180deg, rgba(6, 16, 39, .78), rgba(2, 10, 26, .84)) !important;
    background-attachment: fixed !important;
    background-size: 160% 160% !important;
  }
  body[data-theme="dark"] .school-info,
  body[data-theme="dark"] .sum-card,
  body[data-theme="dark"] .import-box,
  body[data-theme="dark"] .table-card,
  body[data-theme="dark"] .chart-card,
  body[data-theme="dark"] .doc-sheet,
  body[data-theme="dark"] .stat-box,
  body[data-theme="dark"] .filter-card,
  body[data-theme="dark"] .summary-card,
  body[data-theme="dark"] .settings-meta .sum-card,
  body[data-theme="dark"] .school-rekap-dashboard,
  body[data-theme="dark"] .school-metric-card,
  body[data-theme="dark"] .school-chart-panel,
  body[data-theme="dark"] .dl-card,
  body[data-theme="dark"] .account-settings-card,
  body[data-theme="dark"] .account-settings-section,
  body[data-theme="dark"] .account-menu,
  body[data-theme="dark"] .theme-menu,
  body[data-theme="dark"] .validation-menu,
  body[data-theme="dark"] .history-modal-card,
  body[data-theme="dark"] .period-calendar-card,
  body[data-theme="dark"] .period-calendar-popover {
    background: linear-gradient(145deg, rgba(31, 62, 111, .56), rgba(7, 24, 57, .58)) !important;
    border-color: rgba(126, 183, 255, .40) !important;
    -webkit-backdrop-filter: blur(22px) saturate(145%) !important;
    backdrop-filter: blur(22px) saturate(145%) !important;
    box-shadow: 0 20px 46px rgba(0, 0, 0, .44), inset 0 1px 0 rgba(231, 244, 255, .20), inset 0 -3px 0 rgba(0, 0, 0, .24), 0 0 28px rgba(44, 126, 255, .14) !important;
  }
}


/* STEP 7 — ADMIN PERIOD POPUP + CALENDAR FINISH (CSS ONLY)
   Calendar data/logic stay unchanged. Sunday is marked red by grid column;
   no holiday dates are invented because the DOM exposes no holiday dataset. */
@media screen {
  body[data-theme="dark"] .admin-period-button {
    color: #dbeaff !important;
    border-color: transparent !important;
  }
  body[data-theme="dark"] .admin-period-button:hover,
  body[data-theme="dark"] .admin-period-button[aria-expanded="true"] {
    background: rgba(55, 125, 238, .18) !important;
    color: #ffffff !important;
  }
  body[data-theme="dark"] .period-calendar-card,
  body[data-theme="dark"] .period-calendar-popover {
    background:
      radial-gradient(ellipse at 12% 0%, rgba(62, 137, 255, .20), transparent 42%),
      linear-gradient(145deg, #193d78 0%, #0b234d 58%, #071936 100%) !important;
    border: 1px solid rgba(112, 177, 255, .52) !important;
    color: #edf5ff !important;
    box-shadow: 0 20px 44px rgba(0, 0, 0, .50), inset 0 1px 0 rgba(225, 241, 255, .22), inset 0 -3px 0 rgba(0, 0, 0, .26), 0 0 25px rgba(35, 111, 239, .20) !important;
  }
  body[data-theme="dark"] .period-calendar-head,
  body[data-theme="dark"] .period-calendar-popover-head {
    border-color: rgba(111, 169, 255, .30) !important;
  }
  body[data-theme="dark"] .period-calendar-head h3,
  body[data-theme="dark"] .period-calendar-picker {
    color: #f5f9ff !important;
  }
  body[data-theme="dark"] .period-calendar-head p,
  body[data-theme="dark"] .period-calendar-weekdays {
    color: #a9c2e8 !important;
  }
  body[data-theme="dark"] .period-calendar-popover-head button {
    background: rgba(18, 49, 99, .82) !important;
    color: #e6f1ff !important;
    box-shadow: inset 0 1px 0 rgba(206, 231, 255, .16), 0 5px 12px rgba(0, 0, 0, .24) !important;
  }
  body[data-theme="dark"] .period-calendar-picker-chevron {
    color: #9fc4f5 !important;
  }
  body[data-theme="dark"] .period-date-field {
    background: rgba(7, 23, 53, .88) !important;
    border-color: rgba(106, 163, 241, .46) !important;
    color: #edf5ff !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .28), 0 0 0 1px rgba(111, 169, 255, .06) !important;
  }
  body[data-theme="dark"] .period-date-field label,
  body[data-theme="dark"] .period-date-manual,
  body[data-theme="dark"] .period-date-manual::placeholder {
    color: #c5d8f2 !important;
  }
  body[data-theme="dark"] .period-date-trigger img {
    background: rgba(28, 76, 145, .78) !important;
    box-shadow: inset 0 1px 0 rgba(220, 240, 255, .18), 0 3px 8px rgba(0, 0, 0, .26) !important;
  }
  body[data-theme="dark"] .period-calendar-preview {
    color: #9bc7ff !important;
  }
  body[data-theme="dark"] .period-calendar-picker-menu {
    background: linear-gradient(145deg, #193d78, #0b234d) !important;
    border-color: rgba(112, 177, 255, .52) !important;
    box-shadow: 0 15px 32px rgba(0, 0, 0, .46), inset 0 1px 0 rgba(225, 241, 255, .18) !important;
  }
  body[data-theme="dark"] .period-calendar-picker-current-year {
    background: rgba(46, 101, 186, .34) !important;
    border-color: rgba(111, 169, 255, .25) !important;
    color: #f0f6ff !important;
  }
  body[data-theme="dark"] .period-calendar-picker-months button,
  body[data-theme="dark"] .period-calendar-picker-years button {
    color: #d7e7fb !important;
  }
  body[data-theme="dark"] .period-calendar-picker-months button:hover,
  body[data-theme="dark"] .period-calendar-picker-years button:hover {
    background: rgba(66, 137, 239, .28) !important;
  }
  body[data-theme="dark"] .period-calendar-grid button {
    background: rgba(18, 49, 99, .86) !important;
    border: 1px solid rgba(106, 163, 241, .18) !important;
    color: #e6f1ff !important;
    box-shadow: inset 0 1px 0 rgba(218, 237, 255, .08), 0 3px 8px rgba(0, 0, 0, .20) !important;
  }
  body[data-theme="dark"] .period-calendar-grid button.muted {
    background: rgba(8, 27, 59, .54) !important;
    color: #6684ad !important;
    border-color: transparent !important;
  }
  body[data-theme="dark"] .period-calendar-grid button.in-range {
    background: rgba(47, 111, 211, .52) !important;
    color: #cfe5ff !important;
  }
  /* Sunday = red date; selected endpoint remains blue/white. */
  body[data-theme="dark"] .period-calendar-grid button:nth-child(7n + 1):not(.selected) {
    color: #ff7185 !important;
  }
  body[data-theme="dark"] .period-calendar-grid button:nth-child(7n + 1).muted:not(.selected) {
    color: #a55466 !important;
  }
  body[data-theme="dark"] .period-calendar-grid button:nth-child(7n):not(.selected) {
    color: #93c5fd !important;
  }
  body[data-theme="dark"] .period-calendar-grid button.selected {
    color: #ffffff !important;
    background: linear-gradient(145deg, #4f9bff, #1555d4) !important;
    border-color: rgba(176, 218, 255, .70) !important;
  }
  body[data-theme="dark"] .period-calendar-grid button:hover:not(.selected) {
    background: rgba(66, 137, 239, .45) !important;
    border-color: rgba(150, 205, 255, .52) !important;
  }
}


/* STEP 8 — SCHOOL IDENTITY CARD LAYOUT (REFERENCE MATCH)
   Visual/layout treatment only; existing data ids and render bindings remain intact. */
@media screen {
  body[data-theme="dark"] #school-info {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(220px, .82fr) !important;
    grid-template-areas:
      "identity location"
      "address quarter" !important;
    column-gap: 28px !important;
    row-gap: 14px !important;
    align-content: center !important;
    min-height: 142px !important;
    padding: 22px 28px !important;
    background:
      radial-gradient(ellipse at 8% 8%, rgba(40, 126, 255, .24), transparent 42%),
      linear-gradient(145deg, #173b78 0%, #0c2859 58%, #081b3d 100%) !important;
    border: 1px solid rgba(117, 181, 255, .48) !important;
    border-radius: 14px !important;
    box-shadow: 0 16px 34px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(219, 239, 255, .18), inset 0 -3px 0 rgba(0, 0, 0, .22), 0 0 24px rgba(39, 117, 239, .14) !important;
  }
  body[data-theme="dark"] #school-info .si-identity-block { grid-area: identity; align-self: center; margin-left: 118px; min-width: 0; }
  body[data-theme="dark"] #school-info .si-name-item,
  body[data-theme="dark"] #school-info .si-npsn-item { margin-left: 0; }
  body[data-theme="dark"] #school-info .si-name-item { margin-bottom: 10px; }
  body[data-theme="dark"] #school-info .si-address-item { grid-area: address; margin-left: 118px; }
  body[data-theme="dark"] #school-info .si-location-item { grid-area: location; }
  body[data-theme="dark"] #school-info .si-quarter-item { grid-area: quarter; }
  body[data-theme="dark"] #school-info .si-location-item,
  body[data-theme="dark"] #school-info .si-quarter-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    padding-left: 20px !important;
    border-left: 1px solid rgba(124, 181, 255, .30) !important;
  }
  body[data-theme="dark"] #school-info .si-meta-icon {
    width: 34px !important;
    height: 34px !important;
    object-fit: contain !important;
    flex: 0 0 34px !important;
    filter: drop-shadow(0 0 8px rgba(42, 136, 255, .34)) !important;
  }
  body[data-theme="dark"] #school-info .si-meta-copy { min-width: 0; }
  body[data-theme="dark"] #school-info .si-label,
  body[data-theme="dark"] #school-info .si-secondary-label {
    display: block !important;
    margin-bottom: 4px !important;
    color: #a8c2e8 !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    letter-spacing: .045em !important;
    text-transform: uppercase !important;
  }
  body[data-theme="dark"] #school-info .si-item b {
    display: block !important;
    color: #f4f8ff !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
  }
  body[data-theme="dark"] #school-info .si-name-item b {
    color: #f8fbff !important;
    font-size: 17px !important;
    line-height: 1.18 !important;
    letter-spacing: .01em !important;
    text-transform: uppercase !important;
  }
  body[data-theme="dark"] #school-info .si-npsn-item b {
    color: #cde2ff !important;
    font-size: 13px !important;
  }
  body[data-theme="dark"] #school-info .si-address-item {
    gap: 5px !important;
  }
  body[data-theme="dark"] #school-info .si-address-item > b,
  body[data-theme="dark"] #school-info .si-secondary-value b {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #d9e9ff !important;
  }
  body[data-theme="dark"] #school-info .si-secondary-value {
    display: block !important;
    margin-top: 8px !important;
  }
  body[data-theme="dark"] #school-info .si-secondary-label {
    display: inline-block !important;
    margin-right: 8px !important;
    margin-bottom: 0 !important;
    font-size: 9px !important;
  }
}

@media (max-width: 760px) {
  body[data-theme="dark"] #school-info {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "identity" "address" "location" "quarter" !important;
    gap: 14px !important;
    min-height: 0 !important;
    padding: 18px !important;
  }
  body[data-theme="dark"] #school-info .si-identity-block,
  body[data-theme="dark"] #school-info .si-address-item { margin-left: 0 !important; }
  body[data-theme="dark"] #school-info .si-location-item,
  body[data-theme="dark"] #school-info .si-quarter-item { padding-left: 0 !important; border-left: 0 !important; }
}


/* STEP 8 CORRECTION — preserve existing card dimensions; text placement only. */
@media screen {
  body[data-theme="dark"] #school-info {
    min-height: 0 !important;
    padding: 18px 20px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas: none !important;
    column-gap: 26px !important;
    row-gap: 12px !important;
    align-content: initial !important;
  }
  body[data-theme="dark"] #school-info .si-identity-block,
  body[data-theme="dark"] #school-info .si-address-item,
  body[data-theme="dark"] #school-info .si-location-item,
  body[data-theme="dark"] #school-info .si-quarter-item {
    grid-area: auto !important;
    margin-left: 0 !important;
  }
  body[data-theme="dark"] #school-info .si-identity-block {
    display: contents !important;
  }
  body[data-theme="dark"] #school-info .si-name-item { grid-column: 1; grid-row: 1; margin-bottom: 0 !important; }
  body[data-theme="dark"] #school-info .si-npsn-item { grid-column: 1; grid-row: 2; }
  body[data-theme="dark"] #school-info .si-address-item { grid-column: 1; grid-row: 3; }
  body[data-theme="dark"] #school-info .si-location-item { grid-column: 2; grid-row: 1 / span 2; }
  body[data-theme="dark"] #school-info .si-quarter-item { grid-column: 2; grid-row: 3; }
  body[data-theme="dark"] #school-info .si-location-item,
  body[data-theme="dark"] #school-info .si-quarter-item {
    padding-left: 14px !important;
  }
  body[data-theme="dark"] #school-info .si-name-item b { font-size: 14px !important; }
  body[data-theme="dark"] #school-info .si-npsn-item b,
  body[data-theme="dark"] #school-info .si-address-item > b,
  body[data-theme="dark"] #school-info .si-secondary-value b { font-size: 12px !important; }
  body[data-theme="dark"] #school-info .si-label,
  body[data-theme="dark"] #school-info .si-secondary-label { font-size: 9px !important; }
  body[data-theme="dark"] #school-info .si-meta-icon { width: 34px !important; height: 34px !important; flex-basis: 34px !important; }
  body[data-theme="dark"] #school-info .si-location-item b,
  body[data-theme="dark"] #school-info .si-quarter-item b { font-size: 13px !important; }
  body[data-theme="dark"] #school-info .si-address-item .si-secondary-value { margin-top: 5px !important; }
  /* Match the reference: do not show fields absent from the reference card. */
  body[data-theme="dark"] #school-info .si-address-item > .si-label { display: block !important; }
}
@media (max-width: 760px) {
  body[data-theme="dark"] #school-info {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: none !important;
    row-gap: 10px !important;
  }
  body[data-theme="dark"] #school-info .si-name-item,
  body[data-theme="dark"] #school-info .si-npsn-item,
  body[data-theme="dark"] #school-info .si-address-item,
  body[data-theme="dark"] #school-info .si-location-item,
  body[data-theme="dark"] #school-info .si-quarter-item {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}


/* STEP 8 FINAL TEXT LAYOUT — preserve card size, change placement only. */
@media screen {
  body[data-theme="dark"] #school-info {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 12px 26px !important;
    padding: 18px 20px !important;
    min-height: 0 !important;
    align-items: stretch !important;
  }
  body[data-theme="dark"] #school-info .si-left-column,
  body[data-theme="dark"] #school-info .si-right-column {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  body[data-theme="dark"] #school-info .si-left-column { gap: 8px !important; }
  body[data-theme="dark"] #school-info .si-right-column {
    gap: 10px !important;
    padding-left: 18px !important;
    border-left: 1px solid rgba(124, 181, 255, .30) !important;
    justify-content: space-between !important;
  }
  body[data-theme="dark"] #school-info .si-item { min-width: 0 !important; margin: 0 !important; }
  body[data-theme="dark"] #school-info .si-location-item,
  body[data-theme="dark"] #school-info .si-quarter-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    padding-left: 0 !important;
    border-left: 0 !important;
  }
  body[data-theme="dark"] #school-info .si-meta-icon {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
  }
  body[data-theme="dark"] #school-info .si-meta-copy { min-width: 0 !important; }
  body[data-theme="dark"] #school-info .si-label {
    display: block !important;
    margin-bottom: 3px !important;
    color: #a8c2e8 !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
  }
  body[data-theme="dark"] #school-info .si-item b {
    display: block !important;
    color: #f1f6ff !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    overflow-wrap: anywhere !important;
  }
  body[data-theme="dark"] #school-info .si-name-item b {
    color: #f8fbff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
  }
  body[data-theme="dark"] #school-info .si-npsn-item b { font-size: 12px !important; }
  body[data-theme="dark"] #school-info .si-location-item b,
  body[data-theme="dark"] #school-info .si-quarter-item b { font-size: 13px !important; }
}
@media (max-width: 760px) {
  body[data-theme="dark"] #school-info {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }
  body[data-theme="dark"] #school-info .si-right-column {
    padding-left: 0 !important;
    padding-top: 12px !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(124, 181, 255, .30) !important;
  }
}


/* STEP 8 REFERENCE CLEANUP — same compact card footprint, reference text only. */
@media screen {
  body[data-theme="dark"] #school-info {
    display: grid !important;
    grid-template-columns: minmax(210px, .9fr) minmax(0, 1fr) minmax(245px, .95fr) !important;
    grid-template-rows: 1fr !important;
    gap: 0 22px !important;
    padding: 18px 20px !important;
    min-height: 0 !important;
    align-items: center !important;
  }
  body[data-theme="dark"] #school-info .si-identity-block,
  body[data-theme="dark"] #school-info .si-address-block,
  body[data-theme="dark"] #school-info .si-meta-block { min-width: 0 !important; }
  body[data-theme="dark"] #school-info .si-identity-block {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
  }
  body[data-theme="dark"] #school-info .si-identity-block > b {
    color: #f8fbff !important;
    font-size: 15px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
  }
  body[data-theme="dark"] #school-info .si-npsn-inline {
    color: #a9c7ef !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
  }
  body[data-theme="dark"] #school-info .si-npsn-inline b {
    color: #d9e9ff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
  }
  body[data-theme="dark"] #school-info .si-address-block {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    padding-left: 18px !important;
    border-left: 1px solid rgba(124, 181, 255, .30) !important;
  }
  body[data-theme="dark"] #school-info .si-address-block b {
    color: #d9e9ff !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
  }
  body[data-theme="dark"] #school-info .si-meta-block {
    display: flex !important;
    flex-direction: column !important;
    gap: 11px !important;
  }
  body[data-theme="dark"] #school-info .si-meta-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
  }
  body[data-theme="dark"] #school-info .si-meta-icon {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
  }
  body[data-theme="dark"] #school-info .si-meta-copy { min-width: 0 !important; }
  body[data-theme="dark"] #school-info .si-meta-label {
    display: block !important;
    margin-bottom: 3px !important;
    color: #a8c2e8 !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
  }
  body[data-theme="dark"] #school-info .si-meta-copy b {
    display: block !important;
    color: #f1f6ff !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
  }
}
@media (max-width: 760px) {
  body[data-theme="dark"] #school-info {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 12px !important;
  }
  body[data-theme="dark"] #school-info .si-address-block {
    padding-left: 0 !important;
    padding-top: 10px !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(124, 181, 255, .30) !important;
  }
}


/* STEP 8 PHOTO ASSET — school image matches the reference card's left slot. */
@media screen {
  body[data-theme="dark"] #school-info {
    grid-template-columns: 176px minmax(210px, .9fr) minmax(245px, .95fr) !important;
    column-gap: 18px !important;
    align-items: center !important;
  }
  body[data-theme="dark"] #school-info .si-school-image {
    width: 176px !important;
    height: 126px !important;
    display: block !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    border: 1px solid rgba(125, 190, 255, .56) !important;
    box-shadow: 0 7px 16px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(235, 247, 255, .24), 0 0 16px rgba(43, 128, 255, .16) !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  body[data-theme="dark"] #school-info .si-identity-block { grid-column: 2 !important; grid-row: 1 !important; }
  body[data-theme="dark"] #school-info .si-address-block { grid-column: 2 !important; grid-row: 1 !important; align-self: end !important; margin-top: 72px !important; }
  body[data-theme="dark"] #school-info .si-meta-block { grid-column: 3 !important; grid-row: 1 !important; }
}
@media (max-width: 760px) {
  body[data-theme="dark"] #school-info {
    grid-template-columns: 1fr !important;
    row-gap: 12px !important;
  }
  body[data-theme="dark"] #school-info .si-school-image,
  body[data-theme="dark"] #school-info .si-identity-block,
  body[data-theme="dark"] #school-info .si-address-block,
  body[data-theme="dark"] #school-info .si-meta-block {
    grid-column: 1 !important;
    grid-row: auto !important;
    margin-top: 0 !important;
  }
  body[data-theme="dark"] #school-info .si-school-image { width: 100% !important; max-width: 176px !important; height: 108px !important; }
}


/* PHOTO WIDTH ADJUSTMENT — use the supplied horizontal school artwork without a narrow slot. */
@media screen {
  body[data-theme="dark"] #school-info {
    grid-template-columns: 220px minmax(150px, 1fr) minmax(220px, .95fr) !important;
    column-gap: 16px !important;
  }
  body[data-theme="dark"] #school-info .si-school-image {
    width: 220px !important;
    height: 126px !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}
@media (max-width: 760px) {
  body[data-theme="dark"] #school-info .si-school-image {
    width: 100% !important;
    max-width: none !important;
    height: 126px !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}


/* PHOTO + TEXT ALIGNMENT FIX — horizontal artwork with one aligned content column. */
@media screen {
  body[data-theme="dark"] #school-info {
    grid-template-columns: 220px minmax(240px, 1fr) minmax(220px, .95fr) !important;
    column-gap: 16px !important;
    align-items: center !important;
  }
  body[data-theme="dark"] #school-info .si-school-image {
    width: 220px !important;
    height: 126px !important;
    object-fit: cover !important;
    object-position: center !important;
    align-self: center !important;
  }
  body[data-theme="dark"] #school-info .si-content-block {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 14px !important;
    align-self: center !important;
  }
  body[data-theme="dark"] #school-info .si-identity-block,
  body[data-theme="dark"] #school-info .si-address-block {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  body[data-theme="dark"] #school-info .si-identity-block { gap: 6px !important; }
  body[data-theme="dark"] #school-info .si-address-block { gap: 5px !important; }
  body[data-theme="dark"] #school-info .si-meta-block {
    min-width: 0 !important;
    align-self: center !important;
  }
}
@media (max-width: 760px) {
  body[data-theme="dark"] #school-info {
    grid-template-columns: 1fr !important;
    row-gap: 12px !important;
  }
  body[data-theme="dark"] #school-info .si-school-image {
    width: 100% !important;
    height: 126px !important;
    max-width: none !important;
  }
  body[data-theme="dark"] #school-info .si-content-block,
  body[data-theme="dark"] #school-info .si-meta-block {
    grid-column: 1 !important;
  }
}


/* STEP 8 RESPONSIVE FINAL — fluid horizontal image and gradual card reflow. */
@media screen and (min-width: 1101px) {
  body[data-theme="dark"] #school-info {
    grid-template-columns: minmax(280px, 1.08fr) minmax(250px, .95fr) minmax(230px, .86fr) !important;
    column-gap: 18px !important;
    align-items: center !important;
  }
  body[data-theme="dark"] #school-info .si-school-image {
    width: 100% !important;
    height: 126px !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  body[data-theme="dark"] #school-info .si-content-block { gap: 14px !important; }
}
@media screen and (min-width: 761px) and (max-width: 1100px) {
  body[data-theme="dark"] #school-info {
    grid-template-columns: minmax(210px, 1fr) minmax(200px, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 16px !important;
    row-gap: 12px !important;
  }
  body[data-theme="dark"] #school-info .si-school-image {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 100% !important;
    height: 126px !important;
    max-width: none !important;
    object-fit: cover !important;
  }
  body[data-theme="dark"] #school-info .si-content-block {
    grid-column: 2 !important;
    grid-row: 1 !important;
    gap: 10px !important;
  }
  body[data-theme="dark"] #school-info .si-meta-block {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
}
@media screen and (max-width: 760px) {
  body[data-theme="dark"] #school-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
  }
  body[data-theme="dark"] #school-info .si-school-image,
  body[data-theme="dark"] #school-info .si-content-block,
  body[data-theme="dark"] #school-info .si-meta-block {
    width: 100% !important;
    max-width: none !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }
  body[data-theme="dark"] #school-info .si-school-image {
    height: clamp(110px, 35vw, 150px) !important;
    object-fit: cover !important;
  }
  body[data-theme="dark"] #school-info .si-content-block { gap: 10px !important; }
  body[data-theme="dark"] #school-info .si-meta-block { gap: 10px !important; }
}


/* STEP 8 LAST OVERRIDE — proportional image width and stable gradual reflow. */
@media screen and (min-width: 1101px) {
  body[data-theme="dark"] #school-info {
    grid-template-columns: minmax(0, 1.24fr) minmax(0, .84fr) minmax(0, .92fr) !important;
    column-gap: 14px !important;
    overflow: hidden !important;
  }
  body[data-theme="dark"] #school-info .si-school-image {
    width: 100% !important;
    min-width: 0 !important;
    height: 112px !important;
    max-width: none !important;
    object-fit: fill !important;
    object-position: center !important;
  }
  body[data-theme="dark"] #school-info .si-content-block,
  body[data-theme="dark"] #school-info .si-meta-block {
    width: 100% !important;
    min-width: 0 !important;
  }
  body[data-theme="dark"] #school-info .si-content-block {
    gap: 12px !important;
  }
}
@media screen and (min-width: 761px) and (max-width: 1100px) {
  body[data-theme="dark"] #school-info {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 14px !important;
    row-gap: 10px !important;
    overflow: hidden !important;
  }
  body[data-theme="dark"] #school-info .si-school-image {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 112px !important;
    max-width: none !important;
    object-fit: fill !important;
  }
  body[data-theme="dark"] #school-info .si-content-block { grid-column: 2 !important; grid-row: 1 !important; }
  body[data-theme="dark"] #school-info .si-meta-block {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 100% !important;
  }
}
@media screen and (max-width: 760px) {
  body[data-theme="dark"] #school-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    overflow: hidden !important;
  }
  body[data-theme="dark"] #school-info .si-school-image {
    width: 100% !important;
    height: clamp(110px, 30vw, 145px) !important;
    max-width: none !important;
    object-fit: fill !important;
  }
  body[data-theme="dark"] #school-info .si-content-block,
  body[data-theme="dark"] #school-info .si-meta-block {
    width: 100% !important;
    min-width: 0 !important;
  }
}


/* STEP 8 ALIGNMENT FINAL — image fills card height; all text columns share one baseline system. */
@media screen and (min-width: 1101px) {
  body[data-theme="dark"] #school-info {
    display: grid !important;
    grid-template-columns: minmax(250px, 1.30fr) minmax(185px, .88fr) minmax(205px, .92fr) !important;
    grid-template-rows: 1fr !important;
    gap: 0 18px !important;
    padding: 12px 14px !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }
  body[data-theme="dark"] #school-info .si-school-image {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-width: none !important;
    align-self: stretch !important;
    object-fit: fill !important;
    object-position: center !important;
    border-radius: 10px !important;
  }
  body[data-theme="dark"] #school-info .si-content-block {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 13px !important;
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
  }
  body[data-theme="dark"] #school-info .si-identity-block,
  body[data-theme="dark"] #school-info .si-address-block {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  body[data-theme="dark"] #school-info .si-meta-block {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 16px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-left: 16px !important;
    border-left: 1px solid rgba(124, 181, 255, .30) !important;
  }
}
@media screen and (min-width: 761px) and (max-width: 1100px) {
  body[data-theme="dark"] #school-info {
    display: grid !important;
    grid-template-columns: minmax(220px, 1.12fr) minmax(190px, .88fr) !important;
    grid-template-rows: 1fr 1fr !important;
    gap: 8px 16px !important;
    padding: 12px 14px !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }
  body[data-theme="dark"] #school-info .si-school-image {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    align-self: stretch !important;
    object-fit: fill !important;
  }
  body[data-theme="dark"] #school-info .si-content-block {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  body[data-theme="dark"] #school-info .si-address-block,
  body[data-theme="dark"] #school-info .si-identity-block { margin: 0 !important; padding: 0 !important; border: 0 !important; }
  body[data-theme="dark"] #school-info .si-meta-block {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 8px 0 0 !important;
    border-top: 1px solid rgba(124, 181, 255, .30) !important;
  }
}
@media screen and (max-width: 760px) {
  body[data-theme="dark"] #school-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 14px !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }
  body[data-theme="dark"] #school-info .si-school-image {
    width: 100% !important;
    height: clamp(110px, 32vw, 145px) !important;
    max-width: none !important;
    object-fit: fill !important;
    margin: 0 !important;
  }
  body[data-theme="dark"] #school-info .si-content-block,
  body[data-theme="dark"] #school-info .si-meta-block {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  body[data-theme="dark"] #school-info .si-content-block { gap: 9px !important; }
  body[data-theme="dark"] #school-info .si-meta-block {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 10px 0 0 !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(124, 181, 255, .30) !important;
  }
}


/* STEP 8 INTERMEDIATE BREAKPOINT FIX — give identity card full width before compact reflow. */
@media screen and (min-width: 761px) and (max-width: 1100px) {
  body[data-theme="dark"] .top-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: stretch !important;
  }
  body[data-theme="dark"] .top-row .school-info,
  body[data-theme="dark"] .top-row .summary-col {
    width: 100% !important;
    min-width: 0 !important;
  }
  body[data-theme="dark"] .top-row .summary-col {
    grid-column: 1 !important;
  }
  body[data-theme="dark"] #school-info {
    grid-template-columns: minmax(250px, 1.25fr) minmax(190px, .9fr) minmax(215px, .95fr) !important;
    grid-template-rows: 1fr !important;
    min-height: 150px !important;
    height: 150px !important;
  }
  body[data-theme="dark"] #school-info .si-school-image {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important;
  }
  body[data-theme="dark"] #school-info .si-content-block {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  body[data-theme="dark"] #school-info .si-meta-block {
    grid-column: 3 !important;
    grid-row: 1 !important;
    grid-template-columns: 1fr !important;
    border-left: 1px solid rgba(124,181,255,.30) !important;
    border-top: 0 !important;
    padding: 0 0 0 14px !important;
  }
}
@media screen and (max-width: 760px) {
  body[data-theme="dark"] .top-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  body[data-theme="dark"] .top-row .school-info,
  body[data-theme="dark"] .top-row .summary-col {
    width: 100% !important;
    min-width: 0 !important;
  }
  body[data-theme="dark"] #school-info {
    height: auto !important;
    min-height: 0 !important;
  }
}


/* STEP 8 LIGHT-THEME PARITY — geometry must not depend on the color theme. */
@media screen and (min-width: 1101px) {
  #school-info {
    display: grid !important;
    grid-template-columns: minmax(0, 1.24fr) minmax(0, .84fr) minmax(0, .92fr) !important;
    grid-template-rows: 1fr !important;
    gap: 0 14px !important;
    padding: 12px 14px !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }
  #school-info .si-school-image {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
    align-self: stretch !important;
  }
  #school-info .si-content-block {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  #school-info .si-identity-block,
  #school-info .si-address-block {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  #school-info .si-meta-block {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 14px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-left: 14px !important;
    border-left: 1px solid rgba(124, 181, 255, .30) !important;
  }
}
@media screen and (min-width: 761px) and (max-width: 1100px) {
  .top-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: stretch !important;
  }
  .top-row .school-info,
  .top-row .summary-col {
    width: 100% !important;
    min-width: 0 !important;
  }
  .top-row .summary-col { grid-column: 1 !important; }
  #school-info {
    display: grid !important;
    grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr) !important;
    grid-template-rows: 1fr 1fr !important;
    gap: 8px 14px !important;
    height: 150px !important;
    min-height: 150px !important;
    padding: 12px 14px !important;
    overflow: hidden !important;
  }
  #school-info .si-school-image {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
  }
  #school-info .si-content-block { grid-column: 2 !important; grid-row: 1 !important; min-width: 0 !important; }
  #school-info .si-meta-block {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    min-width: 0 !important;
    padding: 8px 0 0 !important;
    border-top: 1px solid rgba(124, 181, 255, .30) !important;
  }
}
@media screen and (max-width: 760px) {
  .top-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .top-row .school-info,
  .top-row .summary-col {
    width: 100% !important;
    min-width: 0 !important;
  }
  #school-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 14px !important;
    overflow: hidden !important;
  }
  #school-info .si-school-image {
    display: block !important;
    width: 100% !important;
    height: clamp(110px, 32vw, 145px) !important;
    max-width: none !important;
    object-fit: cover !important;
  }
  #school-info .si-content-block,
  #school-info .si-meta-block {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  #school-info .si-meta-block {
    padding: 10px 0 0 !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(124, 181, 255, .30) !important;
  }
}


/* STEP 8 GEOMETRY RESET — prevent intrinsic image dimensions from sizing the card. */
@media screen and (min-width: 1101px) {
  #school-info {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.24fr) minmax(0, .84fr) minmax(0, .92fr) !important;
    grid-template-rows: 146px !important;
    width: 100% !important;
    height: 170px !important;
    min-height: 170px !important;
    max-height: 170px !important;
    padding: 12px 14px !important;
    gap: 0 14px !important;
    overflow: hidden !important;
    align-items: stretch !important;
  }
  #school-info > *,
  #school-info .si-content-block,
  #school-info .si-meta-block,
  #school-info .si-identity-block,
  #school-info .si-address-block {
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: 146px !important;
  }
  #school-info .si-school-image {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 146px !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: cover !important;
  }
  #school-info .si-content-block {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    overflow: hidden !important;
  }
  #school-info .si-meta-block {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    overflow: hidden !important;
  }
}
@media screen and (min-width: 761px) and (max-width: 1100px) {
  .top-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .top-row .school-info,
  .top-row .summary-col { width: 100% !important; min-width: 0 !important; }
  #school-info {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr) !important;
    grid-template-rows: 126px !important;
    width: 100% !important;
    height: 150px !important;
    min-height: 150px !important;
    max-height: 150px !important;
    padding: 12px 14px !important;
    gap: 0 14px !important;
    overflow: hidden !important;
  }
  #school-info > * { min-width: 0 !important; min-height: 0 !important; max-height: 126px !important; }
  #school-info .si-school-image { grid-column: 1 !important; grid-row: 1 !important; width: 100% !important; height: 126px !important; object-fit: cover !important; }
  #school-info .si-content-block { grid-column: 2 !important; grid-row: 1 !important; min-width: 0 !important; overflow: hidden !important; }
  #school-info .si-meta-block { grid-column: 2 !important; grid-row: 1 !important; align-self: end !important; min-width: 0 !important; overflow: hidden !important; }
}
@media screen and (max-width: 760px) {
  .top-row { display: flex !important; flex-direction: column !important; gap: 12px !important; }
  .top-row .school-info,
  .top-row .summary-col { width: 100% !important; min-width: 0 !important; }
  #school-info {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 14px !important;
    gap: 12px !important;
    overflow: hidden !important;
  }
  #school-info > * { min-width: 0 !important; max-width: 100% !important; }
  #school-info .si-school-image { width: 100% !important; height: 126px !important; max-width: 100% !important; object-fit: cover !important; }
  #school-info .si-content-block,
  #school-info .si-meta-block { width: 100% !important; min-width: 0 !important; max-height: none !important; overflow: visible !important; }
}


/* STEP 8 TABLET FINAL — keep image, text, and metadata in separate cells. */
@media screen and (min-width: 761px) and (max-width: 1100px) {
  #school-info {
    grid-template-columns: minmax(0, 1.16fr) minmax(0, .92fr) minmax(0, .92fr) !important;
    grid-template-rows: 126px !important;
    height: 150px !important;
    min-height: 150px !important;
    max-height: 150px !important;
    gap: 0 12px !important;
  }
  #school-info .si-school-image { grid-column: 1 !important; grid-row: 1 !important; }
  #school-info .si-content-block { grid-column: 2 !important; grid-row: 1 !important; align-self: stretch !important; }
  #school-info .si-meta-block {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 0 0 0 10px !important;
    border-left: 1px solid rgba(124, 181, 255, .30) !important;
    border-top: 0 !important;
  }
}


/* STEP 8 CLEAN UNIVERSAL CARD — final theme-independent geometry. */
#school-info {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 170px !important;
  min-height: 170px !important;
  max-height: 170px !important;
  display: grid !important;
  grid-template-columns: minmax(280px, 1.18fr) minmax(260px, 1fr) minmax(220px, .82fr) !important;
  grid-template-rows: 146px !important;
  gap: 0 18px !important;
  padding: 12px 14px !important;
  align-items: stretch !important;
  overflow: hidden !important;
}
#school-info > *,
#school-info .si-content-block,
#school-info .si-identity-block,
#school-info .si-address-block,
#school-info .si-meta-block {
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: 146px !important;
  box-sizing: border-box !important;
}
#school-info .si-school-image {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 146px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center !important;
  align-self: stretch !important;
}
#school-info .si-content-block {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
}
#school-info .si-identity-block,
#school-info .si-address-block {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  min-width: 0 !important;
}
#school-info .si-meta-block {
  grid-column: 3 !important;
  grid-row: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 14px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 0 0 16px !important;
  border-left: 1px solid rgba(124, 181, 255, .30) !important;
  border-top: 0 !important;
  overflow: hidden !important;
}
@media screen and (min-width: 761px) and (max-width: 1100px) {
  .top-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .top-row .school-info,
  .top-row .summary-col { width: 100% !important; min-width: 0 !important; }
  #school-info {
    grid-template-columns: minmax(250px, 1.18fr) minmax(220px, .92fr) minmax(210px, .90fr) !important;
    grid-template-rows: 126px !important;
    height: 150px !important;
    min-height: 150px !important;
    max-height: 150px !important;
    gap: 0 14px !important;
    padding: 12px 14px !important;
  }
  #school-info > * { max-height: 126px !important; }
  #school-info .si-school-image { height: 126px !important; }
  #school-info .si-meta-block { padding-left: 12px !important; gap: 9px !important; }
}
@media screen and (max-width: 760px) {
  .top-row { display: flex !important; flex-direction: column !important; gap: 12px !important; }
  .top-row .school-info,
  .top-row .summary-col { width: 100% !important; min-width: 0 !important; }
  #school-info {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    gap: 12px !important;
    padding: 14px !important;
    overflow: hidden !important;
  }
  #school-info > * { width: 100% !important; max-height: none !important; }
  #school-info .si-school-image { height: 126px !important; object-fit: cover !important; }
  #school-info .si-content-block,
  #school-info .si-meta-block { max-height: none !important; overflow: visible !important; }
  #school-info .si-meta-block { padding: 10px 0 0 !important; border-left: 0 !important; border-top: 1px solid rgba(124, 181, 255, .30) !important; }
}


/* STEP 8 LIGHT CONTENT ALIGNMENT — light theme only; dark theme remains unchanged. */
body[data-theme="light"] #school-info .si-content-block,
body[data-theme="light"] #school-info .si-meta-block {
  box-sizing: border-box !important;
  min-width: 0 !important;
  min-height: 0 !important;
}
body[data-theme="light"] #school-info .si-content-block {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
}
body[data-theme="light"] #school-info .si-identity-block,
body[data-theme="light"] #school-info .si-address-block {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 5px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  line-height: 1.2 !important;
}
body[data-theme="light"] #school-info .si-identity-block > b,
body[data-theme="light"] #school-info .si-npsn-inline,
body[data-theme="light"] #school-info .si-address-block > b {
  display: block !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
body[data-theme="light"] #school-info .si-identity-block > b {
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
}
body[data-theme="light"] #school-info .si-npsn-inline {
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}
body[data-theme="light"] #school-info .si-npsn-inline b {
  font-size: inherit !important;
  font-weight: 700 !important;
}
body[data-theme="light"] #school-info .si-address-block > b {
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}
body[data-theme="light"] #school-info .si-meta-block {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 14px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 0 0 16px !important;
  border-left: 1px solid rgba(67, 104, 158, .30) !important;
  border-top: 0 !important;
  overflow: hidden !important;
}
body[data-theme="light"] #school-info .si-meta-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
}
body[data-theme="light"] #school-info .si-meta-icon {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  object-fit: contain !important;
}
body[data-theme="light"] #school-info .si-meta-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 3px !important;
  min-width: 0 !important;
}
body[data-theme="light"] #school-info .si-meta-label,
body[data-theme="light"] #school-info .si-meta-copy b {
  display: block !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
body[data-theme="light"] #school-info .si-meta-label {
  font-size: 9px !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
}
body[data-theme="light"] #school-info .si-meta-copy b {
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}
@media screen and (max-width: 760px) {
  body[data-theme="light"] #school-info .si-meta-block {
    padding: 10px 0 0 !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(67, 104, 158, .30) !important;
  }
}

/* FINAL SCHOOL CARD PARITY — same image size in both themes, no image border, supplied inline icons. */
#school-info .si-school-image {
  width: 100% !important;
  height: 146px !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#school-info .si-name-line,
#school-info .si-address-line {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
}
#school-info .si-name-line { gap: 7px !important; }
#school-info .si-address-line { gap: 8px !important; }
#school-info .si-inline-icon {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
  object-fit: contain !important;
  border: 0 !important;
  box-shadow: none !important;
}
#school-info .si-address-copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  min-width: 0 !important;
}
#school-info .si-name-line > b,
#school-info .si-address-copy > b { min-width: 0 !important; }
@media screen and (min-width: 761px) and (max-width: 1100px) {
  #school-info .si-school-image { height: 126px !important; }
}
@media screen and (max-width: 760px) {
  #school-info .si-school-image { height: 126px !important; }
}
@media screen and (min-width: 1101px) {
  body[data-theme="dark"] #school-info {
    grid-template-columns: minmax(280px, 1.18fr) minmax(260px, 1fr) minmax(220px, .82fr) !important;
    grid-template-rows: 146px !important;
  }
  body[data-theme="dark"] #school-info .si-school-image {
    height: 146px !important;
    object-fit: cover !important;
  }
}
@media screen and (min-width: 761px) and (max-width: 1100px) {
  body[data-theme="dark"] #school-info {
    grid-template-columns: minmax(0, 1.16fr) minmax(0, .92fr) minmax(0, .92fr) !important;
    grid-template-rows: 126px !important;
  }
  body[data-theme="dark"] #school-info .si-school-image {
    height: 126px !important;
    object-fit: cover !important;
  }
}
body[data-theme="dark"] #school-info .si-school-image {
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* FINAL TEXT-ONLY SCHOOL CARD — remove school artwork slot and move all text left. */
#school-info {
  grid-template-columns: minmax(0, 1fr) minmax(220px, .82fr) !important;
  grid-template-rows: 146px !important;
  gap: 0 18px !important;
}
#school-info .si-content-block {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-content: center !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
}
#school-info .si-meta-block {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-content: center !important;
  margin: 0 !important;
}
#school-info .si-inline-icon {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
}
#school-info .si-address-line {
  align-items: center !important;
  gap: 10px !important;
}
#school-info .si-address-copy {
  gap: 5px !important;
}
@media screen and (min-width: 761px) and (max-width: 1100px) {
  #school-info {
    grid-template-columns: minmax(0, 1fr) minmax(210px, .90fr) !important;
    grid-template-rows: 126px !important;
  }
  #school-info .si-content-block,
  #school-info .si-meta-block {
    grid-row: 1 !important;
  }
}
@media screen and (max-width: 760px) {
  #school-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  #school-info .si-content-block,
  #school-info .si-meta-block {
    width: 100% !important;
    max-height: none !important;
  }
  #school-info .si-meta-block {
    padding: 10px 0 0 !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(124, 181, 255, .30) !important;
  }
}
@media screen and (min-width: 1101px) {
  body[data-theme="dark"] #school-info {
    grid-template-columns: minmax(0, 1fr) minmax(220px, .82fr) !important;
    grid-template-rows: 146px !important;
  }
  body[data-theme="dark"] #school-info .si-content-block { grid-column: 1 !important; grid-row: 1 !important; }
  body[data-theme="dark"] #school-info .si-meta-block { grid-column: 2 !important; grid-row: 1 !important; }
}
@media screen and (min-width: 761px) and (max-width: 1100px) {
  body[data-theme="dark"] #school-info {
    grid-template-columns: minmax(0, 1fr) minmax(210px, .90fr) !important;
    grid-template-rows: 126px !important;
  }
  body[data-theme="dark"] #school-info .si-content-block { grid-column: 1 !important; grid-row: 1 !important; }
  body[data-theme="dark"] #school-info .si-meta-block { grid-column: 2 !important; grid-row: 1 !important; }
}
@media screen and (max-width: 760px) {
  body[data-theme="dark"] #school-info {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  body[data-theme="dark"] #school-info .si-content-block,
  body[data-theme="dark"] #school-info .si-meta-block {
    width: 100% !important;
    max-height: none !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

/* FINAL LEFT-ALIGNED TEXT CARD — metadata stays with the text; right column remains open. */
#school-info .si-content-block {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
}
#school-info .si-name-line,
#school-info .si-address-line {
  align-items: center !important;
  gap: 10px !important;
}
#school-info .si-name-copy,
#school-info .si-address-copy {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 5px !important;
  min-width: 0 !important;
}
#school-info .si-inline-icon,
#school-info .si-meta-icon,
body[data-theme="dark"] #school-info .si-inline-icon,
body[data-theme="dark"] #school-info .si-meta-icon,
body[data-theme="light"] #school-info .si-inline-icon,
body[data-theme="light"] #school-info .si-meta-icon {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  align-self: center !important;
  object-fit: contain !important;
}
#school-info .si-meta-block {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: visible !important;
}
body[data-theme="dark"] #school-info .si-meta-block {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
@media screen and (min-width: 1101px) {
  body[data-theme="dark"] #school-info .si-content-block {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
}
@media screen and (max-width: 760px) {
  #school-info .si-content-block {
    grid-column: auto !important;
    grid-row: auto !important;
    max-height: none !important;
  }
  #school-info .si-meta-block,
  body[data-theme="dark"] #school-info .si-meta-block {
    width: 100% !important;
    max-height: none !important;
    padding: 0 !important;
    border: 0 !important;
  }
}

/* FINAL POSITION ONLY — keep the original two text groups, shift both left, leave the right slot empty. */
@media screen and (min-width: 1101px) {
  #school-info {
    grid-template-columns: 210px 250px minmax(0, 1fr) !important;
    grid-template-rows: 146px !important;
    gap: 0 16px !important;
  }
  #school-info .si-content-block {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #school-info .si-meta-block {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  body[data-theme="dark"] #school-info .si-content-block { grid-column: 1 !important; grid-row: 1 !important; }
  body[data-theme="dark"] #school-info .si-meta-block { grid-column: 2 !important; grid-row: 1 !important; }
}
@media screen and (min-width: 761px) and (max-width: 1100px) {
  #school-info {
    grid-template-columns: minmax(0, 260px) minmax(230px, 260px) minmax(0, 1fr) !important;
    grid-template-rows: 126px !important;
    gap: 0 18px !important;
  }
  #school-info .si-content-block { grid-column: 1 !important; grid-row: 1 !important; }
  #school-info .si-meta-block { grid-column: 2 !important; grid-row: 1 !important; }
  body[data-theme="dark"] #school-info .si-content-block { grid-column: 1 !important; grid-row: 1 !important; }
  body[data-theme="dark"] #school-info .si-meta-block { grid-column: 2 !important; grid-row: 1 !important; }
}

/* FINAL THEME-PARITY PLACEMENT — same geometry in light and dark; address stays two lines. */
@media screen and (min-width: 1101px) {
  #school-info,
  body[data-theme="light"] #school-info,
  body[data-theme="dark"] #school-info {
    grid-template-columns: 240px 260px minmax(0, 1fr) !important;
    grid-template-rows: 146px !important;
    column-gap: 20px !important;
    row-gap: 0 !important;
    align-items: center !important;
  }
  #school-info .si-content-block,
  body[data-theme="light"] #school-info .si-content-block,
  body[data-theme="dark"] #school-info .si-content-block {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 240px !important;
    max-width: 240px !important;
    min-width: 240px !important;
    overflow: visible !important;
    justify-content: center !important;
    gap: 12px !important;
  }
  #school-info .si-meta-block,
  body[data-theme="light"] #school-info .si-meta-block,
  body[data-theme="dark"] #school-info .si-meta-block {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 260px !important;
    max-width: 260px !important;
    min-width: 260px !important;
    overflow: visible !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 0 !important;
    border: 0 !important;
  }
  #school-info .si-name-line,
  #school-info .si-address-line {
    width: 100% !important;
    min-width: 0 !important;
    gap: 10px !important;
  }
  #school-info .si-name-copy,
  #school-info .si-address-copy {
    min-width: 0 !important;
    max-width: 196px !important;
    overflow: visible !important;
  }
  #school-info .si-address-copy > b:last-child {
    display: block !important;
    max-width: 178px !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
  }
}
@media screen and (min-width: 761px) and (max-width: 1100px) {
  #school-info,
  body[data-theme="light"] #school-info,
  body[data-theme="dark"] #school-info {
    grid-template-columns: minmax(0, 260px) minmax(230px, 260px) minmax(0, 1fr) !important;
    column-gap: 18px !important;
    row-gap: 0 !important;
  }
  #school-info .si-content-block,
  body[data-theme="light"] #school-info .si-content-block,
  body[data-theme="dark"] #school-info .si-content-block { grid-column: 1 !important; grid-row: 1 !important; width: 260px !important; max-width: 260px !important; min-width: 260px !important; overflow: visible !important; }
  #school-info .si-meta-block,
  body[data-theme="light"] #school-info .si-meta-block,
  body[data-theme="dark"] #school-info .si-meta-block { grid-column: 2 !important; grid-row: 1 !important; width: 260px !important; max-width: 260px !important; min-width: 260px !important; overflow: visible !important; padding: 0 !important; border: 0 !important; }
}

/* FINAL ADDRESS PARITY — light and dark use the same two-line, no-midword-wrap text. */
#school-info .si-content-block,
body[data-theme="light"] #school-info .si-content-block,
body[data-theme="dark"] #school-info .si-content-block {
  flex: 0 0 240px !important;
  width: 240px !important;
  min-width: 240px !important;
  max-width: 240px !important;
  overflow: visible !important;
}
#school-info .si-address-line,
body[data-theme="light"] #school-info .si-address-line,
body[data-theme="dark"] #school-info .si-address-line {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  width: 240px !important;
  min-width: 240px !important;
  max-width: 240px !important;
}
#school-info .si-address-copy,
body[data-theme="light"] #school-info .si-address-copy,
body[data-theme="dark"] #school-info .si-address-copy {
  display: flex !important;
  flex: 0 0 196px !important;
  flex-direction: column !important;
  gap: 4px !important;
  width: 196px !important;
  min-width: 196px !important;
  max-width: 196px !important;
  overflow: visible !important;
}
#school-info .si-address-copy > b,
body[data-theme="light"] #school-info .si-address-copy > b,
body[data-theme="dark"] #school-info .si-address-copy > b {
  display: block !important;
  width: 196px !important;
  max-width: 196px !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
}
#school-info .si-name-copy,
body[data-theme="light"] #school-info .si-name-copy,
body[data-theme="dark"] #school-info .si-name-copy {
  min-width: 196px !important;
  max-width: 100% !important;
}

/* FINAL IDENTITY SPACING — metadata berada di tengah-kanan, bukan di ujung kartu. */
@media screen and (min-width: 1101px) {
  #school-info,
  body[data-theme="light"] #school-info,
  body[data-theme="dark"] #school-info {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: minmax(136px, 1fr) !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
    align-items: center !important;
    padding: 18px 24px !important;
    overflow: visible !important;
  }
  #school-info .si-content-block,
  body[data-theme="light"] #school-info .si-content-block,
  body[data-theme="dark"] #school-info .si-content-block {
    grid-column: 1 !important; grid-row: 1 !important;
    width: 100% !important; min-width: 0 !important; max-width: none !important;
    display: flex !important; flex-direction: column !important;
    justify-content: center !important; gap: 14px !important;
    overflow: visible !important;
  }
  #school-info .si-address-block,
  body[data-theme="light"] #school-info .si-address-block,
  body[data-theme="dark"] #school-info .si-address-block {
    width: 100% !important; min-width: 0 !important; max-width: none !important;
    overflow: visible !important;
  }
  #school-info .si-meta-block,
  body[data-theme="light"] #school-info .si-meta-block,
  body[data-theme="dark"] #school-info .si-meta-block {
    grid-column: 2 !important; grid-row: 1 !important;
    align-self: stretch !important;
    width: 100% !important; min-width: 0 !important; max-width: none !important;
    padding: 0 0 0 34px !important; border-left: 1px solid #dbe4f0 !important;
    display: flex !important; flex-direction: column !important;
    justify-content: center !important; gap: 16px !important;
  }
  #school-info .si-meta-row { gap: 16px !important; }
  #school-info .si-meta-copy { min-width: 0 !important; }
  #school-info .si-name-copy > b { white-space: normal !important; overflow-wrap: anywhere !important; }
  #school-info .si-npsn-inline,
  #school-info .si-npsn-inline b {
    display: inline !important;
    width: auto !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
  }
  #school-info .si-npsn-inline,
  #school-info .si-npsn-inline b,
  body[data-theme="light"] #school-info .si-npsn-inline,
  body[data-theme="light"] #school-info .si-npsn-inline b,
  body[data-theme="dark"] #school-info .si-npsn-inline,
  body[data-theme="dark"] #school-info .si-npsn-inline b {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
  }
}
@media screen and (min-width: 761px) and (max-width: 1100px) {
  #school-info,
  body[data-theme="light"] #school-info,
  body[data-theme="dark"] #school-info {
    grid-template-columns: minmax(0, 1.08fr) minmax(220px, .92fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 28px !important; row-gap: 12px !important;
  }
  #school-info .si-content-block { grid-column: 1 !important; grid-row: 1 !important; }
  #school-info .si-address-block { grid-column: 1 !important; grid-row: 2 !important; }
  #school-info .si-meta-block { grid-column: 2 !important; grid-row: 1 / span 2 !important; padding-left: 24px !important; border-left: 1px solid #dbe4f0 !important; }
}
@media screen and (max-width: 760px) {
  #school-info,
  body[data-theme="light"] #school-info,
  body[data-theme="dark"] #school-info {
    display: flex !important; flex-direction: column !important;
    gap: 12px !important; padding: 16px !important;
  }
  #school-info .si-npsn-inline,
  #school-info .si-npsn-inline b {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
  }
  #school-info .si-content-block,
  #school-info .si-address-block,
  #school-info .si-meta-block { width: 100% !important; max-width: none !important; min-width: 0 !important; grid-column: auto !important; grid-row: auto !important; }
  #school-info .si-meta-block { padding: 12px 0 0 !important; border-left: 0 !important; border-top: 1px solid #dbe4f0 !important; gap: 12px !important; }
}

/* Rekap: shadow hanya dihapus pada batang dan donut; card/panel tetap memakai
   depth tema masing-masing agar tidak menjadi datar. */
.school-rekap-dashboard .school-donut,
.school-rekap-dashboard .school-donut::before,
.school-rekap-dashboard .school-donut::after,
.school-rekap-dashboard .school-compare-bar > div,
.school-rekap-dashboard .school-chart-bar,
.rekap-chart svg rect,
.rekap-chart svg polygon {
  box-shadow: none !important;
  filter: none !important;
}

/* FINAL NPSN INLINE — label dan nomor selalu satu baris. */
#school-info .si-name-copy .si-npsn-inline,
body[data-theme="light"] #school-info .si-name-copy .si-npsn-inline,
body[data-theme="dark"] #school-info .si-name-copy .si-npsn-inline {
  display: inline !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
}
#school-info .si-name-copy .si-npsn-inline b,
body[data-theme="light"] #school-info .si-name-copy .si-npsn-inline b,
body[data-theme="dark"] #school-info .si-name-copy .si-npsn-inline b {
  display: inline !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
}

/* FINAL REKAP OVERRIDE — jarak berlaku semua tema; card/panel tetap memakai
   shadow tema, sedangkan shadow batang dan donut saja yang dihapus. */
body.school-rekap-layout #view-chart {
  margin-top: 34px !important;
  padding-top: 0 !important;
}
body.school-rekap-layout #view-chart .school-rekap-dashboard {
  margin-top: 0 !important;
}
body.school-rekap-layout #view-chart .school-donut,
body.school-rekap-layout #view-chart .school-donut::before,
body.school-rekap-layout #view-chart .school-donut::after,
body.school-rekap-layout #view-chart .school-compare-bar > div,
body.school-rekap-layout #view-chart .school-chart-bar,
body.school-rekap-layout #view-chart svg rect,
body.school-rekap-layout #view-chart svg polygon {
  filter: none !important;
}
/* Batang: bevel tetap ada melalui inset highlight, tanpa shadow luar. */
body.school-rekap-layout #view-chart .school-compare-bar > div,
body.school-rekap-layout #view-chart .school-chart-bar {
  box-shadow: inset 4px 0 0 rgba(255,255,255,.18), inset -5px 0 0 rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.28) !important;
  border-top: 1px solid rgba(255,255,255,.34) !important;
  border-left: 1px solid rgba(255,255,255,.20) !important;
  border-right: 1px solid rgba(15,42,76,.16) !important;
}
/* Hilangkan strip putih/abu yang menggantung tepat di bawah nominal. */
body.school-rekap-layout #view-chart .school-compare-bar > div::before,
body.school-rekap-layout #view-chart .school-chart-bar::before {
  display: none !important;
}
/* Donut: kembalikan bevel inset; shadow luar tetap tidak dipakai. */
body.school-rekap-layout #view-chart .school-donut {
  box-shadow: inset 10px -9px 0 rgba(0,0,0,.18), inset -6px 7px 0 rgba(255,255,255,.28) !important;
}
body.school-rekap-layout #view-chart .school-donut::after {
  box-shadow: inset 5px -5px 8px rgba(15,42,76,.20), inset -3px 3px 5px rgba(255,255,255,.70) !important;
}
body.school-rekap-layout #view-chart .school-donut::before {
  box-shadow: none !important;
}
@media (max-width: 600px) {
  body.school-rekap-layout #view-chart { margin-top: 24px !important; }
}

/* ============================================================================
   UI-05 — kartu identitas sekolah TIDAK BOLEH tampil untuk akun admin di tab BKU & BHP.
   Keputusan pemilik 2026-09-13: "batasi aturan pemunculan kembali baris atas agar tidak
   berlaku untuk peran admin pada tab BKU/BHP."

   Kondisi admin ditandai kelas `regional-editor-compact` pada #panel-editor, yang dipasang
   di public/app.js:2312 dari syarat di public/app.js:2302:
       regionalEditor = admin && (state.current === 'bku' || state.current === 'bhp')
   Jadi syarat UI-05 PERSIS sama dengan syarat kelas itu.

   Kenapa perlu aturan baru: baris 565-567 sudah menyembunyikan `.regional-editor-compact
   .top-row`, TETAPI di berkas ini ada 15 blok `@media (min-width: 761px) and (max-width:
   1100px)` yang menulis `.top-row { display: grid !important; ... }` tanpa mengecualikan
   kasus admin. Karena dua-duanya memakai `!important`, pemenangnya ditentukan kekhususan:
   `.top-row` (0,0,1,0) kalah dari selektor di bawah (0,2,1,0). Ditaruh paling akhir supaya
   juga menang lewat urutan sumber.

   Akun sekolah TIDAK terkena: mereka tidak pernah mendapat kelas `regional-editor-compact`,
   jadi kartu identitasnya tetap tampil.
   ============================================================================ */
#panel-editor.regional-editor-compact .top-row { display: none !important; }

/* ============================================================================
   UI-17 lanjutan (keputusan 63) — "judul halaman TIDAK BOLEH MENUMPUK saat layar
   diperkecil perlahan sampai ukuran mobile".
   Ditemukan pemilik 2026-09-18: pada lebar menengah (layar dibagi dua, sekitar 960 px,
   lalu bertahap sampai mobile) judul halaman masih terhimpit lalu bertumpuk.

   Sebabnya BUKAN posisi kotak pencarian, melainkan SLOT UNGGAH PDF YANG KOSONG pada
   editor ringkas (akun kecamatan): ia tetap memesan ruang — `min-width: 360px` dari
   aturan dasar `#editor-import-slot`, dengan basis 520px — sedangkan aturan pelepasannya
   hanya berada di dalam `@media (max-width: 900px)`. Pada 960 px slot itu memakan
   360-520 px sehingga judul hanya kebagian sekitar 260 px, lalu terhimpit dan bertumpuk.

   Perbaikan:
   (1) slot yang kosong tidak lagi memesan ruang di lebar mana pun;
   (2) di <=1200 px kepala halaman boleh membungkus, jadi kotak pencarian turun ke
       barisnya sendiri ketika memang tidak muat — sejalan dengan "turun ke bawah"
       milik keputusan 63.

   Akun sekolah tidak terpengaruh: mereka tidak pernah mendapat kelas
   `regional-editor-compact`, dan `flex: 0 1 auto` membuat slot yang ADA ISINYA tetap
   selebar isinya.
   ============================================================================ */
#panel-editor.regional-editor-compact #editor-import-slot { flex: 0 1 auto; min-width: 0; }

/* Kotak pencarian TURUN KE BARIS BAWAH pada saat judul halaman dan kotak itu memang
   TIDAK MUAT berdampingan — jadi patokannya "muat atau tidak", bukan ambang lebar tetap.
   (Menggantikan aturan `@media (max-width:1200px)` versi pertama, atas permintaan pemilik
   2026-09-18.) `.editor-head-copy` dibuat TIDAK BOLEH MENYUSUT supaya judul tidak pernah
   terhimpit: begitu ruang tidak cukup, kotak pencariannya yang pindah baris. */
.editor-head-row { flex-wrap: wrap; }
.editor-head-copy { flex: 1 0 auto; }