/* ShopOS — light theme and shared appearance/privacy controls */

html {
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f6fb;
  --bg-2: #e9eef7;
  --sidebar-bg: #ffffff;
  --card-bg: rgba(255, 255, 255, 0.9);
  --card-border: rgba(31, 41, 55, 0.12);
  --card-hover: rgba(79, 70, 229, 0.07);
  --primary: #4f46e5;
  --primary-dark: #4338ca;
  --primary-light: #5b55d6;
  --secondary: #0891b2;
  --success: #15803d;
  --success-bg: rgba(21, 128, 61, 0.1);
  --warning: #b45309;
  --warning-bg: rgba(180, 83, 9, 0.1);
  --danger: #dc2626;
  --danger-bg: rgba(220, 38, 38, 0.09);
  --info: #0e7490;
  --info-bg: rgba(14, 116, 144, 0.1);
  --text-1: #111827;
  --text-2: #3f4c63;
  --text-3: #5f6f86;
  --border: rgba(31, 41, 55, 0.14);
  --border-light: rgba(31, 41, 55, 0.08);
  --shadow: 0 3px 18px rgba(37, 48, 70, 0.1);
  --shadow-lg: 0 14px 38px rgba(37, 48, 70, 0.16);
  --glow: 0 0 24px rgba(79, 70, 229, 0.16);
  --glow-sm: 0 0 12px rgba(79, 70, 229, 0.12);
}

html[data-theme="light"] .sidebar::before {
  background: linear-gradient(180deg, rgba(79, 70, 229, 0.055), transparent 42%);
}

html[data-theme="light"] .login-screen {
  background: radial-gradient(circle at center, #ffffff 0%, var(--bg) 72%);
}

html[data-theme="light"] .login-card,
html[data-theme="light"] .card,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .pos-panel {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

html[data-theme="light"] .card:hover,
html[data-theme="light"] .stat-card:hover {
  border-color: rgba(79, 70, 229, 0.22);
}

html[data-theme="light"] thead th,
html[data-theme="light"] .summary-box,
html[data-theme="light"] .pos-scan-row,
html[data-theme="light"] .pos-checkout-area,
html[data-theme="light"] .pos-left-footer,
html[data-theme="light"] .cart-table-wrap,
html[data-theme="light"] .pos-grid-placeholder {
  background: rgba(15, 23, 42, 0.025);
}

html[data-theme="light"] tbody tr:hover,
html[data-theme="light"] .cart-table tr:hover {
  background: rgba(79, 70, 229, 0.045);
}

html[data-theme="light"] .sidebar-nav::-webkit-scrollbar-thumb,
html[data-theme="light"] .main-content::-webkit-scrollbar-thumb,
html[data-theme="light"] .product-grid::-webkit-scrollbar-thumb,
html[data-theme="light"] .cart-table-wrap::-webkit-scrollbar-thumb {
  background: rgba(31, 41, 55, 0.18);
}

html[data-theme="light"] .btn-secondary,
html[data-theme="light"] .card-sell-pay-btn,
html[data-theme="light"] .type-btn,
html[data-theme="light"] .pos-layout .pay-btn,
html[data-theme="light"] .pos-layout .cat-pill,
html[data-theme="light"] .cart-table-qty-btn {
  background: rgba(15, 23, 42, 0.045);
}

html[data-theme="light"] .btn-secondary:hover:not(:disabled),
html[data-theme="light"] .card-sell-pay-btn:hover,
html[data-theme="light"] .pos-layout .cat-pill:hover {
  background: rgba(79, 70, 229, 0.09);
  border-color: rgba(79, 70, 229, 0.2);
}

html[data-theme="light"] .form-control,
html[data-theme="light"] .form-select,
html[data-theme="light"] .login-screen .form-control,
html[data-theme="light"] .pos-scan-input,
html[data-theme="light"] .summary-value input,
html[data-theme="light"] .pos-discount-input,
html[data-theme="light"] .cart-table input[type="number"] {
  background: rgba(255, 255, 255, 0.82) !important;
}

html[data-theme="light"] .form-select option,
html[data-theme="light"] #debts-page select option,
html[data-theme="light"] .modal select option {
  background: #ffffff;
  color: var(--text-1);
}

html[data-theme="light"] #debts-page select,
html[data-theme="light"] .modal select {
  background-color: rgba(255, 255, 255, 0.9);
}

html[data-theme="light"] .cart-table th {
  background: rgba(235, 240, 248, 0.96);
}

html[data-theme="light"] .btn-checkout-giant:disabled {
  background: #e4e9f2;
  border-color: var(--border);
}

html[data-theme="light"] .badge-gray {
  background: rgba(15, 23, 42, 0.07);
}

html[data-theme="light"] .modal-overlay,
html[data-theme="light"] .sidebar-backdrop {
  background: rgba(15, 23, 42, 0.38);
}

/* Complete light surfaces: dialogs, messages, menus and loading states */
html[data-theme="light"] body,
html[data-theme="light"] .main-content,
html[data-theme="light"] .app-shell {
  background-color: var(--bg);
  color: var(--text-1);
}

html[data-theme="light"] body,
html[data-theme="light"] button,
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  font-family: 'Cairo', 'Inter', system-ui, sans-serif;
}

html[data-theme="light"] ::selection {
  background: rgba(79, 70, 229, 0.2);
  color: #111827;
}

html[data-theme="light"] .modal {
  background: #ffffff;
  color: var(--text-1);
  border-color: rgba(31, 41, 55, 0.16);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
}

html[data-theme="light"] .modal-header {
  background: rgba(248, 250, 252, 0.96);
  border-bottom-color: var(--border);
}

html[data-theme="light"] .modal-title,
html[data-theme="light"] .modal-body {
  color: var(--text-1);
}

html[data-theme="light"] .modal-footer {
  border-top-color: var(--border);
}

html[data-theme="light"] .modal-close,
html[data-theme="light"] .hamburger-btn {
  background: rgba(15, 23, 42, 0.055);
  color: var(--text-1);
  border-color: var(--border);
}

html[data-theme="light"] .modal-close:hover {
  background: rgba(220, 38, 38, 0.1);
  color: var(--danger);
}

html[data-theme="light"] .modal::-webkit-scrollbar-thumb,
html[data-theme="light"] .scroll-y::-webkit-scrollbar-thumb,
html[data-theme="light"] .autocomplete-list::-webkit-scrollbar-thumb {
  background: rgba(31, 41, 55, 0.2);
}

html[data-theme="light"] .toast {
  background: #ffffff;
  color: var(--text-1);
  border-color: rgba(31, 41, 55, 0.14);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
}

html[data-theme="light"] .toast.success {
  border-right: 4px solid var(--success);
}

html[data-theme="light"] .toast.error {
  border-right: 4px solid var(--danger);
}

html[data-theme="light"] .toast.warning {
  border-right: 4px solid var(--warning);
}

html[data-theme="light"] .toast.info {
  border-right: 4px solid var(--info);
}

html[data-theme="light"] .toast-msg {
  color: var(--text-1);
}

html[data-theme="light"] .alert-warning {
  color: #854d0e;
  border-color: rgba(180, 83, 9, 0.24);
}

html[data-theme="light"] .alert-info {
  color: #155e75;
  border-color: rgba(14, 116, 144, 0.24);
}

html[data-theme="light"] .alert-success {
  color: #166534;
  border-color: rgba(21, 128, 61, 0.24);
}

html[data-theme="light"] .alert-danger,
html[data-theme="light"] .login-error-msg {
  color: #991b1b;
  border-color: rgba(220, 38, 38, 0.22);
}

html[data-theme="light"] .spinner-ring {
  border-color: rgba(31, 41, 55, 0.13);
  border-top-color: var(--primary);
}

html[data-theme="light"] .autocomplete-list {
  background: #ffffff;
  color: var(--text-1);
  border-color: rgba(31, 41, 55, 0.15);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16);
}

