/* ══════════════════════════════════════════════════════════════════════
   ARIES PB — Lembar Gaya Utama
   ══════════════════════════════════════════════════════════════════════
   Susunan berkas:
     1. Token warna (terang & gelap)
     2. Dasar & kerangka (topbar, sidebar, isi)
     3. Komponen umum (kartu, tabel, tombol, form, badge, modal)
     4. Komponen khas peternakan (kartu kandang, rapor standar, linimasa)
     5. Tanggapan layar & cetak

   ATURAN WARNA: tidak ada nilai heksa yang ditulis langsung di luar blok
   token. Setiap kali warna ditulis di tengah aturan, tema gelap akan
   melewatkannya — dan cacat semacam itu baru ketahuan setelah dipakai
   orang di malam hari.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ══ 1. TOKEN ═══════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  /* Permukaan */
  --bg:          #f1f5f4;
  --surface:     #ffffff;
  --surface-2:   #f8fafa;
  --surface-3:   #eef2f2;
  --surface-4:   #e2e8e8;
  --border:      #dbe3e2;
  --border-2:    #e6ecec;
  --border-3:    #f0f4f4;

  /* Teks */
  --text:        #17252a;
  --text-soft:   #3d4f56;
  --text-muted:  #5b6b73;
  --text-dim:    #8a99a0;
  --on-accent:   #ffffff;

  /* Aksen — hijau-teal. Sengaja berbeda dari biru Aries One supaya dua
     aplikasi yang terbuka berdampingan langsung bisa dibedakan. */
  --primary:      #0f766e;
  --primary-h:    #0b5f59;
  --primary-soft: #ecfdf9;
  --primary-soft2:#d1faf1;
  --primary-brd:  #99e6d7;
  --primary-ink:  #0b5f59;
  --primary-dim:  #5eead4;

  --danger:       #dc2626;
  --danger-h:     #b91c1c;
  --danger-soft:  #fee2e2;
  --danger-soft2: #fef2f2;
  --danger-brd:   #fca5a5;
  --danger-ink:   #b91c1c;

  --success:      #15803d;
  --success-soft: #dcfce7;
  --success-soft2:#f0fdf4;
  --success-brd:  #86efac;
  --success-ink:  #15803d;

  --warn:         #d97706;
  --warn-soft:    #fef3c7;
  --warn-soft2:   #fffbeb;
  --warn-brd:     #fde68a;
  --warn-ink:     #92400e;

  --info:         #2563eb;
  --info-soft:    #eff6ff;
  --info-brd:     #bfdbfe;
  --info-ink:     #1d4ed8;

  --slate-soft:   #f1f5f9;
  --slate-brd:    #94a3b8;
  --slate-ink:    #334155;

  --purple-soft:  #ede9fe;
  --purple-brd:   #a78bfa;
  --purple-ink:   #5b21b6;

  /* Performa — dipakai kartu kandang, rapor standar, dan grafik.
     Tiga tingkat saja; empat membuat orang berhenti membedakannya. */
  --perf-baik:      #15803d;
  --perf-baik-soft: #dcfce7;
  --perf-wajar:     #b45309;
  --perf-wajar-soft:#fef3c7;
  --perf-buruk:     #b91c1c;
  --perf-buruk-soft:#fee2e2;
  --perf-netral:    #64748b;
  --perf-netral-soft:#f1f5f9;

  /* Fase pakan — penanda pada linimasa & kartu periode */
  --fase-prestarter: #8b5cf6;
  --fase-starter:    #0ea5e9;
  --fase-grower:     #14b8a6;
  --fase-finisher:   #f59e0b;

  /* Topbar & sidebar */
  --topbar-bg:   #0f766e;
  --topbar-fg:   #ffffff;
  --topbar-dim:  rgba(255,255,255,.72);
  --topbar-hov:  rgba(255,255,255,.12);
  --topbar-brd:  rgba(255,255,255,.14);

  --sb-bg:       #ffffff;
  --sb-brd:      #e6ecec;
  --sb-fg:       #3d4f56;
  --sb-hov:      #f1f7f6;
  --sb-aktif-bg: #ecfdf9;
  --sb-aktif-fg: #0b5f59;

  /* Warna pekat yang TIDAK ikut tema — dipakai sebagai LATAR yang di
     atasnya selalu ada teks putih (kepala tabel cetak, pita judul).
     --warn-ink dsb. tidak bisa dipakai di sini karena ia membalik antar
     tema: cokelat tua di terang, kuning muda di gelap. Sebagai warna teks
     itu benar; sebagai latar hasilnya teks putih di atas kuning muda. */
  --solid-teal:   #0f766e;
  --solid-slate:  #1e293b;
  --solid-green:  #15803d;
  --solid-amber:  #92400e;
  --solid-red:    #b91c1c;

  --radius:      8px;
  --radius-sm:   6px;
  --shadow:      0 1px 2px rgba(16,40,38,.06);
  --shadow-card: 0 1px 3px rgba(16,40,38,.08), 0 1px 2px rgba(16,40,38,.04);
  --shadow-pop:  0 8px 24px rgba(16,40,38,.14);
  --shadow-modal:0 20px 50px rgba(16,40,38,.24);
  --overlay:     rgba(15,30,28,.5);

  --sb-lebar:    218px;
  --sb-ciut:     58px;
  --tb-tinggi:   52px;
}

