/* Cartes du tableau de bord (classement général, journée).
   Feuilles chargées dans l'ordre skin-1 à skin-7 par head.php (l'ordre compte : cascade). */

/* ---------- Tableau de bord : cartes « Classement général » (#dash) et « Journée » (#dashjournee > #jk-day) ----------
   Onglets, groupes de lignes et « Tout afficher » : dashBoard() (jk.js) ; tableaux : Wrapper::boardRankTable / boardScore */
.jk-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.jk-board-card {
	display: flex; flex-direction: column; align-self: flex-start; min-width: 0; padding: 0 !important; overflow: hidden;
	background: var(--jk-surface); border: 1px solid var(--jk-line); border-radius: var(--jk-radius);
	box-shadow: 0 1px 2px rgba(15, 25, 80, .04), 0 6px 20px rgba(15, 25, 80, .05);
}
#dashjournee > .jk-board { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.jk-board [hidden] { display: none !important; }
.jk-board .material-icons { line-height: 1 !important; }

.jk-board-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; }
.jk-board-title { display: grid; gap: 3px; min-width: 0; }
.jk-board-eyebrow { display: flex; align-items: center; gap: 8px; font: 700 12px/1.2 var(--jk-font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--jk-fg-2); }
.jk-board-flag { font: 700 11px/1 var(--jk-font-body); font-style: normal; letter-spacing: 0; text-transform: none; padding: 3px 8px; border-radius: 999px; background: rgba(240, 138, 18, .14); color: #a85800; }
#main .jk-board-head h2 { margin: 0; padding: 0 !important; background: none !important; text-shadow: none !important; font: 800 20px/1.2 var(--jk-font-display) !important; color: var(--jk-fg) !important; }
.jk-board-sub { font-size: 13px; color: var(--jk-fg-2); }
.jk-board-sub::first-letter { text-transform: uppercase; }

/* Onglets (réguliers / occasionnels, matchs / classement) */
.jk-seg { display: inline-flex; flex: none; gap: 2px; padding: 3px; border-radius: 11px; background: var(--jk-chip); }
.jk-seg button {
	display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 10px; border: 0; border-radius: 8px;
	background: transparent; color: var(--jk-fg-2); font: 700 13px/1.2 var(--jk-font-body); cursor: pointer; transition: background .15s, color .15s;
}
.jk-seg button:hover { color: var(--jk-fg); }
.jk-seg button small { font: 700 11px/1.4 var(--jk-font-body); padding: 0 6px; border-radius: 999px; background: rgba(15, 25, 80, .07); }
.jk-seg button.is-on { background: var(--jk-surface); color: var(--jk-fg); box-shadow: 0 1px 3px rgba(15, 25, 80, .14); }
.jk-seg button.is-on small { background: var(--jk-accent-soft); color: var(--jk-accent); }
.jk-board-tabs { align-self: flex-start; margin: 0 18px 12px; }

/* Journée précédente / suivante */
.jk-board-nav { display: flex; flex: none; gap: 6px; }
.jk-board-nav button {
	display: grid; place-items: center; width: 36px; height: 36px; margin: 0; padding: 0; border: 1px solid var(--jk-line); border-radius: 50%;
	background: var(--jk-surface); color: var(--jk-fg); cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
.jk-board-nav button:hover:not(:disabled) { border-color: var(--jk-accent); background: var(--jk-accent-soft); color: var(--jk-accent); }
.jk-board-nav button:disabled { opacity: .35; cursor: default; }
.jk-board-nav .material-icons { font-size: 22px; }

/* Tableaux */
.jk-board-body { flex: 1; min-height: 0; }
.jk-board-table { width: 100%; border-collapse: collapse; font-family: var(--jk-font-body); font-variant-numeric: tabular-nums; }
.jk-board-table th {
	padding: 8px 6px; background: var(--jk-bg); border-bottom: 1px solid var(--jk-line); border-top: 1px solid var(--jk-line);
	font: 700 11px/1.2 var(--jk-font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--jk-fg-2); text-align: left;
}
.jk-board-table abbr { text-decoration: none; border: 0; cursor: help; }
.jk-board-table td { padding: 8px 6px; border-bottom: 1px solid var(--jk-line); font-size: 15px; color: var(--jk-fg); vertical-align: middle; text-align: left; }
.jk-board-table tbody tr:last-child td { border-bottom: 0; }
.jk-board-table th:first-child, .jk-board-table td:first-child { padding-left: 18px; }
.jk-board-table th:last-child, .jk-board-table td:last-child { padding-right: 18px; }
.jk-board-table tr.is-link { cursor: pointer; }
.jk-board-table tr.is-link:hover td, .jk-board-table tr.is-link:focus-visible td { background: var(--jk-accent-soft); }
.jk-board-table tr.is-link:focus-visible { outline: none; }
.jk-board-table tr.is-link:focus-visible td:first-child { box-shadow: inset 3px 0 0 var(--jk-accent); }

.jk-col-rank { width: 1%; }
.jk-rank {
	display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 5px; border-radius: 999px;
	background: var(--jk-chip); color: var(--jk-fg-2); font: 800 13px/1 var(--jk-font-body);
}
.jk-row.is-p1 .jk-rank { background: #f5c518; color: #3d2e00; }
.jk-row.is-p2 .jk-rank { background: #c9d1de; color: #2b3345; }
.jk-row.is-p3 .jk-rank { background: #e1a26b; color: #3a1f08; }
.jk-col-name { max-width: 0; }
.jk-name { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 700; }
.jk-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jk-board-table .jk-col-num { width: 1%; text-align: center; white-space: nowrap; font-weight: 600; color: var(--jk-fg-2); }
.jk-board-table td.jk-col-num.is-key { color: var(--jk-fg); }
.jk-pts { display: inline-block; min-width: 36px; padding: 5px 8px; border-radius: 8px; background: var(--jk-accent-soft); color: var(--jk-accent); font: 800 15px/1 var(--jk-font-body); }
.jk-diff { font-weight: 700; color: var(--jk-fg-2); }
.jk-diff.is-pos { color: var(--jk-green); }
.jk-diff.is-neg { color: var(--jk-red); }
.jk-pct { display: inline-block; min-width: 48px; padding: 5px 8px; border-radius: 8px; background: var(--jk-chip); color: var(--jk-fg-2); font: 800 14px/1 var(--jk-font-body); }
.jk-pct.is-pos { background: rgba(46, 157, 91, .14); color: var(--jk-green); }
.jk-pct.is-neg { background: rgba(214, 59, 59, .11); color: var(--jk-red); }
.jk-meter { display: inline-block; vertical-align: middle; width: 56px; height: 6px; margin-right: 8px; border-radius: 3px; background: var(--jk-chip); overflow: hidden; }
.jk-meter i { display: block; height: 100%; border-radius: 3px; background: var(--jk-accent); }
.jk-medal { flex: none; font-size: 18px !important; }
.jk-medal.is-gold { color: #e0a800; }
.jk-medal.is-silver { color: #8e99ad; }
.jk-medal.is-bronze { color: #c47a3c; }

/* Forme du joueur : pastille historique (.forme / .formeind, images de fond) */
.jk-board .jk-avatar.forme { display: block; flex: none; float: none !important; width: 28px !important; height: 28px !important; margin: 0 !important; border-radius: 50%; }
.jk-board .jk-avatar .formeind { display: block; width: 28px !important; height: 28px !important; background-size: 28px 28px !important; }

/* Matchs */
.jk-board-matches td { padding-top: 10px; padding-bottom: 10px; }
.jk-m-team { width: 50%; max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--jk-fg-2); font-weight: 600; }
.jk-board-table td.jk-m-team.is-home { text-align: right; }
.jk-m-team.is-win { color: var(--jk-fg); font-weight: 800; }
.jk-board-table td.jk-m-score { width: 1%; padding-inline: 10px; text-align: center; white-space: nowrap; }
.jk-m-level { width: 1%; }
.jk-m-level abbr {
	display: inline-grid; place-items: center; min-width: 30px; height: 24px; padding: 0 6px; border-radius: 6px;
	background: rgba(107, 85, 201, .12); color: var(--jk-purple); font: 800 12px/1 var(--jk-font-body);
}
.jk-score { display: inline-flex; align-items: center; gap: 3px; padding: 3px; border-radius: 9px; background: var(--jk-chip); font: 800 15px/1 var(--jk-font-body); }
.jk-score b { min-width: 26px; padding: 5px 6px; border-radius: 6px; text-align: center; color: var(--jk-fg-2); }
.jk-score b.is-win { background: var(--jk-accent); color: #fff; }
.jk-score.is-draw b { color: var(--jk-fg); }
.jk-score.is-todo, .jk-score.is-forfait { padding: 6px 10px; font: 700 11px/1 var(--jk-font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--jk-fg-2); }
.jk-score.is-todo { background: transparent; border: 1px dashed var(--jk-line); }
.jk-score.is-forfait { background: rgba(214, 59, 59, .11); color: var(--jk-red); }
.jk-score-detail, .jk-score-tag { display: block; margin-top: 4px; font: 600 11px/1.2 var(--jk-font-body); color: var(--jk-fg-2); }
.jk-score-tag { color: var(--jk-orange); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

/* grid.css impose aux cellules du tableau de bord (.dashboard_page td/th) une largeur auto, un fond gris et des bordures */
.dashboard_page .jk-board-table th, .dashboard_page .jk-board-table td { width: auto !important; border-top: 0; border-right: 0; }
.dashboard_page .jk-board-table th { background: var(--jk-bg) !important; border-top: 1px solid var(--jk-line); line-height: 1.2; }
.dashboard_page .jk-board-table .jk-col-rank, .dashboard_page .jk-board-table .jk-col-num,
.dashboard_page .jk-board-table .jk-m-score, .dashboard_page .jk-board-table .jk-m-level { width: 1% !important; }
.dashboard_page .jk-board-table .jk-col-name { width: 100% !important; }
.dashboard_page .jk-board-table .jk-m-team { width: 50% !important; }

/* Vide, chargement */
.jk-board-table tr.jk-board-empty td { padding: 28px 18px; text-align: center; color: var(--jk-fg-2); font-weight: 600; }
.jk-board-loading, .jk-board-none { display: grid; place-items: center; gap: 6px; padding: 56px 18px; text-align: center; color: var(--jk-fg-2); }
.jk-board-none b { color: var(--jk-fg); font: 800 17px/1.2 var(--jk-font-display); }
.jk-board-subtitle { margin: 14px 0 2px !important; padding: 0 4px; font: 800 13px/1.2 var(--jk-font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--jk-fg-2); }
.jk-board-subtitle:first-child { margin-top: 4px !important; }
.jk-board-subtitle[hidden] { display: none; }
.jk-board-none .material-icons, .jk-board-loading .material-icons { font-size: 34px; opacity: .45; }
.jk-board-loading .material-icons { animation: jk-board-pulse 1.2s ease-in-out infinite; }
@keyframes jk-board-pulse { 50% { opacity: .12; } }

/* Pied de carte : « Tout afficher » à gauche, lien vers la page complète à droite */
.jk-board-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 8px 12px; border-top: 1px solid var(--jk-line); }
.jk-board-more, .jk-board-link {
	display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 7px 8px; border: 0; border-radius: 8px; background: transparent;
	font: 700 14px/1.2 var(--jk-font-body); text-decoration: none !important; cursor: pointer; transition: background .15s, color .15s;
}
.jk-board-more { color: var(--jk-accent); }
.jk-board-link { margin-left: auto; color: var(--jk-fg-2) !important; }
.jk-board-more:hover, .jk-board-link:hover { background: var(--jk-accent-soft); color: var(--jk-accent) !important; }
.jk-board-more .material-icons, .jk-board-link .material-icons { font-size: 18px; }

@media (max-width: 720px) {
	.jk-board-table .is-opt, .jk-meter { display: none; }
	#dash .jk-board-head { flex-wrap: wrap; }
}
@media (max-width: 480px) {
	.jk-board-head { padding: 14px 12px 10px; }
	.jk-board-tabs { margin-inline: 12px; }
	.jk-board-table td { font-size: 14px; }
	.jk-board-table th:first-child, .jk-board-table td:first-child { padding-left: 12px; }
	.jk-board-table th:last-child, .jk-board-table td:last-child { padding-right: 12px; }
	.jk-board-table td.jk-m-score { padding-inline: 6px; }
	.jk-name { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .jk-board-loading .material-icons { animation: none; } .jk-seg button, .jk-board-nav button { transition: none; } }