/*
 * List pages: shared grid layer matched to the hi-fi lists (documents/ScreenChange/hifi, e.g. C-07 Shift Master, C-12 Shift Report no records).
 * Loaded last (see _Layout). Scoped to body.aai-o2. No markup change: the Kendo grids, the Show Filter check box and the pager keep their ids and handlers.
 * Covers: grid height, empty grid, Show Filter, sort indicator, sorted-column tint, pager, filter-row control sizes.
 */

/* ---------- grid height follows the rows (Style.css capped the body at 500 px and scrolled inside) ---------- */
body.aai-o2 .k-grid .k-grid-content { max-height: none; }

/* ---------- empty grid: one 160 px area, icon + centred message, no scroll bars (hi-fi .aai-empty-state) ---------- */
/* AAICommon.js SetEmptyRow writes a blank <td class="emptyRow">; Kendo adds a wide .k-grid-content-expander that made the horizontal bar */
body.aai-o2 .k-grid .k-grid-content tr:has(> td.emptyRow) { display: none; }
body.aai-o2 .k-grid .k-grid-content:has(> .k-grid-norecords) { overflow: hidden !important; }
body.aai-o2 .k-grid .k-grid-content:has(> .k-grid-norecords) > .k-grid-content-expander { display: none; }
body.aai-o2 .k-grid .k-grid-norecords {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 160px; padding: 0;
    color: #64748b; font-size: var(--aai-fs-base); font-weight: 500; text-align: center; background: #fff;
}
body.aai-o2 .k-grid .k-grid-norecords::before {
    content: ''; width: 28px; height: 28px; background: no-repeat center / 28px 28px
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 7h16v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1z'/><path d='M4 7l2-3h12l2 3M9 12h6'/></svg>");
}
/* grids without a NoRecords template (ETD / Baggage / Pat-down before a search) keep the same empty area instead of collapsing to 0 px */
body.aai-o2 .k-grid .k-grid-content:not(:has(tbody tr)):not(:has(> .k-grid-norecords)) { overflow: hidden !important; }
body.aai-o2 .k-grid .k-grid-content:not(:has(tbody tr)):not(:has(> .k-grid-norecords))::after {
    content: 'No Records Found'; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: 160px; padding-bottom: 54px; box-sizing: border-box;
    color: #94a3b8; font-size: var(--aai-fs-base); font-weight: 500;
    background: no-repeat center 46px / 28px 28px
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 7h16v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1z'/><path d='M4 7l2-3h12l2 3M9 12h6'/></svg>");
}
/* an empty grid has no page to show: Kendo's "0" page button is hidden */
/* "Page 0 of 0" after an empty read; no label at all while the grid was never read (ETD / Baggage / Pat-down before Search) */
body.aai-o2 .k-grid .k-pager[aria-label="Page 0 of 0"] .k-pager-numbers-wrap, body.aai-o2 .k-grid .k-pager:not([aria-label]) .k-pager-numbers-wrap { visibility: hidden; }

