/*
 * aai-o2-fixes.css  -  UI polish pass, global layer (2026-10-29, documents/UI_POLISH_AUDIT_2026-10-29.md)
 * Loaded LAST in Views/Shared/_Layout.cshtml, after aai-o2-lists.css.
 *
 * Rules of this file
 *  - CSS only, no markup / script dependency, no theme change (same palette, same tokens, same components).
 *  - Every rule is scoped to body.aai-o2.
 *  - Never sets `display` with !important on .row / .col-* / .card / .panel / [id^=div] / [id^=dv], so jQuery .show()/.hide(),
 *    .d-none, .aai-hidden and .aai-r3-off keep working exactly as before. The single display !important below only re-enables the
 *    Bootstrap collapse of the phone header (#navbar-mobile without .show).
 *  - CSP safe: a same-origin stylesheet (style-src 'self'); no @import, no external fonts, no url(data:...), no inline styles needed.
 *  - Remove a block = revert that fix; blocks are independent.
 */

/* =====================================================================
   D. Readability (Gen Z + mid-age): one step up on the small type sizes, readable placeholders / empty text
   ===================================================================== */
/* tokens on :root (not body.aai-o2), so a theme (html[data-aai-theme], aai-o2-themes.css) can still override them; one block (Sonar: no duplicate selectors) */
:root {
    --aai-canvas: #f5f8fc;      /* G: brief #F5F8FC (was #f4f6f9) */
    --aai-radius-ctl: 4px;      /* G: brief 4 px for inputs / buttons (was 6 px); cards stay 8 px (softer, and layout.spec checks 8 px) */
    --aai-x-xls-bg: #ecf8f1; --aai-x-xls-line: #b7dfc6; --aai-x-xls-fg: #1d6f42; --aai-x-xls-bg-h: #d9f1e3;
    --aai-x-pdf-bg: #fdeeec; --aai-x-pdf-line: #f5c2bd; --aai-x-pdf-fg: #b42318; --aai-x-pdf-bg-h: #fbdcd8;   /* L2: list-bar buttons, Classic shades */
    --aai-fs-xs: 12px;     /* was 11px (footer, version, small radios). Base stays 13px: grid column widths are fixed px in the views,
                              a 14px base wraps short words like "International" in 110px columns - see audit, module pass */
}
body.aai-o2 input::placeholder,
body.aai-o2 textarea::placeholder,
body.aai-o2 .k-grid .k-filter-row input.k-input-inner::placeholder { color: #6b7280; opacity: 1; }          /* was #9ca3af / #94a3b8 (2.5:1) -> 4.8:1 */
body.aai-o2 .k-grid .k-grid-content:not(:has(tbody tr)):not(:has(> .k-grid-norecords))::after,
body.aai-o2 .k-grid-norecords { color: #6b7280; }                                                         /* "No Records Found" 2.6:1 -> 4.8:1 */

/* visible keyboard focus (mouse clicks unaffected: :focus-visible only) */
body.aai-o2 :is(a, button, .btn, .k-button, [role="button"], input[type="checkbox"], input[type="radio"], .nav-link, .k-link):focus-visible {
    outline: 2px solid var(--aai-brand); outline-offset: 2px;
}
body.aai-o2 .sidebar-main .navigation li a:focus-visible { outline-offset: -2px; }

/* gentle hover feedback */
@media (prefers-reduced-motion: no-preference) {
    body.aai-o2 :is(.btn, .k-button, .aai-icon-btn, .sidebar-main .navigation li a) {
        transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
    }
    body.aai-o2 .k-grid tbody tr { transition: background-color .12s ease; }
}

/* =====================================================================
   A. Layout / alignment
   ===================================================================== */
/* legacy date-range filter row (label.select-period + Kendo date picker in col-md-* columns; Manifest list and similar screens):
   labels sat beside or above the picker depending on the inline 60% / 75% widths, centred, upper-case. Now: label above, equal 220px pickers,
   left-aligned in one row, wraps on small screens. Ids, events, required/validation attributes untouched. */
body.aai-o2 .panel-body .row.form-group:has(> [class*="col-"] > label.select-period) {
    justify-content: flex-start; align-items: flex-end; gap: 12px 24px; margin: 0 !important; padding: 0 0 16px !important;
    text-align: left !important; border-bottom: 1px solid var(--aai-line-soft);
}
body.aai-o2 .panel-body > div:has(> .row.form-group > [class*="col-"] > label.select-period) { flex: 1 0 100%; }   /* panel-body is flex on list pages */
body.aai-o2 .panel-body .row.form-group > [class*="col-"]:has(> label.select-period) {
    flex: 0 0 auto; width: auto; max-width: 100%; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
}
body.aai-o2 .panel-body .row.form-group > [class*="col-"] > label.select-period {
    display: block; margin: 0; text-transform: none; font-size: var(--aai-fs-base); font-weight: 500; color: var(--aai-text-label); line-height: 1.3;
}
body.aai-o2 .panel-body .row.form-group > [class*="col-"]:has(> label.select-period) > .k-datepicker,
body.aai-o2 .panel-body .row.form-group > [class*="col-"]:has(> label.select-period) > .k-datetimepicker { width: 220px !important; max-width: 100%; }
@media (max-width: 575.98px) {
    body.aai-o2 .panel-body .row.form-group > [class*="col-"]:has(> label.select-period) { flex: 1 1 100%; }
    body.aai-o2 .panel-body .row.form-group > [class*="col-"]:has(> label.select-period) > .k-datepicker { width: 100% !important; }
    /* list card head on phones: title on its own line, so the export buttons and the Show Filter box + label stay together on the next */
    body.aai-o2 .aai-list-bar > .aai-list-title { flex: 1 0 100%; }
}

/* form check boxes (Active, Masking Required ...): 18 px and a pointer, their label text is clickable (aai-shell.js labelCheckBoxes) */
body.aai-o2 .aai-s5 .aai-s5-check input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
body.aai-o2 .aai-s5 label.form-label[for] { cursor: pointer; }

/* grid text cells that wrap (was an inline style on every ClientTemplate wrapper; CSP) */
body.aai-o2 .aai-wrap { overflow: visible; white-space: normal; overflow-wrap: break-word; }

/* date-range filters built with .period-wrapper (Issues, Escalated Issues, User Logs, Completed Inspections): the labels stay visible on
   small screens (Site.css hid them) and the "Created Date" heading row is not pushed 80 px right / centred */
body.aai-o2 .period-wrapper > label.select-period { display: block; }
body.aai-o2 .panel-body .row:has(> .period-wrapper > label.select-period:only-child) { padding-left: 0 !important; text-align: left !important; }

/* header bar: legacy Menu.css pulled the white bar 20 px left over the sidebar collapse button */
@media (min-width: 769px) {
    body.aai-o2 .aai-header .navbar-collapse#navbar-mobile { margin-left: 0; }
}

/* unsaved-changes dialog: Cancel first, OK as the primary action (ids unchanged, handlers unchanged) */
body.aai-o2 #confirmationPopoup .modal-footer { display: flex; justify-content: flex-end; gap: 8px; }
body.aai-o2 #confirmationPopoup #btnDirtyCancel { order: -1; }
body.aai-o2 #confirmationPopoup #btnDirtyOk.k-button {
    color: #fff !important; background-color: var(--aai-brand) !important; border-color: var(--aai-brand) !important;
}
body.aai-o2 #confirmationPopoup #btnDirtyOk.k-button:hover { background-color: var(--aai-brand-hover) !important; border-color: var(--aai-brand-hover) !important; }

/* =====================================================================
   B. Grids: readable headers and cells, no forced 980 px on desktop
   ===================================================================== */
/* column headers wrap to a 2nd line instead of being cut ("Journey Date", "Operator Name" ...) - Trip List had this as a page style */
/* multi-word titles wrap at spaces; a single word longer than the column keeps the ellipsis (no "Userco|de" splits) */
body.aai-o2 .k-grid .k-grid-header th.k-header { white-space: normal; }
body.aai-o2 .k-grid .k-grid-header th.k-header .k-link { height: auto; }   /* was a page <style> block on Manifest List (removed for CSP) */
body.aai-o2 .k-grid .k-grid-header th.k-header .k-link,
body.aai-o2 .k-grid .k-grid-header th.k-header .k-column-title {
    white-space: normal; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; line-height: 1.25;
}

/* data cells already wrap in the current theme (verified in a render); only the digits get equal widths so columns of numbers line up */
body.aai-o2 .k-grid td { font-variant-numeric: tabular-nums; }

/* action column: icons start at the same x on every row (rows with 1 icon vs 2 icons no longer zig-zag) */
body.aai-o2 .k-grid td.aai-act-cell { text-align: left !important; }

/* filter row: a dropdown filter (Status All / Active / Inactive, boolean All / Yes / No) uses the whole cell; its "All" option already
   clears the filter, so the separate Clear (x) button that squeezed the dropdown to ~50 px is not drawn in those cells */
body.aai-o2 .k-grid .k-filtercell:has(.k-filtercell-wrapper > .k-dropdownlist) .k-filtercell-operator { display: none; }
body.aai-o2 .k-grid .k-filtercell .k-filtercell-wrapper > .k-dropdownlist { min-width: 72px; }
body.aai-o2 .k-dropdownlist-popup .k-list-item { white-space: nowrap; }

/* desktop: the list grid fills its card; columns with set widths still scroll INSIDE the grid when they need more room.
   Below 1024 px the existing 980 px minimum stays (aai-o2-r3c.css / aai-o2-lists.css). Locked (frozen) tables are not touched. */
/* (the list grid fills its card: width 100% is set in section L2) */
@media (min-width: 1024px) {
    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: 100%; }
}

/* =====================================================================
   C. Status pills / chips: never truncated, same size everywhere, two extra tones for the shared mapping
      green = Active / Approved      amber = Pending        red = Rejected / Cancelled
      blue  = Submitted / In progress (aai-pill--info)       grey = Draft / Inactive / Closed (aai-pill--off / --neutral)
   ===================================================================== */
