:root{
    --navy:#0f1b3d;
    --blue:#3b6bff;
    --blue-soft:#eaf0ff;
    --text-muted:#8a93a6;
    --bg:#f4f6fb;
    --radius:16px;
}
*{font-family:'Inter',sans-serif;box-sizing:border-box;}
body{background:var(--bg); color:#1f2433; margin:0;}

/* ---------- Sidebar ---------- */
#sidebar{
    width:260px; min-height:100vh; background:var(--navy);
    position:fixed; top:0; left:0; bottom:0; z-index:1030;
    display:flex; flex-direction:column; transition:transform .25s ease;
}
#sidebar .brand{padding:22px 20px;}
#sidebar .brand-logo{max-width:100%; height:auto; display:block; filter:brightness(0) invert(1);}
#sidebar .nav-section-title{
    color:#5f6d99; font-size:10.5px; letter-spacing:1px; font-weight:700;
    padding:16px 20px 6px;
}
#sidebar .nav-link{
    color:#c3cbe6; font-size:14px; font-weight:500; padding:10px 20px;
    display:flex; align-items:center; gap:12px; border-radius:10px; margin:2px 12px;
    text-decoration:none;
}
#sidebar .nav-link i{font-size:17px; width:20px; text-align:center;}
#sidebar .nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}
#sidebar .nav-link.active{background:var(--blue); color:#fff; box-shadow:0 6px 16px rgba(59,107,255,.35);}
#sidebar .nav-parent .chev{font-size:11px; transition:transform .2s ease;}
#sidebar .nav-parent[aria-expanded="true"] .chev{transform:rotate(180deg);}
#sidebar .sub-nav{padding:2px 12px 6px 34px; display:flex; flex-direction:column; gap:1px;}
#sidebar .sub-link{
    color:#9aa4c4; font-size:13px; font-weight:500; padding:8px 14px; border-radius:8px;
    text-decoration:none; display:block;
}
#sidebar .sub-link:hover{background:rgba(255,255,255,.06); color:#fff;}
#sidebar .sb-scroll{overflow-y:auto; max-height:calc(100vh - 180px);}
#sidebar .sb-scroll::-webkit-scrollbar{width:5px;}
#sidebar .sb-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15); border-radius:10px;}
#sidebar .logout-box{padding:16px 20px; margin-top:auto;}
#sidebar .logout-box .nav-link{margin:0; color:#ff8f8f;}
#sidebar .logout-box .nav-link:hover{background:rgba(255,80,80,.1);}

.sb-overlay{display:none; position:fixed; inset:0; background:rgba(6,16,30,.5); z-index:1020; opacity:0; transition:opacity .25s ease;}
.sb-overlay.show{display:block; opacity:1;}

/* ---------- Main / Topbar ---------- */
#main{margin-left:260px; min-height:100vh; display:flex; flex-direction:column;}
#topbar{
    background:#fff; padding:16px 28px; display:flex; align-items:center;
    justify-content:space-between; border-bottom:1px solid #eef0f5; gap:16px; flex-wrap:wrap;
}
#topbar h4{margin:0; font-weight:800; font-size:22px;}
#topbar .welcome{color:var(--text-muted); font-size:13px;}
.icon-btn{
    width:42px; height:42px; border-radius:12px; background:var(--bg); display:flex;
    align-items:center; justify-content:center; position:relative; color:#333; border:0;
}
.user-chip{display:flex; align-items:center; gap:10px;}
.avatar{
    width:42px; height:42px; border-radius:12px; background:var(--blue); color:#fff;
    display:flex; align-items:center; justify-content:center; font-weight:700;
}
.user-chip .name{font-weight:700; font-size:14px; line-height:1.1;}
.user-chip .role{font-size:11.5px; color:var(--text-muted);}

.content{padding:24px 28px 40px;}