/* Tema gelap: dipilih eksplisit, ATAU mengikuti sistem selama pengguna
   belum memilih apa pun. Dua blok terpisah supaya tombol tema selalu
   menang atas preferensi sistem, di kedua arah. */
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}

:root[data-theme="dark"],
:root[data-theme="dark"] * { --_d: 1; }

:root[data-theme="dark"] {
  --bg:          #0e1614;
  --surface:     #16211f;
  --surface-2:   #1c2927;
  --surface-3:   #22302d;
  --surface-4:   #2b3a37;
  --border:      #2c3b38;
  --border-2:    #243230;
  --border-3:    #1e2b29;

  --text:        #e6eeec;
  --text-soft:   #c3d1ce;
  --text-muted:  #93a5a1;
  --text-dim:    #6d807c;
  --on-accent:   #ffffff;

  --primary:      #14b8a6;
  --primary-h:    #2dd4bf;
  --primary-soft: #10302c;
  --primary-soft2:#12403a;
  --primary-brd:  #1c5850;
  --primary-ink:  #5eead4;
  --primary-dim:  #0d9488;

  --danger-soft:  #3b1717;
  --danger-soft2: #2a1212;
  --danger-brd:   #7f2222;
  --danger-ink:   #fca5a5;

  --success-soft: #10321d;
  --success-soft2:#0d2617;
  --success-brd:  #1d6034;
  --success-ink:  #86efac;

  --warn-soft:    #3a2a0c;
  --warn-soft2:   #2a1f0a;
  --warn-brd:     #6b4c14;
  --warn-ink:     #fcd34d;

  --info-soft:    #16233d;
  --info-brd:     #24406e;
  --info-ink:     #93c5fd;

  --slate-soft:   #1e2b29;
  --slate-brd:    #4b5c58;
  --slate-ink:    #cbd5d3;

  --purple-soft:  #241a3d;
  --purple-brd:   #4c3a80;
  --purple-ink:   #c4b5fd;

  --perf-baik:      #4ade80;
  --perf-baik-soft: #10321d;
  --perf-wajar:     #fbbf24;
  --perf-wajar-soft:#3a2a0c;
  --perf-buruk:     #f87171;
  --perf-buruk-soft:#3b1717;
  --perf-netral:    #94a3b8;
  --perf-netral-soft:#1e2b29;

  --topbar-bg:   #10312c;
  --topbar-brd:  rgba(255,255,255,.08);
  --topbar-hov:  rgba(255,255,255,.08);

  --sb-bg:       #131e1c;
  --sb-brd:      #243230;
  --sb-fg:       #c3d1ce;
  --sb-hov:      #1c2927;
  --sb-aktif-bg: #12403a;
  --sb-aktif-fg: #5eead4;

  --shadow:      0 1px 2px rgba(0,0,0,.4);
  --shadow-card: 0 1px 3px rgba(0,0,0,.4);
  --shadow-pop:  0 8px 24px rgba(0,0,0,.5);
  --shadow-modal:0 20px 50px rgba(0,0,0,.6);
  --overlay:     rgba(0,0,0,.65);
}

/* ══ 2. DASAR & KERANGKA ════════════════════════════════════════════ */

body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary-ink); }

/* Angka: tabular supaya kolom rupiah dan bobot berbaris rapi. Tanpa ini
   "1.111" terlihat lebih pendek dari "8.888" dan kolom angka bergoyang. */
.angka, td.angka, th.angka, .kpi-nilai, .kk-nilai, table td.num {
  font-variant-numeric: tabular-nums;
}

/* ── Topbar ── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  height: var(--tb-tinggi);
  background: var(--topbar-bg);
  color: var(--topbar-fg);
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px 0 0;
  box-shadow: 0 1px 0 var(--topbar-brd), 0 2px 10px rgba(0,0,0,.16);
}
.tb-burger {
  display: none; background: none; border: 0; color: var(--topbar-fg);
  font-size: 19px; padding: 0 12px; cursor: pointer; height: 100%;
}
.tb-brand {
  display: flex; align-items: center; gap: 9px;
  color: var(--topbar-fg); text-decoration: none;
  padding: 0 14px; height: 100%;
  width: var(--sb-lebar); flex-shrink: 0;
  transition: width .18s ease;
}
.tb-logo { font-size: 20px; line-height: 1; }
.tb-brand-teks { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.tb-brand-teks strong { font-size: 15.5px; letter-spacing: .3px; font-weight: 700; }
.tb-pb { color: var(--primary-dim); }
.tb-brand-teks small {
  font-size: 10px; color: var(--topbar-dim); font-weight: 500;
  text-transform: uppercase; letter-spacing: .5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tb-tengah { flex: 1; min-width: 0; display: flex; align-items: center; }
.tb-farm {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--topbar-hov); border: 1px solid var(--topbar-brd);
  border-radius: 20px; padding: 5px 12px 5px 11px;
  font-size: 12.5px; color: var(--topbar-fg); cursor: pointer;
}
.tb-farm select {
  background: none; border: 0; color: var(--topbar-fg);
  font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; outline: none; padding-right: 2px;
}
/* Daftar pilihan digambar oleh sistem operasi, bukan oleh halaman — kalau
   warnanya tidak dipaksa balik ke permukaan biasa, isinya jadi teks putih
   di atas putih dan tidak terbaca sama sekali. */
