/* Pages de gestion refaites à l'image de MonPOS : Tableau de bord, Ventes, Achats, Proformas, Paramètres, Utilisateurs & rôles.
   Chargé juste avant densite.css ; sélecteurs préfixés (tb-, vt-, ach-, pf-, par-, us-) pour ne toucher à rien d'autre. */

/* Texte sur une seule ligne, coupé par « … » (le texte complet est dans l'info-bulle) */
.une-ligne{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* Un tableau dans un tableau (vente ou achat déplié) n'a jamais d'en-tête collant */
.content .detail table thead th,.content .tw.colle .detail table thead th{position:static;top:auto}

/* ======================= Tableau de bord ======================= */
.content .tb-kpis{grid-template-columns:minmax(0,.8fr) minmax(0,1.25fr) minmax(0,1.17fr) minmax(0,.8fr) minmax(0,.98fr);align-items:stretch}
.content .tb-kpis .kpi .val{font-size:1.375rem}
.content .tb-kpis .kpi{padding:12px 13px}
.tb-kpis .kpi{min-height:0}
.tb-kpis .sub.tb-1l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-kpis .tb-lien[data-go]{cursor:pointer}
.tb-kpis .tb-lien[data-go]:hover{border-color:var(--copper)}
/* Détail des cartes : grille libellé | montant | % */
.tb-grille{margin-top:8px;padding-top:6px;border-top:1px solid color-mix(in srgb,currentColor 14%,transparent);display:flex;flex-direction:column;gap:2px;font-size:var(--t-petit);line-height:1.45}
.tb-l{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:baseline}
.tb-pcts .tb-l{grid-template-columns:minmax(0,1fr) auto 42px;column-gap:8px}
.tb-l>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-l>.num{text-align:right;font-weight:var(--g-fort);white-space:nowrap;font-variant-numeric:tabular-nums}
.tb-l>.tb-pct{text-align:right;color:var(--muted);font-size:var(--t-etiq);white-space:nowrap;font-variant-numeric:tabular-nums}
.tb-l.tb-somme{margin-top:3px;padding:3px 6px;margin-inline:-6px;border-radius:4px;background:color-mix(in srgb,var(--ok-soft) 70%,transparent);color:var(--ok);font-weight:var(--g-fort)}
.kpi.hero .tb-l.tb-somme{background:rgba(255,255,255,.16);color:#fff}
.kpi.hero .tb-l>.num{color:#fff}
/* Bas de page : 2 colonnes (≈ 2/3 – 1/3) */
.tb-bas{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--esp-4);align-items:start}
@media (max-width:1100px){.content .tb-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.tb-bas{grid-template-columns:minmax(0,1fr)}.content .tb-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.content .tb-kpis{grid-template-columns:minmax(0,1fr)}}
.tb-chart{gap:3px}
.tb-chart+.chart-x{gap:3px}
.tb-chart+.chart-x span{white-space:nowrap;overflow:visible}
.tb-ph{padding:12px 16px 0;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}
.tb-ventes{table-layout:fixed;width:100%}
.tb-ventes td{white-space:nowrap}
.tb-ventes th:nth-child(1){width:64px}.tb-ventes th:nth-child(2){width:136px}.tb-ventes th:nth-child(4){width:84px}.tb-ventes th:nth-child(5){width:116px}.tb-ventes th:nth-child(6){width:104px}
.tb-afaire .tb-af{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:8px;align-items:center;width:100%;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;color:var(--ink);font:inherit;font-size:var(--t-texte);cursor:pointer;padding:8px 2px}
.tb-afaire .tb-af:last-child{border-bottom:0}
.tb-afaire .tb-af:hover:not(:disabled){color:var(--copper)}
.tb-afaire .tb-af:disabled{cursor:default;opacity:.7}
.tb-af-i{color:var(--muted);display:inline-flex}
.tb-af-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list .li .t{min-width:0;overflow:hidden}

/* ======================= Ventes ======================= */
.content .vt-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:860px){.content .vt-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.vt-table{table-layout:fixed;width:100%}
.vt-table th.vt-no{width:78px} .vt-table th.vt-date{width:132px} .vt-table th.vt-vend{width:92px} .vt-table th.vt-st{width:106px}
.vt-table th.vt-m{width:120px} .vt-table th.vt-env{width:74px}
.vt-table>tbody>tr>td{white-space:nowrap}
.vt-num{display:inline-flex;align-items:center;gap:6px;font-weight:var(--g-fort)}
.vt-tri{color:var(--muted);font-size:10px;width:8px}
.vt-table tr.open .vt-n{text-decoration:underline;text-underline-offset:3px}
/* Vente dépliée */
.vt-detail{gap:10px}
.vt-detail table.mini{width:100%;table-layout:auto}
.vt-detail table.mini td{white-space:nowrap}
.vt-detail table.mini td:first-child{white-space:normal;max-width:0;width:50%}
.vt-bas{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap}
.vt-regl{flex:1 1 320px;min-width:0}
.vt-regl .due{margin-top:6px;display:inline-block}
.vt-total{display:flex;gap:28px;align-items:baseline;border-top:1px solid var(--line);padding-top:6px;min-width:240px;justify-content:space-between}
.vt-total span{font-weight:var(--g-fort)}
.vt-total b{font-size:1rem}
.vt-tot-bloc{min-width:240px}
.vt-revient{margin-top:4px;color:var(--muted)}
.vt-revient>div{display:flex;justify-content:space-between;gap:28px}
.vt-actions{display:flex;justify-content:flex-end;align-items:center;gap:4px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:8px}
.vt-act{display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:var(--ink);font:inherit;font-size:var(--t-petit);font-weight:var(--g-fort);padding:5px 9px;border-radius:var(--r-btn);cursor:pointer;white-space:nowrap}
.vt-act svg{width:15px;height:15px}
.vt-act:hover{background:var(--panel2)}
.vt-act.vt-wa{color:var(--ok)}
.vt-act.vt-danger{color:var(--bad);font-weight:var(--g-normal);opacity:.85}
.vt-act.vt-danger:hover{background:var(--bad-soft);opacity:1}
.vt-actions .btn.sm{margin-left:4px}

/* ======================= Proformas ======================= */
.pf-table{table-layout:fixed;width:100%}
.pf-table>tbody>tr>td{white-space:nowrap}
.pf-table th.pf-no{width:104px} .pf-table th.pf-date{width:128px} .pf-table th.pf-l{width:60px} .pf-table th.pf-m{width:114px}
.pf-table th.pf-par{width:86px} .pf-table th.pf-rep{width:156px} .pf-table th.pf-act{width:98px}
.content .pf-actions>summary.btn{font-size:var(--t-petit);font-weight:var(--g-fort);letter-spacing:0;line-height:20px;white-space:nowrap}

/* ======================= Paramètres ======================= */
.par-onglets{flex-wrap:nowrap}
.content .par-panel,.content form.dm-reglages{max-width:860px;width:100%;box-sizing:border-box}
.par-panel .form-grid{margin-bottom:4px}
.par-pied{display:flex;justify-content:flex-end;border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
.par-panel textarea{font-family:var(--f-body);line-height:1.45}

/* ======================= Utilisateurs & rôles ======================= */
.us-table td{white-space:nowrap}
.us-proprio{display:inline-flex;vertical-align:-1px;color:var(--muted);cursor:help}
.us-enligne{display:inline-flex;align-items:center;gap:6px;color:var(--ok);font-weight:var(--g-fort)}
.us-enligne::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.us-actions{display:flex;justify-content:flex-end;gap:2px}
/* Rôle choisi : à qui il est donné + Renommer / Supprimer ; liste des rôles sur plusieurs lignes si elle est longue */
.role-outils{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;margin-top:2px}
.role-outils .us-actions{justify-content:flex-start}
.role-outils .vt-act{padding:3px 7px}
.us-roles .panel-h>.seg{flex-wrap:wrap}
/* Niveaux Aucun / Voir / Modifier : sobres, comme les autres sélecteurs (choix actif en anthracite) */
.content .us-roles .perm .seg button.on.n,.content .us-roles .perm .seg button.on.v,.content .us-roles .perm .seg button.on.m{background:var(--ink);color:var(--bg)}
.content .us-roles .perm .seg button.on.n{background:var(--panel2);color:var(--muted)}

/* ======================= Achats ======================= */
.content .ach-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:640px){.content .ach-kpis{grid-template-columns:minmax(0,1fr)}}
.ach-kpis .tb-lien[data-act]{cursor:pointer}
.ach-kpis .tb-lien[data-act]:hover{border-color:var(--copper)}
.content .ach-filtres{display:flex;align-items:center;gap:var(--esp-2);padding:10px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.content .ach-filtres select.inp{width:auto;max-width:220px;flex:none}
.ach-filtres .ach-compte{margin-left:auto;white-space:nowrap}
/* Pièces du marché du vendeur choisi (payées comptant, sur les factures) */
.ach-marche{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:8px 16px;background:var(--copper-soft);border-bottom:1px solid var(--line);font-size:var(--t-petit)}
.ach-marche>span{flex:1 1 300px}
.ach-table{table-layout:fixed;width:100%}
.ach-table>tbody>tr>td{white-space:nowrap}
.ach-table th.ach-chev{width:34px;padding-right:0} .ach-table td.ach-chev{color:var(--muted);padding-right:0}
.ach-table td.ach-chev svg{display:block}
.ach-table tr.open td.ach-chev{color:var(--copper)}
.ach-table th.ach-no{width:66px} .ach-table th.ach-date{width:136px} .ach-table th.ach-st{width:170px} .ach-table th.ach-art{width:80px}
.ach-table th.ach-tot{width:128px} .ach-table th.ach-par{width:96px} .ach-table th.ach-pay{width:76px}
.content .ach-four{border:0;background:none;padding:0;min-height:0;font:inherit;font-weight:var(--g-fort);color:var(--ink);cursor:pointer;text-decoration:none;box-shadow:none}
.content .ach-four:hover{color:var(--copper)}

/* ======================= Téléphone : tableaux en cartes =======================
   Zone Stock / Achats / Argent / Analyse / Rapports / Journal. Un tableau marqué class="ct" devient une liste de cartes
   sous 760 px (Z Fold ouvert compris) ; chaque case affiche son libellé (attribut data-l). Rien ne change sur PC.
   ct-t : ligne titre (toute la largeur, en premier) · ct-p : toute la largeur · ct-x : masqué au téléphone · ct-d : bouton à droite */
@media (max-width:760px){
  .content table.ct{display:block;width:100%;table-layout:auto;min-width:0;border:0}
  .content table.ct>thead{display:none}
  .content table.ct>tbody,.content table.ct>tfoot{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:6px}
  .content table.ct>tbody>tr,.content table.ct>tfoot>tr{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:7px 10px;padding:10px 11px;border:1px solid var(--line);border-radius:10px;background:var(--panel);min-width:0}
  .content table.ct>tbody>tr>td,.content table.ct>tfoot>tr>td{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:1px;padding:0;border:0;white-space:normal;text-align:left;min-width:0;max-width:none;width:auto;overflow-wrap:anywhere;background:none}
  .content table.ct td[data-l]::before{content:attr(data-l);font-size:var(--t-etiq);color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:var(--g-fort);line-height:1.3}
  .content table.ct td:empty,.content table.ct td.ct-x{display:none}
  .content table.ct td.ct-p{grid-column:1/-1}
  .content table.ct>tbody>tr>td:where(.ct-t,.ct1>tbody>tr>td:first-child){grid-column:1/-1;order:-1;flex-direction:row;align-items:center;justify-content:flex-start;text-align:left;gap:10px;font-size:var(--t-texte);padding-bottom:6px;border-bottom:1px solid var(--line)}
  .content table.ct>tbody>tr>td:where(.ct-t,.ct1>tbody>tr>td:first-child){font-weight:var(--g-fort)}
  .content table.ct>tbody>tr>td:where(.ct-t,.ct1>tbody>tr>td:first-child)>*{min-width:0}
  .content table.ct>tbody>tr>td:where(.ct-t,.ct1>tbody>tr>td:first-child)>b,.content table.ct>tbody>tr>td:where(.ct-t,.ct1>tbody>tr>td:first-child)>div{flex:1 1 auto;text-align:left}
  .content table.ct td.ct-d{grid-column:1/-1;align-items:stretch}
  .content table.ct td.ct-d .btn{justify-content:center;min-height:40px}
  .content table.ct .une-ligne,.content table.ct .sub,.content table.ct td .num{white-space:normal;max-width:none}
  .content table.ct .sub{display:block}
  .content table.ct>tbody>tr>td:where(.ct-t,.ct1>tbody>tr>td:first-child)>.sub{white-space:nowrap;flex:none;margin-left:auto;font-weight:var(--g-normal)}
  .content table.ct .inp{min-height:38px}
  .content table.ct>tbody>tr.detail{display:block;padding:0;border:0;background:none}
  .content table.ct>tbody>tr.detail>td{display:block;padding:0}
}
/* Z Fold ouvert, iPhone couché : deux cartes par ligne */
@media (min-width:600px) and (max-width:760px){
  .content table.ct>tbody{grid-template-columns:repeat(2,minmax(0,1fr))}
  .content table.ct>tbody>tr.detail{grid-column:1/-1}
}
/* Achats au téléphone : filtres à la largeur de l'écran, fiche d'achat en carte */
@media (max-width:760px){
  .content .ach-filtres{padding:10px 12px}
  .content .ach-filtres>b{flex:1 1 100%}
  .content .ach-filtres select.inp{flex:1 1 140px;max-width:none;min-width:0}
  .content .ach-filtres select[data-champ="achFour"]{flex-basis:100%}
  .content .ach-filtres .ach-compte{margin-left:0;white-space:normal;flex:1 1 100%}
  .content table.ach-table td.ach-chev{display:none}
  .content table.ach-table td.ach-ft .une-ligne{white-space:normal}
  .content table.ach-table tr.open{border-color:var(--copper)}
  .content table.ach-table tr.detail .detail-in{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}
  .content table.ach-table tr.detail table.mini td:first-child{white-space:normal}
  .content table.ach-table tr.detail .vt-total{min-width:0;flex:1 1 100%}
  .content table.ach-table tr.detail .vt-actions .btn,.content table.ach-table tr.detail .vt-act{min-height:40px}
}
/* Paramètres (onglets aussi utilisés par le Journal) : sur deux lignes au téléphone, jamais coupés */
@media (max-width:760px){
  .content .head .par-onglets{flex-wrap:wrap;width:100%;max-width:100%}
  .content .head .par-onglets button{flex:1 1 auto;min-height:38px}
}
/* Réglages du site (public/site-reglages.js) : bouton Enregistrer sous les cadres, aide à sa gauche */
.content .sr-pied{max-width:860px;box-sizing:border-box;align-items:center;gap:12px;flex-wrap:wrap;border-top:0;margin-top:14px}
/* Changements du site en préparation (pas encore publiés) : bandeau en haut des pages Réglages / Articles du site */
.sr-prepa{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 var(--esp-3,12px);padding:10px 12px;border:1px solid var(--warn);border-radius:var(--r-carte);background:var(--warn-soft);color:var(--ink)}
.sr-prepa-t{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:2px}
.sr-prepa-t b{color:var(--warn)}
.sr-prepa-t span{font-size:var(--t-petit);color:var(--muted);overflow-wrap:anywhere}
.sr-prepa-b{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:640px){.sr-prepa-b{width:100%}.sr-prepa-b .btn{flex:1 1 auto;justify-content:center}}
/* Tableau de bord : choix des ventes selon les associés */
.tb-part{width:auto;min-width:0;max-width:230px}
.tb-part-info{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 var(--esp-3);padding:8px 12px;border-radius:var(--r-carte);background:var(--copper-soft);font-size:var(--t-petit)}
.tb-part-info span{flex:1 1 300px}
/* Paramètres : texte proposé à relire avant d'être enregistré */
.par-a-valider{margin:0;padding:8px 10px;border-radius:8px;background:var(--warn-soft);color:var(--ink)}
/* Paramètres : boutons « Voir un exemple » (public/apercu-modeles.js) */
.apercu-modeles{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
/* Ventes faites sur la tablette du mécano : bandeau « à vérifier » et rappel dans la vente dépliée */
.vt-bandeau{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 var(--esp-3);padding:9px 12px;border-radius:var(--r-carte);background:var(--bad-soft);color:var(--ink);font-size:var(--t-petit)}
.vt-bandeau>svg{color:var(--bad);flex:none;width:18px;height:18px}
.vt-bandeau span{flex:1 1 260px}
.vt-verif{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0;padding:8px 10px;border-radius:8px;background:var(--bad-soft);font-size:var(--t-petit)}
.vt-verif>svg{color:var(--bad);flex:none;margin-top:1px;width:16px;height:16px}
.vt-ok{background:var(--ok);border-color:var(--ok)}
.vt-bandeau.fini{background:var(--ok-soft)}.vt-bandeau.fini>svg{color:var(--ok)}
.vt-verif,.vt-verif span{white-space:normal}
.pf-averif{margin-right:4px}