/* ===========================================
   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;
    }
}