/* ============================================
   STYLES COMMUNS POUR TOUTES LES PAGES
   ============================================
   Ce fichier centralise tous les styles réutilisables.
   Les variables CSS sont définies dans theme.css.
*/

/* ===== RESET ET BASE ===== */
* {
  box-sizing: border-box;
}

html,
body {
  overflow-x: clip;
  max-width: 100%;
}

body {
  font-family: var(--font-family-base);
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  line-height: 1.6;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

/* ===== CONTAINERS ===== */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.page-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

.page-container.page-container--narrow {
  max-width: 900px;
}

/* === Boutons d'action spacieux (ex. role_form) === */
/* Style Enregistrer / Annuler / Tout quand la page a de la place (à opposer au style compact des pages serrées) */
.form-actions-spacious .btn-primary,
.form-actions-spacious .btn.btn-primary {
  background: var(--primary-color);
  border: none;
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 7px;
  font-weight: 500;
  transition: background 0.15s ease;
  cursor: pointer;
}
.form-actions-spacious .btn-primary:hover,
.form-actions-spacious .btn.btn-primary:hover {
  background: var(--primary-dark, var(--secondary-color));
  color: white;
}
.form-actions-spacious .btn-secondary,
.form-actions-spacious .btn.btn-secondary,
.form-actions-spacious a.btn-secondary {
  background: var(--text-secondary);
  border: none;
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 7px;
  font-weight: 500;
  transition: background 0.15s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.form-actions-spacious .btn-secondary:hover,
.form-actions-spacious .btn.btn-secondary:hover,
.form-actions-spacious a.btn-secondary:hover {
  background: #5a6c7d;
  color: white;
}
.form-actions-spacious .btn-outline-primary,
.form-actions-spacious .btn-outline-secondary,
.form-actions-spacious .btn.btn-outline-primary,
.form-actions-spacious .btn.btn-outline-secondary {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.2s ease;
  border: 2px solid;
  background: transparent;
  cursor: pointer;
}
.form-actions-spacious .btn-outline-primary,
.form-actions-spacious .btn.btn-outline-primary {
  border-color: var(--primary-color);
  color: var(--primary-color);
}
.form-actions-spacious .btn-outline-primary:hover,
.form-actions-spacious .btn.btn-outline-primary:hover {
  background: var(--primary-color);
  color: white;
}
.form-actions-spacious .btn-outline-secondary,
.form-actions-spacious .btn.btn-outline-secondary {
  border-color: var(--text-secondary);
  color: var(--text-secondary);
}
.form-actions-spacious .btn-outline-secondary:hover,
.form-actions-spacious .btn.btn-outline-secondary:hover {
  background: var(--text-secondary);
  color: white;
}

/* User shell layout (pour les pages user_management) */
.user-shell {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 20px;
  align-items: start;
}

@media (max-width: 1100px) {
  .user-shell {
    grid-template-columns: 1fr;
  }
}

.user-sidebar {
  position: sticky;
  top: 16px;
}

@media (max-width: 1100px) {
  .user-sidebar {
    position: static;
  }
}

.user-avatar {
  width: 96px;
  height: 96px;
  border-radius: 18px;
  border: 2px solid var(--card-border, #e5e7eb);
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.12), rgba(132, 101, 169, 0.08));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  color: var(--primary-color);
  flex: 0 0 auto;
  overflow: hidden;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.user-meta {
  display: flex;
  gap: 14px;
  align-items: center;
}

.user-name {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary, #29295e);
}

.user-email {
  margin: 2px 0 0 0;
  color: var(--text-secondary, #6c757d);
  font-size: 0.9rem;
}

.user-role-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.03);
  color: var(--text-primary, #29295e);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.85rem;
  margin-top: 10px;
}

@media (max-width: 768px) {
  .page-container {
    padding: 1rem;
  }
  
  .header-content {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .header-content h1,
  .header-title {
    font-size: 2rem;
  }
}

.main-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ===== HEADERS ===== */

/* Liste CV et Périmètre Business : header + barre d'outils restent en haut au scroll, sous la navbar (60px) */
.page-sticky-header .header-container {
  position: sticky;
  top: 60px; /* sous la navbar (min-height: 60px) */
  z-index: 101;
  overflow: visible; /* ne pas couper les boutons quand le header est sticky */
}

/* Barre d'outils (recherche + boutons) juste sous le header quand on scrolle */
.page-sticky-header .table-section .table-toolbar {
  position: sticky;
  top: 165px; /* 60px navbar + ~105px header (padding + boutons) */
  z-index: 100;
  background: var(--bg-primary, #fff);
  box-shadow: 0 1px 0 var(--border-color, rgba(0, 0, 0, 0.08));
}

/* Header — même dégradé que la navbar pour des couleurs très proches */
.header-container {
  background: var(--navbar-bg);
  color: white;
  padding: 2rem 0;
  margin-bottom: 0.5rem;
  position: relative;
  overflow: hidden;
}

.header-container::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0) 60%
  );
  transform: rotate(30deg);
  pointer-events: none;
}


/*
 * Header « boutons seuls » (pas de titre) : sticky-header.js ajoute la classe
 * .header-bar-fixed sur .header-content quand le bandeau décoratif a défilé
 * au-dessus de la navbar. Bandeau fixe sur toute la largeur du viewport (fond navbar).
 */
.header-bar-fixed {
  position: fixed !important;
  top: 60px;
  left: 0;
  right: 0;
  transform: none;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
  z-index: 999;
  background: var(--navbar-bg);
  margin: 0 !important;
  padding: 0.5rem 2rem 0.65rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}


.header-content {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.header-content.text-center {
  text-align: center;
  justify-content: center;
}

.header-content h1,
.header-content h2,
.header-content h3,
.header-content h4,
.header-content h5,
.header-content h6,
.header-content p,
.header-content * {
  color: white !important;
}

.header-content h1,
.header-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.header-content.text-center h1,
.header-content.text-center .header-title {
  justify-content: center;
}

/* Alias pour header-actions (déprécié, utiliser header-buttons) */
.header-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin-top: 0;
  flex-wrap: wrap;
}

/* Boutons glassmorphism dans le header - conteneur principal */
.header-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin-top: 0;
  flex-wrap: wrap;
}

/* Conteneur glassmorphism pour les boutons (identique à .user-header-tabs .nav-tabs) */
.header-buttons-container,
.user-header-tabs .nav-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 12px;
  padding: 6px;
  backdrop-filter: blur(10px);
  flex-wrap: wrap;
  border-bottom: none !important;
}

/* Séparateur vertical entre groupes de boutons dans le header */
.header-btn-separator {
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,0.25);
  margin: 0 2px;
  flex-shrink: 0;
}

.user-header-tabs {
  margin-top: 12px;
  display: flex;
  justify-content: center;
}

/* Réduire uniquement l’espace vertical du bandeau blanc (entre header bleu et tableau) */
.list-page-toolbar {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 6px !important;
  padding: 6px 12px !important;
}

.card-box .table-toolbar {
  margin-bottom: 6px !important;
}
.table-section .table-toolbar {
  margin-bottom: 12px !important;
}

/*
 * ===== CONTRAT CSS/JS — PAGES LISTE À TABLEAU =====
 * Les scripts (recherche globale, ExcelColumnFilters, modales) s'appuient sur ces
 * classes et attributs. Ne pas les renommer/supprimer sans adapter le JS.
 *
 * | Élément                      | Rôle                              | Utilisé par                |
 * | .table-global-search         | Input recherche globale           | table-global-search.js     |
 * | data-table-id                | ID du tableau cible               | table-global-search.js     |
 * | data-server-search="true"    | Mode recherche serveur            | table-global-search.js     |
 * | #tableActionButtonsContainer | Conteneur Filtre avancé / Personnaliser | Injection boutons par page |
 * | .table-section               | Bloc principal liste              | Layout + JS                |
 * | .table-toolbar               | Barre recherche + boutons        | Layout                     |
 * | .table-container             | Zone scrollable du tableau        | common.css, InfiniteScrollTable |
 * | .filter-header ou 2e <tr> thead | Ligne filtres Excel           | excel-column-filters.js    |
 * | .modal-overlay, .custom-modal| Structure modales Filtres/Colonnes| Ouverture/fermeture        |
 */

/* Conteneur des boutons à droite de la toolbar (Filtre avancé, Personnaliser) */
.table-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Badge compteur d'éléments (auto-inséré par InfiniteScrollTable) */
.table-record-count {
  display: inline-flex;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary, #6c757d);
  background: var(--bg-secondary, #f0f2f5);
  border: 1px solid var(--border-color, #dee2e6);
  border-radius: 20px;
  padding: 4px 12px;
  white-space: nowrap;
  line-height: 1.4;
}

/* Barre de recherche globale — style moderne (icône + champ arrondi + bouton effacer) */
.table-search-modern {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 200px;
  max-width: 280px;
  height: 38px;
  background: var(--bs-body-bg, #fff);
  border: 1px solid var(--border-color, #dee2e6);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.table-search-modern:focus-within {
  border-color: var(--primary-color, #0d6efd);
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}
.table-search-modern__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  color: var(--text-secondary, #6c757d);
  pointer-events: none;
}
.table-search-modern .table-global-search {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 36px 0 0;
  border: none !important;
  background: transparent !important;
  font-size: 0.9rem;
  box-shadow: none !important;
}
.table-search-modern .table-global-search::placeholder {
  color: var(--text-secondary, #6c757d);
  opacity: 0.85;
}
.table-search-modern .table-global-search:focus {
  outline: none;
}
.table-search-modern__clear {
  position: absolute;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary, #6c757d);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.table-search-modern__clear:hover {
  color: var(--bs-body-color, #29295e);
  background: rgba(0, 0, 0, 0.06);
}
.table-search-modern__clear:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--primary-color, #0d6efd);
}

/* Rétrocompatibilité : champs .table-global-search non wrappés (même rendu moderne) */
.table-toolbar .table-global-search {
  min-width: 180px;
  padding-left: 40px;
  border-radius: 10px;
  border: 1px solid var(--border-color, #dee2e6);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.table-toolbar .table-global-search:focus {
  border-color: var(--primary-color, #0d6efd);
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}
.table-toolbar .table-global-search::placeholder {
  color: var(--text-secondary);
  opacity: 0.9;
}
/* Ne pas dupliquer l’icône quand l’input est dans .table-search-modern */
.table-search-modern .table-global-search {
  padding-left: 0;
  background-image: none;
}

/* Boutons dans le header — glassmorphism, taille compacte */
.header-container .header-buttons-container .view-btn,
.header-container .header-buttons-container a.view-btn,
.header-container .header-buttons-container button.view-btn,
.header-container .header-buttons-container .btn-modern,
.header-container .header-buttons-container a.btn-modern,
.header-container .header-buttons-container button.btn-modern,
.header-container .header-buttons-container .back-link,
.header-container .header-buttons-container a.back-link,
.header-container .header-buttons-container button.back-link,
.header-container .header-actions .view-btn,
.header-container .header-actions a.view-btn,
.header-container .header-actions button.view-btn,
.header-container .header-actions .btn-modern,
.header-container .header-actions a.btn-modern,
.header-container .header-actions button.btn-modern,
.header-container .header-actions .back-link,
.header-container .header-actions a.back-link,
.header-container .header-actions button.back-link,
.header-container .user-header-tabs .nav-tabs .nav-link,
.header-container .user-header-tabs .nav-tabs .nav-link:link,
.header-container .user-header-tabs .nav-tabs .nav-link:visited {
  white-space: nowrap;
  background: transparent !important;
  border: none !important;
  border-bottom: none !important;
  border-radius: 7px !important;
  color: rgba(255,255,255,0.85) !important;
  font-weight: 500;
  font-size: 0.8rem;
  padding: 6px 10px;
  text-decoration: none !important;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  font-family: inherit;
}

.header-container .header-buttons-container .view-btn:hover,
.header-container .header-buttons-container a.view-btn:hover,
.header-container .header-buttons-container button.view-btn:hover,
.header-container .header-buttons-container .btn-modern:hover,
.header-container .header-buttons-container a.btn-modern:hover,
.header-container .header-buttons-container button.btn-modern:hover,
.header-container .header-buttons-container .back-link:hover,
.header-container .header-buttons-container a.back-link:hover,
.header-container .header-buttons-container button.back-link:hover,
.header-container .header-actions .view-btn:hover,
.header-container .header-actions a.view-btn:hover,
.header-container .header-actions button.view-btn:hover,
.header-container .header-actions .btn-modern:hover,
.header-container .header-actions a.btn-modern:hover,
.header-container .header-actions button.btn-modern:hover,
.header-container .header-actions .back-link:hover,
.header-container .header-actions a.back-link:hover,
.header-container .header-actions button.back-link:hover,
.header-container .user-header-tabs .nav-tabs .nav-link:hover,
.header-container .user-header-tabs .nav-tabs .nav-link:focus {
  background: rgba(255,255,255,0.15) !important;
  color: white !important;
  text-decoration: none !important;
  border-bottom-color: transparent !important;
}

.header-container .header-buttons-container .view-btn.active,
.header-container .header-buttons-container a.view-btn.active,
.header-container .header-buttons-container button.view-btn.active,
.header-container .header-buttons-container .btn-modern.active,
.header-container .header-buttons-container a.btn-modern.active,
.header-container .header-buttons-container button.btn-modern.active,
.header-container .header-buttons-container .btn-modern-primary,
.header-container .header-buttons-container a.btn-modern-primary,
.header-container .header-buttons-container button.btn-modern-primary,
.header-container .header-buttons-container .back-link.active,
.header-container .header-buttons-container a.back-link.active,
.header-container .header-buttons-container button.back-link.active,
.header-container .header-actions .view-btn.active,
.header-container .header-actions a.view-btn.active,
.header-container .header-actions button.view-btn.active,
.header-container .header-actions .btn-modern.active,
.header-container .header-actions a.btn-modern.active,
.header-container .header-actions button.btn-modern.active,
.header-container .header-actions .btn-modern-primary,
.header-container .header-actions a.btn-modern-primary,
.header-container .header-actions button.btn-modern-primary,
.header-container .header-actions .back-link.active,
.header-container .header-actions a.back-link.active,
.header-container .header-actions button.back-link.active,
.header-container .user-header-tabs .nav-tabs .nav-link.active,
.header-container .user-header-tabs .nav-tabs .nav-link.active:link,
.header-container .user-header-tabs .nav-tabs .nav-link.active:visited {
  background: rgba(255,255,255,0.28) !important;
  color: white !important;
  text-decoration: none !important;
  border-bottom-color: transparent !important;
  font-weight: 600;
}

.header-container .header-buttons-container .view-btn i,
.header-container .header-buttons-container a.view-btn i,
.header-container .header-buttons-container button.view-btn i,
.header-container .header-buttons-container .btn-modern i,
.header-container .header-buttons-container a.btn-modern i,
.header-container .header-buttons-container button.btn-modern i,
.header-container .header-buttons-container .back-link i,
.header-container .header-buttons-container a.back-link i,
.header-container .header-buttons-container button.back-link i,
.header-container .header-actions .view-btn i,
.header-container .header-actions a.view-btn i,
.header-container .header-actions button.view-btn i,
.header-container .header-actions .btn-modern i,
.header-container .header-actions a.btn-modern i,
.header-container .header-actions button.btn-modern i,
.header-container .header-actions .back-link i,
.header-container .header-actions a.back-link i,
.header-container .header-actions button.back-link i,
.header-container .user-header-tabs .nav-tabs .nav-link i {
  margin-right: 6px;
  color: inherit !important;
}

/* Support pour les boutons sans conteneur (rétrocompatibilité) */
.header-buttons .view-btn:not(.header-buttons-container .view-btn),
.header-buttons a.view-btn:not(.header-buttons-container .view-btn) {
  white-space: nowrap;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 7px;
  color: rgba(255,255,255,0.85);
  font-weight: 500;
  font-size: 0.8rem;
  padding: 6px 10px;
  text-decoration: none;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  font-family: inherit;
}

.header-buttons .view-btn:not(.header-buttons-container .view-btn):hover,
.header-buttons a.view-btn:not(.header-buttons-container .view-btn):hover {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.35);
  color: white;
  text-decoration: none;
}

.header-buttons .view-btn:not(.header-buttons-container .view-btn).active,
.header-buttons a.view-btn:not(.header-buttons-container .view-btn).active {
  background: rgba(255,255,255,0.28);
  border-color: rgba(255,255,255,0.4);
  color: white;
  font-weight: 600;
  text-decoration: none;
}

/* Les styles de back-link dans les headers sont maintenant gérés par les règles ci-dessus */

/* ===== DROPDOWNS "DOCUMENT TYPE" DANS LES HEADERS DE CV ===== */
/* Wrapper pour le dropdown "Document type" */
.cv-document-type-wrapper {
  position: relative;
  overflow: visible;
  display: inline-block;
}

/* S'assurer que le nav-item ne coupe pas le menu */
.header-container .cv-document-type-wrapper.nav-item {
  overflow: visible !important;
}

/* S'assurer que les conteneurs parents ne coupent pas le menu */
.header-container .user-header-tabs,
.header-container .user-header-tabs .nav-tabs,
.header-container .user-header-tabs .nav-tabs .nav-item {
  overflow: visible !important;
}

/* Fallback CSS :hover pour le dropdown (si JavaScript ne fonctionne pas) */
.cv-document-type-wrapper:hover .cv-document-type-dropdown {
  display: block !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
  position: fixed !important;
  z-index: 99998 !important;
}

/* Bouton toggle du dropdown "Document type" - hérite du style des autres boutons du header */
.header-container .cv-document-type-toggle,
.header-container .cv-document-type-wrapper .nav-link.cv-document-type-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  white-space: nowrap;
  background: transparent !important;
  border: none !important;
  border-bottom: none !important;
  border-radius: 7px !important;
  color: rgba(255,255,255,0.85) !important;
  font-weight: 500;
  font-size: 0.8rem;
  padding: 6px 10px;
  text-decoration: none !important;
  transition: all 0.15s ease;
  cursor: pointer;
  font-family: inherit;
}

.header-container .cv-document-type-toggle:hover,
.header-container .cv-document-type-wrapper .nav-link.cv-document-type-toggle:hover {
  background: rgba(255,255,255,0.15) !important;
  color: white !important;
  text-decoration: none !important;
  border-bottom-color: transparent !important;
}

.header-container .cv-document-type-toggle i,
.header-container .cv-document-type-wrapper .nav-link.cv-document-type-toggle i {
  color: inherit !important;
}

/* Menu déroulant "Document type" */
.cv-document-type-dropdown {
  display: none !important;
  position: fixed;
  background-color: #ffffff;
  min-width: 240px;
  max-width: 300px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  padding: 8px 0;
  border: 1px solid #d0d0d0;
  z-index: 99998 !important;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
  pointer-events: none;
  margin-top: 0;
  overflow: visible !important;
  max-height: none !important;
  top: 0;
  left: 0;
}

.cv-document-type-dropdown.show {
  display: block !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
  position: fixed !important;
  z-index: 99998 !important;
}

/* Items du menu déroulant */
.cv-document-type-dropdown a {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 10px 16px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--text-primary, #29295e) !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
  width: 100%;
  box-sizing: border-box;
  white-space: normal;
  word-wrap: break-word;
}

.cv-document-type-dropdown a i {
  font-size: 16px;
  width: 20px;
  text-align: center;
}

.cv-document-type-dropdown a:hover {
  background-color: #f1f3f5;
}

/* Style par défaut pour back-link */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: transparent;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: 7px;
  font-weight: 500;
  transition: all 0.15s ease;
  border: 1px solid var(--border-color);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.875rem;
}

button.back-link {
  border: 1px solid var(--border-color);
  background: transparent;
}

.back-link:hover {
  background: var(--bg-tertiary);
  border-color: var(--primary-color);
  color: var(--primary-color);
  box-shadow: none;
}

/* ===== CARDS BOOTSTRAP COMPATIBILITY ===== */
.card {
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  margin-bottom: 1.5rem;
}

.card-body {
  padding: 1.5rem;
}

.card-header {
  background: var(--card-bg);
  border-bottom: 1px solid var(--border-color);
  padding: 1.25rem 1.5rem;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  font-weight: 600;
}

/* Les styles de btn-modern et back-link dans les headers sont maintenant gérés par les règles ci-dessus */

/* ===== CARDS ===== */
.card-box {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  padding: 30px;
  margin-bottom: 30px;
  color: var(--text-primary);
}

/* Pages avec tableau : pas de cadre (tableau direct sur le fond de la page) */
main:has(.table-section) {
  background: transparent !important;
}

.table-section,
.table-section-inner {
  background: transparent !important;
}
/* Pleine largeur : le bloc tableau occupe toute la largeur disponible, petit padding horizontal */
.table-section {
  width: 100%;
  padding: 0 1rem;
  box-sizing: border-box;
}
.table-section .card-box,
.card-box:has(.table-container) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}

/* Pleine largeur pour les listes à tableau : plus de rétrécissement (fit-content) */
.table-section .table-section-inner {
  width: 100%;
  max-width: 100%;
}

/* Variante « carte » pour table-section (fond, bordure, ombre) */
.table-section--card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow-md);
}

/* Toolbar standard : recherche à gauche, boutons (Filtre avancé, Personnaliser) à droite */
.table-section .table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.info-box {
  background: var(--card-bg);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--card-border);
  color: var(--text-primary);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Liseré en haut de chaque info-box */
.info-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}

.info-box:hover {
  box-shadow: var(--shadow-lg);
}

/* Messages conversation (tickets support — admin & espace client) */
.msg-block {
  padding: 14px 18px;
  border-radius: var(--border-radius);
  margin-bottom: 12px;
}
.msg-block .msg-meta {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.msg-block.msg-user {
  background: var(--bg-secondary);
  border-left: 4px solid var(--primary-color);
}
.msg-block.msg-support {
  background: rgba(102, 126, 234, 0.1);
  border-left: 4px solid var(--primary-color);
}

/* Prévisualisation capture d’écran (rapports bug, etc.) */
.screenshot-preview {
  max-width: 100%;
  max-height: 400px;
  border-radius: var(--border-radius);
}

/* ===== CARDS AVEC LISERÉ - STYLE CENTRALISÉ ===== */
/* Classe de base réutilisable pour toutes les cards avec liseré */
.card-accent,
.info-box,
.card.info-box-style,
.card.card-with-border,
.page-container .card:not(.no-accent-border) {
  position: relative;
  overflow: hidden;
}

/* Liseré horizontal en haut de chaque carte - EXCLURE les cards avec .no-accent-border */
.card-accent::before,
.info-box::before,
.card.info-box-style::before,
.card.card-with-border::before,
.page-container .card:not(.no-accent-border)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  z-index: 1;
}

/* Liseré vertical à gauche du titre */
.card-accent h2,
.card-accent h3,
.card-accent h4,
.info-box h2,
.info-box h3,
.card.info-box-style .card-header h2,
.card.info-box-style .card-header h3,
.card.card-with-border .card-header h2,
.card.card-with-border .card-header h3,
.card.card-with-border .card-header h4,
.page-container .card .card-header h2,
.page-container .card .card-header h3,
.page-container .card .card-header h4,
.page-container .card .card-header h5,
.page-container .card .card-header h6 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 1.5rem 0;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
}

