/* ----- Theme Variables (ported from pep-public-frontend/_variables.scss) ----- */
:root {
    --background: #edf2f9;
    --text: #617185;

    --primary-50: #F3E5E4;
    --primary-100: #E0BEBC;
    --primary-200: #cb9390;
    --primary-300: #b66763;
    --primary-400: #a74741;
    --primary-500: #972620;
    --primary-600: #8f221c;
    --primary-700: #841c18;
    --primary-800: #7a1713;
    --primary-900: #690d0b;
    --primary-a100: #ff9d9b;
    --primary-a200: #ff6a68;
    --primary-a400: #ff3835;
    --primary-a700: #ff1f1c;

    /* Accent palette — ported EXACTLY from pep-public-frontend _variables.scss $front-end-accent.
       (Earlier ILMS values were a different, more-saturated red; this corrects the Material accent
       used for checked radios/checkboxes and focus ripples — PEP A200 = #ffacac, not #ff6767.) */
    --accent-50: #f9e4e5;
    --accent-100: #f1bcbe;
    --accent-200: #e79093;
    --accent-300: #dd6367;
    --accent-400: #d64147;
    --accent-500: #cf2026;
    --accent-600: #ca1c22;
    --accent-700: #c3181c;
    --accent-800: #bd1317;
    --accent-900: #b20b0d;
    --accent-a100: #ffdfdf;
    --accent-a200: #ffacac;
    --accent-a400: #ff797a;
    --accent-a700: #ff5f60;

    --warn-50: #fce7eb;
    --warn-100: #f8c3cd;
    --warn-200: #f39bab;
    --warn-300: #ee7389;
    --warn-400: #ea5570;
    --warn-500: #e63757;
    --warn-600: #e3314f;
    --warn-700: #df2a46;
    --warn-800: #db233c;
    --warn-900: #d5162c;
    --warn-a100: #ffffff;
    --warn-a200: #ffd3d7;
    --warn-a400: #ffa0a8;
    --warn-a700: #ff8691;

    /* Contrast tokens (readable foreground over each themed background) — ported from
       pep-public-frontend/_variables.scss; restored for parity with PEP's token system. */
    --primary-contrast-50: #000000;
    --primary-contrast-100: #000000;
    --primary-contrast-200: #000000;
    --primary-contrast-300: #000000;
    --primary-contrast-400: #ffffff;
    --primary-contrast-500: #ffffff;
    --primary-contrast-600: #ffffff;
    --primary-contrast-700: #ffffff;
    --primary-contrast-800: #ffffff;
    --primary-contrast-900: #ffffff;
    --primary-contrast-a100: #000000;
    --primary-contrast-a200: #000000;
    --primary-contrast-a400: #000000;
    --primary-contrast-a700: #000000;

    --accent-contrast-50: #000000;
    --accent-contrast-100: #000000;
    --accent-contrast-200: #000000;
    --accent-contrast-300: #000000;
    --accent-contrast-400: #000000;
    --accent-contrast-500: #000000;
    --accent-contrast-600: #000000;
    --accent-contrast-700: #000000;
    --accent-contrast-800: #ffffff;
    --accent-contrast-900: #ffffff;
    --accent-contrast-a100: #000000;
    --accent-contrast-a200: #000000;
    --accent-contrast-a400: #000000;
    --accent-contrast-a700: #000000;

    --warn-contrast-50: #000000;
    --warn-contrast-100: #000000;
    --warn-contrast-200: #000000;
    --warn-contrast-300: #000000;
    --warn-contrast-400: #000000;
    --warn-contrast-500: #ffffff;
    --warn-contrast-600: #ffffff;
    --warn-contrast-700: #ffffff;
    --warn-contrast-800: #ffffff;
    --warn-contrast-900: #ffffff;
    --warn-contrast-a100: #000000;
    --warn-contrast-a200: #000000;
    --warn-contrast-a400: #000000;
    --warn-contrast-a700: #000000;

    --alert-background: #ff96964d;
    --alert-foreground: #910000;

    /* PEP header toolbar (.header-newRed) and banner-page gold rule (banner-page <hr>:
       color/background #ffd700) — both genuine PEP brand colors, not ILMS inventions. */
    --header-banner-bg: #ba0c2f;
    --gold-rule: #ffd700;

    /* PEP shipped Bootstrap 4 ($border-radius .25rem); ILMS ships Bootstrap 5 (.375rem),
       which makes every button/input/card/dropdown more rounded than PEP. Restore BS4 radii. */
    --bs-border-radius: 0.25rem;
    --bs-border-radius-sm: 0.2rem;
    --bs-border-radius-lg: 0.3rem;
}

