/* ============================================================================
   COMMONWEALTH OMBUDSMAN - Form Submissions Page Stylesheet
   ============================================================================
   Stylesheet for the FormFactor FORM SUBMISSIONS page (form rendering/filling)
   in Power Pages portals using Commonwealth Ombudsman branding.

   PAGE: Form Submissions (where users fill out and submit forms)
   COMPONENT: FormRenderComponent (React + Material UI)

   DESIGN SYSTEM: Commonwealth Ombudsman Brand Guide (December 2024)
   - Primary Font: Poppins (Google Web Font)
   - Fallback Font: Arial

   RELATED STYLESHEETS:
   - co-available-forms.css  - Available Forms listing page
   - co-my-submissions.css   - My Submissions listing page
   - co-home.css             - Portal home page

   ENVIRONMENT:
   - Power Pages portal with Bootstrap 5
   - FormFactor FormRenderComponent using Material UI (MUI) v7
   - Emotion CSS-in-JS (MUI's styling engine)

   DISCLAIMER: This stylesheet is provided as a starting point for branding.
   Customize colors and spacing to match your organization's requirements.
   ============================================================================ */

/* ---------- Font Declarations ---------- */
/* Poppins - Commonwealth Ombudsman brand typeface
   Open source Google Web Font with full weight range */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@font-face {
    font-family: 'Poppins';
    src: local('Poppins');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: local('Poppins Medium');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: local('Poppins SemiBold');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: local('Poppins Bold');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ---------- CSS Variables & Theme ---------- */
/* Aligned with Commonwealth Ombudsman Brand Guide */
:root {
    /* ===== CO Brand Colour Palette ===== */
    /* Primary Colours */
    --co-green: #BDD753;
    --co-teal: #00A18B;
    --co-blue: #0099DA;
    --co-purple: #A05DA5;
    --co-pink: #EE4D9B;
    --co-burgundy: #96055A;
    --co-orange: #F26122;
    --co-yellow: #FFDF4F;
    --co-sand: #F7F3F1;
    --co-charcoal: #0D2D40;
    --co-navy: #053378;

    /* ===== Functional Colour Mapping ===== */
    /* Primary Action Colors - Using Teal as primary action */
    --co-action: var(--co-teal);
    --co-action-hover: #008573;
    --co-action-active: #006B5D;

    /* Focus State - Using Blue for accessibility */
    --co-focus: var(--co-blue);
    --co-focus-light: rgba(0, 153, 218, 0.3);

    /* Text Colors */
    --co-text: var(--co-charcoal);
    --co-text-muted: #4A5568;
    --co-text-light: #FFFFFF;

    /* Background Colors */
    --co-background: #FFFFFF;
    --co-background-shade: var(--co-sand);
    --co-background-alt: #EDE9E6;

    /* Border Colors */
    --co-border: #6D6D6D;
    --co-border-light: #D3D3D3;
    --co-border-dark: var(--co-charcoal);

    /* Semantic Colors */
    --co-success: #0B996A;
    --co-success-light: #E5F6F0;
    --co-error: var(--co-burgundy);
    --co-error-light: #FBEAEF;
    --co-warning: var(--co-orange);
    --co-warning-light: #FEF0E6;
    --co-info: var(--co-blue);
    --co-info-light: #E5F4FA;

    /* ===== FormFactor Base Colors (mapped from CO) ===== */
    --color-primary: var(--co-action);
    --color-primary-hover: var(--co-action-hover);
    --color-primary-active: var(--co-action-active);
    --color-secondary: var(--co-text-muted);
    --color-text: var(--co-text);
    --color-text-light: var(--co-text-muted);
    --color-background: var(--co-background);
    --color-border: var(--co-border-light);
    --color-focus: var(--co-focus);

    /* Status Colors */
    --color-draft: var(--co-purple);
    --color-draft-bg: #F3EDF4;
    --color-submitted: var(--co-success);
    --color-submitted-bg: var(--co-success-light);
    --color-error: var(--co-error);
    --color-error-bg: var(--co-error-light);
    --color-success: var(--co-success);
    --color-success-bg: var(--co-success-light);
    --color-warning: var(--co-warning);
    --color-warning-bg: var(--co-warning-light);
    --color-info: var(--co-info);
    --color-info-bg: var(--co-info-light);

    /* Commonwealth Ombudsman Accent Colours */
    --co-accent-primary: var(--co-teal);
    --co-accent-secondary: var(--co-navy);

    /* Component Sizes */
    --header-height: 64px;
    --border-radius: 4px;
    --border-radius-lg: 8px;

    /* Spacing System (8px grid) */
    --space-xxs: 0.25rem; /* 4px */
    --space-xs: 0.5rem;   /* 8px */
    --space-sm: 0.75rem;  /* 12px */
    --space-md: 1rem;     /* 16px */
    --space-lg: 1.5rem;   /* 24px */
    --space-xl: 2rem;     /* 32px */
    --space-xxl: 3rem;    /* 48px */

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

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.45s ease;
}

/* ---------- Reset & Base Styles ---------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body, html {
    font-family: 'Poppins', Arial, sans-serif !important;
    font-weight: 400 !important;
    color: var(--co-text) !important;
    background-color: var(--co-background) !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Apply Poppins to all text elements (not icons) - per brand guidelines */
body, p, span, div, label, input, textarea, select, button, a,
h1, h2, h3, h4, h5, h6, li, td, th, caption, legend, figcaption {
    font-family: 'Poppins', Arial, sans-serif;
}

/* Target all MUI components (needed to override Emotion CSS-in-JS) */
[class*="Mui"] {
    font-family: 'Poppins', Arial, sans-serif !important;
}

/* ---------- Utility Classes ---------- */
.hidden {
    display: none !important;
}

.text-primary {
    color: var(--co-action) !important;
}

.text-success {
    color: var(--color-success) !important;
}

.text-error {
    color: var(--color-error) !important;
}

.text-muted {
    color: var(--co-text-muted) !important;
}

.bg-light {
    background-color: var(--co-background-shade) !important;
}

.elevation-1 {
    box-shadow: var(--shadow-sm) !important;
}

.elevation-2 {
    box-shadow: var(--shadow-md) !important;
}

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--space-xs) !important; }
.mb-2 { margin-bottom: var(--space-md) !important; }
.mb-3 { margin-bottom: var(--space-lg) !important; }
.mb-4 { margin-bottom: var(--space-xl) !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--space-xs) !important; }
.mt-2 { margin-top: var(--space-md) !important; }
.mt-3 { margin-top: var(--space-lg) !important; }
.mt-4 { margin-top: var(--space-xl) !important; }