/* Barre verticale avant le titre */
.card-accent h2::before,
.card-accent h3::before,
.card-accent h4::before,
.info-box h2::before,
.info-box h3::before,
.card.info-box-style .card-header h2::before,
.card.info-box-style .card-header h3::before,
.card.card-with-border .card-header h2::before,
.card.card-with-border .card-header h3::before,
.card.card-with-border .card-header h4::before,
.page-container .card .card-header h2::before,
.page-container .card .card-header h3::before,
.page-container .card .card-header h4::before,
.page-container .card .card-header h5::before,
.page-container .card .card-header h6::before {
  content: '';
  width: 4px;
  height: 20px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  border-radius: 2px;
  flex-shrink: 0;
}

/* Correction du margin pour les titres dans les card-header */
.card.info-box-style .card-header h2,
.card.info-box-style .card-header h3,
.card.card-with-border .card-header h2,
.card.card-with-border .card-header h3,
.card.card-with-border .card-header h4,
.page-container .card .card-header h2,
.page-container .card .card-header h3,
.page-container .card .card-header h4,
.page-container .card .card-header h5,
.page-container .card .card-header h6 {
  margin: 0;
}

/* .page-container .card hérite maintenant du style centralisé .card-accent ci-dessus */

/* Classe générique .card-with-accent - hérite du style centralisé */
.card-with-accent {
  border: 1px solid var(--border-color, #e5e7eb);
}

.card-with-accent > * {
  position: relative;
  z-index: 1;
}

/* Style pour les card-header dans les cartes avec accent */
.card-with-accent .card-header {
  background: transparent;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
  border-radius: 0;
  padding: 1.25rem 1.5rem;
}

/* Style pour le card-body */
.card-with-accent .card-body {
  padding: 1.5rem;
  background: var(--card-bg);
}

.summary-card {
  background: var(--card-bg);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-color);
  text-align: center;
}

.summary-card.info {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
}

/* ===== TABLEAUX STANDARDS (STYLE MODERNE) ===== */
/* Par défaut : pas de cadre autour du tableau (fond transparent, pas de bordure ni ombre) */
.table-container {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow-x: auto;
  overflow-y: visible;
  width: 100%;
  max-width: 100%;
  position: relative;
  min-height: 400px;
}

/* Option : ajouter la classe .table-container-framed pour un cadre type carte (bordure + ombre) */
.table-container.table-container-framed {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  padding: 15px !important;
}

.table-container.hidden {
  display: none;
}

/* Sans cadre : tableau et lignes transparents pour être "direct sur la page" */
.table-container:not(.table-container-framed) table {
  background: transparent;
}

table {
  width: 100%;
  max-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 0;
  overflow: visible;
  background: var(--card-bg);
  color: var(--text-primary);
  table-layout: auto;
}

