/**
 * Padel Tournament Manager — feuille de styles.
 *
 * Thème CLAIR (lisible bord de terrain en plein soleil, sur tablette).
 * La charte (accents de score, "live", "points" citron) est alignée sur le plugin
 * Padel Live Scores (livescorepadel.com) pour garder une parenté visuelle entre
 * les deux outils, sans basculer en mode sombre.
 *
 * Aucune classe n'est renommée : les composants React (`assets/js/*.js`) en dépendent.
 */

/* ===========================================================================
 * Variables — palette du plugin
 *
 * Le même bloc de variables est déclaré sur chaque container racine du
 * plugin (.padel-app pour les apps React, .padel-login pour le formulaire
 * de login front, .padel-access-denied pour le bloc « accès refusé »).
 * Sans ça, un container situé hors d'un thème WordPress qui n'inclut pas
 * `.padel-app` (ex. shortcode `[padel_login]` posé directement dans Divi)
 * n'aurait pas accès aux variables et tous les `background: var(--…)`
 * tomberaient à `transparent`.
 * =========================================================================*/
.padel-app,
.padel-login,
.padel-access-denied {
	/* Surfaces (thème clair) */
	--padel-color-bg:            #f7f8fa;
	--padel-color-card:          #ffffff;
	--padel-color-card-hover:    #f9fbfc;
	--padel-color-border:        #e2e6eb;
	--padel-color-border-strong: #cfd6df;
	--padel-color-divider:       #eef1f5;

	/* Texte */
	--padel-color-text:          #1f2933;
	--padel-color-muted:         #5b6776;
	--padel-color-faint:         #8896a4;

	/* Vert d'action (boutons primaires, onglet actif, focus) */
	--padel-color-primary:       #0b6e4f;
	--padel-color-primary-dark:  #084a35;
	--padel-color-primary-soft:  #e8f5ee;

	/* === Accents de marque alignés sur Padel Live Scores =================
	 *
	 *   set gagné       : vert vif sur fond doux
	 *   live / en cours : rouge corail
	 *   points / mise en avant : pill citron sur texte sombre
	 *   alerte          : ambre doux
	 * ====================================================================*/
	--padel-color-win:           #22a058;                  /* vert score gagné en thème clair */
	--padel-color-win-bg:        rgba(34, 197, 94, 0.18);  /* fond doux pour set/cellule gagnée */
	--padel-color-live:          #ff3b5c;                  /* rouge live */
	--padel-color-live-bg:       rgba(255, 59, 92, 0.10);
	--padel-color-points-bg:     #c8ff00;                  /* citron — pill "points" */
	--padel-color-points-color:  #0a0e12;                  /* texte sombre sur le citron */
	--padel-color-warning:       #b58510;
	--padel-color-warning-bg:    #fff7e6;
	--padel-color-danger:        #c0392b;
	--padel-color-danger-bg:     #fce8e6;

	/* Rayons et ombres (doux, conformes à la charte livescorepadel) */
	--padel-radius:              8px;
	--padel-radius-sm:           4px;
	--padel-shadow:              0 1px 3px rgba(0, 0, 0, 0.08);
	--padel-shadow-md:           0 4px 12px rgba(15, 23, 42, 0.08);
	--padel-shadow-lg:           0 8px 32px rgba(15, 23, 42, 0.16);

	/* Typographie — stack système comme livescorepadel (`inherit`). */
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--padel-color-text);
	font-size: 16px;
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
}

/* Reset léger pour les éléments fréquents — appliqué à tous les containers racine. */
.padel-app *,
.padel-login *,
.padel-access-denied * { box-sizing: border-box; }

/* ===========================================================================
 * En-tête + onglets
 * =========================================================================*/
.padel-header { padding: 1rem 0; border-bottom: 1px solid var(--padel-color-border); margin-bottom: 1rem; }
.padel-header h1 { margin: 0 0 .25rem; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; }
.padel-meta { color: var(--padel-color-muted); font-size: .9rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.padel-meta span { white-space: nowrap; }

.padel-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--padel-color-border); margin-bottom: 1rem; flex-wrap: wrap; }
.padel-tab {
	background: transparent; border: 0;
	padding: .6rem 1rem; cursor: pointer;
	color: var(--padel-color-muted);
	border-bottom: 2px solid transparent;
	font-size: .95rem; font-weight: 500;
	transition: color .15s ease, border-color .15s ease;
}
.padel-tab:hover { color: var(--padel-color-text); }
.padel-tab.is-active { color: var(--padel-color-primary); border-bottom-color: var(--padel-color-primary); font-weight: 600; }

