.hp-following-root,
.hp-following-tab {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#app .panel[panel="published_subscriber"],
#main .panel[panel="published_subscriber"] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#published_subscriber_panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: calc(100% - 8px);
    max-height: calc(100% - 8px);
    gap: 5px;
    padding: 8px;
    margin: 4px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 2px solid var(--blue-dark);
    border-radius: 2px;
}

#published_subscriber_panel .published_subscriber_global {
    flex-shrink: 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px;
    background: #fafafa;
}

#published_subscriber_panel .published_subscriber_global_title {
    font-weight: 600;
    margin-bottom: 8px;
}

#published_subscriber_panel .published_subscriber_global_row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px 20px;
}

#published_subscriber_panel .published_subscriber_global_active_label,
#published_subscriber_panel .published_subscriber_until_label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--size-sm);
    margin: 0;
}

#published_subscriber_panel .published_subscriber_global_active_label > span:first-child,
#published_subscriber_panel .published_subscriber_until_label > span:first-child,
#published_subscriber_panel .published_subscriber_membership_row > label > span:first-child {
    display: block;
    height: 1.25em;
    line-height: 1.25;
}

#published_subscriber_panel .published_subscriber_control {
    height: 28px;
    display: flex;
    align-items: center;
}

#published_subscriber_panel .published_subscriber_control .switch {
    margin: 0;
    flex-shrink: 0;
}

#published_subscriber_panel .published_subscriber_global_hint {
    margin: 8px 0 0;
    font-size: 12px;
    color: #555;
    line-height: 1.35;
}

#published_subscriber_panel .published_subscriber_log_section {
    flex-shrink: 0;
    margin-top: auto;
    border: 1px solid #ccc;
    border-top: 2px solid var(--blue-dark);
    border-radius: 0 0 2px 2px;
    background: #fff;
    padding: 8px 12px;
}

#published_subscriber_panel .published_subscriber_log_title {
    font-weight: 600;
    margin-bottom: 6px;
    font-size: var(--size-sm);
}

#published_subscriber_panel .published_subscriber_event_log {
    max-height: 35px;
    overflow-y: auto;
    font-size: 11px;
    font-family: Consolas, "Courier New", monospace;
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 4px;
}

#published_subscriber_panel .published_subscriber_log_entry {
    padding: 2px 0;
    border-bottom: 1px solid #eee;
}

#published_subscriber_panel .published_subscriber_log_entry:last-child {
    border-bottom: none;
}

#published_subscriber_panel .published_subscriber_log_success {
    color: #0e6d00;
}

#published_subscriber_panel .published_subscriber_log_error {
    color: #b00020;
}

#published_subscriber_panel .published_subscriber_log_info {
    color: #444;
}

#published_subscriber_panel .published_subscriber_groups {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding-right: 4px;
}

#published_subscriber_panel .published_subscriber_empty {
    color: #666;
    font-style: italic;
    padding: 8px;
}

#published_subscriber_panel .published_subscriber_group {
    flex: 0 0 auto;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    overflow: visible;
}

#published_subscriber_panel .published_subscriber_group_header {
    padding: 6px;
    background: #f0f0f0;
    border-bottom: 1px solid #ddd;
}

#published_subscriber_panel .published_subscriber_group_name {
    font-weight: 600;
    font-size: var(--size-md);
    margin-bottom: 4px;
}

#published_subscriber_panel .published_subscriber_group_publisher {
    font-size: 12px;
    color: #444;
    line-height: 1.4;
    margin-bottom: 8px;
}

#published_subscriber_panel .published_subscriber_membership_row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px 10px;
    padding: 6px;
    border-bottom: 1px solid #ddd;
}

#published_subscriber_panel .published_subscriber_membership_row > label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
}

#published_subscriber_panel .published_subscriber_membership_stake {
    width: 88px;
}

#published_subscriber_panel .published_subscriber_membership_stake,
#published_subscriber_panel .published_subscriber_membership_until,
#published_subscriber_panel #published_subscriber_active_until {
    height: 28px;
    box-sizing: border-box;
}

#published_subscriber_panel #published_subscriber_active_until {
    width: auto;
    min-width: 140px;
}

