// tilgang-screens-2.jsx — Komplett tilgangsstyring med Supabase

// ══════════════════════════════════════════════════════════════
// SUPABASE-KALL
// ══════════════════════════════════════════════════════════════

async function hentTilgangStatistikk() {
  const [profiler, roller, overstyringer, foresporsler] = await Promise.all([
    window._sb.from('profiles').select('id, rolle_id, roller(navn)'),
    window._sb.from('roller').select('id, navn').order('sortering'),
    window._sb.from('bruker_overstyringer').select('id'),
    window._sb.from('tilgang_foresporsler').select('id, status').eq('status', 'ventende'),
  ]);
  return {
    totalt:        profiler.data?.length || 0,
    medRolle:      profiler.data?.filter(p => p.rolle_id).length || 0,
    antRoller:     roller.data?.length || 0,
    overstyringer: overstyringer.data?.length || 0,
    ventende:      foresporsler.data?.length || 0,
  };
}

async function hentMatriseFraSupabase() {
  const { data } = await window._sb
    .from('roller_tilgang')
    .select('niva, roller(id,nokkel,navn,farge,sortering), moduler(nokkel,navn,gruppe,sub,sensitiv,sortering,beskrivelse,parent)');
  return data || [];
}

async function lagreMatriseEndring(rolleId, modulNokkel, nyttNiva) {
  const { data: modul } = await window._sb.from('moduler').select('id').eq('nokkel', modulNokkel).single();
  if (!modul) return;
  await window._sb.from('roller_tilgang')
    .upsert({ rolle_id: rolleId, modul_id: modul.id, niva: nyttNiva }, { onConflict: 'rolle_id,modul_id' });
}

async function opprettRolle(felter) {
  const { data, error } = await window._sb.from('roller').insert([felter]).select().single();
  if (error) throw error;
  const { data: moduler } = await window._sb.from('moduler').select('id');
  if (moduler) {
    await window._sb.from('roller_tilgang').insert(
      moduler.map(m => ({ rolle_id: data.id, modul_id: m.id, niva: '·' }))
    );
  }
  return data;
}

async function hentOverstyringer() {
  const { data } = await window._sb.from('bruker_overstyringer')
    .select('*, profiles!bruker_id(navn,epost), moduler(navn,nokkel), giver:profiles!gitt_av_id(navn)')
    .order('created_at', { ascending: false });
  return data || [];
}

async function lagreOverstyring(brukerId, modulNokkel, niva, begrunnelse, gittAvId, gittAvNavn) {
  const { data: modul } = await window._sb.from('moduler').select('id').eq('nokkel', modulNokkel).single();
  if (!modul) throw new Error('Modul ikke funnet');
  const { error } = await window._sb.from('bruker_overstyringer').upsert({
    bruker_id: brukerId, modul_id: modul.id, niva, begrunnelse,
    gitt_av_id: gittAvId, gitt_av_navn: gittAvNavn,
  }, { onConflict: 'bruker_id,modul_id' });
  if (error) throw error;
  await loggHendelse('tilgang', `Overstyring satt for bruker`, gittAvId, gittAvNavn);
}

async function slettOverstyring(id) {
  await window._sb.from('bruker_overstyringer').delete().eq('id', id);
}

async function hentForesporsler() {
  const { data } = await window._sb.from('tilgang_foresporsler')
    .select('*, profiles!bruker_id(navn,epost,rolle_id), moduler(navn,nokkel), godkjenner:profiles!godkjenner_id(navn)')
    .order('created_at', { ascending: false });
  return data || [];
}

async function behandleForespørsel(id, status, behandletAvId, behandletAvNavn) {
  await window._sb.from('tilgang_foresporsler')
    .update({ status, behandlet_av_id: behandletAvId, behandlet_at: new Date().toISOString() })
    .eq('id', id);
  await loggHendelse(status === 'godkjent' ? 'tilgang' : 'avslag',
    `Forespørsel ${status}`, behandletAvId, behandletAvNavn);
}

async function tilgangHentLogg() {
  const { data } = await window._sb.from('tilgang_logg')
    .select('*').order('created_at', { ascending: false }).limit(50);
  return data || [];
}

async function loggHendelse(type, tekst, utfortAvId, utfortAv) {
  await window._sb.from('tilgang_logg').insert([{ type, tekst, utfort_av_id: utfortAvId, utfort_av: utfortAv }]);
}

async function hentInnstillinger() {
  const { data } = await window._sb.from('systeminnstillinger').select('*');
  if (!data) return {};
  return Object.fromEntries(data.map(r => [r.nokkel, r.verdi]));
}

async function lagreInnstilling(nokkel, verdi, brukerId) {
  await window._sb.from('systeminnstillinger').upsert(
    { nokkel, verdi, updated_at: new Date().toISOString(), updated_by: brukerId },
    { onConflict: 'nokkel' }
  );
  // Logg endringen i aktivitetsloggen
  const navn = await window._sb.from('profiles').select('navn,epost').eq('id', brukerId).single()
    .then(({ data }) => data?.navn || data?.epost).catch(() => null);
  await loggHendelse('innstilling', `Innstilling «${nokkel}» endret til «${verdi}»`, brukerId, navn);
}

async function hentEnhetTilgang() {
  const { data } = await window._sb.from('enhet_tilgang')
    .select('*, profiles(navn,epost), enheter(navn), moduler(navn,nokkel)')
    .order('created_at', { ascending: false });
  return data || [];
}

async function lagreEnhetTilgang(profilId, enhetId, modulId, niva) {
  const { error } = await window._sb.from('enhet_tilgang').upsert(
    { profil_id: profilId, enhet_id: enhetId, modul_id: modulId || null, niva },
    { onConflict: 'profil_id,enhet_id,modul_id' }
  );
  if (error) throw error;
}

async function slettEnhetTilgang(id) {
  await window._sb.from('enhet_tilgang').delete().eq('id', id);
}

// ══════════════════════════════════════════════════════════════
// FANE: ROLLER & MATRISE
// ══════════════════════════════════════════════════════════════

async function oppdaterRolle(id, felter) {
  const { data, error } = await window._sb.from('roller').update(felter).eq('id', id).select().single();
  if (error) throw error;
  return data;
}

