/*
 * Celular e tablet — mobile-first sobre o Design System Falcon (design-system/falcon/design-system.html).
 * Carregado por último em cada página, depois do tema Falcon e dos CSS próprios. Nada aqui cria um
 * visual novo: são os mesmos tokens do Falcon (--falcon-*: cores, bordas, sombras, fontes), os mesmos
 * componentes (navbar-top/navbar-glass, offcanvas, cards, badges, form-switch) reorganizados para a
 * tela pequena. No desktop (>= 1200px, menu lateral fixo) nada muda.
 *
 * Faixas (as do Bootstrap): celular < 576px · tablet 576–1199px. Abaixo de 1200px o Falcon recolhe o
 * menu lateral (navbar-expand-xl) — é aí que entram a barra superior enxuta, a navegação inferior e o
 * menu em offcanvas (js/layout.js). A tipografia nessa faixa é a escala padrão do Falcon (raiz 16px; o
 * "modo compacto" de 14px de style.css vale só no desktop).
 */

/* Utilitário usado nos componentes abaixo (texto que encurta com "…" dentro de flex) */
.min-w-0 { min-width: 0; }

/* Navegação inferior: só existe abaixo de 1200px */
.bn-nav-inferior { display: none; }

/* =====================================================================================================
   SHELL (< 1200px): barra superior, navegação inferior, menu em offcanvas
   ===================================================================================================== */
