/* /Layout/MainLayout.razor.rz.scp.css */
/*  THE RAIL IS GONE - 232px column, sticky, full height, the 641px breakpoint, the
    horizontal stacked state below it, the 4rem of right padding that kept the last
    link out from under a button in the far corner. All of it went on 2026-08-31 when
    the two menus became one; see the note at the top of MainLayout.razor.

    This is deliberately the SAME LAYOUT as ProjectHub's MainLayout.razor.css, rule
    for rule, with --ci-* where that file has --ph-*. The two apps matched by
    measurement when they both had rails and they match by construction now that
    neither does. docs\DESIGN-BASELINE.md is the record; if this file disagrees with
    that one, this file is wrong.

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

    ⚠ What did NOT survive is the 2.6rem row height, and it did not need to: it was
    the rail link's, and the rail links now live in SiteMenu.razor.css where the
    panel sets its own. That number is the one that got lost once already, rebuilt
    from memory as line-height 1.6, and made Marty report the font as the wrong size.
    It is not missing here - it moved. */

.app[b-grbdpj74cu] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--ci-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. */
.app-bar[b-grbdpj74cu] {
    display: flex;
    align-items: center;
    min-height: 3.5rem;
    padding-left: 3.875rem;
    padding-right: 1rem;
    border-bottom: 1px solid var(--ci-line);
}

.app-name[b-grbdpj74cu] {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--ci-ink);
}

/*  Full width now - the 232px the rail held is content. 1.5rem over, 3rem under,
    1.5rem each side, at every width: this was ProjectHub's .content and it is what
    that app still gets from .content in studio.css plus Bootstrap's px-4.

    ⚠ The old top padding of 3.5rem above 641px is deliberately NOT here. It was
    clearance for a fixed button in the top-RIGHT corner, which is where every
    screen's primary action lives - "New product" on Parts, "New vendor" on Vendors.
    That corner is empty now. Putting it back would push every page down by a bar's
    height for nothing. */
main[b-grbdpj74cu] {
    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 the grid push
       the page wider than the viewport and put the whole app on a horizontal
       scrollbar. */
    min-width: 0;
    padding: 1.5rem 1.5rem 3rem;
}
/* /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-dqxtctgr2d] {
    --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-dqxtctgr2d] {
    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-dqxtctgr2d] {
    position: relative;
    display: block;
    width: 1.625rem;
    height: 1.25rem;
}

.bars i[b-dqxtctgr2d] {
    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-dqxtctgr2d] { top: 10%; }
.bars i:nth-child(2)[b-dqxtctgr2d] { top: 50%; }
.bars i:nth-child(3)[b-dqxtctgr2d] { top: 90%; }

.bars[b-dqxtctgr2d], .bars i[b-dqxtctgr2d] {
    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-dqxtctgr2d] { transform: rotate(90deg); }
.burger[aria-expanded="true"] .bars i:nth-child(1)[b-dqxtctgr2d] { top: 50%; transform: rotate(45deg); }
.burger[aria-expanded="true"] .bars i:nth-child(2)[b-dqxtctgr2d] { opacity: 0; transform: scaleX(0.2); }
.burger[aria-expanded="true"] .bars i:nth-child(3)[b-dqxtctgr2d] { top: 50%; transform: rotate(-45deg); }

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

.scrim[b-dqxtctgr2d] {
    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-dqxtctgr2d] { opacity: 1; visibility: visible; }

.menu[b-dqxtctgr2d] {
    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-dqxtctgr2d] { 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-dqxtctgr2d]  .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-dqxtctgr2d]  .item + .item { border-top: 1px solid var(--sm-line); }

.menu[b-dqxtctgr2d]  a.item:hover,
.menu[b-dqxtctgr2d]  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-dqxtctgr2d]  .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-dqxtctgr2d]  .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-dqxtctgr2d]  .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-dqxtctgr2d]  .item.screen.active {
    background: var(--sm-raised);
    border-left-color: var(--sm-signal);
    color: #ffffff;
    font-weight: 600;
}

.menu[b-dqxtctgr2d]  .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-dqxtctgr2d], .bars i[b-dqxtctgr2d], .scrim[b-dqxtctgr2d], .menu[b-dqxtctgr2d] { transition: none; }
    .menu[b-dqxtctgr2d]  .item { transition: none; }
}
/* /Pages/Dashboard.razor.rz.scp.css */
/* A stat tile. One clear step above the page field, like every other panel in the
   app, with the figure carrying the weight and the label and note kept quiet
   around it. Matched to ProjectHub's dashboard tiles: same field, same border,
   same uppercase label over a large figure. */
.tile[b-kpwmjvf1wy] {
    height: 100%;
    padding: 0.85rem 1rem 0.9rem;
    background: var(--ci-surface);
    border: 1px solid var(--ci-line);
    border-radius: 8px;
}

.tile-label[b-kpwmjvf1wy] {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ci-dim);
}

.tile-figure[b-kpwmjvf1wy] {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ci-ink);
    /* Tabular figures so the four tiles' numbers line up on their digits rather
       than drifting with the proportional font. */
    font-variant-numeric: tabular-nums;
}

/* The caveat under a figure - what it counts, or what it is missing. Small and
   dim on purpose: it must be readable when you go looking for it and must not
   compete with the number. */
.tile-note[b-kpwmjvf1wy] {
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--ci-dim);
}

/* Part numbers are identifiers, not prose - the same monospace treatment the
   inventory table gives them, so a column of them scans. */
.mono[b-kpwmjvf1wy] {
    font-family: var(--ci-font-mono);
    font-size: 0.88rem;
}