/* =====================================================
   GLOBAL
===================================================== */

html, body {
    margin: 0;
    padding: 0;
    background-color: #0b0b0b;
    font-family: Arial, sans-serif;
}


/* =====================================================
   HEADER
===================================================== */

.header-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.header-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.header-title {
    font-size: 28px;
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
}


/* =====================================================
   TABS
===================================================== */

.dash-tabs .tab {
    font-size: 14px;
}


/* =====================================================
   TABLE
===================================================== */

.dash-table-container {
    font-size: 14px;
}


/* =====================================================
   CHART / SCROLL
===================================================== */

#chart-scroll-container {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

/* allow pinch zoom */
.js-plotly-plot {
    touch-action: auto;
}


/* =====================================================
   MOBILE (<= 768px)
===================================================== */

@media (max-width: 768px) {

    /* HIDE DOCUMENTATION LINK */
    a[href="/docs"] {
        display: none !important;
    }

    /* HEADER - keep in ONE ROW */
    .header-center {
        flex-direction: row;
        gap: 8px;
    }

    .header-title {
        font-size: 15px !important;
        white-space: nowrap;
    }

    /* smaller icon */
    .header-center img {
        height: 26px;
    }

    /* TEXT */
    p {
        font-size: 13px !important;
    }

    ul {
        font-size: 13px !important;
    }

    h4 {
        font-size: 14px !important;
    }

    /* TABLE */
    .dash-table-container {
        font-size: 12px !important;
    }

    /* 🔥 TABS (BTC / SOL / HBAR...) */
    .dash-tabs .tab {
        font-size: 10px !important;
        padding: 5px 6px !important;
    }

}