/* ============================================================
   NeuralVantage(TM) Control Plane — Global Styles
   v3.6.0 — RiTek Solutions (https://www.riteksolutions.com)
   ============================================================ */

/* ── CSS Custom Properties ─────────────────────────────────── */
:root {
    --nv-sidebar-width:    300px;
    --nv-sidebar-bg:       #0f172a;
    --nv-sidebar-border:   #1e293b;
    --nv-sidebar-text:     #cbd5e1;
    --nv-sidebar-muted:    #94a3b8;
    --nv-sidebar-strong:   #e2e8f0;
    --nv-sidebar-active:   #38bdf8;
    --nv-brand-primary:    #38bdf8;
    --nv-brand-accent:     #818cf8;
    --nv-topbar-bg:        #ffffff;
    --nv-content-bg:       #f8fafc;
    --nv-card-border:      #e2e8f0;
    /* Status tokens are used only as FOREGROUNDS on white/tinted-light backgrounds (.nv-health-*, .nv-tl-dot-*).
       The old 500-weight values (#22c55e / #ef4444 / #f59e0b / #38bdf8) sat at 2.1–3.8:1 on white — below WCAG AA.
       Darkened to the 600/700 stops of the same palette; every pairing now ≥4.5:1 (worst: warning on #fffbeb = 4.8:1). */
    --nv-success-color:    #15803d;
    --nv-danger-color:     #b91c1c;
    --nv-warning-color:    #b45309;
    --nv-info-color:       #0369a1;
}

/* ── Shell Layout ──────────────────────────────────────────── */
html, body {
    height: 100%;
    margin: 0;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background-color: var(--nv-content-bg);
}

.nv-shell {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

/* ── Sidebar ───────────────────────────────────────────────── */
.nv-sidebar {
    width: var(--nv-sidebar-width);
    min-width: var(--nv-sidebar-width);
    background: var(--nv-sidebar-bg);
    color: var(--nv-sidebar-text);
    height: 100vh;
    overflow-y: auto;
    border-right: 1px solid var(--nv-sidebar-border);
}

.nv-brand { border-bottom: 1px solid var(--nv-sidebar-border); }

/* Dark-background logo shown in the sidebar header */
.nv-brand-logo {
    display: block;
    width: 100%;
    max-width: 190px;
    height: auto;
    object-fit: contain;
}

.nv-brand-sub {
    font-size: 0.65rem;
    color: var(--nv-sidebar-text);
    letter-spacing: 0.04em;
}

/* Light-background logo shown in the top bar */
.nv-topbar-logo {
    height: 28px;
    width: auto;
    object-fit: contain;
}

.nv-divider {
    border-color: var(--nv-sidebar-border);
    margin: 0;
}

.nv-nav-section-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    /* slate-400: a readable muted section label. Was #475569 (slate-600) ≈ 2.5:1 on the #0f172a sidebar — below WCAG. */
    color: var(--nv-sidebar-muted);
    text-transform: uppercase;
}

/* Hotfix 15: explicit three-level sidebar hierarchy.
   1) Functional group (e.g. Build & Orchestrate) is the strongest navigation label.
   2) Catalog-owned subsection (e.g. Agents / Multi-Agent / Workflows) is smaller and muted.
   3) Clickable destinations are compact and indented beneath the subsection. */
.nv-nav-section-label .nv-nav-group-title {
    color: var(--nv-sidebar-strong) !important;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.005em;
    line-height: 1.35;
    padding-block: 0.35rem;
    text-transform: none;
}

.nv-nav-section-label .nv-nav-group-title:hover,
.nv-nav-section-label .nv-nav-group-title:focus-visible {
    color: #f8fafc !important;
}

