/* KehadiranKokum — app-specific styling (Sekolah System)
 *
 * Design tokens now live in tokens.css; shared components in system.css.
 * Load order: tokens.css -> system.css -> app.css. Do not redeclare tokens here.
 *
 * P4 note: this file still consumes legacy names (--navy, --slate-*, --state-*,
 * --shadow-*) which tokens.css §6 aliases to the shared tokens. The alias block
 * retires in P5 when these rules are translated. Template class names, layout
 * geometry, and the sticky-header table rules are untouched.
 *
 * Contract: design-repo/references/sekolah-system.md
 */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

/* Visible, consistent focus treatment everywhere (accessibility) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.menu-link:focus-visible,
.category-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── Rewrite shell (P2) ───────────────────────────────────────────────────── */

.app-body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.45;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-dark) 100%);
  color: #fff;
  padding: 0.7rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-md);
}

.topbar-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.brand {
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.01em;
}

.year-picker {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.9rem;
  color: #dbeafe;
}

.year-picker select {
  padding: 0.35rem 0.55rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 0.9rem;
}

.year-picker select option {
  color: var(--ink);
}

.layout {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-4);
  align-items: flex-start;
}

.menu-wrap {
  position: relative;
  flex: 0 0 230px;
  transition: flex-basis 0.2s ease;
}

.menu-viewport {
  min-width: 0;
}

.menu-body {
  width: 100%;
  min-width: 0;
}

.menu-wrap.is-collapsed {
  flex-basis: 3rem;
  overflow: hidden;
}

.menu-wrap.is-collapsed .menu-body {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.menu-collapse {
  position: absolute;
  top: 0.75rem;
  right: -0.9rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  min-height: 4rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--navy);
  box-shadow: var(--shadow-sm);
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.menu-collapse:hover {
  background: var(--slate-100);
  color: var(--accent-dark);
}

.menu {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: var(--space-3);
}

.menu-chev {
  display: none; /* desktop sidebar doesn't scroll */
}

.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li + li {
  margin-top: var(--space-1);
}

.menu-link {
  display: block;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--slate-700);
  font-size: 0.95rem;
  font-weight: 500;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.menu-link:hover {
  background: var(--slate-100);
  color: var(--ink);
}

.menu-link.active {
  background: var(--navy);
  color: #fff;
  font-weight: 600;
  box-shadow: var(--shadow-xs);
}

.menu-link.active:hover {
  background: var(--navy);
}

.menu-link.coming {
  color: var(--slate-400);
}

.phase-tag {
  display: inline-block;
  margin-left: 0.4rem;
  font-size: 0.7rem;
  background: var(--slate-200);
  color: var(--slate-600);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
}

.content {
  flex: 1;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: var(--space-6);
}

.content h1 {
  margin-top: 0;
  font-size: 1.4rem;
  color: var(--navy);
  letter-spacing: -0.01em;
}

.year-badge {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  border-radius: 999px;
  padding: 0.15rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  vertical-align: middle;
}

h1 .btn-sm {
  margin-left: 0.75rem;
  vertical-align: middle;
}

/* TIADA MAKLUMAT — red, admitted, never hidden. Polished pill, same signal. */
.tiada-maklumat {
  display: inline-block;
  color: var(--danger);
  background: var(--danger-soft);
  border: 1px solid var(--danger-border);
  font-weight: 600;
  font-size: 0.76rem;
  white-space: nowrap;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  letter-spacing: 0.01em;
}

/* Tables */
.table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.table-scroll .data-table {
  width: max-content;
  min-width: 100%;
}

.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.92rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  /* NOTE: no overflow:hidden here — an overflow container breaks
     position:sticky headers (they stick to the table's own scrollport,
     producing ghost/paint artifacts when the page scrolls). Rounded
     corners are handled by the corner-cell radii below instead. */
}

.data-table thead th:first-child { border-top-left-radius: var(--radius-md); }
.data-table thead th:last-child { border-top-right-radius: var(--radius-md); }
.data-table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius-md); }
.data-table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--radius-md); }

