/* SALDEX - ajustes de celular (Android/iPhone). Carregado depois do Tailwind. */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }

/* Sem rolagem horizontal involuntária da página */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; }

/* Áreas seguras (notch, barra de gestos) */
body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
main { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }

/* Altura real da tela no celular (a barra do navegador muda 100vh) */
@supports (height: 100dvh) {
  .h-screen { height: 100dvh; }
  .min-h-screen { min-height: 100dvh; }
  @media (max-width: 1024px) { .sidebar { height: 100dvh !important; } }
}
@media (max-width: 1024px) {
  .sidebar { padding-bottom: env(safe-area-inset-bottom); overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

/* Alvos de toque confortáveis e sem zoom automático do iOS ao focar campos */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea { font-size: 16px !important; min-height: 44px; }
  button, .btn, a[role="button"] { min-height: 40px; }
  header button, header a { min-width: 40px; }
}

/* Modais: usáveis com o teclado aberto (rolam em vez de ficar cortados) */
@media (max-width: 768px) {
  div.fixed.inset-0 > div[class*="max-w-"],
  div.fixed.inset-0 > div[class*="w-full"] {
    max-height: calc(100dvh - 1.5rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  div.fixed.inset-0 { padding-bottom: env(safe-area-inset-bottom); }
}

/* Tabelas: rolam dentro da própria área, sem cortar as ações nem alargar a página */
@media (max-width: 768px) {
  main table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Modo instalado: sem seleção de texto acidental nos controles */
@media (display-mode: standalone) {
  button, nav a { -webkit-user-select: none; user-select: none; }
}

/* Foco visível para navegação por teclado/leitor de tela */
:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }

/* cores chapadas: dentro de uma caixa de cor sólida (-600) todo texto e ícone é branco */
.bg-red-600, .bg-red-600 * { color: #fff; }
.bg-rose-600, .bg-rose-600 * { color: #fff; }
.bg-amber-600, .bg-amber-600 * { color: #fff; }
.bg-orange-600, .bg-orange-600 * { color: #fff; }
.bg-emerald-600, .bg-emerald-600 * { color: #fff; }
.bg-green-600, .bg-green-600 * { color: #fff; }
.bg-blue-600, .bg-blue-600 * { color: #fff; }
.bg-violet-600, .bg-violet-600 * { color: #fff; }
.bg-purple-600, .bg-purple-600 * { color: #fff; }
.bg-indigo-600, .bg-indigo-600 * { color: #fff; }
.bg-teal-600, .bg-teal-600 * { color: #fff; }
.bg-cyan-600, .bg-cyan-600 * { color: #fff; }
.bg-sky-600, .bg-sky-600 * { color: #fff; }
.bg-pink-600, .bg-pink-600 * { color: #fff; }
.bg-fuchsia-600, .bg-fuchsia-600 * { color: #fff; }
.bg-lime-600, .bg-lime-600 * { color: #fff; }

/* cabeçalho no celular: linha de cima só com ícones (menu à esquerda; sininho, assistente e perfil à direita) e o
   título em linha própria, grande e inteiro. As classes hl-* são colocadas por js/headerLayout.js em qualquer tela. */
@media (max-width: 768px) {
  .hl-row { height: auto !important; min-height: 3.5rem; flex-wrap: wrap !important; row-gap: 0.125rem; padding: 0.5rem 0.75rem 0.75rem !important; align-items: center; }
  .hl-flat { display: contents !important; }
  .hl-flat > * { order: 1; }
  .hl-right { order: 2; margin-left: auto; flex-shrink: 1 !important; min-width: 0; }
  .hl-title { order: 3; flex: 1 0 100%; min-width: 0; margin: 0; padding: 0 0.25rem; font-size: 1.5rem !important; line-height: 1.75rem; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
  /* controles largos (calendário, investimentos): o título vem logo abaixo do menu e os controles na linha seguinte */
  .hl-row.hl-wide .hl-title { order: 2; }
  .hl-row.hl-wide .hl-right { order: 3; margin-left: 0; flex: 1 0 100%; flex-wrap: nowrap; gap: 0.25rem; justify-content: space-between; }
  .hl-row.hl-wide .hl-right > * { min-width: 0; flex-shrink: 1; }
  /* nome da tela + seletor de mês/ano na mesma linha (cartão do mês pequeno, à direita) */
  .hl-row.hl-has-month .hl-title { flex: 1 1 11.5rem; font-size: 1.25rem !important; line-height: 1.5rem; padding-right: 0; }
  .hl-month { order: 4; flex: 0 0 auto; margin-left: auto; padding: 2px !important; }
  .hl-month button { min-width: 26px !important; min-height: 32px !important; padding: 0 !important; display: flex; align-items: center; justify-content: center; }
  .hl-month #currentMonthDisplay { font-size: 0.78rem !important; padding: 0 0.125rem !important; white-space: nowrap; }
  header button[onclick*="toggleSidebar"] { min-width: 44px; min-height: 44px; }
  header button[onclick*="toggleNotificationsDropdown"] { display: block !important; }
  #notificationsDropdown { max-width: calc(100vw - 1.5rem); }
}

/* menu lateral: respiro no fim da lista (o último item, "Backup de Dados", não pode ficar colado na borda) */
#sidebar nav { scroll-padding-bottom: 5rem; }
#sidebar nav::after { content: ""; display: block; height: 4rem; flex-shrink: 0; }
@media (max-width: 1024px) {
  #sidebar nav::after { height: calc(6rem + env(safe-area-inset-bottom)); }
}
/* com o menu aberto no celular, a dica de "Primeiros passos" não cobre o fim da lista */
@media (max-width: 1024px) {
  body:has(#sidebar.active) #saldexTip { display: none !important; }
}