refactor: Centralize state management into a state object and update UI rendering logic and element structure.

Røsstad.html

@@ -6,135 +6,147 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Røsstad Familietre</title>
 
-    <!-- Ikoner -->
+    <!-- Icons -->
     <script src="https://unpkg.com/@phosphor-icons/web"></script>
 
-    <!-- Leaflet Kart CSS -->
+    <!-- Leaflet Map CSS -->
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
         integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
 
+    <!-- Main Styles -->
     <link rel="stylesheet" href="style.css">
 </head>
 
 <body>
 
-    <!-- APP CONTAINER -->
-    <div id="app-container">
-        <header>
-            <div class="brand">
+    <div id="app-root">
+        <!-- HEADER -->
+        <header class="app-header">
+            <div class="brand-logo">
                 <i class="ph-fill ph-tree-evergreen"></i>
                 <span>Røsstad Familietre</span>
             </div>
 
-            <!-- Navigasjon -->
-            <div class="nav-tabs">
-                <button class="nav-tab active" data-tab="tree">Familietre</button>
-                <button class="nav-tab" data-tab="map">Kart</button>
-                <button class="nav-tab" data-tab="timeline">Tidslinje</button>
-            </div>
+            <!-- TABS -->
+            <nav class="nav-tabs">
+                <button class="nav-tab active" data-view="tree">Familietre</button>
+                <button class="nav-tab" data-view="map">Kart</button>
+                <button class="nav-tab" data-view="timeline">Tidslinje</button>
+            </nav>
 
-            <div class="controls">
+            <!-- CONTROLS -->
+            <div class="header-controls">
                 <button id="btn-zoom-out" class="icon-btn" title="Zoom ut"><i class="ph ph-minus-circle"></i></button>
-                <span id="zoom-level"
-                    style="font-size: 0.9rem; font-weight: 600; color: var(--text-muted); width: 50px; text-align: center;">100%</span>
+                <span id="zoom-display"
+                    style="font-size:0.9rem; font-weight:600; width:40px; text-align:center;">100%</span>
                 <button id="btn-zoom-in" class="icon-btn" title="Zoom inn"><i class="ph ph-plus-circle"></i></button>
+
                 <div style="width:1px; height:24px; background:#cbd5e1; margin:0 0.5rem;"></div>
-                <button id="btn-logout" class="btn-outline">Logg ut</button>
+
+                <button id="btn-logout" class="btn-logout">Logg ut</button>
             </div>
         </header>
 
-        <main>
-            <!-- 1. TRE VISNING -->
-            <div id="tree-view" class="view-section">
+        <!-- MAIN CONTENT -->
+        <main style="flex:1; position:relative; overflow:hidden;">
+
+            <!-- VIEW: TREE -->
+            <div id="view-tree" class="view-section">
+                <div id="tree-container">
                     <div id="tree-grid" class="tree-grid">
-                    <div id="row-parents" class="row-parents"></div>
-                    <div id="row-focus" class="row-focus"></div>
-                    <div id="row-children" class="row-children"></div>
+                        <div id="row-parents" class="tree-row"></div>
+                        <div id="row-focus" class="tree-row"></div>
+                        <div id="row-children" class="tree-row children"></div>
+                    </div>
                 </div>
             </div>
 
-            <!-- 2. KART VISNING -->
-            <div id="map-view" class="view-section hidden">
+            <!-- VIEW: MAP -->
+            <div id="view-map" class="view-section hidden">
                 <div id="map-container"></div>
             </div>
 
-            <!-- 3. TIDSLINJE VISNING -->
-            <div id="timeline-view" class="view-section hidden">
-                <div class="timeline-container" id="timeline-content">
-                    <!-- Tidslinje elementer genereres her -->
+            <!-- VIEW: TIMELINE -->
+            <div id="view-timeline" class="view-section hidden">
+                <div class="timeline-wrapper" id="timeline-list">
+                    <!-- Events injected here -->
                 </div>
             </div>
+
         </main>
     </div>
 
-    <!-- MODAL (Popup) -->
+    <!-- MODAL -->
     <div id="modal-overlay" class="modal-overlay hidden">
-        <div class="modal">
+        <div class="modal-content">
             <div class="modal-header">
-                <h3 id="modal-title">Legg til Person</h3>
-                <button id="btn-close-modal" class="btn-icon"
-                    style="background:none;border:none;cursor:pointer;color:var(--text-muted);"><i class="ph ph-x"
-                        style="font-size:1.5rem"></i></button>
+                <h3 id="modal-title" class="modal-title">Legg til Person</h3>
+                <button id="btn-close-modal" class="icon-btn"><i class="ph ph-x"></i></button>
             </div>
 
-            <div class="toggle-group" id="mode-toggle">
-                <button class="toggle-btn active" data-mode="new">Opprett Ny</button>
-                <button class="toggle-btn" data-mode="existing">Velg fra Database</button>
+            <div style="background:#f1f5f9; padding:4px; border-radius:8px; display:flex; margin-bottom:1.5rem;">
+                <button class="nav-tab active full-width" id="tab-new" onclick="window.setModalMode('new')">Ny
+                    Person</button>
+                <button class="nav-tab full-width" id="tab-existing"
+                    onclick="window.setModalMode('existing')">Eksisterende</button>
             </div>
 
-            <div class="modal-body">
             <div id="form-new">
                 <div class="form-group">
-                        <label>Navn</label>
-                        <input type="text" id="inp-name" placeholder="Fullt navn">
+                    <label class="form-label">Navn</label>
+                    <input type="text" id="inp-name" class="input-field" placeholder="Fullt navn">
                 </div>
+
                 <div class="form-row">
-                        <div class="form-group"><label>Fødselsdato</label><input type="date" id="inp-birth"></div>
-                        <div class="form-group"><label>Dødsdato</label><input type="date" id="inp-death"></div>
+                    <div class="form-group" style="flex:1">
+                        <label class="form-label">Fødselsdato</label>
+                        <input type="date" id="inp-birth" class="input-field">
                     </div>
-                    <div class="form-group">
-                        <label>Kjønn</label>
-                        <div class="radio-group" style="display:flex; gap:1rem;">
-                            <label style="font-weight:normal; display:flex; align-items:center; gap:0.5rem;"><input
-                                    type="radio" name="gender" value="M" checked> Mann</label>
-                            <label style="font-weight:normal; display:flex; align-items:center; gap:0.5rem;"><input
-                                    type="radio" name="gender" value="F"> Kvinne</label>
+                    <div class="form-group" style="flex:1">
+                        <label class="form-label">Dødsdato</label>
+                        <input type="date" id="inp-death" class="input-field">
                     </div>
                 </div>
 
-                    <!-- NYTT: Sted for kart -->
                 <div class="form-group">
-                        <label>Bosted / Opprinnelse (for Kart)</label>
-                        <input type="text" id="inp-location" placeholder="F.eks. 'Grimstad, Norge' eller koordinater">
-                        <p style="font-size: 0.75rem; color: var(--text-muted); margin-top: 0.2rem;">Brukes til å
-                            plassere personen på kartet.</p>
+                    <label class="form-label">Kjønn</label>
+                    <div style="display:flex; gap:1.5rem;">
+                        <label style="display:flex; align-items:center; gap:0.5rem; cursor:pointer;">
+                            <input type="radio" name="gender" value="M" checked> Mann
+                        </label>
+                        <label style="display:flex; align-items:center; gap:0.5rem; cursor:pointer;">
+                            <input type="radio" name="gender" value="F"> Kvinne
+                        </label>
+                    </div>
                 </div>
 
                 <div class="form-group">
-                        <label>Beskrivelse</label>
-                        <textarea id="inp-desc" rows="3" placeholder="Kort historie eller notater..."></textarea>
+                    <label class="form-label">Sted (for Kart)</label>
+                    <input type="text" id="inp-location" class="input-field" placeholder="F.eks. Grimstad, Norge">
+                </div>
+
+                <div class="form-group">
+                    <label class="form-label">Notater</label>
+                    <textarea id="inp-desc" class="input-field" rows="3" placeholder="Kort beskrivelse..."></textarea>
                 </div>
             </div>
 
             <div id="form-existing" class="hidden">
