// budsjett-avd-innmelding.jsx — Avdelingsbudsjettering og godkjenning
// Én avdeling om gangen, månedlig visning, godkjenningsflyt.

const BAI_MND = ['Jan','Feb','Mar','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Des'];

// Kilde-merke per post-type
const BAI_KILDE = {
  lonn:           { label:'Lønn', farge:'#586ba4', fane:'lonn' },
  grunnbudsjett:  { label:'Linje', farge:SK.ink, fane:'linjer' },
  konsern:        { label:'Fordelt fra mor', farge:'#1b6a2e', fane:'viderefakt' },
  viderefakturering:{ label:'Fordelt fra mor', farge:'#1b6a2e', fane:'viderefakt' },
  selskapsintern: { label:'Intern fordeling', farge:'#8e5a05', fane:'viderefakt' },
  avtale:         { label:'Avtale', farge:'#3d6494', fane:'avtaler' },
  eiendom:        { label:'Eiendom', farge:'#08605f', fane:'eiendommer' },
};

const BAI_STATUS = {
  ikke_startet:   { label:'Ikke startet',    farge:'#b0b8c9', bg:'rgba(176,184,201,.12)' },
  under_arbeid:   { label:'Under arbeid',    farge:'#e08d3c', bg:'rgba(224,141,60,.12)' },
  til_godkjenning:{ label:'Til godkjenning', farge:'#586ba4', bg:'rgba(88,107,164,.12)' },
  godkjent:       { label:'Godkjent',        farge:'#1b6a2e', bg:'rgba(27,106,46,.12)' },
  avvist:         { label:'Avvist',          farge:SK.coral,  bg:'rgba(242,84,92,.12)' },
};

// Fordel årsbeløp på måneder basert på fordeling_jan_des eller jevnt ekskl. juli
function baiMndVerdier(linje) {
  if (linje.fordeling_jan_des && Array.isArray(linje.fordeling_jan_des) && linje.fordeling_jan_des.length===12) {
    return linje.fordeling_jan_des.map(a => (a||0) * Number(linje.belop_ar||0));
  }
  // Jevn fordeling, ekskl. juli for lønn
  const fra = Number(linje.mnd_fra||1)-1, til = Number(linje.mnd_til||12)-1;
  const res = Array(12).fill(0);
  const mndListe = [];
  for (let m=fra; m<=til; m++) { if (m!==6) mndListe.push(m); }
  if (!mndListe.length) return res;
  const perMnd = Number(linje.belop_ar||0) / mndListe.length;
  mndListe.forEach(m => { res[m] = perMnd; });
  return res;
}

// Fordel posteringer på måneder (poster har belop = årsbeløp)
function baiPostMnd(post) {
  const res = Array(12).fill(0);
  const fra = Number(post.mnd_fra||1)-1, til = Number(post.mnd_til||12)-1;
  const mndListe = [];
  for (let m=fra; m<=til; m++) { if (post.lonn && m===6) continue; mndListe.push(m); }
  if (!mndListe.length) for (let m=0;m<12;m++) { if (!post.lonn||m!==6) mndListe.push(m); }
  const perMnd = Number(post.belop||0) / (mndListe.length||12);
  mndListe.forEach(m => { res[m] = perMnd; });
  return res;
}

const baiKr = n => n == null || n===0 ? '' : Math.round(n).toLocaleString('nb-NO');
const baiSum = arr => arr.reduce((s,v)=>s+(v||0),0);

