/* =============================================================================
   list-page.css — Sprint BS+1 motif 43 (2026-05-03)

   Styles communs aux pages "liste" (operations, exploitants, structures
   portage) générées via components/list-page-shell.php. S'aligne sur le
   pattern visuel établi par prospects-list.php (motif 39+41).

   Namespace : .lpg-* (list-page-generic)
   Tokens hérités : --cta, --line, --text, --muted, --shadow (main.css)
   ============================================================================= */

/* ---- Tokens (CSS vars déjà disponibles globalement, on alias pour fallback) -- */
.lpg-page {
  --lpg-cta: var(--cta, #1a7f73);
  --lpg-cta-2: var(--cta-2, #16685f);
  --lpg-line: var(--line, rgba(18, 56, 64, .10));
  --lpg-text: var(--text, #123840);
  --lpg-text-2: var(--text-2, #355058);
  --lpg-muted: var(--muted, rgba(18, 56, 64, .62));
  --lpg-bg: var(--bg, #eef1f4);
  --lpg-radius: 12px;
  --lpg-shadow-sm: 0 1px 2px rgba(8, 31, 37, .05);
}

/* ---- Layout général : padding compact ----------------------------------- */
.main.lpg-page {
  padding: 6px 10px 18px !important;
  display: flex;
  flex-direction: column;
  /* motif 103az — height:100% pour que la flex-column dispose d'une
     hauteur cadrée (le grid .layout étire .main à la hauteur du row). */
  height: 100%;
  min-height: 100%;
  box-sizing: border-box;
}

.lpg-wrap {
  max-width: 1480px;
  margin: 0 auto;
  width: 100%;
  padding: 4px 0 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* motif 103az — flex:1 absorbe la hauteur restante de .main pour que
     .tbl-v2-wrap puisse flex-grow à son tour et scroller verticalement. */
  flex: 1 1 auto;
  min-height: 0;
}

/* ---- Bloc 1 : page header ---------------------------------------------- */
.lpg-ph {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--lpg-line);
  border-radius: var(--lpg-radius);
  box-shadow: var(--lpg-shadow-sm);
}
.lpg-ph-ico {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--lpg-cta);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lpg-ph-ico svg { width: 20px; height: 20px; }
.lpg-ph-main {
  flex: 1 1 auto;
  min-width: 0;
}
.lpg-ph-crumb {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--lpg-muted);
  margin-bottom: 2px;
}
.lpg-ph-title {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--lpg-text);
  margin: 0 0 4px 0;
  line-height: 1.2;
}
.lpg-ph-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 11.5px;
  color: var(--lpg-text-2);
}
.lpg-ph-meta b { color: var(--lpg-text); font-weight: 800; }
.lpg-ph-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}

/* ---- Toggle on/off "Afficher éléments supprimés" ----------------------- */
/* motif 47 v2 fix (2026-05-04) — Switch rendu via ::before/::after sur le
   label lui-même (pas de span nested). Robuste contre les scripts qui
   stripper du contenu enfant des labels (icon-replacer, sanitizers, etc.).
   Pattern : input checkbox sibling caché + label avec :checked + label CSS. */
.lpg-toggle__input {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.lpg-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 12px;
  color: var(--lpg-muted);
  user-select: none;
  position: relative;
  padding-left: 38px;     /* espace pour le switch ::before */
  min-height: 18px;
  line-height: 18px;
}
/* motif 47 v9 (2026-05-04) — Switch via wrapper sibling avec switch dédié.
   Élément autonome non-imbriqué dans label, donc pas d'interférence cascade. */
