/*
 * FleetShell.css - the new look's top bar and side menu (YUI retirement)
 *
 * Shared by every admin page that shows the new frame:
 *   - new-look pages (FleetIncludeControl) - loaded before FleetAdmin.css, inside body.fleet-admin's .fa-shell grid;
 *   - the older YUI pages with the hybrid frame (YahooUIIncludeControl, SysCode NewLookFrame) - <html> has
 *     fa-hybrid, the YUI layout still places the regions and FleetShell.js gives #divLayoutTop the class fa-topbar
 *     and #divLayoutLeft the class fa-sidenav. No Bootstrap there, so nothing here may rely on it.
 * The header and menu markup is the same on both (PageHeaderControl, PrimarySideMenuControl).
 *
 * Contents
 *   1. Design tokens and colour themes (change colours/sizes here only)
 *   2. Top bar buttons and the colour theme menu
 *   3. Top bar and side menu
 *   4. Hybrid frame on the YUI pages (html.fa-hybrid)
 */

/* ---------- 1. Design tokens and colour themes ---------- */
/*
 * Colour themes - each user picks one with the palette button in the top bar (FleetShell.js).
 * The theme is a class on <html>: none = Light (default), fa-theme-grey, fa-theme-slate. Only the
 * frame colours (side menu, panel/dialog headers, grid headers, primary blue) differ between themes;
 * everything else uses the same tokens. To add a theme: add a :root.fa-theme-<name> block below and
 * its entry in FleetShell.js THEMES.
 */
:root {
    --fa-slate-900: #1e293b;
    --fa-slate-800: #273449;
    --fa-slate-700: #334155;
    --fa-slate-500: #64748b;
    --fa-slate-300: #cbd5e1;
    --fa-slate-200: #e2e8f0;
    --fa-slate-100: #f1f5f9;
    --fa-slate-50: #f8fafc;

    /* Light (default) - closest to the FMS portal: white menu, FMS blue, light blue headers */
    --fa-primary: #296cc3;
    --fa-primary-hover: #2647a0;
    --fa-primary-soft: #e6f0ff;

    --fa-nav-bg: #ffffff;
    --fa-nav-border: var(--fa-border);
    --fa-nav-text: #1f2937;
    --fa-nav-icon: #296cc3;
    --fa-nav-heading: #2647a0;
    --fa-nav-hover: #eef4fd;
    --fa-nav-divider: #e2e8f0;
    --fa-nav-selected-bg: #e6f0ff;
    --fa-nav-selected-text: #2647a0;
    --fa-nav-selected-bar: #da291c;      /* ARC red, as in the FMS portal */

    --fa-head-bg: #eef4fd;
    --fa-head-text: #1e3a7a;
    --fa-head-border: #cde3ff;
    --fa-head-btn-hover: #d6e6ff;
    --fa-head-close-filter: none;        /* dialog X button: dark on light headers */

    --fa-grid-head-bg: #f1f5fb;
    --fa-grid-head-text: #1e3a7a;

    --fa-success: #15803d;
    --fa-success-soft: #dcfce7;
    --fa-warning: #b45309;
    --fa-warning-soft: #fef3c7;
    --fa-danger: #b91c1c;
    --fa-danger-soft: #fee2e2;
    --fa-text: #1f2937;
    --fa-text-muted: #64748b;
    --fa-border: #d8dee8;
    --fa-bg: #f4f6f9;
    --fa-surface: #ffffff;

    --fa-font-size: 13px;
    --fa-grid-font-size: 12.5px;
    --fa-topbar-height: 46px;
    --fa-sidenav-width: 176px;
    --fa-radius: 6px;

    /* Bootstrap picks these up */
    --bs-body-font-size: var(--fa-font-size);
    --bs-body-color: var(--fa-text);
    --bs-primary: var(--fa-primary);
    --bs-primary-rgb: 41, 108, 195;
    --bs-link-color: var(--fa-primary);
    --bs-link-color-rgb: 41, 108, 195;
    --bs-link-hover-color: var(--fa-primary-hover);
    --bs-border-color: var(--fa-border);
    --bs-border-radius: var(--fa-radius);
}

