/**
 * Retoques del tema para la vista de datos (tabla / tarjetas / columnas).
 *
 * El grueso del estilo sale de company-theme (assets/css/componentes-tabla.css,
 * generado por el extractor). Aqui va solo lo que es del port y no de la empresa:
 * los <select> nativos del orden y el tamano —que sustituyen a los desplegables
 * de MDB— y el pie de totales de las tarjetas. Todo con tokens del tema, para
 * que siga la paleta del sitio (regla «respetar el tema»).
 *
 * @package OwariTema
 */

/*
 * Respaldo de color por si una tabla cayera en una pantalla del admin donde no se
 * cargue `componentes.css` ni los tokens del escritorio.
 *
 * Con especificidad cero y en la raíz, no en la vista: declaradas sobre la propia
 * vista de datos, estas variables le ganaban a todo lo heredado —la paleta del
 * sitio que pone el escritorio y, sobre todo, el modo oscuro del sistema, que
 * cambia los neutros en el `body`—. Las tablas del admin en oscuro salían con el
 * texto oscuro de aquí sobre el fondo oscuro de allí. Así, cualquier otro valor
 * gana sin pelear y estos solo cuentan cuando no hay nada más.
 */
:where( :root ) {
	--mdb-primary: #0a4570;
	--mdb-primary-rgb: 10, 69, 112;
	--mdb-secondary: #00b5d4;
	--mdb-secondary-color: rgba( 30, 41, 59, .75 );
	--mdb-body-color: #1e293b;
	--mdb-box-shadow-color-rgb: 0, 0, 0;
}

/*
 * Superficies y líneas con los tokens del tema, no con blanco fijo.
 *
 * La familia de company-theme pinta las tarjetas, el panel de la tabla, el aviso
 * de «sin registros», el buscador, el orden y el segmento activo del selector con
 * `#fff`, y las líneas con negro translúcido. En modo oscuro el texto pasa a
 * claro y el fondo seguía blanco: tarjetas en blanco sobre blanco, sin una letra
 * a la vista. Aquí se usa la superficie de las tarjetas de MDB (`--mdb-surface-bg`:
 * blanca en claro, gris en oscuro); en el admin, que no carga MDB, la terciaria
 * del escritorio, que también cambia con el modo oscuro.
 */