.lpg-toggle-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 12px;
  color: var(--lpg-muted);
  user-select: none;
}
.lpg-toggle-switch {
  display: inline-block;
  width: 30px;
  height: 16px;
  border-radius: 999px;
  background: rgba(8, 31, 37, .18);
  position: relative;
  transition: background .16s ease;
  cursor: pointer;
  flex-shrink: 0;
}
.lpg-toggle-switch::after {
  content: '';
  position: absolute;
  left: 2px;
  top: 2px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(8, 31, 37, .18);
  transition: left .16s ease;
}
.lpg-toggle-wrap.is-on .lpg-toggle-switch {
  background: #1a7f73 !important;
}
.lpg-toggle-wrap.is-on .lpg-toggle-switch::after {
  left: 16px;
}
.lpg-toggle-wrap.is-on {
  color: var(--lpg-text);
  font-weight: 600;
}
.lpg-toggle-text { cursor: pointer; }
/* motif 47 v8 — old rules kept for compat */
.lpg-toggle .lpg-toggle__track {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 30px !important;
  height: 16px !important;
  border-radius: 999px !important;
  background: rgba(8, 31, 37, .18) !important;
  transition: background .16s ease !important;
  pointer-events: none !important;
  display: block !important;
  font-style: normal !important;
  font-weight: normal !important;
}
.lpg-toggle .lpg-toggle__dot {
  position: absolute !important;
  left: 2px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(8, 31, 37, .18) !important;
  transition: transform .16s ease, left .16s ease !important;
  pointer-events: none !important;
  display: block !important;
  font-style: normal !important;
  font-weight: normal !important;
}
.lpg-toggle.is-on .lpg-toggle__track,
.lpg-toggle__input:checked + .lpg-toggle .lpg-toggle__track {
  background: #1a7f73 !important;
}
.lpg-toggle.is-on .lpg-toggle__dot,
.lpg-toggle__input:checked + .lpg-toggle .lpg-toggle__dot {
  left: 16px !important;
}
.lpg-toggle.is-on,
.lpg-toggle__input:checked + .lpg-toggle {
  color: var(--lpg-text);
  font-weight: 600;
}
/* Focus visible pour accessibilité clavier */
.lpg-toggle__input:focus-visible + .lpg-toggle::before {
  outline: 2px solid var(--lpg-cta);
  outline-offset: 2px;
}
/* Fallback : si le span .lpg-toggle__sw est encore présent (ancien rendu),
   on le cache pour éviter le double switch. */
.lpg-toggle .lpg-toggle__sw { display: none; }
.lpg-toggle__sw {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 16px;
  border-radius: 999px;
  background: rgba(8, 31, 37, .18);
  transition: background .16s ease;
}
.lpg-toggle__sw::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #fff;
  transition: transform .16s ease;
  box-shadow: 0 1px 2px rgba(8, 31, 37, .18);
}
.lpg-toggle.is-on .lpg-toggle__sw {
  background: var(--lpg-cta);
}
.lpg-toggle.is-on .lpg-toggle__sw::before {
  transform: translateX(14px);
}
.lpg-toggle.is-on {
  color: var(--lpg-text);
  font-weight: 600;
}

/* ---- Bloc 2 : toolbar (search + tabs + buttons sur 1 ligne) ------------ */
.lpg-toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--lpg-line);
  border-radius: var(--lpg-radius);
  box-shadow: var(--lpg-shadow-sm);
  overflow-x: auto;
  scrollbar-width: thin;
}
.lpg-toolbar > * { flex: 0 0 auto; }
.lpg-toolbar > .lpg-search { flex: 1 1 220px; min-width: 200px; }
.lpg-toolbar > .lpg-tb-spacer { flex: 1 1 auto; min-width: 4px; }

/* ---- Search input ------------------------------------------------------- */
.lpg-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--lpg-line);
  border-radius: 10px;
  background: #fff;
  min-height: 34px;
  transition: border-color .12s, box-shadow .12s;
}
.lpg-search:focus-within {
  border-color: var(--lpg-cta);
  box-shadow: 0 0 0 3px rgba(26, 127, 115, .14);
}
.lpg-search svg { width: 14px; height: 14px; color: var(--lpg-muted); flex: 0 0 auto; }
.lpg-search input {
  border: 0;
  outline: none;
  background: transparent;
  font-size: 12.5px;
  color: var(--lpg-text);
  width: 100%;
  min-width: 0;
  padding: 0;
}