html[data-theme="light"] .autocomplete-item {
  color: var(--text-1);
  border-bottom-color: var(--border-light);
}

html[data-theme="light"] .autocomplete-item:hover,
html[data-theme="light"] .autocomplete-item.highlighted {
  background: rgba(79, 70, 229, 0.09);
}

/* Neutral interactive controls that were designed against a dark surface */
html[data-theme="light"] .source-btn,
html[data-theme="light"] .back-btn,
html[data-theme="light"] .card-pay-btn,
html[data-theme="light"] .commission-pay-btn,
html[data-theme="light"] .card-sell-pay-btn,
html[data-theme="light"] .type-btn,
html[data-theme="light"] .pos-layout .pay-btn,
html[data-theme="light"] .pos-layout .cat-pill,
html[data-theme="light"] .cart-table-qty-btn,
html[data-theme="light"] .pos-catalog-controls button {
  background: #f8fafc;
  color: var(--text-2);
  border-color: rgba(31, 41, 55, 0.15);
}

html[data-theme="light"] .source-btn:hover,
html[data-theme="light"] .back-btn:hover,
html[data-theme="light"] .card-pay-btn:hover,
html[data-theme="light"] .commission-pay-btn:hover,
html[data-theme="light"] .card-sell-pay-btn:hover,
html[data-theme="light"] .type-btn:hover,
html[data-theme="light"] .pos-layout .pay-btn:hover,
html[data-theme="light"] .pos-layout .cat-pill:hover,
html[data-theme="light"] .pos-catalog-controls button:hover {
  background: #eef2ff;
  color: var(--text-1);
  border-color: rgba(79, 70, 229, 0.28);
}

/* Strong selected states: selection must remain obvious on white surfaces. */
html[data-theme="light"] .pos-layout .pay-btn.selected,
html[data-theme="light"] .pos-layout .cat-pill.active,
html[data-theme="light"] .pos-catalog-controls button.active {
  background: var(--primary) !important;
  border-color: var(--primary-dark) !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(79, 70, 229, 0.28);
  font-weight: 800;
}

