/* =========================================
   STYLE DU TABLEAU GLOBAL
   ========================================= */
table.views-table {
  width: auto;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
  
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02), 0 4px 12px rgba(0, 0, 0, 0.04);
  
  background-color: #ffffff;
}

/* =========================================
   TITRES DES COLONNES (EN-TÊTE)
   ========================================= */
table.views-table thead th {
  text-align: left;
  padding: 14px 16px;
  
  background: linear-gradient(135deg, #e8ecf4 0%, #dce3ef 100%) !important;
  color: #1a2644 !important;
  
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  
  white-space: nowrap !important;
  line-height: 1.3;
  vertical-align: middle;
  
  min-width: 120px;
  
  border-bottom: 2px solid #1a2644 !important;
  border-right: 1px solid #dce3ef !important;
}

table.views-table thead th:last-child {
  border-right: none !important;
}

/* =========================================
   CELLULES DU CORPS
   ========================================= */
table.views-table tbody td {
  padding: 12px 16px;
  
  border: none;
  border-bottom: 1px solid #F1F5F9 !important;
  border-right: 1px solid #F8FAFC !important;
  
  text-align: left;
  color: #475569 !important;
  vertical-align: middle;
  
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  
  min-width: 120px;
  
  font-size: 14px;
  line-height: 1.5;
  
  transition: background-color 0.2s ease;
}

table.views-table tbody td:last-child {
  border-right: none !important;
}

table.views-table tbody tr:last-child td {
  border-bottom: none !important;
}

/* =========================================
   EFFET HOVER SUR LES RANGÉES (INTACT)
   ========================================= */
table.views-table tbody tr {
  transition: background-color 0.2s ease;
}

table.views-table tbody tr:hover {
  background-color: #e8ecf4 !important;
}

table.views-table tbody tr:hover td {
  color: #1a2644 !important;
}

/* =========================================
   ✅ LIENS DANS LES TABLEAUX - BLEU REPOS / JAUNE HOVER
   ========================================= */

/* ✅ Liens au repos - BLEU ROYAL VIF BOLD */
table.views-table a,
table.views-table td a,
table.views-table th a {
  color: #3b82f6 !important; /* ✅ BLEU ROYAL VIF */
  text-decoration: none !important;
  font-weight: 550 !important;
  transition: color 0.2s ease !important;
}

/* ✅ Hover - JAUNE OR */
table.views-table a:hover,
table.views-table td a:hover,
table.views-table th a:hover {
  color: #ffcd01 !important; /* ✅ JAUNE OR */
  text-decoration: underline !important;
}

/* ✅ Visited - Bleu royal plus foncé */
table.views-table a:visited {
  color: #2563eb !important;
}

table.views-table a:visited:hover {
  color: #ffcd01 !important;
}

/* ✅ Focus - Halo bleu */
table.views-table a:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3) !important;
  border-radius: 3px !important;
}

/* ✅ Liens "Supprimer" en rouge doux */
table.views-table a[href*="/delete"],
table.views-table a[href*="delete"] {
  color: #DC2626 !important;
}

table.views-table a[href*="/delete"]:hover,
table.views-table a[href*="delete"]:hover {
  color: #991B1B !important;
}

/* ✅ Liens "Désactiver" en orange doux */
table.views-table a[href*="/disable"] {
  color: #EA580C !important;
}

table.views-table a[href*="/disable"]:hover {
  color: #C2410C !important;
}

/* =========================================
   BOUTON SUPPRESSION (MODERNE) - INTACT
   ========================================= */
.delete-row {
  background-color: #FEF2F2 !important;
  color: #DC2626 !important;
  border: 1.5px solid #FECACA !important;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 8px !important;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.01em;
  
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.delete-row:hover {
  background-color: #DC2626 !important;
  color: #ffffff !important;
  border-color: #DC2626 !important;
  
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(220, 38, 38, 0.2);
}

.delete-row:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.delete-row:active {
  transform: translateY(0);
}

/* =========================================
   MESSAGE VIDE - INTACT
   ========================================= */
.empty-message {
  text-align: center;
  font-style: italic;
  color: #1a2644 !important;
  padding: 40px 20px;
  font-size: 14px;
  
  background-color: #e8ecf4 !important;
  border-radius: 10px;
}

/* =========================================
   ENTÊTE FIXE (STICKY CLONE) - INTACT
   ========================================= */
.sticky-clone {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  background: #ffffff;
  border-collapse: separate;
  border-spacing: 0;
  pointer-events: none;
  border-radius: 12px !important;
  overflow: hidden;
}

.sticky-clone thead th {
  background: linear-gradient(135deg, #e8ecf4 0%, #dce3ef 100%) !important;
  color: #1a2644 !important;
  position: static !important;
  top: auto !important;
  z-index: 1200 !important;
  
  padding: 14px 16px;
  
  white-space: nowrap !important;
  line-height: 1.3;
  vertical-align: middle;
  min-width: 120px;
  
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  
  border-bottom: 2px solid #1a2644 !important;
  border-right: 1px solid #dce3ef !important;
}

.sticky-clone thead th:last-child {
  border-right: none !important;
}

/* =========================================
   TOOLBAR ADMIN - INTACT
   ========================================= */
.admin-toolbar + .sticky-clone {
  top: 32px;
}

/* =========================================
   RESPONSIVE - INTACT
   ========================================= */
@media (max-width: 768px) {
  table.views-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  
  table.views-table th,
  table.views-table td {
    min-width: 100px;
  }
}