@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}


/* ── In-card section titles (Pearson upload and similar pages) ──────────── */
.sp-section-title {
    font-weight: 600 !important;
    padding-left: 12px;
    border-left: 4px solid rgba(0, 0, 0, 0.18);
}

.sp-theme-yccd .sp-section-title { border-left-color: #00572D; }
.sp-theme-mjc  .sp-section-title { border-left-color: #172B54; }
.sp-theme-cc   .sp-section-title { border-left-color: #90041B; }

/* ── Pearson upload — review grid ────────────────────────────────────────── */

.sp-review-legend {
    background-color: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    padding: 10px 14px;
}

.sp-review-legend-heading {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: block;
    margin-bottom: 8px;
    opacity: 0.6;
}

.sp-review-legend-items {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sp-review-legend-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.8rem;
    line-height: 1.4;
}

.sp-review-legend-item .mud-icon-root {
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Pearson review panel (replaces MudCard for the review screen) ───────── */

.sp-review-panel {
    background: var(--mud-palette-surface);
    border-radius: var(--mud-default-borderradius);
    box-shadow: var(--mud-elevation-1);
    overflow: hidden;         /* clip card corners */
}

.sp-review-panel-body {
    padding: 16px;
    overflow-x: auto;         /* THIS is the scroll container — no MudCardContent to fight */
    -webkit-overflow-scrolling: touch;
}

/* ── Review grid ─────────────────────────────────────────────────────────── */

/*
 * The grid declares a hard minimum width so columns never compress below readable
 * size. The panel-body scroll container handles overflow on narrow screens.
 * display:contents on rows makes every cell a direct child of the grid so
 * column tracks align across header and data rows without subgrid.
 */
.sp-review-grid {
    display: grid;
    grid-template-columns:
        auto  /* check      */
        1fr   /* student    */
        auto  /* L          */
        auto  /* R          */
        auto  /* W          */
        auto  /* Overall    */
        auto  /* GSE        */
        auto  /* Status     */
        1fr;  /* Placement  */
    width: 100%;
}

/* Header — display:contents so header divs are direct grid children */
.sp-review-grid-header {
    display: contents;
}

.sp-review-grid-header > [role="columnheader"] {
    padding: 6px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    border-bottom: 2px solid rgba(0,0,0,0.12);
    text-align: left;
    cursor: default;
}

/* Data rows — display:contents so cells are direct grid children */
.sp-review-grid-row {
    display: contents;
}

/* All cells */
.sp-review-grid-row > [role="gridcell"] {
    padding: 7px 8px;
    font-size: 0.875rem;
    border-bottom: 1px solid rgba(0,0,0,0.07);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    }

.sp-cell-check   { justify-content: center; }
.sp-cell-student { flex-direction: column; align-items: flex-start; gap: 2px; }
.sp-cell-score   { font-variant-numeric: tabular-nums; }
.sp-cell-overall { font-variant-numeric: tabular-nums; font-weight: 600; }
.sp-cell-gse     { font-size: 0.8rem; }

/* Student cell children */
.sp-student-name  { display: block; width: 100%; text-align: left; font-weight: 600; font-size: 0.875rem; line-height: 1.3; }
.sp-student-email { display: block; width: 100%; text-align: left; font-size: 0.75rem; line-height: 1.3; }
.sp-student-test  { display: block; width: 100%; text-align: left; font-size: 0.72rem; line-height: 1.3; font-style: italic; }

/* Row state variants — target every cell in the row via the row class */
.sp-review-row--alt > [role="gridcell"]                              { background-color: rgba(0,0,0,0.018); }
.sp-review-row--disabled > [role="gridcell"]                         { opacity: 0.5; }
.sp-review-row--submitted > [role="gridcell"]                        { opacity: 0.7; }
.sp-review-row--error > [role="gridcell"]:not(.sp-cell-placement)    { opacity: 0.85; }

/* Column group tints */
.sp-review-grid-row > .sp-col-l,
.sp-review-grid-row > .sp-col-r,
.sp-review-grid-row > .sp-col-w    { background-color: rgba(33,150,243,0.04); }
.sp-review-grid-row > .sp-col-overall { background-color: rgba(33,150,243,0.09); }
.sp-review-grid-row > .sp-col-gse  { background-color: rgba(33,150,243,0.04); }

/* Header column tints */
.sp-review-grid-header > .sp-col-l,
.sp-review-grid-header > .sp-col-r,
.sp-review-grid-header > .sp-col-w    { background-color: rgba(33,150,243,0.04); }
.sp-review-grid-header > .sp-col-overall { background-color: rgba(33,150,243,0.09); }
.sp-review-grid-header > .sp-col-gse  { background-color: rgba(33,150,243,0.04); }

/* Row hover — display:contents rows receive :hover when pointer is over any child */
.sp-review-grid-row:hover > [role="gridcell"] { background-color: rgba(0,0,0,0.04); }

.sp-review-select .mud-input-root { font-size: 0.875rem; }

/* ── Mobile layout — single column stack below 640px ────────────────────── */
@media (max-width: 639px) {

    /* Panel body must not scroll — content stacks instead */
    .sp-review-panel-body { overflow-x: hidden; }

    /* Hide the column header row — each cell is self-labelled via ::before */
    .sp-review-grid-header { display: none; }

    /* Grid becomes a plain block; rows are block boxes */
    .sp-review-grid     { display: block; }
    .sp-review-grid-row { display: block; padding: 10px 12px; border-bottom: 2px solid rgba(0,0,0,0.12); }

    /* Every cell is a full-width flex row: label on left, value on right */
    .sp-review-grid-row > [role="gridcell"] {
        display: flex;
        width: 100%;
        padding: 3px 0;
        border-bottom: none;
        align-items: baseline;
        justify-content: flex-start;
        gap: 6px;
    }

    /* Checkbox cell — no label, just the checkbox */
    .sp-cell-check { justify-content: flex-start; }

    /* Student cell — stacks its three lines naturally, no label needed */
    .sp-cell-student { flex-direction: column; align-items: flex-start; gap: 2px; }

    /* Score / GSE cells — inline label via ::before */
    .sp-col-l::before       { content: "Listening: ";  font-weight: 600; flex-shrink: 0; }
    .sp-col-r::before       { content: "Reading: ";    font-weight: 600; flex-shrink: 0; }
    .sp-col-w::before       { content: "Writing: ";    font-weight: 600; flex-shrink: 0; }
    .sp-col-overall::before { content: "Overall: ";    font-weight: 600; flex-shrink: 0; }
    .sp-col-gse::before     { content: "GSE Range: ";  font-weight: 600; flex-shrink: 0; }

    /* Status and placement — no label, chips/select are self-describing */
    .sp-cell-status    { padding-top: 4px; }
    .sp-cell-placement { padding-top: 2px; }

    /* Placement select fills the full row width */
    .sp-cell-placement .mud-input-control,
    .sp-cell-placement .mud-select { width: 100%; }

    /* Remove column tints — meaningless in stacked layout */
    .sp-review-grid-row > .sp-col-l,
    .sp-review-grid-row > .sp-col-r,
    .sp-review-grid-row > .sp-col-w,
    .sp-review-grid-row > .sp-col-overall,
    .sp-review-grid-row > .sp-col-gse { background-color: transparent; }

    /* Row state variants apply to the row div directly */
    .sp-review-row--alt       { background-color: rgba(0,0,0,0.018); }
    .sp-review-row--disabled  { opacity: 0.5; }
    .sp-review-row--submitted { opacity: 0.7; }
}

/* Remove the old MudCardContent overflow override — no longer needed */

/* SelfPlacement app shell (MudBlazor layout) */
.sp-layout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

:root {
	--sp-header-height-expanded: 126px;
	--sp-header-height-collapsed: 64px;
	--sp-header-height: var(--sp-header-height-expanded);
	--sp-logo-height-expanded: 80px;
	--sp-logo-height-collapsed: 52px;
	--sp-logo-height: var(--sp-logo-height-expanded);
}

html.sp-header--collapsed {
	--sp-header-height: var(--sp-header-height-collapsed);
	--sp-logo-height: var(--sp-logo-height-collapsed);
}

/* no collapsed padding override needed */

html:not(.sp-header--collapsed) {
		--sp-logo-height: var(--sp-logo-height-expanded);
	}


/* Override MudBlazor default AppBar/Toolbar spacing so header matches the host site's chrome */
.sp-appbar {
	padding: 0;
	height: var(--sp-header-height);
	min-height: var(--sp-header-height);
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 999;
	transition: height 0.4s ease, min-height 0.4s ease;
	-webkit-transition: height 0.4s ease, min-height 0.4s ease;
	-moz-transition: height 0.4s ease, min-height 0.4s ease;
	-ms-transition: height 0.4s ease, min-height 0.4s ease;
	-o-transition: height 0.4s ease, min-height 0.4s ease;
	box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
	will-change: height;

	background-color: #00572D;
	color: #ffffff;
	border-bottom: 1px solid rgba(0, 0, 0, 0.18);
}

/* MudBlazor applies sizing/padding on internal appbar/toolbar elements; force our header dimensions */
.sp-appbar.mud-appbar {
	height: var(--sp-header-height) !important;
	min-height: var(--sp-header-height) !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	transition: height 0.4s ease, min-height 0.4s ease;
	will-change: height;
}

.sp-appbar.mud-appbar,
.sp-appbar.mud-elevation-0 {
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16) !important;
}

.sp-appbar .mud-toolbar {
	height: var(--sp-header-height) !important;
	min-height: var(--sp-header-height) !important;
	padding: 0 !important;
	transition: height 0.4s ease, min-height 0.4s ease;
	will-change: height;
	display: flex;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
}

.sp-brand {
    font-weight: 600;
    letter-spacing: 0.2px;
}

.sp-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: row;
	flex-wrap: nowrap;
	min-height: var(--sp-header-height);
	height: var(--sp-header-height);
	padding-left: 18px;
	padding-right: 18px;
	transition: height 0.4s ease;
}

/* Ensure the header content is always a row at normal widths */
.sp-header-inner > .sp-header-left,
.sp-header-inner > .sp-header-right {
	flex: 0 0 auto;
}

.sp-header-inner > .sp-header-right {
	margin-left: auto;
}

/* Header wrapper spans full width (do not constrain to content max-width) */
.sp-header-inner {
	width: 100%;
}

.sp-header-left,
.sp-header-right {
	display: flex;
	align-items: center;
	min-height: 0;
	flex: 0 0 auto;
}

.sp-header-left {
	justify-content: flex-start;
}

.sp-header-right {
	justify-content: flex-end;
}

@media (max-width: 600px) {
	/* Allow the appbar to expand beyond its fixed desktop height when content stacks */
	.sp-appbar,
	.sp-appbar.mud-appbar {
		height: auto !important;
		min-height: 56px !important;
	}

	.sp-appbar .mud-toolbar {
		height: auto !important;
		min-height: 56px !important;
		flex-direction: column !important;
		flex-wrap: wrap !important;
		align-items: stretch !important;
	}

	.sp-header-inner {
		flex-direction: column !important;
		flex-wrap: wrap !important;
		align-items: stretch;
		justify-content: center;
		gap: 8px;
		padding-top: 10px;
		padding-bottom: 10px;
		height: auto !important;
	}

	/* Remove the desktop push-to-right so the auth block centres under the logo */
	.sp-header-inner > .sp-header-right {
		margin-left: 0;
	}

	.sp-header-inner > .sp-header-left,
	.sp-header-inner > .sp-header-right {
		width: 100%;
	}

	.sp-header-left,
	.sp-header-right {
		justify-content: center;
	}

	/* Stack greeting above sign-out button on mobile */
	.sp-user-auth-block {
		flex-direction: column;
		align-items: center;
		gap: 6px;
	}

	/* Offset main content to clear the taller stacked header on mobile */
	/* html prefix raises specificity above the later .mud-main-content.sp-main !important rule */
	html body .sp-main,
	html body .mud-main-content.sp-main {
		padding-top: 165px !important;
	}

	/* Use collapsed logo size on mobile to keep the stacked header compact */
	:root {
		--sp-logo-height: var(--sp-logo-height-collapsed);
	}
}

/* Base background for content areas (all tenants) */
.sp-main {
    flex: 1 1 auto;
    min-height: 0;
    background-color: #f0f0f0;
    padding-top: var(--sp-header-height);
    display: flex;
    flex-direction: column;
}

.sp-main > main {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.sp-content {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.sp-content-surface {
    padding: 1.25rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Footer baseline */
.sp-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.sp-footer-inner {
    color: #ffffff;
}

.sp-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.sp-footer-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.sp-footer-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.sp-footer-logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sp-footer-logo {
    /*height: 18px;
    max-height: 18px;*/
    width: auto;
    max-width: 140px;
    object-fit: contain;
    display: block;
}

.sp-footer-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

@media (max-width: 600px) {
    .sp-footer-row {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .sp-footer-left {
        justify-content: center;
    }

    .sp-footer-right {
        align-self: center;
    }

    .sp-footer-text {
        text-align: center;
    }

    .sp-footer-logo {
        max-width: 120px;
    }
}

/* Skip link for keyboard accessibility - hidden until focused */
.sp-skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px 16px;
    z-index: 10000;
    text-decoration: none;
    font-weight: 600;
    transition: top 0.2s ease;
}

.sp-skip-link:focus {
    top: 0;
    outline: 2px solid #258cfb;
    outline-offset: 2px;
}

a, .btn-link {
    color: #0062A8; /* darkened from #0071c1: 5.6:1 on #f0f0f0, 6.3:1 on white */
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.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;
}

.content {
    padding-top: 1.1rem;
}

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

.invalid {
    outline: 1px solid #C62828; /* darkened from red: passes 3:1 UI-component threshold */
}

.validation-message {
    color: #C62828; /* darkened from red (#FF0000 = 3.997:1 on white, fails 4.5:1): 5.6:1 on white */
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

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

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

.sp-logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.sp-logo {
    height: var(--sp-logo-height);
    width: auto;
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    transition: height 0.4s ease;
    will-change: height;
}

.mud-main-content.sp-main {
    padding-top: var(--sp-header-height) !important;
    transition: padding-top 0.4s ease;
}

/* Theme variants (selected by school) */

/* YCCD */
.sp-theme-yccd .sp-appbar {
    background-color: #00572D;
}
.sp-theme-yccd .sp-footer {
    background-color: #014021;
}

/* MJC */
.sp-theme-mjc .sp-appbar {
    background-color: #172B54;
}
.sp-theme-mjc .sp-footer {
    background-color: #101D38;
}

/* CC */
.sp-theme-cc .sp-appbar {
    background-color: #90041B;
}
.sp-theme-cc .sp-footer {
    background-color: #6A0314;
}

/* Default (fallback when no tenant theme key is resolved) */
.sp-theme-default .sp-footer {
    background-color: #333333; /* prevents white-on-white when no theme variant is matched */
}

/* Header auth block — authenticated state */
.sp-user-auth-block {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sp-user-greeting {
    font-size: 1rem !important;
    font-weight: 500;
    color: inherit;
    white-space: nowrap;
    user-select: none;
}

/* Visible outlined "Sign out" button — always present, no interaction required to discover */
.sp-signout-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 4px;
    padding: 4px 14px;
    color: #fff;
    font-family: inherit;
    font-size: 1rem !important;
    line-height: 1.5;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.sp-signout-icon {
    font-size: 1rem !important;
    height: 1rem !important;
    width: 1rem !important;
}

.sp-signout-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #fff;
}

.sp-signout-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Header auth block — unauthenticated state */
.sp-user-button .mud-button-label {
    text-transform: none;
    letter-spacing: normal;
    display: flex;
    align-items: center;
    gap: 0;
    font-size: 1rem !important;
}

/* Keyboard focus — header Sign In button (dark header background) */
.sp-user-button.mud-button-root:focus-visible {
    outline: 2px solid #fff !important;
    outline-offset: 3px !important;
    border-radius: 4px;
}

/* ── Home page journey strip ─────────────────────────────────────────────── */

.sp-journey-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px 0 16px;
    flex-wrap: wrap;
}

.sp-journey-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 80px;
}

.sp-journey-icon.mud-icon-root {
    font-size: 2rem !important;
    height: 2rem !important;
    width: 2rem !important;
    color: rgba(0, 0, 0, 0.3);
    transition: color 0.2s ease;
}

.sp-journey-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.45);
    text-align: center;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sp-journey-arrow {
    font-size: 1.4rem;
    color: rgba(0, 0, 0, 0.2);
    line-height: 1;
    margin-bottom: 18px;
    flex-shrink: 0;
}

/* Tenant-colored journey icons */
.sp-theme-yccd .sp-journey-icon.mud-icon-root { color: #00572D; }
.sp-theme-mjc  .sp-journey-icon.mud-icon-root { color: #172B54; }
.sp-theme-cc   .sp-journey-icon.mud-icon-root { color: #90041B; }

/* ── Journey strip step states (Resume / progress pages) ────────────────── */

/* Done: tenant color at reduced opacity; muted label */
.sp-theme-yccd .sp-journey-step--done .sp-journey-icon.mud-icon-root { color: rgba(0, 87, 45, 0.45); }
.sp-theme-mjc  .sp-journey-step--done .sp-journey-icon.mud-icon-root { color: rgba(23, 43, 84, 0.45); }
.sp-theme-cc   .sp-journey-step--done .sp-journey-icon.mud-icon-root { color: rgba(144, 4, 27, 0.45); }

.sp-journey-step--done .sp-journey-label {
    color: rgba(0, 0, 0, 0.3);
}

/* Active: full tenant color inherited; larger icon; bolder label */
.sp-journey-step--active .sp-journey-icon.mud-icon-root {
    font-size: 2.5rem !important;
    height: 2.5rem !important;
    width: 2.5rem !important;
}

.sp-journey-step--active .sp-journey-label {
    color: rgba(0, 0, 0, 0.75);
    font-weight: 700;
}

/* Upcoming: force muted grey — higher specificity beats tenant color rules */
.sp-journey-strip .sp-journey-step--upcoming .sp-journey-icon.mud-icon-root {
    color: rgba(0, 0, 0, 0.18);
}

.sp-journey-step--upcoming .sp-journey-label {
    color: rgba(0, 0, 0, 0.28);
}

/* ── Home page sign-in CTA zone ──────────────────────────────────────────── */

.sp-signin-zone.mud-paper {
    background-color: rgba(0, 0, 0, 0.025) !important;
    border: 1px solid rgba(0, 0, 0, 0.09);
    border-radius: 8px !important;
    padding: 20px 24px !important;
}

/* Sign-in heading (LoginTopTitle promoted to h5) */
.sp-signin-heading {
    font-weight: 600 !important;
    padding-bottom: 10px;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: rgba(0, 0, 0, 0.15);
}

.sp-theme-yccd .sp-signin-heading { border-bottom-color: #00572D; }
.sp-theme-mjc  .sp-signin-heading { border-bottom-color: #172B54; }
.sp-theme-cc   .sp-signin-heading { border-bottom-color: #90041B; }

/* ── Progressive loading ────────────────────────────────────────────────── */

.sp-loading-icon.mud-icon-root {
    font-size: 1.4rem;
    flex-shrink: 0;
    transition: opacity 0.3s ease;
}

.sp-theme-yccd .sp-loading-icon.mud-icon-root { color: #00572D; }
.sp-theme-mjc  .sp-loading-icon.mud-icon-root { color: #172B54; }
.sp-theme-cc   .sp-loading-icon.mud-icon-root { color: #90041B; }

.sp-patience-note {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.7s ease, max-height 0.7s ease;
}

.sp-patience-note--visible {
    opacity: 1;
    max-height: 6rem;
}

.sp-signin-btn-row {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding-top: 20px;
    margin-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.sp-signin-zone .sp-begin-btn.mud-button-filled {
    min-width: 220px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

/* ── Landing card ────────────────────────────────────────────────────────── */

/* Clip the header band to the card's own border-radius */
.sp-landing-card.mud-card {
    overflow: hidden;
}

.sp-landing-header {
    padding: 1.5rem 1.5rem 1.25rem;
    background-color: #444; /* fallback; overridden per theme below */
}

.sp-landing-title {
    color: #ffffff !important;
    font-weight: 600 !important;
    line-height: 1.3;
}

.sp-theme-yccd .sp-landing-header { background-color: #00572D; }
.sp-theme-mjc  .sp-landing-header { background-color: #172B54; }
.sp-theme-cc   .sp-landing-header { background-color: #90041B; }

/* ── Hold / further-steps notice ─────────────────────────────────────────── */

.sp-hold-notice {
    background-color: rgba(0, 0, 0, 0.025);
    border: 1px solid rgba(0, 0, 0, 0.09);
    border-left: 4px solid rgba(0, 0, 0, 0.18);
    border-radius: 6px;
    padding: 14px 16px;
}

.sp-theme-yccd .sp-hold-notice { border-left-color: #00572D; }
.sp-theme-mjc  .sp-hold-notice { border-left-color: #172B54; }
.sp-theme-cc   .sp-hold-notice { border-left-color: #90041B; }

.sp-hold-notice-icon.mud-icon-root {
    font-size: 1.2rem !important;
    height: 1.2rem !important;
    width: 1.2rem !important;
    flex-shrink: 0;
    color: rgba(0, 0, 0, 0.45);
}

/* ── Placement result items ──────────────────────────────────────────────── */

.sp-placement-result {
    background-color: rgba(0, 0, 0, 0.025);
    border: 1px solid rgba(0, 0, 0, 0.09);
    border-left-width: 4px;
    border-left-color: rgba(0, 0, 0, 0.18);
    border-radius: 6px;
    padding: 14px 16px;
}

.sp-theme-yccd .sp-placement-result { border-left-color: #00572D; }
.sp-theme-mjc  .sp-placement-result { border-left-color: #172B54; }
.sp-theme-cc   .sp-placement-result { border-left-color: #90041B; }

/* ── Landing page assessment link list ──────────────────────────────────── */

.sp-assessment-link-list.mud-list {
    padding: 0;
}

.sp-assessment-link-item.mud-list-item {
    padding: 0;
}

.sp-assessment-link-btn {
    width: 100%;
    justify-content: flex-start !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    padding: 10px 8px !important;
    border-radius: 6px;
}

.sp-assessment-link-btn:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

.sp-assessment-link-btn .mud-button-label {
    gap: 8px;
}

/* ── Landing page CTA ────────────────────────────────────────────────────── */

/* Service check loading state */
.sp-service-check {
    padding: 12px 0 4px;
}

/* CTA block — wraps the primary action button */
.sp-cta-block {
    display: flex;
    align-items: flex-start;
    padding: 4px 0 8px;
}

/* Sign-in prompt block — unauthenticated home page state */
.sp-signin-block {
    display: flex;
    flex-direction: column;
}

.sp-signin-title {
    font-weight: 600;
}

/* Status version text at the bottom of the home card */
.sp-landing-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding: 6px 16px;
    background-color: rgba(0, 0, 0, 0.02);
}

.sp-status-text {
    color: rgba(0, 0, 0, 0.45) !important;
    font-size: 0.7rem !important;
    font-style: italic;
    user-select: none;
}

/* Minimum width so the button never looks too narrow */
.sp-begin-btn {
    min-width: 200px;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

/* Keyboard focus — filled begin/sign-in button (all tenants) */
.sp-begin-btn.mud-button-filled:focus-visible {
    outline: 3px solid #258cfb !important;
    outline-offset: 3px !important;
}

/* Tenant-themed fill colour for the begin/sign-in button */
.sp-theme-yccd .sp-begin-btn.mud-button-filled {
    background-color: #00572D !important;
    color: #ffffff !important;
}
.sp-theme-yccd .sp-begin-btn.mud-button-filled:hover {
    background-color: #004825 !important;
}

.sp-theme-mjc .sp-begin-btn.mud-button-filled {
    background-color: #172B54 !important;
    color: #ffffff !important;
}
.sp-theme-mjc .sp-begin-btn.mud-button-filled:hover {
    background-color: #102040 !important;
}

.sp-theme-cc .sp-begin-btn.mud-button-filled {
    background-color: #90041B !important;
    color: #ffffff !important;
}
.sp-theme-cc .sp-begin-btn.mud-button-filled:hover {
    background-color: #780316 !important;
}

/* Disabled state — overrides tenant !important rules to restore standard visual feedback */
.sp-begin-btn.mud-button-filled:disabled,
.mud-disabled.sp-begin-btn.mud-button-filled {
    background-color: rgba(0, 0, 0, 0.12) !important;
    color: rgba(0, 0, 0, 0.38) !important;
    box-shadow: none !important;
    cursor: default;
}

/* ── Assessment page ─────────────────────────────────────────────────────── */

/* Category intro/purpose block — visually distinct from questions */
.sp-category-intro {
    background-color: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-left: 4px solid rgba(0, 0, 0, 0.18);
    border-radius: 6px;
    padding: 12px 16px;
    color: rgba(0, 0, 0, 0.72);
    font-size: 0.95rem;
}

.sp-theme-yccd .sp-category-intro { border-left-color: #00572D; }
.sp-theme-mjc  .sp-category-intro { border-left-color: #172B54; }
.sp-theme-cc   .sp-category-intro { border-left-color: #90041B; }

.sp-category-intro .sp-richtext > p:last-child { margin-bottom: 0; }

/* Question block — horizontal rule separates each Q+A group */
.sp-question-block {
    padding: 16px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.sp-question-block:first-child { padding-top: 8px; }
.sp-question-block:last-child  { border-bottom: none; padding-bottom: 4px; }

/* Question label — prefix asterisk + question text as a flex row */
.sp-question-label {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 8px;
}

.sp-question-label .sp-richtext {
    flex: 1;
    min-width: 0;
    font-weight: 600;
}

/* Required asterisk — standard red, prefixes the question text */
.sp-required {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.5;
    color: #c0392b;
    flex-shrink: 0;
}

/* Answer group — indent answers under their question */
.sp-answer-group {
    padding-left: 14px;
}

/* ── Answer interaction feedback (hover + keyboard) ─────────────────────────────
   Applies to radio buttons and checkboxes. Each MudRadio/MudCheckBox renders a
   .mud-input-control root. We highlight the entire row on hover (background tint)
   and draw a visible focus outline when the input inside receives keyboard focus.
   Both states meet WCAG 2.1 SC 1.4.11 (Non-text Contrast) and SC 2.4.7 (Focus
   Visible) requirements for Section 508 compliance.                              */

.sp-answer-group .mud-radio,
.sp-answer-group .mud-checkbox {
    border-radius: 6px;
    padding: 4px 8px;
    margin-left: -8px;
    transition: background-color 0.15s ease;
}

.sp-answer-group .mud-radio:hover,
.sp-answer-group .mud-checkbox:hover {
    background-color: rgba(37, 140, 251, 0.08);
}

.sp-answer-group .mud-radio:focus-within,
.sp-answer-group .mud-checkbox:focus-within {
    background-color: rgba(37, 140, 251, 0.08);
    outline: 2px solid #258cfb;
    outline-offset: 1px;
}

/* Dropdown and text inputs — reinforce focus ring to match radio/checkbox style */
.sp-answer-group .mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: #258cfb !important;
    border-width: 2px !important;
}

.sp-answer-group .mud-select:focus-within .mud-input-outlined-border {
    border-color: #258cfb !important;
    border-width: 2px !important;
}

/* Normalize RichText paragraph margins within the question zone */
.sp-signin-zone .sp-richtext > p {
    margin-bottom: 0.35rem;
}

.sp-signin-zone .sp-richtext > p:last-child {
    margin-bottom: 0;
}

/* Normalize font size — prevents database inline styles from causing size mismatch
   between question text and MudBlazor radio/checkbox/select label text */
.sp-signin-zone .sp-richtext {
    font-size: 1rem;
    line-height: 1.5;
}

/* Keyboard focus — any MudBlazor button inside a CTA zone (outlined, text variants) */
.sp-signin-zone .mud-button-root:focus-visible {
    outline: 2px solid #258cfb !important;
    outline-offset: 3px !important;
    border-radius: 4px;
}

/* Keyboard focus — links inside RichText content blocks */
a:focus-visible,
.sp-richtext a:focus-visible {
    outline: 2px solid #258cfb;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Active journey icon pulse — gentle attention signal during the assessment */
@keyframes sp-pulse {
    0%   { opacity: 1; }
    50%  { opacity: 0.55; }
    100% { opacity: 1; }
}

.sp-journey-icon--pulse {
    animation: sp-pulse 2.2s ease-in-out infinite;
}