// Wellness · Sporočila · Skupine · Parking · Predaja smene · Room rack

// ─── ROOM RACK (kompaktni tloris + tabela) ───────────────────────────────────
function RCRoomRack({ dark }) {
  const muted = dark?'#9A9A9A':'#707070';
  const floors = [
    {n:4, rooms:['401','402','403','404','405','406','407','408','409','410','411','412']},
    {n:3, rooms:['301','302','303','304','305','306','307','308','309','310','311','312']},
    {n:2, rooms:['201','202','203','204','205','206','207','208','209','210','211','212','213']},
    {n:1, rooms:['101','102','103','104','105','106','107','108','109','110']},
  ];
  const stat = (r) => {
    const last = parseInt(r.slice(-2));
    if (r==='305' || r==='412' || r==='418') return {s:'occ', g:'James S.', c:'#2196F3'};
    if (last%5===0) return {s:'dirty', c:'#FF9800'};
    if (last%7===0) return {s:'oo', c:'#9A9A9A'};
    if (last%3===0) return {s:'ci', c:'#9C27B0'};
    if (last%2===0) return {s:'occ', g:'Gost', c:'#2196F3'};
    return {s:'clean', c:'#2DD164'};
  };
  const labels = {occ:'Zaseden',clean:'Čist',dirty:'Umazan',ci:'Prihaja',co:'Odhaja',oo:'Out of order'};

  return <>
    <HPageHeader dark={dark} title="Room rack · 28.04.2026"
      subtitle="78 sob · 64 zasedenih · 8 čistih · 4 umazani · 2 OOO"
      actions={<>
        <HBtn variant="ghost" dark={dark} icon="search">Najdi sobo</HBtn>
        <HBtn variant="primary" icon="plus">Premik gosta</HBtn>
      </>}/>

    <div style={{display:'flex', gap:16, marginBottom:14, flexWrap:'wrap'}}>
      {Object.entries(labels).map(([k,l])=>
        <div key={k} style={{display:'flex', alignItems:'center', gap:6, fontSize:11, color:muted}}>
          <span style={{width:10, height:10, borderRadius:3, background:{occ:'#2196F3',clean:'#2DD164',dirty:'#FF9800',ci:'#9C27B0',co:'#00BCD4',oo:'#9A9A9A'}[k]}}/>
          {l}
        </div>
      )}
    </div>

    <HCard dark={dark}>
      {floors.map(f=>
        <div key={f.n} style={{display:'flex', alignItems:'center', gap:10, marginBottom:10}}>
          <div style={{width:50, fontFamily:'var(--font-display)', fontSize:14, fontWeight:700, color:muted}}>{f.n}. nad.</div>
          <div style={{flex:1, display:'grid', gridTemplateColumns:'repeat(13, 1fr)', gap:4}}>
            {f.rooms.map(r=>{
              const st = stat(r);
              return <button key={r} style={{
                padding:'10px 4px', background:st.c, border:'none', borderRadius:6,
                color:'#fff', fontFamily:'inherit', cursor:'pointer', textAlign:'center',
                position:'relative',
              }}>
                <div style={{fontFamily:'var(--font-mono)', fontWeight:700, fontSize:13}}>{r}</div>
                {st.g && <div style={{fontSize:9, opacity:.85, marginTop:1, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{st.g}</div>}
              </button>;
            })}
          </div>
        </div>
      )}
    </HCard>
  </>;
}

// ─── WELLNESS ────────────────────────────────────────────────────────────────
function RCWellness({ dark }) {
  const muted = dark?'#9A9A9A':'#707070';
  const hours = ['09','10','11','12','13','14','15','16','17','18','19','20'];
  const therapists = ['Petra','Tanja','Klara'];

  return <>
    <HPageHeader dark={dark} title="Wellness · rezervacije"
      subtitle="28.04.2026 · 6 storitev · 3 terapevtke · zasedenost 67%"
      actions={<>
        <HBtn variant="ghost" dark={dark} icon="calendar">Pregled tedna</HBtn>
        <HBtn variant="primary" icon="plus">Nova rezervacija</HBtn>
      </>}/>

    <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'}}>Časovnica · masaže</div>
        <div style={{padding:14}}>
          {therapists.map(t=>
            <div key={t} style={{marginBottom:14}}>
              <div style={{fontSize:11, fontWeight:700, letterSpacing:'.08em', textTransform:'uppercase', color:muted, marginBottom:6}}>{t}</div>
              <div style={{position:'relative', height:48, background:dark?'#2B2B2B':'#F8F9FA', borderRadius:6, display:'grid', gridTemplateColumns:`repeat(${hours.length},1fr)`}}>
                {hours.map((h,i)=>
                  <div key={h} style={{borderLeft:i>0?`1px dashed ${dark?'#333':'#E5E5E5'}`:'none', fontSize:9, color:muted, padding:'2px 4px', fontFamily:'var(--font-mono)'}}>{h}</div>
                )}
                {WELLNESS.filter(w=>w.therapist===t).map((w,i)=>{
                  const start = (parseInt(w.time.split(':')[0]) - 9) + (parseInt(w.time.split(':')[1])/60);
                  const dur = w.service.includes('50min')?0.83:1;
                  return <div key={i} style={{
                    position:'absolute', top:18, height:26,
                    left:`${(start/hours.length)*100}%`, width:`${(dur/hours.length)*100}%`,
                    background:w.status==='confirmed'?'#9C27B0':'#FF9800',
                    color:'#fff', borderRadius:5, padding:'4px 8px', fontSize:11, fontWeight:600,
                    overflow:'hidden', whiteSpace:'nowrap', textOverflow:'ellipsis',
                  }}>{w.guest} · {w.time}</div>;
                })}
              </div>
            </div>
          )}
        </div>
        <div style={{padding:'14px 20px', borderTop:`1px solid ${dark?'#2B2B2B':'#F0F0F0'}`}}>
          <HTable dark={dark} compact columns={[
            {key:'time', label:'Čas', render:r=><span style={{fontFamily:'var(--font-mono)', fontWeight:700}}>{r.time}</span>},
            {key:'service', label:'Storitev'},
            {key:'guest', label:'Gost'},
            {key:'room', label:'Soba', render:r=><span style={{fontFamily:'var(--font-mono)'}}>{r.room}</span>},
            {key:'therapist', label:'Terapevtka'},
            {key:'status', label:'Status', render:r=>r.status==='confirmed'?<HBadge tone="success">Potrjeno</HBadge>:<HBadge tone="warning">Odprto</HBadge>},
          ]} rows={WELLNESS}/>
        </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'}}>Bazen / sauna</div>
          {[['Bazen', 24, 50, '#00BCD4'],['Sauna finska', 4, 8, '#E91E63'],['Sauna parna', 2, 6, '#9C27B0'],['Whirlpool', 3, 6, '#2196F3']].map(([n,c,m,col])=>
            <div key={n} style={{marginBottom:12}}>
              <div style={{display:'flex', justifyContent:'space-between', fontSize:12, marginBottom:4}}>
                <span style={{fontWeight:500, color:dark?'#E5E5E5':'#1A1A1A'}}>{n}</span>
                <span style={{fontFamily:'var(--font-mono)', color:muted}}>{c}/{m}</span>
              </div>
              <div style={{height:6, background:dark?'#2B2B2B':'#F0F0F0', borderRadius:3}}>
                <div style={{height:'100%', width:`${(c/m)*100}%`, background:col, borderRadius:3}}/>
              </div>
            </div>
          )}
        </HCard>
        <HCard dark={dark}>
          <div style={{fontSize:14, fontWeight:600, marginBottom:10, color:dark?'#fff':'#1A1A1A'}}>Hitre rezervacije</div>
          {['Wellness 2h','Sauna 1h','Masaža 50min','Lymph drenaža'].map(n=>
            <button key={n} style={{display:'flex', justifyContent:'space-between', alignItems:'center', width:'100%', padding:'10px 12px', marginBottom:6, background:'transparent', border:`1px solid ${dark?'#2B2B2B':'#F0F0F0'}`, borderRadius:8, fontFamily:'inherit', cursor:'pointer'}}>
              <span style={{fontSize:13, color:dark?'#E5E5E5':'#1A1A1A'}}>{n}</span>
              <HIcon name="plus" size={12} color={muted}/>
            </button>
          )}
        </HCard>
      </div>
    </div>
  </>;
}

// ─── MESSAGES / GUEST REQUESTS ───────────────────────────────────────────────
function RCMessages({ dark }) {
  const muted = dark?'#9A9A9A':'#707070';
  const [active, setActive] = React.useState('305');
  const threads = [...new Set(MESSAGES.map(m=>m.room))].map(room=>{
    const msgs = MESSAGES.filter(m=>m.room===room);
    const last = msgs[msgs.length-1];
    const unread = msgs.filter(m=>m.from==='guest' && !m.read).length;
    return {room, guest:msgs[0].guest, last, unread};
  });
  const conv = MESSAGES.filter(m=>m.room===active);

  return <>
    <HPageHeader dark={dark} title="Sporočila · prošnje gostov"
      subtitle={`${threads.filter(t=>t.unread>0).length} novih · WhatsApp + SMS + chat`}
      actions={<>
        <HBtn variant="ghost" dark={dark} icon="bell">Predloge</HBtn>
        <HBtn variant="primary" icon="plus">Novo sporočilo</HBtn>
      </>}/>

    <HCard dark={dark} padding={0} style={{overflow:'hidden', height:560}}>
      <div style={{display:'grid', gridTemplateColumns:'320px 1fr 280px', height:'100%'}}>
        {/* threads */}
        <div style={{borderRight:`1px solid ${dark?'#2B2B2B':'#F0F0F0'}`, overflowY:'auto'}}>
          <div style={{padding:'12px 14px', borderBottom:`1px solid ${dark?'#2B2B2B':'#F0F0F0'}`}}>
            <input placeholder="Iskanje pogovorov…" style={{width:'100%', padding:'8px 12px', background:dark?'#1A1A1A':'#F8F9FA', border:`1px solid ${dark?'#2B2B2B':'#E5E5E5'}`, borderRadius:8, fontSize:13, fontFamily:'inherit', color:dark?'#E5E5E5':'#1A1A1A'}}/>
          </div>
          {threads.map(t=>{
            const a = active===t.room;
            return <button key={t.room} onClick={()=>setActive(t.room)} style={{display:'block', width:'100%', textAlign:'left', padding:'14px', borderBottom:`1px solid ${dark?'#2B2B2B':'#F5F5F5'}`, background:a?(dark?'#2B2B2B':'#F0F4FF'):'transparent', borderLeft:`3px solid ${a?'#2196F3':'transparent'}`, fontFamily:'inherit', cursor:'pointer'}}>
              <div style={{display:'flex', justifyContent:'space-between', marginBottom:4}}>
                <div style={{display:'flex', alignItems:'center', gap:8}}>
                  <span style={{fontFamily:'var(--font-mono)', fontSize:12, fontWeight:700, color:'#2196F3'}}>{t.room}</span>
                  <span style={{fontSize:13, fontWeight:600, color:dark?'#fff':'#1A1A1A'}}>{t.guest}</span>
                </div>
                <span style={{fontSize:10, color:muted, fontFamily:'var(--font-mono)'}}>{t.last.time}</span>
              </div>
              <div style={{fontSize:12, color:muted, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}>{t.last.text}</div>
              {t.unread>0 && <div style={{marginTop:4, display:'inline-block', minWidth:18, height:18, padding:'0 6px', background:'#E53935', color:'#fff', fontSize:10, fontWeight:700, borderRadius:9, textAlign:'center', lineHeight:'18px'}}>{t.unread} novo</div>}
            </button>;
          })}
        </div>

        {/* conv */}
        <div style={{display:'flex', flexDirection:'column', minWidth:0}}>
          <div style={{padding:'14px 18px', borderBottom:`1px solid ${dark?'#2B2B2B':'#F0F0F0'}`, display:'flex', justifyContent:'space-between', alignItems:'center'}}>
            <div>
              <div style={{fontSize:14, fontWeight:600, color:dark?'#fff':'#1A1A1A'}}>{conv[0]?.guest} · soba {active}</div>
              <div style={{fontSize:11, color:muted, marginTop:2}}>WhatsApp · spletni gost · DE</div>
            </div>
            <div style={{display:'flex', gap:6}}>
              <HBtn size="sm" variant="ghost" dark={dark} icon="bell">Označi opravljeno</HBtn>
              <HBtn size="sm" variant="ghost" dark={dark} icon="key">Folio</HBtn>
            </div>
          </div>
          <div style={{flex:1, padding:18, overflowY:'auto', display:'flex', flexDirection:'column', gap:10, background:dark?'#0F0F0F':'#FAFAFA'}}>
            {conv.map(m=>
              <div key={m.id} style={{alignSelf:m.from==='staff'?'flex-end':'flex-start', maxWidth:'70%'}}>
                <div style={{padding:'10px 14px', background:m.from==='staff'?'#2196F3':(dark?'#2B2B2B':'#fff'), color:m.from==='staff'?'#fff':(dark?'#E5E5E5':'#1A1A1A'), borderRadius:12, fontSize:13, lineHeight:1.45, border:m.from==='staff'?'none':`1px solid ${dark?'#333':'#E5E5E5'}`}}>{m.text}</div>
                <div style={{fontSize:10, color:muted, marginTop:4, padding:'0 4px', fontFamily:'var(--font-mono)'}}>
                  {m.time}{m.by?` · ${m.by}`:''}
                </div>
              </div>
            )}
          </div>
          <div style={{padding:'14px 18px', borderTop:`1px solid ${dark?'#2B2B2B':'#F0F0F0'}`, display:'flex', gap:8}}>
            <input placeholder="Odgovorite gostu…" style={{flex:1, padding:'10px 14px', background:dark?'#1A1A1A':'#F8F9FA', border:`1px solid ${dark?'#2B2B2B':'#E5E5E5'}`, borderRadius:8, fontSize:13, fontFamily:'inherit', color:dark?'#E5E5E5':'#1A1A1A'}}/>
            <HBtn variant="primary" icon="check">Pošlji</HBtn>
          </div>
        </div>

        {/* context */}
        <div style={{borderLeft:`1px solid ${dark?'#2B2B2B':'#F0F0F0'}`, padding:18, overflowY:'auto'}}>
          <div style={{fontSize:11, fontWeight:700, letterSpacing:'.08em', textTransform:'uppercase', color:muted, marginBottom:10}}>Soba {active} · konteksti</div>
          {[['Junior Suite','Tip sobe'],['28.04 → 04.05','6 noči'],['VIP · Triglav Club','Loyalty'],['DE · vegetarijanec','Preference'],['€ 1.451,40','Trenutni folio']].map(([v,l])=>
            <div key={l} style={{padding:'10px 0', borderBottom:`1px solid ${dark?'#2B2B2B':'#F5F5F5'}`}}>
              <div style={{fontSize:10, color:muted, fontWeight:600, letterSpacing:'.06em', textTransform:'uppercase'}}>{l}</div>
              <div style={{fontSize:13, color:dark?'#E5E5E5':'#1A1A1A', marginTop:2, fontWeight:500}}>{v}</div>
            </div>
          )}
          <div style={{marginTop:14, fontSize:11, fontWeight:700, letterSpacing:'.08em', textTransform:'uppercase', color:muted, marginBottom:10}}>Predloge odgovorov</div>
          {['Brisače na poti — 10 min','Šampanjec v sobo — 15 min','Pozni check-out odobren','Taksi rezerviran','Restavracija — rezervirano'].map(t=>
            <button key={t} style={{display:'block', width:'100%', textAlign:'left', padding:'8px 10px', marginBottom:4, background:dark?'#2B2B2B':'#F8F9FA', border:'none', borderRadius:6, fontSize:12, fontFamily:'inherit', color:dark?'#E5E5E5':'#1A1A1A', cursor:'pointer'}}>{t}</button>
          )}
        </div>
      </div>
    </HCard>
  </>;
}

// ─── GROUPS ──────────────────────────────────────────────────────────────────
function RCGroups({ dark }) {
  const muted = dark?'#9A9A9A':'#707070';
  return <>
    <HPageHeader dark={dark} title="Skupine in pogodbe"
      subtitle="Group bookings · TO partnerji · MICE"
      actions={<>
        <HBtn variant="ghost" dark={dark} icon="search">Filter</HBtn>
        <HBtn variant="primary" icon="plus">Nova skupina</HBtn>
      </>}/>

    <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:14, marginBottom:18}}>
      <HStat dark={dark} tone="purple" label="Aktivne skupine" value={GROUPS.length}/>
      <HStat dark={dark} tone="blue"   label="Sob v skupinah" value={GROUPS.reduce((s,g)=>s+g.rooms,0)}/>
      <HStat dark={dark} tone="green"  label="Vrednost"       value={`€ ${(GROUPS.reduce((s,g)=>s+g.total,0)/1000).toFixed(1)}k`}/>
      <HStat dark={dark} tone="orange" label="Neporavnano"    value={`€ ${GROUPS.reduce((s,g)=>s+(g.total-g.paid),0).toLocaleString('sl-SI')}`}/>
    </div>

    <HCard dark={dark} padding={0} style={{overflow:'hidden'}}>
      <HTable dark={dark} columns={[
        {key:'id', label:'Koda', render:r=><span style={{fontFamily:'var(--font-mono)', fontWeight:700, color:'#9C27B0'}}>{r.id}</span>},
        {key:'name', label:'Skupina', render:r=><div>
          <div style={{fontWeight:600}}>{r.name}</div>
          <div style={{fontSize:11, color:muted, marginTop:2}}>vodja: {r.leader} · {r.contact}</div>
        </div>},
        {key:'dates', label:'Datumi', render:r=><span style={{fontFamily:'var(--font-mono)', fontSize:12}}>{r.checkin}–{r.checkout}</span>},
        {key:'rooms', label:'Sobe / Pax', align:'right', render:r=><div>
          <div style={{fontFamily:'var(--font-mono)', fontWeight:700}}>{r.rooms} sob</div>
          <div style={{fontSize:11, color:muted}}>{r.pax} oseb</div>
        </div>},
        {key:'total', label:'Vrednost', align:'right', render:r=><span style={{fontFamily:'var(--font-mono)', fontWeight:700}}>€ {r.total.toLocaleString('sl-SI')}</span>},
        {key:'paid', label:'Plačano', align:'right', render:r=>{
          const p = (r.paid/r.total)*100;
          return <div style={{minWidth:120}}>
            <div style={{display:'flex', justifyContent:'space-between', fontSize:11, marginBottom:3}}>
              <span style={{fontFamily:'var(--font-mono)', color:muted}}>{p.toFixed(0)}%</span>
              <span style={{fontFamily:'var(--font-mono)', fontWeight:600}}>€{r.paid.toLocaleString('sl-SI')}</span>
            </div>
            <div style={{height:5, background:dark?'#2B2B2B':'#F0F0F0', borderRadius:3}}>
              <div style={{height:'100%', width:`${p}%`, background:p===100?'#2DD164':p>0?'#FF9800':'#E53935', borderRadius:3}}/>
            </div>
          </div>;
        }},
        {key:'status', label:'Status', render:r=>{
          const map = {confirmed:['success','Potrjeno'], option:['warning','Opcija'], inquiry:['neutral','Povpraševanje']};
          return <HBadge tone={map[r.status][0]}>{map[r.status][1]}</HBadge>;
        }},
        {key:'act', label:'', render:_=><HBtn size="sm" variant="ghost" dark={dark}>Odpri</HBtn>},
      ]} rows={GROUPS}/>
    </HCard>
  </>;
}

// ─── PARKING ─────────────────────────────────────────────────────────────────
function RCParking({ dark }) {
  const muted = dark?'#9A9A9A':'#707070';
  const free = PARKING_SPOTS.filter(s=>!s.occupied).length;
  return <>
    <HPageHeader dark={dark} title="Parking · garažna hiša"
      subtitle="Klet -1 · 10 mest · 6 zasedenih · 4 prosta"
      actions={<>
        <HBtn variant="ghost" dark={dark} icon="search">Najdi vozilo</HBtn>
        <HBtn variant="primary" icon="plus">Dodeli mesto</HBtn>
      </>}/>

    <div style={{display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:16}}>
      <HCard dark={dark}>
        <div style={{fontSize:14, fontWeight:600, marginBottom:14, color:dark?'#fff':'#1A1A1A'}}>Tloris klet -1</div>
        <div style={{padding:18, background:dark?'#0F0F0F':'#FAFAFA', borderRadius:10, position:'relative'}}>
          {/* row */}
          <div style={{fontSize:10, color:muted, marginBottom:6, fontFamily:'var(--font-mono)', letterSpacing:'.1em'}}>VHOD ↗</div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(6,1fr)', gap:6, marginBottom:18}}>
            {PARKING_SPOTS.slice(0,6).map(s=>
              <button key={s.n} style={{
                aspectRatio:'1/1.4', background:s.occupied?(s.type==='ev'?'#00BCD4':'#2196F3'):(dark?'#2B2B2B':'#fff'),
                border:`2px ${s.occupied?'solid':'dashed'} ${s.occupied?(s.type==='ev'?'#00BCD4':'#2196F3'):(dark?'#444':'#C8C8C8')}`,
                borderRadius:6, fontFamily:'inherit', cursor:'pointer', color:s.occupied?'#fff':muted,
                display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:2,
              }}>
                <div style={{fontFamily:'var(--font-mono)', fontWeight:700, fontSize:11}}>{s.n}</div>
                {s.occupied && <div style={{fontSize:9, opacity:.85}}>{s.room}</div>}
              </button>
            )}
          </div>
          <div style={{height:24, background:dark?'#1A1A1A':'#E5E5E5', borderRadius:4, marginBottom:18, display:'flex', alignItems:'center', justifyContent:'center', fontSize:9, color:muted, fontFamily:'var(--font-mono)', letterSpacing:'.2em'}}>POT ⇄</div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:6}}>
            {PARKING_SPOTS.slice(6).map(s=>{
              const colors = {ev:'#00BCD4', handicap:'#9C27B0', bus:'#FF9800'};
              return <button key={s.n} style={{
                aspectRatio:'1.4/1', background:s.occupied?colors[s.type]:(dark?'#2B2B2B':'#fff'),
                border:`2px ${s.occupied?'solid':'dashed'} ${s.occupied?colors[s.type]:(dark?'#444':'#C8C8C8')}`,
                borderRadius:6, fontFamily:'inherit', cursor:'pointer', color:s.occupied?'#fff':muted,
                display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:2, padding:6,
              }}>
                <div style={{fontFamily:'var(--font-mono)', fontWeight:700, fontSize:11}}>{s.n}</div>
                <div style={{fontSize:9, opacity:.85, textTransform:'uppercase', letterSpacing:'.06em'}}>{s.type==='ev'?'EV':s.type==='handicap'?'INV':'BUS'}</div>
              </button>;
            })}
          </div>
        </div>
        <div style={{display:'flex', gap:14, marginTop:14, flexWrap:'wrap'}}>
          {[['#2196F3','Standard'],['#00BCD4','EV polnilnica'],['#9C27B0','Invalid'],['#FF9800','Avtobus']].map(([c,l])=>
            <div key={l} style={{display:'flex', alignItems:'center', gap:6, fontSize:11, color:muted}}>
              <span style={{width:12, height:12, borderRadius:3, background:c}}/>{l}
            </div>
          )}
        </div>
      </HCard>

      <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'}}>Aktivna vozila ({PARKING_SPOTS.length-free})</div>
        <HTable dark={dark} compact columns={[
          {key:'n', label:'Mesto', render:r=><span style={{fontFamily:'var(--font-mono)', fontWeight:700, color:'#2196F3'}}>{r.n}</span>},
          {key:'plate', label:'Tablica', render:r=><span style={{fontFamily:'var(--font-mono)', fontSize:12}}>{r.plate}</span>},
          {key:'guest', label:'Gost', render:r=><div style={{fontSize:12}}><b>{r.guest}</b><div style={{color:muted, fontSize:10}}>soba {r.room}</div></div>},
          {key:'from', label:'Od', render:r=><span style={{fontFamily:'var(--font-mono)', fontSize:11, color:muted}}>{r.from}</span>},
        ]} rows={PARKING_SPOTS.filter(s=>s.occupied)}/>
      </HCard>
    </div>
  </>;
}

