/* AyamQ Smart - lembar gaya tunggal.
   Aturan dan alasan lengkap: docs/design-system/MASTER.md
   Ringkas: kerapatan data gaya dasbor operasional, tetapi semua yang disentuh jari
   dibuat besar; satu keluarga ikon garis; warna hanya untuk membawa arti; dan
   halaman harus tetap terbaca di layar 360 px di dalam kandang. */

/* ==========================================================================
   1. TOKEN
   ========================================================================== */
:root {
  /* ------------------------------------------------------------------------
     Warna - diambil langsung dari logo AyamQ.

     Logo memuat empat warna yang semuanya dipakai di sini, supaya tampilan dan
     logo terasa satu benda:
       hijau tua kebiruan  (bulu & badan ayam)  -> --brand, topbar, menu aktif
       hijau terang        (aksen bulu)         -> --ok, tanda sehat
       emas / amber        (paruh, kaki, cincin) -> --gold, sorotan & julukan
       merah               (jengger & balon)    -> --danger, peringatan

     Netralnya ditarik sedikit ke arah cyan logo (#0d6661), bukan hijau rumput,
     supaya latar kartu dan jalur tabel ikut terasa "AyamQ" dan bukan sekadar
     abu-abu netral. Semua pasangan diukur di tools/cek-kontras.php.
     ------------------------------------------------------------------------ */
  --ink: #0c1a15;
  --ink-soft: #45564d;
  --ink-faded: #5e6f66;
  --bg: #f2f6f4;
  --surface: #ffffff;
  --surface-2: #ecf2ef;
  --surface-3: #e2eae6;
  --line: #d9e4de;
  /* Tepi kolom isian harus terlihat jelas (>=3:1), bukan sekadar pemisah halus. */
  --line-strong: #84978e;

  --brand: #14663c;
  --brand-dark: #0f4d2d;
  --brand-tint: #e4f1e9;
  --brand-line: #b7d6c3;

  --ok: #166f43;
  --ok-tint: #e2f3e8;
  --ok-line: #aedbbd;
  --warn: #8a5b00;
  --warn-tint: #fbf1da;
  --warn-line: #e9cb90;
  --danger: #a51d1d;
  --danger-tint: #fbe6e6;
  --danger-line: #eeb2b2;
  --info: #1f5c8a;
  --info-tint: #e5eff8;
  --info-line: #b2d0e6;

  /* Emas - warna paruh dan cincin pada logo. Dipakai hemat: sorotan kepala
     halaman masuk, garis julukan, dan tanda angka yang layak dipuji. */
  --gold: #e0b357;
  --gold-deep: #8a6414;
  --gold-tint: #fbf2de;
  --gold-line: #e6c887;

  /* Tepi pita kepala halaman dan menu aktif - hijau terang dari bulu ayam. */
  --brand-glow: #2f945f;

  --focus: #14663c;

  /* Warna ikon menu. Warnanya sengaja dibedakan per kelompok menu supaya mata cepat
     menemukan bagian yang dituju, bukan sekadar hiasan. Nadanya diambil dari keluarga
     warna logo: hijau (brand), cyan (aksen bulu), dan emas (paruh), lalu sisanya
     dipakai untuk kelompok yang memang perlu dibedakan - termasuk merah jengger untuk
     peringatan. Semua nilai sudah diukur >=3:1 di atas putih maupun di atas latar menu
     aktif (lihat tools/cek-kontras.php). */
  --ic-green: #14663c;   /* dasbor - warna brand */
  --ic-blue: #1c5c93;    /* laporan dan pekerjaan lapangan */
  --ic-teal: #0d6661;    /* siklus dan panen - cyan logo */
  --ic-olive: #5c6b18;   /* kandang dan farm */
  --ic-amber: #8a5b00;   /* keuangan dan pembelian - emas logo */
  --ic-violet: #6a3d9c;  /* rekap dan data induk */
  --ic-magenta: #9c2a63; /* mitra dan kontrak */
  --ic-red: #a51d1d;     /* peringatan dan notifikasi - merah jengger */
  --ic-brown: #7a4a1f;   /* kepemilikan dan pengguna */
  --ic-slate: #4c5d54;   /* pengaturan dan sistem */

  /* Huruf - satu keluarga sistem, tanpa unduhan (lihat MASTER.md) */
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --text-h1: 22px;
  --text-h2: 17px;
  --text-title: 16px;
  --text-body: 16px;
  --text-label: 13px;
  --text-hint: 13px;
  --text-big: 26px;

  /* Ruang, sudut, bayangan */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(15, 26, 20, .06);
  --shadow-2: 0 4px 14px rgba(15, 26, 20, .10);
  --shadow-3: 0 14px 40px rgba(15, 26, 20, .20);
  --shadow-ring: 0 0 0 3px rgba(20, 102, 60, .22);

  /* Susunan */
  --sidebar-w: 248px;
  --topbar-h: 56px;
  --content-max: 1240px;
  --tap: 48px;

  /* Gerakan */
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 240ms;
  --ease: cubic-bezier(.16, 1, .3, 1);

  /* Lapisan */
  --z-sticky: 40;
  --z-nav: 60;
  --z-drawer: 80;
  --z-toast: 100;
  --z-modal: 120;

  --focus-ring: 2px solid var(--focus);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: 1.55;
}

h1, h2, h3, h4 { line-height: 1.25; }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

img, svg, video { max-width: 100%; }
img { height: auto; }

:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--brand-tint); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Ikon menu: 20px pada baris menu supaya gambar Lucide yang berstroke 2 tetap enak
   dilihat dan sejajar dengan tulisan 15px. */
.icon { display: inline-block; flex: 0 0 auto; vertical-align: -0.18em; }
.sidebar__icon .icon { width: 20px; height: 20px; }

/* Angka selalu rata kolom */
.num, .stat__value, .money-card__value, table.data td.num, table.data th.num, .stepper input, .kpi-value {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   2. KERANGKA HALAMAN
   ========================================================================== */
.app-shell { display: flex; flex-direction: column; min-height: 100vh; }
.layout { display: flex; flex: 1; align-items: stretch; min-height: 0; }
.main {
  flex: 1; min-width: 0;
  padding: var(--space-5) var(--space-5) var(--space-10);
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
}

.topbar {
  position: sticky; top: 0; z-index: var(--z-nav);
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--topbar-h);
  padding: var(--space-2) var(--space-4);
  color: #fff;
  /* Hijau brand dengan sorotan emas logo di kanan-atas dan cyan di kiri-bawah,
     supaya bilah atas bukan sekadar kotak hijau rata. */
  position: relative;
  background:
    radial-gradient(120% 190% at 100% 0%, rgba(224, 179, 87, .30) 0%, rgba(224, 179, 87, 0) 52%),
    radial-gradient(90% 160% at 0% 100%, rgba(45, 158, 154, .22) 0%, rgba(45, 158, 154, 0) 54%),
    linear-gradient(180deg, var(--brand-dark) 0%, #125c36 100%);
  border-bottom: 1px solid rgba(0, 0, 0, .14);
}
/* Garis emas tipis di kaki bilah atas: mengikat logo (cincin paruh) ke seluruh halaman. */
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg,
    var(--gold) 0%, var(--gold) 22%, var(--brand-glow) 62%, var(--ic-teal) 100%);
  opacity: .9; pointer-events: none;
}
.topbar__logo {
  width: 38px; height: 38px; flex: 0 0 38px;
  background: #fff; border-radius: 11px; padding: 3px; object-fit: contain;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .55), 0 2px 8px rgba(4, 26, 15, .28);
}
.topbar__brand { display: flex; flex-direction: column; min-width: 0; }
.topbar__title { font-size: 16px; font-weight: 700; line-height: 1.15; }
.topbar__sub { font-size: 12px; color: rgba(255, 255, 255, .80); }
.topbar__spacer { flex: 1; }
.topbar__user { text-align: right; line-height: 1.25; min-width: 0; }
.topbar__user strong { display: block; font-size: 14px; }
.topbar__user span { font-size: 12px; color: rgba(255, 255, 255, .80); }
.topbar__menu-btn {
  display: none;
  width: var(--tap); height: var(--tap);
  align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: var(--radius-sm); color: #fff; cursor: pointer;
  transition: background var(--dur-fast) ease;
}
.topbar__menu-btn:hover { background: rgba(255, 255, 255, .22); }
.topbar__menu-btn:active { transform: scale(.96); }
/* Kepala halaman terangkat sedikit setelah isi digulir, sebagai tanda posisi. */
.topbar.is-scrolled { box-shadow: var(--shadow-2); }

