ik_system_wireframe_norsk_v3.html

<style>
  #ik * { box-sizing: border-box; margin: 0; }
  #ik { max-width: 720px; margin: 0 auto; padding: 0.5rem 0 1rem; }
  .nav { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 1.25rem; }
  .nav button { font-size: 12px; padding: 6px 12px; cursor: pointer; }
  .nav button.active { background: var(--color-background-secondary); font-weight: 500; }
  .sub-nav { display: flex; gap: 6px; margin-bottom: 1rem; }
  .sub-nav span { font-size: 12px; padding: 4px 12px; border-radius: var(--border-radius-md); cursor: pointer; border: 0.5px solid var(--color-border-tertiary); color: var(--color-text-secondary); }
  .sub-nav span.active { background: var(--color-background-info); color: var(--color-text-info); border-color: transparent; }
  .card { background: var(--color-background-primary); border: 0.5px solid var(--color-border-tertiary); border-radius: var(--border-radius-lg); padding: 1rem 1.25rem; margin-bottom: 10px; }
  .metric { background: var(--color-background-secondary); border-radius: var(--border-radius-md); padding: 1rem; }
  .metric .label { font-size: 12px; color: var(--color-text-secondary); }
  .metric .val { font-size: 24px; font-weight: 500; margin-top: 4px; }
  .badge { font-size: 12px; padding: 4px 10px; border-radius: var(--border-radius-md); display: inline-block; }
  .row { background: var(--color-background-primary); border: 0.5px solid var(--color-border-tertiary); border-radius: var(--border-radius-md); padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
  .alert-row { background: var(--color-background-danger); border-color: var(--color-border-danger); }
  .chk { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text-primary); margin-bottom: 8px; }
  .pbar { height: 4px; background: var(--color-background-secondary); border-radius: 2px; overflow: hidden; margin: 10px 0; }
  .pbar-fill { height: 100%; border-radius: 2px; }
  .doc-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 0.5px solid var(--color-border-tertiary); }
  .doc-row:last-child { border-bottom: none; }
  .doc-icon { width: 36px; height: 36px; border-radius: var(--border-radius-md); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; }
  .set-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 0.5px solid var(--color-border-tertiary); }
  .set-row:last-child { border-bottom: none; }
  .avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 12px; }
</style>

<div id="ik">
  <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem;">
    <div>
      <p style="font-size: 18px; font-weight: 500; color: var(--color-text-primary);">IK-kontrollsystem</p>
      <p style="font-size: 13px; color: var(--color-text-secondary);">Everest Sushi & Fusion AS</p>
    </div>
    <div style="display: flex; gap: 6px;">
      <span class="badge" style="background: var(--color-background-info); color: var(--color-text-info);">IK-Mat</span>
      <span class="badge" style="background: #EEEDFE; color: #3C3489;">IK-Alkohol</span>
    </div>
  </div>
  <div class="nav" id="mainNav"></div>
  <div id="screen"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script>
<script>
const tabs = [
  { id:'oversikt', label:'Oversikt' },
  { id:'fryser', label:'Fryser' },
  { id:'kjoeleskap', label:'Kj\u00f8leskap' },
  { id:'generelt', label:'Generelt' },
  { id:'avvik', label:'Avvik' },
  { id:'graf', label:'Temperaturgrafer' },
  { id:'opplaering', label:'Oppl\u00e6ring og info' },
  { id:'innstillinger', label:'Innstillinger' },
];

function now() {
  const d = new Date();
  return String(d.getHours()).padStart(2,'0') + ':' + String(d.getMinutes()).padStart(2,'0');
}