function RolleSkjema({ rolle, onLagret, onAvbryt }) {
  const redigerer = !!rolle;
  const [navn,       setNavn]       = React.useState(rolle?.navn        || '');
  const [beskrivelse,setBeskrivelse]= React.useState(rolle?.beskrivelse || '');
  const [farge,      setFarge]      = React.useState(rolle?.farge       || '#586ba4');
  const [laster,     setLaster]     = React.useState(false);
  const [feil,       setFeil]       = React.useState(null);
  const farger = ['#f2545c','#586ba4','#08605f','#11183d','#caa24a','#7d8aa8','#28589f','#9aa3b8','#f2cc8f'];

  const lagre = async () => {
    if (!navn.trim()) { setFeil('Navn er påkrevd.'); return; }
    setLaster(true); setFeil(null);
    try {
      let res;
      if (redigerer) {
        res = await oppdaterRolle(rolle.id, { navn: navn.trim(), beskrivelse: beskrivelse.trim(), farge });
      } else {
        const nokkel = navn.toLowerCase().replace(/\s+/g,'-').replace(/[^a-z0-9-]/g,'');
        res = await opprettRolle({ nokkel, navn: navn.trim(), beskrivelse: beskrivelse.trim(), farge });
      }
      onLagret(res);
    } catch(e) { setFeil(e.message); } finally { setLaster(false); }
  };

  const lbl = { fontSize: 11, fontWeight: 600, color: SK.soft, letterSpacing: 0.04, textTransform: 'uppercase', display: 'block', marginBottom: 5 };
  return (
    <div style={{ padding: '18px 20px' }}>
      <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 16 }}>
        {redigerer ? `Rediger: ${rolle.navn}` : 'Ny rolle'}
      </div>
      {feil && <div style={{ background:'#fcddde', border:'1px solid #f2545c', borderRadius:8, padding:'9px 13px', fontSize:13, color:'#8a1620', marginBottom:14 }}>{feil}</div>}
      <div style={{ display:'flex', flexDirection:'column', gap:12, marginBottom:18 }}>
        <div style={{ display:'flex', flexDirection:'column', gap:5 }}>
          <label style={lbl}>Rollenavn *</label>
          <input className="ok-input" value={navn} onChange={e => setNavn(e.target.value)}
            onKeyDown={e => e.key === 'Enter' && lagre()} placeholder="f.eks. Fagansvarlig"
            style={{ padding: '10px 12px', fontSize: 13 }} autoFocus />
        </div>
        <div style={{ display:'flex', flexDirection:'column', gap:5 }}>
          <label style={lbl}>Beskrivelse</label>
          <input className="ok-input" value={beskrivelse} onChange={e => setBeskrivelse(e.target.value)}
            placeholder="Hva gjør denne rollen?" style={{ padding: '10px 12px', fontSize: 13 }} />
        </div>
        <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
          <label style={lbl}>Farge</label>
          <div style={{ display:'flex', gap:8 }}>
            {farger.map(f => (
              <div key={f} onClick={() => setFarge(f)} style={{
                width:28, height:28, borderRadius:'50%', background:f, cursor:'pointer',
                border: farge===f ? `3px solid ${SK.ink}` : '3px solid transparent',
                boxSizing:'border-box', transition:'transform .1s',
                transform: farge===f ? 'scale(1.15)' : 'scale(1)',
              }} />
            ))}
          </div>
        </div>
      </div>
      <div style={{ display:'flex', gap:8 }}>
        <Button variant="primary" onClick={lagre} disabled={laster}>
          {laster ? 'Lagrer…' : (redigerer ? 'Lagre endringer' : 'Opprett rolle')}
        </Button>
        <Button onClick={onAvbryt}>Avbryt</Button>
      </div>
      {!redigerer && (
        <div style={{ marginTop:12, fontSize:12, color:SK.soft, lineHeight:1.5 }}>
          Alle moduler settes til «Ingen tilgang» som utgangspunkt. Juster matrisen etterpå.
        </div>
      )}
    </div>
  );
}

