/* =========================================================================
   select2-tabular.css
   Renders Select2 results as a table with aligned columns and a header.

   Hooks hang off .select2-dropdown.s2-tabular — the dropdown element
   itself, never a .select2-container, because "select2-container--open"
   exists on both the control and the body-appended dropdown wrapper.

   .select2-results is the horizontal scroller, so the header and the rows
   scroll together with no JS involved.
   ========================================================================= */

:root {
    --s2-cell-padding: .35rem .6rem;
    --s2-line: rgba(0, 0, 0, .12);
    --s2-head-bg: #f6f7f9;
}

/* --- dropdown shell ------------------------------------------------------
   Select2 hard-codes the dropdown width to the width of the control. The
   dropdown is absolutely positioned, so it can safely outgrow its wrapper
   in both attach-to-body and dropdownParent setups.                       */

.select2-dropdown.s2-tabular {
    width: max-content !important;
    min-width: var(--s2-minw, 0px);
    max-width: min(92vw, 1400px);
}

.s2-tabular .select2-results {
    overflow-x: auto;
}

.s2-tabular .select2-results__options {
    width: max-content;
    min-width: 100%;
}

.s2-tabular .select2-results__option {
    min-width: 100%;
    padding: 0;
}

/* --- rows ---------------------------------------------------------------- */

.s2-row {
    display: grid;
    justify-content: start;
    column-gap: 0 !important;
}

    .s2-row > * {
        box-sizing: border-box;
        padding: var(--s2-cell-padding);
        white-space: nowrap;
    }

    /* First column: full value, always. No overflow rule here, so it can never
   be clipped — worst case it pushes the row wider. */
    .s2-row > .s2-c1 {
        font-weight: 500;
    }

    /* Other columns: ellipsis, which only engages if maxCellWidth is set.
   min-width:0 is required — grid items default to min-width:auto. */
    .s2-row > .s2-cell {
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }

/* --- header -------------------------------------------------------------- */

.s2-tabular .s2-head-wrap {
    width: max-content;
    min-width: 100%;
    background: var(--s2-head-bg);
    border-bottom: 1px solid var(--s2-line);
    font-weight: 600;
}

/* --- rules ---------------------------------------------------------------
   On by default. Disable with gridLines:false in the JS config.           */

.s2-tabular.s2-lines .s2-row > * + * {
    border-left: 1px solid var(--s2-line);
}

.s2-tabular.s2-lines .select2-results__option + .select2-results__option {
    border-top: 1px solid var(--s2-line);
}

/* The option the header text was lifted out of, hidden from the list. */
.s2-tabular .s2-header-source {
    display: none !important;
}