/* BW2026 POS — black & white theme, 16:9-first ADAPTIVE canvas (auto-scaled).
   Task 24 "smooth edge" overhaul + Task 27 universal rounded edges +
   Task 31 "16:9 adaptive redesign": on wide screens the stage becomes a
   1280x720 16:9 canvas (legacy 1024x768 on squarer screens, chosen by
   bw.js bwFit) and every major surface re-flows as a DENSE ADAPTIVE GRID
   — auto-fill menu tiles, fluid cart + running-orders rail, auto-fit KPI
   strips, tighter tables, responsive modals. Pure BW + gold alert.
   THIS SYSTEM IS DEVELOPED BY S-TECHNOLOGIES TZ */
:root {
  --ink: #0a0a0a; --paper: #ffffff; --line: #0a0a0a;
  --mut: #6b6b6b; --mut2: #a3a3a3; --wash: #f4f4f5; --wash2: #e8e8ea;
  --gold: #ffd400;
  --ok: #0a7a0a; --bad: #b00000;
  /* smooth-edge tokens */
  --r-sm: 8px; --r: 12px; --r-md: 10px; --r-lg: 16px; --r-xl: 20px; --r-full: 999px;
  --sh-sm: 0 1px 2px rgba(0,0,0,.06), 0 1px 6px rgba(0,0,0,.05);
  --sh-md: 0 2px 6px rgba(0,0,0,.08), 0 6px 18px rgba(0,0,0,.08);
  --sh-lg: 0 8px 24px rgba(0,0,0,.16), 0 16px 48px rgba(0,0,0,.12);
  --t: 180ms cubic-bezier(.4, 0, .2, 1);
  --ring: 0 0 0 3px rgba(255, 212, 0, .55);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
::selection { background: var(--ink); color: var(--gold); }
body {
  font-family: "Segoe UI", system-ui, -apple-system, Arial, Helvetica, sans-serif;
  background: radial-gradient(1200px 700px at 50% 0%, #e6e6e6, #cfcfcf 60%, #c4c4c4);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; min-height: 100vh;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.mono { font-family: "JetBrains Mono", "Courier New", ui-monospace, monospace; }
/* default stage = 16:9; bwFit() overrides inline when the viewport is squarer.
   NOTE: the entrance animation lives on the WRAP — putting it on .pos-shell
   would let its fill-mode 'both' final keyframe (transform:none) override
   bwFit()'s inline fit-scale forever (bug found at 1920x1080, Task 31). */
.scale-wrap { width: 1280px; height: 720px; flex: 0 0 auto; animation: shellIn 420ms cubic-bezier(.2,.8,.2,1) both; }
.pos-shell {
  width: 1280px; height: 720px; background: var(--paper);
  border: 1px solid rgba(0,0,0,.85); border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  display: flex; flex-direction: column;
  overflow: hidden; position: relative;
}
@keyframes shellIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

/* ---------- topbar ---------- */
.topbar {
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--wash2); padding: 6px 12px; background: var(--paper);
  min-height: 58px; position: relative; z-index: 2;
  box-shadow: 0 1px 0 rgba(0,0,0,.02), var(--sh-sm);
}
.brand { display: flex; align-items: center; gap: 9px; }
.logo { width: 40px; height: 40px; object-fit: contain; transition: transform var(--t); }
.brand:hover .logo { transform: rotate(-4deg) scale(1.05); }
.brand-name { font-weight: 900; letter-spacing: .05em; font-size: 13px; white-space: nowrap; }
.brand-sub { font-size: 8.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--mut); white-space: nowrap; }
.topnav { display: flex; gap: 2px; flex: 1; flex-wrap: wrap; justify-content: center; align-content: center; max-height: 52px; overflow: hidden; padding: 2px 0; }
.navlink {
  font-size: 9px; font-weight: 800; letter-spacing: .03em; text-decoration: none; color: var(--ink);
  border: 1.5px solid transparent; padding: 3.5px 6.5px; background: var(--wash);
  border-radius: var(--r-full); position: relative; white-space: nowrap; line-height: 1.25;
  transition: background var(--t), color var(--t), border-color var(--t), transform var(--t), box-shadow var(--t);
}
.navlink:hover { background: var(--wash2); border-color: var(--ink); transform: translateY(-1px); }
.navlink:active { transform: translateY(0) scale(.96); }
.navlink.on { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: var(--sh-sm); }
.topright { display: flex; align-items: center; gap: 6px; }
.clock { font-weight: 700; font-size: 13px; border: 1.5px solid var(--ink); padding: 5px 7px; min-width: 78px; text-align: center; border-radius: var(--r); background: var(--paper); box-shadow: var(--sh-sm); }
.chip {
  font-size: 9.5px; font-weight: 700; border: 1.5px solid var(--ink);
  padding: 5px 7px; text-decoration: none; color: var(--ink); white-space: nowrap;
  border-radius: var(--r-full); background: var(--paper);
  transition: background var(--t), color var(--t), transform var(--t), box-shadow var(--t);
}
.chip:hover { transform: translateY(-1px); box-shadow: var(--sh-sm); }
.chip.user { background: var(--ink); color: var(--paper); max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.chip.warn:hover { background: var(--bad); border-color: var(--bad); color: #fff; }

/* ---------- yellow notice + CMS ticker ---------- */
.notice-yellow {
  background: var(--ink); color: var(--gold);
  font-weight: 700; font-size: 11px; letter-spacing: .05em;
  padding: 6px 14px; border-radius: 0;
  animation: slideDown 260ms cubic-bezier(.2,.8,.2,1) both;
}
.cms-ticker {
  background: var(--wash); border-bottom: 1px solid var(--wash2);
  overflow: hidden; position: relative; height: 26px; display: flex; align-items: center;
}
.cms-ticker-track {
  display: inline-flex; gap: 26px; align-items: center; white-space: nowrap;
  padding-left: 14px; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; color: var(--mut);
  animation: ticker 26s linear infinite;
}
.cms-ticker-track .dot { color: var(--mut2); }
.cms-ticker:hover .cms-ticker-track { animation-play-state: paused; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- content ---------- */
.content { flex: 1; overflow: auto; padding: 12px; background: var(--paper); animation: fadeUp 300ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.statusbar {
  border-top: 1px solid rgba(255,255,255,.08); background: var(--ink); color: var(--paper);
  display: flex; justify-content: space-between; padding: 5px 12px; font-size: 10px; letter-spacing: .08em;
}
.statusbar .credit { color: var(--gold); font-weight: 700; }

/* ---------- generic ---------- */
h1.pg { font-size: 15px; letter-spacing: .14em; border-bottom: 2px solid var(--ink); padding-bottom: 8px; margin-bottom: 12px; text-transform: uppercase; }
.btn {
  border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink);
  font-weight: 800; letter-spacing: .06em; padding: 9px 15px; cursor: pointer; font-size: 12px;
  border-radius: var(--r); box-shadow: var(--sh-sm); user-select: none;
  transition: background var(--t), color var(--t), transform var(--t), box-shadow var(--t), border-color var(--t), opacity var(--t);
}
.btn:hover { background: var(--wash); transform: translateY(-1px); box-shadow: var(--sh-md); }
.btn:active { transform: translateY(0) scale(.97); box-shadow: var(--sh-sm); }
.btn.solid { background: var(--ink); color: var(--paper); }
.btn.solid:hover { background: #1f1f1f; }
.btn.gold { background: var(--gold); border-color: var(--ink); color: var(--ink); }
.btn.gold:hover { background: #ffdd33; }
.btn.danger { border-color: var(--bad); color: var(--bad); }
.btn.danger:hover { background: var(--bad); color: #fff; }
.btn.sm { padding: 5px 10px; font-size: 10.5px; border-radius: var(--r-sm); }
.btn:disabled { opacity: .38; cursor: not-allowed; transform: none; box-shadow: none; }
.btn:focus-visible, .f:focus-visible { outline: none; box-shadow: var(--ring); }
.row { display: flex; gap: 10px; }
.grow { flex: 1; }
.card {
  border: 1px solid var(--wash2); border-radius: var(--r-lg); padding: 12px; background: var(--paper);
  box-shadow: var(--sh-sm);
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}
.card:hover { box-shadow: var(--sh-md); border-color: #d8d8dc; }
.card h3 { font-size: 11px; letter-spacing: .12em; border-bottom: 1.5px solid var(--wash2); padding-bottom: 6px; margin-bottom: 9px; text-transform: uppercase; }
label.f { display: block; font-size: 10px; font-weight: 700; letter-spacing: .08em; margin: 9px 0 3px; text-transform: uppercase; color: var(--mut); }
input.f, select.f, textarea.f {
  width: 100%; border: 1.5px solid var(--wash2); border-radius: var(--r);
  padding: 8px 10px; font-size: 13px; background: var(--paper); color: var(--ink);
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
input.f:hover, select.f:hover, textarea.f:hover { border-color: var(--mut2); }
input.f:focus, select.f:focus, textarea.f:focus { outline: none; border-color: var(--ink); box-shadow: var(--ring); }
table.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; border: 1px solid var(--wash2); border-radius: var(--r); overflow: hidden; }
table.tbl th { background: var(--ink); color: var(--paper); padding: 5px 9px; text-align: left; font-size: 10px; letter-spacing: .08em; position: sticky; top: 0; z-index: 1; white-space: nowrap; }
table.tbl td { border-top: 1px solid var(--wash2); padding: 5px 9px; background: var(--paper); transition: background var(--t); }
table.tbl tr:nth-child(even) td { background: #fafafa; }
table.tbl tbody tr:hover td { background: var(--wash); }
.badge {
  display: inline-block; border: 1.5px solid var(--ink); font-size: 9.5px; font-weight: 800; letter-spacing: .06em;
  padding: 2px 8px; border-radius: var(--r-full);
}
.badge.solid { background: var(--ink); color: var(--paper); }
.badge.gold { background: var(--gold); }
.badge.ok { border-color: var(--ok); color: var(--ok); }
.badge.bad { border-color: var(--bad); color: var(--bad); }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; }
.tab {
  border: 1.5px solid var(--wash2); padding: 7px 13px; font-size: 11px; font-weight: 800; letter-spacing: .06em;
  cursor: pointer; background: var(--wash); border-radius: var(--r-full);
  transition: all var(--t);
}
.tab:hover { border-color: var(--ink); transform: translateY(-1px); }
.tab.on { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: var(--sh-sm); }
.scroll { max-height: 600px; overflow-y: auto; border: 1px solid var(--wash2); border-radius: var(--r); }
.scroll::-webkit-scrollbar, .menu-grid::-webkit-scrollbar, .cart-lines::-webkit-scrollbar, .content::-webkit-scrollbar { width: 9px; height: 9px; }
.scroll::-webkit-scrollbar-track, .menu-grid::-webkit-scrollbar-track, .cart-lines::-webkit-scrollbar-track, .content::-webkit-scrollbar-track { background: transparent; }
.scroll::-webkit-scrollbar-thumb, .menu-grid::-webkit-scrollbar-thumb, .cart-lines::-webkit-scrollbar-thumb, .content::-webkit-scrollbar-thumb {
  background: #c9c9cf; border-radius: var(--r-full); border: 2px solid var(--paper);
}
.scroll::-webkit-scrollbar-thumb:hover, .menu-grid::-webkit-scrollbar-thumb:hover, .cart-lines::-webkit-scrollbar-thumb:hover { background: var(--ink); }
.msg {
  border: 1.5px solid var(--ink); border-radius: var(--r); padding: 9px 12px; font-weight: 700; font-size: 12px; margin: 8px 0;
  animation: slideDown 240ms cubic-bezier(.2,.8,.2,1) both; box-shadow: var(--sh-sm);
}
.msg.err { background: var(--ink); color: var(--gold); border-color: var(--ink); }
.msg.ok { background: var(--wash); }
.empty { color: var(--mut); font-size: 12px; padding: 16px; text-align: center; letter-spacing: .06em; }

/* ---------- login ---------- */
.login-shell { background: var(--paper); }
.login-notice-gap { display: flex; flex-direction: column; gap: 10px; }
.cms-login-notice {
  background: var(--ink); color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: .18em;
  text-align: center; padding: 6px 12px; text-transform: uppercase;
  animation: slideDown 300ms cubic-bezier(.2,.8,.2,1) both;
}
.login-wrap { display: flex; height: 100%; }
.login-left {
  width: 46%; background: var(--ink) linear-gradient(160deg, #1a1a1a 0%, #000 100%); color: var(--paper);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px;
}
.login-left img { width: 130px; height: 130px; object-fit: contain; filter: invert(1); transition: transform 320ms cubic-bezier(.2,.8,.2,1); }
.login-left img:hover { transform: scale(1.06) rotate(-3deg); }
.login-left .big { font-size: 22px; font-weight: 900; letter-spacing: .12em; }
.login-left .sub { font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: #bbb; }
.login-right { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; }
.pin-row { display: flex; gap: 10px; margin-bottom: 6px; }
.pin-err { background: var(--ink); color: var(--gold); font-weight: 700; padding: 8px 14px; font-size: 12px; min-height: 34px; display: flex; align-items: center; border-radius: var(--r); animation: shake 300ms ease; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.pin-pad { display: grid; grid-template-columns: repeat(3, 76px); gap: 9px; }
.pin-key {
  border: 1.5px solid var(--wash2); background: var(--paper); font-size: 20px; font-weight: 800;
  padding: 14px 0; text-align: center; cursor: pointer; user-select: none;
  touch-action: manipulation; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  border-radius: var(--r); box-shadow: var(--sh-sm);
  transition: background var(--t), color var(--t), transform 90ms ease, box-shadow var(--t), border-color var(--t);
}
.pin-key:hover { background: var(--wash); border-color: var(--ink); transform: translateY(-1px); }
.pin-key:active { background: var(--ink); color: var(--paper); transform: scale(.94); box-shadow: none; }
.pin-key.fn { font-size: 13px; }
.pin-dots { display: flex; gap: 8px; justify-content: center; }
.pin-dots span { width: 12px; height: 12px; border: 2px solid var(--ink); border-radius: 50%; display: inline-block; transition: background var(--t), transform var(--t); }
.pin-dots span.f { background: var(--ink); transform: scale(1.12); }
.pin-list { max-height: 150px; overflow-y: auto; border: 1px solid var(--wash2); border-radius: var(--r); width: 260px; overflow: hidden; }
.pin-list button {
  display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--wash2);
  background: var(--paper); padding: 8px 12px; font-size: 12px; cursor: pointer;
  transition: background var(--t), padding-left var(--t);
}
.pin-list button:hover { background: var(--wash); padding-left: 16px; }

/* ---------- CMS surfaces (Task 24) ---------- */
.cms-hub { display: flex; gap: 12px; align-items: flex-start; }
.cms-menu { width: 250px; flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; }
.cms-menu-link {
  display: flex; flex-direction: column; gap: 1px; text-decoration: none; color: var(--ink);
  padding: 8px 10px; border-radius: var(--r); border: 1.5px solid transparent;
  transition: background var(--t), border-color var(--t), transform var(--t);
}
.cms-menu-link:hover { background: var(--wash); transform: translateX(2px); }
.cms-menu-link.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cms-menu-link .t { font-size: 12px; font-weight: 800; }
.cms-menu-link .s { font-size: 10px; color: var(--mut); }
.cms-menu-link.on .s { color: #cfcfcf; }
.cms-menu-foot { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.cms-article { padding: 18px 20px; }
.cms-title { font-size: 17px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; }
.cms-sub { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); margin-bottom: 12px; }
.cms-body { font-size: 13px; line-height: 1.65; color: #222; }
.cms-body br + br { line-height: 2; }
.cms-meta { margin-top: 16px; padding-top: 8px; border-top: 1px dashed var(--wash2); font-size: 9.5px; color: var(--mut2); letter-spacing: .1em; }
.cms-empty-state { opacity: .92; }
.cms-cell-body { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mut); }
.cms-banner-row { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.cms-banner {
  flex: 1 1 220px; display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--paper);
  background: var(--ink) linear-gradient(135deg, #262626 0%, #000 70%);
  border: 1px solid #000; border-radius: var(--r); padding: 8px 14px;
  box-shadow: var(--sh-md); cursor: pointer; overflow: hidden; position: relative;
  transition: transform var(--t), box-shadow var(--t);
}
.cms-banner::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.09) 50%, transparent 70%);
  transform: translateX(-100%); animation: bannerSheen 6s ease-in-out infinite;
}
@keyframes bannerSheen { 0%, 60% { transform: translateX(-100%); } 90%, 100% { transform: translateX(100%); } }
.cms-banner:hover { transform: translateY(-2px); box-shadow: var(--sh-lg); }
.cms-banner .t {
  background: var(--gold); color: var(--ink); font-size: 9.5px; font-weight: 900; letter-spacing: .1em;
  padding: 2px 8px; border-radius: var(--r-full); flex: 0 0 auto; text-transform: uppercase;
}
.cms-banner span { font-size: 11px; font-weight: 600; letter-spacing: .04em; color: #f0f0f0; }

/* ---------- floor (POS) — 16:9 dense adaptive columns ----------
   The menu stage takes all remaining width; cart and running-orders rail
   are wide enough for touch at 720p while leaving the tiles more columns. */
.floor { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 10px; height: 100%; }
.floor-left { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; }
.outlet-row { display: flex; gap: 6px; flex-wrap: wrap; }
.outlet-btn {
  border: 1.5px solid var(--wash2); padding: 7px 11px; font-size: 11px; font-weight: 800; cursor: pointer;
  background: var(--wash); letter-spacing: .04em; border-radius: var(--r-full);
  transition: all var(--t);
}
.outlet-btn:hover { border-color: var(--ink); transform: translateY(-1px); }
.outlet-btn.on { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: var(--sh-sm); }
/* Task 54 — waiter-only drinks-bar selector on top of the POS */
.drinkbar-row {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  border: 1.5px dashed var(--ink); border-radius: var(--r-lg);
  padding: 6px 10px; background: var(--wash);
}
.db-label {
  font-size: 9.5px; font-weight: 900; letter-spacing: .12em; color: var(--ink);
  border-right: 1.5px solid var(--wash2); padding-right: 8px; margin-right: 2px;
}
.db-btn { padding: 5px 10px; font-size: 10.5px; }
.db-off { font-style: normal; font-size: 8px; vertical-align: 1px; color: var(--gold); }
.outlet-btn.on .db-off { color: var(--paper); }
.cat-row { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 2px; }
.cat-row::-webkit-scrollbar { height: 4px; }
/* dense auto-fill tile grid: fills the whole 16:9 stage height and every
   leftover column, instead of the old fixed 488px 4:3 block */
.menu-grid {
  flex: 1; min-height: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  grid-auto-flow: dense; gap: 6px;
  align-content: start; overflow-y: auto; border: 1px solid var(--wash2); border-radius: var(--r-lg);
  padding: 8px; background: #fcfcfc;
}
.mi {
  border: 1.5px solid var(--wash2); background: var(--paper); cursor: pointer; text-align: center;
  padding: 6px 4px; min-height: 74px; display: flex; flex-direction: column; justify-content: space-between; gap: 4px;
  border-radius: var(--r); box-shadow: var(--sh-sm); position: relative; overflow: hidden;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t), background var(--t);
}
.mi:hover { background: var(--paper); border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--sh-md); }
.mi:active { transform: translateY(0) scale(.96); }
.mi .nm { font-size: 10px; font-weight: 700; line-height: 1.2; text-transform: uppercase; }
.mi .pr { font-size: 11px; font-weight: 800; }
.mi .hh { font-size: 8.5px; background: var(--gold); border: 1px solid var(--ink); padding: 0 4px; display: inline-block; border-radius: var(--r-full); font-weight: 800; }
.mi.out { background: var(--wash); color: var(--mut2); border-color: var(--wash2); cursor: not-allowed; box-shadow: none; }
.mi.out:hover { transform: none; box-shadow: none; border-color: var(--wash2); }
.mi.out .pr { color: var(--mut2); }
.cart {
  border: 1px solid var(--wash2); border-radius: var(--r-lg); display: flex; flex-direction: column; height: 100%;
  background: var(--paper); box-shadow: var(--sh-sm); overflow: hidden;
}
.cart-h {
  border-bottom: 1px solid var(--wash2); padding: 8px 10px; font-size: 11px; font-weight: 900; letter-spacing: .1em;
  display: flex; justify-content: space-between; background: var(--wash);
}
.cart-lines { flex: 1; overflow-y: auto; padding: 7px; }
.cl {
  display: flex; align-items: center; gap: 6px; border: 1px solid var(--wash2); border-radius: var(--r-sm);
  padding: 5px 7px; margin-bottom: 5px; font-size: 11px; background: var(--paper);
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
  animation: fadeUp 200ms cubic-bezier(.2,.8,.2,1) both;
}
.cl:hover { border-color: var(--ink); box-shadow: var(--sh-sm); }
.cl .q { font-weight: 900; min-width: 34px; }
.cl .n { flex: 1; font-weight: 700; }
.cl .p { font-weight: 800; }
.cl .x {
  border: 1.5px solid var(--wash2); background: var(--paper); cursor: pointer; font-weight: 900; padding: 0 7px;
  border-radius: var(--r-sm); transition: background var(--t), color var(--t), border-color var(--t), transform var(--t);
}
.cl .x:hover { background: var(--bad); border-color: var(--bad); color: #fff; transform: scale(1.08); }
.cl .mods { font-size: 9px; color: var(--mut); width: 100%; }
/* Task 55 — the line's chosen drinks bar (which bar's stock is debited) */
.cl .lbar { font-size: 8.5px; font-weight: 900; letter-spacing: .1em; color: #8a6d00; width: 100%; }
.cl .lbar::before { content: '◆ '; font-size: 7px; }
.cart-f { border-top: 1px solid var(--wash2); padding: 9px; display: flex; flex-direction: column; gap: 6px; background: #fcfcfc; }
.tot-line { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 700; }
.tot-line.big { font-size: 15px; font-weight: 900; border-top: 1.5px dashed var(--wash2); padding-top: 7px; }
.cart-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

/* ---------- modal ---------- */
.modal-bg {
  position: fixed; inset: 0; background: rgba(10,10,10,.55); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; z-index: 50;
  animation: fadeIn 160ms ease both;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--paper); border: 1px solid rgba(0,0,0,.9); border-radius: var(--r-lg);
  width: min(460px, 94vw); max-height: 92vh; overflow-y: auto; padding: 16px;
  box-shadow: var(--sh-lg);
  animation: popIn 240ms cubic-bezier(.2,1.4,.3,1) both;
}
@keyframes popIn { from { opacity: 0; transform: translateY(16px) scale(.94); } to { opacity: 1; transform: none; } }
.modal.wide { width: min(640px, 96vw); }
.modal h2 { font-size: 13px; letter-spacing: .14em; border-bottom: 2px solid var(--ink); padding-bottom: 7px; margin-bottom: 11px; text-transform: uppercase; }
.modal .acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 13px; }
.pay-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pay-btn {
  border: 1.5px solid var(--wash2); padding: 11px 4px; font-size: 10.5px; font-weight: 800; cursor: pointer;
  background: var(--wash); border-radius: var(--r); transition: all var(--t);
}
.pay-btn:hover { border-color: var(--ink); transform: translateY(-1px); }
.pay-btn.on { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: var(--sh-sm); }
.kv { display: flex; justify-content: space-between; font-size: 12px; padding: 4px 0; }
.kv b { font-weight: 900; }
.deny-list { background: var(--wash); border: 1.5px solid var(--wash2); padding: 7px 10px; font-size: 11px; margin: 6px 0; border-radius: var(--r); }

/* ---------- reports / print ---------- */
@media print {
  body { background: #fff; overflow: visible; }
  /* !important beats the inline sizes bwFit() writes on the adaptive canvas */
  .scale-wrap { width: auto !important; height: auto !important; }
  .pos-shell { border: 0; width: auto !important; height: auto !important; transform: none !important; box-shadow: none; border-radius: 0; animation: none; }
  .topbar, .statusbar, .no-print, .notice-yellow, .cms-ticker, .cms-banner-row { display: none !important; }
  .content { overflow: visible; padding: 0; animation: none; }
  .scroll { max-height: none; overflow: visible; border-width: 1px; }
}
.rep-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 10px; flex-wrap: wrap; }
.rep-title { font-size: 15px; font-weight: 900; letter-spacing: .12em; }
.tot-strip { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
/* Task 31 — adaptive dense column utility: cards/panels re-flow to fill
   the full 16:9 width with as many columns as fit (dense packing) */
.adaptive-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); align-items: start; }
.tot-box {
  border: 1px solid var(--wash2); border-radius: var(--r); padding: 7px 14px; min-width: 120px;
  background: var(--paper); box-shadow: var(--sh-sm);
  transition: transform var(--t), box-shadow var(--t);
}
.tot-box:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.tot-box .k { font-size: 9px; letter-spacing: .14em; color: var(--mut); font-weight: 800; text-transform: uppercase; }
.tot-box .v { font-size: 16px; font-weight: 900; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); gap: 8px; }

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .cms-ticker-track { animation: none; }
}

/* ================= BW2026 LARAVEL EDITION — RUNNING ORDERS RAIL (Task 23/25; 16:9 widths Task 31) ================= */
.floor.floor-with-rail { grid-template-columns: minmax(0, 1fr) 320px 232px; }
.rail {
  display: flex; flex-direction: column; min-height: 0;
  background: #fff; border: 1.5px solid var(--wash2); border-radius: var(--r-md);
  box-shadow: var(--sh-sm); overflow: hidden;
}
.rail-h {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 8px 10px; background: #000; color: #fff;
  font-weight: 800; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
}
.rail-h .btn.sm { background: #fff; color: #000; border-color: #fff; padding: 2px 8px; font-size: 10px; }
.rail-rows { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.rail-row {
  display: flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--wash2); border-radius: var(--r-sm); padding: 7px 8px;
  background: #fff; transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.rail-row:hover { transform: translateY(-1px); box-shadow: var(--sh-sm); }
.rail-main { flex: 1; min-width: 0; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.rail-main b { font-size: 12px; letter-spacing: .04em; }
.rail-main .r-t { font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #444;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-main .r-s { font-size: 10px; color: #000; }
.rail-row .btn.danger { padding: 3px 8px; font-size: 9.5px; }
.rail-rows .empty { color: #666; font-size: 10.5px; text-align: center; padding: 18px 6px; }

/* ================= Task 27 — UNIVERSAL ROUNDED EDGES =================
   Guarantee: EVERY button, input, select and textarea on EVERY page
   (themed or raw page-local markup) renders with smooth custom rounded
   edges on any PHP+MySQL host at 1024x768. THIS SYSTEM IS DEVELOPED BY
   S-TECHNOLOGIES TZ */
button, input, select, textarea {
  border-radius: var(--r) !important;
  font-family: inherit;
  transition: background var(--t), color var(--t), border-color var(--t), box-shadow var(--t), transform var(--t);
}
form, fieldset { border-radius: var(--r-lg); }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; box-shadow: var(--ring);
}
/* keep the intended pill radius on themed capsule controls */
.navlink, .chip, .tab, .outlet-btn, .cms-banner .t, .cms-menu-link { border-radius: var(--r-full) !important; }
/* keep the intended small radius on compact controls */
.btn.sm, .cl .x, .rail-row .btn { border-radius: var(--r-sm) !important; }
/* gentle press feedback for raw page-local buttons */
button:not(.btn):not(.pin-key):not(.navlink):not(.tab):not(.outlet-btn):not(.pay-btn):hover { filter: brightness(.96); }
button:not(.btn):not(.pin-key):not(.navlink):not(.tab):not(.outlet-btn):not(.pay-btn):active { transform: scale(.97); }
/* checkboxes / radios keep a sensible small radius */
input[type=checkbox], input[type=radio] { border-radius: 4px !important; }

/* ================= Task 38 — CSS LINT & BROKEN-REFERENCE FIXES =================
   Full audit (views + bw.js class attributes vs bw.css selectors) found these
   classes REFERENCED but never DEFINED; each now has a definition:
   --t-fast (used by .rail-row), .brand-txt, form.stockAdj (STOCK CONTROL),
   form.poRecv (PURCHASE ORDERS receive), input.declQty (stock declaration),
   and checkbox hooks .delItem .miOutlet .modBox .mpCb .pOutlet.
   Note: status chips like <span class="badge ok">OK</span> are covered by the
   .badge / .badge.ok / .badge.bad / .badge.gold / .badge.solid rules above.
   THIS SYSTEM IS DEVELOPED BY S-TECHNOLOGIES TZ */
:root { --t-fast: 120ms cubic-bezier(.4, 0, .2, 1); }
.brand-txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.brand-txt .brand-name { line-height: 1.1; }
form.stockAdj, form.poRecv { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
form.poRecv { gap: 6px; }
form.poRecv .f { min-width: 0; }
input.declQty { text-align: right; }
input[type="checkbox"].delItem, input[type="checkbox"].miOutlet, input[type="checkbox"].modBox,
input[type="checkbox"].mpCb, input[type="checkbox"].pOutlet {
  accent-color: #0a0a0a; width: 14px; height: 14px; cursor: pointer;
  vertical-align: middle; margin: 0 2px 0 0;
}