/* =========================================
   VSE PROTOCOL - APEX TERMINAL DASHBOARD
   ========================================= */

.dashboard {
    margin-top: 80px;
    padding: 60px 4vw; /* Faltól falig dinamikus padding */
    width: 100%;
    
    /* BRUTALIST RESET: Nincsenek kerekített sarkok! */
    border-radius: 0; 
    
    /* Kőkemény, mélyfekete ipari háttér, enyhe üveghatással */
    background: rgba(2, 3, 5, 0.95);
    backdrop-filter: blur(20px);
    
    /* Pengeéles felső és alsó neon szegély, mint egy valódi terminálon */
    border-top: 4px solid var(--accent);
    border-bottom: 4px solid var(--accent);
    border-left: none;
    border-right: none;
    
    /* Mély belső árnyék, hogy a terminál "beleolvadjon" a monitorba */
    box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.9), 0 20px 50px rgba(0, 0, 0, 0.8);
    
    /* Betöltési animáció */
    animation: dashboardFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Ha a dashboard el van rejtve (Még nincs csatlakoztatva a tárca) */
.dashboard.hidden {
    display: none;
}

/* Kőkemény felcsapódó animáció */
@keyframes dashboardFadeIn {
    0% { opacity: 0; transform: translateY(40px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Címkék (pl. Total Supply felirat) - Tech kód stílus */
.metric-small {
    font-size: 14px;
    color: var(--accent); /* Legyen neon zöld a címke is a kontraszt miatt */
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 900;
    font-family: 'Space Mono', monospace;
    margin-bottom: 12px;
    display: block;
}

/* Élő adatok (Maguk a számok és egyenlegek) - Faltól falig méretre lőve */
.metric-big {
    font-size: clamp(32px, 4vw, 56px); /* Hatalmas számok nagy monitoron */
    font-weight: 900;
    font-family: 'Space Mono', monospace;
    color: var(--text);
    letter-spacing: -2px;
    line-height: 1;
    
    /* Éles ragyogás az élő adatoknak */
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    word-break: break-all;
}

/* Kiemelt (Zöld) mérőszámok - pici plusz az élő érzésért */
.metric-big.accent {
    color: var(--accent);
    text-shadow: 0 0 25px rgba(60, 255, 155, 0.6);
}

/* Grafikonok tartálya - Hatalmasra nyitva */
canvas {
    width: 100% !important;
    height: 350px !important; /* Nagyobb felület a profi adatelemzéshez */
    filter: drop-shadow(0 0 15px rgba(60, 255, 155, 0.1)); /* Enyhe neon aura a grafikon alatt */
}

/* Mobil optimalizálás a Dashboard belső elemeinek */
@media (max-width: 900px) {
    .dashboard {
        padding: 40px 5vw;
        border-top: 2px solid var(--accent);
        border-bottom: 2px solid var(--accent);
    }
    .metric-small {
        font-size: 12px;
    }
    .metric-big {
        letter-spacing: -1px;
    }
    canvas {
        height: 250px !important;
    }
}