// Folio gosta + Check-out flow + Računi/storno + Night audit

// ─────────────────────────────────────────────────────────────────────────────
// FOLIO — gostov račun pred plačilom
// ─────────────────────────────────────────────────────────────────────────────
function RCFolio({ dark }) {
  const muted = dark?'#9A9A9A':'#707070';
  const f = FOLIOS[0]; // James Schmidt 305
  const total = f.items.reduce((s,i)=>s+i.total,0);
  const balance = total - f.paid;
  const typeColor = {room:'#2196F3', tax:'#9A9A9A', pos:'#FF9800', wellness:'#2DD164'};
  const typeLabel = {room:'Bivanje', tax:'Taksa', pos:'POS', wellness:'Wellness'};

  return <>
    <HPageHeader dark={dark} breadcrumbs={['Recepcija','Folio']}
      title={`Folio · soba ${f.room} · ${f.guest}`}
      subtitle="Junior Suite · 28.04 → 04.05 · 6 noči · 2 osebi"
      actions={<>
        <HBtn variant="ghost" dark={dark} icon="printer">Tiskaj</HBtn>
        <HBtn variant="ghost" dark={dark} icon="box">Pošlji po e-pošti</HBtn>
        <HBtn variant="cyan" icon="plus">Dodaj postavko</HBtn>
        <HBtn variant="primary" icon="logout">Začni check-out</HBtn>
      </>}/>

    <div style={{display:'grid', gridTemplateColumns:'1.6fr 1fr', gap:16}}>
      <HCard dark={dark} padding={0} style={{overflow:'hidden'}}>
        <div style={{padding:'14px 20px', borderBottom:`1px solid ${dark?'#2B2B2B':'#F0F0F0'}`, display:'flex', justifyContent:'space-between', alignItems:'center'}}>
          <div style={{fontSize:14, fontWeight:600, color:dark?'#fff':'#1A1A1A'}}>Postavke ({f.items.length})</div>
          <div style={{display:'flex', gap:6}}>
            {['Vse','Bivanje','POS','Taksa'].map((t,i)=>
              <button key={t} style={{padding:'5px 12px', fontSize:11, fontWeight:600, fontFamily:'inherit',
                background:i===0?(dark?'#2B2B2B':'#F0F0F0'):'transparent',
                color:dark?'#E5E5E5':'#4D4D4D',
                border:`1px solid ${dark?'#2B2B2B':'#E5E5E5'}`, borderRadius:999, cursor:'pointer'}}>{t}</button>
            )}
          </div>
        </div>
        <HTable dark={dark} compact columns={[
          {key:'date', label:'Datum', render:r=><span style={{fontFamily:'var(--font-mono)', fontSize:12}}>{r.date}</span>},
          {key:'desc', label:'Opis', render:r=><div style={{display:'flex', alignItems:'center', gap:8}}>
            <div style={{width:6, height:6, borderRadius:'50%', background:typeColor[r.type]}}/>
            <span style={{fontWeight:500}}>{r.desc}</span>
          </div>},
          {key:'type', label:'Tip', render:r=><HBadge tone={r.type==='room'?'blue':r.type==='pos'?'orange':r.type==='wellness'?'success':'neutral'}>{typeLabel[r.type]}</HBadge>},
          {key:'qty',  label:'Kol.', align:'right', render:r=><span style={{fontFamily:'var(--font-mono)'}}>{r.qty}</span>},
          {key:'unit', label:'€/kos', align:'right', render:r=><span style={{fontFamily:'var(--font-mono)'}}>{r.unit.toFixed(2)}</span>},
          {key:'total',label:'Skupaj', align:'right', render:r=><span style={{fontFamily:'var(--font-mono)', fontWeight:700}}>€ {r.total.toFixed(2)}</span>},
          {key:'act', label:'', align:'right', render:_=><button style={{background:'transparent', border:'none', color:muted, cursor:'pointer', display:'flex'}}><HIcon name="x" size={14}/></button>},
        ]} rows={f.items}/>
      </HCard>

      <div style={{display:'flex', flexDirection:'column', gap:14}}>
        <HCard dark={dark}>
          <div style={{fontSize:14, fontWeight:600, marginBottom:14, color:dark?'#fff':'#1A1A1A'}}>Povzetek</div>
          {[
            ['Bivanje (3 noči)', '€ 690,00'],
            ['Turistična taksa', '€ 5,00'],
            ['POS (F&B + wellness)', '€ 156,40'],
          ].map(([l,v],i)=>
            <div key={l} style={{display:'flex', justifyContent:'space-between', padding:'8px 0', borderTop:i>0?`1px solid ${dark?'#2B2B2B':'#F5F5F5'}`:'none', fontSize:13}}>
              <span style={{color:muted}}>{l}</span><span style={{fontWeight:600, fontFamily:'var(--font-mono)'}}>{v}</span>
            </div>
          )}
          <div style={{display:'flex', justifyContent:'space-between', padding:'14px 0 6px', borderTop:`1px solid ${dark?'#2B2B2B':'#E5E5E5'}`, marginTop:8}}>
            <span style={{fontSize:14, fontWeight:700, color:dark?'#fff':'#1A1A1A'}}>Skupaj porabljeno</span>
            <span style={{fontSize:18, fontWeight:800, fontFamily:'var(--font-display)', color:'#2196F3'}}>€ {total.toFixed(2)}</span>
          </div>
          <div style={{display:'flex', justifyContent:'space-between', padding:'4px 0', fontSize:12}}>
            <span style={{color:muted}}>Plačano vnaprej (Booking.com)</span>
            <span style={{fontFamily:'var(--font-mono)', color:'#2DD164', fontWeight:600}}>− €{f.paid.toFixed(2)}</span>
          </div>
          <div style={{display:'flex', justifyContent:'space-between', padding:'4px 0', fontSize:12}}>
            <span style={{color:muted}}>Depozit (kartica)</span>
            <span style={{fontFamily:'var(--font-mono)', fontWeight:600}}>€ {f.deposit.toFixed(2)}</span>
          </div>
          <div style={{marginTop:10, padding:'12px 14px', background: balance>0?(dark?'rgba(255,152,0,.12)':'#FFF8E1'):(dark?'rgba(45,209,100,.12)':'#E6F9EC'), borderRadius:8, display:'flex', justifyContent:'space-between', alignItems:'center'}}>
            <span style={{fontSize:13, fontWeight:600, color:balance>0?'#FF9800':'#2DD164'}}>{balance>0?'Za plačilo':'V dobro'}</span>
            <span style={{fontSize:18, fontWeight:800, fontFamily:'var(--font-display)', color:balance>0?'#FF9800':'#2DD164'}}>€ {Math.abs(balance).toFixed(2)}</span>
          </div>
        </HCard>

        <HCard dark={dark}>
          <div style={{fontSize:14, fontWeight:600, marginBottom:14, color:dark?'#fff':'#1A1A1A'}}>Hitre akcije</div>
          {[
            ['plus','Dodaj POS postavko','#FF9800'],
            ['users','Dodaj plačnika (split)','#9C27B0'],
            ['box','Prenesi na drugo sobo','#2196F3'],
            ['x','Storno postavke','#E53935'],
          ].map(([ic,l,c])=>
            <button key={l} style={{display:'flex', alignItems:'center', gap:10, width:'100%', padding:'10px 12px', marginBottom:6,
              background:'transparent', border:`1px solid ${dark?'#2B2B2B':'#F0F0F0'}`, borderRadius:8, fontFamily:'inherit', cursor:'pointer'}}>
              <div style={{width:28, height:28, borderRadius:7, background:c, color:'#fff', display:'flex', alignItems:'center', justifyContent:'center'}}><HIcon name={ic} size={13}/></div>
              <div style={{fontSize:13, color:dark?'#E5E5E5':'#1A1A1A', fontWeight:500}}>{l}</div>
            </button>
          )}
        </HCard>
      </div>
    </div>
  </>;
}

