/*
 * Zero's operator surface.
 *
 * **The platform palette only.** Every colour here is a `--z-*` token from
 * `brand/brand.css`, and none of them is a company's. `painel/` reads
 * `brandColor1`/`brandColor2` from `GET /me` and paints its chrome with them;
 * this surface has no equivalent and must never grow one. An operations screen
 * wearing a customer's identity is a screen where somebody eventually forgets
 * which company they are looking at — and the mistake that follows is made on
 * the wrong company's data.
 *
 * It is deliberately plainer than the company panel. This is a tool for six
 * people, not a product surface, and every ornament here is one more thing to
 * keep working for no one's benefit.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--z-font-sans);
  font-size: var(--z-text-body);
  line-height: var(--z-leading-body);
  color: var(--z-ink-900);
  background: var(--z-surface-1);
}

/* -------------------------------------------------------- a aurora do login

   A mesma da landing e da entrada do painel da empresa, com a mesma opacidade.
   Paleta do Zero apenas — `validate-brand-tokens` recusa um valor de marca de
   cliente nesta superfície, e a razão continua a mesma: uma tela de operação
   vestindo a identidade de um cliente é uma tela onde alguém esquece qual
   empresa está olhando.

   `z-index: -1` e `pointer-events: none`: é decoração, e decoração que
   intercepta clique é defeito. */

.op-aurora {
  position: fixed;
  inset: -20vmax;
  z-index: -1;
  pointer-events: none;
  filter: blur(90px) saturate(1.15);
  opacity: .26;
}

.op-aurora span {
  position: absolute;
  display: block;
  width: 46vmax;
  height: 46vmax;
  border-radius: 50%;
  transform-origin: center;
  animation: op-aurora-drift 26s ease-in-out infinite alternate;
}

.op-aurora span:nth-child(1) { top: 2%;   left: 8%;   background: var(--z-cat-saude); }
.op-aurora span:nth-child(2) { top: 26%;  right: 4%;  background: var(--z-cat-ambiente); animation-delay: -9s; }
.op-aurora span:nth-child(3) { bottom: 4%; left: 32%; background: var(--z-cat-qualidade); animation-delay: -17s; }

@keyframes op-aurora-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(6vmax, -4vmax, 0) scale(1.18); }
}

/* Ela pertence ao login. Quando o `shell` aparece, a tela vira ferramenta de
   trabalho e fundo animado atrás de tabela é ruído. */
body:has(.op-shell:not([hidden])) .op-aurora { display: none; }

@media (prefers-reduced-motion: reduce) {
  .op-aurora span { animation: none; }
}

/* ------------------------------------------------------------------ login */

.op-login {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
}

/**
 * O cartão, igual ao da tela de entrada do painel da empresa.
 *
 * Era 400px, chapado, com raio médio e o texto encostado à esquerda. As duas
 * telas fazem a mesma coisa — são a primeira que alguém vê antes de estar
 * dentro do produto — e pareciam de produtos diferentes.
 *
 * 32rem, vidro sobre a aurora, raio grande, respiro maior na vertical do que na
 * horizontal. O que distingue esta tela da outra é o texto, que diz para quem
 * ela é.
 */
.op-login-card {
  width: 100%;
  max-width: 32rem;
  padding: var(--z-space-8) var(--z-space-6);
  background: color-mix(in srgb, var(--z-surface-0) 88%, transparent);
  backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--z-border) 70%, transparent);
  border-radius: var(--z-r-lg);
  box-shadow: 0 28px 70px -44px color-mix(in srgb, var(--z-ink-900) 80%, transparent);
  text-align: center;
}

/* O formulário volta a alinhar à esquerda: rótulo de campo centrado obriga o
   olho a procurar onde cada um começa. Só o cabeçalho do cartão é centrado. */
.op-login-card .op-form { text-align: left; }

.op-eyebrow {
  margin: 0;
  font-size: var(--z-text-eyebrow);
  font-weight: 600;
  letter-spacing: var(--z-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--z-ink-400);
}

/* O degradê das quatro categorias, na ordem da revisão 2 — o mesmo do herói da
   landing, das páginas legais e da entrada do painel. A cor sólida fica
   declarada antes: se `background-clip: text` não pegar, o título aparece em
   tinta em vez de sumir. */
