/* Iconique brand palette (from the brand logo SVG). */
:root {
    --ir-sidebar-start: #0335AD; /* royal blue */
    --ir-sidebar-end:   #0A207C; /* deep navy */
    --ir-primary:       #0335AD; /* royal blue */
    --ir-primary-dark:  #0A207C; /* deep navy */
    --ir-accent:        #F08012; /* orange */
    --ir-accent-dark:   #cf6c08; /* orange (hover) */
    --ir-amber:         #EDAD30; /* amber */
    --ir-link:          #0335AD;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    /* The app shell (.page) owns the viewport and scrolls its own inner region; the window itself must
       never scroll (the default body margin used to push .page past 100vh and leak a few px of scroll). */
    overflow: hidden;
    overscroll-behavior: none;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: #1e293b;
    -webkit-font-smoothing: antialiased;
}

/* Light app canvas behind the white content surfaces. */
main {
    background-color: #f1f5f9;
}

main:focus {
    outline: none;
}

/* Skip link: off-screen until focused, then pinned top-left over the header. */
.ir-skip-link {
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 1000;
    transform: translateY(-150%);
    background: #fff;
    color: var(--ir-primary);
    font-weight: 600;
    padding: 0.5rem 0.9rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.25);
    transition: transform 0.15s ease;
}

.ir-skip-link:focus {
    transform: translateY(0);
    outline: 2px solid var(--ir-primary);
    outline-offset: 2px;
}

/* ---- Breadcrumb bar (Breadcrumbs component; global so styles aren't scope-bound) ---- */
.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;        /* fixed bar above the scroll region — never scrolls or shrinks */
    padding: 0.6rem 1.5rem;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.85rem;
}

.breadcrumbs .bc-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: #64748b;
    text-decoration: none;
}

.breadcrumbs .bc-link:hover {
    color: var(--ir-primary);
}

.breadcrumbs .bc-ico {
    width: 15px;
    height: 15px;
    flex: none;
    opacity: 0.9;
}

.breadcrumbs .bc-current {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: #0f172a;
    font-weight: 600;
}

.breadcrumbs .bc-sep {
    color: #cbd5e1;
}

/* ---- Collapsible sidebar (desktop) ----
   Checkbox sibling of .sidebar in MainLayout drives an icon-only rail. Rules are global
   because they cross the MainLayout/NavMenu component-style boundary. */
.ir-sidebar-toggle {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

@media (min-width: 641px) {
    #ir-sidebar-toggle:checked ~ .app-body .sidebar {
        width: 74px;
    }

    #ir-sidebar-toggle:checked ~ .app-body .sidebar .nav-section,
    #ir-sidebar-toggle:checked ~ .app-body .sidebar .nav-label,
    #ir-sidebar-toggle:checked ~ .app-body .sidebar .nav-footer-meta,
    #ir-sidebar-toggle:checked ~ .app-body .sidebar .nav-footer-app {
        display: none;
    }

    #ir-sidebar-toggle:checked ~ .app-body .sidebar .nav-item {
        padding-left: 0;
        padding-right: 0;
    }

    #ir-sidebar-toggle:checked ~ .app-body .sidebar .nav-link {
        justify-content: center;
    }

    #ir-sidebar-toggle:checked ~ .app-body .sidebar .nav-ico {
        margin-right: 0;
    }
}

/* The collapse control is desktop-only; mobile uses the in-sidebar hamburger. */
@media (max-width: 640.98px) {
    .sidebar-toggle-btn {
        display: none !important;
    }
}

/* Content surface is centred and width-capped so it doesn't sprawl or
   hug the left edge on wide monitors. See the consolidated rule below. */

a, .btn-link {
    color: var(--ir-link);
    text-decoration: none;
}

a:hover, .btn-link:hover {
    text-decoration: underline;
}

/* One consistent button across the tool: white by default, solid blue on hover / focus / active (the
   Filter-button look). Every standard button — primary CTAs (Accept, Publish), the orange-accent CTAs
   (Upload, Handoff), and the outline/utility buttons (StepNav, Re-analyze, modal Cancel) — shares it.
   (The AI Assist button keeps its distinct purple as a deliberate AI affordance.) */
.btn-primary,
.btn-accent,
.btn-outline-secondary,
.btn-outline-primary {
    color: #475569;
    background-color: #fff;
    border-color: #dbe2ea;
}
.btn-primary:hover, .btn-primary:active, .btn-primary.active,
.btn-accent:hover, .btn-accent:active, .btn-accent.active,
.btn-outline-secondary:hover, .btn-outline-secondary:active, .btn-outline-secondary.active,
.btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary.active {
    color: #fff;
    background-color: var(--ir-primary);
    border-color: var(--ir-primary);
}

/* "AI" badge marking an AI-suggested candidate (review before accepting). Sparkle + label. */
.ir-ai-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    background-image: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .03em;
    padding: .25rem .5rem;
    border-radius: 999px;
    vertical-align: middle;
    box-shadow: 0 1px 2px rgba(79, 70, 229, .35);
}

.ir-ai-badge svg { flex: 0 0 auto; }

/* Low-confidence binding badge: amber, signals the AI suggestion needs verification before accepting. */
.ir-bind-lowconf {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    background: #fdf3e6;
    color: #8a4b12;
    border: 1px solid #f3c89a;
    font-size: .72rem;
    font-weight: 600;
}
.ir-bind-lowconf svg { flex: 0 0 auto; }

/* AI action button — gradient violet, signals "this calls the model". Used for AI Assist. */
.btn-ai {
    color: #fff;
    border: none;
    background-image: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
    box-shadow: 0 1px 2px rgba(79, 70, 229, .35);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.btn-ai:hover, .btn-ai:focus {
    color: #fff;
    background-image: linear-gradient(135deg, #6d28d9 0%, #4338ca 100%);
}

.btn-ai:disabled {
    opacity: .65;
}

.btn-outline-accent {
    color: var(--ir-accent-dark);
    border-color: var(--ir-accent);
}

.btn-outline-accent:hover {
    color: #fff;
    background-color: var(--ir-accent);
}

.btn:focus-visible, .btn-link.nav-link:focus-visible, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(3, 53, 173, 0.2);
}

/* ---- Accessibility: visible keyboard focus on custom controls ----
   Bootstrap's focus styles don't reach these, so give them a clear ring. */
.ir-actionbtn:focus-visible,
a.ir-stat-link:focus-visible,
button.ir-stat-link:focus-visible,
.ir-file-row-remove:focus-visible,
.bc-link:focus-visible,
.ir-section-link:focus-visible {
    outline: 2px solid var(--ir-primary);
    outline-offset: 2px;
    border-radius: 0.3rem;
}

/* The file input is a transparent overlay; surface its focus on the zone. */
.ir-dropzone:focus-within {
    border-color: var(--ir-primary);
    box-shadow: 0 0 0 0.2rem rgba(3, 53, 173, 0.2);
}

.content {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding-top: 1.1rem;
    padding-bottom: 2rem;
}

/* On very wide screens give the content a little more room before it caps. */
@media (min-width: 1800px) {
    .content {
        max-width: 1600px;
    }
}

/* Sticky top block: the page header + lifecycle banner stay pinned together while the page scrolls
   (binding / expressions / review pages). Wrapping both in ONE sticky element — rather than two separately
   sticky bars — avoids per-page offset math and a content-flashing gap between them. */
.ir-sticky-head {
    position: sticky;
    top: 0;
    z-index: 20;
    /* Frosted glass: translucent canvas + blur so scrolling content shows faintly behind the pinned block. */
    background: rgba(241, 245, 249, 0.72);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    margin-top: -1.1rem;   /* absorb .content's top padding so it pins flush to the top */
    padding-top: 1.1rem;
}

/* Inside the sticky wrapper the header no longer pins on its own (the wrapper does), and its panes go
   transparent so the wrapper's single frosted backdrop shows through (no nested backdrop-filter). */
.ir-sticky-head .ir-page-header {
    position: static;
    z-index: auto;
    margin-top: 0;
    padding-top: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.ir-sticky-head .ir-lifecycle {
    background: rgba(255, 255, 255, 0.5);
}

/* Shared page header */
.ir-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    /* Pinned to the top of the scroll region so the title/actions stay visible while the page scrolls.
       Frosted glass: translucent canvas + blur so content shows faintly behind it (every scrolling page). */
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(241, 245, 249, 0.72);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    padding-top: 1.1rem;
    margin-top: -1.1rem;   /* absorb .content's top padding so the header starts flush */
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e2e8f0;
}

.ir-page-title {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 600;
    color: #0f172a;
}

.ir-page-subtitle {
    margin: 0.25rem 0 0;
    color: #64748b;
    font-size: 0.9rem;
    max-width: 70ch;
}

.ir-page-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

/* Subtle empty-state card */
.ir-empty {
    text-align: center;
    color: #64748b;
    background: #fff;
    border: 1px dashed #cbd5e1;
    border-radius: 0.75rem;
    padding: 3rem 1rem;
}

/* ---- Hero ---- */
.ir-hero {
    background-image: linear-gradient(135deg, var(--ir-sidebar-start) 0%, var(--ir-sidebar-end) 100%);
    border-radius: 1rem;
    color: #fff;
    padding: 2.75rem 2.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 10px 30px rgba(10, 32, 124, 0.25);
}

.ir-hero-body h1 {
    font-weight: 700;
    font-size: 2.1rem;
    max-width: 22ch;
    margin-bottom: 0.75rem;
}

.ir-hero-accent {
    color: var(--ir-amber);
}

.ir-hero .lead {
    color: rgba(255, 255, 255, 0.85);
    max-width: 60ch;
    margin-bottom: 1.5rem;
}

.ir-hero-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

@media (max-width: 575.98px) {
    .ir-hero {
        padding: 1.75rem 1.25rem;
        border-radius: 0.85rem;
    }

    .ir-hero-body h1 {
        font-size: 1.55rem;
    }

    .ir-hero .lead {
        font-size: 0.95rem;
    }
}

.ir-feature-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.6rem;
    background: linear-gradient(135deg, var(--ir-primary), var(--ir-accent));
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
}

/* ---- Table toolbar (search / filter) ---- */
.ir-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.ir-search {
    position: relative;
    flex: 1;
    min-width: 12rem;
    max-width: 22rem;
}

.ir-search svg {
    position: absolute;
    left: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    color: #94a3b8;
    pointer-events: none;
}

.ir-search .form-control {
    padding-left: 2rem;
}

.ir-status-filter {
    width: auto;
}

.ir-toolbar-count {
    margin-left: auto;
    font-size: 0.8rem;
    color: #94a3b8;
}

/* ---- Live indicator ---- */
.ir-live {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #16a34a;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ir-live-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #16a34a;
    animation: ir-pulse 1.6s ease-in-out infinite;
}

@keyframes ir-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

/* ---- Compact row actions (icon + label buttons) ---- */
.ir-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: nowrap;
}

/* Compact, status-aware row actions: a primary "Review", optional deliverables, and a ⋯ overflow menu. */
.ir-actions-compact { gap: 0.4rem; }
.ir-review-btn { display: inline-flex; align-items: center; gap: 0.25rem; }
.ir-review-btn svg { margin-right: -1px; }

.ir-menu { position: relative; display: inline-flex; }
.ir-menu-trigger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0;
    border: 1px solid #dbe2ea; border-radius: 0.5rem;
    background: #fff; color: #475569; cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.ir-menu-trigger:hover { background: var(--ir-primary); color: #fff; border-color: var(--ir-primary); }