.tb-farm select option { background: var(--surface); color: var(--text); }
.tb-farm-kunci { cursor: default; }
.tb-gembok { font-size: 10px; opacity: .75; }

.tb-kanan { display: flex; align-items: center; gap: 4px; position: relative; }
.tb-ikon {
  background: none; border: 0; color: var(--topbar-fg);
  font-size: 15px; line-height: 1; cursor: pointer;
  width: 34px; height: 34px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; opacity: .9;
}
.tb-ikon:hover { background: var(--topbar-hov); opacity: 1; }

.tb-user { position: relative; }
.tb-user-btn {
  display: flex; align-items: center; gap: 8px;
  background: none; border: 0; color: var(--topbar-fg);
  padding: 4px 8px 4px 4px; border-radius: 8px; cursor: pointer;
  font: inherit;
}
.tb-user-btn:hover { background: var(--topbar-hov); }
.tb-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--primary-dim); color: var(--solid-slate);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12.5px; flex-shrink: 0;
}
.tb-user-nama { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.tb-user-nama strong { font-size: 12.5px; font-weight: 600; }
.tb-user-nama small { font-size: 10px; color: var(--topbar-dim); }
.tb-caret { font-size: 9px; opacity: .7; }
.tb-user-menu {
  display: none; position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 210px; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow-pop); overflow: hidden; z-index: 400;
}
.tb-user.buka .tb-user-menu { display: block; }
.tb-user-menu a {
  display: block; padding: 9px 14px; font-size: 13px;
  color: var(--text); text-decoration: none;
}
.tb-user-menu a:hover { background: var(--surface-2); }
.tb-user-garis { height: 1px; background: var(--border-2); }
.tb-keluar { color: var(--danger-ink) !important; }

/* ── Lonceng ── */
.notif-dot {
  position: absolute; top: 2px; right: 2px; display: none;
  min-width: 15px; height: 15px; padding: 0 3px; border-radius: 9px;
  background: var(--danger); color: #fff;
  font-size: 9.5px; font-weight: 700; line-height: 15px; text-align: center;
}
.notif-dot:not([data-n="0"]) { display: block; }
.notif-dot:not([data-n="0"])::after { content: attr(data-n); }
.notif-panel {
  display: none; position: absolute; top: calc(100% + 6px); right: 40px;
  width: 350px; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow-pop); overflow: hidden; z-index: 400;
}
.notif-panel.buka { display: block; }
.notif-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--border-2);
  font-size: 12.5px; font-weight: 700;
}
.notif-segar {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 600; color: var(--primary-ink);
}
.notif-segar:hover { text-decoration: underline; }
.notif-body { max-height: min(440px, 62vh); overflow-y: auto; }
.notif-kosong { padding: 26px 14px; text-align: center; font-size: 12.5px; color: var(--text-muted); }
/* Warna ditulis eksplisit dengan selektor dua kelas. Panel ini bersarang di
   dalam .topbar, dan aturan `.tb-kanan a { color: … }` lebih spesifik
   daripada .notif-item sendirian — judulnya akan mewarisi PUTIH dari bilah
   atas lalu hilang di atas panel putih. Di tema gelap kebetulan terbaca,
   yang justru membuat cacatnya gampang lolos. */
.notif-panel .notif-item {
  display: block; padding: 11px 14px; text-decoration: none;
  color: var(--text); border-bottom: 1px solid var(--border-3);
}
.notif-panel .notif-item:last-child { border-bottom: 0; }
.notif-panel .notif-item:hover { background: var(--surface-2); }
.notif-atas { display: flex; align-items: center; gap: 8px; }
.notif-ikon { font-size: 15px; flex-shrink: 0; }
.notif-judul { font-size: 12.5px; font-weight: 700; flex: 1; min-width: 0; }
.notif-jml {
  min-width: 20px; height: 19px; padding: 0 6px; border-radius: 10px;
  font-size: 10.5px; font-weight: 700; line-height: 19px; text-align: center;
}
.notif-bahaya .notif-jml { background: var(--danger-soft); color: var(--danger-ink); }
.notif-ingat  .notif-jml { background: var(--warn-soft);   color: var(--warn-ink); }
.notif-kabar  .notif-jml { background: var(--info-soft);   color: var(--info-ink); }
.notif-baris {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 11.5px; color: var(--text-muted); margin: 4px 0 0 23px; line-height: 1.45;
}
.notif-baris span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-baris span:last-child { flex-shrink: 0; }

