/* ===== Panel admin — tata letak dokumentasi shadcn/ui, warna Pedoman Identitas Kemenkes 2024 =====
   Dimuat setelah public.css. Palet dasar (--kemenkes-*) ada di public.css; di sini hanya penyesuaian admin. */
:root {
    --foreground: #1c2626;
    --muted: #f1f7f6;
    --muted-foreground: var(--kemenkes-abu);   /* Abu-abu: profesionalitas — kontras 5,5:1 di putih */
    --border: #dfeae9;
    --border-strong: #c5d9d7;
    --input: #d3e3e2;
    --ring: var(--kemenkes-turqoise);
    --ring-soft: rgb(0 185 173 / .25);
    --primary: var(--kemenkes-rs);             /* warna turunan logo UPT Rumah Sakit Vertikal */
    --primary-hover: #016a70;
    --primary-active: #01585d;
    --primary-foreground: #ffffff;
    --brand-soft: #e3f7f5;
    --accent: #e9f6f5;
    --surface-muted: #f7fbfb;
    --header-h: 3.5rem;

    --bs-body-font-size: .875rem;
}

.admin-body { background: var(--background); min-height: 100vh; }

/* ---------- Kerangka: header + sidebar + isi ---------- */
.admin-wrap { max-width: 1400px; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 768px) { .admin-wrap { padding-inline: 1.5rem; } }

.admin-header {
    position: sticky; top: 0; z-index: 1030; height: var(--header-h);
    background: rgb(255 255 255 / .95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border);
}
.admin-header::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 3px;
    background: linear-gradient(to right, var(--kemenkes-turqoise) 0 60%, var(--kemenkes-turqoise-medium) 60% 85%, var(--kemenkes-hijau-kuning) 85%);
}
.admin-header-inner { display: flex; align-items: center; gap: .5rem; height: 100%; }
.admin-brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .875rem; color: var(--foreground); text-decoration: none; margin-right: .25rem; }
.admin-brand .brand-wordmark { height: 1.75rem; }
.header-sep { width: 1px; height: 1rem; background: var(--border); margin-inline: .25rem; }
.btn-icon { --bs-btn-padding-x: .5rem; --bs-btn-padding-y: .375rem; font-size: 1.125rem; line-height: 1; }

.admin-layout { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) {
    .admin-layout { grid-template-columns: 15rem minmax(0, 1fr); column-gap: 2.5rem; }
}
.admin-sidebar {
    position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h));
    overflow-y: auto; padding: 1.5rem .25rem 2rem 0; scrollbar-width: thin;
}
.admin-main { min-width: 0; padding: 1.75rem 0 2rem; display: flex; flex-direction: column; min-height: calc(100vh - var(--header-h)); }
@media (min-width: 992px) { .admin-main { padding-top: 2.25rem; } }
.admin-footer { margin-top: auto; padding-top: 3rem; font-size: .8125rem; color: var(--muted-foreground); }

/* ---------- Navigasi samping ---------- */
.sidebar-group + .sidebar-group { margin-top: 1.25rem; }
.sidebar-label { display: flex; align-items: center; height: 2rem; padding: 0 .5rem; font-size: .75rem; font-weight: 500; color: var(--muted-foreground); }
.sidebar-link {
    display: flex; align-items: center; gap: .5rem; height: 2rem; padding: 0 .5rem; min-width: 0;
    font-size: .8125rem; font-weight: 500; color: var(--foreground); text-decoration: none;
    border: 1px solid transparent; border-radius: calc(var(--radius) - 2px);
}
.sidebar-link .bi { font-size: .9375rem; color: var(--muted-foreground); flex-shrink: 0; }
.sidebar-link .swatch { margin-inline: .2rem .1rem; }
.sidebar-link:hover { background: var(--accent); color: var(--foreground); }
.sidebar-link.active { background: var(--accent); border-color: var(--accent); color: var(--primary); font-weight: 600; box-shadow: inset 2px 0 0 var(--kemenkes-turqoise); }
.sidebar-link.active .bi { color: var(--primary); }
.admin-offcanvas { --bs-offcanvas-width: 17rem; }
.admin-offcanvas .offcanvas-header { height: var(--header-h); }

/* ---------- Judul halaman ala dokumen shadcn ---------- */
.admin-title { font-size: 1.875rem; font-weight: 600; letter-spacing: -.025em; line-height: 1.2; }
@media (min-width: 1200px) { .admin-title { font-size: 2.25rem; } }
.admin-title + p { font-size: 1rem !important; color: var(--muted-foreground); }
.admin-title.mb-1 { margin-bottom: .5rem !important; }

