/* ============================================================
   Jakobs Café & Bar — POS designsystem
   Mørkt, touchoptimeret, høj kontrast, dansk.
   ============================================================ */

:root {
  /* Baggrunde — mørk neutral, ikke sort */
  --bg-0: #0b0d10;   /* dybeste baggrund */
  --bg-1: #101215;   /* app-baggrund */
  --bg-2: #171a1f;   /* kort */
  --bg-3: #1e222a;   /* forhøjet kort / input */
  --bg-4: #272c36;   /* hover / aktiv flade */
  --bg-5: #333944;   /* kant-flade */

  /* Streger */
  --line-1: #2a2f39;
  --line-2: #3a4150;
  --line-strong: #525c6e;

  /* Tekst */
  --tx-1: #f2f5f9;   /* primær */
  --tx-2: #b6bfcd;   /* sekundær */
  --tx-3: #7c869a;   /* dæmpet */
  --tx-inv: #0b0d10; /* på lyse flader */

  /* Handlingsfarver */
  --orange: #ff7a1a;      /* primære ordrehandlinger */
  --orange-dk: #d95f06;
  --orange-soft: rgba(255, 122, 26, 0.16);
  --green: #22b562;       /* betaling */
  --green-dk: #16904a;
  --green-soft: rgba(34, 181, 98, 0.16);

  /* Status / opmærksomhed */
  --at-normal: #3a4150;
  --at-soon: #e8c020;     /* gul */
  --at-late: #f28c1c;     /* orange */
  --at-critical: #e5484d; /* rød */

  --blue: #3f8cff;
  --purple: #9d6bff;

  /* Bordplanens materialer. De skal kunne kendes fra hinanden på
     en meters afstand — ikke være pæne. */
  --plan-trae:   #6b4a2f;
  --plan-flise:  #3a3d42;
  --plan-taeppe: #4a3540;
  --plan-vand:   #1e3a5f;
  --plan-graes:  #2c4a2c;
  --plan-vaeg:   #55585e;
  --plan-bar:    #5a2230;
  --plan-sofa:   #6d6350;
  --plan-groen:  #2f6b3f;
  --plan-moerk:  #14161a;
  --red: #e5484d;
  --red-dk: #b83236;
  --yellow: #e8c020;

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;

  /* Touch */
  --touch-min: 44px;
  --touch: 56px;
  --touch-lg: 68px;

  /* Afstand */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 6px 20px rgba(0,0,0,.45);
  --shadow-3: 0 18px 50px rgba(0,0,0,.6);

  /* ---- Afledte farver ----
     Sættes automatisk ud fra hovedfarverne, når temaet ændres.
     Står her, så systemet også virker uden JavaScript og så man
     kan se hvad standardværdien er. */
  --orange-lt: #ff8c38;    /* orange, lysere — når man holder på knappen */
  --green-lt: #2ccb70;
  --red-lt: #ef5d61;

  --tx-on-danger: #ffffff; /* tekst på rød */
  --tx-on-accent: #ffffff; /* tekst på husets farve */

  /* Statusfarver — chippens fyld, tekst og kant */
  --st-ledigt: #7c869a;
  --st-optaget: #3f8cff;
  --st-betaler: #9d6bff;
  --st-klargoeres: #e8c020;
  --st-ledigt-tx: #a6b0c2;
  --st-optaget-tx: #7fb0ff;
  --st-service-tx: #ffa963;
  --st-betaler-tx: #bd9bff;
  --st-betalt-tx: #5fd694;
  --st-klargoeres-tx: #e8c020;
  --st-ledigt-bg: rgba(124, 134, 154, 0.16);
  --st-optaget-bg: rgba(63, 140, 255, 0.16);
  --st-betaler-bg: rgba(157, 107, 255, 0.16);
  --st-klargoeres-bg: rgba(232, 192, 32, 0.16);
  --red-soft: rgba(229, 72, 77, 0.14);

  --tx-neg: #ff9aa0;       /* fravalg og fejl i en linje */
  --tx-pos: #7fd6a3;       /* tilvalg */

  --toast-ok-bg: #14361f;    --toast-ok-tx: #8ee5b3;
  --toast-warn-bg: #3a2f08;  --toast-warn-tx: #f4dd85;
  --toast-error-bg: #3a1416; --toast-error-tx: #ffb0b3;

  --banner-noed-1: #5a1e00;  --banner-noed-2: #6b2400;  --banner-noed-tx: #ffd7b3;
  --banner-lukket-1: #4a0d16; --banner-lukket-2: #5c1119; --banner-lukket-tx: #ffd0d6;

  --giftcard-1: #1b1f27;   --giftcard-2: #2a2130;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

/* ---------- Nulstilling ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  font-family: var(--font);
  background: var(--bg-1);
  color: var(--tx-1);
  font-size: 16px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }

/* Ingen tekstmarkering i POS-flader — undgår utilsigtet markering ved hurtige tryk */
.app-root { user-select: none; -webkit-user-select: none; }
.selectable { user-select: text; -webkit-user-select: text; }

/* ---------- Approot: fuld højde, safe-area ---------- */
.app-root {
  position: fixed;
  inset: 0;
  height: 100dvh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg-1);
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Alle flex/grid-kolonner der indeholder scroll skal have min-height:0 */
.col, .row { display: flex; min-width: 0; min-height: 0; }
.col { flex-direction: column; }
.row { flex-direction: row; }
.flex-1 { flex: 1 1 auto; min-width: 0; min-height: 0; }
.flex-0 { flex: 0 0 auto; }

.scroll-y {
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
/* ============================================================
   Stak — lodret indhold der ALDRIG kan klemmes sammen

   .col er flex, og flex-børn kan krympe under deres eget indhold.
   Til lange, rullende sider er det den forkerte grundform: så
   snart indholdet bliver højere end skærmen, skrumper afsnittene
   og teksten lægger sig oven i hinanden.

   .stack er almindeligt block-layout med afstand imellem. Block
   kan ikke krympe børn. Brug .stack til alt der ruller, og .col
   til lag hvor noget SKAL fordele pladsen.
   ============================================================ */
.stack { display: block; }
.stack > * + * { margin-top: var(--sp-4); }
.stack-1 > * + * { margin-top: var(--sp-1); }
.stack-2 > * + * { margin-top: var(--sp-2); }
.stack-3 > * + * { margin-top: var(--sp-3); }
.stack-1, .stack-2, .stack-3 { display: block; }

/* Lange etiketter må ombryde i stedet for at skubbe beløbet ud */
/*
   Et område der kun VISER hvordan noget ser ud. Der kan ikke
   trykkes på noget inde i det, så der opstår ingen døde knapper.
*/
.demo, .demo * { pointer-events: none; user-select: none; }

.total-line > :first-child { min-width: 0; overflow-wrap: anywhere; }
.total-line > :last-child { flex: 0 0 auto; white-space: nowrap; }

/*
   Indhold i et rullende område må ALDRIG klemmes sammen.

   .col og .row sætter min-height: 0, så et flex-barn KAN krympe
   under sit eget indhold. Er det rullende område samtidig et
   flex-layout med begrænset højde, sker det: afsnittene skrumper,
   og teksten lægger sig oven i hinanden i stedet for at rulle.
   Her slås krympningen fra, så området ruller som det skal.
*/
.scroll-y > * { flex-shrink: 0; }

.scroll-y::-webkit-scrollbar { width: 10px; }
.scroll-y::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 6px; }
.scroll-y::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   Topbar
   ============================================================ */
.topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: 60px;
  padding: 0 var(--sp-4);
  background: var(--bg-2);
  border-bottom: 1px solid var(--line-1);
}
.topbar__brand {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar__brand small {
  display: block;
  font-weight: 500;
  font-size: 11px;
  color: var(--tx-3);
  letter-spacing: .6px;
  text-transform: uppercase;
}
.topbar__spacer { flex: 1 1 auto; min-width: 0; }

/* ============================================================
   Knapper
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--touch);
  min-width: var(--touch-min);
  padding: 0 var(--sp-4);
  border-radius: var(--r-md);
  background: var(--bg-3);
  color: var(--tx-1);
  font-weight: 600;
  font-size: 15px;
  border: 1px solid var(--line-1);
  transition: background .12s, transform .06s, border-color .12s;
  text-align: center;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { background: var(--bg-4); }
.btn:active:not(:disabled) { transform: scale(.975); }
.btn:disabled { opacity: .38; cursor: not-allowed; }
.btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

.btn--lg { min-height: var(--touch-lg); font-size: 17px; padding: 0 var(--sp-5); }
.btn--sm { min-height: var(--touch-min); font-size: 14px; padding: 0 var(--sp-3); border-radius: var(--r-sm); }
.btn--block { display: flex; width: 100%; }

/* Primær ordrehandling — orange */
.btn--primary {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--tx-inv);
  font-weight: 800;
}
.btn--primary:hover:not(:disabled) { background: var(--orange-lt); border-color: var(--orange-lt); }
.btn--primary:active:not(:disabled) { background: var(--orange-dk); border-color: var(--orange-dk); }

/* Betaling — grøn */
.btn--pay {
  background: var(--green);
  border-color: var(--green);
  color: var(--tx-inv);
  font-weight: 800;
}
.btn--pay:hover:not(:disabled) { background: var(--green-lt); border-color: var(--green-lt); }
.btn--pay:active:not(:disabled) { background: var(--green-dk); border-color: var(--green-dk); }

/* Fare */
.btn--danger { background: var(--red); border-color: var(--red); color: var(--tx-on-danger); font-weight: 700; }
.btn--danger:hover:not(:disabled) { background: var(--red-lt); border-color: var(--red-lt); }
.btn--danger:active:not(:disabled) { background: var(--red-dk); border-color: var(--red-dk); }

/* Ghost / sekundær */
.btn--ghost { background: transparent; border-color: var(--line-2); color: var(--tx-2); }
.btn--ghost:hover:not(:disabled) { background: var(--bg-3); color: var(--tx-1); }

/* Aktivt valg */
.btn--on {
  background: var(--orange-soft);
  border-color: var(--orange);
  color: var(--orange);
}

/* VENT-tilstand */
.btn--wait-on {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--tx-inv);
  font-weight: 800;
  animation: waitpulse 1.6s ease-in-out infinite;
}
@keyframes waitpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,192,32,.55); }
  50%      { box-shadow: 0 0 0 8px rgba(232,192,32,0); }
}

/* ============================================================
   Kort
   ============================================================ */
.card {
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
}
.card--flat { background: var(--bg-3); }

/* ============================================================
   Chips
   ============================================================ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
}
.chip--sm { height: 20px; font-size: 10.5px; padding: 0 8px; }

/* Primær bordstatus */
.chip--ledigt     { background: var(--st-ledigt-bg);     color: var(--st-ledigt-tx);     border-color: var(--st-ledigt); }
.chip--optaget    { background: var(--st-optaget-bg);    color: var(--st-optaget-tx);    border-color: var(--st-optaget); }
.chip--service    { background: var(--orange-soft);      color: var(--st-service-tx);    border-color: var(--orange); }
.chip--betaler    { background: var(--st-betaler-bg);    color: var(--st-betaler-tx);    border-color: var(--st-betaler); }
.chip--betalt     { background: var(--green-soft);       color: var(--st-betalt-tx);     border-color: var(--green); }
.chip--klargoeres { background: var(--st-klargoeres-bg); color: var(--st-klargoeres-tx); border-color: var(--st-klargoeres); }

/* Servicefase — dæmpet, mindre */
.chip--phase {
  background: var(--bg-4);
  color: var(--tx-2);
  border-color: var(--line-2);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}

/* VENT-markering */
.chip--vent { background: var(--yellow); color: var(--tx-inv); border-color: var(--yellow); }
.chip--kaldt { background: var(--orange); color: var(--tx-inv); border-color: var(--orange); }
.chip--allergi { background: var(--red); color: var(--tx-on-danger); border-color: var(--red); }

/* ============================================================
   Bordkort — neutralt kort + opmærksomhedsramme
   ============================================================ */
.tablecard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 118px;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 2px solid var(--at-normal);
  border-radius: var(--r-lg);
  text-align: left;
  transition: border-color .2s, background .12s, transform .06s;
}
.tablecard:active { transform: scale(.98); }
.tablecard:hover { background: var(--bg-3); }
.tablecard:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

.tablecard--free { background: var(--bg-1); border-style: dashed; border-color: var(--line-1); }
.tablecard--free .tablecard__no { color: var(--tx-2); }

/* Opmærksomhedsniveau — kun rammen, kortet forbliver læsbart */
.tablecard--soon     { border-color: var(--at-soon); }
.tablecard--late     { border-color: var(--at-late); }
.tablecard--critical { border-color: var(--at-critical); animation: critpulse 2s ease-in-out infinite; }
@keyframes critpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229,72,77,.5); }
  50%      { box-shadow: 0 0 0 6px rgba(229,72,77,0); }
}

.tablecard__no {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
}
.tablecard__meta { font-size: 12px; color: var(--tx-3); line-height: 1.3; }
.tablecard__total {
  margin-top: auto;
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tablecard__flags { display: flex; flex-wrap: wrap; gap: 4px; }

/* ============================================================
   Touch-tastatur (bordnummer / beløb)
   ============================================================ */
.keypad { display: flex; flex-direction: column; gap: var(--sp-3); }

.keypad__display {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 var(--sp-4);
  background: var(--bg-0);
  border: 2px solid var(--line-2);
  border-radius: var(--r-md);
  font-size: 34px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
  overflow: hidden;
}
.keypad__display--empty { color: var(--tx-3); font-size: 18px; font-weight: 600; letter-spacing: 0; justify-content: center; }
.keypad__display--error { border-color: var(--red); color: var(--red); }

.keypad__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }

.key {
  min-height: var(--touch-lg);
  border-radius: var(--r-md);
  background: var(--bg-3);
  border: 1px solid var(--line-1);
  font-size: 26px;
  font-weight: 700;
  color: var(--tx-1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .1s, transform .06s;
}
.key:hover { background: var(--bg-4); }
.key:active { background: var(--bg-5); transform: scale(.96); }
.key--fn { font-size: 17px; font-weight: 700; color: var(--tx-2); }
.key--wide { grid-column: span 2; }

.keypad__msg { min-height: 20px; font-size: 13px; font-weight: 600; color: var(--red); }

/* ============================================================
   Ordreliste
   ============================================================ */
/* ------------------------------------------------------------
   F-055 · LUFTEN I LINJEN MÅ VIGE FOR NAVNET

   Tre mellemrum á 12 px og 12 px polstring i hver side tog 60 af
   linjens 303 px. Navnefeltet, der skal rumme "TEST · Cheddar
   Burger" og fem tilvalg, fik 74.

   Luft er ikke ingenting — den holder tal og tekst adskilt. Men
   den er heller ikke det vigtigste på en linje, hvor tjeneren
   skal kunne se, at burgeren er UDEN cheddar. 8 px adskiller
   stadig tydeligt og giver navnet 24 px mere.
   ------------------------------------------------------------ */
.orderline {
  display: flex;
  gap: 8px;
  padding: 10px 8px;
  border-radius: var(--r-md);
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-left: 4px solid var(--line-2);
  align-items: flex-start;
}
.orderline--unsent { border-left-color: var(--orange); }
.orderline--sent   { border-left-color: var(--line-strong); opacity: .92; }
.orderline--vent   { border-left-color: var(--yellow); }
.orderline--kaldt  { border-left-color: var(--orange); }
.orderline--paid   { border-left-color: var(--green); opacity: .6; }
.orderline--void   { border-left-color: var(--red); opacity: .5; text-decoration: line-through; }
.orderline.is-selected { background: var(--bg-4); border-color: var(--orange); }

.orderline__qty {
  flex: 0 0 auto;
  min-width: 26px;
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.orderline__body { flex: 1 1 auto; min-width: 0; }
.orderline__name { font-size: 15px; font-weight: 600; }
.orderline__variant { font-size: 12.5px; color: var(--tx-2); }
.orderline__mods { font-size: 12.5px; color: var(--tx-3); margin-top: 2px; }
.orderline__mods .neg { color: var(--tx-neg); }
.orderline__mods .pos { color: var(--tx-pos); }
.orderline__note { font-size: 12.5px; color: var(--yellow); margin-top: 2px; font-style: italic; }
.orderline__price {
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ============================================================
   Produktknapper
   ============================================================ */
.prodgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--sp-2);
}
.prodbtn {
  min-height: 84px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 4px;
  padding: 10px;
  border-radius: var(--r-md);
  background: var(--bg-3);
  border: 1px solid var(--line-1);
  text-align: left;
  transition: background .1s, transform .06s;
}
.prodbtn:hover { background: var(--bg-4); }
.prodbtn:active { transform: scale(.97); }
.prodbtn__name { font-size: 14.5px; font-weight: 700; line-height: 1.2; }
.prodbtn__price { font-size: 13px; color: var(--tx-2); font-variant-numeric: tabular-nums; }
.prodbtn--out { opacity: .4; }
.prodbtn__badge {
  position: absolute; top: 6px; right: 6px;
}

/* ============================================================
   Modal
   ============================================================ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.66);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 900;
  /*
     Sikkerhedsafstanden lægges på baggrunden, ikke på dialogen.
     Så kan dialogen bruge max-height: 100% og kan aldrig få sin
     fod skubbet ned under skærmkanten på en iPhone.
  */
  padding: calc(var(--sp-4) + env(safe-area-inset-top))
           calc(var(--sp-4) + env(safe-area-inset-right))
           calc(var(--sp-4) + env(safe-area-inset-bottom))
           calc(var(--sp-4) + env(safe-area-inset-left));
}
.modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 640px;
  max-height: 100%;
  min-height: 0;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}
