/* ──────────────────────────────────────────────────────────────────────────
   CRM Régie — thème unifié des listes.

   POURQUOI LES CLASSES SONT DOUBLÉES (.crmc-tbl.crmc-tbl) :
   chaque module injecte son propre <style> dans le <head> à l'exécution
   (document.head.appendChild), donc APRÈS cette feuille. À spécificité égale,
   la règle la plus tardive gagnerait. Doubler la classe monte la spécificité
   (0,3,0 contre 0,2,0) et rend cette feuille prioritaire quel que soit l'ordre,
   sans avoir à recourir à !important.

   Référence retenue : le tableau du module Contacts (à plat, en-tête sur --bg2),
   + marge latérale légère inspirée de la saisie d'ordre (.crma-section),
   + défilement horizontal sur mobile.
   ────────────────────────────────────────────────────────────────────────── */

/* ── En-tête unifié des écrans : un seul titre, un « i » d'aide, un sous-titre ──
   Le libellé répété par la barre collante du shell est neutralisé côté index.html
   (elle affiche le module « CRM Régie »), ce bloc porte donc le titre de l'écran. */
.crm-head { margin: 0 0 14px }
.crm-head .crm-t {
  display: flex; align-items: center; gap: 9px;
  margin: 0; font-size: 20px; font-weight: 700; line-height: 1.2;
}
.crm-head .crm-sub {
  margin-top: 4px; font-size: 12.5px; color: var(--muted, #94A3B8); line-height: 1.5;
}
.crm-head .crm-i {
  width: 20px; height: 20px; flex: 0 0 auto; border-radius: 50%;
  border: 1px solid var(--accent, #2f7fe6); background: transparent; color: var(--accent2, #5b9bff);
  font: italic 700 12px/1 Georgia, serif; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.crm-head .crm-i:hover { background: var(--accent, #2f7fe6); color: #fff }
.crm-head .crm-act { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap }

.crma-tbl.crma-tbl, .crmc-tbl.crmc-tbl, .crmi-tbl.crmi-tbl, .crmn-tbl.crmn-tbl,
.crmp-tbl.crmp-tbl, .crmpb-tbl.crmpb-tbl, .crmpil-tbl.crmpil-tbl,
.crmr-tbl.crmr-tbl, .crms-tbl.crms-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: transparent;
}

/* En-têtes : petites capitales sur fond légèrement plus sombre */
.crma-tbl.crma-tbl th, .crmc-tbl.crmc-tbl th, .crmi-tbl.crmi-tbl th, .crmn-tbl.crmn-tbl th,
.crmp-tbl.crmp-tbl th, .crmpb-tbl.crmpb-tbl th, .crmpil-tbl.crmpil-tbl th,
.crmr-tbl.crmr-tbl th, .crms-tbl.crms-tbl th {
  background: var(--bg2, #0B1220);
  color: var(--muted, #94A3B8);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .4px;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, #334155);
  white-space: nowrap;
}

.crma-tbl.crma-tbl td, .crmc-tbl.crmc-tbl td, .crmi-tbl.crmi-tbl td, .crmn-tbl.crmn-tbl td,
.crmp-tbl.crmp-tbl td, .crmpb-tbl.crmpb-tbl td, .crmpil-tbl.crmpil-tbl td,
.crmr-tbl.crmr-tbl td, .crms-tbl.crms-tbl td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, #334155);
  font-size: 13px;
  vertical-align: middle;
}

/* Survol homogène */
.crma-tbl.crma-tbl tbody tr:hover td, .crmc-tbl.crmc-tbl tbody tr:hover td,
.crmi-tbl.crmi-tbl tbody tr:hover td, .crmn-tbl.crmn-tbl tbody tr:hover td,
.crmp-tbl.crmp-tbl tbody tr:hover td, .crmpb-tbl.crmpb-tbl tbody tr:hover td,
.crmpil-tbl.crmpil-tbl tbody tr:hover td, .crmr-tbl.crmr-tbl tbody tr:hover td,
.crms-tbl.crms-tbl tbody tr:hover td {
  background: var(--card, #1E293B);
}

.crma-tbl.crma-tbl tbody tr:last-child td, .crmc-tbl.crmc-tbl tbody tr:last-child td,
.crmi-tbl.crmi-tbl tbody tr:last-child td, .crmn-tbl.crmn-tbl tbody tr:last-child td,
.crmp-tbl.crmp-tbl tbody tr:last-child td, .crmpb-tbl.crmpb-tbl tbody tr:last-child td,
.crmpil-tbl.crmpil-tbl tbody tr:last-child td, .crmr-tbl.crmr-tbl tbody tr:last-child td,
.crms-tbl.crms-tbl tbody tr:last-child td { border-bottom: 0; }

/* Le nom d'annonceur reprenait 16px : on l'aligne sur les cellules */
.crma-tbl.crma-tbl .crma-name { font-size: 13px; font-weight: 600; }

/* Plus de carte autour du tableau des annonceurs : on s'aligne sur Contacts
   (à plat), en ne gardant que la marge latérale légère. */
.crma-tablecard.crma-tablecard {
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

/* Conteneur de liste : à plat, sans fond ni bordure (style Contacts).
   La respiration latérale vient de la marge claire du shell (.content { padding: 1rem })
   autour du panneau sombre du module, pas d'un padding interne.
   Ici on ne garde que le défilement horizontal, indispensable sur mobile.
   .crm-listbox est l'enveloppe générique ; les deux autres ciblent l'existant. */
.crm-listbox.crm-listbox,
.crma-tablecard.crma-tablecard > div,
#crmc-list {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* Mobile : marge réduite et largeur minimale, sinon les colonnes se compriment
   au lieu de laisser le tableau défiler latéralement. */
@media (max-width: 768px) {
  .crma-tbl.crma-tbl, .crmc-tbl.crmc-tbl, .crmi-tbl.crmi-tbl, .crmn-tbl.crmn-tbl,
  .crmp-tbl.crmp-tbl, .crmpb-tbl.crmpb-tbl, .crmpil-tbl.crmpil-tbl,
  .crmr-tbl.crmr-tbl, .crms-tbl.crms-tbl {
    min-width: 720px;
  }
  .crma-tbl.crma-tbl th, .crmc-tbl.crmc-tbl th, .crmi-tbl.crmi-tbl th, .crmn-tbl.crmn-tbl th,
  .crmp-tbl.crmp-tbl th, .crmpb-tbl.crmpb-tbl th, .crmpil-tbl.crmpil-tbl th,
  .crmr-tbl.crmr-tbl th, .crms-tbl.crms-tbl th,
  .crma-tbl.crma-tbl td, .crmc-tbl.crmc-tbl td, .crmi-tbl.crmi-tbl td, .crmn-tbl.crmn-tbl td,
  .crmp-tbl.crmp-tbl td, .crmpb-tbl.crmpb-tbl td, .crmpil-tbl.crmpil-tbl td,
  .crmr-tbl.crmr-tbl td, .crms-tbl.crms-tbl td {
    padding: 9px 10px;
  }
}

/* Barre de défilement discrète (WebKit) */
.crm-listbox::-webkit-scrollbar, .crma-tablecard > div::-webkit-scrollbar,
#crmc-list::-webkit-scrollbar { height: 8px; }
.crm-listbox::-webkit-scrollbar-thumb, .crma-tablecard > div::-webkit-scrollbar-thumb,
#crmc-list::-webkit-scrollbar-thumb { background: var(--border, #334155); border-radius: 4px; }