const screens = {
  oversikt: `
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 1.5rem;">
      <div class="metric"><div class="label">Oppgaver i dag</div><div class="val" style="color:var(--color-text-primary);">7 / 12</div></div>
      <div class="metric"><div class="label">Temp-varsler</div><div class="val" style="color:var(--color-text-danger);">2</div></div>
      <div class="metric"><div class="label">\u00c5pne avvik</div><div class="val" style="color:var(--color-text-warning);">3</div></div>
      <div class="metric"><div class="label">Samsvar</div><div class="val" style="color:var(--color-text-success);">87%</div></div>
    </div>
    <p style="font-size:14px;font-weight:500;margin-bottom:8px;color:var(--color-text-primary);">Dagens oppgaver</p>
    <div class="row"><div style="display:flex;align-items:center;gap:10px;"><div style="width:16px;height:16px;border-radius:3px;background:var(--color-background-success);"></div><span style="font-size:13px;color:var(--color-text-primary);">Morgen kj\u00f8kkenrenhold</span></div><span style="font-size:12px;color:var(--color-text-success);">Fullf\u00f8rt</span></div>
    <div class="row"><div style="display:flex;align-items:center;gap:10px;"><div style="width:16px;height:16px;border-radius:3px;background:var(--color-background-success);"></div><span style="font-size:13px;color:var(--color-text-primary);">Temperatursjekk kj\u00f8leskap</span></div><span style="font-size:12px;color:var(--color-text-success);">Fullf\u00f8rt</span></div>
    <div class="row"><div style="display:flex;align-items:center;gap:10px;"><div style="width:16px;height:16px;border-radius:3px;border:0.5px solid var(--color-border-secondary);"></div><span style="font-size:13px;color:var(--color-text-primary);">Logg varemottak-temperaturer</span></div><span style="font-size:12px;color:var(--color-text-warning);">Venter</span></div>
    <div class="row"><div style="display:flex;align-items:center;gap:10px;"><div style="width:16px;height:16px;border-radius:3px;border:0.5px solid var(--color-border-secondary);"></div><span style="font-size:13px;color:var(--color-text-primary);">Alderskontroll-logg (IK-Alkohol)</span></div><span style="font-size:12px;color:var(--color-text-secondary);">Ikke startet</span></div>
    <p style="font-size:14px;font-weight:500;margin:1.25rem 0 8px;color:var(--color-text-primary);">Varsler</p>
    <div style="background:var(--color-background-danger);border-radius:var(--border-radius-md);padding:10px 14px;margin-bottom:6px;"><p style="font-size:13px;color:var(--color-text-danger);">Fryser #2 over grenseverdi \u2014 15 min siden</p></div>
    <div style="background:var(--color-background-warning);border-radius:var(--border-radius-md);padding:10px 14px;"><p style="font-size:13px;color:var(--color-text-warning);">Ukentlig renholdssjekkliste forfalt \u2014 2t siden</p></div>
  `,

  fryser: ()=> tempZone('Fryser', [
    { name:'Fryser #1', target:'-18 \u00b0C', items:['Sj\u00f8mat','Kj\u00f8tt','Ferdigvarer'] },
    { name:'Fryser #2', target:'-18 \u00b0C', items:['Gr\u00f8nnsaker','Desserter'], alert:true },
  ]),

  kjoeleskap: ()=> tempZone('Kj\u00f8leskap', [
    { name:'Kj\u00f8leskap #1 (kj\u00f8kken)', target:'2\u20134 \u00b0C', items:['Fisk','Meieriprodukter','Sauser'] },
    { name:'Kj\u00f8leskap #2 (bar)', target:'2\u20134 \u00b0C', items:['Juice','Melk','Frukt'] },
    { name:'Visningskj\u00f8ler', target:'4\u20136 \u00b0C', items:['Sushi-display','Drikke'] },
  ]),

  generelt: `
    <div class="sub-nav"><span class="active">Daglig</span><span>Ukentlig</span><span>M\u00e5nedlig</span></div>
    <div class="card">
      <div style="display:flex;justify-content:space-between;align-items:center;"><p style="font-size:14px;font-weight:500;color:var(--color-text-primary);">\u00c5pning kj\u00f8kken</p><span style="font-size:12px;color:var(--color-text-success);">5 / 5</span></div>
      <div class="pbar"><div class="pbar-fill" style="width:100%;background:#5DCAA5;"></div></div>
      <div class="chk"><input type="checkbox" checked disabled> Vask og desinfiser arbeidsflater</div>
      <div class="chk"><input type="checkbox" checked disabled> Sjekk s\u00e5pedispensere og h\u00e5ndsprit</div>
      <div class="chk"><input type="checkbox" checked disabled> Kontroller skadedyrfeller</div>
      <div class="chk"><input type="checkbox" checked disabled> Sjekk holdbarhetsdatoer</div>
      <div class="chk"><input type="checkbox" checked disabled> Registrer ansatte p\u00e5 vakt</div>
      <p style="font-size:11px;color:var(--color-text-secondary);margin-top:8px;">Fullf\u00f8rt av: Ola Nordmann \u2014 07:45</p>
    </div>
    <div class="card">
      <div style="display:flex;justify-content:space-between;align-items:center;"><p style="font-size:14px;font-weight:500;color:var(--color-text-primary);">Matdisplay og servering</p><span style="font-size:12px;color:var(--color-text-warning);">1 / 4</span></div>
      <div class="pbar"><div class="pbar-fill" style="width:25%;background:#EF9F27;"></div></div>
      <div class="chk"><input type="checkbox" checked disabled> Sjekk temperatur i sushi-display</div>
      <div class="chk"><input type="checkbox" disabled> Renhold serveringsomr\u00e5de</div>
      <div class="chk"><input type="checkbox" disabled> Fyll p\u00e5 engangshansker</div>
      <div class="chk"><input type="checkbox" disabled> Kontroll matmerking og allergener</div>
    </div>
    <div class="card">
      <div style="display:flex;justify-content:space-between;align-items:center;"><p style="font-size:14px;font-weight:500;color:var(--color-text-primary);">Kveldsstenging</p><span style="font-size:12px;color:var(--color-text-secondary);">0 / 4</span></div>
      <div class="pbar"><div class="pbar-fill" style="width:0%;"></div></div>
      <div class="chk"><input type="checkbox" disabled> Dyprenhold grillstasjon</div>
      <div class="chk"><input type="checkbox" disabled> T\u00f8m og desinfiser avfallsbeholdere</div>
      <div class="chk"><input type="checkbox" disabled> Mopp gulv med desinfeksjon</div>
      <div class="chk"><input type="checkbox" disabled> Siste temp-sjekk \u2014 alle enheter</div>
    </div>
  `,

  avvik: `
    <button style="margin-bottom:1rem;">+ Rapporter nytt avvik</button>
    <div class="card">
      <div style="display:flex;justify-content:space-between;align-items:flex-start;"><div><p style="font-size:14px;font-weight:500;color:var(--color-text-primary);">Fryser #2 over grenseverdi</p><p style="font-size:12px;color:var(--color-text-secondary);margin-top:4px;">Rapportert: I dag 08:12 av Kari L.</p></div><span class="badge" style="background:var(--color-background-danger);color:var(--color-text-danger);">\u00c5pen</span></div>
      <p style="font-size:13px;color:var(--color-text-secondary);margin-top:10px;">M\u00e5lt -12.1\u00b0C, grenseverdi er -18\u00b0C. Mulig kompressorfeil.</p>
      <div style="margin-top:10px;display:flex;gap:6px;"><span class="badge" style="border:0.5px solid var(--color-border-tertiary);color:var(--color-text-secondary);background:transparent;">IK-Mat</span><span class="badge" style="border:0.5px solid var(--color-border-tertiary);color:var(--color-text-secondary);background:transparent;">Kritisk</span></div>
    </div>
    <div class="card">
      <div style="display:flex;justify-content:space-between;align-items:flex-start;"><div><p style="font-size:14px;font-weight:500;color:var(--color-text-primary);">Manglende alderskontroll-logg</p><p style="font-size:12px;color:var(--color-text-secondary);margin-top:4px;">Rapportert: I g\u00e5r av Per M.</p></div><span class="badge" style="background:var(--color-background-warning);color:var(--color-text-warning);">Under arbeid</span></div>
      <p style="font-size:13px;color:var(--color-text-secondary);margin-top:10px;">Barpersonalet fullf\u00f8rte ikke alderskontrollsjekkliste for kveldsvakt.</p>
      <div style="margin-top:10px;display:flex;gap:6px;"><span class="badge" style="border:0.5px solid var(--color-border-tertiary);color:var(--color-text-secondary);background:transparent;">IK-Alkohol</span><span class="badge" style="border:0.5px solid var(--color-border-tertiary);color:var(--color-text-secondary);background:transparent;">Medium</span></div>
    </div>
    <div class="card">
      <div style="display:flex;justify-content:space-between;align-items:flex-start;"><div><p style="font-size:14px;font-weight:500;color:var(--color-text-primary);">Utg\u00e5tt soyasaus p\u00e5 lager</p><p style="font-size:12px;color:var(--color-text-secondary);margin-top:4px;">Rapportert: 3 dager siden av Ola N.</p></div><span class="badge" style="background:var(--color-background-success);color:var(--color-text-success);">L\u00f8st</span></div>
      <p style="font-size:13px;color:var(--color-text-secondary);margin-top:10px;">Vare kastet, leverand\u00f8r varslet. FIFO-rutine gjennomg\u00e5tt med personalet.</p>
    </div>
  `,

  graf: 'CHART',

  opplaering: `
    <div class="sub-nav"><span class="active">Oppl\u00e6ringsmateriale</span><span>Rutinebeskrivelser</span><span>Sertifiseringer</span></div>
    <div class="card" style="padding:0.75rem 1.25rem;">
      <div class="doc-row"><div class="doc-icon" style="background:#EEEDFE;color:#3C3489;">PDF</div><div style="flex:1;"><p style="font-size:14px;font-weight:500;color:var(--color-text-primary);">Mattrygghet \u2014 grunnkurs</p><p style="font-size:12px;color:var(--color-text-secondary);">Obligatorisk for alle ansatte \u00b7 Sist oppdatert jan 2026</p></div><span style="font-size:12px;color:var(--color-text-info);cursor:pointer;">Last ned</span></div>
      <div class="doc-row"><div class="doc-icon" style="background:var(--color-background-info);color:var(--color-text-info);">PDF</div><div style="flex:1;"><p style="font-size:14px;font-weight:500;color:var(--color-text-primary);">Ansvarlig alkoholservering</p><p style="font-size:12px;color:var(--color-text-secondary);">IK-Alkohol \u00b7 Alle med skjenkebevilling</p></div><span style="font-size:12px;color:var(--color-text-info);cursor:pointer;">Last ned</span></div>
      <div class="doc-row"><div class="doc-icon" style="background:#E1F5EE;color:#085041;">DOC</div><div style="flex:1;"><p style="font-size:14px;font-weight:500;color:var(--color-text-primary);">HACCP-plan \u2014 Everest Sushi</p><p style="font-size:12px;color:var(--color-text-secondary);">Fareanalyse og kritiske kontrollpunkt</p></div><span style="font-size:12px;color:var(--color-text-info);cursor:pointer;">Last ned</span></div>
      <div class="doc-row"><div class="doc-icon" style="background:#FAEEDA;color:#854F0B;">VID</div><div style="flex:1;"><p style="font-size:14px;font-weight:500;color:var(--color-text-primary);">Bruk av temperaturm\u00e5ler</p><p style="font-size:12px;color:var(--color-text-secondary);">Videoguide \u00b7 4 min</p></div><span style="font-size:12px;color:var(--color-text-info);cursor:pointer;">Se video</span></div>
      <div class="doc-row"><div class="doc-icon" style="background:#FCEBEB;color:#791F1F;">PDF</div><div style="flex:1;"><p style="font-size:14px;font-weight:500;color:var(--color-text-primary);">Allergenh\u00e5ndtering</p><p style="font-size:12px;color:var(--color-text-secondary);">Rutine for merking og informasjon til gjester</p></div><span style="font-size:12px;color:var(--color-text-info);cursor:pointer;">Last ned</span></div>
    </div>
    <p style="font-size:14px;font-weight:500;margin:1rem 0 8px;color:var(--color-text-primary);">Ansattes sertifiseringer</p>
    <div class="card">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;"><span style="font-size:13px;color:var(--color-text-primary);">Kari Larsen</span><span class="badge" style="background:var(--color-background-success);color:var(--color-text-success);">Alt fullf\u00f8rt</span></div>
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;"><span style="font-size:13px;color:var(--color-text-primary);">Ola Nordmann</span><span class="badge" style="background:var(--color-background-warning);color:var(--color-text-warning);">1 utl\u00f8pt</span></div>
      <div style="display:flex;justify-content:space-between;align-items:center;"><span style="font-size:13px;color:var(--color-text-primary);">Per Martinsen</span><span class="badge" style="background:var(--color-background-danger);color:var(--color-text-danger);">2 mangler</span></div>
    </div>
  `,

  innstillinger: 'SETTINGS',
};

