/* Custom CSS Styles for cryptohub-core Theme */

/* Premium Frosted Glass Panels */
.glass-panel {
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(16, 185, 129, 0.12);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.glass-nav {
    background: rgba(2, 6, 23, 0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(16, 185, 129, 0.08);
}

/* Neon Glow Transitions and Button Pulses */
@keyframes neon-pulse {
    0%, 100% {
        box-shadow: 0 0 5px rgba(16, 185, 129, 0.3), 0 0 15px rgba(16, 185, 129, 0.2);
        border-color: rgba(16, 185, 129, 0.3);
    }
    50% {
        box-shadow: 0 0 15px rgba(16, 185, 129, 0.7), 0 0 25px rgba(16, 185, 129, 0.4);
        border-color: rgba(16, 185, 129, 0.9);
    }
}

.neon-glow-btn {
    animation: neon-pulse 3s infinite ease-in-out;
}

/* Pulsing LED Lights for Active Status Indicators */
@keyframes led-pulse {
    0%, 100% {
        transform: scale(0.9);
        opacity: 0.6;
        box-shadow: 0 0 4px currentColor;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
        box-shadow: 0 0 12px currentColor;
    }
}

.led-indicator {
    animation: led-pulse 2s infinite ease-in-out;
}

/* Cybernetic Grid Matrix Overlays */
.cyber-grid {
    background-image: 
        linear-gradient(to right, rgba(16, 185, 129, 0.035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(16, 185, 129, 0.035) 1px, transparent 1px);
    background-size: 4rem 4rem;
}

/* Marquee Scrolling Keyframes for Trades Ticker Loop */
@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.marquee-content {
    display: flex;
    white-space: nowrap;
    animation: marquee-scroll 28s linear infinite;
}

.marquee-content:hover {
    animation-play-state: paused;
}

/* 3D Dropdown Transitions Helpers */
.perspective-1000 {
    perspective: 1000px;
}

.transform-style-3d {
    transform-style: preserve-3d;
}

.backface-hidden {
    backface-visibility: hidden;
}

/* Conservative vs Aggressive Card Toggle Styling */
.signals-toggle-checkbox:checked + .signals-toggle-slider {
    background-color: #10b981;
}

.signals-toggle-checkbox:checked + .signals-toggle-slider::before {
    transform: translateX(1.5rem);
}

/* Neon scanline overlay effect */
.scanline {
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0) 50%,
        rgba(16, 185, 129, 0.04) 50%,
        rgba(16, 185, 129, 0.04)
    );
    background-size: 100% 4px;
}

/* ==========================================
   Light Mode & Theme Scrolling Variables
   ========================================== */
:root {
    --nav-scroll-bg: rgba(2, 6, 23, 0.95);
    --nav-scroll-border: rgba(16, 185, 129, 0.25);
    --nav-scroll-shadow: rgba(2, 6, 23, 0.7);
}

body.light {
    --nav-scroll-bg: rgba(248, 250, 252, 0.95);
    --nav-scroll-border: rgba(4, 120, 87, 0.15);
    --nav-scroll-shadow: rgba(15, 23, 42, 0.07);
}

/* 1. Global Background & Core Text */
body.light,
.light .bg-slateblack,
.light.bg-slateblack,
.light .bg-slateblack\/95,
.light #page {
    background-color: #f8fafc !important;
    color: #1e293b !important; /* slate-800 */
}

/* 2. Cyber grid gridline colors in light mode */
.light .cyber-grid {
    background-image: 
        linear-gradient(to right, rgba(4, 120, 87, 0.025) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(4, 120, 87, 0.025) 1px, transparent 1px) !important;
}

/* 3. Text and headings colors */
.light h1, 
.light h2, 
.light h3, 
.light h4, 
.light h5, 
.light h6,
.light .text-white {
    color: #0f172a !important; /* slate-900 */
}

.light .text-slate-100,
.light .text-slate-200 {
    color: #1e293b !important;
}

