/* GohPOS Theme System — Light & Dark */

/* ===== LIGHT THEME (Default) ===== */
:root,
[data-bs-theme="light"] {
  --pos-primary: #0D9B7A;
  --pos-primary-hover: #0B8568;
  --pos-primary-light: #E8F5F1;
  --pos-primary-rgb: 13, 155, 122;

  --pos-surface: #FFFFFF;
  --pos-bg: #F0F2F5;
  --pos-sidebar-bg: #FFFFFF;

  --pos-text: #1A1D21;
  --pos-text-muted: #6B7280;

  --pos-border: #E5E7EB;

  --pos-success: #10B981;
  --pos-success-hover: #0DA472;
  --pos-danger: #EF4444;
  --pos-danger-hover: #DC2626;
  --pos-warning: #F59E0B;

  --pos-keypad-bg: #F0F2F5;
  --pos-keypad-btn: #FFFFFF;
  --pos-keypad-hover: #E5E7EB;
  --pos-keypad-active: #D1D5DB;
  --pos-keypad-text: #1A1D21;

  --pos-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  --pos-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --pos-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1);

  --pos-radius-sm: 8px;
  --pos-radius: 12px;
  --pos-radius-lg: 16px;

  --pos-transition: 0.15s ease;

  --pos-topbar-bg: #1A1D21;
  --pos-topbar-text: #F3F4F6;

  --pos-highlight-bg: #E8F5F1;
  --pos-highlight-anim: #0D9B7A;

  --pos-modal-backdrop: rgba(0, 0, 0, 0.5);

  --pos-multiplier-bg: #1A1D21;
  --pos-multiplier-active: #0D9B7A;
}

/* ===== DARK THEME ===== */
[data-bs-theme="dark"] {
  --pos-primary: #10B981;
  --pos-primary-hover: #34D399;
  --pos-primary-light: #1A2E28;
  --pos-primary-rgb: 16, 185, 129;

  --pos-surface: #1E2028;
  --pos-bg: #13151A;
  --pos-sidebar-bg: #1E2028;

  --pos-text: #F3F4F6;
  --pos-text-muted: #9CA3AF;

  --pos-border: #374151;

  --pos-success: #10B981;
  --pos-success-hover: #34D399;
  --pos-danger: #F87171;
  --pos-danger-hover: #FCA5A5;
  --pos-warning: #FBBF24;

  --pos-keypad-bg: #13151A;
  --pos-keypad-btn: #2D3039;
  --pos-keypad-hover: #3D4049;
  --pos-keypad-active: #4B5058;
  --pos-keypad-text: #F3F4F6;

  --pos-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  --pos-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.3);
  --pos-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4);

  --pos-topbar-bg: #0D0E12;
  --pos-topbar-text: #F3F4F6;

  --pos-highlight-bg: #1A2E28;
  --pos-highlight-anim: #10B981;

  --pos-modal-backdrop: rgba(0, 0, 0, 0.7);

  --pos-multiplier-bg: #2D3039;
  --pos-multiplier-active: #10B981;
}

/* ===== BASE STYLES ===== */
body {
  background-color: var(--pos-bg) !important;
  color: var(--pos-text);
  transition: background-color var(--pos-transition), color var(--pos-transition);
}

/* Override Bootstrap's bg-dull with theme-aware background */
.bg-dull {
  background-color: var(--pos-bg) !important;
}

/* Theme toggle button */
.theme-toggle {
  background: none;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--pos-radius-sm);
  color: var(--pos-topbar-text);
  padding: 0.4rem 0.65rem;
  cursor: pointer;
  transition: all var(--pos-transition);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.theme-toggle:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.1);
}

/* Light theme: show moon icon, hide sun icon */
[data-bs-theme="light"] .theme-toggle .fa-sun { display: none; }
[data-bs-theme="light"] .theme-toggle .fa-moon { display: inline; }

/* Dark theme: show sun icon, hide moon icon */
[data-bs-theme="dark"] .theme-toggle .fa-sun { display: inline; }
[data-bs-theme="dark"] .theme-toggle .fa-moon { display: none; }

/* Form controls — theme-aware */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: var(--pos-surface);
  border-color: var(--pos-border);
  color: var(--pos-text);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background-color: var(--pos-surface);
  border-color: var(--pos-primary);
  color: var(--pos-text);
  box-shadow: 0 0 0 0.2rem rgba(var(--pos-primary-rgb), 0.25);
}

/* Modal theme support */
[data-bs-theme="dark"] .modal-content {
  background-color: var(--pos-surface);
  border-color: var(--pos-border);
}

[data-bs-theme="dark"] .modal-header {
  border-bottom-color: var(--pos-border);
}

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

/* Bootstrap overrides for dark mode */
[data-bs-theme="dark"] .bg-white {
  background-color: var(--pos-surface) !important;
}

[data-bs-theme="dark"] .border-top {
  border-color: var(--pos-border) !important;
}

[data-bs-theme="dark"] .btn-dark {
  background-color: var(--pos-multiplier-bg);
  border-color: var(--pos-multiplier-bg);
}

[data-bs-theme="dark"] .input-group-text {
  background-color: var(--pos-surface);
  border-color: var(--pos-border);
  color: var(--pos-text-muted);
}