/* ===================================================================
   Mobile — demais telas (Cobranças, Importar, Meta Ads, Dashboard) e
   resiliência a nomes longos em seletores de corretor.
   Carrega depois de mobile-workflows.css. Sem overflow oculto: o
   conteúdo é reorganizado para caber.
   =================================================================== */

/* ---------- Cobranças: tabela vira lista de cards ---------- */
@media (max-width: 960px) {
    .cobrancas-table { min-width: 0; }
    .cobrancas-table, .cobrancas-table tbody, .cobrancas-table tr, .cobrancas-table td { display: block; width: 100%; box-sizing: border-box; }
    /* cabeçalho continua disponível para leitores de tela */
    .cobrancas-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

    .cobrancas-table tbody tr.cobrancas-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "titulo valor"
            "pessoa pessoa"
            "tipo   status"
            "data   data";
        gap: 6px 12px;
        align-items: center;
        margin: 0 0 10px;
        padding: 12px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--surface, var(--bg-surface));
        cursor: pointer;
    }
    .cobrancas-table tbody tr.cobrancas-row td { padding: 0; border: 0; min-width: 0; }
    .cobrancas-table .cobrancas-td-titulo { grid-area: titulo; font-weight: 700; overflow-wrap: anywhere; white-space: normal; text-overflow: clip; overflow: visible; max-width: none; }
    .cobrancas-table .cobrancas-td-valor { grid-area: valor; justify-self: end; white-space: nowrap; text-align: right; }
    .cobrancas-table .cobrancas-td-pessoa { grid-area: pessoa; overflow-wrap: anywhere; color: var(--text-muted); }
    .cobrancas-table tbody tr.cobrancas-row td:nth-child(2) { grid-area: tipo; }
    .cobrancas-table tbody tr.cobrancas-row td:nth-child(6) { grid-area: status; justify-self: end; width: auto; }
    .cobrancas-table .cobrancas-td-date { grid-area: data; font-size: 12px; color: var(--text-muted); }
    .cobrancas-table .cobrancas-td-date::before { content: attr(data-label) ": "; }

    .cobrancas-table tr.cobrancas-total-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px; }
    .cobrancas-table tr.cobrancas-total-row td { width: auto; padding: 0; border: 0; }
    .cobrancas-table tr.cobrancas-total-row td:empty { display: none; }
}

/* ---------- Importar, Meta Ads, Dashboard ---------- */
@media (max-width: 768px) {
    /* <fieldset> tem min-width: min-content por padrão e crescia além da tela */
    /* minmax(400px, 1fr) fazia a coluna ser maior que a tela */
    #view-importer .import-grid { grid-template-columns: minmax(0, 1fr); }
    #view-importer fieldset.empresa-section { min-width: 0; }
    #view-importer :is(p, label, .import-result) { max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere; }
    #view-importer label.btn-outline { white-space: normal; text-align: center; }

    /* min-width inline (320/260 px) nos cards de gráfico estourava a coluna única */
}

/* ---------- Seletores de corretor com nome muito longo ---------- */
@media (max-width: 760px) {
    #view-imoveis .imoveis-stats-picker,
    #view-imoveis .imoveis-ver-como,
    #planejamento-corretor,
    #view-planejamento .plan-header-actions { min-width: 0; max-width: 100%; box-sizing: border-box; }
    #view-imoveis .imoveis-stats-picker, #planejamento-corretor { width: 100%; text-overflow: ellipsis; }
}

/* ---------- Modal de cobrança ---------- */
@media (max-width: 560px) {
    /* styles.css fixa `.modal { max-height: 85vh !important }`: precisa de !important para a altura dinâmica valer */
    #cobranca-modal .modal { max-height: 100vh !important; max-height: calc(100dvh - 16px) !important; }
    #cobranca-modal .form-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
    #cobranca-modal .form-group { min-width: 0; }
    #cobranca-modal :is(input, select, textarea) { width: 100%; max-width: 100%; box-sizing: border-box; min-height: 44px; font-size: 16px; }
}

/* ---------- Tablet / celular em paisagem (sidebar visível, conteúdo ~600px) ---------- */
@media (max-width: 960px) {
    /* tabela de campanhas: rola dentro do próprio contêiner (rolagem deliberada), sem empurrar a página */
    #view-meta-ads .clientes-table-wrap { min-width: 0; max-width: 100%; overflow-x: auto; }
    /* min-width inline (320/260 px) nos cards de gráfico estourava o conteúdo */
    #view-meta-ads .dashboard-chart-card, #view-dashboard .dashboard-chart-card { min-width: 0 !important; max-width: 100%; box-sizing: border-box; flex: 1 1 260px !important; }
    #view-dashboard .dashboard-charts-row { flex-wrap: wrap; }
    /* meta-ads.css define a linha como grid 1.7fr/1fr: sem isto os dois gráficos ficavam com ~150px e ~90px */
    #view-meta-ads .dashboard-charts-row { grid-template-columns: minmax(0, 1fr); }

    /* Gestões: barra de visão ("Pipeline/Estoque" + "Ver como") quebra linha em vez de passar da tela */
    #view-imoveis .imoveis-view-toggle-row { flex-wrap: wrap; }
    #view-imoveis .imoveis-view-toggle-row > * { min-width: 0; max-width: 100%; }
    #view-imoveis .imoveis-ver-como select, #view-imoveis .imoveis-stats-picker { min-width: 0; max-width: 100%; }
}