.sidebar {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: var(--space-3) var(--space-2) var(--space-6);
  overflow-y: auto;
  position: sticky; top: var(--topbar-h);
  max-height: calc(100vh - var(--topbar-h));
}
.sidebar__scope {
  padding: var(--space-2) var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-3);
}
.sidebar__group {
  display: flex; align-items: center; gap: var(--space-2);
  margin: var(--space-4) 0 var(--space-1);
  padding: 0 var(--space-3);
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-faded);
}
/* Garis halus di sebelah label kelompok: penanda bagian yang tidak berteriak. */
.sidebar__group::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--line-strong) 0%, rgba(0, 0, 0, 0) 100%);
  opacity: .7;
}
.sidebar a {
  position: relative;
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 42px; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--ink); font-size: 15px;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease,
              box-shadow var(--dur-fast) ease;
  overflow: hidden;
}
/* Bilah warna tipis di tepi kiri tiap baris menu, mengikuti warna ikonnya.
   Ini yang membuat menu samping terbaca berkelompok sekilas, tanpa mengubah
   warna tulisan — jadi tetap tenang dibaca berulang kali setiap hari. */
.sidebar a[data-si]::after {
  content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--si, var(--line-strong));
  opacity: .55; transition: opacity var(--dur-fast) ease, top var(--dur-fast) ease,
              bottom var(--dur-fast) ease, width var(--dur-fast) ease;
}
.sidebar a[data-si]:hover { background: var(--si-tint, var(--surface-2)); }
.sidebar a[data-si]:hover::after { opacity: 1; top: 5px; bottom: 5px; }
.sidebar a.is-active {
  background: linear-gradient(90deg, var(--si-tint, var(--brand-tint)) 0%, rgba(255, 255, 255, .35) 100%);
  color: var(--brand-dark); font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--si-line, var(--brand-line));
}
.sidebar a.is-active::after {
  opacity: 1; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--si, var(--brand)) 0%, var(--si, var(--brand)) 100%);
}
/* Nada warna per kelompok menu. Dua variabel per nada: warna kuat untuk ikon dan
   bilah, warna lembut untuk latar saat ditunjuk atau sedang dibuka. Semuanya diukur
   di tools/cek-kontras.php. */