/* ---------- Cards ---------- */
.card{border:0; border-radius:var(--radius); box-shadow:0 4px 18px rgba(20,30,60,.05); background:#fff;}
.card-header{background:transparent; border-bottom:0; padding:20px 22px 0;}
.card-header h6{font-weight:800; margin:0; font-size:15px;}
.card-body{padding:18px 22px 22px;}

.stat-card{padding:20px; display:flex; flex-direction:column; gap:14px;}
.stat-card .top{display:flex; align-items:center; justify-content:space-between;}
.stat-icon{width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:20px;}
.stat-card h3{font-weight:800; font-size:26px; margin:2px 0 0;}
.stat-card .label{color:var(--text-muted); font-size:13px; font-weight:600;}
.stat-card .bottom{display:flex; align-items:center; justify-content:space-between;}
.trend-up{color:#16a34a; font-weight:700; font-size:12.5px;}
.trend-down{color:#dc2626; font-weight:700; font-size:12.5px;}
.sparkline{width:90px; height:32px;}

.badge-status{padding:5px 12px; border-radius:20px; font-size:12px; font-weight:700;}
.badge-active{background:#e8f9ee; color:#16a34a;}
.badge-inactive{background:#f1f2f6; color:#6b7280;}
.badge-pending{background:#fff7e6; color:#d97706;}
.badge-danger{background:#fdecec; color:#dc2626;}

table.table-clean{margin:0; width:100%;}
table.table-clean thead th{
    color:var(--text-muted); font-size:11.5px; text-transform:uppercase; letter-spacing:.4px;
    border-bottom:1px solid #eef0f5; font-weight:700; padding-bottom:10px; text-align:left;
}
table.table-clean td{border-bottom:1px solid #f2f3f7; padding:12px 8px; font-size:13.5px; vertical-align:middle;}
table.table-clean tr:last-child td{border-bottom:0;}

.row-icon{width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px;}

.btn-view-all{font-size:12.5px; font-weight:700; color:var(--blue); background:var(--blue-soft); border-radius:10px; padding:6px 14px; border:0; text-decoration:none;}
.btn-primary-soft{background:var(--blue); color:#fff; border:0; border-radius:10px; padding:9px 18px; font-weight:600; font-size:13.5px;}
.btn-primary-soft:hover{background:#2f57e0; color:#fff;}

/* ---------- Toolbar / search ---------- */
.toolbar{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:18px;}
.search-input{background:#fff; border:1px solid #e6e9f2; border-radius:12px; padding:9px 16px; min-width:260px;}

/* ---------- Modal ---------- */
.modal-ov{
    display:none; position:fixed; inset:0; background:rgba(15,27,61,.5); z-index:2000;
    align-items:center; justify-content:center; padding:16px;
}
.modal-ov.show{display:flex;}
.modal-box{background:#fff; border-radius:16px; width:100%; max-width:520px; max-height:90vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.25);}
.modal-box.modal-lg{max-width:760px;}
.modal-hd{padding:18px 22px; border-bottom:1px solid #eef0f5; display:flex; justify-content:space-between; align-items:center;}
.modal-hd h5{margin:0; font-weight:800; font-size:16px;}
.modal-bd{padding:20px 22px;}
.modal-ft{padding:16px 22px; border-top:1px solid #eef0f5; display:flex; justify-content:flex-end; gap:10px;}

/* ---------- Toast ---------- */
#toast{
    position:fixed; top:20px; right:20px; z-index:3000; background:#1f2433; color:#fff;
    padding:12px 20px; border-radius:10px; font-size:13.5px; font-weight:600;
    opacity:0; transform:translateY(-10px); transition:.25s; pointer-events:none;
}
#toast.show{opacity:1; transform:translateY(0);}
#toast.ok{background:#16a34a;}
#toast.err{background:#dc2626;}

/* ---------- Login page ---------- */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--navy),#1c2f66); padding:20px;}
.login-card{background:#fff; border-radius:20px; padding:40px 36px; width:100%; max-width:400px; box-shadow:0 25px 60px rgba(0,0,0,.3);}
.login-card img{max-width:220px; display:block; margin:0 auto 24px;}
.login-card .form-control{border-radius:10px; padding:11px 14px; border:1px solid #e6e9f2;}
.login-card .btn-login{background:var(--blue); color:#fff; border:0; border-radius:10px; padding:12px; font-weight:700; width:100%;}
.login-card .btn-login:hover{background:#2f57e0; color:#fff;}

@media (max-width: 991px){
    #sidebar{transform:translateX(-100%);}
    #sidebar.show{transform:translateX(0);}
    #main{margin-left:0;}
}