#published_subscriber_panel .published_subscriber_membership_max {
    font-weight: 600;
    line-height: 28px;
}

#published_subscriber_panel .published_subscriber_membership_switch {
    margin: 0;
}

#published_subscriber_panel .published_subscriber_projects_table {
    width: 100%;
    border-collapse: collapse;
    display: none;
}

#published_subscriber_panel .published_subscriber_projects_table thead {
    background: #454e5c;
    color: #fff;
}

#published_subscriber_panel .published_subscriber_projects_table th,
#published_subscriber_panel .published_subscriber_projects_table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    vertical-align: middle;
}

#published_subscriber_panel .published_subscriber_projects_table th.published_subscriber_stake_col,
#published_subscriber_panel .published_subscriber_projects_table td:has(.published_subscriber_project_stake) {
    width: 100px;
}

#published_subscriber_panel .published_subscriber_projects_table th.published_subscriber_active_col,
#published_subscriber_panel .published_subscriber_projects_table td:has(.published_subscriber_project_switch) {
    width: 72px;
    text-align: center;
}

#published_subscriber_panel .published_subscriber_projects_table th.published_subscriber_until_col,
#published_subscriber_panel .published_subscriber_projects_table td:has(.published_subscriber_project_until) {
    width: 130px;
}

#published_subscriber_panel .published_subscriber_project_until {
    width: 100%;
    box-sizing: border-box;
}

#published_subscriber_panel .published_subscriber_projects_table tbody tr:hover {
    background: #f9f9f9;
}

#published_subscriber_panel .published_subscriber_project_stake {
    width: 88px;
    box-sizing: border-box;
}

#published_subscriber_panel .published_subscriber_project_switch {
    margin: 0 auto;
}

#published_subscriber_panel .published_subscriber_stats_row,
#published_subscriber_bets_dialog .published_subscriber_stats_row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    margin-top: 8px;
}

#published_subscriber_bets_dialog .published_subscriber_stats_row {
    margin-top: 0;
}

#published_subscriber_panel .published_subscriber_stat,
#published_subscriber_bets_dialog .published_subscriber_stat {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: 13px;
}

#published_subscriber_panel .published_subscriber_stat_label,
#published_subscriber_bets_dialog .published_subscriber_stat_label {
    color: #555;
    font-weight: 600;
}

#published_subscriber_panel .published_subscriber_stat_value,
#published_subscriber_bets_dialog .published_subscriber_stat_value {
    font-weight: 700;
}

#published_subscriber_panel .published_subscriber_toggle_bets {
    margin-left: auto;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid #888;
    border-radius: 3px;
    background: #fff;
}

#published_subscriber_panel .published_subscriber_toggle_bets:hover {
    background: #f0f0f0;
}

#published_subscriber_bets_dialog {
    padding: 0;
}

#published_subscriber_bets_dialog .published_subscriber_bets_dialog_heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
}

#published_subscriber_bets_dialog .published_subscriber_bets_dialog_title {
    font-weight: 600;
}

#published_subscriber_bets_dialog .published_subscriber_bets_dialog_publisher {
    font-size: 12px;
    font-weight: 500;
    color: #555;
}

#published_subscriber_bets_dialog .published_subscriber_bets_dialog_stats {
    padding: 8px 12px;
    border-bottom: 1px solid #ddd;
    background: #fafafa;
}

#published_subscriber_bets_dialog .published_subscriber_bets_dialog_toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    padding: 8px 12px;
    border-bottom: 1px solid #ddd;
    background: #fff;
}

#published_subscriber_bets_dialog .published_subscriber_bets_dialog_modes {
    display: flex;
    gap: 4px;
}

#published_subscriber_bets_dialog .published_subscriber_bets_mode {
    padding: 4px 12px;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid #888;
    border-radius: 3px;
    background: #fff;
}

#published_subscriber_bets_dialog .published_subscriber_bets_mode.selected {
    color: #fff;
    background: var(--blue-mid, #4a6fa5);
    border-color: var(--blue-mid, #4a6fa5);
}

#published_subscriber_bets_dialog .published_subscriber_bets_dialog_day_controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

#published_subscriber_bets_dialog .published_subscriber_bets_day_select {
    min-width: 140px;
    height: 28px;
    box-sizing: border-box;
    font-size: 12px;
}