.modal--wide { max-width: 940px; }
.modal--full { max-width: 1280px; }

/* Centrering med align-items må ikke kunne skubbe toppen ud af skærmen */
.modal { margin: auto; }

/*
   Sikkerhedsregel: knapper i gitre og flexrækker skal kunne krympe.
   Uden dette får de min-width: auto og bryder layoutet, så snart
   teksten er længere end kolonnen.
*/
.modal__body .btn,
.prodgrid .btn,
.floor__cards .btn { min-width: 0; }

.modal__body .btn {
  white-space: normal;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.modal__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-bottom: 1px solid var(--line-1);
}
.modal__title { font-size: 18px; font-weight: 700; flex: 1 1 auto; min-width: 0; }
.modal__body {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--sp-4);
}

.modal__foot {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border-top: 1px solid var(--line-1);
  background: var(--bg-2);
}

/*
   Flex-elementer har som standard min-width: auto og kan derfor ikke
   krympe under deres indhold. Sammen med nowrap skubbede lange
   knaptekster foden ud af skærmen. Knapperne skal kunne krympe og
   ombryde teksten i stedet.
*/
.modal__foot .btn {
  min-width: 0;
  /* btn--block sætter width:100%, hvilket tvinger hver knap ned på
     sin egen række i foden. Her skal flex bestemme bredden. */
  width: auto;
  white-space: normal;
  line-height: 1.15;
  padding: 8px 12px;
  overflow-wrap: anywhere;
}

/* Er der ikke plads til alle knapper på én række, går den primære
   handling nederst i fuld bredde, hvor tommelfingeren er */
@media (max-width: 479px) {
  .modal__foot { flex-direction: column-reverse; }
  .modal__foot .btn { flex: 1 1 auto !important; width: 100%; }
}

/* ============================================================
   Toast
   ============================================================ */
.toast-host {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  z-index: 1000;
  pointer-events: none;
  width: min(520px, calc(100vw - 32px));
}
.toast {
  padding: 12px 18px;
  border-radius: var(--r-md);
  background: var(--bg-4);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-2);
  font-size: 14.5px;
  font-weight: 600;
  text-align: center;
  animation: toastin .18s ease-out;
}
.toast--ok    { background: var(--toast-ok-bg);    border-color: var(--green);  color: var(--toast-ok-tx); }
.toast--warn  { background: var(--toast-warn-bg);  border-color: var(--yellow); color: var(--toast-warn-tx); }
.toast--error { background: var(--toast-error-bg); border-color: var(--red);    color: var(--toast-error-tx); }
@keyframes toastin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ============================================================
   Hjælpeklasser
   ============================================================ */
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--tx-3); }
.dim { color: var(--tx-2); }
.strong { font-weight: 700; }
.center { text-align: center; }
.right { text-align: right; }
.gap-1 { gap: var(--sp-1); } .gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); }
.p-3 { padding: var(--sp-3); } .p-4 { padding: var(--sp-4); }
.hidden { display: none !important; }

.label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--tx-3);
}

.total-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  font-variant-numeric: tabular-nums;
}
.total-line--grand { font-size: 24px; font-weight: 800; }

/* Nøddrift-banner */
.emergency-banner {
  flex: 0 0 auto;
  background: repeating-linear-gradient(45deg, var(--banner-noed-1), var(--banner-noed-1) 12px, var(--banner-noed-2) 12px, var(--banner-noed-2) 24px);
  border-bottom: 2px solid var(--orange);
  color: var(--banner-noed-tx);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  padding: 6px;
}

/*
   Lukket kasse. Dagen er afsluttet med en Z-rapport, og der kan
   ikke sælges. Båndet er en knap, så man kommer direkte hen og
   åbner dagen igen i stedet for at lede efter den.
*/
.closed-banner {
  flex: 0 0 auto;
  display: block;
  width: 100%;
  border: none;
  border-bottom: 2px solid var(--red);
  background: repeating-linear-gradient(45deg, var(--banner-lukket-1), var(--banner-lukket-1) 12px, var(--banner-lukket-2) 12px, var(--banner-lukket-2) 24px);
  color: var(--banner-lukket-tx);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  padding: 8px 6px;
  cursor: pointer;
  font-family: inherit;
}
.closed-banner:active { filter: brightness(1.25); }

/* ============================================================
   Responsive
   ============================================================ */

/* Håndholdt — under 640px */
@media (max-width: 639px) {
  :root { --touch: 52px; --touch-lg: 62px; }
  .topbar { height: 54px; padding: 0 var(--sp-3); }
  .prodgrid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
  .modal { max-width: 100%; border-radius: var(--r-lg); }
  .modal-backdrop {
    padding: calc(8px + env(safe-area-inset-top))
             calc(8px + env(safe-area-inset-right))
             calc(8px + env(safe-area-inset-bottom))
             calc(8px + env(safe-area-inset-left));
  }
  .modal__head, .modal__body, .modal__foot { padding: var(--sp-3); }
  .tablecard { min-height: 104px; }
  .tablecard__no { font-size: 23px; }
}

/* Meget lav skærm i liggende visning på telefon */
@media (max-height: 480px) {
  :root { --touch: 44px; --touch-lg: 50px; }
  .topbar { height: 48px; }
  .keypad__display { height: 48px; font-size: 26px; }
}

/* Tablet */
@media (min-width: 640px) and (max-width: 1023px) {
  .prodgrid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
}

/* Kasse / desktop */
@media (min-width: 1024px) {
  .prodgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* Bundnavigation på håndholdt — indhold må aldrig ligge under */
.bottomnav {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  gap: 2px;
  background: var(--bg-2);
  border-top: 1px solid var(--line-1);
  padding-bottom: env(safe-area-inset-bottom);
}
.bottomnav__item {
  flex: 1 1 0;
  /* På en stor kasse skal fanerne ikke trækkes ud over hele skærmen */
  max-width: 200px;
  min-width: 0;
  min-height: var(--touch);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--tx-3);
  padding: 6px 2px;
}
.bottomnav__item.is-active { color: var(--orange); background: var(--orange-soft); }

/* ============================================================
   Bordplan
   ============================================================ */
.floor { min-height: 0; }

.scroll-x {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.scroll-x::-webkit-scrollbar { display: none; }

.floor__tabs {
  flex: 0 0 auto;
  display: flex;
  gap: 2px;
  padding: 6px 8px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line-1);
}
.floor__tab {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-height: var(--touch-min);
  padding: 6px 14px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--tx-2);
  white-space: nowrap;
}
.floor__tab:hover { background: var(--bg-3); color: var(--tx-1); }
.floor__tab.is-active { background: var(--orange-soft); color: var(--orange); }
.floor__tabcount { font-size: 11px; font-weight: 600; opacity: .75; font-variant-numeric: tabular-nums; }

.floor__main {
  display: flex;
  flex-direction: row;
  min-height: 0;
  min-width: 0;
}
.floor__grid { padding: 10px; }
.floor__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
  gap: 8px;
  align-content: start;
}
.floor__side {
  flex: 0 0 320px;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 10px 10px 0;
  border-left: 1px solid var(--line-1);
}

/*
   Tastaturet skal kunne rummes selv på en lav skærm. Bliver pladsen
   for trang, krymper tasterne i stedet for at ÅBN BORD forsvinder
   ud under bundnavigationen.
*/
@media (min-width: 900px) and (max-height: 940px) {
  .floor__side .keypad__grid .key { min-height: 56px; font-size: 23px; }
  .floor__side .keypad__display { height: 56px; font-size: 29px; }
  .floor__side .btn--lg { min-height: 58px; }
}
@media (min-width: 900px) and (max-height: 800px) {
  .floor__side .keypad__grid .key { min-height: 46px; font-size: 20px; }
  .floor__side .keypad__display { height: 48px; font-size: 25px; }
  .floor__side .btn--lg { min-height: 50px; font-size: 15px; }
  .floor__side .keypad { gap: var(--sp-2); }
}

/* Håndholdt og smalle skærme: tastaturet flytter ned, men forbliver permanent synligt */
@media (max-width: 899px) {
  .floor__main { flex-direction: column; }
  .floor__side {
    flex: 0 0 auto;
    border-left: none;
    border-top: 1px solid var(--line-1);
    padding: 8px;
    background: var(--bg-1);
  }
  .floor__side .keypad__grid .key { min-height: 52px; font-size: 22px; }
  .floor__side .keypad__display { height: 52px; font-size: 27px; }
  .floor__cards { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); }
}

/* Liggende telefon: gitter og tastatur side om side igen, ellers bliver der for lidt plads */
@media (max-width: 899px) and (orientation: landscape) and (max-height: 560px) {
  .floor__main { flex-direction: row; }
  .floor__side {
    flex: 0 0 268px;
    border-top: none;
    border-left: 1px solid var(--line-1);
  }
  .floor__side .keypad__grid .key { min-height: 40px; font-size: 19px; }
  .floor__side .keypad__display { height: 42px; font-size: 22px; }
}

/* ============================================================
   Bestillingsskærm
   ============================================================ */
.ordhead {
  align-items: center;
  padding: 8px 12px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line-1);
  flex-wrap: wrap;
  row-gap: 6px;
}

.waitbanner {
  background: var(--yellow);
  color: var(--tx-inv);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: .3px;
  text-align: center;
  padding: 7px 12px;
  line-height: 1.3;
}

.ordmain {
  display: flex;
  flex-direction: row;
  min-height: 0;
  min-width: 0;
}

.ordleft { min-width: 0; min-height: 0; }

.ordright {
  flex: 0 0 372px;
  min-height: 0;
  min-width: 0;
  border-left: 1px solid var(--line-1);
  background: var(--bg-1);
}

/*
   Regningen skal have plads. Handlingsknapperne er derfor lavere
   her end i resten af systemet, og regningen får en garanteret
   minimumshøjde, så den ikke klemmes sammen til ingenting.
*/
.ordright .scroll-y { min-height: 140px; }
.ordright .btn { min-height: 46px; }
.ordright .btn--sm { min-height: 38px; font-size: 13px; }
.ordright .total-line { font-size: 14px; }
.ordright .total-line--grand { font-size: 20px; }

@media (min-height: 900px) {
  .ordright .btn { min-height: 52px; }
  .ordright .scroll-y { min-height: 220px; }
}

.guestbar {
  padding: 8px 10px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line-1);
  align-items: center;
}
.guestbar .btn { flex: 0 0 auto; }

/* Tablet og håndholdt: regningen lægger sig under produkterne */
@media (max-width: 1023px) {
  .ordright { flex: 0 0 320px; }
}

@media (max-width: 819px) {
  .ordmain { flex-direction: column; }
  .ordleft { flex: 1 1 auto; min-height: 180px; }
  .ordright {
    flex: 0 0 auto;
    max-height: 52%;
    border-left: none;
    border-top: 2px solid var(--line-2);
  }
  .ordright .scroll-y { max-height: 34vh; }
  .ordhead { padding: 6px 10px; }
}

/* Liggende telefon: tilbage til to spalter, ellers er der ikke plads */
@media (max-width: 819px) and (orientation: landscape) and (max-height: 560px) {
  .ordmain { flex-direction: row; }
  .ordright {
    flex: 0 0 300px;
    max-height: none;
    border-top: none;
    border-left: 1px solid var(--line-2);
  }
  .ordright .scroll-y { max-height: none; }
}

/*
   Tastatur inde i en dialog skal fylde mindre end på bordplanen,
   så GENNEMFØR altid er synlig uden at rulle.
*/
.modal .keypad { gap: var(--sp-2); }
.modal .keypad__display { height: 54px; font-size: 28px; }
.modal .keypad__grid { gap: 6px; }
.modal .keypad__grid .key { min-height: 52px; font-size: 22px; }
.modal .keypad__msg { min-height: 0; }
.modal .btn--lg { min-height: 54px; font-size: 16px; }

@media (max-height: 820px) {
  .modal .keypad__display { height: 46px; font-size: 24px; }
  .modal .keypad__grid .key { min-height: 44px; font-size: 20px; }
  .modal .btn--lg { min-height: 46px; font-size: 15px; }
  .modal__head { padding: var(--sp-3) var(--sp-4); }
  .modal__title { font-size: 16px; }
}

/* ============================================================
   Knapopsætning — gitter med flettede felter
   ============================================================ */
.buttongrid {
  display: grid;
  gap: 4px;
  width: 100%;
  /* Felterne skal være kvadratiske nok til at ramme med en finger */
  grid-auto-rows: minmax(56px, auto);
}
.buttongrid--compact { grid-auto-rows: minmax(44px, auto); }

/* ------------------------------------------------------------
   I drift FYLDER gitteret skærmen

   Der må ikke være knapper, der gemmer sig længere nede. Rækkerne
   deler den plads der er, i stedet for at kræve en fast højde og
   skubbe resten ud over kanten. I editoren er det omvendt: dér er
   det i orden at rulle, for man sidder og arbejder.
   ------------------------------------------------------------ */
.gitterflade {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  padding: 6px;
  overflow: hidden;
}
.gitterflade > .buttongrid {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  /*
     IKKE height: 100 %.

     En højde i procent regnes ud fra forælderens højde — og den
     er ikke kendt på forhånd i et flex-layout. Så blev den til
     "auto", rækkerne krøb sammen om deres indhold, og hele
     gitteret lagde sig i toppen med en sort flade under sig.
     align-self: stretch gør det rigtige: fyld det der er.
  */
  align-self: stretch;
}
.gitterflade > .buttongrid > .gridcell { min-height: 0; }

/* ------------------------------------------------------------
   Total og betal må ALDRIG klemme knapperne væk

   Feltet er lavt, og der er både tal og to store knapper i det.
   Bliver pladsen for lille, er det TALLENE der viger — knapperne
   skal kunne rammes. Uden dette lå Betal ude over kanten.
   ------------------------------------------------------------ */
.panel--total .total-line { flex: 0 1 auto; min-height: 0; overflow: hidden; }

/* Knapperne får resten af pladsen og skalerer med feltet. Er der
   næsten ingen plads, er det tallene der forsvinder — man kan
   altid se totalen i regningen, men man kan ikke betale uden en
   knap at ramme. */
.panel--total .row { flex: 1 1 auto; min-height: 34px; }
.panel--total > .btn { flex: 0 0 auto; }
.panel--total .btn--lg {
  min-height: 34px;
  height: 100%;
  font-size: 15px;
  padding: 4px 8px;
}

/* ------------------------------------------------------------
   Regningen bladres med pile — ikke med en rullebjælke

   En rullebjælke er til en mus. Her er der fingre, og der skal
   være noget at ramme. To små pile i højre side, og de er kun
   der, når der FAKTISK er mere at se.
   ------------------------------------------------------------ */
.medpile {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}
.medpile__flade {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}
.medpile__flade::-webkit-scrollbar { width: 0; height: 0; }

.medpile__pile {
  flex: 0 0 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 2px 2px 2px 4px;
}
.medpile__pil {
  flex: 0 0 auto;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  color: var(--tx-2);
  font-size: 14px;
  line-height: 1;
}
.medpile__pil:active { background: var(--accent); color: var(--accent-tx); }
.medpile__pil[disabled] { opacity: .25; }

.gridcell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  /* Stramt lodret, så både navn og pris kan være i en knap på
     45 px. Det er der plads til 12 rækker på en almindelig skærm. */
  padding: 4px 7px;
  border-radius: var(--r-sm);
  background: var(--bg-3);
  border: 1px solid var(--line-1);
  color: var(--tx-1);
  text-align: left;
  overflow: hidden;
  transition: background .1s, transform .06s, border-color .12s;
}
.gridcell:active { transform: scale(.97); }
.gridcell:hover { background: var(--bg-4); }

.gridcell__label {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.1;
  width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  /*
     `anywhere` brækkede ord midt over — "Smørrebrø / d med".
     `break-word` gjorde det samme, bare sjældnere: "Drikkevar /
     e" og "FRONTEN / D TEST" stod på kassen.

     Et brækket ord ligner en stavefejl. Et klippet ord med "…"
     ligner det, det er: et navn, der ikke kunne være der. Derfor
     bryder vi KUN mellem ord ("Smørrebrød / med rejer") og lader
     resten klippe.
  */
  overflow-wrap: normal;
  word-break: normal;
  /* ------------------------------------------------------------
     F-055 · INGEN ORDDELING I KNAPTEKSTER

     Her stod `hyphens: auto`. Browseren delte så ordene efter
     sine egne regler, og på kassen kom der til at stå
     "Soda-vand", "Drikkeva-re" og "FRON-TEND…".

     En tjener læser ikke knappen — han genkender den. Et ord med
     en bindestreg midt i ligner ikke det ord, hånden leder efter,
     og så bruger han et halvt sekund på at læse i stedet.

     Uden orddeling brydes teksten kun MELLEM ord. Passer et navn
     stadig ikke, klipper `text-overflow` det med "…", og så er
     det tydeligt, at der mangler noget — i stedet for at ligne
     et ord, der bare stavedes underligt.
     ------------------------------------------------------------ */
  hyphens: none;
  /* Klippes der alligevel, skal det ses — ikke bare mangle */
  text-overflow: ellipsis;
  /* NAVNET er det vigtige. Bliver feltet lavt, må prisen vige —
     aldrig navnet. Uden dette klemte gitteret navnet helt væk,
     så knapperne kun viste et beløb. */
  flex: 0 0 auto;
}
.gridcell__price {
  font-size: 11px;
  line-height: 1.1;
  font-weight: 600;
  opacity: .8;
  font-variant-numeric: tabular-nums;
  /* Enten er hele prisen der, eller også er den der ikke.
     En halv talrække er værre end ingen. */
  flex: 0 0 auto;
  white-space: nowrap;
}
.gridcell__key {
  position: absolute;
  top: 3px;
  right: 4px;
  font-size: 9.5px;
  font-weight: 700;
  opacity: .55;
  font-family: var(--mono);
}
.gridcell__arrow {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 15px;
  font-weight: 800;
  opacity: .6;
}