/* ---------- Komponen ---------- */
.card { --bs-card-border-radius: var(--radius); }
.badge-sc { border-radius: calc(var(--radius) - 4px); padding: .125rem .5rem; }
.avatar { border: 1px solid color-mix(in srgb, var(--kemenkes-turqoise) 30%, #fff); font-weight: 600; }
.user-menu .avatar { width: 1.75rem; height: 1.75rem; font-size: .75rem; }
.range-tabs { border: 0; }
.form-control, .form-select { font-size: .875rem; }
.table-sc th { font-weight: 500; }
.ql-toolbar.ql-snow { background: var(--background); }
.dropdown-sc { box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1); }

/* ---------- Buat otomatis ---------- */
.status-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; font-size: .875rem; }
.status-list li { display: flex; gap: .625rem; align-items: flex-start; }
.status-list .bi { margin-top: .1rem; }
.status-list span { display: block; color: var(--muted-foreground); }
.form-switch .form-check-input { width: 2.5rem; height: 1.375rem; cursor: pointer; }

.rec-status { display: inline-flex; align-items: center; gap: .4rem; font-size: .8125rem; color: var(--muted-foreground); }
.rec-dot { width: .5rem; height: .5rem; border-radius: 999px; background: var(--border-strong); }
.rec-status[data-state="live"] { color: #b91c1c; font-weight: 500; }
.rec-status[data-state="live"] .rec-dot { background: #dc2626; animation: rec-pulse 1.2s infinite; }
.rec-status[data-state="paused"] .rec-dot { background: #d97706; }
@keyframes rec-pulse { 50% { opacity: .3; } }
.rec-preview { position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-muted); overflow: hidden; }
.rec-preview video { width: 100%; height: 100%; object-fit: contain; background: #0b1414; }
.rec-placeholder { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .5rem; color: var(--muted-foreground); font-size: .875rem; background: var(--surface-muted); }
.rec-placeholder .bi { font-size: 2rem; }
.rec-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.rec-step { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: .75rem; padding: .625rem; border: 1px solid var(--border); border-radius: var(--radius); }
.rec-thumb img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: calc(var(--radius) - 4px); border: 1px solid var(--border); }
.rec-step-body { display: grid; gap: .375rem; align-content: start; }
@media (max-width: 575.98px) { .rec-step { grid-template-columns: 1fr; } }

/* ---------- Rekam dari alur ---------- */
.alur-yaml { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8125rem; line-height: 1.5; tab-size: 2; white-space: pre; min-height: 24rem; }
.alur-status .progress { height: .375rem; }
.alur-status .progress-bar { background: var(--kemenkes-turqoise); transition: width .4s; }
.alur-shots { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.alur-resp { padding-left: 1.25rem; display: grid; gap: .5rem; }
.alur-resp pre { margin: .25rem 0 0; padding: .5rem; max-height: 8rem; overflow: auto; white-space: pre-wrap; word-break: break-all; font-size: .75rem; background: var(--surface-muted); border-radius: calc(var(--radius) - 4px); }
.alur-shot { display: grid; gap: .375rem; align-content: start; }
.alur-shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: calc(var(--radius) - 4px); border: 1px solid var(--border); }

/* ---------- Status Draf / Terbit ---------- */
.status-choice { display: grid; gap: .5rem; margin: 0; padding: 0; border: 0; }
.status-choice legend { margin-bottom: .25rem; }
.status-option { display: flex; gap: .625rem; align-items: flex-start; padding: .625rem .75rem; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); cursor: pointer; transition: border-color .15s, background-color .15s; }
.status-option:hover { background: var(--surface-muted); }
.status-option:has(input:checked) { border-color: var(--kemenkes-turqoise); background: var(--accent); box-shadow: 0 0 0 1px var(--kemenkes-turqoise); }
.status-option input { margin-top: .2rem; accent-color: var(--primary); }
.status-option-title { display: flex; align-items: center; gap: .375rem; font-size: .875rem; font-weight: 500; }
.status-option-desc { display: block; font-size: .8125rem; color: var(--muted-foreground); }
.text-brand-strong { --bs-btn-color: var(--primary); --bs-btn-hover-color: var(--primary); }

/* ---------- Pop-up konfirmasi (pengganti confirm() bawaan browser) ---------- */
.confirm-modal { border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 20px 40px -12px rgb(0 0 0 / .25); }
.confirm-icon { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; background: var(--brand-soft); color: var(--primary); font-size: 1.125rem; }
.confirm-icon.danger { background: #fef2f2; color: #b91c1c; }
.modal-backdrop.show { opacity: .4; }