:root{
    --bg-body:#0f1424;
    --bg-panel:#151c30;
    --bg-panel-alt:#1a2238;
    --border-color:#26304a;
    --text-main:#e7ebf5;
    --text-muted:#8b93ac;
    --accent:#6366f1;
    --accent-2:#4f8ef7;
    --radius:14px;
}

*{box-sizing:border-box;}
body{
    background:var(--bg-body);
    color:var(--text-main);
    font-family:"Segoe UI",Roboto,Arial,sans-serif;
    margin:0;
}

/* ---- Login ---- */
.login-body{background:radial-gradient(circle at top, #1a2238, #0f1424);min-height:100vh;display:flex;align-items:center;justify-content:center;}
.login-wrapper{width:100%;max-width:420px;padding:20px;}
.login-card{background:var(--bg-panel);border:1px solid var(--border-color);border-radius:var(--radius);padding:36px;}
.app-brand{color:var(--text-main);font-weight:700;}
.login-body .form-control{background:var(--bg-panel-alt);border-color:var(--border-color);color:var(--text-main);}
.login-body .form-control:focus{background:var(--bg-panel-alt);color:var(--text-main);border-color:var(--accent);box-shadow:0 0 0 .2rem rgba(99,102,241,.25);}
.login-body label{color:var(--text-muted);}

/* ---- Layout ---- */
.app-wrapper{display:flex;min-height:100vh;}
.app-sidebar{
    width:260px;
    background:var(--bg-panel);
    border-right:1px solid var(--border-color);
    padding:20px 14px;
    position:sticky;
    top:0;
    height:100vh;
    overflow-y:auto;
}
.sidebar-brand{display:flex;align-items:center;gap:10px;font-size:1.2rem;font-weight:700;padding:8px 10px 22px;color:var(--text-main);}
.sidebar-brand i{color:var(--accent);font-size:1.4rem;}
.sidebar-heading{font-size:.72rem;text-transform:uppercase;color:var(--text-muted);letter-spacing:.06em;margin:18px 10px 8px;}
.sidebar-nav a{
    display:flex;align-items:center;gap:10px;
    padding:10px 12px;border-radius:10px;
    color:var(--text-muted);text-decoration:none;font-size:.92rem;
    margin-bottom:2px;
}
.sidebar-nav a:hover{background:var(--bg-panel-alt);color:var(--text-main);}
.sidebar-nav a.active{background:var(--accent);color:#fff;}

.app-main{flex:1;display:flex;flex-direction:column;min-width:0;}
.app-topbar{
    display:flex;align-items:center;
    padding:14px 24px;
    border-bottom:1px solid var(--border-color);
    background:var(--bg-panel);
    position:sticky;top:0;z-index:10;
}
.app-content{padding:26px;}

/* ---- Cards / widgets ---- */
.stat-card{
    background:var(--bg-panel);
    border:1px solid var(--border-color);
    border-radius:var(--radius);
    padding:22px;
    position:relative;
    overflow:hidden;
}
.stat-card .stat-label{color:var(--accent-2);font-weight:600;font-size:.85rem;}
.stat-card .stat-value{font-size:1.9rem;font-weight:700;margin-top:6px;}
.stat-card .stat-icon{
    position:absolute;right:18px;bottom:18px;
    width:42px;height:42px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:var(--accent);color:#fff;font-size:1.1rem;
}

.panel-card{
    background:var(--bg-panel);
    border:1px solid var(--border-color);
    border-radius:var(--radius);
    padding:22px;
}

/* ---- Tables ---- */
.table{color:var(--text-main);}
.table thead th{border-bottom:1px solid var(--border-color);color:var(--text-muted);font-weight:600;font-size:.82rem;text-transform:uppercase;}
.table td, .table th{border-color:var(--border-color);vertical-align:middle;}
.table-hover>tbody>tr:hover>*{background:var(--bg-panel-alt);color:var(--text-main);}
.thumb{width:46px;height:46px;object-fit:cover;border-radius:8px;background:var(--bg-panel-alt);}

/* ---- Forms in dark ---- */
.app-content .form-control, .app-content .form-select{
    background:var(--bg-panel-alt);border-color:var(--border-color);color:var(--text-main);
}
.app-content .form-control:focus, .app-content .form-select:focus{
    background:var(--bg-panel-alt);color:var(--text-main);border-color:var(--accent);box-shadow:0 0 0 .2rem rgba(99,102,241,.25);
}
.app-content label{color:var(--text-muted);font-weight:600;font-size:.88rem;}

.btn-icon{color:var(--text-main);}

@media (max-width: 991px){
    .app-sidebar{position:fixed;left:0;top:0;z-index:1050;transform:translateX(-100%);transition:.25s;}
    .app-sidebar.open{transform:translateX(0);}
}