/* ===========================================================================
 * Cartes
 * =========================================================================*/
.padel-card {
	background: var(--padel-color-card);
	border: 1px solid var(--padel-color-border);
	border-radius: var(--padel-radius);
	padding: 1.25rem;
	margin-bottom: 1rem;
	box-shadow: var(--padel-shadow);
}
.padel-card h2 { margin-top: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.005em; }
.padel-card h3 { margin-top: 1.25rem; font-size: 1rem; font-weight: 600; }

/* ===========================================================================
 * Formulaires
 * =========================================================================*/
.padel-form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.padel-form input, .padel-form select {
	padding: .5rem .75rem;
	border: 1px solid var(--padel-color-border);
	border-radius: var(--padel-radius);
	font-size: 1rem;
	background: #fff;
	color: var(--padel-color-text);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.padel-form input:focus, .padel-form select:focus {
	outline: none;
	border-color: var(--padel-color-primary);
	box-shadow: 0 0 0 3px var(--padel-color-primary-soft);
}
.padel-form label { display: flex; gap: .35rem; align-items: center; color: var(--padel-color-muted); }

.padel-btn-primary {
	background: var(--padel-color-primary); color: #fff;
	border: 0; padding: .55rem 1.1rem;
	border-radius: var(--padel-radius);
	cursor: pointer; font-weight: 600; font-size: .95rem;
	transition: background .15s ease, transform .05s ease;
}
.padel-btn-primary:hover:not(:disabled) { background: var(--padel-color-primary-dark); }
.padel-btn-primary:active:not(:disabled) { transform: translateY(1px); }
.padel-btn-primary:disabled { opacity: .55; cursor: not-allowed; }

.padel-btn-secondary {
	background: #fff; color: var(--padel-color-primary);
	border: 1px solid var(--padel-color-primary);
	padding: .5rem 1rem;
	border-radius: var(--padel-radius);
	cursor: pointer; font-weight: 500;
}
.padel-btn-secondary:hover:not(:disabled) { background: var(--padel-color-primary-soft); }

.padel-btn-link { background: transparent; border: 0; color: var(--padel-color-primary); cursor: pointer; padding: 0 .35rem; font-size: .9rem; }
.padel-btn-link:hover { text-decoration: underline; }
.padel-btn-big { font-size: 1.2rem; padding: 1rem 2rem; }
.padel-btn-danger { color: var(--padel-color-danger) !important; }

/* ===========================================================================
 * Bandeaux d'état (erreur, info, succès)
 * =========================================================================*/
.padel-error {
	background: var(--padel-color-danger-bg);
	color: var(--padel-color-danger);
	padding: .75rem 1rem;
	border-radius: var(--padel-radius);
	border-left: 3px solid var(--padel-color-danger);
	margin: 1rem 0;
}
.padel-loading { color: var(--padel-color-muted); font-style: italic; }
.padel-warning {
	background: var(--padel-color-warning-bg);
	color: var(--padel-color-warning);
	padding: .65rem 1rem;
	border-radius: var(--padel-radius);
	margin: 1rem 0;
	border-left: 3px solid #f4a300;
}
.padel-message {
	padding: .75rem 1rem;
	border-radius: var(--padel-radius);
	background: var(--padel-color-primary-soft);
	color: var(--padel-color-primary-dark);
	border-left: 3px solid var(--padel-color-primary);
	margin: 1rem 0;
}

/* ===========================================================================
 * Tables
 * =========================================================================*/
.padel-table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: .95rem; }
.padel-table th, .padel-table td {
	padding: .55rem .75rem;
	border-bottom: 1px solid var(--padel-color-divider);
	text-align: left;
}
.padel-table th {
	background: #fafbfc;
	color: var(--padel-color-muted);
	font-weight: 600;
	font-size: .85rem;
	text-transform: uppercase;
	letter-spacing: .02em;
}
.padel-table tr:hover td { background: var(--padel-color-card-hover); }
.padel-list { list-style: none; padding: 0; margin: 0; }
.padel-list li { padding: .4rem 0; border-bottom: 1px solid var(--padel-color-divider); }

/* ===========================================================================
 * Poules et classements
 * =========================================================================*/
.padel-pool { margin-top: 1.25rem; }
.padel-pool h3 { margin: 0 0 .5rem; color: var(--padel-color-primary); font-weight: 600; }
.padel-standings td:first-child, .padel-standings th:first-child { width: 2rem; text-align: center; }