// ─────────────────────────────────────────────────────────────────────────────
// CHECK-OUT — folio review + plačilo + ankete
// ─────────────────────────────────────────────────────────────────────────────
function RCCheckout({ dark }) {
  const muted = dark?'#9A9A9A':'#707070';
  const f = FOLIOS[0];
  const total = f.items.reduce((s,i)=>s+i.total,0);
  const [splits, setSplits] = React.useState([
    {payer:'James Schmidt (gost)', amount:351.40, method:'card', emailReceipt:true},
    {payer:'Acme GmbH (firma)',     amount:1100.00, method:'transfer', emailReceipt:true},
  ]);
  const [stars, setStars] = React.useState(5);

  return <>
    <HPageHeader dark={dark} breadcrumbs={['Recepcija','Check-out']}
      title={`Check-out · soba ${f.room} · ${f.guest}`}
      subtitle="6 noči · 2 osebi · odhod 04.05.2026 11:00"
      actions={<HBtn variant="ghost" dark={dark} icon="key">Express check-out</HBtn>}/>

    <div style={{display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:16}}>
      <div style={{display:'flex', flexDirection:'column', gap:14}}>
        {/* Mini-bar check */}
        <HCard dark={dark}>
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:14}}>
            <div style={{fontSize:14, fontWeight:600, color:dark?'#fff':'#1A1A1A'}}>Mini-bar pregled</div>
            <HBadge tone="warning">Anita K. preverja</HBadge>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:10}}>
            {POS_ITEMS.filter(i=>i.cat==='minibar').map(i=>{
              const consumed = i.id==='i19';
              return <button key={i.id} style={{padding:'12px', background: consumed?(dark?'rgba(255,152,0,.15)':'#FFF8E1'):(dark?'#2B2B2B':'#F8F9FA'), border:`1px solid ${consumed?'#FF9800':(dark?'#333':'#E5E5E5')}`, borderRadius:10, fontFamily:'inherit', cursor:'pointer', textAlign:'left'}}>
                <div style={{fontSize:12, fontWeight:600, color:consumed?'#FF9800':(dark?'#fff':'#1A1A1A')}}>{i.name}</div>
                <div style={{fontSize:11, color:muted, marginTop:2}}>€{i.price.toFixed(2)}</div>
                <div style={{marginTop:8, fontSize:11, fontWeight:600, color:consumed?'#FF9800':'#2DD164'}}>{consumed?'+ Porabljeno':'✓ Polna polica'}</div>
              </button>;
            })}
          </div>
        </HCard>

        {/* Damage / deposit */}
        <HCard dark={dark}>
          <div style={{fontSize:14, fontWeight:600, marginBottom:14, color:dark?'#fff':'#1A1A1A'}}>Stanje sobe / depozit</div>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:10, marginBottom:14}}>
            {[
              ['Brez poškodb','#2DD164',true],
              ['Manjše ščnice','#FF9800',false],
              ['Poškodbe','#E53935',false],
            ].map(([l,c,a])=>
              <button key={l} style={{padding:'14px', background:a?(dark?'rgba(45,209,100,.15)':'#E6F9EC'):(dark?'#2B2B2B':'#F8F9FA'), border:`2px solid ${a?c:(dark?'#333':'#E5E5E5')}`, borderRadius:10, fontFamily:'inherit', cursor:'pointer', textAlign:'left'}}>
                <div style={{fontSize:13, fontWeight:600, color:a?c:(dark?'#fff':'#1A1A1A')}}>{l}</div>
              </button>
            )}
          </div>
          <div style={{padding:'12px 14px', background:dark?'#2B2B2B':'#F8F9FA', borderRadius:8, fontSize:12, color:muted}}>
            Depozit €{f.deposit.toFixed(2)} bo sproščen v 24 urah po check-outu.
          </div>
        </HCard>

        {/* Bill split */}
        <HCard dark={dark}>
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:14}}>
            <div style={{fontSize:14, fontWeight:600, color:dark?'#fff':'#1A1A1A'}}>Razdelitev računa · {splits.length} plačnika</div>
            <HBtn size="sm" variant="ghost" dark={dark} icon="plus">Dodaj plačnika</HBtn>
          </div>
          {splits.map((s,i)=>
            <div key={i} style={{padding:'14px', background:dark?'#2B2B2B':'#F8F9FA', borderRadius:10, marginBottom:10}}>
              <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:10}}>
                <input defaultValue={s.payer} style={{flex:1, padding:'6px 10px', border:`1px solid ${dark?'#333':'#E5E5E5'}`, borderRadius:6, fontSize:13, fontWeight:600, fontFamily:'inherit', background:dark?'#1A1A1A':'#fff', color:dark?'#fff':'#1A1A1A'}}/>
                <button style={{marginLeft:8, background:'transparent', border:'none', color:muted, cursor:'pointer', display:'flex'}}><HIcon name="x" size={14}/></button>
              </div>
              <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:8, marginBottom:8}}>
                <div>
                  <div style={{fontSize:10, color:muted, marginBottom:4, fontWeight:600, letterSpacing:'.06em', textTransform:'uppercase'}}>Znesek</div>
                  <input defaultValue={`€ ${s.amount.toFixed(2)}`} style={{width:'100%', padding:'8px 10px', border:`1px solid ${dark?'#333':'#E5E5E5'}`, borderRadius:6, fontSize:13, fontFamily:'var(--font-mono)', fontWeight:700, background:dark?'#1A1A1A':'#fff', color:dark?'#fff':'#1A1A1A'}}/>
                </div>
                <div>
                  <div style={{fontSize:10, color:muted, marginBottom:4, fontWeight:600, letterSpacing:'.06em', textTransform:'uppercase'}}>Način</div>
                  <div style={{display:'flex', gap:4}}>
                    {[['card','Kartica'],['cash','Got.'],['transfer','TRR'],['voucher','Bon']].map(([k,l])=>{
                      const a = s.method===k;
                      return <button key={k} style={{flex:1, padding:'8px 4px', fontSize:11, fontWeight:600, fontFamily:'inherit', background:a?'#2196F3':(dark?'#1A1A1A':'#fff'), color:a?'#fff':(dark?'#E5E5E5':'#4D4D4D'), border:`1px solid ${a?'#2196F3':(dark?'#333':'#E5E5E5')}`, borderRadius:5, cursor:'pointer'}}>{l}</button>;
                    })}
                  </div>
                </div>
              </div>
              <label style={{display:'flex', alignItems:'center', gap:6, fontSize:11, color:muted, cursor:'pointer'}}>
                <input type="checkbox" defaultChecked={s.emailReceipt}/> Pošlji račun po e-pošti
              </label>
            </div>
          )}
        </HCard>
      </div>

      <div style={{display:'flex', flexDirection:'column', gap:14}}>
        <HCard dark={dark}>
          <div style={{fontSize:14, fontWeight:600, marginBottom:14, color:dark?'#fff':'#1A1A1A'}}>Skupaj za plačilo</div>
          <div style={{textAlign:'center', padding:'20px 0', borderBottom:`1px dashed ${dark?'#2B2B2B':'#E5E5E5'}`, marginBottom:14}}>
            <div style={{fontFamily:'var(--font-display)', fontSize:48, fontWeight:800, color:'#2196F3', letterSpacing:'-0.02em'}}>€ {total.toFixed(2)}</div>
            <div style={{fontSize:12, color:muted, marginTop:6}}>+ €4,50 mini-bar (Pringles)</div>
          </div>
          <HBtn variant="primary" size="lg" style={{width:'100%', justifyContent:'center', marginBottom:8}}>Zaključi check-out</HBtn>
          <HBtn variant="ghost" dark={dark} style={{width:'100%', justifyContent:'center'}}>Express (samo ključ)</HBtn>
        </HCard>

        <HCard dark={dark}>
          <div style={{fontSize:14, fontWeight:600, marginBottom:6, color:dark?'#fff':'#1A1A1A'}}>Anketa zadovoljstva</div>
          <div style={{fontSize:12, color:muted, marginBottom:12}}>Vprašajte gosta — odgovor zabeležimo</div>
          <div style={{display:'flex', gap:8, justifyContent:'center', marginBottom:14}}>
            {[1,2,3,4,5].map(n=>
              <button key={n} onClick={()=>setStars(n)} style={{width:44, height:44, borderRadius:8, background:n<=stars?'#FFB300':(dark?'#2B2B2B':'#F0F0F0'), border:'none', color:'#fff', fontSize:20, cursor:'pointer'}}>★</button>
            )}
          </div>
          <textarea placeholder="Komentar gosta (neobvezno)…" style={{width:'100%', padding:'10px 12px', border:`1px solid ${dark?'#2B2B2B':'#E5E5E5'}`, borderRadius:8, fontSize:13, fontFamily:'inherit', background:dark?'#1A1A1A':'#fff', color:dark?'#E5E5E5':'#1A1A1A', minHeight:60, resize:'vertical'}}/>
        </HCard>

        <HCard dark={dark}>
          <div style={{fontSize:14, fontWeight:600, marginBottom:10, color:dark?'#fff':'#1A1A1A'}}>Loyalty in povratek</div>
          <div style={{fontSize:12, color:muted, marginBottom:10}}>James Schmidt zasluži <b style={{color:'#FFB300'}}>620 točk</b> Triglav Club za to bivanje.</div>
          <HBtn size="sm" variant="ghost" dark={dark} icon="box">Pošlji ponudbo za naslednji obisk</HBtn>
        </HCard>
      </div>
    </div>
  </>;
}

