/* Pulih — tampilan mengikuti design system "Pagi" (Claude Design: Redesain SIK Taruna — Pagi),
   warna tetap palet aplikasi. Peran warna Pagi → palet aplikasi:
     paper-white → #fff, cloud-card → primary-50, charcoal → primary-700, ink → neutral-900,
     body-gray → neutral-600, line → neutral-200, field-line → neutral-400, danger → secondary-800.
   Ukuran px desain ditulis dalam rem (px / 16) supaya ikut skala html font-size di partials/head. */

:root {
  --primary-900: #0b3b36; --primary-700: #146b5f; --primary-400: #6fa89d; --primary-50: #e3f1ee;
  --secondary-800: #8a3620; --secondary-300: #f0b79b; --secondary-500: #d8693f; --secondary-50: #fbeae0;
  --tertiary-800: #7a5308; --tertiary-500: #c88a1e; --tertiary-50: #fbeacd;
  --neutral-900: #232620; --neutral-600: #55584f; --neutral-400: #9a9c92; --neutral-200: #dedfd7; --neutral-50: #fefdfc;
  --surface-page: var(--neutral-50); --surface-card: #ffffff; --on-primary: #ffffff;
  --on-secondary-500: var(--neutral-900); --on-tertiary-500: var(--neutral-900);
  --text: var(--neutral-900); --text-muted: var(--neutral-600); --border: var(--neutral-200); --focus: var(--primary-700);

  /* peran Pagi */
  --heading: var(--primary-900);
  --link: var(--primary-700);
  --cloud: var(--primary-50);
  --strong: var(--primary-700);
  --strong-hover: var(--primary-900);
  --field-line: var(--neutral-400);
  --danger: var(--secondary-800);
  --danger-wash: var(--secondary-50);
  --backdrop: rgb(11 59 54 / .48);

  --shadow-sm: 0 1px 2px #0b3b360f;
  --shadow-lg: 0 2px 16px 0 #0b3b3626;
  --shadow-inset-soft: rgb(255 255 255 / .36) 0 1px 0 0 inset;
  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #146b5f;

  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem;
  --radius-sm: 1rem; --radius-md: 1.5rem; --radius-lg: 2rem; --radius-full: 9999px;
  --radius-image: 1rem; --radius-card: 1.5rem; --radius-button: 8rem;
  --control-height: 3rem; --row-height: 3.5rem; --card-padding: 2rem; --sidebar-width: 15.5rem;

  --font-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-heading: var(--font-sans);
}

html.dark {
  color-scheme: dark;
  --primary-900: #0b3b36; --primary-700: #146b5f; --primary-400: #5b9387; --primary-50: #243b34;
  --secondary-800: #f1aa91; --secondary-300: #704532; --secondary-500: #e48767; --secondary-50: #3b2721;
  --tertiary-800: #ebc66b; --tertiary-500: #d5a94f; --tertiary-50: #382e19;
  --neutral-900: #edf4f0; --neutral-600: #b6c3bd; --neutral-400: #87958e; --neutral-200: #384740; --neutral-50: #151d1a;
  --surface-page: #111916; --surface-card: #1b2521;
  --text: #edf4f0; --text-muted: #b6c3bd; --border: #384740; --focus: #85c9b8;
  --heading: #e3f1ee; --link: #9bd6c7;
  --backdrop: rgb(0 0 0 / .6);
  --shadow-sm: 0 1px 2px #00000040;
  --shadow-lg: 0 8px 24px -4px #00000066, 0 2px 6px #00000040;
  --focus-ring: 0 0 0 2px #111916, 0 0 0 4px #85c9b8;
}

/* Tipografi */
.body { font-family: var(--font-sans); font-size: 1rem; line-height: 1.5; font-weight: 400; }
.body-sm { font-family: var(--font-sans); font-size: max(14px, .875rem); line-height: 1.4; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: max(14px, .875rem); line-height: 1.4; font-weight: 500; }
.label-sm { font-family: var(--font-sans); font-size: max(12px, .75rem); line-height: 1.3; font-weight: 500; }
.caption { font-family: var(--font-sans); font-size: max(12px, .75rem); line-height: 1.3; font-weight: 400; }

