:root {
  --ink: #14231c;
  --muted: #67756d;
  --paper: #f6f8f4;
  --surface: #ffffff;
  --line: #dde3da;
  --line-soft: #eef1ec;
  --green: #1f7a4d;
  --green-dark: #17603c;
  --green-wash: #e9f4ee;
  --amber: #a35a09;
  --amber-wash: #fdf3e0;
  --red: #a72b1f;
  --red-wash: #fbeceb;
  --radius: 8px;
  --shadow: 0 1px 2px rgba(20, 35, 28, .06), 0 4px 14px rgba(20, 35, 28, .05);
}

* { box-sizing: border-box; }

::selection { background: #b9e2c8; color: var(--ink); }
::-moz-selection { background: #b9e2c8; color: var(--ink); }

/* A number already in a cell is highlighted the moment the cell is clicked, so
   typing replaces it instead of appending to it. */
.rep-table input.cell::selection { background: #b9e2c8; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--green-dark); }

/* Top bar and navigation */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 30;
}
.topbar-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 58px;
  flex-wrap: wrap;
}
.brand {
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -.2px;
  color: var(--ink);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 9px;
}
.brand-dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--green);
}
nav.tabs { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
nav.tabs a {
  padding: 8px 13px;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--muted);
  font-weight: 550;
  font-size: 14.5px;
}
nav.tabs a:hover { background: var(--line-soft); color: var(--ink); }
nav.tabs a.on { background: var(--green-wash); color: var(--green-dark); }
.whoami { color: var(--muted); font-size: 13.5px; display: flex; align-items: center; gap: 12px; }

.mode-flag {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 100px;
  background: var(--amber-wash);
  color: var(--amber);
  border: 1px solid #f0dcb8;
}

/* Page frame */
main { max-width: 1400px; margin: 0 auto; padding: 22px 20px 120px; }
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 16px;
}
h1 { font-size: 24px; margin: 0 0 3px; letter-spacing: -.3px; }
h2 { font-size: 17px; margin: 0 0 12px; }
.sub { color: var(--muted); font-size: 14px; margin: 0; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card + .card { margin-top: 18px; }
.card-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
}
.card-body { padding: 16px; }

/* Controls */
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 10px;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(31, 122, 77, .15);
}
.search { min-width: 240px; }
label.field { display: block; margin-bottom: 13px; }
label.field span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 5px; font-weight: 550; }
label.field input, label.field select, label.field textarea { width: 100%; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14.5px; }

