/* Jabr POS — faelles stil. Skaermene er apparater, ikke dokumenter:
   kassen er lys (butikslys), koekken og kundeskaerm er moerke (mindre genskin). */

:root {
  --flame: #dc3f16;
  --flame-br: #ff6336;
  --amber: #d98324;
  --red: #c62828;
  --green: #3d9e63;

  --kyl: #b8541f;
  --bur: #8a4b9c;
  --pak: #2f7a6a;

  --sans: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif;
  --cond: "Barlow Condensed", "Segoe UI Semibold", "Arial Narrow", var(--sans);

  --r: 4px;
  color-scheme: light;
}

* { box-sizing: border-box; }
/* display: grid og flex vinder ellers over hidden. */
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--sans);
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}
/* touch-action: manipulation fjerner browserens ventetid paa et muligt
   dobbelttryk. Uden den er der op mod 300 ms foer et tryk taeller, og
   det foeles som om det foerste tryk ikke blev registreret. */
button { font: inherit; color: inherit; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
/* Et tryk skal kunne ses med det samme, ogsaa foer serveren har svaret. */
button:active { filter: brightness(.88); }
button:focus-visible { outline: 3px solid var(--flame-br); outline-offset: 2px; }
.num, .tab { font-variant-numeric: tabular-nums; }

/* ---------- lyst tema (kassen) ---------- */
.light {
  --bg: #f4f1ee;
  --panel: #fff;
  --panel2: #ece7e2;
  --ink: #1c1613;
  --ink2: #6d615a;
  --line: #ddd5ce;
  --soft: #fbe9e3;
  background: var(--bg);
  color: var(--ink);
}

/* ---------- moerkt tema (koekken, kundeskaerm) ---------- */
.dark {
  --bg: #0d0b09;
  --panel: #17130f;
  --panel2: #221c16;
  --ink: #f4efe9;
  --ink2: #9b8d82;
  --line: #312821;
  --soft: #3a1d12;
  background: var(--bg);
  color: var(--ink);
  color-scheme: dark;
}

/* ---------- forbindelsesstatus ---------- */
#conn {
  position: fixed; top: 0; left: 0; right: 0; z-index: 99;
  padding: calc(env(safe-area-inset-top, 0px) + 7px) 14px 7px;
  background: var(--red); color: #fff;
  font: 600 14px/1.3 var(--sans); text-align: center;
  transform: translateY(-110%); transition: transform .18s ease;
}
#conn.show { transform: none; }

