/* ═══════════════════════════════════════════════
   APP SHELL LAYOUT
═══════════════════════════════════════════════ */
.app { display: flex; min-height: 100vh; }

.main {
  margin-left: var(--sidebar-w);
  flex: 1; display: flex; flex-direction: column;
  min-height: 100vh;
}

.content { padding: 24px; max-width: 1200px; width: 100%; }

/* ═══ PAGE TRANSITIONS ═══ */
.page { display: none; }
.page.active { display: block; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.page.active > * {
  animation: fadeUp .2s ease both;
}
.page.active > *:nth-child(2) { animation-delay: .03s; }
.page.active > *:nth-child(3) { animation-delay: .06s; }
.page.active > *:nth-child(4) { animation-delay: .09s; }
.page.active > *:nth-child(5) { animation-delay: .12s; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1024px) {
  .kpi-trio { grid-template-columns: 1fr; }
  .detail-panels { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0 !important; }
  .kpi-trio { grid-template-columns: 1fr; }
  .detail-panels { grid-template-columns: 1fr; }
  .mobile-menu-btn { display: flex !important; }
}

.mobile-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
}
.mobile-menu-btn:hover { background: var(--canvas); }