/* Ajustes que valem SO dentro do app iOS.
 *
 * O gatilho e `body.painel--nativo`, posto pelo layout quando
 * `hotwire_native_app?` -- ou seja, QUEM DECIDE E O SERVIDOR. O app nao
 * esconde nem reposiciona nada por conta propria.
 *
 * O nome comeca com `zz_` de proposito: `stylesheet_link_tag :app` serve
 * todos os arquivos desta pasta em ordem alfabetica, entao este precisa vir
 * depois de `z_refinamento.css` para vencer a cascata. Renomear quebra isso
 * em silencio.
 *
 * Por que existe: no app a navegacao principal e a barra de abas NATIVA do
 * rodape, e o cabecalho de caminho tambem nao e renderizado. Sem estes
 * ajustes o conteudo encosta na barra de status em cima e some atras da
 * barra de abas embaixo. */

body.painel--nativo .painel__conteudo {
  /* `env(safe-area-inset-*)` e o proprio iOS informando quanto o sistema
     ocupa: entalhe e barra de status em cima, barra de abas e indicador de
     home embaixo.

     SOMA, nao `max()`. A area segura diz onde o sistema TERMINA, nao onde o
     conteudo deve comecar -- usar `max()` encostava o titulo na barra de
     status, porque 59px de entalhe ja eram maiores que o respiro de 20px e
     o venciam em vez de se somarem a ele. Em aparelho sem entalhe o `env()`
     vem zerado e sobra so o respiro, que e o comportamento certo. */
  padding-top: calc(env(safe-area-inset-top) + 1.25rem);
  padding-bottom: calc(env(safe-area-inset-bottom) + 2rem);
}

/* A inbox controla a propria altura (`conversas.css` usa `100dvh` com rolagem
   interna), entao ela nao pode receber o respiro das outras telas -- ele
   somaria altura e empurraria a fila para fora.
 *
 * Mas area segura ela PRECISA: com `viewport-fit=cover` o `100dvh` comeca no
 * topo absoluto do aparelho, e o campo de busca ficava por baixo da barra de
 * status. Como todo o app e `border-box`, o padding entra DENTRO da altura --
 * encurta a fila em vez de empurra-la. */
body.painel--nativo:has(.conversas) .painel__conteudo {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ── Configuracoes: lista, nao cartoes ──────────────────────────────────
 *
 * No navegador cada opcao e um cartao com respiro de sobra, e cabem duas por
 * linha. Na tela do telefone isso vira uma coluna de blocos altos em que so
 * duas opcoes aparecem de uma vez -- a pessoa rola para descobrir o que existe.
 *
 * Aqui viram linhas de lista agrupada, no formato que o iOS usa em Ajustes:
 * icone a esquerda, titulo e legenda a direita, divisoria entre elas. Tudo
 * cabe na tela de uma vez, que e o ponto. */
body.painel--nativo .configuracoes__lista {
  grid-template-columns: 1fr;
  gap: 0;
  max-width: none;
  background: var(--bc-surface);
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-raio);
  overflow: hidden;
}

body.painel--nativo .configuracoes__item + .configuracoes__item {
  border-top: 1px solid var(--bc-line);
}

body.painel--nativo .configuracoes__link {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: .8rem;
  align-items: center;
  /* 44px e o alvo minimo de toque da Apple. O padding e pequeno, mas a linha
     nunca fica menor que o dedo. */
  min-height: 44px;
  padding: .6rem .85rem;
  background: none;
  border: 0;
  border-radius: 0;
}

body.painel--nativo .configuracoes__icone {
  grid-column: 1;
  grid-row: 1 / span 2;
}

body.painel--nativo .configuracoes__link-titulo {
  grid-column: 2;
  font-size: .92rem;
}