-                    <input type="text" id="search-existing" placeholder="Søk etter navn..."
-                        style="width:100%;margin-bottom:0.8rem;">
-                    <div id="existing-list" class="person-select-list"></div>
+                <input type="text" id="search-existing" class="input-field" placeholder="Søk etter navn...">
+                <div id="existing-list"
+                    style="max-height:200px; overflow-y:auto; border:1px solid #cbd5e1; border-radius:0.5rem;"></div>
                 <input type="hidden" id="selected-existing-id">
             </div>
 
-                <div style="margin-top:1.5rem;">
-                    <button id="btn-save" class="btn-primary full-width">Lagre Person</button>
-                </div>
-            </div>
+            <button id="btn-save" class="btn-primary" style="margin-top:1rem;">Lagre</button>
         </div>
     </div>
 
-    <!-- Leaflet Kart JS -->
+    <!-- Leaflet JS -->
     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
         integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
 
-    <!-- Linker til hoved-scriptet -->
+    <!-- App Logic -->
     <script type="module" src="script.js"></script>
 </body>
 

Script.js

@@ -3,156 +3,176 @@ import { getAuth, onAuthStateChanged, signOut } from "https://www.gstatic.com/fi
 import { getFirestore, collection, addDoc, updateDoc, doc, onSnapshot, query } from "https://www.gstatic.com/firebasejs/10.14.1/firebase-firestore.js";
 import { firebaseConfig } from "./config.js";
 
-// --- INIT ---
+// --- INITIALIZATION ---
 const app = initializeApp(firebaseConfig);
 const auth = getAuth(app);
 const db = getFirestore(app);
 
-// --- VARIABLER ---
-let currentUser = null;
-let people = [];
-let focusPersonId = null;
-let currentScale = 1.0;
-let modalAction = null;
-let modalMode = 'new';
-let mapInstance = null; // Leaflet map
+// --- STATE ---
+const state = {
+    user: null,
+    people: [],
+    focusId: null,
+    scale: 1.0,
+    modal: {
+        action: null, // 'add-child', 'add-parent-m', etc.
+        mode: 'new'   // 'new' or 'existing'
+    },
+    map: null
+};
 
-// --- SIKKERHETSSJEKK (Kjøres med en gang) ---
+// --- AUTHENTICATION ---
 onAuthStateChanged(auth, (user) => {
     if (user) {
-        currentUser = user;
-        startDataListener();
+        state.user = user;
+        initApp();
     } else {
         window.location.href = "index.html";
     }
 });
 
