/* ==========================================================================
   RTI Grant Manager — Global Design System
   Responsive-first, optimized for low bandwidth and varied screen sizes.
   Primary palette aligned with RTI International's navy / blue identity.
   Adjust hex values in the :root block below if the brand book says
   otherwise — every component reads through these CSS variables.
   ========================================================================== */

/* ---------- CSS Variables ---------- */
:root {
    /* Primary — RTI International blue/navy. Tweak these to match the
       authoritative brand book; everything else cascades. */
    --primary-50:  #E8F1F8;
    --primary-100: #C7DEEC;
    --primary-500: #0073B2; /* mid blue — links, buttons, focus accents */
    --primary-600: #005A8D; /* hover */
    --primary-700: #003D6B; /* deep navy — headers, brand chrome */

    /* Neutral */
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-400: #9CA3AF;
    --gray-600: #4B5563;
    --gray-800: #1F2937;
    --gray-900: #111827;

    /* Semantic */
    --success: #059669;
    --warning: #D97706;
    --danger: #DC2626;
    --info: #2563EB;

    /* Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
}

/* ---------- Base ---------- */
html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

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

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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--gray-800);
    background-color: var(--gray-50);
    margin-bottom: 60px;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--gray-900);
    font-weight: 600;
}

a { color: var(--primary-500); }
a:hover { color: var(--primary-700); }

/* ---------- Focus States (accessibility) ---------- */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus, .form-select:focus {
    box-shadow: 0 0 0 3px rgba(0, 115, 178, 0.25);
    border-color: var(--primary-500);
    outline: none;
}

/* ---------- Buttons ---------- */
.btn {
    border-radius: var(--radius-sm);
    font-weight: 500;
    transition: all 150ms ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

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

.btn-primary:hover {
    background-color: var(--primary-600);
    border-color: var(--primary-600);
    box-shadow: 0 4px 6px -1px rgba(0, 115, 178, 0.35);
}

/* Loading state */
.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn-loading::after {
    content: '';
    position: absolute;
    width: 16px; height: 16px;
    top: 50%; left: 50%;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 600ms linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Touch-friendly button sizing on mobile */
@media (max-width: 576px) {
    .btn { min-height: 44px; padding: 0.5rem 1rem; }
    .btn-sm { min-height: 38px; }
}

/* ---------- Cards ---------- */
.card, .card-modern {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: all 150ms ease;
}

.card-modern:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

/* ---------- Status Badges ---------- */
.badge-status {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.badge-status::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.badge-draft    { background: var(--gray-100); color: var(--gray-600); }
.badge-draft::before { background: var(--gray-400); }
.badge-submitted { background: #DBEAFE; color: #1E40AF; }
.badge-submitted::before { background: var(--info); }
.badge-review   { background: #FEF3C7; color: #92400E; }
.badge-review::before { background: var(--warning); }
.badge-success  { background: #D1FAE5; color: #065F46; }
.badge-success::before { background: var(--success); }
.badge-danger   { background: #FEE2E2; color: #991B1B; }
.badge-danger::before { background: var(--danger); }

/* ---------- Tables (responsive) ---------- */
.table {
    font-size: 0.875rem;
}

.table th {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--gray-600);
    background: var(--gray-50);
    white-space: nowrap;
}

/* Horizontal scroll wrapper for tables on small screens */
.table-responsive-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Card-style table rows on mobile */
@media (max-width: 768px) {
    .table-cards thead { display: none; }
    .table-cards tbody tr {
        display: block;
        margin-bottom: 0.75rem;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-md);
        padding: 0.75rem;
        background: white;
    }
    .table-cards tbody td {
        display: flex;
        justify-content: space-between;
        padding: 0.25rem 0;
        border: none;
    }
    .table-cards tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.75rem;
        color: var(--gray-600);
    }
}

/* ---------- Forms (responsive) ---------- */
.form-control, .form-select {
    border-radius: var(--radius-sm);
    border-color: var(--gray-200);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.form-label {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--gray-600);
    margin-bottom: 0.25rem;
}

/* Stacked form rows on mobile */
@media (max-width: 576px) {
    .row.mb-3 > [class*="col-md-"],
    .row.mb-3 > [class*="col-lg-"] {
        margin-bottom: 0.75rem;
    }
    .form-control, .form-select { font-size: 16px; } /* prevent iOS zoom */
}

/* ---------- File Upload Zone ---------- */
.file-upload-zone {
    border: 2px dashed var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 200ms ease;
    background: var(--gray-50);
}

.file-upload-zone:hover,
.file-upload-zone.dragover {
    border-color: var(--primary-500);
    background: var(--primary-50);
}

.file-upload-zone.has-file {
    border-style: solid;
    border-color: var(--success);
    background: #D1FAE5;
}

@media (max-width: 576px) {
    .file-upload-zone { padding: 1.5rem 1rem; }
}

/* ---------- Stage Pipeline Stepper ---------- */
.stepper {
    display: flex;
    align-items: flex-start;
    padding: 0;
    margin: 1rem 0;
}

.stepper-step {
    flex: 1;
    text-align: center;
    position: relative;
}

.stepper-step::after {
    content: '';
    position: absolute;
    top: 16px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--gray-200);
    z-index: 0;
}

.stepper-step:last-child::after { display: none; }
.stepper-step.completed::after { background: var(--success); }

.stepper-circle {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 2px solid var(--gray-200);
    background: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 300ms ease;
}

.stepper-step.completed .stepper-circle {
    background: var(--success);
    border-color: var(--success);
    color: white;
}

.stepper-step.active .stepper-circle {
    border-color: var(--primary-500);
    color: var(--primary-500);
    animation: pulse-ring 2s infinite;
}

.stepper-step.locked .stepper-circle {
    background: var(--gray-100);
    color: var(--gray-400);
}

.stepper-label {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--gray-600);
}

@keyframes pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(99,102,241,0.3); }
    70% { box-shadow: 0 0 0 8px rgba(99,102,241,0); }
    100% { box-shadow: 0 0 0 0 rgba(99,102,241,0); }
}

