/* ==========================================
   LIGHT MODE DESIGN TOKENS & HIGH VISIBILITY STYLES
   ========================================== */
:root.light-theme,
html.light-theme {
  color-scheme: light !important;
  --bg-primary: #f1f5f9;
  --bg-secondary: #ffffff;
  --bg-glass: rgba(255, 255, 255, 0.95);
  --bg-glass-hover: rgba(241, 245, 249, 0.98);
  --border-glass: #cbd5e1;
  --border-glass-glow: rgba(79, 70, 229, 0.25);

  --color-primary: #4f46e5;
  --color-primary-glow: rgba(79, 70, 229, 0.12);
  --color-secondary: #0891b2;
  --color-accent: #9333ea;

  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #475569;
  --text-link: #2563eb;

  --shadow-sm: 0 2px 10px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 8px 30px rgba(15, 23, 42, 0.08);
  --shadow-glow: 0 0 20px rgba(79, 70, 229, 0.2);

  --pos-bg: #f1f5f9;
  --pos-surface: #ffffff;
  --pos-surface-glass: rgba(255, 255, 255, 0.95);
  --pos-sidebar-bg: #ffffff;
  --pos-sidebar-hover: #f1f5f9;
  --pos-text-main: #0f172a;
  --pos-text-muted: #475569;
  --pos-border: #cbd5e1;
  --pos-danger-light: #fee2e2;
  --pos-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
  --pos-input-bg: #ffffff;
}

/* ==========================================
   BRAND LOGO & TYPOGRAPHY LIGHT MODE FIX
   ========================================== */
html.light-theme .erp-brand-name,
html.light-theme .erp-mobile-header-logo .erp-brand-name,
html.light-theme .erp-brand div,
html.light-theme .pos-logo,
html.light-theme .pos-logo span,
html.light-theme .erp-welcome-title {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #0f172a !important;
  color: #0f172a !important;
  font-weight: 800 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ==========================================
   STORE / BRANCH DROPDOWN LIGHT MODE FIX
   ========================================== */
html.light-theme #branch-dropdown-btn,
html.light-theme #sales-branch-dropdown-btn,
html.light-theme .erp-branch-checkbox-dropdown button {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.15) !important;
  color: #0f172a !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

html.light-theme #branch-dropdown-text,
html.light-theme #sales-branch-dropdown-text,
html.light-theme .erp-branch-checkbox-dropdown button span {
  color: #0f172a !important;
  font-weight: 600 !important;
}

html.light-theme #branch-dropdown-menu,
html.light-theme #sales-branch-dropdown-menu,
html.light-theme .erp-branch-checkbox-dropdown div[id*="dropdown-menu"] {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.15) !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.15) !important;
  border-radius: 10px !important;
}

html.light-theme #branch-dropdown-menu label,
html.light-theme #sales-branch-dropdown-menu label,
html.light-theme .erp-branch-checkbox-dropdown label {
  color: #0f172a !important;
  border-bottom-color: rgba(15, 23, 42, 0.08) !important;
}

html.light-theme #branch-dropdown-menu label strong,
html.light-theme #sales-branch-dropdown-menu label strong,
html.light-theme .erp-branch-checkbox-dropdown label strong {
  color: #0f172a !important;
  font-weight: 700 !important;
}

html.light-theme #branch-dropdown-menu label span,
html.light-theme #sales-branch-dropdown-menu label span,
html.light-theme .erp-branch-checkbox-dropdown label span {
  color: #334155 !important;
  font-weight: 500 !important;
}

html.light-theme #branch-dropdown-menu label:hover,
html.light-theme #sales-branch-dropdown-menu label:hover,
html.light-theme .erp-branch-checkbox-dropdown label:hover,
html.light-theme .erp-branch-dropdown-item:hover {
  background: rgba(79, 70, 229, 0.08) !important;
}

/* ==========================================
   COLORFUL DASHBOARD STAT PILLS & CARDS
   ========================================== */
html.light-theme .erp-metric-card {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04) !important;
  border-radius: 14px !important;
  transition: all 0.25s ease-in-out !important;
}

html.light-theme .erp-metric-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(79, 70, 229, 0.3) !important;
  box-shadow: 0 12px 28px rgba(79, 70, 229, 0.12) !important;
}

html.light-theme .erp-metric-label {
  color: #475569 !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}

/* Vibrant Colorful Value Pills */
html.light-theme .pill-green,
html.light-theme #kpi-total-sales {
  background: #d1fae5 !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  color: #047857 !important;
  font-weight: 700 !important;
}

html.light-theme .pill-blue,
html.light-theme #kpi-total-invoice,
html.light-theme #kpi-total-products,
html.light-theme #kpi-stock-qty {
  background: #dbeafe !important;
  border: 1px solid rgba(59, 130, 246, 0.35) !important;
  color: #1d4ed8 !important;
  font-weight: 700 !important;
}

html.light-theme .pill-purple,
html.light-theme #kpi-sold-qty,
html.light-theme #kpi-total-paid,
html.light-theme #kpi-total-expense,
html.light-theme #kpi-stock-value {
  background: #f3e8ff !important;
  border: 1px solid rgba(147, 51, 234, 0.35) !important;
  color: #7e22ce !important;
  font-weight: 700 !important;
}

html.light-theme .pill-orange,
html.light-theme #kpi-customers {
  background: #ffedd5 !important;
  border: 1px solid rgba(249, 115, 22, 0.35) !important;
  color: #c2410c !important;
  font-weight: 700 !important;
}

html.light-theme .pill-red,
html.light-theme #kpi-sales-return,
html.light-theme #kpi-gross-profit,
html.light-theme #kpi-avg-profit-margin,
html.light-theme #kpi-avg-profit-margin-percent,
html.light-theme #kpi-avg-cart-value,
html.light-theme #kpi-avg-bills {
  background: #ffe4e6 !important;
  border: 1px solid rgba(225, 29, 72, 0.35) !important;
  color: #be123c !important;
  font-weight: 700 !important;
}

html.light-theme .pill-indigo {
  background: #e0e7ff !important;
  border: 1px solid rgba(99, 102, 241, 0.35) !important;
  color: #4338ca !important;
  font-weight: 700 !important;
}

html.light-theme .pill-cyan {
  background: #cffafe !important;
  border: 1px solid rgba(6, 182, 212, 0.35) !important;
  color: #0e7490 !important;
  font-weight: 700 !important;
}

/* ==========================================
   SIDEBAR NAVIGATION IN LIGHT MODE
   ========================================== */
html.light-theme .erp-sidebar,
html.light-theme .pos-sidebar,
html[data-theme="light"] .erp-sidebar,
html[data-theme="light"] .pos-sidebar {
  background: #ffffff !important;
  border-right: 1px solid rgba(15, 23, 42, 0.12) !important;
  box-shadow: 2px 0 16px rgba(15, 23, 42, 0.04) !important;
}

html.light-theme .erp-brand-name,
html[data-theme="light"] .erp-brand-name {
  color: #0f172a !important;
  font-weight: 800 !important;
}

html.light-theme .erp-menu-item > a,
html.light-theme .pos-nav a,
html[data-theme="light"] .erp-menu-item > a,
html[data-theme="light"] .pos-nav a {
  color: #334155 !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

html.light-theme .pos-nav a i,
html[data-theme="light"] .pos-nav a i {
  color: #64748b !important;
  transition: transform 0.2s ease, color 0.2s ease !important;
}

html.light-theme .erp-menu-item > a:hover,
html.light-theme .pos-nav a:hover,
html[data-theme="light"] .erp-menu-item > a:hover,
html[data-theme="light"] .pos-nav a:hover {
  background: rgba(99, 102, 241, 0.12) !important;
  color: #4338ca !important;
  font-weight: 700 !important;
}

html.light-theme .pos-nav a:hover i,
html[data-theme="light"] .pos-nav a:hover i {
  color: #4f46e5 !important;
  transform: translateX(3px) !important;
}

html.light-theme .erp-menu-item.active > a,
html[data-theme="light"] .erp-menu-item.active > a {
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.14), rgba(147, 51, 234, 0.08)) !important;
  color: #4f46e5 !important;
  font-weight: 700 !important;
  border-left: 4px solid #4f46e5 !important;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.12) !important;
}

html.light-theme .pos-nav a.active,
html[data-theme="light"] .pos-nav a.active {
  background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35) !important;
  border-left: none !important;
}

/* Selected/Active Menu Icon ALWAYS Black in Light Mode */
html.light-theme .erp-menu-item.active > a svg,
html.light-theme .erp-menu-item.active > a i,
html.light-theme .erp-menu-item.active[data-menu] > a svg,
html.light-theme .erp-menu-item.active[data-menu] > a i,
html.light-theme .erp-submenu-item.active > a svg,
html.light-theme .erp-submenu-item.active > a i,
html[data-theme="light"] .erp-menu-item.active > a svg,
html[data-theme="light"] .erp-menu-item.active[data-menu] > a svg {
  color: #000000 !important;
  stroke: #000000 !important;
}

/* Sidebar Icon Accent Colors for Inactive Items */
html.light-theme .erp-menu-item:not(.active)[data-menu="dashboard"] > a svg { color: #4f46e5 !important; }
html.light-theme .erp-menu-item:not(.active)[data-menu="contact"] > a svg { color: #0284c7 !important; }
html.light-theme .erp-menu-item:not(.active)[data-menu="products"] > a svg { color: #d97706 !important; }
html.light-theme .erp-menu-item:not(.active)[data-menu="inventory"] > a svg { color: #059669 !important; }
html.light-theme .erp-menu-item:not(.active)[data-menu="purchase"] > a svg { color: #7c3aed !important; }
html.light-theme .erp-menu-item:not(.active)[data-menu="sales"] > a svg { color: #2563eb !important; }
html.light-theme .erp-menu-item:not(.active)[data-menu="stock-transfer"] > a svg { color: #0891b2 !important; }
html.light-theme .erp-menu-item:not(.active)[data-menu="outlet"] > a svg { color: #9333ea !important; }
html.light-theme .erp-menu-item:not(.active)[data-menu="report"] > a svg { color: #e11d48 !important; }
html.light-theme .erp-menu-item:not(.active)[data-menu="settings"] > a svg { color: #475569 !important; }

/* ==========================================
   HEADER & TOPBAR UTILITIES
   ========================================== */
html.light-theme .erp-header,
html.light-theme .pos-topbar,
html.light-theme .pos-header,
html[data-theme="light"] .pos-header {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1) !important;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04) !important;
}

html.light-theme .erp-search-bar,
html.light-theme .pos-search-bar,
html[data-theme="light"] .pos-search-bar {
  background: #f8fafc !important;
  border: 1px solid rgba(15, 23, 42, 0.15) !important;
}

html.light-theme .erp-search-bar input,
html.light-theme .pos-search-bar input,
html[data-theme="light"] .pos-search-bar input {
  color: #0f172a !important;
  font-weight: 600 !important;
}

html.light-theme .erp-action-btn {
  background: #f1f5f9 !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  color: #334155 !important;
}

html.light-theme .erp-action-btn:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Header Contact Info Pills */
html.light-theme div[style*="CALL US"],
html.light-theme div[style*="EMAIL"],
html.light-theme .pos-desktop-contact,
html[data-theme="light"] .pos-desktop-contact {
  background: #f8fafc !important;
  border: 1px solid rgba(15, 23, 42, 0.15) !important;
  color: #0f172a !important;
  font-weight: 600 !important;
}

html.light-theme .pos-desktop-contact a,
html[data-theme="light"] .pos-desktop-contact a {
  color: #0f172a !important;
  font-weight: 600 !important;
}

html.light-theme .pos-desktop-contact span,
html[data-theme="light"] .pos-desktop-contact span {
  color: #475569 !important;
  font-weight: 700 !important;
}

html.light-theme .pos-desktop-contact a:hover,
html[data-theme="light"] .pos-desktop-contact a:hover {
  color: #4f46e5 !important;
}

/* Header Action Buttons */
html.light-theme a.btn-primary,
html.light-theme button.btn-primary,
html.light-theme a.btn-pos-launch,
html.light-theme .btn-pos-launch {
  background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.3) !important;
  border: none !important;
}

/* ==========================================
   POS OUTLET SELECTION SCREEN IN LIGHT MODE
   ========================================== */
html.light-theme .pos-outlet-select-card,
html.light-theme a.pos-outlet-select-card {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05) !important;
}

html.light-theme .pos-outlet-select-card:hover,
html.light-theme a.pos-outlet-select-card:hover {
  background: #ffffff !important;
  border-color: #4f46e5 !important;
  box-shadow: 0 10px 25px rgba(79, 70, 229, 0.12) !important;
  transform: translateY(-3px) !important;
}

html.light-theme .pos-outlet-select-card strong,
html.light-theme a.pos-outlet-select-card strong {
  color: #0f172a !important;
}

html.light-theme .pos-outlet-select-card span,
html.light-theme a.pos-outlet-select-card span {
  color: #475569 !important;
}

html.light-theme .pos-outlet-select-card i,
html.light-theme a.pos-outlet-select-card i {
  color: #4f46e5 !important;
}

/* ==========================================
   FORMS, INPUTS & SELECT2 IN LIGHT MODE
   ========================================== */
html.light-theme input[type="text"],
html.light-theme input[type="number"],
html.light-theme input[type="date"],
html.light-theme input[type="email"],
html.light-theme input[type="password"],
html.light-theme select,
html.light-theme textarea,
html.light-theme .erp-form-control {
  background-color: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.15) !important;
  color: #0f172a !important;
  font-weight: 500 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important;
}

html.light-theme input:focus,
html.light-theme select:focus,
html.light-theme textarea:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

html.light-theme select option {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

/* Select2 Dropdowns - Floating Popover UI */
html.light-theme .select2-dropdown,
html[data-theme="light"] .select2-dropdown {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.05) !important;
  border-radius: 6px !important;
  margin-top: 4px !important;
}

html.light-theme .select2-container--default .select2-selection--single,
html[data-theme="light"] .select2-container--default .select2-selection--single {
  background-color: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 6px !important;
}

html.light-theme .select2-container--default.select2-container--open .select2-selection--single,
html[data-theme="light"] .select2-container--default.select2-container--open .select2-selection--single {
  border-radius: 6px !important;
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
}

html.light-theme .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-theme="light"] .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #0f172a !important;
  font-weight: 500 !important;
}

html.light-theme .select2-container--default .select2-search--dropdown .select2-search__field,
html[data-theme="light"] .select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  border-radius: 4px !important;
}

html.light-theme .select2-container--default .select2-results__option,
html[data-theme="light"] .select2-container--default .select2-results__option {
  color: #0f172a !important;
  font-weight: 500 !important;
  border-radius: 4px !important;
  margin-bottom: 2px !important;
}

html.light-theme .select2-container--default .select2-results__option--highlighted[aria-selected],
html[data-theme="light"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: rgba(99, 102, 241, 0.12) !important;
  color: #4f46e5 !important;
  font-weight: 600 !important;
}

html.light-theme .select2-container--default .select2-results__option[aria-selected="true"],
html[data-theme="light"] .select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: rgba(99, 102, 241, 0.18) !important;
  color: #4f46e5 !important;
  font-weight: 700 !important;
}

/* ==========================================
   TABLES & LISTINGS IN LIGHT MODE
   ========================================== */
html.light-theme .erp-table-responsive,
html.light-theme .pos-table-wrapper,
html.light-theme .premium-panel {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04) !important;
  border-radius: 14px !important;
}