/* Feltets art ses på venstrekanten */
.gridcell--kategori { border-left: 3px solid var(--blue); }
.gridcell--side     { border-left: 3px solid var(--purple); }
.gridcell--handling { border-left: 3px solid var(--orange); }
.gridcell--tekst {
  background: transparent;
  border-color: transparent;
  color: var(--tx-3);
  font-weight: 700;
  justify-content: flex-end;
}

/* Peger feltet på en slettet vare, skal det ses med det samme */
.gridcell--broken {
  background: var(--red-soft);
  border-color: var(--red);
  color: var(--toast-error-tx);
}

/* Tomme pladser er usynlige i drift, synlige i editoren */
.gridcell--empty { background: transparent; border: none; }
.gridcell--slot {
  background: transparent;
  border: 1px dashed var(--line-1);
  color: var(--line-2);
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 700;
}
.gridcell--slot:hover {
  border-color: var(--orange);
  color: var(--orange);
  background: var(--orange-soft);
}

.gridcell.is-selected {
  outline: 2px solid var(--orange);
  outline-offset: 1px;
}

/* ---------- Paneler ---------- */
.gridcell--panel {
  background: rgba(63, 140, 255, .10);
  border: 1px dashed var(--blue);
  border-left: 3px solid var(--blue);
  align-items: flex-start;
  justify-content: flex-start;
  padding: 8px 10px;
}
.gridcell__panelinfo {
  position: absolute;
  bottom: 4px;
  right: 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}
/* Panelet er for lille til at kunne bruges */
.gridcell--panel[title*="mindst"] {
  border-color: var(--at-late);
  background: rgba(242, 140, 28, .12);
}

/* Værten tegner selv indholdet i drift */
.gridcell--panelhost {
  background: transparent;
  border: none;
  padding: 0;
  display: flex;
  min-height: 0;
  overflow: hidden;
}
.gridcell--panelhost > * { flex: 1 1 auto; min-width: 0; min-height: 0; }

/* ---------- Paneler i drift ---------- */
.panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  padding: 8px;
  border-radius: var(--r-sm);
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  gap: 6px;
  overflow: hidden;
}
.panel--info { flex-direction: row; padding: 6px 10px; }
.panel--regning { padding: 6px; gap: 5px; }
.panel--total { justify-content: flex-end; }
.panel--gaester { flex-direction: row; padding: 5px 8px; }
.panel--soeg { padding: 4px; }
.panel--tastatur { padding: 5px; }
.panel--tastatur .keypad { height: 100%; }
.panel--tastatur .keypad__grid { flex: 1 1 auto; }
.panel--tastatur .key { min-height: 0; }
.panel--tastatur .keypad__display { height: 40px; font-size: 20px; }

/* ---------- Træk og slip ---------- */
.gridcell--edit { cursor: grab; touch-action: none; }
.gridcell--edit.is-dragging { cursor: grabbing; opacity: .45; }

.gridcell__grip {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  cursor: nwse-resize;
  opacity: 0;
  transition: opacity .12s;
  /* De to skrå streger der viser at hjørnet kan trækkes */
  background:
    linear-gradient(135deg, transparent 45%, currentColor 45%, currentColor 55%, transparent 55%),
    linear-gradient(135deg, transparent 70%, currentColor 70%, currentColor 80%, transparent 80%);
}
.gridcell--edit:hover .gridcell__grip,
.gridcell.is-selected .gridcell__grip { opacity: .55; }
.gridcell__grip:hover { opacity: 1 !important; }

/* Skygge der viser hvor feltet lander */
.gridshadow {
  border: 2px solid var(--orange);
  background: var(--orange-soft);
  border-radius: var(--r-sm);
  pointer-events: none;
  z-index: 5;
}
.gridshadow--blokeret {
  border-color: var(--red);
  background: rgba(229, 72, 77, .18);
}

@media (max-width: 819px) {
  .buttongrid { gap: 3px; grid-auto-rows: minmax(48px, auto); }
  .gridcell { padding: 4px 6px; }
  .gridcell__label { font-size: 12px; -webkit-line-clamp: 2; }
}

/* Gavekort — visning og print */
.giftcard {
  background: linear-gradient(140deg, var(--giftcard-1) 0%, var(--giftcard-2) 100%);
  border: 2px solid var(--orange);
  border-radius: var(--r-lg);
  padding: 22px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.giftcard__brand {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 3px;
  color: var(--orange);
}
.giftcard__amount {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -1px;
}
.giftcard__code {
  font-family: var(--mono);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 3px;
  padding: 10px;
  background: var(--bg-0);
  border-radius: var(--r-sm);
  word-break: break-all;
}
.giftcard__meta { font-size: 12.5px; color: var(--tx-2); }
.giftcard__msg { font-size: 14px; font-style: italic; color: var(--tx-1); }
.giftcard__terms {
  font-size: 10.5px;
  color: var(--tx-3);
  line-height: 1.45;
  border-top: 1px solid var(--line-1);
  padding-top: 10px;
}

/* TEMAFAST — papir er altid sort på hvidt og må ikke følge temaet */
@media print {
  .giftcard {
    background: #fff;
    color: #000;
    border-color: #000;
  }
  .giftcard__brand, .giftcard__amount, .giftcard__msg { color: #000; }
  .giftcard__code { background: #eee; color: #000; }
  .giftcard__meta, .giftcard__terms { color: #333; }
}
/* TEMAFAST SLUT */

/* Kombinationsmenu på regningen — én post med retterne under */
.combobox {
  border: 1px solid var(--purple);
  border-radius: var(--r-md);
  background: rgba(157, 107, 255, .07);
  overflow: hidden;
}
.combobox__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 10px;
  background: var(--st-betaler-bg);
  font-size: 14.5px;
}
.combobox__save {
  padding: 0 10px 6px;
  font-size: 11.5px;
  color: var(--st-betaler-tx);
  font-weight: 600;
}

/* Byttepenge- og kursvisning i betalingsdialogerne */
.paychange {
  min-height: 24px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  font-size: 14px;
  line-height: 1.5;
}
.paychange:empty { display: none; }
.paychange--error { border-color: var(--red); color: var(--toast-error-tx); }

/* Advarsel om manglende obligatorisk valg i produktdialogen */
.reqbanner {
  background: var(--orange-soft);
  border: 1px solid var(--orange);
  color: var(--st-service-tx);
  border-radius: var(--r-md);
  padding: 10px 12px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
}

/* ============================================================
   KDS — køkken- og barskærm
   Læsbar på afstand, høj kontrast, store bogstaver.
   ============================================================ */
.kds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 10px;
  align-content: start;
}

.kds-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border: 2px solid var(--line-2);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.kds-card--wait { border-color: var(--yellow); opacity: .96; }
.kds-card--ready { border-color: var(--green); }
.kds-card--allergy { border-color: var(--red); }

.kds-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-3);
  border-bottom: 1px solid var(--line-1);
}
.kds-card__table { font-size: 19px; font-weight: 800; letter-spacing: .5px; }
.kds-card__meta { font-size: 11.5px; color: var(--tx-3); margin-top: 2px; }
/* Hvor bonnen kom fra. Læsbar på afstand, men aldrig så stor at
   den forveksles med det bord, maden skal bæres hen til. */
.kds-card__fra { font-size: 13px; font-weight: 700; color: var(--at-late); margin-top: 1px; }
.kds-card__time {
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}

.kds-allergy {
  background: var(--red);
  color: var(--tx-on-danger);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 1px;
  text-align: center;
  padding: 6px;
}

.kds-waitbar {
  background: var(--yellow);
  color: var(--tx-inv);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 1px;
  text-align: center;
  padding: 6px;
}