body { margin: 0; font-family: var(--font-sans); font-size: 1rem; line-height: 1.5; background: var(--surface-page); color: var(--text); -webkit-font-smoothing: antialiased; }
body, button, input, select, textarea { font-family: var(--font-sans); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); }
/* "body a" supaya tidak tertimpa reset Tailwind (a { color: inherit }) yang dimuat setelah file ini */
body a { color: var(--link); }
body a:hover { color: var(--heading); }
.pl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Mode gelap: utilitas warna Tailwind yang masih dipakai halaman ikut palet gelap */
html.dark .bg-white { background-color: var(--surface-card) !important; }
html.dark .bg-neutral-50 { background-color: var(--neutral-50) !important; }
html.dark .bg-neutral-100 { background-color: #202b26 !important; }
html.dark .bg-primary-50 { background-color: var(--primary-50) !important; }
html.dark .bg-secondary-50 { background-color: var(--secondary-50) !important; }
html.dark .bg-tertiary-50 { background-color: var(--tertiary-50) !important; }
html.dark .text-neutral-900, html.dark .text-neutral-800, html.dark .text-neutral-700 { color: var(--neutral-900) !important; }
html.dark .text-neutral-600, html.dark .text-neutral-500 { color: var(--neutral-600) !important; }
html.dark .text-neutral-400 { color: var(--neutral-400) !important; }
html.dark .text-muted { color: var(--text-muted) !important; }
html.dark .text-primary-900 { color: var(--heading) !important; }
html.dark .text-primary-700 { color: var(--link) !important; }
html.dark .text-secondary-800 { color: var(--secondary-800) !important; }
html.dark .text-tertiary-800 { color: var(--tertiary-800) !important; }
html.dark .border-neutral-100, html.dark .border-neutral-200 { border-color: var(--border) !important; }
html.dark .divide-neutral-100 > :not(:last-child) { border-color: var(--border) !important; }
html.dark .bg-primary-700 { background-color: #146b5f !important; }
html.dark .hover\:bg-primary-900:hover { background-color: #0b3b36 !important; }


/* Fokus keyboard: satu aturan untuk semua kontrol */
:where(.pl-btn, .pl-icon-btn, .pl-back, .pl-input, .pl-side a, .pl-side button, .pl-segment a, .pl-segment button, .pl-date, a.pl-panel):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pl-option:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- AppShell: sidebar tersembunyi, muncul menimpa konten saat kursor di tepi kiri ---------- */
.pl-main { min-height: 100vh; box-sizing: border-box; padding: 2.5rem 2rem 5rem; display: flex; flex-direction: column; gap: 2rem; }
.pl-row { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; }
.pl-row > * { flex: 1 1 20rem; min-width: 0; }
.pl-section { display: flex; flex-direction: column; gap: 1rem; }
.pl-section__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.pl-section__title { margin: 0; font: 600 1.5rem/1.2 var(--font-sans); letter-spacing: -.015rem; color: var(--heading); }

/* ---------- SideNav ---------- */
.pl-side { position: fixed; z-index: 35; top: 1rem; bottom: 1rem; left: 1rem; width: var(--sidebar-width); box-sizing: border-box; display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem .75rem; border-radius: var(--radius-card); background: var(--cloud); overflow-x: hidden; overflow-y: auto; transform: translateX(calc(-100% - 2rem)); visibility: hidden; transition: transform .2s, visibility 0s .2s; }
.pl-side.is-open, .pl-side:focus-within { transform: none; visibility: visible; border: 1px solid var(--border); box-shadow: 0 .75rem 2.5rem rgb(0 0 0 / .28); transition: transform .2s; }
/* Gagang tepi kiri: penanda bahwa ada menu tersembunyi; disembunyikan saat sidebar terbuka */
.pl-side-gagang { position: fixed; z-index: 34; left: 0; top: 50%; display: grid; place-items: center; width: 1.25rem; height: 4.5rem; padding: 0; border: 0; border-radius: 0 1rem 1rem 0; background: var(--strong); color: var(--on-primary); box-shadow: var(--shadow-lg); cursor: pointer; transform: translateY(-50%); transition: width .2s, opacity .2s, background-color .2s; }
.pl-side-gagang svg { width: 1rem; height: 1rem; transition: transform .2s; }
.pl-side-gagang:hover, .pl-side-gagang:focus-visible { width: 1.75rem; background: var(--strong-hover); }
.pl-side-gagang:hover svg { transform: translateX(2px); }
.pl-side-gagang:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pl-side.is-open ~ .pl-side-gagang, .pl-side:focus-within ~ .pl-side-gagang { opacity: 0; }
/* Petunjuk sekali untuk pengguna baru, menunjuk ke gagang */
.pl-side-petunjuk { position: fixed; z-index: 34; left: 2.5rem; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; width: 15rem; padding: 1rem; box-sizing: border-box; border-radius: 1rem; background: var(--surface-card); color: var(--text); box-shadow: 0 0 0 1px var(--border), var(--shadow-lg); }
.pl-side-petunjuk[hidden] { display: none; }
.pl-side-petunjuk::before { content: ""; position: absolute; left: -.4rem; top: 50%; width: .8rem; height: .8rem; background: inherit; box-shadow: -1px 1px 0 var(--border); transform: translateY(-50%) rotate(45deg); }
.pl-side-petunjuk p { margin: 0; font: 400 max(14px, .875rem)/1.4 var(--font-sans); }
.pl-side-petunjuk b { display: block; margin-bottom: .25rem; font: 600 1rem/1.3 var(--font-sans); color: var(--heading); }
.pl-side.is-open ~ .pl-side-petunjuk { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .pl-side-gagang.is-baru { animation: gagang-denyut 1.8s ease-in-out infinite; }
  .pl-side-petunjuk { animation: petunjuk-muncul .4s ease-out .3s both; }
}
@keyframes gagang-denyut { 50% { box-shadow: 0 0 0 .4rem rgb(20 107 95 / .25), var(--shadow-lg); } }
@keyframes petunjuk-muncul { from { opacity: 0; transform: translate(-.5rem, -50%); } }

/* Tooltip sidebar: pil warna terbalik (gelap di tema terang, terang di tema gelap) dengan ujung panah ke kiri */
.pl-side-tip { position: fixed; z-index: 40; left: 0; top: 0; padding: .375rem .75rem; border-radius: .625rem; background: var(--heading); color: var(--surface-card);
  font: 500 max(13px, .8125rem)/1.3 var(--font-sans); white-space: nowrap; pointer-events: none; box-shadow: var(--shadow-lg);
  opacity: 0; transform: translate(-.375rem, -50%); transition: opacity .15s ease, transform .2s cubic-bezier(.2, .7, .2, 1); }
.pl-side-tip::before { content: ""; position: absolute; left: -.25rem; top: 50%; width: .5rem; height: .5rem; border-radius: 1px; background: inherit; transform: translateY(-50%) rotate(45deg); }
.pl-side-tip.on { opacity: 1; transform: translate(0, -50%); }
.pl-side__top { display: flex; align-items: center; gap: .5rem; }
.pl-side__brand { flex: 1; min-width: 0; display: flex; align-items: center; gap: .75rem; padding: 0 .5rem; text-decoration: none; }
body .pl-side__brand { color: var(--text); }
.pl-side__brand img { width: 2.5rem; height: 2.5rem; object-fit: contain; flex: none; }
.pl-side__brand b { display: block; font: 600 1.125rem/1.2 var(--font-sans); letter-spacing: -.011rem; white-space: nowrap; }
.pl-side__brand b + span { display: block; font: 400 max(12px, .75rem)/1.3 var(--font-sans); white-space: nowrap; color: var(--text-muted); }
.pl-side__group { display: flex; flex-direction: column; gap: .25rem; }
.pl-side__label { margin: 0 0 .25rem; padding: 0 .75rem; font: 500 max(12px, .75rem)/1.3 var(--font-sans); color: var(--text-muted); white-space: nowrap; }
.pl-side a.pl-side__link { position: relative; display: flex; align-items: center; gap: .75rem; min-height: 2.75rem; padding: 0 .75rem; border-radius: var(--radius-button); font: 500 .9375rem/1.4 var(--font-sans); color: var(--text); text-decoration: none; white-space: nowrap; transition: background-color .15s, color .15s; }
.pl-side a.pl-side__link:hover { background: var(--surface-card); color: var(--text); }
.pl-side a.pl-side__link.is-active { background: var(--strong); color: var(--on-primary); }
.pl-side__link svg { width: 1.25rem; height: 1.25rem; flex: none; }
.pl-side__link .pl-side__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pl-side__dot { position: absolute; left: 1.75rem; top: .5rem; width: .625rem; height: .625rem; border-radius: var(--radius-full); background: var(--tertiary-500); box-shadow: 0 0 0 2px var(--cloud); }
.pl-side__foot { margin-top: auto; display: flex; flex-direction: column; gap: .5rem; }
.pl-side__user { display: flex; align-items: center; gap: .75rem; padding: .5rem; border-radius: var(--radius-image); background: var(--surface-card); min-width: 0; color: inherit; text-decoration: none; transition: box-shadow .15s; }
a.pl-side__user:hover, a.pl-side__user[aria-current] { box-shadow: inset 0 0 0 1px var(--primary-400); }
.pl-side__user b { display: block; font: 500 max(14px, .875rem)/1.3 var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-side__user b + span { display: block; font: 400 max(12px, .75rem)/1.3 var(--font-sans); color: var(--text-muted); white-space: nowrap; }

/* ---------- PageHeader ---------- */
.pl-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; }
/* Kembali: pil hijau muda + panah bergeser ke kiri saat hover, jelas bisa diklik (desain halaman Informasi Keluhan) */
.pl-back { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 1rem -.75rem; padding: .375rem .875rem .375rem .625rem; border-radius: var(--radius-button); font: 500 14px/1.4 var(--font-sans); text-decoration: none; transition: background-color .15s, color .15s, box-shadow .15s; }
.pl-back svg { width: 1.25rem; height: 1.25rem; transition: transform .2s ease; }
.pl-back:hover { background: var(--cloud); color: var(--heading); box-shadow: inset 0 0 0 1px var(--field-line); }
.pl-back:hover svg { transform: translateX(-4px); }
@media (prefers-reduced-motion: reduce) { .pl-back:hover svg { transform: none; } }
.pl-page-title { margin: 0; font: 600 2.5rem/1 var(--font-sans); letter-spacing: -.075rem; color: var(--heading); text-wrap: balance; }
.pl-page-sub { margin: .75rem 0 0; font: 400 1.125rem/1.4 var(--font-sans); color: var(--text-muted); }
.pl-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }

/* ---------- Button: pill ---------- */
.pl-btn { box-sizing: border-box; display: inline-flex; align-items: center; gap: .5rem; height: var(--control-height); padding: 0 1.25rem; border: 0; border-radius: var(--radius-button); font: 500 max(15px, 1rem)/1.4 var(--font-sans); text-decoration: none; white-space: nowrap; cursor: pointer; transition: opacity .15s, transform .15s, background-color .15s, color .15s; }
.pl-btn:hover { opacity: .88; }
.pl-btn:active { transform: scale(.98); }
.pl-btn:disabled { opacity: .5; cursor: default; transform: none; }
.pl-btn svg { flex: none; }
body .pl-btn-primary { background: var(--strong); color: var(--on-primary); box-shadow: var(--shadow-inset-soft); }
body .pl-btn-primary:hover { background: var(--strong-hover); color: var(--on-primary); opacity: 1; }
body .pl-btn-secondary { background: var(--cloud); color: var(--heading); }
body .pl-btn-secondary:hover { color: var(--heading); }
body .pl-btn-ghost { background: var(--surface-card); color: var(--text); box-shadow: inset 0 0 0 1px var(--field-line); }
body .pl-btn-ghost:hover { color: var(--text); }
body .pl-btn-danger { background: var(--danger); color: var(--on-primary); }
body .pl-btn-danger:hover { color: var(--on-primary); }
body .pl-btn-notice { background: var(--tertiary-800); color: var(--on-primary); }
body .pl-btn-notice:hover { color: var(--on-primary); }
.pl-btn-sm { height: 2.5rem; padding: 0 1rem; font-size: max(14px, .875rem); }

/* Ikon bulat untuk aksi di tabel; varian warna mengikuti makna aksi di aplikasi */
.pl-icon-btn { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none; padding: 0; border: 0; border-radius: var(--radius-full); text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s; }
body .pl-icon-btn { background: var(--cloud); color: var(--heading); }
body .pl-icon-btn:hover { background: var(--strong); color: var(--on-primary); }
body .pl-icon-btn--accent { background: var(--secondary-50); color: var(--secondary-800); }
body .pl-icon-btn--accent:hover { background: var(--secondary-800); color: var(--on-primary); }
body .pl-icon-btn--notice { background: var(--tertiary-50); color: var(--tertiary-800); }
body .pl-icon-btn--notice:hover { background: var(--tertiary-800); color: var(--on-primary); }
body .pl-icon-btn:disabled { opacity: .5; cursor: default; }
body .pl-icon-btn--accent:disabled { background: var(--secondary-50); color: var(--secondary-800); }
body .pl-icon-btn--notice:disabled { background: var(--tertiary-50); color: var(--tertiary-800); }
.pl-icon-btn svg { width: 1.25rem; height: 1.25rem; }
/* Mode gelap: secondary-800 / tertiary-800 jadi terang, latar tombol berteks putih pakai nada gelapnya */
html.dark body .pl-btn-danger, html.dark body .pl-icon-btn--accent:hover { background: #8a3620; }
html.dark body .pl-btn-notice, html.dark body .pl-icon-btn--notice:hover { background: #7a5308; }

/* ---------- Segment: pilihan berbentuk pill dalam wadah ---------- */
.pl-segment { display: inline-flex; flex-wrap: wrap; align-self: flex-start; gap: .25rem; padding: .25rem; border-radius: var(--radius-button); background: var(--cloud); }
.pl-segment > a, .pl-segment > button { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 1rem; border: 0; border-radius: var(--radius-button); background: transparent; font: 500 max(14px, .875rem)/1.4 var(--font-sans); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .15s, color .15s; }
body .pl-segment > a, body .pl-segment > button { color: var(--text); }
body .pl-segment > a:hover, body .pl-segment > button:hover { background: var(--surface-card); color: var(--text); }
body .pl-segment > [aria-current], body .pl-segment > [aria-pressed="true"] { background: var(--strong); color: var(--on-primary); }
body .pl-segment > [aria-current]:hover, body .pl-segment > [aria-pressed="true"]:hover { background: var(--strong); color: var(--on-primary); }

/* ---------- Field: input, select, textarea ---------- */
.pl-form { display: flex; flex-direction: column; gap: 1.5rem; }
.pl-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr)); gap: 1.25rem 1.5rem; }
.pl-field { display: flex; flex-direction: column; gap: .5rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.pl-field--wide { grid-column: 1 / -1; }
.pl-field-label, .pl-field > legend { padding: 0; font: 500 max(14px, .875rem)/1.4 var(--font-sans); color: var(--text); }
.pl-req { color: var(--danger); margin-left: 2px; }
.pl-field-hint { font: 400 max(14px, .875rem)/1.4 var(--font-sans); color: var(--text-muted); }
.pl-input { box-sizing: border-box; width: 100%; min-height: var(--control-height); padding: .75rem 1rem; border: 1px solid var(--field-line); border-radius: var(--radius-image); background: var(--surface-card); font: 400 1rem/1.5 var(--font-sans); color: var(--text); }
.pl-input::placeholder { color: var(--neutral-400); }
.pl-input:hover { border-color: var(--primary-400); }
.pl-input:focus-visible { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 28%, transparent); }
.pl-input:disabled { background: var(--neutral-50); color: var(--text-muted); cursor: not-allowed; }
.pl-input[aria-invalid="true"] { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.pl-input[aria-invalid="true"]:focus-visible { box-shadow: inset 0 0 0 1px var(--danger), 0 0 0 3px color-mix(in srgb, var(--danger) 28%, transparent); }
/* Pesan galat di bawah kolom (dirujuk aria-describedby kolomnya) */
.pl-field-error { display: flex; flex-direction: column; gap: .25rem; margin: 0; padding: 0; list-style: none; font: 500 max(14px, .875rem)/1.4 var(--font-sans); color: var(--danger); }
.pl-field-error li { display: flex; gap: .375rem; }
.pl-field-error li::before { content: "!"; display: grid; place-items: center; flex: none; width: 1.125rem; height: 1.125rem; margin-top: .0625rem; border-radius: var(--radius-full); background: var(--danger); color: var(--on-primary); font: 700 max(12px, .75rem)/1 var(--font-sans); }
/* Kolom kata sandi + tombol mata tampilkan/sembunyikan */
.pl-sandi { position: relative; }
.pl-sandi .pl-input { padding-right: 3.25rem; }
.pl-sandi__mata { position: absolute; right: .375rem; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--text-muted); cursor: pointer; transition: background-color .15s, color .15s; }
.pl-sandi__mata:hover { background: var(--cloud); color: var(--heading); }
.pl-sandi__mata:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 28%, transparent); }
.pl-sandi__mata svg { width: 1.25rem; height: 1.25rem; }
.pl-sandi__mata .mata-tutup, .pl-sandi__mata[aria-pressed="true"] .mata-buka { display: none; }
.pl-sandi__mata[aria-pressed="true"] .mata-tutup { display: block; }
/* Daftar syarat kata sandi yang diperbarui saat mengetik */
.pl-cek { display: flex; flex-direction: column; gap: .375rem; margin: 0; padding: 0; list-style: none; font: 400 max(14px, .875rem)/1.4 var(--font-sans); color: var(--text-muted); }
.pl-cek li { display: flex; align-items: center; gap: .5rem; transition: color .2s; }
.pl-cek li::before { content: ""; flex: none; width: 1.125rem; height: 1.125rem; box-sizing: border-box; border-radius: var(--radius-full); border: 1.5px solid var(--field-line); transition: background-color .2s, border-color .2s; }
.pl-cek li.is-ok { color: var(--text); }
.pl-cek li.is-ok::before { border-color: var(--strong); background: var(--strong) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / .75rem no-repeat; }
textarea.pl-input { min-height: 7.5rem; resize: vertical; }
/* textarea satu baris yang tingginya ikut isi (mis. terapi/obat) */
/* Pilihan waktu minum obat (sebelum/sesudah makan/lainnya); isian keterangan muncul bila "Lainnya" dipilih */
.pl-obat-waktu { grid-column: 1 / -1; }
.pl-obat-waktu .pl-option { min-height: 2.25rem; padding: 0 .875rem; }
.pl-obat-lain { display: none; }
.pl-obat-waktu:has(input[value="Lainnya"]:checked) .pl-obat-lain { display: block; }
/* Isian tanda vital (partial input-vital): tekanan darah = sistolik / diastolik; penanda nilai tidak wajar selalu ikon + teks, warna tetap di tema gelap */
.pl-vital-td { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .5rem; }
.pl-vital-td > span { font: 500 1.25rem/1 var(--font-sans); color: var(--text-muted); }
.pl-vital-tanda { align-self: flex-start; display: inline-flex; align-items: center; gap: .3125rem; padding: .25rem .625rem .25rem .5rem; border-radius: var(--radius-full); background: #b42318; color: #fff; font: 600 max(13px, .8125rem)/1.1 var(--font-sans); white-space: nowrap; }
.pl-vital-tanda[hidden] { display: none; }
.pl-vital-tanda svg { width: .875rem; height: .875rem; flex: none; }
/* skala nyeri NRS 0–10: 11 tombol berjejer */
.pl-nrs { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: .375rem; }
.pl-nrs-ujung { display: flex; justify-content: space-between; gap: 1rem; }
@media (max-width: 480px) { .pl-nrs { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
select.pl-input { appearance: none; padding-right: 2.75rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text) 50%), linear-gradient(135deg, var(--text) 50%, transparent 50%);
  background-position: calc(100% - 1.375rem) 50%, calc(100% - 1.0625rem) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.pl-input--pill { min-height: 2.75rem; padding-top: .5rem; padding-bottom: .5rem; border-radius: var(--radius-button); }
/* Select filter (pil) tampil sama dengan tombol filter .pl-saring__tombol */
select.pl-input--pill { border: 0; background-color: var(--surface-card); box-shadow: inset 0 0 0 1px var(--field-line); padding-left: 1.125rem; font: 500 max(14px, .875rem)/1.4 var(--font-sans); color: var(--text); transition: box-shadow .15s; }
select.pl-input--pill:hover { box-shadow: inset 0 0 0 1px var(--primary-400); }
select.pl-input--pill:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Option: radio / checkbox sebagai pill */
.pl-options { display: flex; flex-wrap: wrap; gap: .5rem; }
.pl-option { position: relative; display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 1.125rem; box-sizing: border-box; border-radius: var(--radius-button); background: var(--surface-card); box-shadow: inset 0 0 0 1px var(--field-line); font: 500 max(14px, .875rem)/1.4 var(--font-sans); color: var(--text); cursor: pointer; user-select: none; }
.pl-option input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.pl-option:has(input:checked) { background: var(--strong); color: var(--on-primary); box-shadow: none; }
.pl-option:has(input:disabled) { opacity: .6; cursor: not-allowed; }

/* Search */
.pl-search { position: relative; display: block; flex: 0 1 22.5rem; min-width: 13.75rem; }
.pl-search svg { position: absolute; left: 1rem; top: 50%; width: 1.125rem; height: 1.125rem; transform: translateY(-50%); color: var(--text); pointer-events: none; }
/* Kolom cari tampil sama dengan tombol filter (.pl-saring__tombol): pil, garis inset, huruf 500 */
.pl-search .pl-input { min-height: 2.75rem; padding-top: .5rem; padding-bottom: .5rem; padding-left: 2.75rem; border: 0; border-radius: var(--radius-button); box-shadow: inset 0 0 0 1px var(--field-line); font: 500 max(14px, .875rem)/1.4 var(--font-sans); transition: box-shadow .15s; }
.pl-search .pl-input:hover { box-shadow: inset 0 0 0 1px var(--primary-400); }
.pl-search .pl-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: inset 0 0 0 1px var(--primary-400); }
.pl-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }

