/* ==========================================================================
   DJ's Landscape Management — Salt Command
   Design tokens from the DJ's Brand Guide (7.22.26)

   Primary   Red #CF0A2C · Yellow #FDE300 · Green #4B8B2A
   Secondary Light Green #9FB78D · Gray #7C858C · Dark Gray #333F48
   Web font  PT Sans (brand guide p.12 — the specified digital typeface)
             PT Sans Narrow stands in for Myriad Pro Bold Condensed headlines.

   Status colour is NEVER the only signal. Every status carries an icon and a
   word as well, because red/green is indistinguishable to ~8% of men.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400&family=PT+Sans+Narrow:wght@400;700&display=swap');

:root {
  /* Brand */
  --red:          #CF0A2C;
  --red-dark:     #A00822;
  --red-tint:     #FCEBEE;
  --yellow:       #FDE300;
  --green:        #4B8B2A;
  --green-dark:   #3A6D20;
  --green-tint:   #EDF5E7;
  --light-green:  #9FB78D;
  --gray:         #7C858C;
  --dark-gray:    #333F48;

  /* Derived UI */
  --ink:          #1D242B;
  --ink-2:        #4A555E;
  --ink-3:        #7C858C;
  --surface:      #FFFFFF;
  --surface-2:    #F6F8F6;
  --surface-3:    #EDF1ED;
  --line:         #DCE2DC;
  --line-strong:  #C3CCC3;

  /* Status — text-safe steps (all >= 4.5:1 on white) */
  --st-critical:      #C00A28;
  --st-critical-bg:   #FCEBEE;
  --st-low:           #8A6A00;
  --st-low-bg:        #FDF6D6;
  --st-watch:         #5B6670;
  --st-watch-bg:      #EEF1F3;
  --st-ok:            #3D7322;
  --st-ok-bg:         #EDF5E7;

  /* Meter fills — allowed to be more saturated than text */
  --fill-critical: #CF0A2C;
  --fill-low:      #E8B900;
  --fill-watch:    #7C858C;
  --fill-ok:       #4B8B2A;

  --radius:    10px;
  --radius-sm: 6px;
  --shadow:    0 1px 2px rgba(29,36,43,.06), 0 2px 8px rgba(29,36,43,.06);
  --shadow-lg: 0 4px 20px rgba(29,36,43,.14);

  --font: 'PT Sans', Arial, Helvetica, sans-serif;
  --font-head: 'PT Sans Narrow', 'PT Sans', Impact, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --nav-h: 60px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--surface-2);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; letter-spacing: .2px; margin: 0; line-height: 1.15; }
h1 { font-size: 30px; }
h2 { font-size: 22px; }
h3 { font-size: 17px; }
a { color: var(--green-dark); }

/* ===== App chrome ======================================================== */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--dark-gray);
  border-bottom: 4px solid var(--red);
  height: var(--nav-h);
  display: flex; align-items: center; gap: 22px;
  padding: 0 20px;
}
/* Brand lockup: the official DJ's logo, then a rule, then the product name.
   The gap is the logo's cap-height, which is the clear space the Brand Guide
   requires (p.7). The logo image is never scaled non-proportionally. */
.brand { display: flex; align-items: center; gap: 19px; text-decoration: none; flex-shrink: 0; }
/* 28px keeps the wordmark ~195px wide — comfortably above the 90px minimum
   in the Brand Guide (p.7) — and leaves 16px of clear space top and bottom,
   which is the cap-height of the "D". */
.brand__logo { height: 28px; width: auto; display: block; flex-shrink: 0; }
.brand__logo--lg { height: 38px; }
.brand__divider { width: 1px; align-self: stretch; margin: 12px 0; background: rgba(255,255,255,.22); flex-shrink: 0; }
.brand__product {
  font-family: var(--font-head); font-size: 17px; font-weight: 700;
  color: #fff; letter-spacing: .4px; white-space: nowrap;
}

/* ===== Navigation ========================================================
   No horizontal scrollbar, at any width. A scrolling nav hides destinations
   behind a gesture people don't think to make, and on a trackpad the bar
   itself is ugly. Instead the links that don't fit move into a "More" menu,
   and below the phone breakpoint the whole thing becomes one menu button.
   ======================================================================== */
