/* ======================================
   CONTENEUR RESPONSIVE
   ====================================== */
.table-wrapper {
  overflow-x: auto;
  margin: 1.5rem 0;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* ======================================
   STYLE PRINCIPAL DES TABLEAUX
   (tous les tableaux dans .main-content
    et ceux portant .border-collap)
   ====================================== */
.main-content table,
table.border-collap {
  width: 100%;
  border-collapse: collapse;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  font-size: 0.88rem;
}

/* bordures générales */
.main-content table,
.main-content table th,
.main-content table td,
table.border-collap,
table.border-collap th,
table.border-collap td {
  border: 1px solid #dee2e6;
}

/* padding & alignement */
.main-content table th,
.main-content table td,
table.border-collap th,
table.border-collap td {
  padding: 12px 15px;
  text-align: left;
  vertical-align: middle;
}

/* en-tête (tous les <th>) */
.main-content table th,
table.border-collap th {
  background-color: #343a40; /* couleur d’en-tête */
  color: #ffffff;
  font-weight: 600;
}

/* zébrage des lignes paires */
.main-content table tbody tr:nth-child(even),
table.border-collap tbody tr:nth-child(even) {
  background-color: #f8f9fa;
}

/* hover sur les lignes */
.main-content table tbody tr:hover,
table.border-collap tbody tr:hover {
  background-color: #e9ecef;
  transition: background 0.2s ease;
}

/* ======================================
   ANIMATIONS ET HIGHLIGHT
   ====================================== */
.highlight-new {
  animation: highlightAnimation 6s ease-in-out 3;
}
@keyframes highlightAnimation {
  0%   { background-color: #b0e0e6; }
  50%  { background-color: transparent; }
  100% { background-color: #b0e0e6; }
}

/* ======================================
   STATUS CELLS
   ====================================== */
.status-cell {
  padding: 5px 10px;
  border-radius: 4px;
  text-align: center;
  color: white;
  font-weight: bold;
}
.status-accepté       { background-color: #28a745; }
.status-refusé        { background-color: #dc3545; }
.status-en-cours      { background-color: #ffc107; }
.status-délai-dépassé { background-color: #6c757d; }

/* ======================================
   MEDIA QUERIES
   ====================================== */
@media (max-width: 768px) {
  .form-inline {
    flex-direction: column;
    align-items: stretch;
  }

  .form-inline input[type="text"],
  .form-inline input[type="email"],
  .form-inline input[type="tel"],
  .form-inline input[type="date"],
  .form-inline input[type="time"],
  .form-inline select {
    width: 100%;
    margin-bottom: 10px;
  }

  .main-content table th,
  .main-content table td,
  table.border-collap th,
  table.border-collap td {
    padding: 10px;
  }
}

/* ────────────────────────────────────────────────
   AJOUTS POUR TOUS LES TABLEAUX EXISTANTS / COLLÉS
   Font-weight !important pour écraser le inline
   ──────────────────────────────────────────────── */

/* Neutralise les largeurs de <col> / <colgroup> */
.main-content col,
.main-content colgroup {
  width: auto !important;
}

/* Gère le <center> éventuel */
.main-content center {
  display: block !important;
  text-align: center !important;
  margin: 1.5rem 0 !important;
}
.main-content center > table {
  margin: auto !important;
}

/* Cible tous les tableaux dans .main-content */
/* et écrase tout style inline */
.main-content table {
  width: 100% !important;
  max-width: none !important;
  border-collapse: collapse !important;
  margin: 1.5rem 0 !important;
  background-color: #fff !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  font-size: 0.88rem !important;
  table-layout: auto !important;
}