/* Vertical stepper on mobile */
@media (max-width: 576px) {
    .stepper {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .stepper-step {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        text-align: left;
        width: 100%;
    }
    .stepper-step::after {
        display: none;
    }
    .stepper-label { margin-top: 0; }
}

/* ---------- Toast Notifications ---------- */
.toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: calc(100vw - 2rem);
}

.toast-notification {
    min-width: 280px;
    max-width: 420px;
    background: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 1rem;
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    animation: toast-in 300ms ease-out;
    position: relative;
    overflow: hidden;
    font-size: 0.875rem;
}

.toast-notification.toast-exit {
    animation: toast-out 200ms ease-in forwards;
}

.toast-notification .toast-progress {
    position: absolute;
    bottom: 0; left: 0;
    height: 3px;
    background: var(--primary-500);
    animation: toast-countdown 5s linear forwards;
}

.toast-success .toast-progress { background: var(--success); }
.toast-error .toast-progress { background: var(--danger); }
.toast-warning .toast-progress { background: var(--warning); }

/* Per-type theming so the toast body is visibly the right color, not just
   the 3px progress bar at the bottom. Green for success, red for error,
   amber for warning, blue for info. Light-tinted background + accent
   border-left + dark-toned text keeps it readable on light pages. */
.toast-success {
    background: #ECFDF5;
    border-left: 4px solid var(--success);
    color: #065F46;
}
.toast-error {
    background: #FEF2F2;
    border-left: 4px solid var(--danger);
    color: #991B1B;
}
.toast-warning {
    background: #FFFBEB;
    border-left: 4px solid var(--warning);
    color: #92400E;
}
.toast-info {
    background: #EEF2FF;
    border-left: 4px solid var(--primary-500);
    color: #3730A3;
}

