/* ============================================================
   Izzy Money · camada mobile
   ------------------------------------------------------------
   Carregada por último: ajusta densidade, alvos de toque e as
   peças que só quebram em tela estreita. Tudo aqui é acréscimo
   — nada depende deste arquivo para funcionar no desktop.
   ============================================================ */

/* ============================================================
   1. Alvos de toque e teclado do iOS
   ============================================================ */
@media (max-width:900px){

  /* Abaixo de 16px o Safari dá zoom ao focar o campo e o layout
     "pula" — 16px é o menor tamanho que não dispara isso. */
  .input, .select, .textarea{ font-size:16px; height:46px; }
  .textarea{ height:auto; min-height:104px; }

  /* 44px é o mínimo confortável para o dedo (WCAG 2.5.5). */
  .btn{ min-height:44px; padding:0 16px; font-size:14px; }
  .btn--sm{ min-height:38px; font-size:13px; padding:0 13px; }
  .btn--xs{ min-height:32px; font-size:12px; padding:0 10px; }
  .icon-btn{ width:40px; height:40px; flex-basis:40px; }
  .chip{ height:36px; font-size:13px; padding:0 14px; }

  /* rolagem com inércia e sem "puxar" a página inteira */
  .table-wrap, .tabs, .seg, .scroll-x{
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }

  /* o toque não deve pintar um retângulo cinza */
  a, button, .chip, .card--hover{ -webkit-tap-highlight-color:transparent; }

  /* efeitos de hover não existem no toque e deixam estados presos */
  .card--hover:hover, .kpi:hover{ transform:none; box-shadow:var(--sh-sm); }
}

/* ============================================================
   2. Barra superior
   ============================================================ */
@media (max-width:900px){
  /* O botão "Abrir chat" vira um pastilha vazia sem o rótulo, e a
     barra inferior já tem o Izzy Chat: some com ele e devolve o
     espaço para o seletor de mês, que é o controle que faz falta. */
  .btn--chat{ display:none; }

  .month-picker{
    display:flex;
    padding:2px;
    background:var(--bg-alt);
  }
  /* Cada pixel aqui sai do título da página: o seletor precisa ser
     do tamanho exato do conteúdo, não do desktop encolhido. */
  .month-picker button{ width:28px; height:28px; flex:0 0 28px; }
  .month-picker button svg{ width:13px; height:13px; }
  .month-picker__label{ min-width:0; padding:0 3px; font-size:12px; }
  .month-picker__label b{ display:none; }
  .month-picker__label i{ display:inline; font-style:normal; font-weight:600; }

  .topbar{ gap:8px; padding:0 12px; }
  .topbar__actions{ gap:6px; flex:0 0 auto; }
  /* o título fica com a sobra da barra em vez de um resto fixo */
  .topbar__title{ flex:1 1 auto; min-width:0; }
  .topbar__title h1{ font-size:16px; }
}

@media (max-width:359px){
  /* Nesta largura o título vira "C…", que não informa nada. A aba
     ativa da barra inferior já diz em que página estamos, então
     o título sai e o mês — que não está em lugar nenhum — fica. */
  .topbar__title{ display:none; }
  .month-picker__label{ font-size:11.5px; }
}

/* ============================================================
   3. Botão flutuante
   ============================================================ */
@media (max-width:900px){
  /* Ele flutuava por cima dos valores dos cards e repetia um
     destino que já está na barra inferior. */
  .fab{ display:none !important; }
}

/* ============================================================
   4. Densidade — dois cards por linha no celular
   ============================================================ */
