/**
 * Standalone /cards-v layout (mirrors /cards/ standalone.css + Vue mount chain).
 */

.hp-page.hp-page--cards {
    --hp-frame-bg: hsl(217.5deg 12.9% 36.47%);
    --hp-frame-surface: transparent;
    --hp-frame-max-width: none;
    --hp-frame-border: 0 solid transparent;
    background: var(--hp-frame-bg);
    height: 100%;
    min-height: 0;
}

body.hp-cards-standalone,
body.hp-cards-standalone #page {
    position: static !important;
    width: 100%;
    min-height: 100%;
    height: 100%;
    max-height: none;
    margin: 0;
}

.hp-page.hp-page--cards #hp-cards-mount {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.hp-page.hp-page--cards #primary.content-area {
    position: static !important;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    max-height: none;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.hp-page.hp-page--cards #main.site-main {
    position: static !important;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    max-height: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: hsl(217.5deg 12.9% 36.47%);
}

.hp-page.hp-page--cards #main .container {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    background: #fff;
    border-left: 3px solid #d4d4d4;
    border-right: 3px solid #d4d4d4;
}

.hp-page.hp-page--cards #main .container > #hp-ext-header {
    flex: 0 0 auto;
}

.hp-page.hp-page--cards .hpx-sub {
    display: none !important;
}

.hp-page.hp-page--cards #main article.page {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin: 0;
}

.hp-page.hp-page--cards #main .entry-content,
.hp-page.hp-page--cards #hp-cards-app-root {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin: 0;
    border: none;
    overflow: hidden;
}

.hp-page.hp-page--cards #main #app,
.hp-page.hp-page--cards #hp-cards-app-root #app {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.hp-page.hp-page--cards .hp-tab-panels {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Vue v-html mount must stretch so legacy .panel flex children get height */
.hp-page.hp-page--cards .hp-legacy-panel > div:first-child {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

.hp-page.hp-page--cards .hp-legacy-panel .panel[panel] {
    flex: 1 1 auto;
    min-height: 0;
}

#main .panel[panel="bets"] #bets_history_view,
.hp-bets-history-view {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

#main .panel[panel="bets"] #bets_sim_view,
.hp-bets-sim-view {
    flex: 1 1 auto;
    min-height: 0;
}

#main .panel[panel="bets"] section.tbl_fixed_section.table_container {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
}


.hp-page.hp-page--cards .hp-tab-panels > hp-bets-tab {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

.hp-page.hp-page--cards .hp-bets-root,
.hp-page.hp-page--cards .hp-bets-tab {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

.hp-page.hp-page--cards .hp-bets-tab .panel[panel="bets"] {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
.hp-page.hp-page--cards .hp-following-root,
.hp-page.hp-page--cards .hp-following-tab {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.hp-page.hp-page--cards .hp-following-tab .panel[panel="published_subscriber"] {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

.hp-page.hp-page--cards #published_subscriber_panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: calc(100% - 8px) !important;
    max-height: calc(100% - 8px) !important;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Only the active tab panel participates in flex layout */
.hp-page.hp-page--cards .hp-tab-panels > hp-legacy-tab-panel:not(.hp-tab-panel-active),
.hp-page.hp-page--cards .hp-tab-panels > hp-bets-tab:not(.hp-tab-panel-active),
.hp-page.hp-page--cards .hp-tab-panels > hp-following-tab:not(.hp-tab-panel-active),
.hp-page.hp-page--cards .hp-tab-panels > hp-portfolio-tab:not(.hp-tab-panel-active) {
    display: none !important;
    flex: 0 0 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.hp-page.hp-page--cards .hp-tab-panels > hp-legacy-tab-panel.hp-tab-panel-active,
.hp-page.hp-page--cards .hp-tab-panels > hp-bets-tab.hp-tab-panel-active,
.hp-page.hp-page--cards .hp-tab-panels > hp-following-tab.hp-tab-panel-active,
.hp-page.hp-page--cards .hp-tab-panels > hp-portfolio-tab.hp-tab-panel-active,
.hp-page.hp-page--cards .hp-tab-panels > hp-portfolio-tab,
.hp-page.hp-page--cards .hp-tab-panels > hp-bets-tab,
.hp-page.hp-page--cards .hp-tab-panels > hp-following-tab {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column;
    min-height: 0;
    width: 100%;
    overflow: hidden;
}

.hp-page.hp-page--cards .hp-portfolio-root,
.hp-page.hp-page--cards .hp-portfolio-tab {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

.hp-page.hp-page--cards .hp-portfolio-tab .panel[panel="combiner"] {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    flex: 1 1 auto;
    min-height: 0;
}

.hp-page.hp-page--cards .hp-portfolio-tab #betting {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    justify-content: flex-start !important;
}

.hp-page.hp-page--cards .hp-portfolio-tab #betting_charts {
    flex: 0 0 auto;
}

.hp-page.hp-page--cards .hp-portfolio-tab .betting_chart_container {
    flex: 1 1 auto;
    min-height: 204px;
    /* max-height: 240px; */
}

.hp-page.hp-page--cards .hp-portfolio-tab .betting_chart {
    height: 100%;
    min-height: 0;
}

.hp-page.hp-page--cards .hp-portfolio-tab #betting_systems {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}