/* ContaBase Metas Styles */

/* === ICONE COLORIDO === */
.icon-colored {
    color: var(--ic, #8b5cf6);
}

/* === P.40.a — Helpers visuais para redesign de /metas ===
   Classes preparatórias; markup existente permanece inalterado. */

.metas-card-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--ui-text);
  font-size: 0.9375rem;
  font-weight: 620;
  line-height: 1.3;
}

/* O nome pode ocupar duas linhas em qualquer largura; o card não depende mais
   de uma única linha com reticências no mobile. */
.metas-card-subtitle {
  margin: 0;
  overflow: hidden;
  color: var(--ui-text-muted);
  font-size: 0.75rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metas-empty-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ui-surface-raised);
  color: var(--ui-text-muted);
}

/* === M3 — Indicadores financeiros Premium ===
   Um único painel canônico (.ui-panel) reúne os indicadores de cada aba. Os
   valores usam o contrato .ui-kpi (label/value/meta, tabular-nums) sem repetir
   a superfície do card: as métricas são separadas por hairlines dentro do
   painel. A grade é uma composição local com container queries; .ui-kpi
   global permanece intocado. */
.metas-overview {
  margin-bottom: 16px;
  overflow: hidden;
  container: metas-overview / inline-size;
}

.metas-overview__head.ui-section-heading {
  margin: 0;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ui-border);
}

.metas-overview__grid.ui-kpi-grid {
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
}

.metas-overview__metric.ui-kpi {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: baseline;
  gap: 2px 16px;
  min-width: 0;
  padding: 12px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.metas-overview__metric .ui-kpi__head {
  grid-column: 1;
  min-width: 0;
}

.metas-overview__metric .ui-kpi__label {
  line-height: 1.25;
}

.metas-overview__metric .ui-kpi__value {
  grid-column: 1;
  justify-self: start;
  overflow: visible;
  text-align: left;
  text-overflow: clip;
  font-size: 18px;
  white-space: nowrap;
}

.metas-overview__metric--primary .ui-kpi__value {
  font-size: 20px;
}

.metas-overview__metric .ui-kpi__meta {
  grid-column: 1 / -1;
  line-height: 1.4;
}

.metas-overview__source {
  margin-top: -1px;
}

.metas-overview__metric + .metas-overview__metric {
  border-top: 1px solid var(--ui-border);
}

@container metas-overview (max-width: 559px) {
  .metas-overview__head.ui-section-heading {
    padding: 13px 14px;
  }
}

@container metas-overview (min-width: 560px) {
  .metas-overview__grid--2.ui-kpi-grid,
  .metas-overview__grid--3.ui-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metas-overview__grid--2 .metas-overview__metric.ui-kpi,
  .metas-overview__grid--3 .metas-overview__metric.ui-kpi {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
    padding: 14px 18px;
  }

  .metas-overview__grid--2 .metas-overview__metric .ui-kpi__head,
  .metas-overview__grid--2 .metas-overview__metric .ui-kpi__value,
  .metas-overview__grid--3 .metas-overview__metric .ui-kpi__head,
  .metas-overview__grid--3 .metas-overview__metric .ui-kpi__value {
    grid-column: 1;
  }

  .metas-overview__grid--2 .metas-overview__metric .ui-kpi__value,
  .metas-overview__grid--3 .metas-overview__metric .ui-kpi__value {
    justify-self: start;
    text-align: left;
    font-size: 20px;
  }

  .metas-overview__grid--2 .metas-overview__metric--primary .ui-kpi__value,
  .metas-overview__grid--3 .metas-overview__metric--primary .ui-kpi__value {
    font-size: 23px;
  }

  .metas-overview__grid--1 .metas-overview__metric.ui-kpi {
    padding: 14px 18px;
  }

  .metas-overview__grid--1 .metas-overview__metric--primary .ui-kpi__value {
    font-size: 23px;
  }

  .metas-overview__grid--2 .metas-overview__metric.ui-kpi:nth-child(2),
  .metas-overview__grid--3 .metas-overview__metric.ui-kpi:nth-child(2) {
    border-top: 0;
    border-left: 1px solid var(--ui-border);
  }

  .metas-overview__grid--3 .metas-overview__metric.ui-kpi:nth-child(3) {
    grid-column: 1 / -1;
    border-left: 0;
  }

  /* O último card do grid móvel do Premium ocupa a linha inteira; aqui a
     composição controla a quebra por container, não por viewport. */
  .metas-overview__grid.ui-kpi-grid .metas-overview__metric.ui-kpi:last-child {
    grid-column: auto;
  }

  .metas-overview__grid--3.ui-kpi-grid .metas-overview__metric.ui-kpi:last-child {
    grid-column: 1 / -1;
  }
}

@container metas-overview (min-width: 940px) {
  .metas-overview__grid--3.ui-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .metas-overview__grid--3 .metas-overview__metric.ui-kpi {
    grid-column: auto;
    border-top: 0;
    border-left: 1px solid var(--ui-border);
  }

  .metas-overview__grid--3 .metas-overview__metric.ui-kpi:first-child {
    border-left: 0;
  }

  .metas-overview__grid--3 .metas-overview__metric.ui-kpi:nth-child(3) {
    grid-column: auto;
    border-left: 1px solid var(--ui-border);
  }

  .metas-overview__grid--3.ui-kpi-grid .metas-overview__metric.ui-kpi:last-child {
    grid-column: auto;
  }
}

/* Menu flutuante do card: superfície elevada canônica, sem hex fixo.
   Abre para cima em todas as larguras para não sair da tela no mobile. */
.metas-menu-panel {
  position: absolute;
  bottom: calc(100% + 0.25rem);
  right: 0;
  left: auto;
  top: auto;
  z-index: 30;
  min-width: 11rem;
  background: var(--ui-surface-raised);
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-card);
  padding: 0.375rem;
  box-shadow: var(--ui-shadow-floating);
}

