// styre.jsx — Styreportal med Supabase + full funksjonalitet

async function STYRE_hentMoter() {
  const { data, error } = await window._sb
    .from('styre_moter')
    .select('*, saker:styre_saker(id,nr,tittel,type,rekkefølge)')
    .order('dato', { ascending: false });
  if (error) throw error;
  return (data||[]).map(m => ({ ...m, saker: (m.saker||[]).sort((a,b)=>a.rekkefølge-b.rekkefølge) }));
}

async function STYRE_hentVedtak() {
  const { data, error } = await window._sb
    .from('styre_vedtak')
    .select('*, mote:styre_moter!mote_id(id,nr,dato)')
    .order('dato', { ascending: false });
  if (error) throw error;
  return data || [];
}

async function STYRE_hentDokumenter() {
  const { data, error } = await window._sb
    .from('styre_dokumenter')
    .select('*, mote:styre_moter!mote_id(id,nr,dato)')
    .order('opprettet_at', { ascending: false });
  if (error) throw error;
  return data || [];
}

async function STYRE_hentMedlemmer() {
  const { data, error } = await window._sb.from('styre_medlemmer').select('*').order('opprettet_at');
  if (error) throw error;
  return data || [];
}

async function STYRE_opprettMote(felter) {
  const { data, error } = await window._sb.from('styre_moter').insert([felter]).select().single();
  if (error) throw error;
  return data;
}

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

async function STYRE_lagreSaker(moteId, saker) {
  await window._sb.from('styre_saker').delete().eq('mote_id', moteId);
  if (!saker.length) return;
  await window._sb.from('styre_saker').insert(saker.map((s,i) => ({ mote_id: moteId, nr: s.nr, tittel: s.tittel, type: s.type, rekkefølge: i })));
}

async function STYRE_leggTilVedtak(felter) {
  const { mote, ...rene } = felter;
  const { data, error } = await window._sb.from('styre_vedtak').insert([rene]).select().single();
  if (error) throw error;
  return data;
}

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

async function STYRE_lastOppDokument(felter) {
  const { mote, ...rene } = felter;
  const { data, error } = await window._sb.from('styre_dokumenter').insert([rene]).select().single();
  if (error) throw error;
  return data;
}

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

async function STYRE_opprettMedlem(felter) {
  const { data, error } = await window._sb.from('styre_medlemmer').insert([felter]).select().single();
  if (error) throw error;
  return data;
}

// ── Konstanter ────────────────────────────────────────────────

const STYRE_MØTE_STATUS = {
  planlagt:    { label:'Planlagt',    bg:'#e9eef7', fg:'#3c4a6b' },
  innkalt:     { label:'Innkalt',     bg:'#fdeac8', fg:'#8e5a05' },
  gjennomfort: { label:'Gjennomført', bg:'#dbeed8', fg:'#1b6a2e' },
};
const STYRE_SAKSTYPE = {
  beslutning:  { label:'Beslutning',  bg:'#fcddde', fg:'#8a1620' },
  orientering: { label:'Orientering', bg:'#e9eef7', fg:'#3c4a6b' },
  drøfting:    { label:'Drøfting',    bg:'#e6e1f3', fg:'#4a3a7a' },
};
const STYRE_VEDTAK_STATUS = {
  fattet:       { label:'Fattet',       bg:'#dbeed8', fg:'#1b6a2e' },
  under_arbeid: { label:'Under arbeid', bg:'#fdeac8', fg:'#8e5a05' },
  fullfort:     { label:'Fullført',     bg:'#e9eef7', fg:'#3c4a6b' },
  trukket:      { label:'Trukket',      bg:'#f0f4fc', fg:'#6f7795' },
};
const STYRE_DOK_TYPE = {
  Protokoll:    { bg:'#e9eef7', fg:'#3c4a6b' },
  Innkalling:   { bg:'#fdeac8', fg:'#8e5a05' },
  Saksframlegg: { bg:'#fcddde', fg:'#8a1620' },
  Rapport:      { bg:'#dbeed8', fg:'#1b6a2e' },
  Vedlegg:      { bg:'#e6e1f3', fg:'#4a3a7a' },
};

function styreFmt(d) {
  if (!d) return '—';
  return new Date(d).toLocaleDateString('nb-NO', { day:'numeric', month:'long', year:'numeric' });
}
function styreFmtKort(d) {
  if (!d) return '—';
  return new Date(d).toLocaleDateString('nb-NO', { day:'numeric', month:'short', year:'numeric' });
}

function StyrePill({ status, type }) {
  const tone = status ? (STYRE_MØTE_STATUS[status]||STYRE_MØTE_STATUS.planlagt) : (STYRE_SAKSTYPE[type]||STYRE_SAKSTYPE.orientering);
  return <span style={{ fontSize:10, fontWeight:600, padding:'2px 8px', borderRadius:99, background:tone.bg, color:tone.fg, whiteSpace:'nowrap' }}>{tone.label}</span>;
}

// ── Møteskjema ────────────────────────────────────────────────

