/* Solución para dropdowns en tablas */

/* Permitir overflow visible */
.overflow-x-auto {
  overflow-x: auto !important;
  overflow-y: visible !important;
}

.crud-table-container,
table, 
tbody,
tr,
td,
th {
  overflow: visible !important;
}

/* El contenedor del botón con relative para anclar el dropdown */
td > div.relative {
  position: relative !important;
}

/* El dropdown con position absolute relativo al div.relative - MUY específico */
.crud-dropdown-menu {
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  left: auto !important;
  z-index: 99999 !important;
  min-width: 11rem !important;
  margin-top: 2px !important;
  padding: 0 !important;
  background: white !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
  border-radius: 0.5rem !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  transform: none !important;
}

/* Modo oscuro */
.dark .crud-dropdown-menu {
  background: rgb(55, 65, 81) !important;
  border-color: rgb(75, 85, 99) !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2) !important;
}

/* Asegurar visibilidad del contenido */
.crud-dropdown-menu ul,
.crud-dropdown-menu div,
.crud-dropdown-menu li {
  overflow: visible !important;
  max-height: none !important;
}

/* Asegurar que el card principal permita overflow */
.bg-white.dark\:bg-gray-800.relative.shadow-md {
  overflow: visible !important;
}

/* Espacio extra al final de la tabla */
tbody::after {
  content: '';
  display: block;
  height: 150px;
}/* Solución para dropdowns en tablas que se cortan */

/* El contenedor principal debe permitir overflow visible en Y pero mantener scroll en X */
.overflow-x-auto {
  overflow-x: auto !important;
  overflow-y: visible !important;
}

/* El contenedor de la tabla */
.crud-table-container {
  overflow: visible !important;
  position: relative;
}

/* Eliminar restricciones de overflow en elementos de la tabla */
table, 
tbody {
  overflow: visible !important;
}

/* Las filas deben tener overflow visible */
tr {
  overflow: visible !important;
}

/* Las celdas normales NO deben tener position relative */
td > div.relative {
  position: relative !important;
}

/* SOLO la celda con el dropdown debe tener position relative */
td.flex.items-center.justify-end,
td:has([data-dropdown-toggle]) {
  position: relative !important;
  overflow: visible !important;
}

/* El dropdown debe usar position absolute relativo a la celda que contiene el botón */
.crud-dropdown-menu {
  position: absolute !important;
  z-index: 99999 !important;
  min-width: 11rem !important;
  background: white !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
  border-radius: 0.5rem !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  top: calc(100% - 2rem) !important;
  right: 2rem !important;
  left: auto !important;
  margin-top: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Modo oscuro */
.dark .crud-dropdown-menu {
  background: rgb(55, 65, 81) !important;
  border-color: rgb(75, 85, 99) !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2) !important;
}

/* Asegura que el contenido del dropdown sea visible */
.crud-dropdown-menu ul,
.crud-dropdown-menu div,
.crud-dropdown-menu li {
  overflow: visible !important;
  max-height: none !important;
}

/* El botón que abre el dropdown */
[data-dropdown-toggle] {
  position: relative;
  z-index: 10;
}

/* Asegurar que el contenedor padre del card permita overflow */
.bg-white.dark\:bg-gray-800.relative.shadow-md {
  overflow: visible !important;
}

/* Dar espacio extra al final de la tabla para dropdowns de las últimas filas */
tbody::after {
  content: '';
  display: block;
  height: 150px;
}