/**
 * style.css — Agregador CSS modular do FinançasPro v2.0
 *
 * Arquitetura:
 *   design-system.css   ← tokens globais (carregado via <link> no HTML)
 *   base.css            ← reset, body, header, animações
 *   components/         ← botões, cards, forms, nav, modals, toasts
 *   layouts/            ← dashboard, extrato, orçamento, config
 *   features/           ← form-novo, auth
 *   themes/dark-mode    ← dark mode consolidado
 *   utilities/          ← a11y, responsivo, performance
 *
 * ATENÇÃO: Não edite este arquivo diretamente.
 * Edite o módulo específico e os tokens em design-system.css.
 */

/* ── Base ─────────────────────────────────────────────────── */
@import './base.css';

/* ── Componentes ──────────────────────────────────────────── */
@import './components/buttons.css';
@import './components/cards.css';
@import './components/forms.css';
@import './components/navigation.css';
@import './components/modals.css';
@import './components/toasts.css';
@import './components/page-superficie.css';

/* ── Layouts ──────────────────────────────────────────────── */
@import './layouts/dashboard.css';
@import './layouts/extrato.css';
@import './layouts/orcamento.css';
@import './layouts/config.css';

/* ── Features ─────────────────────────────────────────────── */
@import './features/form-novo.css';
@import './features/auth.css';
@import './features/skeleton.css';
@import './features/onboarding.css';

/* ── Dark mode consolidado ────────────────────────────────── */
@import './themes/dark-mode.css';

/* ── Utilitários ──────────────────────────────────────────── */
@import url('./utilities/accessibility.css');
@import url('./utilities/responsive.css');
@import url('./utilities/breakpoints.css');
@import './utilities/performance.css';
@import './utilities/ux-polish.css';
@import './utilities/mobile-app.css';

/* ── Fase 8: IA Nativa ────────────────────────────────────── */
@import './features/ia.css';

/* ── Fase 4: Experiência ─────────────────────────── */
@import './features/contas-pagar.css';
@import './features/metas.css';
@import './features/assinaturas.css';
@import './features/relatorios.css';
@import './features/patrimonio.css';
@import './features/anexos.css';
@import './features/billing.css';
@import './features/open-finance.css';
@import './features/superficie.css';

/* ── Acabamento visual (overrides finais) ────────────────── */

:root {
  --surface-1:        rgba(255, 255, 255, 0.95);
  --surface-2:        rgba(255, 255, 255, 0.80);
  --border-soft:      rgba(18, 25, 21, 0.07);
  /* Apelidos legados: caem na escala de elevação do design-system, senão viram
     uma terceira família de sombras concorrendo com as outras duas. */
  --shadow-soft:      var(--elevacao-1);
  --shadow-lift:      var(--elevacao-2);
  --sidebar-width:    240px;
}

body {
  background: #f6fbf8;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Header mobile ─────────────────────────────────────────── */

header {
  padding: 14px var(--space-5);
  background: var(--color-primary-600);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  box-shadow: var(--elevacao-2);
}

header h1 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.01em;
}

main {
  padding: 20px 16px;
}

/* ── Superfícies de cartão ─────────────────────────────────── */

.formulario,
.cfg-card,
.cfg-perfil-card,
.resumo-item,
.indicador-card,
.ext-grupo-list,
.orc-regra-item,
.orc-header,
.orc-renda-setup {
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-soft);
  border-radius: var(--radius-xl);
}

/* Hover lift em cards de config */
.cfg-card {
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.cfg-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}

/* ── Navegação inferior no celular ─────────────────────────── */

