/* ============================================================
   ATG Supply Chain — Component Library
   ------------------------------------------------------------
   Botões, formulários, cards, badges, alertas e outros blocos de
   interface reutilizáveis, construídos sobre os tokens de
   assets/css/tokens.css. Extraído da página de login e pensado
   pra crescer junto com o projeto — quando uma página nova
   precisar de um componente que já existe aqui, reaproveite a
   classe em vez de criar um estilo novo do zero.

   Como usar:
        <link rel="stylesheet" href="assets/css/tokens.css">
        <link rel="stylesheet" href="assets/css/typography.css">
        <link rel="stylesheet" href="assets/css/components.css">

   Índice deste arquivo:
     1. Botões           (.btn, .btn-accent, .btn-outline, .btn-ghost)
     2. Formulários       (.field, input, select, textarea, checkbox, .switch)
     3. Cards             (.card)
     4. Badges / tags     (.badge)
     5. Alertas / notas   (.alert)
     6. Links e divisores (.link-accent, .divider)
     7. Avatar            (.avatar)
     8. Carregamento      (.spinner, .skeleton)
     9. Tooltip           (.tooltip)
    10. Tabela            (.table)
    10b. Ações de linha   (.row-btn)
    11. Estado vazio      (.empty-state)
   ============================================================ */

/* ============================================================
   1. BOTÕES
   ------------------------------------------------------------
   .btn é a base (tamanho, formato, transições). Combine com uma
   variante de cor (.btn-accent / .btn-outline / .btn-ghost) e,
   se precisar, um tamanho (.btn-sm / .btn-lg). Todo botão exige
   alvo de toque confortável — a base já garante isso (padding
   generoso), não reduza abaixo de .btn-sm.
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:16px 26px;
  border-radius:var(--radius-full);
  font-family:var(--ff-body);
  font-weight:var(--fw-bold);
  font-size:var(--fs-button-pill);
  letter-spacing:var(--ls-wider);
  text-transform:uppercase;
  white-space:nowrap;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform var(--duration-base) var(--ease-standard),
             background var(--duration-base) var(--ease-standard),
             color var(--duration-base) var(--ease-standard),
             border-color var(--duration-base) var(--ease-standard),
             opacity var(--duration-base) var(--ease-standard);
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn:disabled,.btn.is-disabled{ opacity:.55; cursor:not-allowed; transform:none; }

.btn-accent{ background:var(--accent); color:#ffffff; }
.btn-accent:hover{ background:var(--accent-hover); }

.btn-outline{
  background:transparent; color:var(--ink); border-color:var(--card-border);
  text-transform:none; letter-spacing:var(--ls-normal); font-weight:var(--fw-semibold); font-size:var(--fs-button);
  padding:13px 20px;
}
.btn-outline:hover{ border-color:rgba(20,24,29,.35); }

.btn-ghost{
  background:transparent; color:var(--muted); border-color:transparent;
  text-transform:none; letter-spacing:var(--ls-normal); font-weight:var(--fw-semibold); font-size:var(--fs-button);
  padding:13px 20px;
}
.btn-ghost:hover{ background:rgba(20,24,29,.05); color:var(--ink); }

.btn-block{ width:100%; }
.btn-sm{ padding:9px 16px; font-size:11.5px; }
.btn-outline.btn-sm,.btn-ghost.btn-sm{ padding:8px 14px; font-size:12.5px; }
.btn-lg{ padding:18px 32px; font-size:14px; }

/* ============================================================
   2. FORMULÁRIOS
   ------------------------------------------------------------
   Padrão: <div class="field"> envolvendo label + input + (opcional)
   mensagem de erro em .err-msg. O erro some por padrão e aparece
   quando o .field ganha a classe .has-error (JS liga isso na
   validação) — coloque a mensagem sempre perto do campo, nunca só
   num resumo no topo do formulário.
   ============================================================ */
