/* ============================================================
   Theme Engine - Color presets + Light/Dark/Auto modes
   ============================================================ */

/* ----------------------------------------
   COLOR THEMES (apply primary/accent palette)
   ---------------------------------------- */

/* Deep Indigo (default) */
:root[data-theme="deep-indigo"] {
  --primary: #4f46e5;
  --primary-dark: #4338ca;
  --primary-light: #818cf8;
  --primary-50: #eef2ff;
  --primary-100: #e0e7ff;
  --theme-grad: linear-gradient(135deg, #4f46e5 0%, #7c3aed 60%, #ec4899 100%);
}

/* Sunset Orange */
:root[data-theme="sunset-orange"] {
  --primary: #ea580c;
  --primary-dark: #c2410c;
  --primary-light: #fb923c;
  --primary-50: #fff7ed;
  --primary-100: #ffedd5;
  --theme-grad: linear-gradient(135deg, #ea580c 0%, #f97316 50%, #fbbf24 100%);
}

/* Cherry Rose */
:root[data-theme="cherry-rose"] {
  --primary: #be123c;
  --primary-dark: #9f1239;
  --primary-light: #fb7185;
  --primary-50: #fff1f2;
  --primary-100: #ffe4e6;
  --theme-grad: linear-gradient(135deg, #be123c 0%, #e11d48 50%, #f43f5e 100%);
}

/* Teal Wave */
:root[data-theme="teal-wave"] {
  --primary: #0d9488;
  --primary-dark: #0f766e;
  --primary-light: #2dd4bf;
  --primary-50: #f0fdfa;
  --primary-100: #ccfbf1;
  --theme-grad: linear-gradient(135deg, #0d9488 0%, #14b8a6 50%, #5eead4 100%);
}

/* Pastel Blush */
:root[data-theme="pastel-blush"] {
  --primary: #db2777;
  --primary-dark: #be185d;
  --primary-light: #f472b6;
  --primary-50: #fdf2f8;
  --primary-100: #fce7f3;
  --theme-grad: linear-gradient(135deg, #db2777 0%, #ec4899 60%, #f9a8d4 100%);
}

/* Pastel Lavender */
:root[data-theme="pastel-lavender"] {
  --primary: #7c3aed;
  --primary-dark: #6d28d9;
  --primary-light: #a78bfa;
  --primary-50: #f5f3ff;
  --primary-100: #ede9fe;
  --theme-grad: linear-gradient(135deg, #7c3aed 0%, #a78bfa 60%, #ddd6fe 100%);
}

/* Silver Mist */
:root[data-theme="silver-mist"] {
  --primary: #475569;
  --primary-dark: #334155;
  --primary-light: #94a3b8;
  --primary-50: #f8fafc;
  --primary-100: #f1f5f9;
  --theme-grad: linear-gradient(135deg, #475569 0%, #64748b 60%, #94a3b8 100%);
}

/* Pastel Sky */
:root[data-theme="pastel-sky"] {
  --primary: #0284c7;
  --primary-dark: #0369a1;
  --primary-light: #38bdf8;
  --primary-50: #f0f9ff;
  --primary-100: #e0f2fe;
  --theme-grad: linear-gradient(135deg, #0284c7 0%, #38bdf8 50%, #bae6fd 100%);
}

/* ----------------------------------------
   DARK MODE (applies on top of color theme)
   ---------------------------------------- */
:root[data-mode="dark"],
:root[data-mode="auto"] {
  color-scheme: light;
}

:root[data-mode="dark"] {
  --bg: #0b1120;
  --bg-soft: #111827;
  --surface: #1e293b;
  --surface-soft: #0f172a;
  --surface-2: #1e293b;
  --border: #334155;
  --border-strong: #475569;
  --text: #f1f5f9;
  --text-muted: #94a3b8;
  --text-soft: #64748b;
  --primary-50: rgba(99, 102, 241, 0.12);
  --primary-100: rgba(99, 102, 241, 0.22);

  --success-light: rgba(16, 185, 129, 0.18);
  --warning-light: rgba(245, 158, 11, 0.18);
  --danger-light: rgba(239, 68, 68, 0.18);
  --info-light: rgba(6, 182, 212, 0.18);

  --sidebar-bg: #050816;
  --sidebar-bg-soft: #0f172a;
  --sidebar-border: rgba(255, 255, 255, 0.04);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root[data-mode="auto"] {
    --bg: #0b1120;
    --bg-soft: #111827;
    --surface: #1e293b;
    --surface-soft: #0f172a;
    --surface-2: #1e293b;
    --border: #334155;
    --border-strong: #475569;
    --text: #f1f5f9;
    --text-muted: #94a3b8;
    --text-soft: #64748b;
    --primary-50: rgba(99, 102, 241, 0.12);
    --primary-100: rgba(99, 102, 241, 0.22);
    --success-light: rgba(16, 185, 129, 0.18);
    --warning-light: rgba(245, 158, 11, 0.18);
    --danger-light: rgba(239, 68, 68, 0.18);
    --info-light: rgba(6, 182, 212, 0.18);
    --sidebar-bg: #050816;
    --sidebar-bg-soft: #0f172a;
    color-scheme: dark;
  }
}

/* Dark mode component overrides */
:root[data-mode="dark"] body,
@media (prefers-color-scheme: dark) { :root[data-mode="auto"] body { background: var(--bg); } }

:root[data-mode="dark"] .card,
:root[data-mode="dark"] .card-section,
:root[data-mode="dark"] .surface,
:root[data-mode="dark"] .trip-card,
:root[data-mode="dark"] .step-card,
:root[data-mode="dark"] .stat-card,
:root[data-mode="dark"] .search-card {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

:root[data-mode="dark"] .form-control,
:root[data-mode="dark"] .form-select {
  background: var(--surface-soft);
  border-color: var(--border);
  color: var(--text);
}
:root[data-mode="dark"] .form-control::placeholder { color: var(--text-soft); }

/* Bootstrap 5 .table uses --bs-table-* variables that override our background.
   Set them to dark values so rows actually look dark in dark mode. */
:root[data-mode="dark"] .table {
  --bs-table-bg: var(--surface);
  --bs-table-color: var(--text);
  --bs-table-striped-bg: var(--surface-soft);
  --bs-table-striped-color: var(--text);
  --bs-table-hover-bg: var(--surface-soft);
  --bs-table-hover-color: var(--text);
  --bs-table-active-bg: var(--surface-soft);
  --bs-table-border-color: var(--border);
  background: var(--surface);
  color: var(--text);
}
:root[data-mode="dark"] .table > :not(caption) > * > * {
  background-color: var(--surface);
  color: var(--text);
  border-bottom-color: var(--border);
  box-shadow: none;
}
:root[data-mode="dark"] .table thead th {
  background: var(--surface-soft) !important;
  color: var(--text-muted) !important;
  border-color: var(--border);
}
:root[data-mode="dark"] .table-hover tbody tr:hover > * {
  background-color: var(--surface-soft) !important;
  color: var(--text) !important;
}
:root[data-mode="dark"] .table-responsive { background: var(--surface); }
:root[data-mode="dark"] .settings-card {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
:root[data-mode="dark"] .settings-title { color: var(--text); }
:root[data-mode="dark"] .settings-subtitle { color: var(--text-muted); }
:root[data-mode="dark"] .section-header { border-bottom-color: var(--border); }
:root[data-mode="dark"] .stat-card { background: var(--surface); border-color: var(--border); }
:root[data-mode="dark"] .stat-label { color: var(--text-muted); }
:root[data-mode="dark"] .stat-value { color: var(--text); }
:root[data-mode="dark"] .bg-light { background: var(--surface-soft) !important; color: var(--text) !important; }
:root[data-mode="dark"] code { background: var(--surface-soft); color: #fbbf24; padding: 0.15rem 0.35rem; border-radius: 4px; }
:root[data-mode="dark"] hr { border-color: var(--border); opacity: 0.4; }
:root[data-mode="dark"] .text-dark { color: var(--text) !important; }
:root[data-mode="dark"] .border, :root[data-mode="dark"] .border-top,
:root[data-mode="dark"] .border-bottom, :root[data-mode="dark"] .border-start,
:root[data-mode="dark"] .border-end { border-color: var(--border) !important; }

:root[data-mode="dark"] .btn-secondary,
:root[data-mode="dark"] .btn-outline-primary,
:root[data-mode="dark"] .btn-outline-secondary,
:root[data-mode="dark"] .btn-outline-danger,
:root[data-mode="dark"] .btn-outline-info,
:root[data-mode="dark"] .btn-outline-warning {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
:root[data-mode="dark"] .btn-outline-primary:hover { background: var(--primary-100); color: var(--primary-light); }

:root[data-mode="dark"] .dropdown-menu {
  background: var(--surface);
  border-color: var(--border);
}
:root[data-mode="dark"] .dropdown-item { color: var(--text); }
:root[data-mode="dark"] .dropdown-item:hover { background: var(--surface-soft); color: var(--text); }
:root[data-mode="dark"] .dropdown-divider { border-color: var(--border); }

:root[data-mode="dark"] .nav-modern {
  background: rgba(15, 23, 42, 0.75);
  border-bottom-color: var(--border);
}
:root[data-mode="dark"] .nav-brand { color: var(--text); }
:root[data-mode="dark"] .nav-links a { color: var(--text-muted); }
:root[data-mode="dark"] .nav-links a:hover { background: var(--surface-soft); color: var(--text); }
:root[data-mode="dark"] .nav-links a.active { background: var(--primary-100); color: var(--primary-light); }

:root[data-mode="dark"] .admin-header {
  background: var(--surface);
  border-bottom-color: var(--border);
}
:root[data-mode="dark"] .admin-header h1 { color: var(--text); }

:root[data-mode="dark"] .header-user { background: var(--surface-soft); color: var(--text); }
:root[data-mode="dark"] .footer { background: #050816; }
:root[data-mode="dark"] .alert-info { background: rgba(6,182,212,0.12); color: #67e8f9; border-color: rgba(6,182,212,0.3); }
:root[data-mode="dark"] .alert-success { background: rgba(16,185,129,0.12); color: #6ee7b7; border-color: rgba(16,185,129,0.3); }
:root[data-mode="dark"] .alert-warning { background: rgba(245,158,11,0.12); color: #fcd34d; border-color: rgba(245,158,11,0.3); }
:root[data-mode="dark"] .alert-danger { background: rgba(239,68,68,0.12); color: #fca5a5; border-color: rgba(239,68,68,0.3); }

:root[data-mode="dark"] .seat { background: var(--surface-soft); color: var(--text); border-color: var(--border-strong); }
:root[data-mode="dark"] .seat.booked { background: rgba(239,68,68,0.25); color: #fca5a5; border-color: rgba(239,68,68,0.4); }

:root[data-mode="dark"] .bus-layout {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-soft) 100%);
  border-color: var(--border);
}

/* Badge colors in dark mode — text becomes LIGHT, bg stays translucent tinted */
:root[data-mode="dark"] .badge.bg-primary   { background: rgba(99,102,241,0.22) !important;  color: #a5b4fc !important; }
:root[data-mode="dark"] .badge.bg-success   { background: rgba(16,185,129,0.20) !important;  color: #6ee7b7 !important; }
:root[data-mode="dark"] .badge.bg-warning   { background: rgba(245,158,11,0.22) !important;  color: #fcd34d !important; }
:root[data-mode="dark"] .badge.bg-danger    { background: rgba(239,68,68,0.22) !important;   color: #fca5a5 !important; }
:root[data-mode="dark"] .badge.bg-info      { background: rgba(6,182,212,0.22) !important;   color: #67e8f9 !important; }
:root[data-mode="dark"] .badge.bg-secondary { background: var(--surface-soft) !important;    color: var(--text-muted) !important; }
:root[data-mode="dark"] .badge.bg-light     { background: var(--surface-soft) !important;    color: var(--text) !important; }
:root[data-mode="dark"] .badge.bg-dark      { background: rgba(255,255,255,0.1) !important;  color: var(--text) !important; }
:root[data-mode="dark"] .text-muted { color: var(--text-muted) !important; }

:root[data-mode="dark"] hr { border-color: var(--border); opacity: 0.5; }

/* Auto mode picks up same dark styles when system prefers dark */
@media (prefers-color-scheme: dark) {
  :root[data-mode="auto"] body { background: var(--bg); color: var(--text); }
  :root[data-mode="auto"] .card,
  :root[data-mode="auto"] .card-section,
  :root[data-mode="auto"] .surface,
  :root[data-mode="auto"] .trip-card,
  :root[data-mode="auto"] .step-card,
  :root[data-mode="auto"] .stat-card,
  :root[data-mode="auto"] .search-card {
    background: var(--surface); border-color: var(--border); color: var(--text);
  }
  :root[data-mode="auto"] .form-control,
  :root[data-mode="auto"] .form-select {
    background: var(--surface-soft); border-color: var(--border); color: var(--text);
  }
  :root[data-mode="auto"] .table {
    --bs-table-bg: var(--surface);
    --bs-table-color: var(--text);
    --bs-table-striped-bg: var(--surface-soft);
    --bs-table-hover-bg: var(--surface-soft);
    --bs-table-border-color: var(--border);
    background: var(--surface); color: var(--text);
  }
  :root[data-mode="auto"] .table > :not(caption) > * > * {
    background-color: var(--surface); color: var(--text);
    border-bottom-color: var(--border); box-shadow: none;
  }
  :root[data-mode="auto"] .table thead th { background: var(--surface-soft) !important; color: var(--text-muted) !important; border-color: var(--border); }
  :root[data-mode="auto"] .table-hover tbody tr:hover > * { background-color: var(--surface-soft) !important; color: var(--text) !important; }
  :root[data-mode="auto"] .settings-card { background: var(--surface); border-color: var(--border); color: var(--text); }
  :root[data-mode="auto"] .settings-title { color: var(--text); }
  :root[data-mode="auto"] .settings-subtitle { color: var(--text-muted); }
  :root[data-mode="auto"] .stat-card { background: var(--surface); border-color: var(--border); }
  :root[data-mode="auto"] .bg-light { background: var(--surface-soft) !important; color: var(--text) !important; }
  :root[data-mode="auto"] code { background: var(--surface-soft); color: #fbbf24; }
  :root[data-mode="auto"] .border, :root[data-mode="auto"] .border-top,
  :root[data-mode="auto"] .border-bottom, :root[data-mode="auto"] .border-start,
  :root[data-mode="auto"] .border-end { border-color: var(--border) !important; }
  :root[data-mode="auto"] .dropdown-menu { background: var(--surface); border-color: var(--border); }
  :root[data-mode="auto"] .dropdown-item { color: var(--text); }
  :root[data-mode="auto"] .dropdown-item:hover { background: var(--surface-soft); color: var(--text); }
  :root[data-mode="auto"] .nav-modern { background: rgba(15,23,42,0.75); border-bottom-color: var(--border); }
  :root[data-mode="auto"] .nav-brand { color: var(--text); }
  :root[data-mode="auto"] .nav-links a { color: var(--text-muted); }
  :root[data-mode="auto"] .nav-links a.active { background: var(--primary-100); color: var(--primary-light); }
  :root[data-mode="auto"] .admin-header { background: var(--surface); border-bottom-color: var(--border); }
  :root[data-mode="auto"] .admin-header h1 { color: var(--text); }
  :root[data-mode="auto"] .header-user { background: var(--surface-soft); color: var(--text); }
  :root[data-mode="auto"] .seat { background: var(--surface-soft); color: var(--text); border-color: var(--border-strong); }
  :root[data-mode="auto"] .seat.booked { background: rgba(239,68,68,0.25); color: #fca5a5; border-color: rgba(239,68,68,0.4); }
  :root[data-mode="auto"] .bus-layout { background: linear-gradient(180deg, var(--surface) 0%, var(--surface-soft) 100%); border-color: var(--border); }
  :root[data-mode="auto"] .badge.bg-primary   { background: rgba(99,102,241,0.22) !important;  color: #a5b4fc !important; }
  :root[data-mode="auto"] .badge.bg-success   { background: rgba(16,185,129,0.20) !important;  color: #6ee7b7 !important; }
  :root[data-mode="auto"] .badge.bg-warning   { background: rgba(245,158,11,0.22) !important;  color: #fcd34d !important; }
  :root[data-mode="auto"] .badge.bg-danger    { background: rgba(239,68,68,0.22) !important;   color: #fca5a5 !important; }
  :root[data-mode="auto"] .badge.bg-info      { background: rgba(6,182,212,0.22) !important;   color: #67e8f9 !important; }
  :root[data-mode="auto"] .badge.bg-secondary { background: var(--surface-soft) !important;    color: var(--text-muted) !important; }
  :root[data-mode="auto"] .badge.bg-light     { background: var(--surface-soft) !important;    color: var(--text) !important; }
  :root[data-mode="auto"] .badge.bg-dark      { background: rgba(255,255,255,0.1) !important;  color: var(--text) !important; }
  :root[data-mode="auto"] hr { border-color: var(--border); opacity: 0.5; }
  :root[data-mode="auto"] .footer { background: #050816; }
}

/* ----------------------------------------
   FONT SIZE base override
   ---------------------------------------- */
:root[style*="--base-font-size"] body { font-size: var(--base-font-size); }

/* ----------------------------------------
   FONT FAMILY per selection
   ---------------------------------------- */
:root[data-font="sarabun"]            body, body { font-family: 'Sarabun', system-ui, sans-serif; }
:root[data-font="noto-sans-thai"]     body { font-family: 'Noto Sans Thai', system-ui, sans-serif; }
:root[data-font="kanit"]              body { font-family: 'Kanit', system-ui, sans-serif; }
:root[data-font="prompt"]             body { font-family: 'Prompt', system-ui, sans-serif; }
:root[data-font="niramit"]            body { font-family: 'Niramit', system-ui, sans-serif; }
:root[data-font="k2d"]                body { font-family: 'K2D', system-ui, sans-serif; }
:root[data-font="mitr"]               body { font-family: 'Mitr', system-ui, sans-serif; }
:root[data-font="krub"]               body { font-family: 'Krub', system-ui, sans-serif; }
:root[data-font="ibm-plex-sans-thai"] body { font-family: 'IBM Plex Sans Thai', system-ui, sans-serif; }
:root[data-font="chonburi"]           body { font-family: 'Chonburi', 'Sarabun', system-ui, sans-serif; }
:root[data-font="charm"]              body { font-family: 'Charm', 'Sarabun', system-ui, sans-serif; }
:root[data-font="mali"]               body { font-family: 'Mali', 'Sarabun', system-ui, sans-serif; }
:root[data-font="fahkwang"]           body { font-family: 'Fahkwang', 'Sarabun', system-ui, sans-serif; }
:root[data-font="maitree"]            body { font-family: 'Maitree', 'Sarabun', system-ui, sans-serif; }
:root[data-font="thasadith"]          body { font-family: 'Thasadith', 'Sarabun', system-ui, sans-serif; }
:root[data-font="koho"]               body { font-family: 'KoHo', 'Sarabun', system-ui, sans-serif; }

html[lang="en"][data-font="sarabun"] body { font-family: 'Inter', 'Sarabun', system-ui, sans-serif; }

/* ----------------------------------------
   ICON WEIGHT (regular / fill)
   ---------------------------------------- */
:root[data-icon="fill"] .bi-house::before          { content: "\f425"; }
:root[data-icon="fill"] .bi-house-door::before     { content: "\f424"; }
:root[data-icon="fill"] .bi-person::before         { content: "\f4e1"; }
:root[data-icon="fill"] .bi-person-circle::before  { content: "\f4d7"; }
:root[data-icon="fill"] .bi-bell::before           { content: "\f1ec"; }
:root[data-icon="fill"] .bi-calendar3::before      { content: "\f1e4"; }
:root[data-icon="fill"] .bi-gear::before           { content: "\f3e6"; }
:root[data-icon="fill"] .bi-ticket-perforated::before { content: "\f612"; }
:root[data-icon="bold"] .bi { font-weight: 900; -webkit-text-stroke: 0.4px currentColor; }
:root[data-icon="thin"] .bi { opacity: 0.85; -webkit-text-stroke: 0.2px transparent; }