/* === Cards de Limites e Reservas ===
   O card é uma superfície própria da página (não um KPI nem uma linha de lista):
   raio de card, borda canônica, um único destaque monetário e metadados
   separados por uma hairline. Tudo consome --ui-*; não há paleta paralela. */

.metas-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-card);
  background: var(--ui-surface);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ui-text) 4%, transparent);
  isolation: isolate;
  transition: border-color var(--ui-transition), background-color var(--ui-transition), box-shadow var(--ui-transition);
}

@media (hover: hover) {
  .metas-card:hover {
    border-color: var(--ui-border-strong);
    background: var(--ui-surface-raised);
    box-shadow: var(--ui-shadow-panel);
  }
}

.metas-card:focus-within {
  border-color: var(--ui-border-strong);
}

/* O card inteiro é um link para o histórico; o foco de teclado desenha o
   outline no próprio card, não um anel violeta dentro dele. */
.metas-card__link {
  border-radius: inherit;
  outline: none;
}

.metas-card:has(.metas-card__link:focus-visible) {
  outline: 2px solid var(--ui-focus);
  outline-offset: -2px;
}

/* Enquanto o menu está aberto, o card precisa pintar acima dos irmãos; o
   hover não cria mais stacking context por transform. */
.metas-card:has([data-caixinha-dropdown].is-open) {
  z-index: var(--v2-z-navigation, 20);
}

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

.metas-card__identity {
  display: flex;
  flex: 1 1 auto;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
}

.metas-card__icon {
  width: 2rem;
  height: 2rem;
  border-radius: var(--ui-radius-tile);
}

.metas-card__icon svg {
  width: 1rem;
  height: 1rem;
}

.metas-card__copy {
  display: grid;
  gap: 0.1875rem;
  min-width: 0;
}

.metas-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  min-width: 0;
}

.metas-card__category {
  min-width: 0;
}

.metas-card__badge {
  flex: 0 0 auto;
}

.metas-card__menu {
  flex: 0 0 auto;
}

.metas-card__menu-toggle {
  width: 2rem;
  height: 2rem;
  border-radius: var(--ui-radius-tile);
  color: var(--ui-text-muted);
  background: transparent;
  border: 1px solid transparent;
}

.metas-card__menu-toggle svg {
  width: 1rem;
  height: 1rem;
}

.metas-card__menu-toggle:hover {
  background: var(--ui-surface-hover);
  color: var(--ui-text);
  border-color: var(--ui-border-subtle);
}

.metas-card__menu-toggle:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
}

.metas-card__amount {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  min-width: 0;
}

.metas-card__balance {
  min-width: 0;
}

.metas-card__target {
  min-width: 0;
  text-align: right;
}

.metas-box-label {
  margin: 0 0 0.125rem;
  color: var(--ui-text-muted);
  font-size: 0.71875rem;
  font-weight: 600;
  line-height: 1.25;
}