@media (max-width:900px){
  .grid-4, .grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid-3{ grid-template-columns:repeat(2,minmax(0,1fr)); }

  /* blocos que não cabem em meia tela ocupam a linha inteira */
  .grid-3 > .card, .grid-8-4 > *, .grid-7-5 > *, .grid-5-7 > *{
    grid-column:1 / -1;
  }

  .kpi{ padding:12px 13px 12px; }
  .kpi__label{ font-size:9.4px; letter-spacing:.09em; }
  .kpi__value{ font-size:clamp(17px,5.2vw,22px); margin-top:4px; }
  .kpi__foot{ font-size:10.6px; gap:4px; margin-top:4px; }
  .kpi__spark{ display:none; }

  .card__head{ padding:14px 14px 8px; }
  .card__body{ padding:0 14px 14px; }
  .card--pad{ padding:14px; }
  .card__title{ font-size:14px; }
}

@media (max-width:359px){
  /* abaixo disso dois por linha começam a truncar os valores */
  .grid-4, .grid-3, .grid-2{ grid-template-columns:1fr; }
  .kpi__value{ font-size:22px; }
}

/* ============================================================
   5. Faixa de destaque (hero) — empilha em vez de espremer
   ============================================================ */
@media (max-width:640px){
  .hero{
    align-items:flex-start;
    gap:10px;
    padding:13px 14px;
    row-gap:12px;
  }
  .hero__mascot{ width:42px; flex-basis:42px; margin:0; }
  .hero__t{ font-size:13.4px; line-height:1.35; }
  .hero__s{ font-size:11.8px; }
  /* o botão desce para a linha de baixo, inteiro */
  .hero .btn{ width:100%; order:9; }
  .hero::after{ width:180px; height:180px; right:-60px; top:-80px; }
}

/* ============================================================
   6. Afordância de rolagem horizontal
   ------------------------------------------------------------
   Tabela e abas já rolavam, mas nada indicava isso — o conteúdo
   simplesmente parecia cortado. A sombra na borda direita
   aparece só enquanto há o que rolar.
   ============================================================ */
@media (max-width:900px){
  /* a tabela rolava sem dizer que rolava: a sombra na borda avisa */
  .table-wrap{
    background:
      linear-gradient(to right, var(--surface) 30%, rgba(255,255,255,0)) left / 24px 100% no-repeat,
      linear-gradient(to left,  var(--surface) 30%, rgba(255,255,255,0)) right / 24px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%, rgba(12,22,19,.11), transparent) left / 11px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(12,22,19,.11), transparent) right / 11px 100% no-repeat;
    background-attachment:local, local, scroll, scroll;
  }

  .tabs{ margin-bottom:12px; padding-bottom:1px; }
  .tabs button{ padding:10px 13px; font-size:13px; }
  /* margem no fim para a última aba não colar na borda */
  .tabs::after{ content:""; flex:0 0 8px; }
}

/* ============================================================
   7. Contas a pagar — linha respirável
   ============================================================ */
@media (max-width:560px){
  /* linha 1: data + descrição · linha 2: valor + situação + ação */
  .bill{ flex-wrap:wrap; row-gap:9px; padding:12px 14px; align-items:flex-start; }
  .bill__date{ flex:0 0 42px; width:42px; }
  .bill__main{ flex:1 1 0; min-width:0; }
  .bill__name{ font-size:13.6px; }
  .bill__right{
    flex:1 1 100%;
    margin-left:0;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:8px;
  }
}

/* ============================================================
   8. Cartões de crédito
   ============================================================ */
@media (max-width:560px){
  .cc{ padding:15px; }
  .cc__value{ font-size:24px; }
  .cc__meta{ font-size:11px; }
}

/* ============================================================
   9. Categorias, membros e demais grades finas
   ============================================================ */
