/* Phase 4A — Perluasan FTTI UI overrides on top of django-unfold */

/* ===== Design tokens (audit fix F1/F5/F6, 2026-09-14) =====
   Satu sumber utk warna yang sebelumnya di-duplikasi manual di tiap
   consumer rule (media query + html.dark terpisah, hex di-copy-paste).
   Consumer rules di bawah cukup referensi variable ini SEKALI -- kalau
   nanti ada warna baru yang butuh varian dark, cukup tambah di token
   block ini, tak perlu sinkronkan N tempat lagi. */
:root {
  /* Scrim (backdrop overlay modal blocking) -- sebelumnya didefinisikan
     3x berbeda (skeleton.html bg-base-900/80, form_submit_guard.js
     rgba(17,24,39,.45), services_timer.css rgba(20,30,22,.55)). Satu
     token dipakai form_submit_guard.js & services_timer.css (skeleton.html
     dari Unfold sendiri, di luar cakupan file ini). */
  --scrim-bg: rgba(17, 24, 39, 0.5);

  /* Badge status (dipakai PendingChangeAdmin.status_badge). */
  --status-pending-bg: #FBE9C8;  --status-pending-fg: #7A5A1A;
  --status-approved-bg: #DCEAD0; --status-approved-fg: #3A5340;
  --status-rejected-bg: #F5D4D4; --status-rejected-fg: #6E2A2A;

  --cancel-btn-bg: #F3F4F6; --cancel-btn-fg: #374151; --cancel-btn-bg-hover: #E5E7EB;
  --sticky-bar-bg: #ffffff; --sticky-bar-border: #E4E7E0;
}
/* Varian dark HANYA via html.dark (localStorage adminTheme) -- blok
   @media (prefers-color-scheme) lama dihapus 2026-10-01: html tak pernah
   diberi class .light, jadi `html:not(.light)` ikut gelap walau user
   eksplisit pilih tema Light saat OS-nya dark (bug class yang sama dgn
   commit 44713b0). */
html.dark {
  --scrim-bg: rgba(10, 14, 11, 0.6);
  --status-pending-bg: #3D2F12;  --status-pending-fg: #E0B569;
  --status-approved-bg: #1F3024; --status-approved-fg: #9CC0A3;
  --status-rejected-bg: #3A1A1A; --status-rejected-fg: #D67878;
  --cancel-btn-bg: #2A322C; --cancel-btn-fg: #DCE3D8; --cancel-btn-bg-hover: #374151;
  --sticky-bar-bg: #1A201C; --sticky-bar-border: #2A302C;
}

/* Reduced motion (audit fix F6) — matikan/percepat animasi non-esensial
   utk user yang set preferensi ini di OS. Berlaku global, bukan cuma
   komponen tertentu, supaya tak perlu diulang tiap file CSS baru. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Force Inter font everywhere */