/* Rang qualifié (1ère place) mis en valeur avec l'accent "victoire" */
.padel-standings tr.is-qualified td:first-child {
	background: var(--padel-color-win-bg);
	color: var(--padel-color-win);
	font-weight: 700;
}

/* ===========================================================================
 * Bracket — arbre à élimination directe avec connecteurs SVG.
 *
 * Le rendu est généré par `padelHelpers.renderBracketTree` (cf. common.js) :
 *   - chaque match est positionné en `position: absolute` à un `top` calculé
 *     (round R = moyenne des `top` des deux enfants au round R−1, ce qui
 *     produit naturellement l'écart qui double et la forme d'arbre) ;
 *   - les connecteurs sont tracés par un calque SVG superposé.
 *
 * Le container est scrollable horizontalement (mobile/tablette).
 * =========================================================================*/
.padel-bracket-tree {
	overflow-x: auto;
	padding: .5rem .25rem 1rem;
	margin-top: .5rem;
	-webkit-overflow-scrolling: touch;
}
.padel-bracket-tree-inner {
	position: relative;
	margin: 0 auto;
}
.padel-bracket-round-label {
	color: var(--padel-color-muted);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	text-align: center;
	padding-bottom: .35rem;
	border-bottom: 1px solid var(--padel-color-divider);
}
.padel-bracket-connectors path {
	stroke: var(--padel-color-border-strong, #cfd6df);
	stroke-width: 1.5;
	fill: none;
}
.padel-bracket-match {
	background: var(--padel-color-card);
	border: 1px solid var(--padel-color-border);
	border-radius: var(--padel-radius);
	padding: .5rem .65rem;
	box-shadow: var(--padel-shadow);
	font-size: .9rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: .25rem;
	transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.padel-bracket-match.is-clickable { cursor: pointer; }
.padel-bracket-match.is-clickable:hover {
	transform: translateY(-1px);
	box-shadow: var(--padel-shadow-md);
	border-color: var(--padel-color-primary);
}
.padel-bracket-match.is-clickable:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--padel-color-primary-soft);
	border-color: var(--padel-color-primary);
}
.padel-bracket-match.is-finished { opacity: .92; }
.padel-bracket-match.is-live {
	border-color: var(--padel-color-live);
	background: var(--padel-color-live-bg);
}
.padel-bracket-match .padel-match-teams > div {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: .1rem 0;
	font-size: .92rem;
}
.padel-bracket-live {
	position: absolute;
	top: -10px;
	right: 8px;
	z-index: 1;
}

/* Anciennes classes du layout en colonnes — conservées pour compat (autres vues) */
.padel-bracket {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	padding: .5rem 0;
}
.padel-bracket-round {
	min-width: 220px;
	display: flex;
	flex-direction: column;
	gap: .75rem;
}
.padel-bracket-round h4 {
	margin: 0;
	color: var(--padel-color-muted);
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-weight: 600;
}

.padel-match {
	background: var(--padel-color-card);
	border: 1px solid var(--padel-color-border);
	border-radius: var(--padel-radius);
	padding: .55rem .75rem;
	font-size: .9rem;
	box-shadow: var(--padel-shadow);
}
.padel-match.is-compact { padding: .35rem .55rem; font-size: .85rem; }
.padel-match.is-finished { opacity: .92; }
.padel-match.is-live { border-color: var(--padel-color-live); background: var(--padel-color-live-bg); }

.padel-match-teams > div { padding: .15rem 0; }
.padel-match-teams .is-winner { font-weight: 700; color: var(--padel-color-text); }
.padel-match-teams .is-winner::before {
	/* petit pavé vert "set gagné" devant la paire victorieuse */
	content: '';
	display: inline-block;
	width: 6px; height: 6px;
	background: var(--padel-color-win);
	border-radius: 2px;
	margin-right: .4rem;
	vertical-align: middle;
}
.padel-match-score {
	color: var(--padel-color-muted);
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: .9rem;
}
.padel-match-meta { color: var(--padel-color-faint); font-size: .8rem; margin-top: .25rem; }

/* Badge "live" — bouton d'attraction sur les matchs en cours */
.padel-live-pill {
	display: inline-flex; align-items: center; gap: .35rem;
	background: var(--padel-color-live); color: #fff;
	font-size: .7rem; font-weight: 700;
	padding: .1rem .45rem;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: .05em;
}
.padel-live-pill::before {
	content: '';
	width: 6px; height: 6px;
	background: #fff;
	border-radius: 50%;
	animation: padel-pulse 1.2s ease-in-out infinite;
}
@keyframes padel-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: .35; }
}

