h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e52850;
}

.validation-message {
    color: #e52850;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1.5rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* ============================================================
   Shared UI utilities (used across the landing and menu pages)
   Colours use Fluent design tokens so they adapt to light/dark.
   ============================================================ */

.page-content {
    max-width: 1100px;
    margin: 0 auto;
}

/* Application wizard steps carry the 360px picture-card rail inside
   .app-aside-layout; PersonalDetails uses its own 1180px .pd-page shell.
   Match the railed steps to that width so the form column doesn't shrink
   ~80px when moving between steps. */
.page-content:has(> .app-aside-layout) {
    max-width: 1180px;
}

/* Personal details owns its form scroller. Fill Fluent's available content
   height, including its existing header/footer and mobile progress reserve. */
.application-flow .fluent-layout-item[area="content"]:has(.pd-layout) {
    box-sizing: border-box;
}

.application-flow #main-content:has(> .pd-page > .pd-layout) {
    height: 100%;
    min-height: 0;
}

:root {
    --apply-card-gutter: 18px;
}

/* Header height. FluentLayout writes --layout-header-height: 44px as an
   inline style on .fluent-layout (and the header item is height: var(...)
   with overflow: hidden), so !important is the only way a stylesheet can
   retake it — the FluentLayoutItem Height parameter can't be used because it
   renders a literal inline height that media queries can't shrink. The
   content-area height derives from this same variable, so it stays in sync. */
.fluent-layout {
    --layout-header-height: 72px !important;
}

/* MainLayout renders FluentStack through a child component, so this shared
   shell rule must be global rather than scoped in MainLayout.razor.css.
   The bar's height comes from --layout-header-height above — this just
   fills and pads it. */
.app-header-bar {
    height: 100%;
    padding-inline: 16px;
}

/* Shared vertical card rhythm for form sections. Pages opt into one reusable
   layout class; cards themselves stay composable inside grids and tiles. */
.card-stack {
    display: flex;
    flex-direction: column;
    gap: var(--apply-card-gutter);
}

    .page-content h1 {
        margin-top: 0;
    }

.lead-text {
    color: var(--colorNeutralForeground2);
    font-size: 17px;
    line-height: 1.5;
    max-width: 70ch;
}

/* Cards / tiles */
.tile {
    height: 100%;
    box-sizing: border-box;
    background: var(--colorNeutralBackground1);
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 12px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

a.tile {
    text-decoration: none;
    color: inherit;
}

.tile.linkable:hover {
    box-shadow: var(--shadow8);
    transform: translateY(-2px);
    border-color: var(--colorBrandStroke1);
}

.tile-icon {
    margin-bottom: 6px;
}

.tile h2,
.tile h3 {
    margin: 0;
    font-size: 18px;
}

.tile p {
    margin: 0;
    color: var(--colorNeutralForeground2);
    font-size: 14px;
    line-height: 1.5;
}

/* Anchor-styled buttons (full visual control, incl. on coloured panels) */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: inherit;
    font-weight: 600;
    font-size: 15px;
    padding: 12px 22px;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    border: 2px solid transparent;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.btn-brand {
    background: var(--applyBrandBackground);
    color: var(--applyBrandForegroundOnBrand);
}

    .btn-brand:hover {
        background: var(--applyBrandBackgroundHover);
    }

.btn-light {
    background: #fff;
    color: var(--applyBrandBackground);
}

    .btn-light:hover {
        background: var(--applyBrandLightHover);
    }

/* Green = "all done, good to go" (final submit, success actions) */
.btn-success {
    background: var(--colorStatusSuccessBackground3, #107c10);
    color: #fff;
}

    .btn-success:hover:not(:disabled) {
        background: var(--colorStatusSuccessForeground1, #0e700e);
    }

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Secondary action beside a brand button on a light/card background
   (.btn-light is for coloured panels — this is the on-white equivalent). */
.btn-outline {
    background: transparent;
    color: var(--applyBrandBackground);
    border-color: var(--applyBrandBackground);
}

    .btn-outline:hover {
        background: var(--applyBrandLightHover);
    }

.btn-ghost {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.55);
}

    .btn-ghost:hover {
        background: rgba(255, 255, 255, 0.12);
        border-color: #fff;
    }

/* Numbered step marker */
.step-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--colorBrandForeground1);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-bottom: 6px;
}

/* Native select fallback (Register form) */
.native-select {
    width: 100%;
    padding: 9px 10px;
    border-radius: 6px;
    border: 1px solid var(--colorNeutralStroke1);
    background: var(--colorNeutralBackground1);
    color: var(--colorNeutralForeground1);
    font: inherit;
}

