/* =============================================================
   DARK MODE — token overrides only.
   Light-mode :root defaults live in style.css.
   ============================================================= */

[data-theme="dark"] {
    /* ── Surface & background ─────────────────────────────────── */
    --bg-primary    : #111214;
    --bg-secondary  : #18191D;
    --bg-tertiary   : #22252C;
    --bg-surface    : #18191D;
    --bg-elevated   : #22252C;
    --wrapper-bg    : #111214;

    /* ── Text ─────────────────────────────────────────────────── */
    --text-primary   : #F0F2F5;
    --text-secondary : #8E97A8;
    --text-muted     : #525A68;
    --text-inverse   : #1A1A1A;

    /* ── Borders ──────────────────────────────────────────────── */
    --border-color  : #2A2D35;
    --border-subtle : #1F2128;

    /* ── Scrollbar (sidebar/nav scroll area) — dark override ───── */
    --scrollbar-thumb       : #3A3F4B;
    --scrollbar-thumb-hover : #525A68;

    /* ── Status — lifted for dark backgrounds ─────────────────── */
    --status-active         : #3B82F6;
    --status-active-bg      : rgba(59, 130, 246, 0.10);
    --status-active-border  : rgba(59, 130, 246, 0.24);
    --status-active-text    : #60A5FA;

    --status-warning        : #F59E0B;
    --status-warning-bg     : rgba(245, 158, 11, 0.10);
    --status-warning-border : rgba(245, 158, 11, 0.28);
    --status-warning-text   : #FBBF24;

    --status-offline        : #6B7280;
    --status-offline-bg     : rgba(107, 114, 128, 0.10);
    --status-offline-border : rgba(107, 114, 128, 0.24);
    --status-offline-text   : #9CA3AF;

    --status-danger         : #EF4444;
    --status-danger-bg      : rgba(239, 68, 68, 0.10);
    --status-danger-border  : rgba(239, 68, 68, 0.24);
    --status-danger-text    : #F87171;

    /* ── Sidebar ──────────────────────────────────────────────── */
    --sidebar-bg            : #13151A;
    --sidebar-text          : #6B7280;
    --sidebar-text-active   : #60A5FA;
    --sidebar-active-bg     : rgba(96, 165, 250, 0.08);
    --sidebar-active-border : #3B82F6;
    --sidebar-section-color : #3D4452;

    /* ── Navbar ───────────────────────────────────────────────── */
    --navbar-bg     : #18191D;
    --navbar-border : #2A2D35;
    --navbar-shadow : 0 1px 3px rgba(0, 0, 0, 0.35);

    /* ── Cards ────────────────────────────────────────────────── */
    --card-bg           : #18191D;
    --card-border       : #2A2D35;
    --card-shadow       : 0 1px 4px rgba(0,0,0,0.28);
    --card-shadow-hover : 0 6px 20px rgba(0,0,0,0.45);

    /* ── Inputs ───────────────────────────────────────────────── */
    --input-bg           : #22252C;
    --input-border       : #363B47;
    --input-focus-border : #3B82F6;
    --input-focus-ring   : rgba(59, 130, 246, 0.15);

    /* ── Chart ────────────────────────────────────────────────── */
    --chart-line : #60A5FA;
    --chart-fill : rgba(96, 165, 250, 0.07);
    --chart-grid : rgba(255, 255, 255, 0.04);

    /* ── Brand adjusted for dark ──────────────────────────────── */
    --brand      : #3B82F6;
    --brand-hover: #2563EB;
    --brand-dim  : rgba(59, 130, 246, 0.10);

    /* ── Overlay ───────────────────────────────────────────────── */
    --overlay-bg : rgba(17, 18, 20, 0.82);

    /* ── Legacy compat ────────────────────────────────────────── */
    --primary-color      : #3B82F6;
    --secondary-color    : #18191D;
    --glass-bg           : rgba(24, 25, 29, 0.98);
    --glass-border       : rgba(255, 255, 255, 0.05);
    --text-color         : #F0F2F5;
    --sidebar-text-color : #F0F2F5;
    --sidebar-text-muted : #6B7280;
}

