/* ===========================================
   Team Page - Depth Chart Styles
   =========================================== */

/* Depth chart table */
.depth-chart-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    box-shadow: var(--shadow-md);
}

/* Depth chart header - blue theme matching game_details */
.depth-chart-header {
    background-color: var(--color-primary);
    color: white;  /* white pur OK : contraste sur fond primary saturé */
    padding: 15px;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    border: 1px solid var(--color-border);
}

/* Player card in depth chart — pattern "Dark Elevation"
   (macOS / Linear / Stripe) :
   - fond plus clair que le parent → contraste sans fatigue
   - ombre portee 4px (--shadow-md) → carte qui flotte
   - light highlight 1px en haut → effet "lit par la lumiere"
   - bordure subtile (BORDER_LIGHT au lieu de BORDER) */
.depth-chart-player-card {
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    padding: 10px;
    margin: 5px;
    background-color: var(--color-bg-elevated);
    text-align: center;
    cursor: pointer;
    transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        var(--shadow-md);
    min-width: 120px;
    max-width: 150px;
    position: relative;
    overflow: visible;
}

/* Ensure card with open popup is above others */
.depth-chart-player-card:has(.player-info-details[open]) {
    z-index: 100;
}

.depth-chart-player-card:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        var(--shadow-lg);
    border-color: var(--color-border-strong);
}

/* Player card image */
.depth-chart-player-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 8px;
    display: block;
    border: 3px solid var(--color-primary);
}

/* Player card name */
.depth-chart-player-name {
    font-size: 12px;
    font-weight: bold;
    color: var(--color-primary);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Player card info (minutes) */
.depth-chart-player-info {
    font-size: 10px;
    color: var(--color-text-muted);
}

/* Compact player card for rotation 3+ — meme pattern Dark Elevation */
.depth-chart-player-card-compact {
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    padding: 6px;
    margin: 3px;
    background-color: var(--color-bg-elevated);
    text-align: center;
    cursor: pointer;
    transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        var(--shadow-sm);
    min-width: 80px;
    max-width: 100px;
    position: relative;
    overflow: visible;
}

/* Ensure compact card with open popup is above others */
.depth-chart-player-card-compact:has(.player-info-details[open]) {
    z-index: 100;
}

.depth-chart-player-card-compact:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        var(--shadow-md);
    border-color: var(--color-border-strong);
}

.depth-chart-player-img-compact {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 4px;
    display: block;
    border: 2px solid var(--color-primary);
}

/* Details element for info toggle */
.player-info-details {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    z-index: 50;
}

/* When open, ensure it's above everything */
.player-info-details[open] {
    z-index: 1001;
}

/* Info icon (summary element - the clickable trigger) */
.player-info-icon {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s, transform 0.2s;
    padding: 2px;
    list-style: none; /* Remove default triangle marker */
    display: block;
}

.player-info-icon::-webkit-details-marker {
    display: none; /* Remove marker in webkit browsers */
}

.player-info-icon:hover {
    opacity: 1;
    transform: scale(1.15);
}

/* Rotate icon when details is open */
.player-info-details[open] .player-info-icon img {
    transform: rotate(45deg);
    transition: transform 0.2s;
}

/* Info popup panel */
.player-info-popup {
    position: absolute;
    top: -5px;
    left: 25px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 10px 12px;
    min-width: 140px;
    box-shadow: var(--shadow-md);
    z-index: 1000;
    font-size: 11px;
    text-align: left;
    animation: fadeInPopup 0.2s ease;
}