body.aai-o2 .aai-pill { flex-shrink: 0; max-width: none; white-space: nowrap; }
body.aai-o2 .k-grid td:has(> .aai-pill) { text-overflow: clip; }
body.aai-o2 .aai-pill--info { background: #eef2ff; color: var(--aai-brand); }
body.aai-o2 .aai-pill--neutral { background: #f1f5f9; color: #475569; }
body.aai-o2 .k-grid td .label, body.aai-o2 .k-grid td .badge { height: 24px; padding: 0 10px; white-space: nowrap; }

/* =====================================================================
   E. Responsive
   ===================================================================== */
/* phone: the header menu (title, version, user) is a Bootstrap collapse again - it was forced open by an id rule and pushed the page down */
@media (max-width: 767.98px) {
    body.aai-o2 .aai-header .navbar-collapse#navbar-mobile:not(.show) { display: none !important; }
}
/* E2. QA 2026-11-02 (owner: "we can enable left and right drawers for small devices"): on a phone the Account icon opens a RIGHT drawer with the user name,
   My Profile, Change password, theme / density and Logout, all shown at once (no second tap on the avatar); the left drawer stays the menu (it ends with Logout). */
@media (max-width: 767.98px) {
    body.aai-o2 .aai-header .navbar-collapse#navbar-mobile.show,
    body.aai-o2 .aai-header .navbar-collapse#navbar-mobile.collapsing {
        position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: 290px; max-width: 86vw; height: 100vh !important;
        z-index: 1060; margin: 0; padding: 52px 16px 16px; overflow-y: auto; background: var(--aai-card, #fff);
        box-shadow: -6px 0 24px rgba(15, 23, 42, .22); display: flex; flex-direction: column; align-items: stretch; transition: none;
    }
    body.aai-o2 .aai-header #navbar-mobile .aai-header-title { display: none; }
    body.aai-o2 .aai-header #navbar-mobile .aai-header-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin: 0; float: none; }
    body.aai-o2 .aai-header #navbar-mobile .aai-header-user { display: block; font-weight: 600; padding: 4px 0 10px; border-bottom: 1px solid var(--aai-line); }
    body.aai-o2 .aai-header #navbar-mobile .aai-acct { display: block; }
    body.aai-o2 .aai-header #navbar-mobile #btnAaiAccount { display: none; }
    body.aai-o2 .aai-header #navbar-mobile #aaiAccountMenu,
    body.aai-o2 .aai-header #navbar-mobile #aaiAccountMenu.aai-hidden {
        display: block !important;   /* the drawer IS the account menu on a phone; on wider screens the avatar menu works as before */
        position: static; min-width: 0; max-height: none; box-shadow: none; border: 0; padding: 0; margin: 0;
    }
    body.aai-o2 .aai-header .aai-drawer-close {
        position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 8px;
        background: transparent; color: #475569; font-size: 26px; line-height: 1; cursor: pointer;
    }
}
@media (min-width: 768px) {
    body.aai-o2 .aai-header .aai-drawer-close { display: none; }
}
/* Kendo windows (e.g. Trip "Versions", fixed 460 px) and Bootstrap modals never wider than the screen */
body.aai-o2 .k-window { max-width: calc(100vw - 24px); }
@media (max-width: 575.98px) {
    body.aai-o2 .modal-dialog { margin: 12px; max-width: none; }
}

/* =====================================================================
   F. Scrollbars
   ===================================================================== */
/* sidebar: thin, subtle bar (only when the menu is taller than the screen) */
body.aai-o2 .sidebar.sidebar-main { scrollbar-width: thin; scrollbar-color: rgba(46, 49, 146, .25) transparent; }
body.aai-o2 .sidebar.sidebar-main::-webkit-scrollbar { width: 6px; }
body.aai-o2 .sidebar.sidebar-main::-webkit-scrollbar-thumb { background: rgba(46, 49, 146, .25); border-radius: 6px; }
body.aai-o2 .sidebar.sidebar-main::-webkit-scrollbar-track { background: transparent; }

/* =====================================================================
   G. Theme values outside the grid (owner 2026-10-29: the grid colours stay as he corrected them; everything else follows the brief
      or a small betterment). Tokens only, so every screen picks them up; the grid keeps its 6 px controls.
   ===================================================================== */
/* canvas and control radius tokens: see the :root block in section D */
body.aai-o2 .k-grid { --aai-radius-ctl: 6px; }    /* grid filter boxes and buttons unchanged */
/* one section-icon colour: the S5 form sections were #0b63ce, the R3 cards and dialogs the brand indigo */
body.aai-o2 .aai-s5-ico { background: var(--aai-brand); border-radius: 8px; }

/* =====================================================================
   H. Grid headers always visible, one header / scroll-bar rule for every grid
      - page grids (list, report and detail grids that grow with their rows): the header (titles + filter row) sticks under the app header
        while the page scrolls, so the column names never scroll away from the data. .k-grid and its inner root were overflow:hidden
        (rounded corners), which stops sticky; overflow:clip keeps the clipping without making a scroll box.
      - grids with their own scroll area (fixed height: Trip / Update Trip passengers and crews, or class aai-grid-scroll): the header
        reserves exactly the gutter of the body scroll bar (scrollbar-gutter), so titles and cells line up and there is no white gap.
      Not in dialogs (.k-window, .modal) or inside a box that scrolls itself (.table-responsive, .aai-matrix-wrap, Kendo tab strip).
      Not in a detail grid inside an expanded row (.k-detail-row): it sits inside the list's own scroll area, where the 64 px sticky offset
      pushed its header down over its rows (Questions > Option: "Yes" / "No" hidden, owner 2026-10-30).
   ===================================================================== */
/* the app header bar and the menu are sticky, but Site.css gives body height:100% (one screen), so on a long page they scrolled away
   after the first screen ("page header goes up, details down"): body grows with the page instead */
body.aai-o2 { height: auto; min-height: 100%; }
body.aai-o2 .k-grid, body.aai-o2 .k-grid > .k-grid-aria-root { overflow: clip; }
body.aai-o2 .content-wrapper .k-grid:not(:is(#ViewMappedPassengers, #ViewMappedCrews, .aai-grid-scroll)):not(:is(.k-window, .modal, .table-responsive, .aai-matrix-wrap, .k-tabstrip) .k-grid) .k-grid-header {
    position: sticky; top: var(--aai-header-h); z-index: 3;
}
/* a detail grid inside an expanded row: the rule above also reached it through the OUTER grid, and its 64 px sticky offset inside the list's own
   scroll area pushed its header down over its rows (owner 2026-10-30: Questions > Option, Frequently Raised > issues). !important: the rule above carries ids */
body.aai-o2 .k-grid .k-detail-row .k-grid .k-grid-header { position: static !important; top: auto; }
body.aai-o2 .k-grid:is(#ViewMappedPassengers, #ViewMappedCrews, .aai-grid-scroll) .k-grid-header { overflow: hidden; scrollbar-gutter: stable; scrollbar-width: thin; }
body.aai-o2 .k-grid:is(#ViewMappedPassengers, #ViewMappedCrews, .aai-grid-scroll) .k-grid-header::-webkit-scrollbar { width: 8px; }   /* same gutter as the body bar (aai-o2-lists.css) */
body.aai-o2 .k-grid:is(#ViewMappedPassengers, #ViewMappedCrews, .aai-grid-scroll) .k-grid-content { overflow-y: auto !important; scrollbar-gutter: stable; }

/* =====================================================================
   I. Laptops and desktops (1280 / 1366 x 768 / 1440 / 1536 x 864 / 1920): less dead space so the data starts higher
   ===================================================================== */
/* short screens (768 - 864 px high laptops): tighter page head and card spacing; the grid itself is unchanged */
@media (min-width: 992px) and (max-height: 880px) {
    body.aai-o2 .aai-crumbbar { padding-top: 10px; min-height: 28px; }
    body.aai-o2 .content.main-section-content { padding-top: 8px; }
    body.aai-o2 .content { padding-bottom: 16px; }
    body.aai-o2 .panel-body:has(.aai-list-bar) { padding-top: 12px; row-gap: 10px; }
    body.aai-o2 .aai-s5 { gap: 12px; }
    body.aai-o2 .aai-s5-sec > .card-header, body.aai-o2 .aai-r3-card > .card-header { padding-top: 10px; padding-bottom: 10px; }
}
/* 992 - 1439 px wide: a slightly narrower menu and page gutter, so list grids get ~40 px more room */
@media (min-width: 992px) and (max-width: 1439.98px) {
    body.aai-o2 { --aai-sidebar-w: 232px; }
    body.aai-o2 .content { padding-left: 16px; padding-right: 16px; }
    body.aai-o2 .aai-crumbbar { padding-left: 16px; padding-right: 16px; }
    body.aai-o2 #main-section-header:not(:has(.k-widget, .k-picker, .k-dropdownlist, input, select)) { padding-left: 16px; padding-right: 16px; }
}

/* =====================================================================
   J. Replacements for inline style attributes (CSP, 2026-10-29): the clearing spacer keeps the page-header rule of aai-o2.css
   (that rule matched div[style*="clear"]); the other replacements live in aai-o2-pages.css (shared with the sign-in layout)
   ===================================================================== */
body.aai-o2 #main-section-header:not(:has(.k-widget, .k-picker, .k-dropdownlist, input, select)) > div.aai-clear { display: none; }
/* grid name links that were underlined by an inline style keep the look of the a[style*="underline"] rules (aai-o2-kendo.css, compat) */
body.aai-o2 .k-grid .k-grid-content td a.aai-u-underline { color: var(--aai-brand) !important; }

/* =====================================================================
   K. Trip Approval queue (PhaseTwo/TripApproval.cshtml; batch D: also the Approved / Rejected table #wp05Decided): a plain table filled by script (ids, rows tr[data-trip-id], Review link and the
      30 s refresh unchanged); drawn like the Kendo list grids: list-title accent, grey header, column lines, 40 px rows, hover, framed box
   ===================================================================== */
body.aai-o2 .aai-s5-sec:has(#wp05Queue, #wp05Decided) > .card-header .aai-s5-ico { display: none; }
body.aai-o2 .aai-s5-sec:has(#wp05Queue, #wp05Decided) > .card-header::before {
    content: ''; flex: 0 0 4px; width: 4px; height: 20px; border-radius: 2px; background: #1e293b; margin-left: -18px;
}
body.aai-o2 .aai-s5-sec:has(#wp05Queue, #wp05Decided) > .card-header .aai-s5-title { font-weight: 700; }
body.aai-o2 .aai-s5-sec:has(#wp05Queue, #wp05Decided) .table-responsive { border: 1px solid var(--aai-line); border-radius: var(--aai-radius-card); background: #fff; }
body.aai-o2 :is(#wp05Queue, #wp05Decided) { margin: 0; font-size: var(--aai-fs-base); --bs-table-hover-bg: var(--aai-surface-alt); --bs-table-bg: #fff; }
body.aai-o2 :is(#wp05Queue, #wp05Decided) > thead > tr > th {
    background-color: #e4e8ee; color: #111827; font-weight: 700; height: 44px; padding: 6px 14px; line-height: 1.25; white-space: normal;
    vertical-align: middle; text-align: left; border-width: 0 0 1px 1px; border-style: solid; border-color: #d5dce5 #e3e8ef;
}
body.aai-o2 :is(#wp05Queue, #wp05Decided) > tbody > tr > td {
    height: 40px; padding: 6px 14px; line-height: 1.4; color: var(--aai-text-body); vertical-align: middle; font-variant-numeric: tabular-nums;
    border-width: 0 0 1px 1px; border-style: solid; border-color: var(--aai-line-soft) #e3e8ef;
    white-space: nowrap;   /* cells keep one line like the list grids (dates, codes, flight); the operator name (3rd column) may wrap, see below */
}
body.aai-o2 :is(#wp05Queue, #wp05Decided) > tbody > tr:last-child > td { border-bottom-width: 0; }
body.aai-o2 :is(#wp05Queue, #wp05Decided) .btn-sm { min-height: 28px; white-space: nowrap; }
/* cells keep one line like the list grids (dates, codes, flight); the operator name may wrap; the box scrolls sideways when the columns need more room */
body.aai-o2 :is(#wp05Queue, #wp05Decided) > tbody > tr > td:nth-child(2) { white-space: normal; min-width: 180px; }   /* Operator Name */
body.aai-o2 :is(#wp05Queue, #wp05Decided) > * > tr > :last-child { position: sticky; right: 0; z-index: 1; box-shadow: -3px 0 4px -3px rgba(15, 23, 42, .14); border-right-width: 0; border-left: 1px solid #d5dce5; }   /* Action: last column, held at the right edge (owner 2026-10-30) */
body.aai-o2 :is(#wp05Queue, #wp05Decided) > tbody > tr > td.wp05-act { background-color: #fff; }
body.aai-o2 :is(#wp05Queue, #wp05Decided) > tbody > tr:hover > td.wp05-act { background-color: var(--aai-surface-alt); }
body.aai-o2 #wp05QueueEmpty, body.aai-o2 #wp05DecidedEmpty { padding: 24px 0; text-align: center; color: #6b7280; }

/* =====================================================================
   L. List grids, round 3 batch B (owner points 2, 4, 16 + header / filter items; plan UI_POLISH_R3_PLAN_2026-10-30.md)
      - Action column: LAST column, Kendo sticky at the right edge (views: .Sticky(true) instead of .Locked(true))
      - headers never wrap: one line; aai-shell.js widens a column whose title would be cut (grid.resizeColumn)
      - data cells one line; a cut text gets a small expand button that shows the full text in a popup (aai-shell.js)
      - list grids fit the screen: the body scrolls inside the grid, titles + filter row and pager stay (aai-shell.js sets --aai-grid-body-max)
      - "no records": one compact row instead of the 160 px empty area
      - filter panel Show / Hide button in the list bar (aai-shell.js, remembered per page in this browser)
   ===================================================================== */
/* sticky Action column (right edge): white cell with a soft left edge over the scrolling columns */
/* (selectors carry .k-master-row / .k-table-td / :not(.k-group-cell) to outrank Kendo's grey alt-row rule for sticky cells) */
body.aai-o2 .k-grid tr.k-master-row > td.k-table-td.k-grid-content-sticky.aai-act-cell:not(.k-group-cell) { background-color: #fff; border-left: 1px solid #d5dce5; border-bottom-color: var(--aai-line-soft); box-shadow: -3px 0 4px -3px rgba(15, 23, 42, .14); }
body.aai-o2 .k-grid th.k-grid-header-sticky.aai-act-cell, body.aai-o2 .k-grid .k-filter-row .k-grid-header-sticky { border-left: 1px solid #d5dce5; box-shadow: -3px 0 4px -3px rgba(15, 23, 42, .14); }
body.aai-o2 .k-grid tr.k-master-row:hover > td.k-table-td.k-grid-content-sticky.aai-act-cell:not(.k-group-cell),
body.aai-o2 .k-grid tr.k-master-row.k-hover > td.k-table-td.k-grid-content-sticky.aai-act-cell:not(.k-group-cell) { background-color: var(--aai-surface-alt); }
body.aai-o2 .k-grid tr.k-master-row.k-selected > td.k-table-td.k-grid-content-sticky.aai-act-cell:not(.k-group-cell) { background-color: var(--aai-brand-soft); }

/* headers: one line, never cut by an ellipsis (the column is widened instead) */
body.aai-o2 .k-grid .k-grid-header th.k-header,
body.aai-o2 .k-grid .k-grid-header th.k-header .k-link,
body.aai-o2 .k-grid .k-grid-header th.k-header .k-column-title { white-space: nowrap; text-overflow: clip; }

/* data cells: one line; long text ends with "..." and gets the expand button (pills, links and buttons keep their own rules) */
/* not: detail rows (nested grids / forms), cells in edit mode (editors and validation tips must not be clipped), group / hierarchy cells */
body.aai-o2 .k-grid .k-grid-content tr:not(.k-detail-row):not(.k-grid-edit-row) > td:not(.aai-act-cell):not(.k-edit-cell):not(.k-hierarchy-cell):not(.k-group-cell) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.aai-o2 .k-grid .k-grid-content tr:not(.k-detail-row):not(.k-grid-edit-row) > td:not(.aai-act-cell):not(.k-edit-cell) > .aai-wrap,
body.aai-o2 .k-grid .k-grid-content tr:not(.k-detail-row):not(.k-grid-edit-row) > td:not(.aai-act-cell):not(.k-edit-cell) > div:only-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* PDF export draws the DOM: no expand buttons in the file */
.k-pdf-export .aai-more { display: none !important; }
body.aai-o2 .k-grid .k-grid-content td.aai-more-cell { position: relative; padding-right: 30px; }
body.aai-o2 .k-grid .k-grid-content td .aai-more {
    position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 20px; height: 20px; padding: 0; border: 1px solid var(--aai-line); border-radius: 4px;
    background: #fff; color: var(--aai-brand); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
body.aai-o2 .k-grid .k-grid-content td .aai-more::before {
    content: ""; width: 12px; height: 12px; background-color: currentColor;
    -webkit-mask: url('icons/aai-menu/expand.svg') center / 12px 12px no-repeat; mask: url('icons/aai-menu/expand.svg') center / 12px 12px no-repeat;
}
body.aai-o2 .k-grid .k-grid-content td .aai-more:hover, body.aai-o2 .k-grid .k-grid-content td .aai-more:focus-visible { background: var(--aai-brand-soft); outline: none; }
body.aai-o2 .aai-more-pop {
    position: absolute; z-index: 10050; max-width: min(480px, calc(100vw - 32px)); max-height: 50vh; overflow: auto; padding: 10px 34px 10px 12px;
    background: #fff; color: var(--aai-text-body); border: 1px solid var(--aai-line); border-radius: 8px; box-shadow: var(--aai-shadow-pop);
    font-size: var(--aai-fs-base); line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere;
}
body.aai-o2 .aai-more-pop.aai-hidden { display: none; }
body.aai-o2 .aai-more-pop .aai-more-close {
    position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #64748b; cursor: pointer;
    font-size: 16px; line-height: 22px;
}
body.aai-o2 .aai-more-pop .aai-more-close:hover { background: var(--aai-surface-alt); color: var(--aai-text); }

/* list grids that fit the screen: the body scrolls inside the grid (max height from aai-shell.js); header gutter = body gutter */
body.aai-o2 .k-grid.aai-grid-fit .k-grid-content:has(tbody tr):not(:has(> .k-grid-norecords)) { max-height: var(--aai-grid-body-max, none); overflow-y: auto !important; scrollbar-gutter: stable; }
body.aai-o2 .k-grid.aai-grid-fit:has(.k-grid-content tbody tr):not(:has(.k-grid-norecords)) .k-grid-header { overflow: hidden; scrollbar-gutter: stable; scrollbar-width: thin; position: static; }
body.aai-o2 .k-grid.aai-grid-fit:has(.k-grid-content tbody tr):not(:has(.k-grid-norecords)) .k-grid-header::-webkit-scrollbar { width: 8px; }

/* "no records": one compact row */
body.aai-o2 .k-grid .k-grid-norecords { flex-direction: row; gap: 8px; min-height: 44px; padding: 0 12px; }
body.aai-o2 .k-grid .k-grid-norecords::before { width: 18px; height: 18px; background-size: 18px 18px; }
body.aai-o2 .k-grid .k-grid-content:not(:has(tbody tr)):not(:has(> .k-grid-norecords))::after {
    flex-direction: row; justify-content: center; align-items: center; min-height: 44px; padding: 0 0 0 26px; background-position: calc(50% - 64px) center; background-size: 18px 18px;
}

/* filter panel Show / Hide (button added to the list bar by aai-shell.js) */
body.aai-o2 .aai-filterpanel-toggle { display: inline-flex; align-items: center; gap: 6px; }
body.aai-o2 .aai-filterpanel-toggle .aai-filter-ico {
    flex: 0 0 14px; width: 14px; height: 14px; background-color: currentColor;
    -webkit-mask: url('icons/aai-menu/filter.svg') center / 14px 14px no-repeat; mask: url('icons/aai-menu/filter.svg') center / 14px 14px no-repeat;
}
body.aai-o2 .aai-filterpanel-toggle[aria-expanded="false"] { font-weight: 600; }   /* filters hidden: the button stands out a little */
/* the hidden panel: beats the card display rules (.card.aai-r3-card is flex), a plain display:none, no !important */
body.aai-o2 .content .card.aai-r3-filter.aai-hidden, body.aai-o2 .content .aai-s5-filter-card.aai-hidden.aai-hidden { display: none; }

/* L2. Owner 2026-10-30 (after the first look): glassy list grid, round corners, no grey patch beside the Action filter cell, coloured export buttons.
   Kept: header cell colour #e4e8ee (tests read it); the soft gradient is a background-image on top, tinted by the theme brand. */
body.aai-o2 .aai-list-bar ~ .k-grid {
    width: 100%;
    border: 1px solid rgba(203, 213, 225, .75); border-radius: 12px; overflow: clip;
    background-color: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 28px -12px rgba(15, 23, 42, .14);
}
body.aai-o2 .aai-list-bar ~ .k-grid .k-grid-header th.k-header {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%),
                      linear-gradient(180deg, color-mix(in srgb, var(--aai-brand-soft) 45%, transparent), transparent);
}
/* the header strip behind the scroll-bar gutter: header colour beside the titles, white beside the filter row (was one grey block);
   --aai-grid-title-h = height of the title row, set by aai-shell.js */
body.aai-o2 .aai-list-bar ~ .k-grid .k-grid-header {
    background: linear-gradient(180deg, #e4e8ee 0, #e4e8ee var(--aai-grid-title-h, 44px), #fff var(--aai-grid-title-h, 44px), #fff 100%);
}
body.aai-o2 .aai-list-bar ~ .k-grid .k-filter-row .k-grid-header-sticky { background-color: #fff; }
body.aai-o2 .aai-list-bar ~ .k-grid .k-grid-content tr:hover > td { background-color: color-mix(in srgb, var(--aai-brand-soft) 45%, #fff); }
body.aai-o2 .aai-list-bar ~ .k-grid .k-grid-pager { background: rgba(255, 255, 255, .7); border-top: 1px solid var(--aai-line-soft); }

/* list bar buttons: each its own colour, shades set per theme (aai-o2-themes.css overrides the --aai-x-* values; below = Classic):
   Excel green, PDF red, Show / Hide filters = the theme brand. Light fill, coloured border, text and icon. Ids, classes and handlers unchanged.
   aai-o2-kendo.css paints every secondary Kendo button white with !important and a long :not() chain, so these rules need !important too;
   body.aai-o2:not(#aai-x) adds one id to the specificity (no element has that id) instead of repeating classes. */
/* Classic shades of the list-bar buttons: --aai-x-* in the :root block of section D (one :root, Sonar) */
body.aai-o2:not(#aai-x) .aai-list-bar .k-button:is(.k-grid-excel, :has(.k-i-excel)) { background-color: var(--aai-x-xls-bg) !important; border-color: var(--aai-x-xls-line) !important; color: var(--aai-x-xls-fg) !important; }
body.aai-o2:not(#aai-x) .aai-list-bar .k-button:is(.k-grid-excel, :has(.k-i-excel)):hover { background-color: var(--aai-x-xls-bg-h) !important; border-color: var(--aai-x-xls-fg) !important; color: var(--aai-x-xls-fg) !important; }
body.aai-o2:not(#aai-x) .aai-list-bar .k-button:is(.k-grid-pdf, :has(.k-i-pdf)) { background-color: var(--aai-x-pdf-bg) !important; border-color: var(--aai-x-pdf-line) !important; color: var(--aai-x-pdf-fg) !important; }
body.aai-o2:not(#aai-x) .aai-list-bar .k-button:is(.k-grid-pdf, :has(.k-i-pdf)):hover { background-color: var(--aai-x-pdf-bg-h) !important; border-color: var(--aai-x-pdf-fg) !important; color: var(--aai-x-pdf-fg) !important; }
body.aai-o2:not(#aai-x) .aai-list-bar .k-button.aai-filterpanel-toggle { background-color: var(--aai-brand-soft) !important; border-color: color-mix(in srgb, var(--aai-brand) 35%, #fff) !important; color: var(--aai-brand) !important; }
body.aai-o2:not(#aai-x) .aai-list-bar .k-button.aai-filterpanel-toggle:hover { background-color: color-mix(in srgb, var(--aai-brand) 16%, #fff) !important; border-color: var(--aai-brand) !important; }
body.aai-o2 .aai-list-bar .k-button:is(.k-grid-excel, .k-grid-pdf, :has(.k-i-excel), :has(.k-i-pdf)) :is(.k-icon, .k-svg-icon) { color: inherit; fill: currentColor; }

/* =====================================================================
   M. Round 3 batch C (owner 2026-10-30): page title and breadcrumb on one line, top-right toasts
   ===================================================================== */
/* page bar: aai-shell.js inlinePageBar() moves #aaiBreadcrumb into #main-section-header after the title */
body.aai-o2 #main-section-header.aai-pagehead--inline { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 12px; margin-top: 14px; }
body.aai-o2 #main-section-header.aai-pagehead--inline > h2#team-efficiency { flex: 0 0 auto; width: auto; max-width: none; }
body.aai-o2 #main-section-header.aai-pagehead--inline > div#dateFilter { flex: 0 0 auto; width: auto; max-width: none; margin-left: auto; }
body.aai-o2 .aai-crumbbar.aai-crumbbar--inline {
    flex: 1 1 auto; min-width: 0; min-height: 0; padding: 2px 0 0 12px; border-left: 1px solid var(--aai-line); overflow: hidden;
}
body.aai-o2 .aai-crumbbar--inline .aai-breadcrumb { flex-wrap: nowrap; white-space: nowrap; font-size: var(--aai-fs-sm); }
body.aai-o2 .aai-crumbbar--inline .aai-breadcrumb li.aai-crumb-last { display: none; }   /* the last crumb is the title on its left */
body.aai-o2 .aai-crumbbar.aai-crumbbar--same { display: none; }
@media (max-width: 767.98px) {
    body.aai-o2 #main-section-header.aai-pagehead--inline { flex-wrap: wrap; row-gap: 4px; }
    body.aai-o2 .aai-crumbbar.aai-crumbbar--inline { order: 3; flex-basis: 100%; padding: 0; border-left: 0; }
}

/* toasts (#dvAlert, ShowSuccessMessage / ShowErrorMessage, same script and timing): top right under the app header, a light card with a
   coloured edge and icon instead of the dark bottom-centre bar, so a message never covers the form buttons at the bottom */
body.aai-o2:not(.aai-login) .alertCont, body.aai-o2:not(.aai-login) .alertContLeftAlign {
    top: calc(var(--aai-header-h) + 12px); bottom: auto; left: auto; right: 16px; transform: none;
    min-width: 280px; max-width: min(420px, calc(100vw - 32px)); padding: 12px 16px 12px 44px; text-align: left;
    border-radius: 10px; box-shadow: 0 12px 32px -8px rgba(15, 23, 42, .25), 0 2px 6px rgba(15, 23, 42, .08);
}
body.aai-o2:not(.aai-login) .alert.alert-success.alertCont, body.aai-o2:not(.aai-login) .alert.alert-success.alertContLeftAlign {
    background-color: #fff !important; color: var(--aai-text-body) !important; border: 1px solid var(--aai-ok-line) !important; border-left: 4px solid var(--aai-ok) !important;
}
body.aai-o2:not(.aai-login) .alert.alert-danger.alertCont, body.aai-o2:not(.aai-login) .alert.alert-danger.alertContLeftAlign {
    background-color: #fff !important; color: var(--aai-text-body) !important; border: 1px solid var(--aai-err-line) !important; border-left: 4px solid var(--aai-err) !important;
}
body.aai-o2:not(.aai-login) .alertCont::before, body.aai-o2:not(.aai-login) .alertContLeftAlign::before {
    content: ""; position: absolute; left: 14px; top: 13px; width: 18px; height: 18px; border-radius: 50%;
    background: var(--aai-ok) no-repeat center / 12px 12px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5L20 7'/></svg>");
}
body.aai-o2:not(.aai-login) .alert-danger.alertCont::before, body.aai-o2:not(.aai-login) .alert-danger.alertContLeftAlign::before {
    background: var(--aai-err) no-repeat center / 12px 12px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'><path d='M12 7v6M12 17h.01'/></svg>");
}
@media (max-width: 575.98px) {
    body.aai-o2:not(.aai-login) .alertCont, body.aai-o2:not(.aai-login) .alertContLeftAlign { right: 12px; left: 12px; min-width: 0; max-width: none; width: auto; }
}

/* styled confirm (aaiConfirm in aai-shell.js, Kendo Confirm): OK is the primary action in the theme brand, Cancel stays outlined */
body.aai-o2:not(#aai-x) .k-dialog:has(.aai-confirm) .k-dialog-actions .k-button:first-child {
    background-color: var(--aai-brand) !important; border-color: var(--aai-brand) !important; color: #fff !important;
}
body.aai-o2:not(#aai-x) .k-dialog:has(.aai-confirm) .k-dialog-actions .k-button:first-child:hover { background-color: var(--aai-brand-hover) !important; border-color: var(--aai-brand-hover) !important; }
body.aai-o2 .k-dialog:has(.aai-confirm) { border-radius: 12px; overflow: hidden; min-width: min(380px, calc(100vw - 32px)); }

/* =====================================================================
   N. Round 3 batch C part 2 (owner 2026-10-30: "not only trip, all the page need to do this compacting"): every form page
      (S5 forms form.aai-s5, R3 forms form.aai-r3-form, the cards of other pages) - tighter cards, gaps, labels, hints and in-page notes;
      the page title row and the form button bar stay on screen on long forms. Spacing only: fields, order, ids and scripts unchanged.
   ===================================================================== */
/* cards and sections */
body.aai-o2 .aai-s5, body.aai-o2 .aai-r3-form { gap: 12px; }
body.aai-o2 .aai-s5-sec > .card-header, body.aai-o2 .aai-r3-card > .card-header { padding: 9px 16px; }
body.aai-o2 .aai-s5-sec > .card-body, body.aai-o2 .aai-r3-card > .card-body { padding: 14px 16px; }
body.aai-o2 .aai-r3-card > .card-body.p-0 { padding: 0; }
/* field grid: 12 px between rows of fields (was 16) */
body.aai-o2 :is(.aai-s5, .aai-r3-form, .aai-r3-card) .row.g-3 { --bs-gutter-y: .75rem; }
/* labels, hints, validation messages */
body.aai-o2 :is(.aai-s5, .aai-r3-card) .form-label { margin-bottom: 4px; }
body.aai-o2 :is(.aai-s5, .aai-r3-card) :is(.form-text, .help-block) { margin-top: 3px; font-size: var(--aai-fs-sm); line-height: 1.35; }
body.aai-o2 :is(.aai-s5, .aai-r3-card) :is(label.error, .field-validation-error, .validation-error-label, .k-invalid-msg) { margin-top: 2px; line-height: 1.35; }
/* notes, warnings and info banners inside the page (not the toasts): one compact block with a coloured edge */
body.aai-o2 .content :is(.alert-warning, .alert-info, .alert-danger, .alert-success):not(.alertCont):not(.alertContLeftAlign) {
    margin-bottom: 10px; padding: 8px 12px; border-radius: 8px; border-left-width: 4px; font-size: var(--aai-fs-sm); line-height: 1.4;
}
body.aai-o2 .content .gx-alert { padding: 8px 12px; gap: 8px; font-size: var(--aai-fs-sm); line-height: 1.4; }
body.aai-o2 .content .aai-s5-note { padding: 8px 12px; font-size: var(--aai-fs-sm); line-height: 1.4; }
/* long forms: the R3 button bar stays at the bottom of the screen like the S5 one (Cancel / Save always in reach) */
body.aai-o2 .aai-r3-form > .aai-r3-footer { position: sticky; bottom: 0; z-index: 5; padding: 10px 16px; box-shadow: 0 -6px 16px -10px rgba(15, 23, 42, .18); }
/* form pages (no list on the page): the title row stays under the app header while the form scrolls */
body.aai-o2:has(form:is(.aai-r3-form, .aai-s5)):not(:has(.aai-list-bar)) #main-section-header {
    position: sticky; top: var(--aai-header-h); z-index: 6; margin-top: 0; padding-top: 10px; padding-bottom: 8px; background: var(--aai-canvas);
}

/* =====================================================================
   O. Round 3 batch D: Trip Approval tabs, search and pager, row highlights (Resubmission / Rejected), the workflow history icon and popup
      (Trip list and Trip Approval), the reject box of the review page. Ids, URLs and scripts of the existing flows unchanged.
   ===================================================================== */
/* history icon (a list with a clock), drawn like the other row icons; the row icon may be a button */
body.aai-o2 .aai-row-act--history { 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='%237c3aed' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12a9 9 0 1 0 3-6.7'/><path d='M3 4v5h5'/><path d='M12 8v4l3 2'/></svg>"); }   /* violet clock (section AD) */
body.aai-o2 button.aai-row-act { font: inherit; line-height: 1; color: inherit; appearance: none; }

/* Trip Approval: tabs above the two cards, search box and the count pill inside the tab */
body.aai-o2 .aai-r3-tabs { margin-bottom: 12px; border-bottom-color: var(--aai-line); }
body.aai-o2 .aai-r3-tabs .nav-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--aai-text-label); }
body.aai-o2 .aai-r3-tabs .nav-link.active { color: var(--aai-brand); border-color: var(--aai-line) var(--aai-line) var(--aai-surface); }
body.aai-o2 .aai-r3-search { width: 240px; max-width: 100%; }
body.aai-o2 .aai-r3-note { margin: 8px 0 0; }
body.aai-o2 #wp05Queue td.wp05-act, body.aai-o2 #wp05Decided td.wp05-act { white-space: nowrap; }
body.aai-o2 #wp05Decided td.wp05-remarks { min-width: 160px; max-width: 320px; white-space: normal; overflow-wrap: anywhere; }

/* client-side pager of the two tables */
body.aai-o2 .aai-r3-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
body.aai-o2 .aai-r3-pager-info { font-size: var(--aai-fs-sm); color: var(--aai-text-muted); }
body.aai-o2 .aai-r3-pager-size { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 0 auto; font-size: var(--aai-fs-sm); color: var(--aai-text-muted); }
body.aai-o2 .aai-r3-pager-size .form-select { width: auto; min-width: 76px; }

/* row highlights: a Resubmission (rejected before) in the queue, a rejected decision in the Approved / Rejected tab */
/* (Bootstrap 5.3 paints table cells with an inset box-shadow, so the row colour is set through the table variables and the cell background) */
body.aai-o2 :is(#wp05Queue, #wp05Decided) > tbody > tr.wp05-row--resubmit { --bs-table-bg: var(--aai-warn-bg); --bs-table-hover-bg: var(--aai-warn-bg); }
body.aai-o2 :is(#wp05Queue, #wp05Decided) > tbody > tr.wp05-row--resubmit > td { background-color: var(--aai-warn-bg); }
body.aai-o2 :is(#wp05Queue, #wp05Decided) > tbody > tr.wp05-row--resubmit > td:first-child { box-shadow: inset 4px 0 0 var(--aai-warn); }
body.aai-o2 :is(#wp05Queue, #wp05Decided) > tbody > tr.wp05-row--rejected { --bs-table-bg: var(--aai-err-bg); --bs-table-hover-bg: var(--aai-err-bg); }
body.aai-o2 :is(#wp05Queue, #wp05Decided) > tbody > tr.wp05-row--rejected > td { background-color: var(--aai-err-bg); }
body.aai-o2 :is(#wp05Queue, #wp05Decided) > tbody > tr.wp05-row--rejected > td:first-child { box-shadow: inset 4px 0 0 var(--aai-err); }

/* review page: the reject box is marked as a destructive step */
/* QA 2026-11-01: the reject box is now a Bootstrap modal: the red edge and tint belong to its card, not to the full-screen modal layer (the whole page turned pink) */
body.aai-o2 #wp05RejectBox:not(.modal) { border-left: 4px solid var(--aai-err); background: var(--aai-err-bg); }
body.aai-o2 #wp05RejectBox.modal .modal-content { border-top: 4px solid var(--aai-err); }
body.aai-o2 #wp05RejectBox #wp05Remarks:focus { border-color: var(--aai-err); box-shadow: 0 0 0 3px var(--aai-err-line); }

/* workflow history popup: a vertical timeline, decisions in the brand colour, rejections in red, the open request in amber */
body.aai-o2 #aaiTripHistory .aai-th-list { list-style: none; margin: 0; padding: 4px 0 4px 18px; border-left: 2px solid var(--aai-line); }
body.aai-o2 #aaiTripHistory .aai-th-step { position: relative; margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--aai-line-soft); border-radius: 8px; background: var(--aai-surface); }
body.aai-o2 #aaiTripHistory .aai-th-step::before {
    content: ""; position: absolute; left: -25px; top: 12px; width: 12px; height: 12px; border-radius: 50%;
    background: var(--aai-surface); border: 2px solid var(--aai-text-muted);
}
body.aai-o2 #aaiTripHistory .aai-th-step--decision::before { border-color: var(--aai-brand); background: var(--aai-brand); }
body.aai-o2 #aaiTripHistory .aai-th-step--rejected { border-color: var(--aai-err-line); background: var(--aai-err-bg); }
body.aai-o2 #aaiTripHistory .aai-th-step--rejected::before { border-color: var(--aai-err); background: var(--aai-err); }
body.aai-o2 #aaiTripHistory .aai-th-step--open { border-color: var(--aai-warn-line); background: var(--aai-warn-bg); }
body.aai-o2 #aaiTripHistory .aai-th-step--open::before { border-color: var(--aai-warn); }
body.aai-o2 #aaiTripHistory .aai-th-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
body.aai-o2 #aaiTripHistory .aai-th-when, body.aai-o2 #aaiTripHistory .aai-th-by { font-size: var(--aai-fs-sm); color: var(--aai-text-muted); }
body.aai-o2 #aaiTripHistory .aai-th-remarks { margin-top: 4px; font-size: var(--aai-fs-sm); white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; cursor: pointer; }

/* =====================================================================
   P. Round 3 batch E: IMS dashboard KPI heads (title, big number, Report button), chart legends; CISF dashboard tile groups;
      Questions page delete action. Ids, chart data sources, gates and handlers unchanged.
   ===================================================================== */
/* IMS dashboard: each KPI card = head (title + number left, Report right) + chart with its legend under it */
body.aai-o2 .aai-ims-board .aai-kpi-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
body.aai-o2 .aai-ims-board .aai-kpi-text { min-width: 0; }
body.aai-o2 .aai-ims-board .aai-kpi-head .section-header-title { margin: 0 0 2px; font-size: var(--aai-fs-md); font-weight: 600; color: var(--aai-text-label); }
body.aai-o2 .aai-ims-board .aai-kpi-num { display: inline-block; font-size: 28px; line-height: 1.15; font-weight: 700; color: var(--aai-text); font-variant-numeric: tabular-nums; }
body.aai-o2 .aai-ims-board .aai-kpi-num--sm { font-size: 22px; }
body.aai-o2 .aai-ims-board .aai-kpi-pair { display: flex; flex-wrap: wrap; gap: 4px 18px; }
body.aai-o2 .aai-ims-board .aai-kpi-sub { display: inline-flex; align-items: baseline; gap: 6px; font-size: var(--aai-fs-sm); color: var(--aai-text-muted); }
body.aai-o2 .aai-ims-board .aai-kpi-link {
    flex: 0 0 auto; display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 1px solid var(--aai-line-ctl); border-radius: 6px;
    font-size: var(--aai-fs-sm); font-weight: 600; color: var(--aai-brand); background: #fff; text-decoration: none;
}
body.aai-o2 .aai-ims-board .aai-kpi-link:hover { border-color: var(--aai-brand); background: var(--aai-brand-soft); }
body.aai-o2 .aai-ims-board .aai-kpi-link:focus-visible { outline: 2px solid var(--aai-brand); outline-offset: 1px; }
body.aai-o2 .aai-ims-board #statsContainer .sparkline-container { height: 300px; }
body.aai-o2 .aai-ims-board .statsContainerAlt .aai-kpi-num { margin-bottom: 6px; }

/* CISF dashboard: Masters / Reports groups; a group the user has no tile in is not shown */
body.aai-o2 .aai-r3-tilegroup + .aai-r3-tilegroup { margin-top: 18px; }
body.aai-o2 .aai-r3-tilegroup-title { margin: 0 0 10px; font-size: var(--aai-fs-sm); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--aai-text-muted); }
body.aai-o2 .aai-r3-tilegroup:not(:has(.aai-r3-tile)) { display: none; }

/* Questions: the delete action sits in the list bar, soft red, with the count of ticked questions */
body.aai-o2 .aai-list-bar .aai-btn-danger-soft { gap: 8px; border-color: var(--aai-err-line); color: var(--aai-err); background: #fff; }
body.aai-o2 .aai-list-bar .aai-btn-danger-soft:not(:disabled):hover { background: var(--aai-err-bg); border-color: var(--aai-err); }
body.aai-o2 .aai-list-bar .aai-btn-danger-soft:disabled { opacity: .55; cursor: not-allowed; }

/* =====================================================================
   Q. Round 3 batch E2: module dashboards as drawn on the canvas "AAI Portal Compact UX & Dashboards" (IMS existing data, GHA, CISF):
      KPI strip, period buttons, cards with bar lists, hourly line chart and short tables. Data from aai-dashboards.js (text only).
   ===================================================================== */
body.aai-o2 .aai-dash-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; }
body.aai-o2 .aai-dash-range { margin: 0; padding: 0; min-width: 0; display: inline-flex; border: 1px solid var(--aai-line-ctl); border-radius: 6px; overflow: hidden; background: #fff; }
body.aai-o2 .aai-dash-range button { border: 0; background: transparent; padding: 6px 12px; font-size: var(--aai-fs-sm); font-weight: 600; color: var(--aai-text-label); cursor: pointer; }
body.aai-o2 .aai-dash-range button + button { border-left: 1px solid var(--aai-line-ctl); }
body.aai-o2 .aai-dash-range button.active { background: var(--aai-brand); color: #fff; }
body.aai-o2 .aai-dash-range button:focus-visible { outline: 2px solid var(--aai-brand); outline-offset: -2px; }
body.aai-o2 .aai-dash-filter { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: var(--aai-fs-sm); color: var(--aai-text-label); }
body.aai-o2 .aai-dash-filter .k-dropdownlist { width: 200px; }
body.aai-o2 .aai-dash { display: flex; flex-direction: column; gap: 12px; }
body.aai-o2 .aai-dash-period { margin: 0; font-size: var(--aai-fs-sm); color: var(--aai-text-muted); }

/* KPI strip: six tiles on wide screens, three / two on smaller ones */
body.aai-o2 .aai-dash-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
body.aai-o2 .aai-dash .aai-dash-kpis { margin-bottom: 0; }
@media (max-width: 1365.98px) { body.aai-o2 .aai-dash-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { body.aai-o2 .aai-dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body.aai-o2 .aai-dash-kpi {
    display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px; border: 1px solid var(--aai-line); border-radius: 8px;
    background: #fff; color: inherit; text-decoration: none;
}
body.aai-o2 a.aai-dash-kpi:hover { border-color: var(--aai-brand); }
body.aai-o2 a.aai-dash-kpi:focus-visible { outline: 2px solid var(--aai-brand); outline-offset: 1px; }
body.aai-o2 .aai-dash-kpi-label { font-size: var(--aai-fs-sm); font-weight: 600; color: var(--aai-text-muted); }
body.aai-o2 .aai-dash-kpi strong { font-size: 24px; line-height: 1.15; font-weight: 700; color: var(--aai-text); font-variant-numeric: tabular-nums; }
body.aai-o2 .aai-dash-kpi-of { font-size: 13px; font-weight: 600; color: var(--aai-text-muted); }
body.aai-o2 .aai-dash-kpi-note { overflow-wrap: anywhere; font-size: 11px; color: var(--aai-text-muted); }   /* QA 2026-11-02: wraps instead of cutting ("208 confiscated · 0 disposed · 0 ha...") */
body.aai-o2 .aai-dash-kpi--warn { background: var(--aai-warn-bg); border-color: var(--aai-warn-line); }
body.aai-o2 .aai-dash-kpi--warn :is(.aai-dash-kpi-label, strong) { color: var(--aai-warn); }
body.aai-o2 .aai-dash-kpi--err { background: var(--aai-err-bg); border-color: var(--aai-err-line); }
body.aai-o2 .aai-dash-kpi--err :is(.aai-dash-kpi-label, strong) { color: var(--aai-err); }

/* cards and their grids */
body.aai-o2 .aai-dash-grid { display: grid; gap: 12px; }
body.aai-o2 .aai-dash-grid--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
body.aai-o2 .aai-dash-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1199.98px) { body.aai-o2 :is(.aai-dash-grid--2-1, .aai-dash-grid--3) { grid-template-columns: minmax(0, 1fr); } }
body.aai-o2 .aai-dash-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px 14px; border: 1px solid var(--aai-line); border-radius: 8px; background: #fff; }
body.aai-o2 .aai-dash-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
body.aai-o2 .aai-dash-card-head h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--aai-text); }
body.aai-o2 .aai-dash-card-head a { font-size: var(--aai-fs-sm); font-weight: 600; }
body.aai-o2 .aai-dash-links { display: inline-flex; flex-wrap: wrap; gap: 10px; }
body.aai-o2 .aai-dash-chart { height: 240px; }
body.aai-o2 .aai-dash-empty { margin: 8px 0; font-size: var(--aai-fs-sm); color: var(--aai-text-muted); }

/* bar list: label, bar, value */
body.aai-o2 .aai-dash-bars { display: flex; flex-direction: column; gap: 9px; }
body.aai-o2 .aai-dash-bar { display: grid; grid-template-columns: minmax(80px, 40%) minmax(0, 1fr) 48px; gap: 8px; align-items: center; font-size: var(--aai-fs-sm); }
body.aai-o2 .aai-dash-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.aai-o2 .aai-dash-bar-track { height: 10px; border-radius: 99px; background: #eef1f5; overflow: hidden; }
body.aai-o2 .aai-dash-bar-fill { display: block; height: 10px; border-radius: 99px; background: var(--aai-brand); }
body.aai-o2 .aai-dash-bar-fill--sky { background: #60a5fa; }
body.aai-o2 .aai-dash-bar-fill--amber { background: #b7791f; }
body.aai-o2 .aai-dash-bar-value { text-align: right; font-variant-numeric: tabular-nums; }

/* short table (approval queue, needs supervisor) */
body.aai-o2 .aai-dash-tablebox { overflow-x: auto; }
body.aai-o2 .aai-dash-table { width: 100%; border-collapse: collapse; font-size: var(--aai-fs-sm); }
body.aai-o2 .aai-dash-table th { padding: 6px 8px; border-bottom: 1px solid var(--aai-line); font-weight: 600; text-align: left; color: var(--aai-text-muted); white-space: nowrap; }
body.aai-o2 .aai-dash-table td { padding: 7px 8px; border-bottom: 1px solid var(--aai-line-soft); vertical-align: middle; white-space: nowrap; }
body.aai-o2 .aai-dash-table tr:last-child td { border-bottom: 0; }

/* IMS: escalated issues as one box per severity; the chart that holds the data stays out of sight */
body.aai-o2 .aai-sev-boxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
body.aai-o2 .aai-sev-box { display: flex; flex-direction: column; padding: 10px; border: 1px solid var(--aai-line); border-radius: 8px; background: #fff; }
body.aai-o2 .aai-sev-box strong { font-size: 22px; line-height: 1.2; color: var(--aai-text); }
body.aai-o2 .aai-sev-box-label { font-size: var(--aai-fs-sm); font-weight: 600; color: var(--aai-text-label); }
body.aai-o2 .aai-sev-box--err { background: var(--aai-err-bg); border-color: var(--aai-err-line); }
body.aai-o2 .aai-sev-box--err :is(strong, .aai-sev-box-label) { color: var(--aai-err); }
body.aai-o2 .aai-sev-box--warn { background: var(--aai-warn-bg); border-color: var(--aai-warn-line); }
body.aai-o2 .aai-sev-box--warn :is(strong, .aai-sev-box-label) { color: var(--aai-warn); }
body.aai-o2 .aai-ims-board #statsContainer .sparkline-container.aai-dash-datachart { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
body.aai-o2 .aai-ims-board #statsContainer .stats-graph { position: relative; }
body.aai-o2 .aai-dash-table td:nth-child(2) { white-space: normal; min-width: 90px; }

/* =====================================================================
   R. Header account menu (owner 2026-10-30: "still 2 button there in account section"): one avatar button opens My Profile, Change password,
      theme, density and Logout (canvas "Shell").
      Uses the display-menu look (aai-o2-themes.css section 4); links are full-width rows with an icon.
   ===================================================================== */
body.aai-o2 .aai-header a.aai-disp-opt { text-decoration: none; }
body.aai-o2 .aai-header a.aai-disp-opt:hover, body.aai-o2 .aai-header a.aai-disp-opt:focus-visible { color: var(--aai-brand); text-decoration: none; }
body.aai-o2 .aai-header .aai-disp-opt i { flex: 0 0 16px; font-size: 14px; line-height: 1; margin: 0; }
body.aai-o2 .aai-header .aai-acct-logout { border-top: 1px solid var(--aai-line); border-radius: 0 0 6px 6px; margin-top: 4px; padding-top: 4px; }
body.aai-o2 .aai-header .aai-acct-logout:hover { color: var(--aai-err); }
body.aai-o2 .aai-header .aai-acct-menu { min-width: 230px; max-height: calc(100vh - 80px); overflow-y: auto; }
body.aai-o2 .aai-header .aai-acct-menu .aai-disp-head { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--aai-line); }
@media (max-width: 768px) {
    body.aai-o2 .aai-header .aai-acct .aai-disp-menu { right: auto; left: 0; }
}

/* =====================================================================
   S. Grid spacing and the frozen Action column (owner 2026-10-30: "grid pagination touch with parent div layout, apply some space";
      "some tile overlapping feel"). Column widths themselves are fitted by aai-shell.js fitColumns (text up to 120 characters).
   ===================================================================== */
body.aai-o2 .k-grid.aai-grid-fit { margin-bottom: 16px; }
body.aai-o2 .panel-body > .k-grid:last-child, body.aai-o2 .aai-r3-card > .k-grid:last-child { margin-bottom: 16px; }
body.aai-o2 .k-grid .k-grid-pager { border-radius: 0 0 8px 8px; }
body.aai-o2 .k-grid tr.k-master-row > td.k-table-td.k-grid-content-sticky.aai-act-cell:not(.k-group-cell),
body.aai-o2 .k-grid th.k-grid-header-sticky.aai-act-cell, body.aai-o2 .k-grid .k-filter-row .k-grid-header-sticky {
    border-left: 1px solid #cbd5e1; box-shadow: -8px 0 10px -8px rgba(15, 23, 42, .28);
}

/* =====================================================================
   T. Compact list bar (owner 2026-10-30: "move the button to filter export pdf near ... pdf and excel as icon ... one filter icon on the right
      corner ... think like compact"). aai-shell.js compactListBar(): Create button in the bar, icon-only exports, one filter icon.
   ===================================================================== */
body.aai-o2 .aai-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
body.aai-o2 .aai-bar-hidden { display: none !important; }
/* the "Show Filter" check box is drawn by Kendo after the bar is rebuilt: hidden by CSS as well (the filter icon replaces it) */
body.aai-o2 .aai-list-bar--compact:has(> .aai-filter-btn) > :is(.k-checkbox-wrap, label.k-checkbox-label, input#chkKendoFilterShowHide) { display: none !important; }
body.aai-o2 .aai-list-bar.aai-list-bar--compact { gap: 8px; align-items: center; }
body.aai-o2 .aai-list-bar--compact > .aai-bar-create { display: inline-flex; gap: 8px; }
body.aai-o2 .aai-list-bar--compact > .aai-bar-create > :is(a, button) { height: 34px; display: inline-flex; align-items: center; white-space: nowrap; }
body.aai-o2 .aai-list-bar--compact .k-button.aai-icon-only { width: 34px; min-width: 34px; height: 34px; padding: 0; justify-content: center; gap: 0; }
body.aai-o2 .aai-list-bar--compact .k-button.aai-icon-only :is(.k-icon, .k-svg-icon) { margin: 0; font-size: 16px; }
body.aai-o2 .aai-list-bar--compact .aai-filter-btn .aai-filter-ico {
    display: inline-block; flex: 0 0 16px; width: 16px; height: 16px; background-color: currentColor;
    -webkit-mask: url('icons/aai-menu/filter.svg') center / 16px 16px no-repeat; mask: url('icons/aai-menu/filter.svg') center / 16px 16px no-repeat;
}
body.aai-o2:not(#aai-x) .aai-list-bar--compact .aai-filter-btn { background-color: #fff !important; border-color: var(--aai-line-ctl) !important; color: #475569 !important; }
body.aai-o2:not(#aai-x) .aai-list-bar--compact .aai-filter-btn[aria-pressed="true"] { background-color: var(--aai-brand-soft) !important; border-color: color-mix(in srgb, var(--aai-brand) 40%, #fff) !important; color: var(--aai-brand) !important; }
/* the page head without its button: one slim line (title + breadcrumb) */
body.aai-o2 #main-section-header.aai-pagehead--nobtn { margin-top: 8px; margin-bottom: 4px; min-height: 0; }
body.aai-o2 #main-section-header.aai-pagehead--nobtn > #dateFilter { display: none; }
/* Questions filter card: the Department picker showed "A..." (the card is only as wide as its content) */
body.aai-o2 #dvQuestionFilter :is(.k-dropdownlist, .k-picker) { min-width: 260px; }

/* =====================================================================
   U. One top bar per list page (owner 2026-10-30 screenshot): title + count + breadcrumb left, tools right, even 8 px gaps, all 36 px high.
      aai-shell.js moveToolsToHead(); the breadcrumb no longer repeats the title.
   ===================================================================== */
body.aai-o2 #main-section-header.aai-pagehead--tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; margin-bottom: 10px; min-height: 40px; }
body.aai-o2 #main-section-header.aai-pagehead--tools > h2#team-efficiency { flex: 0 0 auto; width: auto; max-width: none; margin: 0; }
body.aai-o2 #main-section-header.aai-pagehead--tools > .aai-head-count { flex: 0 0 auto; margin-left: -4px; }
body.aai-o2 #main-section-header.aai-pagehead--tools > #dateFilter { display: none; }
body.aai-o2 #main-section-header .aai-head-count { font-size: var(--aai-fs-lg); font-weight: 600; color: #d32f2f; }
/* the page head is a Bootstrap .row: its children are forced to 100 % width; the clear div forces a wrap */
body.aai-o2 #main-section-header.aai-pagehead--tools > * { width: auto; max-width: none; padding-left: 0; padding-right: 0; }
body.aai-o2 #main-section-header.aai-pagehead--tools > .aai-clear { display: none; }
body.aai-o2 #main-section-header.aai-pagehead--tools > .aai-crumbbar { flex: 0 1 auto; min-width: 0; }
@media (min-width: 768px) { body.aai-o2 #main-section-header.aai-pagehead--tools { flex-wrap: nowrap; } }
body.aai-o2 #main-section-header > .aai-head-tools { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
body.aai-o2 #main-section-header > .aai-head-tools > :is(a, button, .k-button, .btn) { height: 36px; min-height: 36px; margin: 0 !important; display: inline-flex; align-items: center; white-space: nowrap; }
body.aai-o2 #main-section-header > .aai-head-tools > .k-button.aai-icon-only { width: 36px; min-width: 36px; padding: 0; justify-content: center; }
body.aai-o2 #main-section-header > .aai-head-tools :is(.k-icon, .k-svg-icon) { margin: 0; font-size: 16px; }
body.aai-o2 #main-section-header > .aai-head-tools .aai-filter-btn .aai-filter-ico {
    display: inline-block; flex: 0 0 16px; width: 16px; height: 16px; background-color: currentColor;
    -webkit-mask: url('icons/aai-menu/filter.svg') center / 16px 16px no-repeat; mask: url('icons/aai-menu/filter.svg') center / 16px 16px no-repeat;
}
body.aai-o2:not(#aai-x) #main-section-header .aai-filter-btn { background-color: #fff !important; border-color: var(--aai-line-ctl) !important; color: #475569 !important; }
body.aai-o2:not(#aai-x) #main-section-header .aai-filter-btn[aria-pressed="true"] { background-color: var(--aai-brand-soft) !important; border-color: color-mix(in srgb, var(--aai-brand) 40%, #fff) !important; color: var(--aai-brand) !important; }
body.aai-o2:not(#aai-x) #main-section-header .k-button:is(.k-grid-excel, :has(.k-i-excel)) { background-color: var(--aai-x-xls-bg) !important; border-color: var(--aai-x-xls-line) !important; color: var(--aai-x-xls-fg) !important; }
body.aai-o2:not(#aai-x) #main-section-header .k-button:is(.k-grid-pdf, :has(.k-i-pdf)) { background-color: var(--aai-x-pdf-bg) !important; border-color: var(--aai-x-pdf-line) !important; color: var(--aai-x-pdf-fg) !important; }
/* the list bar emptied by the move: no gap left above the grid */
body.aai-o2 .aai-list-bar.aai-bar-hidden + .k-grid, body.aai-o2 .aai-list-bar.aai-bar-hidden ~ .k-grid { margin-top: 0; }
@media (max-width: 767.98px) {
    body.aai-o2 #main-section-header > .aai-head-tools { margin-left: 0; justify-content: flex-start; flex: 1 0 100%; }
}

/* =====================================================================
   V. Even filter grid for the older list pages (owner 2026-10-30: "why this filter elements not aligned"); aai-shell.js alignLegacyFilters().
   ===================================================================== */
body.aai-o2 .aai-auto-filter { flex: 0 0 100%; width: 100%; max-width: 100%; padding: 4px 0 14px; margin-bottom: 12px; border-bottom: 1px solid var(--aai-line-soft); }
body.aai-o2 .aai-filter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px 16px; align-items: end; }
body.aai-o2 .aai-filter-item { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
body.aai-o2 .aai-filter-item--range { grid-column: span 2; }
body.aai-o2 .aai-filter-item .aai-filter-label { margin: 0; font-size: var(--aai-fs-sm); font-weight: 500; color: var(--aai-text-muted); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.aai-o2 .aai-filter-item .aai-filter-label.select-period { text-transform: none; letter-spacing: normal; }   /* period labels (From / To Date) read like the other labels */
body.aai-o2 .aai-filter-control { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
body.aai-o2 .aai-filter-control :is(.k-picker, .k-dropdownlist, .k-datepicker, .k-combobox, .k-multiselect, .k-input, .form-control) { width: 100% !important; max-width: none !important; margin: 0 !important; }
body.aai-o2 .aai-filter-range { display: flex; align-items: center; gap: 8px; }
body.aai-o2 .aai-filter-range > .aai-filter-range-field { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
body.aai-o2 .aai-filter-range-to { color: var(--aai-text-muted); font-size: var(--aai-fs-sm); }
body.aai-o2 .aai-filter-item--actions .aai-filter-control { flex-direction: row; gap: 8px; }
body.aai-o2 .aai-filter-item--actions .aai-filter-control > :is(button, .k-button) { height: 36px; }
@media (max-width: 575.98px) { body.aai-o2 .aai-filter-item--range { grid-column: auto; } }

/* ==========================================================================================================================================
   W. One standard for every list page: filter card + table card (owner 2026-10-30, Audit Log screenshot: "we need this filter and table
   padding and space alignment for all the pages and maintain the standardized"). aai-shell.js standardFilterCards() moves filter blocks
   that sat inside the table panel into a filter card before it.
   - filter card: 16 px padding, fields in even columns (min 200 px), 16 px gaps, label above (13 px, 4 px to the control), controls 36 px,
     a date range takes two columns, the Search / Load button sits on the control line;
   - table card: the grid 16 px from every edge of its white card; 16 px between the filter card and the table card.
   ========================================================================================================================================== */
body.aai-o2 .content :is(.card.aai-r3-filter, .aai-s5-filter-card) {
    flex: 0 0 100%; width: 100%; max-width: none; margin: 10px 0 0; padding: 16px;
    background: var(--aai-surface); border: 1px solid var(--aai-line-soft); border-radius: var(--aai-radius-card); box-shadow: var(--aai-shadow-card);
}
body.aai-o2 .content .card.aai-r3-filter > .card-body { padding: 0; }
body.aai-o2 .content :is(.card.aai-r3-filter, .aai-s5-filter-card):not(.aai-hidden) + :is(.panel, .main-section-content) { margin-top: 16px; }
body.aai-o2 .main-section-content:has(> .aai-ims-filter:not(.aai-hidden)) + .main-section-content > .panel:first-child { margin-top: 8px; }   /* + the 8 px top padding of that content block = 16 */
body.aai-o2 .content :is(.aai-r3-filter > .card-body > .row, .aai-r3-filter > .card-body > .aai-ims-filters, .aai-s5-filter-card .aai-filter-grid) {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; align-items: end; margin: 0; padding: 0;
}
body.aai-o2 .content :is(.aai-r3-filter > .card-body > .row, .aai-r3-filter > .card-body > .aai-ims-filters, .aai-s5-filter-card .aai-filter-grid) > * {
    width: auto; max-width: none; min-width: 0; flex: none; margin: 0; padding: 0;
}
body.aai-o2 .content .aai-r3-filter > .card-body > .row > :has(.aai-r3-daterange) { grid-column: span 2; }
body.aai-o2 .content .aai-r3-filter .aai-ims-f { display: flex; flex-direction: column; gap: 0; }
body.aai-o2 .content :is(.aai-r3-filter, .aai-s5-filter-card) .k-invalid-msg:empty { display: none; }   /* an empty message box pushed its field 4-6 px higher than the others */
body.aai-o2 .content .aai-r3-filter .aai-ims-f--action, body.aai-o2 .content .aai-s5-filter-card .aai-filter-item--actions { align-self: end; justify-self: start; }
body.aai-o2 .content :is(.aai-r3-filter, .aai-s5-filter-card) :is(.form-label, .aai-filter-label, .aai-s5-filter > label) {
    display: block; margin: 0 0 4px; font-size: var(--aai-fs-base); font-weight: 500; color: var(--aai-text-label); text-transform: none; letter-spacing: normal;
}
body.aai-o2 .content .aai-s5-filter-card .aai-filter-item { gap: 0; }
body.aai-o2 .content :is(.aai-r3-filter, .aai-s5-filter-card) :is(.k-picker, .k-input, .form-select, select.form-control, input.form-control:not(.k-input-inner)) { width: 100%; max-width: none; min-height: 36px; }
body.aai-o2 .content .aai-r3-filter .aai-s5-filter { flex: none; width: auto; padding: 0; margin: 0; border: 0; gap: 0; }
@media (max-width: 575.98px) { body.aai-o2 .content .aai-r3-filter > .card-body > .row > :has(.aai-r3-daterange) { grid-column: auto; } }
/* the table card: the grid 16 px from each edge (the pager no longer needs its own bottom margin) */
body.aai-o2 .content .panel.panel-flat > .panel-body:has(.k-grid) { padding: 16px; }
body.aai-o2 .content .panel.panel-flat > .panel-body .row:has(.k-grid) { flex: 0 0 100%; width: 100%; max-width: 100%; margin: 0; }
body.aai-o2 .content .panel.panel-flat > .panel-body .row:has(.k-grid) > [class*="col-"]:has(.k-grid) { padding: 0; }
body.aai-o2 .content .panel.panel-flat > .panel-body .k-grid.aai-grid-fit { margin-bottom: 0; }
body.aai-o2 .content .panel.panel-flat > .panel-body .row.form-group:has(.k-grid) { margin-bottom: 0 !important; }   /* .form-group sets 20 px !important (aai-o2.css): the grid row ends at the card padding */
/* a grid row placed straight in the panel, after a panel-body (Assigned to Me / Created by Me: status tiles above the grid) */
body.aai-o2 .content .panel.panel-flat:has(> .row .k-grid) > .panel-body { padding: 16px; }
body.aai-o2 .content .panel.panel-flat > .row:has(.k-grid) { margin: 0; padding: 0 16px 16px; }
body.aai-o2 .content .panel.panel-flat > .row:has(.k-grid) > [class*="col-"]:has(.k-grid) { padding: 0; }
body.aai-o2 .content .panel.panel-flat > .row .k-grid.aai-grid-fit { margin-bottom: 0; }
/* where the page content is itself a Bootstrap .row, its gutter (12 px each side) pushed the table card's grid in by 28 px instead of 16 */
body.aai-o2 .content.row > .panel.panel-flat:has(.k-grid) { padding-left: 0; padding-right: 0; }
/* the IMS filter card (section#dateFilter) had padding 0 from an id rule: same 16 px as the other filter cards */
body.aai-o2 .content section#dateFilter.aai-ims-filter { padding: 16px; margin-bottom: 0; }
body.aai-o2 .content :is(.aai-r3-filter, .aai-s5-filter-card) :is(.form-label, .aai-filter-label) { line-height: 1.45; }

/* ==========================================================================================================================================
   X. Menu items with long names (owner 2026-10-30: "menu large name cases looks not fine need adjust"): a name that needs two lines
      ("Frequently Raised Issues Report", "Passenger Counts Report") gets the same 7 px space above and below as a one-line item and a
      readable line height, instead of two lines squeezed into the 34 px row; the icon stays on the first line.
   ========================================================================================================================================== */
body.aai-o2 .sidebar-main .navigation > li ul li a { padding-top: 7px; padding-bottom: 7px; line-height: 1.35; }
body.aai-o2 .sidebar-main .navigation > li ul li a > i { align-self: flex-start; margin-top: 1px; }
body.aai-o2 .sidebar-main .navigation > li ul li a > span { min-width: 0; overflow-wrap: anywhere; }

/* ==========================================================================================================================================
   Y. Assigned to Me / Created by Me status cards (owner 2026-10-30: "count cards need to refine"): status name on top, the count large
      under it with "Issues" beside it, the coloured icon on the left; the whole card is the click target (the status button's area is
      stretched over the card), with a hover and a keyboard focus ring. Markup, ids and onclick handlers unchanged.
   ========================================================================================================================================== */
body.aai-o2 .col-md-2-5 > .card {
    position: relative; grid-template-columns: 44px auto minmax(0, 1fr); grid-template-areas: "ico state state" "ico count cat";
    column-gap: 8px; row-gap: 2px; min-height: 76px; cursor: pointer; transition: box-shadow .15s ease, border-color .15s ease;
}
body.aai-o2 .col-md-2-5 > .card > .card-header { grid-area: ico; margin-right: 4px; }
body.aai-o2 .col-md-2-5 > .card > :is(.card-content, .card-footer), body.aai-o2 .col-md-2-5 > .card > .card-footer :is(.stats, .stats p) { display: contents; }
body.aai-o2 .col-md-2-5 > .card .card-content h3 { grid-area: count; margin: 0; line-height: 1.1; }
body.aai-o2 .col-md-2-5 > .card .card-content h3 > span { font-size: 24px; font-weight: 700; color: var(--aai-text); }
body.aai-o2 .col-md-2-5 > .card .card-content .category { grid-area: cat; align-self: end; margin: 0 0 3px; font-size: var(--aai-fs-sm); color: var(--aai-text-muted); }
body.aai-o2 .col-md-2-5 > .card .card-footer button {
    grid-area: state; justify-self: start; padding: 0; border: 0; background: none; font-size: var(--aai-fs-base); font-weight: 600; color: var(--aai-text); text-decoration: none;
}
body.aai-o2 .col-md-2-5 > .card .card-footer button.aai-u-underline { text-decoration: none !important; }   /* the utility class sets underline !important; the card itself shows it is clickable */
body.aai-o2 .col-md-2-5 > .card .card-footer button::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
body.aai-o2 .col-md-2-5 > .card .card-footer button:focus-visible { outline: none; }
body.aai-o2 .col-md-2-5 > .card:hover { border-color: var(--aai-tile); box-shadow: 0 4px 12px rgba(15, 23, 42, .08); }
body.aai-o2 .col-md-2-5 > .card:has(button:focus-visible) { outline: 2px solid var(--aai-tile); outline-offset: 2px; }

/* ==========================================================================================================================================
   Z. System Settings (owner 2026-10-30: "system setting page need to refine"). Ids, names and handlers unchanged (partials in Views/Lookup).
      - one title: the card head repeated the page title, so the tabs now head the card;
      - Mail relay: three even columns (Port was a narrow fourth width), labels above, actions on the right under a divider;
      - Sign-in & password policy: labels above (were right-aligned beside the box), fields in even columns, the six password rules as
        tiles on their own row, the notes and Save at the bottom with Save on the right.
   ========================================================================================================================================== */
body.aai-o2 .card.aai-r3-card:has(> .card-body > #settingsTabs) > .aai-r3-cardhead { display: none; }
body.aai-o2 .card.aai-r3-card > .card-body:has(> #settingsTabs) { padding: 12px 16px 16px !important; }
body.aai-o2 #settingsTabContent { padding-top: 16px !important; }
body.aai-o2 #settingsTabContent .gx-panel-pad { padding: 0; }
body.aai-o2 #settingsTabContent :is(label.control-label, .control-label > label) {
    display: block; margin: 0 0 4px; padding: 0; font-size: var(--aai-fs-base); font-weight: 500; color: var(--aai-text-label); text-align: left;
}
body.aai-o2 #settingsTabContent .form-control { width: 100%; max-width: none; }
body.aai-o2 #settingsTabContent :is(.gx-note, small.text-muted) { display: block; margin-top: 4px; font-size: var(--aai-fs-sm); color: var(--aai-text-muted); }
/* Mail relay */
body.aai-o2 #tabMail > .row.form-group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 16px !important; }
body.aai-o2 #tabMail > .row.form-group > [class*="col-"] { width: auto; max-width: none; min-width: 0; flex: none; margin: 0; padding: 0; }
body.aai-o2 #tabMail > .row:last-child { margin: 0; padding-top: 16px; border-top: 1px solid var(--aai-line-soft); }
body.aai-o2 #tabMail > .row:last-child > [class*="col-"] { display: flex; justify-content: flex-end; gap: 8px; padding: 0; }
/* Sign-in & password policy */
body.aai-o2 #tabSignIn { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; align-items: start; }
body.aai-o2 #tabSignIn > output { grid-column: 1 / -1; }
body.aai-o2 #tabSignIn > .row.form-group { display: flex; flex-direction: column; margin: 0 !important; }
body.aai-o2 #tabSignIn > .row.form-group > [class*="col-"] { width: auto; max-width: none; min-width: 0; flex: none; margin: 0; padding: 0; text-align: left; }
body.aai-o2 #tabSignIn > .row.form-group > [class*="col-"]:empty { display: none; }
body.aai-o2 #tabSignIn > .row.form-group:not(:has(input[type="checkbox"])) + .row.form-group:has(input[type="checkbox"]) { grid-column-start: 1; }
body.aai-o2 #tabSignIn > .row.form-group:has(input[type="checkbox"]) label {
    display: flex; align-items: center; gap: 10px; min-height: 40px; margin: 0; padding: 8px 12px; border: 1px solid var(--aai-line-soft); border-radius: var(--aai-radius-ctl);
    background: var(--aai-surface); font-weight: 500; color: var(--aai-text); cursor: pointer;
}
body.aai-o2 #tabSignIn > .row.form-group:has(input[type="checkbox"]) { align-self: stretch; }
body.aai-o2 #tabSignIn > .row.form-group:has(input[type="checkbox"]) > [class*="col-"], body.aai-o2 #tabSignIn > .row.form-group:has(input[type="checkbox"]) label { height: 100%; }   /* tiles in a row keep one height when a name wraps */
body.aai-o2 #tabSignIn > .row.form-group:has(input[type="checkbox"]) input[type="checkbox"] { width: 16px; height: 16px; margin: 0; flex: 0 0 auto; accent-color: var(--aai-brand); }
body.aai-o2 #tabSignIn > .row.form-group:has(#btnSaveSignInPolicy) { grid-column: 1 / -1; padding-top: 16px; border-top: 1px solid var(--aai-line-soft); }
body.aai-o2 #tabSignIn > .row.form-group:has(#btnSaveSignInPolicy) > [class*="col-"]:has(#btnSaveSignInPolicy) { display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: 24px; }
body.aai-o2 #tabSignIn > .row.form-group:has(#btnSaveSignInPolicy) p { flex: 1 1 320px; max-width: 640px; margin: 0 0 6px; font-size: var(--aai-fs-sm); }
body.aai-o2 #tabSignIn #btnSaveSignInPolicy { margin-left: auto; }

/* ==========================================================================================================================================
   AA. CISF Device Master create / edit (owner 2026-10-30: "form need to refine and maintain like per row two fields column"): two fields
       per row with the label above (was one field per row, label right-aligned beside it), section titles across the row, Cancel / Save on
       the right under a divider. Ids, names, validation messages and handlers unchanged.
   ========================================================================================================================================== */
body.aai-o2 #frmDeviceMaster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 16px; }
body.aai-o2 #frmDeviceMaster > input { display: none; }
body.aai-o2 #frmDeviceMaster > .row.form-group { display: flex; flex-direction: column; margin: 0 !important; }
body.aai-o2 #frmDeviceMaster > .row.form-group > [class*="col-"] { width: auto; max-width: none; min-width: 0; flex: none; margin: 0; padding: 0; text-align: left; }
body.aai-o2 #frmDeviceMaster > .row.form-group > .text-right { text-align: left !important; margin-bottom: 4px; font-size: var(--aai-fs-base); font-weight: 500; color: var(--aai-text-label); }
body.aai-o2 #frmDeviceMaster > .row.form-group > .text-right label { margin: 0; padding: 0; font: inherit; color: inherit; text-align: left; }
body.aai-o2 #frmDeviceMaster > .row.form-group :is(.form-control, .k-picker) { width: 100%; max-width: none; }
body.aai-o2 #frmDeviceMaster > .row.form-group .help-block { display: block; margin-top: 4px; font-size: var(--aai-fs-sm); color: var(--aai-text-muted); }
body.aai-o2 #frmDeviceMaster > .row.form-group:has(> .col-md-12 > h4) { grid-column: 1 / -1; padding-bottom: 8px; border-bottom: 1px solid var(--aai-line-soft); }
body.aai-o2 #frmDeviceMaster > .row.form-group:has(> .col-md-12 > h4) ~ .row.form-group:has(> .col-md-12 > h4) { margin-top: 8px !important; }
body.aai-o2 #frmDeviceMaster > .row.form-group > .col-md-12 > h4 { margin: 0; font-size: var(--aai-fs-lg); font-weight: 600; color: var(--aai-text); }
body.aai-o2 #frmDeviceMaster > .row.form-group:has(#btnSave) { grid-column: 1 / -1; padding-top: 16px; border-top: 1px solid var(--aai-line-soft); }
body.aai-o2 #frmDeviceMaster > .row.form-group:has(#btnSave) > [class*="col-"] { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 767.98px) { body.aai-o2 #frmDeviceMaster { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================================================================================
   AB. CISF Rank Hierarchy (owner 2026-10-30: "need to refine, not looks user friendly"). All 141 ranks were drawn at once (page ~5,900 px
       tall), the four move buttons were bare arrows at the top right (gone after the first scroll) and Save sat at the very bottom.
       Now: a tool row above the list ("Select a rank, then move it" + Top / Up / Down / Bottom with their names), the list scrolls inside
       its card (header stays, aai-shell.js adds .aai-grid-scroll) and Save stays right under it; the moved rank is kept in view.
   ========================================================================================================================================== */
body.aai-o2 #dvRankHierarchy .aai-r3-rankrow { display: flex; flex-direction: column; gap: 12px; margin: 0; }
body.aai-o2 #dvRankHierarchy .aai-r3-rankrow > [class*="col-"] { width: 100%; max-width: none; flex: none; padding: 0; }
body.aai-o2 #dvRankHierarchy .aai-r3-arrowcol { order: -1; margin: 0 !important; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
body.aai-o2 #dvRankHierarchy .aai-r3-arrowcol::before { content: "Select a rank, then move it:"; margin-right: 4px; font-size: var(--aai-fs-base); color: var(--aai-text-muted); }
body.aai-o2 #dvRankHierarchy .aai-r3-arrowrow { display: contents; }
body.aai-o2 #dvRankHierarchy .aai-r3-arrowcol .k-button {
    display: inline-flex; align-items: center; gap: 6px; width: auto; height: 34px; margin: 0; padding: 0 12px; border-radius: var(--aai-radius-ctl);
}
body.aai-o2 #dvRankHierarchy .aai-r3-arrowcol .k-button::after { content: attr(title); display: inline; position: static; inset: auto; opacity: 1; background: none; font-size: var(--aai-fs-base); font-weight: 500; }   /* Kendo hides the ::after overlay of buttons */
body.aai-o2 #ViewHierarchy .k-grid-content { max-height: max(260px, calc(100vh - 380px)); }
body.aai-o2 #ViewHierarchy tr.k-selected > td { font-weight: 600; }

/* ==========================================================================================================================================
   AC. Small create / edit forms in a popup over their list (owner 2026-10-30; aai-shell.js modalForms()). Outside: the Kendo window with
       the form page in a frame (a "Loading..." line while it changes page). Inside (html.aai-in-modal, set before the first paint): the
       same page without the header bar, menu, page title (shown as the window title) and footer.
   ========================================================================================================================================== */
.aai-modal-form.k-window-content { padding: 0; overflow: hidden; }
.aai-modal-form .aai-modal-frame { display: block; width: 100%; height: 320px; border: 0; background: var(--aai-canvas, #f5f7fb); }
.aai-modal-form .aai-modal-wait { display: none; padding: 24px; color: var(--aai-text-muted, #64748b); text-align: center; }
.aai-modal-form.aai-modal-form--busy .aai-modal-wait { display: block; }
.aai-modal-form.aai-modal-form--busy .aai-modal-frame { visibility: hidden; height: 0 !important; }
html.aai-in-modal body.aai-o2 { min-height: 0; background: var(--aai-canvas); }
html.aai-in-modal body.aai-o2 :is(.aai-header, .sidebar-main, .aai-footer, #main-section-header) { display: none !important; }
html.aai-in-modal body.aai-o2 :is(.page-container, .page-content, .content-wrapper) { min-height: 0; margin: 0; padding: 0; }
html.aai-in-modal body.aai-o2 .content-wrapper > .content { padding: 12px 16px; }
html.aai-in-modal body.aai-o2 .aai-r3-form > .aai-r3-footer { position: static; }

/* ==========================================================================================================================================
   AD. Row action icons with a tinted background, one colour per kind of action, in every list grid (owner 2026-10-30: "check all the
       whole grid, give some attractive background icons"). Trip Approval's Review / View / Edit buttons are now these icons too.
       edit = blue, view = indigo, review = green (clipboard check), history / versions = violet, amend = amber, cancel / off = red, on = green.
   ========================================================================================================================================== */
body.aai-o2 .aai-row-act { width: 32px; height: 32px; border-radius: 8px; background-size: 16px 16px; transition: background-color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
body.aai-o2 .aai-row-act:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(15, 23, 42, .12); }
body.aai-o2 .aai-row-act--edit { background-color: #e8effd; border-color: #c9d8fb; 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='%232563eb' stroke-width='1.9' 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--edit:hover { background-color: #d8e4fc; border-color: #2563eb; }
body.aai-o2 .aai-row-act--view { background-color: #eef0fd; border-color: #d3d8fa; 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='%234f46e5' stroke-width='1.9' 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--view:hover { background-color: #e0e4fc; border-color: #4f46e5; }
body.aai-o2 .aai-row-act--review { background-color: #e5f5ec; border-color: #bfe5cf; 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='%23047857' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='4' width='14' height='17' rx='2'/><path d='M9 4V3h6v1'/><path d='M9 13l2 2 4-4'/></svg>"); }
body.aai-o2 .aai-row-act--review:hover { background-color: #d3eedf; border-color: #047857; }
body.aai-o2 :is(.aai-row-act--history, .aai-row-act--versions) { background-color: #f3eefd; border-color: #ddd0f8; }
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='%237c3aed' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l9 5-9 5-9-5 9-5z'/><path d='M3 13l9 5 9-5'/></svg>"); }
body.aai-o2 :is(.aai-row-act--history, .aai-row-act--versions):hover { background-color: #e9dffc; border-color: #7c3aed; }
body.aai-o2 .aai-row-act--amend { background-color: #fdf3e3; border-color: #f3d19e; }
body.aai-o2 .aai-row-act--amend:hover { background-color: #fbe7c6; border-color: #b45309; }
body.aai-o2 :is(.aai-row-act--cancel, .aai-row-act--off) { background-color: #fdeceb; border-color: #f4c4c1; }
body.aai-o2 :is(.aai-row-act--cancel, .aai-row-act--off):hover { background-color: #fbdad7; border-color: #b91c1c; }
body.aai-o2 .aai-row-act--on { background-color: #e6f3e7; border-color: #bfdec2; }
body.aai-o2 .aai-row-act--on:hover { background-color: #d4ead6; border-color: #15803d; }
/* Trip list: Close Trip after departure (teal, flag icon) */
body.aai-o2 .aai-row-act--close { background-color: #e3f4f4; border-color: #b4dfdf; 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='%230f766e' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M5 21V4'/><path d='M5 4h11l-2 4 2 4H5'/></svg>"); }
body.aai-o2 .aai-row-act--close:hover { background-color: #cdebeb; border-color: #0f766e; }
body.aai-o2 :is(#wp05Queue, #wp05Decided) td.wp05-act { display: table-cell; }
body.aai-o2 :is(#wp05Queue, #wp05Decided) td.wp05-act .aai-row-act { margin: 0 2px; }
/* "Departure passed" in the approver's Action cell: a red clock icon like the other actions (the text stays as its tooltip and for screen readers) */
body.aai-o2 #wp05Queue td.wp05-act .aai-pill--err {
    display: inline-flex; width: 32px; height: 32px; margin: 0 2px; padding: 0; overflow: hidden; vertical-align: middle; color: transparent; font-size: 0;
    border: 1px solid #f4c4c1; border-radius: 8px; background: #fdeceb no-repeat center / 16px 16px 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.9' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='13' r='8'/><path d='M12 9v4l2.5 1.5'/><path d='M9 2h6'/></svg>");
}
body.aai-o2 #wp05Queue td.wp05-act .aai-pill--err::before { display: none; }

/* =====================================================================
   AE. IMS dashboard: funnel button in the page head shows / hides the #dateFilter card (GHA / CISF have no filter card: no funnel)
   ===================================================================== */
body.aai-o2 #dateFilter.aai-dash-filter-off { display: none !important; }

/* =====================================================================
   AF. Role Permission / Roles matrices: one line that says why a box is grey (D3 option 1, 2026-10-31); disabled boxes show "not allowed"
   ===================================================================== */
body.aai-o2 .aai-mx-hint { margin: 0; padding: 8px 18px; border-bottom: 1px solid var(--aai-line-ctl); font-size: 13px; line-height: 1.45; color: var(--aai-text-label); background: #f8fafc; }
body.aai-o2 .aai-matrix .k-checkbox:disabled { cursor: not-allowed; }

/* =====================================================================
   AG. GHA feedback 2026-10-31: history popup remarks clamped to 2 lines (tooltip + click to open); approval review notes and history button
   ===================================================================== */
body.aai-o2 #aaiTripHistory .aai-th-remarks.is-open { display: block; -webkit-line-clamp: unset; line-clamp: unset; }
body.aai-o2 #aaiTripHistory .aai-th-remarks:focus-visible { outline: 2px solid var(--aai-brand); outline-offset: 2px; }
body.aai-o2 .aai-rv-note { overflow-wrap: anywhere; white-space: pre-line; }
body.aai-o2 #wp05Tabs .aai-rv-tools { display: flex; align-items: center; padding: 0 8px; }

/* =====================================================================
   AH. GHA feedback 2026-10-31 point 10: errors and warnings in a modal dialog (ShowErrorMessage, AAICommon.js); above Bootstrap pop-ups and Kendo windows
   ===================================================================== */
.modal.aai-msg-dlg { z-index: 20010; }
.modal-backdrop.aai-msg-backdrop { z-index: 20005; }
body.aai-o2 .aai-msg-dlg .modal-content { border-top: 4px solid var(--aai-err); }
body.aai-o2 .aai-msg-dlg .aai-msg-body { overflow-wrap: anywhere; color: var(--aai-text-body); }

/* =====================================================================
   AI. GHA feedback 2026-10-31: Trip Approval Review notes as one compact strip of chips (icon + short name, full rule as tooltip)
   ===================================================================== */
body.aai-o2 .aai-rv-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
body.aai-o2 .aai-rv-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 32px; padding: 4px 12px; border: 1px solid var(--aai-line); border-radius: 999px; background: var(--aai-surface); color: var(--aai-text-body); font-size: var(--aai-fs-sm); line-height: 1.3; font-family: inherit; text-align: start; }
body.aai-o2 .aai-rv-chip[data-bs-toggle="tooltip"] { cursor: help; }
body.aai-o2 .aai-rv-chip:focus-visible { outline: 2px solid var(--aai-brand); outline-offset: 2px; }
body.aai-o2 .aai-rv-chip svg { width: 16px; height: 16px; flex: none; }
body.aai-o2 .aai-rv-chip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.aai-o2 .aai-rv-chip.aai-rv-note .aai-rv-chip-text { max-width: 48ch; }
body.aai-o2 .aai-rv-chip--type { background: var(--aai-surface-alt); }
body.aai-o2 .aai-rv-chip--info { color: var(--aai-brand); border-color: var(--aai-brand); background: var(--aai-brand-soft); }
body.aai-o2 .aai-rv-chip--muted { color: var(--aai-text-muted); }
/* owner 2026-11-01 (Trip Approval "view only button ... it's wided"): the chip beside the page title is a child of the Bootstrap .row page head, which forces
   every child to 100 % width; it keeps its own width and stays right after the title (before the breadcrumb that inlinePageBar() moves in) */
body.aai-o2 #main-section-header > .aai-wp05-headchip { flex: 0 0 auto; width: auto; max-width: none; margin: 0; order: 1; }
body.aai-o2 #main-section-header:has(> .aai-wp05-headchip) > .aai-crumbbar { order: 2; }
body.aai-o2 .aai-rv-chip--warn { color: var(--aai-warn); border-color: var(--aai-warn-line); background: var(--aai-warn-bg); }
body.aai-o2 .aai-rv-chip--danger { color: var(--aai-err); border-color: var(--aai-err-line); background: var(--aai-err-bg); font-weight: 600; }
.tooltip.aai-rv-tip .tooltip-inner { max-width: 380px; text-align: left; white-space: pre-line; }

/* =====================================================================
   AJ. GHA feedback 2026-10-31 (owner): Trip Approver pages: the tabs get a background so the selected tab is clearly visible
   (review page #wp05Tabs: Flight / Crew / Passengers / Delta / GD; approval queue #wp05ListTabs: Pending / Approved-Rejected)
   ===================================================================== */
body.aai-o2 :is(#wp05Tabs, #wp05ListTabs) { gap: 4px; border-bottom: 2px solid var(--aai-brand); margin-bottom: 0; }
body.aai-o2 :is(#wp05Tabs, #wp05ListTabs) .nav-link { margin-bottom: 0; background: var(--aai-surface-alt); color: var(--aai-text-label); border: 1px solid var(--aai-line); border-bottom: 0; border-radius: 8px 8px 0 0; font-weight: 600; }
body.aai-o2 :is(#wp05Tabs, #wp05ListTabs) .nav-link:hover { background: var(--aai-brand-soft); color: var(--aai-brand); }
body.aai-o2 :is(#wp05Tabs, #wp05ListTabs) .nav-link.active { background: var(--aai-brand); color: #fff; border-color: var(--aai-brand); }
body.aai-o2 :is(#wp05Tabs, #wp05ListTabs) .nav-link.active .badge { background: #fff; color: var(--aai-brand); }
body.aai-o2 #wp05Tabs .aai-rv-tools .nav-link, body.aai-o2 #wp05Tabs .aai-rv-tools { background: transparent; border: 0; }
/* the tab line must not cover the first line of the tab content (Bootstrap pulls tabs down by 1px; the 2px line then sat on the content) */
body.aai-o2 #wp05Tabs + .tab-content { padding-top: 18px; }
/* review tables (Crew / Passengers / Delta): the header must differ from the first (striped) data row */
body.aai-o2 #wp05Tabs + .tab-content .table > thead > tr > th { background: var(--aai-brand-soft); color: var(--aai-brand); font-weight: 700; border-bottom: 2px solid var(--aai-brand); }
body.aai-o2 #wp05Tabs + .tab-content .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: transparent; --bs-table-accent-bg: transparent; background-color: var(--aai-surface); }
body.aai-o2 #wp05Tabs + .tab-content .table-striped > tbody > tr:nth-of-type(even) > * { --bs-table-bg-type: var(--aai-surface-alt); --bs-table-accent-bg: var(--aai-surface-alt); background-color: var(--aai-surface-alt); }
/* review grids (Crew / Passengers / Delta): column dividers in the header, filter row and rows; header tinted like the review tables */
body.aai-o2 .aai-rv-grid.k-grid { border: 1px solid var(--aai-line); }
body.aai-o2 .aai-rv-grid :is(th, td) { border-left: 1px solid var(--aai-line) !important; border-left-style: solid !important; }
body.aai-o2 .aai-rv-grid :is(th, td):first-child { border-left: 0 !important; }
body.aai-o2 .aai-rv-grid thead th, body.aai-o2 .aai-rv-grid .k-grid-header th.k-header { background: var(--aai-brand-soft); color: var(--aai-brand); font-weight: 700; border-bottom: 1px solid var(--aai-line); }
body.aai-o2 .aai-rv-grid .k-filter-row th { background: var(--aai-surface); }
/* approval queue as Kendo grids (GHA feedback 2026-10-31): resubmission / rejected row highlight */
body.aai-o2 #wp05Queue .k-grid-content tr.wp05-row--resubmit > td { background-color: var(--aai-warn-bg); }
body.aai-o2 #wp05Queue .k-grid-content tr.wp05-row--resubmit > td:first-child { box-shadow: inset 4px 0 0 var(--aai-warn); }
body.aai-o2 #wp05Decided .k-grid-content tr.wp05-row--rejected > td { background-color: var(--aai-err-bg); }
body.aai-o2 #wp05Decided .k-grid-content tr.wp05-row--rejected > td:first-child { box-shadow: inset 4px 0 0 var(--aai-err); }
/* review grids: a funnel button above each grid shows / hides that grid's filter row (same icon as the list pages) */
body.aai-o2 .aai-rv-gridbar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin: 0 0 8px; }
body.aai-o2 .aai-rv-gridbar--delta { justify-content: flex-start; flex-wrap: wrap; }
body.aai-o2 .aai-rv-gridbar--delta > .aai-rv-filter-btn { margin-left: auto; }
/* the review funnel: same icon, size and colours as the list-page funnel (.aai-list-bar--compact .aai-filter-btn) */
body.aai-o2 .aai-rv-gridbar .k-button.aai-icon-only { width: 34px; min-width: 34px; height: 34px; padding: 0; justify-content: center; gap: 0; }
body.aai-o2 .aai-rv-gridbar .aai-filter-btn .aai-filter-ico {
    display: inline-block; flex: 0 0 16px; width: 16px; height: 16px; background-color: currentColor;
    -webkit-mask: url('icons/aai-menu/filter.svg') center / 16px 16px no-repeat; mask: url('icons/aai-menu/filter.svg') center / 16px 16px no-repeat;
}
body.aai-o2:not(#aai-x) .aai-rv-gridbar .aai-filter-btn { background-color: #fff !important; border-color: var(--aai-line-ctl) !important; color: #475569 !important; }
body.aai-o2:not(#aai-x) .aai-rv-gridbar .aai-filter-btn[aria-pressed="true"] { background-color: var(--aai-brand-soft) !important; border-color: color-mix(in srgb, var(--aai-brand) 40%, #fff) !important; color: var(--aai-brand) !important; }

/* QA 2026-11-01: field help text as an (i) tooltip beside the label (aai-shell.js fieldHints) and validation messages in the flow.
   The old Style.css rule drew .validation-error-label with position:absolute, so on a form that is not inside .aai-s5 / .aai-r3-card (e.g. Flight)
   the message lay over the help text and over the next column's message. In a form the message now takes its own line under the field. */
body.aai-o2 form .validation-error-label,
body.aai-o2 form :is(.k-dropdown, .k-picker-wrap, .k-numeric-wrap) > .validation-error-label { position: static; display: block; margin-top: 4px; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; }
body.aai-o2 .aai-hint-btn { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-inline-start: 4px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--aai-brand); vertical-align: -3px; cursor: help; }
body.aai-o2 .aai-hint-btn:hover { background: var(--aai-brand-soft); }
body.aai-o2 .aai-hint-btn:focus-visible { outline: 2px solid var(--aai-brand); outline-offset: 1px; }
body.aai-o2 .form-text[data-aai-hint].visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
/* QA 2026-11-01 (owner: "fix that popup font and model box for remove crew, same like any other place"): the legacy Kendo confirm windows
   (<div id="kWindow..."><h2>question</h2><div class="text-center">Yes / No</div></div> on Trip, UpdateTrip and the other legacy pages) drew the
   question as a 24 px bold heading in a 300 px box. Drawn now like the app's message dialog: 14 px text, buttons at the bottom right,
   No as the secondary button. Look only: ids, texts and handlers unchanged. */
body.aai-o2 .k-window:has(> .k-window-content > h2 + .text-center) { min-width: min(400px, calc(100vw - 24px)); border-radius: var(--aai-radius-card); overflow: hidden; }
body.aai-o2 .k-window:has(> .k-window-content > h2 + .text-center) .k-window-titlebar { padding: 12px 16px; border-bottom: 1px solid var(--aai-line); background: var(--aai-surface, #fff); color: var(--aai-text-body); font-size: var(--aai-fs-lg); font-weight: 600; }
body.aai-o2 .k-window-content:has(> h2 + .text-center) { padding: 16px; }
body.aai-o2 .k-window-content > h2:has(+ .text-center) { margin: 0 0 16px; font-size: var(--aai-fs-md); font-weight: 400; line-height: 1.5; color: var(--aai-text-body); text-align: left; letter-spacing: 0; }
body.aai-o2 .k-window-content > h2 + .text-center { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 0 0; border-top: 1px solid var(--aai-line); text-align: right; }
body.aai-o2 .k-window-content > h2 + .text-center > .k-button { min-width: 72px; height: 32px; padding: 0 14px; margin: 0; font-size: var(--aai-fs-base); font-weight: 600; border-radius: var(--aai-radius-ctl); }
body.aai-o2 .k-window-content > h2 + .text-center > .k-button:not(:first-child) { background: #fff; color: var(--aai-text-body); border: 1px solid var(--aai-line-ctl, var(--aai-line)); }
body.aai-o2 .k-window-content > h2 + .text-center > .k-button:not(:first-child):hover { background: var(--aai-surface-alt); border-color: var(--aai-brand); color: var(--aai-brand); }

/* QA 2026-11-01: an in-page error banner (e.g. "Your digital signature is not uploaded. Upload it in My Profile ..." on the trip review) was a
   saturated #ED0000 bar (legacy Style.css, !important) with the My Profile link in dark blue on red, unreadable. Drawn like the app's other
   in-page notes: light red background, dark red text, the link underlined in the same colour. The toasts (.alertCont) keep their own look. */
body.aai-o2:not(.aai-login) .alert.alert-danger:not(.alertCont):not(.alertContLeftAlign) { background-color: var(--aai-err-bg, #fdecec) !important; color: var(--aai-err, #b42318) !important; border: 1px solid #f3c1c1 !important; border-left: 4px solid var(--aai-err, #b42318) !important; }
body.aai-o2 .alert :is(a, a:visited) { color: inherit; font-weight: 600; text-decoration: underline; }

/* QA 2026-11-01: the passenger / crew pickers of the trip form were 800 px wide, so ID / Passport and Passport Expiry were cut behind a scroll bar */
body.aai-o2 :is(#dvPassengerBindPartial, #dvCrewBindPartial) .modal-dialog { max-width: min(1180px, calc(100vw - 32px)); }

/* QA 2026-11-01: kendo.confirm / kendo.alert (Cancel trip, Submit change ...): buttons like the app dialog (bottom right, OK primary) instead of two full-width bars */
body.aai-o2 .k-window.k-dialog:has(> :is([data-role="confirm"], [data-role="alert"])) { min-width: min(420px, calc(100vw - 24px)); border-radius: var(--aai-radius-card); overflow: hidden; }
body.aai-o2 .k-window.k-dialog:has(> :is([data-role="confirm"], [data-role="alert"])) .k-window-content { padding: 16px; font-size: var(--aai-fs-md); line-height: 1.5; color: var(--aai-text-body); }
body.aai-o2 .k-window.k-dialog:has(> :is([data-role="confirm"], [data-role="alert"])) .k-dialog-actions, body.aai-o2 .k-window.k-dialog:has(> :is([data-role="confirm"], [data-role="alert"])) .k-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--aai-line); }
body.aai-o2 .k-window.k-dialog:has(> :is([data-role="confirm"], [data-role="alert"])) :is(.k-dialog-actions, .k-actions) .k-button { flex: 0 0 auto; min-width: 80px; height: 32px; }
body.aai-o2 .k-window.k-dialog:has(> :is([data-role="confirm"], [data-role="alert"])) :is(.k-dialog-actions, .k-actions) .k-button.k-button-primary { background: var(--aai-brand) !important; border-color: var(--aai-brand) !important; color: #fff !important; }

/* QA 2026-11-01 (L-18): the OK of kendo.confirm / kendo.alert stayed white: the rule above matched only k-button-primary (newer Kendo uses k-button-solid-primary) and was outweighed.
   Same weight as the styled confirm above (:not(#aai-x)); OK is the first action button of these dialogs. */
body.aai-o2:not(#aai-x) .k-window.k-dialog:has(> :is([data-role="confirm"], [data-role="alert"])) :is(.k-dialog-actions, .k-actions) .k-button:is(.k-button-primary, .k-button-solid-primary, .k-primary, :first-child) { background: var(--aai-brand) !important; border-color: var(--aai-brand) !important; color: #fff !important; }
body.aai-o2:not(#aai-x) .k-window.k-dialog:has(> :is([data-role="confirm"], [data-role="alert"])) :is(.k-dialog-actions, .k-actions) .k-button:is(.k-button-primary, .k-button-solid-primary, .k-primary, :first-child):hover { background: var(--aai-brand-hover) !important; border-color: var(--aai-brand-hover) !important; }
/* QA 2026-11-01: a date picker whose latest date is in the past (date of birth): today's footer link cannot be chosen, so it is not shown (aai-shell.js datePickerFit) */
.aai-dp-past-max .k-calendar-footer, .aai-dp-past-max .k-footer { display: none !important; }
/* QA 2026-11-01 (owner: password eye button missing on user creation; My Profile eye not compact): one small eye icon inside every password box
   (aai-shell.js passwordEyes; the older hideShowPassword toggle of My Profile drawn the same way). The sign-in page keeps its own look. */
body.aai-o2 .aai-pw { position: relative; display: block; }
body.aai-o2 .aai-pw > input[data-aai-eye] { padding-right: 40px; }
body.aai-o2 .aai-pw-eye { position: absolute; top: 0; right: 2px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #667085; cursor: pointer; }
body.aai-o2 .aai-pw-eye:hover, body.aai-o2 .aai-pw-eye:focus-visible { color: var(--aai-brand); }
body.aai-o2:not(.aai-login) .hideShowPassword-toggle { width: 36px !important; height: 36px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 6px !important; box-shadow: none !important; font-size: 0 !important; color: transparent !important; text-indent: -9999px; overflow: hidden; top: 0 !important; right: 2px !important; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") no-repeat center / 18px 18px !important; }
body.aai-o2:not(.aai-login) .hideShowPassword-toggle.hideShowPassword-toggle-hide { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.9 17.9A10 10 0 0 1 12 20c-7 0-11-8-11-8a18.5 18.5 0 0 1 5.1-5.9M9.9 4.2A9 9 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.2 3.2M14.1 14.1a3 3 0 1 1-4.2-4.2'/%3E%3Cpath d='M1 1l22 22'/%3E%3C/svg%3E") !important; }
body.aai-o2:not(.aai-login) .hideShowPassword-wrapper input { padding-right: 40px !important; }
/* QA 2026-11-01 (owner): operator logo column of the Operators grid */
body.aai-o2 .aai-op-logo { display: block; max-width: 84px; max-height: 32px; width: auto; height: auto; object-fit: contain; }
body.aai-o2 .aai-op-logo-none { color: var(--aai-text-muted, #667085); }

/* QA 2026-11-02 (calendar): the selected day that is also today showed no number. aai-o2-kendo.css colours .k-today .k-link brand blue and that rule
   comes after the .k-selected white-text rule with the same specificity, so the number was brand blue on the brand-blue selected box. */
body.aai-o2 .k-calendar .k-calendar-td.k-today.k-selected .k-link { color: #fff; }

/* QA 2026-11-02 (collapsed menu, Indigo / Navy themes): the hover flyout of the collapsed rail is a WHITE card in every theme, but the theme menu
   colours are made for the dark menu: sub-items were near-white on white (Dashboard, Inspection, Assigned to Me ...), a sub-group heading was white
   on white (blank row with only a chevron), Navy's active item was pale amber on white, and Indigo's active rail tile drew a white icon on its white tile.
   Inside the flyout every theme now uses the light-card colours; the open group's rail icon uses the theme's active text colour. */
@media (min-width: 769px) {
    html[data-aai-theme] body.aai-o2.sidebar-xs .sidebar-main .navigation > li > ul li a { color: var(--aai-text-body); }
    html[data-aai-theme] body.aai-o2.sidebar-xs .sidebar-main .navigation > li > ul li:has(> ul) > a { color: var(--aai-text-body); font-weight: 600; }
    html[data-aai-theme] body.aai-o2.sidebar-xs .sidebar-main .navigation > li > ul li a > i.icon-submenu { color: var(--aai-text-muted); }
    html[data-aai-theme] body.aai-o2.sidebar-xs .sidebar-main .navigation > li > ul li a:hover,
    html[data-aai-theme] body.aai-o2.sidebar-xs .sidebar-main .navigation > li > ul li a:focus { background: var(--aai-brand-soft, #eef0fb); color: var(--aai-brand); }
    html[data-aai-theme] body.aai-o2.sidebar-xs .sidebar-main .navigation > li > ul li.active:not(:has(> ul)) > a,
    html[data-aai-theme] body.aai-o2.sidebar-xs .sidebar-main .navigation > li > ul li.active:not(:has(> ul)) > a:hover {
        background: var(--aai-brand-soft, #eef0fb); color: var(--aai-brand); font-weight: 600; box-shadow: inset 3px 0 0 var(--aai-brand);
    }
    html[data-aai-theme="navy"] body.aai-o2.sidebar-xs .sidebar-main .navigation > li > ul li.active:not(:has(> ul)) > a,
    html[data-aai-theme="navy"] body.aai-o2.sidebar-xs .sidebar-main .navigation > li > ul li.active:not(:has(> ul)) > a:hover { background: #fff4e0; color: #92400e; box-shadow: inset 3px 0 0 #f59e0b; }
    html[data-aai-theme] body.aai-o2.sidebar-xs .sidebar-main .navigation > li > ul > li > ul { border-left-color: var(--aai-line, #e5e7eb); }
    html[data-aai-theme] body.aai-o2.sidebar-xs .sidebar-main .navigation > li.active:has(> ul) > a > i:first-child { color: var(--aai-nav-active-fg); }
}