html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html { font-size: 16px; }
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main { flex: 1; }

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

.card { transition: transform 0.15s ease-in-out; }
.card:hover { transform: translateY(-2px); }

/* asp-validation-summary divs styled as .alert render as a permanently
   visible empty red box when there are no errors (the tag helper only stamps
   validation-summary-valid/-errors classes). Hide the valid state so the red
   alert appears ONLY when a real error message is inside it. */
.validation-summary-valid { display: none; }

.navbar-brand i { font-size: 1.3rem; }

.table th { white-space: nowrap; }

.chart-container {
    position: relative;
    height: 350px;
    width: 100%;
}

.severity-none { color: #198754; }
.severity-mild { color: #ffc107; }
.severity-moderate { color: #fd7e14; }
.severity-severe { color: #dc3545; }

.kpi-card {
    border-left: 4px solid;
    transition: box-shadow 0.2s;
}
.kpi-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.kpi-card.kpi-primary { border-left-color: #0d6efd; }
.kpi-card.kpi-success { border-left-color: #198754; }
.kpi-card.kpi-warning { border-left-color: #ffc107; }
.kpi-card.kpi-danger { border-left-color: #dc3545; }

.progress-survey {
    height: 6px;
    border-radius: 3px;
}

@media print {
    .navbar, footer, .btn, .no-print { display: none !important; }
    .container { max-width: 100%; }

    /* Per-page Print: when body.print-only is set, print ONLY the .print-source
       section. Use visibility (not display:none) so the target's ANCESTORS stay
       in the render tree — display:none on an ancestor would hide a nested target
       too — then pin the target to the top-left. See site.js data-print-target. */
    body.print-only * { visibility: hidden !important; }
    body.print-only .print-source,
    body.print-only .print-source * { visibility: visible !important; }
    body.print-only .print-source { position: absolute; left: 0; top: 0; width: 100%; }
}

/* ── Survey block intro "assistant" bubble (animated description) ──────────
   Shown above a block's questions when the block has a Description. The text
   is typed in by the survey script (Survey/Public/Index.cshtml) the first time
   the block opens, then a blinking caret stops. Colour comes from the block. */
.block-intro {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    animation: blockIntroIn .35s ease both;
}
@keyframes blockIntroIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.block-intro-avatar {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.block-intro-bubble {
    position: relative;
    background: #fff;
    border: 2px solid #0d6efd;
    border-radius: 14px;
    border-top-left-radius: 2px;
    padding: .65rem 2rem .65rem .9rem;
    max-width: 640px;
    line-height: 1.45;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.block-intro-close {
    position: absolute;
    top: 2px; right: 6px;
    border: 0; background: transparent;
    font-size: 1.2rem; line-height: 1;
    color: #adb5bd; cursor: pointer;
}
.block-intro-close:hover { color: #6c757d; }
.block-intro-caret { display: none; }
.block-intro-typing .block-intro-caret {
    display: inline-block;
    border-left: 2px solid currentColor;
    height: 1em;
    vertical-align: text-bottom;
    animation: blockIntroCaret 1s step-end infinite;
}
@keyframes blockIntroCaret { 50% { opacity: 0; } }

/* ============================================================
   Public survey — one-question-per-screen stepper.
   Lives on /Survey/Public/Index — everything is namespaced under
   .survey-app so the styles don't bleed into admin pages.
   Light + dark via CSS custom properties; respects the OS theme
   via prefers-color-scheme.
   ============================================================ */
.survey-app {
    --s-bg:           #ffffff;
    --s-surface:      #ffffff;
    --s-text:         #111827;
    --s-text-muted:   #6b7280;
    --s-border:       rgba(0, 0, 0, 0.08);
    --s-border-strong:rgba(0, 0, 0, 0.16);
    --s-accent:       #534AB7;
    /* Derived tones — driven by --s-accent via color-mix so a per-block
       inline accent (set by JS in show(i) from each step's data-block-color)
       automatically refreshes the tinted background, the darker text-on-tint
       and the semi-transparent focus halo. */
    --s-accent-bg:    color-mix(in srgb, var(--s-accent) 12%, white);
    --s-accent-text:  color-mix(in srgb, var(--s-accent) 75%, black);
    --s-accent-soft:  color-mix(in srgb, var(--s-accent) 40%, transparent);
    --s-danger:       #A32D2D;
    --s-radius-card:  12px;
    --s-radius-elem:  8px;
    max-width: 560px;
    margin: 0 auto;
    padding: 1rem;
    color: var(--s-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
    .survey-app {
        --s-bg:           #0e0e10;
        --s-surface:      #1a1a1d;
        --s-text:         #f3f4f6;
        --s-text-muted:   #9ca3af;
        --s-border:       rgba(255, 255, 255, 0.10);
        --s-border-strong:rgba(255, 255, 255, 0.20);
        --s-accent:       #7F77DD;
        /* Dark-mode tone derivations — flip the mix anchor to keep contrast
           against the dark surface. */
        --s-accent-bg:    color-mix(in srgb, var(--s-accent) 22%, black);
        --s-accent-text:  color-mix(in srgb, var(--s-accent) 80%, white);
        --s-accent-soft:  color-mix(in srgb, var(--s-accent) 45%, transparent);
        --s-danger:       #E0716E;
    }
}

.survey-app .survey-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
    color: var(--s-text);
}
.survey-app .survey-counter {
    font-size: 0.8125rem;
    color: var(--s-text-muted);
    margin-bottom: 0.5rem;
}
.survey-app .survey-progress {
    display: flex;
    gap: 4px;
    margin: 0 0 1.25rem;
}
.survey-app .survey-progress-seg {
    flex: 1;
    height: 4px;
    background: var(--s-border);   /* track */
    border-radius: 2px;
    overflow: hidden;
}
/* The child .survey-progress-seg-fill widens from 0 -> 100 % as the user
   advances through the segment's region (consent / block / email). Done
   regions are pinned at 100 %, future regions stay at 0 %. */
.survey-app .survey-progress-seg-fill {
    display: block;
    height: 100%;
    width: 0;
    background: var(--s-accent);
    border-radius: inherit;
    transition: width 250ms ease;
}

.survey-app .survey-step {
    display: none;
    background: var(--s-surface);
    border: 0.5px solid var(--s-border);
    border-radius: var(--s-radius-card);
    padding: 1.5rem;
}
.survey-app .survey-step--active {
    display: block;
    animation: surveyFadeIn 250ms ease;
}
@keyframes surveyFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

.survey-app .survey-step-meta {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--s-text-muted);
    margin-bottom: 0.5rem;
}
.survey-app .survey-step-question {
    font-size: 1rem;
    font-weight: 500;
    margin: 0 0 1.25rem;
    line-height: 1.45;
    color: var(--s-text);
}
.survey-app .survey-step-question .survey-step-range {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--s-text-muted);
    margin-left: 0.5rem;
}
.survey-app .survey-step-help {
    font-size: 0.8125rem;
    color: var(--s-text-muted);
    margin: -0.75rem 0 1rem;
}

/* Options (radio / checkbox). Tap the whole row to select. */
.survey-app .survey-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.survey-app .survey-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 0.5px solid var(--s-border);
    border-radius: var(--s-radius-elem);
    background: transparent;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}
.survey-app .survey-option:hover {
    border-color: var(--s-border-strong);
    background: var(--s-accent-bg);
}
.survey-app .survey-option:active { transform: scale(0.99); }
/* Keyboard focus ring on the whole option card (not just the 18 px radio).
   :focus-visible only fires for keyboard navigation, not mouse — mouse users
   keep the hover state alone. */
.survey-app .survey-option:has(input:focus-visible) {
    outline: 2px solid var(--s-accent);
    outline-offset: 2px;
}
.survey-app .survey-option input {
    margin: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--s-accent);
}
.survey-app .survey-option-label {
    flex: 1;
    font-size: 0.9375rem;
    color: var(--s-text);
}
.survey-app .survey-option:has(input:checked) {
    background: var(--s-accent-bg);
    border-color: var(--s-accent);
}
.survey-app .survey-option:has(input:checked) .survey-option-label {
    color: var(--s-accent-text);
    font-weight: 500;
}

/* singleandtext / multiandtext: the LAST option's <label> and its companion
   text input are wrapped in .survey-option-with-text. CSS :has() reveals the
   text input only when the contained radio/checkbox is checked. The bundle
   reads as one card by mirroring the option's accent border + tint. */
.survey-app .survey-option-with-text {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.survey-app .survey-input--specify {
    display: none;
    margin-top: 0.5rem;
}
.survey-app .survey-option-with-text:has(input:checked) .survey-input--specify {
    display: block;
}
.survey-app .survey-option-with-text:has(input:checked) .survey-option {
    border-color: var(--s-accent);
    background: var(--s-accent-bg);
}

.survey-app .survey-input,
.survey-app .survey-textarea,
.survey-app .survey-select {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 0.5px solid var(--s-border-strong);
    border-radius: var(--s-radius-elem);
    background: var(--s-bg);
    color: var(--s-text);
    font-size: 0.9375rem;
    font-family: inherit;
}
.survey-app .survey-textarea { min-height: 5.5rem; resize: vertical; }
.survey-app .survey-input:focus,
.survey-app .survey-textarea:focus,
.survey-app .survey-select:focus {
    outline: 2px solid var(--s-accent-soft);
    outline-offset: 1px;
    border-color: var(--s-accent);
}

.survey-app .survey-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
}
.survey-app .survey-nav-spacer { flex: 1; }
.survey-app .survey-btn {
    /* WCAG 2.5.5: ≥ 44 × 44 px touch target. 12px×20 padding + 14px line-height
       + 1px border ≈ 44 px tall; min-height keeps it true when the label
       wraps. */
    min-height: 44px;
    padding: 12px 20px;
    border-radius: var(--s-radius-elem);
    font-size: 14px;
    font-weight: 500;
    border: 0.5px solid transparent;
    background: transparent;
    color: var(--s-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 120ms ease, transform 80ms ease, opacity 120ms ease;
    font-family: inherit;
}
.survey-app .survey-btn:active { transform: scale(0.98); }
.survey-app .survey-btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* Keyboard focus ring on Back / Next so tabbing past the options keeps the
   focal point obvious. */
.survey-app .survey-btn:focus-visible {
    outline: 2px solid var(--s-accent);
    outline-offset: 2px;
}
.survey-app .survey-btn-ghost {
    background: transparent;
    color: var(--s-text-muted);
    border-color: var(--s-border-strong);
}
.survey-app .survey-btn-ghost:hover:not(:disabled) {
    background: var(--s-accent-bg);
    color: var(--s-accent-text);
}
.survey-app .survey-btn-primary {
    background: var(--s-accent);
    color: #ffffff;
    border-color: var(--s-accent);
}
.survey-app .survey-btn-primary:hover:not(:disabled) { filter: brightness(1.05); }

/* The block-intro bubble inside a step uses the existing assistant styles
   in /css/site.css; just make sure it sits under the step meta on the
   one-question page. */
.survey-app .block-intro { margin-bottom: 1rem; }

/* Mobile tweak: shrink padding a touch so the step card edges sit close
   to the viewport edges (the 560px wrapper already centres on desktop). */
@media (max-width: 480px) {
    .survey-app { padding: 0.5rem; }
    .survey-app .survey-step { padding: 1.25rem; }
}

/* Reduced-motion override — honour OS-level "Reduce motion" preference.
   We keep the visual states (active step, fill width) but skip the
   transitions / fade-in so vestibular-sensitive users don't see motion. */
@media (prefers-reduced-motion: reduce) {
    .survey-app .survey-step--active        { animation: none !important; }
    .survey-app .survey-progress-seg-fill,
    .survey-app .survey-option,
    .survey-app .survey-btn,
    .survey-app .survey-input,
    .survey-app .survey-textarea,
    .survey-app .survey-select              { transition: none !important; }
    .survey-app .survey-option:active,
    .survey-app .survey-btn:active          { transform: none !important; }
}

/* Visually-hidden but available to screen readers (WAI-ARIA live region for
   step-change announcements). Standard "sr-only" pattern. */
.survey-app .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Navbar overflow guard — SuperAdmin/Admin have 10+ top-level dropdowns.
   The bar is navbar-expand-xxl (hamburger < 1400px). When it IS expanded,
   let the items wrap onto a second row instead of overflowing the viewport. */
.navbar-expand-lg .navbar-nav {
    flex-wrap: wrap;
}

/* Cache note (00497): CSS/JS are served with Cache-Control: no-cache (see
   Program.cs UseStaticFiles) so a rolling deploy can never leave a browser
   holding an old stylesheet under a new ?v= address. */

/* ── Single-panel menu (00497) ───────────────────────────────────────────────
   One "Menu" button opens ONE panel with every destination, after the
   admission portal's admin mega-panel. The <li> is .position-static and the
   toggle uses data-bs-display="static", so the panel is positioned purely by
   CSS against the navbar (which Bootstrap makes position:relative).
   WIDTH  — left/right 0: the full width of the screen.
   COLUMNS — CSS multi-column with a fixed column WIDTH, so the browser picks
            the column count for the screen and balances group heights.
   HEIGHT — the scroll area is capped to the visible screen, so the bottom of
            the panel is always reachable on a 768px laptop. */
.eud-nav .navbar-nav > .nav-item > .nav-link {
    padding-inline: .85rem;
    border-radius: .375rem;
    transition: background-color .15s ease-in-out;
}
.eud-nav .navbar-nav > .nav-item > .nav-link:hover,
.eud-nav .navbar-nav > .nav-item > .nav-link:focus,
.eud-nav .navbar-nav > .nav-item > .nav-link.show {
    background-color: rgba(255, 255, 255, .16);
}
.eud-menu-toggle { font-weight: 600; }
.eud-brand-logo {
    height: 2rem;
    width: auto;
    border-radius: 4px;
    background: #fff;
    padding: 2px;
}
/* "You are here" beside the Menu button. */
.eud-here {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-left: .35rem;
    padding: .2rem .7rem;
    border-radius: 2rem;
    font-size: .85rem;
    color: #fff;
    background: rgba(255, 255, 255, .14);
}

.eud-panel {
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    margin-top: 0 !important;
    padding: 0;
    border: 0;
    border-top: 3px solid rgba(0, 0, 0, .12);
    border-radius: 0 0 .75rem .75rem;
    background: #fff;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .18);
}
.eud-panel-top {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .8rem 1.5rem .7rem;
    border-bottom: 1px solid #eef0f3;
}
.eud-panel-search { position: relative; flex: 0 1 22rem; }
.eud-panel-search .bi {
    position: absolute;
    top: 50%;
    left: .7rem;
    transform: translateY(-50%);
    color: #6c757d;
    pointer-events: none;
}
.eud-panel-search input { padding-left: 2rem; border-radius: 2rem; }
.eud-panel-hint,
.eud-panel-empty { font-size: .78rem; color: #6c757d; }
.eud-panel-top .btn-close { margin-left: auto; }

.eud-panel-scroll {
    /* utility bar (36px) + navbar (56px) + search row (59px) measured at
       151px; 10rem leaves a few px of air so the panel never runs off the
       bottom of a 768px laptop screen (9.5rem overshot by 2px). */
    max-height: calc(100vh - 10rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: .8rem 1.5rem 1rem;
}
.eud-panel-cols {
    column-width: 13.5rem;
    column-gap: 2rem;
}

/* Section colours: the left rule and banner say which section a group is in,
   even when the multi-column flow splits a section across columns. */
.eud-sec-superadmin { --sec: #997404; }
.eud-sec-surveys    { --sec: #0f766e; }
.eud-sec-reports    { --sec: #0d6efd; }
.eud-sec-wellbeing  { --sec: #6f42c1; }
.eud-sec-support    { --sec: #198754; }
.eud-sec-admin      { --sec: #495057; }
.eud-sec-help       { --sec: #c2410c; }

.eud-panel-group {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin: 0 0 .85rem;
    padding: .1rem 0 .15rem .75rem;
    border-left: 3px solid var(--sec);
}
.eud-panel-group.is-current {
    border-radius: 0 .5rem .5rem 0;
    background: color-mix(in srgb, var(--sec) 7%, white);
}
.eud-panel-sec {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .2rem;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--sec);
}
.eud-panel-head {
    margin: 0 0 .2rem;
    padding: 0 .4rem;
    font-size: .8rem;
    font-weight: 700;
    color: #343a40;
}
.eud-panel .dropdown-item {
    padding: .15rem .4rem;
    border-radius: .3rem;
    font-size: .875rem;
    white-space: normal;   /* long labels wrap inside their column */
}
.eud-panel .dropdown-item:hover,
.eud-panel .dropdown-item:focus {
    color: inherit;
    background: color-mix(in srgb, var(--sec) 10%, white);
}
.eud-item-ai { font-weight: 500; }
.eud-item-ai .bi { color: #6f42c1; }
.eud-tag {
    margin-left: .25rem;
    padding: .05rem .3rem;
    border-radius: .25rem;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    vertical-align: middle;
    color: #997404;
    background: #fff3cd;
}

/* Collapsed (hamburger) state: the panel sits inside the collapse and flows
   inline as a single column, still scrollable if very tall. */
@media (max-width: 991.98px) {
    .eud-panel {
        position: static;
        border-top: 0;
        border-radius: .5rem;
        box-shadow: none;
    }
    .eud-panel-top    { padding: .6rem .75rem; }
    .eud-panel-scroll { max-height: 65vh; padding: .6rem .75rem .9rem; }
    .eud-panel-cols   { column-width: auto; column-count: 1; }
    .eud-here         { display: none; }
}

/* ── Footer branding ─────────────────────────────────────────────────────── */
.footer-platform {
    font-size: .8rem;
    line-height: 1.6;
}
.footer-olt-logo {
    height: 26px;
    width: auto;
    vertical-align: middle;
    margin-right: .4rem;
}
.footer-sep::before {
    content: "·";
    margin: 0 .45rem;
    opacity: .6;
}

/* ── Home page banner to the role flow charts (00496) ─────────────────────── */
.hiw-home-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: .25rem 0 1.5rem;
    padding: 1rem 1.25rem;
    border-radius: .9rem;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(120deg, var(--tenant-primary, #0d6efd) 0%, #6f42c1 100%);
    box-shadow: 0 .4rem 1.2rem rgba(13, 110, 253, .18);
    transition: transform .15s ease, box-shadow .15s ease;
}
.hiw-home-banner:hover,
.hiw-home-banner:focus-visible {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 .6rem 1.5rem rgba(13, 110, 253, .26);
}
.hiw-home-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: .75rem;
    font-size: 1.4rem;
    background: rgba(255, 255, 255, .18);
}
.hiw-home-text strong { display: block; font-size: 1.05rem; }
.hiw-home-text span   { display: block; font-size: .88rem; opacity: .92; }
.hiw-home-go { margin-left: auto; font-size: 1.6rem; opacity: .9; }
@media (prefers-reduced-motion: reduce) {
    .hiw-home-banner { transition: none; }
    .hiw-home-banner:hover { transform: none; }
}

/* ── Contextual help link beside page headings (00498) ────────────────────── */
.eud-page-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .85rem;
}
.eud-help-hint {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-height: 2rem;
    padding: .15rem .65rem;
    border: 1px solid #b6d4fe;
    border-radius: 2rem;
    font-size: .8rem;
    font-weight: 600;
    color: #084298;
    text-decoration: none;
    background: #f5f9ff;
    white-space: nowrap;
}
.eud-help-hint:hover,
.eud-help-hint:focus-visible { color: #052c65; background: #e7f1ff; border-color: #86b7fe; }
.eud-help-hint:focus-visible { outline: 3px solid #0b5ed7; outline-offset: 2px; }