.op-login-title {
  margin: var(--z-space-1) 0 var(--z-space-2);
  font-family: var(--z-font-display);
  font-size: var(--z-text-h2);
  line-height: var(--z-leading-tight);
  letter-spacing: var(--z-tracking-display);
  color: var(--z-ink-900);
  background: linear-gradient(100deg,
    var(--z-cat-saude), var(--z-cat-seguranca) 38%,
    var(--z-cat-ambiente) 68%, var(--z-cat-qualidade));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.op-login-note {
  margin: 0 auto var(--z-space-6);
  max-width: 26rem;
  font-size: var(--z-text-sm);
  color: var(--z-ink-400);
}

/* ------------------------------------------------------------------ forms */

.op-form {
  display: grid;
  gap: 16px;
}

.op-field {
  display: grid;
  gap: 4px;
}

/* A busca casa apelido, razão social e CNPJ — o placeholder diz os três, e em
   220px ele era cortado em "ou C". Cresce até 30rem quando há espaço e volta a
   encolher quando não há. */
.op-field-inline {
  flex: 1 1 18rem;
  min-width: 15rem;
  max-width: 30rem;
}

.op-label {
  font-size: var(--z-text-sm);
  font-weight: 600;
  color: var(--z-ink-500);
}

/* Mesma altura de toque e mesmo raio do painel da empresa. O `--z-r-xs` de
   antes deixava o campo quadrado ao lado de um cartão de raio grande. */
.op-input {
  width: 100%;
  min-height: var(--z-tap-min);
  padding: 0 var(--z-space-3);
  font: inherit;
  color: inherit;
  background: var(--z-surface-0);
  border: 1px solid var(--z-border);
  border-radius: var(--z-r-sm);
}

/* `select` e `textarea` mantêm o preenchimento vertical: sem ele o texto de uma
   opção encosta na borda de cima. */
select.op-input { padding-block: var(--z-space-2); }

.op-input:focus-visible {
  outline: 2px solid var(--z-focus);
  outline-offset: 1px;
}

.op-error {
  margin: 0;
  font-size: var(--z-text-sm);
  color: var(--z-sev-critico);
}

/* SEC-104. Cloudflare Turnstile on Entrar: Cloudflare's iframe at the width of
   the form (size "flexible"), and its message line under it. */
.turnstile {
  display: flex;
  flex-direction: column;
  gap: var(--z-space-2);
  min-height: 65px;
}

.turnstile-widget { width: 100%; }

.turnstile-message {
  margin: 0;
  font-size: var(--z-text-sm);
  color: var(--z-ink-500);
}

/* ---------------------------------------------------------------- buttons */

/* Pílula, como em todo o resto do produto, e com o alvo de toque mínimo. */
.op-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--z-tap-min);
  padding: 0 var(--z-space-5);
  font: inherit;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--z-r-pill);
  cursor: pointer;
  transition: filter var(--z-dur-fast) var(--z-ease);
}

.op-button:hover:not(:disabled) { filter: brightness(1.08); }

/* O botão de entrar ocupa a largura do formulário, como no painel. */
#login-submit { width: 100%; }

.op-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.op-button:focus-visible {
  outline: 2px solid var(--z-focus);
  outline-offset: 2px;
}

.op-button-primary {
  color: var(--z-brand-1-ink);
  background: var(--z-ink-800);
}

.op-button-ghost {
  color: var(--z-ink-700);
  background: transparent;
  border-color: var(--z-border-strong);
}

/*
 * Destructive actions are red, and only destructive actions are.
 *
 * Suspending a company stops every person in it from working. If "Suspender"
 * looked like "Voltar", the difference between them would be a reading habit.
 */
.op-button-danger {
  /* `--z-brand-1-ink` é o branco do sistema. Esta superfície nunca carrega a
     marca de uma empresa, então ele vale o valor de `:root` e não muda. */
  color: var(--z-brand-1-ink);
  background: var(--z-sev-critico);
}

/* ----------------------------------------------------------------- shell */

.op-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px;
}

.op-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--z-space-4);
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--z-space-4);
  border-bottom: 1px solid color-mix(in srgb, var(--z-border) 70%, transparent);
}

.op-header-identity {
  min-width: 0;
}

.op-header-title {
  margin: 2px 0 0;
  font-family: var(--z-font-display);
  font-size: var(--z-text-h3);
}

.op-header-session {
  display: flex;
  gap: 12px;
  align-items: center;
}

.op-operator-name {
  font-size: var(--z-text-sm);
  color: var(--z-ink-500);
}

.op-role-badge {
  padding: 2px 10px;
  font-size: var(--z-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--z-ink-700);
  background: var(--z-surface-2);
  border-radius: 999px;
}

