/* ============================================================================
   ESAFETY COMMISSIONER - FormFactor Theme
   ============================================================================
   Layers on top of the FormFactor --ff-* design token system.
   Section 1: Font imports
   Section 2: --ff-* token overrides (portal chrome)
   Section 3: MUI + FormRender component overrides (form filling)

   DESIGN REFERENCE: https://www.esafety.gov.au/
   ============================================================================ */

/* ==========================================================================
   Section 1: Font Imports
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500;600;700&family=Work+Sans:wght@400;500;600;700&display=swap');

/* ==========================================================================
   Section 2: --ff-* Token Overrides
   ========================================================================== */

:root {
  /* Brand */
  --ff-primary: #1b324b;
  --ff-primary-hover: #1b324b;
  --ff-primary-light: #ECEDF9;

  /* Semantic */
  --ff-secondary: #6D6D6D;
  --ff-success: #0B996A;
  --ff-success-light: #E5F6F0;
  --ff-warning: #F69900;
  --ff-warning-light: #FEF6E6;
  --ff-error: #D60000;
  --ff-error-light: #FBEAEA;

  /* Surfaces */
  --ff-bg: #FFFFFF;
  --ff-surface: #FFFFFF;
  --ff-surface-hover: #F5F5F5;
  --ff-border: #D3D3D3;
  --ff-border-strong: #6D6D6D;

  /* Text */
  --ff-text: #231f20;
  --ff-text-secondary: #6D6D6D;
  --ff-text-muted: #6D6D6D;
  --ff-text-inverse: #FFFFFF;

  /* Typography */
  --ff-font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Radii — eSafety uses tighter corners */
  --ff-radius: 4px;
  --ff-radius-lg: 8px;
  --ff-radius-sm: 4px;

  /* Shadows */
  --ff-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --ff-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --ff-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

  /* Footer — eSafety navy */
  --ff-footer-bg: #1b324b;
  --ff-footer-text: #9ca3af;
  --ff-footer-heading: #e8eaed;
  --ff-footer-link: #93b4e0;
  --ff-footer-border: #2d3a4d;
}

/* Heading font override — eSafety uses Roboto Slab for headings */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Roboto Slab', 'Work Sans', sans-serif !important;
}

/* ==========================================================================
   Section 3: MUI + FormRender Component Overrides
   ========================================================================== */

/* ----- Global MUI Font ----- */
[class*="Mui"] {
  font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* ----- Headings inside MUI ----- */
.MuiTypography-h1, .MuiTypography-h2, .MuiTypography-h3,
.MuiTypography-h4, .MuiTypography-h5, .MuiTypography-h6 {
  font-family: 'Roboto Slab', 'Work Sans', sans-serif !important;
  color: #1b324b !important;
  font-weight: 700 !important;
}

/* FormFactor section titles */
.ddf-section-title,
.ddf-section > .MuiTypography-h5,
.ddf-section > .MuiTypography-h6 {
  font-family: 'Roboto Slab', 'Work Sans', sans-serif !important;
  color: #1b324b !important;
  font-weight: 700 !important;
}

/* ----- Form Labels ----- */
.MuiInputLabel-root,
.MuiFormLabel-root {
  font-weight: 500 !important;
}

.MuiInputLabel-root.Mui-focused {
  color: var(--ff-primary) !important;
}

.MuiInputLabel-root.Mui-error {
  color: var(--ff-error) !important;
}

/* CRITICAL: Required field asterisk must stay red */
.MuiInputLabel-asterisk {
  color: var(--ff-error) !important;
}

/* FormFactor field labels */
.ddf-field-label {
  font-weight: 600 !important;
}

/* ----- Form Inputs ----- */
.MuiOutlinedInput-notchedOutline {
  border-color: var(--ff-border-strong) !important;
}

.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: var(--ff-primary) !important;
}

.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--ff-primary) !important;
  border-width: 2px !important;
}

.MuiOutlinedInput-root.Mui-error .MuiOutlinedInput-notchedOutline {
  border-color: var(--ff-error) !important;
}

.MuiOutlinedInput-root.Mui-disabled {
  background-color: var(--ff-surface-hover) !important;
}

/* Helper Text */
.MuiFormHelperText-root {
  font-size: 0.85rem !important;
}

.MuiFormHelperText-root.Mui-error,
.MuiFormHelperText-root.text-red-700 {
  color: var(--ff-error) !important;
  font-weight: 500 !important;
}

