/* Operational layouts. Bootstrap remains the grid, table and form system.
   Screen-only sizing must never constrain printed receipts or reports. */
@media screen {
    #main-content, #main-content .row > *,
    #main-content .card, #main-content .card-body,
    #main-content .tab-content, #main-content .tab-pane {
        min-width: 0;
    }
    #main-content .table-responsive,
    #main-content .table-scroll-x {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        position: relative; /* contain absolutely positioned accessible captions */
        overflow-x: auto;
        overscroll-behavior-x: contain;
    }
    /* overflow-x:auto forces overflow-y to auto too, and a collapsed table
       border rounds a pixel past the wrapper on fractional-DPR screens
       (Windows at 125%, or browser zoom), so one-row tables grew a vertical
       scrollbar. Zero specificity: a wrapper that is meant to scroll
       vertically (.composer-catalogue-scroll) still declares its own. */
    :where(#main-content .table-responsive, #main-content .table-scroll-x) {
        overflow-y: hidden;
    }
    #main-content .table-responsive:focus-visible {
        outline: 2px solid var(--action-green);
        outline-offset: 2px;
    }
    #main-content .table {
        --bs-table-border-color: var(--divider-soft);
    }
    #main-content .table:not(.table-sm) > :not(caption) > * > * {
        padding: 0.65rem 0.75rem;
    }
    #main-content .table:not(.table-sm) td { font-size: 0.875rem; }
    #main-content .table > thead > tr > th {
        font-size: 0.75rem;
        vertical-align: middle;
    }
    #main-content .table :is(td, th):is(.text-end-num, .text-right-num, .table-number) {
        text-align: right;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }
    #main-content .table td.text-end:not(:has(form, .dropdown, .action-btn-row)) {
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }
    .table-reference {
        min-width: 10rem;
        max-width: 18rem;
        overflow-wrap: anywhere;
    }
    .table-description {
        min-width: 12rem;
        max-width: 24rem;
        overflow-wrap: anywhere;
    }
    .table-input-column { min-width: 8rem; }
    .table-product-column { min-width: 14rem; }
    .table-actions-column { white-space: nowrap; }
    .table-inline-form {
        display: flex;
        flex-wrap: wrap;
        align-items: end;
        gap: 0.5rem;
        min-width: 16rem;
    }
    .table-inline-form :is(.form-control, .form-select) {
        flex: 1 1 8rem;
        min-width: 0;
        width: auto;
    }
    .stock-page-header {
        flex-wrap: wrap;
        align-items: start;
    }
    .stock-page-heading { flex: 1 1 20rem; overflow-wrap: anywhere; }
    .stock-page-actions {
        flex: 0 1 auto;
        min-width: 0;
        max-width: 100%;
        align-items: center;
    }
    .stock-page-actions :is(.btn, .btn-action) {
        min-height: 2.5rem;
        max-width: 100%;
    }
    .stock-subnav, .stock-subnav-row, .order-desk-tabs, .nav-tabs {
        min-width: 0;
        max-width: 100%;
    }
    .order-desk-tab, .nav-tabs .nav-link {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
    }
    .order-desk-tab { white-space: nowrap; }

    /* One layout for server filters, client searches and catalogue controls. */
    :is(.filter-bar, .filter-bar-form, .order-desk-toolbar, .sales-filter-grid, .list-filters, .composer-catalogue-toolbar, .filter-toolbar) {
        display: flex;
        flex-wrap: wrap;
        align-items: end;
        gap: 0.75rem;
        min-width: 0;
        max-width: 100%;
    }
    :is(.filter-bar, .filter-bar-form, .order-desk-toolbar, .sales-filter-grid, .list-filters, .composer-catalogue-toolbar, .filter-toolbar) > :where(:not(input[type="hidden"]):not(.filter-bar-actions):not(.sales-filter-grid__actions):not(.filter-actions):not(.btn):not(.btn-action)) {
        flex: 1 1 12rem;
        min-width: 0;
        max-width: 100%;
        width: auto;
    }
    :is(.filter-bar, .filter-bar-form, .order-desk-toolbar, .sales-filter-grid, .list-filters, .composer-catalogue-toolbar, .filter-toolbar) > :is(.filter-group-wide, .order-desk-toolbar-search, .composer-search) {
        flex-basis: 20rem;
        flex-grow: 2;
    }
    :is(.filter-bar, .filter-bar-form, .order-desk-toolbar, .sales-filter-grid, .list-filters, .composer-catalogue-toolbar, .filter-toolbar) .filter-group { min-width: 0; }
    :is(.filter-bar, .filter-bar-form, .order-desk-toolbar, .sales-filter-grid, .list-filters, .composer-catalogue-toolbar, .filter-toolbar) label:not(.visually-hidden):not(.form-check-label), .tc-search-label {
        display: block;
        margin: 0 0 0.375rem;
        font-size: 0.8125rem;
        font-weight: 500;
        line-height: 1.5;
        color: var(--input-text);
    }
    :is(.filter-bar, .filter-bar-form, .order-desk-toolbar, .sales-filter-grid, .list-filters, .composer-catalogue-toolbar, .filter-toolbar) :is(.form-control, .form-select, .btn, .btn-action),
    .tc-bar :is(.form-control, .form-select), .search-control {
        min-height: 2.5rem;
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
        line-height: 1.5;
        border-radius: var(--radius-sm);
    }
    :is(.filter-bar, .filter-bar-form, .order-desk-toolbar, .sales-filter-grid, .list-filters, .composer-catalogue-toolbar, .filter-toolbar) :is(.form-control, .form-select),
    .tc-bar :is(.form-control, .form-select), .search-control {
        min-width: 0;
        max-width: 100%;
        width: 100%;
    }
    :is(.filter-bar, .filter-bar-form, .order-desk-toolbar, .sales-filter-grid, .list-filters, .composer-catalogue-toolbar, .filter-toolbar) .form-select, .tc-bar .form-select { padding-right: 2.25rem; }
    :is(.filter-bar-actions, .sales-filter-grid__actions, .filter-actions) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
        flex: 0 0 auto;
        min-width: 0;
        max-width: 100%;
        width: auto;
        margin: 0;
    }
    :is(.filter-bar, .filter-bar-form, .order-desk-toolbar, .sales-filter-grid, .list-filters, .composer-catalogue-toolbar, .filter-toolbar) :is(.btn, .btn-action) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        flex: 0 0 auto;
        max-width: 100%;
    }
    :is(.filter-bar, .filter-bar-form, .order-desk-toolbar, .sales-filter-grid, .list-filters, .composer-catalogue-toolbar, .filter-toolbar) :is(.btn, .btn-action) > i { margin-inline: 0 !important; }
    /* Flex gap replaces Bootstrap row gutters within filter toolbars only. */
    :is(.filter-bar, .filter-bar-form, .order-desk-toolbar, .sales-filter-grid, .list-filters, .composer-catalogue-toolbar, .filter-toolbar).row { margin: 0; }
    :is(.filter-bar, .filter-bar-form, .order-desk-toolbar, .sales-filter-grid, .list-filters, .composer-catalogue-toolbar, .filter-toolbar).row > * { margin-top: 0; padding-inline: 0; }

    /* Keep search icons in normal flow, with an input-shaped shared shell. */
    :is(.order-desk-toolbar-search, .composer-search) {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding-left: 0.75rem;
        border: 1px solid var(--input-border);
        border-radius: var(--radius-sm);
        background: var(--surface-card);
        position: relative; /* containing block for visually-hidden labels */
    }
    :is(.order-desk-toolbar-search, .composer-search) > i {
        flex: 0 0 auto;
        color: var(--text-secondary);
    }
    :is(.filter-bar, .filter-bar-form, .order-desk-toolbar, .sales-filter-grid, .list-filters, .composer-catalogue-toolbar, .filter-toolbar) :is(.order-desk-toolbar-search, .composer-search) .form-control {
        flex: 1 1 0;
        border: 0;
        min-height: calc(2.5rem - 2px);
        background: transparent;
        padding-left: 0;
    }
    :is(.order-desk-toolbar-search, .composer-search):focus-within {
        border-color: var(--brand-green);
        box-shadow: 0 0 0 0.15rem rgba(74, 186, 106, 0.15);
    }
    :is(.order-desk-toolbar-search, .composer-search) .form-control:focus { box-shadow: none; }

    .tc-bar {
        display: flex;
        flex-wrap: wrap;
        align-items: end;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
    .tc-search {
        display: flex;
        flex-direction: column;
        flex: 1 1 16rem;
        min-width: 0;
        max-width: 100%;
        margin: 0;
    }
    .tc-search-input { flex: 0 1 auto; }
    .tc-show {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        gap: 0.35rem;
        min-height: 2.5rem;
        margin: 0;
        white-space: nowrap;
    }
    .tc-show .tc-per-page { width: auto; }
}
@media screen and (max-width: 767.98px) {
    .stock-page-header { align-items: stretch; }
    .stock-page-heading { flex: 0 1 auto; }
}
@media screen and (max-width: 575.98px) {
    :is(.filter-bar, .filter-bar-form, .order-desk-toolbar, .sales-filter-grid, .list-filters, .composer-catalogue-toolbar, .filter-toolbar) > :not(input[type="hidden"]) {
        flex-basis: 100%;
        width: 100%;
    }
    :is(.filter-bar-actions, .sales-filter-grid__actions, .filter-actions) :is(.btn, .btn-action) { flex: 1 1 auto; }
    .stock-page-actions { width: 100%; justify-content: start; }
    .stock-page-actions :is(.btn, .btn-action) { flex: 1 1 auto; }
    .stock-page-actions :is(.btn, .btn-action),
    :is(.filter-bar, .filter-bar-form, .order-desk-toolbar, .sales-filter-grid, .list-filters, .composer-catalogue-toolbar, .filter-toolbar) :is(.btn, .btn-action, .form-control, .form-select),
    .tc-bar :is(.form-control, .form-select), .search-control {
        min-height: 2.75rem;
    }
    :is(.filter-bar, .filter-bar-form, .order-desk-toolbar, .sales-filter-grid, .list-filters, .composer-catalogue-toolbar, .filter-toolbar) :is(.order-desk-toolbar-search, .composer-search) .form-control {
        min-height: calc(2.75rem - 2px);
    }
    .tc-search { flex-basis: 100%; }
    .tc-show { min-height: 2.75rem; }
    /* A .btn-group never wraps, so a four-way status filter was wider than a
       320px phone and pushed the page sideways. Let it wrap only when it must. */
    #main-content .btn-group { flex-wrap: wrap; max-width: 100%; }
}