/* Financeiro mobile — CSS puro, sem observer/JS em runtime. */
@media (max-width: 640px) {
  /* Escopo exclusivo da página Financeiro. */
  .page-container:has(.module-tabs[aria-label="Navegação financeira"]) {
    padding: 10px 12px 24px !important;
    overflow-x: hidden !important;
  }

  .page-container:has(.module-tabs[aria-label="Navegação financeira"]) > .page-title {
    margin-bottom: 14px !important;
    font-size: 22px !important;
  }

  /* Abas: uma linha rolável, sem cortar as opções seguintes. */
  .page-container:has(.module-tabs[aria-label="Navegação financeira"]) .module-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    margin-bottom: 16px !important;
    padding-bottom: 3px !important;
    gap: 8px !important;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .page-container:has(.module-tabs[aria-label="Navegação financeira"]) .module-tabs::-webkit-scrollbar {
    display: none;
  }
  .page-container:has(.module-tabs[aria-label="Navegação financeira"]) .module-tab {
    flex: 0 0 auto !important;
    min-height: 46px !important;
    padding: 0 16px !important;
    white-space: nowrap !important;
    scroll-snap-align: start;
  }

  /* Contas a pagar / receber / extrato: deixa de ser conteúdo + painel lateral. */
  .page-container:has(.module-tabs[aria-label="Navegação financeira"])
    > div[style*="display: flex"][style*="gap: 16px"][style*="align-items: start"] {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  .page-container:has(.module-tabs[aria-label="Navegação financeira"])
    > div[style*="display: flex"][style*="gap: 16px"][style*="align-items: start"]
    > div:first-child {
    width: 100% !important;
    min-width: 0 !important;
    order: 2;
  }

  /* Indicadores saem da lateral e viram 2x2 no topo. */
  .page-container:has(.module-tabs[aria-label="Navegação financeira"])
    [style*="width: 200px"][style*="flex-shrink: 0"] {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    order: 1;
  }
  .page-container:has(.module-tabs[aria-label="Navegação financeira"])
    [style*="width: 200px"][style*="flex-shrink: 0"]
    > div[style*="height: 10px"] {
    display: none !important;
  }
  .page-container:has(.module-tabs[aria-label="Navegação financeira"])
    [style*="width: 200px"][style*="flex-shrink: 0"]
    > div[style*="background: white"] {
    min-width: 0 !important;
    min-height: 90px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }
  .page-container:has(.module-tabs[aria-label="Navegação financeira"])
    [style*="width: 200px"][style*="flex-shrink: 0"]
    > div[style*="background: white"] > div:first-child {
    margin-bottom: 5px !important;
    font-size: 10px !important;
  }
  .page-container:has(.module-tabs[aria-label="Navegação financeira"])
    [style*="width: 200px"][style*="flex-shrink: 0"]
    > div[style*="background: white"] > div:last-child {
    font-size: 18px !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere;
  }

  /* Atalhos de vencimento: faixa horizontal compacta. */
  .page-container:has(.module-tabs[aria-label="Navegação financeira"])
    div[style*="flex-wrap: wrap"][style*="margin-bottom: 10px"][style*="gap: 6px"] {
    flex-wrap: nowrap !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 2px 0 6px !important;
    margin-bottom: 10px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .page-container:has(.module-tabs[aria-label="Navegação financeira"])
    div[style*="flex-wrap: wrap"][style*="margin-bottom: 10px"][style*="gap: 6px"]::-webkit-scrollbar {
    display: none;
  }
  .page-container:has(.module-tabs[aria-label="Navegação financeira"])
    div[style*="flex-wrap: wrap"][style*="margin-bottom: 10px"][style*="gap: 6px"] > * {
    flex: 0 0 auto !important;
  }
  .page-container:has(.module-tabs[aria-label="Navegação financeira"])
    div[style*="flex-wrap: wrap"][style*="margin-bottom: 10px"][style*="gap: 6px"] button {
    min-height: 36px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
  }

  /* Linha de busca + 2 períodos + atualizar + filtro nas contas. */
  .page-container:has(.module-tabs[aria-label="Navegação financeira"])
    div[style*="display: flex"][style*="align-items: center"][style*="gap: 8px"][style*="margin-bottom: 16px"]:has(> :nth-child(5)) {
    display: grid !important;
    grid-template-columns: 48px 48px 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    align-items: center !important;
  }
  .page-container:has(.module-tabs[aria-label="Navegação financeira"])
    div[style*="display: flex"][style*="align-items: center"][style*="gap: 8px"][style*="margin-bottom: 16px"]:has(> :nth-child(5))
    > :first-child {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .page-container:has(.module-tabs[aria-label="Navegação financeira"])
    div[style*="display: flex"][style*="align-items: center"][style*="gap: 8px"][style*="margin-bottom: 16px"]:has(> :nth-child(5))
    > :nth-child(2),
  .page-container:has(.module-tabs[aria-label="Navegação financeira"])
    div[style*="display: flex"][style*="align-items: center"][style*="gap: 8px"][style*="margin-bottom: 16px"]:has(> :nth-child(5))
    > :nth-child(3) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    display: block !important;
  }
  .page-container:has(.module-tabs[aria-label="Navegação financeira"])
    div[style*="display: flex"][style*="align-items: center"][style*="gap: 8px"][style*="margin-bottom: 16px"]:has(> :nth-child(5))
    > :nth-child(2) > div:first-child,
  .page-container:has(.module-tabs[aria-label="Navegação financeira"])
    div[style*="display: flex"][style*="align-items: center"][style*="gap: 8px"][style*="margin-bottom: 16px"]:has(> :nth-child(5))
    > :nth-child(3) > div:first-child {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
  }
  .page-container:has(.module-tabs[aria-label="Navegação financeira"])
    div[style*="display: flex"][style*="align-items: center"][style*="gap: 8px"][style*="margin-bottom: 16px"]:has(> :nth-child(5))
    > :nth-child(4) {
    grid-column: 1 !important;
    width: 48px !important;
    height: 44px !important;
  }
  .page-container:has(.module-tabs[aria-label="Navegação financeira"])
    div[style*="display: flex"][style*="align-items: center"][style*="gap: 8px"][style*="margin-bottom: 16px"]:has(> :nth-child(5))
    > :nth-child(5) {
    grid-column: 2 !important;
    width: 48px !important;
  }
  .page-container:has(.module-tabs[aria-label="Navegação financeira"])
    div[style*="display: flex"][style*="align-items: center"][style*="gap: 8px"][style*="margin-bottom: 16px"]:has(> :nth-child(5)) input {
    min-height: 44px !important;
    font-size: 16px !important;
  }

  /* Extrato: busca ocupa a largura e ações ficam embaixo. */
  .page-container:has(.module-tabs[aria-label="Navegação financeira"])
    div[style*="display: flex"][style*="align-items: center"][style*="gap: 8px"][style*="margin-bottom: 16px"]:not(:has(> :nth-child(5))) {
    flex-wrap: wrap !important;
    width: 100% !important;
  }
  .page-container:has(.module-tabs[aria-label="Navegação financeira"])
    div[style*="display: flex"][style*="align-items: center"][style*="gap: 8px"][style*="margin-bottom: 16px"]:not(:has(> :nth-child(5))) > :first-child {
    flex: 1 0 100% !important;
    width: 100% !important;
  }

  /* Popover de filtros sempre dentro da viewport. */
  .page-container:has(.module-tabs[aria-label="Navegação financeira"])
    div[style*="position: absolute"][style*="z-index: 9999"][style*="width: 300px"],
  .page-container:has(.module-tabs[aria-label="Navegação financeira"])
    div[style*="position: absolute"][style*="z-index: 9999"][style*="width: 260px"] {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: 120px !important;
    width: auto !important;
    max-height: calc(100dvh - 144px) !important;
    overflow-y: auto !important;
    border-radius: 14px !important;
  }

  /* Tabela recebe a tela toda; rolagem horizontal fica só nela. */
  .page-container:has(.module-tabs[aria-label="Navegação financeira"]) .table-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    border-radius: 12px !important;
    -webkit-overflow-scrolling: touch;
  }
  .page-container:has(.module-tabs[aria-label="Navegação financeira"]) .table-wrapper table {
    width: max-content !important;
    min-width: 760px !important;
    table-layout: auto !important;
  }
  .page-container:has(.module-tabs[aria-label="Navegação financeira"]) .table-wrapper th,
  .page-container:has(.module-tabs[aria-label="Navegação financeira"]) .table-wrapper td {
    padding: 10px !important;
    white-space: nowrap;
  }

  /* O calendário de período não deve empurrar a página para fora da viewport. */
  .page-container:has(.module-tabs[aria-label="Navegação financeira"])
    div[style*="position: absolute"][style*="padding-bottom: 48px"] {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    top: 112px !important;
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 128px) !important;
    overflow: auto !important;
  }
}