html.light-theme .erp-table th,
html.light-theme .premium-table th {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  border-bottom: 2px solid rgba(15, 23, 42, 0.08) !important;
  letter-spacing: 0.5px !important;
}

html.light-theme .erp-table tr,
html.light-theme .premium-table tr {
  border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
}

html.light-theme .erp-table td,
html.light-theme .premium-table td {
  color: #334155 !important;
  font-weight: 500 !important;
}

html.light-theme .erp-table td strong,
html.light-theme .premium-table td strong {
  color: #0f172a !important;
}

html.light-theme .erp-table tbody tr:hover,
html.light-theme .premium-table tbody tr:hover {
  background: rgba(79, 70, 229, 0.03) !important;
}

html.light-theme .premium-table td code {
  background: rgba(79, 70, 229, 0.08) !important;
  color: #4f46e5 !important;
  border: 1px solid rgba(79, 70, 229, 0.2) !important;
  font-weight: 600 !important;
}

/* ==========================================
   POS MODULE LIGHT MODE ENHANCEMENTS
   ========================================== */
html.light-theme .pos-container,
html.light-theme .pos-body {
  background: #f1f5f9 !important;
}

html.light-theme .pos-card,
html.light-theme .pos-panel,
html.light-theme .product-card {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
  border-radius: 12px !important;
}

html.light-theme .product-card:hover {
  border-color: #6366f1 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.15) !important;
}

html.light-theme .product-title {
  color: #0f172a !important;
  font-weight: 600 !important;
}

html.light-theme .product-price-pill {
  background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

html.light-theme .product-stock-pill {
  background: #d1fae5 !important;
  color: #047857 !important;
  font-weight: 600 !important;
}

/* POS Right Cart Panel */
html.light-theme .pos-cart-panel {
  background: #ffffff !important;
  border-left: 1px solid rgba(15, 23, 42, 0.1) !important;
  box-shadow: -4px 0 20px rgba(15, 23, 42, 0.03) !important;
}

html.light-theme .cart-item-title {
  color: #0f172a !important;
  font-weight: 600 !important;
}

html.light-theme .cart-total-amount {
  color: #0f172a !important;
  font-weight: 800 !important;
}

html.light-theme .btn-pay-now {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3) !important;
  font-weight: 700 !important;
}

/* ==========================================
   DATE RANGE PICKER LIGHT MODE
   ========================================== */
html.light-theme .daterangepicker {
  background-color: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.15) !important;
  color: #0f172a !important;
  border-radius: 14px !important;
}

html.light-theme .daterangepicker .ranges li {
  color: #475569 !important;
  background-color: transparent !important;
}

html.light-theme .daterangepicker .ranges li:hover,
html.light-theme .daterangepicker .ranges li.active {
  background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
  color: #ffffff !important;
}

html.light-theme .daterangepicker .calendar-table {
  background-color: #ffffff !important;
}

html.light-theme .daterangepicker th,
html.light-theme .daterangepicker td {
  color: #0f172a !important;
}

html.light-theme .daterangepicker td.off {
  color: #94a3b8 !important;
}

html.light-theme .daterangepicker td.in-range {
  background-color: rgba(79, 70, 229, 0.1) !important;
  color: #4f46e5 !important;
}

html.light-theme .daterangepicker td.active {
  background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
  color: #ffffff !important;
}

/* AutoFill Overrides */
html.light-theme input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #0f172a !important;
}

/* ==========================================
   TOOLBAR BUTTONS & EXPORT CONTROLS LIGHT MODE
   ========================================== */
html.light-theme .erp-actions-right .erp-btn,
html.light-theme .erp-actions-right a.erp-btn,
html.light-theme .erp-actions-right button.erp-btn,
html.light-theme .erp-actions-right select.erp-form-select,
html.light-theme .erp-actions-right select,
html.light-theme .erp-actions-right form {
  height: 36px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--radius-sm, 8px) !important;
  vertical-align: middle !important;
}

html.light-theme .erp-actions-right .erp-btn,
html.light-theme .erp-actions-right a.erp-btn {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.18) !important;
  color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

html.light-theme .erp-actions-right a.erp-btn[aria-label*="CSV"],
html.light-theme .erp-actions-right a.erp-btn[aria-label*="Csv"] {
  background: rgba(16, 185, 129, 0.1) !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  color: #047857 !important;
}

html.light-theme .erp-actions-right a.erp-btn[aria-label*="CSV"]:hover,
html.light-theme .erp-actions-right a.erp-btn[aria-label*="Csv"]:hover {
  background: rgba(16, 185, 129, 0.2) !important;
  border-color: #10b981 !important;
  color: #065f46 !important;
}

html.light-theme .erp-actions-right a.erp-btn[aria-label*="PDF"],
html.light-theme .erp-actions-right a.erp-btn[aria-label*="Pdf"] {
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
  color: #b91c1c !important;
}

html.light-theme .erp-actions-right a.erp-btn[aria-label*="PDF"]:hover,
html.light-theme .erp-actions-right a.erp-btn[aria-label*="Pdf"]:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: #ef4444 !important;
  color: #991b1b !important;
}

html.light-theme .erp-actions-right select.erp-form-select,
html.light-theme .erp-actions-right select {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.18) !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  padding: 0 8px !important;
  font-size: 13px !important;
}

html.light-theme .erp-actions-right select.erp-form-select option,
html.light-theme .erp-actions-right select option {
  background: #ffffff !important;
  color: #0f172a !important;
}

html.light-theme .erp-actions-right form {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.18) !important;
  border-radius: var(--radius-sm, 8px) !important;
  padding: 0 10px !important;
}

html.light-theme .erp-actions-right form input[type="search"],
html.light-theme .erp-actions-right form .erp-form-input,
html.light-theme .erp-actions-right form .erp-search-input {
  background: transparent !important;
  border: none !important;
  color: #0f172a !important;
  font-size: 13px !important;
  height: 34px !important;
  line-height: 34px !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ==========================================
   POS COMPLETE LIGHT MODE & COLORFUL BUTTONS
   ========================================== */

/* POS Header & Top Bar */
html.light-theme .pos-topbar,
html.light-theme .pos-header,
html.light-theme header[class*="pos"] {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1) !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03) !important;
}

html.light-theme .pos-topbar div[style*="CALL US"],
html.light-theme .pos-topbar div[style*="EMAIL"] {
  background: #f8fafc !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  color: #334155 !important;
  font-weight: 600 !important;
}

html.light-theme .btn-close-register,
html.light-theme button[id*="close-register"] {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
}

/* POS Sidebar & Nav Links */
html.light-theme .pos-sidebar,
html.light-theme aside[class*="pos"],
html[data-theme="light"] .pos-sidebar {
  background: #ffffff !important;
  border-right: 1px solid rgba(15, 23, 42, 0.1) !important;
  box-shadow: 2px 0 16px rgba(15, 23, 42, 0.03) !important;
}

html.light-theme .pos-nav a:not(.active),
html[data-theme="light"] .pos-nav a:not(.active) {
  color: #0f172a !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  opacity: 1 !important;
}

html.light-theme .pos-nav a.active i,
html[data-theme="light"] .pos-nav a.active i {
  color: #ffffff !important;
}

