/* codelab office — gaya khas web office.
 *
 * Token, komponen, cangkang meja, navigasi samping, dan layar masuk ada di
 * packages/web-shared/public/base.css, yang dimuat index.html SEBELUM berkas ini.
 * Berkas ini hanya memuat kelas milik office (awalan `office-`); kelas bersama
 * tidak didefinisikan ulang di sini. Office tidak memuat gaya sekolah.
 *
 * Nilai visual dari token design system PM (.ai/specs/design-system-pm.md §5–§7,
 * doc/UI-CODELAB.pdf): tidak ada literal warna, dan tidak ada token baru — hanya
 * penimpaan token yang sudah ada. Kartu office memakai `.card` bersama
 * (`--radius-card` 16; keputusan P3, bukan 12 di PDF). Tidak ada gaya sebaris
 * (CSP). Komponen tata letak & data bersama ada di packages/web-shared/public/ui.css
 * (dimuat sesudah base.css, sebelum berkas ini).
 */

/* ------------------------------------------------------------ cangkang */

/* Sidebar office 252 (PDF h.13–14), pengajar 268 (bawaan base.css). Sidebar, kartu pengguna,
   bilah atas, kartu metrik, tabel, chip, batang, dan paginasi dari ui.css bersama (W13). */
[data-surface="office"] { --size-sidebar: 252px; }

/* ------------------------------------------------------------ sel tabel lembaga (PDF h.13) */

/* Cacat #13: tabel lebar otomatis menyempitkan kolom ke lebar min-content-nya. Dengan
   `overflow-wrap: anywhere` itu satu huruf, sehingga di 375/768 px nama lembaga patah per huruf.
   Sel nama diberi lebar minimum dan kata hanya dipatah bila benar-benar meluber (`break-word`
   tidak mengecilkan min-content); sisa lebar tabel digulir di `.table-scroll` bersama. */
.office-entity { display: flex; align-items: center; gap: var(--space-3); min-width: 14rem; }
.office-entity .icon-tile { width: var(--size-avatar); height: var(--size-avatar); flex-shrink: 0; }
.office-entity-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.office-entity-name { font-weight: var(--font-weight-semibold); color: var(--color-text); text-decoration: none; overflow-wrap: break-word; }
.office-entity-name:hover { color: var(--color-accent-strong); text-decoration: underline; }
.office-entity-meta { font-size: var(--font-size-xs); color: var(--color-text-muted); overflow-wrap: break-word; }
.office-usage { display: flex; flex-direction: column; gap: 6px; min-width: 190px; }
.office-usage-text { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--font-size-xs); white-space: nowrap; }
.office-table-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; width: 100%; }
.office-table-footer:empty { display: none; }

/* ------------------------------------------------------------ rincian (daftar definisi) */

.office-dl { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-3) var(--space-4); margin: 0; font-size: var(--font-size-md); }
.office-dl dt { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.office-dl dd { margin: 0; overflow-wrap: anywhere; color: var(--color-text); }

/* ------------------------------------------------------------ langkah (daftarkan sekolah) */

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

/* ------------------------------------------------------------ HP */

@media (max-width: 600px) {
  .office-dl { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .office-dl dd + dt { margin-top: var(--space-3); }
  /* Langkah yang bukan langkah kini hanya menampilkan nomornya. */
  .office-step > li:not([data-state="current"]) .office-step-label { display: none; }
  .office-step > li + li::before { width: var(--space-3); }
}