// Receptionist — POS recepcije: hitri check-in/out, prihodi, dodelitve sob, blagajna FURS, walk-in

function RCDashboard({ dark, onNav }) {
  const muted = dark?'#9A9A9A':'#707070';
  const arr = RESERVATIONS.filter(r=>r.checkin==='28.04.');
  const dep = ROOMS.filter(r=>r.status==='departing');
  return <>
    <HPageHeader dark={dark}
      title="Recepcija — torek, 28. april"
      subtitle="13:42 · smena Maja Kranjc · 07–15"
      actions={<>
        <HBtn variant="ghost" dark={dark} icon="printer">Predaja smene</HBtn>
        <HBtn variant="cyan" icon="plus" onClick={()=>onNav('walkin')}>Walk-in</HBtn>
        <HBtn variant="primary" icon="key" onClick={()=>onNav('checkin')}>Hitri check-in</HBtn>
      </>}/>

    <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:14, marginBottom:18}}>
      <HStat dark={dark} tone="cyan"   label="Prihodi danes"      value={`${arr.filter(r=>r.status==='arriving').length}/${arr.length}`}/>
      <HStat dark={dark} tone="blue"   label="Odhodi danes"       value={`${dep.length}/${HOTEL.departuresToday}`}/>
      <HStat dark={dark} tone="green"  label="V hiši"             value={HOTEL.inHouse}/>
      <HStat dark={dark} tone="orange" label="Promet smene"       value="€ 4.280"/>
    </div>

    <div style={{display:'grid', gridTemplateColumns:'2fr 1fr', gap:16, marginBottom:16}}>
      <HCard dark={dark} padding={0} style={{overflow:'hidden'}}>
        <div style={{padding:'14px 20px', borderBottom:`1px solid ${dark?'#2B2B2B':'#F0F0F0'}`, display:'flex', alignItems:'center', justifyContent:'space-between'}}>
          <div style={{fontSize:14, fontWeight:600, color:dark?'#fff':'#1A1A1A'}}>Prihodi danes · {arr.length}</div>
          <div style={{display:'flex', gap:6}}>
            {['Vsi','Prijavljeni','Čakajo','Pozno'].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} columns={[
          {key:'time', label:'Pričakovan', render:r=><div style={{fontFamily:'var(--font-mono)', fontSize:12, fontWeight:700}}>{(['14:00','14:30','15:00','15:30','16:00','16:30','17:00','18:00'])[r.id.charCodeAt(5)%8]}</div>},
          {key:'guest', label:'Gost', render:r=><div style={{display:'flex', alignItems:'center', gap:10}}>
            <div style={{width:32, height:32, borderRadius:'50%', background:'linear-gradient(135deg,#4DD0E1,#00BCD4)', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontWeight:700, fontSize:11}}>{r.guest.split(' ').map(w=>w[0]).join('')}</div>
            <div><div style={{fontWeight:600, display:'flex', alignItems:'center', gap:6}}>{r.guest} {r.vip && <HBadge tone="orange">VIP</HBadge>}</div><div style={{fontSize:11, color:muted}}>{r.id} · {r.nights} noči · {r.pax} oseb</div></div>
          </div>},
          {key:'room', label:'Soba', render:r=><div style={{fontFamily:'var(--font-mono)', fontWeight:700, fontSize:14}}>{r.room==='—' ? <span style={{color:'#FF9800'}}>dodeli</span> : r.room}</div>},
          {key:'pay', label:'Plačilo', render:r=>{
            if (r.paid===0) return <HBadge tone="danger">Neplačano</HBadge>;
            if (r.paid<r.total) return <HBadge tone="orange">€{r.total-r.paid} ostane</HBadge>;
            return <HBadge tone="success">Plačano</HBadge>;
          }},
          {key:'note', label:'Opombe', render:r=>r.note ? <span style={{fontSize:11, color:'#FF9800', fontWeight:500}}>⚑ {r.note}</span> : <span style={{color:muted, fontSize:11}}>—</span>},
          {key:'act', label:'', align:'right', render:r=><HBtn size="sm" variant={r.status==='arriving'?'cyan':'ghost'} dark={dark} icon="key">{r.status==='arriving'?'Check-in':'Pripravi'}</HBtn>},
        ]} rows={arr}/>
      </HCard>

      <div style={{display:'flex', flexDirection:'column', gap:16}}>
        <HCard dark={dark}>
          <div style={{fontSize:14, fontWeight:600, marginBottom:14, color:dark?'#fff':'#1A1A1A'}}>Hitre akcije</div>
          {[
            ['key','Check-in po rezervaciji','#2196F3'],
            ['logout','Check-out gosta','#00BCD4'],
            ['plus','Walk-in rezervacija','#FF9800'],
            ['printer','Tiskaj račun','#9C27B0'],
            ['headset','Klic gosta','#2DD164'],
            ['door','Programiraj ključ','#37474F'],
          ].map(([ic,l,c])=>
            <button key={l} style={{display:'flex', alignItems:'center', gap:12, width:'100%', padding:'10px 12px', marginBottom:6,
              background:'transparent', border:`1px solid ${dark?'#2B2B2B':'#F0F0F0'}`, borderRadius:10, cursor:'pointer', fontFamily:'inherit'}}>
              <div style={{width:32, height:32, borderRadius:8, background:c, color:'#fff', display:'flex', alignItems:'center', justifyContent:'center'}}><HIcon name={ic} size={14}/></div>
              <div style={{flex:1, textAlign:'left', fontSize:13, fontWeight:500, color:dark?'#E5E5E5':'#1A1A1A'}}>{l}</div>
              <HIcon name="chevright" size={14} color={muted}/>
            </button>
          )}
        </HCard>

        <HCard dark={dark}>
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:14}}>
            <div style={{fontSize:14, fontWeight:600, color:dark?'#fff':'#1A1A1A'}}>FURS davčna blagajna</div>
            <HBadge tone="success">Online</HBadge>
          </div>
          <div style={{fontSize:11, color:muted, marginBottom:8}}>Poslovni prostor T-001 · Naprava 1</div>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:8, fontSize:12}}>
            <div style={{padding:'10px 12px', background:dark?'#2B2B2B':'#F8F9FA', borderRadius:8}}>
              <div style={{color:muted, fontSize:10, fontWeight:600, letterSpacing:'.08em', textTransform:'uppercase'}}>Računi danes</div>
              <div style={{fontFamily:'var(--font-display)', fontSize:18, fontWeight:700, marginTop:4}}>34</div>
            </div>
            <div style={{padding:'10px 12px', background:dark?'#2B2B2B':'#F8F9FA', borderRadius:8}}>
              <div style={{color:muted, fontSize:10, fontWeight:600, letterSpacing:'.08em', textTransform:'uppercase'}}>Promet</div>
              <div style={{fontFamily:'var(--font-display)', fontSize:18, fontWeight:700, marginTop:4}}>€ 4.280</div>
            </div>
          </div>
        </HCard>
      </div>
    </div>

    <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16}}>
      <HCard dark={dark} padding={0} style={{overflow:'hidden'}}>
        <div style={{padding:'14px 20px', borderBottom:`1px solid ${dark?'#2B2B2B':'#F0F0F0'}`, display:'flex', alignItems:'center', justifyContent:'space-between'}}>
          <div style={{fontSize:14, fontWeight:600, color:dark?'#fff':'#1A1A1A'}}>Odhodi danes</div>
          <span style={{fontSize:12, color:muted}}>{dep.length} sob</span>
        </div>
        <HTable dark={dark} compact columns={[
          {key:'num',  label:'Soba', render:r=><span style={{fontFamily:'var(--font-mono)', fontWeight:700}}>{r.num}</span>},
          {key:'guest', label:'Gost', render:r=><span style={{fontWeight:500}}>{r.guest}</span>},
          {key:'time', label:'Do', render:r=><span style={{fontFamily:'var(--font-mono)', fontSize:12}}>{(['10:00','10:30','11:00','11:30','12:00'])[r.num.charCodeAt(2)%5]}</span>},
          {key:'act', label:'', align:'right', render:r=><HBtn size="sm" variant="primary" dark={dark}>Check-out</HBtn>},
        ]} rows={dep}/>
      </HCard>

      <HCard dark={dark}>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:14}}>
          <div style={{fontSize:14, fontWeight:600, color:dark?'#fff':'#1A1A1A'}}>Prošnje gostov</div>
          <HBadge tone="orange">{GUEST_REQUESTS.filter(g=>g.status!=='approved').length} aktivnih</HBadge>
        </div>
        {GUEST_REQUESTS.map((g,i)=>{
          const stt = {open:['orange','Odprto'], in_progress:['blue','V obdelavi'], approved:['success','Odobreno']}[g.status];
          return <div key={g.id} style={{padding:'10px 0', borderTop:i>0?`1px solid ${dark?'#2B2B2B':'#F5F5F5'}`:'none', display:'flex', gap:12, alignItems:'center'}}>
            <div style={{width:36, height:36, borderRadius:8, background:dark?'#2B2B2B':'#F5F5F5', color:dark?'#C8C8C8':'#4D4D4D', display:'flex', alignItems:'center', justifyContent:'center', fontWeight:700, fontSize:12, fontFamily:'var(--font-mono)'}}>{g.room}</div>
            <div style={{flex:1, minWidth:0}}>
              <div style={{fontSize:13, color:dark?'#E5E5E5':'#1A1A1A'}}>{g.request}</div>
              <div style={{fontSize:11, color:muted, marginTop:2}}>{g.guest} · {g.time}</div>
            </div>
            <HBadge tone={stt[0]}>{stt[1]}</HBadge>
          </div>;
        })}
      </HCard>
    </div>
  </>;
}