// ─── SHIFT HANDOVER + CASH COUNT ─────────────────────────────────────────────
function RCHandover({ dark }) {
  const muted = dark?'#9A9A9A':'#707070';
  const cashTotal = CASH_DENOMS.reduce((s,d)=>s + d.v*d.count, 0);
  const expected = 1284.50;
  const diff = cashTotal - expected;

  return <>
    <HPageHeader dark={dark} title="Predaja smene"
      subtitle="Maja Kranjc → Janez Logar · 14:00 · POS-01"
      actions={<>
        <HBtn variant="ghost" dark={dark} icon="printer">Tiskaj zapisnik</HBtn>
        <HBtn variant="primary" icon="check">Zaključi predajo</HBtn>
      </>}/>

    <div style={{display:'grid', gridTemplateColumns:'1.2fr 1fr', gap:16, alignItems:'start'}}>
      {/* Cash count */}
      <HCard dark={dark}>
        <div style={{fontSize:14, fontWeight:600, marginBottom:6, color:dark?'#fff':'#1A1A1A'}}>Cash count · gotovinska blagajna</div>
        <div style={{fontSize:12, color:muted, marginBottom:14}}>Preštej bankovce in kovance — sistem izračuna razliko</div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:8, marginBottom:14}}>
          {CASH_DENOMS.map(d=>
            <div key={d.v} style={{padding:'10px 12px', background:dark?'#2B2B2B':'#F8F9FA', borderRadius:8}}>
              <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:6}}>
                <span style={{fontFamily:'var(--font-display)', fontWeight:700, fontSize:14, color:dark?'#fff':'#1A1A1A'}}>€ {d.v < 1 ? d.v.toFixed(2) : d.v}</span>
                <span style={{fontSize:10, color:muted, textTransform:'uppercase', letterSpacing:'.06em', fontWeight:600}}>{d.v >= 5 ? 'bank.' : 'kov.'}</span>
              </div>
              <div style={{display:'flex', alignItems:'center', gap:6}}>
                <input type="number" defaultValue={d.count} style={{width:'100%', padding:'6px 8px', background:dark?'#1A1A1A':'#fff', border:`1px solid ${dark?'#333':'#E5E5E5'}`, borderRadius:5, fontFamily:'var(--font-mono)', fontWeight:700, fontSize:13, textAlign:'right', color:dark?'#fff':'#1A1A1A'}}/>
                <span style={{fontSize:10, color:muted}}>×</span>
              </div>
              <div style={{marginTop:4, fontSize:11, fontFamily:'var(--font-mono)', color:'#2196F3', textAlign:'right', fontWeight:600}}>€ {(d.v*d.count).toFixed(2)}</div>
            </div>
          )}
        </div>
        <div style={{padding:'14px 18px', background:dark?'#0F1419':'#F0F4FF', borderRadius:10, display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:14}}>
          <div>
            <div style={{fontSize:10, color:muted, fontWeight:600, letterSpacing:'.06em', textTransform:'uppercase'}}>Pričakovano</div>
            <div style={{fontFamily:'var(--font-display)', fontSize:20, fontWeight:700, color:dark?'#E5E5E5':'#1A1A1A', marginTop:2}}>€ {expected.toFixed(2)}</div>
          </div>
          <div>
            <div style={{fontSize:10, color:muted, fontWeight:600, letterSpacing:'.06em', textTransform:'uppercase'}}>Prešteto</div>
            <div style={{fontFamily:'var(--font-display)', fontSize:20, fontWeight:700, color:'#2196F3', marginTop:2}}>€ {cashTotal.toFixed(2)}</div>
          </div>
          <div>
            <div style={{fontSize:10, color:muted, fontWeight:600, letterSpacing:'.06em', textTransform:'uppercase'}}>Razlika</div>
            <div style={{fontFamily:'var(--font-display)', fontSize:20, fontWeight:700, color:Math.abs(diff)<0.01?'#2DD164':diff>0?'#FF9800':'#E53935', marginTop:2}}>{diff>=0?'+':''}€ {diff.toFixed(2)}</div>
          </div>
        </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'}}>Povzetek smene</div>
          {[
            ['Računi izdani',     '34',     '#2196F3'],
            ['Storno',            '2',      '#E53935'],
            ['Promet skupaj',     '€ 4.280','#2DD164'],
            ['Gotovina',          '€ 1.284,50', '#FFB300'],
            ['Kartica',           '€ 2.180,00', '#00BCD4'],
            ['Soba (room charge)','€ 815,50',   '#9C27B0'],
            ['Check-ini',         '14',     '#2DD164'],
            ['Check-outi',        '11',     '#FF9800'],
          ].map(([l,v,c],i)=>
            <div key={l} style={{display:'flex', justifyContent:'space-between', alignItems:'center', padding:'8px 0', borderTop:i>0?`1px solid ${dark?'#2B2B2B':'#F5F5F5'}`:'none'}}>
              <div style={{display:'flex', alignItems:'center', gap:8}}>
                <span style={{width:8, height:8, borderRadius:'50%', background:c}}/>
                <span style={{fontSize:13, color:dark?'#E5E5E5':'#4D4D4D'}}>{l}</span>
              </div>
              <span style={{fontFamily:'var(--font-mono)', fontWeight:700, color:dark?'#fff':'#1A1A1A', fontSize:13}}>{v}</span>
            </div>
          )}
        </HCard>

        <HCard dark={dark}>
          <div style={{fontSize:14, fontWeight:600, marginBottom:10, color:dark?'#fff':'#1A1A1A'}}>Opomnik za naslednjo smeno</div>
          <textarea defaultValue={`• Soba 207 (Petrov) — še niso šli na check-out, klic ob 14:30\n• Mini-bar 305 (Pringles) — popravi zalogo\n• 17:00 — VIP arrival G. Marković, suite 501\n• POS terminal 02 lani počasen — IT obvestil`} style={{width:'100%', minHeight:130, padding:'12px 14px', background:dark?'#2B2B2B':'#F8F9FA', border:`1px solid ${dark?'#333':'#E5E5E5'}`, borderRadius:8, fontSize:12, fontFamily:'inherit', color:dark?'#E5E5E5':'#1A1A1A', resize:'vertical', lineHeight:1.5}}/>
          <div style={{marginTop:12, padding:'10px 14px', background:dark?'rgba(33,150,243,.15)':'#F0F4FF', borderRadius:8, fontSize:12, color:'#2196F3', display:'flex', alignItems:'center', gap:8}}>
            <HIcon name="bell" size={14}/> Janez Logar bo dobil opomnike v sistem ob prijavi.
          </div>
        </HCard>
      </div>
    </div>
  </>;
}

Object.assign(window, { RCRoomRack, RCWellness, RCMessages, RCGroups, RCParking, RCHandover });