/* Market Speed Dashboard Styles */
/* Supports both dark and light themes via prefers-color-scheme */

/* =====================================================
   CSS Variables - Theme Support
   ===================================================== */

/* Light theme (default) */
:root {
    --ms-cockpit-bg: #e8eaed;
    --ms-gauge-bg: #ffffff;
    --ms-gauge-border: #d0d0d8;
    --ms-gauge-arc-bg: #e0e0e8;
    --ms-text-primary: #1a1a2a;
    --ms-text-secondary: rgba(0,0,0,0.6);
    --ms-text-muted: rgba(0,0,0,0.4);
    --ms-led-bg: #f0f0f5;
    --ms-led-border: #c0c0c8;
    --ms-center-fill: #d0d0d8;
    --ms-center-stroke: #b0b0b8;
    --ms-header-bg: rgba(255,255,255,0.95);
    --ms-status-bg: rgba(255,255,255,0.95);
    --ms-price-bg: rgba(0,0,0,0.05);
    --ms-glow-opacity: 0.7;
    --ms-is-dark: 0;
}

/* Dark theme via media query */
@media (prefers-color-scheme: dark) {
    :root {
        --ms-cockpit-bg: #0a0a0f;
        --ms-gauge-bg: #151520;
        --ms-gauge-border: #2a2a3a;
        --ms-gauge-arc-bg: #1a1a2a;
        --ms-text-primary: #ffffff;
        --ms-text-secondary: rgba(255,255,255,0.5);
        --ms-text-muted: rgba(255,255,255,0.3);
        --ms-led-bg: #0a0a0f;
        --ms-led-border: #2a2a3a;
        --ms-center-fill: #2a2a3a;
        --ms-center-stroke: #3a3a4a;
        --ms-header-bg: rgba(20,20,30,0.9);
        --ms-status-bg: rgba(0,0,0,0.8);
        --ms-price-bg: rgba(0,0,0,0.3);
        --ms-glow-opacity: 1;
        --ms-is-dark: 1;
    }
}

/* Support body.dark-theme class (site's actual theme system) */
body.dark-theme {
    --ms-cockpit-bg: #0a0a0f;
    --ms-gauge-bg: #151520;
    --ms-gauge-border: #2a2a3a;
    --ms-gauge-arc-bg: #1a1a2a;
    --ms-text-primary: #ffffff;
    --ms-text-secondary: rgba(255,255,255,0.5);
    --ms-text-muted: rgba(255,255,255,0.3);
    --ms-led-bg: #0a0a0f;
    --ms-led-border: #2a2a3a;
    --ms-center-fill: #2a2a3a;
    --ms-center-stroke: #3a3a4a;
    --ms-header-bg: rgba(20,20,30,0.9);
    --ms-status-bg: rgba(0,0,0,0.8);
    --ms-price-bg: rgba(0,0,0,0.3);
    --ms-glow-opacity: 1;
}

/* Also support data-bs-theme for explicit override */
[data-bs-theme="dark"] {
    --ms-cockpit-bg: #0a0a0f;
    --ms-gauge-bg: #151520;
    --ms-gauge-border: #2a2a3a;
    --ms-gauge-arc-bg: #1a1a2a;
    --ms-text-primary: #ffffff;
    --ms-text-secondary: rgba(255,255,255,0.5);
    --ms-text-muted: rgba(255,255,255,0.3);
    --ms-led-bg: #0a0a0f;
    --ms-led-border: #2a2a3a;
    --ms-center-fill: #2a2a3a;
    --ms-center-stroke: #3a3a4a;
    --ms-header-bg: rgba(20,20,30,0.9);
    --ms-status-bg: rgba(0,0,0,0.8);
    --ms-price-bg: rgba(0,0,0,0.3);
    --ms-glow-opacity: 1;
}

