/* =====================================================================================
 * Pemantauan Infrastruktur SATU SIMRS — token & komponen UI
 *
 * Gaya komponen mengacu shadcn/ui (https://ui.shadcn.com) — ditulis ulang sebagai CSS biasa (tanpa React/Tailwind).
 * Palet mengacu Pedoman Identitas Kemenkes (KMK HK.01.07/MENKES/5/2024):
 *   Turquoise        C75 M0 Y45 K0   → layar #18B2A0 (dari logo resmi kemkes.go.id)
 *   Turquoise medium C74 M0 Y21 K0   → layar #0DB5CC
 *   Hijau kuning     C20 M0 Y100 K0  → layar #D2DC02
 *   Abu-abu          C58 M50 Y51 K19 → ≈ #676462 (konversi CMYK, perlu konfirmasi)
 *   Turunan UPT RSV  C100 M31 Y46 K8 → ≈ #007C84 (konversi CMYK, perlu konfirmasi)
 * Warna resmi murni tidak cukup kontras untuk teks putih (2,65:1), sehingga tombol/teks aksi memakai turunan gelap
 * Turquoise (#0F7B70, kontras 5,1:1 — WCAG AA); warna resmi murni untuk aksen, ring fokus, strip supergrafis.
 * Warna status (baik/peringatan/serius/kritis/netral) & seri grafik tetap mengikuti docs/03.
 * Font: Segoe UI (font sekunder resmi); judul VAG Rounded BT (font utama resmi, berlisensi) bila terpasang, cadangan Nunito.
 * ===================================================================================== */
:root {
    /* palet resmi Kemenkes */
    --kemenkes-turquoise: #18B2A0;
    --kemenkes-turquoise-medium: #0DB5CC;
    --kemenkes-hijau-kuning: #D2DC02;
    --kemenkes-abu: #676462;
    --kemenkes-rsv: #007C84;

    /* token semantik ala shadcn/ui */
    --background: #F5F7F7;
    --foreground: #0F1716;
    --card: #FFFFFF;
    --card-foreground: #0F1716;
    --primary: #0F7B70;
    --primary-hover: #0B6A60;
    --primary-foreground: #FFFFFF;
    --secondary: #E8F6F3;
    --secondary-foreground: #0B5E55;
    --muted: #F1F4F4;
    --muted-foreground: #5B6867;
    --accent: #EEF8F6;
    --accent-foreground: #0B5E55;
    --destructive: #B42318;
    --destructive-foreground: #FFFFFF;
    --border: #E1E7E6;
    --input: #CFD9D8;
    --ring: rgba(24, 178, 160, .45);
    --ring-strong: #18B2A0;
    --radius: 10px;
    --radius-md: 8px;
    --radius-sm: 6px;
    --shadow-xs: 0 1px 2px rgba(15, 23, 22, .05);
    --shadow-sm: 0 1px 3px rgba(15, 23, 22, .06), 0 1px 2px rgba(15, 23, 22, .04);

    /* status & seri (docs/03) */
    --baik: #0ca30c;
    --peringatan: #fab219;
    --serius: #ec835a;
    --kritis: #d03b3b;
    --netral: #B3BCBB;
    --seri-1: #2a78d6;
    --seri-2: #eb6834;

    /* alias lama (dipakai view) → token baru */
    --latar: var(--background);
    --kartu: var(--card);
    --garis: var(--border);
    --teks: var(--foreground);
    --teks-2: var(--muted-foreground);
    --teks-3: #66716F;
    --aksen: var(--primary);
    --aksen-muda: var(--secondary);

    --font: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --font-judul: 'VAG Rounded BT', 'VAG Rounded', 'VAGRounded BT', 'Nunito', 'Segoe UI', system-ui, sans-serif;
    --mono: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Consolas, monospace;
    --lebar: 1440px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--background); color: var(--foreground); font: 14px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--primary); text-underline-offset: 3px; }
a:hover { color: var(--primary-hover); }
h1, h2, h3 { margin: 0; font-family: var(--font-judul); font-weight: 700; letter-spacing: -.01em; }
code { font-family: var(--mono); font-size: .92em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); border-radius: var(--radius-sm); }

/* --- kepala aplikasi & tab (strip supergrafis warna resmi) --------------- */
.app-kepala { background: var(--card); border-bottom: 1px solid var(--border); position: relative; }
.app-kepala::before { content: ''; display: block; height: 4px;
    background: linear-gradient(90deg, var(--kemenkes-turquoise) 0 55%, var(--kemenkes-turquoise-medium) 55% 85%, var(--kemenkes-hijau-kuning) 85% 100%); }
.app-kepala__isi { max-width: var(--lebar); margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; gap: 16px; }
.app-merek { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--foreground); }
.app-merek__logo { width: 32px; height: 32px; border-radius: var(--radius-md); background: var(--primary); color: #fff; display: grid; place-items: center;
    font: 700 13px var(--font-judul); box-shadow: inset 0 -3px 0 var(--kemenkes-hijau-kuning); }
.app-merek__nama { font: 700 15px/1.2 var(--font-judul); }
.app-merek__sub { font-size: 12px; color: var(--muted-foreground); }
.app-pengguna { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--muted-foreground); }
.app-pengguna form { margin: 0; }
.app-pengguna a { text-decoration: none; }
.app-pengguna a[aria-current="page"] { font-weight: 600; text-decoration: underline; }
.peran { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: var(--radius-sm);
    background: var(--secondary); color: var(--secondary-foreground); }

.tab-nav { max-width: var(--lebar); margin: 0 auto; padding: 0 20px; display: flex; gap: 2px; overflow-x: auto; }
.tab-nav a { display: flex; align-items: center; gap: 6px; padding: 10px 12px; text-decoration: none; color: var(--muted-foreground); border-bottom: 2px solid transparent;
    white-space: nowrap; font-size: 13px; font-weight: 500; }
.tab-nav a:hover { color: var(--foreground); }
.tab-nav a[aria-current="page"] { color: var(--primary); border-bottom-color: var(--kemenkes-turquoise); font-weight: 600; }
.tab-nav .no { font-size: 11px; color: var(--teks-3); font-variant-numeric: tabular-nums; }
.tab-nav a[aria-current="page"] .no { color: var(--primary); }

/* --- isi halaman ------------------------------------------------------------ */
.isi { max-width: var(--lebar); margin: 0 auto; padding: 20px 24px 48px; }
.hal-kepala { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; margin-bottom: 16px; }
.hal-kepala h1 { font-size: 22px; }
.hal-kepala .no { font-size: 13px; color: var(--teks-3); margin-right: 6px; font-family: var(--font); font-weight: 600; }
.badge-sumber { display: inline-block; margin-top: 4px; font-size: 12px; color: var(--muted-foreground); background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 2px 8px; }
.badge-sumber code { font-size: 11px; }
.filter { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.filter label { font-size: 12px; font-weight: 500; color: var(--muted-foreground); display: flex; flex-direction: column; gap: 4px; }
.filter select, .filter input { height: 32px; font-size: 13px; }

/* =====================================================================================
 * FORM — gaya shadcn/ui: Input, Select, Textarea, Checkbox, Label, Field, Button
 * ===================================================================================== */
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search], input[type=url], input[type=tel],
select, textarea {
    font: inherit; font-size: 14px; color: var(--foreground); background: var(--card);
    height: 36px; padding: 4px 12px; border: 1px solid var(--input); border-radius: var(--radius-md); box-shadow: var(--shadow-xs);
    transition: border-color .15s, box-shadow .15s; min-width: 0;
}
textarea { height: auto; min-height: 72px; padding: 8px 12px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--teks-3); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--ring-strong); box-shadow: 0 0 0 3px var(--ring); border-radius: var(--radius-md); }
input:disabled, select:disabled, textarea:disabled { opacity: .5; cursor: not-allowed; }
input[aria-invalid=true], select[aria-invalid=true], textarea[aria-invalid=true] { border-color: var(--destructive); box-shadow: 0 0 0 3px rgba(180, 35, 24, .15); }
select {
    appearance: none; -webkit-appearance: none; padding-right: 32px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B6867' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
}
input[type=file] { font: inherit; font-size: 13px; color: var(--muted-foreground); max-width: 100%; }
input[type=file]::file-selector-button {
    font: inherit; font-size: 13px; font-weight: 500; height: 32px; padding: 0 12px; margin-right: 10px; cursor: pointer;
    border: 1px solid var(--input); border-radius: var(--radius-md); background: var(--card); color: var(--foreground); box-shadow: var(--shadow-xs);
}
input[type=file]::file-selector-button:hover { background: var(--accent); }
input[type=checkbox], input[type=radio] { width: 16px; height: 16px; accent-color: var(--primary); vertical-align: -3px; margin: 0 6px 0 0; }

