/* Club Bar Orders. Look and feel carried over from the prototype. */
:root{
  --bg:#f3f5f0; --surface:#ffffff; --ink:#16241d; --muted:#5d6b63; --line:#d6ddd4;
  --green:#14523a; --green-ink:#ffffff; --amber:#b86a00; --amber-soft:#fbeed3;
  --ready:#1c6b8a; --ready-soft:#dceef5; --done:#6b7770; --warn:#a3261c; --warn-soft:#f8e1de;
  --display:"Bricolage Grotesque","Trebuchet MS",sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0f1713; --surface:#18231d; --ink:#e9f0ea; --muted:#9aa9a0; --line:#2b3a32;
  --green:#3fa878; --green-ink:#07130d; --amber:#f0b24a; --amber-soft:#3a2c10;
  --ready:#6cc3e3; --ready-soft:#123240; --done:#8a978f; --warn:#ff8b7e; --warn-soft:#3d1a16; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0f1713; --surface:#18231d; --ink:#e9f0ea; --muted:#9aa9a0; --line:#2b3a32;
  --green:#3fa878; --green-ink:#07130d; --amber:#f0b24a; --amber-soft:#3a2c10;
  --ready:#6cc3e3; --ready-soft:#123240; --done:#8a978f; --warn:#ff8b7e; --warn-soft:#3d1a16; color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.4;padding:12px 16px 120px}
.wrap{max-width:560px;margin-inline:auto;display:flex;flex-direction:column;gap:16px}
.wrap.wide{max-width:1280px}
.stack{display:flex;flex-direction:column;gap:12px}
h1{font-family:var(--display);font-weight:800;font-size:1.6rem;margin:0;letter-spacing:-.01em}
h2{font-family:var(--display);font-weight:600;font-size:1.05rem;margin:0}
.sub{color:var(--muted);font-size:.9rem;margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
input,select,textarea{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-width:0}
textarea{width:100%;min-height:9em;font-family:ui-monospace,Menlo,monospace;font-size:.9rem}
a{color:var(--green)}

header.top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
header.top .grow{flex:1;min-width:0}
nav.staff{display:flex;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:4px;flex-wrap:wrap}
nav.staff a,nav.staff button{border:0;background:none;padding:8px 12px;border-radius:9px;font-weight:600;color:var(--muted);text-decoration:none}
nav.staff a[aria-current="page"]{background:var(--green);color:var(--green-ink)}

.badge{display:inline-block;min-width:1.4em;padding:0 .35em;border-radius:99px;background:var(--amber);color:var(--bg);font-size:.75rem;font-weight:700;margin-left:4px;text-align:center}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row .grow{flex:1;min-width:0}

.codein{font-family:var(--display);font-size:1.8rem;font-weight:800;letter-spacing:.2em;width:5.2em;text-align:center;padding:8px;border:2px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font-variant-numeric:tabular-nums}
.codein.bad{border-color:var(--warn)}
.who{font-weight:600}
.pill{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:99px;white-space:nowrap}
.pill.member{background:var(--green);color:var(--green-ink)}
.pill.visitor{background:var(--amber-soft);color:var(--amber)}
.pill.new{background:var(--amber-soft);color:var(--amber)}
.pill.ready{background:var(--ready-soft);color:var(--ready)}
.pill.done{background:var(--line);color:var(--done)}
.pill.cancelled{background:var(--warn-soft);color:var(--warn)}
.pill.staff{background:var(--line);color:var(--muted)}
.linkbtn{background:none;border:0;color:var(--green);font-weight:600;text-decoration:underline;padding:4px}

.cat{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:10px 0 0}
.item{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.item .nm{flex:1;min-width:0}
.item .nm b{display:block;font-weight:600}
.item .nm span{color:var(--muted);font-size:.85rem}
.item.out .nm b{text-decoration:line-through;color:var(--muted)}
.price{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.special .price{color:var(--amber)}
.qty{display:flex;align-items:center;gap:6px}
.qty button{width:44px;height:44px;border-radius:10px;border:1px solid var(--line);background:var(--bg);font-size:1.3rem;font-weight:700;line-height:1}
.qty button.add{background:var(--green);color:var(--green-ink);border-color:var(--green)}
.qty output{min-width:1.4em;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.soldtag{font-size:.8rem;font-weight:700;color:var(--warn);text-transform:uppercase;letter-spacing:.05em}

.cartbar{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--line);padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));z-index:5}
.cartbar .in{max-width:560px;margin-inline:auto;display:flex;align-items:center;gap:12px}
.cartbar .tot{flex:1;min-width:0}
.cartbar .tot b{font-family:var(--display);font-size:1.3rem;font-variant-numeric:tabular-nums}
.big{border:0;border-radius:12px;background:var(--green);color:var(--green-ink);font-weight:700;padding:14px 20px;font-size:1rem}
.big:disabled{opacity:.45;cursor:not-allowed}
.big.readybtn{background:var(--ready);color:var(--bg)}
.big.small{padding:10px 14px;font-size:.95rem}
.ghost{background:none;border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-weight:600}
.danger{background:none;border:1px solid var(--warn);color:var(--warn);border-radius:10px;padding:10px 14px;font-weight:600}
.danger.solid{background:var(--warn);color:var(--bg)}

.order{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:14px;display:flex;flex-direction:column;gap:10px}
.order.hl{border-color:var(--amber);border-width:2px}
.order.isready{border-color:var(--ready);border-width:2px}
.order.cancelled{opacity:.75}
.order .top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.order .num{font-family:var(--display);font-weight:800;font-size:1.5rem;font-variant-numeric:tabular-nums}
.order .brace{font-family:var(--display);font-weight:800;font-size:1.5rem;margin-left:auto;font-variant-numeric:tabular-nums;text-align:right}
.order .brace small{display:block;font-family:var(--body);font-weight:600;font-size:.85rem;color:var(--muted);letter-spacing:0}
.order ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.order li{display:flex;gap:8px;font-size:1.05rem}
.order li b{min-width:2em;font-variant-numeric:tabular-nums}
.order .foot{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.85rem;flex-wrap:wrap}
.order .foot .acts{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.order .old{color:var(--warn);font-weight:700}
.cancelform{display:flex;flex-direction:column;gap:8px;border-top:1px dashed var(--line);padding-top:10px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips button{border:1px solid var(--line);background:var(--bg);border-radius:99px;padding:6px 12px;font-size:.85rem}

.empty{color:var(--muted);text-align:center;padding:28px 12px;border:1px dashed var(--line);border-radius:14px}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:8px 6px;border-top:1px solid var(--line);vertical-align:top}
th{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border-top:0}
td.r,th.r{text-align:right}
tr.warnrow td{background:var(--warn-soft)}
.scroll{overflow-x:auto}
.note{font-size:.85rem;color:var(--muted);margin:0}
.msg{background:var(--amber-soft);color:var(--ink);border-radius:10px;padding:10px 12px;font-size:.92rem}
.msg.err{background:var(--warn-soft)}
.msg.ok{background:var(--ready-soft)}
.offline{position:sticky;top:0;z-index:6;background:var(--warn);color:var(--bg);font-weight:700;text-align:center;padding:8px;border-radius:10px}
details>summary{cursor:pointer}
.toggle{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.toggle .grow{flex:1;min-width:0}
.toggle button{min-width:7.5em}
.toggle button[aria-pressed="true"]{background:var(--warn);color:var(--bg);border-color:var(--warn)}

/* Bar screen: three columns on a tablet in landscape. */
.cols{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:900px){.cols{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}}
.col{display:flex;flex-direction:column;gap:12px}
.col h2 .badge{vertical-align:2px}

/* Setup: menu editor rows */
.mrow{display:grid;gap:8px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:12px 0;border-top:1px solid var(--line)}
.mrow .full{grid-column:1/-1}
.mrow label{display:flex;flex-direction:column;gap:4px;font-size:.8rem;color:var(--muted);font-weight:600}
.mrow label.inline{flex-direction:row;align-items:center;gap:8px}
@media (min-width:900px){.mrow{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1.6fr) minmax(0,1.4fr) minmax(0,.8fr) minmax(0,.9fr) minmax(0,.6fr) auto auto;align-items:end}.mrow .full{grid-column:auto}}
.mrow.inactive{opacity:.6}

/* Customer menu: section tabs (Alcohol / Beverages / Food), sticky while scrolling */
.sections{position:sticky;top:0;z-index:4;display:flex;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:4px;margin-inline:-4px;box-shadow:0 6px 12px -10px rgba(0,0,0,.35)}
.sections button{flex:1;border:0;background:none;padding:12px 4px;border-radius:9px;font-weight:700;color:var(--muted);white-space:nowrap}
.sections button[aria-selected="true"]{background:var(--green);color:var(--green-ink)}
.sections button[aria-selected="true"] .badge{background:var(--green-ink);color:var(--green)}