/**
 * Accessibility styles for high contrast mode and enhanced focus indicators.
 * These styles are applied globally when accessibility settings are enabled.
 */

/* High Contrast Mode - Maximum Contrast (WCAG AAA) - Black and White Only */
.high-contrast-mode {
  --high-contrast-bg-primary: #FFFFFF;
  --high-contrast-bg-secondary: #FFFFFF;
  --high-contrast-text-primary: #000000;
  --high-contrast-text-secondary: #000000;
  --high-contrast-interactive-primary: #FFFFFF;
  --high-contrast-interactive-hover: #FFFFFF;
  --high-contrast-focus: #000000;
  --high-contrast-border: #000000;
}

/* Force maximum contrast on root and body */
.high-contrast-mode,
.high-contrast-mode body {
  background-color: #FFFFFF !important;
  color: #000000 !important;
}

/* Force all text elements to black */
.high-contrast-mode * {
  color: #000000 !important;
}

/* Override MUI theme colors aggressively */
.high-contrast-mode .MuiTypography-root,
.high-contrast-mode p,
.high-contrast-mode span,
.high-contrast-mode div,
.high-contrast-mode h1,
.high-contrast-mode h2,
.high-contrast-mode h3,
.high-contrast-mode h4,
.high-contrast-mode h5,
.high-contrast-mode h6,
.high-contrast-mode li,
.high-contrast-mode td,
.high-contrast-mode th,
.high-contrast-mode label {
  color: #000000 !important;
}

/* InputLabel - CRITICAL: White opaque background behind text to break border line */
/* Keep label in original position but ensure text has white background to prevent strikethrough */
.high-contrast-mode .MuiInputLabel-root,
.high-contrast-mode .MuiFormLabel-root {
  color: #000000 !important;
  /* Don't override Material-UI's positioning - let it stay in default position */
  background-color: transparent !important;
  /* CRITICAL: Ensure InputLabel root renders above fieldset border */
  position: relative !important;
  z-index: 10 !important;
}

/* Ensure InputLabel text container ALWAYS has white opaque background */
/* This applies to labels in all states (normal, focused, shrunk) */
/* CRITICAL: Must render above fieldset border (z-index) */
.high-contrast-mode .MuiInputLabel-root > span,
.high-contrast-mode .MuiFormLabel-root > span,
.high-contrast-mode .MuiTextField-root .MuiInputLabel-root > span,
.high-contrast-mode .MuiFormControl-root .MuiInputLabel-root > span {
  background-color: #FFFFFF !important;
  color: #000000 !important;
  /* Increased padding to fully cover 2px border line */
  padding-left: 6px !important;
  padding-right: 6px !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  /* Ensure background is opaque and extends fully */
  opacity: 1 !important;
  display: inline-block !important;
  /* CRITICAL: Render above fieldset border */
  position: relative !important;
  z-index: 10 !important;
}

/* The notchedOutline legend (which creates the notch) needs white background */
/* The legend creates the gap in the border - it should be transparent/hidden */
/* Only the InputLabel above it should be visible with white background */
.high-contrast-mode .MuiOutlinedInput-notchedOutline legend {
  background-color: #FFFFFF !important;
  /* Make legend text transparent since InputLabel is the visible label */
  color: transparent !important;
  /* Ensure legend doesn't interfere with InputLabel */
  pointer-events: none;
  /* CRITICAL: Legend must render above fieldset border but below label */
  position: relative !important;
  z-index: 5 !important;
}

/* Legend span should be transparent - InputLabel is what's visible */
.high-contrast-mode .MuiOutlinedInput-notchedOutline legend span {
  color: transparent !important;
  background-color: transparent !important;
}

/* Force all backgrounds to white (except backdrops) */
.high-contrast-mode main,
.high-contrast-mode [role="main"],
.high-contrast-mode .MuiCard-root,
.high-contrast-mode .MuiPaper-root:not(.MuiBackdrop-root):not(.MuiModal-root):not([class*="MuiDrawer"]),
.high-contrast-mode .MuiBox-root:not(.MuiBackdrop-root),
.high-contrast-mode .MuiContainer-root,
.high-contrast-mode .MuiStack-root {
  background-color: #FFFFFF !important;
  color: #000000 !important;
}

/* Force all borders to black and thick */
.high-contrast-mode * {
  border-color: #000000 !important;
}

.high-contrast-mode .MuiOutlinedInput-notchedOutline,
.high-contrast-mode .MuiOutlinedInput-root,
.high-contrast-mode .MuiInputBase-root:not(.MuiBackdrop-root),
.high-contrast-mode .MuiTextField-root,
.high-contrast-mode .MuiCard-root,
.high-contrast-mode .MuiPaper-root:not(.MuiBackdrop-root) {
  border-color: #000000 !important;
  border-width: 2px !important;
}

/* CRITICAL: Create stacking context for InputBase so z-index works */
.high-contrast-mode .MuiOutlinedInput-root,
.high-contrast-mode .MuiInputBase-root {
  position: relative !important;
}

/* Form inputs - white background, black text, black border */
.high-contrast-mode .MuiTextField-root .MuiOutlinedInput-root,
.high-contrast-mode .MuiInputBase-root:not(.MuiBackdrop-root),
.high-contrast-mode input:not([type="hidden"]):not(.MuiBackdrop-root),
.high-contrast-mode textarea:not(.MuiBackdrop-root),
.high-contrast-mode select:not(.MuiBackdrop-root) {
  background-color: #FFFFFF !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
}