function STYRE_MoteSkjema({ mote, onLagret, onAvbryt }) {
  const [nr,     setNr]     = React.useState(mote?.nr || '');
  const [dato,   setDato]   = React.useState(mote?.dato || '');
  const [tid,    setTid]    = React.useState(mote?.tid || '');
  const [sted,   setSted]   = React.useState(mote?.sted || '');
  const [status, setStatus] = React.useState(mote?.status || 'planlagt');
  const [saker,  setSaker]  = React.useState(mote?.saker || []);
  const [nyNr,   setNyNr]   = React.useState('');
  const [nyTittel,setNyTittel] = React.useState('');
  const [nyType, setNyType] = React.useState('beslutning');
  const [laster, setLaster] = React.useState(false);
  const [feil,   setFeil]   = React.useState(null);

  const leggTilSak = () => {
    if (!nyNr.trim() || !nyTittel.trim()) return;
    setSaker(prev => [...prev, { nr: nyNr.trim(), tittel: nyTittel.trim(), type: nyType }]);
    setNyNr(''); setNyTittel('');
  };

  const lagre = async () => {
    if (!nr.trim() || !dato) { setFeil('Møtenummer og dato er påkrevd.'); return; }
    setLaster(true); setFeil(null);
    try {
      const felter = { nr, dato, tid: tid||null, sted: sted||null, status };
      const res = mote ? await STYRE_oppdaterMote(mote.id, felter) : await STYRE_opprettMote(felter);
      await STYRE_lagreSaker(res.id, saker);
      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 };
  const INP = { padding:'10px 12px', fontSize:13 };

  return (
    <div style={{ padding:'22px 26px' }}>
      <div style={{ fontSize:15, fontWeight:600, marginBottom:20 }}>{mote ? 'Rediger styremøte' : 'Nytt styremøte'}</div>
      {feil && <div style={{ background:'#fcddde', border:'1px solid #f2545c', borderRadius:8, padding:'10px 14px', fontSize:13, color:'#8a1620', marginBottom:16 }}>{feil}</div>}
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'16px 20px', marginBottom:20 }}>
        <div style={{ display:'flex', flexDirection:'column' }}>
          <label style={LBL}>Møtenummer *</label>
          <input className="ok-input" value={nr} onChange={e=>setNr(e.target.value)} autoFocus style={INP} placeholder="f.eks. Styremøte 4/2026" />
        </div>
        <div style={{ display:'flex', flexDirection:'column' }}>
          <label style={LBL}>Status</label>
          <select className="ok-input" value={status} onChange={e=>setStatus(e.target.value)} style={INP}>
            {Object.entries(STYRE_MØTE_STATUS).map(([k,v]) => <option key={k} value={k}>{v.label}</option>)}
          </select>
        </div>
        <div style={{ display:'flex', flexDirection:'column' }}>
          <label style={LBL}>Dato *</label>
          <input className="ok-input" type="date" value={dato} onChange={e=>setDato(e.target.value)} style={INP} />
        </div>
        <div style={{ display:'flex', flexDirection:'column' }}>
          <label style={LBL}>Tid</label>
          <input className="ok-input" value={tid} onChange={e=>setTid(e.target.value)} style={INP} placeholder="f.eks. 16:00 – 18:30" />
        </div>
        <div style={{ gridColumn:'1/-1', display:'flex', flexDirection:'column' }}>
          <label style={LBL}>Sted / lokasjon</label>
          <input className="ok-input" value={sted} onChange={e=>setSted(e.target.value)} style={INP} placeholder="f.eks. Lambertseter · styrerom + Teams" />
        </div>

        {/* Saksliste */}
        <div style={{ gridColumn:'1/-1' }}>
          <label style={{ ...LBL, marginBottom:10 }}>Saksliste ({saker.length} saker)</label>
          {saker.length > 0 && (
            <div style={{ marginBottom:12, display:'flex', flexDirection:'column', gap:6 }}>
              {saker.map((s,i) => (
                <div key={i} style={{ display:'flex', gap:10, alignItems:'center', padding:'8px 12px', background:SK.iceBlueLight, borderRadius:8 }}>
                  <span style={{ fontSize:11.5, fontWeight:600, color:SK.soft, minWidth:40 }}>{s.nr}</span>
                  <span style={{ flex:1, fontSize:13 }}>{s.tittel}</span>
                  <StyrePill type={s.type} />
                  <button onClick={() => setSaker(prev=>prev.filter((_,j)=>j!==i))}
                    style={{ background:'none', border:'none', cursor:'pointer', color:SK.soft, fontSize:16, padding:'0 4px' }}>×</button>
                </div>
              ))}
            </div>
          )}
          <div style={{ display:'grid', gridTemplateColumns:'80px 1fr 140px auto', gap:8, alignItems:'center' }}>
            <input className="ok-input" value={nyNr} onChange={e=>setNyNr(e.target.value)} style={{ ...INP, fontSize:12 }} placeholder="Saksnr" />
            <input className="ok-input" value={nyTittel} onChange={e=>setNyTittel(e.target.value)}
              onKeyDown={e=>e.key==='Enter'&&leggTilSak()}
              style={{ ...INP, fontSize:12 }} placeholder="Sakstittel" />
            <select className="ok-input" value={nyType} onChange={e=>setNyType(e.target.value)} style={{ ...INP, fontSize:12 }}>
              {Object.entries(STYRE_SAKSTYPE).map(([k,v]) => <option key={k} value={k}>{v.label}</option>)}
            </select>
            <Button size="sm" onClick={leggTilSak} disabled={!nyNr.trim()||!nyTittel.trim()}>+ Legg til</Button>
          </div>
        </div>
      </div>
      <div style={{ display:'flex', gap:10 }}>
        <Button variant="primary" onClick={lagre} disabled={laster}>{laster ? 'Lagrer…' : (mote ? 'Lagre endringer' : 'Opprett møte')}</Button>
        <Button onClick={onAvbryt}>Avbryt</Button>
      </div>
    </div>
  );
}

// ── Vedtaksskjema ─────────────────────────────────────────────

