/* ===== Panduan SATU SIMRS — gaya shadcn/ui di atas Bootstrap 5 ===== */
:root {
    /* Palet resmi — Pedoman Identitas Kemenkes (KMK HK.01.07/MENKES/5/2024) */
    --kemenkes-turqoise: #00B9AD;        /* Turqoise (C75 M0 Y45 K0): sehat, kepercayaan, integritas */
    --kemenkes-hijau-kuning: #D4E021;    /* Hijau Kuning (C20 M0 Y100 K0): ramah, hangat, semangat melayani */
    --kemenkes-turqoise-medium: #1BBCCB; /* Turqoise Medium (C74 M0 Y21 K0): keterbukaan, modernitas */
    --kemenkes-abu: #686969;             /* Abu-abu (C58 M50 Y51 K19): profesionalitas, intelektualitas */
    --kemenkes-rs: #027C83;              /* Turunan logo UPT Rumah Sakit Vertikal (C100 M31 Y46 K8) */

    /* Token shadcn, diturunkan dari palet Kemenkes */
    --background: #ffffff;
    --foreground: #1c2626;
    --muted: #f0f7f7;
    --muted-foreground: var(--kemenkes-abu);
    --border: #dde9e8;
    --input: #d3e3e2;
    --ring: var(--kemenkes-turqoise);
    --ring-soft: rgb(0 185 173 / .25);
    --primary: var(--kemenkes-rs);          /* teks putih di atasnya tetap kontras (≈5:1) */
    --primary-hover: #016a70;
    --primary-active: #01585d;
    --primary-foreground: #ffffff;
    --brand: var(--kemenkes-turqoise);
    --brand-soft: #e3f7f5;
    --secondary: #f0f7f7;
    --accent: #e3f7f5;
    --surface-muted: #f7fbfb;
    --radius: .625rem;
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05);

    /* Pemetaan ke Bootstrap */
    --bs-body-font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --bs-font-monospace: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --bs-body-font-size: .9375rem;
    --bs-body-color: var(--foreground);
    --bs-body-bg: var(--background);
    --bs-secondary-color: var(--muted-foreground);
    --bs-border-color: var(--border);
    --bs-border-radius: var(--radius);
    --bs-border-radius-sm: calc(var(--radius) - 4px);
    --bs-border-radius-lg: calc(var(--radius) + 4px);
    --bs-link-color-rgb: 2, 124, 131;
    --bs-link-hover-color-rgb: 1, 88, 93;
    --bs-emphasis-color: var(--foreground);
    --bs-heading-color: var(--foreground);
}

body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "rlig" 1, "calt" 1; }
h1, h2, h3, .h1, .h2, .h3, .display-5 { letter-spacing: -.025em; font-weight: 600; }
.text-secondary { color: var(--muted-foreground) !important; }
.text-muted-fg { color: var(--muted-foreground); }
a { text-underline-offset: 4px; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* ---------- Tombol ---------- */
.btn { --bs-btn-font-size: .875rem; --bs-btn-font-weight: 500; --bs-btn-padding-y: .5rem; --bs-btn-padding-x: 1rem; border-radius: calc(var(--radius) - 2px); display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.btn-sm { --bs-btn-padding-y: .375rem; --bs-btn-padding-x: .75rem; --bs-btn-font-size: .8125rem; }
.btn-lg { --bs-btn-padding-y: .625rem; --bs-btn-padding-x: 1.5rem; --bs-btn-font-size: .9375rem; }
.btn:focus-visible { box-shadow: 0 0 0 3px var(--ring-soft); }
.btn-primary-sc {
    --bs-btn-color: var(--primary-foreground); --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary);
    --bs-btn-hover-color: var(--primary-foreground); --bs-btn-hover-bg: var(--primary-hover); --bs-btn-hover-border-color: var(--primary-hover);
    --bs-btn-active-color: var(--primary-foreground); --bs-btn-active-bg: var(--primary-active); --bs-btn-active-border-color: var(--primary-active);
    box-shadow: var(--shadow-xs);
}
.btn-outline-sc {
    --bs-btn-color: var(--foreground); --bs-btn-bg: var(--background); --bs-btn-border-color: var(--border);
    --bs-btn-hover-color: var(--primary); --bs-btn-hover-bg: var(--accent); --bs-btn-hover-border-color: var(--kemenkes-turqoise);
    --bs-btn-active-color: var(--foreground); --bs-btn-active-bg: var(--accent); --bs-btn-active-border-color: var(--border);
    box-shadow: var(--shadow-xs);
}
.btn-ghost-sc {
    --bs-btn-color: var(--foreground); --bs-btn-bg: transparent; --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--foreground); --bs-btn-hover-bg: var(--accent); --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: var(--accent);
}