.metas-box-value {
  margin: 0;
  color: var(--ui-text);
  font-size: 1.375rem;
  font-weight: 680;
  letter-spacing: -0.02em;
  line-height: 1.15;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* O número dominante permanece neutro nos estados tranquilos; a cor de
   estado só entra quando exige atenção (âmbar/vermelho). */
.metas-box-value-attention { color: var(--v2-tone-attention); }
.metas-box-value-near      { color: var(--v2-tone-near); }
.metas-box-value-exceeded  { color: var(--v2-tone-exceeded); }

.metas-box-target {
  margin: 0;
  color: var(--ui-text-muted);
  font-size: 0.84375rem;
  font-weight: 620;
  line-height: 1.25;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.metas-box-target-empty {
  color: var(--ui-text-subtle);
  font-weight: 500;
}

.metas-card__progress {
  pointer-events: none;
}

/* Barra com chip de percentual apoiado sobre o trilho.
   --metas-p recebe o percentual via data-metas-p (runtime), CSP impede style= no template.
   O wrap é o container de largura para que o clamp abaixo possa medir o trilho (cqw)
   sem depender de px fixos. */
.metas-progress-wrap {
  position: relative;
  container-type: inline-size;
  --metas-p: 0;
}

.metas-progress-wrap .metas-progress {
  display: block;
}

.metas-progress {
  height: 0.375rem;
  width: 100%;
  margin: 0;
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 9999px;
  background-color: var(--metas-progress-track, var(--ui-progress-track));
  --metas-progress-track: var(--ui-progress-track);
}

.metas-progress::-webkit-progress-bar {
  background-color: var(--metas-progress-track);
  border-radius: 9999px;
}

.metas-progress::-webkit-progress-value {
  background-color: var(--metas-progress-value, var(--ui-accent));
  border-radius: 9999px;
  transition: width 0.5s ease;
}

.metas-progress::-moz-progress-bar {
  background-color: var(--metas-progress-value, var(--ui-accent));
  border-radius: 9999px;
  transition: width 0.5s ease;
}

/* Tons semânticos da barra (regra única em ui_tones.go): a cor comunica
   estado/progresso — nunca a cor decorativa da categoria do ícone.
   70–99% usa um verde mais suave; 100%+, o verde firme de conclusão. */
.metas-progress-tone-initial   { --metas-progress-value: var(--v2-tone-initial); }
.metas-progress-tone-info      { --metas-progress-value: var(--v2-tone-info); }
.metas-progress-tone-ok        { --metas-progress-value: color-mix(in srgb, var(--v2-tone-ok) 72%, var(--v2-muted)); }
.metas-progress-tone-complete  { --metas-progress-value: var(--v2-tone-complete); }
.metas-progress-tone-attention { --metas-progress-value: var(--v2-tone-attention); }
.metas-progress-tone-near      { --metas-progress-value: var(--v2-tone-near); }
.metas-progress-tone-exceeded  { --metas-progress-value: var(--v2-tone-exceeded); }

/* O chip fica centrado na posição do progresso e nunca atravessa as extremidades:
   o clamp limita o centro do chip à faixa [metade do chip, trilho - metade do chip].
   Cada metade vem do próprio elemento (`50%` em `translate` resolve contra a largura
   real do chip), então qualquer rótulo — "0%", "100% do alvo", "Excedido" — permanece
   inteiro dentro do trilho em qualquer largura de card. */
.metas-progress-chip {
  position: absolute;
  top: 50%;
  left: 0;
  translate: calc(clamp(50%, calc(var(--metas-p) * 1cqw), calc(100cqw - 50%)) - 50%) 0;
  transform: translateY(-50%);
  padding: 0.1875rem 0.4375rem;
  border-radius: 9999px;
  border: 1px solid var(--metas-progress-value, var(--ui-accent));
  background-color: var(--ui-surface);
  color: var(--metas-progress-value, var(--ui-accent));
  font-size: 0.6875rem;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ui-text) 12%, transparent);
  transition: translate 0.5s ease;
}

@media (prefers-reduced-motion: reduce) {
  .metas-card,
  .metas-card__menu-toggle { transition: none; }
  .metas-progress-chip { transition: none; }
  .metas-progress::-webkit-progress-value,
  .metas-progress::-moz-progress-bar { transition: none; }
}

.metas-card__facts,
.metas-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 1rem;
  padding-top: 0.5625rem;
  border-top: 1px solid var(--ui-border);
  color: var(--ui-text-muted);
  font-size: 0.75rem;
  line-height: 1.35;
}

.metas-card__facts {
  justify-content: space-between;
}

.metas-card__fact {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3125rem;
  min-width: 0;
}

.metas-card__fact-label {
  color: var(--ui-text-subtle);
  font-weight: 500;
  white-space: nowrap;
}

.metas-card__fact-value {
  color: var(--ui-text);
  font-size: 0.78125rem;
  font-weight: 620;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.metas-card__footer-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  white-space: nowrap;
}

.metas-card__footer-item svg {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  color: var(--ui-text-subtle);
}

.metas-box-foot-value {
  color: var(--ui-text);
  font-weight: 620;
  font-variant-numeric: tabular-nums;
}

/* Metas e Reservas inside the authenticated V2 shell.
   Existing component semantics are retained; these rules only map their visual
   surface to the global shell tokens. */
.cb-v2-metas-content {
  width: min(100%, 1180px);
  margin: 0 auto;
  padding: 30px 0 12px;
}