[data-bs-theme="light"] {
    --ms-cockpit-bg: #e8eaed;
    --ms-gauge-bg: #ffffff;
    --ms-gauge-border: #d0d0d8;
    --ms-gauge-arc-bg: #e0e0e8;
    --ms-text-primary: #1a1a2a;
    --ms-text-secondary: rgba(0,0,0,0.6);
    --ms-text-muted: rgba(0,0,0,0.4);
    --ms-led-bg: #f0f0f5;
    --ms-led-border: #c0c0c8;
    --ms-center-fill: #d0d0d8;
    --ms-center-stroke: #b0b0b8;
    --ms-header-bg: rgba(255,255,255,0.95);
    --ms-status-bg: rgba(255,255,255,0.95);
    --ms-price-bg: rgba(0,0,0,0.05);
    --ms-glow-opacity: 0.7;
}

/* =====================================================
   Page Layout
   ===================================================== */

.marketspeed-page {
    background: var(--ms-cockpit-bg);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 30px;
    position: relative;
    z-index: 1;
}

[data-bs-theme="dark"] .marketspeed-page {
    background-image: 
        radial-gradient(ellipse at top, #1a1a2e 0%, transparent 50%),
        radial-gradient(ellipse at bottom, #0f0f1a 0%, transparent 50%);
}

[data-bs-theme="light"] .marketspeed-page {
    background-image: 
        radial-gradient(ellipse at top, #f0f2f5 0%, transparent 50%),
        radial-gradient(ellipse at bottom, #e0e2e5 0%, transparent 50%);
}

/* =====================================================
   Header
   ===================================================== */

.cockpit-header {
    text-align: center;
    padding: 20px;
    background: var(--ms-header-bg);
    border-bottom: 1px solid var(--ms-gauge-border);
}

.cockpit-title {
    font-family: 'Orbitron', monospace;
    font-size: 2rem;
    font-weight: 900;
    background: linear-gradient(90deg, #ff4444, #ff8800, #ffff00, #44ff44);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 4px;
    text-transform: uppercase;
}

[data-bs-theme="dark"] .cockpit-title {
    text-shadow: 0 0 30px rgba(255,136,0,0.5);
}

.status-bar {
    font-family: 'Orbitron', monospace;
    font-size: 0.75rem;
    color: #00ff88;
    margin-top: 5px;
}

[data-bs-theme="dark"] .status-bar {
    text-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
}

[data-bs-theme="light"] .status-bar {
    color: #00aa55;
}

/* =====================================================
   Gauges Grid
   ===================================================== */

.gauges-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
    padding: 15px 0;
}

@media (max-width: 1400px) {
    .gauges-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 900px) {
    .gauges-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
    .gauges-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================
   Gauge Container
   ===================================================== */

.gauge-container {
    background: #e8e8ec;
    border: 2px solid #d0d0d8;
    border-radius: 15px;
    padding: 15px 10px 10px;
    position: relative;
    box-shadow: 
        inset 0 2px 10px rgba(0,0,0,0.1),
        0 4px 15px rgba(0,0,0,0.1);
}

@media (prefers-color-scheme: dark) {
    .gauge-container {
        background: 
            linear-gradient(180deg, 
                #02020d 0%, 
                #050e33 40%,
                #080829 100%
            );
        border: 2px solid #2a2a3a;
        box-shadow: 
            inset 0 1px 0 rgba(255,255,255,0.05),
            0 4px 15px rgba(0,0,0,0.5);
    }
}

body.dark-theme .gauge-container,
[data-bs-theme="dark"] .gauge-container {
    background: 
        linear-gradient(180deg, 
            #02020d 0%, 
            #050e33 40%,
            #080829 100%
        );
    border: 2px solid #2a2a3a;
    box-shadow: 
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 4px 15px rgba(0,0,0,0.5);
}

[data-bs-theme="light"] .gauge-container {
    background: #e8e8ec;
    border: 2px solid #d0d0d8;
    box-shadow: 
        inset 0 2px 10px rgba(0,0,0,0.1),
        0 4px 15px rgba(0,0,0,0.1);
}

.gauge-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.1), transparent);
    border-radius: 0 0 50% 50%;
}

@media (prefers-color-scheme: dark) {
    .gauge-container::before {
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    }
}

body.dark-theme .gauge-container::before,
[data-bs-theme="dark"] .gauge-container::before {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
}

[data-bs-theme="light"] .gauge-container::before {
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.1), transparent);
}

