@import "tailwindcss";
@plugin "daisyui";
@plugin "@tailwindcss/typography";

@theme {
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);

  --color-truevuln-blue: #0066FF;
  --color-securis-dark: #1F2937;
  --color-securis-gray: #F3F4F6;
  --color-securis-danger: #EF4444;
  --color-securis-success: #10B981;
  --color-securis-warning: #F59E0B;
}

:root {
  --background: #F3F4F6;
  /* Light gray background overall */

  /* Force the browser to render form controls (inputs, selects, date pickers,
   * scrollbars) in the LIGHT scheme even when the user's OS is set to Dark Mode.
   * Without this, Win11/macOS Dark Mode inverts the chrome of inputs while the
   * page background stays light, making placeholders, autofill text, and date
   * picker dropdowns unreadable. */
  color-scheme: light;
}

html,
body {
  color-scheme: light;
  background-color: var(--background);
  color: #111827; /* gray-900 */
}

/* Autofill (Chrome/Edge) reverts to a yellow/blue background when the OS is in
 * dark mode. Force it to the page palette. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #111827 !important;
  caret-color: #111827;
  transition: background-color 5000s ease-in-out 0s;
}

/* Placeholder color stays readable on the light-form-on-dark-OS combo. */
input::placeholder,
textarea::placeholder {
  color: #9ca3af; /* gray-400 */
  opacity: 1;
}

/* Always-visible horizontal scrollbar for tables (macOS hides overlay scrollbars).
   Apply via class so we don't affect every scroll container globally. */
.scroll-visible-x {
  scrollbar-width: auto;
  scrollbar-color: #94a3b8 #f1f5f9;
}
.scroll-visible-x::-webkit-scrollbar {
  height: 12px;
  background: #f1f5f9;
}
.scroll-visible-x::-webkit-scrollbar-thumb {
  background: #94a3b8;
  border-radius: 6px;
  border: 2px solid #f1f5f9;
}
.scroll-visible-x::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}
/* ============================================================
 * Theme layer — light (default) / mid (soft dark) / dark (full dark).
 *
 * The pages are written with hardcoded light utilities (bg-white,
 * text-gray-900, …). Instead of rewriting every page with dark:
 * variants, we remap the light-surface utilities under
 * html[data-theme="mid"|"dark"]. These rules are UN-layered, so they
 * beat Tailwind's @layer utilities without !important (CSS cascade
 * layers: un-layered author CSS wins).
 *
 * Deliberately NOT remapped: bg-gray-800/900 (the sidebar is already
 * dark and must stay), brand colors, and white-on-color button text.
 * ============================================================ */

html[data-theme="mid"] {
  --tv-bg: #222933;        /* page background */
  --tv-surface: #2b3440;   /* cards, tables, inputs */
  --tv-surface-2: #333e4d; /* table heads, subtle fills */
  --tv-surface-3: #3c4a5c; /* hover fills, chips */
  --tv-border: #46546a;
  --tv-border-soft: #3a4657;
  --tv-text: #e7ebf0;
  --tv-text-soft: #c3cad4;
  --tv-text-muted: #94a0ae;
}
html[data-theme="dark"] {
  --tv-bg: #0b0f16;
  --tv-surface: #131a24;
  --tv-surface-2: #1a2330;
  --tv-surface-3: #232e3e;
  --tv-border: #2e3a4b;
  --tv-border-soft: #26303f;
  --tv-text: #edf1f6;
  --tv-text-soft: #c6cdd6;
  --tv-text-muted: #8e99a8;
}

html[data-theme="mid"],
html[data-theme="dark"] {
  color-scheme: dark;
}
html[data-theme="mid"] body,
html[data-theme="dark"] body {
  color-scheme: dark;
  background-color: var(--tv-bg);
  color: var(--tv-text);
}

