/* ============================================================
   GESTAO FINANCEIRA — TEMA VISUAL CHAMATIVO
   Campos brancos, bordas azuis, animações suaves
   ============================================================ */

/* ── Variáveis globais ─────────────────────────────────────── */
html {
  --azul-primario:   #1e40af;
  --azul-medio:      #2563eb;
  --azul-claro:      #3b82f6;
  --azul-hover:      #1d4ed8;
  --azul-bg:         #eff6ff;
  --azul-borda:      #93c5fd;
  --azul-foco:       #2563eb;
  --verde-sucesso:   #059669;
  --vermelho-erro:   #dc2626;
  --amarelo-aviso:   #d97706;
  --fundo-app:       #f0f4ff;
  --branco:          #ffffff;
  --cinza-texto:     #1e293b;
  --cinza-suave:     #64748b;
  --sombra-card:     0 4px 20px rgba(37,99,235,0.12);
  --sombra-hover:    0 8px 30px rgba(37,99,235,0.22);
  --radius-campo:    10px;
  --radius-card:     16px;
  --transicao:       all 0.22s ease;
}

/* ── Navbar (topo) ────────────────────────────────────────── */
vaadin-app-layout::part(navbar) {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #1e3a5f 100%);
  box-shadow: 0 2px 16px rgba(0,0,0,0.35);
}

/* ── Sidebar / Drawer ──────────────────────────────────────── */
vaadin-app-layout::part(drawer) {
  background: linear-gradient(180deg, #0f172a 0%, #111827 60%, #0f172a 100%);
  border-right: 1px solid rgba(99,102,241,0.2);
}

/*
 * CHAVE: O Lumo usa --lumo-contrast-*pct para calcular hover/pressed.
 * No fundo escuro essas variáveis produzem preto.
 * Redefinimos aqui para branco translúcido → hover fica claro.
 */
vaadin-side-nav,
vaadin-side-nav-item {
  --lumo-contrast-5pct:   rgba(255,255,255,0.08)  !important;
  --lumo-contrast-10pct:  rgba(255,255,255,0.14)  !important;
  --lumo-contrast-20pct:  rgba(255,255,255,0.22)  !important;
  --lumo-contrast-30pct:  rgba(255,255,255,0.30)  !important;
  --lumo-contrast-40pct:  rgba(255,255,255,0.40)  !important;
  --lumo-contrast-50pct:  rgba(255,255,255,0.50)  !important;
  --lumo-contrast-60pct:  rgba(255,255,255,0.60)  !important;
  --lumo-contrast-70pct:  rgba(255,255,255,0.70)  !important;
  --lumo-contrast-80pct:  rgba(255,255,255,0.80)  !important;
  --lumo-contrast-90pct:  rgba(255,255,255,0.90)  !important;
  --lumo-contrast:        #ffffff                 !important;
  --lumo-body-text-color:               #e2e8f0  !important;
  --lumo-secondary-text-color:          #c8d6e8  !important;
  --lumo-tertiary-text-color:           #c8d6e8  !important;
  --lumo-disabled-text-color:           #94a3b8  !important;
  --lumo-primary-text-color:            #e2e8f0  !important;
  --lumo-list-item-text-color:          #e2e8f0  !important;
  --lumo-list-item-selected-text-color: #ffffff  !important;
}

/* ── Nav menu lateral com RouterLink (sem Shadow DOM) ─────── */
.gf-nav {
  padding: 8px 0;
  display: flex;
  flex-direction: column;
}

/* O RouterLink renderiza como <a> — CSS simples, sem !important */
a.gf-nav-link {
  display: block;
  text-decoration: none;
  margin: 2px 10px;
  border-radius: 10px;
  border-left: 3px solid transparent;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
}

.gf-nav-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
}

.gf-nav-label {
  color: #c8d6e8;
  font-size: 0.91rem;
  font-weight: 500;
  transition: color 0.18s ease;
}

.gf-nav-icon {
  color: #94a3b8;
  width: 1.1rem;
  height: 1.1rem;
  transition: color 0.18s ease;
  flex-shrink: 0;
}

/* ── HOVER — azul claro vibrante + texto e ícone brancos ──── */
a.gf-nav-link:hover {
  background: linear-gradient(90deg, rgba(59,130,246,0.30), rgba(99,102,241,0.20));
  border-left-color: #60a5fa;
  transform: translateX(4px);
}

a.gf-nav-link:hover .gf-nav-label {
  color: #ffffff;
  font-weight: 600;
}

