/* ============================================
   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;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  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;
}

/* 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(67, 97, 238, 0.15), rgba(79, 70, 229, 0.10));
  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, #212529);
}

.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, #212529);
  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 ===== */

/* Header avec fond dégradé (style standard) */
.header-container {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  color: white;
  padding: 2rem 0;
  margin-bottom: 2rem;
  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);
}

.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;
}

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

/* Style unifié pour les boutons dans le header (identique aux nav-link) */
/* Surcharger les styles de theme.css avec plus de spécificité */
.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: 10px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 600;
  padding: 10px 14px;
  text-decoration: none !important;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 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.16) !important;
  color: #fff !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.22) !important;
  color: #fff !important;
  text-decoration: none !important;
  border-bottom-color: transparent !important;
}

.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.22);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
  padding: 10px 14px;
  backdrop-filter: blur(10px);
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 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.16);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
  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.22);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
  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: 8px;
  margin: 0;
  white-space: nowrap;
  background: transparent !important;
  border: none !important;
  border-bottom: none !important;
  border-radius: 10px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 600;
  padding: 10px 14px;
  text-decoration: none !important;
  transition: all 0.2s ease;
  cursor: pointer;
  font-family: inherit;
  font-size: 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.16) !important;
  color: #fff !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: #212529 !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 (hors header-buttons) - pour compatibilité */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  text-decoration: none;
  border-radius: 50px;
  font-weight: 500;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}

button.back-link {
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.2);
}

.back-link:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  color: white;
}

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

.card-body {
  padding: 1.5rem;
}

.card-header {
  background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
  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-md);
  padding: 30px;
  margin-bottom: 30px;
  color: var(--text-primary);
}

.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 {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* ===== 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 GRIS) ===== */
.table-container {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  position: relative;
  min-height: 400px;
}

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

table {
  width: 100%;
  max-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  background: var(--card-bg);
  color: var(--text-primary);
  table-layout: auto;
}

/* Style GRIS pour les headers de tableaux */
thead {
  background: #e9ecef !important;
  color: #212529 !important;
}

thead th,
table thead th,
.table thead th,
.dataTable thead th,
.display thead th {
  background: #e9ecef !important;
  color: #212529 !important;
  font-weight: 600;
  border-bottom: 3px solid #ced4da !important;
  border-top: 1px solid #ced4da !important;
  padding: 15px;
  text-align: left;
  font-size: 0.95rem;
  user-select: none;
  transition: all 0.3s ease;
}

thead th i,
table thead th i,
.table thead th i {
  color: #212529 !important;
}

th:first-child {
  border-top-left-radius: var(--border-radius);
}

th:last-child {
  border-top-right-radius: var(--border-radius);
}

th:hover {
  background: #dee2e6 !important;
}

tbody tr {
  background: var(--card-bg);
  border-color: var(--border-color);
  transition: background-color 0.2s ease;
}

tbody tr:nth-child(even) {
  background: var(--bg-secondary);
}

tbody tr:hover {
  background: var(--bg-tertiary);
}

td {
  padding: 15px;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.95rem;
  transition: background-color 0.2s ease;
  vertical-align: middle;
  color: var(--text-primary);
  background-color: inherit;
  border: 1px solid var(--border-color) !important;
}

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

tbody tr:last-child td:first-child {
  border-bottom-left-radius: var(--border-radius);
}

tbody tr:last-child td:last-child {
  border-bottom-right-radius: var(--border-radius);
}

/* DataTables spécifique - Style gris */
table.dataTable,
table.display {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid var(--card-border) !important;
}

table.dataTable thead th,
table.display thead th {
  background: #e9ecef !important;
  color: #212529 !important;
  border: 1px solid #ced4da !important;
  border-bottom: 3px solid #ced4da !important;
  border-top: 1px solid #ced4da !important;
  font-weight: 600 !important;
  padding: 12px 10px !important;
}

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

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

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

table.dataTable tbody td,
table.display tbody td {
  border: 1px solid var(--border-color) !important;
  padding: 10px !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) !important;
  border: 1px solid var(--border-color) !important;
  padding: 8px 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: 4px 8px !important;
  border-radius: 4px !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 */
.status-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;
  width: 120px;
}

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

.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(67, 97, 238, 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: all 0.3s ease;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: white !important;
  border-color: var(--primary-color) !important;
  /* transform: translateY(-2px); */
  box-shadow: var(--shadow-md);
  color: var(--primary-color) !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;
  transform: translateY(-2px);
  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;
  transform: translateY(-2px);
  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 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;
  transform: translateY(-1px);
  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;
  transform: translateY(-1px);
  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;
  transform: translateY(-1px);
  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;
  transform: translateY(-1px);
  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);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(67, 97, 238, 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) */