/* ----- Global Resets (from pep-public-frontend/styles.scss) ----- */
*,
*::after,
*::before {
    box-sizing: border-box;
}

* {
    transition: background 0.25s ease-in, color 0.25s ease-in;
}

html, body {
    height: 100%;
    overflow-y: visible;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
    font-size: 16px;
}

body, h1, p {
    margin: 0;
}

h2 {
    color: var(--primary-600);
    font-weight: 600;
}

a, .btn-link {
    color: #006bb7;
    /* Bootstrap 4 (PEP) defaulted links to no underline, underline on hover only; Bootstrap 5
       (ILMS) underlines them always. Restore BS4 behavior. More-specific rules (.link,
       .site-footer a) keep their own decoration. */
    text-decoration: none;
}

a:hover, .btn-link:hover {
    text-decoration: underline;
}

/* Bootstrap 4 Reboot gave every <label> margin-bottom: 0.5rem; Bootstrap 5 removed it, which
   tightened every form label against the control below it. Restore the BS4 default. */
label {
    margin-bottom: 0.5rem;
}

.primary-foreground {
    color: var(--primary-600);
}

.link,
.help-and-hints .link,
.help-and-hints [class*="link"] {
    color: darkred;
    font-weight: bold;
    text-decoration: underline;
    font-style: italic;
}

/* ----- Utility Classes (from pep-public-frontend/styles.scss) ----- */
.invisible {
    visibility: hidden;
}

.cursor-grab {
    cursor: move;
    cursor: grab;
}

.cursor-grab:active {
    cursor: grabbing;
}

.no-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.group-box {
    border: lightgrey 1px solid;
    border-radius: 5px;
    padding: 15px;
}

/* ----- Browse Applications Page ----- */
.browse-page {
    height: 100%;
    overflow: hidden;
}

.browse-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary-600);
    margin: 1rem 0 0.75rem;
    flex-shrink: 0;
}

.browse-table-area {
    min-height: 0;
    overflow: hidden;
}

.browse-table-wrapper {
    width: 100%;
    max-width: 1500px;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.browse-grid {
    flex: 1 1 auto;
    overflow: auto;
    box-shadow: 0 3px 3px -2px rgba(0,0,0,.2), 0 3px 4px 0 rgba(0,0,0,.14), 0 1px 8px 0 rgba(0,0,0,.12);
    border-radius: 4px;
}

.browse-grid .table {
    font-size: 0.875rem;
}

.browse-grid .table thead th {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #555;
    border-bottom-width: 2px;
    white-space: nowrap;
    position: sticky;
    top: 0;
    background: #fafafa;
    z-index: 1;
    height: 50px;
    vertical-align: middle;
}

.browse-grid .table tbody td {
    font-size: 0.85rem;
    vertical-align: middle;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding: 0.6rem 0.75rem;
}

.browse-grid .table tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

.browse-pager {
    flex-shrink: 0;
    height: 50px;
    padding: 0 0.75rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    background: #fafafa;
    box-shadow: 0 -1px 3px rgba(0,0,0,.06);
}

.browse-pager-info {
    font-size: 0.8rem;
    color: #777;
}

.browse-filters {
    flex-shrink: 0;
    padding: 1.25rem 1rem;
}

.cursor-pointer {
    cursor: pointer;
}

/* ----- Stepper ----- */
.stepper-header {
    display: flex;
    align-items: flex-start;
    padding: 1.5rem 0;
}

.stepper-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: default;
    white-space: nowrap;
}

