:root {
    --app-navy: #0a2240;
    --app-blue: #0033a0;
    --app-blue-deep: #001847;
    --app-blue-soft: #f4f7fc;
    --app-blue-soft-strong: #edf2fa;
    --app-sky: #3f73d9;
    --app-mint: #0f766e;
    --app-gold: #d4a017;
    --app-red: #b53939;
    --app-bg: #f3f6fa;
    --app-surface: #ffffff;
    --app-surface-strong: #ffffff;
    --app-surface-soft: #f7f9fc;
    --app-surface-soft-strong: #f1f4f8;
    --app-border: rgba(10, 34, 64, 0.08);
    --app-border-strong: rgba(10, 34, 64, 0.14);
    --app-text: #10243f;
    --app-text-muted: #52637a;
    --app-shadow-lg: 0 14px 30px rgba(10, 34, 64, 0.035);
    --app-shadow-md: 0 6px 16px rgba(10, 34, 64, 0.028);
    --app-shadow-sm: 0 1px 4px rgba(10, 34, 64, 0.02);
    --app-radius-xl: 10px;
    --app-radius-lg: 8px;
    --app-radius-md: 6px;
    --app-radius-sm: 4px;
}

html {
    font-size: 16px;
    min-height: 100%;
}

body {
    min-height: 100vh;
    margin: 0;
    font-family: "Source Sans 3", sans-serif;
    color: var(--app-text);
    background: var(--app-bg);
}

h1,
h2,
h3,
h4,
h5,
h6,
.app-brand__title,
.toolbar-panel__title,
.modal-title {
    font-family: "Source Sans 3", sans-serif;
    letter-spacing: -0.01em;
}

a {
    color: var(--app-blue-deep);
    text-decoration: none;
}

a:hover {
    color: var(--app-blue);
}

.app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.35s ease;
}

body.app-ready .app-shell {
    opacity: 1;
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 1020;
}

.app-header__band {
    background: #06214a;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.app-shell--public .app-header__band {
    background: var(--app-blue-deep);
}

.app-shell--public .app-navbar {
    background: #fff;
}

.app-header__eyebrow,
.app-header__status {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 2rem;
    font-size: 0.76rem;
    letter-spacing: 0.02em;
}

.app-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    display: inline-block;
    background: #93b4ff;
    box-shadow: 0 0 0 0.2rem rgba(147, 180, 255, 0.12);
}

.app-navbar {
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid rgba(10, 34, 64, 0.07);
    box-shadow: 0 1px 0 rgba(10, 34, 64, 0.04);
}

.app-navbar__inner {
    display: flex;
    flex-wrap: inherit;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 4.4rem;
}

.app-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--app-text);
    font-weight: 700;
}

.app-brand:hover {
    color: var(--app-text);
}

.app-brand__logo {
    height: 36px;
    width: auto;
    display: block;
}

.app-brand__eyebrow,
.app-brand__title,
.app-brand__subtitle {
    display: block;
    line-height: 1;
}

.app-brand__eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #2a5ca8;
    font-weight: 800;
}

.app-brand__title {
    margin-top: 0.08rem;
    font-size: 1.08rem;
    font-weight: 800;
}

.app-navbar .nav-link {
    color: var(--app-text);
    font-weight: 700;
    padding: 0.45rem 0.65rem;
    border-radius: 0.35rem;
    transition: 0.18s ease;
}

.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus {
    color: var(--app-blue);
    background: rgba(0, 51, 160, 0.045);
}

.app-navbar__actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.app-auth-nav {
    align-items: center;
    gap: 0.45rem;
}

.app-auth-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.35rem;
    padding: 0.48rem 0.8rem !important;
    border: 1px solid rgba(10, 34, 64, 0.08);
    border-radius: 999px !important;
    background: #fff;
    font-size: 0.92rem;
    font-weight: 700;
}

.app-auth-link:hover,
.app-auth-link:focus {
    border-color: rgba(0, 51, 160, 0.18);
    background: #f7f9fc;
}

.app-auth-link--primary {
    border-color: var(--app-blue);
    background: var(--app-blue);
    color: #fff !important;
}

.app-auth-link--primary:hover,
.app-auth-link--primary:focus {
    border-color: var(--app-blue-deep);
    background: var(--app-blue-deep);
}

.app-auth-link--user {
    background: var(--app-surface-soft);
}

.app-dropdown {
    border: 1px solid var(--app-border);
    border-radius: 0.7rem;
    box-shadow: var(--app-shadow-md);
    padding: 0.35rem;
}

.dropdown-item {
    border-radius: 0.45rem;
    padding: 0.62rem 0.78rem;
    font-weight: 600;
}

.dropdown-item:hover {
    background: rgba(28, 109, 208, 0.08);
}

.app-main {
    flex: 1;
    padding: 0.75rem 0 1.5rem;
}

.app-breadcrumb-bar {
    padding: 0.6rem 0 0;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid rgba(18, 48, 74, 0.07);
}

/* WCAG 2.1 AA — breadcrumb links: contrast ≥ 4.5:1 on white */
.app-breadcrumb-bar .breadcrumb-item a {
    color: #0056b3; /* 7.0:1 on white */
    text-decoration: underline;
    text-underline-offset: 2px;
}

.app-breadcrumb-bar .breadcrumb-item a:hover {
    color: #003d80;
}

/* Focus ring: 3:1 contrast, clearly visible */
.app-breadcrumb-bar .breadcrumb-item a:focus-visible {
    outline: 2px solid #0056b3;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Active (current page) text: contrast ≥ 4.5:1 on white (#595959 = 7.0:1) */
.app-breadcrumb-bar .breadcrumb-item.active {
    color: #595959;
}

/* Separator: hidden from screen readers via Bootstrap's aria-hidden ::before */
.app-breadcrumb-bar .breadcrumb-item + .breadcrumb-item::before {
    color: #767676; /* 4.54:1 on white — meets AA */
}

.app-content-shell--wide {
    width: min(100%, 1520px);
    margin: 0 auto;
    padding: 0 1rem;
}

.app-content-shell--auth {
    width: min(100%, 1280px);
    margin: 0 auto;
    padding: 0 1rem;
}

.app-content-shell--admin {
    width: min(100%, 1760px);
    margin: 0 auto;
    padding: 0 1rem;
}

.skip-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 9999;
    padding: 0.5rem 1rem;
    background: #1d4ed8;
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 6px;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.skip-link:focus { color: #fff; }

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

.app-footer {
    padding: 0.95rem 0 1.1rem;
    border-top: 1px solid rgba(10, 34, 64, 0.07);
    background: #fff;
}

@media (max-width: 575.98px) {
    .app-footer__inner {
        flex-direction: column;
        align-items: center !important;
        text-align: center;
    }
}

.auth-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.auth-page-grid {
    align-items: stretch;
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

.auth-page-grid--login {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}

.auth-page-grid--register {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.95fr);
    gap: 1rem;
    align-items: start;
}

.auth-panel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.overview-stat {
    padding: 0.75rem 0.85rem;
    border-radius: 0.7rem;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(10, 34, 64, 0.08);
}

.overview-stat__label {
    display: block;
    color: var(--app-text-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 800;
}

.overview-stat__value {
    display: block;
    margin-top: 0.25rem;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--app-text);
}

.surface-panel,
.card,
.table-shell,
.builder-canvas {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    background: var(--app-surface);
    box-shadow: none;
}

.surface-panel {
    padding: 1rem;
}

.public-feature-card {
    background: rgba(255, 255, 255, 0.98);
}

.public-program-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 0.85rem;
}

.public-program-card {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 1rem;
    border: 1px solid rgba(10, 34, 64, 0.08);
    border-radius: 0.9rem;
    background: linear-gradient(180deg, rgba(248, 251, 255, 0.92) 0%, #fff 100%);
    box-shadow: var(--app-shadow-sm);
}

.public-program-card__header,
.public-program-card__footer,
.public-program-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.public-program-card__eyebrow {
    margin-bottom: 0.35rem;
    color: var(--app-text-muted);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.public-program-card h2,
.public-program-card h3 {
    margin: 0;
    font-size: 1.15rem;
}

.public-program-card__subtle {
    margin-top: 0.15rem;
    color: var(--app-text-muted);
    font-size: 0.82rem;
}

.public-program-card__summary {
    margin: 0;
    color: var(--app-text-muted);
}

.public-program-card__meta > div {
    flex: 1 1 12rem;
    min-width: 0;
}

.detail-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.75rem;
}

.detail-stat-grid--program .overview-stat {
    min-height: 100%;
    background: linear-gradient(180deg, rgba(241, 246, 255, 0.96), rgba(255, 255, 255, 0.98));
    box-shadow: var(--app-shadow-sm);
}

.public-section {
    margin-bottom: 1rem;
}

.public-section--compact {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

.public-section__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
}

.public-section__header h2 {
    margin: 0;
    font-size: 1.15rem;
}

.public-section__header p {
    margin: 0.2rem 0 0;
    color: var(--app-text-muted);
}

.public-section__meta {
    color: var(--app-text-muted);
    font-size: 0.84rem;
    font-weight: 700;
}

.public-status {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.5rem;
    border-radius: 999px;
    font-size: 0.73rem;
    font-weight: 700;
    border: 1px solid transparent;
}

.public-status--open {
    color: #0c5f52;
    background: rgba(15, 118, 110, 0.1);
    border-color: rgba(15, 118, 110, 0.16);
}

.public-status--planned {
    color: var(--app-text-muted);
    background: rgba(10, 34, 64, 0.05);
    border-color: rgba(10, 34, 64, 0.08);
}

.public-cycle-list {
    display: grid;
    gap: 0.65rem;
}

.public-cycle-row {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.95rem 1rem;
    border: 1px solid rgba(10, 34, 64, 0.08);
    border-radius: 0.9rem;
    background: linear-gradient(180deg, rgba(247, 250, 255, 0.96), rgba(255, 255, 255, 0.99));
    box-shadow: var(--app-shadow-sm);
}

.public-cycle-row:first-child {
    border-top: 1px solid rgba(10, 34, 64, 0.08);
    padding-top: 0.95rem;
}

.public-copy-block p:last-child {
    margin-bottom: 0;
}

.public-copy-block--feature {
    padding: 0.95rem 1rem;
    border-radius: 0.75rem;
    background: var(--app-surface-soft);
    border: 1px solid rgba(10, 34, 64, 0.06);
}

.public-copy-block--feature p {
    margin-bottom: 0;
    color: var(--app-text);
    line-height: 1.72;
}

.landing-hero {
    display: block;
    margin-bottom: 1rem;
}

.landing-hero__content {
    padding: 1.45rem 1.5rem;
    border: 1px solid rgba(10, 34, 64, 0.07);
    border-left: 4px solid rgba(0, 51, 160, 0.62);
    border-radius: 0.8rem;
    background: #fff;
    box-shadow: none;
}

.landing-hero__kicker {
    display: inline-block;
    color: var(--app-blue);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 800;
}

.landing-hero h1 {
    margin: 0.45rem 0 0.4rem;
    font-size: clamp(2rem, 2.8vw, 2.8rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.landing-hero p {
    max-width: 42rem;
    margin: 0;
    color: var(--app-text-muted);
    font-size: 0.98rem;
    line-height: 1.55;
}

.landing-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 0.85rem;
}

.landing-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.8rem;
    color: var(--app-text-muted);
    font-size: 0.88rem;
}

.landing-hero__meta span {
    display: inline-flex;
    align-items: center;
    padding: 0.32rem 0.6rem;
    border-radius: 999px;
    background: var(--app-surface-soft);
    border: 1px solid rgba(10, 34, 64, 0.06);
}

.landing-section {
    padding: 1rem 0 0.2rem;
}

.landing-section__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
}

.landing-section__header h2 {
    margin: 0;
    font-size: 1.2rem;
}

.landing-section__header p {
    margin: 0.2rem 0 0;
    color: var(--app-text-muted);
}

.landing-program-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}

.landing-program-card {
    display: grid;
    gap: 0.8rem;
    padding: 1.15rem 1.15rem 1.1rem;
    border: 1px solid rgba(10, 34, 64, 0.07);
    border-radius: 0.85rem;
    border-left: 3px solid rgba(10, 34, 64, 0.12);
    background: #fff;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    box-shadow: none;
}

.landing-program-card:hover {
    border-color: rgba(0, 51, 160, 0.18);
    box-shadow: var(--app-shadow-sm);
}

.landing-program-card--open {
    border-color: rgba(0, 51, 160, 0.18);
    border-left-color: rgba(0, 51, 160, 0.65);
}

.landing-program-card__top,
.landing-program-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.landing-program-card h3 {
    margin: 0;
    font-size: 1.28rem;
    letter-spacing: -0.02em;
}

.landing-program-card__subtle {
    margin-top: 0.15rem;
    color: var(--app-text-muted);
    font-size: 0.82rem;
}

.landing-program-card__summary {
    margin: 0;
    color: var(--app-text-muted);
    line-height: 1.58;
}

.landing-program-card__meta {
    padding: 0.7rem 0.8rem;
    border-radius: 0.6rem;
    background: #f8fafc;
    border: 1px solid rgba(10, 34, 64, 0.06);
}

.public-status {
    display: inline-flex;
    align-items: center;
    min-height: 1.9rem;
    padding: 0.26rem 0.62rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid rgba(10, 34, 64, 0.08);
    background: #f7f9fc;
    color: var(--app-text);
}

.public-status--open {
    border-color: rgba(0, 51, 160, 0.14);
    background: rgba(0, 51, 160, 0.08);
    color: var(--app-blue-deep);
}

.landing-program-card__meta-label {
    color: var(--app-text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 800;
}

.landing-program-card__meta-value {
    margin-top: 0.3rem;
    color: var(--app-text);
    font-weight: 700;
    line-height: 1.45;
}

.detail-cta-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.public-roadmap {
    border-style: solid;
}

.public-checklist {
    display: grid;
    gap: 0.55rem;
    font-weight: 600;
    color: var(--app-text);
}

.public-checklist > div {
    padding-bottom: 0.55rem;
    border-bottom: 1px solid rgba(10, 34, 64, 0.06);
}

.public-checklist > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.surface-panel--soft {
    background: var(--app-surface-soft);
}

.card {
    overflow: hidden;
}

.card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(18, 48, 74, 0.08);
    background: rgba(241, 246, 255, 0.92);
    font-weight: 800;
}

.card-body {
    padding: 1.25rem;
}

.table-shell {
    overflow: visible;
}

.table-shell .table-responsive {
    overflow-x: visible;
    overflow-y: visible;
}

.table {
    margin: 0;
}

.table th {
    border-bottom-width: 1px;
    background: rgba(18, 48, 74, 0.04);
    color: var(--app-text-muted);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 800;
    white-space: nowrap;
}

.table td,
.table th {
    padding: 1rem 1.1rem;
    vertical-align: middle;
}

.table-hover tbody tr:hover {
    background: rgba(28, 109, 208, 0.045);
}

.empty-state {
    padding: 2.4rem 1.5rem;
    text-align: center;
    color: var(--app-text-muted);
}

.empty-state i {
    font-size: 2.4rem;
    display: block;
    margin-bottom: 0.85rem;
    opacity: 0.35;
}

.toolbar-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.85rem;
    padding: 0.75rem 0.9rem;
    margin-bottom: 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--app-border);
    background: #fff;
    box-shadow: none;
}

.toolbar-panel__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
}

.toolbar-panel__hint {
    margin: 0.2rem 0 0;
    color: var(--app-text-muted);
    font-size: 0.95rem;
}

