@import url('tokens.css');
@import url('components.css');

/**
 * Theme CSS - Color Palette & Design System
 * Inspired by Brazilian Real Banknotes
 * Primary: var(--ink-2) (Deep Blue - 2 Reais)
 * Secondary: var(--ink-2) (Cyan - 2 Reais)
 * Accent: var(--ink-2) (Violet - 5 Reais)
 * Success/Income: var(--good) (Green - 1 Real)
 */

/* ========================================
 * Repintura por tela — padrão "Painel de Contenção"
 * ========================================
 * Migração incremental, tela a tela: cada página que já foi repintada
 * ganha uma classe .page-<nome> no <body>, que sobrescreve as variáveis
 * antigas (--color-*) para apontar pros tokens novos (tokens.css) SÓ
 * dentro daquela página — o resto do site continua com a paleta antiga
 * até ser migrado. Nunca sobrescrever isso em :root (isso afetaria o
 * site inteiro de uma vez, o que foi explicitamente descartado).
 */
.page-dashboard {
  --color-background: var(--bg);
  --color-background-alt: var(--surface-2);
  --color-card-bg: var(--surface);
  --color-text: var(--ink);
  --color-text-secondary: var(--ink-2);
  --color-text-tertiary: var(--ink-muted);
  --color-border: var(--border);
  --color-primary: var(--committed);
  --color-secondary: var(--accent);
}

/* ========================================
 * Lucide Icon Utilities
 * ======================================== */

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  flex-shrink: 0;
  color: currentColor;
}

.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 20px; height: 20px; }
.icon-lg { width: 24px; height: 24px; }
.icon-xl { width: 32px; height: 32px; }

.icon svg {
  width: 100%;
  height: 100%;
}


body {
  opacity: 0;
  transition: opacity 0.15s ease-in;
  overflow-x: hidden;
  max-width: 100vw;
  font-family: "Cal Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  /* O fundo vivia em theme.js, injetado como gradiente via body.style.background —
     o que anulava o token e impedia qualquer troca de paleta. Agora vem do token. */
  background: var(--color-background);
  background-color: var(--color-background);
  color: var(--color-text);
}

body.page-ready {
  opacity: 1;
}

/* Animations */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Utility Classes */
.animate-slide-in {
  animation: slideIn 0.3s ease-out;
}

.fade-in {
  animation: fadeIn 0.5s ease-out forwards;
}

/* Reduced Motion - Accessibility (WCAG 2.1)
 * Bloco único e intencional: a regra universal com !important já zera duração e
 * iteração de tudo, então blocos por componente só se repetiam sem efeito.
 * (O antigo "canvas sem animação" foi removido: o Chart.js anima em JS, e CSS
 * não alcança animação de canvas.) */
@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;
  }

  .animate-slide-in,
  .fade-in {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Card Styles */
.card {
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px color-mix(in srgb, var(--ink-2) 0.1, transparent);
}

/* Table Styles */
table.min-w-full {
  border-collapse: separate;
  border-spacing: 0;
}

thead th {
  border-bottom: 2px solid var(--color-border);
}

tbody tr {
  transition: background-color 0.2s ease;
}

tbody tr:hover {
  background-color: var(--color-hover-bg);
}

tbody td {
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}

tbody tr:last-child td {
  border-bottom: none;
}

/* Badge */
.badge {
  display: inline-block;
  padding: 0.1875rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* =========================================
   Category Filter - Clickable Badges
   ========================================= */

.badge--discount {
  background: color-mix(in srgb, var(--ink-2) 0.1, transparent);
  color: var(--ink-2);
  font-weight: 600;
}

.badge--tag {
  background: color-mix(in srgb, var(--ink-2) 0.1, transparent);
  color: var(--ink-2);
  font-weight: 500;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
}

/* Category Filter Select */
.filter-category-select {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.filter-category-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.filter-category-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  background: var(--color-background-alt);
  border: 1px solid var(--color-border);
}

.filter-category-icon:hover {
  background: var(--color-hover-bg);
  color: var(--color-text);
  border-color: var(--color-secondary);
}

.filter-category-icon .action-icon-20 {
  flex-shrink: 0;
}

@media screen and (min-width: 769px) {
  .filter-category-icon {
    width: 36px;
    height: 36px;
  }
}

.filter-category-select select {
  display: none;
}

.filter-category-select.expanded select {
  display: inline-block;
  width: 100%;
  padding: 0.5rem 1.5rem 0.5rem 2rem;
  font-size: 0.813rem;
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-input-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  min-height: 36px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.filter-category-select select:focus {
  outline: none;
  border-color: var(--color-secondary);
}

@media screen and (max-width: 768px) {
  .filter-category-select.expanded {
    flex-basis: 100%;
  }
  .filter-category-select.expanded select {
    min-height: 44px;
    font-size: 1rem;
  }
}

@media screen and (min-width: 769px) {
  .filter-category-select {
    flex-shrink: 0;
  }
  .filter-category-select.expanded select {
    min-height: 36px;
  }
  .filter-category-select select {
    width: auto;
    min-width: 140px;
    font-size: 0.75rem;
    min-height: 36px;
    padding: 0.375rem 1.5rem 0.375rem 2rem;
  }
}

/* Category Filter Indicator */
.category-filter-indicator {
  display: inline-flex;
  align-items: center;
}

.category-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-input-bg);
  border: 1px solid var(--color-secondary);
  border-radius: 999px;
  font-size: 0.813rem;
  animation: slideIn 0.2s ease-out;
}

.category-filter-chip__label {
  color: var(--color-text-secondary);
  font-weight: 500;
  font-size: 0.75rem;
}

.category-filter-chip .badge {
  font-size: 0.688rem;
  padding: 0.125rem 0.5rem;
}

.category-filter-chip__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
  min-height: auto;
  min-width: auto;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  font-size: 1rem;
}

.category-filter-chip__clear:hover {
  background: color-mix(in srgb, var(--critical) 0.1, transparent);
  color: var(--critical);
}

/* Loading Spinner */
.loading {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-gray-200);
  border-top: 2px solid var(--color-secondary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Skeleton Loading */
.skeleton {
  background: linear-gradient(90deg, var(--color-gray-100) 25%, var(--color-gray-200) 50%, var(--color-gray-100) 75%);
  background-size: 200% 100%;
  animation: loading 1.5s ease-in-out infinite;
}

/* Sortable Table Headers */
.sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 1.5rem !important;
}

.sortable:hover {
  background-color: var(--color-background);
}

.sort-icon {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  color: var(--color-gray-400);
  transition: color 0.2s;
}

.sortable.active .sort-icon {
  color: var(--color-secondary);
}

/* Chart Container - Mobile First */
.chart-container {
  position: relative;
  height: 180px;
  margin: var(--spacing-md) 0;
}

/* Landscape orientation on mobile */
@media screen and (max-height: 500px) and (orientation: landscape) {
  .chart-container {
    height: 150px;
  }
}

/* Tablet and up */
@media screen and (min-width: 769px) {
  .chart-container {
    height: 300px;
    margin: var(--spacing-lg) 0;
  }
}

/* Table card layout (mobile-first: cards on all screens, table on desktop) */
table thead {
  display: none;
}

table tbody {
  display: block;
}

.transaction-row {
  display: block;
  margin-bottom: 1.5rem;
  border-radius: 0.75rem;
  border: 2px solid var(--color-border);
  background: var(--color-card-bg);
  box-shadow: 0 4px 8px color-mix(in srgb, var(--bg) 0.12, transparent);
  overflow: hidden;
}

.transaction-row td {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.875rem 1rem;
  border-bottom: 1.5px solid var(--color-border);
  text-align: right;
}

.transaction-row td:last-child {
  border-bottom: none;
}

.transaction-row td::before {
  content: attr(data-label);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-right: 1rem;
  flex-shrink: 0;
}

.transaction-row td[data-label="Valor"] {
  font-size: 1.125rem;
  background: var(--color-background-alt);
}

.transaction-row td[data-label="Data"] {
  background: var(--color-table-header);
  font-weight: 600;
}

.transaction-row td[data-label="Ações"] {
  justify-content: space-between;
  background: var(--color-background);
}

.transaction-row td[data-label="Ações"] button {
  font-size: 1.25rem;
}

.transaction-row .badge {
  margin-left: auto;
}

.transaction-row .editable-cell div {
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.transaction-row .editable-cell input {
  width: 100%;
}

.transaction-row .editable-cell button {
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
}

#extratoContainer > div > div:not(.duplicate-group-header):not(.duplicate-group-items):not(.transaction-action-overlay) {
  flex-direction: column;
  gap: 0.5rem;
}

#extratoContainer button {
  padding: 0.5rem;
  font-size: 1.125rem;
}

/* Extrato Cards Styles */
#extratoContainer > div[class*="animate-slide-in"]:hover {
  transform: translateY(-2px);
  transition: transform 0.2s ease;
}

#extratoContainer button:active {
  transform: scale(0.95);
  transition: transform 0.1s ease;
}

/* Date Group Expand/Collapse */
.chevron {
  display: inline-block;
  transition: transform 0.3s ease;
}

/* Smooth expand/collapse animation */
#extratoContainer [id^="cards-"] {
  transition: all 0.3s ease;
  overflow: hidden;
}

#extratoContainer [id^="cards-"].hidden {
  max-height: 0;
  opacity: 0;
  margin: 0;
}

#extratoContainer [id^="cards-"]:not(.hidden) {
  max-height: 10000px;
  opacity: 1;
}

/* Toast Notifications - Mobile First */
.toast {
  min-width: 280px;
  max-width: calc(100vw - 2rem);
  padding: 0.875rem 1rem;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 25px color-mix(in srgb, var(--bg) 0.2, transparent);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  animation: slideInRight 0.3s ease-out;
  position: relative;
  overflow: hidden;
}

@media screen and (min-width: 769px) {
  .toast {
    min-width: 300px;
    max-width: 400px;
    padding: 1rem 1.25rem;
  }
}

.toast-success {
  background: var(--good);
  color: white;
}

.toast-error {
  background: var(--critical);
  color: white;
}

.toast-info {
  background: var(--ink-2);
  color: white;
}

.toast-warning {
  background: var(--critical);
  color: white;
}

.toast-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.toast-content {
  flex: 1;
}

.toast-title {
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}

.toast-message {
  font-size: 0.813rem;
  opacity: 0.95;
}

.toast-close {
  background: transparent;
  border: none;
  color: white;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.5rem;
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: background 0.2s;
  flex-shrink: 0;
  margin: -0.5rem;
  margin-left: 0;
}

.toast-close:hover {
  background: color-mix(in srgb, var(--ink) 0.2, transparent);
}

.toast-close:active {
  transform: scale(0.9);
}

.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: color-mix(in srgb, var(--ink) 0.3, transparent);
  animation: toastProgress 3s linear;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOutRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

@keyframes toastProgress {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}

.toast-removing {
  animation: slideOutRight 0.3s ease-out forwards;
}

