/* ── Fix mobile overscroll ── */
html {
    overscroll-behavior-x: none;
}
body {
    overscroll-behavior-x: none;
    overflow-x: hidden;
    overflow-y: auto;
}

[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 — padding mínimo no mobile */
    #main-content {
        padding: 0 4px 24px !important;
    }

    /* Reduzir gap entre cards no mobile */
    #main-content [style*="gap: 16px"] {
        gap: 8px !important;
    }

    /* Seções — menos margin inferior */
    #main-content [style*="marginBottom: 36px"] {
        margin-bottom: 20px !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;
    }
}

/* ══════════════════════════════════════════════════════════════════
   ISOLAÇÃO DOS COMPRESSORES (megômetro) — v5
   ══════════════════════════════════════════════════════════════════ */

/* pulso do indicador de isolação no mapa de componentes */
@keyframes iso-pulse-ok {
    0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.45); }
    50%      { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); }
}
@keyframes iso-pulse-warn {
    0%, 100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.55); }
    50%      { box-shadow: 0 0 0 6px rgba(217, 119, 6, 0); }
}
.iso-pulse-ok   { animation: iso-pulse-ok 2.6s ease-in-out infinite; }
.iso-pulse-warn { animation: iso-pulse-warn 1.6s ease-in-out infinite; }

/* marcador das barras de fase desliza ao montar */
@keyframes iso-marker-in {
    from { opacity: 0; transform: translateX(-14px); }
    to   { opacity: 1; transform: translateX(0); }
}
.iso-marker { animation: iso-marker-in 1.1s cubic-bezier(.22,1,.36,1) both; }

/* hover nos cards de isolação */
[id*="-iso-card-comp"]:hover {
    box-shadow: 0 4px 16px rgba(26, 86, 219, 0.15) !important;
}

/* anel de isolação ao redor do chip IEC no mapa (compressores) */
@keyframes iso-ring-ok-pulse {
    0%, 100% { box-shadow: 0 0 0 2px #16A34A, 0 0 0 2px rgba(22, 163, 74, 0.45); }
    50%      { box-shadow: 0 0 0 2px #16A34A, 0 0 0 9px rgba(22, 163, 74, 0); }
}
@keyframes iso-ring-warn-pulse {
    0%, 100% { box-shadow: 0 0 0 2px #D97706, 0 0 0 2px rgba(217, 119, 6, 0.55); }
    50%      { box-shadow: 0 0 0 2px #D97706, 0 0 0 9px rgba(217, 119, 6, 0); }
}
.iso-ring-ok   { animation: iso-ring-ok-pulse 2.6s ease-in-out infinite; }
.iso-ring-warn { animation: iso-ring-warn-pulse 1.5s ease-in-out infinite; }