/* Camada visual global da North.
   Este arquivo e carregado pelo _north_head.html em paginas publicas,
   autenticacao, landing page e todas as telas internas. */
:root{
  --north-global-surface:#18181b;
  --north-global-border:rgba(255,255,255,.10);
  --north-global-transition:color 200ms ease-in-out,background-color 200ms ease-in-out,
    border-color 200ms ease-in-out,box-shadow 200ms ease-in-out,opacity 200ms ease-in-out,
    transform 200ms ease-in-out;
  --north-emerald:#10b981;
  --north-emerald-bright:#22c55e;
  --north-emerald-deep:#059669;
}

body{
  --gold:var(--north-emerald-bright);
  --primary:var(--north-emerald);
  --primary-strong:var(--north-emerald-deep);
  --green:var(--north-emerald-bright);
  --gold-soft:rgba(16,185,129,.14);
  --orange-glow:var(--north-emerald-bright);
}

/* Transicao global limitada ao que nao recalcula o layout durante a animacao.
   A declaracao explicita impede que componentes legados voltem a parecer secos. */
body :is(
  a[href],button,input,select,textarea,summary,[role="button"],
  .tab,.mes-btn,.mes-arrow,.tipo-btn,.pag-btn,.site-nav-link,
  .nav-group-title,.sidebar-action,.ui-select-option
){
  transition:var(--north-global-transition)!important;
}

/* Superficie premium compartilhada. O tema claro mantem suas superficies claras. */
html:not([data-tema="claro"]) body :is(
  .card:not(.north-auth-card),.contas-panel,.chart-card,.section,.filter-panel,
  .summary,.metric,.item,.income-item,.north-account-mini,.north-recent,
  .position,.asset,.subscription,.installment,.goal,.invoice,.fixed-income,
  .feature-grid article,.plan-card,.security-card
){
  background-color:var(--north-global-surface)!important;
  border-color:var(--north-global-border);
}

/* Primary actions: rounded-lg/rounded-xl e feedback de hover consistente. */
body :is(
  button[type="submit"],.btn,.btn-gold,.contas-btn,.button,.land-button,
  .ai-entry-button,.north-insights-action,.north-filter-apply,.period-apply,
  .expense-tool,.entry-tool,.north-quick-actions>a:first-child
):not(.icon-btn):not(.sidebar-close):not(.mobile-menu-toggle):not(.btn-secondary):not(.btn-danger):not(.btn-cancel):not(.contas-danger):not(.secondary){
  border-radius:999px!important;
  border-color:rgba(134,239,172,.34)!important;
  background:linear-gradient(135deg,#22c55e 0%,#10b981 55%,#059669 100%)!important;
  color:#09090b!important;
  -webkit-text-fill-color:#09090b!important;
  font-weight:700!important;
  text-shadow:none!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 8px 22px rgba(16,185,129,.22)!important;
  transition:var(--north-global-transition)!important;
}

/* Texto e icones internos herdam branco puro mesmo quando um componente
   legado define sua propria cor em spans, strong, i ou SVG. */
body :is(
  button[type="submit"],.btn,.btn-gold,.contas-btn,.button,.land-button,
  .ai-entry-button,.north-insights-action,.north-filter-apply,.period-apply,
  .expense-tool,.entry-tool,.north-quick-actions>a:first-child
):not(.icon-btn):not(.sidebar-close):not(.mobile-menu-toggle):not(.btn-secondary):not(.btn-danger):not(.btn-cancel):not(.contas-danger):not(.secondary) :is(span,strong,b,i,svg,.north-icon){
  color:#09090b!important;
  -webkit-text-fill-color:#09090b!important;
}

body.landing .mock-filters b{
  background:linear-gradient(135deg,#22c55e 0%,#10b981 55%,#059669 100%)!important;
  color:#09090b!important;
  -webkit-text-fill-color:#09090b!important;
  font-weight:700!important;
}

@media(hover:hover) and (pointer:fine){
  body :is(
    button[type="submit"],.btn,.btn-gold,.contas-btn,.button,.land-button,
    .ai-entry-button,.north-insights-action,.north-filter-apply,.period-apply,
    .expense-tool,.entry-tool,.north-quick-actions>a:first-child
  ):not(.icon-btn):not(.sidebar-close):not(.mobile-menu-toggle):not(.btn-secondary):not(.btn-danger):not(.btn-cancel):not(.contas-danger):not(.secondary):hover{
    transform:translateY(-1px);
    border-color:rgba(187,247,208,.58)!important;
    box-shadow:0 10px 26px rgba(0,0,0,.24),0 0 20px rgba(16,185,129,.4)!important;
  }

  html:not([data-tema="claro"]) body :is(
    .card:not(.north-auth-card),.contas-panel,.chart-card,.section,.filter-panel,
    .summary,.metric,.item,.income-item,.north-account-mini,.north-recent,
    .position,.asset,.subscription,.installment,.goal,.invoice,.fixed-income,
    .feature-grid article,.plan-card,.security-card
  ):hover{
    border-color:color-mix(in srgb,var(--gold,#22c55e) 34%,rgba(255,255,255,.10));
  }
}

body :is(
  button[type="submit"],.btn,.btn-gold,.contas-btn,.button,.land-button,
  .ai-entry-button,.north-insights-action,.north-filter-apply,.period-apply,
  .expense-tool,.entry-tool,.north-quick-actions>a:first-child
):not(.icon-btn):not(.sidebar-close):not(.mobile-menu-toggle):not(.btn-secondary):not(.btn-danger):not(.btn-cancel):not(.contas-danger):not(.secondary):active{
  transform:translateY(0) scale(.985);
}

@media(prefers-reduced-motion:reduce){
  body :is(a[href],button,input,select,textarea,summary,[role="button"]){
    transition:none!important;
  }
}

/* Atalhos de fatura: mostram onde a compra entrou e o que ainda falta pagar. */
.summary-link{display:inline-block;margin-top:6px;color:var(--muted,#a1a1aa);font-size:12px;text-decoration:none}
.summary-link:hover{color:var(--text,#fafafa);text-decoration:underline}
.north-open-invoices{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin-top:12px}
.north-open-invoice{display:grid;gap:3px;padding:12px 14px;border:1px solid var(--border,#2c3341);border-radius:12px;color:inherit;text-decoration:none}
.north-open-invoice span,.north-open-invoice small{color:var(--muted,#a1a1aa);font-size:12px}
.north-open-invoice strong{font-size:18px}
.north-open-invoice:hover,.north-open-invoice.is-selected{border-color:var(--north-emerald-bright)}
.north-open-invoice.is-atrasada small{color:#f87171}
a.invoice{color:inherit;text-decoration:none}