@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Inter:wght@400;700;900&display=swap');

/* GLOBAL BASE */
body {
    font-family: 'Inter', sans-serif;
    background: #060709;
    color: #edf2f7;
}
.font-mono { font-family: 'JetBrains Mono', monospace; }

/* -------------------------------------- */
/*         BINANCE RIGHT SIDEBAR          */
/* -------------------------------------- */

#marketDetailsPane {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Scrollable content inside sidebar */
#sidebarContent {
    flex: 1;
    overflow-y: auto;
}

/* General Binance-style boxes */
.binance-box {
    background: #0c0f13;
    border: 1px solid #1e2329;
    padding: 14px;
    border-radius: 10px;
}

/* Box text */
.label {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 700;
    color: #6b7280;
    margin-bottom: 4px;
}

.value {
    font-size: 14px;
    color: white;
    font-family: 'JetBrains Mono';
    font-weight: 700;
}

.value.small {
    font-size: 11px;
    color: #cbd5e1;
}

.value-big {
    font-size: 22px;
    color: #3b82f6;
    font-family: 'JetBrains Mono';
    font-weight: 800;
}

/* --- UPDATED MOBILE FIXES --- */
@media (max-width: 768px) {
    /* Prevent the entire body from scrolling, only the content area */
    body {
        position: fixed;
        width: 100%;
        height: 100%;
    }

    #marketDetailsPane { display: none !important; }
    
    /* Crucial: Keep flex behavior so chart stays at top and info scrolls below */
    #view-markets { 
        display: flex !important; 
        flex-direction: column;
        height: 100%;
        overflow-y: auto; 
        overflow-x: hidden;
    }

    /* Adjust chart height to leave room for trade info on small screens */
    #chartContainer { 
        height: 40vh; /* Responsive height */
        min-height: 280px; 
        width: 100%;
        flex-shrink: 0; /* Don't let the chart squash */
    }

    /* Prevent tables from stretching the screen width */
    table {
        table-layout: fixed;
        width: 100%;
    }
    
    td {
        word-break: break-all;
    }

    /* Fix padding for the bottom navigation */
    .pb-32 { padding-bottom: 140px !important; }
}

/* --- TEXT TRUNCATION FIXES --- */
#marketTitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

/* Ensure the stats grid doesn't explode on very small screens */
.stat-box {
    min-width: 0; /* Allows flex/grid shrinking */
    padding: 10px 8px;
}
.range-btn.active {
    color: #3b82f6 !important;
    background: rgba(59, 130, 246, 0.1) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}
.stat-value {
    font-size: 11px; /* Slightly smaller for mobile */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* -------------------------------------- */
/*            STAT BOX (MOBILE)           */
/* -------------------------------------- */

.stat-box {
    background: #161b22;
    border: 1px solid #2e3642;
    padding: 12px;
    border-radius: 12px;
}

.stat-label {
    font-size: 8px;
    text-transform: uppercase;
    color: #718096;
    font-weight: 800;
}

.stat-value {
    font-size: 13px;
    color: white;
    font-weight: 700;
    font-family: 'JetBrains Mono';
}

/* -------------------------------------- */
/*                OVERLAYS                */
/* -------------------------------------- */

#portfolioOverlay,
#leaderboardOverlay {
    z-index: 500 !important;
}

/* Scrollbar */
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #1e2329;
    border-radius: 2px;
}

/* -------------------------------------- */
/*      MOBILE OPTIMIZED CHART LEGEND     */
/* -------------------------------------- */

#chartLegend {
    /* Enforce single line horizontal scroll */
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow-x: auto;
    
    /* Smooth scrolling on iOS */
    -webkit-overflow-scrolling: touch;
    
    /* Transitions for fade effect */
    transition: opacity 0.3s ease-in-out;
    
    /* Subtle fade mask on the right edge to indicate scrolling */
    mask-image: linear-gradient(to right, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%);
}

/* Utility to hide scrollbars but allow scrolling */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none;    /* Firefox */
}

/* Visibility States */
.legend-visible { opacity: 1 !important; }
.legend-fade-out { opacity: 0 !important; }

/* The Chips (Pill Shaped) */
.legend-chip {
    flex-shrink: 0; /* IMPORTANT: Prevents items from squishing on mobile */
    display: flex;
    align-items: center;
    gap: 6px;
    
    /* Darker background for contrast over chart lines */
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    
    padding: 4px 10px; /* Comfortable padding */
    border-radius: 100px; /* Pill shape is better for touch */
    
    font-size: 10px;
    font-weight: 700;
    color: #e2e8f0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    
    /* Interaction */
    pointer-events: auto;
    cursor: pointer;
    user-select: none;
}

.legend-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* --- LIVE UPDATE ANIMATIONS --- */

@keyframes flash-green {
    0% { background-color: rgba(34, 197, 94, 0.4); }
    100% { background-color: transparent; }
}

@keyframes flash-red {
    0% { background-color: rgba(239, 68, 68, 0.4); }
    100% { background-color: transparent; }
}

.flash-up {
    animation: flash-green 1s ease-out;
}

.flash-down {
    animation: flash-red 1s ease-out;
}

/* Optimize rendering for numbers */
.tabular-nums {
    font-variant-numeric: tabular-nums;
}

/* --- LIVE UPDATE ANIMATIONS (Paste at bottom of styles.css) --- */

@keyframes flash-green {
    0% { background-color: rgba(34, 197, 94, 0.4); }
    100% { background-color: transparent; }
}

@keyframes flash-red {
    0% { background-color: rgba(239, 68, 68, 0.4); }
    100% { background-color: transparent; }
}

.flash-up {
    animation: flash-green 1s ease-out;
}

.flash-down {
    animation: flash-red 1s ease-out;
}

.tabular-nums {
    font-variant-numeric: tabular-nums;
}

/* Add to styles.css */
.tv-lightweight-charts-price-line-label {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10px !important;
    font-weight: bold !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
}

/* Professional Orange Stop Loss Label on the Y-Axis */
.tv-lightweight-charts-price-line-label {
    background-color: #f97316 !important; /* Orange */
    color: #ffffff !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 10px !important;
    font-weight: bold !important;
    border-radius: 2px !important;
    padding: 2px 4px !important;
}