body, button, input, select, textarea {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ===== Skala judul halaman standar (audit fix F4) =====
   Sebelumnya h1 punya 5 pola ukuran berbeda antar halaman (bare h1 tanpa
   class, text-2xl, text-xl, inline style tanpa ukuran) -- halaman
   dengan h1 bare tampak jauh lebih besar/beda dari halaman lain di app
   yang sama. Satu kelas dipakai semua halaman non-changelist (mis.
   pilih_cabang.html, axes_lockout.html, db_export.html, dsb). Tracking
   negatif tipis di ukuran besar (§15 Apple Design: heading besar makin
   rapat) + line-height lebih rapat drpd body text. */
.page-title {
  font-size: 1.5rem;      /* setara text-2xl Tailwind */
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}
@media (max-width: 640px) {
  .page-title { font-size: 1.25rem; line-height: 1.3; }
}
/* Kompatibilitas mundur: halaman lama yang masih pakai bare <h1>/h1.text-2xl
   tanpa sempat dimigrasi ke .page-title tetap dapat skala mobile yang
   wajar (bukan ukuran default browser ~2em) -- TIDAK pakai !important lagi
   supaya .page-title/kelas Tailwind lain gampang menimpa kalau perlu. */
@media (max-width: 640px) {
  h1:not(.page-title) { font-size: 1.25rem; line-height: 1.3; }
}

/* Status badge classes (used by PendingChangeAdmin.status_badge) */
.badge-pending  { background: var(--status-pending-bg);  color: var(--status-pending-fg); }
.badge-approved { background: var(--status-approved-bg); color: var(--status-approved-fg); }
.badge-rejected { background: var(--status-rejected-bg); color: var(--status-rejected-fg); }

/* Cancel button used by pending_delete_selected_confirmation.html */
.pd-cancel-btn {
  padding: 0.6rem 1.2rem; background: var(--cancel-btn-bg); color: var(--cancel-btn-fg);
  border-radius: 6px; text-decoration: none; font-weight: 500;
  display: inline-block;
}
.pd-cancel-btn:hover { background: var(--cancel-btn-bg-hover); }

/* Mobile tap-target compliance (44x44 min) on form inputs.
   font-size: 16px prevents iOS Safari from auto-zooming on focus. */
@media (max-width: 640px) {
  input[type=text], input[type=email], input[type=password],
  input[type=number], input[type=date], input[type=time], input[type=tel],
  input[type=datetime-local], input[type=url], input[type=search],
  select, textarea {
    min-height: 44px;
    padding: 0.625rem 0.75rem;
    font-size: 16px;
  }
}

/* Select2 (used by autocomplete_fields like Domba picker) — make the
   single-select trigger and dropdown options bigger on mobile so a
   thumb tap actually lands. */
@media (max-width: 640px) {
  .select2-container--admin-autocomplete .select2-selection--single,
  .select2-selection--single {
    min-height: 44px !important;
    line-height: 44px !important;
  }
  .select2-results__option {
    min-height: 44px;
    padding: 0.75rem 0.85rem;
    font-size: 16px;
  }
  .select2-search__field {
    min-height: 40px !important;
    font-size: 16px !important;
  }
}

/* Sticky save bar at bottom of viewport on mobile. */
@media (max-width: 640px) {
  .submit-row {
    position: sticky;
    bottom: 0;
    background: var(--sticky-bar-bg);
    padding: 0.75rem;
    border-top: 1px solid var(--sticky-bar-border);
    z-index: 10;
  }
}

/* Keep the top bar (sidebar toggle · breadcrumb/title · add button) visible
   while scrolling — make Unfold's page header sticky to the top of the
   viewport. The header already has an opaque bg + z-40, so it sits above the
   scrolling content. */
#main > div:first-child {
  position: sticky;
  top: 0;
  z-index: 40;
}

/* Row clickable di admin changelist — visual affordance untuk row navigation
   (lihat core/static/js/admin_row_clickable.js). Audit fix: cursor:pointer
   saja tak kelihatan di HP (tak ada :hover) -- tambah chevron persisten +
   state :active saat tap supaya ada sinyal sebelum-aksi di touch device. */
#result_list tbody > tr.row-clickable { cursor: pointer; position: relative; }
#result_list tbody > tr.row-clickable:hover {
  background-color: rgba(132, 169, 140, 0.08);
}
html.dark #result_list tbody > tr.row-clickable:hover {
  background-color: rgba(132, 169, 140, 0.14);
}
#result_list tbody > tr.row-clickable:active {
  background-color: rgba(132, 169, 140, 0.16);
}
html.dark #result_list tbody > tr.row-clickable:active {
  background-color: rgba(132, 169, 140, 0.22);
}
#result_list tbody > tr.row-clickable td:last-child::after {
  content: "\203A"; /* › (U+203A) */
  display: inline-block;
  margin-left: 0.4em;
  color: rgba(132, 169, 140, 0.9);
  font-weight: 700;
}
@media (min-width: 641px) {
  /* Di desktop hover sudah kasih sinyal (background berubah) -- chevron
     cukup muncul di mobile/touch supaya tak menambah noise visual di
     tabel yang sudah padat kolom. */
  #result_list tbody > tr.row-clickable td:last-child::after { display: none; }
}

/* ===== Kotak pesan semantik (audit fix F1) =====
   Sebelumnya tiap kotak info/warning/danger di halaman admin bikin
   palet warna sendiri (mis. Pengaturan Form: 5 kotak, 5 hex berbeda utk
   1 halaman) -- reusable di seluruh admin, bukan cuma satu menu. */
