:root{
    --primary:#4b5edb;
    --primary-dark:#2b3592;
    --sidebar-bg:#1a1f3a;
    --sidebar-hover:#2a3060;
    --sidebar-active:#4b5edb;
    --body-bg:#f4f6fb;
    --card-radius:16px;
    --text-muted:#8892a6;
}
[data-theme="dark"]{
    --body-bg:#12162b;
    --sidebar-bg:#0d1024;
    --card-bg:#1c2140;
    --text-color:#e6e8f0;
}
*{font-family:'Cairo',sans-serif}
body{background:var(--body-bg);color:#2b2f42}
[data-theme="dark"] body{background:var(--body-bg);color:var(--text-color)}
[data-theme="dark"] .card, [data-theme="dark"] .app-header{background:var(--card-bg);color:var(--text-color)}

/* ===== Sidebar ===== */
.sidebar{
    width:260px;min-height:100vh;background:var(--sidebar-bg);color:#cfd3ec;
    position:fixed;top:0;right:0;transition:width .25s ease;z-index:1030;overflow-y:auto;
}
.sidebar.collapsed{width:80px}
.sidebar .brand{padding:20px;display:flex;align-items:center;gap:10px;font-weight:800;color:#fff;font-size:18px;border-bottom:1px solid rgba(255,255,255,.08)}
.sidebar .nav-link{color:#aeb3d6;padding:12px 20px;display:flex;align-items:center;gap:12px;border-radius:10px;margin:3px 12px;font-weight:600;font-size:14.5px;transition:.2s}
.sidebar .nav-link i{width:20px;text-align:center}
.sidebar .nav-link:hover{background:var(--sidebar-hover);color:#fff}
.sidebar .nav-link.active{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;box-shadow:0 4px 12px rgba(75,94,219,.4)}
.sidebar.collapsed .nav-text, .sidebar.collapsed .brand-text{display:none}

/* ===== Main content ===== */
.main-content{margin-right:260px;transition:margin .25s ease;min-height:100vh}
.main-content.expanded{margin-right:80px}

/* ===== Topbar ===== */
.app-header{background:#fff;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 2px 10px rgba(0,0,0,.04);position:sticky;top:0;z-index:1020}

/* ===== Stat Cards ===== */
.stat-card{border:none;border-radius:var(--card-radius);padding:20px;color:#fff;position:relative;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.08)}
.stat-card i.bg-icon{position:absolute;left:12px;top:12px;font-size:42px;opacity:.25}
.stat-card h3{font-weight:800;margin-bottom:2px}
.stat-card small{opacity:.85}
.bg-grad-1{background:linear-gradient(135deg,#4b5edb,#2b3592)}
.bg-grad-2{background:linear-gradient(135deg,#22c1a1,#0e8f74)}
.bg-grad-3{background:linear-gradient(135deg,#ff9f43,#e07b0f)}
.bg-grad-4{background:linear-gradient(135deg,#ee5a6f,#c72a45)}
.bg-grad-5{background:linear-gradient(135deg,#7367f0,#4c3fb0)}
.bg-grad-6{background:linear-gradient(135deg,#00b8d9,#0086a8)}

.card{border:none;border-radius:var(--card-radius);box-shadow:0 6px 18px rgba(0,0,0,.05)}
.table thead th{background:#f8f9fd;font-weight:700;font-size:13.5px;color:#5a5f7d;border-bottom:2px solid #eee}
.badge-status-active{background:#e5f9f0;color:#0e8f74;padding:5px 12px;border-radius:20px;font-weight:600}
.badge-status-inactive{background:#fdeaea;color:#c72a45;padding:5px 12px;border-radius:20px;font-weight:600}

.btn-primary-erp{background:linear-gradient(135deg,var(--primary),var(--primary-dark));border:none;color:#fff;border-radius:10px;font-weight:600}
.btn-primary-erp:hover{opacity:.92;color:#fff}

@media(max-width:991px){
    .sidebar{width:80px}
    .sidebar .nav-text,.sidebar .brand-text{display:none}
    .main-content{margin-right:80px}
}