.btn {
  font: inherit; font-weight: 600;
  padding: 9px 15px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px;
}
.btn:hover { background: var(--line-soft); }
.btn-primary { background: var(--green); border-color: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-dark); }
.btn-quiet { border-color: transparent; color: var(--muted); }
.btn-quiet:hover { color: var(--ink); }
.btn-danger { color: var(--red); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-sm { padding: 5px 10px; font-size: 13px; }

/* Tables */
table { width: 100%; border-collapse: separate; border-spacing: 0; }
.table-wrap { overflow-x: visible; }
th {
  text-align: left;
  position: sticky;
  top: 58px;
  z-index: 10;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  font-weight: 650;
  padding: 10px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  white-space: nowrap;
}
td { padding: 7px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #fbfcfa; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
/* On the replenishment sheet the heading sits over the middle of the number,
   because the numbers themselves are centred in the cell. */
th.num, th.ctr { text-align: center; }

/* The replenishment grid */
.rep-table td.name { min-width: 190px; }
.rep-table .prod { font-weight: 600; }
.rep-table .unit { color: var(--muted); font-size: 12.5px; font-weight: 500; }
/* The unit he orders in, marked so the right line of a pair is obvious at a
   glance. Half his items carry a second unit he only counts in. The mark sits
   on the unit itself, because the unit is the whole difference between the two
   lines, and it stays clear of the row colours, which already mean needs
   ordering and chosen. */
.uom-order {
  background: #ffd84d;
  color: #3d3000;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
}
/* Flowers are their own section of his sheet and he wants them told apart. */
.uom-flower { background: #e8524a; color: #fff; }
/* A number field is the whole cell. Anywhere in the cell is the field, so a
   thumb on a tablet cannot land in the gap beside it, and the sheet behaves
   like the spreadsheet he already counts into. A number reads as part of the
   table until it is touched: 135 rows of bordered boxes is a grid of
   outlines and nothing else. */
.rep-table th.num { width: 86px; }
.rep-table th.min-col, .rep-table th.max-col { width: 72px; }
.rep-table td.num { padding: 0; }
.rep-table input.cell {
  display: block;
  width: 100%;
  min-height: 38px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding: 7px 8px;
  background: transparent;
  border-color: transparent;
  border-radius: 0;
}
/* No spinner arrows. Now that the field is the whole cell, the arrows sit at
   the right-hand edge of it, and a thumb landing there on the tablet would
   change a count without him seeing it. */
.rep-table input.cell { -moz-appearance: textfield; appearance: textfield; }
.rep-table input.cell::-webkit-outer-spin-button,
.rep-table input.cell::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rep-table input.cell:hover { background: #eef5f0; border-color: #dbe6de; }
.rep-table input.cell:focus {
  background: #fff;
  border-color: var(--green);
  /* Inset, because an outer ring on a full-width cell would sit over the
     cells either side of it. */
  box-shadow: inset 0 0 0 2px rgba(31, 122, 77, .3);
}
.rep-table input.cell::placeholder { color: #9aa8a0; }
.rep-table select.sup {
  background: transparent;
  border-color: transparent;
}
.rep-table select.sup:hover { background: #eef5f0; border-color: #dbe6de; }
.rep-table select.sup:focus { background: #fff; border-color: var(--green); }
/* The row being typed into lifts, so his place is never lost. */
.rep-table tr:focus-within { background: #eef6f1; }
.rep-table tr:focus-within td { border-bottom-color: #cfe2d6; }
.cell-derived.negative { color: var(--red); }
/* The vendor box fills its cell too, so the column has one edge rather than
   one per vendor name. The column is held to a width: left to itself it eats
   the space the product names need. */
.rep-table th.ctr { width: 285px; }
.rep-table td.vendor-cell { padding: 2px 10px; }
.rep-table select.sup { width: 100%; min-width: 0; padding: 7px 8px; }
.cell-derived {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  padding: 7px 8px;
  display: block;
  width: 100%;
  min-height: 38px;
  text-align: center;
  /* Worked out, not typed. A wash over whatever colour the row is carrying,
     so it reads as locked on a white, an amber and a green row alike. */
  background: rgba(20, 35, 28, .045);
}
tr.needs { background: var(--amber-wash); }
tr.needs:hover { background: #fbeed6; }
tr.needs .suggest { color: var(--amber); }
tr.chosen { background: var(--green-wash) !important; }
.col-div { border-left: 1px solid var(--line); }

/* Action bar */
.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: 0 -2px 14px rgba(20, 35, 28, .07);
  padding: 12px 20px;
  z-index: 40;
}
.actionbar-inner {
  max-width: 1400px; margin: 0 auto;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.count-pill {
  font-weight: 650;
  background: var(--green-wash); color: var(--green-dark);
  padding: 7px 13px; border-radius: 100px; font-size: 14px;
}
.spacer { flex: 1; }
.saving { font-size: 13px; color: var(--muted); min-width: 90px; }

/* Status chips */
.chip {
  display: inline-block; padding: 3px 10px; border-radius: 100px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.chip-not_sent { background: var(--line-soft); color: var(--muted); }
.chip-sent { background: var(--green-wash); color: var(--green-dark); }
.chip-reply_received { background: #e7eefb; color: #1d4ed8; }
.chip-sim { background: var(--amber-wash); color: var(--amber); }

/* SMS preview */
.sms {
  background: #f2f5f0;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 15px;
  white-space: pre-wrap;
  font: 14.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
  max-width: 460px;
}
.sms-in { background: #e7eefb; border-color: #cddbf6; }
textarea.sms-edit {
  width: 100%; max-width: 460px; min-height: 220px;
  font: 14.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.to-line { font-size: 13.5px; color: var(--muted); margin: 0 0 8px; }

.notice {
  padding: 11px 14px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface);
  margin-bottom: 16px; font-size: 14.5px;
}
.notice-ok { background: var(--green-wash); border-color: #bfdfcd; color: var(--green-dark); }
.notice-warn { background: var(--amber-wash); border-color: #f0dcb8; color: var(--amber); }
.notice-bad { background: var(--red-wash); border-color: #f0c8c4; color: var(--red); }

.empty { padding: 40px 20px; text-align: center; color: var(--muted); }
.muted { color: var(--muted); }
.right { text-align: right; }
.stack { display: grid; gap: 16px; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.two-col > .span-all { grid-column: 1 / -1; }

/* One sales rep is one line: who to ask for, their number, whether the order
   goes there, and the way to take them off. */
.rep-line {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 9px 0; border-bottom: 1px solid var(--line-soft);
}
.rep-line:last-child { border-bottom: none; }
.rep-fields { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; flex: 1; }
.rep-line input[type=text] { padding: 7px 10px; width: 190px; }
.rep-add { padding-top: 14px; }
.pill-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Login */
.login-wrap { max-width: 380px; margin: 9vh auto; padding: 0 20px; }
.login-brand { text-align: center; margin-bottom: 22px; }
.login-brand .brand { justify-content: center; font-size: 26px; }
.login-brand p { color: var(--muted); margin: 7px 0 0; font-size: 14px; }

@media (max-width: 1150px) {
  th { position: static; }
  .table-wrap { overflow-x: auto; }
}

@media (max-width: 820px) {
  .two-col { grid-template-columns: 1fr; }
  th { position: static; }
  .table-wrap { overflow-x: auto; }
  main { padding: 16px 12px 130px; }
  .topbar-inner { padding: 8px 14px; gap: 10px; }
  .brand { order: 1; }
  .whoami { order: 2; margin-left: auto; }
  nav.tabs {
    order: 3; flex: 1 0 100%; flex-wrap: nowrap;
    overflow-x: auto; padding-bottom: 4px;
  }
  nav.tabs a { white-space: nowrap; }
  .actionbar-inner { gap: 10px; }
  .actionbar .btn { flex: 1; justify-content: center; }
}

/* The date on the sheet */
.date-field { display: flex; align-items: center; gap: 8px; }
.date-field span { font-size: 13px; color: var(--muted); font-weight: 550; }
.date-field input { padding: 7px 9px; }
.print-date { font-weight: 600; color: var(--ink); }
.print-only { display: none; }

/* The written order. Hidden on screen, and the only thing that prints. */
.order-sheet { display: none; }
.sheet-date { text-align: center; letter-spacing: .02em; }
.sheet-group h3 {
  font-size: 11pt; margin: 0 0 2mm;
  text-transform: uppercase; text-decoration: underline;
}
.sheet-group p { margin: 0 0 0.6mm; }

/* Grip, link and remove, all inside the product cell */
.grip {
  display: inline-block; width: 12px; cursor: grab;
  color: #b7c2bb; letter-spacing: -2px; margin-right: 4px; user-select: none;
}
.grip:active { cursor: grabbing; }
tr.dragging { opacity: .45; }
tr.drop-target td { box-shadow: inset 0 2px 0 var(--green); }
a.prod { color: var(--ink); text-decoration: none; font-weight: 600; }
a.prod:hover { color: var(--green-dark); text-decoration: underline; }
/* Always visible, because a hover-only control does not exist on the tablet
   he uses in the coolroom. Quiet enough not to invite a stray tap. */
button.row-del {
  display: inline-block;
  border: none; background: none; cursor: pointer; color: #d4ddd7;
  font-size: 15px; line-height: 1; padding: 0 3px; margin-left: 3px;
  vertical-align: baseline;
}
tr:hover button.row-del { color: #a6b2ab; }
button.row-del:hover { color: var(--red); }

.add-row {
  display: flex; gap: 8px; align-items: center;
  margin-top: 12px; padding: 0 2px; flex-wrap: wrap;
}
.add-row input[type=text] { padding: 8px 10px; }
.add-row input[name=name] { min-width: 240px; }

/* Printing. Rossi walks the coolroom with this on paper, so the sheet has to
   fit, carry the date, and lose everything he cannot press on paper. */
@media print {
  @page { size: A4 portrait; margin: 10mm; }
  body { background: #fff; font-size: 10pt; }
  .topbar, .actionbar, .no-print, .toolbar, .notice, form.toolbar,
  .page-head, .card, #rep-form { display: none !important; }

  /* Two columns on A4, and a vendor never splits across them. */
  .order-sheet { display: block; }
  .sheet-date { font-size: 13pt; margin: 0 0 6mm; }
  .sheet-cols { columns: 3; column-gap: 8mm; }
  .sheet-group { break-inside: avoid; page-break-inside: avoid; margin: 0 0 6mm; }
  .sheet-group p { font-size: 9pt; line-height: 1.3; }
  .sheet-group h3 { font-size: 9.5pt; }
  main { max-width: none; padding: 0; }
  .page-head { margin-bottom: 6px; display: block; }
  h1 { font-size: 15pt; margin: 0; }
  .print-date { font-size: 11pt; margin: 2px 0 8px; }
  .card { border: none; box-shadow: none; }
  .table-wrap { overflow: visible; }
  table { font-size: 9pt; }
  th { position: static; padding: 4px 5px; font-size: 7.5pt; border-bottom: 1px solid #000; }
  td { padding: 2px 5px; border-bottom: 1px solid #ddd; }
  tr.needs, tr.chosen { background: #fff !important; }
  .rep-table input.cell, .rep-table input.cell.wide, .rep-table input.cell.narrow {
    width: 46px; border: none; background: transparent; padding: 0; text-align: right;
  }
  /* The header repeats at the top of every printed page. A 135 line sheet
     runs to three or four pages, and a column of numbers with no heading on
     page two is unreadable. */
  thead { display: table-header-group; }
  /* Min and Max are reference figures he sets at a desk. On paper the space
     goes to the boxes he writes counts into. */
  .rep-table td[data-label="Min"], .rep-table td[data-label="Max"],
  .rep-table th:nth-child(6), .rep-table th:nth-child(7) { display: none; }
  .rep-table select.sup { display: none; }
  .print-only { display: inline; }
  .unit { font-size: 7.5pt; }
  tbody tr { page-break-inside: avoid; }
}

/* Tablet. Min and Max are set once and then left alone, so they make way for
   the columns he touches every morning. */
@media (max-width: 1150px) {
  .rep-table td[data-label="Min"], .rep-table th:nth-child(6),
  .rep-table td[data-label="Max"], .rep-table th:nth-child(7) { display: none; }
  .rep-table td.name { min-width: 0; }
  .rep-table select.sup { min-width: 0; width: 100%; }
  th, td { padding-left: 7px; padding-right: 7px; }
}

/* Phone. Counting stock one-handed in a coolroom, so each product is a block
   with big targets, and the columns he only configures are gone. */
@media (max-width: 700px) {
  .rep-table thead { display: none; }
  .grip { display: none; }
  button.row-del { font-size: 20px; padding: 2px 8px; }
  .rep-table, .rep-table tbody, .rep-table tr, .rep-table td { display: block; width: auto; }
  .rep-table tr {
    position: relative;
    border-bottom: 1px solid var(--line);
    padding: 10px 12px 12px;
  }
  .rep-table td { border: none; padding: 0; }
  .rep-table td.name {
    font-size: 15.5px; padding-right: 36px; margin-bottom: 8px;
  }
  .rep-table td[data-label]:not(.name)::before {
    content: attr(data-label);
    display: block;
    font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
    color: var(--muted); font-weight: 650; margin-bottom: 2px;
  }
  .rep-table td.num { display: inline-block; width: 24%; vertical-align: top; }
  /* Min and Max are configured once, on a bigger screen. */
  .rep-table td[data-label="Min"], .rep-table td[data-label="Max"] { display: none; }
  .rep-table td.pick-cell { position: absolute; top: 10px; right: 10px; }
  .rep-table td.pick-cell input { width: 22px; height: 22px; }
  .rep-table input.cell,
  .rep-table input.cell.wide,
  .rep-table input.cell.narrow { width: 100%; min-height: 42px; font-size: 16px; }
  .rep-table .cell-derived { min-height: 42px; line-height: 42px; padding: 0; width: 100%; }
  .rep-table td.vendor-cell { margin-top: 8px; }
  .rep-table select.sup { width: 100%; min-height: 42px; }
  .col-div { border-left: none; }
  .actionbar-inner { gap: 8px; }
  .actionbar .spacer, .actionbar .saving { display: none; }
  .actionbar .btn { flex: 1 1 calc(50% - 4px); justify-content: center; }
  .actionbar .btn-primary { flex: 1 1 100%; }
  .count-pill { flex: 1 1 100%; text-align: center; }
}