/* ============================================================ UI KIT — icons (lucide paths, inline) + shared components ============================================================ */ const ICONS = { home:'', plus:'', list:'', inbox:'', hospital:'', users:'', chart:'', shield:'', cog:'', bell:'', search:'', logout:'', x:'', check:'', chevR:'', chevD:'', chevL:'', alert:'', info:'', file:'', download:'', upload:'', lock:'', eyeOff:'', clock:'', userCheck:'', arrowR:'', menu:'', send:'', paperclip:'', edit:'', key:'', ban:'', filter:'', more:'', message:'', circleCheck:'', dot:'', mail:'', sun:'', moon:'', refresh:'', activity:'', user:'', building:'', }; function Icon({name, size=18, stroke=2, cls='', style={}}){ return ; } function Btn({variant, size, icon, iconR, children, className='', ...p}){ const cls=['btn', variant&&'btn-'+variant, size&&'btn-'+size, className].filter(Boolean).join(' '); return ; } function StatusBadge({s, sm}){ const m=window.GOV.STATUS[s]; if(!m) return null; return {m.label}; } function PriorityBadge({p}){ const map={urgent:'Urgent',normal:'Normal',low:'Low'}; return {map[p]||p}; } function RoleBadge({role}){ const m=window.GOV.ROLES[role]; if(!m) return null; return {m.label}; } function initials(name=''){ return name.replace(/^(Dr\.|Ms\.|Mr\.|Nurse)\s+/,'').split(' ').map(w=>w[0]).slice(0,2).join('').toUpperCase(); } function Avatar({name, size=32, style={}}){ return {initials(name)}; } /* form atoms */ function Field({label, req, opt, error, hint, children, style}){ return

{label && {label}{req&&*}{opt&&optional}} {children} {error &&

{error}

} {hint && !error &&

{hint}

}

; } const Input = (p)=> ; const Textarea=(p)=>

;
function Select({error, children, ...p}){ return <select className={'sel'+(error?' err':'')} {...p}>{children}</select>; }

/* modal */
function Modal({open, onClose, title, icon, iconColor, lg, children, footer}){
  if(!open) return null;
  return <div className="overlay" onMouseDown={(e)=>{ if(e.target===e.currentTarget) onClose&&onClose(); }}>
    <div className={'modal'+(lg?' modal-lg':'')}>
      {title && <div className="modal__hd">
        {icon && <span style={{color:iconColor||'var(--bhf-blue)',marginTop:1}}><Icon name={icon} size={22}/></span>}
        <h3 style={{flex:1}}>{title}</h3>
        <button className="icon-btn" style={{width:30,height:30}} onClick={onClose}><Icon name="x" size={18}/></button>
      </div>}
      <div className="modal__bd">{children}</div>
      {footer && <div className="modal__ft">{footer}</div>}
    </div>
  </div>;
}

function Banner({variant='info', icon, title, children, style}){
  const ic=icon||{needs:'alert',info:'info',amber:'info',success:'circleCheck',danger:'alert'}[variant]||'info';
  return <div className={'banner banner-'+variant} style={style}>
    <span className="ico"><Icon name={ic} size={18}/></span>
    <div className="f1">{title&&<div className="banner__t">{title}</div>}{children&&<div style={{marginTop:title?3:0}}>{children}</div>}</div>
  </div>;
}

function EmptyState({icon='inbox', title, desc, action}){
  return <div className="empty">
    <div className="empty__ico"><Icon name={icon} size={28}/></div>
    <h3>{title}</h3>{desc&&<p>{desc}</p>}{action}
  </div>;
}

function Skeleton({rows=4}){
  return <div className="card card-pad">
    {Array.from({length:rows}).map((_,i)=>
      <div key={i} className="row aic gap-3" style={{padding:'10px 0'}}>
        <div className="sk" style={{width:38,height:38,borderRadius:8}}/>
        <div className="f1"><div className="sk" style={{height:11,width:'40%',marginBottom:8}}/><div className="sk" style={{height:10,width:'68%'}}/></div>
        <div className="sk" style={{width:84,height:24,borderRadius:999}}/>
      </div>)}
  </div>;
}

/* permission gate wrapper */
function PermDenied({what='view this'}){
  return <div className="content-in"><div className="card card-pad empty">
    <div className="empty__ico" style={{background:'var(--st-rejected-bg)',color:'var(--st-rejected-fg)'}}><Icon name="lock" size={26}/></div>
    <h3>Access denied</h3><p>You don't have permission to {what}. This action is restricted by your role.</p>
  </div></div>;
}

/* toaster */
function Toaster(){
  const {toasts}=window.useStore();
  return <div className="toasts">{toasts.map(t=>
    <div key={t.id} className={'toast'+(t.kind?' toast--'+t.kind:'')}>
      <span style={{color:t.kind==='audit'?'var(--role-founder)':t.kind==='success'?'var(--st-approved-dot)':'var(--bhf-blue)',marginTop:1}}>
        <Icon name={t.icon||(t.kind==='audit'?'shield':t.kind==='success'?'circleCheck':'info')} size={18}/></span>
      <div className="f1"><div className="toast__t">{t.title}</div>{t.desc&&<div className="toast__d">{t.desc}</div>}</div>
    </div>)}</div>;
}

Object.assign(window,{ Icon, Btn, StatusBadge, PriorityBadge, RoleBadge, Avatar, initials,
  Field, Input, Textarea, Select, Modal, Banner, EmptyState, Skeleton, PermDenied, Toaster });