.field{ margin-bottom:18px; }
.field label{
  display:block; margin-bottom:8px;
  font-family:var(--ff-body); font-size:var(--fs-label); font-weight:var(--fw-semibold); color:#2b2f35;
}
.field .input-wrap{ position:relative; }
.field .hint{ margin-top:7px; font-size:12.5px; color:var(--muted-2); }
.field .err-msg{ display:none; margin-top:7px; font-size:12.5px; color:var(--danger); }
.field.has-error .err-msg{ display:block; }

.input, .field input, .field select, .field textarea{
  width:100%; padding:14px 16px; border-radius:var(--radius-md);
  background:var(--card); border:1px solid var(--card-border); color:var(--ink);
  font-family:var(--ff-body); font-size:var(--fs-body); outline:none;
  transition:border-color var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard);
}
.field textarea{ resize:vertical; min-height:96px; line-height:var(--lh-base); }
.input::placeholder, .field input::placeholder, .field textarea::placeholder{ color:var(--muted-3); }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--accent); box-shadow:var(--shadow-focus); }
.input.error, .field input.error, .field select.error, .field textarea.error{ border-color:var(--danger); }
.field select{ appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239c9ca3' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px; padding-right:40px;
}

/* botão de ícone dentro de um input (ex.: mostrar/ocultar senha) */
.input-action{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; color:var(--muted-2); padding:4px;
  display:flex; align-items:center;
}
.input-action:hover{ color:var(--ink); }
.input-action svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.6; }

/* checkbox e radio — mantidos nativos (acessíveis por padrão),
   só recoloridos com accent-color pra combinar com a marca */
.check, .radio{ display:flex; align-items:center; gap:8px; font-size:var(--fs-body-sm); color:var(--muted); cursor:pointer; }
.check input, .radio input{ accent-color:var(--accent); width:16px; height:16px; flex-shrink:0; }

/* switch / toggle — pra preferências on-off (ex.: notificações) */
/* `.field label` (bloco, acima) tem especificidade maior que `.switch` sozinho —
   dentro de um .field (ex.: "Usuário ativo" no modal de admin-usuarios.html) o
   label do toggle virava display:block, perdendo o flex/gap e deixando o texto
   colado no botão. `.field .switch` iguala a especificidade e reafirma o layout. */
.switch, .field .switch{ display:inline-flex; align-items:center; gap:10px; margin-bottom:0; cursor:pointer; }
.switch input{ position:absolute; opacity:0; width:1px; height:1px; }
.switch .track{
  display:inline-block; width:38px; height:22px; border-radius:var(--radius-full); background:var(--card-border);
  position:relative; transition:background var(--duration-base) var(--ease-standard); flex-shrink:0;
}
.switch .track::after{
  content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%;
  background:var(--ink); transition:transform var(--duration-base) var(--ease-standard);
}
.switch input:checked + .track{ background:var(--accent); }
.switch input:checked + .track::after{ transform:translateX(16px); background:#ffffff; }
.switch input:focus-visible + .track{ outline:2px solid var(--accent); outline-offset:2px; }
.switch .switch-label{ font-size:var(--fs-body-sm); color:var(--muted); }

/* ============================================================
   3. CARDS
   ------------------------------------------------------------ */
.card{
  background:var(--card); border:1px solid var(--card-border);
  border-radius:var(--radius-lg); padding:var(--space-6);
}
.card-lg{ border-radius:var(--radius-xl); padding:var(--space-8); }
.card-hover{ transition:transform var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); }
.card-hover:hover{ transform:translateY(-3px); border-color:rgba(20,24,29,.16); }