/* En-têtes de tableaux — fond teinté, couleur primaire */
thead {
  background: rgba(102, 126, 234, 0.04) !important;
  color: var(--primary-dark, #29295e) !important;
}

thead th,
table thead th,
.table thead th,
.dataTable thead th,
.display thead th {
  background: rgba(102, 126, 234, 0.04) !important;
  color: var(--primary-dark, #29295e) !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 2px solid var(--primary-color, #667eea) !important;
  border-top: none !important;
  padding: 12px 10px;
  text-align: left;
  font-size: 0.7rem;
  user-select: none;
  transition: background-color 0.15s ease;
  opacity: 0.85;
}

thead th i,
table thead th i,
.table thead th i {
  color: var(--primary-color, #667eea) !important;
  opacity: 1;
}

/* ===== DENSITÉ AUTOMATIQUE DES TABLEAUX (selon nombre de colonnes) ===== */
/* Tous les tableaux : écriture compacte par défaut */
.table thead th,
.table tbody td,
.dataTable thead th,
.dataTable tbody td {
  padding: 10px 10px;
  font-size: 0.8rem;
  line-height: 1.35;
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Normal: 1-5 colonnes */
.table thead th,
.table tbody td {
  font-size: 0.8rem;
  padding: 10px 10px;
}

/* Compact: 6-8 colonnes */
.table.table-density-compact thead th,
.table.table-density-compact tbody td {
  padding: 6px 4px;
  font-size: 0.65rem;
  max-width: 180px;
  line-height: 1.2;
}

/* Dense: 9+ colonnes */
.table.table-density-dense thead th,
.table.table-density-dense tbody td {
  padding: 5px 3px;
  font-size: 0.6rem;
  line-height: 1.2;
  max-width: 140px;
}

/* Colonnes spécifiques qui peuvent être plus larges */
.table td.col-description,
.table td.col-titre,
.table td.col-notes,
.table td.col-commentaire,
.themed-table td.col-commentaire,
.themed-table td.col-commentaire-push {
  max-width: 300px;
}

.table.table-density-compact td.col-description,
.table.table-density-compact td.col-titre,
.table.table-density-compact td.col-notes,
.table.table-density-compact td.col-commentaire,
.themed-table.table-density-compact td.col-commentaire,
.themed-table.table-density-compact td.col-commentaire-push {
  max-width: 220px;
}

.table.table-density-dense td.col-description,
.table.table-density-dense td.col-titre,
.table.table-density-dense td.col-notes,
.table.table-density-dense td.col-commentaire,
.themed-table.table-density-dense td.col-commentaire,
.themed-table.table-density-dense td.col-commentaire-push {
  max-width: 180px;
}

/* Éviter que la cellule commentaire s'étire et reste lisible */
.themed-table td.col-commentaire .commentaire-note-cell,
.themed-table td.col-commentaire-push .commentaire-note-cell {
  min-width: 0;
  overflow: hidden;
}
.themed-table td.col-commentaire .note-edit-link,
.themed-table td.col-commentaire-push .note-edit-link {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
  /* Limiter l'affichage à 2 lignes : cliquer pour voir le contenu entier / éditer */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* Colonnes étroites (statut, date, etc.) */
.table td.col-statut,
.table td.col-cv_statut,
.table td.col-besoin_statut,
.table td.col-date,
.table td.col-date_entree,
.table td.col-date_creation,
.table th.col-statut,
.table th.col-cv_statut,
.table th.col-besoin_statut,
.table th.col-date,
.table th.col-date_entree,
.table th.col-date_creation {
  max-width: 120px;
}

/* Business Unit : éviter que la colonne soit trop étroite (contenu court en .pill) */
.table td.col-business_unit,
.table th.col-business_unit {
  min-width: 110px;
  max-width: 200px;
}
.table.table-density-compact td.col-business_unit,
.table.table-density-compact th.col-business_unit {
  min-width: 100px;
  max-width: 180px;
}
.table.table-density-dense td.col-business_unit,
.table.table-density-dense th.col-business_unit {
  min-width: 90px;
  max-width: 160px;
}

.table.table-density-compact td.col-statut,
.table.table-density-compact td.col-cv_statut,
.table.table-density-compact td.col-date,
.table.table-density-compact td.col-date_entree,
.table.table-density-compact th.col-statut,
.table.table-density-compact th.col-date {
  max-width: 100px;
}

.table.table-density-dense td.col-statut,
.table.table-density-dense td.col-cv_statut,
.table.table-density-dense td.col-date,
.table.table-density-dense td.col-date_entree,
.table.table-density-dense th.col-statut,
.table.table-density-dense th.col-date {
  max-width: 85px;
}

/* Colonnes de progression : permettre plus de largeur */
.table td.col-progression,
.table td.statut-cell {
  max-width: 280px;
  white-space: normal;
}

.table.table-density-compact td.col-progression,
.table.table-density-compact td.statut-cell {
  max-width: 220px;
}

.table.table-density-dense td.col-progression,
.table.table-density-dense td.statut-cell {
  max-width: 180px;
}

/* Colonnes d'actions : toujours sans ellipsis */
.table td.col-actions,
.table td.col-detail_matching,
.table th.col-actions,
.table th.col-detail_matching {
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  max-width: none;
}

/* Pour les badges dans les tableaux */
.table .badge {
  font-size: 0.6rem;
  padding: 0.2rem 0.35rem;
}

.table.table-density-dense .badge {
  font-size: 0.55rem;
  padding: 0.15rem 0.3rem;
}

.table.table-density-compact .badge {
  font-size: 0.58rem;
  padding: 0.18rem 0.35rem;
}

/* Boutons dans tableaux */
.table .btn-sm,
.table .btn {
  padding: 4px 8px !important;
  font-size: 0.65rem !important;
}

.table.table-density-dense .btn-sm,
.table.table-density-dense .btn {
  padding: 2px 5px !important;
  font-size: 0.58rem !important;
}

.table.table-density-compact .btn-sm,
.table.table-density-compact .btn {
  padding: 3px 6px !important;
  font-size: 0.62rem !important;
}

/* Barres de progression dans les tableaux */
.table .progress-text {
  font-size: 0.65rem !important;
}

.table.table-density-dense .progress-text {
  font-size: 0.55rem !important;
}

.table.table-density-compact .progress-text {
  font-size: 0.6rem !important;
}

/* Scroll horizontal pour les tableaux larges */
.table-responsive,
#matchingTableView,
#tableView,
.table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

/* Forcer la table à toujours prendre 100% de la largeur du conteneur (pleine largeur) */
.table-responsive > table,
#matchingTableView > table,
#tableView > table,
.table-container > table {
  width: 100%;
  min-width: 100%;
}

/* ===== PIN COLONNES (punaise) — colonnes épinglées au scroll horizontal ===== */
.col-pin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  margin-left: 2px;
  margin-right: 2px;
  border: none;
  background: transparent;
  color: var(--text-secondary, #6c757d);
  border-radius: 3px;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
  vertical-align: middle;
}
.col-pin-btn:hover {
  color: var(--primary-color, #0d6efd);
  background: rgba(0, 0, 0, 0.05);
}
.col-pin-btn--pinned {
  color: var(--primary-color, #0d6efd);
}
.col-pin-btn--pinned i {
  transform: rotate(-45deg);
}
.col-pin-btn--pinned:hover {
  color: var(--primary-color, #0d6efd);
  background: rgba(0, 0, 0, 0.06);
}
.col-pin-btn i {
  font-size: 0.65rem;
  display: inline-block;
  transition: transform 0.15s;
}

/* En-têtes de tableau sticky au scroll vertical (reste visibles quand on scrolle) */
.table-container thead tr:first-child th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(102, 126, 234, 0.05);
  box-shadow: 0 2px 0 0 var(--primary-color, #667eea);
}
/* Deuxième ligne thead (filtres) : top défini en JS pour coller sous la première ligne */
.table-container thead tr:nth-child(2) th {
  position: sticky;
  z-index: 2;
  background: var(--bg-secondary, #f7f8fb);
  box-shadow: 0 1px 0 0 var(--border-color, #e5e7eb);
}

/* Colonnes épinglées : position sticky (left et top pour en-têtes définis en JS) */
.table-container th.col-pinned,
.table-container td.col-pinned {
  position: sticky !important;
  background: var(--card-bg, #fff) !important;
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.08);
}
.table-container th.col-pinned {
  z-index: 4 !important;
}
.table-container td.col-pinned {
  z-index: 1 !important;
}

/* Pour les tableaux denses, forcer une largeur minimale */
.table-responsive > table.table-density-dense,
#matchingTableView > table.table-density-dense,
#tableView > table.table-density-dense {
  min-width: 1400px;
}

.table-responsive > table.table-density-compact,
#matchingTableView > table.table-density-compact,
#tableView > table.table-density-compact {
  min-width: 1200px;
}

/* Empêcher le wrapping des cellules */
.table thead th,
.table tbody td {
  white-space: nowrap;
}

/* Permettre le wrapping seulement pour certaines colonnes */
.table td.col-progression,
.table td.statut-cell,
.table td.col-description,
.table td.col-notes {
  white-space: normal;
}

/* Barre de scroll personnalisée (webkit) */
.table-responsive::-webkit-scrollbar,
#matchingTableView::-webkit-scrollbar,
#tableView::-webkit-scrollbar,
.table-container::-webkit-scrollbar {
  height: 8px;
}

.table-responsive::-webkit-scrollbar-track,
#matchingTableView::-webkit-scrollbar-track,
#tableView::-webkit-scrollbar-track,
.table-container::-webkit-scrollbar-track {
  background: var(--bg-secondary, #f1f3f5);
  border-radius: 6px;
}

.table-responsive::-webkit-scrollbar-thumb,
#matchingTableView::-webkit-scrollbar-thumb,
#tableView::-webkit-scrollbar-thumb,
.table-container::-webkit-scrollbar-thumb {
  background: var(--border-color, #cbd5e0);
  border-radius: 6px;
}

.table-responsive::-webkit-scrollbar-thumb:hover,
#matchingTableView::-webkit-scrollbar-thumb:hover,
#tableView::-webkit-scrollbar-thumb:hover,
.table-container::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary, #64748b);
}

/* Tooltip natif pour cellules tronquées */
.table tbody td[title] {
  cursor: help;
}

/* Hover sur cellules tronquées */
.table tbody td:hover {
  position: relative;
  z-index: 1;
}

th:first-child {
  border-top-left-radius: 12px;
}

th:last-child {
  border-top-right-radius: 12px;
}

th:hover {
  background: rgba(102, 126, 234, 0.1) !important;
}

tbody tr {
  background: var(--card-bg);
  transition: background-color 0.12s ease, box-shadow 0.12s ease;
}

.table-container:not(.table-container-framed) tbody tr {
  background: transparent;
}

tbody tr:nth-child(even) {
  background: rgba(102, 126, 234, 0.03);
}

.table-container:not(.table-container-framed) tbody tr:nth-child(even) {
  background: rgba(102, 126, 234, 0.025);
}

tbody tr:hover {
  background: rgba(102, 126, 234, 0.07);
  box-shadow: inset 3px 0 0 var(--primary-color, #667eea);
}

.table-container:not(.table-container-framed) tbody tr:hover {
  background: rgba(102, 126, 234, 0.07);
  box-shadow: inset 3px 0 0 var(--primary-color, #667eea);
}

td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.875rem;
  transition: background-color 0.15s ease;
  vertical-align: middle;
  color: var(--text-primary);
  background-color: inherit;
  border: none !important;
  border-bottom: 1px solid var(--border-color) !important;
}

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

tbody tr:last-child td:first-child {
  border-bottom-left-radius: 12px;
}

tbody tr:last-child td:last-child {
  border-bottom-right-radius: 12px;
}

/* DataTables / display : aligné sur le style centralisé (même rendu que listeCv, InfiniteScrollTable) */
table.dataTable,
table.display {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: none !important;
}

table.dataTable thead th,
table.display thead th {
  background: rgba(102, 126, 234, 0.04) !important;
  color: var(--primary-dark, #29295e) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  border: none !important;
  border-bottom: 2px solid var(--primary-color, #667eea) !important;
  border-top: none !important;
  padding: 12px 10px !important;
  font-size: 0.7rem !important;
  text-align: left !important;
}

table.dataTable tbody tr,
table.display tbody tr {
  background-color: var(--card-bg) !important;
}

.table-container:not(.table-container-framed) table.dataTable tbody tr,
.table-container:not(.table-container-framed) table.display tbody tr {
  background-color: transparent !important;
}

table.dataTable tbody tr:nth-child(even),
table.display tbody tr:nth-child(even) {
  background-color: transparent !important;
}

.table-container:not(.table-container-framed) table.dataTable tbody tr:nth-child(even),
.table-container:not(.table-container-framed) table.display tbody tr:nth-child(even) {
  background-color: transparent !important;
}

table.dataTable tbody tr:hover,
table.display tbody tr:hover {
  background-color: var(--bg-tertiary) !important;
}

.table-container:not(.table-container-framed) table.dataTable tbody tr:hover,
.table-container:not(.table-container-framed) table.display tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.04) !important;
}

table.dataTable tbody td,
table.display tbody td {
  border: none !important;
  border-bottom: 1px solid var(--border-color) !important;
  padding: 10px 10px !important;
  font-size: 0.8rem !important;
  line-height: 1.35 !important;
  color: var(--text-primary) !important;
  background-color: inherit !important;
}

/* Filter header dans DataTables */
table.dataTable .filter-header th,
table.display .filter-header th {
  background-color: var(--bg-tertiary, #e9ecef) !important;
  border: none !important;
  border-bottom: 1px solid var(--border-color) !important;
  padding: 10px 10px !important;
}

table.dataTable .filter-header th select,
table.display .filter-header th select {
  background-color: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--text-primary) !important;
  width: 100% !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
}

/* ===== COMPOSANTS SPÉCIFIQUES ===== */

/* View toggle buttons */
.view-toggle {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  justify-content: center;
}

.view-btn {
  padding: 10px 20px;
  border: 2px solid var(--primary-color);
  background: var(--card-bg);
  color: var(--primary-color);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.view-btn.active,
.view-btn:hover {
  background: var(--primary-color);
  color: #fff;
}

/* Les boutons .view-btn dans le header ont un style différent (glassmorphism) - défini plus haut dans .header-buttons */

/* Status select (sauf pill modifiable .pill-select qui a son propre style) */
.status-select:not(.pill-select) {
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: 0.9rem;
  min-width: 120px;
  max-width: 200px;
}

.status-select:focus {
  border-color: var(--primary-color);
  outline: none;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

/* Variante compacte pour les tableaux (menus déroulants d'activité CV, etc.) */
.status-select-sm {
  padding: 4px 8px;
  font-size: 0.85rem;
}

/* ===== Pill modifiable (colonne Statut des matchings) =====
   Même forme que les pills non modifiables (.pill) : border-radius 12px, style pastel.
   Style par défaut = pill neutre (couleur comme le fond), comme .pill--neutral.
   Le JS applique ensuite la couleur du statut choisi en pastel (inline style). */
.pill-select,
.status-pill-editable,
.form-select.pill-select,
select.pill-select {
  display: inline-block;
  padding: 2px 20px 2px 8px;
  border-radius: 12px !important;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  height: auto !important;
  min-height: 0 !important;
  white-space: nowrap;
  min-width: 80px;
  max-width: 200px;
  border: 1px solid rgba(108, 117, 125, 0.35) !important;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  /* Par défaut : même style que .pill--neutral (fond discret, texte gris, pas noir) */
  background-color: rgba(108, 117, 125, 0.2);
  color: #495057;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='currentColor' d='M6 8L2 4h8z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat;
  background-position: right 6px center;
}

.pill-select:focus,
.status-pill-editable:focus,
.form-select.pill-select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.25);
}

/* Dans les tableaux : même forme et taille que .themed-table .pill */
.table .pill-select,
.table .status-pill-editable,
.themed-table .pill-select,
.themed-table .status-pill-editable,
.table .form-select.pill-select,
.themed-table .form-select.pill-select {
  font-size: inherit !important;
  padding: 2px 18px 2px 6px !important;
  line-height: inherit;
}

.saving-indicator {
  margin-left: 8px;
  color: var(--warning-color);
  font-size: 0.9rem;
}

/* Map container */
.map-container {
  height: 600px;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: none;
  position: relative;
}

.map-container.active {
  display: block;
}

.map-container #map {
  height: calc(100% - 80px);
  width: 100%;
  border-radius: var(--border-radius);
  overflow: hidden;
}

.map-container .map-filters {
  position: relative;
  z-index: 1000;
  margin-bottom: 16px;
}

.map-filter-select {
  transition: all 0.2s ease;
}

.map-filter-select:focus {
  outline: none;
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2) !important;
}

#map {
  height: 100%;
  width: 100%;
}

/* Map popup */
.map-popup {
  max-width: 300px;
}

.map-popup h3 {
  margin: 0 0 10px 0;
  color: var(--primary-color);
  font-size: 1.1rem;
}

.map-popup p {
  margin: 5px 0;
  font-size: 0.9rem;
}

.map-popup .status-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 500;
  margin-top: 8px;
}

.status-candidat {
  background: #e3f2fd;
  color: #1565c0;
}

.status-profil {
  background: #f3e5f5;
  color: #7b1fa2;
}

.status-ic {
  background: #e8f5e9;
  color: #2e7d32;
}

/* ===== BOUTONS ===== */
.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.btn-sm {
  padding: 6px 14px;
  font-size: 13px;
  line-height: 1.4;
}

.btn-primary {
  background-color: var(--primary-color) !important;
  color: white !important;
  border: 1px solid var(--primary-color) !important;
  font-weight: 500;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--secondary-color) !important;
  border-color: var(--secondary-color) !important;
  box-shadow: var(--shadow-sm);
  color: white !important;
}

.btn-secondary {
  background-color: white !important;
  color: var(--primary-color) !important;
  border: 1px solid var(--primary-color) !important;
}

.btn-secondary:hover {
  background-color: var(--primary-color) !important;
  color: white !important;
  border-color: var(--primary-color) !important;
}

.btn-outline-primary {
  color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  background: transparent !important;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-outline-primary:hover {
  background: var(--primary-color) !important;
  color: white !important;
  box-shadow: var(--shadow-md);
  border-color: var(--primary-color) !important;
}

.btn-outline-secondary {
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
  background: transparent !important;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border-color: var(--primary-color) !important;
  box-shadow: var(--shadow-md);
}

/* Styles pour les boutons d'action des tableaux */
#tableActionButtons {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

#tableActionButtons .btn {
  padding: 6px 14px !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

/* Styles pour les boutons de vue et de filtre (Vue Liste, Vue Carte, Mon périmètre, etc.) */
.view-toggle {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  justify-content: center;
}

.view-btn {
  padding: 10px 20px;
  border: 2px solid var(--primary-color);
  background: white;
  color: var(--primary-color);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.view-btn:hover {
  background: var(--primary-color);
  color: white;
}

.view-btn.active {
  background: var(--primary-color);
  color: white;
}

.view-btn i {
  font-size: 1rem;
}

/* ===== BOUTONS D'EDITION / SUPPRESSION (ronds, style central) ===== */

/* Bouton rond édition - même design que btn-delete-icon */
.btn-edit-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--primary-color, #4361ee);
  color: var(--primary-color, #4361ee);
  background: transparent;
  border-radius: 50%;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn-edit-icon:hover {
  background: rgba(67, 97, 238, 0.08);
  border-color: var(--primary-color, #3b5bdb);
  color: var(--primary-color, #3b5bdb);
  box-shadow: 0 2px 4px rgba(67, 97, 238, 0.2);
}

.btn-edit-icon i {
  margin: 0;
}

/* ===== BOUTONS DE SUPPRESSION ===== */

/* Style 1: Bouton rond avec icône uniquement (comme dans alerts_modal.html) */
.btn-delete-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #f87171;
  color: #f43f5e;
  background: transparent;
  border-radius: 50%;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn-delete-icon:hover {
  background: rgba(244, 63, 94, 0.08);
  border-color: #ef4444;
  color: #dc2626;
  box-shadow: 0 2px 4px rgba(244, 63, 94, 0.2);
}

.btn-delete-icon i {
  margin: 0;
}

/* Style 2: Bouton rectangulaire élégant avec icône et texte "Supprimer" */
.btn-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid #ef4444;
  color: #ef4444;
  background: transparent;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn-delete:hover {
  background: #ef4444;
  color: white;
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

.btn-delete i {
  margin: 0;
  font-size: 0.875rem;
}

/* ===== BOUTONS DE SUPPRESSION CRITIQUE (avec protection par nombre aléatoire) ===== */

/* Style 1: Bouton rond critique avec icône uniquement */
.btn-delete-critical-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dc2626;
  color: #dc2626;
  background: transparent;
  border-radius: 50%;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  position: relative;
}

.btn-delete-critical-icon::before {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  background: #dc2626;
  border-radius: 50%;
  animation: pulse-critical 2s infinite;
}

.btn-delete-critical-icon:hover {
  background: rgba(220, 38, 38, 0.08);
  border-color: #b91c1c;
  color: #b91c1c;
  box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);
}

.btn-delete-critical-icon i {
  margin: 0;
}

/* Style 2: Bouton rectangulaire critique avec icône et texte */
.btn-delete-critical {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid #dc2626;
  color: #dc2626;
  background: transparent;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  position: relative;
}

.btn-delete-critical::before {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  background: #dc2626;
  border-radius: 50%;
  animation: pulse-critical 2s infinite;
}

@keyframes pulse-critical {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.2);
  }
}

.btn-delete-critical:hover {
  background: #dc2626;
  color: white;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.4);
}

.btn-delete-critical i {
  margin: 0;
  font-size: 0.875rem;
}

/* Boutons verts hors tableaux - Style centralisé avec #10b981 */
.btn-success {
  background-color: transparent !important;
  color: #10b981 !important;
  border: 2px solid #10b981 !important;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-success:hover,
.btn-success:focus {
  background-color: #10b981 !important;
  color: #ffffff !important;
  border-color: #10b981 !important;
}

/* Boutons pastel uniquement dans les tableaux */
table .btn-success,
.table .btn-success,
.dataTable .btn-success,
.display .btn-success,
table tbody .btn-success,
.table tbody .btn-success,
.action-buttons .btn-success {
  background-color: #d4edda !important;
  color: #155724 !important;
  border: 1px solid rgba(21, 87, 36, 0.2) !important;
  font-weight: 500;
  transition: all 0.2s;
}

table .btn-success:hover,
.table .btn-success:hover,
.dataTable .btn-success:hover,
.display .btn-success:hover,
table tbody .btn-success:hover,
.table tbody .btn-success:hover,
.action-buttons .btn-success:hover,
table .btn-success:focus,
.table .btn-success:focus,
.dataTable .btn-success:focus,
.display .btn-success:focus,
table tbody .btn-success:focus,
.table tbody .btn-success:focus,
.action-buttons .btn-success:focus {
  background-color: #c3e6cb !important;
  color: #155724 !important;
  border-color: rgba(21, 87, 36, 0.3) !important;
}

/* Boutons warning pastel dans les tableaux */
table .btn-warning,
.table .btn-warning,
.dataTable .btn-warning,
.display .btn-warning,
table tbody .btn-warning,
.table tbody .btn-warning,
.action-buttons .btn-warning {
  background-color: #fff3cd !important;
  color: #8a6d3b !important;
  border: 1px solid rgba(138, 109, 59, 0.2) !important;
  font-weight: 500;
  transition: all 0.2s;
}

table .btn-warning:hover,
.table .btn-warning:hover,
.dataTable .btn-warning:hover,
.display .btn-warning:hover,
table tbody .btn-warning:hover,
.table tbody .btn-warning:hover,
.action-buttons .btn-warning:hover,
table .btn-warning:focus,
.table .btn-warning:focus,
.dataTable .btn-warning:focus,
.display .btn-warning:focus,
table tbody .btn-warning:focus,
.table tbody .btn-warning:focus,
.action-buttons .btn-warning:focus {
  background-color: #ffe69c !important;
  color: #8a6d3b !important;
  border-color: rgba(138, 109, 59, 0.3) !important;
}

table .btn-warning:disabled,
.table .btn-warning:disabled,
.dataTable .btn-warning:disabled,
.display .btn-warning:disabled,
table tbody .btn-warning:disabled,
.table tbody .btn-warning:disabled,
.action-buttons .btn-warning:disabled {
  background-color: #9ca3af !important;
  color: #ffffff !important;
  border-color: #9ca3af !important;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Boutons warning hors tableaux */
.btn-warning {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
  font-weight: 500;
  transition: all 0.2s;
}

.btn-warning:hover {
  background: var(--secondary-color);
  border-color: var(--secondary-color);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  color: white;
}

.btn-warning:disabled {
  background: #9ca3af;
  border-color: #9ca3af;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  color: white;
}

.btn-warning:disabled:hover {
  background: #9ca3af;
  transform: none;
  box-shadow: none;
  color: white;
}

/* Bouton danger (rouge) - style aligné sur .btn-delete-icon : contour + texte rouge, fond transparent ; au survol fond rouge léger */
.btn-danger {
  background-color: transparent !important;
  color: #f43f5e !important;
  border: 2px solid #f87171 !important;
  font-weight: 500;
  transition: all 0.2s ease;
  border-radius: 8px;
}

.btn-danger:hover,
.btn-danger:focus {
  background-color: rgba(244, 63, 94, 0.08) !important;
  border-color: #ef4444 !important;
  color: #dc2626 !important;
  box-shadow: 0 2px 4px rgba(244, 63, 94, 0.2);
}

.btn-danger:disabled {
  background-color: transparent !important;
  border-color: #9ca3af !important;
  color: #9ca3af !important;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  opacity: 0.6;
}

/* Bouton danger pastel dans les tableaux - même palette rouge moderne */
table .btn-danger,
.table .btn-danger,
.dataTable .btn-danger,
.display .btn-danger,
table tbody .btn-danger,
.table tbody .btn-danger,
.action-buttons .btn-danger,
.step-recording-controls .btn-danger {
  background-color: rgba(244, 63, 94, 0.08) !important;
  color: #f43f5e !important;
  border: 1px solid rgba(248, 113, 113, 0.5) !important;
}

table .btn-danger:hover,
.table .btn-danger:hover,
.dataTable .btn-danger:hover,
.display .btn-danger:hover,
table tbody .btn-danger:hover,
.table tbody .btn-danger:hover,
.action-buttons .btn-danger:hover,
.step-recording-controls .btn-danger:hover {
  background-color: rgba(244, 63, 94, 0.15) !important;
  color: #dc2626 !important;
  border-color: rgba(239, 68, 68, 0.6) !important;
}

/* Outline danger/success dans tableaux : même rendu pastel que .btn-danger / .btn-success (Bootstrap outline sinon bleu/vert hors charte) */
table .btn-outline-danger,
.table .btn-outline-danger,
table tbody .btn-outline-danger,
.table tbody .btn-outline-danger {
  background-color: rgba(244, 63, 94, 0.08) !important;
  color: #f43f5e !important;
  border: 1px solid rgba(248, 113, 113, 0.5) !important;
}
table .btn-outline-danger:hover,
.table .btn-outline-danger:hover,
table tbody .btn-outline-danger:hover,
.table tbody .btn-outline-danger:hover {
  background-color: rgba(244, 63, 94, 0.15) !important;
  color: #dc2626 !important;
  border-color: rgba(239, 68, 68, 0.6) !important;
}
table .btn-outline-success,
.table .btn-outline-success,
table tbody .btn-outline-success,
.table tbody .btn-outline-success {
  background-color: #d4edda !important;
  color: #155724 !important;
  border: 1px solid rgba(21, 87, 36, 0.2) !important;
}
table .btn-outline-success:hover,
.table .btn-outline-success:hover,
table tbody .btn-outline-success:hover,
.table tbody .btn-outline-success:hover {
  background-color: #c3e6cb !important;
  color: #155724 !important;
  border-color: rgba(21, 87, 36, 0.3) !important;
}

/* Liens dans les cellules (mailto, etc.) — couleur primaire charte, pas bleu Bootstrap */
/* Exclure .table-action-btn / .btn-matching : ce sont des <a> stylés comme boutons (sinon texte bleu sur fond vert). */
table tbody td a:not(.btn):not(.badge):not(.pill):not(.table-action-btn):not(.btn-matching),
.table tbody td a:not(.btn):not(.badge):not(.pill):not(.table-action-btn):not(.btn-matching),
.dataTable tbody td a:not(.btn):not(.badge):not(.pill):not(.table-action-btn):not(.btn-matching) {
  color: var(--primary-color) !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(102, 126, 234, 0.35);
  transition: color 0.15s ease, border-color 0.15s ease;
}
table tbody td a:not(.btn):not(.badge):not(.pill):not(.table-action-btn):not(.btn-matching):hover,
.table tbody td a:not(.btn):not(.badge):not(.pill):not(.table-action-btn):not(.btn-matching):hover,
.dataTable tbody td a:not(.btn):not(.badge):not(.pill):not(.table-action-btn):not(.btn-matching):hover {
  color: var(--secondary-color) !important;
  border-bottom-color: var(--primary-color);
}

/* Style btn-outline-danger supprimé - utiliser btn-delete-icon (rond) à la place */

/* Bouton info */
.btn-info {
  background-color: var(--info-color, #17a2b8) !important;
  color: white !important;
  border: 1px solid var(--info-color, #17a2b8) !important;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-info:hover,
.btn-info:focus {
  background-color: #138496 !important;
  border-color: #138496 !important;
  box-shadow: var(--shadow-md);
  color: white !important;
}

/* Bouton info pastel dans les tableaux */
table .btn-info,
.table .btn-info,
.dataTable .btn-info,
.display .btn-info,
table tbody .btn-info,
.table tbody .btn-info,
.action-buttons .btn-info,
.step-recording-controls .btn-info {
  background-color: rgba(23, 162, 184, 0.2) !important;
  color: rgb(13, 110, 125) !important;
  border-color: rgba(23, 162, 184, 0.3) !important;
}

table .btn-info:hover,
.table .btn-info:hover,
.dataTable .btn-info:hover,
.display .btn-info:hover,
table tbody .btn-info:hover,
.table tbody .btn-info:hover,
.action-buttons .btn-info:hover,
.step-recording-controls .btn-info:hover {
  background-color: rgba(23, 162, 184, 0.3) !important;
  color: rgb(13, 110, 125) !important;
  border-color: rgba(23, 162, 184, 0.4) !important;
}

/* Bouton outline-info */
.btn-outline-info {
  color: var(--info-color, #17a2b8) !important;
  border-color: var(--info-color, #17a2b8) !important;
  background: transparent !important;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-outline-info:hover {
  background: var(--info-color, #17a2b8) !important;
  color: white !important;
  box-shadow: var(--shadow-md);
  border-color: var(--info-color, #17a2b8) !important;
}

/* ===== BOUTONS SPÉCIAUX ===== */

/* Bouton de création/ajout (style outline vert par défaut, fond vert au survol) */
/* Utilise les mêmes couleurs que les notifications success (#10b981) */
.btn-create,
.btn-add {
  background-color: transparent !important;
  color: #10b981 !important;
  border: 2px solid #10b981 !important;
  font-weight: 500;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-create:hover,
.btn-create:focus,
.btn-add:hover,
.btn-add:focus {
  background-color: #10b981 !important;
  color: #ffffff !important;
  border-color: #10b981 !important;
  box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
}

.btn-create:disabled,
.btn-add:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Bouton analyze (pour analyses/comparaisons) */
.btn-analyze {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
  border: none;
  padding: 0.75rem 2rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.btn-analyze:hover {
  box-shadow: var(--shadow-lg);
}

.btn-analyze:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn-analyze-outline {
  background: white;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
  padding: 0.75rem 2rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0 1rem 0;
}

.btn-analyze-outline:hover {
  background: #f7f9ff;
  box-shadow: var(--shadow-lg);
}

/* Floating Action Button (FAB) */
.fab-create,
.fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1050;
  box-shadow: var(--shadow-lg);
  border-radius: 999px;
  padding: 0.85rem 1.1rem;
}

/* ===== STAT CARDS ===== */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  color: white;
  padding: 25px;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-md);
}

.stat-card h3 {
  font-size: 14px;
  opacity: 0.9;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.stat-card .value {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 5px;
}

.stat-card .unit {
  font-size: 14px;
  opacity: 0.8;
}

.stat-card.warning {
  background: linear-gradient(135deg, var(--warning-color) 0%, #e67e22 100%);
}

.stat-card.success {
  background: linear-gradient(135deg, var(--success-color) 0%, #27ae60 100%);
}

/* ===== BADGES ===== */
.badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.badge-success {
  background-color: var(--success-color);
  color: white;
}

.badge-warning {
  background-color: var(--warning-color);
  color: white;
}

.badge-danger {
  background-color: var(--danger-color);
  color: white;
}

/* Pastille compteur (ex: "4 enregistrement(s)", "Sources des CVs 0") - style centralisé */
.badge-pastille {
  background-color: rgba(108, 117, 125, 0.2) !important;
  color: rgb(73, 80, 87) !important;
  border: 1px solid rgba(108, 117, 125, 0.3) !important;
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 12px;
  display: inline-block;
  font-weight: 600;
}

/* ===== PILLS (Style pastel) - Un seul style pour tous les tableaux (BU, Statut, type) ===== */
.pill {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
  display: inline-block;
}

/* Pill gris par défaut (ex. BU sans couleur) */
.pill--default {
  background-color: rgba(149, 165, 166, 0.2) !important;
  color: rgb(109, 125, 126) !important;
  text-transform: uppercase;
}

/* Variantes sémantiques pour statuts / types (couleurs pastel) */
.pill--success {
  background-color: rgba(40, 167, 69, 0.2) !important;
  color: #1e7e34 !important;
  border: 1px solid rgba(40, 167, 69, 0.35);
}
.pill--warning {
  background-color: rgba(255, 193, 7, 0.35) !important;
  color: #856404 !important;
  border: 1px solid rgba(255, 193, 7, 0.5);
}
.pill--info {
  background-color: rgba(23, 162, 184, 0.2) !important;
  color: #0c5460 !important;
  border: 1px solid rgba(23, 162, 184, 0.35);
}
.pill--neutral {
  background-color: rgba(108, 117, 125, 0.2) !important;
  color: #495057 !important;
  border: 1px solid rgba(108, 117, 125, 0.35);
}
.pill--danger {
  background-color: rgba(220, 53, 69, 0.2) !important;
  color: #bd2130 !important;
  border: 1px solid rgba(220, 53, 69, 0.35);
}
/* Accent charte (rôle super-admin, tags IAMI) — pastel lavande */
.pill--accent {
  background-color: rgba(102, 126, 234, 0.2) !important;
  color: var(--primary-dark, #29295e) !important;
  border: 1px solid rgba(102, 126, 234, 0.4);
}
/* Couleur dynamique (API/JS) : utiliser style="--pill-bg: ...; --pill-color: ...;" sur l'élément */
.pill--dynamic {
  background-color: var(--pill-bg, rgba(149, 165, 166, 0.2)) !important;
  color: var(--pill-color, rgb(109, 125, 126)) !important;
}

/* Pills et badges dans les tableaux : même taille que le texte des cellules */
.table .pill,
.table .pill-badge,
.table .clickable-pill,
.themed-table .pill,
.themed-table .pill-badge,
.themed-table .clickable-pill,
table.display .pill,
table.display .pill-badge,
table.display .clickable-pill,
table.dataTable .pill,
table.dataTable .pill-badge,
table.dataTable .clickable-pill {
  font-size: inherit !important;
  padding: 2px 6px;
}

.table.table-density-compact .pill,
.table.table-density-compact .pill-badge,
.table.table-density-compact .clickable-pill,
.themed-table.table-density-compact .pill,
.themed-table.table-density-compact .pill-badge,
.themed-table.table-density-compact .clickable-pill,
table.display.table-density-compact .pill,
table.display.table-density-compact .pill-badge,
table.display.table-density-compact .clickable-pill {
  padding: 1px 5px;
}

.table.table-density-dense .pill,
.table.table-density-dense .pill-badge,
.table.table-density-dense .clickable-pill,
.themed-table.table-density-dense .pill,
.themed-table.table-density-dense .pill-badge,
.themed-table.table-density-dense .clickable-pill,
table.display.table-density-dense .pill,
table.display.table-density-dense .pill-badge,
table.display.table-density-dense .clickable-pill {
  padding: 1px 4px;
}

/* Liste utilisateurs admin client : même alignement pills que les tableaux .table */
.admin-users-table .pill {
  font-size: 0.8rem;
  padding: 3px 10px;
  font-weight: 600;
}

/* Variantes de poids de texte pour les pills (centralisées, utilisables dans tous les tableaux) */
/* Version non-gras / plus légère */
.pill-plain,
.pill.plain,
.pill--plain {
  font-weight: 400;
}

/* Version extra-gras si besoin de mise en avant forte */
.pill-strong,
.pill.strong,
.pill--strong {
  font-weight: 700;
}

/* ===== Table clickable values (links that should look like text) =====
   Use for "values" inside tables that navigate, without the default blue link style.
   Example: <a class="table-value-link" href="...">...</a>
*/
.table-value-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.table-value-link:hover {
  text-decoration: underline;
}
.table-value-link:focus-visible {
  outline: 2px solid rgba(102, 126, 234, 0.45);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ===== Clickable value pill =====
   Use this everywhere you want a clickable value (link/button) to look like a pill,
   without looking like a classic hyperlink.
*/
.clickable-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: inherit;
  font-weight: 500;
  color: #111 !important;
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.08);
  text-decoration: none !important;
  cursor: pointer;
  white-space: nowrap;
}
.clickable-pill:hover {
  background: rgba(0, 0, 0, 0.10);
  border-color: rgba(0, 0, 0, 0.14);
  text-decoration: none !important;
}
.clickable-pill:focus-visible {
  outline: 2px solid rgba(102, 126, 234, 0.50);
  outline-offset: 2px;
}

/* Variants (optional) */
.clickable-pill.neutral {
  background: rgba(108, 117, 125, 0.12);
  border-color: rgba(108, 117, 125, 0.22);
}
.clickable-pill.neutral:hover {
  background: rgba(108, 117, 125, 0.18);
  border-color: rgba(108, 117, 125, 0.35);
}

/* Lien d'édition de note (\"Ajouter une note\" dans les tableaux) */
.note-edit-link {
  cursor: pointer;
  color: var(--primary-color);
  white-space: pre-wrap;
  word-wrap: break-word;
  display: block;
  max-width: 400px;
}
.note-edit-link:hover {
  text-decoration: underline;
}

/* Option E in dark theme: lighter tag background but keep text black as requested */
[data-theme="dark"] .clickable-pill,
body.dark-theme .clickable-pill {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.16);
  color: #111 !important;
}
[data-theme="dark"] .clickable-pill:hover,
body.dark-theme .clickable-pill:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.22);
}

/* ===== Boutons d'action dans les tableaux (pill coloré, ex. Action listeBesoinAPourvoir) ===== */
.table-action-btn,
.btn-matching {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}
.btn-matching i {
  margin-right: 8px;
  font-size: 0.9rem;
}
.table-action-btn.btn-success,
.btn-matching.btn-success {
  background: #d4edda !important;
  color: #155724 !important;
  border: 1px solid rgba(21, 87, 36, 0.2);
  box-shadow: 0 2px 8px rgba(21, 87, 36, 0.1);
}
.table-action-btn.btn-success:hover,
.btn-matching.btn-success:hover {
  background: #c3e6cb !important;
  color: #155724 !important;
  border-color: rgba(21, 87, 36, 0.3);
  box-shadow: 0 4px 12px rgba(21, 87, 36, 0.15);
}
.table-action-btn.btn-success:active,
.btn-matching.btn-success:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(21, 87, 36, 0.1);
}
.btn-matching.btn-view {
  background: #d1ecf1 !important;
  color: #0c5460 !important;
  border: 1px solid rgba(12, 84, 96, 0.2);
  box-shadow: 0 2px 8px rgba(12, 84, 96, 0.1);
}
.btn-matching.btn-view:hover {
  background: #bee5eb !important;
  color: #0c5460 !important;
  border-color: rgba(12, 84, 96, 0.3);
  box-shadow: 0 4px 12px rgba(12, 84, 96, 0.15);
}

/* ===== Barres de progression dans les tableaux (style Progression Matching listeBesoins) ===== */
.progress-container {
  width: 100%;
  background-color: var(--bg-tertiary, #e9ecef);
  border: 1px solid var(--border-color, #dee2e6);
  border-radius: 5px;
  height: 8px;
  margin-bottom: 8px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.progress-container .progress-bar {
  height: 100%;
  border-radius: 4px;
  border: none;
  transition: width 0.3s ease;
}
/* Cellule avec barre de progression : texte x/x au centre de la cellule au survol */
.table td:has(.progress-container),
.table td:has(.matching-progress-container) {
  position: relative;
}
.table td:has(.matching-progress-container) .matching-progress-text,
.table td:has(.progress-container) .progress-label {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary, #29295e);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  pointer-events: none;
}
/* Au survol de la ligne : afficher x/x au centre de la cellule progression */
.table tbody tr:hover .matching-progress-text,
.table tbody tr:hover .progress-label {
  opacity: 1;
  visibility: visible;
}
.matching-progress-container {
  margin-bottom: 8px;
}
.matching-progress-text {
  font-size: 0.8rem;
  color: var(--text-secondary, #6c757d);
  text-align: center;
  margin-top: 4px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

/* Couleurs métier pour .progress-bar (success, info, secondary) */
.progress-container .progress-bar.progress-success,
.progress-bar.progress-success {
  background-color: rgba(40, 167, 69, 0.6) !important;
}
.progress-container .progress-bar.progress-info,
.progress-bar.progress-info {
  background-color: rgba(23, 162, 184, 0.6) !important;
}
.progress-container .progress-bar.progress-secondary,
.progress-bar.progress-secondary {
  background-color: rgba(108, 117, 125, 0.5) !important;
}

/* Variantes .bg-* pour barres de progression (pages matching) */
.progress-bar.bg-success { background: linear-gradient(90deg, rgba(40, 167, 69, 0.35), rgba(40, 167, 69, 0.5)) !important; border: 1px solid rgba(40, 167, 69, 0.4); }
.progress-bar.bg-warning { background: linear-gradient(90deg, rgba(255, 193, 7, 0.4), rgba(253, 180, 45, 0.55)) !important; border: 1px solid rgba(255, 193, 7, 0.5); }
.progress-bar.bg-secondary { background: linear-gradient(90deg, rgba(108, 117, 125, 0.25), rgba(108, 117, 125, 0.35)) !important; border: 1px solid rgba(108, 117, 125, 0.3); }

/* ===== Activity (DT/RT) page helpers ===== */
.activity-page {
  min-height: calc(100vh - 90px);
  display: flex;
  flex-direction: column;
}
.activity-page .info-box-style {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.activity-page .info-box-style .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.activity-table-wrap {
  flex: 1;
  min-height: 0;
  margin-top: 14px;
}
.activity-table-wrap .table-responsive {
  height: 100%;
  overflow: auto;
  border-radius: 12px;
}

/* If too many columns, slightly smaller text for readability */
.activity-table-wrap table {
  font-size: 0.92rem;
}
/* Besoin column: truncate pill nicely */
.activity-table-wrap td.truncate {
  max-width: 240px;
}
.activity-table-wrap td.truncate .clickable-pill {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Stage badges used in activity table */
.badge-stage {
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.2px;
  border: 1px solid transparent;
  color: #111 !important; /* override Bootstrap .badge text color */
}
.badge-dt {
  background: rgba(13, 110, 253, 0.14);
  border-color: rgba(13, 110, 253, 0.28);
}
.badge-rt {
  background: rgba(255, 193, 7, 0.18);
  border-color: rgba(255, 193, 7, 0.35);
}

/* Statuts tickets support – style pastel (comme preferences / badge-pastille) */
.badge.support-ticket-statut {
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 12px;
  font-weight: 600;
  border: 1px solid;
}
.badge.support-ticket-statut-open {
  background-color: rgba(13, 110, 253, 0.2) !important;
  color: #0a58ca !important;
  border-color: rgba(13, 110, 253, 0.35);
}
.badge.support-ticket-statut-in_progress {
  background-color: rgba(23, 162, 184, 0.2) !important;
  color: #0c5460 !important;
  border-color: rgba(23, 162, 184, 0.35);
}
.badge.support-ticket-statut-waiting_user {
  background-color: rgba(255, 193, 7, 0.25) !important;
  color: #856404 !important;
  border-color: rgba(255, 193, 7, 0.4);
}
.badge.support-ticket-statut-resolved,
.badge.support-ticket-statut-closed {
  background-color: rgba(108, 117, 125, 0.2) !important;
  color: #495057 !important;
  border-color: rgba(108, 117, 125, 0.35);
}

.pill.info {
  background: #e9f5ff !important;
  color: #0b6aa2 !important;
}

.pill.warn {
  background: #fff3cd !important;
  color: #8a6d3b !important;
}

.pill.ok {
  background: #e8f5e9 !important;
  color: #2e7d32 !important;
}

/* ===== PILL BADGES (Pour rôles et utilisateurs dans les tableaux) ===== */
.pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: inherit;
  font-weight: 500;
  color: var(--text-primary);
  border: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.pill-badge.role-badge {
  background: rgba(102, 126, 234, 0.15) !important;
  color: var(--primary-color) !important;
}

.pill-badge.user-badge {
  background: rgba(108, 117, 125, 0.15) !important;
  color: #6c757d !important;
}

/* Style pour les utilisateurs dans les tableaux - applique automatiquement le style user-badge */
table td .pill-badge.user-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: inherit;
  font-weight: 500;
  background: rgba(108, 117, 125, 0.15) !important;
  color: #6c757d !important;
}

table td .pill-badge.user-badge i {
  font-size: 0.75rem;
  margin: 0;
}

.pill-badge.client-badge {
  background: rgba(102, 126, 234, 0.15) !important;
  color: var(--primary-color) !important;
}

.pill-badge i {
  font-size: 0.75rem;
  margin: 0;
}

/* Bouton de suppression dans les pill-badge */
.permission-delete-btn {
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.1);
  border: none;
  border-radius: 50%;
  color: inherit;
  cursor: pointer;
  font-size: 0.75em;
  line-height: 1;
  margin-left: 4px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

.permission-delete-btn:hover {
  background: rgba(0, 0, 0, 0.2);
  transform: scale(1.1);
}

.permission-delete-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
}

.permission-delete-btn i {
  margin: 0;
  font-size: 0.7rem;
}

/* Days pills (pour les jours restants) */
.days-pill {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  display: inline-block;
}

.days-warn {
  background: #fff3cd !important;
  color: #8a6d3b !important;
}

.days-info {
  background: #fdecea !important;
  color: #b71c1c !important;
}

.days-ok {
  background: #e8f5e9 !important;
  color: #2e7d32 !important;
}

/* Stat pills */
.stat-pill {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  background: #e9f5ff !important;
  color: #0b6aa2 !important;
  white-space: nowrap;
  display: inline-block;
}

/* Status badges (pastel) */
.status-badge {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  display: inline-block;
}

.status-urgent {
  background: #fdecea !important;
  color: #b71c1c !important;
}

.status-warning {
  background: #fff3cd !important;
  color: #8a6d3b !important;
}

.status-ok {
  background: #e8f5e9 !important;
  color: #2e7d32 !important;
}

/* Statuts mission (À venir, En cours, Terminée) */
.status-a_venir {
  background: rgba(59, 130, 246, 0.2) !important;
  color: #3b82f6 !important;
}
.status-en_cours {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #10b981 !important;
}
.status-terminee {
  background: rgba(108, 117, 125, 0.2) !important;
  color: #6c757d !important;
}

/* ===== FORMULAIRES ===== */
.form-group {
  margin-bottom: 1rem;
}

.form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--text-primary);
}

.form-control {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text-primary);
  border-radius: 8px;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.form-control:focus {
  outline: none;
  border-color: var(--input-focus-border);
  background: var(--input-bg);
  color: var(--text-primary);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-select {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  border-radius: 6px;
  transition: all 0.3s ease;
  font-size: 0.9rem;
  color: var(--text-primary);
  /* Flèche personnalisée en bleu */
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23667EEA' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 10px 6px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.form-select:focus {
  outline: none;
  background-color: #f8f9ff;
  border-color: var(--input-focus-border);
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.25);
  color: var(--text-primary);
}

/* DataTables inputs */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background-color: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--text-primary) !important;
  padding: 6px 10px !important;
  border-radius: 4px !important;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--input-focus-border) !important;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
  outline: none !important;
}

/* ===== DATE PICKERS - STYLES CENTRALISÉS ET OPTIMISÉS ===== */

/* Style de base pour tous les inputs de date (regroupé) */
input[type="date"],
input[type="week"],
input[type="month"],
input[type="datetime-local"],
input[type="time"],
.form-control[type="date"],
.form-control[type="week"],
.form-control[type="month"],
.form-control[type="datetime-local"],
.form-control[type="time"],
.editable-date[type="date"],
.editable-date[type="week"],
.editable-date[type="month"],
.editable-date[type="datetime-local"] {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text-primary);
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 500;
  transition: all 0.3s ease;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  font-family: inherit;
}

/* Icône calendrier personnalisée (via pseudo-élément) - DÉSACTIVÉE car le custom date picker ajoute son propre trigger */
/* Les icônes sont maintenant gérées par le custom-date-picker.js */
/* 
input[type="date"]::before,
input[type="week"]::before,
input[type="month"]::before,
input[type="datetime-local"]::before {
  content: '\f073';
  font-family: 'Font Awesome 6 Free';
  font-weight: 400;
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--primary-color);
  pointer-events: none;
  font-size: 1rem;
  opacity: 0.7;
}

input[type="date"]:not(:placeholder-shown)::before,
input[type="week"]:not(:placeholder-shown)::before,
input[type="month"]:not(:placeholder-shown)::before,
input[type="datetime-local"]:not(:placeholder-shown)::before {
  opacity: 1;
}
*/

/* États hover, focus, disabled centralisés */
input:is([type="date"], [type="week"], [type="month"], [type="datetime-local"], [type="time"]):hover {
  border-color: var(--primary-color);
  background: var(--input-bg);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
}

input:is([type="date"], [type="week"], [type="month"], [type="datetime-local"], [type="time"]):focus {
  outline: none;
  border-color: var(--primary-color);
  background: var(--input-bg);
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15);
}

input:is([type="date"], [type="week"], [type="month"], [type="datetime-local"], [type="time"]):disabled {
  background: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-secondary);
  cursor: not-allowed;
  opacity: 0.6;
}

input:is([type="date"], [type="week"], [type="month"], [type="datetime-local"], [type="time"]):disabled:hover {
  transform: none;
  box-shadow: none;
}

/* ===== BARRE DE FILTRES (filters-bar) ===== */
/* Hauteur unifiée : variable --control-height (theme.css). Réutilisable sur audit_logs, platform_admin_logs, etc. */
.filters-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
}

.filters-bar .filter-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.filters-bar .filter-group label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.filters-bar .filter-group input,
.filters-bar .filter-group select {
  padding: 8px 12px;
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 8px;
  font-size: 0.85rem;
  background: var(--input-bg, #fff);
  color: var(--text-primary, #111);
  min-width: 140px;
  height: var(--control-height, 38px);
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.filters-bar .filter-group input:focus,
.filters-bar .filter-group select:focus {
  outline: none;
  border-color: var(--primary-color, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.filters-bar .filter-group input[type="date"] {
  min-width: 165px;
}

.filters-bar .btn-filter {
  padding: 0 20px;
  height: var(--control-height, 38px);
  box-sizing: border-box;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Styles compacts pour filtres et tableaux (regroupé) */
.filter-group input:is([type="date"], [type="week"], [type="month"], [type="datetime-local"]) {
  padding: 0.625rem 0.875rem;
  font-size: 0.9rem;
}

table input:is([type="date"], [type="week"], [type="month"], [type="datetime-local"]),
.dataTable input:is([type="date"], [type="week"], [type="month"], [type="datetime-local"]) {
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  border-width: 1px;
}

/* Container pour les plages de dates (de... à...) */
.date-range-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.date-range-container input[type="date"],
.date-range-container input[type="week"],
.date-range-container input[type="month"],
.date-range-container input[type="datetime-local"] {
  flex: 1;
  min-width: 150px;
}

.date-range-separator {
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 1rem;
  padding: 0 0.5rem;
  flex-shrink: 0;
}

/* Labels pour inputs de date (regroupé) */
label:is([for*="date"], [for*="Date"], [for*="week"], [for*="Week"], [for*="month"], [for*="Month"], [for*="time"], [for*="Time"]) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--text-primary);
}

label:is([for*="date"], [for*="Date"], [for*="week"], [for*="Week"], [for*="month"], [for*="Month"])::before {
  content: '\f073';
  font-family: 'Font Awesome 6 Free';
  font-weight: 400;
  color: var(--primary-color);
  font-size: 0.9rem;
}

/* Style pour les groupes de dates (ex: date début / date fin) */
.date-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.date-group-item {
  display: flex;
  flex-direction: column;
}

.date-group-item label {
  margin-bottom: 0.5rem;
}

/* Style pour les inputs de date inline (dans les tableaux ou listes) */
.date-input-inline {
  display: inline-block;
  width: auto;
  min-width: 160px;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
}

/* Masquage de l'indicateur natif du calendrier (regroupé) */
/* SAUF pour les inputs avec .use-native-picker qui doivent garder le picker natif */
input:is([type="date"], [type="week"], [type="month"], [type="datetime-local"], [type="time"]):not(.use-native-picker)::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0 !important;
  position: absolute;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none !important;
}

/* Garder le picker natif visible et fonctionnel pour .use-native-picker */
input.use-native-picker::-webkit-calendar-picker-indicator {
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative !important;
  width: 24px !important;
  height: 24px !important;
  z-index: 100 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23667eea'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2zM7 12h5v5H7z'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  margin-left: 8px !important;
  flex-shrink: 0 !important;
  display: block !important;
  visibility: visible !important;
}

input.use-native-picker::-webkit-calendar-picker-indicator:hover {
  opacity: 0.7 !important;
  transform: scale(1.1);
  transition: all 0.2s ease;
}

/* Style pour l'input lui-même quand il utilise le picker natif */
input.use-native-picker {
  position: relative;
  padding-right: 40px !important; /* Espace pour l'icône */
  cursor: pointer;
}

/* S'assurer que les champs sont visibles pour .use-native-picker */
input.use-native-picker::-webkit-datetime-edit {
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  color: var(--text-primary) !important;
}

input.use-native-picker::-webkit-datetime-edit-fields-wrapper {
  display: flex !important;
  padding: 0 !important;
}

input.use-native-picker::-webkit-datetime-edit-day-field,
input.use-native-picker::-webkit-datetime-edit-month-field,
input.use-native-picker::-webkit-datetime-edit-year-field,
input.use-native-picker::-webkit-datetime-edit-hour-field,
input.use-native-picker::-webkit-datetime-edit-minute-field {
  padding: 0.25rem 0.5rem !important;
  color: var(--text-primary) !important;
  background: transparent !important;
}

/* Afficher les séparateurs pour .use-native-picker (contrairement aux autres inputs) */
input.use-native-picker::-webkit-datetime-edit-text {
  display: inline !important;
  width: auto !important;
  padding: 0 0.2rem !important;
  color: var(--text-secondary) !important;
}

/* ===== STYLES POUR LE CALENDRIER NATIF (POPUP) ===== */

/* Note importante : Le popup du calendrier natif HTML5 est rendu par le navigateur
   et ne peut pas être stylisé directement avec CSS. Cependant, nous pouvons améliorer
   l'apparence des champs de date dans l'input et utiliser des techniques avancées. */

/* Personnalisation des champs de date webkit (regroupé) */
input:is([type="date"], [type="week"], [type="month"], [type="datetime-local"])::-webkit-datetime-edit {
  padding: 0;
  color: var(--text-primary);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

input:is([type="date"], [type="week"], [type="month"], [type="datetime-local"])::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Style amélioré pour les champs individuels (jour, mois, année) */
/* Réorganisation de l'ordre d'affichage pour format DD/MM/YYYY */
input[type="date"]::-webkit-datetime-edit-fields-wrapper {
  display: flex;
  flex-direction: row;
}

/* Ordre d'affichage : jour, mois, année (format DD/MM/YYYY) */
input[type="date"]::-webkit-datetime-edit-day-field {
  order: 1;
}

input[type="date"]::-webkit-datetime-edit-month-field {
  order: 2;
}

input[type="date"]::-webkit-datetime-edit-year-field {
  order: 3;
}

/* Styles pour les champs individuels (jour, mois, année, heure, minute) - regroupé */
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-year-field,
input[type="week"]::-webkit-datetime-edit-week-field,
input[type="week"]::-webkit-datetime-edit-year-field,
input[type="month"]::-webkit-datetime-edit-month-field,
input[type="month"]::-webkit-datetime-edit-year-field,
input[type="datetime-local"]::-webkit-datetime-edit-day-field,
input[type="datetime-local"]::-webkit-datetime-edit-month-field,
input[type="datetime-local"]::-webkit-datetime-edit-year-field,
input[type="datetime-local"]::-webkit-datetime-edit-hour-field,
input[type="datetime-local"]::-webkit-datetime-edit-minute-field,
input[type="time"]::-webkit-datetime-edit-hour-field,
input[type="time"]::-webkit-datetime-edit-minute-field,
input[type="time"]::-webkit-datetime-edit-second-field {
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  background: transparent;
  color: var(--text-primary);
  transition: all 0.2s ease;
  font-weight: 500;
  min-width: 2ch;
  text-align: center;
  cursor: text;
  -webkit-user-select: text;
  user-select: text;
  pointer-events: auto;
  -webkit-appearance: textfield;
  appearance: textfield;
  -moz-appearance: textfield;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* États focus pour les champs éditables (regroupé) */
input[type="datetime-local"]::-webkit-datetime-edit-hour-field:focus,
input[type="datetime-local"]::-webkit-datetime-edit-minute-field:focus,
input[type="time"]::-webkit-datetime-edit-hour-field:focus,
input[type="time"]::-webkit-datetime-edit-minute-field:focus {
  outline: none !important;
  background: rgba(102, 126, 234, 0.15);
  color: var(--primary-color);
  box-shadow: none !important;
  border: none !important;
}

/* Ordre d'affichage pour datetime-local : jour, mois, année, heure, minute */
input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper {
  display: flex;
  flex-direction: row;
}

input[type="datetime-local"]::-webkit-datetime-edit-day-field {
  order: 1;
}

input[type="datetime-local"]::-webkit-datetime-edit-month-field {
  order: 2;
}

input[type="datetime-local"]::-webkit-datetime-edit-year-field {
  order: 3;
}

input[type="datetime-local"]::-webkit-datetime-edit-hour-field {
  order: 4;
}

input[type="datetime-local"]::-webkit-datetime-edit-minute-field {
  order: 5;
}

/* États hover et focus des champs (regroupé) */
input[type="date"]:hover::-webkit-datetime-edit-day-field,
input[type="date"]:hover::-webkit-datetime-edit-month-field,
input[type="date"]:hover::-webkit-datetime-edit-year-field,
input[type="week"]:hover::-webkit-datetime-edit-week-field,
input[type="week"]:hover::-webkit-datetime-edit-year-field,
input[type="month"]:hover::-webkit-datetime-edit-month-field,
input[type="month"]:hover::-webkit-datetime-edit-year-field,
input[type="datetime-local"]:hover::-webkit-datetime-edit-day-field,
input[type="datetime-local"]:hover::-webkit-datetime-edit-month-field,
input[type="datetime-local"]:hover::-webkit-datetime-edit-year-field,
input[type="datetime-local"]:hover::-webkit-datetime-edit-hour-field,
input[type="datetime-local"]:hover::-webkit-datetime-edit-minute-field,
input[type="time"]:hover::-webkit-datetime-edit-hour-field,
input[type="time"]:hover::-webkit-datetime-edit-minute-field,
input[type="time"]:hover::-webkit-datetime-edit-second-field {
  background: rgba(102, 126, 234, 0.1);
  color: var(--primary-color);
}

input[type="date"]:focus::-webkit-datetime-edit-day-field,
input[type="date"]:focus::-webkit-datetime-edit-month-field,
input[type="date"]:focus::-webkit-datetime-edit-year-field,
input[type="week"]:focus::-webkit-datetime-edit-week-field,
input[type="week"]:focus::-webkit-datetime-edit-year-field,
input[type="month"]:focus::-webkit-datetime-edit-month-field,
input[type="month"]:focus::-webkit-datetime-edit-year-field,
input[type="datetime-local"]:focus::-webkit-datetime-edit-day-field,
input[type="datetime-local"]:focus::-webkit-datetime-edit-month-field,
input[type="datetime-local"]:focus::-webkit-datetime-edit-year-field,
input[type="datetime-local"]:focus::-webkit-datetime-edit-hour-field,
input[type="datetime-local"]:focus::-webkit-datetime-edit-minute-field,
input[type="time"]:focus::-webkit-datetime-edit-hour-field,
input[type="time"]:focus::-webkit-datetime-edit-minute-field,
input[type="time"]:focus::-webkit-datetime-edit-second-field {
  background: rgba(102, 126, 234, 0.15);
  color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

/* Séparateurs masqués (regroupé) */
input:is([type="date"], [type="week"], [type="month"], [type="datetime-local"], [type="time"])::-webkit-datetime-edit-text {
  display: none !important;
  width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  content: '' !important;
}

/* Masquer les champs natifs quand un overlay formaté est affiché */
input:is([type="date"], [type="datetime-local"]).has-formatted-value::-webkit-datetime-edit,
input:is([type="date"], [type="datetime-local"]).has-formatted-value::-webkit-datetime-edit-fields-wrapper,
input:is([type="date"], [type="datetime-local"]).has-formatted-value::-webkit-datetime-edit-day-field,
input:is([type="date"], [type="datetime-local"]).has-formatted-value::-webkit-datetime-edit-month-field,
input:is([type="date"], [type="datetime-local"]).has-formatted-value::-webkit-datetime-edit-year-field,
input[type="datetime-local"].has-formatted-value::-webkit-datetime-edit-hour-field,
input[type="datetime-local"].has-formatted-value::-webkit-datetime-edit-minute-field,
input[type="datetime-local"].has-formatted-value::-webkit-datetime-edit-ampm-field {
  opacity: 0 !important;
  visibility: hidden !important;
  color: transparent !important;
  pointer-events: none !important;
}

/* Style pour l'overlay de valeur formatée */
.custom-date-picker-formatted-overlay {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  pointer-events: auto;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 0.95rem;
  font-weight: 500;
  z-index: 1;
  user-select: none;
}

input:is([type="date"], [type="datetime-local"])::-webkit-datetime-edit-fields-wrapper::before {
  display: none !important;
  content: none !important;
}

input:is([type="date"], [type="datetime-local"])::-webkit-datetime-edit-fields-wrapper {
  gap: 0.1rem;
}

/* Masquer AM/PM par défaut - sera géré dynamiquement selon les préférences via JavaScript */
/* Le style sera appliqué dynamiquement dans custom-date-picker.js selon les préférences */

/* Styles pour time déjà inclus dans les regroupements ci-dessus */
input[type="time"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
  color: var(--text-primary);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* ===== AMÉLIORATIONS VISUELLES POUR LES INPUTS DE DATE ===== */

/* Classe ajoutée dynamiquement par JavaScript */
.enhanced-date-input.has-value {
  border-color: var(--primary-color);
  background: var(--input-bg);
}

.enhanced-date-input.date-picker-open {
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
}

/* Animation pour l'ouverture du calendrier */
@keyframes datePickerOpen {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ===== STYLES POUR LE POPUP DU CALENDRIER NATIF ===== */

/* ===== CALENDRIER PERSONNALISÉ (POPUP STYLISÉ) ===== */

/* Wrapper pour les inputs de date avec trigger */
.custom-date-picker-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

.custom-date-picker-trigger {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--primary-color);
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: all 0.2s ease;
  border-radius: 6px;
}

.custom-date-picker-trigger:hover {
  background: rgba(102, 126, 234, 0.1);
  color: var(--primary-color);
}

.custom-date-picker-trigger:active {
  transform: translateY(-50%) scale(0.95);
}

.custom-date-picker-trigger i {
  font-size: 1rem;
  pointer-events: none;
}

/* Popup du calendrier personnalisé */
.custom-date-picker-popup {
  position: absolute;
  background: var(--card-bg);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 10000;
  width: 450px;
  min-width: 450px;
  animation: datePickerOpen 0.2s ease-out;
  overflow: hidden;
}

/* Sélecteur de mois : s'afficher au premier plan au-dessus des modales */
.custom-date-picker-popup--month {
  z-index: 10100 !important;
  min-height: 280px;  /* Garantit que la grille des mois est visible (header + 12 mois + footer) */
}

/* Header du calendrier */
.custom-date-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  gap: 0.5rem;
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  color: white;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.custom-date-picker-nav {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 36px;
}

.custom-date-picker-nav:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.custom-date-picker-nav:active {
  transform: scale(0.95);
}

.custom-date-picker-month-year {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  justify-content: center;
}

.custom-date-picker-month-select,
.custom-date-picker-year-select {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
}

.custom-date-picker-month-select:hover,
.custom-date-picker-year-select:hover {
  background: rgba(255, 255, 255, 0.3);
}

.custom-date-picker-month-select:focus,
.custom-date-picker-year-select:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}

.custom-date-picker-month-select option,
.custom-date-picker-year-select option {
  background: var(--card-bg);
  color: var(--text-primary);
}

/* Jours de la semaine */
.custom-date-picker-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
  padding: 0.75rem 1rem 0.5rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.custom-date-picker-weekday {
  text-align: center;
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  padding: 0.5rem 0;
}

/* Grille des jours */
.custom-date-picker-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
  padding: 0.75rem;
  background: var(--card-bg);
}

.custom-date-picker-day {
  aspect-ratio: 1;
  max-width: 42px;
  max-height: 42px;
  border: 2px solid transparent;
  background: transparent;
  color: var(--text-primary);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.custom-date-picker-day:hover:not(.other-month) {
  background: rgba(102, 126, 234, 0.1);
  border-color: var(--primary-color);
  color: var(--primary-color);
  transform: scale(1.1);
}

.custom-date-picker-day.other-month {
  color: var(--text-secondary);
  opacity: 0.4;
  cursor: default;
}

.custom-date-picker-day.today {
  background: rgba(102, 126, 234, 0.15);
  border-color: var(--primary-color);
  color: var(--primary-color);
  font-weight: 700;
}

.custom-date-picker-day.today::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background: var(--primary-color);
  border-radius: 50%;
}

.custom-date-picker-day.selected {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  color: white;
  border-color: var(--primary-color);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
  transform: scale(1.05);
}

.custom-date-picker-day.selected:hover {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  color: white;
  transform: scale(1.1);
}

/* Grille des mois */
.custom-date-picker-months {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  padding: 1rem;
  background: var(--card-bg);
}

.custom-date-picker-month {
  padding: 1rem 0.75rem;
  border: 2px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-primary);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s ease;
  text-align: center;
}

.custom-date-picker-month:hover {
  background: rgba(102, 126, 234, 0.1);
  border-color: var(--primary-color);
  color: var(--primary-color);
  box-shadow: 0 4px 8px rgba(102, 126, 234, 0.2);
}

.custom-date-picker-month.selected {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  color: white;
  border-color: var(--primary-color);
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* Section heure avec combo éditable */
.custom-date-picker-time,
.custom-date-picker-time-full {
  padding: 1rem 1.5rem;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
}

/* Style Teams pour les inputs de temps */
.custom-date-picker-time .time-picker-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 200px;
  margin: 0 auto;
}

.custom-date-picker-time .time-inputs-group {
  flex: 1;
  display: flex;
  align-items: center;
  background-color: var(--input-bg);
  border: 2px solid var(--border-color);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  transition: all 0.2s ease;
  pointer-events: auto !important;
}

.custom-date-picker-time .time-inputs-group:hover {
  border-color: var(--primary-color);
  background-color: rgba(102, 126, 234, 0.03);
}

.custom-date-picker-time .time-inputs-group:focus-within {
  border-color: var(--primary-color);
  background-color: var(--input-bg);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.custom-date-picker-time .time-input-field {
  width: 40px;
  padding: 0.25rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  background: transparent;
  border: none !important;
  outline: none !important;
  text-align: center;
  transition: all 0.2s ease;
  cursor: text;
  pointer-events: auto !important;
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -webkit-tap-highlight-color: transparent;
}

.custom-date-picker-time .time-input-field:focus {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  background: rgba(102, 126, 234, 0.1);
  border-radius: 4px;
}

.custom-date-picker-time .time-separator {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-secondary);
  user-select: none;
  margin: 0 0.25rem;
}

.custom-date-picker-time .ampm-input {
  width: 60px;
  padding: 0.25rem 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  background: transparent;
  border: none !important;
  outline: none !important;
  text-align: center;
  cursor: pointer;
  margin-left: 0.5rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.custom-date-picker-time .ampm-input:focus {
  background: rgba(102, 126, 234, 0.1);
  border-radius: 4px;
}

.custom-date-picker-time .ampm-input option {
  background: var(--input-bg);
  color: var(--text-primary);
}

.custom-date-picker-time .time-dropdown-btn {
  flex-shrink: 0;
  width: 32px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(102, 126, 234, 0.05);
  border: 2px solid var(--border-color);
  border-radius: 8px;
  color: var(--primary-color);
  cursor: pointer;
  transition: all 0.2s ease;
  pointer-events: auto !important;
}

.custom-date-picker-time .time-dropdown-btn:hover {
  background: rgba(102, 126, 234, 0.15);
  border-color: var(--primary-color);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}

.custom-date-picker-time .time-dropdown-btn svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
  pointer-events: none;
}

.custom-date-picker-time .time-dropdown-btn:hover svg {
  transform: scale(1.15);
}

.custom-date-picker-time .time-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  overflow-y: overlay; /* WebKit: scrollbar en overlay = surlignage pleine largeur */
  overflow-x: hidden;
  padding: 0;
  background: var(--card-bg);
  border: 2px solid var(--primary-color);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  z-index: 99999;
  animation: dropdownSlide 0.2s ease-out;
}

@keyframes dropdownSlide {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.custom-date-picker-time .time-dropdown::-webkit-scrollbar {
  width: 6px;
}

.custom-date-picker-time .time-dropdown::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 0 6px 6px 0;
}

.custom-date-picker-time .time-dropdown::-webkit-scrollbar-thumb {
  background: var(--text-secondary);
  border-radius: 3px;
}

.custom-date-picker-time .time-dropdown::-webkit-scrollbar-thumb:hover {
  background: var(--primary-color);
}

.custom-date-picker-time .time-option {
  padding: 0.7rem 0.75rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.15s ease;
  border-bottom: 1px solid var(--border-color);
  box-sizing: border-box;
  width: 100%;
  margin: 0;
}

.custom-date-picker-time .time-option:first-child {
  border-radius: 6px 6px 0 0;
}

.custom-date-picker-time .time-option:last-child {
  border-bottom: none;
  border-radius: 0 0 6px 6px;
}

.custom-date-picker-time .time-option:hover {
  background: rgba(102, 126, 234, 0.1);
  color: var(--primary-color);
  padding-left: 1rem;
}

.custom-date-picker-time .time-option.selected {
  background: linear-gradient(90deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.1) 100%);
  color: var(--primary-color);
  font-weight: 600;
  border-left: 3px solid var(--primary-color);
  padding-left: 0.75rem;
}

/* Dropdown en portal (dans body) : styles des options sans padding de section */
.time-dropdown--portal {
  padding: 0 !important;
  gap: 0 !important;
  display: block !important;
  flex-direction: unset !important;
  align-items: unset !important;
  background: var(--card-bg) !important;
  border-top: none !important;
}

.time-dropdown--portal .time-option {
  padding: 0.6rem 0.75rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.15s ease;
  border-bottom: 1px solid var(--border-color);
  box-sizing: border-box;
  width: 100%;
  margin: 0;
}

.time-dropdown--portal .time-option:first-child {
  border-radius: 6px 6px 0 0;
}

.time-dropdown--portal .time-option:last-child {
  border-bottom: none;
  border-radius: 0 0 6px 6px;
}

.time-dropdown--portal .time-option:hover {
  background: rgba(102, 126, 234, 0.1);
  color: var(--primary-color);
  padding-left: 1rem;
}

.time-dropdown--portal .time-option.selected {
  background: linear-gradient(90deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.1) 100%);
  color: var(--primary-color);
  font-weight: 600;
  border-left: 3px solid var(--primary-color);
  padding-left: 0.75rem;
}

.custom-date-picker-time-label {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 0.95rem;
  text-align: center;
  margin-bottom: 0.25rem;
}

/* Ancien système d'inputs - maintenant on utilise .custom-date-picker-time-controls */

.custom-date-picker-time-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.custom-date-picker-time-group label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.custom-date-picker-hour,
.custom-date-picker-minute {
  width: 60px;
  padding: 0.75rem;
  border: 2px solid var(--border-color);
  background: var(--input-bg);
  color: var(--text-primary);
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  cursor: text !important;
  pointer-events: auto !important;
  user-select: text !important;
  -webkit-user-select: text !important;
  transition: all 0.2s ease;
  cursor: text;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: textfield;
  -webkit-user-select: text;
  user-select: text;
  pointer-events: auto !important;
  z-index: 100 !important;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

/* S'assurer que les inputs d'heures sont bien cliquables */
.custom-date-picker-time-inputs {
  pointer-events: auto !important;
  position: relative;
  z-index: 100;
}

.custom-date-picker-time-inputs .custom-date-picker-hour,
.custom-date-picker-time-inputs .custom-date-picker-minute {
  pointer-events: auto !important;
  z-index: 101 !important;
  position: relative;
}

/* Masquer les flèches de type number sur certains navigateurs */
.custom-date-picker-hour::-webkit-outer-spin-button,
.custom-date-picker-hour::-webkit-inner-spin-button,
.custom-date-picker-minute::-webkit-outer-spin-button,
.custom-date-picker-minute::-webkit-inner-spin-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}

.custom-date-picker-hour:focus,
.custom-date-picker-minute:focus {
  outline: none;
  border-color: var(--primary-color);
  background: var(--input-bg);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
  color: var(--primary-color);
}

.custom-date-picker-time-separator {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-secondary);
  padding: 0 0.5rem;
}

/* Footer du calendrier */
.custom-date-picker-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
}

.custom-date-picker-btn {
  padding: 0.5rem 1rem;
  border: 2px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-primary);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.custom-date-picker-btn:hover {
  background: var(--bg-tertiary);
  border-color: var(--primary-color);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.custom-date-picker-btn-primary {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  color: white;
  border-color: var(--primary-color);
}

.custom-date-picker-btn-primary:hover {
  background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.custom-date-picker-btn:active {
  transform: translateY(0) scale(0.98);
}

/* Animation d'ouverture */
@keyframes datePickerOpen {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .custom-date-picker-popup {
    min-width: 280px;
    max-width: 90vw;
  }
  
  .custom-date-picker-day {
    font-size: 0.75rem;
    padding: 0.5rem;
  }
  
  .custom-date-picker-month {
    padding: 0.75rem 0.5rem;
    font-size: 0.8rem;
  }
}

/* Styles enhanced-date-input (regroupé) */
.enhanced-date-input::-webkit-datetime-edit-day-field:focus,
.enhanced-date-input::-webkit-datetime-edit-month-field:focus,
.enhanced-date-input::-webkit-datetime-edit-year-field:focus,
.enhanced-date-input::-webkit-datetime-edit-hour-field:focus,
.enhanced-date-input::-webkit-datetime-edit-minute-field:focus {
  outline: none;
  background: rgba(102, 126, 234, 0.2) !important;
  color: var(--primary-color) !important;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.3) !important;
  border-radius: 6px;
  transform: scale(1.05);
  transition: all 0.2s ease;
}

.enhanced-date-input::-webkit-datetime-edit-day-field,
.enhanced-date-input::-webkit-datetime-edit-month-field,
.enhanced-date-input::-webkit-datetime-edit-year-field,
.enhanced-date-input::-webkit-datetime-edit-hour-field,
.enhanced-date-input::-webkit-datetime-edit-minute-field {
  position: relative;
  transition: all 0.2s ease;
}

.enhanced-date-input.date-picker-open::-webkit-datetime-edit-day-field,
.enhanced-date-input.date-picker-open::-webkit-datetime-edit-month-field,
.enhanced-date-input.date-picker-open::-webkit-datetime-edit-year-field,
.enhanced-date-input.date-picker-open::-webkit-datetime-edit-hour-field,
.enhanced-date-input.date-picker-open::-webkit-datetime-edit-minute-field {
  background: rgba(102, 126, 234, 0.1);
  color: var(--primary-color);
}

.enhanced-date-input.has-value::-webkit-datetime-edit-day-field,
.enhanced-date-input.has-value::-webkit-datetime-edit-month-field,
.enhanced-date-input.has-value::-webkit-datetime-edit-year-field {
  font-weight: 600;
  color: var(--text-primary);
}

/* Styles spécifiques modales et filtres (déjà définis dans les styles de base) */
/* Les styles généraux s'appliquent automatiquement */

/* Variante avec icône visible (pour les cas où on veut l'afficher explicitement) */
.date-input-with-icon {
  position: relative;
}

.date-input-with-icon::after {
  content: '\f073';
  font-family: 'Font Awesome 6 Free';
  font-weight: 400;
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--primary-color);
  pointer-events: none;
  font-size: 1rem;
  z-index: 0;
}

.date-input-with-icon input[type="date"],
.date-input-with-icon input[type="week"],
.date-input-with-icon input[type="month"],
.date-input-with-icon input[type="datetime-local"] {
  padding-right: 2.5rem;
}

/* ===== STYLES CALENDRIER NATIF - Tous regroupés ci-dessus ===== */
/* Note: Le popup du calendrier natif ne peut pas être stylisé directement.
   Tous les styles webkit sont centralisés dans les sections précédentes. */

/* Responsive : ajustements pour mobile */
@media (max-width: 768px) {
  input[type="date"],
  input[type="week"],
  input[type="month"],
  input[type="datetime-local"],
  input[type="time"] {
    font-size: 16px; /* Évite le zoom automatique sur iOS */
    padding: 0.875rem 1rem;
  }
  
  .date-range-container {
    flex-direction: column;
    align-items: stretch;
  }
  
  .date-range-separator {
    text-align: center;
    padding: 0.5rem 0;
  }
  
  .date-group {
    grid-template-columns: 1fr;
  }
  
  .custom-date-picker-popup {
    width: 95vw;
    min-width: 320px;
    max-width: 400px;
  }
  
  .custom-date-picker-header {
    padding: 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  .custom-date-picker-nav {
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
  }
  
  .custom-date-picker-month-select,
  .custom-date-picker-year-select {
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
  }
}

/* ===== MODALS ===== */
.modal {
  display: none;
  position: fixed;
  /* Au-dessus des panneaux .search-dropdown-wrapper / .search-dropdown-panel (z ~10k) */
  z-index: 100500;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
}

.modal[style*="display: block"],
.modal.show {
  display: flex !important;
}

/* Styles pour les modales Bootstrap */
.modal-dialog {
  max-width: 1200px;
  margin: 2rem auto;
}

.modal-dialog.modal-xl {
  max-width: 1400px;
}

.modal-dialog.modal-lg {
  max-width: 1000px;
}

.modal-dialog.modal-sm {
  max-width: 500px;
}

.modal-content {
  background-color: var(--card-bg) !important;
  color: var(--text-primary) !important;
  margin: 0 auto;
  padding: 0;
  border-radius: 12px;
  width: 90%;
  max-width: 1200px;
  max-height: 90vh;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--card-border) !important;
  animation: modalSlideIn 0.3s ease-out;
  overflow-y: auto;
  position: relative;
}

/* Modales plus grandes pour les écrans larges */
@media (min-width: 1200px) {
  .modal-dialog {
    max-width: 1200px;
  }
  
  .modal-dialog.modal-xl {
    max-width: 1200px;
  }
}

@media (min-width: 1200px) {
  .modal-dialog {
    max-width: 1200px;
  }
  
  .modal-dialog.modal-xl {
    max-width: 1200px;
  }
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== STYLE CENTRALISÉ POUR TOUS LES HEADERS DE MODALES ===== */
/* Classe de base réutilisable pour tous les types de modales */
.modal-header-base,
.modal-header,
.custom-modal-header,
.modal-tabs-header {
  padding: 1.5rem;
  border-bottom: 1px solid var(--border-color);
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  border-radius: 12px 12px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white !important;
  position: relative;
  overflow: hidden;
}

.modal-header-base::before,
.modal-header::before,
.custom-modal-header::before,
.modal-tabs-header::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0) 60%
  );
  transform: rotate(30deg);
}

.modal-header-base h1,
.modal-header-base h2,
.modal-header-base h3,
.modal-header-base h4,
.modal-header-base h5,
.modal-header-base h6,
.modal-header-base .modal-title,
.modal-header-base *,
.modal-header h1,
.modal-header h2,
.modal-header h3,
.modal-header h4,
.modal-header h5,
.modal-header h6,
.modal-header .modal-title,
.modal-header *,
.custom-modal-header h1,
.custom-modal-header h2,
.custom-modal-header h3,
.custom-modal-header h4,
.custom-modal-header h5,
.custom-modal-header h6,
.custom-modal-header *,
.modal-tabs-header h1,
.modal-tabs-header h2,
.modal-tabs-header h3,
.modal-tabs-header h4,
.modal-tabs-header h5,
.modal-tabs-header h6,
.modal-tabs-header * {
  color: white !important;
  position: relative;
  z-index: 1;
}

.modal-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
}

.close,
.close-btn,
.btn-close {
  background: rgba(108, 117, 125, 0.15) !important;
  border: none !important;
  cursor: pointer;
  color: var(--text-primary) !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  transition: background 0.2s;
  position: relative;
  z-index: 1;
  padding: 0 !important;
  line-height: 1 !important;
  margin: 0 !important;
  opacity: 1 !important;
  box-sizing: border-box !important;
}

/* Modal header close button: white cross on translucent white pill */
.modal-header .btn-close,
.custom-modal-header .btn-close {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important; /* makes ::before/::after cross white (currentColor) */
}
.modal-header .btn-close:hover,
.custom-modal-header .btn-close:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  color: #fff !important;
}

.close i,
.close-btn i,
.btn-close i,
.close .fas,
.close-btn .fas,
.btn-close .fas,
.close .fa,
.close-btn .fa,
.btn-close .fa,
.close .fa-times,
.close-btn .fa-times,
.btn-close .fa-times {
  font-size: 0.875rem !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  text-align: center !important;
  vertical-align: middle !important;
}

.close:hover,
.close-btn:hover,
.btn-close:hover {
  background: rgba(108, 117, 125, 0.22) !important;
  color: var(--text-primary) !important;
  opacity: 1 !important;
}

/* Override Bootstrap btn-close styles */
.btn-close {
  /* Provide our own "X" icon (Bootstrap SVG was disabled before) */
  background-image: none !important;
  opacity: 1 !important;
}

.btn-close::before,
.btn-close::after {
  content: "" !important;
  position: absolute !important;
  width: 16px !important;
  height: 2px !important;
  background: currentColor !important;
  border-radius: 2px !important;
  display: block !important;
  top: 50% !important;
  left: 50% !important;
  transform-origin: center !important;
}
.btn-close::before {
  transform: translate(-50%, -50%) rotate(45deg) !important;
}
.btn-close::after {
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}

.modal-body {
  padding: 2rem;
  background-color: var(--card-bg) !important;
  color: var(--text-primary) !important;
  max-height: 75vh;
  overflow-y: auto;
}

/* Modale courte RH — recherche école : ne pas rogner le panneau .search-dropdown-panel */
#rhCvFilterDiplomeModal.modal {
  overflow: visible;
}
#rhCvFilterDiplomeModal .modal-content {
  overflow: visible !important;
  max-height: none !important;
}
#rhCvFilterDiplomeModal .modal-body {
  overflow: visible !important;
  max-height: none !important;
}

/* Deux combos : même z-index global → le bloc école (après dans le DOM) masquait le panneau « nom » */
#rhCvFilterDiplomeModal .rh-cv-modal-diplome-nom-wrap.search-dropdown-wrapper {
  z-index: 10002;
}
#rhCvFilterDiplomeModal .rh-cv-modal-ecole-wrap.search-dropdown-wrapper {
  z-index: 10001;
}

