/* Dark Mode Overrides
 * (c) Adrian Ranta. All rights reserved. Unauthorised use, reproduction and or distribution is strictly prohibited.
 *
 * This file provides comprehensive dark mode background overrides for ALL elements
 * that set background: white or background: #fff in external CSS files or inline styles.
 *
 * NOTE: !important is used on background-color to override inline styles on HTML elements.
 *       !important is NEVER used on display properties (Rule 2 - breaks JS toggling).
 *
 * Color palette:
 *   #1a1a2e  - body / main content bg
 *   #16213e  - cards, panels, containers (primary surface)
 *   #0f3460  - headers, active states, dividers (secondary surface)
 *   #0d1b3e  - inputs, recessed areas (tertiary surface)
 *   #1a2744  - hover states
 *   #1a3a6e  - borders
 *   #e8e8e8  - primary text
 *   #8899aa  - muted/placeholder text
 *   #4c6ef5  - accent / focus
 */

/* ============================================================
   INLINE STYLE OVERRIDES (index.html elements with style="background: white")
   These MUST use !important to beat inline styles.
   ============================================================ */

/* List container panels - all have inline background: white */
body.dark-mode #assetsList,
body.dark-mode #accountsList,
body.dark-mode #usersList,
body.dark-mode #vendorsList,
body.dark-mode #inventoryList,
body.dark-mode #licensesList,
body.dark-mode #supportAgreementsList,
body.dark-mode #ticketsList,
body.dark-mode #diagramsList,
body.dark-mode #networkContainer {
    background: #16213e !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

/* Dashboard widgets with inline background: #fff */
body.dark-mode #expiringLicensesWidget,
body.dark-mode #lowStockAlertWidget,
body.dark-mode #kpiGaugesWidget,
body.dark-mode #activityFeedWidget {
    background: #16213e !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Network view toggle buttons with inline background: white */
body.dark-mode #networkDiagramBtn,
body.dark-mode #worldMapBtn {
    background: #0d1b3e !important;
    color: #e8e8e8 !important;
    border-color: #1a3a6e !important;
}

/* Expiry badge with inline background */
body.dark-mode .expiry-badge {
    background: #1a2744 !important;
    border-color: #1a3a6e !important;
}

/* Feedback/bug report modal with inline background */
body.dark-mode #feedbackModal > div,
body.dark-mode #bugReportModal > div {
    background: #16213e !important;
}

/* Bulk edit modal inner content */
body.dark-mode #bulkEditModal > div {
    background: #16213e !important;
    color: #e8e8e8;
}


/* ============================================================
   main.css OVERRIDES
   ============================================================ */

/* .stat-card */
body.dark-mode .stat-card {
    background: #16213e !important;
    color: #e8e8e8;
}

/* .dashboard-tile (already in inline CSS, reinforced here) */
body.dark-mode .dashboard-tile {
    background: #16213e !important;
    border-color: #0f3460;
}

/* .assets-list */
body.dark-mode .assets-list {
    background: #16213e !important;
}

/* .network-view */
body.dark-mode .network-view {
    background: #16213e !important;
}

/* .asset-form */
body.dark-mode .asset-form {
    background: #16213e !important;
    color: #e8e8e8;
}

/* Dropdown content / autocomplete */
body.dark-mode .dropdown-content {
    background: #16213e !important;
    border-color: #1a3a6e;
}

/* Filter selects and search inputs */
body.dark-mode .filter-select,
body.dark-mode .filter-search,
body.dark-mode .module-search-input {
    background: #0d1b3e !important;
    color: #e8e8e8;
    border-color: #1a3a6e;
}

/* View toggle buttons */
body.dark-mode .view-toggle-btn,
body.dark-mode .view-btn {
    background: #0d1b3e !important;
    color: #e8e8e8;
    border-color: #1a3a6e;
}
body.dark-mode .view-btn.active,
body.dark-mode .view-toggle-btn.active {
    background: #0f3460 !important;
}

/* Module content area (shared class) */
body.dark-mode .module-content-area {
    background: #16213e !important;
}

/* .user-card */
body.dark-mode .user-card {
    background: #16213e !important;
    border-color: #0f3460;
    color: #e8e8e8;
}

/* .user-list-container */
body.dark-mode .user-list-container {
    background: #16213e !important;
}

/* Assigned assets panel / checklist */
body.dark-mode .assigned-assets-panel,
body.dark-mode .checklist-panel {
    background: #16213e !important;
    color: #e8e8e8;
}

/* Icon picker */
body.dark-mode .icon-picker-content {
    background: #16213e !important;
}
body.dark-mode .icon-option {
    background: #0d1b3e !important;
    color: #e8e8e8;
    border-color: #1a3a6e;
}
body.dark-mode .icon-option:hover {
    background: #0f3460 !important;
}
body.dark-mode .icon-picker-btn {
    background: #0d1b3e !important;
    color: #e8e8e8;
    border-color: #1a3a6e;
}

/* Spend stat card / breakdown */
body.dark-mode .spend-stat-card {
    background: #16213e !important;
    border-color: #0f3460;
    color: #e8e8e8;
}
body.dark-mode .spend-breakdown-table tbody tr:hover {
    background: #1a2744 !important;
}

/* Table rows - THE KEY FIX: regular table rows need dark backgrounds */
body.dark-mode table tbody tr {
    background: #16213e;
    border-color: #0f3460;
}
body.dark-mode table tbody tr:nth-child(even) {
    background: #0d1b3e;
}
body.dark-mode table tbody tr:hover {
    background: #1a2744;
}
body.dark-mode table tbody td {
    color: #e8e8e8;
    border-color: #0f3460;
}

/* Compact list table rows (reinforced) */
body.dark-mode .compact-list-table tbody tr {
    background: #16213e;
    border-color: #0f3460;
}
body.dark-mode .compact-list-table tbody tr:nth-child(even) {
    background: #0d1b3e;
}
body.dark-mode .compact-list-table tbody tr:nth-child(odd) {
    background: #16213e;
}
body.dark-mode .compact-list-table tbody tr:hover {
    background: #1a2744;
}
body.dark-mode .compact-list-table tbody tr.selected {
    background: #0f3460;
}
body.dark-mode .compact-list-table tbody td {
    color: #e8e8e8;
    border-color: #0f3460;
}


/* ============================================================
   components.css OVERRIDES
   ============================================================ */

/* Context menu */
body.dark-mode .context-menu {
    background: #16213e !important;
    border-color: #1a3a6e;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
body.dark-mode .context-menu-item {
    color: #e8e8e8;
}
body.dark-mode .context-menu-item:hover {
    background: #0f3460;
}
body.dark-mode .context-menu-divider {
    border-color: #1a3a6e;
}

/* Accounts list */
body.dark-mode .accounts-list {
    background: #16213e !important;
}

/* Account form wide */
body.dark-mode .account-form-wide {
    background: #16213e !important;
    color: #e8e8e8;
}

/* Contact fields section */
body.dark-mode .contact-fields {
    background: #0d1b3e !important;
    border-color: #1a3a6e;
}

/* Admin container */
body.dark-mode .admin-container {
    background: #16213e !important;
}

/* Vendors container */
body.dark-mode .vendors-container {
    background: #16213e !important;
}
body.dark-mode .vendor-card {
    background: #16213e !important;
    border-color: #0f3460;
}
body.dark-mode .vendors-table-container {
    background: #16213e !important;
}

/* Inventory / Licenses / Tickets containers */
body.dark-mode .inventory-container,
body.dark-mode .licenses-container,
body.dark-mode .tickets-container {
    background: #16213e !important;
}

/* Inventory table container */
body.dark-mode .inventory-table-container {
    background: #16213e !important;
}

/* License card */
body.dark-mode .license-card {
    background: #16213e !important;
    border-color: #0f3460;
    color: #e8e8e8;
}

/* Auth modal */
body.dark-mode .auth-modal {
    background: #16213e !important;
    color: #e8e8e8;
}

/* Modal content (components.css duplicate) */
body.dark-mode .modal-content {
    background: #16213e !important;
    color: #e8e8e8;
    border-color: #0f3460;
}


/* ============================================================
   modals.css OVERRIDES
   ============================================================ */

/* Admin container from modals.css */
body.dark-mode #adminView .admin-container {
    background: #16213e !important;
}

/* Admin tab active state */
body.dark-mode .admin-tab.active {
    background: #16213e !important;
}

/* Config view */
body.dark-mode #configView {
    background: #16213e !important;
    color: #e8e8e8;
}

/* Config tabs active */
body.dark-mode .config-tab.active {
    background: #16213e !important;
}

/* Config section */
body.dark-mode .config-section {
    background: #16213e !important;
    color: #e8e8e8;
}

/* Color picker swatch */
body.dark-mode .color-swatch {
    border-color: #1a3a6e;
}

/* Toggle switch background */
body.dark-mode .toggle-slider {
    background: #0d1b3e;
}

/* Icon picker (modals.css version) */
body.dark-mode .icon-picker-modal .icon-picker-content {
    background: #16213e !important;
}
body.dark-mode .icon-picker-modal .icon-option {
    background: #0d1b3e !important;
    border-color: #1a3a6e;
}


/* ============================================================
   admin.css OVERRIDES
   ============================================================ */

