/* ============================================================
   TransferTed — site.css
   Page/feature-specific styles only.
   Global design tokens live in transferted-theme.css.
   ============================================================ */

/* ── Global page loader — EPIC dual-orbit (TransferTed Sage green) ── */
#mv-page-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(16, 16, 16, 0.84);          /* charcoal scrim */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .26s ease-in-out, visibility .26s ease-in-out;
    overflow: hidden;
}
#mv-page-loader.active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}
body.has-active-loader { overflow: hidden; }

/* Animated brand-tinted glow behind the card */
.app-loader__scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 18%, rgba(0, 214, 57, 0.13), transparent 45%),
        radial-gradient(circle at 88% 16%, rgba(4, 120, 87, 0.15), transparent 46%),
        radial-gradient(circle at 82% 82%, rgba(255, 255, 255, 0.05), transparent 42%);
    animation: app-loader-scrim 7s ease-in-out infinite alternate;
}
@keyframes app-loader-scrim {
    0%   { transform: scale(1);    opacity: 0.5; }
    100% { transform: scale(1.04); opacity: 0.72; }
}

/* Frosted-glass card */
.app-loader__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.75rem;
    width: min(340px, 90vw);
    padding: 2.75rem 3.25rem;
    border-radius: 1.75rem;
    background: rgba(18, 26, 20, 0.55);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    color: #fff;
    text-align: center;
}

/* Dual counter-rotating orbits + pulsing spark */
.app-loader__orbits {
    position: relative;
    display: grid;
    place-items: center;
    width: 136px;
    height: 136px;
}
.app-loader__orbit {
    position: absolute;
    display: block;
    inset: 0;
    border-radius: 50%;
    border: 3px solid transparent;
    filter: drop-shadow(0 0 22px rgba(0, 214, 57, 0.45));
    animation: app-loader-spin 1.4s linear infinite;
}
.app-loader__orbit--primary {
    border-top-color: rgba(167, 243, 195, 0.95);    /* light green */
    border-right-color: rgba(0, 214, 57, 0.9);       /* Sage green */
    border-bottom-color: rgba(167, 243, 195, 0.2);
    border-left-color: rgba(4, 120, 87, 0.4);        /* deep green */
}
.app-loader__orbit--secondary {
    inset: 14px;
    border-width: 2px;
    border-top-color: rgba(255, 255, 255, 0.78);
    border-right-color: rgba(4, 120, 87, 0.55);
    border-bottom-color: rgba(255, 255, 255, 0.15);
    border-left-color: rgba(0, 214, 57, 0.35);
    animation-duration: 2.1s;
    animation-direction: reverse;
    filter: drop-shadow(0 0 18px rgba(4, 120, 87, 0.4));
}
.app-loader__spark {
    position: relative;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff, rgba(255, 255, 255, 0.4));
    box-shadow: 0 0 22px rgba(255, 255, 255, 0.65), 0 0 48px rgba(0, 214, 57, 0.6);
    animation: app-loader-pulse 1.6s ease-in-out infinite;
}

.app-loader__message {
    display: flex;
    flex-direction: column;
    align-items: center;          /* stops the flex column stretching the logo's width */
    gap: 0.5rem;
    letter-spacing: 0.02em;
}
.app-loader__logo {
    height: 30px;
    width: auto;
    display: block;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
}
.app-loader__subtitle {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.78);
}

@keyframes app-loader-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes app-loader-pulse {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%      { transform: scale(1.25); opacity: 0.7; }
}

/* ── Hero section (Sage-style) ───────────────────────────── */
.hero-section {
    background: linear-gradient(135deg, var(--mv-fog) 0%, var(--mv-blue-lt) 100%);
    border-radius: var(--bs-border-radius-xl);
    margin-bottom: 2rem;
}

/* Full-bleed home hero — overrides .py-4 from _Layout so it hugs the navbar */
.home-hero {
    background: linear-gradient(135deg, #0F1A12 0%, #1A1A1A 55%, #0F2E18 100%);
    color: #FFFFFF;
    padding: 7.5rem 0 9rem;
    margin: -1.5rem calc(50% - 50vw) 0;
    position: relative;
    overflow: hidden;
}
.home-hero::after {
    content: '';
    position: absolute;
    right: -15%;
    top: -20%;
    width: 680px;
    height: 680px;
    background: radial-gradient(circle, rgba(0,214,57,0.18) 0%, rgba(0,214,57,0) 65%);
    pointer-events: none;
}
.home-hero .hero-eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--mv-blue);
    margin-bottom: 1rem;
}
.home-hero h1 {
    color: #FFFFFF;
    font-weight: 800;
    font-size: clamp(1.75rem, 3.2vw, 2.6rem);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 1.25rem;
}
.home-hero .lead {
    color: rgba(255,255,255,0.78);
    font-size: 1.15rem;
    line-height: 1.6;
    max-width: 620px;
}
.home-hero .btn-primary {
    padding: 0.85rem 1.75rem;
    font-size: 1rem;
}
.home-hero .btn-outline-secondary {
    border-color: rgba(255,255,255,0.3);
    color: #FFFFFF;
    background: transparent;
    padding: 0.85rem 1.75rem;
    font-size: 1rem;
}
.home-hero .btn-outline-secondary:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.5);
    color: #FFFFFF;
}

