/* ============================================
   Hospitality OS — Theme System
   Global light/dark design tokens.
   Applied on <html data-theme="light|dark">.
   ============================================ */

/* ---------- Light (default) ---------- */
:root,
html[data-theme="light"] {
  --bg: #F8FAFC;
  --surface: #FFFFFF;
  --surface-2: #F1F5F9;
  --elevated: #FFFFFF;
  --overlay: rgba(15, 23, 42, 0.5);

  --navy: #0B1220;
  --brand: #14B8A6;
  --brand-light: #2DD4BF;
  --accent: #F59E0B;
  --accent-dark: #D97706;

  --text-primary: #0F172A;
  --text-secondary: #64748B;
  --text-muted: #94A3B8;
  --border: #E2E8F0;
  --border-strong: #CBD5E1;

  --success: #22C55E;
  --warning: #F59E0B;
  --error: #EF4444;
  --info: #3B82F6;
  --violet: #7C3AED;

  /* Soft tint backgrounds for status chips/cards */
  --success-bg: #D1FAE5;
  --warning-bg: #FEF3C7;
  --error-bg: #FEE2E2;
  --info-bg: #DBEAFE;
  --violet-bg: #EDE9FE;
  --glow-accent: rgba(245, 158, 11, 0.3);

  /* Legacy aliases consumed by existing inline styles */
  --primary: #0B1220;
  --primary-light: #14B8A6;
  --secondary: #F59E0B;
  --gray-50: #F8FAFC; --gray-100: #F1F5F9; --gray-200: #E2E8F0;
  --gray-300: #CBD5E1; --gray-400: #94A3B8; --gray-500: #64748B;
  --gray-600: #475569; --gray-700: #334155; --gray-800: #1E293B; --gray-900: #0F172A;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
  --shadow-lg: 0 8px 30px rgba(15, 23, 42, 0.12);
  --scroll-thumb: #CBD5E1;

  color-scheme: light;
}

/* ---------- Dark ---------- */
html[data-theme="dark"] {
    --bg: #050B14;
    --surface: #0A1422;
    --surface-2: #101C2B;
    --elevated: #101C2B;
    --overlay: rgba(0, 0, 0, 0.65);

    --navy: #050B14;
    --brand: #00C7B7;
    --brand-light: #2DE3D3;
    --accent: #D4A84F;
    --accent-dark: #E7C675;

    --text-primary: #F5F7FA;
    --text-secondary: #94A3B8;
    --text-muted: #5B6B7E;
    --border: #1E2B3A;
    --border-strong: #2A3A4D;

    --success: #22C55E;
    --warning: #F59E0B;
    --error: #EF4444;
    --info: #3B82F6;
    --violet: #A78BFA;

    /* Soft tint backgrounds for status chips/cards */
    --success-bg: rgba(34, 197, 94, 0.16);
    --warning-bg: rgba(245, 158, 11, 0.16);
    --error-bg: rgba(239, 68, 68, 0.16);
    --info-bg: rgba(59, 130, 246, 0.16);
    --violet-bg: rgba(124, 58, 237, 0.18);
    --glow-accent: rgba(212, 168, 79, 0.35);

    /* Legacy aliased */
    --primary: #00C7B7;
    --primary-light: #14DDD3;
    --secondary: #D4A84F;
    --gray-50: #101C2B; --gray-100: #0A1422; --gray-200: #1E2B3A;
    --gray-300: #2A3A4D; --gray-400: #4A5A70; --gray-500: #94A3B8;
    --gray-600: #A8B6C8; --gray-700: #CBD5E1; --gray-800: #E2E8F0; --gray-900: #F5F7FA;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.6);
    --scroll-thumb: #2A3A4D;

    color-scheme: dark;
}

/* Re-map harder-to-inherit legacy surfacing tokens */
html[data-theme="dark"] {
    --topbar-bg: var(--surface);
    --page-bg: var(--bg);
    --bottom-nav-bg: var(--elevated);
    --bottom-nav-border: var(--border);
}

/* ---------- Base surfaces ---------- */
html[data-theme="dark"] body {
    background: var(--bg) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] {
    background: var(--bg-brand);
}

/* ---------- Scrollbars ---------- */
html[data-theme="dark"] * {
    scrollbar-color: var(--scroll-thumb) transparent;
}

/* ---------- Shared UI: tables, cards, forms ---------- */
html[data-theme="dark"] .card,
html[data-theme="dark"] .table,
html[data-theme="dark"] .table > thead,
html[data-theme="dark"] .table > tbody > tr,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background-color: var(--surface);
    border-color: var(--border);
    color: var(--text-primary);
}

/* Bootstrap 5.3 paints .table cells with --bs-table-bg, which stays
   #fff in dark mode and overrides the tr/table background above. */
html[data-theme="dark"] .table {
    --bs-table-bg: var(--surface);
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--border);
    --bs-table-striped-bg: var(--surface-2);
    --bs-table-striped-color: var(--text-primary);
    --bs-table-hover-bg: var(--surface-2);
    --bs-table-hover-color: var(--text-primary);
    --bs-table-active-bg: var(--surface-2);
    --bs-table-active-color: var(--text-primary);
}

html[data-theme="dark"] .table th {
    border-color: var(--border);
    color: var(--text-primary);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--text-muted);
}

html[data-theme="dark"] .modal-content {
    background-color: var(--surface);
    box-shadow: var(--shadow-lg);
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
    border-color: var(--border);
    background-color: var(--surface-2);
}

html[data-theme="dark"] .card-body,
html[data-theme="dark"] .modal-body {
    background-color: var(--surface);
}

html[data-theme="dark"] .list-group-item {
    background-color: var(--surface);
    border-color: var(--border);
    color: var(--text-primary);
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .table-hover tbody tr:hover,
html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--surface-2);
    color: var(--text-primary);
}

/* ---------- Bootstrap buttons: map muted/light to vars ---------- */
html[data-theme="dark"] .btn-secondary {
    background-color: var(--surface-2);
    border-color: var(--border);
    color: var(--text-primary);
}
html[data-theme="dark"] .btn-light {
    background-color: var(--surface-2);
    border-color: var(--border);
    color: var(--text-primary);
}
html[data-theme="dark"] .btn-outline-secondary {
    border-color: var(--border-strong);
    color: var(--text-secondary);
}
html[data-theme="dark"] .btn-close {
    filter: invert(1);
}

/* ---------- Utility surfaces used across many modules ---------- */
html[data-theme="dark"] .bg-white { background-color: var(--surface) !important; }
html[data-theme="dark"] .bg-light { background-color: var(--surface-2) !important; }