/* =============================================================
 * pandOS Dark-mode Overrides (CSS-first contrast fix)
 *
 * Purpose: retrofit dark-mode awareness onto Tailwind utility
 * classes that were written without `dark:` variants. Instead of
 * editing ~100 call-sites, we remap the small set of recurring
 * patterns globally via attribute-selector + :not() escape hatch.
 *
 * Safety:
 *  - Each rule guards with :not([class*="dark:<category>"]) so that
 *    an intentionally-dark-aware call-site (which writes its own
 *    dark:bg-*, dark:text-*, etc.) always wins.
 *  - Specificity stays low (single class + attribute selector) so
 *    Tailwind layer utilities with higher specificity still take
 *    precedence when they should.
 *
 * Applies both to explicit data-theme="dark" and to the
 * prefers-color-scheme:dark fallback when no theme is chosen.
 * Keep the media-query branch in sync with the attribute branch.
 * =============================================================
 */

/* ---------- Explicit dark theme -------------------------------- */
html[data-theme="dark"] .bg-white:not([class*="dark:bg-"]) {
  background-color: var(--surface-container-lowest);
}
html[data-theme="dark"] .bg-gray-50:not([class*="dark:bg-"]),
html[data-theme="dark"] .bg-slate-50:not([class*="dark:bg-"]) {
  background-color: var(--surface-container-low);
}
html[data-theme="dark"] .bg-gray-100:not([class*="dark:bg-"]),
html[data-theme="dark"] .bg-slate-100:not([class*="dark:bg-"]) {
  background-color: var(--surface-container);
}

html[data-theme="dark"] .text-slate-900:not([class*="dark:text-"]),
html[data-theme="dark"] .text-gray-900:not([class*="dark:text-"]) {
  color: var(--on-surface);
}
html[data-theme="dark"] .text-slate-800:not([class*="dark:text-"]),
html[data-theme="dark"] .text-slate-700:not([class*="dark:text-"]),
html[data-theme="dark"] .text-gray-800:not([class*="dark:text-"]),
html[data-theme="dark"] .text-gray-700:not([class*="dark:text-"]) {
  color: var(--on-surface-variant);
}
html[data-theme="dark"] .text-slate-600:not([class*="dark:text-"]),
html[data-theme="dark"] .text-slate-500:not([class*="dark:text-"]),
html[data-theme="dark"] .text-gray-600:not([class*="dark:text-"]),
html[data-theme="dark"] .text-gray-500:not([class*="dark:text-"]) {
  color: var(--on-surface-muted);
}

html[data-theme="dark"] .border-slate-200:not([class*="dark:border-"]),
html[data-theme="dark"] .border-slate-300:not([class*="dark:border-"]),
html[data-theme="dark"] .border-gray-100:not([class*="dark:border-"]),
html[data-theme="dark"] .border-gray-200:not([class*="dark:border-"]),
html[data-theme="dark"] .border-gray-300:not([class*="dark:border-"]) {
  border-color: var(--outline-variant);
}
html[data-theme="dark"] .ring-slate-200:not([class*="dark:ring-"]),
html[data-theme="dark"] .ring-slate-300:not([class*="dark:ring-"]),
html[data-theme="dark"] .ring-gray-200:not([class*="dark:ring-"]),
html[data-theme="dark"] .ring-gray-300:not([class*="dark:ring-"]) {
  --tw-ring-color: var(--outline-variant);
}

/* Bare form elements without explicit theme classes.
   Narrow selector to avoid hitting checkbox/radio (which have their
   own styling and usually look fine in both themes). */
html[data-theme="dark"] input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"])):not([class*="bg-"]):not([class*="dark:"]),
html[data-theme="dark"] textarea:not([class*="bg-"]):not([class*="dark:"]),
html[data-theme="dark"] select:not([class*="bg-"]):not([class*="dark:"]) {
  background-color: var(--surface-container-lowest);
  color: var(--on-surface);
  border-color: var(--outline-variant);
}
/* Placeholder text on every input/textarea — unguarded because
   placeholder-less views are harmless and the fix is universal. */
html[data-theme="dark"] ::placeholder {
  color: var(--on-surface-muted);
  opacity: 1;
}
/* Autofill backgrounds in Chromium: the -webkit-autofill shadow
   override is the only reliable way to change them. Paired with
   color-scheme:dark in tokens.css which Chrome honours since 108. */
