/* ==========================================================================
   MYCS33 - light (day) theme
   ==========================================================================
   Night is the site's own look and stays the default. Everything here is
   scoped to html[data-theme="light"], so in night mode this file changes
   nothing at all.

   site.css and the views hardcode their colours - there are ~390 colour
   literals in site.css and ~480 inline style="" attributes across the views -
   so this layer restates the surfaces rather than re-tinting variables. Rules
   that have to beat an inline style are marked !important and prefixed with
   html[data-theme="light"] body, which outranks a plain element style only
   with that flag; that is the reason for every !important below.

   Palette - warm paper rather than pure white, so the gold brand furniture
   still looks like it belongs:
     page        #F3F1EC      raised card  #FFFFFF
     sunken      #E8E5DE      hairline     #D8D3C7
     ink         #1B1712      ink muted    #6B6659
     gold kept as-is from night: #F4E5AE -> #B09A51 gradients, #FFD950

   The canvas is a warm grey, not the cream it started as: cream plus gold is a
   stock pairing, and the gold furniture already supplies all the warmth this
   page needs - the ground only has to stay out of its way. The bias is still
   toward the accent (hue 40, barely saturated) so it reads as chosen rather
   than as a default #FFF. Ink is the night canvas #16130E lifted a little, so
   the two themes share a family instead of being inverses.
   Contrast: ink on page 15.8:1, gold-deep on page 5.6:1 - both clear of AA.
   ========================================================================== */

html[data-theme="light"] {
    --page: #F3F1EC;
    --card: #FFFFFF;
    --sunken: #E8E5DE;
    --line: #D8D3C7;
    --ink: #1B1712;
    --ink-muted: #6B6659;
    --gold-deep: #7A6428;
    color-scheme: light;
}

/* ── Canvas ─────────────────────────────────────────────────────────────── */
html[data-theme="light"],
html[data-theme="light"] body {
    background-color: var(--page) !important;
    color: var(--ink);
}

    html[data-theme="light"] body .main-bg,
    html[data-theme="light"] body .body-container,
    html[data-theme="light"] body .footer-container,
    html[data-theme="light"] body .desktop-right {
        background: var(--page) !important;
        color: var(--ink);
    }

/* Blanket text rule: the views paint most copy white inline. Images, buttons
   and anything with its own colour are excluded further down. */
html[data-theme="light"] body .text-white,
html[data-theme="light"] body .text-white * {
    color: var(--ink) !important;
}