/* ---------- Accessibility ---------- */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--co-action);
    color: white;
    padding: var(--space-sm) var(--space-md);
    z-index: 100;
    transition: top var(--transition-normal);
    font-family: 'Poppins', Arial, sans-serif;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0 0 var(--border-radius) 0;
}

.skip-link:focus {
    top: 0;
    outline: none;
    box-shadow: var(--shadow-focus);
}

/* ---------- Layout ---------- */
.dashboard-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

.card {
    background: var(--co-background);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
    border: 1px solid var(--co-border-light);
    transition: box-shadow var(--transition-normal);
}

.card:hover {
    box-shadow: var(--shadow-lg);
}

.section {
    margin-bottom: var(--space-xl);
}

/* ---------- Typography ---------- */
/* Following CO Brand Guide: Poppins with appropriate weights */
/* Headings use dark text color (Charcoal), NOT the primary/action color */
h1, h2, h3, h4, h5, h6,
.MuiTypography-h1,
.MuiTypography-h2,
.MuiTypography-h3,
.MuiTypography-h4,
.MuiTypography-h5,
.MuiTypography-h6 {
    font-family: 'Poppins', Arial, sans-serif !important;
    color: var(--co-text) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

/* Specific h5 size override */
h5, .MuiTypography-h5 {
    font-size: 1.25rem !important;
}

.MuiTypography-subtitle1,
.MuiTypography-subtitle2 {
    font-family: 'Poppins', Arial, sans-serif !important;
    color: var(--co-text) !important;
    font-weight: 500 !important;
}

/* Body text - font and color */
p, .MuiTypography-body1, .MuiTypography-body2, a {
    font-family: 'Poppins', Arial, sans-serif !important;
    color: var(--co-text) !important;
}

/* Override portalbasictheme font-size for paragraphs within form container */
body #form-component-container p {
    font-size: 1rem !important;
}

body #form-component-container a {
    font-size: 1rem !important;
}

.large-text {
    font-size: 1.125rem !important;
    line-height: 1.6 !important;
}

.small-text, .MuiTypography-caption {
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: var(--co-text-muted) !important;
}

/* ---------- Links ---------- */
a {
    color: var(--co-action);
    text-decoration: underline;
    transition: color var(--transition-normal);
}

a:visited {
    color: var(--co-purple);
}

a:hover {
    color: var(--co-action-hover);
}

a:focus {
    outline: 3px solid var(--co-focus);
    outline-offset: 2px;
}

/* ---------- Header Layout ---------- */
.header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: 0;
    padding: var(--space-xs) 0 var(--space-xxs) 0;
}

.title-group {
    flex: 1;
    min-width: 0;
}

.form-title {
    font-family: 'Poppins', Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.25rem;
    margin: 0;
    color: var(--co-text);
    line-height: 1.2;
    word-wrap: break-word;
}

.submission-number {
    color: var(--co-text-muted);
    font-size: 0.8rem;
    margin: 0;
    line-height: 1.2;
}

.status-badge-wrapper {
    flex-shrink: 0;
    padding-top: 0;
}

/* ---------- Breadcrumb Navigation ---------- */
.breadcrumb-nav {
    background: var(--co-background);
    border-bottom: 1px solid var(--co-border-light);
    padding: var(--space-sm) 0;
    box-shadow: var(--shadow-sm);
}

.breadcrumb {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    align-items: center;
    margin: 0;
    padding: 0;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    color: var(--co-text-muted);
    font-size: 0.875rem;
    font-family: 'Poppins', Arial, sans-serif !important;
    font-weight: 400 !important;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    color: var(--co-text-muted);
    margin: 0 var(--space-xs);
    font-size: 1.2em;
    line-height: 1;
}

.breadcrumb-item a {
    color: var(--co-action);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xxs) var(--space-xs);
    border-radius: var(--border-radius);
    transition: all var(--transition-normal);
}

.breadcrumb-item a:hover {
    color: var(--co-action-hover);
    text-decoration: underline;
    background-color: rgba(0, 161, 139, 0.05);
}