// ─────────────────────────────────────────────────────────────────────────────
// RAČUNI / STORNO
// ─────────────────────────────────────────────────────────────────────────────
function RCReceipts({ dark }) {
  const muted = dark?'#9A9A9A':'#707070';
  return <>
    <HPageHeader dark={dark} title="Računi"
      subtitle="Smena 28.04.2026 · Maja Kranjc · POS-01"
      actions={<>
        <HBtn variant="ghost" dark={dark} icon="printer">X poročilo</HBtn>
        <HBtn variant="primary" icon="printer">Z poročilo · zaključi smeno</HBtn>
      </>}/>

    <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:14, marginBottom:18}}>
      <HStat dark={dark} tone="blue"   label="Računi smene" value="34" trend="+6 vs. sinoči"/>
      <HStat dark={dark} tone="green"  label="Skupni promet" value="€ 4.280" trend="+€820 vs. sinoči"/>
      <HStat dark={dark} tone="orange" label="Storno"        value="2"      trend="€ −116"/>
      <HStat dark={dark} tone="cyan"   label="Povprečen"     value="€ 125,89"/>
    </div>

    <HCard dark={dark} padding={0} style={{overflow:'hidden'}}>
      <div style={{padding:'14px 20px', borderBottom:`1px solid ${dark?'#2B2B2B':'#F0F0F0'}`, display:'flex', justifyContent:'space-between', alignItems:'center'}}>
        <div style={{display:'flex', gap:6}}>
          {['Vsi','Plačano','Storno','Soba','Kartica','Gotovina'].map((t,i)=>
            <button key={t} style={{padding:'5px 12px', fontSize:11, fontWeight:600, fontFamily:'inherit',
              background:i===0?'#2196F3':'transparent', color:i===0?'#fff':(dark?'#C8C8C8':'#4D4D4D'),
              border:`1px solid ${i===0?'#2196F3':(dark?'#2B2B2B':'#E5E5E5')}`, borderRadius:999, cursor:'pointer'}}>{t}</button>
          )}
        </div>
        <div style={{fontSize:11, color:muted, display:'flex', alignItems:'center', gap:6}}>
          <span style={{width:6, height:6, borderRadius:'50%', background:'#2DD164'}}/> FURS sinhronizacija OK · zadnji EOR pred 22 sek
        </div>
      </div>
      <HTable dark={dark} columns={[
        {key:'no', label:'Številka', render:r=><span style={{fontFamily:'var(--font-mono)', fontWeight:700, color:'#2196F3'}}>{r.no}</span>},
        {key:'time', label:'Čas', render:r=><span style={{fontFamily:'var(--font-mono)', fontSize:12}}>{r.time}</span>},
        {key:'guest', label:'Gost'},
        {key:'room', label:'Soba', render:r=><span style={{fontFamily:'var(--font-mono)'}}>{r.room}</span>},
        {key:'total', label:'Skupaj', align:'right', render:r=><span style={{fontFamily:'var(--font-mono)', fontWeight:700, textDecoration:r.status==='storno'?'line-through':'none', color:r.status==='storno'?muted:undefined}}>€ {r.total.toFixed(2)}</span>},
        {key:'vat', label:'DDV', render:r=><span style={{fontFamily:'var(--font-mono)', fontSize:11, color:muted}}>{r.vat}</span>},
        {key:'method', label:'Plačilo', render:r=>{
          const labels = {room:'Soba',cash:'Gotovina',card:'Kartica',transfer:'TRR'};
          const colors = {room:'blue',cash:'success',card:'cyan',transfer:'neutral'};
          return <HBadge tone={colors[r.method]}>{labels[r.method]}</HBadge>;
        }},
        {key:'eor', label:'FURS · EOR', render:r=><span style={{fontFamily:'var(--font-mono)', fontSize:10, color:muted}}>{r.eor}</span>},
        {key:'status', label:'Status', render:r=>r.status==='storno'?<HBadge tone="danger">Storno</HBadge>:<HBadge tone="success">Veljaven</HBadge>},
        {key:'act', label:'', align:'right', render:r=>
          <div style={{display:'flex', gap:4, justifyContent:'flex-end'}}>
            <button style={{padding:'4px 8px', background:'transparent', border:`1px solid ${dark?'#2B2B2B':'#E5E5E5'}`, borderRadius:6, fontSize:11, fontFamily:'inherit', color:dark?'#E5E5E5':'#4D4D4D', cursor:'pointer'}}>Tiskaj</button>
            {r.status!=='storno' && <button style={{padding:'4px 8px', background:'transparent', border:`1px solid ${dark?'#2B2B2B':'#E5E5E5'}`, borderRadius:6, fontSize:11, fontFamily:'inherit', color:'#E53935', cursor:'pointer'}}>Storno</button>}
          </div>
        },
      ]} rows={RECEIPTS}/>
    </HCard>
  </>;
}