// ── Månedlig fordelingsmodal ────────────────────────────────
function BaiFordelModal({ belop_ar, navn, onLagre, onLukk }) {
  const [modus, setModus] = React.useState('jevn');
  const [verdier, setVerdier] = React.useState(Array(12).fill(''));
  const [pctVerdier, setPctVerdier] = React.useState(Array(12).fill(''));

  // Jevn fordeling over alle 12 måneder — ingen juli-sperre for manuelle poster
  const beregnJevn = () => Array(12).fill(belop_ar / 12);

  const effVerdier = modus==='jevn' ? beregnJevn()
    : modus==='pct' ? pctVerdier.map(p => (parseFloat(p)||0)/100 * belop_ar)
    : verdier.map(v => parseFloat(v)||0);

  const sumEff = baiSum(effVerdier);
  const rest   = belop_ar - sumEff;
  const restPct = belop_ar ? Math.abs(rest)/Math.abs(belop_ar)*100 : 0;

  const lagreAndeler = () => {
    const sum = baiSum(effVerdier);
    onLagre(effVerdier.map(v => sum!==0 ? v/sum : 0));
  };

  const lbl = { fontSize:10.5, fontWeight:700, color:SK.soft, textTransform:'uppercase', letterSpacing:0.04, display:'block', marginBottom:3 };

  return (
    <div onClick={onLukk} style={{ position:'fixed', inset:0, background:'rgba(17,24,61,.45)', zIndex:300, display:'flex', alignItems:'center', justifyContent:'center', padding:20 }}>
      <div onClick={e=>e.stopPropagation()} style={{ background:'#fff', borderRadius:14, padding:'24px 28px', width:'100%', maxWidth:620, boxShadow:'0 24px 64px rgba(17,24,61,.25)', maxHeight:'90vh', overflowY:'auto' }}>
        <div style={{ fontSize:16, fontWeight:700, marginBottom:4 }}>Månedlig fordeling</div>
        <div style={{ fontSize:12.5, color:SK.soft, marginBottom:16 }}>{navn} · Totalbeløp: <b>{Math.round(belop_ar).toLocaleString('nb-NO')} kr</b></div>

        <div style={{ display:'flex', gap:6, marginBottom:16 }}>
          {[['jevn','Jevn fordeling'],['pct','Angi % per måned'],['belop','Angi kr per måned']].map(([v,l])=>(
            <button key={v} onClick={()=>setModus(v)} style={{ padding:'6px 12px', borderRadius:7, fontSize:12, fontWeight:600, cursor:'pointer', fontFamily:'inherit',
              border:modus===v?'none':'1px solid rgba(17,24,61,.12)', background:modus===v?SK.ink:'#fff', color:modus===v?'#fff':SK.ink }}>{l}</button>
          ))}
        </div>

        <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:8 }}>
          {BAI_MND.map((mnd,i) => {
            const visVerdi = modus==='jevn' ? Math.round(effVerdier[i]) : modus==='pct' ? pctVerdier[i] : verdier[i];
            const pctVis = belop_ar && effVerdier[i] ? (effVerdier[i]/belop_ar*100).toFixed(1) : null;
            return (
              <div key={i}>
                <label style={lbl}>
                  {mnd}
                  {modus!=='jevn' && pctVis && <span style={{ marginLeft:4, color:SK.soft, fontWeight:400, fontSize:9.5 }}>{pctVis}%</span>}
                </label>
                {modus==='jevn' ? (
                  <div style={{ padding:'7px 10px', borderRadius:8, background:SK.iceBlueLight, fontSize:13, fontWeight:500 }}>
                    {Math.round(effVerdier[i]).toLocaleString('nb-NO')}
                  </div>
                ) : (
                  <input className="ok-input" type="number" value={visVerdi} placeholder="0"
                    onChange={e => {
                      if (modus==='pct') setPctVerdier(s=>s.map((v,j)=>j===i?e.target.value:v));
                      else setVerdier(s=>s.map((v,j)=>j===i?e.target.value:v));
                    }}
                    style={{ padding:'7px 10px', fontSize:12.5, width:'100%', boxSizing:'border-box' }} />
                )}
              </div>
            );
          })}
        </div>

        {/* Rest til fordeling */}
        <div style={{ marginTop:12, padding:'9px 12px', borderRadius:8, display:'flex', justifyContent:'space-between', alignItems:'center', fontSize:12.5,
          background: Math.abs(rest)<1 ? '#e7f4ea' : 'rgba(17,24,61,.04)',
          border: `1px solid ${Math.abs(rest)<1 ? '#86c79a' : 'rgba(17,24,61,.10)'}` }}>
          <span style={{ color:SK.soft }}>Fordelt: <b style={{ color:SK.ink }}>{Math.round(sumEff).toLocaleString('nb-NO')} kr</b></span>
          <span style={{ fontWeight:700, color: Math.abs(rest)<1 ? '#1b6a2e' : rest>0 ? '#8e5a05' : SK.coral }}>
            {Math.abs(rest)<1 ? '✓ Fullt fordelt'
              : rest>0 ? `Rest: ${Math.round(rest).toLocaleString('nb-NO')} kr (${restPct.toFixed(1)} %)`
              : `Over: ${Math.round(-rest).toLocaleString('nb-NO')} kr (${restPct.toFixed(1)} %)`}
          </span>
        </div>

        <div style={{ display:'flex', gap:10, marginTop:16 }}>
          <Button variant="primary" onClick={lagreAndeler}>Lagre fordeling</Button>
          <Button onClick={onLukk}>Avbryt</Button>
        </div>
      </div>
    </div>
  );
}