/* Audit table container */
body.dark-mode .audit-table-container {
    background: #16213e !important;
}

/* Pagination button */
body.dark-mode .pagination-btn {
    background: #0d1b3e !important;
    color: #e8e8e8;
    border-color: #1a3a6e;
}
body.dark-mode .pagination-btn:hover {
    background: #0f3460 !important;
}
body.dark-mode .pagination-btn.active {
    background: #4c6ef5 !important;
    color: white;
}

/* Data panels */
body.dark-mode .data-source-panel,
body.dark-mode .hybrid-options-panel,
body.dark-mode .data-migration-panel {
    background: #16213e !important;
    border-color: #0f3460;
}

/* Admin table */
body.dark-mode .admin-table {
    background: #16213e !important;
}
body.dark-mode .admin-table th {
    background: #0f3460 !important;
    color: #e8e8e8;
}
body.dark-mode .admin-table td {
    color: #e8e8e8;
    border-color: #0f3460;
}
body.dark-mode .admin-table tbody tr:hover {
    background: #1a2744;
}


/* ============================================================
   network-diagrams.css OVERRIDES
   ============================================================ */

/* Diagram card */
body.dark-mode .diagram-card {
    background: #16213e !important;
    border-color: #0f3460;
}

/* Diagram editor overlay */
body.dark-mode .diagram-editor-overlay {
    background: #1a1a2e !important;
}

/* Node edit modal */
body.dark-mode .node-edit-modal {
    background: #16213e !important;
    color: #e8e8e8;
    border-color: #0f3460;
}

