/* ── Tema: Material 3 (https://m3.material.io/), skin sobre Bootstrap 5.3 + Bootswatch Flatly ── */

/* Ícones — Material Symbols (mesmo conjunto usado nos exemplos M3/Compose) */
.material-symbols-outlined{
  font-family:'Material Symbols Outlined';
  font-weight:normal;
  font-style:normal;
  font-size:1.5rem;
  display:inline-block;
  line-height:1;
  text-transform:none;
  letter-spacing:normal;
  word-wrap:normal;
  white-space:nowrap;
  direction:ltr;
  -webkit-font-smoothing:antialiased;
  vertical-align:middle;
  font-variation-settings:'opsz' 24,'wght' 400,'FILL' 0,'GRAD' 0;
}

/* ── Remapeamento das CSS vars do Bootstrap para os tokens M3 ── */
:root{
  --bs-primary:var(--md-sys-color-primary);
  --bs-primary-rgb:65,95,145;
  --bs-body-bg:var(--md-sys-color-surface);
  --bs-body-color:var(--md-sys-color-on-surface);
  --bs-border-color:var(--md-sys-color-outline-variant);
  --bs-secondary-color:var(--md-sys-color-on-surface-variant);
  --bs-border-radius:var(--md-sys-shape-corner-small);
  --bs-border-radius-sm:var(--md-sys-shape-corner-extra-small);
  --bs-border-radius-lg:var(--md-sys-shape-corner-medium);
  --bs-border-radius-xl:var(--md-sys-shape-corner-large);
  --bs-border-radius-pill:var(--md-sys-shape-corner-full);
  --bs-link-color:var(--md-sys-color-primary);
  --bs-link-color-rgb:65,95,145;
  --bs-link-hover-color:var(--md-sys-color-primary);
  --bs-danger:var(--md-sys-color-error);
}

/* Variantes "-subtle"/"text-*" do Bootstrap não reagem a tema (valores fixos
   no CSS compilado) — sobrescreve pelos tokens M3 equivalentes pra
   funcionar corretamente no dark mode. */
.bg-primary-subtle{background-color:var(--md-sys-color-primary-container)!important}
.bg-success-subtle{background-color:var(--md-extended-color-success-color-container)!important}
.bg-info-subtle{background-color:var(--md-extended-color-info-color-container)!important}
.text-success{color:var(--md-extended-color-success-on-color-container)!important}
.text-info{color:var(--md-extended-color-info-on-color-container)!important}
:root[data-theme="dark"]{
  --bs-primary-rgb:170,199,255;
  --bs-link-color-rgb:170,199,255;
}

/* ── Tipografia — typescale M3 (Display/Headline/Title/Body/Label), Poppins ──
   Body Large (16/24) já bate com o default do Bootstrap, então só remapeamos
   os headings (títulos de tela) e o peso dos botões/labels. Títulos em
   SemiBold, como no exemplo Type.kt do guia Compose/M3. */
h1,h2,h3,h4,h5,h6{font-family:'Poppins',sans-serif;font-weight:600}
h4{font-size:var(--md-sys-typescale-headline-small-size);line-height:var(--md-sys-typescale-headline-small-line-height)}
h5{font-size:var(--md-sys-typescale-title-large-size);line-height:var(--md-sys-typescale-title-large-line-height)}
h6{font-size:var(--md-sys-typescale-title-medium-size);line-height:var(--md-sys-typescale-title-medium-line-height)}
/* Label Large (M3 typescale) — tipografia padrão de botão: Medium (500),
   14px/20px, tracking 0.1px */
.btn{font-family:'Poppins',sans-serif;font-weight:500;font-size:var(--md-sys-typescale-label-large-size);line-height:var(--md-sys-typescale-label-large-line-height);letter-spacing:.1px}
.btn-primary,.btn-outline-primary,.btn-danger{border-radius:var(--md-sys-shape-corner-full)!important}
.fw-semibold{font-weight:600!important}

/* ── Casca do app ── */
body{background:var(--md-sys-color-scrim);display:flex;justify-content:center;align-items:center;min-height:100dvh;overflow:hidden;font-family:'Poppins',sans-serif}
.app{width:100%;max-width:560px;height:100dvh;background:var(--md-sys-color-surface);position:relative;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 0 24px color-mix(in srgb, var(--md-sys-color-scrim) 40%, transparent)}

/* app-content: o container que hospeda todas as telas */
.app-content{flex:1;position:relative;overflow:hidden;min-height:0;background:var(--md-sys-color-surface)}

/* Shell "app" único, usado em qualquer largura de tela — sem layout desktop
   separado. Navegação sempre via hamburguer + drawer (ver #drawer abaixo). */

