/**
 * Surcharges design Active Admin (Figma Yoonema)
 * Chargé après active_admin.css pour override le style par défaut.
 * Utilise les classes ajoutées via index tbody_html / row_html (voir app/admin/*.rb).
 */

/* Conteneur du tableau : carte (quand le tbody a notre classe) */
.data-table .yoonema-index-tbody {
  border: none;
}

/* Table : pleine largeur, bordures horizontales uniquement */
.data-table {
  width: 100% !important;
  border-collapse: collapse !important;
  background-color: #fff !important;
}

.dark .data-table {
  background-color: rgb(31 41 55) !important;
}

/* En-têtes : fond blanc, texte gris #6B7280 */
.data-table thead th {
  background-color: #fff !important;
  color: #6B7280 !important;
  font-weight: 400 !important;
  text-transform: none !important;
  text-align: left !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid #E5E7EB !important;
  border-top: none !important;
  font-size: 0.875rem !important;
  letter-spacing: normal !important;
}

.dark .data-table thead th {
  background-color: rgb(55 65 81) !important;
  color: rgb(209 213 219) !important;
  border-bottom-color: rgb(75 85 99) !important;
}

/* Cellules */
.data-table tbody td,
.data-table .yoonema-index-tbody td {
  background-color: #fff !important;
  color: #374151 !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid #E5E7EB !important;
  border-top: none !important;
  vertical-align: middle !important;
}

.dark .data-table tbody td,
.dark .data-table .yoonema-index-tbody td {
  background-color: rgb(31 41 55) !important;
  color: rgb(229 231 235) !important;
  border-bottom-color: rgb(55 65 81) !important;
}

/* Ligne au survol */
.data-table tbody tr:hover td,
.data-table .yoonema-index-row:hover td {
  background-color: #F9FAFB !important;
}

.dark .data-table tbody tr:hover td,
.dark .data-table .yoonema-index-row:hover td {
  background-color: rgb(55 65 81) !important;
}

/* Liens dans le tableau : violet Figma #8B5CF6 */
.data-table a,
.data-table a:link,
.data-table a:visited {
  color: #8B5CF6 !important;
  text-decoration: none !important;
}

.data-table a:hover {
  color: #7C3AED !important;
  text-decoration: underline !important;
}

.dark .data-table a,
.dark .data-table a:link,
.dark .data-table a:visited {
  color: rgb(196 181 253) !important;
}

.dark .data-table a:hover {
  color: rgb(167 139 250) !important;
}

/* Pills de statut (design Figma) */
.status-tag {
  display: inline-block !important;
  padding: 6px 12px !important;
  border-radius: 9999px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  border: none !important;
}

.status-tag.pending,
.status-tag.orange {
  background-color: #FEF3C7 !important;
  color: #F59E0B !important;
}

.status-tag.processing,
.status-tag.blue,
.status-tag.ok {
  background-color: #DBEAFE !important;
  color: #3B82F6 !important;
}

.status-tag.delivered,
.status-tag.shipped,
.status-tag.green {
  background-color: #D1FAE5 !important;
  color: #10B981 !important;
}

.status-tag.canceled,
.status-tag.cancelled,
.status-tag.error,
.status-tag.red,
.status-tag.rejected {
  background-color: #FEE2E2 !important;
  color: #EF4444 !important;
}

.status-tag.approved,
.status-tag.no {
  background-color: #DBEAFE !important;
  color: #3B82F6 !important;
}

.status-tag.warning {
  background-color: #FEF3C7 !important;
  color: #F59E0B !important;
}

.status-tag.info {
  background-color: #DBEAFE !important;
  color: #3B82F6 !important;
}

/* Dark mode status tags */
.dark .status-tag.pending,
.dark .status-tag.orange {
  background-color: rgba(245, 158, 11, 0.25) !important;
  color: rgb(252 211 77) !important;
}

.dark .status-tag.processing,
.dark .status-tag.blue,
.dark .status-tag.ok {
  background-color: rgba(59, 130, 246, 0.25) !important;
  color: rgb(147 197 253) !important;
}

.dark .status-tag.delivered,
.dark .status-tag.shipped,
.dark .status-tag.green {
  background-color: rgba(16, 185, 129, 0.25) !important;
  color: rgb(110 231 183) !important;
}

.dark .status-tag.canceled,
.dark .status-tag.cancelled,
.dark .status-tag.error,
.dark .status-tag.red,
.dark .status-tag.rejected {
  background-color: rgba(239, 68, 68, 0.25) !important;
  color: rgb(252 165 165) !important;
}

.dark .status-tag.approved,
.dark .status-tag.no {
  background-color: rgba(59, 130, 246, 0.25) !important;
  color: rgb(147 197 253) !important;
}

.dark .status-tag.warning {
  background-color: rgba(245, 158, 11, 0.25) !important;
  color: rgb(252 211 77) !important;
}

.dark .status-tag.info {
  background-color: rgba(59, 130, 246, 0.25) !important;
  color: rgb(147 197 253) !important;
}

/* ========== Barre de filtres : apparition / disparition avec transition ========== */

/* Quand les filtres sont masqués, le contenu principal (tableau) prend 100 % de la largeur */
[data-test-page-content].filters-sidebar-collapsed {
  grid-template-columns: 1fr;
  grid-auto-columns: unset;
  grid-auto-flow: row;
  overflow-x: hidden;
}

/* Contenir le scroll horizontal : seule la zone du tableau défile, pas le header ni le reste */
[data-test-page-content].filters-sidebar-collapsed .main-content-with-toggle {
  min-width: 0;
  overflow-x: hidden;
}

[data-test-page-content].filters-sidebar-collapsed .paginated-collection-contents {
  overflow-x: auto;
  overflow-y: visible;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

/* Éviter que le tableau ne rétrécisse : largeur min sur le thead pour garder les colonnes */
[data-test-page-content].filters-sidebar-collapsed .paginated-collection-contents .data-table {
  min-width: max-content;
}

.filters-sidebar-column {
  overflow: hidden;
  max-width: 100%;
  min-width: 0;
  will-change: max-width;
  transition: max-width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.28s ease-out;
}

@media (min-width: 1024px) {
  .filters-sidebar-column {
    max-width: 250px;
  }
}

.filters-sidebar-column__inner {
  min-width: 250px;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateZ(0); /* GPU layer for smooth animation */
}

.filters-sidebar-column.is-collapsed {
  max-width: 0;
  opacity: 0;
  pointer-events: none;
}

.filters-sidebar-column.is-collapsed .filters-sidebar-column__inner {
  transform: translateX(100%);
}

/* Sticky position du bloc Filtres (conservé) */
#filters_sidebar_section {
  position: sticky;
  top: 20px;
}

/* Réduction des mouvements pour accessibilité */
@media (prefers-reduced-motion: reduce) {
  .filters-sidebar-column,
  .filters-sidebar-column__inner {
    transition: none;
  }

  .filters-sidebar-column.is-collapsed .filters-sidebar-column__inner {
    transform: none;
  }
}