/* assets/css/layout.css
   Estrutura: menubar (sempre flutuante), barra lateral de
   vidro (sidebar / source list), área de conteúdo. A página rola no
   documento — é o que permite a menubar "descolar" como nas páginas da Apple. */

/* ── Menubar ───────────────────────────────────────────────────────────
   Sempre flutuante: cápsula de vidro presa a 10px do topo enquanto a página
   rola por baixo, com borda refratada e sombra de flutuação. */
.menubar{
  position:sticky;top:10px;z-index:60;
  display:flex;align-items:center;gap:12px;
  min-height:var(--menubar-h);padding:8px 12px;margin:10px 10px 0;
  border-radius:var(--r);border:1px solid var(--vidro-borda);
  background:var(--vidro-fundo);
  -webkit-backdrop-filter:blur(var(--vidro-blur)) saturate(190%);backdrop-filter:blur(var(--vidro-blur)) saturate(190%);
  box-shadow:inset 0 1px 0 var(--vidro-brilho),inset 0 -1px 0 var(--vidro-sombra-interna),var(--sombra-flutuante);
}
.menubar-marca{display:flex;align-items:center;gap:10px;min-width:0;margin-right:auto}
.menubar-marca b{font-size:17px;letter-spacing:-.02em}
.menubar-contexto{font-size:14px;color:var(--texto-3);padding-left:10px;border-left:1px solid var(--borda-forte);white-space:nowrap}
.menubar-acoes,.header-actions{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}
.header-atalhos{display:contents}

/* Menubar do app financeiro */
#appHeader{gap:10px}
.header-context{display:flex;align-items:center;gap:6px;min-width:0;margin-right:auto}
.header-breadcrumb{font-size:15px;font-weight:650;color:var(--texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.015em}
.notification-bell{position:relative}
.notification-bell b{position:absolute;right:2px;top:2px;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pilula);
  background:var(--vermelho);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;box-shadow:0 0 0 2px var(--fundo)}
#saveStatus{font-size:13px;color:var(--texto-3);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:4px}
#saveStatus[data-state=saved]{color:var(--verde)}
#saveStatus[data-state=error]{color:var(--vermelho);white-space:normal}
#saveStatus[data-state=saving],#saveStatus[data-state=draft]{color:var(--laranja)}
.aviso-demo{margin-right:6px}

