/* Public registration and live identity verification — isolated login-only UI. */
.employee-reg-box{width:min(1040px,96vw)!important}
.employee-reg-section{grid-column:1/-1;border:1px solid #ccdeeb;border-radius:16px;background:#f8fbfe;padding:16px;margin-top:4px}
.employee-reg-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}
.employee-reg-section-head h4{margin:0;color:#0b4c77;font-size:17px}.employee-reg-section-head p{margin:4px 0 0;color:#5d7284;font-size:12px;line-height:1.5}
.employee-live-grid{display:grid;grid-template-columns:minmax(300px,1.2fr) minmax(260px,.8fr);gap:16px;align-items:stretch}
.employee-live-camera{position:relative;min-height:310px;border-radius:16px;overflow:hidden;background:#0b2030;border:1px solid #244b64;display:grid;place-items:center}
.employee-live-camera video{width:100%;height:100%;min-height:310px;object-fit:cover;transform:scaleX(-1);display:block}
.employee-live-camera.is-idle video{display:none}.employee-live-camera-placeholder{padding:28px;text-align:center;color:#d8e8f3;line-height:1.5}.employee-live-camera-placeholder strong{display:block;color:#fff;font-size:17px;margin:8px 0 5px}.employee-live-camera-placeholder span{font-size:12px}
.employee-live-camera-icon{display:inline-grid;place-items:center;width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.12);font-size:28px}
.employee-live-camera-overlay{position:absolute;inset:0;pointer-events:none;display:grid;place-items:center}.employee-live-face-guide{width:min(46%,220px);aspect-ratio:3/4;border:2px dashed rgba(255,255,255,.82);border-radius:48% 48% 44% 44%;box-shadow:0 0 0 999px rgba(3,20,32,.16)}
.employee-live-status-panel{display:flex;flex-direction:column;gap:11px;border:1px solid #d5e3ed;border-radius:16px;background:#fff;padding:15px}
.employee-live-step{display:flex;align-items:center;gap:10px}.employee-live-step-number{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#e9f5fc;color:#0b6b9e;font-weight:900}.employee-live-step-copy strong{display:block;color:#123f60;font-size:13px}.employee-live-step-copy span{display:block;color:#687f91;font-size:11px;margin-top:2px}
.employee-live-prompt{min-height:68px;padding:12px;border-radius:12px;background:#eff8ff;border:1px solid #b9dcf1;color:#0b4d77;font-size:13px;line-height:1.45;font-weight:800}
.employee-live-progress{height:7px;border-radius:999px;background:#e8eef3;overflow:hidden}.employee-live-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#0b7db6,#12a57f);transition:width .25s ease}
.employee-live-actions{display:flex;gap:8px;flex-wrap:wrap}.employee-live-actions button{flex:1;min-width:110px}
.employee-live-message{min-height:18px;color:#5c7284;font-size:11px;line-height:1.45}.employee-live-message.is-error{color:#b42318;font-weight:800}.employee-live-message.is-success{color:#067647;font-weight:800}
.employee-live-previews{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.employee-live-preview{border:1px solid #d7e4ed;border-radius:10px;background:#f5f9fc;overflow:hidden;min-height:90px;position:relative}.employee-live-preview img{width:100%;height:100%;min-height:90px;object-fit:cover;display:block}.employee-live-preview span{position:absolute;left:5px;bottom:5px;padding:3px 6px;border-radius:999px;background:rgba(5,46,73,.85);color:#fff;font-size:9px;font-weight:900}
.employee-live-privacy{display:flex;gap:9px;align-items:flex-start;padding:12px;border:1px solid #d9e5ed;border-radius:12px;background:#fff;color:#40596c;font-size:11px;line-height:1.5}.employee-live-privacy input{width:auto!important;margin-top:2px}.employee-live-privacy strong{color:#123f60}
.employee-reg-form-note{grid-column:1/-1;padding:10px 12px;border-radius:11px;background:#fff8e8;border:1px solid #f4d58b;color:#73520b;font-size:11px;line-height:1.5}
.employee-otp-modal{position:fixed;inset:0;z-index:10020;background:rgba(15,23,42,.64);display:none;align-items:center;justify-content:center;padding:20px}.employee-otp-modal.is-open{display:flex}.employee-otp-box{width:min(460px,95vw);background:#fff;border-radius:20px;padding:24px;box-shadow:0 25px 80px rgba(0,0,0,.35);color:#182b3b}.employee-otp-box h3{margin:0;color:#0c4f7a;font-size:24px}.employee-otp-box p{color:#5d7182;line-height:1.55;font-size:13px}.employee-otp-code{width:100%!important;text-align:center!important;letter-spacing:.32em!important;font-size:26px!important;font-weight:900!important;padding:14px!important}.employee-otp-actions{display:grid;gap:9px;margin-top:14px}.employee-otp-meta{padding:10px 12px;border-radius:11px;background:#eef8ff;border:1px solid #c7e3f4;font-size:12px;color:#315a73}.employee-otp-close{float:right;border:0;background:#edf4f8;border-radius:50%;width:36px;height:36px;color:#0b4f7a;font-size:22px;cursor:pointer}
@media(max-width:760px){.employee-live-grid{grid-template-columns:1fr}.employee-live-camera,.employee-live-camera video{min-height:270px}.employee-live-previews{grid-template-columns:1fr 1fr}.employee-reg-section{padding:12px}}

/* Post-submit verification flow: form → email OTP → live selfie → admin review. */
.employee-registration-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 16px;padding:10px;border:1px solid #d7e5ee;border-radius:14px;background:#f5f9fc}
.employee-registration-steps>div{position:relative;display:grid;grid-template-columns:30px 1fr;column-gap:8px;align-items:center;padding:9px;border-radius:10px;color:#667d8f}
.employee-registration-steps>div>span{grid-row:1/3;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#e5edf3;color:#527087;font-weight:900;font-size:12px}
.employee-registration-steps strong{display:block;font-size:11px;color:#31566e}.employee-registration-steps small{display:block;font-size:9px;line-height:1.35}
.employee-registration-steps .is-current{background:#eaf7ff;border:1px solid #b8dff3}.employee-registration-steps .is-current>span{background:#0b78ae;color:#fff}.employee-registration-steps .is-current strong{color:#07527c}
.employee-registration-submit{margin-top:14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.employee-registration-submit span{font-size:10px;color:#667d8f;line-height:1.4}
.employee-verification-stage{display:inline-flex;padding:5px 9px;border-radius:999px;background:#e8f6ff;color:#08618f;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;margin-bottom:7px}
.employee-identity-resume{width:100%;margin-top:10px;border:1px solid #9ed6ef;background:linear-gradient(135deg,#eefaff,#eaf8f4);border-radius:13px;padding:10px 12px;display:flex;align-items:center;gap:10px;text-align:left;color:#124b6b;cursor:pointer}.employee-identity-resume>span:first-child{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#0b78ae;color:#fff}.employee-identity-resume strong,.employee-identity-resume small{display:block}.employee-identity-resume strong{font-size:12px}.employee-identity-resume small{font-size:10px;color:#5b7485;margin-top:2px}
.employee-identity-modal{position:fixed;inset:0;z-index:10030;background:rgba(8,24,38,.72);display:none;align-items:flex-start;justify-content:center;padding:22px;overflow:auto}.employee-identity-modal.is-open{display:flex}.employee-identity-box{width:min(1040px,97vw);margin:auto;background:#fff;border-radius:22px;box-shadow:0 28px 90px rgba(0,0,0,.38);padding:20px;color:#18384d}
.employee-identity-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding-bottom:13px;border-bottom:1px solid #dde8ef}.employee-identity-head h3{margin:0;color:#0b4f78;font-size:22px}.employee-identity-head p{margin:5px 0 0;color:#60788a;font-size:12px;line-height:1.5}.employee-identity-close{border:0;background:#edf4f8;color:#0b4f78;width:38px;height:38px;border-radius:50%;font-size:22px;cursor:pointer;flex:0 0 auto}
.employee-identity-summary{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;margin:14px 0;padding:12px;border:1px solid #d4e5ef;border-radius:14px;background:#f6fbfe}.employee-identity-profile{width:64px;height:64px;border-radius:13px;overflow:hidden;background:#deedf6;display:grid;place-items:center;font-size:27px}.employee-identity-profile img{width:100%;height:100%;object-fit:cover}.employee-identity-summary strong,.employee-identity-summary span,.employee-identity-summary small{display:block}.employee-identity-summary>div:nth-child(2)>strong{font-size:15px;color:#123f5c}.employee-identity-summary>div:nth-child(2)>span{font-size:11px;color:#42647a;margin-top:3px}.employee-identity-summary>div:nth-child(2)>small{font-size:10px;color:#708696;margin-top:3px}.employee-identity-expiry{text-align:right;padding:8px 11px;border-radius:11px;background:#fff7e5;color:#78560a;font-size:10px}.employee-identity-expiry strong{font-size:12px;margin-top:2px}
.employee-identity-capture{margin-top:0}.employee-identity-consent{margin-top:12px}.employee-identity-submit{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:13px}.employee-identity-submit span{font-size:10px;color:#647b8d;line-height:1.45;max-width:520px}
body.employee-identity-open,body.employee-registration-open{overflow:hidden}
@media(max-width:760px){.employee-registration-steps{grid-template-columns:1fr 1fr}.employee-identity-modal{padding:8px}.employee-identity-box{padding:13px;border-radius:16px}.employee-identity-head h3{font-size:19px}.employee-identity-summary{grid-template-columns:54px 1fr}.employee-identity-profile{width:54px;height:54px}.employee-identity-expiry{grid-column:1/-1;text-align:left}.employee-registration-submit,.employee-identity-submit{align-items:stretch;flex-direction:column}.employee-registration-submit button,.employee-identity-submit button{width:100%}}

/* OTP delivery state and clear post-submit verification flow */
.employee-otp-delivery{display:grid;gap:4px;margin:14px 0 4px;padding:12px 14px;border-radius:12px;border:1px solid #b9dfc7;background:#effbf3;color:#174d2b;font-size:12px;line-height:1.45}.employee-otp-delivery strong{font-size:13px}.employee-otp-delivery span,.employee-otp-delivery small{display:block}.employee-otp-delivery.is-failed{border-color:#f0b8b8;background:#fff3f3;color:#7f1d1d}.employee-otp-help{display:block;color:#607487;line-height:1.4;margin-top:-2px}.employee-otp-actions button[disabled]{opacity:.62;cursor:not-allowed}.employee-otp-box .flash{margin:10px 0}.employee-otp-code:focus{outline:3px solid rgba(15,118,168,.16);border-color:#0f76a8!important;box-shadow:0 0 0 1px #0f76a8}

/* 2026-07-30 OTP flow reliability repair: the OTP field lives inside the
   registration window and is always present in the DOM. */
.employee-reg-box{max-height:min(92vh,920px);overflow:auto}
.employee-reg-box [hidden]{display:none!important}
.employee-otp-inline{display:grid;gap:12px;padding:20px;border:1px solid #c9deea;border-radius:18px;background:linear-gradient(180deg,#f8fcff,#fff);box-shadow:0 12px 34px rgba(11,79,122,.08)}
.employee-otp-inline h3{margin:0;color:#0c4f7a;font-size:23px}
.employee-otp-inline>p{margin:0;color:#536b7d;line-height:1.55;font-size:13px}
.employee-otp-inline .employee-otp-actions{width:min(100%,520px);margin-left:auto;margin-right:auto}
.employee-otp-resend-row{padding-top:4px;border-top:1px solid #e3edf3}
.employee-otp-resend-row small{color:#607487;line-height:1.45;text-align:center}
.employee-registration-ajax-message{padding:11px 13px;border-radius:11px;background:#eef6fb;border:1px solid #bfd9e8;color:#244b63;font-size:13px;line-height:1.45;margin-bottom:12px;white-space:pre-wrap}
.employee-registration-ajax-message.is-error{background:#fff2f2;border-color:#efb6b6;color:#842029}
.employee-registration-ajax-message.is-warning{background:#fff8e6;border-color:#efd18c;color:#6f4d00}
.employee-registration-ajax-message.is-success{background:#eefaf2;border-color:#b9dfc7;color:#155b2b}
.employee-registration-steps .is-complete{border-color:#a7d8b7;background:#effaf3;color:#22623a}
.employee-registration-steps .is-complete>span{background:#27844b;color:#fff}
.employee-registration-submit button[disabled]{opacity:.7;cursor:wait}
@media(max-width:680px){.employee-otp-inline{padding:15px}.employee-otp-inline h3{font-size:20px}.employee-otp-code{font-size:22px!important;letter-spacing:.24em!important}}


/* Employee ID is optional in the OTP + live-selfie registration policy. */
.employee-reg-optional{display:inline-flex;align-items:center;margin-left:5px;padding:2px 7px;border-radius:999px;background:#eef4f8;color:#52697a;border:1px solid #d5e1e9;font-size:9px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;vertical-align:middle}

/* 2026-07-30 smart automatic liveness capture */
.employee-live-camera{isolation:isolate}
.employee-live-camera video{filter:contrast(1.02) saturate(.98)}
.employee-live-face-guide{transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;background:transparent}
.employee-live-face-guide.is-waiting{border-color:rgba(255,255,255,.76)}
.employee-live-face-guide.is-good{border-style:solid;border-color:#49d78d;box-shadow:0 0 0 999px rgba(3,20,32,.2),0 0 0 5px rgba(73,215,141,.18),0 0 28px rgba(73,215,141,.55)}
.employee-live-face-guide.is-warning{border-style:solid;border-color:#ffc857;box-shadow:0 0 0 999px rgba(3,20,32,.24),0 0 0 5px rgba(255,200,87,.16)}
.employee-live-face-guide.is-capturing{border-style:solid;border-color:#7dd3fc;box-shadow:0 0 0 999px rgba(3,20,32,.18),0 0 0 7px rgba(125,211,252,.22),0 0 32px rgba(125,211,252,.7);animation:ppdoLivePulse .75s ease-in-out infinite alternate}
.employee-live-face-guide.is-complete{border-style:solid;border-color:#57df91;box-shadow:0 0 0 999px rgba(3,20,32,.16),0 0 0 7px rgba(87,223,145,.22)}
@keyframes ppdoLivePulse{from{transform:scale(1)}to{transform:scale(1.025)}}
.employee-live-countdown{position:absolute;z-index:4;display:grid;place-items:center;width:82px;height:82px;border-radius:50%;background:rgba(3,28,45,.84);border:3px solid rgba(255,255,255,.92);color:#fff;font-size:39px;font-weight:1000;line-height:1;box-shadow:0 12px 34px rgba(0,0,0,.35);backdrop-filter:blur(5px)}
.employee-live-countdown[hidden]{display:none!important}
.employee-live-auto-status{display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid #cddde7;border-radius:12px;background:#f5f9fc;color:#35566b;font-size:11px;line-height:1.4}
.employee-live-auto-status strong{font-size:11px;color:inherit}.employee-live-auto-dot{width:10px;height:10px;flex:0 0 auto;border-radius:50%;background:#8ca0ae;box-shadow:0 0 0 4px rgba(140,160,174,.15)}
.employee-live-auto-status.is-loading{border-color:#b7d9eb;background:#eef9ff;color:#195e85}.employee-live-auto-status.is-loading .employee-live-auto-dot{background:#1687bc;animation:ppdoAutoDot .8s ease-in-out infinite alternate}
.employee-live-auto-status.is-scanning{border-color:#c9dfe9;background:#f4fbfe;color:#315a72}.employee-live-auto-status.is-scanning .employee-live-auto-dot{background:#4f9ec5}
.employee-live-auto-status.is-good{border-color:#aad9bc;background:#effaf3;color:#19613a}.employee-live-auto-status.is-good .employee-live-auto-dot,.employee-live-auto-status.is-complete .employee-live-auto-dot{background:#29a45b}
.employee-live-auto-status.is-capturing{border-color:#98d8f3;background:#ecf9ff;color:#0f638c}.employee-live-auto-status.is-capturing .employee-live-auto-dot{background:#0c8bc5;animation:ppdoAutoDot .45s ease-in-out infinite alternate}
.employee-live-auto-status.is-warning{border-color:#efd18a;background:#fff8e6;color:#795500}.employee-live-auto-status.is-warning .employee-live-auto-dot{background:#e3a313}
.employee-live-auto-status.is-complete{border-color:#9fd9b5;background:#edf9f1;color:#155f36}
@keyframes ppdoAutoDot{from{opacity:.45;transform:scale(.82)}to{opacity:1;transform:scale(1.18)}}
.employee-live-quality-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.employee-live-quality-list>div{display:flex;align-items:center;gap:6px;min-width:0;padding:7px 8px;border:1px solid #dce7ee;border-radius:9px;background:#fff;color:#667e8f;font-size:9px;font-weight:800;line-height:1.25}
.employee-live-quality-list b{display:grid;place-items:center;width:15px;height:15px;border-radius:50%;background:#e8eef2;color:transparent;font-size:9px;flex:0 0 auto}.employee-live-quality-list span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.employee-live-quality-list>div.is-ok{border-color:#b8ddc5;background:#f2fbf5;color:#256443}.employee-live-quality-list>div.is-ok b{background:#2f9d59;color:#fff}
.employee-live-quality-list>div.is-bad{border-color:#efc3b9;background:#fff5f2;color:#8a3524}.employee-live-quality-list>div.is-bad b{background:#d65a42;color:#fff}.employee-live-quality-list>div.is-bad b::first-letter{color:transparent}
.employee-live-capture-manual{display:none!important}.employee-live-capture-manual.is-visible{display:inline-flex!important}
#employeeIdentitySubmit[disabled]{opacity:.62;cursor:not-allowed;filter:saturate(.55)}#employeeIdentitySubmit.is-ready{box-shadow:0 0 0 4px rgba(31,157,84,.12)}
@media(max-width:760px){.employee-live-quality-list{grid-template-columns:repeat(2,minmax(0,1fr))}.employee-live-countdown{width:70px;height:70px;font-size:34px}}


/* 2026-07-30: prominent live distance guidance and final submission receipt */
.employee-live-screen-guide{
  position:absolute;z-index:7;left:14px;right:14px;top:14px;
  display:flex;flex-direction:column;gap:3px;align-items:center;text-align:center;
  padding:9px 13px;border-radius:13px;border:1px solid rgba(255,255,255,.5);
  background:rgba(5,31,48,.76);color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.25);
  backdrop-filter:blur(7px);pointer-events:none;transition:.2s ease;
}
.employee-live-screen-guide strong{font-size:14px;line-height:1.2;font-weight:900}
.employee-live-screen-guide span{font-size:10px;line-height:1.35;color:rgba(255,255,255,.9)}
.employee-live-screen-guide.is-warning{background:rgba(114,67,0,.88);border-color:rgba(255,207,107,.9)}
.employee-live-screen-guide.is-good,.employee-live-screen-guide.is-complete{background:rgba(3,103,59,.88);border-color:rgba(96,232,158,.9)}
.employee-live-screen-guide.is-capturing{background:rgba(0,89,136,.9);border-color:rgba(125,211,252,.95)}
.employee-live-screen-guide.is-action{background:rgba(35,69,119,.88);border-color:rgba(154,192,255,.9)}
.employee-live-distance-guide{
  position:absolute;z-index:7;left:14px;right:14px;bottom:14px;
  display:grid;grid-template-columns:auto minmax(90px,1fr) auto;align-items:center;gap:8px;
  padding:8px 10px;border-radius:12px;background:rgba(5,31,48,.8);
  border:1px solid rgba(255,255,255,.38);color:#fff;backdrop-filter:blur(7px);
  pointer-events:none;box-shadow:0 8px 22px rgba(0,0,0,.24);
}
.employee-live-distance-label{font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}
.employee-live-distance-track{position:relative;height:8px;border-radius:999px;background:linear-gradient(90deg,#f59e0b 0 20%,#43d17e 33% 68%,#f59e0b 82% 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.employee-live-distance-track i{display:block;height:100%;width:0;border-radius:999px;background:rgba(255,255,255,.18)}
.employee-live-distance-track b{position:absolute;top:50%;left:0;width:13px;height:13px;border-radius:50%;transform:translate(-50%,-50%);background:#fff;border:2px solid #0b6c98;box-shadow:0 2px 7px rgba(0,0,0,.4);transition:left .15s linear}
.employee-live-distance-guide em{font-size:9px;font-weight:900;font-style:normal;white-space:nowrap}
.employee-live-distance-guide.is-far em,.employee-live-distance-guide.is-close em{color:#ffd37c}
.employee-live-distance-guide.is-near-good em{color:#d9f4ff}
.employee-live-distance-guide.is-good em,.employee-live-distance-guide.is-complete em{color:#80f0ae}

.employee-submission-receipt{
  display:grid;grid-template-columns:48px 1fr;gap:13px;align-items:start;
  margin:0 0 18px;padding:16px;border:1px solid #9fd9b5;border-radius:17px;
  background:linear-gradient(145deg,#effbf3,#f8fffb);box-shadow:0 12px 28px rgba(17,111,63,.1);
}
.employee-submission-receipt-icon{
  display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  background:#138a50;color:#fff;font-size:25px;font-weight:1000;box-shadow:0 7px 18px rgba(19,138,80,.25)
}
.employee-submission-receipt-label{display:block;color:#0b7442;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.employee-submission-receipt h3{margin:3px 0 5px;color:#0c4f32;font-size:18px;line-height:1.2}
.employee-submission-receipt p{margin:0 0 11px;color:#426554;font-size:11px;line-height:1.5}
.employee-submission-receipt dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:0 0 9px}
.employee-submission-receipt dl div{padding:8px;border:1px solid #cce9d7;border-radius:10px;background:#fff}
.employee-submission-receipt dt{font-size:8px;color:#6c8175;text-transform:uppercase;font-weight:900;letter-spacing:.06em}
.employee-submission-receipt dd{margin:3px 0 0;color:#183e2b;font-size:10px;font-weight:900;word-break:break-word}
.employee-submission-pending{display:inline-flex;padding:3px 7px;border-radius:999px;background:#fff1c7;color:#775200}
.employee-submission-receipt small{display:block;color:#60766b;font-size:9px;line-height:1.45}

@media(max-width:760px){
  .employee-live-screen-guide{left:9px;right:9px;top:9px;padding:8px 10px}
  .employee-live-screen-guide strong{font-size:13px}
  .employee-live-distance-guide{left:9px;right:9px;bottom:9px;grid-template-columns:1fr;gap:5px;text-align:center}
  .employee-live-distance-label{display:none}
  .employee-live-distance-guide em{font-size:10px}
  .employee-submission-receipt{grid-template-columns:40px 1fr;padding:13px}
  .employee-submission-receipt-icon{width:40px;height:40px;font-size:21px}
  .employee-submission-receipt dl{grid-template-columns:1fr}
}