/* style.css - Globale Styles & Animationen */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

body {
    font-family: 'Inter', sans-serif;
}

/* --- 1. Loading Spinner --- */
.loader {
    border-top-color: #3b82f6;
    -webkit-animation: spinner 1.5s linear infinite;
    animation: spinner 1.5s linear infinite;
}

@keyframes spinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- 2. Toast Notifications --- */
@keyframes slideInToast {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.animate-toast {
    animation: slideInToast 0.3s ease-out forwards;
}

/* --- 3. Fade In Up Animation (Global) --- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in-up {
    /* FIX: 'both' sorgt dafür, dass der Startzustand (opacity 0) sofort angewendet wird, 
       aber wenn die Animation fehlschlägt, ist das Element standardmäßig sichtbar */
    animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Fallback für reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
    .animate-fade-in-up {
        animation: none;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Animation Delays */
.delay-75 { animation-delay: 75ms; }
.delay-100 { animation-delay: 100ms; }
.delay-150 { animation-delay: 150ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-500 { animation-delay: 500ms; }

/* --- 4. Custom Scrollbar --- */
.scrollbar-thin::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 20px;
}
.dark .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: #475569;
}

/* --- 5. Active Card Highlight (Dashboard) --- */
@keyframes pulse-border-blue {
    0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); border-color: #3b82f6; }
    70% { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0); border-color: #2563eb; }
    100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); border-color: #3b82f6; }
}

.active-card {
    animation: pulse-border-blue 2s infinite !important;
    background-color: #eff6ff !important; /* Light Blue bg */
    transform: scale(1.02);
    z-index: 10;
}
.dark .active-card {
    background-color: #1e3a8a !important; /* Dark Blue bg */
    border-color: #60a5fa !important;
}

/* --- 6. Active Lesson Cell (Stundenplan) --- */
@keyframes active-glow { 
    0% { box-shadow: inset 0 0 0 2px #3b82f6; background-color: rgba(59,130,246,0.1); } 
    50% { box-shadow: inset 0 0 0 2px #60a5fa; background-color: rgba(59,130,246,0.2); } 
    100% { box-shadow: inset 0 0 0 2px #3b82f6; background-color: rgba(59,130,246,0.1); } 
}

.active-lesson-cell { 
    animation: active-glow 2s infinite; 
    z-index: 20 !important; 
    position: relative;
}
.dark .active-lesson-cell { 
    background-color: rgba(59,130,246,0.15) !important; 
}

/* --- 7. TinyMCE Editor Customization --- */
.tox-tinymce { 
    border-radius: 0.75rem !important; 
    border-color: #e2e8f0 !important; 
}
.dark .tox-tinymce { 
    border-color: #334155 !important; 
}
.dark .tox-toolbar__primary { 
    background: #1e293b !important; 
    border-bottom: 1px solid #334155 !important; 
}
.dark .tox-edit-area__iframe { 
    background: #0f172a !important; 
}
.tox-statusbar { 
    display: none !important; 
}

/* --- 8. Christmas Theme Extras --- */

/* Hintergrund leicht rötlich färben im Hell-Modus */
.theme-christmas body {
    background: linear-gradient(to bottom, #fef2f2 0%, #fff1f2 100%) !important;
}

/* WICHTIG: Im Dark Mode muss der Hintergrund dunkel bleiben, sonst ist weißer Text auf weißem Grund unsichtbar */
.dark.theme-christmas body, 
html.dark.theme-christmas body {
    background: #0f172a !important;
    color: #ffffff !important;
}

.theme-christmas .snow-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    background-image: 
        radial-gradient(4px 4px at 10% 10%, rgba(255,255,255,0.9) 50%, transparent),
        radial-gradient(6px 6px at 20% 30%, rgba(255,255,255,0.7) 50%, transparent),
        radial-gradient(3px 3px at 40% 70%, rgba(255,255,255,0.9) 50%, transparent),
        radial-gradient(4px 4px at 60% 20%, rgba(255,255,255,0.8) 50%, transparent),
        radial-gradient(5px 5px at 90% 80%, rgba(255,255,255,0.7) 50%, transparent);
    background-size: 400px 400px;
    animation: snow 10s linear infinite;
    opacity: 0.8;
}

@keyframes snow {
    0% { background-position: 0 0; }
    100% { background-position: 100px 400px; }
}