.sidebar a[data-si="green"]   { --si: var(--ic-green);   --si-tint: #e4f1e9; --si-line: var(--brand-line); }
.sidebar a[data-si="blue"]    { --si: var(--ic-blue);    --si-tint: #e5eef8; --si-line: #b7d0e8; }
.sidebar a[data-si="teal"]    { --si: var(--ic-teal);    --si-tint: #e0f1f0; --si-line: #a9d8d5; }
.sidebar a[data-si="olive"]   { --si: var(--ic-olive);   --si-tint: #eef1dd; --si-line: #c9d29a; }
.sidebar a[data-si="amber"]   { --si: var(--ic-amber);   --si-tint: var(--warn-tint); --si-line: var(--warn-line); }
.sidebar a[data-si="violet"]  { --si: var(--ic-violet);  --si-tint: #efe8f8; --si-line: #cdb8e8; }
.sidebar a[data-si="magenta"] { --si: var(--ic-magenta); --si-tint: #fbe6f0; --si-line: #e8b3ce; }
.sidebar a[data-si="red"]     { --si: var(--ic-red);     --si-tint: var(--danger-tint); --si-line: var(--danger-line); }
.sidebar a[data-si="brown"]   { --si: var(--ic-brown);   --si-tint: #f4ece4; --si-line: #dcc4a8; }
.sidebar a[data-si="slate"]   { --si: var(--ic-slate);   --si-tint: var(--surface-2); --si-line: var(--line-strong); }
.sidebar__icon {
  width: 22px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-faded);
}
/* Warna ikon per kelompok menu. Dipakai menu samping maupun bilah bawah ABK.
   Kalau tidak diberi kelas, ikon memakai warna netral bawaan induknya. */
.si--green { color: var(--ic-green); }
.si--blue { color: var(--ic-blue); }
.si--teal { color: var(--ic-teal); }
.si--olive { color: var(--ic-olive); }
.si--amber { color: var(--ic-amber); }
.si--violet { color: var(--ic-violet); }
.si--magenta { color: var(--ic-magenta); }
.si--red { color: var(--ic-red); }
.si--brown { color: var(--ic-brown); }
.si--slate { color: var(--ic-slate); }
/* Saat menu ditunjuk atau sedang dibuka, warnanya dipertegas - tidak diganti warna
   lain, supaya pengelompokan warnanya tetap terbaca. */
.sidebar a:hover .sidebar__icon, .sidebar a.is-active .sidebar__icon { filter: saturate(1.25) brightness(.9); }
.abk-nav a.is-active .abk-nav__icon { filter: saturate(1.25) brightness(.9); }
.sidebar__badge {
  margin-left: auto; padding: 1px 7px; border-radius: var(--radius-pill);
  background: var(--danger); color: #fff; font-size: 11px; font-weight: 700;
}
.sidebar-backdrop {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  background: rgba(15, 26, 20, .45); display: none;
  backdrop-filter: none;
}
.sidebar-backdrop.is-open { display: block; }

.footer {
  padding: var(--space-4) var(--space-5) var(--space-6);
  color: var(--ink-faded); font-size: 12px; text-align: center;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

/* ==========================================================================
   3. KEPALA HALAMAN DAN JALUR LOKASI
   ========================================================================== */
.page-head {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  align-items: flex-end; margin-bottom: var(--space-4);
}
.page-head h1 { font-size: var(--text-h1); margin: 0; letter-spacing: -.01em; }
.page-head p { margin: var(--space-1) 0 0; color: var(--ink-soft); font-size: 14px; max-width: 68ch; }
.page-head__actions { margin-left: auto; display: flex; gap: var(--space-2); flex-wrap: wrap; }
/* Pita tipis di bawah judul: tiga warna logo dipakai berurutan, jadi setiap halaman
   menyebut mereknya sendiri tanpa perlu hiasan tambahan. */
.page-head::after {
  content: ""; order: 9; flex: 1 0 100%; height: 3px; border-radius: var(--radius-pill);
  background: linear-gradient(90deg,
    var(--brand) 0%, var(--brand) 30%, var(--gold) 30%, var(--gold) 46%,
    var(--brand-glow) 46%, var(--brand-glow) 78%, var(--ic-teal) 78%, var(--ic-teal) 100%);
  opacity: .85;
}

.crumbs {
  display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap;
  margin: 0 0 var(--space-2); padding: 0; list-style: none;
  font-size: var(--text-hint); color: var(--ink-faded);
}
.crumbs li { display: flex; align-items: center; gap: var(--space-1); }
.crumbs a { color: var(--ink-soft); }
.crumbs a:hover { color: var(--brand); }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }
.crumbs svg { color: var(--ink-faded); }

/* ==========================================================================
   4. KARTU, GRID, BAGIAN
   ========================================================================== */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: var(--shadow-1);
  margin-bottom: var(--space-4);
}
/* Kartu biasa diberi garis brand tipis di kiri sebagai penanda "ini satu keluarga".
   Kartu yang punya warna statusnya sendiri (kandang, perhatian) menimpanya. */
/* Kepala kartu: lambang, judul, dan tindakan. flex-wrap perlu karena judul
   panjang ditambah tombol tidak muat sebaris di layar sempit. */
.card__head {
  display: flex; gap: var(--space-3); align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
/* Anak kepala kartu harus boleh menyusut; tanpa min-width:0 blok judul menolak
   mengecil dan teksnya menabrak lambang atau tombol di sebelahnya. */
.card__head > * { min-width: 0; }
.card__title { font-size: var(--text-title); font-weight: 700; margin: 0; overflow-wrap: anywhere; }
.card__sub { font-size: var(--text-hint); color: var(--ink-soft); margin-top: 2px; overflow-wrap: anywhere; }
.card__actions { margin-left: auto; display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.card--flat { box-shadow: none; }
.card--inset { background: var(--surface-2); box-shadow: none; }
/* Kartu yang punya tindakan di dalamnya sedikit terangkat saat disentuh,
   supaya jelas mana yang bisa ditekan dan mana yang hanya keterangan. */
.card--interactive { transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease; }
.card--interactive:hover { border-color: var(--brand-line); box-shadow: var(--shadow-2); }

.grid { display: grid; gap: var(--space-4); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.section-title {
  font-size: var(--text-h2); margin: var(--space-5) 0 var(--space-3);
  display: flex; align-items: center; gap: var(--space-2);
}

/* Bagian yang bisa dibuka-tutup */
details.card > summary,
details > summary {
  cursor: pointer; font-weight: 700; font-size: 15px;
  min-height: 40px; display: flex; align-items: center; gap: var(--space-2);
  list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: ""; width: 9px; height: 9px; margin-left: auto;
  border-right: 2px solid var(--ink-faded); border-bottom: 2px solid var(--ink-faded);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur) var(--ease);
}
details[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }

/* ==========================================================================
   5. TOMBOL
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--tap); padding: var(--space-2) var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
  font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.2;
  cursor: pointer; text-align: center;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease,
              color var(--dur-fast) ease, transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.btn:hover { background: var(--surface-2); border-color: var(--line-strong); text-decoration: none; }
.btn:active { transform: translateY(1px) scale(.995); }
.btn[disabled], .btn.is-disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }

.btn--primary {
  background: linear-gradient(180deg, #176f42 0%, var(--brand) 55%, #125c36 100%);
  border-color: var(--brand-dark); color: #fff;
  box-shadow: 0 1px 2px rgba(10, 46, 27, .28), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.btn--primary:hover {
  background: linear-gradient(180deg, #1a7a49 0%, #176f42 55%, var(--brand) 100%);
  border-color: var(--brand-dark);
  box-shadow: 0 3px 10px rgba(10, 46, 27, .26), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn--danger {
  background: linear-gradient(180deg, #b52222 0%, var(--danger) 55%, #8b1717 100%);
  border-color: #8b1717; color: #fff;
  box-shadow: 0 1px 2px rgba(80, 10, 10, .28), inset 0 1px 0 rgba(255, 255, 255, .16);
}
.btn--danger:hover {
  background: linear-gradient(180deg, #c62828 0%, #b52222 55%, var(--danger) 100%);
  border-color: #8b1717;
  box-shadow: 0 3px 10px rgba(80, 10, 10, .26), inset 0 1px 0 rgba(255, 255, 255, .20);
}
.btn--ghost { background: transparent; border-color: transparent; color: var(--brand); }
.btn--ghost:hover { background: var(--brand-tint); border-color: transparent; }
.btn--link {
  min-height: 0; padding: 0; border: 0; background: none;
  color: var(--brand); font-weight: 600; text-decoration: underline; text-underline-offset: 2px;
}
/* Tombol emas: hanya untuk satu tindakan yang benar-benar menonjol di satu layar
   (misalnya "Masuk" di halaman masuk). Kalau dipakai di mana-mana, tidak lagi menonjol. */
.btn--gold {
  background: linear-gradient(180deg, #ecc478 0%, var(--gold) 52%, #d3a23f 100%);
  border-color: #b8882c; color: #3a2a05;
  box-shadow: 0 1px 2px rgba(90, 64, 12, .26), inset 0 1px 0 rgba(255, 255, 255, .40);
}
.btn--gold:hover {
  background: linear-gradient(180deg, #f1cf8e 0%, #e7bd68 52%, #d9ab4b 100%);
  border-color: #b8882c;
  box-shadow: 0 3px 12px rgba(90, 64, 12, .28), inset 0 1px 0 rgba(255, 255, 255, .46);
}
.btn--sm { min-height: 40px; padding: var(--space-1) var(--space-3); font-size: 14px; }
.btn--big { min-height: 54px; font-size: 17px; }
.btn--block { width: 100%; }
.btn-row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.btn-row--end { justify-content: flex-end; }
.btn-row--split { justify-content: space-between; }
.btn-row form { display: inline-flex; }

/* Tombol sedang menyimpan: dicegah ditekan dua kali, dan keadaannya terlihat jelas. */
.btn[data-loading] { color: transparent !important; position: relative; pointer-events: none; }
.btn[data-loading]::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff;
  animation: putar 700ms linear infinite;
}
.btn:not(.btn--primary):not(.btn--danger)[data-loading]::after {
  border-color: var(--line-strong); border-top-color: var(--brand);
}
@keyframes putar { to { transform: rotate(360deg); } }

/* ==========================================================================
   6. KOLOM ISIAN
   ========================================================================== */
.form-row { margin-bottom: var(--space-4); }
.form-row label, .form-label {
  display: block; font-size: var(--text-label); font-weight: 700; margin-bottom: 6px;
}
.hint, .form-row .hint { font-size: var(--text-hint); color: var(--ink-soft); font-weight: 400; line-height: 1.45; }
.form-row > .hint { margin-top: 6px; }

.input, .select, .textarea {
  width: 100%; min-height: var(--tap);
  padding: var(--space-3);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
  font-family: inherit; font-size: var(--text-body);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, background var(--dur-fast) ease;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-faded); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: var(--shadow-ring);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-faded); }
.textarea { min-height: 88px; resize: vertical; }
.input--short { max-width: 190px; }
.input[readonly], .input[disabled], .select[disabled] {
  background: var(--surface-2); color: var(--ink-soft); cursor: not-allowed;
}
.select { appearance: none; padding-right: var(--space-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7c73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.6 9.6 5.4 5.4 5.4-5.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--space-3) center;
}
.field { margin-bottom: var(--space-4); }
.field label { display: block; font-size: var(--text-label); font-weight: 700; margin-bottom: 6px; }
.field-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: 6px; }
.field-head label { margin-bottom: 0; }
.field-action {
  border: 0; background: transparent; color: var(--brand);
  font-family: inherit; font-size: 14px; font-weight: 700;
  padding: 11px 8px; margin: -11px -8px; min-height: 44px;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.field-action:hover { color: var(--brand-dark); }
.field-with-action { position: relative; }
.field-with-action .input { padding-right: 96px; }
.field-with-action .field-action { position: absolute; top: 2px; right: var(--space-2); }
.field-value { margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--brand-dark); }
.field-error { margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--danger); }
.input[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--danger); }

.row-inline { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: flex-end; }
.row-inline > * { flex: 1 1 180px; min-width: 0; }

/* Pengatur tambah-kurang untuk hitungan kecil */
.stepper { display: flex; align-items: center; gap: var(--space-2); }
.stepper button {
  width: 56px; height: 56px; flex: 0 0 56px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); font-size: 24px; font-weight: 700;
  cursor: pointer; line-height: 1;
  transition: background var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.stepper button:hover { background: var(--surface-2); }
.stepper button:active { transform: scale(.94); background: var(--surface-3); }
.stepper input { flex: 1; min-width: 72px; text-align: center; font-size: 22px; font-weight: 700; }

/* Pilihan kartu (radio) */
.choice-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.choice {
  position: relative; flex: 1 1 150px; min-height: 56px;
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-2); text-align: center;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); font-size: 15px; font-weight: 700; cursor: pointer;
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.choice:hover { border-color: var(--brand-line); background: var(--brand-tint); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-dark); box-shadow: inset 0 0 0 1px var(--brand); }
.choice:has(input:focus-visible) { outline: var(--focus-ring); outline-offset: 2px; }
.choice input[type="checkbox"], .choice input[type="radio"] { position: absolute; opacity: 0; }

/* ==========================================================================
   7. LENCANA STATUS
   ========================================================================== */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px 3px 7px; border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-size: var(--text-label); font-weight: 700; white-space: nowrap;
}
.badge .icon { width: 14px; height: 14px; }
.badge--A { background: #dcf2e4; color: #0f5730; border-color: #a8d9b9; }
.badge--B { background: var(--ok-tint); color: var(--ok); border-color: var(--ok-line); }
.badge--C { background: var(--warn-tint); color: var(--warn); border-color: var(--warn-line); }
.badge--D { background: #fbe8cd; color: #7d4a00; border-color: #e8c07c; }
.badge--E { background: var(--danger-tint); color: var(--danger); border-color: var(--danger-line); }
.badge--ok { background: var(--ok-tint); color: var(--ok); border-color: var(--ok-line); }
.badge--warn { background: var(--warn-tint); color: var(--warn); border-color: var(--warn-line); }
.badge--danger { background: var(--danger-tint); color: var(--danger); border-color: var(--danger-line); }
.badge--info { background: var(--info-tint); color: var(--info); border-color: var(--info-line); }
.badge--muted { background: var(--surface-2); color: var(--ink-soft); border-color: var(--line-strong); }

.pill {
  display: inline-block; padding: 2px 9px; border-radius: var(--radius-pill);
  background: var(--surface-2); color: var(--ink-soft); font-size: 12px; font-weight: 600;
}
.pill-row { display: flex; gap: 5px; flex-wrap: wrap; }

/* Arah perubahan angka */
.trend { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; }
.trend--up { color: var(--ok); }
.trend--down { color: var(--danger); }
.trend--flat { color: var(--ink-faded); }
.trend .icon { width: 15px; height: 15px; }

/* ==========================================================================
   8. KARTU ANGKA (KPI)
   ========================================================================== */
.stat {
  position: relative;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-1); overflow: hidden;
}
.stat::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--line-strong); }
.stat--ok::before { background: linear-gradient(90deg, var(--ok) 0%, #2f945f 100%); }
.stat--warn::before { background: linear-gradient(90deg, var(--warn) 0%, var(--gold) 100%); }
.stat--danger::before { background: linear-gradient(90deg, var(--danger) 0%, #cf4a4a 100%); }
.stat--info::before { background: linear-gradient(90deg, var(--info) 0%, var(--ic-teal) 100%); }
.stat--brand::before { background: linear-gradient(90deg, var(--brand) 0%, var(--brand-glow) 100%); }
.stat__label {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-faded);
}
.stat__value { font-size: var(--text-big); font-weight: 700; margin: 2px 0 0; line-height: 1.15; letter-spacing: -.01em; }
.stat__hint { font-size: var(--text-hint); color: var(--ink-soft); margin-top: 2px; }
.stat--tint { background: var(--surface); }
.stat__icon { position: absolute; right: var(--space-3); top: var(--space-3); color: var(--line-strong); }

/* Kartu uang pada dasbor owner */
.money-card { border-top: 3px solid var(--brand); }
.money-card__name { font-weight: 700; font-size: 15px; }
.money-card__value { font-size: 22px; font-weight: 700; margin: 6px 0; letter-spacing: -.01em; }
.money-card__note { font-size: var(--text-hint); color: var(--ink-soft); }

/* ==========================================================================
   8b. KEPALA SAMBUTAN DAN PITA RINGKASAN
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--brand-line);
  /* Tiga warna logo sekaligus: cyan di kiri-bawah (aksen bulu), emas di kanan-atas
     (paruh dan cincin), dan hijau sebagai badan. Hasilnya kepala halaman terasa
     seperti logo yang diperbesar, bukan kotak hijau. */
  background:
    radial-gradient(105% 130% at 100% 0%, rgba(224, 179, 87, .34) 0%, rgba(224, 179, 87, 0) 48%),
    radial-gradient(95% 150% at 0% 100%, rgba(45, 158, 154, .30) 0%, rgba(45, 158, 154, 0) 58%),
    linear-gradient(114deg, #14703f 0%, #14663c 42%, #11512f 100%);
  color: #fff;
  padding: var(--space-5) var(--space-5) var(--space-4);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-2);
}
/* Pita emas di tepi atas: satu-satunya tempat emas dipakai penuh, jadi mata
   langsung menemukan kepala halaman. */
.hero::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; z-index: 2;
  background: linear-gradient(90deg,
    var(--gold) 0%, var(--gold) 24%, #f0d093 24%, #f0d093 40%,
    var(--brand-glow) 40%, var(--brand-glow) 100%);
}
.hero::after {
  /* Anyaman halus, sama seperti panel halaman masuk, supaya terasa satu keluarga. */
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 9px, rgba(255,255,255,0) 9px 18px);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.hero__top { display: flex; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; }
.hero__greeting {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--gold); font-weight: 700;
}
.hero__name { font-size: 24px; font-weight: 800; line-height: 1.15; margin: 4px 0 0; letter-spacing: -.01em; }
.hero__sub { margin: var(--space-1) 0 0; color: rgba(255,255,255,.84); font-size: 14px; }
.hero__actions { margin-left: auto; display: flex; gap: var(--space-2); flex-wrap: wrap; }
.hero .btn {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.32);
  color: #fff;
  box-shadow: none;
}
.hero .btn:hover { background: rgba(255,255,255,.24); }
.hero .btn--light {
  background: #fff; border-color: #fff; color: var(--brand-dark);
  box-shadow: 0 1px 3px rgba(4, 26, 15, .24);
}
.hero .btn--light:hover { background: #f2f7f3; }

/* Pita angka di dalam kepala sambutan */
.hero__band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255,255,255,.22);
}
.hero__stat { min-width: 0; position: relative; padding-left: var(--space-3); }
/* Tanda kecil di kiri tiap angka: bergantian memakai warna logo supaya pita angka
   tidak tampak seperti satu blok teks yang rata. */