/* ---------- Saring (pengganti <select>): tombol pil + menu kotak centang, bisa pilih banyak ---------- */
.pl-saring { position: relative; }
.pl-saring__tombol { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 .875rem 0 1.125rem; border: 0; border-radius: var(--radius-button); background: var(--surface-card); box-shadow: inset 0 0 0 1px var(--field-line); color: var(--text); font: 500 max(14px, .875rem)/1.4 var(--font-sans); white-space: nowrap; cursor: pointer; transition: box-shadow .15s, background-color .15s, color .15s; }
.pl-saring__tombol:hover { box-shadow: inset 0 0 0 1px var(--primary-400); }
.pl-saring__tombol:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pl-saring__tombol b { font-weight: 600; color: var(--text-muted); }
.pl-saring__tombol svg { width: 1rem; height: 1rem; flex: none; color: var(--text-muted); transition: transform .2s; }
.pl-saring__tombol[aria-expanded="true"] svg { transform: rotate(180deg); }
.pl-saring.is-aktif .pl-saring__tombol { background: var(--strong); box-shadow: none; color: var(--on-primary); }
.pl-saring.is-aktif .pl-saring__tombol :is(b, svg) { color: var(--on-primary); }
.pl-saring__menu { position: absolute; left: 0; top: calc(100% + .5rem); z-index: 30; min-width: 100%; width: max-content; max-width: 18rem; display: flex; flex-direction: column; gap: .125rem; margin: 0; padding: .375rem; border: 0; box-sizing: border-box; border-radius: var(--radius-sm); background: var(--surface-card); box-shadow: 0 0 0 1px var(--border), var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-.375rem) scale(.98); transform-origin: top left; transition: opacity .16s ease, transform .2s cubic-bezier(.2, .7, .2, 1), visibility 0s .2s; }
.pl-saring__menu.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.pl-saring__opsi { position: relative; display: flex; align-items: center; gap: .625rem; min-height: 2.5rem; padding: 0 .75rem 0 .625rem; border-radius: .75rem; font: 500 max(14px, .875rem)/1.4 var(--font-sans); color: var(--text); cursor: pointer; transition: background-color .15s; }
.pl-saring__opsi:hover { background: var(--cloud); }
.pl-saring__opsi input { position: absolute; opacity: 0; pointer-events: none; }
.pl-saring__cek { display: grid; place-items: center; width: 1.125rem; height: 1.125rem; flex: none; box-sizing: border-box; border-radius: .375rem; border: 1.5px solid var(--field-line); transition: background-color .15s, border-color .15s; }
.pl-saring__opsi input:checked + .pl-saring__cek { border-color: var(--strong); background: var(--strong) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / .75rem no-repeat; }
.pl-saring__opsi input:focus-visible + .pl-saring__cek { outline: 2px solid var(--focus); outline-offset: 2px; }
.pl-saring__titik { width: .5rem; height: .5rem; flex: none; border-radius: var(--radius-full); background: var(--titik); }
.pl-saring__opsi small { margin-left: auto; padding-left: 1rem; font: 500 max(12px, .75rem)/1 var(--font-sans); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pl-toolbar__end { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }

/* DateChip */
.pl-date { display: inline-flex; align-items: center; gap: .75rem; min-height: 3rem; padding: .375rem 1.25rem .375rem .5rem; box-sizing: border-box; border-radius: var(--radius-button); background: var(--cloud); color: var(--text); }
.pl-date__icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: none; border-radius: var(--radius-full); background: var(--surface-card); color: var(--link); }
.pl-date__icon svg { width: 1.125rem; height: 1.125rem; }
.pl-date small { display: block; font: 500 max(12px, .75rem)/1.2 var(--font-sans); color: var(--text-muted); }
.pl-date b { display: block; font: 500 1rem/1.3 var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* DateChip sebagai tombol pembuka kalender popover (dashboard, formulir) */
button.pl-date { border: 0; cursor: pointer; text-align: left; transition: background-color .2s, box-shadow .2s, transform .2s; }
button.pl-date:hover { background: var(--surface-card); box-shadow: 0 0 0 1px var(--border), var(--shadow-lg); transform: translateY(-1px); }
button.pl-date[aria-expanded="true"] { background: var(--surface-card); box-shadow: 0 0 0 2px var(--strong); }
.pl-date .pl-date__icon { transition: background-color .2s, color .2s; }
:is(button.pl-date:hover, button.pl-date[aria-expanded="true"], label.pl-date:focus-within) .pl-date__icon { background: var(--strong); color: var(--on-primary); }
/* Varian isian formulir: kotak bergaris seperti .pl-input, selebar kolom */
.pl-date--isian { position: relative; width: 100%; min-height: var(--control-height); gap: .625rem; padding: .3125rem 1rem .3125rem .375rem; border-radius: var(--radius-image); background: var(--surface-card); box-shadow: inset 0 0 0 1px var(--field-line); }
.pl-date--isian .pl-date__icon { width: 2.25rem; height: 2.25rem; border-radius: var(--radius-full); background: var(--cloud); }
.pl-date__teks { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 1rem/1.5 var(--font-sans); color: var(--text); font-variant-numeric: tabular-nums; }
.pl-date__teks[data-kosong] { color: var(--neutral-400); }
/* pil kecil di kanan chip: jarak dari hari ini ("3 hari lagi") atau zona waktu */
.pl-date__pil { flex: none; padding: .3125rem .625rem; border-radius: var(--radius-full); background: var(--cloud); color: var(--link); font: 500 max(12px, .75rem)/1 var(--font-sans); white-space: nowrap; }
.pl-date__pil:empty { display: none; }
button.pl-date--isian:hover { background: var(--surface-card); box-shadow: inset 0 0 0 1px var(--primary-400), var(--shadow-lg); }
label.pl-date--isian { cursor: text; transition: box-shadow .2s; }
label.pl-date--isian:hover { box-shadow: inset 0 0 0 1px var(--primary-400); }
label.pl-date--isian:focus-within { box-shadow: 0 0 0 2px var(--strong); }
.pl-date[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--danger), 0 0 0 1px var(--danger); }
/* Varian tombol: sama dengan tombol rentang tanggal dashboard — pil tanpa garis setinggi 2.75rem, selebar isinya */
.pl-date--tombol { min-height: 0; height: 2.75rem; max-width: 100%; gap: .5rem; padding: .25rem 1rem .25rem .25rem; background: var(--cloud); box-shadow: none; }
/* di atas panel hijau muda (.pl-panel), hijaunya dipertegas sedikit supaya tombol tetap terlihat */
.pl-panel .pl-date--tombol { background: color-mix(in srgb, var(--strong) 12%, var(--cloud)); }
.pl-date--tombol .pl-date__icon { width: 2.25rem; height: 2.25rem; background: var(--surface-card); }
.pl-date--tombol .pl-date__teks { flex: 0 1 auto; font: 500 max(14px, .875rem)/1.4 var(--font-sans); }
.pl-date--tombol .pl-date__teks[data-kosong] { color: var(--text); }
.pl-date--tombol .pl-date__pil { background: var(--surface-card); }
.pl-date__chev { width: 1rem; height: 1rem; margin-left: auto; flex: none; color: var(--text-muted); transition: transform .2s; }
button.pl-date[aria-expanded="true"] .pl-date__chev { transform: rotate(180deg); }
/* jam di dalam DateChip: input time tanpa bingkai, huruf sama dengan nilai tanggal */
.pl-date__jam { flex: 1; width: 100%; min-width: 5.5rem; padding: 0; border: 0; background: transparent; color: var(--text); font: 400 1rem/1.5 var(--font-sans); font-variant-numeric: tabular-nums; }
.pl-date__jam:focus { outline: none; }
.pl-date__jam::-webkit-calendar-picker-indicator { display: none; }
/* nilai tersembunyi di bawah chip: tetap divalidasi browser (required) dan gelembung galatnya menunjuk chip */
.pl-date__nilai { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }

/* Kalender popover (rentang di dashboard, satu tanggal di formulir) */
.kal-pop { position: absolute; right: 0; top: calc(100% + .5rem); z-index: 30; width: 19rem; padding: 1rem; box-sizing: border-box; border-radius: 1.5rem;
           background: var(--surface-card); box-shadow: 0 0 0 1px var(--border), var(--shadow-lg);
           opacity: 0; visibility: hidden; transform: translateY(-.5rem) scale(.97); transform-origin: top right;
           transition: opacity .18s ease, transform .22s cubic-bezier(.2, .7, .2, 1), visibility 0s .22s; }
.kal-pop.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.kal-pop--kiri { right: auto; left: 0; transform-origin: top left; }
.kal-pop--atas { top: auto; bottom: calc(100% + .5rem); transform-origin: bottom left; }
.kal-kepala { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; font: 600 1rem/1.3 var(--font-sans); color: var(--heading); }
.kal-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: .25rem; }
.kal-grid > span { display: grid; place-items: center; height: 2rem; font: 500 max(12px, .75rem)/1 var(--font-sans); color: var(--text-muted); }
.kal-grid > button { height: 2.25rem; border: 0; padding: 0; background: transparent; color: var(--text); font: 500 max(14px, .875rem)/1 var(--font-sans); font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color .15s, color .15s; }
.kal-grid > button > span { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin: auto; border-radius: 9999px; transition: inherit; }
.kal-grid > button:hover:not(:disabled) > span { background: var(--cloud); }
.kal-grid > button.hari-ini > span { box-shadow: inset 0 0 0 1px var(--field-line); }
.kal-grid > button.antara { background: var(--cloud); }
.kal-grid > button.awal { background: linear-gradient(90deg, transparent 50%, var(--cloud) 50%); }
.kal-grid > button.akhir { background: linear-gradient(90deg, var(--cloud) 50%, transparent 50%); }
.kal-grid > button.awal.akhir { background: transparent; }
.kal-grid > button:is(.awal, .akhir) > span { background: var(--strong); color: var(--on-primary); }
.kal-grid > button:disabled { color: var(--neutral-400); cursor: default; }
.kal-kaki { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--border); }
.kal-kaki small { font: 500 max(12px, .75rem)/1.3 var(--font-sans); color: var(--text-muted); }
/* pintasan tanggal (Besok, 3 hari, ...) di kaki kalender satu tanggal */
.kal-pintas { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .375rem; }
.kal-pintas button:disabled { opacity: .45; cursor: default; }
.kal-pintas button { min-height: 2rem; padding: 0 .75rem; border: 0; border-radius: var(--radius-button); background: var(--cloud); color: var(--heading); font: 500 max(13px, .8125rem)/1 var(--font-sans); cursor: pointer; transition: background-color .15s, color .15s; }
.kal-pintas button:hover:not(:disabled) { background: var(--strong); color: var(--on-primary); }

