/* PizzaDesk 2.0 "Stone": warm stone surfaces, raised cards, an espresso rail and top bar,
   a glossy knob that slides to where you are, and calm motion. Loaded after app.css. */

:root {
  --ground: #E2DCD3;
  --flour: #F2EEE8;
  --card: #FBF9F5;
  --ink: #2A221D;
  --ink-2: #4A3F37;
  --muted: #6B6057;
  --line: #DDD5CA;
  --line-2: #E8E2D9;
  --basil: #2A221D;
  --basil-2: #3A302A;
  --basil-3: #2F7A4F;
  --tomato: #C8402A;
  --tomato-d: #A5321F;
  --crust: #C9772E;
  --cheese: #F2B544;
  --cheese-soft: #F8EDD3;
  --ok: #2F7A4F;
  --ok-soft: #E3EFE6;
  --warn: #93590E;
  --warn-soft: #F7EBD5;
  --bad: #B3372A;
  --bad-soft: #F6E1DC;
  --info: #2F5F7F;
  --info-soft: #E1EAF0;
  --display: "Inter", "Segoe UI", system-ui, -apple-system, "Hind Siliguri", sans-serif;
  --r-panel: 20px;
  --r-ctl: 12px;
  --raised: linear-gradient(180deg, #FDFBF8 0%, #F1ECE4 100%);
  --espresso: linear-gradient(180deg, #3B312B 0%, #221B17 100%);
  --knob: radial-gradient(120% 140% at 35% 20%, #FFFFFF 0%, #EFE9E1 45%, #C9BFB2 100%);
  --shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 1px 2px rgba(70, 52, 36, .08), 0 12px 26px -14px rgba(70, 52, 36, .30);
  --shadow-lift: inset 0 1px 0 #fff, 0 2px 4px rgba(70, 52, 36, .08), 0 24px 44px -18px rgba(70, 52, 36, .45);
  --well: inset 0 2px 4px rgba(70, 52, 36, .16), inset 0 -1px 0 rgba(255, 255, 255, .7);
  --dark-sh: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -2px 0 rgba(0, 0, 0, .3), 0 16px 32px -12px rgba(36, 29, 25, .6);
  --ease-spring: cubic-bezier(.3, 1.3, .45, 1);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

body { background: var(--ground); color: var(--ink); }
a { color: #8A3A1E; }
h1 { font-family: var(--text); font-weight: 650; letter-spacing: -.02em; }
:focus-visible { outline: 2px solid var(--crust); outline-offset: 2px; }
::selection { background: rgba(242, 181, 68, .45); }

/* ---------- Shell ---------- */
body.app {
  background: radial-gradient(120% 70% at 60% 0%, #ECE7E0 0%, var(--ground) 55%, #D8D1C7 100%) fixed;
  grid-template-columns: 268px minmax(0, 1fr);
}
html.rail-slim body.app { grid-template-columns: 104px minmax(0, 1fr); }

.side {
  position: sticky; top: 16px; margin: 16px 0 16px 16px; height: calc(100vh - 32px); height: calc(100dvh - 32px);
  border-radius: 30px; background: var(--espresso); background-image: var(--espresso); color: #D9CFC4; border: 0;
  box-shadow: var(--dark-sh); scrollbar-color: rgba(255, 255, 255, .16) transparent; overflow-x: hidden;
}
.side-top { display: flex; align-items: center; gap: 6px; padding: 16px 12px 8px 16px; }
.side .brand { flex: 1; min-width: 0; padding: 4px; color: #F4EEE6; font: 650 1.02rem/1.15 var(--text); letter-spacing: -.01em; }
.side .brand svg { flex: none; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); }
.rail-toggle { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; color: #BFB2A6; background: rgba(255, 255, 255, .06); transition: background .2s, color .2s, transform .35s var(--ease-spring); }
.rail-toggle:hover { background: rgba(255, 255, 255, .12); color: #fff; }
html.rail-slim .rail-toggle { transform: rotate(180deg); }

.side nav { position: relative; padding: 6px 14px 18px; }
.side nav .knob { position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: 14px; background: var(--knob); opacity: 0; pointer-events: none; z-index: 0;
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .14), 0 6px 14px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .06);
  transform: translate(var(--kx, 0), var(--ky, 0)); transition: transform .6s var(--ease-spring), width .35s var(--ease-out), height .35s var(--ease-out), border-radius .35s; }
.side nav.has-knob .knob { opacity: 1; }
.side nav .nav-group { margin-top: 2px; border: 0; padding-top: 0; }
.side nav .nav-group + .nav-group { border-top: 1px solid rgba(255, 255, 255, .07); padding-top: 4px; margin-top: 6px; }
.side .nav-h { color: #A89B8E; font: 600 .78rem/1 var(--text); letter-spacing: .01em; text-transform: none; padding: 10px 10px; border-radius: 10px; }
.side .nav-h:hover { color: #F4EEE6; background: rgba(255, 255, 255, .05); }
.side .nav-group.here .nav-h { color: #F4EEE6; }
.side nav a { z-index: 1; padding: 9px 11px; border-radius: 14px; color: #D9CFC4; font-size: .9rem; font-weight: 500; gap: 12px; transition: color .25s, background .2s; }
.side nav a .ico { opacity: .8; transition: color .25s, opacity .2s; }
.side nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.side nav a.on { background: var(--knob); color: var(--ink); font-weight: 650; box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .14), 0 6px 14px rgba(0, 0, 0, .5); }
.side nav.has-knob a.on { background: transparent; box-shadow: none; }
.side nav a.on::before { display: none; }
.side nav a.on .ico { color: var(--tomato); opacity: 1; }
.side .nav-badge { background: rgba(255, 255, 255, .14); }
.side .nav-badge.urgent, .side nav a.on .nav-badge.urgent { background: var(--tomato); color: #fff; }
.side nav a.on .nav-badge { background: var(--ink); color: #fff; }
.side-foot { margin: 0 10px 10px; padding: 12px; border-radius: 22px; border: 0; background: rgba(0, 0, 0, .22); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35); }
.side .who b { color: #F4EEE6; }
.side .who small { color: #A89B8E; }
.avatar { background: linear-gradient(180deg, #F6D68A, #D99A3A); color: #3A2410; font: 700 .9rem var(--text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 6px rgba(0, 0, 0, .35); }
.side .side-out { color: #D9CFC4; background: transparent; border-color: rgba(255, 255, 255, .14); border-radius: 999px; box-shadow: none; }
.side .side-out:hover { background: rgba(255, 255, 255, .08); color: #fff; }

/* Slim rail: icons only, a round knob, labels as tooltips */
html.rail-slim .side-top { flex-direction: column; padding: 16px 0 8px; gap: 10px; }
html.rail-slim .side .brand { flex: none; padding: 0; }
html.rail-slim .side .brand span, html.rail-slim .side .nav-h, html.rail-slim .side nav a span, html.rail-slim .side nav a .nav-badge, html.rail-slim .side .who span:not(.avatar), html.rail-slim .side-out span { display: none; }
html.rail-slim .side nav { padding: 6px 0 18px; display: flex; flex-direction: column; align-items: center; }
html.rail-slim .side nav .nav-group { width: 100%; display: flex; flex-direction: column; align-items: center; }
html.rail-slim .side nav .nav-group.closed .nav-links { display: grid; }
html.rail-slim .side nav .nav-links { justify-items: center; gap: 4px; padding: 4px 0; }
html.rail-slim .side nav a { width: 48px; height: 48px; padding: 0; justify-content: center; border-radius: 50%; }
html.rail-slim .side nav a .nav-badge.urgent { display: block; position: absolute; top: 4px; right: 4px; min-width: 10px; width: 10px; height: 10px; padding: 0; font-size: 0; }
html.rail-slim .side nav .knob { border-radius: 50%; }
html.rail-slim .side-foot { margin: 0 12px 12px; padding: 10px 0; align-items: center; }
html.rail-slim .side-out { width: 40px; height: 40px; padding: 0; border-radius: 50%; }
html.rail-slim .side .who { justify-content: center; flex: none; }
.rail-tip { position: fixed; z-index: 200; pointer-events: none; background: #2A221D; color: #F4EEE6; font: 500 .8rem/1 var(--text); padding: 8px 11px; border-radius: 9px; white-space: nowrap;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .3); opacity: 0; transform: translate(-6px, -50%); transition: opacity .18s, transform .18s; }
.rail-tip.show { opacity: 1; transform: translate(0, -50%); }

.main { padding: 16px 16px 16px 18px; gap: 16px; }

/* Top bar: an espresso pill */
.top {
  position: sticky; top: 16px; z-index: 30; min-height: 60px; padding: 9px 10px 9px 10px; gap: 12px; border: 0; border-radius: 999px;
  background: var(--espresso); backdrop-filter: none; box-shadow: var(--dark-sh); color: #F4EEE6;
}
.top-hello { display: flex; align-items: center; gap: 11px; flex: 0 1 auto; min-width: 0; color: #F4EEE6; text-decoration: none; padding-right: 6px; }
.top-hello .avatar { width: 40px; height: 40px; }
.th-t { min-width: 0; display: grid; }
.th-t b { font-size: .92rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-t small { font-size: .76rem; color: #BFB2A6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top .qs-btn { flex: 1 1 260px; max-width: 520px; margin: 0 auto; min-width: 0; height: 42px; padding: 0 10px 0 14px; gap: 10px; border: 0; border-radius: 999px; background: #17120F; color: #E9E0D5;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .08); font: 500 .9rem var(--text); }
.top .qs-btn:hover { color: #fff; background: #1C1612; }
.qs-orb { flex: none; width: 20px; height: 20px; border-radius: 50%; background: conic-gradient(from 200deg, #C8402A, #F2B544, #5FA77B, #C8402A); box-shadow: 0 0 12px rgba(242, 181, 68, .5); animation: orb 6s linear infinite; }
@keyframes orb { to { transform: rotate(360deg); } }
.qs-hint { flex: 1; min-width: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-hint.typing::after { content: ""; display: inline-block; width: 2px; height: 15px; margin-left: 2px; vertical-align: -2px; background: var(--cheese); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.top .qs-btn kbd { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .12); color: #BFB2A6; }
.top-tools { flex: 0 0 auto; gap: 8px; flex-wrap: nowrap; }
@media (min-width: 961px) { .top > .only-m { display: none; } }
.top .chip { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .12); color: #E9E0D5; border-radius: 999px; }
.top .branch-switch select { height: 40px; border-radius: 999px; border: 0; background-color: #17120F; color: #F4EEE6; box-shadow: inset 0 2px 5px rgba(0, 0, 0, .55);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23BFB2A6' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.top .branch-switch select option { color: var(--ink); background: #fff; }
.top .btn.sm, .top-tools .btn.sm { height: 40px; border-radius: 999px; background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .12); color: #E9E0D5; box-shadow: none; }
.top .btn.sm:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.top .btn.on-shift { color: #9ED6B0; }
.top .icon-btn { color: #E9E0D5; }
.top .bell, body.kds .top .bell { width: 42px; height: 42px; border-radius: 50%; display: inline-grid; place-items: center; color: var(--ink); background: var(--knob);
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .18), 0 4px 10px rgba(0, 0, 0, .45); }
.top .bell.has { color: var(--tomato-d); }
.top .bell-n { top: -3px; right: -3px; box-shadow: 0 0 0 2px #2A221D; }
.top .bell.has .bell-n { animation: ping 1.8s ease-in-out infinite; }
@keyframes ping { 0%, 100% { box-shadow: 0 0 0 2px #2A221D, 0 0 0 2px rgba(200, 64, 42, .5); } 50% { box-shadow: 0 0 0 2px #2A221D, 0 0 0 8px rgba(200, 64, 42, 0); } }
.top .acct { width: 42px; height: 42px; }
.top .acct .avatar.sm { width: 38px; height: 38px; }

/* The page: a stone panel with a screw in each corner */
.content {
  position: relative; max-width: none; padding: 30px 34px 56px; border-radius: 30px; min-height: calc(100vh - 124px);
  background:
    radial-gradient(circle at 18px 18px, #fff 0 1.5px, #B9AFA2 2.5px 4.5px, transparent 5px) top left / 40px 40px no-repeat,
    radial-gradient(circle at 22px 18px, #fff 0 1.5px, #B9AFA2 2.5px 4.5px, transparent 5px) top right / 40px 40px no-repeat,
    radial-gradient(circle at 18px 22px, #fff 0 1.5px, #B9AFA2 2.5px 4.5px, transparent 5px) bottom left / 40px 40px no-repeat,
    radial-gradient(circle at 22px 22px, #fff 0 1.5px, #B9AFA2 2.5px 4.5px, transparent 5px) bottom right / 40px 40px no-repeat,
    linear-gradient(180deg, #F4F0EA 0%, #EBE5DD 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 0, 0, .04), 0 26px 52px -22px rgba(70, 52, 36, .38);
}
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 18px; flex-wrap: wrap; margin: 0 0 22px; }
.ph-t { min-width: 0; }
.page-head .crumb { display: block; margin: 0 0 4px; font: 500 .84rem/1.2 var(--text); letter-spacing: 0; text-transform: none; color: var(--muted); }
.page-head h1 { margin: 0; font: 650 2.05rem/1.1 var(--text); letter-spacing: -.028em; color: var(--ink); overflow-wrap: anywhere; }
.page-head .page-tools .btn.sm { height: 40px; padding: 0 16px; border-radius: 999px; }

/* Section tabs: a recessed track with a raised knob on the current screen */
.section-tabs { position: sticky; top: var(--top-h, 92px); z-index: 19; margin: -4px 0 22px; background: none; backdrop-filter: none; border: 0; }
.st-in { display: inline-flex; max-width: 100%; gap: 2px; padding: 4px; border-radius: 999px; background: #E3DCD2; box-shadow: var(--well); overflow-x: auto; scrollbar-width: none; }
.section-tabs a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 0; border-radius: 999px; color: var(--muted); font-weight: 600; font-size: .86rem; white-space: nowrap; text-decoration: none; transition: color .2s, background .2s, box-shadow .2s; }
.section-tabs a:hover { color: var(--ink); background: rgba(255, 255, 255, .45); }
.section-tabs a.on { color: var(--ink); background: var(--raised); box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(70, 52, 36, .22); }
.section-tabs a.on .ico { color: var(--tomato); }

/* ---------- Surfaces ---------- */
.panel { background: var(--raised); border: 1px solid rgba(255, 255, 255, .8); border-radius: var(--r-panel); box-shadow: var(--shadow); }
.panel + .panel, .panel + .cols, .cols + .panel, .kpis + .panel, .kpis + .cols, .tabs + .panel { margin-top: 20px; }
.cols { gap: 20px; }
.cols > div > .panel + .panel { margin-top: 20px; }
.kpis { gap: 14px; background: none; border: 0; box-shadow: none; overflow: visible; border-radius: 0; }
.kpi { background: var(--raised); border: 1px solid rgba(255, 255, 255, .8); border-radius: 18px; box-shadow: var(--shadow); padding: 17px 20px 18px; border-right: 1px solid rgba(255, 255, 255, .8); }
.kpi:last-child { border-right: 1px solid rgba(255, 255, 255, .8); }
.kpi span { color: var(--muted); }
.kpi b { font: 650 1.75rem/1.15 var(--text); letter-spacing: -.025em; color: var(--ink); }
.kpi.hot { background: var(--raised); box-shadow: var(--shadow), inset 0 3px 0 var(--tomato); }
.kpi.hot b { color: var(--ink); }
@media (max-width: 640px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .kpi { border-bottom: 1px solid rgba(255, 255, 255, .8); padding: 14px 15px; } .kpi b { font-size: 1.4rem; } }
.mini-kpis div { background: #E9E3DA; box-shadow: var(--well); border-radius: 14px; }
.mini-kpis b { font: 650 1.45rem var(--text); color: var(--ink); letter-spacing: -.02em; }
.tabs a.on { border-color: var(--tomato); }
.chip { background: var(--raised); border-color: #D6CDC1; }
.empty h2 { color: var(--ink); }

.flash { border-radius: 16px; box-shadow: var(--shadow); border: 1px solid rgba(255, 255, 255, .8); animation: drop .5s var(--ease-spring) both; }
.flash.ok { background: linear-gradient(180deg, #F1F8F2, #E1EFE5); color: #1F5A39; }
.flash.error { background: linear-gradient(180deg, #FBEEEA, #F4DDD7); color: #8A2A1E; }
.flash.warn { background: linear-gradient(180deg, #FCF4E4, #F5E7CB); color: #6E460D; }
@keyframes drop { from { opacity: 0; transform: translateY(-10px) scale(.98); } }

/* ---------- Controls ---------- */
.btn { border-radius: var(--r-ctl); border-color: #D3C9BC; background: var(--raised); color: var(--ink); box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(70, 52, 36, .12);
  transition: transform .12s, box-shadow .15s, background .15s, border-color .15s; }
.btn:hover { background: linear-gradient(180deg, #FFFFFF, #F4EFE8); border-color: #C5BAAC; }
.btn:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(70, 52, 36, .18); }
.btn.primary { background: linear-gradient(180deg, #D8553C, #B5361F); border-color: #A9321D; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 8px 18px -8px rgba(181, 54, 31, .7); }
.btn.primary:hover { background: linear-gradient(180deg, #DE5F45, #BC3B23); border-color: #A9321D; }
.btn.basil, .btn.dark { background: var(--espresso); border-color: #221B17; color: #F4EEE6; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 8px 18px -8px rgba(36, 29, 25, .7); }
.btn.basil:hover { background: linear-gradient(180deg, #453A33, #2A221D); border-color: #221B17; }
.btn.ghost { background: transparent; box-shadow: none; border-color: transparent; }
.btn.ghost:hover { background: rgba(255, 255, 255, .55); border-color: #D3C9BC; }
.btn.sm { border-radius: 10px; }
.btn.lg { border-radius: 14px; }
.btn.danger, .btn.bad { color: var(--bad); }
.icon-btn { border-radius: 50%; }
input, select, textarea { background-color: #FBF8F4; border-color: #D9D0C4; border-radius: var(--r-ctl); box-shadow: inset 0 1px 2px rgba(70, 52, 36, .09); }
input:hover, select:hover, textarea:hover { border-color: #C5BAAC; }
input:focus, select:focus, textarea:focus { border-color: var(--crust); box-shadow: inset 0 1px 2px rgba(70, 52, 36, .09), 0 0 0 3px rgba(201, 119, 46, .2); }
input::placeholder, textarea::placeholder { color: #9A8E83; }
input[type=checkbox], input[type=radio] { accent-color: var(--tomato); box-shadow: none; }
.money-in { background: #FBF8F4; border-color: #D9D0C4; box-shadow: inset 0 1px 2px rgba(70, 52, 36, .09); }
.money-in:focus-within { border-color: var(--crust); box-shadow: 0 0 0 3px rgba(201, 119, 46, .2); }
.money-in input { box-shadow: none; background: transparent; }
.switch span, .tswitch > span { background: #BDB2A5; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .22); transition: background .25s; }
.switch span::after, .tswitch > span::after { background: radial-gradient(circle at 35% 30%, #fff, #E4DCD1); box-shadow: 0 2px 4px rgba(0, 0, 0, .3); transition: transform .35s var(--ease-spring); }
.switch input:checked + span, .tswitch input:checked + span { background: var(--tomato); }
.pill-pick span { background: var(--raised); border-color: #D6CDC1; }
.pill-pick input:checked + span { border-color: var(--ink); background: var(--espresso); color: #F4EEE6; }
.check-card { background: var(--raised); border-color: #DCD3C7; }
.check-card:has(input:checked) { border-color: var(--tomato); background: #FBF0EC; }
.opt { background: var(--raised); }
.opt.on { border-color: var(--tomato); background: #FBEDE8; }
kbd { background: #EDE7DF; border-color: #D6CDC1; }

/* Tables */
th { color: var(--muted); }
td { border-color: var(--line-2); }
tbody tr { transition: background .15s; }
tbody tr:hover td { background: rgba(255, 255, 255, .55); }
.badge { border-radius: 999px; }

/* Bars and meters */
.bars .bar i { background: linear-gradient(180deg, #D6CDC1, #BCAF9F); border-radius: 9px 9px 3px 3px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 4px 8px -3px rgba(70, 52, 36, .35); }
.bars .bar.today i, .bars .bar i:hover { background: linear-gradient(180deg, #E06A47, #C8402A); }
.hbar .track { background: #E3DCD2; box-shadow: var(--well); height: 12px; border-radius: 999px; padding: 2px; }
.hbar .track i { border-radius: 999px; background: linear-gradient(90deg, #E2A04A, #C8402A); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }

/* Popovers, search, modals */
.pop-card, .qs-card, .modal-card { background: linear-gradient(180deg, #FDFBF8, #F3EEE7); border: 1px solid rgba(255, 255, 255, .85); border-radius: 22px; box-shadow: 0 30px 70px -24px rgba(36, 29, 25, .55), inset 0 1px 0 #fff; }
.pop-card { padding: 8px; transform-origin: top right; animation: pop .22s var(--ease-spring); }
.pop-list a:hover, .pop-item:hover, .qs-list a.sel, .qs-list a:hover { background: rgba(255, 255, 255, .8); box-shadow: 0 2px 6px rgba(70, 52, 36, .12); }
.qs-list a .ico { color: var(--tomato); }
.qs, .modal { background: rgba(36, 29, 25, .45); backdrop-filter: blur(4px); }
.qs-foot { background: transparent; }

/* ---------- Live orders on the dashboard: an espresso pass ---------- */
.rail { background: var(--espresso); border-radius: 22px; box-shadow: var(--dark-sh); color: #E9E0D5; }
.rail-wire { background: linear-gradient(#120E0B, #3A302A); }
.rail-stage { background: rgba(255, 255, 255, .08); color: #D9CFC4; }
.rail-stage.late { background: var(--tomato); }
.rail-foot, .rail-empty { color: #BFB2A6; }
.docket { background: linear-gradient(180deg, #FFFDF9, #F3EDE4); border-radius: 4px 4px 12px 12px; }

/* ---------- Kitchen: the dark board ---------- */
body.kds { background: var(--ground); }
body.kds .content { background:
    radial-gradient(circle at 18px 18px, #6B5D52 0 1.5px, #1A1411 2.5px 4.5px, transparent 5px) top left / 40px 40px no-repeat,
    radial-gradient(circle at 22px 18px, #6B5D52 0 1.5px, #1A1411 2.5px 4.5px, transparent 5px) top right / 40px 40px no-repeat,
    linear-gradient(180deg, #332A24 0%, #1E1814 100%); box-shadow: var(--dark-sh); color: #E9E0D5; }
body.kds .page-head h1 { color: #F4EEE6; }
body.kds .page-head .crumb, .kds-bar { color: #BFB2A6; }
body.kds .top { background: var(--espresso); border: 0; }
body.kds .chip, body.kds .branch-switch select { background-color: #17120F; border-color: transparent; color: #F4EEE6; }
.kds-btn, body.kds .page-tools .btn { background: rgba(255, 255, 255, .07); color: #E9E0D5; border-color: rgba(255, 255, 255, .14); box-shadow: none; }
.kds-btn:hover { background: rgba(255, 255, 255, .14); }
.ticket { background: linear-gradient(180deg, #FFFDF8, #F4EEE4); border-radius: 0 0 14px 14px; }
.ticket.late { box-shadow: 0 0 0 3px var(--tomato), 0 12px 26px -14px rgba(0, 0, 0, .7); }

/* ---------- Till: same stone, quicker and roomier ---------- */
body.page-pos .content { padding: 22px 22px 40px; }
body.page-pos .page-head { margin-bottom: 14px; }
body.page-pos .page-head h1 { font-size: 1.6rem; }

/* ---------- Phones and tablets ---------- */
@media (max-width: 960px) {
  body.app, html.rail-slim body.app { grid-template-columns: 1fr; }
  .side, html.rail-slim .side { position: fixed; inset: 10px auto 10px 10px; margin: 0; width: 280px; height: auto; border-radius: 28px; transform: translateX(calc(-100% - 20px)); }
  .nav-open .side { transform: none; }
  html.rail-slim .side-top { flex-direction: row; padding: 16px 12px 8px 16px; }
  html.rail-slim .side .brand span, html.rail-slim .side .nav-h, html.rail-slim .side nav a span, html.rail-slim .side .who span:not(.avatar), html.rail-slim .side-out span { display: revert; }
  html.rail-slim .side nav { display: block; padding: 6px 14px 18px; }
  html.rail-slim .side nav .nav-group { display: block; }
  html.rail-slim .side nav .nav-links { justify-items: stretch; }
  html.rail-slim .side nav a { width: auto; height: auto; padding: 9px 11px; justify-content: flex-start; border-radius: 14px; }
  html.rail-slim .side nav .knob { border-radius: 14px; }
  .rail-toggle { display: none; }
  .nav-open .scrim { background: rgba(36, 29, 25, .45); backdrop-filter: blur(2px); }
  .main { padding: 10px 10px 10px; gap: 10px; }
  .top { top: 10px; min-height: 56px; padding: 7px 8px; gap: 8px; flex-wrap: nowrap; }
  .top .only-m { width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #F4EEE6; flex: none; }
  .top-hello { flex: 1 1 auto; }
  .top-hello .avatar { display: none; }
  .th-t small { display: none; }
  .top .qs-btn { flex: none; width: 42px; padding: 0; justify-content: center; }
  .top .qs-btn .qs-hint, .top .qs-btn kbd { display: none; }
  .top-tools, body.kds .top-tools { display: flex; flex: none; margin-left: auto; gap: 6px; }
  .top::after { display: none; }
  .top > *, .top-tools > *, .top-tools .bell-pop, .top-tools .acct-pop, .top-tools > .chip, .top-tools .branch-switch, .top-tools > a.btn { order: 0; }
  .top-tools .branch-switch, .top-tools > .chip { flex: 0 1 auto; }
  .top-tools .branch-switch select { width: auto; max-width: 150px; min-width: 0; }
  .content { padding: 22px 18px 40px; border-radius: 24px; min-height: 0; }
  .page-head h1 { font-size: 1.6rem; }
  .tabbar { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); padding: 6px; border: 0; border-radius: 26px; background: var(--espresso); box-shadow: var(--dark-sh); }
  .tabbar a, .tabbar button { color: #CFC4B8; border-radius: 18px; transition: color .25s, background .25s; }
  .tabbar a.on { color: var(--ink); background: var(--knob); box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .14), 0 4px 10px rgba(0, 0, 0, .45); }
  .tabbar a.on .ico { color: var(--tomato); }
  .app:has(.tabbar) .content { padding-bottom: 40px; margin-bottom: 84px; }
}
@media (max-width: 560px) {
  .top-hello { display: none; }
  .top .qs-btn { margin: 0; }
  .top-tools .branch-switch select { max-width: 124px; padding-left: 12px; }
  .top-tools > .chip span { display: none; }
  .top .btn.sm.hide-s { display: none; }
  .page-head { align-items: stretch; }
  .page-head .page-tools { flex-basis: 100%; }
}
@media (max-width: 1280px) and (min-width: 961px) {
  .top { flex-wrap: nowrap; }
  .th-t small { display: none; }
  .top-tools > a.btn.sm { width: 40px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
}
@media (max-width: 1200px) and (min-width: 961px) { .top .qs-btn { flex: 0 1 300px; width: auto; padding: 0 10px 0 14px; justify-content: flex-start; } .top .qs-btn .qs-hint { display: block; } .top .qs-btn kbd { display: none; } }
@media (max-width: 1280px) and (min-width: 961px) {
  .app.page-pos { grid-template-columns: 1fr; background: var(--ground); }
  .page-pos .side { position: fixed; inset: 10px auto 10px 10px; margin: 0; height: auto; width: 280px; transform: translateX(calc(-100% - 20px)); }
  .page-pos.nav-open .side { transform: none; }
  .page-pos .top > .only-m { display: inline-grid; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #F4EEE6; }
}

/* ---------- Motion ---------- */
.content { animation: none; }
.st-rise { animation: rise .7s var(--ease-out) both; animation-delay: var(--d, 0ms); }
@keyframes rise { from { opacity: 0; transform: translateY(16px) scale(.988); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
.st-wait { opacity: 0; }
html.st-motion .bars .bar i { transform-origin: bottom; animation: grow .9s var(--ease-out) both; }
html.st-motion .hbar .track i { transform-origin: left; animation: growx 1.1s var(--ease-out) both; }
@keyframes grow { from { transform: scaleY(0); } }
@keyframes growx { from { transform: scaleX(0); } }
html.st-motion .bars .bar:nth-child(1) i { animation-delay: 300ms; } html.st-motion .bars .bar:nth-child(2) i { animation-delay: 340ms; }
html.st-motion .bars .bar:nth-child(3) i { animation-delay: 380ms; } html.st-motion .bars .bar:nth-child(4) i { animation-delay: 420ms; }
html.st-motion .bars .bar:nth-child(5) i { animation-delay: 460ms; } html.st-motion .bars .bar:nth-child(6) i { animation-delay: 500ms; }
html.st-motion .bars .bar:nth-child(7) i { animation-delay: 540ms; } html.st-motion .bars .bar:nth-child(8) i { animation-delay: 580ms; }
html.st-motion .bars .bar:nth-child(9) i { animation-delay: 620ms; } html.st-motion .bars .bar:nth-child(10) i { animation-delay: 660ms; }
html.st-motion .bars .bar:nth-child(11) i { animation-delay: 700ms; } html.st-motion .bars .bar:nth-child(12) i { animation-delay: 740ms; }
html.st-motion .bars .bar:nth-child(13) i { animation-delay: 780ms; } html.st-motion .bars .bar:nth-child(14) i { animation-delay: 820ms; }
html.st-motion .bars .bar:nth-child(n+15) i { animation-delay: 860ms; }
body.page-pos .bars .bar i, body.kds .bars .bar i { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .st-rise, .st-wait { animation: none !important; opacity: 1 !important; }
  .side nav .knob, .rail-toggle { transition: none !important; }
  .qs-orb { animation: none; }
}
@media print {
  body.app { background: #fff; display: block; }
  .side, .top, .tabbar, .section-tabs { display: none !important; }
  .main { padding: 0; }
  .content { background: #fff; box-shadow: none; padding: 0; border-radius: 0; }
  .panel, .kpi { box-shadow: none; background: #fff; border: 1px solid #ddd; }
}

/* =====================================================================
   2.0 polish: the till, surfaces that were still white, phones
   ===================================================================== */

/* ---------- Till: a dark category rail, raised food tiles, a raised order card ---------- */
@media (min-width: 1001px) {
  body.page-pos .pos { gap: 16px; grid-template-columns: minmax(0, 1fr) 390px; }
  body.page-pos .pos-menu { gap: 16px; grid-template-columns: 112px minmax(0, 1fr); overflow: visible; min-height: 0; }
  body.page-pos .pos-cats { background: var(--espresso); border: 0; border-radius: 26px; padding: 10px 8px; gap: 6px; box-shadow: var(--dark-sh); }
  body.page-pos .pos-cats button { color: #D9CFC4; border: 0; padding: 10px 4px 9px; border-radius: 18px; transition: background .2s, color .2s, transform .15s; }
  body.page-pos .pos-cats button:hover { background: rgba(255, 255, 255, .07); color: #fff; }
  body.page-pos .pos-cats button i { background: rgba(255, 255, 255, .08); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4); }
  body.page-pos .pos-cats button small { background: rgba(255, 255, 255, .1); color: #D9CFC4; }
  body.page-pos .pos-cats button.on { background: var(--knob); color: var(--ink); box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .14), 0 6px 14px rgba(0, 0, 0, .5); }
  body.page-pos .pos-cats button.on i { background: #fff; box-shadow: 0 1px 3px rgba(70, 52, 36, .25); }
  body.page-pos .pos-cats button.on small { background: var(--ink); color: #fff; }
  body.page-pos .pos-main { background: rgba(255, 255, 255, .28); border-radius: 26px; box-shadow: inset 0 1px 3px rgba(70, 52, 36, .12); overflow: hidden; }
  body.page-pos .pos-search { padding: 14px 18px 10px; }
  body.page-pos .pos-grid { padding: 0 18px 24px; }
  body.page-pos .pos-sec-h { margin: 0 0 10px; padding: 7px 12px; border-radius: 14px; background: rgba(246, 242, 236, .9); backdrop-filter: blur(8px); box-shadow: 0 1px 2px rgba(70, 52, 36, .08); }
  body.page-pos .pos-sec-h::after { display: none; }
  body.page-pos .pos-main { background: transparent; box-shadow: none; }
  body.page-pos .pos-cats button span { line-height: 1.25; padding-bottom: 1px; overflow-wrap: anywhere; }
  body.page-pos .pos-cats button { height: auto; min-height: 0; flex: none; }
  body.page-pos .pos-cart { border: 1px solid rgba(255, 255, 255, .85); border-radius: 26px; background: var(--raised); box-shadow: var(--shadow-lift); }
  body.page-pos .cart-foot { background: transparent; border-top: 1px solid var(--line-2); }
}
.pos-sec-h small { background: var(--raised); border-color: #D6CDC1; }
.tile { background: var(--raised); border: 1px solid rgba(255, 255, 255, .85); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden;
  transition: transform .2s var(--ease-out), box-shadow .2s, border-color .2s; }
.tile:hover { transform: translateY(-3px); border-color: #fff; box-shadow: var(--shadow-lift); }
.tile:active { transform: translateY(0) scale(.98); transition-duration: .08s; }
.tile .tile-pic img { transition: transform .45s var(--ease-out); }
.tile:hover .tile-pic img { transform: scale(1.06); }
.tile-body { border-top-width: 2px; }
.tile.has { border-color: var(--tomato); box-shadow: 0 0 0 2px rgba(200, 64, 42, .25), var(--shadow); }
.tile-n { background: var(--tomato); box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.seg { background: #E3DCD2; box-shadow: var(--well); border-radius: 999px; }
.seg button { border-radius: 999px; transition: color .2s, background .2s; }
.seg button.on { background: var(--raised); box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(70, 52, 36, .22); }
.pay-methods button { background: var(--raised); border-color: #D6CDC1; border-radius: 12px; transition: background .2s, color .2s; }
.pay-methods button.on { background: var(--espresso); border-color: #221B17; color: #F4EEE6; }
.cc-quick button { background: var(--raised); border-color: #D6CDC1; border-radius: 10px; }
.cc-quick button:first-child { background: var(--espresso); border-color: #221B17; }
.cash-calc, .hp-row { background: #E9E3DA; border-color: transparent; box-shadow: var(--well); }
.held-pop { background: linear-gradient(180deg, #FDFBF8, #F3EEE7); border-radius: 18px; }
.cart-line .rm:hover { background: var(--bad-soft); }
.cart-title .count { background: #E3DCD2; }
#place:disabled, .btn.primary:disabled { opacity: .45; box-shadow: none; }
@media (max-width: 1000px) {
  body.page-pos .pos { display: block; }
  body.page-pos .pos-cats { top: var(--top-h, 76px); margin: 0 -4px 6px; padding: 8px 4px; background: rgba(240, 235, 228, .94); backdrop-filter: blur(8px); border: 0; border-radius: 0; }
  body.page-pos .pos-cats button { background: var(--raised); border: 1px solid rgba(255, 255, 255, .85); box-shadow: 0 2px 6px rgba(70, 52, 36, .14); color: var(--ink); }
  body.page-pos .pos-cats button.on { background: var(--espresso); color: #F4EEE6; border-color: #221B17; }
  body.page-pos .pos-cats button.on small { color: #F4EEE6; background: rgba(255, 255, 255, .15); }
  body.page-pos .pos-search { padding: 8px 0; }
  body.page-pos .pos-grid { padding: 0 0 110px; }
  body.page-pos .pos-cart { border-radius: 22px; margin-top: 16px; background: var(--raised); box-shadow: var(--shadow); border: 1px solid rgba(255, 255, 255, .85); }
  body.page-pos .content { padding: 18px 14px 30px; }
  .m-cartbar { border-radius: 22px !important; background: var(--espresso) !important; box-shadow: var(--dark-sh) !important; }
}

/* ---------- Surfaces that were plain white ---------- */
.shop-card, .checklist label.check, details.fold, .tbl, .qr-card, .fc-day, .food-card, .pv-card, .person, .stepper li, .ns-day, .tag-pill, .seg-chip, .cchip, .shop-cats a {
  background: var(--raised); border-color: rgba(255, 255, 255, .85); box-shadow: var(--shadow);
}
.food-card, .person, .tbl, .qr-card, .shop-card { border-radius: 20px; transition: transform .2s var(--ease-out), box-shadow .2s; }
.food-card:hover, .person:hover, .tbl:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.seg-chip, .tag-pill, .cchip { box-shadow: 0 1px 3px rgba(70, 52, 36, .12); }
.seg-chip.on, .seg-chip[aria-pressed=true] { background: var(--espresso); color: #F4EEE6; border-color: #221B17; }
.search-box { background: #FBF8F4; border-color: #D9D0C4; box-shadow: inset 0 1px 2px rgba(70, 52, 36, .09); border-radius: 999px; }
.search-box:focus-within { border-color: var(--crust); box-shadow: 0 0 0 3px rgba(201, 119, 46, .2); }
.set-nav a.on { background: var(--raised); box-shadow: var(--shadow); }
.set-nav a:hover { background: rgba(255, 255, 255, .55); }

/* Forecast: stone history, tomato for the day you picked */
.fc-day { border-radius: 16px; transition: transform .2s var(--ease-out), box-shadow .2s; }
.fc-day:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.fc-day i { background: linear-gradient(180deg, #D6CDC1, #BCAF9F); border-radius: 8px 8px 3px 3px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55); }
.fc-day.on { border-color: var(--tomato); box-shadow: 0 0 0 2px rgba(200, 64, 42, .25), var(--shadow); }
.fc-day.on i { background: linear-gradient(180deg, #E06A47, #C8402A); }
html.st-motion .fc-day i { transform-origin: bottom; animation: grow .9s var(--ease-out) both .3s; }

/* Save bars that stay at the bottom while you scroll */
.save-bar, .sticky-bar, .matrix-save { background: rgba(42, 34, 29, .94); color: #E9E0D5; border: 0; border-radius: 18px; box-shadow: var(--dark-sh); backdrop-filter: blur(8px); padding: 10px 12px 10px 18px; }
.save-bar .muted, .sticky-bar .muted, .matrix-save .muted, .save-bar small, .sticky-bar small { color: #BFB2A6; }
.matrix-save { bottom: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.matrix-save .btn:not(.primary), .save-bar .btn:not(.primary), .sticky-bar .btn:not(.primary) { background: rgba(255, 255, 255, .08); color: #F4EEE6; border-color: rgba(255, 255, 255, .16); box-shadow: none; }
.matrix-save a, .save-bar a, .sticky-bar a:not(.btn) { color: #F2C77E; }

/* Lists of things that need attention: label on top, words full width, actions on the right */
.alert-list li:has(> .badge:first-child) { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 8px; align-items: start; }
.alert-list li:has(> .badge:first-child) > .badge:first-child { grid-column: 1; justify-self: start; }
.alert-list li:has(> .badge:first-child) > span:nth-child(2) { grid-column: 1; grid-row: 2; }
.alert-list li:has(> .badge:first-child) > :not(.badge):not(span:nth-child(2)) { grid-row: 1 / span 2; align-self: center; }
.alert-list li { border-bottom-color: var(--line); }

/* Numbers and short values never break across lines */
td.num, td.r, .badge, .chip, td .badge { white-space: nowrap; }
.kpis { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* Timeline hour labels thin out on phones */
@media (max-width: 480px) { .tl-hours em:nth-child(even) { display: none; } .tl-hours em:nth-child(4n+3) { display: none; } }

/* ---------- Phones: tables scroll sideways instead of squashing words ---------- */
@media (max-width: 1100px) {
  .auto-scroll > table, .table-wrap > table { width: max-content; min-width: 100%; }
  .auto-scroll > table th, .table-wrap > table th { white-space: nowrap; }
  .auto-scroll { scrollbar-width: thin; }
}
@media (max-width: 700px) {
  .fc-top { flex-wrap: wrap; gap: 2px 8px; }
  .fc-top h3 { font-size: 1rem; }
  .food-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .filters > a.btn, .filters > .btn.ghost { justify-content: center; }
  .section-tabs { margin-left: -2px; margin-right: -2px; }
}

@media (min-width: 1001px) and (max-width: 1280px) { body.page-pos .pos-menu { grid-template-columns: 106px minmax(0, 1fr); gap: 12px; } body.page-pos .pos { gap: 12px; grid-template-columns: minmax(0, 1fr) 350px; } }

/* The wire the dockets hang from belongs to the docket row, so it never crosses the stage pills when they wrap */
.rail-wire { display: none; }
.rail-track { background: linear-gradient(#120E0B, #3A302A) 0 0 / 100% 4px no-repeat; }
@media (max-width: 960px) { .tl-hours em:nth-child(even) { display: none; } }

/* ---------- Scrolling menus: thin bars, soft fades where more is hidden, arrows on sideways rows ---------- */
.side, .pos-cats, .st-in, .content .tabs { scrollbar-width: thin; }
.side::-webkit-scrollbar, .pos-cats::-webkit-scrollbar { width: 6px; }
.side::-webkit-scrollbar-thumb, body.page-pos .pos-cats::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 6px; }
.st-in::-webkit-scrollbar, .content .tabs::-webkit-scrollbar { height: 0; }
.st-in, .content .tabs { scrollbar-width: none; scroll-behavior: smooth; }
.content .tabs { overflow-x: auto; flex-wrap: nowrap; }
.scr-y.scr-b { -webkit-mask-image: linear-gradient(#000 calc(100% - 44px), transparent); mask-image: linear-gradient(#000 calc(100% - 44px), transparent); }
.scr-y.scr-a { -webkit-mask-image: linear-gradient(transparent, #000 44px); mask-image: linear-gradient(transparent, #000 44px); }
.scr-y.scr-a.scr-b { -webkit-mask-image: linear-gradient(transparent, #000 44px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(transparent, #000 44px, #000 calc(100% - 44px), transparent); }
.scr-x.scr-b { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
.scr-x.scr-a { -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px); mask-image: linear-gradient(90deg, transparent, #000 56px); }
.scr-x.scr-a.scr-b { -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); }
.scr-wrap { position: relative; min-width: 0; max-width: 100%; }
.section-tabs .scr-wrap { display: inline-block; vertical-align: top; }
.scr-btn { position: absolute; z-index: 4; width: 30px; height: 30px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--ink);
  background: var(--knob); box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .14), 0 3px 8px rgba(36, 29, 25, .35); transition: transform .15s, opacity .2s; }
.scr-btn:hover { transform: scale(1.08); }
.scr-btn:active { transform: scale(.94); }
.scr-btn[hidden] { display: none; }
.scr-wrap.scr-x > .scr-btn { top: 50%; margin-top: -15px; }
.scr-wrap.scr-x > .scr-prev { left: 2px; }
.scr-wrap.scr-x > .scr-next { right: 2px; }
.scr-wrap.scr-y > .scr-btn { left: 50%; margin-left: -15px; }
.scr-wrap.scr-y > .scr-prev { top: 4px; transform: rotate(90deg); }
.scr-wrap.scr-y > .scr-next { bottom: 4px; transform: rotate(90deg); }
.scr-wrap.scr-y > .scr-btn:hover { transform: rotate(90deg) scale(1.08); }
/* the till's category rail keeps its place in the grid */
body.page-pos .scr-cats { display: flex; flex-direction: column; min-height: 0; }
body.page-pos .scr-cats > .pos-cats { flex: 1; min-height: 0; }
@media (max-width: 1000px) { body.page-pos .scr-cats { position: sticky; top: var(--top-h, 76px); z-index: 12; } body.page-pos .scr-cats > .pos-cats { position: static; } }
@media (hover: none) { .scr-wrap.scr-x > .scr-btn { width: 26px; height: 26px; margin-top: -13px; } }

/* ---------- Scrolling menus: the side menu, section tabs, till categories ---------- */
.side { overflow: hidden; }
.side nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scroll-behavior: smooth;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.side nav::-webkit-scrollbar, .pos-cats::-webkit-scrollbar { width: 6px; height: 6px; }
.side nav::-webkit-scrollbar-thumb, body.page-pos .pos-cats::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .2); border-radius: 6px; }
.side nav::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .34); }
.side nav::-webkit-scrollbar-track, .pos-cats::-webkit-scrollbar-track { background: transparent; }
.side-top, .side-foot { flex: none; }
@media (min-width: 1001px) { body.page-pos .pos-cats { display: flex; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; overscroll-behavior: contain; } body.page-pos .pos-cats::-webkit-scrollbar { display: block; } }

@media print { .scr-btn { display: none !important; } .scr-x, .scr-y { -webkit-mask-image: none !important; mask-image: none !important; } }

/* ---------- Till categories: one row of pills at the top, › and ‹ to scroll it ---------- */
body.page-pos .pos-menu, body.page-pos .pos-menu[class] { display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow: visible; }
body.page-pos .scr-cats { display: block; flex: none; min-width: 0; }
body.page-pos .pos-cats, body.page-pos .scr-cats > .pos-cats { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 10px; height: auto; min-height: 0;
  overflow-x: auto; overflow-y: hidden; padding: 4px 2px 6px; margin: 0; background: none; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; scrollbar-width: none; scroll-behavior: smooth; }
body.page-pos .pos-cats::-webkit-scrollbar { display: none; }
body.page-pos .pos-cats button { flex: none; flex-direction: row; align-items: center; gap: 8px; height: 44px; min-height: 0; padding: 0 12px 0 12px; border-radius: 999px;
  border: 1px solid #E2DAD0; background: #FDFBF8; color: var(--ink); font: 600 .95rem/1 var(--text); white-space: nowrap; text-align: left; box-shadow: 0 1px 2px rgba(70, 52, 36, .1);
  transition: background .2s, color .2s, border-color .2s, transform .15s, box-shadow .2s; }
body.page-pos .pos-cats button:hover { border-color: #CFC4B8; background: #fff; color: var(--ink); transform: translateY(-1px); box-shadow: 0 4px 10px -4px rgba(70, 52, 36, .3); }
body.page-pos .pos-cats button:active { transform: translateY(0) scale(.97); }
body.page-pos .pos-cats button i { width: auto; height: auto; min-width: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; font-size: 1.05rem; line-height: 1; }
body.page-pos .pos-cats button i img { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; }
body.page-pos .pos-cats button[data-c="0"] i { display: none; }
body.page-pos .pos-cats button span { display: inline; -webkit-line-clamp: unset; overflow: visible; line-height: 1; padding: 0; }
body.page-pos .pos-cats button small { min-width: 22px; padding: 3px 7px; border-radius: 999px; background: #EEE9E2; color: #6B6057; font: 700 .76rem/1 var(--text); text-align: center; }
body.page-pos .pos-cats button.on, body.page-pos .pos-cats button.on:hover { background: #2A221D; border-color: #2A221D; color: #fff; box-shadow: 0 6px 14px -6px rgba(36, 29, 25, .7); transform: none; }
body.page-pos .pos-cats button.on small { background: rgba(255, 255, 255, .18); color: #fff; }
body.page-pos .pos-main { flex: 1 1 auto; min-height: 0; }
/* the round › ‹ buttons sit on the ends of the row */
body.page-pos .scr-cats.scr-x > .scr-btn { display: grid; width: 34px; height: 34px; margin-top: -19px; }
body.page-pos .scr-cats.scr-x > .scr-btn[hidden] { display: none; }
body.page-pos .scr-cats.scr-x > .scr-prev { left: -2px; }
body.page-pos .scr-cats.scr-x > .scr-next { right: -2px; }
@media (max-width: 1000px) {
  body.page-pos .scr-cats { position: sticky; top: var(--top-h, 76px); z-index: 12; margin: 0 -4px; padding: 6px 4px 2px; background: rgba(240, 235, 228, .94); backdrop-filter: blur(8px); }
  body.page-pos .pos-cats button { height: 40px; font-size: .9rem; }
}
@media (min-width: 1001px) {
  body.page-pos .pos-search { padding: 0 2px 10px; }
  body.page-pos .pos-grid { padding: 0 2px 24px; }
}