/* ===========================================================================
 * Planning (logique conservée côté serveur, onglet retiré en Tâche 2)
 * =========================================================================*/
.padel-schedule-grid { display: flex; gap: 1rem; overflow-x: auto; }
.padel-court-col { min-width: 220px; display: flex; flex-direction: column; gap: .5rem; }
.padel-court-col h4 { margin: 0; color: var(--padel-color-primary); }

/* ===========================================================================
 * Saisie de score bord de terrain (shortcode padel_scorer)
 * =========================================================================*/
.padel-scorer { max-width: 760px; margin: 0 auto; padding: 1rem; }
.padel-scorer-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.padel-scorer-header h2 { margin: 0; font-size: 1.2rem; }

.padel-court-picker { text-align: center; }
.padel-court-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); margin-top: 1.5rem; }
.padel-court-btn {
	font-size: 1.4rem;
	padding: 2rem 1rem;
	background: var(--padel-color-primary); color: #fff;
	border: 0; border-radius: var(--padel-radius);
	cursor: pointer; font-weight: 600;
	box-shadow: var(--padel-shadow-md);
	transition: transform .08s ease;
}
.padel-court-btn:active { transform: scale(0.97); }

.padel-match-list .padel-match-row {
	width: 100%; text-align: left;
	display: grid; grid-template-columns: 1fr auto 1fr auto;
	gap: .5rem; align-items: center;
	padding: 1rem;
	margin-bottom: .5rem;
	background: #fff;
	border: 1px solid var(--padel-color-border);
	border-radius: var(--padel-radius);
	cursor: pointer; font-size: 1.1rem;
	box-shadow: var(--padel-shadow);
}
.padel-match-list .padel-match-row:hover { background: var(--padel-color-card-hover); }
.padel-match-list .padel-vs { color: var(--padel-color-muted); font-size: .85rem; }

