/* Service, caisse, cuisine — style iOS. Tuiles calmes (comme l'écran d'accueil) : fond surface, rayon 16, sans bordure
   ni ombre. États en couleurs système : libre = surface, occupée = teinte d'accent, prête = vert, à traiter = orange. */
.sv-sect { display: flex; flex-direction: column; }
.sv-sect .section-title { margin: 6px 16px 6px; }
.sv-main { gap: 14px; min-width: 0; }

/* ---------- grand écran : salle / carte à gauche, commande à droite (comme une vue partagée d'iPad) ---------- */
.sv-split { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; align-items: start; }
.sv-panel { position: sticky; top: calc(var(--top-h) + 12px); max-height: calc(100dvh - var(--top-h) - 28px); display: flex; flex-direction: column; }
.sv-panel.idle { gap: 0; }
.sv-panel.idle .section-title { margin-top: 6px; }
.sv-phead { display: flex; align-items: center; gap: 2px; padding: 12px 8px 10px 16px; }
.sv-phead .ttl { font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.sv-pnotes { display: flex; flex-direction: column; gap: 8px; padding: 0 12px 10px; }
.sv-pnotes .notice { background: var(--surface-2); }
.sv-pscroll { flex: 1; min-height: 60px; overflow: auto; border-top: .5px solid var(--line-2); }
.sv-pscroll > .empty { padding: 32px 16px; }
.sv-panel .sv-totals { border-top: .5px solid var(--line-2); }
.sv-actions { display: flex; flex-direction: column; gap: 8px; padding: 12px; }

/* ---------- tuiles : tables, commandes au comptoir (aussi utilisées par Réglages › Salle) ---------- */
.tables { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.tbl { position: relative; min-height: 96px; border-radius: var(--radius-lg); padding: 12px; background: var(--surface); display: flex; flex-direction: column; justify-content: space-between; gap: 6px; text-align: left; min-width: 0;
  transition: transform .3s var(--spring), background .2s; user-select: none; -webkit-user-select: none; }
.tbl:active { transform: scale(.96); }
.tbl .tt { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; min-width: 0; }
.tbl .n { font-family: var(--rounded); font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tbl .m { font-size: 13px; color: var(--muted); letter-spacing: 0; }
.tbl .a { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tbl .tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--c); letter-spacing: 0; white-space: nowrap; margin-top: 3px; }
.tbl .tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.tbl.busy { background: color-mix(in srgb, var(--accent) 13%, var(--surface)); }
.tbl.busy .n { color: var(--accent-text); }
.tbl.ready { background: color-mix(in srgb, var(--green) 16%, var(--surface)); }
.tbl.ready .n { color: var(--green); }
.tbl.alert { background: color-mix(in srgb, var(--orange) 17%, var(--surface)); }
.tbl.alert .n { color: var(--orange); }
.tbl.sel { box-shadow: inset 0 0 0 2px var(--accent); }
.tbl.new { background: var(--fill); color: var(--accent-text); align-items: center; justify-content: center; gap: 4px; font-size: 15px; font-weight: 600; text-align: center; }
.tbl.cord .n { font-size: 22px; }
.modal .tbl:not(.busy) { background: var(--surface); }

/* ---------- la carte : grille d'articles ---------- */
.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.mi { min-height: 84px; border-radius: 14px; padding: 0; overflow: hidden; background: var(--surface); text-align: left; display: flex; flex-direction: column;
  transition: transform .3s var(--spring), background .15s; user-select: none; -webkit-user-select: none; }
.mi .media-tile { aspect-ratio: 4 / 3; border-radius: 0; flex: none; }
.mi .media-tile.media-none { font-size: 26px; }
.mi .mt { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 4px; padding: 9px 12px 11px; }
.mi:active { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); transform: scale(.95); transition-duration: .06s; }
.mi .n { font-size: 15px; font-weight: 500; line-height: 1.25; letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mi .p { font-size: 15px; font-weight: 600; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.mi.out { opacity: .45; } .mi.out .p { color: var(--red); } .mi.out .media-tile { filter: grayscale(1); }
.sv-menu .inner { gap: 14px; }

/* ---------- la commande : lignes et totaux en liste ---------- */
.sv-lines > .item { align-items: flex-start; gap: 10px; }
.sv-lines .q { min-width: 28px; font-weight: 700; color: var(--accent-text); }
.sv-lines .nm { font-size: 17px; letter-spacing: -.02em; }
.sv-lines .note { color: var(--orange); font-weight: 500; }
.sv-lines .st { font-weight: 500; }
.sv-lines .p { font-weight: 500; white-space: nowrap; }
.sv-lines .ol.void .nm, .sv-lines .ol.void .p { text-decoration: line-through; color: var(--faint); }
.sv-lines .ol.pending { background: color-mix(in srgb, var(--orange) 10%, var(--surface)); }
.sv-totals > .item { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
.sv-totals > .item.muted { color: var(--muted); font-size: 15px; }
.sv-totals > .item.small { font-size: 13px; }
.sv-totals > .item.grand { font-family: var(--display); font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.sv-totals > .item.strong { font-weight: 600; }
.sv-bar-space { height: 64px; }
.mobile-bar.sv-bar { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
.mobile-bar.sv-bar.one { grid-template-columns: 1fr; }
/* Totaux génériques (factures B2B de la rubrique Clients). */
.totals { display: grid; gap: 4px; padding: 14px 16px; }
.totals .row { justify-content: space-between; }
.totals .grand { font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -.02em; }

/* ---------- encaissement ---------- */
.paygrid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 760px) { .paygrid { grid-template-columns: 1fr; } }
.sv-field { display: flex; flex-direction: column; gap: 6px; }
.sv-field > .small { margin-left: 4px; }
.sv-methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sv-meth { min-height: 52px; padding: 8px; border-radius: 12px; background: var(--surface); font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; transition: background .15s, color .15s, transform .2s var(--spring); }
.sv-meth:active { transform: scale(.96); }
.sv-meth.on { background: var(--accent); color: #fff; }
.sv-pay .kpi .l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-change { font-size: 19px; font-weight: 600; }
.sv-bigchange { font-family: var(--rounded); font-size: 40px; font-weight: 700; text-align: center; padding: 16px 0; letter-spacing: -.02em; }

/* ---------- caisse ---------- */
.ca-hero { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 20px 20px; text-align: center; }
.ca-hero .itile { width: 52px; height: 52px; border-radius: 14px; }
.ca-hero .itile svg.i { width: 28px; height: 28px; }
.ca-hero .btn { margin-top: 6px; max-width: 360px; }
.ca-v { white-space: nowrap; }
.ca-v.off { text-decoration: line-through; }
.ca-close { background: var(--surface); }

/* ---------- cuisine : un bon = une carte ---------- */
.kds { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; align-items: start; }
.ticket { background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; animation: rise .35s var(--out) both; }
.ticket .th { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px 10px; }
.ticket .w { font-family: var(--rounded); font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.ticket .age { flex: none; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted); padding: 2px 10px; border-radius: 999px; background: var(--fill); }
.ticket .age.warn { color: var(--orange); background: var(--orange-soft); }
.ticket .age.late { color: #fff; background: var(--red); }
.ticket > .list { border-top: .5px solid var(--line-2); }
.ticket > .list > .item { align-items: flex-start; gap: 10px; padding-top: 10px; padding-bottom: 10px; }
.ticket .q { min-width: 28px; font-size: 19px; font-weight: 700; color: var(--accent-text); line-height: 1.2; }
.ticket .nm { font-size: 19px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.ticket .opt { color: var(--muted); font-weight: 500; }
.ticket .note { color: var(--red); font-weight: 600; }
.ticket .tf { display: flex; gap: 8px; padding: 10px 12px 12px; margin-top: auto; }
.ticket .tf .grow { flex: 1; }
.ticket.void .w { color: var(--red); }
.ticket.void .nm { text-decoration: line-through; color: var(--muted); }
/* Tablette en largeur moyenne (barre latérale visible, pas d'onglets) : la barre d'actions suit la colonne de contenu. */
@media (min-width: 900px) { .mobile-bar.sv-bar { left: var(--nav-w); bottom: 0; padding-bottom: calc(8px + env(safe-area-inset-bottom)); } .sv-bar-space { height: 56px; } }
/* [GPT 2026-11-10] Keep the table menu's action and current item clear on small screens. */
.sv-line-status:empty{display:none;}
.sv-line-status{position:sticky;top:0;z-index:2;display:flex;justify-content:center;padding:6px 8px;background:var(--surface);border:1px solid var(--line);border-radius:12px;}
.sv-main .sv-line-status{top:calc(var(--top-h) + 10px);}
.sv-panel,.sv-main .sv-line-status{top:calc(var(--app-bar-h, var(--top-h)) + 10px);}
.sv-panel{max-height:calc(100dvh - var(--app-bar-h, var(--top-h)) - 28px);}
.sv-line-note{display:inline-flex;align-items:center;gap:8px;min-height:34px;font-size:14px;font-weight:650;color:var(--accent-text);}
button.mi[aria-busy=true]{outline:2px solid var(--accent);outline-offset:-2px;filter:brightness(.94);}
.sv-menu .top .sv-menu-send{min-height:44px;}
@media(max-width:380px){.sv-add-action{font-size:14px;padding-inline:10px;}.sv-menu .top .sv-menu-send{font-size:14px;padding-inline:9px;}}
/* [GPT 2026-11-10] The requested Sentria bill has a focused view with room for the lines and settlement. */
.sv-bill-view { width:min(100%,720px); margin-inline:auto; }
.sv-bill-view .sv-panel { position:static; max-height:none; }
.sv-bill-view .sv-pscroll { overflow:visible; }