/* ==========================================================================
   ALJ BILLING SYSTEM - 4-MODE COLOR SCHEME ENGINE
   1. Light Mode (Default)
   2. Dark Mode (Microsoft Edge InPrivate Deep Charcoal)
   3. Comfort Dark Mode (Eye-Care Warm Midnight Slate)
   4. Grey Mode (Neutral Modern Slate Grey)
   ========================================================================== */

:root {
    --dark-bg-body: #f8f9fa;
    --dark-bg-card: #ffffff;
    --dark-bg-card-header: #f1f5f9;
    --dark-bg-input: #ffffff;
    --dark-border: #e2e8f0;
    --dark-border-subtle: #f1f5f9;
    --dark-text-main: #333333;
    --dark-text-muted: #64748b;
    --dark-text-heading: #1e3c72;
    --dark-accent-blue: #0d6efd;
    --dark-accent-primary: #0d6efd;
}

html.dark-mode,
body.dark-mode {
    --dark-bg-body: #121212;
    --dark-bg-card: #1f1f1f;
    --dark-bg-card-header: #262626;
    --dark-bg-input: #181818;
    --dark-border: #333333;
    --dark-border-subtle: #292929;
    --dark-text-main: #e4e4e7;
    --dark-text-muted: #a1a1aa;
    --dark-text-heading: #ffffff;
    --dark-accent-blue: #58a6ff;
    --dark-accent-primary: #1f6feb;
    --dark-blue-text: #58a6ff;
    --dark-blue-btn-bg: #1f6feb;
    --dark-blue-btn-border: #388bfd;
    --dark-blue-btn-hover: #388bfd;
    --dark-blue-badge-bg: rgba(56, 139, 253, 0.16);
    --dark-blue-badge-text: #79c0ff;
    --dark-blue-badge-border: rgba(56, 139, 253, 0.35);
    --dark-accent-hover: #2d2d2d;
    --dark-table-th: #262626;
    --dark-table-td: #1f1f1f;
    --dark-table-hover: #2d2d2d;
    --dark-table-striped: #171717;
    --dark-header-bg: linear-gradient(135deg, #141414 0%, #1f1f1f 100%);
    --dark-nav-bg: #181818;
    --dark-nav-hover: #2a2a2a;
}

/* Eye-First Comfort Dark Mode Overrides (Warm Soothing Slate / Midnight Eye-Care) */
html.comfort-mode,
body.comfort-mode,
html.dark-mode.comfort-mode,
body.dark-mode.comfort-mode {
    --dark-bg-body: #191e24;
    --dark-bg-card: #222933;
    --dark-bg-card-header: #2b3340;
    --dark-bg-input: #181d24;
    --dark-border: #384353;
    --dark-border-subtle: #2d3644;
    --dark-text-main: #d1d9e2;
    --dark-text-muted: #8b99a8;
    --dark-text-heading: #f1f5f9;
    --dark-accent-blue: #7dd3fc;
    --dark-accent-primary: #2563eb;
    --dark-blue-text: #93c5fd;
    --dark-blue-btn-bg: #2563eb;
    --dark-blue-btn-border: #3b82f6;
    --dark-blue-btn-hover: #3b82f6;
    --dark-blue-badge-bg: rgba(125, 211, 252, 0.15);
    --dark-blue-badge-text: #bae6fd;
    --dark-blue-badge-border: rgba(125, 211, 252, 0.32);
    --dark-accent-hover: #313b4a;
    --dark-table-th: #2b3340;
    --dark-table-td: #222933;
    --dark-table-hover: #2f3846;
    --dark-table-striped: #1d232c;
    --dark-header-bg: linear-gradient(135deg, #161b21 0%, #222933 100%);
    --dark-nav-bg: #1a2027;
    --dark-nav-hover: #2b3340;
}

/* Neutral Slate Grey Mode Overrides */
html.grey-mode,
body.grey-mode,
html.dark-mode.grey-mode,
body.dark-mode.grey-mode {
    --dark-bg-body: #2f3136;
    --dark-bg-card: #36393f;
    --dark-bg-card-header: #40444b;
    --dark-bg-input: #292b2f;
    --dark-border: #4e525c;
    --dark-border-subtle: #42464d;
    --dark-text-main: #dcddde;
    --dark-text-muted: #96989d;
    --dark-text-heading: #ffffff;
    --dark-accent-blue: #8ea1e1;
    --dark-accent-primary: #5865f2;
    --dark-blue-text: #8ea1e1;
    --dark-blue-btn-bg: #5865f2;
    --dark-blue-btn-border: #7289da;
    --dark-blue-btn-hover: #4752c4;
    --dark-blue-badge-bg: rgba(88, 101, 242, 0.16);
    --dark-blue-badge-text: #c9cdfb;
    --dark-blue-badge-border: rgba(88, 101, 242, 0.38);
    --dark-accent-hover: #474b53;
    --dark-table-th: #40444b;
    --dark-table-td: #36393f;
    --dark-table-hover: #474b53;
    --dark-table-striped: #32353b;
    --dark-header-bg: linear-gradient(135deg, #282a2e 0%, #36393f 100%);
    --dark-nav-bg: #2b2d31;
    --dark-nav-hover: #40444b;
}

/* ==========================================================================
   1. BASE & CONTAINER OVERRIDES
   ========================================================================== */
html.dark-mode,
body.dark-mode {
    background-color: var(--dark-bg-body) !important;
    color: var(--dark-text-main) !important;
}

/* Header & Nav in Dark & Comfort Mode */
body.dark-mode .top-header {
    background: var(--dark-header-bg) !important;
    border-bottom: 1px solid var(--dark-border);
}

body.dark-mode .main-navbar {
    background: var(--dark-nav-bg) !important;
    border-bottom: 1px solid var(--dark-border);
}

body.dark-mode .navbar-nav .nav-link {
    color: var(--dark-text-main) !important;
}

body.dark-mode .navbar-nav .nav-link:hover,
body.dark-mode .navbar-nav .nav-link.active,
body.dark-mode .navbar-nav .show>.nav-link {
    color: var(--dark-accent-blue) !important;
    background: var(--dark-nav-hover) !important;
    border-bottom-color: var(--dark-accent-blue) !important;
}

body.dark-mode .navbar-nav .nav-link i {
    color: var(--dark-text-muted) !important;
}

body.dark-mode .navbar-nav .nav-link:hover i {
    color: var(--dark-accent-blue) !important;
}

/* Dropdowns in Dark Mode */
body.dark-mode .dropdown-menu {
    background-color: var(--dark-bg-card) !important;
    border: 1px solid var(--dark-border) !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.75) !important;
}

body.dark-mode .dropdown-item {
    color: var(--dark-text-main) !important;
}

body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
    background-color: #2c2c2c !important;
    color: var(--dark-accent-blue) !important;
}

body.dark-mode .dropdown-divider {
    border-color: var(--dark-border) !important;
}

body.dark-mode .dropdown-header {
    color: #a1a1aa !important;
}

/* ==========================================================================
   2. CARDS, CONTAINERS, FILTERS & SECTIONS ACROSS ALL PAGES
   ========================================================================== */
body.dark-mode .card,
body.dark-mode .bill-card,
body.dark-mode .setting-card,
body.dark-mode .table-card,
body.dark-mode .table-container,
body.dark-mode .rcs-card,
body.dark-mode .cache-card,
body.dark-mode .filter-card,
body.dark-mode .filter-bar,
body.dark-mode .chart-box,
body.dark-mode .widget-card,
body.dark-mode .mgmt-card,
body.dark-mode .stat-card-clean,
body.dark-mode .impact-box,
body.dark-mode .stat-box-compact,
body.dark-mode .stat-box,
body.dark-mode .deposit-row,
body.dark-mode .details-box,
body.dark-mode .deposit-item-row,
body.dark-mode .code-box,
body.dark-mode .statement-table,
body.dark-mode .summary-bar,
body.dark-mode .action-footer,
body.dark-mode .sidebar,
body.dark-mode .sidebar-header,
body.dark-mode .search-panel,
body.dark-mode .search-bar,
body.dark-mode .cus-card {
    background-color: var(--dark-bg-card) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-main) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .card-header,
body.dark-mode .bill-header,
body.dark-mode .card-header-custom,
body.dark-mode .header-strip {
    background-color: var(--dark-bg-card-header) !important;
    border-bottom: 1px solid var(--dark-border) !important;
    color: var(--dark-text-heading) !important;
}

body.dark-mode .card-footer {
    background-color: var(--dark-bg-card-header) !important;
    border-top: 1px solid var(--dark-border) !important;
}

/* ==========================================================================
   3. TYPOGRAPHY, LABELS, MUTED & HEADINGS
   ========================================================================== */
body.dark-mode label,
body.dark-mode .form-label,
body.dark-mode .form-label-compact,
body.dark-mode .form-check-label,
body.dark-mode .info-label,
body.dark-mode .client-header,
body.dark-mode .info-val,
body.dark-mode .val-text {
    color: #f4f4f5 !important;
    font-weight: 500;
}

body.dark-mode .text-dark,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .name,
body.dark-mode .cat-name-text {
    color: var(--dark-text-heading) !important;
}

/* Eye-Friendly Primary Blue Text Across Modes */
body.dark-mode .text-primary,
body.dark-mode a.text-primary,
body.dark-mode i.text-primary,
body.dark-mode h1.text-primary,
body.dark-mode h2.text-primary,
body.dark-mode h3.text-primary,
body.dark-mode h4.text-primary,
body.dark-mode h5.text-primary,
body.dark-mode h6.text-primary,
body.dark-mode span.text-primary,
body.dark-mode p.text-primary,
body.dark-mode strong.text-primary,
body.dark-mode b.text-primary,
body.dark-mode label.text-primary,
body.dark-mode th.text-primary,
body.dark-mode td.text-primary {
    color: var(--dark-blue-text) !important;
}

body.dark-mode a:not(.btn):not(.nav-link):not(.dropdown-item):not(.brand-logo):not(.logout-btn):not(.page-link) {
    color: var(--dark-blue-text);
}

body.dark-mode a:not(.btn):not(.nav-link):not(.dropdown-item):not(.brand-logo):not(.logout-btn):not(.page-link):hover {
    color: var(--dark-accent-blue);
}

body.dark-mode .text-muted,
body.dark-mode small.text-muted,
body.dark-mode p.text-muted,
body.dark-mode span.text-muted,
body.dark-mode .tiny-text,
body.dark-mode .code-sub,
body.dark-mode .subtitle,
body.dark-mode .label-text {
    color: var(--dark-text-muted) !important;
}

body.dark-mode .text-white-50 {
    color: #a1a1aa !important;
}

body.dark-mode .bg-white {
    background-color: var(--dark-bg-card) !important;
    color: var(--dark-text-main) !important;
}

body.dark-mode .bg-light {
    background-color: #181818 !important;
    color: var(--dark-text-main) !important;
}

body.dark-mode .border,
body.dark-mode .border-top,
body.dark-mode .border-bottom,
body.dark-mode .border-start,
body.dark-mode .border-end {
    border-color: var(--dark-border) !important;
}

/* ==========================================================================
   4. TABLES & GRIDS (All Master & History Pages)
   ========================================================================== */
body.dark-mode .table,
body.dark-mode .table-custom,
body.dark-mode .table-responsive table,
body.dark-mode .statement-table {
    color: var(--dark-text-main) !important;
    border-color: var(--dark-border) !important;
    background-color: var(--dark-bg-card) !important;
}

body.dark-mode .table thead th,
body.dark-mode .table-custom thead th,
body.dark-mode .table-light th,
body.dark-mode .table thead tr th,
body.dark-mode .statement-table th {
    background-color: var(--dark-table-th) !important;
    background-image: none !important;
    color: #ffffff !important;
    border-color: var(--dark-border) !important;
    font-weight: 600;
}

body.dark-mode .table tbody td,
body.dark-mode .table-custom tbody td,
body.dark-mode .table tbody tr td,
body.dark-mode .statement-table td {
    background-color: var(--dark-table-td) !important;
    color: var(--dark-text-main) !important;
    border-color: var(--dark-border-subtle) !important;
}

/* Crisp Table Hover */
body.dark-mode .table-hover tbody tr:hover,
body.dark-mode .table-hover tbody tr:hover>td,
body.dark-mode .table-hover tbody tr:hover>th,
body.dark-mode .table-hover>tbody>tr:hover>* {
    background-color: var(--dark-table-hover) !important;
    color: #ffffff !important;
}

body.dark-mode .table-hover tbody tr:hover td a,
body.dark-mode .table-hover tbody tr:hover td .fw-bold,
body.dark-mode .table-hover tbody tr:hover td span:not(.badge) {
    color: #ffffff !important;
}

body.dark-mode .table-striped>tbody>tr:nth-of-type(odd)>*,
body.dark-mode .table-striped tbody tr:nth-of-type(odd) td {
    background-color: var(--dark-table-striped) !important;
    color: var(--dark-text-main) !important;
}

body.dark-mode .table-light {
    background-color: #262626 !important;
    color: #ffffff !important;
}

body.dark-mode .tfoot-dark,
body.dark-mode .table tfoot,
body.dark-mode .table tfoot td {
    background-color: #181818 !important;
    color: #ffffff !important;
    border-color: var(--dark-border) !important;
}

/* ==========================================================================
   5. FORMS, INPUTS, SELECTS & SELECT2 PLUGIN (Product Add / Manage)
   ========================================================================== */
body.dark-mode input.form-control,
body.dark-mode select.form-select,
body.dark-mode textarea.form-control,
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode .mini-input,
body.dark-mode .search-input,
body.dark-mode .filter-select,
body.dark-mode input[type="text"],
body.dark-mode input[type="number"],
body.dark-mode input[type="date"],
body.dark-mode input[type="tel"],
body.dark-mode input[type="password"],
body.dark-mode input[type="search"] {
    background-color: var(--dark-bg-input) !important;
    border: 1px solid var(--dark-border) !important;
    color: #f4f4f5 !important;
}

body.dark-mode input.form-control:focus,
body.dark-mode select.form-select:focus,
body.dark-mode textarea.form-control:focus,
body.dark-mode .form-control:focus,
body.dark-mode .mini-input:focus,
body.dark-mode .search-input:focus {
    background-color: #202020 !important;
    border-color: var(--dark-accent-blue) !important;
    color: #fff !important;
    box-shadow: 0 0 0 0.2rem rgba(96, 205, 255, 0.25) !important;
}

body.dark-mode select option {
    background-color: var(--dark-bg-card) !important;
    color: var(--dark-text-main) !important;
}

/* SELECT2 IN DARK MODE (productadd.php) */
body.dark-mode .select2-container--default .select2-selection--single {
    background-color: var(--dark-bg-input) !important;
    border-color: var(--dark-border) !important;
    color: #f4f4f5 !important;
}

body.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #f4f4f5 !important;
}