/* ── Sidebar ── */
.sidebar {
  position: fixed; top: var(--tb-tinggi); left: 0; bottom: 0; z-index: 200;
  width: var(--sb-lebar);
  background: var(--sb-bg);
  border-right: 1px solid var(--sb-brd);
  display: flex; flex-direction: column;
  transition: width .18s ease, transform .18s ease;
}
.sb-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 8px 14px; }
.sb-nav::-webkit-scrollbar { width: 7px; }
.sb-nav::-webkit-scrollbar-thumb { background: var(--surface-4); border-radius: 4px; }

.sb-modul {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; margin-bottom: 1px;
  border: 0; background: none; font: inherit; font-size: 13.2px;
  color: var(--sb-fg); text-decoration: none;
  border-radius: var(--radius-sm); cursor: pointer; text-align: left;
}
.sb-modul:hover { background: var(--sb-hov); color: var(--text); }
.sb-modul.aktif, .sb-modul.aktif-grup {
  background: var(--sb-aktif-bg); color: var(--sb-aktif-fg); font-weight: 600;
}
.sb-ikon {
  width: 22px; flex-shrink: 0; text-align: center;
  font-size: 15px; line-height: 1;
}
.sb-teks { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-panah { font-size: 10px; opacity: .55; transition: transform .16s ease; }
.sb-grup.buka .sb-panah { transform: rotate(90deg); }

.sb-anak { display: none; padding: 2px 0 6px 0; }
.sb-grup.buka .sb-anak { display: block; }
.sb-sub {
  display: block; padding: 6px 10px 6px 42px;
  font-size: 12.6px; color: var(--text-muted); text-decoration: none;
  border-radius: var(--radius-sm); position: relative;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Garis penghubung anak menu. Tanpa ini daftar submenu terbaca sebagai
   deretan tautan lepas, bukan sebagai isi dari modul di atasnya. */
.sb-sub::before {
  content: ''; position: absolute; left: 21px; top: 0; bottom: 0;
  width: 1px; background: var(--border-2);
}
.sb-sub:hover { background: var(--sb-hov); color: var(--text); }
.sb-sub.aktif {
  color: var(--sb-aktif-fg); font-weight: 600; background: var(--sb-aktif-bg);
}
.sb-sub.aktif::before { background: var(--primary); width: 2px; }

.sb-kaki { border-top: 1px solid var(--sb-brd); padding: 8px; }

/* ⚠ NAMANYA `sb-tombol-ciut`, BUKAN `sb-ciut` — jangan disingkat lagi.
   ---------------------------------------------------------------
   `sb-ciut` sudah dipakai sebagai kelas KEADAAN di <body> ("sidebar
   sedang diciutkan"). Waktu tombol ini juga bernama `.sb-ciut`, aturan
   di bawah ikut kena ke <body> begitu sidebar diciutkan — dan `<body>`
   berubah jadi `display:flex`. Akibatnya `.isi` jadi flex item lalu
   menyusut mengikuti isinya: halaman selebar 2560 px cuma memakai 593 px
   di kiri, sisanya kosong.

   Cacat seperti ini tidak memunculkan galat apa pun dan tidak kelihatan
   di layar sempit — di bawah ±1700 px, `.isi` kebetulan tetap penuh
   karena isinya memang selebar itu. */
.sb-tombol-ciut {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 10px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--text-muted);
  border-radius: var(--radius-sm);
}
.sb-tombol-ciut:hover { background: var(--sb-hov); color: var(--text); }
.sb-ciut-ikon { width: 22px; text-align: center; font-size: 15px; }
.sb-versi { font-size: 10.5px; color: var(--text-dim); padding: 4px 10px 0 42px; }

/* Sidebar ciut: hanya ikon. Submenu disembunyikan seluruhnya — menampilkan
   teks 13 px di ruang 58 px hanya menghasilkan potongan kata. */
/* Dua selektor untuk keadaan yang sama. `html.pra-ciut` dipasang tema.js
   di <head>, sebelum <body> ada — tanpa itu, sidebar tampil lebar dulu
   lalu menyempit begitu skrip jalan, dan seluruh isi halaman melompat
   160 px ke kiri di depan mata. `body.sb-ciut` dipakai setelahnya, karena
   tombol Ciutkan mengubah kelas pada <body>. */
html.pra-ciut .sidebar,
body.sb-ciut .sidebar { width: var(--sb-ciut); }
html.pra-ciut .tb-brand,
body.sb-ciut .tb-brand { width: var(--sb-ciut); padding: 0 0 0 16px; }
html.pra-ciut .tb-brand-teks,
body.sb-ciut .tb-brand-teks { display: none; }
html.pra-ciut .sb-teks, html.pra-ciut .sb-panah,
body.sb-ciut .sb-teks,
body.sb-ciut .sb-panah { display: none; }
/* `.sb-grup .sb-anak` dan bukan `.sb-anak` saja: aturan pembuka akordeon
   `.sb-grup.buka .sb-anak` punya tiga kelas, jadi ia MENANG atas selektor
   dua kelas — dan modul yang sedang aktif akan memaksa submenunya tetap
   tampil di sidebar selebar 58 px. Selektor di bawah dibuat lebih spesifik
   supaya keadaan ciut selalu menang. */
html.pra-ciut .sb-grup .sb-anak,
body.sb-ciut .sb-grup .sb-anak { display: none; }
html.pra-ciut .sb-modul,
body.sb-ciut .sb-modul { justify-content: center; padding: 9px 6px; }
html.pra-ciut .sb-tombol-ciut,
body.sb-ciut .sb-tombol-ciut { justify-content: center; }
html.pra-ciut .sb-ciut-ikon,
body.sb-ciut .sb-ciut-ikon { transform: rotate(180deg); }
html.pra-ciut .isi,
body.sb-ciut .isi { margin-left: var(--sb-ciut); }

.tirai {
  display: none; position: fixed; inset: 0; z-index: 150;
  background: var(--overlay);
}

/* ── Isi ── */
/* TANPA max-width, dengan sengaja.
   ---------------------------------------------------------------
   Dulu dibatasi 1500 px dengan alasan "baris teks jangan terlalu
   panjang". Alasan itu berlaku untuk artikel, bukan untuk ERP: hampir
   setiap layar di sini isinya tabel 10-15 kolom, dan yang terjadi di
   monitor 2560 px adalah tabel berdesakan dengan gulir mendatar
   sementara sepertiga layar di kanannya kosong.

   Yang membatasi lebar bacaan sekarang komponennya masing-masing —
   .rencana dibatasi 640 px dan diketengahkan, kartu KPI memakai
   auto-fit — bukan pembungkus halaman yang menghukum semua layar
   dengan aturan yang cuma cocok untuk sebagian. */
.isi {
  margin-left: var(--sb-lebar);
  padding: 18px 22px 40px;
  padding-top: calc(var(--tb-tinggi) + 18px);
  transition: margin-left .18s ease;
}

.hal-kepala {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.hal-judul { font-size: 19px; font-weight: 700; letter-spacing: -.2px; }
.hal-sub { font-size: 12.8px; color: var(--text-muted); margin-top: 2px; }
.hal-aksi { display: flex; gap: 8px; flex-wrap: wrap; }

/* ══ 3. KOMPONEN UMUM ═══════════════════════════════════════════════ */

/* ── Kartu ── */
.kartu {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  margin-bottom: 16px;
  overflow: hidden;
}
.kartu-kepala {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 11px 16px; background: var(--surface-2);
  border-bottom: 1px solid var(--border-2);
}
.kartu-judul { font-size: 13.5px; font-weight: 700; display: flex; align-items: center; gap: 7px; }
.kartu-judul small { font-weight: 500; color: var(--text-muted); font-size: 11.5px; }
.kartu-isi { padding: 16px; }
.kartu-isi-rapat { padding: 0; }
.kartu-kaki {
  padding: 10px 16px; background: var(--surface-2);
  border-top: 1px solid var(--border-2); font-size: 12.5px; color: var(--text-muted);
}

/* ── Tombol ── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--radius-sm);
  border: 1px solid transparent; font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; text-decoration: none; line-height: 1.4;
  transition: background .12s ease, border-color .12s ease;
  white-space: nowrap;
}
.btn:disabled, .btn.mati { opacity: .5; cursor: not-allowed; }
.btn-utama    { background: var(--primary); color: var(--on-accent); }
.btn-utama:hover:not(:disabled) { background: var(--primary-h); }
.btn-kedua    { background: var(--surface); color: var(--text-soft); border-color: var(--border); }
.btn-kedua:hover:not(:disabled) { background: var(--surface-2); border-color: var(--slate-brd); }
.btn-bahaya   { background: var(--danger); color: #fff; }
.btn-bahaya:hover:not(:disabled) { background: var(--danger-h); }
.btn-halus    { background: var(--primary-soft); color: var(--primary-ink); border-color: var(--primary-brd); }
.btn-halus:hover { background: var(--primary-soft2); }
.btn-kecil    { padding: 4px 9px; font-size: 11.8px; }
.btn-besar    { padding: 10px 20px; font-size: 14px; }

/* ── Toolbar ── */
.toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.toolbar-kiri, .toolbar-kanan { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cari {
  display: flex; align-items: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); overflow: hidden;
}
.cari input {
  border: 0; outline: none; padding: 7px 11px; font: inherit; font-size: 13px;
  background: none; color: var(--text); width: 210px;
}
.cari button {
  border: 0; background: none; padding: 7px 11px; cursor: pointer;
  color: var(--text-muted); font-size: 13px;
}
.cari button:hover { color: var(--primary); }

/* ── Tabel ── */
.tabel-bungkus { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  background: var(--surface-3); color: var(--text-soft);
  font-size: 11.3px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .35px; text-align: left;
  padding: 9px 12px; white-space: nowrap;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 1;
}
tbody td { padding: 9px 12px; border-bottom: 1px solid var(--border-3); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.tengah, th.tengah { text-align: center; }
tfoot td {
  padding: 10px 12px; font-weight: 700;
  background: var(--surface-3); border-top: 2px solid var(--border);
}
.td-aksi { display: flex; gap: 5px; justify-content: center; }
.tabel-kosong {
  text-align: center; padding: 44px 20px; color: var(--text-muted); font-size: 13px;
}
.tabel-kosong .kosong-ikon { font-size: 30px; display: block; margin-bottom: 8px; opacity: .5; }
/* Baris yang recording-nya tidak ada. Diberi warna, bukan sekadar sel
   kosong — data yang hilang harus terlihat hilang. */
tbody tr.baris-bolong td { background: var(--danger-soft2); color: var(--text-dim); }
tbody tr.baris-bolong:hover td { background: var(--danger-soft); }

/* ── Badge ── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 20px;
  font-size: 11px; font-weight: 700; line-height: 18px;
  white-space: nowrap;
}
.badge-teal   { background: var(--primary-soft); color: var(--primary-ink); }
.badge-success{ background: var(--success-soft); color: var(--success-ink); }
.badge-warn   { background: var(--warn-soft);    color: var(--warn-ink); }
.badge-danger { background: var(--danger-soft);  color: var(--danger-ink); }
.badge-info   { background: var(--info-soft);    color: var(--info-ink); }
.badge-slate  { background: var(--slate-soft);   color: var(--slate-ink); }
.badge-purple { background: var(--purple-soft);  color: var(--purple-ink); }

/* ── Alert ── */
.alert {
  padding: 11px 15px; border-radius: var(--radius-sm);
  border: 1px solid; margin-bottom: 14px; font-size: 13px;
  display: flex; align-items: flex-start; gap: 9px;
}
.alert-success { background: var(--success-soft2); border-color: var(--success-brd); color: var(--success-ink); }
.alert-danger  { background: var(--danger-soft2);  border-color: var(--danger-brd);  color: var(--danger-ink); }
.alert-warn    { background: var(--warn-soft2);    border-color: var(--warn-brd);    color: var(--warn-ink); }
.alert-info    { background: var(--info-soft);     border-color: var(--info-brd);    color: var(--info-ink); }

/* ── Form ── */
.form-baris { display: grid; gap: 13px; }
.form-kolom-2 { grid-template-columns: repeat(2, 1fr); }
.form-kolom-3 { grid-template-columns: repeat(3, 1fr); }
.form-kolom-4 { grid-template-columns: repeat(4, 1fr); }
.form-grup { display: flex; flex-direction: column; gap: 5px; }
.form-grup label { font-size: 12px; font-weight: 600; color: var(--text-soft); }
.form-grup label .wajib { color: var(--danger); }
.form-grup .bantuan { font-size: 11px; color: var(--text-muted); }
input[type=text], input[type=number], input[type=date], input[type=time],
input[type=password], input[type=search], select, textarea {
  width: 100%; padding: 7px 11px; font: inherit; font-size: 13px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  outline: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft);
}
input[readonly], input:disabled, select:disabled {
  background: var(--surface-3); color: var(--text-muted); cursor: not-allowed;
}
textarea { resize: vertical; min-height: 70px; }
.form-aksi { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

/* Kepala bagian di dalam form panjang */
.bagian-hdr {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  color: var(--text-soft); padding-bottom: 7px; margin: 4px 0 12px;
  border-bottom: 2px solid var(--border-2);
}
.bagian-hdr.teal  { border-color: var(--primary); color: var(--primary-ink); }
.bagian-hdr.amber { border-color: var(--warn-brd); color: var(--warn-ink); }

/* ── Modal ── */
.modal {
  display: none; position: fixed; inset: 0; z-index: 500;
  background: var(--overlay); padding: 20px;
  overflow-y: auto;
}
.modal.buka { display: flex; align-items: flex-start; justify-content: center; }
.modal-kotak {
  background: var(--surface); border-radius: 12px;
  box-shadow: var(--shadow-modal); width: 100%; max-width: 620px;
  margin: 40px auto; overflow: hidden;
}
.modal-lebar { max-width: 900px; }
.modal-kepala {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border-2);
}
.modal-judul { font-size: 15px; font-weight: 700; }
.modal-tutup {
  background: var(--surface-3); border: 0; width: 28px; height: 28px;
  border-radius: 7px; cursor: pointer; font-size: 15px; color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.modal-tutup:hover { background: var(--surface-4); color: var(--text); }
.modal-isi { padding: 18px; }
.modal-kaki {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 13px 18px; background: var(--surface-2); border-top: 1px solid var(--border-2);
}

/* ── Halaman ── */
.halaman { display: flex; align-items: center; gap: 5px; justify-content: center; padding: 14px; }
.halaman a, .halaman span {
  min-width: 32px; height: 32px; padding: 0 9px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 12.5px; text-decoration: none; color: var(--text-soft);
  background: var(--surface);
}
.halaman a:hover { background: var(--surface-2); border-color: var(--slate-brd); }
.halaman .kini { background: var(--primary); color: var(--on-accent); border-color: var(--primary); font-weight: 700; }

/* ── Pemisah & aneka ── */
.text-muted { color: var(--text-muted); }
.text-dim   { color: var(--text-dim); }
.kecil      { font-size: 11.5px; }
.mono       { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 12px; }
.nowrap     { white-space: nowrap; }
.mt-0 { margin-top: 0 } .mb-0 { margin-bottom: 0 }
.mt-16 { margin-top: 16px } .mb-16 { margin-bottom: 16px }

/* ══ 4. KOMPONEN KHAS PETERNAKAN ════════════════════════════════════ */

/* ── Kartu KPI ringkas (baris atas dashboard) ── */
.kpi-baris {
  display: grid; gap: 12px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
}
.kpi {
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--radius); padding: 13px 15px;
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 3px;
  position: relative; overflow: hidden;
}
/* Pita warna tipis di kiri. Lebih tenang daripada mewarnai seluruh kartu,
   tapi tetap cukup untuk memindai deretan KPI dengan sekali lihat. */
.kpi::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--primary);
}
.kpi.baik::before  { background: var(--perf-baik); }
.kpi.wajar::before { background: var(--perf-wajar); }
.kpi.buruk::before { background: var(--perf-buruk); }
.kpi-label {
  font-size: 10.8px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .45px; color: var(--text-muted);
}
.kpi-nilai { font-size: 22px; font-weight: 700; letter-spacing: -.5px; line-height: 1.15; }
.kpi-nilai small { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-left: 2px; }
.kpi-kaki { font-size: 11.3px; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }
.kpi-delta { font-weight: 700; }
.kpi-delta.baik  { color: var(--perf-baik); }
.kpi-delta.wajar { color: var(--perf-wajar); }
.kpi-delta.buruk { color: var(--perf-buruk); }
.kpi-delta.netral{ color: var(--perf-netral); }