function RCCheckin({ dark }) {
  const muted = dark?'#9A9A9A':'#707070';
  const [step, setStep] = React.useState(2);
  const r = RESERVATIONS[2]; // James Schmidt — VIP
  const steps = ['Najdi rezervacijo','Preveri podatke','Skeniraj dokument','Plačilo','Programiraj ključ'];

  return <>
    <HPageHeader dark={dark} breadcrumbs={['Recepcija','Check-in']}
      title={`Check-in · ${r.guest}`}
      subtitle={`${r.id} · ${r.nights} noči · soba ${r.room} (${r.type}) · ${r.channel}`}/>

    {/* Stepper */}
    <HCard dark={dark} style={{marginBottom:16}} padding={20}>
      <div style={{display:'flex', alignItems:'center', gap:0}}>
        {steps.map((s,i)=>{
          const done = i<step; const cur = i===step;
          return <React.Fragment key={s}>
            <div style={{display:'flex', alignItems:'center', gap:10, flexShrink:0}}>
              <div style={{width:32, height:32, borderRadius:'50%', display:'flex', alignItems:'center', justifyContent:'center',
                background: done?'#2DD164': cur?'#2196F3':(dark?'#2B2B2B':'#F0F0F0'),
                color: done||cur?'#fff':muted, fontSize:13, fontWeight:700}}>
                {done ? '✓' : i+1}
              </div>
              <div style={{fontSize:12, fontWeight: cur?700:500, color: cur?(dark?'#fff':'#1A1A1A'):muted}}>{s}</div>
            </div>
            {i<steps.length-1 && <div style={{flex:1, height:2, background: i<step?'#2DD164':(dark?'#2B2B2B':'#F0F0F0'), margin:'0 16px', borderRadius:999}}/>}
          </React.Fragment>;
        })}
      </div>
    </HCard>

    <div style={{display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:16}}>
      <HCard dark={dark}>
        <div style={{fontSize:14, fontWeight:600, marginBottom:18, color:dark?'#fff':'#1A1A1A', display:'flex', alignItems:'center', gap:8}}>
          <HIcon name="eye" size={16}/> Skeniraj osebni dokument
        </div>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16, marginBottom:18}}>
          <div style={{aspectRatio:'1.586', background:`linear-gradient(135deg, ${dark?'#1F2A36':'#E3F2FD'} 0%, ${dark?'#172026':'#F0F8FF'} 100%)`, border:`2px dashed ${dark?'#2196F3':'#2196F3'}`, borderRadius:12, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:8, color:'#2196F3'}}>
            <HIcon name="eye" size={28}/>
            <div style={{fontSize:13, fontWeight:600}}>Skeniraj dokument</div>
            <div style={{fontSize:11, color:muted, textAlign:'center', padding:'0 16px'}}>Postavi ID, potni list ali vozniško dovoljenje na čitalec</div>
          </div>
          <div style={{padding:'14px', background:dark?'#2B2B2B':'#F8F9FA', borderRadius:12, border:`1px solid ${dark?'#333':'#E5E5E5'}`}}>
            <div style={{fontSize:11, fontWeight:600, color:muted, letterSpacing:'.08em', textTransform:'uppercase', marginBottom:10}}>OCR rezultat</div>
            {[['Ime','James'],['Priimek','Schmidt'],['Datum rojstva','12.06.1978'],['Državljanstvo','Nemčija'],['Št. dokumenta','C7V9MK283'],['Veljavnost','08.2031']].map(([l,v])=>
              <div key={l} style={{display:'flex', justifyContent:'space-between', padding:'6px 0', fontSize:12}}>
                <span style={{color:muted}}>{l}</span>
                <span style={{fontWeight:600, color:dark?'#fff':'#1A1A1A'}}>{v}</span>
              </div>
            )}
            <div style={{marginTop:10, padding:'8px 10px', background: dark?'rgba(45,209,100,.12)':'#E6F9EC', color:'#117A34', borderRadius:6, fontSize:11, fontWeight:600, display:'flex', alignItems:'center', gap:6}}>
              <HIcon name="check" size={12}/> Avtomatsko poslano v AJPES
            </div>
          </div>
        </div>

        <div style={{padding:'14px', background:dark?'#2B2B2B':'#F8F9FA', borderRadius:10, marginBottom:14}}>
          <div style={{fontSize:11, fontWeight:600, color:muted, letterSpacing:'.08em', textTransform:'uppercase', marginBottom:10}}>Soba in nastanitev</div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:12, fontSize:12}}>
            <div><div style={{color:muted}}>Soba</div><div style={{fontFamily:'var(--font-display)', fontSize:20, fontWeight:700, marginTop:2}}>305</div></div>
            <div><div style={{color:muted}}>Tip</div><div style={{fontWeight:600, marginTop:6}}>Junior Suite</div></div>
            <div><div style={{color:muted}}>Prihod</div><div style={{fontWeight:600, marginTop:6}}>28.04. 14:00</div></div>
            <div><div style={{color:muted}}>Odhod</div><div style={{fontWeight:600, marginTop:6}}>04.05. 11:00</div></div>
          </div>
        </div>

        <div style={{display:'flex', gap:10, justifyContent:'flex-end'}}>
          <HBtn variant="ghost" dark={dark} onClick={()=>setStep(Math.max(0,step-1))} icon="chevleft">Nazaj</HBtn>
          <HBtn variant="primary" onClick={()=>setStep(step+1)}>Naprej · Plačilo →</HBtn>
        </div>
      </HCard>

      <div style={{display:'flex', flexDirection:'column', gap:16}}>
        <HCard dark={dark}>
          <div style={{fontSize:14, fontWeight:600, marginBottom:14, color:dark?'#fff':'#1A1A1A'}}>Povzetek rezervacije</div>
          {[['Bivanje','€1.380'],['Turistična taksa','€30 (6×2,50)'],['Wellness paket','€80'],['Skupaj','€1.490']].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: l==='Skupaj'?14:13, fontWeight: l==='Skupaj'?700:500}}>
              <span style={{color: l==='Skupaj'?(dark?'#fff':'#1A1A1A'):muted}}>{l}</span>
              <span style={{color: l==='Skupaj'?'#2196F3':(dark?'#fff':'#1A1A1A')}}>{v}</span>
            </div>
          )}
          <div style={{marginTop:10, padding:'10px 12px', background:dark?'rgba(45,209,100,.12)':'#E6F9EC', color:'#117A34', borderRadius:8, fontSize:12, fontWeight:600}}>
            ✓ Plačano vnaprej preko Booking.com
          </div>
        </HCard>

        <HCard dark={dark}>
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:10}}>
            <div style={{fontSize:14, fontWeight:600, color:dark?'#fff':'#1A1A1A'}}>VIP gost</div>
            <HBadge tone="orange">VIP · 4 bivanja</HBadge>
          </div>
          <div style={{fontSize:12, color:muted, lineHeight:1.5}}>Repeat guest. Pri zadnjih obiskih: vegetarijanski meni, dvostranska blazina, zgodnji check-in. Prosil za cvetje v sobi.</div>
        </HCard>
      </div>
    </div>
  </>;
}

