/* =========================================================
   Téléphone (moins de 768 px) : vente en trois écrans pour les serveuses
     Tables → Menu → Ticket, barre d'onglets en bas (pos.js : POS.mview / setMView).
   Sur PC et tablette en paysage, rien de ce fichier ne s'applique.
   ========================================================= */
.m-tabs, .m-cart, .m-split, .chip-split, .sidebar-nav-item.sb-m { display: none; }

@media (max-width: 768px) {
  :root { --m-tabs-h: 62px; }

  /* ---------- Barre du haut réduite : menu, nom, Commandes en direct, actualiser, plein écran, avatar ---------- */
  .crt-root { height: 100dvh; }
  .pos-topbar { height: 52px; padding: 0 10px; gap: 8px; }
  .pos-nav, .pos-brand-sub, .tb-clock, .theme-anchor, .pos-topbar-right > .tb-icon:not(.tb-bell):not(.tb-m) { display: none !important; }
  .pos-topbar-right { gap: 4px; flex-shrink: 0; }
  .pos-topbar-left { flex: 1; min-width: 0; }
  .pos-brand { flex-shrink: 1; min-width: 0; gap: 8px; padding-right: 0; border-right: 0; }
  .pos-brand .crt-logo { width: 32px; height: 32px; }
  .pos-brand > div:last-child { display: block !important; min-width: 0; }
  /* Menu latéral : raccourcis de la barre du haut en tête (Faire une vente, Tickets payés, Crédits, Caisse du jour, Nouvel article) */
  .sidebar-nav-item.sb-m { display: flex; }
  .sidebar-nav-item.sb-m:nth-last-child(1 of .sb-m) { border-bottom: 2px solid rgba(255, 255, 255, .12); }
  .sb-m-amt { display: block; margin-top: 3px; font-size: 12px; font-weight: 800; color: #f59e0b; }
  .sb-m-dot { display: inline-block; min-width: 18px; padding: 1px 5px; border-radius: 9px; background: #3b82f6; color: #fff; font-size: 10px; }
  .sb-m-dot.warn { background: #f97316; }
  .pos-brand-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }

  /* ---------- Vente : un écran à la fois ---------- */
  .pos { display: flex !important; flex-direction: column; height: 100%; position: relative; padding-bottom: calc(var(--m-tabs-h) + env(safe-area-inset-bottom)); }
  .pos-left { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .pos .ticket { order: 0; flex: 1; min-height: 0; width: 100%; border: 0; display: none; }
  .pos[data-mview="tables"] .catalog-bar, .pos[data-mview="tables"] .products { display: none; }
  .pos[data-mview="menu"] .tables-bar, .pos[data-mview="menu"] .prep-queue { display: none; }
  .pos[data-mview="ticket"] .pos-left { display: none; }
  .pos[data-mview="ticket"] .ticket { display: flex; }

  /* ---------- Écran Tables : grille de 3 colonnes au lieu de la rangée qui défile ---------- */
  .pos[data-mview="tables"] .tables-bar { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 12px 18px; border-bottom: 0; }
  .tables-head { gap: 8px; margin-bottom: 12px; }
  .tables-head h2 { font-size: 18px; width: 100%; }
  .tables-head .pos-clock { display: none; }
  .tables-wrap { position: static; }
  .tables-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; overflow: visible; padding: 2px; }
  .table-group, .table-group.multi { display: contents; }
  .tables-sep, .new-hint { display: none !important; }
  .tables-row .table-chip { width: auto; min-width: 0; height: 86px; padding: 10px 11px; border-radius: 14px; }
  /* Passage (vente directe) : une barre fine sur toute la largeur, au-dessus de la grille */
  .tables-row .table-chip.passage { grid-column: 1 / -1; height: 52px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; }
  .tables-row .table-chip.passage .t-num { padding-right: 0; }
  .tables-row .table-chip.passage .passage-ico { position: static; }
  .table-chip .t-num { font-size: 21px; }
  .table-chip .t-meta { font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; }
  .table-chip .t-amount { font-size: 12.5px; }
  .tables-row .split-add { display: none; }   /* le rond « + » à côté de la table : remplacé par la pastille sur la table */
  /* « + » facture séparée posé dans le coin de la table d'origine (F1 s'il y a déjà des factures séparées) */
  .tables-row .chip-split {
    display: grid; place-items: center; position: absolute; right: 6px; bottom: 6px; z-index: 2; width: 30px; height: 30px; border-radius: 50%;
    background: var(--grad); color: var(--accent-ink); box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .8), 0 0 0 2px var(--bg);
  }
  .tables-row .chip-split svg.lucide { width: 17px; height: 17px; stroke-width: 2.6; }
  .tables-row .chip-split:active { transform: scale(.9); }
  .tables-row .table-chip.selected .chip-split { background: var(--accent-ink); color: var(--accent); }
  .tables-row .table-chip:has(.chip-split) .t-meta { padding-right: 30px; }
  .tables-empty { grid-column: 1 / -1; }

  /* ---------- Écran Menu : recherche, catégories, articles en 2 colonnes ---------- */
  .catalog-bar { flex-direction: column; align-items: stretch; gap: 10px; padding: 10px 12px 6px; }
  .catalog-bar .input-icon { flex-basis: auto; }
  .catalog-bar .input { height: 44px; }
  .cats { padding-bottom: 4px; }
  .products { padding: 8px 12px calc(76px + env(safe-area-inset-bottom)); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .product { border-radius: 14px; }
  .product:hover { transform: none; }
  .p-body { padding: 9px 10px 11px; }

  /* Barre « panier » au-dessus des onglets : ouvre le ticket */
  .pos[data-mview="menu"] .m-cart:not([hidden]) {
    display: flex; align-items: center; gap: 10px; position: absolute; left: 12px; right: 12px; z-index: 25;
    bottom: calc(var(--m-tabs-h) + 10px + env(safe-area-inset-bottom)); height: 52px; padding: 0 14px; border-radius: 14px; border: 0;
    background: var(--grad); color: var(--accent-ink); font-size: 14px; font-weight: 700; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .8);
  }
  .m-cart .mc-n { min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px; display: grid; place-items: center; background: var(--accent-ink); color: var(--accent); font-size: 13px; font-weight: 800; }
  .m-cart .mc-label { flex: 1; min-width: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .m-cart b { font-size: 15px; font-weight: 800; white-space: nowrap; }
  .m-cart svg.lucide { width: 18px; height: 18px; flex: none; }

  /* ---------- Écran Ticket : plein écran, boutons collés en bas ---------- */
  .ticket-head { padding: 10px 12px; }
  .th-info { margin-top: 10px; }
  .ticket-lines { padding: 4px 10px; }
  .t-line { padding: 10px 2px; }
  .qty-ctrl button { width: 40px; height: 40px; }
  .ticket-foot { padding: 10px 12px 12px; }
  .t-actions { margin: 10px 0 8px; }
  .t-act { height: 50px; }
  .t-main .btn-lg { height: 58px; }

  /* « + Facture séparée » dans l'en-tête du ticket (remplace le « + » accroché à la table sur PC) */
  .th-top { align-items: center; }
  .m-split {
    display: inline-flex; align-items: center; gap: 5px; margin-left: auto; height: 36px; padding: 0 12px; border-radius: 10px;
    font-size: 12.5px; font-weight: 700; white-space: nowrap; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent);
  }
  .m-split svg.lucide { width: 16px; height: 16px; }
  .m-split:active { transform: scale(.96); }

  /* ---------- Barre d'onglets du bas (à portée du pouce) ---------- */
  .m-tabs {
    display: grid; grid-template-columns: repeat(3, 1fr); position: absolute; left: 0; right: 0; bottom: 0; z-index: 30;
    height: calc(var(--m-tabs-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: rgba(10, 14, 21, .96); border-top: 1px solid var(--line-2); backdrop-filter: blur(16px);
  }
  .m-tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: transparent; color: var(--muted); font-size: 11.5px; font-weight: 700; min-width: 0; }
  .m-tab span { max-width: 92%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .m-tab svg.lucide { width: 22px; height: 22px; }
  .m-tab.active { color: var(--accent); }
  .m-tab.active::before { content: ''; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); }
  .m-tab[disabled] { opacity: .35; }
  .m-badge { position: absolute; top: 7px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-size: 10.5px; font-weight: 800; }

  /* ---------- Fenêtres : panneau qui monte du bas, toute la largeur ---------- */
  .modal-backdrop { padding: 0; place-items: end stretch; }
  .modal, .modal.lg, .modal.xl { width: 100%; max-height: 92dvh; border-radius: 18px 18px 0 0; }
  .modal-backdrop.drawer { place-items: end stretch; }
  .modal.drawer { width: 100%; height: auto; max-height: 92dvh; border-radius: 18px 18px 0 0; }
  .modal-body { padding: 14px 16px; }
  .modal-foot { padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); }
  .modal-foot .btn { flex: 1; }

  /* Toasts au-dessus des onglets */
  #toast-root { bottom: calc(var(--m-tabs-h) + 74px); width: calc(100% - 24px); }
}