/* FormControl - white background so labels inherit it */
/* CRITICAL: Create stacking context so InputLabel z-index works relative to fieldset */
.high-contrast-mode .MuiFormControl-root {
  background-color: #FFFFFF !important;
  position: relative !important;
}

.high-contrast-mode .MuiOutlinedInput-notchedOutline {
  border-color: #000000 !important;
  border-width: 2px !important;
  /* CRITICAL: Fieldset border must render below label */
  position: relative !important;
  z-index: 1 !important;
}

/* CRITICAL: Ensure notched outline creates proper gap for label */
/* Material-UI's notchedOutline automatically creates a notch where the label sits */
/* The label's white background breaks the border line */
.high-contrast-mode .MuiOutlinedInput-notchedOutline legend {
  /* Ensure legend (notch) is properly sized for label */
  max-width: 100%;
  /* White background for the notch area to break border */
  background-color: #FFFFFF !important;
}

/* Ensure InputLabel text always has white opaque background regardless of state */
/* This prevents border line from appearing to strike through the text */
/* Don't override Material-UI's positioning - just add white background */
.high-contrast-mode .MuiTextField-root .MuiInputLabel-root > span,
.high-contrast-mode .MuiFormControl-root .MuiInputLabel-root > span {
  background-color: #FFFFFF !important;
  color: #000000 !important;
  /* Increased padding to fully cover 2px border line */
  padding-left: 6px !important;
  padding-right: 6px !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  opacity: 1 !important;
  display: inline-block !important;
  /* Don't add position or z-index - let Material-UI handle positioning naturally */
}

/* Buttons - white background, black text, black border */
.high-contrast-mode .MuiButton-root:not(.Mui-disabled),
.high-contrast-mode button:not(.MuiBackdrop-root):not(.Mui-disabled),
.high-contrast-mode [role="button"]:not(.MuiBackdrop-root):not(.Mui-disabled) {
  background-color: #FFFFFF !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  font-weight: 600 !important;
}

.high-contrast-mode .MuiButton-root:hover:not(.Mui-disabled),
.high-contrast-mode button:hover:not(.MuiBackdrop-root):not(.Mui-disabled) {
  background-color: #FFFFFF !important;
  color: #000000 !important;
}

/* Links - black, underlined */
.high-contrast-mode a:not(.MuiButton-root) {
  color: #000000 !important;
  text-decoration: underline !important;
  font-weight: 600 !important;
}

.high-contrast-mode a:hover:not(.MuiButton-root) {
  color: #000000 !important;
}

/* Icons - force black */
.high-contrast-mode svg:not([fill="none"]),
.high-contrast-mode .MuiSvgIcon-root {
  color: #000000 !important;
  fill: #000000 !important;
}

/* Buttons with icons - keep black icons */
.high-contrast-mode .MuiButton-root svg,
.high-contrast-mode button svg {
  color: #000000 !important;
  fill: #000000 !important;
}

/* Chips and badges - white background, black text */
.high-contrast-mode .MuiChip-root {
  background-color: #FFFFFF !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
}

/* Tables - black borders, white background */
.high-contrast-mode .MuiTable-root,
.high-contrast-mode .MuiTableContainer-root {
  border: 2px solid #000000 !important;
}

.high-contrast-mode .MuiTableCell-root {
  border-color: #000000 !important;
  border-width: 1px !important;
  background-color: #FFFFFF !important;
  color: #000000 !important;
}

/* Dividers - black and thick */
.high-contrast-mode .MuiDivider-root {
  background-color: #000000 !important;
  border-color: #000000 !important;
  border-width: 2px !important;
}

/* Explicitly preserve backdrop styling - CRITICAL to prevent white overlay */
.high-contrast-mode .MuiBackdrop-root {
  background-color: rgba(0, 0, 0, 0.7) !important;
}

/* Preserve modal and drawer styling - but ensure high contrast inside */
.high-contrast-mode .MuiModal-root .MuiPaper-root,
.high-contrast-mode .MuiDrawer-root .MuiPaper-root,
.high-contrast-mode [class*="MuiDrawer"] .MuiPaper-root {
  background-color: #FFFFFF !important;
  color: #000000 !important;
  border: 3px solid #000000 !important;
}

/* Enhanced Focus Indicators - black outline */
.enhanced-focus-mode *:focus {
  outline: 3px solid #000000 !important;
  outline-offset: 2px !important;
  border-radius: 2px !important;
  box-shadow: 0 0 0 1px #FFFFFF, 0 0 0 4px #000000 !important;
}

.enhanced-focus-mode button:focus,
.enhanced-focus-mode a:focus,
.enhanced-focus-mode [role="button"]:focus {
  outline: 3px solid #000000 !important;
  outline-offset: 2px !important;
}

/* Font Size Adjustments */
:root {
  --accessibility-font-size: 1rem;
}

/* Skip Links Styles */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background-color: #000;
  color: #fff;
  padding: 8px 16px;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  z-index: 1301;
}

.skip-link:focus {
  top: 0;
  outline: 3px solid #000000;
  outline-offset: 2px;
}