/* =====================================================================================================================
   AAI IMS - user-selectable themes and density (UI polish 2026-10-30, owner choice: Classic + 4 themes)
   ---------------------------------------------------------------------------------------------------------------------
   * Loaded by _Layout after aai-o2-pages.css and BEFORE aai-o2-fixes.css (which must stay last).
   * aai-shell.js sets html[data-aai-theme] / html[data-aai-density] from this browser's choice (header display menu).
   * Classic (default) and Comfortable set NO attribute, so every rule below that is gated by an attribute does not apply
     and the portal looks exactly as before. Only section 1 (menu icons) applies to every theme.
   * CSS only, no inline styles (CSP). Colours follow the approved canvas boards (V2Themed options 5, 6, 17 and V2List).
   ===================================================================================================================== */

/* ---------- 1. Menu icons (all themes): top-level SVG icons drawn with a CSS mask in the current text colour ---------- */
body.aai-o2 .sidebar-main .navigation > li#organization > a > i:first-child,
body.aai-o2 .sidebar-main .navigation > li#IMS > a > i:first-child,
body.aai-o2 .sidebar-main .navigation > li#phaseTwo > a > i:first-child,
body.aai-o2 .sidebar-main .navigation > li#CISF > a > i:first-child {
    display: inline-block; width: 20px; height: 20px; background-color: currentColor;
    -webkit-mask: var(--aai-menu-icon) center / 18px 18px no-repeat; mask: var(--aai-menu-icon) center / 18px 18px no-repeat;
}
body.aai-o2 .sidebar-main .navigation > li#organization > a > i:first-child::before,
body.aai-o2 .sidebar-main .navigation > li#IMS > a > i:first-child::before,
body.aai-o2 .sidebar-main .navigation > li#phaseTwo > a > i:first-child::before,
body.aai-o2 .sidebar-main .navigation > li#CISF > a > i:first-child::before { content: none; }
body.aai-o2 .sidebar-main .navigation > li#organization > a > i:first-child { --aai-menu-icon: url('icons/aai-menu/organization.svg'); }
body.aai-o2 .sidebar-main .navigation > li#IMS > a > i:first-child { --aai-menu-icon: url('icons/aai-menu/ims.svg'); }
body.aai-o2 .sidebar-main .navigation > li#phaseTwo > a > i:first-child { --aai-menu-icon: url('icons/aai-menu/gha.svg'); }
body.aai-o2 .sidebar-main .navigation > li#CISF > a > i:first-child { --aai-menu-icon: url('icons/aai-menu/cisf.svg'); }

/* group chevron (owner item 8 "collapse icon missing"): the markup asks for Linearicons (lnr-chevron-left), which the portal never loads,
   so the chevron was blank. Drawn here as a mask; the existing rotate rules (open group = pointing down) keep working. */
body.aai-o2 .sidebar-main .navigation li > a > i.icon-submenu.lnr {
    display: inline-block; width: 14px; height: 14px; background-color: currentColor;
    -webkit-mask: url('icons/aai-menu/chevron.svg') center / 14px 14px no-repeat; mask: url('icons/aai-menu/chevron.svg') center / 14px 14px no-repeat;
}
body.aai-o2 .sidebar-main .navigation li > a > i.icon-submenu.lnr::before { content: none; }

