/* Argent : Caisse, Postes, Clôture du jour (argent.js) — gabarit MonPOS avec la charte du garage.
   Chargé avant densite.css : les sélecteurs sont préfixés (#vue, .cs-…) pour garder la main sur la mise en page de ces écrans. */

.cs-ok{color:var(--ok)}
.cs-bad{color:var(--bad)}
.cs-warn{color:var(--warn)}
.cs-vert{color:var(--ok);font-weight:var(--g-fort)}
#vue .btn.cs-lien{min-height:0;border-color:transparent;background:none;color:var(--copper);font-weight:var(--g-fort);padding-inline:0}
#vue .btn.cs-lien:hover{text-decoration:underline}

/* ---------- Caisse : poches ---------- */
#vue .cs-lab{margin:0 0 calc(-1 * var(--esp-2))}
#vue .cs-poches{grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch}
#vue .cs-poches .poche{border-top-width:1px;gap:2px;min-width:0}
#vue .cs-poches .lab{display:flex;align-items:center;gap:6px}
.cs-pt{width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
#vue .cs-poches .num{white-space:nowrap}
.cs-compte{font-size:var(--t-petit);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#vue .cs-poches .btn{align-self:flex-start;margin-top:auto;position:relative;top:6px;margin-bottom:6px}

/* Période à gauche, poche à droite, sur une ligne */
.cs-barre{display:flex;justify-content:space-between;align-items:center;gap:var(--esp-2);flex-wrap:wrap}
.cs-per{display:flex;align-items:center;gap:var(--esp-2);flex-wrap:wrap}
.cs-barre .seg{flex-wrap:nowrap}
.cs-barre .seg button{white-space:nowrap;font-size:var(--t-texte);font-weight:var(--g-normal,500);padding:5px 11px}
.cs-barre .seg button.on{font-weight:var(--g-fort)}
.cs-date{display:flex;align-items:center;gap:6px;font-size:var(--t-petit);color:var(--muted)}
.cs-date .inp{width:auto}

/* 4 cartes de même hauteur */
#vue .cs-kpis{grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch}
#vue .cs-kpis .val{white-space:nowrap}
#vue .cs-kpis .val.cs-ok{color:var(--ok)}
#vue .cs-kpis .val.cs-bad{color:var(--bad)}

/* Tableaux denses : une ligne de texte par mouvement */
#vue .cs-mv,#vue .ps-liste{padding:0;overflow:hidden}
.cs-mv>.panel-h,.ps-liste>.panel-h{padding:12px 16px 0;margin-bottom:8px}
.cs-n{font-weight:var(--g-normal,500);font-size:var(--t-texte)}
.cs-t{width:100%}
#vue .cs-t th,#vue .cs-t td{padding-left:8px;padding-right:8px}
#vue .cs-t :is(th,td):first-child{padding-left:16px}
#vue .cs-t :is(th,td):last-child{padding-right:16px}
#vue .panel:not(.cs-mv):not(.ps-liste)>.tw:has(.cs-t){margin:0 -16px -14px}
.cs-t td{white-space:nowrap}
.cs-t td.cs-det{width:100%;max-width:0}
.cs-det span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-type b{font-weight:var(--g-fort)}
.cs-type.cs-warn b{color:var(--warn)}
.cs-t td.num,.cs-t td .num{font-variant-numeric:tabular-nums}

/* Postes ouverts : petite carte */
.cs-postes .panel-h{margin-bottom:6px}
.cs-poste{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;font-size:var(--t-texte);padding:4px 0}
.cs-poste+.cs-poste{border-top:1px solid var(--line)}

/* Formulaires de la caisse (sous-pages) : choix lisible, listes assez larges */
.cs-form .seg.cs-choix{display:inline-flex;flex-wrap:wrap;align-self:flex-start;width:auto}
.cs-form .seg.cs-choix button{flex:none;white-space:nowrap;font-size:var(--t-texte);padding:6px 14px}
#modal .cs-form .form-grid{max-width:900px;grid-template-columns:repeat(3,minmax(0,1fr))}
#modal .cs-form .form-grid.cs-mvg{grid-template-columns:200px 200px minmax(0,1fr)}
@media (max-width:700px){#modal .cs-form .form-grid,#modal .cs-form .form-grid.cs-mvg{grid-template-columns:minmax(0,1fr)}}
.cs-form select{min-width:0;width:100%}

/* ---------- Postes ---------- */
.ps-ouvert .panel-h{margin-bottom:10px}
.ps-ouvert h2{margin:0}
.ps-tuiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--esp-2)}
.ps-tuile{background:var(--panel2);border-radius:var(--r-btn);padding:8px 12px;display:flex;flex-direction:column;gap:1px;min-width:0}
.ps-tuile span{font-size:var(--t-petit);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-tuile b{white-space:nowrap}
.ps-attendu{margin:10px 0 0;font-size:var(--t-texte)}
.ps-clot{display:flex;align-items:center;gap:var(--esp-2);flex-wrap:wrap;margin-top:10px}
.ps-clot label{display:flex;align-items:center;gap:8px;font-size:var(--t-texte)}
.ps-clot .inp{width:150px;text-align:right}

/* ---------- Clôture du jour ---------- */
.cl-cours{color:var(--warn)}
.cl-jour{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:var(--r-btn);background:var(--panel);padding:2px}
.cl-jour .btn.ico{border:0;background:none;width:30px;height:30px;min-height:30px}
.cl-jour .inp{border:0;width:auto;min-height:30px;padding:2px 6px;background:none}
.cl-deux,.cl-bas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--esp-4);align-items:start}
.cl-carte>h2{margin:0 -16px 6px;padding:0 16px 10px;border-bottom:1px solid var(--line)}
.cl-l{display:flex;justify-content:space-between;align-items:baseline;gap:var(--esp-3);padding:6px 0;font-size:var(--t-texte)}
.cl-l>span:first-child{min-width:0}
.cl-l>span:last-child{white-space:nowrap;text-align:right}
.cl-l .muted.num,.cl-l .num.muted{color:var(--muted)}
.cl-l.fort{font-weight:var(--g-fort)}
.cl-l.sep{border-top:1px solid var(--line)}
.panel .cl-l+.cl-l{border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.panel .cl-l.sep{border-top-color:var(--line)}
.cl-benef{display:flex;justify-content:space-between;align-items:center;gap:var(--esp-3);margin-top:10px;padding:10px 16px;border-radius:var(--r-btn);background:var(--ok);color:#fff}
.cl-benef.neg{background:var(--bad)}
.cl-benef .num{font-size:1.25rem;font-weight:800;white-space:nowrap}
.cl-esp{margin:8px 0;padding:4px 12px 8px;border:1px solid var(--line);border-radius:var(--r-btn);background:var(--panel2)}
.cl-esp .cl-l{padding-bottom:0}
.cl-du>span.r{display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.cl-bas .stack{display:flex;flex-direction:column;gap:var(--esp-4)}

@media (max-width:1100px){.ps-tuiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){
  #vue .cs-poches,#vue .cs-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cl-deux,.cl-bas{grid-template-columns:minmax(0,1fr)}
  .cs-barre .seg{flex-wrap:wrap}
}
@media (max-width:640px){
  .cs-t td.cs-det{max-width:220px;width:auto}
  .ps-tuiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ======================= Téléphone (Z Fold fermé 344 px → Z Fold ouvert 690 px) =======================
   Tableaux en cartes (règles communes « table.ct » dans gestion.css) ; rien ne change sur PC. */
@media (max-width:760px){
  #vue table.cs-t.ct :is(th,td),#vue table.cs-t.ct :is(th,td):first-child,#vue table.cs-t.ct :is(th,td):last-child{padding:0}
  #vue .panel:not(.cs-mv):not(.ps-liste)>.tw:has(.cs-t.ct){margin:0 -10px -8px}
  #vue .cs-kpis .val,#vue .cs-poches .num{white-space:normal;font-size:1.1rem;overflow-wrap:anywhere}
  #vue .cs-poches .btn{min-height:36px;top:0;margin-top:6px;margin-bottom:0}
  .cs-compte{white-space:normal}
  .cs-barre,.cs-per,.cs-barre>.seg,.cs-per>.seg{width:100%}
  .cs-barre .seg button{flex:1 1 auto;min-height:36px;padding:5px 8px}
  .cs-date{flex:1 1 130px}
  .cs-date .inp{flex:1;min-width:0}
  /* Mouvements de caisse : type et montant en haut, date et poche, détail et auteur */
  #vue .cs-mv table.ct>tbody>tr{grid-template-columns:minmax(0,1fr) auto;gap:3px 12px}
  #vue .cs-mv table.ct td[data-l]::before{display:none}
  #vue .cs-mv table.ct td.ct-t{grid-column:1;grid-row:1;border:0;padding-bottom:0}
  #vue .cs-mv table.ct td.num.cs-ok,#vue .cs-mv table.ct td.num.cs-bad{grid-column:2;grid-row:1;align-items:flex-end;font-weight:var(--g-fort);white-space:nowrap}
  #vue .cs-mv table.ct td.num.cs-ok::after{content:"entrée";font-size:var(--t-etiq);font-weight:var(--g-normal);color:var(--muted)}
  #vue .cs-mv table.ct td.num.cs-bad::after{content:"sortie";font-size:var(--t-etiq);font-weight:var(--g-normal);color:var(--muted)}
  #vue .cs-mv table.ct td[data-l=Date]{grid-column:1;grid-row:2;font-size:var(--t-petit);color:var(--muted)}
  #vue .cs-mv table.ct td[data-l=Poche]{grid-column:2;grid-row:2;align-items:flex-end;font-size:var(--t-petit)}
  #vue .cs-mv table.ct td.cs-det{grid-column:1;grid-row:3}
  #vue .cs-mv table.ct td[data-l=Par]{grid-column:2;grid-row:3;align-items:flex-end}
  #vue .cs-mv table.ct .cs-det span{white-space:normal}
  /* Postes */
  .ps-ouvert .panel-h{flex-wrap:wrap}
  .ps-clot label{flex:1 1 100%;flex-wrap:wrap}
  .ps-clot .inp{flex:1;min-width:0;width:auto;min-height:40px}
  .ps-clot .btn{flex:1 1 100%;justify-content:center;min-height:42px}
  .ps-tuile b{white-space:normal;overflow-wrap:anywhere}
  /* Clôture du jour : choix du jour à la largeur de l'écran */
  .cl-jour{flex:1 1 100%;justify-content:space-between}
  .cl-jour .btn.ico{width:40px;height:40px;min-height:40px}
  .cl-l>span:last-child{white-space:normal}
}