/* Isian berbentuk pil seperti form Tambah Keluhan (popup Data Taruna/Pegawai, form akun); huruf isian 16px supaya Safari iOS tidak memperbesar halaman */
.pl-isian-pil { --tinggi-isian: clamp(40px, 2.75rem, 46px); }
.pl-isian-pil .pl-field-label { font: 600 max(14px, .875rem)/1.4 var(--font-sans); }
.pl-isian-pil .pl-input { min-height: var(--tinggi-isian); border-radius: var(--radius-button); font: 500 16px/1.4 var(--font-sans); }
.pl-isian-pil input.pl-input { height: var(--tinggi-isian); padding: 0 1rem; }
.pl-isian-pil .pl-input::placeholder { font-weight: 400; }
.pl-isian-pil .pl-input:user-invalid { border-color: var(--danger); }
.pl-isian-pil .pl-combo input.pl-input { padding: 0 2.5rem; }
.pl-isian-pil .pl-combo__ikon { left: .875rem; }
.pl-isian-pil .pl-combo__chev { right: .875rem; }
.pl-isian-pil .pl-combo__chev, .pl-isian-pil .pl-combo__ikon { top: calc(var(--tinggi-isian) / 2); width: 1rem; height: 1rem; }
.pl-isian-pil .pl-btn-ghost:hover { background: var(--cloud); box-shadow: inset 0 0 0 1px var(--strong); opacity: 1; }

