/* ÉLUNA POS — "Cherry" design system (claude.ai Design canvas "ÉLUNA POS — Cherry", 2026-10-19).
   Loaded after every other stylesheet, so it sets the look of the whole app; the older rules only keep layout. */
@font-face{font-family:"Playfair Display";src:url("../assets/fonts/PlayfairDisplay-Variable.ttf") format("truetype");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("../assets/fonts/PlayfairDisplay-Italic-Variable.ttf") format("truetype");font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:Trirong;src:url("../assets/fonts/Trirong-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:Trirong;src:url("../assets/fonts/Trirong-Medium.ttf") format("truetype");font-weight:500;font-display:swap}

:root{
  --bg:#F8F6F1;--surface:#FFFFFF;--surface-2:#EAE2D7;--surface-3:#F3EEE7;--tint:#EFE7DC;
  --detail:#B6A08B;--primary:#8E7156;--primary-hover:#7A5F47;--primary-ink:#5C4634;--on-primary:#FFFDF9;
  --ink:#39342F;--ink-2:#6B6157;--line:#E6DFD4;--line-strong:#DED5C8;--line-input:#D9CFC1;--line-faint:#EEE8DF;
  --ok:#2F6B45;--ok-bg:#E6F0E9;--bad:#B42318;--bad-bg:#FBE9E7;--warn:#8A5A0B;--warn-bg:#FFF3D6;--info:#2F5E8A;--info-bg:#EEF3F8;
  --rail-w:5.5rem;--top-h:4rem;--cart-w:23.75rem;
  /* names the older rules use */
  --card:var(--surface);--muted:var(--ink-2);--brand:var(--primary);--brand2:var(--primary);--gold:var(--detail);--soft:var(--tint)
}

/* ---------- base ---------- */
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);letter-spacing:0;-webkit-tap-highlight-color:transparent}
body:before{display:none!important}
body .serif,body .serif *{font-family:"Playfair Display",Georgia,serif!important}
body .thai-serif{font-family:Trirong,"Playfair Display",Georgia,serif!important}
.num,.price,.stat .v,td.right,.right{font-variant-numeric:tabular-nums}
h1,h2,h3,h4{color:var(--ink);letter-spacing:0}
a{color:var(--primary)}a:hover{color:var(--primary-ink)}
.muted{color:var(--ink-2)!important}.ok{color:var(--ok)}.bad{color:var(--bad)}.warn{color:var(--warn)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* ---------- app shell: dark rail + top bar ---------- */
.app{min-height:0}
.shell{display:flex;height:100vh;height:100dvh;overflow:hidden;background:var(--bg)}
.rail{width:var(--rail-w);flex:none;background:var(--ink);display:flex;flex-direction:column;align-items:center;gap:0.25rem;padding:1rem 0 calc(0.875rem + env(safe-area-inset-bottom));overflow-y:auto;overflow-x:hidden;scrollbar-width:none;z-index:30}
.rail::-webkit-scrollbar{display:none}
.rail-logo{width:3rem;height:3rem;flex:none;margin-bottom:0.75rem;border-radius:50%;border:1px solid var(--detail);display:grid;place-items:center;overflow:hidden;color:#F8F6F1;font-size:1.5rem;background:transparent}
.rail-logo img{width:100%;height:100%;object-fit:contain;background:#fff}
.rail-items{display:flex;flex-direction:column;gap:0.25rem;align-items:center}
.rail-spacer{flex:1;min-height:0.5rem}
.nav-i{width:4.5rem;min-height:3.75rem;flex:none;border:0;border-radius:0.875rem;background:transparent;color:#D9D1C6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.1875rem;font-size:0.75rem;font-weight:400;line-height:1.2;padding:0.375rem 2px;text-align:center}
.nav-i svg{width:1.375rem;height:1.375rem;flex:none}
.nav-i:hover{background:rgba(247,243,238,.08);color:#F8F6F1}
.nav-i.on{background:#F8F6F1;color:var(--primary-ink);font-weight:600}
.workspace{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}
.top{position:relative!important;top:auto!important;flex:none;z-index:20;background:var(--surface-3)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-bottom:1px solid var(--line-strong)!important;box-shadow:none!important;padding:0!important}
.toprow{max-width:none!important;margin:0!important;min-height:var(--top-h);display:flex!important;align-items:center;gap:0.75rem;flex-wrap:nowrap!important;padding:0.5rem 1.25rem 0.5rem 1.5rem;row-gap:0.5rem}
.top .brand{flex:none!important;font-size:1.25rem!important;line-height:1!important;letter-spacing:.14em!important;color:var(--primary)!important;white-space:nowrap}
.top .brand:first-letter{color:var(--detail)!important}
.top-sep{width:1px;height:1.125rem;background:#CFC4B5;flex:none}
.page-title{margin:0;font-size:1.125rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.top-date{font-size:0.8125rem;color:var(--ink-2);white-space:nowrap}
.top-flex{flex:1;min-width:0.5rem}
.net-chip{display:inline-flex;align-items:center;gap:0.375rem;height:2rem;padding:0 0.75rem;border-radius:62.4375rem;background:var(--ok-bg);color:var(--ok);font-size:0.8125rem;font-weight:500;white-space:nowrap;flex:none}
.net-chip:before{content:"";width:0.5rem;height:0.5rem;border-radius:50%;background:currentColor}
.net-chip.off{background:var(--bad-bg);color:var(--bad)}
.net-banner{flex:none;min-height:2.5rem;display:flex;align-items:center;gap:0.625rem;padding:0.5rem 1.5rem;background:var(--bad);color:#fff;font-size:0.875rem;font-weight:500}
.pending-slot:empty{display:none}
.pending-banner{flex:none;min-height:2.75rem;display:flex;align-items:center;gap:0.625rem;padding:0.375rem 0.75rem 0.375rem 1.5rem;background:var(--warn-bg);color:var(--warn);font-size:0.875rem;font-weight:500;border-bottom:1px solid #F0DDB0}
.pending-banner[hidden]{display:none!important}
.pending-banner span{flex:1}
.pending-banner .btn{background:var(--warn)!important;color:#fff!important;border:0!important;height:2.125rem;min-height:2.125rem;padding:0 0.875rem;font-size:0.8125rem}
.header-tools{display:flex;align-items:center;gap:0.5rem;flex-wrap:nowrap!important;justify-content:flex-end}
.header-tools .btn.small{height:2.5rem;min-height:2.5rem}
.cloud-state{display:inline-flex!important;align-items:center;gap:0.5rem;height:2.5rem!important;max-width:17.5rem!important;padding:0 0.625rem 0 0.25rem!important;border-radius:62.4375rem!important;border:1px solid var(--line-strong)!important;background:#fff!important;color:var(--ink)!important;font-size:0.875rem!important}
.cloud-state:before{display:none!important}
.cloud-state .avatar{width:2rem;height:2rem;flex:none;border-radius:50%;background:var(--primary);color:#F8F6F1;display:grid;place-items:center;font-weight:600;font-size:0.8125rem}
.cloud-state .avatar.staff{background:var(--tint);color:var(--primary-ink)}
.cloud-state .chip-name{font-weight:500;overflow:hidden;text-overflow:ellipsis}
.cloud-state .chip-role{font-size:0.75rem;color:var(--ink-2)}
.trial-banner{display:flex!important;justify-content:center;align-items:center;gap:0.75rem;flex-wrap:wrap;margin:0!important;min-height:2.25rem;padding:0.25rem 1rem!important;border:0!important;border-radius:0!important;background:#FFE7A3!important;color:#6B4508!important;font-size:0.8125rem;font-weight:600;letter-spacing:.02em}
.trial-banner .btn{height:1.75rem;min-height:1.75rem;padding:0 0.625rem;font-size:0.75rem;background:rgba(255,255,255,.7)!important;border:1px solid #E5C76A!important;color:#6B4508!important}
.main{flex:1;min-height:0;max-width:none!important;margin:0!important;padding:1.25rem 1.5rem 2rem!important;overflow-y:auto;-webkit-overflow-scrolling:touch}
.main>*{max-width:80rem;margin-left:auto;margin-right:auto}

/* sub navigation inside a section (สต๊อก / เมนู / เงินร้าน) */
.subnav{display:flex;gap:0.25rem;padding:0.25rem;border-radius:0.875rem;background:var(--surface-2);width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none;margin:0 0 1rem 0!important}
.subnav::-webkit-scrollbar{display:none}
.subnav button{height:2.5rem;padding:0 1rem;border:0;border-radius:0.625rem;background:transparent;color:var(--ink-2);font-size:0.875rem;white-space:nowrap;flex:none}
.subnav button.on{background:#fff;color:var(--primary);font-weight:600;box-shadow:0 1px 0.1875rem rgba(59,42,36,.12)}

/* ---------- surfaces ---------- */
.card{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:1.25rem!important;padding:1.25rem!important;box-shadow:none!important}
.card h2,.card h3,.modalbox h2,.report h1,.report h2,.recipe-group-title h2,.recipe-dropzone-head h3,.sop-editor h3{font-family:inherit;color:var(--ink)!important;letter-spacing:0!important}
.card h2{font-size:1.375rem!important;font-weight:600!important;margin:0 0 0.75rem}
.card h3{font-size:1rem!important;font-weight:600!important;margin:1rem 0 0.625rem}
.card h3:first-child{margin-top:0}
.section-title{border-bottom:0!important;padding-bottom:0!important;margin-bottom:0.875rem!important;gap:0.75rem;flex-wrap:wrap}
.grid{gap:1rem!important}
.notice{background:var(--info-bg)!important;color:var(--info)!important;border:0!important;border-left:0!important;border-radius:0.75rem!important;padding:0.625rem 0.875rem!important;font-size:0.8125rem!important;line-height:1.55}
p.bad,.bad.notice{color:var(--bad)}
.empty{color:var(--ink-2)!important;padding:2.25rem 1rem!important;font-size:0.9375rem}
.pill{display:inline-flex;align-items:center;gap:0.3125rem;height:1.5rem;padding:0 0.5625rem!important;border-radius:62.4375rem!important;background:#F1EAE3!important;color:#5E554C!important;border:0!important;font-size:0.75rem!important;font-weight:500!important;white-space:nowrap}
.badge{display:inline-flex;align-items:center;gap:0.3125rem;height:1.5rem;padding:0 0.5625rem;border-radius:62.4375rem;font-size:0.75rem;font-weight:500;white-space:nowrap}
.b-ok{background:var(--ok-bg);color:var(--ok)}.b-bad{background:var(--bad-bg);color:var(--bad)}.b-warn{background:var(--warn-bg);color:var(--warn)}.b-neu{background:#F1EAE3;color:#5E554C}.b-brand{background:var(--tint);color:var(--primary-ink)}.b-info{background:var(--info-bg);color:var(--info)}.b-out{background:#ECE6E1;color:#5E5450}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;min-height:3rem;padding:0 1.125rem!important;border-radius:0.875rem!important;border:1px solid transparent!important;background:var(--primary)!important;color:var(--on-primary)!important;font-size:0.9375rem!important;font-weight:500!important;line-height:1.2;text-decoration:none;box-shadow:none!important;text-shadow:none!important;transition:background .15s,transform .1s!important;white-space:normal}
.btn:hover:not(:disabled){background:var(--primary-hover)!important;transform:none!important}
.btn:active:not(:disabled){transform:scale(.98)!important}
.btn:disabled{background:#C4B8AA!important;color:#FFFDF9!important;opacity:1}
.btn.secondary{background:#fff!important;color:var(--ink)!important;border-color:var(--line-strong)!important}
.btn.secondary:hover:not(:disabled){background:var(--surface-3)!important}
.btn.secondary:disabled{color:#B5AA9D!important;background:#fff!important}
.btn.outline{background:#fff!important;color:var(--primary)!important;border-color:var(--primary)!important}
.btn.ghost{background:transparent!important;color:var(--primary)!important}
.btn.ok{background:var(--ok)!important;color:#fff!important}
.btn.ok:hover:not(:disabled){background:#265a39!important}
.btn.danger{background:var(--bad)!important;color:#fff!important}
.btn.danger:hover:not(:disabled){background:#971d14!important}
.btn.small{min-height:2.375rem!important;height:auto;padding:0.25rem 0.75rem!important;font-size:0.8125rem!important;border-radius:0.625rem!important}
.btn.lock{background:var(--surface-3)!important;color:var(--ink-2)!important;border:1px dashed var(--detail)!important}
.actions{gap:0.5rem!important}
.spin{display:inline-block;width:1.125rem;height:1.125rem;border-radius:50%;border:2px solid rgba(255,248,242,.35);border-top-color:#FFFDF9;animation:eluna-spin .8s linear infinite}
@keyframes eluna-spin{to{transform:rotate(360deg)}}

/* ---------- fields ---------- */
.field{gap:0.375rem!important;margin-bottom:0.75rem!important}
.field label{color:var(--ink)!important;text-transform:none!important;letter-spacing:0!important;font-size:0.8125rem!important;font-weight:500!important}
.field input:not([type=checkbox]):not([type=radio]),.field select,.field textarea,.recipe-qty input,.recipe-add-line select,.recipe-add-line input,input.input,select.input{min-height:3rem;border:1px solid var(--line-input)!important;border-radius:0.75rem!important;background:#fff!important;color:var(--ink)!important;font-size:1rem!important;padding:0.625rem 0.875rem!important;box-shadow:none!important}
.field textarea{line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus,input.input:focus{outline:0!important;border-color:var(--primary)!important;box-shadow:0 0 0 1px var(--primary)!important}
.field input[readonly]{background:var(--surface-3)!important;color:var(--ink-2)!important}
input[type=checkbox],input[type=radio]{accent-color:var(--primary)}
progress{accent-color:var(--primary)!important}

/* ---------- tables ---------- */
table{border:1px solid var(--line)!important;border-radius:1rem!important;background:#fff!important;border-collapse:separate!important;border-spacing:0;overflow:hidden}
th{background:var(--surface-3)!important;color:var(--ink-2)!important;text-transform:none!important;letter-spacing:0!important;font-size:0.75rem!important;font-weight:500!important;padding:0.625rem 0.875rem!important;border-bottom:1px solid var(--line-strong)!important}
td{padding:0.75rem 0.875rem!important;border-bottom:1px solid var(--line-faint)!important;font-size:0.875rem}
tr:last-child td{border-bottom:0!important}
tr:hover td{background:#FCFAF7!important}
.report-table-wrap{border-radius:1rem}

/* ---------- stat tiles ---------- */
.stats{gap:0.875rem!important}
.stat{background:#fff!important;border:1px solid var(--line)!important;border-radius:1.25rem!important;padding:1rem 1.125rem!important;box-shadow:none!important}
.stat:before{display:none!important}
.stat .muted{font-size:0.8125rem}
.stat .v{font-family:inherit!important;color:var(--ink)!important;font-size:1.5rem!important;font-weight:600!important;margin-top:0.25rem}
.stat .v.bad{color:var(--bad)!important}.stat .v.ok{color:var(--ok)!important}

/* ---------- sheets (modal) ---------- */
.modal{background:rgba(30,27,24,.48)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;align-items:center!important;padding:1rem!important}
.modalbox{background:#fff!important;border:0!important;border-radius:1.5rem!important;box-shadow:0 1.875rem 4.375rem rgba(30,27,24,.35)!important;padding:1.5rem!important;width:min(45rem,100%)}
.modalbox h2{font-size:1.375rem!important;font-weight:600!important;margin:0 0 0.75rem}
.modalbox>.finance-form>h2:first-child,.modalbox>h2:first-child{padding-right:0.5rem}
#fin-error:empty{display:none}
#fin-error{margin-top:0.625rem;padding:0.625rem 0.875rem;border-radius:0.75rem;background:var(--bad-bg);color:var(--bad);font-size:0.875rem}

/* ---------- toast ---------- */
.eluna-toast{background:var(--ink)!important;color:#fff!important;border-radius:0.875rem!important;font-weight:500!important;padding:0.75rem 1.125rem 0.75rem 2.875rem!important;font-size:0.9375rem;box-shadow:0 0.625rem 1.875rem rgba(57,52,47,.3)!important}
.eluna-toast:before{content:"✓";position:absolute;left:0.875rem;top:50%;transform:translateY(-50%);width:1.5rem;height:1.5rem;border-radius:50%;background:var(--ok);display:grid;place-items:center;font-size:0.8125rem;font-weight:700}

/* ---------- POS: menu grid + cart ---------- */
.main:has(>.pos-layout){padding:0!important;overflow:hidden;display:flex;flex-direction:column}
.main:has(>.pos-layout)>*{max-width:none}
.main:has(>.pos-layout)>.shift-bar{margin:0.75rem 1.25rem 0!important;flex:none}
.pos-layout{flex:1;min-height:0;display:flex;position:relative;width:100%}
.pos-menu{flex:1;min-width:0;display:flex;flex-direction:column}
.pos-toolbar{display:flex;align-items:center;gap:0.5rem;padding:1rem 1.25rem 0.75rem;flex-wrap:wrap}
.pos-search{position:relative;display:flex;align-items:center;flex:1 1 12.5rem;max-width:17.5rem}
.pos-search svg{position:absolute;left:0.75rem;color:var(--ink-2);pointer-events:none}
.pos-search input{width:100%;height:2.75rem;padding:0 0.75rem 0 2.375rem;border-radius:0.75rem;border:1px solid var(--line-input);background:#fff;font-size:1rem;color:var(--ink);outline:0}
.pos-search input:focus{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.pos-cats{display:flex;gap:0.375rem;overflow-x:auto;scrollbar-width:none;max-width:100%}
.pos-cats::-webkit-scrollbar{display:none}
.chip{height:2.625rem;padding:0 0.9375rem;border-radius:62.4375rem;border:1px solid var(--line-strong);background:#fff;color:var(--ink);font-size:0.875rem;font-weight:500;white-space:nowrap;flex:none}
.chip.on{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.chip.soft.on{background:var(--tint);color:var(--primary-ink);border-color:var(--primary)}
.chip.sm{height:2.125rem;padding:0 0.75rem;font-size:0.8125rem}
.pos-tool-gap{flex:1}
.pos-arrange-bar{display:none;align-items:center;gap:0.625rem;margin:0 1.25rem 0.625rem;padding:0.625rem 0.875rem;border-radius:0.875rem;background:var(--tint);color:var(--primary-ink);font-size:0.875rem}
.pos-arrange-bar span{flex:1}
.pos-layout.arranging .pos-arrange-bar{display:flex}
.pos-scroll{flex:1;min-height:0;overflow-y:auto;padding:0.25rem 1.25rem 1.25rem;-webkit-overflow-scrolling:touch}
.products.pos-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(9.375rem,1fr))!important;gap:0.75rem!important}
.pos-item{position:relative;min-width:0}
.product{position:relative;width:100%;height:100%;min-height:0!important;text-align:left;padding:0!important;border-radius:1rem!important;border:1px solid var(--line)!important;background:#fff!important;overflow:hidden;display:flex!important;flex-direction:column;box-shadow:0 1px 2px rgba(59,42,36,.05)!important;transition:transform .1s!important;color:var(--ink)}
.product:not(:disabled):hover{transform:none!important;border-color:var(--detail)!important;box-shadow:0 1px 2px rgba(59,42,36,.05)!important}
.product:not(:disabled):active{transform:scale(.97)!important}
.product:disabled{opacity:.55!important;filter:none!important;background:#fff!important}
.product img,.product .ph{width:100%;height:6.25rem!important;object-fit:cover;flex:none}
.product .ph{display:grid!important;place-items:center;background:#EFE7DC!important;color:var(--primary);font-size:0!important}
.product .ph:after{display:none!important;content:none!important}
.product .ph.drink{background:#EAE2D7!important;color:var(--ink-2)}
.product .ph.pastry{background:#F1EBE2!important}
.product:disabled .ph{color:#ABA196;background:#ECE6E1!important}
.product .ph svg{width:2.75rem;height:2.75rem}
.pbody{padding:0.625rem 0.75rem 0.75rem!important;display:flex;flex-direction:column;gap:0.375rem;width:100%}
.pname{font-size:0.875rem!important;line-height:1.25rem!important;font-weight:500!important;color:var(--ink)!important;min-height:2.5rem!important;max-height:2.5rem;overflow:hidden}
.price{color:var(--primary)!important;font-size:1rem!important;font-weight:600!important;margin:0!important}
.stock{align-self:flex-start;margin:0!important}
.pos-qty{position:absolute;top:0.5rem;right:0.5rem;min-width:1.75rem;height:1.75rem;padding:0 0.5rem;border-radius:62.4375rem;background:var(--primary);color:var(--on-primary);font-size:0.875rem;font-weight:600;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 0.375rem rgba(57,52,47,.3);pointer-events:none;font-variant-numeric:tabular-nums}
.pos-remove{display:none;position:absolute;top:0.5rem;left:0.5rem;z-index:2;min-width:2.75rem;min-height:2.75rem;padding:0 0.625rem;border-radius:0.75rem!important;background:#fff!important;color:var(--bad)!important;border:1px solid #F3CFCA!important;box-shadow:0 0.1875rem 0.625rem rgba(30,27,24,.15)!important;font-weight:600;font-size:0.8125rem}
.pos-layout.arranging .pos-remove{display:inline-flex;align-items:center;justify-content:center}
.pos-layout.arranging .product{pointer-events:none}
.pos-empty{display:flex;flex-direction:column;align-items:center;gap:0.75rem;padding:3.5rem 1rem;text-align:center;color:var(--ink-2);font-size:0.9375rem}
.cart{width:var(--cart-w);flex:none;background:#fff;border-left:1px solid var(--line-strong);display:flex;flex-direction:column;min-height:0}
.cart-head{display:flex;align-items:center;gap:0.625rem;padding:1rem 1.25rem 0.75rem}
.cart-head h2{margin:0;font-size:1.125rem;font-weight:600}
.cart-head .count{font-size:0.8125rem;color:var(--ink-2)}
.cart-head .grow{flex:1}
.cart-lines{flex:1;min-height:0;overflow-y:auto;padding:0 1.25rem}
.cart-line{display:flex;gap:0.625rem;padding:0.75rem 0;border-bottom:1px solid var(--line-faint)}
.cart-line .info{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.25rem}
.cart-line .name{font-size:0.9375rem;font-weight:500;line-height:1.25rem}
.cart-line .unit{font-size:0.8125rem;color:var(--ink-2)}
.cart-line .side{display:flex;flex-direction:column;align-items:flex-end;gap:0.5rem}
.cart-line .amt{font-size:0.9375rem;font-weight:600}
.stepper{display:flex;align-items:center;gap:0.25rem}
.stepper button{width:2.75rem;height:2.75rem;border-radius:0.75rem;border:1px solid var(--line-strong);background:var(--surface-3);color:var(--primary);display:grid;place-items:center;font-size:1.25rem;font-weight:500;padding:0}
.stepper b{width:2rem;text-align:center;font-size:1rem;font-weight:600;font-variant-numeric:tabular-nums}
.cart-empty{height:100%;min-height:12.5rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.625rem;color:var(--ink-2);text-align:center;font-size:0.9375rem}
.cart-empty .ring,.pos-empty .ring{width:4rem;height:4rem;border-radius:50%;background:var(--tint);color:var(--primary-ink);display:grid;place-items:center}
.cart-foot{padding:0.875rem 1.25rem 1.125rem;border-top:1px solid var(--line-strong);background:var(--surface-3);display:flex;flex-direction:column;gap:0.5rem;max-height:62%;overflow-y:auto}
.cart-row{display:flex;justify-content:space-between;align-items:center;gap:0.5rem;font-size:0.875rem;color:var(--ink-2)}
.cart-row.minus{color:var(--bad)}
.cart-net{display:flex;justify-content:space-between;align-items:baseline;padding-top:0.25rem}
.cart-net span:first-child{font-size:1rem;font-weight:500}
.cart-net strong{font-size:2rem;line-height:2.5rem;font-weight:600;font-variant-numeric:tabular-nums}
.pay-btn{min-height:4rem!important;border-radius:1rem!important;font-size:1.25rem!important;font-weight:600!important}
.pay-btn small{font-weight:400;opacity:.85;font-size:1.0625rem}
.cart-link{align-self:center;background:transparent;border:0;color:var(--ink-2);font-size:0.8125rem;min-height:2.25rem;padding:0 0.5rem}
.cart-opts{display:flex;flex-direction:column;gap:0.375rem}
.cart-opts .lbl{font-size:0.75rem;color:var(--ink-2);font-weight:500}
.cart-opts .row{display:flex;gap:0.375rem;overflow-x:auto;scrollbar-width:none}
.cart-opts .row::-webkit-scrollbar{display:none}
.pos-options,.pos-option-label{display:none}
.discount-line{display:flex;align-items:center;gap:0.375rem}
.discount-line span{font-size:0.875rem;color:var(--ink-2);flex:1}
.discount-line input{width:6rem;height:2.25rem;border-radius:0.625rem;border:1px solid var(--line-input);background:#fff;padding:0 0.625rem;text-align:right;font-size:0.9375rem;color:var(--ink)}
.cart-local .field{margin-bottom:0.375rem!important}
.cartbar{display:none}

/* sweetness sheet */
.sweetness-options{gap:0.625rem!important}
.sweetness-options button{min-height:6rem!important;border-radius:1rem!important;border:2px solid var(--line-strong)!important;background:#fff!important;color:var(--ink)!important;font-size:1.125rem!important;font-weight:600!important}
.sweetness-options button:active{background:var(--tint)!important;border-color:var(--primary)!important}
.sweetness-options small{color:var(--ink-2)!important;font-size:0.875rem!important;font-weight:400}

/* ---------- payment sheet (quick checkout) ---------- */
.modalbox:has(.qc){width:min(61.25rem,100%)!important;padding:0!important;overflow:hidden;display:flex;flex-direction:column}
.modalbox:has(.qc)>.finance-form{display:flex;flex-direction:column;min-height:0;flex:1}
.modalbox:has(.qc) #fin-error{margin:0 1.375rem 0.625rem}
.qc{display:flex;flex-direction:column;min-height:0;flex:1}
.qc-head{display:flex;align-items:center;gap:1rem;padding:1rem 1.375rem;background:var(--ink);color:#F8F6F1;flex:none}
.qc-head .t{flex:1;min-width:0}
.qc-head .k{font-size:0.8125rem;color:#D9CEC0}
.qc-head .due{font-size:2.125rem;line-height:2.625rem;font-weight:600;font-variant-numeric:tabular-nums}
.qc-head .meta{font-size:0.8125rem;color:#D9CEC0;text-align:right}
.qc-head .x{width:2.75rem;height:2.75rem;border-radius:0.75rem;border:1px solid rgba(247,243,238,.3);background:transparent;color:#F8F6F1;display:grid;place-items:center;flex:none}
.qc-body{flex:1;min-height:0;display:flex;flex-wrap:wrap;overflow-y:auto}
.qc-left{flex:1 1 22.5rem;padding:1.125rem 1.375rem;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:0.75rem}
.qc-right{flex:1 1 22.5rem;padding:1.125rem 1.375rem;display:flex;flex-direction:column;gap:0.75rem}
.qc-label{font-size:0.8125rem;font-weight:600;color:var(--ink-2)}
.qc-summary{background:var(--surface-3)!important;border-radius:0.875rem!important;margin:0!important;padding:0.75rem 0.875rem!important;font-size:0.875rem;color:var(--ink-2)}
.qc-summary .qc-due{font-size:1.25rem!important;font-weight:600!important;color:var(--ink)!important}
.qc-methods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:0.5rem!important;margin:0!important}
.qc-method{min-height:4.5rem!important;border-radius:0.875rem!important;border:1px solid var(--line-strong)!important;background:#fff!important;color:var(--ink)!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.25rem;font-size:0.8125rem!important;font-weight:500!important;line-height:1rem;padding:0 0.375rem}
.qc-method svg{width:1.375rem;height:1.375rem}
.qc-method.active{background:var(--tint)!important;border:2px solid var(--primary)!important;color:var(--primary-ink)!important}
.qc-status{background:var(--info-bg)!important;color:var(--info)!important;border-radius:1rem!important;padding:1rem!important;font-size:0.9375rem;line-height:1.5rem;font-weight:400!important;margin:0!important}
.qc-status.wait{background:var(--info-bg)!important;color:var(--info)!important}
.qc-qr{max-width:15rem!important;border-radius:1.25rem;border:1px solid var(--line-strong);margin:0 auto!important}
.qc-amount{text-align:center;font-size:2.625rem;line-height:3.125rem;font-weight:600;color:var(--primary);font-variant-numeric:tabular-nums}
.qc-foot{flex:none;padding:0.875rem 1.375rem 1rem;border-top:1px solid var(--line);display:flex;align-items:center;gap:0.875rem;flex-wrap:wrap;background:var(--surface-3)}
.qc-foot .hint{flex:1 1 12.5rem;font-size:0.8125rem;color:var(--ink-2)}
.qc-foot .btn{min-height:4rem!important;border-radius:1rem!important;font-size:1.1875rem!important;font-weight:600!important}
.qc-foot .qc-confirm{flex:1 1 20rem}
.qc-footer{display:none!important}
.cash-input{margin:0!important}
.cash-display{display:flex;align-items:center;justify-content:space-between;border:2px solid var(--primary)!important;border-radius:1rem!important;background:#fff!important;padding:0.25rem 1rem!important;color:var(--ink-2)!important;font:inherit!important;font-size:1.375rem!important}
.cash-display input{font:inherit!important;font-size:2rem!important;font-weight:600!important;color:var(--ink)!important;min-height:3rem!important;text-align:right;background:transparent!important;border:0!important;outline:0!important;box-shadow:none!important;padding:0!important;width:100%}
.cash-display input::placeholder{color:var(--ink)}
.quick-cash{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:0.375rem!important;margin:0!important}
.quick-cash button{min-height:2.875rem!important;border-radius:0.75rem!important;border:1px solid var(--line-input)!important;background:#F1EBE2!important;color:var(--ink)!important;font-size:0.875rem!important;font-weight:600!important;box-shadow:none!important;padding:0}
.cash-keypad{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:0.5rem!important;margin:0!important}
.cash-keypad button{min-height:3.75rem!important;border-radius:0.875rem!important;border:1px solid var(--line)!important;background:#fff!important;color:var(--ink)!important;font-size:1.375rem!important;font-weight:500!important;box-shadow:0 1px 0 var(--line-strong)!important}
.cash-keypad button:active,.quick-cash button:active{background:var(--tint)!important;transform:none!important}
.cash-keypad .cash-key-clear{color:var(--ink-2)!important;font-size:1rem!important;background:#fff!important}
.cash-keypad .cash-key-back{color:var(--primary)!important;background:#fff!important}
.cash-change{display:flex;align-items:center;justify-content:space-between;border-radius:1rem!important;padding:0.75rem 1.125rem!important;background:var(--ok-bg)!important;color:var(--ok)!important;margin:0!important;font-size:1rem;font-weight:500}
.cash-change strong{font:inherit!important;font-size:2.125rem!important;line-height:2.625rem;font-weight:700!important;color:inherit!important}
.cash-change strong.bad{color:var(--bad)!important}
.cash-change:has(strong.bad){background:var(--bad-bg)!important;color:var(--bad)!important}
.cash-error{background:var(--bad-bg)!important;color:var(--bad)!important;border-radius:0.75rem!important;margin:0!important;padding:0.625rem 0.875rem!important;font-weight:500!important}
.cash-modal{max-width:35rem!important}
.cash-kicker{color:var(--primary)!important;letter-spacing:.2em!important}
.cash-total{background:var(--surface-3)!important;color:var(--ink-2)!important;border-radius:1rem!important}
.cash-total strong{font:inherit!important;font-size:1.75rem!important;font-weight:600!important;color:var(--ink)!important}

/* sale done */
.modalbox:has(.sale-done){width:min(35rem,100%)!important;border-radius:1.75rem!important}
.sale-done{text-align:center;display:flex;flex-direction:column;gap:0.75rem}
.sale-done .tick{width:4rem;height:4rem;margin:0.25rem auto 0;border-radius:50%;background:var(--ok-bg);color:var(--ok);display:grid;place-items:center}
.sale-done h2{margin:0!important;font-size:1.625rem!important;color:var(--ink)!important}
.sale-done .sub{font-size:0.875rem;color:var(--ink-2);margin:0}
.sale-done .sums{padding:0.875rem 1.125rem;border-radius:1rem;background:var(--surface-3);display:flex;flex-direction:column;gap:0.375rem;font-size:0.9375rem;text-align:left}
.sale-done .sums div{display:flex;justify-content:space-between}
.sale-done .sums b{font-weight:600}
.sale-done .change{padding:1rem 1.125rem;border-radius:1.125rem;background:var(--ok);color:#fff;display:flex;align-items:center;justify-content:space-between;font-size:1.125rem;font-weight:500}
.sale-done .change strong{font-size:2.875rem;line-height:3.375rem;font-weight:700;font-variant-numeric:tabular-nums}
.sale-done details{text-align:left}
.sale-done details summary{cursor:pointer;color:var(--primary);font-size:0.875rem;padding:0.375rem 0}
.sale-done .customer-receipt{margin:0.625rem auto!important}
.sale-done .row2{display:flex;gap:0.625rem}.sale-done .row2 .btn{flex:1}
.sale-done .next{min-height:4rem!important;border-radius:1rem!important;font-size:1.25rem!important;font-weight:600!important;width:100%}


/* shift bar */
.shift-bar{border-left:0!important;display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap;padding:0.75rem 1rem!important;border-radius:1rem!important}
.shift-bar.closed{background:var(--warn-bg)!important;border-color:#F0DDB0!important}
.shift-bar.warn{background:var(--bad-bg)!important;border-color:#F3CFCA!important}

/* ---------- finance pages ---------- */
.fin-head{display:flex;align-items:center;gap:0.625rem;flex-wrap:wrap;margin-bottom:0.875rem}
.fin-head h2{margin:0;font-size:1.375rem;font-weight:600;flex:1;min-width:12.5rem}
.fin-range{display:flex;align-items:flex-end;gap:0.5rem;flex-wrap:wrap}
.fin-range .field{margin:0!important;min-width:9.375rem}
.fin-range .field input{min-height:2.5rem!important;padding:0.375rem 0.625rem!important;font-size:0.875rem!important}
.fin-range .btn{min-height:2.5rem!important}
.finance-nav{display:none!important}
#finance-status:empty{display:none}
#finance-content>section+section{margin-top:1rem}
.finance-available{position:relative;overflow:hidden;border-radius:1.5rem!important;background:var(--ink)!important;color:#F8F6F1!important;padding:1.375rem 1.625rem!important;flex-direction:column;align-items:flex-start!important;gap:2px!important}
.finance-available:before{content:"Available today";font-family:"Playfair Display",Georgia,serif!important;font-style:italic;font-size:0.875rem;color:#CDBFAE}
.finance-available:after{content:"";position:absolute;right:-3.75rem;top:-3.75rem;width:15rem;height:15rem;border-radius:50%;border:1px solid rgba(183,158,140,.35)}
.finance-available span{font-size:0.9375rem;color:#D9D1C6}
.finance-available strong{font-size:2.875rem!important;line-height:3.5rem;font-weight:600!important;color:#fff!important;font-variant-numeric:tabular-nums}
.finance-available.bad strong{color:#FFB4AA!important}
.finance-checks label{border:1px solid var(--line);border-radius:0.75rem;padding:0 0.75rem;background:#fff}
.finance-busy:after{background:var(--ink)!important;border-radius:0.875rem!important;font-weight:500;content:'กำลังบันทึก…'!important}
.customer-receipt{box-shadow:0 0.375rem 1.25rem rgba(30,27,24,.12);border:0!important}
#receipt-print{background:var(--surface-2);border-radius:1.25rem;padding:1.25rem;margin-top:0.875rem}

/* ---------- sign-in: brand panel + form ---------- */
body.auth-screen .rail,body.auth-screen .top,body.auth-screen .net-banner,body.auth-screen .pending-slot{display:none!important}
body.auth-screen .main{padding:0!important;display:block!important;min-height:0;place-items:normal!important}
body.auth-screen .main>*{max-width:none}
.auth-split{display:flex;width:100%;min-height:100vh;min-height:100dvh}
.auth-panel{width:44%;max-width:35rem;flex:none;background:var(--ink);display:flex;align-items:flex-end;justify-content:center;position:relative;overflow:hidden}
.auth-panel .corner{position:absolute;left:2rem;top:2rem;right:2rem;display:flex;justify-content:space-between;font-size:0.6875rem;letter-spacing:.28em;color:#CDBFAE}
.auth-arch{width:74%;max-width:22.5rem;height:72%;border-radius:11.25rem 11.25rem 0 0;background:#6F5641;border:1px solid rgba(183,158,140,.4);border-bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.875rem;text-align:center;padding:0 1.5rem}
.auth-arch .kick{font-size:0.6875rem;letter-spacing:.32em;color:#CDBFAE}
.auth-arch .word{font-size:3.75rem;line-height:4.125rem;letter-spacing:.1em;color:#F8F6F1}
.auth-arch .word b{color:#CDB89F;font-weight:400}
.auth-arch .script{font-style:italic;font-size:1.375rem;color:#CDBFAE}
.auth-arch .rule{width:3.5rem;height:1px;background:var(--detail);margin:0.375rem 0}
.auth-arch .line{font-size:1.0625rem;line-height:1.75rem;color:#D9D1C6}
.auth-form{flex:1;display:flex;align-items:center;justify-content:center;padding:1.5rem;position:relative;overflow-y:auto}
.auth-card{width:100%!important;max-width:26.25rem;background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;display:flex;flex-direction:column;gap:0.375rem}
.auth-brand{display:flex;flex-direction:column;align-items:center;gap:0.625rem;margin-bottom:0.75rem!important;text-align:center}
.auth-mark{width:4.5rem!important;height:4.5rem!important;border-radius:50%;border:0!important;background:var(--primary)!important;color:#F8F6F1!important;font-size:2.125rem!important;box-shadow:0 0 0 0.375rem var(--bg),0 0 0 0.4375rem #CDBFAE}
.auth-mark img{background:#fff}
.auth-shop{font-size:1.0625rem;letter-spacing:.18em;color:var(--primary);margin-top:0.375rem}
.auth-brand h1{margin:0!important;font-size:1.625rem!important;font-weight:600!important;color:var(--ink)!important;letter-spacing:0!important}
.auth-brand p{font-size:0.9375rem!important}
.auth-card .field input{min-height:3.5rem!important;font-size:1.0625rem!important}
.auth-card .btn{min-height:3.75rem!important;font-size:1.125rem!important;font-weight:600!important;border-radius:1rem!important;margin-top:0.375rem!important}
.auth-card .btn.secondary{min-height:3.25rem!important;font-size:1rem!important;font-weight:500!important}
.auth-status:not(:empty){padding:0.75rem 0.875rem;border-radius:0.75rem;background:var(--bad-bg);color:var(--bad)!important;font-size:0.875rem;text-align:left!important}
.auth-help{font-size:0.875rem!important;color:var(--ink-2)!important}
.auth-online{position:absolute;top:1.75rem;right:2rem}
.auth-foot{position:absolute;bottom:1.5rem;left:0;right:0;text-align:center;font-size:0.75rem;color:var(--ink-2);letter-spacing:.04em;padding:0 1rem}

/* first-shop setup */
.setup-step{border-color:var(--line)!important;border-radius:1.25rem!important;background:#fff!important}
.setup-num{background:var(--tint)!important;color:var(--primary-ink)!important}
.setup-step.done .setup-num{background:var(--ok-bg)!important;color:var(--ok)!important}

/* recipes, products, production keep their layout; only the surface colours change */
.recipe-card,.recipe-tile,.recipe-sort-card,.recipe-mto-card{background:#fff!important;border-color:var(--line)!important;box-shadow:none!important}
.recipe-dropzone{background:var(--surface-3)!important;border-color:var(--line-strong)!important}
.recipe-group-title span{color:var(--primary)!important}
.recipe-group-title>b,.recipe-drag-handle,.recipe-move-btn{background:var(--tint)!important;color:var(--primary-ink)!important}
.recipe-delete-btn{background:var(--bad-bg)!important;color:var(--bad)!important}
.pricing-preview,.sweetness-recipe,.readonly-stock>div,.sop-ingredient-preview{background:var(--surface-3)!important;border-color:var(--line)!important}
.pricing-preview-grid b,.readonly-stock b,.recipe-line-cost{color:var(--ink)!important}
.report{background:#fff!important;border-color:var(--line)!important;border-radius:1.25rem!important;box-shadow:none!important}

/* ---------- offline: stop every save, keep what was typed ---------- */
body.is-offline [data-pos-action="checkout"],body.is-offline .qc-confirm,body.is-offline [data-fin^="save"],body.is-offline [data-fin$="-save"],body.is-offline [data-fin="qc-confirm"]{pointer-events:none;opacity:.45}

/* ---------- phone / narrow: bottom bar, cart as a drawer ---------- */
@media (max-width:760px){
  .shell{flex-direction:column-reverse}
  .rail{width:100%;height:auto;flex-direction:row;padding:0.25rem 0.375rem calc(0.25rem + env(safe-area-inset-bottom));overflow-x:auto;overflow-y:hidden;justify-content:flex-start;gap:2px;border-top:1px solid #4A443E}
  .rail-items{flex-direction:row;gap:2px}
  .rail-logo,.rail-spacer{display:none}
  .nav-i{width:4rem;min-height:3.5rem;font-size:0.6875rem}
  .toprow{padding:0.5rem 0.75rem;gap:0.5rem}
  .top .brand,.top-sep,.top-date,.cloud-state .chip-role,.hide-sm{display:none!important}
  .main{padding:0.875rem 0.875rem 1.25rem!important}
  .cart{display:none}
  .pos-layout.cart-open .cart{display:flex;position:absolute;inset:0;z-index:25;width:100%}
  .cartbar{display:flex;padding:0.625rem 0.75rem;flex:none}
  .cartbar button{width:100%;height:3.75rem;border-radius:1.125rem;border:0;background:var(--primary);color:var(--on-primary);display:flex;align-items:center;gap:0.75rem;padding:0 0.5rem 0 1.125rem;box-shadow:0 0.625rem 1.5rem rgba(57,52,47,.3)}
  .cartbar .c{font-size:0.875rem;color:#D9CEC0}
  .cartbar .n{font-size:1.25rem;font-weight:600;flex:1;text-align:left}
  .cartbar .go{height:2.75rem;padding:0 1.125rem;border-radius:0.75rem;background:var(--bg);color:var(--primary-ink);font-size:1rem;font-weight:600;display:flex;align-items:center}
  .products.pos-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0.625rem!important}
  .pos-toolbar{padding:0.75rem 0.875rem 0.5rem}
  .pos-search{max-width:none;flex-basis:100%}
  .pos-scroll{padding:0.25rem 0.875rem 0.875rem}
  .auth-panel{display:none}
  .qc-methods{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .quick-cash{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .qc-left{border-right:0;border-bottom:1px solid var(--line)}
  .modal{padding:0.5rem!important}
  .modalbox{padding:1.125rem!important}
}

/* ---------- print: only the document ---------- */
@media print{
  .rail,.top,.net-banner,.pending-slot,.cartbar{display:none!important}
  .shell{display:block;height:auto;overflow:visible}
  .workspace,.main{display:block!important;height:auto!important;overflow:visible!important;padding:0!important}
}

/* ---------- refinements ---------- */
.cart-close{display:none!important}
@media (max-width:760px){.cart-close{display:inline-flex!important}}
.btn.ghost:disabled{background:transparent!important;color:#C4B8AA!important}
.btn.danger.small,td .btn.danger,.recipe-tile-actions .btn.danger{background:#fff!important;color:var(--bad)!important;border-color:#F3CFCA!important}
.btn.danger.small:hover:not(:disabled),td .btn.danger:hover:not(:disabled){background:var(--bad-bg)!important}
.top .brand{max-width:16.25rem;overflow:hidden;text-overflow:ellipsis;letter-spacing:.08em!important}
.finance-busy:after{content:'กำลังโหลด / บันทึกข้อมูล…'!important}
.cart-optsum{display:flex;align-items:center;gap:0.5rem;width:100%;min-height:2.75rem;padding:0 0.75rem;border-radius:0.75rem;border:1px solid var(--line-strong);background:#fff;color:var(--ink);font-size:0.875rem;text-align:left}
.cart-optsum span{flex:1;color:var(--ink-2)}
.cart-optsum b{font-weight:600;color:var(--ink)}
.cart-optsum svg{color:var(--ink-2);transition:transform .15s}
.cart-optsum[aria-expanded="true"] svg{transform:rotate(180deg)}
.modalbox>.finance-form{max-width:none}
.field.cash-input .cash-display input:not([type=checkbox]):not([type=radio]){border:0!important;box-shadow:none!important;background:transparent!important;padding:0!important;min-height:3rem!important;font-size:2rem!important;font-weight:600!important}
.shift-bar>div:first-child{flex:1 1 20rem;min-width:0}
.shift-bar .muted{font-size:0.8125rem}
.shift-bar .actions .btn{min-height:2.5rem!important;font-size:0.875rem!important;padding:0 0.875rem!important}
.main:has(>.pos-layout)>.shift-bar{padding:0.625rem 0.875rem!important}
.recipe-tile-image{color:var(--primary)!important;background:var(--tint)!important}
.recipe-dropzone-head h3{display:flex;align-items:center;gap:0.5rem}
.recipe-dropzone-head h3 svg{color:var(--primary)}
.finance-available{margin-bottom:0.875rem!important}

/* bills: list + receipt preview */
.bills-split{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start}
.bills-split>.bills-list{flex:999 1 28.75rem;min-width:0}
.bill-preview{flex:1 1 21.25rem;min-width:0;background:var(--surface-2);border-radius:1.25rem;padding:1.25rem;display:flex;flex-direction:column;align-items:center;gap:0.875rem;position:sticky;top:0}
.bill-preview #receipt-print{background:transparent;padding:0;margin:0;width:100%}
.bill-preview .notice{width:100%}
.bill-actions{justify-content:center}
.bill-empty{min-height:16.25rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.75rem;text-align:center;color:var(--ink-2);font-size:0.9375rem}
.bill-empty .ring{width:4rem;height:4rem;border-radius:50%;background:var(--tint);color:var(--primary-ink);display:grid;place-items:center}
.bill-search{display:flex;gap:0.5rem;align-items:flex-end;flex-wrap:wrap}.bill-search .field{flex:1 1 15rem;margin:0!important}.bill-search .btn{min-height:3rem}
.bills-list .report-table-wrap{margin-top:0.75rem}
tr.is-selected td{background:var(--tint)!important}
.btn.danger-text{color:var(--bad)!important}
/* orders: board of cards */
.orders-head{display:flex;align-items:flex-start;gap:0.75rem;flex-wrap:wrap;margin-bottom:1rem}
.orders-head>div{flex:1;min-width:15rem}.orders-head h2{margin:0 0 0.25rem;font-size:1.375rem;font-weight:600}.orders-head p{margin:0;font-size:0.8125rem}
.order-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(16.25rem,1fr));gap:0.875rem;align-items:start}
.order-col{background:var(--surface-2);border-radius:1.25rem;padding:0.75rem;display:flex;flex-direction:column;gap:0.625rem;min-height:10rem}
.oc-head{display:flex;align-items:center;justify-content:space-between;padding:2px 0.25rem;font-size:0.875rem;font-weight:600}
.order-card{background:#fff;border:1px solid var(--line);border-radius:1rem;padding:0.875rem;display:flex;flex-direction:column;gap:0.5rem;font-size:0.8125rem}
.oc-top{display:flex;justify-content:space-between;gap:0.5rem;align-items:flex-start;font-size:0.75rem}
.oc-title{font-size:0.9375rem;font-weight:600;line-height:1.25rem}
.oc-pick{font-size:0.8125rem}
.oc-money{display:flex;justify-content:space-between;gap:0.5rem;padding-top:0.375rem;border-top:1px dashed var(--line-strong);color:var(--ink-2)}
.oc-money b{color:var(--ink);font-weight:600}
.order-card .actions .btn{min-height:2.375rem!important;font-size:0.8125rem!important;padding:0 0.75rem!important;border-radius:0.625rem!important}
.oc-empty{margin:0.5rem 0.25rem;color:var(--ink-2);font-size:0.8125rem}

/* printed documents keep their own plain black-on-white look */
.customer-receipt table,#finance-print table,.sop-print table{border:0!important;border-radius:0!important;background:transparent!important;border-collapse:collapse!important;overflow:visible!important}
.customer-receipt th,.customer-receipt td{background:transparent!important;color:inherit!important;text-transform:none!important;padding:0.375rem 2px!important;border-bottom:1px solid #ddd!important;font-size:0.6875rem!important}
.customer-receipt th{font-weight:600!important}
.customer-receipt tr:hover td,#finance-print tr:hover td{background:transparent!important}
#finance-print th,#finance-print td{background:#fff!important;color:#222!important;padding:0.375rem!important;border-bottom:1px solid #ddd!important;font-size:10pt!important}
.sop-print .sop-table th,.sop-print .sop-table td{border:1px solid #bbb!important;padding:0.4375rem!important;background:#fff!important;color:#111!important}
.fin-head.no-range .fin-range{display:none}
.quick-list{display:flex;flex-direction:column;gap:0.5rem}
.quick-list .btn{justify-content:flex-start}


/* ---------- density: every size above is in rem, so the root font-size scales the whole UI ----------
   large = iPad / touch (the design's 44–64px targets), medium = mouse screens, small = more on one screen */
html,html.d-large{font-size:16px}
html.d-medium{font-size:14px}
html.d-small{font-size:12.5px}
@media (max-width:1100px){:root{--cart-w:20rem}}
@media (max-width:900px){:root{--cart-w:18rem}}
.density-row{display:flex;gap:6px;flex-wrap:wrap}
.density-hint{font-size:.8125rem}
.main>.subnav{margin-left:max(0px,calc((100% - 80rem) / 2))!important}

/* ---------- เงินร้าน · ภาพรวม (Cherry dashboard) ---------- */
.dash{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start;margin-bottom:1rem}
.dash-main{flex:999 1 28.75rem;min-width:0;display:flex;flex-direction:column;gap:1rem}
.dash-hero{position:relative;overflow:hidden;border-radius:1.5rem;background:var(--ink);color:#F8F6F1;padding:1.375rem 1.625rem}
.dash-hero:after{content:"";position:absolute;right:-3.75rem;top:-3.75rem;width:15rem;height:15rem;border-radius:50%;border:1px solid rgba(183,158,140,.35);pointer-events:none}
.dash-hero .kick{font-style:italic;font-size:.875rem;color:#CDBFAE}
.dash-hero .lbl{font-size:.9375rem;color:#D9D1C6}
.dash-hero .amt{font-size:2.875rem;line-height:3.5rem;font-weight:600}
.dash-hero .rule{width:3rem;height:1px;background:var(--detail);margin:.625rem 0 .75rem}
.dash-hero .formula{display:flex;gap:.625rem;flex-wrap:wrap;align-items:baseline;font-size:.875rem;color:#D9D1C6}
.dash-hero .formula b{color:#fff;font-weight:600}.dash-hero .formula span{color:var(--detail)}
.dash-hero .chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.875rem}
.dash-hero .chips span{padding:.375rem .75rem;border-radius:999px;background:rgba(247,243,238,.12);font-size:.8125rem}
.dash-hero .chips b{font-weight:600}
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem}
.dash-card{display:flex;flex-direction:column;gap:.5rem;padding:1.125rem 1.25rem!important}
.dash-card h3{margin:0!important;font-size:.9375rem!important}
.dash-wide{grid-column:1/-1}
.dc-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem;flex-wrap:wrap}
.dc-head h3{margin:0!important}
.dc-big{font-size:1.75rem;font-weight:600;line-height:2.25rem}
.dc-row{display:flex;justify-content:space-between;align-items:center;gap:.5rem;font-size:.875rem;padding:.125rem 0}
.dc-row b{font-weight:600}
.dc-total{border-top:1px solid var(--line-faint);padding-top:.5rem;margin-top:.25rem;font-weight:500}
.jars{display:grid;grid-template-columns:repeat(auto-fit,minmax(13.75rem,1fr));gap:.875rem 1.5rem}
.jar{display:flex;flex-direction:column;gap:.375rem}
.jar .bar{height:.5rem;border-radius:999px;background:var(--surface-2);overflow:hidden}
.jar .bar span{display:block;height:100%;border-radius:999px;background:var(--primary)}
.jar-sub{font-size:.75rem}
.dash-todo{flex:1 1 18.75rem;align-self:flex-start;padding:1.125rem .5rem .5rem!important;position:sticky;top:0}
.dash-todo h3{margin:0 .75rem .5rem!important;font-size:.9375rem!important}
.todo{width:100%;display:flex;align-items:center;gap:.75rem;padding:.625rem .75rem;border-radius:.875rem;border:0;background:transparent;text-align:left;color:var(--ink);min-height:3rem}
.todo:hover{background:var(--surface-3)}
.todo .dot{width:.5rem;height:.5rem;border-radius:50%;flex:none}
.todo .tx{flex:1;min-width:0;display:flex;flex-direction:column}
.todo .tx b{font-size:.875rem;font-weight:500}.todo .tx small{font-size:.75rem;color:var(--ink-2)}
.todo svg{color:var(--detail);flex:none}
.todo-none{margin:.25rem .75rem 1rem}
/* ---------- ปิดยอด (shift count + day close) ---------- */
.closing{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start;margin-bottom:1rem}
.closing-left{flex:1 1 22.5rem;min-width:0;display:flex;flex-direction:column;gap:1rem}
.closing-right{flex:1 1 23.75rem;min-width:0;display:flex;flex-direction:column;gap:1rem}
.closing h3{margin:0 0 .5rem!important}
.shift-head{display:flex;justify-content:space-between;gap:.75rem;flex-wrap:wrap;align-items:flex-start}
.shift-head h3{display:flex;align-items:center;gap:.5rem}
.shift-head p{margin:0;font-size:.8125rem}
.kv2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-top:.875rem}
.kv2>div{display:flex;flex-direction:column}.kv2 span{font-size:.8125rem}.kv2 b{font-size:1.375rem;font-weight:600}
.count-card{display:flex;flex-direction:column;gap:.75rem}
.count-expected{display:flex;justify-content:space-between;align-items:baseline;font-size:.9375rem;font-weight:600}
.count-expected b{font-size:1.375rem;font-weight:600}
.count-display{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-radius:1rem;border:2px solid var(--primary)}
.count-display span{font-size:.875rem;font-weight:500}.count-display b{font-size:1.875rem;font-weight:600}
.count-keys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.count-key{height:3.75rem;border-radius:.875rem;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:1.375rem;font-weight:500;box-shadow:0 1px 0 var(--line-strong)}
.count-key:active{background:var(--tint)}
.count-tools{display:flex;gap:.5rem}.count-tools .btn{flex:1;min-height:3rem!important}
.count-var{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-radius:1rem;font-size:.9375rem;font-weight:500}
.count-var b{font-size:1.75rem;font-weight:700}
.count-var[hidden]{display:none}
.count-var.ok{background:var(--ok-bg);color:var(--ok)}
.count-var.short{background:var(--bad-bg);color:var(--bad)}
.count-var.over{background:var(--warn-bg);color:var(--warn)}
.count-card .field{margin:0!important}
#count_hint{margin:-.25rem 0 0;font-size:.8125rem}
.check-line{display:flex;gap:.625rem;align-items:flex-start;font-size:.8125rem;color:var(--ink-2);line-height:1.5}
.check-line input{width:1.25rem;height:1.25rem;flex:none;margin-top:.125rem}
#daily-result:not(:empty){padding:.625rem .875rem;border-radius:.75rem;background:var(--bad-bg);color:var(--bad);font-size:.875rem;margin:0}

/* ---------- switches, segmented tabs ---------- */
.switch{width:3.25rem;height:2rem;border-radius:999px;border:0;padding:.1875rem;background:#D2C8BB;display:inline-flex;justify-content:flex-start;align-items:center;flex:none;transition:background .15s}
.switch .knob{width:1.625rem;height:1.625rem;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch.on{background:var(--primary);justify-content:flex-end}
.switch:disabled{opacity:.45;cursor:not-allowed}
.seg{display:inline-flex;gap:.25rem;padding:.25rem;border-radius:.875rem;background:var(--surface-2);max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg button{height:2.5rem;padding:0 1rem;border:0;border-radius:.625rem;background:transparent;color:var(--ink-2);font-size:.875rem;white-space:nowrap;flex:none}
.seg button.on{background:#fff;color:var(--primary);font-weight:600;box-shadow:0 1px 3px rgba(59,42,36,.12)}
.seg-n{display:inline-grid;place-items:center;min-width:1.375rem;height:1.375rem;padding:0 .375rem;margin-left:.25rem;border-radius:999px;background:var(--tint);color:var(--primary-ink);font-size:.75rem;font-weight:500}
.btn.lock{display:inline-flex;align-items:center;gap:.375rem}
.section-sub{margin:.25rem 0 0;font-size:.8125rem}
/* ---------- stock and menu tables ---------- */
.stock-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;margin-bottom:.875rem}
.stock-table tfoot td{background:var(--surface-3)!important;border-top:1px solid var(--line-strong)!important;border-bottom:0!important}
.row-actions{justify-content:flex-end;flex-wrap:nowrap!important}
.row-actions .btn{white-space:nowrap}
.menu-name{display:flex;align-items:center;gap:.75rem;min-width:12rem}
.menu-name .preview,.menu-ico{width:2.75rem;height:2.75rem;border-radius:.75rem;flex:none;object-fit:cover}
.menu-ico{display:grid;place-items:center;background:var(--tint);color:var(--primary)}
.menu-name b{display:block}
.menu-table td,.stock-table td{vertical-align:middle}
.products-pricing-table{min-width:0!important}
/* ---------- sweetness sheet ---------- */
.modalbox:has(.sweet-sheet){width:min(35rem,100%)!important;padding:1.625rem!important}
.sweet-sheet{display:flex;flex-direction:column;gap:1.125rem}
.sheet-head{display:flex;align-items:flex-start;gap:.75rem}
.sheet-head>div{flex:1;min-width:0}
.sheet-head .kick{font-size:.8125rem;color:var(--primary);font-weight:500}
.sheet-head h2{margin:.125rem 0 .25rem!important;font-size:1.5rem!important}
.sheet-head p{margin:0;font-size:.875rem}
.sheet-x{width:2.75rem;height:2.75rem;border-radius:.75rem;border:1px solid var(--line-strong);background:#fff;color:var(--ink);display:grid;place-items:center;flex:none}
.sweetness-options{margin:0!important}
.sweetness-options button.on{background:var(--tint)!important;border-color:var(--primary)!important;color:var(--primary-ink)!important}
.sweet-qty{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-radius:.875rem;background:var(--surface-3);font-size:.9375rem;font-weight:500}
.sweet-qty .stepper b{font-size:1.25rem}
/* ---------- search box above long lists ---------- */
.select-search{width:100%;min-height:2.5rem;margin-bottom:.375rem;padding:0 .75rem 0 2.125rem;border:1px solid var(--line-input);border-radius:.625rem;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B6157' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat .625rem center;font-size:.9375rem;color:var(--ink)}
.select-search:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
/* ---------- in-app notice (replaces alert) and confirm (replaces confirm) ---------- */
.eluna-notice{position:fixed;left:50%;top:calc(4.75rem + env(safe-area-inset-top));transform:translate(-50%,-.75rem);z-index:100002;display:flex;align-items:flex-start;gap:.75rem;max-width:min(92vw,35rem);padding:.75rem .75rem .75rem 1.125rem;border-radius:.875rem;background:var(--ink);color:#fff;font-size:.9375rem;line-height:1.5;box-shadow:0 .75rem 2rem rgba(30,27,24,.35);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;white-space:pre-line}
.eluna-notice.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.eluna-notice .msg{flex:1}
.eluna-notice button{width:2rem;height:2rem;flex:none;border:0;border-radius:.5rem;background:rgba(255,255,255,.12);color:#fff}
.eluna-confirm{position:fixed;inset:0;z-index:100003;background:rgba(30,27,24,.48);display:flex;align-items:center;justify-content:center;padding:1rem}
.eluna-confirm .box{width:min(28rem,100%);background:#fff;border-radius:1.5rem;padding:1.625rem;box-shadow:0 1.875rem 4.375rem rgba(30,27,24,.35);display:flex;flex-direction:column;gap:1.125rem}
.eluna-confirm p{margin:0;font-size:1rem;line-height:1.6;color:var(--ink)}
.eluna-confirm .actions .btn{flex:1}
.menu-table .row-actions{display:grid!important;grid-template-columns:repeat(2,auto);justify-content:end;gap:.375rem!important}
.menu-table th,.stock-table th{white-space:nowrap}
.menu-table td .muted{white-space:nowrap}
.menu-table td.num,.stock-table td.num{white-space:nowrap}
h2 small.muted{font-size:.8125rem;font-weight:400;margin-left:.375rem}
/* bucket progress (native <progress>) */
progress{-webkit-appearance:none;appearance:none;width:100%;height:.5rem;border:0;border-radius:999px;background:var(--surface-2);overflow:hidden}
progress::-webkit-progress-bar{background:var(--surface-2);border-radius:999px}
progress::-webkit-progress-value{background:var(--primary);border-radius:999px}
progress::-moz-progress-bar{background:var(--primary);border-radius:999px}
.finance-form label:has(>input[type=checkbox]),.modalbox label:has(>input[type=checkbox]){display:flex!important;align-items:center;gap:.625rem;min-height:2.75rem;font-size:.875rem;color:var(--ink)}
.finance-form label>input[type=checkbox],.modalbox label>input[type=checkbox]{width:1.25rem;height:1.25rem;min-width:1.25rem!important;min-height:1.25rem!important;margin:0!important;flex:none}
.finance-form>.btn+.btn,.modalbox>.btn+.btn,.finance-form>div:not(.actions):not(.quick-list):not(.row2)>.btn+.btn{margin-left:.5rem}
.recipe-save-line{gap:.5rem;align-items:center;flex-wrap:wrap}
body:has(.eluna-confirm).finance-busy:after{display:none}
@media print{body{background:#fff!important}}
/* narrow iPad (portrait) and small laptops: the rail logo already carries the brand */
@media (max-width:1024px){.top .brand,.top-sep{display:none!important}}
@media (max-width:900px){.top-date{display:none}.cart-optsum span{display:none}.cart-optsum b{flex:1}}
.toprow>.page-title{flex:0 1 auto}
.header-tools{flex:0 0 auto}
.discount-line input::-webkit-inner-spin-button,.discount-line input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.discount-line input{-moz-appearance:textfield}

/* staff view: no cost, margin or stock value */
.is-staff .c-cost,tfoot.c-cost:is(.is-staff tfoot){display:none}
.stock-table.is-staff tfoot{display:none}
.quick-list .btn{margin-left:0!important}