/* ===========================================================================
   Atlantis Customer Call Campaign Tracker
   BRAND COLOURS — same as the Atlantis Complaints Portal.
   =========================================================================== */
:root {
  --brand-navy:   #272660;
  --brand-teal:   #0c5e6a;
  --brand-teal-light: #11808f;

  --bg:        #f7f9fb;
  --surface:   #ffffff;
  --line:      #e2e8ef;
  --text:      #1d2a36;
  --text-soft: #64707c;
  --ok:        #1f9d57;
  --warn:      #c9851f;
  --danger:    #c0392b;

  --radius: 10px;
  --shadow: 0 1px 3px rgba(11, 44, 77, 0.08);
  --shadow-lg: 0 8px 30px rgba(11, 44, 77, 0.16);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

a { color: var(--brand-teal); }

.hidden { display: none !important; }
/* Long notes in the contract units register grow to show everything typed,
   instead of scrolling sideways inside a one-line box. */
textarea.unit-grow { resize: none; overflow: hidden; min-height: 34px; line-height: 1.4; margin: 0; display: block; width: 100%; }

/* ---- Header / nav ---- */
.topbar {
  background: var(--brand-navy);
  color: #fff;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow);
}
.topbar .brand { display: flex; align-items: center; gap: 10px; }
/* The logo file used to carry ~20% horizontal and ~37% vertical padding inside
   its own viewBox, so it read as a fraction of its box height. The viewBox is
   cropped to the artwork now, which means this height is the height you
   actually see on screen. */
.topbar .brand img { height: 46px; display: block; }
.topbar .brand-fallback { font-weight: bold; letter-spacing: 1px; }
.topbar nav { display: flex; align-items: center; gap: 18px; font-size: 14px; }
.topbar nav a { color: #dfe6ee; text-decoration: none; }
.topbar nav a:hover, .topbar nav a.active { color: #fff; font-weight: 600; }
.topbar .who { color: #b9c4d0; font-size: 13px; text-decoration: none; }
.topbar a.who:hover { color: #fff; text-decoration: underline; }
.topbar button.logout {
  background: transparent; border: 1px solid #ffffff55; color: #fff;
  border-radius: 6px; padding: 5px 12px; cursor: pointer; font-size: 13px;
}
.topbar button.logout:hover { background: #ffffff22; }

main { max-width: 1100px; margin: 0 auto; padding: 24px 20px 60px; }
/* The contract units register is a wide table with a couple of hundred rows —
   1100px forced it to scroll sideways inside its own card, which is miserable
   to work in. Let these pages use the width of the screen instead. */
body[data-page="contracts"] main { max-width: 1600px; }

/* ---- Cards / surfaces ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.page-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.page-header h1 { font-size: 20px; margin: 0; color: var(--brand-navy); }
.page-header .sub { color: var(--text-soft); font-size: 13px; }

/* ---- Buttons / inputs ---- */
button, .btn {
  font-family: inherit; font-size: 14px; cursor: pointer;
  border-radius: 7px; border: 1px solid var(--line); background: #fff; color: var(--text);
  padding: 8px 14px;
}
button.primary, .btn.primary {
  background: var(--brand-teal); color: #fff; border-color: var(--brand-teal);
}
button.primary:hover { background: var(--brand-teal-light); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

input, select, textarea {
  font-family: inherit; font-size: 14px;
  border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px;
  width: 100%; background: #fff; color: var(--text);
}
label { display: block; font-size: 13px; color: var(--text-soft); margin: 10px 0 4px; font-weight: 600; }
.field-row { display: flex; gap: 12px; flex-wrap: wrap; }
.field-row > div { flex: 1; min-width: 160px; }

/* ---- Login ---- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--brand-navy); }
.login-card { width: 340px; padding: 32px; text-align: center; }
.login-card img { height: 64px; margin-bottom: 24px; }
.login-card h1 { font-size: 17px; color: var(--brand-navy); margin: 4px 0 20px; }
.login-card .error { color: var(--danger); font-size: 13px; margin-top: 10px; min-height: 18px; }

/* ---- Customer list table ---- */
table.list { width: 100%; border-collapse: collapse; }
table.list th {
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-soft); padding: 10px 14px; border-bottom: 1px solid var(--line);
}
table.list td { padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: middle; }
table.list tr:last-child td { border-bottom: none; }
table.list tr.row-link { cursor: pointer; }
table.list tr.row-link:hover { background: #f2f6f9; }
table.list .name { font-weight: 600; color: var(--brand-navy); }
table.list .eye { margin-left: 6px; opacity: 0.6; }
.deadline-soon { color: var(--danger); font-weight: 600; }

/* ---- Badges ---- */
.badge {
  display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 9px;
  border-radius: 20px; letter-spacing: 0.3px;
}
.badge.status-none { background: #f1f3f5; color: #8a949e; }
.badge.status-contacted { background: #e6edf3; color: var(--text-soft); }
.badge.status-objection { background: #fdecec; color: var(--danger); }
.badge.status-pricing-req { background: #eef2fb; color: #4a5f8a; }
.badge.status-pricing { background: #fdf3e2; color: var(--warn); }
.badge.status-won { background: #e6f7ec; color: var(--ok); }
.badge.status-lost { background: #eee; color: #888; }
.badge.group-pricing { background: var(--brand-navy); color: #fff; }
.badge.organic { background: var(--ok); color: #fff; }

/* ---- Customer detail ---- */
.detail-grid { display: grid; grid-template-columns: 1fr 260px; gap: 20px; align-items: start; }
@media (max-width: 800px) { .detail-grid { grid-template-columns: 1fr; } }
.panel { padding: 18px 20px; margin-bottom: 16px; }
.panel h2 { font-size: 15px; margin: 0 0 12px; color: var(--brand-navy); }
.tabs { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.tabs button { border: none; background: none; border-radius: 0; padding: 8px 14px; color: var(--text-soft); border-bottom: 2px solid transparent; }
.tabs button.active { color: var(--brand-navy); border-bottom-color: var(--brand-teal); font-weight: 600; }

.call-entry { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.call-entry:last-child { border-bottom: none; }
.call-entry .meta { color: var(--text-soft); font-size: 12px; margin-top: 2px; }

.sidebar .kv { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.sidebar .kv:last-child { border-bottom: none; }
.sidebar .kv span:first-child { color: var(--text-soft); }

.note-box {
  background: #f5f8fb; border-radius: 7px; padding: 10px 12px; font-size: 13px; color: var(--text);
  margin-bottom: 12px;
}
.note-box.group { background: #eef0fa; color: var(--brand-navy); }

.note-entry { background: #f5f8fb; border-radius: 7px; padding: 10px 12px; margin-bottom: 8px; font-size: 13px; position: relative; }
.note-entry .note-text { white-space: pre-wrap; }
.note-entry .note-meta { color: var(--text-soft); font-size: 11px; margin-top: 6px; display: flex; justify-content: space-between; align-items: center; }
.note-menu-wrap { position: relative; }
.note-menu-btn { background: none; border: none; padding: 2px 6px; color: var(--text-soft); font-size: 15px; line-height: 1; cursor: pointer; border-radius: 4px; }
.note-menu-btn:hover { background: #e6edf3; }
.note-menu { position: absolute; right: 0; top: 100%; margin-top: 2px; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); z-index: 5; min-width: 90px; }
.note-menu button { display: block; width: 100%; text-align: left; padding: 7px 12px; background: none; border: none; font-size: 12px; color: var(--text); border-radius: 0; }
.note-menu button:hover { background: #f5f8fb; }
.note-menu button.danger { color: var(--danger); }
.note-entry textarea { width: 100%; font-size: 13px; margin-bottom: 6px; }

/* ---- Leaderboard ---- */
.leaderboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; }
.lb-card { padding: 16px 18px; text-align: center; }
.lb-card .rep-name { font-weight: 700; color: var(--brand-navy); font-size: 15px; margin-bottom: 10px; }
.lb-stats { display: flex; justify-content: space-around; }
.lb-stats div { flex: 1; }
.lb-stats .num { font-size: 22px; font-weight: 700; color: var(--brand-teal); }
.lb-stats .label { font-size: 11px; color: var(--text-soft); text-transform: uppercase; }

/* ---- Dashboard ---- */
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 24px; }
.stat-tile { padding: 16px 18px; text-align: center; }
.stat-tile .num { font-size: 26px; font-weight: 700; color: var(--brand-navy); }
.stat-tile .label { font-size: 12px; color: var(--text-soft); margin-top: 4px; }

.empty-state { text-align: center; padding: 40px 20px; color: var(--text-soft); }

/* ---- Modal ---- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(11,44,77,0.35);
  display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50;
}
.modal { width: 100%; max-width: 420px; padding: 22px; }
.modal h2 { margin: 0 0 14px; font-size: 16px; color: var(--brand-navy); }
.modal .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* ---- Contract units register ----
   Columns share the width available instead of holding fixed minimums, so the
   table fits the screen without a sideways scroll. */
table.units { table-layout: fixed; width: 100%; }
table.units th, table.units td { padding: 8px 5px; vertical-align: top; }
table.units th { font-size: 11px; letter-spacing: 0.3px; white-space: normal; vertical-align: bottom; }
table.units input, table.units textarea { font-size: 13px; padding: 6px 7px; }
table.units input[type="date"] { padding: 6px 3px; min-width: 0; }
table.units .num { text-align: right; font-variant-numeric: tabular-nums; }
table.units td.wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
table.units td.num, table.units td:nth-child(1), table.units td:nth-child(2) { padding-top: 13px; }
textarea.unit-name { font-weight: 600; color: var(--brand-navy); }
.beds-edit { display: flex; align-items: center; justify-content: flex-end; gap: 3px; }
input.beds-input { text-align: right; padding: 6px 5px; margin: 0; }
input.beds-input::placeholder { color: #9aa6b2; opacity: 1; }
/* The remove column is the narrowest, so it gives up its side padding and the
   button stays slim enough to fit even on a small laptop screen. Only that
   column: directors have none, and their last column is a figure. */
table.units .del-cell { padding-left: 0; padding-right: 0; text-align: center; }
table.units .unit-del { padding: 2px 4px; line-height: 1; min-width: 0; }

/* ---- Dashboard widgets ---- */
body[data-page="dashboard"] main, body[data-page="home"] main { max-width: 1400px; }
.wd-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: start; }
.wd { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; min-width: 0; }
.wd-3 { grid-column: span 3; }
.wd-5 { grid-column: span 5; }
.wd-6 { grid-column: span 6; }
.wd-7 { grid-column: span 7; }
.wd-12 { grid-column: span 12; }
@media (max-width: 1100px) {
  .wd-3 { grid-column: span 6; }
  .wd-5, .wd-6, .wd-7 { grid-column: span 12; }
}
@media (max-width: 640px) { .wd-3 { grid-column: span 12; } }

.wd-title { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.wd-title h2 { font-size: 15px; margin: 0; color: var(--brand-navy); }
.wd-meta { font-size: 12px; color: var(--text-soft); }
.wd-title a { font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.wd-label { font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-soft); margin: 16px 0 8px; }
.wd-scroll > .wd-label:first-child { margin-top: 10px; }
.wd-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }

.wd-kpi { padding: 14px 18px 16px; }
.wd-kpi-link { display: block; color: inherit; text-decoration: none; }
.wd-kpi-link:hover .wd-caption { text-decoration: underline; }
.wd-num { font-size: 34px; font-weight: 700; line-height: 1.05; color: var(--brand-navy); font-variant-numeric: tabular-nums; }
.wd-num.alert { color: var(--warn); }
.wd-caption { font-size: 14px; font-weight: 600; color: var(--text); margin-top: 6px; }
.wd-note { font-size: 12px; color: var(--text-soft); margin-top: 2px; }

.wd-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px 14px; }
.wd-stat .v { font-size: 20px; font-weight: 700; color: var(--brand-navy); line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.wd-stat .l { font-size: 12px; color: var(--text-soft); margin-top: 1px; }
.wd-stat .x { font-size: 11px; color: var(--text-soft); }

.wd-bar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: #eef2f6; }
.wd-bar span { display: block; height: 100%; }
.wd-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 12px; color: var(--text-soft); }
.wd-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; }
.wd-legend strong { color: var(--text); }
.wd-progress { display: flex; align-items: center; gap: 8px; }
.wd-progress .wd-bar { flex: 1; height: 6px; min-width: 50px; }

.wd-list { list-style: none; margin: 0; padding: 0; }
.wd-list li { border-bottom: 1px solid var(--line); }
.wd-list li:last-child { border-bottom: 0; }
.wd-list a, .wd-list .row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 0; text-decoration: none; color: inherit; font-size: 13px; }
.wd-list a:hover .wd-name { text-decoration: underline; }
.wd-name { font-weight: 600; color: var(--brand-navy); }
.wd-soft { color: var(--text-soft); font-size: 12px; }
.wd-scroll { max-height: 420px; overflow-y: auto; }
.wd-empty { font-size: 13px; color: var(--text-soft); padding: 6px 0; }
.wd .wd-right { text-align: right; font-variant-numeric: tabular-nums; }
.wd table.list th { padding: 8px 8px; }
.wd table.list td { padding: 9px 8px; font-size: 13px; }

.wd-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 10px; }
.wd-split.one { grid-template-columns: 1fr; }
.wd-panel { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.wd-panel.me { border-color: var(--brand-teal); }
.wd-panel-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; color: var(--brand-navy); }
.wd-panel-head .wd-soft:last-child { margin-left: auto; }

/* ---- Contract group: weekly sales against the growth target ---- */
.sales-top { display: flex; gap: 18px; align-items: stretch; flex-wrap: wrap; }
.sales-last { flex: 0 0 auto; min-width: 170px; padding-top: 4px; }
.sales-last-v { font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--brand-navy); font-variant-numeric: tabular-nums; }
.sales-last-l { font-size: 13px; color: var(--text-soft); margin-top: 2px; }
.sales-target { flex: 1 1 420px; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; background: #f8fafc; }
.st-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.st-label { font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-soft); }
.st-pill { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.st-pill.st-ok { background: #e3f4ea; color: #1f7a45; }
.st-pill.st-behind { background: #fdecea; color: #b0392b; }
.st-progress { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 12px; color: var(--text-soft); }
.st-progress .wd-bar { flex: 1; height: 8px; }
.st-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px 16px; margin-top: 12px; }
.st-grid .l { font-size: 12px; color: var(--text-soft); }
.st-grid .v { font-size: 18px; font-weight: 700; color: var(--brand-navy); font-variant-numeric: tabular-nums; }
.st-grid .v small { font-size: 12px; font-weight: normal; color: var(--text-soft); }
.st-grid .x { font-size: 12px; color: var(--text-soft); }
.st-foot { font-size: 12px; color: var(--text-soft); margin-top: 10px; }
.linkish { background: none; border: 0; padding: 0; color: var(--brand-teal); text-decoration: underline; cursor: pointer; font-size: 12px; }

.sales-bars { position: relative; display: flex; gap: 8px; align-items: flex-end; height: 122px; }
.sales-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 0; }
.sales-amt { font-size: 11px; color: var(--text-soft); margin-bottom: 3px; white-space: nowrap; }
.sales-bar { width: 100%; border-radius: 3px 3px 0 0; }
.sales-needed-line { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--brand-navy); opacity: 0.75; pointer-events: none; }
.sales-dates { display: flex; gap: 8px; margin-top: 4px; }
.sales-dates > div { flex: 1; text-align: center; font-size: 11px; color: var(--text-soft); }
.sales-dates span { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--brand-teal); }
.sales-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; font-size: 12px; color: var(--text-soft); }
.sales-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.sales-legend i.line { width: 18px; height: 0; border-top: 2px dashed var(--brand-navy); border-radius: 0; vertical-align: 3px; }

.wd-title-side { display: flex; gap: 12px; align-items: baseline; }

/* ---- Stock portal ---- */
/* The status colours match the ones the team already reads on the old app, so
   nobody has to relearn what red and amber mean. */
.badge.b-red   { background: #fdecea; color: #b0392b; }
.badge.b-amber { background: #fdf3e2; color: #9a6410; }
.badge.b-green { background: #e3f4ea; color: #1f7a45; }
.badge.b-blue  { background: #e8effa; color: #2b4f9a; }
.badge.b-purple{ background: #ede9fe; color: #6d28d9; }
.badge.b-gray  { background: #eef2f6; color: #5d6b78; }

body[data-page="dashboard"] main { max-width: 1500px; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.filters input, .filters select { margin: 0; width: auto; }
.filters input[type="search"] { flex: 1; min-width: 200px; }
table.stock { table-layout: auto; }
table.stock td, table.stock th { padding: 9px 12px; }
table.stock .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.stock .code { font-size: 11px; color: var(--text-soft); display: block; }
table.stock tr.is-critical td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
table.stock tr.is-warning td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.tick { background: none; border: 1px solid var(--line); border-radius: 6px; padding: 3px 9px; font-size: 12px; cursor: pointer; white-space: nowrap; }
.tick.on { background: #e3f4ea; border-color: #bfe3cd; color: #1f7a45; font-weight: 600; }
.usage-source { font-size: 11px; color: var(--text-soft); display: block; }

/* A link that reads as a button — the export on the inventory screen. */
.btn-link { display: inline-block; background: var(--brand-teal); color: #fff; text-decoration: none;
  padding: 8px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.btn-link:hover { filter: brightness(1.08); }

/* ---- The jobs board: the front page ----
   Big, plain cards. Each one is a job with a number on it, and the whole card
   is the way into that job. */
.jobs { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px; align-items: stretch; }
.job { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px 22px 18px; text-decoration: none; color: inherit;
  border-top: 3px solid var(--brand-teal); transition: transform 0.08s ease, box-shadow 0.12s ease; }
.job:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.10); }
.job-num { font-size: 42px; font-weight: 700; line-height: 1; color: var(--brand-navy); font-variant-numeric: tabular-nums; }
.job-caption { font-size: 15px; font-weight: 600; margin-top: 10px; color: var(--text); }
.job-note { font-size: 13px; color: var(--text-soft); margin-top: 3px; }
.job-foot { font-size: 12px; color: var(--text-soft); margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.job-urgent { border-top-color: var(--danger); }
.job-urgent .job-num { color: var(--danger); }
.job-warn { border-top-color: var(--warn); }
.job-warn .job-num { color: #9a6410; }
/* Nothing to do: still there, so the screen keeps its shape, but it stops
   shouting. */
.job-quiet { border-top-color: var(--line); }
.job-quiet .job-num { color: #9aa6b2; font-weight: 600; }

/* ---- Wide screens: tables fit the page, never scroll sideways ----
   A scrollbar under a table hides columns, and a hidden column may as well not
   exist. Every column is a share of the width and text wraps instead. */
body[data-page="products"] main,
body[data-page="inventory"] main,
body[data-page="ordering"] main { max-width: 1800px; }

table.items { table-layout: fixed; width: 100%; }
table.items th, table.items td { padding: 7px 8px; vertical-align: middle; }
table.items th { font-size: 11px; letter-spacing: 0.3px; white-space: normal; vertical-align: bottom; }
table.items td { font-size: 12.5px; }
table.items td.wrap { overflow-wrap: anywhere; }
table.items .num { text-align: right; font-variant-numeric: tabular-nums; }
table.items input { width: 100%; margin: 0; padding: 5px 6px; font-size: 12.5px; min-width: 0; }
table.items input.in-num { text-align: right; }
table.items input.in-name { font-weight: 600; color: var(--brand-navy); }
table.items .code-plain { font-size: 11.5px; color: var(--text-soft); overflow-wrap: anywhere; }
/* A barcode is read digit by digit when it is checked against a pack, so it
   is set in a fixed-width face where every digit is the same width. */
table.items .barcode { font-family: 'Consolas', 'SF Mono', monospace; font-size: 11.5px;
  color: var(--brand-navy); letter-spacing: 0.2px; overflow-wrap: anywhere; }

/* The barcode cell: the numbers this pack is known by, each with a way to take
   it off, and a box to add another. The box has a Save button of its own —
   everything else on this screen saves as you leave it, and a barcode should
   not. */
table.items .bc-cell { line-height: 1.3; }
table.items .bc-line { display: flex; align-items: center; gap: 4px; margin-bottom: 2px; }
table.items .bc-drop { background: none; border: 0; color: var(--text-soft); cursor: pointer;
  font-size: 13px; line-height: 1; padding: 0 2px; }
table.items .bc-drop:hover { color: var(--danger); }
table.items .bc-add { display: block; background: none; border: 0; color: var(--brand-teal); cursor: pointer;
  font-size: 11px; padding: 1px 0; margin-top: 2px; text-align: left; }
table.items .bc-add:hover { text-decoration: underline; }
table.items .bc-edit { margin-top: 3px; }
table.items .bc-input { width: 100%; padding: 4px 5px; font-size: 11.5px;
  font-family: 'Consolas', 'SF Mono', monospace; border: 1px solid var(--brand-teal); border-radius: 5px; }
table.items .bc-buttons { display: flex; gap: 4px; margin-top: 3px; }
table.items .bc-buttons button { font-size: 11px; padding: 3px 7px; border-radius: 5px; cursor: pointer; }
table.items .bc-save { background: var(--brand-teal); color: #fff; border: 0; }
table.items .bc-cancel { background: none; border: 1px solid var(--line); color: var(--text-soft); }
table.items .code { display: block; font-size: 10.5px; color: var(--text-soft); }
table.items .tick { width: 100%; padding: 4px 2px; font-size: 11.5px; }
table.items tr.row-off { opacity: 0.55; }
table.items .remove { background: none; border: 1px solid var(--line); color: var(--text-soft);
  border-radius: 5px; padding: 2px 7px; font-size: 14px; line-height: 1.1; cursor: pointer; width: 100%; }
table.items .remove:hover { border-color: var(--danger); color: var(--danger); background: #fdecea; }

/* Section tabs: one per section, wrapping onto as many lines as they need. */
.section-tabs { flex-wrap: wrap; gap: 2px 6px; border-bottom: 1px solid var(--line); }
.section-tabs button { padding: 7px 10px; font-size: 12.5px; }
.tab-count { display: inline-block; background: #eef2f6; color: var(--text-soft); border-radius: 9px;
  padding: 0 6px; font-size: 10.5px; margin-left: 4px; font-weight: 600; }
.section-tabs button.active .tab-count { background: var(--brand-teal); color: #fff; }
table.items textarea.grow { width: 100%; margin: 0; padding: 5px 6px; font-size: 12.5px; line-height: 1.35;
  resize: none; overflow: hidden; display: block; min-height: 28px; border: 1px solid var(--line); border-radius: 6px; }
table.items textarea.in-name { font-weight: 600; color: var(--brand-navy); }

/* Groups that open to show what is inside them, on the inventory report. */
table.groups .group-row { cursor: pointer; }
table.groups .group-row:hover { background: #f2f6f9; }
table.groups .caret { display: inline-block; width: 16px; color: var(--text-soft); font-size: 11px; }
table.groups .group-detail > td { background: #f8fafc; padding: 4px 10px 10px 34px; }
table.inner { width: 100%; border-collapse: collapse; }
table.inner td { padding: 5px 8px; font-size: 12.5px; border-bottom: 1px solid #e7edf3; }
table.inner tr:last-child td { border-bottom: 0; }
table.inner .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.inner .code-plain { font-size: 11.5px; color: var(--text-soft); }

/* Section tabs, tidied: no counts, and All set apart at the end. */
.section-tabs button.tab-all { margin-left: auto; color: var(--brand-navy); font-weight: 600; }

/* The bar across the top stays put while a long list scrolls under it, and so
   does the table's own header row — you can always see which column you are in
   and get back to another screen without scrolling up. */
.topbar { position: sticky; top: 0; z-index: 20; }
/* The products screen doesn't scroll — the list inside it does. The bar, the
   heading, the section tabs and the search box are simply always there, and the
   column headings stick to the top of the list's own scroll. Nothing has to be
   measured and nothing can drift out of step with anything else, which is what
   made the earlier version jump about while scrolling. */
body[data-page="products"] { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
body[data-page="products"] main { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-bottom: 14px; }
body[data-page="products"] .card.panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
body[data-page="products"] #table-wrap { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
body[data-page="products"] table.items thead th { position: sticky; top: 0; z-index: 10; background: #f7f9fb; }
.head-block { padding-top: 4px; }
.head-block .page-header { margin-bottom: 8px; }
.head-block .filters { margin-bottom: 8px; }
table.stock thead th { position: sticky; top: var(--topbar-height, 70px); z-index: 10; background: #f7f9fb; }

/* How old the figures are: one line directly under the bar, before the page
   proper starts, so it is the first thing read on any of the working screens. */
.freshness { display: flex; flex-wrap: wrap; gap: 2px 48px; font-size: 12.5px; color: var(--text-soft);
  padding: 7px 20px; background: #eef4f8; border-bottom: 1px solid var(--line); }
.freshness b { color: var(--brand-navy); font-weight: 600; }
.fresh-bit { white-space: nowrap; }

/* Finished products: a retailer line opens to show what one tray of it uses. */
body[data-page="finished"] main { max-width: 1500px; }
table.stock tr.line-row { cursor: pointer; }
table.stock tr.line-row:hover { background: #f2f6f9; }
table.stock tr.line-row.open { background: #eef4f8; }
table.stock tr.line-row .caret { display: inline-block; width: 15px; color: var(--text-soft); font-size: 11px; }
table.stock tr.line-detail > td { background: #f8fafc; padding: 10px 14px 14px 30px; }
.detail-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.detail-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.detail-buttons button { font-size: 12px; padding: 4px 9px; border-radius: 6px;
  border: 1px solid var(--line); background: #fff; cursor: pointer; }
.detail-buttons button:hover { border-color: var(--brand-teal); color: var(--brand-teal); }

/* Putting an item on a recipe: what it is, how it is packed, and how much of
   it one tray uses - worked out from the packing rather than typed as a
   fraction, which is where the damage comes from. */
.recipe-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.recipe-add select { max-width: 380px; }
.recipe-add input { width: 130px; }
.recipe-hint { font-size: 12px; color: var(--text-soft); }

/* Adding a product to a promotion, and the quieter buttons beside a heading. */
.promo-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 10px 0 4px; }
.promo-add select, .promo-add input { margin: 0; width: auto; }
.promo-add select:first-child { min-width: 260px; }
.btn-quiet { background: none; border: 1px solid var(--line); color: var(--text-soft); border-radius: 6px;
  padding: 4px 10px; font-size: 12px; cursor: pointer; }
.btn-quiet:hover { border-color: var(--danger); color: var(--danger); }

/* ---- The phone ----
   Worn gloves, cold hands, one hand holding a scanner. Everything is big,
   there are two things to choose from, and the only colour that matters is
   the one saying whether the counts have reached the office. */
body[data-page="phone"] { background: #f4f7f9; }
body[data-page="phone"] main { display: none; }
.ph-bar { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between;
  align-items: center; gap: 10px; padding: 12px 16px; background: var(--brand-navy); color: #fff;
  padding-top: calc(12px + env(safe-area-inset-top)); }
.ph-who { font-size: 15px; font-weight: 600; }
.ph-state { font-size: 13px; padding: 3px 9px; border-radius: 20px; background: #ffffff22; }
.ph-state.ok { background: #1d7a4c; }
.ph-state.busy { background: #9a6410; }
.ph-state.off { background: #b0392b; }
.ph-screen { padding: 16px; max-width: 640px; margin: 0 auto; }
.ph-head { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 600;
  color: var(--brand-navy); margin-bottom: 14px; }
.ph-back { background: none; border: 0; font-size: 30px; line-height: 1; color: var(--brand-navy);
  cursor: pointer; padding: 0 6px 4px 0; }
.ph-job { display: block; width: 100%; text-align: left; background: #fff; border: 1px solid var(--line);
  border-radius: 14px; padding: 20px; margin-bottom: 14px; cursor: pointer; box-shadow: var(--shadow); }
.ph-job-name { display: block; font-size: 21px; font-weight: 700; color: var(--brand-navy); }
.ph-job-note { display: block; font-size: 14px; color: var(--text-soft); margin-top: 4px; }
.ph-quiet { display: block; width: 100%; background: none; border: 0; color: var(--text-soft);
  font-size: 14px; padding: 12px; cursor: pointer; }
.ph-panel { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin-bottom: 14px; }
.ph-count-form { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 14px; }
.ph-count-form input { width: 100%; font-size: 17px; padding: 13px; border: 1px solid var(--line);
  border-radius: 10px; margin: 0; }
.ph-qty-row { display: flex; gap: 8px; margin-top: 10px; }
.ph-qty-row input { flex: 1; }
.ph-go { background: var(--brand-teal); color: #fff; border: 0; border-radius: 10px;
  font-size: 17px; font-weight: 600; padding: 13px 22px; cursor: pointer; }
.ph-finish { width: 100%; margin-top: 16px; background: var(--brand-navy); }
.ph-found { font-size: 14px; margin-top: 8px; min-height: 18px; }
.ph-found.ok { color: var(--brand-navy); }
.ph-found.ok b { display: block; font-size: 16px; }
.ph-found.unknown { color: #9a6410; }
.ph-found .ph-note { display: block; }
.ph-note { font-size: 13px; color: var(--text-soft); margin-top: 6px; }
.ph-progress { font-size: 14px; color: var(--text-soft); margin: 4px 2px 10px; }
.ph-row { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 13px; margin-bottom: 7px; flex-wrap: wrap; }
.ph-row-name { flex: 1; font-size: 15px; color: var(--brand-navy); }
.ph-row-qty { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ph-row.unsent { border-style: dashed; }
.ph-row-wait { font-size: 12px; color: var(--text-soft); }
.ph-row.problem { border-color: var(--danger); background: #fdecea; }
.ph-row-problem { width: 100%; font-size: 12.5px; color: var(--danger); }

/* Two actions on one row want a gap between them. */
table.items .btn-quiet { margin-left: 8px; }
table.items .btn-quiet:first-child { margin-left: 0; }