/* ══════════════════════════════════════════════════════════════
   ELEVATE v19 — refinamento profissional de interface
   ════════════════════════════════════════════════════════════════
   Camada ADITIVA, carregada DEPOIS de corporate-v18. Eleva o produto
   a um acabamento institucional confiante, consistente e elegante,
   SEM alterar a estrutura nem a lógica. Mexe apenas em:
   legibilidade, profundidade (sombras), cartões, botões, chips,
   inputs, cabeçalhos e ritmo tipográfico.

   Princípios: contraste correto · hierarquia clara · profundidade
   subtil · estados consistentes · foco acessível (WCAG 2.2).
   ══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────
   1. CABEÇALHO DE VISTA (banner cobalto) — LEGIBILIDADE
   Corrige o bug em que .view-title herdava cor escura (corporate-v18
   agrupou-o com títulos de cartão) ficando quase invisível sobre o
   gradiente azul. O título do banner é texto CLARO, por definição.
   ─────────────────────────────────────────────────────────────── */
.view-header {
  background: linear-gradient(135deg, #0c2c52 0%, #143a6b 52%, #15569e 100%) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  box-shadow: 0 1px 2px rgba(12,44,82,.18), 0 10px 30px rgba(12,44,82,.16) !important;
}
.view-header .view-title,
.view-header .view-title * {
  color: #ffffff !important;
  font-weight: 750 !important;
  letter-spacing: -.015em;
  text-shadow: 0 1px 1px rgba(0,0,0,.12);
}
.view-header .view-subtitle {
  color: rgba(255,255,255,.80) !important;
  font-weight: 500;
}
/* CTA do banner: branco sólido, sombra confiante */
.view-header .btn-primary {
  background: #ffffff !important;
  color: #0f4279 !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.10), 0 4px 14px rgba(0,0,0,.16) !important;
}
.view-header .btn-primary:hover {
  background: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,.16), 0 8px 22px rgba(0,0,0,.22) !important;
}

/* ───────────────────────────────────────────────────────────────
   2. CARTÕES — profundidade subtil e elevação coerente ao hover
   ─────────────────────────────────────────────────────────────── */
.card, .panel, .kpi-card, .stat-card, .widget, .data-card, .info-card,
.hier-card, .list-card {
  border-radius: 14px !important;
  transition: transform .16s var(--ease, ease),
              box-shadow .16s var(--ease, ease),
              border-color .16s var(--ease, ease) !important;
}
.card:hover, .panel:hover, .kpi-card:hover, .stat-card:hover,
.hier-card:hover, .list-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(12,44,82,.07), 0 16px 36px rgba(12,44,82,.10) !important;
  border-color: rgba(21,86,158,.20) !important;
}
/* Faixa de acento à esquerda dos cartões de lista (hierarquia visual) */
.hier-card, .list-card { position: relative; overflow: hidden; }

/* ───────────────────────────────────────────────────────────────
   3. BOTÕES — estados confiantes e consistentes
   ─────────────────────────────────────────────────────────────── */
.btn {
  transition: background .15s ease, box-shadow .15s ease,
              transform .12s ease, border-color .15s ease, color .15s ease !important;
}
.btn:active { transform: translateY(1px); }

