/**
 * citivo-tableau.css — 0.99.585 : la vue « Liste » en tableau (CitivoTableau,
 * citivo-tableau.js), au style des listes de WordPress (médias).
 *
 * ⚠️ La grille et le tableau vivent dans le MÊME conteneur des vues
 * (`.citivo-ms-vue-grille`, classe `view-list` posée par CitivoViews) : le
 * tableau ne s'y montre qu'en vue liste, la grille qu'en vue grille. La
 * classe `a-tableau` (posée par le module) borne ces règles aux écrans qui
 * ont le tableau.
 *
 * ⚠️ Les boutons redisent leur couleur sur CHAQUE état : le thème pose fond et
 * texte au survol / focus (leçon de la 0.99.350).
 *
 * @package Citivo
 */

.citivo-ms-vue-grille.a-tableau.view-list > .citivo-ms-grid {
	display: none !important;
}

.citivo-ms-vue-grille.a-tableau:not( .view-list ) > .citivo-tableau-wrap {
	display: none;
}

.citivo-tableau-wrap[hidden] {
	display: none;
}

.citivo-tableau-wrap {
	margin: 0 0 16px;
	overflow-x: auto;
	transition: opacity .15s;
}

/* Pendant le chargement d'une page (classe posée sur la grille). */
.citivo-ms-grid.is-chargement + .citivo-tableau-wrap {
	opacity: .5;
}

.citivo-tableau {
	width: 100%;
	margin: 0;
	border: 1px solid #c3c4c7;
	border-collapse: collapse;
	background: #fff;
	font-size: var( --citivo-fs-action );
}

.citivo-tableau th,
.citivo-tableau td {
	padding: 8px 10px;
	border: 0;
	text-align: left;
	vertical-align: middle;
	color: #50575e;
}

.citivo-tableau thead th {
	border-bottom: 1px solid #c3c4c7;
	font-weight: 400;
	color: #1d2327;
	white-space: nowrap;
}

.citivo-tableau tbody tr:nth-child( odd ) {
	background: #f6f7f7;
}

.citivo-tableau-ligne {
	cursor: pointer;
}

.citivo-tableau tbody .citivo-tableau-ligne:hover {
	background: #f0f6fc;
}

.citivo-tableau-ligne:focus-visible {
	outline: 2px solid #315ba3;
	outline-offset: -2px;
}