/* Catalog-owned second-level information architecture. Headings are intentionally non-clickable. */
.nv-nav-subsection-label {
    margin: 0.9rem 0.75rem 0.3rem;
    padding: 0.5rem 0.4rem 0.2rem;
    border-top: 1px solid rgba(148, 163, 184, 0.24);
    color: var(--nv-sidebar-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.25;
    text-transform: uppercase;
}

.nv-nav-subsection-label:first-child {
    margin-top: 0.25rem;
    padding-top: 0.3rem;
    border-top: 0;
}

.nv-nav-subsection-heading {
    display: block;
}

/* Keep the 44px accessible hit target while making destination text visually subordinate to the parent levels. */
.nv-nav-group-items > .nav-item {
    padding-left: 0.7rem;
}

.nv-nav-group-items > .nav-item .nv-nav-link {
    font-size: 0.82rem;
    font-weight: 500;
    padding-left: 0.65rem;
}

/* Muted helper text inside the sidebar / favorites surface (e.g. the "No favorites yet…" empty state) — Bootstrap
   .text-muted is too dark on the dark surface; raise it to the readable slate-400. */
.nv-sidebar .text-muted,
.nv-favorites .text-muted {
    color: var(--nv-sidebar-muted) !important;
}

.nv-nav-link {
    color: var(--nv-sidebar-text) !important;
    border-radius: 6px;
    padding: 0.45rem 0.75rem;
    font-size: 0.875rem;
    transition: background 0.15s, color 0.15s;
}

.nv-nav-link:hover {
    background: #1e293b;
    color: #f1f5f9 !important;
}

.nv-nav-link.active {
    background: #1e3a5f;
    color: var(--nv-brand-primary) !important;
    font-weight: 600;
}

/* Light-context correction: .nv-nav-link is styled for the DARK sidebar (light slate text). When the same
   class is reused inside white cards (Home dashboard: Favorites / Recent resources / Explore tiles), that
   color is illegible (~1.35:1 on white). Inside a card, links use the platform's readable link color
   (#0369a1 — the nv-table-link token, WCAG AA on white) with a light hover instead of the sidebar's dark one. */
.nv-card .nv-nav-link {
    color: #0369a1 !important;
}

.nv-card .nv-nav-link:hover {
    background: #e0f2fe;
    color: #0c4a6e !important;
}

/* Inline info affordance on nav items (tooltip trigger). Dimmed at rest, full-strength on hover/focus.
   At .75 opacity the inherited nav color composites to ~8.9:1 on the dark sidebar and ~3.6:1 inside white
   cards — above the 3:1 non-text minimum for the icon glyph; hover/focus restores full contrast. */
.nv-nav-info {
    opacity: .75;
    font-size: .8em;
    cursor: help;
}

.nv-nav-info:hover,
.nv-nav-info:focus {
    opacity: 1;
}

.nv-sidebar-footer {
    border-top: 1px solid var(--nv-sidebar-border);
    font-size: 0.7rem;
}

/* ── Skip to main content (VWP-1) ─────────────────────────────
   Bootstrap's .visually-hidden-focusable hides the link until focused; when focused we pin it to the top-left so
   keyboard users see a clear, high-contrast target above the shell chrome. */
.nv-skip-link:focus {
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 1080;
    padding: 0.5rem 0.75rem;
    background: var(--nv-brand-primary);
    color: #0f172a;
    border-radius: 0.25rem;
    font-weight: 600;
    text-decoration: none;
}


/* ── Responsive Sidebar Navigation ─────────────────────────── */
.nv-sidebar {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.nv-sidebar .nav {
    display: flex;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

.nv-sidebar .nav-item {
    width: 100%;
    flex: 0 0 auto;
}

.nv-sidebar .nv-brand,
.nv-sidebar .nv-sidebar-footer {
    flex: 0 0 auto;
}

.nv-nav-link {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nv-mobile-menu-button {
    display: none;
}

/* ── Responsive navigation region + drawer (VWP-4) ─────────────
   ONE region (MobileNavigationDrawer) hosts the single server-filtered nav surface and drives all three responsive
   forms from the SAME model: desktop persistent sidebar (icon-only collapse), compact rail, and mobile modal drawer.
   Open/collapse are component-owned classes on .nv-nav-region — presentation, never a second nav authority. */
.nv-nav-region {
    display: flex;
    flex: 0 0 auto;
}

.nv-nav-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* The hosted RbacNavMenu (<nav class="nv-sidebar">) fills the panel below the controls row. */
.nv-nav-panel > .nv-sidebar {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
}

.nv-nav-panel-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    flex: 0 0 auto;
    background: var(--nv-sidebar-bg);
}

/* Target size (WCAG 2.5.5): the drawer/collapse controls and every nav link are comfortable tap targets. */
.nv-collapse-toggle,
.nv-drawer-close {
    color: var(--nv-sidebar-text);
    background: transparent;
    border: 0;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
}

.nv-collapse-toggle:hover,
.nv-drawer-close:hover {
    color: #f1f5f9;
    background: #1e293b;
}

.nv-nav-link {
    min-height: 44px;
}

/* Backdrop and mobile close control exist only in the mobile modal form. */
.nv-drawer-backdrop { display: none; }
.nv-drawer-close { display: none; }

/* ── Desktop / large-compact: persistent sidebar + icon-only collapse ── */
@media (min-width: 769px) {
    .nv-nav-panel {
        height: 100vh;
        height: 100dvh;
    }

    .nv-nav-region.nv-collapsed .nv-sidebar {
        width: 64px;
        min-width: 64px;
    }

    .nv-nav-region.nv-collapsed .nv-nav-link {
        justify-content: center;
    }

    /* Hide labels/decoration in the collapsed rail; the link's title supplies the accessible name/tooltip. */
    .nv-nav-region.nv-collapsed .nv-nav-link span,
    .nv-nav-region.nv-collapsed .nv-nav-section-label,
    .nv-nav-region.nv-collapsed .nv-nav-subsection-label,
    .nv-nav-region.nv-collapsed .nv-brand-sub,
    .nv-nav-region.nv-collapsed .nv-brand-logo,
    .nv-nav-region.nv-collapsed .form-label,
    .nv-nav-region.nv-collapsed .form-select,
    .nv-nav-region.nv-collapsed .nv-nav-link .badge {
        display: none;
    }

    /* Active item stays visibly marked even when collapsed. */
    .nv-nav-region.nv-collapsed .nv-nav-link.active {
        background: #1e3a5f;
    }
}

/* ── Mobile: modal drawer ── */
@media (max-width: 768px) {
    .nv-shell {
        position: relative;
    }

    .nv-nav-region {
        position: fixed;
        inset: 0;
        z-index: 1050;
        pointer-events: none;
    }

    /* Collapse is a desktop affordance; the modal drawer always shows full labels and a close control. */
    .nv-collapse-toggle { display: none; }
    .nv-drawer-close { display: inline-flex; }

    .nv-drawer-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1;
        border: 0;
        background: rgba(15, 23, 42, 0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.18s ease-in-out;
    }

    .nv-nav-panel {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 2;
        width: min(86vw, var(--nv-sidebar-width));
        height: 100vh;
        height: 100dvh;
        transform: translateX(-100%);
        transition: transform 0.18s ease-in-out;
        box-shadow: 0 20px 50px rgba(15, 23, 42, 0.35);
        pointer-events: none;
    }

    /* On mobile the hosted sidebar fills the panel rather than owning its own fixed layer. */
    .nv-nav-panel > .nv-sidebar {
        position: static;
        transform: none;
        width: 100%;
        min-width: 0;
        height: 100%;
        border-right: 0;
    }

    .nv-nav-region.nv-drawer-open { pointer-events: auto; }
    .nv-nav-region.nv-drawer-open .nv-drawer-backdrop { opacity: 1; pointer-events: auto; }
    .nv-nav-region.nv-drawer-open .nv-nav-panel { transform: translateX(0); pointer-events: auto; }

    /* Do not lock body scrolling while the drawer is open (iOS/Safari nested-scroll quirk); the fixed panel and
       inert background already isolate the interaction. */
    body.nv-mobile-nav-open {
        overflow: auto;
    }

    .nv-sidebar .nav {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
        padding-bottom: 1rem;
    }

    .nv-mobile-menu-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        position: relative;
        z-index: 1070;
        min-width: 44px;
        min-height: 44px;
        touch-action: manipulation;
    }

    .nv-main {
        width: 100%;
        min-width: 0;
    }

    .nv-topbar {
        position: relative;
        z-index: 1060;
        min-height: 52px;
        height: auto;
        gap: 0.5rem;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .nv-topbar-title {
        display: inline-block;
        max-width: 44vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
    }

    .nv-content {
        padding: 1rem !important;
    }
}


@supports (height: 100svh) {
    @media (max-width: 768px) {
        .nv-shell,
        .nv-nav-panel {
            height: 100svh;
            max-height: 100svh;
        }
    }
}

/* ── Reduced motion (VWP-4 §3/§8) ──────────────────────────────
   Drawer/collapse/active state is conveyed by layout, opacity and ARIA — never by motion alone — so removing the
   transitions here disables animation without hiding any state. */
@media (prefers-reduced-motion: reduce) {
    .nv-nav-panel,
    .nv-drawer-backdrop,
    .nv-nav-link {
        transition: none !important;
    }
}

@media (max-width: 480px) {
    .nv-topbar .gap-3 {
        gap: 0.5rem !important;
    }

    .nv-topbar small {
        display: none;
    }

    .nv-page-title {
        font-size: 1.25rem;
    }
}


/* ── Main Area ─────────────────────────────────────────────── */
.nv-main {
    overflow: hidden;
}

.nv-topbar {
    background: var(--nv-topbar-bg);
    height: 52px;
    flex-shrink: 0;
}

.nv-topbar-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #334155;
}

.nv-content {
    overflow-y: auto;
    background: var(--nv-content-bg);
}

/* ── Page Headings ─────────────────────────────────────────── */
.nv-page-header {
    margin-bottom: 1.5rem;
}

.nv-page-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.15rem;
}

.nv-page-subtitle {
    font-size: 0.85rem;
    color: #64748b;
}

/* ── Breadcrumbs (VWP-3) ───────────────────────────────────── */
.nv-breadcrumb .breadcrumb {
    --bs-breadcrumb-divider: '/';
    margin-bottom: 0.75rem;
}

.nv-breadcrumb .breadcrumb-item a {
    color: #2563eb;
    text-decoration: none;
}

.nv-breadcrumb .breadcrumb-item a:hover {
    text-decoration: underline;
}

.nv-breadcrumb .breadcrumb-item.active {
    color: #475569;
}

/* ── Metric Cards ──────────────────────────────────────────── */
.nv-metric-card {
    background: #fff;
    border: 1px solid var(--nv-card-border);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    transition: box-shadow 0.15s;
}

.nv-metric-card:hover {
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}

.nv-metric-label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    margin-bottom: 0.35rem;
}

