/* /Layout/MainLayout.razor.rz.scp.css */
/*  THE RAIL IS GONE. What used to be here - .sidebar at 232px, sticky, full height,
    switched on at min-width 641px, plus 3.5rem of top padding on article to clear a
    button in the OPPOSITE corner - all went with it on 2026-08-31. One menu, one
    hamburger, at every width; see the note at the top of MainLayout.razor.

    What replaced it is smaller than what it replaced: a bar, and a column.

    Values kept from the rail, because they were measured and are still right:
      3.5rem   bar height, was .top-row's
      1px      hairline under it, in --ph-line
      1.05rem / 600 / 0.01em   the app name, was .navbar-brand's

    Controls Inventory's MainLayout.razor.css is the same layout with --ci-* tokens.
    docs\DESIGN-BASELINE.md is the record; if this file disagrees with that one,
    this file is wrong. */

.page[b-z9bweumn08] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--ph-void);
}

/*  ⚠ THE LEFT PADDING IS CLEARANCE, NOT RHYTHM - do not normalise it to match the
    other sides.

    SiteMenu's burger is position:fixed at the top left: a 44px button on a 9px
    inset, so it occupies the first 53px of the viewport in both axes. It is fixed,
    which means it is out of flow and this bar knows nothing about it - nothing here
    can be pushed aside by it. 3.875rem (62px) puts the app name clear of it with
    8px of air.

    This is the reason the title used to sit at the far right on a phone, back when
    the bar was a Bootstrap .navbar: its .container-fluid is justify-content:
    space-between, so a burger and a title in one flex row got shoved to opposite
    ends. There is no flex row to strand anything in now - the button is not a
    sibling of the title, it is fixed over the padding reserved for it. */
.app-bar[b-z9bweumn08] {
    display: flex;
    align-items: center;
    min-height: 3.5rem;
    padding-left: 3.875rem;
    padding-right: 1rem;
    border-bottom: 1px solid var(--ph-line);
}

/* Was .navbar-brand. */
.app-name[b-z9bweumn08] {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--ph-ink);
}

main[b-z9bweumn08] {
    flex: 1;
    /* Lets a wide table scroll inside its own container instead of stretching the
       layout: a flex item defaults to min-width:auto, which would let a grid push
       the page wider than the viewport and put the whole app on a horizontal
       scrollbar. */
    min-width: 0;
}

/*  Full width now - the 232px the rail held is content, and there is deliberately no
    `article` rule here at all.

    It used to carry `padding-left: 2rem !important` and a 3.5rem top pad, both only
    above 641px, both there to negotiate with the rail and with a button in the
    opposite corner. Neither has anything to negotiate with: the vertical padding
    comes from .content in studio.css (1.5rem over, 3rem under) and the horizontal
    from Bootstrap's px-4 in the markup, uniformly at every width.

    ⚠ Do not "restore" the left padding to line the page title up with the app name
    in the bar. The name sits at 3.875rem because a fixed button occupies the space
    before it; indenting every page's whole content column by that much to match a
    one-line bar trades the reader's width for an alignment nobody asked about. */
/* /Layout/SiteMenu.razor.rz.scp.css */
/* The menu — a port of the hamburger in the website's section of /css/studio.css,
   scoped to this component so it cannot collide with Bootstrap or with the app's
   own chrome.

   IDENTICAL COPY in the other app's Layout\SiteMenu.razor.css. See the note at the
   top of SiteMenu.razor for why there are two.

   The palette is declared here rather than read from the host app's tokens, so this
   component looks the same in both apps by construction. Same six values as
   section 1 of studio.css. */
.site-menu-root[b-htxs71bhhq] {
    --sm-void: #0c1118;
    --sm-surface: #172230;
    --sm-raised: #202c3c;
    --sm-line: #253141;
    --sm-ink: #e3e9f1;
    --sm-dim: #8a9bb1;
    --sm-signal: #4d9bff;
}

