/*
  Tokens de tema compartilhados entre Site, ImobWeb e IgrejaWeb.
  Referenciado via <link> explícito no App.razor de cada projeto (CSS scoped de RCL
  não serve para variáveis globais — ver docs/05-analysis/todo/ANA-redesign-visual-frontend-jyr.md).
  Valores copiados fielmente de docs/03-standards/ESPECIFICACAO_LAYOUT_FRONTEND.md §1.
*/

:root {
  /* Paleta principal */
  --k-azul-marinho: #0B1B3D;
  --k-azul-noturno: #05102A;
  --k-azul-claro: #14284f;
  --k-azul-bg: #E9EBF2;
  --k-preto: #111827;
  --k-cinza-escuro: #374151;
  --k-cinza: #6B7280;
  --k-cinza-claro: #F3F6FC;
  --k-branco: #FFFFFF;
  --k-dourado: #C9A227;
  --k-dourado-claro: #E8C874;
  --k-verde: #059669;
  --k-amarelo: #D97706;
  --k-roxo: #7C3AED;
  --k-whatsapp: #25D366;
  --k-whatsapp-escuro: #1DB954;

  /* Paleta do painel administrativo (dourado dominante, sidebar azul-noturno) */
  --k-admin-primaria: #C9A227;
  --k-admin-primaria-escura: #A9821F;
  --k-admin-primaria-bg: #F7EFDA;
  --k-sidebar-bg: #05102A;
  --k-verde-bg: #ECFDF5;
  --k-vermelho: #DC2626;
  --k-vermelho-bg: #FEF2F2;
  --k-amarelo-bg: #FEFCE8;

  /* Tipografia */
  --k-font-display: 'Playfair Display', Georgia, serif;
  --k-font: 'Montserrat', Helvetica, Arial, sans-serif;

  /* Bordas, sombra, raio */
  --k-radius: 12px;
  --k-radius-admin: 10px;
  --k-shadow: 0 4px 24px rgba(11, 27, 61, .10);
  --k-shadow-lg: 0 8px 48px rgba(11, 27, 61, .18);
  --k-transition: .2s ease;
}

html, body {
  font-family: var(--k-font);
}

/* ===== Overrides explícitos de classes Bootstrap cruas =====
   Não usamos custom properties do Bootstrap (--bs-primary etc.) porque o Site roda
   Bootstrap 5.1.0 e ImobWeb/IgrejaWeb rodam 5.3.3 — o suporte a essas variáveis diverge
   entre versões. Regra explícita funciona igual nas duas. Nomes de classe do Bootstrap
   nunca são renomeados aqui — só a aparência muda (JS do Bootstrap e testes bUnit
   dependem dos nomes originais). */

.btn-primary {
  background-color: var(--k-admin-primaria);
  border-color: var(--k-admin-primaria);
  color: var(--k-azul-marinho);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--k-admin-primaria-escura) !important;
  border-color: var(--k-admin-primaria-escura) !important;
  color: var(--k-branco) !important;
}

.btn-outline-primary {
  color: var(--k-admin-primaria);
  border-color: var(--k-admin-primaria);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: var(--k-admin-primaria) !important;
  border-color: var(--k-admin-primaria) !important;
  color: var(--k-azul-marinho) !important;
}

.btn-danger {
  background-color: var(--k-vermelho);
  border-color: var(--k-vermelho);
}

.btn-danger:hover,
.btn-danger:focus {
  background-color: #b91c1c !important;
  border-color: #b91c1c !important;
}

.btn-outline-danger {
  color: var(--k-vermelho);
  border-color: var(--k-vermelho);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
  background-color: var(--k-vermelho) !important;
  border-color: var(--k-vermelho) !important;
  color: var(--k-branco) !important;
}

.btn-outline-secondary {
  color: var(--k-cinza-escuro);
  border-color: #E5E7EB;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background-color: var(--k-cinza-claro) !important;
  border-color: #E5E7EB !important;
  color: var(--k-azul-marinho) !important;
}

.btn-outline-info {
  color: var(--k-azul-marinho);
  border-color: var(--k-azul-claro);
}

.btn-outline-info:hover,
.btn-outline-info:focus {
  background-color: var(--k-azul-bg) !important;
  border-color: var(--k-azul-claro) !important;
  color: var(--k-azul-marinho) !important;
}

.badge.bg-success,
.text-bg-success {
  background-color: var(--k-verde) !important;
}

.badge.bg-danger,
.text-bg-danger {
  background-color: var(--k-vermelho) !important;
}

.badge.bg-warning,
.text-bg-warning {
  background-color: var(--k-amarelo) !important;
  color: var(--k-branco) !important;
}

.badge.bg-primary,
.text-bg-primary {
  background-color: var(--k-admin-primaria) !important;
  color: var(--k-azul-marinho) !important;
}

.card {
  border-radius: var(--k-radius-admin);
  border: 1px solid #E5E7EB;
  box-shadow: var(--k-shadow);
}

.table thead th {
  color: var(--k-cinza);
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--k-admin-primaria);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, .22);
}

.nav-tabs .nav-link {
  color: var(--k-cinza);
}

.nav-tabs .nav-link.active {
  color: var(--k-azul-marinho);
  border-bottom: 2px solid var(--k-admin-primaria);
  font-weight: 600;
}

/* ===== Item de menu da sidebar do painel administrativo =====
   Classe compartilhada usada por CMenu (Site), CMenuImob e CMenuIgreja — cada um resolve
   a fonte de dados do menu de forma própria (ver RFCT-casca-painel-compartilhada), mas os 3
   usam o mesmo par de classes para o item de navegação, garantindo visual idêntico nos 3 painéis. */
.painel-nav-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  border-radius: 6px;
  color: rgba(255, 255, 255, .7);
  text-decoration: none;
  font-size: .875rem;
  transition: background-color var(--k-transition), color var(--k-transition);
}

.painel-nav-item:hover {
  background-color: rgba(255, 255, 255, .08);
  color: var(--k-branco);
}

.painel-nav-item-ativo,
.painel-nav-item-ativo:hover {
  background-color: var(--k-admin-primaria);
  color: var(--k-azul-marinho);
  font-weight: 600;
}

.border-primary {
  border-color: var(--k-admin-primaria) !important;
}

.bg-success-subtle {
  background-color: var(--k-verde-bg) !important;
}

.bg-danger-subtle {
  background-color: var(--k-vermelho-bg) !important;
}

.bg-light {
  background-color: var(--k-cinza-claro) !important;
}

/* ===== Rótulo estático em caixa alta no card de login (Site/ImobWeb) =====
   TxtSimples/TxtSenha (Site) renderizam um label flutuante controlado por C# (position:
   absolute + transform inline, sem !important) — usado em dezenas de telas do Site, não dá
   para editar o componente sem afetar todas elas (ver TASK-lj). O print real de referência
   (docs/Inspiracao/Screenshots JYR/03-admin-login.png) mostra rótulo estático acima do
   campo, não flutuante — como CSS isolado do Blazor não alcança o <label> interno de um
   componente filho (mesmo motivo do .painel-nav-item acima), a regra só pode ser global,
   escopada aqui por .login-card (classe usada só nas 2 telas de login administrativo). */
.login-card .form-group label.form-label {
  position: static !important;
  transform: none !important;
  left: auto !important;
  background: transparent !important;
  padding: 0 !important;
  display: block;
  font-size: .72rem !important;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  color: var(--k-cinza-escuro, #374151) !important;
  margin-bottom: .35rem;
}

.login-card .form-group {
  margin-bottom: 1rem;
}