/* Preview tile that sits alongside the hero copy — mock product visual */
.home-hero-preview {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--bs-border-radius-xl);
    padding: 1.5rem;
    backdrop-filter: blur(12px);
}
.home-hero-preview .preview-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.85rem;
    background: rgba(255,255,255,0.05);
    border-radius: var(--bs-border-radius);
    margin-bottom: 0.5rem;
    font-size: 0.82rem;
}
.home-hero-preview .preview-row:last-child { margin-bottom: 0; }
.home-hero-preview .preview-row .preview-label {
    color: rgba(255,255,255,0.85);
    font-weight: 500;
}
.home-hero-preview .preview-row .preview-arrow { color: rgba(255,255,255,0.35); }
.home-hero-preview .preview-row .preview-target {
    color: var(--mv-blue);
    font-weight: 600;
    font-family: var(--mv-font-mono);
    font-size: 0.78rem;
}
.home-hero-preview .preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.home-hero-preview .preview-header .preview-title {
    color: #FFFFFF;
    font-weight: 600;
    font-size: 0.9rem;
}
.home-hero-preview .preview-header .preview-pill {
    background: rgba(0,214,57,0.15);
    color: var(--mv-blue);
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 50rem;
    letter-spacing: 0.03em;
}

/* Metric strip under hero — numbers on dark background */
.home-metrics {
    background: var(--mv-ink);
    color: rgba(255,255,255,0.75);
    padding: 2.25rem 0;
    margin: 0 calc(50% - 50vw);
    border-top: 1px solid rgba(255,255,255,0.06);
}
.home-metrics .metric-value {
    font-size: 2.5rem;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 0.3rem;
}
.home-metrics .metric-label {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.55);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
}

/* Section heading "chip" that sits above big titles */
.section-chip {
    display: inline-block;
    background: var(--mv-blue-lt);
    color: var(--mv-blue-hover);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.4rem 0.9rem;
    border-radius: 50rem;
    margin-bottom: 1rem;
}

/* Big sage-style feature card */
.feature-tile {
    background: var(--mv-white);
    border: 1px solid var(--mv-silver);
    border-radius: var(--bs-border-radius-lg);
    padding: 2rem;
    height: 100%;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.feature-tile:hover {
    border-color: var(--mv-blue-mid);
    box-shadow: var(--mv-shadow);
    transform: translateY(-3px);
}
.feature-tile .feature-tile-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--bs-border-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.25rem;
}
.feature-tile h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--mv-ink);
}
.feature-tile p {
    color: var(--mv-iron);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}
.feature-tile .feature-tile-link {
    color: var(--mv-blue-hover);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: gap 0.15s;
}
.feature-tile .feature-tile-link:hover { gap: 0.6rem; text-decoration: underline; }

/* How-it-works stepper — numbered pills on a horizontal track */
.step-track {
    position: relative;
    counter-reset: step;
}
.step-track::before {
    content: '';
    position: absolute;
    left: 1.25rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 2px;
    background: var(--mv-silver);
}
.step-item {
    position: relative;
    padding-left: 3.5rem;
    padding-bottom: 2rem;
    counter-increment: step;
}
.step-item:last-child { padding-bottom: 0; }
.step-item::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--mv-blue);
    color: var(--mv-ink);
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 4px var(--mv-snow);
}
.step-item h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
    color: var(--mv-ink);
}
.step-item p {
    color: var(--mv-iron);
    margin-bottom: 0;
    font-size: 0.95rem;
    line-height: 1.55;
}

/* Final dark CTA band */
.home-cta-band {
    background: linear-gradient(135deg, var(--mv-ink) 0%, var(--mv-graphite) 100%);
    color: #FFFFFF;
    padding: 4rem 0;
    margin: 0 calc(50% - 50vw);
    border-radius: 0;
    position: relative;
    overflow: hidden;
}
.home-cta-band::before {
    content: '';
    position: absolute;
    left: -10%;
    bottom: -50%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0,214,57,0.15) 0%, rgba(0,214,57,0) 65%);
    pointer-events: none;
}
.home-cta-band h2 {
    color: #FFFFFF;
    font-weight: 800;
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 1rem;
}
.home-cta-band p {
    color: rgba(255,255,255,0.75);
    font-size: 1.05rem;
    margin-bottom: 0;
}

/* Feature icons (legacy class kept for compatibility) */
.feature-icon {
    width: 64px;
    height: 64px;
    font-size: 1.5rem;
}

/* ── Stat cards ──────────────────────────────────────────── */
.stat-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Footer ──────────────────────────────────────────────── */
.footer {
    margin-top: 3rem;
    background: var(--mv-ink);
    border-top: 1px solid #000000;
    color: rgba(255, 255, 255, 0.7);
}

.footer .text-secondary,
.footer .small,
.footer span {
    color: rgba(255, 255, 255, 0.7) !important;
}

.footer .eyebrow {
    color: rgba(255, 255, 255, 0.55) !important;
}

.footer .text-muted {
    font-size: 0.83rem;
    color: rgba(255, 255, 255, 0.55) !important;
}

/* ── Wizard progress bar ─────────────────────────────────── */
/* Sticky under the dark navbar — `top` uses --mv-navbar-h from transferted-theme.css.
   The bleed margins make the painted band fill the parent column edge-to-edge so
   scrolling content doesn't peek out either side. `position: sticky` is still a
   positioned element, so the absolutely-positioned .wizard-progress-line below
   anchors against this box correctly. */
.wizard-progress {
    position: sticky;
    top: var(--mv-navbar-h, 57px);
    z-index: 1030;
    background: var(--mv-snow);
    padding-top: 1rem;
    padding-bottom: 0.75rem;
    margin-left: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
    margin-right: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    box-shadow: 0 6px 8px -6px rgba(0, 0, 0, 0.08);
}

.wizard-progress-line {
    position: absolute;
    top: 18px;
    /* Each step is 1/N of the width and its circle is centred in its cell, so
       the line must start at the centre of step 1 (50% / N) and end at the
       centre of step N. Using a CSS custom property set by the Razor partial
       (--wizard-step-count) keeps this correct for any step count. */
    left: calc(50% / var(--wizard-step-count, 8));
    right: calc(50% / var(--wizard-step-count, 8));
    height: 2px;
    background-color: var(--mv-silver);
    z-index: 0;
}

