:root{--bg:#f4f7fb;--panel:#fff;--sidebar:#0b1220;--sidebar2:#111c30;--text:#0f172a;--muted:#64748b;--line:#e5eaf1;--primary:#2563eb;--primary2:#1d4ed8;--success:#16a34a;--danger:#dc2626}
*{box-sizing:border-box}
html{font-size:15px}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;line-height:1.5}
a{text-decoration:none;color:inherit}.sidebar{position:fixed;inset:0 auto 0 0;width:248px;background:linear-gradient(180deg,var(--sidebar),var(--sidebar2));color:#cbd5e1;z-index:30;padding:18px 12px;box-shadow:8px 0 30px #0f172a12}
.brand{display:flex;gap:11px;align-items:center;padding:9px 10px 24px;color:#fff}.brand-icon{font-size:31px}.brand strong{display:block;font-size:14px;letter-spacing:.3px}.brand small{display:block;color:#94a3b8;font-size:11px;margin-top:2px}
.nav a{display:flex;gap:12px;align-items:center;padding:11px 13px;border-radius:10px;margin:4px 0;color:#cbd5e1;font-size:14px;transition:.18s}.nav a span{width:21px;text-align:center}.nav a:hover,.nav a.active{background:#1e293b;color:#fff}.nav a.active{box-shadow:inset 3px 0 var(--primary)}
.nav-title{font-size:10px;color:#64748b;font-weight:800;letter-spacing:1.2px;margin:22px 13px 7px}.sidebar-bottom{position:absolute;bottom:20px;left:25px}.sidebar-bottom a{color:#94a3b8;font-size:14px}.sidebar-bottom a:hover{color:#fff}
.topbar{position:fixed;left:248px;right:0;top:0;height:76px;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 30px;z-index:20}.top-title h1{margin:0;font-size:21px;line-height:1.2}.top-title small{color:var(--muted);font-size:12px}.menu-btn{display:none}.top-user{display:flex;align-items:center;gap:9px;font-size:13px}.dot{width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px #dcfce7}.role{background:#eff6ff;color:#1d4ed8;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:700}
.main{margin-left:248px;padding:106px 30px 35px;min-height:100vh}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:22px}.stat{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:21px;box-shadow:0 7px 25px #0f172a08}.stat .icon{float:right;font-size:26px}.stat .label{color:var(--muted);font-size:13px;font-weight:600}.stat .num{font-size:31px;font-weight:800;letter-spacing:-.5px;margin-top:7px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:0 7px 25px #0f172a08}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.toolbar h2{margin:0;font-size:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 15px;border-radius:9px;border:0;background:var(--primary);color:#fff;cursor:pointer;font-weight:700;font-size:13px;transition:.15s}.btn:hover{background:var(--primary2);transform:translateY(-1px)}.btn.secondary{background:#eef2f7;color:#0f172a}.btn.secondary:hover{background:#e2e8f0}.btn.danger{background:var(--danger)}.btn.success{background:var(--success)}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:11px}table{width:100%;border-collapse:collapse}th,td{padding:13px 14px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}tr:last-child td{border-bottom:0}th{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);background:#f8fafc}td{font-size:13px}
.badge{display:inline-block;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:800}.badge.ok{background:#dcfce7;color:#166534}.badge.off{background:#fee2e2;color:#991b1b}.badge.info{background:#dbeafe;color:#1d4ed8}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}.field label{display:block;font-size:13px;font-weight:700;margin-bottom:7px}.field input,.field select,.field textarea{width:100%;padding:11px 12px;border:1px solid #cbd5e1;border-radius:9px;background:#fff;font:inherit;outline:none;transition:.15s}.field input:focus,.field select:focus,.field textarea:focus{border-color:#60a5fa;box-shadow:0 0 0 3px #dbeafe}.field.full{grid-column:1/-1}.actions{display:flex;gap:10px;margin-top:21px}
.alert{padding:12px 14px;border-radius:10px;background:#fee2e2;color:#991b1b;margin-bottom:16px}.success-box{padding:12px 14px;border-radius:10px;background:#dcfce7;color:#166534;margin-bottom:16px}
.quick{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px}.quick a{background:#f8fafc;border:1px solid var(--line);padding:17px;border-radius:12px;transition:.16s}.quick a:hover{background:#eff6ff;border-color:#bfdbfe;transform:translateY(-2px)}.quick strong{display:block;margin-top:8px;font-size:13px}.quick small{color:var(--muted)}
.live-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.camera-card{background:#020617;border-radius:13px;overflow:hidden;color:#fff;box-shadow:0 8px 24px #02061725}.camera-head{padding:11px 13px;display:flex;justify-content:space-between;font-size:13px}.video-box{height:210px;display:grid;place-items:center;text-align:center;color:#64748b;background:#000}.video-box small{display:block;text-align:center}
.footer{text-align:center;color:#94a3b8;font-size:12px;padding:26px 0}.login-page{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at top,#dbeafe,#f8fafc 52%)}.login-card{width:min(420px,92vw);background:#fff;border:1px solid var(--line);border-radius:20px;padding:34px;box-shadow:0 25px 70px #0f172a1c}.login-card h1{margin:0 0 8px}.login-card p{color:var(--muted)}.login-card .field{margin:14px 0}.login-card .btn{width:100%;justify-content:center}.check{display:flex;align-items:center;gap:8px;padding:8px 0}.check input{width:18px;height:18px}
@media(max-width:1050px){.stats{grid-template-columns:repeat(2,1fr)}.quick{grid-template-columns:repeat(3,1fr)}.live-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.sidebar{transform:translateX(-100%);transition:.2s}.sidebar.show{transform:translateX(0)}.topbar{left:0;padding:0 16px}.menu-btn{display:block;border:0;background:none;font-size:23px;margin-right:12px}.top-title{margin-right:auto}.top-user{display:none}.main{margin-left:0;padding:96px 14px 25px}.form-grid{grid-template-columns:1fr}.live-grid{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr;gap:10px}.quick{grid-template-columns:1fr 1fr}.stat{padding:15px}.stat .num{font-size:25px}.card{padding:15px}}


/* ============================================================
   CCTV MONITORING — SIDEBAR ELEGANT FINAL
   Semua class memakai prefix cm- agar tidak bentrok dengan CSS lama.
   ============================================================ */

.cm-sidebar{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:252px;
    padding:18px 12px;
    background:linear-gradient(180deg,#0b1220 0%,#111c30 100%);
    color:#cbd5e1;
    z-index:10000;
    display:flex;
    flex-direction:column;
    box-sizing:border-box;
    overflow-y:auto;
    box-shadow:8px 0 30px rgba(15,23,42,.14);
}

.cm-sidebar::-webkit-scrollbar{width:5px}
.cm-sidebar::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.12);
    border-radius:20px;
}

.cm-sidebar-head{
    position:relative;
    display:flex;
    align-items:center;
    min-height:55px;
    padding:0 8px 15px;
}

.cm-brand{
    display:flex;
    align-items:center;
    gap:11px;
    min-width:0;
}

.cm-brand-logo{
    width:38px;
    height:38px;
    flex:0 0 38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:11px;
    background:rgba(37,99,235,.18);
    border:1px solid rgba(96,165,250,.16);
    font-size:20px;
}

.cm-brand-text{
    min-width:0;
}

.cm-brand-text strong{
    display:block;
    color:#fff;
    font-size:14px;
    font-weight:800;
    line-height:1.25;
    white-space:nowrap;
}

.cm-brand-text span{
    display:block;
    color:#94a3b8;
    font-size:10.5px;
    margin-top:3px;
    white-space:nowrap;
}

.cm-sidebar-close{
    display:none;
}

.cm-account{
    display:flex;
    align-items:center;
    gap:10px;
    margin:3px 4px 16px;
    padding:10px;
    border:1px solid rgba(255,255,255,.06);
    border-radius:12px;
    background:rgba(255,255,255,.045);
}

.cm-avatar{
    width:34px;
    height:34px;
    flex:0 0 34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#2563eb;
    color:#fff;
    font-size:13px;
    font-weight:800;
}

.cm-account-text{
    min-width:0;
}

.cm-account-text strong{
    display:block;
    color:#fff;
    font-size:12.5px;
    line-height:1.3;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.cm-account-text span{
    display:block;
    color:#94a3b8;
    font-size:10.5px;
    margin-top:2px;
}

.cm-nav{
    display:flex;
    flex-direction:column;
    gap:3px;
    width:100%;
}

.cm-nav-label{
    margin:13px 9px 5px;
    color:#64748b;
    font-size:9.5px;
    line-height:16px;
    font-weight:800;
    letter-spacing:1.15px;
}

.cm-nav-label:first-child{
    margin-top:0;
}

.cm-nav a{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    min-height:39px;
    padding:8px 10px;
    margin:0;
    border-radius:9px;
    box-sizing:border-box;
    color:#cbd5e1;
    text-decoration:none;
    font-size:13px;
    font-weight:500;
    line-height:1.2;
    transition:all .16s ease;
}

.cm-nav a:hover{
    background:rgba(255,255,255,.065);
    color:#fff;
    transform:translateX(1px);
}

.cm-nav a.active{
    background:linear-gradient(90deg,#1d4ed8,#2563eb);
    color:#fff;
    font-weight:700;
    box-shadow:0 4px 12px rgba(37,99,235,.18);
}

.cm-nav-icon{
    width:21px;
    min-width:21px;
    flex:0 0 21px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-size:15px;
}

.cm-nav-text{
    display:block;
    min-width:0;
    flex:1;
}

.cm-sidebar-footer{
    margin-top:auto;
    padding:18px 4px 2px;
}

.cm-logout{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:39px;
    padding:8px 10px;
    border-radius:9px;
    color:#94a3b8;
    font-size:13px;
    text-decoration:none;
}

.cm-logout:hover{
    background:rgba(255,255,255,.06);
    color:#fff;
}

/* APP */
.cm-app{
    margin-left:252px;
    min-height:100vh;
}

.cm-topbar{
    position:fixed;
    top:0;
    left:252px;
    right:0;
    height:64px;
    z-index:9000;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 28px;
    box-sizing:border-box;
    background:rgba(255,255,255,.96);
    border-bottom:1px solid var(--line);
    backdrop-filter:blur(10px);
}

.cm-topbar-left{
    display:flex;
    align-items:center;
    gap:10px;
}

.cm-desktop-toggle{
    width:38px;
    height:38px;
    border:0;
    border-radius:9px;
    background:#f8fafc;
    color:#334155;
    cursor:pointer;
    font-size:18px;
}

.cm-desktop-toggle:hover{
    background:#e2e8f0;
}

.cm-page-title{
    font-size:14px;
    font-weight:800;
    color:#0f172a;
}

.cm-topbar-user{
    display:flex;
    align-items:center;
    gap:8px;
    color:#334155;
    font-size:13px;
}

.cm-role{
    margin-left:4px;
    padding:4px 9px;
    border-radius:999px;
    background:#eff6ff;
    color:#1d4ed8;
    font-size:10px;
    font-weight:800;
}

.cm-content{
    min-height:100vh;
    padding-top:64px;
}

/* COLLAPSE DESKTOP */
body.cm-collapsed .cm-sidebar{
    width:76px;
}

body.cm-collapsed .cm-app{
    margin-left:76px;
}

body.cm-collapsed .cm-topbar{
    left:76px;
}

body.cm-collapsed .cm-brand-text,
body.cm-collapsed .cm-account-text,
body.cm-collapsed .cm-nav-label,
body.cm-collapsed .cm-nav-text{
    display:none;
}

body.cm-collapsed .cm-brand,
body.cm-collapsed .cm-account,
body.cm-collapsed .cm-nav a,
body.cm-collapsed .cm-logout{
    justify-content:center;
}

body.cm-collapsed .cm-sidebar-head{
    justify-content:center;
}

body.cm-collapsed .cm-account{
    margin-left:0;
    margin-right:0;
}

body.cm-collapsed .cm-sidebar-footer{
    padding-left:0;
    padding-right:0;
}

/* FOOTER */
.cm-footer{
    text-align:center;
    color:#94a3b8;
    font-size:11px;
    padding:20px 0;
}

/* MOBILE HEADER */
.cm-mobile-header{
    display:none;
}

.cm-sidebar-overlay{
    display:none;
}

/* TABLET */
@media (max-width:900px) and (min-width:769px){
    .cm-sidebar{
        width:220px;
    }
    .cm-app{
        margin-left:220px;
    }
    .cm-topbar{
        left:220px;
    }
}

/* MOBILE */
@media (max-width:768px){

    body{
        padding-top:56px;
        overflow-x:hidden;
    }

    .cm-mobile-header{
        position:fixed;
        top:0;
        left:0;
        right:0;
        height:56px;
        z-index:12000;
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding:0 9px;
        background:#0b1220;
        color:#fff;
        box-shadow:0 2px 12px rgba(0,0,0,.2);
    }

    .cm-mobile-menu,
    .cm-mobile-logout{
        width:40px;
        height:40px;
        border:0;
        border-radius:9px;
        display:flex;
        align-items:center;
        justify-content:center;
        background:rgba(255,255,255,.07);
        color:#fff;
        text-decoration:none;
        cursor:pointer;
        font-size:21px;
    }

    .cm-mobile-title{
        display:flex;
        align-items:center;
        gap:8px;
        min-width:0;
    }

    .cm-mobile-logo{
        width:32px;
        height:32px;
        display:flex;
        align-items:center;
        justify-content:center;
        border-radius:8px;
        background:#2563eb;
        font-size:17px;
    }

    .cm-mobile-title strong{
        display:block;
        font-size:12.5px;
        line-height:15px;
        white-space:nowrap;
    }

    .cm-mobile-title small{
        display:block;
        color:#94a3b8;
        font-size:9px;
        line-height:12px;
    }

    .cm-sidebar{
        width:285px !important;
        min-width:285px !important;
        transform:translateX(-100%);
        transition:transform .22s ease;
        z-index:13000;
    }

    .cm-sidebar.cm-open{
        transform:translateX(0);
    }

    .cm-sidebar-close{
        display:flex;
        align-items:center;
        justify-content:center;
        width:34px;
        height:34px;
        border:0;
        border-radius:8px;
        background:rgba(255,255,255,.07);
        color:#fff;
        font-size:23px;
        cursor:pointer;
        margin-left:auto;
    }

    .cm-sidebar-overlay{
        display:block;
        position:fixed;
        inset:0;
        z-index:12500;
        background:rgba(15,23,42,.55);
        opacity:0;
        visibility:hidden;
        transition:.2s ease;
    }

    .cm-sidebar-overlay.cm-show{
        opacity:1;
        visibility:visible;
    }

    body.cm-menu-open{
        overflow:hidden;
    }

    .cm-app{
        margin-left:0 !important;
        width:100%;
    }

    .cm-topbar{
        display:none;
    }

    .cm-content{
        padding-top:0;
    }

    body.cm-collapsed .cm-sidebar{
        width:285px !important;
    }

    body.cm-collapsed .cm-app{
        margin-left:0;
    }

    body.cm-collapsed .cm-topbar{
        left:0;
    }

    body.cm-collapsed .cm-brand-text,
    body.cm-collapsed .cm-account-text,
    body.cm-collapsed .cm-nav-label,
    body.cm-collapsed .cm-nav-text{
        display:block;
    }

    body.cm-collapsed .cm-brand,
    body.cm-collapsed .cm-account,
    body.cm-collapsed .cm-nav a,
    body.cm-collapsed .cm-logout{
        justify-content:initial;
    }
}

/* SMALL PHONE */
@media (max-width:480px){
    .cm-sidebar{
        width:290px !important;
        min-width:290px !important;
    }
}

/* TV / LARGE */
@media (min-width:1600px){
    .cm-sidebar{
        width:260px;
    }
    .cm-app{
        margin-left:260px;
    }
    .cm-topbar{
        left:260px;
    }
    .cm-nav a{
        min-height:42px;
        font-size:13.5px;
    }
}