function STYRE_VedtakSkjema({ vedtak, moter, onLagret, onAvbryt }) {
  const [tittel,       setTittel]       = React.useState(vedtak?.tittel || '');
  const [vedtakstekst, setVedtakstekst] = React.useState(vedtak?.vedtakstekst || '');
  const [moteId,       setMoteId]       = React.useState(vedtak?.mote_id || '');
  const [sakNr,        setSakNr]        = React.useState(vedtak?.sak_nr || '');
  const [dato,         setDato]         = React.useState(vedtak?.dato || new Date().toISOString().split('T')[0]);
  const [status,       setStatus]       = React.useState(vedtak?.status || 'fattet');
  const [laster,       setLaster]       = React.useState(false);
  const [feil,         setFeil]         = React.useState(null);

  const lagre = async () => {
    if (!tittel.trim() || !vedtakstekst.trim()) { setFeil('Tittel og vedtakstekst er påkrevd.'); return; }
    setLaster(true); setFeil(null);
    const felter = { tittel, vedtakstekst, mote_id: moteId||null, sak_nr: sakNr||null, dato, status };
    try {
      const res = vedtak ? await STYRE_oppdaterVedtak(vedtak.id, felter) : await STYRE_leggTilVedtak(felter);
      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 };
  const INP = { padding:'10px 12px', fontSize:13 };

  return (
    <div style={{ padding:'22px 26px' }}>
      <div style={{ fontSize:15, fontWeight:600, marginBottom:20 }}>{vedtak ? 'Rediger vedtak' : 'Registrer vedtak'}</div>
      {feil && <div style={{ background:'#fcddde', border:'1px solid #f2545c', borderRadius:8, padding:'10px 14px', fontSize:13, color:'#8a1620', marginBottom:16 }}>{feil}</div>}
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'16px 20px', marginBottom:20 }}>
        <div style={{ gridColumn:'1/-1', display:'flex', flexDirection:'column' }}>
          <label style={LBL}>Vedtakstittel *</label>
          <input className="ok-input" value={tittel} onChange={e=>setTittel(e.target.value)} autoFocus style={INP} placeholder="f.eks. Godkjenning av årsregnskap 2025" />
        </div>
        <div style={{ display:'flex', flexDirection:'column' }}>
          <label style={LBL}>Styremøte</label>
          <select className="ok-input" value={moteId} onChange={e=>setMoteId(e.target.value)} style={INP}>
            <option value="">— Ikke knyttet til møte —</option>
            {moter.map(m => <option key={m.id} value={m.id}>{m.nr} · {styreFmtKort(m.dato)}</option>)}
          </select>
        </div>
        <div style={{ display:'flex', flexDirection:'column' }}>
          <label style={LBL}>Saksnummer</label>
          <input className="ok-input" value={sakNr} onChange={e=>setSakNr(e.target.value)} style={INP} placeholder="f.eks. 12/26" />
        </div>
        <div style={{ display:'flex', flexDirection:'column' }}>
          <label style={LBL}>Dato</label>
          <input className="ok-input" type="date" value={dato} onChange={e=>setDato(e.target.value)} style={INP} />
        </div>
        <div style={{ display:'flex', flexDirection:'column' }}>
          <label style={LBL}>Status</label>
          <select className="ok-input" value={status} onChange={e=>setStatus(e.target.value)} style={INP}>
            {Object.entries(STYRE_VEDTAK_STATUS).map(([k,v]) => <option key={k} value={k}>{v.label}</option>)}
          </select>
        </div>
        <div style={{ gridColumn:'1/-1', display:'flex', flexDirection:'column' }}>
          <label style={LBL}>Vedtakstekst *</label>
          <textarea className="ok-input" value={vedtakstekst} onChange={e=>setVedtakstekst(e.target.value)}
            rows={4} style={{ ...INP, resize:'vertical', fontFamily:'inherit', lineHeight:1.6 }}
            placeholder="Styret vedtar at…" />
        </div>
      </div>
      <div style={{ display:'flex', gap:10 }}>
        <Button variant="primary" onClick={lagre} disabled={laster}>{laster ? 'Lagrer…' : (vedtak ? 'Lagre' : 'Registrer vedtak')}</Button>
        <Button onClick={onAvbryt}>Avbryt</Button>
      </div>
    </div>
  );
}

// ── Dokumentskjema ────────────────────────────────────────────

function STYRE_DokSkjema({ moter, onLagret, onAvbryt }) {
  const [tittel,    setTittel]    = React.useState('');
  const [type,      setType]      = React.useState('Saksframlegg');
  const [format,    setFormat]    = React.useState('PDF');
  const [moteId,    setMoteId]    = React.useState('');
  const [url,       setUrl]       = React.useState('');
  const [fortrolig, setFortrolig] = React.useState(false);
  const [laster,    setLaster]    = React.useState(false);
  const [feil,      setFeil]      = React.useState(null);

  const lagre = async () => {
    if (!tittel.trim()) { setFeil('Tittel er påkrevd.'); return; }
    setLaster(true); setFeil(null);
    try {
      const res = await STYRE_lastOppDokument({ tittel, type, format, mote_id: moteId||null, url: url||null, fortrolig });
      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 };
  const INP = { padding:'10px 12px', fontSize:13 };

  return (
    <div style={{ padding:'22px 26px' }}>
      <div style={{ fontSize:15, fontWeight:600, marginBottom:20 }}>Legg til dokument</div>
      {feil && <div style={{ background:'#fcddde', border:'1px solid #f2545c', borderRadius:8, padding:'10px 14px', fontSize:13, color:'#8a1620', marginBottom:16 }}>{feil}</div>}
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'16px 20px', marginBottom:20 }}>
        <div style={{ gridColumn:'1/-1', display:'flex', flexDirection:'column' }}>
          <label style={LBL}>Dokumenttittel *</label>
          <input className="ok-input" value={tittel} onChange={e=>setTittel(e.target.value)} autoFocus style={INP} />
        </div>
        <div style={{ display:'flex', flexDirection:'column' }}>
          <label style={LBL}>Type</label>
          <select className="ok-input" value={type} onChange={e=>setType(e.target.value)} style={INP}>
            {Object.keys(STYRE_DOK_TYPE).map(t => <option key={t} value={t}>{t}</option>)}
          </select>
        </div>
        <div style={{ display:'flex', flexDirection:'column' }}>
          <label style={LBL}>Format</label>
          <select className="ok-input" value={format} onChange={e=>setFormat(e.target.value)} style={INP}>
            {['PDF','Word','Excel','PowerPoint'].map(f => <option key={f} value={f}>{f}</option>)}
          </select>
        </div>
        <div style={{ display:'flex', flexDirection:'column' }}>
          <label style={LBL}>Knytt til møte</label>
          <select className="ok-input" value={moteId} onChange={e=>setMoteId(e.target.value)} style={INP}>
            <option value="">— Ikke knyttet —</option>
            {moter.map(m => <option key={m.id} value={m.id}>{m.nr} · {styreFmtKort(m.dato)}</option>)}
          </select>
        </div>
        <div style={{ gridColumn:'1/-1', display:'flex', flexDirection:'column' }}>
          <label style={LBL}>URL / lenke</label>
          <input className="ok-input" value={url} onChange={e=>setUrl(e.target.value)} style={INP} placeholder="https://…" />
        </div>
        <div style={{ gridColumn:'1/-1', display:'flex', alignItems:'center', gap:10 }}>
          <input type="checkbox" id="fortrolig" checked={fortrolig} onChange={e=>setFortrolig(e.target.checked)} style={{ width:18, height:18 }} />
          <label htmlFor="fortrolig" style={{ fontSize:13, cursor:'pointer' }}>Fortrolig dokument (vises kun for styremedlemmer)</label>
        </div>
      </div>
      <div style={{ display:'flex', gap:10 }}>
        <Button variant="primary" onClick={lagre} disabled={laster}>{laster ? 'Lagrer…' : 'Legg til'}</Button>
        <Button onClick={onAvbryt}>Avbryt</Button>
      </div>
    </div>
  );
}