/*
 * An administrator's badge is marked.
 *
 * Most operator work is looking, and an operator should be able to tell at a
 * glance whether the session they are in can change anything.
 */
.op-role-badge[data-role="admin"] {
  color: var(--z-brand-1-ink);
  background: var(--z-ink-700);
}

.op-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 16px 0;
}

/* Pílula, como toda navegação do produto. */
.op-nav-item {
  min-height: var(--z-tap-min);
  padding: 0 var(--z-space-4);
  font: inherit;
  font-weight: 600;
  color: var(--z-ink-400);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--z-r-pill);
  cursor: pointer;
  transition: color var(--z-dur-fast) var(--z-ease),
              background var(--z-dur-fast) var(--z-ease);
}

.op-nav-item:hover:not(.is-active) { color: var(--z-ink-700); }

.op-nav-item.is-active {
  color: var(--z-ink-900);
  background: var(--z-surface-0);
  border-color: color-mix(in srgb, var(--z-border) 70%, transparent);
}

.op-banner {
  margin: 0 0 16px;
  padding: 10px 14px;
  font-size: var(--z-text-sm);
  border-radius: var(--z-r-xs);
  background: var(--z-surface-2);
}

.op-banner.is-ok {
  /* O par tinta/fundo da categoria Meio Ambiente, que a marca já define — o
     literal aqui era exatamente o valor de `--z-cat-ambiente-ink`, copiado. */
  color: var(--z-cat-ambiente-ink);
  background: var(--z-cat-ambiente-soft);
}

.op-banner.is-error {
  color: var(--z-sev-critico);
  background: var(--z-sev-critico-soft);
}

/* --------------------------------------------------------------- screens */

.op-screen {
  display: none;
}

.op-screen.is-active {
  display: block;
}

.op-screen-title {
  margin: 16px 0;
  font-family: var(--z-font-display);
  font-size: var(--z-text-h2);
}

.op-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--z-space-4);
  margin-bottom: var(--z-space-5);
}

/* Os cartões do shell falam a mesma língua dos da landing: raio grande, borda
   suave e a sombra rasa e larga que dá elevação sem contorno duro. Sem vidro
   aqui — atrás deles não há aurora, e `backdrop-filter` sobre um fundo chapado
   custa composição para não mudar nada. */
.op-card {
  margin-bottom: var(--z-space-6);
  padding: var(--z-space-6);
  background: var(--z-surface-0);
  border: 1px solid color-mix(in srgb, var(--z-border) 70%, transparent);
  border-radius: var(--z-r-lg);
  box-shadow: 0 18px 40px -34px color-mix(in srgb, var(--z-ink-900) 60%, transparent);
}

.op-card-title {
  margin: 0 0 8px;
  font-size: var(--z-text-h3);
}

.op-card-note {
  margin: 0 0 12px;
  font-size: var(--z-text-sm);
  color: var(--z-ink-400);
}

/* ---------------------------------------------------------------- tables */

/* Wide tables scroll inside their own box rather than the page. */
/* A grade é um cartão, com o mesmo raio e a mesma elevação dos outros. Ela
   flutuava sobre o fundo com uma borda de 1px e um raio menor, e era a única
   coisa da tela que não parecia pousada em nada.

   `overflow-x: auto` é obrigatório e fica: uma coluna cortada precisa sinalizar
   que há mais à direita, e não sumir. */
.op-table-scroll {
  overflow-x: auto;
  background: var(--z-surface-0);
  border: 1px solid color-mix(in srgb, var(--z-border) 70%, transparent);
  border-radius: var(--z-r-lg);
  box-shadow: 0 18px 40px -34px color-mix(in srgb, var(--z-ink-900) 60%, transparent);
}

.op-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--z-text-sm);
}

.op-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: var(--z-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--z-ink-400);
  border-bottom: 1px solid var(--z-border);
  white-space: nowrap;
}

.op-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--z-surface-2);
}

.op-row.is-clickable {
  cursor: pointer;
}

.op-row.is-clickable:hover,
.op-row.is-clickable:focus-visible {
  background: var(--z-surface-1);
  outline: none;
}

.op-cell-alias {
  font-family: var(--z-font-mono);
  font-weight: 600;
}

/*
 * Status carries a colour, and the colours are semantic ones.
 *
 * Suspended and cancelled are not the same fact and must not look the same: one
 * is reversible from this screen and the other is not.
 */
