/* ============================================================================
   QUEENSLAND GOVERNMENT - 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.design-system.health.qld.gov.au/
   ============================================================================ */

/* ==========================================================================
   Section 1: Font Imports
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700&display=swap');

/* ==========================================================================
   Section 2: --ff-* Token Overrides
   ========================================================================== */

:root {
  /* Brand */
  --ff-primary: #005eb8;
  --ff-primary-hover: #003e96;
  --ff-primary-light: #e6f6ff;

  /* Semantic */
  --ff-secondary: #0085b3;
  --ff-success: #008635;
  --ff-success-light: #f2faf4;
  --ff-warning: #b38800;
  --ff-warning-light: #fffaea;
  --ff-error: #e22339;
  --ff-error-light: #fff6f6;

  /* Surfaces */
  --ff-bg: #f5f5f5;
  --ff-surface: #ffffff;
  --ff-surface-hover: #f5f5f5;
  --ff-border: #ebebeb;
  --ff-border-strong: #848484;

  /* Text */
  --ff-text: #353535;
  --ff-text-secondary: #636363;
  --ff-text-muted: #848484;
  --ff-text-inverse: #ffffff;

  /* Typography */
  --ff-font-family: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Radii — QGDS uses sharper corners than FormFactor default */
  --ff-radius: 4px;
  --ff-radius-lg: 4px;
  --ff-radius-sm: 2px;

  /* Footer — QLD uses brand blue, not the default dark navy */
  --ff-footer-bg: #05325f;
  --ff-footer-text: #deebf9;
  --ff-footer-heading: #ffffff;
  --ff-footer-link: #84d3ff;
  --ff-footer-border: #09549f;
}

/* QGDS heading colour — very dark navy-blue, distinct from body text */
h1, h2, h3, h4, h5, h6 {
  color: #000053;
}

/* ==========================================================================
   Section 3: MUI + FormRender Component Overrides
   ========================================================================== */

/* ----- Global MUI Font ----- */
[class*="Mui"] {
  font-family: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', sans-serif !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.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;
}

/* ----- Placeholder Text ----- */
::placeholder {
  color: var(--ff-text-muted) !important;
  opacity: 0.7 !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 ----- */
.MuiButton-root {
  text-transform: none !important;
  font-weight: 600 !important;
}

.MuiButton-containedPrimary {
  font-size: 1rem !important;
  box-shadow: var(--ff-shadow-sm) !important;
}

.MuiButton-containedPrimary:hover {
  background-color: var(--ff-primary-hover) !important;
  box-shadow: var(--ff-shadow-md) !important;
}

.MuiButton-outlinedPrimary {
  border: 2px solid var(--ff-primary) !important;
}

.MuiButton-outlinedPrimary:hover {
  background-color: var(--ff-primary-light) !important;
}

.MuiButton-textPrimary:hover {
  background-color: var(--ff-primary-light) !important;
}

/* ----- Alerts (left-border accent) ----- */
.MuiAlert-root {
  border-radius: var(--ff-radius) !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 colours/states) ----- */
.MuiStepLabel-label {
  font-family: var(--ff-font-family) !important;
}

.MuiStepIcon-text {
  font-family: var(--ff-font-family) !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;
}

.MuiDialogActions-root {
  border-top: 1px solid var(--ff-border) !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;
}

/* ----- Tooltip ----- */
.MuiTooltip-tooltip {
  background-color: var(--ff-text) !important;
  font-size: 0.75rem !important;
  border-radius: var(--ff-radius) !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;
  }
}
