@import url("./loading.css");

/**
 * Integration Platform — Light Mode Override + CSS Variable Aliases
 * Include on every page that has dark mode CSS variables.
 * Handles both naming conventions (Pattern A: --s0/--t1 and Pattern B: --panel/--text).
 */
html.light {
  /* Pattern B names (dashboard, settings) */
  --bg: #F8F9FC;
  --panel: #FFFFFF;
  --surface: #F3F4F9;
  --hover: #E8EAF2;
  --border: #D5D9E8;
  --border2: #C4CAE0;
  --text: #111828;
  --text2: #3D4663;
  --text3: #6B7394;
  --text4: #9BA3BE;

  /* Pattern A aliases (flow-editor, sandbox, transformation-studio, etc.) */
  --s0: #FFFFFF;
  --s1: #F3F4F9;
  --s2: #E8EAF2;
  --s3: #DDE0ED;
  --b: #D5D9E8;
  --b2: #C4CAE0;
  --ba: #D5D9E8;
  --t1: #111828;
  --t2: #3D4663;
  --t3: #6B7394;
  --t4: #9BA3BE;

  /* Pattern C aliases (templates, observability) */
  --ink: #F8F9FC;
  --ink2: #EEF0F6;
  --ink3: #E2E5EF;
  --surface2: #E8EAF2;
  --surface3: #DDE0ED;

  /* Shared tokens */
  --accent: #4DB82E;
  --accent2: rgba(77, 184, 46, .15);
  --accent-light: rgba(77, 184, 46, .10);
  --green: #1a9c4d;
  --green-bg: rgba(26, 156, 77, .08);
  --red: #DC2626;
  --red-bg: rgba(220, 38, 38, .06);
  --amber: #D97706;
  --yellow: #D97706;
  --amber-bg: rgba(217, 119, 6, .06);
  --yellow-bg: rgba(217, 119, 6, .06);
  --purple: var(--accent);
  --purple-bg: rgba(123, 250, 76, .08);
  --orange: #EA580C;
  --orange-bg: rgba(234, 88, 12, .06);

  /* Shadows */
  --shadow: 0 1px 3px rgba(17, 24, 40, .06), 0 1px 2px rgba(17, 24, 40, .04);
  --shadow-md: 0 4px 8px -1px rgba(17, 24, 40, .07), 0 2px 4px -1px rgba(17, 24, 40, .04);
  --shadow-lg: 0 10px 20px -3px rgba(17, 24, 40, .08), 0 4px 6px -2px rgba(17, 24, 40, .04);
}

/* ── Fix elements that hardcode dark backgrounds or white text ── */

/* Body + main containers */
html.light body { background: var(--bg) !important; color: var(--text) !important; }
html.light .sidebar { background: #FFFFFF !important; border-color: var(--border) !important; }
html.light .sidebar::before { opacity: 0.3; }

/* Topbar */
html.light .topbar,
html.light .tp { background: rgba(255, 255, 255, .95) !important; border-color: var(--border) !important; backdrop-filter: blur(12px); }

/* Cards */
html.light .card,
html.light .stat-card,
html.light .connector-card,
html.light .tenant-card,
html.light .plan-card,
html.light .metric-card,
html.light .panel,
html.light [class*="-card"] { background: #FFFFFF !important; border-color: var(--border) !important; }

/* Modals */
html.light .modal,
html.light .modal-content,
html.light .modal-body,
html.light .dialog { background: #FFFFFF !important; border-color: var(--border) !important; }
html.light .modal-overlay,
html.light .overlay { background: rgba(17, 24, 40, .4) !important; }

/* Forms */
html.light input,
html.light select,
html.light textarea,
html.light .form-input,
html.light .form-select,
html.light .form-textarea { background: var(--ink2) !important; color: var(--text) !important; border-color: var(--border) !important; }
html.light input::placeholder,
html.light textarea::placeholder { color: var(--text4) !important; }

/* Search */
html.light .search-bar,
html.light .search-input,
html.light [class*="search"] input { background: var(--ink2) !important; color: var(--text) !important; border-color: var(--border) !important; }

/* Tables */
html.light table,
html.light .table { border-color: var(--border) !important; }
html.light th { background: var(--ink2) !important; color: var(--text2) !important; border-color: var(--border) !important; }
html.light td { border-color: var(--border) !important; }
html.light tr:hover td { background: var(--ink2) !important; }

/* Dropdowns */
html.light .dropdown,
html.light .dropdown-menu,
html.light .context-menu { background: #FFFFFF !important; border-color: var(--border) !important; box-shadow: var(--shadow-md); }

/* Code blocks */
html.light pre,
html.light code,
html.light .code-block { background: var(--ink2) !important; color: var(--text) !important; }

/* Tabs */
html.light .tab.active,
html.light .tab-btn.active { background: var(--accent-light) !important; color: var(--accent) !important; }

/* Tooltips */
html.light .tooltip { background: #111828 !important; color: #F8F9FC !important; }

/* Nav items */
html.light .nav-item:hover { background: var(--ink2) !important; }
html.light .nav-item.active { background: rgba(77, 184, 46, .08) !important; border-color: rgba(77, 184, 46, .18) !important; color: var(--accent) !important; }
html.light .nav-label { color: var(--text3) !important; }

/* Tenant pill */
html.light .tenant-pill { background: var(--ink2) !important; border-color: var(--border) !important; }

/* Badges — keep white text on colored badges */
html.light .badge-green,
html.light .badge-red,
html.light .badge-amber { color: #FFFFFF; }

/* Toggle tracks */
html.light .toggle-track { background: var(--border2) !important; }
html.light .toggle input:checked + .toggle-track { background: var(--accent) !important; }

/* Scrollbars */
html.light ::-webkit-scrollbar-track { background: var(--ink2); }
html.light ::-webkit-scrollbar-thumb { background: var(--border2); }