.hero__stat::before {
  content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 2px;
  border-radius: var(--radius-pill); background: rgba(255, 255, 255, .38);
}
.hero__band > .hero__stat:nth-child(4n+1)::before { background: var(--gold); }
.hero__band > .hero__stat:nth-child(4n+2)::before { background: #7ad3ce; }
.hero__band > .hero__stat:nth-child(4n+3)::before { background: #8fd6ac; }
.hero__band > .hero__stat:nth-child(4n+4)::before { background: rgba(255, 255, 255, .55); }
.hero__stat-label {
  font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: rgba(255,255,255,.72); font-weight: 700;
}
.hero__stat-value {
  font-size: 20px; font-weight: 700; margin-top: 2px; line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.hero__stat-hint { font-size: 12px; color: rgba(255,255,255,.70); }

/* ==========================================================================
   8c. KARTU ANGKA DENGAN LAMBANG
   ========================================================================== */
.tile {
  display: flex; align-items: flex-start; gap: var(--space-3);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--space-4);
  box-shadow: var(--shadow-1);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, transform var(--dur-fast) ease;
  /* Kartu angka harus muat di kolomnya yang sempit. Tanpa min-width:0, kartu
     menolak menyusut dan isinya meluber menimpa kartu sebelahnya. */
  min-width: 0;
}
.tile:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); }
.tile__icon {
  flex: 0 0 40px; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 11px;
  background: var(--brand-tint); color: var(--brand);
}
.tile--blue .tile__icon { background: #e7eef7; color: var(--ic-blue); }
.tile--amber .tile__icon { background: var(--warn-tint); color: var(--ic-amber); }
.tile--violet .tile__icon { background: #efe8f8; color: var(--ic-violet); }
.tile--teal .tile__icon { background: #e2f1f0; color: var(--ic-teal); }
.tile--red .tile__icon { background: var(--danger-tint); color: var(--ic-red); }
.tile--brown .tile__icon { background: #f4ece4; color: var(--ic-brown); }
.tile__body { min-width: 0; flex: 1; }
.tile__label {
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-faded);
}
/* Angka uang seperti "Rp 175.750.000" lebih lebar dari kolomnya pada layar kecil.
   overflow-wrap + word-break memutusnya agar membungkus, bukan meluber keluar kartu.
   clamp() menyusutkan hurufnya sedikit di kolom sempit sebelum sampai perlu membungkus. */
.tile__value {
  font-size: clamp(18px, 4vw, 24px); font-weight: 700; line-height: 1.15; margin-top: 2px;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere; word-break: break-word; white-space: normal;
}
.tile__hint { font-size: var(--text-hint); color: var(--ink-soft); margin-top: 2px; overflow-wrap: anywhere; }
/* Kartu yang bisa ditekan harus kelihatan bisa ditekan: ada panah di kanan, tepi
   ikut menyala saat ditunjuk, dan seluruh kartu naik sedikit. Kartu keterangan
   biasa tidak diberi perlakuan ini supaya bedanya jelas. */
.tile--link {
  position: relative;
  text-decoration: none; color: inherit;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease,
              transform var(--dur-fast) ease, background var(--dur-fast) ease;
}
.tile--link:hover {
  text-decoration: none;
  border-color: var(--si-line, var(--brand-line));
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}
.tile--link:active { transform: translateY(0); }
.tile--link:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.tile__go {
  flex: 0 0 auto; align-self: center; margin-left: var(--space-2);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-faded);
  transition: color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.tile__go .icon { width: 18px; height: 18px; }
.tile--link:hover .tile__go { color: var(--si, var(--brand)); transform: translateX(2px); }
/* Nada warna kartu angka, diambil dari warna ikon menu supaya satu arti satu warna. */
.tile[data-tone="green"]   { --si: var(--ic-green); --si-tint: #e4f1e9; --si-line: var(--brand-line); }
.tile[data-tone="blue"]    { --si: var(--ic-blue); --si-tint: #e5eef8; --si-line: #b7d0e8; }
.tile[data-tone="teal"]    { --si: var(--ic-teal); --si-tint: #e0f1f0; --si-line: #a9d8d5; }
.tile[data-tone="olive"]   { --si: var(--ic-olive); --si-tint: #eef1dd; --si-line: #c9d29a; }
.tile[data-tone="amber"]   { --si: var(--ic-amber); --si-tint: var(--warn-tint); --si-line: var(--warn-line); }
.tile[data-tone="violet"]  { --si: var(--ic-violet); --si-tint: #efe8f8; --si-line: #cdb8e8; }
.tile[data-tone="magenta"] { --si: var(--ic-magenta); --si-tint: #fbe6f0; --si-line: #e8b3ce; }
.tile[data-tone="red"]     { --si: var(--ic-red); --si-tint: var(--danger-tint); --si-line: var(--danger-line); }
.tile[data-tone="brown"]   { --si: var(--ic-brown); --si-tint: #f4ece4; --si-line: #dcc4a8; }
.tile[data-tone="slate"]   { --si: var(--ic-slate); --si-tint: var(--surface-2); --si-line: var(--line-strong); }
/* Nada juga menyetel warna lambang di kartu itu, jadi kartu "Peringatan" benar-benar
   merah dan kartu "Siklus" benar-benar tosca — tanpa perlu kelas warna terpisah. */
.tile[data-tone] .tile__icon { background: var(--si-tint); color: var(--si); }

/* Judul bagian dengan keterangan di sebelah kanannya. */
.section-head {
  display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap;
  margin: var(--space-5) 0 var(--space-3);
}
.section-head .section-title { margin: 0; }
.section-head__note { margin: 0 0 0 auto; font-size: var(--text-hint); color: var(--ink-faded); }

/* ==========================================================================
   8d. KEPALA KARTU DENGAN LAMBANG
   ========================================================================== */
.card__head-icon {
  flex: 0 0 32px; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px; background: var(--surface-2); color: var(--ink-soft);
}
.card__head-icon--brand { background: var(--brand-tint); color: var(--brand); }
.card__head-icon--red { background: var(--danger-tint); color: var(--ic-red); }
.card__head-icon--amber { background: var(--warn-tint); color: var(--ic-amber); }
.card__head-icon--violet { background: #efe8f8; color: var(--ic-violet); }

/* ==========================================================================
   8e. KARTU PERHATIAN (peringatan yang harus segera ditanggapi)
   ========================================================================== */
.attention-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.attention-item {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--danger-line); border-left: 4px solid var(--danger);
  border-radius: var(--radius-sm); background: var(--danger-tint);
}
.attention-item--warn { border-color: var(--warn-line); border-left-color: var(--warn); background: var(--warn-tint); }
.attention-item__body { flex: 1; min-width: 0; }
.attention-item__title { font-weight: 700; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.attention-item__reason { font-size: 14px; color: var(--ink-soft); margin-top: 2px; }

/* Peringkat kecil pada satu baris */
.mini-rank { display: grid; gap: 6px; }
.mini-rank__row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px;
}
.mini-rank__row:last-child { border-bottom: 0; }
.mini-rank__pos {
  flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--ink-soft);
  font-size: 12px; font-weight: 700;
}
.mini-rank__row:first-child .mini-rank__pos { background: var(--brand); color: #fff; }
.mini-rank__name { flex: 1; min-width: 0; font-weight: 600; }
.mini-rank__value { font-variant-numeric: tabular-nums; color: var(--ink-soft); }

/* Bar kemajuan kecil untuk perbandingan angka */
.meter { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; margin-top: 6px; }
.meter__fill { height: 100%; background: var(--brand); border-radius: 3px; transition: width var(--dur-slow) var(--ease); }
.meter__fill--warn { background: var(--warn); }
.meter__fill--danger { background: var(--danger); }

/* Daftar isian langkah (untuk panduan) */
.step-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.step-item {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3); border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface);
}
.step-item--done { border-color: var(--ok-line); background: var(--ok-tint); }
.step-item__num {
  flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--ink-soft); font-weight: 700; font-size: 13px;
}
.step-item--done .step-item__num { background: var(--ok); color: #fff; }
.step-item__body { flex: 1; min-width: 0; }
.step-item__title { font-weight: 700; }

/* ==========================================================================
   9. KARTU KANDANG - tujuh keluaran pembeli
   ========================================================================== */
.kandang-card { border-left: 5px solid var(--brand); }
.kandang-card--D { border-left-color: var(--warn); }
.kandang-card--E { border-left-color: var(--danger); }
.kandang-card--none { border-left-color: var(--line-strong); }
/* Judul kandang memuat kode, nomor siklus, dan umur sekaligus, jadi panjangnya
   melewati lebar kartu pada layar sempit. Tanpa pembungkus, judul memaksa kartu
   melebar dan menabrak isi di sebelahnya — itu tulisan yang saling tindih.
   flex-wrap membuatnya turun baris, dan min-width:0 mengizinkan flex item
   menyusut di bawah ukuran isinya. */
.kandang-card__title {
  font-size: var(--text-title); font-weight: 700;
  display: flex; align-items: center; gap: var(--space-2);
  flex-wrap: wrap; min-width: 0;
  overflow-wrap: anywhere;
}
.kandang-card__meta {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  font-size: var(--text-hint); color: var(--ink-soft); margin-top: 4px;
}
.kandang-card__rows { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.kandang-item {
  display: flex; gap: var(--space-3); align-items: baseline;
  min-height: 38px; padding: 7px 0;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.kandang-item:first-child { border-top: 0; padding-top: 0; }
.kandang-item__label {
  flex: 0 0 88px; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faded);
}
/* min-width:0 wajib: tanpa itu flex item menolak menyusut di bawah lebar
   kata terpanjangnya, dan angka panjang seperti "Rp 175.750.000" meluber
   keluar kartu. overflow-wrap memutus angka yang lebih panjang dari kartunya. */
.kandang-item__value { flex: 1; min-width: 0; font-size: 15px; overflow-wrap: anywhere; }
.kandang-item__value strong { font-size: 16px; }
.kandang-item__hint { font-size: var(--text-hint); color: var(--ink-soft); }

/* ==========================================================================
   10. TABEL
   ========================================================================== */
.table-wrap {
  position: relative;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface);
}
.table-wrap--plain { border: 0; border-radius: 0; }
table.data { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
table.data th, table.data td { padding: var(--space-2) var(--space-3); text-align: left; vertical-align: top; }
table.data thead th {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-strong);
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-soft); white-space: nowrap;
}
table.data tbody td { border-bottom: 1px solid var(--line); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:nth-child(even) { background: #fafcfb; }
table.data tbody tr:hover { background: var(--brand-tint); }
table.data td.num, table.data th.num { text-align: right; white-space: nowrap; }
table.data td:first-child, table.data th:first-child { padding-left: var(--space-4); }
table.data td:last-child, table.data th:last-child { padding-right: var(--space-4); }
.table-wrap.is-scrolled-x { box-shadow: inset -12px 0 12px -12px rgba(15, 26, 20, .18); }

/* Kepala tabel yang bisa diurutkan */
th button[data-sort] {
  display: inline-flex; align-items: center; gap: 5px;
  border: 0; background: none; padding: 4px 2px; margin: -4px -2px;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
  cursor: pointer; border-radius: 4px;
}
th button[data-sort]:hover { color: var(--brand); }
th[aria-sort] button[data-sort] { color: var(--brand-dark); }
th button[data-sort] .icon { opacity: .45; }
th[aria-sort="ascending"] button[data-sort] .icon,
th[aria-sort="descending"] button[data-sort] .icon { opacity: 1; }

/* ==========================================================================
   11. PEMBERITAHUAN
   ========================================================================== */
.notice {
  display: block; margin-bottom: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-strong); border-left-width: 4px;
  border-radius: var(--radius-sm);
  background: var(--surface); font-size: 15px;
}
.notice strong, .notice__title { font-weight: 700; }
.notice ul { margin: var(--space-2) 0 0 var(--space-5); padding: 0; }
.notice--ok { background: var(--ok-tint); border-color: var(--ok-line); border-left-color: var(--ok); color: #0d4b2b; }
.notice--warn { background: var(--warn-tint); border-color: var(--warn-line); border-left-color: var(--warn); color: #6d4700; }
.notice--danger { background: var(--danger-tint); border-color: var(--danger-line); border-left-color: var(--danger); color: #7c1616; }
.notice--info { background: var(--info-tint); border-color: var(--info-line); border-left-color: var(--info); color: #17466a; }

/* Peringatan sesaat (toast) */
.toast-stack {
  position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--space-2);
  width: min(420px, calc(100vw - var(--space-8)));
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border: 1px solid var(--line-strong); border-left-width: 4px;
  border-radius: var(--radius); background: var(--surface);
  box-shadow: var(--shadow-2);
  font-size: 15px;
  animation: masuk var(--dur) var(--ease);
}
.toast--ok { border-left-color: var(--ok); background: var(--ok-tint); }
.toast--warn { border-left-color: var(--warn); background: var(--warn-tint); }
.toast--danger { border-left-color: var(--danger); background: var(--danger-tint); }
.toast--info { border-left-color: var(--info); background: var(--info-tint); }
.toast__body { flex: 1; min-width: 0; }
.toast__title { font-weight: 700; }
.toast__close {
  flex: 0 0 auto; width: 34px; height: 34px; margin: -4px -4px 0 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--radius-sm); background: transparent;
  color: var(--ink-soft); cursor: pointer;
}
.toast__close:hover { background: rgba(0, 0, 0, .06); color: var(--ink); }
.toast.is-leaving { animation: keluar var(--dur) var(--ease) forwards; }
@keyframes masuk { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes keluar { to { opacity: 0; transform: translateY(6px) scale(.98); } }

/* ==========================================================================
   12. LAYAR KOSONG, KERANGKA MUAT, PROGRES
   ========================================================================== */
.empty {
  text-align: center; padding: var(--space-8) var(--space-5);
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink-soft);
}
.empty__icon {
  width: 52px; height: 52px; margin: 0 auto var(--space-3);
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); background: var(--brand-tint); color: var(--brand);
}
.empty h3 { margin: 0 0 var(--space-2); color: var(--ink); font-size: var(--text-h2); }
.empty .btn-row { justify-content: center; margin-top: var(--space-3); }

.skeleton {
  display: block; height: 14px; border-radius: 6px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: berkilau 1400ms ease-out infinite;
}
.skeleton--title { height: 18px; width: 45%; margin-bottom: var(--space-2); }
.skeleton--line { margin-bottom: var(--space-2); }
@keyframes berkilau { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

.progress { height: 8px; border-radius: var(--radius-pill); background: var(--surface-3); overflow: hidden; }
.progress__fill { height: 100%; width: 0; background: var(--brand); transition: width var(--dur-slow) var(--ease); }

/* Bilah keterangan melintang */
.dl { display: grid; grid-template-columns: minmax(140px, 38%) 1fr; gap: 6px var(--space-3); font-size: 15px; }
.dl dt { color: var(--ink-soft); font-size: var(--text-hint); }
.dl dd { margin: 0; font-weight: 600; }

.kv-list { list-style: none; margin: 0; padding: 0; }
.kv-list li {
  display: flex; justify-content: space-between; gap: var(--space-3);
  padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px;
}
.kv-list li:last-child { border-bottom: 0; }
.kv-list .kv-label { color: var(--ink-soft); }

/* ==========================================================================
   13. TAB DAN SAKELAR PILIHAN
   ========================================================================== */
.tabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--line); margin-bottom: var(--space-4); }
.tabs a {
  min-height: var(--tap); padding: var(--space-2) var(--space-4);
  display: inline-flex; align-items: center; gap: var(--space-2);
  border-bottom: 3px solid transparent;
  color: var(--ink-soft); font-size: 15px; font-weight: 600; white-space: nowrap;
  transition: color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.tabs a:hover { color: var(--ink); text-decoration: none; background: var(--surface-2); }
.tabs a.is-active { color: var(--brand-dark); border-bottom-color: var(--brand); }
.tabs a.is-active:hover { background: transparent; }

.segmented {
  display: inline-flex; padding: 3px; gap: 2px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.segmented a {
  min-height: 40px; padding: 0 var(--space-4);
  display: inline-flex; align-items: center; gap: var(--space-2);
  border-radius: 6px; color: var(--ink-soft); font-size: 14px; font-weight: 700;
}
.segmented a:hover { color: var(--ink); text-decoration: none; }
.segmented a.is-active {
  background: var(--surface); color: var(--brand-dark);
  box-shadow: var(--shadow-1), inset 0 -2px 0 var(--brand);
}

/* ==========================================================================
   14. LANGKAH (WIZARD)
   ========================================================================== */
.wizard-progress {
  display: flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-4); font-size: var(--text-hint); font-weight: 600; color: var(--ink-soft);
}
.wizard-progress__bar { flex: 1; height: 8px; border-radius: var(--radius-pill); background: var(--surface-3); overflow: hidden; }
.wizard-progress__fill { height: 100%; background: var(--brand); transition: width var(--dur-slow) var(--ease); }
.wizard-step__title { font-size: 19px; font-weight: 700; margin: 0 0 var(--space-1); }
.wizard-nav { display: flex; gap: var(--space-3); justify-content: space-between; margin-top: var(--space-5); }

/* ==========================================================================
   15. GRAFIK
   ========================================================================== */
.chart { width: 100%; }
.chart svg { width: 100%; height: auto; display: block; }
.chart-legend { display: flex; gap: var(--space-4); flex-wrap: wrap; font-size: var(--text-hint); color: var(--ink-soft); margin-top: var(--space-2); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 14px; height: 4px; border-radius: 2px; display: inline-block; }
/* Label sumbu diberi garis putih tipis di belakang hurufnya. Tanpa itu, angka
   sumbu yang kebetulan bertemu garis grafik jadi susah dibaca di layar kandang. */
.chart-axis {
  font-size: 11px; fill: var(--ink-faded);
  paint-order: stroke; stroke: var(--surface); stroke-width: 3px;
  stroke-linejoin: round;
}

/* Papan grafik dasbor */
.chart-section { margin-bottom: var(--space-5); }
.chart-grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
/* Panel lebar penuh untuk grafik yang butuh sumbu waktu panjang. */
.chart-panel--wide { grid-column: 1 / -1; }

.chart-panel {
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-2);
  margin: 0; padding: var(--space-4) var(--space-4) var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
/* Pita empat warna logo di tepi atas tiap panel grafik. Empat warna itu memang
   warna yang ada di logo, jadi halaman ini terbaca sebagai satu merek. */
.chart-panel::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg,
    var(--brand) 0%, var(--brand) 32%, var(--gold) 32%, var(--gold) 52%,
    var(--ic-teal) 52%, var(--ic-teal) 78%, var(--danger) 78%, var(--danger) 100%);
  opacity: .9;
}
.chart-panel__head {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding-top: 2px;
}
.chart-panel__icon {
  flex: 0 0 34px; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: var(--brand-tint); color: var(--brand);
}
.chart-panel__icon--teal { background: #e0f1f0; color: var(--ic-teal); }
.chart-panel__icon--amber { background: var(--warn-tint); color: var(--ic-amber); }
.chart-panel__text { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.chart-panel__title { font-size: var(--text-title); font-weight: 700; line-height: 1.25; }
.chart-panel__sub { font-size: var(--text-hint); color: var(--ink-soft); margin-top: 2px; }
.chart-panel__link {
  margin-left: auto; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--text-label); font-weight: 700; color: var(--brand);
  min-height: 34px; padding: 0 4px;
}
.chart-panel__link .icon { width: 14px; height: 14px; }
.chart-panel__foot {
  margin: 0; font-size: 12px; color: var(--ink-faded); line-height: 1.45;
  border-top: 1px dashed var(--line); padding-top: var(--space-2);
}
.chart-empty { text-align: center; }
.chart-empty h3 { margin: 0 0 var(--space-2); font-size: var(--text-h2); }
.chart-empty .hint { max-width: 52ch; margin: 0 auto var(--space-3); }

/* Daftar porsi biaya di bawah grafik batang — angka pastinya ada di sini,
   bukan hanya bisa ditebak dari tinggi batangnya. */
.chart-share { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: 6px; }
.chart-share li { display: flex; align-items: baseline; gap: var(--space-2); font-size: 14px; }
.chart-share__dot {
  flex: 0 0 9px; width: 9px; height: 9px; border-radius: 3px;
  background: var(--brand); transform: translateY(1px);
}
.chart-share__dot[data-tone="gold"] { background: var(--gold); }
.chart-share__dot[data-tone="teal"] { background: var(--ic-teal); }
.chart-share__dot[data-tone="danger"] { background: var(--danger); }
.chart-share__dot[data-tone="warn"] { background: var(--warn); }
.chart-share__dot[data-tone="info"] { background: var(--info); }
.chart-share__dot[data-tone="muted"] { background: var(--line-strong); }
.chart-share__name { flex: 1; min-width: 0; color: var(--ink-soft); }
.chart-share__pct { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   16. BANTUAN SINGKAT ("?")
   ========================================================================== */
.help-btn {
  width: 26px; height: 26px; margin-left: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--brand);
  font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.help-btn:hover { background: var(--brand-tint); border-color: var(--brand-line); }
.help-pop {
  display: none; margin-top: 6px; padding: var(--space-3);
  border: 1px solid var(--info-line); border-left: 4px solid var(--info);
  border-radius: var(--radius-sm); background: var(--info-tint);
  font-size: 14px; color: #17466a;
}
.help-pop.is-open { display: block; }
.help-host { display: inline-flex; flex-direction: column; align-items: flex-start; }

/* ==========================================================================
   17. APLIKASI ABK (PONSEL, TANPA SINYAL)
   ========================================================================== */
.abk-body { background: var(--bg); }
.abk-topbar {
  position: sticky; top: 0; z-index: var(--z-nav);
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 56px; padding: var(--space-2) var(--space-4);
  color: #fff;
  /* Sama seperti bilah atas layar pemilik: sorotan emas logo, ditambah garis emas
     penuh di kaki bilah supaya ABK tetap mengenali aplikasinya dari sekilas. */
  background:
    radial-gradient(120% 190% at 100% 0%, rgba(224, 179, 87, .30) 0%, rgba(224, 179, 87, 0) 52%),
    linear-gradient(180deg, var(--brand-dark) 0%, #125c36 100%);
  border-bottom: 2px solid var(--gold);
}
.abk-topbar__logo {
  width: 34px; height: 34px; flex: 0 0 34px; background: #fff; border-radius: 10px; padding: 3px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .55), 0 2px 8px rgba(4, 26, 15, .26);
}
.abk-topbar__title { font-size: 15px; font-weight: 700; }
.abk-topbar__sub { font-size: 12px; color: rgba(255, 255, 255, .82); display: flex; align-items: center; gap: 6px; }
.sync-pill {
  padding: 1px 8px; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .18); font-size: 11px; font-weight: 700;
}
.sync-pill[data-state="sending"] { background: var(--gold); color: #3d2c00; }
.sync-pill[data-state="waiting"] { background: #f6d27a; color: #4a3400; }
.sync-pill[data-state="failed"] { background: #ffd9d9; color: #7c1616; }

.abk-main {
  padding: var(--space-3) var(--space-3) 88px;
  max-width: 640px; margin: 0 auto;
}
.abk-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-nav);
  display: flex; background: var(--surface);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-shadow: 0 -2px 12px rgba(15, 26, 20, .06);
}
.abk-nav a {
  position: relative;
  flex: 1; min-height: 62px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--ink-faded); font-size: 11px; font-weight: 600;
}
.abk-nav a:hover { text-decoration: none; background: var(--surface-2); }
.abk-nav a.is-active { color: var(--brand-dark); background: var(--brand-tint); }
/* Tanda aktif bilah bawah: garis tiga warna logo di tepi atas tab yang sedang dibuka. */
.abk-nav a.is-active::before {
  content: ""; position: absolute; left: 18%; right: 18%; top: 0; height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--gold) 50%, var(--ic-teal) 100%);
}
.abk-nav__icon { display: inline-flex; color: inherit; }
.abk-nav__icon .icon { width: 24px; height: 24px; }

.abk-task-card { border-left: 5px solid var(--warn); }
.abk-task-card--done { border-left-color: var(--ok); }
.abk-task-card .btn { margin-top: var(--space-2); }

/* Pekerjaan hari ini dari jadwal program. Sengaja berbentuk daftar centang,
   bukan kartu, karena ABK membacanya berurutan lalu mengerjakannya satu per satu. */
.abk-programs {
  margin: var(--space-3) 0;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.abk-programs__title {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--ink);
  margin-bottom: var(--space-2);
}
.abk-programs__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.abk-programs__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 4px 8px;
  align-items: baseline;
  padding: var(--space-2);
  border-radius: 8px;
  background: var(--surface);
  border-left: 3px solid var(--line-strong);
  font-size: 14px;
}
/* Terlewat ditandai merah, hari ini kuning tua, yang akan datang netral.
   Warna ikut dibaca bersama tulisan waktunya, jadi tidak bergantung warna saja. */
.abk-programs__item--late { border-left-color: var(--danger); }
.abk-programs__item--today { border-left-color: var(--warn); }
.abk-programs__item--soon { border-left-color: var(--info); }
.abk-programs__type {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-faded);
}
.abk-programs__name { font-weight: 700; }
.abk-programs__when { font-size: 12px; color: var(--ink-soft); text-align: right; }
.abk-programs__item--late .abk-programs__when { color: var(--danger); font-weight: 700; }
.abk-programs__item--today .abk-programs__when { color: var(--warn); font-weight: 700; }
.abk-programs__desc { grid-column: 1 / -1; font-size: 13px; color: var(--ink-soft); }

/* Fase pakan: pemberitahuan penyiapan, bukan larangan. */
.abk-phase {
  margin: var(--space-3) 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--warn-tint);
  border: 1px solid var(--warn-line);
  font-size: 14px;
  color: var(--ink);
}
.abk-phase__now { margin-bottom: 2px; }
.abk-phase__next { font-weight: 700; color: var(--warn); }

.offline-bar {
  position: sticky; top: 0; z-index: var(--z-sticky);
  display: none; padding: var(--space-2) var(--space-4);
  background: var(--warn); color: #fff; font-size: 14px; font-weight: 600;
}
.offline-bar.is-on { display: block; animation: masuk var(--dur) var(--ease); }

/* ==========================================================================
   18. HALAMAN MASUK
   ========================================================================== */
.login-body { background: var(--bg); }

.login-shell {
  /* Kalau berkas latar tersedia (lihat public/assets/img/), nilai --login-photo
     diisi otomatis oleh halaman masuk. Kalau tidak, panel memakai warna hijau polos. */
  --login-photo: none;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 512px);
}

.login-brand {
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-5);
  padding: 46px 48px 32px;
  color: #fff; background-color: #14522d;
  /* Emas dari paruh dan cyan dari bulu logo ikut menerangi panel merek, bukan
     hanya hijau rata. */
  background-image:
    var(--login-photo),
    radial-gradient(70% 55% at 92% 8%, rgba(224, 179, 87, .30) 0%, rgba(224, 179, 87, 0) 62%),
    radial-gradient(75% 60% at 4% 96%, rgba(45, 158, 154, .28) 0%, rgba(45, 158, 154, 0) 66%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.055) 0 9px, rgba(255,255,255,0) 9px 18px);
  background-size: cover, auto, auto, auto;
  background-position: center, 0 0, 0 0, 0 0;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  overflow: hidden;
}
/* Kerudung gelap: berat di kiri (tempat tulisan) dan terbuka di kanan (tempat
   gambar atau video). Angka di bawah sudah diukur terhadap bingkai video:
   titik terburuk di daerah teks tetap di atas 4,5:1. */
.login-brand::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg,
    rgba(9,40,24,.95) 0%, rgba(12,50,30,.88) 45%,
    rgba(18,72,43,.66) 72%, rgba(20,82,45,.44) 100%);
  pointer-events: none;
}
.login-shell.has-video > .login-brand::before {
  background: linear-gradient(100deg,
    rgba(9,40,24,.95) 0%, rgba(12,50,30,.86) 38%,
    rgba(18,72,43,.52) 66%, rgba(20,82,45,.16) 100%);
}
.login-brand > video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; pointer-events: none;
}
.login-shell.has-video > .login-brand > video {
  filter: brightness(1.16) saturate(1.22) contrast(1.06);
}
.login-brand > :not(video) { position: relative; z-index: 2; }
.login-brand::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 46%; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.30) 100%);
  pointer-events: none;
}
.login-brand__top { display: flex; align-items: center; gap: var(--space-3); }
.login-brand__logo {
  width: 68px; height: 68px; flex: 0 0 68px; object-fit: contain;
  border-radius: 16px; background: #fff; padding: 5px;
  box-shadow: var(--shadow-2), 0 0 0 3px rgba(224, 179, 87, .45);
}
.login-brand__name { font-size: 24px; font-weight: 800; line-height: 1.1; }
.login-brand__sector { font-size: var(--text-hint); color: rgba(255,255,255,.76); }
.login-brand__tagline {
  margin: 0; max-width: 24ch; padding-bottom: var(--space-5);
  font-size: 27px; font-weight: 700; line-height: 1.28;
  border-bottom: 2px solid var(--gold);
}
.login-brand__points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); max-width: 46ch; }
.login-brand__points li { display: flex; gap: var(--space-3); font-size: 15px; line-height: 1.45; color: rgba(255,255,255,.94); }
/* Tanda butir memakai warna logo bergantian: emas, cyan, hijau terang, putih.
   Empat warna itu memang yang ada di logo, jadi daftar ini sekaligus jadi
   pengingat visual merek. */