.wizard-step-item {
    flex: 1;
    position: relative;
    z-index: 1;
}

.wizard-step-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
}

.wizard-step-label {
    font-size: 0.78rem;
    margin-top: 4px;
    color: var(--mv-iron);
}

/* Compact circles when there are many steps (Phase 2: 14 steps) */
.wizard-progress.wizard-compact .wizard-step-circle {
    width: 26px;
    height: 26px;
    font-size: 0.72rem;
}
.wizard-progress.wizard-compact .wizard-progress-line {
    top: 13px;
}
.wizard-progress.wizard-compact .wizard-step-label {
    font-size: 0.65rem;
}

/* ── Track selection card ────────────────────────────────── */
.track-card {
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.track-card:hover {
    border-color: var(--mv-blue) !important;
}

/* ── Collapsible section headers (Migrate/DryRun pages) ── */
/* Any element with class `section-collapse-toggle` can be clicked to
   toggle a Bootstrap `.collapse` body via data-bs-target. The chevron
   rotates to signal state. */
.section-collapse-toggle[aria-expanded="true"] .section-chevron {
    transform: rotate(90deg);
}

/* ── Login page (dark theme matching home hero) ─────────── */
.login-hero {
    background: linear-gradient(135deg, #0F1A12 0%, #1A1A1A 55%, #0F2E18 100%);
    color: #FFFFFF;
    padding: 6rem 0 8rem;
    margin: -1.5rem calc(50% - 50vw) -1.5rem;
    min-height: calc(100vh - 72px);
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.login-hero::after {
    content: '';
    position: absolute;
    right: -20%;
    top: -30%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0,214,57,0.14) 0%, rgba(0,214,57,0) 65%);
    pointer-events: none;
}

.login-subtitle {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 400;
}

.login-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--bs-border-radius-xl);
    padding: 2rem 2rem 1.75rem;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.login-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0.4rem;
}

.login-input {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
    color: #FFFFFF !important;
    border-radius: var(--bs-border-radius) !important;
    padding: 0.6rem 0.9rem !important;
    font-size: 0.95rem !important;
}
.login-input::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
}
.login-input:focus {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: var(--mv-blue) !important;
    box-shadow: 0 0 0 3px rgba(0, 214, 57, 0.2) !important;
    color: #FFFFFF !important;
}

/* Autofill override so browser-prefilled inputs stay dark */
.login-input:-webkit-autofill,
.login-input:-webkit-autofill:hover,
.login-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #FFFFFF !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(26, 26, 26, 0.95) inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

.login-check .form-check-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.88rem;
}
.login-check .form-check-input {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
}
.login-check .form-check-input:checked {
    background-color: var(--mv-blue);
    border-color: var(--mv-blue);
}

.login-btn {
    padding: 0.7rem 1.5rem !important;
    font-size: 1rem !important;
    border-radius: var(--bs-border-radius) !important;
    margin-top: 0.5rem;
}

.login-footer-links {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.login-link {
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    transition: color 0.15s;
}
.login-link:hover { color: #FFFFFF; }
.login-link-separator { color: rgba(255, 255, 255, 0.25); }
.login-link-accent {
    color: var(--mv-blue);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s;
}
.login-link-accent:hover { color: var(--mv-blue-hover); text-decoration: underline; }

/* Validation messages on dark bg */
.login-card .text-danger { color: #FCA5A5 !important; }
.login-card .alert-danger {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #FCA5A5;
    border-left-color: var(--mv-danger);
}

/* ── AI Advisor chat widget ──────────────────────────────── */
.chat-widget {
    width: 400px;
    max-width: calc(100vw - 32px);
    height: 600px;
    max-height: calc(100vh - 128px);
    background: #FFFFFF;
    border-radius: var(--bs-border-radius-xl);
    box-shadow: var(--mv-shadow-lg), 0 20px 50px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--mv-silver);
}

.chat-widget-header {
    background: var(--mv-ink);
    color: #FFFFFF;
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.chat-widget-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 214, 57, 0.18);
    color: var(--mv-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.chat-widget-title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    color: #FFFFFF;
}

.chat-widget-status {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.55);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    line-height: 1.2;
    margin-top: 0.15rem;
}

.chat-widget-status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mv-blue);
    box-shadow: 0 0 0 0 rgba(0, 214, 57, 0.55);
    animation: chat-pulse 2s ease infinite;
}

@keyframes chat-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 214, 57, 0.55); }
    50%      { box-shadow: 0 0 0 5px rgba(0, 214, 57, 0); }
}

.chat-widget-header .btn-close {
    opacity: 0.7;
    padding: 0.4rem;
}
.chat-widget-header .btn-close:hover { opacity: 1; }

.chat-widget-messages {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.25rem;
    background: var(--mv-snow);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.chat-widget-messages::-webkit-scrollbar { width: 6px; }
.chat-widget-messages::-webkit-scrollbar-track { background: transparent; }
.chat-widget-messages::-webkit-scrollbar-thumb {
    background: var(--mv-silver);
    border-radius: 3px;
}
.chat-widget-messages::-webkit-scrollbar-thumb:hover { background: var(--mv-slate); }

.chat-widget-empty {
    text-align: center;
    padding: 2.5rem 1rem 1rem;
    color: var(--mv-ink);
}
.chat-widget-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--mv-blue-lt);
    color: var(--mv-blue-hover);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

/* A single chat row (avatar + bubble + meta) */
.chat-msg {
    display: flex;
    gap: 0.6rem;
    max-width: 100%;
    animation: chat-fade-in 0.25s ease;
}
@keyframes chat-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.chat-msg-assistant { justify-content: flex-start; }
.chat-msg-user      { justify-content: flex-end; }

