/* Result Main Section CSS moved to common.css */

/*---------- Timeline Section ----------*/

.match_timeline_section {
    max-width: 1040px;
    width: 100%;
    margin: 0 auto 90px auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    .timeline_header {
        width: 100%;
        height: 63px;
        background: rgba(0, 27, 91, 1);
        color: #FFFFFF;
        font-family: "Noto Sans JP", sans-serif;
        font-size: 17px;
        font-weight: 700;
        line-height: 1.12;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .timeline_rows_list {
        display: flex;
        flex-direction: column;
        width: 100%;

        .timeline_row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 65px minmax(0, 1fr);
            align-items: center;
            width: 100%;
            height: 52px;
            border-bottom: 1px solid #D9D9D9;
            box-sizing: border-box;

            .timeline_col {
                display: flex;
                align-items: center;

                &.left_col {
                    justify-content: flex-end;
                    gap: 12px;
                }

                &.mid_col {
                    justify-content: center;
                }

                &.right_col {
                    justify-content: flex-start;
                    gap: 12px;
                }
            }

            .timeline_text {
                width: 180px;
                font-family: "Noto Sans JP", sans-serif;
                font-size: 17px;
                font-weight: 400;
                line-height: 1.4;
                color: #000000;
            }

            .left_col .timeline_text {
                text-align: right;
            }

            .right_col .timeline_text {
                text-align: left;
            }

            .timeline_icon {
                width: 18px;
                height: 18px;
                object-fit: contain;
                flex-shrink: 0;

                &.yellow_card {
                    width: 18px;
                    height: 18px;
                    background-color: #F6DA00;
                    border-radius: 2px;
                    display: inline-block;
                }
            }

            .timeline_time_val {
                font-family: 'din-condensed-bold', 'DIN Condensed', sans-serif;
                font-size: 42px;
                font-weight: 700;
                color: #000000;
                text-align: center;
                line-height: 1;
            }
        }
    }
}

/*---------- Starting Member Section ----------*/

.starting_member_section {
    max-width: 1040px;
    width: 100%;
    margin: 0 auto 90px auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    &.substitution_section {
        margin-bottom: 70px;
    }

    .starting_member_title {
        font-family: "Noto Sans JP", sans-serif;
        font-size: 20px;
        font-weight: 700;
        color: #000000;
        margin-bottom: 48px;
        position: relative;
        padding-left: 36px;
        line-height: 28px;

        &::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 8px;
            height: 28px;
            background: #001B5B;
        }
    }

    .starting_member_table {
        width: 100%;
        display: flex;
        flex-direction: column;

        .table_header_row {
            display: flex;
            width: 100%;
            gap: 1px;

            .header_team {
                width: 520px;
                height: 72px;
                background: rgba(0, 27, 91, 1);
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                color: #FFFFFF;
                font-family: "Noto Sans JP", sans-serif;
                font-weight: 700;
                font-size: 17px;
                line-height: 1.12;

                .header_logo {
                    width: 22px;
                    height: 28px;
                    object-fit: contain;
                }
            }
        }

        .table_rows_container {
            display: flex;
            flex-direction: column;
            width: 100%;

            .member_row {
                display: grid;
                grid-template-columns: minmax(0, 1fr) 50px 40px 40px 50px minmax(0, 1fr);
                align-items: center;
                width: 100%;
                height: 43px;
                border-bottom: 1px solid #D9D9D9;
                box-sizing: border-box;
                gap: 1px;

                &:nth-child(even) {
                    background: rgba(247, 247, 247, 1);
                }

                &:nth-child(odd) {
                    background: #FFFFFF;
                }

                .player_name {
                    font-family: "Noto Sans JP", sans-serif;
                    font-weight: 400;
                    font-style: normal;
                    font-size: 17px;
                    line-height: 1.4;
                    color: #000000;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: 15px;
                }

                .player_num {
                    font-family: 'din-condensed-bold', 'DIN Condensed', sans-serif;
                    font-weight: 700;
                    font-size: 17px;
                    color: #000000;
                    line-height: 1.6;

                    &.home_num {
                        text-align: right;
                        padding-right: 8px;
                    }

                    &.away_num {
                        text-align: left;
                        padding-left: 8px;
                    }
                }

                .position_badge {
                    width: 40px;
                    height: 43px;
                    background: #009EB4;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #FFFFFF;
                    font-family: 'din-condensed-bold', 'DIN Condensed', sans-serif;
                    font-weight: 700;
                    font-size: 17px;
                    line-height: 1.6;
                }
            }

            .coach_row {
                display: grid;
                grid-template-columns: 1fr 1fr;
                align-items: center;
                width: 100%;
                height: 43px;
                border-bottom: 1px solid #D9D9D9;
                box-sizing: border-box;
                background: #FFFFFF;

                .coach_name {
                    font-family: "Noto Sans JP", sans-serif;
                    font-weight: 400;
                    font-style: normal;
                    font-size: 17px;
                    line-height: 1.4;
                    color: #000000;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: 20px;
                }
            }

            .sub_row {
                display: grid;
                grid-template-columns: minmax(0, 1fr) 60px 60px minmax(0, 1fr);
                align-items: center;
                width: 100%;
                height: 64px;
                border-bottom: 1px solid #D9D9D9;
                box-sizing: border-box;
                background: #FFFFFF;
                gap: 1px;

                .player_name {
                    font-family: "Noto Sans JP", sans-serif;
                    font-weight: 400;
                    font-style: normal;
                    font-size: 17px;
                    line-height: 1.4;
                    color: #000000;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    text-align: center;
                    height: 100%;
                }

                .position_badge {
                    width: 60px;
                    height: 64px;
                    background: #009EB4;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #FFFFFF;
                    font-family: "Noto Sans JP", sans-serif;
                    font-weight: 700;
                    font-size: 17px;
                    line-height: 1.6;
                }
            }
        }
    }
}