body.dark-mode .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #71717a !important;
}

body.dark-mode .select2-dropdown {
    background-color: var(--dark-bg-card) !important;
    border: 1px solid var(--dark-border) !important;
    color: #f4f4f5 !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.8) !important;
}

body.dark-mode .select2-search--dropdown .select2-search__field {
    background-color: var(--dark-bg-input) !important;
    border: 1px solid var(--dark-border) !important;
    color: #f4f4f5 !important;
}

body.dark-mode .select2-container--default .select2-results__option--selectable {
    background-color: var(--dark-bg-card) !important;
    color: var(--dark-text-main) !important;
}

body.dark-mode .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--dark-blue-btn-bg) !important;
    color: #ffffff !important;
}

body.dark-mode .select2-container--default .select2-results__option--selected {
    background-color: var(--dark-blue-badge-bg) !important;
    color: var(--dark-blue-badge-text) !important;
}

body.dark-mode .form-control::placeholder,
body.dark-mode textarea::placeholder,
body.dark-mode .mini-input::placeholder,
body.dark-mode .search-input::placeholder {
    color: #71717a !important;
    opacity: 0.8;
}

body.dark-mode .input-group-text {
    background-color: #262626 !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-main) !important;
}

body.dark-mode .input-group-text.bg-light {
    background-color: #262626 !important;
    color: var(--dark-text-main) !important;
}