/* Unique Colorful Sidebar Nav Icons in Light Mode */
html.light-theme .pos-nav a:not(.active) i.fa-home,
html[data-theme="light"] .pos-nav a:not(.active) i.fa-home { color: #0284c7 !important; }

html.light-theme .pos-nav a:not(.active) i.fa-file-invoice,
html[data-theme="light"] .pos-nav a:not(.active) i.fa-file-invoice { color: #4f46e5 !important; }

html.light-theme .pos-nav a:not(.active) i.fa-box,
html[data-theme="light"] .pos-nav a:not(.active) i.fa-box { color: #ea580c !important; }

html.light-theme .pos-nav a:not(.active) i.fa-undo,
html[data-theme="light"] .pos-nav a:not(.active) i.fa-undo { color: #e11d48 !important; }

html.light-theme .pos-nav a:not(.active) i.fa-exchange-alt,
html[data-theme="light"] .pos-nav a:not(.active) i.fa-exchange-alt { color: #9333ea !important; }

html.light-theme .pos-nav a:not(.active) i.fa-file-invoice-dollar,
html[data-theme="light"] .pos-nav a:not(.active) i.fa-file-invoice-dollar { color: #d97706 !important; }

html.light-theme .pos-nav a:not(.active) i.fa-clock,
html[data-theme="light"] .pos-nav a:not(.active) i.fa-clock { color: #059669 !important; }

html.light-theme .pos-nav a:not(.active) i.fa-ticket-alt,
html[data-theme="light"] .pos-nav a:not(.active) i.fa-ticket-alt { color: #dc2626 !important; }

html.light-theme .pos-nav a:not(.active) i.fa-list-alt,
html[data-theme="light"] .pos-nav a:not(.active) i.fa-list-alt { color: #0891b2 !important; }

html.light-theme .pos-nav a:hover,
html[data-theme="light"] .pos-nav a:hover {
  background: rgba(99, 102, 241, 0.12) !important;
  color: #4338ca !important;
  font-weight: 700 !important;
}

html.light-theme .pos-nav a.active,
html[data-theme="light"] .pos-nav a.active {
  background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4) !important;
  border-left: none !important;
}

html.light-theme .pos-nav a.active i,
html.light-theme .pos-nav a.active svg,
html[data-theme="light"] .pos-nav a.active i {
  color: #ffffff !important;
}

/* POS Search Bar & Inputs */
html.light-theme .pos-search-row input,
html.light-theme #pos-product-search,
html.light-theme #pos-customer-search,
html.light-theme .pos-search-input,
html[data-theme="light"] #pos-product-search,
html[data-theme="light"] #pos-customer-search {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.2) !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important;
}

html.light-theme .pos-search-row input::placeholder,
html.light-theme #pos-product-search::placeholder,
html.light-theme #pos-customer-search::placeholder,
html[data-theme="light"] #pos-product-search::placeholder {
  color: #64748b !important;
}

/* POS Cart Table */
html.light-theme .cart-table-wrapper,
html.light-theme .pos-cart-table,
html[data-theme="light"] .pos-cart-table {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  border-radius: 12px !important;
}

html.light-theme .cart-table-wrapper th,
html.light-theme .pos-cart-table th,
html[data-theme="light"] .pos-cart-table th {
  background: #f8fafc !important;
  color: #0f172a !important;
  font-weight: 800 !important;
  border-bottom: 2px solid rgba(15, 23, 42, 0.12) !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
}

html.light-theme .cart-table-wrapper td,
html.light-theme .pos-cart-table td,
html[data-theme="light"] .pos-cart-table td {
  color: #0f172a !important;
  font-weight: 600 !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
}

html.light-theme tr.pos-empty-cart-row td,
html[data-theme="light"] tr.pos-empty-cart-row td {
  background: #f8fafc !important;
  color: #475569 !important;
}

html.light-theme tr.pos-empty-cart-row td div,
html[data-theme="light"] tr.pos-empty-cart-row td div {
  color: #0f172a !important;
  font-weight: 800 !important;
}

/* POS Coupon Code Box Fix */
html.light-theme .pos-coupon-credit-wrapper,
html.light-theme div[style*="Apply Coupon Code"],
html.light-theme #pos-coupon-block,
html.light-theme #pos-coupon-wrapper,
html[data-theme="light"] #pos-coupon-block {
  background: #fef2f2 !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  border-radius: 12px !important;
}

html.light-theme #pos-coupon-input,
html.light-theme #pos-coupon-code,
html.light-theme input[placeholder*="CODE"],
html.light-theme input[name*="coupon"],
html[data-theme="light"] #pos-coupon-input {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 2px solid #ef4444 !important;
  color: #0f172a !important;
  font-weight: 800 !important;
  font-size: 13px !important;
}

html.light-theme #pos-coupon-input::placeholder,
html.light-theme #pos-coupon-code::placeholder,
html[data-theme="light"] #pos-coupon-input::placeholder {
  color: #64748b !important;
}

html.light-theme #btn-apply-coupon,
html.light-theme button[id*="apply-coupon"],
html.light-theme .pos-coupon-credit-wrapper button,
html[data-theme="light"] #btn-apply-coupon {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35) !important;
}

/* POS Bottom Action Buttons (Vibrant, Colorful & High-Contrast AI Design) */
html.light-theme #btn-clear-cart,
html.light-theme button[id*="clear"],
html.light-theme .btn-clear-cart,
html[data-theme="light"] .btn-clear-cart {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  border: 1px solid #dc2626 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  padding: 10px 18px !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3) !important;
  transition: all 0.2s ease !important;
}
html.light-theme #btn-clear-cart:hover,
html.light-theme .btn-clear-cart:hover,
html[data-theme="light"] .btn-clear-cart:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.45) !important;
  transform: translateY(-1px) !important;
}

html.light-theme #btn-open-hold-orders,
html.light-theme button[id*="hold-orders"],
html.light-theme #posBtnHeldOrders,
html[data-theme="light"] #posBtnHeldOrders {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  border: 1px solid #2563eb !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  padding: 10px 18px !important;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3) !important;
  transition: all 0.2s ease !important;
}
html.light-theme #btn-open-hold-orders:hover,
html.light-theme #posBtnHeldOrders:hover,
html[data-theme="light"] #posBtnHeldOrders:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(59, 130, 246, 0.45) !important;
  transform: translateY(-1px) !important;
}
html.light-theme #posBtnHeldOrders i,
html[data-theme="light"] #posBtnHeldOrders i {
  color: #ffffff !important;
}

html.light-theme #btn-open-return-modal,
html.light-theme button[id*="return"],
html[data-theme="light"] #btn-open-return-modal {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
  border: 1px solid #4f46e5 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  padding: 10px 18px !important;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3) !important;
  transition: all 0.2s ease !important;
}
html.light-theme #btn-open-return-modal:hover,
html[data-theme="light"] #btn-open-return-modal:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.45) !important;
  transform: translateY(-1px) !important;
}
html.light-theme #btn-open-return-modal i,
html[data-theme="light"] #btn-open-return-modal i {
  color: #ffffff !important;
}

html.light-theme #btn-open-exchange-modal,
html.light-theme button[id*="exchange"],
html[data-theme="light"] #btn-open-exchange-modal {
  background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%) !important;
  border: 1px solid #9333ea !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  padding: 10px 18px !important;
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.3) !important;
  transition: all 0.2s ease !important;
}
html.light-theme #btn-open-exchange-modal:hover,
html[data-theme="light"] #btn-open-exchange-modal:hover {
  background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(168, 85, 247, 0.45) !important;
  transform: translateY(-1px) !important;
}
html.light-theme #btn-open-exchange-modal i,
html[data-theme="light"] #btn-open-exchange-modal i {
  color: #ffffff !important;
}

html.light-theme #btn-open-credit-note-modal,
html.light-theme button[id*="credit-note"],
html[data-theme="light"] #btn-open-credit-note-modal {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  border: 1px solid #d97706 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  padding: 10px 18px !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35) !important;
  transition: all 0.2s ease !important;
}
html.light-theme #btn-open-credit-note-modal:hover,
html[data-theme="light"] #btn-open-credit-note-modal:hover {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.45) !important;
  transform: translateY(-1px) !important;
}
html.light-theme #btn-open-credit-note-modal i,
html[data-theme="light"] #btn-open-credit-note-modal i {
  color: #ffffff !important;
}


/* POS Summary Panel (Right Card) */
html.light-theme .summary-panel,
html.light-theme .pos-summary-card,
html.light-theme .pos-summary-block,
html[data-theme="light"] .summary-panel {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05) !important;
  border-radius: 16px !important;
}

html.light-theme .summary-panel h3,
html.light-theme .pos-summary-card h3,
html[data-theme="light"] .summary-panel h3 {
  color: #0f172a !important;
  font-weight: 800 !important;
}

html.light-theme .summary-line span,
html[data-theme="light"] .summary-line span {
  color: #475569 !important;
  font-weight: 600 !important;
}

html.light-theme #summary-sale-price,
html.light-theme #summary-subtotal,
html[data-theme="light"] #summary-sale-price {
  color: #0f172a !important;
  font-weight: 800 !important;
}

html.light-theme #summary-discount {
  color: #dc2626 !important;
  font-weight: 800 !important;
}

html.light-theme #pos-salesman-select,
html.light-theme select[name*="salesman"],
html[data-theme="light"] #pos-salesman-select {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.2) !important;
  color: #0f172a !important;
  font-weight: 700 !important;
}

/* POS Payment Method Buttons */
html.light-theme .btn-payment,
html.light-theme .payment-btn,
html.light-theme .btn-payment-method,
html.light-theme button[data-method],
html[data-theme="light"] .btn-payment {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.2) !important;
  color: #0f172a !important;
  font-weight: 700 !important;
}

html.light-theme .btn-payment:hover,
html[data-theme="light"] .btn-payment:hover {
  background: #f1f5f9 !important;
  border-color: #6366f1 !important;
  color: #4f46e5 !important;
}

html.light-theme .btn-payment.active,
html.light-theme .payment-btn.active,
html.light-theme .btn-payment-method.active,
html.light-theme button[data-method].active,
html[data-theme="light"] .btn-payment.active {
  background: linear-gradient(135deg, #d1fae5, #a7f3d0) !important;
  border: 2px solid #10b981 !important;
  color: #047857 !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3) !important;
}

html.light-theme #btn-hold-cart,
html.light-theme #btn-print-bill,
html[data-theme="light"] #btn-hold-cart {
  background: #f8fafc !important;
  border: 1px solid rgba(15, 23, 42, 0.2) !important;
  color: #0f172a !important;
  font-weight: 800 !important;
}

html.light-theme #btn-place-order,
html.light-theme button[id*="place-order"],
html.light-theme .btn-pay-now,
html.light-theme .btn-complete,
html[data-theme="light"] #btn-place-order {
  background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  border: none !important;
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.45) !important;
}

html.light-theme #btn-place-order:hover,
html[data-theme="light"] #btn-place-order:hover {
  background: linear-gradient(135deg, #4338ca, #4f46e5) !important;
  box-shadow: 0 8px 25px rgba(79, 70, 229, 0.55) !important;
}

/* ==========================================
   POS MODALS & POPUPS LIGHT MODE FIX
   ========================================== */
html.light-theme div[id*="modal"],
html.light-theme .pos-modal-overlay {
  background: rgba(15, 23, 42, 0.6) !important;
  backdrop-filter: blur(8px) !important;
}

html.light-theme .pos-modal,
html.light-theme .pos-modal-card,
html.light-theme .pos-modal-content {
  background: #ffffff !important;
  border: 1px solid #475569 !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.22) !important;
  color: #0f172a !important;
  border-radius: 5px !important;
}

html.light-theme .pos-modal-header {
  background: #f8fafc !important;
  border-bottom: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  border-radius: 5px 5px 0 0 !important;
}

html.light-theme .pos-modal-title {
  color: #0f172a !important;
  font-weight: 800 !important;
}

html.light-theme .pos-modal-close {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
  border-radius: 50% !important;
}

html.light-theme .pos-modal-body {
  background: transparent !important;
  color: #0f172a !important;
}

html.light-theme .pos-modal label {
  color: #475569 !important;
  font-weight: 600 !important;
}

html.light-theme div[id*="modal"] table {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
}

html.light-theme div[id*="modal"] table th {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  border-bottom: 2px solid rgba(15, 23, 42, 0.08) !important;
}

html.light-theme div[id*="modal"] table td {
  color: #334155 !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
}

html.light-theme div[id*="modal"] footer,
html.light-theme .pos-modal-footer,
html.light-theme .erp-modal-footer,
html.light-theme #wh-modal-footer,
html.light-theme #qa-modal-footer {
  background: #f8fafc !important;
  border-top: 1px solid #cbd5e1 !important;
}

html.light-theme div[id*="modal"] button[type="submit"],
html.light-theme div[id*="modal"] button[id*="save"],
html.light-theme div[id*="modal"] button[id*="proceed"],
html.light-theme div[id*="modal"] button[id*="confirm"] {
  background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.3) !important;
}

/* Explicit Modal Containers & Select Options in Light Mode */
html.light-theme #pos-add-customer-modal > div,
html.light-theme #pos-open-register-modal > div,
html.light-theme #pos-close-register-modal > div,
html.light-theme #pos-exchange-modal > div,
html.light-theme #pos-credit-note-modal > div,
html.light-theme #pos-return-modal > div,
html.light-theme #pos-hold-modal > div,
html.light-theme #pos-print-modal > div,
html.light-theme .pos-modal-content,
html.light-theme .pos-modal-card {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.15) !important;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.25) !important;
  color: #0f172a !important;
}

html.light-theme #pos-credit-note-modal div[class*="footer"],
html.light-theme #pos-exchange-modal div[class*="footer"],
html.light-theme #pos-return-modal div[class*="footer"],
html.light-theme .credit-note-modal-footer,
html.light-theme .exchange-modal-footer,
html.light-theme .return-modal-footer {
  background: #f8fafc !important;
  border-top: 1px solid rgba(15, 23, 42, 0.1) !important;
}