body.painel--nativo .configuracoes__link-legenda {
  grid-column: 2;
  margin-top: .05rem;
  font-size: .76rem;
  /* Uma linha so: a legenda existe para desambiguar o titulo, nao para ser
     lida inteira. Deixa-la quebrar em tres linhas devolveria a altura que
     esta regra veio tirar. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* O "Sair" que o app ganha em Configuracoes. E um `button_to`, entao vem
   dentro de um <form> e com estilo de botao do navegador -- precisa parecer
   os `<a>` vizinhos da lista. */
body.painel--nativo .configuracoes__link--sair {
  width: 100%;
  text-align: inherit;
  font: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  appearance: none;
}

/* ── Nenhum campo abaixo de 16px ────────────────────────────────────────
 *
 * O WebKit no iOS DA ZOOM na pagina quando um campo com fonte menor que 16px
 * recebe foco -- e o zoom nao e so ampliacao: ele desloca a pagina de lado,
 * cortando o conteudo da borda. Era o que acontecia ao tocar em "Buscar
 * conversa" (`.conversas__busca-campo` esta em .85rem, ou seja 13,6px).
 *
 * A regra vale para TODO campo de propria vontade: qualquer um abaixo do
 * limiar traz o mesmo defeito, e descobrir isso um campo por vez sairia caro.
 *
 * A alternativa seria `maximum-scale=1,user-scalable=no` no viewport, que
 * resolve e de quebra TIRA a ampliacao por pinca de quem precisa dela para
 * enxergar. Subir a fonte custa nada e nao tira nada de ninguem. */
body.painel--nativo input,
body.painel--nativo select,
body.painel--nativo textarea {
  font-size: 16px;
}

/* ── A tela de Inicio DENTRO DO APP ─────────────────────────────────────
 *
 * Renderizada por `home/painel_nativo.html.erb`, escolhida no controller
 * quando `hotwire_native_app?`. O navegador continua na tela antiga.
 *
 * Usa os MESMOS tokens do painel (`--bc-*`), entao acompanha o tema claro e
 * escuro sozinha -- nenhuma cor escrita a mao aqui. */

.nativo-inicio {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

/* O alerta so existe quando ha atraso, entao pode ser o elemento mais forte
   da tela sem competir com nada no dia normal. */
.nativo-inicio__alerta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: .85rem;
  min-height: 44px;
  padding: .85rem 1rem;
  border: 1px solid color-mix(in oklab, var(--bc-warn) 45%, var(--bc-line));
  border-radius: var(--bc-raio);
  background: color-mix(in oklab, var(--bc-warn) 10%, var(--bc-surface));
  color: inherit;
  text-decoration: none;
}

.nativo-inicio__alerta-numero {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  color: var(--bc-warn);
  /* Tabular: o numero nao pode mudar de largura e empurrar o texto ao lado
     quando a contagem vai de 9 para 10. */
  font-variant-numeric: tabular-nums;
}

.nativo-inicio__alerta-texto { font-size: .9rem; line-height: 1.3; }
.nativo-inicio__alerta-seta  { color: var(--bc-ink-mut); font-size: 1.2rem; }

.nativo-inicio__saudacao {
  margin: 0;
  /* Titulo grande pede tracking NEGATIVO: letras crescem e parecem se
     afastar. No corpo do texto seria o contrario. */
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--bc-ink);
}

.nativo-inicio__bloco {
  background: var(--bc-surface);
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-raio);
  overflow: hidden;
}

.nativo-inicio__bloco-titulo {
  margin: 0;
  padding: .8rem 1rem .5rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bc-ink-mut);
}

.nativo-inicio__filas,
.nativo-inicio__numeros {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nativo-inicio__filas li + li,
.nativo-inicio__numeros li + li { border-top: 1px solid var(--bc-line-soft); }

/* A linha inteira e o alvo, nao so o texto -- 44px e o minimo da Apple. */
.nativo-inicio__fila {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  align-items: center;
  column-gap: .8rem;
  min-height: 44px;
  padding: .6rem 1rem;
  color: inherit;
  text-decoration: none;
}

.nativo-inicio__fila-nome  { font-size: .92rem; }
.nativo-inicio__fila-valor { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.nativo-inicio__fila-barra {
  height: 6px;
  border-radius: 999px;
  background: var(--bc-line-soft);
  overflow: hidden;
}

.nativo-inicio__fila-barra > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--bc-primary);
}

.nativo-inicio__fila--atencao .nativo-inicio__fila-barra > span { background: var(--bc-warn); }
.nativo-inicio__fila--atencao .nativo-inicio__fila-valor { color: var(--bc-warn); }

.nativo-inicio__aviso {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  min-height: 44px;
  padding: .7rem 1rem;
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-raio);
  background: var(--bc-surface);
  color: inherit;
  font-size: .88rem;
  text-decoration: none;
}

