/**
 * Path: nplsportspro/assets/css/templates/tournament/tabs/bracket.css
 * Handles frontend rendering of the visual single-elimination knockout tournament bracket.
 * Contains responsive bracket connection lines, clear card widths, and compact metadata.
 * Fixed: Wins the CSS specificity battle to force vertical bracket tree lines to render.
 */

.nplsp-f-bracket-wrapper {
    width: 100% !important;
    margin: 20px 0 !important;
}

.nplsp-bracket-scroller {
    overflow-x: auto !important;
    width: 100% !important;
    padding-bottom: 15px !important;
}

.nplsp-bracket-flex {
    display: flex !important;
    gap: 30px !important; /* Constant visual column gap on desktop */
    align-items: stretch !important;
    min-width: max-content !important;
    padding: 10px !important;
}

/* Individual Knockout Round Column */
.nplsp-fe-round {
    width: 240px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
}

.nplsp-fe-round-title {
    background: #0b1530 !important;
    color: #ffffff !important;
    padding: 10px 15px !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    border-radius: 4px !important;
    margin-bottom: 20px !important;
    text-align: center !important;
}

.nplsp-fe-round-matches-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 25px !important; /* Constant vertical gap */
    flex-grow: 1 !important;
    justify-content: space-around !important; /* Spreads matches symmetrically */
}

/* Redirect link overlay formatting */
.nplsp-fe-tie-link-wrapper {
    text-decoration: none !important;
    display: block !important;
    transition: transform 0.15s ease !important;
}

.nplsp-fe-tie-link-wrapper:hover {
    transform: translateY(-2px) !important;
}

/* Knockout Match Node Card - Set to visible so bracket lines are not clipped */
.nplsp-fe-tie {
    background: #ffffff !important;
    border: 1px solid #ccd0d4 !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important;
    overflow: visible !important; /* Fixed: Allows lines to render outside borders */
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    position: relative !important;
    z-index: 2 !important;
    box-sizing: border-box !important;
}

.nplsp-fe-tie.is-single-leg {
    height: 120px !important;
}

.nplsp-fe-tie.has-two-legs {
    height: 210px !important;
}

/* Rounded border adjustments to prevent background color bleed on corners */
.nplsp-fe-match-card.leg-1-card {
    border-top-left-radius: 5px !important;
    border-top-right-radius: 5px !important;
}

.nplsp-fe-node-meta {
    border-bottom-left-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
}

.nplsp-fe-match-card {
    padding: 10px 12px 6px 12px !important;
    box-sizing: border-box !important;
}

.nplsp-fe-match-card.leg-1-card {
    border-bottom: 1px dashed #ccd0d4 !important;
}

.nplsp-fe-tie.is-single-leg .nplsp-fe-match-card.leg-1-card {
    border-bottom: none !important;
}

.nplsp-fe-match-card.leg-2-card {
    background: #f8fafc !important;
}

.nplsp-card-header {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 9px !important;
    color: #646970 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    margin-bottom: 4px !important;
}

.nplsp-team-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 4px !important;
}

.nplsp-team-row:last-child {
    margin-bottom: 0 !important;
}

