@import url("./tokens-v9.css");

/* ═══════════════════════════════════════════════════════════════════════════
   Admin V9 — FOLHA GLOBAL

   Reproduz o comportamento da página renderizada
   `design_handoff_admin_v9/Admin V9 - Homes.dc.html`. Cada regra abaixo tem
   equivalente medido lá; onde há comentário «medido», o valor saiu de
   getComputedStyle no Chromium.

   O protótipo NÃO usa canto reto: controles são pílulas (999px) e campos de
   formulário são caixas preenchidas de 16px. Não existe segunda família
   tipográfica — o que parece mono é Geist em caixa alta com tracking aberto.
   ═══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--fundo);
  color: var(--txt);
  font-family: var(--fonte);
  font-size: 15px;              /* medido */
  line-height: 1.5;             /* medido: 22.5px */
  letter-spacing: -.005em;      /* medido: -0.075px */
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}
#raiz { min-height: 100vh; }

h1, h2, h3, h4, h5, p { margin: 0; }
a { color: var(--azul); text-decoration: none; }
a:hover { color: var(--azul-medio); }               /* medido: rgb(51,133,255) */
::selection { background: var(--azul); color: var(--fundo); }

input, textarea, select, button {
  font: inherit; font-family: var(--fonte); letter-spacing: inherit;
  color: inherit; background: none; border: 0; outline: none; margin: 0;
}
input::placeholder, textarea::placeholder { color: var(--txt3); }  /* medido */
button { cursor: pointer; }
button:disabled, [aria-disabled="true"] { cursor: not-allowed; }
[role="button"] { user-select: none; }

/* Anel de foco azul, como na página. Campo de texto não ganha anel: o sinal
   dele é o fundo azulado (regra `.v9-caixa:focus-within`, mais abaixo).

   LITERAL DECLARADO — não é descuido. O DS prende `--focus-ring` ao laranja
   (`tokens/colors.css:224`) e NÃO o remapeia em `[data-module="admin"]`, então
   `var(--ring-focus)` desenharia um anel LARANJA numa tela de ação azul. Não há
   token equivalente: `--alpha-blue-14` vale .16, não .32.
   Proposta de correção no pacote (decisão do dono / Claude Design, não daqui):
   docs/adr/propostas/PROPOSTA-DS-focus-ring-por-modulo.md */
:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0,102,255,.32); }
input:focus, input:focus-visible, textarea:focus, textarea:focus-visible {
  outline: none !important; box-shadow: none !important;
}

/* ── barras de rolagem (medido: 10px, polegar arredondado com recuo) ── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--alpha-w-8) content-box;
  border-radius: var(--r-pilula); border: 3px solid transparent;
}

/* ═══════════════════ margem lateral do conteúdo ═══════════════════ */
.v9-pad { padding-left: var(--gutter); padding-right: var(--gutter); }

/* ═══════════════════ barra lateral ═══════════════════
   Item de menu: pílula de 40px, 15px/400, padding 0 20px. Ativo = branco
   sólido com texto #060606; inativo = #6E6E6E sobre o fundo da página. */

.v9-nav {
  border-radius: var(--r-pilula);
  transition: color var(--d-pos) var(--ez), background var(--d-pos) var(--ez);
}
.v9-nav:hover { color: var(--txt); background: var(--hover-menu); }   /* medido */
.v9-nav[data-ativo="1"]:hover { color: var(--fundo); filter: brightness(.94); }

/* ═══════════════════ linha de lista ═══════════════════
   O protótipo apaga as vizinhas quando o ponteiro entra na lista: a linha sob
   o cursor volta a 100% e perde o filete. É `.cv-lista` lá; aqui, `.v9-lista`. */

.v9-linha {
  box-shadow: inset 0 -1px 0 var(--fio);
  transition: background var(--d-pos), opacity var(--d-pos);
}
.v9-lista:hover .v9-linha { opacity: .3; }
/* a PRIMEIRA linha do grupo também ganha filete em cima — no protótipo é
   `.cv-lista > div:nth-child(2)`, porque o filho 1 é o cabeçalho do grupo. */