.nav {
  display: flex; gap: 2px; margin-left: 8px; flex: 1;
  min-width: 0;          /* lets flex actually shrink instead of overflowing */
  overflow: hidden;      /* never a scrollbar — items move to More instead */
}
.nav a {
  padding: 8px 14px; border-radius: var(--radius-sm);
  color: #C9D2D9; text-decoration: none; font-size: 14px; font-weight: 700;
  white-space: nowrap; transition: background .12s, color .12s;
}
.nav a:hover { background: rgba(255,255,255,.09); color: #fff; }
.nav a.is-active { background: var(--green); color: #fff; }
/* Measured as not fitting — kept in the DOM so the measurement stays stable,
   but out of the bar and rendered in the More menu instead. */
.nav a.is-overflow { display: none; }

.navmore { position: relative; flex-shrink: 0; }
.navmore__btn {
  padding: 8px 12px; border-radius: var(--radius-sm); border: 0; cursor: pointer;
  background: transparent; color: #C9D2D9; font-family: inherit;
  font-size: 14px; font-weight: 700; white-space: nowrap;
}
.navmore__btn:hover { background: rgba(255,255,255,.09); color: #fff; }
.navmore__btn[aria-expanded="true"] { background: rgba(255,255,255,.14); color: #fff; }
.navmore__btn.has-active { background: var(--green); color: #fff; }
.navmore__panel {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  min-width: 210px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 1px;
}
.navmore__panel[hidden] { display: none; }
.navmore__panel a {
  display: block; padding: 10px 12px; border-radius: var(--radius-sm);
  color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 700;
}
.navmore__panel a:hover { background: var(--surface-2); }
.navmore__panel a.is-active { background: var(--green); color: #fff; }

.userchip { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.userchip__name { font-size: 13px; color: #C9D2D9; text-align: right; line-height: 1.25; }
.userchip__role { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--light-green); }

.wrap { max-width: 1400px; margin: 0 auto; padding: 24px 20px 64px; }

.pagehead { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.pagehead__title h1 { margin-bottom: 3px; }
.pagehead__sub { color: var(--ink-3); font-size: 14px; }
.pagehead__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ===== Buttons =========================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  font-family: var(--font); font-size: 14px; font-weight: 700;
  padding: 9px 17px; border-radius: var(--radius-sm);
  border: 1px solid transparent; background: var(--surface); color: var(--ink);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .12s, border-color .12s, transform .06s;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid rgba(75,139,42,.45); outline-offset: 2px; }
.btn--primary { background: var(--green); color: #fff; }
.btn--primary:hover { background: var(--green-dark); }
.btn--danger { background: var(--red); color: #fff; }
.btn--danger:hover { background: var(--red-dark); }
.btn--ghost { border-color: var(--line-strong); background: var(--surface); color: var(--ink-2); }
.btn--ghost:hover { background: var(--surface-3); }
.btn--sm { padding: 5px 11px; font-size: 13px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ===== Cards ============================================================= */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card__head { padding: 15px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.card__body { padding: 18px; }
.card__body--flush { padding: 0; }

/* ===== Stat tiles ======================================================== */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 24px; }
.stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow); position: relative; overflow: hidden;
  text-decoration: none; color: inherit; display: block;
}
.stat::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--line-strong); }
.stat--critical::before { background: var(--fill-critical); }
.stat--low::before      { background: var(--fill-low); }
.stat--info::before     { background: var(--dark-gray); }
.stat--ok::before       { background: var(--fill-ok); }
a.stat:hover { border-color: var(--line-strong); box-shadow: var(--shadow-lg); }
.stat__label { font-size: 11px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--ink-3); font-weight: 700; display: flex; align-items: center; gap: 6px; }
.stat__value { font-family: var(--font-head); font-size: 40px; font-weight: 700; line-height: 1.05; margin-top: 6px; letter-spacing: -.5px; }
.stat__unit  { font-family: var(--font); font-size: 15px; font-weight: 400; color: var(--ink-3); margin-left: 4px; letter-spacing: 0; }
.stat__foot  { font-size: 13px; color: var(--ink-3); margin-top: 4px; }
.stat--critical .stat__value { color: var(--st-critical); }
.stat--low .stat__value      { color: var(--st-low); }

/* ===== Status chips (icon + word + colour — never colour alone) ========== */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase;
  padding: 3px 9px 3px 7px; border-radius: 999px; white-space: nowrap;
  border: 1px solid transparent;
}
.chip__icon { font-size: 11px; line-height: 1; }
.chip--critical { background: var(--st-critical-bg); color: var(--st-critical); border-color: #F2C2CB; }
.chip--low      { background: var(--st-low-bg);      color: var(--st-low);      border-color: #E8D89A; }
.chip--watch    { background: var(--st-watch-bg);    color: var(--st-watch);    border-color: #D3DAE0; }
.chip--ok       { background: var(--st-ok-bg);       color: var(--st-ok);       border-color: #C9DFBB; }
.chip--unset    { background: var(--surface-3);      color: var(--ink-3);       border-color: var(--line); }
.chip--neutral  { background: var(--surface-3);      color: var(--ink-2);       border-color: var(--line); }
.chip--brand    { background: var(--dark-gray);      color: #fff; }

/* Order status chips */
.chip--new        { background: #E7EEF4; color: #1F4E79; border-color: #C6D8E6; }
.chip--sourcing   { background: #FDF6D6; color: var(--st-low); border-color: #E8D89A; }
.chip--dispatched { background: #EDE7F6; color: #4B3B8F; border-color: #D4C9EC; }
.chip--confirmed  { background: var(--st-ok-bg); color: var(--st-ok); border-color: #C9DFBB; }
.chip--in_transit { background: var(--st-ok-bg); color: var(--st-ok); border-color: #C9DFBB; }
.chip--delivered  { background: #E2F0EC; color: #14614F; border-color: #BEDDD5; }
.chip--posted     { background: var(--dark-gray); color: #fff; }
.chip--closed     { background: var(--surface-3); color: var(--ink-3); border-color: var(--line); }
.chip--cancelled  { background: var(--surface-3); color: var(--ink-3); border-color: var(--line); text-decoration: line-through; }
.chip--urgent     { background: var(--st-low-bg); color: var(--st-low); border-color: #E8D89A; }
.chip--emergency  { background: var(--st-critical-bg); color: var(--st-critical); border-color: #F2C2CB; }

/* ===== Meter ============================================================= */
.meter { position: relative; height: 26px; background: var(--surface-3); border-radius: 5px; overflow: hidden; border: 1px solid var(--line); }
.meter__fill { position: absolute; inset: 0 auto 0 0; border-radius: 4px 0 0 4px; transition: width .3s ease; }
.meter__fill--critical { background: var(--fill-critical); }
.meter__fill--low      { background: var(--fill-low); }
.meter__fill--watch    { background: var(--fill-watch); }
.meter__fill--ok       { background: var(--fill-ok); }
.meter__fill--unset    { background: var(--line-strong); }
/* Critical fills also get a diagonal texture so the alarm survives greyscale,
   colour-blind vision and forced-colours mode. */
.meter__fill--critical::after {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.28) 0 4px, transparent 4px 9px);
}
.meter__tick { position: absolute; top: -1px; bottom: -1px; width: 2px; background: var(--dark-gray); opacity: .85; }
.meter__tick--reorder { background: var(--ink-3); opacity: .6; }
.meter__label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 0 9px; font-size: 12px; font-weight: 700; color: var(--ink);
  text-shadow: 0 0 3px rgba(255,255,255,.85), 0 0 6px rgba(255,255,255,.7);
  pointer-events: none;
}
.meter-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); margin-top: 10px; }
.meter-legend span { display: inline-flex; align-items: center; gap: 6px; }
.meter-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.meter-legend .tickdemo { width: 2px; height: 13px; border-radius: 0; background: var(--dark-gray); }

/* ===== Inventory grid ==================================================== */
.section-title {
  display: flex; align-items: center; gap: 10px; margin: 30px 0 12px;
  font-family: var(--font-head); font-size: 19px; font-weight: 700;
}
.section-title::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.section-title .count { font-family: var(--font); font-size: 13px; font-weight: 400; color: var(--ink-3); }

.invgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.invcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 17px; position: relative; }
.invcard--critical { border-color: #EFB6C1; box-shadow: 0 0 0 1px #EFB6C1, var(--shadow); }
.invcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 3px; }
.invcard__loc { font-family: var(--font-head); font-size: 17px; font-weight: 700; }
.invcard__meta { font-size: 12px; color: var(--ink-3); margin-bottom: 13px; }
.invcard__nums { display: flex; align-items: baseline; gap: 8px; margin-bottom: 9px; }
.invcard__qty { font-family: var(--font-head); font-size: 30px; font-weight: 700; letter-spacing: -.5px; }
.invcard__unit { font-size: 13px; color: var(--ink-3); }
.invcard__delta { margin-left: auto; font-size: 12px; color: var(--ink-3); text-align: right; }
.invcard__foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 11px; font-size: 12px; color: var(--ink-3); }
.invcard__cta { margin-top: 12px; display: flex; gap: 7px; }

/* --- a yard's products, inside its card ---------------------------------- */
/* One card per yard rather than one per site/product pair. The products stack
   inside it, worst first, divided by a hairline so the eye can count them. */
.yardrows { display: flex; flex-direction: column; gap: 12px; }
.yardrow { padding-top: 11px; border-top: 1px solid var(--line); }
.yardrow:first-child { padding-top: 4px; border-top: 0; }
.yardrow--critical .yardrow__qty { color: var(--st-critical); }
.yardrow__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.yardrow__name { font-size: 13px; font-weight: 700; }
.yardrow__qty { font-family: var(--font-head); font-size: 21px; font-weight: 700; letter-spacing: -.3px; white-space: nowrap; }
.yardrow__unit { font-family: var(--font); font-size: 12px; font-weight: 400; color: var(--ink-3); margin-left: 4px; }
.yardrow__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--ink-3); }

/* --- the product chooser -------------------------------------------------- */
.picker { position: relative; margin-left: auto; font-family: var(--font); font-size: 13px; font-weight: 400; }
.picker > summary {
  cursor: pointer; list-style: none; padding: 6px 12px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface); white-space: nowrap;
}
.picker > summary::-webkit-details-marker { display: none; }
.picker > summary::after { content: ' ▾'; color: var(--ink-3); }
.picker[open] > summary { border-color: var(--ink-3); }
.picker__body {
  position: absolute; right: 0; z-index: 30; margin-top: 6px; width: 340px; max-height: 60vh;
  overflow-y: auto; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px;
}
.picker__actions { display: flex; gap: 6px; padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.picker__item { display: flex; align-items: center; gap: 9px; padding: 6px 7px; border-radius: 5px; cursor: pointer; }
.picker__item:hover { background: var(--surface-2); }
.picker__item .picker__name { flex: 1; }
.picker__item .muted { font-size: 12px; white-space: nowrap; }

@media (max-width: 700px) {
  .picker__body { width: min(340px, calc(100vw - 40px)); }
}

/* ===== Tables ============================================================ */
.tablewrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th {
  text-align: left; padding: 10px 14px; font-size: 11px; letter-spacing: .9px;
  text-transform: uppercase; color: var(--ink-3); font-weight: 700;
  border-bottom: 1px solid var(--line); background: var(--surface-2); white-space: nowrap;
}
table.data td { padding: 11px 14px; border-bottom: 1px solid var(--surface-3); vertical-align: middle; }
table.data tbody tr:hover { background: var(--surface-2); }
table.data tbody tr.is-selected { background: var(--green-tint); }
table.data tbody tr.is-selected:hover { background: #E3EFDA; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data .muted { color: var(--ink-3); font-size: 12px; }
.rowlink { cursor: pointer; }

/* ===== Forms ============================================================= */
.field { margin-bottom: 15px; }
.field label { display: block; font-size: 12px; font-weight: 700; color: var(--ink-2); margin-bottom: 5px; letter-spacing: .3px; }
.field .hint { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=datetime-local], input[type=tel], select, textarea {
  width: 100%; padding: 9px 11px; font-family: var(--font); font-size: 14px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(75,139,42,.35); outline-offset: 0; border-color: var(--green); }
textarea { resize: vertical; min-height: 70px; }
.formrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 15px; }
fieldset { border: 0; padding: 0; margin: 0; }

/* ===== Layout helpers ==================================================== */
.grid2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; align-items: start; }
.grid-half { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 980px) { .grid2, .grid-half { grid-template-columns: 1fr; } }
.stack > * + * { margin-top: 14px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.spacer { flex: 1; }
.muted { color: var(--ink-3); }
.small { font-size: 13px; }
.mono { font-family: var(--font-mono); font-size: 12.5px; }
.nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }

/* ===== Alerts ============================================================ */
.alert { border-left: 4px solid var(--gray); background: var(--surface-3); padding: 12px 15px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 14px; }
.alert--danger { border-color: var(--red); background: var(--red-tint); }
.alert--warn   { border-color: #E8B900; background: var(--st-low-bg); }
.alert--ok     { border-color: var(--green); background: var(--green-tint); }
.alert--info   { border-color: var(--dark-gray); background: var(--surface-3); }
.alert strong { display: block; margin-bottom: 2px; }
/* The block rule is for the alert's lead-in line. Inside body copy — a list of
   steps, a sentence naming a screen — a bolded phrase must stay inline or every
   emphasis snaps its own line and the instruction becomes unreadable. */
.alert p strong,
.alert li strong,
.alert ol strong,
.alert ul strong { display: inline; margin-bottom: 0; }

/* ===== Timeline ========================================================== */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 16px 24px; border-left: 2px solid var(--line); }
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before { content: ''; position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-strong); }
.timeline li.is-done::before { background: var(--green); border-color: var(--green); }
.timeline li.is-current::before { background: var(--red); border-color: var(--red); box-shadow: 0 0 0 4px var(--red-tint); }
.timeline__label { font-weight: 700; font-size: 14px; }
.timeline__meta { font-size: 12px; color: var(--ink-3); }

/* ===== Modal ============================================================= */
.modal-backdrop { position: fixed; inset: 0; background: rgba(29,36,43,.55); z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; }
.modal { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg); width: 100%; max-width: 620px; }
.modal--wide { max-width: 900px; }
.modal__head { padding: 17px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.modal__body { padding: 20px; }
.modal__foot { padding: 15px 20px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 9px; background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius); }
.modal__x { background: none; border: 0; font-size: 22px; line-height: 1; color: var(--ink-3); cursor: pointer; padding: 2px 6px; }

/* ===== Toast ============================================================= */
.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 200; display: flex; flex-direction: column; gap: 9px; max-width: 400px; }
.toast { background: var(--dark-gray); color: #fff; padding: 12px 16px; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); font-size: 14px; border-left: 4px solid var(--green); animation: slideIn .2s ease; }
.toast--error { border-left-color: var(--red); }
.toast--warn { border-left-color: #E8B900; }
@keyframes slideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ===== Login ============================================================= */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--dark-gray); }
.login-card { background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-lg); width: 100%; max-width: 420px; overflow: hidden; }
.login-card__head { background: var(--dark-gray); padding: 24px 28px; border-bottom: 4px solid var(--red); }
/* The card is 420px wide, so 364px of usable width inside the padding. At 38px
   tall the logo alone is 265px, which pushed "Salt Command" off the edge. 30px
   keeps the wordmark at 209px — still well above the Brand Guide's 90px
   minimum (p.7) — and the whole lockup lands at ~348px with room to spare. */
.login-card__head .brand { gap: 14px; justify-content: center; }
.login-card__head .brand__logo--lg { height: 30px; }
.login-card__body { padding: 26px 28px 30px; }

/* ===== Misc ============================================================== */
.empty { text-align: center; padding: 44px 20px; color: var(--ink-3); }
.empty__icon { font-size: 34px; opacity: .35; margin-bottom: 8px; }
.loading { padding: 44px; text-align: center; color: var(--ink-3); }
.tabs { display: flex; gap: 3px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; }
.tabs button { background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 15px; font-family: var(--font); font-size: 14px; font-weight: 700; color: var(--ink-3); cursor: pointer; white-space: nowrap; }
.tabs button.is-active { color: var(--ink); border-bottom-color: var(--red); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 14px; }
.kv dt { color: var(--ink-3); font-size: 13px; }
.kv dd { margin: 0; font-weight: 700; }
.pill-toggle { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; }
.pill-toggle button { background: var(--surface); border: 0; padding: 6px 14px; font-family: var(--font); font-size: 13px; font-weight: 700; color: var(--ink-2); cursor: pointer; }
.pill-toggle button.is-active { background: var(--dark-gray); color: #fff; }

@media (max-width: 820px) {
  /* Below this the bar can't hold links at all, so every destination lives in
     the menu. One button, full-height targets, nothing hidden behind a
     sideways swipe. */
  .topbar { height: auto; padding: 9px 12px; gap: 10px; }
  .brand { flex: 1; min-width: 0; }
  .brand__product { display: none; }
  .nav { display: none; }
  .navmore { order: 3; }
  .navmore__btn { border: 1px solid rgba(255,255,255,.22); }
  .navmore__panel { min-width: 240px; }
  .navmore__panel a { padding: 13px 14px; }   /* thumb-sized */
}

@media (max-width: 720px) {
  .wrap { padding: 16px 12px 48px; }
  h1 { font-size: 24px; }
  .brand__divider, .brand__product { display: none; }
  .userchip__name { display: none; }
  .stat__value { font-size: 32px; }
  .pagehead__actions { width: 100%; }
  .pagehead__actions .btn { flex: 1; }
}

@media print {
  .topbar, .pagehead__actions, .invcard__cta { display: none; }
  .card, .invcard, .stat { box-shadow: none; break-inside: avoid; }
}

/* Forced colours / high contrast — status must not rely on background paint */
@media (forced-colors: active) {
  .chip { border: 1px solid CanvasText; }
  .meter__fill { border-right: 2px solid CanvasText; }
}

/* ===== Photo picker (optional count photos) ==============================
   Small, quiet, and out of the way — a count without photos is still a count,
   so this must not read as a required field. */
.shotgrid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.shot {
  position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center;
  border: 2px dashed var(--line-strong); border-radius: var(--radius);
  background: var(--surface); padding: 14px 12px; cursor: pointer;
}
.shot--add { min-height: 92px; }
.shot--add input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.shot__icon { font-size: 22px; line-height: 1; margin-bottom: 5px; }
.shot__label { font-size: 14px; font-weight: 700; }
.shot__hint { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.shot--set {
  width: 92px; height: 92px; padding: 0; margin: 0; overflow: hidden;
  border-style: solid; border-color: var(--green);
}
.shot--set img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot--busy { width: 92px; height: 92px; padding: 0; border-style: solid; }
.shot__x {
  position: absolute; top: 3px; right: 3px; width: 22px; height: 22px;
  border: 0; border-radius: 50%; background: rgba(29,36,43,.72); color: #fff;
  font-size: 15px; line-height: 1; cursor: pointer; padding: 0;
}

/* --- Purchase orders ------------------------------------------------------
   The drawdown bar. Three segments rather than a single fill, because the
   interesting distinction is not drawn-vs-left but drawn / already promised /
   genuinely still callable. Each segment is labelled in the legend beneath, so
   the meaning never rests on colour alone. */
.postack { display: grid; gap: 14px; }
.po--closed { opacity: .72; }

.pobar {
  display: flex; height: 10px; margin-top: 14px; border-radius: 5px;
  overflow: hidden; background: var(--surface-2); border: 1px solid var(--line);
}
.pobar__seg { display: block; height: 100%; }
.pobar__seg--drawn     { background: var(--dark-gray); }
.pobar__seg--adjusted  { background: var(--gray); }
.pobar__seg--committed { background: var(--yellow); }
.pobar__seg--left      { background: var(--fill-ok); }

.polegend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; }
.polegend span { display: inline-flex; align-items: center; gap: 6px; }
.polegend .dot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; flex: none; }
.dot--drawn     { background: var(--dark-gray); }
.dot--adjusted  { background: var(--gray); }
.dot--committed { background: var(--yellow); }
.dot--left      { background: var(--fill-ok); }

/* A source that costs money for the salt as well as the freight needs its
   price visible at the moment of choosing, not one screen later. */
.origin-po { border-left: 3px solid var(--yellow); padding-left: 10px; }
.landed { display: block; font-size: 12px; color: var(--ink-3); font-weight: 400; }