/* ═══════════════════════════════════════════════════════════════════════════
   WATERLINE — desktop tokens, and the two areas that use them
   ═══════════════════════════════════════════════════════════════════════════

   A larger design system was built across every screen and reviewed. Georgi
   kept two parts of it — the navigation rail and the chemical inventory — and
   the rest was left on the `redesign` branch rather than shipped.

   So this file is deliberately narrow. It defines the colour, type and
   spacing tokens, and then applies them to EXACTLY those two areas. Every
   rule below is scoped to `#nav` or `#screen-inventory`. No other screen
   changes, which is the point: the rest of the app keeps the styling it has
   today until he asks for more of it.

   The palette it uses is the app's own — see the block below. The geometry
   (spacing rhythm, type scale, radii) is defined here because theme.css does
   not cover it.

   ── SCOPE ────────────────────────────────────────────────────────────────

   Desktop only, from 1024px. The phone is what technicians hold at the
   poolside: 42px targets for a thumb in sunlight, not 26px ones for a mouse.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   THE PALETTE — the app's own, not a new one
   ═══════════════════════════════════════════════════════════════════════════

   Two palettes were tried here and both were rejected: one mixed by eye, and
   one taken from Radix Colors. Georgi wanted the colours the app already had.

   So nothing below invents a value. Every token POINTS AT the variable that
   theme.css already defines — the same palette every other screen in the app
   has been using all along. Three consequences, all of them good:

     · The rail and Inventory cannot drift away from the rest of the app,
       because they are reading the same source.
     · The light/dark toggle keeps working with no extra code: theme.css
       already swaps these per theme, and the tokens follow.
     · Changing a colour in theme.css changes it here too, which is the
       behaviour anyone would expect and the previous versions did not have.

   What this layer still provides is the GEOMETRY — the spacing rhythm, the
   type scale, the two radii — because that is what the structural work below
   needs and theme.css does not define it.

   One number worth stating rather than burying: --text-muted on a dark panel
   measures 4.26:1, just under the 4.5 the rest clear. That is the app's
   existing value, used on every screen today, so this is the status quo
   rather than a regression — but it is the one colour here I would raise if
   the label text ever needs to be read in a van in sunlight.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Both themes, by reference ──────────────────────────────────────────────
   theme.css defines these under :root[data-theme="light"] and ["dark"], so a
   single mapping covers both — there is nothing to keep in sync.            */
:root {
  --w-ground:   var(--bg);
  --w-panel:    var(--surface);
  --w-raised:   var(--surface-2);
  --w-sunk:     var(--input-bg);
  --w-line:     var(--border);
  /* The hairline between rows: the same border, softened toward the surface
     it sits on, so a list of rows does not read as a grid of boxes. */
  --w-line-2:   color-mix(in srgb, var(--border) 55%, var(--surface));

  --w-ink:      var(--text);
  --w-ink-2:    var(--text-2);
  --w-ink-3:    var(--text-muted);

  --w-accent:    var(--brand);
  --w-accent-2:  var(--brand-2);
  --w-accent-ink:var(--brand-ink);
  --w-accent-sub:var(--brand-soft);

  --w-bad:      var(--bad);
  --w-warn:     var(--warn);
  --w-good:     var(--ok);

  --w-rail:     var(--nav-bg);
  --w-hover:    color-mix(in srgb, var(--text) 5%, transparent);
  --w-shadow:   var(--sh-s);

  /* ── Gradients ──────────────────────────────────────────────────────────
     Worth stating because it is a trap: gradients are a large part of why the
     old interface read as generated — a saturated gradient hero, a gradient
     rail, gradient-filled badges, colour moving everywhere for decoration.

     These do the opposite job. Each is mixed from the palette's OWN tokens
     and moves a few percent, never between hues. A surface should read as
     lit, not as having a gradient: if you can see where it starts and stops,
     it is too strong.

     The rail is the exception, and deliberately so — it uses the two rail
     tones theme.css already defines for exactly this, so the rail keeps the
     look it has always had.                                                 */
  --w-g-ground: linear-gradient(177deg,
                  color-mix(in srgb, var(--surface) 35%, var(--bg)) 0%,
                  var(--bg) 46%,
                  color-mix(in srgb, var(--text) 3%, var(--bg)) 100%);
  /* NOT from --rail-1/--rail-2. Those are the ORIGINAL rail's tones, and in
     the day theme they are literally var(--brand) and var(--brand-2) --
     because the old rail was a blue slab with white text on it. This rail is
     styled the other way round: its text is --w-ink, dark, for a light
     ground. Painting it brand blue left every nav item dark-on-blue and
     effectively invisible, which is exactly what the day theme looked like.

     So the rail's gradient is derived from the rail's OWN ground instead,
     and works whichever theme that ground belongs to. */
  --w-g-rail:   linear-gradient(185deg,
                  color-mix(in srgb, var(--surface) 45%, var(--nav-bg)) 0%,
                  var(--nav-bg) 62%,
                  color-mix(in srgb, var(--text) 4%, var(--nav-bg)) 100%);
  --w-g-panel:  linear-gradient(180deg,
                  color-mix(in srgb, var(--surface-2) 45%, var(--surface)) 0%,
                  var(--surface) 100%);
  --w-g-accent: linear-gradient(180deg,
                  color-mix(in srgb, var(--surface) 12%, var(--brand)) 0%,
                  var(--brand) 55%,
                  var(--brand-2) 100%);
  --w-g-sheen:  linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 60%);
}

