/* Styling of every Telerik Grid in the app and of our GridArea component around it.
   Every rule targets the grid or one of its own popups (column chooser), never other controls:
   those are styled in telerik-controls.css (e.g. the MultiColumnComboBox popup's table headers,
   which would otherwise pick up the grid's centred headers). */

.kt-grid-area {
    border-color: transparent;
}

/* GridArea's wrapper around the grid (the TelerikGrid inside is Height="100%").
   Desktop: takes the height left on the page (GridArea is .fill, see "Page fill" in app.css).
   flex-basis 0 so the grid's rows don't count as content: it never pushes the page into scrolling.
   Small screens: the page scrolls instead, so the grid gets exactly the visible height of the page's
   scroll area (window - header - the content box's 10px margin and 2px border - 40px padding):
   scrolled down to it, it fills the screen. */
.grid-fit {
    flex: 1 1 0;
    min-height: 200px;
}

@media (max-width: 1023.98px) {
    .grid-fit {
        height: calc(100dvh - var(--header-height-mobile, 54px) - 52px);
    }
}

.k-grid {
    /*border-radius: 0.75rem;*/
    --kendo-font-size: 0.75rem;
    --kendo-font-size-sm: 0.75rem;
    font-size: 0.75rem;
}

/* Every cell uses the grid's font, also while a control is in it (cell editors, filter row, toolbar
   search): overrides the app-wide input size from telerik-controls.css, which is set on the control itself. */
.k-grid .k-input,
.k-grid .k-picker {
    --kendo-font-size: 0.75rem;
    --kendo-font-size-sm: 0.75rem;
}

/* The dropdown of a cell editor (ComboBox, MultiColumnComboBox, DropDownList...) is rendered outside the
   grid, so it can't inherit the grid's font: give the editor's PopupSettings Class="grid-editor-popup".
   Telerik puts that class on the popup's outer container: the rule sets the font on the .k-popup inside it,
   which also wins over the app-wide popup font in telerik-controls.css (set on .k-popup itself). */
.grid-editor-popup .k-popup,
.k-popup.grid-editor-popup {
    --kendo-font-size: 0.75rem;
    --kendo-font-size-sm: 0.75rem;
}

/* Scoped to .k-grid: other Telerik tables (e.g. the MultiColumnComboBox popup) keep their own look. */
.k-grid .k-table-th,
.k-grid .k-table-td {
    border-inline-start-width: 0;
}

/* Body cells: a line between the columns (left border) and between the rows (an inner shadow at the bottom,
   in the theme's border colour: unlike a border it takes no space, so rows keep their height).
   Also under the last row, which otherwise stays open when the grid has empty space below it.
   Telerik's own focus outline on a cell (.k-focus, more specific) replaces it while the cell has focus. */
.k-grid-content .k-table-td {
    border-inline-start-width: 1px;
    box-shadow: inset 0 -1px 0 var(--kendo-color-border);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.k-grid-content .k-table-td:first-child {
    border-inline-start-width: 0;
}

/* Buttons in the rows (e.g. the edit button). Not the buttons inside a cell editor (number arrows,
   combo arrow): those are sized with their control in telerik-controls.css. */
.k-grid-content .k-button:not(.k-input .k-button, .k-picker .k-button) {
    height: 1.25rem;
    min-height: 1.25rem;
    padding-block: 0;
    padding-inline: 0.25rem;
    line-height: 1;
}

.k-grid .k-table-th {
    text-align: center;
    justify-content: center;
}

/* A cell being edited (Incell): less padding so the editor fits the row's height
   and the row doesn't grow while editing. As specific as Telerik's
   .k-grid.k-grid-sm .k-table .k-grid-edit-row .k-table-td, and loaded after it. */
.k-grid .k-table .k-grid-edit-row .k-table-td.k-grid-edit-cell {
    padding-block: 2px;
}

/* Filter row: the operator / clear buttons next to the filter box are square and as tall as the box. */
.k-filtercell .k-button.k-icon-button {
    align-self: stretch;
    height: auto;
    min-height: 0;
    aspect-ratio: 1;
    padding: 0;
}

/* Toolbar categories: GridActions (New, Delete) | GridExport (CSV, Excel, PDF) | GridView (Group, Search).
   Buttons inside a category keep the toolbar's own small gap; the first button of the next
   category gets extra space so the categories read as separate blocks. */
.k-grid-toolbar .grid-actions + .k-toolbar-button,  /* first export button, after New/Delete */
.k-grid-toolbar .k-spacer + .grid-view {            /* Group, even when the spacer has no room left */
    margin-inline-start: 1.25rem;
}

/* GridArea ShowToolbar="false" */
.k-grid.grid-no-toolbar .k-grid-toolbar {
    display: none;
}



.k-grid-toolbar .k-toolbar-button {
    background-color: var(--kendo-color-primary);
    border-color: var(--kendo-color-primary);
    color: var(--kendo-color-on-primary);
}

.k-grid-toolbar .k-toolbar-button:hover {
    background-color: var(--kendo-color-primary-hover);
    border-color: var(--kendo-color-primary-hover);
}

/* Checkboxes centred in their cells, in the header and in the rows. Telerik puts each one in an inline
   wrapper that sits on the text baseline (a couple of pixels low), and header cells align to the bottom. */
.k-grid .k-checkbox-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}

.k-grid .k-table-th:has(> .k-checkbox-wrap) {
    vertical-align: middle;
}

/* Body cells have a 1px column line on their left (header cells don't): pull the wrapper back by it,
   so a row checkbox is centred on the same line as the header checkbox above it. */
.k-grid .k-table-td .k-checkbox-wrap {
    margin-inline-start: -1px;
}

/* "Select all rows on all pages" checkbox in the # column header:
   a second box behind it, offset down and to the right (like stacked pages), so it reads as
   "every page", unlike the plain page checkbox. The padding makes room for the back box inside
   Telerik's header title wrapper, which hides anything sticking out of it. Left and right are equal,
   so the front box stays centred on the column (over the row numbers). */
.k-grid .select-all-pages {
    display: inline-flex;
    vertical-align: middle;
    padding: 0 4px 4px;
}

.k-grid .select-all-pages .k-checkbox {
    box-shadow: 4px 4px 0 -1px var(--kendo-color-app-surface),   /* back box: the page's fill... */
                4px 4px 0 0 var(--kendo-color-border);            /* ...with the theme's border (light and dark) */
}

/* Column chooser: don't list columns without a title (e.g. a page's edit-button column).
   The popup is rendered outside the grid, so this targets the chooser list itself. */
.k-column-list .k-column-list-item:has(.k-checkbox-label:empty) {
    display: none;
}