-// Logg ut knapp
-const logoutBtn = document.getElementById('btn-logout');
-if (logoutBtn) {
-    logoutBtn.addEventListener('click', () => {
-        signOut(auth).then(() => {
-            window.location.href = "index.html";
+document.getElementById('btn-logout')?.addEventListener('click', () => {
+    signOut(auth).then(() => window.location.href = "index.html");
 });
-    });
-}
 
-// --- DATABASE LYTTER ---
-function startDataListener() {
+// --- APP LOGIC ---
+function initApp() {
+    // Start Data Listener
     const q = query(collection(db, 'familyMembers'));
-
     onSnapshot(q, (snapshot) => {
-        people = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
+        state.people = snapshot.docs.map(d => ({ id: d.id, ...d.data() }));
 
-        if (!focusPersonId && people.length > 0) {
-            const me = people.find(p => p.name && (p.name.toLowerCase().includes('eivind') || p.name.toLowerCase() === 'meg'));
-            focusPersonId = me ? me.id : people[0].id;
+        // Set initial focus if needed
+        if (!state.focusId && state.people.length > 0) {
+            const me = state.people.find(p => p.name && (p.name.toLowerCase().includes('eivind') || p.name.toLowerCase() === 'meg'));
+            state.focusId = me ? me.id : state.people[0].id;
         }
 
-        // Oppdater alle visninger
+        renderAll();
+    });
+
+    // Setup Navigation
+    setupTabs();
+    setupZoom();
+    setupModal();
+}
+
+function renderAll() {
     renderTree();
-        updateMapMarkers();
+    renderMap();
     renderTimeline();
-    });
 }
 
-// --- NAVIGASJON (TABS) ---
-document.querySelectorAll('.nav-tab').forEach(tab => {
-    tab.addEventListener('click', () => {
-        // 1. Visuell tab state
-        document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active'));
-        tab.classList.add('active');
+// --- TAB NAVIGATION ---
+function setupTabs() {
+    document.querySelectorAll('.nav-tab[data-view]').forEach(btn => {
+        btn.addEventListener('click', () => {
+            // Update Active Tab
+            document.querySelectorAll('.nav-tab[data-view]').forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
 
-        // 2. Skjul/vis seksjoner
-        document.querySelectorAll('.view-section').forEach(s => s.classList.add('hidden'));
-        const targetId = tab.dataset.tab + '-view';
-        document.getElementById(targetId).classList.remove('hidden');
+            // Show View
+            document.querySelectorAll('.view-section').forEach(v => v.classList.add('hidden'));
+            const viewId = `view-${btn.dataset.view}`;
+            document.getElementById(viewId).classList.remove('hidden');
 
-        // 3. Spesialhåndtering
-        if (tab.dataset.tab === 'map') {
-            initMap(); // Sørg for at kartet tegnes riktig når det blir synlig
+            // Special handling for Map resize
+            if (btn.dataset.view === 'map' && state.map) {
+                setTimeout(() => state.map.invalidateSize(), 100);
             }
         });
     });
+}
 
-// --- TEGNE TREET (RENDERING) ---
+// --- TREE RENDERER ---
 function renderTree() {
-    const rowParents = document.getElementById('row-parents');
-    const rowFocus = document.getElementById('row-focus');
-    const rowChildren = document.getElementById('row-children');
+    const parentsRow = document.getElementById('row-parents');
+    const focusRow = document.getElementById('row-focus');
+    const childrenRow = document.getElementById('row-children');
 
-    if (!rowParents || !rowFocus || !rowChildren) return;
+    if (!parentsRow || !focusRow || !childrenRow) return;
 
-    rowParents.innerHTML = '';
-    rowFocus.innerHTML = '';
-    rowChildren.innerHTML = '';
+    parentsRow.innerHTML = '';
+    focusRow.innerHTML = '';
+    childrenRow.innerHTML = '';
 
-    if (people.length === 0) {
-        rowFocus.innerHTML = `<button class="btn-primary" onclick="window.openModal('create-first')">Start familietreet</button>`;
+    if (state.people.length === 0) {
+        focusRow.innerHTML = `<button class="btn-primary" onclick="window.openModal('create-first')">Start familietreet</button>`;
         return;
     }
 
-    const focusPerson = people.find(p => p.id === focusPersonId);
+    const focusPerson = state.people.find(p => p.id === state.focusId);
     if (!focusPerson) return;
 
-    // A. Foreldre
-    const father = people.find(p => p.id === focusPerson.fatherId);
-    const mother = people.find(p => p.id === focusPerson.motherId);
-    rowParents.appendChild(createSlot(father, 'Far', 'add-parent-m'));
-    rowParents.appendChild(createSlot(mother, 'Mor', 'add-parent-f'));
+    // 1. Parents
+    const father = state.people.find(p => p.id === focusPerson.fatherId);
+    const mother = state.people.find(p => p.id === focusPerson.motherId);
+    parentsRow.appendChild(createSlot(father, 'Far', 'add-parent-m'));
+    parentsRow.appendChild(createSlot(mother, 'Mor', 'add-parent-f'));
 
-    // B. Partner
-    const partner = people.find(p => p.id === focusPerson.partnerId);
+    // 2. Partner (Left of Focus)
+    const partner = state.people.find(p => p.id === focusPerson.partnerId);
     if (partner) {
         const pCard = createCard(partner);
-        pCard.onclick = () => { focusPersonId = partner.id; renderTree(); };
-        rowFocus.appendChild(pCard);
+        pCard.onclick = () => setFocus(partner.id);
+        focusRow.appendChild(pCard);
 
+        // Heart Icon
         const heart = document.createElement('div');
-        heart.innerHTML = '<i class="ph-fill ph-heart" style="color:var(--female-color); font-size:1.5rem;"></i>';
-        rowFocus.appendChild(heart);
+        heart.innerHTML = '<i class="ph-fill ph-heart" style="color:var(--color-female); font-size:1.5rem;"></i>';
+        focusRow.appendChild(heart);
     }
 
-    // C. Fokus Person
-    rowFocus.appendChild(createCard(focusPerson, true));
+    // 3. Focus Person
+    focusRow.appendChild(createCard(focusPerson, true));
 
-    // D. Barn
-    const children = people.filter(p => p.fatherId === focusPersonId || p.motherId === focusPersonId);
+    // 4. Children
+    const children = state.people.filter(p => p.fatherId === state.focusId || p.motherId === state.focusId);
     children.forEach(child => {
         const cCard = createCard(child);
-        cCard.onclick = () => { focusPersonId = child.id; renderTree(); };
-        rowChildren.appendChild(cCard);
+        cCard.onclick = () => setFocus(child.id);
+        childrenRow.appendChild(cCard);
     });
 }
 
+function setFocus(id) {
+    state.focusId = id;
+    renderTree();
+}
+
 function createCard(person, isFocus = false) {
     const el = document.createElement('div');
     el.className = `card ${isFocus ? 'focus' : ''} ${person.gender === 'F' ? 'female' : 'male'}`;
 
-    const year = person.birthDate ? new Date(person.birthDate).getFullYear() : '????';
+    const year = person.birthDate ? new Date(person.birthDate).getFullYear() : '';
     const dead = person.deathDate ? '✝ ' : '';
+    const loc = person.location ? person.location.split(',')[0] : '';
 
     el.innerHTML = `
-        <i class="card-icon ph ${person.gender === 'F' ? 'ph-user' : 'ph-user'}"></i>
-        <h3>${person.name}</h3>
-        <p>${dead}${year}</p>
-        ${person.location ? '<span class="info-badge"><i class="ph-bold ph-map-pin"></i> ' + person.location.split(',')[0] + '</span>' : ''}
+        <i class="ph-fill ph-user card-avatar"></i>
+        <div class="card-name">${person.name}</div>
+        <div class="card-dates">${dead}${year}</div>
+        ${loc ? `<div class="card-location"><i class="ph-bold ph-map-pin"></i> ${loc}</div>` : ''}
     `;
 
     if (isFocus) {
         const actions = document.createElement('div');
-        actions.className = 'focus-actions';
+        actions.className = 'mini-actions';
 
+        // Add Child Button
         const btnChild = document.createElement('button');
-        btnChild.className = 'btn-mini-add add-child';
+        btnChild.className = 'btn-mini btn-add-child';
         btnChild.innerHTML = '<i class="ph-bold ph-plus"></i>';
+        btnChild.title = "Legg til barn";
         btnChild.onclick = (e) => { e.stopPropagation(); window.openModal('add-child'); };
         actions.appendChild(btnChild);
 
+        // Add Partner Button (if none)
         if (!person.partnerId) {
             const btnPartner = document.createElement('button');
-            btnPartner.className = 'btn-mini-add add-partner';
+            btnPartner.className = 'btn-mini btn-add-partner';
             btnPartner.innerHTML = '<i class="ph-bold ph-heart"></i>';
+            btnPartner.title = "Legg til partner";
             btnPartner.onclick = (e) => { e.stopPropagation(); window.openModal('add-partner'); };
             actions.appendChild(btnPartner);
         }
@@ -161,257 +181,221 @@ function createCard(person, isFocus = false) {
     return el;
 }
 
-function createSlot(person, label, actionType) {
+function createSlot(person, label, action) {
     const wrapper = document.createElement('div');
-    wrapper.className = 'slot-container';
+    wrapper.className = 'slot';
     wrapper.innerHTML = `<span class="slot-label">${label}</span>`;
 
     if (person) {
         const card = createCard(person);
-        card.onclick = () => { focusPersonId = person.id; renderTree(); };
+        card.onclick = () => setFocus(person.id);
         wrapper.appendChild(card);
     } else {
         const btn = document.createElement('div');
-        btn.className = 'btn-add-slot';
+        btn.className = 'btn-slot';
         btn.innerHTML = '<i class="ph-bold ph-plus"></i>';
-        btn.onclick = () => window.openModal(actionType);
+        btn.onclick = () => window.openModal(action);
         wrapper.appendChild(btn);
     }
     return wrapper;
 }
 
-// --- KART FUNKSJONALITET (Leaflet) ---
-function initMap() {
-    if (mapInstance) {
-        mapInstance.invalidateSize(); // Viktig når kartet vises etter å ha vært skjult
-        return;
-    }
-
-    // Startposisjon: Norge (omtrentlig)
-    mapInstance = L.map('map-container').setView([65.0, 13.0], 5);
-
+// --- MAP RENDERER ---
+function renderMap() {
+    if (!state.map) {
+        state.map = L.map('map-container').setView([65.0, 13.0], 5);
         L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
-        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
+            attribution: '&copy; OpenStreetMap &copy; CARTO',
             subdomains: 'abcd',
             maxZoom: 19
-    }).addTo(mapInstance);
-
-    updateMapMarkers();
+        }).addTo(state.map);
     }
 
-async function updateMapMarkers() {
-    if (!mapInstance) return;
-
-    // Fjern gamle markører (enklest å tømme og tegne på nytt for nå)
-    mapInstance.eachLayer((layer) => {
-        if (layer instanceof L.Marker) {
-            mapInstance.removeLayer(layer);
-        }
+    // Clear existing markers
+    state.map.eachLayer(layer => {
+        if (layer instanceof L.Marker) state.map.removeLayer(layer);
     });
 
-    for (const p of people) {
+    // Add markers
+    state.people.forEach(p => {
         if (p.location) {
-            // Prøv å finne koordinater. For nå, antar vi at input KAN være "lat,lng"
-            // I en ekte app ville vi brukt en geocoding service her.
-            // For demo: Hvis location inneholder komma og tall, bruk det.
-            // Ellers, randomiser litt rundt Grimstad for demo-formål hvis det står "Grimstad"
-
+            // Simple geocoding simulation for demo
             let lat = 0, lng = 0;
-
             if (p.location.includes(',')) {
                 const parts = p.location.split(',');
-                if (!isNaN(parseFloat(parts[0]))) {
                 lat = parseFloat(parts[0]);
                 lng = parseFloat(parts[1]);
-                }
             } else if (p.location.toLowerCase().includes('grimstad')) {
-                lat = 58.34 + (Math.random() * 0.05 - 0.025);
-                lng = 8.59 + (Math.random() * 0.05 - 0.025);
+                lat = 58.34 + (Math.random() * 0.02); lng = 8.59 + (Math.random() * 0.02);
             } else if (p.location.toLowerCase().includes('oslo')) {
                 lat = 59.91; lng = 10.75;
             }
 
-            if (lat !== 0) {
-                L.marker([lat, lng])
-                    .addTo(mapInstance)
+            if (lat && lng) {
+                L.marker([lat, lng]).addTo(state.map)
                     .bindPopup(`<b>${p.name}</b><br>${p.location}`);
             }
         }
-    }
+    });
 }
 
-// --- TIDSLINJE FUNKSJONALITET ---
+// --- TIMELINE RENDERER ---
 function renderTimeline() {
-    const container = document.getElementById('timeline-content');
+    const container = document.getElementById('timeline-list');
     if (!container) return;
 
     container.innerHTML = '';
-
-    // Lag en liste av hendelser (Fødsel og Død)
     const events = [];
-    people.forEach(p => {
-        if (p.birthDate) {
-            events.push({ date: p.birthDate, type: 'Født', person: p.name, desc: p.description });
-        }
-        if (p.deathDate) {
-            events.push({ date: p.deathDate, type: 'Død', person: p.name });
-        }
+
+    state.people.forEach(p => {
+        if (p.birthDate) events.push({ date: p.birthDate, type: 'Født', person: p.name, desc: p.description });
+        if (p.deathDate) events.push({ date: p.deathDate, type: 'Død', person: p.name });
     });
 
-    // Sorter kronologisk
     events.sort((a, b) => new Date(a.date) - new Date(b.date));
 
     events.forEach(ev => {
-        const item = document.createElement('div');
-        item.className = 'timeline-item';
-
+        const div = document.createElement('div');
+        div.className = 'timeline-event';
         const dateStr = new Date(ev.date).toLocaleDateString('no-NO', { year: 'numeric', month: 'long', day: 'numeric' });
 
-        item.innerHTML = `
-            <div class="timeline-date">${dateStr}</div>
-            <div class="timeline-content">
+        div.innerHTML = `
+            <div class="event-date">${dateStr}</div>
+            <div class="event-card">
                 <strong>${ev.person}</strong> ${ev.type.toLowerCase()}
-                ${ev.desc ? `<p style="font-size:0.8rem; color:var(--text-muted); margin-top:0.3rem;">${ev.desc}</p>` : ''}
+                ${ev.desc ? `<p style="font-size:0.85rem; color:var(--color-text-muted); margin-top:0.5rem;">${ev.desc}</p>` : ''}
             </div>
         `;
-        container.appendChild(item);
+        container.appendChild(div);
     });
 }
 
-
-// --- MODAL & LAGRING ---
+// --- MODAL LOGIC ---
+function setupModal() {
     window.openModal = (action) => {
-    modalAction = action;
-    const overlay = document.getElementById('modal-overlay');
-    if (overlay) overlay.classList.remove('hidden');
+        state.modal.action = action;
+        document.getElementById('modal-overlay').classList.remove('hidden');
 
-    // Nullstill skjema
-    ['inp-name', 'inp-birth', 'inp-death', 'inp-desc', 'inp-location', 'selected-existing-id'].forEach(id => {
-        const el = document.getElementById(id);
-        if (el) el.value = '';
-    });
+        // Reset Form
+        document.querySelectorAll('.input-field').forEach(i => i.value = '');
 
+        // Set Title
         const title = document.getElementById('modal-title');
-    const genderRadios = document.getElementsByName('gender');
+        if (action === 'add-parent-m') title.textContent = "Legg til Far";
+        else if (action === 'add-parent-f') title.textContent = "Legg til Mor";
+        else if (action === 'add-child') title.textContent = "Legg til Barn";
+        else if (action === 'add-partner') title.textContent = "Legg til Partner";
+        else title.textContent = "Start Tre";
 
-    const setGender = (val, disabled) => {
-        genderRadios.forEach(r => {
-            r.disabled = disabled;
-            if (val && r.value === val) r.checked = true;
-        });
-    };
-
-    if (action === 'add-parent-m') { title.textContent = "Legg til Far"; setGender('M', true); }
-    else if (action === 'add-parent-f') { title.textContent = "Legg til Mor"; setGender('F', true); }
-    else if (action === 'add-child') { title.textContent = "Legg til Barn"; setGender(null, false); }
-    else if (action === 'add-partner') { title.textContent = "Legg til Partner"; setGender(null, false); }
-    else { title.textContent = "Start Tre"; setGender(null, false); }
-
-    setMode('new');
+        // Default Mode
+        window.setModalMode('new');
         renderExistingList();
     };
 
-const closeBtn = document.getElementById('btn-close-modal');
-if (closeBtn) closeBtn.onclick = () => document.getElementById('modal-overlay').classList.add('hidden');
+    window.setModalMode = (mode) => {
+        state.modal.mode = mode;
+        document.getElementById('tab-new').classList.toggle('active', mode === 'new');
+        document.getElementById('tab-existing').classList.toggle('active', mode === 'existing');
+        document.getElementById('form-new').classList.toggle('hidden', mode !== 'new');
+        document.getElementById('form-existing').classList.toggle('hidden', mode !== 'existing');
+    };
 
-const saveBtn = document.getElementById('btn-save');
-if (saveBtn) {
-    saveBtn.onclick = async () => {
-        if (!currentUser) return;
-        const focusP = people.find(p => p.id === focusPersonId);
+    document.getElementById('btn-close-modal').onclick = () => {
+        document.getElementById('modal-overlay').classList.add('hidden');
+    };
+
+    document.getElementById('btn-save').onclick = async () => {
+        const focusP = state.people.find(p => p.id === state.focusId);
         let targetId = null;
 
-        if (modalMode === 'new') {
+        if (state.modal.mode === 'new') {
             const newPerson = {
                 name: document.getElementById('inp-name').value,
                 birthDate: document.getElementById('inp-birth').value,
                 deathDate: document.getElementById('inp-death').value,
+                location: document.getElementById('inp-location').value,
                 description: document.getElementById('inp-desc').value,
-                location: document.getElementById('inp-location').value, // NYTT
                 gender: document.querySelector('input[name="gender"]:checked').value,
                 fatherId: null, motherId: null, partnerId: null
             };
 
-            if (modalAction === 'add-child' && focusP) {
+            // Auto-link logic
+            if (state.modal.action === 'add-child' && focusP) {
                 if (focusP.gender === 'M') newPerson.fatherId = focusP.id;
                 else newPerson.motherId = focusP.id;
+
                 if (focusP.partnerId) {
-                    const part = people.find(p => p.id === focusP.partnerId);
-                    if (part) { if (part.gender === 'M') newPerson.fatherId = part.id; else newPerson.motherId = part.id; }
+                    const part = state.people.find(p => p.id === focusP.partnerId);
+                    if (part) {
+                        if (part.gender === 'M') newPerson.fatherId = part.id;
+                        else newPerson.motherId = part.id;
+                    }
                 }
             }
 
             const docRef = await addDoc(collection(db, 'familyMembers'), newPerson);
             targetId = docRef.id;
-            if (modalAction === 'create-first') focusPersonId = targetId;
+            if (state.modal.action === 'create-first') state.focusId = targetId;
 
         } else {
             targetId = document.getElementById('selected-existing-id').value;
         }
 
+        // Link Relations
         if (focusP && targetId) {
             const col = collection(db, 'familyMembers');
             const updates = [];
 
-            if (modalAction === 'add-parent-m') updates.push(updateDoc(doc(col, focusPersonId), { fatherId: targetId }));
-            else if (modalAction === 'add-parent-f') updates.push(updateDoc(doc(col, focusPersonId), { motherId: targetId }));
-            else if (modalAction === 'add-partner') {
-                updates.push(updateDoc(doc(col, focusPersonId), { partnerId: targetId }));
-                updates.push(updateDoc(doc(col, targetId), { partnerId: focusPersonId }));
-            }
-            else if (modalAction === 'add-child' && modalMode === 'existing') {
+            if (state.modal.action === 'add-parent-m') updates.push(updateDoc(doc(col, state.focusId), { fatherId: targetId }));
+            else if (state.modal.action === 'add-parent-f') updates.push(updateDoc(doc(col, state.focusId), { motherId: targetId }));
+            else if (state.modal.action === 'add-partner') {
+                updates.push(updateDoc(doc(col, state.focusId), { partnerId: targetId }));
+                updates.push(updateDoc(doc(col, targetId), { partnerId: state.focusId }));
+            } else if (state.modal.action === 'add-child' && state.modal.mode === 'existing') {
                 const upd = {};
                 if (focusP.gender === 'M') upd.fatherId = focusP.id; else upd.motherId = focusP.id;
                 updates.push(updateDoc(doc(col, targetId), upd));
             }
             await Promise.all(updates);
         }
+
         document.getElementById('modal-overlay').classList.add('hidden');
     };
 }
 
-function setMode(mode) {
-    modalMode = mode;
-    document.querySelectorAll('.toggle-btn').forEach(b => b.classList.remove('active'));
-    const btn = document.querySelector(`.toggle-btn[data-mode="${mode}"]`);
-    if (btn) btn.classList.add('active');
-    document.getElementById('form-new').className = mode === 'new' ? '' : 'hidden';
-    document.getElementById('form-existing').className = mode === 'existing' ? '' : 'hidden';
-}
-
-document.querySelectorAll('.toggle-btn').forEach(btn => {
-    btn.onclick = () => setMode(btn.dataset.mode);
-});
-
 function renderExistingList() {
     const list = document.getElementById('existing-list');
-    if (!list) return;
     list.innerHTML = '';
-    const candidates = people.filter(p => p.id !== focusPersonId);
-    candidates.forEach(p => {
-        const d = document.createElement('div');
-        d.className = 'person-option';
-        d.innerHTML = `<span>${p.name}</span>`;
-        d.onclick = () => {
-            document.querySelectorAll('.person-option').forEach(x => x.classList.remove('selected'));
-            d.classList.add('selected');
+    state.people.filter(p => p.id !== state.focusId).forEach(p => {
+        const div = document.createElement('div');
+        div.style.padding = '0.5rem';
+        div.style.borderBottom = '1px solid #f1f5f9';
+        div.style.cursor = 'pointer';
+        div.textContent = p.name;
+        div.onclick = () => {
             document.getElementById('selected-existing-id').value = p.id;
+            div.style.background = '#f0fdf4';
         };
-        list.appendChild(d);
+        list.appendChild(div);
     });
 }
 
 // --- ZOOM ---
-const zoomIn = document.getElementById('btn-zoom-in');
-if (zoomIn) zoomIn.onclick = () => {
-    currentScale += 0.1;
-    document.getElementById('tree-grid').style.transform = `scale(${currentScale})`;
-    document.getElementById('zoom-level').textContent = Math.round(currentScale * 100) + '%';
+function setupZoom() {
+    const grid = document.getElementById('tree-grid');
+    const display = document.getElementById('zoom-display');
+
+    document.getElementById('btn-zoom-in').onclick = () => {
+        state.scale += 0.1;
+        updateZoom();
+    };
+    document.getElementById('btn-zoom-out').onclick = () => {
+        if (state.scale > 0.4) state.scale -= 0.1;
+        updateZoom();
     };
 
-const zoomOut = document.getElementById('btn-zoom-out');
-if (zoomOut) zoomOut.onclick = () => {
-    if (currentScale > 0.4) currentScale -= 0.1;
-    document.getElementById('tree-grid').style.transform = `scale(${currentScale})`;
-    document.getElementById('zoom-level').textContent = Math.round(currentScale * 100) + '%';
-};
+    function updateZoom() {
+        grid.style.transform = `scale(${state.scale})`;
+        display.textContent = Math.round(state.scale * 100) + '%';
+    }
+}

config.js

@@ -1,5 +1,4 @@
-// --- FIREBASE CONFIG ---
-// Prosjekt: roesstad-9fd48
+// --- FIREBASE CONFIGURATION ---
 export const firebaseConfig = {
     apiKey: "AIzaSyD-E58BdRwFCHDmsgRG9-PEWzMaQoheJ-0",
     authDomain: "roesstad-9fd48.firebaseapp.com",
@@ -8,5 +7,3 @@ export const firebaseConfig = {
     messagingSenderId: "704119736902",
     appId: "1:704119736902:web:bc47f2b6a1383de0479847"
 };
-
-

index.html

@@ -1,33 +1,37 @@
 <!DOCTYPE html>
 <html lang="no">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Logg Inn - Røsstad Arkivet</title>
+    <!-- Icons -->
     <script src="https://unpkg.com/@phosphor-icons/web"></script>
+    <!-- Styles -->
     <link rel="stylesheet" href="style.css">
 </head>
+
 <body class="login-page">
 
-    <div class="login-box">
-        <i class="ph-fill ph-tree-evergreen logo-icon"></i>
+    <div class="login-container">
+        <i class="ph-fill ph-tree-evergreen login-logo"></i>
 
-        <h2>Røsstad Arkivet</h2>
-        <p style="margin-bottom: 2rem; color: rgba(255,255,255,0.8); font-weight: 300;">Logg inn for å se familiens historie</p>
+        <h1 class="login-title">Røsstad Arkivet</h1>
+        <p class="login-subtitle">Logg inn for å utforske familiens historie</p>
 
-        <div style="margin-bottom: 1rem;">
-            <input type="email" id="inp-email" class="login-input" placeholder="E-postadresse">
-        </div>
+        <form id="login-form" onsubmit="event.preventDefault();">
+            <input type="email" id="inp-email" class="input-field" placeholder="E-postadresse" required
+                autocomplete="email">
+            <input type="password" id="inp-password" class="input-field" placeholder="Passord" required
+                autocomplete="current-password">
 
-        <div style="margin-bottom: 2rem;">
-            <input type="password" id="inp-password" class="login-input" placeholder="Passord">
-        </div>
+            <button type="submit" id="btn-login" class="btn-primary">Logg Inn</button>
+        </form>
 
-        <button id="btn-login" class="btn-primary full-width" style="font-size: 1.1rem; padding: 1rem;">Logg Inn</button>
-        
-        <p id="error-msg" class="error-msg"></p>
+        <div id="error-msg" class="error-message"></div>
     </div>
 
     <script type="module" src="login.js"></script>
 </body>
+
 </html>

login.js

@@ -2,46 +2,91 @@ import { initializeApp } from "https://www.gstatic.com/firebasejs/10.14.1/fireba
 import { getAuth, signInWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/10.14.1/firebase-auth.js";
 import { firebaseConfig } from "./config.js";
 
-// Init
+// --- INIT ---
 const app = initializeApp(firebaseConfig);
 const auth = getAuth(app);
 
-// Håndter klikk på Logg Inn
+// --- DOM ELEMENTS ---
+const form = document.getElementById('login-form');
+const emailInput = document.getElementById('inp-email');
+const passwordInput = document.getElementById('inp-password');
 const loginBtn = document.getElementById('btn-login');
+const errorMsg = document.getElementById('error-msg');
 
-if (loginBtn) {
-    loginBtn.addEventListener('click', async () => {
-        const email = document.getElementById('inp-email').value;
-        const password = document.getElementById('inp-password').value;
-        const msg = document.getElementById('error-msg');
+// --- LOGIN LOGIC ---
+if (form) {
+    form.addEventListener('submit', async (e) => {
+        e.preventDefault();
+
+        const email = emailInput.value.trim();
+        const password = passwordInput.value;
 
-        // Enkel sjekk at feltene ikke er tomme
         if (!email || !password) {
-            msg.textContent = "Du må skrive inn både e-post og passord.";
+            showError("Vennligst fyll ut både e-post og passord.");
             return;
         }
 
-        loginBtn.textContent = "Sjekker...";
-        msg.textContent = "";
+        setLoading(true);
 
         try {
-            // Prøver å logge inn med e-post og passord
             await signInWithEmailAndPassword(auth, email, password);
-
-            // Suksess -> Gå til hovedsiden
+            // Redirect on success
             window.location.href = "Røsstad.html";
-
         } catch (error) {
-            console.error(error);
-            // Gi en forståelig feilmelding
-            if (error.code === 'auth/invalid-credential' || error.code === 'auth/user-not-found' || error.code === 'auth/wrong-password') {
-                msg.textContent = "Feil e-post eller passord.";
-            } else if (error.code === 'auth/too-many-requests') {
-                msg.textContent = "For mange forsøk. Prøv igjen senere.";
-            } else {
-                msg.textContent = "Feil: " + error.message;
-            }
-            loginBtn.textContent = "Logg Inn";
+            console.error("Login error:", error);
+            handleError(error);
+            setLoading(false);
         }
     });
 }
+
+function setLoading(isLoading) {
+    if (isLoading) {
+        loginBtn.textContent = "Logger inn...";
+        loginBtn.disabled = true;
+        errorMsg.textContent = "";
+    } else {
+        loginBtn.textContent = "Logg Inn";
+        loginBtn.disabled = false;
+    }
+}
+
+function handleError(error) {
+    let message = "En ukjent feil oppstod.";
+
+    switch (error.code) {
+        case 'auth/invalid-credential':
+        case 'auth/user-not-found':
+        case 'auth/wrong-password':
+            message = "Feil e-post eller passord.";
+            break;
+        case 'auth/too-many-requests':
+            message = "For mange forsøk. Vennligst vent litt og prøv igjen.";
+            break;
+        case 'auth/invalid-email':
+            message = "Ugyldig e-postadresse.";
+            break;
+    }
+
+    showError(message);
+}
+
+function showError(msg) {
+    errorMsg.textContent = msg;
+    // Shake animation effect
+    const container = document.querySelector('.login-container');
+    container.style.animation = 'none';
+    container.offsetHeight; /* trigger reflow */
+    container.style.animation = 'shake 0.5s';
+}
+
+// Add shake keyframes dynamically
+const style = document.createElement('style');
+style.innerHTML = `
+@keyframes shake {
+    0%, 100% { transform: translateX(0); }
+    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
+    20%, 40%, 60%, 80% { transform: translateX(5px); }
+}
+`;
+document.head.appendChild(style);

style.css

@@ -1,389 +1,569 @@
-/* --- VARIABLER (Røsstad Premium) --- */
-@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap');
+/* --- RØSSTAD DESIGN SYSTEM --- */
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');
 
 :root {
-    /* Palette: Deep Forest Green / Blue-Green Mix */
-    --primary-dark: #0f2f24;    /* Deepest Forest */
-    --primary-main: #134e4a;    /* Røsstad Green/Teal */
-    --primary-light: #2dd4bf;   /* Bright Teal Highlight */
+    /* --- PALETTE: Røsstad Green --- */
+    --color-primary-dark: #0f2f24;
+    /* Deep Forest */
+    --color-primary: #134e4a;
+    /* Røsstad Teal */
+    --color-primary-light: #2dd4bf;
+    /* Bright Teal */
 
-    --accent-gold: #d97706;     /* Bronze/Gold */
-    --accent-red: #be123c;      /* Deep Berry (for errors/females) */
+    --color-accent: #d97706;
+    /* Gold/Bronze */
+    --color-danger: #be123c;
+    /* Berry Red */
 
-    --bg-color: #f0fdf4;        /* Soft Mist Green */
-    --glass-bg: rgba(255, 255, 255, 0.7);
-    --glass-border: rgba(255, 255, 255, 0.5);
+    --color-bg: #f0fdf4;
+    /* Soft Mist Green */
+    --color-surface: #ffffff;
+    /* Pure White */
+    --color-surface-glass: rgba(255, 255, 255, 0.85);
 
-    --text-main: #1e293b;       /* Slate 800 */
-    --text-muted: #64748b;      /* Slate 500 */
+    --color-text-main: #1e293b;
+    /* Slate 800 */
+    --color-text-muted: #64748b;
+    /* Slate 500 */
 
-    --male-color: #0ea5e9;      /* Sky Blue */
-    --female-color: #be123c;    /* Rose */
+    --color-male: #0ea5e9;
+    /* Sky Blue */
+    --color-female: #be123c;
+    /* Rose */
 
+    /* --- SHADOWS & EFFECTS --- */
     --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+    --blur-glass: blur(12px);
+
+    /* --- SPACING & RADIUS --- */
+    --radius-sm: 0.5rem;
+    --radius-md: 0.75rem;
+    --radius-lg: 1.5rem;
+}
+
+/* --- GLOBAL RESET --- */
+* {
+    box-sizing: border-box;
 }
 
 body {
     margin: 0;
     font-family: 'Outfit', sans-serif;
-    background-color: var(--bg-color);
-    color: var(--text-main);
+    background-color: var(--color-bg);
+    color: var(--color-text-main);
     height: 100vh;
     overflow: hidden;
+    /* Subtle background pattern */
     background-image:
-        radial-gradient(at 0% 0%, rgba(19, 78, 74, 0.1) 0px, transparent 50%),
-        radial-gradient(at 100% 100%, rgba(217, 119, 6, 0.1) 0px, transparent 50%);
+        radial-gradient(at 0% 0%, rgba(15, 47, 36, 0.05) 0px, transparent 50%),
+        radial-gradient(at 100% 100%, rgba(217, 119, 6, 0.05) 0px, transparent 50%);
 }
 
-/* --- HJELPEKLASSER --- */
-.hidden { display: none !important; }
-.full-width { width: 100%; }
+/* --- UTILITIES --- */
+.hidden {
+    display: none !important;
+}
 
-/* --- LOGIN SIDE STIL --- */
+.full-width {
+    width: 100%;
+}
+
+.flex-center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+/* --- LOGIN PAGE --- */
 body.login-page {
-    display: flex; justify-content: center; align-items: center;
-    background: linear-gradient(135deg, #0f2f24 0%, #134e4a 100%);
-    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
 }
 
-body.login-page::before {
-    content: '';
-    position: absolute;
-    width: 100%; height: 100%;
-    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
-}
-
-.login-box {
+.login-container {
     background: rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
-    padding: 3.5rem;
-    border-radius: 1.5rem;
+    backdrop-filter: var(--blur-glass);
+    padding: 3rem;
+    border-radius: var(--radius-lg);
+    width: 100%;
+    max-width: 400px;
     text-align: center;
     color: white;
     border: 1px solid rgba(255, 255, 255, 0.2);
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
-    width: 100%;
-    max-width: 420px;
-    position: relative;
-    z-index: 10;
+    box-shadow: var(--shadow-lg);
 }
 
-.logo-icon {
-    font-size: 4.5rem;
-    color: var(--primary-light);
-    margin-bottom: 1.5rem;
-    filter: drop-shadow(0 0 15px rgba(45, 212, 191, 0.4));
+.login-logo {
+    font-size: 4rem;
+    color: var(--color-primary-light);
+    margin-bottom: 1rem;
 }
 
-.login-box h2 {
+.login-title {
+    font-size: 1.5rem;
     font-weight: 700;
-    letter-spacing: -0.5px;
-    margin-bottom: 0.5rem;
+    margin: 0 0 0.5rem 0;
 }
 
-.login-input {
-    background: rgba(255,255,255,0.95);
-    border: none;
-    padding: 1rem;
-    border-radius: 0.75rem;
-    width: 100%;
-    box-sizing: border-box;
-    font-family: inherit;
-    transition: all 0.2s;
+.login-subtitle {
+    font-size: 0.9rem;
+    opacity: 0.8;
+    margin-bottom: 2rem;
+    font-weight: 300;
 }
-.login-input:focus {
+
+.input-field {
+    width: 100%;
+    padding: 1rem;
+    margin-bottom: 1rem;
+    border: none;
+    border-radius: var(--radius-md);
+    background: rgba(255, 255, 255, 0.95);
+    font-family: inherit;
+    font-size: 1rem;
+    transition: box-shadow 0.2s;
+}
+
+.input-field:focus {
     outline: none;
     box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.5);
 }
 
-.error-msg {
-    margin-top: 1rem;
-    color: #fda4af;
-    font-size: 0.9rem;
-    min-height: 1.2em;
-    font-weight: 500;
+.btn-primary {
+    width: 100%;
+    padding: 1rem;
+    border: none;
+    border-radius: var(--radius-md);
+    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
+    color: white;
+    font-weight: 600;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: transform 0.2s, box-shadow 0.2s;
 }
 
-/* --- HEADER (Hovedside) --- */
-header {
-    background: rgba(255, 255, 255, 0.8);
+.btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.error-message {
+    color: #fda4af;
+    margin-top: 1rem;
+    font-size: 0.9rem;
+    min-height: 1.2em;
+}
+
+/* --- MAIN APP LAYOUT --- */
+#app-root {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+}
+
+/* Header */
+.app-header {
+    background: var(--color-surface-glass);
     backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
-    border-bottom: 1px solid rgba(0,0,0,0.05);
-    padding: 1rem 2rem;
+    padding: 0.8rem 2rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    position: sticky; top: 0; z-index: 100;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    z-index: 100;
 }
 
-.brand {
-    font-size: 1.4rem;
+.brand-logo {
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+    font-size: 1.2rem;
     font-weight: 700;
-    color: var(--primary-dark);
-    display: flex; align-items: center; gap: 0.75rem;
+    color: var(--color-primary-dark);
 }
-.brand i { color: var(--primary-main); }
 
+.brand-logo i {
+    color: var(--color-primary);
+    font-size: 1.5rem;
+}
+
+/* Navigation Tabs */
 .nav-tabs {
-    display: flex; gap: 0.5rem;
+    display: flex;
+    gap: 0.5rem;
     background: rgba(0, 0, 0, 0.05);
     padding: 0.3rem;
-    border-radius: 0.75rem;
+    border-radius: var(--radius-md);
 }
 
 .nav-tab {
     padding: 0.5rem 1.2rem;
-    border-radius: 0.5rem;
     border: none;
     background: transparent;
-    color: var(--text-muted);
+    border-radius: var(--radius-sm);
+    color: var(--color-text-muted);
     font-weight: 600;
     cursor: pointer;
     transition: all 0.2s;
-    font-family: inherit;
 }
+
 .nav-tab.active {
     background: white;
-    color: var(--primary-dark);
+    color: var(--color-primary);
     box-shadow: var(--shadow-sm);
 }
+
 .nav-tab:hover:not(.active) {
-    color: var(--primary-main);
+    color: var(--color-primary);
     background: rgba(255, 255, 255, 0.5);
 }
 
-.controls {
-    display: flex; align-items: center; gap: 1rem;
+/* Controls */
+.header-controls {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
 }
 
-.controls button.icon-btn {
-    background: none; border: none; color: var(--text-muted);
-    font-size: 1.5rem; cursor: pointer; transition: color 0.2s;
-    display: flex; align-items: center; justify-content: center;
-}
-.controls button.icon-btn:hover { color: var(--primary-main); transform: scale(1.1); }
-
-/* --- KNAPPER --- */
-.btn-primary {
-    background: linear-gradient(135deg, var(--primary-main), var(--primary-dark));
-    color: white; border: none; padding: 0.8rem 1.5rem;
-    border-radius: 0.75rem; font-weight: 600; cursor: pointer;
-    transition: all 0.2s;
-    box-shadow: 0 4px 6px -1px rgba(19, 78, 74, 0.3);
-}
-.btn-primary:hover {
-    transform: translateY(-1px);
-    box-shadow: 0 6px 8px -1px rgba(19, 78, 74, 0.4);
+.icon-btn {
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    color: var(--color-text-muted);
+    cursor: pointer;
+    transition: color 0.2s;
+    display: flex;
 }
 
-.btn-outline {
-    font-size: 0.9rem !important;
-    border: 1px solid var(--primary-main) !important;
-    color: var(--primary-main) !important;
+.icon-btn:hover {
+    color: var(--color-primary);
+}
+
+.btn-logout {
+    font-size: 0.9rem;
+    padding: 0.4rem 1rem;
+    border: 1px solid var(--color-primary);
+    color: var(--color-primary);
     background: transparent;
-    padding: 0.4rem 1rem; border-radius: 0.5rem;
-    font-weight: 600; cursor: pointer;
-}
-.btn-outline:hover {
-    background: var(--primary-main);
-    color: white !important;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    font-weight: 600;
 }
 
-/* --- MAIN CONTENT AREAS --- */
-#app-container {
-    display: flex; height: 100vh; flex-direction: column;
+.btn-logout:hover {
+    background: var(--color-primary);
+    color: white;
 }
 
-main {
-    flex: 1; overflow: hidden; position: relative;
-}
-
-/* --- TREET (GRID LAYOUT) --- */
-#tree-view {
-    display: flex; justify-content: center; align-items: center;
-    padding: 3rem;
-    overflow: auto;
-    cursor: grab;
-}
-#tree-view:active { cursor: grabbing; }
-
-.tree-grid {
-    display: flex; flex-direction: column; align-items: center;
-    gap: 5rem; transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-}
-
-.row-parents, .row-focus, .row-children {
-    display: flex; justify-content: center; align-items: center;
+/* --- VIEW SECTIONS --- */
+.view-section {
+    flex: 1;
+    overflow: hidden;
     position: relative;
 }
-.row-parents { gap: 4rem; }
-.row-focus { gap: 3rem; }
-.row-children { gap: 2rem; flex-wrap: wrap; }
 
-/* --- KORT --- */
+/* Tree View */
+#tree-container {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 4rem;
+    cursor: grab;
+}
+
+#tree-container:active {
+    cursor: grabbing;
+}
+
+.tree-grid {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 5rem;
+    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.tree-row {
+    display: flex;
+    justify-content: center;
+    gap: 3rem;
+}
+
+.tree-row.children {
+    gap: 2rem;
+    flex-wrap: wrap;
+}
+
+/* Person Card */
 .card {
-    background: rgba(255, 255, 255, 0.9);
-    backdrop-filter: blur(8px);
-    width: 200px; min-height: 130px;
-    border-radius: 1rem;
+    width: 200px;
+    min-height: 130px;
+    background: var(--color-surface-glass);
     border: 1px solid white;
-    box-shadow: var(--shadow-md);
+    border-radius: var(--radius-md);
     padding: 1.2rem;
-    display: flex; flex-direction: column; align-items: center;
-    position: relative; cursor: pointer; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    box-shadow: var(--shadow-md);
+    cursor: pointer;
+    transition: all 0.3s;
+    position: relative;
 }
+
 .card:hover {
-    transform: translateY(-5px) scale(1.02);
+    transform: translateY(-5px);
     box-shadow: var(--shadow-lg);
-    border-color: var(--primary-light);
+    border-color: var(--color-primary-light);
 }
+
 .card.focus {
-    border: 2px solid var(--primary-main);
-    background: white;
     transform: scale(1.15);
     z-index: 10;
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 0 0 4px rgba(45, 212, 191, 0.2);
+    border: 2px solid var(--color-primary);
+    background: white;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
 }
 
-.card h3 { margin: 0.75rem 0 0.25rem 0; font-size: 1rem; text-align: center; font-weight: 700; color: var(--text-main); }
-.card p { margin: 0; font-size: 0.8rem; color: var(--text-muted); font-family: 'Outfit', monospace; font-weight: 500; }
-.card .info-badge {
-    font-size: 0.7rem; color: var(--primary-dark);
-    background: var(--primary-light);
-    background: rgba(45, 212, 191, 0.2);
-    padding: 2px 8px; border-radius: 12px; margin-top: 8px; font-weight: 600;
+.card-avatar {
+    font-size: 2rem;
+    padding: 0.5rem;
+    border-radius: 50%;
+    margin-bottom: 0.5rem;
 }
 
-.card-icon {
-    font-size: 1.8rem; padding: 10px; border-radius: 50%;
-    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
+.card.male .card-avatar {
+    color: var(--color-male);
+    background: #e0f2fe;
 }
-.male .card-icon { color: var(--male-color); background: #e0f2fe; }
-.female .card-icon { color: var(--female-color); background: #ffe4e6; }
 
-/* --- PLUSS-KNAPPER --- */
-.slot-container {
-    display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
+.card.female .card-avatar {
+    color: var(--color-female);
+    background: #ffe4e6;
 }
+
+.card-name {
+    font-size: 1rem;
+    font-weight: 700;
+    margin: 0.2rem 0;
+    text-align: center;
+}
+
+.card-dates {
+    font-size: 0.8rem;
+    color: var(--color-text-muted);
+    font-family: monospace;
+}
+
+.card-location {
+    font-size: 0.7rem;
+    margin-top: 0.5rem;
+    padding: 2px 8px;
+    background: rgba(45, 212, 191, 0.15);
+    color: var(--color-primary-dark);
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+/* Add Buttons (Mini) */
+.mini-actions {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+}
+
+.btn-mini {
+    pointer-events: auto;
+    position: absolute;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background: var(--color-primary);
+    color: white;
+    border: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    box-shadow: var(--shadow-md);
+    transition: transform 0.2s;
+}
+
+.btn-mini:hover {
+    transform: scale(1.2);
+    background: var(--color-primary-dark);
+}
+
+.btn-add-child {
+    bottom: -16px;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.btn-add-partner {
+    top: 50%;
+    right: -16px;
+    transform: translateY(-50%);
+}
+
+/* Empty Slot */
+.slot {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+}
+
 .slot-label {
-    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px;
-    font-weight: 700; color: var(--text-muted); opacity: 0.7;
-}
-.btn-add-slot {
-    width: 48px; height: 48px; border-radius: 50%;
-    border: 2px dashed #cbd5e1; background: rgba(255,255,255,0.4);
-    color: #94a3b8; display: flex; justify-content: center; align-items: center;
-    cursor: pointer; font-size: 1.4rem; transition: all 0.2s;
-}
-.btn-add-slot:hover {
-    border-color: var(--primary-main); color: var(--primary-main);
-    background: white; transform: rotate(90deg);
+    font-size: 0.7rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    color: var(--color-text-muted);
+    opacity: 0.7;
 }
 
-.focus-actions {
-    position: absolute; width: 100%; height: 100%; pointer-events: none;
+.btn-slot {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    border: 2px dashed #cbd5e1;
+    background: rgba(255, 255, 255, 0.5);
+    color: #94a3b8;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 1.5rem;
+    cursor: pointer;
+    transition: all 0.2s;
 }
-.btn-mini-add {
-    pointer-events: auto; position: absolute;
-    width: 32px; height: 32px;
-    background: var(--primary-main);
-    color: white; border-radius: 50%; border: none;
-    display: flex; justify-content: center; align-items: center;
-    cursor: pointer; box-shadow: 0 4px 6px rgba(0,0,0,0.2); z-index: 20;
-    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+
+.btn-slot:hover {
+    border-color: var(--color-primary);
+    color: var(--color-primary);
+    background: white;
+}
+
+/* Map & Timeline */
+#map-container {
+    width: 100%;
+    height: 100%;
+    background: #e2e8f0;
+}
+
+.timeline-wrapper {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 3rem 1rem;
+    overflow-y: auto;
+    height: 100%;
+}
+
+.timeline-event {
+    position: relative;
+    padding-left: 2rem;
+    margin-bottom: 2rem;
+    border-left: 2px solid var(--color-primary-light);
+}
+
+.timeline-event::before {
+    content: '';
+    position: absolute;
+    left: -6px;
+    top: 0;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: var(--color-primary);
+}
+
+.event-date {
+    font-weight: 700;
+    color: var(--color-primary);
+    font-size: 0.9rem;
+}
+
+.event-card {
+    background: white;
+    padding: 1rem;
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-sm);
+    margin-top: 0.5rem;
 }
-.btn-mini-add:hover { background: var(--primary-dark); transform: scale(1.2); }
-.add-child { bottom: -16px; left: 50%; transform: translateX(-50%); }
-.add-partner { top: 50%; right: -16px; transform: translateY(-50%); }
 
 /* --- MODAL --- */
 .modal-overlay {
-    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
-    background: rgba(15, 47, 36, 0.6); backdrop-filter: blur(4px);
-    display: flex; justify-content: center; align-items: center; z-index: 3000;
-    opacity: 0; animation: fadeIn 0.2s forwards;
+    position: fixed;
+    inset: 0;
+    background: rgba(15, 47, 36, 0.6);
+    backdrop-filter: blur(4px);
+    z-index: 1000;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    opacity: 0;
+    animation: fadeIn 0.2s forwards;
 }
-@keyframes fadeIn { to { opacity: 1; } }
 
-.modal {
-    background: white; width: 90%; max-width: 550px;
-    border-radius: 1.5rem; padding: 2rem;
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    transform: scale(0.95); animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+@keyframes fadeIn {
+    to {
+        opacity: 1;
+    }
+}
+
+.modal-content {
+    background: white;
+    width: 90%;
+    max-width: 500px;
+    border-radius: var(--radius-lg);
+    padding: 2rem;
+    box-shadow: var(--shadow-lg);
+    transform: scale(0.95);
+    animation: popIn 0.3s forwards;
+}
+
+@keyframes popIn {
+    to {
+        transform: scale(1);
+    }
 }
-@keyframes popIn { to { transform: scale(1); } }
 
 .modal-header {
-    display: flex; justify-content: space-between; align-items: center;
-    border-bottom: 1px solid var(--glass-border); padding-bottom: 1.5rem; margin-bottom: 1.5rem;
-}
-.modal-header h3 { margin: 0; font-size: 1.5rem; color: var(--primary-dark); }
-
-.toggle-group {
-    display: flex; background: #f1f5f9; padding: 5px; border-radius: 10px; margin-bottom: 1.5rem;
-}
-.toggle-btn {
-    flex: 1; padding: 10px; border: none; background: transparent;
-    cursor: pointer; border-radius: 8px; font-weight: 600; color: var(--text-muted);
-    transition: all 0.2s;
-}
-.toggle-btn.active {
-    background: white; color: var(--primary-main);
-    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1.5rem;
+    border-bottom: 1px solid #f1f5f9;
+    padding-bottom: 1rem;
 }
 
-.form-group { margin-bottom: 1.2rem; }
-.form-group label { display: block; font-size: 0.85rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--text-main); }
-.form-row { display: flex; gap: 1rem; }
-.form-row .form-group { flex: 1; }
-
-input, select, textarea {
-    width: 100%; padding: 0.8rem;
-    border: 1px solid #cbd5e1; border-radius: 0.75rem;
-    font-size: 1rem; font-family: inherit;
-    transition: border 0.2s; box-sizing: border-box;
-}
-input:focus, select:focus, textarea:focus {
-    outline: none; border-color: var(--primary-main);
-    box-shadow: 0 0 0 3px rgba(19, 78, 74, 0.1);
+.modal-title {
+    font-size: 1.4rem;
+    font-weight: 700;
+    color: var(--color-primary-dark);
+    margin: 0;
 }
 
-.person-select-list {
-    max-height: 200px; overflow-y: auto;
-    border: 1px solid #cbd5e1; border-radius: 0.75rem;
-}
-.person-option {
-    padding: 0.8rem; border-bottom: 1px solid #f1f5f9; cursor: pointer;
-    display: flex; justify-content: space-between; transition: background 0.1s;
-}
-.person-option:hover { background: #f8fafc; }
-.person-option.selected {
-    background: #f0fdf4; border-left: 4px solid var(--primary-main);
+.form-group {
+    margin-bottom: 1rem;
 }
 
-/* --- KART OG TIDSLINJE (Placeholder) --- */
-#map-view, #timeline-view {
-    width: 100%; height: 100%;
-}
-#map-container {
-    width: 100%; height: 100%;
-    background: #e2e8f0; /* Placeholder grå */
+.form-label {
+    display: block;
+    font-size: 0.85rem;
+    font-weight: 700;
+    margin-bottom: 0.4rem;
 }
 
-/* Timeline specific */
-.timeline-container {
-    max-width: 800px; margin: 0 auto; padding: 3rem 1rem;
+.form-row {
+    display: flex;
+    gap: 1rem;
 }
-.timeline-item {
-    position: relative; padding-left: 2rem; margin-bottom: 2rem; border-left: 2px solid var(--primary-light);
-}
-.timeline-item::before {
-    content: ''; position: absolute; left: -6px; top: 0;
-    width: 10px; height: 10px; border-radius: 50%; background: var(--primary-main);
-}
-.timeline-date { font-size: 0.85rem; color: var(--primary-main); font-weight: 700; }
-.timeline-content { background: white; padding: 1rem; border-radius: 0.5rem; box-shadow: var(--shadow-sm); margin-top: 0.5rem; }