.chat-msg-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--mv-ink);
    color: var(--mv-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.chat-msg-content {
    display: flex;
    flex-direction: column;
    max-width: 78%;
}
.chat-msg-user .chat-msg-content { align-items: flex-end; }

.chat-bubble {
    padding: 0.7rem 0.95rem;
    border-radius: 16px;
    font-size: 0.9rem;
    line-height: 1.55;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
}

.chat-msg-assistant .chat-bubble {
    background: #FFFFFF;
    color: var(--mv-ink);
    border: 1px solid var(--mv-silver);
    border-top-left-radius: 4px;
    box-shadow: var(--mv-shadow-sm);
}

.chat-msg-user .chat-bubble {
    background: var(--mv-blue);
    color: var(--mv-ink);
    border-top-right-radius: 4px;
    font-weight: 500;
}

/* Markdown rendering inside bubbles */
.chat-bubble strong { font-weight: 700; color: inherit; }
.chat-bubble em { font-style: italic; }
.chat-bubble code {
    background: var(--mv-fog);
    color: var(--mv-ink);
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    font-size: 0.82em;
    font-family: var(--mv-font-mono);
}
.chat-msg-user .chat-bubble code {
    background: rgba(0, 0, 0, 0.12);
}
.chat-bubble ul,
.chat-bubble ol {
    padding-left: 1.15rem;
    margin: 0.5rem 0;
}
.chat-bubble ul li,
.chat-bubble ol li { margin-bottom: 0.25rem; }
.chat-bubble p { margin: 0 0 0.5rem; }
.chat-bubble p:last-child { margin-bottom: 0; }
.chat-bubble a {
    color: var(--mv-blue-hover);
    text-decoration: underline;
    font-weight: 600;
}
.chat-msg-user .chat-bubble a { color: var(--mv-ink); }

.chat-msg-meta {
    font-size: 0.68rem;
    color: var(--mv-mist);
    margin-top: 0.3rem;
    padding: 0 0.15rem;
}

/* Typing indicator (three animated dots in an assistant bubble) */
.chat-typing {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
    padding: 0.3rem 0;
}
.chat-typing-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mv-mist);
    animation: chat-typing-bounce 1.3s ease infinite;
}
.chat-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.chat-typing-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes chat-typing-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30%           { transform: translateY(-4px); opacity: 1; }
}

/* Input area */
.chat-widget-input {
    padding: 0.85rem 1rem 1rem;
    background: #FFFFFF;
    border-top: 1px solid var(--mv-silver);
    flex-shrink: 0;
}

.chat-widget-composer {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}

.chat-widget-textbox {
    flex: 1;
    border: 1.5px solid var(--mv-silver);
    border-radius: 999px;
    padding: 0.55rem 1rem;
    font-size: 0.9rem;
    background: var(--mv-snow);
}
.chat-widget-textbox:focus {
    background: #FFFFFF;
    border-color: var(--mv-blue);
    box-shadow: 0 0 0 3px rgba(0, 214, 57, 0.15);
}

.chat-widget-send {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
}
.chat-widget-send i { font-size: 1rem; line-height: 1; }

.chat-widget-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.4rem;
    min-height: 0.9rem;
}
.chat-widget-footer small { color: var(--mv-mist); font-size: 0.72rem; }

/* Responsive — on narrow viewports the widget fills the screen bottom */
@media (max-width: 520px) {
    .chat-widget {
        width: calc(100vw - 16px);
        height: calc(100vh - 96px);
        right: 8px !important;
        bottom: 80px !important;
    }
    #chatWidgetToggle {
        right: 16px !important;
        bottom: 16px !important;
    }
}

/* ── Mapping: additional-target rows ─────────────────────── */
/* When a single Sage source field is mapped to multiple Intacct target fields,
   the secondary mappings render as indented rows directly under the primary row. */
.mapping-row.additional-target-row > td:first-child {
    padding-left: 1.75rem;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.02), transparent 60%);
}
.mapping-row.additional-target-row {
    background-color: rgba(0, 0, 0, 0.015);
}
.mapping-row.additional-target-row .bi-arrow-return-right {
    font-size: 0.85rem;
}

/* ── Take-On page: green active sub-step pills ─────────────────────────────
   Default Bootstrap nav-pills .nav-link.active is bg-primary (blue). The
   Take-On wizard uses three sub-step pills (Inputs / Preview / Post / Done)
   shared across all three phases — render them green to match the success
   chrome the consultant sees throughout the take-on flow. Scoped to
   #subStepPills so other pages' nav-pills stay default-blue. */
#subStepPills .nav-link.active,
#subStepPills .nav-link.active:hover,
#subStepPills .nav-link.active:focus {
    background-color: var(--bs-success, #198754);
    color: #fff;
}
#subStepPills .nav-link {
    color: var(--bs-success, #198754);
}
#subStepPills .nav-link:hover:not(.active) {
    color: #fff;
    background-color: rgba(25, 135, 84, 0.85);
}

/* ── Take-On Preview: collapsible month cards ──────────────────────────────
   Per-month TB cards collapse on load so the consultant scans the row
   summary first, then expands the months they want to drill into. The
   chevron rotates 90° when its card is expanded. */
#monthsContainer .card-header[role="button"],
#grandTotalContainer .card-header[role="button"] {
    cursor: pointer;
    user-select: none;
}
.tk-chevron {
    display: inline-block;
    transition: transform 0.15s ease-in-out;
    margin-right: 0.4rem;
}
.card-header[aria-expanded="true"] .tk-chevron {
    transform: rotate(90deg);
}
/* Configure step — module card toggle (the toggle is a button, not the header,
   so the Run button can sit beside it without toggling the collapse). */
.cfg-mod-toggle[aria-expanded="true"] .tk-chevron {
    transform: rotate(90deg);
}
/* Configure step — live run loader. The left column shows a SHORT label (a few
   words — "what's being changed"), so it no longer needs to truncate; the full
   question is on hover (title). The value column gets the remaining width and
   wraps, so long Intacct values ("GL8415000--Nedbank … (ZAR)") are never cut. */