/* Grey - modern neutral greys, colour only for actions and the selected item */
:root.fa-theme-grey {
    --fa-primary: #2563eb;
    --fa-primary-hover: #1d4ed8;
    --fa-primary-soft: #eef2ff;
    --bs-primary-rgb: 37, 99, 235;
    --bs-link-color-rgb: 37, 99, 235;

    --fa-bg: #f1f2f4;
    --fa-border: #d9dce1;
    --fa-text-muted: #6b7280;

    --fa-nav-bg: #e2e5e9;
    --fa-nav-border: #d1d5db;
    --fa-nav-text: #1f2937;
    --fa-nav-icon: #4b5563;
    --fa-nav-heading: #374151;
    --fa-nav-hover: #d5d9df;
    --fa-nav-divider: #cbd0d7;
    --fa-nav-selected-bg: #ffffff;
    --fa-nav-selected-text: #111827;
    --fa-nav-selected-bar: #2563eb;

    --fa-head-bg: #e9ecef;
    --fa-head-text: #111827;
    --fa-head-border: #d5d9df;
    --fa-head-btn-hover: #dadee3;
    --fa-head-close-filter: none;

    --fa-grid-head-bg: #eceef1;
    --fa-grid-head-text: #374151;
}

/* Slate - dark menu and headers (the first prototype colours) */
:root.fa-theme-slate {
    --fa-primary: #1d4ed8;
    --fa-primary-hover: #1e40af;
    --fa-primary-soft: #dbeafe;
    --bs-primary-rgb: 29, 78, 216;
    --bs-link-color-rgb: 29, 78, 216;

    --fa-nav-bg: #3b4a60;
    --fa-nav-border: #3b4a60;
    --fa-nav-text: #f1f5f9;
    --fa-nav-icon: #d3dbe6;
    --fa-nav-heading: #ffffff;
    --fa-nav-hover: #46566e;
    --fa-nav-divider: #52627a;
    --fa-nav-selected-bg: #2563eb;
    --fa-nav-selected-text: #ffffff;
    --fa-nav-selected-bar: #93c5fd;

    --fa-head-bg: #3b4a60;
    --fa-head-text: #ffffff;
    --fa-head-border: #3b4a60;
    --fa-head-btn-hover: #52627a;
    --fa-head-close-filter: invert(1) grayscale(100%) brightness(200%);

    --fa-grid-head-bg: #f1f5f9;
    --fa-grid-head-text: #334155;
}

/* ---------- 2. Top bar buttons and the colour theme menu ---------- */
/* FleetShell.js - the menu is placed on the page body (position: fixed) so no frame region can clip it */
.fa-shell-btn {
    border: 0;
    background: transparent;
    color: var(--fa-slate-700);
    padding: 3px 7px;
    border-radius: 4px;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.fa-shell-btn:hover,
.fa-shell-btn[aria-expanded="true"] {
    background: var(--fa-slate-200);
    color: var(--fa-primary);
}

.fa-theme-menu {
    flex: 0 0 auto;
}

.fa-shell-menu {
    display: none;
    position: fixed;
    z-index: 3000;
    min-width: 190px;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: #ffffff;
    border: 1px solid var(--fa-border);
    border-radius: var(--fa-radius);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.15);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: var(--fa-font-size);
    line-height: 1.5;
    color: var(--fa-text);
}

.fa-shell-menu.fa-open {
    display: block;
}

.fa-shell-menu .fa-shell-menu-head {
    padding: 4px 12px 6px 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fa-text-muted);
}

.fa-shell-menu button,
.fa-shell-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: 0;
    background: transparent;
    padding: 5px 12px;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.fa-shell-menu button:hover,
.fa-shell-menu a:hover {
    background: var(--fa-slate-100);
    color: inherit;
    text-decoration: none;
}

