/* =========================================================
   FERMENTA SALES
   MOBILE ESSENCIAL V1

   Desktop permanece como interface principal.
   Mobile = funcional, limpo e utilizavel.
========================================================= */


/* =========================================================
   TABLET / MOBILE
========================================================= */

@media (max-width: 900px) {

    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    body {
        -webkit-text-size-adjust: 100%;
    }

    button,
    input,
    select,
    textarea {
        max-width: 100%;
    }


    /* =====================================================
       APP PRINCIPAL — SHELL
    ===================================================== */

    #app-view.app-shell {
        display: block !important;

        width: 100% !important;
        min-height: 100dvh !important;
    }

    /*
     * DRAWER OFF-CANVAS (rodada mobile final 2026-09-06)
     *
     * A V1 transformava o .sidebar numa BARRA horizontal sticky
     * (position:sticky; width:100%; height:auto). Como o app ganhou
     * depois um #mobile-app-header + hamburguer + overlay, essa barra
     * virou ~270px de ESPAÇO VAZIO em fluxo entre o header e o conteudo,
     * e o z-index:100 dela ficava ABAIXO do overlay (z-index 125) —
     * por isso o menu "so escurecia a tela".
     *
     * Aqui o .sidebar volta a ser um drawer fixo fora da tela. Mesma
     * especificidade da regra antiga (#app-view.app-shell > .sidebar)
     * pra ganhar do resto sem !important em cascata.
     */
    #app-view.app-shell > .sidebar {
        position: fixed !important;

        inset: 0 auto 0 0 !important;
        top: 0 !important;

        z-index: 200 !important;

        width: min(86vw, 320px) !important;
        height: 100% !important;
        max-height: none !important;
        min-height: 0 !important;

        padding:
            calc(14px + env(safe-area-inset-top))
            14px
            calc(16px + env(safe-area-inset-bottom)) !important;

        gap: 2px !important;

        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;

        border-right: 0 !important;
        border-bottom: 0 !important;

        transform: translateX(-100%) !important;
        transition: transform .24s ease !important;

        box-shadow:
            0 0 0 100vmax rgba(0,0,0,0) !important;
    }

    /* aberto: JS poe .sidebar-open no <body>. Precisa de +especificidade
       que a regra base acima (que tem 1 id). */
    body.sidebar-open #app-view.app-shell > .sidebar,
    #app-view.app-shell.sidebar-open > .sidebar {
        transform: translateX(0) !important;
    }

    /* overlay: so cobre a pagina ATRAS do drawer. Fica abaixo do drawer
       (200) e acima do conteudo. Escondido de verdade quando fechado. */
    #app-view.app-shell > .mobile-sidebar-overlay,
    .mobile-sidebar-overlay {
        position: fixed !important;
        inset: 0 !important;
        z-index: 190 !important;
        display: block !important;
        border: 0 !important;
        padding: 0 !important;
        background: rgba(6,17,33,.52) !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .24s ease, visibility .24s ease !important;
    }

    body.sidebar-open #app-view.app-shell > .mobile-sidebar-overlay,
    body.sidebar-open .mobile-sidebar-overlay {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* trava o scroll do fundo enquanto o drawer esta aberto */
    body.sidebar-open {
        overflow: hidden !important;
    }

    /* o X de fechar precisa aparecer no topo do drawer */
    #app-view.app-shell .mobile-sidebar-close {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        margin-left: auto;
    }

    /*
     * fa-tip (dica flutuante do fermenta-redesign-2026.js): no touch ela
     * abre no clique e so some com scroll/Esc — no iPhone vira um balao
     * preto preso por cima do conteudo (visto na Agenda). Os rotulos ja
     * estao visiveis no mobile, entao a camada visual e dispensavel aqui.
     * O aria-label continua no elemento — a11y preservada.
     */
    #fa-tip-layer {
        display: none !important;
    }


    #app-view.app-shell
    .sidebar-brand {
        display: flex !important;

        align-items: center !important;

        gap: 9px !important;

        padding:
            0
            2px
            4px !important;
    }


    #app-view.app-shell
    .sidebar-brand
    .brand-symbol {
        width: 32px !important;
        height: 32px !important;

        min-width: 32px !important;
        min-height: 32px !important;

        flex:
            0 0 32px !important;
    }


    #app-view.app-shell
    .sidebar-brand strong {
        display: block;

        font-size:
            12px !important;

        line-height:
            1.15 !important;
    }


    #app-view.app-shell
    .sidebar-brand span {
        display: block;

        margin-top:
            2px;

        font-size:
            9px !important;
    }


    /*
     * Navegacao VERTICAL dentro do drawer (rodada mobile final 2026-09-06).
     * A V1 fazia essa lista rolar na horizontal (era barra). Agora e drawer,
     * entao volta a ser lista empilhada, item full-width.
     */

    #app-view.app-shell
    .sidebar-nav {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;

        gap:
            2px !important;

        margin:
            0 !important;

        padding:
            0 !important;

        overflow: visible !important;

        scroll-snap-type: none !important;
    }


    #app-view.app-shell
    .nav-item {
        flex:
            0 0 auto !important;

        width:
            100% !important;

        justify-content: flex-start !important;

        min-height:
            44px !important;

        padding:
            0
            12px !important;

        gap:
            10px !important;

        border-radius:
            10px !important;

        font-size:
            13px !important;

        white-space:
            normal !important;
    }


    #app-view.app-shell
    .nav-item svg {
        width:
            17px !important;

        height:
            17px !important;

        min-width:
            17px !important;
    }


    #app-view.app-shell
    .sidebar-footer {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        margin-top: 10px !important;
        padding-top: 10px !important;
        border-top: 1px solid rgba(255,255,255,.08) !important;
    }


    #app-view.app-shell
    .main-area {
        grid-column:
            auto !important;

        width:
            100% !important;

        min-width:
            0 !important;

        /* topo enxuto (o espaco vazio vinha do .sidebar em fluxo, ja
           corrigido acima) + folga inferior pra barra de navegacao fixa
           nao cobrir o ultimo card / CTA. Respeita a safe-area do iPhone. */
        padding:
            14px
            14px
            calc(84px + env(safe-area-inset-bottom)) !important;
    }


    /* =====================================================
       CABECALHOS
    ===================================================== */

    #app-view.app-shell
    .topbar,
    #app-view.app-shell
    .crm-topbar,
    #app-view.app-shell
    .agenda-header,
    #app-view.app-shell
    .signals-header {
        align-items:
            stretch !important;

        flex-direction:
            column !important;

        gap:
            12px !important;

        margin-bottom:
            16px !important;
    }


    #app-view.app-shell
    .topbar h1,
    #app-view.app-shell
    .signals-header h1,
    #app-view.app-shell
    .agenda-header h1 {
        font-size:
            25px !important;

        line-height:
            1.08 !important;
    }


    #app-view.app-shell
    .topbar-actions,
    #app-view.app-shell
    .signals-header-actions,
    #app-view.app-shell
    .agenda-header-actions {
        display:
            flex !important;

        width:
            100% !important;

        flex-wrap:
            wrap !important;

        justify-content:
            flex-start !important;

        gap:
            7px !important;
    }


    /* =====================================================
       CARDS / ESTATISTICAS
    ===================================================== */

    #app-view.app-shell
    .stats-grid,
    #app-view.app-shell
    .crm-summary-grid,
    #app-view.app-shell
    .signals-summary,
    #app-view.app-shell
    .agenda-summary {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            )
            !important;

        gap:
            10px !important;
    }


    #app-view.app-shell
    .stat-card,
    #app-view.app-shell
    .signals-stat,
    #app-view.app-shell
    .agenda-stat {
        min-height:
            100px !important;

        padding:
            15px !important;
    }


    #app-view.app-shell
    .stat-card strong {
        font-size:
            23px !important;
    }


    /* =====================================================
       PAINEIS
    ===================================================== */

    #app-view.app-shell
    .panel {
        border-radius:
            14px !important;
    }


    #app-view.app-shell
    .panel-header,
    #app-view.app-shell
    .results-header {
        align-items:
            flex-start !important;

        flex-direction:
            column !important;

        gap:
            9px !important;
    }


    /* =====================================================
       BUSCA
    ===================================================== */

    #app-view.app-shell
    .filters-grid {
        grid-template-columns:
            1fr !important;
    }


    #app-view.app-shell
    .field-wide {
        grid-column:
            auto !important;
    }


    #app-view.app-shell
    .filter-actions {
        display:
            flex !important;

        flex-direction:
            column !important;

        align-items:
            stretch !important;

        gap:
            10px !important;
    }


    #app-view.app-shell
    .filter-actions
    .button {
        width:
            100% !important;
    }


    /*
     * Resultados continuam sendo tabela.
     * Scroll horizontal é melhor que
     * comprimir seis colunas.
     */

    #app-view.app-shell
    .table-wrapper,
    #app-view.app-shell
    .crm-table-wrapper,
    #app-view.app-shell
    .crm-table-wrap,
    #app-view.app-shell
    .table-container {
        width:
            100% !important;

        max-width:
            100% !important;

        overflow-x:
            auto !important;

        -webkit-overflow-scrolling:
            touch;
    }


    #app-view.app-shell
    .table-wrapper table,
    #app-view.app-shell
    .crm-table-wrapper table,
    #app-view.app-shell
    .crm-table-wrap table {
        min-width:
            760px !important;
    }

    /*
     * Exceção: quando a tabela só tem a linha de "empty-state" (nenhum
     * resultado / "Preencha os filtros"), o min-width:760px jogava o
     * texto centralizado pra fora da viewport (cortado à direita).
     * Sem colunas pra rolar, a tabela pode ser 100%.  (rodada mobile
     * final 2026-09-06)
     */
    #app-view.app-shell table:has(td.empty-state),
    #app-view.app-shell table:has(td[colspan] > .empty-state),
    #app-view.app-shell #results-body:has(td.empty-state) table {
        min-width: 0 !important;
        width: 100% !important;
    }
    #app-view.app-shell td.empty-state,
    #app-view.app-shell td[colspan]:has(> .empty-state),
    #app-view.app-shell td:only-child:has(> .empty-state) {
        position: sticky !important;
        left: 0 !important;
        width: 100vw !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }


    #app-view.app-shell
    .pagination {
        flex-wrap:
            wrap !important;

        justify-content:
            center !important;

        gap:
            8px !important;
    }


    /* =====================================================
       FICHA DA EMPRESA
    ===================================================== */

    #detail-overlay,
    .detail-overlay {
        padding:
            8px !important;
    }


    #detail-overlay
    .detail-panel,
    .detail-overlay
    .detail-panel,
    .company-detail-panel {
        width:
            calc(100vw - 16px)
            !important;

        max-width:
            none !important;

        max-height:
            calc(100dvh - 16px)
            !important;

        border-radius:
            16px !important;
    }


    .detail-grid,
    .company-detail-grid {
        grid-template-columns:
            1fr !important;
    }


    .detail-actions,
    .company-detail-actions {
        display:
            flex !important;

        flex-wrap:
            wrap !important;

        gap:
            7px !important;
    }


    /* =====================================================
       CRM
    ===================================================== */

    #crm-view
    .crm-layout {
        grid-template-columns:
            1fr !important;

        gap:
            12px !important;
    }


    #crm-view
    .crm-filter-form {
        grid-template-columns:
            1fr !important;

        gap:
            10px !important;
    }


    #crm-view
    .crm-filter-search {
        grid-column:
            auto !important;
    }


    #crm-view
    .crm-filter-button {
        width:
            100% !important;
    }


    .crm-modal,
    .crm-modal-dialog,
    .crm-contact-modal,
    .email-assistant-modal {
        width:
            calc(100vw - 20px)
            !important;

        max-width:
            none !important;

        max-height:
            calc(100dvh - 20px)
            !important;

        overflow-y:
            auto !important;

        border-radius:
            16px !important;
    }


    /* =====================================================
       CENTRAL DE EMAIL
    ===================================================== */

    .email-center-view {
        padding:
            0 0 20px
            !important;
    }


    .email-center-shell {
        grid-template-columns:
            1fr !important;

        min-height:
            0 !important;

        border-radius:
            14px !important;
    }


    .email-center-left {
        border-right:
            0 !important;

        border-bottom:
            1px solid #dbe5f2;
    }


    .email-center-tabs {
        padding:
            11px !important;
    }


    .email-center-list {
        max-height:
            46dvh !important;
    }


    .email-center-right {
        min-height:
            300px !important;

        padding:
            16px !important;
    }


    .email-preview-placeholder {
        min-height:
            270px !important;
    }


    .email-preview-actions {
        gap:
            7px !important;
    }

    /*
     * Guardas de conteúdo (rodada mobile final 2026-09-06): impede que o
     * corpo/preview do e-mail e o card do composer estourem a largura por
     * causa de string longa (URL, palavra sem espaço) ou min-width herdado
     * de layout desktop. Não muda o layout — só garante que quebra.
     */
    #app-view .email-center-shell,
    #app-view .email-center-left,
    #app-view .email-center-right,
    #app-view .email-center-list,
    #app-view .email-preview,
    #app-view .email-preview-body,
    #app-view .email-preview-title,
    #app-view #crm-email-modal .crm-email-modal-card,
    #app-view #crm-email-modal .crm-email-content,
    #app-view #crm-email-modal .crm-email-editor,
    #app-view #crm-email-modal .crm-email-sidebar {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    #app-view .email-preview-body *,
    #app-view .email-preview pre,
    #app-view #crm-email-modal #crm-email-body {
        max-width: 100% !important;
        white-space: pre-wrap;
        word-break: break-word;
    }


    /* =====================================================
       AGENDA
    ===================================================== */

    /*
     * Rodada mobile final 2026-09-06 — composição mobile de verdade.
     *
     * O que estava errado: fermenta-redesign-2026.css força
     * `.agenda-item{display:flex}` (layout desktop 2 colunas) e não tem
     * override mobile. Com a .agenda-item-date do agenda.css (padding:21px)
     * a "coluna de data" comia ~180px e a .agenda-item-main sobrava com
     * ~114px — nome da empresa, status, oferta e 5 botões espremidos e
     * vazando pra direita. As abas (6, com "Próximos 7 dias") também não
     * cabiam.
     *
     * #app-view .agenda-* = especificidade (1,1,1), ganha do
     * body.fs-app-2026 .agenda-* (0,2,1) sem !important em cascata.
     */

    /* ---- abas: 6 itens curtos → quebram em linhas, sem scroll lateral ---- */
    #app-view .agenda-tabs {
        display: flex !important;
        flex-wrap: wrap !important;
        overflow: visible !important;
        gap: 6px !important;
        margin: 12px 0 0 !important;
        padding: 0 0 12px !important;
        scrollbar-width: none;
    }

    #app-view .agenda-tabs::-webkit-scrollbar { display: none; }

    #app-view .agenda-tab {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        height: auto !important;
        min-height: 32px !important;
        padding: 6px 10px !important;
    }

    /* ---- card: vertical, tudo empilhado, largura total ---- */
    /* o .agenda-content tinha margin:0 24px e a .agenda-list +14px por
       cima → ~50px de recuo de cada lado. Aperta pra ~14px. */
    #app-view .agenda-content {
        margin-left: 14px !important;
        margin-right: 14px !important;
    }
    #app-view .agenda-list {
        margin: 12px 0 0 !important;
    }

    #app-view .agenda-item,
    #app-view .agenda-card,
    #app-view .agenda-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 14px !important;
        grid-template-columns: 1fr !important;
    }

    /* bloco de data + selo: linha própria, sem "coluna" gorda */
    #app-view .agenda-item-date {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 6px 10px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 0 !important;
        background: none !important;
        border: 0 !important;
    }
    #app-view .agenda-item-date > span { flex: 0 0 auto; }
    #app-view .agenda-item-date strong { flex: 0 0 auto; }

    #app-view .agenda-item.overdue { box-shadow: inset 3px 0 0 #d94a4a !important; }

    /* miolo: largura total, nome quebra */
    #app-view .agenda-item-main {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: 100% !important;
        gap: 8px !important;
        padding: 0 !important;
    }
    #app-view .agenda-item-main h3 {
        font-size: 15px !important;
        line-height: 1.25 !important;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    #app-view .agenda-item-main p { overflow-wrap: anywhere; }

    /* Status / Oferta empilhados */
    #app-view .agenda-item-meta {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        width: 100% !important;
        margin-top: 0 !important;
    }
    #app-view .agenda-item-meta > span { overflow-wrap: anywhere; }

    /* ações: grade 2 colunas, "Cancelar" ocupa a linha inteira */
    #app-view .agenda-item-actions,
    #app-view .agenda-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        flex: none !important;
        gap: 8px !important;
        width: 100% !important;
        margin-top: 2px !important;
    }
    #app-view .agenda-item-actions .button,
    #app-view .agenda-item-actions .agenda-cancel-button {
        width: 100% !important;
        min-width: 0 !important;
        height: 40px !important;
        padding: 0 10px !important;
        font-size: 12.5px !important;
        white-space: nowrap;
    }
    #app-view .agenda-item-actions .agenda-cancel-button {
        grid-column: 1 / -1 !important;
        border: 1px solid var(--fa-line, #e0e7f0) !important;
        border-radius: 9px !important;
    }


    /* =====================================================
       SINAIS DE COMPRA
    ===================================================== */

    #signals-view {
        padding:
            0 0 22px
            !important;
    }


    #signals-view
    .signals-tabs {
        display:
            flex !important;

        overflow-x:
            auto !important;

        gap:
            6px !important;

        scrollbar-width:
            none;
    }


    #signals-view
    .signals-tabs::-webkit-scrollbar {
        display:
            none;
    }


    #signals-view
    .signals-tab {
        flex:
            0 0 auto !important;

        white-space:
            nowrap !important;
    }


    #signals-view
    .signal-card {
        grid-template-columns:
            1fr !important;

        gap:
            12px !important;
    }


    #signals-view
    .signal-heading {
        align-items:
            flex-start !important;

        flex-direction:
            column !important;

        gap:
            7px !important;
    }


    #signals-view
    .signal-actions {
        display:
            flex !important;

        flex-wrap:
            wrap !important;

        gap:
            7px !important;
    }


    .signals-form-grid,
    .signals-search-form {
        grid-template-columns:
            1fr !important;
    }


    .signals-full-field,
    .signals-search-form
    label:first-child {
        grid-column:
            auto !important;
    }


    .signals-modal,
    .signals-search-dialog {
        width:
            calc(100vw - 20px)
            !important;

        max-width:
            none !important;

        max-height:
            calc(100dvh - 20px)
            !important;

        overflow-y:
            auto !important;

        border-radius:
            16px !important;
    }


    /* =====================================================
       CONFIGURACOES
    ===================================================== */

    #app-view.app {
        display:
            block !important;

        width:
            100% !important;

        min-height:
            100dvh !important;
    }


    #app-view.app > .sidebar {
        position:
            sticky !important;

        inset:
            auto !important;

        top:
            0 !important;

        z-index:
            100 !important;

        width:
            100% !important;

        height:
            auto !important;

        min-height:
            0 !important;

        padding:
            9px
            12px
            8px
            !important;

        border-right:
            0 !important;

        border-bottom:
            1px solid
            rgba(255,255,255,.08);

        box-shadow:
            0 8px 24px
            rgba(5,25,45,.10);
    }


    #app-view.app
    .sidebar-brand {
        min-height:
            36px;

        margin:
            0 !important;

        padding:
            0
            120px
            5px
            2px
            !important;
    }


    #app-view.app
    .sidebar-brand
    .logo {
        width:
            32px !important;

        height:
            32px !important;

        min-width:
            32px !important;

        min-height:
            32px !important;

        flex:
            0 0 32px !important;
    }


    #app-view.app
    .sidebar-brand strong {
        font-size:
            12px !important;
    }


    #app-view.app
    .sidebar-brand span {
        font-size:
            9px !important;
    }


    #app-view.app
    .product-home-link {
        position:
            absolute !important;

        top:
            9px !important;

        right:
            12px !important;

        width:
            auto !important;

        min-height:
            34px !important;

        margin:
            0 !important;

        padding:
            0
            10px !important;

        font-size:
            10px !important;
    }


    #app-view.app
    .sidebar-section-label {
        display:
            none !important;
    }


    #app-view.app
    > .sidebar
    nav {
        display:
            flex !important;

        width:
            100% !important;

        gap:
            5px !important;

        padding:
            0 0 2px !important;

        overflow-x:
            auto !important;

        overflow-y:
            hidden !important;

        scrollbar-width:
            none;
    }


    #app-view.app
    > .sidebar
    nav::-webkit-scrollbar {
        display:
            none;
    }


    #app-view.app
    > .sidebar
    nav
    .nav {
        flex:
            0 0 auto !important;

        width:
            auto !important;

        min-height:
            38px !important;

        padding:
            0
            11px !important;

        white-space:
            nowrap !important;

        font-size:
            10.5px !important;
    }


    #app-view.app
    > .sidebar
    nav
    .nav.active::before {
        top:
            auto !important;

        right:
            10px !important;

        bottom:
            0 !important;

        left:
            10px !important;

        width:
            auto !important;

        height:
            3px !important;

        border-radius:
            3px
            3px
            0
            0 !important;
    }


    #app-view.app
    .sidebar-bottom {
        display:
            none !important;
    }


    #app-view.app
    .content {
        width:
            100% !important;

        min-width:
            0 !important;

        max-width:
            none !important;

        margin:
            0 !important;

        padding:
            14px !important;
    }


    #app-view.app
    .topbar {
        align-items:
            stretch !important;

        flex-direction:
            column !important;

        gap:
            12px !important;
    }


    #app-view.app
    .user-box {
        width:
            100% !important;

        min-width:
            0 !important;
    }


    #app-view.app
    .user-box span {
        overflow:
            hidden;

        text-overflow:
            ellipsis;

        white-space:
            nowrap;
    }


    #app-view.app
    .metrics {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            )
            !important;

        gap:
            10px !important;
    }


    #app-view.app
    .cards.two {
        grid-template-columns:
            1fr !important;
    }


    #app-view.app
    .metric,
    #app-view.app
    .card {
        min-width:
            0 !important;
    }


    /* Configuracoes: formularios internos */

    #app-view.app
    .form-grid,
    #app-view.app
    .email-form-grid,
    #app-view.app
    .team-grid,
    #app-view.app
    .commercial-form-grid {
        grid-template-columns:
            1fr !important;
    }


    /*
     * Dialogos de Configuracoes.
     */

    #app-view.app
    .email-modal-dialog,
    #app-view.app
    .modal-dialog,
    #app-view.app
    .dialog {
        width:
            calc(100vw - 20px)
            !important;

        max-width:
            none !important;

        max-height:
            calc(100dvh - 20px)
            !important;

        overflow-y:
            auto !important;

        border-radius:
            16px !important;
    }
}


