/* Enhanced Chart Styling - Dark Theme matching mockup */

/* Chart Container Enhancements */
.chart-container {
    background: #131722 !important;
    border: 1px solid #1a2332 !important;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

/*.chart-container {*/
/*    background: #1a2b47 !important;*/
/*    border: 1px solid #1a2332 !important;*/
/*    border-radius: 8px;*/
/*    position: relative;*/
/*    overflow: hidden;*/
/*}*/
/* Chart watermark styling */
.chart-watermark {
    position: absolute !important;
    bottom: 20px !important;
    left: 20px !important;
    color: #1a2332 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    opacity: 0.6 !important;
    pointer-events: none !important;
    z-index: 1 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Enhanced Chart Toolbar */
/*#chartToolbar {*/
/*    position: absolute;*/
/*    top: 10px;*/
/*    left: 10px;*/
/*    z-index: 20;*/
/*    background: rgba(26, 35, 50, 0.9) !important;*/
/*    backdrop-filter: blur(10px);*/
/*    border: 1px solid #1a2332;*/
/*    border-radius: 8px;*/
/*    padding: 8px;*/
/*    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);*/
/*}*/

/*#chartToolbar .chart-tool-btn {*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    width: 36px;*/
/*    height: 36px;*/
/*    border-radius: 6px;*/
/*    background: transparent;*/
/*    border: none;*/
/*    color: #7c8894;*/
/*    transition: all 0.2s ease;*/
/*    cursor: pointer;*/
/*    margin: 2px 0;*/
/*}*/

/*#chartToolbar .chart-tool-btn:hover {*/
/*    background: rgba(255, 255, 255, 0.1);*/
/*    color: #ffffff;*/
/*    transform: scale(1.05);*/
/*}*/

/*#chartToolbar .chart-tool-btn.active {*/
/*    background: #0084ff;*/
/*    color: #ffffff;*/
/*    box-shadow: 0 0 8px rgba(0, 132, 255, 0.4);*/
/*}*/

/* Price display enhancements */
.price-large {
    /*font-family: 'Courier New', Monaco, monospace !important;*/
    font-weight: 700 !important;
    font-size: 1.8rem !important;
    letter-spacing: -0.02em;
    text-shadow: 0 0 8px rgba(240, 185, 11, 0.3);
}

/* Statistics grid enhancements */
.stats-grid {
    background: rgba(10, 20, 33, 0.8) !important;
    border: 1px solid #1a2332;
    border-radius: 8px;
    padding: 16px;
    backdrop-filter: blur(10px);
}

.stats-grid > div {
    padding: 8px;
    border-radius: 6px;
    background: rgba(26, 35, 50, 0.5);
    border: 1px solid #1a2332;
    transition: all 0.2s ease;
}

.stats-grid > div:hover {
    background: rgba(26, 35, 50, 0.8);
    transform: translateY(-1px);
}

/* Tab styling enhancements */
.tab-active {
    color: #00d4aa !important;
    border-bottom: 2px solid #00d4aa !important;
    background: rgba(0, 212, 170, 0.1) !important;
    border-radius: 4px 4px 0 0;
}

/* Trading section enhancements */
.trading-section {
    background: linear-gradient(135deg, #0a1421 0%, #1a2332 100%) !important;
    border: 1px solid #1a2332 !important;
    border-radius: 12px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Enhanced button styling */
.btn-up, .btn-down {
    position: relative;
    overflow: hidden;
    font-weight: 600;
    font-size: 16px;
    border-radius: 10px;
    padding: 16px 24px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/*.btn-up {*/
/*    background: linear-gradient(135deg, #00d4aa 0%, #00b894 100%);*/
/*    border: none;*/
/*    color: #ffffff;*/
/*}*/

/*.btn-down {*/
/*    background: linear-gradient(135deg, #ff6b6b 0%, #e55656 100%);*/
/*    border: none;*/
/*    color: #ffffff;*/
/*}*/

.btn-up:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 212, 170, 0.4);
}

.btn-down:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);
}

.btn-up:active:not(:disabled),
.btn-down:active:not(:disabled) {
    transform: translateY(0);
}

/* Disabled button state */
.btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
    background: #374151 !important;
}

/* Enhanced form controls */
.custom-select, .custom-input {
    background: rgba(26, 35, 50, 0.8) !important;
    border: 1px solid #1a2332 !important;
    border-radius: 8px;
    color: #ffffff !important;
    transition: all 0.2s ease;
}

.custom-select:focus, .custom-input:focus {
    border-color: #00d4aa !important;
    box-shadow: 0 0 0 3px rgba(0, 212, 170, 0.1) !important;
    outline: none !important;
}

/* Countdown timer enhancement */
.countdown-timer {
    font-family: 'Courier New', Monaco, monospace !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: #f0b90b !important;
    text-shadow: 0 0 8px rgba(240, 185, 11, 0.5);
    background: rgba(240, 185, 11, 0.1);
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid rgba(240, 185, 11, 0.2);
}

/* History section enhancements */
.history-row {
    background: rgba(10, 20, 33, 0.6) !important;
    border: 1px solid #1a2332 !important;
    border-radius: 8px;
    margin-bottom: 8px;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.history-row:hover {
    background: rgba(26, 35, 50, 0.8) !important;
    transform: translateY(-1px);
    border-left: 3px solid #00d4aa;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Loading spinner enhancement */
.loading-spinner {
    border: 3px solid #1a2332 !important;
    border-top: 3px solid #00d4aa !important;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Color classes for P&L */
.win-text, .pnl-positive {
    color: #00d4aa !important;
    font-weight: 600;
}

.lose-text, .pnl-negative {
    color: #ff6b6b !important;
    font-weight: 600;
}

/* Pagination enhancements */
.pagination button {
    background: rgba(26, 35, 50, 0.8) !important;
    border: 1px solid #1a2332 !important;
    color: #7c8894 !important;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.pagination button:hover,
.pagination button.active {
    background: #00d4aa !important;
    color: #ffffff !important;
    border-color: #00d4aa !important;
    transform: translateY(-1px);
}

/* Modal enhancements */
/*.modal-backdrop {*/
/*    background: rgba(0, 0, 0, 0.8) !important;*/
/*    backdrop-filter: blur(8px) !important;*/
/*}*/

/* Result modal specific styling */
.result-modal-container {
    background: linear-gradient(135deg, #0a1421 0%, #1a2332 100%);
    border: 2px solid #1a2332;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(20px);
}

/* Animation keyframes */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes glow {
    0%, 100% { 
        box-shadow: 0 0 5px rgba(0, 212, 170, 0.5);
    }
    50% { 
        box-shadow: 0 0 20px rgba(0, 212, 170, 0.8);
    }
}

@keyframes pulse {
    0%, 100% { 
        transform: scale(1);
        opacity: 1;
    }
    50% { 
        transform: scale(1.05);
        opacity: 0.9;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #chartToolbar {
        top: 5px;
        left: 5px;
        padding: 6px;
    }
    
    #chartToolbar .chart-tool-btn {
        width: 32px;
        height: 32px;
        margin: 1px 0;
    }
    
    .price-large {
        font-size: 1.5rem !important;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px;
        padding: 12px;
    }
    
    .btn-up, .btn-down {
        padding: 12px 16px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .chart-container {
        border-radius: 4px;
    }
    
    .countdown-timer {
        font-size: 1rem !important;
    }
    
    .view-title {
        font-size: 1rem !important;
    }
}