/* ------------------------ split layout (2 tables) ------------------------ */
tbody tr:hover,
tbody tr.active-row {
    background-color: var(--hover-background-color);
    color: var(--hover-text-color);
}
tbody tr:hover td,
tbody tr.active-row td,
#main-table-2 tbody tr:hover td,
#main-table-2 tbody tr.active-row td {
    background-color: var(--hover-background-color);
    color: var(--hover-text-color);
}
/* ------------------------ page height chain (no magic numbers) ------------------------ */
html, body {
    height: 100%;
}
.page-wrapper {
    height: 100vh;
    overflow: hidden; /* page itself doesn't scroll; only the table-scroll-wrapper panes do */
    display: flex;
    flex-direction: column;
}
.page-wrapper .container {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
#main-content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.split-container {
    display: flex;
    flex-direction: column;
    gap: 0; /* divider element provides spacing */
    flex: 1 1 auto;
    min-height: 0;
}
.split-pane {
    flex: 1 1 50%; /* JS overrides flex-basis on drag */
    min-height: 120px; /* minimum so header+pagination never disappear */
    display: flex;
    flex-direction: column;
    position: relative;
    isolation: isolate;
}
/* ------------------------ drag divider ------------------------ */
.split-divider {
    flex: 0 0 20px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: row-resize;
    z-index: 10;
    user-select: none;
}
.split-divider-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(172, 149, 171, 0.35);
    border-radius: 2px;
    transition: background 0.15s;
}
.split-divider:hover .split-divider-line,
.split-divider.dragging .split-divider-line {
    background: rgba(172, 149, 171, 0.7);
}
.split-divider-pill {
    position: relative;
    background: #2A1E2A;
    border: 1px solid rgba(172, 149, 171, 0.6);
    border-radius: 10px;
    padding: 2px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    transition: border-color 0.15s, background 0.15s;
}
.split-divider:hover .split-divider-pill,
.split-divider.dragging .split-divider-pill {
    background: #3a2a3a;
    border-color: rgba(172, 149, 171, 1);
}
.split-pane > div[id^="table-container-"] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
/* table-scroll-wrapper clips border-radius so table itself can have overflow:visible for sticky headers */
.table-scroll-wrapper {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: auto;
    min-height: 0;
    position: relative;
    border-radius: 15px;
}
.table-scroll-wrapper table {
    margin-bottom: 0;
    overflow: visible; /* override style.css main table{overflow:hidden} which kills sticky in Chrome */
}
.split-pane > footer.pagination-controls {
    flex: 0 0 auto;
}
/* Chrome/Edge: position:sticky on th breaks if any ancestor has overflow:hidden.
   style.css sets `main table { overflow: hidden }` for border-radius clipping —
   move clipping to the scroll wrapper instead so sticky works cross-browser */
main table {
    overflow: visible;
}
.table-scroll-wrapper {
    border-radius: 15px;
    overflow-y: auto;
    overflow-x: auto;
}
main table thead th {
    position: sticky;
    top: 0px; /* table 1: single row, always 0 */
    z-index: 1;
    background-color: rgba(70, 49, 70, 1);
}
/* table 2: 3 stacked rows - top offsets set by stickyHeaders.js at runtime via el.style.top
   CSS fallback values here in case JS hasn't run yet */
#main-table-2 thead tr:nth-child(1) th {
    top: 0px;
    background-color: #2A2436;
}
#main-table-2 thead tr:nth-child(2) th {
    top: 44px; /* fallback - JS overrides with measured value */
    background-color: #2A2436;
}
#main-table-2 thead tr:nth-child(3) th {
    top: 74px; /* fallback - JS overrides with measured value */
    background-color: #2A2436;
}
/* Column widths */
#main-table-2 {
    min-width: 600px;
    border-color: rgba(255, 255, 255, 0.4);
}
#main-table-2 .col-symbol {
    min-width: 80px;
    background-color: #302C3E;
    text-align: center;
    vertical-align: middle;
}
#main-table-2 .col-buy {
    min-width: 130px;
    background-color: #6C2E74;
    text-align: center;
}
#main-table-2 .col-sell {
    min-width: 130px;
    background-color: #302C3E;
    text-align: center;
}
#main-table-2 thead .col-buy,
#main-table-2 thead .col-sell {
    text-align: center;
}
/* ------------------------ table 2 banner ------------------------ */
.table2-banner {
    padding: 6px 4px;
}
.pager-summary-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}
.banner-text {
    font-weight: 700;
}
.banner-subtext {
    font-size: 12px;
    opacity: 0.8;
}
@media (max-width: 991.98px) {
    .banner-subtext {
        display: none;
    }
}
.banner-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #AC95AB;
    display: inline-block;
}
.banner-label {
    font-weight: 500;
}
.banner-value {
    font-weight: 700;
}