/* =========================================================
   IDEA Theme – FINAL
   v1.1.0
   High-contrast, Tailwind override–correct
   ========================================================= */

/* ---------- Light theme ---------- */
:root {
  --bg-page: #f8fafc;
  --bg-surface: #ffffff;
  --bg-elevated: #ffffff;
  --bg-hover: #f1f5f9;

  --border: #e2e8f0;
  --border-strong: #cbd5e1;

  --text-primary: #0f172a;
  --text-muted: #475569;
  --text-faint: #64748b;

  --link: #0ea5e9;
  --link-hover: #0284c7;

  --ok-bg: #ecfdf5;
  --ok-text: #065f46;

  --warn-bg: #fffbeb;
  --warn-text: #92400e;

  --error-bg: #fef2f2;
  --error-text: #991b1b;

  color-scheme: light;
}

/* ---------- Dark theme ---------- */
html[data-theme="dark"] {
  --bg-page: #020617;
  --bg-surface: #030712;
  --bg-elevated: #030712;
  --bg-hover: #020617;

  --border: #334155;
  --border-strong: #475569;

  --text-primary: #e5e7eb;
  --text-muted: #cbd5e1;
  --text-faint: #94a3b8;

  --link: #7dd3fc;
  --link-hover: #bae6fd;

  --ok-bg: #052e1a;
  --ok-text: #86efac;

  --warn-bg: #2e1d06;
  --warn-text: #facc15;

  --error-bg: #3f0a0a;
  --error-text: #fca5a5;

  color-scheme: dark;
}

/* =========================================================
   GLOBAL FORCE OVERRIDES (THIS IS WHAT WAS MISSING)
   ========================================================= */

/* Backgrounds */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-slate-50,
html[data-theme="dark"] .bg-slate-100 {
  background-color: var(--bg-surface) !important;
}

/* Borders */
html[data-theme="dark"] .border-slate-100,
html[data-theme="dark"] .border-slate-200 {
  border-color: var(--border) !important;
}

/* Text colors (critical for readability) */
html[data-theme="dark"] .text-slate-400 {
  color: var(--text-faint) !important;
}
html[data-theme="dark"] .text-slate-500 {
  color: var(--text-muted) !important;
}
html[data-theme="dark"] .text-slate-600,
html[data-theme="dark"] .text-slate-700 {
  color: var(--text-muted) !important;
}
html[data-theme="dark"] .text-slate-900 {
  color: var(--text-primary) !important;
}

/* Links */
html[data-theme="dark"] a {
  color: var(--link);
}
html[data-theme="dark"] a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

/* Inputs / selects / placeholders */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background-color: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border);
}
html[data-theme="dark"] ::placeholder {
  color: var(--text-faint);
}

/* =========================================================
   Tables
   ========================================================= */

thead {
  color: var(--text-muted);
}
tbody tr {
  border-color: var(--border);
}
tbody tr:hover {
  background: rgba(148, 163, 184, 0.06);
}

/* =========================================================
   Error truncation + hover expansion
   ========================================================= */

.error-inline-wrap {
  position: relative;
  display: inline-block;
}

.error-inline {
  max-width: 24ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;

  background: var(--error-bg);
  color: var(--error-text);
  border: 1px solid color-mix(in srgb, var(--error-text) 40%, transparent);
}

.error-inline-wrap:hover .error-popup {
  display: block;
}

.error-popup {
  display: none;
  position: absolute;
  z-index: 50;
  left: 0;
  top: 1.75rem;

  width: 420px;
  max-width: 90vw;

  padding: 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  white-space: pre-wrap;

  background: var(--error-bg);
  color: var(--error-text);
  border: 1px solid color-mix(in srgb, var(--error-text) 40%, transparent);
  box-shadow: 0 10px 25px rgba(0,0,0,0.6);
}

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

.nav-btn {
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.nav-btn:hover {
  background: var(--bg-hover);
}