/* ============================================
   INSIGHTS — V3 Top Joueurs Blesses (compact horizontal)
   + V2 Temps de Jeu en Hausse (cards avec barre de progression)
   ============================================ */

/* Container commun aux deux blocs (memes wrapper styles) */
.insights-block {
    background-color: var(--color-bg-card, var(--color-bg-surface));
    border: 1px solid var(--color-border-light);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Header standardise : titre + dot + compteur + icon recharger */
.insights-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border-light);
}

.insights-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.insights-title {
    color: var(--color-text-primary);
    font-size: 14px;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.01em;
}

.insights-count {
    background: var(--color-bg-surface-alt);
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid var(--color-border-light);
}

/* Dot pulsant (couleur passee inline via style.background) */
.insights-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.insights-dot-pulse {
    animation: insights-pulse 2s ease-out infinite;
}

@keyframes insights-pulse {
    0%   { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
    70%  { box-shadow: 0 0 0 6px transparent; opacity: 0.85; }
    100% { box-shadow: 0 0 0 0 transparent; opacity: 1; }
}

/* ----- V3 — Lignes blesses (compact horizontal) -----
   Grille PARTAGEE entre toutes les rangees → colonnes alignees verticalement
   peu importe la longueur des noms. width: max-content groupe le tout a gauche
   sans etirer jusqu'au bord droit du container. */
.insights-rows {
    display: grid;
    grid-template-columns: auto minmax(120px, max-content) max-content max-content max-content;
    align-items: center;
    column-gap: 14px;
    width: max-content;
    max-width: 100%;
}

/* Chaque .insights-row "deroule" ses enfants directement dans la grille parent
   via display: contents. Le row devient invisible structurellement mais permet
   de garder le hover + les borders inter-lignes via les enfants. */
.insights-row {
    display: contents;
}

/* Hover sur tous les enfants d'une ligne (display:contents = pas de hover sur le
   wrapper lui-meme). On cible chaque cellule via `.insights-row:hover > *`. */
.insights-row:hover > * {
    background-color: rgba(15, 23, 41, 0.4);
}

/* Border-bottom : applique sur chaque cellule (puisque le row est display:contents
   et n'a pas de bordure propre). Padding vertical sur cellules pour la respiration. */
.insights-row > * {
    padding-top: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border-light);
    transition: background-color 120ms ease;
    /* display:contents propage parfois mal align-items du grid parent →
       on force align-self pour garantir le centrage vertical de chaque cellule
       (notamment l'avatar 52px vs nom/team plus petits). */
    align-self: center;
}

/* Premiere et derniere cellules : padding horizontal pour aerer les bords */
.insights-row > *:first-child { padding-left: 12px; }
.insights-row > *:last-child  { padding-right: 12px; }

/* Pas de border sous la derniere ligne */
.insights-row:last-child > * {
    border-bottom: none;
}