/* The night rail keeps the two tones theme.css defines for it — that is the
   rail Georgi just signed off, and unlike the day theme those tones are real
   rail colours rather than the brand. */
:root[data-theme="dark"] {
  --w-g-rail: linear-gradient(185deg, var(--rail-1) 0%, var(--rail-2) 100%);
}

/* ── Geometry and type scale ────────────────────────────────────────────── */
:root {
  /* Three radii. Rows get none, because a row is not an object. */
  --w-r:        5px;    /* controls */
  --w-r-panel:  8px;    /* panels */

  /* 4px rhythm. Every margin and padding below is one of these. */
  --w-1: 4px;  --w-2: 8px;  --w-3: 12px; --w-4: 16px;
  --w-5: 24px; --w-6: 32px; --w-7: 48px;

  /* Five sizes, and only five. */
  --w-t-label: .6875rem;  /* 11px — uppercase column and section labels */
  --w-t-small: .8125rem;  /* 13px — secondary text */
  --w-t-body:  .875rem;   /* 14px — rows, controls, body */
  --w-t-head:  1rem;      /* 16px — section titles */
  --w-t-page:  1.25rem;   /* 20px — page titles */
}


@media (min-width: 1024px) {

  /* ── The two areas, and only these two ─────────────────────────────────── */

  /* The rail is on every screen, so its ground is set here; the page ground
     is deliberately NOT changed, because every other screen is still styled
     for the one it has. */

  /* Inventory's own ground and heading. Scoped to the screen so the identical
     markup on Reports, Customers and the rest is untouched. */
  #screen-inventory { background: var(--w-ground); color: var(--w-ink); }

  #screen-inventory .screen-header {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--w-4);
    padding-bottom: var(--w-3); margin-bottom: var(--w-4);
    border-bottom: 1px solid var(--w-line);
  }
  #screen-inventory .screen-header h2 {
    font-size: var(--w-t-page); font-weight: 700;
    letter-spacing: -.025em; color: var(--w-ink);
  }
  #screen-inventory .last-updated { color: var(--w-ink-3); }

  /* One panel per group, with rows inside it — rather than a grid of thirty
     bordered tiles. rf-shell.css gives this its spacing; the surface itself
     is defined here because it is the same panel every other screen would
     get if the rest of the system were switched on. */
  #screen-inventory .chem-group {
    background: var(--w-panel);
    border: 1px solid var(--w-line);
    border-radius: var(--w-r-panel);
    box-shadow: var(--w-shadow);
  }

  /* The decorative icon badges. A droplet beside the word "Liquid" is the
     word "Liquid" twice. */
  #screen-inventory .screen-header h2 > .badge,
  #screen-inventory .chem-group-header .badge { display: none; }

  /* Section labels: small, spaced, quiet, over a hairline. Typography does
     the separating so the boxes do not have to. */
  #screen-inventory .chem-group-header {
    display: flex; align-items: center; gap: var(--w-2);
    /* The left padding matches the rows beneath, which carry 12px so the
       stock-state bar at their left edge clears the chemical's name. Set
       here rather than in rf-shell.css because this selector carries an id
       and would outrank a plain class override there. */
    padding: 0 0 7px var(--w-3); margin: 0 0 2px;
    border-bottom: 1px solid var(--w-line);
    background: none;
    font-size: var(--w-t-label); font-weight: 800;
    letter-spacing: .09em; text-transform: uppercase;
    color: var(--w-ink-3);
  }

  /* The search field was as tall as a hero. */
  #screen-inventory input[type="search"] {
    height: 34px; padding: 0 var(--w-3);
    border-radius: var(--w-r) !important;
    background: var(--w-panel); border: 1px solid var(--w-line);
    color: var(--w-ink); font-size: var(--w-t-body);
  }
  #screen-inventory input[type="search"]:focus {
    outline: none; border-color: var(--w-accent);
    box-shadow: 0 0 0 3px var(--w-accent-sub);
  }
  #screen-inventory ::placeholder { color: var(--w-ink-3); }

  #screen-inventory .empty-state {
    color: var(--w-ink-3); font-size: var(--w-t-small);
    padding: var(--w-5) 0; text-align: center;
  }
}