.nv-metric-value {
    font-size: 1.9rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.1;
}

.nv-metric-sub {
    font-size: 0.75rem;
    /* slate-500: #94a3b8 was 2.6:1 on the white metric card — below WCAG for 12px sub-labels. */
    color: #64748b;
    margin-top: 0.25rem;
}

.nv-metric-icon {
    font-size: 1.8rem;
    /* Decorative watermark by design, but darkened + raised from 0.15 so it reads as a deliberate motif
       rather than a rendering artifact (residual-3 closeout). Carries no information. */
    color: #0369a1;
    opacity: 0.3;
}

/* ── Status Badges ─────────────────────────────────────────── */
.nv-badge-success  { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.nv-badge-warning  { background: #fef9c3; color: #854d0e; border: 1px solid #fde68a; }
.nv-badge-danger   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.nv-badge-info     { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }
.nv-badge-muted    { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; } /* slate-600: #64748b was 4.3:1 on the #f1f5f9 pill — 12px/600 text needs 4.5:1 */

.nv-badge-success,
.nv-badge-warning,
.nv-badge-danger,
.nv-badge-info,
.nv-badge-muted {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 5px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* ── Tables ────────────────────────────────────────────────── */
.nv-table {
    font-size: 0.85rem;
}

.nv-table th {
    font-size: 0.73rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
}

.nv-table td {
    vertical-align: middle;
    color: #334155;
}

.nv-table-link {
    color: #0369a1;
    text-decoration: none;
    font-weight: 500;
}

.nv-table-link:hover {
    text-decoration: underline;
}

/* ── Cards / Panels ────────────────────────────────────────── */
.nv-card {
    background: #fff;
    border: 1px solid var(--nv-card-border);
    border-radius: 10px;
}

.nv-card-header {
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--nv-card-border);
    font-weight: 600;
    font-size: 0.9rem;
    color: #0f172a;
    background: #f8fafc;
    border-radius: 10px 10px 0 0;
}

.nv-card-body {
    padding: 1.25rem;
}

/* ── Loading / Empty States ────────────────────────────────── */
.nv-loading {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #64748b;
    font-size: 0.9rem;
    padding: 2rem 0;
}

.nv-empty {
    text-align: center;
    padding: 3rem 1rem;
    /* slate-500: #94a3b8 was 2.5:1 on the #f8fafc content background. */
    color: #64748b;
}

.nv-empty-icon {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 0.75rem;
}

.nv-error-panel {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    color: #991b1b;
    font-size: 0.875rem;
}

/* ── Run content display ───────────────────────────────────── */
.nv-content-preview {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem;
    max-height: 400px;
    overflow-y: auto;
    font-size: 0.875rem;
}

.nv-json-preview {
    background: #1e293b;
    color: #e2e8f0;
    border-radius: 8px;
    padding: 1rem;
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.8rem;
    max-height: 400px;
    overflow: auto;
}

/* ── Timing bar chart ──────────────────────────────────────── */
.nv-timing-bar {
    height: 8px;
    border-radius: 4px;
    background: #e2e8f0;
    overflow: hidden;
    margin-top: 4px;
}

.nv-timing-bar-fill {
    height: 100%;
    /* sky-600: ≥3:1 against the #e2e8f0 track (WCAG 1.4.11 graphical object); the brand-primary sky-400
       sat at ~1.8:1 and washed out on the light track. */
    background: #0284c7;
    border-radius: 4px;
    transition: width 0.4s ease;
}

/* ── Blazor error UI ───────────────────────────────────────── */
#blazor-error-ui {
    background: #fee2e2;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 9999;
    font-size: 0.875rem;
    color: #991b1b;
}

#blazor-error-ui .reload  { color: #0369a1; }

/* .dismiss is a <button> now (it must be keyboard operable). Reset the native chrome so it still reads as the bare
   glyph it always did — but never remove the focus outline: it is the only cue a keyboard user gets here. */
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
    background: none;
    border: 0;
    padding: 0;
    line-height: 1;
    color: inherit;
    font: inherit;
}