.badge-soft {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.5rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.badge-soft-info {
    color: var(--app-blue-deep);
    background: rgba(0, 51, 160, 0.11);
    border: 1px solid rgba(0, 51, 160, 0.16);
}

.app-status-pill {
    border-radius: 999px;
    padding: 0.42rem 0.7rem;
    color: #fff;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.app-status-pill--started,
.app-status-pill--updated,
.app-status-pill--withdrawn {
    background: #5c6b7a;
}

.app-status-pill--submitted {
    background: var(--app-blue);
}

.app-status-pill--underreview {
    background: var(--app-gold);
    color: #2f2206;
}

.app-status-pill--approved {
    background: var(--app-mint);
}

.app-status-pill--denied {
    background: var(--app-red);
}

.btn {
    border-radius: 0.5rem;
    font-weight: 700;
    padding: 0.52rem 0.82rem;
    border-width: 1px;
    box-shadow: none;
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.btn-sm {
    border-radius: 0.4rem;
    padding: 0.38rem 0.68rem;
}

.btn-primary {
    background: var(--app-blue);
    border-color: var(--app-blue);
    box-shadow: none;
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--app-blue-deep);
    border-color: var(--app-blue-deep);
    box-shadow: none;
}

.btn-success {
    background: #15803d;
    border-color: #15803d;
}

.btn-linkblue {
    background: #0033A0;
    border-color: #0033A0;
    color: #fff;
    font-weight: 600;
}

.btn-linkblue:hover,
.btn-linkblue:focus {
    background: #002d8f;
    border-color: #002d8f;
    color: #fff;
    box-shadow: none;
}

.btn-light {
    background: #fff;
    border-color: rgba(10, 34, 64, 0.1);
    color: var(--app-text);
}

.btn-light:hover,
.btn-light:focus {
    background: #f7f9fc;
    border-color: rgba(10, 34, 64, 0.16);
    color: var(--app-text);
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-danger,
.btn-outline-info,
.btn-outline-warning,
.btn-outline-success {
    background: #fff;
}

.btn-outline-primary {
    background: #fff;
    border-color: rgba(0, 51, 160, 0.22);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: rgba(0, 51, 160, 0.05);
    border-color: rgba(0, 51, 160, 0.32);
    color: var(--app-blue-deep);
}

.btn-link.landing-hero__link {
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--app-blue);
    font-weight: 700;
    text-decoration: none;
}

.btn-link.landing-hero__link:hover,
.btn-link.landing-hero__link:focus {
    color: var(--app-blue-deep);
    text-decoration: underline;
}

.form-control,
.form-select,
.form-control-sm,
.form-select-sm {
    border-radius: 0.55rem;
    border-color: rgba(18, 48, 74, 0.14);
    padding: 0.68rem 0.9rem;
    font-size: 0.95rem;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: inset 0 1px 1px rgba(10, 34, 64, 0.015);
}

/* Bootstrap's default placeholder color (rgba(33,37,41,.75)) reads almost as dark as
   real entered text — easy to mistake example text for a saved answer. Push it lighter
   and italicize so a placeholder is unmistakable at a glance, everywhere in the app. */
.form-control::placeholder,
textarea::placeholder {
    color: #97a3b6;
    opacity: 1;
    font-style: italic;
}

.form-select,
.form-select-sm {
    display: block;
    margin-top: 0;
    padding-right: 2.75rem;
    background-color: rgba(255, 255, 255, 0.98);
    background-image: var(--bs-form-select-bg-img, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2310243f' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"));
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    background-size: 16px 12px;
}

.form-control-sm,
.form-select-sm {
    padding: 0.55rem 0.75rem;
}

.form-select-sm {
    padding-right: 2.35rem;
    background-position: right 0.7rem center;
    background-size: 14px 10px;
}

/* SlimSelect invalid state — targets the visible widget when the hidden select is marked invalid */
.ss-main:has(+ select.is-invalid) {
    border-color: var(--bs-form-invalid-border-color, #dc3545);
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

/* SlimSelect — scoped to applicant form questions and reference modal */
.form-preview-question,
.app-modal {
    --ss-primary-color: #1d4ed8;
    --ss-bg-color: rgba(255, 255, 255, 0.98);
    --ss-border-color: rgba(18, 48, 74, 0.14);
    --ss-border-radius: 0.55rem;
    --ss-font-color: #111827;
    --ss-font-placeholder-color: #6b7280;
    --ss-spacing-l: 7px;
    --ss-spacing-m: 5px;
    --ss-spacing-s: 3px;
}

.form-preview-question .ss-main,
.app-modal .ss-main {
    font-size: 0.95rem;
    padding: 0.68rem 2.5rem 0.68rem 0.9rem;
    background-image: none;
    box-shadow: inset 0 1px 1px rgba(10, 34, 64, 0.015);
    min-height: unset;
}

.form-preview-question .ss-content,
.app-modal .ss-content {
    font-size: 0.95rem;
}

.form-preview-question .ss-search input,
.app-modal .ss-search input {
    font-size: 0.9rem;
}

.form-check-input {
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.15rem;
    padding: 0;
    border-color: rgba(18, 48, 74, 0.18);
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.72rem;
    box-shadow: none;
}

.form-check-input[type="checkbox"] {
    border-radius: 0.3rem;
}

.form-check-input[type="radio"] {
    border-radius: 999px;
}

.form-check-input:checked {
    border-color: var(--app-blue);
    background-color: var(--app-blue);
}

.form-check-input[type="checkbox"]:checked {
    background-image: var(--bs-form-check-bg-image);
}

.form-check-input[type="radio"]:checked {
    background-image: var(--bs-form-check-radio-bg-image);
}

.form-switch .form-check-input {
    width: 2.45rem;
    height: 1.35rem;
    margin-top: 0.05rem;
    border-radius: 999px;
    border-color: rgba(18, 48, 74, 0.18);
    background-color: #dbe5f2;
    background-image: var(--bs-form-switch-bg, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255,255,255,1%29'/%3e%3c/svg%3e"));
    background-position: left center;
    background-size: contain;
}

.form-switch .form-check-input:checked {
    border-color: var(--app-blue);
    background-color: var(--app-blue);
    background-image: var(--bs-form-switch-bg, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255,255,255,1%29'/%3e%3c/svg%3e"));
    background-position: right center;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.ss-main:focus,
.btn:focus {
    border-color: rgba(28, 109, 208, 0.55);
    box-shadow: 0 0 0 0.2rem rgba(28, 109, 208, 0.15);
}

.modal-content,
.app-modal {
    border: 1px solid var(--app-border);
    border-radius: 0.8rem;
    box-shadow: var(--app-shadow-lg);
}

.modal {
    padding-top: 1rem;
}

.modal-dialog {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
}

.modal-dialog-centered {
    min-height: calc(100% - 2.5rem);
}

.modal.show .modal-dialog {
    transform: none;
}

.builder-question-modal {
    max-width: min(1600px, calc(100vw - 2.5rem));
}

.modal-header {
    padding: 1.2rem 1.35rem;
    border-bottom: 1px solid rgba(18, 48, 74, 0.08);
}

.modal-footer {
    border-top: 1px solid rgba(18, 48, 74, 0.08);
}

.confirm-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(197, 139, 42, 0.12);
    font-size: 1.2rem;
}

.text-truncate-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.template-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.3rem;
    border-radius: 1rem;
    border: 1px solid rgba(10, 34, 64, 0.08);
    background: linear-gradient(180deg, rgba(247, 250, 255, 0.96), rgba(255, 255, 255, 0.99));
    box-shadow: var(--app-shadow-md);
}

.template-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}
.template-card__body {
    display: grid;
    gap: 0.9rem;
}

.template-card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.35rem;
}

.cycle-window-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.85rem;
}

.pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.pill-list .badge {
    border-radius: 999px;
    padding: 0.4rem 0.65rem;
    font-weight: 700;
}

.builder-sidebar {
    position: sticky;
    top: 7.5rem;
    max-height: calc(100vh - 8.5rem);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    padding: 0.95rem 0.5rem 0.95rem 0.95rem;
    /* Scroll shadow: the "cover" gradients scroll with the content and mask the "shadow"
       gradients (fixed to the scrollport) whenever that edge is already fully in view — so a
       fade only ever shows on the edge that actually has more sections hidden past it. */
    background-color: var(--app-surface);
    background-repeat: no-repeat;
    background-image:
        linear-gradient(var(--app-surface) 40%, rgba(255, 255, 255, 0)),
        linear-gradient(rgba(255, 255, 255, 0), var(--app-surface) 60%),
        linear-gradient(to bottom, rgba(10, 34, 64, 0.16), rgba(10, 34, 64, 0)),
        linear-gradient(to top, rgba(10, 34, 64, 0.16), rgba(10, 34, 64, 0));
    background-position: top, bottom, top, bottom;
    background-size: 100% 36px, 100% 36px, 100% 12px, 100% 12px;
    background-attachment: local, local, scroll, scroll;
}

.builder-sidebar:hover {
    scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
}

.builder-sidebar::-webkit-scrollbar {
    width: 5px;
}

.builder-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.builder-sidebar::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 3px;
}

.builder-sidebar:hover::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.18);
}

.builder-layout-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.85rem;
}

.builder-layout--sidebar-collapsed .builder-layout__sidebar {
    display: none;
}

.builder-layout--sidebar-collapsed .builder-layout__canvas {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

.builder-sidebar__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.builder-starter-panel {
    margin-bottom: 1rem;
    padding: 0.9rem;
    border-radius: 1rem;
    border: 1px solid rgba(10, 34, 64, 0.08);
    background: linear-gradient(180deg, rgba(241, 246, 255, 0.98), rgba(250, 252, 255, 0.98));
}

.builder-starter-panel__label {
    margin-bottom: 0.65rem;
    color: var(--app-text-muted);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.builder-starter-panel__hint {
    margin-top: 0.55rem;
    color: var(--app-text-muted);
    font-size: 0.86rem;
    line-height: 1.4;
}

.builder-starter-chips,
.repeating-group-starters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}


.section-list {
    display: grid;
    gap: 0.4rem;
}

.section-list-item {
    cursor: pointer;
    padding: 0.75rem;
    border-radius: 1rem;
    border: 1px solid rgba(10, 34, 64, 0.08);
    border-left: 3px solid rgba(10, 34, 64, 0.15);
    background: linear-gradient(180deg, rgba(248, 251, 255, 0.95), rgba(255, 255, 255, 0.98));
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    box-shadow: var(--app-shadow-sm);
}

.section-list-item:hover {
    transform: translateY(-1px);
    border-color: rgba(0, 51, 160, 0.22);
    box-shadow: 0 10px 22px rgba(10, 34, 64, 0.07);
}

.section-list-item.active {
    border-color: rgba(0, 51, 160, 0.4);
    background: linear-gradient(180deg, rgba(236, 243, 255, 0.98), rgba(248, 251, 255, 0.98));
}

.section-list-item__active-flag {
    display: none;
    padding: 0.18rem 0.45rem;
    border-radius: 999px;
    background: rgba(0, 51, 160, 0.1);
    color: var(--app-blue-deep);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.section-list-item.active .section-list-item__active-flag {
    display: inline-flex;
}

.section-list-item--dragging {
    opacity: 0.65;
}

.section-list-item__left {
    flex: 1 1 0;
    min-width: 0;
}

.section-list-item__text {
    flex: 1 1 0;
    min-width: 0;
    overflow-wrap: break-word;
}

.section-list-item__drag {
    color: var(--app-text-muted);
    cursor: grab;
    padding-top: 0.15rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.section-list-item:hover .section-list-item__drag,
.section-list-item--dragging .section-list-item__drag {
    opacity: 1;
}

.section-list-item__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: rgba(0, 51, 160, 0.08);
    color: var(--app-blue-deep);
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.section-list-item.active .section-list-item__num {
    background: #0033a0;
    color: #fff;
}

.section-list-item.drag-over {
    border-style: dashed;
    border-color: rgba(0, 51, 160, 0.42);
    background: rgba(241, 246, 255, 0.9);
}

.section-list-item__summary {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin-top: 0.45rem;
}

.section-list-item__count {
    font-size: 0.72rem;
    color: var(--app-text-muted);
}

.section-list-item__state {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.48rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.section-state--empty {
    color: #8a5c1a;
    background: rgba(212, 160, 23, 0.14);
}

.section-state--progress {
    color: #0f4f96;
    background: rgba(0, 51, 160, 0.1);
}

.section-state--ready {
    color: #0c5f52;
    background: rgba(15, 118, 110, 0.1);
}

.section-list-item__progress {
    margin-top: 0.7rem;
    height: 0.35rem;
    border-radius: 999px;
    background: rgba(10, 34, 64, 0.08);
    overflow: hidden;
}

.section-list-item__progress-bar {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(0, 51, 160, 0.55), rgba(63, 115, 217, 0.92));
}

.builder-canvas {
    padding: 1.25rem;
}

.builder-section-shell {
    gap: 0.75rem;
}

.builder-section-toolbar {
    position: sticky;
    top: 6.5rem;
    z-index: 18;
    margin-bottom: 0;
}

.builder-quick-add-bar {
    position: sticky;
    top: 11.4rem;
    z-index: 17;
    padding: 0.9rem 1rem;
}

.builder-quick-add-bar__summary {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    cursor: pointer;
    list-style: none;
}

.builder-quick-add-bar__summary::-webkit-details-marker {
    display: none;
}

.builder-quick-add-bar__toggle::after {
    content: "Show shortcuts";
}

.builder-quick-add-bar[open] .builder-quick-add-bar__toggle::after {
    content: "Hide shortcuts";
}

details.builder-quick-add-bar:not([open]) .builder-quick-add-bar__summary > div > .text-muted {
    display: none;
}

.builder-quick-add-bar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.builder-canvas__placeholder {
    padding: 3.5rem 1.5rem;
    border-radius: 1.25rem;
    border: 1px dashed rgba(10, 34, 64, 0.16);
    text-align: center;
    color: var(--app-text-muted);
    background: rgba(244, 248, 255, 0.86);
}

.question-card {
    padding: 0.85rem;
    border: 1px solid rgba(10, 34, 64, 0.08);
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(249, 251, 255, 0.96), rgba(255, 255, 255, 0.99));
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.builder-question-list {
    gap: 1rem;
}

.question-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(10, 34, 64, 0.07);
}

.question-card__sequence {
    margin-bottom: 0.55rem;
    color: var(--app-blue);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.question-card.drag-over {
    border-style: dashed;
    border-color: rgba(0, 51, 160, 0.55);
    background: rgba(241, 246, 255, 0.82);
}

.question-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.6rem;
}

.question-type-badge {
    border-radius: 999px;
    padding: 0.4rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.question-card__actions {
    display: flex;
    align-items: flex-start;
    align-self: flex-start;
}

.question-card__menu {
    min-width: 2.35rem;
    padding-inline: 0.55rem;
}


.builder-section-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.9rem;
    position: sticky;
    bottom: 0.9rem;
    z-index: 10;
    padding: 0.95rem 1rem;
    background: linear-gradient(180deg, rgba(241, 246, 255, 0.95), rgba(255, 255, 255, 0.98));
}

.drag-handle {
    color: var(--app-text-muted);
    cursor: grab;
}

.drag-handle:active {
    cursor: grabbing;
}

.question-subgroup {
    margin-top: 1rem;
    padding: 0.95rem 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(10, 34, 64, 0.08);
    background: rgba(244, 248, 255, 0.98);
}

.question-subgroup__summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    list-style: none;
}

.question-subgroup__summary::-webkit-details-marker {
    display: none;
}

.question-subgroup__toggle::after {
    content: "Expand";
}

.question-subgroup[open] .question-subgroup__toggle::after {
    content: "Collapse";
}

.question-subgroup__body {
    margin-top: 0.85rem;
}

.question-subquestion-card {
    border-radius: 0.9rem;
}

.question-form-grid {
    display: grid;
    gap: 1rem;
}

.question-form-nav {
    position: sticky;
    top: 0;
    z-index: 8;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(10, 34, 64, 0.08);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    box-shadow: var(--app-shadow-sm);
}

.question-form-nav__link {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    background: rgba(232, 239, 255, 0.58);
    color: var(--app-blue-deep);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.question-form-nav__link:hover,
.question-form-nav__link:focus {
    background: rgba(220, 231, 255, 0.9);
    color: var(--app-blue-deep);
}

.question-form-layout {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.9fr);
}

.question-form-step {
    padding-top: 0.2rem;
}

.question-form-step__eyebrow {
    color: var(--app-blue);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.question-form-step__title {
    margin: 0.2rem 0 0.15rem;
    font-size: 1.02rem;
    font-weight: 800;
}

.question-form-step__text {
    color: var(--app-text-muted);
    font-size: 0.92rem;
}

.quick-question-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.quick-question-card {
    display: grid;
    gap: 0.35rem;
    align-content: start;
    justify-items: start;
    padding: 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(10, 34, 64, 0.08);
    background: linear-gradient(180deg, rgba(247, 250, 255, 0.96), rgba(255, 255, 255, 0.98));
    color: var(--app-text);
    text-align: left;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    box-shadow: var(--app-shadow-sm);
}

.quick-question-card:hover,
.quick-question-card:focus {
    border-color: rgba(0, 51, 160, 0.24);
    box-shadow: 0 10px 24px rgba(10, 34, 64, 0.06);
    transform: translateY(-1px);
    color: var(--app-text);
}

.quick-question-card i {
    font-size: 1rem;
}

.question-form-panel {
    padding: 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(18, 48, 74, 0.08);
    background: rgba(244, 248, 255, 0.96);
}

.question-form-panel__title {
    margin-bottom: 0.75rem;
    font-size: 0.94rem;
    font-weight: 800;
    color: var(--app-text);
}

.question-form-summary-panel {
    display: grid;
    gap: 1rem;
    align-content: start;
    position: sticky;
    top: 0.5rem;
}

.question-summary-stack {
    display: grid;
    gap: 0.9rem;
}

.question-summary-label {
    color: var(--app-text-muted);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.question-summary-value {
    font-size: 1.1rem;
    font-weight: 800;
}

.question-summary-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.question-summary-note {
    color: var(--app-text-muted);
    font-size: 0.92rem;
}

.question-side-checklist {
    font-size: 0.92rem;
}

.condition-row .form-text {
    padding-top: 1.8rem;
}

.question-card__meta-chip--has-popover {
    cursor: pointer;
}

.options-list-details > summary {
    list-style: none;
    cursor: pointer;
    padding: 0.4rem 0.6rem;
    border: 1px dashed var(--app-border);
    border-radius: 0.4rem;
    user-select: none;
}

.options-list-details > summary::-webkit-details-marker {
    display: none;
}

.options-list-summary__collapse {
    display: none;
}

.options-list-details[open] .options-list-summary__hint {
    display: none;
}

.options-list-details[open] .options-list-summary__collapse {
    display: inline;
}

.options-list-chevron {
    transition: transform 0.15s ease;
}

.options-list-details[open] .options-list-chevron {
    transform: rotate(90deg);
}

.options-list-scroll {
    max-height: 420px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--app-border);
    border-radius: 0.5rem;
    padding: 0.5rem;
}

.question-card__options-details summary {
    list-style: none;
    cursor: pointer;
}

.question-card__options-details summary::-webkit-details-marker {
    display: none;
}

.question-card__options-more {
    color: var(--app-blue);
    margin-left: 0.2rem;
}

.question-card__options-less {
    display: none;
    color: var(--app-blue);
    margin-left: 0.2rem;
}

.question-card__options-details[open] .question-card__options-more {
    display: none;
}

.question-card__options-details[open] .question-card__options-less {
    display: inline;
}

.question-card__options-expanded {
    margin-top: 0.1rem;
    padding-left: 0;
}

.builder-add-section-btn .btn {
    background: #fff;
    border: 1px dashed #cbd5e1;
    color: #64748b;
    font-weight: 500;
}

.builder-add-section-btn .btn:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #334155;
}

.builder-add-section-btn .dropdown-toggle-split {
    border-left-color: #e2e8f0;
}

.option-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}

