/* ============================================================
   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;
}

.nv-nav-group-spinner {
    width: .85rem;
    height: .85rem;
    border-width: .12em;
    vertical-align: -.08em;
}

/* 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;
}


/* ── Global keyboard focus visibility (Deep UI/UX Batch 8) ── */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--nv-brand-primary);
    outline-offset: 2px;
}

#main-content:focus {
    outline: none;
}

.nv-route-state[aria-busy="true"] {
    min-height: 2.5rem;
}

/* ── 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);
}

/* Frozen v4.1.0 target size (WCAG 2.5.5): drawer/collapse controls and navigation links remain 44px 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-favorites > p,
    .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 ────────────────────────────────────────────
   Dashboard amounts are bounded by their card, not by the viewport. The
   decorative icon must never compete for horizontal width with a number. */
.nv-metric-card {
    position: relative;
    min-width: 0;
    background: #fff;
    border: 1px solid var(--nv-card-border);
    border-radius: 10px;
    padding: 1.1rem 1.15rem;
    transition: box-shadow 0.15s;
}

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

.nv-metric-content {
    min-width: 0;
}

.nv-metric-label {
    padding-right: 2rem; /* Reserve room for the decorative top-corner icon. */
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    margin-bottom: 0.35rem;
    overflow-wrap: break-word;
}