#published_subscriber_bets_dialog .published_subscriber_bets_day_prev,
#published_subscriber_bets_dialog .published_subscriber_bets_day_next {
    min-width: 28px;
    padding: 2px 8px;
}

#published_subscriber_bets_dialog .published_subscriber_bets_dialog_exports {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: auto;
}

#published_subscriber_bets_dialog .published_subscriber_bets_dialog_body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    min-height: 0;
    padding: 12px;
    overflow: hidden;
}

#published_subscriber_bets_dialog .published_subscriber_bets_dialog_body.published_subscriber_loading {
    opacity: 0.6;
}

#published_subscriber_bets_dialog .published_subscriber_chart_wrap {
    flex: 0 0 auto;
    height: 180px;
    min-height: 160px;
    position: relative;
}

#published_subscriber_bets_dialog .published_subscriber_bets_scroll {
    flex: 1 1 auto;
    min-height: 180px;
    max-height: 45vh;
    overflow: auto;
    border: 1px solid #ddd;
    border-radius: 3px;
    background: #fff;
}

#published_subscriber_bets_dialog .published_subscriber_bets_table,
#published_subscriber_bets_dialog .published_subscriber_days_table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

#published_subscriber_bets_dialog .published_subscriber_bets_table thead,
#published_subscriber_bets_dialog .published_subscriber_days_table thead {
    background: #454e5c;
    color: #fff;
}

#published_subscriber_bets_dialog .published_subscriber_bets_table thead th,
#published_subscriber_bets_dialog .published_subscriber_days_table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #454e5c;
}

#published_subscriber_bets_dialog .published_subscriber_bets_table th,
#published_subscriber_bets_dialog .published_subscriber_bets_table td,
#published_subscriber_bets_dialog .published_subscriber_days_table th,
#published_subscriber_bets_dialog .published_subscriber_days_table td {
    padding: 6px 8px;
    border-bottom: 1px solid #ddd;
    text-align: left;
    vertical-align: middle;
}

#published_subscriber_bets_dialog .published_subscriber_bets_table th.right,
#published_subscriber_bets_dialog .published_subscriber_bets_table td.right,
#published_subscriber_bets_dialog .published_subscriber_days_table th.right,
#published_subscriber_bets_dialog .published_subscriber_days_table td.right {
    text-align: right;
}

#published_subscriber_bets_dialog .published_subscriber_day_row {
    cursor: pointer;
}

#published_subscriber_bets_dialog .published_subscriber_day_row:hover td {
    background: #f3f7fb;
}

#published_subscriber_bets_dialog .published_subscriber_pl_pos {
    color: #0e6d00;
}

#published_subscriber_bets_dialog .published_subscriber_pl_neg {
    color: #b00020;
}

#published_subscriber_bets_dialog .published_subscriber_bets_note,
#published_subscriber_bets_dialog .published_subscriber_empty {
    font-style: italic;
    color: #666;
}

#published_subscriber_bets_dialog .published_subscriber_bets_note {
    font-size: 11px;
}

@media (min-width: 720px) {
    #published_subscriber_bets_dialog .published_subscriber_bets_dialog_body {
        flex-direction: column;
        align-items: stretch;
    }

    #published_subscriber_bets_dialog .published_subscriber_chart_wrap {
        flex: 0 0 42%;
        max-width: 100%;
        height: auto;
        align-self: stretch;
        min-height: 150px;
    }

    #published_subscriber_bets_dialog .published_subscriber_bets_scroll {
        max-height: calc(90vh - 140px);
    }
}

/* Vue Following tab: v-show tables must stay table layout */
#published_subscriber_bets_dialog .published_subscriber_bets_table[style*="display: none"],
#published_subscriber_bets_dialog .published_subscriber_days_table[style*="display: none"] {
    display: none !important;
}
#published_subscriber_bets_dialog .published_subscriber_bets_table:not([style*="display: none"]),
#published_subscriber_bets_dialog .published_subscriber_days_table:not([style*="display: none"]) {
    display: table;
    width: 100%;
}