.v9-lista > .v9-linha:nth-child(2) { box-shadow: inset 0 1px 0 var(--fio), inset 0 -1px 0 var(--fio); }
.v9-lista .v9-linha:hover { opacity: 1; background: var(--hover); box-shadow: none; }
.v9-lista .v9-linha:has(+ .v9-linha:hover) { box-shadow: none; }
.v9-lista > .v9-linha:nth-child(2):has(+ .v9-linha:hover) { box-shadow: inset 0 1px 0 var(--fio); }

.v9-linha:hover .v9-so-hover { opacity: 1; }
.v9-so-hover { opacity: 0; transition: opacity var(--d-cor) var(--ez); }
@media (hover: none) { .v9-so-hover { opacity: 1; } }

/* ═══════════════════ controles em pílula ═══════════════════ */

.v9-chip, .v9-cta, .v9-pilula { border-radius: var(--r-pilula); }
.v9-chip { transition: filter var(--d-cor), box-shadow var(--d-cor), color var(--d-cor); }
.v9-chip:hover { filter: brightness(1.1); }
/* medido: o ponto do chip cresce 35% no hover */
.v9-chip > span > span:first-child { transition: transform var(--d-pos) var(--ez2); }
.v9-chip:hover > span > span:first-child { transform: scale(1.35); }

.v9-cta { transition: filter var(--d-cor), transform var(--d-pos); }
.v9-cta:hover { filter: brightness(1.05); }
.v9-cta:active { transform: scale(.98); }
/* medido: o "+" gira 90° e o rótulo rola 16px para cima */
.v9-cta svg { transition: transform var(--d-pos) var(--ez2); }
.v9-cta:hover svg { transform: rotate(90deg); }
.v9-rolo { display: block; overflow: hidden; height: 16px; }
.v9-rolo i {
  display: flex; align-items: center; height: 16px; line-height: 16px;
  font-style: normal; font-weight: 600;
  transition: transform var(--d-controle) var(--ez2);
}
.v9-cta:hover .v9-rolo i { transform: translateY(-16px); }

.v9-quieto { transition: filter var(--d-cor), transform var(--d-cor); }
.v9-quieto:hover { filter: brightness(1.7); transform: translateY(-1px); }

.v9-btn { transition: background var(--d-cor) var(--ez), color var(--d-cor) var(--ez), filter var(--d-cor) var(--ez); }
.v9-btn-primario:hover { filter: brightness(1.08); }
.v9-btn-texto { transition: color var(--d-cor) var(--ez); }
.v9-btn-texto:hover { color: var(--txt); }
.v9-btn-azul:hover { color: var(--azul-medio); }
.v9-btn-destrutivo:hover { color: var(--vermelho); }
.v9-quadro { transition: background var(--d-cor) var(--ez), color var(--d-cor) var(--ez); }
.v9-quadro:hover { background: var(--hover-menu); }
.v9-avatar { border-radius: var(--r-pilula); }

/* ═══════════════════ campo de formulário ═══════════════════
   Medido: caixa preenchida #141414, raio 16px, 17px/400, sem borda.
   No foco o protótipo desenha um anel azul de 2px por dentro. */

.v9-caixa {
  background: var(--sup3);
  border-radius: var(--r-campo);
  transition: box-shadow var(--d-cor) var(--ez), background var(--d-cor) var(--ez);
}
.v9-caixa:focus-within { box-shadow: inset 0 0 0 2px var(--azul); }
.v9-caixa input, .v9-caixa textarea, .v9-caixa select { width: 100%; min-width: 0; }

/* Campo "de conteúdo" — cresce com o texto e mostra a linha azul só no foco.
   Medido na tela de Categorias (`.ed`). */
.v9-inline {
  field-sizing: content; min-width: 4ch; max-width: 100%;
  border-bottom: 2px solid transparent; padding: 0 3px;
  transition: background var(--d-cor), border-color var(--d-cor);
}
.v9-inline:hover { border-bottom-color: var(--border-selected); }
.v9-inline:focus { border-bottom-color: var(--azul); background: rgba(0,102,255,.12); }

/* ═══════════════════ entradas e saídas ═══════════════════ */

@keyframes v9Sobe { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes v9Desce { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes v9Aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes v9Pulso { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(2.1); opacity: 0; } }

.v9-sobe { animation: v9Sobe var(--d-flash) var(--ez) backwards; }
.v9-desce { animation: v9Desce var(--d-pos) var(--ez2) backwards; }
.v9-aparece { animation: v9Aparece var(--d-flash) var(--ez) backwards; }
.v9-pulso { animation: v9Pulso 2s var(--ez) infinite; }

@keyframes v9Flash { 0% { opacity: 0; } 12% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } }
.v9-flash { animation: v9Flash 2200ms var(--ez) forwards; }

/* ── arraste ── */
.v9-arrasta { cursor: grab; }
.v9-arrastando { opacity: .4; }
.v9-alvo { background: var(--azul); height: 2px; }

/* ── modal ── */
.v9-veu { position: fixed; inset: 0; background: var(--alpha-k-72); z-index: 60; animation: v9Aparece var(--d-pos) var(--ez); }
.v9-modal { animation: v9Sobe var(--d-pos) var(--ez) backwards; }

/* ══════════════════════════ responsivo ══════════════════════════
   Os três cortes abaixo são os do próprio protótipo. */

/* colunas lado a lado viram uma só */
@media (max-width: 1100px) {
  .v9-colunas { grid-template-columns: minmax(0, 1fr) !important; row-gap: 44px !important; }
  .v9-colunas > .v9-coluna + .v9-coluna { border-left: none; }
}
/* o dado secundário da linha some antes do nome (regra do protótipo, em `.cv-mid`).
   `.v9-col-3` e `.v9-col-2` são a mesma ideia por prioridade: 3 sai primeiro. */
@media (max-width: 1150px) { .v9-meta, .v9-col-3 { display: none !important; } }
@media (max-width:  900px) { .v9-col-2 { display: none !important; } }
.v9-passos { display: block; }
/* a faixa de filtros passa a ocupar a linha inteira */
@media (max-width: 900px) {
  .v9-faixa { gap: 14px !important; }
  .v9-faixa > .v9-filtros { width: 100%; justify-content: flex-start; flex-wrap: wrap !important; }
  .v9-faixa > .v9-cta { margin-left: 0 !important; }
}
/* formulário de duas colunas vira uma */
@media (max-width: 760px) {
  .v9-form2 { grid-template-columns: minmax(0, 1fr) !important; }
  .v9-secao-ficha { grid-template-columns: minmax(0, 1fr) !important; gap: 26px !important; }
}

/* ── mobile: a barra lateral vira gaveta ──
   O protótipo não tem tratamento mobile (a 390px ele estoura na horizontal).
   A gaveta é a única adição desta camada, e preserva a mesma gramática visual. */
@media (max-width: 760px) {
  :root { --nav-w: 0px; }
  .v9-lateral {
    position: fixed; inset: 0 auto 0 0; z-index: 70; width: 264px !important;
    transform: translateX(-100%); transition: transform var(--d-painel) var(--ez);
    background: var(--fundo); border-right: 1px solid var(--fio);
  }
  .v9-lateral[data-aberta="1"] { transform: none; box-shadow: 0 0 0 100vmax rgba(0,0,0,.6); }
  .v9-so-desktop { display: none !important; }
  .v9-linha { padding-top: 18px !important; padding-bottom: 18px !important; }
  .v9-modal { width: 100% !important; max-width: 100% !important; height: 100%; max-height: 100%; }
  .v9-abas { overflow-x: auto; flex-wrap: nowrap !important; }
  /* manchete do login: o único título de tamanho fixo fora das telas */
  .v9-manchete { font-size: 34px !important; line-height: 1.06 !important; }
}
@media (min-width: 761px) { .v9-so-mobile { display: none !important; } }

/* ── toque: alvos maiores ── */
@media (pointer: coarse) { .v9-alvo-toque { min-height: 40px; min-width: 40px; } }

/* ── movimento reduzido ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}