/* ---- Tabs --------------------------------------------------------------- */
.lpg-tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(8, 31, 37, .04);
  border-radius: 10px;
  padding: 2px;
}
.lpg-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 0;
  background: transparent;
  color: var(--lpg-muted);
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.lpg-tab:hover { background: rgba(8, 31, 37, .06); color: var(--lpg-text); }
.lpg-tab.is-active {
  background: #fff;
  color: var(--lpg-cta);
  box-shadow: 0 1px 2px rgba(8, 31, 37, .08);
}
.lpg-tab__count {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(8, 31, 37, .08);
  font-size: 10.5px;
  font-weight: 800;
  color: var(--lpg-text-2);
}
.lpg-tab.is-active .lpg-tab__count {
  background: rgba(26, 127, 115, .14);
  color: var(--lpg-cta);
}

/* ---- Status pill (X sélectionné) --------------------------------------- */
.lpg-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(26, 127, 115, .12);
  color: var(--lpg-cta-2);
  font-size: 11px;
  font-weight: 800;
}
.lpg-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--lpg-cta);
}

/* ---- Boutons ------------------------------------------------------------ */
.lpg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--lpg-line);
  border-radius: 10px;
  background: #fff;
  color: var(--lpg-text);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .12s;
  min-height: 34px;
  white-space: nowrap;
}
.lpg-btn:hover { background: rgba(8, 31, 37, .04); border-color: rgba(8, 31, 37, .18); }
.lpg-btn:active { transform: translateY(1px); }
.lpg-btn svg { width: 14px; height: 14px; flex: 0 0 auto; }