.screen{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--md-sys-color-surface);transition:transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized),opacity var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized)}
.screen.hidden{transform:translateX(100%);pointer-events:none}
.screen.active{transform:none;opacity:1;will-change:auto}
.screen-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;-ms-overflow-style:none;scrollbar-width:none}
.screen-body::-webkit-scrollbar{display:none}
.screen-body:not(.center-col){padding-bottom:32px!important}
/* Home tem o botão Novo fixo por cima do conteúdo (position:absolute,
   bottom:8px) — com banners empilhados (insights/vencido/vencendo/
   doar) o conteúdo passa a rolar em telas menores, e no fim do scroll
   o card de saldo ficava embaixo do botão. Reserva espaço extra pra
   sempre sobrar respiro abaixo do último card, mesmo scrollado até o fim. */
#home-body{padding-bottom:100px!important}

.avatar-lg{width:56px;height:56px;font-size:22px}
.avatar-sm{width:32px;height:32px;font-size:14px;box-shadow:0 0 0 1px var(--md-sys-color-primary)}
.center-col{display:flex;flex-direction:column;justify-content:center;padding:28px 24px}

/* ── Telas de autenticação (Login/Criar conta) — visual dedicado com
   gradiente, à parte do tema M3 do resto do app ── */
.auth-screen{background:linear-gradient(0deg,rgba(201,162,39,.4) 0%,rgba(201,162,39,0) 30%),linear-gradient(160deg,#0f9b7e 0%,#4caf7d 100%)!important;background-size:100% 100%,200% 200%!important;background-position:0% 0%,0% 0%!important;animation:auth-gradient-move 8s ease-in-out infinite}
@keyframes auth-gradient-move{0%{background-position:0% 0%,0% 0%}50%{background-position:0% 0%,100% 100%}100%{background-position:0% 0%,0% 0%}}
.auth-icon-badge{width:72px;height:72px;border-radius:20px;background:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;box-shadow:0 8px 20px rgba(0,0,0,.15)}
.auth-icon-badge .material-symbols-outlined{font-size:36px;color:#159957}
.auth-title{color:#fff;font-size:1.6rem;font-weight:700;text-align:center;line-height:1.25;margin-bottom:8px}
.auth-subtitle{color:rgba(255,255,255,.85);text-align:center;font-size:.85rem;margin-bottom:28px}
.auth-input{background:rgba(255,255,255,.16)!important;border:1px solid rgba(255,255,255,.4)!important;border-radius:999px!important;color:#fff!important;padding:14px 20px!important;font-size:.95rem}
.auth-input::placeholder{color:rgba(255,255,255,.75)}
.auth-input:focus{background:rgba(255,255,255,.24)!important;border-color:#fff!important;box-shadow:none!important}
.auth-btn-primary{background:#fff!important;color:#159957!important;border:none!important;border-radius:999px!important;font-weight:700!important;padding:14px 48px!important}
.auth-btn-primary:hover,.auth-btn-primary:active{background:#f0f0f0!important;color:#159957!important}
.auth-link{color:#fff!important;text-decoration:underline}
.auth-link.text-muted{color:rgba(255,255,255,.7)!important}
.auth-err{background:rgba(255,255,255,.92);color:#c62828;border-radius:10px;padding:6px 12px;font-weight:500}
.auth-err:empty{background:transparent;padding:0}
.auth-check .form-check-input{background-color:transparent;border-color:rgba(255,255,255,.6)}
.auth-check .form-check-input:checked{background-color:#fff;border-color:#fff;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23159957'%3e%3cpath d='M7 11.5L4.5 9 3 10.5l4 4 9-9L14.5 4z'/%3e%3c/svg%3e")}
.auth-check .form-check-label{color:rgba(255,255,255,.85)}
.auth-input-box{background:rgba(255,255,255,.14)!important;border:1.5px solid rgba(255,255,255,.45)!important;border-radius:10px!important;color:#fff!important;padding:14px 16px!important;font-size:.95rem}
.auth-input-box::placeholder{color:rgba(255,255,255,.75)}
.auth-input-box:focus{background:rgba(255,255,255,.22)!important;border-color:#fff!important;box-shadow:none!important;color:#fff!important}
.auth-social-circle{width:52px;height:52px;border-radius:50%;background:#fff;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(0,0,0,.15)}
.auth-spinner{width:32px;height:32px;border-radius:50%;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;margin:24px auto 0;animation:auth-spinner-spin .8s linear infinite}
@keyframes auth-spinner-spin{to{transform:rotate(360deg)}}

/* ── Header em degradê (mesma paleta das telas de auth), usado no topo
   das telas internas do app pra reforçar a identidade visual ── */
.app-header-gradient{background:linear-gradient(135deg,#0f9b7e 0%,#4caf7d 100%)!important;border-bottom:none!important;color:#fff}
.app-header-gradient .material-symbols-outlined{color:#fff}
.app-header-gradient .btn-link{color:#fff!important}
.app-header-gradient .text-primary{color:#fff!important}
.app-header-gradient .avatar-sm{box-shadow:0 0 0 2px rgba(255,255,255,.8)!important}
.app-header-gradient{padding-bottom:32px!important}
.app-body-rounded{background:var(--md-sys-color-surface);border-radius:24px 24px 0 0;margin-top:-16px;position:relative;z-index:1}
.app-header-watermark{position:absolute;left:0;right:0;top:16px;bottom:32px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:800;color:rgba(255,255,255,.18);letter-spacing:-1px;user-select:none;pointer-events:none;z-index:0}

/* Status cell — chip pill discreto (fundo pálido / texto médio, peso normal),
   para status confirmados (Recebido/A receber) */
.status-cell{font-weight:400!important;font-size:.75rem;padding:4px 12px!important;border-radius:var(--md-sys-shape-corner-full)!important;border:none}
/* Tabs de tipo/status logo abaixo do header (Novo, Receitas/Despesas/Investimentos) */
#listing-status-tabs button.status-cell, #tab-tipo-receita, #tab-tipo-despesa, #tab-tipo-investimento, #status-pills .status-cell, #cats-tab-receita, #cats-tab-despesa, #cats-tab-investimento, #cat-detail-breadcrumb, #cat-group-breadcrumb, #vencendo-badge{padding-top:8px!important;padding-bottom:8px!important}
#listing-title{padding-top:6px!important;padding-bottom:6px!important}
.status-cell-success{background:var(--md-extended-color-success-color-container)!important;color:var(--md-extended-color-success-on-color-container)!important}
.status-cell-neutral{background:var(--md-sys-color-surface-variant)!important;color:var(--md-sys-color-on-surface-variant)!important}
.status-cell-white{background:var(--md-sys-color-surface-container-lowest)!important;color:var(--md-sys-color-on-surface-variant)!important}
.status-cell-receita{background:color-mix(in srgb, var(--md-extended-color-receita-color) 18%, var(--md-sys-color-surface))!important;color:var(--md-extended-color-receita-color)!important}
.status-cell-despesa{background:color-mix(in srgb, var(--md-sys-color-error) 18%, var(--md-sys-color-surface))!important;color:var(--md-sys-color-error)!important}
.status-cell-investimento{background:color-mix(in srgb, var(--md-extended-color-investimento-color) 18%, var(--md-sys-color-surface))!important;color:var(--md-extended-color-investimento-color)!important}
/* Badge do título no header (opaco, sem transparência do gradiente por trás) */
.status-cell-header-receita{background:var(--md-sys-color-surface-container-lowest)!important;color:var(--md-extended-color-receita-color)!important}
.status-cell-header-despesa{background:var(--md-sys-color-surface-container-lowest)!important;color:var(--md-sys-color-error)!important}
.status-cell-header-investimento{background:var(--md-sys-color-surface-container-lowest)!important;color:var(--md-extended-color-investimento-color)!important}
.status-cell-header-receita .material-symbols-outlined{color:var(--md-extended-color-receita-color)!important}
.status-cell-header-despesa .material-symbols-outlined{color:var(--md-sys-color-error)!important}
.status-cell-header-investimento .material-symbols-outlined{color:var(--md-extended-color-investimento-color)!important}
.status-cell-warning{background:var(--md-extended-color-aviso-color-container)!important;color:var(--md-extended-color-aviso-on-color-container)!important}
.status-cell-lilac{background:var(--md-extended-color-lilac-color-container)!important;color:var(--md-extended-color-lilac-on-color-container)!important}
.btn-check:checked + .status-cell{box-shadow:inset 0 0 0 2px currentColor}
/* State layer M3 (hover/press) — overlay semitransparente de currentColor por
   cima do chip, funciona com qualquer variante de cor sem precisar de !important */
button.status-cell{position:relative;overflow:hidden;cursor:pointer}
button.status-cell::after{content:'';position:absolute;inset:0;background:currentColor;opacity:0;transition:opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);pointer-events:none}
button.status-cell:hover::after{opacity:var(--md-sys-state-hover-opacity)}
button.status-cell:active::after{opacity:var(--md-sys-state-pressed-opacity)}

/* Small badge — https://m3.material.io/components/badges (variante "small",
   só o indicador, sem conteúdo) */
.m3-badge-small{display:inline-block;width:8px;height:8px;border-radius:50%;vertical-align:middle;flex-shrink:0}
.m3-badge-small-error{background:var(--md-status-dot-error)}
.m3-badge-small-warning{background:var(--md-status-dot-warning)}
.m3-badge-small-neutral{background:var(--md-sys-color-outline)}

/* Date picker (M3) — https://m3.material.io/components/date-pickers/overview */
.dp-day{position:relative;overflow:hidden;width:100%;aspect-ratio:1;border:none;background:transparent;border-radius:50%;font-size:.8rem;color:var(--md-sys-color-on-surface);cursor:pointer;transition:background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard)}
.dp-day:hover{background:var(--md-sys-color-surface-container-highest)}
.dp-day-today{border:1px solid var(--md-sys-color-primary)!important;color:var(--md-sys-color-primary)}
.dp-day-selected{width:32px;height:32px;aspect-ratio:auto;justify-self:center;align-self:center;background:var(--md-sys-color-primary)!important;color:var(--md-sys-color-on-primary)!important;font-weight:600}

/* Primary tabs (M3) — https://m3.material.io/components/tabs/overview */
.m3-tabs{display:flex;justify-content:center;border-bottom:1px solid var(--md-sys-color-outline-variant)}
.m3-tab{position:relative;overflow:hidden;flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:6px;background:none;border:none;padding:12px 20px;font-family:'Poppins',sans-serif;font-size:.875rem;font-weight:600;color:var(--md-sys-color-on-surface-variant);cursor:pointer;transition:color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard)}
.m3-tab .material-symbols-outlined{font-size:1.2rem}
.m3-tab::after{content:'';position:absolute;left:50%;bottom:0;width:32px;margin-left:-16px;height:3px;background:var(--md-sys-color-primary);border-radius:var(--md-sys-shape-corner-full) var(--md-sys-shape-corner-full) 0 0;transform:scaleX(0);transition:transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized)}
.m3-tab.active{color:var(--md-sys-color-primary)}
.m3-tab.active::after{transform:scaleX(1)}

/* Pills do year-strip (Anual), month-strip (Mensal) e do period picker —
   mesmo padding, sem fundo nos itens deselecionados */
#year-strip .btn, #month-strip .btn, #period-year-strip .btn, #period-month-grid .btn{padding:6px 16px}

/* Permite scroll por toque/swipe sem exibir a barra de rolagem horizontal */
.tab-inactive{background:transparent!important;color:var(--md-sys-color-on-surface-variant)}
.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}
.no-scrollbar::-webkit-scrollbar{display:none}
.smaller{font-size:.65rem}

/* Large badge — https://m3.material.io/components/badges (variante "large") */
.m3-badge-large{display:inline-block;position:relative;top:-1px;margin-left:8px;box-sizing:border-box;min-width:16px;height:16px;padding:0 4px;border-radius:var(--md-sys-shape-corner-full);background:var(--md-sys-color-error);color:var(--md-sys-color-on-error);font-size:.65rem;font-weight:700;line-height:16px;text-align:center;vertical-align:middle}
.m3-count-badge{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-width:18px;height:18px;padding:0 5px;border-radius:var(--md-sys-shape-corner-full);background:var(--md-sys-color-error);color:var(--md-sys-color-on-error);font-size:.65rem;font-weight:600}

/* Dropdown card compartilhado — period picker e painel de filtros */
.sheet-overlay{position:absolute;inset:0;background:color-mix(in srgb, var(--md-sys-color-scrim) 25%, transparent);z-index:400;opacity:0;pointer-events:none;transition:opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard)}
.sheet-overlay.open{opacity:1;pointer-events:all}
.sheet-card{position:absolute;top:84px;left:16px;right:16px;background:var(--md-sys-color-surface-container);border-radius:var(--md-sys-shape-corner-large);z-index:401;box-shadow:var(--md-sys-elevation-level2);transform:scale(.93) translateY(-6px);opacity:0;pointer-events:none;transition:transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate),opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard)}
.sheet-card.open{transform:scale(1) translateY(0);opacity:1;pointer-events:all}
#smart-groups-sheet{max-height:calc(100vh - 120px);display:flex;flex-direction:column}

/* Drawer menu */
#drawer-overlay{position:absolute;inset:0;background:color-mix(in srgb, var(--md-sys-color-scrim) 45%, transparent);z-index:300;opacity:0;pointer-events:none;transition:opacity var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard)}
#drawer-overlay.open{opacity:1;pointer-events:all}
#drawer{position:absolute;top:0;left:0;bottom:0;width:260px;background:var(--md-sys-color-surface-container-high);z-index:301;transform:translateX(-100%);transition:transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate);display:flex;flex-direction:column;box-shadow:var(--md-sys-elevation-level2)}
#drawer.open{transform:translateX(0)}
.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:20px 16px 16px;border-bottom:1px solid var(--md-sys-color-outline-variant);flex-shrink:0}
/* Navigation drawer (M3) — https://m3.material.io/components/navigation-drawer/overview
   item em formato "pill" (shape full), com ícone + label e margem lateral
   das bordas do drawer, no lugar de uma linha reta full-width */
.drawer-item{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;margin:4px 12px;padding:10px 16px;border:1px solid var(--md-sys-color-outline-variant);border-radius:var(--md-sys-shape-corner-medium);text-decoration:none;color:var(--md-sys-color-on-surface-variant);font-weight:500;font-size:.875rem;transition:background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard)}
.drawer-item:first-of-type{margin-top:12px}
.drawer-item .material-symbols-outlined{font-size:1.35rem;color:var(--md-sys-color-on-surface-variant)}
.drawer-item:active,.drawer-item:hover{background:var(--md-sys-color-surface-container-highest);color:var(--md-sys-color-on-surface)}
.drawer-item:active .material-symbols-outlined,.drawer-item:hover .material-symbols-outlined{color:var(--md-sys-color-on-surface)}
/* FAB — cor "primary/onPrimary" (mesmo tom do estado pressed, sempre) */
.fab-main-btn{position:relative;overflow:hidden;width:44px;height:44px;border-radius:50%;background:var(--md-sys-color-primary)!important;border:none;color:var(--md-sys-color-on-primary)!important;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;box-shadow:var(--md-sys-elevation-level3);transition:transform var(--md-sys-motion-duration-medium3) var(--md-sys-motion-easing-emphasized),box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard)}
.fab-main-btn:active{box-shadow:var(--md-sys-elevation-level4)}
#btn-novo-wrap.fab-open .fab-main-btn{transform:rotate(45deg)}
/* z-index baixo em repouso (100) — no desktop, a sidebar expandida (150)
   deve sobrepor o botão Novo e seu degradê de fundo. Só sobe (acima do
   .fab-scrim, 200) quando o menu está de fato aberto, senão os itens do
   FAB ficariam escondidos atrás do próprio scrim que eles abrem */
#btn-novo-wrap.fab-open{background:none!important;z-index:210!important}
.fab-main-btn .material-symbols-outlined{font-variation-settings:'opsz' 24,'wght' 500,'FILL' 1,'GRAD' 0;font-weight:500}

/* FAB Menu (M3) — https://m3.material.io/components/fab-menu/overview
   Lista vertical de ações ancorada no canto inferior direito, acima do FAB
   principal, com scrim atrás e entrada escalonada (staggered) dos itens;
   o FAB gira 45° (+ vira ×) e troca pra cor "primary" plena ao abrir. */
.fab-scrim{position:absolute;inset:0;z-index:200;background:color-mix(in srgb, var(--md-sys-color-scrim) 32%, transparent);opacity:0;pointer-events:none;transition:opacity var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard)}
.fab-scrim.open{opacity:1;pointer-events:all}

.fab-item-list{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:14px;display:flex;flex-direction:row;align-items:center;gap:12px;pointer-events:none}
.fab-item{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:none;background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container);padding:0;border-radius:50%;box-shadow:var(--md-sys-elevation-level2);opacity:0;transform:translateY(6px) scale(.85);transition:opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard-decelerate),transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard-decelerate)}
.fab-item .material-symbols-outlined{font-size:1.3rem;color:var(--md-sys-color-on-primary-container)}
/* Item "Receita" do FAB Menu na mesma cor do status-cell da tela Receitas */
.fab-item-receita{background:var(--md-sys-color-surface)!important;color:var(--md-extended-color-receita-color)!important}
.fab-item-receita .material-symbols-outlined{color:var(--md-extended-color-receita-color)!important}
.fab-item-despesa{background:var(--md-sys-color-surface)!important;color:var(--md-sys-color-error)!important}
.fab-item-despesa .material-symbols-outlined{color:var(--md-sys-color-error)!important}
.fab-item-investimento{background:var(--md-sys-color-surface)!important;color:var(--md-extended-color-investimento-color)!important}
.fab-item-investimento .material-symbols-outlined{color:var(--md-extended-color-investimento-color)!important}
#btn-novo-wrap.fab-open .fab-item-list{pointer-events:all}
#btn-novo-wrap.fab-open .fab-item{opacity:1;transform:translateY(0) scale(1)}
#btn-novo-wrap.fab-open .fab-item:nth-child(1){transition-delay:0s}
#btn-novo-wrap.fab-open .fab-item:nth-child(2){transition-delay:.04s}
#btn-novo-wrap.fab-open .fab-item:nth-child(3){transition-delay:.08s}

/* Text field (M3) — outlined com label entalhado na borda (fieldset/
   legend nativos), igual ao print de referência */
.form-box{background:transparent;border:1px solid var(--md-sys-color-outline-variant);border-radius:var(--md-sys-shape-corner-medium);padding:14px 16px;margin:0 0 16px;min-width:0;width:100%;transition:border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),border-width var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard)}
.form-box:focus-within{border:2.5px solid var(--md-sys-color-primary);padding:13.5px 15.5px}
.form-box-lbl{float:none;width:auto;max-width:calc(100% - 20px);padding:0 6px;margin:0 0 0 10px;font-size:.75rem;line-height:1rem;font-weight:400;color:var(--md-sys-color-on-surface-variant)}
.form-box:focus-within>.form-box-lbl{color:var(--md-sys-color-primary)}
.form-box:focus-within{border-color:var(--md-sys-color-primary);box-shadow:0 0 0 1px var(--md-sys-color-primary)}
.form-control-borderless{border:none;padding:0;box-shadow:none!important;background:transparent;color:var(--md-sys-color-on-surface);font-size:.875rem;line-height:1.25rem}
.form-control-borderless:focus{border:none;outline:none;background:transparent!important}
.form-select-borderless{border:none;padding:0;box-shadow:none!important;background:transparent;color:var(--md-sys-color-on-surface);font-size:.875rem;line-height:1.25rem}
.form-select-borderless:focus{border:none;outline:none;box-shadow:none!important;background:transparent!important}
.form-box .cs-btn{border:none!important;padding:0!important;min-height:auto;box-shadow:none!important;background:transparent}
.form-check-input:checked{background-color:var(--md-sys-color-primary);border-color:var(--md-sys-color-primary)}
/* Chavinha Atual/Previsto da Home — sempre com o visual "ligado" (trilho
   azul, bolinha branca) nos dois estados; só a posição da bolinha (esquerda/
   direita, nativa do :checked) indica qual lado está selecionado. */
#home-value-mode-toggle{background-color:var(--md-sys-color-primary)!important;border-color:var(--md-sys-color-primary)!important;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e")!important}
.form-check-input:focus{border-color:var(--md-sys-color-primary);box-shadow:0 0 0 .2rem color-mix(in srgb, var(--md-sys-color-primary) 25%, transparent)}

/* Custom Searchable Select */
.cs-btn{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;background:var(--md-sys-color-surface);min-height:38px}
.cs-btn .cs-display{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem}
.cs-backdrop{position:fixed;inset:0;z-index:2000;display:none}
.cs-backdrop.open{display:block}
.cs-panel{position:fixed;z-index:2001;display:flex;flex-direction:column;background:var(--md-sys-color-surface-container-high);border-radius:var(--md-sys-shape-corner-medium);box-shadow:var(--md-sys-elevation-level2);opacity:0;pointer-events:none;transform:scale(.97);transform-origin:top center;transition:opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),transform var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard-decelerate);overflow:hidden}
.cs-panel.open{opacity:1;pointer-events:all;transform:scale(1)}
.cs-header{padding:10px 12px 8px;border-bottom:1px solid var(--md-sys-color-outline-variant);flex-shrink:0}
.cs-search{width:100%;padding:7px 10px;border:1px solid var(--md-sys-color-outline-variant);border-radius:var(--md-sys-shape-corner-extra-small);font-size:.875rem;outline:none;box-sizing:border-box;background:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface)}
.cs-search:focus{border-color:var(--md-sys-color-primary)}
.cs-list{overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch}
.cs-item{padding:10px 14px;cursor:pointer;font-size:.875rem;border-bottom:1px solid var(--md-sys-color-outline-variant);color:var(--md-sys-color-on-surface)}
.cs-item.selected{color:var(--md-sys-color-primary);font-weight:600;background:var(--md-sys-color-secondary-container)}
.cs-item.highlighted{background:var(--md-sys-color-surface-container-highest)}
.cs-item:active{background:var(--md-sys-color-surface-container-highest)}
.cs-none{padding:14px;font-size:.875rem;color:var(--md-sys-color-outline);text-align:center}

