:root{
  /* Palette claire -> NumériSmile */
  --bg:#F7FBFF;             /* fond global très clair */
  --surface:#FFFFFF;        /* cartes/panneaux */
  --surface-alt:#F2F7FD;    /* zones secondaires/table rows */
  --text:#0F2233;           /* texte principal, bleu anthracite */
  --muted:#5C6F82;          /* texte secondaire */
  --primary:#4DA3FF;        /* bleu NumériSmile */
  --primary-2:#47D1C9;      /* turquoise d’accent */
  --border:#E3ECF6;         /* traits séparateurs */
  --ok:#1DBF73;             /* vert succès */
  --warn:#E9B10A;           /* jaune avertissement */
  --danger:#E04848;         /* rouge alerte */

  --radius:14px;
  --radius-sm:10px;
  --shadow:0 6px 20px rgba(25, 88, 170, 0.08);
  --shadow-strong:0 10px 28px rgba(25, 88, 170, 0.14);
}

/* Reset minimal */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}

/* Header */
.app-header{
  display:flex;gap:12px;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--border);background:#fff
}
.app-title{
  font-size:18px;margin:0;
  text-shadow:0 0 0 rgba(0,0,0,0);
}

/* Containers / panels */
.container {
    padding: 16px;
    display: grid;
    gap: 16px;
    
    /* Permet au .container de se centrer sur grand écran */
    margin-left: auto;
    margin-right: auto;
    
    /* Reste à 100% sur mobile */
    width: 100%; 

    max-width: 1980px; 
}
.panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px;
  box-shadow:var(--shadow);
}
.panel h2{
  font-size:14px;margin:0 0 10px 0;color:var(--muted);
  text-transform:uppercase;letter-spacing:.08em
}

/* Buttons */
.btn{
  padding:10px 12px;border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--surface-alt);
  color:var(--text);cursor:pointer;text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn.primary{
  background:linear-gradient(90deg,var(--primary),var(--primary-2));
  color:#06203A;border:none;font-weight:600;
  box-shadow:0 6px 22px rgba(77,163,255,.35)
}

/* Inputs */
input,select{
  width:100%;padding:10px;background:#fff;
  border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text)
}
label{font-size:12px;color:var(--muted)}

/* Pills */
.pill{
  font-size:11px;padding:2px 8px;border-radius:999px;
  border:1px solid var(--border);color:var(--muted);background:#fff
}