/* ---------- Form Header ---------- */
.form-header {
    background: var(--co-background);
    padding: var(--space-sm) 0 var(--space-xs);
    border-bottom: 1px solid var(--co-border-light);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
    min-height: 48px;
}

/* ---------- Form Component Container ---------- */
/* Card-like wrapper around the form PCF */
#form-component-container {
    background: var(--co-background);
    border-radius: 0;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px 0 rgb(0 0 0 / 0.06);
    border: 1px solid var(--co-border-light);
    overflow: hidden;
    margin: var(--space-lg) auto 0;
    max-width: 1240px;
    padding: calc(var(--space-xs) * 4.5);
    transition: all var(--transition-normal);
}

#form-component-container:hover {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);
    border-color: var(--co-border-light);
}

/* Form container fade-in animation */
@keyframes formFadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#form-component-container {
    animation: formFadeIn 0.25s ease-out;
}

/* Responsive adjustments for form container */
@media (max-width: 768px) {
    #form-component-container {
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        padding: var(--space-lg);
        box-shadow: none;
        margin-top: var(--space-md);
    }
}

/* ---------- Status Badges ---------- */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    font-family: 'Poppins', Arial, sans-serif !important;
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-sm);
}

.status-badge.draft {
    background: var(--color-draft-bg);
    color: var(--color-draft);
    border: 1px solid rgba(160, 93, 165, 0.2);
}

.status-badge.submitted {
    background: var(--color-submitted-bg);
    color: var(--color-submitted);
    border: 1px solid rgba(11, 153, 106, 0.2);
}

.status-badge.approved {
    background: var(--color-success-bg);
    color: var(--color-success);
    border: 1px solid rgba(11, 153, 106, 0.2);
}

.status-badge.pending {
    background: var(--color-warning-bg);
    color: var(--co-charcoal);
    border: 1px solid rgba(242, 97, 34, 0.2);
}

.status-badge i,
.status-badge svg {
    font-size: 1rem;
}

.status-badge:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* ---------- Form Elements ---------- */
/* ============================================================================
   NATIVE FORM ELEMENTS
   Note: Excludes MUI components to prevent double borders
   ============================================================================ */
input[type="text"]:not(.MuiInputBase-input),
input[type="email"]:not(.MuiInputBase-input),
input[type="tel"]:not(.MuiInputBase-input),
input[type="number"]:not(.MuiInputBase-input),
input[type="date"]:not(.MuiInputBase-input),
input[type="password"]:not(.MuiInputBase-input),
textarea:not(.MuiInputBase-input),
select:not(.MuiSelect-nativeInput):not(.MuiNativeSelect-select) {
    width: 100%;
    padding: var(--space-xs) var(--space-sm);
    font-size: 1rem;
    font-family: 'Poppins', Arial, sans-serif;
    border: 1px solid var(--co-border);
    border-radius: var(--border-radius);
    background-color: var(--co-background);
    color: var(--co-text);
    transition: all var(--transition-normal);
}

input:not(.MuiInputBase-input):hover,
textarea:not(.MuiInputBase-input):hover,
select:not(.MuiSelect-nativeInput):hover {
    border-color: var(--co-action);
}

input:not(.MuiInputBase-input):focus,
textarea:not(.MuiInputBase-input):focus,
select:not(.MuiSelect-nativeInput):focus {
    border-color: var(--co-action);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(0, 161, 139, 0.15);
}

/* Form Labels - exclude MUI labels AND FormFactor labels to preserve tooltip positioning */
label:not(.MuiInputLabel-root):not(.MuiFormControlLabel-label):not(.MuiFormLabel-root):not(.ddf-field-label) {
    display: block;
    margin-bottom: var(--space-xxs);
    font-weight: 500;
    color: var(--co-text);
}

/* MUI Form Labels - font and color only */
.MuiInputLabel-root,
.MuiFormLabel-root {
    font-family: 'Poppins', Arial, sans-serif !important;
    color: var(--co-text) !important;
    font-weight: 500 !important;
}

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

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

/* FormFactor field labels - labels use dark text, not primary */
.ddf-field-label {
    font-family: 'Poppins', Arial, sans-serif !important;
    font-weight: 600 !important;
    color: var(--co-text) !important;
}

/* Input Fields */
.MuiOutlinedInput-root {
    font-family: 'Poppins', Arial, sans-serif !important;
    border-radius: var(--border-radius) !important;
}

.MuiOutlinedInput-notchedOutline {
    border-color: var(--co-border) !important;
}

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

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

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

.MuiInputBase-input {
    font-family: 'Poppins', Arial, sans-serif !important;
    color: var(--co-text) !important;
}

/* Disabled Inputs */
.MuiOutlinedInput-root.Mui-disabled {
    background-color: var(--co-background-shade) !important;
}

.MuiOutlinedInput-root.Mui-disabled .MuiOutlinedInput-notchedOutline {
    border-color: var(--co-border-light) !important;
}

/* Helper Text */
.MuiFormHelperText-root {
    font-family: 'Poppins', Arial, sans-serif !important;
    font-weight: 400 !important;
    font-size: 0.85rem !important;
    margin-top: var(--space-xxs) !important;
    color: var(--co-text-muted) !important;
}

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

/* Ensure error message text inherits red color */
.MuiFormHelperText-root.Mui-error .MuiTypography-root,
.MuiFormHelperText-root.text-red-700 .MuiTypography-root {
    color: inherit !important;
}