.nv-metric-value {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: 0.35rem;
    min-width: 0;
    max-width: 100%;
    font-size: clamp(1.15rem, 1.55vw, 1.9rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #0f172a;
    line-height: 1.15;
}

/* Bootstrap's light cyan text-info is too faint for KPI amounts on white. */
.nv-metric-value.text-info {
    color: var(--nv-info-color) !important;
}

.nv-metric-prefix {
    flex: 0 0 auto;
    font-size: 0.7em;
    letter-spacing: 0.02em;
}

.nv-metric-number {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere; /* Extreme long values stay visible, never clipped. */
}

.nv-metric-sub {
    min-width: 0;
    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.3rem;
    overflow-wrap: break-word;
}

.nv-metric-icon {
    position: absolute;
    top: 0.85rem;
    right: 1.15rem;
    font-size: 1.35rem;
    /* Decoration only: the number always owns the card's full content width. */
    color: #0369a1;
    opacity: 0.25;
    pointer-events: none;
}

/* Six usage metrics require legible cards, not six 1/6-width desktop columns.
   Two rows of three at large widths, then two or one as space decreases. */
.nv-home-usage-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.nv-home-usage-grid > * {
    min-width: 0;
}

@media (max-width: 1399.98px) {
    .nv-home-usage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    .nv-home-usage-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Numeric summaries outside Home use Bootstrap cards; they must also bound
   long counts and currency amounts while preserving their exact digits. */
.nv-responsive-stat-value {
    display: block;
    min-width: 0;
    max-width: 100%;
    font-size: clamp(1.05rem, 1.45vw, 1.55rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

/* ── 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;
}

/* Field support text is allowed to wrap beneath its own control, but it must never
   force a wider form cell or page. Vertical sibling alignment is governed by the
   FormFieldAlignmentContractTests closed-world Razor guard. */
.form-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

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

/* ── Form field labels ─────────────────────────────────────── */
/* The module stylesheets stack a field caption above its control with `display: grid`
   (or flex column) on the label. Those sheets are imported into the nv-reconstruction
   cascade layer, and Bootstrap's reboot sets `label { display: inline-block }` outside
   any layer — an unlayered declaration wins over a layered one regardless of specificity,
   so none of those label rules ever applied and every caption rendered on the same line
   as its box. These restore the intended stacked field and must stay unlayered to win. */
.nv-form-grid label,
.nv-form-card label,
.nv-authoring-grid > label {
    display: grid;
    gap: .35rem;
    min-width: 0;
    margin: 0;
}

.nv-permission-grid label {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .2rem .5rem;
    min-width: 0;
    margin: 0;
}

.nv-visual-plan-filters label,
.nv-visual-plan-inspector label {
    display: grid;
    gap: .25rem;
    min-width: 0;
    margin: 0 0 .65rem;
}

.nv-step-editor label {
    display: grid;
    gap: .25rem;
    min-width: 0;
    margin: .65rem 0;
}

/* A field fills its cell rather than keeping the browser's default box width. */
.nv-form-grid :where(input, select, textarea),
.nv-form-card :where(input, select, textarea) {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

@layer nv-reconstruction {
/* Reconstruction compatibility aliases. These map modular Web tokens onto the frozen v4.1.0 palette without
   changing the frozen visual contract. Page-specific compatibility styles are transitional until each frozen
   surface is restored one-for-one. */
:root {
    --nv-bg: var(--nv-content-bg);
    --nv-surface: #ffffff;
    --nv-border: var(--nv-card-border);
    --nv-text: #0f172a;
    --nv-muted: #64748b;
    --nv-accent: #2563eb;
    --nv-surface-strong: #475569;
}

/* ── Frozen desktop visual authority (2026-08-31) ───────────────────────
   Frozen v4.1.0 owns the authenticated shell, typography, navigation, card,
   form and control density at normal 100% browser zoom. Do not apply a root
   font-size reduction, CSS zoom, transform scaling, or shell-wide fixed-pixel
   shrink here. Additive ACF surfaces and Plan-specific layout corrections must
   remain locally scoped so they cannot resize Frozen-owned regions. */


/* ── Additive composition layout hardening (2026-08-31) ───────────────
   Frozen owns shared desktop density. Keep intrinsic sizing corrections local
   to additive Plan/composition surfaces so they cannot restyle Frozen cards,
   forms, navigation, or shell geometry at normal 100% browser zoom. */
/* Plan-specific intrinsic-size hardening. Keep this local: shared card/form grids
   belong to Frozen and must not be globally restyled by additive Plan work. */
.nv-plan-summary-grid > *,
.nv-plan-step-grid > * {
    min-width: 0;
}

.nv-plan-step-grid input,
.nv-plan-step-grid select,
.nv-plan-step-grid textarea {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.nv-plan-summary-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(20rem, .85fr);
    align-items: stretch;
}

.nv-plan-summary-grid > section {
    min-width: 0;
}

.nv-plan-summary-card > p {
    max-width: 78ch;
    line-height: 1.45;
    margin-bottom: .8rem;
}

.nv-plan-meta {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: .4rem 1rem;
    align-items: baseline;
    margin-bottom: 0;
}

.nv-plan-meta dt {
    white-space: nowrap;
}

.nv-plan-meta dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.nv-version-token {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    color: #334155;
    background: #f1f5f9;
    border-radius: .25rem;
    padding: .08rem .32rem;
}

.nv-plan-lifecycle-card .nv-actions {
    align-items: flex-start;
}

.nv-plan-step-grid {
    grid-template-columns:
        minmax(20rem, 2fr)
        minmax(9rem, .7fr)
        minmax(12rem, 1fr)
        minmax(12rem, 1fr)
        minmax(14rem, 1.15fr)
        minmax(10rem, .7fr);
    align-items: end;
}

.nv-plan-step-grid .nv-checkbox {
    align-self: end;
    min-width: 0;
    margin-bottom: .45rem;
    white-space: normal;
}

.nv-plan-revision {
    display: grid;
    gap: .35rem;
    width: 100%;
    margin-top: .8rem;
}

.nv-plan-revision textarea,
.nv-multi-agent-goal textarea {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    resize: vertical;
    overflow: auto;
}

.nv-plan-revision textarea {
    width: 100%;
    min-height: 2.35rem;
}

.nv-multi-agent-guide {
    overflow: hidden;
}

.nv-multi-agent-guide > p {
    max-width: 92ch;
}

.nv-multi-agent-goal {
    display: grid;
    gap: .35rem;
    width: 100%;
    margin: .75rem 0 .5rem;
}

.nv-multi-agent-goal textarea {
    width: 100%;
    min-height: 2.35rem;
}

/* Generated AI authoring results: compact single-line fields with full-width multiline review fields. */
.nv-authoring-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
    gap: .7rem .8rem;
    width: 100%;
    min-width: 0;
}

.nv-authoring-grid > label {
    display: grid;
    gap: .35rem;
    min-width: 0;
    margin: 0;
}

.nv-authoring-grid > .nv-field-wide {
    grid-column: 1 / -1;
    width: 100%;
}

.nv-authoring-grid :where(input, select, textarea) {
    box-sizing: border-box;
    inline-size: 100%;
    width: 100%;
    min-inline-size: 0;
    min-width: 0;
    max-inline-size: 100%;
    max-width: 100%;
}

.nv-authoring-grid textarea,
.nv-plan-revision textarea,
.nv-multi-agent-goal textarea {
    min-height: 2.35rem;
    height: auto;
    resize: vertical;
    overflow: auto;
    line-height: 1.4;
}

.nv-agent-draft-form,
.nv-multi-agent-definition-form,
.nv-multi-agent-policy-form {
    margin-top: .7rem;
}

.nv-multi-agent-definition-form {
    grid-template-columns: minmax(16rem, 32rem) minmax(0, 1fr);
}

.nv-multi-agent-role-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .8rem;
    margin-bottom: 1rem;
}

.nv-multi-agent-role-card {
    overflow: hidden;
}

.nv-multi-agent-role-form,
.nv-multi-agent-policy-form {
    padding-top: .1rem;
}

.nv-multi-agent-policy-form textarea {
    font-family: inherit;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}


.nv-operation-status {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 2rem;
    color: #475569;
    font-weight: 600;
}

.nv-operation-status::before {
    content: "";
    width: .9rem;
    height: .9rem;
    border: .14rem solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: nv-operation-spin .8s linear infinite;
}

.nv-operation-busy,
.nv-operation-busy :where(button, input, select, textarea, label) {
    cursor: progress !important;
}

button[aria-busy="true"] {
    cursor: progress !important;
}

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

.nv-multi-agent-guide > .nv-checkbox {
    display: flex;
    align-items: center;
    gap: .45rem;
    width: fit-content;
    max-width: 100%;
}

.nv-plans-table {
    width: 100%;
    min-width: 78rem;
    table-layout: fixed;
}

.nv-plans-table .nv-col-plan { width: 30%; }
.nv-plans-table .nv-col-status { width: 10%; }
.nv-plans-table .nv-col-version { width: 14%; }
.nv-plans-table .nv-col-steps { width: 5%; }
.nv-plans-table .nv-col-workflow { width: 9%; }
.nv-plans-table .nv-col-created { width: 12%; }
.nv-plans-table .nv-col-actions { width: 20%; }

.nv-plans-table th,
.nv-plans-table td {
    min-width: 0;
    overflow: hidden;
}

.nv-plan-name-cell a {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.nv-plans-table td:nth-child(2),
.nv-plans-table td:nth-child(4),
.nv-plans-table td:last-child {
    white-space: nowrap;
}

.nv-plans-table td.nv-plan-actions-cell {
    overflow: visible;
}

.nv-plan-row-actions {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: .35rem;
    min-width: max-content;
}

.nv-plan-row-actions .btn {
    flex: 0 0 auto;
    margin: 0;
}

@media (max-width: 1180px) {
    .nv-plan-summary-grid {
        grid-template-columns: 1fr;
    }

    .nv-plan-step-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .nv-plan-step-grid {
        grid-template-columns: 1fr;
    }

    .nv-plan-meta {
        grid-template-columns: 1fr;
        gap: .15rem;
    }

    .nv-plan-meta dd {
        margin-bottom: .55rem;
    }

    .nv-plan-revision textarea,
    .nv-multi-agent-goal textarea {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        resize: vertical;
    }

    .nv-plans-table {
        min-width: 78rem;
    }
}
}

/* ── Pre-visual UI/UX hygiene gate: responsive containment authority ────────
   This block is intentionally unlayered because it defines NEW hygiene-only selectors and
   container behavior rather than restyling Frozen-owned visual tokens. It prevents page-level
   clipping, makes responsive decisions against the actual content column (not the browser
   viewport behind a 300px shell), and keeps wide information regions locally scrollable. */
.nv-main,
.nv-content {
    min-width: 0;
}

.nv-content {
    container-type: inline-size;
    container-name: nv-content;
}

.nv-hygiene-table-region {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
}

.nv-hygiene-table-region > table {
    margin-bottom: 0;
}

/* Make intrinsic grids contract safely before a child can dictate page width. */
.nv-card-grid,
.nv-form-grid,
.nv-permission-grid,
.ki-grid,
.nv-authoring-grid,
.nv-orchestration-grid,
.nv-plan-summary-grid,
.nv-plan-step-grid,
.nv-multi-agent-definition-form,
.nv-designer-shell {
    min-width: 0;
}

.nv-card-grid > *,
.nv-form-grid > *,
.nv-permission-grid > *,
.ki-grid > *,
.nv-orchestration-grid > *,
.nv-designer-shell > * {
    min-width: 0;
}

.nv-content :where(input, select, textarea) {
    max-width: 100%;
}

.nv-content :where(.card, .nv-card, .nv-section, .table-responsive, .nv-table-wrap) {
    min-width: 0;
    max-width: 100%;
}

/* Definition-list labels are useful as two columns until the content region gets narrow. */
@container nv-content (max-width: 38rem) {
    .nv-definition-grid,
    .nv-plan-meta {
        grid-template-columns: 1fr;
    }

    .nv-definition-grid dd,
    .nv-plan-meta dd {
        overflow-wrap: anywhere;
    }
}

/* Shell-aware Plan / multi-agent reflow. The old viewport media query fired too late because
   it did not subtract the authenticated navigation rail from the usable content width. */
@container nv-content (max-width: 82rem) {
    .nv-plan-summary-grid,
    .nv-multi-agent-definition-form {
        grid-template-columns: 1fr;
    }

    .nv-plan-step-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@container nv-content (max-width: 52rem) {
    .nv-plan-step-grid {
        grid-template-columns: 1fr;
    }

    .nv-orchestration-grid {
        grid-template-columns: 1fr;
    }
}

/* Plan Workbench regression closure (2026-09-14).
   Keep advanced agent/dependency authoring without allowing checkbox controls or long
   dependency descriptions to collapse the editable step grid. This is intentionally
   unlayered because the frozen/unlayered form-width rule otherwise wins over module CSS. */
.nv-plan-step {
    overflow: hidden;
}

.nv-plan-step-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .75rem 1rem;
    align-items: start;
}

.nv-plan-step-title {
    min-width: 0;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.nv-plan-step-actions {
    justify-content: flex-end;
    align-items: center;
    margin: 0;
}

.nv-plan-step-actions > span {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: .25rem .55rem;
    border: 1px solid var(--nv-card-border);
    border-radius: 999px;
    background: #f8fafc;
    color: #475569;
    white-space: nowrap;
}

.nv-plan-step-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(8rem, .65fr) minmax(12rem, 1fr) minmax(11rem, .85fr);
    grid-template-areas:
        "description type agent approval"
        "dependencies dependencies sources sources";
    gap: .75rem 1rem;
    align-items: start;
    margin: .85rem 0 0;
}

.nv-plan-step-description-field { grid-area: description; }
.nv-plan-step-type-field { grid-area: type; }
.nv-plan-step-agent-field { grid-area: agent; }
.nv-plan-step-dependencies-field { grid-area: dependencies; }
.nv-plan-step-sources-field { grid-area: sources; }
.nv-plan-step-approval-field { grid-area: approval; }

.nv-plan-step-grid > *,
.nv-plan-step-agent-field,
.nv-plan-step-dependencies-field {
    min-width: 0;
}

.nv-plan-step-agent-field,
.nv-plan-step-dependencies-field {
    display: grid;
    gap: .35rem;
}

.nv-plan-step-grid :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.nv-plan-step-grid .form-check-input,
.nv-plan-step-grid label.nv-plan-step-approval-field > input[type="checkbox"] {
    width: 1rem;
    min-width: 1rem;
    max-width: 1rem;
    height: 1rem;
    margin: .2rem 0 0;
    flex: 0 0 1rem;
}

.nv-plan-dependency-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
    gap: .35rem .5rem;
    max-height: 9rem;
    padding: .45rem;
    overflow: auto;
    border: 1px solid var(--nv-card-border);
    border-radius: .4rem;
    background: #fff;
}

.nv-plan-step-grid label.nv-plan-dependency-option {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    min-width: 0;
    margin: 0;
    padding: .35rem .4rem;
    border-radius: .3rem;
    cursor: pointer;
}

.nv-plan-step-grid label.nv-plan-dependency-option:hover {
    background: #f8fafc;
}

.nv-plan-dependency-copy {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .4rem;
    align-items: baseline;
    min-width: 0;
    line-height: 1.25;
}

.nv-plan-dependency-copy > strong {
    color: #334155;
    white-space: nowrap;
}

.nv-plan-dependency-copy > span {
    min-width: 0;
    overflow: hidden;
    color: #64748b;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nv-plan-step-grid label.nv-plan-step-approval-field {
    display: flex;
    align-items: center;
    gap: .5rem;
    align-self: end;
    min-width: 0;
    min-height: 2.4rem;
    margin: 0;
    padding: .5rem .65rem;
    border: 1px solid var(--nv-card-border);
    border-radius: .4rem;
    background: #f8fafc;
    white-space: nowrap;
}

@container nv-content (max-width: 70rem) {
    .nv-plan-step-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "description type"
            "agent approval"
            "dependencies dependencies"
            "sources sources";
    }
}

@container nv-content (max-width: 46rem) {
    .nv-plan-step-header {
        grid-template-columns: 1fr;
    }

    .nv-plan-step-actions {
        justify-content: flex-start;
    }

    .nv-plan-step-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "description"
            "type"
            "agent"
            "dependencies"
            "sources"
            "approval";
    }

    .nv-plan-step-grid label.nv-plan-step-approval-field {
        justify-self: start;
    }
}

/* Workflow Canvas is an additive tool workspace. Reflow on usable content width rather than
   browser width so a 1280px laptop with a 300px shell never tries to keep the 3-column editor. */
@container nv-content (max-width: 72rem) {
    .nv-designer-shell {
        grid-template-columns: 1fr;
    }

    .nv-designer-shell .nv-palette,
    .nv-designer-shell .nv-step-editor {
        position: static;
    }

    .nv-designer-shell .nv-canvas-shell {
        display: block;
        min-width: 0;
        max-width: 100%;
    }

    .nv-designer-shell .nv-canvas-shell > .nv-palette {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
        gap: .3rem;
        width: 100%;
        max-width: 100%;
        border-right: 0;
        border-bottom: 1px solid var(--nv-border);
    }

    .nv-designer-shell .nv-canvas {
        min-width: 0;
        max-width: 100%;
    }
}

/* Compact authenticated header hygiene before the full mobile drawer breakpoint. */
@media (min-width: 769px) and (max-width: 1080px) {
    .nv-topbar {
        gap: .4rem;
        padding-inline: .75rem !important;
    }

    .nv-topbar > .d-flex.align-items-center.gap-3 {
        min-width: 0;
        gap: .5rem !important;
    }

    .nv-topbar > .d-flex.align-items-center.gap-3 > small,
    .nv-env-status-link > .text-muted,
    .nv-topbar-title {
        display: none;
    }

    .nv-context-header {
        padding-inline: .75rem !important;
    }
}

.nv-state-card {
    width: min(100%, 30rem);
}

.nv-state-card-compact {
    width: min(100%, 26.25rem);
}

/* ── Pre-visual authenticated-header responsive convergence ────────────────
   The top bar must keep every essential action reachable without relying on .nv-main overflow clipping.
   Desktop Frozen density stays unchanged; compact/mobile states progressively remove secondary labels while
   retaining the health destination, command palette, account menu, product identity and 44px touch targets. */
.nv-topbar-brand,
.nv-topbar-actions,
.nv-account-menu {
    min-width: 0;
}

.nv-topbar-brand {
    overflow: hidden;
}

.nv-topbar-actions {
    flex: 0 0 auto;
}

.nv-topbar-actions > .nv-env-status-link {
    flex: 0 0 auto;
}

.nv-account-menu-name {
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .nv-topbar {
        flex-wrap: nowrap;
        overflow: visible;
        height: 52px;
        padding-block: .25rem !important;
    }

    .nv-topbar-brand {
        flex: 1 1 auto !important;
        gap: .35rem !important;
    }

    .nv-topbar-title,
    .nv-vendor-link,
    .nv-env-status-link > .text-muted,
    .nv-account-menu-name,
    .nv-account-role-badge,
    #nv-command-palette-opener > span,
    #nv-command-palette-opener > kbd {
        display: none !important;
    }

    .nv-topbar-actions {
        flex: 0 0 auto;
        gap: .35rem !important;
    }

    #nv-command-palette-opener,
    .nv-account-menu-button {
        min-width: 44px;
        min-height: 44px;
        padding-inline: .5rem;
        justify-content: center;
    }

    .nv-topbar-logo {
        max-width: 44px;
        flex: 0 1 44px;
    }
}

@media (max-width: 480px) {
    .nv-env-status-link {
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
    }

    .nv-env-name {
        display: none;
    }

    .nv-env-badge .bi {
        margin-right: 0 !important;
    }
}

/* ── Pre-visual BuildFix8: Delivery + Workflow Template containment ──────────
   These selectors are intentionally route/component-specific. They correct the two
   highest-volume rendered hygiene defects without changing global table/card behavior. */
.nv-delivery-error-cell {
    min-width: 10rem;
    max-width: 13.75rem;
}

.nv-delivery-error-link {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nv-workflow-template-card,
.nv-workflow-template-header,
.nv-workflow-template-badges,
.nv-workflow-template-name {
    min-width: 0;
}

.nv-workflow-template-header {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: .5rem;
}

.nv-workflow-template-name {
    overflow-wrap: anywhere;
}

.nv-workflow-template-category,
.nv-workflow-template-badges .badge {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: start;
}

.nv-workflow-template-badges {
    flex-wrap: wrap;
}