/* Unified account interface: Inter for data, Space Grotesk for headings. */
:root {
    --ui-bg: #080e1c;
    --ui-surface: #111b2e;
    --ui-raised: #18243a;
    --ui-border: #2a3b57;
    --ui-text: #e7edf8;
    --ui-muted: #a7b5cc;
    --ui-accent: #67dced;
    --ui-violet: #a8a0ff;
    --ui-field: #0c1628;
    --ui-shadow: 0 12px 32px rgb(0 0 0 / 18%);
}
html[data-theme="light"] {
    --ui-bg: #edf2f9;
    --ui-surface: #ffffff;
    --ui-raised: #f5f8fd;
    --ui-border: #ced9e8;
    --ui-text: #172840;
    --ui-muted: #506581;
    --ui-accent: #006d82;
    --ui-violet: #6250c8;
    --ui-field: #ffffff;
    --ui-shadow: 0 10px 28px rgb(36 60 100 / 8%);
}
html[data-theme] body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ui-text) !important;
    background: var(--ui-bg) !important;
}
html[data-theme] :is(input, select, textarea, button, .btn, .nav-link, .table, .dropdown-item) {
    font-family: 'Inter', system-ui, sans-serif !important;
}
html[data-theme] :is(h1, h2, h3, h4, h5, h6, .card-header > strong, .brand-text) {
    font-family: 'Space Grotesk', 'Inter', sans-serif !important;
    letter-spacing: -.025em;
}
html[data-theme] :is(.wallet-balance, .info-box-number, .bets, .winnings, .table td) {
    font-variant-numeric: tabular-nums;
}
html[data-theme] body .content-wrapper {
    color: var(--ui-text) !important;
    background: radial-gradient(ellipse at 15% 0, rgb(63 143 196 / 10%), transparent 48%),
        radial-gradient(ellipse at 95% 5%, rgb(130 96 220 / 8%), transparent 42%), var(--ui-bg) !important;
}
html[data-theme] body .content-wrapper > .content { padding: 1.25rem 1rem 2rem; }
html[data-theme] body .content-wrapper > .content > .container-fluid { max-width: 1600px; }
html[data-theme] body .main-header {
    min-height: 58px;
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    border-bottom: 1px solid var(--ui-border);
    box-shadow: 0 3px 16px rgb(0 0 0 / 5%);
}
html[data-theme] body .main-sidebar {
    background: var(--ui-surface) !important;
    border-right: 1px solid var(--ui-border);
    box-shadow: none !important;
}
html[data-theme] body .brand-link {
    min-height: 58px;
    border-bottom: 1px solid var(--ui-border) !important;
    color: var(--ui-text) !important;
    background: linear-gradient(110deg, rgb(103 220 237 / 8%), rgb(168 160 255 / 8%));
}
html[data-theme] body .main-sidebar .nav-header,
html[data-theme] body .main-sidebar .nav-header b {
    color: var(--ui-muted) !important;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    padding-top: 1.2rem;
}
html[data-theme] body .main-sidebar .nav-link {
    border-radius: 8px;
    min-height: 42px;
    margin-bottom: 5px;
    color: var(--ui-muted) !important;
    transition: background-color .15s, color .15s;
}
html[data-theme] body .main-sidebar .nav-link:hover,
html[data-theme] body .main-sidebar .nav-link.active {
    color: var(--ui-accent) !important;
    background: rgb(58 172 198 / 12%) !important;
    box-shadow: inset 3px 0 var(--ui-accent);
}
html[data-theme] body .main-sidebar .nav-icon { font-size: 15px; }
html[data-theme] body .main-header :is(.nav-link, .topbar-links) { color: var(--ui-text) !important; }
html[data-theme] body :is(.card, .info-box, .modal-content, .dropdown-menu) {
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    border: 1px solid var(--ui-border);
    border-radius: 14px;
    box-shadow: var(--ui-shadow);
}
html[data-theme] body .card { margin-bottom: 1.25rem; }
html[data-theme] body .card-header {
    background: linear-gradient(110deg, rgb(103 220 237 / 5%), rgb(168 160 255 / 5%)), var(--ui-raised) !important;
    border-bottom: 1px solid var(--ui-border);
    border-radius: 13px 13px 0 0;
    padding: 1rem 1.15rem;
    color: var(--ui-text);
}
html[data-theme] body .card-header > strong { font-size: 13px; font-weight: 600; letter-spacing: .055em; }
html[data-theme] body .card-footer {
    background: var(--ui-raised) !important;
    border-top: 1px solid var(--ui-border);
    border-radius: 0 0 13px 13px;
    padding: 1rem 1.15rem;
}
html[data-theme] body .card-body { padding: 1.15rem; }
html[data-theme] body .card-body:is(.bg-dark, .bg-black),
html[data-theme] body .content-wrapper .bg-black { background: var(--ui-surface) !important; color: var(--ui-text) !important; }
html[data-theme] body .info-box { min-height: 100px; padding: 16px; align-items: center; }
html[data-theme] body .info-box-icon {
    border-radius: 12px;
    width: 58px;
    height: 58px;
    font-size: 23px;
    box-shadow: none !important;
}
html[data-theme] body .info-box-content { min-width: 0; padding-left: 16px; }
html[data-theme] body .info-box-text { color: var(--ui-muted); font-size: 11px; letter-spacing: .045em; white-space: normal; }
html[data-theme] body .info-box-number { font-size: clamp(18px, 1.65vw, 26px); line-height: 1.3; overflow-wrap: anywhere; }
html[data-theme] body .small-box {
    background: linear-gradient(120deg, rgb(35 123 151 / 14%), rgb(103 82 179 / 10%)), var(--ui-surface) !important;
    color: var(--ui-text) !important;
    border: 1px solid var(--ui-border);
    border-radius: 14px;
    box-shadow: var(--ui-shadow);
}
html[data-theme] body .small-box > .inner { padding: 22px; }
html[data-theme] body .small-box .icon { color: var(--ui-accent); opacity: .22; }
html[data-theme] body .small-box-footer { background: rgb(96 150 200 / 10%); color: var(--ui-accent) !important; border-radius: 0 0 13px 13px; padding: 10px; }
html[data-theme] body .form-group label { font-size: 12px; font-weight: 600; color: var(--ui-muted); }
html[data-theme] body :is(.form-control, .custom-select, .input-group-text) {
    background: var(--ui-field) !important;
    color: var(--ui-text) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 8px;
    min-height: 40px;
}
html[data-theme] body .form-control:focus {
    border-color: var(--ui-accent) !important;
    box-shadow: 0 0 0 3px rgb(47 177 206 / 16%);
}
html[data-theme] body .form-control::placeholder { color: var(--ui-muted); opacity: .85; }
html[data-theme] body .form-control:disabled,
html[data-theme] body .form-control[readonly] { background: var(--ui-raised) !important; }
html[data-theme] body .wallet-balance { color: var(--ui-accent) !important; }
html[data-theme] body .btn { border-radius: 8px; font-weight: 600; letter-spacing: .015em; min-height: 34px; }
html[data-theme] body .btn-primary {
    background: linear-gradient(120deg, #087c9e, #5553bf) !important;
    border-color: #087c9e !important;
    color: #fff !important;
}
html[data-theme] body .btn-primary:hover { filter: brightness(1.12); }
html[data-theme] body .theme-toggle { background: var(--ui-raised); color: var(--ui-accent); border-color: var(--ui-border); }
html[data-theme] body .table { color: var(--ui-text); margin-bottom: 0; }
html[data-theme] body .table thead th {
    background: var(--ui-raised);
    color: var(--ui-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .065em;
    text-transform: uppercase;
    vertical-align: middle;
    padding: 12px;
    white-space: nowrap;
}
html[data-theme] body .table :is(td, th) { border-color: var(--ui-border) !important; }
html[data-theme] body .table td { padding: 11px 12px; vertical-align: middle; }
html[data-theme] body .table tbody tr:hover { background-color: rgb(93 152 211 / 6%); }
html[data-theme] body .table-responsive { border-radius: 8px; }
html[data-theme] body .nav-tabs { border-color: var(--ui-border); gap: 4px; }
html[data-theme] body .nav-tabs .nav-link { color: var(--ui-muted); border-radius: 8px 8px 0 0; }
html[data-theme] body .nav-tabs .nav-link.active { background: var(--ui-raised); border-color: var(--ui-border); color: var(--ui-accent); }
html[data-theme] body .dropdown-item { color: var(--ui-text); }
html[data-theme] body .dropdown-item:hover { background: var(--ui-raised); color: var(--ui-accent); }
html[data-theme] body .main-footer { background: var(--ui-surface) !important; border-top: 1px solid var(--ui-border); color: var(--ui-muted) !important; font-size: 12px; }
html[data-theme] body .select2-container--default .select2-selection--single { background: var(--ui-field); border-color: var(--ui-border); border-radius: 8px; min-height: 40px; }
html[data-theme] body .select2-container--default .select2-selection__rendered { color: var(--ui-text); }
html[data-theme] body .select2-dropdown { background: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-border); }
html[data-theme] body .page-link { background: var(--ui-raised); color: var(--ui-accent); border-color: var(--ui-border); }
html[data-theme] body .page-item.active .page-link { background: #087c9e; color: #fff; }
/* Preserve game-side colors and compact result grids. */
html[data-theme] body .betting .bet-header.bg-primary { background: #1261bc !important; }
html[data-theme] body .betting .bet-header.bg-danger { background: #bb304a !important; }
html[data-theme] body .betting .bet-header { color: #fff !important; }
html[data-theme] body :is(.trend-table, .winnings-table, .counts-table) td { padding: .2rem; }
html[data-theme] body .betting-page .border { border-color: var(--ui-border) !important; }
html[data-theme] body :is(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
@media (max-width: 575.98px) {
    html[data-theme] body .content-wrapper > .content { padding: 1rem .25rem 1.5rem; }
    html[data-theme] body .card-header { padding: .85rem; }
    html[data-theme] body .info-box { padding: 12px; }
    html[data-theme] body .info-box-number { font-size: 20px; }
    html[data-theme] body .form-control { font-size: 16px; }
    html[data-theme] body .main-header .theme-toggle { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
    html[data-theme] body .nav-link { transition: none; }
}

/* Compact balance badge in the player topbar. */
html[data-theme] body .main-header .credits-container {
    flex: 0 1 152px;
    width: 152px;
    max-width: 152px;
    min-width: 0;
    margin-right: .5rem;
}
html[data-theme] body .main-header .credits-container .input-group-text {
    padding: .25rem .45rem;
    min-height: 34px;
}
html[data-theme] body .main-header .credits-container .wallet-balance {
    min-width: 0;
    height: 34px;
    min-height: 34px;
    font-size: 13px;
    padding-right: .35rem;
}
@media (max-width: 575.98px) {
    html[data-theme] body .main-header .credits-container {
        flex-basis: 132px;
        width: 132px;
        max-width: 132px;
        margin-right: .25rem;
    }
}

/* Equal side columns keep player points at the actual center. */
html[data-theme] body .main-header.player-topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
}
html[data-theme] body .player-topbar > .navbar-nav:first-child { justify-self: start; }
html[data-theme] body .player-topbar > .navbar-nav:last-child {
    justify-self: end;
    margin-left: 0 !important;
    min-width: 0;
}
html[data-theme] body .player-topbar .credits-container {
    justify-self: center;
    margin: 0;
}
html[data-theme] body .player-topbar .wallet-balance { text-align: center; }
@media (max-width: 575.98px) {
    html[data-theme] body .player-topbar .topbar-username { display: none; }
    html[data-theme] body .player-topbar .dropdown > .nav-link {
        width: 36px;
        padding-left: .5rem;
        padding-right: .5rem;
        text-align: center;
    }
}

/* Display points directly on the topbar instead of inside an input box. */
html[data-theme] body .main-header.player-topbar .credits-container .input-group-text,
html[data-theme] body .main-header.player-topbar .credits-container .wallet-balance {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none !important;
}
html[data-theme] body .main-header.player-topbar .credits-container .wallet-balance {
    text-align: center;
    padding-left: 0;
    padding-right: 0;
    color: var(--ui-accent) !important;
}

/* Keep the unboxed player balance beside the menu button. */
html[data-theme] body .main-header.player-topbar {
    display: flex;
}
html[data-theme] body .player-topbar > .navbar-nav:last-child {
    margin-left: auto !important;
}
html[data-theme] body .player-topbar .credits-container {
    margin-left: .25rem;
    margin-right: .5rem;
}

/* Keep the amount immediately beside its coin icon. */
html[data-theme] body .main-header.player-topbar .credits-container .input-group-text {
    padding-left: .25rem;
    padding-right: .25rem;
}
html[data-theme] body .main-header.player-topbar .credits-container .wallet-balance {
    text-align: left;
    padding-left: 0 !important;
}

/* Consistent role navigation in expanded and compact sidebars. */
html[data-theme] body .account-sidebar .brand-text { font-size: .95rem; font-weight: 700; }
html[data-theme] body .account-sidebar .nav-header {
    color: var(--ui-muted) !important;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    padding: 1.15rem 1rem .45rem;
}
html[data-theme] body .account-sidebar .nav-link {
    min-height: 42px;
    margin-bottom: .25rem;
    border-radius: 9px;
    padding-top: .65rem;
    padding-bottom: .65rem;
}
html[data-theme] body .account-sidebar .nav-link p { font-size: .84rem; }
html[data-theme] body .account-sidebar .nav-link.active {
    background: var(--ui-raised) !important;
    color: var(--ui-accent) !important;
    box-shadow: inset 3px 0 var(--ui-accent) !important;
}
html[data-theme] body .account-sidebar .nav-link:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -2px; }

/* Keep the fixed sidebar full-height and wide content inside its own column. */
html[data-theme] body.layout-fixed .main-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden;
}
html[data-theme] body.layout-fixed .main-sidebar .brand-link {
    height: 58px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
}
html[data-theme] body.layout-fixed .main-sidebar > .sidebar {
    height: calc(100vh - 58px) !important;
    height: calc(100dvh - 58px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 1.5rem;
    overscroll-behavior: contain;
}
html[data-theme] body .account-sidebar .nav-sidebar { width: 100%; }
html[data-theme] body .account-sidebar .nav-sidebar > .nav-item { width: 100%; }
html[data-theme] body .account-sidebar .nav-sidebar .nav-link { max-width: 100%; }
html[data-theme] body .content-wrapper,
html[data-theme] body .content-wrapper :is(.container-fluid, .card, .card-body, [class*="col-"], .dataTables_wrapper) { min-width: 0; }
html[data-theme] body .content-wrapper .table-responsive { max-width: 100%; overflow-x: auto; }
html[data-theme] body .content-wrapper .dataTables_wrapper { width: 100%; }
html[data-theme] body .content-wrapper .dataTables_wrapper > .row { margin-left: 0; margin-right: 0; }
html[data-theme] body .content-wrapper .table { width: 100% !important; }
html[data-theme] body .content-wrapper .table :is(td, th) { overflow-wrap: anywhere; }
/* Account identifiers and balances stay readable; actions wrap in their own column. */
html[data-theme] body .content-wrapper .account-list-table {
    min-width: 760px;
    table-layout: auto;
}
html[data-theme] body .content-wrapper .account-list-table :is(td, th) {
    min-width: 140px;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}
html[data-theme] body .content-wrapper .account-list-table td:last-child:not([colspan]) {
    min-width: 300px;
    width: 340px;
    white-space: normal;
}
html[data-theme] body .account-list-table td:last-child .btn { margin: .2rem .15rem .2rem 0; white-space: nowrap; }
/* Payment details keep readable columns inside the horizontally scrolling table. */
html[data-theme] body .content-wrapper .payment-requests-table {
    min-width: 1050px;
    table-layout: auto;
}
html[data-theme] body .content-wrapper .payment-requests-table :is(td, th) {
    min-width: 120px;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}
html[data-theme] body .content-wrapper .payment-requests-table :is(td, th):first-child { min-width: 170px; }
html[data-theme] body .content-wrapper .payment-requests-table td:nth-child(5) {
    min-width: 220px;
    white-space: normal;
    overflow-wrap: break-word;
}
html[data-theme] body .content-wrapper .payment-requests-table td:last-child:not([colspan]) {
    min-width: 150px;
    white-space: normal;
}
html[data-theme] body .content-wrapper .cashin-requests-table td:nth-child(8),
html[data-theme] body .content-wrapper .cashout-requests-table td:nth-child(9) { min-width: 280px; }
html[data-theme] body .payment-requests-table :is(.cashin-action, .cashout-action) {
    display: block !important;
    margin-bottom: .5rem;
}
html[data-theme] body .payment-requests-table .form-control-file { max-width: 100%; }
html[data-theme] body .main-footer { position: static; }
/* Keep dashboard footers anchored when navigating pages or switching wallet tabs. */
html[data-theme] body.layout-fixed .content-wrapper {
    padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
}
html[data-theme] body.layout-fixed .main-footer {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1032;
    padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 992px) {
    html[data-theme] body:not(.sidebar-collapse) .content-wrapper,
    html[data-theme] body:not(.sidebar-collapse) .main-header,
    html[data-theme] body:not(.sidebar-collapse) .main-footer { margin-left: 250px; }
    html[data-theme] body.sidebar-mini.sidebar-collapse .content-wrapper,
    html[data-theme] body.sidebar-mini.sidebar-collapse .main-header,
    html[data-theme] body.sidebar-mini.sidebar-collapse .main-footer { margin-left: 4.6rem !important; }
}
@media (max-width: 991.98px) {
    html[data-theme] body .content-wrapper,
    html[data-theme] body .main-header,
    html[data-theme] body .main-footer { margin-left: 0 !important; }
    html[data-theme] body .dataTables_filter { text-align: left; }
    html[data-theme] body .dataTables_filter input { max-width: 60%; }
    html[data-theme] body .dataTables_paginate .pagination { flex-wrap: wrap; justify-content: flex-start !important; }
}