/*
 * AAI "Option 2" design layer (CRS-01 restyle stage R1, owner decision 2026-10-26).
 * Loaded LAST in _Layout / _UserLayout; every rule is scoped to body.aai-o2 so the legacy files stay untouched and the Bootstrap 3 compat layer keeps working.
 * Source of truth: documents/ScreenChange/hifi (rendered in a headless browser, see documents/RESTYLE_R1_SIDEBAR_DECISION in restyle_r1_settings_changes.md / spec changes).
 * Fonts: Inter (300-800) and IBM Plex Mono are bundled under Content/fonts/inter (no external request; CSP font-src 'self').
 */

/* ---------- 1. Fonts (local) ---------- */
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 300; src: url('fonts/inter/Inter-300.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 400; src: url('fonts/inter/Inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 500; src: url('fonts/inter/Inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 600; src: url('fonts/inter/Inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 700; src: url('fonts/inter/Inter-700.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 800; src: url('fonts/inter/Inter-800.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 400; src: url('fonts/inter/IBMPlexMono-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 500; src: url('fonts/inter/IBMPlexMono-500.woff2') format('woff2'); }

/* ---------- 2. Design tokens ---------- */
:root {
    /* brand */
    --aai-brand: #2e3192;
    --aai-brand-hover: #252878;
    --aai-brand-active: #1d2060;
    --aai-brand-soft: #e8eaf6;
    --aai-brand-ring: rgba(46, 49, 146, .14);
    /* surfaces */
    --aai-canvas: #f4f6f9;
    --aai-surface: #ffffff;
    --aai-surface-alt: #f8fafc;
    --aai-table-head: #eef0f3;
    --aai-sidebar-bg: linear-gradient(168deg, #e9edf6 0%, #e3e8f2 48%, #d9e0ed 100%);
    --aai-sidebar-border: rgba(46, 49, 146, .18);
    /* lines */
    --aai-line: #e2e8f0;
    --aai-line-soft: #e8edf3;
    --aai-line-ctl: #d3d3d3;
    /* text */
    --aai-text: #0f172a;
    --aai-text-body: #1f2937;
    --aai-text-muted: #64748b;
    --aai-text-label: #707070;
    --aai-text-nav: #475569;
    /* status */
    --aai-ok: #357a38;      --aai-ok-bg: #edffee;     --aai-ok-line: #bfe5c1;
    --aai-warn: #8a5a00;    --aai-warn-bg: #fff8e6;   --aai-warn-line: #f3dba0;
    --aai-err: #ab2f26;     --aai-err-bg: #ffeeeb;    --aai-err-line: #f6c6c0;
    --aai-info: #2e3192;    --aai-info-bg: #f5faff;   --aai-info-line: #cfe1f5;
    /* shape */
    --aai-radius-ctl: 6px;
    --aai-radius-card: 8px;
    --aai-radius-pill: 99px;
    --aai-ctl-h: 36px;
    --aai-header-h: 64px;
    --aai-sidebar-w: 256px;
    --aai-sidebar-w-xs: 64px;
    --aai-shadow-card: 0 1px 2px rgba(15, 23, 42, .06);
    --aai-shadow-pop: 0 10px 30px rgba(15, 23, 42, .18);
    /* type scale */
    --aai-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --aai-font-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
    --aai-fs-xs: 11px;
    --aai-fs-sm: 12px;
    --aai-fs-base: 13px;
    --aai-fs-md: 14px;
    --aai-fs-lg: 16px;
    --aai-fs-h1: 20px;

    /* Kendo + Bootstrap token bridge */
    --kendo-color-primary: var(--aai-brand);
    --kendo-color-primary-hover: var(--aai-brand-hover);
    --kendo-color-primary-active: var(--aai-brand-active);
    --kendo-color-primary-on-surface: var(--aai-brand);
    --kendo-font-family: var(--aai-font);
    --kendo-font-size: var(--aai-fs-base);
    --bs-body-font-family: var(--aai-font);
    --bs-body-font-size: var(--aai-fs-base);
    --bs-body-color: var(--aai-text-body);
    --bs-primary: var(--aai-brand);
    --bs-link-color: var(--aai-brand);
    --bs-link-color-rgb: 46, 49, 146;
    --bs-link-hover-color: var(--aai-brand-hover);
    --bs-link-hover-color-rgb: 37, 40, 120;
}

/* ---------- 3. Base typography ---------- */
body.aai-o2 {
    font-family: var(--aai-font);
    font-size: var(--aai-fs-base);
    line-height: 1.45;
    color: var(--aai-text-body);
    background-color: var(--aai-canvas);
    -webkit-font-smoothing: antialiased;
}
body.aai-o2 html, html:has(body.aai-o2) { font-family: var(--aai-font); }
body.aai-o2 h1, body.aai-o2 h2, body.aai-o2 h3, body.aai-o2 h4, body.aai-o2 h5, body.aai-o2 h6 { font-family: var(--aai-font); color: var(--aai-text); }
body.aai-o2 h2, body.aai-o2 h2#team-efficiency { font-size: var(--aai-fs-h1); font-weight: 700; line-height: 1.25; color: var(--aai-text); margin: 0; }
body.aai-o2 h3 { font-size: 18px; font-weight: 700; }
body.aai-o2 h4 { font-size: var(--aai-fs-lg); font-weight: 600; }
body.aai-o2 h5, body.aai-o2 h6 { font-size: var(--aai-fs-md); font-weight: 600; }
/* the span twin carries the same rule: label-parity.spec compares a converted <span class="aai-text-label"> with the <label> it replaced, property by property */
body.aai-o2 label, body.aai-o2 span.aai-text-label { color: var(--aai-text-label); font-weight: 500; font-size: var(--aai-fs-base); }
body.aai-o2 .text-muted { color: var(--aai-text-muted) !important; }
body.aai-o2 code, body.aai-o2 pre, body.aai-o2 .mono { font-family: var(--aai-font-mono); }
body.aai-o2 .req-font, body.aai-o2 .required, body.aai-o2 label .text-danger { color: #e53935; }
body.aai-o2 .user-heading, body.aai-o2 .user-heading2 { font-family: var(--aai-font); }

/* ---------- 4. App shell ---------- */
/* header (white, 64 px, sticky) */
body.aai-o2 .navbar.aai-header {
    display: flex; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start;
    position: sticky; top: 0; z-index: 1030;
    height: var(--aai-header-h); min-height: var(--aai-header-h); padding: 0; margin: 0;
    background: #fff; color: var(--aai-text); border: 0; border-bottom: 1px solid #e8ecef; border-radius: 0;
}
body.aai-o2 .aai-header .navbar-header.aai-header-brand {
    flex: 0 0 var(--aai-sidebar-w); width: var(--aai-sidebar-w); min-width: 0; float: none;
    display: flex; align-items: center; justify-content: space-between; padding: 0 14px 0 18px;
    background: var(--aai-sidebar-bg); border-bottom: 1px solid rgba(46, 49, 146, .12); box-sizing: border-box;
}
body.aai-o2 .aai-header .aai-brand-logo { display: inline-flex; align-items: center; height: 100%; }
body.aai-o2 .aai-header .aai-brand-logo img { height: 40px; width: auto; display: block; }
body.aai-o2 .aai-header .aai-collapse-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; cursor: pointer;
    border: 1px solid rgba(46, 49, 146, .22); border-radius: 6px; background: rgba(255, 255, 255, .72); color: var(--aai-brand);
}
body.aai-o2 .aai-header .aai-collapse-btn:hover { background: #fff; text-decoration: none; }
body.aai-o2 .aai-header .aai-collapse-btn svg { transition: transform .2s ease; }
body.aai-o2.sidebar-xs .aai-header .aai-collapse-btn svg { transform: rotate(180deg); }
body.aai-o2 .aai-header .navbar-header.aai-header-brand > ul.navbar-nav { display: none; }
body.aai-o2 .aai-header .navbar-collapse#navbar-mobile {
    flex: 1 1 auto; min-width: 0; display: flex !important; align-items: center; justify-content: space-between;
    height: var(--aai-header-h); padding: 0 24px; background: #fff;
}
body.aai-o2 .aai-header .aai-header-title {
    margin: 0; font-size: var(--aai-fs-base); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1e293b; white-space: nowrap;
}
body.aai-o2 .aai-header .aai-header-title a { color: inherit; text-decoration: none; }
body.aai-o2 .aai-header .aai-header-actions { display: flex; align-items: center; gap: 10px; margin: 0; float: none; }
body.aai-o2 .aai-header .aai-header-version { font-size: var(--aai-fs-xs); color: var(--aai-text-muted); }
body.aai-o2 .aai-header .aai-header-user { font-size: var(--aai-fs-base); font-weight: 600; color: #1e293b; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.aai-o2 .aai-header .aai-icon-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid var(--aai-line); background: #fff; color: #475569; font-size: 16px; text-decoration: none;
}
body.aai-o2 .aai-header .aai-icon-btn:hover { background: var(--aai-surface-alt); color: var(--aai-brand); text-decoration: none; }
body.aai-o2 .aai-header .aai-avatar { background: #8c1d40; border-color: #8c1d40; color: #fff; }
body.aai-o2 .aai-header .aai-avatar:hover { background: #721733; color: #fff; }
body.aai-o2 .aai-header .aai-icon-btn i { margin: 0; line-height: 1; }
body.aai-o2 .aai-header .logouticon-green { color: inherit; }
body.aai-o2 .aai-header .aai-legacy-hidden { display: none !important; }
body.aai-o2 .navbar-nav > li { top: 0 !important; }

/* page container: flex instead of the legacy table layout */
body.aai-o2 .page-container { display: block; width: 100%; table-layout: auto; }
body.aai-o2 .page-content { display: flex; align-items: flex-start; width: 100%; }
body.aai-o2 .content-wrapper {
    display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; width: auto; min-height: calc(100vh - var(--aai-header-h));
    background: var(--aai-canvas);
}
body.aai-o2 .content-wrapper > .footer { margin-top: auto; }
body.aai-o2 .content { padding: 8px 24px 24px 24px; }
body.aai-o2 .content:first-child { padding-top: 8px; }

/* breadcrumb bar (page title area: breadcrumb here, the page's own h2 is the 20 px title) */
body.aai-o2 .aai-crumbbar { padding: 18px 24px 0 24px; min-height: 36px; }
body.aai-o2 .aai-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; font-size: var(--aai-fs-base); color: var(--aai-text-muted); }
body.aai-o2 .aai-breadcrumb li { display: inline-flex; align-items: center; margin: 0; padding: 0; }
body.aai-o2 .aai-breadcrumb li + li::before { content: '>'; padding: 0 8px; color: #94a3b8; }
body.aai-o2 .aai-breadcrumb a { color: var(--aai-text-muted); text-decoration: none; }
body.aai-o2 .aai-breadcrumb a:hover { color: var(--aai-brand); text-decoration: underline; }
body.aai-o2 .aai-breadcrumb .aai-crumb-cur { color: var(--aai-text-muted); font-weight: 400; }
body.aai-o2 .aai-breadcrumb li.aai-crumb-last .aai-crumb-cur { color: var(--aai-brand); font-weight: 500; }

/* footer */
body.aai-o2 .footer.aai-footer {
    padding: 8px 16px 9px; background: #fff; border-top: 1px solid var(--aai-line-soft); color: var(--aai-text-muted); font-size: var(--aai-fs-xs); text-align: center;
}
body.aai-o2 .footer.aai-footer strong { color: #475569; font-weight: 600; }
body.aai-o2 .footer.aai-footer a { color: inherit; }

body.aai-o2 .sidebar.sidebar-main {
    display: block; flex: 0 0 var(--aai-sidebar-w); width: var(--aai-sidebar-w); box-sizing: border-box;
    position: sticky; top: var(--aai-header-h); align-self: flex-start; height: calc(100vh - var(--aai-header-h)); overflow-y: auto; overflow-x: hidden;
    background: var(--aai-sidebar-bg); color: var(--aai-text-nav); border-right: 1px solid var(--aai-sidebar-border);
    font-family: var(--aai-font); font-size: var(--aai-fs-base);
}
body.aai-o2 .sidebar-main .sidebar-content { padding: 14px 10px 24px; }
body.aai-o2 .sidebar-main .navigation { padding: 0; margin: 0; }
body.aai-o2 .sidebar-main .navigation li + li { margin-top: 2px; }
body.aai-o2 .sidebar-main .navigation li a {
    color: var(--aai-text-nav); font-weight: 500; font-size: var(--aai-fs-base); line-height: 1.3;
    display: flex; align-items: center; gap: 10px; border-radius: 8px; text-decoration: none !important;
}
body.aai-o2 .sidebar-main .navigation li a:hover, body.aai-o2 .sidebar-main .navigation li a:focus { background: rgba(255, 255, 255, .7); color: var(--aai-brand); }
/* top level */
body.aai-o2 .sidebar-main .navigation > li > a {
    min-height: 42px; padding: 0 12px 0 14px; font-size: 13.5px; font-weight: 600; color: #1e293b; border-radius: 10px;
}
body.aai-o2 .sidebar-main .navigation > li > a > i:first-child { float: none; margin: 0 !important; font-size: 18px; width: 20px; text-align: center; color: #64748b; flex: 0 0 20px; }
body.aai-o2 .sidebar-main .navigation > li > a > span { flex: 1 1 auto; min-width: 0; }
body.aai-o2 .sidebar-main .navigation > li > a > i.icon-submenu { flex: 0 0 auto; margin-left: auto !important; float: none; font-size: 12px; color: #64748b; transition: transform .2s ease; }
body.aai-o2 .sidebar-main .navigation > li > a.has-ul { padding-right: 12px; }
body.aai-o2 .sidebar-main .navigation li > .has-ul::after { content: none; }
body.aai-o2 .sidebar-main .navigation li.active > a > i.icon-submenu { transform: rotate(-90deg); }
/* open group = white card (like the hi-fi Organization block) */
body.aai-o2 .sidebar-main .navigation > li.active:has(> ul) { background: #fff; border-radius: 10px; box-shadow: 0 1px 2px rgba(46, 49, 146, .08); border: 1px solid rgba(46, 49, 146, .10); margin-bottom: 4px; }
body.aai-o2 .sidebar-main .navigation > li.active:has(> ul) > a { color: var(--aai-brand); background: transparent; border-bottom: 1px solid var(--aai-line-soft); border-radius: 10px 10px 0 0; }
body.aai-o2 .sidebar-main .navigation > li.active:has(> ul) > a > i:first-child { color: var(--aai-brand); }
/* nested lists */
/* nested menus carry Bootstrap 5 .nav (flex row + wrap): stack the entries one per line; display (none / block from menu.js) is left alone */
body.aai-o2 .sidebar-main .navigation > li ul { box-shadow: none; background: transparent; padding: 6px 8px 8px; margin: 0; flex-direction: column; flex-wrap: nowrap; }
body.aai-o2 .sidebar-main .navigation > li ul > li { width: 100%; }
body.aai-o2 .sidebar-main .navigation > li ul li:first-child, body.aai-o2 .sidebar-main .navigation > li ul li:last-child { padding-top: 0; padding-bottom: 0; }
body.aai-o2 .sidebar-main .navigation > li ul li a { min-height: 34px; padding: 0 10px 0 14px; font-size: var(--aai-fs-base); font-weight: 500; color: var(--aai-text-nav); }
body.aai-o2 .sidebar-main .navigation > li > ul > li > ul { margin-left: 12px; padding: 2px 0 4px 8px; border-left: 1px solid #cbd5e1; }
body.aai-o2 .sidebar-main .navigation > li > ul > li > ul > li > ul { margin-left: 8px; }
body.aai-o2 .sidebar-main .navigation > li > ul > li > ul > li > a, body.aai-o2 .sidebar-main .navigation > li > ul > li > ul > li > ul > li > a { padding-left: 12px; }
body.aai-o2 .sidebar-main .navigation > li ul li a > i:first-child { display: none; }
body.aai-o2 .sidebar-main .navigation > li ul li a > i.icon-submenu { display: inline-block; margin-left: auto; color: #94a3b8; }
body.aai-o2 .sidebar-main .navigation > li ul li.active:has(> ul) > a { color: var(--aai-brand); font-weight: 600; background: transparent; }
/* active leaf = brand pill */
body.aai-o2 .sidebar-main .navigation li.active:not(:has(> ul)) > a,
body.aai-o2 .sidebar-main .navigation li.active:not(:has(> ul)) > a:hover {
    background: var(--aai-brand); color: #fff; font-weight: 600; box-shadow: 0 2px 8px rgba(46, 49, 146, .32);
}
body.aai-o2 .sidebar-main .navigation > li.active:not(:has(> ul)) > a > i:first-child { color: #fff; }
body.aai-o2 .sidebar-main .navigation > li > ul li.active:has(> ul):not(:has(li.active)) > a { background: var(--aai-brand-soft); }

/* collapsed rail (body.sidebar-xs is toggled by menu.js .sidebar-main-toggle; state persisted by aai-shell.js) */
@media (min-width: 769px) {
    body.aai-o2.sidebar-xs .sidebar.sidebar-main { flex: 0 0 var(--aai-sidebar-w-xs); width: var(--aai-sidebar-w-xs); overflow: visible; }
    body.aai-o2.sidebar-xs .aai-header .navbar-header.aai-header-brand { flex-basis: var(--aai-sidebar-w-xs); width: var(--aai-sidebar-w-xs); padding: 0 6px; flex-direction: column; justify-content: center; gap: 2px; }
    body.aai-o2.sidebar-xs .aai-header .aai-brand-logo { display: none; }
    body.aai-o2.sidebar-xs .sidebar-main .sidebar-content { padding: 14px 8px; }
    body.aai-o2.sidebar-xs .sidebar-main .navigation > li > a { justify-content: center; padding: 0; gap: 0; }
    body.aai-o2.sidebar-xs .sidebar-main .navigation > li > a > span, body.aai-o2.sidebar-xs .sidebar-main .navigation > li > a > i.icon-submenu { display: none; }
    body.aai-o2.sidebar-xs .sidebar-main .navigation > li > a > i:first-child { margin: 0 !important; }
    body.aai-o2.sidebar-xs .sidebar-main .navigation > li.active:has(> ul) { background: transparent; border: 0; box-shadow: none; }
    body.aai-o2.sidebar-xs .sidebar-main .navigation > li.active:has(> ul) > a { background: #fff; border: 0; border-radius: 10px; }
    body.aai-o2.sidebar-xs .sidebar-main .navigation > li:hover > a > span {
        display: block; position: absolute; top: 0; left: 100%; right: auto; width: 220px; height: 42px; padding: 0 16px; line-height: 42px;
        background: var(--aai-brand); border: 0; color: #fff; border-radius: 0 10px 0 0; z-index: 3; font-weight: 600;
    }
    body.aai-o2.sidebar-xs .sidebar-main .navigation > li > ul {
        position: absolute; left: 100%; right: auto; top: 42px; width: 220px; background: #fff; border: 1px solid var(--aai-line); border-radius: 0 0 10px 0; box-shadow: var(--aai-shadow-pop); z-index: 3; padding: 6px 8px 8px;
    }
    body.aai-o2.sidebar-xs .sidebar-main .navigation > li > ul > li > a { padding-left: 14px; }
}

/* narrow screens: sidebar becomes a drawer opened by the existing hamburger (.sidebar-mobile-main-toggle) */
@media (max-width: 768px) {
    body.aai-o2 .sidebar.sidebar-main { display: none; }
    body.aai-o2.sidebar-mobile-main .sidebar.sidebar-main {
        display: block; position: fixed; top: var(--aai-header-h); left: 0; bottom: 0; width: min(86vw, 300px); height: auto; z-index: 1040; box-shadow: var(--aai-shadow-pop);
    }
    body.aai-o2 .page-content { display: block; }
    body.aai-o2 .content-wrapper { min-height: 0; }
    body.aai-o2 .navbar.aai-header { height: auto; min-height: var(--aai-header-h); flex-wrap: wrap; }
    body.aai-o2 .aai-header .navbar-header.aai-header-brand { flex: 1 1 100%; width: 100%; height: var(--aai-header-h); }
    body.aai-o2 .aai-header .navbar-header.aai-header-brand > ul.navbar-nav { display: flex !important; margin: 0 0 0 auto; padding: 0; align-items: center; }
    body.aai-o2 .aai-header .navbar-header.aai-header-brand > ul.navbar-nav > li > a { padding: 6px 10px; color: var(--aai-brand); font-size: 18px; }
    body.aai-o2 .aai-header .aai-collapse-btn { display: none !important; }
    body.aai-o2 .aai-header .navbar-collapse#navbar-mobile { flex: 1 1 100%; height: auto; padding: 10px 16px; flex-wrap: wrap; gap: 8px; }
    body.aai-o2 .navbar-collapse.collapse:not(.show) { display: none !important; }
    body.aai-o2 .aai-crumbbar { padding: 12px 16px 0; }
    body.aai-o2 .content { padding: 8px 16px 20px; }
}
@media (min-width: 768px) {
    body.aai-o2 .navbar-collapse.collapse { display: flex !important; }
}

/* ---------- 5. Cards / panels ---------- */
body.aai-o2 .panel, body.aai-o2 .panel-flat {
    margin: 10px 0 16px; background: var(--aai-surface); color: var(--aai-text-body);
    border: 1px solid var(--aai-line); border-radius: var(--aai-radius-card); box-shadow: var(--aai-shadow-card);
}
body.aai-o2 .panel-heading { padding: 14px 20px; background: var(--aai-surface-alt); border-bottom: 1px solid var(--aai-line); border-radius: var(--aai-radius-card) var(--aai-radius-card) 0 0; }
body.aai-o2 .panel-title, body.aai-o2 h6.panel-title { margin: 0; font-size: var(--aai-fs-lg); font-weight: 600; color: var(--aai-text); }
body.aai-o2 .panel-body { padding: 18px 20px; }
body.aai-o2 .panel-footer { padding: 12px 20px; background: var(--aai-surface-alt); border-top: 1px solid var(--aai-line); border-radius: 0 0 var(--aai-radius-card) var(--aai-radius-card); }
body.aai-o2 .well { background: var(--aai-surface-alt); border: 1px solid var(--aai-line); border-radius: var(--aai-radius-card); box-shadow: none; }
body.aai-o2 .form-group { margin-bottom: 20px !important; }
body.aai-o2 .form-horizontal .control-label { color: var(--aai-text-label); font-weight: 500; font-size: var(--aai-fs-base); }
body.aai-o2 hr { border-color: var(--aai-line); opacity: 1; }

/* ---------- 6. Buttons ---------- */
body.aai-o2 .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--aai-ctl-h); padding: 0 16px; font-family: var(--aai-font);
    font-size: var(--aai-fs-base); font-weight: 600; line-height: 1.2; border-radius: var(--aai-radius-ctl); box-shadow: none; text-decoration: none;
}
body.aai-o2 .btn.btn-block { display: flex; }
body.aai-o2 .btn-primary { background-color: var(--aai-brand); border-color: var(--aai-brand); color: #fff; }
body.aai-o2 .btn-primary:hover, body.aai-o2 .btn-primary:focus { background-color: var(--aai-brand-hover); border-color: var(--aai-brand-hover); color: #fff; }
body.aai-o2 .btn-default, body.aai-o2 .btn-secondary, body.aai-o2 .btn-outline-secondary { background: #fff; color: var(--aai-text); border: 1px solid var(--aai-line-ctl); }
body.aai-o2 .btn-default:hover, body.aai-o2 .btn-secondary:hover, body.aai-o2 .btn-outline-secondary:hover { background: var(--aai-surface-alt); border-color: var(--aai-brand); color: var(--aai-brand); }
body.aai-o2 .btn-success { background: #357a38; border-color: #357a38; color: #fff; }
body.aai-o2 .btn-danger { background: #c62828; border-color: #c62828; color: #fff; }
body.aai-o2 .btn-danger:hover { background: #a32020; border-color: #a32020; }
body.aai-o2 .btn-icon { min-height: 0; padding: 0; }
body.aai-o2 .btn:focus-visible, body.aai-o2 .k-button:focus-visible { outline: 2px solid var(--aai-brand); outline-offset: 2px; }
body.aai-o2 .link-button { background: var(--aai-brand); border: 1px solid var(--aai-brand); border-radius: var(--aai-radius-ctl); box-shadow: none; text-shadow: none; color: #fff; }
body.aai-o2 .link-button:hover { background: var(--aai-brand-hover); border-color: var(--aai-brand-hover); color: #fff; box-shadow: none; text-shadow: none; }

/* ---------- 7. Inputs (Bootstrap) ---------- */
body.aai-o2 .form-control, body.aai-o2 .form-select, body.aai-o2 textarea.form-control, body.aai-o2 input.k-textbox, body.aai-o2 .k-textbox {
    min-height: var(--aai-ctl-h); padding: 6px 12px; font-family: var(--aai-font); font-size: var(--aai-fs-base); line-height: 1.4; color: var(--aai-text);
    background-color: #fff; border: 1px solid var(--aai-line-ctl); border-radius: var(--aai-radius-ctl); box-shadow: none;
}
body.aai-o2 .form-control, body.aai-o2 .form-select { height: var(--aai-ctl-h); }
body.aai-o2 textarea.form-control, body.aai-o2 textarea.k-textarea { height: auto; min-height: 84px; font-size: var(--aai-fs-base); line-height: 1.5; }
body.aai-o2 .form-control:focus, body.aai-o2 .form-select:focus, body.aai-o2 .k-textbox:focus { color: var(--aai-text); border-color: var(--aai-brand); box-shadow: 0 0 0 3px var(--aai-brand-ring); outline: 0; }
body.aai-o2 .form-control::placeholder, body.aai-o2 .k-textbox::placeholder { color: #9ca3af; }
body.aai-o2 .form-control[disabled], body.aai-o2 .form-control[readonly], body.aai-o2 fieldset[disabled] .form-control { background-color: #f1f5f9; color: #475569; cursor: not-allowed; }
body.aai-o2 .input-group-addon { background: var(--aai-surface-alt); border: 1px solid var(--aai-line-ctl); color: var(--aai-text-muted); border-radius: var(--aai-radius-ctl); }
body.aai-o2 input[type="checkbox"], body.aai-o2 input[type="radio"] { accent-color: var(--aai-brand); }

/* validation */
body.aai-o2 .validation-error-label, body.aai-o2 .field-validation-error, body.aai-o2 .text-danger { color: var(--aai-err); font-size: var(--aai-fs-sm); font-weight: 500; }
body.aai-o2 .input-validation-error, body.aai-o2 .form-control.is-invalid, body.aai-o2 .k-invalid, body.aai-o2 .k-invalid-msg ~ .k-input { border-color: #f44336 !important; box-shadow: 0 0 0 3px rgba(244, 67, 54, .10); }
body.aai-o2 .validation-summary-errors { background: var(--aai-err-bg); border: 1px solid var(--aai-err-line); border-radius: 4px; color: var(--aai-err); padding: 10px 14px; }
body.aai-o2 .validation-summary-errors ul { margin: 0; padding-left: 18px; list-style: disc; }

/* ---------- 8. Tabs ---------- */
body.aai-o2 .nav-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--aai-line); }
body.aai-o2 .nav-tabs .nav-link, body.aai-o2 .nav-tabs > li > a {
    display: inline-flex; align-items: center; height: 42px; padding: 0 18px; margin-bottom: -1px; background: transparent; color: var(--aai-text-muted);
    font-size: var(--aai-fs-base); font-weight: 600; border: 0; border-bottom: 3px solid transparent; border-radius: 0; text-decoration: none; white-space: nowrap;
}
body.aai-o2 .nav-tabs .nav-link:hover, body.aai-o2 .nav-tabs > li > a:hover { color: var(--aai-brand); border-bottom-color: #c7cbe9; background: transparent; }
body.aai-o2 .nav-tabs .nav-link.active, body.aai-o2 .nav-tabs > li.active > a, body.aai-o2 .nav-tabs .nav-item.show .nav-link { color: var(--aai-brand); background: transparent; border-bottom-color: var(--aai-brand); }
body.aai-o2 .tab-links a { background: transparent; color: var(--aai-text-muted); font-weight: 600; font-size: var(--aai-fs-base); border-radius: 0; border-bottom: 3px solid transparent; }
body.aai-o2 .tab-links a:hover, body.aai-o2 li.tabactive a, body.aai-o2 li.tabactive a:hover { background: transparent; color: var(--aai-brand); border-bottom-color: var(--aai-brand); }
body.aai-o2 .tab-content { background: transparent; box-shadow: none; border-radius: 0; }
body.aai-o2 .tab-links + .tab-content { background: #fff; border: 1px solid var(--aai-line); border-radius: 0 0 var(--aai-radius-card) var(--aai-radius-card); }

/* ---------- 9. Badges / pills / labels ---------- */
body.aai-o2 .badge, body.aai-o2 .label {
    display: inline-flex; align-items: center; height: 22px; padding: 0 10px; font-size: var(--aai-fs-sm); font-weight: 600; line-height: 1; border-radius: var(--aai-radius-pill);
    background: var(--aai-brand-soft); color: var(--aai-brand);
}
body.aai-o2 .badge.bg-secondary { background: var(--aai-brand-soft) !important; color: var(--aai-brand); }
body.aai-o2 .badge.bg-success, body.aai-o2 .label-success { background: var(--aai-ok-bg) !important; color: var(--aai-ok); }
body.aai-o2 .badge.bg-warning, body.aai-o2 .label-warning { background: var(--aai-warn-bg) !important; color: var(--aai-warn); }
body.aai-o2 .badge.bg-danger, body.aai-o2 .label-danger { background: var(--aai-err-bg) !important; color: var(--aai-err); }
body.aai-o2 .aai-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--aai-radius-pill); font-size: var(--aai-fs-sm); font-weight: 600; background: var(--aai-ok-bg); color: var(--aai-ok); }
body.aai-o2 .aai-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
body.aai-o2 .aai-pill--off { background: #f1f5f9; color: #5f6f86; }
body.aai-o2 .aai-pill--warn { background: var(--aai-warn-bg); color: var(--aai-warn); }
body.aai-o2 .aai-pill--err { background: var(--aai-err-bg); color: var(--aai-err); }

/* ---------- 10. Modals ---------- */
body.aai-o2 .modal-content { border: 1px solid var(--aai-line); border-radius: var(--aai-radius-card); box-shadow: var(--aai-shadow-pop); font-family: var(--aai-font); }
body.aai-o2 .modal-header { background: #fff; border-bottom: 1px solid var(--aai-line); border-radius: var(--aai-radius-card) var(--aai-radius-card) 0 0; padding: 14px 20px; }
body.aai-o2 .modal-header .modal-title, body.aai-o2 .modal-header .panel-title, body.aai-o2 .modal-header h6, body.aai-o2 .modal-header h5, body.aai-o2 .model-header-color, body.aai-o2 .modal-dialog h6 { color: var(--aai-text) !important; font-size: var(--aai-fs-lg); font-weight: 700; }
body.aai-o2 .modal-header .close { color: #475569; text-shadow: none; opacity: .7; font-size: 24px; }
body.aai-o2 .modal-header .close:hover { opacity: 1; }
body.aai-o2 .modal-body { padding: 18px 20px; }
body.aai-o2 .modal-footer { border-top: 1px solid var(--aai-line) !important; padding: 12px 20px; gap: 8px; }
body.aai-o2 .modal-backdrop.show { opacity: .45; background: #0f172a; }

/* ---------- 11. Toast / alerts (dark bottom-centre toast; #dvAlert keeps its id and the show/hide script) ---------- */
body.aai-o2 .alertCont, body.aai-o2 .alertContLeftAlign {
    position: fixed; left: 50%; right: auto; top: auto; bottom: 28px; transform: translateX(-50%); z-index: 9999;
    min-width: 280px; max-width: min(560px, 92vw); margin: 0; padding: 12px 18px; border: 0; border-radius: var(--aai-radius-card);
    font-family: var(--aai-font); font-size: var(--aai-fs-base); font-weight: 500; line-height: 1.45; box-shadow: var(--aai-shadow-pop);
}
body.aai-o2 .alertCont { text-align: center; }
body.aai-o2 .alert.alert-success.alertCont, body.aai-o2 .alert.alert-success.alertContLeftAlign { background-color: #0f172a !important; color: #fff !important; border-left: 4px solid #4caf50 !important; }
body.aai-o2 .alert.alert-danger.alertCont, body.aai-o2 .alert.alert-danger.alertContLeftAlign { background-color: #0f172a !important; color: #fff !important; border-left: 4px solid #f44336 !important; }
body.aai-o2 .alert { border-radius: 4px; font-family: var(--aai-font); font-size: var(--aai-fs-base); }
body.aai-o2 .alert-warning:not(.alertCont) { background: var(--aai-warn-bg); border-color: var(--aai-warn-line); color: var(--aai-warn); }
body.aai-o2 .alert-info:not(.alertCont) { background: var(--aai-info-bg); border-color: var(--aai-info-line); color: var(--aai-info); }
body.aai-o2 .text-success { color: var(--aai-ok) !important; }
/* reusable inline alert (hi-fi gx-alert) */
body.aai-o2 .gx-alert { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: 4px; border: 1px solid; font-size: var(--aai-fs-base); font-weight: 500; line-height: 1.45; text-align: left; }
body.aai-o2 .gx-alert--err { background: var(--aai-err-bg); border-color: var(--aai-err-line); color: var(--aai-err); }
body.aai-o2 .gx-alert--warn { background: var(--aai-warn-bg); border-color: var(--aai-warn-line); color: var(--aai-warn); }
body.aai-o2 .gx-alert--ok { background: var(--aai-ok-bg); border-color: var(--aai-ok-line); color: var(--aai-ok); }
body.aai-o2 .gx-alert--info { background: var(--aai-info-bg); border-color: var(--aai-info-line); color: var(--aai-info); }
body.aai-o2 .gx-note { font-size: var(--aai-fs-sm); line-height: 1.45; color: var(--aai-text-muted); margin-top: 5px; }
body.aai-o2 .gx-panel-pad { padding: 18px; }

/* ---------- 12. Misc legacy blocks ---------- */
body.aai-o2 .tabel-header { background: var(--aai-table-head); color: var(--aai-text-body); }
body.aai-o2 .table { color: var(--aai-text-body); }
body.aai-o2 .table > thead > tr > th { background: var(--aai-table-head); color: #1f2937; font-weight: 700; border-bottom: 1px solid var(--aai-line-soft); }
body.aai-o2 .table > tbody > tr > td { border-color: var(--aai-line-soft); }
body.aai-o2 .dropdown-menu { border: 1px solid var(--aai-line); border-radius: var(--aai-radius-card); box-shadow: var(--aai-shadow-pop); font-size: var(--aai-fs-base); }
body.aai-o2 .dropdown-item:hover, body.aai-o2 .dropdown-menu > li > a:hover { background: var(--aai-brand-soft); color: var(--aai-brand); }
body.aai-o2 .progress-bar { background-color: var(--aai-brand); }

/* ---------- 13. Page header row inside views (h2#team-efficiency + action buttons) ---------- */
body.aai-o2 #main-section-header { align-items: center; margin-bottom: 12px; }
body.aai-o2 #main-section-header .btn, body.aai-o2 #main-section-header .k-button { white-space: nowrap; }
@media (max-width: 575.98px) {
    body.aai-o2 .alertCont, body.aai-o2 .alertContLeftAlign { bottom: 12px; min-width: 0; width: 92vw; }
}

/* print: keep pages readable without the shell */
@media print {
    body.aai-o2 .navbar.aai-header, body.aai-o2 .sidebar.sidebar-main, body.aai-o2 .aai-crumbbar, body.aai-o2 .footer.aai-footer { display: none !important; }
    body.aai-o2 .content-wrapper { display: block; }
}

/* ======================================================================
   R2 (CRS-01 restyle stage R2, brief T2): per-screen patterns on top of the R1 shell.
   R2-A list card: hi-fi "list-table-card-head" (accent bar + title + count on the left, PDF / Excel / Show-Hide Filter on the right).
   Markup: the export bar of each list view carries class aai-list-bar and starts with Views/Shared/_ListCardHead.cshtml.
   ====================================================================== */
body.aai-o2 .panel-body:has(.aai-list-bar) { display: flex !important; flex-wrap: wrap; align-items: flex-start; gap: 14px 20px; padding: 16px 16px 0; }
body.aai-o2 .panel-body:has(.aai-list-bar) > .row { margin: 0; }
body.aai-o2 .panel-body:has(.aai-list-bar) > .row > [class*="col-"] { padding: 0; }
/* the row that holds the export bar and the grid fills the card edge to edge */
body.aai-o2 .panel-body:has(.aai-list-bar) > .row:has(.aai-list-bar) { flex: 0 0 calc(100% + 32px); width: calc(100% + 32px); margin: 0 -16px; padding: 0 !important; }
/* filter rows above the grid (department, user, asset category ...): label above the control, side by side, the date pair on its own line */
body.aai-o2 .panel-body:has(.aai-list-bar) > .row:not(:has(.aai-list-bar)):has(> .control-label) { display: flex; flex-direction: column; gap: 6px; flex: 0 0 240px; width: 240px; padding: 0 !important; }
body.aai-o2 .panel-body:has(.aai-list-bar) > .row:not(:has(.aai-list-bar)):has(> .control-label) > [class*="col-"] { width: 100% !important; max-width: 100%; flex: 0 0 auto; padding: 0; text-align: left !important; }
body.aai-o2 .panel-body:has(.aai-list-bar) > .row:not(:has(.aai-list-bar)):has(> .control-label) > .control-label { color: var(--aai-text-label); font-weight: 500; font-size: var(--aai-fs-base); }
body.aai-o2 .panel-body:has(.aai-list-bar) > .row:not(:has(.aai-list-bar)) .k-dropdownlist, body.aai-o2 .panel-body:has(.aai-list-bar) > .row:not(:has(.aai-list-bar)) .k-picker { width: 100% !important; }
body.aai-o2 .panel-body:has(.aai-list-bar) > .row:not(:has(.aai-list-bar)):has(.period-wrapper) { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 16px; flex: 0 0 100%; width: 100%; padding: 0 !important; text-align: left !important; }
body.aai-o2 .panel-body:has(.aai-list-bar) .period-wrapper { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 0 !important; margin: 0; }
body.aai-o2 .panel-body:has(.aai-list-bar) .period-wrapper label.select-period { text-transform: none; color: var(--aai-text-label); font-weight: 500; font-size: var(--aai-fs-base); margin: 0; }
body.aai-o2 .panel-body:has(.aai-list-bar) .period-wrapper .k-datepicker, body.aai-o2 .panel-body:has(.aai-list-bar) .period-wrapper .k-picker { width: 200px !important; }
body.aai-o2 .aai-list-bar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px;
    padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--aai-line-soft); font-size: var(--aai-fs-base); font-weight: 500; color: var(--aai-text);
}
body.aai-o2 .aai-list-bar > .aai-list-title { display: flex; align-items: center; gap: 10px; margin-right: auto; min-width: 0; }
body.aai-o2 .aai-list-accent { flex: 0 0 4px; width: 4px; height: 20px; border-radius: 2px; background: #1e293b; margin-left: -16px; margin-right: 6px; }
body.aai-o2 .aai-list-title-text { font-size: var(--aai-fs-lg); font-weight: 700; color: var(--aai-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.aai-o2 .aai-list-count { font-size: var(--aai-fs-lg); font-weight: 600; color: #d32f2f; }
/* export buttons: white outline, 34 px (hi-fi btn-list-export) */
body.aai-o2 .aai-list-bar > .k-button, body.aai-o2 .aai-list-bar > .btn {
    min-height: 34px; padding: 0 14px; background: #fff; border: 1px solid var(--aai-line-ctl); border-radius: var(--aai-radius-ctl); color: var(--aai-text); font-weight: 500;
}
body.aai-o2 .aai-list-bar > .k-button:hover { border-color: var(--aai-brand); color: var(--aai-brand); background: var(--aai-surface-alt); }
/* Show / Hide Filter: Telerik renders the check box with its text as a bare text node (no label element), so the box stays visible and keeps its id, state and change handler */
body.aai-o2 .aai-list-bar > input.k-checkbox { margin: 0 -2px 0 6px; align-self: center; }
/* the grid sits flush under the head inside the card */
body.aai-o2 .aai-list-bar ~ .k-grid, body.aai-o2 .aai-list-bar ~ div > .k-grid { border-width: 0; border-radius: 0 0 var(--aai-radius-card) var(--aai-radius-card); }
body.aai-o2 .aai-list-bar ~ .k-grid { margin: 0; }
/* status pill column (Kendo client template: <span class="aai-pill"> / aai-pill--off) */
body.aai-o2 .k-grid td .aai-pill { white-space: nowrap; }
body.aai-o2 .aai-pill-cell { text-align: left; }
@media (max-width: 575.98px) {
    body.aai-o2 .aai-list-bar { justify-content: flex-start; }
}

/* ----------------------------------------------------------------------
   R2-B form pattern (hi-fi G-22 form): labels above the fields, fields in a responsive grid inside the card, footer bar with Cancel on the left.
   Opt-in: the view's <form> carries class aai-form. Element ids, names, labels and handlers are untouched; only the Bootstrap column rows are re-flowed.
   ---------------------------------------------------------------------- */
body.aai-o2 .panel-flat > .panel-heading:not(:has(*)) { display: none; }
body.aai-o2 .aai-form fieldset.content-group,
body.aai-o2 .aai-form .row.form-group:has(> .row.form-group) {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px 20px; margin: 0; padding: 0; border: 0; min-width: 0; align-items: start;
}
/* a field = a row whose children are Bootstrap columns: label column on top, control column below */
body.aai-o2 .aai-form .row:has(> [class*="col-md-"]:not(.col-md-12)):not(:has(> .row)):not(:has(> .col-lg-3:first-child)):not(:has(> .col-lg-6[class*="col-md-push"])) {
    display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0 !important; min-width: 0;
}
body.aai-o2 .aai-form .row:has(> [class*="col-md-"]:not(.col-md-12)):not(:has(> .row)):not(:has(> .col-lg-3:first-child)):not(:has(> .col-lg-6[class*="col-md-push"])) > [class*="col-"] {
    flex: 0 0 auto; width: 100% !important; max-width: 100%; padding: 0; text-align: left; margin: 0;
}
body.aai-o2 .aai-form .control-label, body.aai-o2 .aai-form .row > .text-right:first-child {
    text-align: left !important; padding: 0; color: var(--aai-text-label); font-weight: 500; font-size: var(--aai-fs-base);
}
/* checkbox rows (single checkbox in the control column): box first, label after it, on one line */
body.aai-o2 .aai-form .row:has(> [class*="col-md-"] > input[type="checkbox"]):not(:has(> [class*="col-md-"] > :not(input))) { flex-direction: row; align-items: center; gap: 8px; align-self: end; min-height: var(--aai-ctl-h); }
body.aai-o2 .aai-form .row:has(> [class*="col-md-"] > input[type="checkbox"]):not(:has(> [class*="col-md-"] > :not(input))) > [class*="col-"] { width: auto !important; }
body.aai-o2 .aai-form .row:has(> [class*="col-md-"] > input[type="checkbox"]):not(:has(> [class*="col-md-"] > :not(input))) > [class*="col-"]:nth-child(2) { order: -1; }
body.aai-o2 .aai-form .k-dropdownlist, body.aai-o2 .aai-form .k-picker, body.aai-o2 .aai-form .k-combobox, body.aai-o2 .aai-form .k-dropdown { width: 100% !important; }
/* wide content (text areas, tables, grids, full-width columns) spans the whole card */
body.aai-o2 .aai-form .row:has(> .col-md-12:not(.text-center)), body.aai-o2 .aai-form .row:has(textarea), body.aai-o2 .aai-form .row:has(.k-grid), body.aai-o2 .aai-form .row:has(table) { grid-column: 1 / -1; }
/* footer bar: Cancel left, Create Another + Save right */
body.aai-o2 .aai-form > .text-right, body.aai-o2 .aai-form > .row.form-group:has(> .col-md-12.text-center), body.aai-o2 .aai-form .row.form-group:has(> .col-md-12.text-center) {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; margin: 22px -20px -18px; padding: 14px 20px; background: #fff; border-top: 1px solid var(--aai-line-soft);
    border-radius: 0 0 var(--aai-radius-card) var(--aai-radius-card); grid-column: 1 / -1;
}
body.aai-o2 .aai-form .row.form-group:has(> .col-md-12.text-center) > .col-md-12 { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; width: 100%; padding: 0; text-align: left; }
body.aai-o2 .aai-form #btnCancel { order: -1; margin-right: auto; }
body.aai-o2 .aai-form .k-checkbox-label { font-weight: 500; color: var(--aai-text); }

/* ----------------------------------------------------------------------
   R2-D error pages (G-26 / G-27, Views/Shared/Error.cshtml): centred card with a red top edge, icon, message and the Go Back / Go to Home actions
   ---------------------------------------------------------------------- */
body.aai-o2 .aai-error-wrap { display: flex; justify-content: center; padding: 56px 16px 40px; }
body.aai-o2 .aai-error-card {
    width: 100%; max-width: 560px; padding: 34px 40px 30px; text-align: center; background: #fff; border: 1px solid var(--aai-line); border-top: 4px solid var(--aai-err);
    border-radius: 4px; box-shadow: var(--aai-shadow-card);
}
body.aai-o2 .aai-error-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--aai-err-bg); color: var(--aai-err); }
body.aai-o2 .aai-error-title { margin: 14px 0 8px; font-size: 18px; font-weight: 700; color: #1e293b; }
body.aai-o2 .aai-error-text { margin: 0 0 22px; font-size: var(--aai-fs-md); font-weight: 400; color: #475569; line-height: 1.5; }
body.aai-o2 .aai-error-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
body.aai-o2 .aai-btn-outline, body.aai-o2 .aai-btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--aai-ctl-h); padding: 0 20px; font-size: var(--aai-fs-base); font-weight: 600;
    border-radius: var(--aai-radius-ctl); text-decoration: none; cursor: pointer;
}
body.aai-o2 .aai-btn-outline { background: #fff; color: var(--aai-brand); border: 1px solid var(--aai-line-ctl); }
body.aai-o2 .aai-btn-outline:hover { border-color: var(--aai-brand); background: var(--aai-surface-alt); text-decoration: none; }
body.aai-o2 .aai-btn-primary { background: var(--aai-brand); color: #fff; border: 1px solid var(--aai-brand); }
body.aai-o2 .aai-btn-primary:hover { background: var(--aai-brand-hover); color: #fff; text-decoration: none; }

/* page header row (h2#team-efficiency + action): the hi-fi shows the title on the canvas under the breadcrumb, left, with the primary action on the right (Site.css gave a white band, a shadow and upper case) */
body.aai-o2 #main-section-header:not(:has(.k-widget, .k-picker, .k-dropdownlist, input, select)) {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0; padding: 4px 24px 0; background: transparent; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none;
}
body.aai-o2 #main-section-header:not(:has(.k-widget, .k-picker, .k-dropdownlist, input, select)) > h2, body.aai-o2 #main-section-header:not(:has(.k-widget, .k-picker, .k-dropdownlist, input, select)) > h2#team-efficiency {
    flex: 1 1 auto; width: auto; max-width: none; padding: 0; text-transform: none; font-size: var(--aai-fs-h1); line-height: 1.25; white-space: normal;
}
body.aai-o2 #main-section-header:not(:has(.k-widget, .k-picker, .k-dropdownlist, input, select)) > #dateFilter, body.aai-o2 #main-section-header:not(:has(.k-widget, .k-picker, .k-dropdownlist, input, select)) > [class*="col-"]:not(h2) { flex: 0 0 auto; width: auto; max-width: none; padding: 0; text-align: right; }
body.aai-o2 #main-section-header:not(:has(.k-widget, .k-picker, .k-dropdownlist, input, select)) > div[style*="clear"] { display: none; }
body.aai-o2 #main-section-header:not(:has(.k-widget, .k-picker, .k-dropdownlist, input, select)) .period-wrapper { display: inline-flex; gap: 8px; align-items: center; margin: 0; padding: 0; }
body.aai-o2 .content.main-section-content { padding-top: 14px; }
/* Create Another / Kendo check boxes in the footer bar: box and label stay together */
body.aai-o2 .aai-form > .text-right > input.k-checkbox, body.aai-o2 .aai-form .row.form-group > .col-md-12 > input.k-checkbox { margin-right: -6px; }
body.aai-o2 .aai-form p.content-group-lg:empty, body.aai-o2 .panel-body > p.content-group-lg:empty { display: none; }

/* ----------------------------------------------------------------------
   R2-E role and organisation screens (hi-fi G-16 .. G-21): label-above rows that use label.control-label + col-lg-*, the permission check-box grid,
   the single "Department" selector row (.aai-field-stack) and the Add Role button. Matrix / grid pages keep their ids and scripts.
   ---------------------------------------------------------------------- */
body.aai-o2 .aai-form .form-group:has(> label.control-label) { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0 !important; min-width: 0; }
body.aai-o2 .aai-form .form-group:has(> label.control-label) > * { flex: 0 0 auto; width: 100%; max-width: 100%; padding: 0; margin: 0; text-align: left; position: static; left: auto; }
body.aai-o2 .aai-form .form-group > label.control-label { text-align: left !important; padding: 0; color: var(--aai-text-label); font-weight: 500; }
body.aai-o2 .aai-form #roleHierarchy { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; gap: 20px; grid-column: 1 / -1; margin: 6px 0 0; }
body.aai-o2 .aai-form #roleHierarchy > .col-md-10 { flex: 1 1 auto; width: auto; max-width: none; padding: 0; }
body.aai-o2 .aai-form #roleHierarchy > .col-md-2 { flex: 0 0 56px; width: 56px; max-width: 56px; padding: 0; margin-top: 0 !important; }
body.aai-o2 .aai-form #roleHierarchy > .col-md-2 > .row { margin: 0; height: auto !important; padding-bottom: 8px; }
/* permission check boxes: three columns, no legacy push */
body.aai-o2 .aai-form .table-responsive { overflow: visible; margin: 18px 0 0; }
body.aai-o2 .aai-form .row:has(> .col-lg-3:first-child) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 20px; margin: 0 0 14px; padding: 0 !important; }
body.aai-o2 .aai-form .row:has(> .col-lg-3:first-child) > .col-lg-3 { width: auto; max-width: none; padding: 0; margin: 0; }
body.aai-o2 .aai-form [class*="col-md-push"] { left: 0 !important; position: static; }
body.aai-o2 .aai-form .row:has(> .col-lg-6[class*="col-md-push"]) { display: block; margin: 0 0 14px; padding: 0 !important; }
body.aai-o2 .aai-form .row:has(> .col-lg-6[class*="col-md-push"]) > .col-lg-6 { width: auto; max-width: none; padding: 0; }
/* inline widths in the legacy markup (Save at 4 %, selectors at 50 %) */
body.aai-o2 .aai-form input.k-primary[type="button"] { width: auto !important; min-width: 88px; }
body.aai-o2 .aai-form .k-dropdownlist, body.aai-o2 .aai-form .k-picker { max-width: 100%; }
/* Add Role (btn-info): the hi-fi primary button */
body.aai-o2 .btn-info, body.aai-o2 .btn.btn-info { background: var(--aai-brand); border-color: var(--aai-brand); color: #fff; }
body.aai-o2 .btn-info:hover, body.aai-o2 .btn.btn-info:hover { background: var(--aai-brand-hover); border-color: var(--aai-brand-hover); color: #fff; }
body.aai-o2 .aai-form input.addRole { width: auto; margin-top: 10px; }
/* the Department selector row above a matrix: label above, selector 100 % of a 360 px field, in the white card head */
body.aai-o2 .aai-field-stack { display: flex; flex-direction: column; gap: 6px; margin: 0 !important; padding: 0 !important; max-width: 360px; }
body.aai-o2 .aai-field-stack > * { flex: 0 0 auto; width: 100%; max-width: 100%; padding: 0; margin: 0; text-align: left !important; position: static; left: auto; }
body.aai-o2 .aai-field-stack > label, body.aai-o2 .aai-field-stack > .control-label { color: var(--aai-text-label); font-weight: 500; font-size: var(--aai-fs-base); }
body.aai-o2 .aai-field-stack .k-dropdownlist, body.aai-o2 .aai-field-stack .k-picker, body.aai-o2 .aai-field-stack .k-dropdown { width: 100% !important; }
body.aai-o2 .panel-heading:has(> .aai-field-stack) { background: #fff; padding: 16px 20px; border-bottom: 0; }
body.aai-o2 .panel-body:has(> .aai-field-stack) { padding-bottom: 4px; }

/* ----------------------------------------------------------------------
   R2-F users: fieldsets with a legend become hi-fi section cards (My Profile: Profile / Digital Signature / Change Password); empty spacer columns drop out.
   ---------------------------------------------------------------------- */
body.aai-o2 .aai-form .row > [class*="col-"]:empty { display: none; }
body.aai-o2 .aai-form fieldset.content-group:has(> legend) {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px 20px; align-items: start; min-width: 0;
    margin: 0 0 16px; padding: 0 20px 20px; background: #fff; border: 1px solid var(--aai-line); border-top: 0; border-radius: var(--aai-radius-card); box-shadow: var(--aai-shadow-card);
}
body.aai-o2 .aai-form fieldset.content-group > legend {
    float: none; width: calc(100% + 42px); margin: 0 -21px 18px; padding: 14px 20px; font-size: var(--aai-fs-lg); font-weight: 600; color: var(--aai-text);
    background: #fff; border: 1px solid var(--aai-line); border-bottom: 1px solid var(--aai-line-soft); border-radius: var(--aai-radius-card) var(--aai-radius-card) 0 0;
}
body.aai-o2 .panel-body.aai-form:has(> fieldset.content-group > legend) { padding: 0; background: transparent; }
body.aai-o2 .panel.panel-flat:has(> .panel-body.aai-form > fieldset.content-group > legend) { background: transparent; border: 0; box-shadow: none; padding: 0; }
body.aai-o2 .aai-form .text-muted, body.aai-o2 .aai-form p.text-muted { font-size: var(--aai-fs-sm); }
body.aai-o2 .aai-form #passwordRules { padding: 10px 12px; margin: 0; background: var(--aai-info-bg); border: 1px solid var(--aai-info-line); border-radius: 4px; color: #374151 !important; }
body.aai-o2 .aai-form .row:has(> [class*="col-"] > #passwordRules) { grid-column: 1 / -1; }
body.aai-o2 .aai-form input[type="file"] { max-width: 100%; font-size: var(--aai-fs-sm); }
/* Manage User form: wrapper divs that hold a grid / text area span the card; check-box rows (label col + col-md-1 box) read "box, label" on one line */
body.aai-o2 .aai-form fieldset.content-group > div:not(.row):has(.k-grid, textarea, table) { grid-column: 1 / -1; }
body.aai-o2 .aai-form fieldset.content-group > div:not(.row):not(.form-group) { display: contents; }
body.aai-o2 .aai-form fieldset.content-group > div:not(.row):not(.form-group):has(.k-grid, textarea, table) { display: block; }
body.aai-o2 .aai-form .row:has(> .col-md-1) { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; min-height: var(--aai-ctl-h); align-self: end; }
body.aai-o2 .aai-form .row:has(> .col-md-1) > * { width: auto !important; flex: 0 0 auto; }
body.aai-o2 .aai-form .row:has(> .col-md-1) > :nth-child(1) { order: 2; }
body.aai-o2 .aai-form .row:has(> .col-md-1) > :nth-child(2) { order: 1; }
body.aai-o2 .aai-form .row:has(> .col-md-1) > :nth-child(3) { order: 4; margin-left: 16px; }
body.aai-o2 .aai-form .row:has(> .col-md-1) > :nth-child(4) { order: 3; }
body.aai-o2 .aai-form .help-block { margin: 4px 0 0; font-size: var(--aai-fs-sm); color: var(--aai-text-muted); }
body.aai-o2 .aai-form input.k-textbox, body.aai-o2 .aai-form input.form-control:not([type="checkbox"]):not([type="file"]) { width: 100%; box-sizing: border-box; }
body.aai-o2 .aai-form .row:has(> :nth-child(5)) { grid-column: 1 / -1; }
body.aai-o2 .aai-form .row:has(> .col-md-1) > :nth-child(5) { order: 6; margin-left: 16px; }
body.aai-o2 .aai-form .row:has(> .col-md-1) > :nth-child(6) { order: 5; }
body.aai-o2 .aai-form .row > .text-right { text-align: left !important; }
body.aai-o2 .panel-body:has(.aai-list-bar) .period-wrapper .k-datepicker input, body.aai-o2 .panel-body:has(.aai-list-bar) .period-wrapper .k-picker input { width: 100% !important; border: 0; box-shadow: none; }

/* ======================================================================
   R3-B (CRS-01 restyle stage R3, area CISF / IMS / reports / system): native Bootstrap 5 form pattern.
   Markup: form.aai-r3-form > section.card.aai-r3-card (> .card-header.aai-r3-card-head + .card-body > .row.g-3 > .col-* field groups) + .aai-r3-footer.
   One field group (label + control + hint + error holder) per .col-*, so a script that hides the group leaves no orphan label or gap.
   No inline style, no inline handler: everything is in this block. Opt-in per view, the R2 .aai-form rules do not apply to these forms.
   ====================================================================== */
body.aai-o2 .aai-r3-form { display: flex; flex-direction: column; gap: 16px; }
body.aai-o2 .aai-r3-card { 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 .aai-r3-card > .card-header { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: #fff; border-bottom: 1px solid var(--aai-line-soft); border-radius: var(--aai-radius-card) var(--aai-radius-card) 0 0; float: none; text-align: left; margin: 0; }
body.aai-o2 .aai-r3-ico { flex: 0 0 32px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--aai-brand); color: #fff; font-size: 16px; }
body.aai-o2 .aai-r3-card-title { font-size: var(--aai-fs-lg); font-weight: 500; color: var(--aai-text); margin: 0; }
body.aai-o2 .aai-r3-card > .card-body { padding: 18px; }
body.aai-o2 .aai-r3-card .form-label { margin: 0 0 6px; font-size: var(--aai-fs-base); font-weight: 500; color: var(--aai-text-label); }
body.aai-o2 .aai-r3-card .form-label .text-danger, body.aai-o2 .aai-r3-card .form-label .req { color: #e53935; }
body.aai-o2 .aai-r3-card .form-control { width: 100%; }
body.aai-o2 .aai-r3-card .k-dropdownlist, body.aai-o2 .aai-r3-card .k-picker, body.aai-o2 .aai-r3-card .k-combobox, body.aai-o2 .aai-r3-card .k-dropdown, body.aai-o2 .aai-r3-card .k-datepicker, body.aai-o2 .aai-r3-card .k-timepicker { width: 100%; max-width: 100%; }
body.aai-o2 .aai-r3-card .validation-error-label { position: static; display: block; margin-top: 4px; }
body.aai-o2 .aai-r3-card .form-check { display: flex; align-items: center; gap: 8px; min-height: var(--aai-ctl-h); margin: 0; padding-left: 0; }
body.aai-o2 .aai-r3-card .form-check .form-check-input { float: none; margin: 0; }
body.aai-o2 .aai-r3-card .form-check .form-check-label { margin: 0; font-weight: 500; color: var(--aai-text); }
body.aai-o2 .aai-r3-card .form-text { margin-top: 4px; font-size: var(--aai-fs-sm); color: var(--aai-text-muted); }
/* time of day (Shift Master): HH, MM, AM / PM and the picker on one line, the HH / MM captions inline like the hi-fi */
body.aai-o2 .aai-r3-time { display: grid; flex-wrap: wrap; align-items: end; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.aai-o2 .aai-r3-time > div { display: inline-flex; align-items: center; gap: 8px; }
body.aai-o2 .aai-r3-time .form-label { margin: 0; }
body.aai-o2 .aai-r3-time .k-dropdownlist, body.aai-o2 .aai-r3-time .k-picker { width: 92px; }
body.aai-o2 .aai-r3-time .k-timepicker { width: 140px; }
body.aai-o2 .aai-r3-narrow { max-width: 360px; }

:is(body.aai-o2 .aai-r3-card .form-label) { margin: 0 0 6px; font-size: var(--aai-fs-base); font-weight: 500; color: var(--aai-text-label); }
:is(body.aai-o2 .aai-r3-card .k-dropdownlist), :is(body.aai-o2 .aai-r3-card .k-picker), :is(body.aai-o2 .aai-r3-card .k-combobox), :is(body.aai-o2 .aai-r3-card .k-dropdown), :is(body.aai-o2 .aai-r3-card .k-datepicker), :is(body.aai-o2 .aai-r3-card .k-timepicker) { width: 100%; max-width: 100%; }
/* time of day: HH / MM / AM-PM selectors + picker on one line, each in a labelled cell */
:is(body.aai-o2 .aai-r3-time .form-label) { margin-bottom: 4px; }
@media (max-width: 767.98px) { body.aai-o2 .aai-r3-time { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* footer bar: Cancel left, Save / Update right */
body.aai-o2 .aai-r3-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; background: #fff; border: 1px solid var(--aai-line-soft); border-radius: var(--aai-radius-card); box-shadow: var(--aai-shadow-card); }
body.aai-o2 .aai-r3-footer .aai-r3-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; align-items: center; }
body.aai-o2 .aai-r3-footer .k-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--aai-ctl-h); padding: 0 20px; font-weight: 600; }
body.aai-o2 .aai-r3-footer .k-button.k-primary { min-width: 104px; }
/* read-only / view-only state: a disabled field group reads as a field, not as an error */
body.aai-o2 .aai-r3-card .form-control:disabled, body.aai-o2 .aai-r3-card .form-control[readonly] { background: var(--aai-surface-alt); color: var(--aai-text-muted); }
/* stored image tile with view / remove buttons (replaces the col-md-2 media-box wrapper) */
body.aai-o2 .aai-r3-media { position: relative; width: 200px; max-width: 100%; height: 200px; border-radius: var(--aai-radius-card); overflow: hidden; background: var(--aai-surface-alt); border: 1px solid var(--aai-line); box-shadow: none; margin: 0; }
body.aai-o2 .aai-r3-media > a.Info { position: absolute; top: 6px; right: 40px; padding: 0; z-index: 1; }
body.aai-o2 .aai-r3-media > button { position: absolute; top: 6px; right: 6px; z-index: 1; }
body.aai-o2 .aai-r3-card #dvImages:not(:has(.media-box)) { display: none; }

/* ==========================================================================
   R3-A (2026-10-26): GHA trips and operator data, native Bootstrap 5 markup.
   Form = form.aai-s5 > section.card.aai-s5-sec (card-header + card-body > div.row.g-3 > div.col-* field groups) + footer .aai-s5-foot.
   A field group is ONE wrapper (label + control + hint + error); scripts show / hide the wrapper. .aai-hidden is a plain display:none
   (not !important) so that jQuery .show() still wins; it replaces the inline style="display:none" attribute (CSP).
   ========================================================================== */
body.aai-o2 .aai-hidden { display: none; }
body.aai-o2 .aai-s5 { display: flex; flex-direction: column; gap: 16px; }
body.aai-o2 .aai-s5-sec { display: block; width: 100%; background: var(--aai-surface); border: 1px solid var(--aai-line); border-radius: var(--aai-radius-card); box-shadow: var(--aai-shadow-card); margin: 0; }
body.aai-o2 .aai-s5-sec > .card-header { float: none; display: flex; align-items: center; gap: 12px; margin: 0; text-align: left; padding: 12px 18px; background: var(--aai-surface); border: 0; border-bottom: 1px solid var(--aai-line-soft); border-radius: var(--aai-radius-card) var(--aai-radius-card) 0 0; }
body.aai-o2 .aai-s5-sec > .card-header i { width: auto; height: auto; line-height: 1; font-size: 16px; color: inherit; }
body.aai-o2 .aai-s5-ico { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 6px; background: #0b63ce; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
body.aai-o2 .aai-s5-title { margin: 0; font-size: var(--aai-fs-lg); font-weight: 500; color: var(--aai-text); line-height: 1.3; }
body.aai-o2 .aai-s5-count { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border: 1px solid var(--aai-line); border-radius: var(--aai-radius-pill); font-size: var(--aai-fs-xs); font-weight: 600; color: var(--aai-text-muted); }
body.aai-o2 .aai-s5-sec > .card-header .aai-s5-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
body.aai-o2 .aai-s5-sec > .card-body { padding: 18px; }
body.aai-o2 .aai-s5 .form-label { display: block; margin: 0 0 6px; font-size: var(--aai-fs-base); font-weight: 500; color: var(--aai-text-label); }
body.aai-o2 .aai-s5 .form-text, body.aai-o2 .aai-s5 .help-block { display: block; margin: 6px 0 0; font-size: var(--aai-fs-sm); color: var(--aai-text-muted); }
body.aai-o2 .aai-s5 .k-dropdownlist, body.aai-o2 .aai-s5 .k-picker, body.aai-o2 .aai-s5 .k-combobox, body.aai-o2 .aai-s5 .k-dropdown,
body.aai-o2 .aai-s5 .k-datepicker, body.aai-o2 .aai-s5 .k-timepicker, body.aai-o2 .aai-s5 .k-autocomplete { width: 100% !important; max-width: 100%; }
body.aai-o2 .aai-s5 .form-control { min-height: var(--aai-ctl-h); }
body.aai-o2 .aai-s5 label.error, body.aai-o2 .aai-s5 .field-validation-error, body.aai-o2 .aai-s5 .validation-error-label { display: block; margin-top: 4px; font-size: var(--aai-fs-sm); color: var(--aai-err); }
body.aai-o2 .aai-s5 .aai-s5-check { display: flex; align-items: center; gap: 8px; min-height: var(--aai-ctl-h); }
body.aai-o2 .aai-s5 .aai-s5-check label { margin: 0; font-weight: 500; color: var(--aai-text); }
body.aai-o2 .aai-s5-foot { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 8px -24px -24px; padding: 12px 24px; background: var(--aai-surface); border-top: 1px solid var(--aai-line); }
body.aai-o2 .aai-s5-foot .aai-s5-foot-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-left: auto; }
body.aai-o2 .aai-s5-foot .btn-back, body.aai-o2 .aai-s5-foot #btnCancel { order: -1; display: inline-flex; align-items: center; gap: 6px; height: var(--aai-ctl-h); padding: 0 14px; background: var(--aai-surface); border: 1px solid var(--aai-line-ctl); border-radius: var(--aai-radius-ctl); color: var(--aai-text); font-size: var(--aai-fs-base); font-weight: 500; text-decoration: none; cursor: pointer; }
body.aai-o2 .aai-s5-foot .btn-back:hover, body.aai-o2 .aai-s5-foot #btnCancel:hover { border-color: var(--aai-brand); color: var(--aai-brand); }
body.aai-o2 .aai-s5-foot .btn-back:focus-visible, body.aai-o2 .aai-s5-foot #btnCancel:focus-visible { outline: 2px solid var(--aai-brand); outline-offset: 2px; }
body.aai-o2 .aai-s5-foot .btn-primary, body.aai-o2 .aai-s5-foot .k-primary { height: var(--aai-ctl-h); padding: 0 16px; }
body.aai-o2 .aai-s5-narrow { max-width: 760px; }
body.aai-o2 .aai-s5 .aai-s5-grid-wrap { margin: 0; }
body.aai-o2 .aai-s5 .aai-s5-logo-preview img { max-width: 100%; max-height: 120px; border: 1px solid var(--aai-line); border-radius: 4px; padding: 2px; }
body.aai-o2 .aai-s5-note { padding: 10px 14px; border: 1px solid var(--aai-info-line); background: var(--aai-info-bg); border-radius: var(--aai-radius-ctl); font-size: var(--aai-fs-base); color: var(--aai-text-body); }
@media (max-width: 767.98px) {
    body.aai-o2 .aai-s5-foot { margin: 8px -16px -20px; padding: 10px 16px; }
}
/* hi-fi "Show Filter" toggle (checkbox kept as the control, labelled text beside it) */
body.aai-o2 .aai-list-bar .aai-filter-toggle { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 500; }
/* R3-B report filter card: label-above fields in a Bootstrap grid inside its own card (hi-fi "filter-card"), then the list card below */
body.aai-o2 .aai-r3-filter { margin-bottom: 16px; }
body.aai-o2 .aai-r3-filter > .card-body { padding: 14px 18px 18px; }
body.aai-o2 .aai-r3-filter .form-label .text-danger { color: #e53935; }
body.aai-o2 .aai-r3-filter .k-datepicker, body.aai-o2 .aai-r3-filter .k-dropdownlist, body.aai-o2 .aai-r3-filter .k-multiselect, body.aai-o2 .aai-r3-filter .k-picker, body.aai-o2 .aai-r3-filter .k-combobox { width: 100%; max-width: 100%; }
body.aai-o2 .aai-r3-filter .k-invalid-msg { display: block; margin-top: 4px; }
body.aai-o2 .aai-r3-filter .aai-r3-filter-actions { display: flex; align-items: center; gap: 10px; }
body.aai-o2 .aai-r3-filter .aai-r3-daterange, body.aai-o2 .aai-r3-filter .aai-r3-orwrap { display: flex; align-items: center; gap: 8px; }
body.aai-o2 .aai-r3-filter .aai-r3-daterange > .k-datepicker, body.aai-o2 .aai-r3-filter .aai-r3-orwrap > .k-dropdownlist, body.aai-o2 .aai-r3-filter .aai-r3-orwrap > .k-timepicker { flex: 1 1 0; min-width: 0; width: auto; }
body.aai-o2 .aai-r3-filter .aai-r3-to { color: var(--aai-text-muted); font-size: var(--aai-fs-sm); }
body.aai-o2 .aai-r3-filter .aai-r3-or { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 6px; border-radius: 99px; background: var(--aai-table-head); color: var(--aai-text-nav); font-size: var(--aai-fs-xs); font-weight: 700; text-transform: uppercase; }
body.aai-o2 .aai-r3-filter .aai-r3-orwrap > .k-button { flex: 0 0 auto; min-height: var(--aai-ctl-h); }
/* R3-A trip workflow panel: status path card, notices, capacity strip */
body.aai-o2 .aai-s5-flow { display: flex; flex-direction: column; gap: 12px; }
body.aai-o2 .aai-s5-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; background: var(--aai-surface); border: 1px solid var(--aai-line); border-radius: var(--aai-radius-card); box-shadow: var(--aai-shadow-card); }
body.aai-o2 .aai-s5-status-label { font-weight: 700; color: var(--aai-text); }
body.aai-o2 .aai-step { height: 26px; display: inline-flex; align-items: center; padding: 0 12px; background: var(--aai-brand-soft); color: #475569; font-size: var(--aai-fs-sm); font-weight: 600; }
body.aai-o2 .aai-step--on { background: var(--aai-brand); color: #fff; }
body.aai-o2 .aai-step-arrow { color: var(--aai-text-muted); font-size: 12px; }
body.aai-o2 .aai-s5-capacity { padding: 10px 16px; background: var(--aai-brand-soft); border: 1px solid var(--aai-line); border-radius: var(--aai-radius-ctl); color: var(--aai-brand); font-size: var(--aai-fs-base); }
body.aai-o2 .aai-s5-capacity strong { font-weight: 600; }
body.aai-o2 .aai-s5-capacity-sep { margin: 0 6px; }
/* R3-A: the content area of an .aai-s5 page grows so that the footer bar sits at the bottom of the viewport (hi-fi), and sticks while the page scrolls */
body.aai-o2 .content.main-section-content:has(.aai-s5) { flex: 1 0 auto; display: flex; flex-direction: column; }
body.aai-o2 .content.main-section-content:has(.aai-s5) > div:has(> .aai-s5) { flex: 1 0 auto; display: flex; flex-direction: column; }
body.aai-o2 .content.main-section-content > div > .aai-s5 { flex: 1 0 auto; }
:is(body.aai-o2 .aai-s5-foot) { margin-top: auto; }
body.aai-o2 .aai-s5 .k-autocomplete { min-height: var(--aai-ctl-h); }
body.aai-o2 .aai-s5 .k-autocomplete input.form-control, body.aai-o2 .aai-s5 .k-autocomplete .k-input-inner { border: 0; box-shadow: none; min-height: 0; background: transparent; }
/* card head with accent bar + title (hi-fi "card-head"), for cards that hold tabs or a form without a list bar */
body.aai-o2 .aai-r3-cardhead { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--aai-line-soft); position: relative; padding-left: 28px; }
body.aai-o2 .aai-r3-accent { flex: 0 0 4px; width: 4px; height: 20px; border-radius: 2px; background: #1e293b; margin-left: -18px; margin-right: 2px; }
body.aai-o2 .aai-r3-cardhead .aai-r3-card-title { font-weight: 700; }
/* R3-A: the compat layer zeroes .row margins, so the gutter compensation is restated here (fields align with the card padding) */
body.aai-o2 .aai-s5-sec > .card-body > .row.g-3 { margin: -16px -8px 0; }
/* R3-B dashboard tile (hi-fi "dash-tile"): coloured left edge, tinted icon square, bold label, chevron; the whole tile is the link */
body.aai-o2 .aai-r3-tile { --t: var(--aai-brand); --t-soft: var(--aai-brand-soft); display: flex; align-items: center; gap: 16px; min-height: 94px; padding: 0 20px 0 22px; background: #fff; border: 1px solid var(--aai-line); border-left: 4px solid var(--t); border-radius: 4px; color: var(--aai-text); font-weight: 600; font-size: var(--aai-fs-md); text-decoration: none; }
body.aai-o2 .aai-r3-tile:hover { background: var(--aai-surface-alt); color: var(--aai-text); text-decoration: none; box-shadow: var(--aai-shadow-card); }
body.aai-o2 .aai-r3-tile:focus-visible { outline: 2px solid var(--aai-brand); outline-offset: 2px; }
body.aai-o2 .aai-r3-tile-ico { flex: 0 0 52px; width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--t-soft); color: var(--t); font-size: 22px; }
body.aai-o2 .aai-r3-tile-label { flex: 1 1 auto; min-width: 0; }
body.aai-o2 .aai-r3-tile-chev { flex: 0 0 auto; color: var(--aai-text-muted); font-size: 14px; }
body.aai-o2 .aai-r3-tile--green { --t: #2e7d32; --t-soft: #e8f5e9; }
body.aai-o2 .aai-r3-tile--orange { --t: #e07b00; --t-soft: #fff3e0; }
body.aai-o2 .aai-r3-tile--purple { --t: #7c3aed; --t-soft: #f3e8ff; }
body.aai-o2 .aai-r3-tile--blue { --t: #2563eb; --t-soft: #e8f0ff; }
/* R3-A list filter block (Trip Status): label above the select, set apart from the grid card head */
body.aai-o2 .aai-s5-filter { display: flex; flex-direction: column; gap: 6px; flex: 0 0 100%; width: 100%; padding: 0 0 14px; margin: 0 0 4px; border-bottom: 1px solid var(--aai-line-soft); }
body.aai-o2 .aai-s5-filter .form-label { margin: 0; font-size: var(--aai-fs-base); font-weight: 500; color: var(--aai-text-label); }
body.aai-o2 .aai-s5-filter .form-select { max-width: 280px; min-height: var(--aai-ctl-h); font-size: var(--aai-fs-base); }
/* read-only value box (label above, value in a muted field) and an image tile grid */
body.aai-o2 .aai-r3-static { min-height: var(--aai-ctl-h); display: flex; align-items: center; padding: 6px 12px; background: var(--aai-surface-alt); border: 1px solid var(--aai-line); border-radius: var(--aai-radius-ctl); color: var(--aai-text); overflow-wrap: anywhere; }
body.aai-o2 .aai-r3-card .form-label.clsBold { font-weight: 500; }
body.aai-o2 .aai-r3-media-grid { display: flex; flex-wrap: wrap; gap: 16px; }
body.aai-o2 .aai-r3-media-grid > .aai-r3-media { flex: 0 0 170px; width: 170px; height: 170px; }
body.aai-o2 .aai-r3-media-grid > .aai-r3-media > a.Info { right: 6px; padding: 0; }
body.aai-o2 .aai-r3-card textarea.form-control { height: auto; min-height: 96px; resize: vertical; }
/* R3-A read-only value box (details pages): same box as an input, text not editable */
body.aai-o2 .aai-s5-value { min-height: var(--aai-ctl-h); display: flex; align-items: center; padding: 6px 12px; background: var(--aai-surface-alt); border: 1px solid var(--aai-line); border-radius: var(--aai-radius-ctl); color: var(--aai-text); font-size: var(--aai-fs-base); overflow-wrap: anywhere; }
body.aai-o2 .aai-s5-value:empty::before { content: '\2014'; color: var(--aai-text-muted); }
/* read-only summary (dl) and section heading with accent bar (hi-fi manifest dialog) */
body.aai-o2 .aai-r3-summary { margin: 0 0 8px; padding: 14px 16px; background: var(--aai-surface-alt); border: 1px solid var(--aai-line); border-radius: var(--aai-radius-ctl); }
body.aai-o2 .aai-r3-summary dt { font-size: var(--aai-fs-sm); font-weight: 500; color: var(--aai-text-label); margin: 0; }
body.aai-o2 .aai-r3-summary dd { margin: 2px 0 0; font-weight: 600; color: var(--aai-text); overflow-wrap: anywhere; }
/* sub-heading inside a form card (Notify People): plain bold title above a dashed divider (hi-fi I-06) */
body.aai-o2 .aai-r3-sectionhead { margin: 10px 0 0; border-left: 0; font-size: var(--aai-fs-md, 15px); font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--aai-text); padding: 14px 0 0; border-top: 1px dashed var(--aai-line); }
body.aai-o2 .aai-r3-table > thead > tr > th { background: var(--aai-table-head); color: var(--aai-text); font-weight: 600; }
body.aai-o2 #cisfManifestUnavailable { margin: 0; }
body.aai-o2 .content.main-section-content > .aai-s5 { flex: 1 0 auto; }
body.aai-o2 .aai-s5 .nav-tabs { border-bottom: 1px solid var(--aai-line); padding: 0 18px; gap: 4px; }
body.aai-o2 .aai-s5 .nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--aai-text-muted); font-weight: 500; font-size: var(--aai-fs-base); padding: 12px 14px; }
body.aai-o2 .aai-s5 .nav-tabs .nav-link:hover { color: var(--aai-brand); }
body.aai-o2 .aai-s5 .nav-tabs .nav-link.active { color: var(--aai-brand); border-bottom-color: var(--aai-brand); font-weight: 600; background: transparent; }
body.aai-o2 .aai-s5 .nav-tabs .nav-link:focus-visible { outline: 2px solid var(--aai-brand); outline-offset: -2px; }
body.aai-o2 .aai-s5-sec > .nav-tabs { border-radius: var(--aai-radius-card) var(--aai-radius-card) 0 0; }
body.aai-o2 .aai-s5 .table { margin: 0; font-size: var(--aai-fs-base); }
body.aai-o2 .aai-s5 .table > thead > tr > th { background: var(--aai-table-head); font-weight: 600; color: var(--aai-text); white-space: nowrap; }
body.aai-o2 .aai-s5-decision { max-width: 600px; }
body.aai-o2 .aai-s5-gd { border: 1px solid #333; padding: 12px; max-width: 900px; font-family: var(--aai-font-mono); font-size: 12px; background: #fff; }
body.aai-o2 .aai-s5-gd h4, body.aai-o2 .aai-s5-gd .aai-s5-gd-sub { text-align: center; }
body.aai-o2 .aai-s5-gd-head { position: relative; }
body.aai-o2 .aai-s5-gd-dir { text-align: right; margin: 0; font-weight: 600; }
body.aai-o2 .aai-s5-gd-egm { text-align: right; margin: 8px 0; }
body.aai-o2 .aai-s5-gd-grid { display: grid; gap: 6px 16px; margin-bottom: 8px; }
body.aai-o2 .aai-s5-gd-grid-2 { grid-template-columns: 1fr 1fr; }
body.aai-o2 .aai-s5-gd-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
body.aai-o2 .aai-s5-gd-boxes > div { border: 1px solid #333; padding: 6px; min-height: 80px; }
body.aai-o2 .aai-s5-gd-table { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
body.aai-o2 .aai-s5-gd-table th, body.aai-o2 .aai-s5-gd-table td { border: 1px solid #333; padding: 4px 6px; vertical-align: top; }
body.aai-o2 .aai-s5-gd-table th { background: #d3d3d3; text-align: center; }
body.aai-o2 .aai-s5-gd-table .aai-s5-gd-place { width: 70px; }
body.aai-o2 .aai-s5-gd-table .aai-s5-gd-pax { width: 150px; }
body.aai-o2 .aai-s5-gd-crew { font-size: 11px; overflow-wrap: anywhere; }
body.aai-o2 .aai-s5-gd-arms { text-align: center; font-weight: 600; margin-top: 24px; font-size: 11px; }
body.aai-o2 .aai-s5-gd-small { font-size: 10px; font-weight: normal; }
body.aai-o2 .aai-s5-gd-health { display: grid; grid-template-columns: 1fr 150px; gap: 10px; margin-bottom: 8px; }
body.aai-o2 .aai-s5-gd-official { border: 1px solid #333; text-align: center; padding: 6px; min-height: 100px; }
body.aai-o2 .aai-s5-gd-declaration { margin: 8px 0 24px; font-size: 11px; }
body.aai-o2 .aai-s5-gd-sign { text-align: right; margin-bottom: 12px; }
body.aai-o2 .aai-s5-foot .btn-reject { height: var(--aai-ctl-h); }
/* .aai-hidden must beat component display rules (.aai-s5-sec, .alert, .card) but never an inline display set by .show() */
body.aai-o2 .aai-hidden.aai-hidden { display: none; }
body.aai-o2 .aai-s5-filter-card { margin-bottom: 16px; }
/* R3-B: reset the legacy Material "card" (Style.css .card: inline-block, 83 % wide, 22 px radius, floated header) for the Bootstrap 5 cards of this pattern */
:is(body.aai-o2 .aai-r3-card) { display: block; position: relative; width: 100%; margin: 0; color: var(--aai-text-body); }
body.aai-o2 .aai-r3-ico i, body.aai-o2 .aai-r3-card > .card-header i { width: auto; height: auto; line-height: 1; font-size: inherit; color: inherit; }
body.aai-o2 .aai-r3-card .card-footer { margin: 0; padding: 0; border: 0; }
/* R3-A GHA dashboard tiles (hi-fi H-01): white tile, flat 44 px icon square, label below; markup keeps .card1 / .card-header1 / .card-footer .stats a (reports-t2 spec) */
body.aai-o2 .aai-gha-dash-sec { margin: 8px 0 12px; font-size: var(--aai-fs-sm); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--aai-text-muted); }
body.aai-o2 .aai-gha-dash-row { margin: 0 0 20px; }
body.aai-o2 .aai-gha-dash .card1 { display: flex; flex-direction: column; gap: 14px; width: 100%; margin: 0; padding: 18px; background: var(--aai-surface); border: 1px solid var(--aai-line); border-radius: var(--aai-radius-card); box-shadow: none; text-align: left; transition: border-color .15s, box-shadow .15s; }
body.aai-o2 .aai-gha-dash .card1:hover { border-color: var(--aai-brand); box-shadow: var(--aai-shadow-card); }
body.aai-o2 .aai-gha-dash .card1 .card-header1 { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 44px; min-width: 44px; padding: 0; justify-content: center; border-radius: 8px; box-shadow: none; text-align: center; }
body.aai-o2 .aai-gha-dash .card1 .card-header1 i { width: 44px; height: 44px; line-height: 44px; font-size: 22px; color: #fff; }
body.aai-o2 .aai-gha-dash .card1 .card-header1 .badge { margin-right: 10px; background: rgba(0,0,0,.4); color: #fff; font-size: var(--aai-fs-md); font-weight: 700; }
body.aai-o2 .aai-gha-dash .card1 .card-header1.cardGreen { background: #4caf50; }
body.aai-o2 .aai-gha-dash .card1 .card-header1.cardOrange { background: #fb8c00; }
body.aai-o2 .aai-gha-dash .card1 .card-header1.cardPurple { background: #8e24aa; }
body.aai-o2 .aai-gha-dash .card1 .card-header1.cardBlue { background: #00acc1; }
body.aai-o2 .aai-gha-dash .card1 .card-footer { margin: 0; padding: 0; border: 0; background: transparent; }
body.aai-o2 .aai-gha-dash .card1 .card-footer .stats { font-size: var(--aai-fs-md); line-height: 1.3; }
body.aai-o2 .aai-gha-dash .card1 .card-footer .stats a { color: var(--aai-text); font-weight: 600; text-decoration: none; }
body.aai-o2 .aai-gha-dash .card1 .card-footer .stats a::after { content: ''; position: absolute; inset: 0; }
body.aai-o2 .aai-gha-dash .card1 .card-footer .stats a:focus-visible { outline: 2px solid var(--aai-brand); outline-offset: 2px; }
body.aai-o2 .content.main-section-content > .aai-s5.aai-s5-filter-card { flex: 0 0 auto; }

/* ==========================================================================
   R3-A2 (2026-10-26): trip dialogs (Add / Edit Passenger and Crew, Amend Departure) in the hi-fi dialog look (H-03 dialogs, H-31, H-10b).
   Markup: .modal.aai-dlg (header = icon square + title + close; body; footer buttons right), edit forms = form-in .aai-dlg-form > .row.g-3,
   grids = .aai-dlg-grid. No inline style in the new markup (CSP).
   ========================================================================== */
body.aai-o2 .aai-dlg .modal-dialog { max-width: 620px; }
body.aai-o2 .aai-dlg.modal-lg .modal-dialog, body.aai-o2 .modal-dialog.aai-dlg.modal-lg { max-width: 800px; }
body.aai-o2 .modal-dialog.aai-dlg { max-width: 620px; }
body.aai-o2 .modal-dialog.aai-dlg.modal-lg { max-width: 800px; }
body.aai-o2 .aai-dlg .modal-content { border-top: 3px solid var(--aai-brand); }
body.aai-o2 .aai-dlg .modal-header { display: flex; align-items: center; gap: 12px; border-bottom: 0; padding: 18px 22px 8px; }
body.aai-o2 .aai-dlg .modal-header .modal-title { flex: 1 1 auto; margin: 0; }
body.aai-o2 .aai-dlg .aai-dlg-ico { background: var(--aai-brand-soft); color: var(--aai-brand); flex: 0 0 34px; width: 34px; height: 34px; }
body.aai-o2 .aai-dlg .modal-body { padding: 10px 22px 16px; }
body.aai-o2 .aai-dlg .modal-footer { border-top: 0 !important; padding: 8px 22px 20px; justify-content: flex-end; }
body.aai-o2 .aai-dlg .modal-footer .btn { height: var(--aai-ctl-h); padding: 0 16px; }
body.aai-o2 .aai-dlg .form-label { display: block; margin: 0 0 6px; font-size: var(--aai-fs-base); font-weight: 500; color: var(--aai-text-label); }
body.aai-o2 .aai-dlg .form-control { min-height: var(--aai-ctl-h); }
body.aai-o2 .aai-dlg .k-dropdownlist, body.aai-o2 .aai-dlg .k-picker, body.aai-o2 .aai-dlg .k-dropdown, body.aai-o2 .aai-dlg .k-datepicker, body.aai-o2 .aai-dlg .k-combobox { width: 100% !important; max-width: 100%; }
body.aai-o2 .aai-dlg label.error, body.aai-o2 .aai-dlg .field-validation-error, body.aai-o2 .aai-dlg .validation-error-label { display: block; margin-top: 4px; font-size: var(--aai-fs-sm); color: var(--aai-err); }
body.aai-o2 .aai-dlg .aai-dlg-form .row { margin: 0; }
body.aai-o2 .aai-dlg .aai-dlg-form .row > [class*="col-"] { padding-left: 8px; padding-right: 8px; }
body.aai-o2 .aai-dlg .aai-dlg-info { padding: 10px 14px; border: 1px solid var(--aai-info-line); background: var(--aai-info-bg); border-radius: var(--aai-radius-ctl); color: var(--aai-text-body); font-size: var(--aai-fs-base); margin-bottom: 14px; }
body.aai-o2 .aai-dlg .aai-dlg-warn { padding: 10px 14px; border: 1px solid var(--aai-warn-line, #f5d78a); background: var(--aai-warn-bg); border-radius: var(--aai-radius-ctl); color: var(--aai-text-body); font-size: var(--aai-fs-base); }
body.aai-o2 .aai-dlg .aai-dlg-grid .k-grid { border-radius: var(--aai-radius-ctl); }
body.aai-o2 .aai-dlg-grid .aai-link-button { background: none; border: 0; padding: 0; color: var(--aai-brand); text-decoration: underline; cursor: pointer; font: inherit; }
body.aai-o2 #wp06Documents > .card-body { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
body.aai-o2 #wp06Documents #wp06AmendDeparture { margin-left: auto; }
/* ==========================================================================
   R3-B2 (2026-10-26): look pass fixes for the R3-B pages and the second batch (Question, Checklist, Incharge, IssueCreate, dashboard, issue pages, SRI, shared dialogs).
   ========================================================================== */
/* Kendo date / time pickers: the picker shell already carries .form-control (copied from the HtmlAttributes), so the inner input must not draw a second box */
body.aai-o2 .k-datepicker > input.form-control, body.aai-o2 .k-timepicker > input.form-control, body.aai-o2 .k-datetimepicker > input.form-control { border: 0; box-shadow: none; background: transparent; min-height: 0; height: auto; padding: 0 0 0 4px; }
/* Kendo check box (Show Filter, Create Another): box and text on one line */
body.aai-o2 .k-checkbox-wrap { display: inline-flex; align-items: center; vertical-align: middle; }
body.aai-o2 .k-checkbox-label { vertical-align: middle; }
body.aai-o2 .aai-r3-footer .aai-r3-actions .k-checkbox-label { margin: 0 4px 0 0; }
/* Shift Master time rows: compact controls in one line (hi-fi C-07) */
body.aai-o2 .aai-r3-form .aai-r3-time { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
body.aai-o2 .aai-r3-form .aai-r3-time > div { display: inline-flex; align-items: center; gap: 8px; }
body.aai-o2 .aai-r3-form .aai-r3-time .form-label { margin: 0; }
body.aai-o2 .aai-r3-form .aai-r3-time .k-dropdownlist { width: 108px; }
body.aai-o2 .aai-r3-form .aai-r3-time .k-timepicker { width: 150px; }
/* report filter card at xl: the date-range column is wider than the others (hi-fi C-02) */
@media (min-width: 1200px) {
  body.aai-o2 .aai-r3-filter .row > .col-xl-3 { width: 23%; }
  body.aai-o2 .aai-r3-filter .row > .col-xl-3:has(.aai-r3-daterange) { width: 31%; }
}
/* Kendo upload: plain "Select files" button, no grey drop zone (hi-fi I-02) */
body.aai-o2 .aai-r3-form .k-upload .k-dropzone { background: transparent; border: 0; padding: 0; }
body.aai-o2 .aai-dlg .alert-success, body.aai-o2 #wp06Banner.alert-success { background: var(--aai-ok-bg) !important; border: 1px solid #bfe6cc !important; color: var(--aai-ok) !important; border-radius: var(--aai-radius-ctl); }
body.aai-o2 .aai-dlg .alert-danger { background: var(--aai-err-bg) !important; border: 1px solid #f3c1c1 !important; color: var(--aai-err) !important; border-radius: var(--aai-radius-ctl); }
body.aai-o2 #wp06Banner.alert-warning { background: var(--aai-warn-bg) !important; border: 1px solid var(--aai-warn-line) !important; color: var(--aai-warn) !important; border-radius: var(--aai-radius-ctl); }body.aai-o2 .aai-r3-footer .aai-r3-actions .k-checkbox-wrap { align-self: center; margin: 0; height: 16px; }
body.aai-o2 .aai-r3-footer .aai-r3-actions .k-checkbox { margin: 0; }
body.aai-o2 .aai-r3-form .k-upload { border: 0; background: transparent; }
body.aai-o2 .aai-dlg .modal-footer > [data-bs-dismiss="modal"] { order: -1; }/* R3-A2: read-only (locked) drop-down, e.g. the Operator of an operator user (hi-fi H-03 operator user): grey box, lock icon in place of the arrow */
body.aai-o2 .aai-s5 .k-dropdownlist[aria-readonly="true"], body.aai-o2 .aai-dlg .k-dropdownlist[aria-readonly="true"] { background-color: var(--aai-surface-alt) !important; cursor: not-allowed; color: var(--aai-text-body); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 14px !important; }
body.aai-o2 .aai-s5 .k-dropdownlist[aria-readonly="true"] .k-input-button, body.aai-o2 .aai-dlg .k-dropdownlist[aria-readonly="true"] .k-input-button { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / 14px no-repeat !important; }
body.aai-o2 .aai-s5 .k-dropdownlist[aria-readonly="true"] .k-input-button .k-icon, body.aai-o2 .aai-s5 .k-dropdownlist[aria-readonly="true"] .k-input-button .k-svg-icon, body.aai-o2 .aai-dlg .k-dropdownlist[aria-readonly="true"] .k-input-button .k-icon, body.aai-o2 .aai-dlg .k-dropdownlist[aria-readonly="true"] .k-input-button .k-svg-icon { display: none; }/* R3-B2 batch 2: Question, Checklist, Incharge users */
body.aai-o2 .aai-r3-card .k-multiselect { width: 100%; max-width: 100%; }
body.aai-o2 .aai-q-option { margin: 0 -4px 10px; }
body.aai-o2 .aai-q-option > * { margin-top: 0; }
body.aai-o2 .aai-q-btn { width: var(--aai-ctl-h); height: var(--aai-ctl-h); min-height: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; line-height: 1; border-radius: var(--aai-radius-ctl); }
body.aai-o2 .aai-q-btn.btn-primary { background: var(--aai-brand); border-color: var(--aai-brand); color: #fff; }
body.aai-o2 .aai-q-btn.btn-outline-primary { background: #fff; border-color: var(--aai-brand); color: var(--aai-brand); }
body.aai-o2 .aai-r3-divider { margin: 4px 0 16px; border-top: 1px dashed var(--aai-line); }
body.aai-o2 .aai-r3-gridtitle { margin: 0 0 8px; font-size: var(--aai-fs-base); font-weight: 700; color: var(--aai-text); }
body.aai-o2 .aai-r3-movebtns { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 100%; padding-top: 34px; }
body.aai-o2 .aai-r3-hrow { margin-bottom: 4px; }
body.aai-o2 .aai-r3-card .col-form-label { font-size: var(--aai-fs-base); font-weight: 500; color: var(--aai-text-label); }
body.aai-o2 .aai-r3-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
body.aai-o2 .aai-r3b-hint, body.aai-o2 span.aai-text-label.aai-r3b-hint { display: none; margin-top: 4px; font-size: var(--aai-fs-sm); color: var(--aai-err); }
body.aai-o2 .aai-r3-count { margin-top: 12px; font-size: var(--aai-fs-sm); color: var(--aai-text-muted); }
body.aai-o2 .aai-r3-card > .aai-r3-cardfoot { display: flex; justify-content: center; padding: 14px 18px; background: #fff; border-top: 1px solid var(--aai-line-soft); border-radius: 0 0 var(--aai-radius-card) var(--aai-radius-card); }
body.aai-o2 .aai-r3-cardfoot .k-button { min-height: var(--aai-ctl-h); padding: 0 24px; font-weight: 600; }
@media (max-width: 991.98px) { body.aai-o2 .aai-r3-movebtns { flex-direction: row; padding-top: 0; min-height: 0; } }

/* R3-B2 IMS dashboard (hi-fi I-24): filter card above one "Dashboard" card holding the three KPI tiles; layout.spec pins .col-lg-4-1 (three in a row from 1200 px) and the 174 px date pickers */
body.aai-o2 section#dateFilter.aai-ims-filter { padding: 0; text-align: left; width: auto; margin-bottom: 16px; }
body.aai-o2 .aai-ims-filters { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 18px; }
body.aai-o2 .aai-ims-f { display: flex; flex-direction: column; gap: 6px; flex: 1 1 150px; min-width: 150px; max-width: 174px; }
body.aai-o2 .aai-ims-f .form-label { margin: 0; }
body.aai-o2 .aai-ims-f .k-dropdownlist, body.aai-o2 .aai-ims-f .k-datepicker, body.aai-o2 .aai-ims-f .k-picker { width: 100%; }
body.aai-o2 .aai-ims-board { margin-bottom: 16px; }
body.aai-o2 .aai-ims-board > .card-body { padding: 18px; }
body.aai-o2 .aai-r3-cardhead::before { content: ""; position: absolute; left: 18px; top: 50%; width: 3px; height: 18px; margin-top: -9px; border-radius: 2px; background: var(--aai-brand); }
body.aai-o2 .aai-ims-board #statsContainer { margin: 0; justify-content: space-between; row-gap: 16px; }
body.aai-o2 .aai-ims-board .demo-section.k-content { margin: 0; padding: 18px 20px; border: 1px solid var(--aai-line-soft); border-radius: var(--aai-radius-card); box-shadow: none; background: #fff; }
body.aai-o2 .aai-ims-board .section-header-title { margin: 0 0 6px; font-size: var(--aai-fs-lg); font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--aai-text); }
body.aai-o2 .aai-ims-board .statsContainerAlt { margin: 0; }
/* Open issues dialog (IssueCreate): hi-fi dialog head with icon, filter toggle right, buttons right */
body.aai-o2 .aai-r3-modal .modal-content { border: 0; border-top: 3px solid var(--aai-brand); border-radius: var(--aai-radius-card); box-shadow: var(--aai-shadow-card); }
body.aai-o2 .aai-r3-modal .modal-header { display: flex; align-items: center; gap: 12px; padding: 14px 18px 8px; border-bottom: 0; }
body.aai-o2 .aai-r3-modal .modal-title { flex: 1 1 auto; font-size: var(--aai-fs-lg); font-weight: 700; color: var(--aai-text); }
body.aai-o2 .aai-r3-modal .modal-body { padding: 8px 18px 4px; }
body.aai-o2 .aai-r3-modal .modal-footer { border-top: 0; padding: 12px 18px 18px; gap: 10px; }
body.aai-o2 .aai-r3-modal .modal-footer .k-button { min-height: var(--aai-ctl-h); padding: 0 20px; font-weight: 600; }
body.aai-o2 .aai-r3-toolbar--end { justify-content: flex-end; }
/* R3-B2: the compat layer zeroes .row margins, so a .row.g-3 inside a card pushed its fields 8 px right of the card padding and added a 16 px gap above the first label; restate the Bootstrap gutter compensation (hi-fi: fields align with the card icon, 24 px under the card head) */
body.aai-o2 .aai-r3-card > .card-body > .row.g-3, body.aai-o2 .aai-r3-card .col-12 > .row.g-3 { margin: -16px -8px 0; }
body.aai-o2 .aai-r3-card .row.g-3.aai-r3-hrow { margin: 0 -8px 12px; }
body.aai-o2 .aai-r3-card .row.g-3.aai-r3-hrow > * { margin-top: 0; }
body.aai-o2 .aai-r3-card > .card-header.aai-r3-cardhead { padding-left: 28px; }
body.aai-o2 .aai-r3-card .k-multiselect.form-control { padding: 0; min-height: var(--aai-ctl-h); height: auto; }
/* R3-B2 Issue view (hi-fi I-17): action bar, detail cards, image tiles, comment boxes */
body.aai-o2 .aai-r3-actionbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 16px; background: #fff; border: 1px solid var(--aai-line-soft); border-radius: var(--aai-radius-card); box-shadow: var(--aai-shadow-card); }
body.aai-o2 .aai-r3-actionbar-group { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
body.aai-o2 .aai-r3-actionbar .k-button { min-height: var(--aai-ctl-h); padding: 0 18px; font-weight: 600; margin: 0; }
body.aai-o2 .aai-r3-card textarea.form-control[readonly], body.aai-o2 .aai-r3-card input.form-control[readonly] { background: var(--aai-surface-alt, #f4f5f8); }
body.aai-o2 .aai-r3-media > img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.aai-o2 .aai-r3-comments { display: flex; flex-direction: column; gap: 10px; max-width: 900px; }
body.aai-o2 .aai-r3-comment { padding: 10px 14px; border: 1px solid var(--aai-line-soft); border-radius: var(--aai-radius-ctl); background: #fff; }
body.aai-o2 .aai-r3-comment-text { white-space: pre-wrap; color: var(--aai-text); font-size: var(--aai-fs-md, 15px); }
body.aai-o2 .aai-r3-comment-meta { margin-top: 4px; color: var(--aai-text-muted); font-size: var(--aai-fs-sm); }
body.aai-o2 .aai-r3-addcomment { margin-top: 14px; }
body.aai-o2 .aai-r3-addcomment .btn { display: inline-flex; align-items: center; gap: 4px; min-height: var(--aai-ctl-h); border-color: var(--aai-line); color: var(--aai-text); background: #fff; font-weight: 600; }
body.aai-o2 .aai-r3-addcomment-box { margin-top: 14px; max-width: 900px; }
body.aai-o2 .aai-r3-addcomment-buttons { display: flex; gap: 10px; margin-top: 10px; }
/* R3-B2 Assigned / Created issues (hi-fi I-15, I-16): filter card and five status tiles (.col-md-2-5 is pinned by layout.spec: five in one row from 992 px) */
body.aai-o2 .aai-ims-f--action { align-self: flex-end; flex: 0 0 auto; min-width: 0; }
body.aai-o2 .aai-ims-f:has(#ddlAssetCategory) { flex-basis: 260px; max-width: 260px; }
body.aai-o2 .main-section-content:has(> .aai-ims-filter) { margin-bottom: 0; padding-bottom: 0; }
body.aai-o2 .aai-ims-f .k-invalid-msg { display: block; }
body.aai-o2 .col-md-2-5 { padding: 0 6px; }
body.aai-o2 .col-md-2-5 > .card { --aai-tile: #7c3aed; --aai-tile-tint: #f1ebfd; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; align-items: center; width: auto; margin: 0 0 12px; padding: 12px 14px; background: #fff; border: 1px solid var(--aai-line-soft); border-left: 4px solid var(--aai-tile); border-radius: var(--aai-radius-card); box-shadow: none; }
body.aai-o2 .col-md-2-5 > .card:has(.cardBlue) { --aai-tile: #2563eb; --aai-tile-tint: #e8effd; }
body.aai-o2 .col-md-2-5 > .card:has(.cardGreen) { --aai-tile: #2e7d32; --aai-tile-tint: #e6f3e7; }
body.aai-o2 .col-md-2-5 > .card:has(.cardOrange) { --aai-tile: #e07b0a; --aai-tile-tint: #fdf0e0; }
body.aai-o2 .col-md-2-5 > .card:has(.cardRed) { --aai-tile: #d93a30; --aai-tile-tint: #fdeceb; }
body.aai-o2 .col-md-2-5 > .card > .card-header { grid-row: 1 / span 2; grid-column: 1; float: none; margin: 0; padding: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--aai-tile-tint); box-shadow: none; }
body.aai-o2 .col-md-2-5 > .card > .card-header i { font-size: 20px; line-height: 1; width: auto; height: auto; color: var(--aai-tile); }
body.aai-o2 .col-md-2-5 > .card > .card-content { grid-column: 2; display: flex; flex-direction: column-reverse; padding: 0; text-align: left; }
body.aai-o2 .col-md-2-5 > .card > .card-content .category { margin: 0; font-size: var(--aai-fs-sm); color: var(--aai-text-muted); }
body.aai-o2 .col-md-2-5 > .card > .card-content h3 { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.15; color: var(--aai-text); }
body.aai-o2 .col-md-2-5 > .card > .card-footer { grid-column: 2; margin: 0; padding: 0; border-top: 0; background: transparent; }
body.aai-o2 .col-md-2-5 > .card > .card-footer .stats p { margin: 0; line-height: 1.2; }
/* R3-B2 Rank Hierarchy (hi-fi C-09): list card head, grid with the arrow column, Save in the card footer */
body.aai-o2 .aai-r3-card > .card-header.aai-r3-listhead { display: block; padding: 10px 18px; }
body.aai-o2 .aai-r3-arrowcol { text-align: center; margin-top: 5%; }
body.aai-o2 .aai-r3-arrowrow { height: 45px; }
body.aai-o2 .aai-r3-card > .aai-r3-cardfoot.aai-r3-cardfoot--end { justify-content: flex-end; }
body.aai-o2 .aai-r3-listhead .aai-list-title { display: flex; align-items: center; gap: 10px; }
/* R3-B2 SRI circular viewer (hi-fi C-13): card with Back, then the PDF frame */
body.aai-o2 .aai-r3-pdfcard { overflow: hidden; }
body.aai-o2 .aai-r3-pdfhead { padding: 12px 18px; }
body.aai-o2 .aai-r3-pdfhead .k-button { display: inline-flex; align-items: center; gap: 6px; min-height: var(--aai-ctl-h); padding: 0 16px; font-weight: 600; }
body.aai-o2 .aai-r3-pdfframe { display: block; width: 100%; height: calc(100vh - 260px); min-height: 500px; border: 0; background: #525659; }
/* Prohibited items image dialog body (hi-fi C-02 view photo): bold right-aligned labels, values left */
body.aai-o2 .aai-r3-dl { padding: 4px 0; }
body.aai-o2 .aai-r3-dlrow { margin: 0 0 10px; align-items: flex-start; }
body.aai-o2 .aai-r3-dlrow > * { margin-top: 0; }
body.aai-o2 .aai-r3-dt { text-align: right; font-weight: 700; color: var(--aai-text); }
body.aai-o2 .photo-unavailable { display: none; padding: 8px; color: var(--aai-text-muted); }
body.aai-o2 .aai-dlg .modal-dialog.modal-xl { max-width: 1000px; }

/* Closing round (2026-10-26): Completed inspections view, question / answer blocks (hi-fi I-13 view) */
body.aai-o2 .aai-r3-qa { padding: 12px 14px; margin: 0 0 12px; border: 1px solid var(--aai-line-soft); border-radius: var(--aai-radius-ctl); background: var(--aai-surface); }
body.aai-o2 .aai-r3-qa-q { font-weight: 600; color: var(--aai-text); }
body.aai-o2 .aai-r3-qa-a { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin-top: 8px; color: var(--aai-text); }
body.aai-o2 .aai-r3-qa-a .form-check { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 0; min-height: 0; }
body.aai-o2 .aai-r3-qa-a .form-check .form-check-input { float: none; margin: 0; }
body.aai-o2 #dvViewEscalation .table { margin: 0; }