@keyframes toast-in { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toast-out { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }
@keyframes toast-countdown { from { width: 100%; } to { width: 0%; } }

@media (max-width: 576px) {
    .toast-container { top: auto; bottom: 1rem; right: 0.5rem; left: 0.5rem; }
    .toast-notification { min-width: auto; width: 100%; }
}

/* ---------- Persistent Page Error Banners ----------
   Errors render here (top of <main>), not as fading toasts. They stack when
   multiple are raised and stay until the user dismisses each one or navigates
   away. See site.js _renderPersistentErrorBanner. */
.page-error-banner-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 1.25rem 0;
    margin-bottom: 0.5rem;
}
.page-error-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0;
    padding: 0.85rem 1rem;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-left: 4px solid var(--danger, #DC2626);
    border-radius: var(--radius-md, 8px);
    color: #991B1B;
    font-size: 0.9rem;
    line-height: 1.4;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    animation: page-error-banner-in 200ms ease-out;
}
.page-error-banner-message { flex: 1; white-space: pre-line; }
.page-error-banner-close {
    flex: 0 0 auto;
    margin-left: auto;
    background: transparent;
    border: 0;
    padding: 0.25rem 0.4rem;
    font-size: 1.2rem;
    line-height: 1;
    color: #991B1B;
    cursor: pointer;
    border-radius: 4px;
}
.page-error-banner-close::before { content: '\00d7'; }
.page-error-banner-close:hover { background: rgba(153, 27, 27, 0.1); }
.page-error-banner-close:focus-visible {
    outline: 2px solid var(--danger, #DC2626);
    outline-offset: 1px;
}
@keyframes page-error-banner-in {
    from { transform: translateY(-4px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* ---------- Skeleton Loading ---------- */
.skeleton {
    background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

.skeleton-text { height: 0.875rem; margin-bottom: 0.5rem; }
.skeleton-title { height: 1.25rem; width: 60%; margin-bottom: 0.75rem; }
.skeleton-card { height: 120px; border-radius: var(--radius-lg); margin-bottom: 1rem; }

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ---------- Page Enter Animation ---------- */
.page-enter {
    animation: page-fade-up 200ms ease-out;
}

@keyframes page-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    /* End at transform:none so the rendered <main> doesn't establish a containing block for position:fixed descendants (Bootstrap modals). */
    to { opacity: 1; transform: none; }
}

/* ---------- Navbar (shared) ---------- */
a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
    font-weight: 600;
}

/* ---------- Footer ---------- */
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px;
    font-size: 0.8rem;
    color: var(--gray-400);
}

/* ---------- Low Bandwidth Optimizations ---------- */
/* Reduce animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .stepper-step.active .stepper-circle { animation: none; }
}

/* Reduce image quality hints for slow connections */
@media (prefers-reduced-data: reduce) {
    .skeleton { animation: none; background: var(--gray-100); }
}

/* ---------- Responsive Utility Classes ---------- */
.hide-mobile { display: block; }
.show-mobile { display: none; }

@media (max-width: 768px) {
    .hide-mobile { display: none !important; }
    .show-mobile { display: block !important; }
}

/* Touch targets: minimum 44x44px on mobile */
@media (max-width: 768px) {
    .btn-sm { min-height: 38px; min-width: 38px; }
    a.btn-sm { padding: 0.4rem 0.75rem; }
    .nav-link { padding: 0.75rem 1rem; }
    .form-check-input { width: 1.25rem; height: 1.25rem; }
}

/* Stack action buttons vertically on small screens */
@media (max-width: 576px) {
    .btn-actions {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    .btn-actions .btn { width: 100%; }
    .d-flex.gap-2 { flex-direction: column; }
    .d-flex.gap-3 { flex-direction: column; }
}

/* Card grid: single column on mobile, 2 on tablet, 3+ on desktop */
.card-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 576px) {
    .card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
    .card-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1200px) {
    .card-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Readable content width */
.content-narrow { max-width: 720px; }
.content-medium { max-width: 960px; }
.content-wide   { max-width: 1280px; }

@media (max-width: 576px) {
    .content-narrow, .content-medium, .content-wide {
        max-width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    /* UX-11 fix: at narrow viewports the html font-size: 14px combined with
       Bootstrap's default 58px form-floating height causes the floated label
       to overlap the input padding. Bumping line-height + min-height keeps
       labels readable on 360px screens (Login + Register). */
    .form-floating > .form-control,
    .form-floating > .form-select {
        min-height: 58px;
        line-height: 1.4;
    }
    .form-floating > label {
        line-height: 1.2;
    }
}

/* ---------- Impersonation banner ----------
   Sticky red strip at the top of every page when an admin is signed in
   "as" another user. Renders nothing when the OriginalAdminUserId claim
   is absent. */
.impersonation-banner {
    position: sticky;
    top: 0;
    z-index: 1080;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #b91c1c;
    color: #fff;
    border-bottom: 2px solid #7f1d1d;
    font-size: 0.875rem;
}
.impersonation-banner strong { color: #fee2e2; }
.impersonation-banner-form { margin: 0; }

/* BUG-EXP-10: public landing hero + feature blocks. Compact, no images,
   honors prefers-reduced-motion via the existing page-enter rule. */
.public-hero {
    padding: 4rem 1rem 3rem;
    text-align: center;
    background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%);
    border-radius: 1rem;
    margin: 1.5rem auto 2rem;
    max-width: 1100px;
}
.public-hero-inner { max-width: 760px; margin: 0 auto; }
.public-hero-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.85rem;
    color: #0369a1;
    margin-bottom: 0.5rem;
    font-weight: 600;
}
.public-hero-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: #0c4a6e;
    margin: 0 0 1rem;
}
.public-hero-lede {
    font-size: 1.125rem;
    color: #334155;
    margin: 0 0 1.75rem;
    line-height: 1.6;
}
.public-hero-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}
.public-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto 3rem;
    padding: 0 1rem;
}
.public-feature {
    padding: 1.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    background: #ffffff;
}
.public-feature h3 {
    color: #0c4a6e;
    margin: 0 0 0.5rem;
    font-size: 1.125rem;
}
.public-feature p {
    margin: 0;
    color: #475569;
    line-height: 1.55;
}