@media (max-width:640px){
  .member-card{ padding:14px; }
  .cat-card{ padding:13px; }
  .extract-grid{ grid-template-columns:1fr; }
  .compare-row{ flex-wrap:wrap; row-gap:6px; }
  .heat{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* ============================================================
   10. Chat
   ============================================================ */
@media (max-width:900px){
  /* as sugestões já rolam de lado (chat.css); aqui só o toque */
  .wa-quick{ -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
  .wa-quick button{ height:36px; }

  /* o compositor encosta na borda do aparelho: respeita a área segura */
  .wa-composer{ padding-bottom:calc(8px + var(--safe-b)); }
}

/* ============================================================
   11. Modais e gavetas — folha inferior
   ============================================================ */
@media (max-width:640px){
  .modal__body{
    /* teclado aberto no iOS come metade da tela */
    max-height:calc(92dvh - 132px);
    padding:16px;
  }
  .modal__head{ padding:16px 16px 10px; }
  .modal__foot{ padding:12px 16px calc(12px + var(--safe-b)); }
  .drawer__head{ padding:16px 16px 12px; }
  .drawer__body{ padding:16px; }
  .drawer__foot{ padding:12px 16px calc(12px + var(--safe-b)); }

  /* alça de arrastar, para a folha parecer uma folha */
  .modal::before{
    content:"";
    position:absolute;
    top:7px; left:50%;
    transform:translateX(-50%);
    width:38px; height:4px;
    border-radius:99px;
    background:var(--line-strong);
  }
  .modal__head{ padding-top:20px; }
}

/* ============================================================
   12. Avisos e toasts
   ============================================================ */
@media (max-width:640px){
  .toast{ max-width:none; }
  .toast-root{ left:12px; right:12px; }
}

/* ============================================================
   13. Barra inferior — mais legível
   ============================================================ */
@media (max-width:900px){
  .tabbar__item{ font-size:9.6px; gap:2px; padding-top:2px; }
  .tabbar__item svg{ width:20px; height:20px; }
}

@media (max-width:340px){
  /* iPhone SE de primeira geração e afins */
  .tabbar__item{ font-size:8.8px; }
  .tabbar__item svg{ width:18px; height:18px; }
}

/* ============================================================
   14. Impressão e telas muito baixas
   ============================================================ */
@media (max-height:520px) and (max-width:900px){
  /* celular deitado: a barra inferior come a tela toda */
  .tabbar{ display:none; }
  :root{ --tabbar-h:0px; }
}

/* ============================================================
   15. Tabelas viram cartões no celular
   ------------------------------------------------------------
   Sete colunas nunca vão caber em 390px. Em vez de rolar de lado
   (onde o valor, que é o que interessa, fica escondido), cada
   linha vira um cartão com a informação empilhada na ordem de
   leitura: o que foi, de que categoria, quando e quanto.
   ============================================================ */
@media (max-width:640px){
  .table-wrap{ overflow:visible; background:none; }

  .tbl{ min-width:0; width:100%; display:block; }
  .tbl thead{ display:none; }
  .tbl tbody{ display:block; }

  .tbl tbody tr{
    display:grid;
    grid-template-columns:auto auto 1fr auto;
    grid-template-areas:
      "desc desc desc acoes"
      "cat  quem origem origem"
      "data data .     valor";
    align-items:center;
    gap:7px 8px;
    padding:12px 14px;
    border-bottom:1px solid var(--line);
  }
  .tbl tbody tr:last-child{ border-bottom:none; }
  .tbl tbody tr:hover{ background:transparent; }

  .tbl tbody td{
    display:block;
    padding:0;
    border:none;
    min-width:0;
  }

  .tbl td[data-c="desc"]{ grid-area:desc; }
  .tbl td[data-c="cat"]{ grid-area:cat; }
  .tbl td[data-c="quem"]{ grid-area:quem; }
  .tbl td[data-c="origem"]{ grid-area:origem; justify-self:start; }
  .tbl td[data-c="data"]{ grid-area:data; }
  .tbl td[data-c="valor"]{ grid-area:valor; justify-self:end; font-size:15px; }
  .tbl td[data-c="acoes"]{ grid-area:acoes; }

  /* a descrição pode usar a largura toda do cartão */
  .tbl td[data-c="desc"] .row-title{ max-width:none !important; white-space:normal; }
  .tbl td[data-c="desc"] .row-sub{ font-size:11.4px; }

  /* as ações ficam sempre visíveis: não existe hover no toque */
  .tbl__actions{ opacity:1 !important; }
  .tbl__actions .icon-btn{ width:34px; height:34px; flex-basis:34px; }
}