.MuiFormHelperText-root.Mui-error .MuiTypography-root,
.MuiFormHelperText-root.text-red-700 .MuiTypography-root {
  color: inherit !important;
}

/* ----- Checkboxes & Radios ----- */
.MuiCheckbox-root,
.MuiRadio-root {
  color: var(--ff-border-strong) !important;
}

.MuiCheckbox-colorPrimary.Mui-checked,
.MuiRadio-colorPrimary.Mui-checked {
  color: var(--ff-primary) !important;
}

/* ----- Buttons ----- */
/* Primary — eSafety hover inverts to outlined */
.MuiButton-containedPrimary {
  font-weight: 700 !important;
  text-transform: none !important;
  padding: 10px 24px !important;
  font-size: 1rem !important;
  box-shadow: var(--ff-shadow-sm) !important;
}

.MuiButton-containedPrimary:hover {
  background-color: var(--ff-surface) !important;
  color: var(--ff-primary) !important;
  border: 2px solid var(--ff-primary) !important;
  box-shadow: var(--ff-shadow-md) !important;
}

.MuiButton-containedPrimary:active {
  background-color: #3a48b0 !important;
  color: var(--ff-text-inverse) !important;
}

.MuiButton-containedPrimary:focus {
  box-shadow: 0 0 0 3px rgba(87, 103, 220, 0.3) !important;
}

/* Outlined */
.MuiButton-outlinedPrimary {
  border: 2px solid var(--ff-primary) !important;
  font-weight: 700 !important;
  text-transform: none !important;
  padding: 8px 20px !important;
}

.MuiButton-outlinedPrimary:hover {
  background-color: var(--ff-primary-light) !important;
}

.MuiButton-outlinedPrimary:focus {
  box-shadow: 0 0 0 3px rgba(87, 103, 220, 0.3) !important;
}

/* Text */
.MuiButton-textPrimary {
  font-weight: 500 !important;
  text-transform: none !important;
}

.MuiButton-textPrimary:hover {
  background-color: var(--ff-primary-light) !important;
}

/* ----- Alerts ----- */
.MuiAlert-root {
  border-radius: var(--ff-radius) !important;
  box-shadow: var(--ff-shadow-sm) !important;
}

.MuiAlert-standardInfo {
  background-color: var(--ff-primary-light) !important;
  border-left: 4px solid var(--ff-primary) !important;
}

.MuiAlert-standardWarning {
  background-color: var(--ff-warning-light) !important;
  border-left: 4px solid var(--ff-warning) !important;
}

.MuiAlert-standardError {
  background-color: var(--ff-error-light) !important;
  border-left: 4px solid var(--ff-error) !important;
}

.MuiAlert-standardSuccess {
  background-color: var(--ff-success-light) !important;
  border-left: 4px solid var(--ff-success) !important;
}

.MuiAlert-icon {
  color: inherit !important;
  opacity: 0.9 !important;
}

.MuiAlertTitle-root {
  font-weight: 700 !important;
}

/* ----- Stepper (font only — let MUI handle colors/states) ----- */
.MuiStepLabel-label {
  font-family: 'Work Sans', sans-serif !important;
}

.MuiStepIcon-text {
  font-family: 'Work Sans', sans-serif !important;
}

/* ----- Dialogs ----- */
.MuiDialog-paper {
  border-radius: var(--ff-radius-lg) !important;
  box-shadow: var(--ff-shadow-lg) !important;
}

.MuiDialogTitle-root {
  border-bottom: 1px solid var(--ff-border) !important;
}

.MuiDialogTitle-root h2 {
  font-family: 'Roboto Slab', 'Work Sans', sans-serif !important;
  font-weight: 700 !important;
  color: #1b324b !important;
}

.MuiDialogActions-root {
  border-top: 1px solid var(--ff-border) !important;
}

/* ----- Tables ----- */
.MuiTableHead-root {
  background-color: var(--ff-surface-hover) !important;
}

.MuiTableCell-head {
  font-weight: 600 !important;
  border-bottom: 2px solid var(--ff-border) !important;
}

.MuiTableRow-root:hover {
  background-color: var(--ff-primary-light) !important;
}

/* ----- Selects & Menus ----- */
.MuiMenuItem-root.Mui-selected {
  background-color: var(--ff-primary-light) !important;
  color: var(--ff-primary) !important;
}

/* ----- Chips ----- */
.MuiChip-colorPrimary {
  background-color: var(--ff-primary-light) !important;
  color: var(--ff-primary) !important;
}