/* Only reached (navigable) steps that aren't the current one show a clickable cursor; future,
   un-initialized steps stay default (not clickable) — matching PEP. */
.stepper-step.navigable:not(.active) {
    cursor: pointer;
}

.stepper-circle {
    /* Angular Material mat-step-icon = 24px. */
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #9e9e9e;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.stepper-step.active .stepper-circle,
.stepper-step.completed .stepper-circle {
    background: var(--primary-500);
}

.stepper-check {
    font-size: 16px;
}

.stepper-label {
    /* Material label-position-bottom: mat-step-label padding-top 16px; body-2 (0.875rem). */
    margin-top: 1rem;
    font-size: 0.875rem;
    font-weight: 400;
    color: #999;
    text-align: center;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    text-overflow: inherit;
}

.stepper-step.active .stepper-label {
    color: #333;
    font-weight: 600;
}

.stepper-step.completed .stepper-label {
    color: #333;
}

.stepper-connector {
    flex: 1;
    height: 1px;
    background: #bdbdbd;
    margin: 14px 0.25rem 0;
}

.stepper-connector.completed {
    /* Material never recolors the connector by state — it stays the neutral divider line. */
    background: #bdbdbd;
}

.stepper-content {
    padding: 1.5rem 0;
}

/* Vertical orientation (PEP mat-vertical-stepper on handset) — an inline accordion: each step's
   content expands beneath its own header (label next to the circle), the others collapse to
   header-only, a connector line runs down the left, and the active panel animates open. Driven by
   the component class (the breakpoint listener), with the media query below as a JS-off fallback. */
.stepper-vertical .stepper-step {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.5rem 0;
}

.stepper-vertical .stepper-label {
    margin-top: 0;
    text-align: left;
}

/* The connector line runs down the left (≈ the 24px circle's centre); content is indented past it. */
.stepper-v-content-wrap {
    margin-left: 11px;
    padding-left: 1.75rem;
}

.stepper-v-content-wrap.stepper-v-line {
    border-left: 1px solid #bdbdbd;
    min-height: 0.5rem;
}

.stepper-v-content {
    overflow: hidden;
    padding-bottom: 1rem;
    animation: stepper-v-expand 225ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes stepper-v-expand {
    from { opacity: 0; max-height: 0; transform: translateY(-6px); }
    to   { opacity: 1; max-height: 4000px; transform: translateY(0); }
}

/* Column (vertical) fallback at the EXACT CDK Handset breakpoint PEP used (isHandset$ =
   Breakpoints.Handset: ≤599.98px portrait / ≤959.98px landscape). This guarantees the column view
   under the same conditions as PEP even if the JS orientation listener doesn't fire (the column was
   previously JS-only, so it never appeared when interop was unavailable). When JS DOES fire, the
   component renders the richer vertical accordion (.stepper-v-step, no .stepper-header), which this
   query leaves untouched. NB: this is the Handset breakpoint, NOT the old 767px that columned too early. */
@media (max-width: 599.98px) and (orientation: portrait),
       (max-width: 959.98px) and (orientation: landscape) {
    .stepper-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .stepper-header .stepper-step {
        flex-direction: row;
        align-items: center;
        gap: 0.75rem;
        width: 100%;
        padding: 0.5rem 0;
    }

    .stepper-header .stepper-label {
        margin-top: 0;
        text-align: left;
    }

    .stepper-header .stepper-connector {
        width: 1px;
        height: 24px;
        margin: 0 0 0 13px;
        flex: 0 0 auto;
    }
}

/* ----- Loan Homepage ----- */
.loan-homepage {
}

.loan-banner {
    background-color: #525252;
    min-height: 90px;
}

/* PEP banner title (.pep-header in loan-homepage / stepper-form / submission-confirmation
   .scss): white Didot/serif, 2.25rem, padding-top 15px, no left padding — text is centered
   by the wrapping .container. Reverts the ILMS "shifted-right" 6rem-left-pad rebrand. */
.pep-banner-title {
    color: white;
    font-family: Didot, serif;
    font-size: 2.25rem;
    padding-top: 15px;
}

/* PEP comparison-worksheet .financial-planning-header: white Didot, 3rem (no padding-top — the
   markup uses py-2). Self-contained so it doesn't need .pep-banner-title (which adds padding-top:15px). */
.fpcw-banner-title {
    color: white;
    font-family: Didot, serif;
    font-size: 3rem;
}

.loan-body-header {
    font-size: 2rem;
    font-weight: 300;
}

/* Plan-selection prompt label (PEP plan-form.component.scss: label { font-size: 1.25rem; font-weight: 500; }) */
.plan-prompt-label {
    font-size: 1.25rem;
    font-weight: 500;
}

.plan-option-label {
    font-size: 1.1rem;
    font-weight: 500;
    cursor: pointer;
    padding-left: 0.5rem;
}

/* Radio buttons - match Material Design style */
.form-check-input[type="radio"] {
    width: 20px;
    height: 20px;
    border: 2px solid #999 !important;
    margin-top: 0.2em;
    background-image: none !important;
}

.form-check-input[type="radio"]:checked {
    background-color: var(--accent-a200) !important;
    border-color: var(--accent-a200) !important;
    background-image: none !important;
    box-shadow: inset 0 0 0 3px white;
}

.form-check-input[type="radio"]:focus {
    border-color: var(--accent-a200) !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 172, 172, 0.3);
}

.form-check-input[type="radio"]:checked:focus {
    box-shadow: inset 0 0 0 3px white, 0 0 0 0.2rem rgba(255, 172, 172, 0.3);
}

.loan-gold-rule {
    height: 10px;
    width: 115px;
    border: none;
    color: var(--gold-rule);
    background-color: var(--gold-rule);
    /* PEP's raw <hr> inherited Bootstrap 4's 1rem top/bottom; pin it so no Bootstrap version
       change can alter the rule's spacing. */
    margin-top: 1rem;
    margin-bottom: 1rem;
    margin-left: 1px;
    opacity: 1;
}

/* Sizing hook for an admin-authored download-application button rendered inside the configurable
   submission-confirmation HTML (PEP submission-confirmation.component.scss .download-application-button). */
.download-application-button {
    width: 250px;
}

/* ----- Help and Hints ----- */
.help-and-hints {
    max-width: 300px;
    background-color: #f5f5f5;
    min-height: 400px;
}

.help-title {
    font-size: 1rem;
    font-weight: 500;
}

.help-section-title {
    font-weight: 500;
}

.help-gold-rule {
    height: 7px;
    width: 50%;
    border: none;
    color: var(--gold-rule);
    background-color: var(--gold-rule);
    margin-left: 1px;
    opacity: 1;
}

/* PEP help-and-hints has no <p> override — paragraphs inherit body 1rem with BS4 1rem margin. */
.help-and-hints p {
    font-size: 1rem;
    margin-bottom: 1rem;
}

.help-and-hints-sticky-wrapper {
    position: sticky;
    top: 50px;
}

/* ----- Material-style underline inputs ----- */
.mat-field {
    position: relative;
    background-color: #f5f5f5;
    border-radius: 4px 4px 0 0;
    padding: 0.75rem 0.75rem 0.25rem;
}

.mat-field label {
    font-size: 0.75rem;
    /* Angular Material fill label color is rgba(0,0,0,.6), not #888. */
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 0;
    display: block;
}

/* Material fill: the label turns the primary color while the field is focused. */
.mat-field:focus-within label {
    color: var(--primary-500);
}

.mat-field input,
.mat-field select {
    width: 100%;
    border: none;
    border-bottom: 1px solid #999;
    border-radius: 0;
    padding: 0.25rem 0;
    font-size: 1rem;
    background: transparent;
    outline: none;
}

.mat-field input:focus,
.mat-field select:focus {
    border-bottom: 2px solid var(--primary-500);
    box-shadow: none;
}

/* ----- MatFormField: Angular Material 12 fill appearance (ported from form-field.js
   .mat-form-field-appearance-fill + theme). Grey filled box, 4px top radius, floating label
   rgba(0,0,0,.6) → primary on focus, 1px underline → 2px primary ripple. ----- */
.mat-ff {
    position: relative;
    display: block;
    /* PEP set mat-form-field { @extend .w-100 } because the fields sit inside flex .input-col /
       .university-charges-input-col / .header-input-col wrappers; without width:100% a block flex
       item shrinks to its content width instead of filling the column. */
    width: 100%;
    margin-bottom: 1.25em;
}

.mat-ff-flex {
    position: relative;
    display: flex;
    align-items: baseline;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.04);
    border-radius: 4px 4px 0 0;
    padding: 0.75em 0.75em 0;
}