/*  NAV CHROME GEOMETRY - literal lengths, matching the website exactly so the
    button does not move when you cross from a page into an app. The numbers, so
    they can be changed coherently:
      18px   inset from the corner
      44px   button box: the smallest touch target a fingertip hits reliably
      26px   visible icon, centred in that box
       9px   button offset = 18 - (44 - 26) / 2, so the ICON lands on 18px
      57px   panel top = 9 + 44 + 4

    ⚠ LEFT, NOT RIGHT, AND THE APPS DEPEND ON IT. This used to be the right-hand
    corner, opposite each app's own rail hamburger on the left. The rails are gone
    and this is the only menu button on the domain, so it took the left corner they
    vacated. Both apps' top bars reserve 3.875rem of left padding for it (9 + 44 +
    8 = 61px) - a bar that stops reserving it puts its own title under this button.
    The three static pages reserve nothing because they have no bar; on /content/
    the corner lockup moved to the RIGHT to get out of the way.

    Z-INDEX sits above Bootstrap's fixed layer (1030) and below its modal layer
    (1055). The website's copy can use 3; inside an app there is a whole component
    library underneath that has opinions about stacking. */
.burger[b-htxs71bhhq] {
    position: fixed;
    top: 0.5625rem;    /* 9px */
    left: 0.5625rem;
    width: 2.75rem;    /* 44px touch target */
    height: 2.75rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    z-index: 1042;
}

.bars[b-htxs71bhhq] {
    position: relative;
    display: block;
    width: 1.625rem;
    height: 1.25rem;
}

.bars i[b-htxs71bhhq] {
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    /* Half the bar height, so each `top` centres its bar rather than hanging it. */
    margin-top: -1.5px;
    border-radius: 1.5px;
    background: var(--sm-ink);
}

.bars i:nth-child(1)[b-htxs71bhhq] { top: 10%; }
.bars i:nth-child(2)[b-htxs71bhhq] { top: 50%; }
.bars i:nth-child(3)[b-htxs71bhhq] { top: 90%; }

.bars[b-htxs71bhhq], .bars i[b-htxs71bhhq] {
    transition: transform 320ms cubic-bezier(.2, .8, .2, 1), opacity 160ms ease;
}

/* Opening turns the box a quarter turn while the outer bars swing to 45deg. A
   quarter turn lands the X back at 45deg either way, so the end state is still the
   universal close affordance. */
.burger[aria-expanded="true"] .bars[b-htxs71bhhq] { transform: rotate(90deg); }
.burger[aria-expanded="true"] .bars i:nth-child(1)[b-htxs71bhhq] { top: 50%; transform: rotate(45deg); }
.burger[aria-expanded="true"] .bars i:nth-child(2)[b-htxs71bhhq] { opacity: 0; transform: scaleX(0.2); }
.burger[aria-expanded="true"] .bars i:nth-child(3)[b-htxs71bhhq] { top: 50%; transform: rotate(-45deg); }

.burger:focus-visible[b-htxs71bhhq] { outline: 1px solid var(--sm-signal); outline-offset: 0.25rem; }

.scrim[b-htxs71bhhq] {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(12, 17, 24, 0.8);
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease, visibility 200ms;
}

.scrim.open[b-htxs71bhhq] { opacity: 1; visibility: visible; }