.light .text-slate-300 {
    color: #334155 !important; /* slate-700 */
}

.light .text-slate-400 {
    color: #475569 !important; /* slate-600 */
}

.light .text-slate-500 {
    color: #64748b !important; /* slate-500 */
}

/* 4. Frosted Glass Panels and Navbar */
.light .glass-panel {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-color: rgba(4, 120, 87, 0.18) !important;
    box-shadow: 0 8px 32px 0 rgba(15, 23, 42, 0.06) !important;
}

.light .glass-nav {
    background: rgba(248, 250, 252, 0.85) !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(4, 120, 87, 0.1) !important;
}

/* 5. Glowing radial circles background overlays */
.light [class*="bg-emerald-500/5"],
.light [class*="bg-emerald-500/10"] {
    background-color: rgba(4, 120, 87, 0.03) !important;
}

/* 6. Accent colors: Shift bright neon green to readable Forest Emerald */
.light .text-emerald-400,
.light .text-emerald-500 {
    color: #047857 !important; /* emerald-700 */
}

.light .border-emerald-500\/10,
.light .border-emerald-500\/15,
.light .border-emerald-500\/20,
.light .border-emerald-500\/30,
.light .border-emerald-500\/40 {
    border-color: rgba(4, 120, 87, 0.18) !important;
}

/* 7. Active indicators & custom icon containers */
.light .bg-emerald-500\/10,
.light .bg-emerald-500\/15,
.light .bg-emerald-500\/20 {
    background-color: rgba(4, 120, 87, 0.08) !important;
    color: #047857 !important;
    border-color: rgba(4, 120, 87, 0.18) !important;
}

.light .led-indicator.bg-emerald-400 {
    background-color: #047857 !important;
    color: #047857 !important;
}

/* 8. Card background block overrides */
.light .bg-slate-900\/10,
.light .bg-slate-900\/40,
.light .bg-slate-900\/50 {
    background-color: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(4, 120, 87, 0.12) !important;
}

.light .bg-slate-950,
.light .bg-slate-950\/20,
.light .bg-slate-950\/30,
.light .bg-slate-950\/40,
.light .bg-slate-950\/60,
.light .bg-slate-950\/80 {
    background-color: #f1f5f9 !important; /* light slate-100 */
}

.light .border-slate-800,
.light .border-slate-900 {
    border-color: #e2e8f0 !important;
}

/* 9. Solid Button accents */
.light .bg-emerald-500 {
    background-color: #047857 !important;
    color: #ffffff !important;
}

.light .bg-emerald-500:hover {
    background-color: #065f46 !important;
}

.light .text-slateblack {
    color: #ffffff !important;
}

.light a.bg-emerald-500,
.light button.bg-emerald-500 {
    color: #ffffff !important;
}

.light .shadow-\[0_0_20px_rgba\(16\,185\,129\,0\.25\)\],
.light .shadow-\[0_0_20px_rgba\(16\,185\,129\,0\.3\)\],
.light .shadow-\[0_0_25px_rgba\(16\,185\,129\,0\.3\)\] {
    box-shadow: 0 4px 12px rgba(4, 120, 87, 0.15) !important;
}

/* 10. Specific elements & tables override styling */
.light .bg-emerald-950\/5 {
    background-color: rgba(4, 120, 87, 0.04) !important;
    border-color: rgba(4, 120, 87, 0.25) !important;
}

.light .text-emerald-400\/70 {
    color: rgba(4, 120, 87, 0.8) !important;
}

.light .bg-slate-900 {
    background-color: #ffffff !important;
}

