/* Responsividade mobile — NÃO altera o desktop (tudo dentro de @media).
   Foco: nada de scroll horizontal da página; tabelas viram cards; modais cabem na tela. */

@media (max-width: 760px) {
  html, body { overflow-x: hidden; max-width: 100%; }
  .app-main { padding: .8rem .7rem; }

  /* Header: logo + ações na 1ª linha; nav rola sozinha na 2ª (não empurra a página) */
  .app-header { flex-wrap: wrap; gap: .4rem .8rem; padding: .55rem .8rem; }
  .app-logo { font-size: .95rem; }
  .app-nav {
    order: 3; width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .app-nav::-webkit-scrollbar { height: 0; display: none; }
  .app-header-actions { margin-left: auto; }
  .theme-toggle-mini { display: none; } /* economiza espaço no mobile */

  /* KPIs em 2 colunas */
  .kpi-strip { grid-template-columns: repeat(2, 1fr) !important; }

  /* Subnav empilha: descritor + ações em cima; contas viram CARROSSEL com snap */
  .page-subnav { flex-wrap: wrap; gap: .5rem .6rem; }
  .page-subnav-divider { display: none; }
  /* linha 1: título · linha 2: total + ações · linha 3: carrossel sozinho (snap limpo) */
  .page-subnav-title { order: 1; width: 100%; }
  .page-subnav-total { order: 2; }
  .page-subnav-actions { order: 3; margin-left: auto; border-left: none; padding-left: 0; }

  /* carrossel de contas — um banco por vez, swipe lateral com snap (linha própria) */
  .page-subnav-tabs {
    order: 4; width: 100%;
    display: flex; gap: .6rem;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 .2rem;
    padding: .1rem .2rem .4rem;
    scrollbar-width: none;
  }
  .page-subnav-tabs::-webkit-scrollbar { display: none; height: 0; }
  .acct-tab {
    scroll-snap-align: center;
    flex: 0 0 86%;                 /* um por vez + espiada do próximo */
    justify-content: flex-start;
    gap: .6rem;
    padding: .7rem .85rem;
    border: 1px solid var(--border);
    border-radius: .7rem;
    background: var(--surface);
    box-shadow: 0 1px 3px rgba(15,23,42,.05);
  }
  .acct-tab-icon { width: 1.9rem; height: 1.9rem; font-size: .7rem; }
  .acct-tab-saldo {
    margin-left: auto; opacity: 1 !important;
    font-size: .95rem; font-weight: 700;
  }
  .acct-tab.on { background: var(--text); color: var(--surface); border-color: var(--text); }
  .acct-tab.on .acct-tab-saldo { opacity: 1 !important; }

  /* Sub-navs (Painel, Banco, Cartão) viram GATILHO-CHIP no mobile:
     esconde a fileira de chips + o título/divisores (que deixavam linha vazia) e
     mostra o chip ativo + ▾ — maior, ocupando a linha. */
  .page-subnav { padding: .4rem .5rem; gap: .5rem; min-height: 0; }
  .page-subnav-tabs, .page-subnav-title, .page-subnav-divider { display: none; }
  .subnav-chipdrop { display: flex; flex: 1 1 100%; min-width: 0; }
  .chip-drop { width: 100%; justify-content: flex-start; gap: .55rem; padding: .55rem .8rem; font-size: .95rem; border-radius: .6rem; }
  .chip-drop .acct-tab-icon { width: 1.8rem; height: 1.8rem; font-size: .66rem; flex-shrink: 0; }
  .chip-drop-car { margin-left: auto; font-size: .8rem; }
  /* total geral numa linha própria, alinhado à esquerda sob o chip */
  .page-subnav-total { order: 2; margin-left: 0; display: flex; align-items: baseline; gap: .4rem; padding: 0 .2rem; }

  /* Filter bar no celular: só [‹ ano ›] + [mês ▾] — o resto (meses, regime, previstos)
     vai pro menu padrão que abre no "▾". Compacta de 3 fileiras pra 1. */
  .filter-bar { flex-wrap: wrap; gap: .35rem; padding: .45rem .55rem; align-items: center; }
  .filter-bar-label, .filter-bar-range, .filter-bar-mesnav, .filter-bar-right { display: none; }
  .filter-bar-anonav button { height: 1.7rem; font-size: .7rem; padding: 0 .4rem; min-width: 2.1rem; }
  .filter-bar-anonav button[data-anostep] { min-width: 1.4rem; }
  .filter-bar-mais { font-size: .76rem; font-weight: 700; padding: .35rem .75rem; margin-left: auto; }

  /* Lançamentos viram CARD (a data vem do divisor do dia; oculta colunas densas) */
  .lanc-list-head { display: none; }
  .lanc {
    grid-template-columns: 1fr auto;
    grid-template-areas: "desc money" "sub sub";
    row-gap: .3rem; column-gap: .6rem; padding: .65rem .8rem;
    align-items: start;
  }
  .lanc > :nth-child(1) { grid-area: sub; border-right: none; padding-right: 0; }
  .lanc > :nth-child(2) { grid-area: desc; }
  .lanc > :nth-child(3) { display: none; }            /* freq */
  .lanc > :nth-child(4) { display: none; }            /* datas (vem no divisor do dia) */
  .lanc > :nth-child(5) { grid-area: money; text-align: right; }
  .lanc > :nth-child(6) { display: none; }            /* menu ⋯ */
  .lanc-desc-main { white-space: normal; }            /* deixa o nome quebrar */

  /* Modais ocupam a tela e rolam internamente */
  .imp-overlay { padding: .4rem; align-items: flex-start; overflow-y: auto; }
  .imp-modal { width: 96vw !important; max-width: 96vw !important; max-height: 94vh; overflow-y: auto; }
  /* conciliação: só o CORPO rola; rodapé (Gravar) fica fixo e visível */
  .conc-modal { width: 96vw !important; max-width: 96vw !important; max-height: 92vh; overflow: hidden !important; display: flex; flex-direction: column; }
  .conc-modal .conc-body { flex: 1 1 auto; min-height: 50px; }
  .conc-modal .imp-footer { flex-shrink: 0; }

  /* Conciliação no mobile: cada transação vira um CARD empilhado (mesmo HTML, só re-layout) */
  .conc-body { overflow-x: hidden; }
  .conc-head { display: none; }
  .conc-row {
    min-width: 0;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "chk  data  valor"
      "stat stat  stat"
      "desc desc  desc"
      "cen  cen   cen"
      "cat  cat   cat";
    gap: .35rem .5rem;
    padding: .7rem .8rem;
    border: 1px solid var(--border);
    border-radius: .65rem;
    margin-bottom: .5rem;
    align-items: center;
  }
  .conc-row > .conc-chk   { grid-area: chk; }
  .conc-row > .conc-data  { grid-area: data; font-size: .8rem; }
  .conc-row > .conc-valor { grid-area: valor; font-size: .95rem; }
  .conc-row > .conc-desc  { grid-area: desc; }
  .conc-row > .conc-status{ grid-area: stat; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .3rem; }
  .conc-row > :nth-child(5) { grid-area: cen; }   /* célula centro de custo */
  .conc-row > :nth-child(6) { grid-area: cat; }   /* célula categoria */
  .conc-centro, .conc-cat, .conc-desc-input { font-size: .82rem; padding: .45rem .5rem; }
  .conc-sugchip { font-size: .68rem; padding: .2rem .5rem; white-space: normal; }
  .conc-daysep { position: static; }

  /* barra de ação em massa empilha confortável no mobile */
  .conc-bulkedit { flex-wrap: wrap; }
  .conc-be-centro, .conc-be-cat, .conc-be-evento, .conc-be-nome { max-width: none; flex: 1 1 45%; }

  /* Cadastros em 1 coluna */
  .cad-grid { grid-template-columns: 1fr !important; }

  /* Lançamentos: facetas empilham (sem divisor vertical apertado) */
  .lanc-facets { flex-wrap: wrap; }
  .lanc-facets .split-cell { flex: 1 1 100%; padding: .5rem .7rem; }
  .lanc-facets .split-divider-v { display: none; }
}

@media (max-width: 440px) {
  .kpi-strip { grid-template-columns: 1fr 1fr; }
  .cad-list.cols-2, .cad-list.cols-3 { column-count: 1 !important; }
  .app-nav-item { padding: .42rem .7rem; }
}