/* Primário: gradiente cobalto subtil + sombra de marca */
.btn-primary:not(.view-header .btn-primary) {
  background: linear-gradient(180deg, #1c63ad 0%, var(--primary, #15569e) 60%, #134e90 100%) !important;
  border: 1px solid rgba(12,44,82,.16) !important;
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(12,44,82,.18), 0 2px 8px rgba(21,86,158,.22) !important;
}
.btn-primary:not(.view-header .btn-primary):hover {
  background: linear-gradient(180deg, #2470bf 0%, #1a60a8 60%, #15569e 100%) !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(12,44,82,.20), 0 8px 20px rgba(21,86,158,.28) !important;
}

/* Secundário: superfície clara com borda definida */
.btn-secondary:not(.view-header .btn-secondary) {
  background: var(--surface, #fff) !important;
  border: 1px solid var(--border-strong, rgba(30,58,95,.22)) !important;
  color: var(--text-2, #2f4a60) !important;
}
.btn-secondary:not(.view-header .btn-secondary):hover {
  background: var(--surface-alt, #f5f8fc) !important;
  border-color: var(--primary, #15569e) !important;
  color: var(--primary-dk, #0f4279) !important;
}

/* Ações em ícone (editar/desativar/eliminar): toque maior e coeso */
.icon-btn, .btn-icon, .action-btn {
  border-radius: 10px !important;
  transition: background .14s ease, border-color .14s ease,
              color .14s ease, box-shadow .14s ease !important;
}
.icon-btn:hover, .btn-icon:hover, .action-btn:hover {
  background: var(--surface-alt, #f5f8fc) !important;
  border-color: var(--border-strong, rgba(30,58,95,.22)) !important;
}
/* Eliminar em vermelho ao passar o rato — affordance clara */
.icon-btn.danger:hover, .btn-icon.danger:hover, .action-btn.danger:hover,
[onclick*="liminar"].icon-btn:hover, [title*="liminar"].icon-btn:hover {
  background: #fdecec !important;
  border-color: #e4a0a0 !important;
  color: #b42318 !important;
}

/* ───────────────────────────────────────────────────────────────
   4. CHIPS / BADGES — pílulas consistentes
   ─────────────────────────────────────────────────────────────── */
.badge, .chip, .tag, .pill, .status-badge {
  border-radius: 999px !important;
  font-weight: 600 !important;
  letter-spacing: .005em;
}

/* ───────────────────────────────────────────────────────────────
   5. INPUTS — foco acessível e consistente em toda a app
   ─────────────────────────────────────────────────────────────── */
.field-input, input:not([type=checkbox]):not([type=radio]):not([type=range]),
select, textarea {
  transition: border-color .15s ease, box-shadow .15s ease,
              background .15s ease !important;
}
.field-input:focus, input:not([type=checkbox]):not([type=radio]):focus,
select:focus, textarea:focus {
  border-color: var(--primary, #15569e) !important;
  box-shadow: 0 0 0 3px rgba(21,86,158,.14) !important;
  outline: none !important;
}

/* Foco visível por teclado (a11y) em elementos interativos */
a:focus-visible, button:focus-visible,
.btn:focus-visible, .icon-btn:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--primary, #15569e) !important;
  outline-offset: 2px !important;
  border-radius: 8px;
}

/* ───────────────────────────────────────────────────────────────
   6. RITMO TIPOGRÁFICO — títulos de secção/cartão (sobre branco)
   Reafirma cor escura SÓ onde o fundo é claro (não no banner).
   ─────────────────────────────────────────────────────────────── */
.card-title, .panel-title, .section-title {
  color: var(--text, #0c1a27) !important;
  font-weight: 700 !important;
  letter-spacing: -.01em;
}

/* ───────────────────────────────────────────────────────────────
   7. ESTADO VAZIO — mais elegante e centrado
   ─────────────────────────────────────────────────────────────── */
.empty-state, .empty, .no-data {
  color: var(--text-muted, #6b8aa3);
}
.empty-state h2, .empty-state h3, .empty h2, .empty h3 {
  color: var(--text, #0c1a27) !important;
  font-weight: 750 !important;
  letter-spacing: -.01em;
}

/* ───────────────────────────────────────────────────────────────
   8. KPIs — legíveis no telemóvel (4 colunas ficam apertadas e
   cortam os rótulos). Em ecrãs estreitos passam a 2 colunas.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .stat-label { white-space: normal !important; line-height: 1.25; }
}

/* ───────────────────────────────────────────────────────────────
   9. SCROLLBAR — discreta e na paleta
   ─────────────────────────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: rgba(21,86,158,.30) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: rgba(21,86,158,.26);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(21,86,158,.42); background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }