/* =========================================================
   Listes VEMD : tableau natif du template (demo/liste.html) + responsive.

   Barre de filtres dans le bloc 'subbar' :
     <form class="vl-toolbar" data-vl-toolbar role="search" onsubmit="return false">
       <div class="inp-wrap vl-q">…<input class="inp sm" type="search" data-table-filter="#t" data-filter-count="#n"></div>
       <button class="btn sm vl-filt-toggle" type="button" data-vl-filters>…<span class="vl-filt-n"></span></button>
       <select class="sel sm auto vl-adv" data-filter-field="group">…</select>
       <span class="spacer"></span>
       <a class="btn sm primary vl-add">…<span class="vl-btn-text">Ajouter</span></a>
     </form>
   Tableau : <section class="card flush"><div class="table-wrap"><table class="data vl-cards">…

   Mobile (< 640 px), avec table.vl-cards : chaque ligne devient une carte.
     td.c-main (titre), td.c-aside (à droite, avant le menu), td.c-meta (ligne sous le titre),
     td.c-tags (pastilles), td.actions (menu ⋯). Les autres cellules sont masquées.
   ========================================================= */

/* ---------- Barre de filtres ---------- */
.vl-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:100%}
.vl-toolbar .vl-q{width:min(260px,100%)}
.vl-toolbar .sel.is-on{border-color:var(--primary-text);color:var(--primary-text);box-shadow:inset 0 0 0 1px var(--primary-text)}
.vl-filt-toggle{display:none;position:relative}
.vl-filt-n:empty{display:none}
.vl-filt-n{position:absolute;top:-6px;right:-6px;min-width:16px;padding:0 4px;border-radius:999px;background:var(--primary);color:var(--primary-ink);font-size:10px;font-weight:700;line-height:16px;text-align:center}
.vl-reset{border:0;background:none;color:var(--primary-text);font-weight:600;font-size:12.5px;text-decoration:underline;cursor:pointer;padding:4px}

