:root {
  --bg: #faf7f2;
  --surface: #ffffff;
  --text: #2b2420;
  --muted: #5f554e;
  --pattern-veil: rgba(250, 247, 242, .45);
  --border: #e6ddd2;
  --accent: #9a4a24;
  --accent-text: #ffffff;
  --ok-bg: #e7f3e8; --ok-text: #1f5f2a;
  --err-bg: #fbe5e1; --err-text: #8a2615;
  --warn-bg: #fdf0d5; --warn-text: #7a4b00;
  --low-bg: #fff6ea;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1816;
    --surface: #26201d;
    --text: #efe8e1;
    --muted: #a99d93;
    --border: #3a312c;
    --accent: #d9774a;
    --accent-text: #1c1816;
    --ok-bg: #1f3323; --ok-text: #a6d9ae;
    --err-bg: #3d211c; --err-text: #f2b3a6;
    --warn-bg: #3a2e17; --warn-text: #f0cf8a;
    --low-bg: #2e2620;
    --pattern-veil: rgba(28, 24, 22, .88);
  }
}

* { box-sizing: border-box; }
/* The forest pattern behind every page, pinned while scrolling (a fixed layer also works on phones).
   Inner pages get a veil over it so text stays readable; the login page shows it as is. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(var(--pattern-veil), var(--pattern-veil)), url("img/forest-pattern.jpg") center / cover no-repeat, #c0ccbe;
}
body.login-body::before { background: url("img/forest-pattern.jpg") center / cover no-repeat, #c0ccbe; }
body {
  margin: 0;
  background: #c0ccbe;
  color: var(--text);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.topbar {
  display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; justify-content: space-between;
  padding: 12px 24px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.brand { font-weight: 700; }
.brand span { font-weight: 400; color: var(--muted); margin-left: 6px; }
nav { display: flex; gap: 4px; flex-wrap: wrap; }
nav a { color: var(--text); text-decoration: none; padding: 6px 12px; border-radius: 6px; }
nav a:hover { background: var(--bg); }
nav a.active { background: var(--accent); color: var(--accent-text); }

main { max-width: 1200px; margin: 0 auto; padding: 24px; }
h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 17px; margin: 32px 0 12px; }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }

.page-head { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; }
.page-head p { margin: 0; max-width: 640px; }
.tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.check { display: flex; gap: 6px; align-items: center; color: var(--muted); }

.banner { padding: 10px 24px; }
main .banner { border-radius: 8px; margin-bottom: 16px; padding: 10px 14px; }
.banner.demo { background: var(--warn-bg); color: var(--warn-text); text-align: center; }
.banner.ok { background: var(--ok-bg); color: var(--ok-text); }
.banner.error { background: var(--err-bg); color: var(--err-text); }

.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.low td { background: var(--low-bg); }
tr.negative td:last-child input, .qty-form.negative input[type=number] { color: var(--err-text); font-weight: 600; }
.view-note { margin-top: 6px !important; }
.view-note a { color: var(--accent); }
input[readonly] { opacity: .7; }
tr.low td:last-child input { border-color: var(--accent); }

input[type=search], input[type=number] {
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px;
}
input[type=search] { min-width: 240px; }
input[type=number] { width: 80px; text-align: right; }
button {
  font: inherit; cursor: pointer; padding: 6px 14px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
}
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: .4; cursor: default; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.qty-form { display: inline-flex; gap: 6px; justify-content: flex-end; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 16px; }
.card .table-wrap { border: 0; border-top: 1px solid var(--border); border-radius: 0 0 10px 10px; }
.card-head { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; padding: 12px 14px; }
.actions { display: flex; gap: 8px; }
.tag { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 99px; background: var(--bg); color: var(--muted); }
.tag.warn { background: var(--warn-bg); color: var(--warn-text); }
.tag.ok { background: var(--ok-bg); color: var(--ok-text); }

@media (max-width: 600px) {
  main { padding: 16px; }
  .topbar { padding: 12px 16px; }
  input[type=search] { min-width: 0; width: 100%; }
}
.doc-note { margin: 0; padding: 8px 14px; border-top: 1px solid var(--border); font-size: 14px; }
.doc-note.warn { background: var(--warn-bg); color: var(--warn-text); }
.small { font-size: 13px; margin-left: 6px; }
.upload .actions { align-items: center; flex-wrap: wrap; }
select { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; }
input[type=file] { font: inherit; max-width: 260px; }

.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 28px 16px; margin-bottom: 8px; text-align: center; cursor: pointer;
  border: 2px dashed var(--border); border-radius: 10px; background: var(--surface);
  transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: var(--low-bg); }
.dropzone.busy { opacity: .6; pointer-events: none; }
.dropzone-status { font-size: 14px; color: var(--accent); min-height: 1em; }
.dropzone-options { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.dropzone-options label { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.product-cell select { max-width: 340px; width: 100%; }
.product-cell .tag { margin-top: 4px; }
.small-text { font-size: 13px; }
tr.needs-choice td { background: var(--warn-bg); }
.location-picker label { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.delivery-fields { display: flex; flex-wrap: wrap; gap: 12px 16px; padding: 0 14px 14px; }
.delivery-fields label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.delivery-fields label.wide { flex: 1 1 260px; }
.delivery-fields input[type=text], .delivery-fields input[type=date] {
  font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 10px;
}
#delivery-lines select { width: 100%; max-width: 340px; }

.group-picker { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; padding: 0 14px 14px; }
.group-picker label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.group-picker select { min-width: 280px; }
tr.group-row td { background: var(--bg); }
#delivery-lines input[type=number] { width: 90px; }

.cat-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.cat-tabs button { border-radius: 99px; padding: 5px 12px; font-size: 14px; }
.cat-tabs button span { color: var(--muted); font-size: 12px; margin-left: 2px; }
.cat-tabs button.active { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.cat-tabs button.active span { color: var(--accent-text); opacity: .8; }

.variant-name { display: block; margin-top: 2px; color: var(--text); font-size: 17px; font-weight: 600; }
#stock td:first-child { min-width: 190px; }

.customer-form { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.customer-form label { display: flex; gap: 8px; align-items: center; }
.customer-form input[type=text] { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 5px 9px; min-width: 240px; }
.release-choice { display: block; margin-top: 4px; }
.empty-location { padding: 14px 16px; }
.empty-location p { margin: 4px 0; }
.empty-location a { color: var(--accent); }
th.loc-col .loc-name { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--text); }
td.loc-col { border-left: 1px solid var(--border); }
.sync-note .refresh { margin-left: 6px; padding: 1px 9px; border: 1px solid var(--border); border-radius: 99px; text-decoration: none; font-size: 13px; }
.sync-note .refresh:hover { border-color: var(--accent); }
.sync-note a { color: var(--accent); }
[hidden] { display: none !important; }
.loc-tabs { align-items: center; }
.loc-tabs .tabs-label { color: var(--muted); font-size: 14px; margin-right: 2px; }
.loc-tabs a { border: 1px solid var(--border); border-radius: 99px; padding: 5px 12px; font-size: 14px; text-decoration: none; color: var(--text); background: var(--surface); }
.loc-tabs a:hover { border-color: var(--accent); }
.loc-tabs a.active { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
td.negative-total { color: var(--err-text); font-weight: 600; }
a.button { display: inline-block; text-decoration: none; padding: 6px 14px; border-radius: 6px; border: 1px solid var(--border); font-size: 14px; }
a.button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.qty-cell { display: inline-flex; justify-content: flex-end; }
.qty-cell.negative input[type=number] { color: var(--err-text); font-weight: 600; }
td.edited { background: var(--warn-bg); }
td.edited input[type=number] { font-weight: 600; }
.save-bar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: flex-end;
  margin-top: 12px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 -2px 10px rgba(0,0,0,.08); }
.save-bar #change-count { margin-right: auto; color: var(--muted); }
.save-bar .save-note { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--muted); }
.save-bar .save-note input { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; width: 200px; }
.save-bar a { color: var(--accent); }
.qty-cell.not-stocked input::placeholder { font-size: 12px; }
.user-box { display: flex; gap: 8px; align-items: center; font-size: 14px; margin-left: auto; }
.user-box a { color: var(--accent); }
.link-button { background: none; border: none; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; font: inherit; }
.login-body { min-height: 100vh; min-height: 100dvh; margin: 0; padding: 16px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; overflow-x: hidden; overflow-x: clip; }
html:has(body.login-body) { overflow-x: hidden; }
/* The login box is always centred on the screen. The raven (korppi.svg, a 1024 × 768 canvas) is centred on it by its
   front claw (x 400 on the canvas). --raven-w and --anchor-y are set by login.html: normally the claws hover just above
   the box's top edge (anchor y 632); on short screens the raven slides down behind the box (to at most y 380, the bottom
   of its head) so it can stay big while its whole head stays on screen. */