function tempZone(title, units) {
  let h = `<p style="font-size:14px;font-weight:500;margin-bottom:10px;color:var(--color-text-primary);">Velg enhet</p>`;
  h += `<div class="sub-nav" style="margin-bottom:1.25rem;">`;
  units.forEach((u,i) => { h += `<span class="${i===0?'active':''}" onclick="switchUnit(this)">${u.name}</span>`; });
  h += `</div>`;
  units.forEach((u,i) => {
    h += `<div class="card" id="unit-${i}" style="display:${i===0?'block':'none'};">`;
    h += `<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;"><p style="font-size:14px;font-weight:500;color:var(--color-text-primary);">${u.name}</p><span style="font-size:12px;color:var(--color-text-secondary);">M\u00e5l: ${u.target}</span></div>`;
    if (u.alert) h += `<div style="background:var(--color-background-danger);border-radius:var(--border-radius-md);padding:8px 12px;margin-bottom:12px;"><p style="font-size:12px;color:var(--color-text-danger);">Siste m\u00e5ling utenfor grenseverdi!</p></div>`;
    h += `<p style="font-size:13px;color:var(--color-text-secondary);margin-bottom:10px;">Innhold: ${u.items.join(', ')}</p>`;
    h += `<p style="font-size:14px;font-weight:500;margin-bottom:10px;color:var(--color-text-primary);">Ny m\u00e5ling</p>`;
    h += `<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;"><div><label style="font-size:11px;color:var(--color-text-secondary);display:block;margin-bottom:4px;">Temperatur (\u00b0C)</label><input type="number" placeholder="f.eks. ${u.target.split(' ')[0]}" style="width:100%;"></div><div><label style="font-size:11px;color:var(--color-text-secondary);display:block;margin-bottom:4px;">Tidspunkt</label><input type="time" value="${now()}" style="width:100%;"></div></div>`;
    h += `<div style="margin-bottom:10px;"><label style="font-size:11px;color:var(--color-text-secondary);display:block;margin-bottom:4px;">Merknad (valgfritt)</label><input type="text" placeholder="f.eks. d\u00f8r sto \u00e5pen" style="width:100%;"></div>`;
    h += `<div style="display:flex;align-items:center;gap:8px;margin-bottom:16px;font-size:12px;color:var(--color-text-secondary);">Logges som: <span style="font-weight:500;color:var(--color-text-primary);">Kari Larsen</span></div>`;
    h += `<button>Lagre m\u00e5ling</button>`;
    h += `<p style="font-size:14px;font-weight:500;margin:1.25rem 0 8px;color:var(--color-text-primary);">Siste m\u00e5linger</p>`;
    const readings = u.alert ? [
      { temp:'-12.1 \u00b0C', time:'I dag 08:10', user:'Kari L.', bad:true },
      { temp:'-18.3 \u00b0C', time:'I g\u00e5r 20:00', user:'Per M.', bad:false },
    ] : [
      { temp: title==='Fryser'?'-18.4 \u00b0C':'3.2 \u00b0C', time:'I dag 08:15', user:'Kari L.', bad:false },
      { temp: title==='Fryser'?'-18.2 \u00b0C':'3.8 \u00b0C', time:'I g\u00e5r 20:00', user:'Per M.', bad:false },
    ];
    readings.forEach(r => { h += `<div class="row ${r.bad?'alert-row':''}"><div><p style="font-size:13px;color:var(--color-text-primary);">${r.time}</p><p style="font-size:11px;color:var(--color-text-secondary);">${r.user}</p></div><span style="font-size:15px;font-weight:500;color:${r.bad?'var(--color-text-danger)':'var(--color-text-success)'};">${r.temp}</span></div>`; });
    h += `</div>`;
  });
  return h;
}

