/* ============================================================
   Ajustes do shell do redesign v2 para o Blazor.

   O protótipo React usa <button> na rail e mantém o estado de
   navegação em memória; aqui a rail e o painel são âncoras reais,
   então este arquivo só reconcilia o que muda por causa disso.
   Carregue-o depois de design/app.css.
   ============================================================ */

/* Nenhum link da aplicação é sublinhado — a cor de acento já os distingue.
   O tokens.css do design não traz o reset de <a> porque lá ele vinha junto
   dos estilos de elemento do guia, que não são replicados aqui. */
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.rail__brand,
.rail__btn {
  text-decoration: none;
  color: inherit;
}
.rail__brand:hover,
.rail__btn:hover { color: var(--rail-fg-strong); }
.rail__btn.is-active,
.rail__btn.is-active:hover { color: var(--rail-active-fg); }

.rail__btn:focus-visible,
.rail__brand:focus-visible,
.panel__item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* A rail continua visível quando o painel está recolhido. */
.shell[data-panel="closed"] { grid-template-columns: 60px 0 1fr; }

.panel__foot form { display: contents; }
.panel__foot-actions a {
  display: inline-flex;
  padding: 6px;
  border-radius: 6px;
  color: var(--panel-fg-3);
}
.panel__foot-actions a:hover { background: var(--panel-hover); color: var(--panel-fg); }

/* ------------------------------------------------------------
   Painel contextual: cada página o preenche com <ShellPanel>.
   Largura um pouco maior que a do protótipo, porque aqui ele
   carrega formulários de filtro e não só listas de links.
   ------------------------------------------------------------ */
.shell { --panel-w: 252px; }
.panel__actions { padding: 8px 12px 4px; }
.panel__actions .btn { width: 100%; justify-content: center; }

.panel-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 12px 8px;
}
.panel-field__label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cat-label);
}
.panel-field input,
.panel-field select {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--panel-divider);
  border-radius: 6px;
  background: var(--cat-surface);
  font: inherit;
  font-size: 12.5px;
  color: var(--panel-fg);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.panel-field select { cursor: pointer; }
.panel-field input:focus,
.panel-field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.panel-field__suffix { display: flex; align-items: center; gap: 4px; }
.panel-field__suffix input { flex: 1; min-width: 0; }
.panel-field__suffix b { font-size: 11px; font-weight: 700; color: var(--panel-fg-3); }

/* Área de conteúdo: o corpo das páginas ainda usa .content herdado. */
.main > .content { max-width: 1480px; margin: 0 auto; padding: 24px 32px 64px; }

/* O .page-head sangra até as bordas do canvas, mas seu conteúdo acompanha
   a mesma medida do corpo da página. */
.main > .page-head { padding-inline: max(32px, calc((100% - 1480px) / 2 + 32px)); }
.page-head__actions .btn { text-decoration: none; }
/* ------------------------------------------------------------
   KPIs
   ------------------------------------------------------------ */

/* O protótipo fixa 4 colunas e só quebra por media query da viewport.
   Aqui a rail e o painel comem ~312px do canvas, então a viewport mente
   sobre o espaço disponível: auto-fit responde à largura real do container. */
.kpi-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Sem sparkline e sem variação, o card não é clicável — não deve fingir que é. */
.kpi-card { cursor: default; }
.kpi-card:hover { transform: none; border-color: var(--cat-border); box-shadow: none; }

/* ------------------------------------------------------------
   Tabela de produtos
   ------------------------------------------------------------ */

/* No protótipo o nome do produto é um <div>; aqui precisa ser link. */
.table .row-name__primary { color: var(--cat-ink-900); text-decoration: none; display: block; }
.table .row-name__primary:hover { color: var(--accent); }
.table .row-thumb span { font-size: 15px; line-height: 1; }

/* O ícone de ordenação herda o alinhamento do <th>. */
.table th.is-sortable .th-sort svg { vertical-align: -2px; }

.pagination__num:disabled { opacity: .4; cursor: not-allowed; }
.pagination__num:disabled:hover { background: transparent; }

/* Ações da linha: no protótipo são <button>; aqui a edição é uma âncora. */
.row-action { text-decoration: none; }

/* O seletor de visualização legado convive com a .toolbar do design. */
.toolbar .view-switch { flex: 0 0 auto; }