.lpg-btn--ghost { background: #fff; }
.lpg-btn--primary {
  background: var(--lpg-cta);
  border-color: var(--lpg-cta);
  color: #fff;
}
.lpg-btn--primary:hover { background: var(--lpg-cta-2); border-color: var(--lpg-cta-2); }
.lpg-btn--danger {
  background: #fff;
  color: #b42318;
  border-color: rgba(180, 35, 24, .32);
}
.lpg-btn--danger:hover { background: rgba(217, 75, 99, .08); border-color: rgba(180, 35, 24, .48); }

.lpg-btn--icon {
  width: 34px;
  height: 34px;
  padding: 0;
  flex: 0 0 34px;
}
.lpg-btn--icon svg { width: 16px; height: 16px; }

/* ---- Table : overrides .tbl-v2 spécifiques au shell --------------------- */
.lpg-page .tbl-v2-wrap {
  flex: 1 1 auto;
  /* motif 103az — min-height:200 plutôt que 0 pour garantir un minimum
     visible quand peu d'espace dispo (footer pagination, etc.). */
  min-height: 200px;
  background: #fff;
  border: 1px solid var(--lpg-line);
  border-radius: var(--lpg-radius);
  box-shadow: var(--lpg-shadow-sm);
  /* motif 103az — overflow:hidden bloquait le scroll vertical quand la
     liste dépassait la hauteur visible (bug rapporté sur cgp-list).
     Auto permet la scrollbar verticale ET horizontale si besoin. */
  overflow: auto;
}
.lpg-page .tbl-v2 {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.lpg-page .lpg-col-check {
  text-align: center;
  padding: 0 4px;
}
.lpg-page .tbl-v2 input[type="checkbox"] {
  width: 14px !important;
  height: 14px !important;
  accent-color: var(--lpg-cta);
  margin: 0;
  cursor: pointer;
}
.lpg-page .tbl-v2 .tbl-v2__td-name {
  font-weight: 400;
}

/* ---- Lignes "soft-deleted" (toggle ON) --------------------------------- */
.lpg-page .tbl-v2 tbody tr[data-lpg-deleted="1"] {
  background: rgba(217, 75, 99, .04);
}
.lpg-page .tbl-v2 tbody tr[data-lpg-deleted="1"] td {
  opacity: .65;
}
.lpg-page .tbl-v2 tbody tr[data-lpg-deleted="1"] td:nth-child(2)::before {
  content: '🗑 ';
  font-size: 10px;
  margin-right: 4px;
  opacity: .6;
}
.lpg-page .tbl-v2 tbody tr[data-lpg-deleted="1"] .lpg-row-restore-btn { opacity: 1; }

/* Bouton "Restaurer" inline sur ligne soft-deleted (motif 45) */
.lpg-row-restore-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-left: 6px;
  padding: 1px 8px;
  height: 22px;
  border: 1px solid rgba(26, 127, 115, .32);
  border-radius: 999px;
  background: rgba(26, 127, 115, .10);
  color: var(--lpg-cta);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .12s, border-color .12s;
  white-space: nowrap;
}
.lpg-row-restore-btn:hover {
  background: rgba(26, 127, 115, .18);
  border-color: var(--lpg-cta);
}
.lpg-row-restore-btn::before {
  content: '↺';
  font-size: 13px;
  line-height: 1;
}

/* ---- Responsive : sous 980px, page-header passe en colonne -------------- */
@media (max-width: 980px) {
  .lpg-ph {
    flex-wrap: wrap;
  }
  .lpg-ph-right {
    width: 100%;
    margin-top: 8px;
  }
}

/* ==========================================================================
   motif 103ba (2026-05-09) — Tableau list-page utilise TOUTE la hauteur
   utile (100vh - topbar). Avant ce fix, un <footer class="page-footer"> et
   les paddings-bottom de .main + .lpg-wrap réservaient ~50px d'espace inutile
   sous le tableau. Le copyright sidebar (sidebar__footer) fait déjà office
   de mention légale en bas-gauche, donc le footer page peut être masqué sur
   les pages liste.
   ========================================================================== */
.main.lpg-page > footer.page-footer,
.main.lpg-page > .page-footer {
  display: none;
}
.main.lpg-page {
  /* Breathing room minimal en bas pour que la dernière ligne du tableau ne
     touche pas le bord de l'écran ; le table-wrap garde overflow:auto. */
  padding-bottom: 8px !important;
}
.lpg-page .lpg-wrap {
  /* Padding-bottom déjà géré par .main.lpg-page → on l'annule ici. */
  padding-bottom: 0;
}

/* motif 103ba bis — Override le max-height:calc(100vh - 280px) hérité de
   content-v2.css qui plafonnait artificiellement le tableau à ~466px sur un
   viewport 746. Avec max-height:none ET flex:1, le table-wrap remplit
   toute la hauteur restante de .lpg-wrap (et scroll en interne via
   overflow:auto si le tableau dépasse). */
.lpg-page .tbl-v2-wrap {
  max-height: none;
}

/* ==========================================================================
   motif 103ba quinquies (2026-05-09) — Override padding contre la règle
   `:has(.topbar--v2) .main { padding: 18px 22px 40px !important }` de
   snav-v2.css. On utilise le même prefix :has(.topbar--v2) pour matcher la
   spécificité, plus la classe .lpg-page pour passer devant.
   ========================================================================== */
:has(.topbar--v2) .main.lpg-page {
  padding: 6px 10px 8px !important;
}

/* ==========================================================================
   motif 103ba sexies (2026-05-09) — Force !important sur les paddings de
   .lpg-wrap pour gagner contre toute règle concurrente.
   ========================================================================== */
:has(.topbar--v2) .main.lpg-page,
.main.lpg-page {
  padding: 6px 10px 8px !important;
}
:has(.topbar--v2) .main.lpg-page .lpg-wrap,
.main.lpg-page .lpg-wrap {
  padding-top: 4px !important;
  padding-bottom: 0 !important;
}