.mat-ff-flex > .mat-ff-control,
.mat-ff-flex > .mat-ff-control input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    color: currentColor;
    margin: 0;
    padding: 1em 0 0.75em;
    line-height: 1.125;
    box-sizing: content-box;
}

/* MaskedInput renders its own <input>; the wrapper carries the class, so strip the wrapper. */
.mat-ff-flex > .mat-ff-control input {
    padding: 0;
}

.mat-ff-label {
    position: absolute;
    left: 0.75em;
    top: 1.34375em;
    color: rgba(0, 0, 0, 0.6);
    pointer-events: none;
    white-space: nowrap;
    transform-origin: left top;
    transition: transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1), color 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
}

.mat-ff-flex > .mat-ff-control:focus ~ .mat-ff-label,
.mat-ff-flex > .mat-ff-control:not(:placeholder-shown) ~ .mat-ff-label,
.mat-ff-flex > .mat-ff-control:has(input:not(:placeholder-shown)) ~ .mat-ff-label,
.mat-ff-always-float .mat-ff-label {
    transform: translateY(-1em) scale(0.75);
}

.mat-ff-flex > .mat-ff-control:focus ~ .mat-ff-label,
.mat-ff:focus-within .mat-ff-label {
    color: var(--primary-500);
}

.mat-ff-underline {
    position: relative;
    width: 100%;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.42);
}