body.dark-mode .input-group-text.bg-dark {
    background-color: #121212 !important;
    color: #f4f4f5 !important;
}

body.dark-mode .bg-readonly,
body.dark-mode input[readonly],
body.dark-mode textarea[readonly] {
    background-color: #141414 !important;
    color: #a1a1aa !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .form-check-input {
    background-color: var(--dark-bg-input) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .form-check-input:checked {
    background-color: var(--dark-accent-primary) !important;
    border-color: var(--dark-accent-primary) !important;
}

/* CATEGORY MULTI-SELECT DROPDOWN IN PRODUCTMANAGE.PHP */
body.dark-mode #catInputContainer {
    background-color: var(--dark-bg-input) !important;
    border-color: var(--dark-border) !important;
    color: #f4f4f5 !important;
}

body.dark-mode #catDropdownMenu {
    background-color: var(--dark-bg-card) !important;
    border: 1px solid var(--dark-border) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.8) !important;
}

body.dark-mode .cat-item {
    color: var(--dark-text-main) !important;
}

body.dark-mode .cat-item:hover {
    background-color: #2d2d2d !important;
}

body.dark-mode .cat-item.bg-primary.bg-opacity-10 {
    background-color: #1e3a5f !important;
}

body.dark-mode #catInlineSearch {
    color: #f4f4f5 !important;
}

body.dark-mode #catInlineSearch::placeholder {
    color: #71717a !important;
}

/* ==========================================================================
   6. BADGES, BUTTONS, TOASTS & PAGINATION
   ========================================================================== */
/* Badges in Dark Mode */
body.dark-mode .badge.bg-primary,
body.dark-mode .badge.bg-primary-subtle {
    background-color: var(--dark-blue-badge-bg) !important;
    color: var(--dark-blue-badge-text) !important;
    border: 1px solid var(--dark-blue-badge-border) !important;
    font-weight: 600;
}

body.dark-mode .bg-primary {
    background-color: var(--dark-blue-btn-bg) !important;
    color: #ffffff !important;
}

body.dark-mode .bg-primary.bg-opacity-10,
body.dark-mode .bg-primary-subtle {
    background-color: var(--dark-blue-badge-bg) !important;
    color: var(--dark-blue-badge-text) !important;
}

body.dark-mode .border-primary {
    border-color: var(--dark-blue-badge-border) !important;
}

body.dark-mode .alert-primary {
    background-color: var(--dark-blue-badge-bg) !important;
    color: var(--dark-blue-badge-text) !important;
    border-color: var(--dark-blue-badge-border) !important;
}

/* Primary Button in Dark Mode */
body.dark-mode .btn-primary {
    background-color: var(--dark-blue-btn-bg) !important;
    border-color: var(--dark-blue-btn-border) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

body.dark-mode .btn-primary:hover,
body.dark-mode .btn-primary:focus,
body.dark-mode .btn-primary:active,
body.dark-mode .show > .btn-primary.dropdown-toggle {
    background-color: var(--dark-blue-btn-hover) !important;
    border-color: var(--dark-blue-btn-hover) !important;
    color: #ffffff !important;
}

/* Outline Primary in Dark Mode */
body.dark-mode .btn-outline-primary {
    color: var(--dark-blue-text) !important;
    border-color: var(--dark-blue-badge-border) !important;
    background-color: transparent !important;
}

body.dark-mode .btn-outline-primary:hover,
body.dark-mode .btn-outline-primary:focus,
body.dark-mode .btn-outline-primary:active,
body.dark-mode .btn-check:checked + .btn-outline-primary {
    background-color: var(--dark-blue-btn-bg) !important;
    border-color: var(--dark-blue-btn-bg) !important;
    color: #ffffff !important;
}

body.dark-mode .badge.bg-light,
/* PAGINATION IN DARK MODE */
body.dark-mode .page-link {
    background-color: var(--dark-bg-card) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-main) !important;
}

body.dark-mode .page-link:hover {
    background-color: #2d2d2d !important;
    color: var(--dark-accent-blue) !important;
    border-color: var(--dark-accent-blue) !important;
}

body.dark-mode .page-item.active .page-link {
    background-color: var(--dark-blue-btn-bg) !important;
    border-color: var(--dark-blue-btn-border) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .page-item.disabled .page-link {
    background-color: var(--dark-bg-body) !important;
    border-color: var(--dark-border-subtle) !important;
    color: #71717a !important;
}

/* ==========================================================================
   7. CUSTOM DROPDOWNS & MODALS
   ========================================================================== */
body.dark-mode .custom-dropdown-style {
    background-color: var(--dark-bg-card) !important;
    border: 1px solid var(--dark-border) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7) !important;
}