/* Header: composição e tipografia vêm de .ui-page-header/.ui-eyebrow/
   .ui-page-title/.ui-page-description (premium.css); aqui fica só o que é
   específico da composição desta página. */
.cb-v2-metas-header {
  min-width: 0;
}

.cb-v2-metas-header .cb-v2-metas-new {
  flex: 0 0 auto;
}

.cb-v2-metas-new svg { width: 16px; height: 16px; }

.cb-v2-metas-panels { min-width: 0; }
/* A geometria e o estado ativo das tabs vêm de design-system.css (.cb-tabs).
   Aqui fica só a composição desta página. */
.cb-v2-metas-panels .cb-tabs {
  width: min(100%, 360px);
  margin-bottom: 18px;
}

/* Itens do menu usam o componente compartilhado, com a densidade e os tokens
   Premium no escopo de Metas. O painel de Relatórios não é afetado. */
.metas-menu-panel .cb-meta-menu-item {
  min-height: 2.5rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--ui-radius-xs);
  color: var(--ui-text);
  font-size: 0.78125rem;
  font-weight: 560;
}

.metas-menu-panel .cb-meta-menu-item:hover {
  background: var(--ui-surface-hover);
}

.metas-menu-panel .cb-meta-menu-item:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: -2px;
}

.metas-menu-panel .cb-meta-menu-item:disabled {
  opacity: var(--ui-disabled-opacity);
  cursor: not-allowed;
}

@media (max-width: 1023px) {
  /* Em telas touch (mobile e tablet) a área de toque do menu cresce para 44px
     sem aumentar o ícone nem deslocar o título; a margem negativa mantém o
     alinhamento óptico do botão de 28px aprovado no desktop. */
  .metas-card__menu { margin: -0.5rem -0.5rem 0 0; }
  .metas-card__menu-toggle { width: 2.75rem; height: 2.75rem; }
  .metas-menu-panel .cb-meta-menu-item { min-height: 2.75rem; }

  /* Tabs e controle de privacidade são ações de toque no shell mobile/tablet.
     A geometria desktop de 38px/34px permanece a aprovada na M2/M4. */
  .cb-v2-metas-panels .cb-tabs .cb-tab { min-height: 2.75rem; }
  .cb-v2-metas-header [data-privacy-toggle],
  .cb-v2-metas-header #metas-primary-action {
    min-height: 2.75rem;
  }
  .cb-v2-metas-header [data-privacy-toggle] {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
  }
}

@media (max-width: 767px) {
  .cb-v2-metas-content { padding-top: 20px; }
  .cb-v2-metas-header { align-items: flex-start; }
  .cb-v2-metas-new { position: relative; min-width: 44px; padding: 0 11px; }
  /* O rótulo continua sendo o nome acessível do botão mesmo sem espaço
     visual: oculto apenas para a tela, não para tecnologias assistivas. */
  .cb-v2-metas-new span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .cb-v2-metas-panels .cb-tabs { width: 100%; }
  .metas-card { padding: 0.875rem; gap: 0.6875rem; }
}

/* === M5 — Históricos de reservas e limites ===
   A composição usa os componentes compartilhados .ui-list-panel/.ui-row/
   .ui-badge/.ui-empty. Este bloco cobre apenas o cabeçalho do sheet, a
   densidade da linha e a direção visual dos valores; não redefine .ui-row
   nem .ui-list-panel fora dos históricos. */
.metas-history__sheet { outline: none; }

.metas-history__head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.125rem 1.25rem 0.875rem;
}

.metas-history__tile {
  display: grid;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--ui-radius-tile);
}

.metas-history__tile svg { width: 1.125rem; height: 1.125rem; }

.metas-history__tile--accent {
  border-color: color-mix(in srgb, var(--ui-accent) 24%, transparent);
  background: var(--ui-accent-soft);
  color: var(--ui-accent-strong);
}

.metas-history__copy {
  display: grid;
  flex: 1 1 auto;
  gap: 0.125rem;
  min-width: 0;
}

.metas-history__eyebrow,
.metas-history__title,
.metas-history__subtitle,
.metas-history__summary {
  margin: 0;
}

.metas-history__eyebrow {
  color: var(--ui-text-subtle);
  font-size: 0.625rem;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.metas-history__title {
  overflow: hidden;
  color: var(--ui-text);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metas-history__subtitle,
.metas-history__summary {
  color: var(--ui-text-muted);
  font-size: 0.71875rem;
  line-height: 1.45;
}

.metas-history__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.1875rem 0.375rem;
}

.metas-history__summary-item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  white-space: nowrap;
}

.metas-history__figure {
  display: inline-block;
  color: var(--ui-text);
  font-weight: 620;
  font-variant-numeric: tabular-nums;
}

