/**
 * aim-mobile-chrome.css — the phone tab bar and the content offsets it needs
 * (ADR-0151, mobile language W1 f). Global, linked from the layouts.
 *
 * Desktop must not change: everything that shows or moves anything sits inside
 * @media (max-width: 767px), except the landscape safe-area padding at the end,
 * which is a no-op on desktop because env(safe-area-inset-*) is 0 there.
 *
 * The bar is AimMobileTabBar.razor. Five fixed slots: Today, Work, Capture
 * (centre, round), Map, Me. Visual spec: the 2026-10-07 phone mockups
 * (gen_kit.py .tabbar / .tab / .tab .pl / .tab.on / .fab), mapped to tokens.
 *
 * Stacking: 1010 sits below the drawer backdrop (1020), drawers (1025) and the
 * navbar (1030), so a bottom sheet covers the bar.
 */

.aim-tabbar {
    display: none;
}

@media print {
    .aim-tabbar {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .aim-tabbar {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: start;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1010;
        box-sizing: border-box;
        min-height: calc(var(--tabbar-height) + var(--safe-bottom));
        padding: 6px max(6px, var(--safe-right)) var(--safe-bottom) max(6px, var(--safe-left));
        background: var(--raised);
        border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
        box-shadow: var(--lift-3);
    }

    .aim-tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-width: 0;
        min-height: var(--tap);
        font-size: var(--text-m-caption);
        font-weight: 600;
        line-height: 1.2;
        color: var(--ink-faint);
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    .aim-tab:hover,
    .aim-tab:visited {
        color: var(--ink-faint);
        text-decoration: none;
    }

    .aim-tab__pill {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        height: 30px;
        border-radius: var(--radius-control);
    }

    .aim-tab__label {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .aim-tab--on,
    .aim-tab--on:hover,
    .aim-tab--on:visited {
        color: var(--brand-on);
        font-weight: 700;
    }

    .aim-tab--on .aim-tab__pill {
        background: var(--action-wash);
    }

    .aim-tab:focus-visible {
        outline: 2px solid var(--action);
        outline-offset: -2px;
        border-radius: var(--radius-control);
    }

    /* Capture: the one genuinely round control, so --radius-full is correct.
       Raised above the bar; the ring in the bar colour separates it from the
       page behind. */
    .aim-tabbar__fab {
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 64px;
        height: 64px;
        margin-top: -28px;
        border-radius: var(--radius-full);
        background: var(--action);
        color: var(--on-action);
        border: 5px solid var(--raised);
        box-shadow: var(--lift-2);
    }

    .aim-tab--capture:focus-visible {
        outline: none;
    }

    .aim-tab--capture:focus-visible .aim-tabbar__fab {
        outline: 2px solid var(--action);
        outline-offset: 2px;
    }

    .aim-tab--spacer {
        pointer-events: none;
    }

    /* Content offset. Pages read --app-bottom-inset; main gets the room directly
       so the last element of a flow page scrolls clear of the bar. */
    body:has(.aim-tabbar) {
        --app-bottom-inset: calc(var(--tabbar-height) + var(--safe-bottom));
    }

    body:has(.aim-tabbar) main.main {
        padding-bottom: calc(var(--app-bottom-inset) + 12px);
    }

    /* Fixed shells anchored at top: var(--navbar-height) with bottom: 0 — lift their
       bottom edge above the bar. Inventory taken 2026-10-07 from the repo CSS (the
       CSS13 shape: position fixed + navbar-anchored top + bottom 0), page shells only;
       drawers and overlays are left alone so they still cover the bar.
         .sl-shell     AssetManagement.UI  SpecificationList.razor.css
         .spc-shell    AssetManagement.UI  spec-catalogue.css
         .zl-shell     AssetManagement.UI  zones.css
         .bmsc-shell   Bms.UI              BmsCompliancePage.razor.css
         .bmsr-shell   Bms.UI              BmsRegistersPage.razor.css
         .bmsshell     Bms.UI              BmsShell.razor.css
         .ea-shell     EstateManagement.UI EstateAdminHub.razor.css
         .em-shell     EstateManagement.UI EstatesManagerView.razor.css
         .eapp-shell   Shared.UI           engineer-app.css
         .ms-shell     SiteManagement.UI   MySitesPage.razor.css
         .mw-shell     SiteManagement.UI   MyWorkPage.razor.css
         .sdh-shell    SiteManagement.UI   SiteDetailsHub.razor.css
         .dpr-page     SiteManagement.UI   design-proposal.css
         .pm-app       SiteManagement.UI   panorama.css
         .cal-shell    WorkflowManagement.UI UserCalendar.razor.css
         .dvs-shell    WorkflowManagement.UI DemandViewShell.razor.css
         .acb-shell    WorkflowManagement.UI access-capture.css
         .dab-shell    WorkflowManagement.UI delivery-allocation.css
       .fa-shell is excluded on purpose: AIM Field never mounts the bar.
       body:has(...) outranks the shells' scoped [b-xxx] selectors, so those files
       stay untouched. */
    body:has(.aim-tabbar) :is(
        .sl-shell, .spc-shell, .zl-shell,
        .bmsc-shell, .bmsr-shell, .bmsshell,
        .ea-shell, .em-shell,
        .eapp-shell,
        .ms-shell, .mw-shell, .sdh-shell, .dpr-page, .pm-app,
        .cal-shell, .dvs-shell, .acb-shell, .dab-shell
    ) {
        bottom: var(--app-bottom-inset);
    }

    /* In-flow viewport-height page roots — the OTHER shape. These sit inside main.main
       with height: calc(100dvh - var(--navbar-height)) and overflow: hidden, and scroll
       an inner panel. Padding main is not enough for them: the root is still a full
       viewport tall, so its inner panel's last rows end under the bar even at max
       scroll (round-1 finding, /notifications .np-scroll, 2026-10-07). Shorten the root
       by the bar instead. Inventory taken 2026-10-07 by grepping the repo CSS for
       `height: calc(100dvh - var(--navbar-height` on a page root:
         .aah-page      Authorization.UI  AdminAccessHub.razor.css
         .rdp-container Authorization.UI  RoleDefaultsPage.razor.css
         .flog-root     Finance.UI        FinanceLogsPage.razor.css
         .por-root      Finance.UI        PurchaseOrderRegister.razor.css
         .arr-root      Finance.UI        ActResidueReconciliation.razor.css
         .tsb-root      Finance.UI        TestingSandbox.razor.css
         .asc-shell     MappingServices.UI AirspaceCatalogueManager.razor.css
         .eh-shell      Shared.UI         EngineerHub.razor.css
         .np-shell      Shared.UI         NotificationsPage.razor.css
         .trk-shell / .st-shell  SiteManagement.UI  Site/WorkflowTrackerBoard.razor.css
         .vlq-shell     SiteManagement.UI VisitLogQuickPage.razor.css
         .eqr-shell     UserManagement.UI EquipmentRegister.razor.css
         .mt-page       UserManagement.UI MyTicketsPage.razor.css
         .uap-container UserManagement.UI UserAdminPage.razor.css
         .cah-page      WorkflowManagement.UI CompanyAccessHub.razor.css
         .fnr-root      WorkflowManagement.UI FindingsReport.razor.css
         .rh-page       WorkflowManagement.UI ReportsHub.razor.css
         .wpm           WorkflowManagement.UI WorkflowProjectMatrix.razor.css
         .cmp-shell     wwwroot account-compliance.css
         .acct-shell    wwwroot account-shell.css
         .ep-shell      EstateManagement.UI estate-portfolio.css
       Left out on purpose: .bmscf-root, .bmscal-root, .fhb-root (they switch to
       height: auto at ≤1023px and grow with the document, which main's padding already
       clears); .nd-drawer / .wd-drawer (drawers cover the bar by design); .dtk-window
       (immersive Digital Twin). A new root of this shape belongs in both lists below.
       Specificity: body:has(...) :is(...) is 0,2,1 and beats a scoped .x[b-xxx] (0,2,0). */
    body:has(.aim-tabbar) :is(
        .aah-page, .rdp-container,
        .flog-root, .por-root, .arr-root, .tsb-root,
        .asc-shell, .eh-shell, .np-shell,
        .trk-shell, .st-shell, .vlq-shell,
        .eqr-shell, .mt-page, .uap-container,
        .cah-page, .fnr-root, .rh-page, .wpm,
        .cmp-shell, .acct-shell, .ep-shell
    ) {
        height: calc(100dvh - var(--navbar-height) - var(--app-bottom-inset));
    }

    /* The root now stops at the bar, so main only needs to reserve the bar itself;
       the extra 12px breathing room would make the whole document scroll by 12px. */
    body:has(.aim-tabbar) main.main:has(:is(
        .aah-page, .rdp-container,
        .flog-root, .por-root, .arr-root, .tsb-root,
        .asc-shell, .eh-shell, .np-shell,
        .trk-shell, .st-shell, .vlq-shell,
        .eqr-shell, .mt-page, .uap-container,
        .cah-page, .fnr-root, .rh-page, .wpm,
        .cmp-shell, .acct-shell, .ep-shell
    )) {
        padding-bottom: var(--app-bottom-inset);
    }
}

/* Phone landscape: the width is over 767px, so the block above misses it, but the
   notch / rounded corners now sit at the sides. min-width: 768px (canonical) keeps it
   from overriding the 767 block on a small phone held sideways. env() is 0 on desktop
   and tablets without insets, so max() returns the existing padding (0 left, 1rem
   right, AimNavbar.razor.css) there. The body prefix outranks the scoped rule. */
@media (pointer: coarse) and (orientation: landscape) and (min-width: 768px) {
    body .aim-navbar .nav-container {
        padding-left: max(0px, var(--safe-left));
        padding-right: max(1rem, var(--safe-right));
    }
}

/* ── Phone mode (ADR-0151 D10) ─────────────────────────────────────────────────
   Set by _Layout only when the request is in phone mode AND the page rendered its phone view
   (body[data-view="phone"]). The desktop navbar is not rendered then, so nothing reserves its
   height, and the phone view draws its own full-bleed header, so <main> loses its side gutter.
   Desktop mode never carries the attribute, so none of this can reach a desktop page. */
body[data-view="phone"] {
    --navbar-height: 0px;
}

body[data-view="phone"] .main {
    padding: 0;
}