/* ---- neutral surfaces ---- */
html[data-theme="mid"] .bg-white, html[data-theme="dark"] .bg-white,
html[data-theme="mid"] .bg-base-100, html[data-theme="dark"] .bg-base-100 { background-color: var(--tv-surface); }
html[data-theme="mid"] .bg-gray-50, html[data-theme="dark"] .bg-gray-50 { background-color: var(--tv-surface-2); }
html[data-theme="mid"] .bg-gray-100, html[data-theme="dark"] .bg-gray-100 { background-color: var(--tv-surface-3); }
html[data-theme="mid"] .bg-gray-200, html[data-theme="dark"] .bg-gray-200 { background-color: var(--tv-surface-3); }
html[data-theme="mid"] .hover\:bg-gray-50:hover, html[data-theme="dark"] .hover\:bg-gray-50:hover,
html[data-theme="mid"] .hover\:bg-white:hover, html[data-theme="dark"] .hover\:bg-white:hover { background-color: var(--tv-surface-3); }
html[data-theme="mid"] .hover\:bg-gray-100:hover, html[data-theme="dark"] .hover\:bg-gray-100:hover,
html[data-theme="mid"] .hover\:bg-gray-200:hover, html[data-theme="dark"] .hover\:bg-gray-200:hover { background-color: var(--tv-border-soft); }

/* ---- neutral text ---- */
html[data-theme="mid"] .text-gray-900, html[data-theme="dark"] .text-gray-900,
html[data-theme="mid"] .text-black, html[data-theme="dark"] .text-black,
html[data-theme="mid"] .text-base-content, html[data-theme="dark"] .text-base-content { color: var(--tv-text); }
html[data-theme="mid"] .text-gray-800, html[data-theme="dark"] .text-gray-800,
html[data-theme="mid"] .text-gray-700, html[data-theme="dark"] .text-gray-700 { color: var(--tv-text-soft); }
html[data-theme="mid"] .text-gray-600, html[data-theme="dark"] .text-gray-600,
html[data-theme="mid"] .text-gray-500, html[data-theme="dark"] .text-gray-500 { color: var(--tv-text-muted); }
html[data-theme="mid"] .text-gray-400, html[data-theme="dark"] .text-gray-400 { color: #7e8896; }
html[data-theme="mid"] .text-gray-300, html[data-theme="dark"] .text-gray-300 { color: #67707e; }
html[data-theme="mid"] .hover\:text-gray-900:hover, html[data-theme="dark"] .hover\:text-gray-900:hover,
html[data-theme="mid"] .hover\:text-gray-700:hover, html[data-theme="dark"] .hover\:text-gray-700:hover { color: var(--tv-text); }

/* ---- borders / dividers / rings ---- */
html[data-theme="mid"] .border-gray-100, html[data-theme="dark"] .border-gray-100,
html[data-theme="mid"] .border-gray-200, html[data-theme="dark"] .border-gray-200,
html[data-theme="mid"] .border-base-300, html[data-theme="dark"] .border-base-300 { border-color: var(--tv-border-soft); }
html[data-theme="mid"] .border-gray-300, html[data-theme="dark"] .border-gray-300 { border-color: var(--tv-border); }
html[data-theme="mid"] .divide-gray-100 > :not([hidden]) ~ :not([hidden]), html[data-theme="dark"] .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
html[data-theme="mid"] .divide-gray-200 > :not([hidden]) ~ :not([hidden]), html[data-theme="dark"] .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--tv-border-soft); }
html[data-theme="mid"] .ring-gray-300, html[data-theme="dark"] .ring-gray-300 { --tw-ring-color: var(--tv-border); }
html[data-theme="mid"] .bg-base-300, html[data-theme="dark"] .bg-base-300 { background-color: var(--tv-border-soft); }

/* ---- form controls ---- */
html[data-theme="mid"] input, html[data-theme="dark"] input,
html[data-theme="mid"] select, html[data-theme="dark"] select,
html[data-theme="mid"] textarea, html[data-theme="dark"] textarea {
  background-color: var(--tv-surface-2);
  color: var(--tv-text);
  border-color: var(--tv-border);
}
html[data-theme="mid"] input::placeholder, html[data-theme="dark"] input::placeholder,
html[data-theme="mid"] textarea::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--tv-text-muted); }
html[data-theme="mid"] input:-webkit-autofill, html[data-theme="dark"] input:-webkit-autofill {
  /* !important needed: the light-scheme autofill rule above uses it too */
  -webkit-box-shadow: 0 0 0 1000px var(--tv-surface-2) inset !important;
  -webkit-text-fill-color: var(--tv-text) !important;
  caret-color: var(--tv-text);
}