.metas-history__percent { font-variant-numeric: tabular-nums; }

.metas-history__close {
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  min-height: 2.75rem;
  margin: -0.375rem -0.5rem 0 0;
  padding: 0;
  border-radius: var(--ui-radius-pill);
}

.metas-history__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 1rem calc(1.25rem + env(safe-area-inset-bottom));
  scrollbar-gutter: stable;
}

.metas-history__body:focus-visible {
  border-radius: var(--ui-radius-card);
  outline: 2px solid var(--ui-focus);
  outline-offset: -2px;
}

.metas-history__panel { box-shadow: none; }

.metas-history__panel-head { padding: 0.6875rem 0.875rem; }

.metas-history__panel-title {
  margin: 0;
  color: var(--ui-text);
  font-size: 0.71875rem;
  font-weight: 620;
  line-height: 1.35;
}

.metas-history__row { padding: 0.75rem 0.875rem; }

.metas-history__mark {
  cursor: default;
}

.metas-history__mark:hover { filter: none; }
.metas-history__mark:active { transform: none; }

.metas-history__mark--accent {
  background: color-mix(in srgb, var(--ui-accent) 12%, var(--ui-surface-raised));
  color: var(--ui-accent-strong);
}

.metas-history__mark--info {
  background: color-mix(in srgb, var(--ui-info) 12%, var(--ui-surface-raised));
  color: var(--ui-info);
}

.metas-history__mark--warning {
  background: color-mix(in srgb, var(--ui-warning) 13%, var(--ui-surface-raised));
  color: var(--ui-warning);
}

.metas-history__mark--success {
  background: color-mix(in srgb, var(--ui-success) 12%, var(--ui-surface-raised));
  color: var(--ui-success);
}

.metas-history__mark--neutral {
  background: var(--ui-surface-raised);
  color: var(--ui-text-subtle);
}

.metas-history__description {
  display: -webkit-box;
  overflow: hidden;
  overflow-wrap: anywhere;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.metas-history__meta {
  gap: 0.25rem 0.375rem;
  color: var(--ui-text-muted);
}
.metas-history__type { font-variant-numeric: normal; }
.metas-history__date { white-space: nowrap; }
.metas-history__account { overflow-wrap: anywhere; }

.metas-history__amount--credit { color: var(--ui-success); }
.metas-history__amount--debit,
.metas-history__amount--expense { color: var(--ui-danger); }

.metas-history__empty { background: color-mix(in srgb, var(--ui-surface) 70%, transparent); }

@media (max-width: 767px) {
  .metas-history__head {
    gap: 0.625rem;
    padding: 1rem 1rem 0.75rem;
  }

  .metas-history__body { padding: 0 0.875rem calc(1.125rem + env(safe-area-inset-bottom)); }
  .metas-history__panel-head { padding: 0.625rem 0.75rem; }
  .metas-history__row { padding: 0.75rem 0.875rem; }
}

@media (min-width: 768px) {
  .metas-history__body { padding: 0 1.25rem calc(1.375rem + env(safe-area-inset-bottom)); }
  .metas-history__panel-head { padding: 0.75rem 1.125rem; }
  .metas-history__row { padding: 0.8125rem 1.125rem; }
}

/* Em 320–389px o valor ganha uma linha própria para não comprimir a
   descrição nem o contexto da conta. */
@media (max-width: 389px) {
  .metas-history__row {
    grid-template-columns: 2.75rem minmax(0, 1fr);
    row-gap: 0.375rem;
  }

  .metas-history__mark { align-self: start; }

  .metas-history__amount {
    grid-column: 1 / -1;
    justify-self: end;
  }
}

/* === PRIVACIDADE ===
   Reusa o estado global (sessionStorage contabasePrivacy + body
   .privacy-enabled gerido por privacy.js), no mesmo padrão de Faturas e
   Lançamentos: o valor mantém a caixa, então o layout não pula. O escopo
   cobre a página (.cb-v2-metas-main) e os sheets injetados em
   #bottom-sheet-container por rotas de /metas ([data-metas-sheet]).
   Inputs editáveis NÃO são mascarados: o modo atua sobre a apresentação de
   valores exibidos, nunca sobre a edição ou o dado enviado ao backend. */
.privacy-enabled .cb-v2-metas-main [data-sensitive],
.privacy-enabled [data-metas-sheet] [data-sensitive] {
  visibility: hidden;
  user-select: none;
}

.privacy-enabled .cb-v2-metas-main :is(strong, span, p, small, div, dd, b)[data-sensitive],
.privacy-enabled [data-metas-sheet] :is(strong, span, p, small, div, dd, b)[data-sensitive] {
  position: relative;
}

.privacy-enabled .cb-v2-metas-main :is(strong, span, p, small, div, dd, b)[data-sensitive]::after,
.privacy-enabled [data-metas-sheet] :is(strong, span, p, small, div, dd, b)[data-sensitive]::after {
  content: "••••";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  visibility: visible;
  color: var(--ui-text-muted);
  font-variant-numeric: normal;
  letter-spacing: .12em;
}

/* Valores que fecham a linha à direita (alvo dos cards, valores do histórico)
   mascaram alinhados à direita, como o ui-row__amount. O saldo/disponível do
   card é alinhado à esquerda e mantém a máscara à esquerda. */
.privacy-enabled .cb-v2-metas-main .metas-box-target[data-sensitive]::after,
.privacy-enabled [data-metas-sheet] .cb-card-muted span[data-sensitive]::after {
  justify-content: flex-end;
}

.privacy-enabled [data-metas-sheet] .metas-history__amount[data-sensitive]::after {
  justify-content: flex-end;
}

.privacy-enabled .cb-v2-metas-main .metas-box-value[data-sensitive]::after {
  justify-content: flex-start;
}

/* Indicadores: no layout de linha (mobile e painel de uma métrica), o valor
   fecha a linha à direita; a máscara acompanha. A partir de 560px as métricas
   de 2/3 colunas empilham o valor à esquerda. */
.privacy-enabled .cb-v2-metas-main .metas-overview__metric .ui-kpi__value[data-sensitive]::after {
  justify-content: flex-end;
}

@container metas-overview (min-width: 560px) {
  .privacy-enabled .cb-v2-metas-main .metas-overview__grid--2 .metas-overview__metric .ui-kpi__value[data-sensitive]::after,
  .privacy-enabled .cb-v2-metas-main .metas-overview__grid--3 .metas-overview__metric .ui-kpi__value[data-sensitive]::after {
    justify-content: flex-start;
  }
}

/* No tablet, a terceira métrica volta a fechar a linha à direita. */
@container metas-overview (min-width: 560px) and (max-width: 939px) {
  .privacy-enabled .cb-v2-metas-main .metas-overview__grid--3 .metas-overview__metric.ui-kpi:nth-child(3) .ui-kpi__value[data-sensitive]::after {
    justify-content: flex-end;
  }
}

/* === M6 — Formulários e bottom sheets de escrita ===
   A composição usa os fundamentos compartilhados (.ui-input/.ui-btn/.ui-tabs/
   .ui-label) e mantém apenas o que é próprio dos sheets de /metas: geometria
   do diálogo, corpo rolável, rodapé fixo e os campos financeiros. O bloco é
   escopado por .metas-sheet/.metas-form; nada global é redefinido. */
.metas-sheet {
  --metas-sheet-max: 28rem;
}

.metas-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, black 62%, transparent);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.metas-sheet__layer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
}