.mat-ff-ripple {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background-color: var(--primary-500);
    transform: scaleX(0);
    transition: transform 300ms cubic-bezier(0.25, 0.8, 0.25, 1);
}

.mat-ff:focus-within .mat-ff-ripple {
    transform: scaleX(1);
}

/* Native select (Material mat-native-select inside a fill field): strip the OS chrome and draw
   Material's CSS triangle arrow (form-field.js .mat-form-field-type-mat-native-select). */
.mat-ff-select .mat-ff-flex > .mat-ff-control,
.mat-ff-flex > select.mat-ff-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 15px;
    cursor: pointer;
}

.mat-ff-select .mat-ff-flex::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid rgba(0, 0, 0, 0.54);
    position: absolute;
    right: 0.75em;
    top: 50%;
    margin-top: -2.5px;
    pointer-events: none;
}

/* Disabled fields (e.g. the worksheet "number of semesters" select until a base semester is chosen):
   Angular Material's disabled fill look — muted text + label, dimmed arrow, dotted underline. */
.mat-ff-control:disabled {
    color: rgba(0, 0, 0, 0.38);
    -webkit-text-fill-color: rgba(0, 0, 0, 0.38);
    cursor: default;
}

.mat-ff-control:disabled ~ .mat-ff-label {
    color: rgba(0, 0, 0, 0.38);
}

.mat-ff-flex:has(.mat-ff-control:disabled) {
    background-color: rgba(0, 0, 0, 0.02);
}

.mat-ff-select .mat-ff-flex:has(.mat-ff-control:disabled)::after {
    border-top-color: rgba(0, 0, 0, 0.38);
}

.mat-ff:has(.mat-ff-control:disabled) .mat-ff-underline {
    background-color: transparent;
    border-bottom: 1px dotted rgba(0, 0, 0, 0.42);
}

/* ----- MatSelect overlay (Angular Material mat-select panel + mat-option). The trigger reuses the
   .mat-ff fill chrome; the open panel is a Material elevated overlay rather than the native OS list. ----- */
.mat-select-trigger {
    cursor: pointer;
}

.mat-select-value {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mat-select-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1001;
    margin-top: 2px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
    max-height: 256px;
    overflow: auto;
    display: none;
}