body.dark-mode .custom-dropdown-style .dropdown-item {
    color: var(--dark-text-main) !important;
}

body.dark-mode .custom-dropdown-style .dropdown-item:hover {
    background-color: #2d2d2d !important;
    color: var(--dark-accent-blue) !important;
}

body.dark-mode .modal-content {
    background-color: var(--dark-bg-card) !important;
    border: 1px solid var(--dark-border) !important;
    color: var(--dark-text-main) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.85) !important;
}

body.dark-mode .modal-header,
body.dark-mode .modal-footer {
    border-color: var(--dark-border) !important;
}

body.dark-mode .modal-header .btn-close,
body.dark-mode .offcanvas-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

body.dark-mode .offcanvas {
    background-color: var(--dark-bg-card) !important;
    color: var(--dark-text-main) !important;
}

body.dark-mode .offcanvas-header {
    border-bottom: 1px solid var(--dark-border) !important;
}

body.dark-mode .swal2-popup {
    background: var(--dark-bg-card) !important;
    color: var(--dark-text-main) !important;
    border: 1px solid var(--dark-border) !important;
}

body.dark-mode .swal2-title {
    color: var(--dark-text-heading) !important;
}

body.dark-mode .swal2-html-container {
    color: var(--dark-text-muted) !important;
}

/* Autocomplete Lists in Dark Mode */
body.dark-mode .autocomplete-items {
    background-color: var(--dark-bg-card) !important;
    border: 1px solid var(--dark-border) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
}

body.dark-mode .autocomplete-items div {
    color: var(--dark-text-main) !important;
    border-bottom: 1px solid var(--dark-border-subtle) !important;
    background-color: var(--dark-bg-card) !important;
}

body.dark-mode .autocomplete-items div:hover,
body.dark-mode .autocomplete-active {
    background-color: #2c2c2c !important;
    color: var(--dark-accent-blue) !important;
}

/* ==========================================================================
   8. SPECIFIC MODULE CUSTOM OVERRIDES
   ========================================================================== */
/* Customer Deposit Master Fixes */
body.dark-mode .cus-card {
    background-color: var(--dark-bg-card) !important;
    border-left: 5px solid var(--dark-accent-blue) !important;
}

body.dark-mode .nav-tabs {
    border-bottom-color: var(--dark-border) !important;
}

body.dark-mode .nav-tabs .nav-link {
    color: #a1a1aa !important;
    border-color: transparent !important;
}

body.dark-mode .nav-tabs .nav-link.active {
    background-color: var(--dark-bg-card) !important;
    color: var(--dark-accent-blue) !important;
    border-color: var(--dark-border) var(--dark-border) var(--dark-bg-card) !important;
}

body.dark-mode .avatar-lg {
    border-color: var(--dark-border) !important;
}

/* Customer Ledger Specific */
body.dark-mode .ledger-layout {
    background: #121212 !important;
}

body.dark-mode .contact-item {
    border-bottom: 1px solid var(--dark-border-subtle) !important;
    color: var(--dark-text-main) !important;
}

body.dark-mode .contact-item:hover {
    background: #2a2a2a !important;
}

body.dark-mode .contact-item.active {
    background: #1e3a5f !important;
    border-left: 4px solid var(--dark-accent-blue) !important;
}

body.dark-mode .statement-area {
    background-color: #121212 !important;
}

body.dark-mode .type-deposit {
    background: #14532d !important;
    color: #86efac !important;
    border: 1px solid #166534 !important;
}

body.dark-mode .type-withdraw {
    background: #7f1d1d !important;
    color: #fca5a5 !important;
    border: 1px solid #991b1b !important;
}

body.dark-mode .bal-badge,
body.dark-mode .closing-bal {
    color: var(--dark-blue-text) !important;
}

body.dark-mode .system-row td {
    background: #181818 !important;
}

body.dark-mode .system-msg {
    background: var(--dark-blue-badge-bg) !important;
    color: var(--dark-blue-badge-text) !important;
}

/* Order Master Details / Slip */
body.dark-mode .estimate-slip {
    background: #1f1f1f !important;
    border: 1px solid var(--dark-border) !important;
    color: #f4f4f5 !important;
}

body.dark-mode .slip-table th {
    background: #262626 !important;
    color: #ffffff !important;
    border: 1px solid var(--dark-border) !important;
}

body.dark-mode .slip-table td {
    background: #1f1f1f !important;
    color: #e4e4e7 !important;
    border: 1px solid var(--dark-border) !important;
}

body.dark-mode .summary-card {
    background: #1f1f1f !important;
}

/* Product Code Grid */
body.dark-mode .code-box:hover {
    background-color: #2d2d2d !important;
    border-color: var(--dark-accent-blue) !important;
}

/* Bill Add Custom Elements */
body.dark-mode .details-box {
    background-color: #1a1a1a !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .grid-container .input-pair label {
    color: #a1a1aa !important;
}

body.dark-mode .total-display {
    color: var(--dark-blue-text) !important;
}

body.dark-mode #suggestedMaking {
    background-color: #2a2a2a !important;
    color: var(--dark-blue-text) !important;
    border: 1px solid #3f3f46 !important;
}

body.dark-mode .details-footer {
    border-top: 1px solid var(--dark-border) !important;
}

body.dark-mode .gst-row {
    border-left: 1px solid var(--dark-border) !important;
    border-right: 1px solid var(--dark-border) !important;
}

body.dark-mode .label-gst {
    color: #f87171 !important;
}

body.dark-mode .label-total {
    color: var(--dark-blue-text) !important;
}

body.dark-mode #mainLoader {
    background: rgba(18, 18, 18, 0.88) !important;
}

/* ==========================================================================
   AUTOCOMPLETE DROPDOWN (Customer Name, Phone No, Salesman) IN DARK MODES
   ========================================================================== */
body.dark-mode .autocomplete-items {
    background: var(--dark-bg-card) !important;
    border: 1px solid var(--dark-border) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6) !important;
    scrollbar-color: #4b5563 var(--dark-bg-body) !important;
}

body.dark-mode .autocomplete-items::-webkit-scrollbar-track {
    background: var(--dark-bg-body) !important;
}

body.dark-mode .autocomplete-items::-webkit-scrollbar-thumb {
    background: #4b5563 !important;
}

body.dark-mode .autocomplete-items::-webkit-scrollbar-thumb:hover {
    background: #6b7280 !important;
}

body.dark-mode .autocomplete-items > div {
    border-bottom: 1px solid var(--dark-border-subtle) !important;
    color: var(--dark-text-main) !important;
    background: transparent !important;
}

body.dark-mode .autocomplete-items > div:hover,
body.dark-mode .autocomplete-items > div.active {
    background: var(--dark-accent-hover) !important;
    color: #ffffff !important;
}

body.dark-mode .autocomplete-items .ac-name {
    color: var(--dark-text-heading) !important;
    font-weight: 600 !important;
}

body.dark-mode .autocomplete-items .ac-phone {
    color: var(--dark-accent-blue) !important;
    font-weight: 600 !important;
}