/* Tables */
table{width:100%;border-collapse:separate;border-spacing:0 6px}
thead th{font-size:12px;color:var(--muted);text-align:left;padding:6px 10px}
tbody tr{
  background:var(--surface-alt);
  border:1px solid var(--border);
}
tbody td{
  padding:10px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)
}
tbody tr td:first-child{
  border-left:1px solid var(--border);border-top-left-radius:var(--radius-sm);border-bottom-left-radius:var(--radius-sm)
}
tbody tr td:last-child{
  border-right:1px solid var(--border);border-top-right-radius:var(--radius-sm);border-bottom-right-radius:var(--radius-sm)
}
tbody tr:hover{outline:2px solid rgba(77,163,255,.25);background:#ECF5FF}

/* Layout helpers */
.form-grid {
    display: grid;
    /* Crée autant de colonnes de 250px (min) que possible */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
    align-items: end; /* Aligne tous les items en bas de leur case */
}

.form-grid > div {
    align-self: start; /* Sauf pour les <div> (Nom, Statut) qu'on aligne en haut */
}
.toolbar{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.pagination{display:flex;gap:6px;align-items:center}
.muted{color:var(--muted);font-size:12px}

/* Kanban */
.board{display:grid;grid-auto-columns:300px;grid-auto-flow:column;gap:12px;overflow-x:auto;padding-bottom:8px}
.kan-col{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  min-height:120px;display:flex;flex-direction:column;box-shadow:var(--shadow)
}
.kan-col header{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 12px;border-bottom:1px solid var(--border);background:var(--surface)
}
.kan-col header h3{margin:0;font-size:13px;color:var(--muted);text-transform:uppercase}
.kan-list{padding:10px;display:flex;flex-direction:column;gap:8px;min-height:80px}
.kan-card{
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:10px;cursor:grab;transition:border-color .15s ease, box-shadow .15s ease;
  box-shadow:var(--shadow)
}
.kan-card:hover{border-color:#9DCBFF;box-shadow:var(--shadow-strong)}
.kan-list.drag-over{outline:2px dashed var(--primary)}

/* Indicateur “retard” dans la liste */
.pill-danger{
  border-color:#F3C4C4 !important;
  color:#B41616 !important;
  background:#FFEDEE !important;
  white-space:nowrap
}

/* Clignotement rouge discret sur ligne */
@keyframes blink-red {
  0%, 100% { background: #FFEDEE; }
  50%      { background: var(--surface-alt); }
}
tbody tr.row-overdue{
  animation: blink-red 1.2s linear infinite;
  border-color: #E04848 !important;
}
tbody tr.row-overdue td{
  border-top-color:#F3C4C4;
  border-bottom-color:#F3C4C4;
}

/* Mode édition masqué par défaut */
.edit-only{ display:none; }
body.edit-on .edit-only{ display:block; }

/* Petite puce à droite du header */
.edit-switch{ display:flex; align-items:center; gap:8px; }
.edit-switch input{ transform: translateY(1px); }

/* === Entreprises: éditeur inline propre (dans <details>) ================== */
.table table th, .table table td{
  vertical-align: top;
  overflow: visible;           /* évite le clipping dans la cellule */
}

/* Panneau éditeur */
.details-editor{
  margin-top: 8px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  width: 100%;
  max-width: min(980px, 95vw); /* largeur raisonnable + responsive */
}

/* Grille interne : 2 colonnes qui PEUVENT rétrécir */
.details-editor .form-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* <-- clé anti-chevauchement */
  gap: 12px;
}

/* ⚠️ TRÈS IMPORTANT : autoriser le shrink des enfants de la grid */
.details-editor .form-grid > *{
  min-width: 0;   /* retire le min-content implicite qui provoque les chevauchements */
}

/* Champs */
.details-editor label{
  display: block;
  margin-bottom: 4px;
  line-height: 1.2;
}
.details-editor input,
.details-editor select,
.details-editor textarea{
  width: 100%;
  box-sizing: border-box;
}

/* Lignes pleine largeur (Nom, Adresse, boutons) */
.details-editor .row-full{ grid-column: 1 / -1; }

/* Summary bouton plus clean */
.table details > summary.btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
}
.table details > summary.btn::-webkit-details-marker{ display:none; }
.table details[open] > summary.btn{ background: var(--surface); }

/* Mobile: passer en 1 colonne */
@media (max-width: 800px){
  .details-editor .form-grid{
    grid-template-columns: 1fr;
  }
}

/* ——— User menu (header) ——— */
.userbox{ position:relative; }
.userbtn{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border:1px solid var(--border);
  border-radius:999px; background:#fff; cursor:pointer;
}
.userbtn .avatar{
  width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(135deg,#3b82f6,#22c55e);
  color:#fff; font-weight:600; font-size:12px;
}
.userbtn .name{ max-width:160px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.usermenu{
  position:absolute; right:0; top:120%;
  background:#fff; border:1px solid var(--border); border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  min-width:220px; padding:6px; display:none; z-index:50;
}
.usermenu.open{ display:block; }
.usermenu a, .usermenu button{
  width:100%; text-align:left; background:transparent; border:0;
  padding:10px 12px; border-radius:10px; cursor:pointer; display:flex; gap:10px; align-items:center;
}
.usermenu a:hover, .usermenu button:hover{ background:var(--surface); }
.usermenu .muted{ color:#64748b; font-size:12px; padding:8px 12px; }

/* Liens du menu utilisateur */
.text_nolink{
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  text-decoration: none;       /* enlève le soulignement */
  color: var(--text, #333);    /* texte neutre */
  border-radius: 6px;
}

@media (max-width: 640px){ .userbtn .name{ display:none; } }

/* ===== Layout utilitaires ===== */
.layout-two{
  display:grid;
  grid-template-columns: 1.2fr 1fr; 
  gap:16px;
  padding:14px;
  align-items:start;
}

@media (max-width: 1024px){ 
  .layout-two{ grid-template-columns: 1fr; }
}

/* Formulaires plus larges/confort */
.form-lg{
  /* 2 colonnes souples qui peuvent rétrécir */
  display:grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap:12px;
}
.form-lg .full{ grid-column: 1 / -1; }

.form-lg input,
.form-lg select,
.form-lg textarea{
  width:100%;
  padding:12px 14px;
  font-size:15px;
  border-radius:12px;
  box-sizing:border-box;
}

/* Aligner le footer d'actions sur toute la largeur */
.form-actions{
  display:flex;
  gap:8px;
  margin-top:6px;
}

.act-edit-row > td {
  background: #f8fafc;
  border-top: 1px dashed var(--border);
}
.form-grid textarea { width: 100%; }
.btn.ghost { background: transparent; border:1px solid var(--border); }

.sort-link {
    /* Enlève la couleur et le soulignement de lien par défaut */
    color: var(--primary);
    text-decoration: none;
    font-style: oblique;
    
    /* Ajoute une petite icône de main pour montrer que c'est cliquable */
    cursor: pointer;
}

/* Optionnel : change la couleur au survol */
.sort-link:hover {
    color: var(--primary-2); /* Ou la couleur que vous préférez */
}

.table-wrap {
    max-width: 100%;
}

.table-wrap-scrollable {
    max-width: 100%;
    -webkit-overflow-scrolling: touch; 
}

.table-wrap-scrollable table {
    width: 100%; 
}

.table-wrap-scrollable th,
.table-wrap-scrollable td {
    /* On laisse le texte passer à la ligne sur mobile */
    white-space: normal;
    word-break: break-word; /* Au cas où un mot est trop long */
}

/* --- CLASSES RESPONSIVES (Optionnel mais recommandé) --- */

/* * Colonnes visibles uniquement sur grand écran (desktop) 
 * (ex: ID, Créé le, Actions)
 */
.hide-on-desktop { display: none !important; }
.show-on-desktop { display: table-cell; } /* 'table-cell' est important */

/* Colonnes pour tablettes et plus */
@media (max-width: 1424px) {
    .hide-on-tablet { display: none !important; }
    .show-on-tablet { display: table-cell; }
}

/* Colonnes pour mobiles */
@media (max-width: 767px) {
    .hide-on-mobile { display: none !important; }
    .show-on-mobile { display: table-cell; }

    /* Optionnel : réduire la taille de la police sur mobile */
    .table-wrap th,
    .table-wrap td {
        font-size: 12px;
        padding: 8px 6px;
    }
    .container {
        padding-left: 2px;
        padding-right: 2px;
    }

    .app-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .app-header-nav {
        margin-left: 0;
        width: 100%;
        gap: 0; 
    }

    .app-header-nav > * {
        margin-right: 8px;
        margin-bottom: 8px; 
    }
    
    .panel .form-grid {
        grid-template-columns: 1fr;
        gap: 16px; 
    }

    .toolbar {
        flex-direction: column;
        gap: 16px; /* Ajoute un espace entre le texte et les boutons */
        align-items: center; /* Centre les deux blocs */
    }

    .pagination {
        flex-wrap: wrap; /* La règle la plus importante ! */
        justify-content: center; /* Centre les boutons */
    }
}

.app-header-nav {
    display: flex;
    gap: 8px; /* Garde l'écart horizontal par défaut */
    align-items: center;
    margin-left: auto; /* Comportement par défaut (à droite) */
    
    /* AJOUT : Permet le passage à la ligne même sur desktop si besoin */
    flex-wrap: wrap; 
}

#client-activities-table table {
    table-layout: auto; /* Mode auto par défaut */
    width: 100%; 
}

#client-activities-table th,
#client-activities-table td {
    white-space: normal;
    word-break: break-word; /* Force les mots longs à se couper */
}

@media (min-width: 768px) {
  #client-activities-table table {
      table-layout: fixed;
      width: 100%; 
  }

  /* Colonnes "Type", "Canal", "Résultat", "Assigné" (Petites) */
  #client-activities-table th:nth-child(2), #client-activities-table td:nth-child(2),
  #client-activities-table th:nth-child(3), #client-activities-table td:nth-child(3),
  #client-activities-table th:nth-child(7), #client-activities-table td:nth-child(7) { 
      width: 90px; /* Largeur fixe de 90px */
  }

  /* Colonnes "Date" et "Prochaine action" (Moyennes) */
  #client-activities-table th:nth-child(1), #client-activities-table td:nth-child(1),
  #client-activities-table th:nth-child(8), #client-activities-table td:nth-child(8) { 
      width: 110px; /* Largeur fixe de 110px */
  }

  /* Colonne "Actions" (pour les boutons) */
  #client-activities-table th:nth-child(9), #client-activities-table td:nth-child(9) { 
      width: 110px; /* Assez de place pour les 2 boutons */
  }

  /* Colonne "Sujet" */
  #client-activities-table th:nth-child(4), #client-activities-table td:nth-child(4),
  #client-activities-table th:nth-child(6), #client-activities-table td:nth-child(6) { 
      width: 160px; /* 20% de la largeur restante */
  }

  /* Colonne "Contenu" (la principale) */
  #client-activities-table th:nth-child(5), #client-activities-table td:nth-child(5) { 
      width: auto; /* Prendra tout le reste de la place */
  }
}