.mat-select-open .mat-select-panel {
    display: block;
    transform-origin: top center;
    animation: mat-select-panel-enter 120ms cubic-bezier(0, 0, 0.2, 1);
}

@keyframes mat-select-panel-enter {
    from { opacity: 0; transform: scaleY(0.85); }
    to   { opacity: 1; transform: scaleY(1); }
}

.mat-select-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.mat-option {
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 16px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(0, 0, 0, 0.87);
    font-size: 1rem;
}

.mat-option:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

.mat-option-selected {
    color: var(--primary-500);
    background-color: rgba(0, 0, 0, 0.04);
}

/* Disabled MatSelect (e.g. worksheet "number of semesters" until a base semester is chosen). */
.mat-ff-disabled .mat-select-trigger {
    cursor: default;
}

.mat-ff-disabled .mat-select-value,
.mat-ff-disabled .mat-ff-label {
    color: rgba(0, 0, 0, 0.38);
}

.mat-ff-disabled.mat-ff-select .mat-ff-flex::after {
    border-top-color: rgba(0, 0, 0, 0.38);
}

.section-title {
    font-size: 1.7rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 1.5rem;
    margin-top: 0.75rem;
}

.academic-level-title {
    font-size: 1.15rem;
    font-weight: 400;
    margin-bottom: 1rem;
}

/* PEP additional-information.component.scss .question-label (1.1rem / 400). */
.question-label {
    font-size: 1.1rem;
    font-weight: 400;
}

/* ----- Loan Application Form ----- */
.loan-app-page {
    height: 100%;
    overflow: auto;
}

.step-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--primary-600);
    margin-bottom: 1.5rem;
}

.step-subtitle {
    font-size: 1rem;
    font-weight: 600;
    color: #555;
    margin-bottom: 0.75rem;
}

.step-actions {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #e0e0e0;
}

/* PEP submission review boxes are plain (Bootstrap `border p-3 m-3`), white, no radius. */
.review-section {
    padding: 1rem;
}

.btn-primary {
    color: #fff;
    background-color: var(--primary-500);
    border-color: var(--primary-700);
}

.btn-primary:hover {
    background-color: var(--primary-700);
    border-color: var(--primary-800);
}

.btn-primary:active, .btn-primary:focus {
    background-color: var(--primary-800);
    border-color: var(--primary-900);
}

.btn-primary:disabled, .btn-primary.disabled {
    background-color: var(--primary-500);
    border-color: var(--primary-700);
    opacity: 0.65;
}

/* ----- Buttons: Angular Material 12 character (ported from button.js + elevation z2/z8).
   PEP primary actions are mat-raised-button (filled + elevation); "Back" is mat-button (flat text);
   font-weight 500; 4px radius (via --bs-border-radius). ----- */
.btn {
    font-weight: 500;
}

