/* ═══════════════════════════════════════════════════════════════════════════
   SHELL — the rail, the user chip, the greeting, and Inventory
   ═══════════════════════════════════════════════════════════════════════════

   This file owns #nav (the rail), the chip you open your profile from, the
   greeting above the link list, the two icon/label buttons pinned to the
   rail's foot, and the Inventory screen. Nothing else — every other screen
   has its own rf-*.css file sitting beside this one, and rf-base.css is the
   only place a colour or a size may be invented. Everything below reads
   those tokens and nothing else.

   ── WHAT WAS WRONG ───────────────────────────────────────────────────────

   The rail was painted for a phone: a saturated gradient standing in for
   pool water, with caustic light drawn across it in CSS. On a desktop
   sidebar that is wallpaper, and it carried three separate "you are here"
   treatments at once (a solid fill, an orange tint on two items, and the
   link list's own hover) so nothing actually read as current.

   The user chip was styled once, for that gradient: translucent white glass,
   white text. rf-base's light theme gives the rail a plain white ground, so
   the chip's white text sat on white and the technician's own name
   disappeared. The same bug was hiding in the "on the clock" pill and the
   rail's own scrollbar thumb — every one of them assumes a dark backdrop
   that the token system no longer guarantees.

   Inventory read as thirty loose index cards: every row its own bordered,
   shadowed, rounded box, each with a 42px red minus and green plus beside
   it regardless of whether the stock behind them was healthy. A store with
   nine low items became nine alarms instead of nine numbers to glance down.

   ── THE FIX ──────────────────────────────────────────────────────────────

   One active state in the rail — an accent bar plus a raised fill — and
   nowhere else does the accent appear. Today and Schedule are pulled to the
   top because they are used every day, not because they are coloured
   differently; position is doing the signalling that colour used to do
   worse. The chip, the clock pill and the scrollbar are read off the
   neutral ramp so they hold up on either ground. Inventory becomes one
   panel per category with plain rows in it, hairline-separated, where the
   only colour left is on the stock count itself — a warm warning edge and
   a warm number for low stock, a red one for critical, nothing else tinted.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {

  /* ── THE RAIL ──────────────────────────────────────────────────────────
     app.css still owns position, width and the flex layout that turns the
     mobile banner into a fixed sidebar — none of that is repeated here.
     This only repaints it: a flat panel instead of a gradient standing in
     for water, a hairline instead of a drop shadow, and the caustic-light
     pseudo-elements turned off because there is nothing underneath them to
     catch light on a sidebar. */
  #nav {
    background: var(--w-rail);
    border-right: 1px solid var(--w-line);
    box-shadow: none;
    /* The thumb was translucent white, sized for the gradient rail. On the
       light theme's white rail that thumb is white on white — invisible
       until you already know where to drag. */
    scrollbar-color: var(--w-line) transparent;
    /* The rail darkens very slightly downward so it sits behind the content
       beside it rather than level with it. One step of the ramp across the
       whole height — if the gradient is visible as a gradient it is wrong. */
    background-image: var(--w-g-rail);
  }
  #nav::before, #nav::after { display: none; }
  #nav::-webkit-scrollbar-thumb { background: var(--w-line); background-clip: padding-box; }
  #nav::-webkit-scrollbar-thumb:hover { background: var(--w-ink-3); background-clip: padding-box; }

  /* ── The user chip ─────────────────────────────────────────────────────
     app.css paints this for the gradient rail: translucent white fill,
     white text, white border, blurred glass. On the light theme's white
     rail that is white on white and the technician's own name vanishes —
     the same class of bug the chip was supposed to avoid. The broad `* `
     reset is a safety net for anything inside the chip not named below. */
  .nav-me {
    background: var(--w-raised);
    border: 1px solid var(--w-line);
    box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .nav-me:hover { background: var(--w-panel); }
  .nav-me:active { background: var(--w-hover); }
  /* `#nav-user` has to be named by its id. app.css sets `#nav-user { color:
     #fff }`, and an id beats any number of classes whatever the load order —
     so `.nav-me *` loses and the name stays white, which on the day theme's
     white rail means it is simply not there. */
  .nav-me, .nav-me * { color: var(--w-ink); }
  #nav-user { color: var(--w-ink); }
  .hero-who small { color: var(--w-ink-3); }
  .nav-me-av {
    background: var(--w-accent); border: 0;
    color: var(--w-accent-ink); box-shadow: none;
  }
  .nav-me-go { stroke: var(--w-ink-3); }

  /* ── The greeting ──────────────────────────────────────────────────────
     "Good evening, Georgi" ran at 2.1rem in the rail's best, topmost space —
     a banner headline above a menu. It is who is logged in, not news, so it
     is demoted to the smallest line the type scale allows. */
  .greet { margin-top: var(--w-3); color: var(--w-ink); text-shadow: none; }
  .greet .greet-hi {
    font-size: var(--w-t-label); font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--w-ink-3); opacity: 1;
  }
  .greet h1 {
    font-size: var(--w-t-body); font-weight: 700; letter-spacing: -.02em;
    line-height: 1.2; color: var(--w-ink); margin-top: var(--w-1);
  }
  .greet .greet-meta {
    margin-top: var(--w-1); font-size: var(--w-t-label); font-weight: 600;
    color: var(--w-ink-3); opacity: 1;
  }
  .greet .greet-meta::before { background: var(--w-ink-3); }

  /* The on-the-clock pill is part of the same greeting block and carries
     the same assumption: a dark, glassy badge meant to float on the
     gradient. Read off the ramp instead, with the status living on the dot
     and the bold figure rather than on the pill's own colour. */
  .on-clock {
    margin-top: var(--w-3);
    background: var(--w-raised); border: 1px solid var(--w-line);
    color: var(--w-ink-2); text-shadow: none; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .on-clock strong { color: var(--w-ink); }
  .on-clock-dot { background: var(--w-good); }
  /* The pulse ring is an animation, not a static colour, so the override
     has to redeclare the keyframes rather than a property — @keyframes is
     matched by name globally, and the last one defined wins. Scoped to this
     query only, so the phone's pin-sharp green dot is untouched. */
  @keyframes on-clock-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--w-good) 80%, transparent),
                        0 0 9px color-mix(in srgb, var(--w-good) 90%, transparent); }
    70%  { box-shadow: 0 0 0 8px color-mix(in srgb, var(--w-good) 0%, transparent),
                        0 0 9px color-mix(in srgb, var(--w-good) 50%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--w-good) 0%, transparent),
                        0 0 9px color-mix(in srgb, var(--w-good) 90%, transparent); }
  }

  /* ── The bottom rail buttons ──────────────────────────────────────────
     Language, theme, password and logout are plumbing, pinned to the foot
     of the rail by app.css's layout. They were translucent-white circles
     for the same gradient rail as the chip, with the same failure on a
     white ground. */
  .nav-right { border-top: 1px solid var(--w-line); }
  .nav-right button {
    background: var(--w-raised); border: 1px solid var(--w-line);
    color: var(--w-ink-2); box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .nav-right button:hover { background: var(--w-panel); color: var(--w-ink); }
  .nav-right button:active { background: var(--w-hover); }

  /* ── The link list ─────────────────────────────────────────────────────
     One active state: a raised fill plus a left accent bar. Nothing else in
     the list — not an outline, not a tint, not a second fill colour —
     carries that meaning, so there is exactly one way to read "you are
     here" instead of three. */
  .nav-links { border-top: 1px solid var(--w-line); }
  .nav-links a {
    position: relative;
    color: var(--w-ink-2); font-weight: 550;
  }
  .nav-links a .nl-i { color: var(--w-ink-3); }
  .nav-links a:hover { background: var(--w-raised); color: var(--w-ink); }
  .nav-links a:hover .nl-i { color: var(--w-ink-2); }
  .nav-links a.active { background: var(--w-raised); color: var(--w-ink); font-weight: 700; }
  .nav-links a.active .nl-i { color: var(--w-accent); }
  .nav-links a.active::before {
    content: ''; position: absolute; left: calc(-1 * var(--w-2)); top: var(--w-2); bottom: var(--w-2);
    width: 2px; border-radius: 0 2px 2px 0; background: var(--w-accent);
  }

  /* Today and Schedule are where the business actually runs the day from;
     everything else below them is reference material opened less often.
     That earns them the top of the list, not a different colour — colour
     stays reserved for "selected", full stop, so it keeps meaning one
     thing. app.css styles both by id with the orange tint this replaces,
     and id beats class on specificity regardless of load order, so the
     neutral look has to be re-stated by id here too. */
  #nav-today    { order: -3; }
  #nav-schedule { order: -2; }
  #nav-today, #nav-schedule { background: none; box-shadow: none; color: var(--w-ink-2); }
  #nav-today:hover, #nav-schedule:hover { background: var(--w-raised); color: var(--w-ink); }
  #nav-today.active, #nav-schedule.active {
    background: var(--w-raised); color: var(--w-ink); font-weight: 700; box-shadow: none;
  }
  #nav-today.active .nl-i, #nav-schedule.active .nl-i { color: var(--w-accent); }

  /* The divider has to follow whichever of the pair is actually last on
     screen. Schedule only exists for admins — techs never see it, dropped
     with the app's own .hidden utility — so a fixed line under Today would
     either sit with nothing pinned above it (tech view, correct) or sit
     between the two pinned items instead of after them (admin view,
     wrong). :has() lets the divider follow the real DOM instead of
     guessing at a role. */
  #nav-schedule:not(.hidden) {
    border-bottom: 1px solid var(--w-line);
    margin-bottom: var(--w-2);
  }
  #nav-today:not(:has(~ #nav-schedule:not(.hidden))) {
    border-bottom: 1px solid var(--w-line);
    margin-bottom: var(--w-2);
  }

  /* ── INVENTORY ─────────────────────────────────────────────────────────
     The panel look (background, border, radius, shadow) for .chem-group
     already comes from rf-base's shared rule — only the spacing inside it
     and the rows within belong here. */
  .chem-group { padding: var(--w-4) var(--w-4) var(--w-1); margin-bottom: var(--w-4); }

  /* The section label is indented to match, so the rows below still line up
     under it. Its rule lives in rf-base.css and is shared with other screens'
     headings, which must not move -- hence the override here. */
  .chem-group-header { padding-left: var(--w-3); }

  /* Thirty cards becomes one list: app.css lays this out as a two- or
     three-column grid of bordered tiles, which is the "floating cards"
     look this screen is being pulled away from. A plain block lets the
     rows below stack as a single table-like column instead. */
  .chem-group-body { display: block; }

  .chem-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: var(--w-3);
    /* The left padding is what keeps the stock-state bar off the name. The
       mark is drawn as a 2px inset shadow at the row's left edge, and with
       no padding the first letter started at that same x -- so "Shock 50lb"
       sat against the red. 12px is enough to read as a margin rather than
       an underline that went wrong. */
    padding: var(--w-2) 0 var(--w-2) var(--w-3);
    background: none; border: 0; border-radius: 0; box-shadow: none;
    border-bottom: 1px solid var(--w-line-2);
    transition: background .12s ease;
  }
  .chem-group-body > .chem-row:last-child { border-bottom: 0; }
  .chem-row:hover { background: var(--w-hover); }
  .chem-row:active { transform: none; }   /* a mobile press-scale has no place under a mouse */

  .chem-name {
    display: flex; align-items: baseline; gap: var(--w-2);
    font-size: var(--w-t-body); font-weight: 600; color: var(--w-ink);
  }
  /* app.css makes this a block, which doubles every row's height by giving
     the unit its own line under the name. */
  .chem-unit {
    display: inline; margin-top: 0;
    font-size: var(--w-t-label); font-weight: 600; letter-spacing: .07em;
    text-transform: uppercase; color: var(--w-ink-3);
  }

  /* The count is the one place colour is allowed to carry meaning in this
     row, so it is also the one place it is kept — right-aligned and
     tabular so a column of them can be scanned down, not centred and
     oversized the way app.css set it for a single-column phone list. */
  .chem-count {
    min-width: var(--w-6); text-align: right;
    font-size: var(--w-t-body); font-weight: 700; line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--w-ink);
  }
  .chem-count.stock-low  { color: var(--w-warn); }
  .chem-count.stock-crit { color: var(--w-bad); }

  /* A row in trouble gets a mark at its own edge, not a wash of colour
     across the whole row — app.css tints the entire critical row red,
     which turns a shopping list into what reads as an incident board. */
  .chem-row.stock-low,
  .chem-row.stock-crit {
    /* app.css paints the critical row with a gradient mixed from --bad and
       --surface, and recolours its border to match. On the night ground that
       lands as a pale navy band across the row — six of them in a list of
       nine, which reads as an incident board rather than a shopping list.
       Both have to be named here or the gradient simply stays. */
    background: none;
    border-color: var(--w-line-2);
  }
  .chem-row.stock-low  { box-shadow: inset 2px 0 0 var(--w-warn); }
  .chem-row.stock-crit { box-shadow: inset 2px 0 0 var(--w-bad); }

  /* Take and restock are plumbing, not a verdict on the stock they touch —
     app.css makes them 42px with a permanent red/green tint, so a healthy
     73 sits flanked by an alarm colour for no reason. Neutral squares here;
     colour only shows up on the hover you are about to commit to. 24px is
     the nearest step on the spacing scale to the 26px these were sized at —
     visually identical at this size, and it keeps every dimension in this
     file on the same ramp as everything else. */
  .chem-row .btn-take,
  .chem-row .btn-restock {
    width: var(--w-5); height: var(--w-5); padding: 0;
    display: grid; place-items: center;
    border-radius: var(--w-r);
    border: 1px solid var(--w-line);
    background: var(--w-raised);
    color: var(--w-ink-2);
    font-size: var(--w-t-head); font-weight: 700; line-height: 1;
    box-shadow: none;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
  }
  .chem-row .btn-take:hover {
    background: var(--w-panel); color: var(--w-ink); border-color: var(--w-ink-3);
  }
  .chem-row .btn-restock:hover {
    background: var(--w-accent); color: var(--w-accent-ink); border-color: var(--w-accent);
  }

  /* The low-stock notice reads as a warning light, not a second heading —
     app.css fills it as a solid bordered card that competes with
     "Chemical Inventory" directly above it. A left accent-warn edge says
     the same thing at a volume that fits underneath a page title. The led
     and the count inside it move off app.css's own --bad red: "running
     low" is the warn tier everywhere else on this screen, and a quiet
     notice should not be the one place that still reads as an alarm. */
  .lowdot {
    background: none;
    border: 1px solid var(--w-line);
    border-left: 2px solid var(--w-warn);
    border-radius: var(--w-r);
    padding: var(--w-2) var(--w-3);
    margin-bottom: var(--w-4);
    box-shadow: none;
  }
  .lowdot:hover { background: var(--w-raised); border-color: var(--w-line); }
  .lowdot-txt { font-size: var(--w-t-small); color: var(--w-ink-2); }
  .lowdot-txt strong { color: var(--w-warn); }
  .lowdot-led {
    background: var(--w-warn);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--w-warn) 18%, transparent),
                0 0 9px color-mix(in srgb, var(--w-warn) 55%, transparent);
  }
  .lowdot-go { stroke: var(--w-ink-3); }
}