/* Sets verticaux du scorer mobile (la modale admin sera refondue en Tâche 4) */
.padel-set { background: #fff; border: 1px solid var(--padel-color-border); border-radius: var(--padel-radius); padding: 1rem; margin-bottom: 1rem; }
.padel-set-label { font-weight: 600; color: var(--padel-color-primary); margin-bottom: .75rem; }
.padel-counter-row { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.padel-counter {
	flex: 1 1 200px; text-align: center;
	background: #fafbfc;
	padding: 1rem .5rem;
	border-radius: var(--padel-radius);
}
.padel-counter-label { font-size: .9rem; color: var(--padel-color-muted); margin-bottom: .5rem; }
.padel-counter-value {
	font-size: 2.5rem; font-weight: 700;
	margin: .25rem 0;
	font-variant-numeric: tabular-nums;
}
.padel-counter-btn {
	width: 56px; height: 56px;
	font-size: 1.6rem; line-height: 1;
	border-radius: 50%; border: 0;
	background: var(--padel-color-primary); color: #fff;
	cursor: pointer; font-weight: 700;
}
.padel-counter-btn:active { transform: scale(0.95); }
.padel-tiebreak-toggle { margin-top: .75rem; }
.padel-action-bar {
	position: sticky; bottom: 0;
	padding: 1rem 0;
	background: linear-gradient(to top, var(--padel-color-bg), transparent);
	display: flex; justify-content: center; gap: .75rem;
}

/* ===========================================================================
 * Affichage public (shortcode padel_display + page publique de la Tâche 5)
 *
 * Refondu en thème CLAIR : le plugin tournoi reste clair partout, y compris
 * sur l'écran public utilisé bord de terrain / projecteur en plein jour.
 * =========================================================================*/
.padel-display-page {
	padding: 1.5rem 2rem;
	background: var(--padel-color-bg);
	color: var(--padel-color-text);
	min-height: 100vh;
}
.padel-display-header h1 {
	font-size: 2.25rem;
	margin: 0 0 1rem;
	color: var(--padel-color-text);
	letter-spacing: -0.01em;
}
.padel-display-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; }
.padel-display-col h2 {
	color: var(--padel-color-primary);
	margin-top: 0; font-size: 1.3rem;
}
.padel-display-col h3 {
	color: var(--padel-color-text);
	font-size: 1.05rem; font-weight: 600;
	margin-bottom: .35rem;
}

.padel-live-match {
	background: var(--padel-color-card);
	border: 1px solid var(--padel-color-border);
	border-left: 4px solid var(--padel-color-live);
	border-radius: var(--padel-radius);
	padding: 1rem 1.25rem;
	margin-bottom: 1rem;
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 1rem;
	align-items: center;
	box-shadow: var(--padel-shadow);
}
.padel-live-court {
	font-size: 1.1rem;
	color: var(--padel-color-live);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.padel-live-teams div { font-size: 1.25rem; padding: .15rem 0; }
.padel-live-teams .is-winner { font-weight: 700; }
.padel-live-score {
	font-family: ui-monospace, monospace;
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--padel-color-text);
}

.padel-display-pool {
	background: var(--padel-color-card);
	border: 1px solid var(--padel-color-border);
	border-radius: var(--padel-radius);
	padding: 1rem;
	margin-bottom: 1rem;
	box-shadow: var(--padel-shadow);
}
.padel-display-pool table { width: 100%; font-size: 1.05rem; }
.padel-display-pool td { padding: .35rem .5rem; border-bottom: 1px solid var(--padel-color-divider); }
.padel-display-pool tr:last-child td { border-bottom: 0; }

/* ===========================================================================
 * Pill "points" — accent citron livescorepadel.
 *
 * Réservé aux mises en avant fortes : score gagnant en chiffre, badge "P+x",
 * encarts de mise en avant. Texte sombre obligatoire (lisibilité).
 * =========================================================================*/
.padel-points {
	display: inline-block;
	background: var(--padel-color-points-bg);
	color: var(--padel-color-points-color);
	padding: .1rem .55rem;
	border-radius: 999px;
	font-weight: 700;
	font-size: .85rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: .01em;
}

/* ===========================================================================
 * Sets "joués" — accent vert sur cellule gagnée (utilisé par les rendus de
 * score façon tableau de tennis : Tâche 4 + bracket Tâche 3).
 * =========================================================================*/
.padel-set-cell {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	padding: .2rem .45rem;
	border-radius: var(--padel-radius-sm);
	display: inline-block;
	min-width: 1.4rem;
	text-align: center;
}
.padel-set-cell.is-won {
	background: var(--padel-color-win-bg);
	color: var(--padel-color-win);
}
.padel-set-cell.is-lost { color: var(--padel-color-muted); }
.padel-set-cell .padel-tb { font-size: .7em; vertical-align: super; margin-left: .15rem; color: var(--padel-color-muted); }

/* ===========================================================================
 * Admin wrapper (page WP /wp-admin/admin.php?page=padel-tournament)
 * =========================================================================*/
.padel-admin-wrap .padel-app { max-width: 1200px; }
.padel-header-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.padel-id-chip {
	background: var(--padel-color-divider);
	padding: .15rem .5rem;
	border-radius: var(--padel-radius-sm);
	font-size: .75rem;
	color: var(--padel-color-muted);
	font-family: ui-monospace, monospace;
}

/* ===========================================================================
 * Sélecteur de tournoi (accueil quand aucun tournament_id)
 * =========================================================================*/
.padel-picker { margin-top: 1rem; max-width: 900px; }
.padel-picker-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.padel-picker-header h2 { margin: 0; }
.padel-empty {
	background: #fff;
	border: 2px dashed var(--padel-color-border);
	border-radius: var(--padel-radius);
	padding: 3rem 1rem;
	text-align: center;
}
.padel-tournaments-list strong { color: var(--padel-color-primary); }
.padel-tournaments-list small { color: var(--padel-color-muted); }

/* Formulaire de création de tournoi */
.padel-create-form { max-width: 600px; }
.padel-form-vertical { display: flex; flex-direction: column; gap: 1rem; }
.padel-form-vertical label {
	display: flex; flex-direction: column; gap: .25rem;
	color: var(--padel-color-text); font-weight: 500;
}
.padel-form-vertical input, .padel-form-vertical select {
	padding: .6rem .75rem;
	border: 1px solid var(--padel-color-border);
	border-radius: var(--padel-radius);
	font-size: 1rem; background: #fff;
}
.padel-form-vertical input:focus, .padel-form-vertical select:focus {
	outline: none;
	border-color: var(--padel-color-primary);
	box-shadow: 0 0 0 3px var(--padel-color-primary-soft);
}
.padel-form-actions { display: flex; gap: .75rem; justify-content: flex-end; }
.padel-checkbox { flex-direction: row !important; align-items: center; gap: .5rem !important; }
.padel-checkbox input { width: auto; }

/* ===========================================================================
 * Statistiques (Overview)
 * =========================================================================*/
.padel-stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1rem;
	margin: 1rem 0 2rem;
}
.padel-stat {
	background: var(--padel-color-card);
	border: 1px solid var(--padel-color-border);
	border-radius: var(--padel-radius);
	padding: 1rem;
	text-align: center;
	box-shadow: var(--padel-shadow);
}
.padel-stat-value {
	font-size: 2rem; font-weight: 700;
	color: var(--padel-color-primary);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}
