.hide_races {
    display: none;
}

#main .sml,
#main .med,
#main .lrg {
    display: none;
}

@media (min-width: 400px) {
    #main .sml {
        display: inline-block;
    }
}

@media (min-width: 800px) {

    #main .sml,
    #main .med {
        display: flex;
    }

    #main table tr.med {
        display: table-row;
    }

    #main table td.med,
    #main table th.med {
        display: table-cell;
    }

}

@media (min-width: 1200px) {

    #main .sml,
    #main .med,
    #main .lrg {
        display: flex;
    }

    #main table tr.lrg {
        display: table-row;
    }

    #main table td.lrg,
    #main table th.lrg {
        display: table-cell;
    }
}

#main .stats_table .stats_tr .stats_hist_th_mobile {
    display: none;
}

@media all and (max-width: 800px) {

    #main .stats_table .stats_tr .stats_hist_th_mobile {
        display: table-cell;
    }
}

@media all and (max-width: 1020px) {

    #rr .stats_panel {
        width: 170px;
    }

    #rr .stats_panel .stats_hist_th {
        width: 87px;
    }
}

/* R4: full mobile cards path deferred  -  hide triggers until end-to-end wiring is done */
#main .fa.show_races,
#main .title_block .mobile_cards {
    display: none;
}

/* Hide on non mobile view */
#main #race_mobile,
#main #close_research_settings,
#main .tabs_block_left_races_bg,
#main .tabs_block_left_research_bg,
#main .fa.show_races,
/* toggles off on non mobile view */
#main .tabs_block_left_races.full_off,
#main .tabs_block_left_research.full_off {
    display: none;
}

