/* CNC file checker — flyout resize grips (QC left, document right) + members splitter */
/* ZIndex stays at component default (1250): transparent top spacer sits under NavMenu; panel body starts below the bar. */
:root {
    --cnc-flyout-top-spacer: 150px;
}

/* Syncfusion may set inline top/height; JS re-applies full viewport after portal + open/close. */
.e-sidebar.cnc-qc-flyout,
.e-sidebar.cnc-doc-flyout,
.e-sidebar.cnc-library-flyout {
    top: 0 !important;
    height: 100vh !important;
    max-height: 100dvh !important;
}

/* Syncfusion wraps ChildContent — stretch so inner flex layout gets full height */
.e-sidebar.cnc-qc-flyout .e-sidebar-content,
.e-sidebar.cnc-doc-flyout .e-sidebar-content,
.e-sidebar.cnc-library-flyout .e-sidebar-content {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Backdrop: full viewport; z-index from Syncfusion (below NavMenu — top chrome stays usable). */
body:has(.cnc-doc-flyout.e-sidebar:not(.e-close)) > .e-sidebar-overlay,
body:has(.cnc-qc-flyout.e-sidebar:not(.e-close)) > .e-sidebar-overlay,
body:has(.cnc-library-flyout.e-sidebar:not(.e-close)) > .e-sidebar-overlay {
    top: 0 !important;
    height: 100vh !important;
    max-height: 100dvh !important;
}

.cnc-flyout-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    max-height: 100dvh;
    position: relative;
}

/* Clear nav / sticky top bar: clicks pass through to the app chrome behind */
.cnc-flyout-top-spacer {
    flex: 0 0 var(--cnc-flyout-top-spacer);
    min-height: var(--cnc-flyout-top-spacer);
    pointer-events: none;
    background: transparent;
}

.cnc-flyout-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--bomsync-elevated-surface, var(--bs-body-bg, #fff));
}

.cnc-flyout-header-row {
    flex-shrink: 0;
}

/* CSV Monaco in doc flyout: bounded flex area; do not use min-w-0 on this host (shrinks Monaco to ~column min-content) */
.cnc-flyout-csv-monaco-host {
    min-height: 240px;
    overflow: hidden;
    height: calc(100dvh - var(--cnc-flyout-top-spacer) - 8.5rem);
}

/* Checker Members tab + doc flyout: column flex chain for toolbar + editor */
.cnc-checker-csv-editor-host .csv-monaco-root {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 100%;
    width: 100%;
    max-width: 100%;
}

.cnc-checker-csv-editor-host .csv-monaco-editor-host {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 100%;
    width: 100%;
}

/* Override global syncfusion #csvEditor { min-width:0 } so flex does not clip long lines to ~100 chars */
#cnc-members-split-top .cnc-checker-csv-editor-host #csvEditor,
.cnc-flyout-csv-monaco-host #csvEditor {
    min-width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: min(36vh, 420px) !important;
    max-height: 100% !important;
}

#cnc-members-split-top .cnc-checker-csv-editor-host #csvEditor .monaco-editor,
.cnc-flyout-csv-monaco-host #csvEditor .monaco-editor {
    min-width: 100% !important;
    max-width: none !important;
}

/* Word wrap off: syncfusion.css pins .monaco-editor-background to width:100%, which clips glyphs past ~viewport (~105 chars).
   Let the background span at least the full line width so Monaco can scroll horizontally. */
#cnc-members-split-top .cnc-checker-csv-editor-host #csvEditor .monaco-editor .monaco-editor-background,
.cnc-flyout-csv-monaco-host #csvEditor .monaco-editor .monaco-editor-background {
    width: auto !important;
    min-width: 100% !important;
    max-width: none !important;
}

/* Members CSV grid: horizontal + vertical scroll when total column width exceeds pane (flyout unchanged — same component, host class). */
#cnc-members-split-top .cnc-checker-csv-editor-host .e-grid .e-gridcontent,
#cnc-members-split-top .cnc-checker-csv-editor-host .e-grid .e-content {
    overflow-x: auto !important;
    overflow-y: auto !important;
}

/* Scrollable body under flyout title row (matches file-manager preview column flex pattern). */
.cnc-flyout-scroll-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.cnc-flyout-grip {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10px;
    z-index: 25;
    cursor: ew-resize;
    touch-action: none;
    background: transparent;
    box-sizing: border-box;
}

