/* ========================================================================== DARK MODE CSS - POSPro Admin Panel ========================================================================== This file provides comprehensive dark mode support for the POSPro admin panel. It uses the html[data-theme="dark"] selector to override hardcoded colors. USAGE: 1. Include this CSS file after style.css and custom.css 2. Toggle dark mode by setting data-theme="dark" on the element: - document.documentElement.setAttribute('data-theme', 'dark') - document.documentElement.removeAttribute('data-theme') STRUCTURE: 1. CSS Variables (Dark Theme Values) 2. Base Styles (Body, Headings, Links) 3. Layout (Sidebar, Header, Main Content) 4. Components (Cards, Tables, Forms, Modals) 5. Dashboard Specific Styles 6. Utility Overrides ========================================================================== */ /* ========================================================================== 1. CSS VARIABLES - DARK THEME VALUES ========================================================================== */ html[data-theme="dark"] { /* ===== Follow pospro-dashboard (8).html — Dark Palette ===== */ /* Primary Colors */ --dm-bg-primary: #0D1119; --dm-bg-secondary: #10151F; --dm-bg-tertiary: #151B27; --dm-bg-elevated: #151B27; /* Surface Colors */ --dm-surface: #151B27; --dm-surface-hover: #1B222F; --dm-surface-active: #232B3A; /* Text Colors */ --dm-text-primary: #ECEFF6; --dm-text-secondary: #8B93A6; --dm-text-muted: #5B6478; --dm-text-accent: #8B93A6; /* Border Colors */ --dm-border: #232B3A; --dm-border-light: #1B222F; --dm-border-focus: #E4443B; /* Shadow */ --dm-shadow: 0 16px 36px rgba(0,0,0,.45); --dm-shadow-sm: 0 2px 8px rgba(0,0,0,0.3); --dm-shadow-lg: 0 8px 32px rgba(0,0,0,0.5); /* Scrollbar */ --dm-scrollbar-track: #10151F; --dm-scrollbar-thumb: #232B3A; --dm-scrollbar-thumb-hover: #5B6478; /* Input Colors */ --dm-input-bg: #10151F; --dm-input-border: #232B3A; --dm-input-focus: #E4443B; /* Dropdown */ --dm-dropdown-bg: #151B27; --dm-dropdown-hover: #1B222F; /* Table */ --dm-table-header-bg: #10151F; --dm-table-row-hover: #1B222F; --dm-table-border: #232B3A; /* Override existing variables for dark mode */ --clr-primary: #C52127; --clr-white2: #10151F; --clr-white3: #0D1119; --clr-gray3: #151B27; --clr-gray4: #1B222F; --accent-color: rgba(228,68,59,.14); } /* ========================================================================== 2. BASE STYLES ========================================================================== */ html[data-theme="dark"] body { background-color: var(--dm-bg-primary) !important; color: var(--dm-text-primary); } html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: var(--dm-text-primary); } html[data-theme="dark"] p { color: var(--dm-text-secondary); } html[data-theme="dark"] a, html[data-theme="dark"] button, html[data-theme="dark"] .btn, html[data-theme="dark"] ol li a, html[data-theme="dark"] ul li a { color: var(--dm-text-primary); } html[data-theme="dark"] a:hover, html[data-theme="dark"] .btn:hover, html[data-theme="dark"] ol li a:hover, html[data-theme="dark"] ul li a:hover { color: var(--clr-primary); } html[data-theme="dark"] b, html[data-theme="dark"] strong { color: var(--dm-text-primary) !important; } /* ========================================================================== 3. LAYOUT - SIDEBAR, HEADER, MAIN CONTENT ========================================================================== */ /* Main Wrapper */ html[data-theme="dark"] #main-wrapper { background: var(--dm-bg-primary); } /* Section Container */ html[data-theme="dark"] .section-container { background: var(--dm-bg-primary); } /* Sidebar - Dark mode background and hide scrollbar */ html[data-theme="dark"] .side-bar { background: var(--dm-surface) !important; box-shadow: 2px 0 12px rgba(0, 0, 0, 0.4); scrollbar-width: none; -ms-overflow-style: none; } html[data-theme="dark"] .side-bar::-webkit-scrollbar { display: none; } html[data-theme="dark"] .side-bar::-webkit-scrollbar-track { background: transparent; } html[data-theme="dark"] .side-bar-logo { border-bottom-color: var(--dm-border); } /* Sidebar active/hover state - Dark Mode */ html[data-theme="dark"] .side-bar-manu li:hover>a, html[data-theme="dark"] .side-bar-manu li.active>a { background: rgba(255, 255, 255, 0.06) !important; color: #ffffff !important; border-radius: 10px; } /* Hide left border indicator in dark mode */ html[data-theme="dark"] .side-bar-manu li.active::after, html[data-theme="dark"] .side-bar-manu li:hover::after { display: none !important; } html[data-theme="dark"] .side-bar-manu li.active>a .sidebar-icon svg, html[data-theme="dark"] .side-bar-manu li:hover>a .sidebar-icon svg { fill: var(--clr-primary) !important; } html[data-theme="dark"] .side-bar-manu li.active>a .sidebar-icon svg path, html[data-theme="dark"] .side-bar-manu li:hover>a .sidebar-icon svg path { fill: var(--clr-primary) !important; } /* Stroke-based icons (Affiliate, Subscription etc. use stroke="white") */ html[data-theme="dark"] .side-bar-manu li.active>a .sidebar-icon svg path[stroke], html[data-theme="dark"] .side-bar-manu li:hover>a .sidebar-icon svg path[stroke], html[data-theme="dark"] .side-bar-manu li.active>a .sidebar-icon svg circle[stroke], html[data-theme="dark"] .side-bar-manu li:hover>a .sidebar-icon svg circle[stroke], html[data-theme="dark"] .side-bar-manu li.active>a .sidebar-icon svg rect[stroke], html[data-theme="dark"] .side-bar-manu li:hover>a .sidebar-icon svg rect[stroke], html[data-theme="dark"] .side-bar-manu li.active>a .sidebar-icon svg [stroke], html[data-theme="dark"] .side-bar-manu li:hover>a .sidebar-icon svg [stroke] { stroke: var(--clr-primary) !important; } /* Business sidebar uses icons - apply primary filter on hover/active */ html[data-theme="dark"] .side-bar-manu li.active>a .sidebar-icon img, html[data-theme="dark"] .side-bar-manu li:hover>a .sidebar-icon img { filter: brightness(0) saturate(100%) invert(18%) sepia(85%) saturate(2800%) hue-rotate(348deg) brightness(95%) contrast(90%) !important; } /* Font-awesome icons */ html[data-theme="dark"] .side-bar-manu li.active>a i, html[data-theme="dark"] .side-bar-manu li:hover>a i { color: var(--clr-primary) !important; } html[data-theme="dark"] .side-bar-manu li:hover:before, html[data-theme="dark"] .side-bar-manu li.active:before { color: var(--clr-primary) !important; } html[data-theme="dark"] .side-bar-manu .dropdown.active>.dropdown-menu .dropdown.active>a, html[data-theme="dark"] .side-bar-manu .dropdown.active>.dropdown-menu .dropdown.active .active { background: rgba(255, 255, 255, 0.06) !important; border-radius: 10px; } html[data-theme="dark"] .side-bar-manu .dropdown.active .active { background-color: rgba(255, 255, 255, 0.06) !important; border-radius: 10px; } html[data-theme="dark"] .side-bar-manu li .dropdown-menu li a:hover, html[data-theme="dark"] .side-bar-manu li .dropdown-menu li a.active { color: #ffffff !important; background: rgba(255, 255, 255, 0.06) !important; border-radius: 10px; } /* Sidebar Category Headers - Dark Mode */ html[data-theme="dark"] .sb-cat-header { color: rgba(255, 255, 255, 0.25); } /* Sidebar Opener (hamburger icon) */ html[data-theme="dark"] .sidebar-opner { color: var(--dm-text-primary) !important; } /* Footer */ html[data-theme="dark"] .business-footer { background-color: var(--dm-surface) !important; color: var(--dm-text-primary); border-top-color: var(--dm-border); } html[data-theme="dark"] footer.bg-white { background-color: var(--dm-surface) !important; color: var(--dm-text-primary); border-top-color: var(--dm-border); } /* Language Dropdown Button */ html[data-theme="dark"] .language-dropdown { background-color: var(--dm-input-bg) !important; border-color: var(--dm-border) !important; color: var(--dm-text-primary) !important; } html[data-theme="dark"] .language-dropdown:hover { background-color: var(--dm-surface-hover) !important; } /* Bootstrap btn-light override for dark mode */ html[data-theme="dark"] .btn-light { background-color: var(--dm-input-bg) !important; border-color: var(--dm-border) !important; color: var(--dm-text-primary) !important; } html[data-theme="dark"] .btn-light:hover { background-color: var(--dm-surface-hover) !important; } /* Header */ html[data-theme="dark"] .main-header-section { background: var(--dm-surface) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important; } html[data-theme="dark"] .main-header-section .topbar-search svg { color: var(--dm-text-muted); } html[data-theme="dark"] .main-header-section .topbar-search input { background: var(--dm-input-bg); border-color: var(--dm-input-border); color: var(--dm-text-primary); } html[data-theme="dark"] .main-header-section .topbar-search input::placeholder { color: var(--dm-text-muted); } html[data-theme="dark"] .main-header-section .topbar-search input:focus { border-color: var(--clr-primary); background: var(--dm-input-bg); box-shadow: 0 0 0 4px color-mix(in srgb, var(--clr-primary) 20%, transparent); } html[data-theme="dark"] .main-header-section .profile-info .dropdown-menu { background: var(--dm-surface); box-shadow: var(--dm-shadow); } html[data-theme="dark"] .main-header-section .profile-info .dropdown-menu li { border-bottom-color: var(--dm-border); } html[data-theme="dark"] .main-header-section .profile-info .dropdown-menu li a { color: var(--dm-text-primary); } html[data-theme="dark"] .main-header-section .profile-info .dropdown-menu li a:hover { color: var(--clr-primary); } html[data-theme="dark"] .main-header-section .dropdown-menu { background: var(--dm-surface); } /* ========================================================================== 4. COMPONENTS - CARDS, TABLES, FORMS, MODALS ========================================================================== */ /* Cards */ html[data-theme="dark"] .card { background-color: var(--dm-surface) !important; box-shadow: var(--dm-shadow-sm); } html[data-theme="dark"] .cards { background-color: var(--dm-surface); } html[data-theme="dark"] .cards-header { background-color: var(--dm-surface); } html[data-theme="dark"] .return-card { background-color: var(--dm-surface); } html[data-theme="dark"] .dashboard-card { background: var(--dm-surface); box-shadow: var(--dm-shadow-sm); } html[data-theme="dark"] .business-stat-container { background-color: var(--dm-surface); box-shadow: var(--dm-shadow-sm); } html[data-theme="dark"] .dashborad-table-container { background-color: var(--dm-surface); box-shadow: var(--dm-shadow-sm); } html[data-theme="dark"] .tab-table-container { background-color: var(--dm-surface); } html[data-theme="dark"] .loss-profit-container { background-color: var(--dm-surface); box-shadow: var(--dm-shadow-sm); } html[data-theme="dark"] .erp-overview-item { background: var(--dm-surface); box-shadow: var(--dm-shadow-sm); } html[data-theme="dark"] .erp-graph-box { background: var(--dm-surface); box-shadow: var(--dm-shadow-sm); } html[data-theme="dark"] .state-overview-box { background: var(--dm-surface); box-shadow: var(--dm-shadow-sm); } html[data-theme="dark"] .gpt-dashboard-chart .couter-box { background: var(--dm-bg-elevated); } html[data-theme="dark"] .gpt-dashboard-chart .new-card { background-color: var(--dm-surface); box-shadow: var(--dm-shadow-sm); } html[data-theme="dark"] .subscription-plan-tabs .content { background: var(--dm-surface); } html[data-theme="dark"] .bank-account-info { background: var(--dm-surface); } html[data-theme="dark"] .login-wrapper { background: var(--dm-surface); } /* Tables */ html[data-theme="dark"] .table th { background: var(--dm-table-header-bg) !important; color: var(--dm-text-primary); border-color: var(--dm-table-border) !important; border-bottom-color: var(--dm-table-border) !important; border-top-color: var(--dm-table-border) !important; border-left-color: var(--dm-table-border) !important; border-right-color: var(--dm-table-border) !important; } html[data-theme="dark"] .table td { color: var(--dm-text-secondary); border-color: var(--dm-table-border) !important; border-bottom-color: var(--dm-table-border) !important; } html[data-theme="dark"] .table-bordered { border-color: var(--dm-table-border) !important; } html[data-theme="dark"] .table-bordered > :not(caption) > * > * { border-color: var(--dm-table-border) !important; border-bottom-color: var(--dm-table-border) !important; } /* Bootstrap .border class override for dark mode */ html[data-theme="dark"] .border { border-color: var(--dm-border) !important; } /* Amount info container and payment section borders */ html[data-theme="dark"] .amount-info-container { border-color: var(--dm-border) !important; } html[data-theme="dark"] .payment-container { border-color: var(--dm-border) !important; } html[data-theme="dark"] .sub-total-container { border-color: var(--dm-border) !important; } html[data-theme="dark"] .table-responsive { background: var(--dm-surface); } html[data-theme="dark"] .table-action .dropdown-menu { background: var(--dm-surface); box-shadow: var(--dm-shadow); } html[data-theme="dark"] .table-action .dropdown-menu a { color: var(--dm-text-secondary); } html[data-theme="dark"] .table-action .dropdown-menu a:hover { background: var(--dm-dropdown-hover); color: var(--clr-primary); } html[data-theme="dark"] .table-action .dropdown-menu a i { color: var(--dm-text-primary) !important; } html[data-theme="dark"] .table-action .dropdown-menu a:hover i { color: var(--clr-primary) !important; } /* Dropdown SVG icons - parties advance pay/collect and any other stroke-based icons */ html[data-theme="dark"] .table-action .dropdown-menu a svg path, html[data-theme="dark"] .table-action .dropdown-menu a svg circle, html[data-theme="dark"] .table-action .dropdown-menu a svg rect { stroke: var(--dm-text-primary) !important; } html[data-theme="dark"] .table-action .dropdown-menu a:hover svg path, html[data-theme="dark"] .table-action .dropdown-menu a:hover svg circle, html[data-theme="dark"] .table-action .dropdown-menu a:hover svg rect { stroke: var(--clr-primary) !important; } /* Ellipsis trigger button icon */ html[data-theme="dark"] .table-action button i, html[data-theme="dark"] .dropdown.table-action button i { color: var(--dm-text-secondary) !important; } html[data-theme="dark"] .table-action button:hover i { color: var(--dm-text-primary) !important; } html[data-theme="dark"] .gpt-dashboard-chart .table th { background-color: var(--dm-table-header-bg); color: var(--dm-text-primary); } html[data-theme="dark"] .gpt-dashboard-chart .table td { color: var(--dm-text-secondary); } html[data-theme="dark"] .dashboard-table-content thead th { background-color: var(--dm-table-header-bg); color: var(--dm-text-primary); border-bottom-color: var(--dm-table-border); } html[data-theme="dark"] .dashboard-table-content tbody td { color: var(--dm-text-secondary); } html[data-theme="dark"] .top-customer-table td { color: var(--dm-text-primary); } html[data-theme="dark"] .dashboard-card .dashboard-card-header { border-bottom-color: var(--dm-border); } html[data-theme="dark"] .dashboard-card .dashboard-card-header p, html[data-theme="dark"] .dashboard-card .dashboard-card-footer p { color: var(--dm-text-muted); } html[data-theme="dark"] .dashboard-card .dashboard-card-header h4 { color: var(--dm-text-primary); } html[data-theme="dark"] .gpt-dashboard-chart .card-header { background-color: var(--dm-surface); border-bottom-color: var(--dm-border); } html[data-theme="dark"] .gpt-dashboard-chart .feedback .table td { color: var(--dm-text-secondary); } /* Forms */ html[data-theme="dark"] .form-control { background-color: var(--dm-input-bg) !important; border-color: var(--dm-input-border) !important; color: var(--dm-text-primary); } html[data-theme="dark"] .form-control:focus { border-color: var(--dm-input-focus) !important; box-shadow: none !important; background-color: var(--dm-input-bg) !important; } html[data-theme="dark"] .form-control::placeholder { color: var(--dm-text-muted); } html[data-theme="dark"] .form-select { background-color: var(--dm-input-bg) !important; border-color: var(--dm-input-border) !important; color: var(--dm-text-primary); } html[data-theme="dark"] .gpt-up-down-arrow select, html[data-theme="dark"] .gpt-up-down-arrow .form-select, html[data-theme="dark"] .gpt-up-down-arrow select.form-control { background-image: none !important; } html[data-theme="dark"] .gpt-up-down-arrow span { border-bottom-color: var(--dm-text-muted) !important; border-right-color: var(--dm-text-muted) !important; } html[data-theme="dark"] .form-select:focus { border-color: var(--dm-input-focus) !important; box-shadow: none; } /* Date/Time/Month inputs - ensure dark bg instead of light */ html[data-theme="dark"] input[type="date"], html[data-theme="dark"] input[type="month"], html[data-theme="dark"] input[type="time"], html[data-theme="dark"] input[type="datetime-local"], html[data-theme="dark"] input[type="week"] { background-color: var(--dm-input-bg) !important; border-color: var(--dm-input-border) !important; color: var(--dm-text-primary) !important; color-scheme: dark !important; } html[data-theme="dark"] input[type="date"]::placeholder, html[data-theme="dark"] input[type="month"]::placeholder, html[data-theme="dark"] input[type="time"]::placeholder, html[data-theme="dark"] input[type="datetime-local"]::placeholder { color: var(--dm-text-muted) !important; } html[data-theme="dark"] input[type="date"]:focus, html[data-theme="dark"] input[type="month"]:focus, html[data-theme="dark"] input[type="time"]:focus, html[data-theme="dark"] input[type="datetime-local"]:focus { background-color: var(--dm-input-bg) !important; border-color: var(--clr-primary) !important; color: var(--dm-text-primary) !important; box-shadow: none !important; } /* Calendar picker icon - hide native icon, keep clickable overlay over custom white icon */ html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator, html[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator, html[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator, html[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator, html[data-theme="dark"] input[type="week"]::-webkit-calendar-picker-indicator { position: absolute !important; right: 0 !important; top: 0 !important; width: 38px !important; height: 100% !important; margin: 0 !important; padding: 0 !important; opacity: 0 !important; cursor: pointer !important; filter: none !important; } /* Custom white calendar icon - base rule */ html[data-theme="dark"] input[type="date"], html[data-theme="dark"] input[type="month"], html[data-theme="dark"] input[type="datetime-local"], html[data-theme="dark"] input[type="week"] { position: relative !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 10px center !important; background-size: 16px 16px !important; padding-right: 38px !important; } html[data-theme="dark"] input[type="time"] { position: relative !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 10px center !important; background-size: 16px 16px !important; padding-right: 38px !important; } /* Firefox date icon fallback - hide native */ html[data-theme="dark"] input[type="date"]::-moz-calendar-picker-indicator, html[data-theme="dark"] input[type="month"]::-moz-calendar-picker-indicator, html[data-theme="dark"] input[type="time"]::-moz-calendar-picker-indicator { opacity: 0 !important; filter: none !important; } /* Ensure date inputs inside all containers respect dark */ html[data-theme="dark"] .form-control[type="date"], html[data-theme="dark"] .form-control[type="month"], html[data-theme="dark"] .form-control[type="time"] { background-color: var(--dm-input-bg) !important; border-color: var(--dm-input-border) !important; color: var(--dm-text-primary) !important; color-scheme: dark !important; } html[data-theme="dark"] .order-form-section .form-control { background: var(--dm-input-bg) !important; border-color: var(--dm-input-border) !important; color: var(--dm-text-primary); } /* Quotation page: restore white calendar icon after background shorthand override */ html[data-theme="dark"] .order-form-section input[type="date"], html[data-theme="dark"] .order-form-section .form-control[type="date"], html[data-theme="dark"] .order-form-section input[type="month"], html[data-theme="dark"] .order-form-section .form-control[type="month"], html[data-theme="dark"] .order-form-section input[type="datetime-local"], html[data-theme="dark"] .order-form-section .form-control[type="datetime-local"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 10px center !important; background-size: 16px 16px !important; padding-right: 38px !important; } html[data-theme="dark"] .order-form-section input[type="time"], html[data-theme="dark"] .order-form-section .form-control[type="time"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 10px center !important; background-size: 16px 16px !important; padding-right: 38px !important; } html[data-theme="dark"] .order-form-section .form-control:focus { background-color: var(--dm-input-bg) !important; border-color: var(--dm-input-focus) !important; } html[data-theme="dark"] .order-form-section .form-control::placeholder { color: var(--dm-text-muted); } html[data-theme="dark"] .permission .form-control { background: var(--dm-input-bg) !important; border-color: var(--dm-input-border) !important; } html[data-theme="dark"] .modal-body .form-control { background: var(--dm-input-bg) !important; border-color: var(--dm-input-border) !important; color: var(--dm-text-primary); } html[data-theme="dark"] .table-top-form .form-control { color: var(--dm-text-primary); } html[data-theme="dark"] .table-top-left .form-control { border-color: var(--dm-input-border) !important; background: var(--dm-input-bg); color: var(--dm-text-primary); } html[data-theme="dark"] .input-wrapper input { background-color: var(--dm-input-bg); color: var(--dm-text-primary); } html[data-theme="dark"] .num-input { background-color: var(--dm-input-bg); } html[data-theme="dark"] .num-input input { background-color: var(--dm-input-bg); color: var(--dm-text-primary); } html[data-theme="dark"] .form-control-amount { background-color: var(--dm-input-bg); color: var(--dm-text-primary); } html[data-theme="dark"] .dataTables_wrapper select, html[data-theme="dark"] .dataTables_wrapper input { background-color: var(--dm-input-bg); border-color: var(--dm-input-border); color: var(--dm-text-primary); } /* Nice Select / Dropdowns */ html[data-theme="dark"] .nice-select { background: var(--dm-input-bg); border-color: var(--dm-input-border); color: var(--dm-text-primary); } html[data-theme="dark"] .nice-select:after { border-color: var(--dm-text-muted); } html[data-theme="dark"] .nice-select .list { background: var(--dm-dropdown-bg); border-color: var(--dm-border); box-shadow: var(--dm-shadow); } html[data-theme="dark"] .nice-select .list li { color: var(--dm-text-primary); } html[data-theme="dark"] .nice-select .list li:hover, html[data-theme="dark"] .nice-select .list li.selected { background: var(--dm-dropdown-hover); color: var(--clr-primary); } html[data-theme="dark"] .select-tow .list { background: var(--dm-dropdown-bg); } html[data-theme="dark"] .product-dropdown { border-color: var(--dm-border); background-color: var(--dm-surface); } html[data-theme="dark"] .product-dropdown-options { background: var(--dm-dropdown-bg); border-color: var(--dm-border); } html[data-theme="dark"] .product-option-group { border-top-color: var(--dm-border); } html[data-theme="dark"] .multi-items { border-bottom-color: var(--dm-border); } html[data-theme="dark"] .multi-items:hover { background-color: var(--dm-dropdown-hover); } html[data-theme="dark"] .product-option-item:hover { background-color: var(--dm-dropdown-hover); } /* Choice.js Select Dropdowns */ html[data-theme="dark"] .choices__inner { background-color: var(--dm-input-bg) !important; border-color: var(--dm-input-border) !important; color: var(--dm-text-primary); } html[data-theme="dark"] .choices[data-type*="select-one"] .choices__input { background-color: var(--dm-input-bg) !important; border-color: var(--dm-input-border) !important; color: var(--dm-text-primary); } html[data-theme="dark"] .choices__list--dropdown, html[data-theme="dark"] .choices__list[aria-expanded] { background-color: var(--dm-dropdown-bg) !important; border-color: var(--dm-border) !important; } html[data-theme="dark"] .choices__list--dropdown .choices__item, html[data-theme="dark"] .choices__list[aria-expanded] .choices__item { color: var(--dm-text-primary); } html[data-theme="dark"] .choices__list--dropdown .choices__item--selectable.is-highlighted, html[data-theme="dark"] .choices__list[aria-expanded] .choices__item--selectable.is-highlighted { background-color: var(--dm-dropdown-hover) !important; color: var(--clr-primary); } html[data-theme="dark"] .choices__placeholder { color: var(--dm-text-muted); } html[data-theme="dark"] .choices__list--single .choices__item { color: var(--dm-text-primary); } html[data-theme="dark"] .choices[data-type*="select-one"]::after { border-color: var(--dm-text-muted) transparent transparent; } html[data-theme="dark"] .choices[data-type*="select-one"].is-open::after { border-color: transparent transparent var(--dm-text-muted); } html[data-theme="dark"] .is-focused .choices__inner, html[data-theme="dark"] .is-open .choices__inner { border-color: var(--dm-input-focus) !important; } /* Select2 Dropdowns */ html[data-theme="dark"] .select2-container--default .select2-selection--single, html[data-theme="dark"] .select2-container--default .select2-selection--multiple { background-color: var(--dm-input-bg) !important; border-color: var(--dm-input-border) !important; } html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--dm-text-primary); } html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__rendered { color: var(--dm-text-primary); } html[data-theme="dark"] .select2-container--default .select2-selection__placeholder { color: var(--dm-text-muted); } html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: var(--dm-bg-tertiary); border-color: var(--dm-border); color: var(--dm-text-primary); } html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--dm-text-muted); } html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: var(--dm-text-primary); } html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--dm-text-muted) transparent transparent; } html[data-theme="dark"] .select2-container--default.select2-container--open .select2-selection__arrow b { border-color: transparent transparent var(--dm-text-muted); } html[data-theme="dark"] .select2-container--default .select2-selection--single, html[data-theme="dark"] .select2-container--default .select2-selection--multiple { min-height: 38px; } html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 36px; } html[data-theme="dark"] .select2-dropdown { background-color: var(--dm-dropdown-bg) !important; border-color: var(--dm-border) !important; } html[data-theme="dark"] .select2-container--default .select2-results__option { color: var(--dm-text-primary); } html[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected=true] { background-color: var(--dm-surface-active) !important; color: var(--dm-text-primary); } html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--clr-primary) !important; color: #fff !important; } html[data-theme="dark"] .select2-container--default .select2-results__option[aria-disabled=true] { color: var(--dm-text-muted); } html[data-theme="dark"] .select2-search--dropdown .select2-search__field { background-color: var(--dm-input-bg); border-color: var(--dm-input-border); color: var(--dm-text-primary); } html[data-theme="dark"] .select2-search--dropdown .select2-search__field::placeholder { color: var(--dm-text-muted); } html[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field { border: 1px solid var(--dm-input-border); } html[data-theme="dark"] .select2-container--default.select2-container--open .select2-selection--single, html[data-theme="dark"] .select2-container--default.select2-container--open .select2-selection--multiple, html[data-theme="dark"] .select2-container--default.select2-container--focus .select2-selection--single, html[data-theme="dark"] .select2-container--default.select2-container--focus .select2-selection--multiple { border-color: var(--dm-input-focus) !important; } html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__clear { color: var(--dm-text-muted); } /* Modals */ html[data-theme="dark"] .modal-content { background: var(--dm-surface); border-color: var(--dm-border); } html[data-theme="dark"] .modal-header { border-bottom-color: var(--dm-border); } html[data-theme="dark"] .modal-footer { border-top-color: var(--dm-border); } html[data-theme="dark"] .modal-custom-design h1 { color: var(--dm-text-primary); } html[data-theme="dark"] .modal-custom-design label { color: var(--dm-text-primary); } html[data-theme="dark"] .modal-body label { color: var(--dm-text-primary); background: var(--dm-surface); } html[data-theme="dark"] .modal-title { color: var(--dm-text-primary); } html[data-theme="dark"] .delete-modal h5, html[data-theme="dark"] .delete-modal p { color: var(--dm-text-primary); } /* Exit branch modal - dark mode */ html[data-theme="dark"] .custom-modal .modal-content { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; } html[data-theme="dark"] .custom-modal .modal-body h5 { color: var(--dm-text-primary) !important; } html[data-theme="dark"] .custom-modal .btn-no { border-color: var(--dm-border) !important; color: var(--dm-text-secondary) !important; background: var(--dm-input-bg) !important; } html[data-theme="dark"] .custom-modal .btn-no:hover { background: var(--dm-surface-hover) !important; border-color: var(--dm-text-muted) !important; color: var(--dm-text-primary) !important; } html[data-theme="dark"] .custom-modal .btn-yes { background: var(--clr-primary) !important; color: #fff !important; } /* ==================== VIEW MODALS DARK MODE ==================== */ html[data-theme="dark"] .modal-content { background: var(--dm-surface) !important; color: var(--dm-text-primary); border-color: var(--dm-border) !important; box-shadow: var(--dm-shadow-lg) !important; } html[data-theme="dark"] .modal-body { background: var(--dm-surface) !important; color: var(--dm-text-primary); } html[data-theme="dark"] .modal .btn-close { filter: invert(1) grayscale(100%) brightness(1.8) !important; opacity: 0.65; } html[data-theme="dark"] .modal .btn-close:hover { opacity: 1; } /* info-table used in all view modals */ html[data-theme="dark"] .info-table { background: transparent !important; } html[data-theme="dark"] .info-table td { color: var(--dm-text-secondary) !important; border-color: transparent !important; background: transparent !important; } html[data-theme="dark"] .info-table td:first-child { color: var(--dm-text-muted) !important; } html[data-theme="dark"] .info-table td:nth-child(2) { color: var(--dm-text-muted) !important; } html[data-theme="dark"] .info-table td:last-child { color: var(--dm-text-primary) !important; font-weight: 500; } html[data-theme="dark"] .info-table tr { border-bottom-color: var(--dm-border-light) !important; } /* costing-list used in User-view and other modals */ html[data-theme="dark"] .costing-list { background: transparent !important; } html[data-theme="dark"] .costing-list li { border-bottom-color: var(--dm-border-light) !important; } html[data-theme="dark"] .costing-list span { color: var(--dm-text-secondary) !important; } html[data-theme="dark"] .costing-list span:last-child { color: var(--dm-text-primary) !important; } html[data-theme="dark"] .costing-list span:nth-child(2) { color: var(--dm-text-muted) !important; } html[data-theme="dark"] .order-form-section .costing-list span { color: var(--dm-text-secondary) !important; } html[data-theme="dark"] .order-form-section .costing-list span:last-child { color: var(--dm-text-primary) !important; } /* personal-info used in business-view-modal */ html[data-theme="dark"] .personal-info p { color: var(--dm-text-secondary) !important; } html[data-theme="dark"] .personal-info .row p { color: var(--dm-text-secondary) !important; } html[data-theme="dark"] .personal-info .col-md-4 p { color: var(--dm-text-muted) !important; } html[data-theme="dark"] .personal-info .col-md-7 p { color: var(--dm-text-primary) !important; } html[data-theme="dark"] .personal-info .col-1 p { color: var(--dm-text-muted) !important; } /* order-form-section wrapper inside view modals */ html[data-theme="dark"] .order-form-section { background: transparent !important; } html[data-theme="dark"] .modal-body.order-form-section { background: var(--dm-surface) !important; } /* Table inside view modals (payment view, stock view etc) */ html[data-theme="dark"] .modal-body .table { background: var(--dm-surface) !important; } html[data-theme="dark"] .modal-body .table th { background: var(--dm-table-header-bg) !important; color: var(--dm-text-primary) !important; border-color: var(--dm-table-border) !important; } html[data-theme="dark"] .modal-body .table td { background: var(--dm-surface) !important; color: var(--dm-text-secondary) !important; border-color: var(--dm-table-border) !important; } html[data-theme="dark"] .modal-body .table-striped > tbody > tr:nth-of-type(odd) > td { background-color: var(--dm-bg-secondary) !important; } html[data-theme="dark"] .modal-body .table-bordered { border-color: var(--dm-table-border) !important; } html[data-theme="dark"] .modal-body .text-muted { color: var(--dm-text-muted) !important; } html[data-theme="dark"] .modal-body .text-center.text-muted { color: var(--dm-text-muted) !important; } /* View modal specific IDs - ensure full coverage */ html[data-theme="dark"] #business-view-modal .modal-content, html[data-theme="dark"] #User-view .modal-content, html[data-theme="dark"] #product-view .modal-content, html[data-theme="dark"] #parties-view .modal-content, html[data-theme="dark"] #bank-view .modal-content, html[data-theme="dark"] #cash-view .modal-content, html[data-theme="dark"] #warehouse-view .modal-content, html[data-theme="dark"] #employees-view .modal-content, html[data-theme="dark"] #view-payment-modal .modal-content, html[data-theme="dark"] #view-due-payment-modal .modal-content, html[data-theme="dark"] #expire-product-view .modal-content, html[data-theme="dark"] #combo-product-view .modal-content, html[data-theme="dark"] #view-transaction .modal-content, html[data-theme="dark"] #stock-modal-view .modal-content, html[data-theme="dark"] #subscriber-view-modal .modal-content, html[data-theme="dark"] #affiliate-view-modal .modal-content, html[data-theme="dark"] #payment-view-modal .modal-content, html[data-theme="dark"] #msg-log-view-modal .modal-content, html[data-theme="dark"] #loss-profit-view .modal-content, html[data-theme="dark"] #view-party-loss-profit-modal .modal-content { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; } html[data-theme="dark"] #business-view-modal .modal-header, html[data-theme="dark"] #User-view .modal-header, html[data-theme="dark"] #product-view .modal-header, html[data-theme="dark"] #parties-view .modal-header, html[data-theme="dark"] #bank-view .modal-header, html[data-theme="dark"] #cash-view .modal-header, html[data-theme="dark"] #warehouse-view .modal-header, html[data-theme="dark"] #employees-view .modal-header, html[data-theme="dark"] #view-payment-modal .modal-header, html[data-theme="dark"] #view-due-payment-modal .modal-header { border-bottom-color: var(--dm-border) !important; background: var(--dm-surface) !important; } html[data-theme="dark"] #business-view-modal .modal-title, html[data-theme="dark"] #User-view .modal-title, html[data-theme="dark"] #product-view .modal-title, html[data-theme="dark"] #parties-view .modal-title, html[data-theme="dark"] #bank-view .modal-title, html[data-theme="dark"] #cash-view .modal-title, html[data-theme="dark"] #warehouse-view .modal-title, html[data-theme="dark"] #employees-view .modal-title, html[data-theme="dark"] #view-payment-modal .modal-title, html[data-theme="dark"] #view-due-payment-modal .modal-title { color: var(--dm-text-primary) !important; } /* Table image in product view */ html[data-theme="dark"] .info-table .table-img { border: 1px solid var(--dm-border); background: var(--dm-input-bg); } /* Pagination */ html[data-theme="dark"] .pagination .page-link { color: var(--dm-text-muted); } html[data-theme="dark"] .pagination .page-link:hover { color: var(--clr-primary); } html[data-theme="dark"] .pagination .page-item.active .page-link { color: #fff; background: var(--clr-primary); } /* Dropdowns */ html[data-theme="dark"] .dropdown-menu { background: var(--dm-surface); border-color: var(--dm-border); box-shadow: var(--dm-shadow); } html[data-theme="dark"] .dropdown-item { color: var(--dm-text-primary); } html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:focus { background-color: var(--dm-dropdown-hover); color: var(--clr-primary); } html[data-theme="dark"] .dropdown-item:active { background-color: var(--clr-primary); color: #fff; } /* Notifications */ html[data-theme="dark"] .notifications .dropdown-menu { background: var(--dm-surface); } html[data-theme="dark"] .notifications ul li a { border-top-color: var(--dm-border); color: var(--dm-text-primary); } html[data-theme="dark"] .notifications ul li a span { color: var(--dm-text-muted); } html[data-theme="dark"] .notification-header { background: var(--dm-bg-elevated); border-bottom-color: var(--dm-border); } html[data-theme="dark"] .notification-header p { color: var(--dm-text-primary); } html[data-theme="dark"] .notification-header a { color: var(--clr-primary); } html[data-theme="dark"] .notification-footer { background: var(--dm-surface); border-top-color: var(--dm-border); } html[data-theme="dark"] .notification-footer a { color: var(--clr-primary); } /* Tooltips */ html[data-theme="dark"] .tooltip-inner { background-color: var(--dm-bg-elevated); color: var(--dm-text-primary); box-shadow: var(--dm-shadow); } /* Switch / Toggle */ html[data-theme="dark"] .slider { background-color: var(--dm-border); } html[data-theme="dark"] .slider:before { background-color: var(--dm-text-primary); } html[data-theme="dark"] input:checked + .slider { background-color: var(--clr-primary); } /* Theme Default Card - Dark mode perfect */ html[data-theme="dark"] .theme-default-card { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; box-shadow: var(--dm-shadow-sm); } html[data-theme="dark"] .theme-default-card__title { color: var(--dm-text-primary) !important; } html[data-theme="dark"] .theme-default-card__desc { color: var(--dm-text-muted) !important; } html[data-theme="dark"] .theme-default-card__icon { color: var(--clr-primary) !important; } html[data-theme="dark"] .theme-mode-label { color: var(--dm-text-muted) !important; } html[data-theme="dark"] .theme-mode-label.is-active { color: var(--dm-text-primary) !important; } html[data-theme="dark"] .theme-default-card .badge.bg-warning { background-color: #f59e0b !important; color: #111827 !important; } html[data-theme="dark"] .theme-default-card .badge.bg-dark { background-color: #0f172a !important; border: 1px solid var(--dm-border) !important; color: var(--dm-text-primary) !important; } html[data-theme="dark"] .nav-tabs { --bs-nav-tabs-border-color: var(--dm-border) !important; } /* Custom Tabs */ html[data-theme="dark"] .custom-tabs { border-bottom-color: var(--dm-border); } html[data-theme="dark"] .custom-tabs .tab-item { color: var(--dm-text-muted); } html[data-theme="dark"] .custom-tabs .tab-item.active { color: var(--clr-primary); } /* Checkbox */ html[data-theme="dark"] .table-custom-checkmark { border-color: var(--dm-border); } html[data-theme="dark"] .table-hidden-checkbox:checked + .table-custom-checkmark { background-color: var(--clr-primary); border-color: var(--clr-primary); } html[data-theme="dark"] .multi-delete { border-color: var(--dm-border) !important; background-color: var(--dm-input-bg); } html[data-theme="dark"] .user-check-box { border-color: var(--dm-border) !important; background-color: var(--dm-input-bg); } /* Search Input */ html[data-theme="dark"] .table-search .position-absolute { background-color: var(--dm-surface); } html[data-theme="dark"] .table-search .form-control { border-color: var(--dm-border); background: var(--dm-input-bg); color: var(--dm-text-primary); } html[data-theme="dark"] .table-search svg path { stroke: var(--dm-text-secondary) !important; } /* Upload Areas */ html[data-theme="dark"] .upload-img { background: var(--dm-surface); border-color: var(--dm-border); } html[data-theme="dark"] .upload-img p { color: var(--dm-text-muted); } html[data-theme="dark"] .upload-img-v2 label { background: var(--dm-surface); border-color: var(--dm-border); } html[data-theme="dark"] .settings-image-upload .title { background-color: var(--dm-surface); color: var(--dm-text-primary); } /* Products */ html[data-theme="dark"] .main-container { background-color: var(--dm-surface); } html[data-theme="dark"] .main-container .products-container { background-color: var(--dm-bg-secondary); } html[data-theme="dark"] .products .single-product { background-color: var(--dm-surface); border-color: var(--dm-border); } html[data-theme="dark"] .products .single-product:hover { border-color: var(--clr-primary); } html[data-theme="dark"] .products .single-product .pro-title { color: var(--dm-text-primary); } html[data-theme="dark"] .products .single-product .pro-price { color: var(--dm-text-primary); } html[data-theme="dark"] .products .single-product .pro-category { color: var(--dm-text-muted); } html[data-theme="dark"] .x-btn { background-color: var(--dm-surface); } html[data-theme="dark"] .x-btn:hover { background-color: var(--dm-surface-hover); } /* Sales Container */ html[data-theme="dark"] .sales-container { background-color: var(--dm-surface); } html[data-theme="dark"] .quick-act-header { background-color: var(--dm-surface); } html[data-theme="dark"] .sales-container .save-product-btn, html[data-theme="dark"] .sales-container .bulk-upload-btn, html[data-theme="dark"] .sales-container .sales-btn, html[data-theme="dark"] .sales-container .calculator-btn, html[data-theme="dark"] .sales-container .dashboard-btn { color: var(--dm-text-primary); } /* Payment Section */ html[data-theme="dark"] .payment-section .form-control[readonly] { background-color: var(--dm-input-bg) !important; } html[data-theme="dark"] .payment-container { background-color: var(--dm-bg-elevated); } html[data-theme="dark"] .increase-decrease { background-color: var(--dm-input-bg) !important; border-color: var(--dm-border) !important; } html[data-theme="dark"] .incre-decre { background-color: var(--dm-input-bg) !important; border-color: var(--dm-border) !important; color: var(--dm-text-primary) !important; } html[data-theme="dark"] .incre-decre:hover { background-color: var(--dm-surface-hover) !important; } /* Logo / Image Labels */ html[data-theme="dark"] label.img-label { background-color: transparent !important; } html[data-theme="dark"] label.upload-img-label { background-color: var(--dm-surface); } html[data-theme="dark"] .header-label { background: var(--dm-surface, #171530) !important; background-color: var(--dm-surface, #171530) !important; color: var(--dm-text-secondary, #a0a0a8) !important; } /* Custom From-To label - Dark & Light perfect support */ html[data-theme="dark"] .custom-from-to label, html[data-theme="dark"] .custom-from-to .header-label { background: var(--dm-surface, #171530) !important; background-color: var(--dm-surface, #171530) !important; color: var(--dm-text-secondary, #B7B2DC) !important; } html[data-theme="dark"] .custom-from-to:focus-within label, html[data-theme="dark"] .custom-from-to:focus-within .header-label { color: var(--clr-primary, #818cf8) !important; } /* Report filter white - dark mode floating label must match panel surface */ html[data-theme="dark"] .report-filter-form.sales-filter-white .custom-from-to label, html[data-theme="dark"] .report-filter-form.sales-filter-white .custom-from-to .header-label { background: var(--sl-surface, #0C0A1F) !important; background-color: var(--sl-surface, #0C0A1F) !important; color: var(--sl-ink-soft, #B7B2DC) !important; } html[data-theme="dark"] .report-filter-form.sales-filter-white .custom-from-to:focus-within label, html[data-theme="dark"] .report-filter-form.sales-filter-white .custom-from-to:focus-within .header-label { color: var(--sl-primary, #818cf8) !important; } /* ========================================================================== 5. DASHBOARD SPECIFIC STYLES ========================================================================== */ /* Nav Name / Greeting */ html[data-theme="dark"] .nav-name { color: var(--dm-text-primary); } html[data-theme="dark"] .nav-greeting { color: var(--dm-text-secondary); } /* Dashboard Table Header */ html[data-theme="dark"] .dashboard-table-header h3 { color: var(--dm-text-primary); } html[data-theme="dark"] .dashboard-table-header a { color: var(--clr-primary); } /* Business Stats */ html[data-theme="dark"] .bus-stat-title { color: var(--dm-text-secondary) !important; } html[data-theme="dark"] .bus-month-title { color: var(--dm-text-secondary) !important; } html[data-theme="dark"] .bus-stat-count { color: var(--dm-text-primary) !important; } html[data-theme="dark"] .bus-content { color: var(--dm-text-secondary) !important; } /* Table Header Section */ html[data-theme="dark"] .table-header h4 { color: var(--dm-text-primary); background: transparent; } html[data-theme="dark"] .table-header.p-16 { border-bottom-color: var(--dm-border); } html[data-theme="dark"] .table-header .button-group { border-bottom-color: var(--dm-border); } html[data-theme="dark"] .table-header .button-group a { color: var(--dm-text-muted) !important; } /* ========================================================================== Bank Transactions (business::banks.transactions.index) - Perfect Dark Mode ========================================================================== */ html[data-theme="dark"] .erp-table-section .card { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; } html[data-theme="dark"] .table-header { border-bottom-color: var(--dm-border) !important; } /* Balance Card - dark */ html[data-theme="dark"] .balance-card { background: linear-gradient(135deg, rgba(22,163,74,0.14) 0%, rgba(16,185,129,0.08) 100%) !important; background-color: rgba(22,163,74,0.10) !important; border: 1px solid rgba(52,211,153,0.18) !important; box-shadow: 0 4px 16px rgba(0,0,0,0.25) !important; } html[data-theme="dark"] .balance-card h4 { color: #4ade80 !important; } html[data-theme="dark"] .balance-card p { color: #a7f3d0 !important; } /* Bank Details - dark */ html[data-theme="dark"] .bank-details h4 { color: var(--dm-text-primary) !important; } html[data-theme="dark"] .bank-details h6 { color: var(--dm-text-primary) !important; } html[data-theme="dark"] .bank-details p { color: var(--dm-text-muted) !important; } /* ========================================================================== PURCHASES INVOICE - BANK DETAILS - PERFECT DARK MODE (business::purchases.invoice -> .bank-details-container) ========================================================================== */ html[data-theme="dark"] .bank-details-container { border-color: var(--dm-border) !important; background: var(--dm-surface) !important; box-shadow: var(--dm-shadow-sm) !important; border-radius: 6px !important; overflow: hidden !important; } html[data-theme="dark"] .bank-details-container .bank-details-title { background: var(--dm-bg-elevated) !important; background-color: var(--dm-bg-elevated) !important; border-bottom-color: var(--dm-border) !important; color: var(--dm-text-primary) !important; } html[data-theme="dark"] .bank-details-container .back-details-content { background: var(--dm-surface) !important; padding: 5px !important; } html[data-theme="dark"] .bank-details-container .table { background: transparent !important; margin-bottom: 0 !important; } html[data-theme="dark"] .bank-details-container .in-table-row td { color: var(--dm-text-secondary) !important; border-color: transparent !important; background: transparent !important; } html[data-theme="dark"] .bank-details-container .in-table-title { color: var(--dm-text-muted) !important; font-weight: 500 !important; } html[data-theme="dark"] .bank-details-container .clone-width { color: var(--dm-text-muted) !important; width: 16px !important; text-align: center !important; } html[data-theme="dark"] .bank-details-container .text-start:last-child { color: var(--dm-text-primary) !important; font-weight: 500 !important; } /* Ensure invoice content around bank details stays dark */ html[data-theme="dark"] .bank-details-container + * , html[data-theme="dark"] .bottom-info-container .bank-details-container { background: transparent !important; } /* Filter Bar - perfect dark */ html[data-theme="dark"] .table-top-form { background: transparent !important; border-color: transparent !important; } html[data-theme="dark"] .table-top-form .table-top-left .form-control, html[data-theme="dark"] .table-top-form .filter-form .form-control { background-color: var(--dm-input-bg) !important; border-color: var(--dm-input-border) !important; color: var(--dm-text-primary) !important; } html[data-theme="dark"] .table-top-form .form-control::placeholder { color: var(--dm-text-muted) !important; } html[data-theme="dark"] .table-top-form .form-control:focus { border-color: var(--clr-primary) !important; background-color: var(--dm-input-bg) !important; } html[data-theme="dark"] .table-top-form .gpt-up-down-arrow span { border-bottom-color: var(--dm-text-muted) !important; border-right-color: var(--dm-text-muted) !important; } html[data-theme="dark"] .table-top-form .calendar-icon svg path { stroke: var(--dm-text-muted) !important; } html[data-theme="dark"] .table-search svg path { stroke: var(--dm-text-muted) !important; } html[data-theme="dark"] .table-search .position-absolute { background: transparent !important; } /* Table - bank transactions */ html[data-theme="dark"] .responsive-table { background: var(--dm-surface) !important; } html[data-theme="dark"] .responsive-table .table thead th { background: var(--dm-table-header-bg) !important; color: var(--dm-text-primary) !important; border-color: var(--dm-table-border) !important; } html[data-theme="dark"] .responsive-table .table tbody td { color: var(--dm-text-secondary) !important; border-color: var(--dm-table-border) !important; background: transparent !important; } html[data-theme="dark"] .responsive-table .table tbody tr:hover td { background: var(--dm-table-row-hover) !important; } /* Pagination - dark */ html[data-theme="dark"] .erp-table-section .pagination .page-link { background: var(--dm-input-bg) !important; border-color: var(--dm-border) !important; color: var(--dm-text-secondary) !important; } html[data-theme="dark"] .erp-table-section .pagination .page-link:hover { background: var(--dm-surface-hover) !important; color: var(--dm-text-primary) !important; border-color: var(--dm-border) !important; } html[data-theme="dark"] .erp-table-section .pagination .page-item.active .page-link { background: var(--clr-primary) !important; border-color: var(--clr-primary) !important; color: #fff !important; } html[data-theme="dark"] .erp-table-section .pagination .page-item.disabled .page-link { background: var(--dm-input-bg) !important; color: var(--dm-text-muted) !important; opacity: 0.6; } /* Custom From-To inside filter-form - ensure matches surface */ html[data-theme="dark"] .table-top-form .custom-from-to label, html[data-theme="dark"] .table-top-form .custom-from-to .header-label { background: var(--dm-surface) !important; background-color: var(--dm-surface) !important; color: var(--dm-text-secondary) !important; } /* Modals - Bank Transaction */ html[data-theme="dark"] #bankTransactionModal .modal-content, html[data-theme="dark"] #view-transaction .modal-content { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; } html[data-theme="dark"] #bankTransactionModal .personal-info label, html[data-theme="dark"] #view-transaction .info-table td { color: var(--dm-text-secondary) !important; } html[data-theme="dark"] #bankTransactionModal .custom-upload-box { background: var(--dm-input-bg) !important; border-color: var(--dm-input-border) !important; } html[data-theme="dark"] #bankTransactionModal .custom-upload-text { color: var(--dm-text-secondary) !important; } html[data-theme="dark"] #bankTransactionModal .custom-upload-box svg path { stroke: var(--dm-text-muted) !important; } /* Invoice Styles */ html[data-theme="dark"] .invoice-header { background: var(--dm-bg-elevated); } html[data-theme="dark"] .invoice-header h1, html[data-theme="dark"] .invoice-header h2 { color: var(--dm-text-primary); } html[data-theme="dark"] .invoice-header p { color: var(--dm-text-secondary); } html[data-theme="dark"] .invoice-address-section li, html[data-theme="dark"] .invoice-address-section li p, html[data-theme="dark"] .invoice-address-section li span { color: var(--dm-text-primary); } html[data-theme="dark"] .invoice-table thead th { background: var(--dm-bg-elevated); color: var(--dm-text-primary); border-color: var(--dm-border); } html[data-theme="dark"] .invoice-table tbody td { color: var(--dm-text-secondary); border-color: var(--dm-border); } html[data-theme="dark"] .invoice-table tfoot th { background: var(--dm-bg-elevated); color: var(--dm-text-primary); border-color: var(--dm-border); } html[data-theme="dark"] .invoice-table tfoot td { color: var(--dm-text-secondary); border-color: var(--dm-border); } html[data-theme="dark"] .invoice-footer { background: var(--dm-bg-elevated); } html[data-theme="dark"] .invoice-footer a { color: var(--dm-text-primary) !important; } html[data-theme="dark"] .invoice-bank-details h4 { color: var(--dm-text-primary); border-bottom-color: var(--dm-text-primary); } html[data-theme="dark"] .invoice-bank-details li span, html[data-theme="dark"] .invoice-bank-details li p { color: var(--dm-text-primary); } /* New Invoice */ html[data-theme="dark"] .erp-new-invice .table-header h3 strong, html[data-theme="dark"] .erp-new-invice .table-header p, html[data-theme="dark"] .erp-new-invice .bill-invoice-wrp h2, html[data-theme="dark"] .erp-new-invice .bill-invoice-wrp .paking-date, html[data-theme="dark"] .erp-new-invice .invice-detaisl .bill-left-side p, html[data-theme="dark"] .erp-new-invice .invice-detaisl .bill-right-side p, html[data-theme="dark"] .erp-new-invice .invice-detaisl .address-items strong, html[data-theme="dark"] .erp-new-invice .invice-detaisl .address-items p, html[data-theme="dark"] .erp-new-invice th, html[data-theme="dark"] .erp-new-invice td, html[data-theme="dark"] .erp-new-invice td p, html[data-theme="dark"] .erp-new-invice td small, html[data-theme="dark"] .erp-new-invice table .address-items p, html[data-theme="dark"] .erp-new-invice table .address-items strong, html[data-theme="dark"] .erp-new-invice .signature p { color: var(--dm-text-primary); } html[data-theme="dark"] .erp-new-invice .bill-invoice-wrp hr, html[data-theme="dark"] .erp-new-invice .signature p { border-color: var(--dm-text-primary); } html[data-theme="dark"] .erp-new-invice td { border-color: var(--dm-text-primary); } html[data-theme="dark"] .erp-new-invice th { border-color: var(--dm-text-primary); } html[data-theme="dark"] .erp-new-invice .invoice-text { background: var(--dm-bg-elevated); } html[data-theme="dark"] .erp-new-invice .invoice-text h2 { color: var(--dm-text-primary); background: var(--dm-surface); } html[data-theme="dark"] .new-invoice-others h5 { color: var(--dm-text-primary); } html[data-theme="dark"] .invoice-payment-details h3 { color: var(--dm-text-primary); border-bottom-color: var(--dm-text-primary); } html[data-theme="dark"] .invoice-payment-details p { color: var(--dm-text-primary); } html[data-theme="dark"] .new-invoice-footer p { color: var(--dm-text-primary); background: var(--dm-bg-elevated); } /* Production Report */ html[data-theme="dark"] .production-report-header { background: var(--dm-bg-elevated); border-color: var(--dm-text-primary); color: var(--dm-text-primary); } html[data-theme="dark"] .paking-detail-table td { border-color: var(--dm-text-primary); } html[data-theme="dark"] .closing-balance { color: var(--dm-text-primary); } /* Invoice Two */ html[data-theme="dark"] .invoice-two thead th { background: var(--dm-bg-elevated) !important; } html[data-theme="dark"] .invoice-two td { border-color: var(--dm-text-primary); } html[data-theme="dark"] .invoice-two th h2 { color: var(--dm-text-primary); } /* Table Two */ html[data-theme="dark"] .table-two td, html[data-theme="dark"] .table-two th { border-color: var(--dm-border); color: var(--dm-text-primary); } html[data-theme="dark"] .table-two.table-bordered { border-color: var(--dm-border); } html[data-theme="dark"] .table-two.table-bordered td, html[data-theme="dark"] .table-two.table-bordered th { border-color: var(--dm-border); } /* Commercial Invoice */ html[data-theme="dark"] .commercial-invoice tr p, html[data-theme="dark"] .commercial-invoice td p, html[data-theme="dark"] .commercial-invoice th p { color: var(--dm-text-primary); } /* Invoice Container */ html[data-theme="dark"] .invoice-container { background: var(--dm-surface); } html[data-theme="dark"] .invoice-content { background-color: var(--dm-surface); } /* In Table Styles */ html[data-theme="dark"] .in-table-row td { color: var(--dm-text-primary) !important; } html[data-theme="dark"] .in-table-row-bottom td { color: var(--dm-text-primary) !important; } html[data-theme="dark"] .in-table-row-bottom .total-amound { background-color: var(--dm-surface); color: var(--dm-text-primary); } html[data-theme="dark"] .in-table-header .head-red, html[data-theme="dark"] .in-table-header .head-black { color: var(--dm-text-primary); border-color: var(--dm-text-primary) !important; } html[data-theme="dark"] .in-print-btn { background-color: var(--dm-surface); color: var(--dm-text-primary); } html[data-theme="dark"] .in-table-body td { color: var(--dm-text-primary) !important; border-color: var(--dm-text-primary) !important; } html[data-theme="dark"] .in-signature h4 { border-top-color: var(--dm-text-primary); } /* Dashboard Chart */ html[data-theme="dark"] .gpt-dashboard-chart .top-five-country h6, html[data-theme="dark"] .gpt-dashboard-chart .notice h6 { color: var(--dm-text-primary); } html[data-theme="dark"] .gpt-dashboard-chart .top-five-country p, html[data-theme="dark"] .gpt-dashboard-chart .notice p { color: var(--dm-text-secondary); } html[data-theme="dark"] .gpt-dashboard-chart .notice .notice-content div { border-bottom-color: var(--dm-border); } html[data-theme="dark"] .gpt-dashboard-chart .view-all p { color: var(--dm-text-secondary); } html[data-theme="dark"] .gpt-dashboard-chart .card ::-webkit-scrollbar-track { background: var(--dm-scrollbar-track); } html[data-theme="dark"] .gpt-dashboard-chart .card ::-webkit-scrollbar-thumb { background: var(--dm-scrollbar-thumb); } html[data-theme="dark"] .gpt-dashboard-chart .card ::-webkit-scrollbar-thumb:hover { background: var(--dm-scrollbar-hover); } html[data-theme="dark"] .gpt-dashboard-chart .card ::-webkit-scrollbar-button { background: var(--dm-scrollbar-thumb); } /* ERP Overview */ html[data-theme="dark"] .erp-overview-item p { color: var(--dm-text-secondary); } html[data-theme="dark"] .erp-overview-item h6 { color: var(--dm-text-primary); } /* State Overview */ html[data-theme="dark"] .state-overview-box h2 { color: var(--dm-text-primary); } html[data-theme="dark"] .state-overview-box p { color: var(--dm-text-secondary); } /* Costing List */ html[data-theme="dark"] .costing-list span { color: var(--dm-text-primary); } /* Small Table */ html[data-theme="dark"] .small-table tr td { color: var(--dm-text-primary); } html[data-theme="dark"] .small-table th { color: var(--dm-text-primary); } /* Title Four */ html[data-theme="dark"] .title-four { color: var(--dm-text-primary); background: var(--dm-bg-elevated); } /* Table Title Three */ html[data-theme="dark"] .table-title-three { background: var(--dm-bg-elevated); } html[data-theme="dark"] .table-title-three h5 { color: var(--dm-text-primary); } /* T-Header */ html[data-theme="dark"] .t-header { background: var(--dm-bg-elevated) !important; color: var(--dm-text-primary) !important; } /* CLR Black */ html[data-theme="dark"] .clr-black { color: var(--dm-text-primary) !important; } html[data-theme="dark"] .clr-black td, html[data-theme="dark"] .clr-black th { color: var(--dm-text-primary) !important; } /* Table Footer Last */ html[data-theme="dark"] .table-footer-last td { color: var(--dm-text-primary); } html[data-theme="dark"] .table-footer-last td:last-child { color: var(--dm-text-primary); } /* Table Footer */ html[data-theme="dark"] .table-footer { background-color: var(--dm-bg-elevated) !important; } html[data-theme="dark"] .table-footer td { color: var(--dm-text-primary) !important; } /* Income Container */ html[data-theme="dark"] .income-container { color: var(--dm-text-primary); } /* Subscription Plan Tabs */ html[data-theme="dark"] .subscription-plan-tabs .content .price h4 { color: var(--dm-text-primary); } html[data-theme="dark"] .subscription-plan-tabs .content p { color: var(--dm-text-secondary); } html[data-theme="dark"] .subscription-plan-tabs .content .features p { color: var(--dm-text-secondary); } /* Delete Item Show */ html[data-theme="dark"] .delete-item .delete-item-show { background: var(--accent-color); } html[data-theme="dark"] .delete-item .delete-item-show p { color: var(--dm-text-primary); } /* Delete Pop */ html[data-theme="dark"] .delete-pop { background-color: var(--dm-bg-elevated); } /* Loss Card / Profit Card / Sales Card */ html[data-theme="dark"] .loss-card, html[data-theme="dark"] .profit-card, html[data-theme="dark"] .sales-card { box-shadow: var(--dm-shadow-sm); color: #fff !important; } html[data-theme="dark"] .profit-card { background: #5a2a2a !important; } html[data-theme="dark"] .loss-card { background: #3a2545 !important; } html[data-theme="dark"] .sales-card { background: #1a3a4a !important; } /* Stat Title / Value */ html[data-theme="dark"] .stat-title { color: var(--dm-text-primary); } html[data-theme="dark"] .stat-value { color: var(--dm-text-primary); } /* Final Total */ html[data-theme="dark"] .final-total { color: var(--dm-text-primary); } /* Amount Info Container */ html[data-theme="dark"] .amount-info-container::-webkit-scrollbar-track { background: var(--dm-scrollbar-track); } html[data-theme="dark"] .amount-info-container::-webkit-scrollbar-thumb { background-color: var(--dm-scrollbar-thumb); } /* Custom Per */ html[data-theme="dark"] .custom-per { border-color: var(--dm-border); color: var(--dm-text-secondary); } /* Daily Transaction */ html[data-theme="dark"] .daily-transaction-between-wrapper .between-wrapper { border-color: var(--dm-border); } html[data-theme="dark"] .daily-transaction-between-wrapper .between-wrapper span { background: var(--dm-bg-elevated); color: var(--dm-text-primary); } /* Custome Table Header */ html[data-theme="dark"] .custome-table-header { border-bottom-color: var(--dm-border); } html[data-theme="dark"] .custome-table-header h4 { color: var(--dm-text-primary); } /* Login Section */ html[data-theme="dark"] .mybazar-login-section .login-wrapper h2 { color: var(--dm-text-primary); } html[data-theme="dark"] .mybazar-login-section .login-wrapper h6 { color: var(--dm-text-secondary); } html[data-theme="dark"] .mybazar-login-section .login-wrapper p { color: var(--dm-text-muted); } html[data-theme="dark"] .mybazar-login-section .login-wrapper .input-group { background-color: var(--dm-input-bg); border-color: var(--dm-input-border); } html[data-theme="dark"] .mybazar-login-section .login-wrapper .input-group .form-control { background-color: var(--dm-input-bg); color: var(--dm-text-primary); } html[data-theme="dark"] .mybazar-login-section .login-wrapper .input-group .form-control:-webkit-autofill, html[data-theme="dark"] .mybazar-login-section .login-wrapper .input-group .form-control:-webkit-autofill:hover, html[data-theme="dark"] .mybazar-login-section .login-wrapper .input-group .form-control:-webkit-autofill:focus, html[data-theme="dark"] .mybazar-login-section .login-wrapper .input-group input:-webkit-autofill, html[data-theme="dark"] .mybazar-login-section .login-wrapper .input-group input:-webkit-autofill:hover, html[data-theme="dark"] .mybazar-login-section .login-wrapper .input-group input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 30px var(--dm-input-bg) inset !important; -webkit-text-fill-color: var(--dm-text-primary) !important; color: var(--dm-text-primary) !important; background-color: var(--dm-input-bg) !important; border-color: var(--dm-input-border) !important; } html[data-theme="dark"] .mybazar-login-section .login-wrapper .input-group .form-control::placeholder { color: var(--dm-text-muted); } html[data-theme="dark"] .mybazar-login-section .login-wrapper .input-group input { border-color: var(--dm-input-border) !important; } html[data-theme="dark"] .mybazar-login-section .forget-password a, html[data-theme="dark"] .mybazar-login-section .back-to-login a { color: var(--dm-text-secondary); } html[data-theme="dark"] .forget-password .custom-control-label span { color: var(--dm-text-secondary); } html[data-theme="dark"] .footer { background-color: var(--dm-bg-primary); } html[data-theme="dark"] .mybazar-login-section .login-wrapper { box-shadow: var(--dm-shadow); } html[data-theme="dark"] .mybazar-login-section .login-wrapper .input-group span img, html[data-theme="dark"] .mybazar-login-section .login-wrapper .input-group .hide-pass img { filter: invert(1); } html[data-theme="dark"] .mybazar-login-section .login-wrapper a { color: var(--dm-text-secondary); } html[data-theme="dark"] .mybazar-login-section .login-wrapper a.text-primary { color: var(--clr-primary) !important; } html[data-theme="dark"] .mybazar-login-section .login-wrapper .login-social { color: var(--dm-text-primary) !important; border-color: var(--dm-border) !important; } html[data-theme="dark"] .mybazar-login-section .login-wrapper .login-social img { filter: invert(1); } html[data-theme="dark"] .mybazar-login-section .login-wrapper .text-muted { color: var(--dm-text-muted) !important; } html[data-theme="dark"] .mybazar-login-section .login-wrapper .border-secondary-subtle { border-color: var(--dm-border) !important; } html[data-theme="dark"] .mybazar-login-section .login-button-list li a.theme-btn { color: #ffffff !important; } /* Feature List */ html[data-theme="dark"] .order-form-section .feature-list .accordion-item { border-color: var(--dm-border) !important; background: var(--dm-surface); box-shadow: var(--dm-shadow-sm); } html[data-theme="dark"] .order-form-section .feature-list .accordion-button:not(.collapsed) { color: var(--dm-text-primary) !important; } html[data-theme="dark"] .order-form-section .feature-list .accordion-button { color: var(--dm-text-primary); } html[data-theme="dark"] .order-form-section .feature-list .accordion-header input { color: var(--dm-text-primary); } html[data-theme="dark"] .order-form-section .feature-list .accordion-body input { color: var(--dm-text-secondary); } /* Order Form Labels */ html[data-theme="dark"] .order-form-section label, html[data-theme="dark"] .permission label, html[data-theme="dark"] .role-input-label label { color: var(--dm-text-primary); background: var(--dm-surface); } /* Discount Button */ html[data-theme="dark"] .discount-btn { background-color: transparent; border-color: var(--clr-primary); color: var(--clr-primary); } /* Button Groups */ html[data-theme="dark"] .multiple-button-group .reset-btn { border-color: #ef4444 !important; color: #ef4444 !important; } /* Serial Remove / Add Row */ html[data-theme="dark"] .serial-remove-btn, html[data-theme="dark"] .add-row-icon { color: var(--clr-primary); } /* KOT Picker */ html[data-theme="dark"] .kot-picker-btn { background: var(--dm-surface); color: var(--dm-text-muted); border-left-color: var(--dm-border); } /* Subscriber Warning Box */ html[data-theme="dark"] .subscriber-warning-box { background-color: var(--dm-bg-elevated); border-color: var(--dm-border); } html[data-theme="dark"] .subscriber-warning-title, html[data-theme="dark"] .subscriber-warning-text { color: var(--dm-text-primary); } /* Roles Permissions */ html[data-theme="dark"] .roles-permissions table td { color: var(--dm-text-primary); } /* Barcode Styles */ html[data-theme="dark"] .barcode-table-th { background-color: var(--dm-surface) !important; } html[data-theme="dark"] .barcode-table .input-date { background-color: var(--dm-input-bg) !important; color: var(--dm-text-primary); } html[data-theme="dark"] .barcode-info h5 { background-color: var(--dm-input-bg); color: var(--dm-text-primary); border-color: var(--dm-border); } /* Barcode Generate - Select Product search input & popup */ html[data-theme="dark"] #product-search { background-color: var(--dm-input-bg) !important; border-color: var(--dm-input-border) !important; color: var(--dm-text-primary) !important; } html[data-theme="dark"] #product-search::placeholder { color: var(--dm-text-muted) !important; } html[data-theme="dark"] #product-search:focus { background-color: var(--dm-input-bg) !important; border-color: var(--clr-primary) !important; box-shadow: none !important; } html[data-theme="dark"] .barcode-dropdown { background-color: var(--dm-dropdown-bg) !important; border-color: var(--dm-border) !important; box-shadow: var(--dm-shadow) !important; scrollbar-color: var(--dm-scrollbar-thumb) var(--dm-scrollbar-track) !important; } html[data-theme="dark"] .barcode-dropdown::-webkit-scrollbar-track { background: var(--dm-scrollbar-track) !important; } html[data-theme="dark"] .barcode-dropdown::-webkit-scrollbar-thumb { background: var(--dm-scrollbar-thumb) !important; } html[data-theme="dark"] .barcode-dropdown::-webkit-scrollbar-thumb:hover { background: var(--dm-scrollbar-thumb-hover) !important; } html[data-theme="dark"] .barcode-dropdown li { color: var(--dm-text-primary) !important; border-bottom: 1px solid var(--dm-border) !important; } html[data-theme="dark"] .barcode-dropdown li:hover { background-color: var(--dm-dropdown-hover) !important; color: var(--clr-primary) !important; } html[data-theme="dark"] .barcode-dropdown li.list-group-item.text-danger { background-color: var(--dm-dropdown-bg) !important; color: #ff8a80 !important; } /* Product option items inside barcode dropdown (same as product-dropdown) */ html[data-theme="dark"] .barcode-dropdown .product-option-item, html[data-theme="dark"] #search-results .product-option-item { background-color: var(--dm-dropdown-bg) !important; border-color: var(--dm-border) !important; } html[data-theme="dark"] .barcode-dropdown .product-option-item:hover, html[data-theme="dark"] #search-results .product-option-item:hover { background-color: var(--dm-dropdown-hover) !important; } html[data-theme="dark"] .barcode-dropdown .product-title, html[data-theme="dark"] #search-results .product-title { color: var(--dm-text-primary) !important; } html[data-theme="dark"] .barcode-dropdown .product-text p, html[data-theme="dark"] #search-results .product-text p, html[data-theme="dark"] .barcode-dropdown .product-des, html[data-theme="dark"] #search-results .product-des { color: var(--dm-text-secondary) !important; } html[data-theme="dark"] .barcode-dropdown .product-price, html[data-theme="dark"] #search-results .product-price { color: var(--dm-text-primary) !important; } html[data-theme="dark"] .barcode-dropdown .product-in-stock, html[data-theme="dark"] #search-results .product-in-stock { color: var(--dm-text-muted) !important; } html[data-theme="dark"] .barcode-dropdown .multi-items, html[data-theme="dark"] #search-results .multi-items { border-color: var(--dm-border) !important; } html[data-theme="dark"] .barcode-dropdown .product-left img, html[data-theme="dark"] #search-results .product-left img { border-color: var(--dm-border) !important; background-color: var(--dm-bg-elevated) !important; } /* Barcode table inputs (qty & packing date) inside product-list */ html[data-theme="dark"] #product-list .pint-qty, html[data-theme="dark"] .barcode-table .pint-qty { background-color: var(--dm-input-bg) !important; border: 1px solid var(--dm-input-border) !important; color: var(--dm-text-primary) !important; } html[data-theme="dark"] #product-list .pint-qty:focus, html[data-theme="dark"] .barcode-table .pint-qty:focus { border-color: var(--clr-primary) !important; box-shadow: none !important; } html[data-theme="dark"] #product-list .input-date, html[data-theme="dark"] .barcode-table .input-date { background-color: var(--dm-input-bg) !important; border-color: var(--dm-input-border) !important; color: var(--dm-text-primary) !important; color-scheme: dark !important; } html[data-theme="dark"] #product-list .input-date:focus { border-color: var(--clr-primary) !important; } html[data-theme="dark"] #product-list .input-date::-webkit-calendar-picker-indicator, html[data-theme="dark"] .barcode-table .input-date::-webkit-calendar-picker-indicator { opacity: 0 !important; filter: none !important; position: absolute !important; right: 0 !important; top: 0 !important; width: 38px !important; height: 100% !important; } /* No Product Alert */ html[data-theme="dark"] .no-product-alert { color: var(--dm-text-primary); } /* Gradient Row */ html[data-theme="dark"] .gradient-row { background: linear-gradient(270deg, var(--dm-bg-elevated) 0%, var(--dm-surface) 50%, var(--dm-bg-primary) 100%); } /* BG Gray */ html[data-theme="dark"] .bg-gray { background: var(--dm-bg-elevated) !important; color: var(--dm-text-primary) !important; } /* Table Background */ html[data-theme="dark"] .table-background { background-color: var(--dm-bg-elevated); } /* Quick Actions */ html[data-theme="dark"] .quick-actions-container a { color: var(--dm-text-primary); } /* Business Content */ html[data-theme="dark"] .business-content { background: var(--dm-bg-primary); } /* Feature Btn */ html[data-theme="dark"] .feature-btn { background: var(--dm-bg-elevated); border-color: var(--dm-border); color: var(--clr-primary); } /* ========================================================================== SETTINGS PAGE - DARK MODE ========================================================================== */ /* Settings Tab Navigation */ html[data-theme="dark"] .nav-tabs { border-bottom-color: var(--dm-border) !important; } html[data-theme="dark"] .settings-link { color: var(--dm-text-secondary) !important; } html[data-theme="dark"] .settings-link.active { color: var(--clr-primary) !important; background-color: transparent !important; } /* Settings Box Cards */ html[data-theme="dark"] .settings-box-container .setting-box { border-color: var(--dm-border) !important; background-color: var(--dm-surface); } html[data-theme="dark"] .settings-box-container .setting-box:hover { border-color: var(--clr-primary) !important; background-color: var(--dm-dropdown-hover); } html[data-theme="dark"] .settings-box-container .setting-box h6 { color: var(--dm-text-primary) !important; } html[data-theme="dark"] .settings-box-container .setting-box small { color: var(--dm-text-muted) !important; } /* Settings Icon */ html[data-theme="dark"] .settings-icon { background-color: var(--dm-bg-elevated) !important; } html[data-theme="dark"] .settings-icon svg { fill: none !important; } html[data-theme="dark"] .settings-box-container .setting-box:hover .settings-icon { background-color: var(--clr-primary) !important; } /* Theme Color Settings (KOT) */ html[data-theme="dark"] .kot-label { color: var(--dm-text-primary) !important; } html[data-theme="dark"] .kot-input-box { border-color: var(--dm-border) !important; background-color: var(--dm-input-bg); } html[data-theme="dark"] .kot-input-box input[type="text"] { color: var(--dm-text-primary); background-color: var(--dm-input-bg); } /* Invoice Image */ html[data-theme="dark"] .invoice-image { border-color: var(--dm-border) !important; } html[data-theme="dark"] .invoice-image:hover { border-color: var(--clr-primary) !important; } /* Custom Radio Button */ html[data-theme="dark"] .custom-radio .checkmark { background-color: var(--dm-input-bg); border-color: var(--dm-border); } html[data-theme="dark"] .custom-radio input[type="radio"]:checked + .checkmark { background-color: var(--clr-primary); border-color: var(--clr-primary); } /* Bootstrap text-dark override */ html[data-theme="dark"] .text-dark { color: var(--dm-text-primary) !important; } html[data-theme="dark"] a.text-decoration-none.text-dark { color: var(--dm-text-primary) !important; } /* ========================================================================== PRODUCT CREATE PAGE - DARK MODE ========================================================================== */ /* Product Price Container */ html[data-theme="dark"] .product-price-container { background-color: var(--dm-surface); } html[data-theme="dark"] .product-price-container .product-price-header { border-bottom-color: var(--dm-border); } html[data-theme="dark"] .product-price-container .product-price-header h3 { color: var(--dm-text-primary); } /* Product Settings Icon */ html[data-theme="dark"] .product-settings { background-color: var(--dm-bg-elevated) !important; } html[data-theme="dark"] .product-settings:hover { background-color: var(--dm-dropdown-hover) !important; } html[data-theme="dark"] .product-settings svg { fill: none !important; } /* Upload Product Image */ html[data-theme="dark"] .upload-product-img { background-color: var(--dm-surface); } html[data-theme="dark"] .upload-img-title { border-bottom-color: var(--dm-border); } html[data-theme="dark"] .upload-img-title h3 { color: var(--dm-text-primary); } html[data-theme="dark"] .upload-img-title h3 span { color: var(--dm-text-secondary); } html[data-theme="dark"] .upload-box { background-color: var(--dm-bg-elevated); border-color: var(--dm-border); } html[data-theme="dark"] .upload-box svg { opacity: 0.7; } html[data-theme="dark"] .upload-text { color: var(--dm-text-muted); } /* Warranty / Guarantee Container */ html[data-theme="dark"] .warranty-container { background: var(--dm-input-bg); } html[data-theme="dark"] .warranty-container label { color: var(--dm-text-primary); } html[data-theme="dark"] .warranty-container input[type="number"] { border-color: var(--dm-border); background-color: var(--dm-input-bg); color: var(--dm-text-primary); } html[data-theme="dark"] .warranty-container select { border-color: var(--dm-border); background-color: var(--dm-bg-elevated); color: var(--dm-text-primary); } /* Product Table */ html[data-theme="dark"] .product-table td { color: var(--dm-text-secondary); } html[data-theme="dark"] .product-table th { color: var(--dm-text-primary); } /* Variation Table - Perfect Dark */ html[data-theme="dark"] .variation-table { background: var(--dm-surface) !important; } html[data-theme="dark"] .variation-table th { background: var(--dm-table-header-bg) !important; color: var(--dm-text-primary) !important; border-color: var(--dm-table-border) !important; } html[data-theme="dark"] .variation-table td { color: var(--dm-text-secondary) !important; border-color: var(--dm-table-border) !important; background: transparent !important; } html[data-theme="dark"] .variation-table tbody tr:hover td { background: var(--dm-table-row-hover) !important; } html[data-theme="dark"] .variation-table .form-control, html[data-theme="dark"] .variation-table .custom-table-input { background-color: var(--dm-input-bg) !important; border-color: var(--dm-input-border) !important; color: var(--dm-text-primary) !important; } html[data-theme="dark"] .variation-table .form-control::placeholder, html[data-theme="dark"] .variation-table .custom-table-input::placeholder { color: var(--dm-text-muted) !important; } html[data-theme="dark"] .variation-table .form-control:focus, html[data-theme="dark"] .variation-table .custom-table-input:focus { border-color: var(--clr-primary) !important; box-shadow: none !important; } html[data-theme="dark"] .variation-table .variant-name { color: var(--dm-text-primary) !important; } html[data-theme="dark"] .variation-table .add-row-icon { color: var(--clr-primary) !important; cursor: pointer; } html[data-theme="dark"] .variation-table .delete-row svg path { stroke: #ff6b6b !important; } html[data-theme="dark"] .variation-table td .text-danger { color: #ff8a80 !important; } /* Variation Container & Fields (Variations, Size, Color, Material etc) - Perfect Dark */ html[data-theme="dark"] .variation-container { background: transparent !important; } html[data-theme="dark"] .variation-container > .col-lg-12 .order-form-section { background: transparent !important; } html[data-theme="dark"] .variation-container label, html[data-theme="dark"] .variation-values-container label, html[data-theme="dark"] .variation-field label { color: var(--dm-text-primary) !important; background: var(--dm-surface) !important; } html[data-theme="dark"] .variation-values-container { background: transparent !important; } html[data-theme="dark"] .variation-field .order-form-section { background: transparent !important; } /* Choices.js - Variations & Variation Values (Size/Color/Material) Perfect Dark */ html[data-theme="dark"] #productTypeContainer .choices__inner, html[data-theme="dark"] .variation-container .choices__inner, html[data-theme="dark"] .variation-values-container .choices__inner, html[data-theme="dark"] .variation-field .choices__inner { background-color: var(--dm-input-bg) !important; border-color: var(--dm-input-border) !important; color: var(--dm-text-primary) !important; } html[data-theme="dark"] #productTypeContainer .choices.is-focused .choices__inner, html[data-theme="dark"] #productTypeContainer .choices.is-open .choices__inner, html[data-theme="dark"] .variation-container .choices.is-focused .choices__inner, html[data-theme="dark"] .variation-container .choices.is-open .choices__inner, html[data-theme="dark"] .variation-values-container .choices.is-focused .choices__inner, html[data-theme="dark"] .variation-values-container .choices.is-open .choices__inner, html[data-theme="dark"] .variation-field .choices.is-focused .choices__inner, html[data-theme="dark"] .variation-field .choices.is-open .choices__inner { border-color: var(--clr-primary) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--clr-primary) 16%, transparent) !important; } html[data-theme="dark"] #productTypeContainer .choices__input, html[data-theme="dark"] .variation-container .choices__input, html[data-theme="dark"] .variation-values-container .choices__input, html[data-theme="dark"] .variation-field .choices__input { background-color: transparent !important; background: transparent !important; color: var(--dm-text-primary) !important; border: 0 !important; } html[data-theme="dark"] #productTypeContainer .choices__input::placeholder, html[data-theme="dark"] .variation-container .choices__input::placeholder, html[data-theme="dark"] .variation-values-container .choices__input::placeholder { color: var(--dm-text-muted) !important; } html[data-theme="dark"] #productTypeContainer .choices__placeholder, html[data-theme="dark"] .variation-container .choices__placeholder, html[data-theme="dark"] .variation-values-container .choices__placeholder { color: var(--dm-text-muted) !important; opacity: 1 !important; } html[data-theme="dark"] #productTypeContainer .choices__list--single .choices__item, html[data-theme="dark"] .variation-container .choices__list--single .choices__item, html[data-theme="dark"] .variation-values-container .choices__list--single .choices__item { color: var(--dm-text-primary) !important; } html[data-theme="dark"] #productTypeContainer .choices__list--multiple .choices__item, html[data-theme="dark"] .variation-container .choices__list--multiple .choices__item, html[data-theme="dark"] .variation-values-container .choices__list--multiple .choices__item, html[data-theme="dark"] .variation-field .choices__list--multiple .choices__item { background-color: var(--clr-primary) !important; background: var(--clr-primary) !important; border: 1px solid var(--clr-primary) !important; color: #ffffff !important; box-shadow: none !important; } html[data-theme="dark"] #productTypeContainer .choices__list--multiple .choices__item.is-highlighted, html[data-theme="dark"] .variation-container .choices__list--multiple .choices__item.is-highlighted, html[data-theme="dark"] .variation-values-container .choices__list--multiple .choices__item.is-highlighted { background-color: color-mix(in srgb, var(--clr-primary) 85%, black) !important; border-color: var(--clr-primary) !important; color: #ffffff !important; } html[data-theme="dark"] #productTypeContainer .choices[data-type*="select-multiple"] .choices__button, html[data-theme="dark"] .variation-container .choices[data-type*="select-multiple"] .choices__button, html[data-theme="dark"] .variation-values-container .choices[data-type*="select-multiple"] .choices__button, html[data-theme="dark"] .variation-field .choices[data-type*="select-multiple"] .choices__button { background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 4L8 8M8 8L4 12M8 8L12 12M8 8L4 4' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-size: 10px 10px !important; background-repeat: no-repeat !important; background-position: center !important; filter: none !important; opacity: 1 !important; border-left: 1px solid rgba(255,255,255,0.35) !important; margin-left: 8px !important; padding-left: 16px !important; } html[data-theme="dark"] #productTypeContainer .choices[data-type*="select-multiple"] .choices__button:hover, html[data-theme="dark"] .variation-container .choices[data-type*="select-multiple"] .choices__button:hover, html[data-theme="dark"] .variation-values-container .choices[data-type*="select-multiple"] .choices__button:hover, html[data-theme="dark"] .variation-field .choices[data-type*="select-multiple"] .choices__button:hover { opacity: 0.85 !important; filter: none !important; background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 4L8 8M8 8L4 12M8 8L12 12M8 8L4 4' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } html[data-theme="dark"] #productTypeContainer .choices__list--dropdown, html[data-theme="dark"] #productTypeContainer .choices__list[aria-expanded], html[data-theme="dark"] .variation-container .choices__list--dropdown, html[data-theme="dark"] .variation-container .choices__list[aria-expanded], html[data-theme="dark"] .variation-values-container .choices__list--dropdown, html[data-theme="dark"] .variation-values-container .choices__list[aria-expanded], html[data-theme="dark"] .variation-field .choices__list--dropdown, html[data-theme="dark"] .variation-field .choices__list[aria-expanded] { background-color: var(--dm-dropdown-bg) !important; border-color: var(--dm-border) !important; box-shadow: var(--dm-shadow) !important; } html[data-theme="dark"] #productTypeContainer .choices__list--dropdown .choices__item, html[data-theme="dark"] #productTypeContainer .choices__list[aria-expanded] .choices__item, html[data-theme="dark"] .variation-container .choices__list--dropdown .choices__item, html[data-theme="dark"] .variation-container .choices__list[aria-expanded] .choices__item, html[data-theme="dark"] .variation-values-container .choices__list--dropdown .choices__item, html[data-theme="dark"] .variation-values-container .choices__list[aria-expanded] .choices__item { color: var(--dm-text-primary) !important; } html[data-theme="dark"] #productTypeContainer .choices__list--dropdown .choices__item--selectable.is-highlighted, html[data-theme="dark"] #productTypeContainer .choices__list[aria-expanded] .choices__item--selectable.is-highlighted, html[data-theme="dark"] .variation-container .choices__list--dropdown .choices__item--selectable.is-highlighted, html[data-theme="dark"] .variation-container .choices__list[aria-expanded] .choices__item--selectable.is-highlighted, html[data-theme="dark"] .variation-values-container .choices__list--dropdown .choices__item--selectable.is-highlighted, html[data-theme="dark"] .variation-values-container .choices__list[aria-expanded] .choices__item--selectable.is-highlighted { background-color: var(--dm-dropdown-hover) !important; color: var(--clr-primary) !important; } html[data-theme="dark"] #productTypeContainer .choices__heading, html[data-theme="dark"] .variation-container .choices__heading, html[data-theme="dark"] .variation-values-container .choices__heading { color: var(--dm-text-muted) !important; border-bottom-color: var(--dm-border) !important; } html[data-theme="dark"] #productTypeContainer .choices[data-type*="select-one"]::after, html[data-theme="dark"] .variation-container .choices[data-type*="select-one"]::after, html[data-theme="dark"] .variation-values-container .choices[data-type*="select-one"]::after { border-color: var(--dm-text-muted) transparent transparent transparent !important; } html[data-theme="dark"] #productTypeContainer .choices[data-type*="select-one"].is-open::after, html[data-theme="dark"] .variation-container .choices[data-type*="select-one"].is-open::after, html[data-theme="dark"] .variation-values-container .choices[data-type*="select-one"].is-open::after { border-color: transparent transparent var(--dm-text-muted) transparent !important; } html[data-theme="dark"] #productTypeContainer .choices.is-disabled .choices__inner, html[data-theme="dark"] .variation-container .choices.is-disabled .choices__inner, html[data-theme="dark"] .variation-values-container .choices.is-disabled .choices__inner { background-color: var(--dm-bg-elevated) !important; border-color: var(--dm-border) !important; opacity: 0.6; } html[data-theme="dark"] #productTypeContainer .choices__list--dropdown .choices__item--selectable::after, html[data-theme="dark"] .variation-container .choices__list--dropdown .choices__item--selectable::after { color: var(--dm-text-muted) !important; } /* Add Variant Button */ html[data-theme="dark"] .add-variant-btn { color: var(--clr-primary); background: transparent !important; } html[data-theme="dark"] .add-variant-btn:hover { color: #ff6b6b !important; } /* Variation Table arrow SVG (dark mode) */ html[data-theme="dark"] .variation-table .variant-name svg path { fill: var(--dm-text-secondary) !important; } html[data-theme="dark"] .variation-table .responsive-table { background: var(--dm-surface) !important; } /* Choices dropdown scrollbar - variation fields */ html[data-theme="dark"] .variation-container .choices__list--dropdown .choices__list, html[data-theme="dark"] .variation-values-container .choices__list--dropdown .choices__list { scrollbar-color: var(--dm-scrollbar-thumb) var(--dm-scrollbar-track) !important; } html[data-theme="dark"] .variation-container .choices__list--dropdown .choices__list::-webkit-scrollbar-track, html[data-theme="dark"] .variation-values-container .choices__list--dropdown .choices__list::-webkit-scrollbar-track { background: var(--dm-scrollbar-track) !important; } html[data-theme="dark"] .variation-container .choices__list--dropdown .choices__list::-webkit-scrollbar-thumb, html[data-theme="dark"] .variation-values-container .choices__list--dropdown .choices__list::-webkit-scrollbar-thumb { background: var(--dm-scrollbar-thumb) !important; } /* ========================================================================== 6. AVAILABLE TAGS (Marketing Template) ========================================================================== */ html[data-theme="dark"] .available-tags-title { color: var(--dm-text-primary) !important; } html[data-theme="dark"] .tags-card { background-color: var(--dm-surface) !important; border-color: var(--dm-border) !important; box-shadow: none !important; } html[data-theme="dark"] .tags-list li { border-bottom-color: var(--dm-border) !important; } html[data-theme="dark"] .tags-list span { color: var(--dm-text-primary) !important; } html[data-theme="dark"] .placeholder-btn { color: var(--clr-primary) !important; } /* ========================================================================== 7. BULK UPLOAD PAGE ========================================================================== */ /* Main Container */ html[data-theme="dark"] .bulk-upload-container { background-color: var(--dm-surface) !important; box-shadow: none !important; } /* File Upload Box */ html[data-theme="dark"] .custom-file-box { border-color: var(--dm-border) !important; } html[data-theme="dark"] .custom-file-box:hover { background: var(--dm-bg-elevated) !important; border-color: var(--clr-primary) !important; } /* Image Upload Box (Category Icon) */ html[data-theme="dark"] .custom-image-box { background-color: var(--dm-bg-elevated) !important; border-color: var(--dm-border) !important; } html[data-theme="dark"] .custom-image-box:hover { background-color: var(--dm-surface) !important; } html[data-theme="dark"] .custom-image-box svg { fill: none !important; stroke: var(--dm-text-secondary) !important; } /* File Content & Upload Text */ html[data-theme="dark"] .custom-file-content { color: var(--dm-text-secondary) !important; } html[data-theme="dark"] .custom-upload-text { color: var(--dm-text-primary) !important; } /* File Preview */ html[data-theme="dark"] .preview-file { color: var(--dm-text-primary) !important; } /* Download Button */ html[data-theme="dark"] .download-file-btn { background-color: #00a96e !important; color: #fff !important; } /* Instruction Header */ html[data-theme="dark"] .instruction-header h5 { color: var(--dm-text-primary) !important; } html[data-theme="dark"] .instruction-header h6 { color: var(--dm-text-primary) !important; } /* ========================================================================== 7. SUMMERNOTE EDITOR (Email Template) ========================================================================== */ html[data-theme="dark"] .note-editor.note-frame { border-color: var(--dm-border) !important; } html[data-theme="dark"] .note-editor .note-toolbar { background-color: var(--dm-bg-elevated) !important; border-color: var(--dm-border) !important; color: var(--dm-text-primary) !important; } html[data-theme="dark"] .note-toolbar .note-btn { color: var(--dm-text-primary) !important; background-color: var(--dm-surface) !important; border-color: var(--dm-border) !important; } html[data-theme="dark"] .note-toolbar .note-btn:hover { background-color: var(--dm-bg-elevated) !important; color: var(--dm-text-primary) !important; } html[data-theme="dark"] .note-toolbar .note-btn:active, html[data-theme="dark"] .note-toolbar .note-btn.active { background-color: var(--dm-surface) !important; color: var(--clr-primary) !important; } html[data-theme="dark"] .note-toolbar .note-btn i, html[data-theme="dark"] .note-toolbar .note-btn svg { color: var(--dm-text-secondary) !important; fill: var(--dm-text-secondary) !important; } html[data-theme="dark"] .note-editor .note-editing-area .note-editable { background-color: var(--dm-input-bg) !important; color: var(--dm-text-primary) !important; } html[data-theme="dark"] .note-editor .note-statusbar { background-color: var(--dm-bg-elevated) !important; border-top-color: var(--dm-border) !important; } html[data-theme="dark"] .note-editor .note-statusbar .note-resizebar { border-top-color: var(--dm-border) !important; } html[data-theme="dark"] .note-dropdown-menu { background-color: var(--dm-surface) !important; border-color: var(--dm-border) !important; } html[data-theme="dark"] .note-dropdown-item { color: var(--dm-text-primary) !important; } html[data-theme="dark"] .note-dropdown-item:hover { background-color: var(--dm-bg-elevated) !important; color: var(--dm-text-primary) !important; } html[data-theme="dark"] .note-modal-content { background-color: var(--dm-surface) !important; border-color: var(--dm-border) !important; } html[data-theme="dark"] .note-modal-header { border-bottom-color: var(--dm-border) !important; } html[data-theme="dark"] .note-modal-title { color: var(--dm-text-primary) !important; } html[data-theme="dark"] .note-modal-footer { border-top-color: var(--dm-border) !important; } html[data-theme="dark"] .note-modal .note-close { color: var(--dm-text-primary) !important; } html[data-theme="dark"] .note-modal .form-control { background-color: var(--dm-input-bg) !important; border-color: var(--dm-border) !important; color: var(--dm-text-primary) !important; } html[data-theme="dark"] .note-popover { background-color: var(--dm-surface) !important; border-color: var(--dm-border) !important; } html[data-theme="dark"] .note-popover .popover-content { background-color: var(--dm-surface) !important; color: var(--dm-text-primary) !important; } html[data-theme="dark"] .note-popover .arrow::after { border-top-color: var(--dm-surface) !important; } /* ========================================================================== CALCULATOR MODAL - PERFECT DARK MODE (matches good looking light UI) ========================================================================== */ html[data-theme="dark"] .calculator-content { background-color: var(--dm-surface) !important; background: var(--dm-surface) !important; border: 1px solid var(--dm-border) !important; box-shadow: var(--dm-shadow-lg) !important; } html[data-theme="dark"] .calculator-content .modal-header { background: var(--dm-bg-elevated) !important; background-color: var(--dm-bg-elevated) !important; border-bottom: 1px solid var(--dm-border) !important; } html[data-theme="dark"] .calculator-content .modal-body { background: var(--dm-surface) !important; } html[data-theme="dark"] .calculator-content .custom-modal-header { background: transparent !important; } html[data-theme="dark"] .calculator-content .custom-close-btn, html[data-theme="dark"] .calculator-content .btn-close { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3e%3cpath d='M4 4L12 12M12 4L4 12' stroke='white' stroke-width='1.6' stroke-linecap='round'/%3e%3c/svg%3e") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 12px 12px !important; filter: none !important; opacity: 1 !important; background-color: var(--dm-input-bg) !important; border: 1px solid var(--dm-border) !important; border-radius: 8px !important; width: 32px !important; height: 32px !important; box-shadow: none !important; } html[data-theme="dark"] .calculator-content .custom-close-btn:hover, html[data-theme="dark"] .calculator-content .btn-close:hover { opacity: 1 !important; filter: none !important; background-color: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.16) !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3e%3cpath d='M4 4L12 12M12 4L4 12' stroke='white' stroke-width='1.6' stroke-linecap='round'/%3e%3c/svg%3e") !important; } /* Focus state - keep white cross */ html[data-theme="dark"] .calculator-content .custom-close-btn:focus, html[data-theme="dark"] .calculator-content .btn-close:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--clr-primary) 20%, transparent) !important; border-color: var(--clr-primary) !important; filter: none !important; opacity: 1 !important; } html[data-theme="dark"] .calculator-content #display { background-color: var(--dm-input-bg) !important; background: var(--dm-input-bg) !important; border-color: var(--dm-input-border) !important; color: var(--dm-text-primary) !important; box-shadow: inset 0 1px 3px rgba(0,0,0,0.3) !important; } html[data-theme="dark"] .calculator-content #display:focus { border-color: var(--clr-primary) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--clr-primary) 16%, transparent), inset 0 1px 3px rgba(0,0,0,0.3) !important; } html[data-theme="dark"] .calculator-content .operand-group { background: var(--dm-input-bg) !important; background-color: var(--dm-input-bg) !important; border-color: var(--dm-border) !important; color: var(--dm-text-primary) !important; } html[data-theme="dark"] .calculator-content .operand-group:hover { background: var(--dm-surface-hover) !important; border-color: var(--dm-border) !important; } html[data-theme="dark"] .calculator-content .operator-group { background: var(--dm-bg-elevated) !important; background-color: var(--dm-bg-elevated) !important; border-color: var(--dm-border) !important; color: var(--dm-text-secondary) !important; } html[data-theme="dark"] .calculator-content .operator-group:hover { background: var(--dm-surface-hover) !important; color: var(--dm-text-primary) !important; } html[data-theme="dark"] .calculator-content #clear { background: rgba(239,68,68,0.14) !important; background-color: rgba(239,68,68,0.14) !important; border-color: rgba(239,68,68,0.22) !important; color: #fca5a5 !important; } html[data-theme="dark"] .calculator-content #clear:hover { background: rgba(239,68,68,0.22) !important; border-color: rgba(239,68,68,0.32) !important; color: #fecaca !important; } html[data-theme="dark"] .calculator-content #backspace { background: rgba(249,115,22,0.14) !important; background-color: rgba(249,115,22,0.14) !important; border-color: rgba(249,115,22,0.22) !important; color: #fdba74 !important; } html[data-theme="dark"] .calculator-content #backspace:hover { background: rgba(249,115,22,0.22) !important; } html[data-theme="dark"] .calculator-content #ans { background: rgba(124,58,237,0.14) !important; border-color: rgba(124,58,237,0.22) !important; color: #c4b5fd !important; } html[data-theme="dark"] .calculator-content #percentage { background: rgba(15,118,110,0.14) !important; border-color: rgba(15,118,110,0.22) !important; color: #5eead4 !important; } html[data-theme="dark"] .calculator-content #equal { background: var(--clr-primary) !important; background-color: var(--clr-primary) !important; border-color: var(--clr-primary) !important; color: #fff !important; box-shadow: 0 2px 10px color-mix(in srgb, var(--clr-primary) 28%, transparent) !important; } html[data-theme="dark"] .calculator-content .calculator-btn:hover { transform: translateY(-1px) !important; box-shadow: 0 4px 10px rgba(0,0,0,0.25) !important; } html[data-theme="dark"] .calculator-content .calculator-btn:active { transform: scale(0.96) !important; } /* ========================================================================== JQUERY-CONFIRM DELETE POPUP - PERFECT DARK MODE (business::purchases.datas -> Action -> Delete -> .confirm-action -> jconfirm) Also covers #delete-confirmation-modal ( .delete-confirm ) ========================================================================== */ html[data-theme="dark"] .jconfirm .jconfirm-bg { background-color: rgba(12, 10, 31, 0.82) !important; opacity: 1 !important; } html[data-theme="dark"] .jconfirm .jconfirm-box { background: var(--dm-surface) !important; border: 1px solid var(--dm-border) !important; box-shadow: var(--dm-shadow-lg) !important; } html[data-theme="dark"] .jconfirm.jconfirm-modern .jconfirm-box { background: var(--dm-surface) !important; background-color: var(--dm-surface) !important; box-shadow: var(--dm-shadow-lg) !important; } html[data-theme="dark"] .jconfirm .jconfirm-box.jconfirm-type-red { border-top: solid 7px var(--clr-primary) !important; } html[data-theme="dark"] .jconfirm.jconfirm-modern .jconfirm-box div.jconfirm-title-c { color: var(--dm-text-primary) !important; } html[data-theme="dark"] .jconfirm.jconfirm-modern .jconfirm-box div.jconfirm-title-c .jconfirm-title { color: var(--dm-text-primary) !important; } html[data-theme="dark"] .jconfirm.jconfirm-modern .jconfirm-box div.jconfirm-title-c .jconfirm-icon-c { color: var(--clr-primary) !important; } html[data-theme="dark"] .jconfirm.jconfirm-modern .jconfirm-box div.jconfirm-content { color: var(--dm-text-secondary) !important; } html[data-theme="dark"] .jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content { color: var(--dm-text-secondary) !important; } html[data-theme="dark"] .jconfirm .jconfirm-box div.jconfirm-closeIcon { color: var(--dm-text-muted) !important; opacity: 0.7 !important; } html[data-theme="dark"] .jconfirm .jconfirm-box div.jconfirm-closeIcon:hover { color: var(--dm-text-primary) !important; opacity: 1 !important; } html[data-theme="dark"] .jconfirm .jconfirm-box .jconfirm-buttons button.btn-default { background-color: var(--dm-input-bg) !important; background: var(--dm-input-bg) !important; color: var(--dm-text-secondary) !important; border: 1px solid var(--dm-border) !important; } html[data-theme="dark"] .jconfirm .jconfirm-box .jconfirm-buttons button.btn-default:hover { background-color: var(--dm-surface-hover) !important; background: var(--dm-surface-hover) !important; color: var(--dm-text-primary) !important; border-color: var(--dm-border) !important; } html[data-theme="dark"] .jconfirm .jconfirm-box .jconfirm-buttons button.btn-red { background-color: var(--clr-primary) !important; background: var(--clr-primary) !important; color: #fff !important; border: 1px solid var(--clr-primary) !important; } html[data-theme="dark"] .jconfirm .jconfirm-box .jconfirm-buttons button.btn-red:hover { background-color: color-mix(in srgb, var(--clr-primary) 88%, black) !important; background: color-mix(in srgb, var(--clr-primary) 88%, black) !important; } /* loading state */ html[data-theme="dark"] .jconfirm .jconfirm-box.loading:before { background: var(--dm-surface) !important; } html[data-theme="dark"] .jconfirm .jconfirm-box.loading:after { border-bottom-color: var(--clr-primary) !important; } /* Bootstrap delete-confirmation-modal */ html[data-theme="dark"] #delete-confirmation-modal .modal-content { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; box-shadow: var(--dm-shadow-lg) !important; } html[data-theme="dark"] #delete-confirmation-modal .btn-close { filter: invert(1) grayscale(100%) brightness(1.8) !important; opacity: 0.6 !important; } html[data-theme="dark"] #delete-confirmation-modal .btn-close:hover { opacity: 1 !important; } html[data-theme="dark"] #delete-confirmation-modal .delete-modal h5 { color: var(--dm-text-primary) !important; } html[data-theme="dark"] #delete-confirmation-modal .delete-modal p { color: var(--dm-text-secondary) !important; } html[data-theme="dark"] #delete-confirmation-modal .reset-btn { background: var(--dm-input-bg) !important; background-color: var(--dm-input-bg) !important; border-color: var(--dm-border) !important; color: var(--dm-text-secondary) !important; } html[data-theme="dark"] #delete-confirmation-modal .reset-btn:hover { background: var(--dm-surface-hover) !important; color: var(--dm-text-primary) !important; border-color: var(--dm-border) !important; } html[data-theme="dark"] #delete-confirmation-modal .theme-btn, html[data-theme="dark"] #delete-confirmation-modal .delete-confirmation-button { background: var(--clr-primary) !important; background-color: var(--clr-primary) !important; color: #fff !important; border-color: var(--clr-primary) !important; } html[data-theme="dark"] #delete-confirmation-modal .theme-btn:hover, html[data-theme="dark"] #delete-confirmation-modal .delete-confirmation-button:hover { background: color-mix(in srgb, var(--clr-primary) 88%, black) !important; } /* ========================================================================== 8. PRINT STYLES - PRESERVE LIGHT MODE FOR PRINTING ========================================================================== */ @media print { html[data-theme="dark"] body, html[data-theme="dark"] * { background: white !important; color: black !important; border-color: black !important; } } /* ========================================================================== 9. SCROLLBAR STYLES ========================================================================== */ html[data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--dm-scrollbar-track); } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--dm-scrollbar-thumb); border-radius: 4px; } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--dm-scrollbar-hover); } html[data-theme="dark"] .side-bar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); } html[data-theme="dark"] .side-bar::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.5); } /* ========================================================================== 8. RESPONSIVE ADJUSTMENTS ========================================================================== */ @media (max-width: 1150px) { html[data-theme="dark"] .side-bar { background: var(--dm-surface) !important; } } /* Smooth Transition for Theme Change */ html[data-theme="dark"] body, html[data-theme="dark"] .card, html[data-theme="dark"] .form-control, html[data-theme="dark"] .modal-content, html[data-theme="dark"] .dropdown-menu { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } /* Header Right Alignment Fix */ .header-right { align-items: center; } /* ========================================================================== 9. THEME TOGGLE BUTTON ========================================================================== */ .theme-toggle-wrapper { display: flex; align-items: center; margin: 0 8px; } .theme-toggle-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1.5px solid #c9cdd5; border-radius: 50%; background: #eef0f4; color: var(--clr-black); font-size: 18px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); outline: none; } .theme-toggle-btn:hover { background: #e0e4ea; border-color: #b6bcc6; transform: scale(1.08); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); } .theme-toggle-btn:active { transform: scale(0.95); } .theme-toggle-btn:focus, .theme-toggle-btn:focus-visible { background: #eef0f4; outline: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .theme-toggle-btn .theme-icon-dark { color: #6366f1; } .theme-toggle-btn .theme-icon-light { color: #f59e0b; } /* Dark mode overrides for toggle button */ html[data-theme="dark"] .theme-toggle-btn { background: var(--dm-surface); border-color: var(--dm-border); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } html[data-theme="dark"] .theme-toggle-btn:hover { background: var(--dm-surface-hover); border-color: var(--dm-border-light); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); } html[data-theme="dark"] .theme-toggle-btn:focus, html[data-theme="dark"] .theme-toggle-btn:focus-visible { background: var(--dm-surface); outline: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } html[data-theme="dark"] .theme-toggle-btn .theme-icon-dark { color: #818cf8; } html[data-theme="dark"] .theme-toggle-btn .theme-icon-light { color: #fbbf24; } /* ========================================================================== 10. ADMIN PANEL - BOOTSTRAP WHITE/LIGHT BACKGROUND OVERRIDES ========================================================================== */ html[data-theme="dark"] .bg-white { background-color: var(--dm-surface) !important; } html[data-theme="dark"] .bg-light { background-color: var(--dm-bg-secondary) !important; } html[data-theme="dark"] .btn-light { background-color: var(--dm-input-bg) !important; border-color: var(--dm-border) !important; color: var(--dm-text-primary) !important; } html[data-theme="dark"] .btn-light:hover, html[data-theme="dark"] .btn-light:focus { background-color: var(--dm-surface-hover) !important; } html[data-theme="dark"] .dropdown-menu { background-color: var(--dm-surface) !important; border-color: var(--dm-border) !important; } html[data-theme="dark"] .dropdown-item { color: var(--dm-text-primary) !important; } html[data-theme="dark"] .dropdown-item:hover { background-color: var(--dm-dropdown-hover) !important; color: var(--dm-text-primary) !important; } html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select { background-color: var(--dm-input-bg) !important; border-color: var(--dm-input-border) !important; color: var(--dm-text-primary) !important; } html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .form-select:focus { background-color: var(--dm-input-bg) !important; border-color: var(--dm-border-focus) !important; } html[data-theme="dark"] .table { color: var(--dm-text-primary); } html[data-theme="dark"] .table th { background-color: var(--dm-table-header-bg) !important; border-color: var(--dm-table-border) !important; color: var(--dm-text-primary); } html[data-theme="dark"] .table td { background-color: var(--dm-surface) !important; border-color: var(--dm-table-border) !important; color: var(--dm-text-secondary); } html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td { background-color: var(--dm-bg-secondary) !important; } html[data-theme="dark"] .badge.bg-light { background-color: var(--dm-bg-elevated) !important; color: var(--dm-text-primary) !important; } html[data-theme="dark"] .text-dark { color: var(--dm-text-primary) !important; } html[data-theme="dark"] .text-muted { color: var(--dm-text-muted) !important; } html[data-theme="dark"] .border { border-color: var(--dm-border) !important; } html[data-theme="dark"] .list-group-item { background-color: var(--dm-surface) !important; border-color: var(--dm-border) !important; color: var(--dm-text-primary); } html[data-theme="dark"] .nav-tabs .nav-link { color: var(--dm-text-secondary); } html[data-theme="dark"] .nav-tabs .nav-link, html[data-theme="dark"] .nav-tabs .nav-link.active, html[data-theme="dark"] .nav-tabs .nav-link:hover, html[data-theme="dark"] .nav-tabs .nav-link:focus { background: transparent !important; border: 1px solid transparent !important; border-color: transparent !important; } html[data-theme="dark"] .nav-tabs .nav-link.active { color: var(--dm-text-primary) !important; } html[data-theme="dark"] .settings-link, html[data-theme="dark"] .settings-link.active, html[data-theme="dark"] .settings-link:hover { border: 1px solid transparent !important; border-color: transparent !important; background: transparent !important; } html[data-theme="dark"] .pagination .page-link { background-color: var(--dm-surface) !important; border-color: var(--dm-border) !important; color: var(--dm-text-primary) !important; } html[data-theme="dark"] .pagination .page-item.active .page-link { background-color: var(--clr-primary) !important; border-color: var(--clr-primary) !important; } html[data-theme="dark"] .pagination .page-item.disabled .page-link { background-color: var(--dm-bg-secondary) !important; color: var(--dm-text-muted) !important; } html[data-theme="dark"] .breadcrumb { background-color: transparent; } html[data-theme="dark"] .breadcrumb-item.active { color: var(--dm-text-muted); } html[data-theme="dark"] .alert-light { background-color: var(--dm-bg-elevated) !important; border-color: var(--dm-border) !important; color: var(--dm-text-primary) !important; } html[data-theme="dark"] .alert-box { background: #271b1d; border-left-color: #ff4d4f; color: #ff8a80; box-shadow: var(--dm-shadow-sm); } html[data-theme="dark"] .alert-box .alert-close-btn { color: #ff8a80; } html[data-theme="dark"] .alert-box .alert-close-btn:hover { color: #ff4d4f; } html[data-theme="dark"] .alert-list svg path { fill: #ff8a80; } html[data-theme="dark"] hr { border-color: var(--dm-border) !important; opacity: 1; } html[data-theme="dark"] .main-header-section .header-wrapper { background: transparent; } html[data-theme="dark"] .erp-table-section { background-color: transparent; } html[data-theme="dark"] .erp-box-content { background-color: var(--dm-surface); } html[data-theme="dark"] .table-header.p-16 { background-color: var(--dm-surface); border-color: var(--dm-border); } html[data-theme="dark"] .language-change .btn-light { background-color: var(--dm-input-bg) !important; border-color: var(--dm-border) !important; color: var(--dm-text-primary) !important; } html[data-theme="dark"] .language-change .dropdown-menu { background-color: var(--dm-surface) !important; } html[data-theme="dark"] .notifications .dropdown-menu { background-color: var(--dm-surface) !important; } html[data-theme="dark"] .notifications .dropdown-toggleer img { filter: brightness(0) invert(1); } html[data-theme="dark"] .notifications .dropdown-toggleer span.bg-red { background: #ee4749 !important; color: #fff !important; } html[data-theme="dark"] .sidebar-opner i { color: var(--dm-text-primary); } html[data-theme="dark"] .profile-info .dropdown-menu { background-color: var(--dm-surface) !important; box-shadow: var(--dm-shadow); } html[data-theme="dark"] .profile-info .dropdown-menu li { border-bottom-color: var(--dm-border); } html[data-theme="dark"] .profile-info .dropdown-menu li a { color: var(--dm-text-primary) !important; } html[data-theme="dark"] .profile-info .dropdown-menu li a:hover { color: var(--clr-primary) !important; } html[data-theme="dark"] .notification-header { border-bottom-color: var(--dm-border); } html[data-theme="dark"] .notification-footer { border-top-color: var(--dm-border); } html[data-theme="dark"] .couter-box { background-color: var(--dm-surface); } html[data-theme="dark"] .version-text { color: var(--dm-text-muted) !important; } html[data-theme="dark"] .add-order-btn { background-color: var(--clr-primary); color: #fff !important; } html[data-theme="dark"] .empty-screen-container { background-color: var(--dm-surface); } html[data-theme="dark"] .gpt-dashboard-card { background-color: transparent; } html[data-theme="dark"] .gpt-dashboard-card .couter-box { background-color: var(--dm-surface); box-shadow: var(--dm-shadow-sm); } html[data-theme="dark"] .gpt-dashboard-chart .card { background-color: var(--dm-surface) !important; } html[data-theme="dark"] .gpt-dashboard-chart .card-body { background-color: transparent; } /* ========================================================================== 11. ACCORDION, ALERTS, CODE BLOCKS ========================================================================== */ html[data-theme="dark"] .accordion { --bs-accordion-bg: var(--dm-surface); --bs-accordion-color: var(--dm-text-primary); --bs-accordion-border-color: var(--dm-border); --bs-accordion-btn-bg: var(--dm-surface); --bs-accordion-btn-color: var(--dm-text-primary); --bs-accordion-active-bg: var(--dm-bg-elevated); --bs-accordion-active-color: var(--dm-text-primary); --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(197, 33, 39, 0.25); } html[data-theme="dark"] .accordion-item { background-color: var(--dm-surface) !important; border-color: var(--dm-border) !important; } html[data-theme="dark"] .accordion-button { background-color: var(--dm-surface) !important; color: var(--dm-text-primary) !important; } html[data-theme="dark"] .accordion-button:not(.collapsed) { background-color: var(--dm-bg-elevated) !important; color: var(--dm-text-primary) !important; box-shadow: inset 0 -1px 0 var(--dm-border); } html[data-theme="dark"] .accordion-button::after { filter: invert(1) grayscale(100%) brightness(200%); } html[data-theme="dark"] .accordion-button:not(.collapsed)::after { filter: invert(1) grayscale(100%) brightness(200%); } html[data-theme="dark"] .accordion-body { background-color: var(--dm-surface) !important; color: var(--dm-text-secondary) !important; } html[data-theme="dark"] .accordion-body h5, html[data-theme="dark"] .accordion-body h6, html[data-theme="dark"] .accordion-body strong { color: var(--dm-text-primary) !important; } html[data-theme="dark"] .accordion-body code { background-color: var(--dm-bg-elevated); color: var(--clr-primary); padding: 2px 6px; border-radius: 4px; } html[data-theme="dark"] .accordion-body pre { background-color: var(--dm-bg-elevated) !important; color: var(--dm-text-primary) !important; border: 1px solid var(--dm-border); } html[data-theme="dark"] .accordion-body pre code { background-color: transparent; color: var(--dm-text-primary); padding: 0; } html[data-theme="dark"] .accordion-body ol.steps-list li { color: var(--dm-text-secondary); } html[data-theme="dark"] .accordion-body .alert-info { background-color: rgba(7, 154, 162, 0.15) !important; border-color: rgba(7, 154, 162, 0.3) !important; color: #5eead4 !important; } html[data-theme="dark"] .accordion-body .alert-warning { background-color: rgba(234, 179, 8, 0.15) !important; border-color: rgba(234, 179, 8, 0.3) !important; color: #fde047 !important; } html[data-theme="dark"] .accordion-body .alert-warning ul li, html[data-theme="dark"] .accordion-body .alert-info ul li { color: inherit !important; } html[data-theme="dark"] .domain-instructions .erp-table-section { background-color: transparent; } html[data-theme="dark"] .domain-instructions .accordion { background-color: transparent; } /* ========================================================================== 12. CRON JOB GUIDE - DARK MODE ========================================================================== */ html[data-theme="dark"] .cron-guide-wrapper { --cron-ink: var(--dm-text-primary); --cron-muted: var(--dm-text-secondary); --cron-line: var(--dm-border); --cron-panel: var(--dm-surface); --cron-light: rgba(197, 33, 39, 0.15); background: var(--dm-surface) !important; border-color: var(--dm-border) !important; box-shadow: var(--dm-shadow-sm); } html[data-theme="dark"] .cron-guide-title { color: var(--dm-text-primary) !important; } html[data-theme="dark"] .cron-guide-copy { color: var(--dm-text-secondary) !important; } html[data-theme="dark"] .cron-status-card, html[data-theme="dark"] .cron-guide-card { background: var(--dm-bg-elevated) !important; border: 1px solid var(--dm-border) !important; box-shadow: var(--dm-shadow-sm); } html[data-theme="dark"] .cron-status-card h5, html[data-theme="dark"] .cron-guide-card h5 { color: #ff5a5f !important; border-bottom-color: var(--dm-border) !important; } html[data-theme="dark"] .cron-status-pill { background: rgba(197, 33, 39, 0.15) !important; color: #ff6b6b !important; border: 1px solid rgba(197, 33, 39, 0.25); } html[data-theme="dark"] .cron-dot { background: #ff5a5f !important; box-shadow: 0 0 6px rgba(255, 90, 95, 0.5); } html[data-theme="dark"] .cron-command { background: var(--dm-input-bg) !important; color: #e4e4e8 !important; border-color: var(--dm-border) !important; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3); } html[data-theme="dark"] .cron-step-list li { color: var(--dm-text-secondary) !important; } html[data-theme="dark"] .cron-step-list li span:last-child { color: var(--dm-text-secondary) !important; } html[data-theme="dark"] .cron-step-number { background: linear-gradient(135deg, #c52127, #a31b20) !important; color: #fff !important; box-shadow: 0 2px 8px rgba(197, 33, 39, 0.4); } html[data-theme="dark"] .cron-note { background: rgba(197, 33, 39, 0.08) !important; border-left-color: #ff5a5f !important; color: var(--dm-text-secondary) !important; border-top: 1px solid var(--dm-border); border-right: 1px solid var(--dm-border); border-bottom: 1px solid var(--dm-border); } html[data-theme="dark"] .cron-supervisor-file { background: transparent; } html[data-theme="dark"] .cron-status-card .text-muted, html[data-theme="dark"] .cron-guide-card .text-muted { color: var(--dm-text-muted) !important; } html[data-theme="dark"] .cron-guide-wrapper .text-muted { color: var(--dm-text-muted) !important; } /* ========================================================================== 13. AUTOFILL FIX - PASSWORD & ALL INPUTS (Profile, Login, etc.) Chrome adds white/yellow background via -webkit-autofill. Override for dark mode. ========================================================================== */ html[data-theme="dark"] .form-control:-webkit-autofill, html[data-theme="dark"] .form-control:-webkit-autofill:hover, html[data-theme="dark"] .form-control:-webkit-autofill:focus, html[data-theme="dark"] .form-control:-webkit-autofill:active, html[data-theme="dark"] input:-webkit-autofill, html[data-theme="dark"] input:-webkit-autofill:hover, html[data-theme="dark"] input:-webkit-autofill:focus, html[data-theme="dark"] input:-webkit-autofill:active, html[data-theme="dark"] textarea:-webkit-autofill, html[data-theme="dark"] textarea:-webkit-autofill:hover, html[data-theme="dark"] textarea:-webkit-autofill:focus, html[data-theme="dark"] textarea:-webkit-autofill:active, html[data-theme="dark"] select:-webkit-autofill, html[data-theme="dark"] select:-webkit-autofill:hover, html[data-theme="dark"] select:-webkit-autofill:focus, html[data-theme="dark"] select:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 30px var(--dm-input-bg) inset !important; -webkit-text-fill-color: var(--dm-text-primary) !important; caret-color: var(--dm-text-primary) !important; background-color: var(--dm-input-bg) !important; color: var(--dm-text-primary) !important; border-color: var(--dm-input-border) !important; transition: background-color 5000s ease-in-out 0s !important; } /* Firefox autofill */ html[data-theme="dark"] .form-control:autofill, html[data-theme="dark"] input:autofill, html[data-theme="dark"] textarea:autofill, html[data-theme="dark"] select:autofill { box-shadow: 0 0 0 30px var(--dm-input-bg) inset !important; -webkit-text-fill-color: var(--dm-text-primary) !important; caret-color: var(--dm-text-primary) !important; background-color: var(--dm-input-bg) !important; color: var(--dm-text-primary) !important; border-color: var(--dm-input-border) !important; } /* Ensure profile page specific inputs also covered with higher specificity */ html[data-theme="dark"] .erp-dashboard-profile-section .form-control:-webkit-autofill, html[data-theme="dark"] .erp-dashboard-profile-section .form-control:-webkit-autofill:hover, html[data-theme="dark"] .erp-dashboard-profile-section .form-control:-webkit-autofill:focus, html[data-theme="dark"] .erp-dashboard-profile-section input:-webkit-autofill, html[data-theme="dark"] .erp-dashboard-profile-section input:-webkit-autofill:hover, html[data-theme="dark"] .erp-dashboard-profile-section input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 30px var(--dm-input-bg) inset !important; -webkit-text-fill-color: var(--dm-text-primary) !important; caret-color: var(--dm-text-primary) !important; } /* ========================================================================== 14. AMOUNT INFO CONTAINERS - DARK MODE Covers: .amount-info-container, .inventory-amount-info-container, .estimate-amount-info, .transfer-amount-info, .payment-container ========================================================================== */ /* Containers background & border */ html[data-theme="dark"] .amount-info-container, html[data-theme="dark"] .inventory-amount-info-container, html[data-theme="dark"] .estimate-amount-info, html[data-theme="dark"] .transfer-amount-info, html[data-theme="dark"] .payment-container.amount-info-container, html[data-theme="dark"] .payment-container.inventory-amount-info-container, html[data-theme="dark"] .payment-container.estimate-amount-info, html[data-theme="dark"] .sub-total-container, html[data-theme="dark"] .estimate-container { background-color: var(--dm-surface) !important; background: var(--dm-surface) !important; border-color: var(--dm-border) !important; color: var(--dm-text-primary); } /* Transfer override - light had #fff !important */ html[data-theme="dark"] .transfer-amount-info { background-color: var(--dm-surface) !important; } /* Estimate container explicit */ html[data-theme="dark"] .estimate-container { background-color: var(--dm-surface) !important; } /* Headings & titles inside */ html[data-theme="dark"] .amount-info-container h6, html[data-theme="dark"] .inventory-amount-info-container h6, html[data-theme="dark"] .estimate-amount-info h6, html[data-theme="dark"] .transfer-amount-info h6, html[data-theme="dark"] .payment-container h6, html[data-theme="dark"] .sub-total-container h6, html[data-theme="dark"] .payment-title, html[data-theme="dark"] .estimate-form-label, html[data-theme="dark"] .note-label { color: var(--dm-text-primary) !important; } /* Estimate form label secondary detail */ html[data-theme="dark"] .estimate-form-label { color: var(--dm-text-secondary) !important; } /* Muted / secondary headings */ html[data-theme="dark"] .amount-info-container .text-muted, html[data-theme="dark"] .inventory-amount-info-container .text-muted, html[data-theme="dark"] .estimate-amount-info .text-muted { color: var(--dm-text-muted) !important; } /* Inputs, selects, textareas inside all three containers */ html[data-theme="dark"] .amount-info-container .form-control, html[data-theme="dark"] .amount-info-container input, html[data-theme="dark"] .amount-info-container select, html[data-theme="dark"] .amount-info-container textarea, html[data-theme="dark"] .inventory-amount-info-container .form-control, html[data-theme="dark"] .inventory-amount-info-container input, html[data-theme="dark"] .inventory-amount-info-container select, html[data-theme="dark"] .inventory-amount-info-container textarea, html[data-theme="dark"] .estimate-amount-info .form-control, html[data-theme="dark"] .estimate-amount-info input, html[data-theme="dark"] .estimate-amount-info select, html[data-theme="dark"] .estimate-amount-info textarea, html[data-theme="dark"] .transfer-amount-info .form-control, html[data-theme="dark"] .transfer-amount-info input, html[data-theme="dark"] .transfer-amount-info select { background-color: var(--dm-input-bg) !important; border: 1px solid #3a3a4f !important; border-color: #3a3a4f !important; border-left: 1px solid #3a3a4f !important; border-right: 1px solid #3a3a4f !important; color: var(--dm-text-primary) !important; } /* Inventory specific - had #d8d8d8 !important - force left/right visible */ html[data-theme="dark"] .inventory-amount-info-container input, html[data-theme="dark"] .inventory-amount-info-container select { border: 1px solid #3a3a4f !important; border-left: 1px solid #3a3a4f !important; border-right: 1px solid #3a3a4f !important; border-color: #3a3a4f !important; } /* Estimate textarea - had #e5e7eb / #fff */ html[data-theme="dark"] .estimate-form-textarea { background-color: var(--dm-input-bg) !important; border: 1px solid #3a3a4f !important; border-color: #3a3a4f !important; border-left: 1px solid #3a3a4f !important; border-right: 1px solid #3a3a4f !important; color: var(--dm-text-primary) !important; } html[data-theme="dark"] .estimate-form-textarea::placeholder { color: var(--dm-text-muted) !important; } html[data-theme="dark"] .estimate-form-textarea:focus { border-color: var(--dm-border-focus) !important; background-color: var(--dm-input-bg) !important; } /* Placeholders */ html[data-theme="dark"] .amount-info-container input::placeholder, html[data-theme="dark"] .inventory-amount-info-container input::placeholder, html[data-theme="dark"] .estimate-amount-info input::placeholder, html[data-theme="dark"] .amount-info-container textarea::placeholder, html[data-theme="dark"] .inventory-amount-info-container textarea::placeholder { color: var(--dm-text-muted) !important; } /* Readonly / disabled inputs keep dark */ html[data-theme="dark"] .amount-info-container input[readonly], html[data-theme="dark"] .inventory-amount-info-container input[readonly], html[data-theme="dark"] .estimate-amount-info input[readonly] { background-color: var(--dm-input-bg) !important; color: var(--dm-text-secondary) !important; border: 1px solid #3a3a4f !important; border-color: #3a3a4f !important; border-left: 1px solid #3a3a4f !important; border-right: 1px solid #3a3a4f !important; } /* Separators & totals inside payment section */ html[data-theme="dark"] .amount-info-container hr, html[data-theme="dark"] .inventory-amount-info-container hr, html[data-theme="dark"] .estimate-amount-info hr, html[data-theme="dark"] .payment-container hr { border-color: var(--dm-border) !important; opacity: 1; } html[data-theme="dark"] .final-total, html[data-theme="dark"] #sub_total, html[data-theme="dark"] #total_amount, html[data-theme="dark"] #payable_amount, html[data-theme="dark"] #rounding_amount { color: var(--dm-text-primary) !important; } /* Dropdowns / payment type inside */ html[data-theme="dark"] .amount-info-container .form-select, html[data-theme="dark"] .inventory-amount-info-container .form-select, html[data-theme="dark"] .amount-info-container select, html[data-theme="dark"] .inventory-amount-info-container select, html[data-theme="dark"] .estimate-amount-info select { background-color: var(--dm-input-bg) !important; border: 1px solid #3a3a4f !important; border-color: #3a3a4f !important; border-left: 1px solid #3a3a4f !important; border-right: 1px solid #3a3a4f !important; color: var(--dm-text-primary) !important; } /* Ensure focus keeps visible border on all sides */ html[data-theme="dark"] .amount-info-container .form-control:focus, html[data-theme="dark"] .amount-info-container input:focus, html[data-theme="dark"] .amount-info-container select:focus, html[data-theme="dark"] .inventory-amount-info-container input:focus, html[data-theme="dark"] .inventory-amount-info-container select:focus, html[data-theme="dark"] .estimate-amount-info input:focus, html[data-theme="dark"] .estimate-amount-info select:focus, html[data-theme="dark"] .estimate-form-textarea:focus { border-color: var(--clr-primary) !important; border-left: 1px solid var(--clr-primary) !important; border-right: 1px solid var(--clr-primary) !important; box-shadow: none !important; } /* Fix Term & Condition / Note textarea left/right border clipped by overflow-x:hidden + row negative margin */ html[data-theme="dark"] .amount-info-container.estimate-amount-info { overflow-x: visible !important; overflow-y: visible !important; height: auto !important; min-height: 220px; } html[data-theme="dark"] .estimate-amount-info .row { margin-left: 0 !important; margin-right: 0 !important; --bs-gutter-x: 0 !important; width: 100% !important; padding: 0 !important; } html[data-theme="dark"] .estimate-form-textarea { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; display: block !important; margin: 0 !important; } /* ========================================================================== 15. OFFCANVAS - CATEGORY & BRAND SEARCH (Sales & Purchases) ========================================================================== */ /* Offcanvas container - override Bootstrap --bs-offcanvas-bg */ html[data-theme="dark"] .offcanvas, html[data-theme="dark"] .custom-offcanvas { --bs-offcanvas-bg: var(--dm-surface) !important; --bs-offcanvas-color: var(--dm-text-primary) !important; --bs-offcanvas-border-color: var(--dm-border) !important; background-color: var(--dm-surface) !important; background: var(--dm-surface) !important; color: var(--dm-text-primary) !important; border-left-color: var(--dm-border) !important; box-shadow: -4px 0 24px rgba(0, 0, 0, 0.5) !important; } html[data-theme="dark"] .offcanvas-header { background-color: var(--dm-surface) !important; border-bottom-color: var(--dm-border) !important; } html[data-theme="dark"] .offcanvas-header.border-bottom { border-bottom-color: var(--dm-border) !important; } html[data-theme="dark"] .offcanvas-title { color: var(--dm-text-primary) !important; } html[data-theme="dark"] .offcanvas .btn-close { filter: invert(1) grayscale(100%) brightness(200%) !important; opacity: 0.7; } html[data-theme="dark"] .offcanvas .btn-close:hover { opacity: 1; } html[data-theme="dark"] .offcanvas .btn-close:focus { box-shadow: 0 0 0 0.25rem rgba(197, 33, 39, 0.25) !important; } /* Search input inside offcanvas */ html[data-theme="dark"] .offcanvas .form-control { background-color: var(--dm-input-bg) !important; border-color: var(--dm-input-border) !important; color: var(--dm-text-primary) !important; } html[data-theme="dark"] .offcanvas .form-control::placeholder { color: var(--dm-text-muted) !important; } html[data-theme="dark"] .offcanvas .form-control:focus { background-color: var(--dm-input-bg) !important; border-color: var(--clr-primary) !important; box-shadow: none !important; } /* Search icon - remove white bg, use muted color */ html[data-theme="dark"] .search-icon { background-color: transparent !important; color: var(--dm-text-muted) !important; } html[data-theme="dark"] .offcanvas .position-relative .search-icon { background-color: transparent !important; color: var(--dm-text-muted) !important; } /* Scroll area */ html[data-theme="dark"] .category-brand-scroll { background-color: var(--dm-surface) !important; scrollbar-color: var(--dm-scrollbar-thumb) var(--dm-scrollbar-track) !important; } html[data-theme="dark"] .category-brand-scroll::-webkit-scrollbar-track { background: var(--dm-scrollbar-track) !important; } html[data-theme="dark"] .category-brand-scroll::-webkit-scrollbar-thumb { background-color: var(--dm-scrollbar-thumb) !important; border-radius: 4px; } html[data-theme="dark"] .category-brand-scroll::-webkit-scrollbar-thumb:hover { background-color: var(--dm-scrollbar-thumb-hover) !important; } /* Category / Brand grid */ html[data-theme="dark"] .category-container { scrollbar-color: var(--dm-scrollbar-thumb) var(--dm-scrollbar-track) !important; } html[data-theme="dark"] .category-container::-webkit-scrollbar-track { background-color: var(--dm-scrollbar-track) !important; } html[data-theme="dark"] .category-container::-webkit-scrollbar-thumb { background-color: var(--dm-scrollbar-thumb) !important; } /* Category & Brand cards */ html[data-theme="dark"] .category-container .category-content { background-color: var(--dm-bg-elevated) !important; border-color: var(--dm-border) !important; color: var(--dm-text-primary) !important; } html[data-theme="dark"] .category-container .category-content:hover { background-color: var(--dm-surface-hover) !important; border-color: var(--clr-primary) !important; } html[data-theme="dark"] .category-container .category-content .category-name, html[data-theme="dark"] .category-container .category-content .brand-name { color: var(--dm-text-primary) !important; } html[data-theme="dark"] .category-container .category-content:hover .category-name, html[data-theme="dark"] .category-container .category-content:hover .brand-name { color: var(--clr-primary) !important; } html[data-theme="dark"] .category-container .category-content .category-brand-img { filter: none; } html[data-theme="dark"] .category-container .category-content:hover .category-brand-img { filter: none; } /* Empty / No result handling inside offcanvas */ html[data-theme="dark"] .offcanvas .text-muted { color: var(--dm-text-muted) !important; } html[data-theme="dark"] .offcanvas .alert { background-color: var(--dm-bg-elevated) !important; border-color: var(--dm-border) !important; color: var(--dm-text-secondary) !important; } /* ========================================================================== 16. PURCHASE / POS - CATEGORY & BRAND BUTTONS + PRODUCTS HEADER ========================================================================== */ /* Products header container (holds search + Category/Brand buttons) */ html[data-theme="dark"] .products-header { background-color: var(--dm-surface) !important; border-color: var(--dm-border) !important; } /* Main & Products container already handled above, reinforce border */ html[data-theme="dark"] .main-container { background-color: var(--dm-surface) !important; border-color: var(--dm-border) !important; } html[data-theme="dark"] .main-container .products-container { background-color: var(--dm-bg-secondary) !important; border-color: var(--dm-border) !important; } html[data-theme="dark"] .main-container .products-header .search-input { background-color: var(--dm-input-bg) !important; border-color: var(--dm-input-border) !important; color: var(--dm-text-primary) !important; } html[data-theme="dark"] .main-container .products-header .search-input::placeholder { color: var(--dm-text-muted) !important; } html[data-theme="dark"] .main-container .products-header .search-input:focus { border-color: var(--clr-primary) !important; background-color: var(--dm-input-bg) !important; box-shadow: none !important; } /* Category Button - Dark Mode */ html[data-theme="dark"] .btn-category { background-color: var(--secondary-color) !important; background: var(--secondary-color) !important; color: #fff !important; border: 1px solid transparent !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important; } html[data-theme="dark"] .btn-category:hover { background-color: #c9720f !important; background: #c9720f !important; color: #fff !important; border-color: var(--dm-border) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important; } html[data-theme="dark"] .btn-category:active, html[data-theme="dark"] .btn-category:focus { background-color: var(--secondary-color) !important; color: #fff !important; border-color: var(--dm-border) !important; box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.25) !important; } /* Brand Button - Dark Mode */ html[data-theme="dark"] .btn-brand { background-color: #1e90ff !important; background: #1e90ff !important; color: #fff !important; border: 1px solid transparent !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important; } html[data-theme="dark"] .btn-brand:hover { background-color: #167bd8 !important; background: #167bd8 !important; color: #fff !important; border-color: var(--dm-border) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important; } html[data-theme="dark"] .btn-brand:active, html[data-theme="dark"] .btn-brand:focus { background-color: #1e90ff !important; color: #fff !important; border-color: var(--dm-border) !important; box-shadow: 0 0 0 3px rgba(30, 144, 255, 0.25) !important; } /* Ensure btn inside offcanvas trigger area keeps white text in dark */ html[data-theme="dark"] .btn-category, html[data-theme="dark"] .btn-brand, html[data-theme="dark"] .btn-category *, html[data-theme="dark"] .btn-brand * { color: #fff !important; } /* Sales Main Container dark tweak */ html[data-theme="dark"] .sales-main-container { background-color: transparent !important; } html[data-theme="dark"] .sales-container { background-color: var(--dm-surface) !important; } html[data-theme="dark"] .search-product { background-color: transparent !important; } /* Product list search card scroll */ html[data-theme="dark"] .products-container .scroll-card { background-color: var(--dm-bg-secondary) !important; } html[data-theme="dark"] .search-product-card { background-color: transparent !important; } /* ========================================================================== 17. PURCHASE CART TABLE - DARK MODE (cart-list.blade.php) ========================================================================== */ /* Table wrapper & table itself */ html[data-theme="dark"] .cart-payment .table-responsive { background-color: var(--dm-surface) !important; border-color: var(--dm-border) !important; } html[data-theme="dark"] .cart-payment .table { background-color: var(--dm-surface) !important; color: var(--dm-text-primary); } html[data-theme="dark"] .cart-payment .table thead th { background-color: var(--dm-table-header-bg) !important; color: var(--dm-text-primary) !important; border-color: var(--dm-table-border) !important; } html[data-theme="dark"] .cart-payment .table tbody td { background-color: var(--dm-surface) !important; color: var(--dm-text-secondary) !important; border-color: var(--dm-table-border) !important; } html[data-theme="dark"] .cart-payment .table tbody tr:hover td { background-color: var(--dm-table-row-hover) !important; } /* Image inside cart */ html[data-theme="dark"] .cart-payment .table-img { border: 1px solid var(--dm-border) !important; background-color: var(--dm-bg-elevated) !important; } /* Inputs inside cart table - batch, price, qty, expire */ html[data-theme="dark"] .cart-payment .custom-number-input, html[data-theme="dark"] .cart-payment .sales-input, html[data-theme="dark"] .cart-payment .batch_no, html[data-theme="dark"] .cart-payment .cart-qty, html[data-theme="dark"] .cart-payment .dynamic-width, html[data-theme="dark"] .cart-payment input.price, html[data-theme="dark"] .cart-payment input.expire_date { background-color: var(--dm-input-bg) !important; border: 1px solid var(--dm-input-border) !important; color: var(--dm-text-primary) !important; box-shadow: none !important; } html[data-theme="dark"] .cart-payment .custom-number-input::placeholder, html[data-theme="dark"] .cart-payment .sales-input::placeholder, html[data-theme="dark"] .cart-payment .batch_no::placeholder, html[data-theme="dark"] .cart-payment .cart-qty::placeholder, html[data-theme="dark"] .cart-payment input.price::placeholder { color: var(--dm-text-muted) !important; } html[data-theme="dark"] .cart-payment .custom-number-input:focus, html[data-theme="dark"] .cart-payment .sales-input:focus, html[data-theme="dark"] .cart-payment .batch_no:focus, html[data-theme="dark"] .cart-payment .cart-qty:focus, html[data-theme="dark"] .cart-payment .dynamic-width:focus, html[data-theme="dark"] .cart-payment input.price:focus, html[data-theme="dark"] .cart-payment input.expire_date:focus { background-color: var(--dm-input-bg) !important; border-color: var(--clr-primary) !important; box-shadow: none !important; color: var(--dm-text-primary) !important; } /* Disabled / readonly qty when serial enabled */ html[data-theme="dark"] .cart-payment .cart-qty:disabled, html[data-theme="dark"] .cart-payment .cart-qty[readonly], html[data-theme="dark"] .cart-payment .custom-number-input:disabled { background-color: var(--dm-bg-elevated) !important; color: var(--dm-text-muted) !important; border-color: var(--dm-border) !important; opacity: 0.7; } /* Qty incre-decre buttons inside cart */ html[data-theme="dark"] .cart-payment .incre-decre { background-color: var(--dm-input-bg) !important; border: 1px solid var(--dm-border) !important; color: var(--dm-text-primary) !important; } html[data-theme="dark"] .cart-payment .incre-decre i { color: var(--dm-text-primary) !important; } html[data-theme="dark"] .cart-payment .incre-decre:hover { background-color: var(--dm-surface-hover) !important; border-color: var(--clr-primary) !important; color: var(--clr-primary) !important; } html[data-theme="dark"] .cart-payment .incre-decre:hover i { color: var(--clr-primary) !important; } html[data-theme="dark"] .cart-payment .incre-decre:disabled { background-color: var(--dm-bg-elevated) !important; border-color: var(--dm-border) !important; color: var(--dm-text-muted) !important; opacity: 0.5; cursor: not-allowed; } html[data-theme="dark"] .cart-payment .incre-decre:disabled i { color: var(--dm-text-muted) !important; } /* Serial cell button */ html[data-theme="dark"] .serial-cell-button { background-color: rgba(197, 33, 39, 0.15) !important; border: 1px solid transparent !important; } html[data-theme="dark"] .serial-cell-button:hover { background-color: rgba(197, 33, 39, 0.25) !important; border-color: var(--dm-border) !important; } html[data-theme="dark"] .serial-cell-button:disabled { background-color: var(--dm-bg-elevated) !important; opacity: 0.5; } /* Remove (x) button */ html[data-theme="dark"] .cart-payment .x-btn { background-color: var(--dm-surface) !important; border: 1px solid transparent !important; } html[data-theme="dark"] .cart-payment .x-btn:hover { background-color: var(--dm-surface-hover) !important; border-color: var(--dm-border) !important; } html[data-theme="dark"] .cart-payment .x-btn img { filter: invert(1) grayscale(100%) brightness(1.8) !important; opacity: 0.85; } html[data-theme="dark"] .cart-payment .x-btn:hover img { filter: invert(1) grayscale(100%) brightness(2) !important; opacity: 1; } /* Subtotal text */ html[data-theme="dark"] .cart-payment .cart-subtotal { color: var(--dm-text-primary) !important; font-weight: 600 !important; } /* Empty cart row / no product message if any */ html[data-theme="dark"] .cart-payment tbody:empty::after { color: var(--dm-text-muted); } /* Tax amount td */ html[data-theme="dark"] .cart-payment td { color: var(--dm-text-secondary); } html[data-theme="dark"] .cart-payment .table-bordered { border-color: var(--dm-table-border) !important; } /* ========================================================================== Generic custom-number-input dark (used in purchase returns etc.) ========================================================================== */ html[data-theme="dark"] .custom-number-input { background-color: var(--dm-input-bg) !important; border: 1px solid var(--dm-input-border) !important; color: var(--dm-text-primary) !important; } html[data-theme="dark"] .custom-number-input::placeholder { color: var(--dm-text-muted) !important; } html[data-theme="dark"] .custom-number-input:focus { background-color: var(--dm-input-bg) !important; border-color: var(--clr-primary) !important; color: var(--dm-text-primary) !important; box-shadow: none !important; } /* ========================================================================== 18. PURCHASE RETURNS - RETURNED QTY INPUT (purchase-returns/create.blade.php) ========================================================================== */ html[data-theme="dark"] .return-card { background-color: var(--dm-surface) !important; border-color: var(--dm-border) !important; } html[data-theme="dark"] .return-card .table-responsive, html[data-theme="dark"] .return-card .table { background-color: var(--dm-surface) !important; } html[data-theme="dark"] .return-card .table thead th { background-color: var(--dm-table-header-bg) !important; color: var(--dm-text-primary) !important; border-color: var(--dm-table-border) !important; } html[data-theme="dark"] .return-card .table tbody td { background-color: var(--dm-surface) !important; color: var(--dm-text-secondary) !important; border-color: var(--dm-table-border) !important; } html[data-theme="dark"] .return-card .table tbody tr:hover td { background-color: var(--dm-table-row-hover) !important; } html[data-theme="dark"] .return-card .table-img { border: 1px solid var(--dm-border) !important; background-color: var(--dm-bg-elevated) !important; } html[data-theme="dark"] .return-card .custom-number-input.return-qty, html[data-theme="dark"] .return-card .return-qty { background-color: var(--dm-input-bg) !important; border: 1px solid var(--dm-input-border) !important; color: var(--dm-text-primary) !important; } html[data-theme="dark"] .return-card .custom-number-input.return-qty::placeholder, html[data-theme="dark"] .return-card .return-qty::placeholder { color: var(--dm-text-muted) !important; } html[data-theme="dark"] .return-card .custom-number-input.return-qty:focus, html[data-theme="dark"] .return-card .return-qty:focus { background-color: var(--dm-input-bg) !important; border-color: var(--clr-primary) !important; color: var(--dm-text-primary) !important; box-shadow: none !important; } html[data-theme="dark"] .return-card .incre-decre { background-color: var(--dm-input-bg) !important; border: 1px solid var(--dm-border) !important; color: var(--dm-text-primary) !important; } html[data-theme="dark"] .return-card .incre-decre i { color: var(--dm-text-primary) !important; } html[data-theme="dark"] .return-card .incre-decre:hover { background-color: var(--dm-surface-hover) !important; border-color: var(--clr-primary) !important; color: var(--clr-primary) !important; } html[data-theme="dark"] .return-card .incre-decre:hover i { color: var(--clr-primary) !important; } /* ========================================================================== 19. SERIAL / IMEI MODALS - Add New & Select (SerialCodeAddon) ========================================================================== */ /* Modal container */ html[data-theme="dark"] #serialModal .modal-content, html[data-theme="dark"] #serial-selection-modal .modal-content, html[data-theme="dark"] #serialModal .cart-modal-content, html[data-theme="dark"] #serial-selection-modal .cart-modal-content { background-color: var(--dm-surface) !important; border-color: var(--dm-border) !important; box-shadow: var(--dm-shadow-lg) !important; } html[data-theme="dark"] #serialModal .modal-header, html[data-theme="dark"] #serial-selection-modal .modal-header { background-color: var(--dm-surface) !important; border-bottom-color: var(--dm-border) !important; } html[data-theme="dark"] #serialModal .modal-footer, html[data-theme="dark"] #serial-selection-modal .modal-footer { background-color: var(--dm-surface) !important; border-top-color: var(--dm-border) !important; } html[data-theme="dark"] #serialModal .modal-title, html[data-theme="dark"] #serial-selection-modal .modal-title { color: var(--dm-text-primary) !important; } html[data-theme="dark"] #serialModal .text-muted, html[data-theme="dark"] #serial-selection-modal .text-muted { color: var(--dm-text-muted) !important; } html[data-theme="dark"] #serialModal #enteredCount { color: var(--dm-text-primary) !important; } html[data-theme="dark"] #serialModal .btn-close, html[data-theme="dark"] #serial-selection-modal .btn-close { filter: invert(1) grayscale(100%) brightness(200%) !important; opacity: 0.7; } html[data-theme="dark"] #serialModal .btn-close:hover, html[data-theme="dark"] #serial-selection-modal .btn-close:hover { opacity: 1; } /* Serial input + barcode icon */ html[data-theme="dark"] #serialModal .serial-input, html[data-theme="dark"] #serial-selection-modal .serial-input { background-color: var(--dm-input-bg) !important; border-color: var(--dm-input-border) !important; color: var(--dm-text-primary) !important; } html[data-theme="dark"] #serialModal .serial-input::placeholder, html[data-theme="dark"] #serial-selection-modal .serial-input::placeholder { color: var(--dm-text-muted) !important; } html[data-theme="dark"] #serialModal .serial-input:focus, html[data-theme="dark"] #serial-selection-modal .serial-input:focus { background-color: var(--dm-input-bg) !important; border-color: var(--clr-primary) !important; box-shadow: none !important; } html[data-theme="dark"] #serialModal .barcode-svg, html[data-theme="dark"] #serial-selection-modal .barcode-svg { opacity: 0.85; } html[data-theme="dark"] #serialModal .barcode-svg path[fill="#6A7073"], html[data-theme="dark"] #serial-selection-modal .barcode-svg path[fill="#6A7073"] { fill: var(--dm-text-muted) !important; } html[data-theme="dark"] #serialModal .barcode-svg path[fill="#C7312E"], html[data-theme="dark"] #serial-selection-modal .barcode-svg path[fill="#C7312E"], html[data-theme="dark"] #serialModal .barcode-svg path[fill="#C52127"] { fill: var(--clr-primary) !important; } /* Search icon in select modal */ html[data-theme="dark"] #serial-selection-modal .serial-modal-input img { filter: invert(1) brightness(1.5) !important; opacity: 0.7; } /* Save button inside modal */ html[data-theme="dark"] #serialModal .modal-save-btn { background-color: var(--accent-color) !important; color: var(--clr-primary) !important; border: 1px solid transparent !important; } html[data-theme="dark"] #serialModal .modal-save-btn:hover { background-color: rgba(197, 33, 39, 0.25) !important; border-color: var(--dm-border) !important; } /* Serial title */ html[data-theme="dark"] #serial-selection-modal .serial-title { color: var(--dm-text-primary) !important; } /* Serial list containers */ html[data-theme="dark"] .serial-list-container, html[data-theme="dark"] .serial-container { background-color: var(--dm-bg-elevated) !important; border-color: var(--dm-border) !important; } html[data-theme="dark"] .serial-container { background-color: var(--dm-input-bg) !important; border: 1px solid var(--dm-border) !important; } /* Serial items */ html[data-theme="dark"] .serial-item { background-color: var(--dm-bg-elevated) !important; border: 1px solid var(--dm-border) !important; color: var(--dm-text-primary) !important; } html[data-theme="dark"] .serial-item:hover { background-color: var(--dm-surface-hover) !important; border-color: var(--clr-primary) !important; color: var(--clr-primary) !important; } html[data-theme="dark"] .serial-item span { color: var(--dm-text-primary) !important; } html[data-theme="dark"] .serial-item:hover span { color: var(--clr-primary) !important; } /* Cross remove icon inside serial-item */ html[data-theme="dark"] .serial-item .serial-remove-btn svg path, html[data-theme="dark"] .serial-item .serial-remove-btn path { stroke: var(--clr-primary) !important; } /* Scrollbar for serial containers */ html[data-theme="dark"] .serial-list-container::-webkit-scrollbar-track, html[data-theme="dark"] .serial-container::-webkit-scrollbar-track { background: var(--dm-scrollbar-track) !important; } html[data-theme="dark"] .serial-list-container::-webkit-scrollbar-thumb, html[data-theme="dark"] .serial-container::-webkit-scrollbar-thumb { background: var(--dm-scrollbar-thumb) !important; } html[data-theme="dark"] .serial-list-container::-webkit-scrollbar-thumb:hover, html[data-theme="dark"] .serial-container::-webkit-scrollbar-thumb:hover { background: var(--dm-scrollbar-thumb-hover) !important; } html[data-theme="dark"] .serial-list-container, html[data-theme="dark"] .serial-container { scrollbar-color: var(--dm-scrollbar-thumb) var(--dm-scrollbar-track) !important; } /* ========================================================================== 20. TAGIFY - Variations Values Input (variations/index) ========================================================================== */ html[data-theme="dark"] .tagify { --tags-border-color: var(--dm-input-border) !important; --tags-hover-border-color: var(--dm-border-light) !important; --tags-focus-border-color: var(--clr-primary) !important; --tag-bg: var(--dm-bg-elevated) !important; --tag-hover: var(--dm-surface-hover) !important; --tag-text-color: var(--dm-text-primary) !important; --tag-text-color--edit: var(--dm-text-primary) !important; --tag-remove-bg: rgba(197, 33, 39, 0.3) !important; --tag-remove-btn-color: var(--dm-text-muted) !important; --tag-remove-btn-bg--hover: #c77777 !important; --input-color: var(--dm-text-primary) !important; --placeholder-color: var(--dm-text-muted) !important; --placeholder-color-focus: var(--dm-text-muted) !important; background-color: var(--dm-input-bg) !important; border-color: var(--dm-input-border) !important; color: var(--dm-text-primary) !important; } html[data-theme="dark"] .tagify:hover { border-color: var(--dm-border-light) !important; } html[data-theme="dark"] .tagify.tagify--focus { border-color: var(--clr-primary) !important; box-shadow: none !important; } html[data-theme="dark"] .tagify__tag > div { color: var(--dm-text-primary) !important; } html[data-theme="dark"] .tagify__tag > div::before { box-shadow: 0 0 0 var(--tag-inset-shadow-size) var(--dm-bg-elevated) inset !important; } html[data-theme="dark"] .tagify__tag:hover > div::before { box-shadow: 0 0 0 var(--tag-inset-shadow-size) var(--dm-surface-hover) inset !important; } html[data-theme="dark"] .tagify__tag__removeBtn { color: var(--dm-text-muted) !important; } html[data-theme="dark"] .tagify__tag__removeBtn:hover { background: #c77777 !important; color: #fff !important; } html[data-theme="dark"] .tagify__input { color: var(--dm-text-primary) !important; } html[data-theme="dark"] .tagify__input::before { color: var(--dm-text-muted) !important; } html[data-theme="dark"] .tagify__dropdown { border-color: var(--clr-primary) !important; } html[data-theme="dark"] .tagify__dropdown__wrapper { background: var(--dm-dropdown-bg) !important; border-color: var(--dm-border) !important; border-top-color: var(--clr-primary) !important; box-shadow: var(--dm-shadow) !important; color: var(--dm-text-primary) !important; } html[data-theme="dark"] .tagify__dropdown__item { color: var(--dm-text-primary) !important; } html[data-theme="dark"] .tagify__dropdown__item--active { background: var(--clr-primary) !important; color: #fff !important; } html[data-theme="dark"] .tagify__dropdown__item:hover { background: var(--dm-dropdown-hover) !important; color: var(--clr-primary) !important; } /* Ensure variations modal inputs fully dark */ html[data-theme="dark"] #variations-create-modal .modal-content, html[data-theme="dark"] #variations-edit-modal .modal-content { background-color: var(--dm-surface) !important; border-color: var(--dm-border) !important; } html[data-theme="dark"] #variations-create-modal .modal-header, html[data-theme="dark"] #variations-edit-modal .modal-header { border-bottom-color: var(--dm-border) !important; } html[data-theme="dark"] #variations-create-modal .modal-title, html[data-theme="dark"] #variations-edit-modal .modal-title { color: var(--dm-text-primary) !important; } html[data-theme="dark"] #variations-create-modal .btn-close, html[data-theme="dark"] #variations-edit-modal .btn-close { filter: invert(1) grayscale(100%) brightness(200%) !important; } /* ========================================================================== 21. TRANSFER - SELECT PRODUCT (Add New Transfer page) ========================================================================== */ /* Main product dropdown container */ html[data-theme="dark"] .transfer-product-select.product-dropdown, html[data-theme="dark"] #productDropdown.product-dropdown { background-color: var(--dm-surface) !important; border-color: var(--dm-input-border) !important; } /* Selected display bar */ html[data-theme="dark"] .transfer-product-select .product-selected, html[data-theme="dark"] #productDropdown .product-selected, html[data-theme="dark"] .product-dropdown .product-selected { background-color: var(--dm-input-bg) !important; border-color: var(--dm-input-border) !important; color: var(--dm-text-primary) !important; } html[data-theme="dark"] .transfer-product-select .product-selected span, html[data-theme="dark"] #productDropdown .product-selected span { color: var(--dm-text-primary) !important; } html[data-theme="dark"] .transfer-product-select .product-selected #selectedValue, html[data-theme="dark"] #productDropdown #selectedValue { color: var(--dm-text-primary) !important; } html[data-theme="dark"] .transfer-product-select .product-selected #arrow svg path, html[data-theme="dark"] #productDropdown #arrow svg path, html[data-theme="dark"] .product-dropdown #arrow svg path { stroke: var(--dm-text-muted) !important; } /* Search input inside dropdown */ html[data-theme="dark"] .transfer-product-select .dropdown-search, html[data-theme="dark"] #searchContainer.dropdown-search { background-color: var(--dm-dropdown-bg) !important; border-color: var(--dm-border) !important; } html[data-theme="dark"] .transfer-product-select #productSearch, html[data-theme="dark"] #productSearch, html[data-theme="dark"] .dropdown-search #productSearch { background-color: var(--dm-input-bg) !important; border: 1px solid var(--dm-input-border) !important; color: var(--dm-text-primary) !important; } html[data-theme="dark"] .transfer-product-select #productSearch::placeholder, html[data-theme="dark"] #productSearch::placeholder { color: var(--dm-text-muted) !important; } html[data-theme="dark"] .transfer-product-select #productSearch:focus { border-color: var(--clr-primary) !important; box-shadow: none !important; } /* Options list */ html[data-theme="dark"] .transfer-product-select .product-dropdown-options, html[data-theme="dark"] #dropdownList.product-dropdown-options { background-color: var(--dm-dropdown-bg) !important; border-color: var(--dm-border) !important; box-shadow: var(--dm-shadow) !important; scrollbar-color: var(--dm-scrollbar-thumb) var(--dm-scrollbar-track) !important; } html[data-theme="dark"] .transfer-product-select .product-dropdown-options::-webkit-scrollbar-track, html[data-theme="dark"] #dropdownList::-webkit-scrollbar-track { background: var(--dm-scrollbar-track) !important; } html[data-theme="dark"] .transfer-product-select .product-dropdown-options::-webkit-scrollbar-thumb, html[data-theme="dark"] #dropdownList::-webkit-scrollbar-thumb { background: var(--dm-scrollbar-thumb) !important; } html[data-theme="dark"] .transfer-product-select .product-dropdown-options .product-option-item, html[data-theme="dark"] #dropdownList .product-option-item { border-color: var(--dm-border) !important; background-color: transparent !important; } html[data-theme="dark"] .transfer-product-select .product-dropdown-options .product-option-item:hover, html[data-theme="dark"] #dropdownList .product-option-item:hover { background-color: var(--dm-dropdown-hover) !important; } html[data-theme="dark"] .transfer-product-select .product-dropdown-options .product-title, html[data-theme="dark"] #dropdownList .product-title { color: var(--dm-text-primary) !important; } html[data-theme="dark"] .transfer-product-select .product-dropdown-options .product-des, html[data-theme="dark"] #dropdownList .product-des, html[data-theme="dark"] .transfer-product-select .product-dropdown-options p, html[data-theme="dark"] #dropdownList p { color: var(--dm-text-secondary) !important; } html[data-theme="dark"] .transfer-product-select .product-dropdown-options .product-price, html[data-theme="dark"] #dropdownList .product-price { color: var(--dm-text-primary) !important; } html[data-theme="dark"] .transfer-product-select .product-dropdown-options .product-in-stock, html[data-theme="dark"] #dropdownList .product-in-stock { color: var(--dm-text-muted) !important; } html[data-theme="dark"] .transfer-product-select .product-dropdown-options .product-left img { border-color: var(--dm-border) !important; background-color: var(--dm-bg-elevated) !important; } /* Plus button next to select */ html[data-theme="dark"] .trasfer-square-btn, html[data-theme="dark"] .transfer-product-select + a.square-btn, html[data-theme="dark"] .transfer-product-select + a.trasfer-square-btn { background-color: var(--dm-surface) !important; border-color: var(--dm-border) !important; } /* ========================================================================== 22. PARTIES - BALANCE INPUT (Add New Customer / Supplier) ========================================================================== */ html[data-theme="dark"] .input-select-wrapper { background-color: var(--dm-input-bg) !important; border-color: var(--dm-input-border) !important; border: 1px solid var(--dm-input-border) !important; } html[data-theme="dark"] .input-select-wrapper input { background-color: var(--dm-input-bg) !important; color: var(--dm-text-primary) !important; border: none !important; } html[data-theme="dark"] .input-select-wrapper input::placeholder { color: var(--dm-text-muted) !important; } html[data-theme="dark"] .input-select-wrapper input:focus { background-color: var(--dm-input-bg) !important; color: var(--dm-text-primary) !important; box-shadow: none !important; } html[data-theme="dark"] .input-select-wrapper select { background-color: var(--dm-bg-elevated) !important; background: var(--dm-bg-elevated) !important; color: var(--dm-text-primary) !important; border-left: 1px solid var(--dm-border) !important; border-top: none !important; border-right: none !important; border-bottom: none !important; } html[data-theme="dark"] .input-select-wrapper select:focus { background-color: var(--dm-bg-elevated) !important; color: var(--dm-text-primary) !important; box-shadow: none !important; } html[data-theme="dark"] .input-select-wrapper select option { background-color: var(--dm-dropdown-bg) !important; color: var(--dm-text-primary) !important; } /* ========================================================================== 23. CASH TO BANK TRANSFER - IMAGE UPLOAD (cashes/modal/transfer.blade.php) ========================================================================== */ html[data-theme="dark"] #transfer .modal-content { background-color: var(--dm-surface) !important; border-color: var(--dm-border) !important; } html[data-theme="dark"] #transfer .modal-header { border-bottom-color: var(--dm-border) !important; } html[data-theme="dark"] #transfer .modal-title { color: var(--dm-text-primary) !important; } html[data-theme="dark"] #transfer .btn-close { filter: invert(1) grayscale(100%) brightness(200%) !important; } html[data-theme="dark"] #uploadBox { background-color: var(--dm-input-bg) !important; border-color: var(--dm-border) !important; color: var(--dm-text-secondary) !important; } html[data-theme="dark"] #uploadBox:hover { background-color: var(--dm-bg-elevated) !important; border-color: var(--dm-text-muted) !important; } html[data-theme="dark"] #previewArea p { color: var(--dm-text-secondary) !important; } html[data-theme="dark"] #previewArea #iconArea img { filter: brightness(1.3) !important; opacity: 0.8; } html[data-theme="dark"] .browse-text { color: var(--clr-primary) !important; } html[data-theme="dark"] .img-title { color: var(--dm-text-primary) !important; } html[data-theme="dark"] .img-title span { color: var(--dm-text-muted) !important; } html[data-theme="dark"] #previewArea img { border-color: var(--dm-border) !important; } /* Uploaded preview image inside #uploadBox */ html[data-theme="dark"] #uploadBox img { border-color: var(--dm-border) !important; } html[data-theme="dark"] #uploadBox .img-remove-btn { background: rgba(255, 255, 255, 0.15) !important; color: #fff !important; } /* ========================================================================== 24. CASHES INDEX - Cash To Bank Transfer & Adjust Cash Balance (business::cashes.index + #bankTransactionModal) ========================================================================== */ /* Header & Balance card */ html[data-theme="dark"] .loss-profit-container { background-color: var(--dm-surface) !important; border-color: var(--dm-border) !important; } html[data-theme="dark"] .profit-card { background: #2a4a3a !important; border-color: var(--dm-border) !important; } html[data-theme="dark"] .profit-card .stat-title, html[data-theme="dark"] .profit-card .stat-value { color: #fff !important; } /* Table header with Transfer / Adjust buttons */ html[data-theme="dark"] .table-header { background-color: var(--dm-surface) !important; border-color: var(--dm-border) !important; } html[data-theme="dark"] .table-header h4 { color: var(--dm-text-primary) !important; } html[data-theme="dark"] #cash_to_bank, html[data-theme="dark"] #adjust_cash { background-color: var(--clr-primary) !important; border-color: var(--clr-primary) !important; color: #fff !important; } html[data-theme="dark"] #cash_to_bank:hover, html[data-theme="dark"] #adjust_cash:hover { background-color: #a31b20 !important; border-color: #a31b20 !important; } /* Generic add-order-btn inside cashes index */ html[data-theme="dark"] .add-order-btn { background-color: var(--clr-primary) !important; border-color: var(--clr-primary) !important; color: #fff !important; } /* Transaction Modal - BankTransactionModal (used for both transfers) */ html[data-theme="dark"] #bankTransactionModal .modal-content { background-color: var(--dm-surface) !important; border-color: var(--dm-border) !important; } html[data-theme="dark"] #bankTransactionModal .modal-header { background-color: var(--dm-surface) !important; border-bottom-color: var(--dm-border) !important; } html[data-theme="dark"] #bankTransactionModal .modal-title { color: var(--dm-text-primary) !important; } html[data-theme="dark"] #bankTransactionModal .btn-close { filter: invert(1) grayscale(100%) brightness(200%) !important; } html[data-theme="dark"] #bankTransactionModal label { color: var(--dm-text-primary) !important; } html[data-theme="dark"] #bankTransactionModal .form-control { background-color: var(--dm-input-bg) !important; border-color: var(--dm-input-border) !important; color: var(--dm-text-primary) !important; } html[data-theme="dark"] #bankTransactionModal .form-control::placeholder { color: var(--dm-text-muted) !important; } html[data-theme="dark"] #bankTransactionModal .form-control:focus { border-color: var(--clr-primary) !important; box-shadow: none !important; } html[data-theme="dark"] #bankTransactionModal .form-control[readonly] { background-color: var(--dm-bg-elevated) !important; color: var(--dm-text-muted) !important; } html[data-theme="dark"] #bankTransactionModal textarea.form-control { background-color: var(--dm-input-bg) !important; border-color: var(--dm-input-border) !important; color: var(--dm-text-primary) !important; } /* Custom upload box inside transaction modal */ html[data-theme="dark"] #bankTransactionModal .custom-upload-wrapper { background-color: transparent !important; } html[data-theme="dark"] #bankTransactionModal .custom-upload-box { background-color: var(--dm-input-bg) !important; border: 2px dashed var(--dm-border) !important; color: var(--dm-text-secondary) !important; } html[data-theme="dark"] #bankTransactionModal .custom-upload-box:hover { background-color: var(--dm-bg-elevated) !important; border-color: var(--dm-text-muted) !important; } html[data-theme="dark"] #bankTransactionModal .custom-upload-text { color: var(--dm-text-secondary) !important; } html[data-theme="dark"] #bankTransactionModal .custom-upload-content svg path { stroke: var(--dm-text-muted) !important; } html[data-theme="dark"] #bankTransactionModal .custom-preview-img { border-color: var(--dm-border) !important; } /* Radio buttons for Adjust Cash - Add / Reduce */ html[data-theme="dark"] #bankTransactionModal .form-check-label.cash-label { color: var(--dm-text-primary) !important; } html[data-theme="dark"] #bankTransactionModal .form-check-input { background-color: var(--dm-input-bg) !important; border-color: var(--dm-border) !important; } html[data-theme="dark"] #bankTransactionModal .form-check-input:checked { background-color: var(--clr-primary) !important; border-color: var(--clr-primary) !important; } html[data-theme="dark"] #bankTransactionModal .modal-footer { background-color: var(--dm-surface) !important; border-top-color: var(--dm-border) !important; } /* Also handle legacy adjust-cash modal if directly used */ html[data-theme="dark"] #adjust-cash .modal-content, html[data-theme="dark"] #transfer .modal-content { background-color: var(--dm-surface) !important; } /* ========================================================================== 25. SALES INVENTORY - SELECT PRODUCT SECTION (business::sales.inventory) ========================================================================== */ /* Label */ html[data-theme="dark"] #inventoryProductDropdown + label, html[data-theme="dark"] label { /* generic label already handled, ensure section specific */ } /* Main dropdown container */ html[data-theme="dark"] #inventoryProductDropdown.product-dropdown { background-color: var(--dm-surface) !important; border-color: var(--dm-input-border) !important; } html[data-theme="dark"] #inventoryProductDropdown .input-group { background-color: transparent !important; } /* Selected bar (shows "Select Product") */ html[data-theme="dark"] #inventoryProductDropdown .product-selected { background-color: var(--dm-input-bg) !important; border: 1px solid var(--dm-input-border) !important; color: var(--dm-text-primary) !important; } html[data-theme="dark"] #inventoryProductDropdown #inventorySelectedValue { color: var(--dm-text-primary) !important; } html[data-theme="dark"] #inventoryProductDropdown #inventoryArrow svg path { stroke: var(--dm-text-muted) !important; } /* Plus button next to selected */ html[data-theme="dark"] #inventoryProductDropdown .inventory-square-btn, html[data-theme="dark"] .inventory-square-btn { background-color: var(--clr-primary) !important; border-color: var(--clr-primary) !important; } html[data-theme="dark"] #inventoryProductDropdown .inventory-square-btn img { filter: brightness(0) invert(1) !important; } /* Dropdown search input */ html[data-theme="dark"] #inventorySearchContainer.dropdown-search { background-color: var(--dm-dropdown-bg) !important; border-color: var(--dm-border) !important; } html[data-theme="dark"] #inventoryProductSearch { background-color: var(--dm-input-bg) !important; border: 1px solid var(--dm-input-border) !important; color: var(--dm-text-primary) !important; } html[data-theme="dark"] #inventoryProductSearch::placeholder { color: var(--dm-text-muted) !important; } html[data-theme="dark"] #inventoryProductSearch:focus { background-color: var(--dm-input-bg) !important; border-color: var(--clr-primary) !important; box-shadow: none !important; } /* Options list */ html[data-theme="dark"] #inventoryDropdownList.product-dropdown-options { background-color: var(--dm-dropdown-bg) !important; border-color: var(--dm-border) !important; box-shadow: var(--dm-shadow) !important; scrollbar-color: var(--dm-scrollbar-thumb) var(--dm-scrollbar-track) !important; } html[data-theme="dark"] #inventoryDropdownList::-webkit-scrollbar-track { background: var(--dm-scrollbar-track) !important; } html[data-theme="dark"] #inventoryDropdownList::-webkit-scrollbar-thumb { background: var(--dm-scrollbar-thumb) !important; } html[data-theme="dark"] #inventoryDropdownList .product-option-item { background-color: transparent !important; border-color: var(--dm-border) !important; } html[data-theme="dark"] #inventoryDropdownList .product-option-item:hover { background-color: var(--dm-dropdown-hover) !important; } html[data-theme="dark"] #inventoryDropdownList .product-title { color: var(--dm-text-primary) !important; } html[data-theme="dark"] #inventoryDropdownList .product-des, html[data-theme="dark"] #inventoryDropdownList .product-text p { color: var(--dm-text-secondary) !important; } html[data-theme="dark"] #inventoryDropdownList .product-price { color: var(--dm-text-primary) !important; } html[data-theme="dark"] #inventoryDropdownList .product-in-stock { color: var(--dm-text-muted) !important; } html[data-theme="dark"] #inventoryDropdownList .product-left img { border-color: var(--dm-border) !important; background-color: var(--dm-bg-elevated) !important; } html[data-theme="dark"] #inventoryDropdownList .multi-items { border-color: var(--dm-border) !important; } html[data-theme="dark"] #inventoryDropdownList .multi-items:hover { background-color: var(--dm-dropdown-hover) !important; } /* ========================================================================== 26. SALES INVENTORY - PRODUCT TABLE (sales/inventory + sales/cart-list) ========================================================================== */ html[data-theme="dark"] .table-responsive { background-color: var(--dm-surface) !important; } html[data-theme="dark"] .table th.table-background, html[data-theme="dark"] .table thead th.table-background, html[data-theme="dark"] th.table-background { background-color: var(--dm-table-header-bg) !important; color: var(--dm-text-primary) !important; border-color: var(--dm-table-border) !important; } html[data-theme="dark"] #sale_cart_list tr td, html[data-theme="dark"] .table tbody td { background-color: var(--dm-surface) !important; color: var(--dm-text-secondary) !important; border-color: var(--dm-table-border) !important; } html[data-theme="dark"] #sale_cart_list tr:hover td, html[data-theme="dark"] .table tbody tr:hover td { background-color: var(--dm-table-row-hover) !important; } html[data-theme="dark"] #sale_cart_list .table-img, html[data-theme="dark"] .table .table-img { border: 1px solid var(--dm-border) !important; background-color: var(--dm-bg-elevated) !important; } /* Inputs inside inventory table */ html[data-theme="dark"] #sale_cart_list .sales-input, html[data-theme="dark"] #sale_cart_list .cart-qty, html[data-theme="dark"] #sale_cart_list .cart-price, html[data-theme="dark"] #sale_cart_list .cart-discount, html[data-theme="dark"] #sale_cart_list .dynamic-width, html[data-theme="dark"] .table .sales-input, html[data-theme="dark"] .table .cart-qty { background-color: var(--dm-input-bg) !important; border: 1px solid var(--dm-input-border) !important; color: var(--dm-text-primary) !important; } html[data-theme="dark"] #sale_cart_list .sales-input::placeholder, html[data-theme="dark"] #sale_cart_list .cart-qty::placeholder { color: var(--dm-text-muted) !important; } html[data-theme="dark"] #sale_cart_list .sales-input:focus, html[data-theme="dark"] #sale_cart_list .cart-qty:focus, html[data-theme="dark"] #sale_cart_list .cart-price:focus, html[data-theme="dark"] #sale_cart_list .cart-discount:focus { background-color: var(--dm-input-bg) !important; border-color: var(--clr-primary) !important; box-shadow: none !important; } html[data-theme="dark"] #sale_cart_list .sales-input:disabled, html[data-theme="dark"] #sale_cart_list .cart-qty:disabled { background-color: var(--dm-bg-elevated) !important; color: var(--dm-text-muted) !important; opacity: 0.7; } /* Qty incre-decre buttons */ html[data-theme="dark"] #sale_cart_list .incre-decre, html[data-theme="dark"] .table .incre-decre { background-color: var(--dm-input-bg) !important; border: 1px solid var(--dm-border) !important; color: var(--dm-text-primary) !important; } html[data-theme="dark"] #sale_cart_list .incre-decre i, html[data-theme="dark"] .table .incre-decre i { color: var(--dm-text-primary) !important; } html[data-theme="dark"] #sale_cart_list .incre-decre:hover, html[data-theme="dark"] .table .incre-decre:hover { background-color: var(--dm-surface-hover) !important; border-color: var(--clr-primary) !important; color: var(--clr-primary) !important; } html[data-theme="dark"] #sale_cart_list .incre-decre:hover i { color: var(--clr-primary) !important; } html[data-theme="dark"] #sale_cart_list .incre-decre:disabled { opacity: 0.5; } /* Serial & Remove buttons */ html[data-theme="dark"] #sale_cart_list .serial-cell-button { background-color: rgba(197, 33, 39, 0.15) !important; border: 1px solid transparent !important; } html[data-theme="dark"] #sale_cart_list .serial-cell-button:hover { background-color: rgba(197, 33, 39, 0.25) !important; } html[data-theme="dark"] #sale_cart_list .x-btn, html[data-theme="dark"] .table .x-btn { background-color: var(--dm-surface) !important; border: 1px solid transparent !important; } html[data-theme="dark"] #sale_cart_list .x-btn:hover, html[data-theme="dark"] .table .x-btn:hover { background-color: var(--dm-surface-hover) !important; border-color: var(--dm-border) !important; } html[data-theme="dark"] #sale_cart_list .x-btn img, html[data-theme="dark"] .table .x-btn img { filter: invert(1) grayscale(100%) brightness(1.8) !important; opacity: 0.85; } html[data-theme="dark"] #sale_cart_list .cart-subtotal, html[data-theme="dark"] .table .cart-subtotal { color: var(--dm-text-primary) !important; font-weight: 600 !important; } html[data-theme="dark"] .table-bordered { border-color: var(--dm-table-border) !important; } /* ========================================================================== 27. CHECKOUT MODAL - Reference / auth code, UPI, Transfer, Cheque inputs (sales/demo.blade.php #checkoutModal) ========================================================================== */ html[data-theme="dark"] .pay-ref-field label { color: var(--dm-text-primary) !important; } html[data-theme="dark"] .pay-ref-field input { background: var(--dm-input-bg) !important; background-color: var(--dm-input-bg) !important; border-color: var(--dm-input-border) !important; color: var(--dm-text-primary) !important; } html[data-theme="dark"] .pay-ref-field input::placeholder { color: var(--dm-text-muted) !important; } html[data-theme="dark"] .pay-ref-field input:focus { background: var(--dm-input-bg) !important; border-color: var(--clr-primary) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--clr-primary) 22%, transparent) !important; } /* Ensure checkout pay panels also dark */ html[data-theme="dark"] .pay-panel { background: transparent !important; } html[data-theme="dark"] #checkoutModal .modal-box { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; } /* ========================================================================== 28. PAGE BTN PRIMARY - Dark Mode Fix ========================================================================== */ html[data-theme="dark"] .page-btn.primary { background: var(--pos-primary, var(--sl-primary, var(--clr-primary))) !important; background-color: var(--pos-primary, var(--sl-primary, var(--clr-primary))) !important; color: #fff !important; border: none !important; box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.5) !important; } html[data-theme="dark"] .page-btn.primary:hover { opacity: 0.92 !important; background: var(--pos-primary, var(--sl-primary, var(--clr-primary))) !important; color: #fff !important; } html[data-theme="dark"] .page-btn.primary svg { color: #fff !important; } html[data-theme="dark"] .page-btn.primary:active { opacity: 0.85 !important; } /* Sales list specific - ensure sl primary variable dark still vibrant */ html[data-theme="dark"] .page-btn.primary { --sl-primary: var(--clr-primary); } /* POS sale - ensure secondary still visible in dark, primary already handled via vars */ html[data-theme="dark"] .page-btn.secondary { background: var(--pos-surface) !important; border-color: var(--pos-line) !important; color: var(--pos-ink) !important; } html[data-theme="dark"] .page-btn.secondary:hover { border-color: var(--pos-primary) !important; color: var(--pos-primary) !important; } /* ========================================================================== 29. THEME BTN / SUBMIT BTN / CREATE-ALL-DELETE - Dark Mode Hover White ========================================================================== */ html[data-theme="dark"] .theme-btn:hover, html[data-theme="dark"] .submit-btn:hover, html[data-theme="dark"] .create-all-delete:hover, html[data-theme="dark"] .btn.theme-btn:hover, html[data-theme="dark"] .btn.submit-btn:hover, html[data-theme="dark"] .btn.create-all-delete:hover { color: #fff !important; } html[data-theme="dark"] .theme-btn:hover *, html[data-theme="dark"] .submit-btn:hover *, html[data-theme="dark"] .create-all-delete:hover * { color: #fff !important; }