.insights-name {
    color: var(--color-text-primary);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.insights-name:hover {
    color: var(--color-primary-hover);
}

.insights-team {
    color: var(--color-text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-align: left;
}

.insights-stat {
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    white-space: nowrap;
}

.insights-stat-num {
    color: var(--color-text-primary);
    font-size: 12.5px;
    font-weight: 700;
}

.insights-stat-suffix {
    color: var(--color-text-muted);
    font-size: 11px;
    margin-left: 2px;
}

/* Pill OUT (rouge dilue, bordure fine) */
.insights-pill {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
    padding: 2px 7px;
    border-radius: 4px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.insights-pill-out {
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* ----- Avatar (rond avec sticker equipe + bordure semantique) ----- */
.insights-avatar {
    position: relative;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: visible;
    background: var(--color-bg-surface-alt);
    display: flex;
    align-items: center;
    justify-content: center;
}

.insights-avatar-sm { width: 40px; height: 40px; border: 2px solid transparent; }
.insights-avatar-lg { width: 52px; height: 52px; border: 2px solid transparent; }

.insights-avatar-danger  { border-color: rgba(239, 68, 68, 0.35); }
.insights-avatar-success { border-color: rgba(16, 185, 129, 0.35); }

.insights-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* NBA headshots = format paysage avec le visage dans la moitie haute. On
       cale le focus a 25% depuis le haut pour cadrer le visage, pas les
       epaules. `center` horizontal car les visages sont centres dans la photo. */
    object-position: center 25%;
    border-radius: 50%;
}

/* Sticker equipe en bas-droite — plus visible, lisible meme sur grand avatar */
.insights-avatar-sticker {
    position: absolute;
    bottom: -3px;
    right: -5px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-bg-card, var(--color-bg-surface));
    padding: 2px;
    object-fit: contain;
    z-index: 2;
    box-shadow: 0 0 0 1.5px var(--color-bg-card, var(--color-bg-surface));
}
.insights-avatar-sm .insights-avatar-sticker { width: 18px; height: 18px; }

/* ----- V2 — Cards Temps de Jeu en Hausse -----
   Allegement maximal : pas de fond ni de bordure par card, juste un separateur
   horizontal fin entre lignes. La semantique "hausse" est portee par la couleur
   verte de la barre de progression et le tag delta vert a droite — pas besoin
   de wash + border vert qui surchargeaient. */
.up-cards {
    display: grid;
    grid-template-columns: auto max-content max-content;
    align-items: center;
    column-gap: 14px;
    row-gap: 0;
    padding: 4px 12px;
    width: max-content;
    max-width: 100%;
}

.up-card {
    display: contents;
}

/* Separateur horizontal subtil entre cards via border-bottom sur les cellules */
.up-card > * {
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border-light);
    transition: background-color 120ms ease;
    align-self: center;  /* garantit le centrage vertical (display:contents) */
}

.up-card:last-child > * {
    border-bottom: none;
}

/* Hover : leger wash bleu pale (signal interactif sans encombrer) */
.up-card:hover > * {
    background-color: rgba(15, 23, 41, 0.4);
}

.up-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.up-info-row1 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.up-name {
    color: var(--color-text-primary);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.up-name:hover { color: var(--color-primary-hover); }

.up-team-pill {
    background: var(--color-bg-surface-alt);
    color: var(--color-text-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid var(--color-border-light);
    flex-shrink: 0;
}

/* Barre dual-layer : ancien (gris) + nouveau (vert) superposes */
.up-progress-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.up-min-old {
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    min-width: 32px;
    text-align: right;
}

.up-min-new {
    color: var(--color-text-primary);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 32px;
}

.up-bar-track {
    position: relative;
    flex: 1;
    max-width: 140px;
    height: 6px;
    border-radius: 3px;
    background: rgba(148, 163, 184, 0.08);
    overflow: hidden;
}

/* Barre verte unique : 0 → new_min (largeur new_pct via inline style).
   Une seule couleur pour la lecture immediate "voila combien il joue maintenant". */
.up-bar-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background: var(--color-success);
    border-radius: 3px;
    box-shadow: 0 0 4px rgba(var(--color-success-rgb), 0.6);
}

/* Tick marker : trait vertical clair a la position old_min (left dynamique inline).
   Indique le point de comparaison "avant". Depasse legerement la barre haut/bas
   pour rester visible meme superpose au remplissage vert. */
.up-bar-tick {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 2px;
    background: var(--color-text-primary);
    transform: translateX(-1px);  /* centre le trait sur la position pile */
    border-radius: 1px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);  /* halo sombre pour contraste sur le vert */
    z-index: 2;
}

/* Delta tag a droite */
.up-delta {
    background: rgba(16, 185, 129, 0.12);
    color: #6ee7b7;
    border: 1px solid rgba(16, 185, 129, 0.3);
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 6px;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    white-space: nowrap;
}