.option-row--dragging {
    opacity: 0.5;
}

.option-row.drag-over {
    border-style: dashed;
    border-color: rgba(0, 51, 160, 0.55);
    background: rgba(241, 246, 255, 0.82);
    border-radius: 0.375rem;
}

.dashboard-panel {
    padding: 1.1rem 1.15rem;
    border-radius: var(--app-radius-lg);
    border: 1px solid var(--app-border);
    background: #fff;
    box-shadow: none;
}

.admin-guidance-card {
    padding: 1.2rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(10, 34, 64, 0.08);
    background: #fff;
    box-shadow: none;
}

.admin-guidance-card__eyebrow {
    margin-bottom: 0.45rem;
    color: var(--app-blue);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.program-cycle-card {
    padding: 1.05rem 1.1rem;
    border-radius: 0.8rem;
    border: 1px solid rgba(10, 34, 64, 0.08);
    border-left: 3px solid rgba(10, 34, 64, 0.12);
    background: #fff;
    box-shadow: none;
}

.program-cycle-card--focused {
    border-color: rgba(0, 51, 160, 0.3);
    border-left-color: rgba(0, 51, 160, 0.62);
    background: rgba(244, 247, 252, 0.96);
    box-shadow: none;
}

.cycle-worklist {
    border: 1px solid #e5e8ed;
    border-radius: 0.9rem;
    background: #fff;
    overflow: visible;
}

.cycle-worklist__table thead th {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid #e5e8ed;
    background: #f8fafc;
    color: #6b7280;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.cycle-worklist__table thead th:first-child { border-top-left-radius: calc(0.9rem - 1px); }
.cycle-worklist__table thead th:last-child  { border-top-right-radius: calc(0.9rem - 1px); }
.cycle-worklist__table tbody tr:last-child td { border-bottom: none; }
.cycle-worklist__table tbody tr:last-child td:first-child { border-bottom-left-radius: calc(0.9rem - 1px); }
.cycle-worklist__table tbody tr:last-child td:last-child  { border-bottom-right-radius: calc(0.9rem - 1px); }

.cycle-worklist__table tbody td {
    padding: 0.9rem 1rem;
    border-color: #eef2f7;
    vertical-align: top;
}

.cycle-worklist__table tbody tr:hover {
    background: #fafcff;
}

.cycle-worklist__title,
.cycle-worklist__program,
.cycle-worklist__form-name,
.cycle-worklist__window-date,
.cycle-worklist__application-count {
    color: #111827;
    font-weight: 600;
}

.cycle-worklist__application-count {
    font-size: 0.95rem;
}

.cycle-worklist__description {
    margin-top: 0.25rem;
    max-width: 32rem;
    color: #6b7280;
    font-size: 0.84rem;
    line-height: 1.45;
}

.cycle-worklist__subtext {
    color: #6b7280;
    font-size: 0.82rem;
    line-height: 1.4;
}

.cycle-table-listing {
    overflow: visible;
}

.cycle-table-listing .table-responsive {
    overflow-x: visible;
    overflow-y: visible;
}

@media (max-width: 991.98px) {
    .cycle-worklist__table thead {
        display: none;
    }

    .cycle-worklist__table,
    .cycle-worklist__table tbody,
    .cycle-worklist__table tr,
    .cycle-worklist__table td {
        display: block;
        width: 100%;
    }

    .cycle-worklist__table tbody tr {
        padding: 0.25rem 0;
        border-bottom: 1px solid #eef2f7;
    }

    .cycle-worklist__table tbody tr:last-child {
        border-bottom: 0;
    }

    .cycle-worklist__table tbody td {
        padding: 0.5rem 1rem;
        border: 0;
    }

    .cycle-worklist__table tbody td.text-end {
        text-align: left !important;
    }
}

@media (max-width: 767.98px) {
    .cycle-table-listing .table-responsive {
        overflow-x: auto;
        overflow-y: visible;
    }
}

@media (max-width: 1199.98px) {
    .question-form-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .question-form-summary-panel {
        position: static;
    }

    .builder-section-toolbar,
    .builder-quick-add-bar,
    .builder-section-footer {
        position: static;
    }
}

.application-list {
    display: grid;
    gap: 0.8rem;
}

.application-list__item {
    padding: 0.95rem 1rem;
    border-radius: 0.8rem;
    border: 1px solid rgba(10, 34, 64, 0.08);
    background: #fff;
    box-shadow: none;
}

.form-preview-shell {
    display: grid;
    gap: 1.25rem;
}

.form-preview-layout {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(260px, 300px) minmax(0, 1.2fr);
}

.form-preview-nav {
    position: sticky;
    top: 7.5rem;
    padding: 0.9rem;
    align-self: start;
    max-height: calc(100vh - 9rem);
    overflow-y: auto;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    /* Visible (if subtle) at rest rather than hover-only — the scroll-shadow gradients below
       can't cue "more below" when the last item is clipped mid-card (its own opaque
       background covers the exact edge pixels the shadow would need to show through), so a
       persistently visible scrollbar is the reliable fallback affordance. */
    scrollbar-color: rgba(100, 116, 139, 0.28) transparent;
    border: 1px solid rgba(34, 83, 132, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
    /* Same scroll-shadow technique as .builder-sidebar: the "cover" gradients scroll with the
       content and mask the "shadow" gradients whenever that edge is already fully in view, so
       a fade only shows on the edge that actually has more sections hidden past it. The cover
       color approximates this panel's own near-white background so the fade is invisible. */
    background-repeat: no-repeat;
    background-image:
        linear-gradient(rgba(246, 249, 253, 0.98) 40%, rgba(246, 249, 253, 0)),
        linear-gradient(rgba(246, 249, 253, 0), rgba(246, 249, 253, 0.98) 60%),
        linear-gradient(to bottom, rgba(10, 34, 64, 0.16), rgba(10, 34, 64, 0)),
        linear-gradient(to top, rgba(10, 34, 64, 0.16), rgba(10, 34, 64, 0)),
        radial-gradient(circle at top left, rgba(189, 218, 247, 0.34), transparent 42%),
        linear-gradient(180deg, rgba(247, 250, 254, 0.98) 0%, rgba(241, 246, 252, 0.98) 100%);
    background-position: top, bottom, top, bottom, top left, top left;
    background-size: 100% 36px, 100% 36px, 100% 12px, 100% 12px, auto, auto;
    background-attachment: local, local, scroll, scroll, scroll, scroll;
}
.form-preview-nav:hover { scrollbar-color: rgba(100, 116, 139, 0.45) transparent; }
.form-preview-nav::-webkit-scrollbar { width: 5px; }
.form-preview-nav::-webkit-scrollbar-track { background: transparent; }
.form-preview-nav::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.28); border-radius: 999px; }
.form-preview-nav:hover::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.45); }

.form-preview-nav__list {
    display: grid;
    gap: 0.6rem;
}

/* An explicit, always-legible "there's more below" cue — deliberately not relying on the
   scroll-shadow gradient trick above (which can't show through opaque item-card backgrounds
   when the last item is clipped mid-card) or on native scrollbar styling (inconsistent —
   and effectively invisible at rest — across browsers/OS). Shown/hidden by JS
   (FormWorkspace.js initNavScrollHint) based on actual scroll position. */
.form-preview-nav__scroll-hint {
    position: sticky;
    bottom: -0.9rem;
    margin: 0.5rem -0.9rem -0.9rem;
    padding: 0.5rem 0.9rem 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--app-text-muted);
    /* Solid, not faded — this sits directly over whatever item got clipped by max-height, so
       a translucent gradient here just looks like it's overlapping that item's leftover text. */
    background: #f6f9fd;
    box-shadow: 0 -10px 12px -6px #f6f9fd;
    pointer-events: none;
}

.form-preview-nav__overall-progress {
    margin-bottom: 0.85rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(18, 48, 74, 0.08);
}

.form-preview-nav__overall-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.78rem;
    color: var(--app-text-muted);
    font-weight: 600;
}

.form-preview-nav__overall-progress .student-form-progress {
    margin-top: 0.35rem;
}


.form-preview-nav__item {
    padding: 0.75rem 0.9rem;
    border-radius: 0.7rem;
    border: 1px solid rgba(18, 48, 74, 0.08);
    background: #fff;
    display: grid;
    gap: 0.35rem;
}

.form-preview-nav__item.active {
    border-color: rgba(28, 109, 208, 0.34);
    background: rgba(244, 248, 255, 0.95);
    box-shadow: none;
}

.form-preview-nav__item--error {
    border-color: rgba(185, 57, 57, 0.26);
    background: #fff7f7;
}

.form-preview-nav__item--error.active {
    border-color: rgba(185, 57, 57, 0.36);
    background: #fff3f3;
}

.form-preview-nav__item-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.form-preview-nav__item-number {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 51, 160, 0.07);
    color: var(--app-blue-deep);
    font-size: 0.78rem;
    font-weight: 800;
    flex: 0 0 auto;
}

.form-preview-nav__item--error .form-preview-nav__item-number {
    background: rgba(185, 57, 57, 0.12);
    color: #991b1b;
}

/* Screen-reader-only: conveys section progress state (Not started / In progress /
   Complete) that sighted users get from color + the checkmark icon below. Uses the
   same clip technique as Bootstrap's .visually-hidden instead of display:none so
   the text stays in the accessibility tree. */
.form-preview-nav__item-status {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.form-preview-nav__item:not(.form-preview-nav__item--error):has([data-state="complete"]) {
    background: rgba(21, 128, 61, 0.06);
    border-color: rgba(21, 128, 61, 0.22);
}

.form-preview-nav__item:not(.form-preview-nav__item--error):has([data-state="complete"]) .form-preview-nav__item-top::after {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.72rem;
    color: #15803d;
    margin-left: auto;
    flex-shrink: 0;
}

.form-preview-nav__item-alert {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: rgba(185, 57, 57, 0.12);
    color: #991b1b;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}


.form-preview-section {
    padding: 1.35rem 1.45rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(18, 48, 74, 0.08);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: none;
    scroll-margin-top: 6.9rem;
    overflow: hidden;
}

.form-preview-section [data-section-anchor] {
    scroll-margin-top: 6.9rem;
}

.form-preview-section__header {
    margin: -1.35rem -1.45rem 1.5rem;
    padding: 1.1rem 1.45rem 1rem;
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.85) 0%, rgba(246, 250, 255, 0.7) 100%);
    border-bottom: 1px solid rgba(18, 48, 74, 0.07);
}

.form-preview-question {
    padding: 1.15rem 0 1.25rem;
    border-top: 1px solid rgba(18, 48, 74, 0.08);
}

.form-preview-question:first-child {
    border-top: 0;
    padding-top: 0;
}

.form-preview-question__label {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.45rem;
}

.form-preview-question__title {
    flex: 1 1 0;
    min-width: 0;
    font-weight: 800;
    font-size: 1.02rem;
    line-height: 1.4;
}

.form-preview-question__badges {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.form-preview-question__flag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.form-preview-question__flag::before {
    content: "";
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    flex: 0 0 auto;
}

.form-preview-question__flag--required {
    background: none;
    color: #b54b62;
    font-size: 0.55rem;
    padding: 0;
    vertical-align: super;
}

.form-preview-question__flag--required::before {
    display: none;
}

.form-preview-question__flag--conditional {
    background: #f8f2e2;
    color: #7b5b18;
}

.form-preview-question__flag--conditional::before {
    background: #b28a28;
}

.form-preview-field {
    display: grid;
    gap: 0.8rem;
}

.form-preview-field__hint {
    color: var(--app-text-muted);
    font-size: 0.92rem;
    line-height: 1.55;
    max-width: 52rem;
}

.student-choice-list {
    display: grid;
    gap: 0.7rem;
}

.student-choice-list--inline {
    grid-template-columns: repeat(auto-fit, minmax(150px, max-content));
    align-items: start;
}

.student-choice {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(18, 48, 74, 0.08);
    background: rgba(248, 251, 255, 0.92);
    box-shadow: var(--app-shadow-sm);
}

.student-choice--compact {
    padding: 0.75rem 0.9rem;
}

.student-choice--single {
    max-width: 42rem;
}

.student-choice .form-check-input {
    flex: 0 0 auto;
}

.student-form-section-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(18, 48, 74, 0.08);
}

.student-form-actionbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    margin: 1.25rem 0 0;
    padding: 1rem 0 0;
    border-top: 1px solid rgba(18, 48, 74, 0.08);
}

.student-form-actionbar__meta {
    min-width: 0;
}

.student-form-actionbar__label {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1d4ed8;
    margin-bottom: 0.2rem;
}

.student-form-actionbar__text {
    color: var(--app-text-muted);
    font-size: 0.92rem;
}

.student-form-actionbar__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.65rem;
}

.student-form-section-footer__text {
    color: var(--app-text-muted);
    font-size: 0.9rem;
}

.student-form-progress {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-top: 0.6rem;
}

.student-form-progress__bar {
    flex: 1;
    height: 5px;
    background: rgba(18, 48, 74, 0.1);
    border-radius: 999px;
    overflow: hidden;
}

.student-form-progress__fill {
    height: 100%;
    background: #1d4ed8;
    border-radius: 999px;
    transition: width 0.35s ease;
}

.student-form-progress__label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--app-text-muted);
    white-space: nowrap;
}

.char-counter {
    text-align: right;
    font-size: 0.78rem;
    color: var(--app-text-muted);
    margin-top: 0.3rem;
}

.char-counter--warning {
    color: #d97706;
    font-weight: 600;
}

.char-counter--over {
    color: #dc2626;
    font-weight: 700;
}

.student-form-intro {
    margin-bottom: 1.1rem;
    padding: 1.1rem 1.3rem;
    border-color: rgba(13, 35, 64, 0.09);
}

