/* Routes Error Pages Styles */

/* Container Styles */
.unauthorized-container,
.notfound-container {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-background);
    padding: 2rem 1rem;
}

/* Paper Styles */
.unauthorized-paper,
.notfound-paper {
    padding: 3rem 2rem;
    text-align: center;
    border-radius: 16px;
    background: var(--mud-palette-surface);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Icon Styles */
.error-icon,
.warning-icon {
    font-size: 100px !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

    .error-icon:hover,
    .warning-icon:hover {
        transform: scale(1.05);
    }

/* Text Styles */
.font-weight-bold {
    font-weight: 700 !important;
}

.text-secondary {
    color: var(--mud-palette-text-secondary) !important;
}

/* Animation */
.unauthorized-container > *,
.notfound-container > * {
    animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Pulse animation for icons */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

.error-icon,
.warning-icon {
    animation: pulse 2s ease-in-out infinite;
}

/* Dark Mode */
::deep .mud-theme-dark .unauthorized-container,
::deep .mud-theme-dark .notfound-container {
    background: var(--mud-palette-background);
}

::deep .mud-theme-dark .unauthorized-paper,
::deep .mud-theme-dark .notfound-paper {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* RTL Support */
::deep .mud-rtl .unauthorized-paper,
::deep .mud-rtl .notfound-paper {
    direction: rtl;
}

/* Responsive Design */

/* Phone (Small) - <600px */
@media (max-width: 599px) {
    .unauthorized-container,
    .notfound-container {
        min-height: 70vh;
        padding: 1rem 0.5rem;
    }

    .unauthorized-paper,
    .notfound-paper {
        padding: 2rem 1rem;
    }

    .error-icon,
    .warning-icon {
        font-size: 60px !important;
    }

    ::deep .mud-typography-h4 {
        font-size: 1.5rem !important;
    }

    ::deep .mud-typography-body1 {
        font-size: 0.875rem !important;
    }
}

/* Phone (Large) - 600-768px */
@media (min-width: 600px) and (max-width: 767px) {
    .unauthorized-paper,
    .notfound-paper {
        padding: 2.5rem 1.5rem;
    }

    .error-icon,
    .warning-icon {
        font-size: 80px !important;
    }
}

/* Tablet - 768-1024px */
@media (min-width: 768px) and (max-width: 1023px) {
    .unauthorized-paper,
    .notfound-paper {
        padding: 3rem 2rem;
    }

    .error-icon,
    .warning-icon {
        font-size: 90px !important;
    }
}

/* Desktop - 1024-1440px */
@media (min-width: 1024px) {
    .unauthorized-container,
    .notfound-container {
        min-height: 85vh;
    }
}

/* Large Desktop - 1440-1920px */
@media (min-width: 1440px) {
    .unauthorized-paper,
    .notfound-paper {
        padding: 4rem 3rem;
    }

    .error-icon,
    .warning-icon {
        font-size: 120px !important;
    }

    ::deep .mud-typography-h4 {
        font-size: 2.5rem !important;
    }

    ::deep .mud-typography-body1 {
        font-size: 1.125rem !important;
    }
}

/* TV/4K Screens - >1920px */
@media (min-width: 1920px) {
    .unauthorized-container,
    .notfound-container {
        min-height: 90vh;
        padding: 3rem 2rem;
    }

    .unauthorized-paper,
    .notfound-paper {
        padding: 5rem 4rem;
        border-radius: 24px;
        max-width: 800px;
    }

    .error-icon,
    .warning-icon {
        font-size: 160px !important;
        margin-bottom: 2rem;
    }

    ::deep .mud-typography-h4 {
        font-size: 3rem !important;
        margin-bottom: 1.5rem;
    }

    ::deep .mud-typography-body1 {
        font-size: 1.5rem !important;
        margin-bottom: 2rem;
    }

    ::deep .mud-button-root {
        padding: 1rem 2rem;
        font-size: 1.25rem;
    }

    /* TV Focus States */
    .unauthorized-paper:focus-within,
    .notfound-paper:focus-within {
        outline: 4px solid var(--mud-palette-primary);
        outline-offset: 4px;
    }

    ::deep .mud-button-root:focus {
        outline: 4px solid var(--mud-palette-primary);
        outline-offset: 4px;
    }
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .unauthorized-container > *,
    .notfound-container > *,
    .error-icon,
    .warning-icon {
        animation: none;
    }

    .unauthorized-paper,
    .notfound-paper,
    .error-icon,
    .warning-icon {
        transition: none;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .unauthorized-paper,
    .notfound-paper {
        border: 2px solid var(--mud-palette-text-primary);
    }

    .error-icon,
    .warning-icon {
        filter: contrast(1.5);
    }
}

/* Print Styles */
@media print {
    .unauthorized-container,
    .notfound-container {
        min-height: auto;
        padding: 1rem;
    }

    .error-icon,
    .warning-icon {
        display: none;
    }

    .unauthorized-paper,
    .notfound-paper {
        box-shadow: none;
        border: 1px solid #000;
    }
}

/* Loading State */
.unauthorized-container.loading,
.notfound-container.loading {
    pointer-events: none;
    opacity: 0.6;
}

/* Focus States */
.unauthorized-paper:focus-within,
.notfound-paper:focus-within {
    box-shadow: 0 0 0 3px var(--mud-palette-primary-lighten);
}

/* Hover Effects for Desktop */
@media (min-width: 1024px) {
    .unauthorized-paper:hover,
    .notfound-paper:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    }

    ::deep .mud-theme-dark .unauthorized-paper:hover,
    ::deep .mud-theme-dark .notfound-paper:hover {
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
    }
}