<?php /* konfigurator.php — page-konfigurator (kalkyl-lista + ny kalkyl-vy). Routar ALLTID till new_calc.js. */ ?>
<div class="page-content" id="page-konfigurator">
<!-- KALKYL-LISTA (visas först) -->
<?php include __DIR__ . '/calc_list.php'; ?>
<!-- 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" id="kalkylTitle">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 id="cfgCategoryBar" 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>
<!-- konfigurator.php: dropdown routar ALLTID till nya new_calc.js (openNewCalcCategory). Legacy changeCategory är borttagen. -->
<select class="product-select" id="categorySelect" onchange="if(this.value && typeof openNewCalcCategory==='function') openNewCalcCategory(this.value);" 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>
</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 id="fkSizeSection" 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 id="solTillvalSection" style="display:none;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:#2563eb">5</div>
<h3 style="font-size:16px;font-weight:700;color:#1a1a1a;margin:0">Tillval</h3>
</div>
<div id="solTillvalCards" style="display:grid;gap:8px"></div>
</div>
</div>
<div id="solPrisSidebar"></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>
</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>
<!-- Syfte -->
<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:#f0fdf4;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#059669">☀</div>
<h3 style="font-size:16px;font-weight:700;color:#1a1a1a;margin:0">Syfte med batteriet</h3>
</div>
<div id="batPurposeCards"></div>
</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: Storlek -->
<div id="batSizeSection" 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: Tillval -->
<div id="batTillvalSection" 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="batTillvalCards" style="display:grid;gap:10px"></div>
</div>
<div id="batAction" style="display:none"></div>
<div id="batConfigList" style="display:none"></div>
</div>
<div id="batPrisSidebar"></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 id="lbTillvalSection" style="display:none;margin-top:16px;padding-top:16px;border-top:1px solid #f1f5f9"></div>
</div>
<div id="lbAction" style="display:none"></div>
<div id="lbConfigList" style="display:none"></div>
</div>
<div id="lbPrisSidebar"></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 id="ttTillvalSection" style="display:none;margin-top:16px;padding-top:16px;border-top:1px solid #f1f5f9"></div>
</div>
<div id="ttAction" style="display:none"></div>
<div id="ttConfigList" style="display:none"></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 id="vpMainCol">
<!-- 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 id="vpTillvalSection" style="display:none;margin-top:16px"></div>
<div id="vpAction" style="display:none;margin-top:12px"></div>
</div>
<div id="vpPumpList" style="display:none;background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:16px;margin-bottom:16px"></div>
</div>
<div id="vpSideCol">
<div id="vpPrisSidebar"></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>
<div id="takPrisSidebar"></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>
<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:20px">
<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>
<!-- Yta -->
<div style="margin-bottom:16px">
<label style="font-size:12px;font-weight:600;color:#64748b;display:block;margin-bottom:4px">Yta (m²)</label>
<input type="number" id="isoArea" value="" placeholder="t.ex. 80" min="1" oninput="updateIsoCalc()" style="width:200px;padding:12px 14px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:16px;font-weight:600;font-family:inherit">
</div>
<!-- Djup -->
<div style="margin-bottom:16px">
<label style="font-size:12px;font-weight:600;color:#64748b;display:block;margin-bottom:8px">Djup isolering</label>
<div id="isoDepthCards" style="display:flex;gap:8px;flex-wrap:wrap"></div>
</div>
<!-- Gångbrygga -->
<div style="margin-bottom:16px;padding-top:16px;border-top:1px solid #f1f5f9">
<label style="font-size:12px;font-weight:600;color:#64748b;display:block;margin-bottom:4px">Gångbrygga (meter)</label>
<div style="display:flex;align-items:center;gap:8px">
<input type="number" id="isoGangbrygga" value="0" min="0" step="0.5" oninput="updateIsoCalc()" style="width:120px;padding:10px 14px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:14px;font-weight:600;font-family:inherit">
<span style="font-size:12px;color:#64748b">meter</span>
</div>
</div>
<!-- Mögelbehandling -->
<div style="padding-top:16px;border-top:1px solid #f1f5f9">
<label style="display:flex;align-items:center;gap:10px;cursor:pointer;padding:12px 16px;border:1.5px solid #e5e7eb;border-radius:10px;background:#fff" >
<input type="checkbox" id="isoMogel" onchange="updateIsoCalc()" style="width:20px;height:20px;accent-color:#059669">
<div>
<div style="font-weight:600;font-size:14px;color:#1a1a1a">Mögelbehandling</div>
<div style="font-size:12px;color:#64748b">6 000 kr</div>
</div>
</label>
</div>
<div id="isoTillvalSection" style="display:none;margin-top:16px;padding-top:16px;border-top:1px solid #f1f5f9"></div>
</div>
<div id="isoAction" style="display:none"></div>
<div id="isoConfigList" style="display:none"></div>
</div>
<div id="isoPrisSidebar"></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 storlek -->
<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 storlek</h3>
</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px">
<div>
<label style="font-size:12px;font-weight:600;color:#64748b;display:block;margin-bottom:4px">Bredd (dm)</label>
<input type="number" id="fkBredd" min="3" max="38" placeholder="t.ex. 12" oninput="fkSearchSize()" style="width:100%;padding:10px 14px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:16px;font-weight:600;font-family:inherit;box-sizing:border-box">
</div>
<div>
<label style="font-size:12px;font-weight:600;color:#64748b;display:block;margin-bottom:4px">Höjd (dm)</label>
<input type="number" id="fkHojd" min="3" max="24" placeholder="t.ex. 12" oninput="fkSearchSize()" style="width:100%;padding:10px 14px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:16px;font-weight:600;font-family:inherit;box-sizing:border-box">
</div>
</div>
<div id="fkSizeInfo" style="font-size:12px;color:#94a3b8"></div>
</div>
<!-- Smartfilter -->
<div style="background:#fffbeb;border:1px solid #fde68a;border-radius:14px;padding:14px 20px;margin-bottom:16px">
<div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap">
<span style="font-size:13px;font-weight:700;color:#92400e">⚡ Smartfilter</span>
<div id="fkSavedFilterBar" style="display:none;flex-wrap:wrap;gap:6px;align-items:center"></div>
<button onclick="fkShowCreateFilter()" style="padding:5px 12px;border-radius:20px;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;border:1.5px dashed #f59e0b;background:#fff;color:#f59e0b">+ Skapa filter</button>
</div>
</div>
<!-- Steg 2: Visa Modelltyp -->
<div id="fkFilterSection" style="display:none;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:12px">
<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">Visa Modell</h3>
</div>
<div id="fkModelFilters" style="display:flex;gap:6px;flex-wrap:wrap"></div>
</div>
<!-- Steg 3: Resultat -->
<div id="fkResultSection" style="display:none;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">Tillgängliga fönster</h3>
<span id="fkResultCount" style="font-size:12px;color:#94a3b8"></span>
</div>
<div id="fkResults" style="display:grid;gap:10px"></div>
</div>
<!-- Steg 4: Konfigurera fönster -->
<div id="fkConfigSection" style="display:none">
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">
<!-- Fasadtyp -->
<div>
<label style="font-size:12px;font-weight:600;color:#64748b;display:block;margin-bottom:6px">Fasadtyp</label>
<select id="fkFasad" style="width:100%;padding:10px 12px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;font-family:inherit;background:#fff">
<option value="">Välj fasadtyp...</option>
<option value="tegel">Tegel</option>
<option value="puts">Puts</option>
<option value="tra">Trä</option>
<option value="eternit">Eternit</option>
</select>
</div>
<!-- Våningar -->
<div>
<label style="font-size:12px;font-weight:600;color:#64748b;display:block;margin-bottom:6px">Våningar</label>
<select id="fkVaning" style="width:100%;padding:10px 12px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;font-family:inherit;background:#fff">
<option value="1">1-plan</option>
<option value="2">2 våningar</option>
<option value="3">3 våningar</option>
</select>
</div>
<!-- Glastyp -->
<div>
<label style="font-size:12px;font-weight:600;color:#64748b;display:block;margin-bottom:6px">Glastyp</label>
<select id="fkGlastyp" style="width:100%;padding:10px 12px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;font-family:inherit;background:#fff">
<option value="">Välj glastyp...</option>
<option value="standard">Standard 3-glas</option>
<option value="energi">Energiglas (låg U-värde)</option>
<option value="svan">Svanenmärkt</option>
<option value="ljud">Ljudreducerande</option>
<option value="sakerhet">Säkerhetsglas (laminerat)</option>
<option value="frostat">Frostat/ornament</option>
</select>
</div>
<!-- Mörkläggning -->
<div>
<label style="font-size:12px;font-weight:600;color:#64748b;display:block;margin-bottom:6px">Mörkläggning</label>
<select id="fkMorklaggning" style="width:100%;padding:10px 12px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;font-family:inherit;background:#fff">
<option value="">Ingen</option>
<option value="plisse">Plisségardin</option>
<option value="rullgardin">Rullgardin</option>
<option value="persienn">Persienn</option>
</select>
</div>
<!-- Insida -->
<div>
<label style="font-size:12px;font-weight:600;color:#64748b;display:block;margin-bottom:6px">Insida</label>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:6px">
<label style="display:flex;align-items:center;gap:8px;padding:10px 12px;border:1.5px solid #3b82f6;border-radius:8px;cursor:pointer;font-size:13px;background:#f0f9ff" onclick="this.querySelector('input').checked=true;document.querySelectorAll('[name=fkInsida]').forEach(function(r){r.closest('label').style.borderColor=r.checked?'#3b82f6':'#e5e7eb';r.closest('label').style.background=r.checked?'#f0f9ff':'#fff'})">
<input type="radio" name="fkInsida" value="vit" checked style="accent-color:#3b82f6"> Vit
</label>
<label style="display:flex;align-items:center;gap:8px;padding:10px 12px;border:1.5px solid #e5e7eb;border-radius:8px;cursor:pointer;font-size:13px" onclick="this.querySelector('input').checked=true;document.querySelectorAll('[name=fkInsida]').forEach(function(r){r.closest('label').style.borderColor=r.checked?'#3b82f6':'#e5e7eb';r.closest('label').style.background=r.checked?'#f0f9ff':'#fff'})">
<input type="radio" name="fkInsida" value="kulor" style="accent-color:#3b82f6"> Kulör
</label>
</div>
</div>
<!-- Utsida -->
<div>
<label style="font-size:12px;font-weight:600;color:#64748b;display:block;margin-bottom:6px">Utsida</label>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:6px">
<label style="display:flex;align-items:center;gap:8px;padding:10px 12px;border:1.5px solid #3b82f6;border-radius:8px;cursor:pointer;font-size:13px;background:#f0f9ff" onclick="this.querySelector('input').checked=true;document.querySelectorAll('[name=fkUtsida]').forEach(function(r){r.closest('label').style.borderColor=r.checked?'#3b82f6':'#e5e7eb';r.closest('label').style.background=r.checked?'#f0f9ff':'#fff'})">
<input type="radio" name="fkUtsida" value="vit" checked style="accent-color:#3b82f6"> Vit
</label>
<label style="display:flex;align-items:center;gap:8px;padding:10px 12px;border:1.5px solid #e5e7eb;border-radius:8px;cursor:pointer;font-size:13px" onclick="this.querySelector('input').checked=true;document.querySelectorAll('[name=fkUtsida]').forEach(function(r){r.closest('label').style.borderColor=r.checked?'#3b82f6':'#e5e7eb';r.closest('label').style.background=r.checked?'#f0f9ff':'#fff'})">
<input type="radio" name="fkUtsida" value="kulor" style="accent-color:#3b82f6"> Kulör
</label>
</div>
</div>
</div>
<!-- Mittpost -->
<div style="margin-top:20px;padding-top:16px;border-top:1px solid #f1f5f9">
<label style="font-size:12px;font-weight:600;color:#64748b;display:block;margin-bottom:8px">Mittpost / Indelning</label>
<div style="display:grid;grid-template-columns:1fr 1fr 200px;gap:16px;align-items:start">
<div>
<label style="font-size:11px;color:#94a3b8;display:block;margin-bottom:4px">Vertikala poster</label>
<div style="display:flex;align-items:center;gap:8px">
<button onclick="fkMittpost('v',-1)" style="width:28px;height:28px;border-radius:6px;border:1px solid #e5e7eb;background:#fff;cursor:pointer;font-size:14px;font-family:inherit">−</button>
<span id="fkMittpostV" style="font-size:16px;font-weight:700;min-width:20px;text-align:center">0</span>
<button onclick="fkMittpost('v',1)" style="width:28px;height:28px;border-radius:6px;border:1px solid #e5e7eb;background:#fff;cursor:pointer;font-size:14px;font-family:inherit">+</button>
</div>
</div>
<div>
<label style="font-size:11px;color:#94a3b8;display:block;margin-bottom:4px">Horisontella poster</label>
<div style="display:flex;align-items:center;gap:8px">
<button onclick="fkMittpost('h',-1)" style="width:28px;height:28px;border-radius:6px;border:1px solid #e5e7eb;background:#fff;cursor:pointer;font-size:14px;font-family:inherit">−</button>
<span id="fkMittpostH" style="font-size:16px;font-weight:700;min-width:20px;text-align:center">0</span>
<button onclick="fkMittpost('h',1)" style="width:28px;height:28px;border-radius:6px;border:1px solid #e5e7eb;background:#fff;cursor:pointer;font-size:14px;font-family:inherit">+</button>
</div>
</div>
<!-- Grafisk illustration -->
<div id="fkMittpostPreview" style="width:160px;height:120px;border:3px solid #334155;border-radius:4px;position:relative;background:#e0f2fe">
</div>
</div>
</div>
<!-- Spröjs -->
<div id="fkSprojsSection" style="margin-top:16px;padding-top:16px;border-top:1px solid #f1f5f9">
<label style="font-size:12px;font-weight:600;color:#64748b;display:block;margin-bottom:6px">Spröjs</label>
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px">
<label style="display:flex;align-items:center;gap:8px;padding:10px 12px;border:1.5px solid #3b82f6;border-radius:8px;cursor:pointer;font-size:13px;background:#f0f9ff" onclick="this.querySelector('input').checked=true;document.querySelectorAll('[name=fkSprojs]').forEach(function(r){r.closest('label').style.borderColor=r.checked?'#3b82f6':'#e5e7eb';r.closest('label').style.background=r.checked?'#f0f9ff':'#fff'})">
<input type="radio" name="fkSprojs" value="ingen" checked style="accent-color:#3b82f6"> Ingen
</label>
<label style="display:flex;align-items:center;gap:8px;padding:10px 12px;border:1.5px solid #e5e7eb;border-radius:8px;cursor:pointer;font-size:13px" onclick="this.querySelector('input').checked=true;document.querySelectorAll('[name=fkSprojs]').forEach(function(r){r.closest('label').style.borderColor=r.checked?'#3b82f6':'#e5e7eb';r.closest('label').style.background=r.checked?'#f0f9ff':'#fff'})">
<input type="radio" name="fkSprojs" value="wiener" style="accent-color:#3b82f6"> Wienerspröjs
</label>
<label style="display:flex;align-items:center;gap:8px;padding:10px 12px;border:1.5px solid #e5e7eb;border-radius:8px;cursor:pointer;font-size:13px" onclick="this.querySelector('input').checked=true;document.querySelectorAll('[name=fkSprojs]').forEach(function(r){r.closest('label').style.borderColor=r.checked?'#3b82f6':'#e5e7eb';r.closest('label').style.background=r.checked?'#f0f9ff':'#fff'})">
<input type="radio" name="fkSprojs" value="mellanglas" style="accent-color:#3b82f6"> Mellanglas
</label>
</div>
</div>
<!-- Spotlights & Fönsterbänk -->
<div style="margin-top:16px;padding-top:16px;border-top:1px solid #f1f5f9;display:grid;grid-template-columns:1fr 1fr;gap:16px">
<div>
<label style="font-size:12px;font-weight:600;color:#64748b;display:block;margin-bottom:6px">Antal spotlights</label>
<div style="display:flex;align-items:center;gap:8px">
<button onclick="fkSpotlight(-1)" style="width:32px;height:32px;border-radius:8px;border:1.5px solid #e5e7eb;background:#fff;font-size:16px;cursor:pointer;font-family:inherit">−</button>
<span id="fkSpotlightCount" style="font-size:18px;font-weight:700;min-width:30px;text-align:center">0</span>
<button onclick="fkSpotlight(1)" style="width:32px;height:32px;border-radius:8px;border:1.5px solid #e5e7eb;background:#fff;font-size:16px;cursor:pointer;font-family:inherit">+</button>
</div>
</div>
<div>
<label style="font-size:12px;font-weight:600;color:#64748b;display:block;margin-bottom:6px">Fönsterbänk</label>
<select id="fkBank" style="width:100%;padding:10px 12px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;font-family:inherit;background:#fff">
<option value="">Ingen</option>
<option value="tra">Trä</option>
<option value="marmor">Marmor/komposit</option>
<option value="plat">Plåt</option>
</select>
</div>
</div>
</div>
<div id="fkSelectedSection" style="display:none"></div>
</div>
<!-- Prissammanställning -->
<div>
<div id="fkPrisSidebar"></div>
</div>
</div>
</div>
<!-- /konfiguratorer -->
<!-- SAMMANSTÄLLNING -->
<div id="summaryProductList" style="display:none">
<div style="display:grid;grid-template-columns:1fr 380px;gap:24px;align-items:start">
<div id="summaryContent"></div>
<div id="summaryPrisSidebar"></div>
</div>
</div>
<!-- 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 -->