/* Gaya khusus layar pengajar. Token dan komponen bersama ada di
 * packages/web-shared/public/base.css; nilai dari .ai/specs/design-system-pm.md §5–§7.
 *
 * Tidak ada satu pun gaya sebaris di layar pengajar — CSP melarangnya, dan
 * lebar batang proporsi pun dipilih di sini lewat `data-percent`, bukan lewat
 * atribut `style` dari JavaScript.
 *
 * GD8: jarak, tipografi, radius, dan ukuran minimum memakai token; yang tersisa
 * sebagai px hanya ukuran struktural (lebar titik garis waktu, tinggi batang,
 * lebar kolom grid, tebal garis 1 px) — dijaga `test/teacher-styles.test.ts`.
 */

/* ------------------------------------------------------------ cangkang
 * Sidebar, kartu pengguna, bilah atas, dan kepala halaman dari ui.css bersama lewat
 * src/screens/desk.ts (W15, mockup PM h.1–6). Di sini hanya yang khas pengajar. */

/* Blok Lembaga di bawah merek (DEC-019 butir 8): kartu redup kecil, nama boleh panjang. */
.teacher-school { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-subtle); border: 1px solid var(--color-border); }
.teacher-school-name { overflow-wrap: anywhere; }
/* Tautan "Beralih ke admin lembaga" selebar isinya, rata kiri seperti butir menu. */
.teacher-desk .desk-sidebar > .button { align-self: flex-start; }

.teacher-scroll { width: 100%; overflow-x: auto; }
.teacher-right { align-items: flex-end; }

/* Tabel "Nilai per siswa" (grade-summary.ts, cacat #4). Kepala th bawaan ui.css
 * `nowrap`, jadi kepala kriteria panjang melebar dan kolom Siswa terjepit sampai nama
 * terlipat per kata. Di sini kebalikannya: nama tidak terlipat dan kolomnya lengket di
 * kiri saat tabel digulir mendatar; kepala kriteria boleh terlipat antarkata. */
.teacher-grade-student { white-space: nowrap; min-width: 14ch; }
.teacher-grade-grid table th { white-space: normal; min-width: 10ch; vertical-align: bottom; }
.teacher-grade-grid table th:first-child,
.teacher-grade-grid table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--color-surface); box-shadow: inset -1px 0 0 var(--color-border); }
.teacher-grade-grid table th:first-child { background: var(--color-surface-subtle); }
.teacher-grade-grid table tbody tr:hover td:first-child { background: var(--color-surface-subtle); }

/* ------------------------------------------------- penanda dan bukti */

.teacher-marker { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-1); }
.teacher-reason + .teacher-reason { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px dashed var(--color-border); }

.teacher-evidence-list { gap: var(--space-2); }
.teacher-evidence {
  display: inline-flex; align-items: baseline; gap: var(--space-2);
  max-width: 100%; padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border); border-radius: var(--radius-xs); background: var(--color-surface);
}
.teacher-evidence > :first-child { color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; }

.teacher-evidence-metric + .teacher-evidence-metric { padding-top: var(--space-2); border-top: 1px solid var(--color-border); }

/* ------------------------------------------------------- garis waktu */

.teacher-timeline { list-style: none; margin: 0; padding: 0; }
.teacher-timeline > li { position: relative; display: flex; gap: var(--space-3); padding: 0 0 var(--space-4) 0; }
.teacher-timeline > li::before {
  content: ""; position: absolute; left: 4px; top: 14px; bottom: 0; width: 1px; background: var(--color-border);
}
.teacher-timeline > li:last-child::before { display: none; }
.teacher-dot {
  flex: 0 0 auto; width: 9px; height: 9px; margin-top: var(--space-1);
  border-radius: var(--radius-full); background: var(--color-surface); border: 1.5px solid var(--color-accent);
}

/* ------------------------------------------------ batang proporsional */

.teacher-bar { display: block; height: 6px; border-radius: var(--radius-full); background: var(--color-surface-muted); overflow: hidden; }
.teacher-bar > span { display: block; height: 100%; width: 0; border-radius: var(--radius-full); background: var(--color-accent); }
.teacher-bar[data-percent="10"] > span { width: 10%; }
.teacher-bar[data-percent="20"] > span { width: 20%; }
.teacher-bar[data-percent="30"] > span { width: 30%; }
.teacher-bar[data-percent="40"] > span { width: 40%; }
.teacher-bar[data-percent="50"] > span { width: 50%; }
.teacher-bar[data-percent="60"] > span { width: 60%; }
.teacher-bar[data-percent="70"] > span { width: 70%; }
.teacher-bar[data-percent="80"] > span { width: 80%; }
.teacher-bar[data-percent="90"] > span { width: 90%; }
.teacher-bar[data-percent="100"] > span { width: 100%; }

