/* ═══════════════════════════════════════════════════════════════════════════
   Camada responsiva global (19/10/2026) — carregada por ÚLTIMO.
   Regras gerais para telas pequenas que valem para as ~100 telas do sistema sem
   reescrever cada uma: cabeçalhos e barras de ferramentas quebram linha, abas
   viram faixa com rolagem, grades fixas viram coluna única, tabelas rolam dentro
   do próprio quadro, campos e modais ocupam a largura disponível.
   Medição: scripts de auditoria com Playwright em 390 px (todas as seções).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── tablet e celular ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    html, body { max-width: 100vw; overflow-x: hidden; }
    .main-content { min-width: 0; overflow-x: hidden; }
    .content-section { min-width: 0; max-width: 100%; }

    /* tabelas: rolam dentro do quadro em vez de empurrar a página */
    .main-content table,
    .modal table,
    .card table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .main-content table thead,
    .main-content table tbody { width: 100%; }
    .table-container, .table-wrapper, .table-responsive { overflow-x: auto; max-width: 100%; }

    /* barras de abas: uma faixa só, com rolagem lateral (padrão de app) */
    .tab-bar, .tabs, .nav-tabs, .nav-tabs-radius, .noc-nav-tabs, .tab-pills, .subtabs, .settings-tabs,
    [class*="tab-bar"], [class*="-tabs"]:not(table):not(tbody) {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        max-width: 100%;
    }
    .tab-bar > *, .tabs > *, .nav-tabs > *, .nav-tabs-radius > *, .noc-nav-tabs > *, [class*="tab-bar"] > * { flex: 0 0 auto; white-space: nowrap; }

    /* cabeçalhos de página: título em cima, ações quebrando linha embaixo */
    .page-header, .section-header, .card-header, .page-title-row, .header-actions, .page-actions {
        flex-wrap: wrap !important;
        gap: 8px;
        min-width: 0;
    }
    .page-header > *, .section-header > * { min-width: 0; max-width: 100%; }
    .page-header h1, .page-header h2, .section-header h1, .section-header h2 { font-size: 1.25rem; line-height: 1.25; word-break: normal; }

    /* barras de ferramentas montadas com display:flex no próprio elemento */
    .main-content [style*="display:flex"]:not([style*="nowrap"]):not(.no-wrap),
    .main-content [style*="display: flex"]:not([style*="nowrap"]):not(.no-wrap),
    .modal [style*="display:flex"]:not([style*="nowrap"]),
    .modal [style*="display: flex"]:not([style*="nowrap"]) {
        flex-wrap: wrap;
    }

    /* campos e elementos com largura fixa no estilo: nunca maiores que a tela */
    .main-content input:not([type="checkbox"]):not([type="radio"]),
    .main-content select, .main-content textarea,
    .modal input:not([type="checkbox"]):not([type="radio"]), .modal select, .modal textarea {
        max-width: 100%;
    }
    .main-content [style*="width:"], .main-content [style*="width: "],
    .modal [style*="width:"], .modal [style*="width: "] { max-width: 100%; }
    .main-content [style*="min-width:"], .main-content [style*="min-width: "] { min-width: 0 !important; }
    .main-content img, .main-content canvas, .main-content svg, .main-content video { max-width: 100%; }
    .main-content pre, .main-content code { white-space: pre-wrap; word-break: break-word; }

    /* modais: quase tela cheia */
    .modal {
        width: 100% !important;
        max-width: calc(100vw - 16px) !important;
        margin: 8px auto !important;
        max-height: calc(100vh - 16px);
    }
    .modal .modal-body { max-height: calc(100vh - 130px); overflow: auto; }
    [id^="modal-"] > .card, [id$="-modal"] > .card { max-width: calc(100vw - 16px) !important; }

    /* só o botão de menu da barra superior (as telas tinham um segundo ☰ no título) */
    .content-section .mobile-menu-btn { display: none !important; }

    /* barra superior compacta */
    .topbar { gap: 6px; }
    .topbar .topbar-btn span:not(.badge):not([class*="count"]) { display: none; }
}

