:root{
    --bg:#f4f7fb;
    --panel:#ffffff;
    --ink:#14213d;
    --muted:#6b7280;
    --line:#e5e7eb;
    --primary:#0f766e;
    --primary-dark:#0b4f4a;
    --accent:#2563eb;
    --good:#059669;
    --warn:#d97706;
    --bad:#dc2626;
    --soft:#ecfeff;
    --shadow:0 16px 40px rgba(15, 23, 42, .08);
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--ink)}
a{text-decoration:none;color:inherit}
.login-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at top left,#dff8f3 0,#f4f7fb 38%,#eef2ff 100%)}
.login-card{width:min(430px,100%);background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.7);box-shadow:var(--shadow);border-radius:28px;overflow:hidden}
.login-head{padding:34px 34px 22px;background:linear-gradient(135deg,var(--primary),#1d4ed8);color:#fff}
.login-head h1{margin:0;font-size:28px;letter-spacing:-.04em}.login-head p{margin:8px 0 0;opacity:.88;line-height:1.5}.login-body{padding:30px 34px 34px}.hint-box{background:#f8fafc;border:1px dashed #cbd5e1;border-radius:16px;padding:12px;margin-top:18px;color:#475569;font-size:13px;line-height:1.6}
.sidebar{position:fixed;left:0;top:0;height:100vh;width:285px;background:#071c2f;color:#e5eef7;padding:22px;overflow-y:auto;z-index:10}.brand-box{display:flex;gap:12px;align-items:center;margin-bottom:22px}.brand-mark{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,#14b8a6,#2563eb);font-weight:900}.brand-box small,.profile-box small{display:block;color:#9fb2c7;margin-top:3px}.profile-box{display:flex;gap:12px;align-items:center;padding:14px;background:rgba(255,255,255,.08);border-radius:18px;margin-bottom:18px}.avatar{width:42px;height:42px;border-radius:50%;background:#ecfeff;color:#0f766e;display:grid;place-items:center;font-weight:800}.nav-menu{display:flex;flex-direction:column;gap:7px}.nav-menu a{padding:12px 14px;border-radius:14px;color:#dce8f4;transition:.18s}.nav-menu a:hover,.nav-menu a.active{background:rgba(20,184,166,.18);color:#fff}.nav-menu a.logout{margin-top:14px;color:#fecaca}.main-content{margin-left:285px;min-height:100vh;padding:24px 28px 60px}.topbar{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:24px}.topbar h1{font-size:28px;margin:0;letter-spacing:-.04em}.topbar p{margin:6px 0 0;color:var(--muted)}.top-actions{display:flex;align-items:center;gap:12px;color:var(--muted)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:22px;box-shadow:0 10px 28px rgba(15,23,42,.05);padding:22px;margin-bottom:20px}.card h2,.card h3{margin:0 0 14px}.grid{display:grid;gap:16px}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.stat{padding:20px;border-radius:22px;color:#fff;box-shadow:var(--shadow);position:relative;overflow:hidden}.stat:after{content:"";position:absolute;width:160px;height:160px;border-radius:50%;right:-70px;top:-70px;background:rgba(255,255,255,.18)}.stat span{font-size:13px;opacity:.92}.stat strong{display:block;font-size:34px;margin-top:8px;letter-spacing:-.05em}.stat.primary{background:linear-gradient(135deg,#0f766e,#14b8a6)}.stat.blue{background:linear-gradient(135deg,#1d4ed8,#60a5fa)}.stat.green{background:linear-gradient(135deg,#047857,#34d399)}.stat.orange{background:linear-gradient(135deg,#c2410c,#f59e0b)}.stat.purple{background:linear-gradient(135deg,#6d28d9,#a78bfa)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:13px;padding:11px 16px;font-weight:700;cursor:pointer;transition:.18s}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-dark)}.btn-light{background:#eef2f7;color:#334155}.btn-danger{background:#fee2e2;color:#991b1b}.btn-small{padding:7px 10px;font-size:12px}.filter-bar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;align-items:end}.field label{display:block;font-weight:700;font-size:13px;margin-bottom:7px;color:#374151}.field input,.field select,.field textarea{width:100%;border:1px solid #d1d5db;background:#fff;border-radius:13px;padding:11px 12px;font-size:14px;outline:none}.field textarea{min-height:92px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(20,184,166,.12)}.section-title{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}.section-title h2,.section-title h3{margin:0}.muted{color:var(--muted)}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:18px}.table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;min-width:860px}.table th{background:#f8fafc;color:#334155;text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:13px;border-bottom:1px solid var(--line);white-space:nowrap}.table td{padding:12px 13px;border-bottom:1px solid #eef2f7;vertical-align:top}.table tr:last-child td{border-bottom:0}.table.compact td{padding:8px 10px;font-size:13px}.wide-table{min-width:1500px}.badge,.badge-good,.badge-warn,.badge-bad,.badge-muted{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:800}.badge-good{background:#dcfce7;color:#166534}.badge-warn{background:#fef3c7;color:#92400e}.badge-bad{background:#fee2e2;color:#991b1b}.badge-muted{background:#e5e7eb;color:#374151}.yn{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:8px;font-weight:900}.yn.yes{background:#dcfce7;color:#166534}.yn.no{background:#fee2e2;color:#991b1b}.progress{height:12px;background:#e5e7eb;border-radius:999px;overflow:hidden;min-width:130px}.progress > span{display:block;height:100%;background:linear-gradient(90deg,#14b8a6,#2563eb);border-radius:999px}.mini-bars{display:grid;gap:10px}.mini-bar{display:grid;grid-template-columns:190px 1fr 50px;gap:10px;align-items:center;font-size:13px}.mini-bar .bar{height:12px;background:#e5e7eb;border-radius:99px;overflow:hidden}.mini-bar .bar span{display:block;height:100%;background:#0f766e;border-radius:99px}.check-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.check-item{display:flex;gap:10px;align-items:flex-start;border:1px solid #e5e7eb;border-radius:14px;padding:11px;background:#fff}.check-item input{margin-top:3px}.alert{padding:13px 16px;border-radius:14px;margin-bottom:16px;font-weight:700}.alert.success{background:#dcfce7;color:#166534}.alert.danger{background:#fee2e2;color:#991b1b}.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}.login-error{background:#fee2e2;color:#991b1b;padding:11px 12px;border-radius:12px;margin-bottom:14px;font-weight:700}.empty{padding:32px;text-align:center;color:#64748b}.pill-row{display:flex;gap:8px;flex-wrap:wrap}.pill{background:#f1f5f9;color:#334155;border-radius:99px;padding:6px 10px;font-size:12px;font-weight:700}
@media(max-width:1100px){.grid-4,.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}.filter-bar{grid-template-columns:repeat(2,minmax(0,1fr))}.check-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:820px){.sidebar{position:relative;width:100%;height:auto}.main-content{margin-left:0}.topbar{align-items:flex-start;flex-direction:column}.grid-4,.grid-3,.grid-2,.filter-bar,.check-grid{grid-template-columns:1fr}}
@media print{.sidebar,.topbar,.filter-bar,.form-actions,.btn{display:none!important}.main-content{margin:0;padding:0}.card{box-shadow:none;border:1px solid #ddd}}

.ccm-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}.ccm-card{display:block;padding:18px;border:1px solid #dfe7ef;border-radius:16px;background:#fff;color:inherit;text-decoration:none;transition:.2s ease;box-shadow:0 4px 14px rgba(15,45,75,.05)}.ccm-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(15,45,75,.12);border-color:#1f78c1}.ccm-card-head{display:flex;align-items:center;gap:12px}.ccm-card-head .avatar{width:44px;height:44px}.ccm-card-head strong{display:block;font-size:16px}.ccm-card-head small{display:block;margin-top:4px;color:#66788a}.ccm-card-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}.ccm-card-metrics span{padding:10px;border-radius:10px;background:#f5f8fb;color:#607080;font-size:12px}.ccm-card-metrics b{display:block;color:#17324d;font-size:18px;margin-bottom:2px}.ccm-card-link{font-weight:700;color:#1769aa;font-size:13px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.form-actions{grid-column:1/-1;display:flex;gap:10px}@media(max-width:720px){.form-grid{grid-template-columns:1fr}.ccm-card-grid{grid-template-columns:1fr}}

.grid-5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1100px){.grid-5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.grid-5{grid-template-columns:1fr}}

/* Dashboard CCM v3.0 */
.analytics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:18px 0}.chart-card{min-width:0}.chart-card canvas{display:block;width:100%;height:260px}.chart-wide{grid-column:1/-1}.dynamic-summary{margin:18px 0}.grid-span-2{grid-column:span 2}.check-grid{display:grid;gap:8px;padding:10px 0}.check-grid label,.checkbox-line{display:flex;gap:8px;align-items:center;font-weight:500}.radio-stack{display:flex;gap:14px;flex-wrap:wrap;padding:10px 0}.radio-stack label{display:flex;gap:6px;align-items:center}.action-row{display:flex;gap:6px;align-items:center}.action-row form{margin:0}.btn-sm{padding:7px 10px;font-size:12px}.btn-danger{background:#b91c1c;color:#fff;border-color:#b91c1c}code{background:#eef2ff;padding:3px 6px;border-radius:5px;color:#3730a3}
@media(max-width:900px){.analytics-grid{grid-template-columns:1fr}.chart-wide{grid-column:auto}.grid-span-2{grid-column:auto}}

/* Identitas visual RS Kanker Dharmais */
.login-logo{
    display:block;
    width:min(285px,100%);
    height:auto;
    margin:0 0 20px;
    object-fit:contain;
    object-position:left center;
}
.brand-box{
    align-items:center;
}
.brand-logo{
    display:block;
    width:118px;
    height:auto;
    flex:0 0 auto;
    object-fit:contain;
}
.brand-copy{
    min-width:0;
}
.brand-copy strong{
    display:block;
    line-height:1.25;
}
@media(max-width:820px){
    .brand-logo{width:104px}
}


/* Dashboard CCM v3.0.1 - navigasi responsif dan penyempurnaan identitas */
.brand-box{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    text-align:center;
    padding:4px 8px 16px;
}
.brand-logo{
    width:min(190px, 88%);
    max-height:92px;
    object-fit:contain;
    object-position:center;
}
.brand-copy strong{
    display:block;
    font-size:18px;
    line-height:1.25;
}
.brand-copy small{
    margin-top:4px;
}
.login-head{
    text-align:center;
}
.login-logo{
    width:min(300px, 92%);
    max-height:120px;
    margin:0 auto 20px;
    object-position:center;
}
.login-head h1,
.login-head p{
    text-align:center;
}
.menu-toggle{
    display:none;
    width:44px;
    height:44px;
    flex:0 0 44px;
    border:1px solid var(--line);
    border-radius:13px;
    background:#fff;
    cursor:pointer;
    padding:10px;
    box-shadow:0 5px 16px rgba(15,23,42,.08);
}
.menu-toggle span{
    display:block;
    height:2px;
    margin:4px 0;
    border-radius:99px;
    background:#0f172a;
    transition:.2s ease;
}
.sidebar-overlay{
    display:none;
}
.scroll-top{
    position:fixed;
    right:22px;
    bottom:22px;
    z-index:60;
    width:46px;
    height:46px;
    border:0;
    border-radius:50%;
    background:linear-gradient(135deg,var(--primary),#2563eb);
    color:#fff;
    font-size:24px;
    line-height:1;
    cursor:pointer;
    box-shadow:0 12px 28px rgba(15,118,110,.3);
    opacity:0;
    visibility:hidden;
    transform:translateY(14px);
    transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
}
.scroll-top.is-visible{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}
.scroll-top:hover{
    transform:translateY(-3px);
}

@media(max-width:820px){
    body.sidebar-open{
        overflow:hidden;
    }
    .sidebar{
        position:fixed !important;
        top:0;
        left:0;
        width:min(84vw,300px) !important;
        height:100vh !important;
        z-index:100;
        transform:translateX(-105%);
        transition:transform .25s ease;
        box-shadow:20px 0 45px rgba(2,6,23,.28);
        padding:18px;
    }
    .sidebar.is-open{
        transform:translateX(0);
    }
    .sidebar-overlay{
        display:block;
        position:fixed;
        inset:0;
        z-index:90;
        background:rgba(2,6,23,.56);
        opacity:0;
        visibility:hidden;
        transition:opacity .2s ease,visibility .2s ease;
    }
    body.sidebar-open .sidebar-overlay{
        opacity:1;
        visibility:visible;
    }
    .main-content{
        margin-left:0 !important;
        padding:16px 14px 72px;
    }
    .topbar{
        position:sticky;
        top:0;
        z-index:50;
        display:grid;
        grid-template-columns:44px minmax(0,1fr);
        align-items:start;
        gap:12px;
        margin:-16px -14px 18px;
        padding:12px 14px;
        background:rgba(255,255,255,.96);
        backdrop-filter:blur(10px);
    }
    .menu-toggle{
        display:block;
    }
    .topbar-title{
        min-width:0;
    }
    .topbar h1{
        font-size:21px;
        line-height:1.25;
        overflow-wrap:anywhere;
    }
    .topbar p{
        font-size:13px;
    }
    .top-actions{
        grid-column:1/-1;
        justify-content:space-between;
        flex-wrap:wrap;
        padding-left:56px;
    }
    .brand-logo{
        width:min(180px,88%);
    }
    .scroll-top{
        right:14px;
        bottom:16px;
        width:44px;
        height:44px;
    }
}

@media(max-width:480px){
    .login-page{
        padding:14px;
        align-items:start;
    }
    .login-card{
        margin-top:18px;
        border-radius:22px;
    }
    .login-head{
        padding:28px 22px 20px;
    }
    .login-body{
        padding:24px 22px 28px;
    }
    .login-head h1{
        font-size:24px;
    }
    .login-logo{
        width:min(270px,100%);
    }
    .top-actions{
        padding-left:0;
    }
}

/* Dashboard CCM v3.1.1 - ringkasan kartu tanpa Pasien Unik */
.dashboard-stat-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    margin-bottom:20px;
}
@media(max-width:1100px){
    .dashboard-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:650px){
    .dashboard-stat-grid{grid-template-columns:1fr;}
}