/* ============================================
   THEMES: Light Theme — Monochrome Clarity
   ============================================
   Clean, high-contrast monochrome.
   White cards on soft gray, dark text.
   Multi-layer realistic shadows for depth.
   ============================================ */

/* =================== Core Variable Overrides =================== */

html[data-theme="light"] {
  /* Background — warm gray for clear card separation */
  --app-bg-1: #E5E6EB;
  --app-bg-2: #DFE0E5;

  /* Surfaces — pure white cards */
  --surface-0: #EFF0F3;      /* sunken input bg (light) */
  --surface: #FFFFFF;
  --surface-2: #F6F7F9;
  --surface-3: #EFF0F3;

  /* Text — high contrast dark */
  --text: #1A1A1A;
  --text-dim: #5C6370;
  --text-primary: var(--text);
  --text-secondary: var(--text-dim);
  --color-text-muted: #8C919A;

  /* Brand Colors — Monochrome (dark for light bg) */
  --color-primary: #1A1A1A;
  --color-primary-light: #444444;
  --color-primary-dark: #000000;
  --color-secondary: #666666;
  --color-info: #666666;
  --color-accent: #444444;

  /* Semantic colors — keep for status */
  --color-success: #16A34A;
  --color-danger: #DC2626;
  --color-warning: #CA8A04;

  /* Borders & shadows — clear separation */
  --border: rgba(0, 0, 0, 0.08);
  --border-color: var(--border);
  --shadow: 0 1px 4px rgba(0, 0, 0, 0.08), 0 4px 14px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.10), 0 16px 40px rgba(0, 0, 0, 0.08);

  /* Elevation system — enhanced multi-layer shadows for clear depth */
  --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.08), 0 3px 10px rgba(0, 0, 0, 0.06), 0 6px 20px rgba(0, 0, 0, 0.04);
  --elevation-2: 0 2px 6px rgba(0, 0, 0, 0.08), 0 8px 20px rgba(0, 0, 0, 0.07), 0 12px 36px rgba(0, 0, 0, 0.05);
  --elevation-3: 0 4px 10px rgba(0, 0, 0, 0.10), 0 12px 28px rgba(0, 0, 0, 0.08), 0 20px 56px rgba(0, 0, 0, 0.06);
  --elevation-4: 0 8px 20px rgba(0, 0, 0, 0.12), 0 20px 48px rgba(0, 0, 0, 0.10), 0 32px 80px rgba(0, 0, 0, 0.08);

  /* Surface highlight — not needed in light mode */
  --surface-highlight: transparent;
  --surface-inset: none;

  /* Sidebar */
  --sidebar-bg: #FFFFFF;
  --sidebar-hover: rgba(0, 0, 0, 0.04);

  /* Glass effects */
  --glass-bg: rgba(255, 255, 255, 0.92);
  --glass-border: rgba(0, 0, 0, 0.06);

  /* Glow effects — disabled in light mode */
  --glow-primary: none;
  --glow-success: none;

  /* Gradients — monochrome */
  --gradient-primary: linear-gradient(135deg, #333333 0%, #1A1A1A 100%);

  /* Focus */
  --focus-ring: 0 0 0 3px rgba(0, 0, 0, 0.12);
  --focus: var(--focus-ring);

  /* Status colors */
  --status-online-bg: rgba(22, 163, 74, 0.08);
  --status-online-border: rgba(22, 163, 74, 0.25);
  --status-offline-bg: rgba(220, 38, 38, 0.08);
  --status-offline-border: rgba(220, 38, 38, 0.25);
  --status-loading-bg: rgba(202, 138, 4, 0.08);
  --status-loading-border: rgba(202, 138, 4, 0.25);
  --status-pause-bg: rgba(202, 138, 4, 0.08);
  --status-pause-border: rgba(202, 138, 4, 0.25);

  /* Component backgrounds */
  --bg-primary: var(--surface);
  --bg-secondary: var(--surface-2);
  --bg-tertiary: var(--surface-3);
  --card-bg: var(--surface);

  /* Tables */
  --table-header-bg: #F3F4F6;
  --table-row-hover: rgba(0, 0, 0, 0.025);
}

/* =================== Cards — Realistic Shadow Depth =================== */

html[data-theme="light"] .card {
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow: var(--elevation-1);
}

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