/* ── celular ──────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .main-content { padding: 12px 10px !important; }
    .card { padding-left: 12px; padding-right: 12px; }

    /* grades definidas no estilo (repeat(n,1fr), colunas fixas, minmax largos): coluna única */
    .main-content [style*="grid-template-columns"],
    .modal [style*="grid-template-columns"] {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    /* …mas grades de indicadores pequenos (cartões de número) ficam em 2 colunas */
    .main-content [style*="grid-template-columns"][style*="minmax(1"],
    .stats-grid, .kpi-grid, [class*="kpi-grid"], [class*="stats-row"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .main-content [style*="grid-column"] { grid-column: auto !important; }

    /* linhas de painéis lado a lado (mapa + alertas, gráficos) empilham */
    .dashboard-row, .dash-row, .row, .two-col, .grid-2, .grid-3, .charts-row, [class*="-row-2"], [class*="charts-grid"] {
        grid-template-columns: 1fr !important;
        flex-direction: column;
    }

    .btn { white-space: nowrap; }
    .btn-group, .btn-toolbar { flex-wrap: wrap; gap: 6px; }
    h1 { font-size: 1.3rem; }
    h2 { font-size: 1.15rem; }
    h3 { font-size: 1.02rem; }

    /* tabelas largas: célula com texto longo quebra em vez de esticar */
    .main-content td { max-width: 60vw; }
}

/* ── telas muito estreitas ────────────────────────────────────────────────── */
@media (max-width: 400px) {
    .main-content [style*="grid-template-columns"][style*="minmax(1"],
    .stats-grid, .kpi-grid { grid-template-columns: 1fr 1fr !important; }
    .topbar .topbar-btn { padding-left: 6px; padding-right: 6px; }
}

/* ── ajustes pontuais medidos na auditoria ────────────────────────────────── */
@media (max-width: 900px) {
    /* campos de busca/filtro dentro de barras flex: não encolhem até sumir */
    .main-content input[type="text"], .main-content input[type="search"], .main-content input:not([type]),
    .main-content select { min-width: min(100%, 150px) !important; }
    .main-content [style*="display:flex"] > input[type="text"], .main-content [style*="display:flex"] > input[type="search"],
    .main-content [style*="display: flex"] > input[type="text"], .main-content [style*="display: flex"] > input[type="search"] {
        flex: 1 1 180px;
    }
    /* sondas de serviço, filtros do cockpit, sub-abas com texto longo */
    .probe-device-group { max-width: 100%; overflow-x: auto; }
    .noc-p-filters { flex-wrap: wrap !important; max-width: 100%; }
    #cve-subtab-catalog-btn, #cve-subtab-devices-btn { white-space: normal; max-width: 100%; text-align: left; }
    .main-content .mono, .main-content [class*="mono"] { word-break: break-all; }
    .stat-label { white-space: normal; }
    /* topologia: painel de propriedades vira faixa de largura total embaixo do desenho */
    .topo-right, #topo-props { width: 100% !important; max-width: 100% !important; position: static !important; }
    .topo-layout, .topo-container { flex-direction: column !important; }
}
@media (max-width: 900px) {
    .unavailability-card { flex-wrap: wrap; max-width: 100%; min-width: 0; }
    .unavailability-card > * { min-width: 0; max-width: 100%; }
    #monitoring-section .card { max-width: 100%; overflow-x: auto; }
    #topology-section.topo-fullscreen { flex-direction: column !important; height: auto !important; overflow: visible !important; }
    #topology-section .topo-left, #topology-section .topo-right, #topology-section #topo-props { width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; }
    #topology-section .topo-center, #topology-section .topo-canvas-wrap { width: 100% !important; min-height: 60vh; }
    .main-content .card, .main-content .panel { min-width: 0; max-width: 100%; }
}
@media (max-width: 640px) {
    .main-content .mon-kpi-grid-4, .main-content [class*="kpi-grid"], .main-content [class*="stats-grid"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* itens de grade/flex encolhem até a largura da tela (o padrão "min-width:auto" esticava a coluna até o
   tamanho do conteúdo mais largo — ex.: Monitoramento com um cartão de 1.157 px) */
@media (max-width: 900px) {
    .main-content [style*="grid-template-columns"] > *, .main-content [class*="grid"] > *,
    .main-content [style*="display:flex"] > *, .main-content [style*="display: flex"] > * { min-width: 0; }
}

/* botões e abas não encolhem (o texto se sobrepunha — abas do FTTH): quebram linha ou rolam */
@media (max-width: 900px) {
    .main-content button, .main-content .btn, .main-content .tab-btn, .main-content [role="tab"] { flex-shrink: 0; min-width: auto; }
}
/* Workspace CLI no celular: árvore de hosts em cima, terminal embaixo */
@media (max-width: 640px) {
    .cliws-scope .workspace-layout { flex-direction: column; height: auto; min-height: calc(100vh - 48px); }
    .cliws-scope .sidebar { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 42vh; border-right: 0; border-bottom: 1px solid var(--sidebar-border); }
    .cliws-scope .topbar-brand { min-width: 0; border-right: 0; }
    .cliws-scope .import-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    /* Workspace CLI embutido no index (cli-ws-*): árvore em cima, detalhe/terminal embaixo */
    #cli-workspace-section > div[style*="display:flex"] { flex-direction: column !important; overflow: visible !important; }
    #cli-ws-sidebar, .cli-ws-sidebar { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 45vh; flex: 0 0 auto !important; }
    #cli-workspace-section { height: auto !important; }
    .main-content .btn { max-width: 100%; }
}
@media (max-width: 900px) {
    .cli-ws-toolbar, #cli-ws-toolbar { flex-wrap: wrap !important; height: auto !important; max-width: 100%; }
    .cli-ws-toolbar > * { flex-wrap: wrap; max-width: 100%; }
}