/*
 * Tema do app — traduz os tokens do Figma ("App de Finanças Compartilhadas — Mockups")
 * para as variáveis do Bootstrap 6.
 *
 * Este arquivo NÃO usa @layer de propósito: o bootstrap-6.min.css deste projeto declara os tokens
 * de :root (cores, espaçamentos...) fora de qualquer camada, e CSS sem camada só é vencido por
 * outro CSS sem camada. Declarar aqui dentro de `@layer custom` faria as sobrescritas serem ignoradas.
 *
 * Regra do projeto: só existe CSS aqui quando o Bootstrap não tem equivalente.
 */

/* Inter é a fonte do Figma. Variável (100–900), subset latin cobre acentos do português. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
}

html, body {
    height: 100%;
    /* MAUI: cor da área sob a status bar — mesmo fundo das telas do Figma */
    --maui-status-bar-safe-area-background: var(--bs-bg-1);
}

/* ============================================================
   1. Tokens do Figma -> variáveis do Bootstrap
   ============================================================ */
:root {
    scrollbar-gutter: auto; /* BS6 reserva ~15px de calha no desktop; o app é mobile, largura cheia */

    --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-body-line-height: normal; /* Figma usa line-height "normal" em todos os textos */

    /* Neutros. Tema (REQ-036, D22): o Bootstrap 6 já troca por color-scheme (padrão "light dark" = segue o sistema;
       <html data-bs-theme="light|dark"> força um dos dois), então cada token é light-dark(claro, escuro). */
    --bs-fg-body: light-dark(#111827, #e5e7eb); /* texto principal */
    --bs-fg-3: light-dark(#5f6672, #9ca3af); /* texto secundário (classe fg-3) */
    --bs-bg-1: light-dark(#f5f6f8, #182027); /* fundo das telas (classe bg-1) */
    --bs-bg-body: light-dark(#fff, #1d262f); /* superfície: cards, campos, aba ativa */
    --bs-bg-2: light-dark(#eef0f3, #26313c); /* trilho de progresso, fundo do segmented control */
    --bs-bg-3: light-dark(#d1d5db, #374151); /* switch desligado, ícone inativo da tab bar */
    --bs-border-color: light-dark(#e5e7eb, #34404c);
    --shadow-tab: light-dark(rgba(16, 24, 40, .10), rgba(0, 0, 0, .45)); /* sombra no topo da barra de menus (REQ-059) */

    /* Primária (teal) */
    --bs-primary-base: #0f766e;
    --bs-primary-bg: #0f766e;
    --bs-primary-fg: light-dark(#0f766e, #2dd4bf); /* teal em texto/ícone/link: mais claro no escuro (botão continua #0f766e) */
    --bs-primary-fg-emphasis: light-dark(#0f766e, #2dd4bf);
    --bs-primary-bg-subtle: light-dark(#e0f2f1, #123a38);
    --bs-primary-border: #0f766e;
    --bs-primary-focus-ring: light-dark(#0f766e, #2dd4bf);
    --bs-primary-contrast: #fff;

    /* Semânticas: verde (a receber), vermelho (a pagar / excluir) */
    --bs-success-fg: light-dark(#15803d, #4ade80);
    --bs-danger-fg: light-dark(#b91c1c, #f87171);
    --bs-danger-border: light-dark(#fecaca, #7f1d1d);

    /* Secundária = neutro do Figma (botões "Editar", "Registrar pagamento" em card) */
    --bs-secondary-fg: light-dark(#111827, #e5e7eb);
    --bs-secondary-border: light-dark(#e5e7eb, #34404c);

    --bs-link-color: light-dark(#0f766e, #2dd4bf);
    --bs-link-decoration: none;
    --bs-focus-ring-color: light-dark(#0f766e, #2dd4bf);

    /* Gráficos do Início (REQ-052, D33): uma cor fixa por categoria semeada (1 a 6), igual em todos os meses; contraste >= 3:1
       contra o fundo do cartão (--bs-bg-body) nos dois temas, verificado por ChartContrastTests. As fatias nunca dependem só da cor. */
    --chart-1: light-dark(#0f766e, #2dd4bf); /* Moradia */
    --chart-2: light-dark(#2563eb, #60a5fa); /* Mercado */
    --chart-3: light-dark(#c2410c, #fb923c); /* Transporte */
    --chart-4: light-dark(#7c3aed, #a78bfa); /* Lazer */
    --chart-5: light-dark(#be185d, #f472b6); /* Saúde */
    --chart-6: light-dark(#6b7280, #9ca3af); /* Outros */
    --chart-bar: light-dark(#6b7280, #9ca3af); /* barras dos meses */
    --chart-bar-active: light-dark(#0f766e, #2dd4bf); /* barra do mês selecionado */
}

/* Gráficos do Início */
.chart-pie { flex: none; }
.chart-slice { outline: none; cursor: pointer; } /* REQ-053: a fatia é um link; o foco do teclado aparece no contorno */
.chart-slice:focus-visible path, .chart-slice:focus-visible circle { stroke: var(--bs-focus-ring-color); stroke-width: 3; }
.chart-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex: none; }
.chart-bars { width: 100%; height: auto; display: block; }
.chart-bars text { font-size: 10px; fill: var(--bs-fg-3); font-family: inherit; }
.chart-bar { cursor: pointer; outline: none; }
.chart-bar.active text { fill: var(--bs-fg-body); font-weight: 600; }
.chart-bar:focus-visible .bar { stroke: var(--bs-focus-ring-color); stroke-width: 2; }

body {
    background-color: var(--bs-bg-1);
}

/* ============================================================
   2. Medidas dos componentes do Figma
   ============================================================ */

/* Campos: 49px de altura, raio 12, sem sombra interna */
:root {
    --bs-btn-input-min-height: 2.9375rem;
    --bs-btn-input-padding-y: .8125rem;
    --bs-btn-input-padding-x: .875rem;
}

.form-control,
.form-control-plaintext {
    --bs-control-border-radius: var(--bs-radius-7);
    --bs-control-box-shadow: none;
}

/* Valor gigante da "Nova despesa": é um input, mas sem caixa nem altura mínima */
.form-control-plaintext { --bs-control-min-height: 0; }

/* No foco o Figma desenha 2px (1px de borda + 1px de anel) em vez dos 3px padrão */
.form-control,
.otp {
    --bs-focus-ring: 1px solid var(--bs-focus-ring-color);
}

/* Campo de valor da tela "Registrar pagamento": 56px, texto 20px semibold */
.form-control-44 { --bs-control-min-height: 2.75rem; --bs-control-padding-y: .71875rem; }
.form-control-valor {
    --bs-control-min-height: 3.5rem;
    font-size: 1.25rem;
    font-weight: 600;
}

/* Campo de valor (MoneyInput, REQ-044): partes sem moldura, herdam a fonte do contêiner */
.money-part { border: 0; background: transparent; padding: 0; margin: 0; color: inherit; font: inherit; outline: 0; min-width: 0; }
.money-part::placeholder { color: var(--bs-secondary-color, currentColor); opacity: .5; }
.money-decimals { cursor: text; }

/* Botões: 47px, raio 12, texto semibold */
.btn,
.btn-link,
.btn-icon,
.btn-solid,
.btn-outline,
.btn-subtle,
.btn-text {
    --bs-btn-min-height: 2.9375rem;
    --bs-btn-border-radius: var(--bs-radius-7);
    --bs-btn-font-weight: 600;
}

/* Botão redondo de 36px (navegação de mês) e de 48px (FAB da tab bar) */
.btn-icon-36 { --bs-btn-min-height: 2.25rem; }
.btn-icon-48 { --bs-btn-min-height: 3rem; }

/* Card: padding 16, raio 16 (o .card redefine as variáveis no próprio seletor, então o override tem que ser nele) */
.card {
    --bs-card-spacer-y: 1rem;
    --bs-card-spacer-x: 1rem;
    --bs-card-border-radius: var(--bs-radius-9);
}

/* Avatar: letra semibold */
:root { --bs-avatar-font-weight: 600; }

/* Switch 44x24 com bolinha de 20px; sem borda visível nem margem vertical */
.switch {
    --bs-switch-height: 1.5rem;
    --bs-switch-width: 2.75rem;
    --bs-switch-margin-block: 0;
    --bs-switch-border-color: transparent;
}

/* Checkbox: 20px com raio 6 */
.check { --bs-check-border-radius: var(--bs-radius-4); }
/* Com .theme-primary no proprio checkbox o Bootstrap 6 pinta tambem o desmarcado; so o marcado fica na cor do tema. */
.check:not(:checked):not(:indeterminate) { background-color: var(--bs-bg-body); border-color: var(--bs-border-color); }

/* Barra de progresso: 8px, raio 4, sem sombra; a barra herda o raio do trilho */
.progress {
    --bs-progress-height: .5rem;
    --bs-progress-border-radius: var(--bs-radius-3);
    --bs-progress-box-shadow: none;
}
.progress-bar { border-radius: inherit; }

/* Chip de categoria (seleção): 36px, branco com borda; selecionado = fundo teal claro + borda teal */
.chip-choice {
    --bs-chip-height: 2.25rem;
    --bs-chip-padding-x: .875rem;
    --bs-chip-bg: var(--bs-bg-body);
    --bs-chip-color: var(--bs-fg-body);
    --bs-chip-border-color: var(--bs-border-color);
    --bs-chip-font-weight: 500;
    --bs-chip-selected-bg: var(--bs-primary-bg-subtle);
    --bs-chip-selected-color: var(--bs-primary-fg);
    --bs-chip-selected-border-color: var(--bs-primary-fg);
}
/* (precisa repetir as 3 variáveis: a camada custom vence o .chip.active da camada components) */
.chip-choice.active {
    --bs-border-width: 1.5px;
    --bs-chip-font-weight: 600;
    --bs-chip-color: var(--bs-chip-selected-color);
    --bs-chip-bg: var(--bs-chip-selected-bg);
    --bs-chip-border-color: var(--bs-chip-selected-border-color);
}

/* Segmented control (nav-pills): trilho cinza raio 10, aba ativa branca raio 8 */
.nav-pills-segmented {
    --bs-nav-pills-bg: var(--bs-bg-2);
    --bs-nav-pills-border-radius: var(--bs-radius-6);
    --bs-nav-pills-link-border-radius: var(--bs-radius-5);
    --bs-nav-pills-link-active-bg: var(--bs-bg-body);
    --bs-nav-pills-link-active-color: var(--bs-fg-body);
    --bs-nav-link-color: var(--bs-fg-3);
    --bs-nav-link-padding-y: .375rem;
    display: flex;
    gap: .25rem;
}

/* OTP: 6 casas de 48x56, espalhadas na largura, sem sombra interna */
.otp {
    --bs-otp-size: 3rem;
    --bs-otp-font-size: 1.5rem;
    --bs-otp-slot-border-radius: var(--bs-radius-7);
    width: 100%;
}
.otp-slots { width: 100%; justify-content: space-between; }
.otp-slot { min-height: 3.5rem; font-weight: 600; box-shadow: none; }

/* ============================================================
   3. Sem equivalente no Bootstrap 6
   ============================================================ */

/* Tamanhos de fonte do Figma fora da escala fs-xs(12) / fs-sm(14) / fs-md(16) */
.fs-10 { font-size: .625rem; }
.fs-11 { font-size: .6875rem; }
.fs-13 { font-size: .8125rem; }
.fs-15 { font-size: .9375rem; }
.fs-17 { font-size: 1.0625rem; }
.fs-18 { font-size: 1.125rem; }
.fs-20 { font-size: 1.25rem; }
.fs-22 { font-size: 1.375rem; }
.fs-24 { font-size: 1.5rem; }
.fs-26 { font-size: 1.625rem; }
.fs-28 { font-size: 1.75rem; }
.fs-32 { font-size: 2rem; }
.fs-40 { font-size: 2.5rem; }

/* Espaçamentos do Figma fora da escala de spacers (4/6/8/12/16/20/24/28/32...) */
.gap-2px { gap: .125rem; }
.gap-10px { gap: .625rem; }
.gap-14px { gap: .875rem; }
.gap-18px { gap: 1.125rem; }
.pt-10px { padding-top: .625rem; }

/* Moldura mobile: coluna de largura máxima 480px centralizada (no celular ocupa 100%) */
.app-shell { max-width: 30rem; }

/* Tab bar: o Bootstrap não tem navegação inferior */
.tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    font-size: .6875rem;
    font-weight: 500;
    color: var(--bs-fg-3);
}
.tab.active { font-weight: 600; color: var(--bs-primary-fg); }
/* Ícones das abas (D21): contorno quando inativa, preenchido quando ativa; cor herdada da aba */
.tab-icon {
    width: 1.375rem;
    height: 1.375rem;
}
.tab .icon-on, .tab.active .icon-off { display: none; }
.tab.active .icon-on { display: inline; }

/* <select> com avatar sobreposto à esquerda (seletor de pessoa) */
.select-with-avatar { padding-inline-start: 3.125rem; }

/* botao com cara de link (acoes inline nas listas) */
.btn-link-plain { background: none; border: 0; padding: 0; font: inherit; color: var(--bs-primary-fg, inherit); cursor: pointer; }
.btn-link-plain:disabled { opacity: .5; cursor: default; }
.btn-plain { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; } /* REQ-055: o item recolhível da série é um botão que parece uma linha */
.new-menu-backdrop { position: fixed; inset: 0; z-index: 1000; background: transparent; } /* REQ-054 10: tocar fora fecha o menu do "+" */
.new-menu { position: absolute; bottom: calc(100% + .5rem); left: 50%; transform: translateX(-50%); z-index: 1001; min-width: 12rem; padding: .25rem; display: flex; flex-direction: column;
  background: var(--bs-bg-body); border: 1px solid var(--bs-border-color); border-radius: .75rem; box-shadow: 0 8px 24px rgb(0 0 0 / .18); }
.new-menu-item { display: block; padding: .75rem 1rem; border-radius: .5rem; color: inherit; font-weight: 500; white-space: nowrap; text-decoration: none; }
.new-menu-item:hover, .new-menu-item:focus-visible { background: var(--bs-secondary-bg, rgb(127 127 127 / .12)); outline: none; }

/* Indicador de carregamento (REQ-031, D16). Só aparece depois de ~150 ms para não piscar em respostas rápidas. */
.app-spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: .5em;
    vertical-align: -.125em;
    border: .15em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    opacity: 0;
    animation: app-spinner-in 0s linear .15s forwards, app-spinner-spin .75s linear infinite;
}

.app-spinner-lg { margin-right: 0; font-size: 1.75rem; }

@keyframes app-spinner-in { to { opacity: 1; } }
@keyframes app-spinner-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .app-spinner { animation: app-spinner-in 0s linear .15s forwards; border-right-color: currentColor; border-style: dotted; }
}

button[aria-busy="true"] { display: inline-flex; align-items: center; justify-content: center; }

/* REQ-057 / D40 1: olho do campo de senha (PasswordField + password-toggle.js). */
.password-field { position: relative; }
.password-field .form-control { padding-right: 2.75rem; }
.password-toggle {
    position: absolute; top: 0; right: 0; height: 100%; min-width: 2.75rem;
    display: flex; align-items: center; justify-content: center;
    background: none; border: 0; padding: 0; color: var(--bs-fg-3, currentColor); cursor: pointer;
}
.password-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; border-radius: .5rem; }
.password-toggle .icon-eye-slash { display: none; }
.password-toggle[aria-pressed="true"] .icon-eye { display: none; }
.password-toggle[aria-pressed="true"] .icon-eye-slash { display: inline; }

/* REQ-059 / D40 3: acabamento da barra de menus: cantos de cima arredondados e sombra no lugar da linha reta. A largura segue a coluna do
   conteudo (.app-shell, 30rem, centralizada), entao em navegador largo a barra nao se estica. */
.tab-bar { border-radius: 20px 20px 0 0; box-shadow: 0 -2px 12px var(--shadow-tab); }

/* REQ-061 / D42: barras horizontais de "quem pagou no mes" (MemberBars). */
.member-bar-track { height: .5rem; border-radius: .25rem; background: var(--bs-bg-2); overflow: hidden; }
.member-bar-fill { height: 100%; border-radius: .25rem; background: var(--chart-bar-active, var(--bs-primary-base)); }