.kds-card__lines {
  flex: 1 1 auto;
  min-height: 0;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kds-line { display: flex; gap: 10px; align-items: flex-start; }
.kds-line--void { opacity: .4; text-decoration: line-through; }
.kds-line__qty {
  flex: 0 0 auto;
  min-width: 32px;
  font-size: 19px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.kds-line__name { font-size: 16px; font-weight: 700; line-height: 1.2; letter-spacing: .2px; }
.kds-line__mods { font-size: 13px; color: var(--tx-2); font-weight: 600; margin-top: 2px; }
.kds-line__mods .neg { color: var(--tx-neg); }
.kds-line__allergy {
  font-size: 13px;
  font-weight: 800;
  color: var(--tx-on-danger);
  background: var(--red);
  padding: 3px 6px;
  border-radius: 4px;
  margin-top: 4px;
  display: inline-block;
}
.kds-line__note { font-size: 13px; font-weight: 700; color: var(--yellow); margin-top: 2px; }

.kds-card__foot {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid var(--line-1);
}

@media (max-width: 639px) {
  .kds-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Bon — sort/hvid til termisk printer
   ============================================================ */
/* TEMAFAST — papir er altid sort på hvidt og må ikke følge temaet */
.bon {
  width: 302px;
  margin: 0 auto;
  background: #fff;
  color: #000;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.35;
  padding: 10px 12px;
  white-space: pre-wrap;
}
.bon__hr { border-top: 1px dashed #000; margin: 6px 0; }
.bon__big { font-size: 17px; font-weight: 700; letter-spacing: .5px; }
.bon__center { text-align: center; }
.bon__box {
  border: 3px solid #000;
  padding: 6px;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 2px;
  margin: 6px 0;
}
.bon__line { display: flex; gap: 8px; }
.bon__qty { flex: 0 0 auto; min-width: 26px; font-weight: 700; }
.bon__mod { padding-left: 26px; }
.bon__allergy {
  border: 3px solid #000;
  background: #000;
  color: #fff;
  padding: 4px 6px;
  font-weight: 700;
  text-align: center;
  margin: 4px 0;
}

@media print {
  body { background: #fff; color: #000; }
  .app-root, .toast-host, .modal-backdrop { display: none !important; }
  .bon-print-host { display: block !important; }
  .bon { width: auto; padding: 0; }
  @page { margin: 4mm; }
}

/* TEMAFAST SLUT */
/* ---------- Tastatur på skærmen ---------------------------------- */
/* Kasserne har hverken mus eller tastatur, så al fritekst skrives her */
.kbd__display {
  min-height: 52px; padding: 12px 14px;
  background: var(--bg-0); border: 2px solid var(--accent);
  border-radius: var(--r-md);
  font-size: 18px; line-height: 1.35; word-break: break-word;
}
.kbd__count { font-size: 12px; color: var(--tx-3); text-align: right; }
.kbd { display: block; }
.kbd__row { display: flex; gap: 6px; margin-bottom: 6px; }
.kbd__key {
  flex: 1 1 0; min-width: 0; min-height: 54px;
  background: var(--bg-3); color: var(--tx-1);
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  font-size: 19px; font-weight: 600; cursor: pointer;
  -webkit-user-select: none; user-select: none;
}
.kbd__key:active { background: var(--accent); color: var(--accent-tx); }
.kbd__key--mod { flex: 1.4 1 0; font-size: 15px; background: var(--bg-2); }
.kbd__key--on { background: var(--accent); color: var(--accent-tx); }
.kbd__key--space { flex: 6 1 0; font-size: 15px; }

/* Felt der ligner et inputfelt, men åbner tastaturet ved tryk */
.tekstfelt {
  display: block; width: 100%; min-height: 48px;
  padding: 12px 14px; text-align: left;
  background: var(--bg-3); color: var(--tx-1);
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  font-size: 15px; line-height: 1.35; cursor: pointer;
  word-break: break-word;
}
.tekstfelt--tom { color: var(--tx-3); }
.tekstfelt--danger { border: 2px solid var(--red); background: var(--bg-0); }

/* ---------- Antalbjælken: taltastatur over varerne ----------- */
/* Seks sodavand skal koste to tryk: 6, og så varen. */
.antalbar {
  align-items: stretch;
  padding: 6px 10px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line-1);
  gap: 4px;
}
.antalbar--aktiv {
  background: var(--orange-soft);
  border-bottom: 2px solid var(--orange);
}
.antal__visning {
  flex: 0 0 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--tx-3);
  letter-spacing: .5px;
}
.antalbar--aktiv .antal__visning { color: var(--orange); font-size: 22px; }
.antal__ciffer {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.antal__ciffer--dim { opacity: .35; }
.antal__ciffer--ryd { flex: 0 0 52px; color: var(--tx-3); }

@media (max-width: 819px) {
  .antal__visning { flex: 0 0 58px; font-size: 15px; }
  .antal__ciffer { min-height: 40px; font-size: 17px; }
}

/* ---------- Valgliste: ét spørgsmål ad gangen ---------------- */
/* Store linjer, numre foran. Hånden skal kunne ramme uden at kigge. */
.valgliste__hjaelp {
  font-size: 13px;
  color: var(--tx-2);
  line-height: 1.45;
  margin-bottom: var(--sp-2);
}
.valgliste__rows { display: block; }
.valgliste__linje {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 62px;
  padding: 10px 14px;
  margin-bottom: 6px;
  text-align: left;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  color: var(--tx-1);
  font-size: 18px;
  line-height: 1.25;
}
.valgliste__linje--valgt {
  background: var(--accent);
  color: var(--accent-tx);
  border-color: var(--accent);
  font-weight: 700;
}
.valgliste__linje--fra { opacity: .4; }
.valgliste__nr {
  flex: 0 0 34px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  opacity: .8;
}
.valgliste__navn { flex: 1 1 auto; min-width: 0; }
.valgliste__pris {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.valgliste__rul {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--sp-2);
}
.valgliste__pil { flex: 0 0 84px; min-height: 46px; font-size: 18px; }
.valgliste__tael {
  flex: 1 1 auto;
  text-align: center;
  font-size: 13px;
  color: var(--tx-3);
  font-variant-numeric: tabular-nums;
}

.valgliste__tal {
  display: flex;
  gap: 5px;
  margin-top: var(--sp-3);
}
.valgliste__ciffer {
  flex: 1 1 0;
  min-width: 0;
  min-height: 46px;
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* På telefonen fylder listen skærmen — ingen småting at ramme forbi */
@media (max-width: 639px) {
  .valgliste__linje { min-height: 58px; font-size: 17px; }
  .valgliste__ciffer { min-height: 42px; font-size: 16px; }
}

/* ---------- Plus og minus direkte på linjen ------------------ */
/* Kun på varer der ikke er sendt — en sendt vare får ingen knapper,
   så ingen tror at de bare er holdt op med at virke. */
.linjeknapper {
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
  align-self: center;
}
.linjeknap {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  color: var(--tx-1);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}
.linjeknap:active { background: var(--accent); color: var(--accent-tx); }

/* Linjen skal kunne følge fingeren under et swipe */
.orderline { transition: transform .12s ease-out; }

/* Plus på en sendt vare betyder "bestil én mere" — den skal
   skille sig ud, så man kan se at der sker noget nyt */
.linjeknap--plus { border-color: var(--accent); color: var(--accent); }

/* ============================================================
   Den faste tasteblok under regningen

   Fem taster på ÉN række. Pladserne ligger fast: en tast flytter
   sig aldrig, og der kommer aldrig en ekstra ind imellem dem.
   Det er hele pointen — hånden skal kunne finde RETUR uden at
   øjnene skal med.

   Blokken skal fylde så lidt som overhovedet muligt. Regningen
   er det man kigger på; tasterne skal bare være der.
   ============================================================ */
.funkblok {
  flex: 0 0 auto;
  display: grid;
  /* Bred række — bruges kun dér, hvor blokken ligger under noget */
  grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
  gap: 4px;
  padding: 5px 8px;
  background: var(--bg-2);
  border-top: 1px solid var(--line-1);
}

/* ------------------------------------------------------------
   LODRET STRIBE VED SIDEN AF REGNINGEN

   Tasterne handler om linjerne i regningen. Står de ved siden af,
   peger hånden på det, den arbejder med — og regningen får hele
   højden i stedet for at blive klemt af en bred tasterække.

   Bredden er fast. En tast, der ændrer bredde, fordi teksten
   skifter fra "Rette" til "RETTE TIL", ville flytte de andre —
   og så kan hånden ikke længere finde dem uden at kigge.
   ------------------------------------------------------------ */
.funkblok--lodret {
  grid-template-columns: 1fr;
  /* Alle ni skal kunne ses PÅ ÉN GANG. Skal man rulle for at nå
     Genkald, kan hånden ikke finde den uden at kigge — og så er
     hele pointen med en fast blok væk. `1fr` deler højden ligeligt
     i stedet for at give hver tast en mindstehøjde, der tvinger
     den sidste ud over kanten. */
  grid-auto-rows: 1fr;
  /* Højden skal komme fra rummet, ikke fra tasterne. Uden
     `height: 100%` regner gitteret sin egen højde ud af
     mindstehøjderne — og så stikker den sidste tast neden ud og
     bliver klippet af. Genkald var væk. */
  height: 100%;
  min-height: 0;
  width: 92px;
  padding: 0 6px 0 0;
  background: transparent;
  border-top: 0;
  overflow: hidden;
}
.funkblok--lodret {
  gap: 3px;
}
.funkblok--lodret .funk {
  /* INGEN mindstehøjde her. Rækkerne deler højden med `1fr`, og
     en mindstehøjde oven i den gør summen større end rummet — så
     stikker den sidste tast ud og bliver klippet af. Det var
     Genkald, der forsvandt.

     ------------------------------------------------------------
     F-055 · MEN SÅ MÅ BLOKKEN LÆGGE SIG I TO KOLONNER

     Følgen af `1fr` var, at ni taster på en lav skærm blev 26 px
     høje. Det er en musemålsknap, ikke en fingermålsknap.

     Første forsøg var en mindstehøjde på RUMMET. Det flyttede
     bare klipningen: nu stak Betal og Luk bord neden ud af siden.
     Højden er ikke til forhandling — den er, hvad skærmen giver.

     Det, der ER til forhandling, er hvor mange RÆKKER de ni
     taster ligger på. To kolonner giver fem rækker i stedet for
     ni, og så er der plads til 40 px hver. Se højde-forespørgslen
     nedenfor.
     ------------------------------------------------------------ */
  min-height: 0;
  font-size: 11.5px;
  padding: 2px;
  line-height: 1.05;
}

/* Rummet, tasterne og regningen deler */
.kasse__regningsrum {
  display: flex;
  gap: 0;
  min-height: 0;
  overflow: hidden;
}
.kasse__regningsrum > .kasse__regning { flex: 1 1 auto; min-width: 0; }
.kasse__regningsrum > .funkblok--lodret { flex: 0 0 auto; align-self: stretch; }

/* ------------------------------------------------------------
   F-055 · TO KOLONNER NÅR SKÆRMEN ER LAV

   Ni taster i én kolonne kræver 9 × 40 px + 8 × 3 px mellemrum
   = 384 px. Regningsrummet får sin højde af skærmen minus
   sortiment, antalfelt og betalingsknapper — cirka 460 px. Så
   under en skærmhøjde på ~845 px rækker én kolonne ikke.

   Grænsen er sat til 860 px med lidt luft. Over den er der plads
   til én kolonne (på kassernes 982 px bliver hver tast ~55 px);
   under den lægger blokken sig i to, og hver tast bliver højere
   end i én kolonne — ikke lavere.

   Rækkefølgen er stadig læseretning: Slet, Retur, Genkald …
   Hånden skal kunne finde dem uden at kigge, og en kolonne mere
   ændrer ikke, at pladsen er den samme hver gang.
   ------------------------------------------------------------ */
@media (max-height: 860px) and (min-width: 901px) {
  .funkblok--lodret {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: minmax(40px, 1fr);
    /* 150, ikke 2 × 92. Teksterne er korte ("Slet", "Retur"), og
       hver px, blokken tager, er en px mindre til varenavnet ved
       siden af. Første forsøg med 184 px pressede "TEST · Gin &
       Tonic" ned over tre linjer. */
    width: 150px;
  }
  .funkblok--lodret .funk { font-size: 11.5px; padding: 2px 1px; }
}

/* Håndholdt: striben lægger sig ned igen. På en telefon er der
   ikke bredde til både taster og regning ved siden af hinanden. */
@media (max-width: 900px) {
  .kasse__regningsrum { flex-direction: column-reverse; }
  .funkblok--lodret {
    width: auto;
    grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
    padding: 5px 0 0;
    border-top: 1px solid var(--line-1);
  }
}

.funk {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 2px 4px;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  color: var(--tx-1);
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .2px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.funk:active { background: var(--accent); color: var(--accent-tx); }

/* Kan tasten ikke bruges lige nu, står den mat — men den bliver
   liggende, og den svarer stadig når man trykker */
.funk--fra { opacity: .45; }
.funk--fra:active { background: var(--bg-4); color: var(--tx-1); }

.funk--fare { color: var(--red); }
.funk--fra.funk--fare { color: var(--tx-2); }

/* Slået til: RETUR venter på den næste vare */
.funk--paa {
  background: var(--red);
  border-color: var(--red);
  color: var(--tx-on-danger);
}

.funkblok--retur { background: var(--red-soft); }
.funkblok--rette { background: var(--orange-soft); }

/* Fortryd er en vej TILBAGE, ikke en handling. Den skal se
   anderledes ud end de taster der ændrer noget. */
.funk--fortryd { border-style: dashed; }

.rettebanner {
  background: var(--orange);
  color: var(--tx-inv);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: .3px;
  text-align: center;
  padding: 7px 12px;
  line-height: 1.3;
}

/* Mens Rette er slået til, skal man kunne SE at et tryk på en
   linje fjerner den. Ellers er det en fælde. */
.orderline--rammes {
  border-left-color: var(--orange);
  box-shadow: inset 0 0 0 1px var(--orange);
}
.orderline--rammes .orderline__name::after {
  content: '  ×';
  color: var(--orange);
  font-weight: 800;
}

.returbanner {
  background: var(--red);
  color: var(--tx-on-danger);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: .3px;
  text-align: center;
  padding: 7px 12px;
  line-height: 1.3;
}

/* En returlinje er en modpost. Rød kant og negativt beløb, så
   den aldrig forveksles med et salg. */
.orderline--retur { border-left-color: var(--red); }
.orderline--retur .orderline__price { color: var(--red); font-weight: 800; }

/* På en smal skærm bliver teksten mindre — men tasterne bliver
   liggende på én række. Pladserne må ikke skifte med bredden. */
@media (max-width: 819px) {
  .funk { min-height: 34px; font-size: 10px; letter-spacing: 0; padding: 2px; }
}

/* ------------------------------------------------------------
   Antal-feltet

   Ligger som et felt PÅ siden, ikke som en bjælke over den. Så
   flytter intet sig, når man åbner en kategori — og huset kan
   selv bestemme, hvor det skal være, eller om det skal være der.
   ------------------------------------------------------------ */
.panel--antal { padding: 3px; justify-content: center; }
.panel--antal .antalbar {
  padding: 0;
  background: transparent;
  border-bottom: none;
  gap: 3px;
}
/* ------------------------------------------------------------
   F-055 · CIFRENE SKAL KUNNE RAMMES MED EN FINGER

   Her stod `min-height: 0`, så cifrene fyldte det felt, huset
   havde tegnet — og i et lavt felt blev de 28 px høje.

   28 px er en musemålsknap. Kassen betjenes med en finger på en
   travl aften, og et fejltryk på antallet sender fire øl af sted
   i stedet for én.

   Feltet må gerne være lavt; cifrene må ikke. Bliver feltet for
   lavt til dem, vokser det — det er den rigtige vej rundt.
   ------------------------------------------------------------ */
.panel--antal .antal__ciffer { min-height: 40px; height: 100%; }
.panel--antal .antal__visning { flex: 0 0 62px; font-size: 15px; }


/* ============================================================
   Rabat, pris og opslag
   ============================================================ */

.rabatbanner,
.prisbanner {
  background: var(--orange);
  color: var(--tx-inv);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .3px;
  padding: 7px 12px;
  text-align: center;
}

/* Totalpanelet kan rammes, når Rabat er tændt */
.panel--rammes {
  outline: 2px solid var(--orange);
  outline-offset: -2px;
}

.rabat__overskrift {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--tx-3);
  margin-top: 4px;
}

.rabat__aarsager {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px;
}
.rabat__aarsager .btn { min-height: 52px; flex-direction: column; gap: 0; }

.rabat__pct {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 6px;
}

.bfelt__input--stor {
  min-height: 54px;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
}

/* ---------- Opslag ---------- */
.opslag__liste {
  display: flex;
  flex-direction: column;
  max-height: 46vh;
  overflow-y: auto;
  border-top: 1px solid var(--line-1);
}
.opslag__rk {
  display: grid;
  grid-template-columns: 68px 1fr auto;
  gap: 10px;
  align-items: center;
  min-height: 46px;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-1);
  color: var(--tx-1);
  text-align: left;
  font-size: 15px;
  cursor: pointer;
}
.opslag__rk:hover, .opslag__rk:focus { background: var(--bg-3); }
.opslag__plu {
  font-variant-numeric: tabular-nums;
  color: var(--tx-3);
  font-size: 13px;
}
.opslag__navn { font-weight: 600; }
.opslag__pris { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Rabat og prisændring på selve linjen */
.orderline__rabat {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--orange);
  margin-top: 1px;
}
.orderline__foer {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--tx-3);
  text-decoration: line-through;
}

/* ---------- Kreditnota ---------- */
.knrk {
  display: grid;
  grid-template-columns: 1fr auto 110px;
  gap: 12px;
  align-items: center;
  padding: 9px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-sm);
}
.knrk--valgt { border-color: var(--red); background: var(--red-soft); }
.knrk__antal { display: flex; align-items: center; gap: 8px; }
.knrk__antal .btn { min-width: 40px; }
.knrk__tal {
  min-width: 56px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.knrk__sum {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--red-lt);
}

/* ---------- Kontokunder ---------- */
.kundrk {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 12px;
  align-items: center;
  min-height: 56px;
  padding: 9px 12px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-1);
  color: var(--tx-1);
  text-align: left;
  cursor: pointer;
}
.kundrk:hover, .kundrk:focus { background: var(--bg-3); }
.kundrk--fuld { background: var(--red-soft); }
.kundrk__nr {
  font-variant-numeric: tabular-nums;
  color: var(--tx-3);
  font-size: 13px;
}
.kundrk__saldo {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ============================================================
   Indtastningsfelter i dialoger

   Lå kun i backend.css, som kassen ikke indlæser. Derfor stod
   felterne i Rabat, Kreditnota og På regning som hvide kasser
   fra browserens standard — midt i en mørk skærm.

   De hører til begge steder, så de bor her.
   ============================================================ */
.bfelt { display: flex; flex-direction: column; gap: 4px; }
.bfelt__navn {
  font-size: 11.5px;
  color: var(--tx-3);
  font-weight: 600;
}
.bfelt__input {
  min-height: 44px;
  padding: 9px 12px;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  color: var(--tx-1);
  font-size: 15px;
  width: 100%;
}
.bfelt__input::placeholder { color: var(--tx-3); }
.bfelt__input:focus { outline: none; border-color: var(--accent); }

.bhjaelp {
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  font-size: 13px;
  line-height: 1.6;
  color: var(--tx-2);
}

.blogin__fejl {
  padding: 9px 12px;
  border-radius: var(--r-sm);
  background: var(--red-soft);
  border: 1px solid var(--red);
  color: var(--red-lt);
  font-size: 13.5px;
}

.btom {
  padding: 32px 16px;
  text-align: center;
  color: var(--tx-3);
  font-size: 14px;
  line-height: 1.6;
}

.bunder {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--tx-3);
  margin: 12px 0 6px;
}

.brække {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

/* ============================================================
   Bordplanen på kassen — lokalet, levende
   ============================================================ */
.floor__baand {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 8px 14px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line-1);
  flex: 0 0 auto;
}
.floor__tal { display: flex; flex-direction: column; line-height: 1.15; }
.floor__tal__vaerdi { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.floor__tal__navn { font-size: 11px; color: var(--tx-3); }
.floor__tal--haster .floor__tal__vaerdi { color: var(--red); }

.pv { padding: 12px; }
/* ------------------------------------------------------------
   RAMMEN ER RAMMEN

   Alt uden for planens firkant klippes væk på kassen. Sætter
   nogen et gulv, der stikker en meter ud over kanten, skal det
   ikke lægge sig hen over bordnumrene på tjenerens skærm.

   Det gælder KUN kassen. I editoren skal man kunne se, at noget
   stikker ud — ellers kan man ikke få fat i det igen. Der
   markeres det i stedet, se `.bp__flade` og "Tilpas planen".
   ------------------------------------------------------------ */
.pv__flade {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
}

.pv__bord {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 2px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--line-2);
  background: var(--bg-3);
  color: var(--tx-1);
  overflow: hidden;
  touch-action: none;
  transition: none;
}
.pv__bord--rund { border-radius: 50%; }
.pv__bord--bar  { border-style: dashed; }

/* Farven er tilstanden. Ledigt er tomt og roligt; alt andet
   lyser, fordi der er nogen, der venter på noget. */
.pv__bord--ledigt      { background: var(--bg-1); border-style: dashed; color: var(--tx-3); }
/* Bordene ligger over gulve, vægge og bar — man skal kunne ramme
   dem, uanset hvad der er tegnet omkring dem */
.pv__bord { z-index: 5; }

.pv__bord--optaget     { background: var(--bg-4); border-color: var(--accent); }
.pv__bord--service     { background: var(--bg-4); border-color: var(--blue, var(--accent)); }
.pv__bord--betaler     { background: var(--orange-soft, var(--bg-4)); border-color: var(--orange); }
.pv__bord--betalt      { background: var(--green-soft, var(--bg-4)); border-color: var(--green); }
.pv__bord--klargoeres  { background: var(--bg-2); border-color: var(--line-2); color: var(--tx-3); }

/* Ventetid uden aktivitet — det er dét, der bliver til en klage.
   Gul ved 10 minutter, rød ved 15, og ved 20 en stiplet kant:
   så er bordet ikke bare sent, det er glemt, og den stiplede
   kant skal kunne ses tværs gennem lokalet. */
.pv__bord--haster-gul   { box-shadow: inset 0 0 0 2px var(--orange); }
.pv__bord--haster-roed  { box-shadow: inset 0 0 0 2px var(--red); }
.pv__bord--haster-glemt {
  box-shadow: inset 0 0 0 2px var(--red);
  outline: 3px dashed var(--red);
  outline-offset: 3px;
}

.pv__bord--traekker { z-index: 20; opacity: .9; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
.pv__bord.is-maal   { outline: 3px solid var(--accent); outline-offset: 2px; }

.pv__tekst { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.pv__navn    { font-size: 15px; font-weight: 800; line-height: 1.05; }

/* ------------------------------------------------------------
   ET SELSKAB PÅ FLERE BORDE

   Otte mennesker ved bord 20 og 21 er ÉT selskab og ÉN regning.
   Uden et mærke ligner det to selskaber, der tilfældigvis kom
   samtidig — og så bæres maden hen til det forkerte bord.

   Alle bordene i kombinationen får en ramme, så man kan se, at de
   hører sammen. Bonbordet får en fuldt optrukket ramme og teksten
   "20 + 21"; de øvrige får en stiplet og en pil hen mod bonbordet.
   Forskellen er ikke kun farve — en tjener, der ikke ser forskel
   på grøn og gul, skal stadig kunne se, hvor regningen hænger.
   ------------------------------------------------------------ */
.pv__samlet {
  font-size: 10px;
  font-weight: 700;
  color: var(--tx-2);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.pv__bord--samlet {
  outline: 2px dashed var(--tx-3);
  outline-offset: -3px;
}
.pv__bord--samlet.pv__bord--bonbord {
  outline: 2.5px solid var(--tx-2);
}
.pv__pladser { font-size: 10px; color: var(--tx-3); }
.pv__tid     { font-size: 10.5px; color: var(--tx-3); font-variant-numeric: tabular-nums; }
.pv__belob   { font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pv__tjener {
  position: absolute; top: 2px; right: 4px;
  font-size: 9.5px; font-weight: 800; color: var(--tx-3);
}
.pv__vent {
  position: absolute; bottom: 2px; left: 4px;
  font-size: 8.5px; font-weight: 800; color: var(--red);
  letter-spacing: .5px;
}

.pv__element {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  border-radius: 3px;
  font-size: 10px;
  color: var(--tx-3);
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  pointer-events: none;
}
.pv__element--vaeg  { background: var(--line-2); border: none; }
.pv__element--doer  { background: transparent; border-style: dashed; }
.pv__element--tekst { background: transparent; border: none; }

/* Stolene omkring bordet */
.pv__gruppe { position: absolute; }
.pv__gruppe > .pv__bord { position: absolute; }
.pv__stol {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  color: var(--tx-3);
  font-size: 9px;
  font-weight: 700;
  padding: 0;
  line-height: 1;
  touch-action: none;
  z-index: 2;
}
/* En plads der er bestilt til, skal kunne ses uden at åbne regningen */
.pv__stol--optaget {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--tx-on-accent);
}

/* Farve på bordet — "Uden Bar Print" er ikke et gæstebord, og
   det skal kunne ses på en halv meters afstand */
.pv__bord--f-groen { background: var(--green-soft, var(--bg-4)); border-color: var(--green); }
.pv__bord--f-blaa  { background: var(--bg-4); border-color: var(--blue, var(--accent)); }
.pv__bord--f-gul   { background: var(--orange-soft, var(--bg-4)); border-color: var(--orange); }
.pv__bord--f-lilla { background: var(--bg-4); border-color: var(--purple, var(--tx-3)); }

/* Besked på bordet — den skal kunne ses PÅ planen */
.pv__besked {
  position: absolute; top: 2px; left: 4px;
  width: 13px; height: 13px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--orange);
  color: var(--tx-on-danger);
  font-size: 9.5px; font-weight: 800;
}

/* Bord info */
.bordinfo__besked {
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--orange-soft, var(--bg-3));
  border-left: 3px solid var(--orange);
  font-size: 14px;
  line-height: 1.5;
}
.bordinfo__plads {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line-1);
}
.bordinfo__plads:last-child { border-bottom: none; }
.bordinfo__nr {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  font-size: 12px; font-weight: 700;
}
.bordinfo__navn { flex: 1 1 auto; min-width: 0; }
.bordinfo__sum {
  flex: 0 0 auto;
  min-width: 86px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.bordinfo__plads--fri { opacity: .8; }
/* Knappen må ikke brække "Bestil" over to linjer */
.bordinfo__plads .btn { flex: 0 0 auto; white-space: nowrap; }

/* Bordet er lovet væk */
.pv__bord--booket    { border-style: solid; border-color: var(--blue, var(--accent)); }
.pv__bord--forsinket { border-style: solid; border-color: var(--red); }
.pv__booket {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- MÆRKET FOR EN BOOKING ----------
   Navnet stod her før og blev klippet: Havnevej har 55 borde, så
   feltet er hundrede pixels bredt, og "Familien Bjerre" blev til
   "Familie". Det ligner en fejl.

   Nu bærer bordet de to ting, man skal bruge på tværs af et
   lokale: at der ER en booking, og hvornår. Resten står i
   dialogen, hvor der er plads.

   Aldrig kun farve. Klokkeslættet står ved siden af, så en
   tjener, der ikke ser forskel på gul og grøn — og det er hver
   tolvte mand — stadig kan læse bordet. */
.pv__bookingmaerke {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
  margin: 1px auto 0;
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .35);
}
.pv__bookingmaerke--booket    { background: var(--blue); }
.pv__bookingmaerke--forsinket { background: var(--red); }
.pv__bookingmaerke--sidder    { background: var(--green); }
.pv__bookingtid {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
/* ---------- FLYT TIL ET ANDET BORD ----------
   Alle husets borde i én rullende skuffe, i husets orden med
   laveste nummer først. Optagne borde kan ikke vælges — de er
   slukkede, ikke skjulte, så man kan se HVORFOR bordet ikke kan
   bruges i stedet for at lede efter det. */
.res__skuffe {
  max-height: 46vh;
  overflow: auto;
  border: 1px solid var(--line-1);
  border-radius: 10px;
  padding: 6px;
}
.res__omrhoved {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--tx-2);
  padding: 6px 4px 4px;
}
.res__borde {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 6px;
  margin-bottom: 6px;
}
.res__bord {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 8px 4px;
  min-height: 52px;
}
.res__bord.is-valgt { background: var(--blue); color: var(--bg-1); border-color: var(--blue); }
.res__bord.is-taget { opacity: .38; }
/* Rækker de valgte borde ikke til selskabet, skal det stå MENS man
   vælger — ikke først når autoriteten siger nej. */
.res__mangler { margin: 0; color: var(--red); font-weight: 600; }
.res__bordnr { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.res__bordpax { font-size: 11px; opacity: .75; }

.res__tider {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 6px;
  max-height: 190px;
  overflow-y: auto;
}

/* ============================================================
   Bordplanens materialer

   Mønstrene er lavet af gradienter, ikke billeder: de skalerer
   med gitteret, virker offline, og koster ikke en eneste
   hentning på en håndholdt over wifi.
   ============================================================ */
.pv__element--m-trae {
  background-color: var(--plan-trae);
  background-image: repeating-linear-gradient(
    90deg, rgba(0,0,0,.18) 0 1px, transparent 1px 9px);
}
.pv__element--m-flise {
  background-color: var(--plan-flise);
  background-image:
    repeating-linear-gradient(0deg,  rgba(255,255,255,.05) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 16px);
}
.pv__element--m-taeppe { background-color: var(--plan-taeppe); }
.pv__element--m-vand   { background-color: var(--plan-vand); }
.pv__element--m-graes  { background-color: var(--plan-graes); }
.pv__element--m-vaeg   { background-color: var(--plan-vaeg); }
.pv__element--m-bar    { background-color: var(--plan-bar); }
.pv__element--m-sofa   { background-color: var(--plan-sofa); border-radius: 4px; }
.pv__element--m-groen  { background-color: var(--plan-groen); }
.pv__element--m-moerk  { background-color: var(--plan-moerk); }
.pv__element--m-aaben  { background: transparent; }

/* Formen hører til typen, ikke til materialet */
.pv__element--plante { border-radius: 50%; }
.pv__element--soejle { border-radius: 50%; }
.pv__element--doer   { border: 2px dashed var(--line-2); background: transparent; }
.pv__element--vindue { border: 2px solid var(--plan-vand); }
.pv__element--tekst  { border: none; background: transparent; font-weight: 700; }
.pv__element--trappe {
  background-image: repeating-linear-gradient(
    0deg, rgba(0,0,0,.3) 0 2px, transparent 2px 10px);
}

/* Planen skal fylde fladen — ikke ligge i et rullefelt.
   Skal man rulle for at finde bord 55, er den ikke bedre end
   listen. */
.floor__grid { display: flex; align-items: center; justify-content: center; }
.pv { padding: 8px; }

/* ============================================================
   DEN SAMLEDE KASSESKÆRM

   Én flade, der fylder vinduet. Ingen sidescroll — kun
   regningslisten ruller indeni, og kun når der er flere varer,
   end der er plads til.

   Det er dét, der gør, at knapperne ikke flytter sig under
   fingeren, når man slår en vare ind.
   ============================================================ */
.kasse {
  min-height: 0;          /* uden denne kan flex-børn ikke krympe */
  overflow: hidden;
}

.kasse__krop {
  display: flex;
  gap: 10px;
  padding: 10px;
  min-height: 0;
  overflow: hidden;
}

/* Varefladen tager al den plads, der er tilovers */
.kasse__varer {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  overflow: hidden;
}
.kasse__varer > * { flex: 1 1 auto; min-height: 0; }

/* Højre spalte: fast bredde, så regningen ikke skifter størrelse,
   hver gang et varenavn er langt */
.kasse__side {
  /* Bredere end før: tasterne står nu VED SIDEN AF regningen og
     tager 88 px af den. Uden de ekstra pixels ville et varenavn
     med en rettet pris brække i seks linjer.

     ------------------------------------------------------------
     F-055 · OG DET SKETE IGEN

     428 px rakte til en øl. Det rakte ikke til en Gin & Tonic med
     størrelse, gin, mixer og et fravalg: navnet brød over tre
     linjer og tilvalgene over fire. Seks linjer for én drink.

     Navnekolonnen fik 115 px. Resten gik til antal, pris, plus og
     minus — som alle skal være der.

     Så bredden følger nu skærmen. På en lille skærm er 428 px
     stadig det rigtige; der er ikke mere at tage af. På husets
     17-tommer er der 1500 px, og varefladen har rigeligt tilbage,
     når regningen får 520.

     Det er ikke pynt. En tjener skal kunne læse regningen på et
     halvt sekund — og seks linjer for én drink er ikke til at
     overskue, når der står otte varer på bordet.
     ------------------------------------------------------------ */
  flex: 0 0 428px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  padding: 10px;
}
/* ------------------------------------------------------------
   Reglen står HER, efter definitionen ovenfor.

   Første forsøg lagde den seks hundrede linjer længere oppe, og
   så vandt `428px` — samme specificitet, sidste regel tæller.
   Skærmen var uændret, og det så ud, som om rettelsen ikke
   virkede.
   ------------------------------------------------------------ */
@media (min-width: 1280px) {
  .kasse__side { flex: 0 0 520px; }
}

/* ------------------------------------------------------------
   F-055 · HVOR BREDDEN BLEV TAGET FRA

   Funktionsblokken gik fra 92 til 150 px, da den lagde sig i to
   kolonner, og de 58 px kom fra regningen: navnefeltet faldt fra
   186 til 128 px.

   Det er den rigtige handel. 128 px rummer stadig "TEST · Gin &
   Tonic" og fem tilvalg på fire linjer, og linjen kan læses.
   Tasterne gik til gengæld fra 26 til 53 px — og Slet, Retur og
   Genkald er taster, man rammer i blinde med en finger.

   Vi prøvede også at tage bredden fra sortimentet i stedet (560
   og 600 px til siden). Så stod der "Sodava…" og "Specia…" på
   kategorierne, og en kategori, man ikke kan læse, er værre end
   en regningslinje, der bryder én gang ekstra. Derfor står
   siden stadig på 520.

.kasse__sidetitel { padding: 0 2px; }

/* KUN her må der rulles */
.kasse__regning {
  min-height: 0;
  display: flex;
  overflow: hidden;
}
.kasse__regning > * { flex: 1 1 auto; min-height: 0; }

.kasse__handlinger {
  padding-top: 8px;
  border-top: 1px solid var(--line-1);
}

/* Håndholdt: spalterne bliver til rækker, regningen får en fast
   højde, så varefladen ikke bliver ubrugelig */
@media (max-width: 900px) {
  .kasse__krop { flex-direction: column; }
  .kasse__side { flex: 0 0 auto; max-height: 46vh; }
}

/* ------------------------------------------------------------
   SPÆRRET, FORDI DER ER VARER, DER IKKE ER SENDT

   Knappen bliver stående og forklarer sig i stedet for at
   forsvinde. En knap, der er væk, ser ud som en fejl; en knap,
   der er tydeligt spærret, er en besked.
   ------------------------------------------------------------ */
.is-spaerret {
  opacity: .4;
  cursor: not-allowed;
}

/* Mærket på bordet og i overskriften: varer der ikke er sendt */
.chip--usendt {
  background: color-mix(in srgb, var(--orange) 22%, transparent);
  color: var(--orange);
  border: 1px solid var(--orange);
  font-weight: 800;
}
.pv__bord--kladde {
  box-shadow: inset 0 0 0 2px var(--orange);
}
.pv__usendt {
  font-size: 10px;
  font-weight: 800;
  color: var(--orange);
}

/* ------------------------------------------------------------
   AFSENDELSE TIL PRODUKTIONEN

   Tre forskellige ting, tre forskellige mærker:
     orange  varen mangler at blive sendt
     blå     bonnen er på vej
     rød     bonnen kom aldrig af sted, eller vi ved det ikke

   Farven står aldrig alene — der er ikon og tekst med, så en
   farveblind tjener og en skærm i sollys begge kan læse den.
   ------------------------------------------------------------ */
.pv__afsend {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .02em;
}
/* Ingen reservefarve skrevet i hånden: står `--blue` ikke i
   temaet, skal den tilføjes dér — ikke gemmes her, hvor huset
   aldrig finder den, når det skifter farver. */
.pv__afsend--sending        { color: var(--blue); }
.pv__afsend--send_failed,
.pv__afsend--send_unknown   { color: var(--red); }
.pv__afsend--partially_sent { color: var(--orange); }

.pv__bord--afs-sending        { box-shadow: inset 0 0 0 2px var(--blue); }
.pv__bord--afs-send_failed,
.pv__bord--afs-send_unknown   {
  box-shadow: inset 0 0 0 3px var(--red);
  animation: afsPuls 1.6s ease-in-out infinite;
}
@keyframes afsPuls {
  0%, 100% { box-shadow: inset 0 0 0 3px var(--red); }
  50%      { box-shadow: inset 0 0 0 3px var(--red), 0 0 12px rgba(255,80,80,.45); }
}

/* Status på selve regningslinjen */
.line__afsend {
  font-size: 11px;
  font-weight: 700;
}
.line__afsend--sending        { color: var(--blue); }
.line__afsend--sent           { color: var(--green); }
.line__afsend--send_failed,
.line__afsend--send_unknown   { color: var(--red); }
.line__afsend--partially_sent { color: var(--orange); }
.line__afsend--not_sent       { color: var(--orange); }

/* ------------------------------------------------------------
   STOLETYPER

   En barstol og en almindelig stol er ikke det samme, og en
   bænk er slet ikke en stol. Formen fortæller det, uden at der
   skal stå noget.
   ------------------------------------------------------------ */
.pv__stol--barstol {
  border-radius: 50%;
  border-width: 2px;
  border-style: double;
}
.pv__stol--baenk {
  border-radius: 3px;
  transform: scaleX(1.7);
}
.pv__stol--sofa {
  border-radius: 6px 6px 2px 2px;
  transform: scaleX(2);
}
/* Sidder stolen inde i bordet, skal den kunne ses mod bordets
   egen baggrund */
.pv__stol--p-indenfor { opacity: .92; border-style: dashed; }

/* ------------------------------------------------------------
   RETURFORLØBET

   Ét skærmbillede med trin, ikke otte sider. Trinbjælken viser
   hvor man er, hvad der er gjort, og lader en gå tilbage — en
   retur skal kunne fortrydes hele vejen, indtil den er
   gennemført.
   ------------------------------------------------------------ */
.retur__trin {
  gap: 2px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line-1);
  overflow-x: auto;
}
.retur__trinknap {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--tx-3);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.retur__trinknap:disabled { opacity: .45; cursor: default; }
.retur__trinknap.is-gjort { color: var(--green); }
.retur__trinknap.is-aktiv {
  background: var(--bg-3);
  border-color: var(--accent);
  color: var(--tx-1);
}
.retur__trintal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 11px;
}
.retur__krop { padding-bottom: 6px; }
.retur__bund {
  padding: 10px;
  border-top: 1px solid var(--line-1);
  background: var(--bg-1);
}

/* ============================================================
   LOKALET, IKKE ET REGNEARK

   Bordplanen skal ligne det rum, personalet står i: træplader
   under varmt lys, læder langs væggen, planter i hjørnerne. En
   tjener, der kigger op fra en håndholdt, skal kunne genkende
   sig selv i planen på et halvt sekund — ikke læse en tabel af
   grå firkanter.

   ALT er tegnet med gradienter. Ingen billeder: de skalerer med
   gitteret, virker offline, og koster ikke en eneste hentning
   over husets wifi.

   Reglerne står på `data-mat`, ikke på en klasse med præfiks —
   så gælder de både på kassens plan (.pv__) og i backendens
   editor (.bp__) uden at skulle skrives to gange.
   ============================================================ */

/* TEMAFAST — materialerne er FYSISKE, ikke tema

   Eg skal ligne eg i alle temaer. Skiftede farverne med temaet,
   ville et lyst trægulv blive blåt i det mørke tema, og så kan
   personalet ikke længere genkende lokalet på materialerne — som
   er hele grunden til, at de er der.

   Derfor står de som rigtige farver og ikke som variabler. Vil
   huset have en anden bordplade, vælger man et andet MATERIALE,
   ikke en anden temafarve. */

/* ---------- Bordpladerne ---------- */
[data-mat="lystrae"] {
  background-color: #c9925c;
  background-image:
    /* årerne */
    repeating-linear-gradient(92deg,
      rgba(90,58,32,.22) 0 1px, rgba(255,255,255,.05) 1px 3px,
      transparent 3px 11px),
    /* lyset falder skråt ind ad vinduet */
    linear-gradient(135deg, rgba(255,232,200,.30), rgba(60,36,18,.28));
  border-color: #6b4a2f !important;
  color: #241608;
}
[data-mat="moerktrae"] {
  background-color: #7b5237;
  background-image:
    repeating-linear-gradient(92deg,
      rgba(28,16,8,.34) 0 1px, rgba(255,255,255,.045) 1px 3px,
      transparent 3px 12px),
    linear-gradient(135deg, rgba(255,215,170,.16), rgba(20,10,4,.4));
  border-color: #3a2618 !important;
  color: #f3e6d6;
}
[data-mat="marmor"] {
  background-color: #e6e3dd;
  background-image:
    linear-gradient(118deg, transparent 0 34%, rgba(120,125,135,.5) 34% 35%, transparent 35% 100%),
    linear-gradient(74deg,  transparent 0 58%, rgba(120,125,135,.32) 58% 59%, transparent 59% 100%),
    linear-gradient(150deg, transparent 0 72%, rgba(140,145,155,.28) 72% 73%, transparent 73% 100%),
    linear-gradient(140deg, rgba(255,255,255,.9), rgba(196,196,190,.75));
  border-color: #9c9a94 !important;
  color: #2a2a2a;
}
[data-mat="staal"] {
  background-color: #8e949c;
  background-image:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.16) 0 1px, rgba(0,0,0,.10) 1px 2px, transparent 2px 4px),
    linear-gradient(135deg, rgba(255,255,255,.4), rgba(50,55,62,.45));
  border-color: #5d636b !important;
  color: #16181c;
}
[data-mat="sort"] {
  background-color: #24262b;
  background-image: linear-gradient(140deg, rgba(255,255,255,.11), rgba(0,0,0,.5));
  border-color: #101216 !important;
  color: #e8eaee;
}
[data-mat="dug"] {
  background-color: #f4f2ec;
  background-image:
    repeating-linear-gradient(45deg,
      rgba(0,0,0,.028) 0 3px, transparent 3px 6px),
    linear-gradient(140deg, rgba(255,255,255,1), rgba(214,211,202,.9));
  border-color: #c9c6bd !important;
  color: #2a2a2a;
}

