/* ==========================================================================
   Layout — App shell, main content area
   ========================================================================== */

.main-content {
  padding-top: var(--menu-height);
  min-height: calc(100vh - 60px);
  position: relative;
}

/* Gradient overlay to fade content behind navbar */
.main-content::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--menu-height);
  background: linear-gradient(to bottom, var(--bg-secondary) 0%, var(--bg-secondary) 70%, transparent 100%);
  pointer-events: none;
  z-index: 50;
}

@media (max-width: 768px) {
  .main-content {
    padding-top: 64px;
  }

  .main-content::before {
    height: 64px;
  }
}

@media (max-width: 480px) {
  .main-content {
    padding-top: 56px;
  }

  .main-content::before {
    height: 56px;
  }
}

.flash-alert {
  padding: 12px 24px;
  margin: 16px 24px;
  background-color: #FEE2E2;
  color: #991B1B;
  border: 1px solid #FCA5A5;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
}