.metas-sheet__dialog {
  position: relative;
  display: flex;
  width: 100%;
  max-width: var(--metas-sheet-max);
  max-height: 92vh;
  max-height: 92dvh;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-panel) var(--ui-radius-panel) 0 0;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-floating);
  outline: none;
  animation: metasSheetIn 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

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

.metas-sheet__handle {
  width: 2.5rem;
  height: 0.25rem;
  flex: 0 0 auto;
  margin: 0.75rem auto 0;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-border-strong);
}

.metas-sheet__head {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 1rem 0.75rem;
}

.metas-sheet__tile {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--ui-radius-tile);
}

.metas-sheet__tile svg {
  width: 1.125rem;
  height: 1.125rem;
}

.metas-sheet__tile--accent {
  border-color: color-mix(in srgb, var(--ui-accent) 24%, transparent);
  background: var(--ui-accent-soft);
  color: var(--ui-accent-strong);
}

.metas-sheet__tile--warning {
  border-color: color-mix(in srgb, var(--ui-warning) 28%, transparent);
  background: color-mix(in srgb, var(--ui-warning) 11%, var(--ui-surface));
  color: var(--ui-warning);
}

.metas-sheet__copy {
  display: grid;
  flex: 1 1 auto;
  gap: 0.125rem;
  min-width: 0;
}

.metas-sheet__eyebrow,
.metas-sheet__title,
.metas-sheet__subtitle {
  margin: 0;
}