/* Permettre au sélecteur d'heures (time/datetime-local) de sortir de la modale */
.modal-body:has(input[type="time"]:focus),
.modal-body:has(input[type="datetime-local"]:focus),
.custom-modal-body:has(input[type="time"]:focus),
.custom-modal-body:has(input[type="datetime-local"]:focus) {
  overflow: visible;
}

/* Fallback pour les navigateurs qui ne supportent pas :has() */
.modal-body input[type="time"]:focus,
.modal-body input[type="datetime-local"]:focus,
.custom-modal-body input[type="time"]:focus,
.custom-modal-body input[type="datetime-local"]:focus {
  position: relative;
  z-index: 10001;
}

/* Permettre au sélecteur natif de sortir de la modale */
.modal-content:has(input[type="time"]:focus),
.modal-content:has(input[type="datetime-local"]:focus),
.custom-modal:has(input[type="time"]:focus),
.custom-modal:has(input[type="datetime-local"]:focus) {
  overflow: visible;
}

/* Fallback pour les navigateurs qui ne supportent pas :has() */
.modal-content input[type="time"]:focus,
.modal-content input[type="datetime-local"]:focus,
.custom-modal input[type="time"]:focus,
.custom-modal input[type="datetime-local"]:focus {
  position: relative;
  z-index: 10001;
}

.modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border-color);
  background: var(--bg-secondary);
  border-radius: 0 0 12px 12px;
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  background-color: var(--card-bg) !important;
  color: var(--text-primary) !important;
}

/* ===== MODALES PERSONNALISÉES (custom-modal) ===== */
.custom-modal {
  background: var(--card-bg);
  color: var(--text-primary);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  margin: auto;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: modalFadeIn 0.3s;
  position: relative;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* .custom-modal-header hérite maintenant du style centralisé .modal-header-base ci-dessus */

.custom-modal-body {
  padding: 2rem;
  background-color: var(--card-bg) !important;
  color: var(--text-primary) !important;
  max-height: 60vh;
  overflow-y: auto;
}

.custom-modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border-color);
  background: var(--card-bg) !important;
  color: var(--text-primary) !important;
  border-radius: 0 0 12px 12px;
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
  overflow-y: auto;
  backdrop-filter: blur(4px);
}

.modal-overlay.active,
.modal-overlay[style*="display: flex"] {
  display: flex !important;
}

/* ===== Personnalisation des colonnes (modales) ===== */
.field-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.column-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  cursor: move;
  transition: all 0.2s;
  user-select: none;
}
.column-item:hover {
  background: var(--bg-tertiary);
  border-color: var(--primary-color);
}
.column-item.dragging {
  opacity: 0.5;
  background: var(--bg-secondary);
}
.column-item.drag-over {
  border-color: var(--primary-color);
  background: var(--bg-secondary);
}
.column-item .drag-handle {
  color: var(--text-secondary);
  cursor: grab;
  font-size: 16px;
  padding: 4px;
}
.column-item .drag-handle:active {
  cursor: grabbing;
}
.column-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  flex-shrink: 0;
}
.column-item label {
  flex: 1;
  cursor: move;
  margin: 0;
}

/* ===== NAV TABS (Onglets dans les modales) ===== */
.nav-tabs {
  border-bottom: 2px solid var(--border-color) !important;
}

.nav-tabs .nav-link {
  color: var(--text-secondary) !important;
  background-color: transparent !important;
  border: none !important;
  border-bottom: 3px solid transparent !important;
  padding: 0.75rem 1rem !important;
  transition: all 0.2s ease !important;
  font-weight: 500 !important;
}

.nav-tabs .nav-link:hover {
  color: var(--primary-color) !important;
  background-color: var(--bg-tertiary) !important;
  border-bottom-color: var(--primary-color) !important;
}

.nav-tabs .nav-link.active {
  color: var(--primary-color) !important;
  background-color: transparent !important;
  border-bottom-color: var(--primary-color) !important;
  font-weight: 600 !important;
}

.nav-tabs .nav-link.active:hover {
  color: var(--primary-color) !important;
  background-color: var(--bg-tertiary) !important;
}

/* ===== DROPDOWNS ===== */
.dropdown-menu {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  color: var(--text-primary) !important;
}

.dropdown-item {
  color: var(--text-primary);
}

.dropdown-item:hover {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

/* ===== ALERTS ===== */
.alert {
  background-color: var(--card-bg);
  border-color: var(--border-color);
  color: var(--text-primary);
}

/* ===== NOTIFICATIONS ===== */
#notificationContainer {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
  max-width: 420px;
}

.notification-item {
  background: #ffffff;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 12px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  animation: slideInRight 0.3s ease-out;
  position: relative;
  overflow: hidden;
  border: 2px solid;
}

/* Style supprimé - Utilise maintenant le style centralisé dans theme.css */

.notification-item.error,
.notification-item.danger {
  background: #fef2f2;
  border-color: rgba(220, 53, 69, 0.4);
  color: rgb(173, 41, 54);
}

.notification-item.error::before,
.notification-item.danger::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: rgb(220, 53, 69);
  border-radius: 12px 0 0 12px;
}

.notification-item.warning {
  background: #fffbeb;
  border-color: rgba(243, 156, 18, 0.4);
  color: rgb(194, 125, 14);
}

.notification-item.warning::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: rgb(243, 156, 18);
  border-radius: 12px 0 0 12px;
}

.notification-item.info {
  background: #eff6ff;
  border-color: rgba(23, 162, 184, 0.4);
  color: rgb(18, 130, 147);
}

.notification-item.info::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: rgb(23, 162, 184);
  border-radius: 12px 0 0 12px;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* ===== LOADING ===== */
.loading {
  text-align: center;
  padding: 3rem;
  color: var(--text-secondary);
}

.loading i {
  font-size: 2rem;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  border-radius: var(--border-radius);
}

.loading-spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid var(--primary-color);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1.2s linear infinite;
  margin-bottom: 15px;
}

/* ===== MODALE D'ATTENTE GLOBALE ===== */
.global-loading-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  backdrop-filter: blur(2px);
}

.global-loading-modal.show {
  display: flex;
}

.global-loading-content {
  background: var(--card-bg);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.loading-dots {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
}

.loading-dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--primary-color);
  animation: loadingDot 1.4s infinite ease-in-out;
}

.loading-dots span:nth-child(1) {
  animation-delay: -0.32s;
}

.loading-dots span:nth-child(2) {
  animation-delay: -0.16s;
}

.loading-dots span:nth-child(3) {
  animation-delay: 0s;
}

@keyframes loadingDot {
  0%, 80%, 100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  40% {
    transform: scale(1.2);
    opacity: 1;
  }
}

/* ===== UTILITAIRES ===== */
.no-data {
  text-align: center;
  padding: 40px;
  color: var(--text-secondary);
  font-style: italic;
}

.empty-state {
  text-align: center;
  padding: 3rem;
  color: var(--text-secondary);
}

