<div class="page-content" id="page-personal">
<!-- LIST VIEW -->
<div id="staffListView">
<h1 class="page-title">Personal</h1>
<p class="page-subtitle">Hantera teammedlemmar och roller <span id="staffCount" style="color:#94a3b8;font-weight:400;font-size:13px"></span></p>
<div style="display:flex;gap:10px;margin-bottom:16px;align-items:center">
<button class="dummy-btn" onclick="showStaffModal()">+ Lägg till personal</button>
<select id="staffRoleFilter" onchange="loadStaff()" style="padding:8px 12px;border:1px solid #e5e7eb;border-radius:8px;font-size:13px;font-family:inherit">
<option value="">Alla roller</option>
<option value="admin">Admin</option>
<option value="saljare">Säljare</option>
<option value="saljchef">Säljchef</option>
<option value="installator">Installatör</option>
<option value="projektledare">Projektledare</option>
<option value="ekonomi">Ekonomi</option>
</select>
</div>
<table id="staffDT" class="display" style="width:100%">
<thead><tr><th>Namn</th><th>E-post</th><th>Roll</th><th>Status</th><th style="text-align:right">Försäljning</th></tr></thead>
<tbody></tbody>
</table>
</div>
<!-- DETAIL VIEW -->
<div id="staffDetailView" style="display:none">
<div style="display:flex;align-items:center;gap:12px;margin-bottom:20px">
<button onclick="closeStaffDetail()" style="background:none;border:none;cursor:pointer;font-size:20px;color:#64748b;padding:4px 8px">←</button>
<h1 class="page-title" id="staffDetailName" style="margin:0"></h1>
<span id="staffDetailRole" class="status-badge green" style="margin-left:8px"></span>
</div>
<!-- Tabs -->
<div style="display:flex;gap:0;margin-bottom:20px;border-bottom:2px solid #e5e7eb">
<button class="staff-tab active" onclick="switchStaffTab('info')" data-tab="info" style="padding:10px 20px;font-size:13px;font-weight:600;border:none;background:none;cursor:pointer;border-bottom:2px solid #024550;color:#024550;margin-bottom:-2px;font-family:inherit">Info</button>
<button class="staff-tab" onclick="switchStaffTab('loner')" data-tab="loner" style="padding:10px 20px;font-size:13px;font-weight:600;border:none;background:none;cursor:pointer;border-bottom:2px solid transparent;color:#64748b;margin-bottom:-2px;font-family:inherit">Löner</button>
<button class="staff-tab" onclick="switchStaffTab('salj')" data-tab="salj" style="padding:10px 20px;font-size:13px;font-weight:600;border:none;background:none;cursor:pointer;border-bottom:2px solid transparent;color:#64748b;margin-bottom:-2px;font-family:inherit">Sälj samtal</button>
<button class="staff-tab" onclick="switchStaffTab('utveckling')" data-tab="utveckling" style="padding:10px 20px;font-size:13px;font-weight:600;border:none;background:none;cursor:pointer;border-bottom:2px solid transparent;color:#64748b;margin-bottom:-2px;font-family:inherit">Utvecklings samtal</button>
<button class="staff-tab" onclick="switchStaffTab('affarslista')" data-tab="affarslista" style="padding:10px 20px;font-size:13px;font-weight:600;border:none;background:none;cursor:pointer;border-bottom:2px solid transparent;color:#64748b;margin-bottom:-2px;font-family:inherit">Affärer</button>
</div>
<div id="staffTabInfo" class="staff-tab-panel"></div>
<div id="staffTabLoner" class="staff-tab-panel" style="display:none"></div>
<div id="staffTabSalj" class="staff-tab-panel" style="display:none"></div>
<div id="staffTabUtveckling" class="staff-tab-panel" style="display:none"></div>
<div id="staffTabAffarslista" class="staff-tab-panel" style="display:none"></div>
</div>
</div>
<!-- Staff Modal -->
<div id="staffModal" style="display:none;position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;overflow-y:auto;padding:20px">
<div style="background:#fff;border-radius:16px;padding:32px;width:640px;max-width:95vw;box-shadow:0 20px 60px rgba(0,0,0,.2);margin:auto">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:24px">
<h3 id="staffModalTitle" style="font-size:18px;font-weight:700;color:#1a1a1a">Lägg till personal</h3>
<button onclick="closeStaffModal()" style="background:none;border:none;cursor:pointer;font-size:20px;color:#94a3b8;padding:4px">×</button>
</div>
<input type="hidden" id="staffEditId">
<h4 style="font-size:12px;font-weight:700;color:#024550;text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;padding-bottom:6px;border-bottom:1px solid #e5e7eb">Grunduppgifter</h4>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px">
<div class="dummy-form-group" style="margin:0"><label>Namn *</label><input type="text" id="staffName" placeholder="Anna Andersson"></div>
<div class="dummy-form-group" style="margin:0"><label>E-post *</label><input type="email" id="staffEmail" placeholder="anna@foretag.se"></div>
<div class="dummy-form-group" style="margin:0"><label>Telefon</label><input type="tel" id="staffPhone" placeholder="070-123 45 67"></div>
<div class="dummy-form-group" style="margin:0"><label>Personnummer</label><input type="text" id="staffPnr" placeholder="YYYYMMDD-XXXX"></div>
<div class="dummy-form-group" style="margin:0">
<label>Roll</label>
<select id="staffRole" style="width:100%;padding:10px 14px;border:1px solid #e5e7eb;border-radius:8px;font-size:14px;font-family:'Inter',sans-serif">
<option value="saljare">Säljare</option>
<option value="saljchef">Säljchef</option>
<option value="admin">Admin</option>
<option value="installator">Installatör</option>
<option value="projektledare">Projektledare</option>
<option value="ekonomi">Ekonomi</option>
</select>
</div>
<div class="dummy-form-group" style="margin:0"><label>Titel</label><input type="text" id="staffTitle" placeholder="Projektledare Syd"></div>
</div>
<h4 style="font-size:12px;font-weight:700;color:#024550;text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;padding-bottom:6px;border-bottom:1px solid #e5e7eb">Adress</h4>
<div style="display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;margin-bottom:20px">
<div class="dummy-form-group" style="margin:0"><label>Adress</label><input type="text" id="staffAddress" placeholder="Storgatan 1"></div>
<div class="dummy-form-group" style="margin:0"><label>Postnummer</label><input type="text" id="staffZip" placeholder="123 45"></div>
<div class="dummy-form-group" style="margin:0"><label>Stad</label><input type="text" id="staffCity" placeholder="Stockholm"></div>
</div>
<h4 style="font-size:12px;font-weight:700;color:#024550;text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;padding-bottom:6px;border-bottom:1px solid #e5e7eb">Anställning</h4>
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:20px">
<div class="dummy-form-group" style="margin:0"><label>Startdatum</label><input type="date" id="staffStartDate"></div>
<div class="dummy-form-group" style="margin:0"><label>Grundlön (kr/mån)</label><input type="number" id="staffGrundlon" placeholder="0"></div>
<div class="dummy-form-group" style="margin:0"><label>Skattesats (%)</label><input type="number" id="staffSkatt" placeholder="30" step="0.1"></div>
</div>
<div style="display:flex;gap:10px;margin-top:24px">
<button class="dummy-btn" onclick="saveStaff()" style="flex:1">Spara</button>
<button class="dummy-btn secondary" onclick="closeStaffModal()">Avbryt</button>
</div>
<div id="staffModalError" style="display:none;margin-top:12px;padding:10px;background:#fef2f2;color:#991b1b;border-radius:8px;font-size:13px"></div>
</div>
</div>
<!-- INSTÄLLNINGAR -->