/* Bordet er en genstand i et rum: det kaster skygge og fanger
   lys på kanten. Uden det flyder pladen sammen med gulvet. */
.pv__bord, .bp__bord {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -2px 3px rgba(0,0,0,.20),
    0 3px 7px rgba(0,0,0,.42);
}
.pv__bord[data-mat] .pv__nr,
.pv__bord[data-mat] .pv__pladser,
.bp__bord[data-mat] .bp__nr,
.bp__bord[data-mat] .bp__pladser { color: inherit; opacity: .72; }

/* Bordets driftsfarve skal stadig kunne ses OVEN PÅ materialet.
   Et bord, der venter på betaling, er vigtigere end træsorten. */
.pv__bord--optaget[data-mat]    { box-shadow: inset 0 0 0 3px var(--accent), 0 3px 7px rgba(0,0,0,.42); }
.pv__bord--betaler[data-mat]    { box-shadow: inset 0 0 0 3px var(--orange), 0 3px 7px rgba(0,0,0,.42); }
.pv__bord--betalt[data-mat]     { box-shadow: inset 0 0 0 3px var(--green),  0 3px 7px rgba(0,0,0,.42); }
.pv__bord--service[data-mat]    { box-shadow: inset 0 0 0 3px var(--blue, var(--accent)), 0 3px 7px rgba(0,0,0,.42); }
/* Et ledigt bord er stilfærdigt — men det er stadig et bord.
   Dæmpes det for hårdt, forsvinder træet, og så er vi tilbage
   ved grå firkanter. */