function FaneMatrise({ onRollerEndret }) {
  const [roller,    setRoller]    = React.useState([]);
  const [moduler,   setModuler]   = React.useState([]);
  const [matrise,   setMatrise]   = React.useState({});
  const [lagretMat, setLagretMat] = React.useState({});
  const [laster,    setLaster]    = React.useState(true);
  const [lagrer,    setLagrer]    = React.useState(false);
  const [feil,      setFeil]      = React.useState(null);
  const [rolleSkjema, setRolleSkjema] = React.useState(null); // null | 'ny' | rolle-objekt

  React.useEffect(() => { lastInn(); }, []);

  async function lastInn() {
    setLaster(true); setFeil(null);
    try {
      const data = await hentMatriseFraSupabase();
      const rollerMap = {}, modulerMap = {}, mat = {};
      data.forEach(rad => {
        const r = rad.roller, m = rad.moduler;
        if (!r || !m) return;
        rollerMap[r.nokkel] = r;
        modulerMap[m.nokkel] = m;
        if (!mat[r.nokkel]) mat[r.nokkel] = {};
        mat[r.nokkel][m.nokkel] = rad.niva;
      });
      setRoller(Object.values(rollerMap).sort((a,b) => a.sortering - b.sortering));
      setModuler(Object.values(modulerMap).sort((a,b) => a.sortering - b.sortering));
      setMatrise(JSON.parse(JSON.stringify(mat)));
      setLagretMat(JSON.parse(JSON.stringify(mat)));
    } catch(e) { setFeil(e.message); } finally { setLaster(false); }
  }

  const dirty = JSON.stringify(matrise) !== JSON.stringify(lagretMat);

  const sykle = (rNokkel, mNokkel) => {
    setMatrise(prev => {
      const naa  = prev[rNokkel]?.[mNokkel] || '·';
      const neste = AKS_KODE_REKKE[(AKS_KODE_REKKE.indexOf(naa) + 1) % AKS_KODE_REKKE.length];
      return { ...prev, [rNokkel]: { ...(prev[rNokkel]||{}), [mNokkel]: neste } };
    });
  };

  const lagreAlle = async () => {
    setLagrer(true); setFeil(null);
    try {
      const ops = [];
      for (const rNokkel of Object.keys(matrise)) {
        const rolle = roller.find(r => r.nokkel === rNokkel);
        if (!rolle) continue;
        for (const mNokkel of Object.keys(matrise[rNokkel])) {
          if (matrise[rNokkel][mNokkel] !== lagretMat[rNokkel]?.[mNokkel]) {
            ops.push(lagreMatriseEndring(rolle.id, mNokkel, matrise[rNokkel][mNokkel]));
          }
        }
      }
      await Promise.all(ops);
      setLagretMat(JSON.parse(JSON.stringify(matrise)));
    } catch(e) { setFeil(e.message); } finally { setLagrer(false); }
  };

  if (laster) return <div style={{ padding: 32, textAlign: 'center', color: SK.soft, fontSize: 13 }}>Laster matrise…</div>;

  if (rolleSkjema !== null) return (
    <Card padded={false} style={{ maxWidth: 480, marginTop: 16 }}>
      <RolleSkjema
        rolle={rolleSkjema === 'ny' ? null : rolleSkjema}
        onLagret={() => { setRolleSkjema(null); lastInn(); if (onRollerEndret) onRollerEndret(); }}
        onAvbryt={() => setRolleSkjema(null)}
      />
    </Card>
  );

  let forrigeGruppe = null;
  return (
    <div>
      <div style={{ display:'flex', alignItems:'center', gap:14, marginBottom:14, flexWrap:'wrap' }}>
        <Forklaring />
        <div style={{ marginLeft:'auto', display:'flex', gap:8, alignItems:'center' }}>
          {dirty && <span style={{ fontSize:11.5, color:SK.coral, fontWeight:600 }}>● Ulagrede endringer</span>}
          {feil  && <span style={{ fontSize:11.5, color:SK.coral }}>{feil}</span>}
          <Button size="sm" onClick={() => setMatrise(JSON.parse(JSON.stringify(lagretMat)))} disabled={!dirty||lagrer}>Tilbakestill</Button>
          <Button size="sm" onClick={() => setRolleSkjema('ny')} icon={I.plus}>Ny rolle</Button>
          <Button variant="primary" size="sm" onClick={lagreAlle} disabled={!dirty||lagrer}>{lagrer ? 'Lagrer…' : 'Lagre endringer'}</Button>
        </div>
      </div>
      <div style={{ fontSize:12, color:SK.soft, marginBottom:10 }}>
        Klikk en celle for å sykle tilgangsnivå. Klikk et <b style={{ color:SK.ink }}>rollenavn</b> for å redigere rollen.
      </div>
      <Card padded={false} style={{ overflow:'hidden' }}>
        <div style={{ overflowX:'auto' }}>
          <table style={{ borderCollapse:'collapse', width:'100%', minWidth:760 }}>
            <thead>
              <tr>
                <th style={{ position:'sticky', left:0, zIndex:2, background:SK.iceBlueLight,
                  textAlign:'left', padding:'12px 14px', minWidth:210,
                  fontSize:11, fontWeight:600, letterSpacing:0.04, textTransform:'uppercase',
                  color:SK.soft, borderBottom:'1px solid rgba(17,24,61,.1)' }}>Modul</th>
                {roller.map(r => (
                  <th key={r.nokkel} style={{ padding:'10px 4px', borderBottom:'1px solid rgba(17,24,61,.1)',
                    borderLeft:'1px solid rgba(17,24,61,.05)', verticalAlign:'bottom', minWidth:58 }}>
                    <div style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:6 }}>
                      <span style={{ width:9, height:9, borderRadius:'50%', background:r.farge }} />
                      <span
                        onClick={() => setRolleSkjema(r)}
                        title="Klikk for å redigere rollen"
                        style={{ writingMode:'vertical-rl', transform:'rotate(180deg)',
                          fontSize:11, fontWeight:600, color:SK.ink, whiteSpace:'nowrap', maxHeight:96,
                          cursor:'pointer', textDecoration:'underline', textDecorationStyle:'dotted',
                          textUnderlineOffset:2 }}>
                        {r.navn}
                      </span>
                    </div>
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {moduler.map(m => {
                const nyGruppe = m.gruppe !== forrigeGruppe;
                forrigeGruppe = m.gruppe;
                return (
                  <React.Fragment key={m.nokkel}>
                    {nyGruppe && (
                      <tr><td colSpan={roller.length+1} style={{ background:'#fff', padding:'12px 14px 4px',
                        fontSize:10, fontWeight:700, letterSpacing:0.1, textTransform:'uppercase',
                        color:SK.soft, position:'sticky', left:0 }}>{m.gruppe}</td></tr>
                    )}
                    <tr style={{ borderTop:'1px solid rgba(17,24,61,.05)' }}>
                      <td style={{ position:'sticky', left:0, zIndex:1, background:'#fff', padding:'7px 14px', fontSize:12.5 }}>
                        <span title={m.beskrivelse || ''} style={{ paddingLeft:m.sub?16:0, color:m.sub?SK.soft:SK.ink, fontWeight:m.sub?400:500, cursor: m.beskrivelse?'help':'default' }}>
                          {m.sub && <span style={{ color:'rgba(17,24,61,.3)', marginRight:4 }}>↳</span>}{m.navn}
                          {m.sensitiv && <span title="Sensitiv" style={{ marginLeft:6, fontSize:9, color:SK.coral, fontWeight:700, verticalAlign:'middle' }}>●</span>}
                        </span>
                      </td>
                      {roller.map(r => (
                        <td key={r.nokkel} style={{ textAlign:'center', padding:'5px 4px', borderLeft:'1px solid rgba(17,24,61,.04)' }}>
                          <div style={{ display:'flex', justifyContent:'center' }}>
                            <KodeCelle kode={matrise[r.nokkel]?.[m.nokkel]||'·'} onClick={() => sykle(r.nokkel, m.nokkel)} title={`${r.navn} · ${m.navn}`} />
                          </div>
                        </td>
                      ))}
                    </tr>
                  </React.Fragment>
                );
              })}
            </tbody>
          </table>
        </div>
      </Card>
      <div style={{ marginTop:8, fontSize:11, color:SK.soft }}><span style={{ color:SK.coral }}>●</span> Sensitiv modul — krever eksplisitt godkjenning.</div>

      {/* Admin-nivåer overstyrer matrisen */}
      <Card padded style={{ marginTop:16 }}>
        <div style={{ fontSize:13, fontWeight:600, marginBottom:10 }}>Admin-nivåer (overstyrer matrisen)</div>
        <div style={{ fontSize:12.5, color:SK.soft, lineHeight:1.6, marginBottom:14 }}>
          Admin-nivå settes per bruker i <b style={{ color:SK.ink }}>Brukere</b>, uavhengig av rolle.
          Det overstyrer alltid det rollen gir i matrisen over.
        </div>
        <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
          <div style={{ display:'flex', gap:12, alignItems:'flex-start', padding:'10px 12px', borderRadius:8, background:'#fdeac8' }}>
            <span style={{ fontSize:10.5, fontWeight:700, padding:'2px 8px', borderRadius:99, background:'#fdeac8', color:'#8e5a05', border:'1px solid #f2b950', whiteSpace:'nowrap' }}>Administrator</span>
            <div style={{ fontSize:12.5, color:SK.ink, lineHeight:1.5 }}>
              Full tilgang (Admin-nivå) til <b>alle moduler</b> i hele applikasjonen, uansett rolle.
              Får ikke automatisk systeminnstillinger eller brukeradministrasjon.
            </div>
          </div>
          <div style={{ display:'flex', gap:12, alignItems:'flex-start', padding:'10px 12px', borderRadius:8, background:'#fcddde' }}>
            <span style={{ fontSize:10.5, fontWeight:700, padding:'2px 8px', borderRadius:99, background:'#fcddde', color:'#a01a25', border:'1px solid #f3b6b9', whiteSpace:'nowrap' }}>Superbruker</span>
            <div style={{ fontSize:12.5, color:SK.ink, lineHeight:1.5 }}>
              Alt en administrator har, <b>pluss</b> systeminnstillinger, brukeradministrasjon
              og rett til å sette andres admin-nivå. Den høyeste tilgangen i systemet.
            </div>
          </div>
        </div>
      </Card>
    </div>
  );
}

// ══════════════════════════════════════════════════════════════
// FANE: OVERSTYRINGER
// ══════════════════════════════════════════════════════════════

function FaneOverstyringer({ innloggetId, innloggetNavn }) {
  const [overstyringer, setOverstyringer] = React.useState([]);
  const [profiler,      setProfiler]      = React.useState([]);
  const [moduler,       setModuler]       = React.useState([]);
  const [laster,        setLaster]        = React.useState(true);
  const [visSkjema,     setVisSkjema]     = React.useState(false);
  const [brukerId,      setBrukerId]      = React.useState('');
  const [modulNokkel,   setModulNokkel]   = React.useState('');
  const [niva,          setNiva]          = React.useState('L');
  const [begrunnelse,   setBegrunnelse]   = React.useState('');
  const [lagrer,        setLagrer]        = React.useState(false);
  const [feil,          setFeil]          = React.useState(null);

  React.useEffect(() => { lastInn(); }, []);

  async function lastInn() {
    setLaster(true);
    const [o, p, m] = await Promise.all([
      hentOverstyringer(),
      window._sb.from('profiles').select('id, navn, epost').order('navn'),
      window._sb.from('moduler').select('nokkel, navn').order('sortering'),
    ]);
    setOverstyringer(o);
    setProfiler(p.data || []);
    setModuler(m.data || []);
    setLaster(false);
  }

  const lagre = async () => {
    if (!brukerId || !modulNokkel) { setFeil('Velg bruker og modul.'); return; }
    setLagrer(true); setFeil(null);
    try {
      await lagreOverstyring(brukerId, modulNokkel, niva, begrunnelse, innloggetId, innloggetNavn);
      await lastInn();
      setVisSkjema(false); setBrukerId(''); setModulNokkel(''); setNiva('L'); setBegrunnelse('');
    } catch(e) { setFeil(e.message); } finally { setLagrer(false); }
  };

  const slett = async (id) => {
    await slettOverstyring(id);
    setOverstyringer(prev => prev.filter(o => o.id !== id));
  };

  const inp = { padding: '10px 12px', fontSize: 13 };

  return (
    <div style={{ marginTop: 16 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
        <div style={{ fontSize: 13, color: SK.soft }}>Per-bruker overstyringer utover tilgangsmatrisen.</div>
        <Button variant="primary" size="sm" icon={I.plus} onClick={() => setVisSkjema(v => !v)}>
          {visSkjema ? 'Avbryt' : 'Ny overstyring'}
        </Button>
      </div>

      {visSkjema && (
        <Card padded style={{ marginBottom: 16, maxWidth: 520 }}>
          {feil && <div style={{ background:'#fcddde', border:'1px solid #f2545c', borderRadius:8, padding:'9px 13px', fontSize:13, color:'#8a1620', marginBottom:12 }}>{feil}</div>}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
              <label style={{ fontSize: 11, fontWeight: 600, color: SK.soft, letterSpacing: 0.04, textTransform: 'uppercase', display: 'block', marginBottom: 5 }}>Bruker</label>
              <select className="ok-input" value={brukerId} onChange={e => setBrukerId(e.target.value)} style={inp}>
                <option value="">— Velg bruker —</option>
                {profiler.map(p => <option key={p.id} value={p.id}>{p.navn || p.epost}</option>)}
              </select>
            </div>
            <div style={{ display: 'flex', gap: 12 }}>
              <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 5 }}>
                <label style={{ fontSize: 11, fontWeight: 600, color: SK.soft, letterSpacing: 0.04, textTransform: 'uppercase', display: 'block', marginBottom: 5 }}>Modul</label>
                <select className="ok-input" value={modulNokkel} onChange={e => setModulNokkel(e.target.value)} style={inp}>
                  <option value="">— Velg modul —</option>
                  {moduler.map(m => <option key={m.nokkel} value={m.nokkel}>{m.navn}</option>)}
                </select>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
                <label style={{ fontSize: 11, fontWeight: 600, color: SK.soft, letterSpacing: 0.04, textTransform: 'uppercase', display: 'block', marginBottom: 5 }}>Nivå</label>
                <div style={{ display: 'flex', gap: 6, paddingTop: 4 }}>
                  {['L','R','A','S','·'].map(k => (
                    <div key={k} onClick={() => setNiva(k)} style={{ cursor:'pointer', transform: niva===k ? 'scale(1.2)' : 'scale(1)', transition:'transform .1s' }}>
                      <KodeCelle kode={k} size={28} />
                    </div>
                  ))}
                </div>
              </div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
              <label style={{ fontSize: 11, fontWeight: 600, color: SK.soft, letterSpacing: 0.04, textTransform: 'uppercase', display: 'block', marginBottom: 5 }}>Begrunnelse</label>
              <input className="ok-input" value={begrunnelse} onChange={e => setBegrunnelse(e.target.value)} placeholder="Hvorfor gis denne overstyringen?" style={inp} />
            </div>
            <Button variant="primary" onClick={lagre} disabled={lagrer}>{lagrer ? 'Lagrer…' : 'Lagre overstyring'}</Button>
          </div>
        </Card>
      )}

      {laster ? (
        <div style={{ padding:32, textAlign:'center', color:SK.soft, fontSize:13 }}>Laster…</div>
      ) : overstyringer.length === 0 ? (
        <div style={{ padding:32, textAlign:'center', color:SK.soft, fontSize:13 }}>Ingen overstyringer registrert.</div>
      ) : (
        <Card padded={false}>
          <table className="ok-table">
            <thead><tr><th style={{ paddingLeft:18 }}>Bruker</th><th>Modul</th><th>Nivå</th><th>Begrunnelse</th><th>Gitt av</th><th></th></tr></thead>
            <tbody>
              {overstyringer.map(o => (
                <tr key={o.id}>
                  <td style={{ paddingLeft:18, fontWeight:600, fontSize:12.5 }}>{o.profiles?.navn || o.profiles?.epost || '—'}</td>
                  <td style={{ fontSize:12 }}>{o.moduler?.navn || '—'}</td>
                  <td><KodeCelle kode={o.niva} size={24} /></td>
                  <td style={{ fontSize:12, color:SK.soft, maxWidth:240 }}>{o.begrunnelse || '—'}</td>
                  <td style={{ fontSize:12, color:SK.soft }}>{o.giver?.navn || o.gitt_av_navn || '—'}</td>
                  <td><Button size="sm" onClick={() => slett(o.id)}>Fjern</Button></td>
                </tr>
              ))}
            </tbody>
          </table>
        </Card>
      )}
    </div>
  );
}

// ══════════════════════════════════════════════════════════════
// FANE: FORESPØRSLER
// ══════════════════════════════════════════════════════════════

function FaneForesporsler({ innloggetId, innloggetNavn }) {
  const [foresporsler, setForesporsler] = React.useState([]);
  const [laster,       setLaster]       = React.useState(true);
  const [statusFilter, setStatusFilter] = React.useState('ventende');

  React.useEffect(() => { hentForesporsler().then(setForesporsler).finally(() => setLaster(false)); }, []);

  const behandle = async (id, status) => {
    await behandleForespørsel(id, status, innloggetId, innloggetNavn);
    setForesporsler(prev => prev.map(f => f.id === id ? { ...f, status } : f));
  };

  const filtrert = foresporsler.filter(f => statusFilter === 'alle' || f.status === statusFilter);

  return (
    <div style={{ marginTop: 16 }}>
      <div style={{ display: 'flex', gap: 8, marginBottom: 14 }}>
        {[['ventende','Ventende'],['godkjent','Godkjente'],['avslatt','Avslåtte'],['alle','Alle']].map(([k,l]) => (
          <button key={k} onClick={() => setStatusFilter(k)} className="ok-btn ok-btn--sm" style={{
            background: statusFilter===k ? SK.ink : 'transparent',
            color: statusFilter===k ? '#fff' : SK.ink,
            borderColor: statusFilter===k ? SK.ink : 'rgba(17,24,61,.15)',
          }}>{l} ({foresporsler.filter(f => k==='alle' || f.status===k).length})</button>
        ))}
      </div>

      {laster ? (
        <div style={{ padding:32, textAlign:'center', color:SK.soft, fontSize:13 }}>Laster…</div>
      ) : filtrert.length === 0 ? (
        <div style={{ padding:32, textAlign:'center', color:SK.soft, fontSize:13 }}>Ingen forespørsler.</div>
      ) : (
        <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
          {filtrert.map(f => {
            const ventende = f.status === 'ventende';
            return (
              <Card key={f.id} padded>
                <div style={{ display:'flex', gap:14, alignItems:'flex-start' }}>
                  <div style={{ flex:1, minWidth:0 }}>
                    <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:6 }}>
                      <span style={{ fontWeight:600, fontSize:13 }}>{f.profiles?.navn || f.profiles?.epost || '—'}</span>
                      {f.haster && <span style={{ fontSize:10, fontWeight:700, color:SK.coral, background:SK.lightCoral, padding:'1px 7px', borderRadius:99 }}>Haster</span>}
                      <span style={{ fontSize:11, marginLeft:'auto', padding:'2px 8px', borderRadius:99,
                        background: f.status==='godkjent' ? '#dbeed8' : f.status==='avslatt' ? '#fcddde' : '#fdeac8',
                        color: f.status==='godkjent' ? '#1b6a2e' : f.status==='avslatt' ? '#8a1620' : '#8e5a05',
                        fontWeight:600 }}>{f.status}</span>
                    </div>
                    <div style={{ fontSize:12.5, color:SK.soft, marginBottom:6 }}>
                      Ønsker <b style={{ color:SK.ink }}>{AKS_KODER[f.onsket_niva]?.label}</b> på <b style={{ color:SK.ink }}>{f.moduler?.navn}</b>
                    </div>
                    {f.begrunnelse && <div style={{ fontSize:12, lineHeight:1.5 }}>{f.begrunnelse}</div>}
                    <div style={{ fontSize:11, color:SK.soft, marginTop:6 }}>
                      {new Date(f.created_at).toLocaleDateString('nb-NO')}
                      {f.godkjenner?.navn && ` · Godkjenner: ${f.godkjenner.navn}`}
                    </div>
                  </div>
                  {ventende && (
                    <div style={{ display:'flex', flexDirection:'column', gap:6, flexShrink:0 }}>
                      <Button size="sm" variant="primary" onClick={() => behandle(f.id,'godkjent')}>Godkjenn</Button>
                      <Button size="sm" onClick={() => behandle(f.id,'avslatt')}>Avslå</Button>
                    </div>
                  )}
                </div>
              </Card>
            );
          })}
        </div>
      )}
    </div>
  );
}