/* ---------- Breadcrumbs (rendered by BreadcrumbsViewComponent) ----------
   Full-width strip below the top navbar. Suppressed by the component on
   auth pages, top-level dashboards, and any trail with <= 1 segment, so
   the bar never shows up "empty". */
.breadcrumb-nav {
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}
.breadcrumb-nav .breadcrumb-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0.625rem 1rem;
}
.breadcrumb-nav .breadcrumb {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.3;
    color: var(--gray-600);
}
.breadcrumb-nav .breadcrumb-item {
    display: inline-flex;
    align-items: center;
}
.breadcrumb-nav .breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    margin-right: 0.5rem;
    color: var(--gray-400);
}
.breadcrumb-nav .breadcrumb-item a {
    color: var(--gray-600);
    text-decoration: none;
    border-radius: var(--radius-sm);
    padding: 0.125rem 0.25rem;
    margin: -0.125rem -0.25rem;
}
.breadcrumb-nav .breadcrumb-item a:hover,
.breadcrumb-nav .breadcrumb-item a:focus-visible {
    color: var(--primary-600);
    text-decoration: underline;
    outline: none;
}
.breadcrumb-nav .breadcrumb-item.active {
    color: var(--gray-800);
    font-weight: 500;
}

/* ==========================================================================
   Login / Auth split layout
   Two-column shell: form on the left, RTI Grant Manager blurb on the right.
   Mobile: stacks vertically with the form first.
   ========================================================================== */
