:root {
    --primary: #0aa69a;
    --primary-dark: #07877e;
    --primary-soft: #e9faf7;
    --accent-lime: #c8dc08;
    --accent-green: #75c96b;
    --ink: #173130;
    --muted: #6a817f;
    --surface: #ffffff;
    --background: #f4f9f8;
    --border: #dcebea;
    --shadow: 0 14px 38px rgba(9, 96, 88, .09);
    --sidebar-width: 292px;
    --sidebar-collapsed-width: 78px;
    --topbar-height: 84px;
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--background); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
a { text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
.btn-primary { --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-bg: var(--primary-dark); --bs-btn-hover-border-color: var(--primary-dark); }
.btn-outline-primary { --bs-btn-color: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-bg: var(--primary); --bs-btn-hover-border-color: var(--primary); }
.form-control, .form-select, .input-group-text { border-color: #d5e5e2; min-height: 46px; border-radius: 10px; }
.form-control:focus, .form-select:focus { border-color: #45ae9b; box-shadow: 0 0 0 .22rem rgba(8,127,107,.12); }
.app-shell { min-height: 100vh; display: flex; }

/* Tahap 12.3 · Sidebar tiga tingkat yang stabil, ringkas, dan bebas cache lama */
.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1040;
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    color: #fff;
    background: linear-gradient(180deg,#087f78 0%,#066c65 48%,#054a46 100%);
    display: flex;
    flex-direction: column;
    padding: 18px 15px;
    overflow: visible;
    box-shadow: 9px 0 30px rgba(4,70,65,.09);
    transition: width .22s ease, min-width .22s ease, padding .22s ease, transform .22s ease;
}
.sidebar-collapse-button {
    position: absolute;
    top: 31px;
    right: -16px;
    z-index: 1080;
    width: 33px;
    height: 33px;
    border: 3px solid var(--background);
    border-radius: 50%;
    background: #fff;
    color: var(--primary-dark);
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 7px 20px rgba(4,70,65,.24);
    transition: color .18s ease, background .18s ease, transform .18s ease;
}
.sidebar-collapse-button:hover,
.sidebar-collapse-button:focus-visible { background:var(--accent-lime); color:#23413d; outline:none; transform:scale(1.06); }
.sidebar-collapse-icon { display:block; font-size:27px; font-weight:500; line-height:1; transform:translateY(-1px); }
.brand-block { display:flex; gap:11px; align-items:center; color:#fff; padding:7px 5px 18px; border-bottom:1px solid rgba(255,255,255,.14); min-height:74px; overflow:hidden; }
.brand-block:hover { color:#fff; }
.brand-logo-image { width:72px; height:48px; object-fit:contain; border-radius:11px; background:#fff; padding:5px; flex:none; transition:width .22s ease,height .22s ease; }
.brand-copy { min-width:0; line-height:1; white-space:nowrap; transition:opacity .15s ease,width .18s ease; }
.brand-copy strong { display:block; font-size:15px; letter-spacing:.02em; }
.brand-copy span { display:block; color:var(--accent-lime); font-size:12px; font-weight:900; margin-top:3px; letter-spacing:.12em; }
.brand-copy small { display:block; white-space:normal; font-size:9px; line-height:1.35; margin-top:6px; color:rgba(255,255,255,.72); }
.sidebar-nav { position:relative; flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; padding:16px 2px 12px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.28) transparent; }
.sidebar-nav::-webkit-scrollbar { width:6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background:rgba(255,255,255,.22); border-radius:99px; }
.nav-label { padding:0 13px 9px; font-size:10px; letter-spacing:.14em; color:rgba(255,255,255,.5); font-weight:800; white-space:nowrap; }
.sidebar .nav-link { color:rgba(255,255,255,.8); display:flex; align-items:center; gap:13px; padding:11px 12px; margin-bottom:5px; border-radius:12px; font-weight:750; font-size:13px; width:100%; border:0; background:transparent; text-align:left; white-space:nowrap; }
.sidebar .nav-link i { font-size:18px; width:22px; min-width:22px; text-align:center; }
.sidebar .nav-link:hover,
.sidebar .nav-link.active { color:#fff; background:rgba(255,255,255,.14); }
.nav-dashboard { margin-bottom:11px!important; }
.nav-module { position:relative; margin-bottom:6px; }
.nav-module-toggle { position:relative; width:100%; border:0; color:rgba(255,255,255,.84); background:transparent; display:flex; align-items:center; justify-content:space-between; padding:11px 12px; border-radius:12px; font-weight:780; font-size:13px; transition:background .18s ease,color .18s ease; white-space:nowrap; }
.nav-module-toggle:hover,
.nav-module.is-open>.nav-module-toggle,
.nav-module.is-active>.nav-module-toggle { color:#fff; background:rgba(255,255,255,.11); }
.nav-module.is-active>.nav-module-toggle:before { content:""; position:absolute; left:-2px; width:4px; height:25px; border-radius:0 5px 5px 0; background:var(--accent-lime); box-shadow:0 0 12px rgba(200,220,8,.35); }
.nav-module-title { display:flex; gap:11px; align-items:center; min-width:0; }
.nav-module-title>i { width:21px; min-width:21px; text-align:center; font-size:17px; color:#c6f5ed; }
.nav-module-label { overflow:hidden; text-overflow:ellipsis; }
.nav-module-chevron { font-size:12px; transition:transform .2s ease; }
.nav-module.is-open .nav-module-chevron { transform:rotate(180deg); }
.nav-submenu { display:none; padding:6px 0 9px 11px; }
.nav-submenu.show { display:block; }
.nav-flyout-heading { display:none; }
.nav-group { margin:4px 0; }
.nav-group-toggle { appearance:none; width:100%; border:1px solid transparent; background:rgba(255,255,255,.035); color:rgba(255,255,255,.7); display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border-radius:10px; font:inherit; font-size:11px; font-weight:800; letter-spacing:.02em; line-height:1.25; text-align:left; box-shadow:none; }
.nav-group-toggle>span { display:flex; align-items:center; gap:9px; min-width:0; }
.nav-group-toggle>span>i { width:17px; min-width:17px; text-align:center; color:#9fded5; }
.nav-group-toggle:hover,
.nav-group-toggle:focus-visible,
.nav-group.is-open>.nav-group-toggle,
.nav-group.is-active>.nav-group-toggle { color:#fff; background:rgba(255,255,255,.095); border-color:rgba(255,255,255,.08); outline:none; }
.nav-group-chevron { font-size:10px; transition:transform .18s ease; }
.nav-group.is-open .nav-group-chevron { transform:rotate(90deg); }
.nav-group-menu { display:none; padding:3px 0 5px 14px; }
.nav-group-menu.show { display:block; }
.nav-sublink { position:relative; color:rgba(255,255,255,.7); display:flex; align-items:center; gap:9px; padding:8px 10px; margin:2px 0; border-radius:9px; font-size:12px; font-weight:650; }
.nav-sublink:before { content:""; position:absolute; left:-6px; width:1px; height:100%; background:rgba(255,255,255,.13); }
.nav-sublink i { width:18px; min-width:18px; text-align:center; color:#a9ddd6; }
.nav-sublink:hover,
.nav-sublink.active { color:#fff; background:rgba(255,255,255,.12); }
.nav-sublink.active:after { content:""; position:absolute; right:7px; width:6px; height:6px; border-radius:50%; background:var(--accent-lime); }
.sidebar-footer { display:flex; gap:10px; align-items:center; border-top:1px solid rgba(255,255,255,.13); padding:14px 4px 0; min-height:52px; overflow:hidden; }
.sidebar-footer strong,
.sidebar-footer small { display:block; white-space:nowrap; }
.sidebar-footer strong { font-size:12px; }
.sidebar-footer small { font-size:10px; color:rgba(255,255,255,.58); }
.status-dot { width:9px; min-width:9px; height:9px; border-radius:50%; background:#49e2a9; box-shadow:0 0 0 5px rgba(73,226,169,.12); }
.sidebar-footer-action { width:31px; min-width:31px; height:31px; display:grid; place-items:center; border:0; border-radius:9px; background:rgba(255,255,255,.1); color:#fff; }
.sidebar-footer-action:hover { background:rgba(255,255,255,.18); color:#fff; }
.sidebar-footer form { margin:0; }
.main-content { width:calc(100% - var(--sidebar-width)); margin-left:var(--sidebar-width); display:flex; min-height:100vh; flex-direction:column; transition:width .22s ease,margin-left .22s ease; }
.topbar { min-height:var(--topbar-height); background:rgba(255,255,255,.93); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:14px; padding:13px 28px; position:sticky; top:0; z-index:1030; }
.topbar-menu-button { width:42px; height:42px; border:1px solid var(--border); border-radius:12px; background:#fff; color:var(--primary-dark); align-items:center; justify-content:center; font-size:19px; box-shadow:0 5px 15px rgba(20,75,67,.05); }
.topbar-menu-button:hover,
.topbar-menu-button:focus-visible { color:#fff; background:var(--primary); border-color:var(--primary); outline:none; }
.topbar-heading { min-width:0; }
.app-breadcrumb { font-size:11px; color:var(--muted); }
.app-breadcrumb a { color:var(--primary); }
.app-breadcrumb .breadcrumb-item+.breadcrumb-item:before { color:#a7b9b6; }
.content-wrapper { flex:1; width:100%; padding:28px 30px 45px; max-width:1800px; margin:0 auto; }
.app-footer { padding:16px 30px 24px; color:var(--muted); display:flex; justify-content:space-between; gap:14px; font-size:11px; border-top:1px solid var(--border); }
.app-footer strong { color:var(--primary-dark); }
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(10,35,31,.44); z-index:1035; }

/* Desktop collapsed state is placed on <html> before CSS loads. */
html.sidebar-collapsed .sidebar { width:var(--sidebar-collapsed-width); min-width:var(--sidebar-collapsed-width); padding-left:10px; padding-right:10px; }
html.sidebar-collapsed .main-content { width:calc(100% - var(--sidebar-collapsed-width)); margin-left:var(--sidebar-collapsed-width); }
html.sidebar-collapsed .brand-block { justify-content:center; padding-left:0; padding-right:0; }
html.sidebar-collapsed .brand-logo-image { width:50px; height:45px; }
html.sidebar-collapsed .brand-copy,
html.sidebar-collapsed .nav-label,
html.sidebar-collapsed .nav-link-label,
html.sidebar-collapsed .nav-module-label,
html.sidebar-collapsed .nav-module-chevron,
html.sidebar-collapsed .sidebar-user-copy,
html.sidebar-collapsed .status-dot { display:none; }
html.sidebar-collapsed .sidebar .nav-link,
html.sidebar-collapsed .nav-module-toggle { justify-content:center; padding-left:8px; padding-right:8px; }
html.sidebar-collapsed .nav-module-title { gap:0; }
html.sidebar-collapsed .nav-module-title>i { font-size:20px; }
html.sidebar-collapsed .nav-submenu { display:none!important; }
html.sidebar-collapsed .nav-module.is-flyout-open>.nav-flyout { display:block!important; position:fixed; left:calc(var(--sidebar-collapsed-width) + 10px); top:var(--flyout-top, 90px); width:300px; max-height:calc(100vh - var(--flyout-top, 90px) - 18px); overflow:auto; padding:13px; border-radius:15px; background:linear-gradient(180deg,#086d66,#054a46); border:1px solid rgba(255,255,255,.15); box-shadow:0 20px 50px rgba(5,57,52,.34); z-index:1060; }
html.sidebar-collapsed .nav-flyout-heading { display:block; padding:4px 8px 11px; color:#fff; font-size:13px; font-weight:850; border-bottom:1px solid rgba(255,255,255,.13); margin-bottom:8px; }
html.sidebar-collapsed .nav-group-menu { padding-left:12px; }
html.sidebar-collapsed .sidebar-footer { justify-content:center; flex-direction:column; gap:7px; }
html.sidebar-collapsed .sidebar-footer-action { width:35px; min-width:35px; height:35px; }
html.sidebar-collapsed .sidebar-collapse-button { right:-16px; }
.user-chip { display: flex; align-items: center; gap: 10px; }.user-chip strong,.user-chip small { display: block; }.user-chip strong { font-size: 13px; }.user-chip small { font-size: 11px; color: var(--muted); }.avatar { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-weight: 800; }.small-avatar { width: 38px; height: 38px; border-radius: 11px; }
.eyebrow { font-size: 10px; letter-spacing: .14em; font-weight: 800; color: var(--primary); display: block; margin-bottom: 6px; }.welcome-banner { background: linear-gradient(135deg, #087f6b 0%, #0b9c84 100%); color: white; border-radius: 20px; padding: 28px 32px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; box-shadow: var(--shadow); overflow: hidden; }.welcome-banner .eyebrow { color: rgba(255,255,255,.72); }.welcome-banner h2 { margin: 0 0 7px; font-size: 27px; }.welcome-banner p { margin: 0; color: rgba(255,255,255,.78); max-width: 680px; }.banner-icon { font-size: 80px; color: rgba(255,255,255,.16); transform: rotate(-7deg); }
.stat-card { height: 100%; background: white; border: 1px solid var(--border); border-radius: 17px; padding: 19px; display: flex; align-items: center; gap: 15px; box-shadow: 0 7px 24px rgba(20,75,67,.05); }.stat-icon { width: 51px; height: 51px; border-radius: 15px; display: grid; place-items: center; font-size: 23px; }.stat-icon.teal{background:#e6f7f4;color:#087f6b}.stat-icon.green{background:#ecf8e7;color:#5a9838}.stat-icon.blue{background:#e9f2ff;color:#3973c6}.stat-icon.orange{background:#fff3e5;color:#cf7a1d}.stat-card span,.stat-card small,.stat-card strong { display:block; }.stat-card span { font-size:12px;color:var(--muted);font-weight:600 }.stat-card strong { font-size:26px;line-height:1.2 }.stat-card small {font-size:10px;color:#9aadaa}
.panel-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 8px 28px rgba(20,75,67,.055); overflow: hidden; }.panel-heading { padding: 22px 24px; display: flex; gap: 15px; justify-content: space-between; align-items: center; }.panel-heading h3 { font-size: 18px; margin: 0; }.panel-heading p { color: var(--muted); margin: 5px 0 0; font-size: 13px; }.table { --bs-table-bg: transparent; }.table thead th { color: #78908c; background: #f8fbfa; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; border-color: var(--border); padding: 13px 18px; }.table td { border-color: #edf3f1; padding: 14px 18px; font-size: 13px; }.empty-state { text-align:center; padding:40px !important; color:var(--muted)!important }.user-cell { display:flex;align-items:center;gap:10px }.user-cell strong,.user-cell small {display:block}.user-cell small {font-size:11px;color:var(--muted)}
.status-badge { display:inline-flex;align-items:center;border-radius:99px;padding:5px 10px;font-size:10px;font-weight:800 }.status-badge.active {background:#e9f8f1;color:#16805c}.status-badge.inactive {background:#fcecec;color:#b64141}.progress-list { padding:0 24px 24px; }.progress-item { display:flex;gap:13px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--border) }.progress-item:last-child{border:0}.progress-item>span,.progress-item>i {width:30px;height:30px;border-radius:50%;background:#edf3f1;color:#78908c;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:800}.progress-item.complete>i{background:#dff5ec;color:#087f6b}.progress-item strong,.progress-item small,.progress-item div>span{display:block}.progress-item small,.progress-item div>span{color:var(--muted);font-size:11px;margin-top:2px}
.role-card { border:1px solid var(--border);border-radius:15px;padding:18px;display:flex;gap:14px;height:100% }.role-icon{width:43px;height:43px;border-radius:13px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:20px;flex:none}.role-card h4{font-size:16px;margin:0}.role-card p{font-size:12px;color:var(--muted);margin:8px 0}.role-card code{display:block;margin-top:8px;font-size:10px}.info-box{display:flex;gap:13px;padding:16px;background:#eef8f5;border-radius:13px;color:#315b54}.info-box p{margin:4px 0 0;font-size:12px}.profile-card{background:linear-gradient(145deg,#075d50,#087f6b);border-radius:18px;padding:30px;color:#fff;box-shadow:var(--shadow)}.profile-avatar{width:84px;height:84px;border-radius:26px;background:rgba(255,255,255,.17);display:grid;place-items:center;font-size:35px;font-weight:800;margin-bottom:18px}.profile-card h3{margin:0}.profile-card>p{color:rgba(255,255,255,.7)}.profile-meta{border-top:1px solid rgba(255,255,255,.15);padding-top:16px;display:grid;gap:10px}.profile-meta span{display:flex;gap:9px;font-size:12px;color:rgba(255,255,255,.8)}.search-form{max-width:390px;width:100%}
.guest-body { background:#eef7f5; }.login-page{min-height:100vh;display:grid;grid-template-columns:minmax(480px,1.1fr) minmax(420px,.9fr)}.login-visual{background:linear-gradient(135deg,rgba(4,76,64,.96),rgba(6,137,113,.9)),radial-gradient(circle at 20% 20%,#29b99c,transparent 45%);color:white;display:flex;align-items:center;padding:70px;position:relative;overflow:hidden}.login-visual:after{content:"";position:absolute;width:380px;height:380px;border:70px solid rgba(255,255,255,.05);border-radius:50%;right:-100px;bottom:-100px}.visual-content{position:relative;z-index:1;max-width:660px}.visual-logo{width:64px;height:64px;border-radius:20px;background:rgba(255,255,255,.14);display:grid;place-items:center;font-size:30px;margin-bottom:45px}.login-visual .eyebrow{color:#8be3d1}.login-visual h1{font-size:47px;line-height:1.12;margin:12px 0 20px;font-weight:750}.login-visual p{color:rgba(255,255,255,.75);font-size:16px;line-height:1.7}.feature-row{display:flex;gap:22px;flex-wrap:wrap;margin-top:35px}.feature-row span{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:650}.login-panel{display:flex;align-items:center;justify-content:center;padding:45px;background:#fff}.login-card{width:100%;max-width:430px}.login-card h2{font-size:32px;margin:6px 0}.input-icon{position:relative}.input-icon i{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#8ba09d;z-index:2}.input-icon .form-control{padding-left:43px}.demo-account{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;background:#f3f8f7;border:1px dashed #bdd8d2;border-radius:13px;padding:13px;margin-top:22px;font-size:11px}.demo-account strong{grid-column:1/-1;color:var(--primary)}.login-note{font-size:11px;color:var(--muted);text-align:center;margin-top:16px}.mobile-brand{display:none;font-weight:800;color:var(--primary);margin-bottom:35px}
.permission-toolbar,.filter-pills{display:flex;gap:8px;flex-wrap:wrap}.permission-group{border:1px solid var(--border);border-radius:15px;overflow:hidden;height:100%}.permission-group h4{font-size:14px;margin:0;padding:14px 16px;background:#f7fbfa;border-bottom:1px solid var(--border)}.permission-item{display:flex;gap:12px;padding:13px 16px;border-bottom:1px solid #edf3f1;cursor:pointer}.permission-item:last-child{border-bottom:0}.permission-item input{margin-top:4px}.permission-item span,.permission-item strong,.permission-item small,.permission-item code{display:block}.permission-item strong{font-size:13px}.permission-item small{font-size:11px;color:var(--muted);margin-top:2px}.permission-item code{font-size:10px;margin-top:5px}.readiness-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.readiness-grid a{display:flex;align-items:center;gap:13px;border:1px solid var(--border);border-radius:14px;padding:15px;color:var(--ink);transition:.2s ease}.readiness-grid a:hover{border-color:#9bcfc5;transform:translateY(-1px);box-shadow:0 8px 20px rgba(20,75,67,.07)}.readiness-grid i{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:var(--primary-soft);color:var(--primary);font-size:20px}.readiness-grid strong,.readiness-grid small{display:block}.readiness-grid small{color:var(--muted);font-size:11px;margin-top:2px}.table code{white-space:nowrap}.form-text code{font-size:11px}
/* Tahap 3 · Master Pasien */
.record-number-chip{display:flex;flex-direction:column;align-items:flex-end;padding:9px 13px;border-radius:12px;background:var(--primary-soft);color:var(--primary)}.record-number-chip small{font-size:9px;text-transform:uppercase;letter-spacing:.08em}.record-number-chip strong{font-size:17px}.patient-form [data-type-section].is-hidden{display:none!important}.duplicate-list{display:grid;gap:8px}.duplicate-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;background:rgba(255,255,255,.65);border:1px solid rgba(90,65,0,.12);border-radius:10px}.duplicate-item strong,.duplicate-item small{display:block}.duplicate-item small{font-size:11px;color:#806f3a;margin-top:2px}.patient-hero{background:linear-gradient(135deg,#075d50,#0b927b);padding:25px 28px;border-radius:20px;color:#fff;box-shadow:var(--shadow)}.patient-hero h2{margin:0 0 9px;font-size:27px}.patient-avatar{width:68px;height:68px;border-radius:20px;background:rgba(255,255,255,.14);display:grid;place-items:center;font-size:32px;flex:none}.patient-identifiers{display:flex;flex-wrap:wrap;gap:8px}.patient-identifiers span{background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.13);padding:5px 9px;border-radius:8px;font-size:11px}.detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.detail-grid small,.detail-grid strong{display:block}.detail-grid small{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}.detail-grid strong{font-size:13px}.completion-number{font-size:25px;color:var(--primary)}.progress{height:9px;background:#e7f0ee}.progress-bar{background:var(--primary)}.check-list{display:grid;gap:10px}.check-list>div{display:flex;align-items:center;gap:9px;color:#8a9d99;font-size:12px}.check-list>div.done{color:#227b68}.address-card{height:100%;border:1px solid var(--border);border-radius:14px;padding:16px}.address-card strong{font-size:13px}.address-card p{font-size:13px;margin:9px 0 5px}.address-card small{color:var(--muted);font-size:10px;line-height:1.5}.contact-card{display:flex;gap:12px;border:1px solid var(--border);border-radius:14px;padding:15px}.contact-card strong,.contact-card small{display:block}.contact-card small{font-size:11px;color:var(--muted);margin-top:2px}.contact-card p{font-size:11px;margin:7px 0 0}.empty-mini{padding:25px;text-align:center;color:var(--muted);background:#f8fbfa;border-radius:13px;font-size:12px}.mini-form{background:#f5faf9;border:1px solid var(--border);border-radius:14px;padding:14px}.mini-form .form-control,.mini-form .form-select{min-height:40px}.timeline{position:relative}.timeline-item{display:grid;grid-template-columns:18px 1fr;gap:10px;position:relative;padding-bottom:22px}.timeline-item:before{content:"";position:absolute;left:5px;top:14px;bottom:0;width:2px;background:var(--border)}.timeline-item:last-child:before{display:none}.timeline-dot{width:12px;height:12px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 4px var(--primary-soft);margin-top:4px;z-index:1}.timeline-item p{font-size:12px;margin:5px 0 2px}.timeline-item small{font-size:10px;color:var(--muted)}.address-copied{opacity:.65}.patient-form .panel-heading{border-bottom:1px solid #edf3f1;margin-bottom:20px}.patient-form .panel-heading+.p-4{padding-top:0!important}
@media(max-width:991.98px){.detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.patient-hero{padding:22px}.patient-avatar{width:56px;height:56px;border-radius:16px;font-size:26px}}
@media(max-width:575.98px){.detail-grid{grid-template-columns:1fr}.patient-hero h2{font-size:22px}.patient-avatar{display:none}.duplicate-item{align-items:flex-start;flex-direction:column}.record-number-chip{align-items:flex-start;width:100%}}

/* Tahap 4 · Pendaftaran dan Antrean Rawat Jalan */
.patient-selected-card{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:22px 24px;border-radius:18px;color:#fff;background:linear-gradient(135deg,#075d50,#0b927b);box-shadow:var(--shadow)}
.queue-number-mini{display:inline-grid;place-items:center;min-width:64px;padding:7px 10px;border-radius:10px;background:var(--primary-soft);color:var(--primary);font-weight:800;letter-spacing:.04em}
.queue-number-large{font-size:45px;line-height:1;font-weight:850;color:var(--primary);letter-spacing:.04em}
.detail-label{display:block;text-transform:uppercase;letter-spacing:.06em;font-size:9px;color:var(--muted);margin-bottom:5px}.detail-label+strong{display:block}.detail-label+strong+small{display:block;color:var(--muted);margin-top:3px}
.queue-card{display:grid;grid-template-columns:105px 1fr;min-height:160px;border-radius:18px;background:#fff;border:1px solid var(--border);box-shadow:0 8px 24px rgba(20,75,67,.06);overflow:hidden}.queue-card-number{display:grid;place-items:center;padding:15px;background:linear-gradient(145deg,#075d50,#0b927b);color:#fff;font-size:26px;font-weight:850}.queue-card-content{padding:19px}.queue-card.status-called{border-color:#86b7fe;box-shadow:0 8px 26px rgba(13,110,253,.12)}.queue-card.status-in_service{border-color:#6edff6}.queue-card.status-completed{opacity:.78}.queue-card.status-cancelled{opacity:.62}.queue-card.status-cancelled .queue-card-number{background:#7c858b}.empty-state{text-align:center;padding:55px 25px;background:#fff;border:1px dashed #bcd7d1;border-radius:18px;color:var(--muted)}.empty-state i{font-size:42px;color:var(--primary);display:block;margin-bottom:12px}
@media(max-width:575.98px){.patient-selected-card{align-items:flex-start;flex-direction:column}.queue-card{grid-template-columns:82px 1fr}.queue-card-number{font-size:20px}.queue-card-content{padding:15px}.queue-number-large{font-size:36px}}
.banner-brand { width:225px; min-width:190px; background:#fff; border-radius:16px; padding:13px 17px; box-shadow:0 12px 28px rgba(0,0,0,.12); }
.banner-brand img { display:block; width:100%; height:auto; }
.visual-brand-card { width:min(420px,90%); padding:14px 20px; border-radius:18px; background:#fff; box-shadow:0 14px 40px rgba(0,0,0,.16); margin-bottom:38px; }
.visual-brand-card img { display:block; max-width:100%; height:auto; }
.login-visual h1 span { color:var(--accent-lime); }
.mobile-brand { align-items:center; gap:10px; }
.mobile-brand img { width:130px; height:auto; }
.mobile-brand strong { color:var(--primary-dark); }
.registration-tabs { background:#fff; border:1px solid var(--border); border-radius:15px; padding:6px; display:flex; gap:6px; box-shadow:0 7px 22px rgba(20,75,67,.05); }
.registration-tabs .nav-link { border-radius:11px; color:var(--muted); font-weight:750; padding:11px 18px; }
.registration-tabs .nav-link.active { color:#fff; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); }
.patient-candidate { border:1px solid #f0d889; border-radius:13px; background:#fffdf3; padding:14px; }
.patient-candidate strong,.patient-candidate small { display:block; }
.integrated-form-section { border-left:4px solid var(--primary); }
.print-brand { display:flex; align-items:center; gap:16px; padding-bottom:12px; border-bottom:2px solid #0aa69a; margin-bottom:18px; }
.print-brand img { width:210px; max-height:65px; object-fit:contain; }
.print-brand-copy strong,.print-brand-copy span { display:block; }
.print-brand-copy strong { color:#087f78; font-size:18px; }
.print-brand-copy span { color:#647b78; font-size:11px; }

@media (max-width: 991.98px) {
    html.sidebar-collapsed .sidebar { width:var(--sidebar-width); min-width:var(--sidebar-width); padding:18px 15px; }
    html.sidebar-collapsed .brand-copy, html.sidebar-collapsed .nav-label, html.sidebar-collapsed .nav-link-label, html.sidebar-collapsed .nav-module-label, html.sidebar-collapsed .nav-module-chevron, html.sidebar-collapsed .sidebar-user-copy, html.sidebar-collapsed .status-dot { display:initial; }
    html.sidebar-collapsed .brand-copy { display:block; }
    html.sidebar-collapsed .sidebar-user-copy { display:block; }
    html.sidebar-collapsed .nav-label { display:block; }
    html.sidebar-collapsed .nav-module-chevron { display:block; }
    html.sidebar-collapsed .nav-link-label, html.sidebar-collapsed .nav-module-label { display:inline; }
    html.sidebar-collapsed .sidebar .nav-link, html.sidebar-collapsed .nav-module-toggle { justify-content:space-between; }
    html.sidebar-collapsed .nav-submenu.show { display:block!important; position:static; width:auto; max-height:none; overflow:visible; padding:5px 0 8px 10px; border:0; box-shadow:none; background:transparent; }
    html.sidebar-collapsed .nav-flyout-heading { display:none; }
    .sidebar { transform:translateX(-100%); overflow:hidden; }
    .sidebar.show { transform:translateX(0); }
    .sidebar-nav { overflow-y:auto; }
    .main-content, html.sidebar-collapsed .main-content { width:100%; margin-left:0; }
    .sidebar-overlay.show { display:block; }
    .content-wrapper { padding:20px; }
    .topbar { padding:13px 20px; }
    .login-page { grid-template-columns:1fr; }
    .login-visual { display:none; }
    .login-panel { min-height:100vh; }
    .mobile-brand { display:flex; }
    .banner-brand { display:none; }
    .detail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .patient-hero { padding:22px; }
    .patient-avatar { width:56px; height:56px; border-radius:16px; font-size:26px; }
}
@media (max-width: 767.98px) {
    .readiness-grid { grid-template-columns:1fr; }
    .permission-item { padding:12px; }
    .filter-pills .btn { flex:1 1 auto; }
    .topbar { padding:12px 15px; }
    .content-wrapper { padding:20px 15px 34px; }
    .app-footer { padding:15px; flex-direction:column; }
    .registration-tabs { overflow-x:auto; }
}
@media (max-width: 575.98px) {
    .panel-heading { align-items:flex-start; flex-direction:column; }
    .panel-heading>.btn, .search-form { width:100%; }
    .welcome-banner { padding:22px; }
    .banner-icon { display:none; }
    .login-panel { padding:24px; }
    .demo-account { grid-template-columns:1fr; }
    .content-wrapper { padding:15px; }
    .table td, .table thead th { padding:12px; }
    .topbar h1 { font-size:17px; }
    .detail-grid { grid-template-columns:1fr; }
    .patient-hero h2 { font-size:22px; }
    .patient-avatar { display:none; }
    .duplicate-item { align-items:flex-start; flex-direction:column; }
    .record-number-chip { align-items:flex-start; width:100%; }
    .patient-selected-card { align-items:flex-start; flex-direction:column; }
    .queue-card { grid-template-columns:82px 1fr; }
    .queue-card-number { font-size:20px; }
    .queue-card-content { padding:15px; }
    .queue-number-large { font-size:36px; }
}
@media print {
    .sidebar, .topbar, .sidebar-overlay, .app-footer { display:none!important; }
    .main-content, html.sidebar-collapsed .main-content { width:100%!important; margin:0!important; }
    .content-wrapper { max-width:none; padding:0; }
}

/* Tahap 14.1 · Toggle tampil/sembunyikan kata sandi */
.password-field .form-control { padding-right:52px; }
.password-toggle {
    position:absolute;
    top:50%;
    right:6px;
    z-index:3;
    width:38px;
    height:38px;
    padding:0;
    border:0;
    border-radius:9px;
    background:transparent;
    color:#758b87;
    display:grid;
    place-items:center;
    transform:translateY(-50%);
    cursor:pointer;
}
.password-toggle:hover { background:#edf7f5; color:var(--primary); }
.password-toggle:focus-visible { outline:3px solid rgba(8,127,107,.2); outline-offset:1px; }
.password-toggle .bi { position:static; transform:none; color:inherit; font-size:18px; line-height:1; }