/* ============================================================================
   NextLayer — Layout / Shell (sidebar + topbar + conteúdo)
   ========================================================================== */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: 100vh;
  height: 100vh;
  overflow: hidden;
  transition: grid-template-columns var(--dur) var(--ease);
}

/* ---- Sidebar ------------------------------------------------------------ */
.sidebar {
  grid-row: 1;
  display: flex; flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow: hidden;
}
.sidebar-brand {
  display: flex; align-items: center; gap: var(--space-3);
  height: var(--topbar-h); padding: 0 var(--space-4); width: 100%;
  border-bottom: 1px solid var(--border);
  flex: none; text-align: left;
  transition: background var(--dur-fast) var(--ease);
}
.sidebar-brand:hover { background: var(--surface-2); }
.brand-mark {
  width: 28px; height: 28px; border-radius: 8px; flex: none;
  background: var(--brand); color: var(--brand-contrast);
  display: grid; place-items: center; font-weight: var(--fw-bold); font-size: 14px;
  box-shadow: var(--shadow-1);
}
.brand-name { font-weight: var(--fw-semibold); font-size: var(--text-md); letter-spacing: -0.01em; }
.brand-logo { height: 28px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; display: block; }
.brand-logo-dark { display: none; }
[data-theme="dark"] .brand-logo-light { display: none; }
[data-theme="dark"] .brand-logo-dark { display: block; }

.sidebar-scroll { flex: 1; overflow-y: auto; padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); }

.nav-section { margin-top: var(--space-4); }
.nav-section:first-child { margin-top: 0; }
.nav-label {
  padding: var(--space-2) var(--space-3) var(--space-1);
  font-size: var(--text-xs); font-weight: var(--fw-medium);
  color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em;
}
.nav-item {
  display: flex; align-items: center; gap: var(--space-3); width: 100%;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-muted);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  text-align: left;
}
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active { background: var(--brand-soft); color: var(--brand); }
.nav-item .icon { width: 18px; height: 18px; flex: none; }
.nav-item .count { margin-left: auto; font-size: var(--text-xs); color: var(--text-faint); font-variant-numeric: tabular-nums; }

.sidebar-foot { border-top: 1px solid var(--border); padding: var(--space-3); flex: none; }

/* avatar no topbar (menu: configurações / sair) */
.topbar-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  transition: box-shadow var(--dur-fast) var(--ease);
}
.topbar-avatar:hover .avatar { box-shadow: var(--shadow-2); }
.topbar-avatar .avatar { width: 28px; height: 28px; font-size: 11px; background: var(--brand); color: var(--brand-contrast); transition: box-shadow var(--dur-fast) var(--ease); }

/* ---- Main / topbar ------------------------------------------------------ */
.main { grid-row: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }

.topbar {
  height: var(--topbar-h); flex: none;
  display: flex; align-items: center; gap: var(--space-3);
  padding: 0 var(--space-5);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(8px);
}
.topbar > .col { min-width: 0; flex: 0 1 auto; overflow: hidden; }
.topbar .page-title { font-size: var(--text-md); font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-spacer { flex: 1; }
.topbar .menu-btn { display: inline-flex; } /* recolher (desktop) / abrir drawer (mobile) */

/* ---- Sidebar recolhida (somente desktop) ------------------------------- */
@media (min-width: 921px) {
  .app.collapsed { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }
  .app.collapsed .brand-name,
  .app.collapsed .nav-item > span,
  .app.collapsed .nav-item .count,
  .app.collapsed .nav-label { display: none; }
  .app.collapsed .sidebar-brand { justify-content: center; padding: 0; gap: 0; overflow: hidden; }
  .app.collapsed .brand-logo { height: 24px; max-width: 40px; object-position: left center; }
  .app.collapsed .sidebar-scroll { padding: var(--space-3) var(--space-2); align-items: center; }
  .app.collapsed .nav-item { justify-content: center; padding: var(--space-2); width: 44px; }
  .app.collapsed .nav-section { width: 100%; display: flex; flex-direction: column; align-items: center; }
  .app.collapsed .sidebar-foot { padding: var(--space-3) var(--space-2); display: flex; justify-content: center; }
}

.content { flex: 1; overflow-y: auto; }
.content-pad { padding: var(--space-6) var(--space-5); max-width: var(--content-max); margin: 0 auto; width: 100%; }
.content-pad.wide { max-width: 100%; }

.page-header { margin-bottom: var(--space-5); }
.page-header h1 { font-size: var(--text-xl); }
.page-header .lead { color: var(--text-muted); margin-top: var(--space-1); font-size: var(--text-sm); }

/* ---- Reveal escalonado (page load) ------------------------------------- */
.reveal { opacity: 0; transform: translateY(8px); animation: reveal 0.5s var(--ease) forwards; }
.reveal:nth-child(1) { animation-delay: 0.02s; }
.reveal:nth-child(2) { animation-delay: 0.07s; }
.reveal:nth-child(3) { animation-delay: 0.12s; }
.reveal:nth-child(4) { animation-delay: 0.17s; }
.reveal:nth-child(5) { animation-delay: 0.22s; }
.reveal:nth-child(6) { animation-delay: 0.27s; }
@keyframes reveal { to { opacity: 1; transform: none; } }

/* ---- Stat cards (dashboard) -------------------------------------------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-1);
}
.stat .label { font-size: var(--text-xs); color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.stat .value { font-size: var(--text-2xl); font-weight: var(--fw-semibold); letter-spacing: -0.02em; margin-top: var(--space-2); font-variant-numeric: tabular-nums; }
.stat .delta { font-size: var(--text-xs); margin-top: var(--space-1); display: inline-flex; align-items: center; gap: 4px; }
.stat .delta.up { color: var(--success); }
.stat .delta.down { color: var(--danger); }

/* ---- Grids responsivos (combinam com .grid) ---------------------------- */
.cols-2  { grid-template-columns: 1fr 1fr; }
.cols-3  { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 760px) {
  .cols-2, .cols-3 { grid-template-columns: 1fr; }
}

/* ---- Mobile sidebar overlay -------------------------------------------- */
.scrim { display: none; position: fixed; inset: 0; background: rgba(20,18,15,0.4); z-index: 40; }

@media (max-width: 920px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; z-index: 50; top: 0; bottom: 0; left: 0; width: var(--sidebar-w);
    transform: translateX(-100%); transition: transform var(--dur) var(--ease);
    box-shadow: var(--shadow-3);
  }
  .app.nav-open .sidebar { transform: none; }
  .app.nav-open .scrim { display: block; }
  .topbar .menu-btn { display: inline-flex; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  /* cabeçalhos e barras de ferramentas empilham no celular */
  .page-header.spread { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .page-header.spread > .btn,
  .page-header.spread > .row { align-self: stretch; }
  /* botões de ação do cabeçalho quebram em vez de espremer o texto */
  .page-header.spread > .row { flex-wrap: wrap; }
  .toolbar-bar { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .toolbar-bar > .row { flex-wrap: wrap; }
  .toolbar-bar .input-search { width: 100% !important; }
  .toolbar-bar .input-search .input { width: 100%; }
}

@media (max-width: 560px) {
  .content-pad { padding: var(--space-5) var(--space-4); }
  .stat-grid { grid-template-columns: 1fr; }
  .topbar { padding: 0 var(--space-3); gap: var(--space-2); }
}