window.switchUnit = function(el) {
  el.parentElement.querySelectorAll('span').forEach(s => s.classList.remove('active'));
  el.classList.add('active');
  const idx = Array.from(el.parentElement.children).indexOf(el);
  el.closest('#screen').querySelectorAll('[id^="unit-"]').forEach((d,i) => { d.style.display = i===idx ? 'block' : 'none'; });
};

function renderChart() {
  const sc = document.getElementById('screen');
  let h = `<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;flex-wrap:wrap;gap:8px;">`;
  h += `<div class="sub-nav" style="margin:0;"><span class="active">Siste 7 dager</span><span>Siste 30 dager</span></div>`;
  h += `<div style="display:flex;gap:8px;"><button>Eksporter data (PDF)</button><button>Eksporter data (JSON)</button></div></div>`;
  h += `<div style="display:flex;flex-wrap:wrap;gap:16px;margin-bottom:12px;font-size:12px;color:var(--color-text-secondary);">`;
  h += `<span style="display:flex;align-items:center;gap:4px;"><span style="width:10px;height:10px;border-radius:2px;background:#378ADD;"></span>Fryser #1</span>`;
  h += `<span style="display:flex;align-items:center;gap:4px;"><span style="width:10px;height:10px;border-radius:2px;background:#7F77DD;"></span>Fryser #2</span>`;
  h += `<span style="display:flex;align-items:center;gap:4px;"><span style="width:10px;height:10px;border-radius:2px;background:#1D9E75;"></span>Kj\u00f8leskap #1</span>`;
  h += `<span style="display:flex;align-items:center;gap:4px;"><span style="width:10px;height:10px;border-radius:2px;background:#D85A30;"></span>Visningskj\u00f8ler</span>`;
  h += `<span style="display:flex;align-items:center;gap:4px;"><span style="width:12px;height:12px;border-radius:50%;border:2px solid #E24B4A;background:transparent;"></span>Avvik</span></div>`;
  h += `<div style="position:relative;width:100%;height:320px;"><canvas id="tempChart"></canvas></div>`;
  h += `<p style="font-size:14px;font-weight:500;margin:1.5rem 0 8px;color:var(--color-text-primary);">Avvikslogg</p>`;
  h += `<div class="row alert-row"><div><p style="font-size:13px;color:var(--color-text-primary);">Fryser #2 \u2014 -12.1\u00b0C</p><p style="font-size:11px;color:var(--color-text-secondary);">Ons 20. mar 08:10 \u2014 Grenseverdi: -18\u00b0C</p></div><span class="badge" style="background:var(--color-background-danger);color:var(--color-text-danger);">\u00c5pen</span></div>`;
  h += `<div class="row"><div><p style="font-size:13px;color:var(--color-text-primary);">Kj\u00f8leskap #1 \u2014 5.2\u00b0C</p><p style="font-size:11px;color:var(--color-text-secondary);">Man 17. mar 14:30 \u2014 Grenseverdi: 4\u00b0C</p></div><span class="badge" style="background:var(--color-background-success);color:var(--color-text-success);">L\u00f8st</span></div>`;
  sc.innerHTML = h;
  const days = ['Tor 14','Fre 15','L\u00f8r 16','S\u00f8n 17','Man 18','Tir 19','Ons 20'];
  const f1=[-18.4,-18.2,-18.1,-18.3,-18.5,-18.2,-18.4], f2=[-18.3,-18.1,-17.9,-18.0,-17.8,-16.5,-12.1];
  const k1=[3.2,3.5,3.8,5.2,3.4,3.1,3.2], vk=[4.8,5.0,4.9,5.1,5.0,4.7,5.1];
  const alertPts=[{x:3,y:5.2},{x:6,y:-12.1}];
  new Chart(document.getElementById('tempChart'),{type:'line',data:{labels:days,datasets:[
    {label:'Fryser #1',data:f1,borderColor:'#378ADD',backgroundColor:'transparent',borderWidth:2,pointRadius:3,tension:0.3},
    {label:'Fryser #2',data:f2,borderColor:'#7F77DD',backgroundColor:'transparent',borderWidth:2,pointRadius:3,tension:0.3},
    {label:'Kj\u00f8leskap #1',data:k1,borderColor:'#1D9E75',backgroundColor:'transparent',borderWidth:2,pointRadius:3,tension:0.3},
    {label:'Visningskj\u00f8ler',data:vk,borderColor:'#D85A30',backgroundColor:'transparent',borderWidth:2,pointRadius:3,tension:0.3},
    {label:'Avvik',data:days.map((_,i)=>{const a=alertPts.find(p=>p.x===i);return a?a.y:null;}),borderColor:'transparent',backgroundColor:'#E24B4A',pointRadius:days.map((_,i)=>alertPts.find(p=>p.x===i)?8:0),pointStyle:'circle',pointBorderColor:'#E24B4A',pointBorderWidth:2,pointBackgroundColor:'rgba(226,75,74,0.3)',showLine:false}
  ]},options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{display:false},tooltip:{callbacks:{label:function(ctx){if(ctx.dataset.label==='Avvik')return 'AVVIK: '+ctx.parsed.y.toFixed(1)+'\u00b0C';return ctx.dataset.label+': '+ctx.parsed.y.toFixed(1)+'\u00b0C';}}}},scales:{y:{title:{display:true,text:'\u00b0C',color:'#888'},grid:{color:'rgba(128,128,128,0.1)'}},x:{grid:{display:false},ticks:{autoSkip:false}}}}});
}