/* Connection type picker */
body.dark-mode .connection-type-picker {
    background: #16213e !important;
    border-color: #0f3460;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
body.dark-mode .connection-type-btn {
    background: #0d1b3e;
    color: #e8e8e8;
    border-color: #1a3a6e;
}
body.dark-mode .connection-type-btn:hover {
    background: #0f3460;
}

/* Diagram form modal */
body.dark-mode .diagram-form-modal {
    background: #16213e !important;
    color: #e8e8e8;
}

/* Diagram context menu */
body.dark-mode .diagram-context-menu {
    background: #16213e !important;
    border-color: #1a3a6e;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
body.dark-mode .diagram-context-menu-item {
    color: #e8e8e8;
}
body.dark-mode .diagram-context-menu-item:hover {
    background: #0f3460;
}


/* ============================================================
   network.css OVERRIDES
   ============================================================ */

/* Network control buttons */
body.dark-mode .network-control-btn {
    background: #0d1b3e !important;
    color: #e8e8e8;
    border-color: #1a3a6e;
}
body.dark-mode .network-control-btn:hover {
    background: #0f3460 !important;
}

/* Map legend */
body.dark-mode .map-legend,
body.dark-mode .map-legend-panel {
    background: #16213e !important;
    color: #e8e8e8;
    border-color: #1a3a6e;
}

/* Leaflet popup */
body.dark-mode .custom-leaflet-popup .leaflet-popup-content-wrapper {
    background: #16213e !important;
    color: #e8e8e8;
}
body.dark-mode .custom-leaflet-popup .leaflet-popup-tip {
    background: #16213e !important;
}

/* Unmapped assets banner */
body.dark-mode .unmapped-banner {
    background: #16213e !important;
    border-color: #1a3a6e;
    color: #e8e8e8;
}

/* Map search / region selector */
body.dark-mode .map-search-panel,
body.dark-mode .map-region-panel {
    background: #16213e !important;
    color: #e8e8e8;
    border-color: #1a3a6e;
}


/* ============================================================
   ticket-kanban.css OVERRIDES
   ============================================================ */

body.dark-mode .ticket-kanban-card {
    background: #16213e !important;
    border-color: #0f3460;
}


/* ============================================================
   user-styles.css OVERRIDES
   ============================================================ */

body.dark-mode .user-detail-panel {
    background: #16213e !important;
    color: #e8e8e8;
    border-color: #0f3460;
}


/* ============================================================
   user-forms-fix.css OVERRIDES
   Override the !important in user-forms-fix.css
   ============================================================ */

body.dark-mode .user-form-container {
    background: #16213e !important;
}


/* ============================================================
   license-compliance.css OVERRIDES
   ============================================================ */

body.dark-mode .license-compliance-panel,
body.dark-mode .compliance-card,
body.dark-mode .compliance-detail {
    background: #16213e !important;
    color: #e8e8e8;
    border-color: #0f3460;
}


/* ============================================================
   dashboard.css OVERRIDES
   ============================================================ */

body.dark-mode .dashboard-widget {
    background: #16213e !important;
    border-color: #0f3460;
}
body.dark-mode .widget-header {
    color: #e8e8e8;
}
body.dark-mode .widget-body {
    color: #e8e8e8;
    background: #16213e !important;
}


/* ============================================================
   account-form-fix.css OVERRIDES
   ============================================================ */

body.dark-mode .account-form-container {
    background: #16213e !important;
    color: #e8e8e8;
}


/* ============================================================
   global-search.css OVERRIDES
   ============================================================ */

body.dark-mode .global-search-dropdown {
    background: #16213e !important;
    border-color: #0f3460;
}
body.dark-mode .global-search-result {
    color: #e8e8e8;
}
body.dark-mode .global-search-result:hover {
    background: #0f3460;
}
body.dark-mode .global-search-category {
    color: #8899aa;
    border-color: #1a3a6e;
}


/* ============================================================
   GENERIC CATCH-ALL OVERRIDES
   These target common patterns that may not have specific class names.
   ============================================================ */

/* Any element with .setting-card */
body.dark-mode .setting-card {
    background: #16213e !important;
    border-color: #0f3460;
    color: #e8e8e8;
}

/* Form containers generically */
body.dark-mode .form-container,
body.dark-mode .form-panel,
body.dark-mode .form-wrapper {
    background: #16213e !important;
    color: #e8e8e8;
}

/* Detail sections */
body.dark-mode .detail-section {
    background: #0d1b3e !important;
    border-color: #1a3a6e;
}

/* Card variants */
body.dark-mode .card,
body.dark-mode .card-header,
body.dark-mode .card-body,
body.dark-mode .card-footer {
    background: #16213e !important;
    color: #e8e8e8;
    border-color: #0f3460;
}
body.dark-mode .card-header {
    background: #0f3460 !important;
}

/* Tab content areas */
body.dark-mode .tab-content,
body.dark-mode .tab-pane {
    background: #16213e !important;
    color: #e8e8e8;
}

/* Support agreements */
body.dark-mode .support-agreement-card,
body.dark-mode .agreement-detail {
    background: #16213e !important;
    border-color: #0f3460;
    color: #e8e8e8;
}

/* API key generator and similar admin forms */
body.dark-mode .api-key-form,
body.dark-mode .api-key-result {
    background: #16213e !important;
    color: #e8e8e8;
    border-color: #0f3460;
}

/* Disclaimer banners */
body.dark-mode .disclaimer-banner {
    background: #1a2744 !important;
    border-color: #1a3a6e;
    color: #e8e8e8;
}

/* Tooltip and popover backgrounds */
body.dark-mode .tooltip-content,
body.dark-mode .popover-content {
    background: #16213e !important;
    color: #e8e8e8;
    border-color: #1a3a6e;
}

/* Badge variants that should keep colored backgrounds - exclude from dark overrides */
body.dark-mode .badge-warning {
    color: #856404;
}

/* Status pills should keep their semantic colors */
body.dark-mode .status-pill,
body.dark-mode .priority-pill,
body.dark-mode .type-pill {
    /* These keep their own background colors */
}

/* Scrollbar in dark containers */
body.dark-mode ::-webkit-scrollbar {
    width: 8px;
}
body.dark-mode ::-webkit-scrollbar-track {
    background: #0d1b3e;
}
body.dark-mode ::-webkit-scrollbar-thumb {
    background: #1a3a6e;
    border-radius: 4px;
}
body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #2a4a7e;
}

/* Dropdown / select option backgrounds (browser dependent) */
body.dark-mode select option {
    background: #0d1b3e;
    color: #e8e8e8;
}

/* Autocomplete dropdown backgrounds */
body.dark-mode .autocomplete-items,
body.dark-mode .suggestion-list,
body.dark-mode .dropdown-menu {
    background: #16213e !important;
    border-color: #1a3a6e;
}
body.dark-mode .autocomplete-items div:hover,
body.dark-mode .suggestion-item:hover,
body.dark-mode .dropdown-menu li:hover {
    background: #0f3460;
}

/* Leaflet controls in dark mode */
body.dark-mode .leaflet-control-zoom a {
    background: #16213e !important;
    color: #e8e8e8 !important;
    border-color: #1a3a6e !important;
}
body.dark-mode .leaflet-control-zoom a:hover {
    background: #0f3460 !important;
}
body.dark-mode .leaflet-bar {
    border-color: #1a3a6e !important;
}


/* ============================================================
   JS-GENERATED FORM VIEW OVERRIDES
   These form views are created dynamically in JS modules with
   inline background: white styles. Target them by class name.
   ============================================================ */

/* Asset forms (forms.js) */
body.dark-mode .asset-edit-view,
body.dark-mode .asset-new-view,
body.dark-mode .asset-details-view {
    background: #16213e !important;
    color: #e8e8e8;
}

/* License forms (licenseForms.js) */
body.dark-mode .license-form-view {
    background: #16213e !important;
    color: #e8e8e8;
}

/* Vendor forms (vendorForms.js) */
body.dark-mode .vendor-form-view {
    background: #16213e !important;
    color: #e8e8e8;
}

/* Inventory forms (inventoryForms.js) */
body.dark-mode .inventory-form-view {
    background: #16213e !important;
    color: #e8e8e8;
}

/* Support agreement forms (supportAgreementForms.js) */
body.dark-mode .support-agreement-form-view {
    background: #16213e !important;
    color: #e8e8e8;
}

/* Container forms (containerForms.js) */
body.dark-mode .container-form-view {
    background: #16213e !important;
    color: #e8e8e8;
}

/* Edit modal content (app.js icon picker) */
body.dark-mode .edit-modal-content {
    background: #16213e !important;
    color: #e8e8e8;
}

/* Audit log detail modal (auditLogViewer.js) */
body.dark-mode .audit-detail-modal {
    background: #16213e !important;
    color: #e8e8e8;
}

/* Dashboard chart modals (dashboardCharts.js) */
body.dark-mode .chart-modal-content {
    background: #16213e !important;
    color: #e8e8e8;
}

/* World map side panel and modals */
body.dark-mode .world-map-panel {
    background: #16213e !important;
    color: #e8e8e8;
    border-color: #0f3460;
}

/* Support agreement context menu (supportAgreementListView.js) */
body.dark-mode .sa-context-menu {
    background: #16213e !important;
    border-color: #1a3a6e;
}

/* QR code wrapper (assetForms.js) */
body.dark-mode .qr-code-wrapper {
    background: #16213e !important;
    border-color: #1a3a6e;
}

/* Pagination controls (pagination.js) */
body.dark-mode .pagination-container button {
    background: #0d1b3e !important;
    color: #e8e8e8;
    border-color: #1a3a6e;
}
body.dark-mode .pagination-container button:hover {
    background: #0f3460 !important;
}


/* ============================================================
   CATCH-ALL: INLINE STYLE ATTRIBUTE SELECTORS
   Last resort for JS-generated elements with inline backgrounds.
   These use attribute-contains selectors to match inline styles.
   ============================================================ */

body.dark-mode [style*="background: white"],
body.dark-mode [style*="background:white"],
body.dark-mode [style*="background:#fff;"],
body.dark-mode [style*="background: #fff;"],
body.dark-mode [style*="background:#ffffff"],
body.dark-mode [style*="background: #ffffff"] {
    background: #16213e !important;
}

/* ============================================================
   ADDITIONAL OVERRIDES (found during final audit)
   ============================================================ */

/* user-forms-fix.css: .user-form-modal .modal-content has !important */
body.dark-mode .user-form-modal .modal-content {
    background: #16213e !important;
    color: #e8e8e8;
}

/* user-styles.css: .user-context-menu, .user-list-body */
body.dark-mode .user-context-menu {
    background: #16213e !important;
    border-color: #1a3a6e;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
body.dark-mode .user-list-body {
    background: #16213e !important;
}

/* dashboard.css: .dashboard-chart-card, .dashboard-chart-btn */
body.dark-mode .dashboard-chart-card {
    background: #16213e !important;
    border-color: #0f3460;
    color: #e8e8e8;
}
body.dark-mode .dashboard-chart-btn {
    background: #0d1b3e !important;
    color: #e8e8e8;
    border-color: #1a3a6e;
}

/* license-compliance.css: .compliance-card, .cost-card, .cost-section */
body.dark-mode .compliance-card {
    background: #16213e !important;
    border-color: #0f3460;
    color: #e8e8e8;
}
body.dark-mode .cost-card {
    background: #16213e !important;
    border-color: #0f3460;
    color: #e8e8e8;
}
body.dark-mode .cost-section {
    background: #16213e !important;
    border-color: #0f3460;
}

/* account-form-fix.css: .account-tab-content table */
body.dark-mode .account-tab-content table {
    background: #16213e !important;
}

/* ticket-kanban.css: .kanban-card */
body.dark-mode .kanban-card {
    background: #16213e !important;
    border-color: #0f3460;
    color: #e8e8e8;
}


/* ============================================================
   SECOND PASS: COMPREHENSIVE REMAINING WHITE/LIGHT BACKGROUNDS
   (c) Adrian Ranta. All rights reserved.
   ============================================================ */

/* --- BODY & STRUCTURAL LAYOUT --- */

/* body background */
body.dark-mode {
    background: #1a1a2e !important;
}

/* .app-container (#f0f2f5) */
body.dark-mode .app-container {
    background: #1a1a2e !important;
}

/* .left-pane (#f8f9fa) */
body.dark-mode .left-pane {
    background: #16213e !important;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
}

/* .main-container (#f5f5f5) */
body.dark-mode .main-container {
    background: #1a1a2e !important;
}

/* Left pane dropdown toggle (#f8f9fa) */
body.dark-mode .left-pane .dropdown-toggle {
    background: #0d1b3e !important;
    color: #e8e8e8;
    border-color: #1a3a6e;
}


/* --- NAVIGATION & DROPDOWNS --- */

/* Nav dropdown (white) */
body.dark-mode .nav-dropdown {
    background: #16213e !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

/* Nav menu item hover (#f5f5f5) */
body.dark-mode .nav-menu-item:hover {
    background: #1a2744 !important;
}
body.dark-mode .nav-menu-item {
    color: #e8e8e8;
}

/* Breadcrumb path segments */
body.dark-mode .breadcrumb-seg { color: rgba(232,232,232,0.7); }
body.dark-mode .breadcrumb-seg:hover, body.dark-mode .breadcrumb-seg.active { color: #e8e8e8; }
body.dark-mode .breadcrumb-sep { color: rgba(232,232,232,0.5); }

/* User dropdown (white) */
body.dark-mode .user-dropdown {
    background: #16213e !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}
body.dark-mode .user-dropdown-item {
    color: #e8e8e8;
}
body.dark-mode .user-dropdown-item:hover {
    background: #1a2744 !important;
}
body.dark-mode .user-dropdown-divider {
    background: #1a3a6e;
}


/* --- DASHBOARD & TILES --- */

/* Tile icon background (#f8f9fa) */
body.dark-mode .tile-icon {
    background: #0d1b3e !important;
}

/* Dashboard tile text */
body.dark-mode .dashboard-tile {
    color: #e8e8e8;
}

/* Device item (#f9f9f9) */
body.dark-mode .device-item {
    background: #0d1b3e !important;
    color: #e8e8e8;
}

/* Quick action buttons (dashboard.css #fff) */
body.dark-mode .quick-action-btn {
    background: #0d1b3e !important;
    color: #e8e8e8;
    border-color: #1a3a6e;
}
body.dark-mode .quick-action-btn:hover {
    background: #1a2744 !important;
    border-color: #2a4a7e;
    color: #e8e8e8;
}

/* Bar chart track (#f1f5f9) */
body.dark-mode .bar-chart-track {
    background: #0d1b3e !important;
}


/* --- ASSET FILTERS & LIST HEADERS --- */

/* Asset filters bar (#f8f9fa) */
body.dark-mode .asset-filters-bar {
    background: #0d1b3e !important;
}

/* Asset filters bar config tab (white) */
body.dark-mode .asset-filters-bar .config-tab {
    background: #0d1b3e !important;
    color: #e8e8e8;
    border-color: #1a3a6e;
}
body.dark-mode .asset-filters-bar .config-tab:hover:not(.active) {
    background: #1a2744 !important;
}
body.dark-mode .asset-filters-bar .config-tab.active {
    background: #0f3460 !important;
    color: #e8e8e8;
}

/* Asset filters bar filter-select override */
body.dark-mode .asset-filters-bar .filter-select {
    background: #0d1b3e !important;
    color: #e8e8e8;
    border-color: #1a3a6e;
}

/* View toggle button hover (#f3f4f6) */
body.dark-mode .view-toggle-btn:hover {
    background: #1a2744 !important;
}

/* Asset list header (#f8f9fa) */
body.dark-mode .asset-list-header {
    background: #0f3460 !important;
    color: #e8e8e8;
    border-color: #1a3a6e;
}

/* Asset list item hover (#f8f9fa) */
body.dark-mode .asset-list-item:hover {
    background: #1a2744 !important;
}

/* Asset list item selected (#e8f4f8) */
body.dark-mode .asset-list-item.selected {
    background: #0f3460 !important;
    border-left-color: #4c6ef5;
}

/* Asset list item text */
body.dark-mode .asset-list-item {
    border-color: #0f3460;
}


/* --- TABLE HEADERS (all #f8f9fa headers) --- */

/* Generic table headers */
body.dark-mode table thead th,
body.dark-mode table thead {
    background: #0f3460 !important;
    color: #e8e8e8;
    border-color: #1a3a6e;
}

/* Compact list table headers */
body.dark-mode .compact-list-table thead th {
    background: #0f3460 !important;
    color: #e8e8e8;
    border-color: #1a3a6e;
}

/* Vendors table th */
body.dark-mode .vendors-table th {
    background: #0f3460 !important;
    color: #e8e8e8;
    border-color: #1a3a6e;
}

/* Spend breakdown table th (#f0f2f5) */
body.dark-mode .spend-breakdown-table th {
    background: #0f3460 !important;
    color: #e8e8e8;
    border-color: #1a3a6e;
}

/* Spend breakdown table td text */
body.dark-mode .spend-breakdown-table td {
    color: #e8e8e8;
    border-color: #0f3460;
}

/* Account tab content table thead (#f8f9fa) */
body.dark-mode .account-tab-content table thead {
    background: #0f3460 !important;
}
body.dark-mode .account-tab-content table th {
    background: #0f3460 !important;
    color: #e8e8e8;
}
body.dark-mode .account-tab-content table td {
    color: #e8e8e8;
    border-color: #0f3460;
}
body.dark-mode .account-tab-content table tbody tr:hover {
    background: #1a2744 !important;
}

/* Admin table thead (#f8f9fa) */
body.dark-mode .admin-table thead {
    background: #0f3460 !important;
}


/* --- USER LIST VIEWS --- */

/* User list header (#f8f9fa) */
body.dark-mode .user-list-header {
    background: #0f3460 !important;
    color: #e8e8e8;
    border-color: #1a3a6e;
}

/* User list item hover (#f9fafb from user-styles.css) */
body.dark-mode .user-list-item:hover {
    background-color: #1a2744 !important;
    box-shadow: none;
}

/* User list item text color */
body.dark-mode .user-list-item {
    color: #e8e8e8;
    border-color: #0f3460;
}

/* User meta department badge (#f3f4f6) */
body.dark-mode .user-meta .department {
    background: #0d1b3e !important;
    color: #8899aa;
}


/* --- CONFIG & ADMIN VIEWS --- */

/* Config list with icons (white) */
body.dark-mode .config-list-with-icons {
    background: #0d1b3e !important;
    border-color: #1a3a6e;
    color: #e8e8e8;
}

/* Admin tabs bar (#fafbfc) */
body.dark-mode .admin-tabs {
    background: #0d1b3e !important;
    border-color: #1a3a6e;
}

/* Admin tab hover (#f0f2f5) */
body.dark-mode .admin-tab:hover:not(.active) {
    background: #1a2744 !important;
    color: #e8e8e8;
}
body.dark-mode .admin-tab {
    color: #8899aa;
}
body.dark-mode .admin-tab.active {
    color: #4c6ef5;
}

/* Config tabs bar (#fafbfc) */
body.dark-mode .config-tabs {
    background: #0d1b3e !important;
    border-color: #1a3a6e;
}

/* Config tab hover (#f0f2f5) */
body.dark-mode .config-tab:hover:not(.active) {
    background: #1a2744 !important;
    color: #e8e8e8;
}
body.dark-mode .config-tab {
    color: #8899aa;
}

/* Field config item (white) */
body.dark-mode .field-config-item {
    background: #0d1b3e !important;
    border-color: #1a3a6e;
    color: #e8e8e8;
}
body.dark-mode .field-config-item.disabled {
    background: #0d1b3e !important;
    opacity: 0.5;
}

/* Status group (#f8f9fa) */
body.dark-mode .status-group {
    background: #0d1b3e !important;
    color: #e8e8e8;
}

/* Connection status panel (white) */
body.dark-mode .connection-status-panel {
    background: #16213e !important;
    border-color: #0f3460;
    color: #e8e8e8;
}

/* Account tabs bar (#f8f9fa in account-form-fix.css) */
body.dark-mode .account-tabs {
    background: #0d1b3e !important;
    border-color: #1a3a6e;
}
body.dark-mode .account-tab {
    color: #8899aa;
}
body.dark-mode .account-tab.active {
    color: #4c6ef5;
    background: #16213e !important;
}
body.dark-mode .account-tab:hover:not(.active) {
    background: #1a2744 !important;
    color: #e8e8e8;
}

/* Field value display (#f8f9fa) */
body.dark-mode .field-value-display {
    background: #0d1b3e !important;
    color: #e8e8e8;
    border-color: #1a3a6e;
}


/* --- NETWORK & MAPS --- */

/* Network breadcrumb (#f8f9fa) */
body.dark-mode .network-breadcrumb {
    background: #0d1b3e !important;
    border-color: #1a3a6e;
    color: #e8e8e8;
}

/* #network canvas background (#fafafa) */
body.dark-mode #network {
    background: #1a1a2e !important;
}

/* World map background (#f0f0f0) */
body.dark-mode #worldMap {
    background: #1a1a2e !important;
}

/* Network legend (white) */
body.dark-mode .network-legend {
    background: #16213e !important;
    border-color: #1a3a6e;
    color: #e8e8e8;
}

/* Map info panel (white) */
body.dark-mode .map-info-panel {
    background: #16213e !important;
    border-color: #1a3a6e;
    color: #e8e8e8;
}


/* --- NETWORK DIAGRAMS --- */

/* Diagram canvas background (#f8f9fa) */
body.dark-mode .diagram-canvas {
    background: #1a1a2e !important;
}

/* Cancel buttons in diagram forms (#f1f5f9) */
body.dark-mode .node-edit-modal .form-actions .btn-cancel {
    background: #0d1b3e !important;
    color: #e8e8e8;
    border-color: #1a3a6e;
}
body.dark-mode .node-edit-modal .form-actions .btn-cancel:hover {
    background: #1a2744 !important;
}
body.dark-mode .diagram-form-actions .btn-cancel {
    background: #0d1b3e !important;
    color: #e8e8e8;
    border-color: #1a3a6e;
}
body.dark-mode .diagram-form-actions .btn-cancel:hover {
    background: #1a2744 !important;
}

/* Connection type option hover (#f1f5f9) */
body.dark-mode .connection-type-option:hover {
    background: #1a2744 !important;
}
body.dark-mode .connection-type-option {
    color: #e8e8e8;
}

/* Diagram inputs */
body.dark-mode .node-edit-modal .form-group input,
body.dark-mode .node-edit-modal .form-group select {
    background: #0d1b3e !important;
    color: #e8e8e8;
    border-color: #1a3a6e;
}
body.dark-mode .diagram-form-group input,
body.dark-mode .diagram-form-group textarea,
body.dark-mode .diagram-form-group select {
    background: #0d1b3e !important;
    color: #e8e8e8;
    border-color: #1a3a6e;
}


/* --- TICKET KANBAN --- */

/* Kanban column background (#f4f5f7) */
body.dark-mode .kanban-column {
    background: #0d1b3e !important;
}

/* Kanban column headers - keep semantic colors but darken */
body.dark-mode .kanban-column-header {
    border-color: #1a3a6e;
}

/* Ticket view toggle button (#f8f9fa) */
body.dark-mode .ticket-view-toggle .toggle-btn {
    background: #0d1b3e !important;
    color: #e8e8e8;
}
body.dark-mode .ticket-view-toggle .toggle-btn:hover {
    background: #1a2744 !important;
}

/* Time tracking section (#f8f9fa) */
body.dark-mode .time-tracking-section {
    background: #0d1b3e !important;
    border-color: #1a3a6e;
    color: #e8e8e8;
}


/* --- VENDOR, INVENTORY & LICENSE ROWS --- */

/* Vendor row hover (#f8f9fa) and selected (#f0f2ff) */
body.dark-mode .vendor-row:hover {
    background: #1a2744 !important;
}
body.dark-mode .vendor-row.selected {
    background: #0f3460 !important;
}
body.dark-mode .vendor-row {
    color: #e8e8e8;
}

/* Inventory row selected (#f0f2ff) */
body.dark-mode .inventory-row.selected {
    background: #0f3460 !important;
}

/* License row hover (#f8f9fa) and selected (#f0f2ff) */
body.dark-mode .license-row:hover {
    background: #1a2744 !important;
}
body.dark-mode .license-row.selected {
    background: #0f3460 !important;
}

/* Ticket row hover (#f8f9fa) and selected (#f0f2ff) */
body.dark-mode .ticket-row:hover {
    background: #1a2744 !important;
}
body.dark-mode .ticket-row.selected {
    background: #0f3460 !important;
}


/* --- FORM ELEMENTS (recessed/info areas) --- */

/* Form section (#f8f9fa) */
body.dark-mode .form-section {
    background: #0d1b3e !important;
    border-color: #1a3a6e;
    color: #e8e8e8;
}
body.dark-mode .form-section h3 {
    color: #e8e8e8;
}

/* Contact section (#f8f9fa) */
body.dark-mode .contact-section {
    background: #0d1b3e !important;
    color: #e8e8e8;
}

/* Contact display section (#f8f9fa) */
body.dark-mode .contact-display-section {
    background: #0d1b3e !important;
    color: #e8e8e8;
}

/* Labels display (#f8f9fa) */
body.dark-mode .labels-display {
    background: #0d1b3e !important;
}

/* Label/connection containers (#f9f9f9) */
body.dark-mode .label-container,
body.dark-mode .connection-container {
    background: #0d1b3e !important;
    border-color: #1a3a6e;
}

/* Ticket description (#f8f9fa) */
body.dark-mode .ticket-description {
    background: #0d1b3e !important;
    color: #8899aa;
}

/* Stock and cost info sections (#f8f9fa) */
body.dark-mode .stock-info,
body.dark-mode .cost-info {
    background: #0d1b3e !important;
    color: #e8e8e8;
}

/* Item category, agreement type, license type badges (#f8f9fa) */
body.dark-mode .item-category,
body.dark-mode .agreement-type,
body.dark-mode .license-type {
    background: #0d1b3e !important;
    color: #8899aa;
}

/* Dropdown item hover (#f5f5f5 from components.css) */
body.dark-mode .dropdown-item:hover {
    background-color: #1a2744 !important;
}
body.dark-mode .dropdown-item {
    color: #e8e8e8;
}


/* --- LICENSE COMPLIANCE --- */

/* License view toggle button (#f8f9fa) */
body.dark-mode .license-view-toggle .toggle-btn {
    background: #0d1b3e !important;
    color: #e8e8e8;
}
body.dark-mode .license-view-toggle .toggle-btn:hover {
    background: #1a2744 !important;
}
body.dark-mode .license-view-toggle .toggle-btn.active {
    background: #667eea !important;
    color: #fff;
}

/* Compliance table th (#f8fafc) and hover */
body.dark-mode .compliance-table th,
body.dark-mode .cost-analysis-table th {
    background: #0f3460 !important;
    color: #e8e8e8;
    border-color: #1a3a6e;
}
body.dark-mode .compliance-table tr:hover,
body.dark-mode .cost-analysis-table tr:hover {
    background: #1a2744 !important;
}
body.dark-mode .compliance-table td,
body.dark-mode .cost-analysis-table td {
    color: #e8e8e8;
    border-color: #0f3460;
}

/* Renewal bucket (#f8fafc) */
body.dark-mode .renewal-bucket {
    background: #0d1b3e !important;
    border-color: #1a3a6e;
    color: #e8e8e8;
}

/* Cost bar track (#f1f5f9) */
body.dark-mode .cost-bar-track {
    background: #0d1b3e !important;
}


/* --- BUTTONS --- */

/* Secondary button (#f5f5f5) */
body.dark-mode .btn-secondary {
    background: #0d1b3e !important;
    color: #e8e8e8;
    border-color: #1a3a6e;
}
body.dark-mode .btn-secondary:hover {
    background: #1a2744 !important;
    border-color: #2a4a7e;
}

/* Bulk edit cancel button */
body.dark-mode #bulkEditCancelBtn {
    background: #0d1b3e !important;
    color: #e8e8e8;
}


/* --- GENERIC FORM INPUTS --- */

/* All form inputs, selects, textareas in dark mode */
body.dark-mode .form-group input,
body.dark-mode .form-group select,
body.dark-mode .form-group textarea,
body.dark-mode .form-control,
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode input[type="number"],
body.dark-mode input[type="date"],
body.dark-mode input[type="datetime-local"],
body.dark-mode input[type="url"],
body.dark-mode input[type="tel"],
body.dark-mode input[type="search"],
body.dark-mode textarea,
body.dark-mode select {
    background: #0d1b3e !important;
    color: #e8e8e8;
    border-color: #1a3a6e;
}
body.dark-mode .form-group input::placeholder,
body.dark-mode .form-control::placeholder,
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: #8899aa;
}
body.dark-mode .form-group input:focus,
body.dark-mode .form-group select:focus,
body.dark-mode .form-group textarea:focus,
body.dark-mode .form-control:focus {
    border-color: #4c6ef5;
    box-shadow: 0 0 10px rgba(76, 110, 245, 0.2);
}

/* Auth form inputs */
body.dark-mode .auth-form input {
    background: #0d1b3e !important;
    color: #e8e8e8;
    border-color: #1a3a6e;
}

/* Inline selects in bulk edit modal */
body.dark-mode #bulkEditStatus {
    background: #0d1b3e !important;
    color: #e8e8e8;
    border-color: #1a3a6e;
}