.login-brand__points li::before {
  content: ""; flex: 0 0 8px; width: 8px; height: 8px; margin-top: 7px;
  border-radius: 2px; background: var(--gold);
}
.login-brand__points li:nth-child(4n+1)::before { background: var(--gold); }
.login-brand__points li:nth-child(4n+2)::before { background: #6fd0ca; }
.login-brand__points li:nth-child(4n+3)::before { background: #85d3a4; }
.login-brand__points li:nth-child(4n+4)::before { background: rgba(255, 255, 255, .72); }
.login-brand__foot { margin-top: auto; font-size: 12px; color: rgba(255,255,255,.68); }

.login-panel {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-10) var(--space-6); background: var(--bg);
}
/* Tepi emas tipis di perbatasan dua panel: menyambung sisi merek yang hijau
   dengan sisi isian yang putih. */
.login-panel::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: linear-gradient(180deg, var(--gold) 0%, var(--brand-glow) 55%, var(--ic-teal) 100%);
}
.login-panel__inner { width: 100%; max-width: 392px; }
.login-head { margin-bottom: var(--space-5); }
.login-head h1 { font-size: 26px; margin: 0 0 6px; letter-spacing: -.01em; }
.login-head p { margin: 0; color: var(--ink-soft); font-size: 15px; }
/* Garis tiga warna logo di bawah judul panel masuk. */
.login-head::after {
  content: ""; display: block; width: 88px; height: 3px; margin-top: var(--space-3);
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand) 40%, var(--gold) 40%, var(--gold) 70%, var(--ic-teal) 70%, var(--ic-teal) 100%);
}
.login-alert { margin-bottom: var(--space-4); }
.login-alert .notice { margin-bottom: 0; }
.login-alert ul { margin: var(--space-2) 0 0 var(--space-5); }
.login-submit { margin-top: 6px; }
.login-submit .btn { min-height: 54px; font-size: 17px; }
.login-help {
  margin-top: var(--space-5); padding-top: var(--space-4);
  border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-soft); text-align: center;
}
.login-help strong { color: var(--ink); }

