/*
 * Columnas redimensionables para las tablas de Filament.
 *
 * El controlador JS (columnas-redimensionables.js) agrega:
 *   - data-columna-redimensionable en cada <table> ya procesada (table-layout: fixed).
 *   - un .columna-redimensionable-handle al final de cada <th> (manija de arrastre).
 *   - un ancho explicito (width + min-width + max-width) en cada <th> redimensionado.
 * En la primera carga cada columna se pinea a su ancho NATURAL (segun contenido)
 * y la tabla scrollea en horizontal. Los anchos arrastrados se guardan solo en
 * memoria por tabla y columna, asi sobreviven los re-renders de Livewire pero no
 * las recargas. Funciona en modo claro y oscuro porque la manija usa
 * color/opacidad neutra que no depende del fondo.
 */

/*
 * Con table-layout: fixed el ancho de cada columna lo dicta el <th>, por lo que
 * las celdas del cuerpo siguen al encabezado sin tocarlas una por una.
 *
 * Para lograr el comportamiento tipo Excel (agrandar una columna ENSANCHA la
 * tabla y aparece scroll horizontal, sin achicar las demas) la tabla NO debe
 * quedar pineada a width: 100%. El JS le fija un ancho EXPLICITO en pixeles
 * igual a la suma de los anchos de sus columnas (ver ajustarAnchoTabla) y
 * min-width: 100% garantiza que igual ocupe todo el contenedor cuando los
 * anchos suman menos que el. El contenedor scrolleable de Filament
 * (.fi-ta-content-ctn) ya tiene overflow-x: auto, asi que al crecer la tabla
 * aparece la barra horizontal sola.
 *
 * Es CLAVE que el ancho sea una longitud explicita y NO la palabra clave
 * max-content: con max-content el navegador recurre al algoritmo de layout
 * intrinseco (tipo auto) para medir la tabla, lo que IGNORA table-layout: fixed
 * y vuelve a imponer el ancho del contenido de cada celda como minimo. Eso es
 * lo que impedia achicar una columna por debajo del texto de su celda mas
 * grande. Con un ancho en pixeles, table-layout: fixed se respeta y cada
 * columna puede achicarse hasta ANCHO_MINIMO recortando su contenido.
 *
 * Ademas, para que arrastrar una columna NO redistribuya el resto, el JS fija
 * un ancho explicito en TODAS las columnas al procesar la tabla (mide el ancho
 * renderizado y lo pinea). Con todos los anchos fijos, cambiar uno solo mueve
 * unicamente esa columna y la tabla crece/scrollea.
 *
 * El atributo data-columna-redimensionable lo coloca el JS sobre el <table>
 * real. En este Filament `.fi-ta-table` ES el propio <table>, asi que el
 * selector apunta directo a [data-columna-redimensionable] (no a un <table>
 * descendiente, que no existiria y dejaba estas reglas sin aplicar).
 */
table[data-columna-redimensionable] {
    table-layout: fixed;
    min-width: 100%;
}

/*
 * Cada <th> debe ser contenedor posicionado para anclar su propia manija y
 * recortar su contenido. Se aplica a TODAS las columnas (esten o no congeladas)
 * para que el redimensionado funcione en cualquiera. Las columnas congeladas
 * usan position: sticky (feature de columnas fijas), que tambien establece
 * contexto de posicionamiento, asi que la manija se ancla bien en ambos casos.
 *
 * overflow: hidden en el propio <th> recorta CUALQUIER contenido que exceda el
 * ancho elegido, incluido el label cuando es un NODO DE TEXTO suelto (caso de
 * las columnas no ordenables, p. ej. "Gerentes asignados": Filament no lo
 * envuelve en ningun elemento, asi que un recorte aplicado solo a los HIJOS
 * elemento del <th> nunca lo alcanzaba y el texto se desbordaba sobre la
 * columna vecina). La manija NO se recorta porque vive con right: 0 y width: 8px
 * DENTRO de los limites del <th> (no sobresale), por lo que queda intacta y
 * agarrable en todas las columnas.
 */
table[data-columna-redimensionable] > thead > tr > th {
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
 * El contenido interno del encabezado (boton de orden, boton de fijar) tampoco
 * debe forzar un ancho mayor al elegido. Se recorta cada hijo elemento, salvo
 * la manija, que debe seguir visible sobre el borde derecho.
 */
table[data-columna-redimensionable] > thead > tr > th > *:not(.columna-redimensionable-handle) {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/*
 * Las celdas del cuerpo tambien deben recortar su contenido para no desbordar
 * sobre la columna vecina cuando el usuario achica una columna por debajo del
 * ancho natural de su contenido (badges, textos largos).
 */
table[data-columna-redimensionable] > tbody > tr > td {
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
 * Manija de arrastre sobre el borde derecho del encabezado. Vive DENTRO de la
 * celda (right: 0, sin sobresalir): asi su area agarrable nunca cae sobre el
 * territorio del encabezado vecino ni bajo su contexto de apilado, y funciona
 * en TODAS las columnas (congeladas o no). El anclaje correcto lo garantiza el
 * `position: relative` del <th>; con table-layout: fixed la manija mide el alto
 * completo del encabezado (top/bottom: 0).
 */
.columna-redimensionable-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 8px;
    cursor: col-resize;
    user-select: none;
    touch-action: none;
    z-index: 40;
}

/*
 * Linea sutil que aparece al pasar el mouse o mientras se arrastra. Se ubica en
 * el centro de la manija, que coincide con la linea divisoria de la columna.
 */
.columna-redimensionable-handle::after {
    content: '';
    position: absolute;
    top: 25%;
    bottom: 25%;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    border-radius: 1px;
    background-color: rgb(var(--gray-400, 156 163 175));
    opacity: 0;
    transition: opacity 0.15s ease;
}

.fi-ta-header-cell:hover .columna-redimensionable-handle::after,
.columna-redimensionable-handle:hover::after {
    opacity: 0.7;
}

.columna-redimensionable-handle[data-redimensionando='true']::after {
    opacity: 1;
    background-color: rgb(var(--primary-500, 245 158 11));
}

.dark .columna-redimensionable-handle::after {
    background-color: rgb(var(--gray-500, 107 114 128));
}

.dark .columna-redimensionable-handle[data-redimensionando='true']::after {
    background-color: rgb(var(--primary-500, 245 158 11));
}

/*
 * Mientras se arrastra se fuerza el cursor col-resize en todo el documento y se
 * bloquea la seleccion de texto, para que el gesto sea fluido aunque el puntero
 * se salga de la manija.
 */
body.columna-redimensionable-activa,
body.columna-redimensionable-activa * {
    cursor: col-resize !important;
    user-select: none !important;
}