.fa-shell-menu a {
    text-decoration: none;
    box-sizing: border-box;
}

.fa-shell-menu a .bi {
    width: 16px;
    color: var(--fa-text-muted);
}

.fa-shell-menu .fa-shell-menu-divider {
    border-top: 1px solid var(--fa-border);
    margin: 4px 0;
}

/* The logged-in name: opens Your Profile, Help and Log Out (FleetShell.js buildUserMenu) */
.fa-topbar .fa-user-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    font-size: var(--fa-font-size);
    font-weight: 600;
    color: var(--fa-slate-900);
    padding: 4px 8px;
    white-space: nowrap;
}

.fa-topbar .fa-user-btn .bi-person-circle {
    font-size: 17px;
    color: var(--fa-slate-500);
}

.fa-topbar .fa-user-btn .fa-user-caret {
    font-size: 10px;
    color: var(--fa-slate-500);
}

/* "Back to Global Division" as a globe button next to the division list (FleetShell.js buildGlobalButton).
   .fa-topbar twice: stronger than the hybrid frame's reset of the old header (section 4) and Common.css. */
.fa-topbar.fa-topbar #pageHeaderBlock a.global.fa-global-btn {
    order: 2;
    position: static;
    top: auto;
    right: auto;
    padding: 0;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--fa-border);
    border-radius: var(--fa-radius);
    color: var(--fa-primary);
    background: var(--fa-surface);
    font-size: 15px;
    text-decoration: none;
}

.fa-topbar.fa-topbar #pageHeaderBlock a.global.fa-global-btn:hover {
    background: var(--fa-primary-soft);
    border-color: var(--fa-primary);
}

.fa-topbar #pageHeaderBlock a.global.fa-global-btn ~ span.arcregion {
    order: 3;
}

/* Ways back to Home (FleetShell.js addHomeLinks): the logo, and the first crumb of a page breadcrumb */
.fa-topbar #pageHeaderBlock .logo .fa-logo-link {
    display: block;
}

.fa-breadcrumb .fa-crumb-home .bi {
    margin-right: 3px;
    font-size: 11px;
}

/* Red dot on the name while What's New has its NEW badge */
.fa-topbar .fa-user-btn .fa-user-dot {
    display: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--fa-danger);
    margin-left: -2px;
}

.fa-topbar .fa-user-btn.fa-has-new .fa-user-dot {
    display: inline-block;
}

/* The What's New badge, moved into the menu with its link (shown / hidden by PageHeaderControl's script) */
.fa-shell-menu .whatsNewBadge {
    margin-left: auto;
    background: var(--fa-danger);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    padding: 0 6px;
    border-radius: 8px;
}

.fa-shell-menu button.active {
    background: var(--fa-primary-soft);
}

.fa-shell-menu button .bi-check2 {
    margin-left: auto;
    visibility: hidden;
    color: var(--fa-primary);
}

.fa-shell-menu button.active .bi-check2 {
    visibility: visible;
}

.fa-theme-swatch {
    display: inline-flex;
    width: 34px;
    height: 20px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    overflow: hidden;
    flex: 0 0 auto;
}

.fa-theme-swatch span {
    flex: 1 1 50%;
}

/* ---------- 3. Top bar and side menu ---------- */
/* Top bar - holds PageHeaderControl (same content as the YUI pages, laid out with flexbox) */
.fa-topbar {
    grid-area: top;
    display: flex;
    align-items: center;
    background: var(--fa-surface);
    border-bottom: 1px solid var(--fa-border);
    padding: 0 12px 0 6px;
    gap: 6px;
    min-width: 0;
}

.fa-topbar > span:not(.fa-navtoggle),
.fa-topbar #pageHeaderBlock {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.fa-navtoggle {
    border: 0;
    background: transparent;
    font-size: 20px;
    color: var(--fa-slate-700);
    padding: 2px 6px;
}