/* ------------------------------------------------------------ menilai */

.teacher-criterion + .teacher-criterion { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.teacher-score { gap: var(--space-2); }
.teacher-score-button {
  min-width: var(--size-control); min-height: var(--size-control); padding: var(--space-1) var(--space-3);
  font: inherit; font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary); background: var(--color-surface);
  border: 1px solid var(--color-border-input); border-radius: var(--radius-md); cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.teacher-score-button:hover { background: var(--color-surface-muted); }
.teacher-score-button[aria-pressed="true"] { color: var(--color-on-accent); background: var(--color-accent); border-color: var(--color-accent); }

/* ---------------------------------------------------- terbitkan tugas */

.teacher-steps { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.teacher-steps > li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.teacher-steps > li + li::before { content: ""; width: 22px; height: 1px; background: var(--color-border-strong); }
.teacher-steps > li[data-state="current"] { color: var(--color-text); font-weight: var(--font-weight-semibold); }
.teacher-steps > li[data-state="completed"] { color: var(--color-accent-strong); }
.teacher-number {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: var(--radius-full);
  font-size: var(--font-size-xs); font-variant-numeric: tabular-nums;
  border: 1px solid var(--color-border-input); background: var(--color-surface);
}
.teacher-steps > li[data-state="current"] .teacher-number { color: var(--color-on-accent); background: var(--color-accent); border-color: var(--color-accent); }
.teacher-steps > li[data-state="completed"] .teacher-number { border-color: var(--color-accent-border); background: var(--color-accent-soft); color: var(--color-accent-strong); }

.teacher-template { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-3); }
.teacher-template-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); text-align: left; }
.teacher-template-card[aria-pressed="true"] { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }

.teacher-preview { display: flex; flex-direction: column; gap: var(--space-2); }
.teacher-example { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.teacher-example[data-result="refused"] { border-color: var(--color-danger-border); background: var(--color-danger-soft); }
.teacher-example[data-result="passed"] { border-color: var(--color-success-border); background: var(--color-success-soft); }

.teacher-ladder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.teacher-ladder-button {
  display: flex; flex-direction: column; gap: var(--space-1); align-items: flex-start;
  padding: var(--space-2) var(--space-3); font: inherit; text-align: left; cursor: pointer;
  color: var(--color-text-secondary); background: var(--color-surface);
  border: 1px solid var(--color-border-input); border-radius: var(--radius-md);
}
.teacher-ladder-button[aria-pressed="true"] { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-accent-strong); }
.teacher-ladder-button[data-off="true"] { opacity: 0.5; }

.teacher-files { display: flex; flex-direction: column; gap: var(--space-1); max-height: 260px; overflow: auto; }
.teacher-count { display: inline-flex; align-items: center; gap: var(--space-2); }
.teacher-count input { width: 82px; text-align: center; }

.teacher-failed { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-1); }

@media (max-width: 900px) {
  .teacher-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .teacher-steps > li + li::before { width: 10px; }
}

/* ------------------------------------------ cangkang bermenu & HP (GD4, GD8, W15)
 * Menu kiri `sidebarNav` ui.ts (aktif: latar accent-soft + semibold, base.css §5.6);
 * bilah bawah `.bar-tab` (aktif: pil accent-soft di balik ikon + warna + semibold,
 * school.css §5.8). Bilah atas bersama melayani semua lebar — tanpa kepala HP terpisah. */

.teacher-bar-bottom { display: none; }

/* Jumlah tab mengikuti rute terdaftar (K18), bukan dipatok empat kolom. */
.teacher-bar-bottom { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.teacher-bar-bottom a { min-height: var(--size-touch); }

/* ------------------------------------------------------ Dashboard (GD5, GD8) */

.teacher-pending,
.teacher-running,
.teacher-help { list-style: none; margin: 0; padding: 0; }
/* Angka "Menunggu kamu" ditekankan lewat ukuran dan bobot, bukan warna. */
.teacher-pending .bold { font-size: var(--font-size-lg); }

/* Tugas berjalan (lebar) · Perlu bantuan (sempit), PDF h.1; satu kolom di layar sempit. */
.teacher-home-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
/* Kolom tetap: judul · progres · menunggu dinilai — batang progres sejajar antarbaris. */
.teacher-running-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 0.6fr); align-items: center; gap: var(--space-4); }
.teacher-running-row > .badge { justify-self: end; }
.teacher-help-row { display: flex; align-items: flex-start; gap: var(--space-3); }