/* --- GLOBAL SEARCH --- */

/* Global search hint kbd (#f0f0f0) */
body.dark-mode .global-search-hint kbd {
    background: #0d1b3e !important;
    color: #e8e8e8;
    border-color: #1a3a6e;
}

/* Global search input */
body.dark-mode .global-search-input {
    background: #0d1b3e !important;
    color: #e8e8e8;
    border-color: #1a3a6e;
}


/* --- TEXT COLOR OVERRIDES --- */

/* Ensure label text is readable */
body.dark-mode .form-group label {
    color: #e8e8e8;
}

/* General text colors that were dark/black */
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
    color: #e8e8e8;
}

/* Muted text */
body.dark-mode .text-muted,
body.dark-mode small,
body.dark-mode .field-description,
body.dark-mode .field-name {
    color: #8899aa;
}
body.dark-mode .field-name {
    color: #c0c8d4;
}

/* Links in dark mode */
body.dark-mode a {
    color: #6b8aff;
}
body.dark-mode a:hover {
    color: #8ba8ff;
}


/* --- BORDER OVERRIDES --- */

/* Generic border overrides for elements that use light borders */
body.dark-mode .form-group input,
body.dark-mode .form-group select,
body.dark-mode .form-group textarea {
    border-color: #1a3a6e;
}