.nav-bottom {
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: 460px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-soft);
  overflow: hidden;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  background: rgba(255, 255, 255, 0.90);
  box-shadow:
    0 16px 40px rgba(18, 25, 21, 0.18),
    0 4px 12px rgba(18, 25, 21, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.nav-btn {
  min-height: 64px;
}

.nav-btn.ativo {
  background: rgba(18, 105, 78, 0.07);
}

.nav-emoji { font-size: var(--font-size-xl); }

/* ── Campos de formulário ──────────────────────────────────── */

.form-group input,
.form-group select,
.form-group textarea,
.form-select{
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-group input::placeholder,
.form-group textarea::placeholder{
  color: #9aaea3;
}

/* ── Toast com blur ────────────────────────────────────────── */

.toast {
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px);
}

/* ── Hover em transações do extrato ────────────────────────── */

.ext-tx:hover { background: rgba(18, 105, 78, 0.04); }

/* ── Dark mode — body e cards ───────────────────────────────── */

[data-theme="dark"] body {
  background: #0c1710;
}

[data-theme="dark"] .formulario,
[data-theme="dark"] .cfg-card,
[data-theme="dark"] .cfg-perfil-card,
[data-theme="dark"] .resumo-item,
[data-theme="dark"] .indicador-card,
[data-theme="dark"] .ext-grupo-list,
[data-theme="dark"] .orc-regra-item,
[data-theme="dark"] .orc-header,
[data-theme="dark"] .orc-renda-setup {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: var(--elevacao-1);
}

[data-theme="dark"] .nav-bottom {
  background: rgba(18, 28, 20, 0.92);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea,
[data-theme="dark"] .form-select{
  background: rgba(10, 20, 14, 0.85);
}

/* ── Fase 9: Sidebar responsiva ─────────────────────────────── */

.sidebar { display: none; }

@media (min-width: 768px) {
  body {
    max-width: none;
    margin: 0;
    padding-bottom: 0;
  }

  header { display: none; }
  .nav-bottom { display: none !important; }

  /* ── Sidebar container ────────────────────────── */
  .sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--color-bg-card);
    border-right: 1px solid var(--color-border-light);
    z-index: var(--z-nav);
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: var(--elevacao-2);
  }

  /* ── Sidebar Brand ────────────────────────────── */
  .sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 22px 20px 20px;
    background: var(--color-primary-600);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
  }

  /* Brilho decorativo no brand */
  .sidebar-brand::after {
    content: '';
    position: absolute;
    right: -30px;
    top: -30px;
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 50%;
    pointer-events: none;
  }

  .sidebar-logo {
    font-size: var(--font-size-3xl);
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
  }

  .sidebar-title {
    color: var(--color-white);
    font-weight: 800;
    font-size: var(--font-size-base);
    letter-spacing: -0.3px;
    position: relative;
    z-index: 1;
  }

  /* ── Sidebar Nav ──────────────────────────────── */
  .sidebar-nav {
    display: flex;
    flex-direction: column;
    padding: 12px 10px;
    flex: 1;
    gap: 2px;
  }

  /* ── Main com sidebar ─────────────────────────── */
  main {
    margin-left: var(--sidebar-width);
    max-width: none;
    padding: 32px 40px;
  }

  /* Auth overlay cobre tudo, incluindo sidebar */
  #auth-overlay {
    left: 0 !important;
    width: 100% !important;
  }
}

/* ── Desktop largo: app-shell centralizado ──────────────────────
   Em telas grandes o conteúdo passa a ter uma largura máxima
   confortável e é centralizado no espaço à direita da sidebar,
   evitando o efeito de "mobile esticado". Sem efeito < 1280px
   (a conta max(...) só ultrapassa a sidebar quando há espaço). */
@media (min-width: 1280px) {
  main {
    max-width: 1200px;
    margin-left: max(var(--sidebar-width), calc((100% - 1200px) / 2));
    margin-right: auto;
  }
}

/* ── Dark mode sidebar ──────────────────────────────────────── */

[data-theme="dark"] .sidebar {
  background: var(--color-bg-dark-card);
  border-right-color: rgba(255, 255, 255, 0.06);
  box-shadow: var(--elevacao-2);
}

[data-theme="dark"] .sidebar-brand {
  background: #002d1a;
}