/* ─────────────────────────────────────────────────────────────────────────
   theme_skin.css — Skin do Admin (Unfold)

   ARQUIVO ZERADO EM 2026-09-21 (Fase 0 da reconstrução por tokens).

   A versão anterior (1499 linhas, 562 `!important`) está congelada em
   docs/referencias/theme_skin.legado.css — referência SOMENTE-LEITURA,
   não volta a ser editada reativamente. Ela entrou em loop de regressão
   porque as regras eram globais (`.form-row`) mas a validação era tela a
   tela: o Unfold usa `form-row` tanto em <div> (campo comum) quanto em
   <tr> (inline tabular), e o mesmo seletor servia aos dois.

   Regras para o que for escrito aqui daqui em diante:

   1. Cor vem de UNFOLD["COLORS"] em config/settings.py (OKLCH, config
      pura), não de seletor CSS. Ver docs/referencias/unfold-settings.md.
   2. Nenhum seletor genérico sem antes conferir o mapa de DOM por widget
      em docs/referencias/unfold-licoes-aprendidas-dom.md.
   3. Nenhuma regra é "pronta" antes de validada na bancada de testes
      contra TODOS os widgets do checklist, em claro e escuro, com a
      sidebar aberta e fechada.
   4. `!important` é confissão de que o seletor está errado — é exceção
      justificada em comentário, nunca o caminho padrão.

   Carregado via UNFOLD["STYLES"] (ponto de extensão oficial, à prova de
   upgrade do pacote). Ver docs/referencias/unfold-styles-scripts.md.
   ───────────────────────────────────────────────────────────────────────── */

/* ─── Sombra do cartão (Fase 3, item 3 — protótipo `--shadow`/`--shadow-md`) ───
   `fieldset.module` nativo do Unfold tem border:0, border-radius:0, fundo
   transparente — nenhum contorno visível hoje (medido, não suposto). O
   `input` já carrega uma sombra quase idêntica ao `--shadow` do protótipo
   nativamente (`0 1px 2px rgba(0,0,0,.05)` — Unfold, vs
   `0 1px 2px rgba(15,23,42,.05), 0 1px 1px rgba(15,23,42,.03)` do
   protótipo); só o CARTÃO ficou sem. Valores abaixo são os do protótipo,
   sem inventar novo token — `docs/referencias/theme_skin.legado.css:26-27,55-56`.
   `fieldset.module` também é o seletor das 7 páginas de ação customizada
   renomeadas na Fase 3B (`class="module aligned"` contém `module`) — efeito
   colateral aceito de propósito: dá a elas o mesmo contorno de cartão do
   resto do admin, sem tocar sua marcação. */
fieldset.module {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 1px rgba(15, 23, 42, 0.03);
}

html.dark fieldset.module {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* ─── Cartão das páginas de ação bespoke com `.rw-form-row` (Fase 3C) ──────
   Diagnóstico: essas páginas nunca tiveram CSS próprio — viviam de carona
   no `.form-row` global da skin antiga (zerada na Fase 0, ver topo deste
   arquivo). O rename da Fase 3B não mudou aparência, só parou a
   regressão; esta é a primeira aparência deliberada que recebem.

   Âncora: `fieldset.module.aligned:has(.rw-form-row)`. `fieldset.module.
   aligned` SOZINHO não é exclusivo dessas páginas — a mesma combinação de
   classes também existe em 3 `change_form.html` nativos que injetam um
   fieldset extra dentro da página padrão do Unfold (confirmado por grep +
   inspeção: nenhum dos 3 tem `.rw-form-row`; confirmado também que a
   combinação não aparece em nenhum template do pacote django-unfold
   instalado). `:has(.rw-form-row)` isola por construção, sem seletor de
   atributo/estilo inline e sem tocar marcação — depende só da classe
   renomeada na Fase 3B, exclusiva desse padrão (ver item 8 de
   unfold-licoes-aprendidas-dom.md). Uma das 7 páginas (`upload_xml.html`,
   compras) não usa fieldset — suas abas ficam fora deste seletor por
   construção; já tem estilo próprio (borda, raio) no `<style>` inline do
   próprio template, e não constava no relato de "desconfigurado". */
fieldset.module.aligned:has(.rw-form-row) {
  background: var(--color-base-50);
  border: 1px solid var(--color-base-200);
  border-radius: 6px; /* = --radius-sm nativo, medido na Fase 3 (item 3) */
  padding: 8px;
}

html.dark fieldset.module.aligned:has(.rw-form-row) {
  background: var(--color-base-900);
  border-color: var(--color-base-700);
}

fieldset.module.aligned:has(.rw-form-row) > h2 {
  /* Medido: sem esta regra o <h2> renderiza font-weight 400 — o preflight
     do Tailwind zera o negrito nativo do <h2>, e estas páginas nunca
     tinham uma classe própria para repor. Mesmo peso do h2 nativo do
     Unfold (`font-semibold`, admin/includes/fieldset.html). */
  font-weight: 600;
  margin-bottom: 8px;
}

/* Separador entre campos — mesma função do `border-b` que o `.field-line`
   nativo já carrega (ver unfold-licoes-aprendidas-dom.md). `.rw-form-row`
   é a classe renomeada na Fase 3B, já exclusiva deste projeto — não é o
   `.form-row` bare que a regra de ouro proíbe. */
.rw-form-row:not(:last-child) {
  border-bottom: 1px solid var(--color-base-200);
}

html.dark .rw-form-row:not(:last-child) {
  border-bottom-color: var(--color-base-700);
}

/* ─── Logo da loja no lugar do nome (Fase 3F) ──────────────────────────────
   `templates/unfold/helpers/site_branding.html` (override do projeto) troca
   o texto por <img> quando `request.loja.logo` existe. Fundo claro fixo
   (não alterna com o tema) de propósito: protege logo com traço escuro
   sobre fundo transparente, que ficaria ilegível no admin escuro sem
   nenhuma base atrás — o mesmo motivo vale em claro e escuro, não é uma
   regra por modo. */
.rw-logo-loja {
  max-height: 32px;
  max-width: 160px;
  border-radius: 4px;
  background: var(--color-base-50);
  padding: 2px 6px;
}

/* ─── A cor de marca da loja nas tarjas e nas abas (2026-09-29) ─────────────
   Pedido do dono: a cor escolhida em Loja → Aparência mal aparecia — as
   tarjas dos blocos eram cinza e a aba ativa só ganhava fundo branco. As
   duas passam a usar a rampa `--color-primary-*`, que o skeleton.html troca
   pela da loja (sem loja, a do Unfold). Vale em toda tela do admin.

   Tarja: o <h2> de `unfold/helpers/inline_heading.html` — o cabeçalho de
   todo fieldset com nome e de todo inline. `bg-base-100` + `text-important`
   só aparecem juntos nele. */
h2.bg-base-100.text-important {
  background: var(--color-primary-50);
  color: var(--color-primary-800);
  border-left: 4px solid var(--color-primary-600);
}

html.dark h2.bg-base-100.text-important {
  background: color-mix(in srgb, var(--color-primary-500) 18%, transparent);
  color: var(--color-primary-200);
  border-left-color: var(--color-primary-500);
}

/* Abas do hub (`unfold/helpers/tab_items.html`, `#tabs-items`) com cara de
   aba (pedido do dono, 2026-09-29): ~30% maiores que as do Unfold (5px/10px
   de respiro, 14px), cantos de cima arredondados, sentadas sobre um traço na
   cor de marca; a ativa é cheia na cor e encosta no traço. As demais ficam
   num tom neutro e ganham um toque da cor no hover. */
#tabs-items {
  background: transparent;
  padding: 0;
  gap: 4px;
  border-radius: 0;
  border-bottom: 3px solid var(--color-primary-600);
  align-items: flex-end;
  /* Sem o menu "…" (override de tab_items.html): o que não cabe quebra para
     a linha de baixo, e toda aba fica à vista. */
  flex-wrap: wrap;
  row-gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}

html.dark #tabs-items {
  background: transparent;
  border-bottom-color: var(--color-primary-500);
}

#tabs-items > a {
  font-size: 1rem;
  padding: 8px 16px;
  border-radius: var(--border-radius, 6px) var(--border-radius, 6px) 0 0;
  background: var(--color-base-100);
  color: var(--color-base-700);
  box-shadow: none;
}

html.dark #tabs-items > a {
  background: rgb(255 255 255 / 0.06);
  color: var(--color-base-300);
}

#tabs-items > a.active,
#tabs-items > a.active:hover,
html.dark #tabs-items > a.active,
html.dark #tabs-items > a.active:hover {
  background: var(--color-primary-600);
  color: #fff;
  box-shadow: none;
}

#tabs-items > a:not(.active):hover {
  background: var(--color-primary-50);
  color: var(--color-primary-700);
}

html.dark #tabs-items > a:not(.active):hover {
  background: color-mix(in srgb, var(--color-primary-500) 18%, transparent);
  color: var(--color-primary-200);
}

/* Abas de fieldset dentro do formulário (`fieldsets_tabs.html`): a ativa já
   tinha o texto na cor de marca; ganha o traço em cima, para ser vista. */
div[x-data*="activeFieldsetTab"] nav > a.active {
  box-shadow: inset 0 3px 0 var(--color-primary-600);
}

/* Campo cru nas telas próprias do admin (pedido do dono, 2026-09-29). O
   Unfold estiliza só o widget dele; um `forms.Form` renderizado com
   `{{ field }}` (assistente do cockpit, ajuste de estoque, planilha,
   webmaster, caixa) saía sem borda nem fundo, invisível no tema escuro.
   Widget do Unfold e os nossos (`rw-*`) sempre têm classe: só o cru é pego.
   Espelha o BASE_INPUT_CLASSES do Unfold. */
#content input:not([class]):is([type="text"], [type="password"], [type="email"],
  [type="number"], [type="url"], [type="tel"], [type="search"], [type="date"],
  [type="time"], [type="datetime-local"], :not([type])),
#content select:not([class]),
#content textarea:not([class]) {
  width: 100%;
  max-width: 42rem;
  padding: 8px 12px;
  border: 1px solid var(--color-base-200);
  border-radius: var(--border-radius, 6px);
  background: #fff;
  color: var(--color-font-default-light);
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}

#content input:not([class]):focus,
#content select:not([class]):focus,
#content textarea:not([class]):focus {
  outline: 2px solid var(--color-primary-600);
  outline-offset: -2px;
}

html.dark #content input:not([class]):is([type="text"], [type="password"],
  [type="email"], [type="number"], [type="url"], [type="tel"], [type="search"],
  [type="date"], [type="time"], [type="datetime-local"], :not([type])),
html.dark #content select:not([class]),
html.dark #content textarea:not([class]) {
  background: var(--color-base-900);
  border-color: var(--color-base-700);
  color: var(--color-font-default-dark);
  color-scheme: dark;
}