/* Context menu separator */
body.dark-mode .context-menu-separator {
    background-color: #1a3a6e;
}


/* ============================================================
   NUCLEAR CATCH-ALL: BROAD SELECTORS
   These ensure ANY remaining white/light backgrounds are caught.
   Placed last for lowest priority (only applies if nothing else matches).
   ============================================================ */

/* Catch remaining inline #fff backgrounds */
body.dark-mode [style*="background:#fff"],
body.dark-mode [style*="background: #fff"],
body.dark-mode [style*="background: white"],
body.dark-mode [style*="background:white"],
body.dark-mode [style*="background:#ffffff"],
body.dark-mode [style*="background: #ffffff"],
body.dark-mode [style*="background: #fafafa"],
body.dark-mode [style*="background:#fafafa"],
body.dark-mode [style*="background: #f5f5f5"],
body.dark-mode [style*="background:#f5f5f5"],
body.dark-mode [style*="background: #f8f9fa"],
body.dark-mode [style*="background:#f8f9fa"],
body.dark-mode [style*="background: #f0f0f0"],
body.dark-mode [style*="background:#f0f0f0"],
body.dark-mode [style*="background: #f9f9f9"],
body.dark-mode [style*="background:#f9f9f9"],
body.dark-mode [style*="background: #f0f2f5"],
body.dark-mode [style*="background:#f0f2f5"] {
    background: #16213e !important;
}

/* Catch inline backgroundColor assignments from JS via attribute selectors */
body.dark-mode [style*="background-color: white"],
body.dark-mode [style*="background-color:white"],
body.dark-mode [style*="background-color: #fff"],
body.dark-mode [style*="background-color:#fff"],
body.dark-mode [style*="background-color: #ffffff"],
body.dark-mode [style*="background-color:#ffffff"],
body.dark-mode [style*="background-color: #f5f5f5"],
body.dark-mode [style*="background-color:#f5f5f5"],
body.dark-mode [style*="background-color: #f8f9fa"],
body.dark-mode [style*="background-color:#f8f9fa"],
body.dark-mode [style*="background-color: #f0f0f0"],
body.dark-mode [style*="background-color:#f0f0f0"] {
    background-color: #16213e !important;
}

/* Catch hover inline backgrounds set by JS (context menus, list items) */
body.dark-mode [style*="background: #f7fafc"],
body.dark-mode [style*="background:#f7fafc"],
body.dark-mode [style*="background: #f1f5f9"],
body.dark-mode [style*="background:#f1f5f9"],
body.dark-mode [style*="background: #eff6ff"],
body.dark-mode [style*="background:#eff6ff"],
body.dark-mode [style*="background: #f8fafc"],
body.dark-mode [style*="background:#f8fafc"] {
    background: #1a2744 !important;
}


/* ============================================================
   SECOND PASS: REMAINING SELECTORS (26 additional overrides)
   (c) Adrian Ranta. All rights reserved.
   ============================================================ */

/* admin.css: .audit-filters (#f8f9fa) */
body.dark-mode .audit-filters {
    background: #0d1b3e !important;
    color: #e8e8e8;
}

/* admin.css: .data-card (#f8f9fa) */
body.dark-mode .data-card {
    background: #0d1b3e !important;
    border-color: #1a3a6e;
    color: #e8e8e8;
}

/* admin.css: .connectivity-status (#f8f9fa) */
body.dark-mode .connectivity-status {
    background: #0d1b3e !important;
    color: #e8e8e8;
}

/* admin.css: .radio-option (#f8f9fa) */
body.dark-mode .radio-option {
    background: #0d1b3e !important;
    border-color: #1a3a6e;
    color: #e8e8e8;
}
body.dark-mode .radio-option:hover {
    border-color: #4c6ef5;
}

/* admin.css: .admin-form-card (#f8f9fa) */
body.dark-mode .admin-form-card {
    background: #0d1b3e !important;
    border-color: #1a3a6e;
    color: #e8e8e8;
}

/* admin.css: .perm-matrix (#f8f9fa) */
body.dark-mode .perm-matrix {
    background: #0d1b3e !important;
    border-color: #1a3a6e;
    color: #e8e8e8;
}

/* modals.css: .logo-preview (#f8f9fa) */
body.dark-mode .logo-preview {
    background: #0d1b3e !important;
    border-color: #1a3a6e;
    color: #8899aa;
}