.menu[b-htxs71bhhq] {
    position: fixed;
    top: 3.5625rem;   /* 57px - just under the button box */
    left: 1.125rem;   /* 18px - same inset as the button's icon */
    z-index: 1041;
    display: flex;
    flex-direction: column;
    min-width: 13.5rem;

    /*  THE PANEL CAN NOW OUTGROW A SHORT WINDOW, so it is allowed to scroll.
        Absorbing both rails took it from 5 rows to 13 - about 533px of rows - which
        still fits a phone in portrait but not a short laptop window or a phone in
        landscape. Without this the last rows would be unreachable off the bottom of
        the viewport with no indication they were there.

        `hidden auto` rather than plain `auto`: horizontal stays clipped, so the
        rounded corners keep clipping the first and last rows. */
    max-height: calc(100vh - 5rem);
    overflow: hidden auto;

    background: var(--sm-surface);
    border: 1px solid var(--sm-line);
    border-radius: 6px;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.5);
    /* visibility, not display: it can transition, and a visibility:hidden subtree
       is untabbable without needing inert or tabindex juggling. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.35rem);
    transition: opacity 160ms ease, transform 260ms cubic-bezier(.2, .8, .2, 1), visibility 260ms;
}

.menu.open[b-htxs71bhhq] { opacity: 1; visibility: visible; transform: none; }

/*  ⚠ EVERY ROW RULE BELOW IS `.menu ::deep`, AND IT IS REQUIRED, NOT TIDINESS.

    The third-level rows - each app's own screens, inside the app that is running -
    are <NavLink> COMPONENTS. Blazor stamps this sheet's scope attribute only onto
    elements written in THIS file's markup, so the <a> a NavLink renders never gets
    it: a plain `.item { }` rule compiles to `.item[b-xxxxxxxxxx]` and matches
    nothing at all for those rows. They would render as unstyled blue underlined
    links in the middle of a styled panel, with no error anywhere.

    ::deep drops the attribute off the last part of the selector and puts it on the
    ancestor instead - `.menu[b-xxxxxxxxxx] .item` - which matches BOTH kinds of row,
    the component-rendered ones and the anchors and spans written here, because all
    of them are inside .menu. So the whole block goes through it rather than half. */
.menu[b-htxs71bhhq]  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 0.7rem 0.9rem;
    border-left: 3px solid transparent;
    text-decoration: none;
    color: var(--sm-ink);
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
    transition: background 120ms ease, border-left-color 120ms ease;
}

.menu[b-htxs71bhhq]  .item + .item { border-top: 1px solid var(--sm-line); }

.menu[b-htxs71bhhq]  a.item:hover,
.menu[b-htxs71bhhq]  a.item:focus-visible {
    background: var(--sm-raised);
    border-left-color: var(--sm-signal);
    color: var(--sm-ink);
    outline: none;
}

/* The page you are already on: still listed, so the nav does not change shape from
   page to page, but not a link and not competing for attention. */
.menu[b-htxs71bhhq]  .item.current { color: var(--sm-dim); font-weight: 400; }

/* An application, which lives inside /backend/ rather than beside it. Indented by
   the difference so the LABEL steps in while the border-left marker stays on the
   same vertical line as every other item. */
.menu[b-htxs71bhhq]  .item.sub { padding-left: 1.9rem; }

/*  A screen INSIDE an application - the third level, and what used to be that app's
    rail. One more step of indent, and lighter than the two levels above it: these
    are the most numerous rows in the panel and reading them as a block under their
    app matters more than reading each one as a destination in its own right. */
.menu[b-htxs71bhhq]  .item.screen {
    padding-left: 2.9rem;
    font-weight: 400;
    font-size: 0.9rem;
    color: var(--sm-dim);
}

/*  THE SIGNATURE DEVICE, INHERITED FROM THE RAILS THIS MENU REPLACED: the screen
    you are on is edge-lit in the signal colour and lifted to the same value as a
    card. "active" is NavLink's own class, set from the current route rather than
    from anything this component tracks, which is the whole reason those rows are
    NavLinks and not anchors.

    It has to out-specify .item.screen's colour above, which is why the class is
    doubled up in the selector rather than relying on source order. */
.menu[b-htxs71bhhq]  .item.screen.active {
    background: var(--sm-raised);
    border-left-color: var(--sm-signal);
    color: #ffffff;
    font-weight: 600;
}

.menu[b-htxs71bhhq]  .tag {
    display: inline-block;
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    border: 1px solid var(--sm-line);
    color: var(--sm-dim);
    margin-left: 0.5rem;
    vertical-align: 0.1em;
}

@media (prefers-reduced-motion: reduce) {
    .bars[b-htxs71bhhq], .bars i[b-htxs71bhhq], .scrim[b-htxs71bhhq], .menu[b-htxs71bhhq] { transition: none; }
    .menu[b-htxs71bhhq]  .item { transition: none; }
}