/* ============================================================
   Theme Graphite — Site público Alpha Ultrapress
   Refactor de paleta: substitui vermelho por preto/grafite premium.
   - Não altera tamanhos, layouts, transições ou comportamento.
   - Carregar SEMPRE como ÚLTIMO stylesheet (depois de styles.css,
     login-modal.css, admin-panel.css, login.css).
   - Reversível: basta remover a tag <link> que aponta para este arquivo.
   ============================================================ */

:root {
  /* Paleta de marca neutra */
  --gph-ink: #0b0b0c;          /* preto profundo */
  --gph-ink-2: #111111;        /* preto secundário */
  --gph-ink-3: #16181d;        /* preto suave */
  --gph-graphite: #2b2f36;     /* grafite */
  --gph-graphite-2: #3a4048;   /* grafite claro */
  --gph-graphite-3: #4b5563;   /* cinza escuro */
  --gph-line: #d1d5db;         /* cinza linha */
  --gph-line-2: #e5e7eb;       /* cinza claro */
  --gph-soft: #f3f4f6;         /* cinza suave */
  --gph-off-white: #fafafa;
}

/* === styles.css (raiz do site público) ====================== */
:root {
  --primary-color: var(--gph-ink) !important;
  --primary-color-hover: var(--gph-graphite) !important;
}

/* === login.css ============================================== */
:root {
  --alpha-red: var(--gph-ink) !important;
  --alpha-red-hover: var(--gph-graphite) !important;
  --alpha-red-deep: var(--gph-ink-2) !important;
  --surface-border: rgba(15, 17, 22, 0.18) !important;
}

/* ============================================================
   HEADER / NAVBAR — botões e ícones
   ============================================================ */

/* Botão Menu (mobile e desktop) */
.menu-btn,
.alpha-main-header .menu-btn {
  background-color: #ffffff !important;
  border: 1px solid var(--gph-line) !important;
  color: var(--gph-ink) !important;
}
.menu-btn:hover,
.menu-btn:focus,
.alpha-main-header .menu-btn:hover {
  background-color: var(--gph-ink) !important;
  border-color: var(--gph-ink) !important;
  color: #ffffff !important;
}
.menu-btn.is-open,
.alpha-main-header .menu-btn.is-open {
  background-color: var(--gph-ink) !important;
  border-color: var(--gph-ink) !important;
  color: #ffffff !important;
}

/* Lupa de busca */
.search-bar button,
.alpha-main-header .search-bar button {
  background-color: var(--gph-ink) !important;
  color: #ffffff !important;
}
.search-bar button:hover,
.alpha-main-header .search-bar button:hover {
  background-color: var(--gph-graphite) !important;
}

/* Botão "Painel administrativo" (id real: nav-admin-btn) */
.main-nav .nav-admin-btn,
.nav-admin-btn,
.alpha-header-admin-link {
  background: var(--gph-ink) !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 1px solid var(--gph-ink) !important;
  box-shadow: 0 6px 14px rgba(15, 17, 22, 0.20) !important;
}
.main-nav .nav-admin-btn:hover,
.nav-admin-btn:hover,
.alpha-header-admin-link:hover {
  background: var(--gph-graphite) !important;
  background-image: none !important;
  border-color: var(--gph-graphite) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(15, 17, 22, 0.26) !important;
}
.main-nav .nav-admin-btn i,
.nav-admin-btn i,
.alpha-header-admin-link i,
.alpha-header-admin-link svg { color: #ffffff !important; }

/* Botão "Produto Exclusivo" do aluno — caso herde vermelho */
.main-nav .nav-student-btn,
.nav-student-btn {
  background: var(--gph-graphite) !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: var(--gph-graphite) !important;
}
.main-nav .nav-student-btn:hover,
.nav-student-btn:hover {
  background: var(--gph-ink) !important;
  border-color: var(--gph-ink) !important;
}

/* Botão sair / logout */
.nav-logout-btn,
#nav-logout-btn {
  background: var(--gph-ink) !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 1px solid var(--gph-ink) !important;
}
.nav-logout-btn:hover,
#nav-logout-btn:hover {
  background: var(--gph-graphite) !important;
  border-color: var(--gph-graphite) !important;
}
.nav-logout-btn i,
#nav-logout-btn i { color: #ffffff !important; }

/* Saudação "Olá, Administrador" — ícone do usuário no header */
.main-nav .nav-user-greeting i,
.nav-user-greeting i,
.nav-user-greeting svg {
  color: var(--gph-graphite-2) !important;
}
.alpha-main-header .user-avatar { color: var(--gph-ink) !important; }

/* ============================================================
   BACKGROUNDS ROSADOS — substituídos por cinza ultra suave
   ============================================================ */
.wl-detail-btn:hover,
.catalog-icon-btn.active,
.size-unavail,
.option-btn.active,
.qty-btn.active {
  background: var(--gph-soft) !important;
  color: var(--gph-ink) !important;
  border-color: var(--gph-line) !important;
}

.product-round-badge {
  background: linear-gradient(135deg, #ffffff 0%, var(--gph-soft) 100%) !important;
  color: var(--gph-ink) !important;
}

.love-count-badge {
  background: rgba(15, 17, 22, 0.06) !important;
  color: var(--gph-ink) !important;
}

.filter-check-input:checked,
.filter-check-input:checked + label,
.filter-check-input:checked ~ label {
  background: rgba(15, 17, 22, 0.06) !important;
  border-color: var(--gph-graphite) !important;
}

.alpha-mega-link:hover {
  background: rgba(15, 17, 22, 0.05) !important;
  color: var(--gph-ink) !important;
}

/* ============================================================
   TAGS / TÍTULOS / TEXTO VERMELHO INFORMATIVO (não-erro)
   ============================================================ */
.product-special-tag {
  color: var(--gph-graphite) !important;
}

/* ============================================================
   LOGIN MODAL — gradients e bordas
   ============================================================ */
.form-submit-gradient,
.login-form .submit-btn,
.login-form button[type="submit"] {
  background: linear-gradient(120deg, var(--gph-ink-2) 0%, var(--gph-ink) 56%, var(--gph-graphite) 100%) !important;
  color: #ffffff !important;
}
.form-submit-gradient:hover,
.login-form .submit-btn:hover {
  background: linear-gradient(120deg, var(--gph-ink) 0%, var(--gph-graphite) 100%) !important;
}

/* ============================================================
   ADMIN-PANEL.CSS / ADMIN-EDITOR.CSS (público)
   apenas substitui usos não-críticos. Erros (.error-text)
   permanecem vermelhos por acessibilidade.
   ============================================================ */
.admin-link,
.admin-shortcut,
.admin-cta {
  background: var(--gph-ink) !important;
  color: #ffffff !important;
  border-color: var(--gph-ink) !important;
}
.admin-link:hover,
.admin-shortcut:hover,
.admin-cta:hover {
  background: var(--gph-graphite) !important;
  border-color: var(--gph-graphite) !important;
}

/* ============================================================
   EXCEÇÕES — vermelho mantido para estados críticos
   ============================================================
   Mantemos as classes abaixo intactas (sem regra aqui), pois
   precisam continuar vermelhas para acessibilidade:
   - .error-text          (mensagens de erro)
   - .form-error          (erros de formulário)
   - .alert--danger       (alertas críticos)
   - botões "excluir"     (.btn-delete, .btn-remove)
   - badge "sem estoque"  (.stock-out)
   ============================================================ */