html.light-theme select option,
html.light-theme .pos-container select option,
html.light-theme .pos-wrapper select option,
html.light-theme div[id*="modal"] select option {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

/* ==========================================
   UNIVERSAL MODULE & POPUP LIGHT MODE OVERRIDES
   ========================================== */

/* Dual Selector Support for data-theme="light" */
html[data-theme="light"] {
  color-scheme: light !important;
  --bg-primary: #f1f5f9;
  --bg-secondary: #ffffff;
  --bg-glass: rgba(255, 255, 255, 0.95);
  --bg-glass-hover: rgba(241, 245, 249, 0.98);
  --border-glass: #cbd5e1;
  --border-glass-glow: rgba(79, 70, 229, 0.25);

  --color-primary: #4f46e5;
  --color-primary-glow: rgba(79, 70, 229, 0.12);
  --color-secondary: #0891b2;
  --color-accent: #9333ea;

  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #475569;
  --text-link: #2563eb;

  --pos-bg: #f1f5f9;
  --pos-surface: #ffffff;
  --pos-surface-glass: rgba(255, 255, 255, 0.95);
  --pos-sidebar-bg: #ffffff;
  --pos-sidebar-hover: #f1f5f9;
  --pos-text-main: #0f172a;
  --pos-text-muted: #475569;
  --pos-border: #cbd5e1;
  --pos-danger-light: #fee2e2;
  --pos-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
  --pos-input-bg: #ffffff;
}

/* All ERP Modals & Popups (Sales, Products, Purchase, Stock Transfer, Inventory) */
html.light-theme .erp-modal-content,
html.light-theme #erp-order-modal-box,
html.light-theme #erp-order-details-modal > div,
html.light-theme #erp-quick-adjust-modal .erp-modal-content,
html.light-theme #erp-import-modal .erp-modal-content,
html.light-theme #erp-view-image-modal .erp-modal-content,
html.light-theme #invoice-viewer-modal > div,
html[data-theme="light"] .erp-modal-content,
html[data-theme="light"] #erp-order-modal-box {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.15) !important;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.2) !important;
  color: #0f172a !important;
}

html.light-theme .erp-modal-content h2,
html.light-theme .erp-modal-content h3,
html.light-theme #order-modal-title,
html.light-theme #qa-product-title,
html.light-theme #erp-modal-image-title,
html[data-theme="light"] .erp-modal-content h3 {
  color: #0f172a !important;
}

html.light-theme .erp-modal-content div[style*="background: #0f172a"],
html.light-theme .erp-modal-content div[style*="background: #1e293b"],
html.light-theme .erp-modal-content div[style*="background: #111827"],
html.light-theme #invoice-viewer-modal div[style*="background: #0f172a"] {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* Autocomplete Suggestions & Live Search Popups */
html.light-theme #autocomplete-suggestions-list,
html.light-theme #bc-search-results,
html.light-theme .autocomplete-suggestions,
html[data-theme="light"] #autocomplete-suggestions-list {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.15) !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15) !important;
  color: #0f172a !important;
}

html.light-theme #autocomplete-suggestions-list div,
html.light-theme #bc-search-results div,
html.light-theme .autocomplete-suggestions div {
  color: #0f172a !important;
}

html.light-theme #autocomplete-suggestions-list div:hover,
html.light-theme #bc-search-results div:hover {
  background: #f1f5f9 !important;
}

/* POS Specific Coupon & Credit Inputs Override Inline Styles */
html.light-theme #pos-coupon-input,
html.light-theme #pos-credit-note-input,
html.light-theme #pos-adjust-amount,
html[data-theme="light"] #pos-coupon-input {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(15, 23, 42, 0.2) !important;
}

/* Universal Select Options in Light Mode */
html.light-theme select option,
html.light-theme select,
html.light-theme option,
html[data-theme="light"] select option {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

/* Action Dropdown Menus in Table Rows */
html.light-theme .erp-dropdown-menu,
html[data-theme="light"] .erp-dropdown-menu {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.15) !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15) !important;
}

html.light-theme .erp-dropdown-item,
html[data-theme="light"] .erp-dropdown-item {
  color: #334155 !important;
}

html.light-theme .erp-dropdown-item:hover,
html[data-theme="light"] .erp-dropdown-item:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

/* ==========================================
   ULTIMATE LIGHT MODE HIGH-CONTRAST & BUTTON FIXES
   ========================================== */

/* All Modal Cancel & Secondary Buttons */
html.light-theme #btn-cancel-return,
html.light-theme #btn-close-exchange-modal,
html.light-theme #btn-close-credit-note-modal,
html.light-theme #btn-close-customer-modal,
html.light-theme #btn-close-import-modal,
html.light-theme #btn-cancel-import,
html.light-theme .btn-cancel-modal,
html.light-theme .erp-close-modal,
html.light-theme .erp-close-import-modal,
html.light-theme .erp-close-image-modal,
html.light-theme .btn-cancel,
html.light-theme button[id*="cancel"],
html.light-theme button[id*="close-modal"],
html[data-theme="light"] #btn-cancel-return,
html[data-theme="light"] #btn-close-exchange-modal,
html[data-theme="light"] #btn-close-credit-note-modal,
html[data-theme="light"] button[id*="cancel"] {
  background: #e2e8f0 !important;
  background-color: #e2e8f0 !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
}

html.light-theme #btn-cancel-return:hover,
html.light-theme #btn-close-exchange-modal:hover,
html.light-theme #btn-close-credit-note-modal:hover,
html.light-theme #btn-close-customer-modal:hover,
html.light-theme #btn-cancel-import:hover,
html.light-theme .btn-cancel-modal:hover,
html.light-theme .erp-close-modal:hover,
html.light-theme button[id*="cancel"]:hover,
html[data-theme="light"] button[id*="cancel"]:hover {
  background: #cbd5e1 !important;
  background-color: #cbd5e1 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}

/* Modal Headers & Footers */
html.light-theme .return-modal-footer,
html.light-theme .exchange-modal-footer,
html.light-theme .credit-note-modal-footer,
html.light-theme .pos-modal-footer,
html.light-theme div[class*="-modal-footer"],
html[data-theme="light"] div[class*="-modal-footer"] {
  background: #f8fafc !important;
  background-color: #f8fafc !important;
  border-top: 1px solid rgba(15, 23, 42, 0.12) !important;
}

/* SweetAlert Popups Light Mode Overrides */
html.light-theme .swal2-popup,
html[data-theme="light"] .swal2-popup {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(15, 23, 42, 0.15) !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18) !important;
  border-radius: 16px !important;
}

html.light-theme .swal2-title,
html.light-theme .swal2-html-container,
html[data-theme="light"] .swal2-title {
  color: #0f172a !important;
}

html.light-theme .swal2-cancel,
html[data-theme="light"] .swal2-cancel {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  border: 1px solid #cbd5e1 !important;
}

html.light-theme .swal2-cancel:hover,
html[data-theme="light"] .swal2-cancel:hover {
  background-color: #cbd5e1 !important;
}

/* Input Fields inside Modals */
html.light-theme div[id*="modal"] input[type="text"],
html.light-theme div[id*="modal"] input[type="number"],
html.light-theme div[id*="modal"] select,
html.light-theme div[id*="modal"] textarea,
html[data-theme="light"] div[id*="modal"] input {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.2) !important;
  color: #0f172a !important;
  font-weight: 600 !important;
}

/* ==========================================
   POS SUBROUTE & PREMIUM PANEL LIGHT MODE FIXES
   ========================================== */
html.light-theme .pos-orders-wrapper,
html.light-theme .erp-panel,
html.light-theme .ap-table-wrapper,
html.light-theme .sales-table-wrapper,
html[data-theme="light"] .pos-orders-wrapper,
html[data-theme="light"] .erp-panel,
html[data-theme="light"] .ap-table-wrapper {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05) !important;
  border-radius: 12px !important;
}

html.light-theme .pos-orders-title,
html[data-theme="light"] .pos-orders-title {
  color: #0f172a !important;
}

html.light-theme .pos-orders-table,
html.light-theme .erp-table,
html.light-theme .ap-data-table,
html.light-theme .sales-table,
html.light-theme .premium-table,
html[data-theme="light"] .pos-orders-table,
html[data-theme="light"] .erp-table {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

html.light-theme .pos-orders-table thead,
html.light-theme .erp-table thead,
html.light-theme .ap-data-table thead,
html.light-theme .sales-table thead,
html.light-theme .premium-table thead,
html[data-theme="light"] .pos-orders-table thead,
html[data-theme="light"] .erp-table thead {
  background: #f8fafc !important;
  background-color: #f8fafc !important;
  border-bottom: 1px solid #cbd5e1 !important;
}

html.light-theme .pos-orders-table thead tr,
html.light-theme .erp-table thead tr,
html.light-theme .ap-data-table thead tr,
html.light-theme .sales-table thead tr,
html.light-theme .premium-table thead tr,
html[data-theme="light"] .pos-orders-table thead tr {
  background: #f8fafc !important;
  background-color: #f8fafc !important;
  border-top: 1px solid #cbd5e1 !important;
  border-bottom: 1px solid #cbd5e1 !important;
}

html.light-theme .pos-orders-table th,
html.light-theme .erp-table th,
html.light-theme .ap-data-table th,
html.light-theme .sales-table th,
html.light-theme .premium-table th,
html[data-theme="light"] .pos-orders-table th,
html[data-theme="light"] .erp-table th,
html[data-theme="light"] .ap-data-table th {
  background: #f8fafc !important;
  background-color: #f8fafc !important;
  color: #1e293b !important;
  font-weight: 700 !important;
  border-top: 1px solid #cbd5e1 !important;
  border-bottom: 1px solid #cbd5e1 !important;
  border-left: none !important;
  border-right: none !important;
}

html.light-theme .pos-orders-table td,
html.light-theme .pos-orders-table td div,
html.light-theme .erp-table td,
html.light-theme .ap-data-table td,
html.light-theme .sales-table td,
html.light-theme .premium-table td,
html.light-theme .premium-table td div,
html[data-theme="light"] .pos-orders-table td,
html[data-theme="light"] .pos-orders-table td div,
html[data-theme="light"] .erp-table td,
html[data-theme="light"] .ap-data-table td,
html[data-theme="light"] .premium-table td,
html[data-theme="light"] .premium-table td div {
  color: #0f172a !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

html.light-theme .pos-orders-table tr:hover td,
html.light-theme .erp-table tr:hover td,
html.light-theme .ap-data-table tr:hover td,
html[data-theme="light"] .pos-orders-table tr:hover td,
html[data-theme="light"] .erp-table tr:hover td {
  background: #f1f5f9 !important;
}

/* Coupons Premium Panel & Tables */
html.light-theme .premium-panel,
html[data-theme="light"] .premium-panel {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06) !important;
  color: #0f172a !important;
}

html.light-theme .panel-header,
html[data-theme="light"] .panel-header {
  background: #f8fafc !important;
  background-color: #f8fafc !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1) !important;
}

html.light-theme .panel-header h3,
html[data-theme="light"] .panel-header h3 {
  color: #0f172a !important;
  font-weight: 700 !important;
}

html.light-theme .premium-table thead,
html[data-theme="light"] .premium-table thead {
  background: #f8fafc !important;
  background-color: #f8fafc !important;
}

html.light-theme .premium-table th,
html[data-theme="light"] .premium-table th {
  color: #334155 !important;
  font-weight: 700 !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1) !important;
}

html.light-theme .premium-table td,
html[data-theme="light"] .premium-table td {
  color: #0f172a !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
}

html.light-theme .premium-table tbody tr:hover td,
html[data-theme="light"] .premium-table tbody tr:hover td {
  background: #f1f5f9 !important;
}

/* Select2 Dropdown Light Theme Fixes */
html.light-theme .select2-dropdown,
html[data-theme="light"] .select2-dropdown {
  background-color: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.15) !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.15) !important;
}

html.light-theme .select2-container--default .select2-selection--single,
html[data-theme="light"] .select2-container--default .select2-selection--single {
  background-color: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.18) !important;
}

html.light-theme .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-theme="light"] .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #0f172a !important;
  font-weight: 600 !important;
}

html.light-theme .select2-container--default .select2-search--dropdown .select2-search__field,
html[data-theme="light"] .select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(15, 23, 42, 0.2) !important;
}

html.light-theme .select2-container--default .select2-results__option,
html[data-theme="light"] .select2-container--default .select2-results__option {
  color: #0f172a !important;
}

html.light-theme .select2-container--default .select2-results__option--highlighted[aria-selected],
html[data-theme="light"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #4f46e5 !important;
  color: #ffffff !important;
}

/* DateRangePicker Light Theme Fixes */
html.light-theme .daterangepicker,
html[data-theme="light"] .daterangepicker {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(15, 23, 42, 0.15) !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.15) !important;
}

html.light-theme .daterangepicker .calendar-table,
html[data-theme="light"] .daterangepicker .calendar-table {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: none !important;
}

html.light-theme .daterangepicker th,
html[data-theme="light"] .daterangepicker th {
  color: #334155 !important;
  font-weight: 700 !important;
}

html.light-theme .daterangepicker td.available,
html[data-theme="light"] .daterangepicker td.available {
  color: #0f172a !important;
}

html.light-theme .daterangepicker td.off,
html.light-theme .daterangepicker td.off.in-range,
html[data-theme="light"] .daterangepicker td.off {
  color: #94a3b8 !important;
  background: #ffffff !important;
}