.btn-danger {
  background-color: var(--danger-color, #dc3545) !important;
  color: white !important;
  border: 1px solid var(--danger-color, #dc3545) !important;
  font-weight: 500;
  transition: all 0.3s ease;
  border-radius: 8px;
}

.btn-danger:hover,
.btn-danger:focus {
  background-color: #c82333 !important;
  border-color: #c82333 !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  color: white !important;
}

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

/* Bouton danger pastel dans les tableaux */
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(220, 53, 69, 0.2) !important;
  color: rgb(173, 41, 54) !important;
  border-color: rgba(220, 53, 69, 0.3) !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(220, 53, 69, 0.3) !important;
  color: rgb(173, 41, 54) !important;
  border-color: rgba(220, 53, 69, 0.4) !important;
}

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

.btn-outline-danger:hover {
  background: var(--danger-color, #dc3545) !important;
  color: white !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--danger-color, #dc3545) !important;
}

/* 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;
  transform: translateY(-2px);
  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;
  transform: translateY(-2px);
  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;
  transform: translateY(-2px);
  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 {
  transform: translateY(-2px);
  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;
}

/* ===== PILLS (Style pastel) ===== */
.pill {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  display: inline-block;
}

/* 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(67, 97, 238, 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: 600;
  color: #111 !important; /* Option E: black text inside the tag */
  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(67, 97, 238, 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);
}

/* ===== 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);
}

.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(67, 97, 238, 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(67, 97, 238, 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;
}

/* ===== 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(67, 97, 238, 0.1);
}

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

.form-select:focus {
  outline: none;
  background: var(--input-bg);
  border-color: var(--input-focus-border);
  box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
  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(67, 97, 238, 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(67, 97, 238, 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(67, 97, 238, 0.15);
  transform: translateY(-1px);
}

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;
}

/* 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='%234361ee'%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(67, 97, 238, 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(67, 97, 238, 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(67, 97, 238, 0.15);
  color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(67, 97, 238, 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(67, 97, 238, 0.2);
  transform: translateY(-1px);
}

/* 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(67, 97, 238, 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;
}

/* 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(67, 97, 238, 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(67, 97, 238, 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(67, 97, 238, 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(67, 97, 238, 0.1);
  border-color: var(--primary-color);
  color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(67, 97, 238, 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(67, 97, 238, 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(67, 97, 238, 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(67, 97, 238, 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(67, 97, 238, 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(67, 97, 238, 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(67, 97, 238, 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(67, 97, 238, 0.15);
  border-color: var(--primary-color);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(67, 97, 238, 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;
  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: 10001;
  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: 8px;
}

.custom-date-picker-time .time-dropdown::-webkit-scrollbar-track {
  background: var(--bg-secondary);
  border-radius: 0 8px 8px 0;
}

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

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

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

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

.custom-date-picker-time .time-option:hover {
  background: rgba(67, 97, 238, 0.1);
  color: var(--primary-color);
  padding-left: 1.25rem;
}

.custom-date-picker-time .time-option.selected {
  background: linear-gradient(90deg, rgba(67, 97, 238, 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(67, 97, 238, 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);
  transform: translateY(-1px);
  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(67, 97, 238, 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(67, 97, 238, 0.2) !important;
  color: var(--primary-color) !important;
  box-shadow: 0 0 0 2px rgba(67, 97, 238, 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(67, 97, 238, 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;
  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;
}

.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;
}

/* 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;
}

/* ===== 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;
}

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

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

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

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

/* ===== 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;
}

/* 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;
}

/* Menu filtre colonne */
.col-filter-menu {
  position: absolute;
  z-index: 2000;
  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: 260px;
  display: none;
  font-size: 13px;
}

.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(67, 97, 238, 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;
}

/* 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 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;
  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;
}

/* ===== 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);
  transform: translateY(-1px);
  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(67, 97, 238, 0.08);
}

.modal-tab-btn.active {
  color: var(--primary-color);
  background: var(--card-bg);
  box-shadow: 0 2px 8px rgba(67, 97, 238, 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;
}

/* 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 {
  display: none;
}

.rec-step.active,
.pt-step.active,
.pros-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, #212529);
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
  border-color: var(--primary-color, #4361ee);
  box-shadow: 0 0 0 0.2rem rgba(67, 97, 238, 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, #212529);
}

.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, #212529);
}

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

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

.select2-container--bootstrap-5 .select2-results__option[aria-selected="true"] {
  background-color: var(--primary-color, #4361ee);
  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);
}

/* ===== 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(67, 97, 238, 0.05);
  border-left: 4px solid var(--primary-color, #4361ee);
  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, #4361ee);
  margin-bottom: 10px;
}

.instructions ul {
  padding-left: 20px;
}

.instructions li {
  margin-bottom: 5px;
}

.multi-select-count i {
  font-size: 1rem;
}