[id^="card-ch1-"]:hover,
[id^="card-ch2-"] :hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
}

[id^="card-ch1-"]:hover > [id^="tooltip-ch1-"],
[id^="card-ch2-"]:hover > [id^="tooltip-ch2-"] {
    display: block !important;
}

.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9998;
}

.modal-overlay.open {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Remove Plotly branding / watermark */
.js-plotly-plot .plotly .modebar-container {
    display: none !important;
}

.js-plotly-plot .plotly .credential--text,
.js-plotly-plot .plotly a[rel="noopener noreferrer"],
[class*="modebar"] {
    display: none !important;
}

/* Esconde o badge Plotly e debug menu do Dash */
._dash-loading, .dash-debug-menu {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVO — Mobile & Tablet
   ══════════════════════════════════════════════════════════════════ */

/* ── Viewport meta (Dash não insere por padrão) ── */

/* ── Tablet (≤ 1024px) ── */
@media (max-width: 1024px) {
    /* Conteúdo principal */
    #chiller-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Sidebar config mais estreito */
    #config-sidebar > div {
        width: 300px !important;
    }
}

/* ── Mobile (≤ 768px) ── */
@media (max-width: 768px) {
    /* Header: 1 linha compacta */
    #header-bar {
        padding: 8px 0 !important;
    }
    #header-bar > div:first-child {
        padding: 0 12px !important;
    }

    /* Esconder: separadores, subtítulo, status, logo Merck */
    .header-sep,
    .header-subtitle,
    .header-status,
    .header-merck-logo {
        display: none !important;
    }

    /* Logo Engitek menor */
    .header-left img {
        height: 30px !important;
    }

    /* Título menor */
    .header-title {
        font-size: 15px !important;
    }

    /* Botões menores */
    #btn-lang-pt, #btn-lang-en {
        font-size: 10px !important;
        padding: 3px 7px !important;
    }
    #btn-logout {
        font-size: 10px !important;
        padding: 3px 8px !important;
        margin-left: 6px !important;
    }

    /* Engrenagem menor */
    #btn-config-open {
        font-size: 18px !important;
        margin-left: 6px !important;
    }

    /* Container principal — menos padding */
    [style*="maxWidth: 1400px"] {
        padding: 0 12px 24px !important;
    }

    /* Abas — scroll horizontal, texto menor */
    .tab-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .tab {
        font-size: 11px !important;
        padding: 8px 12px !important;
        white-space: nowrap;
    }

    /* KPI cards — 2 por linha */
    [id*="-card-kpi_"] {
        min-width: calc(50% - 8px) !important;
        flex: 1 1 calc(50% - 8px) !important;
    }

    /* Component cards — full width */
    [id*="-card-comp"], [id*="-card-vent"],
    [id*="-card-bag"], [id*="-card-pressao"],
    [id*="-card-evap"], [id*="-card-cond"] {
        min-width: 100% !important;
        flex: 1 1 100% !important;
    }

    /* Cards internos */
    [id*="-comp1"] > div, [id*="-comp2"] > div, [id*="-comp3"] > div,
    [id*="-vent1"] > div, [id*="-vent2"] > div, [id*="-vent3"] > div,
    [id*="-bag1"] > div, [id*="-pressao"] > div,
    [id*="-evap"] > div, [id*="-cond"] > div {
        min-width: 100% !important;
    }

    /* Sidebar config — full width no mobile */
    #config-sidebar > div {
        width: 92vw !important;
    }

    /* Mapa de componentes — scroll horizontal */
    [id*="-section-mapa_componentes"] > div {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Tabela histórica */
    .dash-spreadsheet-container {
        overflow-x: auto !important;
    }

    /* Gráficos Plotly — altura mínima */
    .js-plotly-plot {
        min-height: 250px;
    }

    /* Dropdowns lado a lado — empilhar */
    [id*="-comp"] [style*="display: flex"][style*="gap: 8px"],
    [id*="-vent"] [style*="display: flex"][style*="gap: 8px"],
    [id*="-bag"] [style*="display: flex"][style*="gap: 8px"] {
        flex-wrap: wrap !important;
    }

    /* Login — ajustar para mobile */
    [id="login-container"] > div {
        width: 90vw !important;
        max-width: 360px !important;
        padding: 24px 20px !important;
    }
}

/* ── Mobile pequeno (≤ 480px) ── */
@media (max-width: 480px) {
    /* KPI cards — 1 por linha */
    [id*="-card-kpi_"] {
        min-width: 100% !important;
        flex: 1 1 100% !important;
    }

    /* Header: logo ainda menor */
    .header-left img {
        height: 26px !important;
    }

    /* Título menor */
    .header-title {
        font-size: 13px !important;
    }

    /* Fontes menores nos KPIs */
    [id*="-card-kpi_"] span[style*="fontSize: 28px"],
    [id*="-card-kpi_"] span[style*="font-size: 28px"] {
        font-size: 22px !important;
    }
}