.pf-alert {
  border-radius: 8px; padding: 10px 14px; margin: 0 0 12px;
  font-size: .88rem; line-height: 1.5; border: 1px solid;
}
.pf-alert-info    { background: #EEF2F7; border-color: #C7D3E0; color: #3f4a57; }
.pf-alert-warning { background: #FFF6E5; border-color: #EDD9A9; color: #7a5a1e; }
.pf-alert-danger  { background: #FDECEC; border-color: #F1C0C0; color: #7a2e2e; }
html.dark .pf-alert-info    { background: #1E2A33; border-color: #33475A; color: #B7C6D3; }
html.dark .pf-alert-warning { background: #332B14; border-color: #4D3F1E; color: #E0C078; }
html.dark .pf-alert-danger  { background: #331A1A; border-color: #4D2626; color: #E09A9A; }

/* ===== Toast non-blocking (audit fix F3) =====
   Lihat core/static/js/ui_toast.js — dipakai ganti alert() utk feedback
   sukses/gagal aksi async yang tak redirect ke halaman baru. */
.pui-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #344E41; color: #FFFFFF; padding: 10px 18px; border-radius: 6px;
  z-index: 10001; font-size: .88rem; max-width: min(90vw, 420px);
  box-shadow: 0 4px 12px rgba(0,0,0,.25); opacity: 0; transition: opacity .2s;
  pointer-events: none;
}
.pui-toast.is-visible { opacity: 1; }
.pui-toast-error { background: #7A2418; }
@media (prefers-reduced-motion: reduce) { .pui-toast { transition: none; } }

/* ===== Dialog konfirmasi reusable (audit fix F2) =====
   Lihat core/static/js/ui_confirm.js. Diadaptasi dari dialog.todo-confirm
   (core/static/css/todo.css) supaya satu bahasa visual dipakai ulang
   lintas menu, bukan cuma Todo. */
dialog.pui-confirm {
  border: none; border-radius: 12px; padding: 1.5rem;
  box-shadow: 0 8px 32px rgba(0,0,0,.2);
  max-width: 420px; width: calc(100% - 2rem);
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  margin: 0; background: #FFFFFF; color: #2A3025;
}
dialog.pui-confirm::backdrop { background: var(--scrim-bg); }
dialog.pui-confirm .pui-confirm-msg { margin: 0 0 1rem; line-height: 1.5; white-space: pre-line; }
dialog.pui-confirm .actions { display: flex; gap: .5rem; justify-content: flex-end; }
html.dark dialog.pui-confirm { background: #1F2620; color: #DCE3D8; border: 1px solid #36403A; }

.pui-btn-primary {
  padding: .5rem .9rem; font-size: .9rem; font-weight: 500;
  background: #6B8C73; color: #FFFFFF; border: none; border-radius: 8px; cursor: pointer;
}
.pui-btn-primary:hover { background: #547259; }
.pui-btn-danger {
  padding: .5rem .9rem; font-size: .9rem; font-weight: 500;
  background: #D9534F; color: #FFFFFF; border: none; border-radius: 8px; cursor: pointer;
}
.pui-btn-danger:hover { background: #B83A37; }
.pui-btn-ghost {
  padding: .5rem .9rem; font-size: .9rem; background: transparent; color: #6B8C73;
  border: 1px solid #CDD3C7; border-radius: 8px; cursor: pointer;
}
.pui-btn-ghost:hover { background: #F1F5EE; }
html.dark .pui-btn-ghost { color: #9DA89E; border-color: #3A453D; }
html.dark .pui-btn-ghost:hover { background: #232B26; }

/* ===== State error/invalid form (audit fix Global #10) =====
   Sebelumnya nol aturan terkait error/invalid di layer global -- form
   custom baru (bukan Django admin form bawaan) harus mulai dari nol
   tiap kali butuh validasi visual. Reusable lintas halaman. */
.pf-field-error {
  border-color: #B91C1C !important;
}
.pf-field-error:focus {
  outline-color: #B91C1C;
  box-shadow: 0 0 0 2px rgba(185, 28, 28, 0.15);
}
.pf-field-error-msg {
  color: #B91C1C;
  font-size: 0.8rem;
  margin: 0.25rem 0 0;
}
html.dark .pf-field-error { border-color: #E38C79 !important; }
html.dark .pf-field-error:focus { outline-color: #E38C79; box-shadow: 0 0 0 2px rgba(227, 140, 121, 0.2); }
html.dark .pf-field-error-msg { color: #E38C79; }

/* ===== Quill toolbar — samakan ke brand sage green (audit fix Tours #9) =====
   Vendor quill.snow.css (diminifikasi, tidak diedit langsung) pakai biru
   #06c utk hover/active/selected. !important dipakai sengaja di sini --
   satu-satunya cara andal override vendor CSS tanpa bergantung urutan
   load antar stylesheet (quill.snow.css dimuat per-template lewat
   {% block extrastyle %}, bukan global). */
.ql-snow.ql-toolbar button:hover,
.ql-snow .ql-toolbar button:hover,
.ql-snow.ql-toolbar button:focus,
.ql-snow .ql-toolbar button:focus,
.ql-snow.ql-toolbar button.ql-active,
.ql-snow .ql-toolbar button.ql-active,
.ql-snow.ql-toolbar .ql-picker-label:hover,
.ql-snow .ql-toolbar .ql-picker-label:hover,
.ql-snow.ql-toolbar .ql-picker-label.ql-active,
.ql-snow .ql-toolbar .ql-picker-label.ql-active,
.ql-snow.ql-toolbar .ql-picker-item:hover,
.ql-snow .ql-toolbar .ql-picker-item:hover,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
  color: #6B8C73 !important;
}
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button:focus .ql-stroke,
.ql-snow .ql-toolbar button:focus .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke {
  stroke: #6B8C73 !important;
}
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow .ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button:focus .ql-fill,
.ql-snow .ql-toolbar button:focus .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-fill {
  fill: #6B8C73 !important;
}
.ql-snow a { color: #6B8C73 !important; }

/* ===== Dashboard dark mode (audit fix Dashboard #2) =====
   Sebelumnya 0% coverage -- semua warna Tailwind hardcode terang, jadi
   dashboard tetap menyilaukan di tengah chrome gelap saat user toggle
   dark mode. Di-scope ke .dashboard-unified (bukan global) supaya tak
   menyentuh halaman lain yang mungkin pakai class Tailwind sama untuk
   keperluan lain. Selector .dashboard-unified .kelas (2 specificity)
   otomatis menang atas .kelas Tailwind (1 specificity) tanpa !important. */
.dashboard-unified {
  --db-surface: #ffffff; --db-surface-alt: #f9fafb; --db-surface-alt2: #f3f4f6;
  --db-surface-alt3: #d1d5db;
  --db-border: #e5e7eb;
  --db-text-muted: #6b7280; --db-text-mid: #4b5563;
  --db-text-strong: #374151; --db-text-strongest: #1f2937;
  --db-amber-bg: #fffbeb; --db-amber-6: #d97706; --db-amber-7: #b45309; --db-amber-8: #92400e;
  --db-emerald-bg: #ecfdf5; --db-emerald-7: #047857;
  --db-red-bg: #fef2f2; --db-red-6: #dc2626; --db-red-7: #b91c1c; --db-red-8: #991b1b;
  --db-blue-6: #2563eb; --db-blue-7: #1d4ed8; --db-blue-8: #1e40af;
  --db-blue-300: #93c5fd; --db-blue-400: #60a5fa;
  --db-green-6: #16a34a;
  --db-amber-300: #fcd34d; --db-red-200: #fecaca;
  /* Aksen kartu tim (2026-09-22, permintaan user: kartu tim jangan monoton)
     -- dipakai bergantian lewat {% cycle %} di _tim_overview_cards.html,
     bukan dipetakan ke satu makna tetap (spt amber/emerald/red di SWOT),
     jadi sengaja pilih hue yang belum dipakai utk arti lain di dashboard. */
  --tim-teal-bg: #f0fdfa; --tim-teal-border: #2dd4bf;
  --tim-violet-bg: #f5f3ff; --tim-violet-border: #a78bfa;
  --tim-rose-bg: #fff1f2; --tim-rose-border: #fb7185;
  --tim-cyan-bg: #ecfeff; --tim-cyan-border: #22d3ee;
  --tim-indigo-bg: #eef2ff; --tim-indigo-border: #818cf8;
  --tim-lime-bg: #f7fee7; --tim-lime-border: #a3e635;
}
html.dark .dashboard-unified {
  --db-surface: #191F17; --db-surface-alt: #1C221C; --db-surface-alt2: #212A1F;
  --db-surface-alt3: #3A453D;
  --db-border: #2F3B2B;
  --db-text-muted: #9FB2A1; --db-text-mid: #B0C2B2;
  --db-text-strong: #DCE3D8; --db-text-strongest: #E7ECE3;
  --db-amber-bg: #332C18; --db-amber-6: #DDB25E; --db-amber-7: #E3C07E; --db-amber-8: #E8CD9E;
  --db-emerald-bg: #1E2A22; --db-emerald-7: #7FBF9C;
  --db-red-bg: #332019; --db-red-6: #E38C79; --db-red-7: #E8A08F; --db-red-8: #EDB4A5;
  --db-blue-6: #7FA8D9; --db-blue-7: #93B9E0; --db-blue-8: #A8CAEA;
  --db-blue-300: #4A6FA5; --db-blue-400: #5A7FB5;
  --db-green-6: #8FC7A6;
  --db-amber-300: #7A6A38; --db-red-200: #5A3530;
  --tim-teal-bg: #0F211F; --tim-teal-border: #2dd4bf;
  --tim-violet-bg: #211B33; --tim-violet-border: #a78bfa;
  --tim-rose-bg: #301A1F; --tim-rose-border: #fb7185;
  --tim-cyan-bg: #0F2529; --tim-cyan-border: #22d3ee;
  --tim-indigo-bg: #1B1938; --tim-indigo-border: #818cf8;
  --tim-lime-bg: #1C2515; --tim-lime-border: #a3e635;
}

.dashboard-unified .bg-white { background-color: var(--db-surface); }
.dashboard-unified .bg-gray-50 { background-color: var(--db-surface-alt); }
.dashboard-unified .bg-gray-100 { background-color: var(--db-surface-alt2); }
.dashboard-unified .bg-gray-300 { background-color: var(--db-surface-alt3); }
.dashboard-unified .bg-amber-50 { background-color: var(--db-amber-bg); }
.dashboard-unified .bg-emerald-50 { background-color: var(--db-emerald-bg); }
.dashboard-unified .bg-red-50 { background-color: var(--db-red-bg); }
.dashboard-unified .hover\:bg-gray-50:hover { background-color: var(--db-surface-alt); }

.dashboard-unified .border,
.dashboard-unified table.data-grid,
.dashboard-unified table.data-grid td,
.dashboard-unified table.data-grid th { border-color: var(--db-border); }
.dashboard-unified .border-amber-300 { border-color: var(--db-amber-300); }
.dashboard-unified .border-blue-300 { border-color: var(--db-blue-300); }
.dashboard-unified .border-blue-400 { border-color: var(--db-blue-400); }
.dashboard-unified .border-blue-600 { border-color: var(--db-blue-6); }
.dashboard-unified .border-red-200 { border-color: var(--db-red-200); }

.dashboard-unified .text-gray-500 { color: var(--db-text-muted); }
.dashboard-unified .text-gray-600 { color: var(--db-text-mid); }
.dashboard-unified .text-gray-700 { color: var(--db-text-strong); }
.dashboard-unified .text-gray-800 { color: var(--db-text-strongest); }
.dashboard-unified .hover\:text-gray-700:hover { color: var(--db-text-strong); }

.dashboard-unified .text-amber-600 { color: var(--db-amber-6); }
.dashboard-unified .text-amber-700 { color: var(--db-amber-7); }
.dashboard-unified .text-amber-800 { color: var(--db-amber-8); }
.dashboard-unified .text-emerald-700 { color: var(--db-emerald-7); }
.dashboard-unified .text-red-600 { color: var(--db-red-6); }
.dashboard-unified .text-red-700 { color: var(--db-red-7); }
.dashboard-unified .text-red-800 { color: var(--db-red-8); }
.dashboard-unified .text-blue-600 { color: var(--db-blue-6); }
.dashboard-unified .text-blue-700 { color: var(--db-blue-7); }
.dashboard-unified .text-blue-800 { color: var(--db-blue-8); }
.dashboard-unified .hover\:text-blue-700:hover { color: var(--db-blue-7); }
.dashboard-unified .hover\:text-blue-800:hover { color: var(--db-blue-8); }
.dashboard-unified .text-green-600 { color: var(--db-green-6); }

/* Kartu section (Fase 4: shadow-sm ditambahkan) -- pastikan shadow tetap
   kelihatan proporsional di atas background gelap, bukan hilang total. */
html.dark .dashboard-unified .shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,.4); }

/* ===== Aksen kartu tim (2026-09-22) =====
   Grid card tim di tab Identitas & Target -- garis atas kartu (border-top
   width diset di sini sendiri, pola sama .todo-column di todo.css, TIDAK
   bergantung ke utility "border-t-4" yang belum tentu ada) + tint header,
   dipilih bergiliran (lihat {% cycle %} di _tim_overview_cards.html) dari
   6 hue di atas supaya grid banyak-tim tak terasa monoton flat putih. */
.dashboard-unified .tim-card-teal,
.dashboard-unified .tim-card-violet,
.dashboard-unified .tim-card-rose,
.dashboard-unified .tim-card-cyan,
.dashboard-unified .tim-card-indigo,
.dashboard-unified .tim-card-lime { border-top-width: 4px; border-top-style: solid; }
.dashboard-unified .tim-card-teal   { border-top-color: var(--tim-teal-border); }
.dashboard-unified .tim-card-teal   .tim-card-head { background-color: var(--tim-teal-bg); }
.dashboard-unified .tim-card-violet { border-top-color: var(--tim-violet-border); }
.dashboard-unified .tim-card-violet .tim-card-head { background-color: var(--tim-violet-bg); }
.dashboard-unified .tim-card-rose   { border-top-color: var(--tim-rose-border); }
.dashboard-unified .tim-card-rose   .tim-card-head { background-color: var(--tim-rose-bg); }
.dashboard-unified .tim-card-cyan   { border-top-color: var(--tim-cyan-border); }
.dashboard-unified .tim-card-cyan   .tim-card-head { background-color: var(--tim-cyan-bg); }
.dashboard-unified .tim-card-indigo { border-top-color: var(--tim-indigo-border); }
.dashboard-unified .tim-card-indigo .tim-card-head { background-color: var(--tim-indigo-bg); }
.dashboard-unified .tim-card-lime   { border-top-color: var(--tim-lime-border); }
.dashboard-unified .tim-card-lime   .tim-card-head { background-color: var(--tim-lime-bg); }

/* ===== Utility Tailwind yang TIDAK ada di build Unfold (2026-10-01) =====
   Template (dashboard_unified/_tim_overview_cards/dashboard_standalone dll)
   memakai kelas ini, tapi unfold/css/styles.css prebuilt tidak memuatnya
   (tidak ada build Tailwind project sendiri) -- akibatnya grid `sm:` tak
   pernah aktif: tablet/desktop terjebak 1 kolom atau loncat langsung ke
   `lg:`. Definisi di sini mengikuti semantik Tailwind persis. File ini
   unlayered sedangkan CSS Unfold di dalam @layer, jadi aturan ini menang
   tanpa !important. Juga di-inline ke export dashboard_standalone.html
   (lihat core/views/dashboard.py). */
.items-end { align-items: flex-end; }
.items-baseline { align-items: baseline; }
.whitespace-pre-line { white-space: pre-line; }
.gap-x-6 { column-gap: 1.5rem; }
.gap-y-4 { row-gap: 1rem; }
.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem; }
.space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.25rem; }
.divide-y > :not([hidden]) ~ :not([hidden]) {
  border-top: 1px solid var(--color-base-200, #e5e7eb);
}
html.dark .divide-y > :not([hidden]) ~ :not([hidden]) {
  border-top-color: var(--color-base-800, #27272a);
}
@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ===== Warna bar Tailwind yang TIDAK ada di build Unfold (2026-10-05) =====
   Bar progres Dashboard (usia/wilayah FC, Status Kesehatan 5 tingkat,
   Coverage & Beban PIC, SLA FC, Kualitas Data, rate doa, kohort FC)
   memakai kelas warna ini tapi tak satu pun terdefinisi -- isi bar
   transparan alias tak terlihat. Nilai = palet Tailwind persis. Dijaga
   test core/tests/test_dashboard_css_classes.py. */
.bg-green-300 { background-color: #86efac; }
.bg-green-700 { background-color: #15803d; }
.bg-yellow-300 { background-color: #fde047; }
.bg-amber-500 { background-color: #f59e0b; }
.bg-red-300 { background-color: #fca5a5; }
.bg-red-400 { background-color: #f87171; }
.bg-red-700 { background-color: #b91c1c; }
.bg-rose-500 { background-color: #f43f5e; }
.bg-sky-500 { background-color: #0ea5e9; }
.bg-indigo-500 { background-color: #6366f1; }
.bg-sky-50 { background-color: #f0f9ff; }
html.dark .bg-sky-50 { background-color: rgba(14, 165, 233, 0.12); }
.text-sky-700 { color: #0369a1; }
html.dark .text-sky-700 { color: #7dd3fc; }
.text-gray-400 { color: #9ca3af; }
.h-2\.5 { height: 0.625rem; }
@media (min-width: 640px) {
  .sm\:col-span-1 { grid-column: span 1 / span 1; }
  .sm\:justify-between { justify-content: space-between; }
  .sm\:max-w-xl { max-width: 36rem; }
}