.student-form-intro__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.student-form-intro h1 {
    margin: 0;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.student-form-intro__summary {
    margin: 0.35rem 0 0;
    color: var(--app-text-muted);
    font-size: 0.88rem;
}

.student-form-intro__dot {
    margin: 0 0.3rem;
    opacity: 0.5;
}

.student-form-intro__deadline--warn {
    color: #9a5a00;
    font-weight: 600;
}

.student-form-mobile-summary {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    margin-bottom: 1rem;
    padding: 0.9rem 1rem;
}

.student-form-mobile-summary__meta {
    min-width: 0;
}

.student-form-mobile-summary__label {
    color: var(--app-text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.student-form-mobile-summary__title {
    margin-top: 0.15rem;
    font-weight: 800;
    line-height: 1.3;
}

.student-form-mobile-summary__text {
    margin-top: 0.18rem;
    color: var(--app-text-muted);
    font-size: 0.84rem;
}

.student-form-mobile-summary__sep {
    margin: 0 0.25rem;
}

.student-form-mobile-summary__button {
    flex-shrink: 0;
}

.student-form-submit-summary {
    margin: 1rem 0 1.25rem;
    border: 1px solid rgba(185, 57, 57, 0.18);
    background: #fff7f7;
    color: #7f1d1d;
}

.student-form-shell {
    gap: 1.1rem;
}

.student-form-shell--editable {
    padding-bottom: 0;
}

.student-form-content {
    gap: 1.1rem;
}

.student-form-question-grid {
    display: grid;
    gap: 0;
}

.student-form-sections-drawer .offcanvas-header {
    border-bottom: 1px solid rgba(18, 48, 74, 0.08);
    padding: 1rem 1rem 0.9rem;
}

.student-form-sections-drawer .offcanvas-body {
    padding: 0.95rem 1rem 1.1rem;
}

.student-form-mobile-actions {
    display: none;
}

.student-form-question-grid > .student-form-question-row {
    border-top: 1px solid rgba(18, 48, 74, 0.08);
    padding-top: 1.15rem;
    padding-bottom: 1.25rem;
}

.student-form-question-grid > .student-form-question-row:first-child {
    border-top: 0;
    padding-top: 0;
}

.student-form-question-row > .form-preview-question {
    display: flex;
    flex-direction: column;
    border-top: 0;
    padding-top: 0;
    padding-bottom: 0;
}


.student-form-question-row > .form-preview-question .question-validation-error {
    min-height: 1.3125rem;
}

.student-form-question-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    align-items: stretch;
}

.student-form-question-row--single {
    grid-template-columns: minmax(0, 1fr);
}

.student-form-question-row--single > .form-preview-question {
    max-width: calc(50% - 1rem);
}

/* Bottom-align the field only when a hint makes one column taller than the other.
   Omitting this when no hint is present avoids a macOS Chrome rendering gap on <select>. */
.student-form-question-row:has(.form-preview-field__hint) > .form-preview-question .form-preview-field-wrap {
    margin-top: auto;
}

.file-upload-field {
    display: grid;
    gap: 0.95rem;
}

.file-upload-field__empty,
.file-upload-field__current {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.05rem 1.1rem;
    border-radius: 1rem;
    border: 1px solid rgba(18, 48, 74, 0.08);
    box-shadow: var(--app-shadow-sm);
}

.file-upload-field__empty {
    background: rgba(243, 244, 246, 0.85);
}

.file-upload-field__current {
    background: linear-gradient(180deg, rgba(247, 250, 255, 0.96), rgba(255, 255, 255, 0.99));
}

.file-upload-field__empty > i:first-child {
    color: var(--app-blue);
    font-size: 1.2rem;
}

.file-upload-field__preview {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 0.9rem;
    border: 1px solid rgba(18, 48, 74, 0.08);
    background: #fff;
}

.file-upload-field__thumb-link {
    display: inline-flex;
    flex: 0 0 auto;
    text-decoration: none;
}

.file-upload-field__thumb {
    max-width: 120px;
    max-height: 120px;
    width: auto;
    height: auto;
    border-radius: 0.9rem;
    border: 1px solid rgba(18, 48, 74, 0.1);
    background: #fff;
    box-shadow: var(--app-shadow-sm);
}

.file-upload-field__details {
    display: grid;
    gap: 0.2rem;
    flex: 1 1 auto;
    min-width: 0;
}

.file-upload-field__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
    justify-content: flex-end;
}

.reference-question {
    display: grid;
    gap: 0.95rem;
}

.reference-question__intro {
    padding: 1.05rem 1.1rem;
}

.reference-question__requirements {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
}

.reference-question__requirement {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgba(18, 48, 74, 0.05);
    color: #5a687b;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.reference-question__requirement strong {
    color: #21324a;
    font-weight: 700;
    margin: 0 0.12rem;
}

.reference-list {
    display: grid;
    gap: 0.9rem;
}

.reference-list__items {
    display: grid;
    gap: 0.9rem;
}

.reference-list__empty {
    padding: 1.05rem 1.1rem;
    border: 1px dashed rgba(18, 48, 74, 0.14);
    border-radius: 0.95rem;
    background: rgba(247, 250, 253, 0.92);
}

.reference-card {
    display: grid;
    border-radius: 1rem;
    border: 1px solid rgba(18, 48, 74, 0.08);
    background: linear-gradient(180deg, rgba(248, 251, 255, 0.96), rgba(255, 255, 255, 0.99));
    box-shadow: var(--app-shadow-sm);
    overflow: hidden;
}

.reference-card__status {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.9rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.reference-card__status--pending    { background: #f3f4f6; color: #6b7280; }
.reference-card__status--sent       { background: #dbeafe; color: #1e40af; }
.reference-card__status--resent     { background: #fef3c7; color: #92400e; }
.reference-card__status--completed  { background: #dcfce7; color: #166534; }

.reference-card__body {
    display: grid;
    gap: 0.75rem;
    padding: 0.85rem 1.1rem 1rem;
}

.reference-card__main {
    display: grid;
    gap: 0.3rem;
}

.reference-card__name {
    font-weight: 600;
    color: #111827;
    font-size: 0.95rem;
}

.reference-card__contact {
    font-size: 0.82rem;
    color: var(--app-text-muted);
}

.reference-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    padding-top: 0.55rem;
    border-top: 1px solid rgba(18, 48, 74, 0.07);
    font-size: 0.8rem;
    color: var(--app-text-muted);
}

.reference-card__meta-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.reference-card__meta-item i {
    font-size: 0.72rem;
    opacity: 0.65;
    flex-shrink: 0;
}

.reference-card__response {
    padding: 0.85rem 0.95rem;
    border-radius: 0.75rem;
    background: rgba(247, 250, 253, 0.95);
    border: 1px solid rgba(18, 48, 74, 0.08);
    white-space: pre-wrap;
    font-size: 0.88rem;
}

.reference-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    padding-top: 0.1rem;
}

.reference-status-panel {
    margin-bottom: 1.25rem;
}

.reference-status-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.75rem;
}

.reference-group-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--app-text-muted);
    padding-bottom: 0.5rem;
    margin-top: 0.85rem;
}

.reference-group-label:first-child { margin-top: 0; }

.reference-status-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.85rem 0.9rem;
    border: 1px solid rgba(18, 48, 74, 0.09);
    border-radius: 0.7rem;
    background: var(--app-surface-soft);
}

.reference-status-item__info {
    min-width: 0;
    width: 100%;
}

.reference-status-item__name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reference-status-item__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
}

.photo-cropper-shell {
    display: grid;
    gap: 1rem;
    padding: 0.35rem;
}

.photo-cropper-stage {
    position: relative;
    min-height: 420px;
    border-radius: 1rem;
    overflow: visible;
    background: rgba(16, 26, 38, 0.92);
}

.photo-cropper-stage img {
    display: block;
    max-width: 100%;
}

.photo-cropper-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.repeating-group-shell {
    display: grid;
    gap: 0.95rem;
}

.repeating-group-list {
    display: grid;
    gap: 0.9rem;
}

.repeating-entry-card {
    padding: 1.05rem 1.1rem;
    border-radius: 1rem;
    border: 1px solid rgba(18, 48, 74, 0.08);
    background: linear-gradient(180deg, rgba(248, 251, 255, 0.96), rgba(255, 255, 255, 0.99));
    box-shadow: var(--app-shadow-sm);
}

.repeating-entry-card [data-repeating-entry-summary] {
    max-width: 42rem;
    line-height: 1.4;
}

.repeating-group-empty {
    padding: 1.15rem 1.05rem;
    border-radius: 0.9rem;
    background: rgba(18, 48, 74, 0.04);
    border: 1px dashed rgba(18, 48, 74, 0.18);
    text-align: center;
    color: var(--app-text-muted);
    font-size: 0.92rem;
}

.just-validate-error-label {
    margin-top: 0.3rem;
    color: var(--app-red);
    font-size: 0.82rem;
}

@media (max-width: 1199.98px) {
    .landing-hero {
        grid-template-columns: 1fr;
    }

    .form-preview-layout {
        grid-template-columns: 1fr;
    }

    .form-preview-nav,
    .builder-sidebar {
        position: static;
    }

    .student-choice-list--inline {
        grid-template-columns: 1fr;
    }

    .student-form-question-row {
        grid-template-columns: 1fr;
    }

    .student-form-question-row--single > .form-preview-question {
        max-width: none;
    }

    .file-upload-field__empty,
    .file-upload-field__current {
        flex-direction: column;
        align-items: flex-start;
    }

    .reference-card__meta,
    .reference-card__actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.45rem;
    }

    .public-cycle-row {
        grid-template-columns: 1fr;
        align-items: flex-start;
    }

    .auth-page-grid--login,
    .auth-page-grid--register {
        grid-template-columns: 1fr;
    }

    .student-form-mobile-summary {
        display: flex;
    }
}

@media (max-width: 767.98px) {
    .app-main {
        padding-top: 1.2rem;
    }

    .app-content-shell--wide {
        padding: 0 0.75rem;
    }

    .landing-hero__content {
        padding: 1.1rem 1.1rem;
    }

    .landing-program-grid {
        grid-template-columns: 1fr;
    }

    .auth-inline-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .option-row {
        flex-wrap: wrap;
    }

    .template-card__header,
    .template-card__footer,
    .toolbar-panel {
        flex-direction: column;
        align-items: stretch;
    }

    .question-card__actions {
        flex-direction: row;
    }

    .form-preview-section {
        padding: 1.15rem;
    }

    .form-preview-question__label,
    .student-form-section-footer,
    .student-form-actionbar {
        flex-direction: column;
        align-items: stretch;
    }

    .student-form-mobile-summary {
        align-items: stretch;
        flex-direction: column;
    }

    .student-form-mobile-summary__button {
        width: 100%;
    }

}

@media (max-width: 991.98px) {
    .student-form-actionbar {
        display: none;
    }

    .student-form-mobile-actions {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        display: grid;
        grid-template-columns: 1fr 1fr 1.15fr;
        gap: 0.55rem;
        padding: 0.8rem 0.9rem calc(0.8rem + env(safe-area-inset-bottom));
        border-top: 1px solid rgba(18, 48, 74, 0.1);
        background: rgba(255, 255, 255, 0.97);
        box-shadow: 0 -10px 24px rgba(15, 23, 42, 0.08);
        backdrop-filter: blur(12px);
    }

    .student-form-mobile-actions .btn {
        min-height: 2.9rem;
        padding-left: 0.8rem;
        padding-right: 0.8rem;
        justify-content: center;
    }

    .student-form-shell--editable {
        padding-bottom: 5.8rem;
    }
}

@media (max-width: 575.98px) {
    .student-form-mobile-actions {
        grid-template-columns: 1fr 1fr;
    }

    .student-form-mobile-actions .btn:last-child {
        grid-column: 1 / -1;
    }
}

/* Portal reset */
body {
    background: #eef3f7;
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 1020;
    backdrop-filter: blur(10px);
}

.app-header__band {
    background: #0d2340;
    border-bottom: 0;
}

.app-navbar {
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid rgba(13, 35, 64, 0.08);
    box-shadow: 0 8px 28px rgba(13, 35, 64, 0.06);
}

.app-navbar__inner {
    min-height: 4.75rem;
}

.app-brand__eyebrow {
    font-size: 0.69rem;
    letter-spacing: 0.1em;
    color: #5c7bac;
}

.app-brand__title {
    font-size: 1.22rem;
    letter-spacing: -0.02em;
}

.app-navbar .nav-link {
    padding: 0.55rem 0.85rem;
    border-radius: 999px;
    font-size: 0.94rem;
    font-weight: 700;
    color: #29405d;
}

.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus {
    background: rgba(0, 51, 160, 0.06);
    color: #123368;
}

.app-navbar .nav-link.active {
    background: rgba(0, 51, 160, 0.09);
    color: #0e3167;
}

.app-navbar__collapse {
    align-items: center;
}

.app-navbar__primary {
    align-items: center;
    gap: 0.3rem;
}

.app-shell--student .app-navbar__collapse,
.app-shell--public .app-navbar__collapse {
    margin-left: 2rem;
}

.app-shell--student .app-navbar__primary .nav-link,
.app-shell--public .app-navbar__primary .nav-link {
    padding: 0.62rem 0.95rem;
    font-size: 1rem;
    font-weight: 800;
    color: #17375f;
}

.app-shell--student .app-navbar__primary .nav-link:hover,
.app-shell--student .app-navbar__primary .nav-link:focus,
.app-shell--public .app-navbar__primary .nav-link:hover,
.app-shell--public .app-navbar__primary .nav-link:focus {
    background: rgba(0, 51, 160, 0.07);
    color: #0e3167;
}

.app-shell--student .app-navbar__primary .nav-link.active,
.app-shell--public .app-navbar__primary .nav-link.active {
    background: rgba(0, 51, 160, 0.1);
    color: #0b2d61;
}

.app-navbar__actions {
    gap: 0.7rem;
}

.app-auth-nav {
    gap: 0.55rem;
}

.app-auth-link {
    min-height: 2.5rem;
    padding: 0.52rem 0.9rem !important;
    border: 1px solid rgba(13, 35, 64, 0.1);
    background: #fff;
    color: #18365d !important;
}

.app-auth-link:hover,
.app-auth-link:focus {
    background: #f4f7fb;
    border-color: rgba(0, 51, 160, 0.15);
}

.app-auth-link--primary {
    background: #0d5bd1;
    border-color: #0d5bd1;
    color: #fff !important;
}

.app-auth-link--primary:hover,
.app-auth-link--primary:focus {
    background: #0b49a6;
    border-color: #0b49a6;
}

.app-auth-link--user {
    background: #f4f7fb;
    border-color: rgba(13, 35, 64, 0.08);
}

.app-dropdown {
    border-radius: 0.95rem;
    border-color: rgba(13, 35, 64, 0.08);
    padding: 0.45rem;
}

.dropdown-item {
    border-radius: 0.75rem;
    padding: 0.7rem 0.85rem;
}

.app-main {
    padding: 1.5rem 0 2rem;
}

.app-footer {
    border-top: 1px solid rgba(13, 35, 64, 0.08);
    background: transparent;
    color: #4d627e;
}

.portal-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(260px, 0.9fr);
    gap: 1.25rem;
    margin-bottom: 1.6rem;
}

.portal-hero--compact {
    grid-template-columns: minmax(0, 1fr);
}

.portal-hero__main,
.portal-hero__aside,
.portal-callout,
.detail-panel {
    border: 1px solid rgba(13, 35, 64, 0.08);
    border-radius: 1.2rem;
    background: #fff;
    box-shadow: 0 10px 32px rgba(13, 35, 64, 0.06);
}

.portal-hero__main {
    padding: 2rem 2.15rem;
}

.portal-hero__aside {
    padding: 1.2rem;
    display: grid;
    gap: 0.85rem;
    align-content: start;
}