// ── Ny linje-modal ─────────────────────────────────────────
function BaiNyLinjeModal({ avdelingId, versjonId, data, satser, onLukk, onLagret }) {
  const [f, setF] = React.useState({ konto:'', tekst:'', belop_ar:'' });
  const [visFordelModal, setVisFordelModal] = React.useState(false);
  const [andeler, setAndeler] = React.useState(null);
  const [lagrer, setLagrer] = React.useState(false);
  const set = (k,v) => setF(s=>({...s,[k]:v}));
  const lonnKontoer = data.kontoplan.filter(k=>String(k.konto).startsWith('5'));
  const alleKontoer = data.kontoplan.slice().sort((a,b)=>Number(a.konto)-Number(b.konto));

  const lagre = async () => {
    if (!f.konto || !f.belop_ar) return;
    setLagrer(true);
    try {
      await window.budDB.lagre('bud_linjer', {
        versjon_id: versjonId, avdeling_id: avdelingId,
        konto: Number(f.konto), tekst: f.tekst,
        belop_ar: Number(f.belop_ar),
        fordeling_jan_des: andeler || null,
        kilde: 'manuell',
      });
      onLagret();
    } catch(e) { alert('Feil: '+e.message); setLagrer(false); }
  };

  return (
    <div onClick={onLukk} style={{ position:'fixed', inset:0, background:'rgba(17,24,61,.45)', zIndex:200, display:'flex', alignItems:'center', justifyContent:'center', padding:20 }}>
      <div onClick={e=>e.stopPropagation()} style={{ background:'#fff', borderRadius:14, padding:'24px 26px', width:'100%', maxWidth:480, boxShadow:'0 24px 64px rgba(17,24,61,.25)' }}>
        <div style={{ fontSize:16, fontWeight:700, marginBottom:16 }}>Ny budsjettpost</div>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12 }}>
          <div style={{ gridColumn:'1/-1' }}>
            <label style={{ fontSize:10.5, fontWeight:700, color:SK.soft, textTransform:'uppercase', letterSpacing:0.04, display:'block', marginBottom:4 }}>Konto *</label>
            <select className="ok-input" value={f.konto} onChange={e=>set('konto',e.target.value)} style={{ padding:'9px 10px', fontSize:13, width:'100%' }}>
              <option value="">— Velg —</option>
              {alleKontoer.map(k=><option key={k.konto} value={k.konto}>{k.konto} {k.navn}</option>)}
            </select>
          </div>
          <div style={{ gridColumn:'1/-1' }}>
            <label style={{ fontSize:10.5, fontWeight:700, color:SK.soft, textTransform:'uppercase', letterSpacing:0.04, display:'block', marginBottom:4 }}>Beskrivelse</label>
            <input className="ok-input" value={f.tekst} onChange={e=>set('tekst',e.target.value)} style={{ padding:'9px 10px', fontSize:13, width:'100%' }} placeholder="Valgfri beskrivelse" />
          </div>
          <div>
            <label style={{ fontSize:10.5, fontWeight:700, color:SK.soft, textTransform:'uppercase', letterSpacing:0.04, display:'block', marginBottom:4 }}>Årsbeløp (kr) *</label>
            <input className="ok-input" type="number" value={f.belop_ar} onChange={e=>set('belop_ar',e.target.value)} style={{ padding:'9px 10px', fontSize:13, width:'100%' }} />
          </div>
          <div style={{ display:'flex', alignItems:'flex-end' }}>
            <button onClick={()=>setVisFordelModal(true)} disabled={!f.belop_ar} style={{ padding:'9px 12px', borderRadius:8, fontSize:12.5, fontWeight:600, cursor:'pointer', fontFamily:'inherit',
              border:'1px solid rgba(17,24,61,.15)', background:'#fff', color:SK.ink, width:'100%', opacity:f.belop_ar?1:0.4 }}>
              {andeler ? '✓ Månedlig fordeling satt' : '📅 Sett månedlig fordeling'}
            </button>
          </div>
        <div style={{ display:'flex', gap:10, marginTop:16 }}>
          <Button variant="primary" onClick={lagre} disabled={lagrer||!f.konto||!f.belop_ar}>{lagrer?'Lagrer…':'Lagre'}</Button>
          <Button onClick={onLukk}>Avbryt</Button>
        </div>
        {visFordelModal && <BaiFordelModal belop_ar={Number(f.belop_ar)||0} navn={f.tekst||'Ny post'}
          onLagre={a=>{ setAndeler(a); setVisFordelModal(false); }} onLukk={()=>setVisFordelModal(false)} />}
      </div>
    </div>
  );
}