/* Combobox: kotak cari + dropdown pilihan (pilih taruna) */
.pl-combo { position: relative; }
.pl-combo .pl-input { padding-left: 2.75rem; padding-right: 2.75rem; }
.pl-combo__ikon { position: absolute; left: 1rem; top: calc(var(--control-height) / 2); width: 1.125rem; height: 1.125rem; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.pl-combo__chev { position: absolute; right: 1rem; top: calc(var(--control-height) / 2); width: 1.125rem; height: 1.125rem; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; transition: transform .2s; }
.pl-combo:has([aria-expanded="true"]) .pl-combo__chev { transform: translateY(-50%) rotate(180deg); }
.pl-combo__list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + .5rem); max-height: 17rem; margin: 0; padding: .375rem; overflow-y: auto; list-style: none; box-sizing: border-box; border-radius: var(--radius-image); background: var(--surface-card); box-shadow: 0 0 0 1px var(--border), var(--shadow-lg); }
.pl-combo__list[hidden], .pl-combo__list li[hidden] { display: none; }
.pl-combo__list li { display: flex; align-items: center; gap: .75rem; padding: .5rem .625rem; border-radius: .75rem; cursor: pointer; }
.pl-combo__list li:is(:hover, .aktif) { background: var(--cloud); }
.pl-combo__list li[aria-selected="true"] { box-shadow: inset 0 0 0 1px var(--strong); }
.pl-combo__list li > span:first-child { display: grid; place-items: center; width: 2rem; height: 2rem; flex: none; border-radius: var(--radius-full); background: var(--cloud); color: var(--link); font: 600 max(12px, .75rem)/1 var(--font-sans); }
.pl-combo__list li:is(:hover, .aktif) > span:first-child { background: var(--strong); color: var(--on-primary); }
.pl-combo__list b { display: block; font: 500 max(14px, .875rem)/1.3 var(--font-sans); color: var(--text); }
.pl-combo__list small { display: block; font: 400 max(12px, .75rem)/1.3 var(--font-sans); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pl-combo__list .pl-combo__grup { display: block; padding: .625rem .625rem .25rem; cursor: default; font: 600 max(11px, .6875rem)/1.3 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.pl-combo__list .pl-combo__grup:hover { background: none; }
.pl-combo__list mark { padding: 0; border-radius: .1875rem; background: color-mix(in srgb, var(--strong) 18%, transparent); color: inherit; font-weight: 600; }
.pl-combo__kosong { padding: .75rem; font: 400 max(14px, .875rem)/1.4 var(--font-sans); color: var(--text-muted); }

/* ---------- Panel / Card ---------- */
.pl-card { background: var(--cloud); border: 0; border-radius: var(--radius-card); box-sizing: border-box; }
.pl-panel { display: flex; flex-direction: column; gap: 1.5rem; padding: var(--card-padding); border-radius: var(--radius-card); background: var(--cloud); box-sizing: border-box; min-width: 0; }
a.pl-panel { text-decoration: none; transition: box-shadow .15s, transform .15s; }
body a.pl-panel, body a.pl-panel:hover { color: var(--text); }
a.pl-panel:hover { box-shadow: var(--shadow-lg); }
.pl-panel__head { display: flex; flex-direction: column; gap: .375rem; }
.pl-panel__title { margin: 0; font: 600 1.5rem/1.2 var(--font-sans); letter-spacing: -.015rem; color: var(--heading); }
.pl-panel__sub { margin: 0; font: 400 max(14px, .875rem)/1.4 var(--font-sans); color: var(--text-muted); }
.pl-panel__text { margin: 0; font: 400 1rem/1.5 var(--font-sans); color: var(--text); }
.pl-list { margin: 0; padding-left: 1.25rem; list-style: disc; font: 400 1rem/1.5 var(--font-sans); display: grid; gap: .25rem; }
.pl-form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .75rem; }

/* ---------- Alert / Notice ---------- */
.pl-alert { display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem 1.5rem; border-radius: var(--radius-card); background: var(--cloud); color: var(--text); font: 400 1rem/1.5 var(--font-sans); box-sizing: border-box; }
.pl-alert-info { background: var(--cloud); }
.pl-alert-accent { background: var(--danger-wash); color: var(--secondary-800); }
.pl-alert-notice { background: var(--tertiary-50); color: var(--tertiary-800); }
/* alert sebaris dengan ikon di kiri (status simpan, galat) */
.pl-alert--ikon { flex-direction: row; align-items: flex-start; gap: .75rem; }
.pl-alert--ikon > svg { width: 1.5rem; height: 1.5rem; flex: none; }
.pl-alert-info.pl-alert--ikon > svg { color: var(--link); }
.pl-alert__title { margin: 0; font: 600 1.125rem/1.3 var(--font-sans); }
.pl-alert__text { margin: 0; font: 400 1rem/1.5 var(--font-sans); color: var(--text); }
.pl-alert__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .25rem; }

