/* Camada gestalt do app (todo 1) — carrega DEPOIS do femtocat para estender
   sem redefinir. Reutiliza as vars Catppuccin que o femtocat define em :root
   (paleta completa + --spacing/--border-radius/--font-size, com tema auto
   dark/light); todas as vars usadas abaixo existem, nenhum fallback preciso. */

:root {
  --app-space-1: calc(var(--spacing) * 0.25);
  --app-space-2: calc(var(--spacing) * 0.5);
  --app-space-3: var(--spacing);
  --app-space-4: calc(var(--spacing) * 1.5);
}

/* Região comum: fundo de superfície, borda sutil, radius herdado, sombra leve. */
.card {
  background-color: var(--surface0);
  border: 1px solid var(--surface1);
  border-radius: var(--border-radius);
  padding: var(--app-space-3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* Reset tipográfico do agrupamento de formulários: legend herda a escala do
   app em vez do default agressivo do browser. */
fieldset {
  border: 1px solid var(--surface1);
  border-radius: var(--border-radius);
  padding: var(--app-space-3);
  margin: 0 0 var(--app-space-3) 0;
}

legend {
  padding: 0 var(--app-space-2);
  font-size: var(--font-size);
  font-weight: 600;
  color: var(--subtext1);
}

/* Agrupamento horizontal para a nav (consumido no todo 2). */
.nav-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--app-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Nav em linha (todo 2): os três grupos no mesmo fluxo, separados por uma
   borda sutil consistente entre grupos adjacentes. */
nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--app-space-4);
  margin-bottom: var(--app-space-4);
}

.nav-group + .nav-group {
  padding-left: var(--app-space-4);
  border-left: 1px solid var(--surface1);
}

/* Listas uniformes: zebra de superfície, padding de linha e números
   tabulares alinhados à direita (.num serve para li, td ou span).
   A zebra usa --surface1 porque a lista vive dentro de um .card, que já é
   --surface0 — o mesmo tom apagaria o efeito nos dois temas. */
.app-list {
  list-style: none;
  margin: 0 0 var(--app-space-3) 0;
  padding: 0;
  border: 1px solid var(--surface1);
  border-radius: var(--border-radius);
  overflow: hidden;
}

/* Os itens são compostos por vários <span> encostados no markup (separadores,
   status, ações): o flex com gap dá o mesmo respiro entre todas as peças e
   evita que rótulo e link se colem ("AtivoEditar"). */
.app-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--app-space-2);
  padding: var(--app-space-2) var(--app-space-3);
}

.app-list li:nth-child(even) {
  background-color: var(--surface1);
}

.num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Auth (todo 3): o link cruzado login↔signup é ação secundária — separado do
   form pelo espaçamento e recuado no contraste (figura-fundo). */
.auth-alt {
  margin-top: var(--app-space-3);
  color: var(--subtext0);
}

.auth-alt a {
  color: var(--subtext0);
}

/* App pages (todo 4) — similaridade entre páginas.
   Cada seção de conteúdo é uma região comum (.card) com o mesmo ritmo
   vertical, e toda lista (ul ou table) recebe o mesmo tratamento. */
.card {
  margin-bottom: var(--app-space-4);
}

.card > h2 {
  margin-top: 0;
}

/* Tabelas com o mesmo padrão visual das .app-list: moldura, zebra de
   superfície e o mesmo padding de linha. */
.app-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--app-space-3) 0;
  border: 1px solid var(--surface1);
  border-radius: var(--border-radius);
  overflow: hidden;
}

.app-table th,
.app-table td {
  padding: var(--app-space-2) var(--app-space-3);
  text-align: left;
}

.app-table thead th {
  border-bottom: 1px solid var(--surface1);
  color: var(--subtext1);
  font-weight: 600;
}

.app-table tbody tr:nth-child(even) {
  background-color: var(--surface1);
}

.app-table th.num,
.app-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Ponto focal do dashboard: o alerta de estouro do contratado anual é a
   única coisa da página com acento de aviso — figura contra o fundo dos
   cards, que são todos da mesma superfície. */
.annual-alert {
  margin: var(--app-space-3) 0 0 0;
  padding: var(--app-space-2) var(--app-space-3);
  border-left: 4px solid var(--peach);
  border-radius: var(--border-radius);
  background-color: var(--surface1);
  color: var(--peach);
  font-weight: 600;
}

