/* ================= Page Dépenses, nouvelle présentation (depenses-vue.js, 27 sept. 2026) =================
   Réutilise les filtres / menus de la page Encaissements (classes ev-*, encaissements-vue.css)
   et le tableau commun (tab-*, tableau-vue.css). */
:root{--dp-slate:#5b6478;--dp-gris:#9aa3b8;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--dp-slate:#8f99b3;--dp-gris:#6f7896;}}
:root[data-theme="dark"]{--dp-slate:#8f99b3;--dp-gris:#6f7896;}

.dp-nouveau > .grid-4,.dp-nouveau > .panneau-filtres{display:none !important;}
.dp-nouveau > .card.table-wrap{position:absolute !important;width:1px !important;height:1px !important;overflow:hidden !important;clip-path:inset(50%);white-space:nowrap;border:0 !important;padding:0 !important;margin:0 !important;}
.dp-nouveau #dep-vide,.dp-nouveau #dep-pagination{display:none !important;}
.dp-nouveau .section-head-actions{display:flex;gap:8px;align-items:center;}
.dp-ambre{color:var(--amber);font-weight:600;}

.dp-pt{display:inline-block !important;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px;flex:none;}
.ev-leg .dp-pt{width:7px;height:7px;margin-right:4px;}

/* Chiffres du haut : 5 cases (total, par catégorie, Moussab, Hamza, Chèque) */
.dp-kpi5{grid-template-columns:1fr 1.3fr 1fr 1fr 1fr;}
.dp-kpi5 em .g{color:var(--good);font-weight:600;}
.dp-kpi5 em .w{color:var(--critical);font-weight:600;}
.dp-kq{display:block;font-size:12px;font-weight:400;color:var(--text-muted);margin-top:1px;}

/* Filtre « Payé avec » : Espèces + prénom en dessous (ordi) */
.dp-seg button{height:auto;min-height:36px;padding:4px 13px;}
.dp-l2{display:inline-flex;flex-direction:column;line-height:1.2;text-align:left;}
.dp-l2 span{font-size:12.5px;font-weight:600;}
.dp-l2 strong{font-size:11px;font-weight:400;color:var(--text-muted);}

/* Tableau */
.dp-cat b{white-space:normal;}
.dp-cat span{display:block;}
.dp-pa .dp-qn{padding-left:14px;}
.dp-just{font-size:12px;color:var(--text-secondary);white-space:nowrap;}
.dp-non{color:var(--text-muted);}
.dp-carte .tab-carte-l2 .dp-pt{display:inline-block;}

@media (max-width:1100px){
  .dp-kpi5{grid-template-columns:repeat(6,minmax(0,1fr));}
  .dp-kpi5 > .db-kpi:nth-child(1),.dp-kpi5 > .db-kpi:nth-child(2){grid-column:span 3;}
  .dp-kpi5 > .db-kpi:nth-child(n+3){grid-column:span 2;border-top:1px solid var(--border);}
  .dp-kpi5 > .db-kpi:nth-child(3){border-left:0;}
}
/* Téléphone : prénom sur la même ligne que le mode (« Espèces · Moussab ») */
@media (max-width:700px){
  .dp-kpi5 > .db-kpi:nth-child(1),.dp-kpi5 > .db-kpi:nth-child(2){grid-column:span 6;border-left:0;}
  .dp-kpi5 > .db-kpi:nth-child(2){border-top:1px solid var(--border);}
  .dp-kpi5 > .db-kpi:nth-child(n+3){padding:10px 11px;}
  .dp-kpi5 > .db-kpi:nth-child(n+3) em{display:none;}
  .dp-l2{flex-direction:row;align-items:baseline;}
  .dp-l2 strong{font-size:12.5px;font-weight:600;color:inherit;}
  .dp-l2 strong::before{content:" · ";white-space:pre;}
  .dp-seg button{white-space:nowrap;}
  .dp-nouveau .section-head-actions{flex-wrap:wrap;}
}

/* ---- Actions de ligne : petite flèche discrète (pas de fond, pas de bordure) ---- */
.tab-tbl th.dp-ac,.tab-tbl td.dp-ac{width:44px;text-align:right;padding-left:0;}
.dp-chev{border:0 !important;background:none !important;box-shadow:none !important;padding:0;width:24px;height:24px;display:inline-grid;place-items:center;color:var(--text-muted);cursor:pointer;opacity:.7;transition:opacity .15s,color .15s,transform .15s;}
.dp-chev svg{width:15px;height:15px;}
.dp-chev:hover,.dp-chev.ouv{opacity:1;color:var(--text-primary);}
.dp-chev.ouv svg{transform:rotate(180deg);}
.dp-chev:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px;}
.dp-carte{position:relative;}
.dp-carte-ac{position:absolute;right:8px;bottom:8px;}
.dp-menu{position:fixed;z-index:70;min-width:170px;background:var(--surface);border:1px solid var(--border-strong);border-radius:10px;box-shadow:0 12px 30px -12px rgba(15,24,48,.35);padding:5px;}
.dp-menu button{display:flex;align-items:center;gap:9px;width:100%;border:0;background:transparent;padding:8px 10px;border-radius:7px;font:inherit;font-size:13px;font-weight:500;color:var(--text-primary);cursor:pointer;text-align:left;}
.dp-menu button:hover{background:var(--surface-2);}
.dp-menu button svg{width:15px;height:15px;color:var(--text-muted);flex:none;}
.dp-menu .dp-menu-sup,.dp-menu .dp-menu-sup svg{color:var(--critical);}
.dp-menu-sep{border-top:1px solid var(--border);margin:4px 2px;}

/* ---- Pop-up Nouvelle / Modifier la dépense (maquette validée) ---- */
.modal.dp-pop{padding:0;width:560px;overflow-x:hidden;}
.dp-pop #mg-titre{display:flex;flex-direction:column;gap:2px;position:relative;margin:0;padding:20px 60px 16px 24px;border-bottom:1px solid var(--border);}
.dp-pop .dp-pop-t{font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--text-primary);}
.dp-pop .dp-pop-s{font-size:13px;font-weight:400;color:var(--text-secondary);}
.dp-pop #mg-titre .mg-fermer{top:18px;right:18px;border:0;background:transparent;color:var(--text-muted);width:32px;height:32px;font-size:16px;}
.dp-pop #mg-titre .mg-fermer:hover{background:var(--surface-2);color:var(--text-primary);}
.dp-pop #mg-hint{display:none !important;}
.dp-pop #mg-champs{padding:20px 24px 6px;}
.dp-pop .mg-groupe-titre{display:none;}
.dp-pop .field{margin-bottom:16px;gap:6px;}
.dp-pop .field label{font-size:12.5px;}
.dp-pop .field input:not([type="checkbox"]):not([type="radio"]),.dp-pop .field select{height:42px;min-height:42px;font-size:14px;}
.dp-opt{font-weight:400;color:var(--text-muted);}
/* montant en grand */
.dp-mt{display:flex;align-items:center;border:1px solid var(--border-strong);border-radius:12px;height:56px;padding:0 16px;background:var(--surface);transition:border-color .15s,box-shadow .15s;}
.dp-mt:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-tint);}
.dp-pop .dp-mt input{border:0 !important;box-shadow:none !important;outline:none;height:54px !important;min-height:0 !important;padding:0 !important;font-size:26px !important;font-weight:700;letter-spacing:-.02em;flex:1;min-width:0;background:transparent !important;}
.dp-mt span{font-size:20px;font-weight:600;color:var(--text-muted);}
.dp-ht{font-size:12px;color:var(--text-muted);min-height:16px;}
/* sélecteurs d'origine masqués, remplacés par pastilles / cartes */
.dp-f-cache select{position:absolute !important;opacity:0 !important;pointer-events:none;width:1px !important;height:1px !important;min-height:0 !important;}
.dp-chips{display:flex;flex-wrap:wrap;gap:8px;}
.dp-chip{display:inline-flex;align-items:center;height:36px;padding:0 13px;border:1px solid var(--border-strong);border-radius:99px;background:var(--surface);font:inherit;font-size:13px;font-weight:600;color:var(--text-secondary);cursor:pointer;}
.dp-chip:hover{color:var(--text-primary);}
.dp-chip.on{border-color:var(--text-primary);color:var(--text-primary);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--text-primary);}
.dp-f-pr{margin-top:-6px;}
.dp-cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.dp-carte-pa{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:1px;border:1px solid var(--border-strong);border-radius:12px;padding:10px 12px;background:var(--surface);font:inherit;text-align:left;cursor:pointer;color:var(--text-primary);}
.dp-carte-pa b{display:flex;align-items:center;font-size:13.5px;}
.dp-carte-pa span{font-size:12px;color:var(--text-muted);padding-left:14px;}
.dp-carte-pa.on{border-color:var(--pc);background:color-mix(in srgb,var(--pc) 12%,var(--surface));box-shadow:inset 0 0 0 1px var(--pc);}
.dp-carte-pa.on::after{content:"✓";position:absolute;top:8px;right:10px;font-size:12px;font-weight:800;color:var(--pc);}
.dp-pop .modal-actions{margin:0;padding:14px 24px;border-top:1px solid var(--border);background:var(--surface-2);display:flex;justify-content:flex-end;gap:8px;}
.dp-pop #mg-valider{min-width:150px;justify-content:center;}
@media (max-width:700px){
  .modal-overlay:has(.dp-pop){align-items:flex-end;padding:0;}
  .modal.dp-pop{width:100%;border-radius:18px 18px 0 0;max-height:92vh;}
  .dp-pop #mg-titre{padding:16px 56px 12px 18px;}
  .dp-pop .dp-pop-s{display:none;}
  .dp-pop #mg-champs{padding:16px 18px 4px;}
  .dp-cartes{grid-template-columns:1fr;}
  .dp-carte-pa{flex-direction:row;align-items:center;padding:12px;}
  .dp-carte-pa span{padding-left:0;font-size:13px;}
  .dp-carte-pa span::before{content:" · ";white-space:pre;}
  .dp-pop .modal-actions{padding:12px 18px 22px;}
  .dp-pop .modal-actions button{flex:1;}
  .dp-pop #mg-valider{min-width:0;}
}
.dp-pop #mg-titre{top:0;}
.dp-pop #mg-champs{padding-top:16px;}
.dp-carte-pa span.dp-pt{padding:0;}
.dp-carte-pa span.dp-pt::before{content:none !important;}
.modal.dp-pop,.modal.dp-pop *{box-sizing:border-box;}
.dp-pop .mg-groupe-corps{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}.dp-pop .field{min-width:0;}.dp-pop .field input{min-width:0;max-width:100%;}@media (max-width:700px){.dp-pop .mg-groupe-corps{grid-template-columns:minmax(0,1fr);}}
.dp-pop .modal-actions{position:sticky;bottom:0;z-index:2;}

