/* =========================================================================
   OPERO365 WMS — brand layer
   Loaded AFTER the WMS's own inline stylesheet, so at equal specificity
   these rules win. Tokens encode the approved brand decisions only
   (Opero365_Colour_Specifications.txt, Opero365_Typography_Specifications.txt).
   Applied to the COPY of the WMS by brand/apply_brand.py; the replica is
   never touched.
   ========================================================================= */

/* Inter is the approved product / UI typeface. Self-hosted, official build. */
@font-face {
  font-family: "InterVariable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/brand/InterVariable.woff2") format("woff2");
}

:root {
  /* --- Approved palette. These five values are the colour system. --- */
  --carbon:   #0A0A0A;
  --white:    #FAFAF9;
  --graphite: #1E1E1E;
  --silver:   #BDBDBD;
  --accent:   #2457FF;   /* Opero Blue: a state, never decoration */

  /* The WMS's own "--blue" token is its PRIMARY colour (headers, active
     controls, the big rack and camera signposts). Primary is Carbon. */
  --blue: var(--carbon);

  /* Operational status — the floor reads a line's state by colour from
     arm's length (red / yellow / green scan lines, urgent, on hold). These
     are the one deliberate exception to the five-value palette, kept to
     status only and tuned to sit quietly with it. Never used decoratively. */
  --green:     #1B7F4A;
  --yellow:    #B7860B;
  --amber-ink: #6B4E00;
  --red:       #B3261E;

  /* --- Surfaces and text roles --- */
  --bg:    var(--white);
  --card:  var(--white);
  --text:  var(--carbon);
  --sub:   rgba(10, 10, 10, 0.62);
  --quiet: rgba(10, 10, 10, 0.62);
  --meta:  rgba(10, 10, 10, 0.58);
  --rule:        rgba(10, 10, 10, 0.14);
  --rule-strong: rgba(10, 10, 10, 0.28);
  --tint:        rgba(10, 10, 10, 0.06);
  --line:  var(--rule);

  --font-ui: "InterVariable", "Inter", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --radius: 2px;   /* engineered, not bubbly */
}