html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] textarea:-webkit-autofill,
html[data-theme="dark"] select:-webkit-autofill {
  -webkit-text-fill-color: var(--on-surface);
  -webkit-box-shadow: 0 0 0 1000px var(--surface-container-lowest) inset;
  caret-color: var(--on-surface);
  transition: background-color 5000s ease-in-out 0s;
}

/* Semantic status tints (bg-red-50/100, bg-green-50/100, etc.)
   used widely for alert-pills, status-badges, callout-panels.
   Remap to a dark-surface tinted with ~12% of the status hue so
   the pairing `bg-red-50 text-red-700` stays legible in dark
   (text stays crimson against a faintly-red-tinted dark surface). */
html[data-theme="dark"] .bg-red-50:not([class*="dark:bg-"]),
html[data-theme="dark"] .bg-red-100:not([class*="dark:bg-"]) {
  background-color: color-mix(in oklab, var(--error) 12%, var(--surface-container));
}
html[data-theme="dark"] .bg-amber-50:not([class*="dark:bg-"]),
html[data-theme="dark"] .bg-amber-100:not([class*="dark:bg-"]),
html[data-theme="dark"] .bg-yellow-50:not([class*="dark:bg-"]),
html[data-theme="dark"] .bg-yellow-100:not([class*="dark:bg-"]) {
  background-color: color-mix(in oklab, var(--warning) 12%, var(--surface-container));
}
html[data-theme="dark"] .bg-emerald-50:not([class*="dark:bg-"]),
html[data-theme="dark"] .bg-emerald-100:not([class*="dark:bg-"]),
html[data-theme="dark"] .bg-green-50:not([class*="dark:bg-"]),
html[data-theme="dark"] .bg-green-100:not([class*="dark:bg-"]) {
  background-color: color-mix(in oklab, var(--success) 12%, var(--surface-container));
}
html[data-theme="dark"] .bg-blue-50:not([class*="dark:bg-"]),
html[data-theme="dark"] .bg-blue-100:not([class*="dark:bg-"]),
html[data-theme="dark"] .bg-indigo-50:not([class*="dark:bg-"]),
html[data-theme="dark"] .bg-indigo-100:not([class*="dark:bg-"]) {
  background-color: color-mix(in oklab, var(--info) 12%, var(--surface-container));
}
html[data-theme="dark"] .bg-purple-50:not([class*="dark:bg-"]),
html[data-theme="dark"] .bg-purple-100:not([class*="dark:bg-"]),
html[data-theme="dark"] .bg-rose-50:not([class*="dark:bg-"]),
html[data-theme="dark"] .bg-rose-100:not([class*="dark:bg-"]),
html[data-theme="dark"] .bg-teal-50:not([class*="dark:bg-"]),
html[data-theme="dark"] .bg-teal-100:not([class*="dark:bg-"]) {
  background-color: color-mix(in oklab, var(--primary) 12%, var(--surface-container));
}

/* prefers-color-scheme mirrors for semantic tints */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .bg-red-50:not([class*="dark:bg-"]),
  html:not([data-theme="light"]) .bg-red-100:not([class*="dark:bg-"]) {
    background-color: color-mix(in oklab, var(--error) 12%, var(--surface-container));
  }
  html:not([data-theme="light"]) .bg-amber-50:not([class*="dark:bg-"]),
  html:not([data-theme="light"]) .bg-amber-100:not([class*="dark:bg-"]),
  html:not([data-theme="light"]) .bg-yellow-50:not([class*="dark:bg-"]),
  html:not([data-theme="light"]) .bg-yellow-100:not([class*="dark:bg-"]) {
    background-color: color-mix(in oklab, var(--warning) 12%, var(--surface-container));
  }
  html:not([data-theme="light"]) .bg-emerald-50:not([class*="dark:bg-"]),
  html:not([data-theme="light"]) .bg-emerald-100:not([class*="dark:bg-"]),
  html:not([data-theme="light"]) .bg-green-50:not([class*="dark:bg-"]),
  html:not([data-theme="light"]) .bg-green-100:not([class*="dark:bg-"]) {
    background-color: color-mix(in oklab, var(--success) 12%, var(--surface-container));
  }
  html:not([data-theme="light"]) .bg-blue-50:not([class*="dark:bg-"]),
  html:not([data-theme="light"]) .bg-blue-100:not([class*="dark:bg-"]),
  html:not([data-theme="light"]) .bg-indigo-50:not([class*="dark:bg-"]),
  html:not([data-theme="light"]) .bg-indigo-100:not([class*="dark:bg-"]) {
    background-color: color-mix(in oklab, var(--info) 12%, var(--surface-container));
  }
  html:not([data-theme="light"]) .bg-purple-50:not([class*="dark:bg-"]),
  html:not([data-theme="light"]) .bg-purple-100:not([class*="dark:bg-"]),
  html:not([data-theme="light"]) .bg-rose-50:not([class*="dark:bg-"]),
  html:not([data-theme="light"]) .bg-rose-100:not([class*="dark:bg-"]),
  html:not([data-theme="light"]) .bg-teal-50:not([class*="dark:bg-"]),
  html:not([data-theme="light"]) .bg-teal-100:not([class*="dark:bg-"]) {
    background-color: color-mix(in oklab, var(--primary) 12%, var(--surface-container));
  }
}

