/* L92 — Add employee: top button + window styled like BrokerHub's One-Time Access Code window. Scoped to #empModal / .emp-*. */
:root{--emp-navy:var(--c-starlight,#162D4C);--emp-sand:var(--c-sand,#CEA577);--emp-sand-d:var(--c-sand-dark,#B88A57);--emp-line:#E3E7EC;--emp-ink:#1d2b3f;--emp-mute:#6b7788;--emp-ease:cubic-bezier(.22,1,.36,1)}

/* top button (Team page, admin) */
.emp-top{display:flex;justify-content:flex-end;margin:6px 2px 12px}
.emp-addbtn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 18px 0 14px;border:0;border-radius:999px;cursor:pointer;font:700 var(--fs-md,15px)/1 var(--font-body,inherit);color:var(--emp-navy);background:linear-gradient(135deg,#e2c397,var(--emp-sand) 55%,var(--emp-sand-d));box-shadow:0 8px 18px -10px rgba(184,138,87,.85);transition:transform .2s var(--emp-ease),box-shadow .2s}
.emp-addbtn svg{width:18px;height:18px;stroke-width:2.6}
.emp-addbtn:hover{transform:translateY(-1px);box-shadow:0 12px 22px -10px rgba(184,138,87,.95)}
.emp-addbtn:active{transform:none}
.emp-addbtn:focus-visible{outline:3px solid var(--emp-navy);outline-offset:2px}

/* window */
html.emp-lock{overflow:hidden}
#empModal{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:20px}
#empModal .emp-bg{position:absolute;inset:0;background:rgba(10,20,36,.58);backdrop-filter:blur(8px) saturate(1.1);-webkit-backdrop-filter:blur(8px) saturate(1.1)}
#empModal .emp-card{position:relative;width:min(480px,100%);max-height:calc(100dvh - 40px);display:flex;flex-direction:column;border-radius:20px;background:#fff;color:var(--emp-ink);box-shadow:0 30px 70px -20px rgba(10,20,36,.55),0 0 0 1px rgba(22,45,76,.06);outline:0;opacity:0;transform:translateY(18px) scale(.97);animation:empPop .42s var(--emp-ease) forwards}
#empModal .emp-head{flex:none;display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--emp-line)}
#empModal .emp-ico{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--emp-navy);color:var(--emp-sand);box-shadow:inset 0 0 0 1px rgba(206,165,119,.35)}
#empModal .emp-ico svg{width:19px;height:19px}
#empModal .emp-head h2{margin:0;flex:1;min-width:0;font-size:1.15rem;font-weight:700;color:var(--emp-navy);letter-spacing:.1px}
#empModal .emp-x{flex:none;display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;cursor:pointer;color:var(--emp-mute);background:#f3f5f8;transition:background .2s,color .2s,transform .3s var(--emp-ease)}
#empModal .emp-x svg{width:16px;height:16px}
#empModal .emp-x:hover{background:var(--emp-navy);color:#fff;transform:rotate(90deg)}
#empModal .emp-body{flex:1 1 auto;min-height:0;overflow:auto;padding:18px 20px 20px;-webkit-overflow-scrolling:touch}

/* fields (the shared .ui-fld markup from m-form.js, restyled) */
#empModal .ui-fld{margin:0 0 14px}
#empModal .ui-label{display:block;margin:0 0 6px;font:700 .8rem/1.2 var(--font-body,inherit);letter-spacing:.1px;color:var(--emp-navy);text-transform:none}
#empModal .emp-opt{display:inline-block;margin-inline-start:6px;padding:2px 7px;border-radius:999px;background:rgba(138,149,168,.16);color:#8a95a8;font-size:10.5px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;vertical-align:1px}
#empModal .ui-field{display:block;width:100%;box-sizing:border-box;height:46px;min-height:46px;padding:0 14px;border:1.5px solid var(--emp-line);border-radius:12px;background:#fafbfc;color:var(--emp-ink);font:400 .95rem var(--font-body,inherit);transition:border-color .2s,box-shadow .2s,background .2s}
#empModal select.ui-field{cursor:pointer}
#empModal .ui-field:hover{border-color:#cfd6df}
#empModal .ui-field:focus{outline:0;background:#fff;border-color:var(--emp-sand);box-shadow:0 0 0 4px rgba(206,165,119,.22)}
#empModal .ui-field::placeholder{color:#a3adba}
#empModal .ui-field.is-error{border-color:#c0392b;background:#fff7f6}
#empModal .ui-field.is-error:focus{box-shadow:0 0 0 4px rgba(192,57,43,.16)}
#empModal #t_ph,#empModal #t_e,#empModal #t_photo,#empModal #t_p{direction:ltr;text-align:start}
#empModal .ui-help.is-error{display:block;margin-top:5px;font-size:12px;font-weight:600;color:#b3372b;text-transform:none;letter-spacing:0}
#empModal .ui-help.is-error[hidden]{display:none}

/* photo status (thumbnail + message) */
#empModal .emp-st{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:12px;line-height:1.35;color:var(--emp-mute)}
#empModal .emp-st:empty{display:none}
#empModal .emp-st img{flex:none;width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid var(--emp-sand);background:#e8edf4}
#empModal .emp-st.is-ok{color:#1d7a4b}
#empModal .emp-st.is-bad{color:#b3372b}
#empModal .emp-st.is-warn{color:#9a6a12}

/* supervised agents */
#empModal .emp-sup{margin:0 0 14px;padding:12px 14px;border:1.5px solid var(--emp-line);border-radius:12px;background:#fafbfc}
#empModal .emp-sup.hide{display:none}
#empModal .emp-sup .chks{display:flex;flex-wrap:wrap;gap:6px 14px;max-height:150px;overflow:auto}
#empModal .emp-sup .chks label{display:inline-flex;align-items:center;gap:6px;font-size:.88rem;color:var(--emp-ink);cursor:pointer}

/* primary action */
#empModal .emp-go{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:9px;width:100%;height:50px;margin-top:4px;padding:0 18px;border:0;border-radius:13px;cursor:pointer;font:800 .95rem var(--font-body,inherit);letter-spacing:.4px;text-transform:uppercase;color:var(--emp-navy);background:linear-gradient(135deg,#e2c397,var(--emp-sand) 55%,var(--emp-sand-d));box-shadow:0 10px 22px -10px rgba(184,138,87,.8);transition:transform .25s var(--emp-ease),box-shadow .25s}
#empModal .emp-go svg{width:19px;height:19px}
#empModal .emp-go:hover{transform:translateY(-2px);box-shadow:0 14px 26px -10px rgba(184,138,87,.9)}
#empModal .emp-go:active{transform:none}
#empModal .emp-go:focus-visible{outline:3px solid var(--emp-navy);outline-offset:2px}
#empModal .emp-go:disabled{pointer-events:none;opacity:.7}

/* team list: avatar next to the name */
.emp-who{display:flex;align-items:center;gap:10px}
.emp-av{position:relative;flex:none;display:grid;place-items:center;width:38px;height:38px;overflow:hidden;border-radius:50%;background:var(--emp-navy);color:var(--emp-sand);font:700 13px/1 var(--font-body,inherit);border:2px solid var(--emp-sand)}
.emp-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#e8edf4}

@keyframes empPop{to{opacity:1;transform:none}}
@media(max-width:520px){
  #empModal{align-items:flex-end;padding:0}
  #empModal .emp-card{width:100%;max-height:92dvh;border-radius:20px 20px 0 0}
}
@media(prefers-reduced-motion:reduce){#empModal .emp-card{animation:none;opacity:1;transform:none}#empModal .emp-x,#empModal .emp-go,.emp-addbtn{transition:none}}
