/* ==========================================
   MATCH DIRECTORY & CARDS STYLES
   ========================================== */

:root {
    --badge-height-desktop: 22px;
    --badge-height-mobile: 22px;
    --font-size-directory: 0.85rem;
    --filter-chip-height: 32px;
    --filter-chip-font: 0.8rem;
}

/* Base pill properties for directory items */
.badge-sport,
.badge-gender,
.badge-league,
.badge-team,
.badge-time,
.badge-time-pill,
.badge-live-pill,
.score-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--badge-height-desktop);
    padding: 0 6px;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1;
    box-sizing: border-box;
    white-space: nowrap;
    transition: all 0.15s ease-in-out;
}

.badge-unofficial-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--badge-height-desktop);
    padding: 0 6px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    background: var(--bg-unofficial-transparent);
    color: var(--color-live-text);
    border: 1px solid var(--border-unofficial-transparent);
}

/* School Name Alignment & Row Links */
.school-name {
    font-size: var(--font-size-directory);
    font-weight: 500;
    color: var(--text-light);
}

.school-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: inherit;
    text-decoration: none;
}

    .school-link:hover {
        text-decoration: underline;
    }

.score-link {
    color: inherit;
    text-decoration: none;
}

.row-date {
    font-size: var(--font-size-directory);
    color: var(--text-muted);
    white-space: nowrap;
}

/* Meta Badges */
.badge-sport {
    gap: 4px;
    background: var(--bg-input-focus);
    color: var(--brand-green);
    border: 1px solid transparent;
    text-transform: uppercase;
    cursor: pointer;
}

    .badge-sport.active-badge {
        border-color: var(--brand-green);
    }

.badge-gender {
    text-transform: uppercase;
    border: 1px solid transparent;
    cursor: pointer;
}

    .badge-gender.boys {
        background: var(--bg-gender-boys);
        color: var(--color-text-boys);
    }

    .badge-gender.men {
        background: var(--bg-gender-men);
        color: var(--color-text-men);
    }

    .badge-gender.girls {
        background: var(--bg-gender-girls);
        color: var(--color-text-girls);
    }

    .badge-gender.ladies {
        background: var(--bg-gender-ladies);
        color: var(--color-text-ladies);
    }

.badge-team {
    gap: 4px;
    background: var(--bg-team-transparent);
    color: var(--color-text-team);
    border: 1px solid transparent;
    text-transform: uppercase;
    cursor: pointer;
}

    .badge-team.active-badge {
        border-color: var(--border-team-transparent);
    }

.badge-league {
    background: var(--bg-league-transparent);
    color: var(--color-text-league);
    text-transform: uppercase;
    text-decoration: none;
}

.active-badge {
    outline: 2px solid var(--brand-gold, #f59e0b);
    outline-offset: 1px;
    font-weight: 700;
}

/* Sticky Filter Bar */
.sticky-filter-bar {
    position: sticky;
    top: 0;
    z-index: 90;
    background: var(--bg-main, #121212);
    padding: 8px;
    border-bottom: 1px solid var(--border-input);
}

    .sticky-filter-bar .targetschool-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 12px;
    }

    .sticky-filter-bar .badge-sport,
    .sticky-filter-bar .badge-gender,
    .sticky-filter-bar .badge-team {
        height: var(--filter-chip-height);
        padding: 0 12px;
        font-size: var(--filter-chip-font);
        font-weight: 700;
        border-radius: 6px;
        border-width: 2px;
    }

/* Score & Status Badges */
.score-badge {
    background: var(--bg-glass, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--border-bg-glass, rgba(255, 255, 255, 0.12));
    color: var(--text-bright, #ffffff);
    min-width: 76px;
    font-weight: 700;
}

.badge-time,
.badge-time-pill {
    background: var(--bg-glass, rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--brand-gold);
    min-width: 48px;
    font-weight: 700;
}

.badge-live-pill {
    background: var(--bg-unofficial-transparent);
    color: var(--color-live-text);
    border: 1px solid var(--border-unofficial-transparent);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    gap: 4px;
}

    .badge-live-pill::before {
        content: '';
        display: inline-block;
        width: 6px;
        height: 6px;
        background-color: var(--color-live-text);
        border-radius: 50%;
        animation: live-pulse 1.5s infinite;
    }

.badge-unofficial {
    font-size: 0.7em;
    font-weight: 600;
    text-transform: uppercase;
    opacity: 0.85;
    margin-left: 2px;
}

@keyframes live-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(0.85);
    }
}