.metas-sheet__eyebrow {
  color: var(--ui-text-subtle);
  font-size: 0.625rem;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.metas-sheet__title {
  overflow: hidden;
  color: var(--ui-text);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metas-sheet__subtitle {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ui-text-muted);
  font-size: 0.71875rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.metas-sheet__close {
  width: 2.75rem;
  height: 2.75rem;
  min-height: 2.75rem;
  flex: 0 0 auto;
  margin: -0.25rem -0.5rem 0 0;
  padding: 0;
  border-radius: var(--ui-radius-pill);
}

.metas-sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 1rem 0.75rem;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.metas-sheet__body:focus-visible {
  border-radius: var(--ui-radius-control);
  outline: 2px solid var(--ui-focus);
  outline-offset: -2px;
}

.metas-sheet__footer {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 0.625rem;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--ui-border);
  background: var(--ui-surface);
}

.metas-sheet__btn {
  min-height: 48px;
}

.metas-sheet__btn--cancel {
  min-width: 6rem;
}

.metas-sheet__btn--primary {
  min-width: 9.5rem;
}

.metas-form {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.metas-form.hidden {
  display: none;
}

.metas-form__tabs {
  margin: 0 0 0.25rem;
}

.metas-form__tab {
  min-height: 44px;
}

.metas-form__field {
  display: grid;
  gap: 0.375rem;
  min-width: 0;
}

.metas-form__field--amount {
  margin-top: 0.25rem;
}

.metas-form__control {
  min-height: 44px;
}

.metas-form__money {
  text-align: left;
  font-variant-numeric: tabular-nums;
  font-weight: 620;
  letter-spacing: 0.01em;
}

.metas-form__amount-input {
  min-height: 58px;
  padding-inline: 1rem;
  text-align: center;
  font-size: clamp(24px, 6.4vw, 30px);
  font-weight: 660;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.metas-form__picker {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0 0.75rem 0 0.875rem;
  text-align: left;
  cursor: pointer;
}

.metas-form__picker-main {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.625rem;
}

.metas-form__picker-icon {
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--ui-radius-tile);
}

.metas-form__picker-icon svg {
  width: 15px;
  height: 15px;
}

.metas-form__picker-name {
  min-width: 0;
  overflow: hidden;
  color: var(--ui-text);
  font-size: 0.8125rem;
  font-weight: 620;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metas-form__picker-chevron {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--ui-text-subtle);
}

.metas-form__field-error {
  color: var(--ui-danger);
  font-size: 0.71875rem;
  line-height: 1.45;
}

.metas-form__field-error.hidden {
  display: none;
}

.metas-form__hint {
  margin: 0;
  color: var(--ui-text-muted);
  font-size: 0.6875rem;
  line-height: 1.5;
}

.metas-form__link-action {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 0.25rem;
  justify-self: start;
  margin-top: 0.125rem;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--ui-text-muted);
  font: inherit;
  font-size: 0.71875rem;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--ui-transition);
}

.metas-form__link-action svg {
  width: 13px;
  height: 13px;
}

.metas-form__link-action:hover {
  color: var(--ui-danger);
}

.metas-form__link-action:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
}

.metas-form__summary {
  display: grid;
  gap: 0.5rem;
  margin: 0.25rem 0;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface-raised);
}

.metas-form__summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.75rem;
  line-height: 1.4;
}

.metas-form__summary-label {
  color: var(--ui-text-muted);
}

.metas-form__summary-value {
  min-width: 0;
  color: var(--ui-text);
  font-weight: 620;
  text-align: right;
  overflow-wrap: anywhere;
}

.metas-form__summary-value--money {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.metas-form__summary .metas-form__hint {
  margin-top: 0.125rem;
}

.metas-form__notice {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.75rem 0 0.25rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-control);
  font-size: 0.71875rem;
  line-height: 1.5;
}

.metas-form__notice svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  margin-top: 1px;
}

.metas-form__notice p {
  margin: 0;
}

.metas-form__notice--warning {
  border-color: color-mix(in srgb, var(--ui-warning) 30%, var(--ui-border));
  background: color-mix(in srgb, var(--ui-warning) 9%, var(--ui-surface));
  color: var(--ui-warning);
}

.metas-form__alert,
[data-metas-sheet] [id="limite-form-error"]:not(.hidden),
[data-metas-sheet] [id="caixinha-form-error"]:not(.hidden) {
  margin: 0 0 0.25rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--ui-danger) 38%, var(--ui-border));
  border-radius: var(--ui-radius-control);
  background: color-mix(in srgb, var(--ui-danger) 9%, var(--ui-surface));
  color: color-mix(in srgb, var(--ui-danger) 65%, var(--ui-text));
  font-size: 0.75rem;
  line-height: 1.45;
}

.metas-form__alert:focus {
  outline: none;
}

.metas-form__alert:focus-visible {
  outline: 2px solid var(--ui-danger);
  outline-offset: 2px;
}

.metas-form__danger-zone {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  margin-top: 0.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ui-border);
}

.metas-form__danger-copy {
  min-width: 0;
}

.metas-form__danger-title {
  margin: 0;
  color: var(--ui-text);
  font-size: 0.75rem;
  font-weight: 620;
}