.cfg-live-qwrap {
    flex: 0 0 14rem;
    max-width: 14rem;
    font-weight: 500;
}
.cfg-live-q {
    overflow-wrap: anywhere;
}
.cfg-live-val {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ── Mapping page — Core / Advanced section headers ───────────────────────
   Two-tier grouping on the Field Mapping step. The section card wraps the
   per-entity cards underneath. Section card uses a stronger frame + a tinted
   header strip so it visually contains the entity cards instead of looking
   like another sibling. Entity cards inside drop their own outer border to
   avoid double-bordering. */
.mapping-section-card {
    border: 1px solid var(--mv-silver, #c7cdd4);
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    background: #fbfcfd;
    overflow: hidden;
}
.mapping-section-header {
    user-select: none;
    transition: background-color 100ms ease;
    background: linear-gradient(180deg, #eef2f6 0%, #e6ebf1 100%) !important;
    border-bottom: 1px solid var(--mv-silver, #c7cdd4);
    padding: 0.85rem 1rem;
    position: relative;
}
.mapping-section-header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--mv-success, #16a34a);
}
.mapping-section-card[data-section="advanced"] .mapping-section-header::before {
    background: var(--mv-blue, #2563eb);
}
.mapping-section-card[data-section="other"] .mapping-section-header::before {
    background: var(--mv-iron, #6b7280);
}
.mapping-section-header:hover { background: linear-gradient(180deg, #e6ebf1 0%, #dde3eb 100%) !important; }
.mapping-section-header .fw-bold { font-size: 1rem !important; letter-spacing: 0.01em; }
.mapping-section-chevron {
    display: inline-block;
    transition: transform 0.2s ease;
    color: var(--mv-iron, #6b7280);
    margin-right: 0.5rem;
    font-size: 1rem;
}
.mapping-section-header.collapsed .mapping-section-chevron {
    transform: rotate(-90deg);
}
/* Entity cards nested inside a section card lose their outer border —
   the section card already provides the frame. Padding adds breathing
   room between the section header and the first entity card. */
.mapping-section-card > .collapse > .mapping-entity-card,
.mapping-section-card > .collapse.show > .mapping-entity-card {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0 !important;
}
.mapping-section-card > .collapse > .mapping-entity-card:not(:last-child) {
    border-bottom: 1px solid #eef0f3;
}
.mapping-section-card > .collapse {
    background: #ffffff;
}

/* Role + Permission review screen */
.rpr-page { padding-bottom: 72px; }
.rpr-footer {
    position: sticky;
    bottom: 0;
    z-index: 5;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, .05);
}
.rpr-role .rpr-rights { white-space: nowrap; }

/* Role review — collapsible role cards */
.rpr-role-head { cursor: pointer; background: #fff; }
.rpr-role-head:hover { background: #f8f9fa; }
.rpr-chev { transition: transform .15s ease; display: inline-block; }
.rpr-chev-open { transform: rotate(90deg); }

/* ── Master Data Migration Records table (Jun 2026 toolbar + filtering) ── */
.records-search {
    position: relative;
    flex: 1 1 260px;
    max-width: 360px;
}
.records-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mv-iron, #6c757d);
    font-size: .8rem;
    pointer-events: none;
}
.records-search input {
    padding-left: 30px;
}
.records-entity-filter {
    width: auto;
    min-width: 180px;
    max-width: 260px;
}

/* Scrollable body with a sticky header — pagination + column names stay
   visible no matter how many rows the page size allows. */
.records-scroll {
    max-height: 60vh;
    overflow-y: auto;
}
.records-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    box-shadow: inset 0 -1px 0 var(--bs-border-color, #dee2e6);
    white-space: nowrap;
}

/* Sortable headers — pointer + hover affordance + room for the indicator. */
.records-sortable {
    cursor: pointer;
    user-select: none;
}
.records-sortable:hover {
    background: #f8f9fa;
}
.records-sortable .sort-indicator {
    display: inline-block;
    width: .9em;
    color: var(--mv-blue, #0d6efd);
}
.records-sortable:focus-visible {
    outline: 2px solid var(--mv-blue, #0d6efd);
    outline-offset: -2px;
}

/* Long Intacct error messages truncate with the full text on hover (title). */
.records-table td.records-msg {
    max-width: 420px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.records-status-tabs .nav-link {
    padding-top: .4rem;
    padding-bottom: .4rem;
}
.records-footer {
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}

/* ──────────────────────────────────────────────────────────────────────
   Discovery tabs — primary tab blocks + CoA segmented sub-control.
   Scoped to the two existing IDs on Discovery.cshtml so other nav-tabs
   in the app are untouched. Hooks (active / disabled classes, data-*
   attributes) are unchanged — discovery-tabs.js keeps working.
   ────────────────────────────────────────────────────────────────────── */

/* ── Top row — primary tab blocks ─────────────────────────────────── */
#discoveryTabs.nav-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 12px;
    margin-bottom: 16px;
}

#discoveryTabs.nav-tabs .nav-item {
    margin-bottom: 0;
}

#discoveryTabs.nav-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 18px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #ffffff;
    color: #1f2937;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0.1px;
    transition: background-color 120ms ease, border-color 120ms ease,
                color 120ms ease, box-shadow 120ms ease;
}

#discoveryTabs.nav-tabs .nav-link:hover:not(.active):not(.disabled) {
    background: #f7f9fc;
    border-color: #22c55e;
    color: #111111;
}

#discoveryTabs.nav-tabs .nav-link.active {
    background: #22c55e;
    border-color: #1ea34a;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(34, 197, 94, 0.25),
                inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

#discoveryTabs.nav-tabs .nav-link.disabled,
#discoveryTabs.nav-tabs .nav-link[aria-disabled="true"] {
    background: #f3f4f6;
    border-color: #e5e7eb;
    color: #9ca3af;
    cursor: not-allowed;
}

#discoveryTabs.nav-tabs .nav-link:focus-visible {
    outline: 2px solid #22c55e;
    outline-offset: 2px;
}

/* ── CoA sub-row — segmented pill control ─────────────────────────── */
#discoveryCoaSubTabs.nav-pills {
    display: inline-flex;
    gap: 2px;
    padding: 4px;
    margin-left: 12px;     /* indent — reads as "child of CoA above" */
    background: #f7f9fc;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    width: auto;
    align-self: flex-start;
}

#discoveryCoaSubTabs.nav-pills .nav-item {
    margin: 0;
}

#discoveryCoaSubTabs.nav-pills .nav-link {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 16px;
    background: transparent;
    border-radius: 999px;
    color: #374151;
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
    transition: background-color 120ms ease, color 120ms ease;
}

#discoveryCoaSubTabs.nav-pills .nav-link:hover:not(.active):not(.disabled) {
    background: rgba(34, 197, 94, 0.08);
    color: #111111;
}

#discoveryCoaSubTabs.nav-pills .nav-link.active {
    background: #22c55e;
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(34, 197, 94, 0.30);
}

