/* ====== MiuOne Wallet — theme variables ====== */

html {
    scrollbar-width: thin;
    scrollbar-color: var(--c-scrollbar-thumb) var(--c-scrollbar-track);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--c-scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--c-scrollbar-thumb); border-radius: 6px; border: 2px solid var(--c-scrollbar-track); }
::-webkit-scrollbar-thumb:hover { background: var(--c-scrollbar-thumb-hover); }
::-webkit-scrollbar-corner { background: var(--c-scrollbar-track); }

:root {
    color-scheme: light;

    --c-scrollbar-track: #f0f0f0;
    --c-scrollbar-thumb: #0094f6;
    --c-scrollbar-thumb-hover: #0078cc;

    --c-bg: #eef2f8;
    --c-bg-soft: rgba(255, 255, 255, 0.52);
    --c-bg-elev: rgba(255, 255, 255, 0.62);
    --c-bg-glass: rgba(255, 255, 255, 0.72);
    --c-surface-blur: 16px;
    --c-surface-shadow: 0 4px 28px rgba(15, 23, 42, 0.07);
    --c-surface-highlight: rgba(255, 255, 255, 0.85);

    --c-text: #111111;
    --c-text-mut: #777777;
    --c-text-soft: #aaaaaa;
    --c-text-faint: #cccccc;

    --c-border: rgba(15, 23, 42, 0.09);
    --c-border-soft: rgba(15, 23, 42, 0.06);
    --c-border-strong: rgba(15, 23, 42, 0.14);

    --c-primary: #111111;
    --c-primary-hover: #333333;
    --c-on-primary: #ffffff;

    --c-danger: #b94646;
    --c-danger-hover: #9b3737;

    --c-accent: #0094f6;

    --c-shadow-modal: 0 30px 80px rgba(0, 0, 0, 0.12);
    --c-shadow-toast: 0 20px 50px rgba(0, 0, 0, 0.18);

    /* Wallet-specific */
    --c-credit-bg:   #f1faf5;
    --c-credit-bd:   #c9e4d6;
    --c-credit-text: #1f7a4d;
    --c-debit-bg:    #fff7f7;
    --c-debit-bd:    #f3d6d6;
    --c-debit-text:  #b94646;
    --c-pending-bg:  #fbf8ec;
    --c-pending-bd:  #efe2b9;
    --c-pending-text:#8a6b00;

    --c-balance-card-bg: #111111;
    --c-balance-card-text: #ffffff;
    --c-balance-card-mut: rgba(255,255,255,0.55);
    --c-balance-card-border: rgba(255,255,255,0.08);
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --c-scrollbar-track: #14161c;
    --c-scrollbar-thumb: #3a3f4a;
    --c-scrollbar-thumb-hover: #525863;

    --c-bg: #04060c;
    --c-bg-soft: rgba(12, 18, 30, 0.52);
    --c-bg-elev: rgba(10, 16, 28, 0.58);
    --c-bg-glass: rgba(8, 12, 22, 0.68);
    --c-surface-blur: 20px;
    --c-surface-shadow: 0 10px 42px rgba(0, 0, 0, 0.42);
    --c-surface-highlight: rgba(150, 200, 255, 0.07);

    --c-text: #ededed;
    --c-text-mut: #8d92a0;
    --c-text-soft: #6b6f7a;
    --c-text-faint: #494e58;

    --c-border: rgba(70, 130, 220, 0.14);
    --c-border-soft: rgba(50, 100, 180, 0.09);
    --c-border-strong: rgba(100, 165, 255, 0.24);

    --c-primary: #ffffff;
    --c-primary-hover: #dadada;
    --c-on-primary: #111111;

    --c-danger: #e26060;
    --c-danger-hover: #c34a4a;

    --c-accent: #2ea7ff;

    --c-shadow-modal: 0 30px 80px rgba(0, 0, 0, 0.55);
    --c-shadow-toast: 0 20px 50px rgba(0, 0, 0, 0.5);

    /* Wallet-specific dark */
    --c-credit-bg:   rgba(63, 200, 132, 0.10);
    --c-credit-bd:   rgba(63, 200, 132, 0.30);
    --c-credit-text: #3fc884;
    --c-debit-bg:    rgba(232, 96, 96, 0.10);
    --c-debit-bd:    rgba(232, 96, 96, 0.30);
    --c-debit-text:  #e85959;
    --c-pending-bg:  rgba(239, 196, 47, 0.10);
    --c-pending-bd:  rgba(239, 196, 47, 0.30);
    --c-pending-text:#efc42f;

    --c-balance-card-bg: #0d1117;
    --c-balance-card-text: #ededed;
    --c-balance-card-mut: rgba(237,237,237,0.45);
    --c-balance-card-border: rgba(70, 130, 220, 0.20);
}