/* =====================================================
   Coin Header
   ===================================================== */

.coin-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px;
    padding: 0 5px;
    position: relative;
}

.coin-ticker {
    font-family: 'Orbitron', monospace;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ms-text-primary);
    letter-spacing: 3px;
    text-shadow: 0 0 10px rgba(255,255,255,0.3);
}

[data-bs-theme="dark"] .coin-ticker,
body.dark-theme .coin-ticker {
    color: #000000;
    text-shadow: 
        0 0 8px rgb(217, 239, 255),
        0 0 15px rgb(143, 193, 250),
        0 0 25px rgba(124, 174, 253, 0.819);
}

.chart-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.1);
    border: 1px solid var(--ms-gauge-border);
    color: var(--ms-text-secondary);
    padding: 5px 8px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.7rem;
    transition: all 0.2s ease;
}

.chart-btn:hover {
    background: rgba(255,136,0,0.3);
    border-color: #ff8800;
    color: #ff8800;
    transform: translateY(-50%) scale(1.1);
}

/* =====================================================
   Gauge SVG
   ===================================================== */

.gauge-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 60%;
}

.gauge-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.gauge-arc-bg {
    fill: none;
    stroke: var(--ms-gauge-arc-bg);
    stroke-width: 12;
}

.gauge-arc {
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
    opacity: var(--ms-glow-opacity);
}

.gauge-needle {
    fill: #ff3333;
    transform-origin: 100px 100px;
    transition: transform 0.3s cubic-bezier(0.4, 2.0, 0.2, 1);
    filter: drop-shadow(0 0 6px rgba(255,50,50,0.8));
}

[data-bs-theme="light"] .gauge-needle {
    fill: #dd2222;
    filter: drop-shadow(0 0 3px rgba(200,0,0,0.4));
}

.gauge-center {
    fill: var(--ms-center-fill);
    stroke: var(--ms-center-stroke);
    stroke-width: 2;
}

.gauge-center-dot {
    fill: #ff4444;
}

@media (prefers-color-scheme: dark) {
    .gauge-center-dot {
        filter: drop-shadow(0 0 5px #ff4444);
    }
}

body.dark-theme .gauge-center-dot,
[data-bs-theme="dark"] .gauge-center-dot {
    filter: drop-shadow(0 0 5px #ff4444);
}

/* =====================================================
   Tick Marks
   ===================================================== */

.tick-marks line {
    fill: none;
    stroke: rgba(0,0,0,0.3);
    stroke-width: 2;
}

@media (prefers-color-scheme: dark) {
    .tick-marks line {
        stroke: rgba(255,255,255,0.4);
    }
}

body.dark-theme .tick-marks line,
[data-bs-theme="dark"] .tick-marks line {
    stroke: rgba(255,255,255,0.4);
}

[data-bs-theme="light"] .tick-marks line {
    stroke: rgba(0,0,0,0.3);
}

.tick-label {
    font-family: 'Orbitron', monospace;
    font-size: 8px;
    fill: #4488ff !important;
    stroke: none;
    filter: drop-shadow(0 0 3px rgba(68,136,255,0.6));
}

[data-bs-theme="light"] .tick-label {
    fill: #2266cc !important;
    filter: drop-shadow(0 0 2px rgba(34,102,204,0.4));
}

/* =====================================================
   LED Display
   ===================================================== */

.led-display {
    font-family: 'Orbitron', monospace;
    font-size: 1.3rem;
    font-weight: 700;
    text-align: center;
    padding: 8px 5px;
    margin-top: 8px;
    background: var(--ms-led-bg);
    border: 2px solid var(--ms-led-border);
    border-radius: 8px;
    letter-spacing: 3px;
}

@media (prefers-color-scheme: dark) {
    .led-display {
        background: 
            linear-gradient(180deg, 
                #0a0a14 0%, 
                #0f0f1a 50%,
                #080810 100%
            );
        border: 2px solid #3a3a5a;
        box-shadow: 
            inset 0 2px 8px rgba(0,0,0,0.7),
            inset 0 -1px 0 rgba(255,255,255,0.05),
            0 2px 4px rgba(0,0,0,0.3);
    }
}

body.dark-theme .led-display,
[data-bs-theme="dark"] .led-display {
    background: 
        linear-gradient(180deg, 
            #0a0a14 0%, 
            #0f0f1a 50%,
            #080810 100%
        );
    border: 2px solid #3a3a5a;
    box-shadow: 
        inset 0 2px 8px rgba(0,0,0,0.7),
        inset 0 -1px 0 rgba(255,255,255,0.05),
        0 2px 4px rgba(0,0,0,0.3);
}

.led-value {
    transition: color 0.2s;
}

.led-positive { color: #00ff44; }
.led-negative { color: #ff4444; }
.led-neutral { color: #ffaa00; }

@media (prefers-color-scheme: dark) {
    .led-value {
        text-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
    }
}

body.dark-theme .led-value,
[data-bs-theme="dark"] .led-value {
    text-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
}

[data-bs-theme="light"] .led-positive { color: #00aa33; }
[data-bs-theme="light"] .led-negative { color: #dd3333; }
[data-bs-theme="light"] .led-neutral { color: #cc8800; }

/* =====================================================
   Price Display
   ===================================================== */

.price-display {
    font-family: 'Orbitron', monospace;
    font-size: 0.85rem;
    text-align: center;
    margin-top: 8px;
    padding: 6px 8px;
    background: var(--ms-price-bg);
    border: 1px solid var(--ms-led-border);
    border-radius: 6px;
    transition: color 0.3s;
    letter-spacing: 1px;
}

@media (prefers-color-scheme: dark) {
    .price-display {
        background: 
            linear-gradient(180deg, 
                rgba(15,15,25,0.9) 0%, 
                rgba(10,10,18,0.95) 100%
            );
        border: 1px solid #3a3a5a;
        box-shadow: 
            inset 0 1px 4px rgba(0,0,0,0.5),
            0 1px 2px rgba(0,0,0,0.2);
    }
}

body.dark-theme .price-display,
[data-bs-theme="dark"] .price-display {
    background: 
        linear-gradient(180deg, 
            rgba(15,15,25,0.9) 0%, 
            rgba(10,10,18,0.95) 100%
        );
    border: 1px solid #3a3a5a;
    box-shadow: 
        inset 0 1px 4px rgba(0,0,0,0.5),
        0 1px 2px rgba(0,0,0,0.2);
}

.price-up { 
    color: #00aa33; 
}

.price-down { 
    color: #dd3333; 
}

.price-neutral { 
    color: #888888; 
}

@media (prefers-color-scheme: dark) {
    .price-up { 
        color: #00ff44;
        text-shadow: 0 0 8px rgba(0,255,68,0.5);
    }
    .price-down { 
        color: #ff4444;
        text-shadow: 0 0 8px rgba(255,68,68,0.5);
    }
}

body.dark-theme .price-up,
[data-bs-theme="dark"] .price-up {
    color: #00ff44;
    text-shadow: 0 0 8px rgba(0,255,68,0.5);
}

body.dark-theme .price-down,
[data-bs-theme="dark"] .price-down {
    color: #ff4444;
    text-shadow: 0 0 8px rgba(255,68,68,0.5);
}

[data-bs-theme="light"] .price-up { color: #00aa33; }
[data-bs-theme="light"] .price-down { color: #dd3333; }
[data-bs-theme="light"] .price-neutral { color: #666666; }

/* =====================================================
   Connection Status
   ===================================================== */

.connection-status-inline {
    display: inline-block;
    padding: 10px 20px;
    margin: 20px auto;
    background: var(--ms-status-bg);
    border: 1px solid #333;
    border-radius: 20px;
    font-family: 'Orbitron', monospace;
    font-size: 0.75rem;
    text-align: center;
}

.status-connected { 
    color: #00ff44; 
    border-color: #00ff44; 
}

.status-connecting { 
    color: #ffaa00; 
    border-color: #ffaa00; 
}

.status-disconnected { 
    color: #ff4444; 
    border-color: #ff4444; 
}

[data-bs-theme="light"] .status-connected { color: #00aa33; border-color: #00aa33; }
[data-bs-theme="light"] .status-connecting { color: #cc8800; border-color: #cc8800; }
[data-bs-theme="light"] .status-disconnected { color: #dd3333; border-color: #dd3333; }

/* =====================================================
   Animations
   ===================================================== */

/* Pulse animation disabled */
.pulse {
    transform: none;
}

/* =====================================================
   Chart Modal Styling
   ===================================================== */

#chartModal .modal-content {
    border: 1px solid var(--ms-gauge-border);
}

[data-bs-theme="dark"] #chartModal .modal-content {
    background: linear-gradient(180deg, #1a1a2e 0%, #151520 100%);
    border-color: #2a2a4a;
}

#chartModal .modal-header {
    border-bottom: 1px solid var(--ms-gauge-border);
    padding: 15px 20px;
}

#chartModal .modal-title {
    font-family: 'Orbitron', monospace;
    font-weight: 700;
    letter-spacing: 2px;
}

#chartModal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.8;
    padding: 12px;
    margin: -8px -8px -8px auto;
}

[data-bs-theme="light"] #chartModal .btn-close {
    filter: none;
}

#chartModal .btn-close:hover {
    opacity: 1;
}

#chartModal .modal-body {
    padding: 20px;
}

/* =====================================================
   Sparkline
   ===================================================== */

.sparkline-container {
    height: 35px;
    margin: 8px 10px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

body.dark-theme .sparkline-container,
[data-bs-theme="dark"] .sparkline-container {
    background: rgba(0, 0, 0, 0.3);
}

.sparkline-svg {
    width: 100%;
    height: 100%;
}

.sparkline-line {
    fill: none;
    stroke: #4a9eff;
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

/* =====================================================
   Price & Volume Display
   ===================================================== */

.price-volume-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--ms-price-bg);
    border-radius: 8px;
    margin: 5px 5px 0;
    font-family: 'Orbitron', monospace;
}

.price-volume-display .price-display {
    font-size: 0.85rem;
    font-weight: 700;
}

.volume-display {
    font-size: 0.7rem;
    color: var(--ms-text-secondary);
    opacity: 0.8;
}

body.dark-theme .volume-display,
[data-bs-theme="dark"] .volume-display {
    color: rgba(255, 255, 255, 0.5);
}

/* =====================================================
   Mobile Layout - Single Column, Top 6
   ===================================================== */

@media (max-width: 600px) {
    .gauges-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    /* Hide coins beyond top 6 on mobile */
    .gauge-container:nth-child(n+7) {
        display: none;
    }
    
    .gauge-container {
        padding: 12px 8px 8px;
    }
    
    .gauge-svg {
        max-height: 100px;
    }
    
    .sparkline-container {
        height: 28px;
        margin: 5px 8px;
    }
    
    .price-volume-display {
        padding: 6px 10px;
        margin: 3px 3px 0;
    }
    
    .price-volume-display .price-display {
        font-size: 0.8rem;
    }
    
    .volume-display {
        font-size: 0.65rem;
    }
}