/* ---- tinted badges: pastel fills → translucent dark tints ---- */
html[data-theme="mid"] .bg-red-50, html[data-theme="dark"] .bg-red-50 { background-color: rgba(239,68,68,.12); }
html[data-theme="mid"] .bg-red-100, html[data-theme="dark"] .bg-red-100 { background-color: rgba(239,68,68,.2); }
html[data-theme="mid"] .bg-green-50, html[data-theme="dark"] .bg-green-50 { background-color: rgba(16,185,129,.12); }
html[data-theme="mid"] .bg-green-100, html[data-theme="dark"] .bg-green-100 { background-color: rgba(16,185,129,.2); }
html[data-theme="mid"] .bg-emerald-100, html[data-theme="dark"] .bg-emerald-100 { background-color: rgba(16,185,129,.2); }
html[data-theme="mid"] .bg-blue-50, html[data-theme="dark"] .bg-blue-50 { background-color: rgba(59,130,246,.14); }
html[data-theme="mid"] .bg-blue-100, html[data-theme="dark"] .bg-blue-100 { background-color: rgba(59,130,246,.22); }
html[data-theme="mid"] .bg-yellow-50, html[data-theme="dark"] .bg-yellow-50 { background-color: rgba(234,179,8,.12); }
html[data-theme="mid"] .bg-yellow-100, html[data-theme="dark"] .bg-yellow-100 { background-color: rgba(234,179,8,.2); }
html[data-theme="mid"] .bg-orange-100, html[data-theme="dark"] .bg-orange-100 { background-color: rgba(249,115,22,.2); }
html[data-theme="mid"] .bg-purple-100, html[data-theme="dark"] .bg-purple-100 { background-color: rgba(168,85,247,.2); }
html[data-theme="mid"] .bg-amber-50, html[data-theme="dark"] .bg-amber-50 { background-color: rgba(245,158,11,.12); }

