/* Estilos específicos para el editor */

.table-editable td input,
.table-editable td textarea {
    transition: border-color 0.2s;
}

.table-editable td input:focus,
.table-editable td textarea:focus {
    outline: none;
}

/* Estilos para inputs y textareas de la tabla (sin doble borde) */
.input-table {
    outline: none;
}

.input-table:focus {
    outline: none;
    border-color: #0d0f3d;
    box-shadow: 0 0 0 2px rgba(13, 15, 61, 0.1);
}

/* Estilos para el input de búsqueda */
#searchInput {
    outline: none;
}

#searchInput:focus {
    outline: none;
    border-color: #0d0f3d;
    box-shadow: 0 0 0 3px rgba(13, 15, 61, 0.1);
}

/* Asegurar que inputs y textareas tengan exactamente la misma altura y alineación */
.table-editable td input[type="text"],
.table-editable td input[type="number"] {
    height: 32px; /* Reducido de 38px para más filas visibles */
    line-height: 1.4;
    box-sizing: border-box;
    margin: 0;
    vertical-align: middle;
    min-width: 80px; /* Ancho mínimo para inputs numéricos */
}

/* Anchos específicos para ItemTooltip (30 columnas) */
#dataTable.table-editable td {
    min-width: 90px; /* Ancho mínimo para celdas */
    padding-top: 0.375rem; /* py-1.5 - reducido para menos espacio entre filas */
    padding-bottom: 0.375rem;
    padding-left: 1rem; /* px-4 */
    padding-right: 1rem;
}

#dataTable.table-editable td:first-child {
    min-width: 60px; /* ID es más pequeño */
}

#dataTable.table-editable td input[type="number"] {
    min-width: 80px;
    width: 100%;
}

#dataTable.table-editable td textarea {
    min-width: 200px; /* Textarea más ancho para texto largo */
    width: auto;
}

/* Texto en una sola línea - sin saltos de línea */
#dataTable.table-editable td {
    white-space: nowrap; /* Evitar saltos de línea en celdas */
    overflow: hidden;
    text-overflow: ellipsis; /* Mostrar "..." si el texto es muy largo */
}

/* Estilos para todos los textareas - sin scroll y con más espacio */
#dataTable.table-editable td textarea {
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: hidden;
    min-width: 300px; /* Más espacio para texto largo */
    max-width: 500px; /* Ancho máximo aumentado */
    width: auto; /* No se expande automáticamente */
}

/* Campo "Index" en ItemToolTipText - espacio suficiente para valores hasta 1000 */
#dataTable.table-editable td input[data-field="index"][type="number"] {
    min-width: 90px; /* Espacio suficiente para valores hasta 1000 */
    max-width: 120px; /* No más ancho del necesario */
}

/* Estilos para textarea compacto (mismo tamaño que input) */
.textarea-compact {
    height: 32px; /* Reducido de 38px para más filas visibles */
    min-height: 32px;
    overflow-y: hidden; /* Sin scroll vertical */
    line-height: 1.4;
    box-sizing: border-box;
    margin: 0;
    vertical-align: middle;
    /* Asegurar el mismo padding que los inputs */
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.textarea-compact:focus {
    height: 32px; /* Mantener altura fija, sin expandirse */
    min-height: 32px;
}

.table-editable tr.changed {
    background-color: #fef3c7;
}

.table-editable tr.changed td {
    border-left: 3px solid #f59e0b;
}

/* Efecto hover en las filas */
.table-editable tbody tr {
    transition: background-color 0.2s ease;
}

.table-editable tbody tr:hover {
    background-color: #f3f4f6; /* Gris claro al pasar el mouse */
    cursor: pointer;
}

/* Mantener el color de fondo para filas cambiadas incluso con hover */
.table-editable tbody tr.changed:hover {
    background-color: #fef3c7; /* Mantener el amarillo claro para filas modificadas */
}

/* Scrollbar personalizado */
.overflow-x-auto::-webkit-scrollbar {
    height: 8px;
}

.overflow-x-auto::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.overflow-x-auto::-webkit-scrollbar-thumb {
    background: #0d0f3d;
    border-radius: 4px;
}

.overflow-x-auto::-webkit-scrollbar-thumb:hover {
    background: #151742;
}