// Sidebar, Topbar, common chrome (Superadmin flavor)
const Icon = ({name, size=18, color='currentColor'}) => {
  const paths = {
    dashboard: <><rect x="3" y="3" width="7" height="9" rx="1.5"/><rect x="14" y="3" width="7" height="5" rx="1.5"/><rect x="14" y="12" width="7" height="9" rx="1.5"/><rect x="3" y="16" width="7" height="5" rx="1.5"/></>,
    building:  <><path d="M4 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16"/><path d="M16 9h2a2 2 0 0 1 2 2v10"/><path d="M2 21h20"/><path d="M8 7h2M8 11h2M8 15h2"/></>,
    users:     <><circle cx="9" cy="8" r="3.5"/><path d="M2.5 20c.5-3.5 3.3-6 6.5-6s6 2.5 6.5 6"/><circle cx="17" cy="8" r="2.5"/><path d="M16 14c2.8.3 5 2.5 5.5 6"/></>,
    credit:    <><rect x="2.5" y="5" width="19" height="14" rx="2.5"/><path d="M2.5 10h19"/><path d="M6 15h4"/></>,
    headset:   <><path d="M4 13v-1a8 8 0 0 1 16 0v1"/><rect x="3" y="13" width="4" height="6" rx="1.5"/><rect x="17" y="13" width="4" height="6" rx="1.5"/><path d="M20 19v1a3 3 0 0 1-3 3h-3"/></>,
    activity:  <><path d="M3 12h4l3-8 4 16 3-8h4"/></>,
    shield:    <><path d="M12 3l8 3v6c0 5-4 8-8 9-4-1-8-4-8-9V6z"/><path d="M9 12l2 2 4-4"/></>,
    settings:  <><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></>,
    bell:      <><path d="M18 16v-5a6 6 0 0 0-12 0v5l-2 2h16z"/><path d="M10 20a2 2 0 0 0 4 0"/></>,
    search:    <><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></>,
    chevdown:  <><path d="M6 9l6 6 6-6"/></>,
    chevright: <><path d="M9 6l6 6-6 6"/></>,
    plus:      <><path d="M12 5v14M5 12h14"/></>,
    check:     <><path d="M5 12l5 5 9-11"/></>,
    alert:     <><path d="M10.3 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><path d="M12 9v4M12 17h.01"/></>,
    zap:       <><path d="M13 2 3 14h8l-1 8 10-12h-8l1-8z"/></>,
    book:      <><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20V3H6.5A2.5 2.5 0 0 0 4 5.5z"/><path d="M4 19.5V22h14"/></>,
    logout:    <><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><path d="M16 17l5-5-5-5"/><path d="M21 12H9"/></>,
    sun:       <><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M2 12h2M20 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"/></>,
    moon:      <><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></>,
    ext:       <><path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></>,
    download:  <><path d="M12 3v13"/><path d="M7 12l5 5 5-5"/><path d="M4 21h16"/></>,
    filter:    <><path d="M3 4h18l-7 9v6l-4 2v-8z"/></>,
    dot:       <circle cx="12" cy="12" r="3"/>,
    spark:     <><path d="M12 2v6M12 16v6M2 12h6M16 12h6M4.9 4.9l4.2 4.2M14.9 14.9l4.2 4.2M4.9 19.1l4.2-4.2M14.9 9.1l4.2-4.2"/></>,
    arrow_up:  <><path d="M12 19V5"/><path d="M5 12l7-7 7 7"/></>,
    arrow_dn:  <><path d="M12 5v14"/><path d="M5 12l7 7 7-7"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" style={{flexShrink:0}}>
      {paths[name] || null}
    </svg>
  );
};

const NAV_ITEMS = [
  { k:'dashboard',    lbl:'Nadzorna plošča',     icon:'dashboard' },
  { k:'organizations',lbl:'Organizacije',        icon:'building', badge:12 },
  { k:'users',        lbl:'Uporabniki',          icon:'users' },
  { k:'billing',      lbl:'Naročnine in plačila',icon:'credit' },
  { k:'support',      lbl:'Podpora',             icon:'headset', badge:5 },
  { k:'system',       lbl:'Sistem in integracije', icon:'activity' },
  { k:'audit',        lbl:'Dnevnik dogodkov',    icon:'shield' },
  { k:'settings',     lbl:'Platforma',           icon:'settings' },
];