/* =========================================
   NEW LAYOUT STYLES - Dashboard Redesign
   ========================================= */

/* Main Header */
.main-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  /* Era --ink-2, a cor de fundo do tema claro. Na paleta escura a barra é
     uma superfície: tinta clara com texto claro sumiria. */
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--bg) 0.4, transparent);
}

.main-header .nav-link {
  color: color-mix(in srgb, var(--ink) 0.7, transparent);
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}

.main-header .nav-link:hover,
.main-header .nav-link.active {
  color: white;
  background: color-mix(in srgb, var(--ink) 0.1, transparent);
}

.main-header .nav-link.active {
  background: color-mix(in srgb, var(--ink) 0.15, transparent);
}

/* Navigation Dropdown */
.nav-dropdown-container {
  position: relative;
}

.nav-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
  border: none;
  background: none;
  font-size: inherit;
}

.nav-dropdown-arrow {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}

.nav-dropdown-container:hover .nav-dropdown-arrow {
  transform: rotate(180deg);
}

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0.5rem;
  min-width: 200px;
  background: var(--color-card-bg);
  border-radius: 0.5rem;
  box-shadow: 0 10px 25px color-mix(in srgb, var(--bg) 0.15, transparent);
  border: 1px solid var(--color-border);
  overflow: hidden;
  z-index: 50;
  animation: dropdownFadeIn 0.2s ease-out;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.nav-dropdown-item {
  display: block;
  padding: 0.75rem 1rem;
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.875rem;
  transition: background 0.2s ease;
}

.nav-dropdown-item:hover {
  background: var(--color-hover-bg);
  color: var(--color-primary);
}

/* Mobile submenu */
.mobile-submenu {
  border-left: 2px solid color-mix(in srgb, var(--ink) 0.2, transparent);
  margin-left: 0.5rem;
  padding-left: 0.5rem;
}

.mobile-submenu button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
}

/* Mobile Menu - Mobile First */
.mobile-menu {
  border-top: 1px solid color-mix(in srgb, var(--ink) 0.1, transparent);
  background: color-mix(in srgb, var(--bg) 0.1, transparent);
}

.mobile-menu-link {
  display: block;
  padding: var(--spacing-md) var(--spacing-sm);
  min-height: var(--touch-target-min);
  color: color-mix(in srgb, var(--ink) 0.7, transparent);
  text-decoration: none;
  font-size: 1rem;
  transition: all 0.2s ease;
  border-radius: var(--radius-sm);
}

.mobile-menu-link:hover,
.mobile-menu-link:focus {
  background: color-mix(in srgb, var(--ink) 0.1, transparent);
  color: white;
}

.mobile-menu-link.active {
  color: white;
  font-weight: 600;
}

.mobile-menu-link:active {
  transform: scale(0.98);
}

/* User Dropdown Menu */
.user-dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: var(--spacing-sm);
  min-width: 150px;
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 25px color-mix(in srgb, var(--bg) 0.15, transparent);
  z-index: 50;
}

.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  min-height: var(--touch-target-min);
  color: var(--critical);
  text-decoration: none;
  font-size: 0.875rem;
  transition: background 0.2s ease;
}

.user-dropdown-item:hover {
  background: color-mix(in srgb, var(--critical) 0.1, transparent);
}

/* Body with fixed header - uses CSS variable for consistency */
body.has-fixed-header {
  padding-top: var(--header-height);
}

@supports (padding: env(safe-area-inset-top)) {
  body.has-fixed-header {
    padding-top: calc(var(--header-height) + env(safe-area-inset-top));
  }
}

/* Period + Balance Row — stacked mobile, side-by-side desktop */
/* (Estilos mantidos pois são usados para layout no index.html) */

/* Period + Balance Row — stacked mobile, side-by-side desktop */

/* Tooltip helper: data-tooltip="texto" mostra o balão acima do elemento, no hover ou no foco pelo teclado.
   data-tooltip-posicao="abaixo" abre para baixo (ex.: header fixo no topo, onde acima não há espaço). */
[data-tooltip] {
  position: relative;
}

[data-tooltip]:is(:hover, :focus-visible)::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-text);
  color: var(--color-card-bg);
  font-size: 0.6875rem;
  line-height: 1.4;
  padding: 0.375rem 0.625rem;
  border-radius: var(--radius-sm);
  white-space: normal;
  max-width: 280px;
  width: max-content;
  pointer-events: none;
  z-index: 100;
}

[data-tooltip-posicao="abaixo"]:is(:hover, :focus-visible)::after {
  top: calc(100% + 6px);
  bottom: auto;
}

[data-tooltip=""]::after {
  display: none;
}

/* Progress Bar Sections */
.progress-bar-container {
  background: var(--color-card-bg);
  border-radius: var(--radius-xl);
  padding: var(--spacing-md) var(--spacing-lg);
  box-shadow: var(--shadow);
}

.progress-bar-container__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-size-body);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--spacing-sm);
}

/* ══════════════════════════════════════════════════════════════════
   INSIGHTS — layout da página
   Ritmo de espaçamento: seções respiram mais que os cards internos,
   para os grupos ficarem visualmente separados.
   ══════════════════════════════════════════════════════════════════ */

/* Seção: substitui o padding inline repetido em cada bloco (DRY).
   Seletor composto porque .card-enhanced é declarado depois no arquivo
   e venceria por ordem com especificidade igual. */
.card-enhanced.insights-section {
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

@media screen and (min-width: 769px) {
  .card-enhanced.insights-section {
    padding: 1.75rem;
    margin-bottom: var(--spacing-xl);
  }
}

.insights-section__title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--spacing-md);
}

/* Insights Grid — layout dos cards de insight.
   Usa auto-fit para nunca espremer: as colunas só se dividem quando
   cabem no minimo definido, em vez de forçar N colunas fixas. */
.insights-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

@media screen and (min-width: 640px) {
  .insights-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.25rem;
  }
}

@media screen and (min-width: 1024px) {
  .insights-grid {
    gap: var(--spacing-lg);
  }
}

/* Grid da Saúde Financeira — 7 tiles com bastante texto.
   Antes forçava 7 colunas num container de 896px (~110px por tile),
   que era a causa do aperto. Agora quebra em linhas legíveis. */
.saude-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--spacing-md);
}

@media screen and (max-width: 480px) {
  .saude-grid {
    grid-template-columns: 1fr;
  }
}

@media screen and (min-width: 1024px) {
  .saude-grid {
    gap: 1.25rem;
  }
}

/* Tile de saúde — estilos antes inline no insights.js.
   A cor de status entra por --status-color, o resto é CSS. */
/* O respiro interno vem de um gap só, no container: assim o ritmo não depende de
   cada filho lembrar de declarar o próprio margin-bottom. */
.card-saude {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  background: var(--color-card-bg);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--status-color, var(--color-border));
  padding: 1.125rem 1rem;
  text-align: center;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card-saude:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--bg) 0.08, transparent);
}

.card-saude__icon {
  color: var(--status-color, var(--color-text));
}

.card-saude__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  font-size: var(--font-size-overline);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.35;
  color: var(--color-text-secondary);
  /* Reserva 2 linhas: rótulos longos não desalinham os valores. */
  min-height: 2.2em;
}

.card-saude__value {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.card-saude__detail {
  font-size: var(--font-size-caption);
  color: var(--color-text-secondary);
}

.card-saude__status {
  font-size: var(--font-size-caption);
  font-weight: 600;
  color: var(--status-color, var(--color-text));
}

.card-saude__help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-border);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.card-saude__explain {
  padding: 0.625rem;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  text-align: left;
  line-height: 1.5;
}

/* Insight Cards — container for direct-DOM sections (Top 3, Fixo/Variável, Recorrências) */
.insight-card {
  background: var(--color-card-bg);
  border-radius: var(--radius-xl);
  padding: 1.25rem var(--spacing-lg);
  box-shadow:
    0 1px 3px color-mix(in srgb, var(--bg) 0.06, transparent),
    0 1px 2px color-mix(in srgb, var(--bg) 0.04, transparent);
  transition: box-shadow 0.3s ease;
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
}

.insight-card:hover {
  box-shadow: 0 4px 12px color-mix(in srgb, var(--bg) 0.1, transparent);
}

.insight-card--wide {
  grid-column: 1 / -1;
}

@media screen and (min-width: 769px) {
  .insight-card--wide {
    grid-column: span 2;
  }
}

.insight-card__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
}

.insight-card__content {
  flex: 1;
  min-width: 0;
}

.insight-card__title {
  font-size: 0.688rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.25rem;
}

.insight-card__value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
  margin-bottom: 0.125rem;
}

.insight-card__detail {
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
}

.insight-list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin: 0.5rem 0;
}

.insight-list-item {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-body);
  color: var(--color-text);
}

.insight-list-item__loja {
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
}

/* Medias List */
/* Cada card mostra 3 valores lado a lado (média/mês, total, nº de
   transações). Com 4 colunas fixas sobravam ~130px para ~190px de texto,
   que era a causa do corte. auto-fit garante o mínimo legível e só então
   cria mais colunas. */
.medias-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media screen and (min-width: 640px) {
  .medias-list {
    grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
    gap: var(--spacing-md);
  }
}

.medias-card {
  background: var(--color-card-bg);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  overflow: hidden;
}

.medias-card:hover {
  box-shadow: 0 8px 24px color-mix(in srgb, var(--bg) 0.1, transparent);
  transform: translateY(-2px);
}

.medias-card__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1rem 0.5rem;
  border-bottom: 1px solid var(--color-border);
}

