/**
 * WealthSignal — Global Theme System
 *
 * Dark mode is the default (set on :root in each page's inline <style>).
 * This file provides:
 *   1. Light-mode variable overrides when html.light-mode is present
 *   2. Theme transition for smooth switching
 *   3. Chart color CSS properties
 *   4. Toggle button styles
 *
 * Loaded via <link rel="stylesheet" href="/theme.css"> injected in all pages.
 * The anti-flash inline script in <head> sets html.light-mode BEFORE rendering.
 */

/* ── Smooth theme transitions ───────────────────────────────────────────────── */
html {
  color-scheme: dark;
}
html.light-mode {
  color-scheme: light;
}

*,
*::before,
*::after {
  transition: background-color 0.15s ease, color 0.1s ease, border-color 0.15s ease,
    box-shadow 0.15s ease !important;
}

/* Disable transitions during theme switch to prevent flash */
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition: none !important;
}

/* ── Light mode variable overrides ─────────────────────────────────────────── */
html.light-mode {
  --bg-primary: #f4f6fb;
  --bg-secondary: #eef1f8;
  --bg-card: #ffffff;
  --bg-card-hover: #f0f3fa;
  --bg-sidebar: #ffffff;

  /* Accent colors stay the same — they work on both modes */
  --accent-green: #00c878;
  --accent-green-dim: rgba(0, 200, 120, 0.1);
  --accent-green-border: rgba(0, 200, 120, 0.3);
  --accent-red: #e8334a;
  --accent-red-dim: rgba(232, 51, 74, 0.08);
  --accent-blue: #2e8de4;
  --accent-purple: #6b4de0;
  --accent-orange: #f08c00;

  /* Text */
  --text-primary: #1a1b2e;
  --text-secondary: #4a4e63;
  --text-muted: #8b8fa3;

  /* Borders */
  --border: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.14);
}

/* ── Light mode surface fixes ────────────────────────────────────────────────── */
/* Inputs & forms */
html.light-mode input,
html.light-mode select,
html.light-mode textarea {
  background: #ffffff;
  color: var(--text-primary);
  border-color: var(--border-strong);
}
html.light-mode input::placeholder,
html.light-mode textarea::placeholder {
  color: var(--text-muted);
}

/* Dropdowns, popovers, tooltips */
html.light-mode [class*="dropdown"],
html.light-mode [class*="tooltip"],
html.light-mode [class*="popover"],
html.light-mode [class*="modal-overlay"],
html.light-mode [class*="modal-content"],
html.light-mode [class*="drawer"] {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-primary);
}

/* Scrollbars */
html.light-mode ::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}
html.light-mode ::-webkit-scrollbar-thumb {
  background: #c4c8d8;
}
html.light-mode * {
  scrollbar-color: #c4c8d8 var(--bg-secondary);
}

/* SVG icons that inherit color */
html.light-mode svg path,
html.light-mode svg circle,
html.light-mode svg rect {
  stroke: currentColor;
}

/* ── Chart color CSS properties ─────────────────────────────────────────────── */
:root {
  --chart-up-color: #00e88f;
  --chart-down-color: #ff4757;
  --chart-line-color: #4facfe;
  --chart-grid-color: rgba(255, 255, 255, 0.06);
  --chart-bg-color: transparent;
}
html.light-mode {
  --chart-up-color: #00c878;
  --chart-down-color: #e8334a;
  --chart-line-color: #2e8de4;
  --chart-grid-color: rgba(0, 0, 0, 0.06);
  --chart-bg-color: transparent;
}

/* ── Theme Toggle Button ─────────────────────────────────────────────────────── */
#ws-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 9px 12px;
  margin-top: 6px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
#ws-theme-toggle:hover {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
#ws-theme-toggle .ws-toggle-label {
  display: flex;
  align-items: center;
  gap: 7px;
}
#ws-theme-toggle .ws-toggle-icon {
  font-size: 1rem;
  line-height: 1;
}
#ws-theme-toggle .ws-toggle-pill {
  width: 32px;
  height: 18px;
  background: var(--text-muted);
  border-radius: 9px;
  position: relative;
  flex-shrink: 0;
  transition: background 0.2s;
}
#ws-theme-toggle .ws-toggle-pill::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: transform 0.2s;
}
html.light-mode #ws-theme-toggle .ws-toggle-pill {
  background: var(--accent-blue);
}
html.light-mode #ws-theme-toggle .ws-toggle-pill::after {
  transform: translateX(14px);
}

/* Floating FAB (when no sidebar exists) */
#ws-theme-fab {
  position: fixed;
  bottom: 24px;
  left: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.2rem;
  z-index: 9998;
  transition: transform 0.15s, box-shadow 0.15s;
  color: var(--text-secondary);
}
#ws-theme-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  color: var(--text-primary);
}

/* ── RTL Layout Support (Arabic — dir=rtl) ──────────────────────────────────── */
html[dir="rtl"] .sidebar {
  left: auto;
  right: 0;
}
html[dir="rtl"] .main-wrapper,
html[dir="rtl"] .main {
  margin-left: 0;
  margin-right: var(--sidebar-width, 240px);
}
html[dir="rtl"] body {
  direction: rtl;
  text-align: right;
}
html[dir="rtl"] .settings-tabs {
  direction: rtl;
}
html[dir="rtl"] .topbar {
  direction: rtl;
}
/* CJK Font fallback — Chinese, Japanese, Korean */
html[lang="zh"],
html[lang="ja"],
html[lang="ko"] {
  font-family: 'Noto Sans CJK SC', 'PingFang SC', 'Microsoft YaHei', 'DM Sans', sans-serif;
}
/* Arabic font */
html[lang="ar"] {
  font-family: 'Noto Sans Arabic', 'Arial Unicode MS', 'DM Sans', sans-serif;
}
/* Hindi (Devanagari) font */
html[lang="hi"] {
  font-family: 'Noto Sans Devanagari', 'DM Sans', sans-serif;
}

/* Chart color preview swatches (in settings) */
.ws-color-swatch {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 2px solid var(--border-strong);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
}
.ws-color-swatch:hover {
  transform: scale(1.1);
  border-color: var(--accent-blue);
}
