/* =========================================================
 * OUATT PHYTO — Couche mobile-first commune (chargée après premium.css)
 * Classes posées par app.js sur <html> : dev-mobile | dev-tablette | dev-ordi,
 * mep-* (mise en page selon la largeur réelle), tactile, ios, android, pwa-standalone.
 * ========================================================= */
:root{--gris-btn:#ECECF0;--gris-btn-txt:#1C1C1E;--gris-btn-actif:#DCDCE2;--tap:44px;--vert-marque:#1E8E3E}

/* ---------- Boutons : actions secondaires grises et sobres ---------- */
.btn-secondary,.btn.sec{background:var(--gris-btn)!important;color:var(--gris-btn-txt)!important;box-shadow:none!important;border:0!important}
.btn-secondary:active,.btn.sec:active{background:var(--gris-btn-actif)!important}
.btn,.pc-btn,button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}

/* ---------- Zones tactiles confortables (doigt) ---------- */
html.tactile .btn{min-height:var(--tap);display:inline-flex;align-items:center;justify-content:center;gap:6px}
html.tactile .btn-sm,html.tactile .btn.sm{min-height:40px;padding:9px 14px!important;font-size:13px!important}
html.tactile .modal-close{width:36px!important;height:36px!important;margin-top:-18px!important;line-height:36px!important;font-size:16px!important}
html.tactile select,html.tactile input:not([type=checkbox]):not([type=radio]),html.tactile textarea{min-height:42px}

/* Boutons côte à côte : jamais collés */
td .btn + .btn,td .btn + .badge,td .badge + .btn,.title-actions .btn + .btn,.card .btn + .btn{margin-left:8px}