/* admin.css: .changes-table th (#f8f9fa) */
body.dark-mode .changes-table th {
    background: #0f3460 !important;
    color: #e8e8e8;
}
body.dark-mode .changes-table td {
    color: #e8e8e8;
    border-color: #0f3460;
}

/* admin.css: .audit-table tbody tr:hover (#f8f9fa) */
body.dark-mode .audit-table tbody tr:hover {
    background: #1a2744 !important;
}

/* admin.css: .audit-table thead (#f8f9fa) */
body.dark-mode .audit-table thead {
    background: #0f3460 !important;
}
body.dark-mode .audit-table th {
    background: #0f3460 !important;
    color: #e8e8e8;
}
body.dark-mode .audit-table td {
    color: #e8e8e8;
    border-color: #0f3460;
}

/* network-diagrams.css: #diagramEditorView (white) */
body.dark-mode #diagramEditorView {
    background: #1a1a2e !important;
}

/* ticket-kanban.css: inactive kanban column header (#f5f5f5) */
body.dark-mode .kanban-column[data-status="inactive"] .kanban-column-header {
    background: #0d1b3e !important;
    color: #8899aa !important;
}

/* components.css: .connections-container (#f9f9f9) */
body.dark-mode .connections-container {
    background: #0d1b3e !important;
    border-color: #1a3a6e;
}

/* components.css: .inventory-table th (#f8f9fa) */
body.dark-mode .inventory-table th {
    background: #0f3460 !important;
    color: #e8e8e8;
    border-color: #1a3a6e;
}

/* components.css: .inventory-row:hover (#f8f9fa) */
body.dark-mode .inventory-row:hover {
    background: #1a2744 !important;
}

/* components.css: .license-usage, .license-financial (#f8f9fa) */
body.dark-mode .license-usage,
body.dark-mode .license-financial {
    background: #0d1b3e !important;
    color: #e8e8e8;
}

/* components.css: .btn-tertiary:hover (#f8f9fa) */
body.dark-mode .btn-tertiary {
    color: #e8e8e8;
    border-color: #1a3a6e;
}
body.dark-mode .btn-tertiary:hover {
    background: #1a2744 !important;
    color: #e8e8e8;
}

/* components.css: .status-closed (#f8f9fa) */
body.dark-mode .status-closed {
    background: #0d1b3e !important;
    color: #8899aa;
}

/* main.css: .config-type-item (#f8f9fa) */
body.dark-mode .config-type-item {
    background: #0d1b3e !important;
    color: #e8e8e8;
}
body.dark-mode .config-type-item:hover {
    background: #1a2744 !important;
}

/* main.css: .config-item (#f8f9fa) */
body.dark-mode .config-item {
    background: #0d1b3e !important;
    color: #e8e8e8;
}

/* main.css: .config-hint (#f8f9fa) */
body.dark-mode .config-hint {
    background: #0d1b3e !important;
    color: #8899aa;
}

/* main.css: .icon-picker-close:hover (#f8f9fa) */
body.dark-mode .icon-picker-close:hover {
    background: #1a2744 !important;
    color: #e8e8e8;
}

/* main.css: .icon-upload-section (#f8f9fa) */
body.dark-mode .icon-upload-section {
    background: #0d1b3e !important;
    border-color: #1a3a6e;
    color: #e8e8e8;
}

/* main.css: .vendor-spend-panel (#f8f9fa) */
body.dark-mode .vendor-spend-panel {
    background: #0d1b3e !important;
    border-color: #1a3a6e;
    color: #e8e8e8;
}

/* user-styles.css: .badge-secondary (#f3f4f6) */
body.dark-mode .badge-secondary {
    background-color: #0d1b3e !important;
    color: #8899aa;
}

/* modals.css: .config-list (#f8f9fa) */
body.dark-mode .config-list {
    background: #0d1b3e !important;
    border-color: #1a3a6e;
}

/* network-diagrams.css: .diagram-context-menu-item:hover (#f1f5f9) */
body.dark-mode .diagram-context-menu-item:hover {
    background: #1a2744 !important;
}

/* user-styles.css: .user-list-header (#f9fafb) - explicit override */
body.dark-mode .user-list-header {
    background: #0f3460 !important;
    color: #e8e8e8;
    border-color: #1a3a6e;
}


/* ============================================================
   STATUS BADGES, PILLS & INDICATORS -- DARK MODE MUTED OVERRIDES
   (c) Adrian Ranta. All rights reserved.
   Unauthorised use, reproduction and or distribution is strictly prohibited.

   These overrides mute the bright/vivid status colors in dark mode
   to semi-transparent, low-saturation variants that preserve the
   semantic hue without clashing with the dark theme.

   Color approach:
     Green  (active/open/good)   -> rgba(76,175,80,0.20)  text #66bb6a  border rgba(76,175,80,0.30)
     Red    (inactive/closed/bad)-> rgba(244,67,54,0.20)   text #ef9a9a  border rgba(244,67,54,0.30)
     Amber  (warning/pending)    -> rgba(255,152,0,0.20)   text #ffb74d  border rgba(255,152,0,0.30)
     Blue   (info/progress)      -> rgba(33,150,243,0.20)  text #64b5f6  border rgba(33,150,243,0.30)
     Purple (in-progress)        -> rgba(156,39,176,0.20)  text #ce93d8  border rgba(156,39,176,0.30)
     Grey   (neutral/unknown)    -> rgba(158,158,158,0.20) text #bdbdbd  border rgba(158,158,158,0.30)
     Teal   (planning/storage)   -> rgba(0,150,136,0.20)   text #80cbc4  border rgba(0,150,136,0.30)
     Deep red (critical/escalated)-> rgba(211,47,47,0.25)  text #ef5350  border rgba(211,47,47,0.35)
   ============================================================ */


/* ----- ASSET LIST: .status-indicator (main.css) ----- */

body.dark-mode .status-indicator.status-active,
body.dark-mode .status-indicator.status-online,
body.dark-mode .status-indicator.status-in-use,
body.dark-mode .status-indicator.status-deployed {
    background: rgba(76, 175, 80, 0.20) !important;
    color: #66bb6a;
    border: 1px solid rgba(76, 175, 80, 0.30);
}

body.dark-mode .status-indicator.status-inactive,
body.dark-mode .status-indicator.status-offline,
body.dark-mode .status-indicator.status-retired {
    background: rgba(244, 67, 54, 0.20) !important;
    color: #ef9a9a;
    border: 1px solid rgba(244, 67, 54, 0.30);
}

body.dark-mode .status-indicator.status-maintenance {
    background: rgba(255, 152, 0, 0.20) !important;
    color: #ffb74d;
    border: 1px solid rgba(255, 152, 0, 0.30);
}

body.dark-mode .status-indicator.status-unknown {
    background: rgba(158, 158, 158, 0.20) !important;
    color: #bdbdbd;
    border: 1px solid rgba(158, 158, 158, 0.30);
}

body.dark-mode .status-indicator.status-in-storage {
    background: rgba(0, 150, 136, 0.20) !important;
    color: #80cbc4;
    border: 1px solid rgba(0, 150, 136, 0.30);
}

body.dark-mode .status-indicator.status-planning {
    background: rgba(33, 150, 243, 0.20) !important;
    color: #64b5f6;
    border: 1px solid rgba(33, 150, 243, 0.30);
}

body.dark-mode .status-indicator.status-disposed {
    background: rgba(211, 47, 47, 0.25) !important;
    color: #ef5350;
    border: 1px solid rgba(211, 47, 47, 0.35);
}


/* ----- COMPACT LIST TABLE: .status-pill (main.css) ----- */
/* Used in Accounts, Licenses, Tickets, Inventory, Support Agreements */

body.dark-mode .compact-list-table .status-pill.status-active,
body.dark-mode .compact-list-table .status-pill.status-open,
body.dark-mode .compact-list-table .status-pill.status-in-stock {
    background: rgba(76, 175, 80, 0.20) !important;
    color: #66bb6a;
    border: 1px solid rgba(76, 175, 80, 0.30);
}

body.dark-mode .compact-list-table .status-pill.status-inactive,
body.dark-mode .compact-list-table .status-pill.status-closed,
body.dark-mode .compact-list-table .status-pill.status-expired {
    background: rgba(244, 67, 54, 0.20) !important;
    color: #ef9a9a;
    border: 1px solid rgba(244, 67, 54, 0.30);
}

body.dark-mode .compact-list-table .status-pill.status-pending,
body.dark-mode .compact-list-table .status-pill.status-expiring,
body.dark-mode .compact-list-table .status-pill.status-low-stock {
    background: rgba(255, 152, 0, 0.20) !important;
    color: #ffb74d;
    border: 1px solid rgba(255, 152, 0, 0.30);
}

body.dark-mode .compact-list-table .status-pill.status-in-progress,
body.dark-mode .compact-list-table .status-pill.status-in_progress,
body.dark-mode .compact-list-table .status-pill.status-resolved {
    background: rgba(33, 150, 243, 0.20) !important;
    color: #64b5f6;
    border: 1px solid rgba(33, 150, 243, 0.30);
}

body.dark-mode .compact-list-table .status-pill.status-planning {
    background: rgba(33, 150, 243, 0.20) !important;
    color: #64b5f6;
    border: 1px solid rgba(33, 150, 243, 0.30);
}

