:root{
    --bg:#f4f7fb;
    --panel:#ffffff;
    --text:#0f172a;
    --muted:#64748b;
    --border:#e2e8f0;
    --primary:#2563eb;
    --primary-dark:#1d4ed8;
    --success:#16a34a;
    --danger:#ef4444;
    --warning:#f59e0b;
    --sidebar:#0f172a;
    --sidebar-soft:#1e293b;
    --shadow:0 16px 40px rgba(15,23,42,.07);
    --radius:20px;
    --sidebar-width:280px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:var(--bg);
    color:var(--text);
    font-size:15px;
}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
input,select,textarea{
    width:100%;
    border:1px solid var(--border);
    border-radius:14px;
    padding:10px 12px;
    background:#fff;
    color:var(--text);
    outline:none;
}
input:focus,select:focus,textarea:focus{
    border-color:#93c5fd;
    box-shadow:0 0 0 4px rgba(37,99,235,.08);
}
textarea{resize:vertical}
label{display:block;font-weight:800;margin-bottom:8px}
small{line-height:1.35}

.app-shell{min-height:100vh}

/* Sidebar */
.sidebar{
    position:fixed;
    inset:0 auto 0 0;
    width:var(--sidebar-width);
    background:var(--sidebar);
    color:#e5e7eb;
    padding:18px;
    z-index:50;
    overflow-y:auto;
    scrollbar-width:thin;
    transition:transform .22s ease;
}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-thumb{background:#334155;border-radius:99px}
.sidebar-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.55);
    z-index:40;
}
.brand{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:18px;
    min-height:52px;
}
.brand-icon,.login-logo{
    width:46px;
    height:46px;
    flex:0 0 46px;
    border-radius:16px;
    background:linear-gradient(135deg,#38bdf8,#22c55e);
    display:grid;
    place-items:center;
    font-weight:900;
    color:#fff;
}
.brand-text{min-width:0}
.brand-text b{
    display:block;
    color:#fff;
    font-size:16px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.brand-text small{
    display:block;
    color:#94a3b8;
    margin-top:2px;
}
.sidebar-close{
    display:none;
    margin-left:auto;
    border:0;
    background:#1e293b;
    color:#fff;
    width:34px;
    height:34px;
    border-radius:12px;
    font-size:22px;
    cursor:pointer;
}
.sidebar-nav{
    display:grid;
    gap:6px;
    padding-bottom:22px;
}
.sidebar-nav a,.nav-disabled{
    display:flex;
    align-items:center;
    min-height:42px;
    padding:10px 13px;
    border-radius:14px;
    color:#cbd5e1;
    font-weight:700;
    letter-spacing:.1px;
}
.sidebar-nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.sidebar-nav a.active{
    background:#1e293b;
    color:#fff;
    box-shadow:inset 3px 0 0 #38bdf8;
}
.nav-section{
    margin:12px 10px 2px;
    color:#64748b;
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.12em;
}

/* Main */
.main{
    min-height:100vh;
    margin-left:var(--sidebar-width);
    padding:18px 22px;
}
.topbar{
    position:sticky;
    top:0;
    z-index:30;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:10px 0 16px;
    background:linear-gradient(180deg,var(--bg) 70%,rgba(244,247,251,0));
}
.topbar-left{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}
.topbar h1{
    margin:0;
    font-size:28px;
    line-height:1.15;
    letter-spacing:.2px;
}
.topbar p{
    margin:5px 0 0;
    color:var(--muted);
}
.hamburger{
    display:none;
    width:42px;
    height:42px;
    border:1px solid var(--border);
    border-radius:14px;
    background:#fff;
    cursor:pointer;
    padding:10px;
}
.hamburger span{
    display:block;
    height:2px;
    background:#0f172a;
    border-radius:9px;
    margin:5px 0;
}
.userbox{
    display:flex;
    align-items:center;
    gap:12px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;
    padding:9px 10px 9px 14px;
    box-shadow:0 8px 26px rgba(15,23,42,.05);
}
.userbox b{display:block;white-space:nowrap}
.userbox small{display:block;color:var(--muted)}
.content-wrap{max-width:1500px;margin:0 auto}

/* Components */
.grid{display:grid;gap:12px}
.cards{
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    margin-bottom:14px;
}
.card,.panel,.login-card{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}
.card{padding:16px}
.card small{
    color:var(--muted);
    font-weight:900;
}
.card b{
    display:block;
    margin-top:8px;
    font-size:25px;
    line-height:1.1;
}
.money b{font-size:23px}
.panel{
    padding:17px;
    margin-bottom:16px;
}
.panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:14px;
}
.panel-head h2{
    margin:0;
    font-size:20px;
}
.panel-head p{
    margin:4px 0 0;
    color:var(--muted);
}
.btn{
    border:0;
    border-radius:13px;
    padding:10px 14px;
    background:var(--primary);
    color:#fff;
    font-weight:900;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    white-space:nowrap;
}
.btn:hover{background:var(--primary-dark)}
.btn.secondary{background:#e2e8f0;color:#0f172a}
.btn.secondary:hover{background:#cbd5e1}
.btn.danger{background:var(--danger);color:#fff}
.btn.danger:hover{background:#dc2626}
.btn.small{
    padding:7px 10px;
    border-radius:11px;
    font-size:12px;
}
.btn.full{width:100%;margin-top:14px}
.alert{
    padding:13px 15px;
    border-radius:16px;
    margin-bottom:14px;
    font-weight:800;
}
.alert.success{background:#dcfce7;color:#166534;border:1px solid #bbf7d0}
.alert.danger{background:#fee2e2;color:#991b1b;border:1px solid #fecaca}

/* Table */
.table-wrap{
    width:100%;
    overflow:auto;
    border:1px solid var(--border);
    border-radius:17px;
    background:#fff;
}
table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    min-width:850px;
}
th,td{
    padding:11px 13px;
    text-align:left;
    border-bottom:1px solid #eef2f7;
    vertical-align:middle;
    white-space:nowrap;
}
th{
    position:sticky;
    top:0;
    z-index:2;
    background:#f8fafc;
    color:#475569;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.07em;
}
tr:last-child td{border-bottom:0}
.compact-table table{font-size:14px}
.empty{
    text-align:center;
    color:var(--muted);
    padding:34px!important;
}
.badge{
    display:inline-flex;
    align-items:center;
    padding:5px 9px;
    border-radius:999px;
    font-size:11px;
    font-weight:900;
    text-transform:capitalize;
}
.badge.green{background:#dcfce7;color:#166534}
.badge.blue{background:#dbeafe;color:#1d4ed8}
.badge.gray{background:#e5e7eb;color:#374151}
.badge.red{background:#fee2e2;color:#991b1b}
.danger-text{color:#dc2626!important}
.success-text{color:#16a34a!important}
.muted{color:var(--muted);font-size:12px}
.d-block{display:block}

/* Forms */
.form-panel{max-width:920px}
.form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:15px;
}
.form-grid.one{grid-template-columns:1fr}
.form-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    margin-top:18px;
    flex-wrap:wrap;
}
.hint{
    display:block;
    color:var(--muted);
    margin-top:7px;
}
.filterbar,.bulkbar{
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
    background:#f8fafc;
    border:1px solid var(--border);
    padding:10px;
    border-radius:16px;
    margin-bottom:12px;
}
.filterbar input,.filterbar select{max-width:240px}
.bulkbar small{color:var(--muted);font-weight:800}
td input[type="checkbox"],th input[type="checkbox"]{width:18px;height:18px}
.check-panel{
    padding:14px;
    border-radius:18px;
    background:#f8fafc;
    border:1px solid var(--border);
    display:grid;
    gap:10px;
}
.check-row{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0;
    font-weight:800;
}
.check-row input[type="checkbox"]{
    width:18px;
    height:18px;
    flex:0 0 18px;
}
.import-example{
    margin-top:18px;
    padding:16px;
    border-radius:18px;
    background:#f8fafc;
    border:1px dashed #cbd5e1;
}
.import-example h3{margin:0 0 10px}
.import-example p{color:var(--muted);margin:12px 0 8px}
.import-example pre{
    margin:0;
    padding:12px;
    border-radius:14px;
    background:#0f172a;
    color:#e5e7eb;
    overflow:auto;
}

/* Login */
.login-page{
    min-height:100vh;
    display:grid;
    place-items:center;
    background:radial-gradient(circle at top,#dbeafe,#f8fafc 55%);
    padding:18px;
}
.login-card{
    width:min(420px,100%);
    padding:28px;
}
.login-logo{margin:0 auto 14px}
.login-card h1{text-align:center;margin:0}
.login-card p{text-align:center;color:var(--muted);margin:8px 0 22px}
.login-card label{margin-top:12px}
.login-help{text-align:center;margin-top:18px;color:var(--muted);font-size:13px;line-height:1.5}

/* Pagination */
nav[role="navigation"]{
    margin-top:14px;
}
.pagination{
    display:flex;
    gap:6px;
    list-style:none;
    padding:0;
    margin:14px 0 0;
    flex-wrap:wrap;
}
.pagination a,.pagination span{
    display:block;
    padding:8px 11px;
    border-radius:10px;
    background:#f1f5f9;
}

/* Responsive */
@media(max-width:1180px){
    :root{--sidebar-width:260px}
    .cards{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
    .topbar h1{font-size:25px}
}
@media(max-width:980px){
    .sidebar{
        transform:translateX(-105%);
        width:min(86vw,320px);
    }
    body.sidebar-open .sidebar{transform:translateX(0)}
    body.sidebar-open .sidebar-overlay{display:block}
    .sidebar-close{display:block}
    .main{
        margin-left:0;
        padding:12px;
    }
    .hamburger{display:block;flex:0 0 42px}
    .topbar{
        align-items:flex-start;
        padding-top:8px;
    }
    .userbox{
        padding:8px;
    }
}
@media(max-width:760px){
    body{font-size:14px}
    .topbar{
        flex-direction:column;
        align-items:stretch;
    }
    .topbar-left{align-items:flex-start}
    .topbar h1{font-size:23px}
    .userbox{
        width:100%;
        justify-content:space-between;
    }
    .panel-head{
        flex-direction:column;
        align-items:flex-start;
    }
    .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
    .form-grid{grid-template-columns:1fr}
    .filterbar input,.filterbar select{max-width:none;flex:1 1 100%}
    .filterbar .btn{flex:1 1 auto}
    .table-wrap{border-radius:14px}
}
@media(max-width:520px){
    .main{padding:10px}
    .cards{grid-template-columns:1fr}
    .card,.panel{border-radius:17px}
    .card{padding:14px}
    .panel{padding:14px}
    .brand-text b{font-size:15px}
    .btn{width:auto}
    .form-actions{justify-content:stretch}
    .form-actions .btn{flex:1}
}

/* Print safety */
@media print{
    .sidebar,.topbar,.sidebar-overlay{display:none!important}
    .main{margin:0;padding:0}
    .panel,.card{box-shadow:none}
}


.action-wrap{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    align-items:center;
}
.action-wrap form{
    margin:0;
}

.action-wrap{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    align-items:center;
}
.action-wrap form{
    margin:0;
}
.action-wrap .btn{
    min-height:34px;
}

/* =========================
   Mobile UX Upgrade
   ========================= */

@media(max-width:640px){
    body{
        background:#f1f5f9;
        font-size:13px;
    }

    .main{
        padding:8px;
        min-width:0;
    }

    .content-wrap{
        width:100%;
        max-width:100%;
    }

    .topbar{
        position:sticky;
        top:0;
        z-index:35;
        padding:8px 0 10px;
        margin-bottom:4px;
        background:linear-gradient(180deg,#f1f5f9 88%,rgba(241,245,249,0));
        gap:8px;
    }

    .topbar-left{
        display:grid;
        grid-template-columns:38px 1fr;
        gap:8px;
        align-items:start;
    }

    .hamburger{
        width:36px;
        height:36px;
        border-radius:12px;
        padding:8px;
    }

    .hamburger span{
        margin:4px 0;
    }

    .topbar h1{
        font-size:20px;
        line-height:1.15;
        letter-spacing:.1px;
        word-break:break-word;
    }

    .topbar p{
        margin-top:3px;
        font-size:12px;
        line-height:1.35;
    }

    .userbox{
        width:100%;
        min-height:42px;
        border-radius:15px;
        padding:7px 8px 7px 10px;
        box-shadow:0 8px 22px rgba(15,23,42,.05);
    }

    .userbox b{
        font-size:13px;
    }

    .userbox small{
        font-size:11px;
    }

    .userbox .btn.small{
        padding:7px 10px;
        font-size:11px;
        border-radius:10px;
    }

    .cards{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:8px;
        margin-bottom:10px;
    }

    .card{
        min-height:76px;
        padding:10px 11px;
        border-radius:15px;
        box-shadow:0 8px 22px rgba(15,23,42,.055);
    }

    .card small{
        font-size:10.5px;
        line-height:1.25;
        letter-spacing:.02em;
    }

    .card b{
        margin-top:7px;
        font-size:20px;
        line-height:1;
        word-break:break-word;
    }

    .card.money{
        grid-column:span 2;
    }

    .card.money b{
        font-size:20px;
    }

    .panel{
        padding:11px;
        border-radius:16px;
        margin-bottom:10px;
        box-shadow:0 8px 22px rgba(15,23,42,.055);
    }

    .panel-head{
        gap:8px;
        margin-bottom:10px;
    }

    .panel-head h2{
        font-size:17px;
        line-height:1.2;
    }

    .panel-head p{
        font-size:12px;
        line-height:1.35;
    }

    .panel-head > div:last-child,
    .panel-head > form,
    .panel-head > a{
        width:100%;
    }

    .btn{
        min-height:38px;
        padding:9px 11px;
        border-radius:12px;
        font-size:13px;
    }

    .btn.small{
        min-height:32px;
        padding:7px 9px;
        font-size:11.5px;
    }

    .filterbar,
    .bulkbar{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:8px;
        padding:9px;
        border-radius:14px;
    }

    .filterbar input,
    .filterbar select,
    .filterbar .btn,
    .bulkbar .btn{
        width:100%;
        max-width:none;
        min-width:0;
    }

    .filterbar input,
    .filterbar select{
        grid-column:span 2;
        height:39px;
        padding:8px 10px;
        border-radius:12px;
        font-size:13px;
    }

    .filterbar .btn,
    .filterbar a.btn{
        grid-column:span 1;
    }

    .bulkbar small{
        grid-column:span 2;
        font-size:11px;
    }

    input,select,textarea{
        padding:9px 10px;
        border-radius:12px;
        font-size:13px;
    }

    label{
        font-size:13px;
        margin-bottom:6px;
    }

    .form-grid{
        gap:10px;
    }

    .form-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:8px;
        margin-top:12px;
    }

    .form-actions .btn{
        width:100%;
    }

    .sidebar{
        width:min(88vw,310px);
        padding:14px;
    }

    .brand{
        margin-bottom:12px;
    }

    .brand-icon{
        width:42px;
        height:42px;
        flex-basis:42px;
        border-radius:14px;
        font-size:13px;
    }

    .brand-text b{
        font-size:14px;
    }

    .brand-text small{
        font-size:12px;
    }

    .sidebar-nav{
        gap:4px;
    }

    .sidebar-nav a,
    .nav-disabled{
        min-height:39px;
        padding:9px 12px;
        border-radius:13px;
        font-size:14px;
    }

    .nav-section{
        margin:10px 8px 2px;
        font-size:10px;
    }

    .alert{
        padding:10px 12px;
        border-radius:14px;
        font-size:12.5px;
    }
}

/* Mobile table -> card style */
@media(max-width:640px){
    .table-wrap{
        border:0;
        background:transparent;
        overflow:visible;
    }

    .table-wrap table,
    .table-wrap thead,
    .table-wrap tbody,
    .table-wrap th,
    .table-wrap td,
    .table-wrap tr{
        display:block;
        width:100%;
        min-width:0;
    }

    .table-wrap thead{
        display:none;
    }

    .table-wrap tr{
        background:#fff;
        border:1px solid #e2e8f0;
        border-radius:15px;
        margin-bottom:9px;
        padding:8px 10px;
        box-shadow:0 8px 20px rgba(15,23,42,.045);
    }

    .table-wrap td{
        display:grid;
        grid-template-columns:92px 1fr;
        gap:8px;
        align-items:start;
        padding:7px 0;
        border-bottom:1px dashed #e2e8f0;
        white-space:normal;
        word-break:break-word;
        font-size:12.5px;
    }

    .table-wrap td:last-child{
        border-bottom:0;
    }

    .table-wrap td::before{
        content:attr(data-label);
        color:#64748b;
        font-weight:900;
        font-size:10.5px;
        text-transform:uppercase;
        letter-spacing:.05em;
    }

    .table-wrap td:empty{
        display:none;
    }

    .table-wrap td .action-wrap{
        justify-content:flex-start;
    }

    .table-wrap td .action-wrap .btn,
    .table-wrap td .action-wrap form{
        width:auto;
    }

    .badge{
        padding:4px 8px;
        font-size:10.5px;
    }

    .muted{
        font-size:11px;
    }

    .empty{
        display:block !important;
        padding:20px 10px !important;
        text-align:center;
    }

    .empty::before{
        display:none;
    }
}

@media(max-width:360px){
    .cards{
        grid-template-columns:1fr 1fr !important;
        gap:7px;
    }

    .card{
        min-height:70px;
        padding:9px;
    }

    .card small{
        font-size:10px;
    }

    .card b{
        font-size:18px;
    }

    .topbar h1{
        font-size:19px;
    }

    .table-wrap td{
        grid-template-columns:82px 1fr;
        font-size:12px;
    }
}

/* Clickable stat cards */
a.card,
.card-link{
    display:block;
    color:inherit;
    text-decoration:none;
    cursor:pointer;
    transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
a.card:hover,
.card-link:hover{
    transform:translateY(-2px);
    border-color:#bfdbfe;
    box-shadow:0 18px 45px rgba(37,99,235,.11);
}
a.card:active,
.card-link:active{
    transform:scale(.985);
}
.card small::after{
    content:"";
}
a.card small::after,
.card-link small::after{
    content:" →";
    opacity:.45;
}
@media(max-width:640px){
    a.card:hover,
    .card-link:hover{
        transform:none;
    }
    a.card:active,
    .card-link:active{
        transform:scale(.98);
    }
}

.chip-wrap{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}
.profile-chip{
    display:inline-flex;
    align-items:center;
    padding:5px 8px;
    border-radius:999px;
    background:#eff6ff;
    color:#1d4ed8;
    font-size:11px;
    font-weight:900;
    white-space:nowrap;
}
@media(max-width:640px){
    .chip-wrap{
        gap:5px;
    }
    .profile-chip{
        font-size:10.5px;
        padding:4px 7px;
    }
}

/* Compact summary for non-dashboard pages */
.summary-box{
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:18px;
    padding:12px 14px;
    margin-bottom:14px;
    box-shadow:0 10px 26px rgba(15,23,42,.045);
}
.summary-box summary{
    cursor:pointer;
    font-weight:900;
    color:#0f172a;
    list-style:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.summary-box summary::-webkit-details-marker{
    display:none;
}
.summary-box summary:after{
    content:"Buka/Tutup";
    font-size:11px;
    color:#64748b;
    background:#f1f5f9;
    padding:5px 8px;
    border-radius:999px;
}
.mini-stats{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:12px;
}
.mini-stat{
    flex:1 1 150px;
    min-width:145px;
    border:1px solid #e2e8f0;
    background:#f8fafc;
    border-radius:14px;
    padding:10px 12px;
    color:#0f172a;
    text-decoration:none;
}
.mini-stat small{
    display:block;
    color:#64748b;
    font-weight:900;
    font-size:11px;
}
.mini-stat b{
    display:block;
    margin-top:4px;
    font-size:18px;
}
.mini-stat:hover{
    border-color:#bfdbfe;
    background:#eff6ff;
}
@media(max-width:640px){
    .summary-box{
        padding:10px;
        border-radius:15px;
        margin-bottom:10px;
    }
    .mini-stats{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:7px;
    }
    .mini-stat{
        min-width:0;
        padding:9px;
        border-radius:13px;
    }
    .mini-stat small{
        font-size:10px;
    }
    .mini-stat b{
        font-size:16px;
    }
}

/* Sidebar user/logout cleanup */
.sidebar{
    display:flex;
    flex-direction:column;
}
.sidebar-nav{
    flex:1;
}
.sidebar-user{
    margin-top:14px;
    padding:12px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.05);
    border-radius:16px;
}
.sidebar-user-info b{
    display:block;
    color:#fff;
    font-size:14px;
    line-height:1.2;
}
.sidebar-user-info small{
    display:block;
    color:#94a3b8;
    margin-top:3px;
    font-size:12px;
    word-break:break-word;
}
.sidebar-user-info span{
    display:inline-flex;
    margin-top:8px;
    padding:4px 8px;
    border-radius:999px;
    background:#1e293b;
    color:#cbd5e1;
    font-size:10px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.05em;
}
.sidebar-logout{
    width:100%;
    margin-top:10px;
    border:0;
    border-radius:12px;
    padding:9px 10px;
    background:#ef4444;
    color:#fff;
    font-weight:900;
    cursor:pointer;
}
.sidebar-logout:hover{
    background:#dc2626;
}
.topbar{
    justify-content:flex-start;
}
.topbar-left{
    width:100%;
}
@media(max-width:640px){
    .sidebar-user{
        padding:10px;
        border-radius:14px;
    }
    .sidebar-logout{
        min-height:38px;
    }
}

/* =========================
   Sidebar Mobile Fix
   ========================= */

.sidebar{
    display:flex !important;
    flex-direction:column !important;
}

.sidebar-nav{
    display:flex !important;
    flex-direction:column !important;
    gap:6px !important;
    flex:0 0 auto !important;
    align-content:flex-start !important;
}

.sidebar-nav a,
.nav-disabled{
    min-height:40px !important;
    height:auto !important;
    padding:10px 13px !important;
    border-radius:13px !important;
    display:flex !important;
    align-items:center !important;
}

.sidebar-nav a.active{
    min-height:42px !important;
    background:#1e293b !important;
    box-shadow:inset 3px 0 0 #38bdf8 !important;
}

.sidebar-user{
    margin-top:auto !important;
    flex:0 0 auto !important;
}

/* Mobile sidebar compact */
@media(max-width:640px){
    .sidebar{
        width:min(82vw,270px) !important;
        padding:12px !important;
        overflow-y:auto !important;
    }

    .brand{
        min-height:42px !important;
        margin-bottom:14px !important;
        gap:9px !important;
    }

    .brand-icon{
        width:38px !important;
        height:38px !important;
        flex:0 0 38px !important;
        border-radius:13px !important;
        font-size:12px !important;
    }

    .brand-text b{
        font-size:13px !important;
        line-height:1.15 !important;
    }

    .brand-text small{
        font-size:11px !important;
    }

    .sidebar-close{
        width:30px !important;
        height:30px !important;
        border-radius:10px !important;
        font-size:18px !important;
    }

    .sidebar-nav{
        gap:5px !important;
    }

    .sidebar-nav a,
    .nav-disabled{
        min-height:38px !important;
        padding:9px 12px !important;
        font-size:13px !important;
        border-radius:12px !important;
    }

    .sidebar-nav a.active{
        min-height:39px !important;
    }

    .nav-section{
        margin:10px 8px 3px !important;
        font-size:10px !important;
    }

    .sidebar-user{
        margin-top:auto !important;
        padding:10px !important;
        border-radius:14px !important;
    }

    .sidebar-user-info b{
        font-size:12px !important;
    }

    .sidebar-user-info small{
        font-size:11px !important;
    }

    .sidebar-user-info span{
        font-size:9px !important;
        padding:3px 7px !important;
        margin-top:6px !important;
    }

    .sidebar-logout{
        min-height:36px !important;
        padding:8px 10px !important;
        border-radius:11px !important;
        font-size:12px !important;
    }
}

/* Kalau tinggi layar pendek, logout tidak maksa nempel bawah */
@media(max-height:620px){
    .sidebar-user{
        margin-top:14px !important;
    }
}

/* Sidebar reseller clean mode */
.sidebar-user-logout-only{
    background:transparent !important;
    border:0 !important;
    padding:0 !important;
    box-shadow:none !important;
}

.sidebar-user-logout-only form{
    margin:0;
}

.sidebar-user-logout-only .sidebar-logout{
    margin-top:0 !important;
}

@media(max-width:640px){
    .brand{
        align-items:center !important;
    }

    .brand-text b{
        max-width:160px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .brand-text small{
        max-width:160px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }
}

/* Final sidebar layout cleanup */
.sidebar{
    display:flex !important;
    flex-direction:column !important;
    padding:18px !important;
}

.brand{
    flex:0 0 auto !important;
    margin-bottom:16px !important;
}

.sidebar-nav{
    flex:1 1 auto !important;
    display:flex !important;
    flex-direction:column !important;
    gap:5px !important;
    overflow-y:auto !important;
    padding-right:2px !important;
    padding-bottom:14px !important;
}

.sidebar-nav a,
.nav-disabled{
    min-height:40px !important;
    height:auto !important;
    padding:10px 13px !important;
    border-radius:14px !important;
    display:flex !important;
    align-items:center !important;
    font-size:14px !important;
}

.sidebar-nav a.active{
    min-height:40px !important;
    background:#1e293b !important;
    color:#fff !important;
    box-shadow:inset 3px 0 0 #38bdf8 !important;
}

.nav-section{
    flex:0 0 auto !important;
    margin:12px 10px 3px !important;
    color:#64748b !important;
    font-size:10px !important;
    font-weight:900 !important;
    text-transform:uppercase !important;
    letter-spacing:.14em !important;
}

.sidebar-user{
    flex:0 0 auto !important;
    margin-top:12px !important;
}

.sidebar-user-logout-only{
    background:transparent !important;
    border:0 !important;
    padding:0 !important;
    box-shadow:none !important;
}

.sidebar-user-logout-only form{
    margin:0 !important;
}

.sidebar-logout{
    width:100% !important;
    margin-top:0 !important;
}

.topbar{
    justify-content:flex-start !important;
}

.topbar-left{
    width:100% !important;
}

@media(max-width:640px){
    .sidebar{
        width:min(84vw,285px) !important;
        padding:13px !important;
    }

    .brand{
        margin-bottom:14px !important;
    }

    .sidebar-nav{
        gap:5px !important;
        padding-bottom:12px !important;
    }

    .sidebar-nav a,
    .nav-disabled{
        min-height:38px !important;
        padding:9px 12px !important;
        border-radius:12px !important;
        font-size:13px !important;
    }

    .nav-section{
        margin:10px 8px 3px !important;
        font-size:9.5px !important;
    }

    .sidebar-logout{
        min-height:38px !important;
        border-radius:12px !important;
        font-size:12px !important;
    }
}

/* Compact custom pagination */
.pager-box{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:12px 0 10px;
    padding:10px 12px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:14px;
}
.pager-info{
    color:#475569;
    font-size:13px;
}
.pager-info b{
    color:#0f172a;
}
.pager-actions{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
}
.pager-btn,
.pager-num,
.pager-dot{
    min-width:34px;
    height:34px;
    padding:0 10px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    font-size:13px;
    font-weight:800;
    text-decoration:none;
}
.pager-btn,
.pager-num{
    background:#fff;
    color:#0f172a;
    border:1px solid #e2e8f0;
}
.pager-num.active{
    background:#2563eb;
    color:#fff;
    border-color:#2563eb;
}
.pager-btn.disabled{
    opacity:.45;
    cursor:not-allowed;
}
.pager-dot{
    color:#64748b;
}
@media(max-width:640px){
    .pager-box{
        align-items:flex-start;
        flex-direction:column;
        padding:9px;
        margin:10px 0;
    }
    .pager-info{
        font-size:12px;
    }
    .pager-actions{
        width:100%;
        gap:5px;
    }
    .pager-btn,
    .pager-num,
    .pager-dot{
        min-width:30px;
        height:30px;
        padding:0 8px;
        font-size:12px;
        border-radius:9px;
    }
}

/* =========================
   Reseller Dashboard Mobile Compact
   ========================= */

@media(max-width:640px){
    .reseller-dashboard-cards{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:7px !important;
        margin-bottom:10px !important;
    }

    .reseller-dashboard-cards .card,
    .reseller-dashboard-cards .card.money{
        grid-column:auto !important;
        min-height:62px !important;
        padding:8px 8px !important;
        border-radius:13px !important;
    }

    .reseller-dashboard-cards .card small{
        font-size:9px !important;
        line-height:1.15 !important;
        letter-spacing:0 !important;
        white-space:normal !important;
    }

    .reseller-dashboard-cards .card b{
        margin-top:6px !important;
        font-size:17px !important;
        line-height:1 !important;
        word-break:break-word !important;
    }

    .reseller-dashboard-cards .card.money b{
        font-size:16px !important;
    }

    .reseller-dashboard-cards .card small::after{
        content:"" !important;
    }

    .topbar{
        padding-top:6px !important;
        padding-bottom:8px !important;
        margin-bottom:4px !important;
    }

    .topbar h1{
        font-size:19px !important;
        line-height:1.1 !important;
    }

    .topbar p{
        font-size:11.5px !important;
        line-height:1.25 !important;
    }

    .hamburger{
        width:35px !important;
        height:35px !important;
        border-radius:12px !important;
    }
}

@media(max-width:380px){
    .reseller-dashboard-cards{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }

    .reseller-dashboard-cards .card,
    .reseller-dashboard-cards .card.money{
        min-height:60px !important;
    }
}

/* =========================
   Dark Mode
   ========================= */

.theme-toggle{
    flex:0 0 auto;
    width:42px;
    height:42px;
    border:1px solid #e2e8f0;
    border-radius:14px;
    background:#ffffff;
    color:#0f172a;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    cursor:pointer;
    box-shadow:0 8px 22px rgba(15,23,42,.06);
}
.theme-toggle:hover{
    background:#f8fafc;
}

html.dark-mode body{
    background:#0b1220 !important;
    color:#e5e7eb !important;
}

html.dark-mode .main{
    background:#0b1220 !important;
}

html.dark-mode .topbar{
    background:linear-gradient(180deg,#0b1220 88%,rgba(11,18,32,0)) !important;
}

html.dark-mode .topbar h1{
    color:#f8fafc !important;
}

html.dark-mode .topbar p{
    color:#94a3b8 !important;
}

html.dark-mode .theme-toggle{
    background:#111827 !important;
    border-color:#263244 !important;
    color:#f8fafc !important;
    box-shadow:0 8px 22px rgba(0,0,0,.25);
}

html.dark-mode .hamburger{
    background:#111827 !important;
    border-color:#263244 !important;
}

html.dark-mode .hamburger span{
    background:#e5e7eb !important;
}

html.dark-mode .panel,
html.dark-mode .card,
html.dark-mode .summary-box,
html.dark-mode .meta-card{
    background:#111827 !important;
    border-color:#263244 !important;
    color:#e5e7eb !important;
    box-shadow:0 14px 34px rgba(0,0,0,.28) !important;
}

html.dark-mode .panel h2,
html.dark-mode .card b,
html.dark-mode .mini-stat b,
html.dark-mode .summary-card b{
    color:#f8fafc !important;
}

html.dark-mode .panel p,
html.dark-mode .card small,
html.dark-mode .summary-box summary:after,
html.dark-mode .mini-stat small,
html.dark-mode .muted,
html.dark-mode .hint{
    color:#94a3b8 !important;
}

html.dark-mode .summary-box summary{
    color:#f8fafc !important;
}

html.dark-mode .summary-box summary:after{
    background:#1f2937 !important;
}

html.dark-mode .mini-stat{
    background:#0f172a !important;
    border-color:#263244 !important;
    color:#e5e7eb !important;
}

html.dark-mode .mini-stat:hover,
html.dark-mode a.card:hover,
html.dark-mode .card-link:hover{
    background:#172033 !important;
    border-color:#3b82f6 !important;
}

html.dark-mode .filterbar,
html.dark-mode .bulkbar,
html.dark-mode .check-panel,
html.dark-mode .pager-box{
    background:#0f172a !important;
    border-color:#263244 !important;
}

html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea{
    background:#0b1220 !important;
    border-color:#334155 !important;
    color:#f8fafc !important;
}

html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder{
    color:#64748b !important;
}

html.dark-mode label{
    color:#e5e7eb !important;
}

html.dark-mode .table-wrap{
    background:#111827 !important;
    border-color:#263244 !important;
}

html.dark-mode table{
    color:#e5e7eb !important;
}

html.dark-mode thead,
html.dark-mode th{
    background:#0f172a !important;
    color:#cbd5e1 !important;
    border-color:#263244 !important;
}

html.dark-mode td{
    border-color:#263244 !important;
    color:#e5e7eb !important;
}

html.dark-mode tr{
    border-color:#263244 !important;
}

html.dark-mode .table-wrap tr{
    background:#111827;
}

html.dark-mode .empty{
    color:#94a3b8 !important;
}

html.dark-mode .pager-btn,
html.dark-mode .pager-num{
    background:#111827 !important;
    border-color:#263244 !important;
    color:#e5e7eb !important;
}

html.dark-mode .pager-num.active{
    background:#2563eb !important;
    border-color:#2563eb !important;
    color:#fff !important;
}

html.dark-mode .pager-info{
    color:#94a3b8 !important;
}

html.dark-mode .pager-info b{
    color:#f8fafc !important;
}

html.dark-mode .badge.gray{
    background:#1f2937 !important;
    color:#cbd5e1 !important;
}

html.dark-mode .badge.green{
    background:#052e1a !important;
    color:#86efac !important;
}

html.dark-mode .badge.blue{
    background:#172554 !important;
    color:#93c5fd !important;
}

html.dark-mode .badge.red{
    background:#450a0a !important;
    color:#fecaca !important;
}

html.dark-mode .alert.success{
    background:#052e1a !important;
    border-color:#166534 !important;
    color:#bbf7d0 !important;
}

html.dark-mode .alert.danger{
    background:#450a0a !important;
    border-color:#991b1b !important;
    color:#fecaca !important;
}

html.dark-mode .btn.secondary{
    background:#1f2937 !important;
    color:#f8fafc !important;
}

html.dark-mode .btn.secondary:hover{
    background:#334155 !important;
}

html.dark-mode .profile-chip{
    background:#172554 !important;
    color:#bfdbfe !important;
}

html.dark-mode .sidebar-overlay{
    background:rgba(0,0,0,.55) !important;
}

/* Mobile dark table cards */
@media(max-width:640px){
    html.dark-mode .table-wrap tr{
        background:#111827 !important;
        border-color:#263244 !important;
        box-shadow:0 8px 22px rgba(0,0,0,.22) !important;
    }

    html.dark-mode .table-wrap td{
        border-bottom-color:#263244 !important;
    }

    html.dark-mode .table-wrap td::before{
        color:#94a3b8 !important;
    }

    html.dark-mode .topbar{
        background:linear-gradient(180deg,#0b1220 88%,rgba(11,18,32,0)) !important;
    }
}

/* =========================
   Theme Toggle Position Fix
   ========================= */

.topbar{
    position:relative !important;
    padding-right:56px !important;
}

.topbar-left{
    width:100% !important;
    padding-right:0 !important;
}

.theme-toggle{
    position:absolute !important;
    top:10px !important;
    right:12px !important;
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    min-height:36px !important;
    padding:0 !important;
    border-radius:12px !important;
    font-size:16px !important;
    z-index:20 !important;
}

.theme-toggle span{
    line-height:1 !important;
}

@media(max-width:640px){
    .topbar{
        padding-right:54px !important;
        padding-top:8px !important;
        padding-bottom:10px !important;
    }

    .theme-toggle{
        top:9px !important;
        right:10px !important;
        width:34px !important;
        height:34px !important;
        min-width:34px !important;
        min-height:34px !important;
        border-radius:11px !important;
        font-size:15px !important;
    }

    .topbar-left{
        display:grid !important;
        grid-template-columns:38px 1fr !important;
        align-items:start !important;
        gap:9px !important;
        padding-right:0 !important;
    }

    .topbar h1{
        padding-right:4px !important;
    }

    .topbar p{
        padding-right:4px !important;
    }
}

.quick-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    align-items:center;
}
.quick-actions form{
    margin:0;
}

@media(max-width:640px){
    .admin-dashboard-cards{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:7px !important;
    }

    .admin-dashboard-cards .card,
    .admin-dashboard-cards .card.money{
        grid-column:auto !important;
        min-height:64px !important;
        padding:8px 9px !important;
        border-radius:13px !important;
    }

    .admin-dashboard-cards .card small{
        font-size:9.5px !important;
        line-height:1.15 !important;
    }

    .admin-dashboard-cards .card b{
        margin-top:6px !important;
        font-size:17px !important;
        line-height:1 !important;
    }

    .admin-dashboard-cards .card.money b{
        font-size:15px !important;
    }

    .admin-dashboard-cards .card small::after{
        content:"" !important;
    }

    .quick-actions{
        display:grid;
        grid-template-columns:1fr;
    }

    .quick-actions .btn,
    .quick-actions form{
        width:100%;
    }
}