/* Label & Field (FieldLabel / FieldDescription / FieldError) */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, .label { font-size: 14px; font-weight: 500; line-height: 1.2; color: var(--foreground); }
.field__bantu { font-size: 13px; color: var(--muted-foreground); }
.field__galat { font-size: 13px; color: var(--destructive); }

/* Button — varian default, garis (outline), sekunder, ghost, bahaya, polos (link); ukuran kecil/besar */
.tombol {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
    font: inherit; font-size: 14px; font-weight: 500; height: 36px; padding: 0 16px; border-radius: var(--radius-md);
    border: 1px solid transparent; background: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-xs);
    cursor: pointer; text-decoration: none; transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.tombol:hover { background: var(--primary-hover); color: var(--primary-foreground); }
.tombol:focus-visible { box-shadow: 0 0 0 3px var(--ring); }
.tombol:disabled, .tombol[aria-disabled=true] { opacity: .5; pointer-events: none; }
.tombol--garis { background: var(--card); color: var(--foreground); border-color: var(--input); }
.tombol--garis:hover { background: var(--accent); color: var(--accent-foreground); }
.tombol--sekunder { background: var(--secondary); color: var(--secondary-foreground); box-shadow: none; }
.tombol--sekunder:hover { background: #D9F0EB; color: var(--secondary-foreground); }
.tombol--ghost { background: transparent; color: var(--foreground); box-shadow: none; }
.tombol--ghost:hover { background: var(--accent); color: var(--accent-foreground); }
.tombol--bahaya { background: var(--destructive); color: var(--destructive-foreground); }
.tombol--bahaya:hover { background: #962018; }
.tombol--kecil { height: 32px; padding: 0 12px; font-size: 13px; gap: 4px; }
.tombol--besar { height: 40px; padding: 0 24px; }
.tombol--polos { height: auto; padding: 0; border: 0; background: none; box-shadow: none; color: var(--primary); text-decoration: underline; font-weight: 500; }
.tombol--polos:hover { background: none; color: var(--primary-hover); }

/* Alert (pesan) */
.pesan { position: relative; padding: 12px 16px 12px 44px; border-radius: var(--radius); margin-bottom: 14px; border: 1px solid var(--border); background: var(--card);
    font-size: 14px; box-shadow: var(--shadow-xs); }
.pesan::before { content: ''; position: absolute; left: 16px; top: 14px; width: 16px; height: 16px; border-radius: 50%; background: var(--primary); }
.pesan--info { border-color: #BFE6DF; background: #F4FBFA; }
.pesan--galat { border-color: #F2C7C3; background: #FEF6F5; color: var(--destructive); }
.pesan--galat::before { background: var(--destructive); }

/* --- kartu & grid (Card) ----------------------------------------------------- */
.kpi-baris { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; min-height: 108px; box-shadow: var(--shadow-sm); }
.kpi__label { font-size: 13px; font-weight: 500; color: var(--muted-foreground); }
.kpi__nilai { font: 700 26px/1.3 var(--font-judul); margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.kpi__nilai--kosong { color: var(--teks-3); }
.kpi__satuan { font: 400 13px var(--font); color: var(--muted-foreground); margin-left: 4px; }
.kpi__ket { font-size: 12px; color: var(--teks-3); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.panel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; min-width: 0; box-shadow: var(--shadow-sm); }
.panel--1 { grid-column: span 1; } .panel--2 { grid-column: span 2; } .panel--3 { grid-column: span 3; }
.panel__kepala { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.panel__kepala h2 { font-size: 15px; }
.panel__jenis { margin-left: auto; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--teks-3); text-transform: uppercase; }
.terlambat { font-size: 12px; }

.kosong { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 140px; color: var(--teks-3); text-align: center;
    border: 1px dashed var(--input); border-radius: var(--radius-md); padding: 16px; background: var(--muted); }
.kosong__pesan { font-weight: 600; color: var(--muted-foreground); }
.kosong__petunjuk { font-size: 12px; }

/* --- Badge status: titik warna + teks (aturan tampilan #8) ------------------------ */
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; line-height: 1; padding: 4px 8px 4px 7px;
    border-radius: var(--radius-sm); background: var(--card); border: 1px solid var(--border); white-space: nowrap; color: var(--foreground); }
.chip .titik { width: 8px; height: 8px; border-radius: 50%; background: var(--netral); flex: none; }
.chip--baik .titik { background: var(--baik); }
.chip--peringatan .titik { background: var(--peringatan); }
.chip--serius .titik { background: var(--serius); }
.chip--kritis .titik { background: var(--kritis); }
.chip--info .titik { background: #2F6FB3; }

/* --- Tabel -------------------------------------------------------------------------- */
.tabel-wrap { overflow-x: auto; }
.tabel-aksi { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.tabel { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabel th { text-align: left; font-weight: 500; color: var(--muted-foreground); font-size: 12px; height: 38px; padding: 0 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tabel td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tabel tbody tr:hover td { background: #F8FAFA; }
.tabel .angka { text-align: right; font-variant-numeric: tabular-nums; }
.tabel__kosong { text-align: center; color: var(--teks-3); padding: 24px 8px !important; }

/* --- Matriks ------------------------------------------------------------------------ */
.matriks { border-collapse: separate; border-spacing: 3px; font-size: 12px; }
.matriks thead th { font-weight: 500; color: var(--muted-foreground); padding: 2px 4px; white-space: nowrap; font-size: 11px; }
.matriks tbody th { text-align: left; font-weight: 400; padding-right: 10px; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.matriks th.tebal { font-weight: 700; color: var(--foreground); }
.matriks .sel { width: 30px; height: 26px; text-align: center; border-radius: var(--radius-sm); font-weight: 600; background: var(--muted); color: var(--muted-foreground); }
.matriks .sel.tebal { outline: 2px solid var(--foreground); outline-offset: -2px; }
.sel--baik { background: #E3F4E3 !important; color: #0a7d0a !important; }
.sel--peringatan { background: #FEF3D8 !important; color: #8a5f00 !important; }
.sel--serius { background: #FCE9E0 !important; color: #a4461f !important; }
.sel--kritis { background: #F8E1E1 !important; color: #B42318 !important; }
.sel--netral { background: #ECEFEF !important; }
.matriks sup { color: var(--kritis); font-weight: 700; }
.legenda { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; align-items: center; }

/* --- Grafik: alih grafik/tabel (Tabs kecil) ----------------------------------------- */
.grafik { position: relative; }
.grafik__alih { position: absolute; right: 0; top: -42px; display: inline-flex; padding: 3px; gap: 2px; background: var(--muted); border-radius: var(--radius-md); }
.grafik__alih button { font: inherit; font-size: 12px; font-weight: 500; border: 0; background: transparent; color: var(--muted-foreground); padding: 3px 10px; border-radius: var(--radius-sm); cursor: pointer; }
.grafik__alih button.aktif { background: var(--card); color: var(--foreground); box-shadow: var(--shadow-xs); }

/* --- Tile entitas --------------------------------------------------------------------- */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.tile { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 6px 8px; font-size: 12px; min-height: 52px; background: var(--card); transition: box-shadow .15s; }
a.tile:hover { box-shadow: var(--shadow-sm); border-color: var(--input); }
.tile__k { font-size: 11px; font-weight: 700; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }

/* --- Login (Card terpusat) ------------------------------------------------------------ */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px;
    background: radial-gradient(1200px 400px at 50% -10%, #E3F5F2 0%, var(--background) 60%); }
.login__kartu { width: 100%; max-width: 400px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 28px; box-shadow: 0 8px 24px rgba(15, 23, 22, .06);
    border-top: 4px solid var(--kemenkes-turquoise); }
.login__kartu h1 { font-size: 20px; margin: 18px 0 4px; }
.login__kartu p { color: var(--muted-foreground); margin: 0 0 20px; font-size: 14px; }
.login__kartu label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; color: var(--foreground); margin-bottom: 14px; }
.login__kartu label.cek { flex-direction: row; align-items: center; font-weight: 400; color: var(--muted-foreground); }
.login__kartu input[type=email], .login__kartu input[type=password] { width: 100%; }
.login__kartu .tombol { width: 100%; height: 40px; margin-top: 4px; }
.login__catatan { font-size: 12px; color: var(--teks-3); margin-top: 16px; text-align: center; }

.katalog-bagian { margin: 24px 0 10px; font-size: 17px; }

@media (max-width: 1100px) {
    .kpi-baris { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .panel-grid { grid-template-columns: minmax(0, 1fr); }
    .panel--1, .panel--2, .panel--3 { grid-column: span 1; }
    .filter { margin-left: 0; }
}

@media print {
    .app-kepala, .filter, .grafik__alih, .tabel-aksi { display: none !important; }
    body { background: #fff; }
    .panel, .kpi { break-inside: avoid; box-shadow: none; }
}

/* --- M1: form & klasifikasi --------------------------------------------------------- */
.tabel--rinci th[scope="row"] { font-weight: 400; color: var(--muted-foreground); white-space: normal; border-bottom: 1px solid var(--border); font-size: 12px; height: auto; padding: 7px 10px; }
.tabel--rinci td { font-size: 13px; }
.form-kecil { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; border-top: 1px solid var(--border); padding-top: 14px; }
.form-kecil label { font-size: 14px; font-weight: 500; color: var(--foreground); display: flex; flex-direction: column; gap: 6px; }
.form-kecil label > input, .form-kecil label > select, .form-kecil label > textarea { width: 100%; }
.form-kecil > .tombol { align-self: flex-start; }
.form-baris { flex-direction: row; flex-wrap: wrap; align-items: center; margin: 0; border: 0; padding: 0; gap: 8px; }
.form-baris input[type=text] { width: auto; }
.unggah { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.app-tautan { font-size: 13px; font-weight: 500; }

/* --- M2: matriks pengadaan (tahap berurutan = skala biru, docs/03) -------------------- */
.matriks-pengadaan td.sel-tahap { text-align: center; font-size: 12px; font-weight: 500; padding: 4px; border: 2px solid var(--card); border-radius: var(--radius-sm); white-space: nowrap; }
.matriks-pengadaan td.sel-tahap a { color: inherit; text-decoration: none; display: block; }
.t0 { background: #dbe8f7; color: #1b4f8f; }
.t1 { background: #a9c8ee; color: #173f73; }
.t2 { background: #6fa3e0; color: #0e2d55; }
.t3 { background: #2a78d6; color: #fff; }
.t4 { background: #1b4f8f; color: #fff; }
.tbatal { background: #9c9a93; color: #fff; }
.tok { background: #E3F4E3; color: #0a7d0a; }
.tdata { background: #ECEFEF; color: var(--teks-3); }
.sel-tahap.telat { outline: 2px solid var(--kritis); outline-offset: -2px; }
.tanda { color: var(--kritis); }
.t3 .tanda, .t4 .tanda { color: #ffd1d1; }
.legenda-tahap { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted-foreground); }
.legenda-tahap .kotak { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.kotak.telat { outline: 2px solid var(--kritis); outline-offset: -2px; background: #fff; }

/* kanban dashboard 8 */
.kanban { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1400px) { .kanban { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kanban__kolom { background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; min-height: 120px; max-height: 520px; overflow-y: auto; }
.kanban__kepala { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 600; color: var(--muted-foreground); margin-bottom: 8px; }
.kanban__kartu { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 7px 9px; margin-bottom: 6px; font-size: 12px;
    display: flex; justify-content: space-between; gap: 6px; box-shadow: var(--shadow-xs); }
.kanban__kartu a { color: var(--foreground); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanban__nilai { color: var(--muted-foreground); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .kanban { grid-template-columns: 1fr 1fr; } }

/* --- M3: checklist kepatuhan ------------------------------------------------------------ */
.filter-item { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; position: sticky; top: 0; z-index: 5; }
.filter-item .tombol.aktif { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
.tabel--checklist td { vertical-align: top; }
.tabel--checklist details summary { cursor: pointer; }
.tabel--checklist input[type=text] { width: 100%; min-width: 140px; height: 32px; font-size: 13px; }
.tabel--checklist select { height: 32px; font-size: 13px; }
.tabel--checklist tr.tidak-dinilai td { color: var(--teks-3); }
.tile--patuh { border-left: 4px solid var(--baik); }
.tile--bersyarat { border-left: 4px solid var(--peringatan); }
.tile--belum { border-left: 4px solid var(--kritis); }
.tile--kosong { border-left: 4px solid var(--netral); }

/* --- Katalog komponen: contoh form ------------------------------------------------------- */
.contoh-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.contoh-tombol { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.palet { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.palet__warna { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; font-size: 12px; background: var(--card); }
.palet__warna div:first-child { height: 48px; }
.palet__warna div:last-child { padding: 6px 8px; line-height: 1.35; }
@media (max-width: 800px) { .contoh-form { grid-template-columns: 1fr; } }

/* --- M4: data operasional --------------------------------------------------------------- */
.segar { font-size: 12px; color: var(--teks-3); }
.heat { border-collapse: separate; border-spacing: 3px; font-size: 12px; }
.heat th { font-weight: 500; color: var(--muted-foreground); font-size: 11px; padding: 2px 6px; text-align: left; white-space: nowrap; }
.heat td { text-align: center; border-radius: var(--radius-sm); padding: 5px 8px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 64px; }
.heat .h-baik { background: #E3F4E3; color: #0a7d0a; }
.heat .h-peringatan { background: #FEF3D8; color: #8a5f00; }
.heat .h-kritis { background: #F8E1E1; color: #B42318; }
.heat .h-kosong { background: var(--muted); color: var(--teks-3); font-weight: 400; }
.token-baru { font-family: var(--mono); font-size: 13px; padding: 10px 12px; background: var(--muted); border: 1px dashed var(--input); border-radius: var(--radius-md); word-break: break-all; }

/* --- Panduan pengguna ----------------------------------------------------------------- */
.panduan { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; align-items: start; }
.panduan__nav { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; font-size: 13px; display: flex; flex-direction: column; gap: 10px; }
.panduan__nav-kepala { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.panduan__nav input[type="search"] { width: 100%; }
.panduan__nav ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.panduan__nav ol > li > a { display: block; padding: 5px 8px; border-radius: var(--radius-sm); color: var(--foreground); font-weight: 500; text-decoration: none; }
.panduan__nav ol > li > a:hover { background: var(--accent); }
.panduan__nav li.aktif > a { background: var(--accent); color: var(--primary); }
.panduan__nav ul { list-style: none; margin: 2px 0 6px; padding: 0 0 0 12px; border-left: 2px solid var(--border); display: none; }
.panduan__nav li.aktif > ul, .panduan__nav.mencari ul { display: block; }
.panduan__nav ul a { display: block; padding: 3px 8px; color: var(--teks-2); text-decoration: none; }
.panduan__nav ul a:hover { color: var(--primary); }
.panduan__nav [hidden] { display: none !important; }
.panduan__isi { padding: 24px 28px; line-height: 1.6; font-size: 14px; max-width: 980px; }
.panduan__isi h1 { margin-top: 0; }
.panduan__isi h2 { margin: 28px 0 10px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 18px; scroll-margin-top: 12px; }
.panduan__isi h3 { margin: 20px 0 6px; font-size: 15px; scroll-margin-top: 12px; }
.panduan__isi h2:target, .panduan__isi h3:target { background: #E8F7F5; border-radius: var(--radius-sm); }
.panduan__isi ol, .panduan__isi ul { padding-left: 22px; }
.panduan__isi li { margin: 3px 0; }
.panduan__isi .tabel-wrap { margin: 10px 0 14px; }
.panduan__isi .tabel td { vertical-align: top; }
.panduan__isi pre { background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 12px; overflow-x: auto; font-size: 12.5px; }
.panduan__isi code { font-family: var(--mono); font-size: .92em; }
.panduan__isi :not(pre) > code { background: var(--muted); padding: 1px 5px; border-radius: 4px; }
.panduan__isi .bantu { color: var(--teks-2); font-size: 12.5px; margin: 0 0 4px; }
.panduan__navbawah { display: flex; justify-content: space-between; gap: 12px; margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.app-bantuan { font-weight: 600; }
@media (max-width: 900px) {
    .panduan { grid-template-columns: minmax(0, 1fr); }
    .panduan__nav { position: static; max-height: none; }
    .panduan__isi { padding: 16px; }
}
@media print {
    .panduan { display: block; }
    .panduan__nav, .panduan__navbawah { display: none !important; }
    .panduan__isi { border: 0; padding: 0; max-width: none; }
}

/* --- Akses 3 kelompok: akun RS & Kelola Akun --------------------------------------------- */
.filter--terkunci { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); }
.label-kecil { font-size: 12px; color: var(--teks-2); }
.daftar-langkah { margin: 0; padding-left: 20px; line-height: 1.7; font-size: 14px; }
.akun-aksi { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.akun-aksi form { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.sandi-sekali { font-family: var(--mono); font-size: 14px; padding: 8px 12px; background: var(--muted); border: 1px dashed var(--input); border-radius: var(--radius-md); display: inline-block; user-select: all; }
.login__kartu input[type=text], .login__kartu input[type=tel], .login__kartu select { width: 100%; }
.login__kartu--lebar { max-width: 560px; }
.login__daftar { font-size: 13px; text-align: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); color: var(--muted-foreground); }
.login__kartu fieldset { border: 0; padding: 0; margin: 0 0 6px; }
.login__kartu legend { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--primary); margin-bottom: 10px; }
.login__kartu .bantu { display: block; font-size: 12px; font-weight: 400; color: var(--muted-foreground); }
.login__kartu .dua-kolom { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.jebakan { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.kode-input { font-family: var(--mono); font-size: 22px !important; letter-spacing: 8px; text-align: center; }
.langkah-daftar { display: flex; gap: 6px; margin: 4px 0 18px; font-size: 12px; flex-wrap: wrap; }
.langkah-daftar span { padding: 3px 10px; border-radius: 999px; background: var(--muted); color: var(--muted-foreground); }
.langkah-daftar span.aktif { background: var(--primary); color: var(--primary-foreground); }
.langkah-daftar span.selesai { background: #E3F4E3; color: #0a7d0a; }
@media (max-width: 520px) { .login__kartu .dua-kolom { grid-template-columns: 1fr; } }
.sub-tab { display: flex; gap: 4px; margin: 0 0 16px; border-bottom: 1px solid var(--border); }
.sub-tab a { padding: 8px 14px; font-size: 14px; font-weight: 500; color: var(--muted-foreground); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.sub-tab a[aria-current="page"] { color: var(--primary); border-bottom-color: var(--primary); }
.lencana { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 999px; background: #B42318; color: #fff; font-size: 11px; font-weight: 700; text-align: center; line-height: 18px; }
.kartu-daftar { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 12px; background: var(--card); }
.kartu-daftar h3 { margin: 0 0 4px; font-size: 15px; }
.kartu-daftar dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px; margin: 8px 0 12px; font-size: 13px; }
.kartu-daftar dt { color: var(--muted-foreground); }
.kartu-daftar dd { margin: 0; }
.kartu-daftar__aksi { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.kartu-daftar__aksi form { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; margin: 0; }
.kartu-daftar__aksi textarea { min-width: 260px; min-height: 38px; }

/* --- Form Assessment web (akun RS) ------------------------------------------------------ */
.langkah-form { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 16px; }
.langkah-form a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); font-size: 13px; color: var(--foreground); text-decoration: none; }
.langkah-form a:hover { border-color: var(--primary); }
.langkah-form a[aria-current="step"] { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.langkah-form .no { font-weight: 700; }
.langkah-form .centang { color: #0a7d0a; font-weight: 700; }
.langkah-form a[aria-current="step"] .centang { color: #fff; }
.lencana--kuning { background: #FAB219; color: #3b2a00; }
.isian { display: grid; grid-template-columns: minmax(220px, 38%) 1fr; gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--border); }
/* dibuka dari tautan Pemeriksaan kewajaran (rs/form/cek) */
.isian:has(:target) { background: #FFF6DB; box-shadow: 0 0 0 6px #FFF6DB; border-radius: var(--radius-sm); }
[id^="isi-"], [id^="judul-tbl-"] { scroll-margin-top: 90px; }
[id^="judul-tbl-"]:target { background: #FFF6DB; border-radius: var(--radius-sm); }
.isian:last-child { border-bottom: 0; }
.isian__label { font-size: 14px; font-weight: 500; }
.isian__kode { display: inline-block; min-width: 30px; font-family: var(--mono); font-size: 12px; color: var(--primary); font-weight: 600; }
.isian__masukan { display: flex; align-items: center; gap: 8px; }
.isian__masukan input[type=text], .isian__masukan select { flex: 1; max-width: 420px; }
.isian__masukan input.angka { max-width: 180px; text-align: right; font-variant-numeric: tabular-nums; }
.isian__satuan { font-size: 13px; color: var(--muted-foreground); }
.isian__otomatis { font-weight: 600; font-variant-numeric: tabular-nums; padding: 6px 10px; background: var(--muted); border-radius: var(--radius-sm); min-width: 80px; }
.isian__bantu { grid-column: 2; font-size: 12.5px; color: var(--muted-foreground); line-height: 1.5; }
.isian__sumber { display: block; font-style: italic; }
.isian__galat { grid-column: 2; font-size: 13px; color: #B42318; font-weight: 500; }
.isian--galat input, .isian--galat select, .sel--galat input, .sel--galat select { border-color: #B42318 !important; background: #FDF1F0; }
.wajib { color: #B42318; font-weight: 700; }
.tabel-rinci { margin-top: 16px; }
.tabel--isian td { padding: 4px 6px; }
.tabel--isian input, .tabel--isian select { font-size: 13px; padding: 4px 6px; height: 30px; }
.tabel--isian input.angka { text-align: right; }
.daftar-catatan { margin: 0 0 10px; padding-left: 18px; }
.form-aksi { display: flex; gap: 10px; align-items: center; margin: 18px 0 8px; position: sticky; bottom: 0; background: var(--background); padding: 10px 0; border-top: 1px solid var(--border); }
.autosave { font-size: 12.5px; color: var(--muted-foreground, #676462); }
.autosave--ok::before { content: "● "; color: #2E7D32; }
.autosave--sibuk::before { content: "● "; color: #B7791F; }
.autosave--peringatan { color: #8A5A00; }
.autosave--galat { color: #9B2C1F; font-weight: 600; }
.form-assessment [aria-invalid="true"] { border-color: #9B2C1F; box-shadow: 0 0 0 1px #9B2C1F; }
@media (max-width: 760px) { .form-aksi { flex-wrap: wrap; } .autosave { flex-basis: 100%; } }
.daftar-cek { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.cek-setuju { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; margin-bottom: 8px; }
@media (max-width: 760px) {
    .isian { grid-template-columns: 1fr; }
    .isian__bantu, .isian__galat { grid-column: 1; }
    .langkah-form .teks { display: none; }
}

/* --- Halaman masuk: dua kolom instansi (identitas | formulir), tanpa kartu/gradasi/bayangan --------- */
.masuk { min-height: 100vh; display: grid; grid-template-columns: minmax(320px, 42%) 1fr; background: #fff; }
.masuk__identitas { background: #0F7B70; color: #fff; padding: 40px 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.masuk__instansi { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; line-height: 1.5; opacity: .9; }
.masuk__aplikasi { font: 700 30px/1.25 var(--font-judul); margin: 0 0 16px; color: #fff; }
.masuk__fungsi { margin: 0 0 28px; font-size: 15px; line-height: 1.6; max-width: 440px; color: #E6F4F2; }
.masuk__pengguna { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; font-size: 13.5px; border-top: 1px solid rgba(255, 255, 255, .25); padding-top: 18px; max-width: 440px; }
.masuk__pengguna dt { font-weight: 600; }
.masuk__pengguna dd { margin: 0; color: #D3ECE8; }
.masuk__unit { margin: 0; font-size: 13px; color: #D3ECE8; }
.masuk__form { display: flex; flex-direction: column; justify-content: space-between; padding: 40px 48px 24px; }
.masuk__isi { width: 100%; max-width: 360px; margin: auto 0; }
.masuk__logo { display: block; height: 36px; width: auto; margin-bottom: 40px; }
.masuk__isi h2 { font: 700 22px/1.3 var(--font-judul); margin: 0 0 20px; }
.masuk__isi form { display: flex; flex-direction: column; }
.masuk__isi label { font-size: 14px; font-weight: 600; margin: 0 0 6px; }
.masuk__isi input[type=text], .masuk__isi input[type=password] { width: 100%; height: 40px; margin-bottom: 16px; border-radius: 4px; }
.masuk__ingat { display: flex; align-items: center; gap: 8px; font-weight: 400 !important; color: var(--muted-foreground); margin-bottom: 18px !important; }
.masuk__isi .tombol { height: 40px; border-radius: 4px; font-size: 15px; }
.masuk__atau { display: flex; align-items: center; gap: 12px; margin: 16px 0; font-size: 12px; color: var(--muted-foreground); }
.masuk__atau::before, .masuk__atau::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.masuk__isi .masuk__sso { display: flex; width: 100%; align-items: center; justify-content: center; text-decoration: none; }
.masuk__bantu { font-size: 13px; color: var(--muted-foreground); margin: 16px 0 0; line-height: 1.5; }
.masuk__bantu + .masuk__bantu { margin-top: 6px; }
.masuk__kaki { font-size: 12px; color: var(--teks-3); border-top: 1px solid var(--border); padding-top: 14px; margin-top: 32px; }
@media (max-width: 820px) {
    .masuk { grid-template-columns: 1fr; }
    .masuk__identitas { padding: 24px 20px; gap: 16px; }
    .masuk__aplikasi { font-size: 22px; }
    .masuk__pengguna { display: none; }
    .masuk__form { padding: 28px 20px 16px; }
    .masuk__logo { margin-bottom: 24px; }
}

/* Halaman daftar/status: gaya polos yang sama (tanpa gradasi, bayangan, garis warna) */
.login { background: #F4F6F6; }
.login__kartu { box-shadow: none; border-radius: 6px; border-top: 1px solid var(--border); }
.login__logo { display: block; height: 36px; width: auto; margin-bottom: 4px; }
.masuk input, .masuk .tombol, .login input, .login .tombol, .login select { box-shadow: none; }

/* --- Kepala di layar kecil: menu diringkas menjadi tombol "Menu" (daftar tautan turun ke bawah) --- */
.app-menu-tombol { display: none; margin-left: auto; height: 34px; padding: 0 14px; border: 1px solid var(--border); border-radius: 4px; background: var(--card);
    font-weight: 600; font-size: 13px; font-family: inherit; color: var(--foreground); cursor: pointer; }
.app-menu-tombol[aria-expanded="true"] { background: var(--accent); }
@media (max-width: 760px) {
    .app-kepala__isi { flex-wrap: wrap; padding: 10px 16px; gap: 10px; }
    .app-merek { min-width: 0; flex: 1; }
    .app-merek__nama { font-size: 14px; }
    .app-menu-tombol { display: inline-flex; align-items: center; }
    .app-pengguna { display: none; width: 100%; margin: 0; flex-direction: column; align-items: stretch; gap: 0; border-top: 1px solid var(--border); padding-top: 4px; }
    .app-pengguna.terbuka { display: flex; }
    .app-pengguna > a, .app-pengguna > span { padding: 10px 2px; border-bottom: 1px solid var(--border); font-size: 14px; }
    .app-pengguna > .peran { align-self: flex-start; margin: 8px 0; border-bottom: 0; }
    .tab-nav { padding: 0 8px; }
}

/* Halaman masuk: logo + formulir di tengah kolom kanan (horizontal & vertikal) */
.masuk__isi { margin: auto; }
.masuk__logo { margin-left: auto; margin-right: auto; }
.masuk__isi h2, .masuk__bantu { text-align: center; }
.masuk__kaki { text-align: center; }

/* Form Assessment: asal isian otomatis & panduan query ukur DB */
.isian__asal { color: var(--primary); }
.panduan-query { margin-top: 16px; }
.panduan-query summary { cursor: pointer; }
.panduan-query__tab { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.panduan-query h4 { font-size: 13.5px; margin: 14px 0 6px; }
.panduan-query pre { background: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: 10px 12px; overflow-x: auto; font-size: 12.5px; margin: 0; }

/* --- Fase 3: Resume RS (cetak A4 dari browser) ------------------------------------------- */
.resume { max-width: 980px; margin: 0 auto; }
.resume__aksi { display: flex; gap: 8px; justify-content: space-between; margin-bottom: 12px; }
.resume__kepala { border-bottom: 3px solid var(--primary); padding-bottom: 10px; margin-bottom: 14px; }
.resume__kepala h1 { margin: 4px 0; font-size: 22px; }
.resume__blok { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg, 10px); padding: 12px 14px; margin-bottom: 12px; }
.resume__blok h2 { font-size: 15px; margin: 0 0 8px; }
.resume__blok .tabel td, .resume__blok .tabel th { font-size: 12px; padding: 5px 8px; height: auto; }
.resume__jumlah td { font-weight: 700; border-top: 2px solid var(--border); }
@media print {
    @page { size: A4; margin: 12mm; }
    .resume__aksi { display: none !important; }
    .resume { max-width: none; }
    .resume__blok { border: 0; padding: 0 0 6px; margin-bottom: 8px; break-inside: avoid; }
    .resume__blok .tabel td, .resume__blok .tabel th { font-size: 9.5px; padding: 2px 5px; }
    .resume__kepala h1 { font-size: 16px; }
    .resume__blok h2 { font-size: 12px; margin-bottom: 4px; }
    .tab-nav, .isi > .pesan { display: none !important; }
}

/* --- Isian kiriman Form Assessment (baca saja) --------------------------------------------- */
.isian-kiriman__nav { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 12px; }
.isian-kiriman__tabel { font-size: 13px; margin: 14px 0 6px; }
.tanda-berubah { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; background: #FEF3C7; color: #8a5a00; border: 1px solid #fab219; cursor: help; }
.baris-berubah td { background: #FFFBEB; }
.sel--berubah { background: #FEF3C7; outline: 1px solid #fab219; cursor: help; }
@media print {
    .isian-kiriman__nav { display: none !important; }
    .isian-kiriman details { display: block; }
    .isian-kiriman details > *:not(summary) { display: table; }
}

/* --- Standar Infrastruktur (menu Standar) ------------------------------------------------- */
.standar-filter { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; margin: 0 0 6px; }
.standar-filter__gate { flex-direction: row !important; align-items: center; gap: 6px; }
.standar-syarat { font-size: 12px; color: var(--teks-2); margin-top: 2px; }
.standar-tabel td, .standar-tabel th { vertical-align: top; }
.standar-tier { text-align: center; white-space: nowrap; }
.standar-tier--aktif { background: #E8F6F3; box-shadow: inset 0 0 0 1px #0F7B70; }
.tanda-gate { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; background: #FDE8E8; color: #B42318; border: 1px solid #F3B7B2; }
.standar-spec { margin: 0 0 10px; font-size: 13px; }
.standar-spec summary, .panel details summary { cursor: pointer; padding: 4px 0; }
@media print {
    .standar-filter, [data-standar-jumlah] { display: none !important; }
    .panel details > *:not(summary) { display: block; }
}

/* --- Menu 11 Help Desk ------------------------------------------------------------------- */
.hd-cepat { margin-bottom: 10px; flex-wrap: wrap; }
.hd-filter { flex-wrap: wrap; margin-bottom: 12px; align-items: flex-end; }
.hd-antrean td { vertical-align: top; }
.hd-form__isi, .hd-kolom { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.hd-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hd-grid2 > .tombol { grid-column: 1 / -1; justify-self: start; }
.hd-pilihan { border: 0; padding: 0; margin: 0 0 8px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hd-pilihan legend { font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.hd-pilihan label { display: flex; gap: 8px; align-items: flex-start; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px; cursor: pointer; }
.hd-pilihan label:has(input:checked) { border-color: var(--primary); background: var(--accent); }
.hd-pilihan small { display: block; color: var(--muted-foreground); font-size: 12px; }
.hd-prioritas { position: sticky; top: 12px; }
.hd-prioritas__nilai { font-size: 32px; font-weight: 800; margin: 6px 0; color: var(--muted-foreground); }
.hd-prioritas__nilai--p1 { color: var(--kritis); }
.hd-prioritas__nilai--p2 { color: #b2552f; }
.hd-prioritas__nilai--p3 { color: #8a5d00; }
.hd-prioritas__nilai--p4 { color: var(--foreground); }
.hd-hotline { margin-top: 12px; border-color: var(--kritis); }
.hd-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; margin: 10px 0 0; font-size: 14px; }
.hd-dl dt { color: var(--muted-foreground); }
.hd-dl dd { margin: 0; overflow-wrap: anywhere; }
.hd-judul { margin: 4px 0 12px; }
.hd-judul__chip { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hd-judul__teks { margin: 6px 0 0; font-size: 20px; }
.hd-sla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hd-teks { white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }
.hd-sub { font-size: 15px; margin: 14px 0 6px; }
.hd-aksi details { border-top: 1px solid var(--border); padding: 6px 0; }
.hd-aksi details:first-of-type { border-top: 0; }
.hd-aksi summary { font-weight: 500; }
.hd-aksi .form-kecil { margin-top: 8px; }
.hd-riwayat { list-style: none; margin: 14px 0 0; padding: 0; }
.hd-riwayat li { border-left: 2px solid var(--border); padding: 4px 0 12px 12px; }
.hd-riwayat--internal { background: var(--muted); border-left-color: var(--peringatan) !important; }
.hd-daftar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hd-p1 { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.hd-cek { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; }
.hd-cek label { display: inline-flex; gap: 4px; align-items: center; font-weight: 400; }
.hd-isi-konfig { margin: 0 0 12px; }
@media (max-width: 900px) {
    .hd-grid2, .hd-pilihan, .hd-sla { grid-template-columns: 1fr; }
    .hd-prioritas { position: static; }
}
@media print {
    .sub-tab, .hd-aksi, .hd-komentar { display: none !important; }
}

/* --- Kontak person infrastruktur (kaki halaman aplikasi & halaman masuk/pendaftaran) ------- */
.app-kaki { max-width: var(--lebar); margin: 8px auto 0; padding: 0 24px 32px; }
.kontak-pic { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 12px 16px; box-shadow: var(--shadow-sm); }
.kontak-pic__ikon { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
    background: var(--secondary); color: var(--primary); }
.kontak-pic__teks { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; margin-right: auto; }
.kontak-pic__label { font-size: 12px; color: var(--muted-foreground); }
.kontak-pic__nama { font-size: 14px; color: var(--foreground); }
.kontak-pic__wa { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
    background: #E7F7EE; color: #0B6B3A; border: 1px solid #BFE6CF; text-decoration: none; white-space: nowrap; }
.kontak-pic__wa:hover { background: #D3F0E0; color: #08572F; }
.kontak-pic__hp { font-size: 13px; font-weight: 600; }
.kontak-pic--kartu { margin-top: 20px; box-shadow: none; background: var(--muted); text-align: left; }
@media (max-width: 600px) {
    .app-kaki { padding: 0 16px 24px; }
    .kontak-pic__wa { width: 100%; justify-content: center; }
}
@media print { .app-kaki { display: none; } }

/* --- Logo SATU SIMRS (rev. 33): warna merek hanya sebagai variabel, palet aplikasi tetap -------- */
:root { --merek-teal: #01AAB1; --merek-hijau: #93C504; }
.app-merek__logo--gambar { width: auto; height: 36px; background: none; border-radius: 0; display: block; flex: none; }
.app-merek__logo--gambar img { display: block; height: 36px; width: auto; }
@media (max-width: 760px) { .app-merek__logo--gambar, .app-merek__logo--gambar img { height: 30px; } }
.masuk__merek { display: flex; align-items: center; gap: 16px; }
/* di latar gelap logo diletakkan di kotak putih berujung membulat */
.masuk__logo-app { flex: none; background: #fff; border-radius: 12px; padding: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); display: inline-flex; }
.masuk__logo-app img { display: block; height: 36px; width: auto; }
.masuk__logo { height: 96px; }
.login__logo { height: 96px; margin: 0 auto 12px; }
@media (max-width: 820px) { .masuk__logo { height: 72px; } }
.logo-cetak { display: none; }
@media print {
    /* logo kanan atas di setiap halaman cetak (posisi tetap diulang tiap halaman) */
    .logo-cetak { display: block; position: fixed; top: 0; right: 0; height: 1cm; width: auto; }
    .isi > :first-child { padding-right: 2.2cm; }
    .lap-harian__kepala > img { display: none; }   /* laporan harian: cukup logo cetak kanan atas */
}

/* --- Laporan harian Form Assessment (A4, simpan PDF dari browser) ------------------------- */
.lap-harian { max-width: 980px; margin: 0 auto; }
.lap-harian__aksi span { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.lap-harian__kepala { display: flex; gap: 14px; align-items: center; }
.lap-harian__kepala img { height: 40px; width: auto; }
.lap-harian__ringkas { display: grid; grid-template-columns: 180px 1fr; gap: 16px; align-items: center; }
.lap-harian__besar { display: flex; flex-direction: column; gap: 4px; }
.lap-harian__besar strong { font-size: 40px; line-height: 1; color: var(--primary); }
.lap-harian__besar span { font-size: 12px; color: var(--muted-foreground); }
.lap-harian__bar { display: block; height: 10px; border-radius: 5px; min-width: 2px; background: var(--muted-foreground); }
.lap-harian__bar--kritis { background: var(--kritis); } .lap-harian__bar--serius { background: var(--serius); }
.lap-harian__bar--peringatan { background: var(--peringatan); } .lap-harian__bar--baik { background: #2e9e5b; }
.lap-harian__kolom { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 16px; }
.lap-harian__tahap h3 { display: flex; justify-content: space-between; align-items: center; font-size: 12px; margin: 0 0 4px; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.lap-harian__tahap ol { margin: 0; padding-left: 18px; font-size: 12px; line-height: 1.45; }
.lap-harian__wa textarea { width: 100%; font-family: inherit; font-size: 13px; }
@media (max-width: 720px) {
    .lap-harian__ringkas, .lap-harian__kolom { grid-template-columns: 1fr; }
}
@media print {
    @page { size: A4; margin: 12mm; }
    .lap-harian__aksi, .lap-harian__wa, .app-kaki { display: none !important; }
    .lap-harian { max-width: none; }
    .lap-harian .resume__blok { border: 0; padding: 0 0 6px; margin-bottom: 8px; }
    .lap-harian .tabel td, .lap-harian .tabel th { font-size: 10px; padding: 3px 6px; height: auto; }
    .lap-harian__tahap { break-inside: avoid; }
    .lap-harian__tahap ol { font-size: 9.5px; line-height: 1.3; }
    .lap-harian__besar strong { font-size: 30px; }
    .lap-harian .chip { font-size: 10px; }
    .lap-harian__bar { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    .chip { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* --- Flag klasifikasi: penjelasan & verifikasi per flag (detail entitas) ------------------ */
.flag-verifikasi__chip { display: flex; flex-wrap: wrap; gap: 8px; }
.flag-verifikasi__tombol { border: 0; background: none; padding: 0; cursor: pointer; border-radius: 999px; }
.flag-verifikasi__tombol .chip { transition: box-shadow .15s; }
.flag-verifikasi__tombol:hover .chip, .flag-verifikasi__tombol[aria-expanded="true"] .chip { box-shadow: 0 0 0 2px var(--primary); }
.flag-verifikasi__rinci { margin-top: 12px; border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; background: var(--muted); }
.flag-verifikasi__rinci h3 { margin: 0 0 6px; font-size: 15px; }
.flag-verifikasi__rinci h4 { margin: 0 0 4px; font-size: 13px; }
.flag-verifikasi__rinci ul { margin: 0 0 8px; padding-left: 18px; font-size: 13px; }
.flag-verifikasi__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.flag-verifikasi__catatan { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 10px; }
.flag-verifikasi__pilih { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.flag-verifikasi__pilih label { flex-direction: row !important; align-items: center; gap: 6px !important; font-weight: 400 !important; width: auto !important; }
.flag-verifikasi__pilih input { width: auto !important; margin: 0; }
.flag-verifikasi__teks { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 8px 10px; font-size: 13px; }
@media (max-width: 900px) { .flag-verifikasi__grid { grid-template-columns: 1fr; } }

/* --- Permintaan klarifikasi dari Tim Infra (akun RS) -------------------------------------- */
.klarifikasi-rs { border-left: 4px solid var(--serius); margin-bottom: 12px; }
.klarifikasi-rs__daftar { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.klarifikasi-rs__daftar li { border-top: 1px solid var(--border); padding-top: 8px; }
.klarifikasi-rs__catatan { background: var(--muted); border-radius: var(--radius-md); padding: 8px 10px; margin: 4px 0; font-size: 14px; }

/* --- Menu 12 Beta Release – Product Learning ---------------------------------------------- */
.beta-domain { margin-top: 12px; }
.beta-tabel td { vertical-align: top; }
.beta-tabel textarea { width: 100%; min-width: 160px; font-size: 13px; }
.beta-skor { display: flex; gap: 4px 10px; flex-wrap: wrap; }
.beta-skor label { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.beta-gate { background: #fff6f4; }
.beta-catatan { margin-top: 6px; font-size: 12px; background: #fff4e5; border-radius: var(--radius-sm); padding: 4px 8px; }
.beta-teks { font-size: 13px; overflow-wrap: anywhere; }
.beta-lesson { border-top: 1px solid var(--border); padding: 8px 0; font-size: 14px; }
.beta-setup-domain { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 8px 12px; margin-bottom: 8px; background: var(--card); }
.beta-setup-domain summary { cursor: pointer; }

/* --- Lembar koreksi Form Assessment (admin) & permintaan perbaikan (RS) ------------------- */
.koreksi__butir { margin-bottom: 10px; }
.koreksi__butir--lewati { opacity: .55; }
.koreksi__kepala { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.koreksi__ikut { display: inline-flex; gap: 4px; align-items: center; font-size: 13px; }
.koreksi__baru { background: #FFF6DB; padding: 1px 6px; border-radius: var(--radius-sm); }
.koreksi__isi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-top: 8px; font-size: 13px; }
.koreksi__isi > label { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; }
.koreksi__isi textarea { width: 100%; }
.koreksi__penjelasan { color: var(--teks-2); }
.koreksi__manual { display: flex; flex-direction: column; gap: 8px; }
.koreksi__manual .form-baris { display: grid; grid-template-columns: minmax(180px, 40%) 1fr; gap: 8px; }
.koreksi__riwayat { border-top: 1px solid var(--border); padding: 8px 0; font-size: 13px; }
.koreksi-rs { margin-bottom: 16px; border-left: 4px solid var(--serius); }
.koreksi-rs__catatan { background: var(--muted, #F4F4F2); padding: 8px 10px; border-radius: var(--radius-sm); margin: 6px 0; font-size: 13px; }
.koreksi-rs__daftar { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.koreksi-rs__judul { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.koreksi-rs__saran { margin-top: 2px; }
.koreksi-rs__kurang { margin: 8px 0; font-size: 13px; }
.koreksi-rs__kurang ul { margin: 6px 0; padding-left: 20px; line-height: 1.7; }
@media (max-width: 700px) { .koreksi__isi, .koreksi__manual .form-baris { grid-template-columns: 1fr; } }

/* --- Harga e-Katalog (rev. 18) & rincian VM ------------------------------------------- */
.daftar-ref { margin: 0; padding-left: 16px; font-size: 12px; display: flex; flex-direction: column; gap: 4px; }
.daftar-ref--mati { opacity: .5; text-decoration: line-through; }
.tabel--ekatalog td { vertical-align: top; }
.resume__sub { font-size: 13px; margin: 12px 0 4px; }

/* Bantuan isian CU (form web bagian B) */
.bantu-cu { margin: -4px 0 14px; padding: 10px 12px; border: 1px dashed var(--border); border-radius: var(--radius-sm); background: var(--muted); font-size: 13px; }
.bantu-cu__cek { padding: 8px 10px; border-left: 4px solid var(--netral); background: var(--card); border-radius: var(--radius-sm); margin-bottom: 8px; }
.bantu-cu__cek--baik { border-left-color: var(--baik); }
.bantu-cu__cek--peringatan { border-left-color: var(--peringatan); }
.bantu-cu__cek--kritis { border-left-color: var(--kritis); }
.bantu-cu__blok { margin-top: 6px; }
.bantu-cu__blok > summary, .bantu-cu__query > summary { cursor: pointer; padding: 4px 0; }
.bantu-cu__tabel { max-width: 460px; margin: 6px 0; }
.bantu-cu__tabel input { width: 100%; box-sizing: border-box; }
.bantu-cu__query { margin: 4px 0 4px 14px; }
.bantu-cu__query pre { max-height: 260px; overflow: auto; background: var(--card); border: 1px solid var(--border); padding: 8px; font-size: 12px; white-space: pre; }

/* Tim RS: form baca saja (Pemantau) & bentrok isian antar anggota */
.form-baca { border: 0; padding: 0; margin: 0; min-width: 0; }
.isian-bentrok { outline: 2px solid var(--peringatan); outline-offset: 1px; }
.isian-diperbarui { outline: 2px solid var(--baik); outline-offset: 1px; transition: outline-color .4s; }
.bentrok { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; padding: 6px 8px; font-size: 12px;
    background: var(--card); border: 1px solid var(--peringatan); border-left-width: 4px; border-radius: var(--radius-sm); }
td .bentrok { min-width: 220px; }

/* Bantuan membuat kata sandi (assets/js/sandi.js) */
.sandi-lihat { margin: 4px 0 0; width: auto; align-self: flex-start; }
.sandi-syarat { list-style: none; margin: 6px 0 10px; padding: 0; font-size: 12px; color: var(--muted-foreground); }
.sandi-syarat li { padding-left: 20px; position: relative; margin: 2px 0; }
.sandi-syarat li::before { content: '○'; position: absolute; left: 4px; }
.sandi-syarat li.ok { color: var(--baik); }
.sandi-syarat li.ok::before { content: '✓'; }
.sandi-syarat li.belum { color: var(--kritis); }
.sandi-syarat li.belum::before { content: '✗'; }
.sandi-syarat li.sandi-syarat__tips { padding-left: 0; margin-top: 4px; }
.sandi-syarat li.sandi-syarat__tips::before { content: none; }

/* Kebutuhan per tahap (rev. 23) */
.keb-tahap__blok { margin-top: 10px; }
.keb-tahap__blok > summary { cursor: pointer; padding: 4px 0; }
.keb-tahap .lencana { background: var(--muted); color: var(--foreground); font-weight: 600; }
.keb-tahap .lencana--gate { background: #0F7B70; color: #fff; }
.keb-tahap .lencana--budgetary { background: #FAB219; color: #3b2a00; }

/* --- Form Pemenuhan beta release: kartu per item (beta/_pemenuhan.php, assets/js/pemenuhan.js) --------------- */
.pmn-kartu { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); margin-bottom: 14px; box-shadow: var(--shadow-xs); }
.pmn-kartu--merah { border-color: var(--kritis); box-shadow: 0 0 0 1px var(--kritis); }
.pmn-kartu--pilihan { padding-bottom: 12px; }
.pmn-kartu--pilihan > .label-kecil { padding: 0 16px; }
.pmn-kartu [hidden] { display: none !important; }
.pmn-kartu__kepala { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; padding: 12px 16px;
    border-bottom: 1px solid var(--border); background: var(--muted); border-radius: var(--radius) var(--radius) 0 0; }
.pmn-kartu__no { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%;
    background: var(--primary); color: var(--primary-foreground); font-size: 12px; font-weight: 600; }
.pmn-kartu__status { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; max-width: 380px; }
.pmn-kartu__ver { margin-top: 2px; }
.pmn-kartu__isi { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr); }
.pmn-syarat { padding: 14px 16px; border-right: 1px solid var(--border); font-size: 13px; }
.pmn-syarat p { margin: 0 0 6px; }
.pmn-syarat__judul, .pmn-banding thead th { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-foreground); }
.pmn-banding { width: 100%; border-collapse: collapse; margin-bottom: 6px; }
.pmn-banding th, .pmn-banding td { padding: 4px 6px; text-align: left; border-bottom: 1px solid var(--border); }
.pmn-banding tbody th { font-weight: 600; width: 56px; }
.pmn-cek { color: var(--serius); cursor: help; }
.pmn-catatan-data { margin: 4px 0 6px; padding-left: 0; list-style: none; font-size: 12px; color: #9a5a00; }
.pmn-isi { padding: 14px 16px; }
.pmn-langkah { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; margin: 12px 0 6px; }
.pmn-langkah:first-child { margin-top: 0; }
.pmn-langkah > span { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%;
    background: var(--secondary); color: var(--secondary-foreground); font-size: 11px; flex: none; }
.pmn-langkah--belum > span { background: #FDF1D6; color: #8a5a00; }
.pmn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px 12px; }
.pmn-grid--lebar { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.pmn-isian { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.pmn-isian > span { font-size: 12px; color: var(--muted-foreground); }
.pmn-isian input[type="text"], .pmn-isian input[type="date"], .pmn-isian select, .pmn-isian textarea { width: 100%; box-sizing: border-box; }
.pmn-centang { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; font-size: 13px; }
.pmn-pilih { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.pmn-pilih label { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--input); border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; }
.pmn-pilih label:has(input:checked) { border-color: var(--primary); background: var(--accent); }
.pmn-belum { margin-top: 14px; padding: 10px 12px; border: 1px dashed #e8c77a; border-radius: var(--radius-md); background: #FFFBF2; }
.pmn-belum .pmn-langkah { margin-top: 0; }
.pmn-peringatan { color: var(--kritis); font-size: 12px; font-style: normal; }
.pmn-lampiran { border-top: 1px solid var(--border); padding: 8px 16px; font-size: 13px; }
.pmn-lampiran summary { cursor: pointer; color: var(--muted-foreground); }
.pmn-lampiran[open] summary { margin-bottom: 8px; }
.pmn-opsi { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; padding: 12px 16px 6px; }
.pmn-opsi__item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--input); border-radius: var(--radius-md); cursor: pointer; }
.pmn-opsi__item:has(input:checked) { border-color: var(--primary); background: var(--accent); }
.pmn-aksi { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
@media (max-width: 860px) {
    .pmn-kartu__isi { grid-template-columns: 1fr; }
    .pmn-syarat { border-right: 0; border-bottom: 1px solid var(--border); }
    .pmn-kartu__status { align-items: flex-start; text-align: left; }
}

/* --- Peringatan kewajaran di form RS (rev. 31 §5.1, assets/js/pemeriksa-rs.js) ------------------------------------- */
.peringatan-kwj { border-color: #e8c77a; background: #FFFBF2; margin-bottom: 12px; }
.peringatan-kwj__daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.peringatan-kwj__item { display: grid; grid-template-columns: minmax(0, 2fr) minmax(200px, 1fr); gap: 8px; align-items: start; font-size: 13px;
    padding: 8px; border: 1px solid #f0dca8; border-radius: var(--radius-sm); background: var(--card); }
.peringatan-kwj__item--kritis { border-color: var(--kritis); }
.peringatan-kwj__item textarea { width: 100%; box-sizing: border-box; }
.kwj-di-isian { margin-top: 4px; font-size: 12px; color: #8a5a00; background: #FFF4D6; border-radius: var(--radius-sm); padding: 3px 6px; }
@media (max-width: 720px) { .peringatan-kwj__item { grid-template-columns: 1fr; } }
.koreksi-rs__perbaiki { float: right; margin: 0 0 4px 8px; }