:root {
  --green-950: #073b35;
  --green-800: #0b6b5b;
  --green-700: #11806c;
  --green-100: #dff3ec;
  --green-50: #f0faf6;
  --gold: #f2b84b;
  --ink: #172b27;
  --muted: #667873;
  --line: #dbe5e1;
  --surface: #ffffff;
  --canvas: #f4f7f5;
  --danger: #b83d45;
  --warning: #9a6711;
  --shadow: 0 12px 30px rgba(17, 48, 42, .08);
  --radius: 18px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--canvas);
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--canvas); }
button, input, select { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; width: 244px; display: flex; flex-direction: column; padding: 28px 18px; color: #fff; background: linear-gradient(170deg, var(--green-950), #075449 70%, #0a6555); }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 10px 28px; color: inherit; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: var(--green-950); background: var(--gold); font-size: 24px; font-weight: 900; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 18px; letter-spacing: -.02em; }
.brand small { margin-top: 2px; color: rgba(255,255,255,.67); font-size: 12px; }
.nav-list { display: grid; gap: 7px; }
.nav-item { display: flex; align-items: center; gap: 13px; width: 100%; padding: 12px 14px; border: 0; border-radius: 12px; color: rgba(255,255,255,.75); background: transparent; text-align: left; }
.nav-item span { width: 22px; font-size: 19px; text-align: center; }
.nav-item:hover, .nav-item.active { color: #fff; background: rgba(255,255,255,.12); }
.sidebar-foot { margin-top: auto; display: flex; align-items: center; gap: 9px; padding: 13px; border-top: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.75); font-size: 12px; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(242,184,75,.15); }
.status-dot.online { background: #7ee5bd; box-shadow: 0 0 0 4px rgba(126,229,189,.14); }
main { min-height: 100vh; margin-left: 244px; padding: 0 42px 72px; }
.topbar { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 28px 0 22px; background: rgba(244,247,245,.9); backdrop-filter: blur(14px); }
.eyebrow, .step { margin: 0 0 5px; color: var(--green-700); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(28px, 3vw, 38px); line-height: 1; letter-spacing: -.045em; }
h2 { margin-bottom: 7px; font-size: 21px; letter-spacing: -.025em; }
p { color: var(--muted); line-height: 1.55; }
.top-actions, .button-row { display: flex; align-items: center; gap: 10px; }
.button, .icon-button { border: 1px solid transparent; border-radius: 11px; font-weight: 750; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.button { padding: 11px 16px; }
.button:hover, .icon-button:hover { transform: translateY(-1px); }
.button.primary { color: #fff; background: var(--green-800); box-shadow: 0 7px 18px rgba(11,107,91,.18); }
.button.primary:hover { background: var(--green-700); }
.button.ghost { color: var(--ink); border-color: var(--line); background: var(--surface); }
.button.danger { color: var(--danger); border-color: #f0cdd0; background: #fff5f5; }
.button.wide { width: 100%; }
.icon-button { display: grid; place-items: center; width: 44px; height: 44px; color: var(--ink); border-color: var(--line); background: var(--surface); font-size: 20px; }
/* The guide button: a round "?" that opens the user guide, in the place the manual sync button used
   to sit — syncing is automatic now, so the top bar only carries what a teacher actually presses. */
.icon-button.round { border-radius: 50%; font-size: 17px; font-weight: 750; }
.view { display: none; animation: enter .25s ease; }
.view.active { display: block; }
@keyframes enter { from { opacity: 0; transform: translateY(4px); } }
.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin-bottom: 32px; }
.metric { position: relative; overflow: hidden; min-height: 132px; padding: 21px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 4px 14px rgba(17,48,42,.03); }
.metric span, .metric small { display: block; color: var(--muted); font-size: 12px; font-weight: 650; }
.metric strong { display: block; margin: 8px 0 6px; font-size: 38px; line-height: 1; letter-spacing: -.05em; }
.metric.accent { border-color: transparent; color: #fff; background: var(--green-800); }
.metric.accent span, .metric.accent small { color: rgba(255,255,255,.72); }
.metric.accent::after { content: ""; position: absolute; right: -25px; bottom: -35px; width: 110px; height: 110px; border-radius: 50%; background: rgba(242,184,75,.22); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 0 0 17px; }
.section-head p { margin-bottom: 0; font-size: 13px; }
.segmented { display: flex; gap: 3px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: #eaf0ed; }
.segmented button { padding: 7px 10px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; font-size: 12px; font-weight: 700; }
.segmented button.active { color: var(--ink); background: #fff; box-shadow: 0 2px 8px rgba(17,48,42,.08); }

/* Every control a finger presses answers the press by itself, in under a tenth of a second, before
   anything is sent to Google Sheets. A control that only reacts once the network has replied feels
   broken, which is exactly what a slow builder open looked like. The rule covers every <button>
   (the builder's own menu and the relief sub-tabs included) plus the file drop zone, which is a
   label: listing classes one by one had already missed two of them. */
button:active:not(:disabled), .dropzone:active {
  /* Nudge only: a fractional scale leaves the label blurry for a frame on 1x school monitors. */
  transform: translateY(1px);
  /* Opacity stays on the compositor: a brightness filter would force an off-screen raster pass on
     every press, which is exactly the wrong cost on the low-end Android phones the school uses. */
  opacity: .88;
  transition-duration: .06s;
}
.button.primary:active { background: var(--green-950); }
.button.ghost:active { background: #edf3f1; }
.segmented button.active:active { background: #f1f6f4; }
/* A tab that has started work keeps the press visible until the pane it opened is ready. */
.schedule-switch button { position: relative; }
/* Every control that has started work keeps the press visible until what it opened is ready. */
button.is-busy { position: relative; color: var(--ink); }
button.is-busy::after {
  /* Pinned to the corner: adding it to the text flow would shove the label around inside a narrow
     tab, which is a layout shift right under the thumb that pressed it. */
  content: ""; position: absolute; top: 5px; right: 7px; width: 10px; height: 10px;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  animation: press-spin .7s linear infinite;
}
@keyframes press-spin { to { transform: rotate(360deg); } }
.builder-loading { margin: 0 0 12px; color: var(--green-700); font-size: 13px; font-weight: 750; }
.relief-list, .card-list { display: grid; gap: 10px; }

/* Sub-tab skrin relief: bar bergaris bawah untuk tab induk (Ketiadaan guru | Relief), manakala
   .segmented menandakan paparan dalam Relief supaya dua tahap itu tidak kelihatan sama. */
.relief-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin: 0 0 18px; border-bottom: 2px solid var(--line); }
.relief-toolbar .button-row { margin: 0 0 9px; }
.relief-toolbar .relief-tabs { margin: 0; border-bottom: 0; }
.relief-tabs { display: flex; gap: 6px; margin: 0 0 18px; border-bottom: 2px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.relief-tabs::-webkit-scrollbar { display: none; }
.relief-tab { appearance: none; margin-bottom: -2px; padding: 11px 18px; border: 0; border-bottom: 3px solid transparent; border-radius: 8px 8px 0 0; color: var(--muted); background: transparent; font: inherit; font-size: 15px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.relief-tab:hover { color: var(--ink); }
.relief-tab.active { color: var(--green-800); border-bottom-color: var(--green-800); }
.relief-tab:focus-visible { outline: 2px solid var(--green-800); outline-offset: 2px; }
.relief-tabpanel { min-width: 0; margin: 0; }
.segmented button:focus-visible { outline: 2px solid var(--green-800); outline-offset: 1px; }
.head-tools { display: flex; align-items: end; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.relief-switch { display: inline-flex; margin: 0 0 14px; }
.relief-panel { min-width: 0; }

/* Pratonton jadual guru ganti pada skrin (gaya cetak hanya terpakai semasa @media print). */
.relief-preview { overflow: auto; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.relief-preview .relief-print-heading { display: flex; align-items: start; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.relief-preview .relief-print-title { text-align: center; }
.relief-preview .relief-print-title strong, .relief-preview .relief-print-title span { display: block; }
.relief-preview .relief-print-title strong { font-size: 15px; letter-spacing: .02em; }
.relief-preview .relief-print-title span { font-size: 12px; color: var(--muted); }
.relief-preview .relief-print-meta { display: grid; gap: 3px; font-size: 12px; color: var(--muted); }
.relief-preview .relief-print-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 11px; }
.relief-preview .relief-print-table th, .relief-preview .relief-print-table td { padding: 5px 6px; border: 1px solid var(--line); background: #fff; text-align: center; vertical-align: middle; overflow-wrap: anywhere; }
.relief-preview .relief-print-name { width: 148px; text-align: left; }
.relief-preview .relief-print-name-caption { display: block; margin-bottom: 4px; font-size: 9px; font-weight: 600; color: var(--muted); }
.relief-preview .relief-print-name-text { display: block; font-weight: 700; }
.relief-preview .relief-print-label { width: 76px; font-size: 10px; color: var(--muted); }
/* Nombor waktu di baris atas, jam di bawahnya di dalam sel yang sama. Tanpa peraturan ini kedua-
   duanya bergabung menjadi "107:30" pada skrin (CSS cetak tidak terpakai pada pratonton). */
.relief-preview .relief-print-period { display: block; font-size: 12px; font-weight: 800; color: var(--ink); }
.relief-preview .relief-print-clock { display: block; margin-top: 3px; font-size: 10px; color: var(--muted); line-height: 1.25; }
.relief-preview .relief-print-time { font-weight: 700; }
.relief-preview .relief-print-table thead th { padding: 7px 5px; }
.relief-preview .relief-print-footer { margin: 10px 0 0; font-size: 10px; color: var(--muted); text-align: right; }
.relief-preview .relief-print-group + .relief-print-group { border-top: 2px solid var(--line); }

.relief-print-sheet { display: none; }
.relief-card { display: grid; grid-template-columns: 112px 1fr minmax(210px, 260px); align-items: center; gap: 20px; padding: 15px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.time-chip { display: flex; align-items: center; gap: 11px; }
.period-bubble { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--green-800); background: var(--green-100); font-size: 16px; font-weight: 850; }
.time-chip strong, .time-chip small, .lesson strong, .lesson small { display: block; }
.time-chip strong { font-size: 13px; }
.time-chip small, .lesson small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.lesson strong { font-size: 15px; }
.lesson .teacher-away { color: var(--danger); }
.candidate-select { width: 100%; }
.candidate-note { margin-top: 4px; color: var(--green-700); font-size: 10px; font-weight: 700; }
.empty-state { padding: 48px 24px; border: 1px dashed #bfd0c9; border-radius: var(--radius); color: var(--muted); background: rgba(255,255,255,.55); text-align: center; }
.empty-state strong { display: block; margin-bottom: 5px; color: var(--ink); }
.sticky-actions { position: sticky; bottom: 18px; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding: 12px 14px 12px 20px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.94); box-shadow: var(--shadow); backdrop-filter: blur(12px); }
.sticky-actions > div { display: flex; gap: 9px; }
.filters { display: grid; grid-template-columns: minmax(240px, 420px); gap: 12px; margin-bottom: 18px; }
.filters.two { grid-template-columns: repeat(2, minmax(180px, 280px)); }
label { display: grid; gap: 7px; margin-bottom: 14px; color: #42534f; font-size: 12px; font-weight: 700; }
input, select { min-height: 43px; width: 100%; padding: 9px 11px; border: 1px solid #cddbd5; border-radius: 10px; color: var(--ink); background: #fff; outline: none; }
input:focus, select:focus { border-color: var(--green-700); box-shadow: 0 0 0 3px rgba(17,128,108,.1); }
.absence-card, .teacher-card { padding: 17px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.absence-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.absence-card h3, .teacher-card h3 { margin: 0 0 4px; font-size: 14px; }
.absence-card p, .teacher-card p { margin: 0; font-size: 12px; }
.badge { display: inline-flex; align-items: center; width: fit-content; padding: 5px 9px; border-radius: 99px; font-size: 10px; font-weight: 800; }
.badge.good { color: #0c684e; background: #dcf5e9; }
.badge.neutral { color: #52635f; background: #e8eeeb; }
.badge.warn { color: #85560e; background: #fff0cf; }
.teacher-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.teacher-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; transition: background .16s ease, border-color .16s ease, box-shadow .16s ease; }
.teacher-card.relief-eligible { border-color: #8bcdb6; background: #eaf8f1; }
.teacher-card.relief-excluded { border-color: #e3a7ad; background: #fcebed; }
.teacher-card-toggle { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 12px; min-width: 0; padding: 0; border: 0; color: inherit; background: transparent; text-align: left; cursor: pointer; }
.teacher-card-toggle:focus-visible { border-radius: 10px; outline: 3px solid rgba(17,128,108,.24); outline-offset: 4px; }
.teacher-card-copy, .teacher-name, .teacher-status { display: block; min-width: 0; }
.teacher-name { margin-bottom: 4px; font-size: 14px; font-weight: 750; }
.teacher-status { font-size: 12px; }
.teacher-card.relief-eligible .avatar { color: #0c684e; background: #cceede; }
.teacher-card.relief-excluded .avatar { color: #8f3038; background: #f7cfd3; }
.avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: var(--green-800); background: var(--green-100); font-size: 13px; font-weight: 850; }
.teacher-actions { display: flex; gap: 4px; }
.mini-button { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: #fff; }
.mini-button.delete:hover { color: var(--danger); border-color: #e8b9bd; }
.schedule-grid { min-width: 0; }
/* Every teacher timetable in the app uses one shape, the same as the builder's Lihat & Edit screen:
   days down the side, periods across the top, a vertical REHAT column where the clock has a break,
   a tinted block per subject and a colour legend under the grid. */
.timetable-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding-bottom: 2px; }
table.timetable { border-collapse: collapse; width: 100%; min-width: 720px; table-layout: fixed; font-size: 11px; }
table.timetable th, table.timetable td { border: 1px solid var(--line); padding: 2px; text-align: center; vertical-align: middle; height: 46px; }
table.timetable th { height: auto; padding: 4px 2px; background: #eef6f3; font-size: 11px; font-weight: 650; }
table.timetable th.pnum { font-size: 12px; }
table.timetable th.pnum .tm { display: block; font-size: 8.5px; font-weight: 500; color: var(--muted); }
table.timetable th.day, table.timetable td.day { width: 52px; background: #f7faf9; font-size: 11px; font-weight: 750; }
table.timetable th.day.today { color: #fff; background: var(--green-800); }
table.timetable td.vert { width: 26px; background: #eef6f3; font-size: 10px; font-weight: 750; letter-spacing: .12em; writing-mode: vertical-rl; transform: rotate(180deg); }
table.timetable td.blk { padding: 2px; }
table.timetable td.blk .sub { display: block; font-size: 9px; font-weight: 750; line-height: 1.1; color: #10312b; }
table.timetable td.blk .cls { display: block; font-weight: 750; font-size: 10.5px; line-height: 1.1; overflow-wrap: anywhere; }
table.timetable td.blk .hint { display: block; font-size: 9px; font-weight: 600; color: #91a09c; }
table.timetable td.has { background: var(--sc, #eef6f3); }
table.timetable td.has .cls { color: #111; }
table.timetable td.pick { cursor: pointer; }
table.timetable td.locked { cursor: not-allowed; }
table.timetable td.locked .lock { display: block; font-size: 8px; line-height: 1; }
.timetable-hint { margin: 6px 0 0; font-size: 11px; color: var(--muted); }
.legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.legend i { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 10.5px; font-style: normal; font-weight: 650; }
.legend i b { width: 11px; height: 11px; border: 1px solid rgba(0,0,0,.08); border-radius: 3px; }

/* Guru Pemulihan: the profile dialog's "Tetapan Jadual" button opens the teacher's own week and the
   empty spaces are touched to claim setting periods. The table is wide, so it scrolls in the dialog. */
#settingDialog { width: min(1040px, calc(100% - 24px)); padding: 25px; }
.setting-grid { margin: 14px 0 0; }
/* The setting grid borrows the same block vocabulary as the timetable, so a claimed period looks
   like a period on the builder's screen. Only the wrapper differs: it scrolls inside the dialog. */
#settingDialog .timetable-wrap { border-radius: 12px; }
#settingDialog table.timetable td.pick:focus-visible { outline: 2px solid var(--green-800); outline-offset: -2px; }
#settingDialog table.timetable td.chosen .cls { color: #8a5a11; }
/* The heading of a claimed period ("Pemulihan") and the subject + class under it must both stay
   readable on the amber claim colour. */
#settingDialog table.timetable td.chosen .sub { color: #6b4708; }
#settingDialog table.timetable td.free .hint { font-size: 9px; }
.setting-count { margin: 10px 0 0; color: var(--muted); font-size: 12px; }
/* Baris status simpanan: kekal di sisi tanda yang dilindunginya, kerana toast hilang dalam tiga
   saat sedangkan pentadbir perlu tahu mengapa simpanan ditolak sebelum menekan sekali lagi. */
.setting-status { margin: 8px 0 0; padding: 9px 12px; border-left: 3px solid var(--green-700); border-radius: 0 8px 8px 0; color: #42534f; background: var(--green-50); font-size: 13px; font-weight: 650; line-height: 1.5; }
.setting-status.error { border-left-color: #8f3038; color: #7a2731; background: #fdf1f2; }
#settingCellDialog { padding: 24px; max-height: calc(100dvh - 24px); overflow-y: auto; }
#settingCellDialog .dialog-head { align-items: flex-start; gap: 14px; }
#settingCellDialog .dialog-head > div { min-width: 0; }
#settingCellDialog .dialog-head h2 { line-height: 1.25; overflow-wrap: anywhere; }
#settingCellDialog .close { flex: 0 0 auto; }
.setting-cell-help { margin: -5px 0 18px; padding: 11px 13px; border-left: 3px solid var(--green-700); border-radius: 0 10px 10px 0; color: #42534f; background: var(--green-50); font-size: 13px; line-height: 1.5; }
.setting-cell-fields { display: grid; grid-template-columns: minmax(120px, .75fr) minmax(180px, 1.25fr); gap: 12px; }
.setting-cell-fields label { min-width: 0; margin-bottom: 0; }
.schedule-switch { width: fit-content; margin: 0 0 14px; }
.schedule-pane { min-width: 0; }
.module-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; padding: 15px 17px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.module-head strong { display: block; margin-bottom: 4px; }
.module-head p { margin: 0; font-size: 12px; }
.import-layout, .settings-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 18px; align-items: start; }
.settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panel { padding: 25px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 5px 18px rgba(17,48,42,.04); }
.panel > p:not(.step) { font-size: 13px; }
.dropzone { place-items: center; min-height: 185px; margin: 20px 0; padding: 24px; border: 1.5px dashed #91b8aa; border-radius: 15px; color: var(--green-800); background: var(--green-50); text-align: center; cursor: pointer; }
.dropzone input { display: none; }
.dropzone strong, .dropzone small { display: block; }
.dropzone small { color: var(--muted); font-weight: 500; }
.upload-icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 6px; border-radius: 50%; color: #fff; background: var(--green-800); font-size: 24px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.progress { overflow: hidden; position: relative; height: 34px; margin-top: 12px; border-radius: 9px; background: #eaf0ed; }
.progress span { position: absolute; inset: 0 auto 0 0; width: var(--progress, 15%); background: var(--green-100); transition: width .2s ease; }
.progress small { position: relative; z-index: 1; display: grid; place-items: center; height: 100%; color: var(--green-800); font-weight: 750; }
.mini-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; margin: 17px 0; }
.mini-stats div { padding: 12px; border-radius: 11px; background: var(--green-50); }
.mini-stats strong, .mini-stats span { display: block; }
.mini-stats strong { font-size: 22px; }
.mini-stats span { color: var(--muted); font-size: 10px; }
.alert { margin: 10px 0; padding: 11px 13px; border-radius: 10px; color: var(--warning); background: #fff4dc; font-size: 12px; line-height: 1.45; }
.table-wrap { overflow: auto; max-height: 390px; margin: 15px 0; border: 1px solid var(--line); border-radius: 11px; }
table { width: 100%; border-collapse: collapse; font-size: 11px; }
th, td { padding: 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
th { position: sticky; top: 0; color: var(--muted); background: #f6f9f7; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.import-teacher-match { min-width: 230px; font-size: 11px; }
.check-row { grid-template-columns: 20px 1fr; align-items: center; gap: 8px; }
.check-row input { min-height: auto; width: 17px; height: 17px; }
dl { margin: 20px 0; }
dl div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
dt { color: var(--muted); font-size: 12px; }
dd { margin: 0; font-size: 12px; font-weight: 750; }
dialog { width: min(520px, calc(100% - 28px)); padding: 0; border: 0; border-radius: 20px; box-shadow: 0 28px 80px rgba(0,30,24,.28); }
dialog::backdrop { background: rgba(3,32,27,.58); backdrop-filter: blur(3px); }
dialog form { padding: 25px; }
.dialog-head { display: flex; justify-content: space-between; margin-bottom: 20px; }
.dialog-head h2 { margin: 0; }
.close { width: 34px; height: 34px; border: 0; border-radius: 9px; color: var(--muted); background: #edf2ef; font-size: 21px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px; }
.period-picker { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0; padding: 13px; border: 1px solid var(--line); border-radius: 11px; }
.period-picker label { display: block; margin: 0; }
.period-picker input { position: absolute; opacity: 0; pointer-events: none; }
.period-picker span { display: grid; place-items: center; width: 38px; height: 34px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.period-picker input:checked + span { color: #fff; border-color: var(--green-800); background: var(--green-800); }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 100; max-width: 370px; padding: 13px 16px; border-radius: 11px; color: #fff; background: #1e3732; box-shadow: var(--shadow); font-size: 12px; font-weight: 650; opacity: 0; transform: translateY(12px); pointer-events: none; transition: .2s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.menu-button { display: none; }
.hidden { display: none !important; }

@media (max-width: 1050px) {
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
  .teacher-grid { grid-template-columns: repeat(2, 1fr); }
  .import-layout, .settings-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  /* Telefon: menu sisi kiri tersembunyi dan dibuka dengan butang ☰ (tiada bar bawah). */
  .sidebar { width: min(280px, 84vw); transform: translateX(-102%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; z-index: 60; overflow-y: auto; }
  body.menu-open .sidebar { transform: none; visibility: visible; transition: transform .22s ease; box-shadow: 10px 0 34px rgba(15, 35, 30, .2); }
  body.menu-open { overflow: hidden; }
  .menu-backdrop { position: fixed; inset: 0; z-index: 55; background: rgba(10, 25, 20, .38); }
  .menu-button { display: inline-flex; flex: 0 0 auto; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 11px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; }
  .menu-button span { display: block; height: 2px; border-radius: 2px; background: var(--ink, #17302a); }
  .topbar-title { flex: 1 1 auto; min-width: 0; }
  main { margin-left: 0; padding: 0 16px 24px; }
  .topbar { padding: 19px 0 16px; }
  .top-actions .button.primary { width: 43px; overflow: hidden; padding: 10px 13px; white-space: nowrap; }
  .top-actions .button.primary::first-letter { margin-right: 20px; }
  .summary-grid { gap: 9px; }
  .metric { min-height: 112px; padding: 16px; }
  .metric strong { font-size: 32px; }
  .relief-card { grid-template-columns: 82px 1fr; gap: 12px; }
  .relief-card .candidate { grid-column: 1 / -1; }
  .teacher-grid { grid-template-columns: 1fr; }
  .form-grid, .filters.two { grid-template-columns: 1fr; }
  .panel { padding: 19px; }
  .sticky-actions { align-items: stretch; flex-direction: column; }
  .sticky-actions > div { display: grid; grid-template-columns: 1fr 1fr; }
  .section-head { align-items: start; }
  .segmented { display: none; }
  .relief-card { grid-template-columns: 90px 1fr; gap: 12px; }
  .candidate { grid-column: 1 / -1; }
  .teacher-grid { grid-template-columns: 1fr; }
  .filters.two, .form-grid { grid-template-columns: 1fr; }
  .schedule-switch { display: flex; width: 100%; }
  .schedule-switch button { flex: 1; }
  /* Parity with desktop: the relief view switcher carries .segmented too, so the blanket
     .segmented{display:none} rule above used to delete it — and with it every route to the
     Preview panel — on phones. Restore it exactly like the schedule switcher. */
  .relief-switch { display: flex; width: 100%; }
  /* A 30px control is below the 40px touch target a school phone needs; both phone switchers
     carry the compact .segmented padding, so give the pair the same floor. */
  .relief-switch button, .schedule-switch button { min-height: 40px; }
  .relief-switch button { flex: 1; }
  /* The whole week has to fit a 390px phone: five day columns beside the clock column with no
     sideways scrolling, so the cells and the clock column get tighter instead of the table wider. */
  /* On a phone the timetable is wider than the screen on purpose — the periods stay readable and the
     grid scrolls sideways, exactly like the builder's Lihat & Edit screen. The hint below says so. */
  table.timetable { min-width: 640px; font-size: 10px; }
  table.timetable th, table.timetable td { height: 42px; padding: 2px 1px; }
  table.timetable th.day, table.timetable td.day { width: 44px; font-size: 10px; }
  table.timetable td.blk .cls { font-size: 10px; }
  #settingDialog .timetable-wrap { margin: 0 -6px; }
  #settingCellDialog { padding: 18px; }
  #settingCellDialog .setting-cell-fields { grid-template-columns: 1fr; }
  #settingCellDialog .dialog-actions { position: sticky; bottom: -18px; flex-wrap: wrap; justify-content: stretch; margin: 16px -18px -18px; padding: 12px 18px 18px; background: linear-gradient(to bottom, rgba(255,255,255,.94), #fff 14px); z-index: 1; }
  #settingCellDialog .dialog-actions .button { flex: 1 1 110px; min-height: 44px; }
  #settingCellDialog .dialog-actions .button.primary { flex-basis: 100%; }
  /* The profile dialog carries the remedial teacher's "Tetapan Jadual" now. Its buttons are pressed
     with a thumb, and the base .button padding only just reaches the 40px floor at this width. */
  #teacherDialog .dialog-actions .button { min-height: 40px; }
  /* On a phone the tab row and the Eksport/Cetak row were fighting for one line and overlapped.
     Stack them: the buttons keep the desktop top-right position, the tabs keep the underline. */
  .relief-toolbar { flex-direction: column-reverse; align-items: stretch; gap: 0; }
  .relief-toolbar .button-row { justify-content: flex-end; }
  .relief-preview { padding: 12px; -webkit-overflow-scrolling: touch; }
  .relief-preview .relief-print-heading { flex-direction: column; gap: 8px; }
  .module-head { align-items: stretch; flex-direction: column; }
  .module-head .button { text-align: center; }
  .sticky-actions { bottom: 12px; align-items: start; padding: 11px 12px; }
  .sticky-actions > div { flex-wrap: wrap; justify-content: end; }
  .toast { right: 14px; bottom: 16px; left: 14px; max-width: none; }
}

@media print {
  .sidebar, .menu-button, .menu-backdrop, .topbar .top-actions, .summary-grid, .section-head, .sticky-actions { display: none !important; }
  main { margin: 0; padding: 0; }
  .view { display: none !important; }
  #view-hari-ini { display: block !important; }
  .topbar { position: static; display: block; padding: 0 0 18px; background: #fff; }
  .topbar h1[data-school]::after { content: " — " attr(data-school); }
  .relief-card { break-inside: avoid; grid-template-columns: 110px 1fr 220px; box-shadow: none; }
  .candidate-select { border: 0; appearance: none; }
  body { background: #fff; }
}

@media print {
  body.print-relief { color: #000; background: #fff; font-family: Arial, sans-serif; }
  body.print-relief .sidebar,
  body.print-relief .topbar,
  body.print-relief #view-hari-ini > :not(.relief-print-sheet),
  body.print-relief .menu-button { display: none !important; }
  body.print-relief .app-shell,
  body.print-relief .app-shell > main,
  body.print-relief #view-hari-ini { display: block !important; width: 100%; max-width: none; margin: 0; padding: 0; }
  body.print-relief .relief-print-sheet { display: block !important; }
  .relief-print-heading { position: relative; min-height: 16mm; margin-bottom: 3mm; }
  .relief-print-title { text-align: center; font-size: 10pt; line-height: 1.35; letter-spacing: .02em; }
  .relief-print-title strong, .relief-print-title span { display: block; }
  .relief-print-meta { position: absolute; top: 0; left: 0; display: grid; gap: 2mm; font-size: 8.5pt; }
  .relief-print-table { width: 100%; border: 1px solid #000; border-collapse: collapse; border-spacing: 0; table-layout: fixed; font-size: 6.5pt; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .relief-print-table th, .relief-print-table td { position: static; inset: auto; box-sizing: border-box; height: 7.5mm; padding: .7mm; border: 1px solid #000 !important; color: #000; background: #fff; text-align: center; text-transform: none; letter-spacing: 0; vertical-align: middle; white-space: normal !important; overflow-wrap: anywhere; word-break: break-word; line-height: 1.08; }
  .relief-print-table thead { display: table-header-group; }
  .relief-print-table thead th { height: 13mm; font-size: 7.5pt; }
  .relief-print-table thead th b, .relief-print-table thead th span { display: block; }
  .relief-print-table thead th b { font-size: 8.5pt; }
  .relief-col-name { width: 38mm; }
  .relief-col-label { width: 18mm; }
  .relief-print-time { font-size: 8pt !important; }
  .relief-print-name { padding: 1.2mm !important; text-align: center !important; }
  .relief-print-name-caption { display: block; margin-bottom: 2mm; font-size: 6.2pt; font-weight: 700; line-height: 1.08; }
  .relief-print-name-text { display: block; font-size: 10pt; font-weight: 800; line-height: 1.08; overflow-wrap: anywhere; }
  .relief-print-name .relief-fit-sm { font-size: 8.5pt !important; }
  .relief-print-name .relief-fit-xs { font-size: 7pt !important; }
  .relief-print-value { font-size: 6.5pt; }
  .relief-fit-sm { font-size: 5.7pt !important; letter-spacing: -.02em; }
  .relief-fit-xs { font-size: 4.9pt !important; letter-spacing: -.04em; }
  .relief-print-label { width: 18mm; font-size: 7.5pt; line-height: 1.1; }
  .relief-print-group, .relief-print-group tr { break-inside: avoid; page-break-inside: avoid; }
  .relief-print-footer { margin: 2mm 0 0; font-size: 6.5pt; }
  @page { size: A4 landscape; margin: 7mm; }
}

/* Gantian tetap: MySTEP / guru praktikal mengambil jadual guru lain */
.cover-wrap { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2, #f7faf9); }
.cover-wrap > small { color: var(--muted); line-height: 1.45; }
.cover-subjects { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.cover-title { margin: 0; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.cover-rows:not(:empty) { display: grid; gap: 12px; }
/* One row per covered teacher: the picker and its remove button share a line, the "all subjects"
   switch and the subject chips sit underneath. */
.cover-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.cover-row:first-child { padding-top: 0; border-top: 0; }
.cover-row .cover-teacher { flex: 1 1 240px; }
.cover-row .cover-remove { flex: 0 0 auto; }
.cover-row .check-row, .cover-row .chip-row { flex: 1 1 100%; margin: 0; }
.cover-add { width: auto; min-width: 0; padding: 7px 14px; font-size: 12px; font-weight: 700; }
.cover-subjects legend { padding: 0; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 12px; font-weight: 700; cursor: pointer; }
.chip:has(input:checked) { border-color: var(--brand, #0d7a6a); background: rgba(13,122,106,.08); }
.chip input { margin: 0; }
.chip:has(input:disabled) { opacity: .6; cursor: default; }
.teacher-card .cover-line { display: block; margin: 4px 0 0; font-size: 12px; font-weight: 600; color: var(--brand, #0d7a6a); }

/* Alat data: arkib, reset */
.danger-panel { border-color: #e7c9c9; }
.danger-panel .reset-grid { display: grid; gap: 8px; margin: 10px 0; }
.button.danger { background: #8f3038; color: #fff; border-color: #8f3038; }
.button.danger:hover { background: #7a262d; }
.danger-panel hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }