/* Nesting Sandbox (Silvercards.UI/Pages/NestingSandboxPage.razor). Layout after WPF SilverCards/Jobs/NestingSandboxView.xaml.
   Grid header and selected-row paint come from silvercards-data-grid.css; colors below reuse po-hybrid.css / sc-menu-bar values. */
.ns-root {
    --ns-bar: #b4b4b4;
    --ns-line: #c8c8c8;
    --ns-dark: #424242;
    --ns-select: linear-gradient(to bottom, #fdd3a8 0%, #fce79f 100%);
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-size: var(--sc-desktop-font-size, 0.8125rem);
    color: #222;
    background: #fafafa;
}

.ns-root .mud-typography,
.ns-root .mud-input,
.ns-root .mud-input-label,
.ns-root .mud-table-cell {
    font-size: 1em;
}

/* Top menu: New, Save, Print, Run Nest. */
.ns-topbar {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    min-height: 1.875rem;
    padding: 0 0.25rem;
    background: var(--ns-bar);
    flex: 0 0 auto;
}

.ns-tool {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.625rem;
    padding: 0.125rem 0.375rem;
    border: 0;
    border-radius: 2px;
    background: transparent;
    color: #383434;
    cursor: pointer;
}

.ns-tool svg {
    display: block;
    width: 1.375rem;
    height: 1.375rem;
}

.ns-tool-primary {
    color: #2828DA;
}

.ns-tool:hover:not(:disabled) {
    background-color: rgba(38, 160, 218, 0.24);
    box-shadow: inset 0 0 0 1px #26a0da;
}

.ns-tool:disabled {
    opacity: 0.45;
    cursor: default;
}

.ns-menu {
    display: inline-flex;
}

.ns-menu .mud-button-root {
    padding: 0;
    min-width: 0;
}

/* Nest Name: one underlined field, like the WPF EditControl. Sits over the tabs, so it reads as the nest being edited. */
.ns-name {
    flex: 0 0 auto;
    width: 18rem;
    max-width: 100%;
    padding: 0 0.25rem 0.375rem;
}

.ns-name .mud-input-control {
    margin: 0 !important;
}

.ns-name .mud-input {
    font-size: 1.15em;
}

/* Nest list | work column (Nest Name, tabs, then the toolbar and grid). */
.ns-body {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
    border-top: 1px solid var(--ns-line);
}

.ns-work {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0.25rem 0.375rem 0.375rem;
    background: #fff;
}

/* Tabs run across the top of the pane, like folder tabs on the toolbar below. */
.ns-tabs {
    display: flex;
    flex: 0 0 auto;
    gap: 0.125rem;
    border-bottom: 2px solid var(--ns-dark);
    overflow-x: auto;
}

.ns-tab {
    flex: 0 0 auto;
    border: 0;
    border-radius: 0.1875rem 0.1875rem 0 0;
    background: transparent;
    font: inherit;
    font-size: 1.1em;
    padding: 0.3rem 1rem;
    text-align: center;
    color: #222;
    cursor: pointer;
}

.ns-tab:hover {
    background-color: #e8e8e8;
}

.ns-tab-active,
.ns-tab-active:hover {
    background: var(--ns-dark);
    color: #f0f0f0;
    font-weight: 600;
}

.ns-tab:focus-visible,
.ns-nest:focus-visible {
    outline: 2px solid #26a0da;
    outline-offset: -2px;
}

.ns-main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.ns-pane {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ns-line);
}

.ns-toolbar {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    min-height: 1.875rem;
    padding: 0 0.25rem;
    background: var(--ns-bar);
    flex: 0 0 auto;
}

.ns-search {
    margin-left: auto;
    width: 14rem;
    max-width: 50%;
}

.ns-search .mud-input-control {
    margin: 0 !important;
}

.ns-search .mud-input {
    background: #fff;
    padding: 0 0.25rem;
}