.citivo-tableau-masque {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

.citivo-tableau-sans {
	color: #8c8f94;
}

/* Photo : vignette carrée, comme la liste des médias. */
.citivo-tableau-col-photo {
	width: 76px;
}

.citivo-tableau-vignette {
	display: block;
	width: 60px;
	height: 60px;
	border-radius: 4px;
	background: #dcdcde;
	overflow: hidden;
}

.citivo-tableau-vignette img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 0.99.587 — publication MASQUÉE : vignette atténuée à l'opacité de la card
   masquée de la grille (`.citivo-ms-card--hidden`, 0.7), pour la repérer
   d'un coup d'œil (demande d'Olivier). Classe posée par `estAttenue()`. */
.citivo-tableau-ligne.is-attenue .citivo-tableau-vignette {
	opacity: 0.7;
}

.citivo-tableau-principal {
	display: block;
	font-weight: 600;
	color: #1d2327;
}

.citivo-tableau-secondaire {
	display: block;
	color: #646970;
	font-size: var( --citivo-fs-texte );
}

.citivo-tableau-une {
	color: #f5b000;
	margin-left: 4px;
}

/* État : les pastilles des cards, remises dans le flux. */
.citivo-tableau .citivo-ms-badge {
	position: static;
	display: inline-block;
	white-space: nowrap;
}

.citivo-tableau-etat-en-ligne {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 10px;
	background: #e7eefa;
	color: #315ba3;
	font-weight: 700;
	font-size: var( --citivo-fs-pastille );
	white-space: nowrap;
}

/* Titres triables. */
.citivo-tableau-tri,
.citivo-tableau-tri:hover,
.citivo-tableau-tri:focus {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 0;
	margin: 0;
	background: none;
	border: 0;
	box-shadow: none;
	color: #2271b1;
	font: inherit;
	cursor: pointer;
}

.citivo-tableau-tri:hover,
.citivo-tableau-tri:focus {
	color: #135e96;
	text-decoration: underline;
}

.citivo-tableau-tri-fleche {
	display: inline-block;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	opacity: .3;
}

.citivo-tableau-tri.is-asc .citivo-tableau-tri-fleche {
	opacity: 1;
	border-top: 0;
	border-bottom: 5px solid currentColor;
}

.citivo-tableau-tri.is-desc .citivo-tableau-tri-fleche {
	opacity: 1;
}

/* Actions en icônes (celles de la fiche). */
.citivo-tableau-col-actions {
	width: 1%;
	white-space: nowrap;
}

.citivo-tableau-action,
.citivo-tableau-action:hover,
.citivo-tableau-action:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	margin: 0 2px 0 0;
	background: none;
	border: 1px solid transparent;
	border-radius: 4px;
	box-shadow: none;
	color: #2271b1;
	cursor: pointer;
}

.citivo-tableau-action:hover,
.citivo-tableau-action:focus-visible {
	background: #f0f6fc;
	border-color: #c3c4c7;
	color: #135e96;
}

.citivo-tableau-action svg {
	width: 20px;
	height: 20px;
	flex: none;
}

.citivo-tableau-action[aria-pressed="true"],
.citivo-tableau-action[aria-pressed="true"]:hover,
.citivo-tableau-action[aria-pressed="true"]:focus {
	color: #c48a00;
}

.citivo-tableau-action[aria-pressed="true"] svg {
	fill: #f5b000;
}

.citivo-tableau-action--danger,
.citivo-tableau-action--danger:focus {
	color: #b32d2e;
}

.citivo-tableau-action--danger:hover,
.citivo-tableau-action--danger:focus-visible {
	color: #b32d2e;
	background: rgba( 220, 53, 69, .08 );
	border-color: rgba( 220, 53, 69, .4 );
}

.citivo-tableau-action:disabled {
	opacity: .5;
	cursor: wait;
}

/* 0.99.588 — GESTE IMPOSSIBLE DANS CET ÉTAT : l'icône reste à sa place, en
   gris clair et sans réaction (demande d'Olivier : les icônes d'une colonne
   restent alignées d'une ligne à l'autre). Après `:disabled` pour l'emporter
   (même spécificité, plus loin dans la feuille). */
.citivo-tableau-action.is-inactif,
.citivo-tableau-action.is-inactif:hover,
.citivo-tableau-action.is-inactif:focus {
	opacity: 1;
	color: #dcdcde;
	background: none;
	border-color: transparent;
	cursor: default;
}

.citivo-tableau-action.is-inactif svg {
	fill: none;
}

/* Téléphone : une ligne = un bloc, vignette à gauche, valeurs titrées. */
@media ( max-width: 600px ) {

	.citivo-tableau thead tr {
		display: flex;
		flex-wrap: wrap;
		gap: 4px 12px;
	}

	.citivo-tableau thead th:empty,
	.citivo-tableau thead .citivo-tableau-col-photo,
	.citivo-tableau thead .citivo-tableau-col-actions {
		display: none;
	}

	.citivo-tableau,
	.citivo-tableau tbody,
	.citivo-tableau tbody tr,
	.citivo-tableau tbody td {
		display: block;
		width: auto;
	}

	.citivo-tableau tbody tr {
		position: relative;
		min-height: 76px;
		padding: 8px 0 8px 82px;
		border-top: 1px solid #dcdcde;
	}

	.citivo-tableau tbody td {
		padding: 2px 10px 2px 0;
	}

	.citivo-tableau tbody td.citivo-tableau-col-photo {
		position: absolute;
		left: 10px;
		top: 8px;
		padding: 0;
	}

	.citivo-tableau tbody td[data-titre]::before {
		content: attr( data-titre ) " : ";
		color: #8c8f94;
	}

	.citivo-tableau tbody td.citivo-tableau-col-photo::before,
	.citivo-tableau tbody td.citivo-tableau-sans-titre::before {
		content: none;
	}

	.citivo-tableau tbody td.citivo-tableau-col-actions {
		padding-top: 6px;
	}
}