/* ── Kartu kandang — wajah aplikasi ── */
.kk-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.kk {
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
  overflow: hidden; display: flex; flex-direction: column;
  text-decoration: none; color: var(--text);
  transition: box-shadow .15s ease, transform .15s ease;
}
.kk:hover { box-shadow: var(--shadow-pop); transform: translateY(-1px); }
.kk-kepala {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; padding: 13px 15px 11px;
  border-bottom: 1px solid var(--border-3);
}
.kk-nama { font-size: 14.5px; font-weight: 700; line-height: 1.25; }
.kk-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.kk-umur {
  text-align: right; flex-shrink: 0;
}
.kk-umur-angka { font-size: 22px; font-weight: 700; line-height: 1; letter-spacing: -.5px; }
.kk-umur-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; }

/* Bilah kemajuan umur menuju panen. Fase pakan ditandai warna supaya
   pergantian ransum terbaca tanpa membuka kartu periode. */
.kk-bar { height: 5px; background: var(--surface-3); display: flex; }
.kk-bar span { height: 100%; }
.kk-bar .f-prestarter { background: var(--fase-prestarter); }
.kk-bar .f-starter    { background: var(--fase-starter); }
.kk-bar .f-grower     { background: var(--fase-grower); }
.kk-bar .f-finisher   { background: var(--fase-finisher); }
.kk-bar .f-sisa       { background: transparent; }