.nplsp-team-info {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.t-logo {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain !important;
    border-radius: 50% !important;
}

.t-name {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #2c3338 !important;
}

.nplsp-score {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #1d2327 !important;
}

/* Styled Penalty Shootout Badge (ESPN Style) */
.nplsp-fe-pen-badge {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #b45309 !important; /* Golden amber shootout accent */
}

.nplsp-f-bracket-aggregate-bar {
    background: #f1f5f9 !important;
    text-align: center !important;
    padding: 4px !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    border-top: 1px solid #ccd0d4 !important;
    color: #2c3338 !important;
}

/* Symmetrical Metadata container embedded safely inside the bottom of the card */
.nplsp-fe-node-meta {
    padding: 6px 12px !important;
    border-top: 1px dashed #cbd5e1 !important;
    font-size: 8px !important;
    color: #64748b !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    background: #f8fafc !important;
}

.nplsp-fe-node-meta .meta-date,
.nplsp-fe-node-meta .meta-stadium {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.nplsp-fe-node-meta .dashicons {
    font-size: 11px !important;
    width: 11px !important;
    height: 11px !important;
}

/* ==========================================
   VISUAL PROGRESSION & TIEBREAKER LINES (Decoupled math aligned for 120px height)
   ========================================== */

/* Base horizontal inflow stub for all nodes except first round */
.nplsp-bracket-flex > .nplsp-fe-round:not(:first-child) .nplsp-fe-tie::before {
    content: "" !important;
    position: absolute !important;
    left: -15px !important; /* Centered in the 30px gap */
    width: 15px !important;
    height: 2px !important;
    background: #cbd5e1 !important;
    z-index: 1 !important;
}

/* Right-side horizontal outflow line for all round columns except the final */
.nplsp-bracket-flex > .nplsp-fe-round:not(:last-child) .nplsp-fe-tie::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    right: -15px !important; /* Extends halfway across the 30px gap */
    width: 15px !important;
    height: 2px !important;
    background: #cbd5e1 !important;
    z-index: 0 !important;
}

/* Round of 16 (round_2) Symmetrical Vertical Connectors - Specificity Boosted */
.nplsp-f-bracket-wrapper .nplsp-bracket-flex > .nplsp-fe-round.round-col-round_2 .nplsp-fe-tie::before {
    height: 145px !important;
    top: calc(50% - 72.5px) !important;
    border-right: 2px solid #cbd5e1 !important;
    border-top: 2px solid #cbd5e1 !important;
    border-bottom: 2px solid #cbd5e1 !important;
    background: transparent !important; /* Clears block background to reveal lines */
}

/* Quarter Final (round_3) Symmetrical Vertical Connectors - Specificity Boosted */
.nplsp-f-bracket-wrapper .nplsp-bracket-flex > .nplsp-fe-round.round-col-round_3 .nplsp-fe-tie::before {
    height: 290px !important;
    top: calc(50% - 145px) !important;
    border-right: 2px solid #cbd5e1 !important;
    border-top: 2px solid #cbd5e1 !important;
    border-bottom: 2px solid #cbd5e1 !important;
    background: transparent !important;
}

/* Semi Final (round_4) Symmetrical Vertical Connectors - Specificity Boosted */
.nplsp-f-bracket-wrapper .nplsp-bracket-flex > .nplsp-fe-round.round-col-round_4 .nplsp-fe-tie::before {
    height: 580px !important;
    top: calc(50% - 290px) !important;
    border-right: 2px solid #cbd5e1 !important;
    border-top: 2px solid #cbd5e1 !important;
    border-bottom: 2px solid #cbd5e1 !important;
    background: transparent !important;
}

/* Final (round_5) Symmetrical Vertical Connectors - Specificity Boosted */
.nplsp-f-bracket-wrapper .nplsp-bracket-flex > .nplsp-fe-round.round-col-round_5 .nplsp-fe-tie::before {
    height: 1160px !important;
    top: calc(50% - 580px) !important;
    border-right: 2px solid #cbd5e1 !important;
    border-top: 2px solid #cbd5e1 !important;
    border-bottom: 2px solid #cbd5e1 !important;
    background: transparent !important;
}

/* Divider separating Final and Third Place Playoff cards */
.nplsp-fe-bracket-divider-3rd {
    width: 100% !important;
    height: 1px !important;
    border-top: 1px dashed rgba(255, 255, 255, 0.15) !important;
    margin: clamp(0.5rem, 1vw, 1.5rem) 0 !important;
}

/* Crest size styling for fluid responsive sizing on bracket pages */
.nplsp-fe-3rd-place-card .t-logo {
    width: clamp(20px, 3.5vw, 32px) !important;
    height: clamp(20px, 3.5vw, 32px) !important;
    object-fit: contain !important;
}

/* ==========================================
   7 DEVICES RESPONSIVE STANDARDS (MAINTAINING SYMMETRICAL TREE LINES)
   ========================================== */

/* Device 1: Mobile Small (max-width: 320px) */
@media screen and (max-width: 320px) {
    .nplsp-bracket-scroller {
        padding-bottom: 8px !important;
    }
    .nplsp-bracket-flex {
        gap: 20px !important; /* Made gap tighter for micro viewports */
        padding: 5px !important;
    }
    .nplsp-fe-round {
        width: 200px !important; /* Sleek narrower columns on small mobile screens */
    }
    /* Update horizontal inflow and outflow lines to match shrunken 20px gap */
    .nplsp-bracket-flex > .nplsp-fe-round:not(:first-child) .nplsp-fe-tie::before {
        left: -10px !important;
        width: 10px !important;
    }
    .nplsp-bracket-flex > .nplsp-fe-round:not(:last-child) .nplsp-fe-tie::after {
        right: -10px !important;
        width: 10px !important;
    }
    /* Symmetrical Vertical line math for 145px blocks with a 320px screen offset */
    .round-col-round_2 .nplsp-fe-tie::before {
        top: calc(50% - 72.5px) !important;
        height: 145px !important;
    }
    .round-col-round_3 .nplsp-fe-tie::before {
        height: 290px !important;
        top: calc(50% - 145px) !important;
    }
}

/* 2. Mobile Medium (321px - 375px) */
@media screen and (min-width: 321px) and (max-width: 375px) {
    #wpbody .nplsp-modal-window {
        margin: 5px !important;
        position: fixed !important;
        top: 5% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        width: 95% !important;
        max-width: 95% !important;
    }
    .nplsp-modal-body {
        padding: 10px !important;
    }
    .penalty-team-row {
        gap: 6px !important;
    }
    .penalty-team-label {
        width: 45px !important;
        flex: 0 0 45px !important;
    }
    .pro-meta-footer {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}

/* 3. Mobile Large (376px - 425px) */
@media screen and (min-width: 376px) and (max-width: 425px) {
    #wpbody .nplsp-modal-window {
        margin: 5px !important;
        position: fixed !important;
        top: 5% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        width: 95% !important;
        max-width: 95% !important;
    }
    .nplsp-modal-body {
        padding: 10px !important;
    }
    .pro-meta-footer {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}

/* 4. Tablet Portrait (426px - 768px) */
@media screen and (min-width: 426px) and (max-width: 768px) {
    #wpbody .nplsp-modal-window {
        width: 90% !important;
        max-width: 90% !important;
        position: fixed !important;
        top: 5% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }
    .pro-meta-footer {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}

/* 5. Tablet Landscape (769px - 1024px) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    #wpbody .nplsp-modal-window {
        width: 480px !important;
        max-width: 480px !important;
    }
}

/* 6. Laptop (1025px - 1440px) */
@media screen model and (min-width: 1025px) and (max-width: 1440px) {
    #wpbody .nplsp-modal-window {
        width: 480px !important;
        max-width: 480px !important;
    }
}

/* 7. Desktop & 4K Monitor (1441px and above) */
@media screen and (min-width: 1441px) {
    #wpbody .nplsp-modal-window {
        width: 480px !important;
        max-width: 480px !important;
    }
}