.medias-card__name {
  font-weight: 700;
  font-size: var(--font-size-body);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.medias-card__name-icon {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: var(--color-bg-subtle, color-mix(in srgb, var(--ink-muted) 0.08, transparent));
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.medias-card__rows {
  padding: 0.5rem 1rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.medias-card__row {
  display: flex;
  align-items: center;
  padding: 0.375rem 0.5rem;
  border-radius: var(--radius-md);
  gap: 0.5rem;
}

.medias-card__row--despesa {
  background: color-mix(in srgb, var(--critical) 0.06, transparent);
}

.medias-card__row--receita {
  background: color-mix(in srgb, var(--good) 0.06, transparent);
}

.medias-card__row-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.medias-legend {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
  font-size: var(--font-size-caption);
  color: var(--color-text-secondary);
}

.medias-legend__item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.medias-legend__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.medias-legend__dot--despesa {
  background: var(--color-expense);
}

.medias-legend__dot--receita {
  background: var(--color-income);
}

.medias-card__row--despesa .medias-card__row-label {
  background: var(--color-expense);
}

.medias-card__row--receita .medias-card__row-label {
  background: var(--color-income);
}

/* wrap: se os 3 valores não couberem numa linha, caem para a seguinte
   alinhados à direita — em vez de estourar e serem cortados pelo
   overflow:hidden do card. */
.medias-card__row-body {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.125rem 0.5rem;
  justify-content: flex-end;
  min-width: 0;
}

.medias-card__row-val {
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--color-text);
  white-space: nowrap;
}

.medias-card__row-val--total {
  font-weight: 400;
  font-size: 0.6875rem;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.medias-card__qtd {
  font-weight: 400;
  color: var(--color-text-secondary);
  font-size: 0.625rem;
  white-space: nowrap;
}

/* O bloco @media (min-width:1024px) que encolhia fontes e padding aqui
   foi removido: era um paliativo para as 4 colunas fixas. Com o grid
   auto-fit os cards têm largura suficiente e mantêm o tamanho base. */

@media screen and (min-width: 1024px) {
  .medias-card {
    padding: 1rem 1.25rem;
    flex-direction: column;
    align-items: flex-start;
  }

  .medias-card__values {
    width: 100%;
    justify-content: space-between;
  }

  .medias-card__value {
    text-align: left;
  }
}

.insight-list-item__meses {
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* Insights page layout adjustments */
.insights-page-title {
  margin-top: 0;
}

/* Search Box */
.search-box {
  position: relative;
  display: none;
  max-width: 100%;
  min-width: 0;
}

.search-box.search-expanded {
  display: block;
  width: 100%;
}

.search-box input {
  width: 100%;
  padding: 0.625rem 1rem 0.625rem 2.25rem;
  font-size: 0.875rem;
  background: var(--color-input-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  transition: all 0.2s ease;
  min-height: 44px;
}

.search-box input:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink-2) 0.1, transparent);
}

.search-box .search-icon-inline {
  position: absolute;
  left: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-secondary);
  pointer-events: none;
}

@media screen and (min-width: 769px) {
  .search-box {
    flex: 1;
    min-width: 150px;
    display: block;
  }
  .search-box input {
    padding: 0.5rem 1rem 0.5rem 2.25rem;
    font-size: 0.813rem;
    min-height: 36px;
  }
  .search-box .search-icon-inline {
    left: 0.5rem;
  }
}

/* =========================================
   Transaction Items - Mobile First Design
   ========================================= */

/* Base mobile styles */
.transaction-item {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-card-bg);
  border-radius: var(--radius-lg);
  margin-bottom: 0.75rem;
  box-shadow: var(--shadow);
  transition: all 0.2s ease;
  border: 1px solid var(--color-border);
  overflow: hidden;
  touch-action: pan-y;
}

.transaction-item:hover {
  box-shadow: 0 2px 8px color-mix(in srgb, var(--bg) 0.08, transparent);
}

/* Transaction Grid Layout (tabular) */
.transaction-grid {
  display: grid;
  grid-template-columns: 40px 1fr 110px 90px 80px 75px 44px;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem 0.75rem;
  width: 100%;
}

.transaction-grid-icon {
  grid-column: 1;
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.transaction-grid-name {
  grid-column: 2;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  min-width: 0;
  justify-content: center;
  gap: 2px;
}

.transaction-grid-loja {
  grid-column: 3;
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  font-size: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 0.5rem;
  border-left: 1px solid var(--color-border);
}

.transaction-grid-metodo {
  grid-column: 4;
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  font-size: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.transaction-grid-codigo {
  grid-column: 5;
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}

.transaction-grid-valor {
  grid-column: 6;
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-weight: 700;
  font-size: 0.9375rem;
}

.transaction-grid-acoes {
  grid-column: 7;
  grid-row: 1 / 3;
  display: flex;
  gap: 0.25rem;
  justify-content: center;
}

/* Linha própria da grade: vai da coluna do nome até o fim do card, para parcela, tags e a
   divisão do Casal caberem lado a lado mesmo com a coluna do nome estreita */
.transaction-grid-badges {
  grid-column: 2 / -1;
  grid-row: 3;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}

/* Sem badge nenhum (nem parcela — que agora tem cópia própria sob o ícone
   no mobile —, nem cancelada/desconto/duplicada/tag), o container fica
   vazio mas ainda ocupa a linha do grid e o row-gap antes dela. display:none
   remove os dois. */
.transaction-grid-badges:empty {
  display: none;
}

/* Só existe/aparece no mobile — ver media query abaixo. No desktop o grid
   já é 1 linha só, não tem "o quê/quanto" pra separar visualmente. */
.transaction-grid-divider {
  display: none;
}

/* Mobile: as colunas fixas (110px+90px+80px+75px+44px) do grid desktop somam
   mais que a largura da tela. Como .transaction-item tem overflow:hidden,
   loja/método/código/valor E o botão de editar ficavam cortados fora da
   área visível — inclusive impossível de tocar. Reflui para 3 linhas de
   conteúdo (nome | loja+método+código | valor+ações) + badges, tudo dentro
   da largura do card. */
@media screen and (max-width: 768px) {
  .transaction-grid {
    /* Loja tende a ter nomes mais longos que método/código — proporção
       generosa pra ela em vez de 3 colunas iguais. */
    grid-template-columns: 40px 1.4fr 1fr 0.9fr;
    /* !important necessário: a regra base (não-mobile) usa o shorthand
       "gap: 0.75rem", que expande pra row-gap+column-gap; com a mesma
       especificidade de seletor, o navegador não deixa este row-gap
       (longhand, vindo depois no arquivo) vencer sem isso — confirmado
       testando ao vivo (sem !important o row-gap real ficava em 8px, não
       nos 4px definidos aqui). column-gap não tem esse problema porque
       nunca é redefinido sozinho em outro lugar. */
    row-gap: 0.25rem !important;
    column-gap: 0.5rem;
    padding: 0.625rem;
  }

  .transaction-grid-icon {
    grid-column: 1;
    grid-row: 1 / 4;
    /* Alinhado ao topo (com a 1a linha do nome), não centralizado no meio
       das 3 linhas de conteúdo — senão parece flutuar fora de lugar. */
    align-self: start;
    height: auto;
    padding-top: 1px;
    /* Empilha ícone + badge de parcela (quando houver), aproveitando o
       espaço vazio que já existia abaixo do ícone em vez de gastar uma
       linha inteira do card só pra "3/6". */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
  }

  /* !important: mesmo caso do row-gap em .transaction-grid acima — a
     regra base (.installment-badge--icon { display: none }, definida
     antes no arquivo) não cede o display sem isso, mesma especificidade
     e vindo depois no arquivo não bastam aqui (confirmado ao vivo). */
  .installment-badge--icon {
    display: inline-flex !important;
    font-size: 0.5625rem;
    padding: 0.0625rem 0.25rem;
    gap: 0;
  }

  /* A cópia de dentro de .transaction-grid-badges vira redundante no
     mobile — o badge já aparece embaixo do ícone. */
  .transaction-grid-badges .installment-badge {
    display: none;
  }

  .transaction-grid-name {
    grid-column: 2 / 5;
    grid-row: 1;
    gap: 3px;
    /* Nome e método de pagamento dividem a mesma linha (flex row); a
       descrição, com flex-basis:100% (regra base), quebra pra linha de
       baixo sozinha. Sem isso o método gastava uma coluna/linha própria
       só pra um badge pequeno. */
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.375rem;
    /* Regressao: justify-content:center vem da regra base (pensada pra
       centralizar VERTICALMENTE nome+descrição no layout desktop, onde a
       direção é column) — em row, isso passa a centralizar HORIZONTAL.
       Com nome curto quase não dá pra notar (sobra pouco espaço), mas com
       nome longo o suficiente pra quebrar linha, o item sozinho numa
       linha (nome OU método) fica visivelmente flutuando no meio em vez
       de alinhado à esquerda como o resto do card. */
    justify-content: flex-start;
  }

  /* .transaction-name (span interno) tem padding-left: 0.25rem E
     flex-basis: 100% fixos no CSS base — resquício do sistema antigo
     (.transaction-content/.transaction-main, flex, pré-grid). O
     flex-basis:100% forçava o nome a ocupar a linha toda mesmo sem
     precisar, empurrando o método pra uma 2a linha por dentro da mesma
     célula do grid (confirmado ao vivo: sem essa correção o nome usava
     288px de um container de 288px, e o badge de método SEMPRE quebrava
     linha, não importa quão curto o nome fosse). */
  .transaction-grid-name .transaction-name {
    padding-left: 0;
    flex-basis: auto;
    flex-grow: 0;
  }

  /* !important pelo mesmo motivo do .installment-badge--icon acima — sem
     isso o display:none da regra base vence e o método some (bug real
     reportado em produção). */
  .metodo-pagamento-badge--inline {
    display: inline-block !important;
    font-size: 0.625rem;
    padding: 0.125rem 0.5rem;
    flex-shrink: 0;
  }

  /* Conteúdo migrou pra dentro de .transaction-grid-name — a coluna em si
     só ocuparia espaço vazio se continuasse visível. */
  .transaction-grid-metodo {
    display: none;
  }

  .transaction-grid-loja {
    /* Antes dividia a linha com método (coluna 3); com método fora daqui,
       loja ocupa o espaço das duas colunas (2 e 3) sozinha. */
    grid-column: 2 / 4;
    grid-row: 2;
    border-left: none;
    padding-left: 0;
    /* 0.75rem (12px) herdado da regra base era grande demais perto do
       resto do texto pequeno do mobile (descricao/#id em 0.625rem) —
       reduz pra bater com o resto. */
    font-size: 0.625rem;
  }

  .transaction-grid-codigo {
    grid-column: 4;
    grid-row: 2;
    justify-content: flex-end;
  }

  /* Linha divisória sutil separando "o quê/onde" (nome+meta) de
     "quanto+ações". Precisa ser um elemento PRÓPRIO span 2/5: aplicar
     border-top em .transaction-grid-valor e .transaction-grid-acoes
     separadamente quebra a linha em 2 pedaços com buraco no meio (são
     colunas adjacentes com column-gap entre elas). */
  .transaction-grid-divider {
    display: block;
    grid-column: 2 / 5;
    grid-row: 3;
    border-top: 1px solid var(--color-border);
    align-self: center;
  }

  .transaction-grid-valor {
    grid-column: 2 / 4;
    grid-row: 4;
    justify-content: flex-start;
  }

  .transaction-grid-acoes {
    grid-column: 4;
    grid-row: 4;
    justify-content: flex-end;
    gap: 0.375rem;
  }

  .transaction-grid-badges {
    grid-column: 2 / 5;
    grid-row: 5;
    margin-top: 0;
  }

}

/* Category Standardized Icons */
.transaction-category-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  transition: all 0.2s ease;
  background-color: var(--color-bg-subtle, color-mix(in srgb, var(--ink) 0.05, transparent));
  border: 1px solid var(--color-border);
  position: relative;
  cursor: pointer;
}

.transaction-category-icon {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask-image: var(--svg-url);
  mask-image: var(--svg-url);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.action-icon-24 {
  display: inline-block;
  vertical-align: middle;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask-image: var(--svg-url);
  mask-image: var(--svg-url);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  flex-shrink: 0;
}

.action-icon-20 {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask-image: var(--svg-url);
  mask-image: var(--svg-url);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  flex-shrink: 0;
}

.action-icon-18 {
  display: inline-block;
  vertical-align: middle;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask-image: var(--svg-url);
  mask-image: var(--svg-url);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  flex-shrink: 0;
}

.sort-group {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  background: var(--color-background-alt);
  border-radius: var(--radius-md);
  padding: 2px;
  border: 1px solid var(--color-border);
}

.sort-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--color-text-tertiary);
  cursor: pointer;
  border-radius: calc(var(--radius-md) - 2px);
  transition: background 0.15s ease, color 0.15s ease;
  background: transparent;
  border: none;
  padding: 0;
}