/* ---------- prefers-color-scheme fallback ----------------------
 * Mirror of the above for users who have not toggled; kept as a
 * separate media-query block so either branch can be audited in
 * isolation.
 */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .bg-white:not([class*="dark:bg-"]) {
    background-color: var(--surface-container-lowest);
  }
  html:not([data-theme="light"]) .bg-gray-50:not([class*="dark:bg-"]),
  html:not([data-theme="light"]) .bg-slate-50:not([class*="dark:bg-"]) {
    background-color: var(--surface-container-low);
  }
  html:not([data-theme="light"]) .bg-gray-100:not([class*="dark:bg-"]),
  html:not([data-theme="light"]) .bg-slate-100:not([class*="dark:bg-"]) {
    background-color: var(--surface-container);
  }

  html:not([data-theme="light"]) .text-slate-900:not([class*="dark:text-"]),
  html:not([data-theme="light"]) .text-gray-900:not([class*="dark:text-"]) {
    color: var(--on-surface);
  }
  html:not([data-theme="light"]) .text-slate-800:not([class*="dark:text-"]),
  html:not([data-theme="light"]) .text-slate-700:not([class*="dark:text-"]),
  html:not([data-theme="light"]) .text-gray-800:not([class*="dark:text-"]),
  html:not([data-theme="light"]) .text-gray-700:not([class*="dark:text-"]) {
    color: var(--on-surface-variant);
  }
  html:not([data-theme="light"]) .text-slate-600:not([class*="dark:text-"]),
  html:not([data-theme="light"]) .text-slate-500:not([class*="dark:text-"]),
  html:not([data-theme="light"]) .text-gray-600:not([class*="dark:text-"]),
  html:not([data-theme="light"]) .text-gray-500:not([class*="dark:text-"]) {
    color: var(--on-surface-muted);
  }

  html:not([data-theme="light"]) .border-slate-200:not([class*="dark:border-"]),
  html:not([data-theme="light"]) .border-slate-300:not([class*="dark:border-"]),
  html:not([data-theme="light"]) .border-gray-100:not([class*="dark:border-"]),
  html:not([data-theme="light"]) .border-gray-200:not([class*="dark:border-"]),
  html:not([data-theme="light"]) .border-gray-300:not([class*="dark:border-"]) {
    border-color: var(--outline-variant);
  }

  html:not([data-theme="light"]) input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"])):not([class*="bg-"]):not([class*="dark:"]),
  html:not([data-theme="light"]) textarea:not([class*="bg-"]):not([class*="dark:"]),
  html:not([data-theme="light"]) select:not([class*="bg-"]):not([class*="dark:"]) {
    background-color: var(--surface-container-lowest);
    color: var(--on-surface);
    border-color: var(--outline-variant);
  }
  html:not([data-theme="light"]) ::placeholder {
    color: var(--on-surface-muted);
    opacity: 1;
  }
  html:not([data-theme="light"]) input:-webkit-autofill,
  html:not([data-theme="light"]) textarea:-webkit-autofill,
  html:not([data-theme="light"]) select:-webkit-autofill {
    -webkit-text-fill-color: var(--on-surface);
    -webkit-box-shadow: 0 0 0 1000px var(--surface-container-lowest) inset;
    caret-color: var(--on-surface);
    transition: background-color 5000s ease-in-out 0s;
  }
}