/* Responsive: hide desktop columns on mobile, show single combined column */
@media (max-width: 950px) {
    .k-grid td.desktop-col,
    .k-grid th.desktop-col {
        display: none !important;
    }
    .k-grid td.mobile-combined-col,
    .k-grid th.mobile-combined-col {
        display: table-cell !important;
        width: 100% !important;
    }
    .k-grid table {
        table-layout: auto !important;
    }
    /* Hide column header row on mobile since the combined column has its own labels */
    #gridDocumentResults .k-grid-header,
    #gridDocumentResults thead,
    #gridDocumentResults .k-table-thead {
        display: none !important;
    }
    /* Allow grid content to expand vertically to fit stacked rows.
       k-virtual-scrollable-wrap is added by virtual scrolling mode. */
    #gridDocumentResults .k-grid-content,
    #gridDocumentResults .k-virtual-scrollable-wrap,
    #gridDocumentResults .k-table-wrap {
        height: auto !important;
        max-height: none !important;
    }
    /* Hide the virtual scrollbar on mobile — content flows naturally */
    #gridDocumentResults .k-scrollbar {
        display: none !important;
    }
}

/* Responsive: hide mobile combined column on desktop, show desktop columns */
@media (min-width: 951px) {
    .k-grid td.mobile-combined-col,
    .k-grid th.mobile-combined-col {
        display: none !important;
    }
    .k-grid td.desktop-col,
    .k-grid th.desktop-col {
        display: table-cell !important;
        width: auto !important;
    }
}

/* ── Hide virtual scrollbar when all rows fit ──
   When .no-virtual-scrollbar is set by JS, hide the scrollbar div and let
   the virtual wrap fill the full content width. !important overrides the
   inline width that Kendo's grid.resize() applies. */
.no-virtual-scrollbar .k-scrollbar {
    display: none !important;
}

.no-virtual-scrollbar .k-virtual-scrollable-wrap {
    width: 100% !important;
}

.no-virtual-scrollbar .k-grid-content {
    padding-right: 0 !important;
}

.no-virtual-scrollbar .k-grid-header {
    padding-right: 0 !important;
}

/* ── Column header text: restrict space with padding, wrap naturally ──
   All layout rules are in this external file (not scoped .cshtml.css) so changes
   take effect immediately without rebuilding the scoped CSS bundle.
   Kendo uses negative margins on .k-cell-inner to bleed beyond th padding;
   we neutralize this to keep content within cell borders.
   background-color: #c4e2f7 matches legacy seims.css
   (.ui-iggrid .ui-widget-header, .ui-iggrid th — background-color: #c4e2f7) ── */
#gridDocumentResults .k-grid-header th,
#gridDocumentResults .k-table-thead th {
    background-color: #c4e2f7 !important;
    white-space: normal !important;
    overflow: hidden !important;
    vertical-align: middle !important;
}

#gridDocumentResults .k-grid-header th .k-cell-inner,
#gridDocumentResults .k-table-thead th .k-cell-inner {
    margin: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

#gridDocumentResults .k-grid-header th .k-cell-inner .k-link,
#gridDocumentResults .k-table-thead th .k-cell-inner .k-link {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    white-space: normal !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    box-sizing: border-box !important;
    width: 100%;
}

#gridDocumentResults .k-grid-header th .k-column-title,
#gridDocumentResults .k-table-thead th .k-column-title {
    display: block !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 !important;
    min-width: 0 !important;
    text-align: center !important;
}

/* ── Sort icon: vertically centered with text, pushed to right ── */
#gridDocumentResults .k-grid-header th .k-cell-inner .k-link .k-sort-icon,
#gridDocumentResults .k-table-thead th .k-cell-inner .k-link .k-sort-icon {
    flex-shrink: 0;
    align-self: center;
    margin-left: auto;
    margin-right: 2px;
}

/* ── Focused cells: #767676 gives 3.35:1 on light-blue header (#c4e2f7) and 4.53:1 on
   white body — bare minimum to clear the 3:1 requirement for all cells in the grid. ── */
#gridDocumentResults .k-grid-table td.k-focus,
#gridDocumentResults .k-grid-table .k-table-td.k-focus,
#gridDocumentResults .k-grid-table td:focus,
#gridDocumentResults .k-grid-table .k-table-td:focus,
#gridDocumentResults .k-grid-header th.k-focus,
#gridDocumentResults .k-grid-header .k-table-th.k-focus,
#gridDocumentResults .k-grid-header th:focus,
#gridDocumentResults .k-grid-header .k-table-th:focus {
    outline: 3px solid #767676 !important;
    outline-offset: -3px !important;
}

/* ── Sorted column: prevent Kendo's theme from dimming cell backgrounds ──
   When a column is sorted, Kendo applies .k-sorted to every body cell in
   that column and the theme sets a tinted background-color on those cells.
   Inheriting from the row keeps the normal/alternate-row stripe intact. ── */
#gridDocumentResults .k-grid-table td.k-sorted,
#gridDocumentResults .k-grid-table .k-table-td.k-sorted {
    background-color: inherit !important;
}

/* ── Row hover: light grey background for ALL rows (plain and alternate).
   Kendo colours alternate rows blue via .k-alt; we override both here so
   every row — regardless of stripe — shows the same consistent hover tint,
   matching the legacy app behaviour (cfdoclkup.css: tr:hover).
   Both the native CSS :hover and Kendo's programmatic .k-state-hover class
   are targeted to cover all interaction paths. ── */
#gridDocumentResults .k-grid-table tr:hover > td,
#gridDocumentResults .k-grid-table tr:hover > .k-table-td,
#gridDocumentResults .k-table-row:hover > td,
#gridDocumentResults .k-table-row:hover > .k-table-td,
#gridDocumentResults .k-state-hover > td,
#gridDocumentResults .k-state-hover > .k-table-td {
    background-color: #f0f0f0 !important;
    border-left-color: #000000 !important;
    border-right-color: #000000 !important;
}