.sort-btn:hover {
  background: var(--color-hover-bg);
  color: var(--color-text);
}

.sort-btn.active {
  background: var(--selecionado-fundo);
  color: var(--selecionado-texto);
}

@media screen and (max-width: 768px) {
  .sort-btn {
    width: 38px;
    height: 38px;
  }
}

.action-icon-16 {
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask-image: var(--svg-url);
  mask-image: var(--svg-url);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  flex-shrink: 0;
}

/* Color mappings per category group */
.cat-alimentacao {
  color: var(--ink);
  background: color-mix(in srgb, var(--good) 0.25, transparent);
  border-color: color-mix(in srgb, var(--good) 0.1, transparent);
}
.cat-transporte {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink-2) 0.25, transparent);
  border-color: color-mix(in srgb, var(--ink-2) 0.1, transparent);
}
.cat-saude {
  color: var(--ink);
  background: color-mix(in srgb, var(--critical) 0.25, transparent);
  border-color: color-mix(in srgb, var(--critical) 0.1, transparent);
}
.cat-educacao {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink-2) 0.25, transparent);
  border-color: color-mix(in srgb, var(--ink-2) 0.1, transparent);
}
.cat-lazer {
  color: var(--ink);
  background: color-mix(in srgb, var(--critical) 0.25, transparent);
  border-color: color-mix(in srgb, var(--critical) 0.1, transparent);
}
.cat-bebidas {
  color: var(--critical);
  background: color-mix(in srgb, var(--critical) 0.2, transparent);
  border-color: color-mix(in srgb, var(--critical) 0.35, transparent);
}
.cat-moradia {
  color: var(--ink);
  background: color-mix(in srgb, var(--good) 0.25, transparent);
  border-color: color-mix(in srgb, var(--good) 0.1, transparent);
}
.cat-vestuario {
  color: var(--ink);
  background: color-mix(in srgb, var(--critical) 0.25, transparent);
  border-color: color-mix(in srgb, var(--critical) 0.1, transparent);
}
.cat-receita {
  color: var(--ink-2);
  background: color-mix(in srgb, var(--good) 0.4, transparent);
  border-color: color-mix(in srgb, var(--good) 0.1, transparent);
}
.cat-outros {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink-2) 0.25, transparent);
  border-color: color-mix(in srgb, var(--ink-2) 0.1, transparent);
}

/* Expand chevron — hidden, kept for compatibility */
.expand-btn {
  display: none !important;
}

/* --- Font hierarchy: primary > secondary > tertiary --- */

/* Primary: nome + valor (--font-size-body = 0.875rem / 14px) */
.transaction-name {
  font-weight: 600;
  font-size: var(--font-size-body);
  color: var(--color-text);
  margin: 0;
  min-width: 0;
  line-height: var(--line-height-tight);
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
  padding-left: 0.25rem;
  flex-basis: 100%;
}

.transaction-description {
  display: block;
  font-size: 0.625rem;
  color: var(--color-text-secondary);
  margin: 3px 0 0 0.25rem;
  line-height: 1.4;
  opacity: 0.75;
  font-style: italic;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-basis: 100%;
}

.installment-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.625rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--ink-2) 0.1, transparent);
  color: var(--ink-2);
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.4;
}

/* Cópia do badge de parcela renderizada dentro de .transaction-grid-icon —
   só existe/aparece no mobile (ver media query), pra aproveitar o espaço
   vazio abaixo do ícone em vez de gastar uma linha inteira do card. */
.installment-badge--icon {
  display: none;
}

/* Badge de método de pagamento — antes era estilo inline no JS (impossível
   de sobrescrever por breakpoint); agora é classe, com 2 cópias no HTML
   (ao lado do nome no mobile, coluna própria no desktop — ver JS/media
   query) pra poder ter tamanho e posição diferentes em cada um. */
.metodo-pagamento-badge {
  padding: 0.25rem 0.625rem;
  border-radius: 4px;
  font-weight: 600;
  display: inline-block;
  font-size: 0.75rem;
}

.metodo-pagamento-badge--inline {
  display: none;
}

.parcelas-section {
  grid-column: 1 / -1;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
  margin-top: 0.5rem;
}

.parcelas-fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

/* theme.css carrega depois do tailwind: sem isto o display:grid acima anula o .hidden e os campos
   de parcela aparecem mesmo quando a compra não é parcelada */
.parcelas-fields-grid.hidden {
  display: none;
}

@media (max-width: 768px) {
  .parcelas-fields-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.transaction-value {
  font-weight: 700;
  font-size: var(--font-size-body);
  flex-shrink: 0;
  white-space: nowrap;
}

.transaction-value.positive { color: var(--good); }
.transaction-value.negative { color: var(--critical); }
.transaction-value.discount { color: var(--ink-2); }

/* Divisória vertical: separa o saldo das parcelas que o compõem, para o
   número não ser lido como soma das três colunas. */
.linha-divisoria {
  border-left: 1px solid var(--color-border);
  padding-left: 1.75rem;
}

.transaction-id {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.625rem;
  color: var(--color-text-secondary);
  opacity: 0.6;
  flex-shrink: 0;
  margin-left: 0.125rem;
  padding-right: 8px;
}

.transaction-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-overline);
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  /* Mobile first: a meta-row ocupa a largura do card, então cabe bem mais que
     os 120px do desktop. Limite relativo evita que uma loja de nome longo
     empurre o método de pagamento e o #ID para fora. */
  max-width: 60%;
  padding: 0.1875rem 0.5rem;
  background: var(--color-background-alt);
  border-radius: var(--radius-sm);
}

/* text-overflow: ellipsis não funciona em container flex — o texto vira flex
   item e é cortado no meio da palavra, sem reticências. Truncar aqui dentro,
   num elemento com formatação inline própria, é o que faz o "…" aparecer. */
.transaction-meta-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Badge adjustments — secondary level (same as date) */
.transaction-main .badge {
  font-size: var(--font-size-caption);
  padding: 0.25rem 0.5rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}

.transaction-content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  min-width: 0;
  width: 100%;
}

.transaction-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}

.transaction-right {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-shrink: 0;
  width: 100%;
}

.transaction-meta-item {
  overflow: hidden;
  white-space: nowrap;
}

.transaction-meta-row {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  min-width: 0;
}

.transaction-id {
  display: inline-flex;
  padding-right: 8px;
}

/* Desktop styles (min-width: 769px) */
@media screen and (min-width: 769px) {
  .transaction-item {
    flex-direction: row;
    margin-bottom: 0.5rem;
    overflow: visible;
  }

  .transaction-content {
    padding: 0.75rem 1.25rem;
    gap: 1rem;
    flex-wrap: wrap;
  }

  .transaction-main {
    flex-wrap: wrap;
    overflow: visible;
    gap: 0.5rem;
  }

  .transaction-name {
    font-size: 0.8125rem;
  }

  .transaction-meta-row {
    flex-basis: auto;
    display: inline-flex;
    flex-wrap: nowrap;
    flex-shrink: 1;
  }

  /* No desktop a linha é nowrap e divide espaço com nome e valor — o limite
     volta a ser absoluto e mais curto que o do mobile. */
  .transaction-meta-item {
    max-width: 120px;
  }

  .transaction-right {
    width: auto;
    justify-content: flex-end;
  }

  .transaction-value {
    font-size: 0.875rem;
    min-width: 5rem;
  }

  .transaction-item:hover {
    transform: translateX(2px);
  }
}

/* Date Group Header — clickable date separator with accent underline */
.date-group-header {
  display: flex;
  align-items: center;
  padding: 0.75rem 0 0.375rem;
  margin: 0.75rem 0 0.5rem;
  cursor: pointer;
  user-select: none;
  position: relative;
  border-bottom: 1px solid var(--color-border);
  transition: border-color 0.2s ease;
}

.date-group-header:first-of-type {
  margin-top: 0;
  padding-top: 0;
}

.date-group-header:hover {
  border-bottom-color: var(--color-text-secondary);
}

.date-group-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 2rem;
  height: 2px;
  background: var(--color-primary);
  border-radius: 1px;
  transition: width 0.2s ease;
}

.date-group-header:hover::after {
  width: 3rem;
}

.date-group-header:active::after {
  width: 100%;
}

.date-group-label {
  font-size: var(--font-size-body);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

/* Status Badges */
.badge.status {
  font-size: 0.688rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-weight: 600;
}

.badge.status.paid {
  background: var(--good-soft);
  color: var(--good);
}

.badge.status.pending {
  background: var(--critical-soft);
  color: var(--critical);
}

/* Duplicate Badge & Highlight */
.badge-duplicate {
  background: var(--critical-soft);
  color: var(--critical);
  font-size: 0.688rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-weight: 600;
}

/* Concluído: o mesmo verde apagado do saldo ok, para não competir com o card. */
.badge-success {
  background: var(--good-soft);
  color: var(--good);
  font-size: 0.688rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-weight: 600;
}

/* Lembrete já quitado: o card inteiro recua, inclusive ícone e botões.
   Antes só o nome e o valor ficavam a 0,6 e o resto continuava na cor cheia. */
.card-enhanced.card-fosco {
  background: var(--surface);
  box-shadow: none;
  border: 1px solid var(--color-border);
}

.card-enhanced.card-fosco .transaction-category-icon-wrapper,
.card-enhanced.card-fosco .metas-card__btn,
.card-enhanced.card-fosco .badge {
  opacity: 0.55;
}

.card-enhanced.card-fosco:hover {
  transform: none;
  box-shadow: none;
}

/* Cancelada Badge & Highlight — compra cancelada/estornada, fora dos cálculos */
.badge-cancelada {
  background: var(--ink-2);
  color: var(--ink-muted);
  font-size: 0.688rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-weight: 600;
}

.transaction-item.cancelada {
  opacity: 0.6;
}

.transaction-item.cancelada .transaction-name {
  text-decoration: line-through;
}

/* Tag Badges — inline tags on transaction items */
.transaction-tags {
  display: inline-flex;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.transaction-item.duplicate {
  border-left: 3px solid var(--critical);
}

/* Duplicate Group Container */
.duplicate-group {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  margin-bottom: var(--spacing-md);
  overflow: hidden;
}

.duplicate-group-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: color-mix(in srgb, var(--critical) 0.08, transparent);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: nowrap;
}

.duplicate-group-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  white-space: nowrap;
}

.duplicate-group-value {
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-red);
}

/* =========================================
   Casal / Thayna Tag Card Styling
   ========================================= */

