/* ─── Layout ─── */
.app-layout {
  display: flex;
  min-height: 100vh;
  background: var(--bg-page);
}

.main-content {
  flex: 1;
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  transition: margin-left 0.3s ease;
}

.app-layout:has(.sidebar.collapsed) .main-content,
html.sidebar-collapsed .main-content {
  margin-left: var(--sidebar-collapsed);
}

.page-container {
  padding: var(--page-padding);
  max-width: 1440px;
  margin: 0 auto;
}

.page-stack {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}

/* ─── Animations ─── */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in { animation: fade-in 0.2s ease; }

@media (prefers-reduced-motion: reduce) {
  .fade-in { animation: none; }
}

@keyframes top-progress-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

/* ─── Responsive layout overrides ─── */
@media (max-width: 768px) {
  :root { --page-padding: var(--space-4); }
  .page-container { padding: var(--space-4); }
}