/* Form Layout */
.form-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(var(--space-sm) * -1);
}

.form-col {
    flex: 1 0 250px;
    padding: 0 var(--space-sm);
}

/* ---------- Checkboxes & Radio Buttons ---------- */
.MuiCheckbox-root,
.MuiRadio-root {
    color: var(--co-border) !important;
}

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

.MuiCheckbox-root.Mui-disabled,
.MuiRadio-root.Mui-disabled {
    color: var(--co-border-light) !important;
}

/* MUI Switch */
.MuiSwitch-root .MuiSwitch-track {
    background-color: var(--co-border) !important;
}

.MuiSwitch-root .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track {
    background-color: var(--co-action) !important;
    opacity: 0.5 !important;
}

.MuiSwitch-root .MuiSwitch-switchBase.Mui-checked .MuiSwitch-thumb {
    color: var(--co-action) !important;
}

.MuiFormControlLabel-root {
    font-family: 'Poppins', Arial, sans-serif !important;
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    margin-left: 0 !important;
    margin-right: var(--space-lg) !important;
}

.MuiFormControlLabel-label {
    font-family: 'Poppins', Arial, sans-serif !important;
    font-weight: 400 !important;
    font-size: 1rem !important;
    color: var(--co-text) !important;
}

/* ---------- Buttons ---------- */
/* Primary Button */
.MuiButton-containedPrimary {
    background-color: var(--co-action) !important;
    color: var(--co-text-light) !important;
    font-family: 'Poppins', Arial, sans-serif !important;
    font-weight: 600 !important;
    text-transform: none !important;
    border-radius: var(--border-radius) !important;
    padding: 10px 24px !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    box-shadow: var(--shadow-sm) !important;
    transition: all var(--transition-normal) !important;
    position: relative;
    overflow: hidden;
}

.MuiButton-containedPrimary:hover {
    background-color: var(--co-action-hover) !important;
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-1px);
}

.MuiButton-containedPrimary:active {
    background-color: var(--co-action-active) !important;
    box-shadow: var(--shadow-sm) !important;
    transform: translateY(0);
}

.MuiButton-containedPrimary:focus {
    box-shadow: var(--shadow-focus) !important;
}

/* Secondary / Outlined Button */
.MuiButton-outlinedPrimary {
    color: var(--co-action) !important;
    border: 2px solid var(--co-action) !important;
    background-color: transparent !important;
    font-family: 'Poppins', Arial, sans-serif !important;
    font-weight: 600 !important;
    text-transform: none !important;
    padding: 8px 20px !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    border-radius: var(--border-radius) !important;
    transition: all var(--transition-normal) !important;
}

.MuiButton-outlinedPrimary:hover {
    background-color: rgba(0, 161, 139, 0.08) !important;
    border-color: var(--co-action) !important;
    box-shadow: var(--shadow-sm) !important;
}

.MuiButton-outlinedPrimary:focus {
    box-shadow: var(--shadow-focus) !important;
}

.MuiButton-outlinedPrimary:active {
    background-color: rgba(0, 161, 139, 0.15) !important;
}

/* Text Button */
.MuiButton-textPrimary {
    color: var(--co-action) !important;
    font-family: 'Poppins', Arial, sans-serif !important;
    font-weight: 500 !important;
    text-transform: none !important;
    padding: 8px 16px !important;
    border-radius: var(--border-radius) !important;
    transition: all var(--transition-normal) !important;
}

.MuiButton-textPrimary:hover {
    background-color: rgba(0, 161, 139, 0.08) !important;
}

.MuiButton-textPrimary:focus {
    box-shadow: var(--shadow-focus) !important;
}

/* Button Icon Alignment */
.MuiButton-startIcon {
    margin-right: var(--space-sm) !important;
}

.MuiButton-endIcon {
    margin-left: var(--space-sm) !important;
}

/* Button Sizes */
.MuiButton-sizeSmall {
    padding: 4px 12px !important;
    font-size: 0.875rem !important;
}

.MuiButton-sizeLarge {
    padding: 12px 32px !important;
    font-size: 1.125rem !important;
}

/* Button loading state */
.button-loading {
    position: relative;
    pointer-events: none;
}

.button-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1rem;
    height: 1rem;
    margin: -0.5rem 0 0 -0.5rem;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
}

.button-loading .MuiButton-label {
    opacity: 0;
}

/* Button Base Styles */
.MuiButtonBase-root {
    font-family: 'Poppins', Arial, sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
}

/* Touch Ripple Effect */
.MuiTouchRipple-root {
    color: var(--co-action) !important;
}

/* Fab buttons */
.MuiFab-primary {
    background-color: var(--co-action) !important;
    color: white !important;
    transition: all var(--transition-normal) !important;
}

.MuiFab-primary:hover {
    background-color: var(--co-action-hover) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg) !important;
}

/* Floating action button animation */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 var(--co-focus-light);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(0, 153, 218, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 153, 218, 0);
    }
}

.MuiFab-primary:focus {
    animation: pulse 1.5s infinite;
}

/* ---------- Loading States ---------- */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-xxl) var(--space-md);
    color: var(--co-text-muted);
    text-align: center;
}