a.gf-nav-link:hover .gf-nav-icon {
  color: #93c5fd;
}

/* ── ACTIVO — Vaadin adiciona highlight no RouterLink activo  */
a.gf-nav-link[highlight],
a.gf-nav-link.active {
  background: linear-gradient(90deg, #4f46e5, #6366f1);
  border-left-color: #a5b4fc;
  box-shadow: 0 4px 16px rgba(99,102,241,0.45);
}

a.gf-nav-link[highlight] .gf-nav-label,
a.gf-nav-link.active .gf-nav-label {
  color: #ffffff;
  font-weight: 700;
}

a.gf-nav-link[highlight] .gf-nav-icon,
a.gf-nav-link.active .gf-nav-icon {
  color: #ffffff;
}

vaadin-side-nav::part(section-label) {
  color: #64748b !important;
  font-weight: 700 !important;
  padding: 16px 16px 6px 16px !important;
  font-size: 0.72rem !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ── Todos os campos de texto com fundo branco e borda azul ── */
vaadin-text-field::part(input-field),
vaadin-number-field::part(input-field),
vaadin-text-area::part(input-field),
vaadin-password-field::part(input-field),
vaadin-email-field::part(input-field) {
  background: var(--branco) !important;
  border: 2px solid var(--azul-borda) !important;
  border-radius: var(--radius-campo) !important;
  transition: var(--transicao);
  box-shadow: 0 1px 4px rgba(37,99,235,0.08);
}

vaadin-text-field::part(input-field):hover,
vaadin-number-field::part(input-field):hover,
vaadin-text-area::part(input-field):hover,
vaadin-password-field::part(input-field):hover {
  border-color: var(--azul-claro) !important;
  box-shadow: 0 2px 8px rgba(37,99,235,0.18);
}

vaadin-text-field[focused]::part(input-field),
vaadin-number-field[focused]::part(input-field),
vaadin-text-area[focused]::part(input-field),
vaadin-password-field[focused]::part(input-field) {
  border-color: var(--azul-foco) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.18) !important;
}

/* ── DatePicker com fundo branco e borda azul ─────────────── */
vaadin-date-picker::part(input-field) {
  background: var(--branco) !important;
  border: 2px solid var(--azul-borda) !important;
  border-radius: var(--radius-campo) !important;
  transition: var(--transicao);
}

vaadin-date-picker[focused]::part(input-field),
vaadin-date-picker::part(input-field):hover {
  border-color: var(--azul-foco) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.15) !important;
}

/* ── ComboBox personalizado fundo branco + borda azul ──────── */
vaadin-combo-box::part(input-field),
vaadin-multi-select-combo-box::part(input-field) {
  background: var(--branco) !important;
  border: 2px solid var(--azul-borda) !important;
  border-radius: var(--radius-campo) !important;
  transition: var(--transicao);
}

vaadin-combo-box[focused]::part(input-field),
vaadin-combo-box::part(input-field):hover,
vaadin-multi-select-combo-box[focused]::part(input-field),
vaadin-multi-select-combo-box::part(input-field):hover {
  border-color: var(--azul-foco) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.15) !important;
}

/* Dropdown do ComboBox */
vaadin-combo-box-overlay::part(overlay),
vaadin-multi-select-combo-box-overlay::part(overlay) {
  border: 2px solid var(--azul-borda);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(37,99,235,0.18);
}

vaadin-combo-box-item[focused],
vaadin-combo-box-item:hover {
  background: var(--azul-bg) !important;
  color: var(--azul-primario) !important;
}