.empty-state i {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.actions {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.text-muted {
  color: var(--text-secondary);
}

/* ===== NAVBAR ===== */
.navbar {
  background: var(--navbar-bg) !important;
  color: var(--navbar-text) !important;
  border-bottom: none !important;
  /* Séparation avec le header : ombre uniquement, pas de trait */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.navbar-brand,
.navbar-nav .nav-link {
  color: var(--navbar-text) !important;
}

/* ===== NAVBAR SHELL (même logique que core/menu_selection.html) ===== */
.navbar.navbar-shell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  min-height: 60px;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 1000;
  gap: 0.25rem;
}

.navbar.navbar-shell .navbar-logo-link {
  display: flex;
  align-items: center;
  padding: 4px 12px 4px 0;
  text-decoration: none;
}

.navbar.navbar-shell .navbar-logo-link .client-logo {
  max-height: 44px;
  max-width: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.navbar-shell-app-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
  margin-right: 12px;
  white-space: nowrap;
}

.navbar.navbar-shell .dropdown {
  position: relative;
  margin: 0 8px;
  display: flex;
  align-items: center;
}

.navbar.navbar-shell .dropdown-btn {
  color: var(--navbar-text, #ffffff) !important;
  padding: 0 14px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.25s ease;
  border-radius: 6px;
  font-size: 0.92rem;
}

.navbar.navbar-shell .dropdown-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.navbar.navbar-shell .dropdown-btn .navbar-shell-chevron {
  font-size: 0.8em;
  opacity: 0.92;
}

.navbar.navbar-shell .home-btn {
  color: var(--navbar-text, #ffffff) !important;
  padding: 0 14px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.25s ease;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.92rem;
}

.navbar.navbar-shell .home-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.navbar.navbar-shell .dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  min-width: 240px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: visible;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 1001;
  padding-top: 6px;
  margin-top: -4px;
}

.navbar.navbar-shell .dropdown:hover .dropdown-content {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.navbar.navbar-shell .dropdown-content a {
  color: #333 !important;
  padding: 12px 16px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  transition: background 0.15s ease;
}

.navbar.navbar-shell .dropdown-content a i {
  width: 20px;
  text-align: center;
  color: var(--primary-color, #667eea);
}

.navbar.navbar-shell .dropdown-content a:hover {
  background-color: #f1f3f5;
  border-left: 3px solid var(--primary-color, #667eea);
}

.navbar.navbar-shell .auth-links {
  display: flex;
  margin-left: auto;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 44px;
}

.navbar.navbar-shell .auth-links > a {
  color: var(--navbar-text, #ffffff) !important;
  padding: 0 14px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  transition: background 0.25s ease;
  border-radius: 6px;
  font-size: 0.9rem;
  white-space: nowrap;
}

.navbar.navbar-shell .auth-links > a:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

@media (max-width: 768px) {
  .navbar.navbar-shell {
    flex-direction: column;
    align-items: stretch;
    padding: 10px 16px;
  }
  .navbar.navbar-shell .auth-links {
    margin-left: 0;
    justify-content: flex-end;
  }
}

/* ===== ESPACE CONSULTANT (contenu sous la navbar shell) ===== */
.consultant-space {
  background: var(--bg-secondary, #f4f6f9);
  min-height: calc(100vh - 60px);
}

.consultant-page {
  max-width: 1200px;
  margin: 0 auto;
}

/* Tableaux : pas de grosse carte, mais coins doux + fond homogène pour éviter les
   « coins blancs » (thead Bootstrap blanc vs conteneur arrondi / overflow). */
.consultant-table-shell {
  /* auto : clippe les coins arrondis + scroll horizontal si besoin (évite overflow-x seul qui casse le clip) */
  overflow: auto;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 10px;
  box-shadow: none;
  /* Même base que .consultant-space : pas de contraste blanc/gris dans les angles */
  background: var(--bg-secondary, #f4f6f9);
}

.consultant-table-shell .table {
  margin-bottom: 0;
  --bs-table-bg: transparent;
  --bs-table-striped-bg: transparent;
  --bs-table-hover-bg: rgba(102, 126, 234, 0.06);
  --bs-table-border-color: rgba(0, 0, 0, 0.06);
  background-color: transparent !important;
  border-color: var(--bs-table-border-color);
}

.consultant-table-shell .table thead th {
  border-bottom-width: 1px;
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary, #6c757d);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  /* Aligné sur le shell : plus de blanc « en coin » sous le radius */
  background: var(--bg-secondary, #f4f6f9) !important;
  vertical-align: middle;
}

.consultant-table-shell .table tbody td {
  background-color: transparent !important;
}

/* Pas de rayures type « carte » sur les lignes — uniquement filets horizontaux discrets */
.consultant-table-shell .table > :not(caption) > * > * {
  box-shadow: none;
}

.consultant-table-shell .table tbody tr {
  background: transparent;
}

/* Boutons d’action dans les tableaux consultant : même logique pastel que
   table .btn-success / .btn-info / etc. (common.css) — fond léger, bordure douce */
.consultant-table-shell .table .btn {
  border-radius: 10px;
  font-weight: 500;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.consultant-table-shell .table .btn-primary {
  background-color: rgba(102, 126, 234, 0.2) !important;
  color: rgb(72, 61, 139) !important;
  border: 1px solid rgba(102, 126, 234, 0.38) !important;
  box-shadow: none !important;
}

.consultant-table-shell .table .btn-primary:hover,
.consultant-table-shell .table .btn-primary:focus {
  background-color: rgba(102, 126, 234, 0.32) !important;
  color: rgb(48, 42, 108) !important;
  border-color: rgba(102, 126, 234, 0.5) !important;
  box-shadow: none !important;
}

.consultant-table-shell .table .btn-outline-primary {
  background-color: rgba(102, 126, 234, 0.12) !important;
  color: var(--primary-color, #667eea) !important;
  border: 1px solid rgba(102, 126, 234, 0.35) !important;
  box-shadow: none !important;
}

.consultant-table-shell .table .btn-outline-primary:hover,
.consultant-table-shell .table .btn-outline-primary:focus {
  background-color: rgba(102, 126, 234, 0.22) !important;
  color: rgb(72, 61, 139) !important;
  border-color: rgba(102, 126, 234, 0.45) !important;
  box-shadow: none !important;
}

.consultant-table-shell .table .btn-outline-secondary {
  background-color: rgba(108, 117, 125, 0.12) !important;
  color: rgb(73, 80, 87) !important;
  border: 1px solid rgba(108, 117, 125, 0.3) !important;
  box-shadow: none !important;
}

.consultant-table-shell .table .btn-outline-secondary:hover,
.consultant-table-shell .table .btn-outline-secondary:focus {
  background-color: rgba(108, 117, 125, 0.22) !important;
  color: rgb(52, 58, 64) !important;
  border-color: rgba(108, 117, 125, 0.42) !important;
  box-shadow: none !important;
}

.consultant-hero {
  background: var(--card-bg, #fff);
  border: 1px solid var(--card-border, rgba(0, 0, 0, 0.06));
  border-radius: 16px;
  padding: 1.75rem 2rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.consultant-hero h1 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.35rem;
  color: var(--text-primary);
}

.consultant-hero p.lead {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin-bottom: 0;
}

/* Accueil consultant : salutation type dashboard (👋 + Bonjour/Bonsoir) */
@keyframes consultantGreetingIn {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes consultantWaveHand {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(18deg);
  }
  75% {
    transform: rotate(-8deg);
  }
}

.consultant-hero-greeting {
  overflow: hidden;
}

.consultant-greeting-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  animation: consultantGreetingIn 0.45s ease-out forwards;
}

.consultant-greeting-wave {
  font-size: 1.75rem;
  line-height: 1;
  display: inline-block;
  animation: consultantWaveHand 1.1s ease-in-out 0.35s 2;
  transform-origin: 70% 90%;
}

.consultant-greeting-title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--text-primary);
}

.consultant-greeting-sub {
  margin-top: 0.65rem;
  margin-bottom: 0 !important;
}

.consultant-section-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.85rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.consultant-section-title-muted {
  font-size: 0.95rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.consultant-task-section {
  background: var(--card-bg, #fff);
  border: 1px solid var(--card-border, rgba(0, 0, 0, 0.06));
  border-radius: 16px;
  padding: 1.25rem 1.35rem 1.35rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.consultant-task-feed {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.consultant-task-card {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--card-border, rgba(0, 0, 0, 0.08));
  background: var(--bg-secondary, #f8f9fc);
  text-decoration: none;
  color: var(--text-primary);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.consultant-task-card:hover {
  background: #fff;
  border-color: rgba(67, 97, 238, 0.22);
  box-shadow: 0 4px 14px rgba(67, 97, 238, 0.1);
  color: var(--text-primary);
}

.consultant-task-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(67, 97, 238, 0.14), rgba(63, 55, 201, 0.1));
  color: var(--primary-color, #4361ee);
  font-size: 1rem;
}

.consultant-task-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.consultant-task-title {
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.35;
}

.consultant-task-meta {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.35;
}

.consultant-task-chevron {
  flex-shrink: 0;
  align-self: center;
  color: var(--text-secondary);
  opacity: 0.65;
  font-size: 0.8rem;
}

.consultant-task-empty {
  padding: 0.5rem 0 0.25rem;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.consultant-tile {
  display: block;
  height: 100%;
  background: var(--card-bg, #fff);
  border: 1px solid var(--card-border, rgba(0, 0, 0, 0.08));
  border-radius: 14px;
  padding: 1.35rem 1.25rem;
  text-decoration: none;
  color: var(--text-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.consultant-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(67, 97, 238, 0.12);
  border-color: rgba(67, 97, 238, 0.25);
  color: var(--text-primary);
}

.consultant-tile-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(67, 97, 238, 0.12), rgba(63, 55, 201, 0.08));
  color: var(--primary-color, #4361ee);
  font-size: 1.15rem;
  margin-bottom: 0.85rem;
}

.consultant-tile h2 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.consultant-tile .tile-desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
}

/* ===== LIENS ===== */
a {
  color: var(--primary-color);
}

a:hover {
  color: var(--secondary-color);
}

/* ===== TITRES ===== */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
}

/* ===== AUTH (register, login) ===== */
body .register-container {
  background: var(--bg-primary);
  padding: 30px 40px;
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  text-align: center;
  width: 350px;
  max-width: 90%;
}

body .register-container img {
  width: 120px;
  margin-bottom: 20px;
}

body .register-container h1 {
  margin-bottom: 20px;
  color: var(--text-primary);
}

body .register-container label {
  display: block;
  text-align: left;
  margin: 10px 0 5px;
  font-weight: bold;
  color: var(--text-secondary);
}

body .register-container input {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 14px;
}

body .register-container button {
  width: 100%;
  padding: 10px;
  background: var(--success-color);
  border: none;
  border-radius: 8px;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s;
}

body .register-container button:hover {
  filter: brightness(0.95);
}

body .register-container p {
  margin-top: 15px;
  color: var(--text-secondary);
}

body .register-container a {
  color: var(--primary-color);
  text-decoration: none;
}

body .register-container a:hover {
  text-decoration: underline;
}

.register-page-wrapper {
  min-height: calc(100vh - 120px);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ===== VUE CARTES PROFILS (Style onboarding) ===== */

/* Container grid pour les cartes */
.profiles-container,
.cvs-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

/* Carte de profil */
.profile-card,
.cv-card {
  background: var(--card-bg);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-color);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Barre colorée en haut de la carte */
.profile-card::before,
.cv-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--success-color), var(--primary-color));
}

.profile-card:hover,
.cv-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

/* État sélectionné */
.profile-card.selected,
.cv-card.selected {
  border: 2px solid var(--primary-color);
  box-shadow: var(--shadow-lg);
}

/* Header de la carte */
.profile-card-header,
.cv-card-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.profile-header,
.cv-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
  flex: 1;
}

/* Nom du profil */
.profile-name,
.cv-name {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

/* Section d'infos */
.profile-info,
.cv-info {
  margin-bottom: 1rem;
}

/* Ligne d'info */
.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.9rem;
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  font-weight: 600;
  color: var(--text-primary);
}

.info-value {
  color: var(--text-secondary);
}

/* Actions dans la carte */
.profile-actions,
.cv-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

/* Checkbox pour sélection */
.profile-checkbox,
.cv-checkbox {
  width: 24px;
  height: 24px;
  cursor: pointer;
  accent-color: var(--primary-color);
  margin-top: 0.25rem;
}

/* ===== Paramétrage des listes (Profils / Besoins) - checkboxes alignés sur le thème ===== */
.cv-list-views-statuts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  min-height: 2rem;
  align-items: center;
}

.cv-list-views-statuts label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-weight: normal;
  cursor: pointer;
  color: var(--text-primary);
  padding: 0.4rem 0.65rem;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.cv-list-views-statuts label:hover {
  background: rgba(102, 126, 234, 0.08);
  border-color: rgba(102, 126, 234, 0.2);
}

.cv-list-views-statuts input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  cursor: pointer;
  accent-color: var(--primary-color);
  flex-shrink: 0;
}

.cv-list-views-statuts input[type="checkbox"]:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.25);
}

/* Blocs paramétrage listes : fonds pastel (sans liseré vertical) */
.cv-list-views-block,
.besoin-list-views-block {
  border-radius: 12px;
  border: 1px solid var(--card-border);
  overflow: hidden;
}

.cv-list-views-block-business {
  background: rgba(25, 135, 84, 0.12);
}

.cv-list-views-block-liste-cv {
  background: rgba(102, 126, 234, 0.1);
}

.cv-list-views-block-rh {
  background: rgba(111, 66, 193, 0.12);
}

.besoin-list-views-block-liste {
  background: rgba(23, 162, 184, 0.12);
}

.besoin-list-views-block-apourvoir {
  background: rgba(39, 174, 96, 0.12);
}

/* Titre des blocs paramétrage listes */
.list-views-block-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.list-views-block-title i {
  color: var(--primary-color);
  opacity: 0.9;
}

.list-views-block-subtitle {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

/* Barre d'outils de sélection */
.selection-toolbar {
  background: var(--card-bg);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.selection-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Badge d'invitation/statut spécial */
.invite-badge {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid rgba(21, 87, 36, 0.2);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* Barre de progression (optionnel) */
.progress-section {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.progress-bar-container {
  background: #e2e8f0;
  border-radius: 10px;
  height: 8px;
  overflow: hidden;
}

.progress-bar {
  width: 0%;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  height: 100%;
  border-radius: 10px;
  transition: width 0.3s ease;
}

.progress-percentage {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary-color);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .container {
    padding: 0 15px;
  }
  
  .header-content {
    padding: 0 1rem;
  }
  
  .header-content h1 {
    font-size: 2rem;
  }
  
  .stats-cards {
    grid-template-columns: 1fr;
  }
  
  table {
    font-size: 0.85rem;
  }
  
  th, td {
    padding: 10px;
  }
  
  table.dataTable thead th,
  table.dataTable tbody td {
    padding: 8px 10px;
    font-size: 0.85rem;
  }
  
  .main-container {
    padding: 0 1rem;
  }
  
  /* Cartes de profil responsive */
  .profiles-container,
  .cvs-container {
    grid-template-columns: 1fr;
  }
}

/* ===== FILTRES EXCEL PAR COLONNE ===== */

/* Bouton filtre type Excel dans l'en-tête */
.excel-filter-btn {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  padding: 0 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background 0.15s ease, color 0.15s ease;
}

.excel-filter-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.excel-filter-btn.active {
  background: var(--primary-color);
  color: #fff;
}

/* Overlay transparent pour capturer les clics hors du menu filtre */
.col-filter-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99998;
  background: transparent;
  display: none;
}

/* Menu filtre colonne - toujours au premier plan, position fixed pour ignorer le scroll */
.col-filter-menu {
  position: fixed;
  z-index: 99999 !important;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-lg);
  padding: 8px 10px;
  min-width: 220px;
  max-width: 260px;
  max-height: 320px;
  display: none;
  font-size: 13px;
  overflow: visible;
}

.col-filter-menu-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.col-filter-menu-header input {
  flex: 1;
  padding: 4px 6px;
  font-size: 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--input-bg);
  color: var(--text-primary);
}

.col-filter-menu-header input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.col-filter-menu-actions {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}

.col-filter-menu-actions button {
  flex: 1;
  padding: 4px 6px;
  font-size: 11px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  cursor: pointer;
  color: var(--text-primary);
  transition: background 0.2s ease;
}

.col-filter-menu-actions button:hover {
  background: var(--bg-tertiary);
}

.col-filter-menu-list {
  border-top: 1px solid var(--border-color);
  padding-top: 4px;
  max-height: 160px;
  overflow-y: auto;
}

.col-filter-menu-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}

.col-filter-menu-item input[type="checkbox"] {
  cursor: pointer;
}

.col-filter-menu-item label {
  cursor: pointer;
  flex: 1;
  margin: 0;
  user-select: none;
}

.col-filter-menu-footer {
  border-top: 1px solid var(--border-color);
  padding-top: 8px;
  margin-top: 6px;
  display: flex;
  justify-content: flex-end;
}

.col-filter-apply-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: var(--primary-color, #667eea);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s;
}

.col-filter-apply-btn:hover {
  background: var(--primary-hover, #3a56d4);
}

.col-filter-apply-btn i {
  font-size: 11px;
}

/* Mode recherche uniquement (pour colonnes à haute cardinalité) */
.col-filter-menu-search-only .col-filter-menu-list {
  max-height: 200px;
}

.col-filter-menu-search-only .col-filter-menu-actions {
  display: none;
}

/* Modales Activité : même structure que Manager associé (info-item + info-label + form-select form-select-sm) */
.activity-form-card .info-item {
  border-bottom: 1px solid var(--border-color);
}
.activity-form-card .info-item .activity-combo-wrap {
  position: relative;
  flex: 1 1 0;
  min-width: 200px;
}
/* Même rendu compact que .info-box .form-select-sm (Manager associé) */
.activity-form-card .info-item .form-select.form-select-sm {
  padding: 0.15rem 1.8rem 0.15rem 0.4rem !important;
  font-size: 0.85rem !important;
  min-height: 28px !important;
  height: auto !important;
  line-height: 1.4 !important;
  width: 100%;
  box-sizing: border-box;
}
.activity-combo-dropdown {
  position: absolute;
  z-index: 1001;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 4px;
  background: var(--card-bg);
  border: 1px solid var(--primary-color);
  border-radius: 6px;
  box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
  list-style: none;
  padding: 4px;
  display: none;
  max-height: 220px;
  overflow-y: auto;
}
.activity-combo-dropdown-item {
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 4px;
  color: var(--text-primary);
  transition: background-color 0.15s, color 0.15s;
}
.activity-combo-dropdown-item:hover {
  background-color: var(--primary-color);
  color: #fff;
}
.activity-combo-dropdown-empty {
  padding: 10px 12px;
  color: var(--text-secondary);
  font-style: italic;
  font-size: 0.9rem;
}

/* ===== MODALES AVEC ONGLETS (Style centralisé) ===== */

/* Modal overlay */
.modal-tabs {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000; /* Plus bas pour permettre au calendrier de s'afficher */
  padding: 20px;
  animation: fadeIn 0.3s ease-out;
}

.modal-tabs.active,
.modal-tabs[style*="display: block"],
.modal-tabs[style*="display: flex"] {
  display: flex !important;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Modal content container */
.modal-tabs-content {
  background: var(--card-bg);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 95vw;
  max-height: 92vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  animation: slideUp 0.3s ease-out;
  overflow: hidden;
  z-index: 1001;
  border: 1px solid var(--card-border);
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Modal header - hérite du style centralisé .modal-header-base */
.modal-tabs-header {
  border-radius: 16px 16px 0 0; /* Seule différence : border-radius plus arrondi */
}

/* Styles spécifiques pour .modal-tabs-title (les autres héritent du style centralisé) */
.modal-tabs-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal-tabs-title i {
  font-size: 1.2rem;
}

.modal-tabs-close {
  background: rgba(255, 255, 255, 0.2) !important;
  background-image: none !important;
  border: none !important;
  cursor: pointer;
  color: #fff !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  font-size: 1.25rem !important;
  padding: 0 !important;
  position: relative;
  z-index: 1;
  line-height: 1 !important;
  margin: 0 !important;
  opacity: 1 !important;
  box-sizing: border-box !important;
}
/* Croix dessinée en CSS (évite rectangle / double icône avec l’<i> à l’intérieur) */
.modal-tabs-close::before,
.modal-tabs-close::after {
  content: "" !important;
  position: absolute !important;
  width: 14px !important;
  height: 2px !important;
  background: currentColor !important;
  border-radius: 2px !important;
  display: block !important;
  top: 50% !important;
  left: 50% !important;
  transform-origin: center !important;
}
.modal-tabs-close::before {
  transform: translate(-50%, -50%) rotate(45deg) !important;
}
.modal-tabs-close::after {
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}
/* Masquer l’icône Font Awesome à l’intérieur pour n’afficher que la croix CSS */
.modal-tabs-close i,
.modal-tabs-close .fa,
.modal-tabs-close .fas,
.modal-tabs-close .fa-times {
  display: none !important;
}

/* ===== MODALE DE TEXTE/DESCRIPTION (Style centralisé réutilisable) ===== */
/* Modale pour afficher du texte long en grand format */
.text-viewer-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}

.text-viewer-modal.show,
.text-viewer-modal[style*="display: flex"] {
  display: flex !important;
}

.text-viewer-modal-content {
  background-color: var(--card-bg);
  color: var(--text-primary);
  border-radius: 16px;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--card-border);
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: textModalSlideIn 0.3s ease-out;
  position: relative;
  overflow: hidden;
}

@keyframes textModalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.text-viewer-modal-header {
  padding: 1.5rem;
  border-bottom: 1px solid var(--border-color);
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  border-radius: 16px 16px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white !important;
  position: relative;
  overflow: hidden;
}

.text-viewer-modal-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  pointer-events: none;
}

.text-viewer-modal-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
  z-index: 1;
  color: white !important;
}

.text-viewer-modal-title i {
  color: white !important;
}

.text-viewer-modal-close {
  background: rgba(255, 255, 255, 0.2) !important;
  border: none !important;
  cursor: pointer;
  color: #fff !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  font-size: 1.25rem !important;
  padding: 0 !important;
  position: relative;
  z-index: 1;
  line-height: 1 !important;
  margin: 0 !important;
  opacity: 1 !important;
  box-sizing: border-box !important;
}

.text-viewer-modal-close::before,
.text-viewer-modal-close::after {
  content: "" !important;
  position: absolute !important;
  width: 16px !important;
  height: 2px !important;
  background: currentColor !important;
  border-radius: 2px !important;
  display: block !important;
  top: 50% !important;
  left: 50% !important;
  transform-origin: center !important;
}

.text-viewer-modal-close::before {
  transform: translate(-50%, -50%) rotate(45deg) !important;
}

.text-viewer-modal-close::after {
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}

.text-viewer-modal-close:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  transform: rotate(90deg);
}

.text-viewer-modal-body {
  padding: 2rem;
  background-color: var(--card-bg) !important;
  color: var(--text-primary) !important;
  overflow-y: auto;
  flex: 1;
  line-height: 1.7;
  font-size: 1rem;
}

.text-viewer-modal-body pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: inherit;
  margin: 0;
}

.text-viewer-modal-body p {
  margin-bottom: 1rem;
}

.text-viewer-modal-body p:last-child {
  margin-bottom: 0;
}

/* Bouton pour ouvrir la modale de texte */
.btn-view-text {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-primary);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn-view-text:hover {
  background: var(--bg-secondary);
  border-color: var(--primary-color);
  color: var(--primary-color);
  box-shadow: var(--shadow-sm);
}

.btn-view-text i {
  font-size: 0.875rem;
}

.modal-tabs-close:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  color: #fff !important;
  transform: rotate(90deg);
}

.modal-tabs-close i {
  font-size: 0.875rem !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  margin: 0 !important;
}

/* Tabs navigation */
.modal-tabs-nav {
  display: flex;
  gap: 8px;
  padding: 16px 32px;
  background: var(--bg-secondary);
  border-bottom: 2px solid var(--border-color);
  overflow-x: auto;
  flex-wrap: nowrap;
}

.modal-tabs-nav::-webkit-scrollbar {
  height: 4px;
}

.modal-tabs-nav::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

.modal-tabs-nav::-webkit-scrollbar-thumb {
  background: var(--text-secondary);
  border-radius: 2px;
}

.modal-tab-btn {
  background: transparent;
  border: none;
  padding: 12px 20px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 10px;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.modal-tab-btn::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 3px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  transform: translateX(-50%);
  transition: width 0.3s ease;
}

.modal-tab-btn:hover {
  color: var(--primary-color);
  background: rgba(102, 126, 234, 0.08);
}

.modal-tab-btn.active {
  color: var(--primary-color);
  background: var(--card-bg);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}

.modal-tab-btn.active::before {
  width: 100%;
}

.modal-tab-btn i {
  font-size: 1rem;
}

/* Badge pour les étapes complétées */
.modal-tab-btn .tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--success-color);
  color: white;
  font-size: 0.7rem;
  margin-left: 6px;
}