body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  font-feature-settings: "tnum" 1;   /* tabular numerals: qty, MRP, racks */
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea, summary { font-family: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3, h4 { letter-spacing: -0.012em; font-weight: 600; }
b, strong { font-weight: 600; }

/* -------------------------------------------------------------------------
   Header — the logo top-left, quiet until needed
   ------------------------------------------------------------------------- */
header {
  background: var(--white);
  color: var(--carbon);
  border-bottom: 1px solid var(--rule);
  padding: 9px 12px;
  gap: 8px;
  font-weight: 500;
}
header a.brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  padding: 0;
  margin-right: 2px;
}
/* The logo is 1800x480 (3.75:1): height drives it, width is never set. */
header a.brand img { height: 26px; width: auto; display: block; }
@media (min-width: 900px) { header a.brand img { height: 30px; } }
header h1, header .htitle {
  font-size: 15px;
  font-weight: 500;
  color: var(--quiet);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
header button, header a.hbtn {
  background: transparent;
  color: var(--carbon);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 7px 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
header button:empty { display: none; }   /* the user button before sign-in */
header #presence-btn { font-size: 13px; font-weight: 500; background: transparent; padding: 7px 9px; }
/* On shift is a state, so it earns blue. */
header #presence-btn.on { background: var(--accent); border-color: var(--accent); color: var(--white); }
header #refresh-btn, header #back-btn { padding: 6px 9px; font-size: 16px; line-height: 1.2; }
@media (max-width: 560px) {
  header { flex-wrap: wrap; row-gap: 4px; }
  /* The context line drops under the logo row on a phone or a scanner. */
  header h1 { flex: 1 0 100%; order: 10; font-size: 14px; }
}

/* -------------------------------------------------------------------------
   Navigation — type-led tabs; the current one earns the blue rule
   ------------------------------------------------------------------------- */
.nav { gap: 0; border-bottom: 1px solid var(--rule); margin-bottom: 12px; }
.nav button {
  background: transparent;
  color: var(--quiet);
  border-radius: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 11px 0;
  font-size: 13px;
  font-weight: 500;
}
.nav button.active { background: transparent; color: var(--carbon); border-bottom-color: var(--accent); }
.nav button.mini { flex: 0 0 auto; padding: 11px 10px; }

.tabs button { border: 1px solid var(--carbon); }
.tabs button.active { background: var(--carbon); color: var(--white); }

/* -------------------------------------------------------------------------
   Surfaces — hairlines instead of shadows, one flat ground
   ------------------------------------------------------------------------- */
.doc-card, .stat, .dcol, .tablewrap, .group-head, .boxctl, .box, .card,
.drow, .foldhead, .sugrow, .rarow, .pwday, .signview, .nextcard, .offlinecard,
.upload-box, .label {
  box-shadow: none;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--white);
}
.nextcard { border-color: var(--carbon); }
.offlinecard, .upload-box, .label { border-style: dashed; border-color: var(--rule-strong); }
.rarow { border-color: var(--rule-strong); }
.rarow.rapool { border-style: dashed; }
/* Status-edged rows keep their left edge; the other three sides go hairline. */
.line, .pickline, .mrpbanner, .rackbanner {
  box-shadow: none;
  border-top: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  border-radius: var(--radius);
}
.doc-card.onhold { border-left-width: 6px; }
.drow.done, .drow.dheld { border-color: transparent; }
.dempty { color: var(--quiet); }

/* Dashboard columns: a ruled head instead of a solid bar. */
.dhead {
  background: transparent;
  color: var(--carbon);
  border-bottom: 1px solid var(--rule);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.005em;
}
.dhead.done-head { background: transparent; color: var(--green); }
.dcount { background: var(--tint); color: inherit; }
.dcol.folded .dhead { border-bottom: 0; border-right: 1px solid var(--rule); }

/* Sheet, overlay, toast, footer */
.overlay { background: rgba(10, 10, 10, 0.5); }
.sheet { border-top: 1px solid var(--rule); border-radius: 4px 4px 0 0; }
#toast { background: var(--carbon); color: var(--white); border-radius: var(--radius); font-weight: 500; }
#toast.bad, #toast.err { background: var(--red); }
.footer { box-shadow: none; border-top: 1px solid var(--rule); background: var(--white); }

/* -------------------------------------------------------------------------
   Controls — primary is Carbon; secondary is a hairline; blue marks state
   ------------------------------------------------------------------------- */
.btn-green, .btn-blue, .b-green, .b-blue, .btn.btn-blue, .btn.btn-green,
.dlbtn, .offlinecard button, .boxctl button, .qtyrow button {
  background: var(--carbon);
  color: var(--white);
}
.btn-grey, .b-grey, .btn-line {
  background: transparent;
  color: var(--carbon);
  border: 1px solid var(--rule-strong);
}
.btn-red, .b-red { background: var(--red); color: var(--white); }
.b-amber, .btn-hold { background: rgba(183, 134, 11, 0.14); color: var(--amber-ink); }
.dlbtn.redl { background: rgba(250, 250, 249, 0.22); color: var(--white); }
button.reallot { border-style: dashed; }
button.reallot.allot { background: transparent; color: var(--quiet); border-color: var(--rule-strong); }
.pickhead button { border: 1px solid var(--rule-strong); background: transparent; color: var(--carbon); }
.sheet .actions button, .footer button, .nextcard .nbtns button, .wide { font-weight: 600; }

/* Hover and pressed states. Same rule as the website: primary Carbon goes
   Opero Blue on hover; a hairline control gains a tint and a darker edge.
   Hover only where a pointer can hover — on the gun and the phone the
   pressed state does the same job. The colour change explains the state,
   so it may transition (140ms, the website's fast duration). */
button, a.hbtn, a.btn, .nav button, .doc-card, .rarow, .sugrow, .drow, .group-head, .foldhead {
  transition: background-color 140ms cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 140ms cubic-bezier(0.22, 0.61, 0.36, 1),
              color 140ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (hover: hover) {
  .btn-green:hover, .btn-blue:hover, .b-green:hover, .b-blue:hover,
  .btn.btn-blue:hover, .btn.btn-green:hover, .dlbtn:hover,
  .offlinecard button:hover, .boxctl button:hover, .qtyrow button:hover,
  .tabs button.active:hover, .seg button.active:hover, .sitetoggle button.on:hover,
  .nextcard .nbtns .btn-green:hover, .sheet .actions .btn-green:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--white);
  }
  header button:hover, header a.hbtn:hover, .btn-grey:hover, .b-grey:hover,
  .btn-line:hover, .pickhead button:hover, button.reallot:hover,
  .tabs button:not(.active):hover, .seg button:not(.active):hover,
  .sitetoggle button:not(.on):hover, .fchip:not(.on):hover,
  .rarow:hover, .sugrow:hover, .group-head:hover, .foldhead:hover,
  .dhead.dtoggle:hover, .dcol.folded:hover {
    background: var(--tint);
    border-color: var(--carbon);
    color: var(--carbon);
  }
  header #presence-btn.on:hover { background: var(--carbon); border-color: var(--carbon); }
  .nav button:hover { color: var(--carbon); background: var(--tint); }
  .doc-card:hover, .drow:hover { border-color: var(--rule-strong); }
  .btn-red:hover, .b-red:hover { background: var(--carbon); }
  .btn-hold:hover, .b-amber:hover { background: rgba(183, 134, 11, 0.26); }
  .searchbar .sclear:hover, .camdel:hover, td.x button:hover { color: var(--carbon); }
  .dashfoot a:hover, .link:hover { color: var(--accent); }
}
.btn-green:active, .btn-blue:active, .b-green:active, .b-blue:active,
.btn.btn-blue:active, .btn.btn-green:active, .dlbtn:active,
.offlinecard button:active, .boxctl button:active, .qtyrow button:active {
  background: var(--graphite);
}
header button:active, header a.hbtn:active, .btn-grey:active, .b-grey:active,
.btn-line:active, .pickhead button:active, .rarow:active, .sugrow:active,
.nav button:active, .tabs button:not(.active):active, .seg button:not(.active):active,
.sitetoggle button:not(.on):active, .fchip:not(.on):active {
  background: rgba(10, 10, 10, 0.12);
}