/* ============================================================
   4. BADGES / TAGS
   ------------------------------------------------------------
   Pra status curtos (ex.: "Ativo", "Pendente", "Em trânsito").
   Não uses cor sozinha pra transmitir o estado — o texto do
   badge já diz o que é; a cor só reforça.
   ============================================================ */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:var(--radius-full);
  font-family:var(--ff-body); font-size:11.5px; font-weight:var(--fw-bold);
  letter-spacing:.04em; text-transform:uppercase;
  border:1px solid transparent;
}
.badge-neutral{ background:rgba(20,24,29,.05); color:var(--muted); border-color:var(--card-border); }
.badge-accent{ background:rgba(0,125,195,.12); color:var(--accent-dim); border-color:rgba(0,125,195,.3); }
.badge-success{ background:rgba(31,157,99,.12); color:#0f6b41; border-color:rgba(31,157,99,.3); }
.badge-warning{ background:rgba(185,121,28,.12); color:#7a4e10; border-color:rgba(185,121,28,.3); }
.badge-danger{ background:rgba(210,60,86,.12); color:var(--danger); border-color:rgba(210,60,86,.3); }

/* ============================================================
   5. ALERTAS / NOTAS
   ------------------------------------------------------------
   Pra mensagens de estado do sistema (sucesso, erro, aviso,
   informação). Sempre com texto explicando o que aconteceu e,
   quando fizer sentido, o que fazer a seguir.
   ============================================================ */
.alert{
  display:flex; gap:10px; align-items:flex-start;
  padding:14px 16px; border-radius:var(--radius-md);
  border:1px solid; font-family:var(--ff-body); font-size:13px; line-height:var(--lh-base);
}
.alert-icon{ width:18px; height:18px; flex-shrink:0; margin-top:1px; }
.alert-accent{ background:rgba(0,125,195,.08); border-color:rgba(0,125,195,.25); color:#045a8d; }
.alert-info{ background:rgba(74,127,176,.08); border-color:rgba(74,127,176,.25); color:#2c4f70; }
.alert-success{ background:rgba(31,157,99,.08); border-color:rgba(31,157,99,.25); color:#0f6b41; }
.alert-warning{ background:rgba(185,121,28,.08); border-color:rgba(185,121,28,.25); color:#7a4e10; }
.alert-danger{ background:rgba(210,60,86,.08); border-color:rgba(210,60,86,.25); color:#8e2438; }

/* ============================================================
   6. LINKS E DIVISORES
   ============================================================ */
.link-accent{ color:var(--accent-dim); font-weight:var(--fw-semibold); }
.link-accent:hover{ text-decoration:underline; text-underline-offset:2px; }

.link-muted{ color:var(--muted); font-weight:var(--fw-semibold); transition:color var(--duration-base) var(--ease-standard); }
.link-muted:hover{ color:var(--accent); }

.divider{
  display:flex; align-items:center; gap:14px; margin:26px 0;
  color:var(--muted-2); font-size:var(--fs-overline); text-transform:uppercase; letter-spacing:var(--ls-wider);
}
.divider::before,.divider::after{ content:""; flex:1; height:1px; background:var(--card-border); }
/* .divider vazio (sem texto) vira só uma linha */
.divider:empty::before,.divider:empty::after{ margin:0; }

/* ============================================================
   7. AVATAR
   ============================================================ */
.avatar{
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:linear-gradient(135deg, var(--accent), var(--accent-dim));
  color:#ffffff; font-family:var(--ff-display); font-weight:var(--fw-bold); font-size:15px;
}
.avatar img{ width:100%; height:100%; object-fit:cover; }
.avatar-sm{ width:28px; height:28px; font-size:12px; }
.avatar-lg{ width:56px; height:56px; font-size:20px; }

/* ============================================================
   8. CARREGAMENTO
   ============================================================ */
.spinner{
  width:20px; height:20px; border-radius:50%;
  border:2.5px solid rgba(20,24,29,.14); border-top-color:var(--accent);
  animation:atg-spin .7s linear infinite;
}
@keyframes atg-spin{ to{ transform:rotate(360deg); } }

.skeleton{
  background:linear-gradient(90deg, var(--card) 25%, var(--card-alt) 37%, var(--card) 63%);
  background-size:400% 100%;
  animation:atg-shimmer 1.4s ease infinite;
  border-radius:var(--radius-sm);
}
@keyframes atg-shimmer{ 0%{ background-position:100% 50%; } 100%{ background-position:0 50%; } }

@media (prefers-reduced-motion: reduce){
  .spinner,.skeleton{ animation-duration:2.4s; }
  .btn:hover,.card-hover:hover,.action-card:hover{ transform:none; }
  .btn,.card-hover,.action-card,.tooltip::after,
  .nav-category-btn .chevron,.nav-subgroup-btn .chevron,.shell-dropdown-trigger .chevron,
  .nav-submenu,.nav-subsubmenu,.shell-menu{
    transition-duration:0.01ms !important;
  }
}

/* ============================================================
   9. TOOLTIP
   ------------------------------------------------------------
   Uso: <span class="tooltip" data-tooltip="Texto de apoio">...</span>
   Só pra complemento — nunca esconda informação essencial atrás
   de um tooltip (ele não existe em telas touch).
   ============================================================ */
.tooltip{ position:relative; }
.tooltip::after{
  content:attr(data-tooltip);
  position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(4px);
  background:#17171a; border:1px solid #2a2a2e; color:#ffffff;
  font-size:12px; font-weight:500; white-space:nowrap; padding:6px 10px; border-radius:var(--radius-sm);
  opacity:0; pointer-events:none; transition:opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
  box-shadow:var(--shadow-sm);
}
.tooltip:hover::after, .tooltip:focus-visible::after{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ============================================================
   10. TABELA
   ============================================================ */
.table{ width:100%; border-collapse:collapse; font-family:var(--ff-body); font-size:var(--fs-body); }
.table th{
  text-align:left; font-size:11.5px; font-weight:var(--fw-bold); letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted-2); padding:0 14px 10px; border-bottom:1px solid var(--card-border);
}
.table td{ padding:14px; border-bottom:1px solid var(--card-border); color:var(--ink); }
.table tbody tr{ transition:background var(--duration-fast) var(--ease-standard); }
.table tbody tr:hover{ background:var(--card); }
.table tbody tr:last-child td{ border-bottom:none; }

/* ============================================================
   10b. AÇÕES DE LINHA (.row-actions, .row-btn)
   ------------------------------------------------------------
   Botão de ação (editar/excluir/resetar etc.) dentro de uma linha
   de tabela — ícone só, sem texto. Consolidado aqui (achado de
   auditoria de UI, 2026-09-16) porque estava copiado igual em 4
   páginas (admin-usuarios.html, metas.html,
   inventario-administracao.html, inventario-relatorios.html);
   qualquer ajuste agora vale pras 4 de uma vez.
   ============================================================ */
.row-actions{ display:flex; gap:6px; justify-content:flex-end; }
.row-btn{
  width:32px; height:32px; border-radius:var(--radius-sm); background:transparent; border:1px solid transparent;
  color:var(--muted); cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  transition:background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}
.row-btn svg{ width:16px; height:16px; }
.row-btn:hover{ background:rgba(20,24,29,.05); color:var(--ink); }
.row-btn.danger:hover{ background:rgba(210,60,86,.12); color:var(--danger); }
.row-btn:disabled{ opacity:.35; cursor:not-allowed; }
.row-btn:disabled:hover{ background:transparent; color:var(--muted); }

/* ============================================================
   11. ESTADO VAZIO
   ------------------------------------------------------------
   Pra quando uma lista/tabela/painel não tem conteúdo ainda —
   trate como um convite pra agir, não só um aviso.
   ============================================================ */
.empty-state{ text-align:center; padding:var(--space-16) var(--space-6); color:var(--muted); }
.empty-state .icon{ width:40px; height:40px; margin:0 auto var(--space-4); color:var(--muted-2); }
.empty-state h3{ margin-bottom:8px; }
.empty-state p{ max-width:360px; margin:0 auto var(--space-5); }