/* Numbered stepper — the six sections are a real sequence, so render them
   as connected numbered nodes (dots fill as you progress) rather than a row
   of pills. Echoes the step-intro hero's numbered-sequence language. */
.application-steps {
    display: flex;
    gap: 0;
    overflow-x: auto;
    /* padding-bottom reserves the horizontal-scroll gutter; the small
       margin-bottom + that padding balances the 22px above (.step-intro),
       centring the pills between the header card and the form. */
    padding-bottom: 12px;
    margin-bottom: 10px;
}

/* During an application the desktop footer is the progress navigation.
   Fluent uses this height to reserve space for its scrollable content area. */
.fluent-layout.application-flow {
    --layout-footer-height: 72px !important;
}

.application-flow .fluent-layout-item[area="footer"] {
    padding: 0;
    background: var(--colorNeutralBackground1);
    color: var(--colorNeutralForeground1);
    border-top: 1px solid var(--colorNeutralStroke2);
}

.application-footer-progress {
    box-sizing: border-box;
    width: 100%;
    max-width: 1180px;
    height: 100%;
    margin: 0 auto;
    padding: 8px 16px;
    gap: 8px;
    align-items: stretch;
}

.application-footer-progress .application-step {
    min-width: 0;
    min-height: 44px;
    padding: 6px 10px;
    flex-direction: row;
    justify-content: center;
    border-radius: 10px;
}

.application-footer-progress .application-step::after {
    display: none;
}

.application-footer-progress .step-dot {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
}

.application-footer-progress .step-label {
    min-width: 0;
    text-align: left;
}

.application-footer-progress .application-step.active,
.application-footer-progress .application-step:hover {
    background: var(--colorBrandBackground2);
}

.application-footer-progress .application-step:focus-visible {
    outline: 2px solid var(--colorStrokeFocus2, var(--colorBrandStroke1));
    outline-offset: -2px;
}

/* Keep all seven apprenticeship steps readable on smaller desktops/tablets. */
@media (min-width: 769px) and (max-width: 1024px) {
    .fluent-layout.application-flow {
        --layout-footer-height: 80px !important;
    }

    .application-footer-progress .application-step {
        flex-direction: column;
        gap: 4px;
        padding: 4px 2px;
    }

    .application-footer-progress .step-label {
        font-size: 11px;
        line-height: 1.2;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .fluent-layout.application-flow {
        --layout-footer-height: 0px !important;
    }

    .application-flow .fluent-layout-item[area="footer"] {
        display: none;
    }
}

/* On phones the fixed bottom step strip already covers step navigation —
   the stepper would duplicate it. */
@media (max-width: 768px) {
    .application-steps {
        display: none;
    }
}

.application-step {
    position: relative;
    flex: 1 1 0;
    min-width: 92px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 0;
    text-align: center;
    text-decoration: none;
    color: var(--colorNeutralForeground2);
}

/* Connector track running between the dots. Filled once the step it leaves
   is complete, so the coloured run visualises real progress. */
.application-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 15px;
    left: calc(50% + 20px);
    right: calc(-50% + 20px);
    height: 2px;
    background: var(--colorNeutralStroke2);
    z-index: 0;
}

.application-step.complete:not(:last-child)::after {
    background: var(--colorBrandStroke1);
}

.step-dot {
    position: relative;
    z-index: 1;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    background: var(--colorNeutralBackground1);
    border: 2px solid var(--colorNeutralStroke2);
    color: var(--colorNeutralForeground3, var(--colorNeutralForeground2));
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.step-label {
    font-size: 12px;
    line-height: 1.25;
    max-width: 13ch;
    color: var(--colorNeutralForeground2);
}

.application-step.complete .step-dot {
    background: var(--colorBrandBackground2);
    border-color: var(--colorBrandStroke1);
    color: var(--colorBrandForeground1);
}

.application-step.complete .step-label {
    color: var(--colorNeutralForeground1);
}

/* Active = "you are here": filled brand dot with a soft ring. */
.application-step.active .step-dot {
    background: var(--colorBrandBackground);
    border-color: var(--colorBrandBackground);
    color: var(--colorNeutralForegroundOnBrand, #fff);
    box-shadow: 0 0 0 4px var(--colorBrandBackground2);
}

.application-step.active .step-label {
    color: var(--colorBrandForeground1);
    font-weight: 700;
}

.application-step:hover .step-dot {
    border-color: var(--colorBrandStroke1);
}

.application-step:hover .step-label {
    color: var(--colorBrandForeground1);
}

.application-step:focus-visible {
    outline: none;
}

.application-step:focus-visible .step-dot {
    outline: 2px solid var(--colorStrokeFocus2, var(--colorBrandStroke1));
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .step-dot {
        transition: none;
    }
}

.application-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 18px;
}

.workflow-list {
    display: grid;
    gap: 12px;
}

/* Keep each emergency-contact card and its guidance together on one row. */
.nok-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}