html[data-theme="light"] .card-pay-btn.selected {
  background: #7c3aed !important;
  border-color: #6d28d9 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(124, 58, 237, 0.28);
  font-weight: 800;
}

html[data-theme="light"] .commission-pay-btn.selected {
  background: #b45309 !important;
  border-color: #92400e !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(180, 83, 9, 0.28);
  font-weight: 800;
}

html[data-theme="light"] .card-sell-pay-btn.selected,
html[data-theme="light"] .type-btn.in.selected,
html[data-theme="light"] .source-btn.cash.selected {
  background: #15803d !important;
  border-color: #166534 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(21, 128, 61, 0.25);
  font-weight: 800;
}

html[data-theme="light"] .type-btn.out.selected {
  background: #dc2626 !important;
  border-color: #b91c1c !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(220, 38, 38, 0.24);
  font-weight: 800;
}

html[data-theme="light"] .source-btn.cards.selected {
  background: #7c3aed !important;
  border-color: #6d28d9 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(124, 58, 237, 0.25);
  font-weight: 800;
}

html[data-theme="light"] .debts-tab-btn.active {
  background: rgba(79, 70, 229, 0.1);
  color: var(--primary-dark);
  border-bottom-color: var(--primary);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}

html[data-theme="light"] .badge-commission {
  color: #92400e !important;
}

html[data-theme="light"] .pay-btn.selected i,
html[data-theme="light"] .card-pay-btn.selected i,
html[data-theme="light"] .commission-pay-btn.selected i,
html[data-theme="light"] .card-sell-pay-btn.selected i,
html[data-theme="light"] .type-btn.selected i,
html[data-theme="light"] .source-btn.selected i,
html[data-theme="light"] .cat-pill.active i,
html[data-theme="light"] .pos-catalog-controls button.active i {
  color: inherit !important;
  opacity: 1;
}

html[data-theme="light"] .cart-table-price-input.price-warning,
html[data-theme="light"] .item-loss-warning {
  color: var(--danger) !important;
}

/* Debt cards and secondary panels */
html[data-theme="light"] .debt-person-balance,
html[data-theme="light"] .debt-detail-balance-bar,
html[data-theme="light"] .debt-history-item,
html[data-theme="light"] .reconcile-row,
html[data-theme="light"] .pos-grid-placeholder {
  background: rgba(15, 23, 42, 0.035);
}

html[data-theme="light"] .debt-history-item:hover {
  background: rgba(79, 70, 229, 0.06);
}

html[data-theme="light"] .nav-pill.hot,
html[data-theme="light"] .badge-admin {
  color: #b91c1c;
}

html[data-theme="light"] .badge-employee {
  color: #047857;
}

html[data-theme="light"] input:disabled,
html[data-theme="light"] select:disabled,
html[data-theme="light"] textarea:disabled {
  background: #eef2f7 !important;
  color: #64748b !important;
  opacity: 1;
}

html[data-theme="light"] input[type="date"],
html[data-theme="light"] input[type="time"],
html[data-theme="light"] input[type="number"] {
  color-scheme: light;
}

/* Covers small inline panels and pagination strips used across page modules. */
html[data-theme="light"] [style*="background:rgba(255,255,255"],
html[data-theme="light"] [style*="background: rgba(255,255,255"] {
  background-color: rgba(15, 23, 42, 0.035) !important;
}

@media (max-width: 768px) {
  html[data-theme="light"] .sidebar {
    box-shadow: -8px 0 36px rgba(15, 23, 42, 0.18);
  }
}

/* Theme switch in the sidebar */
.theme-toggle {
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--card-bg);
  color: var(--text-1);
  display: flex;
  align-items: center;
  gap: 9px;
  transition: var(--t);
}

.theme-toggle:hover {
  border-color: rgba(99, 102, 241, 0.35);
  background: var(--card-hover);
}

.theme-toggle-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--warning);
  background: var(--warning-bg);
}

.theme-toggle-label {
  flex: 1;
  text-align: right;
  font-size: 12px;
  font-weight: 700;
}

.theme-toggle-state {
  width: 32px;
  height: 18px;
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.35);
  position: relative;
  transition: var(--t);
}

.theme-toggle-state::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  top: 3px;
  right: 3px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
  transition: var(--t);
}

html[data-theme="light"] .theme-toggle-state {
  background: var(--primary);
}

html[data-theme="light"] .theme-toggle-state::after {
  transform: translateX(-14px);
}

/* Reusable privacy buttons */
.privacy-toggle.is-hidden {
  border-color: rgba(245, 158, 11, 0.35);
  background: var(--warning-bg);
  color: var(--warning);
}

.privacy-toggle i {
  width: 14px;
  text-align: center;
}

.privacy-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.privacy-icon-button {
  width: 26px;
  height: 26px;
  padding: 4px;
  flex: 0 0 26px;
}

.privacy-icon-button.is-hidden {
  background: var(--warning-bg);
  color: var(--warning);
}

.privacy-mask {
  letter-spacing: 2px;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .theme-toggle-label {
    font-size: 13px;
  }
}