/* ---------- Badge = StatusChip Pagi: titik warna + label ---------- */
.pl-badge { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .625rem .25rem .5rem; border-radius: var(--radius-full); background: var(--chip-bg, var(--cloud)); font: 500 max(12px, .75rem)/1.1 var(--font-sans); color: var(--text); white-space: nowrap; }
.pl-badge::before { content: ""; width: .5rem; height: .5rem; flex: none; border-radius: var(--radius-full); background: var(--ring, var(--neutral-400)); }
.pl-badge-primary { --ring: var(--primary-700); }
.pl-badge-accent { --ring: var(--secondary-500); }
.pl-badge-notice { --ring: var(--tertiary-500); }
/* Badge solid kontras (teks putih, tanpa titik): status KLB, jabatan pegawai */
.pl-badge-solid::before { display: none; }
.pl-badge-solid { padding: .3125rem .75rem; color: #fff; font-weight: 700; }
.pl-badge-solid.pl-badge-primary { background: #2f7366; }
.pl-badge-solid.pl-badge-accent { background: #b4492a; }
.pl-badge-solid.pl-badge-notice { background: #8f6212; }
.pl-badge-lg { padding: .375rem .875rem .375rem .75rem; font-size: max(14px, .875rem); }
:is(.pl-card, .pl-panel, .pl-profile, .pl-alert, .pl-stat) { --chip-bg: var(--surface-card); }

/* ---------- DataTable ---------- */
.pl-table-wrap { padding: .5rem; border-radius: var(--radius-card); background: var(--cloud); overflow: auto; box-sizing: border-box; }
.pl-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface-card); border-radius: var(--radius-image); font: 400 max(14px, .875rem)/1.4 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--text); }
.pl-table th { padding: .875rem 1rem; text-align: left; vertical-align: bottom; border-bottom: 1px solid var(--border); background: var(--surface-card); font: 500 max(12px, .75rem)/1.3 var(--font-sans); color: var(--text-muted); }
.pl-table thead tr:first-child th:first-child { border-top-left-radius: var(--radius-image); }
.pl-table thead tr:first-child th:last-child { border-top-right-radius: var(--radius-image); }
.pl-table td { height: var(--row-height); padding: .5rem 1rem; vertical-align: middle; border-bottom: 1px solid var(--border); box-sizing: border-box; }
.pl-table tbody tr:last-child td { border-bottom: 0; }
.pl-table tbody tr:hover td { background: color-mix(in srgb, var(--cloud) 45%, transparent); }
.pl-table .c { text-align: center; }
.pl-table .is-num { text-align: right; }
.pl-table td b { font-weight: 500; }
.pl-table td small { display: block; font-size: max(12px, .75rem); color: var(--text-muted); }
.pl-table-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; font: 400 max(14px, .875rem)/1.4 var(--font-sans); color: var(--text-muted); }