@media (max-width: 1024px) and (min-width: 941px) {
  .login-brand { padding: 36px 34px 28px; }
  .login-brand__tagline { font-size: 22px; }
}
@media (max-width: 940px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-brand { padding: var(--space-6) var(--space-5) var(--space-5); gap: var(--space-3); }
  .login-brand__logo { width: 54px; height: 54px; flex-basis: 54px; border-radius: 12px; }
  .login-brand__name { font-size: 20px; }
  .login-brand__tagline { font-size: 19px; padding-bottom: var(--space-3); max-width: none; }
  .login-panel { padding: var(--space-5) var(--space-4) var(--space-8); align-items: flex-start; }
  .login-panel__inner { max-width: none; }
  .login-head h1 { font-size: 22px; }
}
@media (max-width: 700px) {
  .login-brand__points,
  .login-brand__foot { display: none; }
  .login-brand { padding: var(--space-4) var(--space-4) 15px; gap: var(--space-2); }
  .login-brand__logo { width: 44px; height: 44px; flex-basis: 44px; border-radius: 10px; padding: 3px; }
  .login-brand__name { font-size: 18px; }
  .login-brand__sector { font-size: 12px; }
  .login-brand__tagline { font-size: 16px; padding-bottom: 10px; line-height: 1.35; }
  .login-panel { padding: var(--space-4) var(--space-4) var(--space-6); }
  .login-head { margin-bottom: var(--space-4); }
  .login-head h1 { font-size: 21px; }
  .login-head p { font-size: 14px; }
  .login-help { margin-top: var(--space-4); padding-top: var(--space-3); font-size: 13px; }
  .login-brand::before,
  .login-shell.has-video > .login-brand::before {
    background: linear-gradient(105deg,
      rgba(9,40,24,.95) 0%, rgba(12,50,30,.92) 55%, rgba(18,72,43,.86) 100%);
  }
}
@media (max-height: 700px) and (min-width: 941px) {
  .login-brand { padding: 28px 36px var(--space-5); gap: var(--space-4); }
  .login-brand__tagline { font-size: 21px; padding-bottom: var(--space-3); }
  .login-brand__points { gap: var(--space-2); font-size: 14px; }
  .login-panel { padding: var(--space-5); }
}

