/* ============================================
   THEMES: Dark Mode — Monochrome Obsidian
   ============================================
   Multi-tonal dark theme with layered depth.
   #000 bg → #0D1117 → #171C28 → #1E2435
   creates visual separation between layers.
   ============================================ */

/* Dark mode is the default via :root variables.
   This class provides an explicit selector. */
.dark-mode {
  --color-background: #000000;
  --color-surface: #171C28;
  --color-text-primary: #E4E8F1;
  --color-text-secondary: #8E99B0;
  --color-text-muted: #5A6478;
  --color-border: rgba(255, 255, 255, 0.06);

  --color-gray-50: #283040;
  --color-gray-100: #1E2435;
  --color-gray-200: #242D45;
  --color-gray-700: #B8C0D0;
  --color-gray-800: #D0D6E2;
  --color-gray-900: #E4E8F1;

  --table-header-bg: #121620;
  --table-row-hover: rgba(255, 255, 255, 0.03);
  --input-background: #121620;
  --card-background: #171C28;
  --toast-background: #171C28;
}

/* =================== Tonal Depth Enhancements =================== */

/* Dark mode elevation — deeper, richer shadows with subtle light edge */
html[data-theme="dark"] {
  --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
  --elevation-2: 0 2px 8px rgba(0, 0, 0, 0.45), 0 8px 24px rgba(0, 0, 0, 0.35);
  --elevation-3: 0 6px 16px rgba(0, 0, 0, 0.5), 0 16px 48px rgba(0, 0, 0, 0.4);
  --elevation-4: 0 10px 24px rgba(0, 0, 0, 0.55), 0 24px 64px rgba(0, 0, 0, 0.45);

  --surface-highlight: rgba(255, 255, 255, 0.05);
  --surface-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Cards — tonal separation from background */
html[data-theme="dark"] .card {
  box-shadow: var(--elevation-1), var(--surface-inset);
  border-color: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .card:hover {
  box-shadow: var(--elevation-2), var(--surface-inset);
}

html[data-theme="dark"] .card-header {
  background: transparent;
  border-bottom-color: var(--border);
}

/* Stat cards — elevated feel */
html[data-theme="dark"] .stat-card {
  box-shadow: var(--elevation-1), var(--surface-inset);
  border-color: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .stat-card:hover {
  box-shadow: var(--elevation-2), var(--surface-inset);
}

/* Tables — subtle depth on header row */
html[data-theme="dark"] .accounts-table th,
html[data-theme="dark"] .table th {
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--border);
}

/* Modals — dramatic depth */
html[data-theme="dark"] .modal {
  box-shadow: var(--elevation-4);
  border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .modal-header {
  border-bottom-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03);
}

html[data-theme="dark"] .custom-confirm-content {
  box-shadow: var(--elevation-4);
  border-color: rgba(255, 255, 255, 0.08);
}

/* Account & plan cards — layered depth */
html[data-theme="dark"] .account-card {
  box-shadow: var(--elevation-1);
  border-color: rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .account-card:hover {
  box-shadow: var(--elevation-2);
  border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .plan-item-card {
  box-shadow: var(--elevation-1);
  border-color: rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .plan-item-card:hover {
  box-shadow: var(--elevation-2);
  border-color: rgba(255, 255, 255, 0.10);
}

html[data-theme="dark"] .copy-pair-card {
  box-shadow: var(--elevation-1);
  border-color: rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .copy-pair-card:hover {
  box-shadow: var(--elevation-2);
  border-color: rgba(255, 255, 255, 0.10);
}

/* Form inputs — subtle inset depth */
html[data-theme="dark"] .form-input,
html[data-theme="dark"] .search-input {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"] .form-input:focus,
html[data-theme="dark"] .search-input:focus {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 3px rgba(255, 255, 255, 0.10);
}

/* Sidebar — deep separation from content area */
html[data-theme="dark"] .sidebar {
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5), 1px 0 0 rgba(255, 255, 255, 0.06);
}

/* Header — subtle bottom edge for layering */
html[data-theme="dark"] .header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02);
}

/* Account sections — depth on background panels */
html[data-theme="dark"] .account-section {
  box-shadow: var(--elevation-1), var(--surface-inset);
  border-color: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .pairs-column {
  box-shadow: var(--elevation-1), var(--surface-inset);
  border-color: rgba(255, 255, 255, 0.06);
}

/* =================== Smooth transition when toggling =================== */
.theme-transitioning,
.theme-transitioning * {
  transition: background-color var(--transition-normal),
              color var(--transition-normal),
              border-color var(--transition-normal),
              box-shadow var(--transition-normal) !important;
}

/* =================== Status Badges =================== */
html[data-theme="dark"] .status-badge.success {
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
}

html[data-theme="dark"] .status-badge.error {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

html[data-theme="dark"] #historyTableBody .error-message {
  color: #ef4444 !important;
}

/* Dark mode action badge glow */
html[data-theme="dark"] .action-badge.buy {
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.3);
}

html[data-theme="dark"] .action-badge.sell {
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
}

/* =================== Toggle Switch — Dark Mode Fix =================== */

/* A CHECKED small toggle was invisible in dark mode: the track takes
   --color-primary (#FFFFFF here) and _forms.css paints the knob #fff too, so it was a
   blank white pill with no thumb — indistinguishable from "no control rendered". Only
   the :checked:disabled variant below had ever been fixed, which is why the bug
   survived: every disabled toggle looked right and every enabled one did not.
   Same treatment as that variant — a dark thumb against the light track. */
html[data-theme="dark"] .toggle-switch-small input:checked + .toggle-slider-small:before {
  background-color: #171C28;
}

/* Checked disabled toggles need higher visibility in dark mode */
html[data-theme="dark"] .toggle-switch-small input:checked:disabled + .toggle-slider-small {
  background-color: rgba(255, 255, 255, 0.85);
  opacity: 0.8;
}

html[data-theme="dark"] .toggle-switch-small input:checked:disabled + .toggle-slider-small:before {
  background-color: #171C28;
}

/* Unchecked disabled toggles — more visible track */
html[data-theme="dark"] .toggle-switch-small input:disabled + .toggle-slider-small {
  background-color: #283040;
  border-color: rgba(255, 255, 255, 0.10);
  opacity: 0.8;
}

/* Standard toggles dark mode polish */
html[data-theme="dark"] .toggle-slider {
  background-color: #283040;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .toggle-switch input:checked + .toggle-slider {
  background-color: #FFFFFF;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.25), inset 0 1px 3px rgba(0, 0, 0, 0.1);
}