.auth-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: calc(100vh - 60px);
    background: var(--gray-50);
}

.auth-split__form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.5rem, 4vw, 4rem) clamp(1rem, 4vw, 3rem);
    background: #fff;
}

.auth-split__form-inner {
    width: 100%;
    max-width: 26rem;
    margin: 0 auto;
}

.auth-split__form-inner h1 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: var(--gray-900);
}

.auth-split__form-inner .auth-tagline {
    color: var(--gray-600);
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.auth-split__form-inner .auth-blurb {
    color: var(--gray-600);
    margin-bottom: 1.75rem;
    font-size: 0.85rem;
    line-height: 1.5;
}

.auth-split__form-inner .auth-meta {
    margin-top: 1.5rem;
    font-size: 0.875rem;
}

.auth-split__form-inner .auth-meta p { margin-bottom: 0.4rem; }

.auth-split__panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 3.5rem);
    color: #fff;
    background:
        linear-gradient(135deg, var(--primary-700) 0%, var(--primary-600) 60%, var(--primary-500) 100%);
    position: relative;
    overflow: hidden;
}

.auth-split__panel::after {
    content: '';
    position: absolute;
    inset: -20% -10% auto auto;
    width: 60%;
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(255,255,255,0.10), transparent 70%);
    pointer-events: none;
}

.auth-split__panel-inner {
    max-width: 30rem;
    position: relative;
    z-index: 1;
}

.auth-split__brand {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.85;
    margin-bottom: 0.75rem;
}

.auth-split__panel h2 {
    color: #fff;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    line-height: 1.2;
    margin-bottom: 1rem;
    font-weight: 700;
}

.auth-split__panel p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
    color: rgba(255,255,255,0.92);
}

.auth-split__features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
    display: grid;
    gap: 0.6rem;
}

.auth-split__features li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 0.95rem;
    color: rgba(255,255,255,0.95);
}

.auth-split__features svg {
    flex-shrink: 0;
    margin-top: 2px;
    width: 18px;
    height: 18px;
    color: var(--primary-50);
}

.auth-split__panel-footer {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255,255,255,0.18);
    font-size: 0.8rem;
    color: rgba(255,255,255,0.75);
}

@media (max-width: 900px) {
    .auth-split { grid-template-columns: 1fr; min-height: auto; }
    .auth-split__panel { order: 2; padding: 2.25rem 1.5rem; }
    .auth-split__form  { order: 1; padding: 2.25rem 1.5rem; }
    .auth-split__panel h2 { font-size: 1.5rem; }
}

/* ---------- /Identity/Account/Manage shell ---------- */
.manage-page {
    max-width: 720px;
}

.manage-page-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--gray-900);
    letter-spacing: -0.01em;
    margin-bottom: 0.25rem;
}

.manage-page-subtitle {
    font-size: 0.9rem;
}

.manage-card {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.manage-card .card-header {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.manage-tabs {
    border-bottom: 1px solid var(--gray-200);
    margin: 0 -1.5rem;
    padding: 0 1.5rem;
}

.manage-tabs .nav-link {
    color: var(--gray-600);
    font-weight: 500;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.625rem 1rem;
    margin-right: 0.25rem;
    border-radius: 0;
    background: transparent;
}

.manage-tabs .nav-link:hover {
    color: var(--primary-600);
    background: transparent;
    border-bottom-color: var(--gray-200);
}

.manage-tabs .nav-link.active {
    color: var(--primary-700);
    background: transparent;
    border-bottom-color: var(--primary-500);
}

.manage-card-body {
    padding: 1.75rem 1.5rem;
}

.manage-section-title {
    color: var(--gray-900);
    font-weight: 600;
}

.manage-form .form-control,
.manage-form .form-select {
    border-radius: var(--radius-md);
}

.manage-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.manage-form-actions .btn {
    min-width: 9rem;
}