/* Botões — shape "Full" (pill) e cores M3.
   Estados M3 (state layer): hover/active ganham uma leve tintura da
   própria cor em vez de virar sólido — antes, .btn-outline-primary no
   hover preenchia com --md-sys-color-primary sólida, ficando idêntico
   ao .btn-primary (o botão "cheio") e confundindo qual é o principal. */
.btn-primary{--bs-btn-color:var(--md-sys-color-on-primary);--bs-btn-bg:var(--md-sys-color-primary);--bs-btn-border-color:var(--md-sys-color-primary);--bs-btn-hover-color:var(--md-sys-color-on-primary);--bs-btn-hover-bg:color-mix(in srgb, var(--md-sys-color-primary) 92%, var(--md-sys-color-on-primary) 8%);--bs-btn-hover-border-color:var(--md-sys-color-primary);--bs-btn-active-color:var(--md-sys-color-on-primary);--bs-btn-active-bg:color-mix(in srgb, var(--md-sys-color-primary) 84%, var(--md-sys-color-on-primary) 16%);--bs-btn-active-border-color:var(--md-sys-color-primary);--bs-btn-disabled-bg:var(--md-sys-color-surface-variant);--bs-btn-disabled-border-color:var(--md-sys-color-surface-variant);border-radius:var(--md-sys-shape-corner-full);transition:background-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard)}
.btn-primary:hover{box-shadow:var(--md-sys-elevation-level1)}
.btn-outline-primary{--bs-btn-color:var(--md-sys-color-primary);--bs-btn-border-color:var(--md-sys-color-outline);--bs-btn-hover-color:var(--md-sys-color-primary);--bs-btn-hover-bg:color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);--bs-btn-hover-border-color:var(--md-sys-color-primary);--bs-btn-active-color:var(--md-sys-color-primary);--bs-btn-active-bg:color-mix(in srgb, var(--md-sys-color-primary) 15%, transparent);--bs-btn-active-border-color:var(--md-sys-color-primary);border-radius:var(--md-sys-shape-corner-full);transition:background-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard)}
.btn-danger{--bs-btn-color:var(--md-sys-color-on-error);--bs-btn-bg:var(--md-sys-color-error);--bs-btn-border-color:var(--md-sys-color-error);--bs-btn-hover-bg:color-mix(in srgb, var(--md-sys-color-error) 92%, var(--md-sys-color-on-error) 8%);--bs-btn-hover-border-color:var(--md-sys-color-error);--bs-btn-active-bg:color-mix(in srgb, var(--md-sys-color-error) 84%, var(--md-sys-color-on-error) 16%);border-radius:var(--md-sys-shape-corner-full)}
.btn-link,.btn-link:hover{color:var(--md-sys-color-primary);text-decoration:none}
.btn-link:hover{color:color-mix(in srgb, var(--md-sys-color-primary) 80%, black)}
/* Anel de foco (teclado) — :focus-visible não aparece em cliques de
   mouse, só em navegação por Tab, evitando ruído visual em cliques normais */
