body {
   min-height: 100vh;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#wrapper {
   background: transparent;
}

#content-wrapper {
   background: transparent;
}

/* En-tête Card */
.card.mb-1 {
   border: none;
   border-radius: 20px;
   box-shadow: var(--card-shadow);
   overflow: hidden;
   margin-bottom: 1.5rem !important;
   position: relative;
}

.card.mb-1::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
   pointer-events: none;
}

.card.mb-1 .card-body {
   padding: 1.5rem 2rem;
   position: relative;
   z-index: 1;
}

.card.mb-1 h4 {
   color: #28082f;
   font-weight: 600;
   margin: 0;
   font-size: 1.5rem;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.card.mb-1 .btn-info {
   background: white;
   color: #667eea;
   border: none;
   padding: 0.6rem 1.5rem;
   border-radius: 50px;
   font-weight: 600;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
   transition: all 0.3s ease;
}

.card.mb-1 .btn-info:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
   background: #f8f9fa;
}

.card.mb-1 .btn-info i {
   margin-right: 0.5rem;
}

/* Table Card */
.card.py-2 {
   background: white;
   border: none;
   border-radius: 20px;
   box-shadow: var(--card-shadow);
   transition: all 0.3s ease;
}

.card.py-2:hover {
   box-shadow: var(--hover-shadow);
}

.card-body.table-responsive {
   padding: 2rem;
}

/* Table Styling */
.data-table {
   border-collapse: separate;
   border-spacing: 0;
   width: 100%;
}

.data-table thead {
   background: linear-gradient(135deg, #f39c12 0%, #e74c3c 100%) !important;
   position: relative;
}

.data-table thead th {
   color: rgb(250, 244, 244) !important;
   background: #2c3e50;
   font-weight: 600;
   text-transform: uppercase;
   font-size: 0.85rem;
   letter-spacing: 0.5px;
   padding: 1rem !important;
   border: none !important;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.data-table thead tr th:first-child {
   border-top-left-radius: 12px;
}

.data-table thead tr th:last-child {
   border-top-right-radius: 12px;
}

.data-table tbody tr {
   transition: all 0.3s ease;
   border-bottom: 1px solid #e9ecef;
}

.data-table tbody tr:hover {
   background: linear-gradient(90deg, #f8f9fa 0%, #e9ecef 100%);
   transform: scale(1.01);
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.data-table tbody td {
   vertical-align: middle;
   color: #2c3e50;
   font-size: 0.95rem;
}

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

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

/* Action Buttons */
.btn-sm {
   padding: 0.4rem 0.8rem;
   border-radius: 8px;
   margin-right: 0.3rem;
   transition: all 0.3s ease;
   border: none;
   font-weight: 500;
}

.btn-info.btn-sm {
   background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
   box-shadow: 0 3px 10px rgba(52, 152, 219, 0.3);
}

.btn-info.btn-sm:hover {
   transform: translateY(-2px);
   box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
}

.btn-success.btn-sm {
   background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
   box-shadow: 0 3px 10px rgba(46, 204, 113, 0.3);
}

.btn-success.btn-sm:hover {
   transform: translateY(-2px);
   box-shadow: 0 5px 15px rgba(46, 204, 113, 0.4);
}

/* Empty State */
.data-table tbody tr td[colspan] {
   text-align: center;
   padding: 3rem !important;
   color: #95a5a6;
   font-style: italic;
   font-size: 1.1rem;
}

/* Responsive Design */
@media (max-width: 768px) {
   .card.mb-1 .card-body {
      flex-direction: column;
      align-items: flex-start !important;
      gap: 1rem;
   }

   .card.mb-1 h4 {
      font-size: 1.2rem;
   }

   .card-body.table-responsive {
      padding: 1rem;
   }

   .data-table thead th,
   .data-table tbody td {
      padding: 0.75rem !important;
      font-size: 0.85rem;
   }
}

/* Animation d'entrée */
@keyframes fadeInUp {
   from {
      opacity: 0;
      transform: translateY(30px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.card {
   animation: fadeInUp 0.6s ease-out;
}

.card.py-2 {
   animation-delay: 0.2s;
}

/* Scrollbar personnalisée */
.table-responsive::-webkit-scrollbar {
   height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
   background: #f1f1f1;
   border-radius: 10px;
}

.table-responsive::-webkit-scrollbar-thumb {
   border-radius: 10px;
}

.form-control-sm {
   padding: 0.75rem 2.5rem;
}