// ─────────────────────────────────────────────────────────────────────────────
// NIGHT AUDIT
// ─────────────────────────────────────────────────────────────────────────────
function RCNightAudit({ dark }) {
  const muted = dark?'#9A9A9A':'#707070';
  const steps = [
    {k:'arrivals',  l:'Prihodi · vsi check-ini opravljeni',         status:'ok',     detail:'14/14 prijavljenih'},
    {k:'departures',l:'Odhodi · vsi check-outi opravljeni',         status:'warning',detail:'10/11 — soba 207 še v hiši'},
    {k:'rooms',     l:'Sobe · status & inspekcije',                 status:'ok',     detail:'78/78 statusi posodobljeni'},
    {k:'rates',     l:'Cene za jutri (29.04) potrjene',             status:'ok',     detail:'Booking, Expedia sync OK'},
    {k:'pos',       l:'POS · zaključek smene',                      status:'ok',     detail:'34 računov, €4.280'},
    {k:'cash',      l:'Cash count · gotovinska blagajna',           status:'pending',detail:'V teku · Janez L.'},
    {k:'taxes',     l:'Turistična taksa · prijava AJPES',           status:'ok',     detail:'128 prijav poslanih'},
    {k:'commission',l:'Provizije OTA',                              status:'ok',     detail:'€612 obračunanih'},
    {k:'reports',   l:'Generiraj dnevno poročilo',                  status:'pending',detail:'Pripravljeno za tisk'},
  ];

  return <>
    <HPageHeader dark={dark} title="Night audit · 28.04.2026"
      subtitle="Avtomatski zaključek dneva — 23:30 si naslednji termin"
      actions={<>
        <HBtn variant="ghost" dark={dark} icon="printer">Predogled poročila</HBtn>
        <HBtn variant="primary" icon="check">Potrdi audit · zapri dan</HBtn>
      </>}/>

    <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:14, marginBottom:18}}>
      <HStat dark={dark} tone="blue"   label="Zasedenost" value="82%" trend="+4% vs. sinoči"/>
      <HStat dark={dark} tone="cyan"   label="ADR"        value="€142" trend="+€3"/>
      <HStat dark={dark} tone="green"  label="RevPAR"     value="€116"/>
      <HStat dark={dark} tone="orange" label="No-show"    value="1"   trend="Schmidt R-25053"/>
    </div>

    <div style={{display:'grid', gridTemplateColumns:'2fr 1fr', gap:16}}>
      <HCard dark={dark} padding={0} style={{overflow:'hidden'}}>
        <div style={{padding:'14px 20px', borderBottom:`1px solid ${dark?'#2B2B2B':'#F0F0F0'}`, fontSize:14, fontWeight:600, color:dark?'#fff':'#1A1A1A'}}>Kontrolni seznam ({steps.filter(s=>s.status==='ok').length}/{steps.length})</div>
        {steps.map((s,i)=>{
          const ic = {ok:'check', warning:'flag', pending:'sparkle'}[s.status];
          const c  = {ok:'#2DD164', warning:'#FF9800', pending:'#2196F3'}[s.status];
          return <div key={s.k} style={{padding:'14px 20px', borderTop:i>0?`1px solid ${dark?'#2B2B2B':'#F5F5F5'}`:'none', display:'flex', alignItems:'center', gap:14}}>
            <div style={{width:32, height:32, borderRadius:'50%', background:c, color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}><HIcon name={ic} size={14}/></div>
            <div style={{flex:1}}>
              <div style={{fontSize:13, fontWeight:600, color:dark?'#fff':'#1A1A1A'}}>{s.l}</div>
              <div style={{fontSize:11, color:muted, marginTop:2}}>{s.detail}</div>
            </div>
            {s.status==='warning' && <HBtn size="sm" variant="cyan" dark={dark}>Reši</HBtn>}
            {s.status==='pending' && <HBtn size="sm" variant="primary" dark={dark}>Nadaljuj</HBtn>}
            {s.status==='ok' && <HBadge tone="success">OK</HBadge>}
          </div>;
        })}
      </HCard>

      <div style={{display:'flex', flexDirection:'column', gap:14}}>
        <HCard dark={dark}>
          <div style={{fontSize:14, fontWeight:600, marginBottom:14, color:dark?'#fff':'#1A1A1A'}}>Promet po kanalih</div>
          {[['Booking.com',4280,'#003580'],['Direct',2890,'#0097A7'],['Expedia',1640,'#FFC72C'],['Walk-in',420,'#FF9800']].map(([n,v,c])=>{
            const max = 4280;
            return <div key={n} style={{marginBottom:10}}>
              <div style={{display:'flex', justifyContent:'space-between', fontSize:12, marginBottom:4}}>
                <span style={{color:dark?'#E5E5E5':'#1A1A1A', fontWeight:500}}>{n}</span>
                <span style={{fontFamily:'var(--font-mono)', fontWeight:700, color:dark?'#fff':'#1A1A1A'}}>€{v}</span>
              </div>
              <div style={{height:6, background:dark?'#2B2B2B':'#F0F0F0', borderRadius:3, overflow:'hidden'}}>
                <div style={{height:'100%', width:`${(v/max)*100}%`, background:c, borderRadius:3}}/>
              </div>
            </div>;
          })}
        </HCard>

        <HCard dark={dark}>
          <div style={{fontSize:14, fontWeight:600, marginBottom:10, color:dark?'#fff':'#1A1A1A'}}>Avtomatsko</div>
          {['Backup baze ob 03:00','Sync cen za 1.5.2026','Pošlji recenzijske emaile','Generiraj DDV poročilo','Posodobi MaxOcc za jutri'].map((t,i)=>
            <div key={t} style={{display:'flex', alignItems:'center', gap:10, padding:'8px 0', borderTop:i>0?`1px solid ${dark?'#2B2B2B':'#F5F5F5'}`:'none', fontSize:12}}>
              <HIcon name="check" size={12} color="#2DD164"/>
              <span style={{flex:1, color:dark?'#E5E5E5':'#4D4D4D'}}>{t}</span>
              <span style={{fontFamily:'var(--font-mono)', fontSize:10, color:muted}}>23:30</span>
            </div>
          )}
        </HCard>
      </div>
    </div>
  </>;
}

Object.assign(window, { RCFolio, RCCheckout, RCReceipts, RCNightAudit });