/**
 * DMX Dynamic Table — baseline.
 *
 * ── La regla que gobierna este archivo ──────────────────────────────────────────────────
 *
 * **Ni una declaración de geometría de columnas.** Ni `grid-template-columns`, ni
 * `grid-auto-flow`, ni anchos. Toda la geometría la emite el generador de Divi a partir del
 * atributo del Target Loop, y una regla de aquí que la tocara ganaría por orden de carga y
 * rompería la promesa del producto en silencio.
 *
 * ── Y la segunda ────────────────────────────────────────────────────────────────────────
 *
 * La baseline no pasa de UNA clase de especificidad, y lo contextual va en `:where()`. Si el
 * CSS del plugin le gana al que genera Divi, el diseñador no puede diseñar — es la lección
 * que DMX True Ajax Filter pagó y dejó escrita en su `docs/STATE.md`.
 */

.dmx-dt {
	/* El contenedor no es la rejilla: la rejilla es la fila del header. */
	display: block;
	width: 100%;
}

/*
 * El header NO declara `display: grid` aquí.
 *
 * Lo emite `LayoutStyle` con el resto de la geometría, y hacerlo también aquí crearía una
 * segunda fuente para la misma propiedad. Cuando no hay Target Loop, esta caja se comporta
 * como un bloque normal — que es la degradación honesta.
 */
.dmx-dt-header {
	min-width: 0;
}

/*
 * Cada celda es un item de la rejilla. `min-width: 0` porque un item de grid tiene
 * `min-width: auto` por defecto y un texto largo ensancharía su track por encima de lo que
 * el autor pidió — el síntoma sería «mi columna de 80px mide 140».
 */
:where( .dmx-dt-header ) > * {
	min-width: 0;
}

.dmx-dt-header__label {
	display: inline-block;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* El aviso de «sin Target Loop». Sobrio a propósito: informa, no alarma. */
.dmx-dt-notice {
	padding: 0.75em 1em;
	border: 1px dashed currentColor;
	border-radius: 3px;
	opacity: 0.75;
	font-size: 0.9em;
}

/* ── El header ordenable ───────────────────────────────────────────────────────────────
 *
 * El botón hereda la tipografía de la celda a propósito: el diseñador estiliza la columna en
 * el panel de Divi y el botón la sigue, en vez de traer una apariencia propia que haya que
 * pelear. Lo único que añade es lo que un botón necesita para verse operable — el cursor, el
 * foco visible y el hueco del indicador.
 */
.dmx-dt-header__button {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-align: inherit;
	cursor: pointer;
}

/* El foco NUNCA se quita. Es la única señal de dónde está quien navega con teclado. */
.dmx-dt-header__button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* El indicador es una FORMA, no un color: quien no distingue colores tiene que poder leer el
 * estado igual. Y es `aria-hidden`, porque el estado real lo lleva `aria-sort` en la celda. */
.dmx-dt-header__indicator {
	flex: none;
	font-size: .85em;
	line-height: 1;
	opacity: .45;
}

.dmx-dt-header__button[data-dmx-dt-direction="asc"] .dmx-dt-header__indicator,
.dmx-dt-header__button[data-dmx-dt-direction="desc"] .dmx-dt-header__indicator {
	opacity: 1;
}

/* El sobre de datos no se pinta. Es un `<script>`, así que el navegador ya lo oculta; esto
 * sólo lo asegura si alguien cambia su display heredado. */
.dmx-dt-data {
	display: none;
}

/* ── Filas fuera de la página ──────────────────────────────────────────────────────────
 *
 * Se OCULTAN, no se quitan. Un nodo sacado del documento pierde el foco y el estado que
 * alguien haya puesto dentro; con esto sigue ahí, listo para volver sin coste.
 *
 * Hace falta la clase además del atributo `hidden`: el contenedor del Divi Loop es un grid y
 * le impone `display` a sus hijos, que gana a `[hidden]`. El `!important` es la única forma
 * de no depender de la especificidad que Divi genere en cada página.
 */
.dmx-dt-row--hidden {
	display: none !important;
}

/* ── Los controles ─────────────────────────────────────────────────────────────────────
 *
 * Lo mínimo para que funcionen y se vean operables. El diseño lo pone el autor desde el panel
 * de Divi, como en cualquier otro módulo — aquí no se decide una apariencia.
 */
.dmx-dt-search {
	display: flex;
}

.dmx-dt-search__input {
	width: 100%;
	font: inherit;
	color: inherit;
}

.dmx-dt-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35em;
}

.dmx-dt-pagination__step,
.dmx-dt-pagination__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2em;
	padding: .25em .6em;
	font: inherit;
	color: inherit;
	text-decoration: none;
}

/* El foco NUNCA se quita: es la única señal de dónde está quien navega con teclado. */
.dmx-dt-pagination__step:focus-visible,
.dmx-dt-pagination__number:focus-visible,
.dmx-dt-search__input:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* La página actual y los pasos sin destino no son enlaces: se marcan como lo que son. */
.dmx-dt-pagination__number--current {
	font-weight: 700;
}

.dmx-dt-pagination__step--disabled {
	opacity: .45;
}

.dmx-dt-results,
.dmx-dt-empty {
	margin: 0;
}