.btn:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}
/* Ícones de navegação (voltar/hamburguer) usam .text-dark do Bootstrap
   (cor fixa, não respeita o tema) — força a cor do tema M3 */
.btn-link.text-dark{color:var(--md-sys-color-on-surface)!important}
.btn.rounded-pill,.rounded-pill{border-radius:var(--md-sys-shape-corner-full)!important}
.text-primary{color:var(--md-sys-color-primary)!important}
.text-danger{color:var(--md-sys-color-error)!important}
.text-secondary,.text-muted{color:var(--md-sys-color-on-surface-variant)!important}

/* Cards — variante "Outlined" do M3 (borda, sem elevação, com state-layer sutil ao pressionar) */
.card{border:1px solid var(--md-sys-color-outline-variant)!important;border-radius:var(--md-sys-shape-corner-large)!important;background-color:var(--md-sys-color-surface);box-shadow:var(--md-sys-elevation-level0);transition:background-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard)}
.card:hover{background-color:var(--md-sys-color-surface-container-low)}
.card:active{background-color:var(--md-sys-color-surface-container)}
.list-group-item{background-color:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface);border-color:var(--md-sys-color-outline-variant);transition:background-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard)}
.list-group-item[onclick]:hover{background-color:var(--md-sys-color-surface-container-low)}
.list-group-item[onclick]:active{background-color:var(--md-sys-color-surface-container)}
.cat-row-list{display:flex;flex-direction:column;gap:8px}
.cat-row-card{border-radius:var(--md-sys-shape-corner-medium)!important;border:1px solid var(--md-sys-color-outline-variant)!important;padding:14px 16px}