.transaction-item.tag-casal {
  border-left: 4px solid var(--color-chart-5, var(--ink-2));
}

.transaction-item.tag-thayna {
  border-left: 4px solid var(--color-chart-4, var(--ink-2));
}

/* Divisão do Casal: na linha de badges do card, lado a lado com parcela e tags.
   Em tela estreita quebra entre os itens, nunca no meio de um valor. */
.casal-split,
.casal-split-values {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
}

.casal-split-label,
.casal-split-values > span {
  white-space: nowrap;
}

.casal-split-label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--color-text-secondary);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.casal-split-label .tag-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.casal-split-label .tag-dot.tag-casal {
  background: var(--color-chart-5, var(--ink-2));
}

.casal-split-label .tag-dot.tag-thayna {
  background: var(--color-chart-4, var(--ink-2));
}

.casal-split-values {
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.casal-split-rafael {
  color: var(--color-chart-5, var(--ink-2));
}

.casal-split-thayna {
  color: var(--color-chart-4, var(--ink-2));
}

.duplicate-group-date {
  font-size: 0.813rem;
  color: var(--color-text-secondary);
}

.duplicate-group-items {
  padding: var(--spacing-xs);
}

.duplicate-group-items .transaction-item {
  margin-bottom: 0;
  border-radius: var(--radius-md);
}

.duplicate-group-items .transaction-item:last-child {
  margin-bottom: 0;
}

.action-text-btn {
  font-size: 0.875rem;
  color: var(--color-secondary);
  background: var(--color-input-bg);
  border: 1px solid var(--color-border);
  cursor: pointer;
  padding: var(--spacing-sm) var(--spacing-md);
  transition: all 0.15s ease;
  font-weight: 500;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  min-height: 32px;
  min-width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media screen and (min-width: 769px) {
  .action-text-btn {
    font-size: 0.813rem;
    background: transparent;
    border: none;
    padding: 0.375rem 0.625rem;
    min-height: 36px;
    min-width: auto;
  }
}

.action-text-btn:hover {
  color: var(--color-primary);
  background: var(--color-hover-bg);
}

.action-text-btn:active {
  transform: scale(0.95);
}

.action-text-btn.danger {
  color: var(--critical);
}

.action-text-btn.danger:hover {
  color: var(--critical);
  background: color-mix(in srgb, var(--critical) 0.1, transparent);
}

/* Icon-only action buttons — no wrapper padding, no background */
/* Mobile first: alvo de toque quadrado de 44px (minimo recomendado). O icone
   dentro segue pequeno — quem cresce e a area clicavel, nao o desenho.
   No desktop, com mouse, encolhe para 28px (ver media query de 769px). */
/* Fundo circular colorido por padrão — não só num hover que não existe no
   toque. Antes ficava opacity:0.5/transparente em repouso e só ganhava cor
   no :hover (bom pra mouse, mas deixava os botões apagados/inconsistentes
   no mobile, onde não existe hover). Padronizado: mesmo visual nos dois
   breakpoints, só o tamanho do círculo visível muda (ver media query). */
.action-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  padding: 0;
  border: none;
  background: var(--color-background-alt);
  color: var(--color-primary);
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 50%;
  opacity: 1;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease;
  line-height: 1;
}

/* Precisa vir DEPOIS da regra base: mesma especificidade, então quem ganha é a
   última no arquivo — e a media query de 769px fica bem acima daqui. */
@media screen and (min-width: 769px) {
  /* Ponteiro fino: 28px basta e mantém a linha do card compacta */
  .action-icon-btn {
    width: 28px;
    height: 28px;
  }
}

/* Precisa vir DEPOIS da regra base (mesmo motivo do bloco de 769px acima):
   a versão anterior desta regra vivia ANTES da regra base no arquivo (perto
   da media query do grid mobile) e por isso nunca vencia o padding:0 dela —
   o círculo sempre renderizava nos 44px cheios, mesmo com o padding
   declarado aqui. Botão "grande demais" reportado no mobile era esse bug.
   padding 11.5px -> círculo de 21px pintado dentro do alvo de toque de
   44px (que continua intacto — só o padding cresce, ver box-sizing). */
@media screen and (max-width: 768px) {
  .action-icon-btn {
    background-clip: content-box;
    box-sizing: border-box;
    padding: 11.5px;
  }

  /* Ícone acompanha o círculo menor — 20px (o <i class="icon-md"> vira
     <span class="action-icon-20"> em initIcons(), ver convertLucideToMask
     em icons.js) ficaria colado na borda de um círculo de 21px. 16px
     mantém a mesma folga proporcional que existia antes. */
  .transaction-grid-acoes .action-icon-btn .action-icon-20 {
    width: 16px;
    height: 16px;
  }
}

/* Antes revelava cor/fundo a partir de opacity:0.5+transparente em
   repouso (agora já vem colorido por padrão — ver regra base). Hover só
   intensifica um pouco; .danger:hover virou redundante com o resting
   state e foi removido. */
.action-icon-btn:hover {
  filter: brightness(0.92);
}

.action-icon-btn:active {
  opacity: 0.8;
  transform: scale(0.92);
}

.overlay-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem;
  border: none;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--bg) 0.04, transparent);
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.15s ease;
}

.overlay-action-btn:hover {
  background: var(--color-hover-bg);
}

.overlay-action-btn:active {
  transform: scale(0.95);
}

.overlay-action-btn.danger {
  color: var(--critical);
  background: color-mix(in srgb, var(--critical) 0.06, transparent);
}

.overlay-action-btn.danger:hover {
  background: color-mix(in srgb, var(--critical) 0.12, transparent);
}

.overlay-close-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  opacity: 0.6;
  transition: all 0.15s ease;
}

.overlay-close-btn:hover {
  opacity: 1;
  background: var(--color-hover-bg);
}

/* Transactions List Container - Mobile First */
.transactions-list {
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.transactions-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border);
}

.transactions-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.transactions-count {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: var(--color-input-bg);
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
}

.transactions-sum {
  font-size: 0.875rem;
  font-weight: 600;
}

.transactions-actions {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.transactions-actions .btn-export {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
}

.transactions-actions .btn-export:hover {
  color: var(--color-text);
  background: var(--color-input-bg);
  border-color: var(--ink-2);
}

.main-header .container {
  padding: 0.75rem 1rem;
}

/* Avatar - Mobile First with proper touch target */
.user-avatar {
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--ink) 0.12, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.user-avatar:hover {
  background: color-mix(in srgb, var(--ink) 0.3, transparent);
}

.user-avatar:active {
  transform: scale(0.95);
}

/* Theme toggle in header - Mobile First with proper touch target */
.header-theme-toggle {
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--ink) 0.08, transparent);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  cursor: pointer;
  color: color-mix(in srgb, var(--ink) 0.8, transparent);
  transition: all 0.2s ease;
}

.header-theme-toggle:hover {
  background: color-mix(in srgb, var(--ink) 0.2, transparent);
}

.header-theme-toggle:active {
  transform: scale(0.95);
}

/* =========================================
   Dialog System (Tailwind Plus style)
   ========================================= */

/* Native dialog reset */
dialog {
  padding: 0;
  border: none;
  background: transparent;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
}

dialog::backdrop {
  background: transparent;
}

dialog[open] {
  display: flex;
}

/* Dialog backdrop */
.dialog-backdrop {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--bg) 0.5, transparent);
  transition: opacity 200ms ease-out;
}

.dialog-backdrop[data-closed] {
  opacity: 0;
}

/* Dialog container */
.dialog-container {
  display: flex;
  min-height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

/* Dialog panel - Mobile First */
.dialog-panel {
  position: relative;
  width: 100%;
  max-width: calc(100vw - 2rem);
  border-radius: var(--radius-xl);
  background: var(--color-card-bg);
  box-shadow: 0 25px 50px -12px color-mix(in srgb, var(--bg) 0.25, transparent);
  transition: all 200ms ease-out;
  transform: scale(1) translateY(0);
  opacity: 1;
  margin: auto;
}

@media screen and (min-width: 481px) {
  .dialog-panel {
    max-width: 28rem;
  }
}

.dialog-panel[data-closed] {
  opacity: 0;
  transform: scale(0.95) translateY(1rem);
}

/* Dialog header */
.dialog-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem 1rem;
}

.dialog-icon {
  display: flex;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}

.dialog-icon.danger {
  background: color-mix(in srgb, var(--critical) 0.1, transparent);
  color: var(--critical);
}

.dialog-icon.warning {
  background: color-mix(in srgb, var(--critical) 0.1, transparent);
  color: var(--critical);
}

.dialog-icon.info {
  background: color-mix(in srgb, var(--ink-2) 0.1, transparent);
  color: var(--ink-2);
}

.dialog-icon.success {
  background: color-mix(in srgb, var(--good) 0.1, transparent);
  color: var(--good);
}

.dialog-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text);
}

/* Dialog body */
.dialog-body {
  padding: 0 1.5rem 1rem;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Edit modal — responsive grid (mobile: 1 col, tablet: 2 col, desktop: 3 col) */
.edit-modal-panel {
  max-width: calc(100vw - 2rem);
}

.edit-modal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 481px) {
  .edit-modal-panel {
    max-width: 36rem;
  }
  .edit-modal-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1025px) {
  .edit-modal-panel {
    max-width: 52rem;
  }
  .edit-modal-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Dialog form panel — padding + largura padronizada (DRY: reutilizado por todos os modais de formulário) */
.dialog-form-panel {
  max-width: calc(100vw - 2rem);
  padding: 1.5rem;
}

@media (min-width: 481px) {
  .dialog-form-panel {
    max-width: 36rem;
  }
}

/* Dialog confirm panel — modais de confirmação de exclusão */
.dialog-confirm-panel {
  max-width: 400px;
  text-align: center;
  padding: 1.5rem;
}

.dialog-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 481px) {
  .dialog-form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.dialog-form-full {
  grid-column: 1 / -1;
}

/* Dialog footer */
.dialog-footer {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.75rem;
  padding: 1rem 1.5rem 1.25rem;
  background: var(--color-table-header);
  border-radius: 0 0 0.75rem 0.75rem;
}

@media (min-width: 481px) {
  .dialog-footer {
    flex-direction: row;
    justify-content: flex-end;
  }
}

/* Dialog buttons */
.dialog-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0.625rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  transition: all 150ms ease;
  min-height: 44px;
  cursor: pointer;
  border: none;
}

.dialog-btn-primary {
  background: var(--selecionado-fundo);
  color: var(--selecionado-texto);
}

.dialog-btn-primary:hover {
  background: var(--selecionado-fundo-hover);
}

.dialog-btn-danger {
  background: var(--critical);
  color: white;
}

.dialog-btn-danger:hover {
  background: var(--critical-soft);
  color: var(--critical);
}

.dialog-btn-secondary {
  background: var(--color-input-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.dialog-btn-secondary:hover {
  background: var(--color-table-header);
}

/* Dialog form elements - Mobile First */
.dialog-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-input-bg);
  color: var(--color-text);
  font-size: 1rem;
  transition: border-color 150ms ease;
  min-height: var(--touch-target-min);
}