body.dark-mode .autocomplete-items .ac-addr {
    color: var(--dark-text-muted) !important;
}

body.dark-mode .autocomplete-items .ac-tag {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: var(--dark-text-main) !important;
}

body.dark-mode .autocomplete-items .no-result,
body.dark-mode .autocomplete-items div.text-muted {
    color: var(--dark-text-muted) !important;
}

body.dark-mode .autocomplete-items > div:hover .ac-name,
body.dark-mode .autocomplete-items > div.active .ac-name {
    color: #ffffff !important;
}

body.dark-mode .autocomplete-items > div:hover .ac-phone,
body.dark-mode .autocomplete-items > div.active .ac-phone {
    color: #93c5fd !important;
}

body.dark-mode .autocomplete-items > div:hover .ac-addr,
body.dark-mode .autocomplete-items > div.active .ac-addr {
    color: #cbd5e1 !important;
}

/* ==========================================================================
   9. INLINE STYLE FORCING / OVERRIDE CATCH-ALL
   ========================================================================== */
body.dark-mode [style*="background: #fff"],
body.dark-mode [style*="background-color: #fff"],
body.dark-mode [style*="background: white"],
body.dark-mode [style*="background-color: white"],
body.dark-mode [style*="background:#fff"],
body.dark-mode [style*="background-color:#fff"],
body.dark-mode [style*="background:white"],
body.dark-mode [style*="background-color:white"] {
    background-color: var(--dark-bg-card) !important;
}

body.dark-mode [style*="background: #f8f9fa"],
body.dark-mode [style*="background-color: #f8f9fa"],
body.dark-mode [style*="background:#f8f9fa"],
body.dark-mode [style*="background-color:#f8f9fa"],
body.dark-mode [style*="background: #f5f7fa"],
body.dark-mode [style*="background-color: #f5f7fa"] {
    background-color: var(--dark-bg-body) !important;
}

body.dark-mode [style*="color: #000"],
body.dark-mode [style*="color: #2d3748"],
body.dark-mode [style*="color: #333"],
body.dark-mode [style*="color: #444"],
body.dark-mode [style*="color: #555"],
body.dark-mode [style*="color:#000"],
body.dark-mode [style*="color:#2d3748"],
body.dark-mode [style*="color:#333"],
body.dark-mode [style*="color:#444"],
body.dark-mode [style*="color:#555"] {
    color: var(--dark-text-heading) !important;
}

body.dark-mode [style*="color: #666"],
body.dark-mode [style*="color: #718096"],
body.dark-mode [style*="color:#666"],
body.dark-mode [style*="color:#718096"] {
    color: var(--dark-text-muted) !important;
}

body.dark-mode [style*="border-color: #ddd"],
body.dark-mode [style*="border-color: #eee"],
body.dark-mode [style*="border-color:#ddd"],
body.dark-mode [style*="border-color:#eee"] {
    border-color: var(--dark-border) !important;
}

/* ==========================================================================
   10. UI ZOOM CONTROLLER CONTROLS IN HEADER
   ========================================================================== */
.theme-controller-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.theme-btn,
.zoom-btn {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    user-select: none;
}

.theme-btn:hover,
.zoom-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    transform: translateY(-1px);
}

.zoom-display-badge {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 6px;
    min-width: 44px;
    text-align: center;
}

/* ==========================================================================
   11. LOGIN PAGE (index.php) COLOR MODE SCHEMA
   ========================================================================== */
body.dark-mode {
    background-color: var(--dark-bg-body) !important;
    background-image: radial-gradient(at 0% 0%, rgba(30, 41, 59, 0.4) 0, transparent 50%), radial-gradient(at 100% 0%, rgba(15, 23, 42, 0.5) 0, transparent 50%) !important;
}

body.dark-mode .container#container {
    background: var(--dark-bg-card) !important;
    border: 1px solid var(--dark-border) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6) !important;
}

body.dark-mode .form-container {
    background: var(--dark-bg-card) !important;
}

body.dark-mode .form-container h1 {
    color: var(--dark-text-heading) !important;
}

body.dark-mode .form-container .subtitle {
    color: var(--dark-text-muted) !important;
}

body.dark-mode .input-field input {
    background: var(--dark-input-bg) !important;
    color: var(--dark-input-text) !important;
    border-color: var(--dark-input-border) !important;
}

body.dark-mode .input-field input:focus {
    background: var(--dark-bg-card) !important;
    border-color: var(--dark-accent-blue) !important;
    box-shadow: 0 0 0 4px rgba(96, 205, 255, 0.15) !important;
}

body.dark-mode .input-field i {
    color: var(--dark-text-muted) !important;
}

body.dark-mode .forgot-pass {
    color: var(--dark-blue-text) !important;
}

body.dark-mode .social-text {
    color: var(--dark-text-muted) !important;
}

body.dark-mode .social-text::before,
body.dark-mode .social-text::after {
    background: var(--dark-border) !important;
}

body.dark-mode .social-links a {
    border-color: var(--dark-border) !important;
    color: var(--dark-text-main) !important;
    background: var(--dark-bg-sub) !important;
}

body.dark-mode .social-links a:hover {
    background: var(--dark-accent-blue) !important;
    color: #fff !important;
    border-color: var(--dark-accent-blue) !important;
}