@media (max-width: 1199.98px) {
    /* O conteúdo do menu lateral foi para o offcanvas (layout.js): o menu lateral some */
    .navbar-vertical.navbar-expand-xl { display: none !important; }

    /* ---------- Barra superior: navbar-top + navbar-glass do Falcon, de ponta a ponta ---------- */
    .content > .navbar-top {
        position: sticky;
        top: 0;
        z-index: 1020;
        min-height: 3.75rem;
        margin: 0 -1rem 1rem;
        padding: 0.5rem 1rem;
        border-radius: 0;
        background-color: var(--falcon-bg-navbar-glass);
        box-shadow: 0 1px 0 var(--falcon-border-color);
        gap: 0.5rem;
    }
    /* o ☰ do topo abria o menu lateral; agora o menu é o "Menu" da navegação inferior */
    .navbar-top .navbar-toggler-humburger-icon { display: none !important; }
    .navbar-top .topbar-spacer { display: none; }
    .navbar-top .bn-topo-marca { flex-shrink: 0; padding: 0; }
    .navbar-top .bn-topo-marca .bn-navbar-wordmark { font-size: 1.125rem; }
    /* com o seletor de empresa, a marca sai: o espaço fica para o nome da empresa (a marca segue no menu) */
    .navbar-top:has(#empresa-global-nav-item:not(.hidden)) .bn-topo-marca { display: none !important; }
    /* tema e tela cheia vão para o menu da conta (switch "Tema escuro"); pendências, para a navegação inferior */
    .navbar-top #theme-toggle,
    .navbar-top #tela-cheia-toggle,
    .navbar-top .nav-item:has(> #topo-sino) { display: none !important; }
    .navbar-top .navbar-nav-icons .nav-item { margin-right: 0 !important; }

    /* ---------- Seletor de empresa: ocupa o meio da barra, com o nome da empresa sempre à vista ---------- */
    .navbar-top > .navbar-nav:has(#empresa-global-nav-item) { flex: 1 1 auto; min-width: 0; }
    #empresa-global-nav-item { flex: 1 1 auto; min-width: 0; position: static !important; }
    #empresa-global-toggle {
        width: 100%;
        min-height: 2.75rem;
        padding: 0.25rem 0.75rem;
        text-align: left;
    }
    #empresa-global-toggle .bn-empresa-texto { flex: 1 1 auto; min-width: 0; }
    #empresa-global-nome { max-width: 100%; font-size: 0.875rem; }
    #empresa-global-rotulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    /* o painel de troca abre logo abaixo da barra, na largura da tela (antes passava da borda) */
    #empresa-global-painel {
        position: absolute;
        top: calc(100% + 0.25rem) !important;
        left: 0.75rem !important;
        right: 0.75rem !important;
        width: auto !important;
        max-width: none;
        transform: none !important;
    }
    #empresa-global-painel::before,
    #empresa-global-painel::after { display: none; }
    #empresa-global-sugestoes { max-height: min(50dvh, 22rem) !important; }
    #empresa-global-sugestoes .dropdown-item { padding-top: 0.625rem; padding-bottom: 0.625rem; white-space: normal; }

    /* ---------- Consolidação (ao lado da empresa): só o ícone, para o nome da empresa seguir à vista ----------
       (o critério escolhido aparece no selo "Consolidação" do card de filtro e no painel, que abre na largura da tela) */
    #consolidacao-nav-item { flex: 0 0 auto; position: static !important; margin-left: 0.5rem !important; }
    #consolidacao-toggle { min-height: 2.75rem; padding: 0.25rem 0.75rem; }
    /* !important: o texto tem a classe d-flex do Bootstrap (que também é !important) */
    #consolidacao-toggle .bn-empresa-texto,
    #consolidacao-toggle .fa-chevron-down { display: none !important; }
    #consolidacao-painel {
        position: absolute;
        top: calc(100% + 0.25rem) !important;
        left: 0.75rem !important;
        right: 0.75rem !important;
        width: auto !important;
        max-width: none;
        transform: none !important;
    }
    #consolidacao-painel::before,
    #consolidacao-painel::after { display: none; }

    /* ---------- Conta: menu da conta não passa da tela ---------- */
    .bn-usuario-menu { width: min(18rem, calc(100vw - 1.5rem)); }

    /* ---------- Rodapé fixo do desktop: no celular o fundo da tela é da navegação inferior ---------- */
    .bn-rodape { display: none !important; }

    /* ---------- Navegação inferior (layout.js): ao alcance do polegar ---------- */
    .bn-nav-inferior {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        display: flex;
        justify-content: center;
        padding: 0 0.25rem env(safe-area-inset-bottom);
        background-color: var(--falcon-bg-navbar-glass);
        border-top: 1px solid var(--falcon-border-color);
        box-shadow: 0 -0.125rem 0.75rem rgba(0, 0, 0, 0.05);
    }
    .bn-nav-inferior__item {
        flex: 1 1 0;
        max-width: 7.5rem;
        min-height: 3.75rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        padding: 0.375rem 0.125rem;
        border: 0;
        background: none;
        color: var(--falcon-navbar-vertical-default-link-color);
        font-family: var(--falcon-font-sans-serif);
        font-size: 0.6944444444rem; /* fs-11 do Falcon */
        font-weight: 500;
        line-height: 1;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        transition: color 0.2s ease-in-out;
    }
    .bn-nav-inferior__item:hover,
    .bn-nav-inferior__item:focus-visible { color: var(--falcon-navbar-vertical-default-link-hover-color); }
    .bn-nav-inferior__item:focus-visible { outline: 2px solid var(--falcon-primary); outline-offset: -4px; border-radius: 0.5rem; }
    .bn-nav-inferior__item.active { color: var(--falcon-primary); font-weight: 600; }
    .bn-nav-inferior__icone { position: relative; font-size: 1.125rem; line-height: 1; }
    .bn-nav-inferior__rotulo { white-space: nowrap; }
    .bn-nav-inferior__selo {
        position: absolute;
        top: -0.45rem;
        left: 0.85rem;
        min-width: 1.1rem;
        padding: 0.2rem 0.3rem;
        font-size: 0.625rem;
        box-shadow: 0 0 0 2px var(--falcon-card-bg);
    }
    .bn-nav-inferior__selo[hidden] { display: none; }
    /* o conteúdo termina acima da navegação inferior */
    html.bn-com-nav-inferior .content { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
    .modo-espectador .bn-nav-inferior { display: none; }

    /* ---------- Menu completo (offcanvas-start do Falcon, aberto pelo "Menu") ---------- */
    .bn-menu-movel { --falcon-offcanvas-width: min(20rem, 86vw); }
    .bn-menu-movel .offcanvas-header { min-height: 3.75rem; padding: 0.5rem 1rem; }
    .bn-menu-movel .offcanvas-body { padding-bottom: env(safe-area-inset-bottom) !important; overflow-x: hidden; }
    /* o .navbar-vertical do Falcon tem margem negativa no celular (para o menu "hambúrguer" antigo) */
    .bn-menu-movel__nav.navbar-vertical {
        position: static;
        display: block;
        width: auto;
        max-width: none;
        margin: 0 !important;
        padding: 0.25rem 1.25rem 1.5rem;
        z-index: auto;
    }
    .bn-menu-movel .navbar-vertical-content {
        height: auto !important;
        max-height: none !important;
        padding: 0 !important;
        overflow: visible !important;
        background: none !important;
    }
    .bn-menu-movel .navbar-nav { font-size: 0.9375rem; }
    .bn-menu-movel .navbar-nav .nav-link { padding: 0.625rem 0; }
    .bn-menu-movel .navbar-nav .nav .nav-item .nav-link { padding: 0.5rem 0 0.5rem 1.75rem; }
    .bn-menu-movel .navbar-nav .nav-link-icon { width: 1.75rem; min-width: 1.75rem; font-size: 1rem; }
    .bn-menu-movel .navbar-vertical-label-wrapper { margin-top: 1rem !important; }

    /* ---------- Páginas: título da tela na escala do Falcon (o maior título é o h4) ---------- */
    .content > .mb-4:has(> div > h2) { margin-bottom: 1rem !important; align-items: center !important; }
    .content h2.mb-0,
    .content > h2,
    .content > .d-flex > h2 { font-size: 1.44rem; }

    /* Avisos do topo (BETA, sem empresa, sessão): compactos */
    .content > .alert { padding: 0.625rem 0.875rem; font-size: 0.8333333333rem; }
    .content > .alert .btn-close { padding: 0.5rem; margin: -0.375rem -0.375rem -0.375rem 0; }
    .bn-aviso-beta__texto { display: none; }

    /* Nada estoura para o lado: o que é largo (tabelas) rola dentro do próprio contêiner */
    .content { min-width: 0; }
    .card, .card-body { min-width: 0; }
    .content table:not(.table-responsive table):not(.resumo-grid table) {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* células numa linha só (a tabela rola para o lado) em vez de colunas espremidas */
    .table-responsive .table th:not(.text-wrap):not(.text-break),
    .table-responsive .table td:not(.text-wrap):not(.text-break) { white-space: nowrap; }

    /* Modais grandes (lg/xl) usam a largura da tela */
    .modal-lg, .modal-xl { max-width: calc(100vw - 2rem); }

    /* Cabeçalhos de card com muitos botões quebram em linhas */
    .card-header { flex-wrap: wrap; row-gap: 0.5rem; }
    .card-header > .d-flex { flex-wrap: wrap; }

    /* Abas e listas de botões que não cabem rolam para o lado, sem barra de rolagem aparente */
    .nav-tabs,
    .nav-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .nav-tabs::-webkit-scrollbar,
    .nav-pills::-webkit-scrollbar { display: none; }
    .nav-tabs .nav-link,
    .nav-pills .nav-link { white-space: nowrap; }
}

/* =====================================================================================================
   FILTROS DO PAINEL (dashboard/shared.js: filtrosResponsivos) — resumo + bottom sheet
   ===================================================================================================== */
.bn-filtros-resumo__seta,
.bn-filtros-resumo__botao {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.bn-filtros-resumo__botao { position: relative; }
.bn-filtros-resumo__selo {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    font-size: 0.625rem;
    box-shadow: 0 0 0 2px var(--falcon-card-bg);
}
.bn-filtros-offcanvas.offcanvas-bottom {
    height: auto;
    max-height: 88dvh;
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
}
.bn-filtros-offcanvas .offcanvas-footer { padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important; }
/* dentro do bottom sheet: um filtro por linha, na largura toda */
.bn-filtros-offcanvas .filtros {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
}
.bn-filtros-offcanvas .filtros > * { width: 100%; min-width: 0; padding-right: 0 !important; border-right: 0 !important; }
/* entre os filtros padrão e os próprios da tela (um por linha aqui): uma linha divisória */
/* faixas de datas (Análise Detalhada): um botão por linha, alinhado à esquerda */
.bn-filtros-offcanvas .filtro-faixa { flex: 1 1 100%; justify-content: flex-start; }
.bn-filtros-offcanvas .filtros > .filtros__quebra { flex-basis: auto; height: 0; border-top: 1px solid var(--falcon-border-color) !important; }
.bn-filtros-offcanvas .filtros select,
.bn-filtros-offcanvas .filtros input:not([type='checkbox']):not([type='radio']) { width: 100% !important; max-width: none !important; }
.bn-filtros-offcanvas .filtros .form-select,
.bn-filtros-offcanvas .filtros .form-control { min-height: 2.75rem; font-size: 1rem; }
.bn-filtros-offcanvas .filtros .btn { min-height: 2.75rem; }
.bn-filtros-offcanvas .filtro-nao-aplicavel { display: flex; }
.bn-filtros-offcanvas .filtro-nao-aplicavel > * { flex: 1 1 100%; min-width: 0; }
.bn-filtros-offcanvas .filtros-crm__data { width: 100%; }
/* Período: o tipo (Mês/Trimestre/…) numa linha e o grupo escolhido na de baixo */
.bn-filtros-offcanvas .filtro-periodo { flex-direction: column; align-items: stretch !important; }
.bn-filtros-offcanvas .filtro-periodo > * { width: 100%; min-width: 0; }
.bn-filtros-offcanvas .filtro-periodo .filtro-periodo-mes,
.bn-filtros-offcanvas .filtro-periodo .filtro-periodo-trimestre,
.bn-filtros-offcanvas .filtro-periodo .filtro-periodo-personalizado { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.bn-filtros-offcanvas .filtro-periodo .filtro-periodo-mes > .form-control,
.bn-filtros-offcanvas .filtro-periodo .filtro-periodo-trimestre > .form-select { flex: 1 1 0; width: auto !important; }
.bn-filtros-offcanvas .filtro-periodo .filtro-periodo-mes > .btn { flex: 0 0 2.75rem; }
.bn-filtros-offcanvas .filtro-periodo .filtro-periodo-personalizado > .form-control { flex: 1 1 0; width: auto !important; }
.bn-filtros-offcanvas .filtro-periodo .filtro-periodo-personalizado > .btn { flex: 1 1 100%; }
.bn-filtros-offcanvas .form-check { min-height: 2.75rem; display: flex; align-items: center; gap: 0.5rem; }

/* =====================================================================================================
   CELULAR E TABLET EM PÉ (< 768px)
   ===================================================================================================== */
@media (max-width: 767.98px) {
    /* "KPI counter row" do Falcon (util/card-estatistica.js: desenharLinhaKpi; Análise Detalhada:
       .kpi-counter-row e .kpi-linha-falcon): 2 por linha, ícone menor, número em cima e rótulo embaixo,
       na escala de KPI do Falcon (h5) — cabe mais na tela sem perder a leitura */
    .bn-kpi-linha .card-body,
    .kpi-counter-row .card-body { padding: 1rem 0.25rem 0.25rem !important; }
    .bn-kpi-linha .icon-circle,
    .kpi-counter-row .icon-circle { width: 2.75rem; height: 2.75rem; margin-bottom: 0.5rem; }
    .bn-kpi-linha .icon-circle .fas, .bn-kpi-linha .icon-circle svg,
    .kpi-counter-row .icon-circle .fas, .kpi-counter-row .icon-circle svg { font-size: 1.1rem; }
    .bn-kpi-linha h4,
    .kpi-counter-row h4,
    .kpi-linha-falcon .fs-8 {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.125rem;
        font-size: 1.2rem !important;
        overflow-wrap: anywhere;
    }
    .bn-kpi-linha h4 > span,
    .kpi-counter-row h4 > span,
    .kpi-linha-falcon .fs-8 > span { margin: 0 !important; }
    .bn-kpi-linha h4 > span:last-child,
    .kpi-counter-row h4 > span:last-child { font-size: 0.8333333333rem; }
    .kpi-linha-falcon .fs-8 { font-size: 0.9375rem !important; }
    .bn-kpi-linha .fs-10,
    .kpi-counter-row .fs-10,
    .kpi-linha-falcon .fs-10 { font-size: 0.6944444444rem !important; }

    /* Cards de estatística (desenharCardsEstatistica): 2 por linha (util/card-estatistica.js) */
    .bn-card-estatistica .card { min-width: 0 !important; }
    .bn-card-estatistica .card-body { padding: 1rem; }
    .bn-card-estatistica h6 { font-size: 0.75rem; }
    .bn-card-estatistica .display-4 { font-size: 1.44rem !important; margin-bottom: 0 !important; }

    /* Dropdowns (autocomplete, menus) nunca mais largos que a tela */
    .dropdown-menu { max-width: calc(100vw - 1.5rem); }
}

/* =====================================================================================================
   CELULAR (< 576px)
   ===================================================================================================== */
@media (max-width: 575.98px) {
    /* Campos de filtro com largura mínima fixa (inline, ex.: min-width: 380px) ocupam a linha toda */
    .form-control[style*="min-width"],
    .form-select[style*="min-width"],
    .form-control.w-auto,
    .form-select.w-auto {
        min-width: 0 !important;
        width: 100% !important;
        flex: 1 1 100%;
    }
    .input-group > .form-control[style*="min-width"] { width: 1% !important; flex: 1 1 auto; }

    /* Botões de barras de ação dividem a linha (fácil de tocar) */
    .card-header .btn, .card-body > .d-flex > .btn { flex: 1 1 auto; }
    .card-body.d-flex.flex-wrap > .btn { flex: 1 1 auto; }
    .card-body.d-flex.flex-wrap > span.ms-auto { flex: 1 1 100%; margin-left: 0 !important; }

    /* Barra de filtros fora do Painel (telas com .filtros próprios): um filtro por linha */
    .content .filtros { gap: 0.5rem; padding: 0.75rem; margin-bottom: 1rem; }
    .content .filtros > * { flex: 1 1 100%; min-width: 0; }
    .content .filtros > *:not(:last-child) { padding-right: 0; border-right: 0; }
    .content .filtros > select,
    .content .filtros > input:not([type='checkbox']):not([type='radio']) { width: 100%; }

    /* Modais em tela cheia (padrão modal-fullscreen-sm-down do Bootstrap/Falcon) */
    .modal-dialog,
    .modal-lg, .modal-xl {
        max-width: none;
        width: 100%;
        margin: 0;
        min-height: 100%;
    }
    .modal-dialog-centered { align-items: stretch; }
    .modal-content {
        min-height: 100dvh;
        border: 0;
        border-radius: 0;
    }
    .modal-dialog-scrollable { height: 100dvh; }
    .modal-dialog-scrollable .modal-content { max-height: 100dvh; }
    .modal-header { position: sticky; top: 0; z-index: 2; background-color: var(--falcon-modal-bg, var(--falcon-card-bg)); }
    .modal-footer { flex-wrap: wrap; gap: 0.5rem; padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)); }
    .modal-footer > .btn { flex: 1 1 auto; min-height: 2.75rem; }
    .modal-footer > span, .modal-footer > .me-auto { flex: 1 1 100%; margin: 0 !important; }

    /* Pendências: cards de resumo em 2 colunas; valores em moeda um pouco menores */
    .resumo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .resumo-grid .display-4.fs-5 { font-size: 1.15rem !important; }
    .resumo-grid .display-4.fs-6 { font-size: 0.95rem !important; }
    .resumo-grid .card-body { padding: 0.75rem; }

    /* Campos com 16px: o iPhone não dá zoom ao focar */
    .form-control:not(table .form-control),
    .form-select:not(table .form-select),
    textarea.form-control:not(table textarea) { font-size: 1rem; }

    /* Pendências: títulos de grupo ("Importação"/"Conta Azul") à esquerda, visíveis sem rolar */
    .tabela-pendencias thead tr:first-child th { text-align: left !important; }

    /* Árvores (Categoria Genérica etc.): a linha quebra — botões de ação descem para a direita */
    .arvore-linha { flex-wrap: wrap; row-gap: 0.25rem; }
    .arvore-linha > span { min-width: 0; overflow-wrap: anywhere; }
    .arvore-linha > .flex-grow-1 { flex: 1 1 0; min-width: 0; }
    .arvore-linha > .d-flex.gap-1 { margin-left: auto; }
}

/* =====================================================================================================
   TELAS DE TOQUE (celular/tablet): alvos de toque confortáveis (~44px)
   ===================================================================================================== */
@media (pointer: coarse) {
    .btn { min-height: 2.75rem; }
    .btn-sm, .btn-group-sm > .btn { min-height: 2.5rem; }
    .btn-close { padding: 0.75rem; }
    .form-control-sm, .form-select-sm { min-height: 2.5rem; }
    .form-control, .form-select { min-height: 2.75rem; }
    .form-check-input { width: 1.25em; height: 1.25em; }
    .form-switch .form-check-input { width: 2.25em; }
    .dropdown-item { padding-top: 0.625rem; padding-bottom: 0.625rem; }
    .nav-tabs .nav-link, .nav-pills .nav-link { padding-top: 0.625rem; padding-bottom: 0.625rem; }
    .page-link { min-width: 2.75rem; min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; }
    /* links de ação dentro de tabelas (ícones) com área maior */
    td .btn-link.btn-sm { min-width: 2.5rem; min-height: 2.5rem; }
    /* botões só de ícone ou "link" dentro de texto não esticam */
    .btn-link.p-0, .btn.p-0 { min-height: 0; }
}