@media screen and (min-width: 769px) {
  .dialog-input {
    font-size: 0.875rem;
  }
}

/* Texto longo (descrição): mostra o conteúdo inteiro, crescendo até metade da tela e rolando
   depois disso. field-sizing cresce sozinho onde há suporte; no resto, o dialog-manager ajusta. */
.dialog-textarea {
  display: block;
  min-height: 5.5rem;
  max-height: 50vh;
  line-height: 1.5;
  resize: vertical;
  overflow-y: auto;
  field-sizing: content;
}

.dialog-input:focus {
  outline: none;
  border-color: var(--ink-2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink-2) 0.1, transparent);
}

.dialog-select {
  width: 100%;
  padding: 0.75rem 1rem;
  min-height: var(--touch-target-min);
  border-radius: 0.5rem;
  border: 1px solid var(--color-border);
  background: var(--color-input-bg);
  color: var(--color-text);
  font-size: 0.875rem;
  cursor: pointer;
}

.dialog-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
}

/* iOS touch improvements */
button,
.action-text-btn,
[onclick],
[command] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: color-mix(in srgb, var(--bg) 0.1, transparent);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

/* =========================================
   Mobile Responsive Tables (DRY)
   Transform tables to card layout on mobile
   ========================================= */

table.w-full thead {
  display: none;
}

table.w-full tbody {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

table.w-full tbody tr {
  display: flex;
  flex-direction: column;
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  gap: var(--spacing-sm);
}

table.w-full tbody tr td {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

table.w-full tbody tr td:last-child {
  border-bottom: none;
  padding-top: var(--spacing-md);
  justify-content: flex-end;
  gap: var(--spacing-md);
}

table.w-full tbody tr td::before {
  content: attr(data-label);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

table.w-full tbody tr td button,
table.w-full tbody tr td a {
  min-height: var(--touch-target-min);
  min-width: var(--touch-target-min);
  padding: var(--spacing-sm) var(--spacing-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
}

/* =========================================
   Global Mobile Utilities (DRY)
   ========================================= */

/* Mobile-first: touch targets, responsive layout */
a:not(.badge),
/* .action-icon-btn fica de fora: ele declara width e height iguais, e o
   min-height global esticava so a altura, produzindo um 28x44 alto e estreito.
   O alvo de toque dele e tratado por breakpoint junto da propria regra. */
button:not(.tab):not(.period-chip):not(.action-icon-btn) {
  min-height: var(--touch-target-min);
}

.flex.items-center.justify-between {
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

h1.text-2xl {
  font-size: 1.5rem;
}

button.px-4.py-2 {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 0.875rem;
  min-height: var(--touch-target-min);
}

/* =========================================
   Safe Area Insets for notched devices
   ========================================= */

@supports (padding: env(safe-area-inset-bottom)) {
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .main-header {
    padding-top: env(safe-area-inset-top);
  }

  #toastContainer {
    top: calc(var(--header-height) + env(safe-area-inset-top) + var(--spacing-md));
  }
}

/* =========================================
   Batch Selection Styles
   ========================================= */

/* Selected transaction item */
.transaction-item.selected {
  background: color-mix(in srgb, var(--ink-2) 0.08, transparent);
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ink-2) 0.2, transparent);
}

.transaction-item.selected .transaction-category-icon-wrapper {
  box-shadow: 0 0 0 2px var(--color-secondary);
}

/* Batch Action Bar - Floating bottom bar */
.batch-bar {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  transform: none;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px color-mix(in srgb, var(--bg) 0.15, transparent);
  animation: batchBarSlideUp 0.25s ease-out;
}

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

.batch-bar__info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-right: 0.5rem;
  border-right: 1px solid var(--color-border);
}

.batch-bar__count {
  font-size: 0.813rem;
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;
}

.batch-bar__sum {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.batch-bar__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.batch-bar__btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.batch-bar__btn:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.batch-bar__btn:active {
  transform: scale(0.92);
}

.batch-bar__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.batch-bar__close:hover {
  background: var(--critical-soft);
  color: var(--critical);
}

/* Card Enhanced - Unified elevated card style */
.card-enhanced {
  background: var(--color-card-bg);
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
}

.card-enhanced:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ink-2) 0.1, transparent);
}

/* Chart card title consistent styling */
.card-enhanced h3 {
  font-size: var(--font-size-body);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--spacing-sm);
}

/* Explanation Box — DRY: usado nos cards de gráficos do dashboard */
.explanation-box {
  margin-top: var(--spacing-sm);
  padding: var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-caption);
  background: var(--color-background-alt);
  color: var(--color-text-secondary);
}

/* Aviso de exclusão — o card de métrica mostra menos do que a categoria soma.
   Aparece quando o Fixos deixa de fora o imóvel de Joinville (ver
   dashboard-fixos-variaveis.js): sem ele o número parece menor sem explicação. */
.aviso-exclusao {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-secondary);
  background: var(--color-background-alt);
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.aviso-exclusao strong {
  color: var(--color-text);
}

/* =========================================
   Card List Layout — column mobile, row desktop
   DRY: reutilizado por lembretes + metas
   ========================================= */

.card-list-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
}

.card-list-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
}

.card-list-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  margin-left: 0;
  justify-content: space-between;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
}

.card-enhanced {
  padding: var(--spacing-md);
}

@media screen and (min-width: 769px) {
  .card-list-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .card-list-actions {
    margin-left: 0.75rem;
    justify-content: flex-end;
    padding-top: 0;
    border-top: none;
  }

  .card-enhanced {
    padding: var(--spacing-lg);
  }
}

/* Cores de texto do tema: uma regra só, usada no lugar de style="color: var(--color-text…)" */
.texto-principal {
  color: var(--color-text);
}

.texto-secundario {
  color: var(--color-text-secondary);
}

/* Modificador para fundo claro (modais e painéis): o .header-theme-toggle base é feito
   para o cabeçalho escuro e, com ícone branco, fica invisível dentro de um modal */
.header-theme-toggle--claro {
  background: transparent;
  color: var(--color-text-secondary);
}

.header-theme-toggle--claro:hover {
  background: var(--color-background-alt);
  color: var(--color-text);
}

/* Lista zebrada: linhas pares com fundo alternativo para separar os registros */
.lista-zebrada > * {
  transition: background-color 0.15s ease;
}

.lista-zebrada > :nth-child(even) {
  background: var(--color-background-alt);
}

.lista-zebrada > :hover {
  background: var(--color-border);
}

/* Badge de métrica (km/l, R$/km, parcial…): fundo que contrasta com linha clara e zebrada */
.badge-metrica {
  background: var(--color-background);
}

/* Card de resumo (rótulo + valor): mais compacto que o .card-enhanced padrão */
.card-enhanced.card-resumo {
  padding: 0.75rem;
}

/* =========================================
   Planejamento Financeiro
   ========================================= */

.planejamento-progress-bar {
  width: 100%;
  height: 8px;
  background: var(--color-border);
  border-radius: 4px;
  overflow: hidden;
}

.planejamento-progress-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--color-primary);
  transition: width 0.5s ease;
}

.planejamento-step {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  transition: all 0.15s;
}

.planejamento-step--completed {
  color: var(--color-text);
  background: color-mix(in srgb, var(--good) 0.08, transparent);
}

.planejamento-step__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 700;
}

.planejamento-step__icon--done {
  background: var(--color-income, var(--good));
  color: var(--ink);
}

.planejamento-step__icon--pending {
  background: var(--color-border);
  color: var(--color-text-tertiary);
}

/* =========================================
   Desktop: restore table layout for transaction-row and generic tables */
@media screen and (min-width: 769px) {
  table thead {
    display: table-header-group;
  }

  table tbody {
    display: table-row-group;
  }

  .transaction-row {
    display: table-row;
    margin-bottom: 0;
    border-radius: 0;
    border: none;
    background: none;
    box-shadow: none;
    overflow: visible;
  }

  .transaction-row td {
    display: table-cell;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
  }

  .transaction-row td:last-child {
    border-bottom: 1px solid var(--color-border);
  }

  .transaction-row td::before {
    content: none;
  }

  .transaction-row td[data-label="Valor"] {
    font-size: inherit;
    background: none;
  }

  .transaction-row td[data-label="Data"] {
    background: none;
    font-weight: 400;
  }

  .transaction-row td[data-label="Ações"] {
    justify-content: flex-start;
    background: none;
  }

  .transaction-row td[data-label="Ações"] button {
    font-size: inherit;
  }

  .transaction-row .badge {
    margin-left: 0;
  }

  #extratoContainer > div > div:not(.duplicate-group-header):not(.duplicate-group-items):not(.transaction-action-overlay) {
    flex-direction: row;
    gap: 0;
  }

  #extratoContainer button {
    padding: 0.375rem;
    font-size: 0.875rem;
  }

  table.w-full thead {
    display: table-header-group;
  }

  table.w-full tbody {
    display: table-row-group;
    gap: 0;
  }

  table.w-full tbody tr {
    display: table-row;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    gap: 0;
  }

  table.w-full tbody tr td {
    display: table-cell;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
  }

  table.w-full tbody tr td:last-child {
    border-bottom: 1px solid var(--color-border);
    padding-top: 0.75rem;
    justify-content: flex-start;
    gap: 0;
  }

  table.w-full tbody tr td::before {
    content: none;
  }

  table.w-full tbody tr td button,
  table.w-full tbody tr td a {
    min-height: auto;
    min-width: auto;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.813rem;
  }
}

/* ========================================
   Settings Page
   ======================================== */

.settings-tabs {
  display: flex;
  gap: var(--spacing-xs);
  border-bottom: 2px solid var(--color-border);
  padding-bottom: 0;
}

.settings-tab {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  border: none;
  background: none;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.2s, border-color 0.2s;
}

.settings-tab:hover {
  color: var(--color-text);
}

.settings-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.settings-panel {
  padding: var(--spacing-lg);
}

.settings-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.settings-label {
  font-size: 0.813rem;
  font-weight: 600;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.settings-input {
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-card-bg);
  color: var(--color-text);
  font-size: 0.875rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}

.settings-input:focus {
  border-color: var(--ink-2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink-2) 0.15, transparent);
}

.settings-input--readonly {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--color-bg);
}

.settings-hint {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

.settings-save-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-lg);
  background: var(--selecionado-fundo);
  color: var(--selecionado-texto);
  border: none;
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  margin-top: var(--spacing-sm);
}

.settings-save-btn:hover {
  background: var(--selecionado-fundo-hover);
  transform: translateY(-1px);
}

.settings-save-btn:active {
  transform: translateY(0);
}

/* ========================================
   Signup Wizard - Gamification
   ======================================== */

.signup-progress {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--color-border);
  overflow: hidden;
  margin-bottom: var(--spacing-md);
}