#pageHeaderBlock .logo {
    order: 0;
    flex: 0 0 auto;
}

#pageHeaderBlock .logo img {
    height: 34px;
    width: auto;
    display: block;
}

#pageHeaderBlock .divisionLogo {
    order: 1;
    font-weight: 600;
    color: var(--fa-slate-900);
    white-space: nowrap;
}

#pageHeaderBlock .divisionLogo select {
    font-size: var(--fa-font-size);
    font-weight: 600;
    color: var(--fa-slate-900);
    border: 1px solid var(--fa-border);
    border-radius: var(--fa-radius);
    padding: 3px 26px 3px 8px;
    background-color: var(--fa-slate-50);
    max-width: 260px;
}

#pageHeaderBlock span.arcregion {
    order: 2;
    color: var(--fa-text-muted);
    white-space: nowrap;
}

#pageHeaderBlock a.global {
    order: 3;
    white-space: nowrap;
    text-decoration: none;
}

#pageHeaderBlock .info {
    order: 4;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    white-space: nowrap;
}

#pageHeaderBlock .info strong {
    font-weight: 600;
    color: var(--fa-slate-900);
}

#pageHeaderBlock .info span.links a {
    color: var(--fa-slate-700);
    text-decoration: none;
}

#pageHeaderBlock .info span.links a:hover {
    color: var(--fa-primary);
    text-decoration: underline;
}

#pageHeaderBlock .info span.links .whatsNewBadge {
    display: none;
    background: var(--fa-danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 8px;
    margin-left: 3px;
    vertical-align: middle;
    animation: faWhatsNewBlink 1.4s ease-in-out infinite;
}

/* Classic / new version switch (PageHeaderControl, PageCommon.NewLookPages) - stays in the bar, before the user menu */
.fa-topbar.fa-topbar #pageHeaderBlock .info a.newLookSwitch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 3px 10px 3px 4px;
    border: 1px solid var(--fa-border);
    border-radius: 14px;
    background: var(--fa-surface);
    color: var(--fa-slate-700);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.fa-topbar.fa-topbar #pageHeaderBlock .info a.newLookSwitch:hover {
    border-color: var(--fa-primary);
    color: var(--fa-primary);
}

.fa-topbar #pageHeaderBlock .newLookSwitchTrack {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 16px;
    border-radius: 8px;
    background: var(--fa-slate-300);
}

.fa-topbar #pageHeaderBlock .newLookSwitchKnob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.25);
    transition: left 0.15s;
}

.fa-topbar #pageHeaderBlock a.newLookSwitch.on .newLookSwitchTrack {
    background: var(--fa-primary);
}

.fa-topbar #pageHeaderBlock a.newLookSwitch.on .newLookSwitchKnob {
    left: 14px;
}

@keyframes faWhatsNewBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Side menu - holds PrimarySideMenuControl (same links and rights as the YUI pages) */
.fa-sidenav {
    grid-area: nav;
    background: var(--fa-nav-bg);
    border-right: 1px solid var(--fa-nav-border);
    color: var(--fa-nav-text);
    overflow-y: auto;
    padding: 8px 0 16px 0;
}

.fa-sidenav #primarySideMenuBlock ul {
    list-style: none;
    margin: 0;
    padding: 2px 0;
}

.fa-sidenav #primarySideMenuBlock div.folder {
    margin-left: 10px;
}

.fa-sidenav #primarySideMenuBlock div.divider {
    border-bottom: 1px solid var(--fa-nav-divider);
    margin: 6px 12px;
}

.fa-sidenav #primarySideMenuBlock ul li {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 8px 0 12px;
    line-height: 26px;
    white-space: nowrap;
}

.fa-sidenav #primarySideMenuBlock ul li::before {
    font-family: "bootstrap-icons";
    content: "\f479"; /* list - fallback for items without their own icon */
    width: 22px;
    flex: 0 0 22px;
    color: var(--fa-nav-icon);
    font-size: 14px;
}