.light input {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

.light input:focus {
    border-color: #047857 !important;
}

.light .marquee-content {
    background-color: #f1f5f9;
}

.light .text-slate-600 {
    color: #94a3b8 !important;
}

.light select {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

.light .border-b-slate-900 {
    border-color: #e2e8f0 !important;
}

/* 11. Special Gradient Text Override */
.light .bg-clip-text {
    background-image: none !important;
    color: #047857 !important;
    -webkit-text-fill-color: #047857 !important;
}

/* Extra visibility: Make sure body font has proper weight and contrasts */
.light p {
    color: #334155 !important;
}
.light strong {
    color: #0f172a !important;
}

/* ==========================================
   Monthly Reports – Horizontal Scroll UX
   ========================================== */

/* Cards never shrink – they keep their full width */
.monthly-reports-scroll > div {
    flex: 0 0 auto;
    min-width: 340px;
    max-width: 380px;
}

/* Custom Scrollbar – always visible, styled */
.monthly-reports-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(16, 185, 129, 0.4) rgba(15, 23, 42, 0.3);
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.monthly-reports-scroll::-webkit-scrollbar {
    height: 6px;
}

.monthly-reports-scroll::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.3);
    border-radius: 999px;
}

.monthly-reports-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #10b981, #059669);
    border-radius: 999px;
}

.monthly-reports-scroll::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, #34d399, #10b981);
}

/* Wrapper with fade gradients on edges */
.monthly-reports-wrapper {
    position: relative;
}

.monthly-reports-wrapper::before,
.monthly-reports-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 6px;
    width: 60px;
    z-index: 5;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.monthly-reports-wrapper::before {
    left: 0;
    background: linear-gradient(to right, rgba(2, 6, 23, 0.95), transparent);
}

.monthly-reports-wrapper::after {
    right: 0;
    background: linear-gradient(to left, rgba(2, 6, 23, 0.95), transparent);
}

/* Light mode fade edges */
.light .monthly-reports-wrapper::before {
    background: linear-gradient(to right, #f1f5f9, transparent) !important;
}

.light .monthly-reports-wrapper::after {
    background: linear-gradient(to left, #f1f5f9, transparent) !important;
}

/* Light mode scrollbar */
.light .monthly-reports-scroll {
    scrollbar-color: rgba(4, 120, 87, 0.4) rgba(241, 245, 249, 0.6);
}

.light .monthly-reports-scroll::-webkit-scrollbar-track {
    background: rgba(241, 245, 249, 0.6);
}

.light .monthly-reports-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #047857, #065f46);
}

/* Navigation Arrow Buttons */
.scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(16, 185, 129, 0.25);
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #10b981;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.scroll-arrow:hover {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.5);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.25);
    transform: translateY(-50%) scale(1.08);
}

.scroll-arrow-left {
    left: -10px;
}

.scroll-arrow-right {
    right: -10px;
}

.light .scroll-arrow {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #047857 !important;
    border-color: rgba(4, 120, 87, 0.2) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

.light .scroll-arrow:hover {
    background: rgba(4, 120, 87, 0.08) !important;
    border-color: rgba(4, 120, 87, 0.4) !important;
}

/* "Drag to scroll" hint text */
.scroll-hint {
    text-align: center;
    margin-top: 12px;
    font-size: 11px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(148, 163, 184, 0.5);
    animation: hint-pulse 3s ease-in-out infinite;
}

@keyframes hint-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

.light .scroll-hint {
    color: rgba(71, 85, 105, 0.5) !important;
}

/* Premium Floating & Interactive Banner Graphic */
.interactive-banner-graphic {
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), filter 0.6s ease;
    animation: banner-float 6s ease-in-out infinite;
    transform-style: preserve-3d;
}

@keyframes banner-float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-12px);
    }
}

.interactive-banner-graphic:hover {
    transform: translateY(-18px) rotateX(4deg) rotateY(-4deg) scale(1.04);
    filter: drop-shadow(0 15px 35px rgba(16, 185, 129, 0.25));
    animation-play-state: paused;
}

/* Fallback solid backgrounds to handle scripts configuration delays */
.bg-slateblack {
    background-color: #020617 !important;
}
.light .bg-slateblack {
    background-color: #f8fafc !important;
}