.spinner-border {
    width: 3rem;
    height: 3rem;
    border: 0.25rem solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
    margin-bottom: var(--space-md);
    color: var(--co-sand);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-title {
    color: var(--co-text);
    font-family: 'Poppins', Arial, sans-serif;
    font-weight: 500;
    font-size: 1.25rem;
    margin-bottom: var(--space-sm);
}

.loading-placeholder {
    background: linear-gradient(90deg, var(--co-border-light) 0%, #eaedf0 50%, var(--co-border-light) 100%);
    background-size: 200% 100%;
    border-radius: var(--border-radius);
    animation: gradient-shift 1.8s infinite ease-in-out;
    min-width: 150px;
    height: 1em;
    display: inline-block;
}

@keyframes gradient-shift {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---------- Error States ---------- */
.error-state {
    padding: var(--space-xl) var(--space-md);
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.alert {
    padding: var(--space-md);
    border-radius: var(--border-radius);
    margin-bottom: var(--space-md);
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    box-shadow: var(--shadow-sm);
}

.alert-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.alert-content {
    flex: 1;
}

.alert-title {
    font-family: 'Poppins', Arial, sans-serif;
    font-weight: 700;
    margin-bottom: var(--space-xxs);
}

.alert-danger {
    background-color: var(--color-error-bg);
    color: var(--color-error);
    border-left: 4px solid var(--color-error);
}

.alert-warning {
    background-color: var(--color-warning-bg);
    color: var(--co-charcoal);
    border-left: 4px solid var(--color-warning);
}

.alert-info {
    background-color: var(--color-info-bg);
    color: var(--co-navy);
    border-left: 4px solid var(--color-info);
}

.alert-success {
    background-color: var(--color-success-bg);
    color: var(--color-success);
    border-left: 4px solid var(--color-success);
}

/* ---------- Stepper ---------- */
/* Only override font-family - let MUI handle all other styling */

.MuiStepLabel-label {
    font-family: 'Poppins', Arial, sans-serif !important;
}

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

/* ---------- Form Content Area ---------- */
.form-content {
    flex: 1;
    padding: var(--space-lg) 0 var(--space-xl);
    background: var(--co-background-shade);
}

/* FormFactor Section component - font overrides only */
/* Section headings use dark text, not primary */
.ddf-section-title,
.ddf-section > .MuiTypography-h5,
.ddf-section > .MuiTypography-h6 {
    font-family: 'Poppins', Arial, sans-serif !important;
    color: var(--co-text) !important;
    font-weight: 700 !important;
}

/* ---------- MuiAlert Styles ---------- */
.MuiAlert-root {
    font-family: 'Poppins', Arial, sans-serif !important;
    font-weight: 400 !important;
    border-radius: var(--border-radius) !important;
    padding: var(--space-md) !important;
    box-shadow: var(--shadow-sm) !important;
    margin-bottom: var(--space-md) !important;
}

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

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

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

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

.MuiAlert-icon {
    color: inherit !important;
    opacity: 0.9 !important;
    padding: 0 !important;
    font-size: 1.5rem !important;
}

.MuiAlert-message {
    padding: 0 0 0 var(--space-sm) !important;
}

.MuiAlertTitle-root {
    font-family: 'Poppins', Arial, sans-serif !important;
    font-weight: 700 !important;
    color: inherit !important;
    margin-bottom: var(--space-xxs) !important;
    font-size: 1rem !important;
}

/* ---------- Tabs ---------- */
.MuiTabs-root {
    border-bottom: 1px solid var(--co-border-light);
    margin-bottom: var(--space-lg);
}

.MuiTab-root {
    text-transform: none !important;
    font-family: 'Poppins', Arial, sans-serif !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    color: var(--co-text-muted) !important;
    min-width: 100px !important;
    transition: all var(--transition-normal) !important;
}

.MuiTab-root.Mui-selected {
    color: var(--co-action) !important;
    font-weight: 600 !important;
}

.MuiTabs-indicator {
    background-color: var(--co-action) !important;
    height: 3px !important;
}

/* ---------- Modal Styles ---------- */
.MuiDialog-paper {
    border-radius: var(--border-radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    max-width: 560px !important;
    width: calc(100% - 2rem) !important;
    margin: var(--space-lg) !important;
}

.MuiDialogTitle-root {
    background-color: var(--co-background) !important;
    border-bottom: 1px solid var(--co-border-light) !important;
    padding: var(--space-md) var(--space-lg) !important;
}

.MuiDialogTitle-root h2 {
    font-family: 'Poppins', Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.5rem !important;
    color: var(--co-text) !important;
    margin: 0 !important;
}

.MuiDialogContent-root {
    padding: var(--space-lg) !important;
}

.MuiDialogActions-root {
    padding: var(--space-md) var(--space-lg) !important;
    border-top: 1px solid var(--co-border-light) !important;
}

.modal-close-button {
    position: absolute !important;
    right: var(--space-sm) !important;
    top: var(--space-sm) !important;
    color: var(--co-text-muted) !important;
    transition: all var(--transition-normal) !important;
}

.modal-close-button:hover {
    color: var(--co-text) !important;
    background-color: rgba(0, 0, 0, 0.05) !important;
}

/* Modal animation */
@keyframes modalFadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.MuiDialog-paper {
    animation: modalFadeIn 0.3s ease-out;
}

/* ---------- Table Styles ---------- */
.MuiTableContainer-root {
    border-radius: var(--border-radius) !important;
    box-shadow: var(--shadow-sm) !important;
    margin-bottom: var(--space-lg) !important;
    border: 1px solid var(--co-border-light) !important;
}

.MuiTable-root {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.MuiTableHead-root {
    background-color: var(--co-background-shade) !important;
}

.MuiTableCell-head {
    font-family: 'Poppins', Arial, sans-serif !important;
    font-weight: 600 !important;
    color: var(--co-text) !important;
    font-size: 0.875rem !important;
    border-bottom: 2px solid var(--co-border-light) !important;
    padding: var(--space-sm) var(--space-md) !important;
}

.MuiTableCell-body {
    font-family: 'Poppins', Arial, sans-serif !important;
    font-weight: 400 !important;
    padding: var(--space-sm) var(--space-md) !important;
    border-bottom: 1px solid var(--co-border-light) !important;
}

.MuiTableRow-root:last-child .MuiTableCell-body {
    border-bottom: none !important;
}

.MuiTableRow-root:hover {
    background-color: rgba(0, 161, 139, 0.05) !important;
}

/* Table pagination */
.MuiTablePagination-root {
    color: var(--co-text) !important;
    font-family: 'Poppins', Arial, sans-serif !important;
    font-weight: 400 !important;
}

/* ---------- Cards & Panels ---------- */
.MuiCard-root {
    border-radius: var(--border-radius-lg) !important;
    box-shadow: var(--shadow-md) !important;
    transition: all var(--transition-normal) !important;
    overflow: visible !important;
    border: 1px solid var(--co-border-light) !important;
}

.MuiCard-root:hover {
    box-shadow: var(--shadow-lg) !important;
    transform: translateY(-2px);
}

.MuiCardHeader-root {
    padding: var(--space-md) var(--space-lg) !important;
    border-bottom: 1px solid var(--co-border-light) !important;
}

.MuiCardHeader-title {
    font-family: 'Poppins', Arial, sans-serif !important;
    font-weight: 700 !important;
    color: var(--co-text) !important;
}

.MuiCardHeader-subheader {
    font-family: 'Poppins', Arial, sans-serif !important;
    font-weight: 400 !important;
    color: var(--co-text-muted) !important;
}

.MuiCardContent-root {
    padding: var(--space-lg) !important;
}

.MuiCardActions-root {
    padding: var(--space-md) var(--space-lg) !important;
    border-top: 1px solid var(--co-border-light) !important;
}

/* ---------- Accordions ---------- */
.MuiAccordion-root {
    border-radius: var(--border-radius) !important;
    box-shadow: var(--shadow-sm) !important;
    margin-bottom: var(--space-md) !important;
    transition: all var(--transition-normal) !important;
    border: 1px solid var(--co-border-light) !important;
}

.MuiAccordion-root::before {
    display: none !important;
}

.MuiAccordion-root.Mui-expanded {
    margin: 0 0 var(--space-md) 0 !important;
    box-shadow: var(--shadow-md) !important;
}

.MuiAccordionSummary-root {
    padding: var(--space-sm) var(--space-md) !important;
    min-height: unset !important;
}

.MuiAccordionSummary-content {
    margin: var(--space-xs) 0 !important;
}

.MuiAccordionSummary-content.Mui-expanded {
    margin: var(--space-xs) 0 !important;
}

.MuiAccordionSummary-expandIcon {
    color: var(--co-text-muted) !important;
    transition: all var(--transition-normal) !important;
}

.MuiAccordionSummary-expandIcon.Mui-expanded {
    color: var(--co-action) !important;
}

.MuiAccordionDetails-root {
    padding: var(--space-md) var(--space-lg) var(--space-lg) !important;
    border-top: 1px solid var(--co-border-light) !important;
}

/* ---------- Additional Material UI Overrides ---------- */
/* Select Dropdown - font only, no sizing overrides */
.MuiSelect-select {
    font-family: 'Poppins', Arial, sans-serif !important;
    font-weight: 400 !important;
}

.MuiMenuItem-root {
    font-family: 'Poppins', Arial, sans-serif !important;
    font-weight: 400 !important;
}

.MuiMenuItem-root.Mui-selected {
    background-color: rgba(0, 161, 139, 0.1) !important;
    color: var(--co-action) !important;
}

.MuiMenuItem-root:hover {
    background-color: var(--co-background-shade) !important;
}

/* MUI Menu & Dropdown */
.MuiMenu-paper {
    border-radius: var(--border-radius) !important;
    box-shadow: var(--shadow-md) !important;
    border: 1px solid var(--co-border-light) !important;
}

/* MUI Divider */
.MuiDivider-root {
    border-color: var(--co-border-light) !important;
}

/* Date Picker */
.MuiInputBase-root.Mui-readOnly {
    background-color: var(--co-background-shade) !important;
}

/* Chips */
.MuiChip-root {
    font-family: 'Poppins', Arial, sans-serif !important;
    font-weight: 400 !important;
    border-radius: 16px !important;
    height: 28px !important;
    transition: all var(--transition-normal) !important;
}

.MuiChip-colorPrimary {
    background-color: rgba(0, 161, 139, 0.1) !important;
    color: var(--co-action) !important;
}

.MuiChip-deleteIcon {
    color: var(--co-action) !important;
}

.MuiChip-deleteIcon:hover {
    color: var(--co-action-hover) !important;
}

/* Progress indicators */
.MuiLinearProgress-colorPrimary {
    background-color: rgba(0, 161, 139, 0.2) !important;
}

.MuiLinearProgress-barColorPrimary {
    background-color: var(--co-action) !important;
}

.MuiCircularProgress-colorPrimary {
    color: var(--co-sand) !important;
}

/* Tooltip */
.MuiTooltip-tooltip {
    background-color: var(--co-text) !important;
    font-family: 'Poppins', Arial, sans-serif !important;
    font-weight: 400 !important;
    font-size: 0.75rem !important;
    padding: var(--space-xs) var(--space-sm) !important;
    border-radius: var(--border-radius) !important;
}

/* Additional elements to ensure font consistency */
.MuiFormLabel-root,
.MuiInputLabel-root,
.MuiFormHelperText-root,
.MuiMenuItem-root,
.MuiListItem-root,
.MuiTableCell-root,
.MuiChip-label,
.MuiTab-root,
.MuiAccordionSummary-root,
.MuiAccordionDetails-root {
    font-family: 'Poppins', Arial, sans-serif !important;
    font-weight: 400 !important;
}

/* Ensure bold elements use proper weight */
strong, b,
.MuiTypography-body1 strong,
.MuiTypography-body2 strong,
.MuiListItemText-primary {
    font-family: 'Poppins', Arial, sans-serif !important;
    font-weight: 700 !important;
}

/* Remove bottom margin for last paragraph in components */
.MuiTypography-root p:last-child,
.MuiAlert-root p:last-child,
.MuiCard-root p:last-child,
.MuiAccordion-root p:last-child,
.MuiDialog-root p:last-child,
.MuiDrawer-root p:last-child {
    margin-bottom: 0 !important;
}

/* ---------- Animation & Transitions ---------- */
/* Page transition */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.page-transition {
    animation: fadeIn 0.4s ease-in-out;
}

/* Hover animations for cards and buttons */
.hover-lift {
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* ---------- Responsive Design ---------- */
@media (max-width: 1024px) {
    .container {
        padding: 0 var(--space-md);
    }

    .MuiTypography-h1 {
        font-size: 1.75rem !important;
    }

    h2, .MuiTypography-h2 {
        font-size: 1.75rem !important;
    }
}

/* Tablet Styles */
@media (min-width: 769px) and (max-width: 1024px) {
    #form-component-container {
        padding: calc(var(--space-xs) * 4);
    }

    .form-title {
        font-size: 1.25rem;
    }
}

@media (max-width: 768px) {
    :root {
        --space-lg: 1.25rem;
        --space-xl: 1.75rem;
        --space-xxl: 2.5rem;
    }

    .container {
        padding: 0 var(--space-sm);
    }

    .header-flex {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }

    .form-title {
        font-size: 1.25rem;
    }

    .form-header {
        padding: var(--space-md) 0;
    }

    .form-row {
        flex-direction: column;
    }

    .form-col {
        padding: 0;
        margin-bottom: var(--space-md);
    }

    .step-actions {
        flex-direction: column-reverse;
        gap: var(--space-sm);
    }

    .step-actions .MuiButton-root {
        width: 100%;
        margin-bottom: var(--space-xs);
    }

    .modal-dialog {
        margin: var(--space-sm);
        width: calc(100% - var(--space-md));
    }

    .form-content-inner {
        padding: var(--space-md);
    }

    h1, .MuiTypography-h1 {
        font-size: 2rem !important;
    }

    h2, .MuiTypography-h2 {
        font-size: 1.5rem !important;
    }

    h3, .MuiTypography-h3 {
        font-size: 1.35rem !important;
    }

    h5, .MuiTypography-h5 {
        font-size: 1.1rem !important;
    }
}

@media (max-width: 480px) {
    .status-badge {
        width: 100%;
        justify-content: center;
    }

    .MuiTabs-root {
        overflow-x: auto;
    }

    .MuiDialogTitle-root h2 {
        font-size: 1.25rem !important;
    }
}

/* ---------- Print Styles ---------- */
@media print {
    body, html {
        background: white !important;
    }

    .breadcrumb-nav,
    .loading-state,
    .error-state,
    .step-actions,
    .MuiStepper-root {
        display: none !important;
    }

    .form-header {
        background: none !important;
        padding: var(--space-md) 0 !important;
        margin-bottom: var(--space-md) !important;
        box-shadow: none !important;
    }

    .status-badge {
        border: 1px solid currentColor !important;
        background: none !important;
    }

    .container {
        max-width: none !important;
        padding: 0 !important;
    }

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

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

    .MuiCardHeader-root,
    .MuiCardActions-root,
    .MuiAccordionSummary-expandIcon {
        display: none !important;
    }
}

/* ---------- Accessibility Styles ---------- */
/* High Contrast Mode - forced-colors for Windows High Contrast */
@media (forced-colors: active) {
    .status-badge,
    .MuiButton-root,
    .MuiCard-root,
    .MuiAccordion-root,
    .MuiTableContainer-root {
        border: 1px solid currentColor !important;
    }

    .MuiLinearProgress-bar,
    .MuiCircularProgress-svg {
        forced-color-adjust: none !important;
    }
}

/* High Contrast Mode - prefers-contrast for other systems */
@media (prefers-contrast: high) {
    .status-badge {
        border-width: 2px;
    }

    #form-component-container {
        border-width: 2px;
    }
}

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

    .hover-lift:hover {
        transform: none !important;
    }
}

/* ---------- Custom Components ---------- */
/* Feature Box */
.feature-box {
    background: linear-gradient(135deg, var(--co-background), var(--co-background-shade));
    border-radius: var(--border-radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
    border-left: 4px solid var(--co-action);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
}

.feature-box:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.feature-box-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.feature-box-title i,
.feature-box-title svg {
    color: var(--co-action);
    font-size: 1.5rem;
}

.feature-box-title h4 {
    margin: 0;
    font-family: 'Poppins', Arial, sans-serif;
    font-weight: 700;
    color: var(--co-text);
}

/* Timeline */
.timeline {
    position: relative;
    padding-left: 30px;
    margin-left: 10px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 2px;
    background: var(--co-border-light);
}

.timeline-item {
    position: relative;
    padding-bottom: var(--space-lg);
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -38px;
    top: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--co-action);
    box-shadow: 0 0 0 4px var(--co-focus-light);
}

.timeline-date {
    font-family: 'Poppins', Arial, sans-serif;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--co-text-muted);
    margin-bottom: var(--space-xxs);
}

.timeline-title {
    font-family: 'Poppins', Arial, sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--co-text);
    margin-bottom: var(--space-xs);
}

.timeline-content {
    color: var(--co-text);
}

/* Progress tracker */
.progress-tracker {
    display: flex;
    align-items: center;
    margin: var(--space-md) 0;
}

.progress-bar {
    flex: 1;
    height: 8px;
    background: var(--co-background-shade);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--co-action), var(--co-success));
    border-radius: 4px;
    transition: width 0.5s ease;
}