html.light-theme .daterangepicker td.active,
html.light-theme .daterangepicker td.active:hover,
html[data-theme="light"] .daterangepicker td.active {
  background-color: #4f46e5 !important;
  color: #ffffff !important;
}

html.light-theme .daterangepicker .drp-buttons,
html[data-theme="light"] .daterangepicker .drp-buttons {
  border-top: 1px solid rgba(15, 23, 42, 0.1) !important;
}

html.light-theme .daterangepicker .cancelBtn,
html[data-theme="light"] .daterangepicker .cancelBtn {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  font-weight: 700 !important;
}

/* Inline style overrides for select and input controls */
html.light-theme select[style*="background: rgba(0,0,0"],
html.light-theme input[style*="background: rgba(0,0,0"],
html[data-theme="light"] select[style*="background: rgba(0,0,0"],
html[data-theme="light"] input[style*="background: rgba(0,0,0"] {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

/* Ensure Pagination Buttons across all ERP modules have high contrast in Light mode */
html.light-theme .sales-page-btn,
html.light-theme .product-page-btn,
html.light-theme .erp-btn,
html[data-theme="light"] .erp-btn {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-weight: 600 !important;
}

html.light-theme .sales-page-btn:hover,
html.light-theme .product-page-btn:hover,
html.light-theme .erp-btn:hover {
  background: #f1f5f9 !important;
  color: #4f46e5 !important;
  border-color: #4f46e5 !important;
}

/* ==========================================
   HIGH-VISIBILITY THIN ELEGANT BORDERS IN LIGHT MODE (ERP & POS)
   ========================================== */

/* Root tokens override for ultra-thin crisp borders */
html.light-theme,
html[data-theme="light"],
:root.light-theme {
  --border-glass: #cbd5e1 !important;
  --pos-border: #cbd5e1 !important;
}

/* POS Sidebar & Header Divider Borders */
html.light-theme .pos-sidebar,
html[data-theme="light"] .pos-sidebar {
  border-right: 1px solid #e2e8f0 !important;
}
html.light-theme .pos-logo,
html[data-theme="light"] .pos-logo {
  border-bottom: 1px solid #e2e8f0 !important;
}
html.light-theme .pos-header,
html[data-theme="light"] .pos-header {
  border-bottom: 1px solid #e2e8f0 !important;
}

/* POS Top Search Inputs */
html.light-theme .pos-search-row input,
html.light-theme #pos-product-search,
html.light-theme #pos-customer-search,
html.light-theme #bc-product-search-input,
html.light-theme #bc-customer-search-input,
html.light-theme .pos-search-input,
html[data-theme="light"] #pos-product-search,
html[data-theme="light"] #pos-customer-search {
  border: 1px solid #cbd5e1 !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}

/* POS Summary Panel (Right Card), Cart Panel & Workspace Panels */
html.light-theme .summary-panel,
html.light-theme .pos-summary-card,
html.light-theme .pos-summary-block,
html.light-theme .pos-right-panel,
html.light-theme .cart-table-wrapper,
html.light-theme .pos-cart-panel,
html[data-theme="light"] .summary-panel,
html[data-theme="light"] .cart-table-wrapper {
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05) !important;
  border-radius: 10px !important;
  background: #ffffff !important;
}

/* All Table Outer Boxes & Wrappers in ERP & POS */
html.light-theme .pos-orders-wrapper,
html.light-theme .erp-panel,
html.light-theme .ap-table-wrapper,
html.light-theme .sales-table-wrapper,
html.light-theme .premium-panel,
html[data-theme="light"] .pos-orders-wrapper,
html[data-theme="light"] .erp-panel {
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05) !important;
  border-radius: 10px !important;
}

/* All Data Tables in ERP & POS */
html.light-theme .pos-orders-table,
html.light-theme .pos-cart-table,
html.light-theme .erp-table,
html.light-theme .ap-data-table,
html.light-theme .sales-table,
html.light-theme .premium-table,
html[data-theme="light"] .pos-orders-table,
html[data-theme="light"] .pos-cart-table,
html[data-theme="light"] .erp-table {
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

/* Table Headers (th, thead) */
html.light-theme .pos-orders-table th,
html.light-theme .pos-cart-table th,
html.light-theme .erp-table th,
html.light-theme .ap-data-table th,
html.light-theme .sales-table th,
html.light-theme .premium-table th,
html[data-theme="light"] .pos-orders-table th,
html[data-theme="light"] .pos-cart-table th,
html[data-theme="light"] .erp-table th {
  background: #f8fafc !important;
  background-color: #f8fafc !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  border-top: none !important;
  border-bottom: 1px solid #cbd5e1 !important;
  border-left: 1px solid #e2e8f0 !important;
  border-right: 1px solid #e2e8f0 !important;
}

/* Table Body Cells (td) */
html.light-theme .pos-orders-table td,
html.light-theme .pos-cart-table td,
html.light-theme .erp-table td,
html.light-theme .ap-data-table td,
html.light-theme .sales-table td,
html.light-theme .premium-table td,
html[data-theme="light"] .pos-orders-table td,
html[data-theme="light"] .pos-cart-table td,
html[data-theme="light"] .erp-table td {
  color: #0f172a !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-right: 1px solid #f1f5f9 !important;
}

/* POS Payment Method Buttons */
html.light-theme .btn-payment,
html.light-theme .payment-btn,
html.light-theme .btn-payment-method,
html.light-theme button[data-method],
html[data-theme="light"] .btn-payment {
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #0f172a !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

html.light-theme .btn-payment.active,
html.light-theme .payment-btn.active,
html.light-theme .btn-payment-method.active,
html.light-theme button[data-method].active,
html[data-theme="light"] .btn-payment.active {
  border: 1.5px solid #059669 !important;
  background: #d1fae5 !important;
  color: #065f46 !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2) !important;
}

/* Salesman Select & Custom Selects */
html.light-theme .custom-select,
html.light-theme #pos-salesman-select,
html.light-theme select[name*="salesman"],
html.light-theme select.erp-form-select,
html.light-theme select.pos-form-input,
html[data-theme="light"] .custom-select {
  border: 1px solid #cbd5e1 !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
  font-weight: 600 !important;
}

/* Universal Inputs in ERP & POS */
html.light-theme input[type="text"],
html.light-theme input[type="search"],
html.light-theme input[type="number"],
html.light-theme input.erp-form-control,
html.light-theme input.erp-search-input,
html.light-theme textarea,
html[data-theme="light"] input[type="text"] {
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  background-color: #ffffff !important;
}

/* KPI Cards across POS & ERP */
html.light-theme div[style*="background: var(--pos-surface)"],
html.light-theme div[style*="background: var(--bg-secondary)"],
html[data-theme="light"] div[style*="background: var(--pos-surface)"] {
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

/* Empty Cart Container */
html.light-theme tr.pos-empty-cart-row td,
html.light-theme div[id*="empty-cart"],
html.light-theme .pos-empty-cart-box,
html[data-theme="light"] tr.pos-empty-cart-row td {
  border: 1px dashed #cbd5e1 !important;
  background: #f8fafc !important;
  color: #0f172a !important;
}

/* Modals, Popups, SweetAlert & Autocomplete */
html.light-theme .pos-modal,
html.light-theme .erp-modal-content,
html.light-theme .swal2-popup,
html.light-theme .select2-dropdown,
html.light-theme .daterangepicker,
html.light-theme #autocomplete-suggestions-list,
html.light-theme #bc-search-results,
html[data-theme="light"] .pos-modal,
html[data-theme="light"] .erp-modal-content {
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12) !important;
  background: #ffffff !important;
}

/* ==========================================
   POPUP MODALS & BREAKDOWN OVERRIDES (LIGHT MODE)
   ========================================== */
html.light-theme #erp-stock-modal-box,
html.light-theme #erp-wh-modal-box,
html.light-theme .erp-modal-content,
html.light-theme #erp-order-modal-box,
html.light-theme #erp-quick-adjust-modal .erp-modal-content,
html.light-theme #erp-import-modal .erp-modal-content,
html.light-theme #erp-order-details-modal > div,
html.light-theme #invoice-viewer-modal > div,
html.light-theme .pos-modal,
html[data-theme="light"] #erp-stock-modal-box,
html[data-theme="light"] #erp-wh-modal-box,
html[data-theme="light"] .erp-modal-content,
html[data-theme="light"] .pos-modal {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12) !important;
  color: #0f172a !important;
  border-radius: 8px !important;
}

/* Modal Headers */
html.light-theme #erp-wh-modal-box > div:first-child,
html.light-theme #erp-stock-modal-box > div:first-child,
html.light-theme #erp-quick-adjust-modal .erp-modal-content > div:first-child,
html.light-theme #erp-import-modal .erp-modal-content > div:first-child,
html.light-theme .pos-modal-header,
html[data-theme="light"] #erp-wh-modal-box > div:first-child,
html[data-theme="light"] #erp-stock-modal-box > div:first-child {
  background: #f8fafc !important;
  background-color: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-radius: 8px 8px 0 0 !important;
}

/* Modal Title Headings */
html.light-theme #erp-stock-modal-box h3,
html.light-theme #erp-wh-modal-box h3,
html.light-theme .erp-modal-content h3,
html.light-theme #erp-order-modal-box h3,
html.light-theme .pos-modal-header h3,
html[data-theme="light"] #erp-wh-modal-box h3,
html[data-theme="light"] #erp-stock-modal-box h3 {
  color: #0f172a !important;
  font-weight: 800 !important;
}

/* Subtitles / Product Title Badges */
html.light-theme #erp-stock-modal-title,
html.light-theme #wh-modal-title,
html.light-theme #order-modal-title,
html.light-theme #qa-product-title,
html[data-theme="light"] #wh-modal-title,
html[data-theme="light"] #erp-stock-modal-title {
  color: #475569 !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
}

/* Breakdown Table Wrapper & Grid inside WH / Quick Adjust / Order Modals */
html.light-theme .erp-breakdown-table-wrapper,
html.light-theme .erp-modal-table-wrapper,
html.light-theme .erp-modal-summary-box,
html.light-theme #erp-order-modal-body > div,
html.light-theme .erp-modal-content div[style*="background: rgba(0,0,0"],
html.light-theme #erp-order-modal-box div[style*="background: rgba(0,0,0"],
html.light-theme .pos-modal div[style*="background: rgba(0,0,0"],
html[data-theme="light"] .erp-breakdown-table-wrapper,
html[data-theme="light"] .erp-modal-table-wrapper,
html[data-theme="light"] .erp-modal-summary-box,
html[data-theme="light"] #erp-order-modal-body > div {
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
}

/* Outlet Breakdown Cards (Light Mode) */
html.light-theme .erp-outlet-card,
html[data-theme="light"] .erp-outlet-card {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
  padding: 14px 16px !important;
}

/* Outlet Modal Inner Table (Light Mode) */
html.light-theme .erp-modal-inner-table,
html[data-theme="light"] .erp-modal-inner-table {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
}

html.light-theme .erp-modal-inner-table thead tr,
html[data-theme="light"] .erp-modal-inner-table thead tr {
  background: #f1f5f9 !important;
  background-color: #f1f5f9 !important;
  border-bottom: 1px solid #cbd5e1 !important;
}

html.light-theme .erp-modal-inner-table th,
html[data-theme="light"] .erp-modal-inner-table th {
  color: #475569 !important;
  font-weight: 700 !important;
  padding: 8px 12px !important;
}

html.light-theme .erp-modal-inner-table td,
html[data-theme="light"] .erp-modal-inner-table td {
  color: #0f172a !important;
  border-top: 1px solid #f1f5f9 !important;
  padding: 8px 12px !important;
}

/* Modal Customer Badges */
html.light-theme #order-modal-customer-badge,
html.light-theme .erp-customer-badge,
html[data-theme="light"] #order-modal-customer-badge {
  background: #eff6ff !important;
  background-color: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  color: #1d4ed8 !important;
  font-weight: 700 !important;
}

/* Modal Inner Table Cells & Text Overrides */
html.light-theme #erp-order-modal-body table thead tr,
html[data-theme="light"] #erp-order-modal-body table thead tr {
  background: #f8fafc !important;
  background-color: #f8fafc !important;
  border-bottom: 1px solid #cbd5e1 !important;
}

html.light-theme #erp-order-modal-body table th,
html[data-theme="light"] #erp-order-modal-body table th {
  color: #475569 !important;
  font-weight: 700 !important;
  background: transparent !important;
}

html.light-theme #erp-order-modal-body table td,
html[data-theme="light"] #erp-order-modal-body table td {
  color: #0f172a !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

