/* ========================================
   Dark Mode Variables and Overrides
======================================== */
body.dark-mode {
    --bg-color: #181a1b;
    --text-color: #ffffff;
    --card-bg: #242526;
    --header-bg: #3a3b3c;
    --input-bg: #3a3b3c;
    --barcode-bg: #3a3b3c;
    --barcode-color: #e4e6eb;
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* General (for 3rd party plugins like Select2) */
body.dark-mode .select2-container--default .select2-selection--single .select2-selection__placeholder,
body.dark-mode .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field::placeholder {
    color: var(--text-color) !important;
}
body.dark-mode .select2-results__option--highlighted {
    background-color: #555 !important;
}
body.dark-mode .select2-results__option {
    background-color: var(--input-bg) !important;
    color: var(--text-color) !important;
}
body.dark-mode .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--input-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid #555 !important;
}

/* Sidebar and Sidebar Menu */
body.dark-mode .sidebar,
body.dark-mode .sidebar-menu {
    background-color: var(--card-bg);
    color: var(--text-color);
    border-color: #555;
}

/* Modal Content */
body.dark-mode .modal-content,
body.dark-mode .stock-modal-content,
body.dark-mode .scanner-modal-content {
    background-color: var(--card-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid #555;
}

/* Modal Header */
body.dark-mode .modal-header {
    border-bottom: 1px solid #555;
}
body.dark-mode .modal-title,
body.dark-mode .close,
body.dark-mode .close-btn {
    color: var(--text-color) !important;
}

/* Store Info Card */
body.dark-mode .store-info-item {
    background-color: #3a3b3c;
    border: 1px solid #555;
    color: var(--text-color);
}

/* Notification Dropdown */
body.dark-mode #notification-dropdown,
body.dark-mode .notification-dropdown {
    background: #222 !important;
    color: #fff !important;
    border: 1px solid #444;
}
body.dark-mode .notification-item.unread {
    background-color: #283546 !important;
}

/* Product Cards (if needed) */
body.dark-mode .card,
body.dark-mode .flip-card-back,
body.dark-mode .lowes-card {
    background-color: var(--card-bg);
    color: var(--text-color);
}

/* Scanner modal background overlay */
body.dark-mode .scanner-modal {
    background-color: rgba(15, 15, 18, 0.70) !important;
}

/* Miscellaneous Buttons */
body.dark-mode .btn,
body.dark-mode button {
    color: var(--text-color);
    background-color: var(--header-bg);
    border-color: #555;
}
body.dark-mode .btn-primary {
    background-color: #444;
    border-color: #222;
}
body.dark-mode .btn-warning {
    background-color: #ff9800;
    color: #222;
}

/* Other UI tweaks */
body.dark-mode .mobile-break {
    border-top: 1px solid #444;
}
body.dark-mode input,
body.dark-mode select {
    background-color: var(--input-bg);
    color: var(--text-color);
    border-color: #555;
}