/* --- THEME VARIABLES --- */
:root {
    /* CLEAN (Default) */
    --c-page: #f8fafc;
    --c-card: #ffffff;
    --c-input: #f1f5f9;
    --c-text-main: #0f172a;
    --c-text-sub: #64748b;
    --c-accent: #2563eb;       /* Royal Blue */
    --c-accent-light: #eff6ff;
    --c-border: #e2e8f0;
    --c-danger: #ef4444;
    --c-success: #10b981;
    --shadow-theme: 0 10px 30px -10px rgba(0, 0, 0, 0.08); /* Mjukare, modernare skugga */
    --radius-theme: 1.2rem;    /* Lite rundare hörn */
}

/* DARK MODE (Hardcore) */
.theme-dark {
    --c-page: #000000;
    --c-card: #1c1c1e;
    --c-input: #2c2c2e;
    --c-text-main: #ffffff;
    --c-text-sub: #a1a1aa;
    --c-accent: #bef264;       /* Lime Green */
    --c-accent-light: #3f6212;
    --c-border: #27272a;
    --c-danger: #ef4444;
    --c-success: #bef264;
    --shadow-theme: 0 10px 40px -10px rgba(0, 0, 0, 0.7);
    --radius-theme: 1rem;
}

/* RETRO / TRENDY (Linear) */
.theme-retro {
    --c-page: #fefce8;         /* Ljusgul */
    --c-card: #ffffff;
    --c-input: #ffffff;
    --c-text-main: #000000;
    --c-text-sub: #4b5563;
    --c-accent: #a855f7;       /* Purple */
    --c-accent-light: #f3e8ff;
    --c-border: #000000;       /* Hard borders */
    --c-danger: #ff5a5f;
    --c-success: #22c55e;
    --shadow-theme: 4px 4px 0px 0px #000000; 
    --radius-theme: 0px;       
}

body { background-color: var(--c-page); color: var(--c-text-main); transition: background-color 0.3s, color 0.3s; }
.view-section { display: none; padding-bottom: 140px; }
#view-login { display: flex; padding-bottom: 0; }
.no-scrollbar::-webkit-scrollbar { display: none; }
input, select { color: var(--c-text-main); }

/* Grafiska element */
.card-theme {
    background-color: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-theme);
    box-shadow: var(--shadow-theme);
    transition: all 0.2s;
}

.btn-theme {
    background-color: var(--c-accent);
    color: white; 
    font-weight: bold;
    border-radius: var(--radius-theme);
    padding: 12px;
    box-shadow: var(--shadow-theme);
    border: 1px solid transparent;
}
.theme-dark .btn-theme { color: black; } 
.theme-retro .btn-theme { border: 1px solid black; }

.btn-secondary {
    background-color: var(--c-card);
    border: 1px solid var(--c-border);
    color: var(--c-text-main);
    border-radius: var(--radius-theme);
    box-shadow: var(--shadow-theme);
}

/* ANIMATIONER */
@keyframes slideInUp { from { transform: translate(-50%, 100%); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.timer-enter { animation: slideInUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
.modal-enter { animation: fadeIn 0.2s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* VARG-PULS ANIMATION */
@keyframes wolf-pulse {
    0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(37, 99, 235, 0)); }
    50% { transform: scale(1.05); filter: drop-shadow(0 0 20px rgba(37, 99, 235, 0.4)); }
    100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(37, 99, 235, 0)); }
}
.wolf-anim { animation: wolf-pulse 3s infinite ease-in-out; }
.theme-dark .wolf-anim { filter: invert(1); } /* Gör vargen vit i dark mode om den är svart */

.nav-active { color: var(--c-accent); }
.nav-inactive { color: var(--c-text-sub); }

/* Glassmorphism utility för menyn */
.glass-nav {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}
.theme-dark .glass-nav {
    background-color: rgba(28, 28, 30, 0.8);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Profil-menyer */
.profile-sub-page { display: none; }