.kk-isi { padding: 12px 15px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.kk-sel { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.kk-label { font-size: 10.2px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); }
.kk-nilai { font-size: 15.5px; font-weight: 700; line-height: 1.2; }
.kk-nilai small { font-size: 10.5px; font-weight: 600; color: var(--text-muted); }
.kk-nilai.baik  { color: var(--perf-baik); }
.kk-nilai.wajar { color: var(--perf-wajar); }
.kk-nilai.buruk { color: var(--perf-buruk); }
.kk-std { font-size: 10.2px; color: var(--text-dim); }

.kk-kaki {
  margin-top: auto; padding: 9px 15px;
  background: var(--surface-2); border-top: 1px solid var(--border-3);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 11.5px; color: var(--text-muted);
}
.kk-peringatan { color: var(--danger-ink); font-weight: 600; }

/* ── Rapor terhadap standar ── */
.rapor { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.rapor-sel {
  border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  padding: 11px 13px; background: var(--surface);
}
.rapor-sel.baik  { border-color: var(--perf-baik);  background: var(--perf-baik-soft); }
.rapor-sel.wajar { border-color: var(--perf-wajar); background: var(--perf-wajar-soft); }
.rapor-sel.buruk { border-color: var(--perf-buruk); background: var(--perf-buruk-soft); }
.rapor-label { font-size: 10.8px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); }
.rapor-nilai { font-size: 19px; font-weight: 700; line-height: 1.2; margin: 2px 0 1px; }
.rapor-std { font-size: 11.3px; color: var(--text-muted); display: flex; justify-content: space-between; gap: 8px; }
.rapor-delta { font-weight: 700; }
.rapor-sel.baik  .rapor-delta { color: var(--perf-baik); }
.rapor-sel.wajar .rapor-delta { color: var(--perf-wajar); }
.rapor-sel.buruk .rapor-delta { color: var(--perf-buruk); }

/* ── Linimasa periode ── */
.linimasa { position: relative; padding: 26px 0 8px; }
.lm-rel { height: 8px; background: var(--surface-3); border-radius: 4px; display: flex; overflow: hidden; }
.lm-rel span { height: 100%; }
.lm-titik {
  position: absolute; top: 6px; transform: translateX(-50%);
  font-size: 13px; line-height: 1; cursor: default;
}
.lm-skala { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10.5px; color: var(--text-dim); }

/* ── Grafik SVG ── */
.grafik { width: 100%; height: auto; display: block; }
.grafik .g-sumbu { stroke: var(--border); stroke-width: 1; }
.grafik .g-kisi  { stroke: var(--border-3); stroke-width: 1; }
.grafik .g-label { fill: var(--text-muted); font-size: 10px; }
.grafik .g-aktual{ stroke: var(--primary); stroke-width: 2; fill: none; }
.grafik .g-standar { stroke: var(--slate-brd); stroke-width: 1.5; fill: none; stroke-dasharray: 4 3; }
.grafik .g-area  { fill: var(--primary-soft); opacity: .6; }
.grafik .g-titik { fill: var(--primary); }
.grafik-legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-muted); padding: 8px 2px 0; }
.grafik-legenda i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }

