/* ===== Individual Results Mirror (Clean View) ===== */
.ept-ind-results-mirror .epcg-toolbar {
    display: none !important;
}
.ept-ind-results-mirror .epcg-card-head {
    display: none !important;
}
.ept-ind-results-mirror .epcg-card {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}
.ept-ind-results-mirror .epcg-card-body {
    padding: 0 !important;
}

/* ===== Full Screen Lightbox ===== */
.ept-lightbox-fullscreen {
    width: 98vw !important;
    height: 98vh !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 8px;
    background: var(--ept-bg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0 !important;
}

.ept-lightbox-fullscreen .ept-lightbox-body {
    flex: 1;
    overflow-y: auto;
    padding: 40px;
}

/* Hide toolbar/headers in lightbox too if desired, 
   but user specifically said "remove toolbar... (pic red highlight)" which pointed to the on-page section.
   However, for "presentation", cleaner is usually better. 
   Let's keep them in lightbox for now unless it looks bad, but maybe hide the card headers? 
   The user said "no title necessary" for the LEADERBOARD part.
   Let's stick to hiding toolbar in mirror only first. 
*/

/* Dark Mode Lightbox overrides */
:root[data-theme="dark"] .ept-lightbox-fullscreen {
    background: #111;
}

/* ===== Bracket View (Single/Double Elimination) ===== */
:root{
    --ept-rounds: 4;
    --ept-rows: 15;
    /* Base cell size for the bracketology grid
       Smaller values reduce Round 1 vertical whitespace while keeping 2 player rows visible. */
    --ept-row-h: 70px;
    --ept-gap: 10px;
    --ept-line: rgba(72, 123, 255, 0.28);
    --ept-line-strong: rgba(72, 123, 255, 0.42);
    --ept-step: 2;
}

.ept-bracket-winners{
    overflow-x: auto;
    padding-bottom: 8px;
}

.ept-bracket-rounds{
    display: grid;
    grid-template-columns: repeat(var(--ept-rounds, 4), 260px);
    gap: 24px;
    align-items: end;
    margin-bottom: 10px;
}

.ept-bracket-round-title{
    font-weight: 700;
    opacity: 0.9;
}

.ept-bracket-grid--winners{
    display: grid;
    grid-template-columns: repeat(var(--ept-rounds, 4), 260px);
    /* Increase row height so each match card has room for 2 player rows */
    grid-template-rows: repeat(var(--ept-rows, 15), var(--ept-row-h));
    /* More horizontal space so vertical feeder lines have room between columns */
    gap: var(--ept-gap) 48px;
    align-items: start;
}

.ept-bracket-slot{
    position: relative;
}

/* Horizontal connector lines (left/right) */
/* Right-side outgoing connector stub */
.ept-bracket-slot::after{
    content: "";
    position: absolute;
    top: 50%;
    right: -16px;
    width: 16px;
    height: 2px;
    background: var(--ept-line-strong);
}

/* Vertical feeder line (connects the two prior-round matches into this match).
   Height is based on `--ept-step` set per match slot in PHP (2^(round-1)). */
.ept-bracket-slot[data-round]:not([data-round="1"])::before{
    content: "";
    position: absolute;
    left: -34px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    /* Extend slightly so it can meet the horizontal feeders cleanly */
    height: calc((var(--ept-step, 2) * (var(--ept-row-h) + var(--ept-gap))) - var(--ept-gap) + var(--ept-gap));
    background: var(--ept-line);
}

/* Left-side incoming stub into the match card itself */
.ept-bracket-slot[data-round]:not([data-round="1"]) .ept-bracket-match::before{
    content: "";
    position: absolute;
    /* Move the incoming stub left, and shorten it slightly (per visual tuning request) */
    left: -34px;
    top: 50%;
    /* Long enough to reach the vertical feeder line in the column gutter */
    width: 32px;
    height: 2px;
    transform: translateY(-50%);
    background: var(--ept-line-strong);
}

/* Vertical line should be behind the card */
.ept-bracket-match{ position: relative; z-index: 2; }

.ept-bracket-match{
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    padding: 8px;
    background: rgba(255,255,255,0.03);
    min-height: 64px;
}
/* Legacy flex-column bracket styles removed (replaced by slot-based grid layout). */

.ept-bracket-col-title{
    font-weight: 700;
    margin-bottom: 8px;
    opacity: 0.9;
}

.ept-bracket-match{
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
    background: rgba(255,255,255,0.03);
}

.ept-bracket-key{
    font-size: 12px;
    opacity: 0.65;
    margin-bottom: 6px;
}

.ept-bracket-player{
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(0,0,0,0.18);
    margin-top: 6px;
    font-size: 14px;
}

:root[data-theme="dark"] .ept-bracket-match{
    border-color: rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.03);
}

:root[data-theme="dark"] .ept-bracket-player{
    background: rgba(255,255,255,0.06);
}

/* ===== Tournament Results – Mobile Layout Fixes ===== */

