/* Estrutura: tab bar no celular, menu lateral a partir de 720px */
.app { display: flex; flex-wrap: wrap; min-height: 100vh; min-height: 100dvh; background: var(--bg); }

.sidebar {
  display: none;
  flex: 0 0 var(--sidebar-w);
  flex-direction: column;
  gap: var(--s-9);
  padding: var(--s-10) var(--s-8);
  background: var(--surface);
  border-right: 1px solid var(--border);
}

.main {
  flex: 1 1 0;
  min-width: 0;
  padding: calc(var(--s-8) + var(--safe-top)) clamp(16px, 3vw, 40px) calc(var(--tabbar-h) + var(--safe-bottom) + var(--s-12));
}
.container { max-width: var(--container); margin: 0 auto; display: flex; flex-direction: column; gap: var(--s-9); }

@media (min-width: 720px) {
  .sidebar { display: flex; }
  .main { padding: var(--s-16) clamp(16px, 3vw, 40px) var(--s-24); }
  .tabbar { display: none !important; }
  .container { gap: var(--s-12); }
}

/* Marca */
.brand { display: flex; align-items: center; gap: var(--s-5); font-size: 1.0625rem; font-weight: 700; letter-spacing: -.02em; }
.brand__mark { width: 32px; height: 32px; border-radius: var(--r-md); background: var(--ink); color: var(--surface); display: grid; place-items: center; }

/* Navegação lateral */
.nav-group { display: flex; flex-direction: column; gap: var(--s-2); }
.nav-label { font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 0 var(--s-5); margin-bottom: var(--s-2); }
.nav-item {
  display: flex; align-items: center; gap: var(--s-6);
  height: var(--h-field); padding: 0 var(--s-5); border-radius: var(--r-nav);
  font-size: .875rem; font-weight: 500; color: var(--text-2); text-decoration: none; width: 100%; text-align: left;
}
.nav-item:hover { background: var(--nav-hover); color: var(--text-2); text-decoration: none; }
.nav-item[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav-item svg { width: 18px; height: 18px; flex: none; }
.sidebar__spacer { flex: 1; }
.sidebar__foot { border-top: 1px solid var(--border); padding-top: var(--s-8); display: flex; flex-direction: column; gap: var(--s-6); }

/* Tab bar inferior (celular) */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(4, 1fr);
  min-height: calc(var(--tabbar-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: var(--surface); border-top: 1px solid var(--border);
}
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 48px; font-size: .6875rem; font-weight: 500; color: var(--muted); text-decoration: none;
}
.tab svg { width: 22px; height: 22px; }
.tab:hover { color: var(--text-2); text-decoration: none; }
.tab[aria-current="page"] { color: var(--accent); font-weight: 600; }

/* Cabeçalho de página */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-8); }
.page-head__ctx { font-size: .8125rem; font-weight: 500; color: var(--muted); }
.page-head h1 { font-size: 1.875rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; margin-top: var(--s-2); }
.page-head__actions { display: flex; gap: var(--s-4); flex-wrap: wrap; }
@media (max-width: 640px) { .page-head h1 { font-size: 1.625rem; } }

/* Grades */
.grid-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s-6); }
.grid-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--s-8); }
.cols { display: flex; flex-wrap: wrap; gap: var(--s-10); }
.cols__main { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: var(--s-8); }
.cols__side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: var(--s-8); }
.stack { display: flex; flex-direction: column; gap: var(--s-8); }
.stack-sm { display: flex; flex-direction: column; gap: var(--s-4); }
.row-flex { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: var(--s-6); }

/* Modais / sheets */
.overlay {
  position: fixed; inset: 0; z-index: 60; background: var(--overlay);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0; overflow-y: auto; overscroll-behavior: contain;
}
.dialog {
  width: 100%; max-width: 560px; background: var(--surface); color: var(--text);
  border-radius: var(--r-modal) var(--r-modal) 0 0; box-shadow: var(--shadow-modal);
  max-height: 92dvh; display: flex; flex-direction: column;
}
.dialog--wide { max-width: var(--modal-w-sm); }
.dialog__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); padding: var(--s-7) var(--s-8) var(--s-7) var(--s-12); border-bottom: 1px solid var(--divider); }
.dialog__top h2 { font-size: 1.0625rem; font-weight: 650; letter-spacing: -.01em; }
.dialog__body { padding: var(--s-10) var(--s-12); overflow-y: auto; display: flex; flex-direction: column; gap: var(--s-8); }
.dialog__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s-6); flex-wrap: wrap; padding: var(--s-6) var(--s-12) calc(var(--s-6) + var(--safe-bottom)); border-top: 1px solid var(--divider); }
.dialog__foot .hint { font-size: .75rem; color: var(--muted); }
@media (min-width: 720px) {
  .overlay { align-items: center; padding: clamp(12px, 4vw, 48px) clamp(8px, 3vw, 32px); }
  .dialog { border-radius: var(--r-modal); max-height: 90vh; }
}
body[data-scroll-lock] { overflow: hidden; }