/* readable tinted text on dark */
html[data-theme="mid"] .text-red-800, html[data-theme="dark"] .text-red-800,
html[data-theme="mid"] .text-red-700, html[data-theme="dark"] .text-red-700 { color: #f87171; }
html[data-theme="mid"] .text-red-600, html[data-theme="dark"] .text-red-600 { color: #ef7d7d; }
html[data-theme="mid"] .text-green-700, html[data-theme="dark"] .text-green-700,
html[data-theme="mid"] .text-green-600, html[data-theme="dark"] .text-green-600 { color: #4ade80; }
html[data-theme="mid"] .text-emerald-700, html[data-theme="dark"] .text-emerald-700 { color: #34d399; }
html[data-theme="mid"] .text-blue-700, html[data-theme="dark"] .text-blue-700,
html[data-theme="mid"] .text-blue-600, html[data-theme="dark"] .text-blue-600 { color: #60a5fa; }
html[data-theme="mid"] .text-yellow-800, html[data-theme="dark"] .text-yellow-800,
html[data-theme="mid"] .text-yellow-700, html[data-theme="dark"] .text-yellow-700 { color: #facc15; }
html[data-theme="mid"] .text-orange-700, html[data-theme="dark"] .text-orange-700,
html[data-theme="mid"] .text-orange-600, html[data-theme="dark"] .text-orange-600 { color: #fb923c; }
html[data-theme="mid"] .text-amber-700, html[data-theme="dark"] .text-amber-700,
html[data-theme="mid"] .text-amber-600, html[data-theme="dark"] .text-amber-600 { color: #fbbf24; }
html[data-theme="mid"] .text-purple-700, html[data-theme="dark"] .text-purple-700 { color: #c084fc; }
html[data-theme="mid"] .text-indigo-600, html[data-theme="dark"] .text-indigo-600 { color: #818cf8; }

/* tinted borders */
html[data-theme="mid"] .border-red-200, html[data-theme="dark"] .border-red-200,
html[data-theme="mid"] .border-red-300, html[data-theme="dark"] .border-red-300 { border-color: rgba(239,68,68,.4); }
html[data-theme="mid"] .border-blue-200, html[data-theme="dark"] .border-blue-200 { border-color: rgba(59,130,246,.4); }
html[data-theme="mid"] .border-orange-200, html[data-theme="dark"] .border-orange-200 { border-color: rgba(249,115,22,.4); }

/* scrollbars follow the theme */
html[data-theme="mid"] .scroll-visible-x, html[data-theme="dark"] .scroll-visible-x {
  scrollbar-color: var(--tv-border) var(--tv-surface-2);
}
html[data-theme="mid"] .scroll-visible-x::-webkit-scrollbar, html[data-theme="dark"] .scroll-visible-x::-webkit-scrollbar { background: var(--tv-surface-2); }
html[data-theme="mid"] .scroll-visible-x::-webkit-scrollbar-thumb, html[data-theme="dark"] .scroll-visible-x::-webkit-scrollbar-thumb {
  background: var(--tv-border);
  border-color: var(--tv-surface-2);
}

/* ---- opacity / arbitrary-value variants (own class names, missed by the
 * plain remaps above — tester: widget headers + sticky list header stayed
 * light-gray under light text) ---- */
html[data-theme="mid"] .bg-gray-50\/50, html[data-theme="dark"] .bg-gray-50\/50 { background-color: var(--tv-surface-2); }
html[data-theme="mid"] .bg-white\/50, html[data-theme="dark"] .bg-white\/50 { background-color: var(--tv-surface-3); }
/* vulnerabilities list: sticky header band uses an arbitrary value of the
 * light page background (#F3F4F6 at 95%) */
html[data-theme="mid"] .bg-\[\#F3F4F6\]\/95, html[data-theme="dark"] .bg-\[\#F3F4F6\]\/95 { background-color: var(--tv-bg); }
html[data-theme="mid"] .group:hover .group-hover\:bg-blue-50\/30, html[data-theme="dark"] .group:hover .group-hover\:bg-blue-50\/30 { background-color: var(--tv-surface-3); }

/* ---- indigo family (AI widgets: pastel gradient + indigo text) ---- */
html[data-theme="mid"] .bg-gradient-to-br, html[data-theme="dark"] .bg-gradient-to-br {
  background-image: none;
  background-color: var(--tv-surface);
}
html[data-theme="mid"] .bg-indigo-50, html[data-theme="dark"] .bg-indigo-50,
html[data-theme="mid"] .hover\:bg-indigo-50:hover, html[data-theme="dark"] .hover\:bg-indigo-50:hover { background-color: rgba(99,102,241,.14); }
html[data-theme="mid"] .bg-indigo-100, html[data-theme="dark"] .bg-indigo-100 { background-color: rgba(99,102,241,.22); }
html[data-theme="mid"] .text-indigo-700, html[data-theme="dark"] .text-indigo-700,
html[data-theme="mid"] .text-indigo-800, html[data-theme="dark"] .text-indigo-800,
html[data-theme="mid"] .text-indigo-900, html[data-theme="dark"] .text-indigo-900 { color: #a5b4fc; }
html[data-theme="mid"] .hover\:text-indigo-800:hover, html[data-theme="dark"] .hover\:text-indigo-800:hover { color: #c7d2fe; }
html[data-theme="mid"] .border-indigo-100, html[data-theme="dark"] .border-indigo-100,
html[data-theme="mid"] .border-indigo-200, html[data-theme="dark"] .border-indigo-200 { border-color: rgba(99,102,241,.35); }

/* daisyui base-200 (used by a few shells) */
html[data-theme="mid"] .bg-base-200, html[data-theme="dark"] .bg-base-200 { background-color: var(--tv-surface-2); }