@media all and (max-width: 800px) {

    .history_frm {
        flex-direction: column;
        align-items: end;
        margin: 0 3px 2px 2px;
    }

    #main .history_period_container .history_period_container_child_plot {
        display: none
    }


    /* set mobile_cards on #app to activate mobile view */
    #app.mobile_cards #race_mobile,
    #app.mobile_cards #race_mobile.mobile-runner-card-layout {
        display: flex;
        width: 100%;
    }

    #app.mobile_cards .race_table_container {
        display: none;
    }

    #main .cards_btns {
        width: calc(100% - 4px);
        justify-content: space-around;
    }

    /* Make cards button bigger */
    #main .cards_btns .fa {
        font-size: 30px;
        margin-bottom: 5px;
    }

    #main #race_day_selector_refresh {
        font-size: 26px;
        display: block;
    }

    #main #toggle_shortlist_filters,
    #main #shortlist_management_btn {
        font-size: var(--size-md);
        font-weight: 600;
        padding: 4px 8px;
        height: 28px;
        line-height: 1.2;
        flex: 1 1 auto;
        display: block;
    }

    #main #close_research_settings {
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        cursor: pointer;
        flex-shrink: 0;
    }

    .hp-research-rail-toolbar {
        display: flex;
        align-items: center;
        gap: 4px;
        width: 100%;
        margin: 0 0 4px 0;
    }

    #hp_research_rail_status_host {
        flex: 0 0 auto;
    }

    /* Makes race list bigger so easier to click */
    #main .race {
        padding: 7px 5px;
    }

    /* Show races button */
    #main .fa.show_races,
    #main .fa#show_research_settings {
        display: block;
    }

    /* Hide toggle races button as this is for non mobile view only */
    #main .fa.toggle_races,
    #main .fa.toggle_research_settings {
        display: none;
    }

    /* Left panes full screen by default on mobile */
    #main .tabs_block_left_races,
    #main .tabs_block_left_research {
        margin: 0;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto;
        min-height: 0;
        position: absolute;
        top: 4px;
        bottom: 4px;
        left: 4px;
        right: 4px;
        z-index: 1001;
        background: white;
        border-radius: 5px;
    }

    /* Background for left panes */
    #main .tabs_block_left_races_bg,
    #main .tabs_block_left_research_bg {
        display: block;
        position: absolute;
        z-index: 1001;
        top: 0px;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--gray-dark);
        border-radius: 5px;
    }

    /* Hide left panes background when mobile_off is set (means turn off mobile view) */
    #main .tabs_block_left_races_bg.mobile_off,
    #main .tabs_block_left_races.mobile_off,
    #main .tabs_block_left_research_bg.mobile_off,
    #main .tabs_block_left_research.mobile_off {
        display: none;
    }

    #main .container {
        max-width: 100%;
    }

    #main .runner_details_wrapper .sml2 {
        display: none
    }

    #main .tabs_block[tabsname='main'],
    #main #card_tabs {
        display: flex;
        width: 100%;
        margin-bottom: 2px;
        min-height: 24px;
    }

    #main .tabs_block[tabsname='main'] .tab,
    #main #card_tabs .tab {
        flex: 1 1 auto;
        margin: 0 2px;
        /* line-height: 21px; */
    }

    #main .race_details_tabs {
        flex-direction: column;
    }

    #main .race_details {
        width: 100%;
        margin-bottom: 0px;
        display: flex;
    }

    #main .race_detail {
        flex: 1;
        font-size: 12px;
        letter-spacing: -0.5px;
        margin: 0 1px;
        white-space: nowrap;
    }

    #main .mobile {
        display: flex;
        flex-wrap: nowrap;
    }

    #main #race #races_select {
        flex: 1 1 auto;
        width: 160px;
    }

    #main #race_day_picker {
        font-size: 18px;
        width: calc(100% - 40px);
        margin: 3px 4px 6px 3px;
    }

    /* Portfolio */
    #betting_charts {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        max-height: none;
        gap: 8px;
        flex-shrink: 0;
    }

    .betting_chart_container {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        gap: 4px;
    }

    .betting_chart {
        width: 100%;
        height: 125px;
        max-height: 110px;
        min-height: 100px;
    }

    .betting_settings {
        width: 100%;
        min-width: 0;
        height: auto;
        padding: 4px 6px;
        background: #fafafa;
        border-radius: 4px;
    }

    .betting_chart_range {
        display: flex;
        gap: 6px;
        margin-bottom: 4px;
    }

    .betting_settings_content {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px 12px;
        align-items: center;
        justify-content: space-between;
    }

    .betting_settings_row {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: var(--size-sm);
    }

    .betting_systems_lg {
        display: none !important;
    }

    .betting_systems_metrics_combined .betting_systems_lg {
        display: none !important;
    }

    /* Chart is hidden on mobile, so let the container shrink to the summary table
       instead of reserving the full chart height (which left a large empty gap). */
    #main .history_period_container {
        flex-direction: column;
        height: auto;
        flex: 0 0 auto;
    }

    #main .history_period_container .history_period_container_child_table {
        height: auto;
        max-height: 220px;
        width: 100%;
    }

    /* Bets tab header: Live & Sim mode layout */
    .bets_mode_row {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        width: 100%;
        padding: 4px 2px;
        margin: 0;
    }

    /* Real-mode (non-sim) filter form */
    #main #history_period_frm {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 2px;
        margin: 2px 0 4px 0;
    }

    #main #history_period_frm select {
        width: 100%;
        min-width: 0;
        height: 28px;
        margin: 0;
    }

    #main #history_period_frm .history_period_today_control {
        margin: 0;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex: 1;
    }

    #main #history_period_frm #history_period_date_range {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        flex: 1 1 auto;
        min-width: 0;
    }

    #main #history_period_frm #history_period_date_range input[type="date"] {
        flex: 1 1 auto;
        min-width: 0;
        height: 28px;
    }

    #main #history_period_frm .history_period_actions {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin-left: auto;
    }

    #main #history_period_frm .history_period_refresh,
    #main #history_period_frm .history_action_icon {
        font-size: 18px;
        padding: 3px;
        cursor: pointer;
    }

    /* Simulation Mode form */
    #main #bets_sim_frm {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        /* gap: 6px; */
        margin: 2px 0 4px 0;
        padding: 3px;
    }

    #main #bets_sim_frm>div {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    #main #bets_sim_frm select {
        width: 100%;
        min-width: 0;
        height: 28px;
    }

    #main #bets_sim_frm input[type="date"] {
        flex: 1 1 auto;
        min-width: 0;
        height: 28px;
    }

    #main #bets_sim_frm .bets_sim_refresh {
        font-size: 18px;
        padding: 3px 6px;
        cursor: pointer;
    }

    #stats_msg {
        width: 50px;
    }

    #main .stats_table {
        border-collapse: collapse;
    }

}

@media screen and (max-height: 500px) {

    .betting_chart {
        height: 140px;
    }

    #main .history_period_container {
        height: 115px;
    }

    #main .history_period_container .history_period_container_child_table {
        height: 100%;
        width: 200px;
    }

    #main #rr_top {
        height: 115px;
    }

    #rr .stats_panel {
        overflow: auto;
    }
}