html.light-theme #erp-order-modal-body div,
html.light-theme #erp-order-modal-body span,
html[data-theme="light"] #erp-order-modal-body div,
html[data-theme="light"] #erp-order-modal-body span {
  color: #0f172a !important;
}

html.light-theme #erp-order-modal-body div[style*="color: #fff"],
html.light-theme #erp-order-modal-body span[style*="color: #fff"],
html.light-theme #erp-order-modal-body td[style*="color: #fff"],
html[data-theme="light"] #erp-order-modal-body div[style*="color: #fff"],
html[data-theme="light"] #erp-order-modal-body span[style*="color: #fff"],
html[data-theme="light"] #erp-order-modal-body td[style*="color: #fff"] {
  color: #0f172a !important;
}

html.light-theme #wh-modal-body-header,
html[data-theme="light"] #wh-modal-body-header {
  background: #f1f5f9 !important;
  background-color: #f1f5f9 !important;
  border: none !important;
  border-bottom: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-weight: 800 !important;
  border-radius: 0 !important;
}

html.light-theme #wh-modal-body-header span,
html[data-theme="light"] #wh-modal-body-header span {
  color: #0f172a !important;
  font-weight: 800 !important;
  border-right: 1px solid #cbd5e1 !important;
  border-radius: 0 !important;
}

html.light-theme #wh-modal-body-header span:last-child,
html[data-theme="light"] #wh-modal-body-header span:last-child {
  border-right: none !important;
}

/* Breakdown Modal Rows Container */
html.light-theme #wh-modal-body,
html.light-theme #qa-variations-container,
html[data-theme="light"] #wh-modal-body,
html[data-theme="light"] #qa-variations-container {
  background: #ffffff !important;
  border: none !important;
  border-radius: 0 !important;
}

/* Individual Rows & Grid Cell Borders */
html.light-theme .erp-wh-modal-row,
html[data-theme="light"] .erp-wh-modal-row {
  border-bottom: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  background: #ffffff !important;
  border-radius: 0 !important;
}

html.light-theme .erp-wh-modal-row:last-child,
html[data-theme="light"] .erp-wh-modal-row:last-child {
  border-bottom: none !important;
}

html.light-theme .erp-wh-modal-row > div,
html.light-theme .erp-wh-modal-row > span,
html[data-theme="light"] .erp-wh-modal-row > div,
html[data-theme="light"] .erp-wh-modal-row > span {
  color: #0f172a !important;
  border-right: 1px solid #cbd5e1 !important;
  border-radius: 0 !important;
}

html.light-theme .erp-wh-modal-row > div:last-child,
html.light-theme .erp-wh-modal-row > span:last-child,
html[data-theme="light"] .erp-wh-modal-row > div:last-child,
html[data-theme="light"] .erp-wh-modal-row > span:last-child {
  border-right: none !important;
}

html.light-theme .erp-wh-modal-row:hover,
html.light-theme #wh-modal-body > div:hover,
html.light-theme #qa-variations-container > div:hover {
  background: #f8fafc !important;
}

/* Quantity Inputs inside breakdown modals */
html.light-theme .erp-wh-qty-input,
html.light-theme .qa-qty-input,
html.light-theme input[name*="qa_qty"],
html[data-theme="light"] .erp-wh-qty-input,
html[data-theme="light"] .qa-qty-input {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  border-radius: 5px !important;
  padding: 4px 8px !important;
  width: 80px !important;
  text-align: right !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.04) !important;
  outline: none !important;
}

html.light-theme .erp-wh-qty-input:focus,
html.light-theme .qa-qty-input:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
}

/* Modal Footer & Buttons */
html.light-theme #wh-modal-footer,
html.light-theme #qa-modal-footer {
  border-top: 1px solid #cbd5e1 !important;
}

html.light-theme #btn-cancel-wh-modal,
html.light-theme .erp-close-modal {
  border-radius: 5px !important;
  border: 1px solid #cbd5e1 !important;
  background: #f1f5f9 !important;
  color: #0f172a !important;
  font-weight: 600 !important;
}

html.light-theme #btn-update-wh-stock,
html.light-theme #qa-save-btn,
html[data-theme="light"] #btn-update-wh-stock,
html[data-theme="light"] #qa-save-btn {
  background: #2563eb !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 700 !important;
  border-radius: 5px !important;
  padding: 8px 20px !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important;
  cursor: pointer !important;
}

html.light-theme #btn-update-wh-stock:hover,
html.light-theme #qa-save-btn:hover {
  background: #1d4ed8 !important;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35) !important;
}

/* Close buttons inside modals */
html.light-theme #erp-wh-modal-close,
html.light-theme #erp-stock-modal-close,
html.light-theme #erp-order-modal-close,
html.light-theme #qa-modal-close,
html.light-theme .pos-modal-close,
html.light-theme .erp-modal-close-btn,
html.light-theme .erp-close-modal,
html.light-theme .erp-close-import-modal,
html.light-theme .erp-close-image-modal,
html.light-theme button[class*="close-modal"],
html.light-theme button[id*="modal-close"],
html[data-theme="light"] #erp-wh-modal-close,
html[data-theme="light"] #erp-order-modal-close,
html[data-theme="light"] .erp-modal-close-btn {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #f1f5f9 !important;
  background-color: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

html.light-theme #erp-wh-modal-close:hover,
html.light-theme #erp-stock-modal-close:hover,
html.light-theme #erp-order-modal-close:hover,
html.light-theme #qa-modal-close:hover,
html.light-theme .erp-close-import-modal:hover,
html.light-theme .erp-close-image-modal:hover,
html.light-theme .pos-modal-close:hover,
html.light-theme .erp-modal-close-btn:hover,
html[data-theme="light"] #erp-wh-modal-close:hover,
html[data-theme="light"] #erp-order-modal-close:hover,
html[data-theme="light"] .erp-modal-close-btn:hover {
  background: #fee2e2 !important;
  background-color: #fee2e2 !important;
  border-color: #ef4444 !important;
  color: #dc2626 !important;
  transform: rotate(90deg) scale(1.05) !important;
}

/* ==========================================
   JQUERY UI DATEPICKER LIGHT MODE OVERRIDES
   ========================================== */
html.light-theme .ui-datepicker,
html[data-theme="light"] .ui-datepicker,
:root.light-theme .ui-datepicker {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12) !important;
  color: #0f172a !important;
  font-family: inherit !important;
}

html.light-theme .ui-datepicker-header,
html[data-theme="light"] .ui-datepicker-header {
  background: #f8fafc !important;
  background-color: #f8fafc !important;
  border: none !important;
  border-bottom: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  border-radius: 8px 8px 0 0 !important;
}

html.light-theme .ui-datepicker-title,
html[data-theme="light"] .ui-datepicker-title {
  color: #0f172a !important;
  font-weight: 700 !important;
}

html.light-theme .ui-datepicker-title select,
html[data-theme="light"] .ui-datepicker-title select {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

html.light-theme .ui-datepicker-prev,
html.light-theme .ui-datepicker-next,
html[data-theme="light"] .ui-datepicker-prev,
html[data-theme="light"] .ui-datepicker-next {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
  border-radius: 6px !important;
}

html.light-theme .ui-datepicker-prev:hover,
html.light-theme .ui-datepicker-next:hover,
html[data-theme="light"] .ui-datepicker-prev:hover,
html[data-theme="light"] .ui-datepicker-next:hover {
  background: #f1f5f9 !important;
  border-color: #6366f1 !important;
  color: #4f46e5 !important;
}

html.light-theme .ui-datepicker-prev::after,
html.light-theme .ui-datepicker-next::after,
html[data-theme="light"] .ui-datepicker-prev::after,
html[data-theme="light"] .ui-datepicker-next::after {
  color: #475569 !important;
}

html.light-theme .ui-datepicker-calendar th,
html[data-theme="light"] .ui-datepicker-calendar th {
  color: #64748b !important;
  font-weight: 700 !important;
  background: transparent !important;
}

html.light-theme .ui-datepicker-calendar td a,
html[data-theme="light"] .ui-datepicker-calendar td a {
  color: #1e293b !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  background: transparent !important;
}

html.light-theme .ui-datepicker-calendar td a:hover,
html[data-theme="light"] .ui-datepicker-calendar td a:hover {
  background: #e0e7ff !important;
  color: #4338ca !important;
}

html.light-theme .ui-datepicker-calendar td.ui-datepicker-today a,
html[data-theme="light"] .ui-datepicker-calendar td.ui-datepicker-today a {
  border: 1px solid #6366f1 !important;
  color: #4338ca !important;
  font-weight: 700 !important;
}

html.light-theme .ui-datepicker-calendar td.ui-datepicker-current-day a,
html.light-theme .ui-datepicker-calendar td a.ui-state-active,
html[data-theme="light"] .ui-datepicker-calendar td.ui-datepicker-current-day a,
html[data-theme="light"] .ui-datepicker-calendar td a.ui-state-active {
  background: #4f46e5 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3) !important;
}

/* Native & Flatpickr Light Mode Overrides */
html.light-theme input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator {
  filter: none !important;
  opacity: 0.75;
}

html.light-theme .flatpickr-calendar,
html[data-theme="light"] .flatpickr-calendar {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12) !important;
  color: #0f172a !important;
}
html.light-theme .flatpickr-day,
html[data-theme="light"] .flatpickr-day {
  color: #0f172a !important;
}
html.light-theme .flatpickr-day.selected,
html[data-theme="light"] .flatpickr-day.selected {
  background: #4f46e5 !important;
  color: #ffffff !important;
}

/* ==========================================
   LIGHT MODE HIGH-CONTRAST TOP STATS & KPI CARDS
   ========================================== */
html.light-theme .sales-kpi-qty,
html[data-theme="light"] .sales-kpi-qty {
  background: #ecfdf5 !important;
  border: 1px solid #a7f3d0 !important;
}
html.light-theme .sales-kpi-qty .sales-kpi-title,
html[data-theme="light"] .sales-kpi-qty .sales-kpi-title {
  color: #047857 !important;
}
html.light-theme .sales-kpi-qty .sales-kpi-val,
html[data-theme="light"] .sales-kpi-qty .sales-kpi-val {
  color: #064e3b !important;
}

html.light-theme .sales-kpi-sale,
html[data-theme="light"] .sales-kpi-sale {
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
}
html.light-theme .sales-kpi-sale .sales-kpi-title,
html[data-theme="light"] .sales-kpi-sale .sales-kpi-title {
  color: #1d4ed8 !important;
}
html.light-theme .sales-kpi-sale .sales-kpi-val,
html[data-theme="light"] .sales-kpi-sale .sales-kpi-val {
  color: #1e3a8a !important;
}

html.light-theme .sales-kpi-exchanges,
html[data-theme="light"] .sales-kpi-exchanges {
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
}
html.light-theme .sales-kpi-exchanges .sales-kpi-title,
html[data-theme="light"] .sales-kpi-exchanges .sales-kpi-title {
  color: #b45309 !important;
}
html.light-theme .sales-kpi-exchanges .sales-kpi-val,
html[data-theme="light"] .sales-kpi-exchanges .sales-kpi-val {
  color: #78350f !important;
}

html.light-theme .sales-kpi-returns,
html[data-theme="light"] .sales-kpi-returns {
  background: #fff1f2 !important;
  border: 1px solid #fecdd3 !important;
}
html.light-theme .sales-kpi-returns .sales-kpi-title,
html[data-theme="light"] .sales-kpi-returns .sales-kpi-title {
  color: #be123c !important;
}
html.light-theme .sales-kpi-returns .sales-kpi-val,
html[data-theme="light"] .sales-kpi-returns .sales-kpi-val {
  color: #881337 !important;
}

html.light-theme .sales-kpi-netsale,
html[data-theme="light"] .sales-kpi-netsale {
  background: #eef2ff !important;
  border: 1px solid #c7d2fe !important;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1) !important;
}
html.light-theme .sales-kpi-netsale .sales-kpi-title,
html[data-theme="light"] .sales-kpi-netsale .sales-kpi-title {
  color: #4338ca !important;
}
html.light-theme .sales-kpi-netsale .sales-kpi-val,
html[data-theme="light"] .sales-kpi-netsale .sales-kpi-val {
  color: #312e81 !important;
}

/* ==========================================
   PREVENT CONTENT BREAK & LAYOUT OVERFLOW ISSUES
   ========================================== */
html.light-theme .sales-table-wrapper,
html.light-theme .inventory-table-wrapper,
html.light-theme .pos-orders-wrapper,
html.light-theme .ap-table-wrapper,
html[data-theme="light"] .sales-table-wrapper,
html[data-theme="light"] .inventory-table-wrapper {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  max-width: 100% !important;
}

