/* Tata letak permukaan admin sekolah (FLOW-013).
 *
 * Hanya TATA LETAK. Warna, tipografi, jarak, dan radius diambil dari kelas
 * base.css yang sudah ada (`card`, `card-content`, `row`, `stack`, `lbl`,
 * `block-soft`, `top-line`, `number`) — berkas ini tidak menulis warna maupun
 * ukuran literal; warnanya token design system PM (UI-CODELAB.pdf).
 * Seluruh kelas berawalan `admin-` dan tidak menimpa kelas milik base.css.
 */

/* ------------------------------------------------------------ cangkang
 * Sidebar, kartu pengguna, bilah atas, dan kepala halaman dari ui.css bersama lewat
 * src/screens/desk.ts (W15, bahasa visual mockup PM). Kalimat batas duduk di bawah menu;
 * kartu pengguna tetap di kaki sidebar. */

.admin-boundary { line-height: 1.45; }
.admin-desk .desk-sidebar > .button { align-self: flex-start; }
.admin-boundary svg { color: var(--color-accent); }

/* ------------------------------------------------------------ daftar baris (tabel yang runtuh) */

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

/* `.row` memberi jarak antarsel; di sini hanya kolomnya. */
.admin-row { display: grid; align-items: center; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 0.6fr) auto; }
.admin-row[data-columns="member"] { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 0.8fr); }
/* kuota: Kelas · Pagu · Terpakai · Sisa (batang + kata) · aksi. Form sunting (`li.admin-edit`) berdiri di luar kisi baris. */
.admin-row[data-columns="quota"] { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 1.6fr) auto; }
.admin-action { justify-self: end; }
.admin-cell-label { display: none; }

/* ------------------------------------------------------------ beranda */

/* Batang pagu: bentuk & lebar dari `.teacher-bar` (teacher.css); di sini hanya
 * warna per keadaan, dari token. Keadaan selalu juga ditulis sebagai kata. */
.admin-bar[data-state="safe"] > span { background: var(--color-success-text); }
.admin-bar[data-state="will_exceed"] > span, .admin-bar[data-state="exhausted"] > span { background: var(--color-danger); }
.admin-bar[data-state="no_cap"] > span { background: var(--color-text-muted); }

/* ------------------------------------------------------------ fitur tulis (MVP #3 bagian 3)
 * Email panjang, nama dari berkas CSV, dan contoh isi berkas membungkus di dalam selnya —
 * tidak pernah melebarkan halaman di HP 375 px. */

.admin-cell-name { overflow-wrap: anywhere; }
.admin-example { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-user-option { align-items: center; }
.admin-user-option > .button { flex: none; }

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

@media (max-width: 900px) {
  /* Sidebar menumpuk di atas isi (tanpa bilah bawah): dipadatkan — menu jadi baris pil
   * yang membungkus; judul grup disembunyikan rupa, tetap menjadi nama daftar lewat
   * aria-labelledby (rujukan ke elemen tersembunyi tetap dihitung). */
  .admin-desk .desk-sidebar { gap: var(--space-3); }
  .admin-desk .desk-sidebar > nav { flex-direction: row; flex-wrap: wrap; gap: var(--space-1); }
  .admin-desk .desk-sidebar > nav > div > p { display: none; }
  .admin-desk .side-nav { flex-direction: row; flex-wrap: wrap; gap: var(--space-1); }
  .admin-desk .side-nav a { min-height: var(--size-touch); }

  .admin-list-header { display: none; }
  /* Tabel runtuh menjadi kartu baris: label tiap sel muncul, tanpa gulir horizontal. */
  .admin-row, .admin-row[data-columns="member"], .admin-row[data-columns="quota"] { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .admin-cell-label { display: inline; }
  .admin-action { justify-self: stretch; }
  .admin-action .button { width: 100%; }
}