.signup-progress-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--good));
  transition: width 0.6s ease-out;
  width: 0%;
}

.step-indicators {
  display: flex;
  justify-content: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.step-indicator {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 700;
  transition: all 0.3s ease;
  border: 2px solid var(--color-border);
  background: transparent;
  color: var(--color-text-secondary);
}

.step-indicator.active {
  border-color: var(--selecionado-fundo);
  background: var(--selecionado-fundo);
  color: var(--selecionado-texto);
  transform: scale(1.1);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--ink-2) 0.3, transparent);
}

.step-indicator.completed {
  border-color: var(--good);
  background: var(--good);
  color: var(--ink);
}

.signup-step {
  display: none;
}

.signup-step.active {
  display: block;
  animation: signupSlideIn 0.35s ease-out;
}

@keyframes signupSlideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes celebratePulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 0.4, transparent); }
  70% { box-shadow: 0 0 0 20px color-mix(in srgb, var(--good) 0, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 0, transparent); }
}

.celebrate {
  animation: celebratePulse 1s ease-out 2;
}

.signup-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  background: var(--color-hover-bg);
}

.signup-summary-label {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  font-weight: 500;
}

.signup-summary-value {
  font-size: 0.875rem;
  color: var(--color-text);
  font-weight: 600;
}

/* ========================================
 * Auth Pages — Shared Styles (DRY)
 * Replaces inline styles in login, cadastro, termos, privacidade
 * ======================================== */

.auth-bg {
  background: linear-gradient(135deg, var(--color-background) 0%, var(--color-background-alt) 100%);
}

.auth-card {
  background: var(--color-card-bg);
}

.text-theme {
  color: var(--color-text);
}

.text-theme-secondary {
  color: var(--color-text-secondary);
}

.input-theme {
  background: var(--color-input-bg);
  color: var(--color-text);
  border-color: var(--color-border);
  min-height: var(--touch-target-min);
}

.msg-error {
  background: color-mix(in srgb, var(--critical) 0.1, transparent);
  border: 1px solid var(--critical);
}

.msg-success {
  background: color-mix(in srgb, var(--good) 0.1, transparent);
  border: 1px solid var(--good);
}

/* ========================================
 * Legal Pages — Content Styles
 * ======================================== */

.legal-section {
  margin-bottom: 1.5rem;
}

.legal-section-title {
  color: var(--color-text);
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.legal-section-content {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  line-height: 1.625;
}

/* =========================================
   Badges de categoria
   =========================================
   Antes cada familia de categoria tinha uma cor neon propria. A paleta tem
   so quatro cores, entao os badges se distinguem pelo rotulo e nao pela cor:
   verde para receita, vermelho para saida, e as demais familias nas tintas
   neutras. Os nomes de classe antigos continuam existindo para nao quebrar os
   cards que ja os usam.
   ========================================= */
/* ---- VERDE NEON var(--good) ---- */
/* Alimentação, Alimentos, Laticínios, Mercado, Padaria, Viagens */
.bg-verde-neon {
  background-color: var(--good) !important;
}
.text-verde-neon {
  color: var(--good) !important;
}
.border-verde-neon {
  border-color: var(--good) !important;
}
.shadow-verde-neon {
  box-shadow: 0 0 12px color-mix(in srgb, var(--good) 0.4, transparent);
}
.badge-alimentacao {
  background: var(--good);
  color: var(--ink);
  font-weight: 700;
  text-shadow: 0 0 2px color-mix(in srgb, var(--ink) 0.2, transparent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--good) 0.3, transparent);
}
.badge-alimentacao:hover {
  box-shadow: 0 4px 12px color-mix(in srgb, var(--good) 0.5, transparent);
  transform: scale(1.05);
}

/* ---- VERDE NEON ALTERNATIVO var(--neon-verde-alt) ---- */
/* Ciclismo, Hospedagem, Moradia, Utilidades Domésticas */
.bg-verde-alt-neon {
  background-color: var(--neon-verde-alt) !important;
}
.text-verde-alt-neon {
  color: var(--neon-verde-alt) !important;
}
.border-verde-alt-neon {
  border-color: var(--neon-verde-alt) !important;
}
.shadow-verde-alt-neon {
  box-shadow: 0 0 12px color-mix(in srgb, var(--neon-verde-alt) 0.4, transparent);
}
.badge-moradia {
  background: linear-gradient(135deg, var(--neon-verde-alt) 0%, var(--good) 100%);
  color: var(--ink);
  font-weight: 700;
  text-shadow: 0 0 2px color-mix(in srgb, var(--ink) 0.2, transparent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--neon-verde-alt) 0.3, transparent);
}
.badge-moradia:hover {
  box-shadow: 0 4px 12px color-mix(in srgb, var(--neon-verde-alt) 0.5, transparent);
  transform: scale(1.05);
}

/* ---- ROSA NEON var(--critical) ---- */
/* Bebidas, Bebidas Não Alcoólicas, Lazer */
.bg-rosa-neon {
  background-color: var(--critical) !important;
}
.text-rosa-neon {
  color: var(--critical) !important;
}
.border-rosa-neon {
  border-color: var(--critical) !important;
}
.shadow-rosa-neon {
  box-shadow: 0 0 12px color-mix(in srgb, var(--critical) 0.4, transparent);
}
.badge-lazer {
  background: linear-gradient(135deg, var(--critical) 0%, var(--neon-rosa-alt) 100%);
  color: var(--surface);
  font-weight: 700;
  text-shadow: 0 0 2px color-mix(in srgb, var(--ink) 0.2, transparent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--critical) 0.3, transparent);
}
.badge-lazer:hover {
  box-shadow: 0 4px 12px color-mix(in srgb, var(--critical) 0.5, transparent);
  transform: scale(1.05);
}

/* ---- AZUL NEON var(--ink-2) ---- */
/* Compras, Despesas Fixas, Financiamento, Marketing, Transporte */
.bg-azul-neon {
  background-color: var(--ink-2) !important;
}
.text-azul-neon {
  color: var(--ink-2) !important;
}
.border-azul-neon {
  border-color: var(--ink-2) !important;
}
.shadow-azul-neon {
  box-shadow: 0 0 12px color-mix(in srgb, var(--ink-2) 0.4, transparent);
}
.badge-transporte {
  background: linear-gradient(135deg, var(--ink-2) 0%, var(--neon-azul-alt) 100%);
  color: var(--surface);
  font-weight: 700;
  text-shadow: 0 0 2px color-mix(in srgb, var(--ink) 0.2, transparent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--ink-2) 0.3, transparent);
}
.badge-transporte:hover {
  box-shadow: 0 4px 12px color-mix(in srgb, var(--ink-2) 0.5, transparent);
  transform: scale(1.05);
}

.badge-despesas-fixas {
  background: linear-gradient(135deg, var(--ink-2) 0%, var(--neon-azul-alt) 100%);
  color: var(--surface);
  font-weight: 700;
  text-shadow: 0 0 2px color-mix(in srgb, var(--ink) 0.2, transparent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--ink-2) 0.3, transparent);
}
.badge-despesas-fixas:hover {
  box-shadow: 0 4px 12px color-mix(in srgb, var(--ink-2) 0.5, transparent);
  transform: scale(1.05);
}

/* ---- ROXO NEON var(--ink) ---- */
/* Assinaturas, Educação */
.bg-roxo-neon {
  background-color: var(--ink) !important;
}
.text-roxo-neon {
  color: var(--ink) !important;
}
.border-roxo-neon {
  border-color: var(--ink) !important;
}
.shadow-roxo-neon {
  box-shadow: 0 0 12px color-mix(in srgb, var(--ink) 0.4, transparent);
}
.badge-educacao {
  background: linear-gradient(135deg, var(--ink) 0%, var(--neon-roxo-alt) 100%);
  color: var(--surface);
  font-weight: 700;
  text-shadow: 0 0 2px color-mix(in srgb, var(--ink) 0.2, transparent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--ink) 0.3, transparent);
}
.badge-educacao:hover {
  box-shadow: 0 4px 12px color-mix(in srgb, var(--ink) 0.5, transparent);
  transform: scale(1.05);
}

/* ---- LARANJA NEON var(--ink-2) ---- */
/* Combustível, Impostos, Manutenção, Seguros, Taxas, Vestuário */
.bg-laranja-neon {
  background-color: var(--ink-2) !important;
}
.text-laranja-neon {
  color: var(--ink-2) !important;
}
.border-laranja-neon {
  border-color: var(--ink-2) !important;
}
.shadow-laranja-neon {
  box-shadow: 0 0 12px color-mix(in srgb, var(--ink-2) 0.4, transparent);
}
.badge-vestuario {
  background: linear-gradient(135deg, var(--ink-2) 0%, var(--neon-laranja-alt) 100%);
  color: var(--surface);
  font-weight: 700;
  text-shadow: 0 0 2px color-mix(in srgb, var(--ink) 0.2, transparent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--ink-2) 0.3, transparent);
}
.badge-vestuario:hover {
  box-shadow: 0 4px 12px color-mix(in srgb, var(--ink-2) 0.5, transparent);
  transform: scale(1.05);
}

/* ---- VERMELHO NEON var(--critical) ---- */
/* Clínica Veterinária, Farmácia, Saúde */
.bg-vermelho-neon {
  background-color: var(--critical) !important;
}
.text-vermelho-neon {
  color: var(--critical) !important;
}
.border-vermelho-neon {
  border-color: var(--critical) !important;
}
.shadow-vermelho-neon {
  box-shadow: 0 0 12px color-mix(in srgb, var(--critical) 0.4, transparent);
}
.badge-saude {
  background: linear-gradient(135deg, var(--critical) 0%, var(--neon-vermelho-alt) 100%);
  color: var(--surface);
  font-weight: 700;
  text-shadow: 0 0 2px color-mix(in srgb, var(--ink) 0.2, transparent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--critical) 0.3, transparent);
}
.badge-saude:hover {
  box-shadow: 0 4px 12px color-mix(in srgb, var(--critical) 0.5, transparent);
  transform: scale(1.05);
}

/* ---- AMARELO NEON var(--good) ---- */
/* Caixinha, Outras Receitas, Receita, Receitas, Salário, Reembolso */
.bg-amarelo-neon {
  background-color: var(--good) !important;
}
.text-amarelo-neon {
  color: var(--good) !important;
}
.border-amarelo-neon {
  border-color: var(--good) !important;
}
.shadow-amarelo-neon {
  box-shadow: 0 0 12px color-mix(in srgb, var(--good) 0.4, transparent);
}
.badge-receita {
  background: linear-gradient(135deg, var(--good) 0%, var(--neon-amarelo-alt) 100%);
  color: var(--ink);
  font-weight: 700;
  text-shadow: 0 0 2px color-mix(in srgb, var(--ink) 0.2, transparent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--good) 0.3, transparent);
}
.badge-receita:hover {
  box-shadow: 0 4px 12px color-mix(in srgb, var(--good) 0.5, transparent);
  transform: scale(1.05);
}

