/* Dépenses : bandeau « Dépensé sur la période », barres par catégorie, barre d'outils, tableau pleine largeur (cartes sur téléphone) */
.dep-haut{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-2);flex-wrap:wrap}
.dep-onglets button{padding:7px 14px;font-size:var(--t-texte)}
.dep-n{display:inline-block;min-width:20px;padding:0 6px;margin-left:4px;border-radius:10px;background:var(--panel2);color:var(--muted);font-size:var(--t-etiq);line-height:18px;text-align:center}
.dep-onglets button.on .dep-n{background:color-mix(in srgb,var(--bg) 22%,transparent);color:inherit}
.btn.dep-net{border-color:transparent;background:none;color:var(--copper);font-weight:var(--g-fort)}
.btn.dep-net:hover{text-decoration:underline}

.dep-dues{display:flex;gap:var(--esp-3);align-items:flex-start;background:var(--warn-soft);color:var(--ink);border:1px solid color-mix(in srgb,var(--warn) 35%,transparent);border-radius:var(--r-carte);padding:var(--esp-3) var(--esp-4)}
.dep-dues>svg{width:20px;height:20px;color:var(--warn);flex:none;margin-top:2px}
.dep-dues-c{display:flex;flex-direction:column;gap:var(--esp-2);flex:1;min-width:0}
.dep-due{display:flex;justify-content:space-between;align-items:center;gap:var(--esp-2);flex-wrap:wrap}

.dep-hero{background:var(--hero);color:var(--hero-hi);border-radius:var(--r-carte);padding:var(--esp-4) 20px}
.dep-hero-h{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--esp-3);flex-wrap:wrap}
.dep-lab{display:block;font-size:var(--t-etiq);font-weight:var(--g-fort);letter-spacing:.12em;text-transform:uppercase;color:var(--hero-ink)}
.dep-sub{display:block;margin-top:2px;font-size:var(--t-petit);color:var(--hero-ink)}
.dep-total{font-size:2rem;font-weight:800;color:var(--hero-num);line-height:1.1;white-space:nowrap}
.dep-total small{font-size:.9rem;font-weight:600;color:var(--hero-ink)}
.dep-cats{margin-top:var(--esp-4);border-top:1px solid color-mix(in srgb,var(--hero-ink) 25%,transparent);padding-top:var(--esp-3);display:flex;flex-direction:column;gap:2px}
.dep-cats h2{font-size:var(--t-etiq);letter-spacing:.12em;text-transform:uppercase;color:var(--hero-ink);margin:0 0 var(--esp-1)}
.dep-ligne{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(60px,2fr) 130px 54px;align-items:center;gap:var(--esp-3);width:100%;border:0;background:none;color:inherit;
  padding:5px 6px;border-radius:var(--r-btn);text-align:left;font:inherit;cursor:pointer}
.dep-ligne:hover,.dep-ligne.on{background:color-mix(in srgb,var(--hero-hi) 10%,transparent)}
.dep-ligne.on .dep-nom{text-decoration:underline;text-underline-offset:3px}
.dep-nom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--t-texte);font-weight:var(--g-fort)}
.dep-barre{height:8px;border-radius:4px;background:color-mix(in srgb,var(--hero-hi) 18%,transparent);overflow:hidden}
.dep-barre i{display:block;height:100%;border-radius:4px;background:var(--hero-num)}
.dep-mt-c{text-align:right;white-space:nowrap;font-size:var(--t-texte);color:var(--hero-num)}
.dep-pct{text-align:right;font-size:var(--t-petit);color:var(--hero-ink)}

.dep-outils{display:flex;justify-content:space-between;align-items:center;gap:var(--esp-2);flex-wrap:wrap}
.dep-filtres,.dep-periode{display:flex;align-items:center;gap:var(--esp-2);flex-wrap:wrap}
.dep-filtres .inp,.dep-periode .inp{width:auto;max-width:220px}
.dep-filtres input[type=search]{width:200px}
.dep-filtres #dcNom{width:300px;max-width:100%}
.dep-date-l{display:flex;align-items:center;gap:6px;font-size:var(--t-petit);color:var(--muted)}
.dep-compte{margin:0 0 calc(-1 * var(--esp-2))}
.dep-panel{padding:0}
.dep-t td{vertical-align:top}
.dep-t .dep-desc{min-width:180px}
.dep-desc b{display:block;font-weight:var(--g-fort)}
.dep-note{display:block;font-size:var(--t-petit);font-style:italic;color:var(--muted)}
.dep-cat-c .pill{display:inline-block;max-width:200px;overflow:hidden;text-overflow:ellipsis;vertical-align:top}
.dep-cat-c .pill::before{display:inline-block;margin-right:5px;vertical-align:middle}
.dep-mt{color:var(--bad);font-weight:var(--g-fort);white-space:nowrap}
.dep-act{text-align:right;min-width:120px}
.dep-act .btn{margin:2px 0 2px 6px}
.dep-date{white-space:nowrap}