/* ── App: barra lateral + conteúdo ─────────────────────────────────────── */
#app{min-height:100dvh;align-items:flex-start}
#sidebar{
  position:sticky;top:10px;z-index:70;flex:none;
  width:var(--sidebar-w);height:calc(100dvh - 20px);margin:10px 0 10px 10px;
  display:flex;flex-direction:column;overflow:hidden;
  transition:width var(--medio) var(--curva),transform var(--medio) var(--curva);
}
.sb-logo{display:flex;align-items:center;gap:12px;padding:16px 16px 12px}
.sb-logo-text{min-width:0}
.sb-logo-title{font-size:17px;font-weight:700;letter-spacing:-.02em}
.sb-logo-sub{font-size:13px;color:var(--texto-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

nav#nav{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:4px 10px 10px;scrollbar-width:thin}
.nav-group{font-size:12px;font-weight:600;color:var(--texto-3);padding:16px 10px 6px;letter-spacing:0}
.nav-item{
  position:relative;display:flex;align-items:center;gap:11px;
  min-height:38px;padding:0 10px;margin:1px 0;border-radius:12px;
  font-size:14px;font-weight:500;color:var(--texto-2);cursor:pointer;
  transition:background var(--rapido),color var(--rapido);
}
.nav-item:hover{background:color-mix(in srgb,var(--texto) 7%,transparent);color:var(--texto)}
.nav-item.active{background:var(--bronze-suave);color:var(--texto);font-weight:650;box-shadow:inset 0 0 0 1px var(--bronze-borda)}
.nav-item.active .nav-icon{color:var(--bronze-texto)}
.nav-icon{display:grid;place-items:center;width:22px;flex:none;color:var(--texto-3)}
.nav-item>span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.sb-bottom{padding:10px;border-top:1px solid var(--borda);display:grid;gap:8px}
.sb-user{display:flex;align-items:center;gap:10px;padding:4px 6px;min-width:0}
.sb-user-info{min-width:0}
.sb-user-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-user-role{font-size:12px;color:var(--texto-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-actions{display:flex;gap:6px}
.btn-sm{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:34px;padding:0 10px;border-radius:12px;border:1px solid var(--borda);
  background:var(--papel-2);color:var(--texto-2);font-size:13px;font-weight:600;cursor:pointer;
}
.btn-sm:hover{color:var(--texto);border-color:var(--bronze-borda)}
.btn-export{color:var(--bronze-texto)}
.btn-logout{display:flex;align-items:center;gap:11px;min-height:38px;padding:0 15px;border:0;border-radius:12px;background:transparent;color:var(--texto-3);font-size:13px;font-weight:500}
.btn-logout:hover{color:var(--vermelho);background:var(--vermelho-suave)}
#importFile{display:none}

#main{flex:1;min-width:0;display:flex;flex-direction:column;min-height:100dvh}
#pageContainer{padding:18px 24px 56px;width:100%;max-width:1520px}
.gaveta-scrim{display:none}

/* ── Página ────────────────────────────────────────────────────────────── */
.page{display:none}
.page.active{display:block;animation:entrar var(--medio) var(--curva)}
@keyframes entrar{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.page-title,.finance-workspace h1{font-size:var(--t-titulo-1);font-weight:750;letter-spacing:-.03em;line-height:1.1;margin-bottom:6px}
.page-sub{color:var(--texto-2);font-size:15px;margin-bottom:20px;max-width:72ch}
.finance-workspace h2{font-size:var(--t-titulo-3);margin:18px 0 10px}
.finance-workspace h3,.card h3{font-size:var(--t-destaque);margin:0 0 10px}
.finance-workspace p{color:var(--texto-2);line-height:1.55}
/* Rótulo acima do título: escrito em maiúsculas nas telas, exibido em caixa de frase. */
.eyebrow{font-size:13px;font-weight:600;color:var(--bronze-texto);margin-bottom:6px;text-transform:lowercase}
.eyebrow::first-letter{text-transform:uppercase}
.section-hdr{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.section-hdr h3{font-size:var(--t-destaque)}
.section-title{font-size:var(--t-destaque);font-weight:700;margin:20px 0 10px}

/* ── Fim da barra lateral: notificações, ações, sair e recolher ─────────── */
.sb-linha{display:flex;align-items:center;gap:11px;min-height:40px;padding:0 6px 0 15px;border-radius:12px}
.sb-linha-icone{display:grid;place-items:center;width:22px;flex:none;color:var(--texto-3)}
.sb-linha-texto{flex:1;min-width:0;font-size:14px;font-weight:500;color:var(--texto-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-recolher{display:flex;align-items:center;gap:11px;width:100%;min-height:38px;padding:0 15px;border:0;border-radius:12px;
  background:transparent;color:var(--texto-3);font-size:13px;font-weight:500;text-align:left;white-space:nowrap;overflow:hidden}
.sb-recolher:hover{background:color-mix(in srgb,var(--texto) 7%,transparent);color:var(--texto)}
.sb-recolher .ico{transition:transform var(--medio) var(--curva)}
#app.sidebar-collapsed .sb-recolher .ico{transform:rotate(180deg)}
.menu-celular{display:none}

/* Recolher sem pulos: os ícones ficam sempre na mesma coluna (15px da borda
   interna), a barra só estreita e os textos somem por baixo dela. */
#sidebar{transition:width var(--medio) var(--curva),transform var(--medio) var(--curva)}
.nav-item{padding:0 15px}
.sb-logo{padding:16px 0 12px 19px}
.sb-user{padding:4px 0 4px 9px}
.btn-logout{padding:0 15px;justify-content:flex-start}
:is(.sb-logo-text,.sb-user-info,.nav-item>span:last-child,.sb-linha-texto,.sb-recolher span,.btn-logout span,.nav-group){transition:opacity var(--rapido) var(--curva)}
#app.sidebar-collapsed #sidebar{width:var(--sidebar-w-collapsed)}
#app.sidebar-collapsed :is(.sb-logo-text,.sb-user-info,.nav-item>span:last-child,.sb-linha-texto,.sb-recolher span,.btn-logout span){opacity:0;pointer-events:none}
#app.sidebar-collapsed .nav-group{opacity:0;height:10px;padding:0;overflow:hidden}
#app.sidebar-collapsed .nav-item{justify-content:flex-start;padding:0 15px}
#app.sidebar-collapsed .sb-logo{justify-content:flex-start;padding:16px 0 12px 19px}
#app.sidebar-collapsed .sb-user{justify-content:flex-start;padding:4px 0 4px 9px}
#app.sidebar-collapsed .sb-actions{flex-direction:column}
#app.sidebar-collapsed .btn-sm{justify-content:center;padding:0}
#app.sidebar-collapsed .btn-sm span{display:none}
#app.sidebar-collapsed .btn-logout{justify-content:flex-start}
/* Recolhida, o switch fica sozinho na linha, centralizado no trilho. */
#app.sidebar-collapsed .sb-linha{padding:0;justify-content:center}
#app.sidebar-collapsed .sb-linha-icone,#app.sidebar-collapsed .sb-linha-texto{display:none}