/* Filtro + ordenação (Listagem) — próximos e centralizados na tela, em
   vez de espalhados nas pontas */
#listing-filter-sort-row{justify-content:center!important;gap:32px!important}

.profile-item{background-color:var(--md-sys-color-surface);border:1px solid var(--md-sys-color-outline-variant);border-radius:var(--md-sys-shape-corner-medium);padding:14px 16px;margin:8px 0;cursor:pointer;transition:background-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard)}
.profile-item:hover{background-color:var(--md-sys-color-surface-container-low)}
.profile-item:active{background-color:var(--md-sys-color-surface-container)}

/* Accordion de itens independentes (Privacidade/LGPD) — cada <details>
   abre/fecha por conta própria, sem afetar os outros */
.privacy-accordion-item{background-color:var(--md-sys-color-surface);border:1px solid var(--md-sys-color-outline-variant);border-radius:var(--md-sys-shape-corner-medium);padding:14px 16px}
.privacy-accordion-item summary{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;font-weight:600;font-size:.875rem;list-style:none}
.privacy-accordion-item summary::-webkit-details-marker{display:none}
.privacy-accordion-chevron{font-size:1.2rem;color:var(--md-sys-color-on-surface-variant);transition:transform var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);flex-shrink:0}
.privacy-accordion-item[open] .privacy-accordion-chevron{transform:rotate(180deg)}

