/* === theme-system.css ===
   Comprehensive CSS Variable System for Light & Dark Themes
   Overrides both main-bundle.min.css (teal scheme) and legacy CSS variables.
   Works alongside existing dark-theme.css for component-specific overrides. */

/* ===== LIGHT THEME (default) ===== */
:root {
  /* --- Core palette (main-bundle teal scheme) --- */
  --primary: #134e4a;
  --primary-light: #0d9488;
  --primary-lighter: #ccfbf1;
  --blue: #0d9488;
  --blue-hover: #0f766e;
  --green: #059669;
  --orange: #d97706;
  --red: #dc2626;

  /* --- Backgrounds --- */
  --bg: #fafaf9;
  --bg-primary: #f8fafc;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f1f5f9;
  --bg-input: #f8fafc;
  --bg-hover: #f1f5f9;
  --bg-card: #ffffff;
  --bg-sidebar: #1a1f2e;

  /* --- Text --- */
  --text: #1c1917;
  --text-primary: #0f172a;
  --text-secondary: #64748b;
  --text-tertiary: #94a3b8;
  --text2: #57534e;
  --text3: #a8a29e;
  --text-inverse: #ffffff;

  /* --- Borders --- */
  --border: #e7e5e4;
  --border-color: #e2e8f0;
  --border-light: #f5f5f4;
  --border-input: #d1d5db;

  /* --- Cards & Containers --- */
  --card: #ffffff;
  --card-bg: #ffffff;
  --shadow: 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.06), 0 2px 4px -2px rgba(0,0,0,.04);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.06), 0 4px 6px -4px rgba(0,0,0,.04);

  /* --- Radius --- */
  --radius: 8px;
  --radius-md: 8px;

  /* --- Sidebar --- */
  --sidebar-width: 240px;
  --sidebar-bg: #1a1f2e;

  /* --- Accents --- */
  --accent: #0d9488;
  --accent-hover: #0f766e;
  --accent-light: rgba(13,148,136,.1);
  --accent-text: #0d9488;

  /* --- Scrollbar --- */
  --scrollbar-bg: #f1f5f9;
  --scrollbar-thumb: #cbd5e1;

  /* --- Header --- */
  --header-bg: #ffffff;
  --header-border: #e7e5e4;

  /* --- Misc --- */
  --cert-color: #0d9488;
}

/* ===== DARK THEME ===== */
[data-theme="dark"] {
  /* --- Core palette (teal preserved, adjusted for dark bg) --- */
  --primary: #5eead4;
  --primary-light: #2dd4bf;
  --primary-lighter: rgba(13,148,136,.15);
  --blue: #2dd4bf;
  --blue-hover: #5eead4;
  --green: #34d399;
  --orange: #fbbf24;
  --red: #f87171;

  /* --- Backgrounds --- */
  --bg: #0f172a;
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-tertiary: #162032;
  --bg-input: #0f1724;
  --bg-hover: #162032;
  --bg-card: #1e293b;
  --bg-sidebar: #0c1220;

  /* --- Text --- */
  --text: #e2e8f0;
  --text-primary: #e2e8f0;
  --text-secondary: #94a3b8;
  --text-tertiary: #64748b;
  --text2: #94a3b8;
  --text3: #64748b;
  --text-inverse: #ffffff;

  /* --- Borders --- */
  --border: #334155;
  --border-color: #334155;
  --border-light: rgba(255,255,255,0.05);
  --border-input: #475569;

  /* --- Cards & Containers --- */
  --card: #1e293b;
  --card-bg: #1e293b;
  --shadow: 0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
  --shadow-md: 0 4px 12px rgba(0,0,0,.35);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.4);

  /* --- Sidebar --- */
  --sidebar-width: 240px;
  --sidebar-bg: #0c1220;

  /* --- Accents --- */
  --accent: #2dd4bf;
  --accent-hover: #5eead4;
  --accent-light: rgba(13,148,136,.15);
  --accent-text: #2dd4bf;

  /* --- Scrollbar --- */
  --scrollbar-bg: #0f1724;
  --scrollbar-thumb: #475569;

  /* --- Header --- */
  --header-bg: #1e293b;
  --header-border: #334155;

  /* --- Misc --- */
  --cert-color: #2dd4bf;
}

/* ===== GLOBAL BASE OVERRIDES using variables ===== */

