/* ── Standalone shell additions ── app.css is a verbatim copy of AR Pro's design tokens and components, so the Scheduling views look exactly as they did inside that app. Two things it does NOT carry, added here: 1. `.tbl` — scheduling.js uses this class as a plain hook and styles its own cells inline; the Outlets table in app.js has no such inline styling, so the table needs a real rule. 2. `#tbh`/`#tbp` — the topbar's title/subtitle were styled inline in AR Pro's index.html markup rather than in its stylesheet. */ #tbh { font-size: 15px; font-weight: 700; color: var(--navy); } #tbp { font-size: 11.5px; color: var(--g600); margin-top: 1px; } .tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; } .tbl th { text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--g400); padding: 8px var(--md); border-bottom: 1px solid var(--g100); white-space: nowrap; } .tbl td { padding: 8px var(--md); border-bottom: 1px solid var(--g50); color: var(--g800); } .tbl tbody tr:hover { background: var(--g50); } .tbl .num { text-align: right; font-variant-numeric: tabular-nums; } /* Outlets -> Roster drill-down (app.js): the whole row is clickable. */ .outlet-row { cursor: pointer; } .outlet-leader-link { color: var(--navy); font-weight: 600; border-bottom: 1px dashed var(--g300); } .outlet-row:hover .outlet-leader-link { border-bottom-color: var(--navy); } /* The Outlets search (app.js outletsInit). The design system's search field: tinted fill, no border, pill, 42px, a 16px leading icon, 13px text. */ .outlets-bar { align-items: center; flex-wrap: wrap; margin-bottom: var(--sm); } .outlets-bar-gap { flex: 1 1 0; } .outlets-search { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; flex: 0 1 380px; min-width: 220px; border-radius: var(--rpill); background: var(--tint); } .outlets-search:focus-within { box-shadow: 0 0 0 3px rgba(22,39,122,.08); } .outlets-search svg { width: 16px; height: 16px; fill: var(--g400); flex: 0 0 auto; } .outlets-search input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13px; color: var(--g800); } .outlets-search input::placeholder { color: var(--g400); } /* The header stays put while the rows scroll under it. */ .outlets-tbl thead th { position: sticky; top: 0; z-index: 1; background: var(--white); } .outlets-import { margin-top: var(--xl); } .outlets-import summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: var(--md); } /* ════════ THE DOCK ════════ The app's whole navigation surface, floating at the right edge. Before this there were three separate things: a left sidebar (.sb) for the views, an in-flow tab strip beside the roster grid for its sub-tabs, and a bottom-left box for the warning key. They are one bar now. It reuses the tab strip's own component classes (.bi-tabstrip-wrap, .bi-tabgroup, .bi-tab) rather than declaring a new look, so the collapse-to-a-rail-and-expand-on-hover behaviour and the active marker come along unchanged from app.css. All this adds is where it sits. */ .dock { position: fixed; /* LEFT since 2026-09-24 — swapped with the Assistant rail at the manager's instruction. Where to go now sits on the left, what to do on the right. */ left: var(--lg); top: 50%; transform: translateY(-50%); /* Above every floating panel (plot 60, assistant 66, over-target 70): the dock is where you go next, so when it slides open it covers them, and they blur behind it like the page does. It was 40, under the plot panel. */ z-index: 80; /* 8px from the top and bottom of the window, not 24 (2026-09-24): the dock holds every destination and key, and at 24px it came up ~40px short on an ordinary laptop window and scrolled its own last tabs out of sight. */ max-height: calc(100vh - 2 * var(--sm)); } /* Opening the warning key pins the bar open. Otherwise the panel sits at a fixed offset from the right edge while the bar it belongs to slides in and out from under the pointer — and hovering the bar would cover the panel. app.css expands the strip on :hover alone, so pinned-but-not-hovered has to repeat what that state does, or the bar sits 220px wide with its labels still collapsed to nothing. Same specificity, later sheet — this wins. */ /* app.css's tab strip is `overflow: hidden` (it has a width transition to clip). As a fixed rail with a max-height that is a trap: on a short window the dock runs out of room and silently swallows whatever is at the bottom — which, since the full-screen control was added there, meant the last button became unreachable at 557px of viewport. Let it scroll instead; horizontal stays hidden so the expand animation still clips. */ .dock { overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; } /* Hovering the dock open blurs the page behind it — ported from Finance Ecosystem (AR Pro index.html, `.sb:hover ~ .main`), same values, same reason: the eye stays on the list you are choosing from, and the half-covered screen underneath stops reading as part of it. One difference in the selector. AR Pro's sidebar comes BEFORE .main, so a sibling combinator reaches it; this dock comes AFTER, and `~` only looks forward. `:has()` asks the question from the body instead. Hover only, not the pinned state: a dock pinned open by Add staff or Leave is a form being filled in against the shift plot, and blurring the plot would hide what the form is about. Kept to a 2px blur because a filter on a container this size repaints it, and a month of cards is a lot of paint. */ /* The floating panels blur with the page. They live outside .main (appended to the body), so they are named here — the plot panel especially, which sits right beside the dock and is what the opening dock slides over. */ /* A veil, not a filter (2026-09-24). The blur used to be a `filter` on .main and every panel, which repaints the whole month of cards on every frame of the fade — and it ran at the same moment the bar was sliding, which is what made the slide stutter. Now one fixed layer with `backdrop-filter` sits between the page (panels top out at 70) and the two bars (80), and only its opacity animates, which the GPU does without repainting anything. The colour stands in for the old `opacity: .75`. */ body::after { content: ''; position: fixed; inset: 0; z-index: 75; pointer-events: none; background: rgba(244, 248, 251, .28); -webkit-backdrop-filter: blur(2px) saturate(.9); backdrop-filter: blur(2px) saturate(.9); opacity: 0; transition: opacity .2s ease .12s; } body:has(.dock:hover:not(.is-open))::after, body:has(.assist-rail:hover)::after { opacity: 1; transition-delay: .06s; } /* The other bar goes under the veil with the page, as it did under the blur. */ body:has(.dock:hover:not(.is-open)) .assist-rail, body:has(.assist-rail:hover) .dock { z-index: 74; } @media (prefers-reduced-motion: reduce) { body::after { transition: none; } } /* On a phone the dock is a bottom bar that never widens over the page. */ @media (max-width: 640px) { body::after { display: none; } } .dock.is-open { width: 220px; } .dock.is-open .nb-label { opacity: 1; width: auto; } .dock.is-open .bi-tabgroup-label { opacity: 1; } .dock.is-open .bi-tab { justify-content: flex-start; padding-left: var(--md); padding-right: var(--md); } /* The rail is fixed, so the page has to leave room for it; without this the roster grid runs underneath. The collapsed 76px, not the expanded 220px — the expansion is transient and hovering over content is the point of it. */ .page { padding-right: calc(var(--xl) + 76px); } /* And the same on the left for the Assistant rail, its twin. */ .page { padding-left: calc(var(--xl) + 76px); } /* ── the warning key's panel ── A normal card, parked to the left of the expanded bar. Deliberately not inside the