/* Swipe pra confirmar/desfazer status do lançamento — o card (.swipe-card-front)
   desliza por cima de duas camadas de fundo fixas (esquerda = confirmar,
   direita = voltar a pendente), reveladas conforme o arrasto. */
.swipe-card-wrap{position:relative;overflow:hidden;border-radius:var(--md-sys-shape-corner-medium)}
.swipe-bg{position:absolute;top:0;bottom:0;width:50%;display:flex;align-items:center;padding:0 20px}
.swipe-bg .material-symbols-outlined{font-size:1.4rem}
.swipe-bg-left{left:0;justify-content:flex-start;border-radius:var(--md-sys-shape-corner-medium) 0 0 var(--md-sys-shape-corner-medium);background:var(--md-extended-color-success-color-container);color:var(--md-extended-color-success-on-color-container)}
.swipe-bg-right{right:0;justify-content:flex-end;border-radius:0 var(--md-sys-shape-corner-medium) var(--md-sys-shape-corner-medium) 0;background:var(--md-sys-color-surface-variant);color:var(--md-sys-color-on-surface-variant)}
.swipe-card-front{position:relative;touch-action:pan-y;background-color:var(--md-sys-color-surface)}

/* Arrastar categoria sem grupo pra dentro de um grupo, na tela de Categorias */
.draggable-cat-card{touch-action:none;user-select:none;-webkit-user-select:none}
.drop-target-group{transition:background-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),box-shadow var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard)}
.drop-target-group.drop-target-active{background-color:var(--md-sys-color-primary-container)!important;box-shadow:inset 0 0 0 2px var(--md-sys-color-primary)}