/* Inputs */
.field input, .field select, .caminput, .pickqty,
input[type=text], input[type=number], input[type=password], select, textarea {
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--carbon);
}
.field input:focus, .field select:focus, .caminput:focus, .pickqty:focus,
input[type=text]:focus, input[type=number]:focus, input[type=password]:focus,
select:focus, textarea:focus { outline: none; border-color: var(--accent); }
.field label, label.f { color: var(--quiet); font-weight: 500; text-transform: none; letter-spacing: 0; }
.searchbar { border: 1px solid var(--rule-strong); }
.searchbar:focus-within { border-color: var(--accent); }
.searchbar .sicon { display: none; }
.searchbar .sclear { color: var(--quiet); }
#scan-input { border: 2px solid var(--carbon); }
#scan-input.flash-ok { border-color: var(--green); background: rgba(27, 127, 74, 0.10); }
#scan-input.flash-bad { border-color: var(--red); background: rgba(179, 38, 30, 0.10); }
.signpad, canvas.pad { border: 1px dashed var(--rule-strong); }
.seg button.active, .sitetoggle button.on, .fchip.on { background: var(--carbon); color: var(--white); border-color: var(--carbon); }
.fchip.on .dot { outline: 1px solid var(--white); }

/* Chips and small type: calm weight, square corners, no pill shapes */
.stagechip, .rackchip, .camchip, .lock, .minechip, .branchchip, .urgchip,
.holdchip, .actorchip, .fchip, .chip, .foldcount, .gcount, .st, .dcount {
  border-radius: var(--radius);
  font-weight: 600;
}
.branchchip { background: var(--tint); color: var(--carbon); }
.stagechip { background: var(--tint); color: var(--carbon); }
.rackchip { background: var(--tint); }

/* Pick list tick: a ruled square that fills with a mark, not a pictograph */
.tickbox {
  width: 28px; height: 28px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 600; color: var(--green);
  flex: 0 0 auto;
}
.pickline.done .tickbox { border-color: var(--green); }

/* On-shift dot in the name lists (replaces the coloured circles) */
.presdot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid var(--rule-strong); vertical-align: middle; margin-right: 8px;
  position: relative; top: -1px;
}
.presdot.on { background: var(--accent); border-color: var(--accent); }

/* Stats and tables */
.statnum { color: var(--carbon); }
.statlabel, .stattotal { color: var(--quiet); }
.statstable th { background: var(--tint); font-weight: 600; }
.statstable th, .statstable td, .pwtable th, .pwtable td { border-color: var(--rule); }
.viewtitle, .boxhead { font-weight: 600; }
.pwtable th { color: var(--quiet); }

/* Progress bar: done is a state, so it earns green; the track is a tint */
.bar { background: var(--tint); border-radius: 1px; }
.bar > div { background: var(--green); }

/* Delivery / dispatch bottom nav */
nav { background: var(--white); border-top: 1px solid var(--rule); }
nav button { color: var(--quiet); font-weight: 500; }
nav button.on { color: var(--carbon); font-weight: 600; box-shadow: inset 0 2px 0 var(--accent); }

/* Never animate what does not explain a change of state. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media print {
  header { border-bottom: 0; }
}