/* Texte succès = token thème (--success-color), pas le vert Bootstrap */
.text-site-success {
  color: var(--success-color) !important;
}

/* Modal body */
.modal-tabs-body {
  padding: 32px;
  overflow-y: auto;
  flex: 1;
  background: var(--card-bg);
}

.modal-tabs-body::-webkit-scrollbar {
  width: 8px;
}

.modal-tabs-body::-webkit-scrollbar-track {
  background: var(--bg-secondary);
  border-radius: 10px;
}

.modal-tabs-body::-webkit-scrollbar-thumb {
  background: var(--text-secondary);
  border-radius: 10px;
}

.modal-tabs-body::-webkit-scrollbar-thumb:hover {
  background: var(--text-primary);
}

/* Tab panes */
.modal-tab-pane {
  display: none;
  animation: fadeInContent 0.4s ease-out;
}

.modal-tab-pane.active {
  display: block;
}

@keyframes fadeInContent {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fix pour les inputs de type date dans les modales avec onglets */
/* S'assurer que le custom date picker fonctionne dans les modales */
.modal-tabs input[type="date"],
.modal-tabs input[type="datetime-local"],
.modal-tabs input[type="time"],
.modal-tabs input[type="month"] {
  position: relative;
  z-index: 1;
  cursor: pointer;
}

/* ===== WIZARDS DE RÉUNION ===== */
/* Les wizards de réunion (prospection, recrutement, suivi) utilisent maintenant 
   le même style que les modales à onglets (.modal-tabs-nav et .modal-tab-btn) 
   pour une cohérence visuelle à travers toute l'application */

/* Gestion de l'affichage des étapes dans les wizards (géré par JavaScript) */
.rec-step,
.pt-step,
.pros-step,
.coca-step {
  display: none;
}

.rec-step.active,
.pt-step.active,
.pros-step.active,
.coca-step.active {
  display: block;
}

/* Note: Le z-index du custom-date-picker-popup (10000) est déjà défini 
   plus haut dans ce fichier et permet au calendrier de s'afficher 
   au-dessus des modales (z-index: 1000-1001) */

/* Grid helpers pour les modales */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 768px) {
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }
}

/* Responsive pour modales avec onglets */
@media (max-width: 768px) {
  .modal-tabs-content {
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }
  
  .modal-tabs-header {
    padding: 1rem;
  }
  
  .modal-tabs-title {
    font-size: 1.1rem;
  }
  
  .modal-tabs-title i {
    font-size: 1rem;
  }
  
  .modal-tabs-close {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    font-size: 1rem !important;
  }
  
  .modal-tabs-nav {
    padding: 12px 20px;
    gap: 6px;
  }
  
  .modal-tab-btn {
    padding: 10px 16px;
    font-size: 0.9rem;
  }
  
  .modal-tabs-body {
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .modal-tabs-nav {
    flex-wrap: wrap;
  }
  
  .modal-tab-btn {
    flex: 1 1 45%;
    justify-content: center;
  }
}

/* ===== SELECT2 STYLES (Centralisé) ===== */
/* Styles pour les menus déroulants avec recherche (Select2) */
.select2-container {
  width: 100% !important;
}

.select2-container--bootstrap-5 .select2-selection {
  min-height: 38px;
  border: 1px solid var(--border-color, #dee2e6);
  border-radius: 0.375rem;
  background-color: var(--bg-primary, #fff);
  color: var(--text-primary, #29295e);
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
  border-color: var(--primary-color, #667eea);
  box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
  padding-left: 12px;
  padding-right: 20px;
  line-height: 36px;
  color: var(--text-primary, #29295e);
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
  height: 36px;
  right: 8px;
}

.select2-container--bootstrap-5.select2-container--disabled .select2-selection {
  background-color: var(--bg-secondary, #e9ecef);
  opacity: 0.6;
  cursor: not-allowed;
}

.select2-container--bootstrap-5.select2-container--disabled .select2-selection--single {
  cursor: not-allowed;
}

.select2-dropdown {
  border: 1px solid var(--border-color, #dee2e6);
  border-radius: 0.375rem;
  background-color: var(--bg-primary, #fff);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  z-index: 9999 !important; /* Au-dessus des modales */
}

/* S'assurer que Select2 dropdown dans les modales est au-dessus */
.custom-modal .select2-dropdown,
.modal .select2-dropdown {
  z-index: 10000 !important;
}

.custom-modal .select2-container,
.modal .select2-container {
  z-index: 10000 !important;
}

.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--border-color, #dee2e6);
  border-radius: 0.375rem;
  padding: 8px 12px;
  background-color: var(--bg-primary, #fff);
  color: var(--text-primary, #29295e);
}

.select2-container--bootstrap-5 .select2-results__option {
  padding: 8px 12px;
  color: var(--text-primary, #29295e);
}

.select2-container--bootstrap-5 .select2-results__option--highlighted {
  background-color: var(--primary-color, #667eea);
  color: #fff;
}

.select2-container--bootstrap-5 .select2-results__option[aria-selected="true"] {
  background-color: var(--primary-color, #667eea);
  color: #fff;
}

/* Thème sombre pour Select2 */
[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection {
  background-color: var(--bg-primary, #1a1a1a);
  border-color: var(--border-color, #444);
  color: var(--text-primary, #fff);
}

[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
  color: var(--text-primary, #fff);
}

[data-theme="dark"] .select2-container--bootstrap-5.select2-container--disabled .select2-selection {
  background-color: var(--bg-secondary, #2a2a2a);
}

[data-theme="dark"] .select2-dropdown {
  background-color: var(--bg-primary, #1a1a1a);
  border-color: var(--border-color, #444);
}

[data-theme="dark"] .select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field {
  background-color: var(--bg-primary, #1a1a1a);
  border-color: var(--border-color, #444);
  color: var(--text-primary, #fff);
}

[data-theme="dark"] .select2-container--bootstrap-5 .select2-results__option {
  color: var(--text-primary, #fff);
}

/* ===== MENU DÉROULANT AVEC RECHERCHE (INPUT + LISTE) – STYLE CENTRAL ===== */
/* Réutilisable partout : écoles, diplômes, nationalité, contacts, CV, etc. */
.search-dropdown-wrapper {
  position: relative;
  width: 100%;
  z-index: 10001; /* Au-dessus des cellules / listes en dessous (même section) */
}

.search-dropdown-panel {
  position: absolute !important;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 6px;
  background: var(--bg-primary, #fff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
  max-height: 280px;
  overflow-y: auto;
  z-index: 10000 !important; /* Au premier plan (modales, overlays, etc.) */
  padding: 6px;
  list-style: none;
  margin-bottom: 0;
}

/* Masquer le panneau quand il est fermé (ex. prétention salariale, autocomplétions) */
.search-dropdown-panel[aria-hidden="true"] {
  display: none !important;
}

/* Variante position:fixed pour passer au premier plan (échappe à overflow:hidden des parents).
   left / top / width sont posés en inline par le JS (positionPanelFixed, etc.) — ne pas les écraser en !important. */
.search-dropdown-panel.search-dropdown-panel--fixed {
  position: fixed !important;
  z-index: 99999 !important;
  min-width: 120px;
}

.search-dropdown-panel__item {
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 2px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  font-weight: 500;
  color: var(--text-primary, #29295e);
}

.search-dropdown-panel__item:last-child {
  margin-bottom: 0;
}

.search-dropdown-panel__item:hover {
  background-color: #3f37c9;
  color: #fff;
}

.search-dropdown-panel__item.selected {
  background-color: rgba(63, 55, 201, 0.12);
  color: #3f37c9;
  font-weight: 600;
}

.search-dropdown-panel__item.selected:hover {
  background-color: #3f37c9;
  color: #fff;
}

.search-dropdown-panel__item-title {
  font-weight: 600;
  color: inherit;
}

.search-dropdown-panel__item-subtitle {
  font-size: 0.85em;
  opacity: 0.9;
  margin-top: 2px;
}

.search-dropdown-panel__empty {
  padding: 14px;
  text-align: center;
  color: var(--text-muted, #64748b);
  font-style: italic;
  font-size: 0.9375rem;
  cursor: default;
}

/* Option rendue comme bouton (ex. combobox RGPD) */
.search-dropdown-panel button.search-dropdown-panel__item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

/* Thème sombre */
[data-theme="dark"] .search-dropdown-panel {
  background-color: var(--bg-primary);
  border-color: var(--border-color);
}

[data-theme="dark"] .search-dropdown-panel__item {
  color: var(--text-primary);
}

[data-theme="dark"] .search-dropdown-panel__empty {
  color: var(--text-muted);
}

/* ===== SÉLECTEUR MULTIPLE MODERNE ===== */
/* Style user-friendly pour la sélection multiple avec checkboxes */
.multi-select-container {
  border: 1px solid var(--input-border);
  border-radius: 8px;
  background: var(--input-bg);
  max-height: 320px;
  overflow-y: auto;
  padding: 0.5rem;
}

.multi-select-container.large {
  max-height: 450px;
}

.multi-select-container::-webkit-scrollbar {
  width: 8px;
}

.multi-select-container::-webkit-scrollbar-track {
  background: var(--bg-secondary);
  border-radius: 4px;
}

.multi-select-container::-webkit-scrollbar-thumb {
  background: var(--text-secondary);
  border-radius: 4px;
}

.multi-select-container::-webkit-scrollbar-thumb:hover {
  background: var(--text-primary);
}

.multi-select-item {
  display: flex;
  align-items: center;
  padding: 0.75rem;
  border-radius: 6px;
  margin-bottom: 0.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--card-bg);
  border: 1px solid transparent;
}

.multi-select-item:hover {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.05) 100%);
  border-color: var(--primary-color);
  transform: translateX(4px);
}

.multi-select-item.selected {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.12) 0%, rgba(118, 75, 162, 0.08) 100%);
  border-color: var(--primary-color);
}

.multi-select-item input[type="checkbox"] {
  margin: 0 0.75rem 0 0;
  width: 1.1rem;
  height: 1.1rem;
  cursor: pointer;
  flex-shrink: 0;
}

.multi-select-item-content {
  flex: 1;
  min-width: 0;
}

.multi-select-item-title {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.125rem;
  word-break: break-word;
}

.multi-select-item-subtitle {
  font-size: 0.85rem;
  color: var(--text-secondary);
  word-break: break-word;
}

.multi-select-item.hidden {
  display: none;
}

/* Style pour le compteur de sélection */
.multi-select-count {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 0.5rem;
}

.multi-select-count i {
  margin-right: 0.25rem;
}

/* Instructions box - centralisé pour les pages de matching */
.instructions {
  background-color: rgba(102, 126, 234, 0.05);
  border-left: 4px solid var(--primary-color, #667eea);
  padding: 15px;
  border-radius: 0 var(--border-radius, 12px) var(--border-radius, 12px) 0;
  margin: 20px 0;
  font-size: 0.95rem;
}

.instructions h3 {
  color: var(--primary-color, #667eea);
  margin-bottom: 10px;
}

.instructions ul {
  padding-left: 20px;
}

.instructions li {
  margin-bottom: 5px;
}

.multi-select-count i {
  font-size: 1rem;
}

/* ── Sort buttons in ExcelColumnFilters menu ── */
.col-filter-sort-actions {
  display: flex;
  gap: 4px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-color, #dee2e6);
}

.col-filter-sort-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 6px;
  border: 1px solid var(--border-color, #dee2e6);
  border-radius: 6px;
  background: var(--bg-secondary, #f7f8fb);
  color: var(--text-primary, #333);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.col-filter-sort-btn:hover {
  background: var(--primary-color, #667eea);
  color: #fff;
  border-color: var(--primary-color, #667eea);
}

.col-filter-sort-btn.active {
  background: var(--primary-color, #667eea);
  color: #fff;
  border-color: var(--primary-color, #667eea);
}

/* ── Sort indicators on table headers ── */
.sort-indicator {
  margin-left: 4px;
  font-size: 0.7rem;
  color: var(--primary-color, #667eea);
}

th.sort-asc,
th.sort-desc {
  color: var(--primary-color, #667eea);
}

/* ── Pastel pills : type de frais (ODM, simulateur marge, etc.) ── */
.odm-expense-type-pill {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  border: 1px solid transparent;
  line-height: 1.35;
  letter-spacing: 0.01em;
}
.odm-expense-type-pill--grand_deplacement {
  background: #f3e8ff;
  color: #6b5b8c;
  border-color: #e4d4f7;
}
.odm-expense-type-pill--mission_normale {
  background: #ecfdf5;
  color: #4a7c6a;
  border-color: #d1fae5;
}
.odm-expense-type-pill--mission_particuliere {
  background: #eff6ff;
  color: #5a6f8f;
  border-color: #dbeafe;
}
.odm-expense-type-pill--teletravail {
  background: #f4f4f5;
  color: #6b6b76;
  border-color: #e4e4e7;
}
.odm-expense-type-pill--deplacement_ponctuel {
  background: #fff7ed;
  color: #8f6b4e;
  border-color: #fed7aa;
}
.odm-expense-type-pill--intercontrat {
  background: #fdf4f8;
  color: #8a5f78;
  border-color: #f9dceb;
}
.odm-expense-type-pill--default {
  background: #f5f5f4;
  color: #6b6560;
  border-color: #e7e5e4;
}

/* ── Matching détail besoin↔CV : aperçu latéral (split + iframe) ── */
.matching-detail-clickable-row {
  cursor: pointer;
}
.matching-detail-split {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: min(72vh, 880px);
  position: relative;
  --matching-detail-preview-top: 72px;
  --matching-detail-preview-bottom: 16px;
}
.matching-detail-split--open {
  align-items: flex-start;
}
.matching-detail-split__list {
  flex: 1 1 100%;
  min-width: 0;
  transition: flex-basis 0.42s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.42s cubic-bezier(0.4, 0, 0.2, 1);
  max-width: 100%;
}
.matching-detail-split--open .matching-detail-split__list {
  flex: 0 0 28%;
  max-width: 36%;
}
.matching-detail-split__preview {
  flex: 0 0 0;
  width: 0;
  min-width: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  position: relative;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border-left: none;
  box-shadow: -12px 0 40px rgba(15, 23, 42, 0.07);
  transition: flex-basis 0.42s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.28s ease, width 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}
.matching-detail-split--open .matching-detail-split__preview {
  flex: 1 1 68%;
  width: auto;
  min-width: 280px;
  opacity: 1;
  pointer-events: auto;
  position: sticky;
  top: var(--matching-detail-preview-top);
  align-self: flex-start;
  height: calc(100vh - var(--matching-detail-preview-top) - var(--matching-detail-preview-bottom));
  max-height: calc(100vh - var(--matching-detail-preview-top) - var(--matching-detail-preview-bottom));
  min-height: 280px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 0 10px 10px 0;
}
.matching-detail-preview__collapse {
  flex: 0 0 auto;
  width: 14px;
  min-width: 14px;
  align-self: stretch;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  z-index: 6;
  display: flex;
  align-items: stretch;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.matching-detail-preview__collapse::after {
  content: '';
  width: 3px;
  align-self: stretch;
  margin: 10px 0;
  background: linear-gradient(180deg, #cbd5e1 0%, #94a3b8 50%, #cbd5e1 100%);
  border-radius: 0 3px 3px 0;
}
.matching-detail-preview__collapse:hover::after {
  width: 4px;
  background: linear-gradient(180deg, var(--primary-color, #4361ee) 0%, #6366f1 100%);
}
.matching-detail-preview__inner {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border-color);
  overflow: hidden;
}
.matching-detail-preview__header {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--card-bg, #fff);
  border-bottom: 1px solid var(--border-color);
  z-index: 3;
}
.matching-detail-preview__identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.matching-detail-preview__identity-text {
  min-width: 0;
  flex: 1 1 auto;
}
.matching-detail-preview__title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  min-width: 0;
}
.matching-detail-preview__title-row .matching-detail-preview__name {
  flex: 1 1 auto;
  min-width: 0;
}
.matching-detail-preview__quick-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  flex-shrink: 0;
}
.matching-detail-preview__thumbs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.matching-detail-preview__thumbs .thumb-btn {
  padding: 0.2rem 0.4rem;
  font-size: 0.85rem;
  background: transparent;
  border: 2px solid #dee2e6;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  color: #6c757d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.matching-detail-preview__thumbs .thumb-btn:hover {
  border-color: var(--primary-color, #4361ee);
  color: var(--primary-color, #4361ee);
}
.matching-detail-preview__thumbs .thumb-btn.active {
  color: #fff;
}
.matching-detail-preview__thumbs .thumb-up-btn.active {
  background: var(--success-color, #10b981);
  border-color: var(--success-color, #10b981);
}
.matching-detail-preview__thumbs .thumb-down-btn.active {
  background: var(--danger-color, #dc3545);
  border-color: var(--danger-color, #dc3545);
}
.matching-detail-preview__avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary-color, #4361ee) 0%, #6366f1 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
}
.matching-detail-preview__name {
  display: block;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-primary);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.matching-detail-preview__meta {
  display: block;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.matching-detail-preview__frame-wrap {
  flex: 1 1 auto;
  position: relative;
  min-height: 200px;
  background: #e2e8f0;
}
.matching-detail-preview__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}
.matching-detail-preview__loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #f1f5f9;
  z-index: 2;
  color: var(--text-secondary);
  font-size: 0.9rem;
}
.matching-detail-preview__loading.is-hidden {
  display: none;
}
.matching-detail-clickable-row.is-preview-selected {
  background-color: rgba(67, 97, 238, 0.1) !important;
  box-shadow: inset 3px 0 0 var(--primary-color, #4361ee);
}

@media (max-width: 991px) {
  .matching-detail-split {
    min-height: auto;
  }
  .matching-detail-split--open .matching-detail-split__list {
    display: none;
  }
  .matching-detail-split__preview {
    position: fixed;
    inset: 0;
    z-index: 1050;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    flex-direction: row;
    transform: translateX(100%);
    opacity: 1;
    pointer-events: none;
  }
  .matching-detail-preview__collapse {
    width: 44px;
    min-width: 44px;
  }
  .matching-detail-split--open .matching-detail-split__preview {
    transform: translateX(0);
    pointer-events: auto;
    top: 0 !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    border-radius: 0;
  }
}