/* Score Typography */
.score-num {
    display: inline-flex;
    align-items: center;
    font-size: var(--font-size-directory);
}

    .score-num.win {
        color: var(--color-success-text) !important;
    }

    .score-num.loss {
        color: var(--color-loss-text) !important;
    }

    .score-num.draw {
        color: var(--text-muted) !important;
    }

    .score-num.live {
        color: var(--color-live-text) !important;
    }

.score-dash {
    color: var(--text-muted);
    margin: 0 3px;
    opacity: 0.7;
}

.penalty-bracket-text {
    font-size: 1rem;
    font-weight: 800;
    opacity: 0.8;
    margin-left: 2px;
}

/* Alphabet Navigation Bar */
.alphabet-nav-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 16px;
    padding: 8px;
    background-color: var(--bg-glass);
    border: 1px solid var(--border-bg-green);
    border-radius: 4px;
    justify-content: center;
    align-items: center;
}

.alphabet-link {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--brand-gold, #f5b041);
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease-in-out;
}

    .alphabet-link:hover:not(.disabled) {
        background-color: var(--brand-gold, #f5b041);
        color: var(--brand-green, #047857);
    }

    .alphabet-link.disabled {
        color: var(--text-muted, rgba(255, 255, 255, 0.2));
        cursor: default;
    }

.alphabet-group-header {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--brand-gold, #f5b041);
    padding: 6px 0 2px 0;
    margin-top: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

[id^="section-"] {
    scroll-margin-top: 8px;
}

/* Directory Rows & Scrollbars */
.match-directory-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    max-height: 70vh;
    overflow-y: auto;
    padding-right: 4px;
    position: relative;
    scroll-behavior: smooth;
}

    .match-directory-list::-webkit-scrollbar {
        width: 6px;
    }

    .match-directory-list::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.02);
        border-radius: 4px;
    }

    .match-directory-list::-webkit-scrollbar-thumb {
        background: var(--brand-gold);
        border-radius: 4px;
    }

        .match-directory-list::-webkit-scrollbar-thumb:hover {
            background: var(--brand-green);
        }

.directory-match-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    background-color: var(--bg-glass, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--border-bg-glass, rgba(255, 255, 255, 0.1));
    border-radius: 4px;
    text-decoration: none !important;
    color: var(--text-bright, #ffffff);
    min-height: 32px;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.school-item-layout {
    display: grid;
    grid-template-columns: 24px 2fr 1fr 1fr 1fr;
    align-items: center;
    gap: 16px;
    width: 100%;
}

    .school-item-layout .school-name {
        max-width: 100%;
        margin: 0;
        font-size: var(--font-size-directory, 0.85rem);
        font-weight: 600;
        color: inherit;
    }

.school-geo-item {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 400;
}

.row-meta-group {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 150px;
    flex-shrink: 0;
}

.row-matchup-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-grow: 1;
    padding: 0 12px;
    min-width: 0;
}

.vs-divider {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
}

.row-score-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 110px;
    flex-shrink: 0;
}