// ════════════════════════════════════════════════════════════
// HOVED-KOMPONENT: Avdelingsbudsjettering
// ════════════════════════════════════════════════════════════
function BudAvdInnmelding({ data, post, versjonId, versjon, enhById, selById, laast, onEndret, gåTilFane }) {
  const [valgtAvd,       setValgtAvd]       = React.useState(null);
  const [nyLinjeModal,   setNyLinjeModal]   = React.useState(false);
  const [kommentarModal, setKommentarModal] = React.useState(false);
  const [kommentar,      setKommentar]      = React.useState('');
  const [senderTil,      setSenderTil]      = React.useState(false);
  const [godkjenner,     setGodkjenner]     = React.useState(false);

  // Avdelinger med data, sortert
  const avdListe = data.enheter
    .filter(e=>!['styre','konsern'].includes(e.type))
    .sort((a,b)=>(a.avd_nr||'').localeCompare(b.avd_nr||''));

  React.useEffect(() => { if (!valgtAvd && avdListe.length) setValgtAvd(avdListe[0].id); }, [avdListe.length]);

  const avd = valgtAvd ? enhById[valgtAvd] : null;
  const avdStatus = (data.avdStatus||[]).find(s=>s.versjon_id===versjonId&&s.avdeling_id===valgtAvd);
  const st = avdStatus?.status || 'ikke_startet';
  const stCfg = BAI_STATUS[st] || BAI_STATUS.ikke_startet;
  const erLaast = laast || ['godkjent'].includes(st);
  const kanGodkjenne = ['til_godkjenning'].includes(st); // TODO: rollesjekk

  // Poster for valgt avdeling, fordelt på måneder
  const avdPoster = post.filter(p => p.avd_id === valgtAvd);
  const kpByKonto = Object.fromEntries((data.kontoplan||[]).map(k=>[k.konto,k]));

  // Grupper poster etter kategori (inntekt vs kostnad) og konto
  const grupper = {};
  avdPoster.forEach(p => {
    const k = kpByKonto[p.konto];
    const kat = k?.kontoklasse || (Number(p.konto)<5000?'inntekt':'drift');
    const key = kat + '|' + p.konto;
    if (!grupper[key]) grupper[key] = { kat, konto:p.konto, kontoNavn:k?.navn||'Konto '+p.konto, poster:[], mnd:Array(12).fill(0), type:p.type, kilde:p.kilde };
    const mndVerdier = baiPostMnd(p);
    mndVerdier.forEach((v,i)=>{ grupper[key].mnd[i] += v; });
    grupper[key].poster.push(p);
  });
  const radListe = Object.values(grupper).sort((a,b)=>Number(a.konto)-Number(b.konto));

  // Sumlinjer per måned
  const innMnd   = Array(12).fill(0), kostMnd = Array(12).fill(0);
  radListe.forEach(r => {
    const erInnt = Number(r.konto)<5000;
    r.mnd.forEach((v,i) => { if(erInnt) innMnd[i]+=Math.abs(v); else kostMnd[i]+=Math.abs(v); });
  });
  const resltMnd = innMnd.map((v,i) => v - kostMnd[i]);

  // Hvilke faner mangler månedlig fordeling (viktig for å sette opp riktig)
  const mangelFaner = [];
  if ((data.lonn||[]).some(l=>l.versjon_id===versjonId&&l.avdeling_id===valgtAvd)) mangelFaner.push({ id:'lonn', navn:'Lønnsbudsjett', merknad:'Sjekk ferieperiode og stillingsprosent' });
  if ((data.fordelinger||[]).some(f=>f.versjon_id===versjonId&&(f.kilde_avd_id===valgtAvd||(data.avdStatus||[]).some(()=>false)))) mangelFaner.push({ id:'viderefakt', navn:'Fordelinger', merknad:'Viderefakturering og kostnadsfordeling' });
  if ((data.eiendommer||[]).some(e=>e.versjon_id===versjonId)) mangelFaner.push({ id:'eiendommer', navn:'Eiendommer', merknad:'Arealfordeling og leiekostnader' });
  if ((data.avtaler||[]).length) mangelFaner.push({ id:'avtaler', navn:'Avtaler', merknad:'Faste avtaler genererer budsjettlinjer' });

  const oppdaterStatus = async (nyStatus, komm) => {
    const felt = { versjon_id:versjonId, avdeling_id:valgtAvd, status:nyStatus,
      sendt_at: nyStatus==='til_godkjenning'?new Date().toISOString():avdStatus?.sendt_at||null,
      godkjent_at: ['godkjent','avvist'].includes(nyStatus)?new Date().toISOString():avdStatus?.godkjent_at||null,
      kommentar: komm||avdStatus?.kommentar||null, updated_at:new Date().toISOString() };
    const eks = avdStatus;
    if (eks) await window.budDB.oppdater('bud_avd_status', eks.id, felt);
    else await window.budDB.lagre('bud_avd_status', felt);
    onEndret();
  };

  const KildeTag = ({ type, kilde }) => {
    const cfg = BAI_KILDE[type] || (kilde ? BAI_KILDE[kilde?.toLowerCase?.()] : null);
    if (!cfg) return null;
    return (
      <span onClick={()=>gåTilFane&&gåTilFane(cfg.fane)}
        style={{ fontSize:9.5, fontWeight:700, padding:'1px 6px', borderRadius:4, background:cfg.farge+'22', color:cfg.farge, cursor:'pointer', marginLeft:5, whiteSpace:'nowrap' }}
        title={`Klikk for å gå til ${cfg.label}`}>
        {cfg.label}
      </span>
    );
  };

  return (
    <div>
      {/* Avdelingsvelger */}
      <div style={{ display:'flex', gap:0, marginBottom:16, background:'#fff', borderRadius:10, border:'1px solid rgba(17,24,61,.08)', overflow:'hidden', flexWrap:'nowrap', overflowX:'auto' }}>
        {avdListe.map(e => {
          const s = (data.avdStatus||[]).find(x=>x.versjon_id===versjonId&&x.avdeling_id===e.id);
          const st = s?.status||'ikke_startet';
          const aktiv = valgtAvd===e.id;
          const dotFarge = BAI_STATUS[st]?.farge || '#b0b8c9';
          return (
            <button key={e.id} onClick={()=>setValgtAvd(e.id)} style={{ padding:'10px 14px', border:'none', borderBottom:aktiv?`2px solid ${SK.ink}`:'2px solid transparent',
              background:aktiv?SK.iceBlueLight:'transparent', cursor:'pointer', fontFamily:'inherit',
              display:'flex', flexDirection:'column', alignItems:'center', gap:4, flexShrink:0 }}>
              <span style={{ fontSize:12.5, fontWeight:aktiv?700:500, color:aktiv?SK.ink:SK.soft, whiteSpace:'nowrap' }}>{e.avd_nr} {e.navn}</span>
              <span style={{ width:6, height:6, borderRadius:'50%', background:dotFarge, display:'inline-block' }} />
            </button>
          );
        })}
      </div>

      {avd && (
        <>
          {/* Avdelings-header */}
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:14, flexWrap:'wrap', gap:10 }}>
            <div>
              <div style={{ display:'flex', alignItems:'center', gap:10, flexWrap:'wrap' }}>
                <span style={{ fontSize:18, fontWeight:800, color:SK.ink }}>{avd.navn}</span>
                <span style={{ fontSize:11.5, color:SK.soft }}>·</span>
                <span style={{ fontSize:12.5, color:SK.soft }}>{selById[avd.selskap_id]?.navn?.replace('OsloKollega ','')}</span>
                <span style={{ fontSize:12.5, color:SK.soft }}>·</span>
                <span style={{ fontSize:12.5, color:SK.soft }}>{versjon?.navn}</span>
                {avdStatus?.sendt_at && <span style={{ fontSize:11, color:SK.soft }}>Sendt: {new Date(avdStatus.sendt_at).toLocaleDateString('nb-NO')}</span>}
                {avdStatus?.godkjent_at && <span style={{ fontSize:11, color:'#1b6a2e' }}>Godkjent: {new Date(avdStatus.godkjent_at).toLocaleDateString('nb-NO')}</span>}
              </div>
              <div style={{ marginTop:6, display:'flex', gap:8, alignItems:'center', flexWrap:'wrap' }}>
                <span style={{ fontSize:12, fontWeight:700, padding:'3px 10px', borderRadius:99, background:stCfg.bg, color:stCfg.farge }}>{stCfg.label}</span>
                {avdStatus?.kommentar && <span style={{ fontSize:11.5, color:SK.soft, fontStyle:'italic' }}>«{avdStatus.kommentar}»</span>}
              </div>
            </div>
            <div style={{ display:'flex', gap:8 }}>
              {!erLaast && <Button size="sm" icon={I.plus} onClick={()=>setNyLinjeModal(true)}>Ny post</Button>}
              {!erLaast && st!=='til_godkjenning' && (
                <Button variant="primary" size="sm" onClick={()=>setKommentarModal('send')}>
                  ✓ Send til godkjenning
                </Button>
              )}
              {kanGodkjenne && (
                <>
                  <Button variant="primary" size="sm" onClick={()=>oppdaterStatus('godkjent','')}>✓ Godkjenn</Button>
                  <Button size="sm" onClick={()=>setKommentarModal('avvis')}>✗ Avvis</Button>
                </>
              )}
              {st==='til_godkjenning' && !kanGodkjenne && (
                <Button size="sm" onClick={()=>oppdaterStatus('under_arbeid','')}>Trekk tilbake</Button>
              )}
            </div>
          </div>

          {/* Månedlig fordeling — hvilke faner trengs */}
          {mangelFaner.length > 0 && (
            <div style={{ marginBottom:14, padding:'10px 14px', borderRadius:10, background:SK.iceBlueLight, border:'1px solid rgba(17,24,61,.08)', display:'flex', gap:10, alignItems:'flex-start', flexWrap:'wrap' }}>
              <span style={{ fontSize:12, fontWeight:700, color:SK.ink }}>📅 Månedlig fordeling:</span>
              {mangelFaner.map(f=>(
                <button key={f.id} onClick={()=>gåTilFane&&gåTilFane(f.id)}
                  style={{ fontSize:11.5, padding:'3px 10px', borderRadius:6, border:'1px solid rgba(17,24,61,.15)', background:'#fff', cursor:'pointer', fontFamily:'inherit', color:SK.ink }}>
                  {f.navn} →
                </button>
              ))}
              <span style={{ fontSize:11.5, color:SK.soft }}>Fordeling per måned settes i de aktuelle fanene.</span>
            </div>
          )}

          {/* Budsjettabell */}
          <div style={{ background:'#fff', borderRadius:12, border:'1px solid rgba(17,24,61,.08)', overflow:'hidden' }}>
            {/* Tabell-header */}
            <div style={{ overflowX:'auto' }}>
              <table style={{ width:'100%', borderCollapse:'collapse', minWidth:1100 }}>
                <thead>
                  <tr style={{ borderBottom:'1px solid rgba(17,24,61,.07)', background:SK.iceBlueLight }}>
                    <th style={{ padding:'9px 16px', textAlign:'left', fontSize:10.5, fontWeight:700, color:SK.soft, textTransform:'uppercase', letterSpacing:0.05, width:220, position:'sticky', left:0, background:SK.iceBlueLight, zIndex:1 }}>Budsjettpost</th>
                    {BAI_MND.map(m=><th key={m} style={{ padding:'9px 8px', textAlign:'right', fontSize:10.5, fontWeight:700, color:m==='Jul'?SK.coral:SK.soft, minWidth:68 }}>{m}</th>)}
                    <th style={{ padding:'9px 16px', textAlign:'right', fontSize:10.5, fontWeight:700, color:SK.ink }}>Sum år</th>
                  </tr>
                </thead>
                <tbody>
                  {['inntekt','lonn','drift','balanse','finans','annet'].map(kat => {
                    const rader = radListe.filter(r=>r.kat===kat);
                    if (!rader.length) return null;
                    const katNavn = { inntekt:'Driftsinntekter', lonn:'Personalkostnader', drift:'Driftskostnader', balanse:'Balanseposter', finans:'Finansposter', annet:'Andre poster' }[kat];
                    const katFarge = { inntekt:SK.coral, lonn:'#586ba4', drift:SK.ink }[kat] || SK.soft;
                    const katMnd  = Array(12).fill(0); rader.forEach(r=>r.mnd.forEach((v,i)=>katMnd[i]+=v));
                    const katSum  = baiSum(katMnd);
                    return (
                      <React.Fragment key={kat}>
                        {/* Kategori-header */}
                        <tr style={{ background:'rgba(17,24,61,.025)' }}>
                          <td style={{ padding:'7px 16px', fontSize:12, fontWeight:700, color:katFarge, position:'sticky', left:0, background:'rgba(17,24,61,.025)' }}>{katNavn}</td>
                          {Array(12).fill(0).map((_,i)=><td key={i} style={{ padding:'7px 8px', textAlign:'right', fontSize:11.5, fontWeight:600, color:katFarge }}>{baiKr(Math.round(katMnd[i]))}</td>)}
                          <td style={{ padding:'7px 16px', textAlign:'right', fontSize:12, fontWeight:700, color:katFarge }}>{baiKr(Math.round(katSum))}</td>
                        </tr>
                        {/* Data-rader */}
                        {rader.map(r => {
                          const sumAar = baiSum(r.mnd);
                          const erRedigerbar = ['grunnbudsjett'].includes(r.type);
                          const linje = (data.linjer||[]).find(l=>l.versjon_id===versjonId&&l.avdeling_id===valgtAvd&&l.konto===r.konto);
                          return (
                            <tr key={r.konto} style={{ borderBottom:'1px solid rgba(17,24,61,.04)', opacity: erRedigerbar?1:0.85 }}
                              onMouseEnter={e=>e.currentTarget.style.background='rgba(17,24,61,.015)'}
                              onMouseLeave={e=>e.currentTarget.style.background='transparent'}>
                              <td style={{ padding:'8px 16px', position:'sticky', left:0, background:'#fff' }}>
                                <div style={{ display:'flex', alignItems:'center', gap:0 }}>
                                  {!erRedigerbar && <span style={{ width:6, height:6, borderRadius:'50%', background:'rgba(17,24,61,.2)', display:'inline-block', marginRight:6, flexShrink:0 }} />}
                                  <span style={{ fontSize:12.5, color:SK.ink }}>{r.kontoNavn}</span>
                                  <KildeTag type={r.type} kilde={r.kilde} />
                                </div>
                                {!erRedigerbar && <div style={{ fontSize:10, color:SK.soft, paddingLeft:erRedigerbar?0:12 }}>Konto {r.konto}</div>}
                              </td>
                              {r.mnd.map((v,i)=>(
                                <td key={i} style={{ padding:'8px 6px', textAlign:'right', fontSize:12, color:i===6?SK.soft:SK.ink, background:i===6?'rgba(17,24,61,.02)':undefined }}>
                                  {erRedigerbar && !erLaast && linje ? (
                                    <input type="number" defaultValue={Math.round(v)||''} placeholder={i===6?'—':'0'}
                                      onBlur={async ev => {
                                        const nyVal = parseFloat(ev.target.value)||0;
                                        // Oppdater fordeling_jan_des
                                        const andeler = baiPostMnd(linje.fordeling_jan_des ? {...linje} : {...linje, belop_ar:linje.belop_ar});
                                        andeler[i] = nyVal;
                                        const totalNy = baiSum(andeler);
                                        if (totalNy > 0) {
                                          await window.budDB.oppdater('bud_linjer', linje.id, {
                                            belop_ar: totalNy,
                                            fordeling_jan_des: andeler.map(v=>totalNy?v/totalNy:0),
                                          });
                                          onEndret();
                                        }
                                      }}
                                      style={{ width:60, padding:'3px 5px', fontSize:11.5, textAlign:'right', border:'1px solid transparent', borderRadius:5, background:'transparent',
                                        fontFamily:'inherit', color:i===6?SK.soft:SK.ink }}
                                      onFocus={e=>e.target.style.border='1px solid rgba(17,24,61,.2)'}
                                      onBlurCapture={e=>e.target.style.border='1px solid transparent'}
                                      disabled={i===6} />
                                  ) : (
                                    <span style={{ color:i===6?SK.soft:undefined }}>{baiKr(Math.round(v)) || (i===6?'—':'')}</span>
                                  )}
                                </td>
                              ))}
                              <td style={{ padding:'8px 16px', textAlign:'right', fontSize:12.5, fontWeight:600, color:SK.ink }}>{baiKr(Math.round(sumAar))}</td>
                            </tr>
                          );
                        })}
                      </React.Fragment>
                    );
                  })}

                  {/* Resultatlinje */}
                  <tr style={{ borderTop:'2px solid rgba(17,24,61,.15)', background:SK.iceBlueLight }}>
                    <td style={{ padding:'10px 16px', fontSize:13, fontWeight:800, color:SK.ink, position:'sticky', left:0, background:SK.iceBlueLight }}>Driftsresultat</td>
                    {resltMnd.map((v,i)=>(
                      <td key={i} style={{ padding:'10px 6px', textAlign:'right', fontSize:12.5, fontWeight:700, color:v>=0?'#1b6a2e':SK.coral }}>{baiKr(Math.round(v))}</td>
                    ))}
                    <td style={{ padding:'10px 16px', textAlign:'right', fontSize:14, fontWeight:800, color:baiSum(resltMnd)>=0?'#1b6a2e':SK.coral }}>{baiKr(Math.round(baiSum(resltMnd)))}</td>
                  </tr>
                </tbody>
              </table>
            </div>

            {/* Bunnlinje */}
            <div style={{ padding:'10px 16px', borderTop:'1px solid rgba(17,24,61,.07)', display:'flex', gap:20, fontSize:12 }}>
              <span style={{ color:SK.coral }}>Sum inntekter <b>{baiKr(Math.round(baiSum(innMnd)))}</b></span>
              <span style={{ color:SK.ink }}>Sum kostnader <b>{baiKr(Math.round(baiSum(kostMnd)))}</b></span>
            </div>
          </div>
        </>
      )}

      {/* Modaler */}
      {nyLinjeModal && valgtAvd && (
        <BaiNyLinjeModal avdelingId={valgtAvd} versjonId={versjonId} data={data} satser={null}
          onLukk={()=>setNyLinjeModal(false)} onLagret={()=>{setNyLinjeModal(false);onEndret();}} />
      )}

      {/* Send til godkjenning / Avvis modal */}
      {kommentarModal && (
        <div onClick={()=>setKommentarModal(false)} style={{ position:'fixed', inset:0, background:'rgba(17,24,61,.45)', zIndex:200, display:'flex', alignItems:'center', justifyContent:'center', padding:20 }}>
          <div onClick={e=>e.stopPropagation()} style={{ background:'#fff', borderRadius:14, padding:'24px 26px', width:'100%', maxWidth:440, boxShadow:'0 24px 64px rgba(17,24,61,.25)' }}>
            <div style={{ fontSize:16, fontWeight:700, marginBottom:12 }}>
              {kommentarModal==='send' ? '✓ Send til godkjenning' : '✗ Avvis budsjett'}
            </div>
            <textarea className="ok-input" value={kommentar} onChange={e=>setKommentar(e.target.value)}
              style={{ width:'100%', padding:'9px 10px', fontSize:13, minHeight:80, resize:'vertical', boxSizing:'border-box', fontFamily:'inherit' }}
              placeholder={kommentarModal==='send' ? 'Valgfri merknad…' : 'Begrunn avvisningen…'} />
            <div style={{ display:'flex', gap:10, marginTop:14 }}>
              <Button variant="primary" onClick={async ()=>{
                await oppdaterStatus(kommentarModal==='send'?'til_godkjenning':'avvist', kommentar);
                setKommentarModal(false); setKommentar('');
              }}>{kommentarModal==='send'?'Send':'Avvis'}</Button>
              <Button onClick={()=>setKommentarModal(false)}>Avbryt</Button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { BudAvdInnmelding });