/* =====================================================================
   Caisse Restaurant — UI tactile (tablette), thème sombre chaud
   Cibles ≥ 48px · chiffres tabulaires · icônes SVG · feedback à l'appui
   ===================================================================== */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
:root{
  /* surfaces */
  --bg:#14161c; --panel:#1c2029; --panel-2:#242a35; --panel-3:#2e3542; --line:#333b48;
  /* texte */
  --txt:#f3f6fb; --muted:#9aa6b8; --soft:#b6c0cf; --dim:#6b7686;
  /* couleurs sémantiques */
  --primary:#ef4d63; --on-primary:#fff; --primary-weak:rgba(239,77,99,.14);
  --gold:#e0a25b; --gold-weak:rgba(224,162,91,.16);
  --green:#27c08a; --green-d:#1fa676; --green-ink:#06231a;
  --danger:#ef4d63;
  /* formes */
  --r:18px; --r-sm:13px; --r-xs:10px;
  --shadow:0 14px 40px rgba(0,0,0,.42);
  --tap:52px;            /* hauteur cible tactile confortable */
  --sb:212px;
  --t:.18s cubic-bezier(.4,0,.2,1);
  font-size:16px;
}
html,body{height:100%;}
body{
  font-family:"Inter",system-ui,sans-serif;background:var(--bg);color:var(--txt);
  overflow:hidden;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,strong,b,.brand-txt strong{font-family:"Poppins",sans-serif;}
button{font-family:inherit;cursor:pointer;border:none;color:inherit;background:none;touch-action:manipulation;}
input{font-family:inherit;}
.num,.price,.lt,.total-row strong,.s-total,.h-total,.pr,.ta{font-variant-numeric:tabular-nums;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:10px;}

/* icônes SVG */
[data-icon],.ic,.svgw{display:inline-flex;align-items:center;justify-content:center;}
svg{width:24px;height:24px;flex:0 0 auto;}
.ic-sm svg{width:20px;height:20px;}
.ic-lg svg{width:28px;height:28px;}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}}

/* ===================== LAYOUT ===================== */
#app{display:flex;height:100dvh;}
.stage{flex:1;min-width:0;display:flex;}
.view{display:none;flex:1;min-width:0;}
#app.view-pos     .view[data-view="pos"]{display:flex;flex-direction:row;}
#app.view-orders  .view[data-view="orders"]{display:flex;flex-direction:column;}
#app.view-history .view[data-view="history"]{display:flex;flex-direction:column;}
#app.view-compta  .view[data-view="compta"]{display:flex;flex-direction:column;}
#app:not(.view-pos) .cats-wrap{display:none;}

/* ---- Sidebar ---- */
.sidebar{flex:0 0 var(--sb);background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:14px 12px;}
.brand{display:flex;align-items:center;gap:11px;padding:8px 8px 16px;}
.brand-mark{width:42px;height:42px;border-radius:12px;background:var(--primary-weak);color:var(--primary);}
.brand-mark svg{width:24px;height:24px;}
.brand-txt strong{font-size:17px;display:block;line-height:1.1;}
.brand-txt small{color:var(--muted);font-size:11px;letter-spacing:.6px;text-transform:uppercase;}