/* Some com #listing-table-header (cabeçalho de colunas da Listagem,
   só existe no desktop) quando não há lançamentos no período — precisa
   do #id junto (especificidade maior que só a classe) pra vencer o
   #listing-table-header{display:grid!important} de responsive.css,
   carregado depois deste arquivo (empate de !important vai pra ordem) */
#listing-table-header.listing-header-force-hide{display:none!important}

/* Toast — role "inverse-surface" (spec M3 pra snackbar) */
.toast{background-color:var(--md-sys-color-inverse-surface)!important;color:var(--md-sys-color-inverse-on-surface)!important;border-radius:var(--md-sys-shape-corner-extra-small);box-shadow:var(--md-sys-elevation-level3)}

/* ── Ripple M3 — feedback tátil em elementos interativos (ver js/ripple.js) ── */
.btn,.list-group-item,.profile-item,.cs-item{position:relative;overflow:hidden}
.md-ripple{position:absolute;border-radius:50%;background:currentColor;opacity:.16;transform:scale(0);pointer-events:none;animation:md-ripple-anim var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard-decelerate) forwards}
@keyframes md-ripple-anim{to{transform:scale(1);opacity:0}}

/* ── Circular progress indicator M3 (indeterminado) — https://m3.material.io/components/progress-indicators
   usado em botões durante ações assíncronas (ver setBtnLoading() em js/data.js) ── */
