/* ==========================================================================
   1. Base Reset & Typography
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Font updated for a cleaner, high-tech feel */
    font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

body {
    /* Background: Deep Void Blue from image_2.png */
    background-color: #050710;
    /* Text: Cyber White */
    color: #e0e6ed;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Prevents ugly double scrollbars on the page */
}

/* ==========================================================================
   2. Header Layout
   ========================================================================== */
.main-header {
    /* Header Background: Darkened interface panel */
    background-color: #0b0f19;
    padding: 15px 25px;
    /* Border: Subtle Cyan line from image_3.png */
    border-bottom: 1px solid #1a2a3a;
    flex-shrink: 0;
    /* Prevents header from shrinking on small screens */
}

.main-header h1 {
    font-size: 1.4rem;
    /* Accent: Electric Blue from image_1.png */
    color: #00d2ff;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
}

.main-header p {
    font-size: 0.85rem;
    /* Sub-text: Dimmed Cyber Gray */
    color: #8899a6;
    margin-top: 2px;
}

/* ==========================================================================
   3. Main Container Layout
   ========================================================================== */
.dashboard-container {
    display: flex;
    flex: 1;
    /* Automatically takes up all remaining vertical space */
    height: calc(100vh - 65px);
    overflow: hidden;
}

/* Sidebar Navigation (Large Screens) */
.market-menu {
    width: 260px;
    /* Sidebar Background: Deep Blue-Gray */
    background-color: #0b0f19;
    /* Border: Matching header divider */
    border-right: 1px solid #1a2a3a;
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}

.market-menu h3 {
    font-size: 0.9rem;
    /* Label Text: Muted Cyan */
    color: #607d8b;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.menu-btn {
    /* Button Background: Slightly lighter than sidebar */
    background-color: #141b2d;
    /* Button Text: Mid-tone Cyan */
    color: #81d4fa;
    border: 1px solid transparent;
    padding: 12px 15px;
    border-radius: 6px;
    text-align: left;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
}

.menu-btn:hover {
    /* Hover state from image_0.png spectrum */
    background-color: #1a2a3a;
    color: #ffffff;
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.3);
}

.menu-btn.active {
    /* Active State: Neon Green highlight from image_2.png */
    background-color: #00e676;
    color: #050710;
    font-weight: 700;
    box-shadow: 0 0 15px rgba(0, 230, 118, 0.5);
    border: 1px solid #00c853;
}

/* Chart Canvas Viewport */
.chart-window {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* Chart area background: Darkest blue */
    background-color: #080a14;
    min-width: 0;
    /* Prevents flex items from overflowing horizontally */
}

#chart-title {
    font-size: 1.2rem;
    font-weight: 500;
    flex-shrink: 0;
    /* Secondary accent: Soft Purple from image_0.png spectrum */
    color: #b39ddb;
}

/* The structural wrapper containing the dynamic iframe */
#tradingview-widget-wrapper {
    flex: 1;
    /* Forces the chart wrapper to fill all remaining height */
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    /* Widget border: Dark Teal */
    border: 1px solid #203a43;
    min-height: 300px;
    /* Ensures chart never squishes flat */
    /* Subtle glow эффект */
    box-shadow: 0 0 20px rgba(0, 210, 255, 0.1) inset;
}

/* ==========================================================================
   4. Mobile Responsive Adaptations (max-width: 768px)
   ========================================================================== */
@media screen and (max-width: 768px) {
    body {
        overflow: hidden;
        /* Lock the viewport so ONLY the menu can scroll horizontally */
    }

    .main-header {
        padding: 12px 15px;
        text-align: center;
    }

    .main-header h1 {
        font-size: 1.1rem;
    }

    .main-header p {
        font-size: 0.75rem;
    }

    /* Stack elements vertically on mobile */
    .dashboard-container {
        flex-direction: column;
    }

    /* Change sidebar to a beautiful horizontal swipe menu */
    .market-menu {
        width: 100%;
        border-right: none;
        /* Horizontal menu border: Dark Teal */
        border-bottom: 1px solid #203a43;
        padding: 10px 15px;
        flex-direction: row;
        overflow-x: auto;
        white-space: nowrap;
        gap: 8px;
        flex-shrink: 0;

        /* Smooth horizontal momentum scroll for touchscreens */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Firefox */
    }

    .market-menu::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari, and Opera */
    }

    .market-menu h3 {
        display: none;
        /* Hide 'Watchlist' label to save precious screen space */
    }

    .menu-btn {
        width: auto;
        flex: 0 0 auto;
        /* Stop mobile buttons from shrinking */
        padding: 10px 16px;
        font-size: 0.85rem;
    }

    /* Chart area adjustments */
    .chart-window {
        padding: 20px;
        flex: 1;
        /* Forces chart area to consume the rest of the mobile viewport */
        gap: 10px;
    }

    #chart-title {
        font-size: 0.95rem;
        text-align: center;
    }

    #tradingview-widget-wrapper {
        min-height: 150px;
        /* Adaptive scale fallback */
    }
}