/* Proximidade dentro do agrupamento de auth: cada par label+campo é uma
   unidade em bloco, com o botão de submit destacado do último campo — sem
   isso o femtocat alinha tudo em linha e "Senha" encosta no campo de e-mail,
   dissolvendo justamente o agrupamento que o fieldset cria. */
fieldset label {
  display: block;
  margin-bottom: var(--app-space-1);
  color: var(--subtext1);
}

fieldset input {
  display: block;
  width: 100%;
  margin-bottom: var(--app-space-3);
}

fieldset input:last-of-type {
  margin-bottom: var(--app-space-4);
}

fieldset button[type="submit"] {
  display: block;
}

/* Abas de filtro por commodity (leituras e relatórios).

   Gestalt: as três opções formam uma região comum única (mesma faixa, mesmo
   espaçamento) e são visualmente idênticas entre si — similaridade — para que
   a diferença que sobra seja só qual está ativa. A ativa é o ponto focal:
   fundo elevado, texto de contraste e peso maior. A borda inferior contínua
   liga as abas ao conteúdo que elas filtram (continuidade), em vez de deixá-las
   flutuando como três links soltos. */
.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--app-space-1);
  list-style: none;
  margin: 0 0 var(--app-space-3) 0;
  padding: 0 0 var(--app-space-1) 0;
  border-bottom: 1px solid var(--surface1);
}

.filter-tabs a {
  display: block;
  padding: var(--app-space-2) var(--app-space-3);
  border-radius: var(--border-radius);
  color: var(--subtext1);
  text-decoration: none;
}

.filter-tabs a:hover {
  background-color: var(--surface1);
}

/* `aria-current` é a fonte da verdade do estado ativo: o mesmo atributo que o
   leitor de tela anuncia pinta a aba, então marcação e aparência não podem
   divergir. */
.filter-tabs a[aria-current="page"] {
  background-color: var(--surface2);
  color: var(--text);
  font-weight: 600;
}

/* Situação do contrato — o ponto focal do relatório.

   Gestalt: figura-fundo. O bloco é um cartão DENTRO do cartão da commodity, com
   fundo um passo mais claro, para ler como "o resumo" e não como "mais uma
   seção". A barra e o veredito ficam no topo porque são a resposta; a lista de
   números vem depois, como detalhe de quem quiser conferir. */
.contract-status {
  background-color: var(--surface1);
  border-color: var(--surface2);
  margin-bottom: var(--app-space-3);
}

.contract-status .cycle {
  margin: 0 0 var(--app-space-2) 0;
  color: var(--subtext0);
}

/* A barra é a leitura de um segundo: quanto do contratado já foi. Largura
   total para virar a figura dominante do bloco. */
.contract-status .allowance {
  display: block;
  width: 100%;
  height: var(--app-space-3);
  margin-bottom: var(--app-space-3);
}

/* Veredito: similaridade com o `.annual-alert` (mesma barra lateral, mesmo
   peso) para que "aviso" tenha sempre a mesma forma no app; a cor separa
   dentro de fora. */
.contract-status .pace {
  margin: var(--app-space-3) 0 0 0;
  padding: var(--app-space-2) var(--app-space-3);
  border-left: 4px solid var(--green);
  border-radius: var(--border-radius);
  background-color: var(--surface0);
  color: var(--green);
  font-weight: 600;
}

.contract-status .pace-over {
  border-left-color: var(--peach);
  color: var(--peach);
}

/* Rótulo à esquerda, número à direita: a coluna de números alinhada é o que
   permite comparar as linhas de relance. */
.contract-status .app-list li {
  justify-content: space-between;
}

.contract-status .app-list li span:last-child {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Ações de uma linha de tabela.

   Gestalt: proximidade. "Editar" e "Excluir" agem sobre a MESMA linha, mas
   empilhados — um link solto acima de um botão sólido — liam como duas coisas
   sem relação. Na horizontal, com espaçamento menor entre si do que até a
   coluna vizinha, o par se lê como um grupo. */
.row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--app-space-3);
}

/* O `<form>` do botão de excluir é só um invólucro: sem isto ele viraria um
   bloco e quebraria a linha de novo. */
.row-actions form {
  margin: 0;
  display: inline-flex;
}

/* Campo somente-leitura precisa parecer somente-leitura. O nome vem do IdP e é
   reescrito a cada login; sem pista visual, o usuário tenta digitar nele. */
input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}