/* ---------- koekkenskaerm ---------- */
.kds {
  height: 100%; display: flex; flex-direction: column;
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
}
.kds > header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.kds h1 {
  margin: 0; font: 700 26px/1 var(--cond);
  text-transform: uppercase; letter-spacing: .04em;
}
.kds .pill {
  margin-left: auto; font: 600 13px/1 var(--sans);
  color: var(--ink2); border: 1px solid var(--line);
  padding: 6px 11px; border-radius: 999px;
}
.board {
  flex: 1; min-height: 0; overflow-y: auto;
  display: grid; gap: 12px; padding: 12px 16px;
  grid-template-columns: repeat(auto-fill, minmax(264px, 1fr));
  align-content: start;
}
.card {
  min-width: 0; background: var(--panel); border: 2px solid var(--line);
  border-radius: 6px; display: flex; flex-direction: column;
  text-align: left; padding: 0; overflow: hidden;
}
.card.cooking { border-color: var(--flame); }
/* Klar til pak: koekkenerne er faerdige, ordren venter kun paa at blive samlet. */
.card.topack { border-color: var(--green); }
.card.topack .sib.done { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.card.topack .cta { background: var(--green); color: #fff; border-color: var(--green); }
.card.late    { border-color: var(--amber); }
.card.vlate   { border-color: var(--red); }
.card > .top {
  display: flex; align-items: baseline; gap: 10px;
  padding: 11px 13px 8px;
}
.card .no {
  font: 700 36px/.85 var(--cond); color: var(--flame-br);
}
.card .age { margin-left: auto; font: 600 15px/1 var(--sans); color: var(--ink2); }
.card.late .age  { color: var(--amber); }
.card.vlate .age { color: var(--red); }
.card ul { list-style: none; margin: 0; padding: 0 13px 11px; }
.card li { padding: 3px 0; display: flex; gap: 9px; font-size: 18px; }
.card li .q { color: var(--ink2); flex: none; }
.card li .nm { min-width: 0; }
/* En del af en menu. Indrykningen siger hvad der hoerer sammen. */
.card li.del { padding-left: 20px; }
/* Hvilket koekken delen kommer fra. Kun paa pakkestationen, hvor den der
   pakker skal vide hvor varen skal hentes. */
/* Pakket og klar — men kunden har ikke faaet den endnu. */
.card.afventer { border-color: #2f9e44; }
.card.afventer .cta { background: #2f9e44; color: #fff; }
.card .udenom { display: block; width: 100%; margin-top: 6px; padding: 7px;
  background: none; border: 1px solid currentColor; border-radius: var(--r);
  color: var(--ink2); font: 600 12px/1 var(--sans); letter-spacing: .04em;
  text-transform: uppercase; cursor: pointer; }
.card .udenom:hover { color: var(--flame); }
.card .udenom.spoerg { color: var(--flame); border-color: var(--flame); }
.card .mod {
  padding-left: 27px; font: 600 15px/1.35 var(--sans); color: var(--flame-br);
}
.card .mod.swap { color: var(--screen-ink); text-transform: uppercase;
  letter-spacing: .04em; font-size: 13px; }
.card .foot {
  margin-top: auto; border-top: 1px solid var(--line);
  padding: 9px 13px; font: 600 14px/1 var(--sans); color: var(--ink2);
  display: flex; gap: 10px; flex-wrap: wrap;
}
.card .sib.done { color: var(--green); }
.card .cta {
  margin-top: auto; border: none; border-top: 2px solid var(--line);
  background: var(--panel2); color: var(--ink);
  font: 700 17px/1 var(--cond); letter-spacing: .05em; text-transform: uppercase;
  padding: 15px; min-height: 52px;
}
.card.cooking .cta { background: var(--flame); color: #fff; border-color: var(--flame); }
.card .cta:disabled { opacity: .45; }
.empty { color: var(--ink2); padding: 32px 4px; font-size: 16px; }

/* ---------- kundeskaerm ---------- */
.cust { height: 100%; display: grid; grid-template-columns: 1fr 1fr; }
.cust section { min-width: 0; padding: 22px 26px; display: flex; flex-direction: column; }
.cust section + section { border-left: 1px solid var(--line); }
.cust h2 {
  margin: 0 0 16px; font: 700 clamp(22px, 3vw, 34px)/1 var(--cond);
  text-transform: uppercase; letter-spacing: .06em; color: var(--ink2);
}
.cust .ready h2 { color: var(--flame-br); }
/* To kolonner i hver side. Tallene fylder deres kolonne, saa de staar paa
   linje under hinanden uanset hvor mange der er. */
.cust .nums { display: grid; grid-template-columns: 1fr 1fr;
  gap: 18px 24px; align-content: start; }
.cust .n {
  font: 700 clamp(30px, 5.4vw, 72px)/1 var(--cond);
  font-variant-numeric: tabular-nums; color: var(--ink2);
  text-align: center;
}
.cust .ready .n { color: var(--flame-br); }
.cust .ready .n.fresh { animation: pop 1.1s ease 3; }
@keyframes pop { 0%,100% { opacity: 1 } 50% { opacity: .25 } }
@media (prefers-reduced-motion: reduce) { .cust .ready .n.fresh { animation: none } }
@media (max-width: 700px) {
  .cust { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .cust section + section { border-left: 0; border-top: 1px solid var(--line); }
}