/* ===================== VARIABLES ===================== */
:root {
    --bg: #f5f5f5;
    --tab-bg: rgba(244, 244, 245, 1);
    --white: #ffffff;
    --text: #29313a;
    --border: rgba(244, 244, 245, 1);
    --tab-active: rgba(217, 0, 29, 1);
    --tab-active-border: rgba(217, 0, 29, 1);
    --row-hover: #fafafa;
    --bullet-blue: #3b6bb5;
    --form-g: rgba(210, 255, 189, 1);
    --form-b: rgba(254, 249, 153, 1);
    --form-m: rgba(255, 196, 196, 1);
    --form-text: #fff;
}

.border-1 {
    border: 1px solid var(--border);
}

.fixture {
    color: var(--text);
    font-weight: 400;
}

/* ===================== BREADCRUMB ===================== */
.breadcrumb {
    margin: 0 0 15px;
}

    .breadcrumb a:first-child {
        color: #263d71;
    }

    .breadcrumb i {
        margin: 0 10px;
        color: #002045;
        font-size: 14px;
    }

    .breadcrumb a, .breadcrumb span {
        font-size: 12px;
        color: #7381a5;
        margin-bottom: 5px;
    }

    .breadcrumb i {
        margin: 0 5px;
    }

@media (min-width: 768px) {
    .breadcrumb a, .breadcrumb span {
        font-size: 14px;
    }
}
/* ===================== TABS ===================== */
.fixture__tab-content-item {
    display: none;
}

    .fixture__tab-content-item.active {
        display: block;
    }

.fixture__tabs {
    display: flex;
    border-bottom: 2px solid var(--border);
    overflow-x: scroll;
    background-color: var(--tab-bg);
    margin-bottom: 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

    .fixture__tabs::-webkit-scrollbar {
        display: none;
    }

.fixture__tabs-btn {
    flex-shrink: 0;
    padding: 11px 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    border-bottom: 1px solid transparent;
    white-space: nowrap;
    user-select: none;
    color: var(--text);
}

    .fixture__tabs-btn.active {
        color: var(--tab-active);
        border-bottom-color: var(--tab-active-border);
    }

    .fixture__tabs-btn:hover:not(.active) {
        color: var(--text);
    }

/* ===================== TITLE ===================== */
.fixture__title {
    font-weight: 700;
    line-height: 100%;
    text-transform: uppercase;
    font-size: 14px;
    padding-bottom: 20px;
}

/* ===================== STANDINGS TABLE ===================== */
.fixture__table {
    width: 100%;
    table-layout: auto;
    font-size: 12px;
    display: block;
    overflow: auto;
}

/* HEADER */
.fixture__table__head {
    border: 1px solid var(--border);
}

.fixture__table__header {
    padding: 0 6px;
    font-size: 12px;
    font-weight: 700;
}

/* Shared cell/header */
.fixture__table__cell,
.fixture__table__header {
    height: 40px;
    vertical-align: middle;
    white-space: nowrap;
}

/* Vertical dividers — default tabs (form/bullet/team) */
.cell-team, .col-team, .cell-form {
    border-right: 1px solid var(--border);
}

.cell-form, .col-form, .cell-bullet, .col-bullet {
    border-left: 1px solid var(--border);
}

.col-num, .cell-num {
    text-align: center;
    min-width: 24px;
}

/* Column sizes */
.col-team {
    padding-left: 8px;
    min-width: 130px;
}

.col-form {
    min-width: 130px;
    text-align: center;
}

.col-bullet {
    width: 10px;
}

.col-pos {
    width: 32px;
}

.col-logo {
    width: 32px;
}

.col-num {
    width: 36px;
}

.cell-team {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 130px;
}

/* ROWS */
.fixture__table__row {
    border-bottom: 1px solid var(--border);
}

.fixture__table tbody tr:hover {
    background: var(--row-hover);
}

/* CELLS */
.fixture__table__cell {
    color: var(--text);
    font-weight: 400;
}

.cell-bullet {
    width: 10px;
    padding: 0 6px 0 9px;
}

.cell-pos {
    text-align: center;
}

.cell-logo {
    padding: 4px 14px 4px 4px;
}

.cell-form {
    text-align: right;
    padding-right: 10px;
    padding-left: 10px;
    min-width: 135px;
}

/* Elements */
.fixture__table__bullet {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bullet-blue);
}

.fixture__table__team-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    vertical-align: middle;
}

.fixture__table__form-list {
    display: inline-flex;
    gap: 3px;
    align-items: center;
    justify-content: flex-end;
    font-weight: 700;
}

.fixture__table__form-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--form-text);
    letter-spacing: 0;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
}

/* Form states */
.form-win {
    background: var(--form-g);
    color: rgba(61, 174, 9, 1);
}

.form-draw {
    background: var(--form-b);
    color: rgba(169, 161, 21, 1);
}

.form-loss {
    background: var(--form-m);
    color: rgba(241, 29, 29, 1);
}


/* ===================== POPOVER ===================== */
.fixture__form-popover {
    position: fixed;
    z-index: 9999;
    background: #fff;
    min-width: 250px;
    max-width: 380px;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, .3);
    font-size: 14px;
    color: #374151;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

    .fixture__form-popover.is-visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

.fixture__form-popover__header {
    background: #2d3436;
    color: #fff;
    padding: 8px 12px;
    text-align: left;
}

/* Body — takım satırları */
.fixture__form-popover__body {
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fixture__form-popover__team-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fixture__form-popover__team-logo {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
}

.fixture__form-popover__team-name {
    flex: 1;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fixture__form-popover__team-score {
    font-weight: 700;
    color: #111827;
    min-width: 16px;
    text-align: right;
}

/* Maç Detayı butonu */
.fixture__form-popover__detail-btn {
    display: block;
    text-align: center;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
    border-top: 1px solid #f3f4f6;
    text-decoration: none;
}

    .fixture__form-popover__detail-btn:hover {
        color: #111827;
        background: #f9fafb;
    }


/* ===================== NOTES ===================== */
.fixture__notes {
    padding: 12px 16px;
    font-size: 12px;
    line-height: 1.9;
}

    .fixture__notes ul {
        padding-left: 20px;
    }

    .fixture__notes li {
        list-style-type: disc;
    }

.fixture__notes-playoff {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 6px;
}

.fixture__notes-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bullet-blue);
    flex-shrink: 0;
}

.fixture__table__group-head {
    border: none;
}

.fixture__table__group-label {
    font-weight: 400;
    text-transform: uppercase;
    text-align: center;
}

.fixture__table__row--group, .fixture__table__row--group th {
    border: none !important;
}

.col-num--group-start,
.cell-num--group-start {
    border-left: 1px solid var(--border);
}

.fixture__table--expanded .cell-team,
.fixture__table--expanded .col-team {
    border-right: none;
}

.fixture__table--expanded .cell-team {
    width: 130px;
}

.fixture__table--expanded tbody td:last-child,
.fixture__table--expanded .border-1 th:last-child {
    border-right: 1px solid var(--border);
    padding-right: 12px;
}

.fixture__table--expanded .col-num {
    width: 28px;
    min-width: 20px;
}

.fixture__table--expanded .col-team {
    min-width: 100px;
}

.fixture__table--expanded .cell-num {
    min-width: 20px;
    padding: 0 2px;
}

.fixture__table--expanded .col-bullet {
    width: 8px;
}

.fixture__table--expanded .cell-bullet {
    width: 8px;
    padding: 0 4px 0 6px;
}

.fixture__table--expanded .col-logo {
    width: 28px;
}

.fixture__table--expanded .cell-logo {
    padding: 4px 8px 4px 4px;
}

.fixture__table--expanded .col-pos {
    width: 28px;
}


/* ===================== RESPONSIVE ===================== */

@media (min-width: 768px) {
    .fixture__table {
        display: table;
    }

    .fixture__title {
        font-size: 16px;
    }
}