/* ═══════════════════════════════════════════
   BCMonster Premium Effects — Shared Styles
   Import on any page for glassmorphism, glow, and depth effects
   ═══════════════════════════════════════════ */

/* ── CSS Variables ── */
:root, [data-theme="dark"] {
    --card-shadow: 0 4px 24px rgba(0,0,0,0.35), 0 0 0 1px rgba(65,105,225,0.08);
    --card-glow: 0 0 30px rgba(65,105,225,0.06);
    --glass: rgba(15, 25, 50, 0.55);
    --glass-border: rgba(65, 105, 225, 0.12);
    --glass-blur: blur(10px);
}

[data-theme="light"] {
    --card-shadow: 0 4px 20px rgba(30,64,175,0.08), 0 1px 3px rgba(0,0,0,0.06);
    --card-glow: 0 0 30px rgba(65,105,225,0.06);
    --glass: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(65, 105, 225, 0.15);
    --glass-blur: blur(10px);
}

/* ── Ambient Background Glow ── */
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        radial-gradient(800px circle at 20% 30%, rgba(30,64,175,0.15) 0%, transparent 60%),
        radial-gradient(600px circle at 80% 70%, rgba(37,99,235,0.12) 0%, transparent 60%),
        radial-gradient(900px circle at 60% 20%, rgba(65,105,225,0.1) 0%, transparent 60%),
        radial-gradient(400px circle at 40% 80%, rgba(96,165,250,0.08) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

[data-theme="light"] body::before {
    background:
        radial-gradient(800px circle at 20% 30%, rgba(30,64,175,0.1) 0%, transparent 60%),
        radial-gradient(600px circle at 80% 70%, rgba(37,99,235,0.08) 0%, transparent 60%),
        radial-gradient(900px circle at 60% 20%, rgba(65,105,225,0.06) 0%, transparent 60%);
}

/* ── Glass Cards ── */
.table-card, .card, .stat-card {
    background: var(--glass) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--card-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.table-card:hover, .card:hover, .stat-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--card-shadow), 0 0 15px rgba(65,105,225,0.04);
}

/* ── Glass Table Headers (only if no explicit background set) ── */
th:not([style*="background"]), thead th:not([style*="background"]) {
    backdrop-filter: blur(12px);
}

/* ── Table Row Hover ── */
tbody tr:hover td {
    background: rgba(65,105,225,0.025);
}

tbody tr:nth-child(even) td {
    background: rgba(65,105,225,0.015);
}

tbody tr:nth-child(even):hover td {
    background: rgba(65,105,225,0.03);
}

[data-theme="light"] tbody tr:hover td {
    background: rgba(65,105,225,0.03);
}

/* ── Table Row Left Accent on Hover ── */
tbody tr { position: relative; }

tbody tr:hover td:first-child::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0; width: 3px;
    background: linear-gradient(to bottom, #4169E1, #60a5fa);
    border-radius: 0 2px 2px 0;
}

/* ── Hero / Header Glass ── */
.hero, .controls, .stats {
    position: relative;
    z-index: 1;
}

/* ── Rank Badge Metallic ── */
.rank-1 {
    background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
    color: #451a03 !important;
    box-shadow: 0 3px 12px rgba(251,191,36,0.5), inset 0 1px 0 rgba(255,255,255,0.3) !important;
}

.rank-2 {
    background: linear-gradient(135deg, #e2e8f0, #94a3b8) !important;
    color: #1e293b !important;
    box-shadow: 0 3px 12px rgba(148,163,184,0.4), inset 0 1px 0 rgba(255,255,255,0.5) !important;
}

.rank-3 {
    background: linear-gradient(135deg, #fb923c, #ea580c) !important;
    color: #fff !important;
    box-shadow: 0 3px 12px rgba(234,88,12,0.5), inset 0 1px 0 rgba(255,255,255,0.2) !important;
}

/* ── Badge Glow ── */
.badge-confirmed { box-shadow: 0 0 10px rgba(16,185,129,0.25); }
.badge-pending { box-shadow: 0 0 10px rgba(245,158,11,0.25); }
.badge-pool { box-shadow: 0 0 8px rgba(139,92,246,0.2); }
.badge-solo { box-shadow: 0 0 8px rgba(236,72,153,0.2); }

/* ── Footer Top Edge Glow ── */
footer { position: relative; }
footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(96,165,250,0.6), rgba(59,130,246,1), rgba(96,165,250,0.6), transparent);
    box-shadow: 0 0 20px rgba(59,130,246,0.4);
}