.cnc-flyout-grip:focus {
    outline: 2px solid var(--brand-blue, #1a365d);
    outline-offset: -2px;
}

.cnc-flyout-grip--qc {
    right: 0;
    margin-right: -5px;
}

.cnc-flyout-grip--library {
    right: 0;
    margin-right: -5px;
}

.cnc-flyout-grip--doc {
    left: 0;
    margin-left: -5px;
}

.cnc-flyout-grip:hover,
.cnc-flyout-grip:focus-visible {
    background: rgb(var(--bomsync-shadow-rgb, 17 27 44) / 0.08);
}

/* Report / QC — align with Bootstrap warning badge (Rules context: incomplete) */
.cnc-checker-warn-toolbar.e-btn,
.cnc-checker-warn-toolbar.e-css.e-btn {
    background-color: var(--bs-warning, #ffc107) !important;
    border-color: var(--bs-warning, #ffc107) !important;
    color: var(--bs-dark, #212529) !important;
}

.cnc-checker-warn-toolbar.e-btn:hover,
.cnc-checker-warn-toolbar.e-css.e-btn:hover {
    background-color: color-mix(in srgb, var(--bs-warning, #ffc107) 88%, #000) !important;
    border-color: color-mix(in srgb, var(--bs-warning, #ffc107) 88%, #000) !important;
    color: var(--bs-dark, #212529) !important;
}

/* Saved CSV library flyout — grid fills viewport below header */
.cnc-library-grid-host {
    flex: 1 1 auto;
    min-height: 280px;
    height: calc(100dvh - var(--cnc-flyout-top-spacer) - 10.5rem);
    position: relative;
}

.cnc-library-grid-host .e-grid {
    height: 100% !important;
}

/* Members / errors panel vs detail strip — vertical split */
#cnc-members-split-root {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}

#cnc-members-split-top {
    flex: none;
    min-height: 200px;
    max-height: min(72vh, 900px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#cnc-members-split-top .cnc-checker-main-tab.e-tab {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#cnc-members-split-top .cnc-checker-main-tab.e-tab .e-content {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    /* Hidden here: Members grid scrolls inside .cnc-members-monaco-host; Monaco text scrolls inside the editor */
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Active tab panel fills height so CSV grid / Monaco grow with the splitter */
#cnc-members-split-top .cnc-checker-main-tab.e-tab .e-content > .e-item {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

#cnc-members-split-top .cnc-members-tab-pane {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

#cnc-members-split-top .cnc-members-monaco-host {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}

/* Errors tab: SfGrid fills tab pane above splitter */
#cnc-members-split-top .cnc-errors-grid-fill {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow-x: auto;
    display: flex;
    flex-direction: column;
    height: 100%;
}

#cnc-members-split-grip {
    flex: none;
    height: 10px;
    margin: 4px 0;
    border-radius: 4px;
    cursor: ns-resize;
    touch-action: none;
    background: rgb(var(--bomsync-shadow-rgb, 17 27 44) / 0.1);
}

#cnc-members-split-grip:hover,
#cnc-members-split-grip:focus-visible {
    background: rgb(var(--bomsync-shadow-rgb, 17 27 44) / 0.18);
}

#cnc-members-split-grip:focus {
    outline: 2px solid var(--brand-blue, #1a365d);
    outline-offset: 2px;
}

#cnc-members-split-bottom {
    flex: 0 0 auto;
    min-height: 0;
}

/* QC flyout — manual checklist (top) vs session activity log (bottom) */
.cnc-qc-split-root {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.cnc-qc-split-top {
    flex: 1 1 52%;
    min-height: 160px;
    overflow: auto;
    padding: 0.75rem 1rem;
}

.cnc-qc-split-grip {
    flex: none;
    height: 6px;
    margin: 0 0.75rem;
    border-radius: 3px;
    background: rgb(var(--bomsync-shadow-rgb, 17 27 44) / 0.12);
}

.cnc-qc-split-bottom {
    flex: 1 1 48%;
    min-height: 120px;
    overflow: auto;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--bomsync-border-strong, #cbd5e1);
    background: var(--bomsync-page-bg, #f8fafc);
}

.cnc-qc-activity-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cnc-qc-activity-list li {
    font-size: 0.8125rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid rgb(var(--bomsync-shadow-rgb, 17 27 44) / 0.08);
}

.cnc-qc-activity-list li:last-child {
    border-bottom: none;
}

/* QC flyout — automated vs manual (theme-aligned; not plain greyscale) */
.cnc-qc-automation-banner {
    border: 1px solid var(--bomsync-border-strong, #cbd5e1);
    border-radius: 6px;
    padding: 0.5rem 0.65rem;
    margin-bottom: 0.75rem;
    font-size: 0.8125rem;
    background: var(--bomsync-elevated-surface, #eef2f7);
    color: var(--bomsync-text-secondary, #334155);
}

.cnc-qc-automation-banner--blocked {
    border-color: color-mix(in srgb, var(--bs-warning, #ffc107) 45%, var(--bomsync-border-strong, #cbd5e1));
    background: color-mix(in srgb, var(--bs-warning, #ffc107) 12%, var(--bomsync-page-bg, #f8fafc));
    color: var(--bomsync-text-primary, #1e293b);
}