/* Rangée de cartes (au lieu du grand bloc cuivre) + « Par catégorie » repliable, barres grises comme MonPOS */
#vue .dep-kpis{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
#vue .dep-kpis .val{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#vue .dep-kpis .val.dep-rouge{color:var(--bad)}
#vue .dep-kpis .val.dep-txt{font-size:var(--t-carte);line-height:1.6}
#vue .dep-cats-p,#vue .dep-panel{padding:0}
/* Description : prend la place qui reste ; titre et note sur une ligne chacun (texte complet au survol) */
@media (min-width:761px){
  .dep-t td.dep-desc-l{width:100%;max-width:0;min-width:0}
  .dep-desc-l b,.dep-desc-l .dep-note{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dep-t td.dep-date,.dep-t td.dep-par,.dep-t td.dep-moyen{white-space:nowrap}
  .dep-t td{vertical-align:middle}
  #vue .dep-t :is(th,td){padding-left:8px;padding-right:8px}
  #vue .dep-t :is(th,td):first-child{padding-left:16px}
  #vue .dep-t :is(th,td):last-child{padding-right:12px}
}
.dep-cats-p>summary{display:flex;align-items:baseline;gap:10px;padding:10px 16px;cursor:pointer;list-style:none}
.dep-cats-p>summary::-webkit-details-marker{display:none}
.dep-cats-p>summary::before{content:'›';display:inline-block;width:10px;color:var(--muted);font-weight:700;transition:transform .15s ease}
.dep-cats-p[open]>summary::before{transform:rotate(90deg)}
.dep-cats-p .dep-cats{margin:0;padding:0 10px 10px;border-top:0}
.dep-cats-p .dep-ligne:hover,.dep-cats-p .dep-ligne.on{background:var(--panel2)}
.dep-cats-p .dep-barre{background:var(--panel2)}
.dep-cats-p .dep-barre i{background:var(--muted)}
.dep-cats-p .dep-ligne.on .dep-barre i{background:var(--copper)}
.dep-cats-p .dep-mt-c{color:var(--ink);font-weight:var(--g-fort)}
.dep-cats-p .dep-pct{color:var(--muted)}
.dep-cats-p .dep-nom{font-weight:var(--g-normal,500)}
/* Catégorie en texte simple, entière ; actions en icônes sur une ligne */
.dep-t td.dep-cat-c{white-space:nowrap;font-size:var(--t-petit);color:var(--muted)}
.dep-t td.dep-act{min-width:0;width:1%;white-space:nowrap}
.dep-icones{display:inline-flex;justify-content:flex-end}
.dep-t .dep-act .btn.ico{margin:0}
@media (max-width:640px){#vue .dep-kpis{grid-template-columns:minmax(0,1fr)}.dep-t td.dep-cat-c{white-space:normal}}

/* Téléphone : chaque dépense devient une carte, montant à droite */
@media (max-width:760px){
  .dep-onglets{display:flex;width:100%;flex-wrap:nowrap}
  .dep-onglets button{flex:1;padding:7px 6px;white-space:nowrap}
  .dep-hero{padding:var(--esp-3) var(--esp-4)}
  .dep-total{font-size:1.6rem}
  .dep-ligne{grid-template-columns:minmax(0,1fr) auto;row-gap:4px}
  .dep-barre{grid-column:1 / -1;grid-row:2}
  .dep-pct{display:none}
  .dep-filtres,.dep-periode{width:100%}
  .dep-filtres .inp,.dep-periode .inp{flex:1 1 140px;max-width:none}
  .dep-filtres input[type=search]{flex-basis:100%;width:auto}
  .dep-periode .btn.pri{flex:1 1 100%;justify-content:center}
  .dep-t thead{display:none}
  .dep-t,.dep-t tbody{display:block}
  .dep-t tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 10px;padding:var(--esp-3) var(--esp-4);border-bottom:1px solid var(--line)}
  .dep-t tr::before{content:'';flex-basis:100%;order:3;height:0}
  .tw .dep-t td{display:block;padding:0;border:0;white-space:normal}
  .dep-t .dep-mt{white-space:nowrap}
  .dep-t .dep-act .btn{margin:0 6px 0 0}
  .dep-t .dep-desc{order:1;flex:1 1 0;min-width:0}
  .dep-t .dep-mt{order:2;flex:none}
  .dep-t .dep-cat-c{order:4}
  .dep-t .dep-date{order:5}
  .dep-t .dep-par{order:6}
  .dep-t .dep-moyen{order:7}
  .dep-t .dep-date .sub{display:inline;margin-left:4px}
  .dep-t .dep-date,.dep-t .dep-par,.dep-t .dep-moyen{color:var(--muted)}
  .dep-t .dep-act{order:8;flex-basis:100%;text-align:left;margin-top:4px}
  .dep-t .dep-act:empty{display:none}
  .dep-t-cats tr::before{display:none}
  .dep-t-cats .dep-desc{flex-basis:100%}
}
/* Téléphone étroit (Z Fold fermé) : onglets sur deux lignes au besoin, jamais coupés ; boutons faciles à toucher */
@media (max-width:640px){
  #vue .dep-onglets{flex-wrap:wrap}
  #vue .dep-onglets button{flex:1 1 auto;min-height:38px}
  .dep-cats-p>summary{flex-wrap:wrap;gap:2px 10px}
  .dep-t .dep-act .btn.ico{width:40px;height:40px;min-height:40px}
  .dep-periode .btn.pri{min-height:42px}
}