body.dark-mode .compact-list-table .status-pill.status-retired,
body.dark-mode .compact-list-table .status-pill.status-disposed {
    background: rgba(244, 67, 54, 0.20) !important;
    color: #ef9a9a;
    border: 1px solid rgba(244, 67, 54, 0.30);
}

body.dark-mode .compact-list-table .status-pill.status-in-storage,
body.dark-mode .compact-list-table .status-pill.status-in-use,
body.dark-mode .compact-list-table .status-pill.status-deployed {
    background: rgba(0, 150, 136, 0.20) !important;
    color: #80cbc4;
    border: 1px solid rgba(0, 150, 136, 0.30);
}

body.dark-mode .compact-list-table .status-pill.status-unassigned {
    background: rgba(211, 47, 47, 0.25) !important;
    color: #ef5350;
    border: 1px solid rgba(211, 47, 47, 0.35);
}


/* ----- VENDOR LIST: .status-badge / .status-active / .status-inactive (components.css) ----- */

body.dark-mode .status-badge.status-active,
body.dark-mode .status-active {
    background: rgba(76, 175, 80, 0.20) !important;
    color: #66bb6a;
    border: 1px solid rgba(76, 175, 80, 0.30);
}

body.dark-mode .status-badge.status-inactive,
body.dark-mode .status-inactive {
    background: rgba(255, 152, 0, 0.20) !important;
    color: #ffb74d;
    border: 1px solid rgba(255, 152, 0, 0.30);
}


/* ----- TICKET STATUS BADGES (components.css -- bright solid colors) ----- */

body.dark-mode .status-open {
    background: rgba(33, 150, 243, 0.20) !important;
    color: #64b5f6;
    border: 1px solid rgba(33, 150, 243, 0.30);
}

body.dark-mode .status-progress {
    background: rgba(156, 39, 176, 0.20) !important;
    color: #ce93d8;
    border: 1px solid rgba(156, 39, 176, 0.30);
}

body.dark-mode .status-pending {
    background: rgba(255, 152, 0, 0.20) !important;
    color: #ffb74d;
    border: 1px solid rgba(255, 152, 0, 0.30);
}

body.dark-mode .status-resolved {
    background: rgba(76, 175, 80, 0.20) !important;
    color: #66bb6a;
    border: 1px solid rgba(76, 175, 80, 0.30);
}

/* .status-closed already overridden above (line ~1834) -- no change needed */

body.dark-mode .status-escalated {
    background: rgba(211, 47, 47, 0.25) !important;
    color: #ef5350;
    border: 1px solid rgba(211, 47, 47, 0.35);
}


/* ----- PRIORITY BADGES (components.css -- both sets) ----- */

/* First set (bright solid backgrounds) */
body.dark-mode .priority-critical {
    background: rgba(211, 47, 47, 0.25) !important;
    color: #ef5350;
    border: 1px solid rgba(211, 47, 47, 0.35);
}

body.dark-mode .priority-high {
    background: rgba(255, 152, 0, 0.20) !important;
    color: #ffb74d;
    border: 1px solid rgba(255, 152, 0, 0.30);
}

body.dark-mode .priority-medium {
    background: rgba(33, 150, 243, 0.20) !important;
    color: #64b5f6;
    border: 1px solid rgba(33, 150, 243, 0.30);
}

body.dark-mode .priority-low {
    background: rgba(76, 175, 80, 0.20) !important;
    color: #66bb6a;
    border: 1px solid rgba(76, 175, 80, 0.30);
}


/* ----- PRIORITY PILLS (main.css compact-list-table) ----- */

body.dark-mode .compact-list-table .priority-pill.priority-critical {
    background: rgba(211, 47, 47, 0.25) !important;
    color: #ef5350;
    border: 1px solid rgba(211, 47, 47, 0.35);
}

body.dark-mode .compact-list-table .priority-pill.priority-high {
    background: rgba(255, 152, 0, 0.20) !important;
    color: #ffb74d;
    border: 1px solid rgba(255, 152, 0, 0.30);
}

body.dark-mode .compact-list-table .priority-pill.priority-medium {
    background: rgba(33, 150, 243, 0.20) !important;
    color: #64b5f6;
    border: 1px solid rgba(33, 150, 243, 0.30);
}

body.dark-mode .compact-list-table .priority-pill.priority-low {
    background: rgba(76, 175, 80, 0.20) !important;
    color: #66bb6a;
    border: 1px solid rgba(76, 175, 80, 0.30);
}


/* ----- TYPE PILLS (main.css compact-list-table) ----- */

body.dark-mode .compact-list-table .type-pill {
    background: rgba(158, 158, 158, 0.20) !important;
    color: #bdbdbd;
    border: 1px solid rgba(158, 158, 158, 0.30);
}

body.dark-mode .compact-list-table .type-pill.type-incident {
    background: rgba(255, 152, 0, 0.20) !important;
    color: #ffb74d;
    border: 1px solid rgba(255, 152, 0, 0.30);
}

body.dark-mode .compact-list-table .type-pill.type-request {
    background: rgba(33, 150, 243, 0.20) !important;
    color: #64b5f6;
    border: 1px solid rgba(33, 150, 243, 0.30);
}

body.dark-mode .compact-list-table .type-pill.type-bug {
    background: rgba(244, 67, 54, 0.20) !important;
    color: #ef9a9a;
    border: 1px solid rgba(244, 67, 54, 0.30);
}

body.dark-mode .compact-list-table .type-pill.type-change {
    background: rgba(76, 175, 80, 0.20) !important;
    color: #66bb6a;
    border: 1px solid rgba(76, 175, 80, 0.30);
}

body.dark-mode .compact-list-table .type-pill.type-problem {
    background: rgba(156, 39, 176, 0.20) !important;
    color: #ce93d8;
    border: 1px solid rgba(156, 39, 176, 0.30);
}


/* ----- SLA INDICATORS (components.css) ----- */

body.dark-mode .sla-good {
    background: rgba(76, 175, 80, 0.20) !important;
    color: #66bb6a;
    border: 1px solid rgba(76, 175, 80, 0.30);
}

body.dark-mode .sla-warning {
    background: rgba(255, 152, 0, 0.20) !important;
    color: #ffb74d;
    border: 1px solid rgba(255, 152, 0, 0.30);
}

body.dark-mode .sla-critical {
    background: rgba(255, 152, 0, 0.25) !important;
    color: #ffb74d;
    border: 1px solid rgba(255, 152, 0, 0.35);
}

body.dark-mode .sla-overdue {
    background: rgba(211, 47, 47, 0.25) !important;
    color: #ef5350;
    border: 1px solid rgba(211, 47, 47, 0.35);
}


/* ----- ADMIN DEPARTMENT BADGES (admin.css) ----- */

body.dark-mode .dept-status-badge.badge-active {
    background: rgba(76, 175, 80, 0.20) !important;
    color: #66bb6a;
    border: 1px solid rgba(76, 175, 80, 0.30);
}

body.dark-mode .dept-status-badge.badge-inactive {
    background: rgba(244, 67, 54, 0.20) !important;
    color: #ef9a9a;
    border: 1px solid rgba(244, 67, 54, 0.30);
}


/* ----- ADMIN CONNECTIVITY STATUS (admin.css) ----- */

body.dark-mode .status-indicator.connected {
    background: rgba(76, 175, 80, 0.20) !important;
    color: #66bb6a;
    border: 1px solid rgba(76, 175, 80, 0.30);
}

body.dark-mode .status-indicator.disconnected {
    background: rgba(244, 67, 54, 0.20) !important;
    color: #ef9a9a;
    border: 1px solid rgba(244, 67, 54, 0.30);
}


/* ----- USER ACTIVITY INDICATORS & DOTS (user-styles.css, main.css, user-details.css) ----- */
/* These are small circle dots -- mute the bright colors to softer variants */

body.dark-mode .activity-indicator.active,
body.dark-mode .activity-indicator.online {
    background-color: rgba(76, 175, 80, 0.60) !important;
    border-color: #16213e;
}

body.dark-mode .activity-indicator.idle {
    background-color: rgba(255, 152, 0, 0.60) !important;
    border-color: #16213e;
}

body.dark-mode .activity-indicator.offline {
    background-color: rgba(158, 158, 158, 0.50) !important;
    border-color: #16213e;
}

body.dark-mode .activity-dot.active,
body.dark-mode .activity-dot.online {
    background-color: rgba(76, 175, 80, 0.60) !important;
}

body.dark-mode .activity-dot.idle {
    background-color: rgba(255, 152, 0, 0.60) !important;
}

body.dark-mode .activity-dot.offline {
    background-color: rgba(158, 158, 158, 0.50) !important;
}


/* ----- STOCK BADGES (components.css) ----- */

body.dark-mode .stock-good {
    background: rgba(76, 175, 80, 0.20) !important;
    color: #66bb6a;
}

body.dark-mode .stock-low {
    background: rgba(255, 152, 0, 0.20) !important;
    color: #ffb74d;
}

body.dark-mode .stock-out {
    background: rgba(244, 67, 54, 0.20) !important;
    color: #ef9a9a;
}


/* ----- LICENSE BADGES (components.css) ----- */

body.dark-mode .license-active {
    background: rgba(76, 175, 80, 0.20) !important;
    color: #66bb6a;
}

