<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Solar Sales Suite</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/jquery.dataTables.min.css"/>
<script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBJPnfNCe6un1J7ck6co7zr2uvGrxhFYXY&libraries=places,drawing,geometry&callback=Function.prototype" async defer></script>
<style>
*{margin:0;padding:0;box-sizing:border-box}
/* DataTables overrides */
#customerDT_wrapper { font-family:'Inter',sans-serif; }
#customerDT_wrapper .dataTables_filter input { padding:8px 12px;border:1px solid #e5e7eb;border-radius:8px;font-size:14px;font-family:inherit;min-width:250px; }
#customerDT_wrapper .dataTables_length select { padding:6px 10px;border:1px solid #e5e7eb;border-radius:6px;font-family:inherit; }
#customerDT_wrapper .dataTables_info { font-size:12px;color:#94a3b8; }
#customerDT_wrapper .dataTables_paginate .paginate_button { padding:4px 10px;border-radius:6px;font-size:12px;font-family:inherit; }
#customerDT_wrapper .dataTables_paginate .paginate_button.current { background:#024550!important;color:#fff!important;border:1px solid #024550!important; }
#staffDT_wrapper { font-family:'Inter',sans-serif; }
#staffDT_wrapper .dataTables_filter input { padding:8px 12px;border:1px solid #e5e7eb;border-radius:8px;font-size:14px;font-family:inherit;min-width:250px; }
#staffDT_wrapper .dataTables_length select { padding:6px 10px;border:1px solid #e5e7eb;border-radius:6px;font-family:inherit; }
#staffDT_wrapper .dataTables_info { font-size:12px;color:#94a3b8; }
#staffDT_wrapper .dataTables_paginate .paginate_button { padding:4px 10px;border-radius:6px;font-size:12px;font-family:inherit; }
#staffDT_wrapper .dataTables_paginate .paginate_button.current { background:#024550!important;color:#fff!important;border:1px solid #024550!important; }
table.dataTable thead th { background:#f8f9fa;font-size:12px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px;padding:10px 14px!important;border-bottom:2px solid #e5e7eb!important; }
table.dataTable tbody td { padding:8px 14px!important;font-size:13px;border-bottom:1px solid #f1f5f9!important; }
table.dataTable tbody tr:hover { background:#f0fdf4!important; }
table.dataTable.no-footer { border-bottom:none!important; }
body{font-family:'Inter',sans-serif;background:#f8f9fa;color:#1a1a1a;line-height:1.6;display:flex;min-height:100vh;-webkit-font-smoothing:antialiased}
/* === LOGIN === */
.login-screen{position:fixed;inset:0;z-index:9999;display:flex;background:#fff}
.login-screen.hidden{display:none}
.login-image{flex:1;background:url('assets/img/login-bg.jpg') center/cover no-repeat;position:relative}
.login-image::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(2,69,80,.4) 0%,rgba(0,0,0,.2) 100%)}
.login-image-text{position:absolute;bottom:50px;left:50px;z-index:1;color:#fff}
.login-image-text h2{font-size:32px;font-weight:700;margin-bottom:8px;text-shadow:0 2px 12px rgba(0,0,0,.3)}
.login-image-text p{font-size:15px;opacity:.85;text-shadow:0 1px 8px rgba(0,0,0,.3)}
.login-panel{width:480px;display:flex;flex-direction:column;justify-content:center;padding:60px 56px;background:#fff;flex-shrink:0}
.login-logo{margin-bottom:48px}
.login-logo img{width:180px;height:auto}
.login-greeting{font-size:28px;font-weight:700;color:#1a1a1a;margin-bottom:6px}
.login-subtitle{font-size:15px;color:#94a3b8;margin-bottom:36px}
.login-form-group{margin-bottom:20px}
.login-form-group label{display:block;font-size:13px;font-weight:600;color:#334155;margin-bottom:6px}
.login-form-group input{width:100%;padding:12px 16px;border:1.5px solid #e5e7eb;border-radius:10px;font-size:15px;font-family:'Inter',sans-serif;transition:all .2s;background:#fafbfc}
.login-form-group input:focus{outline:none;border-color:#024550;box-shadow:0 0 0 3px rgba(2,69,80,.1);background:#fff}
.login-form-group input::placeholder{color:#c1c7cd}
.login-remember{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}
.login-remember label{display:flex;align-items:center;gap:8px;font-size:13px;color:#64748b;cursor:pointer}
.login-remember input[type=checkbox]{width:16px;height:16px;accent-color:#024550;cursor:pointer}
.login-forgot{font-size:13px;color:#024550;text-decoration:none;font-weight:500;transition:color .15s}
.login-forgot:hover{color:#10b981}
.login-btn{width:100%;padding:14px;background:#024550;color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;transition:all .2s;letter-spacing:.2px}
.login-btn:hover{background:#035e6b;box-shadow:0 4px 14px rgba(2,69,80,.25)}
.login-btn:active{transform:scale(.985)}
.login-footer{margin-top:auto;padding-top:40px;text-align:center;font-size:12px;color:#c1c7cd}
@media(max-width:900px){.login-image{display:none}.login-panel{width:100%}}
/* === SIDEBAR === */
.sidebar{position:fixed;top:0;left:0;bottom:0;width:220px;background:#024550;display:flex;flex-direction:column;z-index:100}
.sidebar-brand{padding:20px 22px 18px;display:flex;align-items:center;justify-content:center}
.sidebar-brand-icon{width:160px;height:auto;display:flex;align-items:center;justify-content:center}
.sidebar-brand-icon img{width:100%;height:auto;object-fit:contain}
.sidebar-menu{flex:1;padding:4px 0;overflow-y:auto}
.sidebar-menu::-webkit-scrollbar{width:3px}
.sidebar-menu::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:3px}
.nav-item{display:flex;align-items:center;gap:12px;padding:10px 22px;color:rgba(255,255,255,.55);text-decoration:none;font-size:13.5px;font-weight:500;transition:all .15s;cursor:pointer;margin:1px 10px;border-radius:8px}
.nav-item:hover{color:rgba(255,255,255,.85);background:rgba(255,255,255,.05)}
.nav-item.active{background:rgba(46,204,113,.18);color:#fff;font-weight:600}
.nav-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nav-icon svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sidebar-bottom{padding:16px 22px;border-top:1px solid rgba(255,255,255,.08)}
.sidebar-user{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.sidebar-user-info{font-size:11px;color:rgba(255,255,255,.4);line-height:1.4}
.sidebar-user-info strong{display:block;color:rgba(255,255,255,.7);font-size:12px;font-weight:500}
.sidebar-logout{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.4);font-size:12px;cursor:pointer;transition:color .15s;background:none;border:none;font-family:inherit;padding:0}
.sidebar-logout:hover{color:rgba(255,255,255,.7)}
.sidebar-logout svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* === MAIN === */
.main-wrapper{margin-left:220px;padding:32px 40px;flex:1;min-height:100vh}
.page-title{font-size:28px;font-weight:700;color:#1a1a1a;letter-spacing:-.5px;margin-bottom:4px}
.page-subtitle{font-size:14px;color:#94a3b8;margin-bottom:28px;font-weight:400}
.page-content{display:none}
.page-content.active{display:block}
/* === DASHBOARD STAT CARDS === */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}
.stat-card{background:#fff;border-radius:10px;padding:14px 16px;border:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:flex-start;transition:box-shadow .2s}
.stat-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.06)}
.stat-card-info h4{font-size:11px;color:#94a3b8;font-weight:500;margin-bottom:4px;text-transform:uppercase;letter-spacing:.3px}
.stat-card-info .stat-value{font-size:20px;font-weight:700;color:#1a1a1a;letter-spacing:-.5px}
.stat-card-icon{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.stat-card-icon svg{width:16px;height:16px;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none}
.stat-card-icon.green{background:#ecfdf5}
.stat-card-icon.green svg{stroke:#10b981}
.stat-card-icon.blue{background:#eff6ff}
.stat-card-icon.blue svg{stroke:#3b82f6}
.stat-card-icon.purple{background:#faf5ff}
.stat-card-icon.purple svg{stroke:#a855f7}
.stat-card-icon.teal{background:#f0fdfa}
.stat-card-icon.teal svg{stroke:#14b8a6}
/* === DASHBOARD 2-COL === */
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.dash-panel{background:#fff;border-radius:12px;border:1px solid #e5e7eb;overflow:hidden}
.dash-panel-header{padding:12px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #f1f5f9}
.dash-panel-header svg{width:18px;height:18px;stroke:#64748b;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dash-panel-header h3{font-size:14px;font-weight:600;color:#1a1a1a}
.dash-panel-body{padding:0}
.dash-panel-empty{padding:40px 22px;text-align:center;color:#94a3b8;font-size:14px}
.offert-item{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;border-bottom:1px solid #f1f5f9;transition:background .15s}
.offert-item:last-child{border-bottom:none}
.offert-item:hover{background:#fafbfc}
.offert-item-left h4{font-size:14px;font-weight:600;color:#1a1a1a;margin-bottom:2px}
.offert-item-left p{font-size:12px;color:#94a3b8}
.offert-item-right{text-align:right}
.offert-item-right .offert-price{font-size:15px;font-weight:700;color:#10b981}
.offert-item-right .offert-status{font-size:11px;color:#94a3b8;margin-top:2px}
/* === TABLES (other pages) === */
.dummy-table{background:#fff;border-radius:12px;overflow:hidden;border:1px solid #e5e7eb}
.dummy-table-header{padding:16px 22px;font-weight:600;font-size:15px;color:#1a1a1a;border-bottom:1px solid #f1f5f9}
.dummy-table table{width:100%;border-collapse:collapse}
.dummy-table th,.dummy-table td{padding:12px 22px;text-align:left;border-bottom:1px solid #f1f5f9}
.dummy-table th{background:#fafbfc;font-weight:600;color:#64748b;font-size:12px;text-transform:uppercase;letter-spacing:.5px}
.dummy-table td{font-size:13.5px;color:#334155}
.dummy-table tr:last-child td{border-bottom:none}
.dummy-table tr:hover td{background:#fafbfc}
.status-badge{padding:4px 10px;border-radius:20px;font-size:11px;font-weight:600}
.status-badge.green{background:#dcfce7;color:#166534}
.status-badge.yellow{background:#fef9c3;color:#854d0e}
.status-badge.blue{background:#dbeafe;color:#1e40af}
.status-badge.gray{background:#f1f5f9;color:#64748b}
.status-badge.purple{background:#ede9fe;color:#6d28d9}
.progress-cell{min-width:120px}
.progress-bar{height:20px;background:#f1f5f9;border-radius:10px;overflow:hidden;position:relative}
.progress-fill{height:100%;background:linear-gradient(90deg,#2ecc71,#27ae60);border-radius:10px;transition:width .4s}
.progress-text{position:absolute;top:0;left:0;right:0;height:100%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:#333}
.dummy-btn{padding:10px 20px;background:#024550;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:8px;transition:all .15s;font-family:'Inter',sans-serif}
.dummy-btn:hover{background:#244a36}
.dummy-btn.secondary{background:#f1f5f9;color:#334155}
.dummy-btn.secondary:hover{background:#e2e8f0}
.dummy-actions{display:flex;gap:10px;margin-bottom:20px}
.dummy-form{background:#fff;border-radius:12px;padding:28px;border:1px solid #e5e7eb;max-width:500px}
.dummy-form h3{margin-bottom:20px;color:#1a1a1a;font-size:18px}
.dummy-form-group{margin-bottom:15px}
.dummy-form-group label{display:block;font-weight:500;margin-bottom:6px;font-size:13px;color:#64748b}
.dummy-form-group input,.dummy-form-group select{width:100%;padding:10px 14px;border:1px solid #e5e7eb;border-radius:8px;font-size:14px;font-family:'Inter',sans-serif;transition:all .15s}
.dummy-form-group input:focus,.dummy-form-group select:focus{outline:none;border-color:#2ecc71;box-shadow:0 0 0 3px rgba(46,204,113,.1)}
/* === SETTINGS TABS === */
.settings-tab{padding:12px 24px;background:none;border:none;border-bottom:2px solid transparent;font-size:14px;font-weight:600;color:#94a3b8;cursor:pointer;font-family:'Inter',sans-serif;transition:all .2s;margin-bottom:-2px}
.settings-tab:hover{color:#1a1a1a}
.settings-tab.active{color:#024550;border-bottom-color:#024550}
.settings-panel{display:none}
.settings-panel.active{display:block}
/* === KONFIGURATOR === */
.config-header{display:flex;align-items:center;gap:15px;margin-bottom:20px;flex-wrap:wrap}
.config-label{font-size:14px;font-weight:600;color:#64748b}
.product-select{padding:12px 40px 12px 15px;font-size:15px;font-weight:600;border:1px solid #e5e7eb;border-radius:10px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23334155'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 10px center/20px;appearance:none;cursor:pointer;min-width:320px;color:#1a1a1a;transition:all .15s;font-family:'Inter',sans-serif}
.product-select:hover{border-color:#94a3b8}
.product-select:focus{outline:none;border-color:#2ecc71;box-shadow:0 0 0 3px rgba(46,204,113,.1)}
.config-layout{display:grid;grid-template-columns:1fr 350px;gap:20px;align-items:start}
.config-main{display:flex;flex-direction:column;gap:15px}
.config-sidebar{position:sticky;top:20px}
.product-section{background:#fff;border-radius:12px;padding:25px;display:grid;grid-template-columns:1fr 1fr;gap:30px;border:1px solid #e5e7eb}
.image-container{position:relative}
.main-image{width:100%;display:flex;justify-content:center;align-items:center;min-height:250px}
.main-image img{max-width:100%;max-height:300px;object-fit:contain}
.thumbnail-strip{display:flex;gap:8px;margin-top:12px}
.thumbnail{width:50px;height:50px;border:2px solid #e5e7eb;border-radius:6px;cursor:pointer;overflow:hidden;transition:border-color .15s}
.thumbnail img{width:100%;height:100%;object-fit:cover}
.thumbnail:hover{border-color:#94a3b8}
.thumbnail.active{border-color:#024550}
.image-note{font-size:11px;color:#94a3b8;margin-top:10px}
.measure-section{padding-top:10px;display:flex;flex-direction:column;align-items:center}
.measure-title{font-size:20px;font-weight:700;margin-bottom:5px;text-align:center;color:#1a1a1a}
.measure-link{color:#3b82f6;font-size:13px;text-decoration:underline;cursor:pointer;display:block;text-align:center;margin-bottom:15px}
.tab-switch{display:inline-flex;border:1px solid #e5e7eb;border-radius:20px;overflow:hidden;margin:0 auto 20px}
.tab-btn{padding:10px 18px;background:#fff;border:none;cursor:pointer;font-size:13px;transition:all .15s;font-family:'Inter',sans-serif;font-weight:500;color:#64748b}
.tab-btn:hover{background:#f8f9fa}
.tab-btn.active{background:#024550;color:#fff}
.dim-inputs{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:280px;margin:0 auto}
.dim-group label{display:block;font-weight:600;margin-bottom:6px;font-size:14px;color:#334155}
.dim-group .req{color:#3b82f6}
.input-wrap{display:flex;border:1px solid #e5e7eb;border-radius:8px;overflow:hidden;transition:all .15s}
.input-wrap:focus-within{border-color:#2ecc71;box-shadow:0 0 0 3px rgba(46,204,113,.1)}
.input-wrap input{flex:1;padding:10px 12px;border:none;font-size:15px;width:100%;font-family:'Inter',sans-serif}
.input-wrap input:focus{outline:none}
.input-wrap .unit{padding:10px 12px;background:#f8f9fa;border-left:1px solid #e5e7eb;font-weight:600;color:#64748b;font-size:13px}
.dim-result{text-align:center;margin-top:5px;color:#94a3b8;font-size:13px}
.options-section{background:#fff;border-radius:12px;padding:20px;border:1px solid #e5e7eb}
.options-header{display:flex;align-items:center;gap:20px;margin-bottom:15px}
.options-title{font-size:16px;font-weight:700;margin:0;color:#1a1a1a}
.cheapest-btn{padding:8px 16px;background:#024550;color:#fff;border:none;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;font-family:'Inter',sans-serif}
.cheapest-btn:hover{background:#244a36}
.option-card{background:#fff;border:1px solid #e5e7eb;border-radius:10px;margin-bottom:8px;overflow:hidden;transition:all .2s}
.option-card:last-child{margin-bottom:0}
.option-card.expanded{border:2px solid #2ecc71;background:#fff}
.option-card.required-error{border:2px solid #ef4444!important;animation:shake .3s}
.option-card.required-error .option-header{background:#fef2f2}
.option-card.is-valid .option-header::after{content:'';width:20px;height:20px;background:#dcfce7;border-radius:50%;margin-left:8px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");background-size:12px;background-position:center;background-repeat:no-repeat;flex-shrink:0}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@keyframes spin{to{transform:rotate(360deg)}}
.option-header{display:flex;align-items:center;padding:12px 15px;cursor:pointer;background:#fff;transition:background .15s}
.option-header:hover{background:#fafbfc}
.option-image{width:42px;height:42px;background:#f8f9fa;border-radius:8px;margin-right:12px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;overflow:hidden}
.option-image img{width:100%;height:100%;object-fit:cover}
.option-info{flex:1;min-width:0}
.option-name{font-weight:600;font-size:14px;margin-bottom:1px;color:#1a1a1a}
.option-value{color:#94a3b8;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.option-price{text-align:right;margin-right:10px;font-size:13px;color:#94a3b8;flex-shrink:0}
.option-price.extra{color:#ef4444}
.option-price.discount{color:#10b981}
.option-edit{width:30px;height:30px;background:#f1f5f9;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;transition:all .15s}
.option-edit:hover{background:#e2e8f0}
.required-badge{display:none;background:#ef4444;color:#fff;font-size:10px;padding:2px 6px;border-radius:8px;margin-left:8px;font-weight:400}
.option-card.required-error .required-badge{display:inline}
.option-body{display:none;padding:15px 20px 20px;border-top:1px solid #f1f5f9;background:#fff}
.option-card.expanded .option-body{display:block}
.option-body-title{font-size:14px;color:#64748b;margin-bottom:15px}
.option-choices{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:15px}
.option-choice{position:relative;background:#fff;border:2px solid #e5e7eb;border-radius:10px;cursor:pointer;transition:all .15s;text-align:center;padding:12px 8px}
.option-choice:hover{border-color:#94a3b8}
.option-choice.selected{border-color:#2ecc71;box-shadow:0 0 0 3px rgba(46,204,113,.1)}
.option-choice-info{position:absolute;top:6px;right:6px;width:18px;height:18px;background:#f1f5f9;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:#94a3b8}
.option-choice-placeholder{width:100%;aspect-ratio:1/1;background:#f8f9fa;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:28px;margin-bottom:8px;overflow:hidden}
.option-choice-placeholder img{width:100%;height:100%;object-fit:cover}
.option-choice-radio{width:22px;height:22px;border:2px solid #d1d5db;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 6px;transition:all .15s}
.option-choice.selected .option-choice-radio{border-color:#2ecc71;background:#2ecc71}
.option-choice.selected .option-choice-radio::after{content:'';width:10px;height:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat}
.option-choice-name{font-size:12px;line-height:1.3;color:#64748b}
.option-choice-price{font-size:11px;color:#94a3b8;margin-top:3px}
.option-save-btn{display:block;margin:0 auto;padding:10px 30px;background:#024550;border:none;border-radius:8px;font-size:13px;color:#fff;cursor:pointer;transition:all .15s;font-family:'Inter',sans-serif;font-weight:600}
.option-save-btn:hover{background:#244a36}
.price-card{background:#fff;border-radius:12px;overflow:hidden;border:1px solid #e5e7eb}
.price-header{background:#024550;color:#fff;padding:14px;font-weight:600;font-size:15px;text-align:center}
.price-rows{padding:15px}
.price-line{display:flex;justify-content:space-between;padding:8px 0;font-size:14px}
.price-line-label{color:#94a3b8}
.price-line-value{font-weight:600;color:#334155}
.price-line.subtotal{border-top:1px solid #f1f5f9;margin-top:8px;padding-top:12px;font-weight:600}
.rot-section{background:#ecfdf5;padding:12px 15px;border-top:1px solid #bbf7d0}
.rot-line{display:flex;justify-content:space-between;color:#10b981;font-weight:600;font-size:14px}
.total-section{background:#024550;color:#fff;padding:15px}
.total-line{display:flex;justify-content:space-between;align-items:center}
.total-label{font-size:15px}
.total-value{font-size:24px;font-weight:700}
.total-vat{font-size:11px;color:rgba(255,255,255,.5);text-align:right;margin-top:3px}
.rot-info{background:#fffbeb;border-top:1px solid #fde68a;padding:12px 15px;font-size:12px;color:#92400e}
.rot-info strong{display:block;margin-bottom:2px}
.cart-section{padding:15px;border-top:1px solid #f1f5f9}
.qty-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.qty-label{font-weight:600;font-size:13px;color:#334155}
.qty-controls{display:flex;border:1px solid #e5e7eb;border-radius:8px;overflow:hidden}
.qty-btn{width:36px;height:36px;border:none;background:#f8f9fa;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;color:#334155}
.qty-btn:hover{background:#e2e8f0}
.qty-input{width:45px;height:36px;border:none;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;text-align:center;font-size:15px;font-weight:600;font-family:'Inter',sans-serif}
.qty-input:focus{outline:none}
.cart-btn{width:100%;background:#024550;color:#fff;border:none;border-radius:10px;padding:14px;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .15s;font-family:'Inter',sans-serif}
.cart-btn:hover{background:#244a36}
.validation-msg{background:#ef4444;color:#fff;padding:10px 15px;border-radius:8px;margin-bottom:12px;display:none;align-items:center;gap:8px;font-size:13px}
.validation-msg.show{display:flex}
/* Modal */
.modal-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:200;justify-content:center;align-items:center;padding:20px}
.modal-overlay.active{display:flex}
.modal{background:#fff;border-radius:16px;width:900px;max-width:95%;height:800px;max-height:90vh;overflow-y:auto;box-shadow:0 24px 80px rgba(0,0,0,.2);display:flex;flex-direction:column}
.modal-header{background:#024550;color:#fff;padding:18px 22px;display:flex;justify-content:space-between;align-items:center}
.modal-header h2{font-size:17px;font-weight:600}
.modal-close{background:none;border:none;color:#fff;font-size:26px;cursor:pointer;opacity:.8}
.modal-close:hover{opacity:1}
.modal-body{padding:20px;flex:1;overflow-y:auto}
.modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.modal-section{margin-bottom:20px}
.modal-section:last-child{margin-bottom:0}
.modal-section-title{font-size:12px;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid #f1f5f9}
.modal-product{display:flex;gap:12px;align-items:center}
.modal-product-image{width:70px;height:70px;border-radius:8px;object-fit:cover;border:1px solid #e5e7eb}
.modal-product-info h3{font-size:15px;font-weight:600;margin-bottom:3px}
.modal-product-info p{color:#94a3b8;font-size:13px}
.modal-cart{background:#f8f9fa;border-radius:8px;overflow:hidden}
.modal-cart-item{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid #e5e7eb;font-size:13px}
.modal-cart-item:last-child{border-bottom:none}
.modal-cart-item-name{color:#334155;font-weight:500;flex:0 0 auto}
.modal-cart-item-value{color:#94a3b8;flex:1;text-align:center;padding:0 8px}
.modal-cart-item-price{font-weight:600;min-width:70px;text-align:right}
.modal-cart-item-price.has-price{color:#10b981}
.modal-price-summary{background:#f8f9fa;border-radius:8px;padding:12px}
.modal-price-row{display:flex;justify-content:space-between;padding:5px 0;font-size:13px}
.modal-price-row.rot{color:#10b981;font-weight:500}
.modal-price-row.total{border-top:2px solid #e5e7eb;margin-top:8px;padding-top:10px;font-size:16px;font-weight:700}
.modal-form{display:grid;gap:12px}
.modal-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.modal-form-group{display:flex;flex-direction:column}
.modal-form-group.full{grid-column:1/-1}
.modal-form-group label{font-size:12px;font-weight:500;color:#64748b;margin-bottom:4px}
.modal-form-group input,.modal-form-group textarea{padding:10px 14px;border:1px solid #e5e7eb;border-radius:8px;font-size:14px;font-family:'Inter',sans-serif;transition:all .15s}
.modal-form-group input:focus,.modal-form-group textarea:focus{outline:none;border-color:#2ecc71;box-shadow:0 0 0 3px rgba(46,204,113,.1)}
.modal-form-group textarea{resize:vertical;min-height:60px}
.modal-submit{width:100%;padding:14px;background:#024550;color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;margin-top:8px;transition:all .15s;font-family:'Inter',sans-serif}
.modal-submit:hover{background:#244a36}
/* === KUNDER MAP === */
.kunder-map-wrap{background:#fff;border-radius:12px;border:1px solid #e5e7eb;overflow:hidden;margin-bottom:16px}
.kunder-map{height:380px;width:100%}
.kunder-map .leaflet-control-attribution{font-size:10px}
.kunder-filters{display:flex;align-items:center;gap:10px;padding:14px 20px;background:#fff;border-radius:12px;border:1px solid #e5e7eb;margin-bottom:16px;flex-wrap:wrap}
.kunder-filters-label{font-size:13px;font-weight:600;color:#64748b;margin-right:4px}
.filter-chip{display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;border:2px solid #e5e7eb;background:#fff;transition:all .15s;font-family:'Inter',sans-serif;color:#334155}
.filter-chip:hover{background:#f8f9fa}
.filter-chip.active{border-color:currentColor;background:rgba(0,0,0,.03)}
.filter-chip .dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.filter-chip.f-order .dot{background:#16a34a}
.filter-chip.f-order.active{border-color:#16a34a;color:#16a34a}
.filter-chip.f-offert .dot{background:#eab308}
.filter-chip.f-offert.active{border-color:#eab308;color:#854d0e}
.filter-chip.f-lost .dot{background:#ef4444}
.filter-chip.f-lost.active{border-color:#ef4444;color:#ef4444}
.filter-chip.f-lead .dot{background:#94a3b8}
.filter-chip.f-lead.active{border-color:#94a3b8;color:#64748b}
.filter-chip .count{background:rgba(0,0,0,.06);padding:1px 7px;border-radius:10px;font-size:11px;margin-left:2px}
.kunder-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.kunder-stat{background:#fff;border-radius:10px;padding:14px 16px;border:1px solid #e5e7eb;display:flex;align-items:center;gap:12px}
.kunder-stat .ks-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}
.kunder-stat .ks-info{flex:1}
.kunder-stat .ks-info h4{font-size:11px;color:#94a3b8;font-weight:500;text-transform:uppercase;letter-spacing:.3px}
.kunder-stat .ks-info .ks-val{font-size:22px;font-weight:700;color:#1a1a1a}
.kunder-stat .ks-info .ks-sum{font-size:12px;color:#64748b;margin-top:1px}
.kunder-search{display:flex;gap:10px;margin-bottom:0}
.kunder-search input{flex:1;padding:10px 14px;border:1px solid #e5e7eb;border-radius:8px;font-size:14px;font-family:'Inter',sans-serif}
.kunder-search input:focus{outline:none;border-color:#2ecc71;box-shadow:0 0 0 3px rgba(46,204,113,.1)}
.map-marker-order{background:#16a34a;border:2px solid #fff;border-radius:50%;width:14px;height:14px;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.sidebar-section-label{padding:20px 22px 6px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,.25)}
.sidebar-divider{height:1px;background:rgba(255,255,255,.08);margin:8px 18px 4px}
/* === KALENDER === */
.cal-wrap{background:#fff;border-radius:12px;border:1px solid #e5e7eb;overflow:hidden;margin-bottom:20px}
.cal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #f1f5f9}
.cal-header h3{font-size:16px;font-weight:600;color:#1a1a1a}
.cal-nav{display:flex;gap:6px}
.cal-nav button{width:32px;height:32px;border:1px solid #e5e7eb;border-radius:8px;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;color:#64748b;transition:all .15s}
.cal-nav button:hover{background:#f8f9fa;border-color:#94a3b8}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;padding:12px 16px 16px}
.cal-day-header{font-size:11px;font-weight:600;color:#94a3b8;padding:4px 0 8px;text-transform:uppercase}
.cal-day{padding:8px 4px;font-size:13px;color:#334155;border-radius:8px;cursor:pointer;transition:all .15s;position:relative}
.cal-day:hover{background:#f1f5f9}
.cal-day.today{background:#024550;color:#fff;font-weight:600}
.cal-day.has-event::after{content:'';position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:5px;height:5px;background:#eab308;border-radius:50%}
.cal-day.other-month{color:#d1d5db}
.cal-events{margin-top:0}
.cal-event-item{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#fff;border-radius:10px;border:1px solid #e5e7eb;margin-bottom:8px;transition:all .15s}
.cal-event-item:hover{box-shadow:0 2px 8px rgba(0,0,0,.05)}
.cal-event-time{font-size:12px;font-weight:600;color:#64748b;min-width:50px}
.cal-event-info h4{font-size:14px;font-weight:600;color:#1a1a1a;margin-bottom:1px}
.cal-event-info p{font-size:12px;color:#94a3b8}
.cal-event-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
/* === DAGRAPPORT === */
.dr-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}
.dr-card{background:#fff;border-radius:12px;padding:18px 20px;border:1px solid #e5e7eb}
.dr-card h4{font-size:12px;color:#94a3b8;font-weight:500;margin-bottom:6px;text-transform:uppercase;letter-spacing:.3px}
.dr-card .dr-val{font-size:24px;font-weight:700;color:#1a1a1a}
.dr-card .dr-sub{font-size:12px;color:#64748b;margin-top:2px}
.dr-form{background:#fff;border-radius:12px;border:1px solid #e5e7eb;padding:24px;margin-bottom:20px}
.dr-form h3{font-size:16px;font-weight:600;color:#1a1a1a;margin-bottom:16px}
.dr-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dr-form-group{display:flex;flex-direction:column}
.dr-form-group.full{grid-column:1/-1}
.dr-form-group label{font-size:12px;font-weight:500;color:#64748b;margin-bottom:5px}
.dr-form-group input,.dr-form-group textarea,.dr-form-group select{padding:10px 14px;border:1px solid #e5e7eb;border-radius:8px;font-size:14px;font-family:'Inter',sans-serif;transition:all .15s}
.dr-form-group input:focus,.dr-form-group textarea:focus,.dr-form-group select:focus{outline:none;border-color:#2ecc71;box-shadow:0 0 0 3px rgba(46,204,113,.1)}
.dr-form-group textarea{resize:vertical;min-height:80px}
.dr-log-item{display:flex;gap:14px;padding:16px 20px;background:#fff;border-radius:10px;border:1px solid #e5e7eb;margin-bottom:8px}
.dr-log-date{font-size:12px;font-weight:600;color:#64748b;min-width:80px}
.dr-log-info{flex:1}
.dr-log-info h4{font-size:14px;font-weight:600;color:#1a1a1a;margin-bottom:3px}
.dr-log-info p{font-size:13px;color:#64748b;line-height:1.5}
.dr-log-tag{font-size:11px;padding:3px 10px;border-radius:12px;font-weight:600}
/* === MIN LÖN === */
.lon-overview{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:20px}
.lon-card{background:#fff;border-radius:12px;padding:20px;border:1px solid #e5e7eb}
.lon-card.highlight{background:#024550;border-color:#024550}
.lon-card.highlight h4{color:rgba(255,255,255,.6)}
.lon-card.highlight .lon-val{color:#fff}
.lon-card.highlight .lon-sub{color:rgba(255,255,255,.4)}
.lon-card h4{font-size:12px;color:#94a3b8;font-weight:500;margin-bottom:6px;text-transform:uppercase;letter-spacing:.3px}
.lon-card .lon-val{font-size:26px;font-weight:700;color:#1a1a1a}
.lon-card .lon-sub{font-size:12px;color:#64748b;margin-top:3px}
.lon-breakdown{background:#fff;border-radius:12px;border:1px solid #e5e7eb;overflow:hidden;margin-bottom:20px}
.lon-breakdown-header{padding:16px 20px;font-weight:600;font-size:15px;color:#1a1a1a;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;gap:10px}
.lon-row{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;border-bottom:1px solid #f1f5f9;font-size:14px}
.lon-row:last-child{border-bottom:none}
.lon-row-label{color:#64748b}
.lon-row-val{font-weight:600;color:#1a1a1a}
.lon-row.total{background:#f8f9fa;font-weight:700}
.lon-row.total .lon-row-label{color:#1a1a1a}
.lon-row.total .lon-row-val{color:#10b981;font-size:16px}
.lon-row.deduction .lon-row-val{color:#ef4444}
/* === EVA AI CHAT (compact) === */
.eko-layout{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start}
.eko-main{display:flex;flex-direction:column;gap:16px}
.eko-tabs{display:flex;gap:4px;background:#fff;border-radius:10px;padding:4px;border:1px solid #e5e7eb;margin-bottom:4px}
.eko-tab{padding:9px 16px;border-radius:8px;font-size:13px;font-weight:500;color:#64748b;cursor:pointer;border:none;background:none;font-family:'Inter',sans-serif;transition:all .15s}
.eko-tab:hover{color:#334155;background:#f8f9fa}
.eko-tab.active{background:#024550;color:#fff;font-weight:600}
.eko-panel{display:none}
.eko-panel.active{display:block}
.eva-chat-wrap{background:#fff;border-radius:12px;border:1px solid #e5e7eb;display:flex;flex-direction:column;overflow:hidden;height:520px;position:sticky;top:20px}
.eva-chat-header{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid #f1f5f9;background:#fff}
.eva-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid #e5e7eb;flex-shrink:0}
.eva-header-info h3{font-size:13px;font-weight:600;color:#1a1a1a;margin-bottom:0}
.eva-header-info p{font-size:11px;color:#64748b}
.eva-online{display:inline-block;width:7px;height:7px;background:#10b981;border-radius:50%;margin-left:4px;vertical-align:middle}
.eva-messages{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.eva-messages::-webkit-scrollbar{width:3px}
.eva-messages::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:3px}
.eva-msg{display:flex;gap:8px;max-width:92%;animation:msgIn .3s ease}
.eva-msg.eva{align-self:flex-start}
.eva-msg.user{align-self:flex-end;flex-direction:row-reverse}
.eva-msg-avatar{width:26px;height:26px;border-radius:50%;object-fit:cover;flex-shrink:0;margin-top:2px}
.eva-msg-bubble{padding:8px 12px;border-radius:14px;font-size:12.5px;line-height:1.5;color:#1a1a1a}
.eva-msg.eva .eva-msg-bubble{background:#f1f5f9;border-bottom-left-radius:4px}
.eva-msg.user .eva-msg-bubble{background:#024550;color:#fff;border-bottom-right-radius:4px}
.eva-msg-time{font-size:9px;color:#94a3b8;margin-top:2px;padding:0 4px}
.eva-msg.user .eva-msg-time{text-align:right}
.eva-input-wrap{display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid #f1f5f9;background:#fff}
.eva-input{flex:1;padding:8px 12px;border:1px solid #e5e7eb;border-radius:20px;font-size:12.5px;font-family:'Inter',sans-serif;resize:none;max-height:60px;line-height:1.4}
.eva-input:focus{outline:none;border-color:#024550;box-shadow:0 0 0 2px rgba(2,69,80,.1)}
.eva-send{width:34px;height:34px;border-radius:50%;background:#024550;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0}
.eva-send:hover{background:#035a6b}
.eva-send:disabled{background:#94a3b8;cursor:not-allowed}
.eva-send svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.eva-typing{display:flex;gap:4px;padding:8px 12px;background:#f1f5f9;border-radius:14px;border-bottom-left-radius:4px;align-self:flex-start}
.eva-typing span{width:6px;height:6px;background:#94a3b8;border-radius:50%;animation:typingDot 1.4s infinite}
.eva-typing span:nth-child(2){animation-delay:.2s}
.eva-typing span:nth-child(3){animation-delay:.4s}
@keyframes typingDot{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}
@keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.eva-suggestions{display:flex;flex-wrap:wrap;gap:5px;padding:0 14px 10px}
.eva-suggestion{padding:5px 10px;background:#f1f5f9;border:1px solid #e5e7eb;border-radius:14px;font-size:10.5px;color:#64748b;cursor:pointer;transition:all .15s;font-family:'Inter',sans-serif}
.eva-suggestion:hover{background:#e2e8f0;color:#334155;border-color:#94a3b8}
.lon-month-select{padding:8px 30px 8px 12px;border:1px solid #e5e7eb;border-radius:8px;font-size:13px;font-weight:500;font-family:'Inter',sans-serif;appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23334155'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 8px center/16px;cursor:pointer}
.map-marker-offert{background:#eab308;border:2px solid #fff;border-radius:50%;width:14px;height:14px;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.map-marker-lost{background:#ef4444;border:2px solid #fff;border-radius:50%;width:14px;height:14px;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.map-marker-lead{background:#94a3b8;border:2px solid #fff;border-radius:50%;width:14px;height:14px;box-shadow:0 1px 4px rgba(0,0,0,.3)}
@media(max-width:1100px){.config-layout{grid-template-columns:1fr}.config-sidebar{position:static}.stat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.sidebar{display:none}.main-wrapper{margin-left:0}}
/* === TOP SELLERS === */
.top-sellers-list{padding:0}
.top-seller-item{display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:1px solid #f1f5f9;transition:background .15s}
.top-seller-item:last-child{border-bottom:none}
.top-seller-item:hover{background:#fafbfc}
.top-seller-medal{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;flex-shrink:0}
.medal-gold{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#78350f}
.medal-silver{background:linear-gradient(135deg,#d1d5db,#9ca3af);color:#374151}
.medal-bronze{background:linear-gradient(135deg,#d97706,#b45309);color:#fff}
.top-seller-info{flex:1;min-width:0}
.top-seller-name{font-size:14px;font-weight:600;color:#1a1a1a}
.top-seller-detail{font-size:12px;color:#94a3b8}
.top-seller-amount{text-align:right;font-size:15px;font-weight:700;color:#10b981}
/* === DASHBOARD CHARTS === */
.dash-charts{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
.dash-chart-panel{background:#fff;border-radius:12px;border:1px solid #e5e7eb;overflow:hidden}
.dash-chart-panel .dash-panel-header{padding:12px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #f1f5f9}
.dash-chart-panel .dash-panel-header svg{width:18px;height:18px;stroke:#64748b;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dash-chart-panel .dash-panel-header h3{font-size:14px;font-weight:600;color:#1a1a1a}
.dash-chart-body{padding:14px}
.dash-chart-body canvas{max-height:200px}
/* === FÄLTSÄLJ === */
.falt-layout{display:grid;grid-template-columns:1fr 360px;gap:20px;align-items:start}
.falt-left{display:flex;flex-direction:column;gap:20px;min-width:0}
.falt-map{height:500px;width:100%;border-radius:12px;border:1px solid #e5e7eb;overflow:hidden}
.falt-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:16px}
.falt-stat{background:#fff;border-radius:10px;border:1px solid #e5e7eb;padding:12px 14px;text-align:center}
.falt-stat h4{font-size:10px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.falt-stat .fval{font-size:22px;font-weight:700;color:#1a1a1a}
.falt-stat .fsub{font-size:11px;color:#94a3b8;margin-top:2px}
.falt-sidebar{background:#fff;border-radius:12px;border:1px solid #e5e7eb;overflow:hidden}
.falt-sidebar-header{padding:16px 18px;border-bottom:1px solid #f1f5f9;font-size:15px;font-weight:600;color:#1a1a1a}
.falt-list{max-height:450px;overflow-y:auto}
.falt-list::-webkit-scrollbar{width:4px}
.falt-list::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:4px}
.falt-item{display:flex;align-items:center;gap:12px;padding:10px 18px;border-bottom:1px solid #f8f9fa;cursor:pointer;transition:background .15s}
.falt-item:hover{background:#fafbfc}
.falt-item-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.falt-item-info{flex:1;min-width:0}
.falt-item-addr{font-size:13px;font-weight:500;color:#1a1a1a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.falt-item-detail{font-size:11px;color:#94a3b8}
.falt-item-status{font-size:11px;font-weight:600;padding:3px 8px;border-radius:10px;flex-shrink:0}
.falt-popup-btns{display:flex;gap:4px;margin-top:8px;flex-wrap:wrap}
.falt-popup-btn{padding:4px 10px;border:none;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;transition:all .15s}
.falt-popup-btn:hover{opacity:.85}
.falt-kalkyler{overflow-x:auto}
.falt-kalkyler-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.falt-kalkyler-header h3{font-size:16px;font-weight:700;color:#1a1a1a}
.falt-kalkyler-header .fk-count{font-size:13px;color:#94a3b8;font-weight:400}
.falt-kalkyler table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;border:1px solid #e5e7eb}
.falt-kalkyler thead th{background:#f8f9fa;font-size:11px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px;padding:8px 10px;text-align:left;border-bottom:1px solid #e5e7eb;white-space:nowrap}
.falt-kalkyler tbody td{padding:8px 10px;font-size:12px;color:#1a1a1a;border-bottom:1px solid #f1f5f9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.falt-kalkyler tbody td.addr-cell{max-width:180px}
.falt-kalkyler tbody tr:hover{background:#fafbfc}
.fk-badge{font-size:11px;font-weight:600;padding:3px 10px;border-radius:10px;display:inline-block}
.fk-badge.ny{background:#e0f2fe;color:#0284c7}
.fk-badge.skickad{background:#fef3c7;color:#b45309}
.fk-badge.godkand{background:#dcfce7;color:#15803d}
.fk-badge.forlorad{background:#fee2e2;color:#dc2626}
.fk-action{padding:4px 12px;border:1px solid #e5e7eb;border-radius:6px;font-size:11px;font-weight:500;cursor:pointer;background:#fff;font-family:'Inter',sans-serif;transition:all .15s;color:#1a1a1a}
.fk-action:hover{background:#f1f5f9;border-color:#cbd5e1}
/* === PRODUCT CATALOG === */
.catalog-header{display:flex;align-items:center;gap:15px;margin-bottom:20px;flex-wrap:wrap}
.catalog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.catalog-card{background:#fff;border-radius:12px;border:1px solid #e5e7eb;overflow:hidden;transition:all .2s;cursor:pointer}
.catalog-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.08);transform:translateY(-2px)}
.catalog-card-img{width:100%;aspect-ratio:4/3;background:#f8f9fa;display:flex;align-items:center;justify-content:center;overflow:hidden}
.catalog-card-img img{width:100%;height:100%;object-fit:cover}
.catalog-card-img svg{width:48px;height:48px;stroke:#cbd5e1;fill:none;stroke-width:1.2}
.catalog-card-body{padding:14px 16px}
.catalog-card-cat{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#64748b;margin-bottom:4px}
.catalog-card-name{font-size:14px;font-weight:600;color:#1a1a1a;margin-bottom:6px;line-height:1.3}
.catalog-card-desc{font-size:12px;color:#94a3b8;margin-bottom:8px;line-height:1.4}
.catalog-card-footer{display:flex;justify-content:space-between;align-items:center}
.catalog-card-price{font-size:16px;font-weight:700;color:#024550}
.catalog-card-badge{padding:3px 8px;border-radius:12px;font-size:10px;font-weight:600}
@media(max-width:768px){
.product-section{grid-template-columns:1fr;gap:20px}.option-choices{grid-template-columns:repeat(2,1fr)}.modal-grid{grid-template-columns:1fr}.stat-grid{grid-template-columns:1fr}.dash-grid{grid-template-columns:1fr}.dash-charts{grid-template-columns:1fr}.catalog-grid{grid-template-columns:repeat(2,1fr)}.kunder-stats{grid-template-columns:repeat(2,1fr)}.kunder-map{height:250px}
.main-wrapper{padding:16px 10px;margin-left:0 !important}
/* FältSälj mobil */
.falt-layout{grid-template-columns:1fr !important;gap:12px}
.falt-map{height:50vh !important;border-radius:10px}
.falt-stats{grid-template-columns:repeat(3,1fr) !important;gap:6px}
.falt-stat{padding:8px 6px}
.falt-stat .fval{font-size:18px}
.falt-stat h4{font-size:9px}
.falt-sidebar{border-radius:10px}
.falt-list{max-height:300px !important}
.falt-kalkyler{overflow-x:auto}
.falt-left{gap:12px}
.falt-kalkyler table{min-width:500px;font-size:11px}
.page-title{font-size:20px}
.page-subtitle{font-size:12px;margin-bottom:12px}
/* Mobil bottom nav */
.mobile-nav{display:flex !important}
body{padding-bottom:60px}
}
.mobile-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:#024550;z-index:200;justify-content:space-around;padding:6px 0 env(safe-area-inset-bottom,6px);box-shadow:0 -2px 12px rgba(0,0,0,.15)}
.mobile-nav a{display:flex;flex-direction:column;align-items:center;gap:2px;color:rgba(255,255,255,.5);text-decoration:none;font-size:10px;font-weight:500;padding:4px 8px;transition:color .15s}
.mobile-nav a.active{color:#fff}
.mobile-nav a svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@keyframes blink-red{0%,100%{opacity:1}50%{opacity:.3}}</style>
</head>
<body>
<!-- LOGIN SCREEN -->
<div class="login-screen" id="loginScreen">
<div class="login-image">
<div class="login-image-text">
<h2 id="loginGreetingBig" style="font-size:44px;font-weight:700;margin-bottom:16px">God morgon</h2>
<p id="loginQuote" style="font-size:18px;opacity:.9;font-style:italic;max-width:480px;line-height:1.6"></p>
</div>
</div>
<div class="login-panel">
<div class="login-logo">
<img src="https://www.solargroup.se/wp-content/uploads/2024/02/Solar_Energy_Group_26_-removebg-preview.png" alt="Solar Energy Group">
</div>
<h1 class="login-greeting" id="loginGreeting" style="font-size:22px">Välkommen tillbaka</h1>
<p class="login-subtitle">Logga in för att fortsätta</p>
<form onsubmit="doLogin(event)">
<div class="login-form-group">
<label>E-postadress</label>
<input type="text" id="loginEmail" placeholder="namn@solargroup.se eller admin" autocomplete="email">
</div>
<div class="login-form-group">
<label>Lösenord</label>
<div style="position:relative">
<input type="password" id="loginPassword" placeholder="Ange lösenord" autocomplete="current-password" style="padding-right:44px">
<button type="button" onclick="var p=document.getElementById('loginPassword');var t=p.type==='password'?'text':'password';p.type=t;this.innerHTML=t==='password'?'<svg width=20 height=20 viewBox="0 0 24 24" fill=none stroke="#94a3b8" stroke-width=2><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx=12 cy=12 r=3/></svg>':'<svg width=20 height=20 viewBox="0 0 24 24" fill=none stroke="#024550" stroke-width=2><path d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24"/><line x1=1 y1=1 x2=23 y2=23/></svg>'" style="position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg></button>
</div>
</div>
<div class="login-remember">
<label><input type="checkbox" checked> Kom ihåg mig</label>
<a href="#" class="login-forgot" onclick="alert('En återställningslänk har skickats till din e-post.\n\n(DEMO)');return false">Glömt lösenord?</a>
</div>
<button type="submit" class="login-btn">Logga in</button>
</form>
<div style="display:flex;align-items:center;gap:12px;margin:20px 0">
<div style="flex:1;height:1px;background:#e5e7eb"></div>
<span style="font-size:12px;color:#94a3b8;font-weight:500">eller</span>
<div style="flex:1;height:1px;background:#e5e7eb"></div>
</div>
<button onclick="googleLoginFromScreen()" style="width:100%;padding:12px 20px;background:#fff;border:1.5px solid #e5e7eb;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;color:#1a1a1a;display:flex;align-items:center;justify-content:center;gap:10px;transition:all .2s" onmouseover="this.style.background='#f8fafc';this.style.borderColor='#024550'" onmouseout="this.style.background='#fff';this.style.borderColor='#e5e7eb'">
<svg width="20" height="20" viewBox="0 0 24 24"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/></svg>
Logga in med Google
</button>
<div id="loginError" style="display:none;background:#fef2f2;border:1px solid #fecaca;color:#dc2626;padding:10px 14px;border-radius:8px;font-size:13px;margin-top:12px;text-align:center"></div>
<div id="loginPending" style="display:none;background:#fffbeb;border:1px solid #fde68a;color:#92400e;padding:10px 14px;border-radius:8px;font-size:13px;margin-top:12px;text-align:center"></div>
<p style="text-align:center;margin-top:16px;font-size:13px;color:#64748b">Inget konto? <a href="#" onclick="showRegisterForm();return false" style="color:#024550;font-weight:600;text-decoration:none">Skapa konto</a></p>
<!-- Registreringsformulär (dolt) -->
<div id="registerForm" style="display:none;margin-top:16px;padding:16px;background:#f8fafc;border-radius:12px;border:1px solid #e5e7eb">
<h3 style="margin:0 0 12px;font-size:16px;color:#1e293b">Skapa konto</h3>
<div class="login-form-group"><label>Namn</label><input type="text" id="regName" placeholder="Ditt namn"></div>
<div class="login-form-group"><label>E-postadress</label><input type="email" id="regEmail" placeholder="namn@solargroup.se"></div>
<div class="login-form-group"><label>Lösenord</label><input type="password" id="regPassword" placeholder="Minst 4 tecken"></div>
<button onclick="doRegister()" class="login-btn" style="margin-top:8px">Skapa konto</button>
<div id="regError" style="display:none;background:#fef2f2;border:1px solid #fecaca;color:#dc2626;padding:8px 12px;border-radius:8px;font-size:12px;margin-top:8px;text-align:center"></div>
<div id="regSuccess" style="display:none;background:#f0fdf4;border:1px solid #bbf7d0;color:#166534;padding:8px 12px;border-radius:8px;font-size:12px;margin-top:8px;text-align:center"></div>
<p style="text-align:center;margin-top:10px;font-size:12px;color:#64748b"><a href="#" onclick="hideRegisterForm();return false" style="color:#024550;text-decoration:none">← Tillbaka till inloggning</a></p>
</div>
<div class="login-footer">Solar Energy Group AB • Solar Sales Suite v1.0</div>
</div>
</div>
<!-- SIDEBAR -->
<nav class="sidebar" style="display:none" id="appSidebar">
<div class="sidebar-brand">
<div class="sidebar-brand-icon"><img src="https://www.solargroup.se/wp-content/uploads/2024/02/Solar_Energy_Group_26_-removebg-preview.png" alt="Solar Energy Group"></div>
</div>
<div class="sidebar-menu">
<div class="sidebar-section-label">Försäljning</div>
<a class="nav-item active" data-page="oversikt"><span class="nav-icon"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg></span>Dashboard</a>
<a class="nav-item" data-page="faltsalj"><span class="nav-icon"><svg viewBox="0 0 24 24"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg></span>FältSälj</a>
<a class="nav-item" data-page="leads"><span class="nav-icon"><svg viewBox="0 0 24 24"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" y1="11" x2="19" y2="17"/><line x1="16" y1="14" x2="22" y2="14"/></svg></span>Leads</a>
<a class="nav-item" data-page="kunder"><span class="nav-icon"><svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></span>Kunder</a>
<a class="nav-item" data-page="produkter"><span class="nav-icon"><svg viewBox="0 0 24 24"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/></svg></span>Produktkatalog</a>
<a class="nav-item" data-page="konfigurator"><span class="nav-icon"><svg viewBox="0 0 24 24"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg></span>Kalkyler</a>
<a class="nav-item" data-page="projekt"><span class="nav-icon"><svg viewBox="0 0 24 24"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg></span>Affärer</a>
<a class="nav-item" data-page="projektering"><span class="nav-icon"><svg viewBox="0 0 24 24"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg></span>Projektflöde</a>
<a class="nav-item" data-page="ue"><span class="nav-icon"><svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></span>Entreprenörer</a>
<a class="nav-item" data-page="inkop"><span class="nav-icon"><svg viewBox="0 0 24 24"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 0 1-8 0"/></svg></span>Inköp</a>
<a class="nav-item" data-page="leverantorer"><span class="nav-icon"><svg viewBox="0 0 24 24"><rect x="1" y="3" width="15" height="13"/><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg></span>Leverantörer</a>
<a class="nav-item" data-page="ekonomi"><span class="nav-icon"><svg viewBox="0 0 24 24"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg></span>Ekonomi</a>
<a class="nav-item" data-page="bildgen"><span class="nav-icon"><svg viewBox="0 0 24 24"><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></span>Bildgenerering</a>
<a class="nav-item" data-page="personal"><span class="nav-icon"><svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" y1="8" x2="19" y2="14"/><line x1="22" y1="11" x2="16" y2="11"/></svg></span>Personal</a>
<div class="sidebar-divider"></div>
<div class="sidebar-section-label">Mina Sidor</div>
<a class="nav-item" data-page="kalender"><span class="nav-icon"><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg></span>Kalender</a>
<a class="nav-item" data-page="inkorg"><span class="nav-icon"><svg viewBox="0 0 24 24"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg></span>Inkorg</a>
<a class="nav-item" data-page="dagrapport"><span class="nav-icon"><svg viewBox="0 0 24 24"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg></span>Dagrapport</a>
<a class="nav-item" data-page="minlon"><span class="nav-icon"><svg viewBox="0 0 24 24"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg></span>Min Lön</a>
<div class="sidebar-divider"></div>
<a class="nav-item" data-page="admin" id="navAdmin" style="display:none"><span class="nav-icon"><svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></span>Admin <span id="adminPendingBadge" style="display:none;background:#ef4444;color:#fff;border-radius:10px;padding:1px 7px;font-size:10px;font-weight:700;margin-left:4px"></span></a>
<a class="nav-item" data-page="settings"><span class="nav-icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg></span>Inställningar</a>
</div>
<div class="sidebar-bottom">
<div class="sidebar-user">
<div class="sidebar-user-info"><span>Inloggad som</span><strong>admin@solargroup.se</strong></div>
</div>
<button class="sidebar-logout"><svg viewBox="0 0 24 24"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>Logga ut</button>
</div>
</nav>
<!-- MAIN -->
<main class="main-wrapper" style="display:none" id="appMain">
<!-- DASHBOARD -->
<div class="page-content active" id="page-oversikt">
<h1 class="page-title">Dashboard</h1>
<p class="page-subtitle">Översikt över din försäljning och aktiviteter</p>
<div class="stat-grid">
<div class="stat-card">
<div class="stat-card-info"><h4>Totalt Värde</h4><div class="stat-value" id="dashTotalValue">-</div></div>
<div class="stat-card-icon green"><svg viewBox="0 0 24 24"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg></div>
</div>
<div class="stat-card">
<div class="stat-card-info"><h4>Pågående Offerter</h4><div class="stat-value" id="dashOffertar">-</div></div>
<div class="stat-card-icon blue"><svg viewBox="0 0 24 24"><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"/></svg></div>
</div>
<div class="stat-card">
<div class="stat-card-info"><h4>Kunder</h4><div class="stat-value" id="dashKunder">-</div></div>
<div class="stat-card-icon purple"><svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></div>
</div>
<div class="stat-card">
<div class="stat-card-info"><h4>Accepterade</h4><div class="stat-value" id="dashAccepted">-</div></div>
<div class="stat-card-icon teal"><svg viewBox="0 0 24 24"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg></div>
</div>
</div>
<div class="dash-grid" style="grid-template-columns:1fr 1fr 1fr">
<div class="dash-panel">
<div class="dash-panel-header">
<svg viewBox="0 0 24 24"><path d="M6 9l6-6 6 6"/><path d="M12 3v14"/><circle cx="6" cy="20" r="1"/><circle cx="12" cy="20" r="1"/><circle cx="18" cy="20" r="1"/></svg>
<h3>Top Säljare</h3>
</div>
<div class="dash-panel-body top-sellers-list" id="dashTopSellers"><div style="padding:20px;text-align:center;color:#94a3b8;font-size:13px">Laddar...</div></div>
</div>
<div class="dash-panel">
<div class="dash-panel-header">
<svg viewBox="0 0 24 24"><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"/></svg>
<h3>Senaste Affärer</h3>
</div>
<div class="dash-panel-body" id="dashRecentDeals"><div style="padding:20px;text-align:center;color:#94a3b8;font-size:13px">Laddar...</div></div>
</div>
<div class="dash-panel">
<div class="dash-panel-header">
<svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
<h3>Kommande Möten</h3>
</div>
<div class="dash-panel-body" id="dashMeetings"><div style="padding:20px;text-align:center;color:#94a3b8;font-size:13px">Inga möten inbokade</div></div>
</div>
</div>
<div class="dash-charts">
<div class="dash-chart-panel">
<div class="dash-panel-header">
<svg viewBox="0 0 24 24"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
<h3>Försäljning Februari 2026</h3>
</div>
<div class="dash-chart-body"><canvas id="chartMonthly"></canvas></div>
</div>
<div class="dash-chart-panel">
<div class="dash-panel-header">
<svg viewBox="0 0 24 24"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
<h3>Helårsöversikt 2026</h3>
</div>
<div class="dash-chart-body"><canvas id="chartYearly"></canvas></div>
</div>
</div>
</div>
<!-- FÄLTSÄLJ -->
<div class="page-content" id="page-faltsalj">
<h1 class="page-title">FältSälj</h1>
<p class="page-subtitle">Sök adress, se solpotential och prospektera</p>
<!-- Adresssökning -->
<div style="display:flex;gap:12px;margin-bottom:16px;align-items:center">
<div style="flex:1;position:relative" id="faltSearchWrap">
<input type="text" id="faltAddressInput" placeholder="Skriv adress..." autocomplete="off" onfocus="showAddressHistory()" style="width:100%;padding:12px 16px 12px 40px;border:1.5px solid #e5e7eb;border-radius:10px;font-size:15px;font-family:'Inter',sans-serif">
<svg style="position:absolute;left:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;stroke:#94a3b8;fill:none;stroke-width:2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
<div id="addressHistoryDropdown" style="display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #e5e7eb;border-radius:0 0 10px 10px;box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:500;max-height:260px;overflow-y:auto"></div>
</div>
<button class="dummy-btn" onclick="faltUseMyLocation()"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v4m0 12v4m10-10h-4M6 12H2"/><circle cx="12" cy="12" r="3"/></svg> Min plats</button>
<button class="dummy-btn" id="btnDrawArea" onclick="startDrawArea()" style="background:#024550;color:#fff"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/></svg> Markera område</button>
</div>
<!-- Stats -->
<div class="falt-stats">
<div class="falt-stat"><h4>Planerade</h4><div class="fval" id="faltTotal">0</div><div class="fsub">att besöka</div></div>
<div class="falt-stat"><h4>Besökta</h4><div class="fval" id="faltVisited">0</div><div class="fsub" id="faltVisitedPct">0%</div></div>
<div class="falt-stat"><h4>Leads</h4><div class="fval" id="faltInterested">0</div><div class="fsub" style="color:#10b981">intresserade</div></div>
<div class="falt-stat"><h4>Avböjt</h4><div class="fval" id="faltNotInt">0</div><div class="fsub" style="color:#ef4444">ej intresserad</div></div>
<div class="falt-stat"><h4>Återbesök</h4><div class="fval" id="faltNotHome">0</div><div class="fsub" style="color:#eab308">ej hemma</div></div>
</div>
<div class="falt-layout">
<div class="falt-left">
<div class="falt-map" id="faltMap"></div>
<!-- Leads / Kalkyler (fast under kartan) -->
<div class="falt-kalkyler">
<div class="falt-kalkyler-header">
<h3>Leads & Kalkyler <span class="fk-count" id="fkCount"></span></h3>
</div>
<table>
<thead><tr><th>Status</th><th>Adress</th><th>Kund</th><th>Tel</th><th>Datum</th><th></th></tr></thead>
<tbody id="faltKalkylBody"></tbody>
</table>
</div>
</div>
<div class="falt-sidebar">
<!-- Fastighetsinformation vid klick -->
<div class="falt-sidebar-header">Fastighet</div>
<div id="solarDataPanel" style="padding:18px">
<div style="text-align:center;padding:40px 20px;color:#94a3b8;font-size:14px">
Klicka på ett hus på kartan eller sök adress
</div>
</div>
<!-- Prospektlista -->
<div class="falt-sidebar-header" style="border-top:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between">
<span>Planerad rutt <span id="faltListCount" style="color:#94a3b8;font-weight:400;font-size:13px;margin-left:4px"></span></span>
<div style="display:flex;gap:4px;align-items:center">
<button onclick="faltListFilter='all';renderFaltList()" id="fltAll" style="padding:2px 8px;border:1px solid #e5e7eb;border-radius:6px;font-size:11px;cursor:pointer;background:#024550;color:#fff;font-family:inherit">Alla</button>
<button onclick="faltListFilter='unvisited';renderFaltList()" id="fltPlan" style="padding:2px 8px;border:1px solid #e5e7eb;border-radius:6px;font-size:11px;cursor:pointer;background:#fff;color:#64748b;font-family:inherit">Planerade</button>
<button onclick="faltListFilter='interested';renderFaltList()" id="fltLead" style="padding:2px 8px;border:1px solid #e5e7eb;border-radius:6px;font-size:11px;cursor:pointer;background:#fff;color:#64748b;font-family:inherit">Leads</button>
<button onclick="clearAllProspects()" style="padding:2px 8px;border:1px solid #fee2e2;border-radius:6px;font-size:11px;cursor:pointer;background:#fff;color:#ef4444;font-family:inherit" title="Rensa alla">Rensa</button>
</div>
</div>
<div class="falt-list" id="faltList" style="max-height:400px;overflow-y:auto"></div>
<!-- Ruttknappar -->
<div style="padding:12px;display:flex;gap:6px;border-top:1px solid #e5e7eb;flex-wrap:wrap">
<button onclick="showSaveRouteModal()" style="flex:1;padding:8px 10px;background:#024550;color:#fff;border:none;border-radius:8px;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:5px"><svg viewBox="0 0 24 24" style="width:13px;height:13px;stroke:currentColor;fill:none;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</button>
<button onclick="showLoadRouteModal()" style="flex:1;padding:8px 10px;background:#f0f9ff;color:#1e40af;border:1px solid #bfdbfe;border-radius:8px;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:5px"><svg viewBox="0 0 24 24" style="width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>Ladda</button>
<button onclick="startStreetViewRoute()" style="flex:1;padding:8px 10px;background:#f5f3ff;color:#6d28d9;border:1px solid #ddd6fe;border-radius:8px;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:5px"><svg viewBox="0 0 24 24" style="width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2"><circle cx="12" cy="5" r="3"/><path d="M12 8v4"/><path d="M8 20l4-8 4 8"/></svg>SV-rutt</button>
</div>
<div id="currentRouteInfo" style="display:none;padding:8px 12px;background:#ecfdf5;border-top:1px solid #bbf7d0;font-size:11px;color:#166534"></div>
</div>
</div>
<!-- Check-in modal -->
<div id="checkinModal" style="display:none;position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center">
<div style="background:#fff;border-radius:16px;padding:28px;width:440px;max-width:95vw;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.2)">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px">
<h3 style="font-size:18px;font-weight:700" id="checkinTitle">Incheckning</h3>
<button onclick="closeCheckin()" style="background:none;border:none;font-size:22px;cursor:pointer;color:#94a3b8">×</button>
</div>
<div id="checkinAddr" style="font-size:14px;color:#64748b;margin-bottom:16px"></div>
<!-- Snabbknapp: Ny Kalkyl -->
<div id="checkinStep0">
<button onclick="checkinDirectToKalkyl()" style="width:100%;padding:16px;background:linear-gradient(135deg,#024550,#035e6b);color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:16px;box-shadow:0 4px 12px rgba(2,69,80,.25)"><svg viewBox="0 0 24 24" style="width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg> Ny Kalkyl</button>
</div>
<!-- Steg 1: Resultat -->
<div id="checkinStep1">
<p style="font-size:14px;font-weight:600;margin-bottom:12px">Hur gick besöket?</p>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px">
<button onclick="checkinResult('interested')" style="padding:16px;border:2px solid #dcfce7;border-radius:10px;background:#f0fdf4;cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;color:#166534">Intresserad</button>
<button onclick="checkinResult('not_interested')" style="padding:16px;border:2px solid #fee2e2;border-radius:10px;background:#fef2f2;cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;color:#991b1b">Ej intresserad</button>
<button onclick="checkinResult('not_home')" style="padding:16px;border:2px solid #fef9c3;border-radius:10px;background:#fffbeb;cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;color:#854d0e">Ej hemma</button>
<button onclick="checkinResult('callback')" style="padding:16px;border:2px solid #dbeafe;border-radius:10px;background:#eff6ff;cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;color:#1e40af">Boka återbesök</button>
</div>
</div>
<!-- Steg 2: Lead-info (visas vid intresserad) -->
<div id="checkinStep2" style="display:none">
<p style="font-size:14px;font-weight:600;margin-bottom:12px;color:#10b981">Kunden är intresserad! Fyll i uppgifter:</p>
<div style="display:grid;gap:10px">
<div><label style="font-size:12px;font-weight:600;color:#334155;display:block;margin-bottom:4px">Kundens namn</label><input type="text" id="ciName" placeholder="Förnamn Efternamn" style="width:100%;padding:10px 12px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:14px;font-family:inherit"></div>
<div><label style="font-size:12px;font-weight:600;color:#334155;display:block;margin-bottom:4px">Telefon</label><input type="tel" id="ciPhone" placeholder="070-123 45 67" style="width:100%;padding:10px 12px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:14px;font-family:inherit"></div>
<div><label style="font-size:12px;font-weight:600;color:#334155;display:block;margin-bottom:4px">E-post (valfritt)</label><input type="email" id="ciEmail" placeholder="kund@email.se" style="width:100%;padding:10px 12px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:14px;font-family:inherit"></div>
<div><label style="font-size:12px;font-weight:600;color:#334155;display:block;margin-bottom:4px">Intresserad av</label>
<select id="ciProduct" style="width:100%;padding:10px 12px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:14px;font-family:inherit">
<option value="">Välj produkt...</option>
<option value="Solceller">Solceller</option>
<option value="Takbyte">Takbyte</option>
<option value="Fönster">Fönster</option>
<option value="Fasad">Fasadrenovering</option>
<option value="Laddbox">Laddbox</option>
<option value="Batteri">Batteri</option>
<option value="Värmepump">Värmepump</option>
<option value="Kombination">Kombination</option>
</select>
</div>
<div><label style="font-size:12px;font-weight:600;color:#334155;display:block;margin-bottom:4px">Anteckning</label><textarea id="ciNote" rows="2" placeholder="T.ex. 'Vill ha offert inom 2 veckor, gammalt tak'" style="width:100%;padding:10px 12px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:14px;font-family:inherit;resize:vertical"></textarea></div>
</div>
<button onclick="saveCheckinLead()" style="width:100%;margin-top:14px;padding:12px;background:#10b981;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit">Spara lead</button>
</div>
<!-- Steg 2b: Notering (vid ej intresserad / ej hemma) -->
<div id="checkinStep2b" style="display:none">
<div style="margin-top:12px">
<label style="font-size:12px;font-weight:600;color:#334155;display:block;margin-bottom:4px">Anteckning (valfritt)</label>
<textarea id="ciNoteSimple" rows="2" placeholder="T.ex. 'Hade redan solceller' eller 'Prova igen torsdag'" style="width:100%;padding:10px 12px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:14px;font-family:inherit;resize:vertical"></textarea>
</div>
<button onclick="saveCheckinSimple()" style="width:100%;margin-top:12px;padding:12px;background:#024550;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit">Spara & nästa</button>
</div>
<!-- Steg 2c: Boka återbesök med datum/tid -->
<div id="checkinStep2c" style="display:none">
<p style="font-size:14px;font-weight:600;margin-bottom:12px;color:#1e40af">Boka återbesök</p>
<div style="display:grid;gap:10px">
<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px">
<div><label style="font-size:12px;font-weight:600;color:#334155;display:block;margin-bottom:4px">Datum</label><input type="date" id="ciCallbackDate" style="width:100%;padding:10px 12px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:14px;font-family:inherit"></div>
<div><label style="font-size:12px;font-weight:600;color:#334155;display:block;margin-bottom:4px">Tid</label><input type="time" id="ciCallbackTime" value="10:00" style="width:100%;padding:10px 12px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:14px;font-family:inherit"></div>
</div>
<div><label style="font-size:12px;font-weight:600;color:#334155;display:block;margin-bottom:4px">Anteckning</label><textarea id="ciCallbackNote" rows="2" placeholder="T.ex. 'Ring innan', 'Prata med frun'" style="width:100%;padding:10px 12px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:14px;font-family:inherit;resize:vertical"></textarea></div>
</div>
<button onclick="saveCheckinCallback()" style="width:100%;margin-top:12px;padding:12px;background:#3b82f6;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit">Spara & lägg i kalender</button>
</div>
</div>
</div>
</div>
<!-- LEADS -->
<div class="page-content" id="page-leads">
<h1 class="page-title">Leads</h1>
<p class="page-subtitle">Leads från fältsälj och inkommande förfrågningar</p>
<div style="padding:40px;text-align:center;color:#94a3b8;font-size:14px">Kommer snart</div>
</div>
<!-- KUNDER -->
<div class="page-content" id="page-kunder">
<h1 class="page-title">Kunder</h1>
<p class="page-subtitle">Kundregister <span id="customerCount" style="color:#94a3b8;font-weight:400;font-size:13px"></span></p>
<div style="display:flex;gap:10px;margin-bottom:16px;align-items:center;flex-wrap:wrap">
<button class="dummy-btn" onclick="showNewCustomerModal()">+ Ny kund</button>
<input type="text" id="custCityFilter" list="custCityList" placeholder="Filtrera stad..." oninput="saveCustFilters();applyCustomerFilters()" style="padding:8px 12px;border:1px solid #e5e7eb;border-radius:8px;font-size:13px;font-family:inherit;width:160px">
<datalist id="custCityList"></datalist>
<select id="custStatusFilter" onchange="saveCustFilters();applyCustomerFilters()" style="padding:8px 12px;border:1px solid #e5e7eb;border-radius:8px;font-size:13px;font-family:inherit;min-width:140px">
<option value="">Alla statusar</option>
<option value="offert">Ny order</option>
<option value="order">Godkänd</option>
<option value="projektering">Projektering</option>
<option value="bestallning">Beställning</option>
<option value="leverans">Leverans</option>
<option value="montering">Montering</option>
<option value="fardigstall">Färdigställt</option>
<option value="anger">Ånger</option>
<option value="ej_godkand">Ej godkänd</option>
<option value="avbrott">Avbrott</option>
</select>
<select id="custSaljStatusFilter" onchange="saveCustFilters();applyCustomerFilters()" style="padding:8px 12px;border:1px solid #e5e7eb;border-radius:8px;font-size:13px;font-family:inherit;min-width:140px">
<option value="">Alla säljstatus</option>
<option value="godkand">Godkänd</option>
<option value="anger">ÅNGER</option>
<option value="inte_godkand">Inte godkänd</option>
<option value="ej_hanterad">Ej hanterad</option>
<option value="avvakta">Avvakta</option>
<option value="underpris">Underpris</option>
<option value="halv_provis">Halv provis</option>
<option value="ingen_provis">Ingen provis</option>
<option value="raddad_anger">Räddad ånger</option>
<option value="senare_loneunderlag">Senare löneunderlag</option>
</select>
<select id="custRegionFilter" onchange="saveCustFilters();applyCustomerFilters()" style="padding:8px 12px;border:1px solid #e5e7eb;border-radius:8px;font-size:13px;font-family:inherit;min-width:140px">
<option value="">Alla regioner</option>
</select>
<input type="date" id="custDateFrom" onchange="saveCustFilters();applyCustomerFilters()" style="padding:8px 12px;border:1px solid #e5e7eb;border-radius:8px;font-size:13px;font-family:inherit" title="Affärer från datum">
<input type="date" id="custDateTo" onchange="saveCustFilters();applyCustomerFilters()" style="padding:8px 12px;border:1px solid #e5e7eb;border-radius:8px;font-size:13px;font-family:inherit" title="Affärer till datum">
<button onclick="clearCustFilters()" style="padding:8px 12px;border:1px solid #e5e7eb;border-radius:8px;font-size:12px;font-family:inherit;background:#f8fafc;color:#64748b;cursor:pointer" title="Rensa filter">✕ Rensa</button>
</div>
<table id="customerDT" class="display" style="width:100%">
<thead><tr><th>ID</th><th>Namn</th><th>Stad</th><th>Region</th><th>Säljare</th><th>Datum</th><th>Status</th><th>Status sälj</th><th>Status order</th><th>Antal</th><th>Totalvärde</th></tr></thead>
<tbody id="customerTableBody"></tbody>
</table>
</div>
<!-- KUNDDETALJ (full page) -->
<div class="page-content" id="page-customer-detail" style="max-width:1400px">
</div>
<!-- PROJEKTERING -->
<div class="page-content" id="page-projektering">
<div style="margin-bottom:12px">
<div style="display:flex;align-items:center;gap:16px;margin-bottom:4px">
<div>
<h1 class="page-title" style="margin-bottom:2px">Projektflöde</h1>
<p class="page-subtitle" style="margin:0">Pipeline - från order till färdigställt</p>
</div>
</div>
<div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px">
<div id="pipelineAkut" style="background:#fef9c3;border:1.5px solid #f59e0b;border-radius:10px;padding:5px 12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px" onclick="toggleAkutExpand()">
<span style="font-size:13px">🔥</span>
<span style="font-size:11px;font-weight:700;color:#b45309">Akut</span>
<span id="akutBadge" style="font-size:10px;font-weight:600;background:#ef4444;color:#fff;padding:1px 6px;border-radius:8px">0</span>
<span id="akutSum" style="font-size:10px;color:#b45309"></span>
</div>
<div id="pipelineAvbrott" style="background:#fef2f2;border:1.5px solid #fca5a5;border-radius:10px;padding:5px 12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px" onclick="toggleAvbrottExpand()">
<span style="font-size:11px;font-weight:700;color:#ef4444">Avbrott</span>
<span id="avbrottBadge" style="font-size:10px;font-weight:600;background:#ef4444;color:#fff;padding:1px 6px;border-radius:8px">0</span>
<span id="avbrottSum" style="font-size:10px;color:#ef4444"></span>
</div>
</div>
<div id="avbrottList" style="display:none;margin-bottom:8px;max-height:300px;overflow-y:auto;background:#fef2f2;border:1px solid #fca5a5;border-radius:10px;padding:10px"></div>
<div id="akutList" style="display:none"></div>
<div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:4px">
<input type="date" id="pipelineDateFrom" onchange="loadDealPipeline()" style="padding:5px 8px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:12px;font-family:inherit" title="Från datum">
<span style="font-size:12px;color:#94a3b8">–</span>
<input type="date" id="pipelineDateTo" onchange="loadDealPipeline()" style="padding:5px 8px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:12px;font-family:inherit" title="Till datum">
<select id="pipelineRegion" onchange="loadDealPipeline()" style="padding:5px 8px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:12px;font-family:inherit">
<option value="">Alla regioner</option>
</select>
<select id="pipelineUE" onchange="loadDealPipeline()" style="padding:5px 8px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:12px;font-family:inherit;max-width:200px">
<option value="">Alla entreprenörer</option>
</select>
<select id="pipelineProduct" onchange="loadDealPipeline()" style="padding:5px 8px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:12px;font-family:inherit">
<option value="">Alla produkter</option>
</select>
<button onclick="clearPipelineFilters()" style="padding:5px 10px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:12px;cursor:pointer;background:#fff;font-family:inherit;color:#64748b">Rensa</button>
</div>
</div>
<div style="overflow-x:auto;padding-bottom:16px">
<div style="display:flex;gap:6px;min-width:max-content" id="pipelineColumns"></div>
</div>
</div>
<!-- UNDERENTREPRENÖRER -->
<div class="page-content" id="page-ue">
<h1 class="page-title">Underentreprenörer</h1>
<p class="page-subtitle">Alla UE-företag och kontaktpersoner <span id="ueCount" style="color:#94a3b8;font-weight:400;font-size:13px"></span></p>
<div style="display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;align-items:center">
<input type="text" id="ueSearch" placeholder="Sök företag, kontakt, telefon..." oninput="filterUE()" style="padding:8px 14px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;font-family:inherit;min-width:250px">
<select id="ueSpecFilter" onchange="filterUE()" style="padding:8px 14px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;font-family:inherit">
<option value="">Alla specialiteter</option>
</select>
</div>
<div id="ueContainer"></div>
</div>
<!-- INKÖP -->
<div class="page-content" id="page-inkop">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px">
<div>
<h1 class="page-title" style="margin-bottom:2px">Inköp</h1>
<p class="page-subtitle" style="margin:0">Inköpsordrar och materialbeställningar</p>
</div>
</div>
<!-- Tabs -->
<div style="display:flex;gap:0;border-bottom:2px solid #e5e7eb;margin-bottom:16px">
<button id="inkopTab1" onclick="switchInkopTab('deals')" style="padding:10px 24px;font-size:14px;font-weight:700;border:none;border-bottom:3px solid #024550;background:none;color:#024550;cursor:pointer;margin-bottom:-2px;font-family:inherit">Att beställa</button>
<button id="inkopTab2" onclick="switchInkopTab('orders')" style="padding:10px 24px;font-size:14px;font-weight:600;border:none;border-bottom:3px solid transparent;background:none;color:#94a3b8;cursor:pointer;margin-bottom:-2px;font-family:inherit">Inköpsordrar</button>
</div>
<!-- Tab 1: Deals needing purchase -->
<div id="inkopDealsTab">
<div style="display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;align-items:center">
<select id="inkopProductType" onchange="loadInkopDeals()" style="padding:8px 14px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;font-family:inherit;min-width:180px">
<option value="">Alla typer</option>
<option value="fonster">Fönster</option>
<option value="tak">Tak</option>
<option value="solceller">Solceller</option>
<option value="sol_batteri">Sol & Batteri</option>
<option value="batteri">Batteri</option>
<option value="luftvarmepump">Luftvärmepump</option>
<option value="laddbox">Laddbox</option>
<option value="isolering">Isolering</option>
<option value="taktvatt">Taktvätt</option>
<option value="utvandig_malning">Utvändig målning</option>
<option value="fagelband">Fågelband</option>
</select>
<select id="inkopDealStatus" onchange="loadInkopDeals()" style="padding:8px 14px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;font-family:inherit">
<option value="">Alla statusar</option>
<option value="projektering">Projektering</option>
<option value="bestallning">Beställning</option>
<option value="leverans">Leverans</option>
<option value="montering">Montering</option>
<option value="besiktning">Besiktning</option>
<option value="order">Order</option>
</select>
<select id="inkopPoFilter" onchange="loadInkopDeals()" style="padding:8px 14px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;font-family:inherit">
<option value="">Alla</option>
<option value="without_po" selected>Utan inköpsorder</option>
<option value="with_po">Med inköpsorder</option>
</select>
</div>
<div id="inkopDealsStats" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:16px"></div>
<table id="inkopDealsDT" class="display" style="width:100%">
<thead>
<tr>
<th style="width:30px"><input type="checkbox" id="inkopSelectAll" onclick="toggleAllDealSelect(this.checked)" style="width:16px;height:16px;cursor:pointer"></th>
<th>Affär</th>
<th>Kund</th>
<th>Adress</th>
<th>Produkter</th>
<th>Säljdatum</th>
<th>Status</th>
<th>Ordervärde</th>
<th>Inköp</th>
</tr>
</thead>
<tbody id="inkopDealsBody"></tbody>
</table>
</div>
<!-- Tab 2: Existing POs -->
<div id="inkopOrdersTab" style="display:none">
<div style="display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;align-items:center">
<select id="inkopOrderType" onchange="filterInkopOrders()" style="padding:8px 14px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;font-family:inherit;min-width:180px">
<option value="">Alla typer</option>
<option value="fonster">Fönster</option>
<option value="tak">Tak</option>
<option value="solceller">Solceller</option>
<option value="sol_batteri">Sol & Batteri</option>
<option value="batteri">Batteri</option>
<option value="luftvarmepump">Luftvärmepump</option>
</select>
<select id="inkopOrderStatus" onchange="filterInkopOrders()" style="padding:8px 14px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;font-family:inherit">
<option value="">Alla statusar</option>
<option value="draft">Utkast</option>
<option value="ordered">Beställd</option>
<option value="confirmed">Bekräftad</option>
<option value="shipped">Skickad</option>
<option value="delivered">Levererad</option>
<option value="cancelled">Avbruten</option>
</select>
<select id="inkopOrderSupplier" onchange="filterInkopOrders()" style="padding:8px 14px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;font-family:inherit">
<option value="">Alla leverantörer</option>
</select>
</div>
<div id="inkopOrderStats" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:16px"></div>
<table id="inkopOrdersDT" class="display" style="width:100%">
<thead>
<tr>
<th>Ordernr</th>
<th>Leverantör</th>
<th>Kund / Affär</th>
<th>Orderdatum</th>
<th>Förv. leverans</th>
<th>Status</th>
<th>Belopp</th>
<th>Rader</th>
</tr>
</thead>
<tbody id="inkopOrdersBody"></tbody>
</table>
</div>
</div>
<!-- LEVERANTÖRER -->
<div class="page-content" id="page-leverantorer">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px">
<div>
<h1 class="page-title" style="margin-bottom:2px">Leverantörer</h1>
<p class="page-subtitle" style="margin:0">Materialleverantörer och artikelkatalog</p>
</div>
<button onclick="showNewSupplierModal()" style="padding:10px 20px;border-radius:10px;font-size:13px;font-weight:700;border:none;background:linear-gradient(135deg,#024550,#036b78);color:#fff;cursor:pointer">+ Ny leverantör</button>
</div>
<div id="leverantorContainer"></div>
</div>
<!-- PROJEKT/AFFÄRER -->
<div class="page-content" id="page-projekt">
<h1 class="page-title">Affärer</h1>
<p class="page-subtitle">Pipeline och affärsöversikt</p>
<!-- Stats row -->
<div id="dealStatsRow" style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px"> <div style="display:flex;align-items:center;gap:5px;padding:5px 12px;background:#fefce8;border:1px solid #fde68a;border-radius:8px"><span style="width:8px;height:8px;border-radius:50%;background:#eab308"></span><span style="font-size:12px;font-weight:600;color:#92400e">Offert</span><span style="font-size:12px;font-weight:700;color:#92400e" id="dStatOffert">0</span><span style="font-size:10px;color:#a16207" id="dSumOffert"></span></div> <div style="display:flex;align-items:center;gap:5px;padding:5px 12px;background:#f0fdf4;border:1px solid #86efac;border-radius:8px"><span style="width:8px;height:8px;border-radius:50%;background:#16a34a"></span><span style="font-size:12px;font-weight:600;color:#166534">Order</span><span style="font-size:12px;font-weight:700;color:#166534" id="dStatOrder">0</span><span style="font-size:10px;color:#15803d" id="dSumOrder"></span></div> <div style="display:flex;align-items:center;gap:5px;padding:5px 12px;background:#eff6ff;border:1px solid #93c5fd;border-radius:8px"><span style="width:8px;height:8px;border-radius:50%;background:#3b82f6"></span><span style="font-size:12px;font-weight:600;color:#1e40af">Pågående</span><span style="font-size:12px;font-weight:700;color:#1e40af" id="dStatPagaende">0</span><span style="font-size:10px;color:#1d4ed8" id="dSumPagaende"></span></div> <div style="display:flex;align-items:center;gap:5px;padding:5px 12px;background:#f0fdf4;border:1px solid #6ee7b7;border-radius:8px"><span style="width:8px;height:8px;border-radius:50%;background:#10b981"></span><span style="font-size:12px;font-weight:600;color:#065f46">Klart</span><span style="font-size:12px;font-weight:700;color:#065f46" id="dStatFardig">0</span><span style="font-size:10px;color:#047857" id="dSumFardig"></span></div> <div style="display:flex;align-items:center;gap:5px;padding:5px 12px;background:#fef2f2;border:1px solid #fca5a5;border-radius:8px"><span style="width:8px;height:8px;border-radius:50%;background:#ef4444"></span><span style="font-size:12px;font-weight:600;color:#991b1b">Ånger</span><span style="font-size:12px;font-weight:700;color:#991b1b" id="dStatLost">0</span><span style="font-size:10px;color:#b91c1c" id="dSumLost"></span></div> </div>
<!-- Toolbar -->
<div style="display:flex;gap:10px;margin-bottom:16px;align-items:center;flex-wrap:wrap">
<button class="dummy-btn" onclick="showNewDealModal()">+ Ny affär</button>
<select id="dealFilterStatus" onchange="reloadDeals()" 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="offert">Offert</option>
<option value="order">Order</option>
<option value="projektering">Projektering</option>
<option value="bestallning">Beställning</option>
<option value="leverans">Leverans</option>
<option value="montering">Montering</option>
<option value="besiktning">Besiktning</option>
<option value="fardigstall">Färdigställt</option>
<option value="anger">Ånger</option>
<option value="ej_godkand">Ej godkänd</option>
<option value="avbrott">Avbrott</option>
</select>
<select id="dealFilterProduct" onchange="reloadDeals()" style="padding:8px 12px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;font-family:inherit;background:#fff">
<option value="">Alla produkter</option>
<option value="solceller">Solceller</option>
<option value="sol_batteri">Sol & Batteri</option>
<option value="batteri">Batteri</option>
<option value="tak">Tak</option>
<option value="fonster">Fönster</option>
<option value="luftvarmepump">Luftvärmepump</option>
<option value="laddbox">Laddbox</option>
<option value="isolering">Isolering</option>
<option value="taktvatt">Taktvätt</option>
<option value="utvandig_malning">Utvändig målning</option>
<option value="fagelband">Fågelband</option>
</select>
<select id="dealFilterMonth" onchange="reloadDeals()" style="padding:8px 12px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;font-family:inherit;background:#fff">
<option value="">Alla månader</option>
</select>
<select id="dealFilterSaljStatus" onchange="reloadDeals()" style="padding:8px 12px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;font-family:inherit;background:#fff">
<option value="">Alla säljstatus</option>
<option value="godkand">Godkänd</option>
<option value="anger">ÅNGER</option>
<option value="inte_godkand">Inte godkänd</option>
<option value="ej_hanterad">Ej hanterad</option>
<option value="avvakta">Avvakta</option>
<option value="underpris">Underpris</option>
<option value="halv_provis">Halv provis</option>
<option value="ingen_provis">Ingen provis</option>
<option value="raddad_anger">Räddad ånger</option>
<option value="anger_fraga">Ånger?</option>
<option value="senare_loneunderlag">Senare löneunderlag</option>
</select>
<select id="dealFilterRegion" onchange="reloadDeals()" style="padding:8px 12px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;font-family:inherit;background:#fff">
<option value="">Alla regioner</option>
</select>
</div>
<!-- Table view (DataTable) -->
<div id="dealTableView">
<table id="dealsDT" class="display" style="width:100%">
<thead><tr>
<th>Affärsnr</th><th>Kund</th><th>Produkter</th><th style="text-align:right">Ordervärde</th><th>Säljare</th><th>Datum</th><th>Status</th><th>Status sälj</th><th>Status order</th><th>Region</th>
</tr></thead>
<tbody></tbody>
</table>
</div>
</div>
<!-- PRODUKTKATALOG -->
<div class="page-content" id="page-produkter">
<h1 class="page-title">Produktkatalog</h1>
<p class="page-subtitle">Utforska vårt sortiment av produkter</p>
<div class="catalog-header">
<label class="config-label">Kategori:</label>
<select class="product-select" id="catalogCatSelect" onchange="filterCatalog()" style="min-width:200px">
<option value="">Alla produkter</option>
</select>
<div style="flex:1"></div>
<div style="position:relative;margin-right:12px"><svg viewBox="0 0 24 24" style="width:16px;height:16px;stroke:#94a3b8;fill:none;stroke-width:2;position:absolute;left:10px;top:50%;transform:translateY(-50%)"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg><input id="catalogSearch" type="text" placeholder="Sök produkt..." oninput="filterCatalog()" autocomplete="off" style="padding:8px 12px 8px 32px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:13px;font-family:inherit;width:200px;outline:none;transition:border-color .15s" onfocus="this.style.borderColor='#024550'" onblur="this.style.borderColor='#e5e7eb'"></div>
<span id="catalogCount" style="font-size:13px;color:#94a3b8;margin-right:12px"></span>
<div style="display:flex;gap:4px;margin-right:8px">
<button id="catViewGrid" onclick="setCatalogView('grid')" style="padding:6px 8px;border:1px solid #e5e7eb;border-radius:6px;background:#024550;color:#fff;cursor:pointer" title="Rutnät"><svg viewBox="0 0 24 24" style="width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg></button>
<button id="catViewList" onclick="setCatalogView('list')" style="padding:6px 8px;border:1px solid #e5e7eb;border-radius:6px;background:#fff;color:#64748b;cursor:pointer" title="Lista"><svg viewBox="0 0 24 24" style="width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg></button>
</div>
<button onclick="showCategoryEditor()" style="padding:8px 16px;background:#f59e0b;color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:6px"><svg viewBox="0 0 24 24" style="width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="9"/></svg>Kategorier</button>
<button onclick="showAddProductModal()" style="padding:8px 16px;background:#024550;color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:6px"><svg viewBox="0 0 24 24" style="width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>Ny produkt</button>
</div>
<div class="catalog-grid" id="catalogGrid"></div>
</div>
<!-- KONFIGURATOR -->
<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="showKalkylConfig()">+ 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>
<!-- 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>
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:20px;margin-bottom:20px;display:grid;grid-template-columns:1fr 1fr;gap:16px">
<div>
<label style="font-size:11px;font-weight:600;color:#64748b;display:block;margin-bottom:4px">Kalkylnamn</label>
<input type="text" id="cfgQuoteName" placeholder="T.ex. Taktvätt Villa Andersson" style="width:100%;padding:10px 14px;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:4px">Kund</label>
<div style="position:relative">
<input type="text" id="cfgCustomerSearch" placeholder="Sök kund eller lämna tomt..." oninput="cfgSearchCustomer(this.value)" onfocus="cfgSearchCustomer(this.value)" style="width:100%;padding:10px 14px;border:1.5px solid #e5e7eb;border-radius:8px;font-size:14px;font-family:inherit;box-sizing:border-box">
<div id="cfgCustomerDropdown" style="display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);max-height:250px;overflow-y:auto;z-index:100;margin-top:4px"></div>
</div>
<div id="cfgSelectedCustomer" style="display:none;margin-top:8px;padding:10px 14px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;font-size:13px;display:none">
<div style="display:flex;justify-content:space-between;align-items:center">
<div><span id="cfgCustName" style="font-weight:600"></span><br><span id="cfgCustInfo" style="font-size:11px;color:#64748b"></span></div>
<button onclick="cfgClearCustomer()" style="background:none;border:none;cursor:pointer;color:#ef4444;font-size:18px;padding:4px">×</button>
</div>
</div>
</div>
</div>
<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">
<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="display:grid;grid-template-columns:1fr;gap:16px" id="cfgProductGrid"></div>
</div>
<div id="batteriConfigView" 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: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 batteri</h3>
</div>
<div id="batProductCards" style="display:grid;gap:10px"></div>
</div>
<div id="batVariantSection" style="display:none"><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 storlek</h3></div><div id="batVariantChips" style="display:flex;flex-wrap:wrap;gap:8px"></div></div></div>
<div id="batTillvalSection" style="display:none"><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">Tillval</h3></div><div id="batTillvalCards" style="display:grid;grid-template-columns:1fr 1fr;gap:8px"></div></div></div>
</div>
<div style="position:sticky;top:20px"><div class="price-card"><div class="price-header">Prissammanställning</div><div class="price-rows" id="batPriceRows" style="padding:16px"><div style="color:#94a3b8;font-size:13px;text-align:center">Välj ett batteri</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">Grönt teknik</button><button onclick="setBatDeduction(rot)" class="bat-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">ROT</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">Inget</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 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"><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</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="showAddToKalkyl(batteri)" 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">Lägg till kalkyl</button></div></div></div>
</div>
</div>
<div id="laddboxConfigView" 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: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="lbProductCards" style="display:grid;gap:10px"></div>
</div>
<div id="lbTillvalSection" style="display:none">
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:24px">
<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">2</div>
<h3 style="font-size:16px;font-weight:700;color:#1a1a1a;margin:0">Tillval</h3>
</div>
<div id="lbTillvalCards" style="display:grid;grid-template-columns:1fr 1fr;gap:8px"></div>
</div>
</div>
</div>
<div style="position:sticky;top:20px"><div class="price-card"><div class="price-header">Prissammanställning</div><div class="price-rows" id="lbPriceRows" style="padding:16px"><div style="color:#94a3b8;font-size:13px;text-align:center">Välj en laddbox</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">Grönt teknik</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">Inget</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 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"><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</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="showAddToKalkyl('laddbox')" 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">Lägg till kalkyl</button></div></div></div>
</div>
</div>
<div id="taktvatConfigView" 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"><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">Taktvätt</h3></div><div id="ttProductImg" style="margin-bottom:16px;border-radius:10px;overflow:hidden;max-height:300px"></div><div><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>
<div style="position:sticky;top:20px"><div class="price-card"><div class="price-header">Prissammanställning</div><div class="price-rows" id="ttPriceRows" style="padding:16px"><div style="color:#94a3b8;font-size:13px;text-align:center">Ange takyta för att se pris</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="setTtDeduction(rot)" class="tt-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">ROT-avdrag</button><button onclick="setTtDeduction(none)" class="tt-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">Inget</button></div></div><div style="display:flex;justify-content:space-between;align-items:center"><span id="ttDeductLabel" style="font-size:12px;font-weight:700;color:#059669">ROT-AVDRAG</span><span id="ttDeductKr" style="font-size:16px;font-weight:700;color:#059669">0 kr</span></div><div 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="setTtOwners(1)" class="tt-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="setTtOwners(2)" class="tt-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="ttPrTotal">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"><button onclick="setTtFinYears(0)" class="tt-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</button><button onclick="setTtFinYears(5)" class="tt-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="setTtFinYears(10)" class="tt-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="setTtFinYears(15)" class="tt-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="ttFinInfo" style="font-size:10px;color:#64748b">(15 år, 4.9%)</span></span><span id="ttPrMonthly" style="font-size:20px;font-weight:700;color:#1e40af">0 kr/mån</span></div></div><button onclick="showAddToKalkyl(taktvatt)" 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">Lägg till kalkyl</button></div></div></div>
</div>
</div>
<div id="varmepumpConfigView" 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: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="vpProductCards" style="display:grid;gap:10px"></div>
</div>
<div id="vpTillvalSection" style="display:none"><div style="background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:24px"><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">2</div><h3 style="font-size:16px;font-weight:700;color:#1a1a1a;margin:0">Tillval</h3></div><div id="vpTillvalCards" style="display:grid;grid-template-columns:1fr 1fr;gap:8px"></div></div></div>
</div>
<div style="position:sticky;top:20px"><div class="price-card"><div class="price-header">Prissammanställning</div><div class="price-rows" id="vpPriceRows" style="padding:16px"><div style="color:#94a3b8;font-size:13px;text-align:center">Välj en värmepump</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('rot')" class="vp-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">ROT-avdrag<br><span style="font-size:9px;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">Inget</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">ROT-AVDRAG</span><span id="vpDeductKr" style="font-size:16px;font-weight:700;color:#059669">0 kr</span></div><div 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"><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</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="showAddToKalkyl('varmepump')" 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">Lägg till kalkyl</button></div></div></div>
</div>
</div>
// === VÄRMEPUMP KONFIGURATOR (datadrivet) ===
let _vpProducts=[], _vpSelectedProduct=null, _vpTillval=[], _vpDeduction='rot', _vpOwners=1, _vpFinYears=15;
async function initVpConfig(){ if(!catalogProducts.length) await loadCatalogFromDB();
if(!_vpProducts.length){
const products = typeof catalogProducts!=='undefined' ? catalogProducts : [];
_vpProducts = products.filter(p=>p.cat==='varmepump');
}
renderVpProducts();
}
function renderVpProducts(){
const c=document.getElementById('vpProductCards');if(!c)return;
const fmtO={minimumFractionDigits:2,maximumFractionDigits:2};
c.innerHTML=_vpProducts.map((p,i)=>{
const sel=_vpSelectedProduct&&_vpSelectedProduct.id===p.id;
const img=p.img?'<img src="'+p.img+'" style="width:60px;height:60px;object-fit:cover;border-radius:8px">':'<div style="width:60px;height:60px;background:#f1f5f9;border-radius:8px"></div>';
const rotBadge=p.rotEligible?'<span style="font-size:9px;background:#dbeafe;color:#1e40af;padding:2px 6px;border-radius:4px;font-weight:600">ROT-avdrag</span>':'';
return '<div onclick="selectVpProduct('+i+')" style="padding:14px 16px;border:2px solid '+(sel?'#3b82f6':'#e5e7eb')+';border-radius:10px;cursor:pointer;display:flex;align-items:center;gap:12px;background:'+(sel?'#f0f9ff':'#fff')+'">'
+img+'<div style="flex:1"><div style="font-weight:600;font-size:14px">'+p.name+'</div><div style="font-size:11px;color:#64748b">'+(p.desc||'')+'</div>'+rotBadge+'</div>'
+'<div style="font-weight:700;font-size:14px;color:#024550">'+p.price.toLocaleString("sv-SE",fmtO)+' kr</div>'
+(sel?'<div style="color:#3b82f6;font-size:20px">\u2713</div>':'')+'</div>';
}).join('');
}
async function selectVpProduct(idx){
_vpSelectedProduct=_vpProducts[idx];
renderVpProducts();
await loadVpTillval(_vpSelectedProduct.id);
updateVpCalc();
}
async function loadVpTillval(productId){
_vpTillval=[];
try{
const allP=await _spGetAllProducts();
const lr=await fetch('/api/products.php?services_for='+productId);const ld=await lr.json();
if(!ld.success)return;
const lm={};(ld.services||[]).forEach(s=>{lm[s.service_id]={default_on:parseInt(s.default_on),hidden:parseInt(s.hidden||0)};});
_vpTillval=allP.filter(s=>lm[s.id]).map(s=>{
let specs=null;try{if(s.specs)specs=typeof s.specs==='string'?JSON.parse(s.specs):s.specs;}catch(e){}
const lnk=lm[s.id]||{};const isOblig=parseInt(s.tillval_obligatorisk)||0;const isHid=parseInt(s.tillval_hidden)||0;
return{id:s.id,name:s.name,price:parseFloat(s.price),unit:s.unit||'st',checked:!!(lnk.default_on||isOblig),included:!!isOblig,hidden:!!(lnk.hidden||isHid),rotEligible:parseInt(s.rot_eligible)||0,greenTechEligible:parseInt(s.green_tech_eligible)||0,specs:specs,userQty:0,childTillval:[]};
});
for(const tv of _vpTillval){const cr=await fetch('/api/products.php?services_for='+tv.id);const cd=await cr.json();if(cd.success&&cd.services&&cd.services.length){tv.childTillval=allP.filter(p=>cd.services.map(s=>s.service_id).includes(p.id)).map(p=>({id:p.id,name:p.name,price:parseFloat(p.price),obligatorisk:parseInt(p.tillval_obligatorisk)||0,rotEligible:parseInt(p.rot_eligible)||0}));}}
}catch(e){console.error(e);}
renderVpTillval();
}
function renderVpTillval(){
const sec=document.getElementById('vpTillvalSection');const c=document.getElementById('vpTillvalCards');
const visible=_vpTillval.filter(tv=>!tv.hidden);
if(!visible.length){if(sec)sec.style.display='none';return;}
if(sec)sec.style.display='block';if(!c)return;
c.innerHTML=visible.map(tv=>{
const ri=_vpTillval.indexOf(tv);
let qtyInput='';if(tv.unit&&tv.unit!=='st'&&tv.checked){qtyInput='<div style="display:flex;align-items:center;gap:6px;margin-top:6px"><input type="number" min="0" value="'+(tv.userQty||'')+'" placeholder="Antal" oninput="_vpTillval['+ri+'].userQty=parseFloat(this.value)||0;updateVpCalc()" style="width:70px;padding:5px 8px;border:1px solid #e5e7eb;border-radius:6px;font-size:12px"><span style="font-size:11px;color:#64748b">'+tv.unit+'</span></div>';}
return '<div style="padding:10px 14px;background:'+(tv.checked?'#f0fdf4':'#f8f9fa')+';border:1px solid '+(tv.checked?'#bbf7d0':'#e5e7eb')+';border-radius:10px"><div style="display:flex;align-items:center;gap:8px;cursor:pointer" onclick="toggleVpTillval('+ri+')"><input type="checkbox" '+(tv.checked?'checked':'')+' '+(tv.included?'disabled':'')+' style="width:18px;height:18px;accent-color:#059669;pointer-events:none"><span style="flex:1;font-size:13px;font-weight:600">'+tv.name+(tv.unit!=='st'?' <span style="font-size:10px;color:#94a3b8">('+tv.price+' kr/'+tv.unit+')</span>':'')+'</span><span style="font-size:13px;font-weight:700;color:'+(tv.checked?'#059669':'#94a3b8')+'">'+tv.price.toLocaleString("sv-SE")+' kr</span></div>'+qtyInput+'</div>';
}).join('');
}
function toggleVpTillval(idx){if(_vpTillval[idx].included)return;_vpTillval[idx].checked=!_vpTillval[idx].checked;renderVpTillval();updateVpCalc();}
function setVpDeduction(t){_vpDeduction=t;cfgSetBtns('deduct','vp-deduct-btn',t);updateVpCalc();}
function setVpOwners(n){_vpOwners=n;cfgSetBtns('owner','vp-owner-btn',n);updateVpCalc();}
function setVpFinYears(y){_vpFinYears=y;cfgSetBtns('fin','vp-fin-btn',y);updateVpCalc();}
function updateVpCalc(){
const el=document.getElementById('vpPriceRows');if(!el||!_vpSelectedProduct)return;
const p=_vpSelectedProduct;const fmtO={minimumFractionDigits:2,maximumFractionDigits:2};
let productPrice=p.price;
let hiddenTotal=0,hiddenItems=[];
_vpTillval.filter(tv=>tv.hidden&&tv.checked).forEach(tv=>{hiddenTotal+=tv.price;hiddenItems.push({name:tv.name,price:tv.price,rotEligible:tv.rotEligible});if(tv.childTillval)tv.childTillval.filter(ch=>ch.obligatorisk).forEach(ch=>{hiddenTotal+=ch.price;hiddenItems.push({name:ch.name,price:ch.price,rotEligible:ch.rotEligible});});});
let tillvalTotal=0,tillvalItems=[];
_vpTillval.filter(tv=>!tv.hidden&&tv.checked).forEach(tv=>{const eq=tv.unit!=='st'&&tv.userQty>0?tv.userQty:1;const t=tv.price*eq;tillvalTotal+=t;tillvalItems.push({name:tv.name,price:t});});
let total=productPrice+tillvalTotal;
let rotAmount=0;
if(_vpDeduction==='rot'){hiddenItems.forEach(hi=>{if(hi.rotEligible)rotAmount+=Math.round(hi.price*0.30);});rotAmount=Math.min(rotAmount,_vpOwners*50000);}
let attBetala=total-rotAmount;
let html='';let arbete=productPrice-hiddenTotal;
if(hiddenTotal>0){
html+='<div style="display:flex;justify-content:space-between;margin-bottom:6px"><span style="font-size:13px;color:#64748b">'+p.name+'</span><span style="font-size:15px;font-weight:600">'+arbete.toLocaleString("sv-SE",fmtO)+' kr</span></div>';
hiddenItems.forEach(hi=>{html+='<div style="display:flex;justify-content:space-between;margin-bottom:6px"><span style="font-size:13px;color:#64748b">'+hi.name+'</span><span style="font-size:15px;font-weight:600">'+hi.price.toLocaleString("sv-SE",fmtO)+' kr</span></div>';});
html+='<div style="display:flex;justify-content:space-between;margin-bottom:6px;padding-top:6px;border-top:1px solid #e5e7eb"><span style="font-size:13px;font-weight:600">Totalt</span><span style="font-size:15px;font-weight:700">'+productPrice.toLocaleString("sv-SE",fmtO)+' kr</span></div>';
}else{html+='<div style="display:flex;justify-content:space-between;margin-bottom:6px"><span style="font-size:13px;color:#64748b">'+p.name+'</span><span style="font-size:15px;font-weight:600">'+productPrice.toLocaleString("sv-SE",fmtO)+' kr</span></div>';}
if(rotAmount>0)html+='<div style="display:flex;justify-content:space-between;margin-bottom:6px"><span style="font-size:13px;color:#0284c7">ROT-avdrag (30% av arbete)</span><span style="font-size:15px;font-weight:600;color:#0284c7">-'+rotAmount.toLocaleString("sv-SE",fmtO)+' kr</span></div>';
if(tillvalItems.length){html+='<div style="font-size:11px;font-weight:600;color:#94a3b8;text-transform:uppercase;margin:4px 0">Tillval</div>';tillvalItems.forEach(ti=>{html+='<div style="display:flex;justify-content:space-between;margin-bottom:4px;padding-left:8px"><span style="font-size:12px;color:#64748b">'+ti.name+'</span><span style="font-size:13px;font-weight:600">+'+ti.price.toLocaleString("sv-SE",fmtO)+' kr</span></div>';});}
el.innerHTML=html;
document.getElementById('vpDeductLabel').textContent=_vpDeduction==='rot'?'ROT-AVDRAG':'INGET AVDRAG';
document.getElementById('vpDeductKr').textContent=rotAmount?'-'+rotAmount.toLocaleString("sv-SE",fmtO)+' kr':'0 kr';
document.getElementById('vpPrTotal').textContent=attBetala.toLocaleString("sv-SE",fmtO)+' kr';
document.getElementById('vpFinInfo').textContent=_vpFinYears?'('+_vpFinYears+' \u00e5r, 4.9%)':'';
document.getElementById('vpPrMonthly').textContent=_vpFinYears?cfgMonthly(attBetala,_vpFinYears).toLocaleString("sv-SE")+' kr/m\u00e5n':'Ej finansiering';
}