/* Body */
body {
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* All links */
a { color: var(--primary-light); }

/* ===== LAYOUT ELEMENTS ===== */

/* Sidebar */
.sidebar {
  background: var(--sidebar-bg) !important;
}

/* Header */
.v40-header {
  background: var(--header-bg) !important;
  border-bottom-color: var(--header-border) !important;
}
.v40-header .breadcrumb { color: var(--text-secondary); }
.v40-header .breadcrumb span { color: var(--primary-light); }

/* Main content area */
.main-wrap { background: var(--bg); }

/* ===== CARDS & SECTIONS ===== */

/* Section titles */
.section-title { color: var(--text); }
.section-title::before { background: var(--primary-light); }

/* KPI cards */
.kpi-card { background: var(--card); border-color: var(--border); box-shadow: var(--shadow); }
.kpi-label { color: var(--text2); }
.kpi-value { color: var(--text); }
.kpi-sub { color: var(--text3); }

/* Textbook section */
.textbook-section { background: var(--card); border-color: var(--border); box-shadow: var(--shadow); }
.textbook-header { background: var(--card); }
.search-box input { background: var(--bg-input); border-color: var(--border); color: var(--text); }
.search-box input:focus { border-color: var(--primary-light); }
.search-box input::placeholder { color: var(--text3); }

/* Timeline */
.timeline-section { background: var(--card); border-color: var(--border); box-shadow: var(--shadow); }
.stage-name { color: var(--text); }
.stage-pct { color: var(--text2); }
.stage-hours { color: var(--text3); }

/* Continue learning banner */
.continue-banner { background: var(--primary); }

/* ===== TABLES ===== */
table { border-color: var(--border); }
table th { background: var(--bg-tertiary); color: var(--text); border-color: var(--border); }
table td { border-color: var(--border); color: var(--text); }
table tr:hover td { background: var(--bg-hover); }

/* ===== MODALS ===== */
.modal-overlay { background: rgba(0,0,0,.6); }
.modal-content, .modal-box { background: var(--card); border-color: var(--border); }
.modal-header { border-bottom-color: var(--border); }
.modal-title { color: var(--text); }
.modal-close { color: var(--text-secondary); }
.modal-close:hover { color: var(--text); background: var(--bg-hover); }
.modal-footer { border-top-color: var(--border); }

/* ===== BUTTONS ===== */
.btn-primary, .btn-main { background: var(--primary-light); color: #fff; }
.btn-primary:hover, .btn-main:hover { background: var(--blue-hover); }
.btn-secondary, .btn-outline {
  background: var(--card);
  color: var(--text);
  border-color: var(--border);
}
.btn-secondary:hover, .btn-outline:hover { background: var(--bg-hover); border-color: var(--text3); }

/* ===== FORMS ===== */
input, select, textarea {
  background: var(--bg-input);
  border-color: var(--border-input);
  color: var(--text);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--primary-light);
}
input::placeholder, textarea::placeholder {
  color: var(--text3);
}
label { color: var(--text); }

/* ===== DROPDOWNS & MENUS ===== */
.dropdown-menu, .popover-menu {
  background: var(--card);
  border-color: var(--border);
  box-shadow: var(--shadow-md);
}
.dropdown-item:hover { background: var(--bg-hover); color: var(--text); }

/* ===== TABS ===== */
.tab-item { color: var(--text-secondary); border-bottom-color: transparent; }
.tab-item:hover { color: var(--text); }
.tab-item.active { color: var(--primary-light); border-bottom-color: var(--primary-light); }

/* ===== PROGRESS BARS ===== */
.progress-bar-bg { background: var(--bg-tertiary); }

/* ===== FOOTER ===== */
.footer { color: var(--text-secondary); }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; height: 6px; background: var(--scrollbar-bg); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

/* ===== HEADER USER AREA ===== */
.header-user-name { color: var(--text) !important; }
.header-user-role { color: var(--text2) !important; }
.header-logout-btn { border-color: var(--border) !important; color: var(--text-secondary) !important; }
.header-logout-btn:hover { background: rgba(239,68,68,.08) !important; color: var(--red) !important; border-color: var(--red) !important; }

/* ===== THEME TOGGLE BUTTON ===== */
.theme-toggle-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}
.theme-toggle-btn:hover {
  background: var(--bg-hover);
  border-color: var(--primary-light);
}
.theme-toggle-btn .icon-sun { display: none; }
.theme-toggle-btn .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle-btn .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle-btn .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle-btn { border-color: #475569; background: var(--card); }
[data-theme="dark"] .theme-toggle-btn:hover { background: var(--bg-hover); border-color: #64748b; }

/* ===== MISC ELEMENTS ===== */
.no-results { color: var(--text3); }

/* Standalone pages (no sidebar) */
.standalone-page {
  background: var(--bg);
  color: var(--text);
}

/* Generic card class */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
}

/* Divider */
.divider, hr {
  border-color: var(--border);
}

/* Code blocks */
code, pre {
  background: var(--bg-tertiary);
  color: var(--primary-light);
}

/* Selection */
::selection {
  background: rgba(13,148,136,.25);
  color: var(--text);
}

/* ===== DARK MODE: Additional overrides for inline styles ===== */
/* These target common inline style patterns from generated content */
[data-theme="dark"] [style*="background:#dbeafe"] { background: rgba(13,148,136,.12) !important; color: var(--primary-light) !important; }
[data-theme="dark"] [style*="background:#fef3c7"] { background: rgba(217,119,6,.12) !important; color: #fbbf24 !important; }
[data-theme="dark"] [style*="color:#2563eb"] { color: var(--primary-light) !important; }
[data-theme="dark"] [style*="color:#d97706"] { color: #fbbf24 !important; }
[data-theme="dark"] [style*="color:#0f172a"] { color: #e2e8f0 !important; }
[data-theme="dark"] [style*="color:#374151"] { color: #cbd5e1 !important; }
[data-theme="dark"] [style*="color:#6b7280"] { color: #94a3b8 !important; }
[data-theme="dark"] [style*="background:#fff"] { background: var(--card) !important; }
[data-theme="dark"] [style*="background:#f1f5f9"] { background: var(--bg-tertiary) !important; }
[data-theme="dark"] [style*="background:#f8fafc"] { background: var(--bg-tertiary) !important; }
[data-theme="dark"] [style*="background:#fafbfc"] { background: var(--bg-tertiary) !important; }
[data-theme="dark"] [style*="border:1px solid #e2e8f0"] { border-color: #334155 !important; }
[data-theme="dark"] [style*="border:1px solid #e5e7eb"] { border-color: #334155 !important; }
[data-theme="dark"] [style*="border:1px solid #d1d5db"] { border-color: #475569 !important; }