.nativo-inicio__numero {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .6rem 1rem;
}

.nativo-inicio__numero-e164    { font-size: .95rem; font-weight: 600; }
.nativo-inicio__numero-legenda { font-size: .78rem; color: var(--bc-ink-mut); }

.nativo-inicio__acoes {
  background: var(--bc-surface);
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-raio);
  overflow: hidden;
}

.nativo-inicio__acao {
  display: block;
  min-height: 44px;
  padding: .85rem 1rem;
  color: inherit;
  font-size: .92rem;
  text-decoration: none;
}

.nativo-inicio__acao + .nativo-inicio__acao { border-top: 1px solid var(--bc-line-soft); }

/* `<details>` nativo: o estado de aberto/fechado e do navegador, nao nosso --
   zero JavaScript para manter. */
.nativo-inicio__dashboard {
  background: var(--bc-surface);
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-raio);
  overflow: hidden;
}

.nativo-inicio__dashboard > summary {
  min-height: 44px;
  padding: .85rem 1rem;
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
}

.nativo-inicio__dashboard-dica {
  display: block;
  margin-top: .1rem;
  font-size: .76rem;
  font-weight: 400;
  color: var(--bc-ink-mut);
}

.nativo-inicio__dashboard > .dashboard { padding: 0 1rem 1rem; }

.nativo-inicio__config {
  margin: .2rem 0 0;
  text-align: center;
  font-size: .78rem;
  color: var(--bc-ink-faint);
}

/* O corpo da Inicio de quem administra: as medidas abertas, sem a moldura de
   cartao do resto -- o proprio dashboard ja traz os cartoes dele. */
.nativo-inicio__medidas > .dashboard { margin: 0; }

.nativo-inicio__medidas-link {
  display: block;
  padding: .6rem 0 0;
  text-align: right;
  font-size: .85rem;
  font-weight: 600;
  color: var(--bc-primary);
  text-decoration: none;
}

/* SO a Inicio reserva a faixa do circulo de perfil: ele existe apenas la
   (nas outras abas flutuaria sobre conteudo que nao e dele). Nas demais
   telas esses 2.3rem a mais eram espaco morto no topo. */
body.painel--nativo:has(.nativo-inicio) .painel__conteudo {
  padding-top: calc(env(safe-area-inset-top) + 3.6rem);
}

/* ── Tabela nenhuma rola de lado ────────────────────────────────────────
 *
 * As telas do painel usam `<table class="painel__tabela">` -- nove delas.
 * Quatro colunas nao cabem em 402pt, e o navegador resolve do jeito dele:
 * barra de rolagem HORIZONTAL. Num app isso e errado duas vezes -- ninguem
 * arrasta tabela de lado no telefone, e a rolagem lateral disputa com o
 * gesto de voltar pela borda.
 *
 * A regra vale para TODAS de uma vez, de proposito: consertar so a Equipe
 * deixaria as outras oito esperando alguem tropecar nelas.
 *
 * Cada linha vira um cartao: a primeira celula (quem/o que a linha e) ocupa
 * a largura toda, e as demais fluem embaixo dela, lado a lado. O cabecalho
 * sai -- com uma linha por vez, o rotulo da coluna vira repeticao. */

body.painel--nativo .painel__tabela,
body.painel--nativo .painel__tabela tbody,
body.painel--nativo .painel__tabela tr,
body.painel--nativo .painel__tabela td {
  display: block;
  width: auto;
}

body.painel--nativo .painel__tabela { border-collapse: collapse; }

body.painel--nativo .painel__tabela thead { display: none; }

body.painel--nativo .painel__tabela tr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem .75rem;
  padding: .8rem 1rem;
}

body.painel--nativo .painel__tabela tbody tr + tr {
  border-top: 1px solid var(--bc-line-soft);
}

body.painel--nativo .painel__tabela td {
  padding: 0;
  border: 0;
  /* 44px e o alvo minimo de toque: a celula de acao costuma ser um link. */
  min-height: 0;
}

/* A primeira celula identifica a linha e por isso fica sozinha, em cima. */
body.painel--nativo .painel__tabela td:first-child { flex: 1 0 100%; }

/* Celula vazia (a coluna de acao quando a pessoa nao pode editar) nao pode
   deixar um buraco no `gap`. */
body.painel--nativo .painel__tabela td:empty { display: none; }