/* ---- CIANO NEON var(--ink-2) ---- */
/* Delivery, Higiene, Produtos, Serviços, Utilidades, Outros */
.bg-ciano-neon {
  background-color: var(--ink-2) !important;
}
.text-ciano-neon {
  color: var(--ink-2) !important;
}
.border-ciano-neon {
  border-color: var(--ink-2) !important;
}
.shadow-ciano-neon {
  box-shadow: 0 0 12px color-mix(in srgb, var(--ink-2) 0.4, transparent);
}
.badge-outros {
  background: linear-gradient(135deg, var(--ink-2) 0%, var(--neon-ciano-alt) 100%);
  color: var(--ink);
  font-weight: 700;
  text-shadow: 0 0 2px color-mix(in srgb, var(--ink) 0.2, transparent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--ink-2) 0.3, transparent);
}
.badge-outros:hover {
  box-shadow: 0 4px 12px color-mix(in srgb, var(--ink-2) 0.5, transparent);
  transform: scale(1.05);
}

/* ---- LEGACY VIAGEM ( Azul Neon var(--ink-2) ) ---- */
.badge-viagem {
  background: linear-gradient(135deg, var(--ink-2) 0%, var(--neon-azul-fundo) 100%);
  color: var(--surface);
  font-weight: 700;
  text-shadow: 0 0 2px color-mix(in srgb, var(--ink) 0.2, transparent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--ink-2) 0.3, transparent);
}
.badge-viagem:hover {
  background: var(--ink-2);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--ink-2) 0.5, transparent);
  transform: scale(1.05);
}

/* ---- RESTAURANTES ( Rosa Neon var(--critical) ) ---- */
.badge-restaurante {
  background: linear-gradient(135deg, var(--critical) 0%, var(--neon-rosa-alt) 100%);
  color: var(--surface);
  font-weight: 700;
  text-shadow: 0 0 2px color-mix(in srgb, var(--ink) 0.2, transparent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--critical) 0.3, transparent);
}
.badge-restaurante:hover {
  box-shadow: 0 4px 12px color-mix(in srgb, var(--critical) 0.5, transparent);
  transform: scale(1.05);
}

/* ---- SUPERMERCADO ( Verde Neon var(--good) ) ---- */
.badge-supermercado {
  background: var(--good);
  color: var(--ink);
  font-weight: 700;
  text-shadow: 0 0 2px color-mix(in srgb, var(--ink) 0.2, transparent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--good) 0.3, transparent);
}
.badge-supermercado:hover {
  box-shadow: 0 4px 12px color-mix(in srgb, var(--good) 0.5, transparent);
  transform: scale(1.05);
}

/* Impressão — mantém as cores de badge no papel */
@media print {
  .bg-verde-neon, .bg-verde-alt-neon, .bg-rosa-neon, .bg-azul-neon,
  .bg-roxo-neon, .bg-laranja-neon, .bg-vermelho-neon, .bg-amarelo-neon,
  .bg-ciano-neon {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* =========================================
   Month Navigation (Reusable Component)
   ========================================= */

.month-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.625rem 0.75rem;
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--bg) 0.08, transparent);
}

@media screen and (min-width: 480px) {
  .month-nav {
    gap: 0.75rem;
    padding: 0.625rem 1rem;
  }
}

.month-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--color-background-alt);
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.2s;
}

.month-nav-btn:hover {
  background: var(--selecionado-fundo);
  color: var(--selecionado-texto);
}

.month-nav-display {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  min-width: 90px;
  justify-content: center;
}

@media screen and (min-width: 480px) {
  .month-nav-display {
    gap: 0.375rem;
    min-width: 140px;
  }
}

.month-nav-display__name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text);
}

.month-nav-display__year {
  font-weight: 600;
  font-size: var(--font-size-body);
  color: var(--color-text-secondary);
}

.month-nav-mode-group {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.month-nav-mode-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  min-width: 30px;
  padding: 0 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid var(--color-border);
  background: var(--color-background-alt);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.02em;
}

@media screen and (min-width: 480px) {
  .month-nav-mode-btn {
    height: 36px;
    min-width: 36px;
    padding: 0 0.5rem;
    font-size: 0.8125rem;
  }
}

.month-nav-mode-btn:first-child {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.month-nav-mode-btn:last-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.month-nav-mode-btn--active {
  background: var(--selecionado-fundo);
  color: var(--selecionado-texto);
  border-color: var(--selecionado-fundo);
}

/* =========================================
   Metas Page
   ========================================= */

.metas-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 0.625rem 1rem;
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--bg) 0.08, transparent);
}

.metas-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--color-background-alt);
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.2s;
}

.metas-nav-btn:hover {
  background: var(--selecionado-fundo);
  color: var(--selecionado-texto);
}

/* .metas-nav-* classes kept for backward compatibility — new code uses .month-nav-* */
.metas-nav-month {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  min-width: 140px;
  justify-content: center;
}

.metas-nav-month__name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text);
}

.metas-nav-month__year {
  font-weight: 600;
  font-size: var(--font-size-body);
  color: var(--color-text-secondary);
}

.metas-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media screen and (min-width: 640px) {
  .metas-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 900px) {
  .metas-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (min-width: 1200px) {
  .metas-list {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.875rem;
  }
}

.metas-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem;
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
}

.metas-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 3rem 2rem;
  text-align: center;
}

.metas-empty h3 {
  font-size: var(--font-size-body);
  font-weight: 700;
  color: var(--color-text);
}

.metas-empty p {
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
  max-width: 280px;
}

.metas-card {
  background: var(--color-card-bg);
  border-radius: var(--radius-xl);
  border-left: 3px solid var(--color-border);
  box-shadow: var(--shadow);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.3s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0.875rem 1rem;
  gap: 0.5rem;
}

.metas-card:hover {
  box-shadow: 0 8px 24px color-mix(in srgb, var(--bg) 0.1, transparent);
  transform: translateY(-2px);
}

.metas-card--inactive {
  opacity: 0.5;
}

.goal-bar--under { border-left-color: var(--color-primary); }
.goal-bar--ok { border-left-color: var(--color-income); }
.goal-bar--warning { border-left-color: var(--color-warning); }
.goal-bar--over { border-left-color: var(--color-expense); }

.metas-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.metas-card__title-area {
  flex: 1;
  min-width: 0;
}

.metas-card__name {
  font-weight: 700;
  font-size: var(--font-size-body);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.125rem;
}

.metas-card__name span {
  display: inline-block;
  padding: 0 0.375rem;
  border-radius: 3px;
  font-size: 0.625rem;
  font-weight: 600;
  font-family: "IBM Plex Mono", monospace;
  background: var(--color-border);
  color: var(--color-text-secondary);
  vertical-align: middle;
  margin-left: 0.25rem;
}

.metas-card__amounts {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  font-weight: 600;
}

.metas-card__percent {
  font-weight: 700;
  font-size: 1.125rem;
  flex-shrink: 0;
  text-align: right;
  line-height: 1.2;
}

.metas-card__bar {
  height: 8px;
  background: var(--color-border);
  border-radius: 4px;
  overflow: hidden;
}

.metas-card__bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}

.goal-bar--under .metas-card__bar-fill    { background: var(--color-primary); }
.goal-bar--ok .metas-card__bar-fill      { background: var(--color-income); }
.goal-bar--warning .metas-card__bar-fill { background: var(--color-warning, var(--critical)); }
.goal-bar--over .metas-card__bar-fill    { background: var(--color-expense); }

.metas-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.metas-card__restante {
  font-size: 0.8125rem;
  font-weight: 600;
}

.metas-card__notas {
  font-size: 0.6875rem;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50%;
}

.metas-card__actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.metas-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-card-bg);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.metas-card__btn:hover {
  background: var(--color-background-alt);
  border-color: var(--color-text-secondary);
  color: var(--color-text);
}

.metas-card__btn--danger:hover {
  background: color-mix(in srgb, var(--critical) 0.1, transparent);
  color: var(--color-expense);
}

.goal-bar--under .metas-card__bar-fill {
  background: var(--color-primary);
}

.goal-bar--ok .metas-card__bar-fill {
  background: var(--color-income);
}

.goal-bar--warning .metas-card__bar-fill {
  background: var(--color-warning, var(--critical));
}

.goal-bar--over .metas-card__bar-fill {
  background: var(--color-expense);
}

@media screen and (min-width: 769px) {
  .metas-nav-month,
  .month-nav-display {
    min-width: 180px;
  }
}

@media screen and (min-width: 769px) {
  .metas-card {
    padding: 0.75rem 0.875rem;
    gap: 0.5rem;
  }
}

@media screen and (min-width: 1200px) {
  .metas-card {
    padding: 0.625rem 0.75rem;
    gap: 0.375rem;
  }
  .metas-card__name {
    font-size: var(--font-size-caption);
  }
  .metas-card__amounts {
    font-size: 0.6875rem;
  }
  .metas-card__percent {
    font-size: var(--font-size-body);
  }
  .metas-card__bar {
    height: 6px;
  }
  .metas-card__restante {
    font-size: 0.6875rem;
  }
  .metas-card__notas {
    display: none;
  }
}

/* =========================================
   Categorias Page
   ========================================= */

.cat-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.cat-card:hover {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--bg) 0.08, transparent);
}

.cat-card-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.25rem;
  border-left: 4px solid transparent;
}

.cat-card-header--despesa {
  border-left-color: var(--color-expense);
}

.cat-card-header--receita {
  border-left-color: var(--color-income);
}

.cat-card-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.cat-card-body {
  flex: 1;
  min-width: 0;
}

.cat-card-name {
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-text);
  margin-bottom: 2px;
}

.cat-card-meta {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}

.cat-card-badge {
  font-size: 0.7rem;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  color: var(--ink);
  font-weight: 500;
}

.cat-card-badge--despesa {
  background: var(--color-expense);
}

.cat-card-badge--receita {
  background: var(--color-income);
}

/* Natureza da categoria (fixo | variável) — selo clicável que alterna a marcação */
.cat-card-badge--fixo,
.cat-card-badge--variavel {
  cursor: pointer;
  border: 1px solid currentColor;
}

.cat-card-badge--fixo {
  background: var(--committed-soft);
  color: var(--committed);
}

.cat-card-badge--variavel {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.cat-sub-list {
  border-top: 1px solid var(--color-border);
}

.cat-sub-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.25rem 0.7rem 3rem;
  font-size: 0.9rem;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  transition: background 0.15s;
  cursor: default;
}

.cat-sub-item:last-child {
  border-bottom: none;
}

.cat-sub-item:hover {
  background: var(--color-background-alt);
}

.cat-sub-bullet {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text-tertiary);
  flex-shrink: 0;
  opacity: 0.4;
}

.cat-empty {
  padding: 0.85rem 1.25rem 0.85rem 3.4rem;
  color: var(--color-text-tertiary);
  font-size: 0.85rem;
  font-style: italic;
  border-top: 1px solid var(--color-border);
}

.cat-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media screen and (min-width: 769px) {
  .cat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}