#discoveryCoaSubTabs.nav-pills .nav-link.disabled,
#discoveryCoaSubTabs.nav-pills .nav-link[aria-disabled="true"] {
    color: #9ca3af;
    cursor: not-allowed;
}

#discoveryCoaSubTabs.nav-pills .nav-link:focus-visible {
    outline: 2px solid #22c55e;
    outline-offset: 2px;
}

/* ──────────────────────────────────────────────────────────────────────
   Master Data Sign-Off — sub-group heading rows
   ────────────────────────────────────────────────────────────────────── */
.signoff-group-heading > td {
    background: #f7f9fc;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    padding: 10px 12px;
    letter-spacing: 0.5px;
}
.signoff-group-heading:hover > td {
    background: #f7f9fc;  /* suppress Bootstrap's row-hover tint on heading rows */
}

/* ── Collapsible config sub-groups (Client Analysis → Config) ───────────── */
.ca-config-subgroup {
    margin-bottom: 0.75rem;
}
.ca-subgroup-toggle {
    background: #e7f1ff;                 /* light blue — matches the Config accent */
    border: 1px solid #cfe2ff;
    border-left: 4px solid #0d6efd;
    border-radius: 0.375rem;
    padding: 0.45rem 0.7rem;
    color: #0a58ca;
    text-align: left;
    cursor: pointer;
}
.ca-subgroup-toggle:hover  { background: #d6e7ff; }
.ca-subgroup-toggle:focus  { box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15); outline: none; }
.ca-subgroup-title {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: 0.78rem;
}
.ca-subgroup-chevron {
    transition: transform 0.15s ease;
    font-size: 0.72rem;
}
.ca-subgroup-toggle.collapsed .ca-subgroup-chevron {
    transform: rotate(-90deg);
}
.ca-subgroup-count {
    background: #0d6efd;
    color: #fff;
    font-weight: 600;
}
.ca-config-subgroup-body {
    padding: 0.55rem 0 0.15rem 0.5rem;
}
/* Region flag ("not typically needed in <country>") — a France/Statutory config
   question that doesn't apply to the client's country renders collapsed: only the
   question text + muted badge + "Configure anyway" toggle show. Never hard-hidden. */
.ca-config-row.ca-region-collapsed .ca-config-body,
.ca-config-row.ca-region-collapsed .ca-config-leaveasis,
.ca-config-row.ca-region-collapsed .ca-impact-toggle {
    display: none;
}
.ca-config-row[data-region-na="true"] {
    opacity: 0.85;
}
.ca-region-toggle .ca-chevron {
    transition: transform 0.15s ease;
    font-size: 0.72rem;
}
.ca-region-toggle.ca-region-open .ca-chevron {
    transform: rotate(90deg);
}
/* Config question number — bigger + blue, matching the sub-group headers. */
.ca-question-num {
    background: #0d6efd;
    color: #fff;
    font-weight: 600;
    font-size: 0.82rem;
    min-width: 1.65rem;
    padding: 0.32rem 0.42rem;
    border-radius: 0.375rem;
}

/* ── Live Intacct config-scrape loader (Client Analysis → Config) ───────── */
.ca-scan-overlay {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(2, 6, 23, 0.55);
    backdrop-filter: blur(2px);
}
.ca-scan-card {
    width: 24rem;
    max-width: 92vw;
    padding: 1.75rem 2.25rem;
    text-align: center;
    color: #e5e7eb;
    background: #111827;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 1rem;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
.ca-scan-ring { margin-bottom: 0.75rem; }
.ca-scan-ring .spinner-border { width: 3rem; height: 3rem; border-width: 0.28rem; }
.ca-scan-brand { font-weight: 700; font-size: 1.15rem; letter-spacing: 0.2px; }
.ca-scan-phase { margin-top: 0.35rem; font-size: 0.85rem; color: #9ca3af; }
.ca-scan-current {
    margin: 0.35rem 0 0.9rem;
    min-height: 1.4em;
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff;
}
.ca-scan-progress {
    height: 0.5rem;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 1rem;
}
.ca-scan-progress .progress-bar { transition: width 0.4s ease; }
.ca-scan-count { margin-top: 0.55rem; font-size: 0.8rem; color: #9ca3af; }


/* ──────────────────────────────────────────────────────────────────────
   Master Data progress — per-entity bar rows.
   One shared shape for the Razor-rendered rows (Views/Migrate/MasterData.cshtml)
   and the rows migrate.js creates on the fly for passes the server did not
   render — keep these classes in sync with BOTH builders.
   ────────────────────────────────────────────────────────────────────── */
#entityProgressList .ep-label {
    min-width: 130px;
    color: var(--mv-iron);
}
#entityProgressList .ep-progress {
    height: 6px;
}
#entityProgressList .ep-counts {
    min-width: 60px;
    text-align: right;
    color: var(--mv-iron);
}
#entityProgressList .ep-icon {
    min-width: 16px;
}
/* Pending rows — derived passes (Price Lists, Customer Price List Assignment,
   Opening Stock) whose workload is only known once the run reaches their
   phase. Muted "waiting…" until the first total/outcome arrives via polling. */