/* ── Content above bg layers ── */
.wrap, .container, footer, main { position: relative; z-index: 1; }

/* ── Custom Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(65,105,225,0.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(65,105,225,0.35); }

/* ── Tabular Numbers ── */
td, .stat-val, .diff {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* ── Spinner Glow ── */
.spinner, .fa-spin {
    filter: drop-shadow(0 0 8px rgba(65,105,225,0.3));
}

/* ── Coin Badge Glass ── */
.badge-coin {
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.1);
}

/* ── Search Input Focus Glow ── */
input[type="text"]:focus, .search-input:focus {
    box-shadow: 0 0 0 3px rgba(65,105,225,0.2), 0 4px 24px rgba(65,105,225,0.15) !important;
    border-color: #4169E1 !important;
}

/* ── Tab Pill Active Glow ── */
.tab-pill.active, .tab.active, button.active {
    box-shadow: 0 2px 12px rgba(65,105,225,0.3);
}

/* ── Paging Button Hover ── */
.pg:hover, .pager button:hover {
    box-shadow: 0 2px 8px rgba(65,105,225,0.2);
}

/* ── Unified Theme Toggle (matches index.html) ── */
.toggle-switch, .theme-tog, .theme-toggle {
    position: relative;
    width: 51px !important;
    height: 31px !important;
    background: var(--border, #334155);
    border-radius: 31px !important;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border: none !important;
    padding: 0 !important;
    display: inline-block;
}
.toggle-switch:hover, .theme-tog:hover, .theme-toggle:hover {
    opacity: 0.9;
}
.toggle-switch.active, .toggle-switch.on,
.theme-tog.active, .theme-tog.on,
.theme-toggle.active, .theme-toggle.on {
    background: var(--primary, #4169E1) !important;
}
.toggle-slider, .tog-knob, .toggle-switch::after, .theme-tog::after, .theme-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 27px;
    height: 27px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.toggle-switch.active .toggle-slider, .toggle-switch.on .toggle-slider,
.toggle-switch.active::after, .toggle-switch.on::after,
.theme-tog.active .tog-knob, .theme-tog.on .tog-knob,
.theme-tog.active::after, .theme-tog.on::after,
.theme-toggle.active .toggle-slider, .theme-toggle.on .toggle-slider,
.theme-toggle.active::after, .theme-toggle.on::after {
    transform: translateX(20px);
}
.toggle-icon, .tog-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.875rem;
    transition: opacity 0.3s ease;
    z-index: 1;
}
.toggle-icon.sun, .tog-icon.sun {
    left: 6px;
    opacity: 0;
}
.toggle-icon.moon, .tog-icon.moon {
    right: 6px;
    opacity: 1;
    color: #fbbf24;
}
.toggle-switch.active .toggle-icon.sun, .toggle-switch.on .toggle-icon.sun,
.theme-tog.active .tog-icon.sun, .theme-tog.on .tog-icon.sun,
.theme-toggle.active .toggle-icon.sun, .theme-toggle.on .toggle-icon.sun {
    opacity: 1;
    color: #fbbf24;
}
.toggle-switch.active .toggle-icon.moon, .toggle-switch.on .toggle-icon.moon,
.theme-tog.active .tog-icon.moon, .theme-tog.on .tog-icon.moon,
.theme-toggle.active .toggle-icon.moon, .theme-toggle.on .toggle-icon.moon {
    opacity: 0;
}