function renderSettings() {
  const sc = document.getElementById('screen');
  let settingsSub = 'enheter';
  function build(sub) {
    let h = `<div class="sub-nav" id="settingsNav">`;
    ['Enheter','Brukere','Organisasjon'].forEach((l,i) => {
      const id = ['enheter','brukere','org'][i];
      h += `<span class="${sub===id?'active':''}" onclick="settingsTab('${id}')">${l}</span>`;
    });
    h += `</div>`;

    if (sub === 'enheter') {
      h += `<button style="margin-bottom:1rem;">+ Legg til ny enhet</button>`;
      h += `<div class="card" style="padding:0;">`;
      const units = [
        { name:'Fryser #1', type:'Fryser', min:'-20', max:'-16', target:'-18', active:true },
        { name:'Fryser #2', type:'Fryser', min:'-20', max:'-16', target:'-18', active:true },
        { name:'Kj\u00f8leskap #1 (kj\u00f8kken)', type:'Kj\u00f8leskap', min:'1', max:'4', target:'3', active:true },
        { name:'Kj\u00f8leskap #2 (bar)', type:'Kj\u00f8leskap', min:'1', max:'4', target:'3', active:true },
        { name:'Visningskj\u00f8ler', type:'Kj\u00f8ler', min:'3', max:'6', target:'5', active:true },
        { name:'Kj\u00f8leskap #3 (lager)', type:'Kj\u00f8leskap', min:'1', max:'4', target:'3', active:false },
      ];
      units.forEach((u,i) => {
        h += `<div class="set-row" style="padding:12px 1.25rem;${i===0?'':''}">`;
        h += `<div style="flex:1;"><div style="display:flex;align-items:center;gap:8px;"><p style="font-size:14px;font-weight:500;color:var(--color-text-primary);">${u.name}</p>`;
        if (!u.active) h += `<span class="badge" style="background:var(--color-background-secondary);color:var(--color-text-secondary);">Inaktiv</span>`;
        h += `</div><p style="font-size:12px;color:var(--color-text-secondary);margin-top:2px;">Type: ${u.type} \u00b7 M\u00e5l: ${u.target}\u00b0C \u00b7 Grense: ${u.min}\u00b0C til ${u.max}\u00b0C</p></div>`;
        h += `<div style="display:flex;gap:8px;"><span style="font-size:12px;color:var(--color-text-info);cursor:pointer;">Rediger</span><span style="font-size:12px;color:var(--color-text-danger);cursor:pointer;">Slett</span></div>`;
        h += `</div>`;
      });
      h += `</div>`;

      h += `<p style="font-size:14px;font-weight:500;margin:1.5rem 0 10px;color:var(--color-text-primary);">Rediger enhet</p>`;
      h += `<div class="card">`;
      h += `<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;">`;
      h += `<div><label style="font-size:11px;color:var(--color-text-secondary);display:block;margin-bottom:4px;">Enhetsnavn</label><input type="text" value="Fryser #1" style="width:100%;"></div>`;
      h += `<div><label style="font-size:11px;color:var(--color-text-secondary);display:block;margin-bottom:4px;">Type</label><select style="width:100%;"><option>Fryser</option><option>Kj\u00f8leskap</option><option>Kj\u00f8ler</option><option>Annet</option></select></div>`;
      h += `</div>`;
      h += `<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:10px;">`;
      h += `<div><label style="font-size:11px;color:var(--color-text-secondary);display:block;margin-bottom:4px;">M\u00e5ltemperatur (\u00b0C)</label><input type="number" value="-18" style="width:100%;"></div>`;
      h += `<div><label style="font-size:11px;color:var(--color-text-secondary);display:block;margin-bottom:4px;">Min grense (\u00b0C)</label><input type="number" value="-20" style="width:100%;"></div>`;
      h += `<div><label style="font-size:11px;color:var(--color-text-secondary);display:block;margin-bottom:4px;">Maks grense (\u00b0C)</label><input type="number" value="-16" style="width:100%;"></div>`;
      h += `</div>`;
      h += `<div style="margin-bottom:10px;"><label style="font-size:11px;color:var(--color-text-secondary);display:block;margin-bottom:4px;">Beskrivelse / innhold</label><input type="text" value="Sj\u00f8mat, Kj\u00f8tt, Ferdigvarer" style="width:100%;"></div>`;
      h += `<div style="display:flex;align-items:center;gap:12px;margin-bottom:14px;"><label style="font-size:13px;color:var(--color-text-primary);display:flex;align-items:center;gap:6px;"><input type="checkbox" checked> Aktiv</label></div>`;
      h += `<div style="display:flex;gap:8px;"><button>Lagre endringer</button><button>Avbryt</button></div>`;
      h += `</div>`;
    }

    if (sub === 'brukere') {
      h += `<button style="margin-bottom:1rem;">+ Legg til ny bruker</button>`;
      const users = [
        { init:'KL', name:'Kari Larsen', email:'kari@everestsushi.no', role:'Administrator', bg:'#EEEDFE', fg:'#3C3489', rbg:'var(--color-background-info)', rfg:'var(--color-text-info)' },
        { init:'ON', name:'Ola Nordmann', email:'ola@everestsushi.no', role:'Leder', bg:'#E1F5EE', fg:'#085041', rbg:'#E1F5EE', rfg:'#085041' },
        { init:'PM', name:'Per Martinsen', email:'per@everestsushi.no', role:'Ansatt', bg:'var(--color-background-secondary)', fg:'var(--color-text-secondary)', rbg:'var(--color-background-secondary)', rfg:'var(--color-text-secondary)' },
      ];
      h += `<div class="card" style="padding:0;">`;
      users.forEach((u,i) => {
        h += `<div class="set-row" style="padding:12px 1.25rem;">`;
        h += `<div style="display:flex;align-items:center;gap:12px;flex:1;">`;
        h += `<div class="avatar" style="background:${u.bg};color:${u.fg};">${u.init}</div>`;
        h += `<div><p style="font-size:14px;font-weight:500;color:var(--color-text-primary);">${u.name}</p><p style="font-size:12px;color:var(--color-text-secondary);">${u.email}</p></div></div>`;
        h += `<div style="display:flex;align-items:center;gap:10px;"><span class="badge" style="background:${u.rbg};color:${u.rfg};">${u.role}</span>`;
        h += `<span style="font-size:12px;color:var(--color-text-info);cursor:pointer;">Rediger</span></div>`;
        h += `</div>`;
      });
      h += `</div>`;

      h += `<p style="font-size:14px;font-weight:500;margin:1.5rem 0 10px;color:var(--color-text-primary);">Rediger bruker</p>`;
      h += `<div class="card">`;
      h += `<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;">`;
      h += `<div><label style="font-size:11px;color:var(--color-text-secondary);display:block;margin-bottom:4px;">Fornavn</label><input type="text" value="Ola" style="width:100%;"></div>`;
      h += `<div><label style="font-size:11px;color:var(--color-text-secondary);display:block;margin-bottom:4px;">Etternavn</label><input type="text" value="Nordmann" style="width:100%;"></div></div>`;
      h += `<div style="margin-bottom:10px;"><label style="font-size:11px;color:var(--color-text-secondary);display:block;margin-bottom:4px;">E-post</label><input type="email" value="ola@everestsushi.no" style="width:100%;"></div>`;
      h += `<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;">`;
      h += `<div><label style="font-size:11px;color:var(--color-text-secondary);display:block;margin-bottom:4px;">Rolle</label><select style="width:100%;"><option>Ansatt</option><option selected>Leder</option><option>Administrator</option></select></div>`;
      h += `<div><label style="font-size:11px;color:var(--color-text-secondary);display:block;margin-bottom:4px;">Status</label><select style="width:100%;"><option selected>Aktiv</option><option>Deaktivert</option></select></div></div>`;
      h += `<p style="font-size:14px;font-weight:500;margin:1rem 0 8px;color:var(--color-text-primary);">Tilganger</p>`;
      h += `<div style="display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;">`;
      const perms = [['Temperaturlogging',true],['Sjekklister',true],['Rapporter',true],['Avviksrapportering',true],['Brukeradministrasjon',false],['Innstillinger',false]];
      perms.forEach(([p,c]) => { h += `<div class="chk"><input type="checkbox" ${c?'checked':''}> ${p}</div>`; });
      h += `</div>`;
      h += `<div style="display:flex;gap:8px;margin-top:14px;"><button>Lagre endringer</button><button>Tilbakestill passord</button></div>`;
      h += `</div>`;
    }

    if (sub === 'org') {
      h += `<div class="card">`;
      h += `<p style="font-size:14px;font-weight:500;margin-bottom:12px;color:var(--color-text-primary);">Organisasjonsdetaljer</p>`;
      h += `<div style="margin-bottom:10px;"><label style="font-size:11px;color:var(--color-text-secondary);display:block;margin-bottom:4px;">Bedriftsnavn</label><input type="text" value="Everest Sushi & Fusion AS" style="width:100%;"></div>`;
      h += `<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;">`;
      h += `<div><label style="font-size:11px;color:var(--color-text-secondary);display:block;margin-bottom:4px;">Org.nummer</label><input type="text" value="937 219 997" style="width:100%;"></div>`;
      h += `<div><label style="font-size:11px;color:var(--color-text-secondary);display:block;margin-bottom:4px;">Bransje</label><select style="width:100%;"><option selected>Restaurant</option><option>Bar</option><option>Kafé</option><option>Kantine</option></select></div></div>`;
      h += `<div style="margin-bottom:10px;"><label style="font-size:11px;color:var(--color-text-secondary);display:block;margin-bottom:4px;">Adresse</label><input type="text" value="Innherredsveien 1, 7014 Trondheim" style="width:100%;"></div>`;
      h += `<div style="display:flex;gap:8px;margin-top:4px;"><button>Lagre</button></div>`;
      h += `</div>`;

      h += `<p style="font-size:14px;font-weight:500;margin:1.5rem 0 10px;color:var(--color-text-primary);">Aktive moduler</p>`;
      h += `<div class="card">`;
      h += `<div style="display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:0.5px solid var(--color-border-tertiary);"><div><p style="font-size:14px;font-weight:500;color:var(--color-text-primary);">IK-Mat</p><p style="font-size:12px;color:var(--color-text-secondary);">Internkontroll for mattrygghet</p></div><label style="font-size:13px;color:var(--color-text-primary);display:flex;align-items:center;gap:6px;"><input type="checkbox" checked> Aktiv</label></div>`;
      h += `<div style="display:flex;justify-content:space-between;align-items:center;padding:8px 0;"><div><p style="font-size:14px;font-weight:500;color:var(--color-text-primary);">IK-Alkohol</p><p style="font-size:12px;color:var(--color-text-secondary);">Internkontroll for alkoholservering</p></div><label style="font-size:13px;color:var(--color-text-primary);display:flex;align-items:center;gap:6px;"><input type="checkbox" checked> Aktiv</label></div>`;
      h += `</div>`;

      h += `<p style="font-size:14px;font-weight:500;margin:1.5rem 0 10px;color:var(--color-text-primary);">Varslingsinnstillinger</p>`;
      h += `<div class="card">`;
      h += `<div class="chk"><input type="checkbox" checked> E-postvarsling ved temperaturavvik</div>`;
      h += `<div class="chk"><input type="checkbox" checked> Daglig oppsummering til ledere</div>`;
      h += `<div class="chk"><input type="checkbox"> SMS-varsling ved kritiske avvik</div>`;
      h += `</div>`;
    }

    return h;
  }
  sc.innerHTML = build(settingsSub);
  window.settingsTab = function(id) { settingsSub = id; sc.innerHTML = build(id); };
}

const navEl = document.getElementById('mainNav');
tabs.forEach(t => {
  const b = document.createElement('button');
  b.textContent = t.label;
  b.id = 'btn-'+t.id;
  b.onclick = () => showTab(t.id);
  navEl.appendChild(b);
});

function showTab(id) {
  navEl.querySelectorAll('button').forEach(b => b.classList.remove('active'));
  document.getElementById('btn-'+id).classList.add('active');
  if (id === 'graf') { renderChart(); }
  else if (id === 'innstillinger') { renderSettings(); }
  else {
    const content = screens[id];
    document.getElementById('screen').innerHTML = typeof content === 'function' ? content() : content;
  }
}
showTab('oversikt');
</script>