#entityProgressList .ep-pending .ep-label,
#entityProgressList .ep-pending .ep-counts {
    opacity: 0.6;
}
#entityProgressList .ep-pending .ep-counts {
    font-style: italic;
}
/* ── Dashboard: pre-work + go-live job pairing ────────────────────────────
   A migration is two linked jobs. They are two rows, but they must read as
   one engagement — an accent rail down the left ties them together, and the
   go-live row is indented under its parent. DataTables' fixed pre-sort keeps
   them adjacent under any sort; this is only the visual half. */
#jobsTable tbody tr.job-row-parent > td:first-of-type,
#jobsTable tbody tr.job-row-child > td:first-of-type {
    border-left: 3px solid transparent;
}
#jobsTable tbody tr.job-row-child > td:first-of-type {
    padding-left: 1.75rem;
}
/* Rail only on rows that actually have a partner — a lone pre-work job
   should look like every other row, not like half of a broken pair. */
#jobsTable tbody tr.job-row-paired > td:first-of-type,
#jobsTable tbody tr.job-row-child > td:first-of-type {
    border-left-color: var(--mv-blue, #378ADD);
}
#jobsTable tbody tr.job-row-child {
    background-color: rgba(55, 138, 221, 0.035);
}

/* ── Go-Live lockdown (Aug 2026): carried-decision surfaces render view-only.
   Applied by Discovery.cshtml to the Structure / CoA / Master Data / Banking
   panes, and by the DedupeReview / CoaConsolidationReview pages, on a Cutover
   job. This layer is cosmetic — CutoverCarriedGuardFilter refuses the writes
   server-side regardless. Text and search inputs stay live (filtering is
   reading); Ask Ted and collapse / drawer / modal toggles stay live. */
.carried-readonly button:not(.ask-ted-why):not([data-bs-toggle]):not([data-readonly-safe]),
.carried-readonly input[type="submit"],
.carried-readonly input[type="checkbox"],
.carried-readonly input[type="radio"],
.carried-readonly select,
.carried-readonly .choice-card,
.carried-readonly [data-edition-id],
.carried-readonly .resolve-doc-conflict {
    pointer-events: none;
    opacity: .55;
}
/* The banner itself must not inherit the greying. */
.carried-readonly .carried-readonly-banner {
    opacity: 1;
}

/* ── notify() toast stack (client-analysis.js) ───────────────────────────────
   A save the server REFUSED must be visible, not console-only. Errors persist
   until dismissed; success auto-clears. Above modals (BS modal = 1055). */
.ted-toast-stack {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1085;
    width: min(46rem, calc(100vw - 2rem));
    display: flex;
    flex-direction: column;
    gap: .5rem;
    pointer-events: none;
}
.ted-toast-stack > .alert {
    pointer-events: auto;
    margin: 0;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .18);
}

/* ── Company logo upload (Client Analysis → Company → logo slots) ───────────
   The preview tiles show the image on a chequerboard so a transparent logo
   reads as transparent rather than as a white rectangle — Intacct's print and
   co-branding slots are usually transparent PNGs, and "white box vs alpha" is
   exactly the difference a consultant needs to SEE before it reaches a client
   invoice. Fixed height, auto width: the two slot shapes are 216x43 (wide) and
   300x300 (square) and both must sit in the same row without reflowing it. */
.ca-logo-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 7.5rem;
    height: 4rem;
    padding: .25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #eceff1 25%, transparent 25%),
        linear-gradient(-45deg, #eceff1 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #eceff1 75%),
        linear-gradient(-45deg, transparent 75%, #eceff1 75%);
    background-size: 12px 12px;
    background-position: 0 0, 0 6px, 6px -6px, -6px 0;
    overflow: hidden;
}

.ca-logo-preview img {
    max-height: 3.5rem;
    max-width: 12rem;
    object-fit: contain;
}

.ca-logo-preview.is-empty {
    background-image: none;
    background-color: var(--bs-tertiary-bg);
    border-style: dashed;
}

.ca-logo-empty-text {
    font-size: .75rem;
    color: var(--bs-secondary-color);
}

/* Dialog thumbnails: same chequerboard reasoning, a little larger. */
.ca-logo-thumb {
    max-height: 5rem;
    max-width: 16rem;
    object-fit: contain;
    border: 1px solid var(--bs-border-color);
    border-radius: .25rem;
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #eceff1 25%, transparent 25%),
        linear-gradient(-45deg, #eceff1 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #eceff1 75%),
        linear-gradient(-45deg, transparent 75%, #eceff1 75%);
    background-size: 12px 12px;
    background-position: 0 0, 0 6px, 6px -6px, -6px 0;
    padding: .25rem;
}

/* ============================================================
   Discovery → Inventory — the DECISION BAR (Aug 2026)
   ------------------------------------------------------------
   Three decisions that must be settled before anything is written
   (how stock is valued, the opening-stock cut-off, price lists) used to be
   three unrelated blocks: a white .card, a grey .alert and an amber .alert,
   stacked. They are one bordered panel now, split into equal cells by a
   state rail, so they read as peers and their states line up.

   Namespacing rule: EVERY selector here starts .invbar / .invcell. Nothing
   in this block may use a global class name — site.css loads AFTER
   transferted-theme.css, so a bare .btn or .badge rule here would repaint
   the whole application. Controls and status pills are the house components
   (.form-select.form-select-sm, .badge.bg-*-subtle) precisely so the bar
   matches the per-source cards rendered 200px below it.
   ============================================================ */

.invbar {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    background: var(--mv-white);
    box-shadow: var(--mv-shadow-sm);
    overflow: hidden;
}

.invbar-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    background: var(--mv-fog);
    border-bottom: 1px solid var(--bs-border-color);
    padding: .4rem .9rem;
}

.invbar-title {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--mv-iron);
}

/* The count answers "what is left on this bar" without reading a cell.
   Worded so it cannot be confused with the per-source "outstanding" counts
   further down the page — those are a different question entirely. */
.invbar-count {
    font-size: .78rem;
    font-weight: 600;
    color: var(--mv-graphite);
    display: flex;
    align-items: center;
    gap: .35rem;
}

.invbar-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    display: inline-block;
    flex: 0 0 auto;
}
.invbar-dot-ok   { background: var(--mv-cyan); }
.invbar-dot-warn { background: var(--mv-warning); }
.invbar-sep      { color: var(--mv-slate); }