/* ---------- Input ---------- */
.form-control {
    font-size: .875rem; padding: .5rem .75rem; border-color: var(--input);
    border-radius: calc(var(--radius) - 2px); box-shadow: var(--shadow-xs); background: transparent;
}
.form-control::placeholder { color: var(--muted-foreground); }
.form-control:focus { border-color: var(--ring); box-shadow: 0 0 0 3px var(--ring-soft); }
.form-label { font-size: .875rem; font-weight: 500; }
.input-icon { position: relative; }
.input-icon > .bi { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--muted-foreground); pointer-events: none; }
.input-icon > .form-control { padding-left: 2.25rem; }

/* ---------- Badge ---------- */
.badge-sc {
    display: inline-flex; align-items: center; gap: .375rem; font-size: .75rem; font-weight: 500;
    padding: .2rem .625rem; border: 1px solid var(--border); border-radius: 999px; color: var(--foreground); background: var(--background);
}
.badge-sc.secondary { background: var(--secondary); border-color: transparent; }
.kbd {
    font-family: var(--bs-font-monospace); font-size: .6875rem; padding: .05rem .35rem;
    border: 1px solid var(--border); border-radius: 4px; background: var(--muted); color: var(--muted-foreground);
}

/* ---------- Header ---------- */
.site-header { background: rgb(255 255 255 / .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.site-header::before { /* strip supergrafis tiga warna Kemenkes */
    content: ""; display: block; height: 3px;
    background: linear-gradient(to right, var(--kemenkes-turqoise) 0 60%, var(--kemenkes-turqoise-medium) 60% 85%, var(--kemenkes-hijau-kuning) 85%);
}
.site-header .navbar { min-height: 3.5rem; }
.navbar-brand { font-size: .9375rem; font-weight: 600; }
.brand-mark {
    display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem;
    border-radius: calc(var(--radius) - 4px); background: var(--kemenkes-turqoise); color: var(--primary-foreground); font-size: .875rem;
}
.brand-wordmark { display: block; height: 2rem; width: auto; flex-shrink: 0; }
.brand-wordmark-lg { height: 3rem; }
.site-header .nav-link { font-size: .875rem; color: var(--muted-foreground); padding: .5rem .75rem !important; transition: color .15s; }
.site-header .nav-link:hover { color: var(--foreground); }
.site-header .nav-link.active { color: var(--primary); font-weight: 600; }
.search-trigger { min-width: 15rem; justify-content: space-between !important; color: var(--muted-foreground) !important; background: var(--muted) !important; border-color: transparent !important; box-shadow: none; }
.search-trigger:hover { background: var(--accent) !important; }

/* ---------- Hero ---------- */
.hero { position: relative; border-bottom: 1px solid var(--border); overflow: hidden;
    background: radial-gradient(ellipse 60% 50% at 50% 0%, var(--brand-soft), transparent 70%); }
.hero h1 .accent { color: var(--kemenkes-turqoise); }
.hero::before { /* grid halus seperti situs shadcn */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(to right, var(--border) 1px, transparent 1px), linear-gradient(to bottom, var(--border) 1px, transparent 1px);
    background-size: 48px 48px; opacity: .6;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 40%, transparent 100%);
}
.hero h1 { font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.1; font-weight: 700; letter-spacing: -.04em; }
.hero .lead { font-size: clamp(1rem, 2vw, 1.125rem); color: var(--muted-foreground); }
.hero-search { max-width: 36rem; }
.page-head { border-bottom: 1px solid var(--border); }
.page-head h1 { font-size: clamp(1.75rem, 3.5vw, 2.25rem); font-weight: 700; letter-spacing: -.035em; }

/* ---------- Kartu ---------- */
.card { --bs-card-border-color: var(--border); --bs-card-border-radius: calc(var(--radius) + 4px); --bs-card-bg: var(--background); box-shadow: var(--shadow-xs); }
.card-link-sc { transition: background-color .15s, border-color .15s; color: inherit; }
.card-link-sc:hover { background: var(--surface-muted); border-color: var(--kemenkes-turqoise); }
.card-link-sc:hover .arrow { transform: translateX(3px); }
.arrow { transition: transform .15s; }
.icon-tile {
    display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--brand-soft); color: var(--primary); font-size: 1.125rem; box-shadow: var(--shadow-xs);
}
.module-dot { width: 2.5rem; height: 2.5rem; border-radius: var(--radius); display: inline-grid; place-items: center; color: #fff; background: var(--c, var(--primary)); font-size: 1.1rem; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.section-muted { background: var(--surface-muted); border-block: 1px solid var(--border); }
.section-title { font-size: clamp(1.5rem, 3vw, 1.875rem); font-weight: 600; letter-spacing: -.03em; }
.stat { font-size: 2rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.chapter-num {
    display: inline-grid; place-items: center; flex-shrink: 0; width: 1.75rem; height: 1.75rem;
    border-radius: 999px; background: var(--brand-soft); color: var(--primary); font-family: var(--bs-font-monospace); font-size: .75rem; font-weight: 500;
}
.list-sc a { display: flex; justify-content: space-between; align-items: center; padding: .5rem .625rem; margin: 0 -.625rem; border-radius: calc(var(--radius) - 2px); font-size: .875rem; color: var(--foreground); text-decoration: none; }
.list-sc a:hover { background: var(--accent); }

/* ---------- Asisten AI ---------- */
.ai-card { border-color: color-mix(in srgb, var(--kemenkes-turqoise) 45%, #fff); background: linear-gradient(180deg, var(--brand-soft), var(--background) 120px); }
.ai-card-muted { border-color: var(--border); background: var(--background); }
.ai-mark { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 999px; background: var(--kemenkes-turqoise); color: #fff; font-size: .85rem; }
.ai-answer { font-size: .9375rem; line-height: 1.7; }
.ai-answer p { margin: 0 0 .75rem; }
.ai-answer ol, .ai-answer ul { padding-left: 1.4rem; margin: 0 0 .75rem; }
.ai-answer li { margin: .3rem 0; }
.ai-answer > :last-child { margin-bottom: 0; }
.ai-source { display: flex; align-items: flex-start; gap: .625rem; padding: .625rem .75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--background); color: var(--foreground); text-decoration: none; font-size: .875rem; }
.ai-source:hover { border-color: var(--kemenkes-turqoise); background: var(--surface-muted); }
.ai-source .bi { color: var(--primary); margin-top: .15rem; }
.text-brand { color: var(--kemenkes-turqoise) !important; }

/* ---------- Chatbot ---------- */
.satu-chat { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1050; display: flex; flex-direction: column; align-items: flex-end; gap: .75rem; }
.chat-toggle {
    display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.1rem; border: 0; border-radius: 999px;
    background: var(--primary); color: #fff; font-weight: 600; font-size: .9rem;
    box-shadow: 0 10px 25px -8px rgb(2 124 131 / .6), 0 0 0 3px rgb(255 255 255 / .9);
}
.chat-toggle:hover { background: var(--primary-hover); }
.chat-toggle .bi { font-size: 1.1rem; }
.satu-chat.is-open .chat-toggle span { display: none; }
.chat-panel {
    width: min(400px, calc(100vw - 2.5rem)); height: min(620px, calc(100vh - 7rem));
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--background); border: 1px solid var(--border); border-radius: calc(var(--radius) + 6px);
    box-shadow: 0 24px 48px -12px rgb(0 0 0 / .25);
}
.chat-panel[hidden] { display: none; }
.chat-header { display: flex; align-items: center; gap: .625rem; padding: .75rem .75rem .75rem 1rem; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, var(--brand-soft), var(--background)); }
.chat-context { display: flex; align-items: center; gap: .375rem; padding: .4rem 1rem; font-size: .75rem; color: var(--primary); background: var(--brand-soft); border-bottom: 1px solid var(--border); white-space: nowrap; overflow: hidden; }
.chat-context span { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.chat-log { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .75rem; background: var(--surface-muted); }
.chat-msg { max-width: 90%; padding: .625rem .875rem; border-radius: 14px; font-size: .875rem; line-height: 1.6; overflow-wrap: anywhere; }
.chat-user { align-self: flex-end; background: var(--primary); color: #fff; border-bottom-right-radius: 4px; white-space: pre-wrap; }
.chat-assistant { align-self: flex-start; background: var(--background); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.chat-assistant .ai-answer { font-size: .875rem; }
.chat-assistant .ai-source { padding: .5rem .625rem; font-size: .8125rem; }
.chat-assistant .ai-feedback { gap: .375rem !important; }
.chat-assistant .ai-feedback > span:first-child { width: 100%; }
.chat-assistant .ai-feedback .btn { --bs-btn-padding-y: .25rem; --bs-btn-padding-x: .6rem; }
.chat-error { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
.chat-suggestions { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }
.chat-chip { border: 1px solid color-mix(in srgb, var(--kemenkes-turqoise) 40%, #fff); background: var(--background); color: var(--primary); border-radius: 999px; padding: .35rem .8rem; font-size: .8125rem; text-align: left; }
.chat-chip:hover { background: var(--brand-soft); }
.chat-form { display: flex; align-items: flex-end; gap: .5rem; padding: .75rem; border-top: 1px solid var(--border); }
.chat-input { resize: none; min-height: 2.5rem; max-height: 120px; line-height: 1.4; }
.chat-send { flex-shrink: 0; height: 2.5rem; width: 2.5rem; padding: 0; }
.chat-foot { padding: 0 .75rem .6rem; font-size: .6875rem; color: var(--muted-foreground); text-align: center; }
.chat-typing { display: inline-flex; gap: .3rem; padding: .25rem 0; }
.chat-typing span { width: .45rem; height: .45rem; border-radius: 50%; background: var(--kemenkes-turqoise); animation: chat-dot 1s infinite ease-in-out; }
.chat-typing span:nth-child(2) { animation-delay: .15s; }
.chat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes chat-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (max-width: 575.98px) {
    .satu-chat { right: .75rem; bottom: .75rem; }
    .satu-chat.is-open { inset: 0; right: 0; bottom: 0; gap: 0; }
    .satu-chat.is-open .chat-panel { width: 100%; height: 100%; border-radius: 0; border: 0; }
    .satu-chat.is-open .chat-toggle { display: none; }
}

/* ---------- Breadcrumb ---------- */
.breadcrumb { --bs-breadcrumb-font-size: .875rem; --bs-breadcrumb-divider-color: var(--muted-foreground); --bs-breadcrumb-item-active-color: var(--foreground); }
.breadcrumb a { color: var(--muted-foreground); text-decoration: none; }
.breadcrumb a:hover { color: var(--foreground); }

/* ---------- Sidebar dokumen ---------- */
.toc { position: sticky; top: 4.5rem; }
.toc #tocBody { max-height: calc(100vh - 6rem); overflow-y: auto; }
.toc-heading { font-size: .75rem; font-weight: 500; color: var(--muted-foreground); padding: 0 .5rem; margin-bottom: .25rem; }
.toc-link { display: block; font-size: .875rem; color: var(--foreground); padding: .375rem .5rem; border-radius: calc(var(--radius) - 2px); text-decoration: none; }
.toc-link:hover { background: var(--accent); }
.toc-link.active { background: var(--accent); color: var(--primary); font-weight: 600; box-shadow: inset 2px 0 0 var(--kemenkes-turqoise); }
.toc-toggle { border: 1px solid var(--border); border-radius: var(--radius); }
@media (max-width: 991.98px) {
    .toc { position: static; }
    .toc #tocBody { max-height: none; }
}

/* ---------- Isi halaman (keluaran Quill) ---------- */
.doc-title { font-size: clamp(1.75rem, 3.5vw, 2.25rem); font-weight: 700; letter-spacing: -.035em; }
.prose { font-size: 1rem; line-height: 1.75; max-width: 72ch; }
.prose h2 { font-size: 1.5rem; font-weight: 600; letter-spacing: -.025em; margin: 2.5rem 0 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--border); }
.prose h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; margin: 2rem 0 .75rem; }
.prose p { margin: 0 0 1.25rem; }
.prose a { font-weight: 500; text-decoration: underline; }
.prose ol, .prose ul { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.prose li { margin: .5rem 0; }
.prose li[data-list="bullet"] { list-style-type: disc; }
.prose .ql-ui { display: none; }
.prose blockquote { margin: 1.5rem 0; padding: .75rem 1rem; border: 1px solid var(--border); border-left: 3px solid var(--kemenkes-turqoise); border-radius: var(--radius); color: var(--foreground); background: var(--brand-soft); }
.prose code { font-family: var(--bs-font-monospace); font-size: .875em; background: var(--muted); color: var(--foreground); padding: .15rem .35rem; border-radius: 4px; }
.prose pre, .prose .ql-code-block-container {
    font-family: var(--bs-font-monospace); font-size: .875rem; line-height: 1.6;
    background: #173a3d; color: #f0fbfa; padding: 1rem; border-radius: var(--radius); overflow-x: auto;
}
.prose img { max-width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--border); }
.prose video { display: block; width: 100%; height: auto; background: #0b1414; border-radius: var(--radius); border: 1px solid var(--border); margin: .5rem 0; }
.prose iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); }
mark { background: color-mix(in srgb, var(--kemenkes-hijau-kuning) 55%, #fff); padding: 0 .1em; border-radius: 2px; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); background: var(--surface-muted); font-size: .875rem; color: var(--muted-foreground); }
.site-footer a { color: var(--muted-foreground); text-decoration: none; }
.site-footer a:hover { color: var(--foreground); }
.site-footer h6 { font-size: .875rem; font-weight: 600; color: var(--foreground); }

/* ---------- Admin ---------- */
.btn-destructive-sc {
    --bs-btn-color: #fff; --bs-btn-bg: #dc2626; --bs-btn-border-color: #dc2626;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #b91c1c; --bs-btn-hover-border-color: #b91c1c;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #991b1b; --bs-btn-active-border-color: #991b1b;
    box-shadow: var(--shadow-xs);
}
.btn-ghost-danger {
    --bs-btn-color: #b91c1c; --bs-btn-bg: transparent; --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #b91c1c; --bs-btn-hover-bg: #fef2f2; --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #991b1b; --bs-btn-active-bg: #fee2e2; --bs-btn-active-border-color: transparent;
}
.btn-outline-danger-sc {
    --bs-btn-color: #b91c1c; --bs-btn-bg: var(--background); --bs-btn-border-color: #fecaca;
    --bs-btn-hover-color: #b91c1c; --bs-btn-hover-bg: #fef2f2; --bs-btn-hover-border-color: #fca5a5;
    --bs-btn-active-color: #991b1b; --bs-btn-active-bg: #fee2e2; --bs-btn-active-border-color: #fca5a5;
    box-shadow: var(--shadow-xs);
}
.min-w-0 { min-width: 0; }
.grid-fill { grid-template-columns: minmax(0, 1fr); } /* isi panjang tidak melebarkan kolom grid */
/* Dashboard */
.range-tabs { display: inline-flex; gap: .25rem; padding: .25rem; border-radius: var(--radius); background: var(--muted); border: 1px solid var(--border); }
.range-tabs a { padding: .35rem .8rem; border-radius: calc(var(--radius) - 3px); font-size: .8125rem; font-weight: 500; color: var(--muted-foreground); text-decoration: none; }
.range-tabs a:hover { color: var(--foreground); }
.range-tabs a.active { background: var(--background); color: var(--foreground); box-shadow: var(--shadow-xs); }
.stat-tile { color: inherit; }
a.stat-tile:hover { border-color: var(--kemenkes-turqoise); }
.stat-tile .stat { font-size: 1.75rem; }
.delta { display: inline-flex; align-items: center; gap: .15rem; font-size: .75rem; font-weight: 600; padding: .05rem .4rem; border-radius: 999px; }
.delta-up { background: #e6f6ee; color: #146c43; }
.delta-down { background: #fef2f2; color: #b91c1c; }
.delta-flat { background: var(--muted); color: var(--muted-foreground); }
.chart-box { position: relative; height: 260px; }
.hbar-list { display: grid; gap: .85rem; }
.hbar-label { font-size: .8125rem; margin-bottom: .25rem; overflow-wrap: anywhere; }
.hbar-row { display: flex; align-items: center; gap: .5rem; }
.hbar { display: block; height: 14px; background: #008f86; border-radius: 0 4px 4px 0; transition: filter .15s; }
.hbar-list li:hover .hbar { filter: brightness(1.15); }
.hbar-value { font-size: .8125rem; font-weight: 600; color: var(--foreground); }
.empty-note { font-size: .875rem; color: var(--muted-foreground); padding: 2rem 0; text-align: center; margin: 0; }
.table-compact td, .table-compact th { padding-top: .45rem !important; padding-bottom: .45rem !important; }
.num { font-variant-numeric: tabular-nums; }
.share-bar { display: inline-block; width: 70px; height: 6px; border-radius: 999px; background: var(--muted); overflow: hidden; flex-shrink: 0; }
.share-bar span { display: block; height: 100%; background: #008f86; border-radius: 999px; }
.data-table summary { cursor: pointer; }
.avatar { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px; background: var(--brand-soft); color: var(--primary); font-weight: 700; font-size: .85rem; flex-shrink: 0; }
.profile-meta { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.profile-meta dt { font-weight: 500; color: var(--muted-foreground); }
.profile-meta dd { margin: 0; text-align: right; }
.avatar-lg { width: 3.5rem; height: 3.5rem; font-size: 1.35rem; }
.user-menu { gap: .6rem !important; padding: .25rem .5rem !important; }
.dropdown-sc { --bs-dropdown-font-size: .875rem; --bs-dropdown-border-color: var(--border); --bs-dropdown-border-radius: var(--radius); --bs-dropdown-link-active-bg: var(--accent); --bs-dropdown-link-active-color: var(--foreground); --bs-dropdown-link-hover-bg: var(--accent); padding: .35rem; box-shadow: 0 10px 25px -10px rgb(0 0 0 / .2); min-width: 13rem; }
.dropdown-sc .dropdown-item { display: flex; align-items: center; gap: .6rem; border-radius: calc(var(--radius) - 3px); padding: .45rem .6rem; }
.dropdown-sc .dropdown-item.text-danger:hover { background: #fef2f2; }
.badge-sc.danger { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.badge-count { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .35rem; margin-left: .25rem; border-radius: 999px; background: #dc2626; color: #fff; font-size: .6875rem; font-weight: 600; vertical-align: 1px; }
.nav-underline-sc { gap: 1rem; border-bottom: 1px solid var(--border); }
.nav-underline-sc .nav-link { padding: .5rem 0; font-size: .875rem; color: var(--muted-foreground); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.nav-underline-sc .nav-link:hover { color: var(--foreground); }
.nav-underline-sc .nav-link.active { color: var(--primary); font-weight: 600; border-bottom-color: var(--kemenkes-turqoise); }
.question-row { padding: .875rem 1rem; border-top: 1px solid var(--border); }
.question-row:first-child { border-top: 0; }
.question-row summary { cursor: pointer; }
.answer-preview { padding: .75rem; border-radius: var(--radius); background: var(--surface-muted); border: 1px solid var(--border); }
.chapter-head { background: var(--surface-muted); }
.badge-sc.success { background: var(--brand-soft); color: var(--primary); border-color: transparent; }
.badge-sc.brand { background: var(--brand-soft); color: var(--primary); border-color: color-mix(in srgb, var(--kemenkes-turqoise) 35%, #fff); }
.form-select { font-size: .875rem; padding-top: .5rem; padding-bottom: .5rem; border-color: var(--input); border-radius: calc(var(--radius) - 2px); box-shadow: var(--shadow-xs); }
.form-select:focus { border-color: var(--ring); box-shadow: 0 0 0 3px var(--ring-soft); }
.form-check-input { border-color: #9fb3b2; box-shadow: var(--shadow-xs); }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.form-check-input:focus { border-color: var(--ring); box-shadow: 0 0 0 3px var(--ring-soft); }
.form-control-color { width: 3.5rem; height: 2.4rem; padding: .25rem; }
.form-text { font-size: .8125rem; color: var(--muted-foreground); }
.back-link { display: inline-flex; align-items: center; gap: .25rem; font-size: .875rem; color: var(--muted-foreground); text-decoration: none; }
.back-link:hover { color: var(--foreground); }
.admin-title { font-size: 1.5rem; font-weight: 600; letter-spacing: -.025em; }
.table-sc { --bs-table-bg: transparent; font-size: .875rem; margin: 0; }
.table-sc th { font-weight: 500; color: var(--muted-foreground); height: 2.75rem; vertical-align: middle; white-space: nowrap; }
.table-sc td { vertical-align: middle; padding-top: .75rem; padding-bottom: .75rem; }
.table-sc th:first-child, .table-sc td:first-child { padding-left: 1rem; }
.table-sc th:last-child, .table-sc td:last-child { padding-right: 1rem; }
.table-sc tbody tr:hover { background: var(--surface-muted); }
.table-sc tbody tr:last-child td { border-bottom: 0; }
.swatch { display: inline-block; width: .625rem; height: .625rem; border-radius: 3px; background: var(--c); flex-shrink: 0; }
.alert-sc { font-size: .875rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--background); color: var(--foreground); padding: .75rem 1rem; display: flex; gap: .625rem; }
.alert-sc.destructive { border-color: #fecaca; color: #b91c1c; background: #fef2f2; }
.alert-sc p { margin: 0; }
.danger-card { border-color: #fecaca !important; }
.page-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .375rem .5rem .375rem 1rem; border-top: 1px solid var(--border); font-size: .875rem; }
.page-row a { color: var(--foreground); text-decoration: none; }
.page-row a:hover { text-decoration: underline; }
/* Editor isi halaman — responsif */
.editor-card { grid-template-columns: minmax(0, 1fr); }   /* isi lebar tidak boleh melebarkan kartu */
.ql-toolbar.ql-snow { display: flex; flex-wrap: wrap; align-items: center; row-gap: .25rem; padding: .5rem; }
.ql-toolbar.ql-snow .ql-formats { margin-right: .75rem; }
.ql-container.ql-snow { font-size: 1rem; height: auto; }
.ql-editor { min-height: max(380px, 55vh); }
.ql-editor { overflow-wrap: break-word; }
.ql-editor img { max-width: 100%; height: auto; }
.ql-editor .ql-video, .ql-editor iframe, .ql-editor video { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; }
.ql-editor pre, .ql-editor .ql-code-block-container { max-width: 100%; overflow-x: auto; }
.ql-snow .ql-tooltip { max-width: calc(100vw - 2rem); z-index: 5; }
.ql-snow .ql-tooltip input[type="text"] { width: min(170px, 45vw); }
@media (max-width: 575.98px) {
    .ql-editor { min-height: 45vh; }
    .ql-editor { padding: .75rem; }
    .ql-toolbar.ql-snow .ql-formats { margin-right: .25rem; }
    .ql-snow .ql-tooltip { left: .5rem !important; }
}
#editor { font-size: 1rem; line-height: 1.7; font-family: var(--bs-body-font-family); }
.ql-toolbar.ql-snow { border: 1px solid var(--input) !important; border-radius: calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0 0; font-family: var(--bs-body-font-family) !important; background: var(--surface-muted); }
.ql-container.ql-snow { border: 1px solid var(--input) !important; border-top: 0 !important; border-radius: 0 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px); }
.ql-editor.ql-blank::before { color: var(--muted-foreground) !important; font-style: normal !important; }

@media (min-width: 992px) {
    .editor-aside { position: sticky; top: 5rem; }
}

/* ---------- Alur pelayanan ---------- */
.alur-chip-num { width: 1.25rem; height: 1.25rem; font-size: .6875rem; margin-right: .125rem; }
.alur-legend { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .8125rem; color: var(--muted-foreground); }
.alur-legend li { display: inline-flex; align-items: center; gap: .375rem; }
.alur-swatch { width: .875rem; height: .875rem; border-radius: 3px; border: 1.5px solid; flex-shrink: 0; }
.alur-swatch.step { background: #e3f7f5; border-color: var(--kemenkes-rs); }
.alur-swatch.sys { background: #f1f3f3; border: 1.5px dashed var(--kemenkes-abu); }
.alur-swatch.bpjs { background: #f7f9d6; border-color: #9aa413; }
.alur-swatch.dec { background: #fff; border-color: var(--kemenkes-turqoise-medium); transform: rotate(45deg) scale(.85); }
.alur-swatch.done { background: var(--kemenkes-rs); border-color: var(--kemenkes-rs); border-radius: 999px; }
.alur-diagram { overflow-x: auto; background: var(--surface-muted); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; }
.alur-diagram svg { display: block; margin: 0 auto; min-width: 640px; max-width: 900px; height: auto; }
.alur-stage { scroll-margin-top: 5rem; }
.alur-stage-num {
    display: inline-grid; place-items: center; flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: var(--radius);
    background: var(--primary); color: var(--primary-foreground); font-weight: 600; font-size: 1.0625rem;
}
.alur-steps { padding-left: 1.25rem; display: grid; gap: .625rem; max-width: 52rem; }
.alur-steps li { padding-left: .25rem; line-height: 1.6; }
.alur-steps li::marker { color: var(--primary); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}