/* ==========================================================================
   Theme-E Subordinate Data / Invitees Overview
   Matches Photo 2 (theme-a.anotechsolutions.shop/promotion/subordinate-data)
   ========================================================================== */

body.theme-e-subordinate-active {
    background: #000c24 !important;
}

body.theme-e-subordinate-active .page-wrapper,
body.theme-e-subordinate-active #app {
    background: #000c24 !important;
}

/* Header bar */
body.theme-e-subordinate-active .page-wrapper > header,
body.theme-e-subordinate-active header.hearder_bottom_border {
    background: #00153a !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: none !important;
}

body.theme-e-subordinate-active .page-wrapper > header .route-name,
body.theme-e-subordinate-active .page-wrapper > header .noTitle,
body.theme-e-subordinate-active .page-wrapper > header .head-title {
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 600 !important;
}

/* Page shell — flex order matches Photo 2: search → filters → summary → tabs → list */
.earn-invitees-overview-page {
    display: flex !important;
    flex-direction: column !important;
    background: #000c24 !important;
    min-height: calc(100vh - 52px) !important;
    padding: 12px 14px 40px 14px !important;
    box-sizing: border-box !important;
}

.earn-invitees-overview-page > .ar-input.search {
    order: 1 !important;
}

.earn-invitees-overview-page > .l1 {
    order: 2 !important;
}

.earn-invitees-overview-page > .summary {
    order: 3 !important;
}

.earn-invitees-overview-page > .publicNav {
    order: 4 !important;
}

.earn-invitees-overview-page > .sort-bar {
    order: 5 !important;
}

.earn-invitees-overview-page > .container,
.earn-invitees-overview-page > .no-data {
    order: 6 !important;
}

.earn-invitees-overview-page > *:not(.ar-input):not(.l1):not(.summary):not(.publicNav):not(.sort-bar):not(.container):not(.no-data) {
    order: 7 !important;
}