body.dark-mode .license-expiring {
    background: rgba(255, 152, 0, 0.20) !important;
    color: #ffb74d;
}

body.dark-mode .license-expired {
    background: rgba(244, 67, 54, 0.20) !important;
    color: #ef9a9a;
}


/* ----- COMPLIANCE BADGES (components.css) ----- */

body.dark-mode .compliance-good {
    background: rgba(76, 175, 80, 0.20) !important;
    color: #66bb6a;
}

body.dark-mode .compliance-warning {
    background: rgba(244, 67, 54, 0.20) !important;
    color: #ef9a9a;
}


/* ----- PREFERRED BADGE (components.css) ----- */

body.dark-mode .preferred-badge {
    background: rgba(255, 152, 0, 0.20) !important;
    color: #ffb74d;
    border: 1px solid rgba(255, 152, 0, 0.30);
}


/* ----- KANBAN COLUMN HEADERS (ticket-kanban.css) ----- */

body.dark-mode .kanban-column[data-status="open"] .kanban-column-header {
    background: rgba(33, 150, 243, 0.15) !important;
    color: #64b5f6;
}

body.dark-mode .kanban-column[data-status="in_progress"] .kanban-column-header {
    background: rgba(156, 39, 176, 0.15) !important;
    color: #ce93d8;
}

body.dark-mode .kanban-column[data-status="pending"] .kanban-column-header {
    background: rgba(255, 152, 0, 0.15) !important;
    color: #ffb74d;
}

body.dark-mode .kanban-column[data-status="resolved"] .kanban-column-header {
    background: rgba(76, 175, 80, 0.15) !important;
    color: #66bb6a;
}

body.dark-mode .kanban-column[data-status="closed"] .kanban-column-header {
    background: rgba(158, 158, 158, 0.15) !important;
    color: #bdbdbd;
}

body.dark-mode .kanban-column[data-status="active"] .kanban-column-header {
    background: rgba(76, 175, 80, 0.15) !important;
    color: #66bb6a;
}

body.dark-mode .kanban-column[data-status="expiring"] .kanban-column-header {
    background: rgba(255, 152, 0, 0.15) !important;
    color: #ffb74d;
}

body.dark-mode .kanban-column[data-status="expired"] .kanban-column-header {
    background: rgba(211, 47, 47, 0.15) !important;
    color: #ef5350;
}

body.dark-mode .kanban-column[data-status="renewing"] .kanban-column-header {
    background: rgba(33, 150, 243, 0.15) !important;
    color: #64b5f6;
}

body.dark-mode .kanban-column[data-status="cancelled"] .kanban-column-header {
    background: rgba(158, 158, 158, 0.15) !important;
    color: #bdbdbd;
}

body.dark-mode .kanban-column[data-status="prospect"] .kanban-column-header {
    background: rgba(33, 150, 243, 0.15) !important;
    color: #64b5f6;
}

body.dark-mode .kanban-column[data-status="cancelling"] .kanban-column-header {
    background: rgba(255, 152, 0, 0.15) !important;
    color: #ffb74d;
}

body.dark-mode .kanban-column[data-status="churned"] .kanban-column-header {
    background: rgba(211, 47, 47, 0.15) !important;
    color: #ef5350;
}

body.dark-mode .kanban-column[data-status="under_review"] .kanban-column-header {
    background: rgba(63, 81, 181, 0.15) !important;
    color: #9fa8da;
}

body.dark-mode .kanban-column[data-status="inactive"] .kanban-column-header {
    background: rgba(158, 158, 158, 0.15) !important;
    color: #bdbdbd;
}


/* ----- KANBAN PRIORITY BADGES (ticket-kanban.css) ----- */

body.dark-mode .kanban-priority-badge.p-critical {
    background: rgba(211, 47, 47, 0.25) !important;
    color: #ef5350;
}

body.dark-mode .kanban-priority-badge.p-high {
    background: rgba(255, 152, 0, 0.20) !important;
    color: #ffb74d;
}

body.dark-mode .kanban-priority-badge.p-medium {
    background: rgba(255, 193, 7, 0.20) !important;
    color: #ffd54f;
}

body.dark-mode .kanban-priority-badge.p-low {
    background: rgba(76, 175, 80, 0.20) !important;
    color: #66bb6a;
}


/* ----- KANBAN CARD LEFT BORDER (ticket-kanban.css) ----- */
/* Mute the priority border-left on cards */

body.dark-mode .kanban-card.priority-critical {
    border-left-color: rgba(211, 47, 47, 0.60);
}

body.dark-mode .kanban-card.priority-high {
    border-left-color: rgba(255, 152, 0, 0.60);
}

body.dark-mode .kanban-card.priority-medium {
    border-left-color: rgba(255, 193, 7, 0.60);
}

body.dark-mode .kanban-card.priority-low {
    border-left-color: rgba(76, 175, 80, 0.60);
}


/* ----- KANBAN GENERIC BADGES (ticket-kanban.css) ----- */

body.dark-mode .kanban-card-badge.badge-type {
    background: rgba(63, 81, 181, 0.20) !important;
    color: #9fa8da;
}

body.dark-mode .kanban-card-badge.badge-sla {
    background: rgba(0, 150, 136, 0.20) !important;
    color: #80cbc4;
}

body.dark-mode .kanban-card-badge.badge-preferred {
    background: rgba(255, 152, 0, 0.20) !important;
    color: #ffb74d;
}


/* ----- KANBAN NPS BADGES (ticket-kanban.css) ----- */

body.dark-mode .kanban-nps.nps-promoter {
    background: rgba(76, 175, 80, 0.20) !important;
    color: #66bb6a;
}

body.dark-mode .kanban-nps.nps-passive {
    background: rgba(255, 193, 7, 0.20) !important;
    color: #ffd54f;
}

body.dark-mode .kanban-nps.nps-detractor {
    background: rgba(211, 47, 47, 0.25) !important;
    color: #ef5350;
}


/* ----- KANBAN HEALTH DOTS (ticket-kanban.css) ----- */

body.dark-mode .kanban-health-dot.health-good {
    background: rgba(76, 175, 80, 0.60) !important;
}

body.dark-mode .kanban-health-dot.health-warning {
    background: rgba(255, 152, 0, 0.60) !important;
}

body.dark-mode .kanban-health-dot.health-critical {
    background: rgba(244, 67, 54, 0.60) !important;
}


/* ----- SYSTEM STATUS INLINE INDICATORS (systemStatus.js) ----- */
/* The system status module uses inline <style> tags; these overrides win via specificity */

body.dark-mode .status-indicator.online {
    background: rgba(76, 175, 80, 0.60) !important;
}

body.dark-mode .status-indicator.offline {
    background: rgba(244, 67, 54, 0.50) !important;
}

body.dark-mode .status-indicator.warning {
    background: rgba(255, 193, 7, 0.60) !important;
}


/* ----- NOTIFICATION UNREAD BADGE (main.css) ----- */

body.dark-mode .unread-badge {
    background: rgba(211, 47, 47, 0.70) !important;
    color: #fce4ec;
}


/* ----- EXPIRY BADGE (main.css / inline) ----- */

body.dark-mode .expiry-badge {
    background: rgba(255, 152, 0, 0.20) !important;
    color: #ffb74d;
    border-color: rgba(255, 152, 0, 0.30) !important;
}


/* ----- UTILIZATION BAR inline color override (licenseForms.js) ----- */
/* The bar uses inline style, so attribute selectors are needed */

body.dark-mode [id="utilizationBar"] {
    opacity: 0.70;
}

/* ----- USER STATUS BADGES: .badge-success / .badge-warning / .badge-info / .badge-danger ----- */
body.dark-mode .badge-success {
    background-color: rgba(16, 185, 129, 0.20);
    color: #6ee7b7;
    border: 1px solid rgba(16, 185, 129, 0.30);
}

body.dark-mode .badge-warning {
    background-color: rgba(245, 158, 11, 0.20);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.30);
}

body.dark-mode .badge-info {
    background-color: rgba(59, 130, 246, 0.20);
    color: #93c5fd;
    border: 1px solid rgba(59, 130, 246, 0.30);
}

body.dark-mode .badge-danger {
    background-color: rgba(239, 68, 68, 0.20);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.30);
}

/* ----- VENDOR CONTRACT BADGES: .contract-badge variants (main.css) ----- */
body.dark-mode .contract-badge.contract-expired {
    background: rgba(239, 68, 68, 0.20);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.30);
}

body.dark-mode .contract-badge.contract-expiring-soon {
    background: rgba(245, 158, 11, 0.20);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.30);
}

body.dark-mode .contract-badge.contract-expiring {
    background: rgba(245, 158, 11, 0.15);
    color: #fcd34d;
    border: 1px solid rgba(245, 158, 11, 0.25);
}

body.dark-mode .contract-badge.contract-valid {
    background: rgba(16, 185, 129, 0.20);
    color: #6ee7b7;
    border: 1px solid rgba(16, 185, 129, 0.30);
}

/* System consolidated sub-tabs - dark mode */
body.dark-mode .system-subtab { color:#adb5bd; }
body.dark-mode .system-subtab:hover { color:#e8e8e8; }
body.dark-mode .system-subtab.active { color:#667eea; }
body.dark-mode .system-subtabs { border-bottom-color:#495057; }