function RCWalkin({ dark }) {
  const muted = dark?'#9A9A9A':'#707070';
  return <>
    <HPageHeader dark={dark} breadcrumbs={['Recepcija','Walk-in']}
      title="Nova walk-in rezervacija"
      subtitle="Hitra rezervacija — gost je že na recepciji"/>

    <div style={{display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:16}}>
      <HCard dark={dark}>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:14, marginBottom:18}}>
          {[['Ime','Vnesi…'],['Priimek','Vnesi…'],['Telefon','+386…'],['E-pošta','npr. ime@…'],['Države/držav.','Slovenija ▾'],['Št. dokumenta','Skeniraj…']].map(([l,p])=>
            <label key={l} style={{display:'block'}}>
              <div style={{fontSize:11, fontWeight:600, color:muted, letterSpacing:'.06em', textTransform:'uppercase', marginBottom:6}}>{l}</div>
              <input placeholder={p} 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', outline:'none'}}/>
            </label>
          )}
        </div>

        <div style={{padding:'14px', background:dark?'#2B2B2B':'#F8F9FA', borderRadius:10, marginBottom:18}}>
          <div style={{fontSize:11, fontWeight:600, color:muted, letterSpacing:'.08em', textTransform:'uppercase', marginBottom:10}}>Bivanje</div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:12}}>
            {[['Prihod','28.04.2026'],['Odhod','30.04.2026'],['Noči','2'],['Oseb','2']].map(([l,v])=>
              <div key={l}>
                <div style={{fontSize:11, color:muted, marginBottom:4}}>{l}</div>
                <input defaultValue={v} style={{width:'100%', padding:'9px 10px', border:`1px solid ${dark?'#333':'#E5E5E5'}`, borderRadius:8, fontSize:13, fontFamily:'inherit', background:dark?'#1A1A1A':'#fff', color:dark?'#E5E5E5':'#1A1A1A'}}/>
              </div>
            )}
          </div>
        </div>

        <div style={{marginBottom:14}}>
          <div style={{fontSize:11, fontWeight:600, color:muted, letterSpacing:'.08em', textTransform:'uppercase', marginBottom:10}}>Razpoložljive sobe</div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:10}}>
            {[
              {num:'108', type:'Standard', rate:120, sel:false},
              {num:'213', type:'Deluxe',   rate:160, sel:true },
              {num:'304', type:'Junior Suite', rate:230, sel:false},
            ].map(r=>
              <div key={r.num} style={{padding:'14px', borderRadius:10,
                background: r.sel ? (dark?'rgba(33,150,243,.15)':'#E3F2FD') : (dark?'#2B2B2B':'#fff'),
                border:`2px solid ${r.sel?'#2196F3':(dark?'#333':'#E5E5E5')}`,
                cursor:'pointer'}}>
                <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:6}}>
                  <div style={{fontFamily:'var(--font-display)', fontSize:20, fontWeight:700}}>{r.num}</div>
                  {r.sel && <HIcon name="check" size={16} color="#2196F3"/>}
                </div>
                <div style={{fontSize:12, color:muted, marginBottom:6}}>{r.type}</div>
                <div style={{fontSize:14, fontWeight:700}}>€{r.rate}/noč</div>
              </div>
            )}
          </div>
        </div>
      </HCard>

      <HCard dark={dark}>
        <div style={{fontSize:14, fontWeight:600, marginBottom:14, color:dark?'#fff':'#1A1A1A'}}>Povzetek</div>
        {[['Soba 213 (Deluxe)','€320'],['2 noči × €160',''],['Turistična taksa','€10 (2×2,50×2)'],['DDV 9,5%','€31'],['Skupaj','€361']].map(([l,v],i)=>
          v ? <div key={l} style={{display:'flex', justifyContent:'space-between', padding:'8px 0', borderTop:i>0?`1px solid ${dark?'#2B2B2B':'#F5F5F5'}`:'none', fontSize: l==='Skupaj'?14:13, fontWeight: l==='Skupaj'?700:500}}>
            <span style={{color: l==='Skupaj'?(dark?'#fff':'#1A1A1A'):muted}}>{l}</span>
            <span style={{color: l==='Skupaj'?'#2196F3':(dark?'#fff':'#1A1A1A')}}>{v}</span>
          </div>
          : <div key={l} style={{padding:'2px 0 8px', fontSize:11, color:muted}}>{l}</div>
        )}

        <div style={{borderTop:`1px solid ${dark?'#2B2B2B':'#F0F0F0'}`, marginTop:14, paddingTop:14}}>
          <div style={{fontSize:11, fontWeight:600, color:muted, letterSpacing:'.08em', textTransform:'uppercase', marginBottom:10}}>Plačilo</div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:6, marginBottom:14}}>
            {['Kartica','Gotovina','TRR'].map((p,i)=>
              <button key={p} style={{padding:'10px', fontSize:12, fontWeight:600, fontFamily:'inherit',
                background: i===0?'#2196F3':'transparent', color: i===0?'#fff':(dark?'#E5E5E5':'#1A1A1A'),
                border:`1px solid ${i===0?'#2196F3':(dark?'#2B2B2B':'#E5E5E5')}`, borderRadius:8, cursor:'pointer'}}>{p}</button>
            )}
          </div>
          <HBtn variant="primary" size="lg" style={{width:'100%', justifyContent:'center'}}>Naredi rezervacijo · €361</HBtn>
          <div style={{fontSize:11, color:muted, marginTop:8, textAlign:'center'}}>Račun bo poslan v FURS davčno blagajno</div>
        </div>
      </HCard>
    </div>
  </>;
}