/* Cells are grid items, so they stretch to equal height on their own — no
   min-height anywhere. margin-top:auto on the foot lands every action button
   on one baseline however long the copy above it runs. */
.invbar-grid          { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.invbar-grid-two      { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.invbar-grid-one      { grid-template-columns: minmax(0, 1fr); }

.invcell {
    padding: .8rem .95rem;
    border-left: 3px solid var(--bs-border-color);
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-width: 0;
    margin: 0;                       /* block 2's cell IS a <form> */
}
/* The rail carries the state. Only "settled" is green: a decision TED has not
   been able to verify is OUTSTANDING, not neutral — drawing "Intacct not read"
   in a quiet grey is how a create-only field gets migrated on a guess. */
.invcell-ok   { border-left-color: var(--mv-cyan); }
.invcell-warn { border-left-color: var(--mv-warning); }
.invcell-bad  { border-left-color: var(--mv-danger); }

.invcell-label {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .5rem;
    flex-wrap: wrap;
}
.invcell-label .form-label {
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--mv-ink);
    margin: 0;
    cursor: pointer;
}

/* Read-only value slot — keeps the price-list cell on the same columnar
   rhythm as the two cells that own a <select>. */
.invcell-value {
    width: 100%;
    font-size: .8rem;
    line-height: 1.2;
    padding: .375rem .6rem;
    border: 1px dashed var(--mv-slate);
    border-radius: var(--bs-border-radius);
    background: var(--mv-snow);
    color: var(--mv-iron);
    display: flex;
    align-items: center;
    gap: .4rem;
    min-height: calc(1.5em + .5rem + 2px);   /* = .form-select-sm */
}
.invcell-value-filled {
    border-style: solid;
    border-color: var(--mv-blue-mid);
    background: var(--mv-blue-lt);
    color: var(--mv-cyan);
    font-weight: 600;
}

/* Consequence copy is never clamped or truncated. The house rule for this
   strip is "name the CONSEQUENCE, not just the fact" (Session-23-Jul-2026);
   an overflow rule that eats the tail of that sentence defeats the rule.
   An uneven cell is cheaper than a half-read warning. */
.invcell-note {
    font-size: .78rem;
    line-height: 1.45;
    color: var(--mv-iron);
    margin: 0;
}

.invcell-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: auto;
    padding-top: .15rem;
    flex-wrap: wrap;
}
.invcell-state {
    font-size: .78rem;
    line-height: 1.3;
    font-weight: 500;
    min-width: 0;
    flex: 1 1 8rem;
}
.invcell-foot .btn { flex: 0 0 auto; }

/* The AJAX result slot for the costing save. It is ALWAYS in the DOM and
   always occupies its own row below the foot, so three lines of red can
   arrive without shoving the shared button baseline. */
.invcell-result { font-size: .78rem; line-height: 1.4; }

/* Below 1200px the bar becomes one column. */
@media (max-width: 1199.98px) {
    .invbar-grid, .invbar-grid-two { grid-template-columns: minmax(0, 1fr); }
    .invcell + .invcell { border-top: 1px solid var(--bs-border-color); }
}

/* 768–1199px: a stacked cell turns on its SIDE into a settings row rather than
   becoming a tall card. Measured: the plain vertical stack cost 566px at
   1100px wide, where the three mismatched blocks this replaced cost ~300px —
   a laptop regression. Sideways, three decisions cost ~300px again.

   The columns are fr-only on purpose: hard px floors here are how a grid
   overflows its container a few pixels before the next breakpoint catches it.
   Anything the cell renders conditionally (the IFRS warning, the
   items-already-written notice, the posted-documents notice, the AJAX result
   slot) has no named area, so it auto-places onto its own full-width row
   underneath — which is exactly where a warning belongs. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .invcell {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr) minmax(0, 1.2fr);
        grid-template-areas:
            "label control foot"
            "label note    foot";
        align-items: start;
        column-gap: 1rem;
        row-gap: .35rem;
    }
    .invcell > .invcell-label {
        grid-area: label;
        flex-direction: column;
        align-items: flex-start;
        gap: .25rem;
    }
    .invcell > .invcell-control { grid-area: control; }
    .invcell > .invcell-notes   { grid-area: note; }
    .invcell > .invcell-foot {
        grid-area: foot;
        flex-direction: column;
        align-items: flex-end;
        text-align: right;
        margin-top: 0;
        padding-top: 0;
        gap: .35rem;
    }
    .invcell > .invcell-foot > .invcell-state { flex: 0 0 auto; }
    /* every unnamed child — the conditional warnings — spans the full row */
    .invcell > .alert,
    .invcell > .invcell-result { grid-column: 1 / -1; }
}