/* Centralized Light/Dark Theme using CSS variables. Applies to the whole app via [data-theme] on . Keep this file last to override vendor styles (Bootstrap, plugins, etc.). */ /* Base tokens - Light theme (default) */ :root { color-scheme: light; --color-bg: #f7f7f5; --color-surface: #f7f7f5; --color-elevated: #ffffff; --color-border: #deded6; --color-text: #1f2937; --color-text-muted: #6b7280; --color-link: #0d6efd; --color-link-hover: #0a58ca; --input-bg: #ffffff; --input-border: #d6dde6; --input-text: #111827; --input-placeholder: #7b8596; --navbar-bg: #f9fafb; --sidebar-bg: #f9fafb; --sidebar-text: #1f2937; --dropdown-bg: #ffffff; --modal-bg: #ffffff; --table-striped-bg: #f3f6fb; --card-shadow: rgba(0, 0, 0, 0.35) 0px 2px 10px; } /* Global Card Shadows - applies to both light and dark themes */ .card, .modal-content, .dropdown-menu, .section .section-header { box-shadow: var(--card-shadow) !important; } /* Force static brand palette in LIGHT mode (override settings-injected vars) */ [data-theme="light"] body { --primary-color: #2563EB !important; --secondary-color: #1F2937 !important; /* App background tokens (your system already uses these) */ --color-bg: #f7f7f5 !important; --color-surface: #f7f7f5 !important; --navbar-bg: #f9fafb !important; --sidebar-bg: #f9fafb !important; } /* Dark theme - Midnight Palette */ [data-theme="dark"], [data-theme="dark"] body { color-scheme: dark; --primary-color: #3b82f6 !important; --secondary-color: #1e293b !important; /* --- Functional Colors (Success/Danger) --- */ --color-success: #10b981; /* Emerald Green for "Add" */ --color-danger: #ef4444; /* Coral Red for "Withdraw" */ --color-warning: #f59e0b; /* Amber for Low Stock */ /* --- Elevation Layers (Depth) --- */ --color-bg: #1d2228; /* Level 0: Pure background */ --color-surface: #1d232a; /* Level 1: Sidebar, Navbar, Section wraps */ --color-elevated: #222a33; /* Level 2: Cards, Product tiles */ --modal-bg: #27313c; /* Level 3: Modals and Popups (Lightest) */ --dropdown-bg: #27313c; /* Level 3: Dropdowns */ /* --- Borders & Shadows --- */ --color-border: rgba(255, 255, 255, 0.14); --shadow-color: rgba(0, 0, 0, 0.6); /* --card-shadow: rgba(60, 60, 60, 0.5) 0px 2px 4px 0px, rgba(0, 0, 0, 0.8) 0px 4px 20px 0px; */ /* --card-shadow: rgba(190, 190, 190, 0.3) 0px 0px 2px; */ --card-shadow: rgba(0, 0, 0, 0.35) 0px 2px 10px; --input-border: #9a9a9a; /* Slate border for inputs */ /* --- Text Palette --- */ --color-text: #f1f5f9; /* High contrast off-white */ --color-text-muted: #a6b0bd; /* Muted slate for labels */ --color-link: #60a5fa; --color-link-hover: #93c5fd; /* --- Form Inputs --- */ --input-bg: #0f131c; /* Darker than card for "sunken" look */ --input-text: #f1f5f9; --input-placeholder: #64748b; --input-border: #7e848a; /* --- Component Specific --- */ --navbar-bg: var(--color-surface); --sidebar-bg: var(--color-surface); --table-striped-bg: rgba(255, 255, 255, 0.06); } /* Light theme navbar: force static background */ [data-theme="light"] .main-navbar, [data-theme="light"] .navbar, [data-theme="light"] .navbar-bg { background: #f9fafb !important; } /* Prevent vendor rule from making it primary color */ [data-theme="light"] .navbar.active { background-color: #f9fafb !important; } /* Global elements */ [data-theme="dark"] html, [data-theme="dark"] body { background: var(--color-bg) !important; color: var(--color-text) !important; } [data-theme="dark"] a { color: var(--color-link); } [data-theme="dark"] a:hover { color: var(--color-link-hover); } /* Layout containers */ [data-theme="dark"] .main-navbar, [data-theme="dark"] .navbar, [data-theme="dark"] .navbar-bg { background: var(--navbar-bg) !important; color: var(--color-text) !important; } [data-theme="dark"] .main-navbar .nav-link, [data-theme="dark"] .navbar .nav-link { color: var(--color-text) !important; } [data-theme="dark"] .main-sidebar, [data-theme="dark"] .sidebar-style-2, [data-theme="dark"] #sidebar-wrapper { background: var(--sidebar-bg) !important; color: var(--color-text) !important; } [data-theme="dark"] .main-content { background: var(--color-bg) !important; } [data-theme="dark"] .section, [data-theme="dark"] .section-body { background: var(--color-bg) !important; } /* Cards, sections */ [data-theme="dark"] .card, [data-theme="dark"] .card-body, [data-theme="dark"] .card-header, [data-theme="dark"] .modal-content, [data-theme="dark"] .dropdown-menu { background-color: var(--color-elevated) !important; color: var(--color-text) !important; } [data-theme="dark"] .card, [data-theme="dark"] .modal-content, [data-theme="dark"] .dropdown-menu, [data-theme="dark"] .form-control, [data-theme="dark"] .input-group-text, [data-theme="dark"] .table, [data-theme="dark"] .alert, [data-theme="dark"] .toast, [data-theme="dark"] .swal2-popup, [data-theme="dark"] .select2-container--default .select2-selection--single, [data-theme="dark"] .select2-container--default .select2-selection--multiple, [data-theme="dark"] .note-editor .note-toolbar, [data-theme="dark"] .note-editor .note-editing-area .note-editable, [data-theme="dark"] .flatpickr-calendar, [data-theme="dark"] .daterangepicker { border-color: var(--color-border) !important; } /* Section header and card header */ [data-theme="dark"] .section .section-header, [data-theme="dark"] .card .card-header { background-color: var(--color-elevated) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } [data-theme="dark"] .section .section-header h1, [data-theme="dark"] .card .card-header h4 { color: var(--color-text) !important; } /* Soften card edges and reduce harsh lines in dark mode */ [data-theme="dark"] .card, [data-theme="dark"] .modal-content, [data-theme="dark"] .dropdown-menu, [data-theme="dark"] .section .section-header { border: 0px solid rgba(255, 255, 255, 0.06) !important; border-radius: .5rem !important; /* 8px */ box-shadow: var(--card-shadow) !important; } /* Softer inner separators */ [data-theme="dark"] .table td, [data-theme="dark"] .table th, [data-theme="dark"] .input-group-text, [data-theme="dark"] .form-control, [data-theme="dark"] .list-group-item { border-color: rgba(255, 255, 255, 0.07) !important; border-radius: .375rem; } /* Tables */ [data-theme="dark"] table, [data-theme="dark"] .table { color: var(--color-text) !important; } [data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: var(--table-striped-bg) !important; } [data-theme="dark"] .table thead th { color: var(--color-text); border-bottom-color: var(--color-border); } [data-theme="dark"] .table thead th, [data-theme="dark"] .table thead td { background-color: var(--color-surface) !important; } [data-theme="dark"] .table td, [data-theme="dark"] .table th { border-color: var(--color-border) !important; color: var(--color-text) !important; } [data-theme="dark"] .table td a, [data-theme="dark"] .table th a { color: var(--color-text) !important; } /* Dashboard statistic cards */ [data-theme="dark"] .card .card-stats .card-stats-title { background-color: var(--color-elevated) !important; color: var(--color-text) !important; border-bottom: 1px solid var(--color-border) !important; } [data-theme="dark"] .card .card-stats { margin-bottom: 0 !important; } [data-theme="dark"] .card .card-stats .card-stats-title { border-bottom-color: rgba(255, 255, 255, 0.07) !important; } [data-theme="dark"] .card.card-statistic-2 { border-color: rgba(255, 255, 255, 0.06) !important; } [data-theme="dark"] .card.card-statistic-2 .card-header { border-color: transparent !important; } [data-theme="dark"] .card.card-statistic-2 .card-body { color: var(--color-text) !important; } [data-theme="dark"] .card.card-statistic-2 .card-icon { box-shadow: 0 2px 7px rgba(0, 0, 0, 0.35) !important; } [data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); opacity: 0.8; } [data-theme="dark"] .btn-close:hover { filter: invert(27%) sepia(91%) saturate(6452%) hue-rotate(354deg) brightness(91%) contrast(114%); opacity: 1; } /* RTL fixes for dashboard receivables/payables icons */ [dir="rtl"] .card.card-statistic-2 .card-icon { float: right; margin-right: 0; margin-left: 15px; } [dir="rtl"] .card.card-statistic-2 .card-wrap { text-align: right; } [data-theme="dark"] .card.card-statistic-1 .card-header h4, [data-theme="dark"] .card.card-statistic-2 .card-header h4 { color: var(--color-text-muted) !important; } [data-theme="dark"] .card.card-statistic-1 .card-body, [data-theme="dark"] .card.card-statistic-2 .card-body { color: var(--color-text) !important; } /* POS products grid */ [data-theme="dark"] #products_div .product-item { background: var(--color-elevated) !important; border-color: var(--color-border) !important; } [data-theme="dark"] #products_div .product-details, [data-theme="dark"] #products_div .product-name { color: var(--color-text) !important; } [data-theme="dark"] #products_div .product-price, [data-theme="dark"] #products_div .product-price strong { color: var(--color-text) !important; } [data-theme="dark"] #products_div label { color: var(--color-text-muted) !important; } [data-theme="dark"] #products_div .btn.btn-light { background: var(--color-surface) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } [data-theme="dark"] #products_div .form-control { background: var(--input-bg) !important; color: var(--input-text) !important; border-color: var(--input-border) !important; } /* POS products grid - force light colors when theme is light */ [data-theme="light"] #products_div .product-item { background: #fff !important; border-color: #dee2e6 !important; } [data-theme="light"] #products_div .product-details, [data-theme="light"] #products_div .product-name { color: #212529 !important; } [data-theme="light"] #products_div .product-price, [data-theme="light"] #products_div .product-price strong { color: #212529 !important; } [data-theme="light"] #products_div label { color: #495057 !important; } [data-theme="light"] #products_div .btn.btn-light { background: #f8f9fa !important; color: #212529 !important; border-color: #dee2e6 !important; } [data-theme="light"] #products_div .form-control { background: #fff !important; color: #212529 !important; border-color: #ced4da !important; } /* POS cart empty message and area */ [data-theme="dark"] .cart-items { color: var(--color-text) !important; background: var(--dropdown-bg) !important; border: 1px solid var(--color-border) !important; border-radius: .375rem; } [data-theme="dark"] .cart-items .h5, [data-theme="dark"] .cart-items .h6 { color: var(--color-text) !important; } [data-theme="dark"] .cart-items .text-primary { color: var(--color-text-muted) !important; } /* Cart header row and separators */ [data-theme] .cart-row { border-bottom: 1px solid var(--color-border) !important; } [data-theme="dark"] .cart-row { border-bottom-color: rgba(255, 255, 255, 0.08) !important; } /* Forms */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select, [data-theme="dark"] .custom-select, [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="number"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="search"], [data-theme="dark"] input[type="password"], [data-theme="dark"] textarea, [data-theme="dark"] select { background-color: var(--input-bg) !important; color: var(--input-text) !important; border-color: var(--input-border) !important; } /* Light dropdown arrow for .form-select in dark mode */ [data-theme="dark"] .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ccc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important; background-repeat: no-repeat !important; background-position: right .75rem center !important; background-size: 16px 12px !important; } [dir="rtl"][data-theme="dark"] .form-select, [data-theme="dark"] [dir="rtl"] .form-select { background-position: left .75rem center !important; } [data-theme="dark"] .search-element .form-control[type="search"], [data-theme="dark"] input#search_product[type="search"] { background-color: var(--input-bg) !important; color: var(--input-text) !important; border-color: var(--input-border) !important; } [data-theme="dark"] .form-control::placeholder { color: var(--input-placeholder) !important; opacity: 1; } [data-theme="dark"] .input-group-text { background-color: var(--color-surface) !important; color: var(--color-text) !important; } /* Ensure all placeholders are readable in dark mode */ [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--input-placeholder) !important; opacity: 1 !important; } [data-theme="dark"] input::-webkit-input-placeholder, [data-theme="dark"] textarea::-webkit-input-placeholder { color: var(--input-placeholder) !important; opacity: 1 !important; } [data-theme="dark"] input::-moz-placeholder, [data-theme="dark"] textarea::-moz-placeholder { color: var(--input-placeholder) !important; opacity: 1 !important; } [data-theme="dark"] input:-ms-input-placeholder, [data-theme="dark"] textarea:-ms-input-placeholder { color: var(--input-placeholder) !important; opacity: 1 !important; } [data-theme="dark"] input::-ms-input-placeholder, [data-theme="dark"] textarea::-ms-input-placeholder { color: var(--input-placeholder) !important; opacity: 1 !important; } /* Select2 placeholder text */ [data-theme="dark"] .select2-container--default .select2-selection__placeholder { color: var(--input-placeholder) !important; } [data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field::placeholder { color: var(--input-placeholder) !important; } /* Buttons - keep brand colors, fix light buttons */ [data-theme="dark"] .btn-light, [data-theme="dark"] .btn-outline-light { background-color: var(--color-surface) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } /* Dropdowns */ [data-theme="dark"] .dropdown-menu { background-color: var(--dropdown-bg) !important; } [data-theme="dark"] .dropdown-item { color: var(--color-text) !important; } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background-color: var(--color-surface) !important; } /* Modals */ [data-theme="dark"] .modal-content { background-color: var(--modal-bg) !important; } [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { border-color: var(--color-border) !important; } [data-theme="dark"] .modal .modal-body { background: var(--color-elevated) !important; } [data-theme="dark"] .modal-header.bg-gradient-primary { background: linear-gradient(90deg, #0d6efd, #0a58ca) !important; color: #fff !important; } [data-theme="dark"] .modal-header .close { color: #fff !important; opacity: .9; } [data-theme="dark"] .modal-body .card.bg-light { background-color: var(--color-elevated) !important; } [data-theme="dark"] .input-group-text { background-color: var(--color-surface) !important; border-color: var(--color-border) !important; } [data-theme="dark"] .form-control.border-left-0 { border-left-color: var(--color-border) !important; } [data-theme="dark"] .card.border-0.bg-gradient-light { background: var(--color-elevated) !important; } [data-theme="dark"] .card-header.bg-primary { background-color: #0d6efd !important; color: #fff !important; } [data-theme="dark"] .summary-item span.font-weight-bold.text-dark { color: var(--color-text) !important; } [data-theme="dark"] #return_item_name { color: var(--color-text-muted) !important; } [data-theme="dark"] .summary-item { background: var(--color-surface) !important; box-shadow: 0 2px 7px rgba(0, 0, 0, 0.35) !important; } [data-theme="dark"] .summary-item h3, [data-theme="dark"] .summary-item h4, [data-theme="dark"] .summary-item span { color: var(--color-text) !important; } /* Footer and layout */ [data-theme="dark"] .main-footer { background: var(--navbar-bg) !important; color: var(--color-text) !important; border-top: 1px solid var(--color-border) !important; } /* Alerts, Toasts */ .alert { color: var(--color-text); } .toast { background-color: var(--color-elevated) !important; color: var(--color-text) !important; } /* Badges, List groups */ [data-theme="dark"] .list-group-item { background-color: var(--color-elevated) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } [data-theme="dark"] .badge.bg-light, [data-theme="dark"] .badge-light { background-color: var(--color-surface) !important; color: var(--color-text) !important; } /* Bootstrap utility overrides in dark */ [data-theme="dark"] .bg-light { background-color: var(--color-surface) !important; } [data-theme="dark"] .bg-white { background-color: var(--color-elevated) !important; } [data-theme="dark"] .bg-body { background-color: var(--color-bg) !important; } [data-theme="dark"] .text-dark, [data-theme="dark"] .text-black, [data-theme="dark"] .text-body { color: var(--color-text) !important; } [data-theme="dark"] .text-secondary { color: var(--color-text-muted) !important; } [data-theme="dark"] .border, [data-theme="dark"] .border-top, [data-theme="dark"] .border-bottom, [data-theme="dark"] .border-left, [data-theme="dark"] .border-right { border-color: var(--color-border) !important; } [data-theme="dark"] .text-muted { color: var(--color-text-muted) !important; } /* Override page-specific light gradients so they adapt to dark mode */ [data-theme="dark"] .bg-gradient { background: linear-gradient(135deg, var(--color-elevated) 0%, var(--color-surface) 100%) !important; } /* Force default text color for headers within dark sections */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6, [data-theme="dark"] p, [data-theme="dark"] span, [data-theme="dark"] label, [data-theme="dark"] small, [data-theme="dark"] li, [data-theme="dark"] dt, [data-theme="dark"] dd { color: var(--color-text) !important; } /* Override common black/dark text enforcers (classes and inline) in dark mode */ [data-theme="dark"] .text-dark-all *, [data-theme="dark"] .text-dark-all *:before, [data-theme="dark"] .text-dark-all *:after, [data-theme="dark"] .text-dark, [data-theme="dark"] .text-black { color: var(--color-text) !important; } [data-theme="dark"] [style*="color:#000"], [data-theme="dark"] [style*="color: #000"], [data-theme="dark"] [style*="color:black"], [data-theme="dark"] [style*="color: black"], [data-theme="dark"] [style*="color:#111"], [data-theme="dark"] [style*="color: #111"], [data-theme="dark"] [style*="color:#222"], [data-theme="dark"] [style*="color: #222"], [data-theme="dark"] [style*="color:#333"], [data-theme="dark"] [style*="color: #333"], [data-theme="dark"] [style*="color:#34395e"], [data-theme="dark"] [style*="color: #34395e"], [data-theme="dark"] [style*="color: rgb(0, 0, 0)"] { color: var(--color-text) !important; } [data-theme="dark"] .text-muted { color: var(--color-text-muted) !important; } /* SweetAlert2 */ [data-theme="dark"] .swal2-popup { background: var(--color-elevated) !important; color: var(--color-text) !important; } [data-theme="dark"] .swal2-title, [data-theme="dark"] .swal2-content { color: var(--color-text) !important; } [data-theme="dark"] .swal2-actions .swal2-styled.swal2-confirm { color: #fff !important; } /* iziToast */ /* Neutral toasts (non-status) adopt dark surface */ [data-theme="dark"] .iziToast:not(.iziToast-success):not(.iziToast-error):not(.iziToast-warning):not(.iziToast-info), [data-theme="dark"] .iziToast:not(.iziToast-success):not(.iziToast-error):not(.iziToast-warning):not(.iziToast-info):before { background: var(--color-elevated) !important; color: var(--color-text) !important; } [data-theme="dark"] .iziToast:not(.iziToast-success):not(.iziToast-error):not(.iziToast-warning):not(.iziToast-info) .iziToast-title, [data-theme="dark"] .iziToast:not(.iziToast-success):not(.iziToast-error):not(.iziToast-warning):not(.iziToast-info) .iziToast-message { color: var(--color-text) !important; } [data-theme="dark"] .iziToast-progressbar>div { background: var(--color-link) !important; } /* Preserve vivid status colors and readable text */ [data-theme="dark"] .iziToast.iziToast-success .iziToast-title, [data-theme="dark"] .iziToast.iziToast-success .iziToast-message, [data-theme="dark"] .iziToast.iziToast-error .iziToast-title, [data-theme="dark"] .iziToast.iziToast-error .iziToast-message, [data-theme="dark"] .iziToast.iziToast-warning .iziToast-title, [data-theme="dark"] .iziToast.iziToast-warning .iziToast-message, [data-theme="dark"] .iziToast.iziToast-info .iziToast-title, [data-theme="dark"] .iziToast.iziToast-info .iziToast-message { color: #fff !important; } /* Progress bar on status toasts stays visible */ [data-theme="dark"] .iziToast.iziToast-success .iziToast-progressbar>div, [data-theme="dark"] .iziToast.iziToast-error .iziToast-progressbar>div, [data-theme="dark"] .iziToast.iziToast-warning .iziToast-progressbar>div, [data-theme="dark"] .iziToast.iziToast-info .iziToast-progressbar>div { background: rgba(255, 255, 255, 0.8) !important; } /* Explicit status backgrounds in dark (in case vendor styles were overridden elsewhere) */ [data-theme="dark"] .iziToast.iziToast-success, [data-theme="dark"] .iziToast.iziToast-success:before { background-color: #28a745 !important; color: #fff !important; } [data-theme="dark"] .iziToast.iziToast-error, [data-theme="dark"] .iziToast.iziToast-error:before { background-color: #dc3545 !important; color: #fff !important; } [data-theme="dark"] .iziToast.iziToast-info, [data-theme="dark"] .iziToast.iziToast-info:before { background-color: #17a2b8 !important; color: #fff !important; } /* Use a slightly darker amber to maintain contrast with white text */ [data-theme="dark"] .iziToast.iziToast-warning, [data-theme="dark"] .iziToast.iziToast-warning:before { background-color: #cf9f00 !important; } /* Fallback matching if vendor uses different success/error class names */ [data-theme="dark"] .iziToast[class*="success"], [data-theme="dark"] .iziToast[class*="success"]:before { background-color: #28a745 !important; color: #fff !important; } [data-theme="dark"] .iziToast[class*="error"], [data-theme="dark"] .iziToast[class*="error"]:before { background-color: #dc3545 !important; color: #fff !important; } [data-theme="dark"] .iziToast[class*="info"], [data-theme="dark"] .iziToast[class*="info"]:before { background-color: #17a2b8 !important; color: #fff !important; } [data-theme="dark"] .iziToast[class*="warning"], [data-theme="dark"] .iziToast[class*="warning"]:before { background-color: #cf9f00 !important; color: #111 !important; } /* Ensure title/message swap to white when background is colored */ [data-theme="dark"] .iziToast[class*="success"] .iziToast-title, [data-theme="dark"] .iziToast[class*="success"] .iziToast-message, [data-theme="dark"] .iziToast[class*="error"] .iziToast-title, [data-theme="dark"] .iziToast[class*="error"] .iziToast-message, [data-theme="dark"] .iziToast[class*="info"] .iziToast-title, [data-theme="dark"] .iziToast[class*="info"] .iziToast-message, [data-theme="dark"] .iziToast[class*="warning"] .iziToast-title, [data-theme="dark"] .iziToast[class*="warning"] .iziToast-message { color: inherit !important; } /* Variant-colored action buttons */ [data-theme="dark"] .iziToast.iziToast-success .iziToast-buttons>button, [data-theme="dark"] .iziToast.iziToast-success .iziToast-buttons>a { background-color: #2ea85f !important; color: #fff !important; border-color: rgba(255, 255, 255, 0.2) !important; } [data-theme="dark"] .iziToast.iziToast-success .iziToast-buttons>button:hover, [data-theme="dark"] .iziToast.iziToast-success .iziToast-buttons>a:hover { background-color: #35b56a !important; } [data-theme="dark"] .iziToast.iziToast-error .iziToast-buttons>button, [data-theme="dark"] .iziToast.iziToast-error .iziToast-buttons>a { background-color: #c82333 !important; color: #fff !important; border-color: rgba(255, 255, 255, 0.2) !important; } [data-theme="dark"] .iziToast.iziToast-error .iziToast-buttons>button:hover, [data-theme="dark"] .iziToast.iziToast-error .iziToast-buttons>a:hover { background-color: #d6303c !important; } [data-theme="dark"] .iziToast.iziToast-info .iziToast-buttons>button, [data-theme="dark"] .iziToast.iziToast-info .iziToast-buttons>a { background-color: #138496 !important; color: #fff !important; border-color: rgba(255, 255, 255, 0.2) !important; } [data-theme="dark"] .iziToast.iziToast-info .iziToast-buttons>button:hover, [data-theme="dark"] .iziToast.iziToast-info .iziToast-buttons>a:hover { background-color: #0f6f7e !important; } [data-theme="dark"] .iziToast.iziToast-warning .iziToast-buttons>button, [data-theme="dark"] .iziToast.iziToast-warning .iziToast-buttons>a { background-color: #bd8f00 !important; color: #111 !important; border-color: rgba(0, 0, 0, 0.25) !important; } [data-theme="dark"] .iziToast.iziToast-warning .iziToast-buttons>button:hover, [data-theme="dark"] .iziToast.iziToast-warning .iziToast-buttons>a:hover { background-color: #d09f00 !important; } /* In-message buttons/links inside toast bodies (not using iziToast buttons slot) */ [data-theme="dark"] .iziToast .btn-primary { background-color: #0d6efd !important; border-color: #0d6efd !important; color: #fff !important; } [data-theme="dark"] .iziToast .btn-secondary { background-color: #6c757d !important; border-color: #6c757d !important; color: #fff !important; } [data-theme="dark"] .iziToast .btn-info { background-color: #17a2b8 !important; border-color: #17a2b8 !important; color: #fff !important; } [data-theme="dark"] .iziToast .btn-success { background-color: #28a745 !important; border-color: #28a745 !important; color: #fff !important; } [data-theme="dark"] .iziToast .btn-warning { background-color: #ffc107 !important; border-color: #ffc107 !important; color: #111 !important; } [data-theme="dark"] .iziToast .btn-danger { background-color: #dc3545 !important; border-color: #dc3545 !important; color: #fff !important; } [data-theme="dark"] .iziToast .btn-light { background-color: rgba(255, 255, 255, 0.15) !important; border-color: rgba(255, 255, 255, 0.25) !important; color: #fff !important; } [data-theme="dark"] .iziToast .btn-link, [data-theme="dark"] .iziToast a { color: #fff !important; } /* Force text in colored toasts to white for readability */ [data-theme="dark"] .iziToast.iziToast-success *, [data-theme="dark"] .iziToast.iziToast-error *, [data-theme="dark"] .iziToast.iziToast-warning *, [data-theme="dark"] .iziToast.iziToast-info * { color: inherit !important; } [data-theme="dark"] .iziToast.iziToast-success .iziToast-body *, [data-theme="dark"] .iziToast.iziToast-error .iziToast-body *, [data-theme="dark"] .iziToast.iziToast-warning .iziToast-body *, [data-theme="dark"] .iziToast.iziToast-info .iziToast-body * { color: #fff !important; } /* Toast action/close buttons readable in dark */ [data-theme="dark"] .iziToast .iziToast-buttons>button, [data-theme="dark"] .iziToast .iziToast-buttons>a { color: #fff !important; border-color: rgba(255, 255, 255, 0.25) !important; background-color: transparent !important; } [data-theme="dark"] .iziToast .iziToast-buttons>button:hover, [data-theme="dark"] .iziToast .iziToast-buttons>a:hover { background-color: rgba(255, 255, 255, 0.15) !important; } [data-theme="dark"] .iziToast .iziToast-close { color: #fff !important; opacity: 0.9 !important; filter: invert(1) grayscale(100%) brightness(200%); } [data-theme="dark"] .ico-success { filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%); } [data-theme="dark"] .ico-error { filter: invert(16%) sepia(99%) saturate(7404%) hue-rotate(4deg) brightness(95%) contrast(118%); opacity: 0.9; } [data-theme="dark"] .ico-warning { filter: invert(16%) sepia(99%) saturate(7404%) hue-rotate(4deg) brightness(95%) contrast(118%); opacity: 0.9; } [data-theme="dark"] .ico-info { filter: invert(16%) sepia(99%) saturate(7404%) hue-rotate(4deg) brightness(95%) contrast(118%); opacity: 0.9; } /* Date/time pickers dark theme */ /* Daterangepicker */ [data-theme="dark"] .daterangepicker, [data-theme="dark"] .daterangepicker .calendar-table, [data-theme="dark"] .daterangepicker .drp-calendar, [data-theme="dark"] .daterangepicker .ranges { background-color: var(--color-elevated) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } [data-theme="dark"] .daterangepicker .calendar-table th, [data-theme="dark"] .daterangepicker .calendar-table td { color: var(--color-text) !important; border-color: var(--color-border) !important; } [data-theme="dark"] .daterangepicker td.available:hover, [data-theme="dark"] .daterangepicker th.available:hover { background-color: var(--color-surface) !important; } [data-theme="dark"] .daterangepicker td.in-range { background-color: rgba(255, 255, 255, 0.08) !important; } [data-theme="dark"] .daterangepicker td.active, [data-theme="dark"] .daterangepicker td.active:hover { background-color: #0d6efd !important; color: #fff !important; } [data-theme="dark"] .daterangepicker .ranges li { color: var(--color-text) !important; } [data-theme="dark"] .daterangepicker .ranges li:hover { background-color: var(--color-surface) !important; } [data-theme="dark"] .daterangepicker .ranges li.active { background-color: #0d6efd !important; color: #fff !important; } [data-theme="dark"] .daterangepicker .drp-buttons { border-top: 1px solid var(--color-border) !important; } [data-theme="dark"] .daterangepicker select.monthselect, [data-theme="dark"] .daterangepicker select.yearselect, [data-theme="dark"] .daterangepicker .calendar-time select { background-color: var(--color-surface) !important; color: var(--color-text) !important; border-color: var(--input-border) !important; } [data-theme="dark"] .daterangepicker select.monthselect option, [data-theme="dark"] .daterangepicker select.yearselect option, [data-theme="dark"] .daterangepicker .calendar-time select option { background-color: var(--color-elevated) !important; color: var(--color-text) !important; } [data-theme="dark"] .daterangepicker .drp-selected, [data-theme="dark"] .daterangepicker .drp-buttons .btn { color: var(--color-text) !important; } [data-theme="dark"] .daterangepicker .drp-buttons .btn-default, [data-theme="dark"] .daterangepicker .btn-default { background-color: var(--color-surface) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } [data-theme="dark"] .daterangepicker .drp-buttons .btn-primary { background-color: #0d6efd !important; border-color: #0d6efd !important; } [data-theme="dark"] .daterangepicker .input-mini, [data-theme="dark"] .daterangepicker .drp-inputs input[type="text"], [data-theme="dark"] .daterangepicker .drp-inputs .form-control { background-color: var(--input-bg) !important; color: var(--input-text) !important; border-color: var(--input-border) !important; } [data-theme="dark"] .daterangepicker .drp-inputs input { background-color: var(--input-bg) !important; color: var(--input-text) !important; border-color: var(--input-border) !important; } [data-theme="dark"] .daterangepicker .calendar-table .off, [data-theme="dark"] .daterangepicker .calendar-table .disabled { color: var(--color-text-muted) !important; } [data-theme="dark"] .daterangepicker .calendar-table table, [data-theme="dark"] .daterangepicker .calendar-table thead tr, [data-theme="dark"] .daterangepicker .calendar-table tbody tr { background-color: var(--color-elevated) !important; } [data-theme="dark"] .daterangepicker .prev span, [data-theme="dark"] .daterangepicker .next span { border-color: var(--color-text) !important; } /* Flatpickr */ [data-theme="dark"] .flatpickr-calendar, [data-theme="dark"] .flatpickr-months, [data-theme="dark"] .flatpickr-days, [data-theme="dark"] .flatpickr-innerContainer, [data-theme="dark"] .flatpickr-rContainer { background: var(--color-elevated) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } [data-theme="dark"] .flatpickr-day { color: var(--color-text) !important; } [data-theme="dark"] .flatpickr-day:hover { background: var(--color-surface) !important; } [data-theme="dark"] .flatpickr-day.inRange, [data-theme="dark"] .flatpickr-day.inRange:focus, [data-theme="dark"] .flatpickr-day.inRange:hover { background: rgba(255, 255, 255, 0.08) !important; } [data-theme="dark"] .flatpickr-day.selected, [data-theme="dark"] .flatpickr-day.selected:focus, [data-theme="dark"] .flatpickr-day.selected:hover { background: #0d6efd !important; color: #fff !important; border-color: #0d6efd !important; } [data-theme="dark"] .flatpickr-weekday, [data-theme="dark"] .flatpickr-months .flatpickr-month { color: var(--color-text) !important; } [data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months { background: var(--color-surface) !important; color: var(--color-text) !important; } [data-theme="dark"] .flatpickr-time input, [data-theme="dark"] .flatpickr-time .flatpickr-time-separator { color: var(--color-text) !important; } [data-theme="dark"] .flatpickr-time .numInput-wrapper { background: var(--color-surface) !important; } [data-theme="dark"] .flatpickr-calendar.arrowTop:before, [data-theme="dark"] .flatpickr-calendar.arrowTop:after, [data-theme="dark"] .flatpickr-calendar.arrowBottom:before, [data-theme="dark"] .flatpickr-calendar.arrowBottom:after { border-color: var(--color-elevated) !important; } /* Select2 */ [data-theme="dark"] .select2-container--default .select2-selection--single, [data-theme="dark"] .select2-container--default .select2-selection--multiple { background-color: var(--input-bg) !important; color: var(--input-text) !important; } [data-theme="dark"] .select2-dropdown { background-color: var(--dropdown-bg) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } [data-theme="dark"] .select2-results__option--highlighted { background-color: var(--color-surface) !important; } /* Summernote */ [data-theme="dark"] .note-editor.note-frame { background-color: var(--color-elevated) !important; } [data-theme="dark"] .note-editor .note-statusbar, [data-theme="dark"] .note-editor .note-toolbar { background-color: var(--color-surface) !important; } [data-theme="dark"] .note-editor .note-editing-area .note-editable { background-color: var(--input-bg) !important; color: var(--input-text) !important; } /* Selectize */ [data-theme="dark"] .selectize-input { background: var(--input-bg) !important; color: var(--input-text) !important; border-color: var(--input-border) !important; } [data-theme="dark"] .selectize-dropdown, [data-theme="dark"] .selectize-dropdown .option, [data-theme="dark"] .selectize-dropdown .optgroup-header { background: var(--dropdown-bg) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } [data-theme="dark"] .selectize-input.focus { border-color: var(--color-link) !important; } /* Tagify */ [data-theme="dark"] .tagify { background: var(--input-bg) !important; color: var(--input-text) !important; border-color: var(--input-border) !important; } [data-theme="dark"] .tagify__tag { background: var(--color-surface) !important; color: var(--color-text) !important; } [data-theme="dark"] .tagify__dropdown__wrapper { background: var(--dropdown-bg) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } /* Coloris */ [data-theme="dark"] .clr-picker, [data-theme="dark"] .clr-panel { background: var(--color-elevated) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } [data-theme="dark"] .clr-alpha, [data-theme="dark"] .clr-hue, [data-theme="dark"] .clr-field input { background: var(--input-bg) !important; color: var(--input-text) !important; } /* Dropzone */ [data-theme="dark"] .dropzone { background: var(--color-surface) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } [data-theme="dark"] .dz-preview .dz-details { color: var(--color-text) !important; } /* TinyMCE (generic) */ [data-theme="dark"] .tox .tox-tinymce { border-color: var(--color-border) !important; } [data-theme="dark"] .tox .tox-editor-header, [data-theme="dark"] .tox .tox-toolbar, [data-theme="dark"] .tox .tox-toolbar__primary { background: var(--color-surface) !important; } [data-theme="dark"] .tox .tox-edit-area__iframe, [data-theme="dark"] .tox .tox-sidebar-wrap, [data-theme="dark"] .tox .tox-menubar, [data-theme="dark"] .tox .tox-statusbar { background: var(--input-bg) !important; color: var(--input-text) !important; } /* Bootstrap Table */ [data-theme="dark"] .bootstrap-table .fixed-table-container, [data-theme="dark"] .bootstrap-table .table { background: var(--color-elevated) !important; color: var(--color-text) !important; } [data-theme="dark"] .bootstrap-table .table thead th, [data-theme="dark"] .bootstrap-table .table td, [data-theme="dark"] .bootstrap-table .table th { border-color: var(--color-border) !important; } [data-theme="dark"] .bootstrap-table .table-hover tbody tr:hover { background-color: var(--color-surface) !important; } /* Light mode: make hover distinct from striped rows */ [data-theme="light"] .table-hover tbody tr:hover, [data-theme="light"] .bootstrap-table .table-hover tbody tr:hover { background-color: rgba(13, 110, 253, 0.06) !important; } /* Fix dark-mode table hover text turning black */ [data-theme="dark"] .table-hover tbody tr:hover, [data-theme="dark"] .bootstrap-table .table-hover tbody tr:hover { background-color: var(--color-surface) !important; color: var(--color-text) !important; } [data-theme="dark"] .table-hover tbody tr:hover td, [data-theme="dark"] .table-hover tbody tr:hover th { color: var(--color-text) !important; } [data-theme="dark"] .table-hover tbody tr:hover a, [data-theme="dark"] .table-hover tbody tr:hover .text-dark, [data-theme="dark"] .table-hover tbody tr:hover .text-black { color: var(--color-text) !important; } /* Buttons and badges inside dark tables */ [data-theme="dark"] .btn-primary, [data-theme="dark"] .btn-success, [data-theme="dark"] .btn-danger, [data-theme="dark"] .btn-warning, [data-theme="dark"] .btn-info { color: #fff !important; } [data-theme="dark"] .btn-outline-primary:hover, [data-theme="dark"] .btn-outline-success:hover, [data-theme="dark"] .btn-outline-danger:hover, [data-theme="dark"] .btn-outline-warning:hover, [data-theme="dark"] .btn-outline-info:hover { color: #fff !important; } [data-theme="dark"] .badge { color: #fff !important; } /* Sidebar active/hover states for visibility */ [data-theme="dark"] .main-sidebar .sidebar-menu li a { color: var(--color-text) !important; } [data-theme="dark"] .main-sidebar .sidebar-menu li a:hover { background-color: #1a2030 !important; color: var(--color-text) !important; } [data-theme="dark"] .main-sidebar .sidebar-menu li.active>a { background-color: #20273a !important; color: var(--color-text) !important; } [data-theme="dark"] .sidebar-style-2 .sidebar-menu>li.active>a:before { background: var(--color-link) !important; opacity: 1 !important; } [data-theme="dark"] body.sidebar-mini .main-sidebar .sidebar-menu>li.active>a { background-color: #20273a !important; box-shadow: none !important; color: var(--color-text) !important; } [data-theme="dark"] body.sidebar-mini .main-sidebar .sidebar-menu>li ul.dropdown-menu { background-color: #1b2030 !important; border: 1px solid var(--color-border) !important; } [data-theme="dark"] body.sidebar-mini .main-sidebar .sidebar-menu>li ul.dropdown-menu li a { background-color: transparent !important; color: var(--color-text) !important; } [data-theme="dark"] body.sidebar-mini .main-sidebar .sidebar-menu>li ul.dropdown-menu li a:hover { background-color: #242b3e !important; } [data-theme="dark"] body.sidebar-mini .main-sidebar .sidebar-menu>li ul.dropdown-menu li>a:focus { background-color: #242b3e !important; color: var(--color-text) !important; outline: none !important; } [data-theme="dark"] body.sidebar-mini .main-sidebar .sidebar-menu>li ul.dropdown-menu li.active>a { background-color: #242b3e !important; color: var(--color-text) !important; } /* Light theme mini-sidebar dropdown focus/active (avoid bright white) */ [data-theme="light"] body.sidebar-mini .main-sidebar .sidebar-menu>li ul.dropdown-menu li>a:focus { background-color: #eef2f7 !important; color: var(--color-text) !important; outline: none !important; } [data-theme="light"] body.sidebar-mini .main-sidebar .sidebar-menu>li ul.dropdown-menu li.active>a { background-color: #eef2f7 !important; color: var(--color-text) !important; } /* Light theme sidebar adjustments for eye comfort */ [data-theme="light"] .main-sidebar .sidebar-menu li a:hover { background-color: #eef2f7 !important; } [data-theme="light"] .main-sidebar .sidebar-menu li.active>a { background-color: #eef2f7 !important; color: var(--color-text) !important; } /* Normal (not mini) submenu backgrounds */ [data-theme="dark"] .main-sidebar .sidebar-menu li ul.dropdown-menu { background-color: #141a28 !important; } [data-theme="dark"] .main-sidebar .sidebar-menu li ul.dropdown-menu li a { background-color: transparent !important; color: var(--color-text) !important; } [data-theme="dark"] .main-sidebar .sidebar-menu li ul.dropdown-menu li a:hover { background-color: #1f2638 !important; } [data-theme="dark"] .main-sidebar .sidebar-menu li ul.dropdown-menu li.active>a { background-color: #20273a !important; color: var(--color-text) !important; } [data-theme="light"] .main-sidebar .sidebar-menu li ul.dropdown-menu li a:hover { background-color: #eef2f7 !important; } /* Navbar subtle separators */ [data-theme="dark"] .navbar, [data-theme="dark"] .main-navbar { border-bottom: 1px solid var(--color-border) !important; } /* Notifications dropdown responsive clamp */ #notificationsBell .dropdown-menu { max-width: 92vw !important; width: auto !important; } /* Explicit side per direction: LTR -> right, RTL -> left */ [dir="ltr"] #notificationsBell .dropdown-menu { right: 0 !important; left: auto !important; } [dir="rtl"] #notificationsBell .dropdown-menu { left: 0 !important; right: auto !important; } /* Flatpickr */ [data-theme="dark"] .flatpickr-calendar { background: var(--color-elevated) !important; color: var(--color-text) !important; } [data-theme="dark"] .flatpickr-day:hover, [data-theme="dark"] .flatpickr-day:focus { background: var(--color-surface) !important; } [data-theme="dark"] .flatpickr-day.selected { background: var(--color-link) !important; color: #fff !important; } /* Date Range Picker */ [data-theme="dark"] .daterangepicker { background: var(--color-elevated) !important; color: var(--color-text) !important; } [data-theme="dark"] .daterangepicker .calendar-table { background: var(--color-elevated) !important; } [data-theme="dark"] .daterangepicker td, [data-theme="dark"] .daterangepicker th { color: var(--color-text) !important; } [data-theme="dark"] .daterangepicker td.available:hover, [data-theme="dark"] .daterangepicker th.available:hover { background: var(--color-surface) !important; } [data-theme="dark"] .daterangepicker td.in-range { background: var(--color-surface) !important; } [data-theme="dark"] .daterangepicker td.active, [data-theme="dark"] .daterangepicker td.active:hover { background: var(--color-link) !important; color: #fff !important; } /* Code blocks / pre */ [data-theme="dark"] pre, [data-theme="dark"] code, [data-theme="dark"] .preformatted { background-color: var(--color-surface) !important; color: var(--color-text) !important; } /* Scrollbars (webkit) */ [data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: #0a0d13; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2c3446; border-radius: 6px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #394154; } /* Images that were designed for light backgrounds can be dimmed in dark mode if needed */ [data-theme="dark"] img.sidebar_logo { filter: brightness(0.9) contrast(1.05); } /* Ensure inputs don't flash white on focus */ .form-control:focus, .form-select:focus { background-color: var(--input-bg) !important; color: var(--input-text) !important; border-color: var(--color-link) !important; box-shadow: 0 2px 7px rgba(0, 0, 0, 0.35) !important; } /* Bootstrap Table dark mode fixes */ [data-theme="dark"] .bootstrap-table .fixed-table-toolbar, [data-theme="dark"] .bootstrap-table .columns, [data-theme="dark"] .bootstrap-table .keep-open, [data-theme="dark"] .bootstrap-table .dropdown-menu { background-color: var(--color-elevated) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } [data-theme="dark"] .bootstrap-table .fixed-table-toolbar .btn, [data-theme="dark"] .bootstrap-table .columns .btn { background: var(--color-surface) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } [data-theme="dark"] .bootstrap-table .search input.form-control, [data-theme="dark"] .bootstrap-table .fixed-table-toolbar .form-control { background-color: var(--input-bg) !important; color: var(--input-text) !important; border-color: var(--input-border) !important; } [data-theme="dark"] .bootstrap-table .dropdown-item { color: var(--color-text) !important; } [data-theme="dark"] .bootstrap-table .dropdown-item:hover { background: var(--color-surface) !important; } /* Table header background and borders */ [data-theme="dark"] .bootstrap-table table thead th { background-color: var(--color-surface) !important; color: var(--color-text) !important; border-bottom: 1px solid var(--color-border) !important; } /* Rows and borders */ [data-theme="dark"] .bootstrap-table table tbody tr td { background-color: var(--color-elevated) !important; color: var(--color-text) !important; border-color: rgba(255, 255, 255, 0.07) !important; } /* Hover row */ [data-theme="dark"] .bootstrap-table table tbody tr:hover td { background-color: #1f2536 !important; } /* Pagination, toolbar separators */ [data-theme="dark"] .bootstrap-table .pagination-detail, [data-theme="dark"] .bootstrap-table .fixed-table-pagination { background-color: var(--color-elevated) !important; color: var(--color-text) !important; border-top: 1px solid var(--color-border) !important; } /* Fix bootstrap-table page-size select arrow overlap in RTL (light mode) */ [dir="rtl"][data-theme="light"] .bootstrap-table .fixed-table-pagination .bt-page-size-bottom .bt-page-size-select, [data-theme="light"] [dir="rtl"] .bootstrap-table .fixed-table-pagination .bt-page-size-bottom .bt-page-size-select { direction: rtl; padding-left: 2.25rem !important; /* space for arrow on the left */ padding-right: 0.75rem !important; background-position: left 0.75rem center !important; background-repeat: no-repeat !important; } [data-theme="dark"] .bootstrap-table .page-item .page-link { background: var(--color-surface) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } [data-theme="dark"] .bootstrap-table .page-item.active .page-link { background: #0d6efd !important; border-color: #0d6efd !important; color: #fff !important; } /* Header icon buttons: match notification square style (light + dark) */ .navbar .btn#calculatorIcon, .navbar .btn#themeToggleBtn { width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background-color: #f1f5f9 !important; border: 1px solid #e2e8f0 !important; color: #4a5568 !important; transition: all .15s ease; line-height: 1; } .navbar .btn#calculatorIcon:hover, .navbar .btn#themeToggleBtn:hover { background-color: #e2e8f0 !important; transform: translateY(-1px); box-shadow: 0 2px 7px rgba(0, 0, 0, 0.35) !important; } [data-theme="dark"] .navbar .btn#calculatorIcon, [data-theme="dark"] .navbar .btn#themeToggleBtn { background-color: rgba(255, 255, 255, 0.15) !important; border-color: rgba(255, 255, 255, 0.2) !important; color: #fff !important; } [data-theme="dark"] .navbar .btn#calculatorIcon:hover, [data-theme="dark"] .navbar .btn#themeToggleBtn:hover { background-color: rgba(255, 255, 255, 0.25) !important; box-shadow: 0 2px 7px rgba(0, 0, 0, 0.35) !important; } /* Calculator dropdown (header) - dark mode compatibility */ [data-theme="dark"] .dropdown-calculator { background-color: var(--dropdown-bg) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; box-shadow: 0 2px 7px rgba(0, 0, 0, 0.35) !important; } [data-theme="dark"] .dropdown-calculator .form-control { background-color: var(--input-bg) !important; color: var(--input-text) !important; border-color: var(--input-border) !important; } [data-theme="dark"] .dropdown-calculator .form-control::placeholder { color: var(--input-placeholder) !important; } [data-theme="dark"] .dropdown-calculator .btn-light, [data-theme="dark"] .dropdown-calculator .btn-outline-light { background-color: var(--color-surface) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } [data-theme="dark"] .dropdown-calculator .btn-primary { color: #fff !important; } /* Global overrides for primary button to match Bootstrap default blue (formerly inline in orders page) */ .btn-primary { background-color: #0d6efd !important; border-color: #0d6efd !important; } [data-theme="dark"] .btn-primary { background-color: #3d8bfd !important; border-color: #3d8bfd !important; color: #0a0d13; } .btn-primary:hover, .btn-primary:focus { background-color: #0b5ed7 !important; border-color: #0a58ca !important; } .btn-secondary:hover, .btn-secondary:focus { color: #fff; background-color: #4f5766 !important; border-color: #4a5260 !important; } .btn-success:hover, .btn-success:focus { background-color: #3bb557 !important; color: #fff !important; } .btn-dark { background-color: #2b3642; border-color: rgba(255, 255, 255, 0.14); color: #f1f5f9; } .btn-dark:hover, .btn-dark:focus { background-color: #4a505a !important; color: #fff !important; } .btn-warning:hover, .btn-warning:focus { background-color: #ff990d !important; color: #fff !important; } .btn-info:hover, .btn-info:focus { background-color: #3abaf4 !important; color: #fff !important; } [data-theme="dark"] .btn.btn-primary, [data-theme="dark"] .btn.btn-secondary, [data-theme="dark"] .btn.btn-success, [data-theme="dark"] .btn.btn-info, [data-theme="dark"] .btn.btn-warning, [data-theme="dark"] .btn.btn-danger, [data-theme="dark"] .btn.btn-dark { box-shadow: rgba(0, 0, 0, 0.75) 0px 3px 3px 0px; } [data-theme="light"] .btn.btn-primary, [data-theme="light"] .btn.btn-secondary, [data-theme="light"] .btn.btn-success, [data-theme="light"] .btn.btn-info, [data-theme="light"] .btn.btn-warning, [data-theme="light"] .btn.btn-danger, [data-theme="light"] .btn.btn-dark { /* box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px; */ box-shadow: rgba(0, 0, 0, 0.27) 0px 3px 3px 0px; } [data-theme="dark"] .custom-switch-indicator { background-color: #242d3d !important; border-color: rgba(255, 255, 255, 0.1) !important; } [data-theme="dark"] .custom-switch-input:checked ~ .custom-switch-indicator { background: #2563EB !important; /* Force direct color if var fails */ background-color: #2563EB !important; } .btn:hover, .btn:focus { box-shadow: none !important; } .section-header .btn, .section-header .btn i, .section-header .btn-group, .section-header .btn-group .btn { font-size: 0.8rem !important; } /* RTL fix for btn-group border-radius: in RTL, DOM :first-child is visually on the right */ [dir="rtl"] .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) { border-top-left-radius: 0rem !important; border-bottom-left-radius: 0rem !important; border-top-right-radius: 0.3rem !important; border-bottom-right-radius: 0.3rem !important; } [dir="rtl"] .btn-group > .btn:last-child:not(:first-child) { border-top-right-radius: 0rem !important; border-bottom-right-radius: 0rem !important; border-top-left-radius: 0.3rem !important; border-bottom-left-radius: 0.3rem !important; } [dir="rtl"] .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { border-radius: 0 !important; } /* Product Card Borders */ [data-theme="dark"] .po-card { border: 1px solid #e3e6f05b !important; transition: all 0.3s ease !important; } [data-theme="dark"] .po-card:hover { border-color: #3c496d !important; box-shadow: 0 0.15rem 1.75rem 0 rgba(255, 255, 255, 0.15) !important; } .bi-plus-lg { font-size: 1.8rem !important; -webkit-text-stroke: 1.5px ; /* Optional: smoothing for different browsers */ -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } .section { background-color: var(--color-surface) !important; }