function RCArrivals({ dark }) {
  const muted = dark?'#9A9A9A':'#707070';
  const stMap = {arriving:['orange','Prihaja'], confirmed:['blue','Potrjeno'], departed:['neutral','Odšel']};
  const all = RESERVATIONS;
  return <>
    <HPageHeader dark={dark} title="Prihodi in odhodi"
      subtitle={`14 prihodov · 11 odhodov · 64 v hiši`}
      actions={<><HBtn variant="ghost" dark={dark} icon="printer">Tiskaj seznam</HBtn><HBtn variant="primary" icon="key">Hitri check-in</HBtn></>}/>
    <div style={{display:'flex', gap:10, marginBottom:14, flexWrap:'wrap', alignItems:'center'}}>
      {['Prihodi','V hiši','Odhodi','Vse'].map((t,i)=>
        <button key={t} style={{padding:'7px 14px', fontSize:12, 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>
    <HCard dark={dark} padding={0} style={{overflow:'hidden'}}>
      <HTable dark={dark} columns={[
        {key:'time', label:'Čas', render:r=><div style={{fontFamily:'var(--font-mono)', fontSize:12, fontWeight:700}}>{(['14:00','14:30','15:00','15:30','16:00'])[r.id.charCodeAt(5)%5]}</div>},
        {key:'guest', label:'Gost', render:r=><div style={{fontWeight:600, display:'flex', alignItems:'center', gap:6}}>{r.guest} {r.vip && <HBadge tone="orange">VIP</HBadge>}</div>},
        {key:'id', label:'Rezervacija', render:r=><span style={{fontFamily:'var(--font-mono)', fontSize:12, color:'#2196F3'}}>{r.id}</span>},
        {key:'room', label:'Soba', render:r=><span style={{fontFamily:'var(--font-mono)', fontWeight:700}}>{r.room}</span>},
        {key:'nights', label:'Noči', align:'center'},
        {key:'pax',    label:'Os.', align:'center'},
        {key:'channel', label:'Kanal'},
        {key:'pay', label:'Plačilo', render:r=> r.paid===r.total?<HBadge tone="success">Plačano</HBadge>:r.paid===0?<HBadge tone="danger">Neplačano</HBadge>:<HBadge tone="orange">Delno</HBadge>},
        {key:'status', label:'Status', render:r=><HBadge tone={stMap[r.status]?.[0]||'blue'}>{stMap[r.status]?.[1]||r.status}</HBadge>},
        {key:'act', label:'', align:'right', render:r=><HBtn size="sm" variant="primary" dark={dark}>Check-in</HBtn>},
      ]} rows={all}/>
    </HCard>
  </>;
}

function RCKeys({ dark }) {
  const muted = dark?'#9A9A9A':'#707070';
  return <>
    <HPageHeader dark={dark} title="Programiranje ključev"
      subtitle="RFID ključavnice · Salto / Onity / dormakaba"/>
    <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16}}>
      <HCard dark={dark}>
        <div style={{fontSize:14, fontWeight:600, marginBottom:18, color:dark?'#fff':'#1A1A1A'}}>Programiraj nov ključ</div>
        <div style={{display:'flex', flexDirection:'column', gap:12, marginBottom:18}}>
          <div>
            <div style={{fontSize:11, fontWeight:600, color:muted, letterSpacing:'.06em', textTransform:'uppercase', marginBottom:6}}>Soba</div>
            <input defaultValue="305" style={{width:'100%', padding:'10px 12px', border:`1px solid ${dark?'#2B2B2B':'#E5E5E5'}`, borderRadius:8, fontSize:14, fontFamily:'var(--font-mono)', fontWeight:700, background:dark?'#1A1A1A':'#fff', color:dark?'#E5E5E5':'#1A1A1A'}}/>
          </div>
          <div>
            <div style={{fontSize:11, fontWeight:600, color:muted, letterSpacing:'.06em', textTransform:'uppercase', marginBottom:6}}>Veljavnost</div>
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:8}}>
              <input defaultValue="28.04.2026 14:00" style={{padding:'10px 12px', border:`1px solid ${dark?'#2B2B2B':'#E5E5E5'}`, borderRadius:8, fontSize:13, fontFamily:'inherit', background:dark?'#1A1A1A':'#fff', color:dark?'#E5E5E5':'#1A1A1A'}}/>
              <input defaultValue="04.05.2026 11:00" style={{padding:'10px 12px', border:`1px solid ${dark?'#2B2B2B':'#E5E5E5'}`, borderRadius:8, fontSize:13, fontFamily:'inherit', background:dark?'#1A1A1A':'#fff', color:dark?'#E5E5E5':'#1A1A1A'}}/>
            </div>
          </div>
          <div>
            <div style={{fontSize:11, fontWeight:600, color:muted, letterSpacing:'.06em', textTransform:'uppercase', marginBottom:6}}>Dostop</div>
            <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:6}}>
              {['Soba','Wellness','Garaža'].map((a,i)=>
                <button key={a} style={{padding:'9px', fontSize:12, fontWeight:600, fontFamily:'inherit',
                  background: i<2?(dark?'rgba(33,150,243,.15)':'#E3F2FD'):'transparent',
                  color: i<2?'#2196F3':(dark?'#9A9A9A':'#707070'),
                  border:`1px solid ${i<2?'#2196F3':(dark?'#2B2B2B':'#E5E5E5')}`, borderRadius:8, cursor:'pointer'}}>{a}</button>
              )}
            </div>
          </div>
        </div>

        <div style={{padding:'24px', background:dark?'#2B2B2B':'#F8F9FA', borderRadius:12, textAlign:'center', marginBottom:14}}>
          <HIcon name="key" size={48} color="#2196F3"/>
          <div style={{fontSize:14, fontWeight:600, color:dark?'#fff':'#1A1A1A', marginTop:10}}>Postavi kartico na čitalec</div>
          <div style={{fontSize:12, color:muted, marginTop:4}}>Salto Pro Encoder · pripravljen</div>
        </div>

        <HBtn variant="primary" size="lg" style={{width:'100%', justifyContent:'center'}}>Programiraj ključ</HBtn>
      </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'}}>Zadnje aktivnosti</div>
        {[
          ['305','James Schmidt','Programiran','pred 1 min','#2DD164'],
          ['213','Marija K. (osebje)','Master ključ',  'pred 12 min','#9C27B0'],
          ['418','Tomaž V. (vzdrž.)','Master ključ',  'pred 25 min','#9C27B0'],
          ['108','Marko Hribar','Programiran','pred 1 ur','#2DD164'],
          ['117','Marco Rossi','Programiran','pred 2 ur','#2DD164'],
          ['412','Sara Lah','Deaktiviran (ključ izgubljen)','pred 3 ur','#E53935'],
        ].map(([r,g,a,t,c],i)=>
          <div key={i} style={{padding:'12px 20px', borderTop:i>0?`1px solid ${dark?'#2B2B2B':'#F5F5F5'}`:'none', display:'flex', alignItems:'center', gap:12}}>
            <div style={{width:36, height:36, borderRadius:8, background:c, color:'#fff', display:'flex', alignItems:'center', justifyContent:'center'}}><HIcon name="key" size={14}/></div>
            <div style={{flex:1, minWidth:0}}>
              <div style={{fontSize:13, fontWeight:600, color:dark?'#fff':'#1A1A1A'}}>Soba <span style={{fontFamily:'var(--font-mono)'}}>{r}</span> · {g}</div>
              <div style={{fontSize:11, color:muted, marginTop:1}}>{a} · {t}</div>
            </div>
          </div>
        )}
      </HCard>
    </div>
  </>;
}

Object.assign(window, { RCDashboard, RCCheckin, RCWalkin, RCArrivals, RCKeys });