/* ------------------------------------- Kelas & Siswa, halaman kelas (GD6, GD8)
 * Tab bersegmen §5.9: trek surface-muted, tab aktif latar surface + semibold. */

.teacher-tab ul { list-style: none; margin: 0; padding: 0; }
/* Kelompok terlipat (Selesai, K16): ringkasan kapital kecil yang dapat dibuka. */
.teacher-fold > summary { cursor: pointer; padding-block: var(--space-2); }
.teacher-tab ul { display: inline-flex; gap: var(--space-1); padding: var(--space-1); border-radius: var(--radius-lg); background: var(--color-surface-muted); }
/* Konteks datar `.teacher-tab .button-ghost`. BINGKAI wadahnya: trek `.teacher-tab ul` berlatar surface-muted yang
 * mengelilingi semua segmen; tab aktif berlatar surface dan bergaris (aturan di bawah). */
.teacher-tab .button-ghost { background: transparent; border-color: transparent; }
.teacher-tab a { color: var(--color-text-muted); border-radius: var(--radius-md); }
.teacher-tab a:hover { color: var(--color-text); background: var(--color-surface-subtle); }
.teacher-tab a[aria-current="page"] { background: var(--color-surface); color: var(--color-text); font-weight: var(--font-weight-semibold); box-shadow: inset 0 0 0 1px var(--color-border); }

/* Saring status penautan Git (git-panels.ts): Hantu kini berbatas, jadi tombol belum-terpilih tidak lagi dibedakan oleh
 * kepolosannya — yang terpilih (aria-pressed) berlatar accent-soft, pola yang sama dengan .teacher-ladder-button. */
.git-filter .button[aria-pressed="true"] { background: var(--color-accent-soft); border-color: var(--color-accent-border); color: var(--color-accent-strong); }

.teacher-code-summary > summary { cursor: pointer; }
.teacher-invite-code { font-family: var(--font-mono); font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); letter-spacing: 0.08em; }

/* ---------------------------------------------------- menu Tugas (GD9)
 * Filter berlabel terlihat (`.field` + `.choice` yang ada). */

.teacher-filter { align-items: flex-end; }
.teacher-filter-bar { align-items: flex-end; gap: var(--space-4); }

/* ------------------------------------------------ menu Penilaian (GD10) */

.teacher-queue { display: block; }

@media (max-width: 1100px) {
  .teacher-home-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------ HP ≤ 900 px (GD4–GD10, W15) */

@media (max-width: 900px) {
  .teacher-desk .desk-sidebar { display: none; }
  /* Bilah atas tetap terlihat saat menggulir — pengganti kepala HP lama. */
  .teacher-desk .desk-topbar { position: sticky; top: 0; }
  .teacher-bar-bottom { display: grid; }
  /* HP memantau, bukan menilai (5a, K10): aksi menilai tidak ditawarkan. */
  .teacher-desk-only { display: none; }
  /* Kolom Aksi antrean Penilaian hanya berisi tombol desk-only: kepala & sel ikut disembunyikan,
   * supaya kartu baris HP (.table-stack) tidak menampilkan label "AKSI" bersel kosong. */
  .teacher-queue .teacher-queue-action { display: none; }

  /* Target sentuh ≥ 44 px (--size-touch): baris daftar, tombol, pilihan, tab, ringkasan. */
  .teacher-pending > li,
  .teacher-running > li,
  .teacher-help > li { min-height: var(--size-touch); }
  .teacher-desk .button,
  .teacher-desk .choice,
  .teacher-filter-bar a { min-height: var(--size-touch); }
  .teacher-code-summary > summary { min-height: var(--size-touch); display: flex; align-items: center; }
  /* Tetap `list-item` supaya penanda buka/tutup bawaan tidak hilang. */
  .teacher-fold > summary { min-height: var(--size-touch); }

  /* Tab kelas sebagai segmen selebar penuh (K15). */
  .teacher-tab ul { display: flex; flex-wrap: nowrap; }
  .teacher-tab li { flex: 1 1 0; min-width: 0; }
  .teacher-tab a { width: 100%; min-height: var(--size-touch); }

  .teacher-filter > .field { flex: 1 1 100%; }
  .teacher-filter-bar > * { flex: 1 1 100%; }
  .teacher-running-row { grid-template-columns: minmax(0, 1fr) auto; }
  .teacher-running-row > :first-child { grid-column: 1 / -1; }
}