/* Sparkline di kartu kandang */
.spark { display: block; width: 100%; height: 26px; }
.spark path { fill: none; stroke: var(--primary); stroke-width: 1.6; }
.spark .spark-area { fill: var(--primary-soft); stroke: none; }

/* ── Halaman yang belum dibangun ── */
/* Ditampilkan sebagai keterangan yang jujur, bukan halaman kosong atau
   pesan galat. Orang yang menelusuri demo berhak tahu layar ini memang
   belum ada isinya dan apa yang akan ada di sana. */
.rencana {
  background: var(--surface); border: 1px dashed var(--border);
  border-radius: var(--radius); padding: 30px 26px; text-align: center;
  max-width: 640px; margin: 6px auto;
}
.rencana-ikon { font-size: 34px; opacity: .55; }
.rencana h2 { font-size: 16px; font-weight: 700; margin: 10px 0 5px; }
.rencana p { font-size: 13px; color: var(--text-muted); line-height: 1.6; }
.rencana-daftar {
  text-align: left; display: inline-block; margin: 14px auto 0;
  font-size: 12.8px; color: var(--text-soft);
}
.rencana-daftar li { margin: 5px 0 5px 18px; }
.rencana-tahap {
  display: inline-block; margin-top: 16px; padding: 4px 12px;
  background: var(--primary-soft); color: var(--primary-ink);
  border-radius: 20px; font-size: 11.5px; font-weight: 700;
}