.pv__bord--ledigt[data-mat]     { filter: brightness(.9); border-style: solid; }
.pv__bord--klargoeres[data-mat] { filter: saturate(.45) brightness(.68); }

/* ---------- Gulvene ---------- */
/* Rigtige brædder med forskudte samlinger — ikke striber */
.pv__element--m-trae, .bp__element[data-mat="trae"] {
  background-color: #7a5636;
  background-image:
    /* samlinger på tværs, forskudt hver anden række */
    repeating-linear-gradient(90deg,
      transparent 0 46px, rgba(0,0,0,.45) 46px 48px),
    /* brættets kanter */
    repeating-linear-gradient(0deg,
      rgba(0,0,0,.38) 0 1px, transparent 1px 13px),
    /* årer */
    repeating-linear-gradient(88deg,
      rgba(255,255,255,.05) 0 1px, transparent 1px 5px),
    linear-gradient(160deg, rgba(255,228,190,.14), rgba(0,0,0,.22));
}
.pv__element--m-flise, .bp__element[data-mat="flise"] {
  background-color: #40444a;
  background-image:
    repeating-linear-gradient(0deg,  rgba(255,255,255,.09) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.09) 0 2px, transparent 2px 26px),
    linear-gradient(150deg, rgba(255,255,255,.08), rgba(0,0,0,.25));
}
.pv__element--m-taeppe, .bp__element[data-mat="taeppe"] {
  background-color: #5a3f4c;
  background-image:
    repeating-linear-gradient(45deg,  rgba(0,0,0,.13) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 5px);
}
.pv__element--m-graes, .bp__element[data-mat="graes"] {
  background-color: #33562f;
  background-image:
    repeating-linear-gradient(75deg, rgba(255,255,255,.07) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(105deg, rgba(0,0,0,.12) 0 1px, transparent 1px 6px);
}
.pv__element--m-vand, .bp__element[data-mat="vand"] {
  background-color: #24466e;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.10) 0 1px, transparent 1px 7px),
    linear-gradient(160deg, rgba(160,210,255,.20), rgba(0,20,50,.35));
}

/* ---------- Væggen og baren ---------- */
.pv__element--m-vaeg, .bp__element[data-mat="vaeg"] {
  background-color: #6a6d74;
  background-image: linear-gradient(180deg, rgba(255,255,255,.22), rgba(0,0,0,.3));
  box-shadow: 0 2px 5px rgba(0,0,0,.5);
}
.pv__element--m-bar, .bp__element[data-mat="bar"] {
  background-color: #6d3a2a;
  background-image:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.22) 0 1px, transparent 1px 8px),
    /* messingkant langs forkanten — den, gæsten læner sig på */
    linear-gradient(180deg,
      rgba(255,214,150,.5) 0 3px,
      rgba(255,255,255,.10) 3px 6px,
      rgba(0,0,0,.28) 100%);
  box-shadow: inset 0 1px 0 rgba(255,232,190,.55), 0 3px 8px rgba(0,0,0,.5);
}

/* ---------- Sofaen langs væggen ---------- */
/* Læderbænken fra billederne: ryg langs bagkanten, hynder med
   sømme imellem, varm brun med lys ovenfra */
.pv__element--m-sofa, .bp__element[data-mat="sofa"],
.pv__element--sofa, .bp__element--sofa {
  background-color: #8a5334;
  background-image:
    /* sømmene mellem hynderne */
    repeating-linear-gradient(90deg,
      transparent 0 40px,
      rgba(0,0,0,.34) 40px 42px,
      rgba(255,255,255,.07) 42px 44px,
      transparent 44px 46px),
    /* ryglænet langs bagkanten */
    linear-gradient(180deg,
      rgba(0,0,0,.34) 0 26%,
      rgba(255,222,180,.16) 26% 30%,
      transparent 30% 100%),
    linear-gradient(160deg, rgba(255,214,170,.26), rgba(60,26,10,.34));
  border: 1px solid #4d2c19 !important;
  border-radius: 6px 6px 3px 3px;
  box-shadow: inset 0 -3px 6px rgba(0,0,0,.28), 0 3px 8px rgba(0,0,0,.45);
}

/* ---------- Det grønne ---------- */
.pv__element--plante, .bp__element--plante {
  background-color: transparent !important;
  background-image:
    radial-gradient(circle at 50% 62%, #2f7a3e 0 22%, transparent 22%),
    radial-gradient(ellipse 42% 30% at 26% 40%, #3f9950 0 100%, transparent 100%),
    radial-gradient(ellipse 42% 30% at 74% 40%, #35883f 0 100%, transparent 100%),
    radial-gradient(ellipse 30% 44% at 50% 22%, #47a758 0 100%, transparent 100%),
    radial-gradient(ellipse 34% 26% at 50% 78%, #276b34 0 100%, transparent 100%);
  border: none !important;
}
.pv__element--haek, .bp__element--haek {
  background-color: #2e6b38;
  background-image:
    repeating-radial-gradient(circle at 8px 50%,
      rgba(255,255,255,.13) 0 4px, transparent 4px 9px);
  border-radius: 4px;
}
.pv__element--soejle, .bp__element--soejle {
  background-image: linear-gradient(90deg,
    rgba(0,0,0,.45), rgba(255,255,255,.28) 42%, rgba(0,0,0,.45));
  box-shadow: 0 3px 8px rgba(0,0,0,.55);
}
.pv__element--trappe, .bp__element--trappe {
  background-image:
    repeating-linear-gradient(0deg,
      rgba(0,0,0,.42) 0 2px,
      rgba(255,255,255,.10) 2px 4px,
      transparent 4px 14px);
}
.pv__element--vindue, .bp__element--vindue {
  background: linear-gradient(180deg, rgba(150,205,255,.34), rgba(60,110,170,.16)) !important;
  border: 2px solid #7fb2e0 !important;
  box-shadow: 0 0 12px rgba(140,200,255,.32);
}
.pv__element--doer, .bp__element--doer {
  border: 2px dashed #b08a5a !important;
  background: linear-gradient(180deg, rgba(180,140,90,.18), transparent) !important;
}

/* ============================================================
   STOLENE SKAL LIGNE STOLE

   En cirkel med et tal i er en plads i et regneark. En stol har
   et sæde og et ryglæn, og ryglænet vender VÆK fra bordet — det
   er dét, der fortæller, hvilken vej gæsten sidder.

   Ryglænet tegnes med `box-shadow` på den side, der vender ud,
   så det følger stolen, uanset hvor den er trukket hen.
   ============================================================ */
/* Stolene er af træ som bordene — ikke grå knapper */
.pv__stol, .bp__stol {
  background-color: #8a6743;
  background-image: linear-gradient(160deg, rgba(255,226,186,.34), rgba(30,16,6,.34));
  border-color: #4f371f;
  color: #fdf1e2;
  border-radius: 42% 42% 30% 30%;
}
.pv__stol--optaget {
  background-color: #b4762c;
  border-color: var(--accent);
  color: #1a1206;
}
.pv__stol[data-side="nord"], .bp__stol[data-side="nord"] {
  box-shadow: inset 0 3px 0 rgba(0,0,0,.42), 0 1px 3px rgba(0,0,0,.45);
  border-radius: 30% 30% 42% 42%;
}
.pv__stol[data-side="syd"], .bp__stol[data-side="syd"] {
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.42), 0 1px 3px rgba(0,0,0,.45);
}
.pv__stol[data-side="vest"], .bp__stol[data-side="vest"] {
  box-shadow: inset 3px 0 0 rgba(0,0,0,.42), 0 1px 3px rgba(0,0,0,.45);
  border-radius: 30% 42% 42% 30%;
}
.pv__stol[data-side="oest"], .bp__stol[data-side="oest"] {
  box-shadow: inset -3px 0 0 rgba(0,0,0,.42), 0 1px 3px rgba(0,0,0,.45);
  border-radius: 42% 30% 30% 42%;
}

/* Barstolen: høj, smal, drejelig — en ring om et sæde */
.pv__stol--barstol, .bp__stol--barstol {
  border-radius: 50% !important;
  background-image:
    radial-gradient(circle, transparent 0 34%, rgba(0,0,0,.34) 34% 46%, transparent 46%),
    linear-gradient(160deg, rgba(255,255,255,.26), rgba(0,0,0,.3)) !important;
}
/* Bænk og sofa: en hynde, ikke en stol */
.pv__stol--baenk, .bp__stol--baenk,
.pv__stol--sofa,  .bp__stol--sofa {
  border-radius: 5px 5px 3px 3px !important;
  background-color: #8a5334;
  background-image: linear-gradient(160deg, rgba(255,222,180,.3), rgba(50,22,8,.34)) !important;
  border-color: #4d2c19 !important;
  color: #ffe9d5;
}

/* ============================================================
   RUMMET SELV

   Et lokale har lys i midten og mørke hjørner. Det er dét, der
   gør, at planen ligner et sted og ikke et ternet ark.
   ============================================================ */
.pv__plan, .bp__laerred {
  background-image:
    radial-gradient(ellipse 70% 60% at 50% 42%,
      rgba(255,214,160,.055), transparent 70%);
}

/* ============================================================
   ═══  INDRETNINGEN  ═══════════════════════════════════════

   Bordplanen er ikke en teknisk oversigt. Den er 80 % af det,
   personalet kigger på i løbet af en vagt, og den skal ligne
   DET LOKALE, de står i — ikke et skema med firkanter og tal.

   Principperne, læst af den plan Dennis sendte som reference:

     1. GULVET ER VARMT OG LYST. Rummet er det, man ser først;
        møblerne står PÅ noget, ikke i et sort hul.
     2. HVERT MØBEL HAR EN SILHUET. Man skal kunne se på
        afstand, om det er en barstol, en spisestol eller en
        lænestol — uden at læse et ord.
     3. STOLENE KLÆBER TIL BORDET. De ligger tæt på kanten, som
        de gør i virkeligheden, og ryggen vender udad.
     4. ZONER HAR FARVE OG NAVN. Bar, lounge, terrasse og
        personaleområder skal kunne skelnes på et halvt sekund.
     5. DET GRØNNE OG DET BLØDE GØR RUMMET. Planter, tæpper,
        lamper — det er dem, der gør forskellen på "et diagram"
        og "vores café".
     6. ALT ER TEGNET MED GRADIENTER. Ingen billeder: de
        skalerer med gitteret, virker offline, og koster ikke én
        eneste hentning på en håndholdt over husets wifi.
   ============================================================ */

/* ---------- 1 · GULVET ---------- */
.pv__plan, .bp__laerred {
  /* ------------------------------------------------------------
     GULVET SKAL VÆRE LYST

     Første forsøg blev mørkt og mudret: en kraftig vignet oven
     på et mættet tegl gjorde hele lokalet brunt, og møblerne
     forsvandt ned i det. Et cafégulv er LYST — det er dét, der
     gør, at bordene træder frem, og at planen føles indbydende
     i stedet for tung.
     ------------------------------------------------------------ */
  /* `!important` er nødvendig: backend.css indlæses SIDST og
     sætter `--bg-0` på lærredet. Uden den vinder den mørke
     baggrund, og hele gulvet bliver gråbrunt igen. */
  background-color: #e8bfa6 !important;
  background-image:
    /* fugerne mellem klinkerne */
    repeating-linear-gradient(90deg,
      rgba(255,252,247,.62) 0 2px, transparent 2px 36px),
    repeating-linear-gradient(0deg,
      rgba(255,252,247,.62) 0 2px, transparent 2px 36px),
    /* en anelse uro i teglet, så det ikke bliver et regneark */
    repeating-linear-gradient(64deg,
      rgba(198,142,112,.10) 0 10px, transparent 10px 26px),
    /* varmen fra midten af lokalet — let, ikke en tunnel */
    radial-gradient(ellipse 84% 74% at 50% 42%,
      rgba(255,248,232,.5), rgba(206,150,120,.22) 96%) !important;
  box-shadow: inset 0 0 40px rgba(150,96,66,.16);
  border-radius: 6px;
}

/* Gitteret skal kunne ANES, ikke ses. Det er et hjælpemiddel
   under opstilling, ikke en del af lokalet. */
.bp__laerred { background-blend-mode: normal; }
.bp__laerred::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgba(90,52,34,.09) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(0deg,  rgba(90,52,34,.09) 0 1px, transparent 1px 48px);
}

/* ---------- 2 · BORDENE ---------- */
.pv__bord, .bp__bord {
  border-radius: 7px !important;
  border-width: 0 !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.42),
    inset 0 -3px 5px rgba(70,38,18,.34),
    0 4px 9px rgba(60,30,16,.42) !important;
  text-shadow: 0 1px 2px rgba(255,255,255,.35);
  font-weight: 800;
}
.pv__bord--rund, .bp__bord--rund { border-radius: 50% !important; }

/* Højbordet: mindre plade, kraftig fod — det er dét, man ser
   ovenfra, når bordet er højt */
.pv__bord--hoejbord, .bp__bord--hoejbord {
  border-radius: 50% !important;
  box-shadow:
    inset 0 0 0 4px rgba(60,32,16,.30),
    inset 0 2px 0 rgba(255,255,255,.45),
    0 6px 12px rgba(50,24,12,.5) !important;
}
/* Loungebordet er lavt og blødt — aldrig skarpe hjørner */
.pv__bord--lounge, .bp__bord--lounge { border-radius: 40% !important; }
/* Barpladsen er ikke et bord, men en strækning langs disken */
.pv__bord--bar, .bp__bord--bar {
  border-radius: 5px !important;
  border-style: solid !important;
}

/* ---------- 3 · STOLENE ---------- */
/* Almindelig stol: sæde med ryg. Ryggen vender VÆK fra bordet —
   det er dét, der fortæller, hvilken vej gæsten sidder. */
.pv__stol, .bp__stol {
  background-color: #6f4526 !important;
  background-image: linear-gradient(155deg,
    rgba(255,226,186,.42), rgba(30,14,4,.34)) !important;
  border: none !important;
  border-radius: 34% 34% 22% 22% !important;
  color: #fff3e4 !important;
  font-weight: 800;
  box-shadow: 0 2px 4px rgba(50,24,10,.5);
}
.pv__stol[data-side="nord"], .bp__stol[data-side="nord"] {
  border-radius: 22% 22% 34% 34% !important;
  box-shadow: inset 0 4px 0 rgba(255,255,255,.24), 0 2px 4px rgba(50,24,10,.5);
}
.pv__stol[data-side="syd"], .bp__stol[data-side="syd"] {
  box-shadow: inset 0 -4px 0 rgba(255,255,255,.24), 0 2px 4px rgba(50,24,10,.5);
}
.pv__stol[data-side="vest"], .bp__stol[data-side="vest"] {
  border-radius: 22% 34% 34% 22% !important;
  box-shadow: inset 4px 0 0 rgba(255,255,255,.24), 0 2px 4px rgba(50,24,10,.5);
}
.pv__stol[data-side="oest"], .bp__stol[data-side="oest"] {
  border-radius: 34% 22% 22% 34% !important;
  box-shadow: inset -4px 0 0 rgba(255,255,255,.24), 0 2px 4px rgba(50,24,10,.5);
}

/* Barstolen: rund, lys, drejelig — ingen ryg. Den ligner ikke
   en spisestol, og det er hele pointen. */
.pv__stol--barstol, .bp__stol--barstol {
  border-radius: 50% !important;
  background-color: #8fb6d8 !important;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.5) 0 30%,
                    rgba(40,70,100,.34) 32% 48%, transparent 50%),
    linear-gradient(155deg, rgba(255,255,255,.5), rgba(28,54,80,.34)) !important;
  color: #16303f !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.4), 0 2px 5px rgba(20,40,60,.5) !important;
}

/* Bænk og sofa: en polstret hynde med ryg — bred og blød */
.pv__stol--baenk, .bp__stol--baenk,
.pv__stol--sofa,  .bp__stol--sofa {
  border-radius: 6px 6px 3px 3px !important;
  background-color: #a2603a !important;
  background-image:
    repeating-linear-gradient(90deg,
      transparent 0 8px, rgba(0,0,0,.22) 8px 9px),
    linear-gradient(155deg, rgba(255,226,190,.42), rgba(50,20,6,.3)) !important;
  color: #fff1e2 !important;
}

/* Den stol, der er nogen på, skal springe i øjnene */
.pv__stol--optaget {
  background-color: #e0912f !important;
  background-image: linear-gradient(155deg,
    rgba(255,246,225,.55), rgba(120,58,8,.3)) !important;
  color: #241202 !important;
  box-shadow: 0 0 0 2px rgba(255,220,150,.7), 0 3px 7px rgba(60,28,4,.55) !important;
}

/* ---------- 4 · BARDISKEN ---------- */
.pv__element--bardisk, .bp__element--bardisk {
  background-color: #7c4527 !important;
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,.16) 0 1px, transparent 1px 10px),
    /* messingkanten langs forkanten — den, gæsten læner sig på */
    linear-gradient(180deg,
      rgba(255,222,160,.75) 0 4px,
      rgba(255,255,255,.16) 4px 8px,
      rgba(40,18,6,.3) 100%) !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,236,200,.7),
    0 5px 12px rgba(40,18,6,.55) !important;
  color: #ffeed9 !important;
  font-weight: 800;
}