body.dark-mode .dev-pill {
    background: var(--dark-bg-card) !important;
    border-color: var(--dark-border) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .crafted-by,
body.dark-mode .dev-phone {
    color: var(--dark-text-muted) !important;
}

body.dark-mode .dev-phone:hover {
    color: var(--dark-text-heading) !important;
}

body.dark-mode .dev-pill .divider {
    background: var(--dark-border) !important;
}

body.dark-mode .theme-toggle-login-btn {
    background: var(--dark-bg-card) !important;
    color: var(--dark-text-main) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .overlay-container {
    background: linear-gradient(135deg, #152238 0%, #1e3a5f 100%) !important;
    border-left: 1px solid var(--dark-border) !important;
}

body.dark-mode.comfort-mode .overlay-container {
    background: linear-gradient(135deg, #0f1e36 0%, #1b2f4f 100%) !important;
}

body.dark-mode.grey-mode .overlay-container {
    background: linear-gradient(135deg, #242933 0%, #2f3644 100%) !important;
}

body.dark-mode .btn-grad {
    background: linear-gradient(135deg, #1e3c72, #2a5298) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .btn-grad:hover {
    background: linear-gradient(135deg, #254a8d, #3363b5) !important;
    box-shadow: 0 10px 25px rgba(37, 74, 141, 0.5) !important;
}

/* ==========================================================================
   12. CODE BADGE CONTRAST & HOVER ACROSS ALL THEMES
   ========================================================================== */
body.dark-mode .code-badge,
html.dark-mode .code-badge {
    background-color: var(--dark-blue-badge-bg) !important;
    color: var(--dark-blue-badge-text) !important;
    border: 1px solid var(--dark-blue-badge-border) !important;
}

body.dark-mode .code-badge:hover,
html.dark-mode .code-badge:hover {
    background-color: var(--dark-blue-btn-bg) !important;
    color: #ffffff !important;
    border-color: var(--dark-blue-btn-border) !important;
    box-shadow: 0 0 8px rgba(56, 139, 253, 0.4) !important;
}

body.dark-mode .table-hover tbody tr:hover .code-badge,
body.dark-mode table tbody tr:hover .code-badge {
    background-color: var(--dark-blue-badge-bg) !important;
    color: var(--dark-blue-badge-text) !important;
}

body.dark-mode .table-hover tbody tr:hover .code-badge:hover,
body.dark-mode table tbody tr:hover .code-badge:hover {
    background-color: var(--dark-blue-btn-bg) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   13. MAIN FOOTER COLOR & BACKGROUND ADAPTATION ACROSS MODES
   ========================================================================== */
/* Mode 2: Edge Charcoal Dark Mode */
body.dark-mode .main-footer,
html.dark-mode .main-footer {
    background: linear-gradient(135deg, #141414 0%, #1f1f1f 100%) !important;
    color: var(--dark-text-main) !important;
    border-top: 1px solid var(--dark-border) !important;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .main-footer a,
html.dark-mode .main-footer a {
    color: var(--dark-accent-blue) !important;
}

body.dark-mode .main-footer a:hover,
html.dark-mode .main-footer a:hover {
    color: #93c5fd !important;
}

body.dark-mode .main-footer .btn-support,
html.dark-mode .main-footer .btn-support {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid var(--dark-border) !important;
    color: var(--dark-text-main) !important;
}

body.dark-mode .main-footer .btn-support:hover,
html.dark-mode .main-footer .btn-support:hover {
    background: var(--dark-accent-hover) !important;
    color: #ffffff !important;
    border-color: var(--dark-accent-blue) !important;
}

/* Mode 3: Eye-Care Comfort Midnight Slate Mode */
body.dark-mode.comfort-mode .main-footer,
html.dark-mode.comfort-mode .main-footer {
    background: linear-gradient(135deg, #161b21 0%, #222933 100%) !important;
    color: #d1d9e2 !important;
    border-top: 1px solid #384353 !important;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.35) !important;
}

body.dark-mode.comfort-mode .main-footer a,
html.dark-mode.comfort-mode .main-footer a {
    color: #7dd3fc !important;
}

body.dark-mode.comfort-mode .main-footer a:hover,
html.dark-mode.comfort-mode .main-footer a:hover {
    color: #bae6fd !important;
}

body.dark-mode.comfort-mode .main-footer .btn-support,
html.dark-mode.comfort-mode .main-footer .btn-support {
    background: #2b3340 !important;
    border: 1px solid #384353 !important;
    color: #d1d9e2 !important;
}

body.dark-mode.comfort-mode .main-footer .btn-support:hover,
html.dark-mode.comfort-mode .main-footer .btn-support:hover {
    background: #333f50 !important;
    color: #ffffff !important;
    border-color: #7dd3fc !important;
}

/* Mode 4: Neutral Modern Slate Grey Mode */
body.dark-mode.grey-mode .main-footer,
html.dark-mode.grey-mode .main-footer {
    background: linear-gradient(135deg, #24262b 0%, #36393f 100%) !important;
    color: #dcddde !important;
    border-top: 1px solid #4f545c !important;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.35) !important;
}

body.dark-mode.grey-mode .main-footer a,
html.dark-mode.grey-mode .main-footer a {
    color: #60a5fa !important;
}

body.dark-mode.grey-mode .main-footer a:hover,
html.dark-mode.grey-mode .main-footer a:hover {
    color: #93c5fd !important;
}

body.dark-mode.grey-mode .main-footer .btn-support,
html.dark-mode.grey-mode .main-footer .btn-support {
    background: #40444b !important;
    border: 1px solid #4f545c !important;
    color: #dcddde !important;
}

body.dark-mode.grey-mode .main-footer .btn-support:hover,
html.dark-mode.grey-mode .main-footer .btn-support:hover {
    background: #4f545c !important;
    color: #ffffff !important;
    border-color: #60a5fa !important;
}

/* ==========================================================================
   14. BILL & ORDER SLIP VIEW (bill.php) ADAPTATION ACROSS ALL MODES
   ========================================================================== */
/* Mode 2: Edge Charcoal Dark Mode */
body.dark-mode .bill-container,
html.dark-mode .bill-container {
    background-color: var(--dark-bg-card) !important;
    color: var(--dark-text-main) !important;
    border-color: var(--dark-border) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .company-name,
html.dark-mode .company-name {
    color: #79c0ff !important;
}

body.dark-mode .bill-header,
html.dark-mode .bill-header {
    border-color: var(--dark-border) !important;
}

body.dark-mode .cust-info-box,
body.dark-mode .bill-container .bg-light,
html.dark-mode .cust-info-box,
html.dark-mode .bill-container .bg-light {
    background-color: var(--dark-bg-body) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-main) !important;
}

body.dark-mode .bill-items-table th,
html.dark-mode .bill-items-table th {
    background-color: var(--dark-bg-body) !important;
    color: var(--dark-text-heading) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .bill-items-table td,
html.dark-mode .bill-items-table td {
    border-color: var(--dark-border) !important;
    color: var(--dark-text-main) !important;
}

body.dark-mode .bill-totals,
html.dark-mode .bill-totals {
    background-color: var(--dark-bg-body) !important;
    border: 1px solid var(--dark-border) !important;
    color: var(--dark-text-main) !important;
}

body.dark-mode .grand-total,
html.dark-mode .grand-total {
    border-color: var(--dark-border) !important;
    color: #ffffff !important;
}

body.dark-mode .slip-table th,
html.dark-mode .slip-table th {
    background-color: var(--dark-bg-body) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-heading) !important;
}

body.dark-mode .slip-table td,
html.dark-mode .slip-table td {
    border-color: var(--dark-border) !important;
    color: var(--dark-text-main) !important;
}

body.dark-mode .bill-container .table,
html.dark-mode .bill-container .table {
    color: var(--dark-text-main) !important;
}

body.dark-mode .bill-container h5,
body.dark-mode .bill-container h6,
html.dark-mode .bill-container h5,
html.dark-mode .bill-container h6 {
    color: var(--dark-text-heading) !important;
}

/* Mode 3: Eye-Care Comfort Midnight Slate Mode */
body.dark-mode.comfort-mode .bill-container,
html.dark-mode.comfort-mode .bill-container {
    background-color: #1a202c !important;
    border-color: #384353 !important;
    color: #d1d9e2 !important;
}

body.dark-mode.comfort-mode .company-name,
html.dark-mode.comfort-mode .company-name {
    color: #7dd3fc !important;
}

body.dark-mode.comfort-mode .cust-info-box,
body.dark-mode.comfort-mode .bill-container .bg-light,
html.dark-mode.comfort-mode .cust-info-box,
html.dark-mode.comfort-mode .bill-container .bg-light {
    background-color: #141821 !important;
    border-color: #384353 !important;
    color: #d1d9e2 !important;
}

body.dark-mode.comfort-mode .bill-items-table th,
html.dark-mode.comfort-mode .bill-items-table th {
    background-color: #141821 !important;
    color: #e2e8f0 !important;
    border-color: #384353 !important;
}

body.dark-mode.comfort-mode .bill-items-table td,
html.dark-mode.comfort-mode .bill-items-table td {
    border-color: #2d3748 !important;
    color: #d1d9e2 !important;
}

body.dark-mode.comfort-mode .bill-totals,
html.dark-mode.comfort-mode .bill-totals {
    background-color: #141821 !important;
    border-color: #384353 !important;
    color: #d1d9e2 !important;
}

/* Mode 4: Neutral Modern Slate Grey Mode */
body.dark-mode.grey-mode .bill-container,
html.dark-mode.grey-mode .bill-container {
    background-color: #2f3136 !important;
    border-color: #4f545c !important;
    color: #dcddde !important;
}

body.dark-mode.grey-mode .company-name,
html.dark-mode.grey-mode .company-name {
    color: #60a5fa !important;
}

body.dark-mode.grey-mode .cust-info-box,
body.dark-mode.grey-mode .bill-container .bg-light,
html.dark-mode.grey-mode .cust-info-box,
html.dark-mode.grey-mode .bill-container .bg-light {
    background-color: #24262b !important;
    border-color: #4f545c !important;
    color: #dcddde !important;
}

body.dark-mode.grey-mode .bill-items-table th,
html.dark-mode.grey-mode .bill-items-table th {
    background-color: #24262b !important;
    color: #f2f3f5 !important;
    border-color: #4f545c !important;
}

body.dark-mode.grey-mode .bill-items-table td,
html.dark-mode.grey-mode .bill-items-table td {
    border-color: #3f434a !important;
    color: #dcddde !important;
}

body.dark-mode.grey-mode .bill-totals,
html.dark-mode.grey-mode .bill-totals {
    background-color: #24262b !important;
    border-color: #4f545c !important;
    color: #dcddde !important;
}

/* Action Buttons Contrast in Dark Mode */
body.dark-mode .btn-print-action.btn-outline-secondary,
html.dark-mode .btn-print-action.btn-outline-secondary {
    border-color: var(--dark-border) !important;
    color: var(--dark-text-main) !important;
    background-color: var(--dark-bg-card) !important;
}

body.dark-mode .btn-print-action.btn-outline-secondary:hover,
html.dark-mode .btn-print-action.btn-outline-secondary:hover {
    background-color: var(--dark-accent-blue) !important;
    color: #ffffff !important;
    border-color: var(--dark-accent-blue) !important;
}

/* Always force clean pure white page for physical printing */
@media print {
    body, html, #printableArea, .bill-container, .bill-items-table, .bill-totals, .bg-light {
        background-color: #ffffff !important;
        background: #ffffff !important;
        color: #000000 !important;
        box-shadow: none !important;
    }
    .company-name, .grand-total, .bill-header h5 {
        color: #000000 !important;
    }
    .bill-items-table th {
        background-color: #f1f1f1 !important;
        color: #000000 !important;
        border-bottom: 2px solid #444 !important;
    }
    .bill-items-table td {
        border-bottom: 1px solid #ccc !important;
        color: #000000 !important;
    }
    .bill-totals {
        background-color: #f9f9f9 !important;
        border: 1px solid #ccc !important;
    }
}

/* ==========================================================================
   15. LOGIN PAGE (index.php) THEME ADAPTATION
   ========================================================================== */
/* Mode 2: Edge Charcoal Dark Mode */
body.dark-mode .container#container,
html.dark-mode .container#container {
    background: #1f1f1f !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6) !important;
    border: 1px solid #333333 !important;
}

body.dark-mode .form-container,
html.dark-mode .form-container {
    background: #1f1f1f !important;
}

body.dark-mode .form-container h1,
html.dark-mode .form-container h1 {
    color: #ffffff !important;
}

body.dark-mode .form-container .subtitle,
html.dark-mode .form-container .subtitle {
    color: #a1a1aa !important;
}

body.dark-mode .input-field input,
html.dark-mode .input-field input {
    background: #141414 !important;
    color: #ffffff !important;
    border: 2px solid #2d2d2d !important;
}

body.dark-mode .input-field input:focus,
html.dark-mode .input-field input:focus {
    background: #1c1c1c !important;
    border-color: #58a6ff !important;
    box-shadow: 0 0 0 4px rgba(88, 166, 255, 0.15) !important;
}

body.dark-mode .input-field i,
html.dark-mode .input-field i {
    color: #71717a !important;
}

body.dark-mode .forgot-pass,
html.dark-mode .forgot-pass {
    color: #58a6ff !important;
}

body.dark-mode .dev-pill,
html.dark-mode .dev-pill {
    background: #1f1f1f !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4) !important;
    border: 1px solid #333333 !important;
}

body.dark-mode .dev-pill .crafted-by,
html.dark-mode .dev-pill .crafted-by {
    color: #a1a1aa !important;
}

body.dark-mode .dev-pill .company-name,
html.dark-mode .dev-pill .company-name {
    color: #79c0ff !important;
}

body.dark-mode .dev-pill .divider,
html.dark-mode .dev-pill .divider {
    background: #333333 !important;
}

body.dark-mode .dev-pill .dev-phone,
html.dark-mode .dev-pill .dev-phone {
    color: #e4e4e7 !important;
}

body.dark-mode .social-links a,
html.dark-mode .social-links a {
    background: #141414 !important;
    border-color: #333333 !important;
    color: #a1a1aa !important;
}

body.dark-mode .social-links a:hover,
html.dark-mode .social-links a:hover {
    background: #1f6feb !important;
    color: #ffffff !important;
    border-color: #1f6feb !important;
}

body.dark-mode .social-text,
html.dark-mode .social-text {
    color: #71717a !important;
}

body.dark-mode .social-text::before,
body.dark-mode .social-text::after,
html.dark-mode .social-text::before,
html.dark-mode .social-text::after {
    background: #333333 !important;
}

body.dark-mode .theme-toggle-login-btn,
html.dark-mode .theme-toggle-login-btn {
    background: rgba(31, 31, 31, 0.9) !important;
    color: #ffffff !important;
    border-color: #333333 !important;
}

/* Mode 3: Eye-Care Comfort Midnight Slate Mode */
body.dark-mode.comfort-mode .container#container,
html.dark-mode.comfort-mode .container#container {
    background: #222933 !important;
    border-color: #384353 !important;
}

body.dark-mode.comfort-mode .form-container,
html.dark-mode.comfort-mode .form-container {
    background: #222933 !important;
}

body.dark-mode.comfort-mode .input-field input,
html.dark-mode.comfort-mode .input-field input {
    background: #181d24 !important;
    border-color: #384353 !important;
    color: #d1d9e2 !important;
}

body.dark-mode.comfort-mode .dev-pill,
html.dark-mode.comfort-mode .dev-pill {
    background: #222933 !important;
    border-color: #384353 !important;
}

body.dark-mode.comfort-mode .dev-pill .company-name,
html.dark-mode.comfort-mode .dev-pill .company-name {
    color: #7dd3fc !important;
}

/* Mode 4: Neutral Modern Slate Grey Mode */
body.dark-mode.grey-mode .container#container,
html.dark-mode.grey-mode .container#container {
    background: #2f3136 !important;
    border-color: #4f545c !important;
}

body.dark-mode.grey-mode .form-container,
html.dark-mode.grey-mode .form-container {
    background: #2f3136 !important;
}

body.dark-mode.grey-mode .input-field input,
html.dark-mode.grey-mode .input-field input {
    background: #24262b !important;
    border-color: #4f545c !important;
    color: #dcddde !important;
}

body.dark-mode.grey-mode .dev-pill,
html.dark-mode.grey-mode .dev-pill {
    background: #2f3136 !important;
    border-color: #4f545c !important;
}

body.dark-mode.grey-mode .dev-pill .company-name,
html.dark-mode.grey-mode .dev-pill .company-name {
    color: #60a5fa !important;
}

/* ==========================================================================
   16. SWEETALERT2 MODAL MULTI-THEME ADAPTATION
   ========================================================================== */
.swal2-popup.swal-custom-popup {
    border-radius: 20px !important;
    padding: 26px 22px !important;
    font-family: 'Poppins', sans-serif !important;
}

.swal2-popup.swal-custom-popup .swal2-title {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
}

.swal2-popup.swal-custom-popup .swal2-html-container {
    font-size: 0.92rem !important;
    line-height: 1.55 !important;
}

body.dark-mode .swal2-popup,
html.dark-mode .swal2-popup {
    background: #1f1f1f !important;
    color: #e4e4e7 !important;
    border: 1px solid #333333 !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75) !important;
}

body.dark-mode .swal2-title,
html.dark-mode .swal2-title {
    color: #ffffff !important;
}

body.dark-mode .swal2-html-container,
html.dark-mode .swal2-html-container {
    color: #a1a1aa !important;
}

body.dark-mode.comfort-mode .swal2-popup,
html.dark-mode.comfort-mode .swal2-popup {
    background: #222933 !important;
    border-color: #384353 !important;
    color: #d1d9e2 !important;
}

body.dark-mode.comfort-mode .swal2-title,
html.dark-mode.comfort-mode .swal2-title {
    color: #f1f5f9 !important;
}

body.dark-mode.comfort-mode .swal2-html-container,
html.dark-mode.comfort-mode .swal2-html-container {
    color: #8b99a8 !important;
}

body.dark-mode.grey-mode .swal2-popup,
html.dark-mode.grey-mode .swal2-popup {
    background: #2f3136 !important;
    border-color: #4f545c !important;
    color: #dcddde !important;
}

body.dark-mode.grey-mode .swal2-title,
html.dark-mode.grey-mode .swal2-title {
    color: #ffffff !important;
}

body.dark-mode.grey-mode .swal2-html-container,
html.dark-mode.grey-mode .swal2-html-container {
    color: #b9bbbe !important;
}

/* ==========================================================================
   19. AUTOCOMPLETE DROPDOWN ADAPTATION ACROSS ALL THEMES
   ========================================================================== */
body.dark-mode .autocomplete-items,
html.dark-mode .autocomplete-items {
    background: var(--dark-bg-card, #1f1f1f) !important;
    border: 1px solid var(--dark-border, #333333) !important;
    color: var(--dark-text-main, #e4e4e7) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65) !important;
}

body.dark-mode .autocomplete-items .autocomplete-item,
html.dark-mode .autocomplete-items .autocomplete-item {
    border-bottom: 1px solid var(--dark-border-subtle, #292929) !important;
    color: var(--dark-text-main, #e4e4e7) !important;
    border-left: 5px solid transparent !important;
    background: transparent !important;
}

body.dark-mode .autocomplete-items .autocomplete-item .ac-name,
html.dark-mode .autocomplete-items .autocomplete-item .ac-name {
    color: var(--dark-text-heading, #ffffff) !important;
}

body.dark-mode .autocomplete-items .autocomplete-item .ac-phone,
html.dark-mode .autocomplete-items .autocomplete-item .ac-phone {
    color: var(--dark-accent-blue, #58a6ff) !important;
}

body.dark-mode .autocomplete-items .autocomplete-item .ac-addr,
html.dark-mode .autocomplete-items .autocomplete-item .ac-addr {
    color: var(--dark-text-muted, #a1a1aa) !important;
}

body.dark-mode .autocomplete-items .autocomplete-item:hover,
body.dark-mode .autocomplete-items .autocomplete-item.active,
html.dark-mode .autocomplete-items .autocomplete-item:hover,
html.dark-mode .autocomplete-items .autocomplete-item.active {
    background: #1f6feb !important;
    color: #ffffff !important;
    border-left: 5px solid #f1e05a !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25) !important;
}

body.dark-mode .autocomplete-items .autocomplete-item:hover *,
body.dark-mode .autocomplete-items .autocomplete-item.active *,
html.dark-mode .autocomplete-items .autocomplete-item:hover *,
html.dark-mode .autocomplete-items .autocomplete-item.active * {
    color: #ffffff !important;
}

/* Comfort Dark Mode Autocomplete */
body.dark-mode.comfort-mode .autocomplete-items,
html.dark-mode.comfort-mode .autocomplete-items {
    background: #222933 !important;
    border-color: #384353 !important;
}

body.dark-mode.comfort-mode .autocomplete-items .autocomplete-item,
html.dark-mode.comfort-mode .autocomplete-items .autocomplete-item {
    border-bottom-color: #2b3340 !important;
}

body.dark-mode.comfort-mode .autocomplete-items .autocomplete-item:hover,
body.dark-mode.comfort-mode .autocomplete-items .autocomplete-item.active,
html.dark-mode.comfort-mode .autocomplete-items .autocomplete-item:hover,
html.dark-mode.comfort-mode .autocomplete-items .autocomplete-item.active {
    background: #2563eb !important;
    border-left: 5px solid #fbbf24 !important;
}

/* Grey Mode Autocomplete */
body.dark-mode.grey-mode .autocomplete-items,
html.dark-mode.grey-mode .autocomplete-items {
    background: #2f3136 !important;
    border-color: #4f545c !important;
}

body.dark-mode.grey-mode .autocomplete-items .autocomplete-item,
html.dark-mode.grey-mode .autocomplete-items .autocomplete-item {
    border-bottom-color: #36393f !important;
}

body.dark-mode.grey-mode .autocomplete-items .autocomplete-item:hover,
body.dark-mode.grey-mode .autocomplete-items .autocomplete-item.active,
html.dark-mode.grey-mode .autocomplete-items .autocomplete-item:hover,
html.dark-mode.grey-mode .autocomplete-items .autocomplete-item.active {
    background: #4752c4 !important;
    border-left: 5px solid #faa61a !important;
}