.progress-text {
    margin-left: var(--space-sm);
    font-family: 'Poppins', Arial, sans-serif;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--co-text);
    white-space: nowrap;
}

/* Stats Card */
.stats-card {
    padding: var(--space-lg);
    background: linear-gradient(135deg, rgba(0, 161, 139, 0.08), rgba(0, 161, 139, 0.15));
    border-radius: var(--border-radius-lg);
    border-left: 4px solid var(--co-action);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
}

.stats-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.stats-number {
    font-family: 'Poppins', Arial, sans-serif;
    font-weight: 700;
    font-size: 2.5rem;
    color: var(--co-text);
    margin-bottom: var(--space-xs);
    line-height: 1;
}

.stats-label {
    font-family: 'Poppins', Arial, sans-serif;
    font-weight: 500;
    color: var(--co-text-muted);
    font-size: 0.875rem;
}

/* Info Box */
.info-box {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-md);
    background-color: var(--co-info-light);
    border-radius: var(--border-radius);
    margin-bottom: var(--space-md);
}

.info-box-icon {
    flex-shrink: 0;
    color: var(--co-action);
    font-size: 1.5rem;
}

.info-box-content {
    flex: 1;
}

.info-box-title {
    font-family: 'Poppins', Arial, sans-serif;
    font-weight: 700;
    margin-bottom: var(--space-xxs);
    color: var(--co-text);
}