/* ---------- 5 · DET BLØDE ---------- */
.pv__element--laenestol, .bp__element--laenestol {
  background-color: #9d5b39 !important;
  background-image:
    /* armlænene */
    linear-gradient(90deg,
      rgba(40,16,4,.4) 0 18%, transparent 18% 82%, rgba(40,16,4,.4) 82% 100%),
    /* ryggen */
    linear-gradient(180deg,
      rgba(40,16,4,.42) 0 24%, transparent 24% 100%),
    linear-gradient(155deg, rgba(255,226,190,.4), rgba(50,20,6,.3)) !important;
  border: none !important;
  border-radius: 40% 40% 22% 22% !important;
  box-shadow: 0 3px 7px rgba(50,22,8,.5) !important;
}
.pv__element--sofahjoerne, .bp__element--sofahjoerne {
  background-color: #9d5b39 !important;
  background-image:
    linear-gradient(135deg,
      rgba(40,16,4,.45) 0 16%, transparent 16% 100%),
    repeating-linear-gradient(45deg,
      transparent 0 22px, rgba(0,0,0,.2) 22px 24px),
    linear-gradient(155deg, rgba(255,226,190,.36), rgba(50,20,6,.3)) !important;
  border: none !important;
  border-radius: 14px 6px 6px 6px !important;
  box-shadow: 0 4px 9px rgba(50,22,8,.5) !important;
}

/* ---------- 6 · DET GRØNNE ---------- */
/* En plante er ikke en grøn firkant. Den har blade. */
.pv__element--plante, .bp__element--plante,
.pv__element--palme,  .bp__element--palme {
  background: none !important;
  background-image:
    radial-gradient(ellipse 46% 34% at 22% 34%, #4e9e57 0 100%, transparent 100%),
    radial-gradient(ellipse 46% 34% at 78% 34%, #3d8a48 0 100%, transparent 100%),
    radial-gradient(ellipse 34% 46% at 50% 16%, #5cb265 0 100%, transparent 100%),
    radial-gradient(ellipse 40% 30% at 26% 72%, #2f7a3c 0 100%, transparent 100%),
    radial-gradient(ellipse 40% 30% at 74% 72%, #368444 0 100%, transparent 100%),
    radial-gradient(circle at 50% 52%, #256b31 0 26%, transparent 27%) !important;
  border: none !important;
  filter: drop-shadow(0 3px 4px rgba(30,50,25,.45));
}
.pv__element--haek, .bp__element--haek {
  background-color: #38793f !important;
  background-image:
    repeating-radial-gradient(circle at 10px 50%,
      rgba(255,255,255,.2) 0 5px, rgba(0,0,0,.10) 5px 11px) !important;
  border: none !important;
  border-radius: 7px !important;
  box-shadow: 0 3px 6px rgba(25,45,22,.45) !important;
}

/* ---------- 7 · ZONER, GANG OG PERSONALE ---------- */
/* Zonefeltet er referencebilledets grønne blokke: et navngivet
   område, man kan se på et halvt sekund */
.pv__element--zone, .bp__element--zone {
  background-color: #7fae4e !important;
  background-image: linear-gradient(160deg,
    rgba(255,255,255,.28), rgba(40,70,20,.24)) !important;
  border: 2px solid rgba(255,255,255,.5) !important;
  border-radius: 6px !important;
  color: #1d3410 !important;
  font-weight: 800 !important;
  box-shadow: 0 3px 7px rgba(30,50,15,.4) !important;
}
/* Gangarealet er dét, man IKKE stiller noget i. Det skal kunne
   ses, men aldrig stjæle billedet. */
.pv__element--gang, .bp__element--gang {
  background: rgba(255,255,255,.16) !important;
  border: 2px dashed rgba(255,255,255,.42) !important;
  border-radius: 6px !important;
  color: rgba(70,38,20,.75) !important;
}
/* Et lille menneske. Det er dét, der gør planen levende — og i
   praksis siger det, hvor der plejer at stå nogen. */
.pv__element--personale, .bp__element--personale {
  background: none !important;
  background-image:
    radial-gradient(circle at 50% 26%, #f2d3b3 0 21%, transparent 22%),
    radial-gradient(ellipse 40% 34% at 50% 72%, #38506e 0 100%, transparent 100%) !important;
  border: none !important;
  filter: drop-shadow(0 2px 3px rgba(20,20,30,.5));
}
.pv__element--vaert, .bp__element--vaert {
  background-color: #6b4326 !important;
  background-image: linear-gradient(180deg,
    rgba(255,226,180,.5) 0 30%, rgba(30,14,4,.3) 100%) !important;
  border: none !important;
  border-radius: 5px !important;
  box-shadow: 0 3px 7px rgba(40,20,8,.5) !important;
  color: #ffeeda !important;
}
.pv__element--reol, .bp__element--reol {
  background-color: #5e3a20 !important;
  background-image: repeating-linear-gradient(90deg,
    rgba(0,0,0,.34) 0 2px, rgba(255,220,170,.14) 2px 12px) !important;
  border: none !important;
  border-radius: 3px !important;
  box-shadow: 0 3px 6px rgba(30,14,4,.5) !important;
}
.pv__element--kaminen, .bp__element--kaminen {
  background-color: #6d6a66 !important;
  background-image:
    radial-gradient(ellipse 50% 60% at 50% 70%, #ff9a3c 0 40%, rgba(255,140,40,.3) 60%, transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.24), rgba(0,0,0,.3)) !important;
  border: none !important;
  border-radius: 4px !important;
  box-shadow: 0 0 14px rgba(255,150,60,.35), 0 3px 6px rgba(0,0,0,.45) !important;
}
/* Lampen lyser. Det er en detalje, men det er detaljerne, der
   gør, at planen ligner et sted. */
.pv__element--lampe, .bp__element--lampe {
  background: none !important;
  background-image: radial-gradient(circle,
    rgba(255,238,190,.95) 0 26%,
    rgba(255,206,120,.55) 26% 46%,
    rgba(255,190,90,.16) 46% 78%,
    transparent 80%) !important;
  border: none !important;
}

/* ---------- 8 · VÆGGE OG ÅBNINGER ---------- */
.pv__element--vaeg, .bp__element--vaeg {
  background: linear-gradient(180deg, #fbf6ef, #d9cdc0) !important;
  border: none !important;
  border-radius: 2px !important;
  box-shadow: 0 3px 7px rgba(60,34,20,.45) !important;
  color: #6b4a33 !important;
}
.pv__element--soejle, .bp__element--soejle {
  background: radial-gradient(circle at 36% 32%, #fbf6ef, #b09a86) !important;
  border: none !important;
  box-shadow: 0 4px 9px rgba(50,28,16,.5) !important;
}
.pv__element--doer, .bp__element--doer {
  background: rgba(255,255,255,.5) !important;
  border: 2px dashed #a97b4e !important;
  border-radius: 3px !important;
  color: #6b4a33 !important;
}
.pv__element--vindue, .bp__element--vindue {
  background: linear-gradient(180deg,
    rgba(190,228,255,.85), rgba(120,180,225,.5)) !important;
  border: 2px solid #fbf6ef !important;
  border-radius: 2px !important;
  box-shadow: 0 0 14px rgba(170,215,255,.5) !important;
}
.pv__element--trappe, .bp__element--trappe {
  background-color: #cbb9a5 !important;
  background-image: repeating-linear-gradient(0deg,
    rgba(90,58,34,.5) 0 2px, rgba(255,255,255,.4) 2px 5px,
    transparent 5px 16px) !important;
  border: none !important;
  border-radius: 3px !important;
}

/* ---------- 9 · GULVZONER ---------- */
/* Zonerne skal LIGNE gulv, ikke ligge som farvede plader ovenpå */
.pv__element--m-trae, .bp__element[data-mat="trae"] {
  border: none !important;
  border-radius: 5px !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.22) !important;
}
.pv__element--m-taeppe, .bp__element[data-mat="taeppe"] {
  border-radius: 8px !important;
  border: 3px solid rgba(255,255,255,.3) !important;
  box-shadow: inset 0 0 26px rgba(0,0,0,.28) !important;
}

/* Teksten på planen skal kunne læses på et varmt gulv */
.pv__element .pv__navn, .bp__element .bp__navn {
  text-shadow: 0 1px 2px rgba(255,255,255,.5);
  font-weight: 800;
}

/* ============================================================
   MØBLERNE SOM SVG

   Symbolet ligger som en tegning i bunden af feltet. Det kan
   IKKE rammes af musen — hitboxen bliver ved med at være selve
   feltet, ellers ville et hul mellem to palmeblade betyde, at
   man ikke kunne tage fat i planten.
   ============================================================ */
.jcm {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}

/* Har møblet en rigtig tegning, skal den gamle farvede kasse
   forsvinde. To lag oven på hinanden bliver til mudder. */
.pv__element:has(.jcm), .bp__element:has(.jcm),
.pv__stol:has(.jcm),    .bp__stol:has(.jcm),
.pv__bord:has(.jcm),    .bp__bord:has(.jcm) {
  background: none !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  filter: drop-shadow(0 3px 4px rgba(60,32,16,.42));
}

/* Nummeret skal stå OVEN PÅ møblet og kunne læses */
.pv__stolnr, .bp__stolnr {
  position: relative;
  z-index: 2;
  font-weight: 800;
  color: #fff6e8;
  text-shadow: 0 1px 3px rgba(0,0,0,.85);
}
.pv__bord .pv__tekst, .bp__bord .bp__tekst { position: relative; z-index: 2; }
.pv__bord:has(.jcm) .pv__navn, .bp__bord:has(.jcm) .bp__navn {
  color: #2a1a0c;
  text-shadow: 0 1px 2px rgba(255,255,255,.65);
}
.pv__element:has(.jcm) .pv__navn, .bp__element:has(.jcm) .bp__navn {
  position: relative; z-index: 2;
}

/* Miniaturen i biblioteket er den RIGTIGE tegning i småt */
.bp__bibprove .jcm { position: absolute; inset: 0; }

/* ============================================================
   GULVE OG VÆGGE — RIGTIGE OVERFLADER

   Et gulv er ikke en farve. Sildebensparket har en retning,
   klinker har fuger, mursten har forbandt. Det er dét, der
   afgør, om planen ligner et lokale eller et farvelagt skema.

   Alle mønstre er gradienter, så de skalerer med zoomen og ikke
   koster en hentning på en håndholdt.
   ============================================================ */

/* Sildeben: to sæt skrå planker, forskudt — det er dét, der
   giver fiskebensmønsteret */
[data-mat="sildeben"] {
  background-color: #b5824f !important;
  background-image:
    repeating-linear-gradient(45deg,
      rgba(60,32,12,.34) 0 1px, transparent 1px 11px,
      rgba(255,225,180,.16) 11px 12px, transparent 12px 22px),
    repeating-linear-gradient(-45deg,
      rgba(60,32,12,.34) 0 1px, transparent 1px 11px,
      rgba(255,225,180,.16) 11px 12px, transparent 12px 22px),
    linear-gradient(150deg, rgba(255,236,200,.24), rgba(70,38,14,.16)) !important;
}
[data-mat="planke"] {
  background-color: #bd8b57 !important;
  background-image:
    repeating-linear-gradient(90deg,
      rgba(60,32,12,.3) 0 2px, transparent 2px 54px),
    repeating-linear-gradient(0deg,
      rgba(60,32,12,.22) 0 1px, transparent 1px 15px),
    repeating-linear-gradient(88deg,
      rgba(255,230,190,.12) 0 1px, transparent 1px 6px) !important;
}
[data-mat="moerktgulv"] {
  background-color: #6d4527 !important;
  background-image:
    repeating-linear-gradient(90deg, rgba(20,10,2,.4) 0 2px, transparent 2px 50px),
    repeating-linear-gradient(0deg, rgba(20,10,2,.28) 0 1px, transparent 1px 14px),
    linear-gradient(150deg, rgba(255,220,175,.16), rgba(0,0,0,.2)) !important;
}
[data-mat="lysklinke"] {
  background-color: #e0cbb4 !important;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.85) 0 3px, transparent 3px 40px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.85) 0 3px, transparent 3px 40px),
    linear-gradient(150deg, rgba(255,255,255,.4), rgba(150,120,95,.18)) !important;
}
[data-mat="moerkklinke"] {
  background-color: #6a6560 !important;
  background-image:
    repeating-linear-gradient(90deg, rgba(230,225,218,.5) 0 3px, transparent 3px 40px),
    repeating-linear-gradient(0deg,  rgba(230,225,218,.5) 0 3px, transparent 3px 40px),
    linear-gradient(150deg, rgba(255,255,255,.16), rgba(0,0,0,.26)) !important;
}
/* Dekorative fliser: den grøn-hvide encaustic-slags, man ser i
   caféer — mønsteret på tværs, ikke bare et gitter */
[data-mat="mosaik"] {
  background-color: #7f9e8c !important;
  background-image:
    repeating-linear-gradient(45deg,
      rgba(255,252,244,.5) 0 5px, transparent 5px 22px),
    repeating-linear-gradient(-45deg,
      rgba(255,252,244,.5) 0 5px, transparent 5px 22px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.7) 0 2px, transparent 2px 40px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.7) 0 2px, transparent 2px 40px) !important;
}
[data-mat="beton"] {
  background-color: #9d9a94 !important;
  background-image:
    repeating-linear-gradient(70deg, rgba(255,255,255,.08) 0 2px, transparent 2px 17px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.4) 0 2px, transparent 2px 90px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.4) 0 2px, transparent 2px 90px),
    linear-gradient(140deg, rgba(255,255,255,.2), rgba(0,0,0,.16)) !important;
}
[data-mat="terrasse"] {
  background-color: #a8814f !important;
  background-image:
    repeating-linear-gradient(0deg,
      rgba(50,28,10,.42) 0 3px, transparent 3px 20px),
    repeating-linear-gradient(0deg,
      rgba(255,230,185,.16) 3px 5px, transparent 5px 20px) !important;
}
/* Dansegulv: mørkt, blankt felt med diskrete lyskegler. De må
   ikke overdøve gulvet — man skal stadig kunne se, hvor der er
   plads at gå. */
[data-mat="dansegulv"] {
  background-color: #35313d !important;
  background-image:
    /* Lyskeglerne skal ANES. Overdøver de gulvet, kan tjeneren
       ikke se bordstatus — og så er planen ubrugelig i drift.
       Tre diskrete kegler, ikke et diskotek. */
    radial-gradient(ellipse 22% 40% at 26% 4%, rgba(150,120,230,.20), transparent 70%),
    radial-gradient(ellipse 22% 40% at 50% 2%, rgba(110,180,230,.18), transparent 70%),
    radial-gradient(ellipse 22% 40% at 74% 4%, rgba(225,130,180,.18), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 2px, transparent 2px 46px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.10) 0 2px, transparent 2px 46px) !important;
  box-shadow: inset 0 0 30px rgba(90,70,150,.18) !important;
}

/* ---------- VÆGGE ---------- */
/* Mursten skal have FORBANDT — hver anden række forskudt. Uden
   det ligner det fliser, og så forsvinder murstensfornemmelsen. */
[data-mat="mursten"] {
  background-color: #a2543f !important;
  background-image:
    repeating-linear-gradient(0deg,
      rgba(240,232,222,.9) 0 3px, transparent 3px 15px),
    repeating-linear-gradient(90deg,
      rgba(240,232,222,.9) 0 3px, transparent 3px 34px),
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(0,0,0,.2)) !important;
  background-size: auto, 34px 30px, auto;
  background-position: 0 0, 0 0, 0 0;
}
[data-mat="moerkmursten"] {
  background-color: #5d3a30 !important;
  background-image:
    repeating-linear-gradient(0deg, rgba(200,188,178,.6) 0 3px, transparent 3px 15px),
    repeating-linear-gradient(90deg, rgba(200,188,178,.6) 0 3px, transparent 3px 34px),
    linear-gradient(180deg, rgba(255,255,255,.1), rgba(0,0,0,.3)) !important;
}
[data-mat="hvidmursten"] {
  background-color: #e9e2d8 !important;
  background-image:
    repeating-linear-gradient(0deg, rgba(160,148,134,.55) 0 3px, transparent 3px 15px),
    repeating-linear-gradient(90deg, rgba(160,148,134,.55) 0 3px, transparent 3px 34px),
    linear-gradient(180deg, rgba(255,255,255,.5), rgba(0,0,0,.08)) !important;
}
[data-mat="vaegflise"] {
  background-color: #8fb0b8 !important;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.8) 0 2px, transparent 2px 22px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.8) 0 2px, transparent 2px 22px),
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(0,0,0,.12)) !important;
}
[data-mat="malet"] {
  background-color: #efe8dd !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.5), rgba(0,0,0,.1)) !important;
}
[data-mat="traepanel"] {
  background-color: #7a512f !important;
  background-image:
    repeating-linear-gradient(90deg,
      rgba(30,14,2,.4) 0 3px, rgba(255,225,180,.14) 3px 5px, transparent 5px 24px),
    linear-gradient(180deg, rgba(255,225,180,.2), rgba(0,0,0,.22)) !important;
}
[data-mat="glasvaeg"] {
  background-color: rgba(170,215,235,.4) !important;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.6) 0 3px, transparent 3px 60px),
    linear-gradient(160deg, rgba(255,255,255,.5), rgba(120,180,210,.2)) !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.6) !important;
}


/* ------------------------------------------------------------
   NAVNENE MÅ IKKE OVERDØVE LOKALET

   Hvert element bar sit navn. Med fyrre ting på planen blev det
   til en tekstsuppe, der lå oven på selve indretningen — og så
   kunne man hverken se møblerne eller læse navnene.

   Gulve og zoner beholder deres navn: det er dem, man
   orienterer sig efter. Møbler, planter og pynt kendes på deres
   tegning; de behøver ikke stå med navn.
   ------------------------------------------------------------ */
