/**
 * SPA Styles - Styles for single-page application behavior
 */

/* Content area transition */
#app-content {
    min-height: calc(100vh - 100px);
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Active navigation link styling */
.nav-link.active {
    color: #667eea;
    border-bottom: 3px solid #667eea;
}

/* Loading state */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* 404 and error page styles */
.page-404,
.page-error {
    text-align: center;
    padding: 100px 20px;
    min-height: calc(100vh - 200px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.page-404 h1,
.page-error h1 {
    font-size: 48px;
    margin-bottom: 20px;
    color: #667eea;
}

.page-404 p,
.page-error p {
    font-size: 18px;
    color: #666;
    margin-bottom: 30px;
}

/* Smooth page transitions */
@media (prefers-reduced-motion: no-preference) {
    main {
        transition: opacity 0.3s ease-in-out;
    }
}

/* Prevent layout shift on navigation */
body {
    scrollbar-gutter: stable;
}