/* Apply theme variables */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

#wrapper {
    background: var(--wrapper-bg);
    transition: background 0.3s ease;
}

.card {
    background-color: var(--card-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.card-header {
    background-color: var(--card-bg) !important;
    border-bottom-color: var(--border-color);
}

.card-title {
    color: var(--text-primary) !important;
}

.form-control,
.form-select {
    background-color: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--input-border);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--input-bg);
    color: var(--text-primary);
    border-color: #0d6efd;
}

.form-control[readonly] {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
}

.form-control::placeholder {
    color: var(--text-muted);
}

.text-muted {
    color: var(--text-muted) !important;
}

.text-secondary {
    color: var(--text-secondary) !important;
}

.breadcrumb {
    background-color: transparent;
}

.breadcrumb-item a {
    color: var(--text-secondary);
}

.breadcrumb-item.active {
    color: var(--text-primary);
}

.list-group-item {
    background-color: var(--card-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.table {
    color: var(--text-primary);
    background-color: transparent;
}

.table thead {
    background-color: var(--bg-tertiary);
}

.table tbody {
    background-color: transparent;
}

.table tbody tr {
    background-color: transparent;
}

.table-hover tbody tr:hover {
    background-color: var(--bg-tertiary) !important;
}

.table thead th {
    border-bottom-color: var(--border-color);
    color: var(--text-secondary) !important;
    background-color: transparent;
}

.table tbody td {
    background-color: transparent;
}

.table td,
.table th {
    border-top-color: var(--border-color);
    border-bottom-color: var(--border-color);
}

.modal-content {
    background-color: var(--card-bg);
    color: var(--text-primary);
}

.modal-header,
.modal-footer {
    border-color: var(--border-color);
}

.modal-title {
    color: var(--text-primary);
}

/* Sidebar + Navbar dark mode — handled entirely by the ENTERPRISE COMPONENT section below.
   Variables are redefined in [data-theme="dark"] and cascade automatically. */

/* Alert dark mode adjustments */
[data-theme="dark"] .alert-info {
    background-color: #1a3a52;
    border-color: #2a5a82;
    color: #b3d7ff;
}

[data-theme="dark"] .alert-warning {
    background-color: #4a3c1a;
    border-color: #7a6c2a;
    color: #ffd966;
}

[data-theme="dark"] .alert-success {
    background-color: #1a3a2a;
    border-color: #2a5a4a;
    color: #b3ffcc;
}

[data-theme="dark"] .alert-danger {
    background-color: #4a1a1a;
    border-color: #7a2a2a;
    color: #ffb3b3;
}

/* Badge dark mode */
[data-theme="dark"] .badge.bg-light {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* Button dark mode */
[data-theme="dark"] .btn-light {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .btn-light:hover {
    background-color: #495057 !important;
    color: #ffffff !important;
}

/* Force outline buttons to have dark backgrounds */
[data-theme="dark"] .btn-outline-secondary,
[data-theme="dark"] .btn-outline-warning,
[data-theme="dark"] .btn-outline-danger,
[data-theme="dark"] .btn-outline-success,
[data-theme="dark"] .btn-outline-dark,
[data-theme="dark"] .btn-outline-primary {
    background-color: rgba(0, 0, 0, 0.2) !important;
}

/* Search bar dark mode */
[data-theme="dark"] .search-filter-bar {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .search-input {
    background-color: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--input-border);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23adb5bd' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zm-5.242.656a5 5 0 1 1 0-10 5 5 0 0 1 0 10z'/%3E%3C/svg%3E");
}

/* Filter buttons dark mode */
[data-theme="dark"] .filter-btn {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] .filter-btn:hover {
    background-color: #495057;
    color: var(--text-primary);
}

/* Profile info dark mode */
[data-theme="dark"] .profile-info-item {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .info-label {
    color: var(--text-secondary);
}

[data-theme="dark"] .info-value {
    color: var(--text-primary);
}

/* Auto-refresh bar dark mode */
[data-theme="dark"] .auto-refresh-bar {
    background: rgba(25, 135, 84, 0.15);
    border-color: rgba(25, 135, 84, 0.3);
    color: var(--text-secondary);
}

/* Empty state dark mode */
[data-theme="dark"] .empty-state ion-icon {
    color: #495057 !important;
}

/* Organization tree dark mode */
[data-theme="dark"] .org-branch::before,
[data-theme="dark"] .org-branches::before {
    background-color: var(--border-color);
}

/* Input group dark mode */
[data-theme="dark"] .input-group-text {
    background-color: var(--bg-tertiary);
    border-color: var(--input-border);
    color: var(--text-secondary);
}

/* Small text improvements */
[data-theme="dark"] small {
    color: var(--text-secondary);
}

[data-theme="dark"] .small {
    color: var(--text-secondary);
}


/* Font weight improvements for dark mode */
[data-theme="dark"] .fw-bold,
[data-theme="dark"] strong,
[data-theme="dark"] b {
    color: var(--text-primary) !important;
}

/* Headings and important text should be bright */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] .card-title {
    color: #ffffff !important;
}

/* Table text - all white/light */
[data-theme="dark"] .table td {
    color: #e9ecef !important;
}

[data-theme="dark"] .table .fw-bold:not(.text-muted) {
    color: #ffffff !important;
}

/* Specific fixes for dark text in dark mode */
[data-theme="dark"] .font-monospace {
    color: var(--text-secondary);
}

[data-theme="dark"] .bg-light {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .text-dark {
    color: var(--text-primary) !important;
}

/* Stats cards in dark mode - keep gradients but adjust text */
[data-theme="dark"] .stat-card {
    color: #ffffff !important;
}

[data-theme="dark"] .stat-card h6,
[data-theme="dark"] .stat-card h2 {
    color: #ffffff !important;
}

/* Fix navbar language/user dropdowns background */
[data-theme="dark"] .nav-link.dropdown-toggle {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Fix system status badge in navbar */
[data-theme="dark"] .navbar .bg-white {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .navbar .bg-white span {
    color: var(--text-primary) !important;
}

/* Org tree card borders in dark mode */
[data-theme="dark"] .card-body[style*="border-left"],
[data-theme="dark"] .card-body[style*="border-right"] {
    border-color: var(--primary-color) !important;
}

/* Empty state improvements */
[data-theme="dark"] .empty-state h4 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .empty-state p {
    color: var(--text-secondary) !important;
}

/* Improve badge contrast */
[data-theme="dark"] .badge.bg-secondary {
    background-color: #495057 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .badge.bg-primary {
    background-color: #0d6efd !important;
    color: #ffffff !important;
}

/* Fix text in colored cards (Analytics KPIs) */
[data-theme="dark"] .card.border-0.shadow-sm[style*="gradient"] {
    color: #ffffff !important;
}

[data-theme="dark"] .card.border-0.shadow-sm[style*="gradient"] h3,
[data-theme="dark"] .card.border-0.shadow-sm[style*="gradient"] h5,
[data-theme="dark"] .card.border-0.shadow-sm[style*="gradient"] small,
[data-theme="dark"] .card.border-0.shadow-sm[style*="gradient"] .opacity-75 {
    color: #ffffff !important;
}

/* Fix alert banner warnings in dark mode */
[data-theme="dark"] .alert-banner-warning {
    color: #333 !important;
}

[data-theme="dark"] .alert-banner-warning h2,
[data-theme="dark"] .alert-banner-warning p {
    color: #333 !important;
}

/* Fix border colors in RTL for dark mode */
[dir="rtl"][data-theme="dark"] #sidebar-wrapper {
    border-left-color: #495057;
    border-right: none;
}

/* Fix icon colors */
[data-theme="dark"] ion-icon {
    color: inherit;
}

[data-theme="dark"] .text-primary ion-icon {
    color: var(--primary-color) !important;
}

/* Fix card hover in dark mode */
[data-theme="dark"] .card:hover {
    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.4);
}

/* Login page specific fixes */
[data-theme="dark"] .login-card {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .brand-icon {
    color: var(--primary-color) !important;
}

[data-theme="dark"] body[style*="background"] {
    background-color: var(--bg-secondary) !important;
}

/* Fix specific Bootstrap overrides */
[data-theme="dark"] .bg-transparent {
    background-color: transparent !important;
}

[data-theme="dark"] .border-bottom {
    border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] .border {
    border-color: var(--border-color) !important;
}

/* Stat cards - ensure white text always */
[data-theme="dark"] .stat-card * {
    color: #ffffff !important;
}

/* Recent alerts section */
[data-theme="dark"] .card.border-warning {
    border-color: #ffc107 !important;
}

[data-theme="dark"] .card-header.bg-warning {
    background-color: rgba(255, 193, 7, 0.15) !important;
}

/* Fix device icon backgrounds */
[data-theme="dark"] .bg-light {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .bg-light.rounded-circle {
    background-color: rgba(0, 157, 255, 0.15) !important;
}

[data-theme="dark"] .table .bg-light.rounded-circle {
    background-color: rgba(0, 157, 255, 0.15) !important;
    border: 1px solid rgba(0, 157, 255, 0.25) !important;
}

/* Fix icon alignment in tables */
.table td ion-icon {
    vertical-align: middle;
    font-size: 1.2rem;
}

.table .rounded-circle ion-icon {
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Progress bars in dark mode */
[data-theme="dark"] .progress {
    background-color: var(--bg-tertiary);
}

/* Fix any remaining white backgrounds */
[data-theme="dark"] .bg-white:not(.stat-card):not(.stat-card *) {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

/* Fix shadow effects in dark mode */
[data-theme="dark"] .shadow,
[data-theme="dark"] .shadow-sm,
[data-theme="dark"] .shadow-lg {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5) !important;
}

/* Navbar system status in dark mode */
[data-theme="dark"] .navbar .rounded.shadow-sm {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .navbar .rounded.shadow-sm .fw-bold {
    color: var(--text-primary) !important;
}

/* Dropdown menu arrow fix */
[data-theme="dark"] .dropdown-toggle::after {
    border-top-color: var(--text-primary);
}

/* Fix Analytics page card headers */
[data-theme="dark"] .card-header.bg-white {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

/* Force table elements to not have white backgrounds */
[data-theme="dark"] .table,
[data-theme="dark"] .table thead,
[data-theme="dark"] .table tbody,
[data-theme="dark"] .table tr,
[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
    background-color: transparent !important;
}

[data-theme="dark"] .table thead {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Fix all h5, h6 in cards */
[data-theme="dark"] .card h5,
[data-theme="dark"] .card h6 {
    color: var(--text-primary) !important;
}

/* Fix label colors */
[data-theme="dark"] label,
[data-theme="dark"] .form-label {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .form-label.fw-bold {
    color: var(--text-primary) !important;
}

/* Fix breadcrumb better contrast */
[data-theme="dark"] .breadcrumb-item a {
    color: var(--primary-color) !important;
}

/* Better button contrasts */
[data-theme="dark"] .btn-outline-primary {
    color: #66c0ff !important;
    border-color: #009dff !important;
    background-color: rgba(0, 157, 255, 0.1) !important;
}

[data-theme="dark"] .btn-outline-primary:hover {
    background-color: #009dff !important;
    color: #ffffff !important;
    border-color: #009dff !important;
}

[data-theme="dark"] .btn-outline-warning {
    color: #ffc107 !important;
    border-color: #ffc107 !important;
    background-color: rgba(255, 193, 7, 0.1) !important;
}

[data-theme="dark"] .btn-outline-warning:hover {
    background-color: #ffc107 !important;
    color: #1a1a1a !important;
    border-color: #ffc107 !important;
}

[data-theme="dark"] .btn-outline-danger {
    color: #ff6b6b !important;
    border-color: #dc3545 !important;
    background-color: rgba(220, 53, 69, 0.1) !important;
}

[data-theme="dark"] .btn-outline-danger:hover {
    background-color: #dc3545 !important;
    color: #ffffff !important;
    border-color: #dc3545 !important;
}

[data-theme="dark"] .btn-outline-success {
    color: #20c997 !important;
    border-color: #198754 !important;
    background-color: rgba(25, 135, 84, 0.1) !important;
}

[data-theme="dark"] .btn-outline-success:hover {
    background-color: #198754 !important;
    color: #ffffff !important;
    border-color: #198754 !important;
}

[data-theme="dark"] .btn-outline-dark {
    color: #adb5bd !important;
    border-color: #6c757d !important;
    background-color: rgba(108, 117, 125, 0.15) !important;
}

[data-theme="dark"] .btn-outline-dark:hover {
    background-color: #6c757d !important;
    color: #ffffff !important;
    border-color: #6c757d !important;
}

[data-theme="dark"] .btn-outline-secondary {
    color: #adb5bd !important;
    border-color: #6c757d !important;
    background-color: rgba(108, 117, 125, 0.15) !important;
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: #6c757d !important;
    color: #ffffff !important;
    border-color: #6c757d !important;
}

/* Fix glass-bg cards specifically */
[data-theme="dark"] .card[style*="rgba"] {
    background: var(--card-bg) !important;
}

/* Fix organization tree in dark mode */
[data-theme="dark"] .org-branch:last-child::after {
    background-color: var(--bg-secondary);
}

/* Better link colors in dark mode */
[data-theme="dark"] a:not(.btn):not(.dropdown-item):not(.list-group-item):not(.nav-link) {
    color: var(--primary-color);
}

[data-theme="dark"] a:not(.btn):not(.dropdown-item):not(.list-group-item):not(.nav-link):hover {
    color: #66c0ff;
}

/* Fix cursor pointer elements */
[data-theme="dark"] .cursor-pointer {
    color: var(--text-primary);
}

/* Better badge.bg-light in tables */
[data-theme="dark"] .table .badge.bg-light {
    background-color: #3a3a3a !important;
    border-color: #495057 !important;
}

/* Fix button group in forms */
[data-theme="dark"] .input-group-text {
    color: var(--text-secondary) !important;
}

/* Fix table text-muted to be more visible */
[data-theme="dark"] .table .text-muted {
    color: #adb5bd !important;
}

[data-theme="dark"] .table .fw-bold.text-muted {
    color: #ced4da !important;
}

/* Fix icon container in tables */
[data-theme="dark"] .table .bg-light.rounded-circle {
    background-color: rgba(0, 157, 255, 0.15) !important;
    border: 1px solid rgba(0, 157, 255, 0.2);
}

/* Better icon visibility */
[data-theme="dark"] .text-primary ion-icon {
    color: var(--primary-color) !important;
}

/* Fix button icon alignment */
[data-theme="dark"] .btn ion-icon {
    vertical-align: middle;
}

/* Ensure button icons and text inherit proper color */
[data-theme="dark"] .btn-outline-warning,
[data-theme="dark"] .btn-outline-warning * {
    color: #ffc107 !important;
}

[data-theme="dark"] .btn-outline-danger,
[data-theme="dark"] .btn-outline-danger * {
    color: #ff6b6b !important;
}

[data-theme="dark"] .btn-outline-dark,
[data-theme="dark"] .btn-outline-dark * {
    color: #adb5bd !important;
}

[data-theme="dark"] .btn-outline-secondary,
[data-theme="dark"] .btn-outline-secondary * {
    color: #adb5bd !important;
}

[data-theme="dark"] .btn-outline-success,
[data-theme="dark"] .btn-outline-success * {
    color: #20c997 !important;
}

[data-theme="dark"] .btn-outline-primary,
[data-theme="dark"] .btn-outline-primary * {
    color: #66c0ff !important;
}

/* Fix hover state - everything white */
[data-theme="dark"] .btn-outline-warning:hover,
[data-theme="dark"] .btn-outline-warning:hover *,
[data-theme="dark"] .btn-outline-danger:hover,
[data-theme="dark"] .btn-outline-danger:hover *,
[data-theme="dark"] .btn-outline-dark:hover,
[data-theme="dark"] .btn-outline-dark:hover *,
[data-theme="dark"] .btn-outline-secondary:hover,
[data-theme="dark"] .btn-outline-secondary:hover *,
[data-theme="dark"] .btn-outline-success:hover,
[data-theme="dark"] .btn-outline-success:hover *,
[data-theme="dark"] .btn-outline-primary:hover,
[data-theme="dark"] .btn-outline-primary:hover * {
    color: #ffffff !important;
}

/* Exception for warning button on hover (dark text) */
[data-theme="dark"] .btn-outline-warning:hover,
[data-theme="dark"] .btn-outline-warning:hover * {
    color: #1a1a1a !important;
}

/* =============================================================
   ENTERPRISE COMPONENT DARK OVERRIDES
   ============================================================= */

/* ── Sidebar ──────────────────────────────────────────────────── */
[data-theme="dark"] #sidebar-wrapper         { background-color: var(--sidebar-bg); border-right-color: var(--border-color); }
[data-theme="dark"] .sidebar-heading         { color: var(--text-primary) !important; border-bottom-color: var(--border-color) !important; }
[data-theme="dark"] .sidebar-section-label   { color: var(--sidebar-section-color); }
[data-theme="dark"] #sidebar-wrapper .list-group-item                { background-color: transparent; color: var(--sidebar-text); }
[data-theme="dark"] #sidebar-wrapper .list-group-item:hover           { background-color: var(--sidebar-active-bg); color: var(--text-primary); }
[data-theme="dark"] #sidebar-wrapper .list-group-item.active          { background-color: var(--sidebar-active-bg); border-color: var(--sidebar-active-border); color: var(--sidebar-text-active); }

/* ── Navbar ───────────────────────────────────────────────────── */
[data-theme="dark"] .navbar                        { background-color: var(--navbar-bg) !important; border-bottom: 1px solid var(--navbar-border); box-shadow: var(--navbar-shadow); }
[data-theme="dark"] .navbar h2                     { color: var(--text-primary) !important; }
[data-theme="dark"] .nav-link                      { color: var(--text-secondary) !important; }
[data-theme="dark"] .dropdown-menu                 { background-color: var(--bg-elevated); border-color: var(--border-color); }
[data-theme="dark"] .dropdown-item                 { color: var(--text-primary); }
[data-theme="dark"] .dropdown-item:hover           { background-color: var(--bg-tertiary); }
[data-theme="dark"] .dropdown-toggle::after        { border-top-color: var(--text-primary); }
[data-theme="dark"] .nav-link.dropdown-toggle      { background: rgba(255,255,255,0.06) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; }
[data-theme="dark"] .system-status-pill            { background: var(--bg-tertiary); border-color: var(--border-color); color: var(--text-secondary); }

/* ── Cards ────────────────────────────────────────────────────── */
[data-theme="dark"] .card                          { background-color: var(--card-bg); border-color: var(--card-border); box-shadow: var(--card-shadow); }
[data-theme="dark"] .card:hover                    { box-shadow: var(--card-shadow-hover); }
[data-theme="dark"] .card-header                   { background-color: var(--card-bg) !important; border-color: var(--card-border); }
[data-theme="dark"] .card-title, [data-theme="dark"] .card h5, [data-theme="dark"] .card h6 { color: var(--text-primary) !important; }
[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,[data-theme="dark"] h4  { color: var(--text-primary) !important; }

/* ── Enterprise components ────────────────────────────────────── */
[data-theme="dark"] .exec-stat-card              { background: var(--card-bg); border-color: var(--card-border); }
[data-theme="dark"] .exec-stat-card .esc-value   { color: var(--text-primary); }
[data-theme="dark"] .device-status-row           { background: var(--card-bg); border-color: var(--card-border); }
[data-theme="dark"] .device-status-row .dsr-name { color: var(--text-primary); }
[data-theme="dark"] .device-status-row .dsr-icon { background: var(--brand-dim); color: var(--brand); }
[data-theme="dark"] .dm-theme-toggle             { background: var(--bg-tertiary); border-color: var(--border-color); color: var(--text-secondary); }
[data-theme="dark"] .dm-theme-toggle:hover       { background: var(--brand-dim); color: var(--brand); border-color: var(--status-active-border); }
[data-theme="dark"] .dm-toast-item               { background: var(--bg-elevated); border-color: var(--card-border); box-shadow: 0 4px 20px rgba(0,0,0,0.5); }
[data-theme="dark"] .dm-toast-item .toast-body   { color: var(--text-primary); }
[data-theme="dark"] .dm-toast-item .btn-close    { filter: invert(1) grayscale(1); }

/* ── Tables ───────────────────────────────────────────────────── */
[data-theme="dark"] .table,
[data-theme="dark"] .table thead,
[data-theme="dark"] .table tbody,
[data-theme="dark"] .table tr,
[data-theme="dark"] .table td,
[data-theme="dark"] .table th { background-color: transparent !important; }
[data-theme="dark"] .table thead           { background-color: rgba(255,255,255,0.02) !important; }
[data-theme="dark"] .table thead th        { color: var(--text-secondary) !important; border-color: var(--border-color); }
[data-theme="dark"] .table td             { color: var(--text-primary) !important; border-color: var(--border-color); }
[data-theme="dark"] .table-hover tbody tr:hover { background-color: rgba(255,255,255,0.04) !important; }

/* ── Modals ───────────────────────────────────────────────────── */
[data-theme="dark"] .modal-content        { background-color: var(--bg-elevated); color: var(--text-primary); border-color: var(--border-color); }
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer         { border-color: var(--border-color); }


/* ── Inputs ───────────────────────────────────────────────────── */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select          { background-color: var(--input-bg); color: var(--text-primary); border-color: var(--input-border); }
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus    { background-color: var(--input-bg); color: var(--text-primary); border-color: var(--input-focus-border); box-shadow: 0 0 0 3px var(--input-focus-ring); }
[data-theme="dark"] .form-control::placeholder { color: var(--text-muted); }
[data-theme="dark"] .input-group-text    { background-color: var(--bg-tertiary); border-color: var(--input-border); color: var(--text-secondary); }
[data-theme="dark"] label, [data-theme="dark"] .form-label { color: var(--text-secondary) !important; }
[data-theme="dark"] .form-label.fw-bold  { color: var(--text-primary) !important; }

/* ── Buttons ──────────────────────────────────────────────────── */
[data-theme="dark"] .btn-light            { background-color: var(--bg-tertiary) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; }
[data-theme="dark"] .btn-outline-primary  { color: #60A5FA !important; border-color: #3B82F6 !important; background-color: rgba(59,130,246,0.08) !important; }
[data-theme="dark"] .btn-outline-primary:hover { background-color: #3B82F6 !important; color: #fff !important; }
[data-theme="dark"] .btn-outline-secondary { color: #9CA3AF !important; border-color: #6B7280 !important; background-color: rgba(107,114,128,0.10) !important; }
[data-theme="dark"] .btn-outline-secondary:hover { background-color: #6B7280 !important; color: #fff !important; }
[data-theme="dark"] .btn-outline-warning  { color: #FBBF24 !important; border-color: #F59E0B !important; background-color: rgba(245,158,11,0.08) !important; }
[data-theme="dark"] .btn-outline-warning:hover { background-color: #F59E0B !important; color: #1A1A1A !important; }
[data-theme="dark"] .btn-outline-danger   { color: #F87171 !important; border-color: #EF4444 !important; background-color: rgba(239,68,68,0.08) !important; }
[data-theme="dark"] .btn-outline-danger:hover { background-color: #EF4444 !important; color: #fff !important; }
[data-theme="dark"] .btn-outline-success  { color: #34D399 !important; border-color: #10B981 !important; background-color: rgba(16,185,129,0.08) !important; }
[data-theme="dark"] .btn-outline-success:hover { background-color: #10B981 !important; color: #fff !important; }
[data-theme="dark"] .btn-outline-dark     { color: #9CA3AF !important; border-color: #6B7280 !important; background-color: rgba(107,114,128,0.12) !important; }
[data-theme="dark"] .btn-outline-dark:hover { background-color: #6B7280 !important; color: #fff !important; }

/* ── Alerts ───────────────────────────────────────────────────── */
[data-theme="dark"] .alert-info    { background-color:#1E3A5F; border-color:#2A5080; color:#93C5FD; }
[data-theme="dark"] .alert-warning { background-color:#422006; border-color:#78350F; color:#FCD34D; }
[data-theme="dark"] .alert-success { background-color:#14532D; border-color:#166534; color:#6EE7B7; }
[data-theme="dark"] .alert-danger  { background-color:#450A0A; border-color:#7F1D1D; color:#FCA5A5; }

/* ── Misc ─────────────────────────────────────────────────────── */
[data-theme="dark"] .text-muted     { color: var(--text-muted) !important; }
[data-theme="dark"] .text-secondary { color: var(--text-secondary) !important; }
[data-theme="dark"] .border         { border-color: var(--border-color) !important; }
[data-theme="dark"] .border-bottom  { border-bottom-color: var(--border-color) !important; }
[data-theme="dark"] .bg-light       { background-color: var(--bg-tertiary) !important; color: var(--text-primary) !important; }
[data-theme="dark"] .bg-white:not(.stat-card):not(.stat-card *) { background-color: var(--card-bg) !important; color: var(--text-primary) !important; }
[data-theme="dark"] .shadow, [data-theme="dark"] .shadow-sm, [data-theme="dark"] .shadow-lg { box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.45) !important; }
[data-theme="dark"] .progress        { background-color: var(--bg-tertiary); }
[data-theme="dark"] small, [data-theme="dark"] .small { color: var(--text-secondary); }
[data-theme="dark"] ion-icon         { color: inherit; }
[data-theme="dark"] .breadcrumb-item a { color: var(--brand) !important; }
[data-theme="dark"] .search-filter-bar  { background: var(--card-bg); border-color: var(--border-color); }
[data-theme="dark"] .search-input       { background-color: var(--input-bg); color: var(--text-primary); border-color: var(--input-border); }
[data-theme="dark"] .filter-btn         { background-color: var(--bg-tertiary); border-color: var(--border-color); color: var(--text-secondary); }
[data-theme="dark"] .filter-btn:hover   { background-color: var(--bg-elevated); color: var(--text-primary); }
[data-theme="dark"] .org-branch::before,
[data-theme="dark"] .org-branches::before { background-color: var(--border-color); }
[data-theme="dark"] .org-branch:last-child::after { background-color: var(--bg-secondary); }
[data-theme="dark"] .stat-card * { color: #ffffff !important; }


/* Smooth global transitions on theme switch */
*, *::before, *::after {
    transition-property       : background-color, border-color, color, box-shadow;
    transition-duration       : 180ms;
    transition-timing-function: ease;
}
.btn, .card, .list-group-item, .dm-theme-toggle, .device-status-row, .exec-stat-card {
    transition-property: background-color, border-color, color, box-shadow, transform, opacity;
}