#clients-tbody table {
    table-layout: fixed;
    width: 100%;
}

/* * 2. Cible TOUTES les cellules de ce tableau spécifique.
*/
#clients-tbody th,
#clients-tbody td {
    /* (Votre CSS actuel permet déjà le retour à la ligne, c'est parfait) */
    
    /* * 3. FORCE la coupure des mots longs (ex: un nom d'entreprise
     * ou un email sans espaces) pour qu'ils ne fassent pas déborder la cellule.
     */
    word-break: break-word;
    overflow-wrap: break-word; /* Fallback pour word-break */
}

/* * 4. Protège vos colonnes courtes en leur donnant une largeur fixe.
 * (J'ai identifié 7 colonnes à protéger)
*/

/* Colonne ID */
#clients-tbody th:nth-child(1), 
#clients-tbody td:nth-child(1) {
    width: 60px; 
}

/* Colonne Téléphone */
#clients-tbody th:nth-child(4), #clients-tbody td:nth-child(4){
    width: 125px;
}

/* Colonne Téléphone */
#clients-tbody th:nth-child(5), #clients-tbody td:nth-child(5){
    width: 150px;
}

/* Colonne Dépt */
#clients-tbody th:nth-child(8), 
#clients-tbody td:nth-child(8) {
    width: 60px;
}