/* Grid fills the pane to the bottom (mudblazor-datagrid.mdc Layout; same chain as .po-grid). */
.ns-grid {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ns-grid > .mud-table,
.ns-grid > .mud-table > .mud-table-container {
    height: 100%;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.ns-grid > .mud-table > .mud-table-container {
    flex: 1;
    min-height: 0;
    /* The pane stays 390px when that is the space it has. Columns hug their text,
       and this pane scrolls instead of clipping Length when the text is wider. */
    overflow: auto;
}

/* width:1% on the data columns (see _col) plus nowrap hugs the header and the value.
   min-content is the floor, so a fixed table width cannot squash that text.
   max-content is the wrong floor here: the untitled filler column grows without a limit. */
.ns-grid .mud-table-root {
    width: 100%;
    min-width: min-content;
}

.ns-grid .column-header {
    width: max-content;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

/* Mud cell edit keeps Type, Size, and Grade as autocomplete inputs in every row.
   Those inputs are width:100% and min-width:0, and .mud-select ellipsizes the slot,
   so the column stays as wide as the header and the value reads as 8x… or A50….
   Size the editor to its text. !important wins on the WASM host, which loads
   MudBlazor.css after this sheet. */
.ns-grid .mud-input-control,
.ns-grid .mud-select,
.ns-grid .mud-autocomplete {
    /* width stays auto (no !important) so a cell editor's width:100% can fill the cell.
       min-content and field-sizing below still keep the column at least as wide as the value. */
    width: auto;
    max-width: none !important;
    flex: 0 0 auto;
    display: inline-block;
}

.ns-grid .mud-input > input.mud-input-root,
.ns-grid .mud-input-slot.mud-input-root,
.ns-grid .mud-select .mud-select-input .mud-input-slot {
    width: auto;
    min-width: min-content !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    field-sizing: content;
}

/* Header and body share the tight padding. Mud dense headers are 16px/24px,
   which pushes Length past a 390px pane. */
.ns-grid .mud-table-cell {
    padding: 0.125rem 0.3rem !important;
    padding-inline-start: 0.3rem !important;
    padding-inline-end: 0.3rem !important;
    vertical-align: middle;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

/* Sort and column menus are off (Sortable and Filterable are false).
   Mud still lays out the menu button, and that width pushes Length past a 390px pane. */
.ns-grid .column-options,
.ns-grid .column-header .column-options {
    display: none !important;
}

/* WPF row indicator column -> selector column (PurchaseOrdersPage .po-select-col). */
.ns-grid .mud-table-cell.ns-select-col {
    width: 2rem;
    min-width: 2rem;
    max-width: 2rem;
    padding: 0 0.125rem !important;
    padding-inline-start: 0.125rem !important;
    padding-inline-end: 0.125rem !important;
    text-align: center;
}

.ns-grid .ns-row-select {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 1.375rem;
    visibility: hidden;
    cursor: pointer;
}

.ns-grid .mud-table-body .mud-table-row:hover .ns-row-select,
.ns-grid .mud-table-body .mud-table-row.sc-datagrid-row-selected .ns-row-select {
    visibility: visible;
}

.ns-grid .ns-row-select svg {
    display: block;
    width: 1rem;
    height: 1rem;
    pointer-events: none;
}

/* Results detail rows (WPF DetailDescriptor): indented, no fill. */
.ns-detail {
    padding: 0.25rem 0 0.375rem 2rem;
    background: #fafafa;
}

.ns-detail .mud-table {
    display: inline-block;
    box-shadow: none;
    background: transparent;
}

.ns-summary {
    flex: 1;
    min-height: 0;
    margin: 0;
    padding: 0.5rem 0.75rem;
    overflow: auto;
    border: 1px solid var(--ns-line);
    font: inherit;
    tab-size: 4;
    white-space: pre;
}

.ns-empty {
    margin: 0;
    padding: 1rem;
    color: #6b6b6b;
}

/* Nest list (left column: Name filter, Show more, list). */
.ns-list {
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--ns-line);
    background: #fff;
}

.ns-list-head {
    display: flex;
    align-items: flex-end;
    gap: 0.125rem;
    padding: 0.125rem 0.25rem 0.25rem 0.375rem;
    border-bottom: 1px solid var(--ns-line);
    flex: 0 0 auto;
}

.ns-list-head .mud-input-control {
    flex: 1;
    min-width: 0;
    margin: 0 !important;
}

.ns-nests {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 0.25rem;
}

.ns-nest {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    font: inherit;
    padding: 0.2rem 0.375rem;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ns-nest:hover {
    background-color: #e8e8e8;
}

.ns-nest.sc-datagrid-row-selected,
.ns-nest.sc-datagrid-row-selected:hover {
    background-color: #fdd3a8;
    background-image: var(--ns-select);
}

/* Phone width: one column. Nest list on top (pick before edit), then Nest Name, tabs, toolbar and grid. */
@media (max-width: 40rem) {
    .ns-root {
        overflow: auto;
    }

    .ns-name {
        width: auto;
    }

    .ns-body {
        flex: 1 0 auto;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(26rem, 1fr);
    }

    .ns-list {
        max-height: 11rem;
        border-right: 0;
        border-bottom: 1px solid var(--ns-line);
    }

    .ns-work {
        padding: 0.25rem 0.125rem 0.125rem;
    }

    .ns-tab {
        flex: 1 0 auto;
        padding: 0.5rem 0.5rem;
    }

    /* Tighter padding so a short Stock row still fits a 390px pane. Columns stay
       content-sized; a long Length scrolls in the pane instead of being clipped. */
    .ns-grid .mud-table-cell {
        padding: 0.1rem 0.15rem !important;
        padding-inline-start: 0.15rem !important;
        padding-inline-end: 0.15rem !important;
    }

    .ns-grid .mud-table-cell.ns-select-col {
        width: 1.35rem !important;
        min-width: 1.35rem !important;
        max-width: 1.35rem !important;
    }

    .ns-search {
        width: auto;
        flex: 1;
        max-width: none;
        margin-left: 0.5rem;
    }
}

/* Cell editors fill the whole cell, so a click anywhere in the cell (not only on the
   digits) lands in the input and starts editing. The input box stretches; text stays left.
   field-sizing:fixed lets width:100% win over the content auto-size rule above; that
   rule's min-width:min-content still floors the column at the value. */
.ns-grid .mud-table-cell:has(.mud-input-control) {
    padding: 0 !important;
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
}
.ns-grid .mud-table-cell .mud-input-control,
.ns-grid .mud-table-cell .mud-input-control > .mud-input-control-input-container,
.ns-grid .mud-table-cell .mud-input,
.ns-grid .mud-table-cell .mud-autocomplete {
    width: 100%;
    min-width: 0;
    margin: 0;
}
.ns-grid .mud-table-cell .mud-input > input.mud-input-root {
    width: 100%;
    box-sizing: border-box;
    min-height: 2rem;
    padding: 0 0.3rem;
    cursor: text;
    field-sizing: fixed;
}

/* Autocomplete list is not tied to the column (RelativeWidth=Ignore): at least 12rem,
   grows to the longest value, never wraps. Popovers render outside .ns-root. */
.mud-popover.ns-ac-popover {
    min-width: 12rem;
    max-width: min(24rem, 95vw);
}
.mud-popover.ns-ac-popover .mud-list-item-text,
.mud-popover.ns-ac-popover .mud-typography {
    white-space: nowrap;
}
@media (max-width: 40rem) {
    .ns-grid .mud-table-cell .mud-input > input.mud-input-root {
        padding: 0 0.15rem;
    }
}