/* ---------- Tableau ---------- */
table.data .cell-name .sub{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
table.data tfoot td{font-weight:600}

/* Tri côté serveur (PaginatorHelper::sort) : flèche sur la colonne triée */
table.data th>a{display:inline-flex;align-items:center;gap:4px;color:inherit;text-decoration:none}
table.data th>a:hover{color:var(--ink)}
table.data th>a.asc,table.data th>a.desc{color:var(--ink)}
table.data th>a.asc::after,table.data th>a.desc::after{content:"";border-left:4px solid transparent;border-right:4px solid transparent}
table.data th>a.asc::after{border-bottom:5px solid currentColor}
table.data th>a.desc::after{border-top:5px solid currentColor}

/* Contenu affiché seulement dans les cartes mobiles */
.vl-only-sm{display:none}

/* ---------- Mobile ---------- */
@media (max-width:640px){
  .vl-toolbar .vl-q{flex:1 1 0;width:auto;min-width:min(170px,100%)}
  .vl-toolbar .spacer{display:none}
  .vl-filt-toggle{display:inline-flex;order:1}
  .vl-filt-toggle,.vl-toolbar .vl-add{width:36px;padding:0!important;justify-content:center;flex:0 0 auto}
  .vl-toolbar .vl-add{order:2}
  .vl-btn-text{display:none}
  .vl-toolbar .vl-adv{order:3;flex:1 1 calc(50% - 4px);min-width:0;width:auto}
  .vl-toolbar:not(.is-open) .vl-adv{display:none}
  .vl-toolbar.is-open .vl-filt-toggle{border-color:var(--primary-text);color:var(--primary-text)}

  .vl-only-sm{display:inline}
  table.data.vl-cards,table.data.vl-cards tbody,table.data.vl-cards tfoot{display:block}
  table.data.vl-cards thead{display:none}
  table.data.vl-cards tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto auto;
    grid-template-areas:"main aside act" "meta meta meta" "tags tags tags";align-items:center;column-gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
  table.data.vl-cards tbody tr[hidden]{display:none}
  table.data.vl-cards tbody td{display:none;padding:0!important;border:0}
  table.data.vl-cards tbody td.c-main{display:block;grid-area:main;min-width:0}
  table.data.vl-cards tbody td.c-main .cell-name{min-width:0}
  table.data.vl-cards tbody td.c-aside{display:block;grid-area:aside;align-self:center;text-align:right}
  table.data.vl-cards tbody td.c-meta{display:block;grid-area:meta;margin-top:2px;font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  table.data.vl-cards tbody td.c-tags{display:flex;flex-wrap:wrap;gap:6px;grid-area:tags;margin-top:8px}
  table.data.vl-cards tbody td.c-tags:empty{display:none}
  table.data.vl-cards tbody td.actions{display:flex;justify-content:flex-end;grid-area:act;width:auto;margin-right:-6px}
  table.data.vl-cards tfoot tr{display:flex;padding:10px 14px}
  table.data.vl-cards tfoot td{display:none;padding:0!important;border:0}
  table.data.vl-cards tfoot td.c-main{display:block}
}

/* Zone défilante des tableaux : repère des textes .sr (position absolue), qui sinon débordent de la page
   quand le tableau est plus large que l'écran */
.table-wrap{position:relative}

/* ---------- Listes chargées en AJAX ---------- */
.vl-ajax{transition:opacity .15s ease}
.vl-ajax[aria-busy="true"]{opacity:.55;pointer-events:none}
.vl-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.vl-foot .pager{flex:1;min-width:0}
.vl-limit{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);white-space:nowrap}
.vl-limit .sel{min-width:70px}
.m-form{margin:0}
.m-form .mi{width:100%}
@media (max-width:640px){
  .vl-foot{gap:10px}
  .vl-limit>span:last-child{display:none}
  /* Pagination : les numéros passent à la ligne au lieu d'élargir la page (52 pages = 9 boutons) */
  .pager ul{flex-wrap:wrap;max-width:100%}
  .pager li a,.pager li span{min-width:32px;height:32px;padding:0 6px}
}

/* Liens tel: / mailto: (ContactHelper) : discrets dans les tableaux, soulignés au survol */
a.lnk-contact{color:inherit;text-decoration:none;border-bottom:1px dotted color-mix(in srgb,currentColor 45%,transparent);overflow-wrap:anywhere}
a.lnk-contact:hover{color:var(--primary-text);border-bottom-color:currentColor}

/* ---------- Suivi des livraisons (Dlists/lists) ---------- */
.dl-date{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2)}
.dl-date b{color:var(--ink);font-weight:600}
.dl-date b::first-letter{text-transform:uppercase}
/* Barre segmentée : livrés (vert), absents (orange), absences prévues (bleu) ; le fond = non livrés */
.dl-bar{display:flex;height:8px;border-radius:99px;background:var(--surface-3);overflow:hidden;min-width:80px}
.dl-bar.sm{height:6px;margin-top:6px}
.dl-bar>span{display:block;height:100%}
.dl-bar .s-livre{background:var(--good)}
.dl-bar .s-absent{background:var(--warn)}
.dl-bar .s-planifie{background:color-mix(in srgb,var(--info) 55%,transparent)}
.dl-prog{display:flex;align-items:center;gap:10px}
.dl-prog .dl-bar{flex:1}
.dl-ratio{font-size:12.5px;color:var(--muted);white-space:nowrap;min-width:92px;text-align:right}
.dl-ratio b{color:var(--ink);font-weight:600}
.dl-table .dl-col-bar{width:38%}
.dl-rest{display:inline-flex;flex-direction:column;align-items:flex-end;line-height:1.25}
.dl-rest .muted{font-size:12px}
.dl-table td.c-tags{white-space:nowrap}
.dl-table td.c-tags .pill+.pill{margin-left:6px}
.dl-table th>button{border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.dl-table th>button:hover,.dl-table th[aria-sort]>button{color:var(--ink)}
.dl-table th[aria-sort]>button::after{content:"";border-left:4px solid transparent;border-right:4px solid transparent}
.dl-table th[aria-sort="ascending"]>button::after{border-bottom:5px solid currentColor}
.dl-table th[aria-sort="descending"]>button::after{border-top:5px solid currentColor}
@media (max-width:640px){
  .dl-table .dl-col-bar{width:auto}
  table.data.vl-cards.dl-table tbody td.c-meta{overflow:visible;margin-top:8px}
  .dl-table td.c-tags .pill+.pill{margin-left:0}
}
/* Interrupteur « Mode ramadan » (phase de test) dans la barre du haut */
.dl-mode{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.dl-mode:hover{color:var(--ink)}
.dl-mode .switch{pointer-events:none}
@media (max-width:640px){.dl-mode>span:last-child{display:none}}
/* ---------- Suivi de livraison d'une liste (Dlists/suivi_livraison) ---------- */
p.dl-date{margin:0}
.sl-bulk{position:sticky;top:8px;z-index:5}
.sl-table td.sl-no-order{color:var(--muted);text-decoration:underline dotted}
.sl-table .sl-comment{display:block;margin-top:4px;font-size:12px;color:var(--muted);max-width:28ch}
.sl-table td.c-tags{white-space:normal}
@media (max-width:640px){
  .sl-table .sl-comment{display:inline;max-width:none;margin:0}
  .sl-table .sl-comment.hide-sm{display:none}
}