/* "Modern" look for the POS (opt-in per device: Staff & settings -> Look). CSS only, scoped under html.ui-modern,
   so Classic is untouched and no behaviour changes. Sell screen first; other screens follow one by one.
   Same tokens as the rest of the POS (ds/auz.css): flat, small type, hairlines, big radius, quiet shadows. */
html.ui-modern .sell{background:var(--bg)}
html.ui-modern .sell .items-head{gap:8px}
html.ui-modern .sell .search .input{min-height:40px;border-radius:999px;background:var(--card);box-shadow:0 0 0 1px var(--sep);font-size:14px;padding-left:40px}
/* category chips: thin outlined pills, selected = solid ink */
html.ui-modern .cat-chips{gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
html.ui-modern .cat-chips::-webkit-scrollbar{display:none}
html.ui-modern .cat-chips .chip{flex:none;min-height:32px;padding:0 12px;border-radius:999px;background:transparent;box-shadow:0 0 0 1px var(--sep2);font-size:12.5px;font-weight:500;color:var(--label2)}
html.ui-modern .cat-chips .chip.on{background:var(--label);color:var(--bg);box-shadow:none}
html.ui-modern .cat-chips .chip .n,html.ui-modern .cats button .n{font-size:11px;opacity:.55;margin-left:6px}
html.ui-modern .cats button{min-height:38px;border-radius:999px;font-size:13px;font-weight:500}
html.ui-modern .cats button.on{background:var(--label);color:var(--bg)}
/* item tiles: picture on top, name and price underneath, no heavy card */
html.ui-modern .items{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
html.ui-modern .tile{min-height:0;padding:0;gap:0;background:transparent;box-shadow:none;border-radius:var(--r3);overflow:visible;justify-content:flex-start}
html.ui-modern .tile.has-img img{width:100%;height:auto;aspect-ratio:1/1;margin:0;border-radius:var(--r3);box-shadow:0 0 0 .5px var(--sep)}
html.ui-modern .tile:not(.has-img)::before{content:"";display:block;width:100%;aspect-ratio:1/1;border-radius:var(--r3);background:var(--fill3);box-shadow:0 0 0 .5px var(--sep);order:-1}
html.ui-modern .tile .nm{font-size:12.5px;font-weight:600;line-height:1.25;padding:8px 2px 0}
html.ui-modern .tile .pr{font-size:12px;padding:2px 2px 0;color:var(--label2)}
html.ui-modern .tile .offwhy{font-size:11px;padding:2px 2px 0}
html.ui-modern .tile .qty{top:6px;right:6px;min-width:22px;height:22px;line-height:22px;font-size:12px;border-radius:11px;background:var(--label);color:var(--bg)}
html.ui-modern .tile:active{transform:scale(.98)}
/* the order ticket: quiet, small type, hairline rows */
html.ui-modern .sell .ticket-pane{background:var(--card);border-left:0;box-shadow:-1px 0 0 var(--sep)}
html.ui-modern .tk-h{padding:12px 14px 8px}
html.ui-modern .tk-h .ttl b{font-size:16px;font-weight:700}
html.ui-modern .tk-meta .chip{min-height:28px;font-size:12px;padding:0 10px;border-radius:999px;background:transparent;box-shadow:0 0 0 1px var(--sep2)}
html.ui-modern .tk-meta .chip.set{background:var(--fill2);color:var(--label);box-shadow:none}
html.ui-modern .tk-cust .input{min-height:36px;font-size:14px;border-radius:12px}
html.ui-modern .ln{padding:9px 14px}
html.ui-modern .ln .lt b{font-size:13.5px;font-weight:600}
html.ui-modern .ln .lt span{font-size:11.5px}
html.ui-modern .ln .lp{font-size:13.5px;font-weight:600}
html.ui-modern .stepper{border-radius:999px}
html.ui-modern .tk-sum{padding:8px 14px;gap:3px}
html.ui-modern .tk-sum .r{font-size:12.5px}
html.ui-modern .tk-sum .r.tot{font-size:18px;color:var(--label)}
html.ui-modern .tk-act{padding:8px 14px calc(12px + env(safe-area-inset-bottom));gap:6px}
html.ui-modern .tk-act .btn{min-height:40px;font-size:13px;border-radius:999px}
html.ui-modern .tk-act .btn.pay{min-height:46px;font-size:14px;background:var(--label);color:var(--bg)}
/* phone cart bar: slim floating pill */
html.ui-modern .cart-bar{margin:0 12px 10px;padding:6px 6px 6px 16px;border-radius:999px;background:var(--label);box-shadow:0 8px 24px -10px rgba(0,0,0,.5)}
html.ui-modern .cart-bar .ct b{font-size:15px}
html.ui-modern .cart-bar .ct span{font-size:11.5px}
html.ui-modern .cart-bar .btn{min-height:38px;border-radius:999px;font-size:13px;background:var(--bg);color:var(--label)}
html.ui-modern .cart-bar .btn.ghost{background:rgba(128,128,128,.28);color:var(--bg)}

/* ---- the other POS screens: flat, hairlines, small type, outlined controls ---- */
html.ui-modern .navbar{background:var(--bg);border-bottom:.5px solid var(--sep)}
html.ui-modern .page{gap:12px}
html.ui-modern .page-head .eyebrow{display:none}
html.ui-modern .page-head h1{font-size:21px;font-weight:700;letter-spacing:-.025em}
html.ui-modern .page-head .sub{font-size:12px}
html.ui-modern .btn{min-height:38px;border-radius:999px;background:transparent;box-shadow:0 0 0 1px var(--sep2);font-size:13px;font-weight:600}
html.ui-modern .btn.fill,html.ui-modern .btn.tinted{box-shadow:none}
html.ui-modern .btn.fill{background:var(--label);color:var(--bg)}
html.ui-modern .btn.tinted{background:var(--fill2)}
html.ui-modern .chip{min-height:30px;padding:0 12px;border-radius:999px;background:transparent;box-shadow:0 0 0 1px var(--sep2);font-size:12.5px;font-weight:500}
html.ui-modern .chip.on{background:var(--label);color:var(--bg);box-shadow:none}
html.ui-modern .seg{background:transparent;box-shadow:0 0 0 1px var(--sep2);border-radius:999px}
html.ui-modern .seg button{border-radius:999px;min-height:30px;font-size:13px}
html.ui-modern .seg button.on{background:var(--label);color:var(--bg);box-shadow:none}
html.ui-modern .card,html.ui-modern .list{box-shadow:0 0 0 1px var(--sep);border-radius:16px}
html.ui-modern .li{min-height:46px;padding:8px 14px}
html.ui-modern .li .t{font-size:14px}
html.ui-modern .li .s{font-size:12px}
html.ui-modern .sec-h h3{font-size:14px;letter-spacing:0;text-transform:uppercase;color:var(--label3);font-weight:600}
html.ui-modern .tabbar button{font-size:10.5px}
html.ui-modern .nav button,html.ui-modern .nav a{font-size:13px;border-radius:999px}
html.ui-modern .nav button.on{background:var(--label);color:var(--bg)}
/* tables: plain outlined tiles, the status is only a small dot */
html.ui-modern .tables{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
html.ui-modern .tbl-tile{min-height:84px;padding:10px 12px;border-radius:14px;box-shadow:0 0 0 1px var(--sep);background:transparent}
html.ui-modern .tbl-tile::before{left:auto;right:10px;top:12px;bottom:auto;width:8px;height:8px;border-radius:50%;background:#34c759}
html.ui-modern .tbl-tile.st-placed::before,html.ui-modern .tbl-tile.st-served::before,html.ui-modern .tbl-tile.st-dirty::before{background:#8e8e93}
html.ui-modern .tbl-tile.st-kot::before,html.ui-modern .tbl-tile.st-prep::before{background:#ff9500}
html.ui-modern .tbl-tile.st-bill::before{background:var(--accent)}
html.ui-modern .tbl-tile.st-res::before{background:#007aff}
html.ui-modern .tbl-tile.st-ready,html.ui-modern .tbl-tile.st-dirty{background:transparent}
html.ui-modern .tbl-tile .tn{font-size:16px;font-weight:700}
html.ui-modern .tbl-tile.sel{box-shadow:0 0 0 2px var(--label)}
html.ui-modern .tbl-detail,html.ui-modern .tbl-side .card,html.ui-modern .tbl-wrap,html.ui-modern .tbl-main{border-radius:16px}
html.ui-modern .tstats>*{border-radius:12px;box-shadow:0 0 0 1px var(--sep)}
/* kitchen: outlined tickets, a thin colour line on top */
html.ui-modern .kc{border-radius:14px;box-shadow:0 0 0 1px var(--sep);background:var(--card)}
html.ui-modern .kc-h{background:transparent;padding:10px 12px 4px}
html.ui-modern .kc-h b{font-size:15px}
html.ui-modern .kc-b{font-size:13px}
html.ui-modern .banner,html.ui-modern .dban{border-radius:14px;font-size:13px}
html.ui-modern .pill{font-size:11px;border-radius:999px}
html.ui-modern .toast{border-radius:999px;font-size:13px}
html.ui-modern .login .card{border-radius:22px}
html.ui-modern .tbl-tile .tmeta{flex-direction:column;align-items:flex-start;gap:3px}
html.ui-modern .tbl-tile .tinfo{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
html.ui-modern .tbl-tile .ttop{align-items:flex-start}
html.ui-modern .li:has(> .seg){flex-wrap:wrap}
html.ui-modern .li:has(> .seg)>.seg{margin-left:0;flex:1 1 100%}