.MuiChip-deleteIcon {
  color: var(--ff-primary) !important;
}

/* ----- Progress ----- */
.MuiLinearProgress-colorPrimary {
  background-color: var(--ff-primary-light) !important;
}

.MuiLinearProgress-barColorPrimary {
  background-color: var(--ff-primary) !important;
}

/* ----- Tooltip ----- */
.MuiTooltip-tooltip {
  background-color: var(--ff-text) !important;
  font-size: 0.75rem !important;
  border-radius: var(--ff-radius) !important;
}

/* ----- Placeholder ----- */
::placeholder {
  color: var(--ff-text-muted) !important;
  opacity: 0.7 !important;
}


.navbar-toggler {
  display: none !important;
}


/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
  .MuiStepper-root,
  .ff-breadcrumb-bar {
    display: none !important;
  }

  .MuiCard-root,
  .MuiAccordion-root,
  .MuiPaper-root {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
  }

  .MuiAccordionDetails-root {
    display: block !important;
  }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

@media (forced-colors: active) {
  .MuiButton-root,
  .MuiCard-root,
  .MuiAccordion-root {
    border: 1px solid currentColor !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================================
   Submission Success Banner — override hardcoded green
   ============================================================================ */
 
#submission-success .css-vfek7k,
#submission-success > .MuiPaper-root > .MuiBox-root:first-child {
  background: linear-gradient(135deg, #1b324b 0%, #1b324b 100%) !important;
}
 
/* Ensure text is white and readable */
#submission-success .css-vfek7k *,
#submission-success > .MuiPaper-root > .MuiBox-root:first-child * {
  color: #ffffff !important;
}

/* Add spacing above inline stop-rule / error alerts */
.MuiFormControl-root + .MuiAlert-root,
.MuiBox-root + .MuiAlert-root,
.MuiAlert-root.MuiAlert-colorError {
  margin-top: 12px !important;
}

  .MuiSnackbar-root:has(.MuiAlert-colorSuccess) {
  display: none !important;
}

/* ============================================================================
   eSafet Custom Mobile Updates
   ============================================================================ */

@media (max-width: 769px) {
  /* Hide success snackbar on mobile */
  .MuiSnackbar-root:has(.MuiAlert-colorSuccess) {
    display: none !important;
  }

  .navbar-toggler {
  display: none !important;
}

  /* Hide reCAPTCHA badge on mobile */
  .grecaptcha-badge {
    visibility: hidden !important;
  }

  
.MuiGrid-root.MuiGrid-grid-xs-6 {
    flex-basis: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }


  /* =========================================================
     RADIO GROUPS - FULL WIDTH MOBILE CARDS
     Applies to all radio groups
     ========================================================= */

  .MuiRadioGroup-root {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 12px !important;
  }

.MuiPaper-root {
  overflow: hidden; 
  border-radius: 16px; 
}

.css-vfek7k {
  overflow: visible !important;
}

  .MuiRadioGroup-root .MuiFormControlLabel-root {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    border: 1px solid #d9dce3 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    transition:
      background-color 0.2s ease,
      border-color 0.2s ease,
      box-shadow 0.2s ease;
  }

  .MuiRadioGroup-root .MuiRadio-root {
    padding: 0 10px 0 0 !important;
    flex-shrink: 0 !important;
  }

  .MuiRadioGroup-root .MuiFormControlLabel-label {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 0.95rem !important;
    line-height: 1.35 !important;
    color: #292524 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* Selected radio card */
  .MuiRadioGroup-root .MuiFormControlLabel-root:has(.MuiRadio-root.Mui-checked),
  .MuiRadioGroup-root .MuiFormControlLabel-root:has(input[type="radio"]:checked) {
    background: #1b324b !important;
    border-color: #1b324b !important;
    box-shadow: 0 2px 6px rgba(91, 92, 226, 0.25) !important;
  }

  /* Selected radio text */
  .MuiRadioGroup-root .MuiFormControlLabel-root:has(.MuiRadio-root.Mui-checked) .MuiFormControlLabel-label,
  .MuiRadioGroup-root .MuiFormControlLabel-root:has(.MuiRadio-root.Mui-checked) .MuiFormControlLabel-label *,
  .MuiRadioGroup-root .MuiFormControlLabel-root:has(input[type="radio"]:checked) .MuiFormControlLabel-label,
  .MuiRadioGroup-root .MuiFormControlLabel-root:has(input[type="radio"]:checked) .MuiFormControlLabel-label * {
    color: #ffffff !important;
  }

  /* Selected radio icon */
  .MuiRadioGroup-root .MuiFormControlLabel-root:has(.MuiRadio-root.Mui-checked) .MuiRadio-root,
  .MuiRadioGroup-root .MuiFormControlLabel-root:has(.MuiRadio-root.Mui-checked) svg,
  .MuiRadioGroup-root .MuiFormControlLabel-root:has(input[type="radio"]:checked) .MuiRadio-root,
  .MuiRadioGroup-root .MuiFormControlLabel-root:has(input[type="radio"]:checked) svg {
    color: #ffffff !important;
    fill: #ffffff !important;
  }

  /* =========================================================
     CHECKBOX GROUPS - FULL WIDTH MOBILE CARDS
     Applies to grouped and single checkbox controls
     ========================================================= */

  .MuiFormGroup-root:has(input[type="checkbox"]) {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 14px !important;
  }

  .MuiFormControlLabel-root:has(input[type="checkbox"]) {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    border: 1px solid #d9dce3 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    transition:
      background-color 0.2s ease,
      border-color 0.2s ease,
      box-shadow 0.2s ease;
  }

  .MuiFormControlLabel-root:has(input[type="checkbox"]) .MuiCheckbox-root {
    padding: 0 10px 0 0 !important;
    flex-shrink: 0 !important;
  }

  .MuiFormControlLabel-root:has(input[type="checkbox"]) .MuiFormControlLabel-label {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    line-height: 1.45 !important;
    font-size: 0.92rem !important;
    color: #292524 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* Selected checkbox card */
  .MuiFormControlLabel-root:has(.MuiCheckbox-root.Mui-checked),
  .MuiFormControlLabel-root:has(input[type="checkbox"]:checked) {
    background: #1b324b !important;
    border-color: #1b324b !important;
    box-shadow: 0 2px 6px rgba(91, 92, 226, 0.25) !important;
  }

  /* Selected checkbox text - handles nested labels, typography and inline colours */
  .MuiFormControlLabel-root:has(.MuiCheckbox-root.Mui-checked) .MuiFormControlLabel-label,
  .MuiFormControlLabel-root:has(.MuiCheckbox-root.Mui-checked) .MuiFormControlLabel-label *,
  .MuiFormControlLabel-root:has(.MuiCheckbox-root.Mui-checked) .ddf-field-label,
  .MuiFormControlLabel-root:has(.MuiCheckbox-root.Mui-checked) .ddf-field-label *,
  .MuiFormControlLabel-root:has(input[type="checkbox"]:checked) .MuiFormControlLabel-label,
  .MuiFormControlLabel-root:has(input[type="checkbox"]:checked) .MuiFormControlLabel-label *,
  .MuiFormControlLabel-root:has(input[type="checkbox"]:checked) .ddf-field-label,
  .MuiFormControlLabel-root:has(input[type="checkbox"]:checked) .ddf-field-label * {
    color: #ffffff !important;
  }

  /* Selected checkbox icon */
  .MuiFormControlLabel-root:has(.MuiCheckbox-root.Mui-checked) .MuiCheckbox-root,
  .MuiFormControlLabel-root:has(.MuiCheckbox-root.Mui-checked) svg,
  .MuiFormControlLabel-root:has(input[type="checkbox"]:checked) .MuiCheckbox-root,
  .MuiFormControlLabel-root:has(input[type="checkbox"]:checked) svg {
    color: #ffffff !important;
    fill: #ffffff !important;
  }

  /* =========================================================
     GENERAL FORM CONTROL WIDTH FIXES
     Helps parent wrappers stop constraining card width
     ========================================================= */

  .MuiFormControl-root {
    width: 100% !important;
    max-width: 100% !important;
  }

  .MuiFormGroup-root {
    width: 100% !important;
    max-width: 100% !important;
  }

  .MuiFormControlLabel-root {
    box-sizing: border-box !important;
  }

  .MuiFormControlLabel-label {
    min-width: 0 !important;
  }

  #submission-success > .MuiPaper-root {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

#submission-success > .MuiPaper-root > .MuiBox-root:first-child {
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  flex-basis: auto !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
  #submission-success h5,
#submission-success h5 > span,
#submission-success h5 p,
#submission-success h5 a {
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
  hyphens: auto !important;
}

}