.padel-stat-label { color: var(--padel-color-muted); font-size: .9rem; margin-top: .25rem; }

/* Checklist */
.padel-checklist { list-style: none; padding: 0; }
.padel-checklist li { padding: .4rem 0 .4rem 1.75rem; position: relative; }
.padel-checklist li::before {
	content: '○'; position: absolute; left: 0;
	color: var(--padel-color-muted);
	font-size: 1.2rem; line-height: 1;
}
.padel-checklist li.is-done { color: var(--padel-color-muted); text-decoration: line-through; }
.padel-checklist li.is-done::before { content: '✓'; color: var(--padel-color-win); }

/* ===========================================================================
 * Bloc paire / joueurs (onglet Paires)
 * =========================================================================*/
.padel-add-team-form {
	background: var(--padel-color-card);
	border: 1px solid var(--padel-color-border);
	border-radius: var(--padel-radius);
	padding: 1rem;
	margin: 1rem 0 1.5rem;
	box-shadow: var(--padel-shadow);
}
.padel-team-name-input {
	font-size: 1.05rem; font-weight: 600;
	padding: .6rem .75rem;
	border: 1px solid var(--padel-color-border);
	border-radius: var(--padel-radius);
	width: 100%; max-width: 400px;
	margin-bottom: .75rem;
}
.padel-player-block {
	border-top: 1px dashed var(--padel-color-border);
	padding-top: .75rem; margin-top: .75rem;
}
.padel-player-block h4 {
	margin: 0 0 .5rem;
	color: var(--padel-color-primary);
	font-size: .95rem;
}
.padel-player-line { margin-bottom: .5rem; align-items: center; }

.padel-badge {
	padding: .15rem .55rem;
	border-radius: 999px;
	font-size: .8rem; font-weight: 500;
	display: inline-block;
}
.padel-badge-ok { background: var(--padel-color-win-bg); color: var(--padel-color-win); }
.padel-badge-warn { background: var(--padel-color-warning-bg); color: var(--padel-color-warning); }
.padel-badge-club { background: var(--padel-color-divider); color: var(--padel-color-muted); }
.padel-section-actions { margin: 1rem 0; }
.padel-row-seeded { background: #fafbfc; }
.padel-seed-badge {
	display: inline-block;
	min-width: 28px; height: 28px;
	line-height: 28px; text-align: center;
	background: var(--padel-color-primary); color: #fff;
	border-radius: 50%;
	font-weight: 700; font-size: .85rem;
}

/* ===========================================================================
 * Helpers
 * =========================================================================*/
.padel-muted { color: var(--padel-color-muted); }
.padel-mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-variant-numeric: tabular-nums; }

/* ===========================================================================
 * Modale de saisie de score (admin)
 *
 * Le contenu sera repensé en grille horizontale (cf. Tâche 4) — pour
 * l'instant on conserve les styles structurels et l'apparence générale.
 * =========================================================================*/
.padel-modal {
	position: fixed; inset: 0;
	background: rgba(15, 23, 42, 0.55);
	display: flex; align-items: center; justify-content: center;
	z-index: 9999; padding: 1rem;
	backdrop-filter: blur(2px);
}
.padel-modal-content {
	background: #fff;
	border-radius: var(--padel-radius);
	max-width: 720px; width: 100%;
	max-height: 90vh; overflow-y: auto;
	padding: 1.5rem;
	box-shadow: var(--padel-shadow-lg);
}
.padel-modal-header {
	display: flex; justify-content: space-between; align-items: center;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--padel-color-border);
	padding-bottom: .75rem;
}
.padel-modal-header h3 { margin: 0; font-size: 1.1rem; font-weight: 700; }

/* ===========================================================================
 * Modale de score — grille type tableau tennis (Tâche 4)
 *
 * Layout : une ligne par paire, une colonne par set (+ super-TB si activé).
 * Chaque cellule contient un input numérique éditable (clavier mobile)
 * surmonté de deux boutons compacts -/+ pour la saisie tactile rapide.
 * Le tie-break d'un set se déplie verticalement SOUS le set, sans empilage.
 * =========================================================================*/
