/* Lapisan aplikasi di atas design system Organic.
   Semuanya dibangun dari token organic.css — tidak ada warna, font, atau skala
   baru (DESAIN.md §2, §5). Kalau butuh nilai yang belum ada tokennya, turunkan
   dari token, jangan tulis angka baru. */

/* ── app shell ─────────────────────────────────────────────── */
.app-shell { display: grid; grid-template-columns: 244px 1fr; min-height: 100vh; }

.sidebar {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-4) var(--space-3);
  background: var(--color-neutral-900); color: var(--color-neutral-200);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar-brand {
  display: flex; flex-direction: column; align-items: flex-start;
  text-decoration: none; color: inherit; padding: 0 var(--space-2);
}
.sidebar-logo {
  width: 88px; height: 88px; border-radius: 50%; margin-bottom: var(--space-3);
  box-shadow: var(--shadow-sm); object-fit: cover;
}
.sidebar-brand .nama {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 19px; line-height: 1.15; color: var(--color-neutral-100);
}
.sidebar-brand .tagline {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent-400);
}

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sidebar-nav a {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: 999px; text-decoration: none; font-size: 14px;
  color: var(--color-neutral-300);
}
.sidebar-nav a:hover { background: color-mix(in srgb, var(--color-neutral-100) 10%, transparent); color: var(--color-neutral-100); }
.sidebar-nav a[aria-current='page'] { background: var(--color-accent); color: var(--color-bg); }
.sidebar-nav a.mati { opacity: 0.45; cursor: default; }
.sidebar-nav a.mati:hover { background: transparent; color: var(--color-neutral-300); }
.ikon {
  /* Lucide via <symbol>+<use>: presentation attributes pada sprite hanya
     berlaku di tree asalnya, tidak ikut tersalin ke shadow tree <use> —
     jadi warnanya harus ditegaskan lagi di sini lewat CSS, kalau tidak
     browser jatuh ke default SVG (fill hitam solid). */
  fill: none; stroke: currentColor; stroke-width: 2.75;
  stroke-linecap: round; stroke-linejoin: round;
}
.sidebar-nav .ikon { width: 18px; height: 18px; flex: none; }

.sidebar-kaki { font-size: 12px; color: var(--color-neutral-400); padding: 0 var(--space-3); }
.sidebar-kaki a { color: var(--color-accent-400); }
.sidebar-kaki .nama-user { color: var(--color-neutral-100); font-weight: 600; }

.konten {
  padding: var(--space-6) var(--space-8); max-width: 1180px;
  /* min-width:0 lepas dari default grid item ("tidak menyusut di bawah
     ukuran konten") — tanpa ini, satu elemen ber-min-width tetap (mis.
     diagram lebar di Panduan) memaksa seluruh app-shell melebar. */
  min-width: 0;
}

/* ── kepala halaman ────────────────────────────────────────── */
.kepala { display: flex; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-6); }
.kepala h1, .kepala h2 { margin-bottom: var(--space-1); }
.kepala .sub { font-size: 14px; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.kepala .aksi { margin-left: auto; display: flex; gap: var(--space-2); align-items: center; }

/* ── stat tile (DESAIN.md §5.3) ────────────────────────────── */
.stat-baris { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-3); }
.stat { background: var(--color-surface); border-radius: calc(var(--radius-lg) * 1.15); padding: var(--space-4); }
.stat .label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.stat .angka { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 34px; line-height: 1.1; margin: var(--space-1) 0; }
.stat .rincian { font-size: 12px; color: color-mix(in srgb, var(--color-text) 60%, transparent); }

/* ── kartu insight ─────────────────────────────────────────── */
.insight {
  display: flex; gap: var(--space-3); align-items: center;
  background: var(--color-accent-100); border: 1px solid var(--color-accent-300);
  border-radius: calc(var(--radius-lg) * 1.15); padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}
.insight .isi { flex: 1; font-size: 14px; color: var(--color-accent-900); }
.insight .judul { font-family: var(--font-heading); font-size: 16px; color: var(--color-accent-800); }

/* ── notifikasi ────────────────────────────────────────────── */
.notif { border-radius: 999px; padding: var(--space-2) var(--space-4); font-size: 14px; margin-bottom: var(--space-4); }
.notif-galat { background: var(--color-accent-100); color: var(--color-accent-800); }
.notif-sukses { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }

/* ── tabel: varian padat untuk layar operasional ───────────── */
.table-padat td, .table-padat th { padding: 6px var(--space-2); }
.table td.angka, .table th.angka { text-align: right; font-variant-numeric: tabular-nums; }
.table .nowrap { white-space: nowrap; }
.kosong { text-align: center; padding: var(--space-8); color: color-mix(in srgb, var(--color-text) 50%, transparent); }

/* ── panel ─────────────────────────────────────────────────── */
.panel { background: var(--color-surface); border-radius: calc(var(--radius-lg) * 1.15); padding: var(--space-4); }
.panel + .panel { margin-top: var(--space-4); }
.panel-judul { font-family: var(--font-heading); font-size: 17px; margin-bottom: var(--space-3); }

/* ── baris filter ──────────────────────────────────────────── */
.filter { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-end; margin-bottom: var(--space-4); }
.filter .field { min-width: 150px; }
.filter select.input { min-height: 36px; }

/* ── form ──────────────────────────────────────────────────── */
.form-sempit { max-width: 420px; }
.field + .field { margin-top: var(--space-3); }
.bantuan { font-size: 12px; color: color-mix(in srgb, var(--color-text) 55%, transparent); margin-top: 4px; }
.cek { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.cek input { width: 17px; height: 17px; accent-color: var(--color-accent); cursor: pointer; }

/* ── halaman login ─────────────────────────────────────────── */
.login-layar { min-height: 100vh; display: grid; place-items: center; padding: var(--space-4); }
.login-kartu { width: min(380px, 100%); background: var(--color-surface); border-radius: calc(var(--radius-lg) * 1.15); padding: var(--space-6); box-shadow: var(--shadow-md); }
.login-kartu .merek { text-align: center; margin-bottom: var(--space-6); }
.login-kartu .merek .nama { font-family: var(--font-heading); font-size: 26px; }
.login-kartu .merek .tagline { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-700); }

/* ── log audit ─────────────────────────────────────────────── */
.diff { font-size: 12px; line-height: 1.5; }
.diff .sebelum { color: color-mix(in srgb, var(--color-text) 55%, transparent); text-decoration: line-through; }
.diff .sesudah { color: var(--color-accent-800); }

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
  .sidebar-nav { flex-direction: row; flex-wrap: wrap; flex: 1 1 100%; }
  .sidebar-kaki { flex: 1 1 100%; }
  .konten { padding: var(--space-4); }
}