/* Colonne Statut */
#clients-tbody th:nth-child(9), 
#clients-tbody td:nth-child(9) {
    width: 100px;
}

/* Colonne Spécialité responsable commercial */
#clients-tbody th:nth-child(6), #clients-tbody td:nth-child(6),
#clients-tbody th:nth-child(7), #clients-tbody td:nth-child(7),
#clients-tbody th:nth-child(10), #clients-tbody td:nth-child(10),
#clients-tbody th:nth-child(11), #clients-tbody td:nth-child(11) {
    width: 110px;
}

/* Colonnes "Créé le", "MAJ", et "Proch. Action" */
#clients-tbody th:nth-child(12), #clients-tbody td:nth-child(12),
#clients-tbody th:nth-child(13), #clients-tbody td:nth-child(13) {
    width: 100px;
}

/* Colonne Actions */
#clients-tbody th:nth-child(14), 
#clients-tbody td:nth-child(14) {
    width: 110px;
}

@media (min-width: 768px) {
    
    /* 1. On réactive le scroll horizontal */
    .table-wrap-scrollable {
        overflow-x: auto;
    }

    /* 2. On réactive la largeur minimale */
    .table-wrap-scrollable table {
        min-width: 1400px;
    }

    /* 3. On empêche le texte de passer à la ligne */
    .table-wrap-scrollable th,
    .table-wrap-scrollable td {
        white-space: nowrap;
    }
}

.edit-link-form {
    display: flex;
    align-items: center;
    gap: 8px; /* Un espacement standard */
    margin-bottom: 6px;
    
    /* C'est la ligne magique :
       Autorise les éléments à passer à la ligne sur mobile */
    flex-wrap: wrap; 
}

/* On préserve la largeur du champ "rôle" */
.edit-link-form input[name="role"] {
    width: 160px;
}

/* On préserve le style de la checkbox */
.edit-link-form label.muted {
    display: flex;
    gap: 4px;
    align-items: center;
}