.fa-sidenav #primarySideMenuBlock ul li a {
    color: var(--fa-nav-text);
    text-decoration: none;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fa-sidenav #primarySideMenuBlock ul li:hover {
    background: var(--fa-nav-hover);
}

.fa-sidenav #primarySideMenuBlock ul li.selected {
    background: var(--fa-nav-selected-bg);
    box-shadow: inset 3px 0 0 var(--fa-nav-selected-bar);
}

.fa-sidenav #primarySideMenuBlock ul li.selected::before,
.fa-sidenav #primarySideMenuBlock ul li.selected a {
    color: var(--fa-nav-selected-text);
    font-weight: 600;
}

.fa-sidenav #primarySideMenuBlock ul li.selected a.action {
    color: var(--fa-nav-selected-text);
    border-color: var(--fa-nav-selected-text);
    font-weight: normal;
}

.fa-sidenav #primarySideMenuBlock ul li a.action {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--fa-nav-icon);
    border: 1px solid var(--fa-nav-divider);
    border-radius: 4px;
    line-height: 16px;
    padding: 0 5px;
    margin-left: 4px;
}

.fa-sidenav #primarySideMenuBlock ul li a.action:hover {
    color: var(--fa-nav-text);
    border-color: var(--fa-nav-icon);
}

.fa-sidenav #primarySideMenuBlock ul li.folder a,
.fa-sidenav #primarySideMenuBlock ul li.global {
    font-weight: 600;
    color: var(--fa-nav-heading);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.04em;
}

/* Side menu icons (Bootstrap Icons code points - the class names come from PrimarySideMenuControl) */
.fa-sidenav #primarySideMenuBlock li.servicecalls::before { content: "\f5db"; }      /* tools */
.fa-sidenav #primarySideMenuBlock li.calendar::before { content: "\f214"; }          /* calendar3 */
.fa-sidenav #primarySideMenuBlock li.equipment::before { content: "\f501"; }         /* printer */
.fa-sidenav #primarySideMenuBlock li.customers::before { content: "\f1dd"; }         /* building */
.fa-sidenav #primarySideMenuBlock li.parentcustomer::before { content: "\f87d"; }    /* buildings */
.fa-sidenav #primarySideMenuBlock li.reports::before { content: "\f17c"; }           /* bar-chart-line */
.fa-sidenav #primarySideMenuBlock li.quicklists::before { content: "\f478"; }        /* list-ul */
.fa-sidenav #primarySideMenuBlock li.mileage::before { content: "\f580"; }           /* speedometer2 */
.fa-sidenav #primarySideMenuBlock li.supplyorders::before { content: "\f242"; }      /* cart */
.fa-sidenav #primarySideMenuBlock li.global::before { content: "\f3ee"; }            /* globe */

/* The Global heading links to the global accounts dashboard - it keeps the heading look */
.fa-sidenav #primarySideMenuBlock ul li.global a {
    color: inherit;
}

    .fa-sidenav #primarySideMenuBlock ul li.global a:hover {
        text-decoration: underline;
    }
