<div class="page-content" id="page-konfigurator">
<!-- KALKYL-LISTA (visas först) -->
<div id="kalkylListView">
<h1 class="page-title">Kalkyler</h1>
<p class="page-subtitle">Dina sparade kalkyler och offerter</p>
<div style="display:flex;gap:10px;margin-bottom:20px;align-items:center;flex-wrap:wrap">
<button class="dummy-btn" onclick="openNyKalkyl()">+ Ny Kalkyl</button>
<select id="quotesFilterStatus" onchange="loadQuotesList()" style="padding:8px 12px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;font-family:inherit;background:#fff">
<option value="">Alla statusar</option>
<option value="utkast">Utkast</option>
<option value="skickad">Skickad</option>
<option value="godkänd">Godkänd</option>
<option value="förlorad">Förlorad</option>
</select>
<input id="quotesSearch" type="text" placeholder="Sök kund/adress..." oninput="loadQuotesList()" style="padding:8px 12px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;font-family:inherit;min-width:200px">
</div>
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden">
<table style="width:100%;border-collapse:collapse">
<thead><tr style="background:#f8f9fa">
<th style="padding:10px 14px;text-align:left;font-size:11px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px">Kalkyl</th>
<th style="padding:10px 14px;text-align:left;font-size:11px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px">Kund</th>
<th style="padding:10px 14px;text-align:left;font-size:11px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px">Produkt</th>
<th style="padding:10px 14px;text-align:right;font-size:11px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px">Belopp</th>
<th style="padding:10px 14px;text-align:left;font-size:11px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px">Bilder</th>
<th style="padding:10px 14px;text-align:left;font-size:11px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px">Säljare</th>
<th style="padding:10px 14px;text-align:left;font-size:11px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px">Datum</th>
<th style="padding:10px 14px;text-align:left;font-size:11px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px">Status</th>
<th style="padding:10px 14px;font-size:11px"></th>
</tr></thead>
<tbody id="quotesListBody">
<tr><td colspan="9" style="padding:40px;text-align:center;color:#94a3b8;font-size:14px">Laddar kalkyler...</td></tr>
</tbody>
</table>
</div>
</div>
<!-- KONFIGURATOR (dold tills man klickar Ny Kalkyl) -->
<div id="kalkylConfigView" style="display:none">
<div style="display:flex;align-items:center;gap:12px;margin-bottom:20px">
<button class="dummy-btn secondary" onclick="kalkylGoBack()" style="padding:8px 14px"><svg viewBox="0 0 24 24" style="width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg> Tillbaka</button>
<div><h1 class="page-title" style="margin-bottom:0">Ny Kalkyl</h1></div>
<div id="cfgFileLabel" style="margin-left:auto;font-size:10px;color:#94a3b8;background:#f1f5f9;padding:3px 8px;border-radius:4px;font-family:monospace"></div>
</div>
<!-- Kundbanner (fylls av populateKalkylFromCustomer) -->
<div id="kalkylCustomerBanner"></div>
<!-- Prospektbilder (expanderbar) -->
<div id="kalkylPhotosSection" style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:18px 20px;margin-bottom:20px;display:none">
<div style="display:flex;align-items:center;justify-content:space-between;cursor:pointer" onclick="toggleKalkylPhotos()">
<div style="display:flex;align-items:center;gap:8px">
<svg viewBox="0 0 24 24" style="width:18px;height:18px;fill:none;stroke:#f59e0b;stroke-width:2"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
<span style="font-size:14px;font-weight:700;color:#1a1a1a">Prospektbilder</span>
<span id="kpCount" style="font-size:12px;color:#64748b;font-weight:400;margin-left:4px"></span>
</div>
<svg id="kpChevron" viewBox="0 0 24 24" style="width:18px;height:18px;fill:none;stroke:#94a3b8;stroke-width:2;transition:transform .2s"><polyline points="6 9 12 15 18 9"/></svg>
</div>
<!-- Collapsed: thumbnails of selected images -->
<div id="kpThumbsCollapsed" style="margin-top:10px;display:flex;gap:8px;flex-wrap:wrap;overflow:hidden;max-height:72px"></div>
<!-- Expanded: full bildgenerering -->
<div id="kpExpanded" style="display:none;margin-top:14px">
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">
<!-- Vänster: Prospektbilder + Bildgenerering -->
<div>
<!-- Prospektbilder från fältsälj -->
<div id="kpProspectPhotos" style="margin-bottom:14px"></div>
<!-- Steg 1: Foto av huset -->
<div style="margin-bottom:14px">
<label style="display:block;font-size:13px;font-weight:600;color:#334155;margin-bottom:6px">1. Foto av huset</label>
<div style="display:flex;gap:8px">
<input type="file" id="kpBgFileInput" accept="image/*" style="display:none" onchange="handleKpBgUpload(this)">
<input type="file" id="kpBgCameraInput" accept="image/*" capture="environment" style="display:none" onchange="handleKpBgUpload(this)">
<button onclick="document.getElementById('kpBgFileInput').click()" style="flex:1;padding:8px;border:1.5px solid #e5e7eb;border-radius:8px;background:#fafbfc;cursor:pointer;font-family:inherit;font-size:12px">Ladda upp</button>
<button onclick="document.getElementById('kpBgCameraInput').click()" style="flex:1;padding:8px;border:1.5px solid #e5e7eb;border-radius:8px;background:#fafbfc;cursor:pointer;font-family:inherit;font-size:12px">Ta foto</button>
</div>
<div id="kpBgPreview" style="margin-top:8px;display:none;position:relative">
<img id="kpBgPreviewImg" style="width:100%;max-height:300px;object-fit:contain;border-radius:8px;background:#f1f5f9">
<button onclick="clearKpBgUpload()" style="position:absolute;top:4px;right:4px;background:#ef4444;color:#fff;border:none;border-radius:6px;width:24px;height:24px;cursor:pointer;font-size:12px">✕</button>
</div>
</div>
<!-- Steg 2: Vad vill du visa? -->
<div style="margin-bottom:14px">
<label style="display:block;font-size:13px;font-weight:600;color:#334155;margin-bottom:6px">2. Vad vill du visa?</label>
<input type="hidden" id="kpProjectType" value="">
<input type="hidden" id="kpPrompt" value="">
<div id="kpOptionGrid" style="display:grid;grid-template-columns:1fr 1fr;gap:6px"></div>
</div>
<!-- Steg 3: Stil -->
<div id="kpDetailsPanel" style="display:none;margin-bottom:14px">
<label style="display:block;font-size:13px;font-weight:600;color:#334155;margin-bottom:6px">3. Välj stil</label>
<div id="kpSubOptions" style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px"></div>
<div id="kpCountPanel" style="display:none;margin-top:10px">
<label id="kpCountLabel" style="display:block;font-size:13px;font-weight:600;color:#334155;margin-bottom:6px">Antal paneler</label>
<div id="kpCountOptions" style="display:flex;flex-wrap:wrap;gap:5px"></div>
</div>
</div>
<!-- Extra detaljer -->
<div style="margin-bottom:10px">
<label style="display:block;font-size:12px;font-weight:600;color:#334155;margin-bottom:4px">Extra detaljer (valfritt)</label>
<input type="text" id="kpExtraPrompt" placeholder="T.ex. 'sommardag, blå himmel'" style="width:100%;padding:8px 10px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;font-family:inherit;box-sizing:border-box">
</div>
<!-- Motor + Generera -->
<div style="display:flex;gap:8px;align-items:center;margin-bottom:10px">
<select id="kpProvider" style="padding:7px 10px;border:1px solid #e5e7eb;border-radius:8px;font-size:11px;font-family:inherit;color:#64748b">
<option value="openai">OpenAI GPT Image (~0.65 kr/bild)</option>
<option value="openai-mini">OpenAI Mini (~0.20 kr/bild)</option>
<option value="gemini">Google Gemini (~0.30 kr/bild)</option>
</select>
<button id="kpGenerateBtn" onclick="generateKpImage()" style="flex:1;padding:10px;background:#024550;color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit">Generera bild</button>
</div>
</div>
<!-- Höger: Resultat + Galleri -->
<div>
<div id="kpResultArea">
<div id="kpPlaceholder" style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:280px;border:2px dashed #e5e7eb;border-radius:12px;color:#94a3b8">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
<p style="margin-top:10px;font-size:13px">Genererad bild visas här</p>
<p style="margin-top:2px;font-size:11px">Välj typ och klicka "Generera bild"</p>
</div>
<div id="kpLoading" style="display:none;flex-direction:column;align-items:center;justify-content:center;height:280px;border:2px dashed #e5e7eb;border-radius:12px;color:#024550">
<div style="width:36px;height:36px;border:3px solid #e5e7eb;border-top:3px solid #024550;border-radius:50%;animation:spin 1s linear infinite"></div>
<p style="margin-top:12px;font-size:13px;font-weight:500">Genererar bild...</p>
<p style="margin-top:2px;font-size:11px;color:#94a3b8">Kan ta upp till 30 sekunder</p>
</div>
<div id="kpResult" style="display:none">
<img id="kpResultImg" style="width:100%;border-radius:10px;border:1px solid #e5e7eb;cursor:pointer" onclick="openLightbox(this.src)">
<div style="display:flex;gap:6px;margin-top:8px">
<button onclick="saveKpResultToGallery()" style="flex:1;padding:8px;border:1.5px solid #059669;border-radius:8px;background:#f0fdf4;cursor:pointer;font-family:inherit;font-size:12px;font-weight:600;color:#059669">✓ Spara i kalkyl</button>
<button onclick="downloadKpResult()" style="flex:1;padding:8px;border:1.5px solid #e5e7eb;border-radius:8px;background:#fafbfc;cursor:pointer;font-family:inherit;font-size:12px">Ladda ner</button>
<button onclick="resetKpResult()" style="flex:1;padding:8px;border:1.5px solid #e5e7eb;border-radius:8px;background:#fafbfc;cursor:pointer;font-family:inherit;font-size:12px">Ny bild</button>
</div>
</div>
</div>
<!-- Sparade bilder i kalkylen -->
<div id="kpSavedGallery" style="margin-top:14px">
<h4 style="font-size:13px;font-weight:600;margin-bottom:8px;color:#334155">Bilder i kalkylen</h4>
<div id="kpGallery" style="display:grid;grid-template-columns:repeat(3,1fr);gap:8px"></div>
<div id="kpEmpty" style="padding:16px;text-align:center;color:#94a3b8;font-size:12px;border:2px dashed #e5e7eb;border-radius:8px">
Inga bilder sparade ännu.
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Kalkylnamn/Kund hanteras i Kundinformation-blocket -->
<!-- Kategorier + konfiguratorer -->
<div class="config-header" style="display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px">
<label class="config-label" style="font-size:12px;font-weight:600;color:#64748b">Kategori:</label>
<select class="product-select" id="categorySelect" onchange="changeCategory()" style="min-width:200px;padding:10px 14px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:14px;font-family:inherit">
<option value="">Välj kategori...</option>
<option value="solceller">Solceller</option>
<option value="batteri">Batteri</option>
<option value="laddbox">Laddbox</option>
<option value="taktvatt">Taktvätt</option>
<option value="varmepump">Värmepump</option>
<option value="fonster">Fönster</option>
<option value="tak">Tak</option>
<option value="isolering">Isolering</option>
</select>
</div>
<div id="cfgCategoryGrid" style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px"></div>
<!-- SOLCELLS-KONFIGURATOR -->
<div id="solarConfigView" style="display:none">
<div style="display:grid;grid-template-columns:1fr 380px;gap:24px;align-items:start">
<div>
<!-- Steg 1: Välj solpanel -->
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:24px;margin-bottom:16px">
<div style="display:flex;align-items:center;gap:10px;margin-bottom:16px">
<div style="width:32px;height:32px;background:#ecfdf5;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#059669">1</div>
<h3 style="font-size:16px;font-weight:700;color:#1a1a1a;margin:0">Välj solpanel</h3>
</div>
<div id="solarPanelCards" style="display:grid;gap:10px"></div>
</div>
<!-- Steg 2: Antal paneler -->
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:24px;margin-bottom:16px">
<div style="display:flex;align-items:center;gap:10px;margin-bottom:16px">
<div style="width:32px;height:32px;background:#eff6ff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#3b82f6">2</div>
<h3 style="font-size:16px;font-weight:700;color:#1a1a1a;margin:0">Antal paneler</h3>
</div>
<div style="display:flex;align-items:center;gap:16px;margin-bottom:12px">
<input type="range" id="solPanelCount" min="8" max="80" step="2" value="14" oninput="updateSolarCalc()" style="flex:1;accent-color:#024550">
<div style="background:#f0f9ff;border:2px solid #3b82f6;border-radius:10px;padding:8px 16px;text-align:center;min-width:80px">
<div id="solPanelCountVal" style="font-size:24px;font-weight:700;color:#1e40af">14</div>
<div style="font-size:10px;color:#64748b;font-weight:600">PANELER</div>
</div>
</div>
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px">
<div style="background:#f8fafc;padding:10px;border-radius:8px;text-align:center">
<div style="font-size:10px;color:#64748b;font-weight:600">EFFEKT</div>
<div id="solKwpVal" style="font-size:16px;font-weight:700;color:#1a1a1a">6.0 kWp</div>
</div>
<div style="background:#f8fafc;padding:10px;border-radius:8px;text-align:center">
<div style="font-size:10px;color:#64748b;font-weight:600">TAKYTA</div>
<div id="solRoofVal" style="font-size:16px;font-weight:700;color:#1a1a1a">24 m²</div>
</div>
<div style="background:#f8fafc;padding:10px;border-radius:8px;text-align:center">
<div style="font-size:10px;color:#64748b;font-weight:600">PRODUKTION</div>
<div id="solProdVal" style="font-size:16px;font-weight:700;color:#1a1a1a">~5 400 kWh</div>
</div>
</div>
</div>
<!-- Steg 3: Batteri -->
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:24px;margin-bottom:16px">
<div style="display:flex;align-items:center;gap:10px;margin-bottom:16px">
<div style="width:32px;height:32px;background:#faf5ff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#a855f7">3</div>
<h3 style="font-size:16px;font-weight:700;color:#1a1a1a;margin:0">Batteri <span style="font-size:12px;color:#94a3b8;font-weight:400">(valfritt)</span></h3>
</div>
<div id="solarBatteryCards" style="display:grid;gap:10px">
<div class="sol-addon-card" data-battery="0" onclick="selectBattery(this)" style="padding:14px 16px;border:2px solid #3b82f6;border-radius:10px;cursor:pointer;display:flex;align-items:center;gap:12px;background:#f0f9ff">
<div style="width:20px;height:20px;border:2px solid #3b82f6;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0"><div style="width:10px;height:10px;background:#3b82f6;border-radius:50%"></div></div>
<div style="flex:1"><div style="font-weight:600;font-size:14px">Inget batteri</div></div>
<div style="font-weight:700;font-size:14px;color:#1a1a1a">0 kr</div>
</div>
</div>
</div>
<!-- Steg 4: Elbilsladdare -->
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:24px;margin-bottom:16px">
<div style="display:flex;align-items:center;gap:10px;margin-bottom:16px">
<div style="width:32px;height:32px;background:#fef9c3;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#ca8a04">4</div>
<h3 style="font-size:16px;font-weight:700;color:#1a1a1a;margin:0">Elbilsladdare <span style="font-size:12px;color:#94a3b8;font-weight:400">(valfritt)</span></h3>
</div>
<div id="solarChargerCards" style="display:grid;gap:10px">
<div class="sol-addon-card" data-charger="0" onclick="selectCharger(this)" style="padding:14px 16px;border:2px solid #3b82f6;border-radius:10px;cursor:pointer;display:flex;align-items:center;gap:12px;background:#f0f9ff">
<div style="width:20px;height:20px;border:2px solid #3b82f6;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0"><div style="width:10px;height:10px;background:#3b82f6;border-radius:50%"></div></div>
<div style="flex:1"><div style="font-weight:600;font-size:14px">Ingen laddare</div></div>
<div style="font-weight:700;font-size:14px;color:#1a1a1a">0 kr</div>
</div>
</div>
</div>
</div>
<!-- PRISSIDEBAR -->
<div style="position:sticky;top:20px">
<div class="price-card">
<div class="price-header">Prissammanställning</div>
<div class="price-rows">
<div class="price-line"><span class="price-line-label">Material <span style="font-size:10px;color:#94a3b8">(paneler, inverter, montering)</span></span><span class="price-line-value" id="solPrMaterial">0 kr</span></div>
<div class="price-line"><span class="price-line-label">Installation <span style="font-size:10px;color:#94a3b8">(arbete, el, projekt)</span></span><span class="price-line-value" id="solPrLabor">0 kr</span></div>
<div class="price-line"><span class="price-line-label">Batteri</span><span class="price-line-value" id="solPrBattery">0 kr</span></div>
<div class="price-line"><span class="price-line-label">Elbilsladdare</span><span class="price-line-value" id="solPrCharger">0 kr</span></div>
<div class="price-line subtotal"><span class="price-line-label">Totalt före avdrag</span><span class="price-line-value" id="solPrSubtotal">0 kr</span></div>
</div>
<div class="rot-section" style="background:#ecfdf5;padding:14px 16px">
<!-- Välj avdragstyp -->
<div style="margin-bottom:10px">
<div style="font-size:11px;color:#6b7280;margin-bottom:6px;font-weight:600">SKATTEAVDRAG</div>
<div style="display:flex;gap:4px">
<button onclick="setDeductionType('green')" class="deduct-btn" data-dt="green" style="flex:1;padding:7px 4px;border:1.5px solid #059669;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;background:#059669;color:#fff;font-family:inherit;line-height:1.2">Grönt teknik<br><span style="font-size:9px;font-weight:400;opacity:.8">20% av allt</span></button>
<button onclick="setDeductionType('rot')" class="deduct-btn" data-dt="rot" style="flex:1;padding:7px 4px;border:1.5px solid #bbf7d0;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;background:#fff;color:#059669;font-family:inherit;line-height:1.2">ROT-avdrag<br><span style="font-size:9px;font-weight:400;opacity:.8">30% av arbete</span></button>
<button onclick="setDeductionType('both')" class="deduct-btn" data-dt="both" style="flex:1;padding:7px 4px;border:1.5px solid #bbf7d0;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;background:#fff;color:#059669;font-family:inherit;line-height:1.2">Båda<br><span style="font-size:9px;font-weight:400;opacity:.8">max av båda</span></button>
<button onclick="setDeductionType('none')" class="deduct-btn" data-dt="none" style="flex:1;padding:7px 4px;border:1.5px solid #bbf7d0;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;background:#fff;color:#059669;font-family:inherit;line-height:1.2">Inget<br><span style="font-size:9px;font-weight:400;opacity:.8"> </span></button>
</div>
</div>
<!-- Avdragssumma -->
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">
<span id="solDeductLabel" style="font-size:12px;font-weight:700;color:#059669">GRÖNT TEKNIK-AVDRAG</span>
<span id="solPrGreenTech" style="font-size:16px;font-weight:700;color:#059669">0 kr</span>
</div>
<div id="solDeductDetail" style="font-size:11px;color:#6b7280;margin-bottom:8px"></div>
<!-- Antal ägare -->
<div id="solOwnerSection" style="margin-bottom:10px">
<div style="font-size:11px;color:#6b7280;margin-bottom:4px">Antal ägare</div>
<div style="display:flex;gap:6px">
<button onclick="setOwnerCount(1)" class="owner-btn" data-oc="1" style="flex:1;padding:6px;border:1.5px solid #059669;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;background:#059669;color:#fff;font-family:inherit">1 person</button>
<button onclick="setOwnerCount(2)" class="owner-btn" data-oc="2" style="flex:1;padding:6px;border:1.5px solid #bbf7d0;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;background:#fff;color:#059669;font-family:inherit">2 personer</button>
</div>
</div>
<!-- Slider -->
<div id="solSliderSection">
<div style="display:flex;justify-content:space-between;font-size:11px;color:#6b7280;margin-bottom:4px">
<span>Kvarvarande avdrag</span>
<span id="solGreenSliderVal" style="font-weight:600;color:#059669">50 000 kr</span>
</div>
<input type="range" id="solGreenSlider" min="0" max="50000" step="5000" value="50000" oninput="updateGreenSlider()" style="width:100%;accent-color:#059669">
<div style="display:flex;justify-content:space-between;font-size:10px;color:#94a3b8"><span>0 kr</span><span id="solGreenSliderMax">50 000 kr</span></div>
</div>
</div>
<div class="total-section">
<div class="total-line"><span class="total-label">Att betala</span><span class="total-value" id="solPrTotal">0 kr</span></div>
<div class="total-vat">Inkl. moms</div>
</div>
<div style="padding:0 16px 16px">
<!-- Finansiering -->
<div style="background:#f0f9ff;border-radius:10px;padding:14px;margin-bottom:12px">
<div style="font-size:11px;color:#3b82f6;font-weight:600;margin-bottom:8px">FINANSIERING</div>
<div style="display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap">
<button onclick="setFinanceYears(5)" class="fin-yr-btn" data-yr="5" style="padding:4px 10px;border:1.5px solid #bfdbfe;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;background:#fff;color:#3b82f6;font-family:inherit">5 år</button>
<button onclick="setFinanceYears(10)" class="fin-yr-btn" data-yr="10" style="padding:4px 10px;border:1.5px solid #bfdbfe;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;background:#fff;color:#3b82f6;font-family:inherit">10 år</button>
<button onclick="setFinanceYears(15)" class="fin-yr-btn" data-yr="15" style="padding:4px 10px;border:1.5px solid #3b82f6;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;background:#3b82f6;color:#fff;font-family:inherit">15 år</button>
<button onclick="setFinanceYears(20)" class="fin-yr-btn" data-yr="20" style="padding:4px 10px;border:1.5px solid #bfdbfe;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;background:#fff;color:#3b82f6;font-family:inherit">20 år</button>
<button onclick="setFinanceYears(25)" class="fin-yr-btn" data-yr="25" style="padding:4px 10px;border:1.5px solid #bfdbfe;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;background:#fff;color:#3b82f6;font-family:inherit">25 år</button>
</div>
<div style="display:flex;justify-content:space-between;align-items:baseline">
<span style="font-size:13px;color:#334155">Månadskostnad <span id="solFinanceInfo" style="font-size:10px;color:#64748b">(15 år, 4.9%)</span></span>
<span id="solPrMonthly" style="font-size:20px;font-weight:700;color:#1e40af">0 kr/mån</span>
</div>
</div>
<!-- Uppskattad besparing -->
<div style="background:#ecfdf5;border-radius:10px;padding:14px;margin-bottom:16px">
<div style="font-size:11px;color:#059669;font-weight:600;margin-bottom:4px">UPPSKATTAD BESPARING</div>
<div style="display:flex;justify-content:space-between;align-items:baseline">
<span style="font-size:13px;color:#334155">Per år</span>
<span id="solPrSaving" style="font-size:20px;font-weight:700;color:#166534">0 kr/år</span>
</div>
<div style="display:flex;justify-content:space-between;align-items:baseline;margin-top:4px">
<span style="font-size:13px;color:#334155">Återbetalningstid</span>
<span id="solPrPayback" style="font-size:16px;font-weight:700;color:#166534">- år</span>
</div>
</div>
<button id="saveKalkylBtn" onclick="saveKalkylDraft()" style="width:100%;padding:12px;background:#f59e0b;color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:8px">
<svg viewBox="0 0 24 24" style="width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
Spara utkast
</button>
<button class="cart-btn" onclick="goToAffar()" style="width:100%;padding:14px;background:linear-gradient(135deg,#024550,#035e6b);color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px">
<svg viewBox="0 0 24 24" style="width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2"><path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2M9 5h6"/><path d="M9 12h6M9 16h6"/></svg>
Lägg till order
</button>
</div>
</div>
</div>
</div>
</div>
<!-- FÖNSTER/ÖVRIG KONFIGURATOR (dold vid solceller) -->
<div id="genericConfigView" style="display:none">
<div style="padding:40px;text-align:center;color:#94a3b8">
<svg viewBox="0 0 24 24" style="width:48px;height:48px;stroke:currentColor;fill:none;stroke-width:1.5;margin-bottom:12px"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
<p style="font-size:16px;font-weight:600">Konfigurator för denna kategori kommer snart</p>
<p style="font-size:13px">Solceller-konfiguratorn är aktiv — välj Solceller ovan.</p>
</div>
</div>
<!-- BATTERI (FRISTÅENDE) KONFIGURATOR -->
<div id="batteriConfigView" style="display:none">
<div style="display:grid;grid-template-columns:1fr 380px;gap:24px;align-items:start">
<div>
<div style="background:#dbeafe;border:1px solid #93c5fd;border-radius:10px;padding:14px 18px;margin-bottom:16px;font-size:13px;color:#1e40af">
<strong>Observera:</strong> Detta är för enbart batteriinstallation utan solceller.
</div>
<!-- Steg 1: Batterimärke -->
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:24px;margin-bottom:16px">
<div style="display:flex;align-items:center;gap:10px;margin-bottom:16px">
<div style="width:32px;height:32px;background:#ecfdf5;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#059669">1</div>
<h3 style="font-size:16px;font-weight:700;color:#1a1a1a;margin:0">Välj batterimärke</h3>
</div>
<div id="batBrandCards" style="display:grid;gap:10px"></div>
</div>
<!-- Steg 2: Batteristorlek -->
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:24px;margin-bottom:16px">
<div style="display:flex;align-items:center;gap:10px;margin-bottom:16px">
<div style="width:32px;height:32px;background:#eff6ff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#3b82f6">2</div>
<h3 style="font-size:16px;font-weight:700;color:#1a1a1a;margin:0">Välj batteristorlek</h3>
</div>
<div id="batSizeCards" style="display:grid;gap:10px"></div>
</div>
<!-- Steg 3: Tillägg -->
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:24px;margin-bottom:16px">
<div style="display:flex;align-items:center;gap:10px;margin-bottom:16px">
<div style="width:32px;height:32px;background:#faf5ff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#a855f7">3</div>
<h3 style="font-size:16px;font-weight:700;color:#1a1a1a;margin:0">Tillägg</h3>
</div>
<div id="batAddonCards" style="display:grid;gap:10px"></div>
</div>
</div>
<!-- PRISSIDEBAR -->
<div style="position:sticky;top:20px">
<div class="price-card">
<div class="price-header">Prissammanställning</div>
<div class="price-rows">
<div class="price-line"><span class="price-line-label">Batteri</span><span class="price-line-value" id="batPrBattery">0 kr</span></div>
<div class="price-line"><span class="price-line-label">Tillägg</span><span class="price-line-value" id="batPrAddons">0 kr</span></div>
<div class="price-line subtotal"><span class="price-line-label">Totalt före avdrag</span><span class="price-line-value" id="batPrSubtotal">0 kr</span></div>
</div>
<div class="rot-section" style="background:#ecfdf5;padding:14px 16px">
<div style="margin-bottom:10px">
<div style="font-size:11px;color:#6b7280;margin-bottom:6px;font-weight:600">SKATTEAVDRAG</div>
<div style="display:flex;gap:4px">
<button onclick="setBatDeduction('green')" class="bat-deduct-btn" data-dt="green" style="flex:1;padding:7px 4px;border:1.5px solid #059669;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;background:#059669;color:#fff;font-family:inherit;line-height:1.2">Grönt teknik<br><span style="font-size:9px;font-weight:400;opacity:.8">20% av allt</span></button>
<button onclick="setBatDeduction('none')" class="bat-deduct-btn" data-dt="none" style="flex:1;padding:7px 4px;border:1.5px solid #bbf7d0;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;background:#fff;color:#059669;font-family:inherit;line-height:1.2">Inget<br><span style="font-size:9px;font-weight:400;opacity:.8"> </span></button>
</div>
</div>
<div style="display:flex;justify-content:space-between;align-items:center">
<span id="batDeductLabel" style="font-size:12px;font-weight:700;color:#059669">GRÖNT TEKNIK-AVDRAG</span>
<span id="batDeductKr" style="font-size:16px;font-weight:700;color:#059669">0 kr</span>
</div>
<div id="batOwnerSection" style="margin-top:8px">
<div style="font-size:11px;color:#6b7280;margin-bottom:4px">Antal ägare</div>
<div style="display:flex;gap:6px">
<button onclick="setBatOwners(1)" class="bat-owner-btn" data-oc="1" style="flex:1;padding:6px;border:1.5px solid #059669;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;background:#059669;color:#fff;font-family:inherit">1 person</button>
<button onclick="setBatOwners(2)" class="bat-owner-btn" data-oc="2" style="flex:1;padding:6px;border:1.5px solid #bbf7d0;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;background:#fff;color:#059669;font-family:inherit">2 personer</button>
</div>
</div>
</div>
<div class="total-section">
<div class="total-line"><span class="total-label">Att betala</span><span class="total-value" id="batPrTotal">0 kr</span></div>
<div class="total-vat">Inkl. moms</div>
</div>
<div style="padding:0 16px 16px">
<div style="background:#f0f9ff;border-radius:10px;padding:14px;margin-bottom:12px">
<div style="font-size:11px;color:#3b82f6;font-weight:600;margin-bottom:8px">FINANSIERING</div>
<div style="display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap">
<button onclick="setBatFinYears(0)" class="bat-fin-btn" data-yr="0" style="padding:4px 10px;border:1.5px solid #bfdbfe;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;background:#fff;color:#3b82f6;font-family:inherit">Ej finans</button>
<button onclick="setBatFinYears(5)" class="bat-fin-btn" data-yr="5" style="padding:4px 10px;border:1.5px solid #bfdbfe;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;background:#fff;color:#3b82f6;font-family:inherit">5 år</button>
<button onclick="setBatFinYears(10)" class="bat-fin-btn" data-yr="10" style="padding:4px 10px;border:1.5px solid #bfdbfe;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;background:#fff;color:#3b82f6;font-family:inherit">10 år</button>
<button onclick="setBatFinYears(15)" class="bat-fin-btn" data-yr="15" style="padding:4px 10px;border:1.5px solid #3b82f6;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;background:#3b82f6;color:#fff;font-family:inherit">15 år</button>
</div>
<div style="display:flex;justify-content:space-between;align-items:baseline">
<span style="font-size:13px;color:#334155">Månadskostnad <span id="batFinInfo" style="font-size:10px;color:#64748b">(15 år, 4.9%)</span></span>
<span id="batPrMonthly" style="font-size:20px;font-weight:700;color:#1e40af">0 kr/mån</span>
</div>
</div>
<button onclick="saveCfgQuote('batteri')" style="width:100%;padding:12px;background:#f59e0b;color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:8px">💾 Spara kalkyl</button>
<button onclick="goToCfgAffar('batteri')" class="cart-btn" style="width:100%;padding:14px;background:linear-gradient(135deg,#024550,#035e6b);color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px">📋 Lägg till order</button>
</div>
</div>
</div>
</div>
</div>
<!-- LADDBOX KONFIGURATOR -->
<div id="laddboxConfigView" style="display:none">
<div style="display:grid;grid-template-columns:1fr 380px;gap:24px;align-items:start">
<div>
<!-- Steg 1: Välj laddbox -->
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:24px;margin-bottom:16px">
<div style="display:flex;align-items:center;gap:10px;margin-bottom:16px">
<div style="width:32px;height:32px;background:#ecfdf5;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#059669">1</div>
<h3 style="font-size:16px;font-weight:700;color:#1a1a1a;margin:0">Välj laddbox</h3>
</div>
<div id="lbChargerCards" style="display:grid;gap:10px"></div>
</div>
</div>
<!-- PRISSIDEBAR -->
<div style="position:sticky;top:20px">
<div class="price-card">
<div class="price-header">Prissammanställning</div>
<div class="price-rows">
<div class="price-line"><span class="price-line-label">Laddbox</span><span class="price-line-value" id="lbPrCharger">0 kr</span></div>
<div class="price-line subtotal"><span class="price-line-label">Totalt före avdrag</span><span class="price-line-value" id="lbPrSubtotal">0 kr</span></div>
</div>
<div class="rot-section" style="background:#ecfdf5;padding:14px 16px">
<div style="margin-bottom:10px">
<div style="font-size:11px;color:#6b7280;margin-bottom:6px;font-weight:600">SKATTEAVDRAG</div>
<div style="display:flex;gap:4px">
<button onclick="setLbDeduction('green')" class="lb-deduct-btn" data-dt="green" style="flex:1;padding:7px 4px;border:1.5px solid #059669;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;background:#059669;color:#fff;font-family:inherit;line-height:1.2">Grönt teknik<br><span style="font-size:9px;font-weight:400;opacity:.8">20% av allt</span></button>
<button onclick="setLbDeduction('none')" class="lb-deduct-btn" data-dt="none" style="flex:1;padding:7px 4px;border:1.5px solid #bbf7d0;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;background:#fff;color:#059669;font-family:inherit;line-height:1.2">Inget<br><span style="font-size:9px;font-weight:400;opacity:.8"> </span></button>
</div>
</div>
<div style="display:flex;justify-content:space-between;align-items:center">
<span id="lbDeductLabel" style="font-size:12px;font-weight:700;color:#059669">GRÖNT TEKNIK-AVDRAG</span>
<span id="lbDeductKr" style="font-size:16px;font-weight:700;color:#059669">0 kr</span>
</div>
<div id="lbOwnerSection" style="margin-top:8px">
<div style="font-size:11px;color:#6b7280;margin-bottom:4px">Antal ägare</div>
<div style="display:flex;gap:6px">
<button onclick="setLbOwners(1)" class="lb-owner-btn" data-oc="1" style="flex:1;padding:6px;border:1.5px solid #059669;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;background:#059669;color:#fff;font-family:inherit">1 person</button>
<button onclick="setLbOwners(2)" class="lb-owner-btn" data-oc="2" style="flex:1;padding:6px;border:1.5px solid #bbf7d0;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;background:#fff;color:#059669;font-family:inherit">2 personer</button>
</div>
</div>
</div>
<div class="total-section">
<div class="total-line"><span class="total-label">Att betala</span><span class="total-value" id="lbPrTotal">0 kr</span></div>
<div class="total-vat">Inkl. moms</div>
</div>
<div style="padding:0 16px 16px">
<div style="background:#f0f9ff;border-radius:10px;padding:14px;margin-bottom:12px">
<div style="font-size:11px;color:#3b82f6;font-weight:600;margin-bottom:8px">FINANSIERING</div>
<div style="display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap">
<button onclick="setLbFinYears(0)" class="lb-fin-btn" data-yr="0" style="padding:4px 10px;border:1.5px solid #bfdbfe;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;background:#fff;color:#3b82f6;font-family:inherit">Ej finans</button>
<button onclick="setLbFinYears(5)" class="lb-fin-btn" data-yr="5" style="padding:4px 10px;border:1.5px solid #bfdbfe;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;background:#fff;color:#3b82f6;font-family:inherit">5 år</button>
<button onclick="setLbFinYears(10)" class="lb-fin-btn" data-yr="10" style="padding:4px 10px;border:1.5px solid #bfdbfe;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;background:#fff;color:#3b82f6;font-family:inherit">10 år</button>
<button onclick="setLbFinYears(15)" class="lb-fin-btn" data-yr="15" style="padding:4px 10px;border:1.5px solid #3b82f6;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;background:#3b82f6;color:#fff;font-family:inherit">15 år</button>
</div>
<div style="display:flex;justify-content:space-between;align-items:baseline">
<span style="font-size:13px;color:#334155">Månadskostnad <span id="lbFinInfo" style="font-size:10px;color:#64748b">(15 år, 4.9%)</span></span>
<span id="lbPrMonthly" style="font-size:20px;font-weight:700;color:#1e40af">0 kr/mån</span>
</div>
</div>
<button onclick="saveCfgQuote('laddbox')" style="width:100%;padding:12px;background:#f59e0b;color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:8px">💾 Spara kalkyl</button>
<button onclick="goToCfgAffar('laddbox')" class="cart-btn" style="width:100%;padding:14px;background:linear-gradient(135deg,#024550,#035e6b);color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px">📋 Lägg till order</button>
</div>
</div>
</div>
</div>
</div>
<!-- TAKTVÄTT KONFIGURATOR -->
<div id="taktvatConfigView" style="display:none">
<div style="display:grid;grid-template-columns:1fr 380px;gap:24px;align-items:start">
<div>
<!-- Steg 1: Typ + yta -->
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:24px;margin-bottom:16px">
<div style="display:flex;align-items:center;gap:10px;margin-bottom:16px">
<div style="width:32px;height:32px;background:#ecfdf5;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#059669">1</div>
<h3 style="font-size:16px;font-weight:700;color:#1a1a1a;margin:0">Typ av taktvätt</h3>
</div>
<div id="ttTypeCards" style="display:grid;gap:10px;margin-bottom:16px"></div>
<div style="margin-top:16px">
<label style="font-size:11px;font-weight:600;color:#64748b;display:block;margin-bottom:4px">Takyta (m²)</label>
<input type="number" id="ttArea" value="" placeholder="150" min="0" oninput="updateTtCalc()" style="width:200px;padding:10px 14px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:14px;font-family:inherit;box-sizing:border-box">
</div>
</div>
</div>
<!-- PRISSIDEBAR (renderas av prissammanstallning.js) -->
<div id="ttPrisSidebar"></div>
</div>
</div>
<!-- VÄRMEPUMP KONFIGURATOR -->
<div id="varmepumpConfigView" style="display:none">
<div style="display:grid;grid-template-columns:1fr 380px;gap:24px;align-items:start">
<div>
<!-- Steg 1: Välj värmepump -->
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:24px;margin-bottom:16px">
<div style="display:flex;align-items:center;gap:10px;margin-bottom:16px">
<div style="width:32px;height:32px;background:#ecfdf5;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#059669">1</div>
<h3 style="font-size:16px;font-weight:700;color:#1a1a1a;margin:0">Välj värmepump</h3>
</div>
<div id="vpPumpCards" style="display:grid;gap:10px"></div>
</div>
</div>
<!-- PRISSIDEBAR -->
<div style="position:sticky;top:20px">
<div class="price-card">
<div class="price-header">Prissammanställning</div>
<div class="price-rows">
<div class="price-line"><span class="price-line-label">Värmepump</span><span class="price-line-value" id="vpPrPump">0 kr</span></div>
<div class="price-line"><span class="price-line-label">Installation</span><span class="price-line-value" id="vpPrInstall">0 kr</span></div>
<div class="price-line subtotal"><span class="price-line-label">Totalt före avdrag</span><span class="price-line-value" id="vpPrSubtotal">0 kr</span></div>
</div>
<div class="rot-section" style="background:#ecfdf5;padding:14px 16px">
<div style="margin-bottom:10px">
<div style="font-size:11px;color:#6b7280;margin-bottom:6px;font-weight:600">SKATTEAVDRAG</div>
<div style="display:flex;gap:4px">
<button onclick="setVpDeduction('green')" class="vp-deduct-btn" data-dt="green" style="flex:1;padding:7px 4px;border:1.5px solid #059669;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;background:#059669;color:#fff;font-family:inherit;line-height:1.2">Grönt teknik<br><span style="font-size:9px;font-weight:400;opacity:.8">20% av allt</span></button>
<button onclick="setVpDeduction('rot')" class="vp-deduct-btn" data-dt="rot" style="flex:1;padding:7px 4px;border:1.5px solid #bbf7d0;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;background:#fff;color:#059669;font-family:inherit;line-height:1.2">ROT-avdrag<br><span style="font-size:9px;font-weight:400;opacity:.8">30% av arbete</span></button>
<button onclick="setVpDeduction('none')" class="vp-deduct-btn" data-dt="none" style="flex:1;padding:7px 4px;border:1.5px solid #bbf7d0;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;background:#fff;color:#059669;font-family:inherit;line-height:1.2">Inget<br><span style="font-size:9px;font-weight:400;opacity:.8"> </span></button>
</div>
</div>
<div style="display:flex;justify-content:space-between;align-items:center">
<span id="vpDeductLabel" style="font-size:12px;font-weight:700;color:#059669">GRÖNT TEKNIK-AVDRAG</span>
<span id="vpDeductKr" style="font-size:16px;font-weight:700;color:#059669">0 kr</span>
</div>
<div id="vpOwnerSection" style="margin-top:8px">
<div style="font-size:11px;color:#6b7280;margin-bottom:4px">Antal ägare</div>
<div style="display:flex;gap:6px">
<button onclick="setVpOwners(1)" class="vp-owner-btn" data-oc="1" style="flex:1;padding:6px;border:1.5px solid #059669;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;background:#059669;color:#fff;font-family:inherit">1 person</button>
<button onclick="setVpOwners(2)" class="vp-owner-btn" data-oc="2" style="flex:1;padding:6px;border:1.5px solid #bbf7d0;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;background:#fff;color:#059669;font-family:inherit">2 personer</button>
</div>
</div>
</div>
<div class="total-section">
<div class="total-line"><span class="total-label">Att betala</span><span class="total-value" id="vpPrTotal">0 kr</span></div>
<div class="total-vat">Inkl. moms</div>
</div>
<div style="padding:0 16px 16px">
<div style="background:#f0f9ff;border-radius:10px;padding:14px;margin-bottom:12px">
<div style="font-size:11px;color:#3b82f6;font-weight:600;margin-bottom:8px">FINANSIERING</div>
<div style="display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap">
<button onclick="setVpFinYears(0)" class="vp-fin-btn" data-yr="0" style="padding:4px 10px;border:1.5px solid #bfdbfe;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;background:#fff;color:#3b82f6;font-family:inherit">Ej finans</button>
<button onclick="setVpFinYears(5)" class="vp-fin-btn" data-yr="5" style="padding:4px 10px;border:1.5px solid #bfdbfe;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;background:#fff;color:#3b82f6;font-family:inherit">5 år</button>
<button onclick="setVpFinYears(10)" class="vp-fin-btn" data-yr="10" style="padding:4px 10px;border:1.5px solid #bfdbfe;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;background:#fff;color:#3b82f6;font-family:inherit">10 år</button>
<button onclick="setVpFinYears(15)" class="vp-fin-btn" data-yr="15" style="padding:4px 10px;border:1.5px solid #3b82f6;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;background:#3b82f6;color:#fff;font-family:inherit">15 år</button>
</div>
<div style="display:flex;justify-content:space-between;align-items:baseline">
<span style="font-size:13px;color:#334155">Månadskostnad <span id="vpFinInfo" style="font-size:10px;color:#64748b">(15 år, 4.9%)</span></span>
<span id="vpPrMonthly" style="font-size:20px;font-weight:700;color:#1e40af">0 kr/mån</span>
</div>
</div>
<button onclick="saveCfgQuote('varmepump')" style="width:100%;padding:12px;background:#f59e0b;color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:8px">💾 Spara kalkyl</button>
<button onclick="goToCfgAffar('varmepump')" class="cart-btn" style="width:100%;padding:14px;background:linear-gradient(135deg,#024550,#035e6b);color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px">📋 Lägg till order</button>
</div>
</div>
</div>
</div>
</div>
<!-- TAK KONFIGURATOR -->
<div id="takConfigView" style="display:none">
<div style="display:grid;grid-template-columns:1fr 380px;gap:24px;align-items:start">
<div>
<!-- Steg 1: Takytor -->
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:24px;margin-bottom:16px">
<div style="display:flex;align-items:center;gap:10px;margin-bottom:16px">
<div style="width:32px;height:32px;background:#ecfdf5;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#059669">1</div>
<h3 style="font-size:16px;font-weight:700;color:#1a1a1a;margin:0">Takytor</h3>
<button onclick="addTakYta()" style="margin-left:auto;padding:6px 14px;background:#3b82f6;color:#fff;border:none;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit">+ Lägg till takyta</button>
</div>
<div id="takYtorContainer" style="display:grid;gap:12px">
<div style="text-align:center;padding:30px;border:2px dashed #e5e7eb;border-radius:10px;color:#94a3b8">
<p style="font-size:14px;font-weight:600;margin:0 0 8px">Inga takytor tillagda ännu</p>
<button onclick="addTakYta()" style="padding:8px 16px;background:#f0f9ff;border:1.5px solid #3b82f6;border-radius:8px;color:#3b82f6;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit">+ Lägg till första takytan</button>
</div>
</div>
</div>
<!-- Steg 2: Tillbehör -->
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:24px;margin-bottom:16px">
<div style="display:flex;align-items:center;gap:10px;margin-bottom:16px">
<div style="width:32px;height:32px;background:#eff6ff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#3b82f6">2</div>
<h3 style="font-size:16px;font-weight:700;color:#1a1a1a;margin:0">Tillbehör</h3>
</div>
<div id="takTillbehorCards" style="display:grid;gap:10px"></div>
</div>
</div>
<!-- PRISSIDEBAR -->
<div style="position:sticky;top:20px">
<div class="price-card">
<div class="price-header">Prissammanställning</div>
<div class="price-rows">
<div class="price-line"><span class="price-line-label">Takytor</span><span class="price-line-value" id="takPrYtor">0 kr</span></div>
<div class="price-line"><span class="price-line-label">Tillbehör</span><span class="price-line-value" id="takPrTillb">0 kr</span></div>
<div class="price-line subtotal"><span class="price-line-label">Totalt före avdrag</span><span class="price-line-value" id="takPrSubtotal">0 kr</span></div>
</div>
<div class="rot-section" style="background:#ecfdf5;padding:14px 16px">
<div style="margin-bottom:10px">
<div style="font-size:11px;color:#6b7280;margin-bottom:6px;font-weight:600">SKATTEAVDRAG</div>
<div style="display:flex;gap:4px">
<button onclick="setTakDeduction('rot')" class="tak-deduct-btn" data-dt="rot" style="flex:1;padding:7px 4px;border:1.5px solid #059669;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;background:#059669;color:#fff;font-family:inherit;line-height:1.2">ROT-avdrag<br><span style="font-size:9px;font-weight:400;opacity:.8">30% av arbete</span></button>
<button onclick="setTakDeduction('none')" class="tak-deduct-btn" data-dt="none" style="flex:1;padding:7px 4px;border:1.5px solid #bbf7d0;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;background:#fff;color:#059669;font-family:inherit;line-height:1.2">Inget<br><span style="font-size:9px;font-weight:400;opacity:.8"> </span></button>
</div>
</div>
<div style="display:flex;justify-content:space-between;align-items:center">
<span id="takDeductLabel" style="font-size:12px;font-weight:700;color:#059669">ROT-AVDRAG</span>
<span id="takDeductKr" style="font-size:16px;font-weight:700;color:#059669">0 kr</span>
</div>
<div id="takOwnerSection" style="margin-top:8px">
<div style="font-size:11px;color:#6b7280;margin-bottom:4px">Antal ägare</div>
<div style="display:flex;gap:6px">
<button onclick="setTakOwners(1)" class="tak-owner-btn" data-oc="1" style="flex:1;padding:6px;border:1.5px solid #059669;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;background:#059669;color:#fff;font-family:inherit">1 person</button>
<button onclick="setTakOwners(2)" class="tak-owner-btn" data-oc="2" style="flex:1;padding:6px;border:1.5px solid #bbf7d0;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;background:#fff;color:#059669;font-family:inherit">2 personer</button>
</div>
</div>
</div>
<div class="total-section">
<div class="total-line"><span class="total-label">Att betala</span><span class="total-value" id="takPrTotal">0 kr</span></div>
<div class="total-vat">Inkl. moms</div>
</div>
<div style="padding:0 16px 16px">
<div style="background:#f0f9ff;border-radius:10px;padding:14px;margin-bottom:12px">
<div style="font-size:11px;color:#3b82f6;font-weight:600;margin-bottom:8px">FINANSIERING</div>
<div style="display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap">
<button onclick="setTakFinYears(0)" class="tak-fin-btn" data-yr="0" style="padding:4px 10px;border:1.5px solid #bfdbfe;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;background:#fff;color:#3b82f6;font-family:inherit">Ej finans</button>
<button onclick="setTakFinYears(5)" class="tak-fin-btn" data-yr="5" style="padding:4px 10px;border:1.5px solid #bfdbfe;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;background:#fff;color:#3b82f6;font-family:inherit">5 år</button>
<button onclick="setTakFinYears(10)" class="tak-fin-btn" data-yr="10" style="padding:4px 10px;border:1.5px solid #bfdbfe;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;background:#fff;color:#3b82f6;font-family:inherit">10 år</button>
<button onclick="setTakFinYears(15)" class="tak-fin-btn" data-yr="15" style="padding:4px 10px;border:1.5px solid #3b82f6;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;background:#3b82f6;color:#fff;font-family:inherit">15 år</button>
</div>
<div style="display:flex;justify-content:space-between;align-items:baseline">
<span style="font-size:13px;color:#334155">Månadskostnad <span id="takFinInfo" style="font-size:10px;color:#64748b">(15 år, 4.9%)</span></span>
<span id="takPrMonthly" style="font-size:20px;font-weight:700;color:#1e40af">0 kr/mån</span>
</div>
</div>
<button onclick="saveCfgQuote('tak')" style="width:100%;padding:12px;background:#f59e0b;color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:8px">💾 Spara kalkyl</button>
<button onclick="goToCfgAffar('tak')" class="cart-btn" style="width:100%;padding:14px;background:linear-gradient(135deg,#024550,#035e6b);color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px">📋 Lägg till order</button>
</div>
</div>
</div>
</div>
</div>
<!-- ISOLERING KONFIGURATOR -->
<div id="isoleringConfigView" style="display:none">
<div style="display:grid;grid-template-columns:1fr 380px;gap:24px;align-items:start">
<div>
<!-- Steg 1: Isolering -->
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:24px;margin-bottom:16px">
<div style="display:flex;align-items:center;gap:10px;margin-bottom:16px">
<div style="width:32px;height:32px;background:#ecfdf5;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#059669">1</div>
<h3 style="font-size:16px;font-weight:700;color:#1a1a1a;margin:0">Isolering</h3>
</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
<div>
<label style="font-size:11px;font-weight:600;color:#64748b;display:block;margin-bottom:3px">Yta (m²)</label>
<input type="number" id="isoArea" value="" placeholder="120" min="0" oninput="updateIsoCalc()" style="width:100%;padding:10px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:14px;font-family:inherit;box-sizing:border-box">
</div>
<div>
<label style="font-size:11px;font-weight:600;color:#64748b;display:block;margin-bottom:3px">Isoleringstyp</label>
<input type="text" id="isoType" value="" placeholder="Mineralull" oninput="updateIsoCalc()" style="width:100%;padding:10px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:14px;font-family:inherit;box-sizing:border-box">
</div>
<div>
<label style="font-size:11px;font-weight:600;color:#64748b;display:block;margin-bottom:3px">Tjocklek (mm)</label>
<input type="number" id="isoThickness" value="" placeholder="200" min="0" oninput="updateIsoCalc()" style="width:100%;padding:10px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:14px;font-family:inherit;box-sizing:border-box">
</div>
<div>
<label style="font-size:11px;font-weight:600;color:#64748b;display:block;margin-bottom:3px">Totalt pris (kr)</label>
<input type="number" id="isoPrice" value="" placeholder="35000" min="0" oninput="updateIsoCalc()" style="width:100%;padding:10px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:14px;font-family:inherit;box-sizing:border-box">
</div>
</div>
</div>
</div>
<!-- PRISSIDEBAR -->
<div style="position:sticky;top:20px">
<div class="price-card">
<div class="price-header">Prissammanställning</div>
<div class="price-rows">
<div class="price-line"><span class="price-line-label">Isolering <span style="font-size:10px;color:#94a3b8" id="isoPrDesc"></span></span><span class="price-line-value" id="isoPrMaterial">0 kr</span></div>
<div class="price-line subtotal"><span class="price-line-label">Totalt före avdrag</span><span class="price-line-value" id="isoPrSubtotal">0 kr</span></div>
</div>
<div class="rot-section" style="background:#ecfdf5;padding:14px 16px">
<div style="margin-bottom:10px">
<div style="font-size:11px;color:#6b7280;margin-bottom:6px;font-weight:600">SKATTEAVDRAG</div>
<div style="display:flex;gap:4px">
<button onclick="setIsoDeduction('rot')" class="iso-deduct-btn" data-dt="rot" style="flex:1;padding:7px 4px;border:1.5px solid #059669;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;background:#059669;color:#fff;font-family:inherit;line-height:1.2">ROT-avdrag<br><span style="font-size:9px;font-weight:400;opacity:.8">30% av arbete</span></button>
<button onclick="setIsoDeduction('none')" class="iso-deduct-btn" data-dt="none" style="flex:1;padding:7px 4px;border:1.5px solid #bbf7d0;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;background:#fff;color:#059669;font-family:inherit;line-height:1.2">Inget<br><span style="font-size:9px;font-weight:400;opacity:.8"> </span></button>
</div>
</div>
<div style="display:flex;justify-content:space-between;align-items:center">
<span id="isoDeductLabel" style="font-size:12px;font-weight:700;color:#059669">ROT-AVDRAG</span>
<span id="isoDeductKr" style="font-size:16px;font-weight:700;color:#059669">0 kr</span>
</div>
<div id="isoOwnerSection" style="margin-top:8px">
<div style="font-size:11px;color:#6b7280;margin-bottom:4px">Antal ägare</div>
<div style="display:flex;gap:6px">
<button onclick="setIsoOwners(1)" class="iso-owner-btn" data-oc="1" style="flex:1;padding:6px;border:1.5px solid #059669;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;background:#059669;color:#fff;font-family:inherit">1 person</button>
<button onclick="setIsoOwners(2)" class="iso-owner-btn" data-oc="2" style="flex:1;padding:6px;border:1.5px solid #bbf7d0;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;background:#fff;color:#059669;font-family:inherit">2 personer</button>
</div>
</div>
</div>
<div class="total-section">
<div class="total-line"><span class="total-label">Att betala</span><span class="total-value" id="isoPrTotal">0 kr</span></div>
<div class="total-vat">Inkl. moms</div>
</div>
<div style="padding:0 16px 16px">
<div style="background:#f0f9ff;border-radius:10px;padding:14px;margin-bottom:12px">
<div style="font-size:11px;color:#3b82f6;font-weight:600;margin-bottom:8px">FINANSIERING</div>
<div style="display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap">
<button onclick="setIsoFinYears(0)" class="iso-fin-btn" data-yr="0" style="padding:4px 10px;border:1.5px solid #bfdbfe;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;background:#fff;color:#3b82f6;font-family:inherit">Ej finans</button>
<button onclick="setIsoFinYears(5)" class="iso-fin-btn" data-yr="5" style="padding:4px 10px;border:1.5px solid #bfdbfe;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;background:#fff;color:#3b82f6;font-family:inherit">5 år</button>
<button onclick="setIsoFinYears(10)" class="iso-fin-btn" data-yr="10" style="padding:4px 10px;border:1.5px solid #bfdbfe;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;background:#fff;color:#3b82f6;font-family:inherit">10 år</button>
<button onclick="setIsoFinYears(15)" class="iso-fin-btn" data-yr="15" style="padding:4px 10px;border:1.5px solid #3b82f6;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;background:#3b82f6;color:#fff;font-family:inherit">15 år</button>
</div>
<div style="display:flex;justify-content:space-between;align-items:baseline">
<span style="font-size:13px;color:#334155">Månadskostnad <span id="isoFinInfo" style="font-size:10px;color:#64748b">(15 år, 4.9%)</span></span>
<span id="isoPrMonthly" style="font-size:20px;font-weight:700;color:#1e40af">0 kr/mån</span>
</div>
</div>
<button onclick="saveCfgQuote('isolering')" style="width:100%;padding:12px;background:#f59e0b;color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:8px">💾 Spara kalkyl</button>
<button onclick="goToCfgAffar('isolering')" class="cart-btn" style="width:100%;padding:14px;background:linear-gradient(135deg,#024550,#035e6b);color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px">📋 Lägg till order</button>
</div>
</div>
</div>
</div>
</div>
<!-- FÖNSTER-KONFIGURATOR -->
<div id="fonsterConfigView" style="display:none">
<div style="display:grid;grid-template-columns:1fr 380px;gap:24px;align-items:start">
<div>
<!-- Steg 1: Välj fönstertyp -->
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:24px;margin-bottom:16px">
<div style="display:flex;align-items:center;gap:10px;margin-bottom:16px">
<div style="width:32px;height:32px;background:#ecfdf5;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#059669">1</div>
<h3 style="font-size:16px;font-weight:700;color:#1a1a1a;margin:0">Välj fönstertyp</h3>
</div>
<div id="fkProductCards" style="display:grid;gap:10px"></div>
</div>
<!-- Steg 2: Konfigurera -->
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:24px;margin-bottom:16px">
<div style="display:flex;align-items:center;gap:10px;margin-bottom:16px">
<div style="width:32px;height:32px;background:#eff6ff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#3b82f6">2</div>
<h3 style="font-size:16px;font-weight:700;color:#1a1a1a;margin:0">Fönsterpositioner</h3>
<div style="margin-left:auto;display:flex;gap:12px;font-size:12px;color:#64748b">
<span>Totalt: <strong id="fkTotalCount" style="color:#1a1a1a">0</strong> st</span>
</div>
</div>
<!-- Grundval (profil + fönsterfärg) -->
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:16px;padding:14px;background:#f8fafc;border-radius:10px">
<div>
<label style="font-size:11px;font-weight:600;color:#64748b;display:block;margin-bottom:3px">Profil (alla fönster)</label>
<select id="fkProfil" onchange="updateFkCalc()" style="width:100%;padding:8px 10px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:12px;font-family:inherit;background:#fff">
<option value="Optima Trä">Optima Trä</option>
<option value="Optima Trä/Alu">Optima Trä/Alu</option>
<option value="PVC Ara">PVC Ara</option>
</select>
</div>
<div>
<label style="font-size:11px;font-weight:600;color:#64748b;display:block;margin-bottom:3px">Färg insida (fönster)</label>
<select id="fkFargIn" onchange="updateFkCalc()" style="width:100%;padding:8px 10px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:12px;font-family:inherit;background:#fff">
<option value="Vit (RAL9010)" selected>Vit (RAL9010)</option>
<option value="Ljusgrå">Ljusgrå</option>
<option value="Svart">Svart</option>
<option value="Oljad ek">Oljad ek</option>
</select>
</div>
<div>
<label style="font-size:11px;font-weight:600;color:#64748b;display:block;margin-bottom:3px">Färg utsida (fönster)</label>
<select id="fkFargUt" onchange="updateFkCalc()" style="width:100%;padding:8px 10px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:12px;font-family:inherit;background:#fff">
<option value="Vit (RAL9010)" selected>Vit (RAL9010)</option>
<option value="Ljusgrå">Ljusgrå</option>
<option value="Svart">Svart</option>
<option value="Faluröd">Faluröd</option>
</select>
</div>
</div>
<!-- Positionstabell -->
<div style="overflow-x:auto">
<table style="width:100%;border-collapse:collapse;font-size:12px">
<thead><tr style="background:#f1f5f9">
<th style="padding:8px 6px;border:1px solid #e2e8f0;width:35px;text-align:center">Pos</th>
<th style="padding:8px 6px;border:1px solid #e2e8f0;width:100px">Rum</th>
<th style="padding:8px 6px;border:1px solid #e2e8f0;width:140px">Produkt</th>
<th style="padding:8px 6px;border:1px solid #e2e8f0;width:70px">Bredd</th>
<th style="padding:8px 6px;border:1px solid #e2e8f0;width:70px">Höjd</th>
<th style="padding:8px 6px;border:1px solid #e2e8f0;width:50px">Antal</th>
<th style="padding:8px 6px;border:1px solid #e2e8f0;width:120px">Glas</th>
<th style="padding:8px 6px;border:1px solid #e2e8f0;width:120px">Notering</th>
<th style="padding:8px 6px;border:1px solid #e2e8f0;width:30px"></th>
</tr></thead>
<tbody id="fkPosBody"></tbody>
</table>
</div>
<button type="button" onclick="addFkPos()" style="margin-top:8px;padding:8px 20px;border-radius:8px;border:1.5px solid #3b82f6;background:#f0f9ff;font-size:12px;font-weight:600;cursor:pointer;color:#3b82f6;font-family:inherit">+ Lägg till position</button>
</div>
<!-- Steg 3: Foder & Smyg -->
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:24px;margin-bottom:16px">
<div style="display:flex;align-items:center;gap:10px;margin-bottom:16px">
<div style="width:32px;height:32px;background:#faf5ff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#a855f7">3</div>
<h3 style="font-size:16px;font-weight:700;color:#1a1a1a;margin:0">Foder, Smyg & Färg</h3>
</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">
<!-- Foder -->
<div>
<label style="font-size:11px;font-weight:600;color:#64748b;display:block;margin-bottom:4px">Foder</label>
<div id="fkFoderCards" style="display:grid;gap:6px">
<label onclick="setFkFoder('gerad')" style="display:flex;align-items:center;gap:10px;padding:10px 14px;border:2px solid #a855f7;border-radius:8px;cursor:pointer;background:#faf5ff">
<input type="radio" name="fkFoder" value="gerad" checked style="accent-color:#a855f7">
<div><div style="font-weight:600;font-size:13px">Gerad (kant i kant)</div><div style="font-size:11px;color:#64748b">45° gering, list möter list</div></div>
</label>
<label onclick="setFkFoder('kloss')" style="display:flex;align-items:center;gap:10px;padding:10px 14px;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;background:#fff">
<input type="radio" name="fkFoder" value="kloss" style="accent-color:#a855f7">
<div><div style="font-weight:600;font-size:13px">Med kloss</div><div style="font-size:11px;color:#64748b">Rak kap med hörnkloss</div></div>
</label>
<label onclick="setFkFoder('ingen')" style="display:flex;align-items:center;gap:10px;padding:10px 14px;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;background:#fff">
<input type="radio" name="fkFoder" value="ingen" style="accent-color:#a855f7">
<div><div style="font-weight:600;font-size:13px">Utan foder</div><div style="font-size:11px;color:#64748b">Inget foder</div></div>
</label>
</div>
</div>
<!-- Smyg -->
<div>
<label style="font-size:11px;font-weight:600;color:#64748b;display:block;margin-bottom:4px">Smyg</label>
<div id="fkSmygCards" style="display:grid;gap:6px">
<label onclick="setFkSmyg('ja')" style="display:flex;align-items:center;gap:10px;padding:10px 14px;border:2px solid #a855f7;border-radius:8px;cursor:pointer;background:#faf5ff">
<input type="radio" name="fkSmyg" value="ja" checked style="accent-color:#a855f7">
<div><div style="font-weight:600;font-size:13px">Med smyg</div><div style="font-size:11px;color:#64748b">Smygbräda runt fönstret</div></div>
</label>
<label onclick="setFkSmyg('nej')" style="display:flex;align-items:center;gap:10px;padding:10px 14px;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;background:#fff">
<input type="radio" name="fkSmyg" value="nej" style="accent-color:#a855f7">
<div><div style="font-weight:600;font-size:13px">Utan smyg</div><div style="font-size:11px;color:#64748b">Ingen smygbräda</div></div>
</label>
</div>
</div>
<!-- Färg insida (foder/smyg) -->
<div>
<label style="font-size:11px;font-weight:600;color:#64748b;display:block;margin-bottom:4px">Färg foder/smyg insida</label>
<select id="fkFoderFargIn" onchange="updateFkCalc()" style="width:100%;padding:9px 10px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;font-family:inherit">
<option value="Vit (RAL9010)" selected>Vit (RAL9010)</option>
<option value="Ljusgrå">Ljusgrå</option>
<option value="Svart">Svart</option>
<option value="Oljad ek">Oljad ek</option>
<option value="Laserad furu">Laserad furu</option>
<option value="Faluröd">Faluröd</option>
</select>
</div>
<!-- Färg utsida (foder/smyg) -->
<div>
<label style="font-size:11px;font-weight:600;color:#64748b;display:block;margin-bottom:4px">Färg foder/smyg utsida</label>
<select id="fkFoderFargUt" onchange="updateFkCalc()" style="width:100%;padding:9px 10px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;font-family:inherit">
<option value="Vit (RAL9010)" selected>Vit (RAL9010)</option>
<option value="Ljusgrå">Ljusgrå</option>
<option value="Svart">Svart</option>
<option value="Faluröd">Faluröd</option>
<option value="Laserad furu">Laserad furu</option>
</select>
</div>
<!-- Fönsterbänk -->
<div style="grid-column:1/-1">
<label style="font-size:11px;font-weight:600;color:#64748b;display:block;margin-bottom:4px">Fönsterbänk</label>
<div style="display:flex;gap:8px;flex-wrap:wrap">
<label style="display:flex;align-items:center;gap:6px;padding:8px 14px;border:2px solid #a855f7;border-radius:8px;cursor:pointer;background:#faf5ff;font-size:13px">
<input type="radio" name="fkBank" value="tra" checked onchange="updateFkCalc()" style="accent-color:#a855f7"> Trä
</label>
<label style="display:flex;align-items:center;gap:6px;padding:8px 14px;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;background:#fff;font-size:13px">
<input type="radio" name="fkBank" value="granit" onchange="updateFkCalc()" style="accent-color:#a855f7"> Granit
</label>
<label style="display:flex;align-items:center;gap:6px;padding:8px 14px;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;background:#fff;font-size:13px">
<input type="radio" name="fkBank" value="marmor" onchange="updateFkCalc()" style="accent-color:#a855f7"> Marmor
</label>
<label style="display:flex;align-items:center;gap:6px;padding:8px 14px;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;background:#fff;font-size:13px">
<input type="radio" name="fkBank" value="ingen" onchange="updateFkCalc()" style="accent-color:#a855f7"> Utan
</label>
</div>
</div>
</div>
</div>
<!-- Steg 4: Tillbehör -->
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:24px;margin-bottom:16px">
<div style="display:flex;align-items:center;gap:10px;margin-bottom:16px">
<div style="width:32px;height:32px;background:#fef3c7;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#d97706">4</div>
<h3 style="font-size:16px;font-weight:700;color:#1a1a1a;margin:0">Tillbehör</h3>
</div>
<div id="fkTillbCatTabs" style="display:flex;gap:4px;flex-wrap:wrap;margin-bottom:16px"></div>
<div style="display:grid;grid-template-columns:180px 1fr;gap:16px;min-height:200px">
<div id="fkTillbCatMenu" style="display:flex;flex-direction:column;gap:2px"></div>
<div id="fkTillbProducts" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;align-content:start"></div>
</div>
<div id="fkTillbSelected" style="margin-top:16px;display:none">
<div style="font-size:12px;font-weight:600;color:#64748b;margin-bottom:8px">Valda tillbehör:</div>
<div id="fkTillbSelectedList" style="display:grid;gap:6px"></div>
</div>
</div>
<!-- Steg 5: Montering & Frakt -->
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:24px;margin-bottom:16px">
<div style="display:flex;align-items:center;gap:10px;margin-bottom:16px">
<div style="width:32px;height:32px;background:#0ea5e9;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#fff">5</div>
<h3 style="font-size:16px;font-weight:700;color:#1a1a1a;margin:0">Montering & Frakt</h3>
</div>
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px">
<div>
<label style="font-size:11px;font-weight:600;color:#64748b;display:block;margin-bottom:3px">Montering (timmar)</label>
<input type="number" id="fkMontTimmar" value="0" min="0" oninput="updateFkCalc()" style="width:100%;padding:7px 10px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;font-family:inherit;box-sizing:border-box">
</div>
<div>
<label style="font-size:11px;font-weight:600;color:#64748b;display:block;margin-bottom:3px">Timpris (kr)</label>
<input type="number" id="fkMontPris" value="650" oninput="updateFkCalc()" style="width:100%;padding:7px 10px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;font-family:inherit;box-sizing:border-box">
</div>
<div>
<label style="font-size:11px;font-weight:600;color:#64748b;display:block;margin-bottom:3px">Frakt (kr)</label>
<input type="number" id="fkFrakt" value="0" min="0" oninput="updateFkCalc()" style="width:100%;padding:7px 10px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;font-family:inherit;box-sizing:border-box">
</div>
</div>
</div>
</div>
<!-- PRISSIDEBAR -->
<div style="position:sticky;top:20px">
<div class="price-card">
<div class="price-header">Prissammanställning</div>
<div class="price-rows">
<div class="price-line"><span class="price-line-label">Fönster <span style="font-size:10px;color:#94a3b8" id="fkPrDesc"></span></span><span class="price-line-value" id="fkPrFonster">0 kr</span></div>
<div class="price-line"><span class="price-line-label">Tillbehör</span><span class="price-line-value" id="fkPrTillbehor">0 kr</span></div>
<div class="price-line"><span class="price-line-label">Montering</span><span class="price-line-value" id="fkPrMontering">0 kr</span></div>
<div class="price-line"><span class="price-line-label">Frakt</span><span class="price-line-value" id="fkPrFrakt">0 kr</span></div>
<div class="price-line subtotal"><span class="price-line-label">Totalt före avdrag</span><span class="price-line-value" id="fkPrSubtotal">0 kr</span></div>
</div>
<div class="rot-section" style="background:#ecfdf5;padding:14px 16px">
<div style="margin-bottom:10px">
<div style="font-size:11px;color:#6b7280;margin-bottom:6px;font-weight:600">SKATTEAVDRAG</div>
<div style="display:flex;gap:4px">
<button onclick="setFkDeduction('rot')" class="fk-deduct-btn" data-dt="rot" style="flex:1;padding:7px 4px;border:1.5px solid #059669;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;background:#059669;color:#fff;font-family:inherit;line-height:1.2">ROT-avdrag<br><span style="font-size:9px;font-weight:400;opacity:.8">30% av arbete</span></button>
<button onclick="setFkDeduction('green')" class="fk-deduct-btn" data-dt="green" style="flex:1;padding:7px 4px;border:1.5px solid #bbf7d0;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;background:#fff;color:#059669;font-family:inherit;line-height:1.2">Grönt teknik<br><span style="font-size:9px;font-weight:400;opacity:.8">20% av allt</span></button>
<button onclick="setFkDeduction('none')" class="fk-deduct-btn" data-dt="none" style="flex:1;padding:7px 4px;border:1.5px solid #bbf7d0;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;background:#fff;color:#059669;font-family:inherit;line-height:1.2">Inget<br><span style="font-size:9px;font-weight:400;opacity:.8"> </span></button>
</div>
</div>
<div style="display:flex;justify-content:space-between;align-items:center">
<span id="fkDeductLabel" style="font-size:12px;font-weight:700;color:#059669">ROT-AVDRAG</span>
<span id="fkDeductKr" style="font-size:16px;font-weight:700;color:#059669">0 kr</span>
</div>
<div id="fkOwnerSection" style="margin-top:8px">
<div style="font-size:11px;color:#6b7280;margin-bottom:4px">Antal ägare</div>
<div style="display:flex;gap:6px">
<button onclick="setFkOwners(1)" class="fk-owner-btn" data-oc="1" style="flex:1;padding:6px;border:1.5px solid #059669;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;background:#059669;color:#fff;font-family:inherit">1 person</button>
<button onclick="setFkOwners(2)" class="fk-owner-btn" data-oc="2" style="flex:1;padding:6px;border:1.5px solid #bbf7d0;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;background:#fff;color:#059669;font-family:inherit">2 personer</button>
</div>
</div>
</div>
<div class="total-section">
<div class="total-line"><span class="total-label">Att betala</span><span class="total-value" id="fkPrTotal">0 kr</span></div>
<div class="total-vat">Inkl. moms</div>
</div>
<div style="padding:0 16px 16px">
<div style="background:#faf5ff;border-radius:10px;padding:14px;margin-bottom:12px">
<div style="font-size:11px;color:#a855f7;font-weight:600;margin-bottom:8px">MARGINAL</div>
<div style="display:flex;align-items:center;gap:10px;margin-bottom:8px">
<input type="range" id="fkMarginSlider" min="0" max="40" step="1" value="20" oninput="updateFkCalc()" style="flex:1;accent-color:#a855f7">
<span id="fkMarginPct" style="font-size:18px;font-weight:700;color:#7c3aed;min-width:40px;text-align:right">20%</span>
</div>
<div style="display:flex;justify-content:space-between;font-size:12px">
<span style="color:#6b7280">Marginal</span>
<span id="fkMarginKr" style="font-weight:700;color:#7c3aed">0 kr</span>
</div>
</div>
<div style="background:#f0f9ff;border-radius:10px;padding:14px;margin-bottom:12px">
<div style="font-size:11px;color:#3b82f6;font-weight:600;margin-bottom:8px">FINANSIERING</div>
<div style="display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap">
<button onclick="setFkFinYears(0)" class="fk-fin-btn" data-yr="0" style="padding:4px 10px;border:1.5px solid #bfdbfe;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;background:#fff;color:#3b82f6;font-family:inherit">Ej finans</button>
<button onclick="setFkFinYears(5)" class="fk-fin-btn" data-yr="5" style="padding:4px 10px;border:1.5px solid #bfdbfe;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;background:#fff;color:#3b82f6;font-family:inherit">5 år</button>
<button onclick="setFkFinYears(10)" class="fk-fin-btn" data-yr="10" style="padding:4px 10px;border:1.5px solid #bfdbfe;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;background:#fff;color:#3b82f6;font-family:inherit">10 år</button>
<button onclick="setFkFinYears(15)" class="fk-fin-btn" data-yr="15" style="padding:4px 10px;border:1.5px solid #3b82f6;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;background:#3b82f6;color:#fff;font-family:inherit">15 år</button>
<button onclick="setFkFinYears(20)" class="fk-fin-btn" data-yr="20" style="padding:4px 10px;border:1.5px solid #bfdbfe;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;background:#fff;color:#3b82f6;font-family:inherit">20 år</button>
</div>
<div style="display:flex;justify-content:space-between;align-items:baseline">
<span style="font-size:13px;color:#334155">Månadskostnad <span id="fkFinInfo" style="font-size:10px;color:#64748b">(15 år, 4.9%)</span></span>
<span id="fkPrMonthly" style="font-size:20px;font-weight:700;color:#1e40af">0 kr/mån</span>
</div>
</div>
<button id="fkSaveBtn" onclick="saveFkQuote('utkast')" style="width:100%;padding:12px;background:#f59e0b;color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:8px">
<svg viewBox="0 0 24 24" style="width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
Spara utkast
</button>
<button class="cart-btn" onclick="goToFkAffar()" style="width:100%;padding:14px;background:linear-gradient(135deg,#024550,#035e6b);color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px">
<svg viewBox="0 0 24 24" style="width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2"><path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2M9 5h6"/><path d="M9 12h6M9 16h6"/></svg>
Lägg till i affär
</button>
</div>
</div>
</div>
</div>
</div>
<!-- /konfiguratorer -->
<!-- AFFÄR-VY (efter kalkyl) -->
<div id="affarView" style="display:none">
<div style="display:flex;align-items:center;gap:12px;margin-bottom:20px">
<button class="dummy-btn secondary" onclick="backToKalkylFromAffar()" style="padding:8px 14px"><svg viewBox="0 0 24 24" style="width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg> Tillbaka till kalkyl</button>
<div><h1 class="page-title" style="margin-bottom:0">Affär</h1></div>
<div id="affarStatus" style="margin-left:auto;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;background:#fef3c7;color:#92400e">Utkast</div>
</div>
<!-- Kundbanner i affär -->
<div id="affarCustomerBanner" style="margin-bottom:16px"></div>
<div style="display:grid;grid-template-columns:1fr 400px;gap:24px;align-items:start">
<div>
<!-- Sammanfattning från kalkyl -->
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:24px;margin-bottom:16px">
<h3 style="font-size:16px;font-weight:700;margin:0 0 16px;display:flex;align-items:center;gap:8px">
<svg viewBox="0 0 24 24" style="width:20px;height:20px;fill:none;stroke:#059669;stroke-width:2"><circle cx="12" cy="12" r="10"/><path d="M9 12l2 2 4-4"/></svg>
Konfiguration
</h3>
<div id="affarConfigSummary" style="display:grid;gap:8px"></div>
</div>
<!-- Extrakostnader -->
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:24px;margin-bottom:16px">
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
<h3 style="font-size:16px;font-weight:700;margin:0;display:flex;align-items:center;gap:8px">
<svg viewBox="0 0 24 24" style="width:20px;height:20px;fill:none;stroke:#3b82f6;stroke-width:2"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
Extrakostnader
</h3>
<button onclick="addExtraCost()" style="padding:6px 14px;background:#3b82f6;color:#fff;border:none;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:4px">
<svg viewBox="0 0 24 24" style="width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
Lägg till
</button>
</div>
<div id="affarExtraCosts"></div>
<div id="affarExtraCostsEmpty" style="padding:16px;text-align:center;color:#94a3b8;font-size:13px">
Inga extrakostnader tillagda. Klicka "Lägg till" för takunderhåll, extra kabelarbete etc.
</div>
</div>
<!-- Marginal -->
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:24px;margin-bottom:16px">
<h3 style="font-size:16px;font-weight:700;margin:0 0 16px;display:flex;align-items:center;gap:8px">
<svg viewBox="0 0 24 24" style="width:20px;height:20px;fill:none;stroke:#a855f7;stroke-width:2"><path d="M16 8v8M12 11v5M8 14v2M3 3v18h18"/></svg>
Marginal
</h3>
<div style="display:flex;align-items:center;gap:16px;margin-bottom:12px">
<input type="range" id="affarMarginSlider" min="0" max="40" step="1" value="0" oninput="updateAffarCalc()" style="flex:1;accent-color:#a855f7">
<div style="background:#faf5ff;border:2px solid #a855f7;border-radius:10px;padding:8px 16px;text-align:center;min-width:80px">
<div id="affarMarginVal" style="font-size:24px;font-weight:700;color:#7c3aed">0%</div>
<div style="font-size:10px;color:#64748b;font-weight:600">MARGINAL</div>
</div>
</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px">
<div style="background:#f8fafc;padding:10px;border-radius:8px;text-align:center">
<div style="font-size:10px;color:#64748b;font-weight:600">MARGINALKOSTNAD</div>
<div id="affarMarginKr" style="font-size:16px;font-weight:700;color:#1a1a1a">0 kr</div>
</div>
<div style="background:#f8fafc;padding:10px;border-radius:8px;text-align:center">
<div style="font-size:10px;color:#64748b;font-weight:600">VINST</div>
<div id="affarProfit" style="font-size:16px;font-weight:700;color:#059669">0 kr</div>
</div>
</div>
</div>
<!-- Bilder för offert -->
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:24px;margin-bottom:16px">
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
<h3 style="font-size:16px;font-weight:700;margin:0;display:flex;align-items:center;gap:8px">
<svg viewBox="0 0 24 24" style="width:20px;height:20px;fill:none;stroke:#f59e0b;stroke-width:2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
Bilder för offert
</h3>
<div style="display:flex;gap:6px">
<button onclick="addProspectPhotosToAffar()" id="affarAddProspectBtn" style="padding:6px 14px;background:#024550;color:#fff;border:none;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:4px">
<svg viewBox="0 0 24 24" style="width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
Hämta prospektbilder
</button>
</div>
</div>
<div id="affarImages" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px"></div>
<div id="affarImagesEmpty" style="padding:20px;text-align:center;color:#94a3b8;font-size:13px;border:2px dashed #e5e7eb;border-radius:10px">
Inga bilder ännu. Hämta prospektbilder eller skapa en prospektbild för offerten.
</div>
</div>
<!-- Anteckningar -->
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:24px;margin-bottom:16px">
<h3 style="font-size:16px;font-weight:700;margin:0 0 12px">Anteckningar</h3>
<textarea id="affarNotes" rows="3" placeholder="Interna anteckningar om affären..." style="width:100%;padding:12px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:14px;font-family:inherit;resize:vertical"></textarea>
</div>
</div>
<!-- AFFÄR PRISSIDEBAR -->
<div style="position:sticky;top:20px">
<div class="price-card">
<div class="price-header" style="background:linear-gradient(135deg,#024550,#035e6b)">Affärssammanställning</div>
<div class="price-rows">
<div class="price-line"><span class="price-line-label">Material</span><span class="price-line-value" id="affarPrMaterial">0 kr</span></div>
<div class="price-line"><span class="price-line-label">Installation</span><span class="price-line-value" id="affarPrLabor">0 kr</span></div>
<div class="price-line"><span class="price-line-label">Batteri</span><span class="price-line-value" id="affarPrBattery">0 kr</span></div>
<div class="price-line"><span class="price-line-label">Laddare</span><span class="price-line-value" id="affarPrCharger">0 kr</span></div>
<div class="price-line" id="affarPrExtraRow" style="display:none"><span class="price-line-label">Extrakostnader</span><span class="price-line-value" id="affarPrExtra">0 kr</span></div>
<div class="price-line" id="affarPrMarginRow" style="display:none"><span class="price-line-label">Marginal <span id="affarPrMarginPct" style="font-size:10px;color:#94a3b8"></span></span><span class="price-line-value" id="affarPrMargin">0 kr</span></div>
<div class="price-line subtotal"><span class="price-line-label">Totalt före avdrag</span><span class="price-line-value" id="affarPrSubtotal">0 kr</span></div>
</div>
<div id="affarDeductionRow" style="background:#ecfdf5;padding:14px 16px">
<div style="display:flex;justify-content:space-between;align-items:center">
<span id="affarDeductLabel" style="font-size:12px;font-weight:700;color:#059669">AVDRAG</span>
<span id="affarPrGreenTech" style="font-size:16px;font-weight:700;color:#059669">0 kr</span>
</div>
</div>
<div class="total-section">
<div class="total-line"><span class="total-label">Kunden betalar</span><span class="total-value" id="affarPrTotal">0 kr</span></div>
<div class="total-vat">Inkl. moms</div>
</div>
<div style="padding:0 16px 16px">
<div style="background:#f0f9ff;border-radius:10px;padding:14px;margin-bottom:12px">
<div style="font-size:11px;color:#3b82f6;font-weight:600;margin-bottom:4px">FINANSIERING</div>
<div style="display:flex;justify-content:space-between;align-items:baseline">
<span style="font-size:13px;color:#334155">Månadskostnad</span>
<span id="affarPrMonthly" style="font-size:20px;font-weight:700;color:#1e40af">0 kr/mån</span>
</div>
</div>
<div style="display:grid;gap:8px">
<button onclick="saveQuoteAsDraft()" style="width:100%;padding:14px;background:#f59e0b;color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px">
<svg viewBox="0 0 24 24" style="width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
Spara som utkast
</button>
<button onclick="createFinalQuote()" style="width:100%;padding:14px;background:#166534;color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px">
<svg viewBox="0 0 24 24" style="width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
Skapa offert
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- KALENDER -->