.m3-spinner{display:inline-block;width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;opacity:.9;vertical-align:-3px;animation:m3-spin var(--md-sys-motion-duration-long2) linear infinite}
@keyframes m3-spin{to{transform:rotate(360deg)}}
.btn:disabled{cursor:not-allowed}

/* ── Linear progress indicator M3 (indeterminado) — carregamento de tela inteira ── */
.m3-linear-progress{position:absolute;top:0;left:0;right:0;height:3px;overflow:hidden;background:var(--md-sys-color-secondary-container);z-index:600;display:none}
.m3-linear-progress.active{display:block}
.m3-linear-progress::after{content:'';position:absolute;top:0;left:0;height:100%;width:40%;background:var(--md-sys-color-primary);border-radius:var(--md-sys-shape-corner-full);animation:m3-linear-indeterminate var(--md-sys-motion-duration-long4) var(--md-sys-motion-easing-standard) infinite}
@keyframes m3-linear-indeterminate{0%{left:-40%}100%{left:100%}}

/* ── Telas muito estreitas (≤380px, ex.: 320px) ──
   Única exceção à convenção do projeto de manter @media só em
   css/responsive.css (lá é pro breakpoint desktop) — aqui é o oposto,
   um ajuste fino pra baixo, só de fonte/espaçamento, sem mudar layout/
   estrutura. Sem isso, os chips de tipo (Receita/Despesa/Investimento)
   e os pills de "Repetir a cada" ficavam menores que seu próprio texto
   (button.status-cell tem overflow:hidden, pro efeito de ripple) e o
   texto cortava, ou vazava pra fora do .app (que tem overflow:hidden)
   sem gerar scroll — ambos invisíveis num teste só de scrollWidth. */
@media (max-width: 380px) {
  .status-cell{font-size:.68rem;padding:4px 8px!important}
  .status-cell .material-symbols-outlined{font-size:.9rem!important}
  #cats-type-tabs,#form-type-tabs{gap:4px!important}
  #cats-tab-receita,#cats-tab-despesa,#cats-tab-investimento,
  #tab-tipo-receita,#tab-tipo-despesa,#tab-tipo-investimento{gap:4px!important}

  #repetir-pills{gap:4px!important}
  #repetir-pills .form-check-label{font-size:.72rem}
  #repetir-pills .form-check-input{margin-right:2px}

  /* legenda dos gráficos da Home — "sem comparação" (palavra única de
     10 letras, "comparação", não quebra no meio) estourava a coluna
     de ~85px e virava "sem" / "comparação" em 2 linhas */
  .smaller{font-size:.56rem;white-space:nowrap}
}