.fa-sidenav #primarySideMenuBlock li.folder::before { content: "\f3d9"; }            /* folder2 */
.fa-sidenav #primarySideMenuBlock li.users::before { content: "\f4d0"; }             /* people */
.fa-sidenav #primarySideMenuBlock li.servicetechs::before { content: "\f8a7"; }      /* person-gear */
.fa-sidenav #primarySideMenuBlock li.ittechs::before { content: "\f6a6"; }           /* pc-display */
.fa-sidenav #primarySideMenuBlock li.tier2tech::before { content: "\f414"; }         /* headset */
.fa-sidenav #primarySideMenuBlock li.financialcontroller::before { content: "\f632"; } /* cash-coin */
.fa-sidenav #primarySideMenuBlock li.standardlist::before,
.fa-sidenav #primarySideMenuBlock li.standardlisttemp::before { content: "\f227"; }  /* card-list */
.fa-sidenav #primarySideMenuBlock li.standardcost::before { content: "\f636"; }      /* currency-dollar */
.fa-sidenav #primarySideMenuBlock li.setup::before { content: "\f3e5"; }             /* gear */
.fa-sidenav #primarySideMenuBlock li.ServiceArea::before { content: "\f3e8"; }       /* geo-alt */
.fa-sidenav #primarySideMenuBlock li.divisionlocations::before { content: "\f64c"; } /* pin-map */
.fa-sidenav #primarySideMenuBlock li.feedback::before { content: "\f252"; }          /* chat-left-text */
.fa-sidenav #primarySideMenuBlock li.inventory::before { content: "\f1c7"; }         /* box-seam */
.fa-sidenav #primarySideMenuBlock li.makemodel::before { content: "\f5b2"; }         /* tags */
.fa-sidenav #primarySideMenuBlock li.customfield::before { content: "\f5f9"; }       /* ui-checks */
.fa-sidenav #primarySideMenuBlock li.salespeople::before { content: "\f4d3"; }       /* person-badge */
.fa-sidenav #primarySideMenuBlock li.customerusers::before { content: "\f4db"; }     /* person-lines-fill */
.fa-sidenav #primarySideMenuBlock li.ServiceVendors::before { content: "\f5ea"; }    /* truck */
.fa-sidenav #primarySideMenuBlock li.FinancialVendors::before { content: "\f62e"; }  /* bank */
.fa-sidenav #primarySideMenuBlock li.divisionemailcontent::before { content: "\f32f"; } /* envelope */
.fa-sidenav #primarySideMenuBlock li.assetLocation::before { content: "\f603"; }     /* upload */
.fa-sidenav #primarySideMenuBlock li.warehouse::before { content: "\f423"; }         /* house-door */
.fa-sidenav #primarySideMenuBlock li.divisions::before { content: "\f2ee"; }         /* diagram-3 */
.fa-sidenav #primarySideMenuBlock li.spdivisionlocations::before { content: "\f52e"; } /* share */
.fa-sidenav #primarySideMenuBlock li.security::before { content: "\f538"; }          /* shield-lock */

/* Icons only: the menu button in the top bar shrinks the side menu (FleetShell.js); the names show as tooltips */
@media (min-width: 992px) {
    :root.fa-nav-collapsed {
        --fa-sidenav-width: 46px;
    }

    .fa-nav-collapsed .fa-sidenav {
        overflow-x: hidden;
    }

    .fa-nav-collapsed .fa-sidenav #primarySideMenuBlock div.folder {
        margin-left: 0;
    }

    .fa-nav-collapsed .fa-sidenav #primarySideMenuBlock div.divider {
        margin: 6px 8px;
    }

    .fa-nav-collapsed .fa-sidenav #primarySideMenuBlock ul li {
        padding: 0 0 0 13px;
        line-height: 30px;
    }

    /* The link fills the row, so a click on the icon opens the page */
    .fa-nav-collapsed .fa-sidenav #primarySideMenuBlock ul li a {
        position: absolute;
        inset: 0;
        font-size: 0;
    }

    .fa-nav-collapsed .fa-sidenav #primarySideMenuBlock ul li a.action {
        display: none;
    }

    .fa-nav-collapsed .fa-sidenav #primarySideMenuBlock ul li.global {
        font-size: 0;
    }

    .fa-nav-collapsed .fa-sidenav #primarySideMenuBlock ul li.global::before {
        font-size: 14px;
    }
}

/* ---------- 4. Hybrid frame on the YUI pages (html.fa-hybrid) ---------- */
/*
 * The YUI layout (Common.js app.initLayout) still places the top bar, side menu and page content; it sizes the
 * top and left regions for the new frame (FleetShell.js layoutSizes) and FleetShell.js clears the regions' own
 * borders and background. The rules below give #divLayoutTop / #divLayoutLeft the look of the new frame and
 * undo the old header and menu styles in Common.css (logo, links and division list placed absolutely, sprite
 * icons, dashed dividers). Everything is under .fa-topbar / .fa-sidenav, which FleetShell.js adds only when the
 * page builds its layout through app.initLayout - any other page keeps its old header and menu.
 */
