/* =================================================================
   Assessment Portal - Learning Palette Global Styles
   Beautiful, modern styling with animations, shadows, and hover effects
   ================================================================= */

/* === Card Animations === */
@keyframes slideInDown {
    from {
        transform: translateY(-30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInFromLeft {
    from {
        transform: translateX(-20px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInFromRight {
    from {
        transform: translateX(20px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

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

@keyframes glow-pulse {
    0%, 100% {
        box-shadow: 0 8px 24px var(--primary-shadow);
    }
    50% {
        box-shadow: 0 12px 36px var(--primary-shadow),
                    0 0 48px var(--primary-shadow);
    }
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 var(--primary-shadow);
    }
    50% {
        box-shadow: 0 0 20px 5px var(--primary-shadow);
    }
}

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

/* === Enhanced Card Styling === */
.assessment-card {
    border: 2px solid var(--mud-palette-lines-default) !important;
    background: linear-gradient(135deg, var(--mud-palette-drawer-background), var(--mud-palette-background)) !important;
    border-radius: 12px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: slideInFromLeft 0.4s ease-out;
}

.assessment-card:hover {
    box-shadow: 0 8px 24px var(--primary-shadow);
    transform: translateY(-4px);
}

.assessment-card-elevated {
    border: 2px solid var(--mud-palette-lines-default) !important;
    background: linear-gradient(135deg, var(--mud-palette-drawer-background), var(--mud-palette-background)) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px var(--primary-shadow);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.assessment-card-elevated:hover {
    box-shadow: 0 12px 32px var(--primary-shadow);
    transform: translateY(-6px);
}

/* === List Item Enhancements === */
.assessment-list-item {
    background: linear-gradient(90deg, var(--mud-palette-drawer-background), var(--mud-palette-background)) !important;
    border-radius: 8px !important;
    margin: 4px 8px !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.assessment-list-item:hover {
    transform: translateX(6px);
    border-color: var(--mud-palette-primary) !important;
    background: linear-gradient(90deg, rgba(var(--mud-palette-primary-rgb), 0.4), var(--mud-palette-background)) !important;
    box-shadow: 0 6px 20px var(--primary-shadow);
}

/* === Button Enhancements === */
/* Don't apply transitions to buttons inside switches - it breaks animations */
.mud-button:not(.mud-switch-base .mud-button-root) {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mud-button:not(.mud-button-text):not(.mud-button-outlined):not(.mud-switch-base .mud-button-root):hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--primary-shadow);
}

.mud-button.mud-button-filled:not(.mud-switch-base .mud-button-root):hover {
    box-shadow: 0 8px 24px var(--primary-shadow) !important;
}

/* === Icon Animations === */
.assessment-icon {
    transition: all 0.3s ease;
}

.assessment-icon:hover {
    transform: scale(1.2);
    color: var(--mud-palette-primary) !important;
}

/* === Progress Bars === */
.assessment-progress {
    background: var(--mud-palette-lines-inputs) !important;
    overflow: hidden;
    border-radius: 8px;
}

.assessment-progress .mud-progress-linear-bar {
    background: linear-gradient(90deg, var(--mud-palette-primary), var(--mud-palette-secondary)) !important;
    animation: shimmer 2s infinite;
    background-size: 1000px 100%;
}

/* === Divider Enhancements === */
.assessment-divider {
    background: linear-gradient(90deg, transparent, var(--mud-palette-lines-default), transparent) !important;
    height: 2px !important;
}

/* === Content Sections === */
.assessment-content-section {
    animation: fadeIn 0.6s ease-in;
    padding: 24px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--mud-palette-drawer-background), var(--mud-palette-background));
    border: 1px solid var(--mud-palette-lines-default);
    margin-bottom: 16px;
    transition: all 0.3s ease;
}

.assessment-content-section:hover {
    box-shadow: 0 8px 32px var(--primary-shadow);
    transform: translateY(-4px);
}

/* === Table Enhancements === */
.assessment-table {
    border: 2px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px var(--primary-shadow);
}

.assessment-table .mud-table-row:hover {
    background: linear-gradient(90deg, rgba(var(--mud-palette-primary-rgb), 0.1), transparent) !important;
    box-shadow: 0 2px 8px var(--primary-shadow);
}

/* === Input Field Enhancements === */
.mud-input-root {
    transition: all 0.3s ease;
}

.mud-input-root:focus-within {
    box-shadow: 0 0 0 2px rgba(var(--mud-palette-primary-rgb), 0.3);
}

/* === Chip Enhancements === */
.mud-chip {
    transition: all 0.3s ease;
}

.mud-chip:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px var(--primary-shadow);
}

/* === Paper/Container Enhancements === */
.assessment-paper {
    background: var(--mud-palette-drawer-background) !important;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    padding: 16px;
    transition: all 0.3s ease;
}

.assessment-paper:hover {
    box-shadow: 0 6px 20px var(--primary-shadow);
}

/* === Badge Enhancements === */
.assessment-badge {
    animation: pulse 2s infinite;
}

/* === Alert/Notification Enhancements === */
.assessment-alert {
    border-left: 4px solid var(--mud-palette-primary);
    background: linear-gradient(90deg, rgba(var(--mud-palette-primary-rgb), 0.1), transparent);
    border-radius: 8px;
    padding: 12px;
    animation: slideInFromRight 0.4s ease-out;
}

/* === Navigation Link Active State === */
.assessment-nav-active {
    background: var(--connect-colors-accent);
    /* background: linear-gradient(135deg, var(--connect-colors-primary), var(--connect-colors-purple)) !important; */
    box-shadow: 0 4px 12px var(--primary-shadow);
    color: white !important;
    border: 1px solid var(--connect-colors-border);
    /* border-radius: var(--connect-border-radius); */
}

.assessment-nav-active:hover {
    box-shadow: 0 8px 24px var(--primary-shadow) !important;
}

/* === Grid/Layout Enhancements === */
.assessment-grid-item {
    animation: fadeIn 0.4s ease-out;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.assessment-grid-item:hover {
    transform: scale(1.02);
}

/* === Empty State Styling === */
.assessment-empty-state {
    animation: fadeIn 0.6s ease-in;
    padding: 48px 24px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--mud-palette-drawer-background), var(--mud-palette-background));
    border: 1px solid var(--mud-palette-lines-default);
    text-align: center;
}

/* === Loading State === */
.assessment-loading {
    animation: pulse 1.5s infinite;
}

/* === Custom Scrollbar === */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--mud-palette-background);
}

::-webkit-scrollbar-thumb {
    background: var(--mud-palette-lines-default);
    border-radius: 4px;
    transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--mud-palette-primary);
}

/* === Responsive Utilities === */
@media (max-width: 600px) {
    .assessment-card,
    .assessment-content-section {
        margin: 8px 0;
    }
}

/* === Utility Classes === */
.glow-on-hover:hover {
    box-shadow: 0 0 20px var(--primary-shadow);
}

.slide-up {
    animation: slideInFromLeft 0.5s ease-out;
}

.fade-in-slow {
    animation: fadeIn 1s ease-in;
}

.pulse-glow {
    animation: glow-pulse 3s ease-in-out infinite;
}