.op-status {
  font-weight: 600;
}

.op-status[data-status="active"],
.op-status[data-status="sent"] {
  color: var(--z-ok);
}

.op-status[data-status="suspended"],
.op-status[data-status="failed"] {
  color: var(--z-sev-critico);
}

.op-status[data-status="cancelled"],
.op-status[data-status="disabled"],
.op-status[data-status="left"],
.op-status[data-status="expired"] {
  color: var(--z-ink-400);
}

.op-status[data-status="pending_setup"],
.op-status[data-status="pending"],
.op-status[data-status="invited"],
.op-status[data-status="pending_approval"] {
  color: var(--z-sev-alto);
}

.op-pager {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 16px;
}

.op-pager-state {
  font-size: var(--z-text-sm);
  color: var(--z-ink-400);
}

/* ----------------------------------------------------------------- facts */

.op-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 24px;
  margin: 16px 0 24px;
  padding: 20px;
  background: var(--z-surface-0);
  border: 1px solid var(--z-border);
  border-radius: var(--z-r-md);
}

.op-fact-label {
  font-size: var(--z-text-sm);
  color: var(--z-ink-400);
}

.op-fact-value {
  margin: 0;
  font-weight: 600;
}

.op-detail-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

/*
 * The line that says what this screen does not show.
 *
 * Marked as a note rather than a warning: it is not an error state, it is the
 * design. Without it the next person reads a company page with no reports on it
 * and files the omission as a bug.
 */
.op-scope-note {
  margin: 0 0 24px;
  padding: 12px 16px;
  font-size: var(--z-text-sm);
  color: var(--z-ink-500);
  background: var(--z-surface-2);
  border-left: 3px solid var(--z-ink-300);
  border-radius: 0 var(--z-r-xs) var(--z-r-xs) 0;
}

/* ---------------------------------------------------------------- dialog */

/* O diálogo, com o mesmo raio e a mesma elevação dos cartões. */
.op-dialog {
  max-width: 480px;
  padding: 24px;
  color: inherit;
  background: var(--z-surface-0);
  border: 1px solid var(--z-border);
  border-radius: var(--z-r-lg);
  box-shadow: var(--z-elev-3);
}

.op-dialog::backdrop {
  /* `color-mix` sobre a tinta do sistema em vez do valor dela escrito à mão. */
  background: color-mix(in srgb, var(--z-ink-900) 45%, transparent);
}

.op-dialog-title {
  margin: 0 0 8px;
  font-family: var(--z-font-display);
  font-size: var(--z-text-h3);
}

.op-dialog-body {
  margin: 0 0 24px;
  font-size: var(--z-text-sm);
  color: var(--z-ink-500);
}

.op-dialog-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* ------------------------------------------------------ a marca e a espera

   Revisão 2 da marca. Os dois `<img>` apontam para `brand/zero-logo.svg`, que é
   o arquivo oficial: nada aqui redesenha o símbolo, e por isso nada aqui pode
   divergir dele. Estáticos de propósito — a órbita pertence às telas de produto;
   uma tela de operação não precisa de sinal de vida. */

/* A CLASSE de centragem fica no `<picture>`, não no `<img>`: o `<picture>` é o
   filho do cartão, e com a regra na imagem ela ficava encostada à esquerda
   dentro de um `<picture>` esticado. Foi o mesmo defeito da entrada do painel. */
.op-login-mark-wrap {
  display: block;
  margin: 0 auto var(--z-space-3);
  width: clamp(120px, 26vw, 176px);
}

/* Sem efeito nenhum: a revisão 2 não admite sombra, contorno, brilho nem
   rotação sobre o símbolo. O giro é o do próprio arquivo. */
.op-login-mark {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}

.op-header-mark {
  display: block;
  flex: 0 0 auto;
}

.op-header-identity {
  display: flex;
  align-items: center;
  gap: var(--z-space-3);
}

/* O indicador de espera, que esta superfície não tinha.

   `.z-loading` (de `brand.css`) segura os 400 ms: nasce invisível e só se revela
   se a espera passar disso — uma resposta rápida nunca pisca um "carregando".
   `.z-loading-ring` é a marca em movimento, o mesmo arquivo do painel da empresa
   e do app. */
.op-wait {
  display: flex;
  align-items: center;
  gap: var(--z-space-3);
  padding: var(--z-space-4) 0;
  color: var(--z-ink-400);
  font-size: var(--z-text-sm);
}