.btn-primary {
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    transition: background-color 400ms cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary:hover {
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.btn-primary:disabled, .btn-primary.disabled {
    box-shadow: none;
}

/* PEP "Back" button is mat-button (flat text), not a bordered Bootstrap outline button. */
.btn-outline-secondary {
    border-color: transparent;
    color: rgba(0, 0, 0, 0.87);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: rgba(0, 0, 0, 0.04);
    border-color: transparent;
    color: rgba(0, 0, 0, 0.87);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* ----- Header ----- */
.header-banner {
    background-color: var(--header-banner-bg);
    flex-shrink: 0;
}

.header-banner-logo {
    max-height: 50px;
    max-width: 500px;
    cursor: pointer;
}

.header-nav-row {
    flex-shrink: 0;
}

/* PEP .link: color/weight/nowrap only — default anchor underline, no custom hover rule. */
.header-link {
    color: var(--primary-600);
    font-weight: 600;
    white-space: nowrap;
}

.header-divider {
    width: 1px;
    height: 20px;
    background: gray;
    border: none;
}

/* ----- Header responsive (handset/tablet) hamburger menu (PEP mat-menu) ----- */
.header-menu-wrapper {
    position: relative;
}

.header-menu-button {
    color: var(--primary-600);
    padding: 0.25rem 0.5rem;
    line-height: 0;
}

.header-menu-icon {
    display: block;
}

.header-menu {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 1000;
    min-width: 14rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    padding: 0.25rem 0;
}

.header-menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    color: var(--primary-600);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}

.header-menu-item:hover,
.header-menu-item:focus {
    background: rgba(0, 0, 0, 0.06);
    color: var(--primary-600);
}

.header-menu-item-icon {
    flex: 0 0 auto;
}

/* ----- Footer ----- */
.site-footer {
    background-color: #000;
    color: white;
    font-size: 0.9rem;
    font-weight: 200;
}

.site-footer p {
    margin-bottom: 1px;
}

.site-footer a {
    text-decoration: underline;
    color: white;
}

/* PEP footer img: max 50x500, margin-top 10px, padding 3px, pointer cursor. */
.footer-logo {
    max-height: 50px;
    max-width: 500px;
    margin-top: 10px;
    padding: 3px;
    cursor: pointer;
}

.footer-copyright {
    border-top: 1px solid #6c7373;
    padding-top: 1em;
}

/* ----- Side Nav ----- */
.side-nav {
    width: 314px;
    min-width: 314px;
    height: 100%;
    background-color: var(--primary-500);
    color: white;
    overflow-y: auto;
}

.side-nav-collapsed {
    width: 40px;
    min-width: 40px;
    background-color: var(--primary-500);
}

.side-nav-logo {
    max-height: 85px;
    margin-top: 10px;
    padding: 3px;
    cursor: pointer;
}

.side-nav-icon {
    font-size: 20px;
    color: white;
}

.side-nav-collapse-btn {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 4px;
    margin-top: 4px;
    margin-right: 4px;
    align-self: flex-start;
}

.side-nav-collapse-btn:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
}

.side-nav-toggle {
    color: white;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.25rem 0.5rem;
}

.side-nav-toggle:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: white;
}

.side-nav-top-btn {
    color: white;
    text-decoration: none;
    font-weight: 400;
    font-size: 1rem;
    padding: 0.5rem 0;
}

.side-nav-top-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.side-nav-top-btn.active {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
}

.side-nav-section-header {
    background: transparent;
    color: white;
    font-weight: 400;
    font-size: 1rem;
}

.side-nav-section-header:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.side-nav-chevron {
    display: inline-block;
    transition: transform 0.2s;
    font-size: 0.85rem;
}

.side-nav-chevron.expanded {
    transform: rotate(180deg);
}

.side-nav-item {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-size: 1rem;
    font-weight: normal;
    height: 50px;
    line-height: 50px;
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.side-nav-item:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: white;
}

.side-nav-item.active {
    background-color: rgba(255, 255, 255, 0.25);
    color: white;
}

h1:focus {
    outline: none;
}

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

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

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

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

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ----- Confirm Dialog ----- */
.confirm-dialog-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.confirm-dialog {
    background: white;
    border-radius: 8px;
    padding: 2rem;
    max-width: 480px;
    width: 90%;
    text-align: center;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}

.confirm-dialog-icon {
    margin-bottom: 1rem;
}

.confirm-dialog-title {
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.confirm-dialog-text {
    margin-bottom: 1.5rem;
    color: #666;
}

.confirm-dialog-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

/* ----- Form Grid Layout (ported from financials-form.component.scss) ----- */
.form-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    padding: 0;
}

.label-col {
    flex: 1 0 0%;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    color: #505050;
    font-size: 1rem;
}

.input-col {
    display: flex;
    justify-content: flex-start;
    align-self: center;
    flex: 0 0 auto;
    width: 100%;
}

.header-label-col {
    flex: 1 0 0%;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
    color: #505050;
    font-size: 1.2rem;
    font-weight: 500;
}

.header-input-col {
    display: flex;
    justify-content: flex-start;
    align-self: center;
    flex: 0 0 auto;
    width: 100%;
}

@media (min-width: 768px) {
    .input-col,
    .header-input-col {
        justify-content: flex-end;
        width: 41.6666666667%;
    }
}

.form-row .mat-field {
    width: 100%;
}