html.light-theme .erp-tabs-wrapper,
html[data-theme="light"] .erp-tabs-wrapper {
  flex-wrap: wrap !important;
  row-gap: 12px !important;
}

html.light-theme .erp-actions-right,
html[data-theme="light"] .erp-actions-right {
  flex-wrap: wrap !important;
  gap: 10px !important;
}

/* ==========================================
   LOADER OVERLAY & CARD LIGHT MODE FIX
   ========================================== */
html.light-theme .erp-ajax-loader,
html.light-theme .pos-ajax-loader,
html[data-theme="light"] .erp-ajax-loader,
html[data-theme="light"] .pos-ajax-loader,
.light-theme .erp-ajax-loader,
.light-theme .pos-ajax-loader {
  background: rgba(241, 245, 249, 0.85) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

html.light-theme .erp-creative-loader-card,
html[data-theme="light"] .erp-creative-loader-card,
.light-theme .erp-creative-loader-card {
  background: #ffffff !important;
  border: 1px solid rgba(203, 213, 225, 0.9) !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.9) !important;
}

html.light-theme .erp-loader-title,
html[data-theme="light"] .erp-loader-title,
.light-theme .erp-loader-title {
  color: #0f172a !important;
}

html.light-theme .erp-loader-subtitle,
html[data-theme="light"] .erp-loader-subtitle,
.light-theme .erp-loader-subtitle {
  color: #475569 !important;
}

html.light-theme .erp-loader-progress-track,
html[data-theme="light"] .erp-loader-progress-track,
.light-theme .erp-loader-progress-track {
  background: rgba(0, 0, 0, 0.08) !important;
}

html.light-theme .swal2-popup.pos-creative-loader-popup,
html[data-theme="light"] .swal2-popup.pos-creative-loader-popup,
.light-theme .swal2-popup.pos-creative-loader-popup {
  background: #ffffff !important;
  border: 1px solid rgba(203, 213, 225, 0.9) !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15) !important;
}

/* ==========================================
   WORLD CLASS AI MODAL & POPUP LIGHT MODE DESIGN
   ========================================== */

/* 1. Backdrop Overlays */
html.light-theme div[id*="-modal"],
html.light-theme #pos-return-modal,
html.light-theme #pos-exchange-modal,
html.light-theme #pos-credit-note-modal,
html.light-theme #pos-close-register-modal,
html.light-theme #pos-open-register-modal,
html.light-theme #pos-coupons-modal,
html.light-theme #erp-quick-adjust-modal,
html.light-theme #erp-import-modal,
html.light-theme #erp-stock-modal-overlay,
html.light-theme #erp-wh-stock-modal,
html.light-theme #import-sku-modal,
html.light-theme .modal-backdrop,
html[data-theme="light"] div[id*="-modal"],
html[data-theme="light"] #pos-return-modal,
html[data-theme="light"] #pos-exchange-modal,
html[data-theme="light"] #pos-credit-note-modal,
html[data-theme="light"] #pos-close-register-modal,
html[data-theme="light"] #pos-open-register-modal,
html[data-theme="light"] #pos-coupons-modal,
html[data-theme="light"] #erp-quick-adjust-modal,
html[data-theme="light"] #erp-import-modal,
html[data-theme="light"] #erp-stock-modal-overlay,
html[data-theme="light"] #erp-wh-stock-modal,
html[data-theme="light"] #import-sku-modal,
.light-theme div[id*="-modal"] {
  background: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* 2. Modal Card Containers */
html.light-theme div[id*="-modal"] > div,
html.light-theme #pos-return-modal > div,
html.light-theme #pos-exchange-modal > div,
html.light-theme #pos-credit-note-modal > div,
html.light-theme #pos-close-register-modal > div,
html.light-theme #pos-open-register-modal > div,
html.light-theme #pos-coupons-modal > div,
html.light-theme #erp-quick-adjust-modal > div,
html.light-theme #erp-import-modal > div,
html.light-theme #erp-stock-modal-overlay > div,
html.light-theme #erp-wh-stock-modal > div,
html.light-theme #import-sku-modal > div,
html.light-theme .modal-content,
html.light-theme .pos-modal-card,
html[data-theme="light"] div[id*="-modal"] > div,
html[data-theme="light"] .modal-content,
.light-theme div[id*="-modal"] > div {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(203, 213, 225, 0.9) !important;
  box-shadow: 0 25px 60px -12px rgba(15, 23, 42, 0.18), 0 0 1px rgba(0, 0, 0, 0.05) !important;
  color: #0f172a !important;
  border-radius: 20px !important;
}

/* 3. Modal Headers & Titles */
html.light-theme div[id*="-modal"] div[style*="border-bottom"],
html.light-theme .modal-header,
html[data-theme="light"] div[id*="-modal"] div[style*="border-bottom"],
html[data-theme="light"] .modal-header,
.light-theme div[id*="-modal"] div[style*="border-bottom"] {
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.06) 0%, #ffffff 100%) !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

html.light-theme div[id*="-modal"] h3,
html.light-theme div[id*="-modal"] h4,
html.light-theme .pos-modal-title,
html.light-theme .modal-title,
html[data-theme="light"] div[id*="-modal"] h3,
html[data-theme="light"] div[id*="-modal"] h4,
html[data-theme="light"] .pos-modal-title,
html[data-theme="light"] .modal-title,
.light-theme div[id*="-modal"] h3 {
  color: #0f172a !important;
  font-weight: 700 !important;
}

/* 4. Modal Footers (Clean Off-White Finish) */
html.light-theme div[class*="-footer"],
html.light-theme div[style*="border-top"],
html.light-theme .modal-footer,
html.light-theme .return-modal-footer,
html.light-theme .exchange-modal-footer,
html.light-theme .credit-note-modal-footer,
html[data-theme="light"] div[class*="-footer"],
html[data-theme="light"] .modal-footer,
.light-theme div[class*="-footer"] {
  background: #f8fafc !important;
  background-color: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
}

/* 5. Modal Cancel & Close Buttons */
html.light-theme .btn-cancel-modal,
html.light-theme button[id*="btn-cancel"],
html.light-theme button[id*="btn-close"],
html[data-theme="light"] .btn-cancel-modal,
html[data-theme="light"] button[id*="btn-cancel"],
html[data-theme="light"] button[id*="btn-close"],
.light-theme .btn-cancel-modal {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  padding: 9px 20px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.2s ease !important;
}

html.light-theme .btn-cancel-modal:hover,
html.light-theme button[id*="btn-cancel"]:hover,
html[data-theme="light"] .btn-cancel-modal:hover,
html[data-theme="light"] button[id*="btn-cancel"]:hover,
.light-theme .btn-cancel-modal:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

html.light-theme #btn-close-return-modal,
html.light-theme button[id*="-modal-x"],
html[data-theme="light"] #btn-close-return-modal,
html[data-theme="light"] button[id*="-modal-x"],
.light-theme #btn-close-return-modal {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #64748b !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html.light-theme #btn-close-return-modal:hover,
html.light-theme button[id*="-modal-x"]:hover,
html[data-theme="light"] #btn-close-return-modal:hover,
html[data-theme="light"] button[id*="-modal-x"]:hover {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #ef4444 !important;
}

/* 6. Form Controls & Inputs Inside Modals */
html.light-theme div[id*="-modal"] input[type="text"],
html.light-theme div[id*="-modal"] input[type="number"],
html.light-theme div[id*="-modal"] select,
html.light-theme div[id*="-modal"] textarea,
html.light-theme #return-invoice-no,
html[data-theme="light"] div[id*="-modal"] input[type="text"],
html[data-theme="light"] div[id*="-modal"] input[type="number"],
html[data-theme="light"] div[id*="-modal"] select,
html[data-theme="light"] div[id*="-modal"] textarea,
html[data-theme="light"] #return-invoice-no,
.light-theme div[id*="-modal"] input[type="text"] {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

html.light-theme div[id*="-modal"] input::placeholder,
html.light-theme div[id*="-modal"] textarea::placeholder,
html[data-theme="light"] div[id*="-modal"] input::placeholder,
html[data-theme="light"] div[id*="-modal"] textarea::placeholder {
  color: #94a3b8 !important;
}

html.light-theme div[id*="-modal"] input:focus,
html.light-theme div[id*="-modal"] select:focus,
html.light-theme div[id*="-modal"] textarea:focus,
html[data-theme="light"] div[id*="-modal"] input:focus,
html[data-theme="light"] div[id*="-modal"] select:focus,
html[data-theme="light"] div[id*="-modal"] textarea:focus {
  background: #ffffff !important;
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

html.light-theme div[id*="-modal"] .fa-search,
html[data-theme="light"] div[id*="-modal"] .fa-search {
  color: #64748b !important;
}

/* 7. Inner Cards & Tables inside Modals */
html.light-theme div[id*="-modal"] .return-modal-table-wrapper,
html.light-theme div[id*="-modal"] div[style*="background: var(--pos-bg)"],
html[data-theme="light"] div[id*="-modal"] .return-modal-table-wrapper,
html[data-theme="light"] div[id*="-modal"] div[style*="background: var(--pos-bg)"] {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
}

html.light-theme div[id*="-modal"] table th,
html[data-theme="light"] div[id*="-modal"] table th {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

html.light-theme div[id*="-modal"] table td,
html[data-theme="light"] div[id*="-modal"] table td {
  color: #0f172a !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

/* 8. SweetAlert AI Popups Light Mode */
html.light-theme .swal2-popup,
html[data-theme="light"] .swal2-popup {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(203, 213, 225, 0.9) !important;
  box-shadow: 0 25px 60px -12px rgba(15, 23, 42, 0.18) !important;
  border-radius: 24px !important;
}

html.light-theme .swal2-title,
html.light-theme .swal2-html-container,
html.light-theme .swal2-content,
html[data-theme="light"] .swal2-title,
html[data-theme="light"] .swal2-html-container,
html[data-theme="light"] .swal2-content {
  color: #0f172a !important;
}

html.light-theme .swal2-input,
html.light-theme .swal2-textarea,
html.light-theme .swal2-select,
html[data-theme="light"] .swal2-input,
html[data-theme="light"] .swal2-textarea,
html[data-theme="light"] .swal2-select {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  border-radius: 10px !important;
}

html.light-theme .swal2-cancel,
html[data-theme="light"] .swal2-cancel {
  background: #ffffff !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 10px !important;
}

html.light-theme .swal2-close,
html[data-theme="light"] .swal2-close {
  color: #64748b !important;
}

html.light-theme .pos-top-right-toast,
html[data-theme="light"] .pos-top-right-toast {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12) !important;
}

/* Universal Modal Content & Cards Light Mode Fix */
html.light-theme .erp-modal-content,
html.light-theme div[id*="-modal"] > div,
html[data-theme="light"] .erp-modal-content,
html[data-theme="light"] div[id*="-modal"] > div,
.light-theme .erp-modal-content,
.light-theme div[id*="-modal"] > div {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(203, 213, 225, 0.9) !important;
  box-shadow: 0 25px 60px -12px rgba(15, 23, 42, 0.18) !important;
  color: #0f172a !important;
}

html.light-theme div[id*="-modal"] .pos-modal-body,
html[data-theme="light"] div[id*="-modal"] .pos-modal-body,
.light-theme div[id*="-modal"] .pos-modal-body {
  background: #ffffff !important;
  color: #0f172a !important;
}

html.light-theme div[id*="-modal"] h3,
html.light-theme div[id*="-modal"] h4,
html[data-theme="light"] div[id*="-modal"] h3,
html[data-theme="light"] div[id*="-modal"] h4,
.light-theme div[id*="-modal"] h3 {
  color: #0f172a !important;
}

html.light-theme div[id*="-modal"] label,
html[data-theme="light"] div[id*="-modal"] label,
.light-theme div[id*="-modal"] label {
  color: #475569 !important;
}

html.light-theme #cn-multi-select-container,
html.light-theme #exch-multi-select-container,
html[data-theme="light"] #cn-multi-select-container,
html[data-theme="light"] #exch-multi-select-container {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
}

html.light-theme #cn-multi-select-dropdown,
html.light-theme #exch-multi-select-dropdown,
html[data-theme="light"] #cn-multi-select-dropdown,
html[data-theme="light"] #exch-multi-select-dropdown {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15) !important;
}

/* ==========================================
   PRODUCT SEARCH & CUSTOMER SEARCH DROPDOWNS LIGHT MODE FIX
   ========================================== */
html.light-theme #product-search-results,
html.light-theme #customer-search-results,
html[data-theme="light"] #product-search-results,
html[data-theme="light"] #customer-search-results,
.light-theme #product-search-results,
.light-theme #customer-search-results {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 15px 40px rgba(15, 23, 42, 0.16) !important;
  border-radius: 12px !important;
}

html.light-theme #product-search-results .search-result-item,
html[data-theme="light"] #product-search-results .search-result-item,
.light-theme #product-search-results .search-result-item {
  border-bottom: 1px solid #f1f5f9 !important;
}