.nok-entry {
    min-width: 0;
}

.nok-guidance,
.nok-privacy-note {
    margin: 12px 4px 0;
    line-height: 1.6;
}

.nok-privacy-note {
    margin-top: 20px;
}

/* Same faint brand wash as the course cards, so the next-of-kin tiles get a
   touch of depth rather than sitting flat on the page. */
.nok-card {
    height: auto;
    background-image: linear-gradient(160deg,
        color-mix(in srgb, var(--colorBrandBackground) 5%, transparent) 0%,
        transparent 60%);
}

/* Compact field layout inside a step card: two fields per row. */
.wf-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
    align-items: start;
}

.wf-field-grid .wf-field {
    min-width: 0;
}

@media (max-width: 560px) {
    .wf-field-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── Step list cards (contacts / qualifications) ─────────────
   Card head: item label + save-state chip; inline field errors;
   pre-save validation summary shared across step pages. */
.wf-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

.wf-item-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--colorBrandForeground1);
}

.wf-chip {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--colorNeutralBackground3, #ededed);
    color: var(--colorNeutralForeground2);
    white-space: nowrap;
}

.wf-chip.saved {
    background: var(--colorStatusSuccessBackground1, #f1faf1);
    color: var(--colorStatusSuccessForeground1, #0e700e);
}

/* Single save-state line under both next-of-kin cards (one status, not one
   per card — see ApplicationContacts). */
.nok-savebar {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.wf-error {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: var(--colorStatusDangerForeground1, #b10e1c);
}

.wf-item-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
}

.step-summary {
    display: flex;
    gap: 12px;
    margin: 0 0 16px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--colorStatusDangerBorder2, #eeb4b4);
    background: var(--colorStatusDangerBackground1, #fdf3f4);
    color: var(--colorStatusDangerForeground1, #b10e1c);
}

.step-summary strong {
    display: block;
    font-size: 14px;
}

.step-summary ul {
    margin: 4px 0 0;
    padding-left: 18px;
    font-size: 13px;
}

.application-save-error {
    margin-top: 14px;
    padding: 12px 16px;
    border-left: 4px solid var(--colorStatusDangerForeground1);
    background: var(--colorStatusDangerBackground1);
    color: var(--colorStatusDangerForeground1);
}

.application-save-error ul {
    margin: 0 0 8px;
    padding-left: 20px;
}

/* Key dates list */
.datelist {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 12px;
    overflow: hidden;
    margin-top: 24px;
}

.daterow {
    display: flex;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--colorNeutralStroke2);
}

    .daterow:last-child {
        border-bottom: none;
    }

.datewhen {
    flex: 0 0 170px;
    font-weight: 700;
    color: var(--colorBrandForeground1);
}

    .datewhat span {
        color: var(--colorNeutralForeground2);
        font-size: 14px;
    }

@media (max-width: 600px) {
    .daterow {
        flex-direction: column;
        gap: 4px;
    }

    .datewhen {
        flex-basis: auto;
    }
}

/* Reserve space under the page so the fixed mobile bottom bars never overlap the
   page's content/action buttons. The page scrolls inside the Fluent content
   region (`[area="content"]`), not <body> (which is overflow:hidden), so the
   reserve must land on that scroll container — padding <body> has no effect.
   Only applied when the bars are actually present (signed-in applicants). */
/* Mobile header declutter (M3): the light/dark toggle moves into the drawer,
   and the signed-in email (available in Settings) makes way for the actions.
   Aligned to 768px to match the mobile-shell breakpoint. */
@media (max-width: 768px) {
    .fluent-layout {
        --layout-header-height: 60px !important;
    }

    .app-header-bar {
        padding-inline: 10px;
    }

    .header-theme-toggle,
    .header-username {
        display: none;
    }
}

/* Narrow phones: the header auth buttons go icon-only (their labels hide in
   MainLayout.razor.css) — release fluent-button's :host min-width: 96px so
   the empty pills shrink to icon size. Must live here: CSS isolation can't
   put a scope attribute on a child component's host element. */
@media (max-width: 480px) {
    .auth-btn {
        min-width: 32px;
    }
}

/* Shared mobile content gutter (M1): keep every page off the screen edges,
   with the same gutter on all four sides so the page sits in an even frame
   rather than a wider-at-the-sides one. Wins over Fluent's `.pa-3`
   (padding: … !important) via higher specificity. Pages carrying a fixed
   bottom bar re-override padding-bottom below to reserve space behind it. */
@media (max-width: 768px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow: clip;
        overscroll-behavior-x: none;
    }

    .fluent-layout,
    .fluent-layout-item,
    #main-content {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Fluent injects a mobile container rule with overflow-x:auto at runtime.
       Override the outer layout as well as the content scroll region. */
    body .fluent-layout,
    body .fluent-layout[mobile] {
        /* This shell must never become a scroll container, even when focus
           tries to reveal a field. Only the content region scrolls. */
        overflow: clip;
        overscroll-behavior-x: none;
        touch-action: pan-y pinch-zoom;
    }

    .fluent-layout-item[area="content"] {
        padding: 16px !important;

        /* On rails: the phone layout is one vertical column, so the page must
           not pan sideways. Anything legitimately wider than the screen (the
           course table, the qualification wizard) carries its own
           overflow-x: auto wrapper and still scrolls inside its own card, so
           locking the page axis doesn't put content out of reach.
           overscroll-behavior-x stops a stray horizontal swipe chaining out
           to the browser's back gesture. */
        overflow-x: hidden;
        overscroll-behavior-x: none;
        touch-action: pan-y pinch-zoom;

        /* Long unbreakable tokens - email addresses, URLs, reference codes -
           would otherwise widen the column and get clipped by the lock above
           instead of wrapping. */
        overflow-wrap: anywhere;
    }

    /* Fluent v5 ships
       `.fluent-layout[mobile] .fluent-layout-item[area="content"] {
       padding-right: unset !important }` - two classes plus two attributes,
       which outranks the bare `[area="content"]` above even with !important.
       That is what was eating the right-hand gutter and leaving every page
       looking off-centre on a phone.
       This has to be its own rule, not a second selector on the block above:
       in one selector list the declarations resolve at the lower specificity
       and Fluent still wins the right-hand side. The leading `body` is load
       bearing too - matching Fluent's specificity exactly and relying on
       source order did not win in practice, so this deliberately outranks it
       (0,4,1 vs 0,4,0) and does not depend on stylesheet order at all.
       Keep it padding-right only: widening it to all four sides would
       outrank the bottom-bar reserve below and put content back under the
       tab bar. */
    body .fluent-layout[mobile] .fluent-layout-item[area="content"] {
        padding-right: 16px !important;
    }

    .pd-form-scroll {
        touch-action: pan-y pinch-zoom;
        overscroll-behavior-x: none;
    }

    .app-aside-layout > *,
    .fluent-layout-item[area="content"] fieldset {
        min-width: 0;
    }

    /* Keep mobile form text at least 16px, including Fluent shadow controls,
       so focusing an input does not trigger iPhone's automatic field zoom.
       User-initiated pinch zoom remains available. */
    body input:not([type="checkbox"]):not([type="radio"]),
    body select,
    body textarea,
    body fluent-text-input::part(control),
    body fluent-text-area::part(control) {
        font-size: max(16px, 1rem);
    }

    /* Media can't outgrow the column either. */
    .fluent-layout-item[area="content"] img,
    .fluent-layout-item[area="content"] svg,
    .fluent-layout-item[area="content"] video {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    /* !important overrides Fluent's `.pa-3` utility (padding: … !important) on the
       content layout item — without it the reserve loses the specificity battle. */
    body:has(.mobile-tabbar) .fluent-layout-item[area="content"] {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* The application strip replaces the tab bar. Reserve its 56px height plus
       16px breathing room so the final fields and actions remain reachable. */
    body:has(.step-strip) .fluent-layout-item[area="content"] {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Leave room for the compact sticky introduction when a field is brought
       into view by keyboard focus or in-page navigation. */
    body:has(.step-intro) .fluent-layout-item[area="content"] {
        scroll-padding-top: 180px;
    }
}

/* Visually hidden but available to assistive tech (labels, skip links). */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip link: hidden until focused, then pinned to the top-left. */
.skip-link {
    position: absolute;
    left: 8px;
    top: -48px;
    z-index: 1000;
    padding: 8px 14px;
    border-radius: 6px;
    background: var(--colorNeutralBackground1, #fff);
    color: var(--colorNeutralForeground1, #000);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
    transition: top .12s ease;
}

.skip-link:focus {
    top: 8px;
}

/* Two-column page shell: content + picture-card rail (desktop only). */
.app-aside-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 44px;
    align-items: start;
}

@media (max-width: 1024px) {
    .app-aside-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
}