.portal-kicker {
    display: inline-block;
    margin-bottom: 0.6rem;
    color: #5473a5;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}


.portal-hero h1 {
    margin: 0;
    font-size: clamp(2.4rem, 4vw, 3.5rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: #0d2340;
}

.portal-hero p {
    max-width: 48rem;
    margin: 0.9rem 0 0;
    color: #52657e;
    font-size: 1.02rem;
    line-height: 1.65;
}

.portal-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.portal-summary {
    padding: 0.95rem 1rem;
    border-radius: 1rem;
    background: #f6f9fc;
    border: 1px solid rgba(13, 35, 64, 0.06);
}

.portal-summary__label {
    display: block;
    color: #60748f;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.portal-summary__icon,
.opportunity-card__meta-icon,
.detail-label__icon {
    margin-right: 0.38rem;
    color: #6b7f98;
}

.portal-summary__value {
    display: block;
    margin-top: 0.4rem;
    color: #2e7bcf;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}

.portal-summary__text {
    display: block;
    margin-top: 0.45rem;
    color: #40556f;
    line-height: 1.55;
}

.portal-summary--note {
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.portal-section {
    margin-bottom: 1.5rem;
}

.portal-section__header {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 1rem;
    margin-bottom: 1rem;
}

.portal-section__header h2,
.detail-panel__header h2 {
    margin: 0;
    font-size: 1.4rem;
    letter-spacing: -0.02em;
    color: #0d2340;
}

.portal-section__header p,
.detail-panel__header p {
    margin: 0.25rem 0 0;
    color: #60748f;
}

.portal-stack {
    display: grid;
    gap: 1rem;
}

.portal-stack--compact {
    gap: 0.85rem;
}

.opportunity-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.25rem;
    padding: 1.25rem 1.35rem;
    border: 1px solid rgba(13, 35, 64, 0.08);
    border-left: 5px solid #2e7bcf;
    border-radius: 1.1rem;
    background: #fff;
    box-shadow: 0 8px 28px rgba(13, 35, 64, 0.05);
}

.opportunity-card--open {
    border-left-color: #0d5bd1;
}

.opportunity-card--compact {
    padding: 1rem 1.1rem;
}

.opportunity-card__body {
    display: grid;
    gap: 0.9rem;
    min-width: 0;
}

.opportunity-card__heading {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 1rem;
}

.opportunity-card__title {
    display: grid;
    gap: 0.45rem;
}

.opportunity-card h3 {
    margin: 0;
    font-size: 1.3rem;
    letter-spacing: -0.02em;
    color: #102742;
}

.opportunity-card h3 a {
    color: inherit;
}

.opportunity-card__eyebrow {
    margin-top: 0.22rem;
    color: #6a7d95;
    font-size: 0.82rem;
    font-weight: 700;
}

.opportunity-card__summary {
    margin: 0;
    color: #4d627b;
    line-height: 1.65;
}

.opportunity-card__meta {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.opportunity-card__meta-item {
    padding: 0.85rem 0.9rem;
    border-radius: 0.95rem;
    background: #f6f9fc;
    border: 1px solid rgba(13, 35, 64, 0.05);
}

.opportunity-card__meta-label {
    display: inline-flex;
    align-items: center;
    color: #60748f;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.opportunity-card__meta-value {
    display: block;
    margin-top: 0.35rem;
    color: #102742;
    font-weight: 700;
    line-height: 1.45;
}

.opportunity-card__actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.7rem;
    min-width: 190px;
}

.opportunity-card--compact {
    display: flex;
    flex-direction: column;
}

.opportunity-card--compact .opportunity-card__body {
    flex: 1;
}

.opportunity-card__heading--application {
    align-items: flex-start;
}

.opportunity-card--compact .opportunity-card__actions {
    justify-content: flex-end;
    align-items: stretch;
    margin-top: auto;
    min-width: 0;
}

.status-chip {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.34rem 0.68rem;
    border-radius: 999px;
    border: 1px solid rgba(13, 35, 64, 0.08);
    background: #f4f7fb;
    color: #4b607a;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.status-chip::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 0.42rem;
}

.opportunity-card__title .status-chip {
    justify-self: start;
}

.status-chip--open {
    border-color: rgba(13, 91, 209, 0.15);
    background: rgba(13, 91, 209, 0.08);
    color: #0b4aa8;
}

.status-chip--open::before {
    content: "\f058";
}

.status-chip--planned {
    background: #f4f7fb;
}

.status-chip--planned::before {
    content: "\f017";
}

.portal-callout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    margin-bottom: 1.25rem;
}

.portal-callout h2 {
    margin: 0;
    font-size: 1.2rem;
}

.portal-callout p {
    margin: 0.25rem 0 0;
    color: #60748f;
}

.portal-layout,
.portal-detail {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.95fr);
    gap: 1.25rem;
}

.portal-layout__main,
.portal-detail__main {
    min-width: 0;
    display: grid;
    gap: 1.1rem;
}

.portal-layout__side,
.portal-detail__side {
    min-width: 0;
}

.portal-layout--apply .portal-layout__side--apply {
    padding-top: 0;
}

.detail-panel {
    padding: 1.25rem 1.3rem;
}

.detail-panel--side {
    position: sticky;
    top: 6rem;
}


.detail-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.detail-metric {
    padding: 0.95rem 1rem;
    border-radius: 1rem;
    background: #f6f9fc;
    border: 1px solid rgba(13, 35, 64, 0.05);
}

.detail-metric__label {
    display: inline-flex;
    align-items: center;
    color: #60748f;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.detail-metric__value {
    display: block;
    margin-top: 0.35rem;
    color: #102742;
    font-weight: 800;
    line-height: 1.35;
}

.detail-copy p {
    margin: 0;
    color: #4d627b;
    line-height: 1.7;
}

.detail-list {
    display: grid;
    gap: 0.8rem;
}

.detail-list__item {
    padding-bottom: 0.8rem;
    border-bottom: 1px solid rgba(13, 35, 64, 0.08);
}

.detail-list__item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.detail-list__label {
    display: inline-flex;
    align-items: center;
    color: #60748f;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.detail-list__value {
    display: block;
    margin-top: 0.3rem;
    color: #102742;
    font-weight: 700;
}

.detail-side-section {
    margin-top: 1.15rem;
}

.detail-side-actions {
    display: grid;
    gap: 0.7rem;
    margin-top: 1.2rem;
}

.btn {
    border-radius: 0.85rem;
    padding: 0.72rem 1rem;
    font-weight: 700;
    box-shadow: none;
}

.btn-primary {
    background: #0d5bd1;
    border-color: #0d5bd1;
}

.btn-primary:hover,
.btn-primary:focus {
    background: #0b49a6;
    border-color: #0b49a6;
}

.btn-light {
    background: #f6f9fc;
    border-color: rgba(13, 35, 64, 0.08);
    color: #18365d;
}

.btn-light:hover,
.btn-light:focus {
    background: #edf2f7;
    border-color: rgba(13, 35, 64, 0.12);
    color: #18365d;
}

.empty-state {
    padding: 2.25rem 1.5rem;
    border: 1px dashed rgba(13, 35, 64, 0.14);
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, 0.7);
}

.empty-state--compact {
    padding: 1.4rem 1rem;
}

@media (max-width: 1199.98px) {
    .builder-layout-toolbar {
        justify-content: stretch;
    }

    .builder-layout-toolbar .btn {
        width: 100%;
    }

    .builder-layout--sidebar-collapsed .builder-layout__sidebar {
        display: block;
    }

    .builder-layout--sidebar-collapsed .builder-layout__canvas {
        width: auto;
        flex: 0 0 auto;
        max-width: none;
    }

    .portal-hero,
    .portal-layout,
    .portal-detail {
        grid-template-columns: 1fr;
    }

    .portal-layout--apply .portal-layout__side--apply {
        padding-top: 0;
    }

    .detail-panel--side {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .app-navbar__inner {
        min-height: auto;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .portal-hero__main,
    .portal-hero__aside,
    .portal-callout,
    .detail-panel,
    .opportunity-card {
        padding: 1.05rem;
    }

    .portal-hero h1 {
        font-size: 2rem;
    }

    .portal-callout,
    .opportunity-card,
    .opportunity-card__heading {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: stretch;
    }

    .opportunity-card {
        gap: 1rem;
    }

    .opportunity-card__actions {
        min-width: 0;
    }

    .opportunity-card__meta {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1199.98px) {
    .app-shell--student .app-navbar__collapse,
    .app-shell--public .app-navbar__collapse {
        margin-left: 0;
    }

    .app-navbar__primary {
        align-items: stretch;
        gap: 0.15rem;
    }
}

/* ================================================================
   DESIGN V2 — Clean · Minimal · No gradients
   ================================================================ */

/* ═══ Global ═══ */
body { background: #f5f7fa !important; }
.app-main { padding: 1.5rem 0 3rem !important; }

/* ═══ Header band (admin only) ═══ */
.app-header__band { background: #111827 !important; border-bottom: 0 !important; }

/* ═══ Navbar ═══ */
.app-navbar {
    background: #fff !important;
    border-bottom: 1px solid #e5e8ed !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
.app-navbar__inner { min-height: 3.75rem !important; }
.app-brand__eyebrow { font-size: 0.78rem !important; letter-spacing: 0.08em !important; color: #29405d !important; font-weight: 800 !important; }
.app-brand__title { font-size: 1.12rem !important; letter-spacing: -0.01em !important; }
.app-navbar .nav-link {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: #374151 !important;
    border-radius: 6px !important;
    padding: 0.42rem 0.72rem !important;
}
.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus { background: #f3f4f6 !important; color: #111827 !important; }
.app-navbar .nav-link.active { background: #eff6ff !important; color: #1d4ed8 !important; }

/* Auth buttons */
.app-auth-link {
    background: #fff !important;
    border: 1px solid #d1d5db !important;
    color: #374151 !important;
    border-radius: 6px !important;
    min-height: 2.25rem !important;
    padding: 0.42rem 0.85rem !important;
}
.app-auth-link:hover, .app-auth-link:focus { background: #f9fafb !important; border-color: #9ca3af !important; }
.app-auth-link--primary { background: #1d4ed8 !important; border-color: #1d4ed8 !important; color: #fff !important; }
.app-auth-link--primary:hover, .app-auth-link--primary:focus { background: #1e40af !important; border-color: #1e40af !important; }
.app-auth-link--user { background: #f9fafb !important; border-color: #e5e7eb !important; }

/* Dropdown */
.app-dropdown { border-radius: 8px !important; border-color: #e5e7eb !important; padding: 0.35rem !important; box-shadow: 0 4px 16px rgba(0,0,0,0.09) !important; }
.dropdown-item { border-radius: 6px !important; padding: 0.6rem 0.75rem !important; font-size: 0.9rem !important; }

/* ═══ Buttons ═══ */
.btn { border-radius: 6px !important; font-weight: 600 !important; box-shadow: none !important; }
.btn-primary { background: #1d4ed8 !important; border-color: #1d4ed8 !important; }
.btn-primary:hover, .btn-primary:focus { background: #1e40af !important; border-color: #1e40af !important; }
.btn-light {
    background: #fff !important;
    border: 1px solid #d1d5db !important;
    color: #374151 !important;
}
.btn-light:hover, .btn-light:focus { background: #f9fafb !important; border-color: #9ca3af !important; color: #111827 !important; }
.btn-success { background: #15803d !important; border-color: #15803d !important; }
.btn-success:hover { background: #166534 !important; border-color: #166534 !important; }

/* ═══ Footer ═══ */
.app-footer { background: #fff !important; border-top: 1px solid #e5e8ed !important; color: #6b7280 !important; }

/* ═══ Admin page header ═══ */
.admin-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 0 1.1rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid #e5e8ed;
    flex-wrap: wrap;
}
.admin-page-header__eyebrow {
    display: inline-flex;
    align-items: center;
    color: #6b7280;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}
.admin-page-header h1 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #111827;
    line-height: 1.2;
}
.admin-page-header__meta {
    margin: 0.2rem 0 0;
    font-size: 0.83rem;
    color: #9ca3af;
    font-weight: 400;
}
.admin-page-header__actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-shrink: 0;
}

.header-stat-grid {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    max-width: 52rem;
}

/* Filter notice (ProgramCycles filtered state) */
.admin-filter-notice {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.75rem;
    margin-bottom: 1rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #1e40af;
}
.admin-filter-notice a { color: #1d4ed8; text-decoration: underline; }

.overview-stat {
    background: #f9fafb !important;
    border: 1px solid #e5e8ed !important;
    border-radius: 6px !important;
    padding: 0.6rem 0.75rem !important;
}
.overview-stat__label { color: #9ca3af !important; font-size: 0.72rem !important; }
.overview-stat__value { color: #111827 !important; font-size: 1rem !important; margin-top: 0.15rem !important; }

/* ═══ Surface panels ═══ */
.surface-panel, .card, .table-shell, .builder-canvas {
    border: 1px solid #e5e8ed !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: none !important;
}
.surface-panel--soft { background: #f9fafb !important; }

/* ═══ Toolbar panel ═══ */
.toolbar-panel {
    background: #f9fafb !important;
    border: 1px solid #e5e8ed !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}
.toolbar-panel__title { color: #374151 !important; }
.toolbar-panel__hint { color: #6b7280 !important; }

/* ═══ Badge soft ═══ */
.badge-soft { border-radius: 4px !important; }
.badge-soft-info { background: #eff6ff !important; color: #1d4ed8 !important; border: 1px solid #bfdbfe !important; }

/* ═══ Public portal — hero section ═══ */
.portal-hero--compact { grid-template-columns: 1fr !important; }
.portal-hero__main,
.portal-hero__aside,
.portal-callout,
.detail-panel {
    border: 1px solid #e5e8ed !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: none !important;
}
.portal-hero__main {
    padding: 1.75rem 2rem !important;
    background: linear-gradient(160deg, #eef4fd 0%, #f8faff 55%, #fff 100%) !important;
    border-color: #dce8f5 !important;
    border-top: 3px solid #2e7bcf !important;
}
.portal-hero__aside { padding: 1.25rem !important; }
.portal-kicker { color: #4a6fa5 !important; font-size: 0.72rem !important; }
.portal-hero h1 {
    font-size: clamp(1.9rem, 3.5vw, 2.8rem) !important;
    color: #0d2340 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.1 !important;
}
.portal-hero p { color: #3a5068 !important; font-size: 0.97rem !important; line-height: 1.6 !important; }
.portal-hero p a {
    color: #0f4c92 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
}

/* Portal summary items (aside stats) */
.portal-summary {
    background: #f9fafb !important;
    border: 1px solid #f3f4f6 !important;
    border-radius: 6px !important;
    padding: 0.85rem !important;
}
.portal-summary--note { background: #f9fafb !important; }
.portal-summary__label { color: #9ca3af !important; font-size: 0.72rem !important; }
.portal-summary__value { color: #2e7bcf !important; font-size: 1.65rem !important; margin-top: 0.25rem !important; }
.portal-summary__text { color: #6b7280 !important; font-size: 0.875rem !important; }

/* Portal section headers */
.portal-section__header h2,
.detail-panel__header h2 { font-size: 1.1rem !important; font-weight: 550 !important; color: #111827 !important; }
.portal-section__header p,
.detail-panel__header p { color: #9ca3af !important; font-size: 0.85rem !important; }

/* Portal callout (complete profile prompt) */
.portal-callout {
    padding: 1rem 1.2rem !important;
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
}
.portal-callout h2 { font-size: 1rem !important; color: #1e40af !important; }
.portal-callout p { color: #3b82f6 !important; font-size: 0.875rem !important; }

/* ═══ Opportunity cards ═══ */
.opportunity-card {
    border: 1px solid #e5e8ed !important;
    border-left: 1px solid #e5e8ed !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: none !important;
    padding: 1.1rem 1.2rem !important;
    transition: box-shadow 0.15s ease, border-color 0.15s ease !important;
}
.opportunity-card--open { border-color: #bfdbfe !important; }
.opportunity-card:hover {
    box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
    border-color: #93c5fd !important;
}
.opportunity-card--compact { padding: 0.85rem 1rem !important; }
/* ── Application cards (My Applications sidebar) ──────────────────────── */
.application-card {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    transition: box-shadow 0.15s ease;
}
.application-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.application-card__status {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.85rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.application-card__status--started,
.application-card__status--updated {
    background: #fef3c7;
    color: #92400e;
}
.application-card__status--submitted {
    background: #dbeafe;
    color: #1e40af;
}
.application-card__status--underreview {
    background: #fef9c3;
    color: #854d0e;
}
.application-card__status--approved {
    background: #dcfce7;
    color: #166534;
}
.application-card__status--denied {
    background: #fee2e2;
    color: #991b1b;
}
.application-card__status--withdrawn {
    background: #f3f4f6;
    color: #6b7280;
}
.application-card__deadline {
    margin-left: auto;
    font-weight: 500;
}
.application-card__body {
    padding: 0.6rem 0.85rem 0.65rem;
}
.application-card__name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.35;
    margin-bottom: 0.35rem;
}
.application-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.application-card__meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: #9ca3af;
    flex-wrap: wrap;
    min-width: 0;
}
.application-card__meta-sep { color: #d1d5db; }
.application-card__action {
    flex-shrink: 0;
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
    line-height: 1.2;
    border-radius: 0.5rem;
}
.opportunity-card h3 { font-size: 1.1rem !important; color: #111827 !important; font-weight: 550 !important; }
.opportunity-card h3 a { color: #111827 !important; }
.opportunity-card h3 a:hover { color: #1d4ed8 !important; }
.opportunity-card__eyebrow { color: #9ca3af !important; font-size: 0.8rem !important; }
.opportunity-card__summary { color: #4b5563 !important; font-size: 0.9rem !important; line-height: 1.6 !important; }
.opportunity-card__meta-item {
    background: #f9fafb !important;
    border: 1px solid #f3f4f6 !important;
    border-radius: 6px !important;
    padding: 0.6rem 0.7rem !important;
}
.opportunity-card__meta-label { color: #9ca3af !important; font-size: 0.72rem !important; }
.opportunity-card__meta-value { color: #111827 !important; font-size: 0.9rem !important; }
.opportunity-card__actions { min-width: 160px !important; }

/* Status chips */
.status-chip {
    font-size: 0.7rem !important;
    padding: 0.22rem 0.55rem !important;
    border-radius: 4px !important;
    background: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
    color: #6b7280 !important;
    letter-spacing: 0.04em !important;
}
.status-chip--open {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #1d4ed8 !important;
}

.opportunity-card--dashboard {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 1.4rem !important;
    padding: 1.3rem 1.4rem !important;
    border: 1px solid #dbe4ee !important;
    border-left: 4px solid rgba(46, 123, 207, 0.4) !important;
    border-radius: 14px !important;
    background:
        linear-gradient(180deg, rgba(247, 250, 253, 0.92) 0%, rgba(255, 255, 255, 1) 38%) !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05) !important;
}

.opportunity-card--dashboard.opportunity-card--open {
    border-color: #c9d9eb !important;
}

.opportunity-card--dashboard:hover {
    border-color: #b9cadf !important;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08) !important;
}

.opportunity-card--dashboard .opportunity-card__body {
    gap: 1rem !important;
}

.opportunity-card--dashboard .opportunity-card__title {
    gap: 0.5rem !important;
}

.opportunity-card__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.opportunity-card--dashboard .opportunity-card__eyebrow {
    margin-top: 0 !important;
    color: #52657d !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

.opportunity-card--dashboard h3 {
    font-size: 1.2rem !important;
    line-height: 1.25 !important;
    letter-spacing: -0.025em !important;
}

.opportunity-card--dashboard .opportunity-card__summary {
    color: #42546b !important;
    font-size: 0.95rem !important;
    line-height: 1.68 !important;
}

.opportunity-card--dashboard .opportunity-card__meta {
    gap: 0.8rem !important;
}

.opportunity-card--dashboard .opportunity-card__meta-item {
    background: #f7fafc !important;
    border: 1px solid #e4ebf2 !important;
    border-radius: 10px !important;
    padding: 0.75rem 0.85rem !important;
}

.opportunity-card--dashboard .opportunity-card__meta-label {
    color: #6a7d95 !important;
    font-size: 0.71rem !important;
}

.opportunity-card--dashboard .opportunity-card__meta-value {
    color: #14263d !important;
    font-size: 0.93rem !important;
    font-weight: 700 !important;
}

.opportunity-card--dashboard .opportunity-card__actions {
    align-items: flex-end;
    justify-content: space-between;
    min-width: 190px !important;
}

.opportunity-card--dashboard .btn-primary {
    padding: 0.48rem 0.8rem !important;
    font-size: 0.86rem !important;
    line-height: 1.2 !important;
    border-radius: 0.55rem !important;
}

.opportunity-card--dashboard .btn-primary i {
    font-size: 0.82rem !important;
}

.opportunity-card__link {
    padding: 0 !important;
    color: #425b78 !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.opportunity-card__link:hover,
.opportunity-card__link:focus {
    color: #1d4ed8 !important;
    text-decoration: underline !important;
}

@media (max-width: 991.98px) {
    .opportunity-card--dashboard {
        grid-template-columns: 1fr !important;
    }

    .opportunity-card--dashboard .opportunity-card__actions {
        align-items: stretch;
        min-width: 0 !important;
    }
}

.portal-section--sticky {
    position: sticky;
    top: 5.35rem;
}
.opportunity-card--compact {
    display: block !important;
    padding: 0.85rem 1rem !important;
    background: #fff !important;
    border-left: 3px solid rgba(46, 123, 207, 0.3) !important;
    box-shadow: 0 1px 4px rgba(13, 35, 64, 0.06) !important;
}
.opportunity-card--compact .opportunity-card__actions {
    display: flex !important;
    justify-content: flex-start !important;
    margin-top: 0.75rem !important;
}
.opportunity-card--compact .opportunity-card__actions .btn {
    width: fit-content !important;
    align-self: flex-start !important;
}
.opportunity-card--compact h3 {
    font-size: 0.95rem !important;
    font-weight: 550 !important;
    line-height: 1.3 !important;
}

.opportunity-card--compact .btn {
    padding: 0.34rem 0.62rem !important;
    font-size: 0.8rem !important;
    line-height: 1.2 !important;
    border-radius: 0.5rem !important;
}

.opportunity-card--compact .btn i {
    font-size: 0.74rem !important;
}

/* Empty state */
.empty-state {
    border: 1px dashed #d1d5db !important;
    border-radius: 8px !important;
    background: #f9fafb !important;
    color: #9ca3af !important;
}
.empty-state i { color: #d1d5db !important; }

/* ═══ Gradient removal ═══ */
.public-program-card,
.public-cycle-row,
.file-upload-field__current,
.reference-card,
.repeating-entry-card { background: #fff !important; box-shadow: none !important; border: 1px solid #e5e8ed !important; }
.card-header { background: #f9fafb !important; border-bottom: 1px solid #e5e8ed !important; }
.template-card { background: #fff !important; box-shadow: none !important; }
.template-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important; border-color: #c9d1dc !important; }

/* App status pills */
.app-status-pill { border-radius: 4px !important; font-size: 0.72rem !important; }
.app-status-pill::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 0.42rem;
}
.app-status-pill--started, .app-status-pill--updated, .app-status-pill--withdrawn { background: #6b7280 !important; }
.app-status-pill--started::before, .app-status-pill--updated::before { content: "\f017"; }
.app-status-pill--submitted { background: #1d4ed8 !important; }
.app-status-pill--submitted::before { content: "\f1d8"; }
.app-status-pill--underreview { background: #d97706 !important; color: #fff !important; }
.app-status-pill--underreview::before { content: "\f06e"; }
.app-status-pill--approved { background: #16a34a !important; }
.app-status-pill--approved::before { content: "\f00c"; }
.app-status-pill--denied { background: #dc2626 !important; }
.app-status-pill--denied::before, .app-status-pill--withdrawn::before { content: "\f00d"; }

/* ═══ Admin layout (sidebar + body) ═══ */
.admin-layout {
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding-bottom: 2rem;
}
.admin-sidebar-panel {
    width: 188px;
    min-width: 188px;
    flex-shrink: 0;
    position: sticky;
    top: 4.1rem;
    max-height: calc(100vh - 4.6rem);
    overflow-y: auto;
    padding: 0.75rem 0 2rem;
    border-right: 1px solid #e5e8ed;
    margin-right: 1.5rem;
    background: transparent;
}
.admin-sidebar-panel::-webkit-scrollbar { width: 3px; }
.admin-sidebar-panel::-webkit-scrollbar-track { background: transparent; }
.admin-sidebar-panel::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 999px; }
.admin-body { flex: 1; min-width: 0; padding-top: 0; }

.admin-nav { display: grid; gap: 0.1rem; }
.admin-nav__section-label {
    padding: 0.45rem 0.7rem 0.25rem;
    color: #d1d5db;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.admin-nav__item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.7rem;
    border-radius: 6px;
    color: #374151;
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.1s ease, color 0.1s ease;
}
.admin-nav__item:hover { background: #f3f4f6; color: #111827; text-decoration: none; }
.admin-nav__item--active { background: #eff6ff; color: #1d4ed8; font-weight: 600; }
.admin-nav__item i { width: 1rem; font-size: 0.8rem; color: #d1d5db; flex-shrink: 0; text-align: center; }
.admin-nav__item:hover i { color: #9ca3af; }
.admin-nav__item--active i { color: #3b82f6; }
.admin-nav__divider { height: 1px; background: #f3f4f6; margin: 0.4rem 0.7rem; }

/* ═══ Builder canvas / toolbars ═══ */
.builder-canvas { background: #f9fafb !important; border: 1px solid #e5e8ed !important; border-radius: 8px !important; box-shadow: none !important; }
.builder-canvas__placeholder { background: #fff !important; border: 1px dashed #d1d5db !important; border-radius: 6px !important; color: #9ca3af !important; }
.builder-canvas__placeholder i { color: #d1d5db !important; }
.builder-section-toolbar { background: #fff !important; border: 1px solid #e5e8ed !important; border-radius: 6px !important; box-shadow: none !important; top: 7rem; }
.builder-quick-add-bar { background: #f9fafb !important; border: 1px solid #e5e8ed !important; border-radius: 6px !important; box-shadow: none !important; top: 11.9rem; }
.builder-section-footer { background: #fff !important; border: 1px solid #e5e8ed !important; border-radius: 6px !important; box-shadow: none !important; }
.builder-starter-panel { background: #f9fafb !important; border: 1px solid #e5e8ed !important; }
.builder-starter-panel__label { color: #374151 !important; }
.builder-starter-panel__hint { color: #9ca3af !important; }
.quick-question-card { background: #fff !important; box-shadow: none !important; border: 1px solid #e5e8ed !important; border-radius: 6px !important; }
.quick-question-card:hover, .quick-question-card:focus { background: #f5f7fa !important; border-color: #93c5fd !important; box-shadow: none !important; transform: none !important; }
.question-subgroup { background: #f9fafb !important; border: 1px solid #e5e8ed !important; border-radius: 6px !important; }

/* ═══ Section list (Qualtrics sidebar) ═══ */
.section-list { gap: 0.3rem !important; }
.section-list-item {
    background: #fff !important;
    box-shadow: none !important;
    border: 1px solid #e5e8ed !important;
    border-left: 3px solid #d1d5db !important;
    border-radius: 6px !important;
    padding: 0.7rem 0.75rem 0.7rem 0.6rem !important;
    transition: background 0.1s ease, border-color 0.1s ease !important;
}
.section-list-item:hover { transform: none !important; background: #f9fafb !important; box-shadow: none !important; border-color: #c9d1dc !important; }
.section-list-item.active { background: #eff6ff !important; border-color: #bfdbfe !important; border-left-color: #1d4ed8 !important; }
.section-list-item__num { background: #f3f4f6 !important; color: #6b7280 !important; font-size: 0.7rem !important; width: 1.45rem !important; height: 1.45rem !important; }
.section-list-item.active .section-list-item__num { background: #1d4ed8 !important; color: #fff !important; }
.section-list-item__progress-bar { background: #1d4ed8 !important; }
.section-list-item__state { font-size: 0.72rem !important; }
.section-state--empty { color: #9ca3af !important; }
.section-state--progress { color: #d97706 !important; }
.section-state--ready { color: #16a34a !important; }

/* ═══ Question cards (Qualtrics canvas) ═══ */
.builder-question-list { gap: 0.5rem !important; }
.question-card {
    background: #fff !important;
    border: 1px solid #e5e8ed !important;
    border-left: 3px solid #1d4ed8 !important;
    border-radius: 6px !important;
    padding: 0.85rem 0.85rem 0.85rem 1.1rem !important;
    box-shadow: none !important;
    transition: box-shadow 0.12s ease !important;
}
.question-card:hover { transform: none !important; box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important; }
.question-card.drag-over { border-color: #93c5fd !important; background: #eff6ff !important; }
.question-card--text      { border-left-color: #1d4ed8 !important; }
.question-card--choice    { border-left-color: #0f766e !important; }
.question-card--upload    { border-left-color: #b45309 !important; }
.question-card--reference { border-left-color: #2563eb !important; }
.question-card--group     { border-left-color: #7c3aed !important; }
.question-card--display   { border-left-color: #9ca3af !important; }
.question-card__num { background: #eff6ff !important; color: #1d4ed8 !important; border-radius: 4px !important; font-size: 0.68rem !important; }
.question-card__edit-btn { opacity: 0; transition: opacity 0.12s ease; }
.question-card:hover .question-card__edit-btn { opacity: 1; }
.question-card__actions { display: flex; align-items: center; gap: 0.3rem; align-self: flex-start; }

/* ═══ Modals ═══ */
.modal-content { border: 1px solid #e5e8ed !important; border-radius: 10px !important; box-shadow: 0 16px 48px rgba(0,0,0,0.12) !important; }
.modal-header { border-bottom: 1px solid #f3f4f6 !important; }

/* ═══ Responsive admin layout ═══ */
@media (max-width: 1199.98px) {
    .admin-layout { flex-direction: column; }
    .admin-sidebar-panel {
        width: 100%; min-width: 0; position: static;
        max-height: none; padding: 0.5rem 0;
        border-right: 0; border-bottom: 1px solid #e5e8ed;
        margin-right: 0; margin-bottom: 1rem;
    }
    .admin-nav { flex-direction: row; flex-wrap: wrap; gap: 0.2rem; }
    .admin-nav__section-label, .admin-nav__divider { display: none; }
    .admin-nav__item { padding: 0.42rem 0.6rem; font-size: 0.85rem; }
    .admin-body { padding-top: 0; }
    .builder-section-toolbar,
    .builder-quick-add-bar,
    .builder-section-footer { position: static !important; }
}

/* ═══ Specificity fix — "Create account" button text color ═══
   .app-navbar .nav-link has 2-class specificity and wins over
   .app-auth-link--primary when both use !important. Boost here. */
.app-navbar .app-auth-link--primary { color: #fff !important; background: #1d4ed8 !important; border-color: #1d4ed8 !important; }
.app-navbar .app-auth-link--primary:hover,
.app-navbar .app-auth-link--primary:focus { color: #fff !important; background: #1e40af !important; border-color: #1e40af !important; }

/* ═══ WCAG 2.1 AA contrast fixes — replace #9ca3af with #6b7280 for text ═══
   #9ca3af on white = 2.5:1 (fails). #6b7280 on white = 4.9:1 (passes AA). */
.admin-page-header__meta { color: #6b7280 !important; }
.overview-stat__label { color: #6b7280 !important; }
.portal-summary__label { color: #6b7280 !important; }
.portal-section__header p,
.detail-panel__header p { color: #6b7280 !important; }
.opportunity-card__eyebrow { color: #6b7280 !important; }
.opportunity-card__meta-label { color: #6b7280 !important; }
.admin-nav__section-label { color: #5a6472 !important; }
.section-state--empty { color: #6b7280 !important; }
/* #d97706 on white = 4.3:1 (just fails). Use #b45309 = 5.7:1. */
.section-state--progress { color: #b45309 !important; }
.builder-canvas__placeholder,
.builder-canvas__placeholder i { color: #6b7280 !important; }
.empty-state { color: #6b7280 !important; }
/* Bootstrap's default #dc3545 is 4.18:1 on --app-bg (fails AA); #b02a37 is 5.99:1. */
.text-danger { color: #b02a37 !important; }

/* ═══ Status chip — subtle inline indicator ═══ */
.status-chip {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    padding: 0.2rem 0.5rem !important;
    border-radius: 4px !important;
    background: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
    color: #6b7280 !important;
}
.status-chip--open {
    background: #dcfce7 !important;
    border-color: #bbf7d0 !important;
    color: #15803d !important;
}
.status-chip--planned {
    background: #f3f4f6 !important;
    border-color: #e5e7eb !important;
    color: #6b7280 !important;
}

/* ═══ Form version list (template-row) ═══ */
.template-program-list {
    display: grid;
    gap: 1.75rem;
}

.template-program-group {
    border: 1px solid #d7dce3;
    border-radius: 0.9rem;
    background: #fff;
    overflow: visible;
    box-shadow: 0 1px 2px rgba(16, 36, 63, 0.04), 0 4px 10px rgba(16, 36, 63, 0.06);
}

.template-program-group__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem 0.9rem;
    background: var(--app-blue-soft);
    border-bottom: 1px solid #dde3ee;
    border-top-left-radius: calc(0.9rem - 1px);
    border-top-right-radius: calc(0.9rem - 1px);
}

.template-program-group__title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--app-navy);
}

.template-program-group__meta {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
    font-size: 0.82rem;
    color: #52637a;
}

.template-program-group__meta-sep {
    color: #d1d5db;
}

.template-program-group__archived-link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
    color: #52637a;
    text-decoration: underline;
    text-decoration-color: #d1d5db;
    text-underline-offset: 2px;
}

.template-program-group__archived-link:hover {
    color: #374151;
    text-decoration-color: #9ca3af;
}

.template-list { display: grid; gap: 0; }

.template-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.1s ease;
    position: relative;
    overflow: visible;
}
.template-row--active-version {
    background: #eaf2ff;
    border-left: 5px solid var(--app-blue);
    padding-left: calc(1rem - 5px);
}
.template-row:not(.template-row--active-version) {
    padding-left: calc(2rem - 2px);
    border-left: 2px solid #e8eaed;
}
.template-row:first-child { border-top: 1px solid #f3f4f6; }
.template-row:last-child { border-bottom: none; border-bottom-left-radius: calc(0.9rem - 1px); border-bottom-right-radius: calc(0.9rem - 1px); }
.template-row:hover { background: #fafafa; }
.template-row--active-version:hover { background: #ddebff; }
.template-row:hover,
.template-row:focus-within {
    z-index: 20;
}

.template-row__main { flex: 1; min-width: 0; }

.template-row__title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin-bottom: 0.3rem;
}

.template-row__name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827;
    text-decoration: none;
}
.template-row__name:hover { color: #1d4ed8; }

.template-row__version {
    font-size: 0.7rem;
    font-weight: 600;
    color: #6b7280;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 0.1rem 0.38rem;
    letter-spacing: 0.02em;
}

.template-row__status-badge {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
}
.template-row__status-badge--draft {
    background: #f3f4f6;
    color: #4b5563;
    border: 1px solid #e5e7eb;
}
.template-row__status-badge--published {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}
.template-row__status-badge--active {
    background: var(--app-blue);
    color: #fff;
    border: 1px solid var(--app-blue);
}
.template-row__status-badge--assigned {
    background: #eef2ff;
    color: #4338ca;
    border: 1px solid #c7d2fe;
}

.template-row__meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    font-size: 0.82rem;
    color: #6b7280;
}
.template-row__meta-sep { color: #d1d5db; }
.template-row__program { font-weight: 600; color: #374151; }

.template-row__notes {
    margin-top: 0.3rem;
    font-size: 0.82rem;
    color: #6b7280;
    line-height: 1.45;
}

.template-row--active-version .template-row__meta,
.template-row--active-version .template-row__notes {
    color: #52637a;
}

.template-row__actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    overflow: visible;
}

.template-row__actions .dropdown {
    position: relative;
}

.template-row__actions .dropdown-menu {
    z-index: 1085;
}

@media (max-width: 767.98px) {
    .template-program-group__header {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ═══ Program Hub ═══════════════════════════════════════════════════════════ */

.program-summary-grid {
    display: grid;
    gap: 1rem;
}

.program-summary-card {
    border: 1px solid #e5e8ed;
    border-radius: 0.95rem;
    background: #fff;
}

.program-summary-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e1e9f3;
    background: linear-gradient(180deg, #eef5ff 0%, #f8fbff 100%);
    border-top-left-radius: calc(0.95rem - 1px);
    border-top-right-radius: calc(0.95rem - 1px);
}

.program-summary-card__identity {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.program-summary-card__title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.program-summary-card__title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.program-summary-card__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    color: #52637a;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.45;
}

.program-summary-card__meta-sep {
    color: #c6d1df;
}

.program-summary-card__body {
    display: grid;
    gap: 1rem;
    padding: 1rem 1.25rem 1.1rem;
}

.program-summary-card__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.75rem;
}

.program-summary-stat {
    padding: 0.8rem 0.9rem;
    border: 1px solid #e6edf5;
    border-radius: 0.8rem;
    background: #f8fbff;
}

.program-summary-stat__label {
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.program-summary-stat__value {
    margin-top: 0.35rem;
    color: #0f172a;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
}

.program-summary-card__actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

/* Hub status badges */
.hub-status-badge {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    border: 1px solid transparent;
}
.hub-status-badge--active   { background: #dcfce7; border-color: #bbf7d0; color: #166534; }
.hub-status-badge--inactive { background: #f3f4f6; border-color: #e5e7eb; color: #6b7280; }

/* ═══ Application queue rows ════════════════════════════════════════════════ */

.app-queue { display: grid; gap: 0; }

.app-queue-item {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.1s ease;
}
.app-queue-item:first-child { border-top: 1px solid #f3f4f6; }
.app-queue-item:hover { background: #fafafa; }

.app-queue-item__main { flex: 1; min-width: 0; }

.app-queue-item__title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin-bottom: 0.2rem;
}

.app-queue-item__name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827;
}

.app-queue-item__meta {
    font-size: 0.82rem;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin-bottom: 0.15rem;
}
.app-queue-item__meta-sep { color: #d1d5db; }

.app-queue-item__dates {
    font-size: 0.78rem;
    color: #9ca3af;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.app-queue-item__notes-flag {
    color: #6b7280;
    font-size: 0.78rem;
}

.app-queue-item__actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

/* ═══ Reference status chip (inline in queue rows and Details panel) ════════ */

.ref-status-chip {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 99px;
    border: 1px solid transparent;
}
.ref-status-chip--pending  { background: #fef9c3; color: #854d0e; border-color: #fde68a; }
.ref-status-chip--sent     { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.ref-status-chip--complete { background: #dcfce7; color: #166534; border-color: #bbf7d0; }

.application-worklist .table th,
.application-worklist .table td {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}

.application-worklist .sortable-col {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.application-worklist .sortable-col:hover {
    background-color: var(--bs-table-hover-bg, rgba(0,0,0,.04));
}

.application-worklist .app-select-col {
    width: 2.5rem;
}

.bulk-select-bar {
    padding-left: 0.5rem;
    border-left: 1px solid rgba(13, 35, 64, 0.1);
}

.application-worklist__name,
.application-worklist__program,
.application-worklist__date {
    font-size: 0.94rem;
    font-weight: 700;
    color: #0f172a;
}

.application-worklist__meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.18rem;
    font-size: 0.8rem;
    color: #64748b;
}

.application-worklist__sep {
    color: #cbd5e1;
}

.application-worklist__refs,
.application-worklist__actions {
    display: flex;
    align-items: center;
}

.application-worklist__actions {
    justify-content: flex-end;
}

.application-worklist__muted {
    font-size: 0.82rem;
    color: #94a3b8;
}

@media (max-width: 991.98px) {
    .table-shell .table-responsive {
        overflow-x: auto;
        overflow-y: visible;
    }

    .application-worklist .table {
        min-width: 860px;
    }
}

/* ═══ Cycle stat bar ════════════════════════════════════════════════════════ */

.cycle-stat-bar {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cycle-stat-item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    background: #fff;
    text-decoration: none;
    transition: box-shadow 0.1s ease, border-color 0.1s ease;
}
.cycle-stat-item:hover { border-color: #cbd5e1; box-shadow: 0 1px 4px rgba(10,34,64,0.06); }

.cycle-stat-item__count {
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
    line-height: 1;
}
.cycle-stat-item__label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #6b7280;
}

/* Tint by status */
.cycle-stat-item--started,
.cycle-stat-item--updated     { background: #f9fafb; }
.cycle-stat-item--submitted   { border-color: #bfdbfe; background: #eff6ff; }
.cycle-stat-item--submitted .cycle-stat-item__count { color: var(--app-blue); }
.cycle-stat-item--underreview { border-color: #fde68a; background: #fffbeb; }
.cycle-stat-item--underreview .cycle-stat-item__count { color: #92400e; }
.cycle-stat-item--approved    { border-color: #bbf7d0; background: #f0fdf4; }
.cycle-stat-item--approved .cycle-stat-item__count { color: #166534; }
.cycle-stat-item--denied      { border-color: #fecaca; background: #fef2f2; }
.cycle-stat-item--denied .cycle-stat-item__count { color: #991b1b; }
.cycle-stat-item--withdrawn   { background: #f9fafb; }
.cycle-stat-item--active      { box-shadow: inset 0 0 0 1.5px var(--app-blue); }

/* ═══ Applications: scope bar (Export/Email act on filtered results, not just what's on screen) ═══ */

.scope-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}
.scope-bar__text { font-size: 0.86rem; color: var(--app-text-muted); }
.scope-bar__text strong { color: var(--app-text); font-weight: 700; }
.scope-bar__actions { display: flex; gap: 0.5rem; }

.back-link {
    display: inline-flex;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--app-blue);
    text-decoration: none;
    margin-bottom: 0.5rem;
}
.back-link:hover { text-decoration: underline; }

/* ═══ Applications: grouped Program/Cycle directory ═══════════════════════ */

.group-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 1.5rem 0 0.6rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--app-text-muted);
}
.group-label::after { content: ""; flex: 1; height: 1px; background: var(--app-border); }
.group-label .count-badge {
    font-size: 0.68rem;
    font-weight: 700;
    background: var(--app-surface-soft);
    border: 1px solid var(--app-border);
    padding: 1px 7px;
    border-radius: 999px;
    letter-spacing: 0;
    text-transform: none;
}

.show-older-row { margin: 0.5rem 0 0.25rem; }
.show-older-btn {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--app-blue);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem 0;
}
.show-older-btn:hover { text-decoration: underline; }
.older-cycle { display: none; }
.older-cycle.revealed { display: block; }

.cycle-card {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow-sm);
    margin-bottom: 0.6rem;
    /* visible, not hidden — a delete dropdown on the last row must not get
       clipped by the card boundary; matches .table-shell's same tradeoff. */
    overflow: visible;
}
.cycle-card[open] { box-shadow: var(--app-shadow-md); }
.cycle-card summary {
    list-style: none;
    cursor: pointer;
    padding: 0.8rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.9rem;
}
.cycle-card summary::-webkit-details-marker { display: none; }
.cycle-card summary:focus-visible { outline: 2px solid var(--app-blue); outline-offset: -2px; }

.cycle-card .chevron {
    flex-shrink: 0;
    width: 16px;
    color: var(--app-text-muted);
    font-size: 0.75rem;
    transition: transform 0.15s ease;
}
.cycle-card[open] .chevron { transform: rotate(90deg); }

.cycle-identity { flex: 1 1 auto; min-width: 0; }
.cycle-identity .program { font-weight: 700; font-size: 0.95rem; color: var(--app-text); }
.cycle-identity .cycle-name { color: var(--app-text-muted); font-weight: 400; }
.cycle-identity .sub { margin-top: 0.15rem; font-size: 0.78rem; }

.window-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.window-badge--open   { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.window-badge--soon   { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.window-badge--closed { background: var(--app-surface-soft); color: var(--app-text-muted); border: 1px solid var(--app-border); }

.mini-stats {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 46%;
}
.mini-stat { font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: var(--app-radius-sm); white-space: nowrap; }
.mini-stat.submitted   { color: var(--app-blue); background: #eff6ff; }
.mini-stat.underreview { color: #92400e; background: #fffbeb; }
.mini-stat.approved    { color: #166534; background: #f0fdf4; }
.mini-stat.denied      { color: #991b1b; background: #fef2f2; }
.mini-stat.progress    { color: var(--app-text-muted); background: #f9fafb; }

.total-count { flex-shrink: 0; text-align: right; min-width: 60px; }
.total-count .n { font-size: 1rem; font-weight: 700; color: var(--app-text); display: block; line-height: 1; }
.total-count .lbl { font-size: 0.64rem; color: var(--app-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }

.cycle-body { border-top: 1px solid var(--app-border); padding: 0 1rem 0.75rem; }

.cycle-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.5rem 0.1rem;
    font-size: 0.8rem;
}
.cycle-footer .hint { color: var(--app-text-muted); }
.cycle-footer__actions { display: flex; align-items: center; gap: 1rem; }
.view-all { font-weight: 700; color: var(--app-blue); text-decoration: none; }
.view-all:hover { text-decoration: underline; }

.archive-toggle-btn {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--app-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}
.archive-toggle-btn:hover { color: var(--app-blue); text-decoration: underline; }

.archived-cycle { display: none; }
.archived-cycle.revealed { display: block; }

@media (max-width: 680px) {
    .mini-stats { display: none; }
}

/* ═══ Reference list (Details page panel) ══════════════════════════════════ */

.ref-list { display: flex; flex-direction: column; }

.ref-list-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f3f4f6;
    flex-wrap: wrap;
}
.ref-list-item:last-child { border-bottom: none; }

.ref-list-item__main { flex: 1 1 160px; min-width: 0; }

.ref-list-item__name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.15rem;
}

.ref-list-item__meta {
    font-size: 0.8rem;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
}
.ref-list-item__meta-sep { color: #d1d5db; }

.ref-list-item__status-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.ref-list-item__actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

/* ═══ Form version mismatch banner ═════════════════════════════════════════ */

.form-version-banner {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
    padding: 1rem 1.1rem;
}
.form-version-banner__icon { color: #d97706; font-size: 1.1rem; }

/* ═══ Export format option cards ════════════════════════════════════════════ */

.export-format-option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.1s ease, background 0.1s ease;
}
.export-format-option:has(.export-format-option__radio:checked) {
    border-color: #93c5fd;
    background: #eff6ff;
}
.export-format-option__radio { margin-top: 0.2rem; flex-shrink: 0; }
.export-format-option__body  { flex: 1; min-width: 0; }

/* Instructions editor */

.instruction-editor {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--app-border);
    border-radius: 0.75rem;
    background: #fff;
    overflow: hidden;
}

.wysiwyg-editor {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--app-border);
    border-radius: 0.75rem;
    background: #fff;
    overflow: hidden;
}

.program-modal .modal-body {
    overflow: visible;
}

.program-modal .modal-body {
    overflow: visible;
}

.cycle-modal .question-form-panel,
.program-modal .question-form-panel {
    height: auto !important;
}

.cycle-modal .cycle-email-editor__host {
    display: block;
    margin-bottom: 0.5rem;
}

.program-modal .program-reference-email-panel__editor {
    display: block;
    margin-bottom: 0.5rem;
}

.cycle-modal .wysiwyg-editor,
.program-modal .wysiwyg-editor {
    display: block;
    overflow: visible;
}

/* TinyMCE editors */
.wysiwyg-editor + .tox.tox-tinymce {
    border: 1px solid var(--app-border);
    border-radius: 0.75rem;
    overflow: hidden;
}

.instruction-editor__host + .tox.tox-tinymce {
    border: 0;
    border-radius: 0;
}

.tox .tox-tinymce-aux,
.tox .tox-dialog-wrap {
    z-index: 1060 !important;
}

.program-reference-default-note {
    border: 1px dashed var(--app-border);
    border-radius: 0.75rem;
    padding: 0.9rem 1rem;
    background: var(--app-surface-soft);
}

.instruction-editor__host {
    display: block;
    background: #fff;
}

.instruction-content > :last-child {
    margin-bottom: 0;
}

.instruction-content p,
.instruction-content ul,
.instruction-content ol,
.instruction-content blockquote {
    margin-bottom: 0.85rem;
}

.instruction-content ul,
.instruction-content ol {
    padding-left: 1.5rem;
}

.instruction-content a {
    color: var(--app-primary);
    text-decoration: underline;
}

.instruction-content blockquote {
    margin-left: 0;
    padding-left: 1rem;
    border-left: 3px solid var(--app-border-strong);
    color: var(--app-text-muted);
}

/* Homepage-only hero image treatment */
.portal-hero--home {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: clamp(22rem, 42vw, 30rem);
    padding: 0;
    align-items: end;
    border-radius: 1.2rem;
    background:
        linear-gradient(90deg, rgba(6, 20, 45, 0.55) 0%, rgba(6, 20, 45, 0.44) 32%, rgba(6, 20, 45, 0.28) 58%, rgba(6, 20, 45, 0.1) 84%, rgba(6, 20, 45, 0.04) 100%),
        linear-gradient(180deg, rgba(4, 16, 36, 0.08) 0%, rgba(4, 16, 36, 0.02) 15%, rgba(4, 16, 36, 0.2) 40%, rgba(4, 16, 36, 0.42) 100%),
        url('../images/suture-training-session.jpg');
    background-size: cover;
    background-position: center 32%;
    box-shadow: 0 18px 44px rgba(7, 28, 58, 0.16);
}

.portal-hero--home::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.2), transparent 35%),
        linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(5, 20, 42, 0.08) 100%);
    pointer-events: none;
}

.portal-hero--home.portal-hero--compact .portal-hero__main {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 40rem;
    padding: 2rem clamp(1.5rem, 4vw, 3.25rem) 2.75rem;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.portal-hero--home.portal-hero--compact .portal-kicker {
    color: #fff !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 0.6rem;
}

.portal-hero--home.portal-hero--compact h1 {
    color: #fff !important;
    font-size: clamp(2.1rem, 3.4vw, 3.4rem) !important;
    text-shadow: 0 2px 20px rgba(2, 10, 24, 0.35);
}

.portal-hero--home.portal-hero--compact p {
    max-width: min(34rem, 100%);
    color: rgba(255, 255, 255, 0.9) !important;
    margin-top: 0.75rem;
    line-height: 1.55;
}

.portal-hero--home.portal-hero--compact p a {
    color: #d7e6fc !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.portal-hero--home.portal-hero--compact p a:hover {
    color: #fff !important;
}

.portal-hero--home .portal-hero__actions {
    margin-top: 1.35rem;
}

.portal-hero--home .portal-hero__actions .btn {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    box-shadow: 0 8px 22px rgba(2, 10, 24, 0.3);
}

@media (max-width: 991.98px) {
    .portal-hero--home {
        min-height: 24rem;
        background-position: 64% center;
    }
}

@media (max-width: 767.98px) {
    .portal-hero--home {
        min-height: 14rem;
        align-items: start;
        background: none;
    }

    .portal-hero--home::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            linear-gradient(180deg, rgba(4, 16, 36, 0.05) 0%, rgba(4, 16, 36, 0) 40%, rgba(4, 16, 36, 0.18) 100%),
            url('../images/suture-training-session.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 30% 100%;
        transform: scale(1.18);
        transform-origin: 30% 100%;
        z-index: 0;
    }

    .portal-hero--home.portal-hero--compact .portal-hero__main {
        max-width: none;
        margin-top: 14rem;
        padding: 1.75rem 1.25rem 2rem !important;
        background: #fff !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .portal-hero--home.portal-hero--compact .portal-kicker {
        color: #3561a0 !important;
    }

    .portal-hero--home.portal-hero--compact h1 {
        color: #0d2340 !important;
        font-size: clamp(1.8rem, 7vw, 2.3rem) !important;
        text-shadow: none;
    }

    .portal-hero--home.portal-hero--compact p {
        color: #52657e !important;
    }

    .portal-hero--home.portal-hero--compact p a {
        color: #0f4c92 !important;
    }

    .portal-hero--home.portal-hero--compact p a:hover {
        color: #0a3568 !important;
    }

    .portal-hero--home .portal-hero__actions .btn {
        box-shadow: none;
    }
}

/* Homepage content area — gradient bridge from hero into page */
#student-dashboard {
    padding: 1.5rem 1.5rem 1.5rem;
    margin-top: -0.5rem;
    border-radius: 1.1rem;
    background: linear-gradient(180deg, #e4ecf8 0%, #f5f7fa 260px);
}

/* Question card secondary meta row */
.question-card__meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.45rem;
}

.question-card__meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.71rem;
    font-weight: 600;
    color: #6b7f98;
    letter-spacing: 0.01em;
}

.question-card__meta-chip i {
    font-size: 0.65rem;
    opacity: 0.7;
}

.question-card__meta-chip + .question-card__meta-chip::before {
    content: "·";
    margin-right: 0.15rem;
    color: #c0ccd8;
    font-weight: 400;
}

.question-card__meta-chip--required {
    color: #b91c1c;
}

.question-card__meta-chip--cond-required {
    color: #b45309;
}

/* Form version mismatch indicator — applications listing */
.app-mismatch-icon {
    color: #b45309;
    font-size: 0.85rem;
    cursor: help;
}

/* ═══ Program details page ═══ */

/* Richer hero for the program details page */
.portal-hero--compact .portal-hero__main {
    border-top: 3px solid #1d5fa8 !important;
    background: linear-gradient(150deg, #e8f0fb 0%, #f4f8fe 45%, #fff 100%) !important;
    border-color: #d0dff0 !important;
    border-radius: 10px !important;
    padding: 2rem 2.25rem !important;
}

.portal-hero--compact h1 {
    font-size: clamp(1.85rem, 3vw, 2.6rem) !important;
    letter-spacing: -0.03em !important;
    color: #0d2340 !important;
    line-height: 1.1 !important;
}

.portal-hero--compact .portal-kicker {
    color: #3561a0 !important;
    font-weight: 800 !important;
}

.portal-hero--compact p {
    color: #3a506a !important;
    font-size: 1rem !important;
    line-height: 1.65 !important;
}

.portal-hero--compact .portal-hero__actions {
    margin-top: 1.35rem !important;
}

.portal-hero--compact .portal-hero__actions .btn {
    width: auto !important;
    align-self: flex-start !important;
}

/* Detail section below the hero */
.portal-detail {
    padding-top: 0.15rem;
    padding-bottom: 1.5rem;
}

.portal-detail .detail-panel {
    border: 1px solid #dde6f0 !important;
    border-top: 3px solid #1d5fa8 !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: 0 2px 10px rgba(13, 35, 64, 0.05) !important;
    padding: 1.25rem 1.4rem !important;
}

.portal-detail .detail-panel__header {
    padding-bottom: 0.85rem;
    margin-bottom: 0.85rem;
    border-bottom: 1px solid #edf2f8;
}

/* ── Application status pill (My Applications sidebar) ──────────────────── */
.app-status-pill {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.3em 0.65em;
    border-radius: 20px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: #e2e3e5;
    color: #41464b;
    flex-shrink: 0;
    white-space: nowrap;
}
.app-status-pill.app-status-pill--started,
.app-status-pill.app-status-pill--updated    { background: #fff3cd !important; color: #664d03 !important; }
.app-status-pill.app-status-pill--submitted  { background: #cfe2ff !important; color: #084298 !important; }
.app-status-pill.app-status-pill--underreview{ background: #e0cffc !important; color: #3d0a91 !important; }
.app-status-pill.app-status-pill--approved   { background: #d1e7dd !important; color: #0a3622 !important; }
.app-status-pill.app-status-pill--denied,
.app-status-pill.app-status-pill--withdrawn  { background: #f8d7da !important; color: #58151c !important; }

/* Homepage opportunities refresh */
.portal-section--opportunities {
    padding: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

.portal-stack--opportunities {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: 1fr;
}

.opportunity-card--dashboard {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 0.6rem !important;
    min-height: unset !important;
    padding: 0.85rem 1.1rem !important;
    border: 1px solid rgba(208, 220, 233, 0.9) !important;
    border-left: 3px solid rgba(46, 123, 207, 0.4) !important;
    border-radius: 0.65rem !important;
    background: #fff !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05) !important;
}

.opportunity-card--dashboard.opportunity-card--open {
    border-color: rgba(167, 197, 227, 0.95) !important;
    border-left-color: rgba(29, 78, 216, 0.7) !important;
}

.opportunity-card--dashboard:hover {
    transform: none !important;
    border-color: rgba(169, 191, 216, 0.98) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
}

.opportunity-card--dashboard .opportunity-card__body {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.4rem !important;
    min-width: 0;
}

.opportunity-card--dashboard .opportunity-card__heading {
    display: block !important;
    min-width: 0;
}

.opportunity-card--dashboard .opportunity-card__title {
    gap: 0.1rem !important;
}

.opportunity-card--dashboard .opportunity-card__eyebrow {
    color: #7c8fa3 !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    margin-top: 0 !important;
}

.opportunity-card--dashboard h3 {
    font-size: 0.97rem !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 0 !important;
}

.opportunity-card--dashboard .opportunity-card__status-badge {
    margin-left: 0.2rem;
}

.opportunity-card--dashboard .opportunity-card__summary {
    display: -webkit-box !important;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.83rem !important;
    line-height: 1.55 !important;
    color: #6b7f98 !important;
    margin: 0 !important;
}

.opportunity-card__detail-row {
    gap: 0.4rem !important;
    margin-top: 0 !important;
}

.opportunity-card--dashboard .opportunity-card__meta-label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0;
    background: none !important;
    border-radius: 0;
    color: #6b7f98 !important;
    font-size: 0.78rem !important;
    font-weight: 600;
}

.opportunity-card--dashboard .opportunity-card__actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    min-width: auto !important;
    white-space: normal;
    margin-top: 0.35rem !important;
    padding-top: 0.6rem !important;
    border-top: 1px solid rgba(208, 220, 233, 0.7) !important;
}

.opportunity-card--dashboard .btn-primary,
.opportunity-card--dashboard .btn-outline-primary {
    padding: 0.45rem 0.8rem !important;
    border-radius: 0.5rem !important;
    font-size: 0.85rem !important;
    text-align: center !important;
}

.opportunity-card--dashboard .opportunity-card__link {
    font-size: 0.82rem !important;
    padding: 0.3rem 0.5rem !important;
    text-align: center !important;
}

@media (max-width: 767.98px) {
    .opportunity-card--dashboard {
        grid-template-columns: 1fr !important;
    }

    .opportunity-card--dashboard .opportunity-card__actions {
        white-space: normal;
    }
}

.portal-section-count-badge {
    font-size: 0.72rem;
}

.opportunity-card__status-badge {
    font-size: 0.7rem;
}

.opportunity-card__program-icon {
    font-size: 1.15rem;
    color: #8fa8c8;
}

.opportunity-card__deadline-warning {
    color: #b45309;
}

.badge-soft-warning {
    background: rgba(185, 151, 91, 0.14) !important;
    color: #745727 !important;
}

.question-form-select--starter {
    width: 160px;
    min-width: 0;
}

.option-value-input {
    max-width: 180px;
}

.option-value-input--compact {
    max-width: 140px;
}

.option-value-input--wide {
    max-width: 200px;
}

.currency-input-group {
    max-width: 180px;
}

.question-card__drag-handle {
    padding-top: 0.15rem;
    color: var(--app-text-muted);
    cursor: grab;
}

.question-card__content {
    min-width: 0;
}

.question-card__title {
    font-size: 1.01rem;
}

.question-card__support {
    margin-top: 0.35rem;
}

.question-card__support-label {
    font-weight: 600;
    color: #51657e;
}

.question-subgroup-starter-panel {
    border-radius: 0.5rem;
}

.question-form-grid--tight {
    gap: 0.5rem;
}

.question-card--dragging {
    opacity: 0.5;
}

.subquestion-list--no-drop {
    opacity: 0.4;
    outline: 2px dashed #ef4444;
    outline-offset: 4px;
    border-radius: 6px;
    cursor: not-allowed;
}

.toast-container-app {
    z-index: 9999;
}

.toast-container-app .toast {
    min-width: 21rem;
}

.toast-container-app .toast-body {
    font-size: 0.98rem;
    padding: 0.9rem 1rem;
}

.toast-container-app .toast-body i {
    font-size: 1.05rem;
}

.confirm-message-preline {
    white-space: pre-line;
}

.clipboard-helper {
    position: fixed;
    inset: 0 auto auto -9999px;
    opacity: 0;
    pointer-events: none;
}

[data-width-pct="0"] { width: 0%; }
[data-width-pct="1"] { width: 1%; }
[data-width-pct="2"] { width: 2%; }
[data-width-pct="3"] { width: 3%; }
[data-width-pct="4"] { width: 4%; }
[data-width-pct="5"] { width: 5%; }
[data-width-pct="6"] { width: 6%; }
[data-width-pct="7"] { width: 7%; }
[data-width-pct="8"] { width: 8%; }
[data-width-pct="9"] { width: 9%; }
[data-width-pct="10"] { width: 10%; }
[data-width-pct="11"] { width: 11%; }
[data-width-pct="12"] { width: 12%; }
[data-width-pct="13"] { width: 13%; }
[data-width-pct="14"] { width: 14%; }
[data-width-pct="15"] { width: 15%; }
[data-width-pct="16"] { width: 16%; }
[data-width-pct="17"] { width: 17%; }
[data-width-pct="18"] { width: 18%; }
[data-width-pct="19"] { width: 19%; }
[data-width-pct="20"] { width: 20%; }
[data-width-pct="21"] { width: 21%; }
[data-width-pct="22"] { width: 22%; }
[data-width-pct="23"] { width: 23%; }
[data-width-pct="24"] { width: 24%; }
[data-width-pct="25"] { width: 25%; }
[data-width-pct="26"] { width: 26%; }
[data-width-pct="27"] { width: 27%; }
[data-width-pct="28"] { width: 28%; }
[data-width-pct="29"] { width: 29%; }
[data-width-pct="30"] { width: 30%; }
[data-width-pct="31"] { width: 31%; }
[data-width-pct="32"] { width: 32%; }
[data-width-pct="33"] { width: 33%; }
[data-width-pct="34"] { width: 34%; }
[data-width-pct="35"] { width: 35%; }
[data-width-pct="36"] { width: 36%; }
[data-width-pct="37"] { width: 37%; }
[data-width-pct="38"] { width: 38%; }
[data-width-pct="39"] { width: 39%; }
[data-width-pct="40"] { width: 40%; }
[data-width-pct="41"] { width: 41%; }
[data-width-pct="42"] { width: 42%; }
[data-width-pct="43"] { width: 43%; }
[data-width-pct="44"] { width: 44%; }
[data-width-pct="45"] { width: 45%; }
[data-width-pct="46"] { width: 46%; }
[data-width-pct="47"] { width: 47%; }
[data-width-pct="48"] { width: 48%; }
[data-width-pct="49"] { width: 49%; }
[data-width-pct="50"] { width: 50%; }
[data-width-pct="51"] { width: 51%; }
[data-width-pct="52"] { width: 52%; }
[data-width-pct="53"] { width: 53%; }
[data-width-pct="54"] { width: 54%; }
[data-width-pct="55"] { width: 55%; }
[data-width-pct="56"] { width: 56%; }
[data-width-pct="57"] { width: 57%; }
[data-width-pct="58"] { width: 58%; }
[data-width-pct="59"] { width: 59%; }
[data-width-pct="60"] { width: 60%; }
[data-width-pct="61"] { width: 61%; }
[data-width-pct="62"] { width: 62%; }
[data-width-pct="63"] { width: 63%; }
[data-width-pct="64"] { width: 64%; }
[data-width-pct="65"] { width: 65%; }
[data-width-pct="66"] { width: 66%; }
[data-width-pct="67"] { width: 67%; }
[data-width-pct="68"] { width: 68%; }
[data-width-pct="69"] { width: 69%; }
[data-width-pct="70"] { width: 70%; }
[data-width-pct="71"] { width: 71%; }
[data-width-pct="72"] { width: 72%; }
[data-width-pct="73"] { width: 73%; }
[data-width-pct="74"] { width: 74%; }
[data-width-pct="75"] { width: 75%; }
[data-width-pct="76"] { width: 76%; }
[data-width-pct="77"] { width: 77%; }
[data-width-pct="78"] { width: 78%; }
[data-width-pct="79"] { width: 79%; }
[data-width-pct="80"] { width: 80%; }
[data-width-pct="81"] { width: 81%; }
[data-width-pct="82"] { width: 82%; }
[data-width-pct="83"] { width: 83%; }
[data-width-pct="84"] { width: 84%; }
[data-width-pct="85"] { width: 85%; }
[data-width-pct="86"] { width: 86%; }
[data-width-pct="87"] { width: 87%; }
[data-width-pct="88"] { width: 88%; }
[data-width-pct="89"] { width: 89%; }
[data-width-pct="90"] { width: 90%; }
[data-width-pct="91"] { width: 91%; }
[data-width-pct="92"] { width: 92%; }
[data-width-pct="93"] { width: 93%; }
[data-width-pct="94"] { width: 94%; }
[data-width-pct="95"] { width: 95%; }
[data-width-pct="96"] { width: 96%; }
[data-width-pct="97"] { width: 97%; }
[data-width-pct="98"] { width: 98%; }
[data-width-pct="99"] { width: 99%; }
[data-width-pct="100"] { width: 100%; }

/* Applicant form section rail */
.surface-panel.form-preview-nav {
    border: 1px solid rgba(34, 83, 132, 0.14) !important;
    /* This selector's higher specificity was clobbering the base .form-preview-nav rule's
       scroll-shadow background-image stack (the "more sections below, scroll for it" fade
       cue) via a plain `background` shorthand — silently breaking that affordance while the
       scroll mechanism itself kept working. Reinstate the same layered technique here
       instead, with this rule's refined gradient tones. */
    background-repeat: no-repeat;
    background-image:
        linear-gradient(rgba(246, 249, 253, 0.98) 40%, rgba(246, 249, 253, 0)),
        linear-gradient(rgba(246, 249, 253, 0), rgba(246, 249, 253, 0.98) 60%),
        linear-gradient(to bottom, rgba(10, 34, 64, 0.16), rgba(10, 34, 64, 0)),
        linear-gradient(to top, rgba(10, 34, 64, 0.16), rgba(10, 34, 64, 0)),
        radial-gradient(circle at top left, rgba(189, 218, 247, 0.4), transparent 42%),
        linear-gradient(180deg, rgba(247, 250, 254, 0.98) 0%, rgba(239, 245, 252, 0.98) 100%);
    background-position: top, bottom, top, bottom, top left, top left;
    background-size: 100% 36px, 100% 36px, 100% 12px, 100% 12px, auto, auto;
    background-attachment: local, local, scroll, scroll, scroll, scroll;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.78),
        0 10px 24px rgba(18, 48, 74, 0.05) !important;
}

.form-preview-nav .form-preview-nav__current {
    border: 1px solid rgba(32, 76, 118, 0.1) !important;
    background: rgba(255, 255, 255, 0.78) !important;
    backdrop-filter: blur(4px);
}