.data-table th,
.data-table td {
  text-align: left;
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid var(--slate-100);
  vertical-align: top;
}

.data-table th {
  background: var(--slate-100);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--slate-600);
  font-weight: 700;
}

.data-table th.col-bil,
.data-table td.col-bil {
  width: 3.2rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.data-table tbody tr:nth-child(even) {
  background: var(--slate-50);
}

.data-table tbody tr:hover {
  background: var(--accent-soft);
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

@media (min-width: 901px) {
  .data-table thead th {
    position: sticky;
    top: var(--topbar-h);
    z-index: 1;
  }
}

/* Student row controls (pentadbir only) */
.student-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-right: 0.6rem;
  max-width: 100%;
  flex-wrap: wrap;
  vertical-align: middle;
}

.student-row-actions .inline-form { margin-left: 0; }
.student-row-actions input[type="checkbox"] { width: 1rem; height: 1rem; }

/* Chips */
.chip {
  display: inline-block;
  border-radius: 999px;
  padding: 0.18rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 600;
  margin: 0.1rem 0.15rem;
  background: var(--slate-100);
  color: var(--ink);
}

.chip-sukan_dan_permainan { background: #dcfce7; color: #166534; }
.chip-kelab_dan_persatuan { background: #dbeafe; color: #1e40af; }
.chip-badan_unit_beruniform { background: #fef3c7; color: #92400e; }
.chip-roster-removed { background: #fee2e2; color: #991b1b; }
.chip-legacy { background: #f3f4f6; color: #6b7280; font-size: 0.72rem; margin-left: 0.3rem; }
.chip.status-fokus-kehadiran { background: #fef3c7; color: #92400e; }
.chip.status-kehadiran-mencukupi { background: #dbeafe; color: #1e40af; }
.chip.status-peserta-aktif { background: #dcfce7; color: #166534; }

/* Inline chip controls (teacher assignment add/remove on Senarai Guru) */
.chip-action {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  max-width: 100%;
  min-width: 0;
  flex-wrap: wrap;
  margin-left: 0.2rem;
  vertical-align: middle;
}

.chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  color: #fff;
  background: var(--danger);
}

/* Text action used beside compact assignment selects. */
.chip-set {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 1.75rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  cursor: pointer;
  color: #fff;
  background: var(--ok, #21633d);
}

.chip-x:hover,
.chip-set:hover { filter: brightness(0.9); }

/* One shared switch dialog keeps activity options out of every student row. */
.switch-dialog {
  width: min(32rem, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}

.switch-dialog::backdrop {
  background: rgba(15, 23, 42, 0.42);
}

.switch-dialog h2 { margin-top: 0; color: var(--navy); }

.switch-dialog form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.switch-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-weight: 600;
  color: var(--slate-700);
}

.switch-field[hidden] { display: none; }

.switch-field select {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 1rem;
}

.switch-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
}

.btn-secondary { background: var(--slate-500); }
.btn-secondary:hover { background: var(--slate-600); }

.chip-select {
  flex: 1 1 clamp(8rem, 16vw, 13rem);
  width: clamp(8rem, 16vw, 13rem);
  min-width: 0;
  max-width: 100%;
  padding: 0.25rem 0.35rem;
  font-size: 0.78rem;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
}

/* Buttons & forms */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: #fff;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0.55rem 1.1rem;
  min-height: 2.5rem;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--shadow-xs);
  transition: background-color 0.12s ease, box-shadow 0.12s ease, transform 0.05s ease;
}

.btn:hover { background: var(--navy-mid); }
.btn:active { transform: translateY(1px); }

.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--danger);
  color: #fff;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.btn-danger:hover { background: #a5301f; }

.btn-link {
  margin-left: 0.75rem;
  color: var(--accent-dark);
  text-decoration: none;
  font-weight: 600;
}

.btn-link:hover { text-decoration: underline; }

.form-card {
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.form-card label { font-size: 0.85rem; font-weight: 600; color: var(--slate-700); }

.form-card input,
.form-card select {
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  background: var(--surface);
  color: var(--ink);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

/* Data Bermasalah: make an unfilled repair choice unmistakable. */
.problem-select {
  border: 2px solid var(--danger) !important;
  background: var(--danger-soft) !important;
  color: var(--danger) !important;
  font-weight: 700;
}

.problem-select:focus {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.22) !important;
}

.problem-select option {
  color: var(--ink);
  background: var(--surface);
}

.student-class {
  display: block;
  margin-top: 0.15rem;
  color: var(--slate-600);
  font-size: 0.82rem;
  font-weight: 500;
}

.student-class.tiada-maklumat {
  color: var(--danger);
}

.notice-error {
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid var(--danger-soft);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.8rem;
  font-size: 0.9rem;
}

.notice-area {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.notice {
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.8rem;
  font-size: 0.9rem;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
}

.form-row label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1 1 180px;
}

.form-row input,
.form-row select {
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  background: var(--surface);
  color: var(--ink);
}

.btn-sm {
  padding: 0.3rem 0.6rem;
  font-size: 0.8rem;
  border-radius: var(--radius-sm);
}

.notice-warn {
  background: var(--warn-soft);
  color: var(--warn);
  border: 1px solid var(--warn-border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
}

.empty { color: var(--slate-500); }

.category h2 {
  font-size: 1.05rem;
  color: var(--navy);
  border-bottom: 2px solid var(--slate-200);
  padding-bottom: 0.4rem;
}

.activity-list {
  list-style: none;
  padding: 0;
}

.activity-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--slate-100);
}

.activity-list a { color: var(--navy); font-weight: 600; text-decoration: none; }
.activity-list a:hover { color: var(--accent-dark); text-decoration: underline; }

.count { color: var(--slate-500); font-size: 0.85rem; }

.inline-form { margin-left: auto; }

.plain-list {
  list-style: none;
  padding: 0;
}

/* ── Key in Kehadiran (P3) ─────────────────────────────────────────────────── */

.today-line { margin: 0.25rem 0 var(--space-4); color: var(--slate-600); }

.session-date-form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: 0.9rem;
}

.session-date-form input {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-sm);
  font-size: 1rem;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  font-size: 0.8rem;
  color: var(--slate-600);
  margin-bottom: var(--space-3);
}

.dot {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  margin-right: 0.3rem;
  vertical-align: middle;
}

.dot-blue { background: var(--state-blue); }
.dot-green { background: var(--state-green); }
.dot-yellow { background: var(--state-yellow); }
.dot-grey { background: var(--state-grey); }

.category-cards {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}

.category-card {
  display: block;
  padding: 1.25rem 1.4rem;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.08s ease;
}

.category-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.category-card-name { display: block; font-weight: 700; font-size: 1.05rem; color: var(--navy); }

.category-card-count { display: block; margin-top: 0.3rem; font-size: 0.85rem; color: var(--slate-500); }

.keyin-list { list-style: none; padding: 0; margin: 0; }

.keyin-row {
  border-left: 6px solid var(--state-grey);
  margin-bottom: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--slate-50);
  border-top: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.keyin-row.state-blue { border-left-color: var(--state-blue); background: #eff6ff; }
.keyin-row.state-green { border-left-color: var(--state-green); background: #f0fdf4; }
.keyin-row.state-yellow { border-left-color: var(--state-yellow); background: #fefce8; }
.keyin-row.state-grey { border-left-color: var(--state-grey); }

.keyin-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.7rem 0.9rem;
  text-decoration: none;
  color: var(--ink);
}

.keyin-name { font-weight: 600; }

.keyin-meta { font-size: 0.82rem; color: var(--slate-600); }

.state-label {
  margin-left: 0.5rem;
  border-radius: 999px;
  padding: 0.08rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--slate-200);
  color: var(--slate-700);
}

.state-blue .state-label { background: var(--state-blue); color: #fff; }
.state-green .state-label { background: var(--state-green); color: #fff; }
/* P4: --state-yellow is now dark amber (was light yellow), so the label flips
   to white text to keep >= 4.5:1 (#422006 on #96610a was ~1.9:1). */
.state-yellow .state-label { background: var(--state-yellow); color: #fff; }

.notice-ok {
  background: var(--ok-soft);
  color: var(--ok);
  border: 1px solid var(--ok-border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
}

.roster-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.roster-controls select,
.roster-controls input {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-sm);
  font-size: 1rem;
}

.roster-tools {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.roster-tools #search { flex: 1; padding: 0.5rem 0.6rem; border: 1px solid var(--slate-300); border-radius: var(--radius-sm); font-size: 1rem; }

.roster-group { margin-bottom: var(--space-4); }

.roster-group h3 {
  font-size: 0.9rem;
  font-weight: 700;
  background: var(--slate-100);
  color: var(--slate-700);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  padding: 0.5rem 0.8rem;
  margin: 0;
}

.roster-table th, .roster-table td { padding: 0.5rem 0.6rem; }

.status-select {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
}

.roster-table input[type="text"] {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-sm);
  width: 100%;
  max-width: 260px;
  font-size: 0.95rem;
}

.roster-actions { margin-top: var(--space-4); }
/* Sekolah System P6: the save action lives in a sticky, thumb-reachable bar.
   48px controls, 16px inputs, zero transition — 40 taps must stay instant. */
.roster-actions {
  position: sticky;
  bottom: 0;
  bottom: env(safe-area-inset-bottom, 0px);
  z-index: 5;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: var(--space-4) calc(-1 * var(--space-6)) 0;
  padding: 0.7rem var(--space-6) calc(0.7rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid var(--border);
  box-shadow: var(--elev-float);
  backdrop-filter: blur(8px);
}
.status-select,
.roster-controls select,
.roster-controls input { min-height: 48px; }
.status-select { transition: none; }

/* ── Laporan (P4) ───────────────────────────────────────────────────────────── */

.keyin-actions { padding: 0 0.9rem 0.6rem; display: block; color: var(--accent-dark); font-weight: 600; text-decoration: none; }

.photo-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.photo-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: var(--slate-50);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
}

.photo-thumb {
  max-width: 160px;
  max-height: 120px;
  border-radius: 6px;
  object-fit: cover;
}

.photo-caption { font-size: 0.8rem; color: var(--slate-600); }

.form-card textarea {
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: inherit;
}

/* ── Laporan hub (P6) ───────────────────────────────────────────────────────── */

.count-cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.count-card {
  flex: 1 1 110px;
  background: var(--slate-50);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.7rem 0.9rem;
  text-align: center;
}

.count-card strong {
  display: block;
  font-size: 1.45rem;
  color: var(--navy);
}

.count-card span { font-size: 0.78rem; color: var(--slate-600); }

.search-form {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.search-form input {
  flex: 1;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-sm);
  font-size: 1rem;
}

.student-search-form {
  align-items: center;
  flex-wrap: wrap;
}

.student-search-form label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--slate-700);
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-4) 0;
  color: var(--slate-600);
  font-size: 0.85rem;
}

.filter-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: 0.9rem;
}

.filter-form select {
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-sm);
}

/* ── Analisa (P7) ───────────────────────────────────────────────────────────── */

.grade-dist { margin-left: 0.6rem; font-size: 0.8rem; font-weight: normal; }

.grade-chip {
  display: inline-block;
  border-radius: 6px;
  padding: 0.08rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  background: var(--slate-500);
  margin-right: 0.25rem;
}

.grade-A { background: var(--state-green); }
.grade-B { background: #65a30d; }
/* P4: --state-yellow is now dark amber; white text keeps the grade chip >= 4.5:1 */
.grade-C { background: var(--state-yellow); color: #fff; }
.grade-D { background: #f97316; }
.grade-E { background: #dc2626; }

.analisa-table { font-size: 0.85rem; }

.analisa-table th, .analisa-table td { padding: 0.4rem 0.5rem; }

.comp-cell { text-align: center; }

.comp-missing { background: var(--danger-soft); }

.trajectory { font-size: 0.78rem; color: var(--slate-700); }

.editing-row { background: #eff6ff; }

.editing-row input {
  width: 3.6rem;
  padding: 0.3rem;
  border: 1px solid var(--slate-300);
  border-radius: 6px;
  font-size: 0.9rem;
}

/* ── Import (P9) ────────────────────────────────────────────────────────────── */

.issues { font-size: 0.75rem; }

/* ── User identity + logout (H1/#6) ─────────────────────────────────────────── */

.user-area {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.user-chip {
  font-size: 0.85rem;
  color: #dbeafe;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.logout-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.75rem;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.logout-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.7);
}

/* ── Auth pages: sign-in + logout (M4/#11, H1/#6) ─────────────────────────── */

.auth-body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  min-height: 100vh;
  background:
    radial-gradient(1100px 520px at 15% -10%, rgba(13, 148, 136, 0.10), transparent 60%),
    radial-gradient(900px 480px at 100% 0%, rgba(20, 51, 79, 0.12), transparent 55%),
    var(--bg);
}

.auth-panel {
  max-width: 420px;
  margin: 4rem auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 2.25rem 1.9rem;
  text-align: center;
}

.auth-panel h1 {
  color: var(--navy);
  margin-top: 0.5rem;
  font-size: 1.3rem;
}

.auth-brand {
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--navy);
  letter-spacing: -0.01em;
}

.school-name {
  color: var(--slate-600);
  font-size: 0.95rem;
}

.auth-panel p {
  color: var(--slate-600);
  line-height: 1.55;
}

.auth-panel a {
  color: var(--accent-dark);
  font-weight: 600;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.auth-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

.btn-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.7rem 1rem;
  min-height: 2.75rem;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.12s ease, box-shadow 0.12s ease;
}

.btn-google:hover {
  background: var(--slate-50);
  box-shadow: var(--shadow-xs);
}

.btn-google svg {
  flex: none;
}

/* Mobile (<900px): sidebar becomes a horizontally scrollable strip */
@media (max-width: 900px) {
  .topbar {
    padding: 0.55rem 0.75rem;
  }

  .topbar-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem 0.75rem;
  }

  .brand {
    min-width: 0;
    font-size: clamp(0.95rem, 4.5vw, 1.1rem);
    white-space: nowrap;
  }

  .year-picker {
    grid-column: 2;
    grid-row: 1;
    margin-left: 0;
    gap: 0.35rem;
    font-size: 0.82rem;
  }

  .year-picker select {
    min-height: 2.5rem;
    padding: 0.3rem 0.45rem;
    font-size: 0.9rem;
  }

  .layout {
    flex-direction: column;
    padding: var(--space-2);
    gap: var(--space-3);
  }

  .menu-wrap {
    flex: none;
    width: 100%;
    display: block;
  }

  .menu-body {
    display: flex;
    width: 100%;
    align-items: stretch;
    gap: 0.3rem;
  }

  .menu-body .menu-chev-next {
    margin-right: 3.2rem;
  }

  .menu-collapse {
    top: 0.35rem;
    right: 0.35rem;
    width: 2.75rem;
    min-height: 2.75rem;
    font-size: 1.8rem;
  }

  .menu-wrap.is-collapsed {
    height: 2.75rem;
    min-height: 2.75rem;
  }

  .menu-wrap.is-collapsed .menu-body {
    display: none;
  }

  .menu-viewport {
    flex: 1;
    min-width: 0;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
  }

  .menu {
    flex: none;
    width: 100%;
    overflow-x: auto;
    padding: 0.4rem;
    position: relative;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox: keep the strip clean on mobile */
  }

  .menu-viewport::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    width: 3.5rem;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--surface) 72%);
  }

  .menu::-webkit-scrollbar {
    display: none; /* mobile strip: no visible scrollbar (iOS/Android) */
  }

  /* ‹ › chevrons flanking the strip: visible swipe/press affordance */
  .menu-chev {
    display: flex;
    flex: none;
    width: 2.6rem;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--navy);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: opacity 0.15s ease, background-color 0.12s ease;
  }

  .menu-chev:hover {
    background: var(--slate-100);
  }

  .menu-chev.is-dimmed {
    opacity: 0.35;
  }

  .menu ul {
    display: flex;
    width: max-content;
    min-width: 100%;
    gap: 0.3rem;
    padding-right: 1.75rem;
    white-space: nowrap;
  }

  .menu li {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .menu li + li { margin-top: 0; }

  .menu-link {
    font-size: 0.85rem;
    padding: 0.55rem 0.7rem;
    white-space: nowrap;
  }

  .content {
    width: 100%;
    min-width: 0;
    padding: var(--space-4);
  }

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

  /* Roster/repair tables scroll inside their own region, never the page */
  .table-scroll {
    border-radius: var(--radius-md);
  }

  /* Assignment controls resize to the viewport and stay touch-friendly */
  .chip-action { gap: 0.4rem; }

  .chip-select {
    flex: 1 1 9rem;
    width: auto;
    min-width: 7rem;
    max-width: 100%;
    min-height: 2.75rem;
    font-size: 1rem; /* prevents iOS zoom-on-focus */
  }

  .chip-set {
    min-height: 2.75rem;
    padding: 0.3rem 0.8rem;
    font-size: 0.9rem;
  }

  .chip-x {
    width: 2rem;
    height: 2rem;
    font-size: 0.9rem;
  }

  /* QA audit P10: touch-friendly controls on small screens */
  .user-area {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    margin-left: 0;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .user-area > form {
    display: flex;
    min-width: 0;
  }

  .user-chip {
    flex: 1 1 8rem;
    min-width: 0;
    max-width: min(12rem, 100%);
  }

  .user-area .logout-btn {
    min-height: 2.5rem;
    padding: 0.35rem 0.6rem;
    font-size: 0.8rem;
    white-space: nowrap;
  }

  .roster-controls { flex-wrap: wrap; }
  /* 16px on mobile: prevents iOS zoom-on-focus mid-roster. */
  .status-select,
  .roster-controls select,
  .roster-controls input,
  #search { font-size: 16px; }
  .roster-actions {
    margin: var(--space-4) calc(-1 * var(--space-4)) 0;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  .roster-actions .btn { flex: 1 1 auto; }
  .roster-controls select,
  .roster-controls input,
  .status-select,
  .btn,
  .btn-danger,
  .btn-google,
  .logout-btn,
  .form-card input,
  .form-card select,
  .form-card textarea {
    min-height: 2.75rem;
    font-size: 1rem; /* prevents iOS zoom-on-focus */
  }

  .roster-table { display: block; overflow-x: auto; white-space: nowrap; }

  .data-table thead th { position: static; }
}

@media (max-width: 480px) {
  .auth-panel { margin: 2rem 0.75rem; padding: 1.6rem 1.1rem; }

  .data-table { display: block; overflow-x: auto; }

  /* Let the Data Bermasalah month-list pill wrap instead of truncating */
  .tiada-maklumat {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.4;
    border-radius: 0.5rem;
  }

  .user-chip { max-width: min(12rem, 34vw); }

  .keyin-meta { display: block; margin-top: 0.25rem; }
}

.quick-links a {
  text-decoration: none;
  color: var(--navy);
  font-weight: 600;
}

.quick-links .count-card {
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.quick-links .count-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-xs);
}

/* ── P11 charts ─────────────────────────────────────────────────────────── */
.charts { display: flex; flex-direction: column; gap: 1rem; }
.chart-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow-xs, none);
}
.chart-card h3 { margin: 0 0 0.75rem; font-size: 0.95rem; color: var(--navy); }
.chart-svg { width: 100%; height: auto; display: block; }
.chart-bar { opacity: 0.9; }
.chart-bar:hover { opacity: 1; }
.chart-present { fill: #2e9e5b; }
.chart-late    { fill: #e0a83c; }
.chart-excused { fill: #5b8dd9; }
.chart-absent  { fill: #d9534f; }
.chart-pajsk   { fill: #6a5acd; }
.chart-class   { fill: #2a9d8f; }
.chart-legend  { margin: 0.5rem 0 0; font-size: 0.8rem; color: #475569; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.legend-dot    { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 0.25rem; }