.info-box-text {
    margin-bottom: 0;
}

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

/* Custom Dividers */
.divider {
    height: 1px;
    background: var(--co-border-light);
    margin: var(--space-lg) 0;
}

.divider-text {
    display: flex;
    align-items: center;
    margin: var(--space-lg) 0;
}

.divider-text::before,
.divider-text::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--co-border-light);
}

.divider-text::before {
    margin-right: var(--space-md);
}

.divider-text::after {
    margin-left: var(--space-md);
}

.divider-text span {
    font-family: 'Poppins', Arial, sans-serif;
    font-weight: 500;
    color: var(--co-text-muted);
    font-size: 0.875rem;
    white-space: nowrap;
}

/* Commonwealth Ombudsman Teal accent bar */
.co-accent-bar {
    height: 4px;
    background: linear-gradient(90deg, var(--co-teal), var(--co-blue));
    margin-bottom: var(--space-md);
}

/* CO Gradient backgrounds (from brand guide) */
.co-gradient-navy-blue-teal {
    background: linear-gradient(135deg, var(--co-navy), var(--co-blue), var(--co-teal));
}

.co-gradient-purple-burgundy-pink {
    background: linear-gradient(135deg, var(--co-purple), var(--co-burgundy), var(--co-pink));
}

.co-gradient-blue-teal-green {
    background: linear-gradient(135deg, var(--co-blue), var(--co-teal), var(--co-green));
}

.co-gradient-burgundy-pink-orange {
    background: linear-gradient(135deg, var(--co-burgundy), var(--co-pink), var(--co-orange));
}

.co-gradient-pink-orange-yellow {
    background: linear-gradient(135deg, var(--co-pink), var(--co-orange), var(--co-yellow));
}

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

/* ============================================================================
   FORMFACTOR CSS VARIABLES (Optional)
   Uncomment to override FormFactor's responsive breakpoints if needed.
   Tab position/orientation should be configured in the form, not CSS.
   ============================================================================ */

/*
:root {
    --small-screen-max-width: 770;
    --tiny-screen-max-width: 470;
}
*/

/* ============================================================================
   ICON FONT PROTECTION
   Note: Since we apply fonts only to text elements (not globally with *),
   icon fonts (Font Awesome, Material Icons) should work without any override.
   If icons break in future, check for global font overrides above.
   ============================================================================ */