/* Etapa 3.19 — Controle de Pagamentos: layout de tela cheia + matriz compacta tipo planilha
   financeira (busca, filtro de status, densidade, coluna e cabeçalho fixos). Só esta view ganha
   esse comportamento de altura fixa/rolagem interna — as demais continuam rolando a página normal
   como sempre funcionaram.
   Tentativa anterior: tirar a rolagem vertical própria e deixar a página inteira rolar. Não dá —
   cabeçalho/coluna fixos (position:sticky) precisam de um ancestral com overflow próprio pra saber
   onde "grudar"; sem ele, o cabeçalho fica solto e passa a sobrepor as linhas no meio da rolagem
   (relatado como "ficou ruim, cortando tudo"). Mantém a rolagem interna, só troca a aparência das
   duas barras (vertical e horizontal) pra uma versão fina, sem as setinhas feias do Windows. */
#pagamentos-view.active {
  display: flex; flex-direction: column; height: calc(100vh - 91px);
  padding: 10px 20px 10px; box-sizing: border-box; gap: 7px;
}
.payments-by-owner { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.payments-by-owner > .payment-matrix-wrap { flex: 1; min-height: 0; }

@media (max-width: 780px) {
  #pagamentos-view.active { height: calc(100vh - 78px); padding: 8px 12px; }
}

/* Título e explicação agora ficam no cabeçalho principal (#page-title/#page-subtitle) — aqui fica
   uma única faixa com a competência primeiro, e os 3 totais logo em seguida, próximos entre si. */
.payments-toolbar { display: flex; align-items: center; gap: 12px; flex: none; flex-wrap: wrap; row-gap: 6px; }
.month-picker.compact { padding: 6px 10px 6px 12px; font-size: 10px; flex: none; }

/* Resumo compacto — 3 indicadores lado a lado, colados uns nos outros, largura no conteúdo. */
.payment-summary.compact { display: flex; gap: 6px; margin: 0; flex: none; }
.payment-summary.compact article { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; white-space: nowrap; }
.payment-summary.compact article span { font-size: 9px; display: block; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.payment-summary.compact article strong { font-size: 14px; display: block; margin-top: 1px; color: var(--ink); }
.payment-summary.compact .summary-paid strong { color: var(--green-2); }
.payment-summary.compact .summary-pending strong { color: var(--orange); }

/* Busca por responsável + filtro de status + densidade — só filtram quais linhas aparecem, os
   totais continuam calculados sobre todos os dados independente do filtro. */
.payments-filters { display: flex; align-items: center; gap: 8px; flex: none; flex-wrap: wrap; }
.payments-search { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: #fff; border-radius: 9px; padding: 6px 10px; font-size: 11px; color: var(--muted); flex: 1; min-width: 160px; max-width: 260px; }
.payments-search input { border: 0; outline: 0; font: 500 11px "DM Sans"; color: var(--ink); width: 100%; background: transparent; }
#payment-status-filter { border: 1px solid var(--line); background: #fff; border-radius: 9px; padding: 6px 10px; font: 500 11px "DM Sans"; color: var(--ink); }
.density-toggle { display: flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; margin-left: auto; }
.density-toggle button { border: 0; background: #fff; padding: 6px 12px; font: 700 10px "DM Sans"; color: var(--muted); cursor: pointer; }
.density-toggle button.active { background: var(--green-2); color: #fff; }

/* Matriz — cabeçalho e coluna de responsável ficam sticky (fixos) durante a rolagem, e o quadro
   inteiro preenche o espaço restante da tela, com rolagem só por dentro dele (vertical E lateral,
   inclusive com Shift+scroll do mouse, que já é comportamento nativo do navegador aqui). */
.payment-matrix-wrap {
  /* Também leva a classe genérica ".table-wrap" (Lançamentos) — precisa redeclarar max-height/height
     porque o "max-height:calc(100vh - 300px)" dela não bate com o layout desta tela. */
  height: 100%; max-height: none;
  border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow);
  overflow: auto;
  scrollbar-width: thin; scrollbar-color: #c3ccc6 transparent;
}
.payment-matrix-wrap::-webkit-scrollbar { width: 8px; height: 8px; }
.payment-matrix-wrap::-webkit-scrollbar-track { background: transparent; }
.payment-matrix-wrap::-webkit-scrollbar-thumb { background: #c3ccc6; border-radius: 8px; }
.payment-matrix-wrap::-webkit-scrollbar-thumb:hover { background: #a9b5ad; }
.payment-matrix { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 11px; text-align: center; }
.payment-matrix thead th {
  position: sticky; top: 0; z-index: 2; background: #fafbf9;
  border-bottom: 1px solid var(--line); padding: 6px 8px; vertical-align: middle; white-space: normal;
  text-align: center; line-height: 1.25;
}
/* Coluna do responsável: cinza (não compete com as cores dos cartões), sempre visível na rolagem
   lateral, entre 180 e 220px de largura. */
.payment-owner-col {
  position: sticky; left: 0; z-index: 3; background: #d8dbd6; text-align: center; vertical-align: middle;
  min-width: 200px; width: 200px;
}
/* Cabeçalho do cartão usa a MESMA cor do cadastro (--card-color/--card-end/--card-text, definidos
   inline por cartão em app.js), pra reconhecer o cartão pela cor igual em qualquer tela — e o
   total logo abaixo do nome, em destaque. Largura maior pra caber bem o nome do cartão e o valor. */
.payment-card-col {
  min-width: 185px; width: 185px; text-align: center !important;
  background: linear-gradient(145deg, var(--card-color), var(--card-end)) !important;
  color: var(--card-text) !important; border-bottom: 0 !important;
}
.payment-card-head { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .03em; font-weight: 700; opacity: .92; text-align: center; white-space: normal; line-height: 1.3; }
.payment-card-total { display: block; margin-top: 4px; font-size: 13px; font-weight: 800; text-align: center; }

.payment-owner-row {
  position: sticky; left: 0; z-index: 1; padding: 6px 10px; min-width: 200px; width: 200px; vertical-align: middle;
  border-bottom: 1px solid #c7cbc3; background: #d8dbd6; text-align: center;
}
.owner-name { display: block; font-weight: 700; font-size: 11px; color: var(--ink); }
.owner-total { display: block; margin-top: 2px; font-size: 12px; font-weight: 800; color: var(--green-2); }

/* Célula da compra: cor do cartão suavizada (mais clara, melhor contraste pro texto), sem
   reservar espaço nenhum quando não há valor (só o "—" centralizado). Quando há valor, tudo bem
   compacto: valor em destaque, status em badge pequeno, data/observação numa linha estreita. */
.payment-cell {
  padding: 4px; vertical-align: middle; text-align: center; border: 0;
  background: linear-gradient(145deg, color-mix(in srgb, var(--card-color) 42%, #fff), color-mix(in srgb, var(--card-end) 42%, #fff));
  min-width: 185px; width: 185px;
}
.payment-cell.empty { color: color-mix(in srgb, var(--card-color) 55%, var(--muted)); background: color-mix(in srgb, var(--card-color) 10%, #fff); font-size: 12px; padding: 4px; }
.cell-inner { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 3px 2px; }
.cell-value { display: block; font-size: 12px; font-weight: 800; color: var(--ink); }
.cell-status {
  display: block; border: 1px solid color-mix(in srgb, var(--card-color) 55%, #000 12%); background: rgba(255, 255, 255, .55);
  border-radius: 5px; padding: 1px 7px; font: 700 7px "DM Sans"; text-transform: uppercase; letter-spacing: .02em;
  color: color-mix(in srgb, var(--card-color) 45%, #663300); cursor: pointer; box-sizing: border-box; white-space: nowrap;
}
.cell-inner.is-paid .cell-status { color: var(--green-2); border-color: #9fcfa9; background: rgba(255, 255, 255, .75); }
.cell-fields { display: flex; gap: 3px; width: 100%; }
.cell-date, .cell-notes {
  display: block; border: 0; border-radius: 4px; background: rgba(255, 255, 255, .55);
  padding: 1px 3px; font: 500 8px "DM Sans"; color: var(--ink); box-sizing: border-box; text-align: center; min-width: 0;
}
.cell-date { flex: 1.5; }
.cell-notes { flex: 1; }
.cell-date::placeholder, .cell-notes::placeholder { color: var(--muted); }

.payment-empty-row { padding: 30px; color: var(--muted); font-size: 12px; }

/* Realce discreto ao passar o mouse — ajuda a acompanhar a linha/célula certa numa matriz grande,
   sem exagero. */
.payment-matrix tbody tr:hover .payment-owner-row { background: #cfd3cc; }
.payment-cell:hover:not(.empty) { outline: 2px solid rgba(20, 32, 26, .3); outline-offset: -2px; }

/* Densidade "Compacta" — reduz ainda mais linhas/colunas/campos pra caber o máximo de informação
   possível numa tela cheia. */
.payment-matrix-wrap.is-compact .payment-cell,
.payment-matrix-wrap.is-compact .payment-card-col { min-width: 108px; width: 108px; padding: 3px; }
.payment-matrix-wrap.is-compact .payment-owner-row,
.payment-matrix-wrap.is-compact .payment-owner-col { min-width: 150px; width: 150px; padding: 4px 6px; }
.payment-matrix-wrap.is-compact .cell-value { font-size: 10px; }
.payment-matrix-wrap.is-compact .cell-status,
.payment-matrix-wrap.is-compact .cell-fields { display: none; }
.payment-matrix-wrap.is-compact .owner-name,
.payment-matrix-wrap.is-compact .owner-total { font-size: 10px; }
.payment-matrix-wrap.is-compact .payment-card-head { font-size: 8px; }
.payment-matrix-wrap.is-compact .payment-card-total { font-size: 11px; }

@media (max-width: 780px) {
  .payments-toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
  .payment-summary.compact { flex-wrap: wrap; }
  .payment-summary.compact article { flex: 1; min-width: 100px; }
  .payment-summary.compact { grid-template-columns: 1fr; }
  .payments-filters { flex-direction: column; align-items: stretch; }
  .density-toggle { margin-left: 0; }
}

/* Etapa 3.9/3.11 - PWA offline */
#entry-offline-note{margin:-8px 0 18px;padding:10px 12px;border-radius:9px;background:#fff4e5;color:#a9641c;font-size:11px;border:1px solid #f2dfc4}
#sync-status-btn{border-color:#f2dfc4;background:#fff8ec;color:#a9641c}
.entry-title small.pending-sync{display:inline-block;margin-left:6px;padding:2px 6px;border-radius:5px;background:#fff4e5;color:#a9641c;font-size:8px;font-weight:800;vertical-align:middle}

/* Correção de segurança: o atributo hidden precisa vencer o display:grid/block das classes */
.app-shell[hidden],.auth-gate[hidden]{display:none!important}

#ocr-status{margin:-8px 0 12px;padding:10px 12px;border-radius:9px;background:#eef4f0;color:#3a5044;font-size:11px;border:1px solid #dbe6de}
#ocr-status a{color:#245c41;font-weight:700}
#ocr-raw-text{white-space:pre-wrap;word-break:break-word;max-height:160px;overflow:auto;margin-top:8px;padding:8px;background:#fff;border-radius:7px;font-size:10px;color:#556}

.card-dot-tag{display:inline-flex;align-items:center;font-weight:700;color:var(--ink);white-space:nowrap}

.profile{margin-top:auto}

/* Etapa 3.16 - filtro de lançamentos por data de compra */
.date-filter{display:flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 10px;font-size:10px;color:var(--muted);white-space:nowrap}
.date-filter input{border:0;outline:0;font:500 12px "DM Sans";color:var(--ink);width:126px}
@media(min-width:781px){.filters{grid-template-columns:minmax(190px,1fr) repeat(3,minmax(150px,.9fr)) repeat(2,auto) auto}}
@media(max-width:780px){.date-filter{width:100%;justify-content:space-between}.date-filter input{width:auto}}