vaadin-combo-box-item[selected] {
  background: linear-gradient(90deg,#dbeafe,#eff6ff) !important;
  color: var(--azul-primario) !important;
  font-weight: 600;
}

/* ── Botões ────────────────────────────────────────────────── */
vaadin-button {
  border-radius: 10px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
  letter-spacing: 0.02em;
  cursor: pointer;
}

/* Botão padrão (sem theme) — substitui o preto */
vaadin-button:not([theme]) {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}

vaadin-button:not([theme]):hover {
  background: #e2e8f0 !important;
  border-color: #94a3b8 !important;
  color: #1e293b !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.12) !important;
  transform: translateY(-1px);
}

/* Primary */
vaadin-button[theme~="primary"] {
  background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
  color: white !important;
  box-shadow: 0 4px 14px rgba(99,102,241,0.40) !important;
  border: none !important;
}

vaadin-button[theme~="primary"]:hover {
  background: linear-gradient(135deg, #4338ca, #4f46e5) !important;
  box-shadow: 0 6px 20px rgba(99,102,241,0.55) !important;
  transform: translateY(-2px);
}

/* Success */
vaadin-button[theme~="success"] {
  background: linear-gradient(135deg, #059669, #10b981) !important;
  color: white !important;
  box-shadow: 0 4px 14px rgba(5,150,105,0.35) !important;
  border: none !important;
}

vaadin-button[theme~="success"]:hover {
  background: linear-gradient(135deg, #047857, #059669) !important;
  box-shadow: 0 6px 20px rgba(5,150,105,0.5) !important;
  transform: translateY(-2px);
}

/* Error */
vaadin-button[theme~="error"] {
  background: linear-gradient(135deg, #dc2626, #ef4444) !important;
  color: white !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(220,38,38,0.35) !important;
}

vaadin-button[theme~="error"]:hover {
  background: linear-gradient(135deg, #b91c1c, #dc2626) !important;
  box-shadow: 0 6px 20px rgba(220,38,38,0.5) !important;
  transform: translateY(-2px);
}

/* Tertiary / contorno */
vaadin-button[theme~="tertiary"] {
  background: transparent !important;
  color: #4f46e5 !important;
  border: 1.5px solid #a5b4fc !important;
}

vaadin-button[theme~="tertiary"]:hover {
  background: rgba(99,102,241,0.08) !important;
  border-color: #6366f1 !important;
  color: #4338ca !important;
  transform: translateY(-1px);
}

/* Contrast (usado em dialogs escuros) */
vaadin-button[theme~="contrast"] {
  background: #1e293b !important;
  color: white !important;
  border: none !important;
}

vaadin-button[theme~="contrast"]:hover {
  background: #0f172a !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3) !important;
  transform: translateY(-1px);
}

/* ── Grid com estilo moderno ───────────────────────────────── */
vaadin-grid {
  border-radius: var(--radius-card) !important;
  border: 1.5px solid var(--azul-borda) !important;
  box-shadow: var(--sombra-card) !important;
  overflow: hidden;
}

vaadin-grid::part(header-cell) {
  background: linear-gradient(135deg, #1e3a8a, #1e40af) !important;
  color: white !important;
  font-weight: 700 !important;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 14px 12px !important;
  border-bottom: 2px solid rgba(255,255,255,0.15) !important;
}

vaadin-grid::part(row):hover {
  background: var(--azul-bg) !important;
  transition: background 0.15s ease;
}

vaadin-grid::part(row):nth-child(even) {
  background: #f8faff;
}

vaadin-grid::part(cell) {
  padding: 10px 12px !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

vaadin-grid::part(footer-cell) {
  background: linear-gradient(135deg,#dbeafe,#eff6ff) !important;
  font-weight: 700 !important;
  color: var(--azul-primario) !important;
  font-size: 0.9rem;
  border-top: 2px solid var(--azul-borda) !important;
}

/* ── Dialog moderno ────────────────────────────────────────── */
vaadin-dialog-overlay::part(overlay) {
  border-radius: 20px !important;
  box-shadow: 0 20px 60px rgba(30,64,175,0.25) !important;
  border: 1px solid var(--azul-borda);
}

vaadin-dialog-overlay::part(header) {
  background: linear-gradient(135deg, #1e3a8a, #2563eb) !important;
  color: white !important;
  border-radius: 20px 20px 0 0 !important;
  padding: 18px 24px !important;
  font-size: 1.1rem;
  font-weight: 700;
}

vaadin-dialog-overlay::part(footer) {
  background: #f8faff;
  border-top: 1px solid var(--azul-borda);
  padding: 12px 20px;
  border-radius: 0 0 20px 20px;
}

/* ── Tabs ──────────────────────────────────────────────────── */
vaadin-tabs {
  border-bottom: 2px solid var(--azul-borda);
  margin-bottom: 16px;
}

vaadin-tab {
  color: var(--cinza-suave) !important;
  font-weight: 500 !important;
  transition: var(--transicao);
  border-radius: 8px 8px 0 0;
}

vaadin-tab[selected] {
  color: var(--azul-medio) !important;
  font-weight: 700 !important;
  background: var(--azul-bg) !important;
  border-bottom: 3px solid var(--azul-medio) !important;
}

vaadin-tab:hover {
  color: var(--azul-claro) !important;
  background: rgba(37,99,235,0.06) !important;
}

/* ── Notification toast ────────────────────────────────────── */
vaadin-notification-container[slot="middle"] {
  z-index: 9999;
}

/* ── Scrollbar personalizada ───────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; }
::-webkit-scrollbar-thumb { background: var(--azul-borda); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--azul-claro); }

/* ── Labels dos campos ─────────────────────────────────────── */
[part="label"] {
  color: var(--azul-primario) !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.03em;
}

/* ── Badges ────────────────────────────────────────────────── */
[theme~="badge"][theme~="success"] {
  background: #d1fae5 !important;
  color: #065f46 !important;
  border: 1px solid #6ee7b7;
  border-radius: 20px !important;
  font-weight: 600;
}

[theme~="badge"][theme~="error"] {
  background: #fee2e2 !important;
  color: #991b1b !important;
  border: 1px solid #fca5a5;
  border-radius: 20px !important;
  font-weight: 600;
}

[theme~="badge"][theme~="warning"] {
  background: #fef3c7 !important;
  color: #92400e !important;
  border: 1px solid #fcd34d;
  border-radius: 20px !important;
  font-weight: 600;
}

/* ── Animação de entrada das views ─────────────────────────── */
.view-container {
  animation: fadeInUp 0.35s ease-out;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Cards do dashboard ────────────────────────────────────── */
.finance-card {
  background: white;
  border-radius: var(--radius-card);
  padding: 24px;
  box-shadow: var(--sombra-card);
  border: 1.5px solid var(--azul-borda);
  transition: var(--transicao);
  position: relative;
  overflow: hidden;
}

.finance-card:hover {
  box-shadow: var(--sombra-hover);
  transform: translateY(-3px);
  border-color: var(--azul-claro);
}

.finance-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: 16px 16px 0 0;
}

.finance-card.verde::before  { background: linear-gradient(90deg, #059669, #10b981); }
.finance-card.vermelho::before { background: linear-gradient(90deg, #dc2626, #ef4444); }
.finance-card.azul::before   { background: linear-gradient(90deg, #1e40af, #3b82f6); }
.finance-card.amarelo::before { background: linear-gradient(90deg, #d97706, #f59e0b); }
.finance-card.roxo::before   { background: linear-gradient(90deg, #7c3aed, #a78bfa); }

/* ── Botões de Impressão / Exportação ─────────────────────── */
vaadin-button.btn-pdf {
  background:   linear-gradient(135deg, #dc2626 0%, #ef4444 60%, #f87171 100%) !important;
  color:        #ffffff        !important;
  border:       none           !important;
  border-radius: 12px          !important;
  font-size:    0.82rem        !important;
  font-weight:  700            !important;
  letter-spacing: 0.04em       !important;
  box-shadow:   0 4px 14px rgba(220,38,38,0.40),
                inset 0 1px 0 rgba(255,255,255,0.20) !important;
  transition:   all 0.22s ease !important;
  cursor:       pointer        !important;
}

vaadin-button.btn-pdf:hover {
  background:   linear-gradient(135deg, #b91c1c 0%, #dc2626 100%) !important;
  box-shadow:   0 6px 22px rgba(220,38,38,0.55),
                inset 0 1px 0 rgba(255,255,255,0.15) !important;
  transform:    translateY(-2px) scale(1.02) !important;
}

vaadin-button.btn-pdf:active {
  transform:  translateY(0) scale(0.98) !important;
  box-shadow: 0 2px 8px rgba(220,38,38,0.35) !important;
}

vaadin-button.btn-excel {
  background:   linear-gradient(135deg, #059669 0%, #10b981 60%, #34d399 100%) !important;
  color:        #ffffff        !important;
  border:       none           !important;
  border-radius: 12px          !important;
  font-size:    0.82rem        !important;
  font-weight:  700            !important;
  letter-spacing: 0.04em       !important;
  box-shadow:   0 4px 14px rgba(5,150,105,0.40),
                inset 0 1px 0 rgba(255,255,255,0.20) !important;
  transition:   all 0.22s ease !important;
  cursor:       pointer        !important;
}

vaadin-button.btn-excel:hover {
  background:   linear-gradient(135deg, #047857 0%, #059669 100%) !important;
  box-shadow:   0 6px 22px rgba(5,150,105,0.55),
                inset 0 1px 0 rgba(255,255,255,0.15) !important;
  transform:    translateY(-2px) scale(1.02) !important;
}

vaadin-button.btn-excel:active {
  transform:  translateY(0) scale(0.98) !important;
  box-shadow: 0 2px 8px rgba(5,150,105,0.35) !important;
}