/* ------------------------------------------------------------
   Seletor de tema

   O estado ativo é lido do <html data-theme-pref> em vez de uma
   classe: assim o servidor já entrega o seletor marcado e ele não
   depende de nenhum re-render do Blazor para ficar certo.
   ------------------------------------------------------------ */
.theme-switch { position: relative; display: flex; justify-content: center; }
.theme-switch__trigger { color: inherit; }

.theme-switch__glyph { display: none; }
:root[data-theme="dark"] .theme-switch__glyph--dark,
:root:not([data-theme="dark"]) .theme-switch__glyph--light { display: inline-flex; }

/* Fixo, e não absoluto: a rail rola (overflow-y: auto) e recorta tudo que
   sai dela. Como o bloco de baixo da rail é ancorado pelo .rail__spacer, o
   menu nasce sempre ao lado do gatilho. */
.theme-switch__menu {
  position: fixed;
  left: 68px;
  bottom: 12px;
  min-width: 176px;
  padding: 6px;
  display: grid;
  gap: 2px;
  border: 1px solid var(--cat-border);
  border-radius: 10px;
  background: var(--cat-surface);
  box-shadow: var(--shadow-3);
  z-index: 150;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-4px);
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              visibility var(--dur-fast);
}
.theme-switch:hover .theme-switch__menu,
.theme-switch:focus-within .theme-switch__menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.theme-switch__title {
  padding: 5px 9px 6px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cat-muted);
}

.theme-switch__opt {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--cat-ink);
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
}
.theme-switch__opt:hover { background: var(--cat-surface-alt); color: var(--cat-ink-900); }
.theme-switch__opt svg { flex: 0 0 auto; }
.theme-switch__opt > span:first-of-type { flex: 1; }
.theme-switch__check { display: inline-flex; opacity: 0; color: var(--accent); }

:root[data-theme-pref="light"]  .theme-switch__opt[data-theme-option="light"],
:root[data-theme-pref="dark"]   .theme-switch__opt[data-theme-option="dark"],
:root[data-theme-pref="system"] .theme-switch__opt[data-theme-option="system"] {
  background: var(--accent-soft);
  color: var(--accent);
}
:root[data-theme-pref="light"]  .theme-switch__opt[data-theme-option="light"]  .theme-switch__check,
:root[data-theme-pref="dark"]   .theme-switch__opt[data-theme-option="dark"]   .theme-switch__check,
:root[data-theme-pref="system"] .theme-switch__opt[data-theme-option="system"] .theme-switch__check {
  opacity: 1;
}

/* Fora da rail (login): flutua no canto e o menu cai para baixo. */
.theme-switch--floating { position: fixed; top: 16px; right: 16px; z-index: 150; }
.theme-switch--floating .theme-switch__trigger {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--cat-border);
  border-radius: 9px;
  background: var(--cat-surface);
  color: var(--cat-ink);
  box-shadow: var(--shadow-1);
}
.theme-switch--floating .theme-switch__trigger:hover { color: var(--accent); }
.theme-switch--floating .theme-switch__menu {
  left: auto;
  right: 16px;
  bottom: auto;
  top: 62px;
  transform: translateY(-4px);
}
.theme-switch--floating:hover .theme-switch__menu,
.theme-switch--floating:focus-within .theme-switch__menu { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .theme-switch__menu { transition: none; }
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.catalog-toolbar__summary {
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cat-muted);
}

@media (max-width: 900px) {
  .shell,
  .shell[data-panel="closed"] { position: relative; grid-template-columns: 60px 0 1fr; }
  .shell .panel { position: absolute; left: 60px; top: 0; bottom: 0; width: 252px; box-shadow: var(--shadow-2); }
  .shell[data-panel="open"] .panel { transform: translateX(0); pointer-events: auto; }
  .shell[data-panel="closed"] .panel { transform: translateX(-100%); pointer-events: none; }

  .main > .content { padding: 20px 16px 48px; }
  .main > .page-head { padding: 14px 16px; }
  .page-head__title-row { row-gap: 4px; }
  .page-head__sub { white-space: normal; }
  .page-head__actions { width: 100%; justify-content: flex-start; }

  .toolbar { gap: 8px; }
  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
  .kpi-card { padding: 12px 14px; }
}