:root { --primary: #4f46e5; --bg: #f4f6fb; }
body { background: var(--bg); font-family: 'Segoe UI', system-ui, sans-serif; }
.btn-primary { background: var(--primary); border-color: var(--primary); }

/* Sidebar */
.sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 250px;
    background: linear-gradient(180deg, #1e1b4b, #312e81);
    color: #fff; overflow-y: auto; z-index: 1040; transition: transform .3s ease;
}
.sidebar .brand {
    padding: 22px; display: flex; gap: 12px; align-items: center;
    font-weight: 700; font-size: 1.05rem; border-bottom: 1px solid rgba(255,255,255,.1);
}
.sidebar .brand i { font-size: 1.8rem; color: #facc15; }
.sidebar .brand small { font-weight: 400; opacity: .8; }
.sidebar .menu a {
    display: flex; align-items: center; gap: 12px; padding: 12px 22px;
    color: #c7d2fe; text-decoration: none; transition: .2s;
}
.sidebar .menu a i { width: 20px; text-align: center; }
.sidebar .menu a:hover, .sidebar .menu a.active { background: rgba(255,255,255,.12); color: #fff; }
.sidebar .submenu a { padding-left: 56px; font-size: .92rem; }
.sidebar .logout { margin-top: 10px; border-top: 1px solid rgba(255,255,255,.1); }

/* Main */
.main { margin-left: 250px; min-height: 100vh; }
.topbar {
    background: #fff; padding: 14px 20px; display: flex; align-items: center; gap: 15px;
    box-shadow: 0 1px 6px rgba(0,0,0,.05); position: sticky; top: 0; z-index: 1020;
}
.topbar .user { margin-left: auto; font-weight: 500; }
.overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1030; }

/* Cards */
.card { border: none; border-radius: 14px; box-shadow: 0 4px 18px rgba(0,0,0,.06); }
.stat-card {
    display: flex; align-items: center; gap: 16px; padding: 22px; border-radius: 14px;
    background: #fff; box-shadow: 0 4px 18px rgba(0,0,0,.06);
    text-decoration: none; color: #1f2937; transition: transform .2s, box-shadow .2s; height: 100%;
}
.stat-card:hover { transform: translateY(-4px); box-shadow: 0 10px 25px rgba(0,0,0,.1); }
.stat-card .icon {
    width: 58px; height: 58px; border-radius: 14px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.5rem;
}
.stat-card h3 { font-weight: 700; }

/* Login */
.login-body {
    min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 15px;
    background: linear-gradient(135deg, #312e81, #4f46e5 50%, #7c3aed);
}
.login-card { width: 100%; max-width: 420px; }
.brand-circle {
    width: 70px; height: 70px; border-radius: 50%; background: var(--primary);
    color: #facc15; display: flex; align-items: center; justify-content: center; font-size: 2rem;
}

/* Mobile */
@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.show { transform: translateX(0); }
    .main { margin-left: 0; }
    .overlay.show { display: block; }
}
@media (max-width: 576px) {
    .topbar .user { display: none; }
    .dataTables_wrapper .dataTables_filter input { width: 100%; }
}
@media (max-width: 767.98px) {
    #itemsTable { min-width: 650px; }
    #itemsTable .form-control-sm { min-width: 80px; }
}