/* ---------- StatTile ---------- */
.pl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: 1rem; }
.pl-stat { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border-radius: var(--radius-card); background: var(--cloud); min-width: 0; box-sizing: border-box; }
.pl-stat__label { margin: 0; font: 500 1.375rem/1.3 var(--font-sans); color: var(--text); }
.pl-stat__value { margin: 0; font: 600 4rem/1 var(--font-sans); letter-spacing: -.12rem; color: var(--heading); font-variant-numeric: tabular-nums; }
.pl-stat__meta { margin: 0; font: 400 max(14px, .875rem)/1.4 var(--font-sans); color: var(--text); }
.pl-hover { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
.pl-hover:hover { transform: translateY(-.25rem); box-shadow: var(--shadow-lg); }
.pl-stat__label, .pl-stat__value, .pl-stat__meta { transition: color .2s ease; }
/* kartu angka: hijau muda secara bawaan, hijau tua saat disorot */
.pl-stat:hover { background: var(--strong); --chip-bg: var(--primary-900); }
.pl-stat:hover :is(.pl-stat__label, .pl-stat__value, .pl-stat__meta, .pl-stat__trend) { color: var(--on-primary); }
/* ikon berwarna tingkat keparahan (--sev) dan tren dibanding periode sebelumnya */
.pl-stat__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.pl-stat__icon { display: grid; place-items: center; width: 3rem; height: 3rem; flex: none; color: var(--sev); }
.pl-stat__icon svg { width: 2.5rem; height: 2.5rem; }
.pl-stat__trend { margin: 0; font: 600 max(14px, .875rem)/1.4 var(--font-sans); color: var(--text-muted); }
.pl-stat__trend--buruk { color: var(--danger); }
.pl-stat__trend--baik { color: var(--link); }

/* ---------- Legend & StackBar ---------- */
.pl-legend { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin: 0; padding: 0; list-style: none; font: 500 max(12px, .75rem)/1.3 var(--font-sans); color: var(--text); }
.pl-legend li { display: inline-flex; align-items: center; gap: .375rem; }
.pl-legend li::before { content: ""; width: .625rem; height: .625rem; border-radius: 3px; background: var(--ring); }

/* ---------- Profile & key-value ---------- */
.pl-profile { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 3rem; padding: 1.5rem var(--card-padding); border-radius: var(--radius-card); background: var(--cloud); box-sizing: border-box; }
.pl-profile__who { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.pl-avatar { display: grid; place-items: center; width: 4rem; height: 4rem; flex: none; border-radius: var(--radius-full); background: var(--strong); color: var(--on-primary); font: 600 1.375rem/1 var(--font-sans); letter-spacing: -.014rem; }
.pl-avatar--sm { width: 2.25rem; height: 2.25rem; font-size: max(13px, .8125rem); letter-spacing: 0; }
.pl-profile__name { margin: 0; font: 600 1.5rem/1.2 var(--font-sans); letter-spacing: -.015rem; color: var(--heading); }
.pl-profile__meta { margin: .25rem 0 0; font: 400 max(14px, .875rem)/1.4 var(--font-sans); color: var(--text); }
.pl-kvs { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; margin: 0 0 0 auto; }
.pl-kv { display: flex; flex-direction: column; gap: .25rem; margin: 0; }
.pl-kv dt { font: 400 max(12px, .75rem)/1.3 var(--font-sans); color: var(--text-muted); }
.pl-kv dd { margin: 0; font: 500 1rem/1.3 var(--font-sans); color: var(--text); font-variant-numeric: tabular-nums; }

/* ---------- Dialog ---------- */
.pl-dialog { box-sizing: border-box; width: min(27.5rem, calc(100vw - 2rem)); padding: var(--card-padding); border: 0; border-radius: var(--radius-card); background: var(--surface-card); color: var(--text); box-shadow: var(--shadow-lg); }
.pl-dialog::backdrop { background: var(--backdrop); }
.pl-dialog__body { display: flex; flex-direction: column; gap: 1.5rem; }
.pl-dialog__icon { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: var(--radius-full); background: var(--cloud); color: var(--link); }
.pl-dialog__icon svg { width: 1.5rem; height: 1.5rem; }
.pl-dialog--danger .pl-dialog__icon { background: var(--danger-wash); color: var(--danger); }
.pl-dialog__title { margin: 0; font: 600 1.5rem/1.2 var(--font-sans); letter-spacing: -.015rem; color: var(--heading); }
.pl-dialog__text { margin: .5rem 0 0; font: 400 1rem/1.5 var(--font-sans); color: var(--text-muted); }
.pl-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .75rem; }

/* ---------- Popup galat isian (pengganti gelembung bawaan browser; skrip di partials/head) ----------
   Kartu hijau tua berpanah yang menunjuk isian, ikon "!" koral berdenyut, nama isian + pesan + sisa isian yang belum benar.
   Warna tetap di tema gelap (kartu gelap sudah kontras di kedua tema). Isian yang ditunjuk bergoyang dan diberi cincin koral. */
.pl-galat { position: fixed; inset: auto; margin: 0; box-sizing: border-box; display: flex; align-items: flex-start; gap: .75rem; width: max-content; max-width: min(22rem, calc(100vw - 1rem));
  padding: .75rem 1.125rem .75rem .75rem; border: 0; border-radius: 1rem; overflow: visible; background: #0b3b36; color: #fff;
  box-shadow: 0 14px 32px -10px rgb(11 59 54 / .55), 0 2px 6px rgb(11 59 54 / .25), inset 0 0 0 1px rgb(255 255 255 / .1); }
.pl-galat:not(:popover-open) { display: none; }
.pl-galat::before { content: ""; position: absolute; left: var(--panah, 1.5rem); width: .875rem; height: .875rem; background: inherit; transform: translateX(-50%) rotate(45deg); }
.pl-galat[data-sisi="bawah"] { transform-origin: var(--panah, 1.5rem) 0; }
.pl-galat[data-sisi="bawah"]::before { top: -.375rem; border-radius: 3px 0 0 0; }
.pl-galat[data-sisi="atas"] { --geser: 6px; transform-origin: var(--panah, 1.5rem) 100%; }
.pl-galat[data-sisi="atas"]::before { bottom: -.375rem; border-radius: 0 0 3px 0; }
.pl-galat:popover-open { animation: pl-galat-masuk .3s cubic-bezier(.2, 1.4, .4, 1); }
.pl-galat__ikon { display: grid; place-items: center; width: 2rem; height: 2rem; flex: none; border-radius: var(--radius-full); background: #f0b79b; color: #8a3620; animation: pl-galat-denyut 1.4s ease-out .3s 2; }
.pl-galat__ikon svg { width: 1.125rem; height: 1.125rem; }
.pl-galat__isi { display: flex; flex-direction: column; gap: .125rem; min-width: 0; padding-top: .0625rem; }
.pl-galat__judul { font: 600 max(12px, .8125rem)/1.3 var(--font-sans); color: #f0b79b; overflow-wrap: anywhere; }
.pl-galat__pesan { font: 600 max(14px, .9375rem)/1.4 var(--font-sans); }
.pl-galat__sisa { margin-top: .25rem; padding-top: .375rem; border-top: 1px solid rgb(255 255 255 / .14); font: 500 max(12px, .75rem)/1.3 var(--font-sans); color: rgb(255 255 255 / .72); }
.pl-galat__sisa[hidden] { display: none; }
:is(input, textarea, select, button).pl-galat-sorot { border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgb(216 105 63 / .4) !important; animation: pl-galat-goyang .42s ease; }
.pl-galat-sorot:not(:is(input, textarea, select, button)) { border-radius: 1rem; outline: 2px dashed #d8693f; outline-offset: 4px; animation: pl-galat-goyang .42s ease; }
@keyframes pl-galat-masuk { from { opacity: 0; transform: translateY(var(--geser, -6px)) scale(.92); } }
@keyframes pl-galat-denyut { from { box-shadow: 0 0 0 0 rgb(240 183 155 / .6); } to { box-shadow: 0 0 0 10px rgb(240 183 155 / 0); } }
@keyframes pl-galat-goyang { 20%, 60% { translate: -4px 0; } 40%, 80% { translate: 4px 0; } }
@media (prefers-reduced-motion: reduce) { .pl-galat:popover-open, .pl-galat__ikon, .pl-galat-sorot { animation: none; } }

/* ---------- Layar kecil ---------- */
@media (max-width: 640px) {
  .pl-page-title { font-size: 2rem; letter-spacing: -.06rem; }
  .pl-main { padding-inline: 1rem; }
  .pl-stat__value { font-size: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pl-hover { transition: none; }
  .pl-hover:hover { transform: none; }
  .pl-btn, .pl-side, .pl-main,   .pl-btn:active { transform: none; }
}

/* Panel sorotan layar masuk / lupa kata sandi (CloudlightHero Pagi, warna palet aplikasi) */
/* ---------- Layar masuk & lupa kata sandi (body.pl-auth) ----------
   Nilai px tetap (tidak ikut skala html font-size):
   huruf 14 / 16 / 20 / 32 / 40 (Major Third ×1,25 dari 16) · radius pil (kolom, tombol, tautan kembali; sama dengan .pl-btn / .pl-input--pill halaman lain) / 12 (notifikasi) / 24 (panel)
   · tinggi kontrol 48 · grid 8pt: label→kolom 8, antarkelompok 24, kolom terakhir→tombol 32 */
.pl-auth__brand { display: flex; align-items: center; gap: 12px; }
.pl-auth__brand img { width: 48px; height: 48px; object-fit: contain; flex: none; }
.pl-auth__brand b { display: block; font: 600 20px/28px var(--font-sans); letter-spacing: -.01em; color: var(--heading); }
.pl-auth__brand span { display: block; font: 400 14px/20px var(--font-sans); color: var(--text-muted); }
.pl-auth__logo-mobile { display: none; width: 40px; height: 40px; object-fit: contain; margin-bottom: 16px; }
@media (max-width: 639px) {
  .pl-auth__brand { display: none; }
  .pl-auth__logo-mobile { display: block; }
}
.pl-auth__form { display: flex; flex-direction: column; gap: 32px; width: 100%; max-width: 400px; margin: auto; }
.pl-auth .pl-page-title { font: 600 32px/40px var(--font-sans); letter-spacing: -.02em; }
.pl-auth .pl-page-sub { margin: 8px 0 0; font: 400 16px/24px var(--font-sans); }
.pl-auth .pl-form { gap: 24px; }
.pl-auth .pl-field { gap: 8px; }
.pl-auth .pl-field-label { font: 600 14px/20px var(--font-sans); }
.pl-auth .pl-input { height: 48px; min-height: 48px; padding: 0 20px; border-radius: var(--radius-button); font: 400 16px/24px var(--font-sans); }
.pl-auth .pl-sandi .pl-input { padding-right: 56px; }
.pl-auth .pl-sandi__mata { right: 4px; width: 40px; height: 40px; border-radius: var(--radius-full); }
.pl-auth .pl-btn { height: 48px; padding: 0 24px; border-radius: var(--radius-button); font: 600 16px/24px var(--font-sans); }
.pl-auth__kirim { margin-top: 8px; } /* gap 24 + 8 = 32 dari kolom terakhir */
.pl-auth__tautan { font: 600 14px/20px var(--font-sans); text-decoration: underline; text-underline-offset: 4px; }
.pl-auth__catatan { margin: 0; font: 400 14px/20px var(--font-sans); color: var(--text-muted); }
.pl-auth .pl-field-error, .pl-auth .pl-cek { font-size: 14px; line-height: 20px; }
/* Notifikasi status: warna .pl-alert (galat = accent, sukses = info) + ikon */
.pl-auth-alert { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 12px 16px; border-radius: 12px; font: 500 14px/20px var(--font-sans); }
.pl-auth-alert svg { width: 20px; height: 20px; flex: none; }
.pl-auth-alert--galat { background: var(--danger-wash); color: var(--secondary-800); }
.pl-auth-alert--sukses { background: var(--cloud); color: var(--link); }
/* Panel kanan ±40%, judul 40px lebih lembut, pola titik halus */
.pl-auth .pl-hero { flex: 0 0 40%; max-width: 40%; border-radius: 24px; gap: 16px;
  background: radial-gradient(color-mix(in srgb, var(--heading) 14%, transparent) 1px, transparent 1.5px) 0 0 / 20px 20px, linear-gradient(var(--primary-50), var(--secondary-50)); }
.pl-auth .pl-hero-title { font: 600 40px/48px var(--font-sans); letter-spacing: -.02em; color: color-mix(in srgb, var(--heading) 72%, transparent); }
.pl-auth .pl-hero-lede { font: 400 20px/28px var(--font-sans); }

.pl-hero { display: flex; flex-direction: column; justify-content: flex-end; gap: 1.5rem; padding: clamp(2rem, 5vw, 4rem); box-sizing: border-box; border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(var(--primary-50), var(--secondary-50)); }
.pl-hero-title { margin: 0; max-width: 12ch; font: 600 clamp(2.5rem, 4.5vw, 4rem)/1 var(--font-sans); letter-spacing: -.03em; color: var(--heading); }
.pl-hero-lede { margin: 0; max-width: 30ch; font: 400 clamp(1.125rem, 1.7vw, 1.5rem)/1.3 var(--font-sans); color: var(--text-muted); }
.pl-hero-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 0; padding: 0; list-style: none; --chip-bg: var(--surface-card); }