/* Match Cards Grid Layout */
.rs-match-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    gap: 12px;
    margin-top: 4px;
    margin-bottom: 12px;
    max-height: 70vh;
    overflow-y: auto;
    padding-right: 4px;
    scroll-behavior: smooth;
}

    .rs-match-cards-grid::-webkit-scrollbar {
        width: 6px;
    }

    .rs-match-cards-grid::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.02);
        border-radius: 4px;
    }

    .rs-match-cards-grid::-webkit-scrollbar-thumb {
        background: var(--brand-gold);
        border-radius: 4px;
    }

        .rs-match-cards-grid::-webkit-scrollbar-thumb:hover {
            background: var(--brand-green);
        }

.rs-match-card {
    background: var(--bg-input);
    border: 1px solid var(--border-matrix-row, rgba(255, 255, 255, 0.05));
    border-radius: 8px;
    padding: 12px;
}

.match-date-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2.5px;
    margin-bottom: 2.5px;
}

.rs-date-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-bright, #ffffff);
    padding: 3px 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.rs-card-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.row-meta-group-vertical {
    display: flex;
    flex-direction: column !important;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    min-width: 90px;
    flex-shrink: 0;
}

    .row-meta-group-vertical > div,
    .row-meta-group-vertical .match-badges-container {
        display: flex;
        flex-direction: column !important;
        gap: 6px;
    }

.rs-match-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-grow: 1;
    min-width: 0;
}

.rs-team-side {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rs-team-link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-bright, #ffffff);
    text-decoration: none !important;
    font-weight: 700;
    font-size: 0.85rem;
    flex: 1 1 auto;
    min-width: 0;
}

.rs-team-title {
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
}

.rs-team-score {
    font-size: 1rem;
    font-weight: 800;
    background: rgba(0, 0, 0, 0.25);
    padding: 2px 8px;
    border-radius: 4px;
    flex-shrink: 0;
}

    /* Card Outcome Color States */
    .rs-team-score.cell-win,
    .rs-team-score.win,
    .rs-team-score.win .penalty-bracket-text {
        color: var(--color-success-text, #22c55e) !important;
    }

    .rs-team-score.cell-loss,
    .rs-team-score.loss,
    .rs-team-score.loss .penalty-bracket-text {
        color: var(--color-loss-text, #ef4444) !important;
    }

    .rs-team-score.draw,
    .rs-team-score.draw .penalty-bracket-text {
        color: var(--text-muted, #94a3b8) !important;
    }

.rs-vs-pill {
    text-align: center;
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--text-muted);
    margin: 2px 0;
}

/* Hover States */
.directory-match-row:hover,
.rs-team-link:hover {
    background-color: var(--brand-gold, #f5b041) !important;
    border-color: var(--brand-gold, #f5b041) !important;
    color: var(--brand-green, #047857) !important;
}

    .directory-match-row:hover .school-name,
    .directory-match-row:hover .school-geo-item,
    .rs-team-link:hover .rs-team-title {
        color: var(--brand-green, #047857) !important;
        text-decoration: none !important;
    }

/* Mobile Responsive Adaptations */
@media (max-width: 768px) {
    .directory-match-row {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 8px 10px;
    }

    .row-meta-group {
        width: 100%;
        min-width: 0;
    }

    .row-matchup-group {
        width: 100%;
        padding: 4px 0;
        justify-content: space-between;
    }

        .row-matchup-group .school-name {
            font-size: 0.8rem;
            font-weight: 600;
            flex: 1 1 0;
            min-width: 0;
        }

    .row-score-group {
        width: 100%;
        min-width: 0;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding-top: 6px;
        margin-top: 2px;
    }

        .row-score-group .score-badge,
        .row-score-group .badge-time,
        .row-score-group .badge-live-pill {
            grid-column: 2;
            height: var(--badge-height-mobile);
            font-size: 0.75rem;
        }

        .row-score-group .row-date {
            grid-column: 3;
            justify-self: end;
            font-size: 0.7rem;
        }
}

@media (max-width: 400px) {
    .rs-match-cards-grid {
        grid-template-columns: 1fr;
    }
}