/**
 * 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 para las tarjetas en el admin, por si una tabla cayera en una
 * pantalla donde no se cargue `componentes.css` (que ya trae estas variables). Se
 * acota a la propia vista de datos: puesto en todo `.wp-admin` pisaba la paleta
 * del admin —entre otras, el color del menú lateral—. Los valores coinciden con
 * los de `componentes.css`, así que no cambian nada donde esa hoja sí está.
 */
.wp-admin [data-company-data-view] {
	--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;
}

/*
 * 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;
	}
}

/*
 * «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: #fff;
	border: 1px solid rgba( var( --mdb-box-shadow-color-rgb, 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;
}