// ── StyreWorkspace (hoved) ────────────────────────────────────

function StyreWorkspace({ go }) {
  const [moter,      setMoter]      = React.useState([]);
  const [vedtak,     setVedtak]     = React.useState([]);
  const [dokumenter, setDokumenter] = React.useState([]);
  const [medlemmer,  setMedlemmer]  = React.useState([]);
  const [laster,     setLaster]     = React.useState(true);
  const [feil,       setFeil]       = React.useState(null);
  const [fane,       setFane]       = React.useState('oversikt');
  const [panel,      setPanel]      = React.useState(null);
  const [valgtMote,  setValgtMote]  = React.useState(null);
  const [valgtVedtak,setValgtVedtak]= React.useState(null);
  const [redigerMedlem, setRedigerMedlem] = React.useState(null);

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

  async function lastInn() {
    setLaster(true); setFeil(null);
    try {
      const [m, v, d, med] = await Promise.all([STYRE_hentMoter(), STYRE_hentVedtak(), STYRE_hentDokumenter(), STYRE_hentMedlemmer()]);
      setMoter(m); setVedtak(v); setDokumenter(d); setMedlemmer(med);
    } catch(err) { setFeil(err.message); } finally { setLaster(false); }
  }

  const nesteMote = moter.find(m => m.status === 'innkalt') || moter.find(m => m.status === 'planlagt');
  const åpneVedtak = vedtak.filter(v => v.status === 'under_arbeid').length;
  const fortroligeDok = dokumenter.filter(d => d.fortrolig).length;

  const FANER = [
    { id:'oversikt', label:'Oversikt' },
    { id:'moter',    label:`Møter (${moter.length})` },
    { id:'vedtak',   label:`Vedtak (${vedtak.length})`, badge: åpneVedtak },
    { id:'dokumenter', label:`Dokumenter (${dokumenter.length})` },
    { id:'styret',   label:`Styret (${medlemmer.length})` },
  ];

  return (
    <div className="ok-content__inner" style={{ maxWidth:1320 }}>
      {/* Header */}
      <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' }}>Styreportal</div>
          <h1 style={{ margin:'6px 0 0', fontSize:28, fontWeight:600, letterSpacing:-0.02 }}>Styreportal</h1>
          <div style={{ marginTop:4, color:SK.soft, fontSize:13 }}>
            {moter.length} møter · {vedtak.length} vedtak · {dokumenter.length} dokumenter
            {åpneVedtak > 0 && <span style={{ color:SK.coral }}> · {åpneVedtak} vedtak under arbeid</span>}
          </div>
        </div>
        <div style={{ display:'flex', gap:8, flexWrap:'wrap', justifyContent:'flex-end' }}>
          <Button size="sm" onClick={lastInn}>Oppdater</Button>
          {fane === 'moter'     && <Button variant="primary" icon={I.plus} onClick={() => setPanel('nyMote')}>Nytt styremøte</Button>}
          {fane === 'vedtak'    && <Button variant="primary" icon={I.plus} onClick={() => setPanel('nyVedtak')}>Registrer vedtak</Button>}
          {fane === 'dokumenter'&& <Button variant="primary" icon={I.plus} onClick={() => setPanel('nyDok')}>Legg til dokument</Button>}
          {fane === 'styret'    && <Button variant="primary" icon={I.plus} onClick={() => setPanel('nyMedlem')}>Legg til styremedlem</Button>}
        </div>
      </div>

      {/* KPI */}
      <div style={{ display:'grid', gridTemplateColumns:'repeat(5,1fr)', gap:12, marginBottom:22 }}>
        <Card padded><KPI label="Styremøter" value={laster?'…':moter.length} sub="registrert" /></Card>
        <Card padded><KPI label="Neste møte" value={nesteMote ? styreFmtKort(nesteMote.dato).split(' ').slice(0,2).join(' ') : '—'} sub={nesteMote?.nr || 'ikke planlagt'} /></Card>
        <Card padded><KPI label="Vedtak" value={laster?'…':vedtak.length} sub="totalt" /></Card>
        <Card padded><KPI label="Under arbeid" value={laster?'…':åpneVedtak} sub="vedtak pågår" accent={åpneVedtak>0} /></Card>
        <Card padded><KPI label="Fortrolige dok." value={laster?'…':fortroligeDok} sub="i arkivet" /></Card>
      </div>

      {feil && <div style={{ background:'#fcddde', border:'1px solid #f2545c', borderRadius:8, padding:'10px 14px', fontSize:13, color:'#8a1620', marginBottom:16 }}>{feil}</div>}

      {/* Skjema-panel */}
      {panel && (
        <Card padded={false} style={{ marginBottom:22 }}>
          {panel === 'nyMote' && <STYRE_MoteSkjema onLagret={async res => { setMoter(prev=>[res,...prev]); await STYRE_hentMoter().then(setMoter); setPanel(null); }} onAvbryt={() => setPanel(null)} />}
          {panel === 'redigerMote' && valgtMote && <STYRE_MoteSkjema mote={valgtMote} onLagret={async res => { await STYRE_hentMoter().then(setMoter); setValgtMote(null); setPanel(null); }} onAvbryt={() => setPanel(null)} />}
          {panel === 'nyVedtak'   && <STYRE_VedtakSkjema moter={moter} onLagret={res => { setVedtak(prev=>[res,...prev]); setPanel(null); }} onAvbryt={() => setPanel(null)} />}
          {panel === 'redigerVedtak' && valgtVedtak && <STYRE_VedtakSkjema vedtak={valgtVedtak} moter={moter} onLagret={res => { setVedtak(prev=>prev.map(v=>v.id===res.id?res:v)); setValgtVedtak(null); setPanel(null); }} onAvbryt={() => setPanel(null)} />}
          {panel === 'nyDok'      && <STYRE_DokSkjema moter={moter} onLagret={res => { setDokumenter(prev=>[res,...prev]); setPanel(null); }} onAvbryt={() => setPanel(null)} />}
          {panel === 'nyMedlem'   && <STYRE_MedlemSkjema onLagret={res => { setMedlemmer(prev=>[...prev,res]); setPanel(null); }} onAvbryt={() => setPanel(null)} />}
          {panel === 'redigerMedlem' && redigerMedlem && <STYRE_MedlemSkjema medlem={redigerMedlem} onLagret={res => { setMedlemmer(prev=>prev.map(m=>m.id===res.id?res:m)); setRedigerMedlem(null); setPanel(null); }} onAvbryt={() => setPanel(null)} />}
        </Card>
      )}

      {/* Faner */}
      <div style={{ display:'flex', borderBottom:'1px solid rgba(17,24,61,.08)', marginBottom:20 }}>
        {FANER.map(f => (
          <button key={f.id} onClick={() => { setFane(f.id); setPanel(null); }} style={{
            background:'none', border:'none', cursor:'pointer', padding:'9px 18px',
            fontSize:13, fontWeight: fane===f.id ? 600 : 400,
            color: fane===f.id ? SK.ink : SK.soft,
            borderBottom: fane===f.id ? `2px solid ${SK.coral}` : '2px solid transparent',
            fontFamily:'inherit', display:'flex', alignItems:'center', gap:6,
          }}>
            {f.label}
            {f.badge > 0 && <span style={{ fontSize:10, fontWeight:700, padding:'1px 6px', borderRadius:99, background:SK.coral, color:'#fff' }}>{f.badge}</span>}
          </button>
        ))}
      </div>

      {laster ? (
        <Card padded><div style={{ padding:32, textAlign:'center', color:SK.soft, fontSize:13 }}>Laster…</div></Card>
      ) : (
        <>
          {/* ── OVERSIKT ── */}
          {fane === 'oversikt' && (
            <div style={{ display:'grid', gridTemplateColumns:'1.2fr 1fr', gap:18 }}>
              {/* Neste møte */}
              {nesteMote ? (
                <div style={{ background:SK.ink, borderRadius:14, padding:'24px 28px', color:'#fff' }}>
                  <div style={{ fontSize:11, fontWeight:600, letterSpacing:0.08, textTransform:'uppercase', opacity:.6, marginBottom:10 }}>Neste styremøte</div>
                  <div style={{ fontSize:24, fontWeight:600, marginBottom:6 }}>{nesteMote.nr}</div>
                  <div style={{ fontSize:15, opacity:.85, marginBottom:4 }}>{styreFmt(nesteMote.dato)}</div>
                  {nesteMote.tid && <div style={{ fontSize:13, opacity:.7 }}>{nesteMote.tid}</div>}
                  {nesteMote.sted && <div style={{ fontSize:13, opacity:.7, marginTop:3 }}>{nesteMote.sted}</div>}
                  <div style={{ marginTop:16 }}>
                    <StyrePill status={nesteMote.status} />
                  </div>
                  {nesteMote.saker?.length > 0 && (
                    <div style={{ marginTop:18, paddingTop:16, borderTop:'1px solid rgba(255,255,255,.15)' }}>
                      <div style={{ fontSize:11, opacity:.6, marginBottom:10, fontWeight:600, letterSpacing:.04, textTransform:'uppercase' }}>
                        Agenda — {nesteMote.saker.length} saker
                      </div>
                      {nesteMote.saker.map(s => (
                        <div key={s.id} style={{ fontSize:12.5, opacity:.85, padding:'6px 0', borderBottom:'1px solid rgba(255,255,255,.08)', display:'flex', justifyContent:'space-between', alignItems:'center', gap:10 }}>
                          <div style={{ display:'flex', gap:10 }}>
                            <span style={{ opacity:.5, fontSize:11, minWidth:32 }}>{s.nr}</span>
                            <span>{s.tittel}</span>
                          </div>
                          <span style={{ fontSize:9, fontWeight:700, padding:'1px 6px', borderRadius:99,
                            background: STYRE_SAKSTYPE[s.type]?.bg || '#e9eef7',
                            color: STYRE_SAKSTYPE[s.type]?.fg || '#3c4a6b', flexShrink:0 }}>
                            {STYRE_SAKSTYPE[s.type]?.label || s.type}
                          </span>
                        </div>
                      ))}
                    </div>
                  )}
                  <div style={{ marginTop:16, display:'flex', gap:8 }}>
                    <button onClick={() => { setValgtMote(nesteMote); setPanel('redigerMote'); setFane('moter'); }} style={{
                      padding:'7px 14px', borderRadius:99, border:'1px solid rgba(255,255,255,.3)', background:'transparent',
                      color:'#fff', fontSize:12, fontWeight:500, cursor:'pointer', fontFamily:'inherit' }}>
                      Rediger møte
                    </button>
                  </div>
                </div>
              ) : (
                <Card padded>
                  <div style={{ padding:'40px 0', textAlign:'center', color:SK.soft, fontSize:13 }}>
                    Ingen kommende styremøter planlagt.
                    <div style={{ marginTop:12 }}><Button variant="primary" icon={I.plus} onClick={() => { setFane('moter'); setPanel('nyMote'); }}>Planlegg møte</Button></div>
                  </div>
                </Card>
              )}

              {/* Siste vedtak */}
              <Card padded={false}>
                <div style={{ padding:'14px 18px', borderBottom:'1px solid rgba(17,24,61,.07)', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
                  <span style={{ fontSize:13, fontWeight:600 }}>Siste vedtak</span>
                  <Button size="sm" onClick={() => setFane('vedtak')}>Se alle →</Button>
                </div>
                {vedtak.length === 0 ? (
                  <div style={{ padding:'24px 18px', fontSize:13, color:SK.soft, textAlign:'center' }}>Ingen vedtak registrert.</div>
                ) : vedtak.slice(0,5).map((v,i) => {
                  const stat = STYRE_VEDTAK_STATUS[v.status] || STYRE_VEDTAK_STATUS.fattet;
                  return (
                    <div key={v.id} style={{ padding:'11px 18px', borderTop: i>0 ? '1px solid rgba(17,24,61,.06)' : 'none', cursor:'pointer' }}
                      onClick={() => { setValgtVedtak(v); setPanel('redigerVedtak'); setFane('vedtak'); }}>
                      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', gap:8 }}>
                        <div style={{ fontWeight:500, fontSize:12.5, flex:1 }}>{v.tittel}</div>
                        <span style={{ fontSize:10, fontWeight:600, padding:'2px 7px', borderRadius:99, background:stat.bg, color:stat.fg, flexShrink:0 }}>{stat.label}</span>
                      </div>
                      <div style={{ fontSize:11, color:SK.soft, marginTop:3 }}>{v.mote?.nr || '—'} · {styreFmtKort(v.dato)}</div>
                    </div>
                  );
                })}
              </Card>
            </div>
          )}

          {/* ── MØTER ── */}
          {fane === 'moter' && (
            <div style={{ display:'grid', gridTemplateColumns: valgtMote ? '1.2fr 1fr' : '1fr', gap:18, alignItems:'flex-start' }}>
              <Card padded={false}>
                <table className="ok-table">
                  <thead>
                    <tr>
                      <th style={{ paddingLeft:18 }}>Møte</th>
                      <th>Dato</th>
                      <th>Tid</th>
                      <th>Sted</th>
                      <th>Saker</th>
                      <th>Status</th>
                      <th></th>
                    </tr>
                  </thead>
                  <tbody>
                    {moter.map(m => {
                      const stat = STYRE_MØTE_STATUS[m.status] || STYRE_MØTE_STATUS.planlagt;
                      return (
                        <tr key={m.id} onClick={() => setValgtMote(valgtMote?.id===m.id ? null : m)}
                          style={{ background: valgtMote?.id===m.id ? SK.iceBlueLight : 'transparent', borderLeft:`3px solid ${valgtMote?.id===m.id ? SK.coral : 'transparent'}`, cursor:'pointer' }}>
                          <td style={{ paddingLeft:18 }}><div style={{ fontWeight:600, fontSize:12.5 }}>{m.nr}</div></td>
                          <td style={{ fontSize:12.5, whiteSpace:'nowrap' }}>{styreFmt(m.dato)}</td>
                          <td style={{ fontSize:12, color:SK.soft }}>{m.tid || '—'}</td>
                          <td style={{ fontSize:12, color:SK.soft }}>{m.sted || '—'}</td>
                          <td style={{ fontSize:12.5 }}>{m.saker?.length || 0}</td>
                          <td><StyrePill status={m.status} /></td>
                          <td><Button size="sm" onClick={e=>{e.stopPropagation();setValgtMote(m);setPanel('redigerMote');}}>Rediger</Button></td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </Card>

              {valgtMote && (
                <Card padded={false}>
                  <div style={{ padding:'14px 18px', borderBottom:'1px solid rgba(17,24,61,.07)', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
                    <div>
                      <div style={{ fontSize:12, color:SK.soft, marginBottom:2 }}>{styreFmt(valgtMote.dato)}</div>
                      <div style={{ fontSize:15, fontWeight:600 }}>{valgtMote.nr}</div>
                    </div>
                    <button onClick={() => setValgtMote(null)} style={{ background:'none', border:'1px solid rgba(17,24,61,.15)', borderRadius:'50%', width:28, height:28, cursor:'pointer', color:SK.soft, display:'flex', alignItems:'center', justifyContent:'center' }}>
                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
                    </button>
                  </div>
                  <div style={{ padding:'14px 18px' }}>
                    {valgtMote.tid && <div style={{ fontSize:13, marginBottom:6 }}>⏰ {valgtMote.tid}</div>}
                    {valgtMote.sted && <div style={{ fontSize:13, marginBottom:12, color:SK.soft }}>📍 {valgtMote.sted}</div>}
                    {valgtMote.saker?.length > 0 ? (
                      <div>
                        <div style={{ fontSize:11, fontWeight:600, color:SK.soft, letterSpacing:.04, textTransform:'uppercase', marginBottom:10 }}>Saksliste</div>
                        {valgtMote.saker.map((s,i) => (
                          <div key={s.id||i} style={{ display:'flex', gap:10, padding:'8px 0', borderBottom:'1px solid rgba(17,24,61,.05)', alignItems:'center' }}>
                            <span style={{ fontSize:11, color:SK.soft, minWidth:36, flexShrink:0 }}>{s.nr}</span>
                            <span style={{ flex:1, fontSize:13 }}>{s.tittel}</span>
                            <StyrePill type={s.type} />
                          </div>
                        ))}
                      </div>
                    ) : (
                      <div style={{ fontSize:13, color:SK.soft }}>Ingen saker registrert.</div>
                    )}
                    <div style={{ marginTop:14, paddingTop:14, borderTop:'1px solid rgba(17,24,61,.07)' }}>
                      <div style={{ fontSize:11, fontWeight:600, color:SK.soft, letterSpacing:.04, textTransform:'uppercase', marginBottom:8 }}>Dokumenter</div>
                      {dokumenter.filter(d => d.mote_id === valgtMote.id).map(d => {
                        const tone = STYRE_DOK_TYPE[d.type] || STYRE_DOK_TYPE.Vedlegg;
                        return (
                          <div key={d.id} style={{ display:'flex', gap:10, alignItems:'center', padding:'6px 0', borderBottom:'1px solid rgba(17,24,61,.05)' }}>
                            <span style={{ fontSize:10, fontWeight:600, padding:'1px 7px', borderRadius:4, background:tone.bg, color:tone.fg }}>{d.type}</span>
                            <span style={{ flex:1, fontSize:12.5 }}>{d.tittel}</span>
                            {d.fortrolig && <span style={{ fontSize:10, color:'#8a1620' }}>🔒</span>}
                            {d.url && <a href={d.url} target="_blank" style={{ fontSize:11, color:SK.ink }}>Åpne</a>}
                          </div>
                        );
                      })}
                    </div>
                  </div>
                </Card>
              )}
            </div>
          )}

          {/* ── VEDTAK ── */}
          {fane === 'vedtak' && (
            <Card padded={false}>
              {vedtak.length === 0 ? (
                <div style={{ padding:32, textAlign:'center', color:SK.soft, fontSize:13 }}>Ingen vedtak registrert.</div>
              ) : (
                <table className="ok-table">
                  <thead>
                    <tr>
                      <th style={{ paddingLeft:18 }}>Vedtak</th>
                      <th>Vedtakstekst</th>
                      <th>Møte</th>
                      <th>Dato</th>
                      <th>Status</th>
                      <th></th>
                    </tr>
                  </thead>
                  <tbody>
                    {vedtak.map(v => {
                      const stat = STYRE_VEDTAK_STATUS[v.status] || STYRE_VEDTAK_STATUS.fattet;
                      return (
                        <tr key={v.id}>
                          <td style={{ paddingLeft:18 }}>
                            <div style={{ fontWeight:600, fontSize:12.5 }}>{v.tittel}</div>
                            {v.sak_nr && <div style={{ fontSize:11, color:SK.soft }}>Sak {v.sak_nr}</div>}
                          </td>
                          <td style={{ fontSize:12, color:SK.soft, maxWidth:300 }}>
                            <div style={{ overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{v.vedtakstekst}</div>
                          </td>
                          <td style={{ fontSize:12, color:SK.soft, whiteSpace:'nowrap' }}>{v.mote?.nr || '—'}</td>
                          <td style={{ fontSize:12.5, whiteSpace:'nowrap' }}>{styreFmtKort(v.dato)}</td>
                          <td><span style={{ fontSize:10, fontWeight:600, padding:'2px 8px', borderRadius:99, background:stat.bg, color:stat.fg }}>{stat.label}</span></td>
                          <td><Button size="sm" onClick={() => { setValgtVedtak(v); setPanel('redigerVedtak'); }}>Rediger</Button></td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              )}
            </Card>
          )}

          {/* ── DOKUMENTER ── */}
          {fane === 'dokumenter' && (
            <Card padded={false}>
              {dokumenter.length === 0 ? (
                <div style={{ padding:32, textAlign:'center', color:SK.soft, fontSize:13 }}>Ingen dokumenter lastet opp.</div>
              ) : (
                <table className="ok-table">
                  <thead>
                    <tr>
                      <th style={{ paddingLeft:18 }}>Dokument</th>
                      <th>Type</th>
                      <th>Møte</th>
                      <th>Format</th>
                      <th></th>
                    </tr>
                  </thead>
                  <tbody>
                    {dokumenter.map(d => {
                      const tone = STYRE_DOK_TYPE[d.type] || STYRE_DOK_TYPE.Vedlegg;
                      return (
                        <tr key={d.id}>
                          <td style={{ paddingLeft:18 }}>
                            <div style={{ fontWeight:600, fontSize:12.5 }}>{d.tittel}</div>
                            {d.fortrolig && <span style={{ fontSize:10, fontWeight:700, color:'#8a1620', background:'#fcddde', padding:'1px 6px', borderRadius:99 }}>🔒 Fortrolig</span>}
                          </td>
                          <td><span style={{ fontSize:10, fontWeight:600, padding:'2px 8px', borderRadius:99, background:tone.bg, color:tone.fg }}>{d.type}</span></td>
                          <td style={{ fontSize:12, color:SK.soft }}>{d.mote?.nr || '—'}</td>
                          <td style={{ fontSize:12.5 }}>{d.format}</td>
                          <td>{d.url && <Button size="sm" onClick={() => window.open(d.url)}>Åpne</Button>}</td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              )}
            </Card>
          )}

          {/* ── STYRET ── */}
          {fane === 'styret' && (
            <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(300px,1fr))', gap:16 }}>
              {medlemmer.map(m => (
                <div key={m.id} style={{ background:SK.pureWhite, borderRadius:12, border:'1px solid rgba(17,24,61,.08)', borderTop:`4px solid ${m.farge || '#586ba4'}`, padding:'18px 20px' }}>
                  <div style={{ display:'flex', alignItems:'center', gap:13, marginBottom:14 }}>
                    <div style={{ width:44, height:44, borderRadius:'50%', background:m.farge||'#586ba4', color:'#fff',
                      display:'flex', alignItems:'center', justifyContent:'center', fontSize:15, fontWeight:700, flexShrink:0 }}>
                      {m.navn.split(' ').map(n=>n[0]).slice(0,2).join('')}
                    </div>
                    <div>
                      <div style={{ fontWeight:600, fontSize:14 }}>{m.navn}</div>
                      <div style={{ fontSize:12, color:SK.soft, marginTop:2 }}>{m.verv}</div>
                    </div>
                  </div>
                  {m.bakgrunn && <div style={{ fontSize:12.5, color:SK.soft, marginBottom:12, lineHeight:1.5 }}>{m.bakgrunn}</div>}
                  <div style={{ display:'flex', gap:8, flexWrap:'wrap', marginBottom:10 }}>
                    <span style={{ fontSize:10, fontWeight:600, padding:'2px 8px', borderRadius:99,
                      background: m.uavhengig ? '#dbeed8' : '#e9eef7', color: m.uavhengig ? '#1b6a2e' : '#3c4a6b' }}>
                      {m.uavhengig ? 'Uavhengig' : 'Intern'}
                    </span>
                    {m.valgt_til && m.valgt_til !== '—' && (
                      <span style={{ fontSize:10, fontWeight:600, padding:'2px 8px', borderRadius:99, background:'#e9eef7', color:SK.soft }}>
                        Valgt til {m.valgt_til}
                      </span>
                    )}
                    {m.siden && <span style={{ fontSize:10, color:SK.soft }}>Siden {m.siden}</span>}
                  </div>
                  {m.epost && <div style={{ fontSize:12, color:SK.soft }}>{m.epost}</div>}
                  <div style={{ marginTop:12, paddingTop:10, borderTop:'1px solid rgba(17,24,61,.06)' }}>
                    <Button size="sm" onClick={() => { setRedigerMedlem(m); setPanel('redigerMedlem'); }}>Rediger</Button>
                  </div>
                </div>
              ))}
            </div>
          )}
        </>
      )}
    </div>
  );
}

// ── Styremedlem-skjema ────────────────────────────────────────

function STYRE_MedlemSkjema({ medlem, onLagret, onAvbryt }) {
  const [navn,       setNavn]       = React.useState(medlem?.navn || '');
  const [verv,       setVerv]       = React.useState(medlem?.verv || 'Styremedlem');
  const [epost,      setEpost]      = React.useState(medlem?.epost || '');
  const [bakgrunn,   setBakgrunn]   = React.useState(medlem?.bakgrunn || '');
  const [siden,      setSiden]      = React.useState(medlem?.siden || new Date().getFullYear().toString());
  const [valgtTil,   setValgtTil]   = React.useState(medlem?.valgt_til || '');
  const [farge,      setFarge]      = React.useState(medlem?.farge || '#586ba4');
  const [uavhengig,  setUavhengig]  = React.useState(medlem?.uavhengig ?? true);
  const [laster,     setLaster]     = React.useState(false);
  const [feil,       setFeil]       = React.useState(null);

  const FARGER = ['#11183d','#586ba4','#08605f','#f2545c','#caa24a','#7d8aa8','#9b59b6','#1abc9c'];
  const LBL = { fontSize:11, fontWeight:600, color:SK.soft, letterSpacing:0.04, textTransform:'uppercase', display:'block', marginBottom:5 };
  const INP = { padding:'10px 12px', fontSize:13 };

  const lagre = async () => {
    if (!navn.trim() || !verv.trim()) { setFeil('Navn og verv er påkrevd.'); return; }
    setLaster(true); setFeil(null);
    const felter = { navn, verv, epost: epost||null, bakgrunn: bakgrunn||null, siden, valgt_til: valgtTil||'—', farge, uavhengig };
    try {
      const res = medlem ? await STYRE_oppdaterMedlem(medlem.id, felter) : await STYRE_opprettMedlem(felter);
      onLagret(res);
    } catch(e) { setFeil(e.message); } finally { setLaster(false); }
  };

  return (
    <div style={{ padding:'22px 26px' }}>
      <div style={{ fontSize:15, fontWeight:600, marginBottom:20 }}>{medlem ? 'Rediger styremedlem' : 'Legg til styremedlem'}</div>
      {feil && <div style={{ background:'#fcddde', border:'1px solid #f2545c', borderRadius:8, padding:'10px 14px', fontSize:13, color:'#8a1620', marginBottom:16 }}>{feil}</div>}
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'16px 20px', marginBottom:20 }}>
        <div style={{ display:'flex', flexDirection:'column' }}><label style={LBL}>Navn *</label><input className="ok-input" value={navn} onChange={e=>setNavn(e.target.value)} autoFocus style={INP} /></div>
        <div style={{ display:'flex', flexDirection:'column' }}>
          <label style={LBL}>Verv</label>
          <select className="ok-input" value={verv} onChange={e=>setVerv(e.target.value)} style={INP}>
            {['Styreleder','Nestleder','Styremedlem','Ansattrepresentant','Daglig leder (sekretær)','Varamedlem'].map(v => <option key={v} value={v}>{v}</option>)}
          </select>
        </div>
        <div style={{ display:'flex', flexDirection:'column' }}><label style={LBL}>E-post</label><input className="ok-input" type="email" value={epost} onChange={e=>setEpost(e.target.value)} style={INP} /></div>
        <div style={{ display:'flex', flexDirection:'column' }}><label style={LBL}>Valgt til år</label><input className="ok-input" value={valgtTil} onChange={e=>setValgtTil(e.target.value)} style={INP} placeholder="f.eks. 2027" /></div>
        <div style={{ gridColumn:'1/-1', display:'flex', flexDirection:'column' }}><label style={LBL}>Bakgrunn</label><input className="ok-input" value={bakgrunn} onChange={e=>setBakgrunn(e.target.value)} style={INP} placeholder="f.eks. Tidl. direktør NAV" /></div>
        <div style={{ display:'flex', flexDirection:'column' }}>
          <label style={LBL}>Farge</label>
          <div style={{ display:'flex', gap:8, flexWrap:'wrap', paddingTop:4 }}>
            {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 : '2px solid transparent' }} />)}
          </div>
        </div>
        <div style={{ display:'flex', alignItems:'center', gap:10 }}>
          <input type="checkbox" id="uavh" checked={uavhengig} onChange={e=>setUavhengig(e.target.checked)} style={{ width:18, height:18 }} />
          <label htmlFor="uavh" style={{ fontSize:13, cursor:'pointer' }}>Uavhengig styremedlem</label>
        </div>
      </div>
      <div style={{ display:'flex', gap:10 }}>
        <Button variant="primary" onClick={lagre} disabled={laster}>{laster ? 'Lagrer…' : (medlem ? 'Lagre' : 'Legg til')}</Button>
        <Button onClick={onAvbryt}>Avbryt</Button>
      </div>
    </div>
  );
}

Object.assign(window, { StyreWorkspace, StyreDokumenter: ()=>null, StyreVedtak: ()=>null, StyreArshjul: ()=>null, StyreSammensetning: ()=>null });