/* Sit'n Dip POS — burgundy brand theme, tablet-optimized */
:root{
  --choc:#161616;
  --choc-dark:#000000;
  --choc-light:#3d3d3d;
  --cream:#f7f7f7;
  --cream-dark:#e9e9e9;
  --caramel:#9a9a9a;
  --gold:#161616;
  --ink:#171717;
  --muted:#757575;
  --green:#818181;
  --green-bg:#efefef;
  --orange:#8c8c8c;
  --orange-bg:#ededed;
  --grey:#9a9a9a;
  --grey-bg:#ececec;
  --red:#555555;
  --red-bg:#e9e9e9;
  --card:#ffffff;
  --radius:14px;
  --shadow:0 2px 10px rgba(0,0,0,.12);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;
  background:var(--cream);
  color:var(--ink);
  font-size:18px;
  min-height:100vh;
}
.hidden{display:none !important;}
.muted{color:var(--muted);}
.error{color:var(--red); background:var(--red-bg); padding:12px; border-radius:10px; margin-top:14px; font-weight:600;}

/* ---------- Buttons ---------- */
.btn{
  border:none; border-radius:12px; padding:14px 20px;
  font-size:18px; font-weight:700; cursor:pointer;
  min-height:56px; touch-action:manipulation;
  background:var(--cream-dark); color:var(--ink);
}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--choc); color:#ffffff;}
.btn-primary:disabled{background:#aaaaaa; cursor:not-allowed;}
.btn-big{width:100%; font-size:20px; padding:18px;}
.btn-ghost{background:transparent; color:var(--choc); border:2px solid var(--caramel);}
.btn-danger{background:var(--red); color:#ffffff;}
.btn-success{background:var(--green); color:#ffffff;}
.btn-warning{background:var(--orange); color:#ffffff;}
.btn-clock{background:#ffffff; color:#161616;}
.big-select{
  width:100%; font-size:18px; padding:14px; border-radius:12px;
  border:2px solid var(--caramel); background:#ffffff; min-height:56px;
}
input[type="number"], input[type="text"], input[type="password"], textarea, select{
  font-size:18px;
}

/* ---------- Login ---------- */
#view-login,#view-otp,#view-totp{position:fixed; inset:0; overflow-y:auto; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--choc-dark), var(--choc-light));}
.login-card{
  background:var(--cream); border-radius:20px; padding:36px; width:min(420px, 92vw);
  text-align:center; box-shadow:0 8px 40px rgba(0,0,0,.35);
}
.login-logo{font-size:52px; line-height:1.1; font-weight:900; color:var(--choc);}
.login-logo img{width:110px; height:110px; display:block; margin:0 auto;}
.login-brand{display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:6px;}
.login-brand img{width:48px; height:48px; display:block;}
.login-brand span{font-size:30px; font-weight:800; letter-spacing:-.5px; color:var(--ink);}
.brand-logo{width:38px; height:38px; vertical-align:-10px; margin-right:10px;}
.ts-widget{display:flex; justify-content:center; margin:14px 0 4px;}
.ts-widget:empty{display:none;}
.otp-input{
  font-size:36px; letter-spacing:12px; text-align:center; margin:16px 0;
  padding:12px; border-radius:12px; border:2px solid var(--caramel);
  width:100%; font-weight:800; color:var(--choc);
}
.btn-block{width:100%; margin-top:10px;}
.small{font-size:13px;}
.login-card h2{margin:12px 0 4px;}
.pin-display{
  display:flex; justify-content:center; align-items:center; gap:20px;
  margin:18px 0; background:#ffffff; border-radius:12px; padding:22px 14px; border:2px solid var(--caramel);
  min-height:68px; box-sizing:border-box;
}
.pin-display span{width:20px; height:20px; border-radius:50%; background:#d8d8d8; flex:none;}
.pin-display span.on{background:var(--ink);}
#login-error{min-height:48px; box-sizing:border-box;}
#login-error.hidden{display:block !important; visibility:hidden;}
.pin-pad{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.pin-pad button{
  font-size:28px; font-weight:800; padding:18px 0; border-radius:14px;
  border:none; background:var(--choc); color:#ffffff; min-height:72px; cursor:pointer;
}
.pin-pad button:active{transform:scale(.95);}
.pin-pad button{touch-action:manipulation; -webkit-tap-highlight-color:transparent;}
.pin-pad .key-fn{background:var(--grey);}
.pin-pad .key-ok{background:var(--green);}

/* ---------- Header / tabs ---------- */
#app-header{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--choc-dark); color:#ffffff; padding:12px 20px; position:sticky; top:0; z-index:50;
}
.brand{font-size:24px; font-weight:900;}
.brand-sub{font-size:15px; font-weight:400; color:#a3a3a3; margin-left:8px;}
.header-right{display:flex; align-items:center; gap:12px;}
.user-chip{background:#242424; border:1px solid #3a3a3a; padding:10px 16px; border-radius:20px; font-weight:700; font-size:16px;}
.user-chip .role{color:#a3a3a3; font-size:13px; display:block; font-weight:400;}
#btn-logout, #btn-finish{border-color:var(--gold); color:#ffffff; min-height:48px; padding:8px 16px; font-size:16px;}

#tabs{display:flex; gap:8px; padding:10px 16px; background:var(--cream-dark);
  position:sticky; top:64px; z-index:40; overflow-x:auto;}
.tab{
  flex:1; white-space:nowrap; border:none; border-radius:12px; padding:14px 10px;
  font-size:17px; font-weight:700; background:#ffffff; color:var(--choc); cursor:pointer;
  min-height:56px; box-shadow:var(--shadow);
}
.tab.active{background:var(--choc); color:#ffffff;}
.badge{background:var(--red); color:#ffffff; border-radius:12px; padding:2px 10px; font-size:14px; margin-left:4px;}

/* Tab panes: only the active one is visible */
.tabpane{display:none;}
.tabpane.active{display:block;}

#main{padding:16px; max-width:1400px; margin:0 auto;}

/* ---------- Order layout ---------- */
.order-layout{display:grid; grid-template-columns:1fr 380px; gap:16px; align-items:start;}
.chips{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px;}
.prod-search{position:relative; margin-bottom:12px;}
.prod-search .big-input{padding-right:48px; padding-left:40px;}
.ps-ic{position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#8a8f98; pointer-events:none; font-size:17px;}
.prod-search button{position:absolute; right:8px; top:50%; transform:translateY(-50%); border:none; background:#eeeeee; width:38px; height:38px; border-radius:50%; font-size:18px; line-height:1; cursor:pointer; color:#666666;}
.prod-search button.hidden{display:none;}
.chip{
  border:2px solid var(--caramel); background:#ffffff; border-radius:24px;
  padding:12px 22px; font-size:17px; font-weight:700; cursor:pointer; color:var(--choc);
}
.chip.active{background:var(--choc); color:#ffffff; border-color:var(--choc);}
.product-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:12px;}
.product-card{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:16px 10px; text-align:center; cursor:pointer; border:2px solid transparent;
}
.product-card:active{border-color:var(--choc); transform:scale(.97);}
.product-card .emoji{font-size:44px;}
.product-card .cat-fallback{font-size:38px;display:flex;align-items:center;justify-content:center;color:#8f8f8f;}
.product-card .pvisual{position:relative; height:92px; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:12px; background:#f3f3f3;}
.product-card .pvisual .emoji{font-size:44px;}
.product-card .pimg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.product-card .pname{font-weight:700; margin:8px 0 4px; font-size:16px; min-height:44px;}
.product-card .pprice{color:var(--choc); font-weight:800; font-size:17px;}

/* ---------- Cart ---------- */
.cart{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:16px; position:sticky; top:150px;}
.cart h3{margin:0 0 12px;}
.order-type-row{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px;}
.btn-type{padding:12px 4px; font-size:15px; min-height:52px;}
.btn-type.active{background:var(--choc); color:#ffffff;}
.table-picker-wrap{margin-bottom:12px;}
.table-picker-wrap label{font-weight:700; display:block; margin-bottom:6px;}
.cart-lines{max-height:300px; overflow-y:auto; margin-bottom:10px;}
.cart-line{background:var(--cream); border-radius:10px; padding:10px 12px; margin-bottom:8px;}
.cart-line .cl-top{display:flex; justify-content:space-between; align-items:center; font-weight:700;}
.cart-line .cl-mods{font-size:14px; color:var(--muted);}
.cart-line .cl-notes{font-size:14px; color:var(--muted); font-style:italic;}
.cart-line .cl-actions{display:flex; gap:8px; margin-top:8px; align-items:center;}
.qty-btn{width:44px; height:44px; border-radius:10px; border:none; background:var(--choc);
  color:#ffffff; font-size:22px; font-weight:800; cursor:pointer;}
.qty{font-size:20px; font-weight:800; min-width:34px; text-align:center;}
.cl-remove{margin-left:auto; background:none; border:none; color:var(--red); font-size:20px; cursor:pointer; min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center;}
.cart-totals{border-top:2px dashed var(--caramel); padding-top:10px; margin-bottom:10px;}
.cart-totals .row{display:flex; justify-content:space-between; margin:4px 0;}
.cart-totals .row.total{font-size:22px; font-weight:900; color:var(--choc);}
.cart-empty{color:var(--muted); text-align:center; padding:20px 0;}
#btn-submit-order{margin-top:8px;}
#btn-clear-cart{width:100%; margin-top:8px;}

/* ---------- Tables ---------- */
.legend{display:flex; gap:20px; margin-bottom:14px; font-weight:600;}
.dot{display:inline-block; width:16px; height:16px; border-radius:50%; margin-right:6px;}
.dot-green{background:var(--green);} .dot-orange{background:var(--orange);} .dot-grey{background:var(--grey);}
.dot-blue{background:#585858;}
.zone-title{font-size:22px; font-weight:900; color:var(--choc); margin:18px 0 10px;}
.floor-map{display:grid; grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); gap:14px;}
.table-card{
  border-radius:var(--radius); padding:18px 8px; text-align:center; cursor:pointer;
  font-weight:800; font-size:20px; min-height:110px; display:flex; flex-direction:column;
  justify-content:center; gap:4px; box-shadow:var(--shadow); border:3px solid transparent; color:#ffffff;
}
.table-card .seats{font-size:14px; font-weight:400;}
.table-card.available{background:var(--green);}
.table-card.occupied{background:var(--orange);}
.table-card.reserved{background:var(--grey);}
.table-card:active{transform:scale(.96);}

/* ---------- Plan visuel (reprend l'éditeur Admin) ---------- */
.plan-zone{margin-bottom:8px;}
.plan-canvas{position:relative;width:100%;max-width:1100px;aspect-ratio:1000/650;
  background-color:var(--card,#ffffff);
  background-image:linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px);
  background-size:5% 7.6923%;
  border:2px solid var(--choc);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}
.plan-table{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;color:#ffffff;font-weight:800;cursor:pointer;box-shadow:var(--shadow);box-sizing:border-box;
  border:3px solid rgba(255,255,255,.55);}
.plan-table b{font-size:clamp(11px,1.6vw,18px);line-height:1.1;pointer-events:none;}
.plan-table span{font-size:clamp(9px,1.2vw,13px);font-weight:400;pointer-events:none;}
.plan-table.available{background:var(--green);}
.plan-table.occupied{background:var(--orange);}
.plan-table.bill{background:#585858;}
.plan-table.reserved{background:var(--grey);}
.plan-table:active{transform:scale(.96);}
.plan-bill{font-size:clamp(12px,1.8vw,20px);}
.plan-item{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0;background:rgba(14,124,123,.14);border:2px dashed rgba(14,124,123,.75);color:#494949;
  pointer-events:none;box-sizing:border-box;}
.plan-item span{font-size:clamp(12px,1.8vw,20px);line-height:1;}
.plan-item em{font-style:normal;font-size:clamp(8px,1vw,11px);font-weight:700;line-height:1.1;}

/* ---------- Orders list ---------- */
.orders-list{display:grid; grid-template-columns:repeat(auto-fill, minmax(340px,1fr)); gap:14px;}
.order-card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px;}
.order-card .oc-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;}
.order-card .oc-num{font-size:20px; font-weight:900; color:var(--choc);}
.status-pill{padding:6px 14px; border-radius:16px; font-size:14px; font-weight:800; color:#ffffff;}
.status-open{background:var(--choc-light);} .status-sent{background:var(--orange);}
.status-ready{background:var(--green);} .status-served{background:#787878;}
.order-card .oc-meta{color:var(--muted); font-size:15px; margin-bottom:8px;}
.web-badge{display:inline-block; background:#696969; color:#ffffff; font-size:13px; font-weight:800; padding:3px 10px; border-radius:12px; vertical-align:middle;}
.oc-web{background:#f4f4f4; border:1px solid #dadada; border-radius:10px; padding:8px 10px; margin-bottom:8px; font-size:14px; line-height:1.5;}
.oc-web-cust{font-weight:600;}
.oc-web-addr{color:#333333;}
.oc-web-ref{color:var(--muted); font-size:13px;}
.order-card .oc-elapsed{font-weight:800; color:var(--choc);}
.order-card .oc-items{font-size:15px; margin:8px 0; background:var(--cream); border-radius:10px; padding:10px;}
.order-card .oc-total{font-size:22px; font-weight:900; color:var(--choc); margin:8px 0;}
.oc-actions{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.oc-actions .btn{font-size:16px; min-height:52px; padding:10px;}
.empty-state{text-align:center; color:var(--muted); padding:60px 20px; font-size:20px;}

/* ---------- Cash session ---------- */
.cash-content{max-width:760px; margin:0 auto;}
.cash-card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:28px; margin-bottom:16px;}
.cash-card h2{margin-top:0; color:var(--choc);}
.cash-card .big-label{font-weight:700; display:block; margin:16px 0 8px;}
.amount-input{width:100%; font-size:28px; padding:16px; border-radius:12px;
  border:2px solid var(--caramel); text-align:center; font-weight:800;}
.quick-amounts{display:flex; gap:8px; flex-wrap:wrap; margin:12px 0;}
.quick-amounts button{border:2px solid var(--caramel); background:#ffffff; border-radius:10px;
  padding:10px 16px; font-size:16px; font-weight:700; cursor:pointer; color:var(--choc);}
.session-info{background:var(--cream); border-radius:12px; padding:16px; margin:12px 0;}
.session-info .row{display:flex; justify-content:space-between; padding:6px 0; font-size:18px;}
.session-info .row b{color:var(--choc);}
.session-open-pill{display:inline-block; background:var(--green-bg); color:var(--green);
  padding:6px 16px; border-radius:16px; font-weight:800;}

/* blocked screen */
.blocked-screen{border:3px solid var(--red); border-radius:var(--radius); background:#ffffff;
  padding:24px; margin-bottom:16px;}
.blocked-screen h2{color:var(--red); margin-top:0;}
.blocker-list{margin:12px 0;}
.blocker-item{background:var(--red-bg); border-radius:10px; padding:12px 14px; margin-bottom:8px;
  display:flex; justify-content:space-between; font-weight:700;}
.block-paths{display:grid; gap:12px; margin-top:16px;}
.block-path{border:2px solid var(--caramel); border-radius:12px; padding:16px; background:var(--cream);}
.block-path h3{margin-top:0; color:var(--choc);}
.override-box{margin-top:16px; border-top:2px dashed var(--caramel); padding-top:16px;}
.checkbox-row{display:flex; align-items:center; gap:10px; margin:12px 0; font-size:18px; font-weight:600;}
.checkbox-row input{width:28px; height:28px;}

/* Z-report */
.z-report{background:#ffffff; border-radius:var(--radius); box-shadow:var(--shadow); padding:28px;}
.z-report h2{color:var(--choc); margin-top:0; text-align:center;}
.z-report .zrow{display:flex; justify-content:space-between; padding:10px 0;
  border-bottom:1px solid var(--cream-dark); font-size:18px;}
.z-report .zrow.total{font-size:24px; font-weight:900; color:var(--choc); border-bottom:none;}
.zrow.variance-ok{color:var(--green); font-weight:900;}
.zrow.variance-bad{color:var(--red); font-weight:900;}
.z-methods{margin:12px 0;}
.z-methods .zrow{border-bottom:1px dotted var(--cream-dark);}

/* ---------- Clock ---------- */
.clock-content{max-width:560px; margin:0 auto;}
.clock-status-pill{text-align:center; font-size:22px; font-weight:800; padding:18px; border-radius:12px; margin-bottom:16px;}
.clock-in{background:var(--green-bg); color:var(--green);}
.clock-out{background:var(--grey-bg); color:var(--muted);}

/* ---------- Modal ---------- */
.modal-root{position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:100;
  display:flex; align-items:center; justify-content:center; padding:20px;}
.modal{background:var(--cream); border-radius:20px; width:min(560px, 94vw);
  max-height:92vh; overflow-y:auto; padding:24px; box-shadow:0 10px 50px rgba(0,0,0,.4);}
.modal h2{margin-top:0; color:var(--choc);}
.modal .mod-item{display:flex; align-items:center; gap:12px; padding:12px; background:#ffffff;
  border-radius:10px; margin-bottom:8px; font-size:17px;}
.mod-item input{width:26px; height:26px;}
.mod-item .mprice{margin-left:auto; font-weight:700; color:var(--choc);}
.qty-row{display:flex; align-items:center; gap:16px; margin:16px 0;}
.qty-row .qty-btn{width:60px; height:60px; font-size:30px;}
.qty-row .qty{font-size:28px; min-width:50px; text-align:center;}
.modal-actions{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px;}
.notes-input{width:100%; border-radius:10px; border:2px solid var(--caramel); padding:12px; font-size:17px; margin-top:8px;}

/* payment */
.pay-methods{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:12px 0;}
.pay-method-btn{font-size:18px; min-height:64px;}
.pay-method-btn.active{background:var(--choc); color:#ffffff;}
.pay-line{background:#ffffff; border-radius:10px; padding:12px; margin-bottom:8px;
  display:flex; align-items:center; gap:10px;}
.pay-line .pname{font-weight:700; min-width:110px;}
.pay-line input{flex:1; font-size:20px; padding:10px; border-radius:8px; border:2px solid var(--caramel); text-align:right; font-weight:700;}
.pay-line .premove{background:none; border:none; color:var(--red); font-size:22px; cursor:pointer;}
.pay-summary{background:var(--cream-dark); border-radius:12px; padding:14px; margin:12px 0;}
.pay-summary .row{display:flex; justify-content:space-between; font-size:19px; margin:6px 0;}
.pay-summary .change-ok{color:var(--green); font-weight:900; font-size:24px;}
.pay-summary .change-bad{color:var(--red); font-weight:900;}
.gift-row{display:flex; gap:8px; margin:8px 0;}
.gift-row input{flex:1; font-size:20px; padding:10px; border-radius:8px; border:2px solid var(--caramel); text-transform:uppercase; font-weight:700; letter-spacing:1px;}
.gift-ok{background:#ffffff; border-radius:10px; padding:12px; margin:8px 0; font-size:18px;}
.gift-ok .muted{font-size:14px; margin-top:4px;}
.gift-err{color:var(--red); font-weight:700; margin:8px 0;}

/* toast */
.toast-root{position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:200;}
.toast{background:var(--choc-dark); color:#ffffff; padding:16px 28px; border-radius:14px;
  font-size:18px; font-weight:700; margin-top:8px; box-shadow:0 4px 20px rgba(0,0,0,.3);
  animation:slideup .25s ease;}
.toast.success{background:var(--green);}
.toast.error{background:var(--red);}
@keyframes slideup{from{transform:translateY(20px); opacity:0;} to{transform:none; opacity:1;}}

/* bandeau hors-ligne */
.offline-banner{position:sticky; top:0; z-index:150; background:#161616; color:#ffffff;
  padding:12px 16px; font-size:15px; line-height:1.4; text-align:center;
  box-shadow:0 2px 12px rgba(0,0,0,.25);}
.offline-banner.hidden{display:none;}

@media (max-width:900px){
  .order-layout{grid-template-columns:1fr;}
  .cart{position:static;}
  #tabs{top:56px;}
  .tab{font-size:15px;}
}

/* ---- Aperçu tickets cuisine (avant impression) ---- */
.ticket-preview{background:#ffffff;border:1px solid #dbdbdb;border-radius:12px;padding:14px;margin:12px 0;}
.ticket-preview .tp-head{margin-bottom:8px;}
.ticket-preview .tp-items{margin:8px 0 12px;font-size:15px;line-height:1.7;}

/* ============ Typography pass: Helvetica display, calmer rhythm ============ */
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;}
button,input,select,textarea{font-family:inherit;}
h1,h2,h3{letter-spacing:-.015em;font-weight:700;line-height:1.25;}
#tabs .tab{font-weight:600;}
.cart h3{font-size:20px;margin:0 0 14px;}
.modal h2{font-size:22px;margin:0 0 16px;}
.modal h3{font-size:17px;margin:18px 0 10px;}
.cart-totals .row.total{font-size:21px;}
.big-input{width:100%;padding:14px;border:1.5px solid #dddddd;border-radius:12px;font-size:17px;background:#ffffff;}
.big-input:focus{outline:none;border-color:#161616;}
.btn-small{padding:8px 14px;font-size:15px;border-radius:10px;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0;}
.form-grid label{display:block;font-weight:600;font-size:15px;color:var(--ink);}
.form-grid label input,.form-grid label textarea{margin-top:6px;}
.modal label{display:block;font-weight:600;font-size:15px;margin:12px 0 4px;}
.modal label input,.modal label textarea,.modal label select{margin-top:6px;width:100%;}
.modal textarea.big-input{resize:vertical;}

/* ============ CRM: customer chip, promo, loyalty ============ */
.cart-actions-row{display:flex;gap:8px;margin:10px 0;}
.btn-cart-action{flex:1;padding:12px 8px;font-size:15px;}
#cart-customer-chip{margin:0 0 10px;}
.customer-chip{display:flex;align-items:center;gap:10px;background:#ffffff;border:1.5px solid var(--caramel);border-radius:12px;padding:10px 12px;}
.cc-info{flex:1;min-width:0;font-size:16px;}
.cc-loyalty{margin-top:4px;display:flex;align-items:center;gap:8px;}
.tier-badge{display:inline-block;padding:3px 12px;border-radius:999px;font-size:13px;font-weight:700;color:#ffffff;}
.pts{font-weight:700;font-size:15px;color:#6b6b6b;}
.cc-remove{border:none;background:none;font-size:18px;color:var(--muted);cursor:pointer;padding:6px;}
.cart-totals .row.discount span{color:var(--green);font-weight:700;}
.cm-results{max-height:220px;overflow-y:auto;margin:8px 0;border:1px solid #eeeeee;border-radius:12px;}
.cm-item{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left;background:#ffffff;border:0;border-bottom:1px solid #f0f0f0;padding:12px 14px;font-size:16px;cursor:pointer;}
.cm-item:last-child{border-bottom:0;}
.cm-item:active{background:#f7f7f7;}
.promo-current{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--green-bg);border-radius:12px;padding:12px 14px;margin-bottom:12px;font-size:16px;}

/* ============ CRM: reservations ============ */
.res-toolbar{display:flex;gap:10px;align-items:center;margin-bottom:16px;flex-wrap:wrap;}
.res-toolbar .big-select{width:auto;}
.reservations-list{display:grid;gap:12px;}
.res-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;border-left:6px solid var(--grey);}
.res-card.res-confirmee{border-left-color:var(--gold);}
.res-card.res-assise{border-left-color:var(--green);}
.res-card.res-annulee{border-left-color:var(--red);opacity:.75;}
.res-card.res-no_show{border-left-color:#555555;opacity:.75;}
.res-head{display:flex;align-items:center;gap:8px;font-size:17px;margin-bottom:6px;flex-wrap:wrap;}
.res-status{margin-left:auto;font-size:13px;font-weight:700;padding:4px 12px;border-radius:999px;background:var(--grey-bg);color:#555555;}
.res-confirmee .res-status{background:#f3f3f3;color:#505050;}
.res-assise .res-status{background:var(--green-bg);color:var(--green);}
.res-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}

/* ---- Bill splitting (split.js) ---- */
.loyalty-choice{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:12px 0;padding:10px 12px;background:#fafafa;border:1px solid #e0e0e0;border-radius:12px;}
.loyalty-choice label{display:flex;align-items:center;gap:6px;font-size:15px;flex:0 0 auto;}
.loyalty-choice input[type=radio]{width:20px;height:20px;flex:0 0 auto;accent-color:var(--choc,#161616);}
#rm-guests{display:flex;flex-direction:column;gap:8px;margin-bottom:8px;}
.split-resv{margin:10px 0;}
.split-guest{display:flex;gap:8px;align-items:flex-start;margin-bottom:10px;}
.split-guest .big-input{flex:1;}
.sg-cust{flex:1.4;}
.split-modes{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:10px 0;}
.split-modes label{display:flex;align-items:center;gap:6px;flex:0 0 auto;font-size:15px;}
.split-modes input[type=radio]{width:20px;height:20px;flex:0 0 auto;accent-color:var(--choc,#161616);}
.split-assign{display:flex;flex-direction:column;gap:8px;margin:10px 0;}
.sa-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fafafa;border:1px solid #eeeeee;border-radius:10px;padding:8px 10px;}
.sa-row .big-select{max-width:180px;}
.split-totals{margin:12px 0;border-top:2px solid var(--choc,#161616);padding-top:8px;}
.st-row{display:flex;justify-content:space-between;padding:6px 2px;font-size:16px;}
.split-part{border:1.5px solid #e1e1e1;border-radius:14px;padding:12px;margin-bottom:10px;background:#ffffff;}
.split-part.paid{border-color:#d9d9d9;background:#f9f9f9;}
.sp-head{display:flex;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap;}
.sp-amount{margin-left:auto;font-weight:700;font-size:17px;}
.sp-pay{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
.sp-pay.hidden{display:none;}

/* ---- Mon planning ---- */
.mp-shift{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid #eeeeee;border-radius:12px;margin-bottom:8px;background:#ffffff;}
.mp-avail-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #f2f2f2;}
.mp-avail-row b{width:90px;}
.mp-avail-row input[type=time]{width:110px;padding:8px;border:1.5px solid #dddddd;border-radius:10px;font-size:15px;}
.mp-check{display:flex;align-items:center;gap:6px;font-weight:600;}
.mp-check input{width:20px;height:20px;}

/* ---- Liste d'attente (waitlist) ---- */
.waitlist-card{background:#ffffff;border:1px solid #e5e5e5;border-radius:14px;padding:14px;margin-bottom:14px;}
.waitlist-card h3{margin:0 0 10px;color:var(--choc);}
.wl-form{display:grid;grid-template-columns:2fr 2fr 90px 1.5fr auto;gap:8px;align-items:start;margin-bottom:8px;}
.wl-list{display:flex;flex-direction:column;gap:8px;}
.wl-item{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;
  border:1px solid #eeeeee;border-radius:10px;padding:10px 12px;background:#fafafa;flex-wrap:wrap;}
.wl-info{flex:1;min-width:200px;}
.wl-actions{white-space:nowrap;}
.wl-seat{width:100%;margin-top:8px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.wl-seat.hidden{display:none;}
.vip-badge{display:inline-block;background:#161616;color:#dadada;font-weight:bold;font-size:12px;
  border-radius:20px;padding:2px 10px;margin-left:6px;vertical-align:middle;}
.noshow-badge{display:inline-block;background:#f5f5f5;color:#3d3d3d;font-size:12px;font-weight:bold;
  border:1px solid #d5d5d5;border-radius:20px;padding:2px 10px;margin-left:6px;vertical-align:middle;}
@media (max-width:900px){ .wl-form{grid-template-columns:1fr 1fr;} }

/* ============ Cartes cadeaux & Wallet prépayé ============ */
.wallet-content{max-width:640px;margin:0 auto;padding:8px}
.wallet-modes{display:flex;gap:10px;margin-bottom:14px}
.wallet-modes .btn{flex:1}
.wallet-scan{display:flex;gap:8px;margin-bottom:12px}
.wallet-scan input{flex:1;padding:12px;font-size:16px;border:2px solid var(--line,#e3e3e3);border-radius:10px}
.wallet-results{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.wallet-result{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border:1px solid var(--line,#e3e3e3);border-radius:10px;background:#ffffff;cursor:pointer;text-align:left;width:100%}
.wallet-card-info{background:#ffffff;border:2px solid var(--choc,#161616);border-radius:14px;padding:14px;margin-bottom:14px}
.wallet-card-info .row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:16px}
.wallet-card-info .row.dim{color:#767676;font-size:14px}
.wallet-card-info .mono{font-family:ui-monospace,monospace;letter-spacing:1px}
.wallet-topup{background:#ffffff;border:1px solid #dbdbdb;border-radius:14px;padding:14px;margin-bottom:14px}
.wallet-topup h3{margin:0 0 10px}
.wallet-topup .row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.wallet-topup input[type=number]{width:160px;padding:10px;font-size:18px;border:2px solid var(--line,#e3e3e3);border-radius:10px;text-align:right}
.wallet-topup select{padding:10px;font-size:16px;border-radius:10px;border:2px solid var(--line,#e3e3e3)}
/* ---- Scanner code-barres (caméra) ---- */
.scan-modal{background:#000000;color:#ffffff;position:fixed;inset:0;width:100vw;max-width:none;max-height:none;margin:0;border-radius:0;padding:14px;display:flex;flex-direction:column}
.scan-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.scan-head b{font-size:17px}
.scan-head .btn{background:#222222;color:#ffffff;border:1px solid #444444;min-height:44px;padding:10px 16px}
#scan-view{width:100%;flex:1;min-height:0;border-radius:12px;overflow:hidden;background:#000000;position:relative}
#scan-view video{width:100%!important;height:100%!important;object-fit:cover;display:block}
.scan-hint{text-align:center;color:#bbbbbb;font-size:15px;margin:12px 0 6px}
.scan-modal .error{background:#1c1c1c;color:#c3c3c3}
.bonus-preview{min-height:24px;margin:6px 0 10px;font-size:15px;color:#505050}
.wallet-history .row{display:flex;justify-content:space-between;padding:8px 4px;border-bottom:1px solid #e9e9e9;font-size:14px}
.wallet-history .pos{color:#636363}.wallet-history .neg{color:#434343}
.badge-err{background:#efefef;color:#434343;padding:4px 10px;border-radius:20px;font-size:13px;font-weight:700}

/* ============ Mobile extrême : téléphones (≤720px) ============ */
.cart-fab{display:none;}

@media (max-width:720px){
  #main{padding:10px 10px 120px;}
  /* En-tête : les 6 boutons passent sur 2 lignes, plus de débordement horizontal.
     L'en-tête n'est plus sticky sur mobile : les onglets restent collés en haut. */
  #app-header{position:static;flex-wrap:wrap;row-gap:8px;padding:10px 12px;}
  #tabs{top:0;}
  .header-right{flex-wrap:wrap;gap:8px;}
  .header-right .btn{min-height:44px;padding:10px 14px;font-size:15px;}
  .brand{font-size:20px;}
  .user-chip{font-size:14px;padding:8px 12px;}
  /* Répartition d'addition : le nom du produit ne doit pas pousser le select hors écran */
  .sa-row>*{min-width:0;}
  .topbar{padding:8px 10px;}
  #clock{font-size:13px;}
  /* Onglets : défilement horizontal sans écrasement */
  #tabs{overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;}
  #tabs::-webkit-scrollbar{display:none;}
  .tab{flex:0 0 auto;scroll-snap-align:start;font-size:14px;padding:12px 14px;}
  /* Catégories : une seule ligne à faire défiler */
  .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:6px;margin-bottom:10px;}
  .chips::-webkit-scrollbar{display:none;}
  .chip{flex:0 0 auto;padding:10px 16px;font-size:15px;}
  /* Produits : 2 colonnes compactes */
  .product-grid{grid-template-columns:repeat(2,1fr);gap:8px;}
  .product-card{padding:10px 8px;}
  .product-card .pvisual{height:64px;border-radius:8px;}
  .product-card .pvisual .emoji{font-size:32px;}
  .product-card .pname{font-size:13.5px;min-height:36px;margin:6px 0 2px;line-height:1.25;}
  .product-card .pprice{font-size:15px;}
  /* Panier : ancre de défilement + lignes resserrées */
  #cart{scroll-margin-top:64px;}
  .cart{padding:14px;}
  .cart-lines{max-height:260px;}
  .order-type-row{gap:6px;}
  .btn-type{font-size:13.5px;min-height:48px;padding:10px 2px;}
  /* Bouton panier flottant : total toujours visible */
  .cart-fab{display:flex;position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:90;
    align-items:center;gap:10px;background:linear-gradient(135deg,var(--choc),var(--choc-dark));color:#ffffff;
    border:none;border-radius:16px;padding:14px 16px;font-size:16px;font-weight:800;cursor:pointer;
    box-shadow:0 8px 24px rgba(0,0,0,.35);}
  .cart-fab.hidden{display:none;}
  .cart-fab:active{transform:scale(.98);}
  .cf-count{background:var(--accent);border-radius:999px;min-width:28px;height:28px;display:inline-flex;
    align-items:center;justify-content:center;font-size:14px;padding:0 8px;}
  .cf-label{flex:0 0 auto;}
  .cf-total{margin-left:auto;font-variant-numeric:tabular-nums;}
  /* Modales en tiroir bas */
  .modal-root{align-items:flex-end;padding:0;}
  .modal{width:100%;max-width:100vw;max-height:94dvh;border-radius:18px 18px 0 0;padding:20px 16px 28px;margin:0;}
  /* Commandes : une colonne, cartes resserrées */
  .orders-list{grid-template-columns:1fr;}
  .order-card{padding:12px;}
  /* Toasts au-dessus du bouton panier */
  .toast-root{bottom:96px;}
  .toast{font-size:15px;padding:12px 20px;max-width:calc(100vw - 40px);text-align:center;}
  /* Tables : 2 colonnes */
  .floor-map{grid-template-columns:repeat(2,1fr);gap:10px;}
  .table-card{min-height:96px;font-size:18px;}
  /* Divers */
  .legend{flex-wrap:wrap;gap:10px;font-size:14px;}
  .cash-content,.clock-content{padding:0 2px;}
  .big-input{font-size:16px;} /* évite le zoom auto iOS */
  .big-select{font-size:16px;}
}
@media (max-width:380px){
  .product-card .pname{font-size:12.5px;}
  .tab{font-size:13px;padding:10px 12px;}
  .chip{padding:9px 13px;font-size:14px;}
}

/* ---- Approbations : remises & décaissements ---- */
.pending-row{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#ffffff;border:1px solid #e0e0e0;border-radius:12px;padding:10px 12px;margin:8px 0;font-size:14px}
.pending-row.done{background:#f7f7f7;border-color:#e5e5e5}
.row-actions{display:flex;gap:8px;flex-shrink:0}
.success-box{background:#f7f7f7;border:1px solid #dddddd;border-radius:12px;padding:14px;margin:10px 0;text-align:center;font-size:15px}
.error-box{background:#f1f1f1;border:1px solid #cccccc;border-radius:12px;padding:14px;margin:10px 0;text-align:center;font-size:15px}

/* ---- Livreurs : ligne d'assignation sur les cartes de commande ---- */
.oc-driver{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:8px 0;}
.drv-badge{font-size:14px; font-weight:700; padding:5px 12px; border-radius:20px; background:var(--orange-bg); color:var(--orange);}
.drv-badge.dst-assignee{background:var(--grey-bg); color:#555555;}
.drv-badge.dst-en_route{background:var(--orange-bg); color:var(--orange);}
.drv-badge.dst-arrive{background:#ededed; color:#5b5b5b;}
.drv-badge.dst-livree{background:var(--green-bg); color:var(--green);}
.drv-badge.dst-echec{background:var(--red-bg); color:var(--red);}
.btn-mini{padding:8px 14px; font-size:15px; min-height:44px;}

/* ---- Sélecteur de sonnerie (partagé avec la page livreur) ---- */
.ringtone-list{display:flex; flex-direction:column; gap:10px; margin:14px 0;}
.ringtone-item{display:flex; align-items:center; gap:12px; background:#ffffff; border:2px solid #d7d7d7; border-radius:14px; padding:12px 14px; cursor:pointer;}
.ringtone-item.selected{border-color:var(--choc); background:#ffffff;}
.ringtone-item input[type=radio]{width:22px; height:22px; accent-color:var(--choc);}
.ringtone-main{flex:1; display:flex; flex-direction:column;}
.ringtone-main b{font-size:18px;}
.ringtone-desc{font-size:14px; color:var(--muted);}
.ringtone-preview{flex:none; font-size:20px; width:52px; height:52px; border-radius:50%; border:2px solid var(--choc); background:#ffffff; color:var(--choc); cursor:pointer;}
.ringtone-mute{display:flex; align-items:center; gap:10px; font-size:17px; padding:10px 4px; cursor:pointer;}
.ringtone-mute input{width:22px; height:22px; accent-color:var(--choc);}

/* ---- Alerte nouvelle commande web (bandeau fixe + impression 1-tap) ---- */
#new-order-alert{position:fixed; top:0; left:0; right:0; z-index:9999; display:none;
  align-items:center; gap:12px; padding:12px 14px;
  background:linear-gradient(135deg, #161616 0%, #323232 100%); color:#ffffff;
  box-shadow:0 4px 18px rgba(0,0,0,.35); border-bottom:3px solid var(--orange);}
#new-order-alert.show{display:flex;}
.noa-text{flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; cursor:pointer;}
.noa-text b{font-size:17px;}
.noa-text span{font-size:14px; opacity:.92; overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.noa-hint{font-size:12px !important; opacity:.7 !important; -webkit-line-clamp:1 !important;}
.noa-print{flex:none; font-size:18px; font-weight:700; padding:16px 20px; border-radius:14px;
  min-height:60px; box-shadow:0 2px 8px rgba(0,0,0,.3);}
.noa-print:disabled{opacity:.6;}
.noa-close{flex:none; width:48px; height:48px; border-radius:50%; border:2px solid rgba(255,255,255,.6);
  background:transparent; color:#ffffff; font-size:20px; cursor:pointer;}

/* ---- Franchise : sélecteur d'outlet + concepts ---- */
.outlet-bar{display:flex;gap:8px;align-items:center;margin:8px 0;flex-wrap:wrap}
.outlet-picker{flex:1;min-width:200px}
.outlet-picker.hidden{display:none}
.service-pill{flex:none;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;font-size:14px;font-weight:700;background:#f5f5f5;color:#565656;border:1px solid #e1e1e1;white-space:nowrap}
.service-pill.closed{background:#eeeeee;color:#434343;border-color:#d3d3d3}
.service-pill[hidden]{display:none}
.concept-chips{display:flex;gap:6px;overflow-x:auto;padding:2px;flex:2;min-width:0}
.concept-chips .chip{flex:none}
/* ---- Franchise : variantes produit ---- */
.var-opts{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.var-opt{display:flex;align-items:center;gap:10px;padding:12px;border:2px solid #e6e6e6;border-radius:12px;font-size:16px;cursor:pointer;background:#ffffff}
.var-opt input{width:20px;height:20px;accent-color:var(--choc,#161616)}
.var-opt .mprice{margin-left:auto;font-weight:700;color:var(--choc,#161616)}
@media(max-width:480px){
  .outlet-bar{flex-direction:column;align-items:stretch}
  .outlet-picker{min-width:0}
  .concept-chips{width:100%}
}

/* ---- Mode Accueil (seating visuel) ---- */
.acc-layout{display:flex;gap:12px;align-items:flex-start}
.acc-queue{flex:0 0 300px;max-width:38vw;background:#ffffff;border:1px solid #e6e6e6;border-radius:14px;padding:12px;position:sticky;top:8px}
.acc-queue-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.acc-queue-head h3{margin:0;font-size:16px;font-weight:600}
.acc-parties{display:flex;flex-direction:column;gap:8px;max-height:60vh;overflow-y:auto}
.acc-party{background:#ffffff;border:2px solid #e6e6e6;border-radius:12px;padding:10px 12px;cursor:pointer;
  display:flex;flex-direction:column;gap:2px;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  transition:border-color .25s ease,box-shadow .25s ease,transform .15s ease}
.acc-party b{font-size:15px;font-weight:600}
.acc-party span{font-size:13px;color:#616161}
.acc-party em{font-style:normal;font-size:12px;color:#767676}
.acc-party.selected{border-color:var(--green,#818181);box-shadow:0 0 0 3px rgba(46,158,91,.18)}
.acc-party:active{transform:scale(.98)}
.acc-hint{font-size:12px;color:#767676;margin:10px 0 0;line-height:1.4}
.acc-floor{flex:1;min-width:0}
.acc-plan-table.acc-ok{outline:3px dashed var(--green,#818181);outline-offset:3px;cursor:pointer}
.acc-plan-table.drop-ok{outline:4px solid var(--green,#818181);outline-offset:3px;transform:scale(1.04)}
.acc-dur{display:block;font-size:11px;font-weight:600;opacity:.9}
.acc-release{position:absolute;top:2px;right:2px;width:28px;height:28px;border-radius:50%;border:none;
  background:rgba(0,0,0,.45);color:#ffffff;font-size:14px;line-height:1;cursor:pointer;pointer-events:auto}
.acc-ghost{position:fixed;z-index:9999;pointer-events:none;opacity:.92;min-width:120px;
  background:#ffffff;border:2px solid var(--green,#818181);border-radius:12px;padding:10px 12px;
  box-shadow:0 8px 24px rgba(0,0,0,.25)}
@media(max-width:760px){
  .acc-layout{flex-direction:column}
  .acc-queue{flex:none;max-width:none;width:100%;position:static}
  .acc-parties{flex-direction:row;overflow-x:auto;overflow-y:hidden;max-height:none;padding-bottom:4px}
  .acc-party{flex:0 0 170px}
}

/* ============ Strict clock-in gate : overlay bloquant ============ */
#clock-gate-overlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.72);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  animation:cg-fade .25s ease-out;
}
@keyframes cg-fade{from{opacity:0}to{opacity:1}}
.cg-card{
  background:#fff;color:#161616;border-radius:22px;
  max-width:380px;width:100%;padding:32px 28px;
  text-align:center;
  box-shadow:0 24px 64px rgba(0,0,0,.35);
  animation:cg-pop .3s cubic-bezier(.2,.9,.3,1.2);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue","Segoe UI",Arial,sans-serif;
}
@keyframes cg-pop{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:none}}
.cg-icon{
  width:72px;height:72px;margin:0 auto 16px;
  border-radius:50%;background:#161616;color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.cg-title{font-size:22px;font-weight:700;margin:0 0 8px;letter-spacing:-.3px}
.cg-msg{font-size:16px;color:#3a3a3c;margin:0 0 4px;line-height:1.45}
.cg-err{font-size:14px;color:#c00;min-height:20px;margin:8px 0}
.cg-btn{
  display:block;width:100%;min-height:52px;margin-top:8px;
  border:1px solid #d1d1d6;background:#fff;color:#161616;
  border-radius:14px;font-size:17px;font-weight:600;cursor:pointer;
  transition:transform .15s ease,background .15s ease;
}
.cg-btn:active{transform:scale(.98)}
.cg-btn-primary{background:#161616;color:#fff;border-color:#161616}
.cg-btn:disabled{opacity:.5;cursor:wait}
.cg-link{
  background:none;border:none;color:#6e6e73;font-size:14px;
  margin-top:14px;cursor:pointer;text-decoration:underline;min-height:44px;
}
.cg-bypass{margin-top:8px;padding-top:8px;border-top:1px solid #e5e5ea}
.cg-bypass.hidden{display:none}
.cg-hint{font-size:14px;color:#6e6e73;margin:8px 0}
.cg-pin{
  display:block;width:100%;min-height:52px;margin:0 0 8px;
  border:1px solid #d1d1d6;border-radius:14px;
  font-size:24px;letter-spacing:8px;text-align:center;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Arial,sans-serif;
}
@media (prefers-reduced-motion:reduce){
  #clock-gate-overlay,.cg-card{animation:none}
}