/*
 * Player Summary Table — Custom Component Styles
 *
 * All classes prefixed with .lc-plt- to avoid collisions.
 * "lc-plt" = Lore Capsule Player Summary Table.
 *
 * Mirrors the visual language of .lc-pst- (Player Stats Table).
 */


/* ===================================================================
   Container & Wrapper
   =================================================================== */

.lc-plt-wrapper {
    width: 100%;
}

.lc-plt-container {
    width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #12131c;
    overflow-x: auto;
    overflow-y: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.lc-plt-empty {
    padding: 40px;
    text-align: center;
    color: #555873;
    font-size: 0.875rem;
    font-family: "Outfit", sans-serif;
}


/* ===================================================================
   Header Row
   =================================================================== */

.lc-plt-header-row {
    display: flex;
    min-width: max-content;
    background: #181a26;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    user-select: none;
}

.lc-plt-th {
    padding: 11px 14px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #555873;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: "JetBrains Mono", monospace;
    position: relative;
}

.lc-plt-th-sorted {
    color: #4f8fff !important;
}

/* Tooltip on hover */
.lc-plt-th[data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #1e2030;
    color: #8b8fa8;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    animation: lcPltTipFade 150ms ease;
}

@keyframes lcPltTipFade {
    from { opacity: 0; transform: translateX(-50%) translateY(-4px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Game log header tooltips */
.lc-plt-gl-table th {
    position: relative;
}
.lc-plt-gl-table th[data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #1e2030;
    color: #8b8fa8;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    animation: lcPltTipFade 150ms ease;
}

/* Yearly stats totals row */
.lc-plt-totals-row {
    border-top: 2px solid rgba(79, 143, 255, 0.25) !important;
    background: rgba(79, 143, 255, 0.04) !important;
    cursor: default !important;
}
.lc-plt-totals-row .lc-plt-val {
    font-weight: 700;
    color: #c8ccd8;
}
.lc-plt-totals-label {
    font-weight: 800 !important;
    color: #4f8fff !important;
    letter-spacing: 0.06em;
    font-size: 0.7rem;
}
.lc-plt-totals-row:hover {
    background: rgba(79, 143, 255, 0.04) !important;
}

/* Game log totals row */
.lc-plt-gl-totals {
    border-top: 2px solid rgba(79, 143, 255, 0.25);
}
.lc-plt-gl-totals td {
    font-weight: 700;
    color: #c8ccd8;
    background: rgba(79, 143, 255, 0.04);
    padding: 6px 8px;
    font-size: 0.7rem;
}
.lc-plt-gl-totals td:first-child {
    color: #4f8fff;
    font-weight: 800;
    letter-spacing: 0.06em;
}


/* ===================================================================
   Column Widths
   =================================================================== */

.lc-plt-col-year    { width: 64px;  min-width: 64px;  flex-shrink: 0; justify-content: center; }
.lc-plt-col-team    { width: 56px;  min-width: 56px;  flex-shrink: 0; justify-content: center; }
.lc-plt-col-games   { width: 72px;  min-width: 72px;  flex-shrink: 0; justify-content: center; }
.lc-plt-col-stat    { width: 88px;  min-width: 88px;  flex-shrink: 0; justify-content: center; }
.lc-plt-col-chevron { width: 36px;  min-width: 36px;  flex-shrink: 0; justify-content: center; }


/* ===================================================================
   Table Body
   =================================================================== */

.lc-plt-body {
    max-height: 65vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #2a2d42 transparent;
}

.lc-plt-body::-webkit-scrollbar       { width: 6px; }
.lc-plt-body::-webkit-scrollbar-track  { background: transparent; }
.lc-plt-body::-webkit-scrollbar-thumb  { background: #2a2d42; border-radius: 3px; }


/* ===================================================================
   Table Rows
   =================================================================== */

.lc-plt-row {
    display: flex;
    min-width: max-content;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 120ms;
    cursor: pointer;
    border-left: 2px solid transparent;
}

.lc-plt-row:nth-child(odd) {
    background: rgba(255, 255, 255, 0.012);
}

.lc-plt-row:hover {
    background: rgba(79, 143, 255, 0.06);
    border-left-color: rgba(79, 143, 255, 0.4);
}

.lc-plt-row.active {
    background: rgba(79, 143, 255, 0.1);
    border-left-color: #4f8fff;
}


/* ===================================================================
   Table Cells
   =================================================================== */

.lc-plt-td {
    padding: 10px 14px;
    font-size: 0.8125rem;
    font-family: "JetBrains Mono", monospace;
    color: #c7cdd9;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.lc-plt-year {
    font-weight: 600;
    color: #e2e8f0;
}

/* Chevron */
.lc-plt-chevron {
    font-size: 0.625rem;
    color: #555873;
    transition: transform 200ms ease;
}

.lc-plt-chevron.expanded {
    transform: rotate(180deg);
    color: #4f8fff;
}


/* ===================================================================
   Team Badge
   =================================================================== */

.lc-plt-team-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 800;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.06em;
    font-family: "Outfit", sans-serif;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    min-width: 28px;
}


/* ===================================================================
   Stat Bars (behind values)
   =================================================================== */

.lc-plt-stat {
    position: relative;
}

.lc-plt-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(79, 143, 255, 0.12) 0%, rgba(79, 143, 255, 0.04) 100%);
    border-radius: 0 4px 4px 0;
    pointer-events: none;
    z-index: 0;
}

.lc-plt-val {
    position: relative;
    z-index: 1;
}


/* ===================================================================
   Efficiency Tiers (color-coded values)
   =================================================================== */

.lc-plt-eff.t1 .lc-plt-val { color: #34d399; font-weight: 700; }
.lc-plt-eff.t2 .lc-plt-val { color: #6ee7b7; }
.lc-plt-eff.t3 .lc-plt-val { color: #c7cdd9; }
.lc-plt-eff.t4 .lc-plt-val { color: #fbbf24; }
.lc-plt-eff.t5 .lc-plt-val { color: #f87171; font-weight: 700; }


/* ===================================================================
   Detail Panel (expanded season view)
   =================================================================== */

.lc-plt-detail {
    margin-top: 16px;
    border-radius: 14px;
    border: 1px solid rgba(79, 143, 255, 0.2);
    background: #12131c;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    animation: lcPltSlideIn 200ms ease;
}

@keyframes lcPltSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.lc-plt-detail-inner {
    padding: 20px 24px;
}

/* Header */
.lc-plt-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.lc-plt-detail-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.lc-plt-detail-name {
    font-size: 1.3rem;
    font-weight: 800;
    color: #f5f5f5;
    font-family: "Outfit", sans-serif;
}

.lc-plt-detail-pill {
    font-size: 0.7rem;
    font-weight: 600;
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.06);
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-family: "JetBrains Mono", monospace;
}

.lc-plt-detail-close {
    background: none;
    border: none;
    color: #555873;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: color 150ms, background 150ms;
    line-height: 1;
}

.lc-plt-detail-close:hover {
    color: #f87171;
    background: rgba(248, 113, 113, 0.1);
}


/* ===================================================================
   Stat Cards
   =================================================================== */

.lc-plt-stat-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .lc-plt-stat-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

.lc-plt-stat-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 16px 20px;
    text-align: center;
}

.lc-plt-stat-card-value {
    font-size: 2rem;
    font-weight: 800;
    color: #f5f5f5;
    font-family: "Outfit", sans-serif;
    line-height: 1.2;
}

.lc-plt-stat-card-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: #555873;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 4px;
    font-family: "JetBrains Mono", monospace;
}


/* ===================================================================
   Detail Content (Chart + Game Log grid)
   =================================================================== */

.lc-plt-detail-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.lc-plt-detail-loading {
    padding: 40px;
    text-align: center;
    color: #555873;
    font-size: 0.875rem;
    font-family: "Outfit", sans-serif;
}


/* ===================================================================
   Chart Area
   =================================================================== */

.lc-plt-chart-area {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 12px;
}

.lc-plt-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.lc-plt-chart-tabs {
    display: flex;
    gap: 2px;
}

.lc-plt-chart-tab {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #555873;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 150ms;
    font-family: "JetBrains Mono", monospace;
}

.lc-plt-chart-tab:hover {
    color: #8b8fa8;
    background: rgba(255, 255, 255, 0.04);
}

.lc-plt-chart-tab.active {
    background: rgba(79, 143, 255, 0.15);
    color: #4f8fff;
    border-color: rgba(79, 143, 255, 0.3);
}


/* ===================================================================
   Game Log Table
   =================================================================== */

.lc-plt-gamelog {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    overflow: hidden;
}

.lc-plt-gamelog-title {
    padding: 10px 14px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #555873;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-family: "JetBrains Mono", monospace;
}

.lc-plt-gamelog-scroll {
    max-height: 260px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #2a2d42 transparent;
}

.lc-plt-gamelog-scroll::-webkit-scrollbar       { width: 5px; }
.lc-plt-gamelog-scroll::-webkit-scrollbar-track  { background: transparent; }
.lc-plt-gamelog-scroll::-webkit-scrollbar-thumb  { background: #2a2d42; border-radius: 3px; }

.lc-plt-gl-table {
    width: 100%;
    border-collapse: collapse;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.7rem;
}

.lc-plt-gl-table th {
    padding: 8px 10px;
    text-align: center;
    color: #555873;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.625rem;
    position: sticky;
    top: 0;
    z-index: 1;
    background: #12131c;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    user-select: none;
    transition: color 120ms;
}

.lc-plt-gl-table th:hover {
    color: #8b8fa8;
}

.lc-plt-gl-table th.lc-plt-th-sorted {
    color: #4f8fff;
}

.lc-plt-gl-table td {
    padding: 6px 10px;
    text-align: center;
    color: #c7cdd9;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.lc-plt-gl-table tr:nth-child(odd) td {
    background: rgba(255, 255, 255, 0.015);
}

.lc-plt-gl-table tr:hover td {
    background: rgba(79, 143, 255, 0.06);
}