/* ==========================================================================
   MOBILE — abaixo de 768px
   Último arquivo da cadeia: sobrescreve tokens/layout/components.
   ========================================================================== */

/* A tab bar e o menu só existem no celular. */
.tab-bar { display: none; }
#section-menu { display: none; }

@media (max-width: 768px) {

  /* ------------------------------------------------------------------------
     A sidebar dá lugar à tab bar. O hambúrguer e o overlay saem de cena — a
     navegação inteira passa para o rodapé.
     ------------------------------------------------------------------------ */
  .sidebar, .hamburger-btn, .sidebar-overlay { display: none !important; }
  .main { margin-left: 0; }

  /* body já reservava a safe area do topo; quem reserva agora é a topbar, para
     não somar o recorte duas vezes. */
  body { padding-top: 0; padding-bottom: 0; }

  .topbar {
    height: auto;
    min-height: 56px;
    padding: 10px 16px;
    padding-top: calc(10px + env(safe-area-inset-top));
    flex-wrap: wrap;
    gap: 10px;
  }
  .page-title { font-size: 19px; }
  /* O "+ Importar" da topbar é redundante no celular: o FAB da tab bar faz o
     lançamento e o Menu leva à importação. */
  .topbar-actions > .btn-primary { display: none; }
  .month-tabs { width: 100%; order: 3; }

  .content {
    padding: 16px;
    /* Espaço para a tab bar não cobrir o fim da lista. */
    padding-bottom: calc(78px + env(safe-area-inset-bottom));
  }

  .grid-4, .grid-3, .grid-2, .grid-21, .grid-12 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .card { padding: 16px; }
  .grid-4 > .card, .grid-3 > .card { padding: 16px; }

  /* ------------------------------------------------------------------------
     Início: o saldo vira um card escuro de largura inteira e os outros três
     KPIs viram uma faixa compacta embaixo. Quatro cards brancos empilhados
     custavam meia tela de rolagem para dizer o que cabe em uma.

     Feito só com grade, sem marcação nova: o primeiro filho ocupa a linha
     toda, os demais dividem três colunas. Assim o desktop não sabe de nada e
     não existe um segundo HTML para manter em sincronia.
     ------------------------------------------------------------------------ */
  #section-dashboard > .grid-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  #section-dashboard > .grid-4 > .card:first-child {
    grid-column: 1 / -1;
    background: var(--ink);
    border-color: var(--ink);
    border-radius: var(--r-modal);
    padding: 20px;
  }
  #section-dashboard > .grid-4 > .card:first-child .card-title { color: rgba(255, 255, 255, 0.55); }
  #section-dashboard > .grid-4 > .card:first-child .card-value { color: #fff; font-size: 30px; }
  #section-dashboard > .grid-4 > .card:first-child .card-delta { color: rgba(255, 255, 255, 0.72); }
  #section-dashboard > .grid-4 > .card:first-child .badge { background: rgba(255, 255, 255, 0.12); color: #fff; }

  /* Os três restantes ficam do tamanho de um número, não de um card. */
  #section-dashboard > .grid-4 > .card:not(:first-child) { padding: 12px 10px; }
  #section-dashboard > .grid-4 > .card:not(:first-child) .card-title { font-size: 9.5px; letter-spacing: 0.8px; }
  /* 13px porque "R$ 13.900,00" em serifada não cabe numa coluna de ~100px
     acima disso — e quebrar um valor em duas linhas o torna ilegível. */
  #section-dashboard > .grid-4 > .card:not(:first-child) .card-value {
    font-size: 13px;
    letter-spacing: -0.2px;
    white-space: nowrap;
  }
  #section-dashboard > .grid-4 > .card:not(:first-child) .card-delta,
  #section-dashboard > .grid-4 > .card:not(:first-child) .badge { display: none; }
  .faixa-backup { padding: 12px 16px; }

  /* O FAB solto some: quem lança agora é o botão do meio da tab bar. */
  .fab { display: none; }

  /* ------------------------------------------------------------------------
     TAB BAR
     ------------------------------------------------------------------------ */
  .tab-bar {
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 120;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--line);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .tab-item {
    flex: 1;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 2px;
    color: var(--faint);
    font-family: var(--font-sans);
    font-size: 10.5px;
    font-weight: 500;
  }
  .tab-item.active { color: var(--accent); font-weight: 700; }

  .tab-fab {
    flex-shrink: 0;
    width: 50px; height: 50px;
    margin: -24px 6px 0;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    border: 3px solid var(--surface);
    box-shadow: var(--shadow-fab);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  .tab-fab:active { background: var(--accent-hover); }

  /* ------------------------------------------------------------------------
     MODAL vira bottom sheet — sobe do rodapé, encosta nas laterais.
     Reaproveita o #txModal existente: nenhuma marcação nova, e openAddTx /
     closeAddTx continuam funcionando sem saber da diferença.
     ------------------------------------------------------------------------ */
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal-card {
    max-width: none;
    border-radius: var(--r-modal) var(--r-modal) 0 0;
    border-bottom: none;
    padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
    max-height: 88vh;
    animation: sobeSheet 0.22s ease;
  }
  /* Alça do bottom sheet. */
  .modal-card::before {
    content: "";
    display: block;
    width: 38px; height: 4px;
    border-radius: var(--r-pill);
    background: var(--line);
    margin: -6px auto 14px;
  }
  @keyframes sobeSheet { from { transform: translateY(100%); } to { transform: none; } }

  /* ------------------------------------------------------------------------
     MENU
     ------------------------------------------------------------------------ */
  #section-menu.active { display: block; }

  .menu-lar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    margin-bottom: 20px;
  }
  .menu-lar .avatar { width: 42px; height: 42px; font-size: var(--fs-md); }
  .menu-lar-nome { font-family: var(--font-serif); font-size: 17px; color: var(--ink); }
  .menu-lar-plano { font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }

  .menu-grupo {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--faint);
    padding: 18px 4px 8px;
  }
  .menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-ctl);
    margin-bottom: 6px;
    cursor: pointer;
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    text-align: left;
  }
  .menu-item > span:first-of-type { flex: 1; }
  .menu-item .ico-lg { color: var(--accent); }
  .menu-nota { font-size: var(--fs-sm); color: var(--faint); }
  .menu-seta { color: var(--faint); }

  /* ------------------------------------------------------------------------
     Ajustes finos de conteúdo
     ------------------------------------------------------------------------ */
  .data-table th:nth-child(n+5), .data-table td:nth-child(n+5) { display: none; }
  .tiles-entrada { grid-template-columns: minmax(0, 1fr); }
  .canal { flex-wrap: wrap; }
  .canal .btn { width: 100%; }

  /* Mesmo escondendo colunas, a tabela tem largura mínima própria e empurrava
     a PÁGINA para o lado. Quem rola é o card, nunca o documento — barra
     horizontal no body quebra a leitura de tudo, não só da tabela. */
  .card:has(> .data-table) { overflow-x: auto; }
  .data-table { min-width: 0; }
  .data-table th, .data-table td { padding: 10px 8px; }

  /* Safari antigo não tem :has(). Sem isto a tabela volta a empurrar a página
     nesses aparelhos — e é justamente onde o problema mais dói. */
  @supports not selector(:has(*)) {
    .data-table { display: block; overflow-x: auto; }
  }

  /* Os badges de status dos canais não cabem lado a lado em 375px. */
  .card-header { flex-wrap: wrap; }
  .card-header .row-actions { flex-wrap: wrap; }
  .ai-panel { height: calc(100vh - 220px); min-height: 340px; }
  .form-row { grid-template-columns: minmax(0, 1fr); }
  .section-title { font-size: 22px; }
  .card-value, .grid-4 > .card .card-value { font-size: 25px; }
}