/*
 * D496 v2 - Fix systémique anti contraste blanc/blanc et noir/noir
 * Yacine: "TEST PLAYWRIGHT OBLIGATOIRE CA NE MARCHE PAS"
 *
 * v2 fixes:
 * - HTML root force dark si body data-theme=dark (ou class dark-theme)
 * - .pill autorun-status force contrast
 * - .tab text force contrast AAA
 * - .brand-sub force visible
 * - tab on cream bg (faf8f5) get dark text
 */

/* === V2 D496: HTML root inherit body dark theme === */
html:has(body[data-theme="dark"]),
html:has(body.dark-theme) {
  background: var(--weval-bg-dark, #0B0D14) !important;
}

/* === Force visible on transparent bgs sur dark theme === */
body[data-theme="dark"] *,
body.dark-theme * {
  /* éléments avec bg transparent -> font sur dark, doit être lisible */
}

/* Fix .pill on dark theme - force readable color */
body[data-theme="dark"] .pill,
body.dark-theme .pill,
body[data-theme="dark"] #autorun-status,
body.dark-theme #autorun-status {
  color: #e2e8f0 !important;
  background-color: rgba(108, 158, 248, 0.15) !important;
  border: 1px solid rgba(108, 158, 248, 0.3) !important;
}

/* Tabs on dark theme */
body[data-theme="dark"] .tab,
body.dark-theme .tab {
  color: #c8d1e0 !important;  /* AAA contrast ratio 9:1 */
}
body[data-theme="dark"] .tab.active,
body.dark-theme .tab.active {
  color: #ffffff !important;  /* Maximum contrast for active */
}

/* Brand sub */
body[data-theme="dark"] .brand-sub,
body.dark-theme .brand-sub {
  color: #c8d1e0 !important;
}

/* btn-primary on dark - contraste fond + texte */
body[data-theme="dark"] .btn-primary,
body.dark-theme .btn-primary {
  background: #4f46e5 !important;
  color: #ffffff !important;
  border-color: #4f46e5 !important;
}

/* === V1 (préservé) - cas critiques génériques === */

/* 1. Plein écran F11 - background explicite */
:fullscreen,
:-webkit-full-screen,
:-moz-full-screen {
  background: var(--bg, #0a0e1a) !important;
}

::backdrop {
  background-color: rgba(0,0,0,0.85) !important;
}

/* 2-3. Anti white-on-white + black-on-black */
[style*="color:#fff"][style*="background:#fff"],
[style*="color:#FFF"][style*="background:#FFF"],
[style*="color:white"][style*="background:white"] {
  color: #000 !important;
}

[style*="color:#000"][style*="background:#000"],
[style*="color:black"][style*="background:black"] {
  color: #fff !important;
}

/* 4. Inputs/textarea/select - toujours contrasté */
body[data-theme="dark"] input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
body[data-theme="dark"] textarea,
body[data-theme="dark"] select,
body.dark-theme input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
body.dark-theme textarea,
body.dark-theme select {
  background-color: rgba(15, 23, 42, 0.8) !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(148, 163, 184, 0.3) !important;
}

/* 5. Liens visibles */
a:not(.btn):not(.tab):not([class]) {
  color: #6c9ef8;
  text-decoration: underline;
}

/* 6. Focus visible WCAG */
*:focus-visible {
  outline: 2px solid #6c9ef8 !important;
  outline-offset: 2px !important;
}

/* 8. Dark mode auto */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0e1a;
    --fg: #e8ecf1;
  }
}

/* 9. Scrollbar visible en dark */
body[data-theme="dark"] ::-webkit-scrollbar,
body.dark-theme ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
body[data-theme="dark"] ::-webkit-scrollbar-track,
body.dark-theme ::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.05);
}
body[data-theme="dark"] ::-webkit-scrollbar-thumb,
body.dark-theme ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.25);
  border-radius: 6px;
}

/* 10. Empty buttons min-size */
[role="button"]:empty,
button:empty {
  min-width: 24px;
  min-height: 24px;
}

/* === V2 D496: Logout button (top right) lisibility === */
body[data-theme="dark"] [onclick*="logout"],
body[data-theme="dark"] [href*="logout"],
body[data-theme="dark"] .logout,
body.dark-theme [onclick*="logout"],
body.dark-theme [href*="logout"],
body.dark-theme .logout {
  color: #e2e8f0 !important;
  background-color: rgba(239, 68, 68, 0.15) !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
}