/* ==========================================================================
   Admin – Styles
   Nettoyage & responsivité (tableaux 100% largeur, sans scroll horizontal)
   ========================================================================== */

/* === Palette (garde tes variables si présentes) ========================== */
:root{
  --admin-primary: var(--color-primary, #2f6fed);
  --admin-accent:  var(--color-accent,  #10b981);
  --admin-danger:  #ef4444;
  --admin-muted:   #64748b;
  --admin-bg:      #f8fafc;
}

/* ========================================================================== 
   BARRE D’OUTILS (spécifique Admin)
   --------------------------------------------------------------------------*/
.toolbar-simple{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1rem;
  padding:.5rem .75rem;
  background:#fff;
  border:1px solid #eee;
  border-radius:.5rem;
  /* Si tu veux la rendre sticky, dé-commente :
  position: sticky; top: 0; z-index: 3;
  */
}
.tool-left,
.tool-right{
  display:flex;
  align-items:center;
  gap:.5rem;
  min-width:140px; /* stabilité visuelle */
}
.tool-center{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1 1 auto;
}
.tool-label{
  font-size:.95rem;
  color:#666;
}
.tool-select{
  min-width:320px;
  padding:.45rem .65rem;
  border:1px solid #d6d6d6;
  border-radius:.5rem;
  background:#fafafa;
}
@media (max-width: 640px){
  .tool-select{ min-width: 200px; }
}

/* === Switch basique (si pas déjà stylé globalement) ====================== */
.switch-toggle{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
}
.switch-toggle input{
  width:40px; height:22px; appearance:none; outline:none; cursor:pointer;
  background:#cfd6e4; border-radius:999px; position:relative; transition:all .2s ease;
}
.switch-toggle input:checked{ background:#4f6ef7; }
.switch-toggle input::after{
  content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%;
  background:#fff; transform:translateX(0); transition:transform .2s ease;
}
.switch-toggle input:checked::after{ transform:translateX(18px); }

/* ==========================================================================
   TABLES (à déplacer plus tard dans le CSS GLOBAL du framework)
   Objectif : 100% largeur parent, pas de scroll horizontal, contenu qui wrap
   --------------------------------------------------------------------------*/

/* Conteneur */
.table-block{
  width:100%;
  background:#fff;
  border:1px solid #eee;
  border-radius:.5rem;
  padding:.5rem;
  margin-bottom:1.25rem;
  /* pas de overflow-x: auto → on évite le scroll horizontal */
  overflow: visible;
}

/* Table */
.table{
  width:100%;
  max-width:100%;
  border-collapse:collapse;
  table-layout:fixed;        /* colonnes calculées, indispensable pour le wrap uniforme */
}

/* Cellules */
.table th,
.table td{
  padding:.55rem .6rem;
  border-bottom:1px solid #f0f0f0;

  /* — CRUCIAL pour supprimer le débordement sans scroll — */
  white-space:normal;        /* on autorise le retour à la ligne */
  overflow-wrap:anywhere;    /* casse partout si nécessaire (URL longues) */
  word-break:break-word;
}

.table th{
  font-weight:600;
  font-size:.92rem;
  color:#444;
}

/* Colonne Actions : compacte mais visible */
.table .table-actions{
  white-space: nowrap;
  width: 1%;
  min-width: 120px;      /* garantit l'affichage des icônes + libellé */
  text-align: center;
}

/* Largeurs indicatives par type de contenu (optionnel, aide au wrap) */
.table td[data-editable="nom"]     { max-width:22ch; }
.table td[data-editable="title"]   { max-width:28ch; }
.table td[data-editable="adresse"] { max-width:38ch; } /* URL */
.table td[data-editable="logo"]    { max-width:14ch; }

/* Images dans les cellules (au cas où) */
.table img{
  max-width:100%;
  height:auto;
  display:inline-block;
}

/* Petits écrans : resserre un peu les cellules */
@media (max-width: 640px){
  .table th,
  .table td{ padding:.45rem .5rem; }
  .table td[data-editable="adresse"]{ max-width:28ch; }
}

/* ==========================================================================
   ADMIN — règles spécifiques mineures
   --------------------------------------------------------------------------*/
.admin-table:not([data-context="users"]) .col-role { display:none; }

/* ==========================================================================
   MODALE RÔLES (inchangé, juste ordonné)
   --------------------------------------------------------------------------*/
#roles-modal.modal{
  position:fixed; inset:0; display:none;
  align-items:center; justify-content:center;
  background:rgba(15,23,42,.45); z-index:1000;
}
#roles-modal .modal-content{
  width:min(860px, calc(100vw - 32px));
  background:#fff; border-radius:14px; padding:18px 20px;
  border:1px solid rgba(0,0,0,.08); box-shadow:0 20px 60px rgba(0,0,0,.2);
}
#roles-modal h3{ margin:0; font-size:1.1rem; color:var(--gray-900,#1f2937); }
#roles-modal .form-row{ display:flex; gap:10px; align-items:end; margin-bottom:12px; }
#roles-modal label{ display:flex; flex-direction:column; gap:6px; font-size:.85rem; color:var(--gray-700,#374151); }
#roles-modal select{ padding:8px 10px; border-radius:10px; border:1px solid var(--gray-300,#d1d5db); background:#fff; }

/* Boutons modale */
#roles-modal .btn{
  border:none; border-radius:10px; padding:8px 12px; cursor:pointer;
  background:var(--primary-600,#2563eb); color:#fff;
  transition:transform .04s ease, background .2s ease;
}
#roles-modal .btn:hover{ background:var(--primary-700,#1d4ed8); }
#roles-modal .btn.secondary{ background:var(--gray-200,#e5e7eb); color:var(--gray-900,#111827); }
#roles-modal .btn.danger{ background:var(--red-600,#dc2626); }

/* Tableau interne modale */
#roles-modal table.table{ width:100%; border-collapse:collapse; margin-top:8px; }
#roles-modal table.table th,
#roles-modal table.table td{ padding:8px 10px; border-bottom:1px solid var(--gray-200,#e5e7eb); }
#roles-modal table.table thead th{ background:var(--gray-50,#f9fafb); font-weight:600; }

/* Bouton “rôles” pilule */
.action-btn.roles-btn{
  background:var(--primary-50,#eff6ff);
  border:1px solid var(--primary-200,#bfdbfe);
  color:var(--primary-700,#1d4ed8);
  border-radius:999px; padding:4px 10px;
  display:inline-flex; align-items:center; gap:6px;
}
.action-btn.roles-btn i{ font-size:.9rem; }
.role-label{ margin-left:6px; font-weight:500; color:var(--gray-700,#374151); }

/* Si un ancien bouton rôles traîne en colonne Actions : masque-le */
.table-actions .roles-btn{ display:none !important; }

/* Boutons d'action (édition/suppression/valider/annuler) */
.action-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  padding: .35rem .5rem;
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: .35rem;
  cursor: pointer;
}
.action-btn i{ font-size: .9rem; }
.action-btn:hover{ background: #f8fafc; }

/* === Aliases : toolbar & tableaux (module Admin) ======================== */

/* Toolbar simple (sticky) */
.toolbar-simple{
  display:flex;
  width:100%;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1rem;
  padding:.5rem .75rem;
  background:#fff;
  border:1px solid #eee;
  border-radius:.5rem;
  position:sticky;
  top:0;
  z-index:3; /* reste visible */
}
.tool-left,
.tool-right{
  display:flex;
  align-items:center;
  gap:.5rem;
  min-width:140px; /* stabilité visuelle */
}
.tool-center{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1 1 auto;
}
.tool-label{ font-size:.95rem; color:#666; }
.tool-select{
  min-width:320px;
  padding:.45rem .65rem;
  border:1px solid #d6d6d6;
  border-radius:.5rem;
  background:#fafafa;
}

/* Bloc tableau : largeur contrôlée */
.table-block{
  width:100%;
  background:#fff;
  border:1px solid #eee;
  border-radius:.5rem;
  padding:.5rem;
  margin-bottom:1.25rem;
}
.table-block--fixed{ overflow-x:auto; }

/* Tableau : fixed layout + retour à la ligne si besoin */
.table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}
.table th,
.table td{
  padding:.55rem .6rem;
  border-bottom:1px solid #f0f0f0;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.table th{
  font-weight:600;
  font-size:.92rem;
  color:#444;
}

/* Colonnes: largeur indicative (évite débordements) */
.table td[data-editable="nom"]{ max-width:22ch; }
.table td[data-editable="title"]{ max-width:28ch; }
.table td[data-editable="adresse"]{ max-width:36ch; } /* URL */
.table td[data-editable="logo"]{ max-width:14ch; }

/* Petits écrans : rétrécir le select / limiter URL */
@media (max-width: 640px){
  .tool-select{ min-width:200px; }
  .table td[data-editable="adresse"]{ max-width:28ch; }
}

/* Icônes de bascule de vue (liste / groupé) */
.btn-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border:1px solid #e5e7eb; border-radius:.5rem;
  background:#fff; color:#333; cursor:pointer; transition: background .2s, color .2s, border-color .2s;
}
.btn-icon i{ font-size:1rem; }
.btn-icon:hover{ background:#f8fafc; }
.btn-icon.is-active{ border-color:#246cd1; color:#246cd1; }
.btn-icon.is-disabled{ opacity:.45; cursor:not-allowed; pointer-events:none; }