/* Fix page floating on mobile — full width */
@media (max-width: 768px) {
    .ept-tr-wrap {
        padding: 8px 4px !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow-x: hidden;
    }

    /* Stack flight standings vertically */
    .ept-flight-standings-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    /* Flight collapsible sections */
    .ept-flight-section {
        margin-bottom: 8px;
    }
    .ept-flight-toggle {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        padding: 10px 12px;
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 8px;
        background: rgba(255,255,255,0.04);
        color: inherit;
    }
    .ept-flight-toggle .ept-flight-arrow {
        transition: transform 0.2s ease;
        font-size: 12px;
    }
    .ept-flight-toggle[aria-expanded="false"] .ept-flight-arrow {
        transform: rotate(-90deg);
    }
    .ept-flight-toggle[aria-expanded="true"] .ept-flight-arrow {
        transform: rotate(0deg);
    }
    .ept-flight-body {
        overflow: hidden;
        transition: max-height 0.25s ease;
    }
    .ept-flight-body.collapsed {
        max-height: 0 !important;
        overflow: hidden;
    }

    /* Flight standings tables — remove min-width, fit mobile */
    .ept-flight-section .ept-tr-table {
        min-width: 0 !important;
        font-size: 13px;
    }
    .ept-flight-section .ept-tr-table th,
    .ept-flight-section .ept-tr-table td {
        padding: 5px 4px !important;
    }

    /* Horse Race — card layout on mobile */
    #ept-horse-race-scorecard .ept-tr-table {
        min-width: 0 !important;
    }
    #ept-horse-race-scorecard {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Overall Team Leaderboard — responsive */
    .ept-mg-overall-section .ept-tr-table {
        min-width: 0 !important;
        font-size: 12px;
    }
    .ept-mg-overall-section .ept-tr-table th,
    .ept-mg-overall-section .ept-tr-table td {
        padding: 6px 4px !important;
        white-space: nowrap;
    }
    .ept-mg-overall-section .ept-tr-table td:nth-child(2) {
        white-space: normal;
        word-break: break-word;
        max-width: 140px;
    }

    /* Team name: stack label and players on separate lines */
    .ept-team-cell .ept-team-label,
    .ept-team-cell .ept-team-players {
        display: block;
    }
    .ept-team-cell .ept-team-label {
        font-weight: 700;
        font-size: 13px;
        margin-bottom: 1px;
    }
    .ept-team-cell .ept-team-players {
        font-size: 12px;
        opacity: 0.85;
    }
    .ept-team-cell {
        white-space: normal !important;
    }

    /* Narrow Pos column on mobile */
    .ept-mg-overall-section .ept-tr-table th:first-child,
    .ept-mg-overall-section .ept-tr-table td:first-child {
        width: 14px !important;
        min-width: 14px;
        max-width: 16px;
        padding: 2px 0 !important;
        text-align: center;
        font-size: 10px;
        box-sizing: content-box;
    }

    /* Sticky Team column on Overall Leaderboard */
    .ept-mg-overall-section .ept-tr-table th:nth-child(1),
    .ept-mg-overall-section .ept-tr-table td:nth-child(1),
    .ept-mg-overall-section .ept-tr-table th:nth-child(2),
    .ept-mg-overall-section .ept-tr-table td:nth-child(2) {
        position: sticky;
        z-index: 2;
    }
    .ept-mg-overall-section .ept-tr-table th:nth-child(1),
    .ept-mg-overall-section .ept-tr-table td:nth-child(1) {
        left: 0;
        background: var(--ept-bg, #fff) !important;
    }
    .ept-mg-overall-section .ept-tr-table th:nth-child(2),
    .ept-mg-overall-section .ept-tr-table td:nth-child(2) {
        left: 16px;
        background: var(--ept-bg, #fff) !important;
    }
    .ept-mg-overall-section .ept-tr-table tr:nth-child(even) td:nth-child(1),
    .ept-mg-overall-section .ept-tr-table tr:nth-child(even) td:nth-child(2) {
        background: var(--ept-bg-alt, #f3f4f6) !important;
    }
    .ept-mg-overall-section .ept-tr-table thead th:nth-child(1),
    .ept-mg-overall-section .ept-tr-table thead th:nth-child(2) {
        z-index: 3;
    }
    .ept-flight-section .ept-tr-table th:first-child,
    .ept-flight-section .ept-tr-table td:first-child {
        width: 28px !important;
        min-width: 28px;
        max-width: 32px;
        padding-left: 2px !important;
        padding-right: 2px !important;
        text-align: center;
    }

    /* Section headers polish */
    .ept-tr-section h3 {
        font-size: 16px !important;
    }

    /* Header polish */
    .ept-tr-header {
        padding: 0 4px 10px !important;
    }
    .ept-tr-title {
        font-size: 1.15rem !important;
    }
}

/* Desktop: flight toggle acts as plain header */
@media (min-width: 769px) {
    .ept-flight-toggle {
        background: none;
        border: none;
        padding: 0;
        cursor: default;
        font-size: 18px;
        font-weight: 700;
        margin: 0 0 10px 0;
        border-bottom: 2px solid var(--eps-site-blue, #3b82f6);
        padding-bottom: 5px;
        display: block;
    }
    .ept-flight-toggle .ept-flight-arrow {
        display: none;
    }
    .ept-flight-body.collapsed {
        max-height: none !important;
        overflow: visible;
    }
}