function Sidebar({ active, onNav, collapsed, dark }) {
  const w = collapsed ? 72 : 252;
  const bg = dark ? '#1A1A1A' : '#FFFFFF';
  const border = dark ? '#2B2B2B' : '#E5E5E5';
  const fg = dark ? '#C8C8C8' : '#333';
  const fgMuted = dark ? '#707070' : '#9A9A9A';
  return (
    <aside style={{
      width:w, background:bg, borderRight:`1px solid ${border}`,
      display:'flex', flexDirection:'column',
      transition:'width 220ms cubic-bezier(.2,0,0,1)',
      position:'sticky', top:0, height:'100vh', zIndex:10, flexShrink:0,
    }}>
      <div style={{padding: collapsed ? '22px 0 18px' : '22px 20px 18px',
        display:'flex', alignItems:'center', justifyContent: collapsed?'center':'flex-start', gap:10,
        borderBottom:`1px solid ${dark?'#2B2B2B':'#F0F0F0'}`}}>
        {collapsed
          ? <img src="assets/logo-mark.svg" style={{height:28, filter: dark?'brightness(1.1)':'none'}}/>
          : <img src={dark?'assets/logo-clickinpms-inverse.svg':'assets/logo-clickinpms.svg'} style={{height:28}}/>}
      </div>

      {!collapsed && (
        <div style={{padding:'14px 20px 8px', fontSize:11, fontWeight:700, letterSpacing:'.12em',
          textTransform:'uppercase', color:fgMuted}}>Platforma</div>
      )}

      <nav style={{padding:'4px 10px', flex:1, overflowY:'auto'}}>
        {NAV_ITEMS.map(it=>{
          const isActive = active===it.k;
          return (
            <button key={it.k} onClick={()=>onNav(it.k)} title={collapsed?it.lbl:undefined} style={{
              display:'flex', alignItems:'center', gap:12, width:'100%',
              padding: collapsed ? '12px 0' : '11px 12px',
              justifyContent: collapsed?'center':'flex-start',
              marginBottom:2, borderRadius:10, border:'none',
              background: isActive ? (dark?'rgba(33,150,243,0.15)':'#E3F2FD') : 'transparent',
              color: isActive ? '#2196F3' : fg,
              fontWeight: isActive ? 600 : 500, fontSize:14,
              fontFamily:'inherit', cursor:'pointer', textAlign:'left',
              position:'relative', transition:'background 120ms',
            }}
              onMouseEnter={e=>{ if(!isActive) e.currentTarget.style.background = dark?'#2B2B2B':'#F5F5F5'; }}
              onMouseLeave={e=>{ if(!isActive) e.currentTarget.style.background = 'transparent'; }}>
              <Icon name={it.icon} size={18} color={isActive ? '#2196F3' : fgMuted}/>
              {!collapsed && <>
                <span style={{flex:1}}>{it.lbl}</span>
                {it.badge && <span style={{
                  background:'#FF9800', color:'#fff', fontSize:10, fontWeight:700,
                  padding:'2px 7px', borderRadius:999, minWidth:20, textAlign:'center',
                }}>{it.badge}</span>}
              </>}
              {collapsed && it.badge && <span style={{
                position:'absolute', top:8, right:14, width:8, height:8, borderRadius:'50%', background:'#FF9800',
              }}/>}
            </button>
          );
        })}
      </nav>

      <div style={{marginTop:'auto', padding: collapsed?'12px 0':'12px 16px',
        borderTop:`1px solid ${dark?'#2B2B2B':'#F0F0F0'}`,
        display:'flex', alignItems:'center', gap:10,
        justifyContent: collapsed?'center':'flex-start'}}>
        <div style={{
          width:36, height:36, borderRadius:'50%',
          background:'linear-gradient(135deg,#00BCD4,#2196F3)',
          color:'#fff', display:'flex', alignItems:'center', justifyContent:'center',
          fontWeight:700, fontSize:13, flexShrink:0,
        }}>AŠ</div>
        {!collapsed && (
          <div style={{minWidth:0}}>
            <div style={{fontWeight:600, fontSize:13, color:fg, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>Andrej Šuštar</div>
            <div style={{color:fgMuted, fontSize:11}}>Superadmin</div>
          </div>
        )}
      </div>
    </aside>
  );
}

function Topbar({ onToggleSidebar, onSearch, dark, onToggleDark, role, onRoleChange }) {
  const [searchOpen, setSearchOpen] = React.useState(false);
  const [notifOpen, setNotifOpen] = React.useState(false);
  const [userOpen, setUserOpen] = React.useState(false);
  const bg = dark ? '#1A1A1A' : '#fff';
  const border = dark ? '#2B2B2B' : '#E5E5E5';
  const fg = dark ? '#E5E5E5' : '#333';
  const fgMuted = dark ? '#9A9A9A' : '#707070';

  return (
    <header style={{
      height:60, borderBottom:`1px solid ${border}`, background:bg,
      display:'flex', alignItems:'center', padding:'0 24px', gap:16,
      position:'sticky', top:0, zIndex:9,
    }}>
      <button onClick={onToggleSidebar} style={{
        background:'transparent', border:'none', padding:8, borderRadius:8, cursor:'pointer', color:fgMuted,
        display:'flex', alignItems:'center',
      }} title="Preklopi stranski meni">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
      </button>

      <div style={{position:'relative', flex:1, maxWidth:480}}>
        <div style={{position:'absolute', left:12, top:'50%', transform:'translateY(-50%)', color:fgMuted}}>
          <Icon name="search" size={16}/>
        </div>
        <input placeholder="Iskanje organizacij, uporabnikov, rezervacij, dogodkov…"
          onFocus={()=>setSearchOpen(true)} onBlur={()=>setTimeout(()=>setSearchOpen(false),150)}
          style={{
            width:'100%', padding:'9px 12px 9px 36px',
            background: dark?'#2B2B2B':'#F5F5F5',
            border:`1px solid ${dark?'#333':'transparent'}`, borderRadius:10, fontSize:13,
            fontFamily:'inherit', color:fg, outline:'none',
          }}/>
        {searchOpen && (
          <div style={{
            position:'absolute', top:'calc(100% + 6px)', left:0, right:0,
            background:bg, border:`1px solid ${border}`, borderRadius:12,
            boxShadow:'0 16px 40px rgba(15,23,42,.14)', padding:8, zIndex:50,
          }}>
            <div style={{padding:'8px 12px', fontSize:11, fontWeight:700, letterSpacing:'.12em', textTransform:'uppercase', color:fgMuted}}>Predlogi</div>
            {['Adria Hotels Group','Marko Kranjc','T-2847 — Booking.com sync','INV-4082'].map(s=>(
              <div key={s} style={{padding:'9px 12px', borderRadius:8, fontSize:13, color:fg, cursor:'pointer'}}
                onMouseEnter={e=>e.currentTarget.style.background=dark?'#2B2B2B':'#F5F5F5'}
                onMouseLeave={e=>e.currentTarget.style.background='transparent'}>{s}</div>
            ))}
          </div>
        )}
      </div>

      <div style={{marginLeft:'auto', display:'flex', gap:6, alignItems:'center'}}>
        <button style={{
          display:'flex', alignItems:'center', gap:8,
          padding:'6px 12px', border:`1px solid ${border}`, borderRadius:999,
          background:'transparent', color:fgMuted, fontSize:12, fontWeight:600,
          fontFamily:'inherit', cursor:'pointer',
        }}>
          <span style={{width:6, height:6, borderRadius:'50%', background:'#2DD164'}}/>
          Vsi sistemi delujejo
        </button>

        <button onClick={onToggleDark} style={{
          background:'transparent', border:'none', padding:8, borderRadius:8, cursor:'pointer', color:fg,
        }} title={dark?'Svetli način':'Temni način'}>
          <Icon name={dark?'sun':'moon'} size={18}/>
        </button>

        <div style={{position:'relative'}}>
          <button onClick={()=>setNotifOpen(o=>!o)} style={{
            background:'transparent', border:'none', padding:8, borderRadius:8, cursor:'pointer', color:fg, position:'relative',
          }}>
            <Icon name="bell" size={18}/>
            <span style={{position:'absolute', top:6, right:6, width:8, height:8, borderRadius:'50%', background:'#FF9800', border:`2px solid ${bg}`}}/>
          </button>
          {notifOpen && (
            <div style={{
              position:'absolute', top:'calc(100% + 6px)', right:0, width:360,
              background:bg, border:`1px solid ${border}`, borderRadius:12,
              boxShadow:'0 16px 40px rgba(15,23,42,.14)', zIndex:50, overflow:'hidden',
            }}>
              <div style={{padding:'14px 16px', borderBottom:`1px solid ${border}`,
                display:'flex', justifyContent:'space-between', alignItems:'center'}}>
                <div style={{fontWeight:600, color:fg}}>Obvestila</div>
                <div style={{fontSize:12, color:'#2196F3', cursor:'pointer', fontWeight:500}}>Označi vse kot prebrano</div>
              </div>
              {[
                ['alert','#FF9800','Piran Seaside Inn · neplačana naročnina (INV-4082)', 'pred 2 ur'],
                ['zap','#E53935','Google Hotel Ads integracija ni dosegljiva', 'pred 30 min'],
                ['check','#2DD164','Nova registracija: Kras Boutique (14-dnevni poskus)', 'včeraj'],
                ['headset','#2196F3','T-2846 eskaliran na urgent — Grand Union', 'pred 1 ur'],
              ].map(([ic,c,txt,time],i)=>(
                <div key={i} style={{padding:'12px 16px', borderBottom:i<3?`1px solid ${border}`:'none',
                  display:'flex', gap:12, cursor:'pointer'}}
                  onMouseEnter={e=>e.currentTarget.style.background=dark?'#2B2B2B':'#FAFAFA'}
                  onMouseLeave={e=>e.currentTarget.style.background='transparent'}>
                  <div style={{width:32, height:32, borderRadius:'50%', background:`${c}22`, color:c,
                    display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}>
                    <Icon name={ic} size={16}/>
                  </div>
                  <div style={{flex:1, minWidth:0}}>
                    <div style={{fontSize:13, color:fg, lineHeight:1.4}}>{txt}</div>
                    <div style={{fontSize:11, color:fgMuted, marginTop:4}}>{time}</div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>

        <div style={{width:1, height:24, background:border, margin:'0 4px'}}/>

        <div style={{position:'relative'}}>
          <button onClick={()=>setUserOpen(o=>!o)} style={{
            display:'flex', alignItems:'center', gap:10, padding:'4px 10px 4px 4px',
            background:'transparent', border:'none', borderRadius:999, cursor:'pointer',
          }}>
            <div style={{
              width:32, height:32, borderRadius:'50%',
              background:'linear-gradient(135deg,#00BCD4,#2196F3)',
              color:'#fff', display:'flex', alignItems:'center', justifyContent:'center',
              fontWeight:700, fontSize:12,
            }}>AŠ</div>
            <div style={{textAlign:'left', minWidth:0}}>
              <div style={{fontSize:13, fontWeight:600, color:fg, lineHeight:1.2}}>Andrej Šuštar</div>
              <div style={{fontSize:11, color:fgMuted, lineHeight:1.2}}>Superadmin · {role}</div>
            </div>
            <Icon name="chevdown" size={14} color={fgMuted}/>
          </button>
          {userOpen && (
            <div style={{
              position:'absolute', top:'calc(100% + 6px)', right:0, width:240,
              background:bg, border:`1px solid ${border}`, borderRadius:12,
              boxShadow:'0 16px 40px rgba(15,23,42,.14)', zIndex:50, overflow:'hidden',
            }}>
              <div style={{padding:'14px 16px', borderBottom:`1px solid ${border}`}}>
                <div style={{fontSize:11, fontWeight:700, letterSpacing:'.12em', textTransform:'uppercase', color:fgMuted, marginBottom:8}}>Zamenjaj vlogo</div>
                {['Superadmin','Hotel Admin','Recepcija','Vzdrževanje','Gost (brez dostopa)'].map(r=>(
                  <div key={r} onClick={()=>{onRoleChange(r); setUserOpen(false);}} style={{
                    padding:'8px 10px', borderRadius:6, fontSize:13, cursor:'pointer',
                    background: role===r ? (dark?'rgba(33,150,243,.15)':'#E3F2FD') : 'transparent',
                    color: role===r ? '#2196F3' : fg,
                    fontWeight: role===r ? 600 : 400,
                    display:'flex', alignItems:'center', justifyContent:'space-between',
                  }}>{r} {role===r && <Icon name="check" size={14}/>}</div>
                ))}
              </div>
              <div style={{padding:6}}>
                {['Moj račun','Pomoč in dokumentacija','Bližnjice tipkovnice'].map(x=>(
                  <div key={x} style={{padding:'9px 12px', borderRadius:6, fontSize:13, color:fg, cursor:'pointer'}}
                    onMouseEnter={e=>e.currentTarget.style.background=dark?'#2B2B2B':'#F5F5F5'}
                    onMouseLeave={e=>e.currentTarget.style.background='transparent'}>{x}</div>
                ))}
                <div style={{height:1, background:border, margin:'6px 8px'}}/>
                <div style={{padding:'9px 12px', borderRadius:6, fontSize:13, color:'#E53935', cursor:'pointer', display:'flex', alignItems:'center', gap:8}}
                  onMouseEnter={e=>e.currentTarget.style.background=dark?'#2B2B2B':'#FDECEA'}
                  onMouseLeave={e=>e.currentTarget.style.background='transparent'}>
                  <Icon name="logout" size={14}/> Odjava
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </header>
  );
}

function PageHeader({ title, subtitle, actions, breadcrumbs, dark }) {
  const fgMuted = dark ? '#9A9A9A' : '#707070';
  return (
    <div style={{display:'flex', alignItems:'flex-end', justifyContent:'space-between', gap:24, marginBottom:24}}>
      <div style={{minWidth:0}}>
        {breadcrumbs && (
          <div style={{display:'flex', alignItems:'center', gap:6, fontSize:12, color:fgMuted, marginBottom:8}}>
            {breadcrumbs.map((b,i)=>(
              <React.Fragment key={i}>
                <span style={{cursor:'pointer'}}>{b}</span>
                {i<breadcrumbs.length-1 && <Icon name="chevright" size={12}/>}
              </React.Fragment>
            ))}
          </div>
        )}
        <h1 style={{fontFamily:'var(--font-display)', fontSize:30, fontWeight:700, letterSpacing:'-0.015em', margin:0, color: dark?'#fff':'#1A1A1A'}}>{title}</h1>
        {subtitle && <div style={{color:fgMuted, fontSize:14, marginTop:6, maxWidth:720}}>{subtitle}</div>}
      </div>
      {actions && <div style={{display:'flex', gap:10, flexShrink:0}}>{actions}</div>}
    </div>
  );
}

function Btn({ children, variant='primary', size='md', onClick, icon, dark, style={} }) {
  const base = {
    fontFamily:'inherit', fontWeight:600, border:'none', cursor:'pointer',
    display:'inline-flex', alignItems:'center', gap:8,
    transition:'all 120ms', borderRadius:10, whiteSpace:'nowrap',
  };
  const sizes = {
    sm:{padding:'6px 12px', fontSize:13},
    md:{padding:'9px 16px', fontSize:14},
    lg:{padding:'12px 22px', fontSize:15},
  };
  const variants = {
    primary:{background:'#2196F3', color:'#fff'},
    cyan:{background:'#00BCD4', color:'#fff'},
    ghost:{background: dark?'#2B2B2B':'#fff', color: dark?'#E5E5E5':'#333', border:`1px solid ${dark?'#333':'#E5E5E5'}`},
    danger:{background:'#fff', color:'#E53935', border:'1px solid #E53935'},
    subtle:{background: dark?'rgba(33,150,243,.15)':'#E3F2FD', color:'#2196F3'},
  };
  return (
    <button onClick={onClick} style={{...base, ...sizes[size], ...variants[variant], ...style}}>
      {icon && <Icon name={icon} size={14}/>}
      {children}
    </button>
  );
}

function Card({ children, dark, padding=20, style={} }) {
  return (
    <div style={{
      background: dark?'#1A1A1A':'#fff',
      border:`1px solid ${dark?'#2B2B2B':'#E5E5E5'}`,
      borderRadius:16, padding,
      boxShadow: dark?'none':'0 1px 2px rgba(15,23,42,0.04)',
      ...style,
    }}>{children}</div>
  );
}

function Badge({ children, tone='neutral' }) {
  const tones = {
    cyan:    {bg:'#E0F7FA', fg:'#006064', dot:'#00BCD4'},
    blue:    {bg:'#E3F2FD', fg:'#0D47A1', dot:'#2196F3'},
    orange:  {bg:'#FFF3E0', fg:'#E65100', dot:'#FF9800'},
    success: {bg:'#E6F9EC', fg:'#117A34', dot:'#2DD164'},
    danger:  {bg:'#FDECEA', fg:'#B71C1C', dot:'#E53935'},
    neutral: {bg:'#F5F5F5', fg:'#4D4D4D', dot:'#9A9A9A'},
    purple:  {bg:'#F3E5F5', fg:'#4A148C', dot:'#9C27B0'},
  };
  const t = tones[tone] || tones.neutral;
  return (
    <span style={{
      display:'inline-flex', alignItems:'center', gap:6,
      padding:'3px 9px', borderRadius:999, fontSize:11, fontWeight:600,
      background:t.bg, color:t.fg, whiteSpace:'nowrap',
    }}>
      <span style={{width:6, height:6, borderRadius:'50%', background:t.dot}}/>
      {children}
    </span>
  );
}

Object.assign(window, { Icon, Sidebar, Topbar, PageHeader, Btn, Card, Badge, NAV_ITEMS });