/* App shell: topbar fixa + conteúdo centralizado (mobile-first) + nav inferior.
   Em telas de PC (≥900px) a nav vira uma barra lateral fixa, agrupada por
   assunto em vez de escondida atrás de "Mais" — ver js/components/nav.js. */
#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}

.topbar__title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 500; }

.topbar__actions { display: flex; align-items: center; gap: var(--space-2); }

.avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-brand-100);
  color: var(--color-brand-700);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--fs-sm);
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Botão do "olho mágico" na topbar — ver js/lib/privacidade.js */
.topbar__icon-btn {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: transparent;
  color: var(--color-text-soft);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.topbar__icon-btn svg { width: 20px; height: 20px; }
.topbar__icon-btn:hover { background: var(--color-brand-100); color: var(--color-brand-700); }

main.view {
  flex: 1;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) calc(var(--nav-height) + var(--space-6));
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

/* ---------- Nav inferior (celular) ---------- */
.bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  height: var(--nav-height);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  display: flex;
  max-width: var(--max-width);
  margin: 0 auto;
}

.bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--color-text-faint);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.bottom-nav__item svg { width: 20px; height: 20px; }
.bottom-nav__item.is-active { color: var(--color-brand-600); }

.bottom-nav__fab {
  position: relative;
  top: -18px;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(155deg, var(--color-brand-500), var(--color-brand-700));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg);
}
.bottom-nav__fab svg { width: 24px; height: 24px; }

.section { margin-bottom: var(--space-5); }
.section__title {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-3);
}
.section__title h2 { font-size: var(--fs-md); color: var(--color-text-soft); text-transform: uppercase; letter-spacing: 0.04em; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

@media (min-width: 560px) {
  :root { --max-width: 520px; }
}

/* ---------- Barra lateral (PC) — escondida no celular ---------- */
.sidebar { display: none; }

/* Telas de PC: em vez de uma coluna estreita centralizada com faixas
   vazias nas laterais, a navegação vira barra lateral fixa à esquerda,
   agrupada por assunto (Finanças / Patrimônio / Planejamento) em vez de
   escondida atrás de "Mais" — e o conteúdo ganha bem mais largura útil. */
@media (min-width: 900px) {
  :root { --max-width: 880px; }

  .topbar, main.view {
    margin-left: var(--sidebar-width);
  }

  main.view {
    padding: var(--space-5) var(--space-6) var(--space-6);
  }

  .bottom-nav { display: none; }

  .sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: var(--sidebar-width);
    padding: var(--space-5) var(--space-3);
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    overflow-y: auto;
    z-index: 30;
  }

  .sidebar__brand { display: flex; align-items: center; gap: 10px; padding: 0 var(--space-2); }
  .sidebar__mark {
    width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
    background: var(--color-brand-600); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 600; font-size: 16px;
  }
  .sidebar__name { font-weight: 700; font-size: var(--fs-sm); line-height: 1.2; }
  .sidebar__name small { display: block; font-weight: 500; font-size: 10.5px; color: var(--color-text-faint); }

  .sidebar__groups { flex: 1; display: flex; flex-direction: column; gap: var(--space-4); }
  .sidebar__group { display: flex; flex-direction: column; gap: 2px; }
  .sidebar__group-label {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--color-text-faint); padding: 0 var(--space-2); margin-bottom: 4px;
  }
  .sidebar__item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px var(--space-2); border-radius: var(--radius-sm);
    color: var(--color-text-soft); font-size: var(--fs-sm); font-weight: 600;
  }
  .sidebar__item svg { width: 17px; height: 17px; }
  .sidebar__item:hover { background: var(--color-surface-2); }
  .sidebar__item.is-active { background: var(--color-brand-50); color: var(--color-brand-600); }

  .sidebar__add {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--color-brand-600); color: #fff;
    border-radius: var(--radius-sm); padding: 11px;
    font-size: var(--fs-sm); font-weight: 700;
  }
  .sidebar__add svg { width: 16px; height: 16px; }

  .sidebar__account {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: var(--space-3) var(--space-2) 0; border-top: 1px solid var(--color-border);
    color: var(--color-text); font-size: var(--fs-sm); font-weight: 600; text-align: left;
  }
  .sidebar__account-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sidebar__account svg { width: 15px; height: 15px; color: var(--color-text-faint); flex-shrink: 0; }
  .sidebar__account .avatar { width: 28px; height: 28px; font-size: 11px; flex-shrink: 0; }
}