/* ---------- Show Filter: a check box with its label (hi-fi), not an outline button ---------- */
body.aai-o2 .aai-list-bar > .k-checkbox-wrap:has(> input#chkKendoFilterShowHide) { display: inline-flex; align-items: center; align-self: center; height: 36px; margin: 0 0 0 6px; padding: 0; }
body.aai-o2 .aai-list-bar input#chkKendoFilterShowHide.k-checkbox { position: static; top: auto; width: 15px; height: 15px; margin: 0; vertical-align: middle; border-radius: 3px; border-color: #94a3b8; cursor: pointer; }
body.aai-o2 .aai-list-bar input#chkKendoFilterShowHide.k-checkbox:checked { background-color: #1a2344; border-color: #1a2344; }
body.aai-o2 .aai-list-bar > .k-checkbox-wrap:has(> input#chkKendoFilterShowHide) + label.k-checkbox-label {
    display: inline-flex; align-items: center; align-self: center; height: 36px; margin: 0 0 0 -2px; padding: 0; color: #1f2937; font-size: var(--aai-fs-base); font-weight: 500; line-height: 1; cursor: pointer; user-select: none;
}

/* ---------- sort indicator on every sortable header (hi-fi up/down chevrons); Kendo's own arrow replaces it once the column is sorted ---------- */
body.aai-o2 .k-grid th.k-sortable[aria-sort="none"] .k-link::after, body.aai-o2 .k-grid th.k-sortable:not([aria-sort]) .k-link::after {
    content: ''; flex: 0 0 10px; width: 10px; height: 10px; margin-left: 8px; background: no-repeat center / 10px 10px
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%237b939f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M8 10l4-4 4 4M8 14l4 4 4-4'/></svg>");
}
body.aai-o2 .k-grid th.k-sortable .k-link { display: inline-flex; align-items: center; cursor: pointer; }
body.aai-o2 .k-grid th.k-sortable .k-sort-icon, body.aai-o2 .k-grid th.k-sortable .k-sort-order { color: #7b939f; fill: #7b939f; }

/* ---------- no column highlight: a sorted column keeps the plain header / white cells (the Kendo theme tints th/td.k-sorted) ---------- */
body.aai-o2 .k-grid th.k-sorted, body.aai-o2 .k-grid .k-table-th.k-sorted { background-color: var(--aai-table-head); }
body.aai-o2 .k-grid td.k-sorted, body.aai-o2 .k-grid .k-table-td.k-sorted { background-color: transparent; }

/* ---------- filter row: one control height (30 px boxes, 28 px inner buttons; the date picker button was 32 px and overflowed) ---------- */
body.aai-o2 .k-grid .k-filter-row .k-picker, body.aai-o2 .k-grid .k-filter-row .k-input, body.aai-o2 .k-grid .k-filter-row .k-dropdown-operator,
body.aai-o2 .k-grid .k-filter-row .k-datepicker, body.aai-o2 .k-grid .k-filter-row .k-numerictextbox, body.aai-o2 .k-grid .k-filter-row .k-autocomplete {
    height: 30px; min-height: 30px; box-sizing: border-box;
}
body.aai-o2 .k-grid .k-filter-row .k-input-inner { height: 28px; padding-top: 0; padding-bottom: 0; }
body.aai-o2 .k-grid .k-filter-row .k-input-button, body.aai-o2 .k-grid .k-filter-row .k-input-spinner, body.aai-o2 .k-grid .k-filter-row .k-button[title="Clear"] { height: 28px; max-height: 28px; }
body.aai-o2 .k-grid .k-filter-row .k-input-spinner .k-spinner-increase, body.aai-o2 .k-grid .k-filter-row .k-input-spinner .k-spinner-decrease { height: 14px; min-height: 0; }
body.aai-o2 .k-grid .k-filter-row .k-button[title="Clear"] { height: 30px; max-height: 30px; }

/* ---------- dropdown text 12 px from the edge everywhere: the padding sat on the wrapper (.form-control), .k-input-inner AND .k-input-value-text, so some selects showed 24-36 px ---------- */
body.aai-o2 .k-picker.k-dropdownlist.form-control { padding: 0 !important; }
body.aai-o2 .k-dropdownlist .k-input-inner .k-input-value-text, body.aai-o2 .k-picker .k-input-inner .k-input-value-text { padding: 0 !important; }

/* ---------- pager:"Showing [10] of N" on the left, page buttons in one bordered group on the right (hi-fi .mgmt-pager) ---------- */
/* the "of N" wording comes from the pager messages set in aai-shell.js */
body.aai-o2 .k-grid .k-pager { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 12px 16px; }
body.aai-o2 .k-grid .k-pager .k-pager-sizes { order: 1; display: inline-flex; align-items: center; gap: 10px; margin: 0; color: var(--aai-text-muted); font-size: var(--aai-fs-base); }
body.aai-o2 .k-grid .k-pager .k-pager-sizes::before { content: 'Showing'; }
body.aai-o2 .k-grid .k-pager .k-pager-sizes > span:not(.k-picker):not(.k-dropdownlist):empty { display: none; }
body.aai-o2 .k-grid .k-pager .k-pager-sizes .k-picker.k-dropdownlist { width: 72px !important; height: 32px; min-height: 32px; border-radius: 8px !important; }
body.aai-o2 .k-grid .k-pager .k-pager-info { order: 2; flex: 0 0 auto; margin: 0; padding: 0; color: var(--aai-text-muted); font-size: var(--aai-fs-base); justify-content: flex-start; text-align: left; }
body.aai-o2 .k-grid .k-pager .k-pager-numbers-wrap {
    order: 3; margin-left: auto; display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid #d5e0e4; border-radius: 8px; background: #fff;
}
body.aai-o2 .k-grid .k-pager .k-pager-first, body.aai-o2 .k-grid .k-pager .k-pager-last, body.aai-o2 .k-grid .k-pager .k-pager-refresh { display: none !important; }
body.aai-o2 .k-grid .k-pager .k-pager-numbers-wrap .k-button { min-width: 32px; height: 32px; border-radius: 6px; }
body.aai-o2 .k-grid .k-pager .k-pager-numbers-wrap .k-pager-nav { border: 1px solid #e5eaee !important; background: #fff !important; }
body.aai-o2 .k-grid .k-pager .k-pager-numbers .k-button { font-weight: 600; }
/* narrow screens: Kendo collapses the numbers into a select; keep it in the group */
body.aai-o2 .k-grid .k-pager .k-pager-numbers-wrap select.k-dropdown { height: 32px; border-radius: 6px; }

/* ==========================================================================
   Per-view stage (2026-10-27): Action column, column lines, header, scroll bars, filter cells
   ========================================================================== */

/* ---------- column lines and a slightly darker header ---------- */
body.aai-o2 .k-grid th.k-header, body.aai-o2 .k-grid .k-table-th, body.aai-o2 .k-grid td, body.aai-o2 .k-grid .k-table-td {
    border-left: 1px solid #e3e8ef;
}
body.aai-o2 .k-grid tr > th:first-child, body.aai-o2 .k-grid tr > td:first-child { border-left-width: 0; }
body.aai-o2 .k-grid .k-grid-header, body.aai-o2 .k-grid .k-grid-header-wrap, body.aai-o2 .k-grid .k-grid-header-locked, body.aai-o2 .k-grid .k-grid-header-table,
body.aai-o2 .k-grid .k-table-thead, body.aai-o2 .k-grid th.k-header, body.aai-o2 .k-grid .k-table-th, body.aai-o2 .k-grid th.k-sorted {
    background-color: #e4e8ee;
}
body.aai-o2 .k-grid th.k-header, body.aai-o2 .k-grid .k-table-th { color: #111827; border-bottom-color: #d5dce5; }
body.aai-o2 .k-grid .k-grid-header .k-link, body.aai-o2 .k-grid .k-grid-header .k-column-title { color: #111827; }
/* the filter row keeps white cells under the darker header */
body.aai-o2 .k-grid .k-filter-row th, body.aai-o2 .k-grid .k-filter-row td, body.aai-o2 .k-grid .k-filter-row .k-table-th, body.aai-o2 .k-grid .k-filter-row .k-table-td { background-color: #fff; }
/* frozen part: a soft edge where the scrolling columns pass under it */
body.aai-o2 .k-grid .k-grid-content-locked, body.aai-o2 .k-grid .k-grid-header-locked { border-right: 1px solid #d5dce5; box-shadow: 3px 0 4px -3px rgba(15, 23, 42, .14); position: relative; z-index: 1; }
body.aai-o2 .k-grid .k-grid-content-locked tr.k-hover, body.aai-o2 .k-grid .k-grid-content tr.k-hover { background-color: var(--aai-surface-alt); }

/* ---------- thinner scroll bars inside the grid ---------- */
body.aai-o2 .k-grid .k-grid-content, body.aai-o2 .k-grid .k-grid-content-locked { scrollbar-width: thin; scrollbar-color: #c3cad4 transparent; }
body.aai-o2 .k-grid .k-grid-content::-webkit-scrollbar { width: 8px; height: 8px; }
body.aai-o2 .k-grid .k-grid-content::-webkit-scrollbar-track { background: transparent; }
body.aai-o2 .k-grid .k-grid-content::-webkit-scrollbar-thumb { background: #c3cad4; border-radius: 8px; border: 2px solid #fff; }
body.aai-o2 .k-grid .k-grid-content::-webkit-scrollbar-thumb:hover { background: #a3adba; }

/* ---------- filter cells: the box fills the cell (no operator funnel: each column keeps its configured operator); clear button only while a value is set ---------- */
body.aai-o2 .k-grid .k-filter-row th, body.aai-o2 .k-grid .k-filter-row td { padding: 5px 8px; vertical-align: middle; }
body.aai-o2 .k-grid .k-filtercell, body.aai-o2 .k-grid .k-filtercell > span, body.aai-o2 .k-grid .k-filtercell-wrapper { display: flex; align-items: center; gap: 4px; width: 100%; min-width: 0; }
body.aai-o2 .k-grid .k-filtercell-wrapper > .k-input, body.aai-o2 .k-grid .k-filtercell-wrapper > .k-picker, body.aai-o2 .k-grid .k-filtercell-wrapper > .k-textbox,
body.aai-o2 .k-grid .k-filtercell-wrapper > .k-autocomplete, body.aai-o2 .k-grid .k-filtercell-wrapper > .k-datepicker, body.aai-o2 .k-grid .k-filtercell-wrapper > .k-numerictextbox,
body.aai-o2 .k-grid .k-filtercell-wrapper > .k-dropdownlist {
    flex: 1 1 auto; width: auto !important; min-width: 0;
}
body.aai-o2 .k-grid .k-filtercell .k-filtercell-operator { display: flex; align-items: center; flex: 0 0 auto; margin: 0; }
body.aai-o2 .k-grid .k-filtercell .k-filtercell-operator > .k-dropdown-operator, body.aai-o2 .k-grid .k-filtercell .k-filtercell-operator > .k-picker { display: none !important; }
body.aai-o2 .k-grid .k-filtercell .k-filtercell-operator > .k-button[title="Clear"] { width: 30px; height: 30px; min-width: 30px; padding: 0; }
body.aai-o2 .k-grid .k-filter-row input.k-input-inner::placeholder { color: #94a3b8; font-size: var(--aai-fs-sm); }
body.aai-o2 .k-grid .k-filter-row input.k-input-inner { font-size: var(--aai-fs-sm); padding-left: 10px; }
body.aai-o2 .k-grid .k-filter-row .k-dropdownlist .k-input-value-text { font-size: var(--aai-fs-sm); }

/* ---------- Action column: first, frozen, icon buttons (hi-fi bordered square pencil) ---------- */
body.aai-o2 .k-grid th.aai-act-cell, body.aai-o2 .k-grid td.aai-act-cell { text-align: center !important; padding-left: 6px; padding-right: 6px; white-space: nowrap; }
body.aai-o2 .k-grid th.aai-act-cell .k-cell-inner, body.aai-o2 .k-grid th.aai-act-cell .k-link { justify-content: center !important; }
/* table widths: the frozen part is exactly its columns (aai-o2-r3c.css gives every list header table min-width 980 px for narrow screens, which made the
   frozen header 980 px wide and pushed "Action" out of view); the scrolling part fills the card (no grey strip after the last column) and keeps 980 px */
body.aai-o2 .k-grid .k-grid-header-locked > table, body.aai-o2 .k-grid .k-grid-content-locked > table { min-width: 0 !important; }
body.aai-o2 .aai-list-bar ~ .k-grid .k-grid-header-wrap > table, body.aai-o2 .aai-list-bar ~ .k-grid .k-grid-content > table { min-width: max(100%, 980px); }
body.aai-o2 .k-grid .k-grid-header-wrap > table, body.aai-o2 .k-grid .k-grid-content > table { min-width: 100%; }
/* the list grids grow with their rows (no vertical scroll bar), so the header does not keep a scroll-bar gutter on the right */
body.aai-o2 .k-grid .k-grid-header { padding-right: 0 !important; }
body.aai-o2 .k-grid .k-grid-header-wrap { border-right-width: 0; }
body.aai-o2 .k-grid td.aai-act-cell > .device-actions { display: inline-flex; align-items: center; gap: 4px; }
body.aai-o2 .aai-row-act {
    display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: 0 2px; padding: 0; vertical-align: middle;
    background: #fff no-repeat center / 16px 16px; border: 1px solid #d5e0e4; border-radius: 6px; box-shadow: none; cursor: pointer; text-decoration: none !important;
}
body.aai-o2 .aai-row-act:hover { border-color: var(--aai-brand); background-color: var(--aai-brand-soft); }
body.aai-o2 .aai-row-act:focus-visible { outline: 2px solid var(--aai-brand); outline-offset: 1px; }
body.aai-o2 .aai-row-act--edit { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20h4L18.5 9.5a2.1 2.1 0 0 0-4-4L4 16v4z'/><path d='M13.5 6.5l4 4'/></svg>"); }
body.aai-o2 .aai-row-act--view { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 12S6 5.8 12 5.8 21.5 12 21.5 12 18 18.2 12 18.2 2.5 12 2.5 12z'/><circle cx='12' cy='12' r='3'/></svg>"); }
body.aai-o2 .aai-row-act--amend { border-color: #f3d19e; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b45309' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h4'/><path d='M14 3v5h5'/><path d='M14 21l1-3 5.5-5.5a1.4 1.4 0 0 1 2 2L17 20l-3 1z'/></svg>"); }
body.aai-o2 .aai-row-act--versions { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.5'/><path d='M12 7v5l3 2'/></svg>"); }
body.aai-o2 .aai-row-act--cancel { border-color: #f1b5b5; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b91c1c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.5'/><path d='M8.5 8.5l7 7M15.5 8.5l-7 7'/></svg>"); }
body.aai-o2 .aai-row-act--off { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b91c1c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v8'/><path d='M6.3 7.3a8 8 0 1 0 11.4 0'/></svg>"); }
body.aai-o2 .aai-row-act--on { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v8'/><path d='M6.3 7.3a8 8 0 1 0 11.4 0'/></svg>"); }
/* inline-edit command (CISF reports, supervisor): the same square icon buttons; Update / Cancel appear in the same cell while editing */
body.aai-o2 .k-grid td.aai-act-cell .k-button {
    width: 30px; height: 30px; min-width: 30px; min-height: 30px; margin: 0 2px; padding: 0 !important; gap: 0; position: relative;
    background: #fff !important; border: 1px solid #d5e0e4 !important; border-radius: 6px !important; color: #334155 !important;
}
body.aai-o2 .k-grid td.aai-act-cell .k-button:hover { border-color: var(--aai-brand) !important; background: var(--aai-brand-soft) !important; color: var(--aai-brand) !important; }
/* the text stays for screen readers and getByRole (Edit / Update / Cancel), it is only hidden visually */
body.aai-o2 .k-grid td.aai-act-cell .k-button .k-button-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
body.aai-o2 .k-grid td.aai-act-cell .k-button .k-button-icon, body.aai-o2 .k-grid td.aai-act-cell .k-button .k-svg-icon { margin: 0; color: currentColor; fill: currentColor; }