.listUserContainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}


.user-item {
    display: flex;
    padding: 8px 16px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-radius: 14px;
    border: 1px solid #E5E7EB;
    
    /* Ajout pour la fluidité */
    transition: all 0.2s ease-in-out;
    cursor: pointer; /* Indique que l'élément est cliquable */
    background-color: #ffffff;
}

/* État au survol */
.user-item:hover {
    border-color: #FF9C02; /* Bordure un peu plus foncée */
    background-color: #F9FAFB; /* Fond gris très léger */
    transform: translateY(-2px); /* Petit effet de levée */
    box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1); /* Ombre légère */
}

.icon-user-container {
    display: flex;
    width: 48px;
    height: 48px;
    justify-content: center;
    align-items: center;

    border-radius: 14px;
    background: linear-gradient(180deg, #FFF7ED 0%, #FFFBEB 100%);
    box-shadow: 0 10px 15px -3px #F5E7D3, 0 4px 6px -4px rgba(43, 127, 255, 0.50);
}

.user-item-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.user-statut {
    display: flex;
    padding: 8px 12px;
    justify-content: center;
    align-items: center;
    gap: 10px;  
    color: #008236;

    border-radius: 14px;
    background: #DCFCE7;
}

.user-statut.suspended {
    background: #FFE2E2;
}

.user-statut.suspended  span {
    color: #C10007;
}

.btn-filter-serach {
    display: flex;
    padding: 4px 12px;
    align-items: center;
    gap: 4px;
    cursor: pointer;

    border-radius: 33554400px;
    background: #FFEDD4;
}

.btn-filter-serach span {
    font: var(--text-p);
    color: #CA3500;
}

.userEmptyContainer {
    display: flex;
    padding: 16px 0;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    align-self: stretch;
    color: #6A7282;
}


.iconeUpload {
    display: flex;
    width: 48px;
    height: 48px;
    justify-content: center;
    align-items: center;
    border-radius: 14px;
    background: linear-gradient(135deg, #DCFCE7 0%, #D0FAE5 100%);
}
.iconeUpload span {
    font-size: 32px;
    color: #00A63E;
}


/* On cache l'input réel mais on le laisse cliquable par-dessus tout */
.hiddenFileInput {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* Rend l'input invisible */
    cursor: pointer;
    z-index: 2; /* S'assure qu'il est au-dessus du texte et de l'icône */
}

.iconeUpload {
    margin-bottom: 8px;
    color: #6A7282;
}


.containerUpload {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border: 2px dashed #E5E7EB;
  border-radius: 12px;
  /* min-height: 120px; */
  height: 150px; /* Hauteur fixe pour éviter le débordement */
  width: 100%; /* S'assure qu'il ne dépasse pas du parent */
  box-sizing: border-box; /* Inclut le padding dans le calcul de la largeur */
  overflow: hidden; /* Empêche tout débordement visuel */
}

.containerUpload:hover {
  border-color: var(--color-primary, #2B7FFF);
  background-color: #F9FAFB;
}

/* SOLUTION AU DÉBORDEMENT DU TEXTE */
.textUpload {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%; /* Important */
  overflow: hidden; /* Coupe ce qui dépasse */
}

.textUpload span:first-child {
  display: block;
  width: 100%;
  white-space: nowrap; /* Empêche le retour à la ligne */
  overflow: hidden; /* Cache le texte trop long */
  text-overflow: ellipsis; /* Ajoute les "..." */
  padding: 0 10px;
}

.userSearchAndFilterContainer {
    display: flex;
    align-items: center;
    gap: 16px;
    align-self: stretch;
}

/* Inscriptions Design  */
.ContainerInscriptions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    align-self: stretch;
}

.cardStatInscriptions {
    display: flex;
    padding: 24px;
    flex-direction: column;
    gap: 16px;

    border-radius: 14px;
    border-left: 4px solid #99A1AF;
    background: #FFF;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.10);
}

.inscriptionStatInfoContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

.table-wrapper {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  overflow: hidden;
  align-self: stretch;
}

/* ===== TABLE ===== */
.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table thead {
  background: #f9fafb;
}

.data-table th {
  padding: 16px;
  text-align: left;
  font-size: 13px;
  color: #6b7280;
  font-weight: 600;
}

.data-table td {
  padding: 16px;
  border-top: 1px solid #f0f0f0;
  font-size: 14px;
}

/* ===== USER CELL ===== */
.user {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

/* ===== BADGES ===== */
.badge {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.badge.pending {
  background: #ffedd5;
  color: #ea580c;
}

.badge.valid {
  background: #dcfce7;
  color: #16a34a;
}

.badge.rejected {
  background: #fee2e2;
  color: #dc2626;
}

/* ===== ACTIONS ===== */
.actions {
  display: flex;
  gap: 8px;
}

.actions button {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-weight: bold;
}

.approve {
  background: #22c55e;
  color: #fff;
}

.reject {
  background: #ef4444;
  color: #fff;
}


@media (max-width: 768px) {
  .data-table thead {
    display: none;
  }

  .data-table,
  .data-table tbody,
  .data-table tr,
  .data-table td {
    display: block;
    width: 100%;
  }

  .data-table tr {
    margin-bottom: 16px;
    border: 1px solid #f0f0f0;
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0 6px 16px rgba(0,0,0,.05);
  }

  .data-table td {
    border: none;
    padding: 8px 0;
    display: flex;
    justify-content: space-between;
    gap: 16px;
  }

  .data-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #6b7280;
  }

  .actions {
    justify-content: flex-end;
  }
}

/* Modal detail  */
.custom-modal {
  border-radius: 20px;
  overflow: hidden;
}

/* TITRES */
.detail-section {
  margin-bottom: 32px;
}

.detail-section h6 {
  font-weight: 700;
  margin-bottom: 16px;
  color: #111827;
}

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

.detail-grid div span {
  display: block;
  font-size: 12px;
  color: #6b7280;
}

.detail-grid div strong {
  font-size: 14px;
}

/* DOCUMENTS */
.documents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
}

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

.doc-card {
  background: #f9fafb;
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  transition: 0.2s;
}

.doc-card span {
  display: block;
  font-size: 13px;
  margin-bottom: 8px;
  font-weight: 600;
}

.doc-card img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
}

.doc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}

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




/* --- MEDIA QUERIES (Responsive) --- */

@media (max-width: 768px) {
  .grid-input-container {
    /* Mobile: 1 seule colonne, les lignes se font automatiquement */
    grid-template-columns: 1fr;
  }
}