/* =========================================================
   TELEFONES
========================================================= */

@media (max-width: 560px) {

    #app-view.app-shell
    .main-area,
    #app-view.app
    .content {
        /* mantém o topo enxuto e preserva a folga inferior pra barra fixa
           (a bottom-nav tem ~61px + safe-area) — senão ela cobre o último
           card/CTA em telas estreitas. */
        padding:
            10px
            10px
            calc(82px + env(safe-area-inset-bottom)) !important;
    }


    /* marca mais compacta */

    #app-view.app-shell
    .sidebar-brand > div:last-child {
        display:
            none !important;
    }


    #app-view.app-shell
    .sidebar-brand {
        padding-bottom:
            2px !important;
    }


    /* 1 coluna */

    #app-view.app-shell
    .stats-grid,
    #app-view.app-shell
    .crm-summary-grid,
    #app-view.app-shell
    .signals-summary,
    #app-view.app-shell
    .agenda-summary,
    #app-view.app
    .metrics {
        grid-template-columns:
            1fr !important;
    }


    #app-view.app-shell
    .stat-card,
    #app-view.app-shell
    .signals-stat,
    #app-view.app-shell
    .agenda-stat {
        min-height:
            86px !important;

        padding:
            13px !important;
    }


    #app-view.app-shell
    .topbar h1,
    #app-view.app-shell
    .signals-header h1,
    #app-view.app-shell
    .agenda-header h1,
    #app-view.app
    .topbar h1 {
        font-size:
            23px !important;
    }


    /*
     * Botoes importantes ganham area de toque,
     * sem transformar todos em full width.
     */

    .button,
    button {
        min-height:
            40px;
    }


    .crm-modal-footer,
    .signals-modal-footer,
    .signals-search-footer,
    .mail-lead-modal-footer,
    .modal-actions {
        align-items:
            stretch !important;

        flex-direction:
            column !important;
    }


    .crm-modal-footer
    .button,
    .signals-modal-footer
    .button,
    .signals-search-footer
    button,
    .mail-lead-modal-footer
    .button,
    .modal-actions
    .button {
        width:
            100% !important;
    }


    /* =====================================================
       LOGIN MOBILE
    ===================================================== */

    #login-view.login-view {
        min-height:
            100dvh !important;
    }


    #login-view
    .login-card {
        min-height:
            100dvh !important;

        padding:
            24px
            18px
            28px
            !important;
    }


    #login-view
    .login-brand {
        margin-bottom:
            24px !important;
    }


    #login-view
    .login-brand
    .brand-symbol {
        width:
            185px !important;

        min-width:
            185px !important;

        height:
            68px !important;

        min-height:
            68px !important;

        flex:
            0 0 185px !important;
    }


    #login-view
    .login-copy h1 {
        font-size:
            34px !important;

        line-height:
            1 !important;
    }


    #login-view
    .login-copy p {
        font-size:
            13px !important;

        line-height:
            1.45 !important;
    }
}


/* =========================================================
   TELAS MUITO PEQUENAS
========================================================= */

@media (max-width: 380px) {

    #app-view.app-shell
    .nav-item,
    #app-view.app
    > .sidebar
    nav
    .nav {
        padding:
            0
            9px !important;

        font-size:
            10px !important;
    }


    #app-view.app
    .product-home-link span {
        display:
            none !important;
    }


    #app-view.app
    .product-home-link {
        width:
            36px !important;

        padding:
            0 !important;

        justify-content:
            center !important;
    }
}