/* ══ 5. TANGGAPAN LAYAR ═════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .kk-grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
  .form-kolom-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .tb-burger { display: block; }
  .tb-brand { width: auto; padding-left: 4px; }
  /* Di layar sempit sidebar selalu jadi laci penuh — lebar "ciut" 58 px
     tidak berlaku lagi, jadi setelan ciutnya sengaja ditimpa di sini. */
  .sidebar, html.pra-ciut .sidebar, body.sb-ciut .sidebar {
    transform: translateX(-100%);
    box-shadow: var(--shadow-pop);
    width: 260px;
  }
  html.pra-ciut .sb-teks, html.pra-ciut .sb-panah,
  body.sb-ciut .sb-teks, body.sb-ciut .sb-panah { display: block; }
  html.pra-ciut .sb-grup.buka .sb-anak,
  body.sb-ciut .sb-grup.buka .sb-anak { display: block; }
  html.pra-ciut .sb-modul, body.sb-ciut .sb-modul { justify-content: flex-start; padding: 8px 10px; }
  body.sb-laci .sidebar { transform: none; }
  body.sb-laci .tirai { display: block; }
  .isi, html.pra-ciut .isi, body.sb-ciut .isi { margin-left: 0; padding: 16px 14px 40px; padding-top: calc(var(--tb-tinggi) + 16px); }
  .tb-user-nama { display: none; }
  .form-kolom-2, .form-kolom-3, .form-kolom-4 { grid-template-columns: 1fr; }
  .notif-panel { width: min(350px, calc(100vw - 20px)); right: 8px; }
}

@media (max-width: 560px) {
  .kk-isi { grid-template-columns: repeat(2, 1fr); }
  .kpi-baris { grid-template-columns: repeat(2, 1fr); }
  .hal-judul { font-size: 17px; }
  .cari input { width: 100%; }
  .toolbar-kanan { width: 100%; }
  .cari { flex: 1; }
}

@media print {
  .topbar, .sidebar, .tirai, .toolbar, .hal-aksi, .halaman, .btn { display: none !important; }
  .isi { margin: 0 !important; padding: 0 !important; max-width: none; }
  .kartu { border: 0; box-shadow: none; }
  thead th { background: var(--surface-3) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: #fff; font-size: 11px; }
}