.form-row .form-check {
    margin: 0.5rem;
    font-size: 1.1rem;
}

.section-description {
    margin-bottom: 1rem;
    font-size: 1.2rem;
    font-weight: 500;
}

/* Hide number input spinners (applicant-form + financials-form) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

.form-row hr {
    margin-left: 0;
}

/* ----- Alert Utilities (ported from pep-public-frontend/styles.scss) ----- */
.alert-error {
    background-color: Red;
}

.alert-warn-foreground {
    color: #ec820c;
}

.alert-success {
    background-color: #dff2bf;
}

.alert-success-foreground {
    color: #7fc21b;
}

.alert-warn {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}

.alert-info {
    color: #004085;
    background-color: #cce5ff;
    border-color: #b8daff;
}

/* ----- Submission / Review (ported from submission.component.scss) ----- */
.loading-shade {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.15);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.important-text {
    color: darkred;
    font-weight: bold;
    text-decoration: underline;
    font-style: italic;
}

.sub-header {
    font-weight: 600;
}

.text-label {
    font-weight: 500;
}

.text-info {
    font-weight: normal;
    color: black;
}

.inside-info {
    margin-top: 0.5rem;
}

.plan-type {
    font-size: 1.4rem;
}

.comments {
    overflow-wrap: break-word;
}
/* ----- Financial Planning Comparison Worksheet (PEP financial-planning-worksheet-form.scss) ----- */
.section-h1 {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    font-weight: 500;
}

/* PEP defined .section-h1 per-component: the worksheet form uses 1.25rem (above), but the
   stepper-form (loan application steps) uses 1.7rem. ILMS flattened both into one global rule;
   restore the stepper size, scoped to the stepper content so the worksheet is unaffected. */
.stepper-content .section-h1 {
    font-size: 1.7rem;
}

/* FPCW university-charges three-column rows. The .form-row/.label-col/.input-col grid is already
   defined once in the loan-application section above (mobile-first 100% → 41.67% at md); do NOT
   re-declare it here — the earlier duplicate dropped the mobile width and leaked align-self. */
.university-charges-label-col {
    display: flex;
    align-items: center;
    color: #505050;
    font-size: 1.2rem;
    flex: 0 0 auto;
    width: 33.3333%;
}

.university-charges-input-col {
    display: flex;
    justify-content: flex-end;
    flex: 0 0 auto;
    width: 66.6667%;
}

/* Inline validation / guard message (PEP .error-format). */
.error-format {
    background: var(--primary-50);
    border: var(--warn-500) 1px solid;
    border-radius: 5px;
    padding: 5px;
}

/* ----- FPCW client-side print/PDF export (PEP fpcw-export.component.scss) ----- */
.fpcw-pdf-page {
    min-height: 100%;
}

.fpcw-table {
    border-collapse: collapse;
}

tr.border-left-right td {
    border-left: 2px solid black;
    border-right: 2px solid black;
}

.fpcw-table td {
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
}

.fpcw-table td.left {
    text-align: left !important;
}

.fpcw-table .vert-top {
    vertical-align: top;
}

.fpcw-header {
    height: 72px;
    /* PEP fpcw-export.component.scss: the brand header band is #ba0c2f with white text. It must
       NOT share the section-band .primary-background (primary-600) color — see the deduped rule below. */
    background-color: #ba0c2f;
    color: white;
}

.fpcw-header .title {
    font-size: 0.75rem;
}

.font-medium {
    font-weight: 500;
}

.header-image {
    max-height: 50px;
}

.footer-text {
    font-size: 0.65rem;
}

/* Section bands + the "University Charges" label cell. */
.fpcw-table .primary-background {
    background: var(--primary-600);
    color: white;
}

/* Populated/highlighted cells. */
.fpcw-table .has-content {
    background: var(--primary-50);
}

.fpcw-table .right-border {
    border-right: 1px dashed black;
}

.fpcw-table .bottom-border {
    border-bottom: 1px dashed black;
}

.fpcw-table .nested-text {
    font-size: 0.6rem;
    vertical-align: top;
    padding-top: 10px;
}