/*---------- Detailed Stats Section ----------*/

.detailed_stats_section {
    max-width: 1040px;
    width: 100%;
    margin: 0 auto 70px auto;
    box-sizing: border-box;

    .stats_table_header {
        display: grid;
        grid-template-columns: 60px 60px 60px 674px 60px 60px 60px;
        height: 64px;
        gap: 1px;
        background-color: transparent;

        .header_cell {
            background: rgba(0, 27, 91, 1);
            color: #FFFFFF;
            font-family: 'Noto Sans JP', sans-serif;
            font-weight: 700;
            font-size: 17px;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1.4;
        }
    }

    .stats_table_rows {
        display: flex;
        flex-direction: column;
        width: 100%;

        .stats_table_row {
            display: grid;
            grid-template-columns: 60px 60px 60px 674px 60px 60px 60px;
            height: 32px;
            align-items: center;
            box-sizing: border-box;
            gap: 1px;

            &:last-child {
                border-bottom: 1px solid #D9D9D9;
            }

            .cell_val {
                font-family: 'din-condensed-bold', 'DIN Condensed', sans-serif;
                font-weight: 700;
                font-size: 17px;
                line-height: 1.4;
                color: #000000;
                text-align: center;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .cell_label {
                font-family: 'Noto Sans JP', sans-serif;
                font-weight: 700;
                font-size: 17px;
                line-height: 1.4;
                color: #000000;
                text-align: center;
            }
        }
    }
}

/*---------- Match Info Tables ----------*/

.match_info_tables_container {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    box-sizing: border-box;

    .info_table_block {
        display: flex;
        flex-direction: column;
        width: 100%;

        .info_table_header {
            display: flex;
            gap: 1px;
            width: 100%;

            .info_header_cell {
                width: 346px;
                height: 68px;
                background: rgba(0, 27, 91, 1);
                color: #FFFFFF;
                font-family: 'Noto Sans JP', sans-serif;
                font-weight: 700;
                font-size: 17px;
                display: flex;
                align-items: center;
                justify-content: center;
                line-height: 1.4;

                &.empty_header {
                    background: rgba(0, 27, 91, 1);
                }
            }
        }

        .info_table_row {
            display: flex;
            gap: 1px;
            width: 100%;
            border-bottom: 1px solid #D9D9D9;
            box-sizing: border-box;

            &.referee_row {
                .info_cell_val {
                    height: 64px;
                }
            }

            &.var_row {
                .info_cell_val {
                    height: 40px;
                }
            }

            .info_cell_val {
                width: 346px;
                height: 28px;
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                font-family: 'Noto Sans JP', sans-serif;
                font-weight: 400;
                font-size: 17px;
                line-height: 1.4;
                color: #000000;

                &.multiline_cell {
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    height: auto;
                    min-height: 32px;
                    padding: 2px 0;
                }

                &.empty_val {
                    background: transparent;
                }
            }
        }
    }
}

/*---------- Warnings Section ----------*/

.warnings_section {
    max-width: 1040px;
    width: 100%;
    margin: 90px auto 0 auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    .warnings_table {
        width: 100%;
        display: flex;
        flex-direction: column;

        .warning_row {
            display: flex;
            align-items: center;
            width: 100%;
            height: 43px;
            border-bottom: 1px solid #D9D9D9;
            box-sizing: border-box;

            .minute_badge {
                width: 160px;
                height: 43px;
                background: #009EB4;
                color: #FFFFFF;
                font-family: 'Noto Sans JP', sans-serif;
                font-weight: 700;
                font-size: 17px;
                line-height: 1.6;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
                border-bottom: 1px solid rgba(255, 255, 255, 0.4);
            }

            .warning_info {
                display: flex;
                align-items: center;
                flex: 1;
                height: 43px;

                .card_container {
                    width: 36px;
                    height: 40px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-shrink: 0;

                    .yellow_card_badge {
                        width: 18px;
                        height: 18px;
                        background-color: #F6DA00;
                        border-radius: 2px;
                        display: inline-block;
                    }
                }

                .player_name {
                    display: flex;
                    align-items: center;
                    gap: 20px;
                    font-family: 'Noto Sans JP', sans-serif;
                    font-weight: 400;
                    font-size: 17px;
                    line-height: 1.4;
                    color: #000000;
                }
            }
        }
    }
}

@media (max-width: 768px) {
    .match_timeline_section {
        max-width: 353px !important;
        margin-bottom: 40px !important;

        .timeline_header {
            height: 25px !important;
            font-size: 14px !important;
            line-height: 1 !important;
        }

        .timeline_rows_list {
            .timeline_row {
                grid-template-columns: minmax(0, 1fr) 45px minmax(0, 1fr) !important;
                height: 40px !important;

                &.sub_row_47 {
                    height: 47px !important;
                }

                .timeline_col {
                    &.left_col,
                    &.right_col {
                        gap: 10px !important;
                    }
                }

                .timeline_text {
                    font-size: 14px !important;
                    width: 130px !important;
                }

                .timeline_time_val {
                    font-size: 24px !important;
                }

                .timeline_icon {
                    width: 18px !important;
                    height: 18px !important;

                    &.yellow_card {
                        width: 18px !important;
                        height: 18px !important;
                    }
                }
            }
        }
    }

    .starting_member_section {
        max-width: 353px !important;
        margin: 0 auto 40px auto !important;

        &.starting_member_main {
            margin: 0 auto 48px auto !important;
        }

        .starting_member_title {
            margin-bottom: 32px !important;
            height: 32px;
            font-size: 18px;
            line-height: 1.77;
            padding-left: 23px;

            &::before {
                width: 3px !important;
                height: 32px !important;
            }
        }

        .starting_member_table {
            .table_header_row {
                gap: 1px !important;

                .header_team {
                    width: calc(50% - 0.5px) !important;
                    height: 40px !important;
                    font-size: 12px !important;
                    gap: 8px !important;

                    .header_logo {
                        width: 18px !important;
                        height: 23px !important;
                    }
                }
            }

            .table_rows_container {
                .member_row {
                    grid-template-columns: minmax(0, 1fr) 35px 27px 27px 35px minmax(0, 1fr) !important;
                    height: 38px !important;

                    &:nth-last-child(1),
                    &:nth-last-child(2) {
                        height: 56px !important;

                        .position_badge {
                            height: 56px !important;
                        }
                    }

                    .player_name {
                        font-size: 14px !important;
                        line-height: 1.4 !important;
                        gap: 12px !important;
                        text-align: center !important;
                    }

                    .player_num {
                        font-size: 14px !important;

                        &.home_num {
                            padding-right: 6px !important;
                        }

                        &.away_num {
                            padding-left: 6px !important;
                        }
                    }

                    .position_badge {
                        width: 27px !important;
                        height: 38px !important;
                        font-family: "Noto Sans JP", sans-serif !important;
                        font-weight: 400 !important;
                        font-size: 14px !important;
                        line-height: 1.6 !important;
                    }
                }

                .coach_row {
                    height: 36px !important;

                    .coach_name {
                        font-size: 14px !important;
                        line-height: 1.4 !important;
                        gap: 12px !important;
                    }
                }

                .sub_row {
                    grid-template-columns: minmax(0, 1fr) 39px 39px minmax(0, 1fr) !important;
                    height: 68px !important;

                    .player_name {
                        font-size: 14px !important;
                        line-height: 1.4 !important;

                        .name_multiline {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: center;
                            gap: 2px;

                            span {
                                display: block;
                                line-height: 1.2;
                            }

                            br {
                                display: none;
                            }
                        }
                    }

                    .position_badge {
                        width: 39px !important;
                        height: 68px !important;
                        font-size: 14px !important;
                    }
                }
            }
        }
    }

    .detailed_stats_section {
        max-width: 353px !important;
        margin: 0 auto 40px auto !important;

        .stats_table_header {
            grid-template-columns: 27px 27px 27px 1fr 27px 27px 27px !important;
            height: 25px !important;

            .header_cell {
                font-size: 14px !important;
            }
        }

        .stats_table_rows {
            .stats_table_row {
                grid-template-columns: 25px 25px 25px 1fr 25px 25px 25px !important;
                height: 28px !important;

                .cell_val {
                    font-size: 14px !important;
                }

                .cell_label {
                    font-size: 14px !important;
                }
            }
        }
    }

    .match_info_tables_container {
        gap: 20px !important;
        max-width: 353px !important;

        .info_table_block {
            .info_table_header {
                .info_header_cell {
                    width: calc(33.33% - 0.67px) !important;
                    height: 28px !important;
                    font-size: 14px !important;
                }
            }

            .info_table_row {
                &.referee_row {
                    .info_cell_val {
                        height: 48px !important;
                    }
                }

                &.var_row {
                    .info_cell_val {
                        height: 28px !important;
                    }
                }

                .info_cell_val {
                    width: calc(33.33% - 0.67px) !important;
                    height: 28px !important;
                    font-size: 14px !important;

                    &.multiline_cell {
                        height: auto !important;
                        min-height: 28px !important;
                    }
                }
            }
        }
    }

    .warnings_section {
        max-width: 353px !important;
        margin: 40px auto 0 auto !important;

        .warnings_table {
            .warning_row {
                height: 40px !important;

                .minute_badge {
                    width: 80px !important;
                    height: 40px !important;
                    font-size: 14px !important;
                }

                .warning_info {
                    height: 40px !important;

                    .player_name {
                        font-size: 14px !important;
                        gap: 12px !important;
                        margin-left: 20px;
                    }
                }
            }
        }
    }

    .match_timeline_section {
        max-width: 353px !important;
        padding: 0 20px !important;
        margin-bottom: 40px !important;
    }

    .starting_member_section {
        max-width: 353px !important;
        padding: 0 20px !important;
        margin-bottom: 40px !important;
    }

    .detailed_stats_section {
        max-width: 353px !important;
        padding: 0 20px !important;
        margin-bottom: 40px !important;
    }

    .match_info_tables_container {
        max-width: 353px !important;
        padding: 0 20px !important;
        margin-bottom: 40px !important;
    }
}