/* Golden Template — fonte única de cor.
   Tudo deriva de --primary-color e --secondary-color (definidas por tenant em index.php).
   Carregar por último, depois de header/lobby/deposit-theme.css. */
:root,
html {
    --primary-color: var(--tenant-primary, #f3ba2f);
    --secondary-color: var(--tenant-secondary, #0b0b0e);
    --primary-color-hover: color-mix(in srgb, var(--primary-color) 82%, #000);
    --primary-color-soft: color-mix(in srgb, var(--primary-color) 18%, transparent);
    --primary-color-line: color-mix(in srgb, var(--primary-color) 38%, transparent);
    --secondary-color-raised: color-mix(in srgb, var(--secondary-color) 45%, #000);
    --secondary-color-raised-2: color-mix(in srgb, var(--secondary-color) 58%, #000);
    --secondary-color-deep: color-mix(in srgb, var(--secondary-color) 30%, #000);
    --on-primary-color: #fff;
    --overlay-dark: .62;

    --bg-main: var(--secondary-color);
    --bg-header: var(--secondary-color);
    --bg-card: color-mix(in srgb, var(--secondary-color) 45%, #000);
    --bg-ticker: color-mix(in srgb, var(--secondary-color) 35%, #000);
    --text-gold: var(--primary-color);
    --text-muted: rgba(255, 255, 255, .68);
    --border-soft: var(--primary-color-line);
    --header-pill-bg: var(--secondary-color-raised);
    --header-pill-border: var(--primary-color-line);
    --header-funds-bg: var(--primary-color);
    --header-funds-text: var(--on-primary-color);

    --ep-color-btn-level-1-fill: var(--primary-color);
    --ep-color-btn-level-1-fill-hover: var(--primary-color-hover);
    --ep-color-background-fill-top-nav-primary: var(--secondary-color);
    --ep-color-text-highlight: var(--primary-color);
    --ep-color-icon-highlight: var(--primary-color);
    --ep-color-border-selected: var(--primary-color);
    --ep-color-background-fill-glow-primary-opacity-40: var(--primary-color-soft);
}

/* Texto sobre a cor primária: preto se ela for clara, branco se for escura */
@supports (color: oklch(from red l c h)) {
    :root,
    html {
        --on-primary-color: oklch(from var(--primary-color) clamp(0, (l - .62) * -1000, 1) 0 0);
    }
}

/* Variáveis do tema compilado (.amber-purple ... div#app e classe de skin no html) trocadas por primary/secondary.
   Também vale em html porque as variáveis semânticas --ep-color-* resolvem no html.
   Especificidade maior + !important para vencer qualquer variante do bundle. */
html:root,
html:root body div#app {
    --theme-color-400: var(--primary-color) !important;
    --theme-color-500: var(--primary-color) !important;
    --theme-color-700: var(--primary-color) !important;
    --theme-color-800: var(--primary-color) !important;
    --theme-color-900: var(--primary-color-hover) !important;
    --theme-color-gradient-100: linear-gradient(270deg, var(--primary-color-hover) 0%, var(--primary-color) 100%) !important;

    --gradients-purple-1: linear-gradient(180deg, var(--primary-color-hover) 0%, var(--primary-color) 100%) !important;
    --gradients-purple-2: linear-gradient(180deg, var(--primary-color-hover) 0%, var(--primary-color) 100%) !important;
    --Gradients-orange-purple: linear-gradient(317deg, var(--primary-color-hover) 0%, var(--primary-color) 100%) !important;
    --gradients-orange-purple: linear-gradient(317deg, var(--primary-color-hover) 0%, var(--primary-color) 100%) !important;
    --gradients-btn-orange-purple: linear-gradient(350deg, var(--primary-color-hover) 0%, var(--primary-color) 100%) !important;
    --gradients-selectedBorder: linear-gradient(160deg, var(--primary-color) 0%, var(--primary-color-hover) 100%) !important;
    --gradients-indicatorLine: linear-gradient(90deg, var(--primary-color) 0%, var(--primary-color-hover) 100%) !important;
    --segment-gradients-purple: linear-gradient(270deg, var(--primary-color-hover) 0%, var(--primary-color) 100%) !important;
    --gradients-disabled-btn-bg: color-mix(in srgb, var(--primary-color) 35%, var(--secondary-color)) !important;
    --color-primary-btn-disable: color-mix(in srgb, var(--primary-color) 35%, var(--secondary-color)) !important;
    --color-btn-gradient-footer: var(--segment-gradients-purple) !important;
    --color-btn-gradient-mineral: var(--segment-gradients-purple) !important;
    --color-button-bg-basic: linear-gradient(0deg, var(--primary-color-hover) 0%, var(--primary-color) 100%) !important;
    --color-button-bg-disable: color-mix(in srgb, var(--primary-color) 35%, var(--secondary-color)) !important;
    --color-bar-bg-pwa: linear-gradient(91deg, var(--primary-color-hover) 0%, var(--primary-color) 100%) !important;
    --accent-color-blue: var(--primary-color) !important;
    --color-text-href: var(--primary-color) !important;

    --color-bg-50: color-mix(in srgb, var(--secondary-color) 65%, #000) !important;
    --color-bg-100: color-mix(in srgb, var(--secondary-color) 55%, #000) !important;
    --color-bg-200: color-mix(in srgb, var(--secondary-color) 45%, #000) !important;
    --color-bg-300: color-mix(in srgb, var(--secondary-color) 38%, #000) !important;
    --color-bg-400: color-mix(in srgb, var(--secondary-color) 30%, #000) !important;
    --color-bg-500: var(--secondary-color-deep) !important;
    --line-color: var(--primary-color-line) !important;
    --color-text-gray-100: rgba(255, 255, 255, .78) !important;
    --color-text-gray-200: rgba(255, 255, 255, .5) !important;
    --text-color-light-purple-1-100: rgba(255, 255, 255, .78) !important;
    --text-color-light-purple-2-100: rgba(255, 255, 255, .5) !important;

    --ep-neutral-gray-gray-L01: color-mix(in srgb, var(--secondary-color) 18%, #000) !important;
    --ep-neutral-gray-gray-L02: color-mix(in srgb, var(--secondary-color) 24%, #000) !important;
    --ep-neutral-gray-gray-L03: color-mix(in srgb, var(--secondary-color) 32%, #000) !important;
    --ep-neutral-gray-gray-L04: color-mix(in srgb, var(--secondary-color) 42%, #000) !important;
    --ep-neutral-gray-gray-L05: color-mix(in srgb, var(--primary-color) 30%, var(--secondary-color-deep)) !important;
    --ep-neutral-gray-gray-L06: #5c5c5c !important;
    --ep-neutral-gray-gray-L07: #7b7b7b !important;
    --ep-neutral-gray-gray-L08: #9b9b9b !important;
    --ep-neutral-gray-gray-L09: #c7c7c7 !important;
    --ep-neutral-gray-gray-L10: #e5e5e5 !important;
    --ep-primary-primary-100: color-mix(in srgb, var(--primary-color) 12%, #fff) !important;
    --ep-primary-primary-200: color-mix(in srgb, var(--primary-color) 30%, #fff) !important;
    --ep-primary-primary-300: color-mix(in srgb, var(--primary-color) 50%, #fff) !important;
    --ep-primary-primary-400: color-mix(in srgb, var(--primary-color) 75%, #fff) !important;
    --ep-primary-primary-500: var(--primary-color) !important;
    --ep-primary-primary-600: color-mix(in srgb, var(--primary-color) 90%, #000) !important;
    --ep-primary-primary-700: var(--primary-color-hover) !important;
    --ep-primary-primary-800: color-mix(in srgb, var(--primary-color) 60%, #000) !important;
    --ep-primary-primary-900: color-mix(in srgb, var(--primary-color) 45%, #000) !important;
    --ep-primary-primary-Opacity: var(--primary-color-soft) !important;
    --ep-inverse-inverse-500: var(--primary-color) !important;
    --ep-inverse-inverse-Opacity: var(--primary-color-soft) !important;
    --ep-accent-blue: var(--primary-color) !important;

    --my-base-info-bg: var(--secondary-color) !important;
    --my-card-bg-gradient: var(--secondary-color-raised) !important;
    --my-color-line: var(--primary-color-line) !important;
    --bg-color-recharge-withdraw: linear-gradient(180deg, transparent 0%, var(--primary-color-soft) 140%), var(--secondary-color-raised-2) !important;
    --recharge-withdraw-icon-color: var(--primary-color) !important;
    --ion-color-primary: var(--primary-color) !important;
    --ion-color-tertiary: var(--primary-color) !important;
    --ion-background-color: var(--secondary-color) !important;
    --ion-item-background: var(--secondary-color-raised) !important;
}

/* Fundo com imagem: overlay sempre escuro (ignora a cor do overlay do tenant, que pode ser clara) */
html.has-tenant-wallpaper,
html.has-tenant-wallpaper body {
    background-image:
        linear-gradient(rgba(0, 0, 0, var(--overlay-dark)), rgba(0, 0, 0, var(--overlay-dark))),
        var(--tenant-wallpaper) !important;
    background-color: var(--secondary-color) !important;
}

/* Lobby: card de jogos */
.game-wrapper .img-box,
.game-wrapper img.img-box,
.game-wrapper .game-item,
.game-wrapper [class*="game-card"] {
    background: var(--secondary-color-raised);
    border: .0625rem solid var(--primary-color-line);
    box-shadow: 0 .2rem .6rem rgba(0, 0, 0, .35);
}

.game-head .total .number {
    background: var(--primary-color) !important;
    color: var(--on-primary-color) !important;
}

/* Menu inferior */
ion-tab-bar.tab-bar,
.tab-bar.layout1,
.tab-bar.gc-flat-tabbar,
.tab-bar .inner-wrap {
    background: var(--secondary-color) !important;
    --background: var(--secondary-color) !important;
}

ion-tab-bar.tab-bar,
.tab-bar.layout1,
.tab-bar.gc-flat-tabbar {
    border-top: .0625rem solid var(--primary-color-line) !important;
}

.tab-btn {
    color: rgba(255, 255, 255, .7) !important;
}

.tab-btn.active-tab,
.tab-btn.active-tab .tab-label,
.tab-btn.active-tab .tab-icon {
    color: var(--primary-color) !important;
}

/* Saldo: símbolo R$ e valor sempre em branco puro (header e perfil), independente do tema/tenant */
.assets-box.header-balance-pill .currency,
.assets-box.header-balance-pill .assets-box-number,
.assets-box.header-balance-pill .color-text-currency,
.assets-box.header-balance-pill .money-color,
.assets-box .color-text-currency,
.user-base-info .color-text-currency,
.user-base-info .money-color,
.user-base-info .balances .money-color,
.user-base-info .balance-info .money-color,
.user-base-info .vip-wrap .balances span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 .0625rem .1875rem rgba(0, 0, 0, .55) !important;
}

/* ID da conta e botão de copiar: contraste máximo sobre qualquer fundo */
.user-base-info .vip-wrap .info-mid,
.user-base-info .vip-wrap .user-id {
    width: fit-content;
    max-width: 100%;
    padding: .18rem .55rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, .55);
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 600;
    text-shadow: none;
}

.user-base-info .vip-wrap .info-mid *,
.user-base-info .vip-wrap .user-id * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.user-base-info .user-info .copy-icon,
.user-base-info .copy-icon {
    flex: 0 0 auto;
    width: 1.25rem !important;
    height: 1.25rem !important;
    padding: .2rem;
    margin-left: .5rem !important;
    box-sizing: border-box;
    border-radius: .4rem;
    background: rgba(0, 0, 0, .55);
    color: #ffffff !important;
    opacity: 1 !important;
    cursor: pointer;
    transition: background .18s ease, transform .18s ease;
}

.user-base-info .copy-icon:hover {
    background: rgba(0, 0, 0, .75);
    transform: scale(1.08);
}

/* Perfil / Saque: caixas */
.user-base-info {
    background-color: var(--secondary-color) !important;
}

.user-base-info .bg-img {
    display: none !important;
}

.user-base-info .recharge-withdraw .recharge-info,
.user-base-info .recharge-withdraw .withdraw-info {
    background: var(--bg-color-recharge-withdraw) !important;
    border: .0625rem solid var(--primary-color-line);
    color: var(--text-color, #fff);
}

.my-vip {
    background:
        linear-gradient(135deg, var(--primary-color-soft), transparent 70%),
        var(--secondary-color-raised) !important;
    border: .0625rem solid var(--primary-color-line);
    border-radius: .75rem;
}

.card-bg-gradient,
.feature-tab.card-bg-gradient {
    background: var(--secondary-color-raised) !important;
    border: .0625rem solid var(--primary-color-line);
}

.withdraw-apply,
.withdraw-apply .card,
.withdraw-apply .box,
.withdraw-apply .withdraw-box,
.withdraw-apply .pay-list,
.withdraw-apply .info-box {
    background: var(--secondary-color-raised);
    border-color: var(--primary-color-line);
}

.withdraw-apply ion-button,
.withdraw-apply .submit ion-button {
    --background: var(--primary-color);
    --background-activated: var(--primary-color-hover);
    --color: var(--on-primary-color);
}