html[data-theme="light"] .card-header {
  background: transparent;
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

/* KPI strip — base hardcodes a dark translucent bg; restyle for light */
html[data-theme="light"] .kpi-strip {
  background: #FFFFFF;
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow: var(--elevation-1);
}

html[data-theme="light"] .kpi {
  border-right-color: rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .stat-card {
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow: var(--elevation-1);
}

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

html[data-theme="light"] .stat-card::before {
  background: linear-gradient(135deg, #333333, #1A1A1A);
}

/* =================== Tables — Subtle Header Depth =================== */

html[data-theme="light"] .accounts-table th,
html[data-theme="light"] .table th,
html[data-theme="light"] table.t thead th {
  background: #F3F4F6;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.04);
}

html[data-theme="light"] table.t th,
html[data-theme="light"] table.t td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] table.t tbody tr:hover {
  background: rgba(0, 0, 0, 0.02);
}

html[data-theme="light"] .accounts-table tbody tr:hover {
  background: rgba(0, 0, 0, 0.02);
}

/* =================== Modals — Elevated Dialog =================== */

html[data-theme="light"] .modal {
  box-shadow: var(--elevation-4);
  border-color: rgba(0, 0, 0, 0.10);
  background: #FFFFFF;
}

html[data-theme="light"] .modal-header {
  border-bottom-color: rgba(0, 0, 0, 0.06);
  background: #FAFBFC;
}

html[data-theme="light"] .custom-confirm-content {
  box-shadow: var(--elevation-4);
  background: #FFFFFF;
  border-color: rgba(0, 0, 0, 0.10);
}

/* =================== TR Modals — Light Mode Fix =================== */

html[data-theme="light"] .tr-modal-overlay {
  background: rgba(0, 0, 0, 0.35);
}

html[data-theme="light"] .tr-modal {
  background: #FFFFFF;
  border-color: rgba(0, 0, 0, 0.10);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .tr-modal-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .tr-modal-footer {
  border-top-color: rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .tr-modal-close:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* TR popups (filter, column vis, etc.) — light mode */
html[data-theme="light"] .tr-popup {
  background: #FFFFFF !important;
  border-color: rgba(0, 0, 0, 0.10) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
}

/* =================== Sidebar — Separated Layer =================== */

html[data-theme="light"] .sidebar {
  box-shadow: 2px 0 16px rgba(0, 0, 0, 0.06), 1px 0 0 rgba(0, 0, 0, 0.06);
  border-right: 1px solid rgba(0, 0, 0, 0.06);
}

/* =================== Header =================== */

html[data-theme="light"] .header {
  background: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .header-content h1 i {
  color: #1A1A1A;
  filter: none;
}

/* =================== Account & Plan Cards =================== */

html[data-theme="light"] .account-card {
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow: var(--elevation-1);
  background: #FFFFFF;
}

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

html[data-theme="light"] .plan-item-card {
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow: var(--elevation-1);
  background: #FFFFFF;
}

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

html[data-theme="light"] .copy-pair-card {
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow: var(--elevation-1);
  background: #FFFFFF;
}

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

/* Account sections */
html[data-theme="light"] .account-section {
  box-shadow: var(--elevation-1);
  border-color: rgba(0, 0, 0, 0.06);
  background: #FFFFFF;
}

html[data-theme="light"] .pairs-column {
  box-shadow: var(--elevation-1);
  border-color: rgba(0, 0, 0, 0.06);
  background: #FFFFFF;
}

/* =================== Form Inputs =================== */

html[data-theme="light"] .form-input,
html[data-theme="light"] .search-input {
  color: #1A1A1A;
  background: #FFFFFF;
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

html[data-theme="light"] .form-input:focus,
html[data-theme="light"] .search-input:focus {
  border-color: #1A1A1A;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03), 0 0 0 3px rgba(0, 0, 0, 0.08);
}

/* =================== Code Blocks =================== */

html[data-theme="light"] .info-item code {
  background: #F0F0F0;
  color: #1A1A1A;
  border-color: rgba(0, 0, 0, 0.12);
}

html[data-theme="light"] .config-item code,
html[data-theme="light"] .advanced-setting-item code {
  background: #F0F0F0;
  color: #1A1A1A;
}

html[data-theme="light"] .smtp-info-item code {
  background: #F0F0F0;
  color: #1A1A1A;
}

html[data-theme="light"] .system-info .info-item code {
  background: #F0F0F0;
  color: #1A1A1A;
  border-color: rgba(0, 0, 0, 0.12);
}

/* =================== JSON/Example Sections =================== */

html[data-theme="light"] .example-nav-btn {
  background: #F0F0F0;
  border-color: rgba(0, 0, 0, 0.12);
  color: #1A1A1A;
}

html[data-theme="light"] .example-content {
  background: #F5F5F5;
}

html[data-theme="light"] .example-title {
  color: #1A1A1A;
}

html[data-theme="light"] .json-container {
  background: #F0F0F0;
  border-color: rgba(0, 0, 0, 0.12);
}

html[data-theme="light"] .json-code {
  color: #1A1A1A;
}

/* Webhook Info (legacy) */
html[data-theme="light"] .webhook-info {
  background: #F5F5F5;
  border-color: rgba(0, 0, 0, 0.10);
}

html[data-theme="light"] .info-row {
  color: #1A1A1A;
}

/* URL Display */
html[data-theme="light"] .url-display {
  background: #F5F5F5;
  border-color: rgba(0, 0, 0, 0.12);
}

html[data-theme="light"] .url-display input {
  color: #1A1A1A;
}

html[data-theme="light"] .url-display button {
  background: #EBEBEB;
  border-left-color: rgba(0, 0, 0, 0.12);
  color: #555555;
}

/* Tabs */
html[data-theme="light"] .tabs {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.10);
}

html[data-theme="light"] .tab {
  color: #666666;
}

html[data-theme="light"] .tab.active,
html[data-theme="light"] .tab.example-nav-btn.active {
  background: rgba(0, 0, 0, 0.08);
  color: #1A1A1A;
}

html[data-theme="light"] .tab:hover {
  color: #1A1A1A;
}

/* Code Card */
html[data-theme="light"] .code-card {
  background: #F5F5F5;
  border-color: rgba(0, 0, 0, 0.12);
}

html[data-theme="light"] .code-head {
  background: rgba(0, 0, 0, 0.02);
  border-bottom-color: rgba(0, 0, 0, 0.10);
}

html[data-theme="light"] .code-head .file {
  color: #666666;
}

html[data-theme="light"] .code-body {
  color: #1A1A1A;
}

html[data-theme="light"] .example-nav-btn {
  background: #F0F0F0;
  border-color: rgba(0, 0, 0, 0.12);
  color: #1A1A1A;
}

/* =================== Buttons =================== */

html[data-theme="light"] .btn-copy {
  border-color: rgba(0, 0, 0, 0.12);
  background: #F5F5F5;
  color: #666666;
}

html[data-theme="light"] .btn-primary {
  background: #1A1A1A;
  color: #FFFFFF;
}

html[data-theme="light"] .btn-secondary {
  background: #666666;
  color: #FFFFFF;
}

html[data-theme="light"] .btn-success {
  color: #FFFFFF;
}

html[data-theme="light"] .btn-icon {
  background: #F5F5F5;
  border: 1px solid rgba(0, 0, 0, 0.10);
  color: #666666;
}

/* =================== Sidebar Navigation =================== */

html[data-theme="light"] .nav-item {
  color: #666666;
}

html[data-theme="light"] .nav-item:hover {
  color: #1A1A1A;
  background: rgba(0, 0, 0, 0.04);
}

html[data-theme="light"] .nav-item.active {
  color: #1A1A1A;
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.12);
  font-weight: var(--font-weight-semibold);
}

html[data-theme="light"] .nav-item.active i {
  color: var(--color-success);
  filter: none;
}

/* =================== Toggle Switches =================== */

html[data-theme="light"] .toggle-slider {
  background-color: #D0D0D0;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .toggle-slider:before {
  background-color: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

html[data-theme="light"] .toggle-switch input:checked + .toggle-slider {
  background-color: #1A1A1A;
}

html[data-theme="light"] .toggle-switch input:checked + .toggle-slider:before {
  background-color: #FFFFFF;
}

/* Small toggles — light mode polish */
html[data-theme="light"] .toggle-slider-small {
  background-color: #D0D0D0;
  border-color: rgba(0, 0, 0, 0.10);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .toggle-slider-small:before {
  background-color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

html[data-theme="light"] .toggle-switch-small input:checked + .toggle-slider-small {
  background-color: #1A1A1A;
  border-color: #1A1A1A;
}

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

html[data-theme="light"] .toggle-switch-small input:checked:disabled + .toggle-slider-small {
  background-color: #444444;
  opacity: 0.85;
}

/* =================== Status Badges =================== */

html[data-theme="light"] .status-badge.success {
  background: rgba(22, 163, 74, 0.08);
  color: #16A34A;
}

html[data-theme="light"] .status-badge.error {
  background: rgba(220, 38, 38, 0.08);
  color: #DC2626;
}

/* History Table Error Messages */
html[data-theme="light"] #historyTableBody .error-message {
  color: #DC2626 !important;
}

/* =================== Scrollbar =================== */

html[data-theme="light"] ::-webkit-scrollbar-track {
  background: #E5E6EB;
}

html[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: #C8C9CD;
  border-radius: 4px;
}

html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: #A0A1A5;
}

/* =================== Sidebar Header =================== */

html[data-theme="light"] .sidebar-header {
  color: #1A1A1A;
}

html[data-theme="light"] .sidebar-header i {
  filter: none;
}

/* =================== Background — aurora glow + grid (light) =================== */

html[data-theme="light"] body {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(22,163,74,0.05) 0%, transparent 60%),
    linear-gradient(rgba(15,23,42,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,0.022) 1px, transparent 1px),
    var(--app-bg-1);
  background-size: auto, 56px 56px, 56px 56px, auto;
  background-attachment: fixed;
}

/* Light sidebar — glass over light canvas */
html[data-theme="light"] .sidebar {
  background-color: rgba(255, 255, 255, 0.7);
}