html.fa-hybrid .fa-topbar,
html.fa-hybrid .fa-sidenav {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: var(--fa-font-size);
    line-height: 1.5;
    box-sizing: border-box;
}

html.fa-hybrid .fa-topbar {
    height: 100%;
}

html.fa-hybrid .fa-sidenav {
    min-height: 100%;
    margin: 0;
    overflow: visible;      /* the YUI region scrolls */
}

html.fa-hybrid .fa-navtoggle {
    cursor: pointer;
    line-height: 1;
}

/* Header: back into the flex row of the top bar */
html.fa-hybrid .fa-topbar #pageHeaderBlock .logo,
html.fa-hybrid .fa-topbar #pageHeaderBlock .info,
html.fa-hybrid .fa-topbar #pageHeaderBlock span.arcregion,
html.fa-hybrid .fa-topbar #pageHeaderBlock a.global,
html.fa-hybrid .fa-topbar #pageHeaderBlock .divisionLogo {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
    height: auto;
    padding: 0;
    text-align: left;
    font-size: inherit;
}

html.fa-hybrid .fa-topbar #pageHeaderBlock .info span.links {
    display: inline;
}

html.fa-hybrid .fa-topbar #pageHeaderBlock .info span.links .whatsNewBadge {
    font-size: 10px;
}

html.fa-hybrid .fa-topbar #pageHeaderBlock .divisionLogo select {
    font-family: inherit;
}

/* Side menu: no sprite icons, spacing or borders from the old menu */
html.fa-hybrid .fa-sidenav #primarySideMenuBlock {
    border: 0;
    margin: 0;
    background: transparent;
    font-size: inherit;
    color: inherit;
    height: auto !important;    /* the old layout sets a pixel height */
}

html.fa-hybrid .fa-sidenav #primarySideMenuBlock ul li {
    margin: 0;
    clear: none;
    background-image: none;
}

html.fa-hybrid .fa-sidenav #primarySideMenuBlock ul li.global {
    background-color: transparent;
}

html.fa-hybrid .fa-sidenav #primarySideMenuBlock ul li a:not(.action) {
    padding: 0;
    background-color: transparent;
}

html.fa-hybrid .fa-sidenav #primarySideMenuBlock ul li a.action {
    background-color: transparent;
}

html.fa-hybrid .fa-sidenav #primarySideMenuBlock ul li a:hover {
    text-decoration: none;
}

/* Icons only - at every width here (the YUI pages have no small-screen layout) */
html.fa-hybrid.fa-nav-collapsed .fa-sidenav {
    overflow-x: hidden;
}

html.fa-hybrid.fa-nav-collapsed .fa-sidenav #primarySideMenuBlock div.folder {
    margin-left: 0;
}

html.fa-hybrid.fa-nav-collapsed .fa-sidenav #primarySideMenuBlock div.divider {
    margin: 6px 8px;
}

html.fa-hybrid.fa-nav-collapsed .fa-sidenav #primarySideMenuBlock ul li {
    padding: 0 0 0 13px;
    line-height: 30px;
}

html.fa-hybrid.fa-nav-collapsed .fa-sidenav #primarySideMenuBlock ul li a:not(.action) {
    position: absolute;
    inset: 0;
    font-size: 0;
}

html.fa-hybrid.fa-nav-collapsed .fa-sidenav #primarySideMenuBlock ul li a.action {
    display: none;
}

html.fa-hybrid.fa-nav-collapsed .fa-sidenav #primarySideMenuBlock ul li.global {
    font-size: 0;
}

html.fa-hybrid.fa-nav-collapsed .fa-sidenav #primarySideMenuBlock ul li.global::before {
    font-size: 14px;
}