.metas-form__danger-help {
  margin: 0.125rem 0 0;
  color: var(--ui-text-muted);
  font-size: 0.6875rem;
}

.metas-form__danger-action {
  min-height: 44px;
  border-color: color-mix(in srgb, var(--ui-danger) 30%, var(--ui-border));
  background: color-mix(in srgb, var(--ui-danger) 8%, var(--ui-surface));
  color: color-mix(in srgb, var(--ui-danger) 65%, var(--ui-text));
  font-weight: 620;
}

.metas-form__danger-action:hover {
  border-color: color-mix(in srgb, var(--ui-danger) 44%, var(--ui-border));
  background: color-mix(in srgb, var(--ui-danger) 12%, var(--ui-surface));
  color: color-mix(in srgb, var(--ui-danger) 65%, var(--ui-text));
}

.metas-form__danger-action:focus-visible {
  outline-color: var(--ui-danger);
}

.metas-form__suffix {
  position: relative;
  display: flex;
  align-items: center;
}

.metas-form__suffix-input {
  padding-right: 3.25rem;
}

.metas-form__suffix-text {
  position: absolute;
  top: 50%;
  right: 0.875rem;
  display: flex;
  align-items: center;
  color: var(--ui-text-muted);
  font-size: 0.71875rem;
  font-weight: 600;
  pointer-events: none;
  transform: translateY(-50%);
}

.metas-form__suffix--date .metas-form__suffix-input {
  padding-right: 2.25rem;
}

html[data-theme="dark"] .metas-form__suffix--date input {
  color-scheme: dark;
}

html[data-theme="light"] .metas-form__suffix--date input {
  color-scheme: light;
}

.metas-form .cb-icon-picker {
  margin-top: 0.25rem;
}

.metas-form .cb-icon-trigger:focus-visible {
  outline-color: var(--ui-focus);
}

/* O foco de mouse/toque é uma borda neutra e discreta; o teclado recebe o
   outline canônico de 2px. O estado de erro tem cor própria e não se confunde
   com o foco normal. */
.metas-form__control:focus,
.metas-form__picker:focus,
.metas-form__suffix-input:focus {
  border-color: var(--ui-field-focus-border);
  outline: none;
  box-shadow: none;
}

html[data-input-modality="keyboard"] .metas-form__control:focus,
html[data-input-modality="keyboard"] .metas-form__picker:focus,
html[data-input-modality="keyboard"] .metas-form__suffix-input:focus {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
}

.metas-form__control[aria-invalid="true"],
.metas-form__picker[aria-invalid="true"],
.metas-form__amount-input[aria-invalid="true"] {
  border-color: color-mix(in srgb, var(--ui-danger) 55%, var(--ui-border));
  background: color-mix(in srgb, var(--ui-danger) 6%, var(--ui-field-bg));
}

.metas-form__control[aria-invalid="true"]:focus,
.metas-form__picker[aria-invalid="true"]:focus {
  border-color: var(--ui-danger);
}

html[data-input-modality="keyboard"] .metas-form__control[aria-invalid="true"]:focus,
html[data-input-modality="keyboard"] .metas-form__picker[aria-invalid="true"]:focus {
  outline-color: var(--ui-danger);
}

/* O valor do resumo fecha a linha à direita; a máscara acompanha o mesmo
   alinhamento para não deslocar a leitura em relação ao valor original. */
.privacy-enabled [data-metas-sheet] .metas-form__summary-value[data-sensitive]::after {
  justify-content: flex-end;
}

@media (min-width: 768px) {
  .metas-sheet__layer {
    inset: 0;
    align-items: center;
    overflow-y: auto;
    padding: 2rem 1rem;
  }

  .metas-sheet__dialog {
    max-height: calc(100vh - 4rem);
    max-height: calc(100dvh - 4rem);
    border-radius: var(--ui-radius-panel);
  }

  .metas-sheet__head {
    padding: 1.125rem 1.25rem 0.875rem;
  }

  .metas-sheet__body {
    padding: 0 1.25rem 1rem;
  }

  .metas-sheet__footer {
    padding: 0.75rem 1.25rem calc(0.75rem + env(safe-area-inset-bottom));
  }
}

@media (max-width: 767px) {
  .metas-sheet__head {
    gap: 0.625rem;
    padding: 0.5rem 1rem 0.75rem;
  }

  .metas-sheet__body {
    padding: 0 1rem 0.75rem;
    scroll-padding-bottom: 1rem;
  }

  .metas-sheet__footer {
    display: grid;
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
    gap: 0.625rem;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
  }

  .metas-sheet__btn {
    width: 100%;
    min-width: 0;
  }

  .metas-sheet__btn--cancel {
    order: 1;
  }

  .metas-sheet__btn--primary {
    order: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .metas-sheet__dialog {
    animation: none;
  }
}