/* ===== Body & global ===== */
html, body { background: var(--c-bg); color: var(--c-text); }

/* ===== Theme toggle ===== */
.theme-toggle {
    width: 36px; height: 36px;
    border-radius: 999px;
    border: 1px solid var(--c-border);
    background: var(--c-bg-elev);
    color: var(--c-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s;
    padding: 0; margin: 0 4px;
    flex-shrink: 0;
}
.theme-toggle:hover { background: var(--c-bg-soft); border-color: var(--c-border-strong); }
.theme-toggle svg { width: 16px; height: 16px; display: block; }
.theme-toggle .sun  { display: none; }
.theme-toggle .moon { display: block; }
:root[data-theme="dark"] .theme-toggle .sun  { display: block; }
:root[data-theme="dark"] .theme-toggle .moon { display: none; }

/* ===== Navbar dark overrides ===== */
:root[data-theme="dark"] body { background: var(--c-bg); color: var(--c-text); }
:root[data-theme="dark"] .navbar { background: var(--c-bg-elev); border-bottom: 1px solid var(--c-border-soft); }
:root[data-theme="dark"] .nav-brand { color: var(--c-text); }
:root[data-theme="dark"] .nav-brand img { filter: invert(1) hue-rotate(180deg); }
:root[data-theme="dark"] .nav-link { color: var(--c-text-mut); }
:root[data-theme="dark"] .nav-link:hover { color: var(--c-text); background: var(--c-bg-soft); }
:root[data-theme="dark"] .nav-link.active { color: var(--c-text); background: var(--c-bg-soft); }
:root[data-theme="dark"] .nav-burger span { background: var(--c-text); }
:root[data-theme="dark"] .nav-user { border-color: var(--c-border); }
:root[data-theme="dark"] .nav-user:hover { background: var(--c-bg-soft); }
:root[data-theme="dark"] .nav-avatar { background: #232730; }
:root[data-theme="dark"] .nav-avatar-fallback { color: var(--c-text-mut); }
:root[data-theme="dark"] .nav-username { color: var(--c-text); }
:root[data-theme="dark"] .nav-logout { color: var(--c-text-soft); }
:root[data-theme="dark"] .nav-logout:hover { color: var(--c-danger); background: rgba(232,96,96,0.08); }

@media (max-width: 860px) {
    :root[data-theme="dark"] .nav-right { background: var(--c-bg-elev); border-bottom: 1px solid var(--c-border-soft); box-shadow: 0 14px 32px rgba(0,0,0,0.45); }
    :root[data-theme="dark"] .nav-user { background: var(--c-bg-soft); }
}

/* Buttons dark */
:root[data-theme="dark"] .btn-primary { background: var(--c-primary); color: var(--c-on-primary); border-color: var(--c-primary); }
:root[data-theme="dark"] .btn-primary:hover { background: var(--c-primary-hover); }
:root[data-theme="dark"] .btn-secondary { background: transparent; color: var(--c-text); border-color: var(--c-border); }
:root[data-theme="dark"] .btn-secondary:hover { border-color: var(--c-text); }
:root[data-theme="dark"] .btn-ghost { background: transparent; color: var(--c-text); border-color: var(--c-border); }
:root[data-theme="dark"] .btn-ghost:hover { background: var(--c-bg-soft); }
:root[data-theme="dark"] .btn-danger { background: var(--c-danger); }

/* Glass surfaces */
:root[data-theme="dark"] .wallet-card,
:root[data-theme="dark"] .tx-list,
:root[data-theme="dark"] .empty-state,
:root[data-theme="dark"] .topup-card,
:root[data-theme="dark"] .modal,
:root[data-theme="dark"] .cookie-banner {
    backdrop-filter: blur(var(--c-surface-blur));
    -webkit-backdrop-filter: blur(var(--c-surface-blur));
    box-shadow: var(--c-surface-shadow), inset 0 1px 0 var(--c-surface-highlight);
}

:root:not([data-theme="dark"]) .wallet-card,
:root:not([data-theme="dark"]) .tx-list,
:root:not([data-theme="dark"]) .empty-state,
:root:not([data-theme="dark"]) .topup-card {
    backdrop-filter: blur(var(--c-surface-blur));
    -webkit-backdrop-filter: blur(var(--c-surface-blur));
    box-shadow: var(--c-surface-shadow), inset 0 1px 0 var(--c-surface-highlight);
}

/* Wallet card dark overrides */
:root[data-theme="dark"] .balance-card {
    background: var(--c-balance-card-bg);
    border-color: var(--c-balance-card-border);
}
:root[data-theme="dark"] .balance-label { color: var(--c-balance-card-mut); }
:root[data-theme="dark"] .balance-amount { color: var(--c-balance-card-text); }
:root[data-theme="dark"] .balance-currency { color: var(--c-balance-card-mut); }

/* Tx list dark */
:root[data-theme="dark"] .tx-list { background: var(--c-bg-elev); border-color: var(--c-border); }
:root[data-theme="dark"] .tx-item { border-bottom-color: var(--c-border-soft); }
:root[data-theme="dark"] .tx-item:hover { background: var(--c-bg-soft); }
:root[data-theme="dark"] .tx-title { color: var(--c-text); }
:root[data-theme="dark"] .tx-date  { color: var(--c-text-soft); }
:root[data-theme="dark"] .tx-icon  { background: var(--c-bg-soft); border-color: var(--c-border); }

/* Form dark */
:root[data-theme="dark"] .field input,
:root[data-theme="dark"] .field textarea,
:root[data-theme="dark"] .field select {
    background: var(--c-bg-soft); border-color: var(--c-border); color: var(--c-text);
}
:root[data-theme="dark"] .field input:focus { border-color: var(--c-text); }
:root[data-theme="dark"] .field-label { color: var(--c-text-mut); }

/* Toast dark */
:root[data-theme="dark"] .toast { box-shadow: var(--c-shadow-toast); background: var(--c-bg-elev); color: var(--c-text); border-color: var(--c-border); }

/* Wallet amounts */
:root[data-theme="dark"] .tx-amount-credit { color: var(--c-credit-text); }
:root[data-theme="dark"] .tx-amount-debit  { color: var(--c-debit-text); }

/* Back link */
.mio-back-link {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 500;
    color: var(--c-text-mut); text-decoration: none;
    transition: color 0.3s;
}
.mio-back-arrow { display: inline-block; position: relative; left: 0; font-size: 15px; transition: left 0.35s ease; }
.mio-back-text  { display: inline-block; border-bottom: 1.5px solid transparent; transition: border-color 0.35s; }
.mio-back-link:hover { color: var(--c-text); }
.mio-back-link:hover .mio-back-arrow { left: -6px; }
.mio-back-link:hover .mio-back-text  { border-bottom-color: currentColor; }

/* Nav explicit light */
.nav-brand { color: var(--c-text); }
.nav-link { color: var(--c-text-mut); }
.nav-link:hover { color: var(--c-text); background: var(--c-bg-soft); }
.nav-link.active { color: var(--c-text); background: var(--c-bg-soft); }
.nav-user { border-color: var(--c-border); }
.nav-user:hover, .nav-user.active { background: var(--c-bg-soft); }
.nav-avatar { background: var(--c-bg-soft); }
.nav-avatar-fallback { color: var(--c-text-mut); }
.nav-username { color: var(--c-text); }
.nav-logout { color: var(--c-text-soft); }
.nav-logout:hover { color: var(--c-danger); background: var(--c-debit-bg); }

@media (max-width: 860px) {
    .nav-right { background: var(--c-bg-elev); border-bottom-color: var(--c-border-soft); }
}

/* Navbar both themes */
:root[data-theme="dark"] .navbar,
:root:not([data-theme="dark"]) .navbar { background: var(--c-bg-elev); }