/**
 * Fase 4 — Acessibilidade, contraste e polish
 * Ver IDENTIDADE_VISUAL.md § Fase 4
 */

/* ---- Foco visível (WCAG 2.4.7) ---- */
:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.mobile-menu-item:focus-visible,
.more-menu-item:focus-visible,
.sidebar .nav-link:focus-visible,
.period-btn:focus-visible {
  outline: 2px solid var(--brand-400);
  outline-offset: 2px;
}

/* ---- Contraste: marca sobre fundo claro (WCAG AA) ---- */
.dashboard-header .page-title,
.page-title {
  color: var(--brand-600);
}

.sidebar .nav-link.active {
  color: var(--sidebar-text-active);
}

/* ---- Semântica financeira no tema escuro ---- */
html[data-theme="dark"] .metric-trend.positive,
body.dark-theme .metric-trend.positive {
  color: var(--color-income) !important;
}

html[data-theme="dark"] .metric-trend.negative,
body.dark-theme .metric-trend.negative {
  color: var(--color-expense) !important;
}

html[data-theme="dark"] .metric-trend.info,
body.dark-theme .metric-trend.info {
  color: var(--color-balance) !important;
}

html[data-theme="dark"] .metric-card.income-total .metric-icon,
body.dark-theme .metric-card.income-total .metric-icon {
  color: var(--color-income);
}

html[data-theme="dark"] .metric-card.expense-total .metric-icon,
body.dark-theme .metric-card.expense-total .metric-icon {
  color: var(--color-expense);
}

html[data-theme="dark"] .metric-card.balance .metric-icon,
body.dark-theme .metric-card.balance .metric-icon {
  color: var(--color-balance);
}

/* ---- Navegação mobile (light + dark) ---- */
html[data-theme="dark"] .mobile-menu,
body.dark-theme .mobile-menu {
  background: var(--surface-card);
  border-top-color: var(--border-default);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .mobile-menu-item:not(.nova-transacao),
html[data-theme="dark"] .mobile-menu-item:not(.nova-transacao) span,
html[data-theme="dark"] .mobile-menu-item:not(.nova-transacao) i,
body.dark-theme .mobile-menu-item:not(.nova-transacao),
body.dark-theme .mobile-menu-item:not(.nova-transacao) span,
body.dark-theme .mobile-menu-item:not(.nova-transacao) i {
  color: var(--text-secondary) !important;
}

html[data-theme="dark"] .mobile-menu-item.active,
html[data-theme="dark"] .mobile-menu-item.active span,
html[data-theme="dark"] .mobile-menu-item.active i,
body.dark-theme .mobile-menu-item.active,
body.dark-theme .mobile-menu-item.active span,
body.dark-theme .mobile-menu-item.active i {
  color: var(--brand-400) !important;
}

html[data-theme="dark"] .mobile-menu-item.active::before,
body.dark-theme .mobile-menu-item.active::before {
  background: var(--brand-400);
}

html[data-theme="dark"] .more-menu,
body.dark-theme .more-menu {
  background: var(--surface-card);
  color: var(--text-primary);
}

html[data-theme="dark"] .more-menu-header,
body.dark-theme .more-menu-header {
  border-bottom-color: var(--border-default);
}

html[data-theme="dark"] .more-menu-item span,
body.dark-theme .more-menu-item span {
  color: var(--text-primary) !important;
}

/* ---- Motion reduzido ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .logo,
  .floating-element,
  .blob {
    animation: none !important;
  }
}

/* ---- Área de toque mínima (mobile) ---- */
@media (max-width: 768px) {
  .mobile-menu-item,
  .more-menu-item,
  .period-btn {
    min-height: 44px;
  }
}