/******************************************************************************
 * Resultater
 ******************************************************************************/

.results-page {

    max-width: 1100px;
    margin: 0 auto;

}


/******************************************************************************
 * Rundevælger
 ******************************************************************************/

.round-filter {

    display: flex;
    flex-wrap: wrap;
    gap: 10px;

}

.round-filter a {

    display: inline-block;

    padding: 8px 18px;

    background: #2f343f;

    color: #d7dbe3;

    text-decoration: none;

    border-radius: 999px;

    transition: all .2s ease;

}

.round-filter a:hover {

    background: #404654;

}

.round-filter a.active {

    background: var(--primary-color);

    color: #fff;

    font-weight: 600;

}


/******************************************************************************
 * Rundeoverskrift
 ******************************************************************************/

.round-header {

    margin: 30px 0 15px;

    padding: 10px 16px;

    border-left: 5px solid var(--primary-color);

    background: rgba(255,255,255,.03);

    border-radius: 8px;

    font-size: 20px;

    font-weight: 700;

    color: #fff;

}

.round-header i {

    margin-right: 8px;

    color: var(--primary-color);

}


/******************************************************************************
 * Resultatkort
 ******************************************************************************/

.result-card {

    margin-bottom: 20px;

}

.result-top {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-bottom: 15px;

    margin-bottom: 15px;

    border-bottom: 1px solid rgba(255,255,255,.08);

    font-size: 14px;

    color: #9ea5b3;

}


/******************************************************************************
 * Hold
 ******************************************************************************/

.teams {

    display: flex;

    flex-direction: column;

}

.team-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 14px 0;

}

.team-row:not(:last-child) {

    border-bottom: 1px solid rgba(255,255,255,.06);

}

.team-name {

    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 18px;

    font-weight: 600;

}

.team-name i {

    width: 20px;

    text-align: center;

}

.matchpoints {

    min-width: 45px;

    text-align: right;

    font-size: 34px;

    font-weight: 700;

}


/******************************************************************************
 * Statistik
 ******************************************************************************/

.result-stats {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 10px 0;

    border-top: 1px solid rgba(255,255,255,.06);

    color: #d7dbe3;

}

.result-stats:first-of-type {

    margin-top: 15px;

}

.result-stats div:first-child {

    color: #9ea5b3;

    font-size: 14px;

}

.result-stats i {

    width: 20px;

}


/******************************************************************************
 * Footer
 ******************************************************************************/

.result-footer {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 18px;

    padding-top: 18px;

    border-top: 1px solid rgba(255,255,255,.08);

}


/******************************************************************************
 * Statusfarver
 ******************************************************************************/

.winner {

    color: #4CAF50;

}

.loser {

    color: #F44336;

}

.draw {

    color: #FFC107;

}


/******************************************************************************
 * Badge
 ******************************************************************************/

.badge {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 6px 12px;

    border-radius: 999px;

    font-size: 13px;

    font-weight: 600;

}

.badge-success {

    background: rgba(76,175,80,.15);

    color: #4CAF50;

}

.badge-warning {

    background: rgba(255,193,7,.15);

    color: #FFC107;

}


/******************************************************************************
 * Ingen resultater
 ******************************************************************************/

.empty-state {

    text-align: center;

    padding: 50px 20px;

    color: #8f97a6;

}

.empty-state i {

    display: block;

    font-size: 42px;

    margin-bottom: 12px;

}


/******************************************************************************
 * Mobil
 ******************************************************************************/

@media (max-width: 768px) {

    .result-top {

        flex-direction: column;

        align-items: flex-start;

        gap: 6px;

    }

    .team-name {

        font-size: 16px;

    }

    .matchpoints {

        font-size: 28px;

        min-width: 35px;

    }

    .result-footer {

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;

    }

}