html.light-theme #product-search-results .search-result-item:hover,
html[data-theme="light"] #product-search-results .search-result-item:hover,
.light-theme #product-search-results .search-result-item:hover {
  background: #f8fafc !important;
}

html.light-theme #product-search-results .search-result-item div,
html[data-theme="light"] #product-search-results .search-result-item div,
.light-theme #product-search-results .search-result-item div {
  color: #0f172a !important;
}

html.light-theme #product-search-results .search-item-title,
html.light-theme #product-search-results div[style*="font-weight: 600"],
html.light-theme #product-search-results div[style*="font-weight: 700"],
html[data-theme="light"] #product-search-results .search-item-title,
.light-theme #product-search-results .search-item-title {
  color: #0f172a !important;
  font-weight: 700 !important;
}

html.light-theme #product-search-results .search-item-variant,
html.light-theme #product-search-results div[style*="font-size: 11px"],
html.light-theme #product-search-results div[style*="font-size: 12px"],
html.light-theme #product-search-results .pos-search-result-meta,
html.light-theme #product-search-results .meta-barcode,
html[data-theme="light"] #product-search-results .search-item-variant,
html[data-theme="light"] #product-search-results .pos-search-result-meta,
html[data-theme="light"] #product-search-results .meta-barcode,
.light-theme #product-search-results .search-item-variant {
  color: #475569 !important;
  font-weight: 600 !important;
}

html.light-theme #product-search-results .meta-stock.meta-wh,
html[data-theme="light"] #product-search-results .meta-stock.meta-wh {
  background: rgba(99, 102, 241, 0.08) !important;
  color: #4338ca !important;
  border: 1px solid rgba(99, 102, 241, 0.25) !important;
  font-weight: 700 !important;
}

html.light-theme #product-search-results .meta-stock.meta-out,
html[data-theme="light"] #product-search-results .meta-stock.meta-out {
  background: rgba(16, 185, 129, 0.08) !important;
  color: #047857 !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
  font-weight: 700 !important;
}

/* ==========================================
   HIGH CONTRAST BEST IN CLASS POS SUMMARY UI
   ========================================== */
html.light-theme .summary-line span,
html[data-theme="light"] .summary-line span {
  color: #334155 !important;
  font-weight: 600 !important;
}

html.light-theme .summary-line strong,
html[data-theme="light"] .summary-line strong {
  color: #0f172a !important;
  font-weight: 800 !important;
}

html.light-theme #summary-total,
html[data-theme="light"] #summary-total {
  color: #4f46e5 !important;
  font-weight: 900 !important;
  font-size: 26px !important;
}

html.light-theme .btn-payment:not(.active),
html[data-theme="light"] .btn-payment:not(.active) {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #1e293b !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

html.light-theme .btn-payment.active,
html[data-theme="light"] .btn-payment.active {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
  color: #ffffff !important;
  border: 1px solid #4f46e5 !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35) !important;
}

html.light-theme .btn-payment.cash.active,
html[data-theme="light"] .btn-payment.cash.active {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  border: 1px solid #059669 !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
}

/* ==========================================
   VIBRANT & ELEGANT LIGHT MODE POS ENHANCEMENTS
   ========================================== */

/* 1. Vibrant Elegant Background in Light Mode */
html.light-theme .pos-container,
html.light-theme .pos-body,
html.light-theme .pos-workspace,
html.light-theme .pos-main,
html[data-theme="light"] .pos-container,
html[data-theme="light"] .pos-body,
html[data-theme="light"] .pos-workspace,
html[data-theme="light"] .pos-main {
  background: radial-gradient(circle at 15% 15%, rgba(99, 102, 241, 0.05) 0%, transparent 40%),
              radial-gradient(circle at 85% 85%, rgba(168, 85, 247, 0.04) 0%, transparent 40%),
              #f8fafc !important;
}

/* 2. Top Search Inputs & Contact Add: Thin Light Border & ZERO Shadow in Light Mode ONLY */
html.light-theme .barcode-search-wrapper,
html.light-theme #pos-customer-search-wrapper,
html.light-theme .input-wrapper,
html.light-theme .pos-search-row .barcode-search-wrapper,
html.light-theme .pos-left .barcode-search-wrapper,
html[data-theme="light"] .barcode-search-wrapper,
html[data-theme="light"] #pos-customer-search-wrapper,
html[data-theme="light"] .input-wrapper,
html[data-theme="light"] .pos-search-row .barcode-search-wrapper,
html[data-theme="light"] .pos-left .barcode-search-wrapper {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1.5px solid #94a3b8 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 12px !important;
  transition: border-color 0.2s ease-in-out !important;
}

html.light-theme .barcode-search-wrapper:focus-within,
html.light-theme #pos-customer-search-wrapper:focus-within,
html.light-theme .pos-search-row .barcode-search-wrapper:focus-within,
html[data-theme="light"] .barcode-search-wrapper:focus-within,
html[data-theme="light"] #pos-customer-search-wrapper:focus-within,
html[data-theme="light"] .pos-search-row .barcode-search-wrapper:focus-within {
  border-color: #4f46e5 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
}

html.light-theme #pos-product-search,
html.light-theme #pos-customer-search,
html.light-theme .barcode-search-wrapper input,
html[data-theme="light"] #pos-product-search,
html[data-theme="light"] #pos-customer-search,
html[data-theme="light"] .barcode-search-wrapper input {
  background: transparent !important;
  background-color: transparent !important;
  color: #0f172a !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  font-weight: 600 !important;
}

html.light-theme #pos-product-search::placeholder,
html.light-theme #pos-customer-search::placeholder,
html[data-theme="light"] #pos-product-search::placeholder,
html[data-theme="light"] #pos-customer-search::placeholder {
  color: #64748b !important;
  opacity: 1 !important;
}

/* Contact Add Button inside Customer Search (Thin Light Border & No Shadow in Light Mode) */
html.light-theme .btn-add-customer,
html.light-theme #pos-customer-search-wrapper .btn-add-customer,
html[data-theme="light"] .btn-add-customer,
html[data-theme="light"] #pos-customer-search-wrapper .btn-add-customer {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #4f46e5 !important;
  box-shadow: none !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

html.light-theme .btn-add-customer:hover,
html.light-theme #pos-customer-search-wrapper .btn-add-customer:hover,
html[data-theme="light"] .btn-add-customer:hover,
html[data-theme="light"] #pos-customer-search-wrapper .btn-add-customer:hover {
  background: #4f46e5 !important;
  color: #ffffff !important;
  border-color: #4f46e5 !important;
  box-shadow: none !important;
}

/* Header Desktop Contact Pill in Light Mode (Border & Style like ERP Header) */
html.light-theme .pos-desktop-contact,
html[data-theme="light"] .pos-desktop-contact {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1.5px solid #94a3b8 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  filter: none !important;
  border-radius: 30px !important;
  color: #0f172a !important;
  padding: 6px 16px !important;
}

html.light-theme .pos-desktop-contact a,
html[data-theme="light"] .pos-desktop-contact a {
  color: #0f172a !important;
  font-weight: 600 !important;
}

html.light-theme .pos-desktop-contact span,
html[data-theme="light"] .pos-desktop-contact span {
  color: #475569 !important;
  font-weight: 600 !important;
}

html.light-theme .pos-desktop-contact i,
html[data-theme="light"] .pos-desktop-contact i {
  background: rgba(79, 70, 229, 0.1) !important;
  color: #4f46e5 !important;
}

/* Sidebar Social Icons in Light Mode (Border & Shadow) */
html.light-theme .pos-social-icon,
html[data-theme="light"] .pos-social-icon {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
}

/* 3. Ultra Vibrant & Elegant Action Buttons (Permanent Solid Filled Hover Styles) */

/* Clear Cart */
html.light-theme .btn-clear-cart,
html[data-theme="light"] .btn-clear-cart {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  padding: 10px 18px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35) !important;
}

html.light-theme .btn-clear-cart:hover,
html[data-theme="light"] .btn-clear-cart:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(239, 68, 68, 0.5) !important;
  transform: translateY(-2px) !important;
}

/* Hold Orders */
html.light-theme #posBtnHeldOrders,
html[data-theme="light"] #posBtnHeldOrders {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35) !important;
}

html.light-theme #posBtnHeldOrders i,
html[data-theme="light"] #posBtnHeldOrders i {
  color: #ffffff !important;
}

html.light-theme #posBtnHeldOrders:hover,
html[data-theme="light"] #posBtnHeldOrders:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.5) !important;
  transform: translateY(-2px) !important;
}

/* Returns */
html.light-theme #btn-open-return-modal,
html[data-theme="light"] #btn-open-return-modal {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35) !important;
}

html.light-theme #btn-open-return-modal i,
html[data-theme="light"] #btn-open-return-modal i {
  color: #ffffff !important;
}

html.light-theme #btn-open-return-modal:hover,
html[data-theme="light"] #btn-open-return-modal:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.5) !important;
  transform: translateY(-2px) !important;
}

/* Exchanges */
html.light-theme #btn-open-exchange-modal,
html[data-theme="light"] #btn-open-exchange-modal {
  background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.35) !important;
}

html.light-theme #btn-open-exchange-modal i,
html[data-theme="light"] #btn-open-exchange-modal i {
  color: #ffffff !important;
}

html.light-theme #btn-open-exchange-modal:hover,
html[data-theme="light"] #btn-open-exchange-modal:hover {
  background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(168, 85, 247, 0.5) !important;
  transform: translateY(-2px) !important;
}

/* Credit Notes */
html.light-theme #btn-open-credit-note-modal,
html[data-theme="light"] #btn-open-credit-note-modal {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35) !important;
}

html.light-theme #btn-open-credit-note-modal i,
html[data-theme="light"] #btn-open-credit-note-modal i {
  color: #ffffff !important;
}

html.light-theme #btn-open-credit-note-modal:hover,
html[data-theme="light"] #btn-open-credit-note-modal:hover {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.5) !important;
  transform: translateY(-2px) !important;
}

/* ==========================================
   THERMAL INVOICE / RECEIPT CLEANUP IN LIGHT MODE
   ========================================== */
html.light-theme .modluk-thermal-print,
html[data-theme="light"] .modluk-thermal-print,
.modluk-thermal-print {
  background: #ffffff !important;
  color: #000000 !important;
}

html.light-theme .modluk-thermal-print *,
html[data-theme="light"] .modluk-thermal-print *,
.modluk-thermal-print * {
  color: #000000 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

html.light-theme .modluk-thermal-print table,
html.light-theme .modluk-thermal-print tr,
html.light-theme .modluk-thermal-print th,
html.light-theme .modluk-thermal-print td,
html.light-theme .modluk-thermal-print div,
html[data-theme="light"] .modluk-thermal-print table,
html[data-theme="light"] .modluk-thermal-print tr,
html[data-theme="light"] .modluk-thermal-print th,
html[data-theme="light"] .modluk-thermal-print td,
html[data-theme="light"] .modluk-thermal-print div,
.modluk-thermal-print table,
.modluk-thermal-print tr,
.modluk-thermal-print th,
.modluk-thermal-print td {
  border: none !important;
  outline: none !important;
  background: transparent !important;
}

html.light-theme .thermal-title,
html[data-theme="light"] .thermal-title,
.thermal-title {
  border-top: 1px dashed #000000 !important;
  border-bottom: 1px dashed #000000 !important;
}

html.light-theme .thermal-items-table th,
html[data-theme="light"] .thermal-items-table th,
.thermal-items-table th {
  border-top: 1px dashed #000000 !important;
  border-bottom: none !important;
}

html.light-theme .thermal-divider,
html[data-theme="light"] .thermal-divider,
.thermal-divider {
  border-top: 1px dashed #000000 !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
}

html.light-theme .thermal-savings,
html[data-theme="light"] .thermal-savings,
.thermal-savings {
  border-top: 1px dashed #000000 !important;
  border-bottom: 1px dashed #000000 !important;
}

html.light-theme .thermal-tax-summary th,
html[data-theme="light"] .thermal-tax-summary th,
.thermal-tax-summary th {
  border-bottom: 1px dashed #000000 !important;
  border-top: none !important;
}