/* ---- Suppression protégée (suppression-protegee.js) ---- */
.modal.sp-pop{padding:0;width:480px;overflow-x:hidden;}
.modal.sp-pop,.modal.sp-pop *{box-sizing:border-box;}
.sp-h{display:flex;gap:12px;align-items:flex-start;padding:18px 56px 14px 22px;border-bottom:1px solid var(--border);position:relative;}
.sp-h b{display:block;font-size:17px;color:var(--text-primary);}.sp-h span{font-size:13px;color:var(--text-secondary);}
.sp-h .mg-fermer{top:16px;right:16px;border:0;background:transparent;color:var(--text-muted);}
.sp-ic{width:36px;height:36px;border-radius:10px;background:color-mix(in srgb,var(--critical) 14%,var(--surface));color:var(--critical);display:grid;place-items:center;flex:none;}
.sp-ic svg{width:18px;height:18px;}
.sp-c{padding:16px 22px;display:flex;flex-direction:column;gap:14px;}
.sp-recap{border:1px solid var(--border);border-radius:12px;padding:12px 14px;display:grid;grid-template-columns:1fr auto;gap:2px 10px;}
.sp-recap b{font-size:14px;color:var(--text-primary);}.sp-recap small{grid-column:1/-1;color:var(--text-muted);font-size:12.5px;}
.sp-m{font-weight:700;font-size:16px;text-align:right;color:var(--text-primary);}
.sp-cons{background:color-mix(in srgb,var(--amber) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--amber) 35%,transparent);border-radius:10px;padding:10px 12px;font-size:12.5px;color:var(--text-secondary);}
.sp-cons b{color:var(--amber);}.sp-cons ul{margin:4px 0 0;padding-left:18px;}
.sp-info{font-size:12.5px;color:var(--text-secondary);background:var(--surface-2);border-radius:10px;padding:10px 12px;}
.sp-bloque{font-size:13px;color:var(--text-secondary);border:1px solid var(--border);border-radius:10px;padding:12px 14px;}
.sp-fl{display:block;font-size:12.5px;font-weight:600;color:var(--text-secondary);margin-bottom:6px;}.sp-fl b{color:var(--text-primary);}
.sp-chips{display:flex;flex-wrap:wrap;gap:6px;}
.sp-chip{height:32px;padding:0 12px;border:1px solid var(--border-strong);border-radius:99px;background:var(--surface);font:inherit;font-size:12.5px;font-weight:600;color:var(--text-secondary);cursor:pointer;}
.sp-chip.on{border-color:var(--text-primary);color:var(--text-primary);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--text-primary);}
.sp-in{width:100%;height:42px;border:1px solid var(--border-strong);border-radius:10px;padding:0 12px;font:inherit;font-size:14px;background:var(--surface);color:var(--text-primary);margin-top:8px;}
.sp-c > div > .sp-in#sp-montant{margin-top:0;}
.sp-in[hidden]{display:none;}
.sp-p{display:flex;justify-content:flex-end;gap:8px;padding:14px 22px;border-top:1px solid var(--border);background:var(--surface-2);}
.sp-ok{height:38px;border-radius:10px;padding:0 16px;font:inherit;font-size:13.5px;font-weight:600;border:0;background:var(--critical);color:#fff;cursor:pointer;}
.sp-ok:disabled{opacity:.4;cursor:not-allowed;}
.sp-tag{color:var(--critical);font-weight:600;}
@media (max-width:700px){
  .modal-overlay:has(.sp-pop){align-items:flex-end;padding:0;}
  .modal.sp-pop{width:100%;border-radius:18px 18px 0 0;}
  .sp-p button{flex:1;}
}