// rutiner-screens.jsx — Rutiner & metodikk workspace
// Tabs: Oversikt, Katalog (rutiner), Stedfortredere & fravær, Eskaleringer & varsler

// ── helpers ──────────────────────────────────────────────────────────────
const rutFmtDate = (iso) => {
  if (!iso) return '—';
  const d = new Date(iso);
  return d.toLocaleDateString('nb-NO', { day: 'numeric', month: 'short' });
};
const rutOmrade = (id) => RUT_OMRADER.find(o => o.id === id);
const rutRolle = (id) => RUT_ROLLER.find(r => r.id === id);
const rutFreqLabel = {
  daglig:       'Daglig',
  ukentlig:     'Ukentlig',
  månedlig:     'Månedlig',
  kvartalsvis:  'Kvartalsvis',
  halvårlig:    'Halvårlig',
  årlig:        'Årlig',
  adhoc:        'Ad-hoc',
};
const rutFreqColor = {
  daglig:       '#28589f',
  ukentlig:     '#586ba4',
  månedlig:     '#08605f',
  kvartalsvis:  '#f2cc8f',
  halvårlig:    '#f2545c',
  årlig:        '#11183d',
  adhoc:        'rgba(17,24,61,.4)',
};

// VVJ-ikoner gjenbrukes; legger til noen egne
const RI = {
  routine: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 12a9 9 0 1 0 9-9"/><path d="M3 4v5h5"/><path d="m12 7 0 5 4 2"/></svg>,
  swap:    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M7 16V4"/><path d="m3 8 4-4 4 4"/><path d="M17 8v12"/><path d="m21 16-4 4-4-4"/></svg>,
  alert:   <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3z"/><line x1="12" x2="12" y1="9" y2="13"/><line x1="12" x2="12.01" y1="17" y2="17"/></svg>,
  away:    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="8" r="4"/><path d="M5.5 22a8 8 0 0 1 13 0"/><line x1="3" y1="3" x2="21" y2="21"/></svg>,
  crown:   <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m3 7 4 4 5-7 5 7 4-4-2 12H5z"/></svg>,
  building: <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="16" height="20" x="4" y="2" rx="2"/><path d="M9 22v-4h6v4"/><path d="M8 6h.01M16 6h.01M12 6h.01M12 10h.01M16 10h.01M8 10h.01"/></svg>,
};

const omradeIkon = (id) => {
  switch (id) {
    case 'ledelse':  return RI.crown;
    case 'hr':       return I.users;
    case 'okonomi':  return I.chart;
    case 'kvalitet': return I.shield;
    case 'drift':    return RI.building;
    case 'entrep':   return VI.briefcase;
    default:         return RI.routine;
  }
};