.ir-menu-pop {
    /* Fixed so the table's overflow scroll container can't clip it; JS (irPositionMenu) sets top/left.
       Starts off-screen to avoid a flash at the wrong spot before it's anchored. */
    position: fixed; top: 0; left: -9999px; z-index: 1001;
    min-width: 196px; padding: 0.35rem;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 0.7rem;
    box-shadow: 0 12px 32px rgba(2, 6, 23, 0.16);
}
.ir-menu-item {
    display: flex; align-items: center; gap: 0.6rem; width: 100%;
    padding: 0.46rem 0.6rem; border: 0; border-radius: 0.5rem;
    background: transparent; color: #334155; font-size: 0.85rem; font-weight: 500;
    text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.ir-menu-item:hover { background: var(--ir-primary); color: #fff; }
.ir-menu-item svg { width: 15px; height: 15px; flex: 0 0 auto; color: #64748b; }
.ir-menu-item:hover svg { color: #fff; }
/* Disabled menu item (e.g. Fidelity/Designer before the report is published). */
.ir-menu-disabled { opacity: 0.5; cursor: not-allowed; }
.ir-menu-disabled:hover { background: transparent; color: #334155; }
.ir-menu-disabled:hover svg { color: #64748b; }
.ir-menu-divider { height: 1px; background: #eef2f7; margin: 0.3rem 0.25rem; }
.ir-menu-toggle.is-on { color: var(--ir-primary); }
.ir-menu-toggle.is-on svg { color: var(--ir-primary); }
.ir-menu-backdrop { position: fixed; inset: 0; z-index: 1000; background: transparent; }

/* ---- Jobs grid: selectable rows + selection-driven toolbar + per-column filter ---- */
.ir-grid-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; padding: 0.1rem 0.15rem 0.85rem;
}
.ir-grid-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; min-height: 34px; }
.ir-grid-sel-name {
    font-weight: 600; color: #0f172a; margin-right: 0.15rem;
    max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ir-grid-hint { color: #94a3b8; font-size: 0.88rem; }
.ir-grid-tools { display: flex; align-items: center; gap: 0.85rem; }
.ir-filter-btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.3rem 0.65rem; border: 1px solid #dbe2ea; border-radius: 0.5rem;
    background: #fff; color: #475569; font-size: 0.82rem; font-weight: 500; cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.ir-filter-btn:hover { background: var(--ir-primary); color: #fff; border-color: var(--ir-primary); }
.ir-filter-btn.is-on { background: var(--ir-primary); border-color: var(--ir-primary); color: #fff; }

.ir-sel-col { width: 40px; text-align: center; }
/* Whole row reads as clickable (select on click) — the hand cursor over every cell, not just the checkbox. */
.ir-grid tbody tr, .ir-grid tbody tr > td { cursor: pointer; }
.ir-row-selected > td { background: #eff4ff !important; }

/* Crystal report file chip — neutral palette (the "default" swatch). Keeps row values one font; only this
   field, Status, and Engine carry a badge. */
.ir-crystal-badge {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.2rem 0.55rem; border-radius: 0.5rem;
    background: #F3F4F6; color: #1F2937; font-size: 0.82rem; font-weight: 500;
    max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ir-crystal-badge .ir-file-ico { width: 14px; height: 14px; flex: 0 0 auto; color: #6b7280; }

/* Clickable report name in the jobs grid → opens the read-only detail page. */
a.ir-crystal-link { text-decoration: none; cursor: pointer; transition: background .12s, color .12s; }
a.ir-crystal-link:hover { background: #e6efff; color: var(--ir-primary); }
a.ir-crystal-link:hover .ir-file-ico { color: var(--ir-primary); }

/* ── Subreports: expander + nested roll-up in the jobs grid, and a panel on the detail page. ── */
.ir-crystal-cell { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.ir-subexpand {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; padding: 0; border: none; border-radius: 5px;
    background: transparent; color: #6b7280; cursor: pointer; transition: transform .15s, background .12s;
}
.ir-subexpand:hover { background: #e6efff; color: var(--ir-primary); }
.ir-subexpand.is-open { transform: rotate(90deg); color: var(--ir-primary); }
.ir-subexpand-spacer { flex: 0 0 auto; width: 20px; }
.ir-sub-pill {
    flex: 0 0 auto; font-size: 0.68rem; font-weight: 700; letter-spacing: .02em;
    padding: 0.08rem 0.4rem; border-radius: 999px; background: #eef2ff; color: #4338ca;
}

.ir-subrow > td { background: #f9fafb; border-top: none; padding: 0.4rem 0.75rem 0.7rem; }
.ir-sublist { display: flex; flex-direction: column; gap: 0.3rem; }
.ir-sublist-head {
    display: inline-flex; align-items: center; gap: 0.35rem; margin: 0.15rem 0 0.3rem;
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #6b7280;
}
.ir-sub-item {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.6rem;
    background: #fff; border: 1px solid #eef2f7; border-radius: 7px;
}
.ir-sub-ico { flex: 0 0 auto; color: #6b7280; }
.ir-sub-name { font-weight: 600; color: #1f2937; font-size: 0.86rem; }
.ir-sub-rep {
    font-size: 0.74rem; font-weight: 600; color: #0369a1;
    padding: 0.06rem 0.45rem; border-radius: 5px; background: #eff6ff; border: 1px solid #dbeafe;
}
.ir-sub-rep-na { color: #9ca3af; font-size: 0.8rem; }
.ir-sub-link {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.72rem; font-weight: 600; color: #5b21b6;
    padding: 0.05rem 0.45rem; border-radius: 999px; background: #f5f3ff; border: 1px solid #e9d5ff;
}
.ir-sub-link svg { flex: 0 0 auto; }
.ir-sub-counts { display: flex; align-items: center; gap: 0.35rem; margin-left: auto; flex-wrap: wrap; }
.ir-sub-count {
    font-size: 0.72rem; font-weight: 600; color: #475569;
    padding: 0.05rem 0.45rem; border-radius: 999px; background: #f1f5f9;
}
.ir-sub-count-warn { background: #fdf3e6; color: #8a4b12; border: 1px solid #f3c89a; }

/* Detail-page subreports panel (inside the Overview body). */
.ir-subpanel { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid #eef2f7; }
.ir-subpanel-head {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.95rem; font-weight: 600; color: #0f172a;
}
.ir-subpanel-sub { margin: 0.3rem 0 0.7rem; font-size: 0.82rem; color: #6b7280; }
.ir-sublist--detail { gap: 0.4rem; }

/* ============================================================
   Read-only Job detail page: metadata header, fact lists, tab panes.
   ============================================================ */
.ir-detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; padding: 1.1rem 1.25rem; }
.ir-detail-meta-main { flex: 1 1 16rem; min-width: 0; }
.ir-detail-file { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.ir-detail-file .ir-file-icon { color: var(--ir-primary); flex: 0 0 auto; }
.ir-detail-file-name { font-size: 1.02rem; font-weight: 600; color: #0f172a; word-break: break-word; }
.ir-detail-file-sub { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.35rem; }

.ir-detail-facts { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; margin: 0; }
.ir-detail-facts > div { display: flex; flex-direction: column; gap: 0.15rem; }
.ir-detail-facts dt { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #94a3b8; }
.ir-detail-facts dd { margin: 0; font-size: 0.86rem; color: #334155; font-weight: 500; }
.ir-detail-facts-wide { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid #eef2f7; }

/* Panel header (title left, deep-link button right) — mirrors the Validator's .ir-data-toolbar. */
.ir-data-toolbar-title { display: flex; align-items: baseline; gap: 0.6rem; min-width: 0; flex-wrap: wrap; }
.ir-data-toolbar-title h3 { font-size: 0.95rem; font-weight: 700; margin: 0; color: #0f172a; }
.ir-data-body { padding: 1.15rem 1.2rem; }
.ir-detail-hint { margin: 0.85rem 0 0; }

/* Single-line code/expression cell: ellipsis + hover title for the full value. */
.ir-cell-trunc { max-width: 0; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Job-detail tab tables: one consistent type scale across every tab ─────────── */
.ir-tabtable thead th {
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    color: #94a3b8; border-bottom: 1px solid #eef2f7;
}
.ir-tabtable tbody td { font-size: 0.84rem; color: #334155; vertical-align: middle; }
/* Every technical token (field names, columns, paths, expressions) renders identically —
   same monospace family, size, weight and colour — whether it's a <code> or a .ir-mono-cell. */
.ir-tabtable code:not(.ir-code-inline),
.ir-tabtable .ir-mono-cell {
    font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.82rem;
    font-weight: 500;
    color: #334155;
    background: none;
    padding: 0;
}
/* Badges sit on a consistent baseline/size in every tab. */
.ir-tabtable .badge { font-size: 0.72rem; font-weight: 600; }

/* ── Progress donut charts (Overview tab) ─────────────────────────────────────
   Pure SVG donuts (r=15.9155 → circumference 100, so dasharray maps to a %). */
.ir-donut-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.ir-donut-card {
    display: flex; flex-direction: column; align-items: center; gap: 0.45rem;
    padding: 1rem 0.5rem;
    background: #fbfcfe; border: 1px solid #eef2f7; border-radius: 0.75rem;
}
.ir-donut { width: 92px; height: 92px; transform: rotate(0deg); }
.ir-donut-track { fill: none; stroke: #eceff4; stroke-width: 3.4; }
.ir-donut-arc {
    fill: none; stroke: var(--ir-primary); stroke-width: 3.4; stroke-linecap: round;
    transition: stroke-dasharray .5s ease;
}
.ir-donut-arc.done { stroke: #16a34a; }
.ir-donut-pct { fill: #0f172a; font-size: 9px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.ir-donut-cap { font-size: 0.78rem; font-weight: 600; color: #334155; text-align: center; }
.ir-donut-sub { font-size: 0.72rem; color: #94a3b8; text-align: center; }

/* ── Stat tiles (Overview tab): colored icon chip + label + value ─────────────── */
.ir-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.85rem;
    margin: 0 0 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid #eef2f7;
}
.ir-stat-tile {
    display: flex; align-items: center; gap: 0.8rem;
    padding: 0.85rem 0.95rem;
    background: #fff; border: 1px solid #eef2f7; border-radius: 0.75rem;
    transition: box-shadow .15s, border-color .15s;
}
.ir-stat-tile:hover { border-color: #e2e8f0; box-shadow: 0 2px 10px rgba(16, 24, 40, .06); }
.ir-stat-tile-ico {
    width: 44px; height: 44px; border-radius: 0.65rem; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
}
.ir-stat-tile-ico svg { width: 22px; height: 22px; }
.ir-stat-tile-ico.blue   { background: #eaf1ff; color: #2563eb; }
.ir-stat-tile-ico.green  { background: #e7f8ee; color: #16a34a; }
.ir-stat-tile-ico.purple { background: #f0ecfe; color: #7c3aed; }
.ir-stat-tile-ico.amber  { background: #fef3da; color: #d97706; }
.ir-stat-tile-ico.red    { background: #fdecec; color: #dc2626; }
.ir-stat-tile-ico.gray   { background: #f1f5f9; color: #64748b; }
.ir-stat-meta { min-width: 0; }
.ir-stat-label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #94a3b8; }
.ir-stat-value { font-size: 1.15rem; font-weight: 700; color: #0f172a; line-height: 1.25; }
.ir-stat-value .ir-stat-unit { font-size: 0.78rem; font-weight: 500; color: #94a3b8; margin-left: 0.25rem; }
.ir-stat-sub { font-size: 0.74rem; color: #64748b; }

/* Inline readiness note under the stat tiles. */
.ir-detail-note {
    display: flex; align-items: flex-start; gap: 0.5rem;
    padding: 0.7rem 0.9rem; border-radius: 0.6rem;
    background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412;
    font-size: 0.82rem;
}
.ir-detail-note svg { flex: 0 0 auto; margin-top: 1px; color: #ea580c; }

/* Soft pill used for the Engine column (matches the status pill aesthetic, not the bright Bootstrap badge). */
.ir-chip {
    display: inline-flex; align-items: center;
    padding: 0.18rem 0.55rem; border-radius: 999px;
    font-size: 0.76rem; font-weight: 600; line-height: 1.5; white-space: nowrap;
    border: 1px solid rgba(2, 6, 23, 0.08);
}
.ir-chip-green { background: #DCFCE7; color: #15803D; }
.ir-chip-blue  { background: #EFF6FF; color: #1D4ED8; }
.ir-chip-gray  { background: #F3F4F6; color: #4B5563; }

/* Step navigation (per-job review flow): Jobs · ← Prev · Next →. Sits in the page header Actions slot. */
.ir-stepnav { display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.ir-stepnav .btn { display: inline-flex; align-items: center; gap: 0.3rem; }

.ir-filter-row th { background: #f8fafc; padding: 0.4rem 0.5rem; border-top: 1px solid #eef2f7; }
.ir-filter-row .form-control, .ir-filter-row .form-select { font-size: 0.8rem; }
.ir-mono-cell { font-family: var(--bs-font-monospace, ui-monospace, monospace); font-size: 0.82rem; color: #334155; }

/* Status pills — palette per JobStatus (background / text). */
.ir-status {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.18rem 0.55rem; border-radius: 999px;
    font-size: 0.76rem; font-weight: 600; line-height: 1.5; white-space: nowrap;
    border: 1px solid rgba(2, 6, 23, 0.08);
}
.ir-status .ir-spinner { border-color: currentColor; border-right-color: transparent; }
.ir-status-ready      { background: #EFF6FF; color: #1D4ED8; }
.ir-status-inreview   { background: #FEF3C7; color: #B45309; }
.ir-status-published  { background: #DCFCE7; color: #15803D; }
.ir-status-converting { background: #F5F3FF; color: #6D28D9; }
.ir-status-analyzing  { background: #ECFDF5; color: #047857; }
.ir-status-queued     { background: #F9FAFB; color: #4B5563; border: 1px solid #eceff3; }
.ir-status-failed     { background: #FEE2E2; color: #B91C1C; }

.ir-actionbtn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.6rem;
    border-radius: 0.45rem;
    border: 1px solid #dbe2ea;
    color: #475569;
    background: #fff;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.ir-actionbtn:hover {
    background: var(--ir-primary);
    border-color: var(--ir-primary);
    color: #fff;
}

.ir-actionbtn svg {
    width: 0.95rem;
    height: 0.95rem;
    flex: none;
}

.ir-actionbtn-muted {
    color: #64748b;
}

.ir-actions-sep {
    width: 1px;
    height: 1.4rem;
    background: #e2e8f0;
    margin: 0 0.15rem;
}

/* "Use this report for AI learning" toggle — off (neutral) vs on (active green). */
.ir-learn-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #f8fafc;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.ir-learn-toggle svg {
    width: 0.95rem;
    height: 0.95rem;
}

.ir-learn-toggle:hover {
    border-color: #cbd5e1;
    color: #475569;
}

.ir-learn-toggle.is-on {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #047857;
}

/* --- Data binding worklist (R3c) --- */
.ir-bind-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 1rem;
    border-radius: 0.6rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    line-height: 1.5;
}

.ir-bind-banner.is-model {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
}

.ir-bind-banner.is-nomodel {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #854d0e;
}

.ir-bind-summary {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.ir-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid #eef2f7;
}

.ir-card-head h3 {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0;
    color: #0f172a;
}

.ir-path {
    font-size: 0.8rem;
    color: #1e3a8a;
    word-break: break-all;
}

.ir-path-muted {
    color: #64748b;
}

.ir-gap-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 1rem;
}

/* A gap badge that's clickable (mark-for-manual). Looks like a badge, acts like a button. */
.ir-gap-chip-btn {
    border: none;
    cursor: pointer;
    font: inherit;
    font-size: .75rem;
    font-weight: 600;
}

.ir-gap-chip-btn:hover:not(:disabled) { filter: brightness(0.95); }
.ir-gap-chip-btn:disabled { cursor: default; opacity: .7; }
/* AI Assist ran on this gap but found no matching node - dashed outline distinguishes it from not-yet-tried. */
.ir-gap-chip-btn.ir-gap-chip-noai { border: 1px dashed #b45309; }

.ir-empty-row {
    padding: 1rem;
    color: #64748b;
    font-size: 0.9rem;
}

.ir-path-select {
    font-family: var(--bs-font-monospace, monospace);
    font-size: 0.78rem;
    max-width: 32rem;
}

tr.ir-bound {
    background: #f0fdf4;
}

/* Data-model chip in the report banner */
.ir-model-ok { color: #047857; font-weight: 700; }
.ir-model-check { color: #059669; }
.ir-model-none { color: #b45309; font-style: italic; font-weight: 600; }

/* XSD drag-and-drop zone */
.ir-dropzone {
    position: relative;
    border: 2px dashed #cbd5e1;
    border-radius: 0.75rem;
    background: #f8fafc;
    margin-bottom: 1rem;
    transition: border-color .15s, background .15s;
}
.ir-dropzone:hover { border-color: #94a3b8; background: #f1f5f9; }
.ir-dropzone.is-busy { opacity: .7; }
.ir-dropzone-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ir-dropzone-inner {
    display: flex; flex-direction: column; align-items: center; gap: .4rem;
    padding: 1.6rem; text-align: center; color: #475569; pointer-events: none;
}
.ir-dropzone-inner svg { color: #94a3b8; }
.ir-dropzone-title { font-weight: 600; color: #334155; }
.ir-dropzone-sub { font-size: .82rem; color: #64748b; }

/* Toolbar (summary + search) */
.ir-bind-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap;
}
.ir-bind-summary { display: flex; gap: .4rem; }

/* Collapsible section header */
.ir-collapse-head {
    display: flex; align-items: center; gap: .6rem; width: 100%;
    padding: .9rem 1rem; background: none; border: 0; text-align: left; cursor: pointer;
}
.ir-collapse-head h3 { font-size: .95rem; font-weight: 700; margin: 0; color: #0f172a; }
.ir-expander {
    background: none; border: 0; color: #64748b; font-size: .8rem;
    cursor: pointer; padding: 0 .2rem; line-height: 1;
}

/* Bind-to-path expandable rows */
.ir-bind-table td { vertical-align: middle; }
.ir-bind-toggle { width: 2rem; padding-right: 0; }
.ir-bind-action { text-align: right; }
.ir-bind-detail > td { background: #f8fafc; }
.ir-detail { display: grid; grid-template-columns: max-content 1fr; gap: .3rem .8rem; margin: 0; padding: .5rem 0; }
.ir-detail dt { color: #64748b; font-size: .8rem; font-weight: 600; }
.ir-detail dd { margin: 0; }
.ir-cands { display: flex; flex-direction: column; gap: .25rem; }
.ir-cands { display: flex; flex-direction: column; gap: .45rem; }
.ir-cand {
    display: flex; align-items: flex-start; gap: .6rem;
    padding: .6rem .75rem; border: 1px solid #e2e8f0; border-radius: .6rem;
    cursor: pointer; transition: border-color .12s, background .12s;
}
.ir-cand:hover { border-color: #cbd5e1; background: #f8fafc; }
.ir-cand.is-chosen { border-color: #6366f1; background: #eef2ff; }
.ir-cand input { margin-top: .15rem; flex: 0 0 auto; }

/* Right-aligned row action buttons with breathing room */
.ir-row-actions { display: flex; gap: .4rem; align-items: center; justify-content: flex-end; }

/* Node-path breadcrumb: dimmed ancestors, bold leaf */
.ir-crumb { line-height: 1.6; word-break: break-word; }
.ir-crumb-anc { color: #94a3b8; font-size: .78rem; }
.ir-crumb-sep { color: #cbd5e1; margin: 0 .22rem; font-size: .75rem; }
.ir-crumb-leaf {
    color: #1e3a8a; font-weight: 700;
    font-family: var(--bs-font-monospace, ui-monospace, monospace); font-size: .82rem;
}

/* Landscape modal + a section label, for the long IFS paths / candidate picker.
   Compound selector so it beats the base `.ir-modal { max-width: 32rem }` regardless of source order. */
.ir-modal.ir-modal-wide { max-width: 1140px; width: 94vw; }
.ir-modal-label {
    font-weight: 600; color: #334155; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em;
    margin: 1.25rem 0 .6rem;
}
.ir-modal-sub-prose { margin: .2rem 0 0; font-size: .85rem; color: #64748b; }

/* The Node path / Header label key-value block inside the modal */
.ir-detail dt { padding-top: .15rem; }
.ir-detail dd { background: #f8fafc; border-radius: .45rem; padding: .4rem .55rem; }

/* "Published {time}" chip in a page header's actions. */
.ir-publish-state {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.ir-handoff-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: 0.15rem;
}

.ir-handoff-btn svg {
    width: 0.95rem;
    height: 0.95rem;
}

/* ---- File name cell ---- */
.ir-file {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    color: #1e293b;
}

.ir-file-ico {
    width: 1.05rem;
    height: 1.05rem;
    color: #94a3b8;
    flex: none;
}

.ir-nowrap { white-space: nowrap; }

/* ---- In-progress spinner inside a status badge ---- */
.ir-spinner {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    margin-right: 0.3rem;
    border: 2px solid rgba(0, 0, 0, 0.25);
    border-top-color: rgba(0, 0, 0, 0.65);
    border-radius: 50%;
    vertical-align: -1px;
    animation: ir-spin 0.7s linear infinite;
}

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

/* ---- Section header ---- */
.ir-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.ir-section-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0;
}

.ir-section-link {
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
}

/* ---- Stat tiles ---- */
.ir-stat {
    position: relative;
    background: #fff;
    border: 1px solid #e9eef5;
    border-left: 4px solid #cbd5e1;
    border-radius: 0.85rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 16px rgba(16, 24, 40, 0.05);
    padding: 1rem 1.25rem;
}

a.ir-stat-link,
button.ir-stat-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

/* Tiles used as filter toggles are <button>s; strip native button chrome. */
button.ir-stat-link {
    cursor: pointer;
    font: inherit;
}

a.ir-stat-link:hover,
button.ir-stat-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(16, 24, 40, 0.06), 0 12px 28px rgba(16, 24, 40, 0.10);
}

/* Selected filter tile */
.ir-stat-link.ir-stat-active {
    box-shadow: 0 0 0 2px var(--ir-primary), 0 4px 16px rgba(16, 24, 40, 0.08);
}

.ir-stat-ico {
    position: absolute;
    top: 1rem;
    right: 1.1rem;
    color: #94a3b8;
}

.ir-stat-ico svg {
    width: 1.25rem;
    height: 1.25rem;
}

.ir-stat-clean .ir-stat-ico { color: #16a34a; }
.ir-stat-blocked .ir-stat-ico { color: #dc2626; }
.ir-stat-review .ir-stat-ico { color: var(--ir-accent); }

/* ---- Summary chip row (count badges above a worklist) ---- */
.ir-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.ir-chips .badge {
    font-size: 0.78rem;
    padding: 0.4rem 0.6rem;
}

/* ---- Expression review: intro banner ---- */
.ir-report-banner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1.1rem 1.35rem;
    border-radius: 1rem;
    border: 1px solid #e2e8f5;
    background: linear-gradient(120deg, #eef3ff 0%, #f6f9ff 55%, #ffffff 100%);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 26px rgba(37, 71, 153, 0.07);
}

.ir-report-banner-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.ir-report-banner-file {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.9rem;
    border-radius: 0.75rem;
    background: #fff;
    border: 1px solid #e2e8f5;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.ir-report-banner-file .ir-file-icon {
    color: #4f6ef0;
    flex: 0 0 auto;
}

.ir-file-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.ir-file-label {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
}

.ir-file-name {
    font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e293b;
}

.ir-report-banner-text {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: #475569;
}

.ir-report-banner-text strong {
    color: #1e293b;
}

/* ---- Expression review: filter chips ---- */
.ir-filter-chip {
    font-size: 0.78rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #475569;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.ir-filter-chip:hover:not(:disabled) {
    border-color: #94a3b8;
    background: #f8fafc;
}

.ir-filter-chip:disabled {
    opacity: 0.45;
    cursor: default;
}

.ir-filter-chip .ir-chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    margin-left: 0.45rem;
    padding: 0 0.4rem;
    font-weight: 700;
    font-size: 0.72rem;
    line-height: 1;
    border-radius: 999px;
    background: #eef2f7;
    color: #475569;
}

/* Inactive coloured chips keep their status hue on the border + text. */
.ir-filter-chip.chip-success { color: #198754; border-color: #a3d9b8; }
.ir-filter-chip.chip-warning { color: #b5780a; border-color: #f3d28a; }
.ir-filter-chip.chip-danger  { color: #dc3545; border-color: #f0a8b0; }
.ir-filter-chip.chip-primary { color: #0d6efd; border-color: #a8c7fd; }

.ir-filter-chip.chip-success .ir-chip-count { background: #e3f3ea; color: #198754; }
.ir-filter-chip.chip-warning .ir-chip-count { background: #fbeccb; color: #b5780a; }
.ir-filter-chip.chip-danger  .ir-chip-count { background: #fbe0e3; color: #dc3545; }
.ir-filter-chip.chip-primary .ir-chip-count { background: #e1ecfe; color: #0d6efd; }

/* Active = filled with the status colour. */
.ir-filter-chip.active {
    color: #fff;
    border-color: transparent;
    background: #475569;
}

.ir-filter-chip.active .ir-chip-count {
    background: rgba(255, 255, 255, 0.28);
    color: #fff;
}

.ir-filter-chip.chip-success.active { background: #198754; color: #fff; }
.ir-filter-chip.chip-warning.active { background: #f59e0b; color: #1f2937; }
.ir-filter-chip.chip-warning.active .ir-chip-count { color: #1f2937; }
.ir-filter-chip.chip-danger.active  { background: #dc3545; color: #fff; }
.ir-filter-chip.chip-primary.active { background: #0d6efd; color: #fff; }

.ir-filter-chip.chip-neutral { color: #475569; border-color: #cbd5e1; }
.ir-filter-chip.chip-neutral .ir-chip-count { background: #eef2f7; color: #475569; }
.ir-filter-chip.chip-neutral.active { background: #64748b; color: #fff; }

/* Custom field (IFS CF$) - orange brand accent, distinct from red "Missing". */
.ir-filter-chip.chip-custom { color: #c2660a; border-color: #f6c98f; }
.ir-filter-chip.chip-custom .ir-chip-count { background: #fdebd6; color: #c2660a; }
.ir-filter-chip.chip-custom.active { background: var(--ir-accent); color: #fff; }
.ir-filter-chip.chip-custom.active .ir-chip-count { background: #fff; color: var(--ir-accent); }
.badge.ir-badge-custom { background-color: var(--ir-accent); color: #fff; }
.ir-filter-chip.chip-neutral.active .ir-chip-count { background: rgba(255, 255, 255, 0.28); color: #fff; }

.ir-filter-chip.chip-info { color: #0e7490; border-color: #a5d8e6; }
.ir-filter-chip.chip-info .ir-chip-count { background: #e0f2fe; color: #0e7490; }
.ir-filter-chip.chip-info.active { background: #0891b2; color: #fff; }
.ir-filter-chip.chip-info.active .ir-chip-count { background: rgba(255, 255, 255, 0.28); color: #fff; }

/* Inline label preceding a chip group (e.g. "Status"). */
.ir-chips-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    margin-right: 0.15rem;
}

/* Data gaps table sits in a floating card. */
.ir-gaps-card {
    border-radius: 1rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 30px rgba(16, 24, 40, 0.08);
    overflow: hidden;
    padding: 0;
}

.ir-gaps-card .table {
    margin-bottom: 0;
}

/* Card-header toolbar: result count (left) + search (right). */
.ir-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid #eef2f7;
}

/* ============================================================
   Consistent data panel: a card whose header toolbar holds the filter chips
   (left) + count/search (right). Filters live WITH the data they filter, on
   every page. The body holds the table or the list of item cards.
   ============================================================ */
.ir-data-panel {
    background: #fff;
    border: 1px solid #e6e9f0;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.ir-data-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    flex-wrap: wrap;
    padding: .7rem 1rem;
    border-bottom: 1px solid #eef2f7;
    background: #fbfcfe;
}

.ir-data-toolbar .ir-chips { margin: 0; }

.ir-data-toolbar-right {
    display: flex;
    align-items: center;
    gap: .9rem;
    flex-wrap: wrap;
    margin-left: auto;
}

/* Body variant for a list of item cards (Expressions / Binding) — item cards sit
   on a soft canvas so they read as rows of the panel. Tables use no body padding. */
.ir-data-panel-list {
    padding: 1rem 1rem .25rem;
    background: #f7f8fb;
}

.ir-data-panel-list > .ir-card { background: #fff; }

/* Legend explaining the classification badges (Direct on top, Missing below). */
.ir-legend {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: .85rem 1.15rem;
    margin-bottom: 1.25rem;
    border: 1px solid #e6e9f0;
    border-radius: 12px;
    background: #fbfcfe;
}

.ir-legend-item {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}

.ir-legend-item .badge { min-width: 4.5rem; text-align: center; }

.ir-legend-item .badge {
    flex: 0 0 auto;
    margin-top: .1rem;
}

.ir-legend-item p {
    margin: 0;
    font-size: .85rem;
    color: #475569;
    line-height: 1.5;
}

.ir-table-count {
    font-size: 0.85rem;
    color: #64748b;
}

.ir-table-count strong {
    color: #0f172a;
}

.ir-table-search {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1 1 auto;
    max-width: 24rem;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: .35rem .85rem;
    background: #fff;
}

.ir-table-search svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: #94a3b8;
}

.ir-table-search input {
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none !important;
    font-size: .88rem;
}

.ir-table-search input:focus { outline: none; }
.ir-table-search:focus-within { border-color: var(--ir-primary); }

.ir-table-empty {
    padding: 2.5rem 1rem;
    text-align: center;
    color: #94a3b8;
}

/* Sortable column headers. */
.ir-sortable thead th {
    border-top: 0;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
    background: #f8fafc;
    white-space: nowrap;
}

.ir-sortable th.ir-sort {
    cursor: pointer;
    user-select: none;
}

.ir-sortable th.ir-sort:hover {
    color: #0f172a;
}

.ir-sort-ico {
    margin-left: 0.2rem;
    color: #cbd5e1;
    font-size: 0.8rem;
}

.ir-sort-ico.active {
    color: #4f6ef0;
}

/* Clean icon action buttons (Accept / Reject / Undo). */
.ir-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-left: 0.25rem;
    padding: 0;
    border: 1px solid #e4e9f1;
    border-radius: 0.55rem;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.ir-icon-btn:hover:not(:disabled) {
    background: #f1f4f9;
    color: #0f172a;
}

.ir-icon-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.ir-icon-btn.ir-icon-accept:hover:not(:disabled) {
    background: #e3f3ea;
    border-color: #a3d9b8;
    color: #198754;
}

.ir-icon-btn.ir-icon-reject:hover:not(:disabled) {
    background: #fbe0e3;
    border-color: #f0a8b0;
    color: #dc3545;
}

/* ---- Expression review: search toolbar ---- */
.ir-review-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ir-review-toolbar .ir-search {
    max-width: 22rem;
}

.ir-review-toolbar .ir-result-count {
    white-space: nowrap;
}

/* ---- Expression review: floating cards ---- */
.ir-expr-card {
    position: relative;
    border: 1px solid #eef1f6;
    border-left: 4px solid #e9eef5;
    border-radius: 1rem;
    padding: 1.4rem 1.6rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 30px rgba(16, 24, 40, 0.08);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.ir-expr-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(16, 24, 40, 0.06), 0 22px 48px rgba(16, 24, 40, 0.14);
}

.ir-expr--success { border-left-color: #198754; }
.ir-expr--warning { border-left-color: #f59e0b; }
.ir-expr--danger  { border-left-color: #dc3545; }
.ir-expr--primary { border-left-color: #0d6efd; }
.ir-expr--manual  { border-left-color: #475569; }
.ir-expr--depends { border-left-color: #8b5cf6; }

/* Token-dependent expression: converted by the importer, blocked only on SQL Expression Fields. */
.ir-badge-depends { background: #ede9fe; color: #6d28d9; border: 1px solid rgba(109, 40, 217, 0.2); }
.ir-note--depends { background: #f5f3ff; border: 1px solid #ddd6fe; color: #5b21b6; }
.ir-note--depends .ir-note-label { background: #8b5cf6; }
.ir-note--depends a { color: #6d28d9; font-weight: 600; }

/* Header: field name (left) + status badges (right). */
.ir-expr-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid #eef2f7;
}

/* Low-confidence guardrail: a prominent warning strip under the header pushing the developer to act. */
.ir-expr-warning {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: -0.25rem 0 1rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid #f3c89a;
    border-left: 4px solid #e08e2b;
    border-radius: 8px;
    background: #fdf3e6;
    color: #8a4b12;
    font-size: 0.83rem;
    line-height: 1.4;
}
.ir-expr-warning-ico {
    flex: 0 0 auto;
    margin-top: 0.05rem;
    color: #e08e2b;
}

.ir-expr-name {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
}

.ir-expr-badges {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

/* Two-column body: Original (left) | divider | DevExpress (right). */
.ir-expr-body {
    display: flex;
    align-items: stretch;
    gap: 1.6rem;
}

.ir-expr-side {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ir-expr-divider {
    flex: 0 0 1px;
    align-self: stretch;
    background: linear-gradient(to bottom, transparent, #dfe6ef 12%, #dfe6ef 88%, transparent);
}

/* ---- Code blocks (both sides share one look) ---- */
.ir-code-block {
    border: 1px solid #e4e9f1;
    border-radius: 0.6rem;
    overflow: hidden;
    background: #fbfcfe;
}

.ir-code-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
    background: #f1f4f9;
    border-bottom: 1px solid #e4e9f1;
}

.ir-code-hint {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    font-style: italic;
    color: #94a3b8;
}

.ir-code {
    margin: 0;
    padding: 0.8rem 0.9rem;
    max-height: 14rem;
    overflow: auto;
    font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.82rem;
    line-height: 1.5;
    color: #1e293b;
    background: transparent;
    white-space: pre;
}

.ir-code--empty {
    font-style: italic;
    color: #94a3b8;
    white-space: normal;
}

/* Read-only highlighted snippet — dark code view matching the syntax-highlighter palette. */
.ir-code.ir-code--snippet {
    color: #e9e3ff;
    background: #1e1b2e;
    white-space: pre-wrap;
    word-break: break-word;
}

/* DevExpress editable box — same dark code look, but a focusable field. */
textarea.ir-code-input {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 0;
    resize: vertical;
    outline: none;
    white-space: pre;
    color: #e9e3ff;
    background: #1e1b2e;
    caret-color: #e9e3ff;
}

textarea.ir-code-input:focus {
    background: #26213a;
    box-shadow: inset 0 0 0 2px rgba(124, 92, 255, 0.4);
}

/* ---- AI advice note (dedicated callout) ---- */
.ir-note {
    margin-top: 0.85rem;
    padding: 0.7rem 0.85rem;
    border-radius: 0.6rem;
    font-size: 0.82rem;
    line-height: 1.5;
}

.ir-note--ai {
    background: #fef7e6;
    border: 1px solid #f6e2b3;
    color: #7a5b12;
}

.ir-note-label {
    display: inline-block;
    margin-right: 0.4rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #fff;
    background: #f59e0b;
}

/* ---- Footer action bar ---- */
.ir-expr-foot {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .5rem;
    margin-top: 1.1rem;
    padding-top: 0.9rem;
    border-top: 1px solid #eef2f7;
}

/* ============================================================
   Consistent action buttons within a card (Accept / Action manually /
   Bind / Change …). One look across every card: equal height, consistent
   radius, a single brand-blue primary, neutral outline secondaries.
   ============================================================ */
.ir-expr-foot .btn,
.ir-row-actions .btn,
.ir-modal-foot .btn {
    height: 2.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-weight: 500;
}

/* Card footers have room — give the actions an even, balanced width. */
.ir-expr-foot .btn,
.ir-modal-foot .btn {
    min-width: 7rem;
}

/* Inline table-row actions stay compact (several per row). */
.ir-row-actions .btn {
    min-width: 4.25rem;
}

/* Stack the two sides on narrow screens; hide the vertical rule. */
@media (max-width: 768px) {
    .ir-expr-body {
        flex-direction: column;
        gap: 1rem;
    }
    .ir-expr-divider {
        display: none;
    }
}

/* ---- Active schema status card ---- */
.ir-schema-status {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 0.75rem;
    padding: 0.9rem 1.1rem;
    margin-bottom: 1rem;
}

.ir-schema-status-ico {
    flex: none;
    color: #16a34a;
}

.ir-schema-status-ico svg {
    width: 1.5rem;
    height: 1.5rem;
}

.ir-schema-status-title {
    font-weight: 600;
    color: #14532d;
}

.ir-schema-status-sub {
    font-size: 0.82rem;
    color: #4d7c5a;
}

/* ---- Schema intro container (what to upload) ---- */
.ir-schema-intro {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem 1.15rem;
    margin-bottom: 1rem;
    border: 1px solid #e6e9f0;
    border-radius: 12px;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 70%);
}

.ir-schema-intro-ico {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #eef2ff;
    color: var(--ir-primary);
}

.ir-schema-intro-ico svg { width: 22px; height: 22px; }

.ir-schema-intro-title {
    font-weight: 600;
    color: #0f172a;
    margin-bottom: .2rem;
}

.ir-schema-intro-text {
    margin: 0;
    font-size: .9rem;
    color: #475569;
    line-height: 1.5;
}

.ir-linklike {
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--ir-primary);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.ir-linklike:hover { text-decoration: underline; }

/* ---- Schema browser table ---- */
.ir-schema-table-wrap {
    max-height: 30rem;
    overflow: auto;
}

.ir-schema-table-wrap table {
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.ir-schema-table-wrap thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: .6rem .9rem;
}

.ir-schema-table-wrap tbody td {
    padding: .5rem .9rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    font-size: .86rem;
    color: #334155;
}

.ir-schema-table-wrap tbody tr:nth-child(even) td { background: #fbfcfe; }
.ir-schema-table-wrap tbody tr:hover td { background: #eef2ff; }

/* View name as a subtle monospace pill. */
.ir-schema-view {
    display: inline-block;
    font-size: .78rem;
    font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, monospace);
    color: #3730a3;
    background: #eef2ff;
    border: 1px solid #e0e7ff;
    border-radius: 6px;
    padding: .1rem .45rem;
}

/* Field (column) name — readable, not heavy. */
.ir-schema-field { font-weight: 600; color: #0f172a; }

/* Nullable pill. */
.ir-nullable-yes { color: #64748b; }
.ir-nullable-no { color: #0f172a; font-weight: 600; }

/* ---- Extract guide modal body ---- */
.ir-guide section { margin-bottom: 1.25rem; }
.ir-guide section:last-child { margin-bottom: 0; }

.ir-guide h4 {
    font-size: .92rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 .4rem;
}

.ir-guide p {
    font-size: .88rem;
    color: #475569;
    line-height: 1.5;
    margin: 0 0 .5rem;
}

.ir-guide-code {
    background: #1e1b2e;
    color: #e9e3ff;
    border-radius: 8px;
    padding: .7rem .85rem;
    font-size: .8rem;
    overflow-x: auto;
    margin: 0;
}

.ir-guide-code code { color: inherit; white-space: pre; }

/* Guide format table — compact, clean, left-aligned. */
.ir-guide table { font-size: .84rem; }
.ir-guide table thead th {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #64748b;
    border-bottom: 1px solid #e2e8f0;
    padding: .4rem .6rem;
    text-align: left;
}
.ir-guide table tbody td {
    padding: .4rem .6rem;
    border-bottom: 1px solid #f1f5f9;
    color: #475569;
    vertical-align: top;
}
.ir-guide table code { font-size: .8rem; }

.ir-guide-note {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: .55rem .7rem;
    font-size: .82rem !important;
    color: #92400e !important;
}

/* ---- Inline banner / prompt ---- */
.ir-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 0.75rem;
    padding: 0.85rem 1.1rem;
    color: #9a3412;
}

.ir-banner-ico {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
    color: var(--ir-accent-dark);
}

.ir-banner-text {
    flex: 1;
    font-size: 0.9rem;
}

.ir-stat-num {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
    color: #0f172a;
}

.ir-stat-label {
    color: #64748b;
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

.ir-stat-clean   { border-left-color: #16a34a; }
.ir-stat-review  { border-left-color: var(--ir-accent); }
.ir-stat-blocked { border-left-color: #dc2626; }

/* ---- Modern surface system ---- */
.ir-card {
    background: #fff;
    border: 1px solid #e9eef5;
    border-radius: 0.85rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 16px rgba(16, 24, 40, 0.05);
    padding: 1.25rem 1.35rem;
    margin-bottom: 1.25rem;
}

.ir-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 0.85rem;
}

/* Clickable card (link) with a subtle hover lift. */
a.ir-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

a.ir-card-link:hover {
    transform: translateY(-2px);
    border-color: #c7d2fe;
    box-shadow: 0 4px 8px rgba(16, 24, 40, 0.06), 0 12px 28px rgba(16, 24, 40, 0.10);
}

/* Getting-started steps */
.ir-steps {
    display: grid;
    gap: 1rem;
}

.ir-step {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

.ir-step-num {
    flex: none;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: #eef2ff;
    color: var(--ir-primary);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ir-step-num.done {
    background: #dcfce7;
    color: #16a34a;
}

.ir-step-title {
    font-weight: 600;
    color: #0f172a;
}

.ir-step-text {
    color: #64748b;
    font-size: 0.9rem;
}

/* ---- Buttons ---- */
.btn {
    border-radius: 0.5rem;
    font-weight: 500;
}

.btn-lg {
    border-radius: 0.6rem;
}

/* ---- Pill badges ---- */
.badge {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0.4em 0.7em;
}

/* ---- Modern tables ---- */
.table {
    --bs-table-bg: transparent;
    margin-bottom: 0;
}

.table > thead > tr > th {
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: #64748b;
    font-weight: 600;
    border-bottom: 1px solid #e9eef5;
    background: #f8fafc;
    white-space: nowrap;
}

.table > tbody > tr > td {
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.table.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: transparent;
}

.table-hover > tbody > tr:hover > * {
    background-color: #f8fafc;
}

/* A table inside a card sits flush to the card edges. */
.ir-card > .table-responsive, .ir-card > .table {
    margin: 0;
}

/* ---- Forms ---- */
.form-control {
    border-radius: 0.5rem;
    border-color: #d8e0ea;
}

.form-control:focus {
    border-color: var(--ir-primary);
}

/* ---- Alerts: softer, rounded ---- */
.alert {
    border-radius: 0.6rem;
    border: 1px solid transparent;
}

/* ---- Code chips ---- */
code {
    background: #f1f5f9;
    color: #0f172a;
    padding: 0.1rem 0.35rem;
    border-radius: 0.35rem;
    font-size: 0.85em;
}

pre code {
    background: transparent;
    padding: 0;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* ---- Upload: drag & drop ---- */
.ir-upload {
    width: 100%;
}

.ir-dropzone {
    position: relative;
    border: 2px dashed #cbd5e1;
    border-radius: 0.9rem;
    background: #fff;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.ir-dropzone:hover {
    border-color: var(--ir-primary);
    background: #f8faff;
}

.ir-dropzone.has-files {
    background: #f8faff;
    border-color: #c7d2fe;
}

/* The native file input is laid over the whole zone so the click target and
   the browser's drag-and-drop hit area cover the styled card. */
.ir-dropzone-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.ir-dropzone-inner {
    pointer-events: none;
    text-align: center;
    padding: 2.75rem 1.5rem;
}

.ir-dropzone-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--ir-primary);
    color: #fff;
    margin-bottom: 0.85rem;
}

.ir-dropzone-ico svg {
    width: 1.85rem;
    height: 1.85rem;
}

.ir-dropzone-title {
    font-weight: 600;
    font-size: 1.05rem;
    color: #1e293b;
}

.ir-dropzone-sub {
    color: #64748b;
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

.ir-dropzone-browse {
    color: var(--ir-link);
    font-weight: 600;
    text-decoration: underline;
}

/* ---- Selected file list ---- */
.ir-file-list {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ir-file-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.6rem;
    padding: 0.6rem 0.85rem;
}

.ir-file-row-ico {
    width: 1.15rem;
    height: 1.15rem;
    color: var(--ir-primary);
    flex: none;
}

.ir-file-row-name {
    font-weight: 500;
    color: #1e293b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ir-file-row-size {
    margin-left: auto;
    color: #94a3b8;
    font-size: 0.82rem;
    white-space: nowrap;
}

.ir-file-row-remove {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border: none;
    background: transparent;
    color: #94a3b8;
    border-radius: 0.45rem;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.ir-file-row-remove:hover:not(:disabled) {
    background: #fee2e2;
    color: #dc2626;
}

.ir-file-row-remove svg {
    width: 1rem;
    height: 1rem;
}

.ir-upload-actions {
    margin-top: 1rem;
    display: flex;
    gap: 0.6rem;
}

/* ---- Data table column sizing ----
   Keep the browser's natural column distribution, but right-align the final
   (actions) column so its buttons hug the right edge instead of leaving a
   trailing gap. The actions cell never wraps. */
.ir-table th:last-child,
.ir-table td:last-child {
    text-align: right;
    white-space: nowrap;
}

/* ---- Gap worklist: "other views" disclosure ---- */
.ir-altviews {
    margin-top: 0.3rem;
}

.ir-altviews summary {
    cursor: pointer;
    color: var(--ir-link);
    font-size: 0.8rem;
    user-select: none;
}

.ir-altviews summary:hover {
    text-decoration: underline;
}

.ir-altviews ul {
    margin: 0.35rem 0 0;
    padding-left: 1.1rem;
    max-height: 12rem;
    overflow-y: auto;
}

.ir-altviews li {
    margin: 0.1rem 0;
}

/* ---- Gap worklist: column chips + stable action column ---- */
.ir-lu {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--ir-primary-dark);
    background: #eef2ff;
    border: 1px solid #dbe2f5;
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
    white-space: nowrap;
}

/* Fixed width so Accept/Reject -> Accepted/Rejected swaps don't reflow the table. */
.ir-action-cell {
    width: 11rem;
    min-width: 11rem;
}

/* ---- Decision history (audit trail panel) ---- */
.ir-history {
    background: #fff;
    border: 1px solid #e9eef5;
    border-radius: 0.85rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.ir-history > summary {
    cursor: pointer;
    padding: 0.7rem 1.1rem;
    font-weight: 600;
    color: #334155;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ir-history > summary::-webkit-details-marker { display: none; }
.ir-history > summary::before { content: "▸"; color: #94a3b8; }
.ir-history[open] > summary::before { content: "▾"; }

.ir-history-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 999px;
    background: #eef2f7;
    color: #475569;
}

.ir-history-body {
    border-top: 1px solid #eef2f7;
    padding: 0.25rem 0.4rem 0.4rem;
    overflow-x: auto;
}

/* ---- Report tabs (Main report + one tab per converted subreport) ---- */
.ir-report-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem;
    margin-bottom: 1.1rem;
    border-bottom: 1px solid #e2e8f0;
}

.ir-rtab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.95rem;
    margin-bottom: -1px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.12s ease, border-color 0.12s ease;
}

.ir-rtab:hover {
    color: #0f172a;
}

.ir-rtab.active {
    color: var(--ir-primary, #0335AD);
    border-bottom-color: var(--ir-primary, #0335AD);
}

/* Subreport tabs carry the violet accent + a ⤷ glyph. */
.ir-rtab-sub::before {
    content: "⤷";
    margin-right: 0.1rem;
    opacity: 0.65;
}

.ir-rtab-sub.active {
    color: #6d28d9;
    border-bottom-color: #6d28d9;
}

.ir-rtab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    border-radius: 999px;
    background: #eef2f7;
    color: #475569;
}

.ir-rtab.active .ir-rtab-count {
    background: #e1ecfe;
    color: var(--ir-primary, #0335AD);
}

.ir-rtab-sub.active .ir-rtab-count {
    background: #ede9fe;
    color: #6d28d9;
}

.ir-rtab-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: #dc3545;
}

/* ---- Clickable count badge (e.g. Unsupported) ---- */
.ir-badge-btn {
    border: 0;
    cursor: pointer;
    transition: filter 0.12s ease, transform 0.12s ease;
}

.ir-badge-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

/* ---- Modal / dialog ---- */
.ir-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.45);
}

.ir-modal {
    width: 100%;
    max-width: 32rem;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 10px 40px rgba(16, 24, 40, 0.25);
    overflow: hidden;
}

.ir-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.35rem;
    border-bottom: 1px solid #eef2f7;
}

.ir-modal-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.ir-modal-sub {
    margin: 0.15rem 0 0;
    font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.85rem;
    color: #64748b;
}

.ir-modal-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: #64748b;
    cursor: pointer;
}

.ir-modal-close:hover {
    background: #f1f4f9;
    color: #0f172a;
}

.ir-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 1.1rem 1.35rem;
    overflow-y: auto;
}

.ir-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.85rem 1.35rem;
    border-top: 1px solid #eef2f7;
    background: #fff;
}

.ir-unsupported-item {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    padding: 0.7rem 0;
    border-top: 1px solid #f1f4f9;
}

.ir-unsupported-item:first-of-type {
    border-top: 0;
}

.ir-unsupported-where {
    font-size: 0.9rem;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 0.2rem;
}

.ir-unsupported-what {
    font-size: 0.88rem;
    color: #1e293b;
    line-height: 1.45;
}

.ir-unsupported-do {
    margin-top: 0.2rem;
    line-height: 1.45;
}

/* ============================================================
   AI Activity panel — live "agent is working" view (Level 2)
   ============================================================ */
.ir-ai-activity {
    border: 1px solid #e2d9fb;
    border-left: 3px solid #7c3aed;
    background: linear-gradient(180deg, #faf8ff 0%, #ffffff 60%);
    border-radius: 12px;
    padding: 1rem 1.15rem 1.1rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(79, 70, 229, .07);
}

.ir-ai-activity.is-running {
    border-left-color: #7c3aed;
}

.ir-ai-activity-head {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .85rem;
}

.ir-ai-activity-spark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
    color: #fff;
    flex: 0 0 auto;
}

.ir-ai-activity-title {
    font-weight: 600;
    color: #4c1d95;
    font-size: .98rem;
}

.ir-ai-activity-x {
    margin-left: auto;
    border: none;
    background: transparent;
    font-size: 1.3rem;
    line-height: 1;
    color: #94a3b8;
    cursor: pointer;
    padding: 0 .25rem;
}

.ir-ai-activity-x:hover { color: #475569; }

/* Spinner */
.ir-ai-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ir-ai-spin .7s linear infinite;
}

.ir-ai-spinner--sm {
    width: 12px;
    height: 12px;
    border-color: rgba(124, 58, 237, .25);
    border-top-color: #7c3aed;
}

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

/* Steps list */
.ir-ai-steps {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ir-ai-step {
    display: flex;
    gap: .65rem;
    padding: .35rem 0;
    position: relative;
}

/* connecting rail */
.ir-ai-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 1.55rem;
    bottom: -0.15rem;
    width: 2px;
    background: #ece6fb;
}

.ir-ai-step-marker {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: .1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: #7c3aed;
    z-index: 1;
}

.ir-ai-step.done .ir-ai-step-marker {
    background: #ede9fe;
    color: #6d28d9;
}

.ir-ai-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #cbd5e1;
    display: inline-block;
}

.ir-ai-dot--fail {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fee2e2;
    color: #b91c1c;
    font-weight: 700;
    font-size: .8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ir-ai-step-body {
    flex: 1 1 auto;
    min-width: 0;
}

.ir-ai-step-label {
    font-size: .92rem;
    color: #334155;
    font-weight: 500;
    padding-top: .12rem;
}

.ir-ai-step.active .ir-ai-step-label { color: #4c1d95; }
.ir-ai-step.done .ir-ai-step-label { color: #64748b; }
.ir-ai-step.failed .ir-ai-step-label { color: #b91c1c; }

/* Streaming output */
.ir-ai-stream {
    margin: .5rem 0 .35rem;
}

.ir-ai-stream--collapsed > summary {
    cursor: pointer;
    font-size: .8rem;
    color: #7c3aed;
    margin-bottom: .35rem;
    user-select: none;
}

.ir-ai-stream-tag {
    display: inline-block;
    font-size: .68rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #8b5cf6;
    font-weight: 600;
    margin-bottom: .25rem;
}

.ir-ai-thinking {
    background: #f6f3ff;
    border: 1px solid #ece6fb;
    border-radius: 8px;
    padding: .55rem .7rem;
    margin-bottom: .5rem;
}

.ir-ai-thinking-text {
    display: block;
    font-size: .85rem;
    line-height: 1.55;
    color: #5b5170;
    white-space: pre-wrap;
    word-break: break-word;
    font-style: italic;
}

/* blinking caret while streaming */
.ir-ai-caret {
    display: inline-block;
    width: 7px;
    height: 1.05em;
    margin-left: 1px;
    vertical-align: text-bottom;
    background: #7c3aed;
    animation: ir-ai-blink 1s step-end infinite;
}

@keyframes ir-ai-blink { 50% { opacity: 0; } }

.ir-ai-answer {
    background: #1e1b2e;
    color: #e9e3ff;
    border-radius: 8px;
    padding: .6rem .75rem;
    margin: 0;
    font-size: .85rem;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.ir-ai-answer code { color: inherit; }

.ir-ai-thinking--muted {
    background: #f8fafc;
    border-color: #eef2f7;
}

/* Clean parsed result (replaces the raw model JSON) */
.ir-ai-proposed {
    margin: .5rem 0 .35rem;
}

/* Traffic-light confidence pill — shared by the activity panel and the expression cards.
   Green ≥ 80% (trust it) · amber 50–79% (sanity-check) · red < 50% (likely needs a manual fix). */
.ir-conf {
    display: inline-block;
    font-size: .7rem;
    font-weight: 600;
    border-radius: 999px;
    padding: .08rem .55rem;
    vertical-align: middle;
    line-height: 1.5;
}

.ir-conf--high {
    color: #15803d;
    background: #dcfce7;
}

.ir-conf--medium {
    color: #b45309;
    background: #fef3c7;
}

.ir-conf--low {
    color: #b91c1c;
    background: #fee2e2;
}

.ir-ai-proposed .ir-conf {
    margin-left: .5rem;
}

.ir-ai-proposed .ir-ai-answer {
    margin-top: .3rem;
}

.ir-ai-activity-summary {
    margin-top: .75rem;
    padding-top: .7rem;
    border-top: 1px dashed #e2d9fb;
    font-size: .9rem;
    color: #4c1d95;
    font-weight: 500;
}

.ir-ai-activity-error {
    margin-top: .6rem;
    font-size: .86rem;
    color: #b91c1c;
}

/* ============================================================
   Job review lifecycle bar (Ready for review → In review → Published)
   ============================================================ */
.ir-lifecycle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding: .7rem 1rem;
    margin-bottom: 1.25rem;
    border: 1px solid #e6e9f0;
    border-radius: 12px;
    background: #fbfcfe;
}

.ir-lifecycle.is-failed {
    border-color: #fecaca;
    background: #fef2f2;
}

.ir-lifecycle-steps {
    display: flex;
    align-items: center;
    gap: .35rem;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.ir-lc-step {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .15rem .25rem;
}

/* connector */
.ir-lc-step:not(:last-child)::after {
    content: "";
    width: 28px;
    height: 2px;
    margin-left: .35rem;
    background: #dde2ec;
    display: inline-block;
}

.ir-lc-step.done:not(:last-child)::after { background: #16a34a; }

.ir-lc-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
    background: #e9edf4;
    color: #94a3b8;
    flex: 0 0 auto;
}

.ir-lc-label {
    font-size: .85rem;
    font-weight: 500;
    color: #94a3b8;
    white-space: nowrap;
}

.ir-lc-step.done .ir-lc-dot { background: #dcfce7; color: #15803d; }
.ir-lc-step.done .ir-lc-label { color: #64748b; }

.ir-lc-step.current .ir-lc-dot { background: var(--ir-primary); color: #fff; }
.ir-lc-step.current .ir-lc-label { color: var(--ir-primary); font-weight: 600; }

.ir-lifecycle-actions {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

.ir-lc-hint {
    font-size: .82rem;
    color: #64748b;
}

/* In-review completion meters (Binding X/Y · Expressions X/Y). */
.ir-lc-meters {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}

.ir-lc-meter {
    font-size: .78rem;
    color: #475569;
    background: #eef2f7;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: .15rem .6rem;
    white-space: nowrap;
}

.ir-lc-meter strong { color: #0f172a; }

.ir-lc-meter.done {
    background: #dcfce7;
    border-color: #bbf7d0;
    color: #15803d;
}

.ir-lc-meter.done strong { color: #15803d; }

/* ============================================================
   Review & publish page
   ============================================================ */
.ir-review-summary {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: .25rem;
}

.ir-review-stat {
    flex: 1 1 10rem;
    display: flex;
    flex-direction: column;
    padding: .85rem 1rem;
    border: 1px solid #e6e9f0;
    border-radius: 12px;
    background: #fbfcfe;
}

.ir-review-stat-num {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ir-primary);
    line-height: 1.1;
}

.ir-review-stat-label {
    font-size: .8rem;
    color: #64748b;
}

/* Side-by-side .repx diff */
.ir-diff {
    font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: .78rem;
}

.ir-diff-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-weight: 600;
    color: #64748b;
}

.ir-diff-head span { padding: .45rem 1rem; }
.ir-diff-head span:first-child { border-right: 1px solid #e2e8f0; }

.ir-diff-body {
    max-height: 30rem;
    overflow: auto;
}

.ir-diff-row {
    display: grid;
    grid-template-columns: 3rem 1fr 3rem 1fr;
    align-items: stretch;
}

.ir-diff-no {
    text-align: right;
    padding: .1rem .5rem;
    color: #cbd5e1;
    background: #fbfcfe;
    user-select: none;
    border-right: 1px solid #eef2f7;
}

.ir-diff-cell {
    padding: .1rem .6rem;
    white-space: pre-wrap;
    word-break: break-all;
    color: #334155;
    background: #fff;
}

.ir-diff-cell.left { border-right: 1px solid #eef2f7; }

.ir-diff-row.changed .ir-diff-cell.left { background: #fef2f2; color: #991b1b; }
.ir-diff-row.changed .ir-diff-cell.right { background: #f0fdf4; color: #166534; }

.ir-diff-gap {
    padding: .25rem 1rem;
    text-align: center;
    color: #94a3b8;
    background: #fbfcfe;
    border-top: 1px solid #eef2f7;
    border-bottom: 1px solid #eef2f7;
    font-size: .75rem;
}

/* Compact change tables (Expressions / Bindings applied): truncated cells + an expand icon → viewer modal. */
.ir-rev-table { table-layout: fixed; width: 100%; }
.ir-rev-table th.w-field { width: 18%; }
.ir-rev-table td { vertical-align: middle; }

.ir-rev-field {
    font-weight: 700;
    color: #0f172a;
    font-size: .82rem;
    word-break: break-word;
}

.ir-cellx {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
}

.ir-trunc {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: .8rem;
    color: #334155;
}

.ir-trunc .ir-crumb { white-space: nowrap; }

/* Review change tables left-align (override the data-table actions-column right-align/nowrap). */
.ir-rev-table th:last-child,
.ir-rev-table td:last-child { text-align: left; white-space: normal; }

/* Field/column name badge — used in both the expressions and bindings change tables. */
.ir-fieldbadge {
    display: inline-block;
    font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: .76rem;
    font-weight: 600;
    color: #0f172a;
    background: #eef2f7;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: .16rem .5rem;
    white-space: nowrap;
}

.ir-cell-empty { color: #cbd5e1; }

/* Inline code view (one truncated line) — matches the dark code blocks elsewhere; full text via the expand icon. */
.ir-code-inline {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: #1e1b2e;
    color: #e9e3ff;
    border-radius: 6px;
    padding: .28rem .55rem;
    font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: .78rem;
}

/* Bindings applied: Column · Match · Source node · Bound to (full path on the expand icon). */
.ir-bindtable-wrap { padding: .35rem 1.1rem .6rem; overflow-x: auto; }

.ir-bindtable {
    width: 100%;
    border-collapse: collapse;
}

.ir-bindtable thead th {
    text-align: left;
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #94a3b8;
    font-weight: 700;
    padding: .4rem 1rem .4rem 0;
    border-bottom: 1px solid #eef2f7;
}

.ir-bindtable tbody td {
    padding: .45rem 1rem .45rem 0;
    border-bottom: 1px solid #f4f6fa;
    vertical-align: middle;
    white-space: nowrap;
}

.ir-bindtable tbody tr:last-child td { border-bottom: 0; }

.ir-bind-node {
    font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: .78rem;
    color: #64748b;
}

.ir-bindto { display: inline-flex; align-items: center; gap: .4rem; }

.ir-bind-leaf {
    font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: .78rem;
    font-weight: 700;
    color: var(--ir-primary);
}

/* Provenance badge for how a column was bound. */
.ir-mbadge {
    display: inline-block;
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: .12rem .45rem;
    border-radius: 5px;
    border: 1px solid transparent;
}

.ir-mbadge.ai { color: #6d28d9; background: #f3e8ff; border-color: #e9d5ff; }
.ir-mbadge.exact { color: #047857; background: #ecfdf5; border-color: #d1fae5; }
.ir-mbadge.mapped { color: #b45309; background: #fffbeb; border-color: #fde68a; }

/* Tokens review (read-only): per-label original text, proposed expression, and the token breakdown. */
.ir-token-body { padding: .6rem 1.1rem .2rem; display: flex; flex-direction: column; gap: .5rem; }

.ir-token-line { display: flex; gap: .85rem; align-items: flex-start; }
.ir-token-label {
    flex: 0 0 9rem;
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #94a3b8;
    font-weight: 700;
    padding-top: .4rem;
}
.ir-token-line > code { flex: 1 1 auto; min-width: 0; }

.ir-trunc-wrap { white-space: pre-wrap; word-break: break-word; font-size: .8rem; line-height: 1.5; }
/* The original layout text as a readable light block (the proposed expression keeps the dark code-view). */
code.ir-trunc-wrap:not(.ir-code-inline) {
    display: block;
    background: #f8fafc;
    border: 1px solid #eef2f7;
    border-radius: 8px;
    padding: .5rem .7rem;
    color: #334155;
}

/* Token table: left-align the "Resolves to" column (override the data-table actions-column right-align) so
   notes and SQL read normally; size the first two columns so the SQL gets the room. */
.ir-token-table { table-layout: fixed; }
.ir-token-table th:first-child, .ir-token-table td:first-child { width: 16rem; }
.ir-token-table th:nth-child(2), .ir-token-table td:nth-child(2) { width: 9rem; }
.ir-token-table th:last-child, .ir-token-table td:last-child { text-align: left; white-space: normal; }
.ir-token-table td { vertical-align: top; }
.ir-token-table .ir-fieldbadge { white-space: normal; word-break: break-word; }

.ir-token-flag { color: #b45309; font-size: .82rem; }
.ir-token-note { color: #94a3b8; font-size: .74rem; margin-top: .2rem; }
.ir-token-sql { margin: .35rem 0 0; max-height: 14rem; white-space: pre-wrap; word-break: break-word; }

/* A resolved token that was wrapped in a Crystal summary (Maximum/Sum/…) — the operation still needs
   translating, so flag it next to the resolved field reference. */
.ir-token-op {
    display: inline-block; margin-left: .4rem; padding: 0 .4rem; border-radius: 4px;
    background: #fef3c7; color: #92400e; font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em;
}

/* Reference-axis status banners inside a token card: which columns must be bound on the Data binding page
   first (warning), or a quiet confirmation once they all are. */
.ir-token-bindwarn {
    display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
    margin: .25rem 0 .75rem; padding: .55rem .75rem; border-radius: 8px;
    background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; font-size: .83rem;
}
.ir-token-bindwarn svg { flex: 0 0 auto; color: #ea580c; }
.ir-token-bindwarn .ir-fieldbadge { margin: 0 .1rem; }
.ir-token-bindwarn a { margin-left: auto; white-space: nowrap; }
.ir-token-bindok {
    display: flex; align-items: center; gap: .4rem;
    margin: .25rem 0 .75rem; font-size: .8rem; color: #15803d;
}
.btn-xs { padding: .15rem .5rem; font-size: .76rem; line-height: 1.4; border-radius: 6px; }

/* Info-accent card border (AI-suggested token labels), matching the existing primary/warning/manual accents. */
.ir-expr--info { border-left: 4px solid #38bdf8; }

/* Bind-first gate banner on the Expressions / Tokens pages — shown when AI Assist is disabled because columns
   still need binding. */
.ir-gate-banner {
    display: flex; align-items: center; gap: .75rem;
    margin: 0 0 1rem; padding: .7rem .95rem; border-radius: 10px;
    background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412;
}
.ir-gate-banner > svg { flex: 0 0 auto; color: #ea580c; }
.ir-gate-text { display: flex; flex-direction: column; gap: .1rem; font-size: .85rem; line-height: 1.35; }
.ir-gate-text strong { color: #7c2d12; }
.ir-gate-banner a { margin-left: auto; white-space: nowrap; }

/* Syntax-highlight tokens for the dark expression code-view. These classes are only emitted by
   ExpressionHighlighter (always against a dark background), so they can be coloured globally. */
.tok-field { color: #7fd1ff; }
.tok-str { color: #a5e887; }
.tok-num { color: #f3b97a; }
.tok-fn { color: #c9a6ff; }
.tok-kw { color: #ff9eb5; font-weight: 600; }
.tok-op { color: #b8c0d4; }
.tok-comment { color: #7a7596; font-style: italic; }

/* Viewer-modal head actions (copy + close). */
.ir-modal-headactions { display: inline-flex; align-items: center; gap: .15rem; }

.ir-modal-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border: 0;
    background: transparent;
    color: #64748b;
    border-radius: 6px;
    cursor: pointer;
}

.ir-modal-copy:hover { background: #f1f5f9; color: var(--ir-primary); }

/* Pre-publish PDF preview modal — large; the embedded PDF fills it. */
.ir-modal.ir-preview-modal {
    width: min(1100px, 94vw);
    max-width: none;
    height: 85vh;
}

.ir-preview-body {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .75rem;
}

.ir-preview-pdf {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.ir-preview-note { margin: 0; font-size: .78rem; color: #64748b; }

/* Binding Edit modal: two panes — left "Used in" references (control + band + highlighted snippet), right picker. */
.ir-bind-body { display: flex; gap: 1.25rem; align-items: flex-start; }
.ir-bind-refs {
    flex: 1 1 46%;
    min-width: 0;
    max-height: 24rem;
    overflow: auto;
    border-right: 1px solid #eef2f7;
    padding-right: 1.1rem;
}
.ir-bind-picker { flex: 1 1 54%; min-width: 0; }

.ir-bind-noref { color: #94a3b8; font-size: .84rem; font-style: italic; margin: .35rem 0 0; }

.ir-bind-ref { margin-bottom: .75rem; }
.ir-bind-ref:last-child { margin-bottom: 0; }

.ir-bind-ref-head { display: flex; align-items: center; gap: .4rem; margin-bottom: .3rem; flex-wrap: wrap; }
.ir-bind-ref-type { font-weight: 700; font-size: .76rem; color: #0f172a; }
.ir-bind-ref-name {
    font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: .72rem;
    color: #64748b;
}
.ir-bind-ref-band {
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-weight: 700;
    background: #eef2ff;
    color: #4f46e5;
    border: 1px solid #c7d2fe;
    border-radius: 5px;
    padding: .06rem .4rem;
}

.ir-bind-ref-code { max-height: none; white-space: pre-wrap; word-break: break-word; }

.ir-tok-hit { background: #fde68a; color: #1e1b2e; border-radius: 3px; padding: 0 .15rem; font-weight: 700; }

@media (max-width: 820px) {
    .ir-bind-body { flex-direction: column; }
    .ir-bind-refs {
        border-right: 0;
        border-bottom: 1px solid #eef2f7;
        padding-right: 0;
        padding-bottom: .85rem;
        max-height: 14rem;
    }
}

.ir-bindchip {
    display: inline-flex;
    align-items: baseline;
    gap: .3rem;
    padding: .22rem .55rem;
    background: #f8fafc;
    border: 1px solid #e9eef5;
    border-radius: 7px;
    font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: .76rem;
    font-weight: 600;
    color: #0f172a;
}

.ir-bindchip-leaf { color: var(--ir-primary); font-weight: 600; }

.ir-cellx-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    color: #64748b;
    cursor: pointer;
}

.ir-cellx-btn:hover { background: #eef2ff; color: var(--ir-primary); border-color: #c7d2fe; }

/* Viewer modal sizes to its content. */
.ir-modal.ir-detail-modal {
    max-width: min(780px, 92vw);
    width: auto;
}

.ir-detail-code {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: .82rem;
    line-height: 1.5;
    color: #e9e3ff;
    background: #1e1b2e;
    border-radius: 8px;
    padding: .85rem 1rem;
}

/* Collapsible card header (Bindings applied). */
.ir-collapse-head {
    cursor: pointer;
    user-select: none;
}

.ir-collapse-toggle {
    font-size: .8rem;
    color: var(--ir-primary);
    font-weight: 600;
    white-space: nowrap;
}

.ir-count-pill {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    color: #475569;
    background: #eef2f7;
    border-radius: 999px;
    padding: .05rem .5rem;
    vertical-align: middle;
    margin-left: .35rem;
}

/* Editable node-path field in the bind modal. */
.ir-path-input {
    font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: .82rem;
}

.ir-path-preview {
    margin-top: .4rem;
    padding: .35rem .55rem;
    background: #f8fafc;
    border-radius: 8px;
}

.ir-review-publish {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .75rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

.ir-lc-failed {
    font-size: .85rem;
    color: #b91c1c;
    font-weight: 500;
}

/* ============================================================
   Joined button groups (segmented controls). Placed LAST so it wins over the per-card
   .ir-expr-foot/.ir-row-actions button radius+min-width. Every button looks identical to a standalone
   button (white → blue), just joined: square inner edges, rounded outer corners, no per-button box.
   ============================================================ */
/* 1) Reset the CONTAINER. The DevExpress BlazingBerry theme gives .btn-group an elevation
   shadow + background + padding (the "box" behind the buttons). Strip it — !important to beat
   the theme, which loads with higher specificity. */
.btn-group, .btn-group-sm {
    box-shadow: none !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    border-radius: 0;
}
/* 2) Each button: identical to a standalone button (same height / min-width / weight,
   white → blue), just joined. */
.btn-group > .btn {
    background-color: #fff;
    color: #475569;
    border: 1px solid #dbe2ea;
    border-radius: 0;
    box-shadow: none !important;
    height: 2.1rem;
    min-width: 7rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-group.btn-group-sm > .btn { min-width: 6rem; }
.btn-group > .btn:not(:first-child) { margin-left: -1px; }
.btn-group > .btn:first-child { border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; }
.btn-group > .btn:last-child { border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; }
.btn-group > .btn:hover, .btn-group > .btn:active, .btn-group > .btn.active {
    background-color: var(--ir-primary);
    border-color: var(--ir-primary);
    color: #fff;
    z-index: 1;
}
/* Mouse-click leaves :focus on the button; keep it flat/white (no ring, no fill) — only
   keyboard focus shows the ring via .btn:focus-visible above. */
.btn-group > .btn:focus { box-shadow: none !important; }
.btn-group > .btn:disabled, .btn-group > .btn.disabled { opacity: 0.5; }

/* ============================================================
   Home dashboard: welcome header, AI telemetry, analytics, collapsible guide
   ============================================================ */

/* 1) Personalized welcome header */
/* Welcome header — small "Hi, name!" line, big welcome, quiet sub (IFS-style hierarchy). */
.ir-welcome { margin: 0.25rem 0 1rem; }
.ir-welcome-hi { font-size: 0.9rem; font-weight: 600; color: #64748b; margin: 0 0 0.15rem; }
.ir-welcome-hi strong { font-weight: 700; color: var(--ir-primary); }
.ir-welcome-title { font-size: 1.5rem; font-weight: 800; color: #0f172a; margin: 0 0 0.2rem; line-height: 1.2; }
.ir-welcome-sub { margin: 0; color: #64748b; font-size: 0.9rem; }

/* 2) Compact hero split into action + telemetry columns */
.ir-hero-compact { padding: 1rem 1.5rem; }
.ir-hero-split { display: grid; grid-template-columns: 1.35fr 1fr; gap: 1.75rem; align-items: center; }
.ir-hero-main { min-width: 0; }
.ir-hero-h { font-weight: 700; font-size: 1.4rem; margin: 0 0 0.45rem; max-width: 24ch; }
.ir-hero-lead { color: rgba(255,255,255,0.85); margin: 0 0 0.9rem; font-size: 0.9rem; max-width: 52ch; }
@media (max-width: 900px) { .ir-hero-split { grid-template-columns: 1fr; } }

/* AI telemetry — glassmorphism card on the hero */
.ir-tele {
    position: relative;
    background: linear-gradient(155deg, rgba(255,255,255,0.16), rgba(255,255,255,0.06));
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.28);
    border-radius: 1rem;
    padding: 0.85rem 1.1rem;
    box-shadow: 0 8px 30px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.25);
    color: #fff;
}
.ir-tele::before {
    content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
    background: linear-gradient(135deg, rgba(240,128,18,0.7), rgba(255,255,255,0.15) 45%, rgba(237,173,48,0.7));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0.65;
}
.ir-tele-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.ir-spark { font-size: 1.3rem; line-height: 1; filter: drop-shadow(0 0 6px rgba(237,173,48,0.9)); animation: ir-spark 2.2s ease-in-out infinite; }
@keyframes ir-spark { 0%,100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.18); opacity: 1; } }
.ir-tele-title { font-weight: 700; font-size: 0.98rem; }
.ir-tele-status { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.74rem; color: rgba(255,255,255,0.8); }
.ir-tele-dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74,222,128,0.7); animation: ir-pulse 1.8s infinite; }
@keyframes ir-pulse { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,0.6); } 70% { box-shadow: 0 0 0 7px rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } }
/* Three metrics across (column-divided) — keeps the card short. */
.ir-tele-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.ir-tele-metric { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; border-left: 1px solid rgba(255,255,255,0.16); padding: 0 0.7rem; }
.ir-tele-metric:first-child { border-left: 0; padding-left: 0; }
.ir-tele-val { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; }
.ir-tele-unit { font-size: 0.72rem; font-weight: 600; opacity: 0.8; margin-left: 0.1rem; }
.ir-tele-label { font-size: 0.66rem; color: rgba(255,255,255,0.82); text-align: left; line-height: 1.2; }

/* 3A) Overview card micro-trend pills */
.ir-stat-trend { display: inline-block; margin-top: 0.5rem; font-size: 0.72rem; font-weight: 600; padding: 0.1rem 0.5rem; border-radius: 999px; }
.ir-trend-up { background: #e7f8ee; color: #15803d; }
.ir-trend-down { background: #fdecec; color: #b91c1c; }
.ir-trend-neutral { background: #eef2f7; color: #475569; }

/* 3B) Analytics charts */
.ir-chart-card { padding: 1.1rem 1.25rem; }
.ir-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; }
.ir-chart-title { font-size: 0.95rem; font-weight: 700; margin: 0; color: #0f172a; }
.ir-donut-wrap { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.ir-donut-lg { width: 140px; height: 140px; flex: 0 0 auto; }
.ir-donut-lg-num { fill: #0f172a; font-size: 7px; font-weight: 800; text-anchor: middle; }
.ir-donut-lg-cap { fill: #94a3b8; font-size: 3px; font-weight: 600; text-anchor: middle; text-transform: uppercase; letter-spacing: 0.1em; }
.ir-chart-legend { display: flex; flex-direction: column; gap: 0.5rem; min-width: 11rem; flex: 1 1 auto; }
.ir-legend-row { display: flex; align-items: center; gap: 0.55rem; font-size: 0.84rem; }
.ir-legend-dot { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.ir-legend-name { color: #475569; flex: 1 1 auto; }
.ir-legend-val { font-weight: 700; color: #0f172a; }

.ir-bars { display: flex; flex-direction: column; gap: 0.7rem; }
.ir-bar-row { display: grid; grid-template-columns: 14rem 1fr 2rem; align-items: center; gap: 0.75rem; }
.ir-bar-label { font-size: 0.82rem; color: #475569; }
.ir-bar-track { background: #f1f5f9; border-radius: 999px; height: 0.7rem; overflow: hidden; }
.ir-bar-fill { height: 100%; border-radius: 999px; transition: width .5s ease; min-width: 3px; }
.ir-bar-val { font-size: 0.84rem; font-weight: 700; color: #0f172a; text-align: right; }
@media (max-width: 560px) { .ir-bar-row { grid-template-columns: 1fr 2rem; } .ir-bar-track { grid-column: 1 / -1; } }

/* AI-Enhanced gradient pill on the first guide card */
.ir-guide-card { position: relative; }
.ir-ai-pill {
    position: absolute; top: 0.85rem; right: 0.85rem;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; color: #fff;
    padding: 0.18rem 0.55rem; border-radius: 999px;
    background-image: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
    box-shadow: 0 1px 4px rgba(79,70,229,0.4);
}

/* ============================================================
   Sign-in page (chrome-free EmptyLayout)
   ============================================================ */
.ir-auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background:
        radial-gradient(1200px 600px at 50% -10%, rgba(3, 53, 173, 0.10), transparent 60%),
        #f1f5f9;
}
.ir-auth-inner { width: 100%; max-width: 24rem; }

.ir-auth-card {
    background: #fff;
    border: 1px solid #e9eef5;
    border-radius: 1rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 32px rgba(16, 24, 40, 0.10);
    padding: 2rem 1.75rem;
    text-align: left;
}

/* Logo + title + subtext, centered at the top of the card (inside the container). */
.ir-auth-head { text-align: center; margin-bottom: 1.6rem; }
.ir-auth-brand { display: flex; justify-content: center; margin-bottom: 1rem; }
.ir-auth-brand img { height: 2.5rem; width: auto; }
.ir-auth-title { font-size: 1.6rem; font-weight: 800; color: #0f172a; margin: 0 0 0.3rem; }
.ir-auth-sub { color: #64748b; margin: 0; font-size: 0.95rem; }

.ir-auth-error {
    display: flex; align-items: center; gap: 0.5rem;
    background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
    border-radius: 0.6rem; padding: 0.6rem 0.75rem; font-size: 0.85rem; margin-bottom: 1rem;
}
.ir-auth-error svg { flex: none; }

.ir-auth-label { display: block; font-size: 0.82rem; font-weight: 600; color: #334155; margin: 0 0 0.35rem; }
.ir-auth-label + .ir-auth-input { margin-bottom: 1rem; }
.ir-auth-input {
    width: 100%;
    border: 1px solid #dbe2ea;
    border-radius: 0.6rem;
    padding: 0.6rem 0.75rem;
    font-size: 0.92rem;
    color: #0f172a;
    background: #fff;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.ir-auth-input:focus {
    outline: none;
    border-color: var(--ir-primary);
    box-shadow: 0 0 0 3px rgba(3, 53, 173, 0.15);
}

.ir-auth-btn {
    width: 100%;
    margin-top: 0.35rem;
    border: none;
    border-radius: 0.6rem;
    padding: 0.65rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    background-image: linear-gradient(135deg, var(--ir-sidebar-start), var(--ir-sidebar-end));
    cursor: pointer;
    transition: filter 0.12s, box-shadow 0.12s;
    box-shadow: 0 4px 14px rgba(3, 53, 173, 0.30);
}
.ir-auth-btn:hover { filter: brightness(1.08); }
.ir-auth-btn:active { filter: brightness(0.96); }

.ir-auth-divider { display: flex; align-items: center; gap: 0.75rem; color: #94a3b8; font-size: 0.78rem; margin: 1.1rem 0; }
.ir-auth-divider::before, .ir-auth-divider::after { content: ""; flex: 1; height: 1px; background: #eef2f7; }

.ir-auth-ms {
    width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 0.6rem;
    border: 1px solid #dbe2ea; border-radius: 0.6rem;
    padding: 0.6rem 1rem; background: #fff; color: #334155; font-size: 0.9rem; font-weight: 600;
    cursor: pointer; text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.ir-auth-ms:hover { background: #f8fafc; border-color: #c7d2dd; color: #1e293b; }
/* Disabled state only applies to the placeholder <button> shown when Entra isn't configured. */
.ir-auth-ms:disabled { cursor: not-allowed; opacity: 0.7; }
.ir-auth-note { margin: 0.7rem 0 0; font-size: 0.74rem; color: #94a3b8; text-align: center; }

.ir-auth-loading { padding: 2rem; text-align: center; color: #64748b; }

/* ============================================================
   Report explorer (master-detail): report rail + shared JobDetailView pane
   ============================================================ */
.ir-explorer { display: flex; gap: 1.1rem; align-items: flex-start; }

.ir-explorer-list {
    flex: 0 0 270px;
    background: #fff;
    border: 1px solid #e9eef5;
    border-radius: 0.85rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 16px rgba(16, 24, 40, 0.05);
    overflow: hidden;
    position: sticky;
    top: 0;
    max-height: calc(100vh - 8.5rem);
    display: flex;
    flex-direction: column;
}
.ir-explorer-search { position: relative; padding: 0.6rem; border-bottom: 1px solid #eef2f7; }
.ir-explorer-search svg { position: absolute; left: 1.05rem; top: 50%; transform: translateY(-50%); width: 0.95rem; height: 0.95rem; color: #94a3b8; }
.ir-explorer-search input {
    width: 100%; border: 1px solid #dbe2ea; border-radius: 0.5rem;
    padding: 0.4rem 0.5rem 0.4rem 1.9rem; font-size: 0.85rem; color: #0f172a;
}
.ir-explorer-search input:focus { outline: none; border-color: var(--ir-primary); box-shadow: 0 0 0 3px rgba(3, 53, 173, 0.12); }

.ir-explorer-rows { overflow-y: auto; }
.ir-explorer-item {
    display: flex; flex-direction: column; gap: 0.3rem;
    padding: 0.6rem 0.75rem; border-bottom: 1px solid #f1f5f9;
    text-decoration: none; color: #334155; cursor: pointer;
    border-left: 3px solid transparent;
    transition: background .1s, border-color .1s;
}
.ir-explorer-item:hover { background: #f8fafc; }
.ir-explorer-item.active { background: #eff4ff; border-left-color: var(--ir-primary); }
.ir-explorer-name { font-size: 0.86rem; font-weight: 600; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ir-explorer-item.active .ir-explorer-name { color: var(--ir-primary); }
.ir-explorer-item .ir-status { align-self: flex-start; }
.ir-explorer-empty { padding: 1rem 0.75rem; font-size: 0.84rem; color: #94a3b8; text-align: center; }

.ir-explorer-detail { flex: 1 1 auto; min-width: 0; }
.ir-explorer-placeholder {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem;
    min-height: 18rem; color: #94a3b8;
    background: #fff; border: 1px dashed #dbe2ea; border-radius: 0.85rem;
}
.ir-explorer-placeholder p { margin: 0; font-size: 0.9rem; }

/* Right-aligned action row above the metadata card (Jobs / Preview / Review). */
.ir-detail-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-bottom: 0.85rem; flex-wrap: wrap; }

@media (max-width: 820px) {
    .ir-explorer { flex-direction: column; }
    .ir-explorer-list { flex: 1 1 auto; width: 100%; position: static; max-height: 16rem; }
}

/* Handoff tasks tab (post-handoff manual work). */
.ir-handoff-h { display: flex; align-items: center; gap: 0.45rem; font-size: 0.92rem; font-weight: 700; color: #0f172a; margin: 1.4rem 0 0.2rem; }
.ir-handoff-h:first-child { margin-top: 0; }
.ir-handoff-sub { font-size: 0.82rem; color: #64748b; margin: 0 0 0.6rem; }
.ir-handoff-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem; }
.ir-chip-code {
    font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.8rem; color: #334155; background: #f1f5f9; border: 1px solid #e2e8f0;
    border-radius: 6px; padding: 0.15rem 0.5rem;
}

/* Decision history: original → result change cell + AI-suggested badge. */
.ir-change { display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.ir-change-from { color: #94a3b8; text-decoration: line-through; }
.ir-change-arrow { color: #94a3b8; }
.ir-change-to { color: #334155; }
.ir-badge-ai { background-image: linear-gradient(135deg, #7c3aed, #4f46e5); color: #fff; }

/* Data-binding bindable table: header selection toolbar. */
.ir-bind-toolbar { margin-left: auto; display: inline-flex; align-items: center; gap: 0.6rem; }
.ir-bind-selcount { font-size: 0.8rem; color: #64748b; white-space: nowrap; }

/* Bindable card title: "Bind [Crystal Report Column] to [IFS Report Studio Json Path]" with pills. */
.ir-bind-title { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; margin: 0; font-size: 0.95rem; font-weight: 600; color: #0f172a; }
.ir-pill-crystal, .ir-pill-ifs { display: inline-flex; align-items: center; font-size: 0.78rem; font-weight: 700; line-height: 1; padding: 0.2rem 0.5rem; border-radius: 999px; border: 1px solid transparent; }
.ir-pill-crystal { background: #fef3c7; color: #92400e; border-color: rgba(146, 64, 14, 0.18); }
.ir-pill-ifs { background: #eaf1ff; color: #2563eb; border-color: rgba(37, 99, 235, 0.18); }

/* Confirmation modal: blue title icon + solid Yes (blue) / No (red). */
.ir-confirm-label { display: inline-flex; align-items: center; gap: 0.5rem; }
.ir-confirm-ico { width: 20px; height: 20px; color: var(--ir-primary); flex: 0 0 auto; }
.ir-btn-blue { background: var(--ir-primary); border-color: var(--ir-primary); color: #fff; }
.ir-btn-blue:hover, .ir-btn-blue:focus, .ir-btn-blue:active { background: var(--ir-primary-dark); border-color: var(--ir-primary-dark); color: #fff; }
.ir-btn-blue:disabled { background: var(--ir-primary); border-color: var(--ir-primary); color: #fff; opacity: 0.6; }