/* ---------- Mobile : actions empilées, tableaux en cartes ---------- */
@media (max-width:767px){
  /* Pied de modale : boutons pleine largeur, empilés */
  .modal-footer .btn,.modal-f .btn{float:none!important;display:flex!important;width:100%;margin:0 0 10px 0!important}
  .modal-footer{display:flex;flex-direction:column-reverse}

  /* Tableaux enrichis (tableaux.js) : une carte par ligne, titre de colonne à gauche */
  table.tbl.pc-cartes:not(.pc-saisie):not(.pc-brut){border:0;background:transparent;box-shadow:none}
  table.tbl.pc-cartes:not(.pc-saisie):not(.pc-brut) thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.tbl.pc-cartes:not(.pc-saisie):not(.pc-brut),table.tbl.pc-cartes:not(.pc-saisie):not(.pc-brut) tbody{display:block;width:100%}
  table.tbl.pc-cartes:not(.pc-saisie):not(.pc-brut) tbody tr{display:block;background:#fff;border-radius:14px;margin:0 0 12px;padding:6px 14px;box-shadow:0 1px 3px rgba(0,0,0,.07);border:.5px solid rgba(0,0,0,.06)}
  table.tbl.pc-cartes:not(.pc-saisie):not(.pc-brut) tbody tr.pc-masque{display:none}
  table.tbl.pc-cartes:not(.pc-saisie):not(.pc-brut) tbody td{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0!important;border:0!important;border-bottom:.5px solid rgba(0,0,0,.06)!important;text-align:right!important;min-height:22px;word-break:break-word}
  table.tbl.pc-cartes:not(.pc-saisie):not(.pc-brut) tbody td:last-child{border-bottom:0!important}
  table.tbl.pc-cartes:not(.pc-saisie):not(.pc-brut) tbody td[data-label]::before{content:attr(data-label);flex:0 0 auto;max-width:45%;text-align:left;font-size:12px;font-weight:600;color:#8E8E93;text-transform:none}
  table.tbl.pc-cartes:not(.pc-saisie):not(.pc-brut) tbody td[data-label=""]::before{content:none}
  table.tbl.pc-cartes:not(.pc-saisie):not(.pc-brut) tbody td[colspan]{display:block;text-align:center!important}
  table.tbl.pc-cartes:not(.pc-saisie):not(.pc-brut) tfoot{display:block}
  table.tbl.pc-cartes:not(.pc-saisie):not(.pc-brut) tfoot tr{display:flex;flex-wrap:wrap;justify-content:space-between;background:#F2F2F7;border-radius:12px;padding:10px 14px}
  table.tbl.pc-cartes:not(.pc-saisie):not(.pc-brut) tfoot td{border:0!important;padding:2px 0!important}
  /* Dernière colonne (actions) : boutons empilés, pleine largeur, espacés */
  table.tbl.pc-cartes:not(.pc-saisie):not(.pc-brut) tbody td:last-child{flex-direction:column;align-items:stretch;gap:8px;padding-top:12px!important}
  table.tbl.pc-cartes:not(.pc-saisie):not(.pc-brut) tbody td:last-child::before{display:none}
  table.tbl.pc-cartes:not(.pc-saisie):not(.pc-brut) tbody td:last-child .btn{width:100%;margin:0!important}
  table.tbl.pc-cartes:not(.pc-saisie):not(.pc-brut) tbody td:last-child .badge{align-self:flex-start;margin:0!important}
  /* Une cellule d'action qui ne contient que du texte reste alignée normalement */
  table.tbl.pc-cartes:not(.pc-saisie):not(.pc-brut) tbody td:last-child:not(:has(.btn,button,a)){flex-direction:row;align-items:center;padding-top:9px!important}
  table.tbl.pc-cartes:not(.pc-saisie):not(.pc-brut) tbody td:last-child:not(:has(.btn,button,a))::before{display:block}
  .tbl-wrap,.tbl-w{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* Tableaux non enrichis : défilement horizontal propre plutôt que débordement */
  .data-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .title-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
  .title-actions .btn{margin:0!important}
}

/* ---------- Modales plein écran (admin / caisse) : Safari iOS ---------- */
.modal-box{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:env(safe-area-inset-bottom)}
.modal-box .modal-body{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
@media (orientation:landscape) and (max-height:500px){
  .modal-box{top:0!important;border-radius:0!important}
  .modal-header{padding-top:10px!important;padding-bottom:10px!important}
}

/* ---------- Détail d'une livraison (écarts) ---------- */
.liv-statut-bandeau{border-radius:12px;padding:12px 14px;font-weight:700;font-size:14px;margin-bottom:12px}
.liv-statut-bandeau.ecart{background:#FFF4E5;color:#9A5B00}
.liv-statut-bandeau.ok{background:#E9F8EE;color:#1E7A3A}
.liv-statut-bandeau.att{background:#F2F2F7;color:#3A3A3C}
.liv-ligne{background:#fff;border-radius:14px;padding:14px;margin-bottom:12px;box-shadow:0 1px 3px rgba(0,0,0,.07)}
.liv-tete{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.liv-tete img,.liv-img-vide{width:48px;height:48px;border-radius:10px;object-fit:cover;flex:0 0 48px;background:#F0F0F5;display:flex;align-items:center;justify-content:center}
.liv-nom{font-weight:700;font-size:15px;line-height:1.3;word-break:break-word}
.liv-chiffres{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.liv-chiffres div{background:#F7F7FA;border-radius:10px;padding:8px 4px}
.liv-chiffres span{display:block;font-size:11px;color:#8E8E93;margin-bottom:2px}
.liv-chiffres b{font-size:15px}
.liv-motif{margin-top:10px;background:#FFFBF2;border-left:3px solid #FF9500;border-radius:8px;padding:8px 10px;font-size:13px;line-height:1.45}
.liv-motif small{color:#8E8E93}
.liv-dispo{margin-top:12px}
.liv-etat{font-size:12px;font-weight:700;margin-bottom:6px}.liv-etat.orange{color:#C77700}.liv-etat.rouge{color:#D70015}
.liv-votes{font-size:12px;color:#555;margin-bottom:10px;line-height:1.6}
.liv-actions{display:flex;flex-wrap:wrap;gap:10px}
.liv-actions .btn{flex:1 1 140px;margin:0!important;min-height:44px}
.liv-note{color:#8E8E93;font-size:12px;margin:6px 2px 14px;line-height:1.5}
.liv-histo{background:#fff;border-radius:14px;padding:12px 14px}
.liv-histo-titre{font-weight:700;font-size:13px;margin-bottom:8px}
.liv-histo-ligne{font-size:12px;line-height:1.45;padding:7px 0;border-top:.5px solid rgba(0,0,0,.07)}
.liv-histo-ligne span{display:block;color:#8E8E93;font-size:11px}

/* ---------- Bandeau d'installation PWA ---------- */
.pwa-bandeau{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:4800;max-width:520px;margin:0 auto;background:#fff;border-radius:18px;
  box-shadow:0 18px 50px -12px rgba(0,0,0,.35);padding:14px;display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:center;
  -webkit-transform:translateY(140%);transform:translateY(140%);-webkit-transition:-webkit-transform .35s ease;transition:transform .35s ease;border-top:4px solid var(--vert-marque)}
.pwa-bandeau.on{-webkit-transform:none;transform:none}
.pwa-logo{width:52px;height:52px;border-radius:12px;object-fit:cover}
.pwa-txt strong{display:block;font-size:15px;line-height:1.3;margin-bottom:3px;color:#111}
.pwa-txt span{display:block;font-size:13px;color:#555;line-height:1.45}
.pwa-ico{display:inline-block;font-weight:700;color:var(--vert-marque)}
.pwa-btns{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pwa-btns button{border:0;border-radius:12px;min-height:46px;font-size:15px;font-weight:600;font-family:inherit;cursor:pointer}
.pwa-oui{background:var(--vert-marque);color:#fff}
.pwa-non{background:var(--gris-btn);color:#1C1C1E}

/* ---------- Ordinateur : confort sur grand écran ---------- */
@media (min-width:1400px){ .content,.main-content{max-width:1500px;margin-left:auto;margin-right:auto} }

/* ---------- <dialog> : rendu identique partout + feuille sur mobile ---------- */
dialog{max-height:calc(100% - 32px);box-sizing:border-box;overscroll-behavior:contain}
dialog::backdrop{background:rgba(0,0,0,.45)}
dialog.ph-dialog-poly{position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:4500;margin:0;display:block;background:#fff;color:inherit;overflow:auto;-webkit-overflow-scrolling:touch;box-shadow:0 30px 80px -20px rgba(0,0,0,.4)}
.ph-dialog-fond{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.45);z-index:4400}
@media (max-width:767px){
  dialog[open]{width:100%!important;max-width:none!important;margin:auto 0 0!important;border-radius:18px 18px 0 0!important;max-height:92%;padding-bottom:env(safe-area-inset-bottom)}
  dialog.ph-dialog-poly{top:auto;bottom:0;left:0;-webkit-transform:none;transform:none}
  dialog .modal-b{max-height:none!important}
}