.login-stage { --raven-w: 50vw; --anchor-y: 632; position: relative; width: min(340px, 100%); }
.login-raven { position: absolute; left: calc(50% - var(--raven-w) * 400 / 1024);
  top: calc(var(--raven-w) * var(--anchor-y) / -1024);
  width: var(--raven-w); height: auto; max-width: none; pointer-events: none; }
.login-card { position: relative; z-index: 1; }
.login-card { width: 100%; max-width: 340px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 24px 28px;
  box-shadow: 0 6px 24px rgba(40, 55, 40, .18); }
.login-card .brand { margin-bottom: 16px; }
.login-card form { display: grid; gap: 14px; }
.login-card label { display: grid; gap: 6px; font-size: 14px; color: var(--muted); }
.login-card input[type=text], .login-card input[type=password] { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; }
.login-card .banner { margin-bottom: 14px; }
/* Stock table: the Product column stays in place while the other columns scroll sideways.
   On phones the Available column is frozen next to it too (not in edit mode, which has one column per location). */
#stock th:first-child, #stock td:first-child { position: sticky; left: 0; z-index: 2; background: var(--surface); box-shadow: inset -1px 0 0 var(--border); }
#stock tr.low td:first-child { background: var(--low-bg); }
@media (max-width: 700px) {
  #stock th:first-child, #stock td:first-child { width: 150px; min-width: 150px; max-width: 150px; }
  #stock:not(.editing) .loc-col { position: sticky; left: 150px; z-index: 2; background: var(--surface); border-left: 0;
    box-shadow: inset -1px 0 0 var(--border); }
  #stock:not(.editing) tr.low td.loc-col { background: var(--low-bg); }
}