/**
 * Table Component Styles
 * Styles pour tables standards et DataTables avec support dark mode
 */

/* ===== BASE TABLE STYLES ===== */

.table {
  width: 100%;
  margin-bottom: var(--space-4);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  border-collapse: collapse;
}

.table th,
.table td {
  padding: var(--space-3) var(--space-4);
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--transition-fast);
}

.table thead th {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
  text-align: left;
  border-bottom: 2px solid var(--color-border-dark);
  position: sticky;
  top: 0;
  z-index: 10;
}

.table tbody tr {
  transition: background-color var(--transition-fast);
}

.table tbody tr:hover {
  background-color: var(--color-bg-hover);
}

.table-sm td,
.table-sm th {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
}

/* ===== TABLE VARIANTS ===== */

.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--color-bg-secondary);
}

.table-striped tbody tr:nth-of-type(odd):hover {
  background-color: var(--color-bg-hover);
}

.table-bordered {
  border: 1px solid var(--color-border);
}

.table-bordered th,
.table-bordered td {
  border: 1px solid var(--color-border);
}

.table-hover tbody tr:hover {
  background-color: var(--color-bg-hover);
}

/* ===== TABLE HEADER VARIANTS ===== */

.table-light thead th {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
}

.table-dark thead th {
  background-color: var(--color-neutral-700);
  color: var(--color-text-inverse);
}

/* ===== DATATABLES INTEGRATION ===== */

.dataTables_wrapper {
  color: var(--color-text-primary);
  pointer-events: auto;
}

/* Assure que les contrôles DataTables sont interactifs */
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_paginate {
  pointer-events: auto;
}

/* DataTables controls (search, pagination, etc.) */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  color: var(--color-text-primary);
  padding: var(--space-3) 0;
}

.dataTables_wrapper .dataTables_length select {
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  min-width: 70px;
}

.dataTables_wrapper .dataTables_filter input {
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  /* Fix pour assurer l'interactivité de l'input */
  pointer-events: auto !important;
  -webkit-user-select: text;
  user-select: text;
  position: relative;
  z-index: 1;
}

.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* DataTables pagination - Reset Bootstrap conflicts */
.dataTables_wrapper .dataTables_paginate .pagination {
  margin: 0;
  gap: var(--space-1);
}

/* Reset .page-item pour éviter le double conteneur */
.dataTables_wrapper .dataTables_paginate .page-item {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
}

/* Styles principaux sur .page-link uniquement */
.dataTables_wrapper .dataTables_paginate .page-link {
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.dataTables_wrapper .dataTables_paginate .page-item:hover .page-link,
.dataTables_wrapper .dataTables_paginate .page-link:hover {
  color: var(--color-text-inverse);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
  color: var(--color-text-inverse);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* DataTables sorting */
.dataTable thead th {
  cursor: pointer;
  position: relative;
  padding-right: var(--space-8);
}

.dataTable thead th.sorting::after,
.dataTable thead th.sorting_asc::after,
.dataTable thead th.sorting_desc::after {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.5;
}

.dataTable thead th.sorting_asc::after,
.dataTable thead th.sorting_desc::after {
  opacity: 1;
  color: var(--color-primary);
}

/* ===== FILTERS ROW (grilles.html style) ===== */

.filters-row th {
  background: var(--color-primary-light) !important;
  padding: var(--space-2) var(--space-3) !important;
  border-bottom: 1px solid var(--color-border);
}

.filters-row input,
.filters-row select {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  height: 32px;
  font-size: var(--font-size-sm);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  width: 100%;
  transition: all var(--transition-fast);
}

.filters-row input:focus,
.filters-row select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.filters-row input::placeholder {
  color: var(--color-text-tertiary);
  opacity: 1;
}

/* ===== TABLE ACTIONS COLUMN ===== */

.table td.text-nowrap {
  white-space: nowrap;
}

.table .btn-sm {
  margin: 0 var(--space-1);
  font-size: 0.75rem;
}

.table .btn-sm:first-child {
  margin-left: 0;
}

/* ===== RESPONSIVE TABLE ===== */

.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

/* Scroll indicator shadows */
.table-responsive::before,
.table-responsive::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20px;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity var(--transition-base);
}

.table-responsive::before {
  left: 0;
  background: linear-gradient(to right, var(--color-bg-primary), transparent);
}

.table-responsive::after {
  right: 0;
  background: linear-gradient(to left, var(--color-bg-primary), transparent);
}

.table-responsive.scrolled-left::before,
.table-responsive.scrolled-right::after {
  opacity: 1;
}

/* ===== TAB NAVIGATION (grilles.html) ===== */

.nav-tabs {
  border-bottom: 2px solid var(--color-border);
  margin-bottom: var(--space-4);
}

.nav-tabs .nav-link {
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-3) var(--space-4);
  transition: all var(--transition-fast);
}

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

.nav-tabs .nav-link.active {
  color: var(--color-primary);
  background-color: var(--color-bg-primary);
  border-bottom-color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.tab-content {
  animation: fadeIn var(--transition-base);
}

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

/* ===== MODAL TABLES ===== */

.modal-body table {
  font-size: var(--font-size-sm);
  margin-bottom: 0;
}

.modal-body table th,
.modal-body table td {
  padding: var(--space-2) var(--space-3);
}

/* ===== TABLE LOADING STATE ===== */

.table-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.5;
}

.table-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  margin-left: -16px;
  margin-top: -16px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: table-spin 0.8s linear infinite;
}

@keyframes table-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ===== SKELETON LOADER (pour DataTables) ===== */

.skeleton-table {
  background-color: var(--color-bg-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.skeleton-row {
  height: 40px;
  background: linear-gradient(
    90deg,
    var(--color-bg-secondary) 25%,
    var(--color-bg-tertiary) 50%,
    var(--color-bg-secondary) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-md);
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ===== RESPONSIVE ===== */

@media (max-width: 768px) {
  .table {
    font-size: var(--font-size-sm);
  }

  .table th,
  .table td {
    padding: var(--space-2) var(--space-3);
  }

  .table-sm th,
  .table-sm td {
    padding: var(--space-1) var(--space-2);
  }

  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    font-size: var(--font-size-sm);
    padding: var(--space-2) 0;
  }

  .nav-tabs .nav-link {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
  }

  /* Stack action buttons vertically on small screens */
  .table td.text-nowrap {
    white-space: normal;
  }

  .table td.text-nowrap .btn {
    display: block;
    width: 100%;
    margin: var(--space-1) 0;
  }
}

@media (max-width: 576px) {
  .table {
    font-size: 0.75rem;
  }

  .filters-row input,
  .filters-row select {
    font-size: 0.7rem;
    height: 28px;
  }
}

/* ===== TABLE SPECIFIC FIXES ===== */

/* Assure que le tableau Associations prend toute la largeur comme les autres */
#table-assoc {
  width: 100% !important;
}

/* Table vertical alignment pour paliers et surcharges */
.table-paliers th,
.table-paliers td {
  vertical-align: middle;
}

.table-surcharges th,
.table-surcharges td {
  vertical-align: middle;
}