// ═══════════════════════════════════════════════════════════════════════════
// WORKSPACE
// ═══════════════════════════════════════════════════════════════════════════
function RutinerWorkspaceMock({ go }) {
  const [tab, setTab] = React.useState('oversikt');
  const overdue = RUT_INSTANSER.filter(i => i.status === 'overdue').length;
  const fravaer = RUT_FRAVAER.length;
  const dueToday = RUT_INSTANSER.filter(i => i.status === 'due-today').length;

  const tabs = [
    { id: 'oversikt',   label: 'Oversikt' },
    { id: 'katalog',    label: `Katalog (${RUT_KATALOG.length})` },
    { id: 'stengeruti', label: `Stengerutiner (${STENG_LOKASJONER.length} lokasjoner)` },
    { id: 'stedfort',   label: 'Stedfortredere & fravær', badge: fravaer },
    { id: 'eskal',      label: 'Eskaleringer & varsler', badge: overdue },
  ];

  return (
    <div className="ok-content__inner" style={{ maxWidth: 1280 }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 18, gap: 24 }}>
        <div style={{ flex: 1 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
            <Pill status="track">Aktivt rammeverk</Pill>
            <span style={{ fontSize: 11.5, color: SK.soft, fontWeight: 500 }}>
              {RUT_KATALOG.length} rutiner · {RUT_ROLLER.length} roller · {RUT_OMRADER.length} områder
            </span>
          </div>
          <h1 style={{ margin: 0, fontSize: 28, fontWeight: 600, letterSpacing: -0.02 }}>
            Rutiner & metodikk
          </h1>
          <div style={{ marginTop: 6, color: SK.soft, fontSize: 13, maxWidth: 760 }}>
            Sjekklister og stegvis metodikk for hver rolle i organisasjonen. Stedfortredere
            overtar automatisk ved fravær, og oppgaver som ikke utføres innen frist
            eskaleres til stedfortreder og nærmeste leder.
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8, flexShrink: 0 }}>
          <Button size="sm" icon={I.download}>Eksporter katalog</Button>
          <Button variant="primary" icon={I.plus}>Ny rutine</Button>
        </div>
      </div>

      <div className="ok-tabs" style={{ marginBottom: 20 }}>
        {tabs.map(t => (
          <button key={t.id}
            className={`ok-tab ${tab === t.id ? 'ok-tab--active' : ''}`}
            onClick={() => setTab(t.id)}
          >
            {t.label}
            {t.badge ? (
              <span style={{
                marginLeft: 7, background: tab === t.id ? SK.coral : 'rgba(17,24,61,.1)',
                color: tab === t.id ? '#fff' : SK.soft,
                fontSize: 10, fontWeight: 600, padding: '1px 7px', borderRadius: 99,
              }}>{t.badge}</span>
            ) : null}
          </button>
        ))}
      </div>

      {tab === 'oversikt' && <RutinerOversikt setTab={setTab} kpis={{ overdue, fravaer, dueToday }} />}
      {tab === 'katalog'  && <RutinerKatalog />}
      {tab === 'stengeruti' && <StengerutinerTab />}
      {tab === 'stedfort' && <RutinerStedfortredere />}
      {tab === 'eskal'    && <RutinerEskal />}
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// OVERSIKT
// ═══════════════════════════════════════════════════════════════════════════
function RutinerOversikt({ setTab, kpis }) {
  const ferdigIdag = RUT_INSTANSER.filter(i => i.status === 'done').length;
  const aktiveStedfortr = RUT_INSTANSER.filter(i => i.note && i.note.toLowerCase().includes('stedfortreder')).length;
  const overdueList = RUT_INSTANSER.filter(i => i.status === 'overdue');
  const dueToday = RUT_INSTANSER.filter(i => i.status === 'due-today');
  const dueSoon = RUT_INSTANSER.filter(i => i.status === 'due-soon');

  // Per-område stats
  const omradeStats = RUT_OMRADER.map(o => {
    const rutiner = RUT_KATALOG.filter(r => rutRolle(r.rolle)?.omrade === o.id);
    return { ...o, antall: rutiner.length };
  });

  return (
    <div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 14, marginBottom: 14 }}>
        <Card padded>
          <KPI label="Forfaller i dag" value={kpis.dueToday + dueSoon.length} sub={`${kpis.dueToday} i dag · ${dueSoon.length} neste 3 dgr`} />
        </Card>
        <Card padded>
          <KPI label="Ferdig i dag" value={ferdigIdag} sub={`av ${ferdigIdag + dueToday.length} forfalt i dag`} />
        </Card>
        <Card padded>
          <KPI label="Overdue / eskalert" value={kpis.overdue} sub="krever handling" accent={kpis.overdue > 0} />
        </Card>
        <Card padded>
          <KPI label="Aktive fravær" value={kpis.fravaer} sub="stedfortreder aktivert" />
        </Card>
        <Card padded>
          <KPI label="Auto-overført" value={aktiveStedfortr} sub="rutiner via stedfortreder" />
        </Card>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 14, marginBottom: 14 }}>
        {/* Forfaller i dag + neste */}
        <Card title="Forfaller i dag og neste 3 dager" padded={false}
          action={<Button size="sm" variant="ghost" onClick={() => setTab('katalog')}>
            Hele katalogen <span style={{ marginLeft: 4 }}>{I.chevron}</span>
          </Button>}
        >
          <table className="ok-table">
            <thead>
              <tr>
                <th style={{ paddingLeft: 18 }}>Rutine</th>
                <th>Rolle</th>
                <th>Ansvarlig</th>
                <th>Frist</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {[...dueToday, ...dueSoon].map(i => {
                const rut = RUT_KATALOG.find(x => x.id === i.rutId);
                const rolle = rutRolle(rut.rolle);
                const omr = rutOmrade(rolle.omrade);
                const ansatt = TEAM[i.assigned];
                return (
                  <tr key={i.id} style={{ cursor: 'default' }}>
                    <td style={{ paddingLeft: 18 }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                        <span style={{ width: 28, height: 28, borderRadius: 7, background: `${omr.farge}22`, color: omr.farge, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                          {omradeIkon(omr.id)}
                        </span>
                        <div>
                          <div style={{ fontWeight: 600, fontSize: 12.5 }}>{rut.tittel}</div>
                          <div style={{ fontSize: 10.5, color: SK.soft, marginTop: 1 }}>
                            <span style={{ color: rutFreqColor[rut.freq], fontWeight: 600 }}>{rutFreqLabel[rut.freq]}</span> · {rut.plan}
                          </div>
                        </div>
                      </div>
                    </td>
                    <td style={{ fontSize: 12 }}>{rolle.navn}</td>
                    <td>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                        <Avatar initials={ansatt?.i} color={ansatt?.c} size={22} />
                        <span style={{ fontSize: 12 }}>{ansatt?.n?.split(' ')[0]}</span>
                      </div>
                    </td>
                    <td>
                      <Pill status={i.status === 'due-today' ? 'risk' : 'draft'}>
                        {i.status === 'due-today' ? 'I dag' : rutFmtDate(i.dueDate)}
                      </Pill>
                    </td>
                    <td style={{ paddingRight: 18, textAlign: 'right' }}>
                      <Button size="sm" variant="ghost">Åpne</Button>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </Card>

        {/* Hendelseslogg */}
        <Card title="Hendelser · siste 48 t"
          action={<Button size="sm" variant="ghost" onClick={() => setTab('eskal')}>Alle <span style={{ marginLeft: 4 }}>{I.chevron}</span></Button>}
        >
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {RUT_HENDELSER.slice(0, 6).map((h, i) => (
              <div key={h.id} style={{
                padding: '10px 0', borderTop: i ? '1px solid rgba(17,24,61,.06)' : 'none',
                display: 'flex', gap: 10, alignItems: 'flex-start',
              }}>
                <span style={{
                  width: 28, height: 28, borderRadius: 8, flexShrink: 0,
                  background: `${VVJ_ACCENT[h.accent] || SK.soft}22`, color: VVJ_ACCENT[h.accent] || SK.ink,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  {h.type === 'eskalering-leder' ? RI.alert
                    : h.type === 'eskalering-sted' ? RI.swap
                    : h.type === 'stedfortreder' || h.type === 'auto-overfort' ? RI.swap
                    : h.type === 'fullfort' ? I.check
                    : RI.routine}
                </span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 12.5, lineHeight: 1.35 }}>{h.tekst}</div>
                  <div style={{ fontSize: 10.5, color: SK.soft, marginTop: 2 }}>
                    {h.tid} · → {TEAM[h.mottaker]?.n?.split(' ')[0] || h.mottaker}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </Card>
      </div>

      {/* Områder */}
      <Card title="Områder · klikk for å filtrere katalogen"
        padded={false}
        action={<Button size="sm" variant="ghost" onClick={() => setTab('katalog')}>Til katalog <span style={{ marginLeft: 4 }}>{I.chevron}</span></Button>}
      >
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)' }}>
          {omradeStats.map((o, i) => (
            <div key={o.id} style={{
              padding: '18px 20px',
              borderRight: (i + 1) % 3 !== 0 ? '1px solid rgba(17,24,61,.06)' : 'none',
              borderTop: i >= 3 ? '1px solid rgba(17,24,61,.06)' : 'none',
              cursor: 'pointer',
            }} onClick={() => setTab('katalog')}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 6 }}>
                <span style={{ width: 36, height: 36, borderRadius: 8, background: `${o.farge}22`, color: o.farge, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  {omradeIkon(o.id)}
                </span>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 600, fontSize: 14 }}>{o.navn}</div>
                  <div style={{ fontSize: 11.5, color: SK.soft }}>{o.antall} rutiner</div>
                </div>
              </div>
              <div style={{ display: 'flex', gap: 6, marginTop: 10, flexWrap: 'wrap' }}>
                {RUT_ROLLER.filter(r => r.omrade === o.id).slice(0, 3).map(r => (
                  <span key={r.id} style={{
                    fontSize: 10.5, padding: '2px 8px', borderRadius: 99,
                    background: SK.iceBlueLight, color: SK.ink, fontWeight: 500,
                  }}>{r.navn}</span>
                ))}
                {RUT_ROLLER.filter(r => r.omrade === o.id).length > 3 ? (
                  <span style={{ fontSize: 10.5, color: SK.soft, padding: '2px 6px' }}>+{RUT_ROLLER.filter(r => r.omrade === o.id).length - 3}</span>
                ) : null}
              </div>
            </div>
          ))}
        </div>
      </Card>

      {/* Eskaleringsregler — info-kort */}
      <Card title="Eskaleringsregler · standard" padded style={{ marginTop: 14 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
          <EscalStep nr="0" tekst="Frist treffer" sub="rutine kommer på Mine oppgaver" />
          <EscalStep nr="+1d" tekst="Påminnelse" sub="e-post + Teams til ansvarlig" />
          <EscalStep nr="+3d" tekst="Stedfortreder varsles" sub="stedfortreder kan ta over" accent />
          <EscalStep nr="+7d" tekst="Nærmeste leder" sub="med Teams/SMS · krever respons" accent />
        </div>
        <div style={{ marginTop: 14, padding: 12, background: SK.iceBlueLight, borderRadius: 8, fontSize: 12, color: SK.soft }}>
          Hver rutine kan overstyre standarden. Helger telles ikke med. Når en ansatt registreres som fraværende (sykdom, ferie, kurs), rutes pågående og kommende rutiner umiddelbart til neste i stedfortreder-kjeden.
        </div>
      </Card>
    </div>
  );
}

function EscalStep({ nr, tekst, sub, accent }) {
  return (
    <div style={{ padding: '10px 12px', background: SK.iceBlueLight, borderRadius: 10 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
        <span style={{
          width: 28, height: 24, borderRadius: 6,
          background: accent ? SK.coral : SK.ink, color: '#fff',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          fontWeight: 700, fontSize: 11, fontFamily: 'monospace',
        }}>{nr}</span>
        <span style={{ fontWeight: 600, fontSize: 13 }}>{tekst}</span>
      </div>
      <div style={{ fontSize: 11.5, color: SK.soft }}>{sub}</div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// KATALOG — alle rutiner gruppert
// ═══════════════════════════════════════════════════════════════════════════
function RutinerKatalog() {
  const [omradeFilter, setOmradeFilter] = React.useState('all');
  const [rolleFilter, setRolleFilter] = React.useState('all');
  const [freqFilter, setFreqFilter] = React.useState('all');
  const [search, setSearch] = React.useState('');
  const [expandedId, setExpandedId] = React.useState(null);

  const liste = RUT_KATALOG.filter(r => {
    const rolle = rutRolle(r.rolle);
    if (omradeFilter !== 'all' && rolle.omrade !== omradeFilter) return false;
    if (rolleFilter !== 'all' && r.rolle !== rolleFilter) return false;
    if (freqFilter !== 'all' && r.freq !== freqFilter) return false;
    if (search && !r.tittel.toLowerCase().includes(search.toLowerCase())) return false;
    return true;
  });

  // Grupper på rolle
  const grupper = {};
  liste.forEach(r => {
    grupper[r.rolle] = grupper[r.rolle] || [];
    grupper[r.rolle].push(r);
  });

  const rollerIliste = Object.keys(grupper).map(id => rutRolle(id));

  return (
    <div>
      {/* Filter-bar */}
      <Card padded={false} style={{ marginBottom: 14 }}>
        <div style={{ padding: '12px 16px', display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
          <input className="ok-input ok-input--search" placeholder="Søk rutiner…"
            value={search} onChange={e => setSearch(e.target.value)}
            style={{ maxWidth: 220 }}
          />
          <select value={omradeFilter} onChange={e => { setOmradeFilter(e.target.value); setRolleFilter('all'); }}
            className="ok-input" style={{ maxWidth: 180, padding: '6px 10px' }}>
            <option value="all">Alle områder</option>
            {RUT_OMRADER.map(o => <option key={o.id} value={o.id}>{o.navn}</option>)}
          </select>
          <select value={rolleFilter} onChange={e => setRolleFilter(e.target.value)}
            className="ok-input" style={{ maxWidth: 200, padding: '6px 10px' }}>
            <option value="all">Alle roller</option>
            {RUT_ROLLER.filter(r => omradeFilter === 'all' || r.omrade === omradeFilter).map(r => (
              <option key={r.id} value={r.id}>{r.navn}</option>
            ))}
          </select>
          <div style={{ display: 'flex', gap: 4 }}>
            {[
              ['all', 'Alle'],
              ['daglig', 'Daglig'],
              ['ukentlig', 'Ukentlig'],
              ['månedlig', 'Månedlig'],
              ['kvartalsvis', 'Kvart.'],
              ['halvårlig', 'Halvår'],
              ['årlig', 'Årlig'],
              ['adhoc', 'Ad-hoc'],
            ].map(([k, l]) => (
              <button key={k} onClick={() => setFreqFilter(k)} className="ok-btn ok-btn--sm" style={{
                background: freqFilter === k ? SK.ink : 'transparent',
                color: freqFilter === k ? '#fff' : SK.ink,
                borderColor: freqFilter === k ? SK.ink : 'rgba(17,24,61,.15)',
              }}>{l}</button>
            ))}
          </div>
          <div style={{ marginLeft: 'auto', fontSize: 12, color: SK.soft }}>
            {liste.length} rutiner
          </div>
        </div>
      </Card>

      {/* Grupper pr. rolle */}
      {rollerIliste.length === 0 ? (
        <Card padded><div style={{ textAlign: 'center', padding: 40, color: SK.soft }}>Ingen rutiner matcher filteret.</div></Card>
      ) : (
        rollerIliste.map(rolle => {
          const omr = rutOmrade(rolle.omrade);
          const aktiv = rutAktivHolder(rolle);
          const aktivFravaer = aktiv !== rolle.chain[0] ? rolle.chain[0] : null;
          return (
            <Card key={rolle.id} padded={false} style={{ marginBottom: 14 }}>
              {/* Rolle-header */}
              <div style={{ padding: '14px 18px', borderBottom: '1px solid rgba(17,24,61,.06)', display: 'flex', alignItems: 'center', gap: 14 }}>
                <span style={{ width: 40, height: 40, borderRadius: 10, background: `${omr.farge}22`, color: omr.farge, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  {omradeIkon(omr.id)}
                </span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
                    <span style={{ fontWeight: 600, fontSize: 15 }}>{rolle.navn}</span>
                    <span style={{ fontSize: 10.5, color: SK.soft, fontWeight: 600, letterSpacing: 0.05, textTransform: 'uppercase' }}>· {omr.navn}</span>
                  </div>
                  <div style={{ fontSize: 12, color: SK.soft, marginTop: 2 }}>{rolle.beskrivelse}</div>
                </div>
                {/* Aktiv holder + stedfortreder-info */}
                <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                  <div style={{ textAlign: 'right' }}>
                    <div style={{ fontSize: 10.5, color: SK.soft, fontWeight: 600, letterSpacing: 0.04, textTransform: 'uppercase' }}>Aktiv nå</div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 6, justifyContent: 'flex-end', marginTop: 2 }}>
                      <Avatar initials={TEAM[aktiv]?.i} color={TEAM[aktiv]?.c} size={20} />
                      <span style={{ fontSize: 12.5, fontWeight: 500 }}>{TEAM[aktiv]?.n}</span>
                    </div>
                    {aktivFravaer ? (
                      <div style={{ fontSize: 10.5, color: SK.coral, marginTop: 3, fontWeight: 500 }}>
                        Stedfortreder · {TEAM[aktivFravaer]?.n} fraværende
                      </div>
                    ) : null}
                  </div>
                </div>
              </div>

              {/* Rutine-rader */}
              {grupper[rolle.id].map((rut, i) => {
                const aapen = expandedId === rut.id;
                return (
                  <div key={rut.id} style={{ borderTop: i ? '1px solid rgba(17,24,61,.06)' : 'none' }}>
                    <div
                      onClick={() => setExpandedId(aapen ? null : rut.id)}
                      style={{
                        padding: '12px 18px', display: 'flex', alignItems: 'center', gap: 14,
                        cursor: 'pointer', background: aapen ? SK.iceBlueLight : 'transparent',
                      }}
                    >
                      <span style={{
                        fontSize: 10, padding: '3px 8px', borderRadius: 99, fontWeight: 700,
                        background: `${rutFreqColor[rut.freq]}22`, color: rutFreqColor[rut.freq],
                        whiteSpace: 'nowrap', minWidth: 60, textAlign: 'center',
                      }}>{rutFreqLabel[rut.freq]}</span>
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{ fontWeight: 600, fontSize: 13 }}>{rut.tittel}</div>
                        <div style={{ fontSize: 11, color: SK.soft, marginTop: 2 }}>
                          {rut.plan} · {rut.estimert} · {rut.metodikk.length} steg
                          {rut.referanser ? <span> · ref {rut.referanser}</span> : null}
                        </div>
                      </div>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                        <span style={{ fontSize: 10.5, color: SK.soft }}>
                          Esk: +{rut.eskal.reminder}d → +{rut.eskal.deputy}d → {rut.eskal.leader ? `+${rut.eskal.leader}d` : '—'}
                        </span>
                        <span style={{ color: SK.soft, transform: aapen ? 'rotate(90deg)' : 'none', transition: 'transform .15s', display: 'inline-flex' }}>{I.chevron}</span>
                      </div>
                    </div>
                    {aapen ? (
                      <div style={{ padding: '14px 18px 18px', background: SK.iceBlueLight, borderTop: '1px solid rgba(17,24,61,.06)' }}>
                        <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 18 }}>
                          {/* Metodikk */}
                          <div>
                            <div style={{ fontSize: 10.5, fontWeight: 700, color: SK.soft, letterSpacing: 0.08, textTransform: 'uppercase', marginBottom: 8 }}>Metodikk · steg-for-steg</div>
                            <ol style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 8 }}>
                              {rut.metodikk.map((s, idx) => (
                                <li key={idx} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', background: '#fff', padding: '10px 12px', borderRadius: 8, border: '1px solid rgba(17,24,61,.06)' }}>
                                  <span style={{
                                    flexShrink: 0, width: 22, height: 22, borderRadius: '50%',
                                    background: SK.ink, color: '#fff',
                                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                                    fontSize: 11, fontWeight: 700,
                                  }}>{idx + 1}</span>
                                  <span style={{ fontSize: 12.5, lineHeight: 1.5 }}>{s}</span>
                                </li>
                              ))}
                            </ol>
                            <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
                              <Button size="sm" variant="primary" icon={I.check}>Marker som fullført</Button>
                              <Button size="sm" variant="ghost">Bytt ansvarlig</Button>
                              <Button size="sm" variant="ghost">Vis logg</Button>
                            </div>
                          </div>

                          {/* Sidekolonne */}
                          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                            <InfoBlock label="Eskalering">
                              <EscalChain rut={rut} rolle={rolle} />
                            </InfoBlock>
                            <InfoBlock label="Stedfortreder-kjede">
                              <ChainDisplay rolle={rolle} />
                            </InfoBlock>
                            {rut.referanser ? (
                              <InfoBlock label="Referanse">
                                <span style={{ fontSize: 12 }}>{rut.referanser}</span>
                              </InfoBlock>
                            ) : null}
                          </div>
                        </div>
                      </div>
                    ) : null}
                  </div>
                );
              })}
            </Card>
          );
        })
      )}
    </div>
  );
}

function InfoBlock({ label, children }) {
  return (
    <div style={{ padding: '10px 12px', background: '#fff', borderRadius: 8, border: '1px solid rgba(17,24,61,.06)' }}>
      <div style={{ fontSize: 10, fontWeight: 700, color: SK.soft, letterSpacing: 0.06, textTransform: 'uppercase', marginBottom: 4 }}>{label}</div>
      {children}
    </div>
  );
}

function EscalChain({ rut, rolle }) {
  const steps = [
    { d: 0, l: 'Frist', who: rolle.chain[0], cls: 'ink' },
    { d: rut.eskal.reminder, l: 'Påminnelse', who: rolle.chain[0], cls: 'info' },
    { d: rut.eskal.deputy, l: 'Stedfortreder', who: rolle.chain[1] || rolle.chain[0], cls: 'warn' },
    rut.eskal.leader ? { d: rut.eskal.leader, l: 'Leder', who: rolle.nearestLeader, cls: 'coral' } : null,
  ].filter(Boolean);
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      {steps.map((s, i) => (
        <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 11.5 }}>
          <span style={{
            width: 36, padding: '2px 4px', borderRadius: 5, textAlign: 'center',
            background: s.cls === 'ink' ? SK.ink : s.cls === 'info' ? SK.iceBlue
              : s.cls === 'warn' ? '#fdeac8' : SK.lightCoral,
            color: s.cls === 'ink' ? '#fff' : s.cls === 'warn' ? '#8e5a05' : s.cls === 'coral' ? '#a01a25' : SK.ink,
            fontWeight: 700, fontSize: 10, fontFamily: 'monospace',
          }}>+{s.d}d</span>
          <span style={{ flex: 1, color: SK.ink }}>{s.l}</span>
          <span style={{ color: SK.soft, fontSize: 11 }}>{TEAM[s.who]?.n?.split(' ')[0] || s.who || '—'}</span>
        </div>
      ))}
    </div>
  );
}

function ChainDisplay({ rolle }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: 4 }}>
      {rolle.chain.map((k, i) => {
        const fr = rutErFravaer(k);
        return (
          <React.Fragment key={k}>
            {i > 0 ? <span style={{ color: SK.soft, fontSize: 10 }}>→</span> : null}
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 5, padding: '3px 8px',
              background: fr ? SK.lightCoral : SK.iceBlueLight, borderRadius: 99,
              fontSize: 11.5, fontWeight: 500,
              color: fr ? '#a01a25' : SK.ink, textDecoration: fr ? 'line-through' : 'none',
            }}>
              <Avatar initials={TEAM[k]?.i} color={TEAM[k]?.c} size={16} />
              {TEAM[k]?.n?.split(' ')[0]}
            </span>
          </React.Fragment>
        );
      })}
      {rolle.nearestLeader ? (
        <>
          <span style={{ color: SK.soft, fontSize: 10, marginLeft: 4 }}>→ leder</span>
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 5, padding: '3px 8px',
            background: SK.lightCoral, borderRadius: 99, fontSize: 11.5, fontWeight: 500,
            color: '#a01a25',
          }}>
            <Avatar initials={TEAM[rolle.nearestLeader]?.i} color={TEAM[rolle.nearestLeader]?.c} size={16} />
            {TEAM[rolle.nearestLeader]?.n?.split(' ')[0]}
          </span>
        </>
      ) : null}
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// STEDFORTREDERE & FRAVÆR
// ═══════════════════════════════════════════════════════════════════════════
function RutinerStedfortredere() {
  return (
    <div>
      {/* Aktive fravær */}
      <Card title={`Aktive fravær · ${RUT_FRAVAER.length}`}
        padded={false} style={{ marginBottom: 14 }}
        action={<Button size="sm" variant="primary" icon={I.plus}>Registrer fravær</Button>}
      >
        {RUT_FRAVAER.map((f, i) => {
          const a = TEAM[f.ansatt];
          // Hvilke roller dekkes av denne ansatte
          const dekketRoller = RUT_ROLLER.filter(r => r.chain[0] === f.ansatt);
          // Hvilke rutiner går nå til stedfortreder
          const ruterTilOverforing = RUT_KATALOG.filter(r => dekketRoller.find(d => d.id === r.rolle)).length;
          return (
            <div key={i} style={{ padding: '16px 18px', borderTop: i ? '1px solid rgba(17,24,61,.06)' : 'none', display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr', gap: 18, alignItems: 'center' }}>
              <div style={{ display: 'flex', gap: 12 }}>
                <Avatar initials={a?.i} color={a?.c} size={40} />
                <div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 2 }}>
                    <span style={{ fontWeight: 600, fontSize: 14 }}>{a?.n}</span>
                    <Pill status={f.type === 'sykdom' ? 'delay' : f.type === 'kurs' ? 'draft' : 'risk'}>
                      {f.type === 'sykdom' ? 'Sykmeldt' : f.type === 'kurs' ? 'På kurs' : 'I ferie'}
                    </Pill>
                  </div>
                  <div style={{ fontSize: 12, color: SK.soft }}>{a?.r}</div>
                  <div style={{ fontSize: 11.5, color: SK.soft, marginTop: 6 }}>
                    {rutFmtDate(f.start)} – {f.slutt ? rutFmtDate(f.slutt) : 'ubestemt'} · {f.kommentar}
                  </div>
                </div>
              </div>
              <div>
                <div style={{ fontSize: 10.5, fontWeight: 700, color: SK.soft, letterSpacing: 0.04, textTransform: 'uppercase', marginBottom: 6 }}>Dekker roller ({dekketRoller.length})</div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
                  {dekketRoller.map(r => (
                    <span key={r.id} style={{ fontSize: 10.5, padding: '2px 8px', borderRadius: 99, background: SK.iceBlueLight, color: SK.ink, fontWeight: 500 }}>
                      {r.navn}
                    </span>
                  ))}
                </div>
              </div>
              <div>
                <div style={{ fontSize: 10.5, fontWeight: 700, color: SK.soft, letterSpacing: 0.04, textTransform: 'uppercase', marginBottom: 6 }}>Auto-overført til</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                  {dekketRoller.map(r => {
                    const nesteIKjede = r.chain.find(k => k !== f.ansatt && !rutErFravaer(k));
                    return (
                      <div key={r.id} style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12 }}>
                        <Avatar initials={TEAM[nesteIKjede]?.i} color={TEAM[nesteIKjede]?.c} size={18} />
                        <span style={{ fontWeight: 500 }}>{TEAM[nesteIKjede]?.n?.split(' ')[0]}</span>
                        <span style={{ color: SK.soft, fontSize: 11 }}>· {r.navn.replace('Avd.leder ', '').replace('Leder ', '')}</span>
                      </div>
                    );
                  })}
                </div>
                <div style={{ marginTop: 6, fontSize: 11, color: SK.coral, fontWeight: 500 }}>
                  ~{ruterTilOverforing} rutiner overført
                </div>
              </div>
            </div>
          );
        })}
      </Card>

      {/* Stedfortreder-matrise */}
      <Card title="Stedfortreder-kjede pr. rolle" padded={false}>
        <table className="ok-table">
          <thead>
            <tr>
              <th style={{ paddingLeft: 18 }}>Rolle</th>
              <th>Område</th>
              <th>Aktiv nå</th>
              <th>Stedfortreder-kjede</th>
              <th>Nærmeste leder</th>
              <th style={{ paddingRight: 18 }}></th>
            </tr>
          </thead>
          <tbody>
            {RUT_ROLLER.map(rolle => {
              const omr = rutOmrade(rolle.omrade);
              const aktiv = rutAktivHolder(rolle);
              const primaryFravaer = rolle.chain[0] !== aktiv;
              return (
                <tr key={rolle.id} style={{ cursor: 'default' }}>
                  <td style={{ paddingLeft: 18 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <span style={{ width: 24, height: 24, borderRadius: 6, background: `${omr.farge}22`, color: omr.farge, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                        {omradeIkon(omr.id)}
                      </span>
                      <span style={{ fontWeight: 600, fontSize: 12.5 }}>{rolle.navn}</span>
                    </div>
                  </td>
                  <td style={{ fontSize: 12 }}>{omr.navn}</td>
                  <td>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                      <Avatar initials={TEAM[aktiv]?.i} color={TEAM[aktiv]?.c} size={20} />
                      <span style={{ fontSize: 12, fontWeight: 500 }}>{TEAM[aktiv]?.n?.split(' ')[0]}</span>
                      {primaryFravaer ? <span style={{ fontSize: 10, color: SK.coral, fontWeight: 600 }}>STEDFORTR.</span> : null}
                    </div>
                  </td>
                  <td><ChainDisplay rolle={rolle} /></td>
                  <td>
                    {rolle.nearestLeader ? (
                      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                        <Avatar initials={TEAM[rolle.nearestLeader]?.i} color={TEAM[rolle.nearestLeader]?.c} size={18} />
                        <span style={{ fontSize: 11.5 }}>{TEAM[rolle.nearestLeader]?.n?.split(' ')[0]}</span>
                      </div>
                    ) : <span style={{ color: SK.soft, fontSize: 11.5 }}>—</span>}
                  </td>
                  <td style={{ paddingRight: 18, textAlign: 'right' }}>
                    <Button size="sm" variant="ghost">Endre kjede</Button>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </Card>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// ESKALERINGER & VARSLER
// ═══════════════════════════════════════════════════════════════════════════
function RutinerEskal() {
  const overdueList = RUT_INSTANSER.filter(i => i.status === 'overdue').sort((a, b) => b.daysOver - a.daysOver);
  const totalEskalert = overdueList.length;
  const tilLeder = overdueList.filter(i => i.eskalering === 'leder').length;
  const tilSted = overdueList.filter(i => i.eskalering === 'stedfortreder').length;
  const totalDager = overdueList.reduce((s, i) => s + (i.daysOver || 0), 0);

  return (
    <div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, marginBottom: 14 }}>
        <Card padded><KPI label="Overdue totalt" value={totalEskalert} sub="rutiner over frist" accent={totalEskalert > 0} /></Card>
        <Card padded><KPI label="Eskalert til leder" value={tilLeder} sub="krever umiddelbar handling" accent={tilLeder > 0} /></Card>
        <Card padded><KPI label="Til stedfortreder" value={tilSted} sub="under oppfølging" /></Card>
        <Card padded><KPI label="Snitt dgr over" value={totalEskalert > 0 ? Math.round(totalDager/totalEskalert) : 0} sub="forsinkelse" /></Card>
      </div>

      {/* Overdue-tabell */}
      <Card title={`Overdue rutiner · ${totalEskalert}`} padded={false}
        action={<Button size="sm" icon={I.download}>Ukerapport</Button>}
        style={{ marginBottom: 14 }}
      >
        <table className="ok-table">
          <thead>
            <tr>
              <th style={{ paddingLeft: 18 }}>Rutine</th>
              <th>Rolle / område</th>
              <th>Ansvarlig</th>
              <th>Frist</th>
              <th>Dgr over</th>
              <th>Nivå</th>
              <th>Varslet</th>
              <th style={{ paddingRight: 18 }}></th>
            </tr>
          </thead>
          <tbody>
            {overdueList.map(i => {
              const rut = RUT_KATALOG.find(x => x.id === i.rutId);
              const rolle = rutRolle(rut.rolle);
              const omr = rutOmrade(rolle.omrade);
              const eskal = i.eskalering === 'leder' ? 'delay' : 'risk';
              const eskalLabel = i.eskalering === 'leder' ? 'Leder varslet' : 'Stedfortreder';
              return (
                <tr key={i.id} style={{ cursor: 'default' }}>
                  <td style={{ paddingLeft: 18 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <span style={{ width: 24, height: 24, borderRadius: 6, background: `${omr.farge}22`, color: omr.farge, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                        {omradeIkon(omr.id)}
                      </span>
                      <div>
                        <div style={{ fontWeight: 600, fontSize: 12.5 }}>{rut.tittel}</div>
                        {i.note ? <div style={{ fontSize: 10.5, color: SK.soft, marginTop: 1 }}>{i.note}</div> : null}
                      </div>
                    </div>
                  </td>
                  <td style={{ fontSize: 11.5 }}>
                    <div>{rolle.navn}</div>
                    <div style={{ color: SK.soft, marginTop: 1 }}>{omr.navn}</div>
                  </td>
                  <td>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                      <Avatar initials={TEAM[i.assigned]?.i} color={TEAM[i.assigned]?.c} size={20} />
                      <span style={{ fontSize: 12 }}>{TEAM[i.assigned]?.n?.split(' ')[0]}</span>
                    </div>
                  </td>
                  <td style={{ fontSize: 11.5, color: SK.soft }}>{rutFmtDate(i.dueDate)}</td>
                  <td style={{ fontWeight: 700, fontSize: 13, color: i.daysOver > 7 ? SK.coral : '#8e5a05' }}>
                    +{i.daysOver}d
                  </td>
                  <td><Pill status={eskal}>{eskalLabel}</Pill></td>
                  <td style={{ fontSize: 11.5 }}>
                    {i.eskalertTil ? (
                      <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
                        <Avatar initials={TEAM[i.eskalertTil]?.i} color={TEAM[i.eskalertTil]?.c} size={18} />
                        <span>{TEAM[i.eskalertTil]?.n?.split(' ')[0]}</span>
                      </div>
                    ) : '—'}
                  </td>
                  <td style={{ paddingRight: 18, textAlign: 'right' }}>
                    <Button size="sm" variant="primary">Følg opp</Button>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </Card>

      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 14 }}>
        {/* Hendelseslogg full */}
        <Card title={`Varselslogg · siste 14 dgr (${RUT_HENDELSER.length})`} padded={false}>
          {RUT_HENDELSER.map((h, i) => (
            <div key={h.id} style={{ padding: '12px 18px', borderTop: i ? '1px solid rgba(17,24,61,.06)' : 'none', display: 'flex', gap: 12, alignItems: 'flex-start' }}>
              <span style={{
                width: 32, height: 32, borderRadius: 8, flexShrink: 0,
                background: `${VVJ_ACCENT[h.accent]}22`, color: VVJ_ACCENT[h.accent],
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                {h.type === 'eskalering-leder' ? RI.alert
                  : h.type === 'fullfort' ? I.check
                  : RI.swap}
              </span>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, lineHeight: 1.4 }}>{h.tekst}</div>
                <div style={{ fontSize: 11, color: SK.soft, marginTop: 3, display: 'flex', alignItems: 'center', gap: 6 }}>
                  <span>{h.tid}</span>
                  <span>·</span>
                  <span>→ {TEAM[h.mottaker]?.n || h.mottaker}</span>
                </div>
              </div>
            </div>
          ))}
        </Card>

        {/* Policy */}
        <Card title="Eskaleringspolicy" padded>
          <div style={{ fontSize: 12.5, color: SK.soft, lineHeight: 1.55, marginBottom: 14 }}>
            Standardterskler gjelder med mindre rutinen har egne verdier. Du kan justere policy globalt eller per rolle/rutine.
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            <PolicyRow label="Påminnelse" value={`+${RUT_POLICY.defaultReminder} dgr etter frist`} channels={RUT_POLICY.reminderChannels} />
            <PolicyRow label="Stedfortreder" value={`+${RUT_POLICY.defaultDeputy} dgr etter frist`} channels={['e-post', 'Teams']} accent />
            <PolicyRow label="Nærmeste leder" value={`+${RUT_POLICY.defaultLeader} dgr etter frist`} channels={RUT_POLICY.leaderChannels} accent />
          </div>
          <div style={{ marginTop: 14, padding: 12, background: SK.iceBlueLight, borderRadius: 8, fontSize: 11.5, color: SK.soft }}>
            <b style={{ color: SK.ink }}>Helger telles ikke.</b> Auto-fravær oppdager registrerte ferier i Simployer og rutere rutiner uten manuell handling.
          </div>
          <Button size="sm" variant="ghost" style={{ marginTop: 12 }} icon={I.cog}>Endre policy</Button>
        </Card>
      </div>
    </div>
  );
}

function PolicyRow({ label, value, channels, accent }) {
  return (
    <div style={{ padding: '10px 12px', background: accent ? SK.lightCoral : SK.iceBlueLight, borderRadius: 8 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <span style={{ fontWeight: 600, fontSize: 12.5, color: accent ? '#a01a25' : SK.ink }}>{label}</span>
        <span style={{ fontSize: 11.5, color: SK.soft }}>{value}</span>
      </div>
      <div style={{ fontSize: 11, color: SK.soft, marginTop: 4 }}>
        Kanaler: {channels.join(' · ')}
      </div>
    </div>
  );
}

Object.assign(window, { RutinerWorkspaceMock, RutinerOversikt, RutinerKatalog, RutinerStedfortredere, RutinerEskal });