@keyframes fadeInPopup {
    from {
        opacity: 0;
        transform: translateX(-5px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Arrow pointing to the icon */
.player-info-popup::before {
    content: '';
    position: absolute;
    top: 8px;
    left: -8px;
    border-width: 8px;
    border-style: solid;
    border-color: transparent white transparent transparent;
    /* drop-shadow() ne supporte pas var(--shadow-*) — alpha aligne sur --shadow-md */
    filter: drop-shadow(-2px 0 2px rgba(0, 0, 0, 0.4));
}

/* Popup on left side (for rightmost columns) */
.player-info-popup-left {
    left: auto;
    right: 25px;
    animation: fadeInPopupLeft 0.2s ease;
}

.player-info-popup-left::before {
    left: auto;
    right: -8px;
    border-color: transparent transparent transparent white;
    /* drop-shadow() ne supporte pas var(--shadow-*) — alpha aligne sur --shadow-md */
    filter: drop-shadow(2px 0 2px rgba(0, 0, 0, 0.4));
}

@keyframes fadeInPopupLeft {
    from {
        opacity: 0;
        transform: translateX(5px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Card needs relative positioning and overflow visible for popup */
.depth-chart-player-card.has-info,
.depth-chart-player-card-compact.has-info {
    position: relative;
    overflow: visible;
}

/* Team header container */
.team-header-container {
    display: flex;
    align-items: center;
    padding: 15px 0;
    margin-bottom: 15px;
}

/* Responsive: tablet screens */
@media (max-width: 992px) {
    .depth-chart-player-card {
        min-width: 100px;
        max-width: 120px;
        padding: 8px;
    }

    .depth-chart-player-img {
        width: 60px !important;
        height: 60px !important;
    }

    .depth-chart-player-name {
        font-size: 11px !important;
    }

    .depth-chart-player-info {
        font-size: 9px !important;
    }

    .depth-chart-header {
        font-size: 12px;
        padding: 10px;
    }

    /* Popup adjustments for tablet */
    .player-info-popup {
        min-width: 140px;
        font-size: 11px;
    }
}

/* Responsive: mobile screens */
@media (max-width: 768px) {
    .depth-chart-player-card {
        min-width: 80px;
        max-width: 100px;
        padding: 6px;
    }

    .depth-chart-player-img {
        width: 50px !important;
        height: 50px !important;
    }

    .depth-chart-player-name {
        font-size: 10px !important;
    }

    .depth-chart-player-info {
        font-size: 8px !important;
    }

    .depth-chart-header {
        font-size: 11px;
        padding: 8px;
    }

    .team-header-container {
        flex-direction: column;
        text-align: center;
    }

    .team-header-container img {
        margin-right: 0 !important;
        margin-bottom: 10px;
    }

    /* Popup adjustments for mobile - appears below icon */
    .player-info-popup {
        top: 25px;
        left: -60px;
        min-width: 120px;
        font-size: 10px;
    }

    .player-info-popup::before {
        top: -8px;
        left: 70px;
        border-color: transparent transparent white transparent;
    }
}

/* ===========================================
   FICHE EQUIPE — MOBILE (specs/mobile/equipe/SPEC.md)
   =========================================== */
.team-page { padding: 20px; }

@media (max-width: 1023.98px) {   /* bp mobile */
    .team-page { padding: 0; --m-head-h: 61px; }

    /* En-tete colle : ses conteneurs s'effacent pour que .thead colle sur
       toute la page (sinon seulement le temps de son propre bloc). */
    .team-page :has(> .mobile-team-header),
    .mobile-team-header { display: contents; }
    .thead {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0 -12px;
        padding: 8px 12px;
        border-bottom: 1px solid var(--color-border-light);
    }
    .th-logo { width: 40px; height: 40px; flex-shrink: 0; }
    .th-id { min-width: 0; }
    .th-name {
        overflow: hidden;
        color: var(--color-text-primary);
        font-size: 16px;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .th-sub { color: var(--color-text-muted); font-size: 12px; }
    /* Leaders : grille 3 x 2 qui retrecit (la grille desktop est en max-content) */
    .th-leaders > div {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        column-gap: 8px !important;
    }
    .th-leaders a { min-width: 0; }

    /* Effectif : rotation en lignes, repartition en grille, pastille « abs. N » */
    .roster-rotation { margin-bottom: 12px; }
    .abs-pill {
        margin-left: 6px;
        padding: 1px 6px;
        border-radius: 8px;
        background: var(--color-danger-subtle);
        color: var(--color-danger-text);
        font-size: 11px;
        font-weight: 700;
    }
    .roster-view .game-log-table .dash-spreadsheet-container { overflow-x: auto !important; }
    .roster-view .m-cols:not(.all-cols) [data-dash-column="3PT"],
    .roster-view .m-cols:not(.all-cols) [data-dash-column="STL"],
    .roster-view .m-cols:not(.all-cols) [data-dash-column="BLK"] { display: none; }
    .roster-view [data-dash-column="PLAYER"] { min-width: 0 !important; max-width: 150px; }
    .dg-filter { margin-bottom: 10px; }
    .dg-label { display: block; margin-bottom: 4px; color: var(--color-text-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; }
    .dist-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 12px 0 8px;
    }
    .dist-head .view-switch { margin: 0; }
    .dist-title { color: var(--color-text-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
    .dg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
    .dg-tile {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1px;
        padding: 7px 10px;
        border: 1px solid var(--color-border);
        border-radius: 10px;
        background: var(--color-bg-surface);
        text-align: left;
        cursor: pointer;
    }
    .dg-tile.on { border-color: var(--color-primary); background: var(--color-primary-subtle); }
    .dg-tile small { color: var(--color-text-muted); font-size: 10px; font-weight: 700; letter-spacing: 0.05em; }
    .dg-tile span { max-width: 100%; overflow: hidden; color: var(--color-text-secondary); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
    .dg-tile b { color: var(--color-text-primary); font-size: 16px; }
    .dg-panel {
        display: none;
        padding: 10px 12px;
        border: 1px solid var(--color-border);
        border-radius: 12px;
        background: var(--color-bg-surface);
    }
    .dg-panel.on { display: block; }
    .dg-ptitle { margin-bottom: 6px; color: var(--color-text-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; }
    .dg-bar { display: grid; grid-template-columns: 96px 1fr 36px; align-items: center; gap: 8px; min-height: 28px; font-size: 12px; }
    .dg-name { overflow: hidden; color: var(--color-text-secondary); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
    .dg-track { height: 10px; border-radius: 5px; background: var(--color-border-light); }
    .dg-fill { height: 100%; border-radius: 5px; background: var(--color-primary); }
    .dg-bar b { color: var(--color-text-primary); text-align: right; }
    .dg-empty { padding: 16px; color: var(--color-text-muted); text-align: center; }

    /* Profil : cartes -> lignes pleine largeur STAT · barre · rang · valeur */
    :has(> .pf-col) { flex-direction: column !important; gap: 16px !important; }
    .pf-col { min-width: 0 !important; width: 100%; }
    .pf-cards { flex-direction: column; gap: 4px !important; }
    .pf-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 80px 76px;
        align-items: center;
        gap: 8px;
        min-width: 0 !important;
        padding: 8px 10px !important;
    }
    .pf-card > div:first-child { margin: 0 !important; text-align: left !important; }
    .pf-card > div:nth-child(2) { order: 3; }
    .pf-card > div:nth-child(2) > span:first-child { font-size: 18px !important; }
    .pf-card > div:nth-child(3) { order: 2; margin: 0 !important; height: 6px !important; }
}