/* ── Top bar ────────────────────────────────────────────────────────────── */
html[data-theme="light"] body .home-topbar {
    background: linear-gradient(180deg, #FFFFFF 0%, #F6F1E5 100%) !important;
    border-bottom: 1px solid var(--line);
}

    html[data-theme="light"] body .topbar-burger-btn {
        border-color: var(--line);
    }

/* The chrome icons are white artwork, invisible on paper - flip them to ink. */
html[data-theme="light"] body .topbar-burger,
html[data-theme="light"] body .topbar-support,
html[data-theme="light"] body .topbar-notification img,
html[data-theme="light"] body .bottom-nav-icon {
    filter: invert(1) brightness(.35);
}

/* ── Bottom nav ─────────────────────────────────────────────────────────── */
html[data-theme="light"] body .bottom-nav {
    background: #FFFFFF !important;
    border-top: 1px solid var(--line);
}

html[data-theme="light"] body .bottom-nav-label {
    color: var(--ink) !important;
}

html[data-theme="light"] body .bottom-nav-item.selected .bottom-nav-label {
    color: var(--gold-deep) !important;
}

/* The raised centre button keeps its gold ring but sits on paper. */
html[data-theme="light"] body .bottom-nav-circle {
    background-image:
        url('/images/iconv3/middle-logo.webp'),
        linear-gradient(#FFFFFF, #FFFFFF),
        linear-gradient(180deg, #E9C559 0%, #8A6B23 100%) !important;
}

/* ── Side menu / desktop rail ───────────────────────────────────────────── */
html[data-theme="light"] body .sidenav,
html[data-theme="light"] body .desktop-left {
    background: #FFFFFF !important;
    border-right-color: var(--line) !important;
    color: var(--ink);
}

    html[data-theme="light"] body .sidenav a,
    html[data-theme="light"] body .desktop-left a {
        color: var(--ink) !important;
    }

/* ── Panels, cards, tables ──────────────────────────────────────────────── */
html[data-theme="light"] body .card,
html[data-theme="light"] body .modal-content,
html[data-theme="light"] body .dropdown-menu {
    background-color: var(--card) !important;
    color: var(--ink) !important;
    border-color: var(--line) !important;
}

html[data-theme="light"] body .modal-header,
html[data-theme="light"] body .modal-footer {
    border-color: var(--line) !important;
    color: var(--ink) !important;
}

html[data-theme="light"] body .table,
html[data-theme="light"] body .table td,
html[data-theme="light"] body .table th {
    color: var(--ink) !important;
    border-color: var(--line) !important;
}

/* The gold header band stays gold; only the body rows turn to paper. */
html[data-theme="light"] body .table-yellow td {
    background-color: var(--card) !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
}

/* ── Type ───────────────────────────────────────────────────────────────── */
html[data-theme="light"] body .primary-text {
    color: var(--gold-deep) !important;
}

html[data-theme="light"] body h1,
html[data-theme="light"] body h2,
html[data-theme="light"] body h3,
html[data-theme="light"] body h4,
html[data-theme="light"] body h5,
html[data-theme="light"] body h6,
html[data-theme="light"] body p,
html[data-theme="light"] body span,
html[data-theme="light"] body div,
html[data-theme="light"] body label,
html[data-theme="light"] body td,
html[data-theme="light"] body li {
    border-color: var(--line);
}

/* ── Forms ──────────────────────────────────────────────────────────────── */
html[data-theme="light"] body .form-control,
html[data-theme="light"] body select.form-control,
html[data-theme="light"] body textarea.form-control {
    background-color: #FFFFFF !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
}

    html[data-theme="light"] body .form-control::placeholder {
        color: #9A9184 !important;
    }

html[data-theme="light"] body .input-group-addon {
    background-color: var(--sunken) !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
/* btn-primary is the gold gradient with dark text - it reads on paper as it
   is, so it is left alone. btn-black is the one that disappears. */
html[data-theme="light"] body .btn-black,
html[data-theme="light"] body .btn-promotion {
    background-color: var(--sunken) !important;
    color: var(--gold-deep) !important;
    border: 1px solid var(--line) !important;
}

/* ── The toggle itself ──────────────────────────────────────────────────── */
/* Lives in both themes, so it is not scoped like the rest of this file. */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    /* The support and bell icons sit 10px apart. The button is inline, so the
       newline between it and the next link renders as a word space on top of
       any margin - 4px here lands on the same 10px as the rest of the row. */
    margin-right: 4px;
    padding: 0;
    border: 1px solid #2D3A57;
    border-radius: 50%;
    background: transparent;
    color: #E9C559;
    cursor: pointer;
    flex: none;
}

    .theme-toggle:hover {
        filter: brightness(1.15);
    }

    .theme-toggle svg {
        width: 17px;
        height: 17px;
        display: block;
    }

    /* One button, two icons: the moon means "night is on", the sun means
       "day is on". Only the one matching the current theme is shown. */
    .theme-toggle .theme-toggle-sun {
        display: none;
    }

html[data-theme="light"] .theme-toggle {
    border-color: #D8CBA6;
    color: #8A6B23;
}

    html[data-theme="light"] .theme-toggle .theme-toggle-sun {
        display: block;
    }

    html[data-theme="light"] .theme-toggle .theme-toggle-moon {
        display: none;
    }

/* ── Home page surfaces ─────────────────────────────────────────────────────
   Found by walking the rendered page for panels that stayed dark. Each of
   these paints its own colour (several from an inline style attribute), so
   none of them inherit the canvas rule above. ────────────────────────────── */
html[data-theme="light"] body .main-bottom-container {
    background: var(--page) !important;
}

/* Notice ticker */
html[data-theme="light"] body .marquee {
    background: #FAF8F3 !important;
    color: var(--ink) !important;
    border-bottom: 1px solid var(--line);
}

    html[data-theme="light"] body .marquee img {
        filter: invert(1) brightness(.35);
    }

/* The outline button next to REGISTER - a near-black fill in night mode. */
html[data-theme="light"] body .btn-app.btn-ghost {
    background: #FFFFFF !important;
    border-color: #C8A94E !important;
    color: var(--gold-deep) !important;
}

/* Panels: lucky draw card, its tab strip, the live transaction table and the
   testimonial slides. */
html[data-theme="light"] body .lottery-lucky-card,
html[data-theme="light"] body .live-tx-body,
html[data-theme="light"] body .testimonial-card {
    background: var(--card) !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
}

html[data-theme="light"] body .lottery-tabs {
    background: var(--sunken) !important;
}

/* Letterbox behind the embedded video - paper would glare around the frame,
   so it only lifts to the sunken tone. */
html[data-theme="light"] body .youtube-embed-wrapper {
    background: var(--sunken) !important;
}

/* The megaphone sits in its own black chip inside the ticker. */
html[data-theme="light"] body .marquee-icon {
    background: #FAF8F3 !important;
}

/* ── Slide-out side menu ────────────────────────────────────────────────── */
html[data-theme="light"] body .sidenav-clock,
html[data-theme="light"] body .sidenav-lang-accordion,
html[data-theme="light"] body .sidenav-profile-btn {
    background: var(--sunken) !important;
    color: var(--ink) !important;
    border-color: var(--line) !important;
}

/* The menu icons are white artwork like the top bar ones. */
html[data-theme="light"] body .sidenav img,
html[data-theme="light"] body .sidenav-profile-btn img {
    filter: invert(1) brightness(.35);
}

/* Brand marks in the menu keep their own colours. */
html[data-theme="light"] body .sidenav .sidenav-logo img,
html[data-theme="light"] body .sidenav .follow-us-banner img,
html[data-theme="light"] body .sidenav-lang-accordion img {
    filter: none;
}

/* The accordion headers set their own white, which the parent rule above does
   not reach. */
html[data-theme="light"] body .sidenav-lang-header,
html[data-theme="light"] body .sidenav-lang-header * {
    color: var(--ink) !important;
}

/* ── Category rail beside the game grid ─────────────────────────────────────
   The rail has no background of its own, so its white labels and white line
   icons were sitting straight on the paper. ──────────────────────────────── */
html[data-theme="light"] body .mobile-game-selection .game-tab-label {
    color: var(--ink) !important;
}

html[data-theme="light"] body .mobile-game-selection.selected .game-tab-label,
html[data-theme="light"] body .mobile-game-selection.active .game-tab-label {
    color: var(--gold-deep) !important;
}

html[data-theme="light"] body .mobile-game-selection img {
    filter: invert(1) brightness(.35);
}

/* ── 4D lottery panel ───────────────────────────────────────────────────────
   The hub and its headings are pale gold, which vanishes on a white card. */
html[data-theme="light"] body .lottery-hub,
html[data-theme="light"] body .lottery-generator-title {
    color: var(--gold-deep) !important;
}

html[data-theme="light"] body .lottery-tabs {
    color: var(--ink) !important;
}

html[data-theme="light"] body .lottery-tab {
    color: var(--ink-muted) !important;
}

    /* The active tab keeps its gold fill, so its label stays near-black. */
    html[data-theme="light"] body .lottery-tab.is-active {
        color: #171717 !important;
    }

/* ── Modals ─────────────────────────────────────────────────────────────────
   .modal-content was already covered, but the header and body inside it carry
   their own #202020 from site.css, so the dialog stayed dark while the text
   in it had already turned to ink. ──────────────────────────────────────── */
html[data-theme="light"] body .modal-header,
html[data-theme="light"] body .modal-body,
html[data-theme="light"] body .modal-footer {
    background-color: var(--card) !important;
    color: var(--ink) !important;
}

html[data-theme="light"] body .modal .close {
    color: var(--ink) !important;
    opacity: .7;
}

/* Check-in: the day tiles and the month heading. */
html[data-theme="light"] body .checkin-day,
html[data-theme="light"] body .checkin-month,
html[data-theme="light"] body .checkin-body {
    color: var(--ink) !important;
}

/* The consecutive-reward band keeps its dark gold gradient (it is brand
   artwork), so the text sitting on it has to stay light - the blanket
   .text-white rule above would otherwise turn it to ink on near-black. */
html[data-theme="light"] body .checkin-consec-label,
html[data-theme="light"] body .checkin-consec-day,
html[data-theme="light"] body .checkin-consec-label * {
    color: #FFFFFF !important;
}

html[data-theme="light"] body .checkin-consec-title {
    color: #F4E5AE !important;
}

/* ── Login / register ───────────────────────────────────────────────────── */
html[data-theme="light"] body .input-label {
    color: var(--ink) !important;
}

html[data-theme="light"] body .keep-logged-in,
html[data-theme="light"] body .keep-logged-in * {
    color: var(--ink-muted) !important;
}

/* The unselected tab is a near-black chip with grey text. */
html[data-theme="light"] body .auth-tab {
    background-color: var(--sunken) !important;
    color: var(--ink-muted) !important;
}

    /* The selected one keeps its gold fill and dark label. */
    html[data-theme="light"] body .auth-tab.selected {
        background-color: #B09A51 !important;
        color: #111111 !important;
    }

/* Links on the auth page are pale gold, which is invisible on paper. */
html[data-theme="light"] body .auth-page a,
html[data-theme="light"] body .auth-card a {
    color: var(--gold-deep) !important;
}

/* ── Wallet card (logged in) ────────────────────────────────────────────────
   The panel under the top banner: dark card, white type. ────────────────── */
html[data-theme="light"] body .wallet-card,
html[data-theme="light"] body .wallet-card-head,
html[data-theme="light"] body .wallet-card-sub,
html[data-theme="light"] body .wallet-actions {
    background: var(--card) !important;
    color: var(--ink) !important;
    border-color: var(--line) !important;
}

html[data-theme="light"] body .wallet-balance-label,
html[data-theme="light"] body .wallet-autotransfer-text,
html[data-theme="light"] body .profile-member-level-label {
    color: var(--ink-muted) !important;
}

html[data-theme="light"] body .wallet-balance-amount,
html[data-theme="light"] body .balance-text,
html[data-theme="light"] body .wallet-action,
html[data-theme="light"] body .wallet-action *,
html[data-theme="light"] body .profile-member-level-text,
html[data-theme="light"] body .profile-member-tier-name {
    color: var(--ink) !important;
}

html[data-theme="light"] body .wallet-history-link {
    color: var(--gold-deep) !important;
}

/* The action icons (Deposit, Withdraw, Rebate, Referral, Profile) are white
   line art like the rest of the chrome. */
html[data-theme="light"] body .wallet-action img {
    filter: invert(1) brightness(.35);
}

/* ── Sidebar log out ────────────────────────────────────────────────────── */
html[data-theme="light"] body .sidenav-logout-btn {
    background: var(--sunken) !important;
    color: var(--ink) !important;
    border: 1px solid var(--line) !important;
}

/* ── Footer ─────────────────────────────────────────────────────────────────
   Paper, like the rest of the page. The certification, security, responsible
   gaming and payment rows are supplied as white artwork, which would vanish
   here, so each of those has a -dark twin next to it and the img is swapped
   through content: below. The twins were not simply inverted - only their
   near-grey bright pixels were flipped, so ThreatMetrix keeps its orange, the
   award seals keep their gold and VISA keeps its blue. ───────────────────── */
html[data-theme="light"] body .footer-container {
    background: var(--page) !important;
    color: var(--ink) !important;
    border-top: 1px solid var(--line);
}

    html[data-theme="light"] body .footer-container,
    html[data-theme="light"] body .footer-container div,
    html[data-theme="light"] body .footer-container span,
    html[data-theme="light"] body .footer-container p,
    html[data-theme="light"] body .footer-container li {
        color: var(--ink) !important;
    }

    html[data-theme="light"] body .footer-container a {
        color: var(--gold-deep) !important;
    }

    html[data-theme="light"] body .footer-section-title {
        color: var(--gold-deep) !important;
    }

    /* Undo the chrome-icon inversion here: these are brand marks, not UI icons. */
    html[data-theme="light"] body .footer-container img {
        filter: none !important;
    }

/* The day-mode artwork. content: on an img replaces the rendered image and
   leaves the src alone, so night mode is untouched. */
html[data-theme="light"] body .footer-container img[src*="2_aeef_brands.webp"] {
    content: url('/images/footer/footer_awards/2_aeef_brands-dark.webp');
}

html[data-theme="light"] body .footer-container img[src*="3_honesty_award.webp"] {
    content: url('/images/footer/footer_awards/3_honesty_award-dark.webp');
}

html[data-theme="light"] body .footer-container img[src*="1_meta.webp"] {
    content: url('/images/footer/certificates/1_meta-dark.webp');
}

html[data-theme="light"] body .footer-container img[src*="2_itech_labs.webp"] {
    content: url('/images/footer/certificates/2_itech_labs-dark.webp');
}

html[data-theme="light"] body .footer-container img[src*="3_globe.webp"] {
    content: url('/images/footer/certificates/3_globe-dark.webp');
}

html[data-theme="light"] body .footer-container img[src*="4_certs.webp"] {
    content: url('/images/footer/certificates/4_certs-dark.webp');
}

html[data-theme="light"] body .footer-container img[src*="6_godaddy.webp"] {
    content: url('/images/footer/certificates/6_godaddy-dark.webp');
}

html[data-theme="light"] body .footer-container img[src*="1_iovation.webp"] {
    content: url('/images/footer/security/1_iovation-dark.webp');
}

html[data-theme="light"] body .footer-container img[src*="2_threadmax.webp"] {
    content: url('/images/footer/security/2_threadmax-dark.webp');
}

html[data-theme="light"] body .footer-container img[src*="1_18only.webp"] {
    content: url('/images/footer/responsible_gaming/1_18only-dark.webp');
}

html[data-theme="light"] body .footer-container img[src*="2_gamcare.webp"] {
    content: url('/images/footer/responsible_gaming/2_gamcare-dark.webp');
}

html[data-theme="light"] body .footer-container img[src*="3_begambleaware.webp"] {
    content: url('/images/footer/responsible_gaming/3_begambleaware-dark.webp');
}

html[data-theme="light"] body .footer-container img[src*="fpx.webp"] {
    content: url('/images/payment/fpx-dark.webp');
}

html[data-theme="light"] body .footer-container img[src*="8secure.webp"] {
    content: url('/images/payment/8secure-dark.webp');
}

html[data-theme="light"] body .footer-container img[src*="truepay.webp"] {
    content: url('/images/payment/truepay-dark.webp');
}

html[data-theme="light"] body .footer-container img[src*="visa.webp"] {
    content: url('/images/payment/visa-dark.webp');
}

html[data-theme="light"] body .footer-container img[src*="pe2.webp"] {
    content: url('/images/payment/pe2-dark.webp');
}

/* ── Profile page ───────────────────────────────────────────────────────────
   Two gold-edged chips that are near-black inside. Both keep their gold
   border; only the fill and the type change. ─────────────────────────────── */
html[data-theme="light"] body .connected-account {
    background: linear-gradient(#FFFFFF, #FFFFFF) padding-box,
                linear-gradient(180deg, #F4E5AE 0%, #B09A51 100%) border-box !important;
    color: var(--ink) !important;
}

    html[data-theme="light"] body .connected-account > div:first-child {
        color: var(--gold-deep) !important;
    }

/* Referral code block: the radial near-black fill and its inner gold glow. */
html[data-theme="light"] body .referral-code-section {
    background: radial-gradient(circle, #FFFFFF 80%, #F6EFD2 175%) !important;
    box-shadow: inset 0 0 12px 1px rgba(176, 154, 81, .35) !important;
    border-color: #C8A94E !important;
}

html[data-theme="light"] body .referral-code-section input.form-control {
    color: var(--ink) !important;
    background: linear-gradient(#FFFFFF, #FFFFFF) padding-box,
                linear-gradient(90deg, #C8A94E 0%, #E8E5DE 100%) border-box !important;
}

html[data-theme="light"] body .referral-code-note {
    color: var(--ink) !important;
}

/* ── Commission details ─────────────────────────────────────────────────────
   This page carries its own <style> block, so every surface on it is dark and
   every label is white or pale gold. The gold borders stay; the fills and the
   type flip. (.referral-code-* is shared with the profile page and is already
   handled above.) ───────────────────────────────────────────────────────── */
html[data-theme="light"] body .refer-earn,
html[data-theme="light"] body .refer-earn .card {
    background: var(--card) !important;
    color: var(--ink) !important;
}

html[data-theme="light"] body .refer-earn h2,
html[data-theme="light"] body .refer-earn .card h3 {
    color: var(--gold-deep) !important;
}

html[data-theme="light"] body .refer-earn .subtitle,
html[data-theme="light"] body .refer-earn .card p {
    color: var(--ink) !important;
}

/* Referral calculator */
html[data-theme="light"] body .calc-card {
    background: var(--card) !important;
    border-color: #C8A94E !important;
}

html[data-theme="light"] body .calc-title,
html[data-theme="light"] body .calc-highlight {
    color: var(--gold-deep) !important;
}

html[data-theme="light"] body .calc-subtitle,
html[data-theme="light"] body .calc-row-label,
html[data-theme="light"] body .calc-result {
    color: var(--ink) !important;
}

html[data-theme="light"] body .calc-input.form-control {
    color: var(--ink) !important;
    background: linear-gradient(#FFFFFF, #FFFFFF) padding-box,
                linear-gradient(90deg, #C8A94E 0%, #E8E5DE 100%) border-box !important;
}

/* Incentive card and its legend */
html[data-theme="light"] body .incentive-card {
    background: linear-gradient(#FFFFFF, #FFFFFF) padding-box,
                linear-gradient(180deg, #F4E5AE 0%, #B09A51 100%) border-box !important;
}

html[data-theme="light"] body .incentive-title,
html[data-theme="light"] body .incentive-body,
html[data-theme="light"] body .incentive-legend-item {
    color: var(--ink) !important;
}

/* The donut sits on a white hole with near-black figures, so the chart itself
   already reads on paper - only its footer strip needs turning over. */
html[data-theme="light"] body .incentive-footer {
    background: radial-gradient(circle, #FFFFFF 80%, #F6EFD2 175%) !important;
}

html[data-theme="light"] body .incentive-footer-label {
    color: var(--ink) !important;
}

html[data-theme="light"] body .incentive-footer-amount {
    color: var(--gold-deep) !important;
}

html[data-theme="light"] body .incentive-footer-divider {
    background: var(--line) !important;
}

/* ==========================================================================
   Logged-in pages: wallet, account and VIP
   ==========================================================================
   Everything above this point covers the pages a guest sees. The signed-in
   pages are built from a different set of panels - each view ships its own
   style block, and those blocks paint the same four greys over and over:

       #202020  panel / card / inactive tab      #363636  table + list header
       #2a2a2a  bank + crypto chips              #2e2e2e  VIP level badge

   with #ffffff copy, #858585 / #9a9a9a / #ACACAC captions and #F4E5AE gold
   headings on top. Left alone they stay near-black slabs on paper, and the
   blanket ink rules further up turn some of the copy inside them dark, which
   is the black-box-with-invisible-text in every screenshot.

   The mapping is the one already used above, so the two halves of the site
   match: #202020 -> card, #363636 / #2a2a2a / #2e2e2e -> sunken, #ffffff ->
   ink, the greys -> ink-muted, #F4E5AE -> gold-deep. Gold gradient fills
   already carry near-black text and are left alone.

   Each view renders its style block from RenderSection("Styles"), which the
   layout emits AFTER this file, so every rule here needs !important to land.
   ========================================================================== */

/* -- Section titles and form labels ------------------------------------- */
html[data-theme="light"] body .text-label,
html[data-theme="light"] body .blue-container-label,
html[data-theme="light"] body .blue-container-header,
html[data-theme="light"] body .page-header-title {
    color: var(--ink) !important;
}

html[data-theme="light"] body .profile-title {
    color: var(--gold-deep) !important;
}

/* -- Tab pairs -------------------------------------------------------------
   Bank Transfer/Crypto, Rebate/Sport Rebate, Commission/Invitation, Login and
   Game Password, Banking Details/Crypto and the History range row are all the
   same widget under four different class names.

   The hairline is an inset shadow rather than a border: .promo-tab and
   .referral-tab carry no border of their own, so adding one would grow them
   by 2px and misalign the row against its gold twin. -------------------- */
html[data-theme="light"] body .promo-tab:not(.selected),
html[data-theme="light"] body .referral-tab:not(.selected),
html[data-theme="light"] body .history-tab:not(.selected) {
    background-color: var(--sunken) !important;
    color: var(--ink-muted) !important;
    box-shadow: inset 0 0 0 1px var(--line);
}

/* The selected range button is outlined rather than filled at night; on paper
   the same shape reads as white inside a gold rule. */
html[data-theme="light"] body .history-tab.selected {
    background-color: var(--card) !important;
    border-color: #B09A51 !important;
    color: var(--gold-deep) !important;
}

/* -- Rebate / commission claim card ------------------------------------- */
html[data-theme="light"] body .rebate-card {
    background-color: var(--card) !important;
}

html[data-theme="light"] body .rebate-title {
    color: var(--ink) !important;
}

html[data-theme="light"] body .rebate-amount {
    color: var(--gold-deep) !important;
}

html[data-theme="light"] body .rebate-caption {
    color: var(--ink-muted) !important;
}

/* -- Terms and conditions box (_PageTerms) ------------------------------ */
html[data-theme="light"] body .page-terms {
    background-color: var(--card) !important;
    color: var(--ink-muted) !important;
}

html[data-theme="light"] body .page-terms-title {
    color: var(--ink) !important;
}

html[data-theme="light"] body .page-terms-list,
html[data-theme="light"] body .page-terms-list li,
html[data-theme="light"] body .page-terms-intro,
html[data-theme="light"] body .page-terms-footer {
    color: var(--ink-muted) !important;
}

/* -- Data tables and their pager ---------------------------------------- */
html[data-theme="light"] body .table-yellow,
html[data-theme="light"] body .table-yellow td {
    background-color: var(--card) !important;
    color: var(--ink) !important;
}

html[data-theme="light"] body .table-yellow thead tr,
html[data-theme="light"] body .table-yellow thead th {
    background-color: var(--sunken) !important;
    color: var(--gold-deep) !important;
}

/* Previous is a near-black plate at night - the black box left of Next. */
html[data-theme="light"] body .paginate_button a {
    color: var(--ink) !important;
}

html[data-theme="light"] body .paginate_button.previous a {
    background-color: var(--card) !important;
    color: var(--gold-deep) !important;
    border-color: var(--line) !important;
}

html[data-theme="light"] body .dataTables_wrapper,
html[data-theme="light"] body .dataTables_info,
html[data-theme="light"] body .dataTables_length,
html[data-theme="light"] body .dataTables_length label,
html[data-theme="light"] body .dataTables_empty {
    color: var(--ink) !important;
}

/* -- Messaging ---------------------------------------------------------- */
html[data-theme="light"] body .msg-list-container {
    background-color: var(--card) !important;
    box-shadow: inset 0 0 0 1px var(--line);
    border-radius: 8px;
}

html[data-theme="light"] body .msg-list-head {
    background-color: var(--sunken) !important;
}

html[data-theme="light"] body .msg-list-title,
html[data-theme="light"] body .msg-list-count,
html[data-theme="light"] body .msg-page-title,
html[data-theme="light"] body .msg-item-title,
html[data-theme="light"] body .msg-item-body,
html[data-theme="light"] body .msg-detail-body,
html[data-theme="light"] body .msg-content,
html[data-theme="light"] body .msg-row,
html[data-theme="light"] body .msg-item {
    color: var(--ink) !important;
}

html[data-theme="light"] body .msg-row,
html[data-theme="light"] body .msg-item {
    background-color: var(--card) !important;
}

html[data-theme="light"] body .msg-item-date,
html[data-theme="light"] body .msg-empty {
    color: var(--ink-muted) !important;
}

html[data-theme="light"] body .msg-mark-read,
html[data-theme="light"] body .msg-back {
    color: var(--gold-deep) !important;
}

html[data-theme="light"] body .msg-row-divider {
    border-top: 1px solid var(--line) !important;
    background-color: transparent !important;
}

/* -- Promo code cards --------------------------------------------------- */
html[data-theme="light"] body .promo-card,
html[data-theme="light"] body .promo-card-body {
    background-color: var(--card) !important;
}

html[data-theme="light"] body .promo-card-title {
    color: var(--gold-deep) !important;
}

html[data-theme="light"] body .promo-countdown,
html[data-theme="light"] body .promo-subtitle,
html[data-theme="light"] body .promo-req-label {
    color: var(--ink-muted) !important;
}

html[data-theme="light"] body .promo-req-value,
html[data-theme="light"] body .promo-req {
    color: var(--ink) !important;
}

html[data-theme="light"] body .promo-divider {
    border-color: var(--line) !important;
    background-color: var(--line) !important;
}

/* The eligible-method icon strip under each promo title is white line art. */
html[data-theme="light"] body .promo-card-icons img {
    filter: invert(1) brightness(.35);
}

/* -- Bank and crypto chips on the banking page -------------------------- */
html[data-theme="light"] body .crypto-btn,
html[data-theme="light"] body .bank-btn {
    background: var(--sunken) !important;
    color: var(--ink) !important;
}

html[data-theme="light"] body .crypto-btn.active,
html[data-theme="light"] body .bank-btn.active {
    background: var(--card) !important;
    border-color: #B09A51 !important;
    color: var(--gold-deep) !important;
}

html[data-theme="light"] body .bank-account {
    color: var(--ink) !important;
}

/* -- Deposit: method tiles, bank tiles, prefill amounts ----------------- */
html[data-theme="light"] body .payment-selection,
html[data-theme="light"] body .provider-selection,
html[data-theme="light"] body .wallet-provider-selection,
html[data-theme="light"] body .telco-provider-selection,
html[data-theme="light"] body .usdt-provider-selection,
html[data-theme="light"] body .duitnow-provider-selection,
html[data-theme="light"] body .bank-selection,
html[data-theme="light"] body .bank-detail {
    background-color: var(--sunken) !important;
}

html[data-theme="light"] body .deposit-method-label,
html[data-theme="light"] body .payment-selection-label,
html[data-theme="light"] body .bank-selection-label {
    color: var(--ink-muted) !important;
}

html[data-theme="light"] body .selected .deposit-method-label,
html[data-theme="light"] body .payment-selection.selected .payment-selection-label,
html[data-theme="light"] body .bank-selection.selected .bank-selection-label {
    color: var(--gold-deep) !important;
}

html[data-theme="light"] body .bank-detail-value,
html[data-theme="light"] body .bank-detail-value-text,
html[data-theme="light"] body .bank-detail-row {
    color: var(--ink) !important;
}

/* The method icons are white line art drawn for a black tile. */
html[data-theme="light"] body .deposit-method-icon-box img,
html[data-theme="light"] body .payment-selection-icon {
    filter: invert(1) brightness(.35);
}

/* Prefill amount buttons: site.css paints them #202020, the History page
   paints its own set white. Both land on the same chip here. */
html[data-theme="light"] body .amount-bt-container div {
    background-color: var(--sunken) !important;
    color: var(--ink) !important;
    box-shadow: inset 0 0 0 1px var(--line);
}

/* "+0 MY TOKEN $ Earned" beside the amount box: an inline #202020 slab with
   green copy - the black box in the form. Green deepened to read on paper. */
html[data-theme="light"] body #token_earned {
    background-color: var(--card) !important;
    border-color: #1E7B34 !important;
    color: #1E7B34 !important;
}

/* The "MYR 100 = 10 MY TOKEN $ Earned" note above it is inline pale gold. */
html[data-theme="light"] body .text-label span[style*="#f4e5ae"] {
    color: var(--gold-deep) !important;
}

/* -- Home notice popup -----------------------------------------------------
   .modal-content already turned white further up, which left the footer band
   as a dark strip under a white dialog. The gold gradient on the active tab
   stays; only the inactive ones and the band behind them move. ---------- */
html[data-theme="light"] body .notice-footer {
    background: var(--card) !important;
    border-top: 1px solid var(--line);
}

html[data-theme="light"] body .notice-tab:not(.active) {
    color: var(--gold-deep) !important;
}

/* The prev/next arrows keep their pale gold gradient: they sit on top of the
   notice artwork, which is authored dark in both themes, not on the paper. */

/* -- Check-in modal title --------------------------------------------------
   site.css carries #check_in_modal .modal-header .text-center { color: white }.
   That ID outranks the .modal-header ink rule further up, so the heading was
   white on a white header - the blank strip beside the close button. ---- */
html[data-theme="light"] body #check_in_modal .modal-header .text-center {
    color: var(--ink) !important;
}

/* -- VIP privileges ----------------------------------------------------- */
html[data-theme="light"] body .vip-compare,
html[data-theme="light"] body .vip-compare-heading-sub,
html[data-theme="light"] body .vip-cell,
html[data-theme="light"] body .user-vip-table,
html[data-theme="light"] body .user-vip-table td {
    color: var(--ink) !important;
}

html[data-theme="light"] body .vip-compare-heading-main,
html[data-theme="light"] body .vip-section {
    color: var(--gold-deep) !important;
}

html[data-theme="light"] body .vip-level-caption,
html[data-theme="light"] body .vip-cell-label {
    color: var(--ink-muted) !important;
}

/* The comparison grid frames itself with a gold gradient border-box over a
   flat #202020 padding-box; only the fill changes. */
html[data-theme="light"] body .vip-compare-table {
    background: linear-gradient(var(--card), var(--card)) padding-box,
                linear-gradient(180deg, #F4E5AE 0%, #B09A51 100%) border-box !important;
}

html[data-theme="light"] body .vip-level-badge {
    background: var(--sunken) !important;
    color: var(--ink) !important;
}

/* The next-level badge keeps its gold rule but loses the brown fill. */
html[data-theme="light"] body .vip-level-badge--compare {
    background: var(--card) !important;
    color: var(--gold-deep) !important;
}

/* -- Refer & Earn illustrations (/Home/CommissionDetails, "How It Work") ---
   Three transparent PNG-style illustrations whose callout copy is painted in
   #F4E5AE and white for a black page: the "3% / 1st Gen (A)" pair beside the
   pyramid, "BOSSKU" above the generation cards, and the "Earn Extra Income by
   Referring! / 4 Easy Steps" headline. The artwork itself reads fine on paper,
   so rather than plating it, each file has a twin with just those floating
   labels repainted in gold-deep and ink (see referral/*-dark.webp). Night mode
   is untouched - src never changes, only the rendered content in light. --- */
html[data-theme="light"] body .referral-panel img[src*="1_explain.webp"] {
    content: url('/images/referral/1_explain-dark.webp');
}

html[data-theme="light"] body .referral-panel img[src*="2_story.webp"] {
    content: url('/images/referral/2_story-dark.webp');
}

html[data-theme="light"] body .referral-panel img[src*="3_steps.webp"] {
    content: url('/images/referral/3_steps-dark.webp');
}

/* -- Live RTP page (/Home/RTP) ---------------------------------------------
   The view paints every surface itself in a <style> block in the body, after
   this file, so these rules win on specificity alone. Only the per-card
   colours, written inline as style="", need !important. The hero banner is
   artwork and stays as drawn. -------------------------------------------- */
html[data-theme="light"] body .rtp-page {
    background: var(--page);
}

html[data-theme="light"] body .rtp-section-title,
html[data-theme="light"] body .provider-arrow,
html[data-theme="light"] body .rtp-about-title {
    color: var(--gold-deep);
}

/* The provider logos are white and gold artwork drawn for a black page - a
   white logo on a paper tile simply disappears - so the tiles stay dark
   plates, in the palette's own near-black rather than neutral grey. */
html[data-theme="light"] body .provider-tile {
    background: #2A261F;
}

html[data-theme="light"] body .provider-tile.selected {
    background: #1B1712;
    border-color: #B09A51;
}

html[data-theme="light"] body .provider-dot {
    background: #CFC8BA;
}

html[data-theme="light"] body .provider-dot.active {
    background: #B09A51;
}

/* Stats card: paper inside its gold rule; the selected logo gets the same
   dark plate as its tile, for the same reason. */
html[data-theme="light"] body .rtp-stats {
    background: var(--card);
}

html[data-theme="light"] body .rtp-stats-logo {
    background: #1B1712;
    border-radius: 10px;
    padding: 6px 10px;
}

html[data-theme="light"] body .rtp-stats-info {
    background: var(--sunken);
}

html[data-theme="light"] body .rtp-stat,
html[data-theme="light"] body .rtp-stat-value,
html[data-theme="light"] body .rtp-card-title {
    color: var(--ink);
}

html[data-theme="light"] body .rtp-stat-label,
html[data-theme="light"] body .rtp-card-rtp-label,
html[data-theme="light"] body .rtp-empty,
html[data-theme="light"] body .rtp-about-text,
html[data-theme="light"] body .rtp-disclaimer {
    color: var(--ink-muted);
}

/* The icons are pale grey strokes set as svg attributes; a CSS stroke
   outranks those. */
html[data-theme="light"] body .rtp-stat svg,
html[data-theme="light"] body .rtp-search svg,
html[data-theme="light"] body .rtp-disclaimer svg,
html[data-theme="light"] body .rtp-about > svg:not(.rtp-about-graph) {
    stroke: var(--ink-muted);
}

html[data-theme="light"] body .rtp-search {
    background: var(--card);
}

html[data-theme="light"] body .rtp-search input {
    color: var(--ink);
}

    html[data-theme="light"] body .rtp-search input::placeholder {
        color: #9A9184;
    }

/* Game cards: paper under the artwork. */
html[data-theme="light"] body .rtp-card {
    background: var(--card);
    border-color: var(--line);
}

    html[data-theme="light"] body .rtp-card:hover {
        border-color: #B09A51;
    }

html[data-theme="light"] body .rtp-bar {
    background: var(--sunken);
}

/* The view picks each card's RTP and tier colour and writes it inline. The
   night neon - yellow #ffc804, green #00ff7e, orange #ffa500 - is unreadable
   on white, so each value is matched and deepened. The bar fills keep the
   neon: they are shapes, not text. If the view's colours ever change, these
   stop matching and that card just shows its night colour. */
html[data-theme="light"] body .rtp-card-rtp-value[style*="#ff0404"] {
    color: #C81E1E !important;
}

html[data-theme="light"] body .rtp-card-rtp-value[style*="#ffc804"] {
    color: #9A6A00 !important;
}

html[data-theme="light"] body .rtp-card-rtp-value[style*="#00ff7e"] {
    color: #0B7A3E !important;
}

html[data-theme="light"] body .rtp-card-tier[style*="#ff4d4d"] {
    color: #C62828 !important;
}

html[data-theme="light"] body .rtp-card-tier[style*="#4cd964"] {
    color: #1E7E34 !important;
}

html[data-theme="light"] body .rtp-card-tier[style*="#ffa500"] {
    color: #A15C00 !important;
}

html[data-theme="light"] body .rtp-card-tier[style*="#ff3b30"] {
    color: #C0281E !important;
}

/* About panel */
html[data-theme="light"] body .rtp-about {
    background: var(--card);
    box-shadow: inset 0 0 0 1px var(--line);
}

/* The chart's dots read as hollow by being filled with the panel colour. */
html[data-theme="light"] body .rtp-about svg circle {
    fill: var(--card);
}

/* The bar chart's pale gold top and trend arrow fade out on white. */
html[data-theme="light"] body .rtp-about-graph stop:last-child {
    stop-color: #D8BE72;
}

html[data-theme="light"] body .rtp-about-graph path {
    stroke: #B09A51;
}