.data-card,
.data-table-panel,
.data-view-empty,
.view-switch .btn.active {
	background-color: var( --mdb-surface-bg, var( --mdb-tertiary-bg, #fff ) );
}

/*
 * En el admin manda la terciaria del escritorio, que es la que cambia con su modo
 * oscuro: la superficie que trae `componentes.css` se queda en blanco siempre.
 */
.wp-admin .data-card,
.wp-admin .data-table-panel,
.wp-admin .data-view-empty,
.wp-admin .view-switch .btn.active {
	background-color: var( --mdb-tertiary-bg, #fff );
}

.data-search-input,
.data-sort-toggle {
	background-color: var( --mdb-body-bg, #fff );
	border-color: var( --mdb-border-color-translucent, rgba( 0, 0, 0, .175 ) );
}

.data-sort-toggle:hover {
	background-color: rgba( var( --mdb-body-color-rgb, 0, 0, 0 ), .04 );
}

.data-card-header,
.data-card-actions {
	border-color: rgba( var( --mdb-body-color-rgb, 0, 0, 0 ), .1 );
}

.view-switch {
	background-color: rgba( var( --mdb-body-color-rgb, 0, 0, 0 ), .06 );
}

.view-switch .btn:hover {
	background-color: rgba( var( --mdb-body-color-rgb, 0, 0, 0 ), .05 );
}

.data-pager-page.active {
	color: var( --owari-sobre-primary, #fff );
}

/*
 * El buscador dentro de «Mi cuenta». La hoja de WooCommerce del tema viste todo
 * campo de texto bajo `.woocommerce` con su relleno, y como carga después le
 * ganaba al del componente: la lupa quedaba encima de las primeras letras.
 */
.data-search .data-search-input {
	padding-left: 2.375rem;
}

/*
 * Selector de vista: el contenedor ya es una píldora, pero los botones de dentro
 * salían cuadrados —la familia no trae el radio de los botones de la biblioteca—.
 * Se redondean para que el seleccionado se lea como un segmento de la píldora.
 */
.view-switch .btn {
	border-radius: 100px;
}

/*
 * En móvil las tarjetas van siempre a una columna, así que «Tarjetas ×2» se vería
 * igual que «Tarjetas»: se oculta ese botón para no ofrecer dos veces lo mismo.
 */
@media ( max-width: 767.98px ) {
	.view-switch button[data-view="cards2"] {
		display: none;
	}
}

/*
 * El selector nunca se sale de su caja. Con tres vistas y sus rótulos mide unos
 * 300px, y dentro de un bloque con margen —la caja de «Mi cuenta», una tarjeta—
 * en un teléfono queda menos: la píldora asomaba por fuera del borde. Si no cabe,
 * se desplaza dentro de sí misma.
 */
.view-switch {
	max-width: 100%;
	overflow-x: auto;
	scrollbar-width: none;
}

.view-switch::-webkit-scrollbar {
	display: none;
}

/* Que se desplace la píldora y no que se aplasten los botones. */
.view-switch .btn {
	flex-shrink: 0;
	white-space: nowrap;
}

/*
 * Y en un teléfono, en el sitio, se queda en iconos. El rótulo sigue ahí para el
 * lector de pantalla (y como `title` al mantener pulsado). En el admin no: allí no
 * se carga Font Awesome y el botón se quedaría vacío.
 */
@media ( max-width: 575.98px ) {
	body:not( .wp-admin ) .view-switch .btn {
		padding: .375rem .75rem;
	}

	body:not( .wp-admin ) .view-switch .btn span {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect( 0 0 0 0 );
		white-space: nowrap;
		border: 0;
	}
}

/*
 * «Row actions» de las listas de WordPress (Editar | Edición rápida | Papelera |
 * Ver): en la tabla solo se ven al pasar el ratón sobre la fila; en la tarjeta no
 * hay fila que sobrevolar, así que van siempre visibles dentro de las acciones.
 */
.data-card-actions .row-actions {
	visibility: visible;
	position: static;
	font-size: .8125rem;
	padding: 0;
}

/*
 * Vista de tabla de las listas del admin.
 *
 * Las list-tables del núcleo llevan `table-layout: fixed` (clase `.fixed` de
 * WordPress) y el tema les da `width: 100%`: así la tabla encaja SIEMPRE en el
 * panel, y cuando hay muchas columnas —autor, categorías, etiquetas, fecha, más
 * la del plugin de SEO— la de «Título», que es la única sin ancho propio, se
 * queda con el sobrante. En un portátil o tablet (≈800–1150 px) ese sobrante
 * cae a cero y el título se parte letra a letra.
 *
 * El panel de la vista de datos ya está pensado para desplazarse en horizontal
 * (`overflow-x: auto`). Basta con dejar que la tabla recupere su ancho natural
 * —`table-layout: auto`— con un suelo cómodo: en pantalla ancha llena el panel
 * sin barra; cuando no cabe, el panel se desplaza en vez de aplastar columnas.
 * Solo afecta al admin; las tablas del front ya son de ancho automático.
 */
.wp-admin .data-table-panel .wp-list-table {
	table-layout: auto;
	min-width: 48rem;
}

/* Orden: icono + <select> nativo (en el original era un desplegable de MDB). */
.data-sort {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
}

.data-sort-icon {
	color: var( --mdb-secondary-color, #64748b );
	line-height: 1;
}

.data-sort-select,
.data-pager-size-select {
	font: inherit;
	color: var( --mdb-body-color, inherit );
	background-color: var( --mdb-body-bg, #fff );
	border: 1px solid var( --mdb-border-color-translucent, rgba( 0, 0, 0, .18 ) );
	border-radius: var( --owari-boton-radio, .5rem );
	padding: .3rem 1.7rem .3rem .6rem;
	max-width: 100%;
	cursor: pointer;
}

.data-sort-select:focus,
.data-pager-size-select:focus {
	outline: 2px solid rgba( var( --mdb-primary-rgb, 10, 69, 112 ), .4 );
	outline-offset: 1px;
}

.data-pager-size {
	display: inline-flex;
	align-items: center;
	margin: 0;
}

/*
 * Las pistas `1fr` del cuerpo y de la rejilla de la tarjeta equivalen a
 * minmax(auto,1fr) y NO encogen por debajo de su contenido: un valor ancho —la
 * fila de pastillas de seguimiento, unos botones de acción, una palabra larga—
 * ensancha la columna, la rejilla supera el ancho de la tarjeta y el lado derecho
 * se sale y se corta. Con minmax(0,1fr) la pista sí encoge y el contenido ajusta.
 */
.data-card-body {
	grid-template-columns: minmax( 0, 1fr );
}

@media ( min-width: 768px ) {
	.data-card-body {
		grid-template-columns: repeat( var( --data-card-groups, 2 ), minmax( 0, 1fr ) );
	}
}

.data-card-grid {
	grid-template-columns: var( --data-card-label-width, auto ) minmax( 0, 1fr );
}

.data-card-value {
	min-width: 0;
	overflow-wrap: anywhere;
}

/*
 * En el tablero las columnas son estrechas (~200px): el cuerpo de la tarjeta va
 * siempre a una sola columna de pares, si no el valor se parte letra a letra.
 */
.data-board .data-card-body {
	grid-template-columns: minmax( 0, 1fr );
}

/*
 * Pie de totales dentro de la vista de tarjetas: separa el resumen del ultimo
 * registro y resalta el valor, para que un detalle de pedido no pierda el total
 * al pasar a tarjetas.
 */
.data-card-foot {
	border-top: 2px solid rgba( var( --mdb-primary-rgb, 10, 69, 112 ), .25 );
}

.data-card-foot .data-card-value {
	font-weight: 600;
}