.padel-score-modal { max-width: 780px; }
.padel-score-grid-wrapper {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: 1rem;
}
.padel-score-grid {
	width: 100%;
	border-collapse: separate;
	border-spacing: 6px;
	margin: 0;
}
.padel-score-grid th, .padel-score-grid td {
	padding: 0;
	border: 0;
	background: transparent;
	vertical-align: top;
}

.padel-score-team-head { width: 30%; }
.padel-score-team-label {
	text-align: left;
	font-weight: 600;
	color: var(--padel-color-text);
	font-size: 1rem;
	padding: .85rem .5rem 0 .25rem;
	white-space: nowrap;
	max-width: 240px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.padel-score-head {
	background: #fafbfc;
	border: 1px solid var(--padel-color-divider) !important;
	border-radius: var(--padel-radius);
	padding: .35rem .25rem !important;
	text-align: center;
}
.padel-score-head-label {
	font-size: .8rem;
	font-weight: 600;
	color: var(--padel-color-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
}
.padel-score-tb-toggle {
	margin-top: .2rem;
	background: transparent;
	border: 0;
	color: var(--padel-color-primary);
	cursor: pointer;
	font-size: .75rem;
	padding: .1rem .3rem;
	border-radius: var(--padel-radius-sm);
}
.padel-score-tb-toggle:hover { background: var(--padel-color-primary-soft); }

.padel-score-cell {
	background: var(--padel-color-card);
	border: 1px solid var(--padel-color-border);
	border-radius: var(--padel-radius);
	padding: .5rem .35rem !important;
	min-width: 86px;
	transition: background .15s ease, border-color .15s ease;
}
.padel-score-cell.is-won {
	background: var(--padel-color-win-bg);
	border-color: var(--padel-color-win);
}
.padel-score-cell-main {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .35rem;
}
.padel-score-input {
	width: 56px;
	padding: .35rem .25rem;
	border: 1px solid var(--padel-color-border);
	border-radius: var(--padel-radius);
	background: #fff;
	font-size: 1.4rem;
	font-weight: 700;
	text-align: center;
	font-variant-numeric: tabular-nums;
	color: var(--padel-color-text);
	-moz-appearance: textfield;
}
.padel-score-cell.is-won .padel-score-input {
	color: var(--padel-color-win);
	border-color: var(--padel-color-win);
}
.padel-score-input::-webkit-outer-spin-button,
.padel-score-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.padel-score-input:focus {
	outline: none;
	border-color: var(--padel-color-primary);
	box-shadow: 0 0 0 3px var(--padel-color-primary-soft);
}

.padel-score-cell-btns {
	display: flex;
	gap: .25rem;
}
.padel-score-btn {
	width: 32px;
	height: 32px;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	border: 1px solid var(--padel-color-border);
	background: #fff;
	color: var(--padel-color-text);
	border-radius: var(--padel-radius-sm);
	cursor: pointer;
}
.padel-score-btn:hover { background: var(--padel-color-primary-soft); border-color: var(--padel-color-primary); color: var(--padel-color-primary); }
.padel-score-btn:active { transform: scale(0.95); }

/* Sous-cellule tie-break : pas un nouveau set, juste un mini champ sous la cellule */
.padel-score-tb {
	margin-top: .45rem;
	padding-top: .35rem;
	border-top: 1px dashed var(--padel-color-border);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .35rem;
}
.padel-score-tb-label {
	font-size: .7rem;
	font-weight: 700;
	color: var(--padel-color-muted);
	text-transform: uppercase;
	letter-spacing: .05em;
}
.padel-score-tb-input {
	width: 42px;
	padding: .15rem .2rem;
	border: 1px solid var(--padel-color-border);
	border-radius: var(--padel-radius-sm);
	background: #fff;
	font-size: .9rem;
	font-weight: 600;
	text-align: center;
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
}
.padel-score-tb-input::-webkit-outer-spin-button,
.padel-score-tb-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.padel-score-tb-input:focus {
	outline: none;
	border-color: var(--padel-color-primary);
}

.padel-score-set-actions {
	display: flex;
	justify-content: space-between;
	gap: .75rem;
	margin: .5rem 0 1rem;
	flex-wrap: wrap;
}
.padel-score-set-actions:empty { display: none; }

/* Sur mobile, on permet de scroller la grille horizontalement
   et on rétrécit la cellule pour qu'elle reste pleinement utilisable. */
@media (max-width: 600px) {
	.padel-score-grid { border-spacing: 4px; }
	.padel-score-cell { min-width: 70px; padding: .4rem .2rem !important; }
	.padel-score-input { width: 48px; font-size: 1.15rem; }
	.padel-score-btn { width: 28px; height: 28px; font-size: .9rem; }
	.padel-score-team-label { font-size: .9rem; max-width: 130px; }
}

/* ===========================================================================
 * Front-login + bloc « Accès refusé »
 *
 * Le shortcode [padel_login] est conçu pour s'insérer dans une page Divi
 * standard sans dépendre d'un style hérité. Toutes les classes sont en
 * `padel-login-*` pour rester compatibles avec le sélecteur Divi.
 * =========================================================================*/
.padel-login {
	max-width: 420px;
	margin: 2rem auto;
	background: var(--padel-color-card, #fff);
	border: 1px solid var(--padel-color-border, #e2e6eb);
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
	padding: 1.75rem 1.5rem;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--padel-color-text, #1f2933);
}
.padel-login-title {
	margin: 0 0 1rem;
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--padel-color-text, #1f2933);
	text-align: center;
	letter-spacing: -0.01em;
}
.padel-login-error {
	background: var(--padel-color-danger-bg, #fce8e6);
	color: var(--padel-color-danger, #c0392b);
	border-left: 3px solid var(--padel-color-danger, #c0392b);
	padding: .65rem .85rem;
	border-radius: 6px;
	margin-bottom: 1rem;
	font-size: .9rem;
}
.padel-login-warning {
	background: #fff7e6;
	color: #b58510;
	border-left: 3px solid #f4a300;
	padding: .65rem .85rem;
	border-radius: 6px;
	margin: 0 0 1rem;
}
.padel-login-form { display: flex; flex-direction: column; gap: .85rem; }
.padel-login-field { display: flex; flex-direction: column; gap: .25rem; }
.padel-login-label { font-size: .85rem; font-weight: 600; color: var(--padel-color-muted, #5b6776); }
.padel-login-form input[type="text"],
.padel-login-form input[type="email"],
.padel-login-form input[type="password"] {
	padding: .65rem .85rem;
	border: 1px solid var(--padel-color-border, #e2e6eb);
	border-radius: 8px;
	font-size: 1rem;
	background: #fff;
	color: var(--padel-color-text, #1f2933);
}
.padel-login-form input[type="text"]:focus,
.padel-login-form input[type="email"]:focus,
.padel-login-form input[type="password"]:focus {
	outline: none;
	border-color: var(--padel-color-primary, #0b6e4f);
	box-shadow: 0 0 0 3px var(--padel-color-primary-soft, #e8f5ee);
}
.padel-login-remember {
	display: flex; align-items: center; gap: .5rem;
	font-size: .9rem; color: var(--padel-color-muted, #5b6776);
}
.padel-login-submit {
	margin-top: .35rem;
	width: 100%;
	font-size: 1rem;
	padding: .75rem 1rem;
}
.padel-login-help { text-align: center; font-size: .9rem; margin: .5rem 0 0; }
.padel-login-help a { color: var(--padel-color-primary, #0b6e4f); text-decoration: none; }
.padel-login-help a:hover { text-decoration: underline; }

.padel-login--connected { text-align: center; }
.padel-login--connected p { margin: .5rem 0; }
.padel-login-user { font-size: 1rem; color: var(--padel-color-text, #1f2933); }

/* Bloc « Accès refusé » : affiché en lieu et place des interfaces de gestion */
.padel-access-denied {
	max-width: 560px;
	margin: 2rem auto;
	background: var(--padel-color-card, #fff);
	border: 1px solid var(--padel-color-border, #e2e6eb);
	border-left: 4px solid var(--padel-color-danger, #c0392b);
	border-radius: 8px;
	padding: 1.5rem;
	text-align: center;
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.padel-access-denied-title {
	margin: 0 0 .5rem;
	font-size: 1.3rem;
	color: var(--padel-color-danger, #c0392b);
	font-weight: 700;
}
.padel-access-denied p { color: var(--padel-color-muted, #5b6776); margin: .5rem 0 1rem; }

/* ===========================================================================
 * Responsive
 * =========================================================================*/
@media (max-width: 800px) {
	.padel-display-grid { grid-template-columns: 1fr; }
	.padel-display-page { padding: 1rem; }
	.padel-display-header h1 { font-size: 1.6rem; }
	.padel-counter-btn { width: 64px; height: 64px; font-size: 1.8rem; }
	.padel-form-actions { flex-direction: column-reverse; }
	.padel-modal-content { padding: 1rem; }
}