.pv__element .pv__navn, .bp__element .bp__navn {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(28,20,14,.55);
  color: #ffeeda;
  text-shadow: none;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Pynt og småmøbler siger sig selv */
.bp__element--plante .bp__navn, .pv__element--plante .pv__navn,
.bp__element--palme .bp__navn,  .pv__element--palme .pv__navn,
.bp__element--lampe .bp__navn,  .pv__element--lampe .pv__navn,
.bp__element--personale .bp__navn, .pv__element--personale .pv__navn,
.bp__element--laenestol .bp__navn, .pv__element--laenestol .pv__navn,
.bp__element--sofahjoerne .bp__navn, .pv__element--sofahjoerne .pv__navn,
.bp__element--sofa .bp__navn,   .pv__element--sofa .pv__navn,
.bp__element--soejle .bp__navn, .pv__element--soejle .pv__navn,
.bp__element--vaeg .bp__navn,   .pv__element--vaeg .pv__navn,
.bp__element--doer .bp__navn,   .pv__element--doer .pv__navn,
.bp__element--vindue .bp__navn, .pv__element--vindue .pv__navn,
.bp__element--haek .bp__navn,   .pv__element--haek .pv__navn,
.bp__element--skaerm .bp__navn, .pv__element--skaerm .pv__navn,
.bp__element--reol .bp__navn,   .pv__element--reol .pv__navn,
.bp__element--kaminen .bp__navn, .pv__element--kaminen .pv__navn {
  display: none;
}
/* …men det valgte skal altid kunne identificeres */
.bp__element.is-valgt .bp__navn { display: block !important; }

/* ------------------------------------------------------------
   TRÆSORTER OG FLISEMØNSTRE

   "Trægulv" er ikke ét gulv. Eg er lyst og roligt, valnød er
   mørkt og stribet, skibsplanker har sorte fuger. Det er dét,
   der afgør, om planen ligner huset eller bare et gulv.
   ------------------------------------------------------------ */
[data-mat="eg"] {
  background-color: #d0a875 !important;
  background-image:
    repeating-linear-gradient(90deg, rgba(90,58,26,.22) 0 2px, transparent 2px 62px),
    repeating-linear-gradient(0deg, rgba(90,58,26,.14) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(89deg, rgba(255,240,210,.16) 0 1px, transparent 1px 7px) !important;
}
[data-mat="valnoed"] {
  background-color: #6b4227 !important;
  background-image:
    repeating-linear-gradient(90deg, rgba(20,8,0,.4) 0 2px, transparent 2px 58px),
    repeating-linear-gradient(0deg, rgba(20,8,0,.26) 0 1px, transparent 1px 15px),
    repeating-linear-gradient(91deg, rgba(220,170,120,.18) 0 1px, transparent 1px 5px) !important;
}
[data-mat="ask"] {
  background-color: #e2c9a0 !important;
  background-image:
    repeating-linear-gradient(90deg, rgba(120,90,55,.2) 0 2px, transparent 2px 56px),
    repeating-linear-gradient(0deg, rgba(120,90,55,.12) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(88deg, rgba(255,255,255,.22) 0 1px, transparent 1px 6px) !important;
}
[data-mat="bambus"] {
  background-color: #d8bd85 !important;
  background-image:
    repeating-linear-gradient(90deg, rgba(110,80,35,.3) 0 2px, transparent 2px 22px),
    repeating-linear-gradient(0deg, rgba(110,80,35,.18) 0 2px, transparent 2px 30px) !important;
}
[data-mat="skibsplanke"] {
  background-color: #c49a63 !important;
  background-image:
    repeating-linear-gradient(0deg,
      rgba(25,18,10,.75) 0 3px, transparent 3px 18px),
    repeating-linear-gradient(0deg,
      rgba(255,240,210,.16) 3px 5px, transparent 5px 18px) !important;
}
[data-mat="sildeben_m"] {
  background-color: #74492b !important;
  background-image:
    repeating-linear-gradient(45deg,
      rgba(20,10,2,.4) 0 1px, transparent 1px 11px,
      rgba(230,190,145,.14) 11px 12px, transparent 12px 22px),
    repeating-linear-gradient(-45deg,
      rgba(20,10,2,.4) 0 1px, transparent 1px 11px,
      rgba(230,190,145,.14) 11px 12px, transparent 12px 22px) !important;
}

/* Sekskanter: to sæt skrå linjer plus vandrette giver honeycomb */
[data-mat="sekskant"] {
  background-color: #e8e2d6 !important;
  background-image:
    repeating-linear-gradient(60deg, rgba(140,132,120,.55) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(-60deg, rgba(140,132,120,.55) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(0deg, rgba(140,132,120,.55) 0 2px, transparent 2px 45px) !important;
}
/* Metrofliser: aflange, forskudt hver anden række */
[data-mat="metro"] {
  background-color: #f0ece4 !important;
  background-image:
    repeating-linear-gradient(0deg, rgba(150,142,130,.6) 0 2px, transparent 2px 18px),
    repeating-linear-gradient(90deg, rgba(150,142,130,.6) 0 2px, transparent 2px 40px) !important;
  background-size: auto, 40px 36px;
}
[data-mat="terrazzo"] {
  background-color: #e6e1d7 !important;
  background-image:
    radial-gradient(circle at 12% 22%, rgba(120,110,95,.55) 0 3px, transparent 3px),
    radial-gradient(circle at 63% 14%, rgba(170,90,70,.45) 0 4px, transparent 4px),
    radial-gradient(circle at 34% 68%, rgba(90,120,105,.45) 0 3px, transparent 3px),
    radial-gradient(circle at 82% 74%, rgba(120,110,95,.5) 0 4px, transparent 4px),
    radial-gradient(circle at 48% 40%, rgba(60,60,60,.35) 0 2px, transparent 2px) !important;
  background-size: 46px 46px;
}
/* Skakternet: to farver i skiftevis felter */
[data-mat="skak"] {
  background-color: #f2ece1 !important;
  background-image:
    repeating-conic-gradient(#2b2723 0 25%, transparent 0 50%) !important;
  background-size: 56px 56px;
}
[data-mat="marmorgulv"] {
  background-color: #eceae5 !important;
  background-image:
    linear-gradient(118deg, transparent 0 30%, rgba(130,135,145,.4) 30% 31%, transparent 31%),
    linear-gradient(72deg, transparent 0 62%, rgba(130,135,145,.28) 62% 63%, transparent 63%),
    repeating-linear-gradient(90deg, rgba(170,168,162,.5) 0 2px, transparent 2px 70px),
    repeating-linear-gradient(0deg, rgba(170,168,162,.5) 0 2px, transparent 2px 70px) !important;
}

/* Titlerne kan slås fra, når man vil se lokalet uden tekst */
.bp__laerred.skjul-titler .bp__navn,
.pv__plan.skjul-titler .pv__navn { display: none !important; }

/* ------------------------------------------------------------
   DE SIDSTE MATERIALER UDEN TEGNING

   Syv af dem stod som tomme sorte felter i vælgeren. Man kunne
   læse navnet, men ikke se, hvad man valgte — og et materiale,
   man ikke kan se, vælger man ikke.
   ------------------------------------------------------------ */
[data-mat="sorttrae"] {
  background-color: #35312d !important;
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,.5) 0 2px, transparent 2px 44px),
    repeating-linear-gradient(88deg, rgba(255,255,255,.06) 0 1px, transparent 1px 6px),
    linear-gradient(160deg, rgba(255,255,255,.1), rgba(0,0,0,.35)) !important;
}
[data-mat="metal"] {
  background-color: #9aa1a9 !important;
  background-image:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.3) 0 1px, rgba(0,0,0,.14) 1px 3px, transparent 3px 6px),
    linear-gradient(140deg, rgba(255,255,255,.5), rgba(60,66,74,.4)) !important;
}
/* Læder: bløde felter med sømme imellem */
[data-mat="laeder"] {
  background-color: #9d5b39 !important;
  background-image:
    repeating-linear-gradient(45deg,
      transparent 0 16px, rgba(60,26,10,.3) 16px 18px),
    repeating-linear-gradient(-45deg,
      transparent 0 16px, rgba(60,26,10,.3) 16px 18px),
    linear-gradient(150deg, rgba(255,214,170,.3), rgba(50,20,6,.28)) !important;
}
/* Stof: væv på kryds og tværs */
[data-mat="stof"] {
  background-color: #6f7a63 !important;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.14) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.16) 0 1px, transparent 1px 4px) !important;
}
[data-mat="groen"] {
  background-color: #3f8f4c !important;
  background-image:
    repeating-radial-gradient(circle at 7px 50%,
      rgba(255,255,255,.2) 0 4px, rgba(0,0,0,.12) 4px 9px) !important;
}
[data-mat="moerk"] {
  background-color: #1c1e22 !important;
  background-image: linear-gradient(150deg, rgba(255,255,255,.13), rgba(0,0,0,.5)) !important;
}
/* Gennemsigtig skal LIGNE gennemsigtig — det ternede mønster,
   alle kender fra billedprogrammer */
[data-mat="aaben"] {
  background-color: #cfcfcf !important;
  background-image:
    repeating-conic-gradient(#f2f2f2 0 25%, #bfbfbf 0 50%) !important;
  background-size: 14px 14px;
  opacity: .55;
}
/* TEMAFAST SLUT */

/* ------------------------------------------------------------
   FORMEN PÅ ET ELEMENT

   Et gulv var altid en firkant. Men et loungeområde er tit rundt,
   en scene har afrundede hjørner, og en dansegulvszone kan være
   oval. Formen hører til objektet, ikke til dets type.
   ------------------------------------------------------------ */
[data-form="afrundet"] { border-radius: 14px !important; }
[data-form="rund"]     { border-radius: 50% !important; }
[data-form="oval"]     { border-radius: 50% / 40% !important; }
[data-form="kapsel"]   { border-radius: 999px !important; }
/* Skæv: et hjørne skåret af — til nicher og skrå vægge */
[data-form="skaev"] {
  border-radius: 4px !important;
  clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 100%, 0 100%);
}


/* ------------------------------------------------------------
   HUSETS EGET BILLEDE PÅ ET OBJEKT

   Laget ligger oven på materialet og under navnet, og det kan
   ikke rammes af musen — ellers ville et foto på et gulv stjæle
   trykket fra alt, der står på gulvet.
   ------------------------------------------------------------ */
.bp__foto,
.pv__foto {
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: inherit;
  pointer-events: none;
}

/* ------------------------------------------------------------
   BESKEDEN TIL KØKKENET, ØVERST I LINJENS DIALOG

   Et felt, der ligner et felt. Står der allerede noget, skal det
   kunne læses uden at åbne noget — det er tit dét, man trykkede
   på linjen for at kontrollere.
   ------------------------------------------------------------ */
.linjetekst {
  justify-content: flex-start;
  text-align: left;
  min-height: 46px;
  font-weight: 600;
  color: var(--tx-2);
  border-style: dashed;
  white-space: normal;
}
.linjetekst--sat {
  color: var(--yellow);
  border-style: solid;
  border-color: var(--yellow);
  font-weight: 700;
}

/* ============================================================
   VAREEDITOREN

   Én skærm for alt på en vare. Afsnittene står i den rækkefølge,
   man taler om maden: hvad er der i den, hvad kan lægges på,
   hvad skal køkkenet passe på, og hvad skal der stå på bonnen.

   Store trykflader hele vejen. Det her bruges midt i en
   bestilling, med gæsten ved bordet og en finger på en skærm,
   der ikke altid er ren.
   ============================================================ */
.modal--bred { max-width: 880px; width: 96vw; }

/* Editoren har mange afsnit, og på en lav skærm skal der rulles.
   Luft i bunden, så det sidste afsnit ikke ligger klemt op ad
   knapperne og ser afskåret ud. */
.modal--bred .modal__body { padding-bottom: 28px; }
.ve__afsnit:last-child { padding-bottom: 4px; }

.ve__hoved {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-1);
}
.ve__navn { font-size: 20px; font-weight: 800; }
.ve__total { text-align: right; }
.ve__total__mrk {
  font-size: 11px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--tx-2);
}
.ve__total__tal { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ve__variant { color: var(--tx-2); font-size: 13.5px; margin-top: 6px; }

.ve__afsnit { padding: 14px 0; border-bottom: 1px solid var(--line-1); }
.ve__afsnit:last-child { border-bottom: 0; }
.ve__titel { font-size: 15px; font-weight: 700; margin-bottom: 10px; }

/* ---------- Chips: standard indhold, allergener, beskeder ---------- */
.ve__chips { display: flex; flex-wrap: wrap; gap: 8px; }

.ve__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1.5px solid var(--line-2);
  background: var(--bg-3);
  color: var(--tx-1);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.ve__chip:active { transform: translateY(1px); }
.ve__chipmaerke { font-weight: 800; }
.ve__chipikon { font-size: 16px; }

/* Ingrediensen er PÅ — grøn med flueben */
.ve__chip--paa {
  border-color: var(--green);
  color: var(--green);
}
/* Ingrediensen er taget AF — slukket og streget */
.ve__chip--fra {
  border-color: var(--line-2);
  background: var(--bg-2);
  color: var(--tx-2);
  text-decoration: line-through;
}

.ve__chip.er-valgt {
  border-color: var(--accent);
  background: var(--accent-soft, var(--bg-4));
  color: var(--accent);
}
.ve__chip--allergi.er-valgt {
  border-color: var(--red);
  color: var(--red);
}
.ve__allergifri { margin-top: 10px; }

/* ---------- Kort med plus og minus ---------- */
.ve__kort {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 10px;
}
.ve__kort__felt {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--line-2);
  background: var(--bg-3);
}
.ve__kort__felt.er-valgt {
  border-color: var(--accent);
  background: var(--bg-4);
}
.ve__kort__navn { font-weight: 700; font-size: 14.5px; line-height: 1.25; }
.ve__kort__hjaelp { font-size: 12px; color: var(--tx-2); line-height: 1.35; }
/* ------------------------------------------------------------
   PRISEN STÅR PÅ SIN EGEN LINJE

   Først stod pris og tæller ved siden af hinanden. Så snart man
   trykkede plus, dukkede minus og tallet op, kortet blev ikke
   bredere — og prisen brækkede i tre linjer: "+ / 15,00 / kr."

   Et kort, der skifter facon, når man rører ved det, ser i
   stykker ud. Prisen får derfor sin egen linje, og tælleren sin.
   Så fylder kortet det samme, uanset om der er valgt noget.
   ------------------------------------------------------------ */
.ve__kort__bund {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
}
.ve__kort__pris {
  font-size: 13px;
  font-weight: 700;
  color: var(--tx-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ve__tal {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  /* Fast højde: rækken er der altid, også når der kun er et
     plus. Ellers hopper kortet i højden ved første tryk. */
  min-height: 40px;
}
.ve__tal__vis {
  min-width: 22px;
  text-align: center;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.ve__tal__knap {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--line-2);
  background: var(--bg-2);
  color: var(--tx-1);
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}
.ve__tal__knap--plus {
  border-color: var(--accent);
  color: var(--accent);
}
.ve__tal__knap:disabled { opacity: .35; cursor: default; }
.ve__tal__knap:active:not(:disabled) { background: var(--accent); color: var(--accent-tx); }

/* ---------- Beskedfeltet ---------- */
.ve__tekstfelt {
  display: block;
  width: 100%;
  min-height: 52px;
  margin-top: 10px;
  padding: 14px;
  text-align: left;
  border-radius: var(--r-md);
  border: 1.5px dashed var(--line-2);
  background: var(--bg-3);
  color: var(--tx-2);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
}
.ve__tekstfelt.er-udfyldt {
  border-style: solid;
  border-color: var(--yellow);
  color: var(--yellow);
  font-weight: 700;
}

@media (max-width: 700px) {
  .ve__kort { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
  .ve__chip { min-height: 42px; font-size: 13.5px; }
}

/* ---------- Antal i vareeditoren ---------- */
.ve__antal {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.ve__antal__knap {
  flex: 0 0 auto;
  width: 84px;
  height: 56px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--line-2);
  background: var(--bg-3);
  color: var(--tx-1);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}
.ve__antal__knap:active { background: var(--accent); color: var(--accent-tx); }
.ve__antal__tal {
  flex: 1 1 auto;
  text-align: center;
  font-size: 34px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* En stol mere: stiplet, så den ses som en TILFØJELSE og ikke
   som en stol, der allerede står der */
.ve__chip--tilfoej {
  border-style: dashed;
  color: var(--accent);
  border-color: var(--accent);
}

/* Enten-eller-valg: hele knappen siger, om det er valgt */
.ve__vaelg {
  width: 100%;
  min-height: 40px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--line-2);
  background: var(--bg-2);
  color: var(--tx-2);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
.ve__vaelg.er-valgt {
  border-color: var(--green);
  background: var(--green);
  color: var(--tx-inv);
}

/* ------------------------------------------------------------
   VALGLISTENS PRISER

   Den samlede pris er det, tjeneren skal sige højt. Den står
   derfor stort og alene til højre. Tillægget er en forklaring,
   ikke et svar — og står som lille grå tekst under.
   ------------------------------------------------------------ */
.valgliste__belob {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  margin-left: auto;
}
.valgliste__tillaeg {
  font-size: 12px;
  font-weight: 500;
  color: var(--tx-3);
  line-height: 1.1;
}
.valgliste__grund {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 14px 10px;
  color: var(--tx-3);
  font-size: 13px;
}
.valgliste__grundbelob {
  font-size: 15px;
  font-weight: 700;
  color: var(--tx-2);
}

/* Prisen på et tilvalgskort: den samlede pris stort, tillægget lille */
.ve__kort__pris { display: flex; flex-direction: column; gap: 1px; }
.ve__kort__ialt { font-size: 15px; font-weight: 700; color: var(--tx-1); }
.ve__kort__tillaeg { font-size: 11.5px; font-weight: 500; color: var(--tx-3); }