/* ═══════════════════════════════════════════════════════════════
   IDEX Mobile UX — overrides MOBILE-ONLY (max-width: 768px)
   Desktop fica intocado.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* ─── A) Cards compactos: padding/margem/borda ─── */
    .idex-api-widget {
        padding: 14px 12px !important;
        border-radius: 12px !important;
        border: none !important;
        box-shadow: 0 1px 4px rgba(13, 38, 76, 0.06);
        margin: 0 !important;
    }
    .idex-api-widgets {
        gap: 14px !important;
        margin-top: 10px !important;
        padding: 0 8px;
    }
    .idex-api-widget h2 {
        font-size: 16px !important;
        line-height: 1.3 !important;
        font-weight: 600 !important;
        margin: 0 0 4px 0 !important;
        letter-spacing: -0.01em;
    }
    .idex-api-widget__meta {
        font-size: 13px !important;
        line-height: 1.45 !important;
        color: rgba(29,29,32,0.62) !important;
        margin: 0 0 8px 0 !important;
    }

    /* ─── B) Chart container: altura útil maior, padding zero ─── */
    .idex-api-widget__chart {
        min-height: 280px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .idex-api-widget:has([id$="-performance"]) .idex-api-widget__chart,
    .idex-api-widget:has([id$="-secondary"]) .idex-api-widget__chart {
        min-height: 320px !important;
    }
    .idex-api-widget:has([id$="-summary"]) .idex-api-widget__chart {
        min-height: auto !important;
    }

    /* ─── C) "Como ler" accordion (JS adiciona .is-collapsed) ─── */
    .idex-api-widget__meta.is-collapsible {
        max-height: 2.9em;
        overflow: hidden;
        position: relative;
        padding-right: 0 !important;
        transition: max-height 280ms ease;
    }
    .idex-api-widget__meta.is-expanded {
        max-height: 60em;
    }
    .idex-api-widget__expand-meta,
    .idex-api-widget__expand-meta:hover,
    .idex-api-widget__expand-meta:focus,
    .idex-api-widget__expand-meta:focus-visible,
    .idex-api-widget__expand-meta:active {
        background: none !important;
        border: none !important;
        padding: 4px 0 0 !important;
        color: #0080ff !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        cursor: pointer !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        font-family: inherit !important;
        text-decoration: none !important;
        outline: none !important;
    }
    .idex-api-widget__expand-meta:focus-visible {
        outline: 2px solid rgba(0, 128, 255, 0.4) !important;
        outline-offset: 2px !important;
    }
    .idex-api-widget__expand-meta::after {
        content: '▾';
        font-size: 10px;
        transition: transform 180ms ease;
    }
    .idex-api-widget__expand-meta[aria-expanded="true"]::after {
        transform: rotate(180deg);
    }

    /* ─── D) Plotly legend/ticks compactos (overrides via JS relayout
            já fazem boa parte; aqui é só fontes finais via CSS) ─── */
    .js-plotly-plot .gtitle,
    .js-plotly-plot .legend text {
        font-size: 11px !important;
    }
    .js-plotly-plot .xtick text,
    .js-plotly-plot .ytick text {
        font-size: 11px !important;
    }

    /* ─── E) Grid de 2 colunas (full-width charts) ─── */
    .idex-api-widgets {
        grid-template-columns: 1fr !important;
    }

    /* ─── F) Tabelas "Top variações" — viram cards no mobile ─── */
    .idex-api-tables {
        margin-top: 18px !important;
    }
    .idex-api-tables__grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .idex-api-table-card {
        padding: 12px 10px !important;
        border-radius: 10px !important;
        border: none !important;
        box-shadow: 0 1px 4px rgba(13, 38, 76, 0.06);
    }
    .idex-api-table-card h3 {
        font-size: 15px !important;
        margin: 0 0 8px 0 !important;
        font-weight: 600 !important;
    }
    /* tabela horizontal vira lista vertical */
    .idex-api-table-card__content table {
        display: block !important;
        width: 100% !important;
    }
    .idex-api-table-card__content thead,
    .idex-api-table-card__content tr.idex-pv-table__head {
        display: none !important;
    }
    .idex-api-table-card__content tbody {
        display: block !important;
    }
    .idex-api-table-card__content tr {
        display: grid !important;
        grid-template-columns: 1.4fr 1fr 1fr !important;
        gap: 4px 8px !important;
        padding: 10px 4px !important;
        border-bottom: 1px solid rgba(0,0,0,0.06) !important;
        align-items: center !important;
    }
    .idex-api-table-card__content tr:last-child {
        border-bottom: none !important;
    }
    .idex-api-table-card__content tr.idex-pv-table__total,
    .idex-api-table-card__content tr.total {
        background: rgba(0,128,255,0.04) !important;
        border-radius: 8px !important;
        padding: 12px 8px !important;
        margin-top: 6px !important;
    }
    .idex-api-table-card__content td {
        padding: 0 !important;
        border: none !important;
        font-size: 13px !important;
        line-height: 1.35 !important;
        white-space: normal !important;
        word-break: break-word !important;
    }
    .idex-api-table-card__content td:first-child {
        font-weight: 500 !important;
        color: #1d1d20 !important;
        text-align: left !important;
    }
    .idex-api-table-card__content td:nth-child(2) {
        font-variant-numeric: tabular-nums !important;
        font-weight: 600 !important;
        text-align: right !important;
        color: #0080ff !important;
    }
    .idex-api-table-card__content td:nth-child(3) {
        font-variant-numeric: tabular-nums !important;
        font-weight: 500 !important;
        text-align: right !important;
        color: #1d1d20 !important;
        font-size: 12px !important;
    }

    /* ─── G) Botões de período (segmented control) ─── */
    .idex-api-period {
        font-size: 13px !important;
        padding: 6px 10px !important;
        min-height: 36px !important;
        border-radius: 999px !important;
    }
    .idex-api-period-bar,
    .idex-api-tables__filters {
        display: flex !important;
        gap: 6px !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 2px 0 !important;
    }
    .idex-api-period-bar::-webkit-scrollbar,
    .idex-api-tables__filters::-webkit-scrollbar {
        display: none;
    }

    /* ─── H) Bottom padding pra não cobrir conteúdo com FAB
            (caso esteja em preview ou tema que injete FAB) ─── */
    body.idex-has-mobile-fab .idex-modular-content,
    body.idex-has-mobile-fab .idex-api-widgets {
        padding-bottom: 96px;
    }

    /* ─── I/J) Modal + botão "ampliar" REMOVIDOS
            Marcos já tem .idex-pv-fs-btn (tela cheia) no runtime.
            Manter apenas 1 botão pra não confundir o usuário. ─── */
}

/* ─── Mobile pequeno (≤390px iPhone): ainda mais compacto ─── */
@media (max-width: 390px) {
    .idex-api-widget {
        padding: 12px 10px !important;
    }
    .idex-api-widget h2 {
        font-size: 15px !important;
    }
    .idex-api-widget__chart {
        min-height: 260px !important;
    }
}

/* ─── Auto-hide do header no scroll (MOBILE) ───
   Retrato (largura pequena) OU paisagem (altura curta). A classe
   .idex-hdr-hidden e ligada/desligada pelo idex-mobile-ux.js conforme a
   direcao do scroll. Fora do mobile a classe nao tem efeito (regra so aqui). */
@media (max-width: 768px), (max-height: 500px) {
    .header-home {
        transition: transform .3s ease, background .35s ease, box-shadow .35s ease;
        will-change: transform;
    }
    .header-home.idex-hdr-hidden {
        transform: translateY(-100%);
    }
}