// ══════════════════════════════════════════════════════════════
// FANE: AKTIVITETSLOGG
// ══════════════════════════════════════════════════════════════

function FaneLogg() {
  const [logg,   setLogg]   = React.useState([]);
  const [laster, setLaster] = React.useState(true);
  const TONE = {
    tilgang:     { dot:'#2f5a28', bg:'#dbeed8' },
    avslag:      { dot:'#a01a25', bg:'#fcddde' },
    innlogging:  { dot:'#3c4a6b', bg:'#e9eef7' },
    sperre:      { dot:'#a01a25', bg:'#fcddde' },
    rolle:       { dot:'#4a3a7a', bg:'#e6e1f3' },
    innstilling: { dot:'#11183d', bg:'#e5f3fc' },
    eksport:     { dot:'#8e5a05', bg:'#fdeac8' },
  };
  React.useEffect(() => { tilgangHentLogg().then(setLogg).finally(() => setLaster(false)); }, []);

  return (
    <div style={{ marginTop:16 }}>
      {laster ? (
        <div style={{ padding:32, textAlign:'center', color:SK.soft, fontSize:13 }}>Laster logg…</div>
      ) : logg.length === 0 ? (
        <div style={{ padding:32, textAlign:'center', color:SK.soft, fontSize:13 }}>Ingen aktivitet registrert ennå.</div>
      ) : (
        <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
          {logg.map(l => {
            const tone = TONE[l.type] || { dot: SK.soft, bg: SK.iceBlueLight };
            return (
              <div key={l.id} style={{ display:'flex', gap:12, alignItems:'flex-start', padding:'10px 14px', borderRadius:8, background: tone.bg + '55' }}>
                <span style={{ width:8, height:8, borderRadius:'50%', background:tone.dot, flexShrink:0, marginTop:4 }} />
                <div style={{ flex:1 }}>
                  <div style={{ fontSize:12.5 }}>{l.tekst}</div>
                  <div style={{ fontSize:11, color:SK.soft, marginTop:3 }}>
                    {l.utfort_av || 'System'} · {new Date(l.created_at).toLocaleString('nb-NO', { day:'numeric', month:'short', hour:'2-digit', minute:'2-digit' })}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

// ══════════════════════════════════════════════════════════════
// FANE: ENHETSTILGANG
// ══════════════════════════════════════════════════════════════

function FaneEnhetTilgang({ innloggetId }) {
  const [regler,    setRegler]    = React.useState([]);
  const [profiler,  setProfiler]  = React.useState([]);
  const [enheter,   setEnheter]   = React.useState([]);
  const [moduler,   setModuler]   = React.useState([]);
  const [laster,    setLaster]    = React.useState(true);
  const [visSkjema, setVisSkjema] = React.useState(false);
  const [pId,       setPId]       = React.useState('');
  const [eId,       setEId]       = React.useState('');
  const [mNokkel,   setMNokkel]   = React.useState('');
  const [niva,      setNiva]      = React.useState('L');
  const [lagrer,    setLagrer]    = React.useState(false);
  const [feil,      setFeil]      = React.useState(null);

  React.useEffect(() => { lastInn(); }, []);

  async function lastInn() {
    setLaster(true);
    const [r, p, e, m] = await Promise.all([
      hentEnhetTilgang(),
      window._sb.from('profiles').select('id,navn,epost').order('navn'),
      window._sb.from('enheter').select('id,navn').eq('aktiv',true).order('sortering'),
      window._sb.from('moduler').select('id,nokkel,navn').order('sortering'),
    ]);
    setRegler(r); setProfiler(p.data||[]); setEnheter(e.data||[]); setModuler(m.data||[]);
    setLaster(false);
  }

  const lagre = async () => {
    if (!pId || !eId) { setFeil('Velg bruker og enhet.'); return; }
    setLagrer(true); setFeil(null);
    try {
      const modul = mNokkel ? moduler.find(m => m.nokkel === mNokkel) : null;
      await lagreEnhetTilgang(pId, eId, modul?.id || null, niva);
      await lastInn();
      setVisSkjema(false); setPId(''); setEId(''); setMNokkel(''); setNiva('L');
    } catch(e) { setFeil(e.message); } finally { setLagrer(false); }
  };

  const inp = { padding: '10px 12px', fontSize: 13 };
  const lbl = { fontSize: 11, fontWeight: 600, color: SK.soft, letterSpacing: 0.04, textTransform: 'uppercase', display: 'block', marginBottom: 5 };

  return (
    <div style={{ marginTop:16 }}>
      <div style={{ background:SK.iceBlueLight, borderRadius:10, padding:'14px 18px', marginBottom:16, fontSize:12.5, color:SK.ink, lineHeight:1.6 }}>
        <div style={{ fontWeight:600, marginBottom:6 }}>Slik fungerer enhetsbasert tilgang</div>
        <div style={{ color:SK.soft }}>
          Tilgang til data styres automatisk av hvilken <b>avdeling</b> brukeren tilhører:
          <div style={{ marginTop:8, display:'grid', gridTemplateColumns:'auto 1fr', gap:'4px 12px' }}>
            <span style={{ fontWeight:600, color:SK.ink }}>Daglig leder / HR / styre / kvalitet</span><span>ser data fra hele organisasjonen</span>
            <span style={{ fontWeight:600, color:SK.ink }}>Avdelingsleder</span><span>ser sin egen avdeling + alle underenheter</span>
            <span style={{ fontWeight:600, color:SK.ink }}>Vanlig ansatt</span><span>ser kun sin egen avdeling</span>
          </div>
          <div style={{ marginTop:10 }}>
            Reglene nedenfor gir <b>ekstra</b> tilgang til enheter en bruker ellers ikke ville sett —
            f.eks. en koordinator som skal følge opp flere avdelinger.
          </div>
        </div>
      </div>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:16, gap:16 }}>
        <div style={{ fontSize:13, color:SK.soft, lineHeight:1.6, maxWidth:560 }}>
          Gi en bruker tilgang til en ekstra enhet/avdeling utover sin egen.
        </div>
        <Button variant="primary" size="sm" icon={I.plus} onClick={() => setVisSkjema(v => !v)}>
          {visSkjema ? 'Avbryt' : 'Ny regel'}
        </Button>
      </div>

      {visSkjema && (
        <Card padded style={{ marginBottom:16, maxWidth:560 }}>
          {feil && <div style={{ background:'#fcddde', border:'1px solid #f2545c', borderRadius:8, padding:'9px 13px', fontSize:13, color:'#8a1620', marginBottom:12 }}>{feil}</div>}
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12, marginBottom:14 }}>
            <div style={{ display:'flex', flexDirection:'column', gap:5 }}>
              <label style={lbl}>Bruker *</label>
              <select className="ok-input" value={pId} onChange={e => setPId(e.target.value)} style={inp}>
                <option value="">— Velg bruker —</option>
                {profiler.map(p => <option key={p.id} value={p.id}>{p.navn || p.epost}</option>)}
              </select>
            </div>
            <div style={{ display:'flex', flexDirection:'column', gap:5 }}>
              <label style={lbl}>Enhet *</label>
              <select className="ok-input" value={eId} onChange={e => setEId(e.target.value)} style={inp}>
                <option value="">— Velg enhet —</option>
                {enheter.map(e => <option key={e.id} value={e.id}>{e.navn}</option>)}
              </select>
            </div>
            <div style={{ display:'flex', flexDirection:'column', gap:5 }}>
              <label style={lbl}>Modul (valgfritt)</label>
              <select className="ok-input" value={mNokkel} onChange={e => setMNokkel(e.target.value)} style={inp}>
                <option value="">Alle moduler</option>
                {moduler.map(m => <option key={m.nokkel} value={m.nokkel}>{m.navn}</option>)}
              </select>
            </div>
            <div style={{ display:'flex', flexDirection:'column', gap:5 }}>
              <label style={lbl}>Tilgangsnivå</label>
              <div style={{ display:'flex', gap:6, paddingTop:6 }}>
                {['L','R','A','S','·'].map(k => (
                  <div key={k} onClick={() => setNiva(k)} style={{ cursor:'pointer', transform:niva===k?'scale(1.2)':'scale(1)', transition:'transform .1s' }}>
                    <KodeCelle kode={k} size={26} />
                  </div>
                ))}
              </div>
            </div>
          </div>
          <Button variant="primary" onClick={lagre} disabled={lagrer}>{lagrer ? 'Lagrer…' : 'Lagre regel'}</Button>
        </Card>
      )}

      {laster ? (
        <div style={{ padding:32, textAlign:'center', color:SK.soft, fontSize:13 }}>Laster…</div>
      ) : regler.length === 0 ? (
        <div style={{ padding:32, textAlign:'center', color:SK.soft, fontSize:13 }}>Ingen enhetstilganger registrert.</div>
      ) : (
        <Card padded={false}>
          <table className="ok-table">
            <thead><tr><th style={{ paddingLeft:18 }}>Bruker</th><th>Enhet</th><th>Modul</th><th>Nivå</th><th></th></tr></thead>
            <tbody>
              {regler.map(r => (
                <tr key={r.id}>
                  <td style={{ paddingLeft:18, fontWeight:600, fontSize:12.5 }}>{r.profiles?.navn || r.profiles?.epost || '—'}</td>
                  <td style={{ fontSize:12 }}>{r.enheter?.navn || '—'}</td>
                  <td style={{ fontSize:12, color:SK.soft }}>{r.moduler?.navn || 'Alle moduler'}</td>
                  <td><KodeCelle kode={r.niva} size={24} /></td>
                  <td><Button size="sm" onClick={() => slettEnhetTilgang(r.id).then(lastInn)}>Fjern</Button></td>
                </tr>
              ))}
            </tbody>
          </table>
        </Card>
      )}
    </div>
  );
}

// ══════════════════════════════════════════════════════════════
// FANE: INNSTILLINGER
// ══════════════════════════════════════════════════════════════

function Toggle({ value, onChange }) {
  return (
    <div onClick={() => onChange(!value)} style={{ width:36, height:20, borderRadius:10,
      background: value ? SK.coral : 'rgba(17,24,61,.2)', position:'relative', cursor:'pointer',
      transition:'background .2s', flexShrink:0 }}>
      <div style={{ position:'absolute', top:3, left: value ? 18 : 3, width:14, height:14,
        borderRadius:'50%', background:'#fff', transition:'left .2s', boxShadow:'0 1px 3px rgba(0,0,0,.2)' }} />
    </div>
  );
}

function FaneInnstillinger({ innloggetId }) {
  const [vals,   setVals]   = React.useState({});
  const [laster, setLaster] = React.useState(true);
  const [lagrer, setLagrer] = React.useState(null);

  const GRUPPER = [
    { gruppe:'Sikkerhet', valg:[
      { k:'mfa_ledere',      navn:'Påkrevd 2-faktor for ledere',        desc:'Daglig leder, avd.ledere og stab.',    type:'toggle' },
      { k:'mfa_alle',        navn:'Påkrevd 2-faktor for alle',           desc:'Gjelder alle brukere.',               type:'toggle' },
      { k:'sso_microsoft',   navn:'Single sign-on (Microsoft 365)',      desc:'Innlogging via Entra ID.',             type:'toggle' },
      { k:'session_timeout', navn:'Automatisk utlogging',                desc:'Logg ut inaktive økter.',              type:'select', opts:['15 min','30 min','1 time','8 timer'] },
    ]},
    { gruppe:'Personvern & data', valg:[
      { k:'audit_logg',      navn:'Audit-logg',                          desc:'Logg alle tilgangsendringer.',         type:'toggle' },
      { k:'logg_oppbevaring',navn:'Oppbevaringstid logg',                desc:'Hvor lenge loggen lagres.',            type:'select', opts:['6 måneder','12 måneder','24 måneder','5 år'] },
      { k:'maskering',       navn:'Maskering av deltakerdata',           desc:'Skjul fnr for roller uten admin.',     type:'toggle' },
      { k:'eksport_tilgang', navn:'Tillat dataeksport',                  desc:'Hvem kan eksportere rapporter.',       type:'select', opts:['Alle','Kun ledere','Kun daglig leder'] },
    ]},
    { gruppe:'Varsler', valg:[
      { k:'varsel_foresp',   navn:'Varsle ved tilgangsforespørsel',      desc:'Send e-post til godkjenner.',          type:'toggle' },
      { k:'varsel_ny_enhet', navn:'Varsle ved innlogging fra ny enhet',  desc:'Send varsel til brukeren.',            type:'toggle' },
      { k:'ukerapp',         navn:'Ukentlig sikkerhetssammendrag',       desc:'Til daglig leder hver mandag.',        type:'toggle' },
    ]},
  ];

  React.useEffect(() => { hentInnstillinger().then(setVals).finally(() => setLaster(false)); }, []);

  const sett = async (nokkel, verdi) => {
    setVals(p => ({ ...p, [nokkel]: String(verdi) }));
    setLagrer(nokkel);
    await lagreInnstilling(nokkel, String(verdi), innloggetId);
    setLagrer(null);
  };

  if (laster) return <div style={{ padding:32, textAlign:'center', color:SK.soft, fontSize:13 }}>Laster innstillinger…</div>;

  return (
    <div style={{ display:'flex', flexDirection:'column', gap:20, marginTop:16 }}>
      {GRUPPER.map(gruppe => (
        <Card key={gruppe.gruppe} padded>
          <div style={{ fontSize:13, fontWeight:600, marginBottom:14 }}>{gruppe.gruppe}</div>
          <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
            {gruppe.valg.map(v => {
              const val = vals[v.k];
              return (
                <div key={v.k} style={{ display:'flex', alignItems:'flex-start', gap:14 }}>
                  <div style={{ flex:1 }}>
                    <div style={{ fontSize:13, fontWeight:500 }}>{v.navn}</div>
                    <div style={{ fontSize:12, color:SK.soft, marginTop:2 }}>{v.desc}</div>
                  </div>
                  {lagrer === v.k && <span style={{ fontSize:11, color:SK.soft }}>lagrer…</span>}
                  {v.type==='toggle' && (
                    <Toggle value={val==='true'} onChange={nv => sett(v.k, nv)} />
                  )}
                  {v.type==='select' && (
                    <select className="ok-input" value={val||v.opts[0]} onChange={e => sett(v.k, e.target.value)} style={{ padding:'5px 10px', fontSize:12, maxWidth:160 }}>
                      {v.opts.map(o => <option key={o} value={o}>{o}</option>)}
                    </select>
                  )}
                </div>
              );
            })}
          </div>
        </Card>
      ))}
    </div>
  );
}

// ══════════════════════════════════════════════════════════════
// TILGANG WORKSPACE
// ══════════════════════════════════════════════════════════════

function TilgangWorkspace({ go }) {
  const [tab,          setTab]          = React.useState('brukere');
  const [stats,        setStats]        = React.useState(null);
  const [innloggetId,  setInnloggetId]  = React.useState(null);
  const [innloggetNavn,setInnloggetNavn]= React.useState('');
  const [alleProfiler, setAlleProfiler] = React.useState([]);

  React.useEffect(() => {
    window._sb.auth.getUser().then(({ data: { user } }) => {
      if (!user) return;
      setInnloggetId(user.id);
      window._sb.from('profiles').select('navn,epost').eq('id', user.id).single()
        .then(({ data }) => setInnloggetNavn(data?.navn || data?.epost || user.email));
    });
    lastInnStats();
    window._sb.from('profiles').select('id,navn,epost,rolle_id,admin_nivaa,roller(nokkel,navn,farge),enhet_id,enheter(navn)')
      .order('navn').then(({ data }) => setAlleProfiler(data || []));
  }, []);

  async function lastInnStats() {
    const s = await hentTilgangStatistikk();
    setStats(s);
  }

  const tabs = [
    { id: 'brukere',      label: 'Brukere' },
    { id: 'matrise',      label: 'Roller & matrise' },
    { id: 'pr_bruker',    label: 'Tilgang pr. bruker' },
    { id: 'enhet_tilgang',label: 'Enhetstilgang' },
    { id: 'overstyr',     label: `Overstyringer${stats ? ` (${stats.overstyringer})` : ''}` },
    { id: 'foresp',       label: `Forespørsler${stats ? ` (${stats.ventende})` : ''}` },
    { id: 'logg',         label: 'Aktivitet' },
    { id: 'sesom_logg',   label: '«Se som»-logg' },
    { id: 'innstill',     label: 'Innstillinger' },
  ];

  return (
    <div className="ok-content__inner" style={{ maxWidth: 1320 }}>

      <div style={{ display:'flex', alignItems:'flex-end', justifyContent:'space-between', marginBottom:22 }}>
        <div>
          <div style={{ fontSize:11, fontWeight:600, color:SK.soft, letterSpacing:0.08, textTransform:'uppercase' }}>Administrasjon</div>
          <h1 style={{ margin:'6px 0 0', fontSize:28, fontWeight:600, letterSpacing:-0.02 }}>Tilganger & innstillinger</h1>
          <div style={{ marginTop:4, color:SK.soft, fontSize:13 }}>Brukere · roller · tilgangsmatrise · audit-logg</div>
        </div>
        <div style={{ display:'flex', gap:8 }}>
          <SeSomVelger profiler={alleProfiler} kompakt />
        </div>
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'repeat(5, 1fr)', gap:14, marginBottom:18 }}>
        <Card padded><KPI label="Brukere totalt" value={stats?.totalt ?? '…'} sub={`${stats?.medRolle ?? '…'} med rolle`} /></Card>
        <Card padded><KPI label="Roller" value={stats?.antRoller ?? '…'} sub="i systemet" /></Card>
        <Card padded><KPI label="Overstyringer" value={stats?.overstyringer ?? '…'} sub="utover rolle" /></Card>
        <Card padded><KPI label="Ventende" value={stats?.ventende ?? '…'} sub="forespørsler" accent={(stats?.ventende || 0) > 0} /></Card>
        <Card padded><KPI label="Uten rolle" value={stats ? stats.totalt - stats.medRolle : '…'} sub="mangler tilgang" accent={stats ? (stats.totalt - stats.medRolle) > 0 : false} /></Card>
      </div>

      <Tabs tabs={tabs} value={tab} onChange={setTab} />

      {tab === 'brukere'       && <FaneBrukere go={go} />}
      {tab === 'matrise'       && <FaneMatrise onRollerEndret={lastInnStats} />}
      {tab === 'pr_bruker'     && <FaneBrukerTilgang />}
      {tab === 'enhet_tilgang' && <FaneEnhetTilgang innloggetId={innloggetId} />}
      {tab === 'overstyr'      && <FaneOverstyringer innloggetId={innloggetId} innloggetNavn={innloggetNavn} />}
      {tab === 'foresp'        && <FaneForesporsler innloggetId={innloggetId} innloggetNavn={innloggetNavn} />}
      {tab === 'logg'          && <FaneLogg />}
      {tab === 'sesom_logg'    && <FaneSeSomLogg />}
      {tab === 'innstill'      && <FaneInnstillinger innloggetId={innloggetId} />}
    </div>
  );
}

Object.assign(window, { FaneForesporsler, FaneOverstyringer, FaneLogg, FaneInnstillinger, Toggle, TilgangWorkspace });