/* ── Responsive: collapse sidebar on small screens ─────────── */
/* ── Form improvements ─────────────────────────────────────── */
.nv-form-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.3rem;
}

.nv-section-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    margin-bottom: 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #e2e8f0;
}

/* ── Pagination ────────────────────────────────────────────── */
.nv-pagination {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

/* ── Environment banner ─────────────────────────────────────── */
.nv-env-badge {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.25rem 0.6rem;
}

/* ── Readiness checklist ────────────────────────────────────── */
.nv-checklist-item {
    display: flex;
    align-items: center;
    padding: 0.55rem 1.25rem;
    border-bottom: 1px solid var(--nv-card-border);
}

.nv-checklist-item:last-child {
    border-bottom: none;
}

.nv-checklist-ok   { background: #f0fdf4; }
.nv-checklist-warn { background: #fffbeb; }

/* ── Validation summary ─────────────────────────────────────── */
.nv-validation-summary {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    padding: 0.9rem 1.25rem;
    color: #991b1b;
    font-size: 0.875rem;
}

.nv-validation-summary ul {
    padding-left: 1.2rem;
    margin-top: 0.4rem;
}

/* ── Template cards ─────────────────────────────────────────── */
.nv-template-card {
    background: #fff;
    border: 1px solid var(--nv-card-border);
    border-radius: 10px;
    padding: 1.25rem;
    display: flex;
    gap: 0.9rem;
    transition: box-shadow 0.15s, border-color 0.15s;
}

.nv-template-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    border-color: var(--nv-brand-primary);
}

.nv-template-icon {
    font-size: 1.8rem;
    /* sky-700: readable on the white template card (5.9:1); brand-primary sky-400 was 2.1:1 on white. */
    color: #0369a1;
    flex-shrink: 0;
    line-height: 1;
    padding-top: 0.1rem;
}

/* Residual-3 closeout (WCAG 1.4.11 component boundaries): form-control boundaries must reach ~3:1 on white
   so inputs read as inputs. #8494a9 = 3.09:1 — the lightest compliant slate, so the visual weight barely
   changes. Scoped to INPUT affordances only; decorative card borders/dividers deliberately keep their
   lighter tone (1.4.11 does not apply to non-interactive decoration). */
.form-control,
.form-select,
.form-check-input {
    border-color: #8494a9;
}

.nv-template-content { flex-grow: 1; }

/* ── Sidebar overflow ───────────────────────────────────────── */
.overflow-y-auto { overflow-y: auto; }

/* ── Health page ────────────────────────────────────────────── */
.nv-health-ok    { color: var(--nv-success-color); }
.nv-health-issue { color: var(--nv-danger-color); }
.nv-health-warn  { color: var(--nv-warning-color); }

/* ── Readiness checklist — error state ─────────────────────── */
.nv-checklist-error { background: #fff1f2; }

/* ── Environment status link ────────────────────────────────── */
.nv-env-status-link {
    color: inherit;
}
.nv-env-status-link:hover {
    text-decoration: underline !important;
}
.nv-env-badge-test {
    background: #6d28d9 !important;
}

/* ── Source test panel ──────────────────────────────────────── */
.nv-source-test-panel {
    font-size: 0.82rem;
}
.nv-source-test-samples {
    border-top: 1px solid rgba(0,0,0,0.08);
    padding-top: 0.5rem;
    margin-top: 0.4rem;
}
.nv-source-test-sample {
    padding: 0.25rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.nv-source-test-sample:last-child { border-bottom: none; }

/* ── Run Timeline ───────────────────────────────────────────── */
.nv-timeline {
    padding: 1rem 1.25rem;
}

.nv-tl-item {
    display: flex;
    gap: 0.75rem;
    min-height: 2.5rem;
}

.nv-tl-item:last-child .nv-tl-line {
    display: none;
}

.nv-tl-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 1.4rem;
}

.nv-tl-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    font-size: 0.85rem;
    flex-shrink: 0;
    z-index: 1;
}

.nv-tl-dot-ok      { color: var(--nv-success-color); background: #f0fdf4; }


/* ── Command palette (SCWP-03B-R4 VWP-1) ───────────────────────────────────────
   role=dialog / aria-modal overlay. Selection and focus state are conveyed by background + a left accent bar and the
   aria-selected/aria-current attributes — never by colour alone. */
.nv-command-palette-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1050;
}

.nv-command-palette {
    position: fixed;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1060;
    width: 600px;
    max-width: 92vw;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--nv-card-bg, #fff);
    border: 1px solid var(--nv-border-color, #dee2e6);
    border-radius: 0.5rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3);
}

.nv-command-palette-search {
    padding: 0.75rem;
    border-bottom: 1px solid var(--nv-border-color, #dee2e6);
}

.nv-command-palette-results {
    overflow-y: auto;
}

.nv-command-palette-result {
    cursor: pointer;
    border-left: 3px solid transparent;
}

.nv-command-palette-result:hover {
    background: var(--nv-hover-bg, #f1f3f5);
}

.nv-command-palette-result.active {
    background: var(--nv-hover-bg, #e7f1ff);
    border-left-color: var(--nv-primary-color, #0d6efd);
}

.nv-command-palette-result-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nv-command-palette-kbd {
    font-size: 0.7rem;
}

@media (prefers-reduced-motion: reduce) {
    .nv-command-palette-backdrop,
    .nv-command-palette-result {
        transition: none !important;
    }
}
.nv-tl-dot-warn    { color: var(--nv-warning-color); background: #fffbeb; }
.nv-tl-dot-error   { color: var(--nv-danger-color);  background: #fff1f2; }
.nv-tl-dot-running { color: var(--nv-info-color);    background: #f0f9ff; }
.nv-tl-dot-skipped { color: #64748b;                 background: #f8fafc; } /* was #94a3b8 (2.5:1) — the skipped glyph carries state */

.nv-tl-line {
    flex-grow: 1;
    width: 2px;
    background: #e2e8f0;
    margin: 0.15rem 0;
}

.nv-tl-content {
    flex-grow: 1;
    padding-bottom: 0.75rem;
}

/* v2.8.0 Visual Workflow Canvas */
.nv-canvas-shell {
    display: flex;
    min-height: 760px;
    background: #f8fafc;
}

.nv-palette {
    width: 235px;
    flex: 0 0 235px;
    background: #ffffff;
}

.nv-canvas {
    position: relative;
    flex: 1 1 auto;
    min-height: 760px;
    overflow: auto;
    background-image:
        linear-gradient(rgba(15, 23, 42, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, .06) 1px, transparent 1px);
    background-size: 24px 24px;
    cursor: default;
}

.nv-canvas-edges {
    position: absolute;
    inset: 0;
    min-width: 1800px;
    min-height: 1000px;
    pointer-events: none;
}

.nv-edge {
    fill: none;
    stroke: #64748b;
    stroke-width: 2;
}

.nv-edge-label {
    fill: #475569;
    font-size: 12px;
    font-weight: 600;
}

.nv-node {
    position: absolute;
    z-index: 2;
    padding: .75rem;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: .75rem;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .10);
    user-select: none;
    cursor: move;
}

.nv-node.selected {
    border-color: #2563eb;
    box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .15), 0 10px 25px rgba(15, 23, 42, .16);
}

.nv-note {
    position: absolute;
    z-index: 3;
    width: 220px;
    padding: .5rem;
    background: #fffbeb;
    border: 1px solid #f59e0b;
    border-radius: .5rem;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .12);
}

/* Palette drag in progress — grabbing cursor and text-selection lock across the whole shell */
.nv-canvas-shell.nv-palette-dragging,
.nv-canvas-shell.nv-palette-dragging * {
    cursor: grabbing !important;
    user-select: none;
}

/* Floating ghost badge that follows the cursor during a palette drag */
.nv-drag-ghost {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    background: #2563eb;
    color: #ffffff;
    border-radius: .375rem;
    padding: .25rem .6rem;
    font-size: .8125rem;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .28);
    white-space: nowrap;
    opacity: .92;
    transform: translate(14px, 14px);
}

/* ── VWP-2: Tenant / workspace context header ───────────────── */
.nv-context-header {
    background: var(--nv-topbar-bg);
}

.nv-scope-pill {
    font-weight: 600;
    font-size: .78rem;
    border: 1px solid var(--nv-card-border);
}

.nv-scope-tenant-wide {
    background: #eef2ff;
    color: #4338ca;
}

.nv-scope-workspace {
    background: #ecfdf5;
    color: #047857;
}