/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE  ·  body.dark
   Palette ─────────────────────────────────────────────────────────────────
     Deep bg      #0d1117     Raised/input  #21262d     Accent       #6366f1
     Base card    #161b22     Overlay/hover #2d333b     Accent glow  rgba(99,102,241,.18)
     Border       #30363d     Border-muted  #21262d
     Text primary #e6edf3     Text secondary #c9d1d9    Text muted   #8b949e
     Text subtle  #6b7280     Placeholder   #484f58
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Global transitions ────────────────────────────────────────────────── */
*, *::before, *::after {
    transition-property: background-color, border-color, color, box-shadow;
    transition-duration: 0.22s;
    transition-timing-function: ease;
}
/* Never animate layout or transforms globally */
img, svg, canvas, .dm-thumb, .sub-slide, .cat-sub-toggle i { transition: none !important; }
.dm-thumb { transition: left 0.3s cubic-bezier(0.4,0,0.2,1), background 0.3s ease !important; }

/* ── 2. Page shell ────────────────────────────────────────────────────────── */
body.dark {
    background: #0d1117 !important;
    color: #c9d1d9 !important;
}
body.dark h1, body.dark h2, body.dark h3,
body.dark h4, body.dark h5, body.dark h6 { color: #e6edf3 !important; }

body.dark a { color: #818cf8; text-decoration: none; }
body.dark a:hover { color: #a5b4fc; }

body.dark hr { border-color: #30363d !important; }
body.dark p  { color: #c9d1d9 !important; }

/* ── 3. Header ────────────────────────────────────────────────────────────── */
body.dark #header {
    background: #161b22 !important;
    border-bottom: 1px solid #30363d !important;
    box-shadow: 0 1px 0 #30363d, 0 4px 24px rgba(0,0,0,0.45) !important;
}
body.dark .header-date { color: #6b7280 !important; }
body.dark .logo { background: linear-gradient(135deg,#0d1117 0%,#161b22 100%) !important; }

body.dark .profile a.toggle {
    background: #21262d !important;
    color: #c9d1d9 !important;
    border-radius: 30px;
}
body.dark .profile a.toggle span { color: #c9d1d9 !important; }
body.dark .profile a.toggle .caret { color: #6b7280 !important; }
body.dark .info-menu li.profile a img {
    border: 2px solid #30363d !important;
    border-radius: 50%;
}

/* Notification bell */
body.dark .modern-bell {
    background: #21262d !important;
    border-color: #30363d !important;
    color: #8b949e !important;
}
body.dark .modern-bell:hover {
    background: #2d333b !important;
    color: #e6edf3 !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.4) !important;
}

/* ── 4. Dropdown menus ────────────────────────────────────────────────────── */
body.dark .dropdown-menu {
    background: #21262d !important;
    border: 1px solid #30363d !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px #30363d !important;
    border-radius: 10px !important;
}
body.dark .dropdown-menu > li > a {
    color: #c9d1d9 !important;
    border-bottom: 1px solid #30363d !important;
    padding: 9px 16px !important;
}
body.dark .dropdown-menu > li > a:hover,
body.dark .dropdown-menu > li > a:focus {
    background: #2d333b !important;
    color: #e6edf3 !important;
}
body.dark .dropdown-menu > li:last-child > a { border-bottom: none !important; }
body.dark .dropdown-menu > li > a i { color: #6b7280 !important; }

/* Notification dropdown */
body.dark .notification-menu {
    background: #161b22 !important;
    border-color: #30363d !important;
}
body.dark .notification-header {
    background: #21262d !important;
    border-bottom: 1px solid #30363d !important;
    color: #c9d1d9 !important;
}
body.dark .notification-header strong { color: #e6edf3 !important; }
body.dark .notification-header a { color: #818cf8 !important; }
body.dark .notification-footer {
    background: #21262d !important;
    border-top: 1px solid #30363d !important;
}
body.dark .notification-footer a { color: #818cf8 !important; }
body.dark .notification-item {
    border-bottom: 1px solid #21262d !important;
    color: #c9d1d9 !important;
}
body.dark .notification-item:hover { background: #21262d !important; }
body.dark #notification-list { background: #161b22 !important; }

/* ── 5. Sidebar ───────────────────────────────────────────────────────────── */
body.dark .sidebar {
    background: linear-gradient(180deg, #0d1117 0%, #161b22 60%, #0d1117 100%) !important;
    box-shadow: 2px 0 20px rgba(0,0,0,0.5), 1px 0 0 #21262d !important;
}
body.dark .sidebar ul li { margin: 2px 10px; }
body.dark .sidebar ul li:hover { background: rgba(255,255,255,0.04) !important; }
body.dark .sidebar ul li a { color: #6b7280 !important; }
body.dark .sidebar ul li:hover a { color: #c9d1d9 !important; }
body.dark .sidebar ul li:hover a i { color: #818cf8 !important; }
body.dark ul.submenu { background: rgba(0,0,0,0.2) !important; }
body.dark ul.submenu li a:hover { background: rgba(255,255,255,0.04) !important; }
body.dark .sidebar ul li a.active {
    color: #e6edf3 !important;
    background: linear-gradient(90deg,rgba(99,102,241,0.2) 0%,rgba(99,102,241,0.06) 100%) !important;
    box-shadow: inset 3px 0 0 #6366f1 !important;
}
body.dark .sidebar ul li a.active i { color: #818cf8 !important; }

/* ── 6. Page layout ───────────────────────────────────────────────────────── */
body.dark .page             { background: transparent !important; }
body.dark .container-fluid  { background: transparent !important; }
body.dark .page-title-bar   { border-bottom-color: #30363d !important; }
body.dark .page-title-bar h2 { color: #e6edf3 !important; }
body.dark .page-title-bar p  { color: #6b7280 !important; }
body.dark .ptb-left h2  { color: #e6edf3 !important; }
body.dark .ptb-left p   { color: #6b7280 !important; }

/* ── 7. Bootstrap panels ──────────────────────────────────────────────────── */
body.dark .panel,
body.dark .panel-default {
    background: #161b22 !important;
    border: 1px solid #30363d !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.35) !important;
}
body.dark .panel-default > .panel-heading,
body.dark .panel > .panel-heading {
    background: #21262d !important;
    border-bottom: 2px solid #6366f1 !important;
    color: #c9d1d9 !important;
}
body.dark .ph-title { color: #e6edf3 !important; }
body.dark .ph-flex  { background: #21262d !important; }
body.dark .panel-body {
    background: #161b22 !important;
    color: #c9d1d9 !important;
}
body.dark .panel-info > .panel-heading {
    background: #0c2333 !important;
    border-color: #1e3a5f !important;
    color: #7dd3fc !important;
}
body.dark .panel-info { border-color: #1e3a5f !important; }

/* ── 8. Bootstrap tables ──────────────────────────────────────────────────── */
body.dark .table { color: #c9d1d9 !important; border-color: #30363d !important; }
body.dark .table > thead > tr > th {
    background: #21262d !important;
    color: #8b949e !important;
    border-bottom: 2px solid #30363d !important;
    border-color: #30363d !important;
}
body.dark .table > tbody > tr > td,
body.dark .table > tbody > tr > th {
    color: #c9d1d9 !important;
    border-color: #21262d !important;
}
body.dark .table-bordered,
body.dark .table-bordered > thead > tr > th,
body.dark .table-bordered > tbody > tr > td {
    border-color: #30363d !important;
}
body.dark .table-striped > tbody > tr:nth-of-type(odd) > td {
    background: #13191f !important;
}
body.dark .table-hover > tbody > tr:hover > td {
    background: #21262d !important;
}
body.dark .table-responsive { border-color: #30363d !important; }

/* ── 9. Bootstrap forms ───────────────────────────────────────────────────── */
body.dark .form-control,
body.dark input[type="text"],
body.dark input[type="email"],
body.dark input[type="password"],
body.dark input[type="number"],
body.dark input[type="date"],
body.dark input[type="datetime-local"],
body.dark input[type="search"],
body.dark textarea,
body.dark select {
    background: #21262d !important;
    border: 1.5px solid #30363d !important;
    color: #c9d1d9 !important;
    border-radius: 8px !important;
}
body.dark .form-control:focus,
body.dark input:focus,
body.dark textarea:focus,
body.dark select:focus {
    background: #2d333b !important;
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.18) !important;
    color: #e6edf3 !important;
    outline: none !important;
}
body.dark .form-control::placeholder,
body.dark input::placeholder,
body.dark textarea::placeholder { color: #484f58 !important; opacity: 1 !important; }
body.dark select option { background: #21262d !important; color: #c9d1d9 !important; }
body.dark .input-group-addon {
    background: #21262d !important;
    border-color: #30363d !important;
    color: #8b949e !important;
}
body.dark label,
body.dark .form-group label,
body.dark .control-label { color: #8b949e !important; }

/* ── 10. Bootstrap buttons ────────────────────────────────────────────────── */
body.dark .btn-default {
    background: #21262d !important;
    border-color: #30363d !important;
    color: #c9d1d9 !important;
}
body.dark .btn-default:hover {
    background: #2d333b !important;
    border-color: #484f58 !important;
    color: #e6edf3 !important;
}
body.dark .btn-info {
    background: linear-gradient(135deg,#1d4ed8,#2563eb) !important;
    border-color: #1d4ed8 !important;
    color: #fff !important;
}
body.dark .btn-info:hover {
    background: linear-gradient(135deg,#1e40af,#1d4ed8) !important;
    box-shadow: 0 4px 14px rgba(37,99,235,0.4) !important;
}
body.dark .btn-primary {
    background: linear-gradient(135deg,#4f46e5,#6366f1) !important;
    border-color: #4f46e5 !important;
}
body.dark .btn-primary:hover {
    background: linear-gradient(135deg,#4338ca,#4f46e5) !important;
    box-shadow: 0 4px 14px rgba(99,102,241,0.4) !important;
}
body.dark .btn-success {
    background: linear-gradient(135deg,#15803d,#16a34a) !important;
    border-color: #15803d !important;
}
body.dark .btn-danger {
    background: linear-gradient(135deg,#b91c1c,#dc2626) !important;
    border-color: #b91c1c !important;
}
body.dark .btn-warning {
    background: linear-gradient(135deg,#92400e,#d97706) !important;
    border-color: #92400e !important;
    color: #fff !important;
}

/* ── 11. Alerts ───────────────────────────────────────────────────────────── */
body.dark .alert-success {
    background: #0d2818 !important;
    border-left-color: #166534 !important;
    border-color: #166534 !important;
    color: #86efac !important;
}
body.dark .alert-danger, body.dark .alert-error {
    background: #2a0a0a !important;
    border-left-color: #991b1b !important;
    border-color: #991b1b !important;
    color: #fca5a5 !important;
}
body.dark .alert-warning {
    background: #271a00 !important;
    border-left-color: #92400e !important;
    border-color: #92400e !important;
    color: #fcd34d !important;
}
body.dark .alert-info {
    background: #0a1f35 !important;
    border-left-color: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    color: #93c5fd !important;
}

/* ── 12. Bootstrap labels & badges ───────────────────────────────────────── */
body.dark .label-success { background: #166534 !important; color: #bbf7d0 !important; }
body.dark .label-danger  { background: #7f1d1d !important; color: #fecaca !important; }
body.dark .label-warning { background: #78350f !important; color: #fde68a !important; }
body.dark .label-info    { background: #1e3a5f !important; color: #bae6fd !important; }
body.dark .label-default { background: #2d333b !important; color: #8b949e !important; }
body.dark .badge         { background: #2d333b !important; color: #c9d1d9 !important; }

/* ── 13. List groups ──────────────────────────────────────────────────────── */
body.dark .list-group-item {
    background: #161b22 !important;
    border-color: #30363d !important;
    color: #c9d1d9 !important;
}
body.dark .list-group-item:hover { background: #21262d !important; }
body.dark .list-group-item.active {
    background: #1d2d44 !important;
    border-color: #1d4ed8 !important;
    color: #93c5fd !important;
}

/* ── 14. Login / Register page (auth card) ────────────────────────────────── */
/* The login body has its own indigo gradient — keep that, only fix the card */
body.dark .auth-card {
    background: rgba(22, 27, 34, 0.92) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow:
        0 0 0 1px rgba(99,102,241,0.12),
        0 24px 64px rgba(0,0,0,0.6),
        0 8px 24px rgba(0,0,0,0.4) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
body.dark .auth-card h2     { color: #e6edf3 !important; }
body.dark .auth-card .auth-sub { color: #6b7280 !important; }

body.dark .auth-field label {
    color: #6b7280 !important;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
body.dark .auth-field .form-control {
    background: #21262d !important;
    border: 1.5px solid #30363d !important;
    color: #e6edf3 !important;
    border-radius: 10px !important;
    height: 46px !important;
    font-size: 14px !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3) !important;
}
body.dark .auth-field .form-control:focus {
    border-color: #6366f1 !important;
    background: #2d333b !important;
    box-shadow:
        inset 0 1px 3px rgba(0,0,0,0.2),
        0 0 0 3px rgba(99,102,241,0.22) !important;
    color: #e6edf3 !important;
}
body.dark .auth-field .form-control::placeholder { color: #484f58 !important; }

body.dark .auth-btn {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(99,102,241,0.45), 0 1px 3px rgba(0,0,0,0.3) !important;
    letter-spacing: 0.3px;
}
body.dark .auth-btn:hover {
    background: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%) !important;
    box-shadow: 0 8px 28px rgba(99,102,241,0.55), 0 2px 6px rgba(0,0,0,0.3) !important;
    transform: translateY(-2px);
}
body.dark .auth-btn:active { transform: translateY(0); }

body.dark .auth-footer-link { color: #6b7280 !important; }
body.dark .auth-footer-link a {
    color: #818cf8 !important;
    font-weight: 700;
}
body.dark .auth-footer-link a:hover { color: #a5b4fc !important; text-decoration: underline; }

body.dark .auth-divider { background: #30363d !important; }
body.dark .auth-section-label { color: #484f58 !important; }

/* Auth page alerts */
body.dark .auth-card .alert-danger, body.dark .auth-card .alert-error {
    background: rgba(127,29,29,0.35) !important;
    border-left: 3px solid #ef4444 !important;
    color: #fca5a5 !important;
    border-radius: 8px !important;
}
body.dark .auth-card .alert-success {
    background: rgba(20,83,45,0.35) !important;
    border-left: 3px solid #22c55e !important;
    color: #86efac !important;
    border-radius: 8px !important;
}

/* ── 15. Dashboard cards ──────────────────────────────────────────────────── */
body.dark .dashboard-card {
    background: #161b22 !important;
    border: 1px solid #30363d !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.35) !important;
}
body.dark .dashboard-card:hover {
    box-shadow: 0 12px 40px rgba(0,0,0,0.5) !important;
}
body.dark .card-count { color: inherit !important; }
body.dark .card-label { color: #6b7280 !important; }

/* Specific dashboard card themes — keep icon color, darken bg */
body.dark .theme-users   .card-icon { background: rgba(118,75,162,0.18) !important; }
body.dark .theme-categories .card-icon { background: rgba(0,198,255,0.12) !important; }
body.dark .theme-products .card-icon { background: rgba(255,81,47,0.12) !important; }
body.dark .theme-sales   .card-icon { background: rgba(46,204,113,0.12) !important; }

/* Generic stat/panel-box */
body.dark .panel-value h2 { color: #e6edf3 !important; }
body.dark .panel-value p  { color: #6b7280 !important; }

/* ── 16. Profile cards ────────────────────────────────────────────────────── */
body.dark .profile-card {
    background: #161b22 !important;
    border-color: #30363d !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}
body.dark .profile-info h3 { color: #e6edf3 !important; }
body.dark .profile-info p  { color: #8b949e !important; }
body.dark .profile-stats   { border-top-color: #30363d !important; }
body.dark .profile-img-container { background: #21262d !important; border-color: #30363d !important; }
body.dark .profile-img { border-color: #30363d !important; }

/* ── 17. Hero banners (keep gradients, deepen shadow) ─────────────────────── */
body.dark .lab-hero,
body.dark .cat-hero,
body.dark .u-hero {
    box-shadow: 0 8px 40px rgba(0,0,0,0.6) !important;
}

/* ── 18. Stat / summary cards ─────────────────────────────────────────────── */
body.dark .stat-card,
body.dark .u-stat {
    background: #161b22 !important;
    border-color: #30363d !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3) !important;
}
body.dark .stat-card:hover,
body.dark .u-stat:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,0.5) !important;
}
body.dark .stat-num, body.dark .u-stat-num { color: #e6edf3 !important; }
body.dark .stat-lbl, body.dark .u-stat-lbl { color: #6b7280 !important; }

body.dark .lab-stat-pill {
    background: #161b22 !important;
    border-color: #30363d !important;
}
body.dark .pill-num { color: #e6edf3 !important; }

/* ── 19. Table cards ──────────────────────────────────────────────────────── */
body.dark .tbl-card,
body.dark .table-card,
body.dark .u-card {
    background: #161b22 !important;
    border-color: #30363d !important;
    box-shadow: 0 4px 28px rgba(0,0,0,0.4) !important;
}
body.dark .tbl-card-head,
body.dark .table-card-header,
body.dark .head-active {
    background: #1c2230 !important;
    border-bottom: 1px solid #30363d !important;
}
body.dark .head-pending {
    background: linear-gradient(90deg,#1c1205,#201700) !important;
    border-bottom: 1px solid #78350f !important;
}
body.dark .tbl-card-title,
body.dark .table-card-title { color: #e6edf3 !important; }
body.dark .u-card-head  { background: #1c2230 !important; border-bottom: 1px solid #30363d !important; }
body.dark .u-card-title { color: #e6edf3 !important; }
body.dark .total-badge  { background: #1e2d44 !important; color: #818cf8 !important; }
body.dark .record-count { background: #1e2d44 !important; color: #818cf8 !important; }
body.dark .u-count-badge { background: #1e2d44 !important; color: #818cf8 !important; }

/* ── 20. Custom data tables ───────────────────────────────────────────────── */
body.dark .cat-table,
body.dark .lab-table,
body.dark .u-table { color: #c9d1d9 !important; }

body.dark .cat-table thead tr,
body.dark .lab-table thead tr,
body.dark .u-table thead tr { background: #1c2230 !important; }

body.dark .cat-table thead th,
body.dark .lab-table thead th,
body.dark .u-table thead th {
    color: #6b7280 !important;
    border-bottom: 2px solid #30363d !important;
}
body.dark .cat-table tbody td,
body.dark .lab-table tbody td,
body.dark .u-table tbody td {
    border-bottom: 1px solid #21262d !important;
    color: #c9d1d9 !important;
}
body.dark .cat-table tbody tr:hover > td,
body.dark .lab-table tbody tr:hover td,
body.dark .u-table tbody tr:hover td {
    background: #1c2230 !important;
}
body.dark .group-first td { border-top: 2px solid #30363d !important; }

/* Row highlights */
body.dark .row-ret td,
body.dark .row-returned td { background: #0f1319 !important; }
body.dark .row-ret:hover td,
body.dark .row-returned:hover td { background: #1a1f2b !important; }

/* Returned section separator */
body.dark .sep-row td   { background: transparent !important; }
body.dark .sep-inner,
body.dark .section-sep-inner {
    background: linear-gradient(90deg, #1c0808, #220d0d, #1c0808) !important;
    border-top: 2px solid #7f1d1d !important;
    border-bottom: 2px solid #7f1d1d !important;
}
body.dark .sep-label { color: #f87171 !important; }

/* ── 21. Member / user chips ──────────────────────────────────────────────── */
body.dark .member-name, body.dark .m-name { color: #e6edf3 !important; }
body.dark .m-ret-tag  { color: #f87171 !important; }
body.dark .u-name     { color: #e6edf3 !important; }
body.dark .u-desig    { color: #484f58 !important; }
body.dark .contact-line { color: #8b949e !important; }
body.dark .contact-line i { color: #484f58 !important; }

/* ── 22. Device chips & details ───────────────────────────────────────────── */
body.dark .dev-chip,
body.dark .device-hostname {
    background: #21262d !important;
    border-color: #30363d !important;
    color: #8b949e !important;
}
body.dark .detail-desc,
body.dark .desc-main { color: #c9d1d9 !important; }
body.dark .pid-row {
    background: linear-gradient(90deg,#1a2840,#16213a) !important;
    border-color: #1e3a5f !important;
    color: #818cf8 !important;
}
body.dark .pid-tag {
    background: #1a2840 !important;
    border-color: #1e3a5f !important;
    color: #818cf8 !important;
}

/* ── 23. Date cells ───────────────────────────────────────────────────────── */
body.dark .date-val           { color: #8b949e !important; }
body.dark .date-val.ret-date  { color: #f87171 !important; }
body.dark .date-box           { color: #8b949e !important; }
body.dark .date-box.date-ret  { color: #f87171 !important; }
body.dark .login-time         { color: #8b949e !important; }
body.dark .login-never        { color: #484f58 !important; }

/* ── 24. Status badges (keep green/grey identity, just adjust for dark bg) ── */
body.dark .s-active {
    background: rgba(20,83,45,0.5) !important;
    border-color: #166534 !important;
    color: #86efac !important;
}
body.dark .s-returned {
    background: #21262d !important;
    border-color: #30363d !important;
    color: #6b7280 !important;
}
body.dark .s-pending {
    background: rgba(120,53,15,0.4) !important;
    border-color: #92400e !important;
    color: #fcd34d !important;
}
body.dark .s-deactivated {
    background: rgba(127,29,29,0.4) !important;
    border-color: #991b1b !important;
    color: #fca5a5 !important;
}
body.dark .badge-active {
    background: rgba(20,83,45,0.5) !important;
    color: #86efac !important;
}
body.dark .badge-returned {
    background: #21262d !important;
    color: #6b7280 !important;
}

/* ── 25. Action buttons ───────────────────────────────────────────────────── */
body.dark .action-btn { box-shadow: none !important; }
body.dark .action-btn-blue,  body.dark .act-btn.a-blue,  body.dark .a-blue  {
    background: #1a2840 !important; color: #818cf8 !important;
}
body.dark .action-btn-green, body.dark .act-btn.a-green, body.dark .a-green {
    background: #0d2818 !important; color: #86efac !important;
}
body.dark .action-btn-amber, body.dark .act-btn.a-amber, body.dark .a-amber,
body.dark .act-edit {
    background: #271a00 !important; color: #fbbf24 !important;
}
body.dark .action-btn-red,   body.dark .act-btn.a-red,   body.dark .a-red,
body.dark .act-del {
    background: #2a0a0a !important; color: #f87171 !important;
}
body.dark .act-return { background: #1a2840 !important; color: #818cf8 !important; }
body.dark .act-btn.a-slate, body.dark .a-slate {
    background: #21262d !important; color: #8b949e !important;
}
body.dark .action-btn:hover, body.dark .act-btn:hover { filter: brightness(1.25) !important; }

/* ── 26. Type badges ──────────────────────────────────────────────────────── */
body.dark .type-pill.tp-desktop, body.dark .type-badge.tp-desktop {
    background: #1a2840 !important; color: #818cf8 !important;
}
body.dark .type-pill.tp-laptop, body.dark .type-badge.tp-laptop {
    background: #1e1440 !important; color: #a78bfa !important;
}
body.dark .type-pill.tp-tplink, body.dark .type-badge.tp-tplink {
    background: #0d2818 !important; color: #86efac !important;
}

/* ── 27. Category page ────────────────────────────────────────────────────── */
body.dark .cat-label  { color: #e6edf3 !important; }
body.dark .cat-icon-box { opacity: 0.85; }
body.dark .cat-sub-toggle {
    background: #21262d !important;
    border-color: #30363d !important;
    color: #8b949e !important;
}
body.dark .cat-sub-toggle:hover {
    background: #1a2840 !important;
    border-color: #1e3a5f !important;
    color: #818cf8 !important;
}
body.dark .stock-num { color: #e6edf3 !important; }
body.dark .stock-lbl { color: #6b7280 !important; }
body.dark .stock-bar { background: #21262d !important; }
body.dark .avail-full { background: rgba(20,83,45,0.45) !important; color: #86efac !important; }
body.dark .avail-part { background: rgba(120,53,15,0.4) !important; color: #fcd34d !important; }
body.dark .avail-none { background: rgba(127,29,29,0.4) !important; color: #fca5a5 !important; }
body.dark .row-hidden > td { opacity: 0.3 !important; }

/* Sub-breakdown panel */
body.dark .sub-inner {
    background: linear-gradient(180deg, #13191f 0%, #0f1319 100%) !important;
    border-top: 1px solid #30363d !important;
    border-bottom: 1px solid #30363d !important;
}
body.dark .sub-title { color: #484f58 !important; }
body.dark .sub-chip {
    background: #21262d !important;
    border-color: #30363d !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}
body.dark .sub-chip:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.5) !important;
    border-color: #484f58 !important;
}
body.dark .sub-chip-name  { color: #e6edf3 !important; }
body.dark .sub-chip-meta  { color: #484f58 !important; }
body.dark .sub-avail-lbl  { color: #484f58 !important; }
body.dark .sub-view-btn   { background: #1a2840 !important; color: #818cf8 !important; }
body.dark .sub-view-btn:hover { background: #1e3051 !important; color: #a5b4fc !important; }

/* Category add-form card */
body.dark .form-card {
    background: #161b22 !important;
    border-color: #30363d !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4) !important;
}
body.dark .form-card-body { background: #161b22 !important; }
body.dark .form-label { color: #6b7280 !important; }
body.dark .form-input {
    background: #21262d !important;
    border: 1.5px solid #30363d !important;
    color: #c9d1d9 !important;
}
body.dark .form-input:focus {
    border-color: #6366f1 !important;
    background: #2d333b !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.18) !important;
    color: #e6edf3 !important;
}
body.dark .form-input::placeholder { color: #484f58 !important; }

/* ── 28. Users page ───────────────────────────────────────────────────────── */
body.dark .u-card { border-color: #30363d !important; }
body.dark .u-card[style*="border-color:#fde68a"] { border-color: #78350f !important; }
body.dark .role-badge { opacity: 0.9; }

/* ── 29. Page title bar ───────────────────────────────────────────────────── */
body.dark .ptb-left h2,
body.dark .page-title-bar h2 { color: #e6edf3 !important; }
body.dark .ptb-left p,
body.dark .page-title-bar p  { color: #6b7280 !important; }

/* ── 30. Misc components ──────────────────────────────────────────────────── */
body.dark .well {
    background: #21262d !important;
    border-color: #30363d !important;
    color: #c9d1d9 !important;
}
body.dark .jumbotron {
    background: #161b22 !important;
    color: #c9d1d9 !important;
}
body.dark .thumbnail {
    background: #21262d !important;
    border-color: #30363d !important;
}
body.dark code, body.dark pre {
    background: #21262d !important;
    color: #a78bfa !important;
    border-color: #30363d !important;
}
body.dark blockquote { border-left-color: #6366f1 !important; }
body.dark .text-muted { color: #6b7280 !important; }
body.dark .text-primary { color: #818cf8 !important; }
body.dark .text-success { color: #86efac !important; }
body.dark .text-danger  { color: #f87171 !important; }
body.dark .text-warning { color: #fcd34d !important; }
body.dark .text-info    { color: #93c5fd !important; }

/* Breadcrumb */
body.dark .breadcrumb {
    background: #21262d !important;
    color: #6b7280 !important;
}
body.dark .breadcrumb > li + li::before { color: #484f58 !important; }
body.dark .breadcrumb > .active { color: #c9d1d9 !important; }

/* Pagination */
body.dark .pagination > li > a {
    background: #21262d !important;
    border-color: #30363d !important;
    color: #818cf8 !important;
}
body.dark .pagination > li > a:hover { background: #2d333b !important; color: #a5b4fc !important; }
body.dark .pagination > .active > a  { background: #4f46e5 !important; border-color: #4f46e5 !important; }
body.dark .pagination > .disabled > a { background: #161b22 !important; color: #30363d !important; }

/* Tabs */
body.dark .nav-tabs { border-bottom-color: #30363d !important; }
body.dark .nav-tabs > li > a {
    color: #6b7280 !important;
    border-color: transparent !important;
}
body.dark .nav-tabs > li > a:hover { border-color: #30363d !important; background: #21262d !important; color: #c9d1d9 !important; }
body.dark .nav-tabs > li.active > a {
    background: #161b22 !important;
    border-color: #30363d #30363d #161b22 !important;
    color: #e6edf3 !important;
}
body.dark .tab-content { background: #161b22 !important; border-color: #30363d !important; }

/* Modal */
body.dark .modal-content {
    background: #161b22 !important;
    border-color: #30363d !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.7) !important;
}
body.dark .modal-header {
    background: #21262d !important;
    border-bottom-color: #30363d !important;
    color: #e6edf3 !important;
}
body.dark .modal-header h4 { color: #e6edf3 !important; }
body.dark .modal-footer {
    background: #21262d !important;
    border-top-color: #30363d !important;
}
body.dark .modal-backdrop { background: #000 !important; }
body.dark .close { color: #c9d1d9 !important; opacity: 0.7; text-shadow: none !important; }
body.dark .close:hover { color: #e6edf3 !important; opacity: 1; }

/* ── 31. Dark mode toggle UI ──────────────────────────────────────────────── */
.dm-toggle {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    margin: 0 8px 0 2px;
    vertical-align: middle;
    outline: none;
    line-height: 65px;
    gap: 8px;
}
.dm-track {
    position: relative;
    width: 52px;
    height: 28px;
    background: #e2e8f0;
    border-radius: 14px;
    transition: background 0.3s ease, border-color 0.3s ease !important;
    border: 1.5px solid #cbd5e1;
    flex-shrink: 0;
}
body.dark .dm-track {
    background: #1e3a5f !important;
    border-color: #2563eb !important;
}
.dm-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 6px rgba(0,0,0,0.25);
    transition: left 0.3s cubic-bezier(0.4,0,0.2,1), background 0.3s ease !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #f59e0b;
}
body.dark .dm-thumb {
    left: 27px !important;
    background: #6366f1 !important;
    color: #e0e7ff !important;
    box-shadow: 0 1px 6px rgba(99,102,241,0.5) !important;
}
.dm-label {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    white-space: nowrap;
    user-select: none;
    letter-spacing: 0.3px;
}
body.dark .dm-label { color: #6b7280 !important; }

/* ── 32. Home / User Dashboard (home.php) ─────────────────────────────────── */
body.dark .dash-welcome {
    border-bottom-color: #30363d !important;
}
body.dark .dash-welcome h2 { color: #e6edf3 !important; }
body.dark .dash-welcome p  { color: #8b949e !important; }
body.dark .dash-welcome p strong { color: #c9d1d9 !important; }

body.dark .dash-stat {
    background: #161b22 !important;
    border-color: #30363d !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.35) !important;
}
body.dark .dash-stat:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,0.55) !important;
}
body.dark .dash-stat-body h3 { color: #e6edf3 !important; }
body.dark .dash-stat-body p  { color: #6b7280 !important; }

body.dark .dash-cta-btn {
    background: rgba(255,255,255,0.12) !important;
    color: #e0e7ff !important;
    border: 1px solid rgba(255,255,255,0.2);
}
body.dark .dash-cta-btn:hover {
    background: rgba(255,255,255,0.22) !important;
    color: #fff !important;
}

body.dark .recent-table th {
    background: #1c2230 !important;
    color: #6b7280 !important;
    border-bottom-color: #30363d !important;
}
body.dark .recent-table td {
    color: #c9d1d9 !important;
    border-bottom-color: #21262d !important;
}
body.dark .recent-table tbody tr:hover td { background: #1c2230 !important; }

/* ── 33. My Requests (my_requests.php) ───────────────────────────────────── */
body.dark .my-req-stat {
    background: #161b22 !important;
    border-color: #30363d !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
}
body.dark .my-req-stat .mrs-num { color: #e6edf3 !important; }
body.dark .my-req-stat .mrs-lbl { color: #6b7280 !important; }

/* ── 34. Admin Requests tabs (admin_requests.php) ────────────────────────── */
body.dark .req-tab {
    background: #21262d !important;
    border-color: #30363d !important;
    color: #8b949e !important;
}
body.dark .req-tab:hover {
    border-color: #6366f1 !important;
    color: #818cf8 !important;
    background: #1a2840 !important;
}
body.dark .req-tab.active {
    background: #4f46e5 !important;
    border-color: #4f46e5 !important;
    color: #fff !important;
}
body.dark .req-tab:not(.active) .tab-badge {
    background: #2d333b !important;
    color: #8b949e !important;
}

/* ── 35. Profile page glass card (profile.php) ───────────────────────────── */
body.dark .glass-profile-container {
    background-color: #0d1117 !important;
}
body.dark .glass-shape-1 {
    background: linear-gradient(135deg, rgba(99,102,241,0.4), rgba(139,92,246,0.3)) !important;
    opacity: 0.35 !important;
}
body.dark .glass-shape-2 {
    background: linear-gradient(135deg, rgba(14,165,233,0.35), rgba(99,102,241,0.3)) !important;
    opacity: 0.3 !important;
}

/* ── 36. Bootstrap table-striped (global) ────────────────────────────────── */
body.dark .table-striped > tbody > tr:nth-of-type(odd) > td,
body.dark .table-striped > tbody > tr:nth-of-type(odd) > th {
    background-color: #1c2230 !important;
}
body.dark .table-striped > tbody > tr:nth-of-type(even) > td,
body.dark .table-striped > tbody > tr:nth-of-type(even) > th {
    background-color: #161b22 !important;
}
body.dark .table-bordered { border-color: #30363d !important; }
body.dark .table-bordered > thead > tr > th,
body.dark .table-bordered > tbody > tr > td {
    border-color: #30363d !important;
}
body.dark .table-hover > tbody > tr:hover > td { background: #1c2230 !important; }

/* ── 37. Input group addon ───────────────────────────────────────────────── */
body.dark .input-group-addon {
    background: #21262d !important;
    border-color: #30363d !important;
    color: #8b949e !important;
}

/* ── 38. Action buttons (main.css variants) ──────────────────────────────── */
body.dark .action-btn-blue  { background: rgba(99,102,241,0.15) !important; color: #818cf8 !important; }
body.dark .action-btn-amber { background: rgba(245,158,11,0.15) !important; color: #fbbf24 !important; }
body.dark .action-btn-red   { background: rgba(239,68,68,0.15)  !important; color: #f87171 !important; }
body.dark .action-btn-green { background: rgba(16,185,129,0.15) !important; color: #34d399 !important; }
body.dark .action-btn-blue:hover  { background: #4f46e5 !important; color: #fff !important; }
body.dark .action-btn-amber:hover { background: #f59e0b !important; color: #fff !important; }
body.dark .action-btn-red:hover   { background: #ef4444 !important; color: #fff !important; }
body.dark .action-btn-green:hover { background: #10b981 !important; color: #fff !important; }

/* ── 39. Empty state ─────────────────────────────────────────────────────── */
body.dark .empty-state { color: #6b7280 !important; }
body.dark .empty-state .glyphicon { color: #484f58 !important; }
body.dark .empty-state p { color: #6b7280 !important; }
body.dark .empty-state a { color: #818cf8 !important; }

/* ── 40. Global inline color fixes (hardcoded light colors in HTML) ─────── */
/* These cover the most common inline style colors used across all pages */
body.dark td > strong,
body.dark td strong { color: #c9d1d9 !important; }
body.dark th { color: #8b949e !important; }
body.dark small { color: #6b7280 !important; }
body.dark .form-group small,
body.dark .form-group .help-block { color: #6b7280 !important; }
body.dark label { color: #8b949e !important; }
body.dark .control-label { color: #8b949e !important; }
body.dark .checkbox label,
body.dark .radio label { color: #c9d1d9 !important; }

/* ── 41. Bootstrap form controls ─────────────────────────────────────────── */
body.dark .form-control {
    background: #21262d !important;
    border-color: #30363d !important;
    color: #c9d1d9 !important;
    box-shadow: none !important;
}
body.dark .form-control:focus {
    background: #2d333b !important;
    border-color: #6366f1 !important;
    color: #e6edf3 !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.18) !important;
}
body.dark .form-control::placeholder { color: #484f58 !important; }
body.dark select.form-control option { background: #21262d !important; color: #c9d1d9 !important; }

/* ── 42. Bootstrap buttons (all variants) ────────────────────────────────── */
body.dark .btn-default {
    background: #21262d !important;
    border-color: #30363d !important;
    color: #c9d1d9 !important;
}
body.dark .btn-default:hover {
    background: #2d333b !important;
    border-color: #484f58 !important;
    color: #e6edf3 !important;
}
body.dark .btn-primary {
    background: #4f46e5 !important;
    border-color: #4338ca !important;
}
body.dark .btn-primary:hover { background: #4338ca !important; }
body.dark .btn-info {
    background: #0369a1 !important;
    border-color: #075985 !important;
}
body.dark .btn-info:hover { background: #075985 !important; }
body.dark .btn-success {
    background: #15803d !important;
    border-color: #166534 !important;
}
body.dark .btn-success:hover { background: #166534 !important; }
body.dark .btn-warning {
    background: #b45309 !important;
    border-color: #92400e !important;
    color: #fff !important;
}
body.dark .btn-warning:hover { background: #92400e !important; }
body.dark .btn-danger {
    background: #991b1b !important;
    border-color: #7f1d1d !important;
}
body.dark .btn-danger:hover { background: #7f1d1d !important; }

/* ── 43. Bootstrap labels / badges ───────────────────────────────────────── */
body.dark .label-default { background: #30363d !important; color: #8b949e !important; }
body.dark .label-primary { background: #4f46e5 !important; }
body.dark .label-success { background: #15803d !important; }
body.dark .label-info    { background: #0369a1 !important; }
body.dark .label-warning { background: #b45309 !important; }
body.dark .label-danger  { background: #991b1b !important; }
body.dark .badge { background: #30363d !important; color: #c9d1d9 !important; }

/* ── 44. Bootstrap alerts ────────────────────────────────────────────────── */
body.dark .alert-success {
    background: rgba(20,83,45,0.35) !important;
    border-color: #166534 !important;
    color: #86efac !important;
}
body.dark .alert-info {
    background: rgba(12,35,51,0.5) !important;
    border-color: #1e3a5f !important;
    color: #7dd3fc !important;
}
body.dark .alert-warning {
    background: rgba(120,53,15,0.35) !important;
    border-color: #92400e !important;
    color: #fcd34d !important;
}
body.dark .alert-danger {
    background: rgba(127,29,29,0.35) !important;
    border-color: #991b1b !important;
    color: #fca5a5 !important;
}

/* ── 45. Page title bar & nav pills ──────────────────────────────────────── */
body.dark .nav-pills > li > a {
    color: #8b949e !important;
    background: #21262d !important;
}
body.dark .nav-pills > li.active > a,
body.dark .nav-pills > li.active > a:hover {
    background: #4f46e5 !important;
    color: #fff !important;
}
body.dark .nav-pills > li > a:hover {
    background: #2d333b !important;
    color: #c9d1d9 !important;
}

/* ── 46. Fix hardcoded inline dark text colors in table cells ─────────────
   Many pages use style="color:#1e293b" / #334155 / #475569 inline.
   CSS !important in a stylesheet overrides inline styles.             ── */
body.dark td span[style*="#1e293b"],
body.dark td span[style*="#334155"],
body.dark td span[style*="#475569"],
body.dark td span[style*="#64748b"] { color: #c9d1d9 !important; }

body.dark td strong[style*="#1e293b"],
body.dark td strong[style*="#334155"] { color: #e6edf3 !important; }

body.dark td small[style*="#94a3b8"],
body.dark td small[style*="#64748b"],
body.dark td small[style*="#475569"] { color: #6b7280 !important; }

/* Placeholder dash spans (color:#cbd5e1 on light, needs darkening) */
body.dark td span[style*="#cbd5e1"],
body.dark td span[style*="#e2e8f0"] { color: #30363d !important; }

/* ── 47. Scrollbars in dark mode ──────────────────────────────────────────── */
body.dark ::-webkit-scrollbar { width: 8px; height: 8px; }
body.dark ::-webkit-scrollbar-track { background: #161b22; }
body.dark ::-webkit-scrollbar-thumb { background: #30363d; border-radius: 4px; }
body.dark ::-webkit-scrollbar-thumb:hover { background: #484f58; }

/* ── 48. Page background & body global coverage ───────────────────────────── */
body.dark .page-content,
body.dark .content-wrapper,
body.dark .row { background: transparent !important; }

/* Fix any remaining white backgrounds that bleed through */
body.dark div[style*="background:#fff"],
body.dark div[style*="background: #fff"],
body.dark div[style*="background-color:#fff"],
body.dark div[style*="background-color: #fff"] {
    background: #161b22 !important;
}
body.dark div[style*="background:#f8fafc"],
body.dark div[style*="background:#f1f5f9"],
body.dark div[style*="background:#f4f6f9"] {
    background: #1c2230 !important;
}

/* ── 49. td-actions / action-wrap consistency ─────────────────────────────── */
body.dark .action-wrap { gap: 4px; }
body.dark .td-actions { background: transparent !important; }