/* ==========================================================================
   19. PEMASANGAN (HALAMAN INSTALLER)
   ========================================================================== */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-5); background: var(--bg); }
.auth-card {
  width: 100%; max-width: 420px; padding: var(--space-6);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow-2);
}
.auth-card__logo { width: 96px; height: 96px; object-fit: contain; display: block; margin: 0 auto var(--space-3); }
.auth-card h1 { font-size: 21px; text-align: center; margin: 0 0 var(--space-1); }
.auth-card p.sub { text-align: center; color: var(--ink-soft); font-size: 14px; margin: 0 0 var(--space-5); }

.install-steps { display: flex; gap: 6px; margin-bottom: var(--space-5); flex-wrap: wrap; font-size: 12px; }
.install-steps span { padding: 4px 10px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--ink-soft); font-weight: 600; }
.install-steps span.is-on { background: var(--brand); color: #fff; }
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { display: flex; gap: var(--space-3); align-items: flex-start; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.checklist li:last-child { border-bottom: 0; }
.checklist .mark { font-weight: 700; }

/* ==========================================================================
   20. TANGGAP (RESPONSIF)
   ========================================================================== */
@media (max-width: 1200px) {
  .main { padding: var(--space-4) var(--space-4) var(--space-8); }
}

@media (max-width: 940px) {
  .topbar__menu-btn { display: inline-flex; }
  .layout { flex-direction: column; }
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: var(--z-drawer);
    width: 286px; flex: none; max-height: none;
    transform: translateX(-102%);
    transition: transform var(--dur-slow) var(--ease);
    box-shadow: var(--shadow-3);
    padding-top: var(--space-4);
  }
  .sidebar.is-open { transform: translateX(0); }
  .main { padding: var(--space-4) var(--space-3) var(--space-8); }
}

@media (max-width: 700px) {
  :root { --text-h1: 20px; --text-big: 22px; }
  .card { padding: var(--space-3); border-radius: var(--radius-sm); }
  .page-head { gap: var(--space-2); }
  .page-head__actions { margin-left: 0; width: 100%; }
  .page-head__actions .btn { flex: 1 1 auto; }
  .kandang-item__label { flex-basis: 74px; font-size: 10px; }
  .grid { gap: var(--space-3); }
  .dl { grid-template-columns: 1fr; gap: 2px; }
  .dl dt { margin-top: var(--space-2); }
  .toast-stack { left: var(--space-3); right: var(--space-3); bottom: var(--space-3); width: auto; }
  table.data { font-size: 13px; }
  table.data th, table.data td { padding: 7px var(--space-2); }
}

@media (min-width: 941px) {
  .toast-stack { top: auto; }
}

/* Hormati pilihan pengunjung: matikan seluruh gerakan. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .login-brand > video, .login-shell.has-video > .login-brand > video { display: none; }
  .skeleton { animation: none; background: var(--surface-2); }
}

/* ==========================================================================
   20b. TAUTAN HALAMAN (PAGINATION)
   ========================================================================== */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.pagination__summary { margin: 0; }
.pagination__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}
.pagination__current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm, 8px);
  background: var(--brand-600, #14663c);
  color: #fff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pagination__gap {
  padding: 0 var(--space-1);
  color: var(--ink-soft);
}
@media (max-width: 700px) {
  .pagination { flex-direction: column; align-items: stretch; }
  .pagination__links { justify-content: center; }
}

/* ==========================================================================
   21. CETAK
   ========================================================================== */
@media print {
  .topbar, .sidebar, .sidebar-backdrop, .footer, .btn, .abk-nav, .offline-bar,
  .page-head__actions, .toast-stack, .help-btn, .tabs, .segmented,
  .pagination { display: none !important; }
  body { background: #fff; }
  .main { padding: 0; max-width: none; }
  .card { box-shadow: none; border-color: #666; break-inside: avoid; }
  table.data thead th { position: static; background: #eee; }
  a { color: #000; text-decoration: underline; }
}