.mainnav{display:flex;flex-direction:column;gap:6px;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:12px;}
.nav-item{display:flex;align-items:center;gap:13px;min-height:var(--tap);padding:0 14px;border-radius:var(--r-sm);color:var(--soft);font-weight:600;font-size:15.5px;transition:var(--t);position:relative;}
.nav-item:active{transform:scale(.97);}
.nav-item:hover{background:var(--panel-2);color:var(--txt);}
.nav-item.active{background:var(--primary);color:var(--on-primary);}
.nav-item .ic{color:inherit;}
.nbadge{margin-left:auto;min-width:24px;height:24px;padding:0 7px;border-radius:12px;background:var(--green);color:var(--green-ink);font-size:12px;font-weight:700;display:none;align-items:center;justify-content:center;}
.nbadge.show{display:inline-flex;}
.nav-item.active .nbadge{background:#fff;color:var(--primary);}

.cats-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden;}
.cats-title{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--dim);padding:6px 10px 8px;}
.cats{display:flex;flex-direction:column;gap:5px;overflow-y:auto;flex:1;}
.cat{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 14px;border-radius:var(--r-sm);color:var(--soft);font-weight:500;font-size:15px;transition:var(--t);text-align:left;width:100%;border:1px solid transparent;}
.cat .dot{width:12px;height:12px;border-radius:50%;background:var(--c,var(--primary));flex:0 0 auto;}
.cat:active{transform:scale(.98);}
.cat:hover{background:var(--panel-2);color:var(--txt);}
.cat.active{background:var(--panel-2);color:#fff;border-color:var(--c,var(--primary));}
.sync-chip{margin-top:10px;display:flex;align-items:center;gap:13px;min-height:46px;padding:0 14px;border-radius:var(--r-sm);color:var(--dim);font-size:13.5px;font-weight:600;transition:var(--t);}
.sync-chip svg{width:20px;height:20px;}
.sync-chip:hover{background:var(--panel-2);}
.sync-chip:active{transform:scale(.97);}
.sync-chip.s-ok{color:var(--green);}
.sync-chip.s-sync{color:var(--blue);}
.sync-chip.s-err{color:var(--primary);}
.sync-chip.s-offline,.sync-chip.s-off,.sync-chip.s-idle{color:var(--dim);}
.settings-btn{margin-top:4px;display:flex;align-items:center;gap:13px;min-height:var(--tap);padding:0 14px;border-radius:var(--r-sm);color:var(--muted);font-size:14.5px;font-weight:500;transition:var(--t);}
.settings-btn:hover{background:var(--panel-2);color:var(--txt);}
.settings-btn:active{transform:scale(.97);}
.set-action{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;margin-top:6px;border-radius:12px;background:var(--primary-weak);color:var(--primary);border:1px solid rgba(239,77,99,.35);font-weight:600;font-size:15px;transition:var(--t);}
.set-action .ic svg{width:20px;height:20px;}
.set-action:hover{background:rgba(239,77,99,.2);color:#fff;}
.set-action:active{transform:scale(.98);}
.set-action:disabled{opacity:.55;cursor:default;}

/* ===================== VUE CAISSE ===================== */
.catalog{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;padding:20px 22px;}
.catalog-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;}
.catalog-head h2{font-size:23px;}
.head-right{display:flex;align-items:center;gap:14px;}
.clock{font-family:"Poppins";font-weight:600;font-size:15px;color:var(--soft);background:var(--panel);border:1px solid var(--line);border-radius:30px;padding:9px 16px;white-space:nowrap;font-variant-numeric:tabular-nums;}
.search-wrap{position:relative;display:flex;align-items:center;}
.search-wrap .ic{position:absolute;left:14px;color:var(--muted);pointer-events:none;}
#search{background:var(--panel);border:1px solid var(--line);color:var(--txt);height:50px;padding:0 16px 0 44px;border-radius:30px;width:260px;font-size:15px;outline:none;transition:var(--t);}
#search:focus{border-color:var(--primary);}
#search::placeholder{color:var(--muted);}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:14px;overflow-y:auto;align-content:start;padding-right:6px;padding-bottom:24px;}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;text-align:left;min-height:130px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .1s var(--t),border-color var(--t),background var(--t);overflow:hidden;}
.card::before{content:"";position:absolute;top:0;left:0;width:100%;height:5px;background:var(--c,var(--primary));}
.card:hover{background:var(--panel-2);border-color:var(--c,var(--primary));}
.card:active{transform:scale(.95);}
.card .nm{font-weight:600;font-size:16px;line-height:1.25;margin-bottom:6px;}
.card .ds{font-size:12px;color:var(--muted);line-height:1.4;flex:1;}
.card .pr{font-family:"Poppins";font-weight:600;font-size:18px;margin-top:10px;color:#fff;}
.card .supp-flag{position:absolute;top:10px;right:12px;font-size:10px;color:var(--gold);background:var(--gold-weak);padding:3px 8px;border-radius:20px;font-weight:700;letter-spacing:.3px;}

/* ---- Ticket ---- */
.ticket{flex:0 0 392px;background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden;}
.ctx-bar{display:flex;gap:8px;overflow-x:auto;padding:14px 16px 12px;border-bottom:1px solid var(--line);scrollbar-width:none;}
.ctx-bar::-webkit-scrollbar{display:none;}
.ctx-chip{flex:0 0 auto;min-height:44px;padding:0 16px;border-radius:30px;font-size:13.5px;font-weight:600;background:var(--panel-2);color:var(--soft);white-space:nowrap;border:1.5px solid transparent;transition:var(--t);display:inline-flex;align-items:center;}
.ctx-chip:active{transform:scale(.96);}
.ctx-chip.active{background:var(--primary);color:#fff;}
.ctx-chip .badge{display:inline-flex;align-items:center;justify-content:center;margin-left:8px;background:rgba(255,255,255,.22);min-width:22px;height:22px;padding:0 6px;border-radius:11px;font-size:12px;font-weight:700;}
.ctx-chip.busy:not(.active){border-color:var(--green);color:#fff;}
.ctx-chip.busy:not(.active) .badge{background:var(--green);color:var(--green-ink);}

.ticket-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px 8px;}
.th-id{text-align:left;display:flex;flex-direction:column;gap:2px;padding:4px 8px;border-radius:10px;transition:var(--t);min-width:0;}
.th-id:hover{background:var(--panel-2);}
.th-id:active{transform:scale(.98);}
.th-id h3{font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px;}
.ctx-meta{color:var(--muted);font-size:12px;}
.th-actions{display:flex;gap:8px;flex:0 0 auto;}
.iconbtn{display:inline-flex;align-items:center;gap:7px;min-width:48px;height:48px;padding:0 13px;border-radius:12px;background:var(--panel-2);color:var(--soft);font-weight:700;font-size:14px;transition:var(--t);}
.iconbtn:hover{background:var(--line);color:#fff;}
.iconbtn:active{transform:scale(.94);}
.iconbtn.primary{background:var(--primary);color:#fff;}
.iconbtn.primary:hover{background:#e23a52;color:#fff;}
.ctx-chip.new-chip{background:var(--primary-weak);color:var(--primary);border-color:transparent;font-weight:700;min-width:44px;padding:0 14px;}
.ctx-chip.new-chip:active{transform:scale(.94);}

.lines{flex:1;overflow-y:auto;padding:8px 12px;}
.empty{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;color:var(--muted);text-align:center;font-size:15px;gap:8px;padding:20px;}
.empty .ic{color:var(--dim);}
.empty span{font-size:13px;color:var(--dim);}
.line{background:var(--panel-2);border-radius:var(--r-sm);padding:12px;margin-bottom:10px;display:flex;gap:10px;align-items:flex-start;animation:pop .18s ease;}
@keyframes pop{from{opacity:0;transform:translateY(-5px);}to{opacity:1;transform:none;}}
.line .info{flex:1;min-width:0;}
.line .nm{font-weight:600;font-size:15px;}
.line .sub{font-size:12px;color:var(--gold);margin-top:3px;}
.line .price{font-size:12px;color:var(--muted);margin-top:3px;}
.line .right{display:flex;flex-direction:column;align-items:flex-end;gap:9px;}
.line .lt{font-family:"Poppins";font-weight:600;font-size:16px;}
.qty-ctrl{display:flex;align-items:center;background:var(--panel);border-radius:11px;overflow:hidden;}
.qty-ctrl button{width:44px;height:44px;display:grid;place-items:center;color:var(--soft);transition:var(--t);}
.qty-ctrl button:active{background:var(--primary);color:#fff;}
.qty-ctrl button:hover{background:var(--line);color:#fff;}
.qty-ctrl b{min-width:30px;text-align:center;font-size:15px;}
.qty-ctrl.big button{width:56px;height:56px;}
.qty-ctrl.big b{min-width:48px;font-size:19px;}
.line-actions{display:flex;gap:6px;}
.line-act{width:38px;height:34px;display:grid;place-items:center;border-radius:9px;background:var(--panel);color:var(--dim);transition:var(--t);}
.line-act svg{width:17px;height:17px;}
.line-act:hover{color:var(--primary);background:var(--line);}
.line-act:active{transform:scale(.92);}
.line-act.on{background:var(--gold-weak);color:var(--gold);}
.line.offert{border:1px solid rgba(224,162,91,.4);background:rgba(224,162,91,.07);}
.line.offert .lt{color:var(--gold);font-size:13px;}
.line .price s{color:var(--dim);}
.offert-tag{display:inline-block;margin-left:7px;font-size:10px;font-weight:700;color:var(--gold);background:var(--gold-weak);padding:2px 7px;border-radius:20px;vertical-align:middle;text-transform:uppercase;letter-spacing:.3px;}
.iconbtn.on{background:var(--gold-weak);color:var(--gold);}
.tk-lines .tl em{color:var(--gold);font-style:normal;font-size:12px;}

.totals{padding:14px 18px 6px;border-top:1px solid var(--line);}
.sub-row,.disc-row{display:flex;justify-content:space-between;font-size:14px;color:var(--soft);margin-bottom:5px;}
.disc-row{color:var(--gold);}
.total-row{display:flex;justify-content:space-between;align-items:baseline;margin-top:3px;}
.total-row span{font-size:15px;color:var(--soft);}
.total-row strong{font-family:"Poppins";font-size:30px;}
.count-row{font-size:12.5px;color:var(--muted);margin-top:4px;}
.link-btn{color:var(--gold);font-weight:600;font-size:12.5px;padding:4px;text-decoration:underline;text-underline-offset:2px;}

.ticket-actions{display:flex;gap:11px;padding:12px 18px 18px;}
.btn-clear{flex:0 0 104px;min-height:60px;background:var(--panel-2);color:var(--soft);border-radius:14px;font-weight:600;font-size:15px;transition:var(--t);}
.btn-clear:hover{background:var(--line);color:#fff;}
.btn-clear:active{transform:scale(.97);}
.btn-clear:disabled{opacity:.4;}
.btn-pay{flex:1;min-height:60px;background:var(--green);color:var(--green-ink);border-radius:14px;font-weight:700;font-size:17px;transition:var(--t);display:inline-flex;align-items:center;justify-content:center;gap:8px;}
.btn-pay:hover{background:var(--green-d);}
.btn-pay:active{transform:scale(.98);}
.btn-pay:disabled{opacity:.4;cursor:not-allowed;}

/* ===================== VUES PLEINE LARGEUR ===================== */
.view-head{display:flex;align-items:center;justify-content:space-between;padding:22px 26px 14px;flex-wrap:wrap;gap:14px;}
.view-head h2{font-size:25px;}
.head-tools{display:flex;align-items:center;gap:12px;}
.view-stats{display:flex;gap:12px;flex-wrap:wrap;}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 18px;min-width:120px;}
.stat .lab{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);}
.stat .val{font-family:"Poppins";font-size:22px;font-weight:600;margin-top:3px;}
.stat .val.green{color:var(--green);}
.stat .val.gold{color:var(--gold);}

/* Commandes */
.orders-grid{flex:1;overflow-y:auto;padding:8px 26px 26px;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:15px;align-content:start;}
.new-order-card{background:var(--primary-weak);border:2px dashed rgba(239,77,99,.5);border-radius:var(--r);min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--primary);font-family:"Poppins";font-weight:600;font-size:17px;transition:var(--t);}
.new-order-card .ic svg{width:34px;height:34px;}
.new-order-card:hover{background:rgba(239,77,99,.2);border-style:solid;}
.new-order-card:active{transform:scale(.97);}
.orders-cells{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:11px;margin-top:8px;}
.ocell{min-height:78px;border-radius:14px;background:var(--panel-2);border:2px solid transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-weight:600;transition:var(--t);padding:8px;text-align:center;}
.ocell:active{transform:scale(.95);}
.ocell:hover{border-color:var(--primary);}
.ocell .on{font-size:14px;}
.ocell .oa{font-size:11.5px;color:var(--green);font-weight:700;}
.ocell.busy{background:rgba(39,192,138,.13);border-color:var(--green);}
.ocell.special{background:var(--primary-weak);}
.ocell.newcell{background:var(--primary-weak);color:var(--primary);border:2px dashed rgba(239,77,99,.5);}
.scard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px;text-align:left;display:flex;flex-direction:column;gap:10px;min-height:150px;transition:transform .1s var(--t),border-color var(--t);position:relative;overflow:hidden;}
.scard:active{transform:scale(.97);}
.scard.busy{border-color:var(--green);}
.scard.busy::before{content:"";position:absolute;top:0;left:0;width:100%;height:5px;background:var(--green);}
.scard.free{opacity:.6;border-style:dashed;}
.scard:hover{opacity:1;border-color:var(--primary);}
.s-top{display:flex;align-items:center;justify-content:space-between;}
.s-name{font-family:"Poppins";font-weight:600;font-size:18px;}
.s-ico{color:var(--muted);}
.scard.busy .s-ico{color:var(--green);}
.s-mid{flex:1;}
.s-total{font-family:"Poppins";font-size:28px;font-weight:700;}
.s-info{font-size:12.5px;color:var(--muted);margin-top:4px;}
.s-open{font-size:13px;color:var(--muted);}
.s-cta{margin-top:auto;font-size:13px;font-weight:700;color:var(--primary);}
.scard.busy .s-cta{color:var(--green);}

/* Historique */
.seg{display:flex;background:var(--panel);border:1px solid var(--line);border-radius:30px;padding:4px;}
.seg button{min-height:42px;padding:0 18px;border-radius:24px;font-weight:600;font-size:14px;color:var(--soft);transition:var(--t);}
.seg button:active{transform:scale(.96);}
.seg button.on{background:var(--primary);color:#fff;}
.btn-z{min-height:50px;padding:0 20px;border-radius:14px;background:var(--gold-weak);color:var(--gold);font-weight:700;font-size:14.5px;display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(224,162,91,.35);transition:var(--t);}
.btn-z:hover{background:rgba(224,162,91,.26);}
.btn-z:active{transform:scale(.97);}
.view-stats.wide{padding:0 26px 14px;}
.history-list{flex:1;overflow-y:auto;padding:4px 26px 26px;display:flex;flex-direction:column;gap:10px;}
.hrow{display:flex;align-items:center;gap:16px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:0 18px;min-height:68px;transition:var(--t);text-align:left;width:100%;}
.hrow:hover{border-color:var(--primary);background:var(--panel-2);}
.hrow:active{transform:scale(.99);}
.hrow.void{opacity:.5;}
.hrow.void .h-label{text-decoration:line-through;}
.h-no{font-family:"Poppins";font-weight:700;color:var(--dim);font-size:14px;min-width:56px;}
.h-main{flex:1;min-width:0;}
.h-label{font-weight:600;font-size:15.5px;}
.h-sub{font-size:12.5px;color:var(--muted);margin-top:3px;}
.h-pay{font-size:12px;font-weight:600;padding:6px 12px;border-radius:20px;background:var(--panel-3);color:var(--soft);white-space:nowrap;}
.h-void-tag{font-size:11px;font-weight:700;color:var(--danger);background:var(--primary-weak);padding:5px 10px;border-radius:20px;}
.h-total{font-family:"Poppins";font-weight:700;font-size:18px;min-width:92px;text-align:right;}
.hist-empty{text-align:center;color:var(--muted);padding:70px 20px;font-size:15px;}

/* Comptabilité */
.compta-list{flex:1;overflow-y:auto;padding:4px 26px 26px;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:13px;align-content:start;}
.day-card{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:16px 18px;text-align:left;display:flex;flex-direction:column;gap:9px;transition:var(--t);}
.day-card:hover{border-color:var(--primary);background:var(--panel-2);}
.day-card:active{transform:scale(.99);}
.dc-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
.dc-date{font-family:"Poppins";font-weight:600;font-size:15.5px;text-transform:capitalize;}
.dc-ca{font-family:"Poppins";font-weight:700;font-size:19px;color:var(--green);}
.dc-sub{font-size:12.5px;color:var(--muted);}
.dc-methods{display:flex;flex-wrap:wrap;gap:7px;}
.dc-m{font-size:12px;font-weight:600;background:var(--panel-3);color:var(--soft);padding:5px 11px;border-radius:20px;}
.day-tk-title{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--dim);margin:14px 0 10px;}
.history-list.embedded{padding:0;max-height:42vh;overflow-y:auto;gap:8px;}

/* ===================== MODALES ===================== */
.overlay{position:fixed;inset:0;background:rgba(6,8,12,.62);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:var(--t);z-index:40;}
.overlay.show{opacity:1;pointer-events:auto;}
.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-46%) scale(.97);background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:24px;width:440px;max-width:93vw;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:var(--t);z-index:50;}
.modal.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1);}
.modal-wide{width:580px;}
.modal h3{font-size:21px;margin-bottom:6px;}
.modal-sub{color:var(--muted);font-size:13.5px;margin-bottom:16px;line-height:1.45;}
.modal-actions{display:flex;gap:10px;margin-top:22px;}
.modal-actions>button{min-height:var(--tap);}
.modal-actions .ghost{flex:0 0 auto;padding:0 22px;border-radius:13px;}
.modal-actions .btn-pay{flex:1;}
.ghost{background:var(--panel-2);min-height:46px;padding:0 16px;border-radius:11px;font-size:14px;font-weight:600;color:var(--soft);transition:var(--t);display:inline-flex;align-items:center;justify-content:center;gap:7px;}
.ghost:hover{background:var(--line);color:#fff;}
.ghost:active{transform:scale(.97);}

.supp-list{display:flex;flex-direction:column;gap:10px;margin-bottom:18px;}
.supp-item{display:flex;align-items:center;justify-content:space-between;min-height:58px;padding:0 16px;border-radius:13px;background:var(--panel-2);border:2px solid transparent;font-size:15.5px;font-weight:500;transition:var(--t);}
.supp-item:active{transform:scale(.99);}
.supp-item.on{border-color:var(--green);background:rgba(39,192,138,.12);}
.supp-item .pr{color:var(--gold);font-weight:600;}
.supp-item .check{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;color:#fff;}
.supp-item .check svg{width:15px;height:15px;opacity:0;}
.supp-item.on .check{background:var(--green);border-color:var(--green);}
.supp-item.on .check svg{opacity:1;}
.qty-picker{display:flex;align-items:center;justify-content:space-between;padding:8px 2px;}
.qty-picker span{color:var(--soft);font-size:16px;}
.qty-picker .qty-ctrl{background:var(--panel-2);}

.tables-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:11px;margin-top:8px;}
.table-cell{aspect-ratio:1;border-radius:15px;background:var(--panel-2);border:2px solid transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-weight:600;transition:var(--t);min-height:84px;}
.table-cell:active{transform:scale(.95);}
.table-cell:hover{border-color:var(--primary);}
.table-cell .tn{font-size:19px;}
.table-cell .tc{color:var(--soft);}
.table-cell .ta{font-size:11.5px;color:var(--green);font-weight:700;}
.table-cell.busy{background:rgba(39,192,138,.13);border-color:var(--green);}
.table-cell.special{background:var(--primary-weak);}

.pay-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;}
.ps-cell{background:var(--panel-2);padding:14px 18px;border-radius:14px;display:flex;flex-direction:column;gap:3px;}
.ps-cell span{color:var(--soft);font-size:13px;}
.ps-cell strong{font-family:"Poppins";font-size:24px;}
.ps-cell.rest strong{color:var(--gold);}
.ps-cell.rest.done strong{color:var(--green);}
.pay-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;}
.pay-entry>label,.pay-side>label{font-size:13px;color:var(--soft);display:block;margin-bottom:9px;}
.pay-entry>label small{color:var(--muted);font-weight:400;}
.pay-methods{display:flex;flex-direction:column;gap:9px;margin-bottom:12px;}
.pay-methods button{display:flex;align-items:center;gap:11px;min-height:58px;padding:0 16px;border-radius:13px;background:var(--panel-2);font-weight:600;font-size:15px;border:2px solid transparent;transition:var(--t);}
.pay-methods button:active{transform:scale(.97);}
.pay-methods button:hover{border-color:var(--line);}
.pay-methods button.on{border-color:var(--green);background:rgba(39,192,138,.16);color:#fff;}
.pay-methods button.on .ic{color:var(--green);}
.pay-methods button.on::after{content:"";margin-left:auto;width:8px;height:14px;border:solid var(--green);border-width:0 3px 3px 0;transform:rotate(45deg);margin-bottom:4px;}
.tenders{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;}
.tender{display:flex;align-items:center;gap:10px;background:rgba(39,192,138,.1);border:1px solid rgba(39,192,138,.4);border-radius:11px;padding:10px 12px;font-size:14px;}
.tender .tn-m{flex:1;font-weight:600;}
.tender .tn-a{font-family:"Poppins";font-weight:600;}
.tender button{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;color:var(--muted);transition:var(--t);}
.tender button:hover{background:var(--line);color:#fff;}
.tender button svg{width:16px;height:16px;}
.tip-box{margin-bottom:14px;}
.tip-box label{font-size:13px;color:var(--soft);display:block;margin-bottom:9px;}
.tip-box #tipShown{color:var(--gold);font-weight:600;margin-left:4px;}
.cash-box{background:var(--panel-2);border-radius:15px;padding:16px;margin-bottom:6px;}
.cash-box label{font-size:13px;color:var(--soft);display:block;margin-bottom:10px;}
.cash-quick{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
.cash-quick button{background:var(--panel);min-height:46px;padding:0 16px;border-radius:11px;font-weight:600;font-size:14px;color:var(--soft);transition:var(--t);}
.cash-quick button:active{background:var(--primary);color:#fff;}
.cash-quick button:hover{background:var(--line);color:#fff;}
.cash-quick button.on{background:var(--primary);color:#fff;}
#cashGiven,#discValue{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:15px;font-size:24px;color:#fff;text-align:right;font-family:"Poppins";outline:none;}
#cashGiven{caret-color:transparent;cursor:default;margin-bottom:12px;}
#cashGiven:focus,#discValue:focus{border-color:var(--primary);}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:12px 0 4px;}
.keypad button{min-height:56px;border-radius:13px;background:var(--panel);font-family:"Poppins";font-weight:600;font-size:22px;color:var(--txt);transition:var(--t);display:flex;align-items:center;justify-content:center;}
.keypad button:hover{background:var(--line);}
.keypad button:active{background:var(--primary);color:#fff;transform:scale(.95);}
.keypad .kp-back{color:var(--soft);}
.keypad .kp-back svg{width:26px;height:26px;}
.change-row{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);}
.change-row span{color:var(--soft);}
.change-row strong{font-family:"Poppins";font-size:23px;color:var(--gold);}
#discType{margin-bottom:14px;}
#discType button{flex:1;}
#discPresets{margin-bottom:14px;}

/* Détail ticket / Z */
.tk-lines{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
.tk-lines .tl{display:flex;justify-content:space-between;gap:10px;font-size:14.5px;padding:11px 13px;background:var(--panel-2);border-radius:11px;}
.tk-lines .tl small{display:block;color:var(--gold);font-size:12px;margin-top:2px;}
.tk-foot{border-top:1px dashed var(--line);padding-top:14px;display:flex;flex-direction:column;gap:8px;}
.tk-foot .r{display:flex;justify-content:space-between;font-size:14.5px;color:var(--soft);}
.tk-foot .r.big{font-family:"Poppins";font-size:21px;font-weight:700;color:var(--txt);}
.tk-foot .r.gold{color:var(--gold);}

.field{display:block;font-size:13px;color:var(--soft);margin-bottom:16px;}
.field input{width:100%;margin-top:8px;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;min-height:50px;padding:0 14px;font-size:15px;color:#fff;outline:none;}
.field input:focus{border-color:var(--primary);}
.check-field{display:flex;align-items:center;gap:12px;font-size:14.5px;color:var(--soft);margin-bottom:16px;cursor:pointer;min-height:46px;}
.check-field input{width:24px;height:24px;accent-color:var(--primary);}
.set-danger{margin-top:6px;}
.btn-danger{width:100%;min-height:50px;background:var(--primary-weak);color:var(--danger);border:1px solid rgba(239,77,99,.4);border-radius:12px;font-weight:600;font-size:14.5px;transition:var(--t);}
.btn-danger:hover{background:rgba(239,77,99,.22);}
.btn-danger:active{transform:scale(.98);}
.btn-danger.thin{flex:0 0 auto;width:auto;padding:0 16px;font-size:13.5px;}

/* ===================== TOAST ===================== */
#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(24px);background:#0c1014;color:#fff;padding:15px 26px;border-radius:30px;font-weight:600;font-size:15px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:var(--t);z-index:60;border:1px solid var(--line);display:flex;align-items:center;gap:10px;}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
#toast.ok{border-color:var(--green);}
#toast .ic{color:var(--green);}

/* ===================== PRINT ===================== */
#printArea{display:none;}
@media print{
  body *{visibility:hidden;}
  #printArea,#printArea *{visibility:visible;}
  #printArea{display:block;position:absolute;left:0;top:0;width:80mm;padding:6mm;color:#000;font-family:"Inter",monospace;font-size:12px;}
  .rcpt-h{text-align:center;margin-bottom:8px;}
  .rcpt-h strong{font-size:16px;font-family:"Poppins";}
  .rcpt-h div{font-size:11px;}
  .rcpt-line{display:flex;justify-content:space-between;margin:3px 0;}
  .rcpt-line small{display:block;color:#444;}
  .rcpt-sep{border-top:1px dashed #000;margin:8px 0;}
  .rcpt-tot{display:flex;justify-content:space-between;font-weight:bold;font-size:15px;}
  .rcpt-f{text-align:center;margin-top:12px;font-size:11px;}
}

/* ===================== RESPONSIVE ===================== */
/* Tablettes paysage / petits laptops : on GARDE les libellés, on resserre */
@media (max-width:1200px){
  :root{--sb:192px;}
  .ticket{flex-basis:360px;}
  .clock{display:none;}
  .lbl-new{display:none;}                 /* "+ Commande" → icône seule */
  .grid{grid-template-columns:repeat(auto-fill,minmax(152px,1fr));}
  .sidebar{padding:14px 10px;}
}
@media (max-width:1000px){
  :root{--sb:176px;}
  .ticket{flex-basis:338px;}
  .catalog{padding:16px;}
  .catalog-head h2{font-size:20px;}
  .nav-item,.cat{font-size:14.5px;}
  .cat{min-height:46px;}
  .grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:11px;}
  .card{min-height:118px;padding:14px;}
}
/* Téléphones / petites tablettes portrait : barre du haut + ticket en bas */
@media (max-width:820px){
  :root{--sb:100%;}
  #app{flex-direction:column;}
  .sidebar{flex:0 0 auto;flex-direction:row;flex-wrap:wrap;border-right:none;border-bottom:1px solid var(--line);padding:8px 10px;align-items:center;gap:8px;}
  .brand{display:none;}
  .mainnav{flex-direction:row;border-bottom:none;padding:0;margin:0;gap:8px;}
  .nav-item{padding:0 16px;}
  .nav-item .lbl{display:inline;}
  .settings-btn{margin:0 0 0 auto;padding:0 16px;width:auto;}
  .settings-btn .lbl{display:inline;}
  /* catégories en bande horizontale (2e ligne) */
  .cats-wrap{flex:1 0 100%;order:3;overflow:visible;}
  .cats-title{display:none;}
  .cats{flex-direction:row;overflow-x:auto;gap:7px;padding-bottom:2px;scrollbar-width:none;}
  .cats::-webkit-scrollbar{display:none;}
  .cat{flex:0 0 auto;min-height:42px;border:1px solid var(--line);padding:0 14px;}
  #app.view-pos .view[data-view="pos"]{position:relative;}
  .ticket{position:fixed;inset:auto 0 0 0;height:66dvh;border-left:none;border-top:1px solid var(--line);border-radius:22px 22px 0 0;transform:translateY(calc(100% - 72px));transition:.3s;z-index:30;flex-basis:auto;box-shadow:0 -12px 34px rgba(0,0,0,.45);}
  .ticket.open{transform:translateY(0);}
  .catalog{padding-bottom:84px;}

  /* ===== Modales plein écran, tout visible, actions ancrées en bas ===== */
  .overlay{backdrop-filter:none;}
  .modal{
    top:0;left:0;right:0;bottom:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;
    border-radius:0;border:0;display:flex;flex-direction:column;
    padding:14px 14px max(14px,env(safe-area-inset-bottom));overflow-y:auto;
  }
  .modal.show{transform:none;}
  .modal-wide{width:100vw;}
  .modal h3{font-size:19px;margin-bottom:4px;}
  .modal-sub{margin-bottom:10px;}
  .modal-actions{margin-top:auto;padding-top:12px;}
  .modal-actions>button{min-height:54px;}
  /* listes longues : scroll interne discret plutôt que pousser la modale */
  .supp-list,.tk-lines,.tables-grid,.orders-cells{overflow-y:auto;}

  /* ----- Encaissement compact : 2 colonnes conservées (pavé | moyens) ----- */
  .pay-summary{margin-bottom:10px;gap:8px;}
  .ps-cell{padding:11px 13px;}
  .ps-cell strong{font-size:21px;}
  .tip-box{margin-bottom:9px;}
  .tip-box label{margin-bottom:6px;}
  .pay-cols{grid-template-columns:1.05fr .95fr;gap:10px;}
  .pay-entry>label,.pay-side>label{margin-bottom:6px;}
  #cashGiven{padding:11px;font-size:20px;margin-bottom:9px;}
  .cash-quick{margin-bottom:8px;gap:6px;}
  .cash-quick button{min-height:42px;padding:0 12px;}
  .keypad{gap:7px;margin:0;}
  .keypad button{min-height:0;height:46px;font-size:19px;}
  .pay-methods{gap:8px;margin-bottom:9px;}
  .pay-methods button{min-height:50px;}
  .tenders{margin-bottom:6px;}
}

/* Écrans courts (paysage, petites tablettes) : on comprime encore le pavé */
@media (max-height:620px){
  .keypad button{height:40px;font-size:17px;}
  .pay-methods button{min-height:46px;}
  .ps-cell strong{font-size:19px;}
  .modal-actions>button{min-height:48px;}
}

/* iPad & tablettes paysage : encaissement sans scroll vertical */
@media (min-width:821px) and (max-height:920px){
  #payModal{max-height:96dvh;}
  #payModal .pay-summary{margin-bottom:10px;}
  #payModal .ps-cell{padding:11px 14px;}
  #payModal .ps-cell strong{font-size:21px;}
  #payModal .tip-box{margin-bottom:9px;}
  #payModal .tip-box label{margin-bottom:6px;}
  #payModal .pay-entry>label,#payModal .pay-side>label{margin-bottom:6px;}
  #payModal #cashGiven{padding:11px;font-size:20px;margin-bottom:9px;}
  #payModal .cash-quick{margin-bottom:8px;gap:7px;}
  #payModal .cash-quick button{min-height:42px;}
  #payModal .keypad{gap:8px;}
  #payModal .keypad button{height:50px;min-height:0;font-size:20px;}
  #payModal .pay-methods button{min-height:52px;}
  #payModal .modal-actions{margin-top:14px;}
}
@media (min-width:821px) and (max-height:760px){
  #payModal .keypad button{height:44px;font-size:18px;}
  #payModal .ps-cell strong{font-size:19px;}
  #payModal .cash-quick button{min-height:38px;}
  #payModal .pay-methods button{min-height:48px;}
}