/* ---------- 2. Theme tokens ---------- */
/* menu variables used by section 3 (only the themes set them) */
html[data-aai-theme="indigo"] {
    --aai-sidebar-bg: linear-gradient(180deg, #1b1f5e 0%, #232878 55%, #2e3192 100%);
    --aai-sidebar-border: rgba(255, 255, 255, .10);
    --aai-nav-top: #ffffff; --aai-nav-icon: #c7d2fe; --aai-nav-sub: #d6dcf5; --aai-nav-hover: rgba(255, 255, 255, .10); --aai-nav-hover-fg: #ffffff;
    --aai-nav-group: rgba(255, 255, 255, .07); --aai-nav-group-line: rgba(255, 255, 255, .12); --aai-nav-group-fg: #ffffff; --aai-nav-tree: rgba(255, 255, 255, .22);
    --aai-nav-active-bg: #ffffff; --aai-nav-active-fg: #2e3192; --aai-nav-active-shadow: 0 4px 12px rgba(0, 0, 0, .22);
    /* list-bar buttons (Excel / PDF), see aai-o2-fixes.css L2 */
    --aai-x-xls-bg: #e7f6f0; --aai-x-xls-line: #a7dcc6; --aai-x-xls-fg: #0f6e4f; --aai-x-xls-bg-h: #d2eee2; --aai-x-pdf-bg: #fdecf3; --aai-x-pdf-line: #f4bcd2; --aai-x-pdf-fg: #a8235a; --aai-x-pdf-bg-h: #f9d6e4;
}
html[data-aai-theme="navy"] {
    --aai-sidebar-bg: linear-gradient(180deg, #1c2541 0%, #23305a 100%);
    --aai-sidebar-border: rgba(255, 255, 255, .10);
    --aai-nav-top: #ffffff; --aai-nav-icon: #a9b4d0; --aai-nav-sub: #d3d9ea; --aai-nav-hover: rgba(255, 255, 255, .08); --aai-nav-hover-fg: #ffffff;
    --aai-nav-group: rgba(255, 255, 255, .06); --aai-nav-group-line: rgba(255, 255, 255, .10); --aai-nav-group-fg: #ffffff; --aai-nav-tree: rgba(255, 255, 255, .18);
    --aai-nav-active-bg: rgba(245, 158, 11, .16); --aai-nav-active-fg: #fde7bf; --aai-nav-active-shadow: inset 3px 0 0 #f59e0b;
    /* list-bar buttons (Excel / PDF), see aai-o2-fixes.css L2 */
    --aai-x-xls-bg: #eaf5ec; --aai-x-xls-line: #b6dcbd; --aai-x-xls-fg: #1f6b33; --aai-x-xls-bg-h: #d6ecda; --aai-x-pdf-bg: #fff1e6; --aai-x-pdf-line: #f8c99e; --aai-x-pdf-fg: #a3410a; --aai-x-pdf-bg-h: #fde0c7;
}
html[data-aai-theme="skymist"] {
    --aai-brand: #1e5fbf; --aai-brand-hover: #184f9f; --aai-brand-active: #133f80; --aai-brand-soft: #e8f1fc; --aai-brand-ring: rgba(30, 95, 191, .16);
    --aai-canvas: #f5f9fe; --aai-info: #1e5fbf; --aai-info-bg: #f2f8ff; --aai-info-line: #bcd3f1;
    --bs-link-color-rgb: 30, 95, 191; --bs-link-hover-color-rgb: 24, 79, 159;
    --aai-sidebar-bg: linear-gradient(180deg, #ffffff 0%, #e6f0fb 100%);
    --aai-sidebar-border: #d7e4f4;
    --aai-nav-top: #0b3a7a; --aai-nav-icon: #3b6db3; --aai-nav-sub: #1e3a5f; --aai-nav-hover: rgba(30, 95, 191, .08); --aai-nav-hover-fg: #0b3a7a;
    --aai-nav-group: rgba(30, 95, 191, .06); --aai-nav-group-line: #d7e4f4; --aai-nav-group-fg: #0b3a7a; --aai-nav-tree: #bcd3f1;
    --aai-nav-active-bg: #1e5fbf; --aai-nav-active-fg: #ffffff; --aai-nav-active-shadow: 0 4px 10px rgba(30, 95, 191, .25);
    /* list-bar buttons (Excel / PDF), see aai-o2-fixes.css L2 */
    --aai-x-xls-bg: #e6f6f4; --aai-x-xls-line: #a9dcd5; --aai-x-xls-fg: #0f6b63; --aai-x-xls-bg-h: #d0eeea; --aai-x-pdf-bg: #fdecee; --aai-x-pdf-line: #f6c1c8; --aai-x-pdf-fg: #b4233c; --aai-x-pdf-bg-h: #fad5db;
}
html[data-aai-theme="skyblue"] {
    --aai-brand: #1e5fbf; --aai-brand-hover: #184f9f; --aai-brand-active: #133f80; --aai-brand-soft: #e6f1fd; --aai-brand-ring: rgba(30, 95, 191, .16);
    --aai-canvas: #f4f9fe; --aai-info: #1e5fbf; --aai-info-bg: #f2f8ff; --aai-info-line: #b7d4f2;
    --bs-link-color-rgb: 30, 95, 191; --bs-link-hover-color-rgb: 24, 79, 159;
    --aai-sidebar-bg: linear-gradient(180deg, #acd3f4 0%, #96c4ef 100%);
    --aai-sidebar-border: rgba(11, 58, 107, .15);
    --aai-nav-top: #082c52; --aai-nav-icon: #0f4c8a; --aai-nav-sub: #0b3a6b; --aai-nav-hover: rgba(255, 255, 255, .40); --aai-nav-hover-fg: #082c52;
    --aai-nav-group: rgba(255, 255, 255, .32); --aai-nav-group-line: rgba(11, 58, 107, .15); --aai-nav-group-fg: #082c52; --aai-nav-tree: rgba(11, 58, 107, .25);
    --aai-nav-active-bg: #ffffff; --aai-nav-active-fg: #0f4c8a; --aai-nav-active-shadow: 0 4px 10px rgba(11, 58, 107, .18);
    /* list-bar buttons (Excel / PDF), see aai-o2-fixes.css L2 */
    --aai-x-xls-bg: #e8f7f2; --aai-x-xls-line: #a6dccb; --aai-x-xls-fg: #0e6b55; --aai-x-xls-bg-h: #d0efe5; --aai-x-pdf-bg: #fdeef0; --aai-x-pdf-line: #f5bfc8; --aai-x-pdf-fg: #b02a43; --aai-x-pdf-bg-h: #fad8de;
}

/* ---------- 3. Menu (every theme except Classic) ---------- */
html[data-aai-theme] body.aai-o2 .sidebar.sidebar-main { color: var(--aai-nav-sub); scrollbar-color: var(--aai-nav-tree) transparent; }   /* scroll bar: fixes.css paints it indigo, invisible on the dark menus */
html[data-aai-theme] body.aai-o2 .sidebar.sidebar-main::-webkit-scrollbar-thumb { background: var(--aai-nav-tree); }
html[data-aai-theme] body.aai-o2 .sidebar-main .navigation > li > a { color: var(--aai-nav-top); }
html[data-aai-theme] body.aai-o2 .sidebar-main .navigation > li > a > i:first-child,
html[data-aai-theme] body.aai-o2 .sidebar-main .navigation > li > a > i.icon-submenu { color: var(--aai-nav-icon); }
html[data-aai-theme] body.aai-o2 .sidebar-main .navigation > li ul li a { color: var(--aai-nav-sub); }
html[data-aai-theme] body.aai-o2 .sidebar-main .navigation > li ul li a > i.icon-submenu { color: var(--aai-nav-icon); }
html[data-aai-theme] body.aai-o2 .sidebar-main .navigation li a:hover,
html[data-aai-theme] body.aai-o2 .sidebar-main .navigation li a:focus { background: var(--aai-nav-hover); color: var(--aai-nav-hover-fg); }
/* open group */
html[data-aai-theme] body.aai-o2 .sidebar-main .navigation > li.active:has(> ul) { background: var(--aai-nav-group); border-color: var(--aai-nav-group-line); box-shadow: none; }
html[data-aai-theme] body.aai-o2 .sidebar-main .navigation > li.active:has(> ul) > a { color: var(--aai-nav-group-fg); border-bottom-color: var(--aai-nav-group-line); }
html[data-aai-theme] body.aai-o2 .sidebar-main .navigation > li.active:has(> ul) > a > i:first-child { color: var(--aai-nav-group-fg); }
html[data-aai-theme] body.aai-o2 .sidebar-main .navigation > li ul li.active:has(> ul) > a { color: var(--aai-nav-group-fg); }
html[data-aai-theme] body.aai-o2 .sidebar-main .navigation > li > ul > li > ul { border-left-color: var(--aai-nav-tree); }
html[data-aai-theme] body.aai-o2 .sidebar-main .navigation > li > ul li.active:has(> ul):not(:has(li.active)) > a { background: var(--aai-nav-hover); }
/* active page */
html[data-aai-theme] body.aai-o2 .sidebar-main .navigation li.active:not(:has(> ul)) > a,
html[data-aai-theme] body.aai-o2 .sidebar-main .navigation li.active:not(:has(> ul)) > a:hover {
    background: var(--aai-nav-active-bg); color: var(--aai-nav-active-fg); box-shadow: var(--aai-nav-active-shadow);
}
html[data-aai-theme] body.aai-o2 .sidebar-main .navigation > li.active:not(:has(> ul)) > a > i:first-child { color: var(--aai-nav-active-fg); }
/* collapsed rail: the hover flyout keeps a light card in every theme */
html[data-aai-theme] body.aai-o2.sidebar-xs .sidebar-main .navigation > li.active:has(> ul) > a { background: var(--aai-nav-active-bg); color: var(--aai-nav-active-fg); }

/* brand strip above the menu (same background as the menu) */
html[data-aai-theme] body.aai-o2 .aai-header .navbar-header.aai-header-brand { border-bottom-color: var(--aai-sidebar-border); }
html[data-aai-theme] body.aai-o2 .aai-header .aai-collapse-btn { border-color: var(--aai-nav-group-line); background: var(--aai-nav-group); color: var(--aai-nav-top); }
html[data-aai-theme] body.aai-o2 .aai-header .aai-collapse-btn:hover { background: var(--aai-nav-hover); color: var(--aai-nav-hover-fg); }
/* dark menus: the AAI logo is drawn for a light background, so it sits on a white chip */
html[data-aai-theme="indigo"] body.aai-o2 .aai-header .aai-brand-logo img,
html[data-aai-theme="navy"] body.aai-o2 .aai-header .aai-brand-logo img { background: #fff; border-radius: 8px; padding: 2px 6px; height: 38px; box-sizing: border-box; }
html[data-aai-theme="navy"] body.aai-o2 .aai-header { box-shadow: inset 0 -2px 0 #f59e0b; }

/* ---------- 4. Header display menu (all themes) ---------- */
body.aai-o2 .aai-header .aai-disp { position: relative; display: inline-flex; }
body.aai-o2 .aai-header .aai-disp-menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 1050; min-width: 210px; padding: 6px;
    background: #fff; border: 1px solid var(--aai-line); border-radius: 10px; box-shadow: var(--aai-shadow-pop);
}
body.aai-o2 .aai-header .aai-disp-menu.aai-hidden { display: none; }
body.aai-o2 .aai-header .aai-disp-head {
    margin: 6px 8px 4px; font-size: var(--aai-fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--aai-text-muted);
}
body.aai-o2 .aai-header .aai-disp-opt {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 32px; padding: 0 10px; border: 0; border-radius: 6px;
    background: transparent; color: var(--aai-text-body); font: inherit; font-size: var(--aai-fs-base); text-align: left; cursor: pointer;
}
body.aai-o2 .aai-header .aai-disp-opt:hover, body.aai-o2 .aai-header .aai-disp-opt:focus-visible { background: var(--aai-surface-alt); outline: none; }
body.aai-o2 .aai-header .aai-disp-opt[aria-checked="true"] { background: var(--aai-brand-soft); color: var(--aai-brand); font-weight: 600; }
body.aai-o2 .aai-header .aai-disp-opt[aria-checked="true"]::after { content: ""; margin-left: auto; width: 6px; height: 10px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
body.aai-o2 .aai-header .aai-swatch { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(15, 23, 42, .15); }
body.aai-o2 .aai-header .aai-swatch--classic { background: linear-gradient(135deg, #e3e8f2 50%, #2e3192 50%); }
body.aai-o2 .aai-header .aai-swatch--indigo { background: linear-gradient(135deg, #1b1f5e 50%, #2e3192 50%); }
body.aai-o2 .aai-header .aai-swatch--skymist { background: linear-gradient(135deg, #e6f0fb 50%, #1e5fbf 50%); }
body.aai-o2 .aai-header .aai-swatch--navy { background: linear-gradient(135deg, #1c2541 50%, #f59e0b 50%); }
body.aai-o2 .aai-header .aai-swatch--skyblue { background: linear-gradient(135deg, #acd3f4 50%, #1e5fbf 50%); }

/* ---------- 5. Compact density (html[data-aai-density="compact"]) ---------- */
html[data-aai-density="compact"] { --aai-ctl-h: 32px; --aai-header-h: 56px; }
html[data-aai-density="compact"] body.aai-o2 .k-grid td,
html[data-aai-density="compact"] body.aai-o2 .k-grid .k-table-td { height: 32px; padding-left: 10px; padding-right: 10px; }
html[data-aai-density="compact"] body.aai-o2 .k-grid th,
html[data-aai-density="compact"] body.aai-o2 .k-grid .k-table-th { padding-left: 10px; padding-right: 10px; }
html[data-aai-density="compact"] body.aai-o2 .sidebar-main .navigation > li > a { min-height: 36px; }
html[data-aai-density="compact"] body.aai-o2 .sidebar-main .navigation > li ul li a { min-height: 30px; }
html[data-aai-density="compact"] body.aai-o2 .card-body { padding: 12px 14px; }