/* ---- Search: dark field + blue square button on right (Photo 2) ---- */
.earn-invitees-overview-page .ar-input.search,
.earn-invitees-overview-page .ar-input.search[data-v-439f397e] {
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    gap: 0 !important;
    height: 44px !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    padding: 0 0 0 14px !important;
    border-radius: 8px !important;
    border: none !important;
    background: #0a1f4d !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.earn-invitees-overview-page .ar-input.search .input-field,
.earn-invitees-overview-page .ar-input.search .input-field[data-v-439f397e] {
    color: #ffffff !important;
    font-size: 14px !important;
    padding: 0 10px 0 0 !important;
}

.earn-invitees-overview-page .ar-input.search .input-field::placeholder,
.earn-invitees-overview-page .ar-input.search .input-field[data-v-439f397e]::placeholder {
    color: #6b7f9e !important;
}

.earn-invitees-overview-page .ar-input.search .icon,
.earn-invitees-overview-page .ar-input.search .svg-icon,
.earn-invitees-overview-page .ar-input.search [class*="icon"] {
    flex-shrink: 0 !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #1a6dff !important;
    border-radius: 0 8px 8px 0 !important;
    cursor: pointer !important;
}

.earn-invitees-overview-page .ar-input.search .icon svg,
.earn-invitees-overview-page .ar-input.search .svg-icon svg,
.earn-invitees-overview-page .ar-input.search img.icon {
    width: 20px !important;
    height: 20px !important;
    filter: brightness(0) invert(1) !important;
}

/* ---- Filters: All Levels | Date (Photo 2 order via row-reverse) ---- */
.earn-invitees-overview-page .l1 {
    display: flex !important;
    flex-direction: row-reverse !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
}

.earn-invitees-overview-page .l1 > div {
    flex: 1 !important;
    height: 40px !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #0a1f4d !important;
    border: none !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
}

.earn-invitees-overview-page .l1 .icon_Down_nor,
.earn-invitees-overview-page .l1 .svg-icon {
    width: 16px !important;
    height: 16px !important;
    opacity: 0.7 !important;
}

/* Calendar trigger inside .l1 — Photo 2 uses date text + chevron */
.earn-invitees-overview-page .l1 .selector_calender,
.earn-invitees-overview-page .selector_calender {
    width: 100% !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    color: #ffffff !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

.earn-invitees-overview-page .selector_calender .icon,
.earn-invitees-overview-page .selector_calender [name="icon_date"],
.earn-invitees-overview-page .selector_calender .icon_date {
    width: 14px !important;
    height: 14px !important;
    opacity: 0.65 !important;
}

/* ---- Summary stats card (Photo 2) ---- */
.earn-invitees-overview-page .summary,
.earn-invitees-overview-page .summary.box_shadow_1 {
    margin-top: 0 !important;
    margin-bottom: 4px !important;
    padding: 18px 8px !important;
    border-radius: 10px !important;
    background: #0d2a6e !important;
    box-shadow: none !important;
    gap: 16px !important;
    border: none !important;
}

.earn-invitees-overview-page .summary .row {
    gap: 8px !important;
}

.earn-invitees-overview-page .summary .row .cell {
    max-width: none !important;
    gap: 4px !important;
}

.earn-invitees-overview-page .summary .row .cell .num {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

.earn-invitees-overview-page .summary .row .cell .label {
    color: #a8b8d4 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
}

.earn-invitees-overview-page .summary .row .vline {
    background: rgba(255, 255, 255, 0.12) !important;
    height: 36px !important;
}

/* Keep accent colors subtle like Anotech when values exist */
.earn-invitees-overview-page .summary .row.green .cell .num {
    color: #ffffff !important;
}

.earn-invitees-overview-page .summary .row.hint .cell .num {
    color: #ffffff !important;
}

/* ---- Tabs: underline style below summary (Photo 2) ---- */
.earn-invitees-overview-page .publicNav {
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 0 !important;
    margin: 8px 0 4px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.earn-invitees-overview-page .publicNav .item,
.earn-invitees-overview-page .publicNav .item.btn_main_style,
.earn-invitees-overview-page .publicNav .item.btn_Secondary_style,
.earn-invitees-overview-page .publicNav .item.active {
    flex: 1 !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #8ea1c1 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-shadow: none !important;
    position: relative !important;
}

.earn-invitees-overview-page .publicNav .item.active,
.earn-invitees-overview-page .publicNav .item.btn_main_style.active,
.earn-invitees-overview-page .publicNav .item.active.btn_main_style {
    color: #ffffff !important;
    font-weight: 600 !important;
    background: transparent !important;
}

.earn-invitees-overview-page .publicNav .item.active::after {
    content: "" !important;
    position: absolute !important;
    left: 18% !important;
    right: 18% !important;
    bottom: 0 !important;
    height: 2.5px !important;
    background: #3b82f6 !important;
    border-radius: 2px !important;
}

/* Hide Deposit / Bet / Commission sort bar — Photo 2 uses detail tabs instead */
.earn-invitees-overview-page .sort-bar {
    display: none !important;
}

/* Invitees-tab internal Deposit/Bet/Commission sort nav — not in Photo 2 */
.earn-invitees-overview-page .publicNav[data-v-68c5f704] {
    display: none !important;
}

/* ---- List cards ---- */
.earn-invitees-overview-page .container {
    margin-top: 8px !important;
    gap: 0 !important;
    padding-bottom: 24px !important;
}

.earn-invitees-overview-page .container > div {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 14px 2px !important;
    gap: 10px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

.earn-invitees-overview-page .container > div .head {
    color: #ffffff !important;
    font-size: 14px !important;
}

.earn-invitees-overview-page .container > div .line {
    display: none !important;
}

.earn-invitees-overview-page .container > div .body {
    font-size: 13.5px !important;
    gap: 8px !important;
}

.earn-invitees-overview-page .container > div .body > div {
    color: #8ea1c1 !important;
}

.earn-invitees-overview-page .container > div .body > div .amount {
    color: #ffffff !important;
}

.earn-invitees-overview-page .container > div .body > div .amount.bet-amount {
    color: #f5a623 !important;
}

.earn-invitees-overview-page .container > div .body > div .time {
    color: #6b7f9e !important;
}

/* Empty state */
.earn-invitees-overview-page .no-data {
    margin-top: 48px !important;
}

.earn-invitees-overview-page .no-data .data-text {
    color: #8ea1c1 !important;
    font-size: 14px !important;
    margin-top: 8px !important;
}

/* Pagination */
.earn-invitees-overview-page .pagination,
.earn-invitees-overview-page [class*="Pagination"] {
    color: #8ea1c1 !important;
}