.employee-onboarding-page{--ob-navy:#143663;--ob-teal:#138f83;--ob-coral:#e9574f;--ob-amber:#d99b32;--ob-ink:#193458;--ob-muted:#718097;--ob-line:#dce5ee;min-height:100%;padding-bottom:40px;color:var(--ob-ink);background:radial-gradient(circle at 8% 3%,rgba(19,143,131,.1),transparent 23%),linear-gradient(180deg,#f7faf9,#eef4f7)}
.employee-onboarding-shell{width:min(1280px,calc(100% - 34px));margin:auto;padding:24px 0 50px}.onboarding-hero{position:relative;overflow:hidden;min-height:240px;display:grid;grid-template-columns:minmax(0,1fr) 210px;align-items:center;gap:25px;padding:38px 46px;border-radius:30px;background:linear-gradient(122deg,#12345f,#195b78 58%,#138f83);color:#fff;box-shadow:0 24px 60px rgba(18,52,95,.2)}.onboarding-hero:before{content:"";position:absolute;width:360px;height:360px;left:-110px;bottom:-250px;border:1px solid #ffffff1f;border-radius:50%;box-shadow:0 0 0 42px #ffffff0a}.onboarding-hero>*{position:relative;z-index:1}.onboarding-hero-copy>small,.onboarding-manager-hero>div>small{color:#8fe1d3;font-size:11px;font-weight:900;letter-spacing:2px}.onboarding-hero h1{margin:8px 0;font-size:clamp(27px,3vw,43px);line-height:1.55}.onboarding-hero p{max-width:720px;margin:0;color:#d6e6eb;font-size:15px;line-height:2}.onboarding-hero-copy>div{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}.onboarding-hero-copy>div>span{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border:1px solid #ffffff2b;border-radius:10px;background:#ffffff14;font-size:12px;font-weight:800}.onboarding-hero-copy svg{width:17px}
.onboarding-progress-ring{position:relative;width:166px;height:166px;display:grid;place-items:center;margin:auto;border-radius:50%;background:conic-gradient(#f2bd65 var(--progress),#ffffff24 0)}.onboarding-progress-ring:before{content:"";position:absolute;width:128px;height:128px;border-radius:50%;background:#174963}.onboarding-progress-ring>span{position:relative;text-align:center}.onboarding-progress-ring strong,.onboarding-progress-ring small{display:block}.onboarding-progress-ring strong{font-size:34px}.onboarding-progress-ring small{color:#b9d9df}.onboarding-status-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:15px 0;padding:1px;border:1px solid var(--ob-line);border-radius:18px;background:var(--ob-line);overflow:hidden}.onboarding-status-strip>div{padding:15px 18px;background:#fff}.onboarding-status-strip small,.onboarding-status-strip strong{display:block}.onboarding-status-strip small{color:var(--ob-muted);font-size:11px}.onboarding-status-strip strong{margin-top:5px;font-size:14px}.onboarding-status-strip .active{color:var(--ob-teal)}.onboarding-status-strip .waiting{color:var(--ob-amber)}.onboarding-status-strip .complete{color:#23734d}
.onboarding-workspace{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px}.onboarding-timeline,.onboarding-content,.onboarding-manager-list,.onboarding-management-detail{border:1px solid var(--ob-line);border-radius:22px;background:#fff;box-shadow:0 12px 35px rgba(24,55,95,.07)}.onboarding-timeline{align-self:start;padding:14px}.onboarding-timeline>header{padding:8px 8px 14px;border-bottom:1px solid #e8edf2}.onboarding-timeline>header small,.onboarding-timeline>header strong{display:block}.onboarding-timeline>header small{color:var(--ob-coral);font-size:10px;font-weight:900}.onboarding-timeline>header strong{margin-top:4px;font-size:18px}.onboarding-timeline>button{width:100%;display:grid;grid-template-columns:37px minmax(0,1fr) auto;align-items:center;gap:9px;margin-top:7px;padding:10px;border:1px solid transparent;border-radius:14px;background:#f7f9fb;color:var(--ob-ink);text-align:right;cursor:pointer}.onboarding-timeline>button>i{width:37px;height:37px;display:grid;place-items:center;border-radius:11px;background:#e8eef6;color:#315b9b;font-style:normal;font-weight:900}.onboarding-timeline>button small,.onboarding-timeline>button strong{display:block}.onboarding-timeline>button small{color:#8793a5;font-size:9px}.onboarding-timeline>button strong{overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.onboarding-timeline>button>b{padding:4px 6px;border-radius:7px;background:#eef2f6;color:#77849a;font-size:9px}.onboarding-timeline>button.active{border-color:#91b7d4;background:#edf6f7;box-shadow:inset -3px 0 var(--ob-teal)}.onboarding-timeline>button.done>i{background:#dff3eb;color:#237b59}.onboarding-timeline>button.done>b{background:#e5f5ed;color:#247353}.onboarding-timeline>button.locked{opacity:.58}
.onboarding-content{min-width:0;padding:24px}.onboarding-day-detail>header{display:grid;grid-template-columns:minmax(0,1fr) 64px;gap:20px;padding-bottom:20px;border-bottom:1px solid #e6ebf1}.onboarding-day-detail>header>i{width:64px;height:64px;display:grid;place-items:center;border-radius:20px;background:#e7f4f1;color:var(--ob-teal)}.onboarding-day-detail>header svg{width:31px}.onboarding-day-detail>header span{color:var(--ob-coral);font-size:11px;font-weight:900}.onboarding-day-detail h2{margin:4px 0;color:var(--ob-navy);font-size:25px}.onboarding-day-detail>header p{margin:0;color:var(--ob-muted);line-height:1.9}.onboarding-day-detail.locked{min-height:430px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.onboarding-lock-mark{width:80px;height:80px;display:grid;place-items:center;border-radius:24px;background:#eef2f5;color:#7c899c}.onboarding-lock-mark svg{width:38px}.onboarding-day-detail.locked>small{margin-top:18px;color:var(--ob-amber);font-weight:900}.onboarding-day-detail.locked p{max-width:560px;margin:4px auto;color:#64748a;line-height:1.9}.onboarding-day-detail.locked>span{padding:8px 12px;border-radius:10px;background:#f5f7f9;color:#78869a;font-size:12px}
.onboarding-lesson-cards{display:grid;gap:10px;margin-top:20px}.onboarding-lesson-cards>article{display:grid;grid-template-columns:40px 1fr;gap:12px;padding:15px;border:1px solid #e1e8ef;border-radius:15px;background:#fbfcfd}.onboarding-lesson-cards>article>i{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:#eaf2f7;color:#285b88;font-style:normal;font-weight:900}.onboarding-lesson-cards h4{margin:0;font-size:15px}.onboarding-lesson-cards p{margin:3px 0 0;color:#6b7a90;font-size:12px;line-height:1.9}.onboarding-lesson-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}.onboarding-lesson-actions button{display:inline-flex;align-items:center;gap:8px;min-height:39px;padding:0 12px;border:1px solid #bed0e4;border-radius:10px;background:#f1f6fb;color:#244d83;font:inherit;font-size:12px;font-weight:900;cursor:pointer}.onboarding-lesson-actions svg{width:16px}.onboarding-day-detail>footer{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:22px;padding:15px;border-radius:15px;background:#f4f8f7}.onboarding-day-detail>footer label{display:flex;align-items:center;gap:9px;color:#52647d;font-size:12px}.onboarding-day-detail>footer input{width:18px;height:18px;accent-color:var(--ob-teal)}.onboarding-day-detail>footer button{min-height:42px;padding:0 16px;border:0;border-radius:11px;background:var(--ob-teal);color:#fff;font:inherit;font-size:12px;font-weight:900}.onboarding-day-detail>footer button:disabled{opacity:.45}.onboarding-completed-note,.onboarding-wait-note{display:flex;align-items:center;gap:7px;color:#287553;font-weight:900}.onboarding-wait-note{color:#9a6b19}
.onboarding-people-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:20px}.onboarding-people-grid>article{display:grid;grid-template-columns:58px minmax(0,1fr);align-items:center;gap:11px;padding:13px;border:1px solid #e0e7ef;border-radius:16px;background:#fbfcfd}.onboarding-person-photo,.onboarding-manager-photo{overflow:hidden;width:58px;height:58px;display:grid;place-items:center;border-radius:17px;background:#e6edf8;color:#284494;font-weight:900}.onboarding-person-photo img,.onboarding-manager-photo img{width:100%;height:100%;object-fit:cover}.onboarding-people-grid small,.onboarding-people-grid h4,.onboarding-people-grid p{display:block;margin:0}.onboarding-people-grid small{color:var(--ob-coral);font-size:9px;font-weight:900}.onboarding-people-grid h4{margin-top:3px;font-size:14px}.onboarding-people-grid p{overflow:hidden;color:#6d7a8f;font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.onboarding-identity-form{margin-top:20px}.onboarding-form-note{display:flex;align-items:center;gap:12px;padding:13px;border:1px solid #cfe3de;border-radius:14px;background:#eff8f5}.onboarding-form-note>i{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:#fff;color:var(--ob-teal)}.onboarding-form-note svg{width:23px}.onboarding-form-note strong,.onboarding-form-note small{display:block}.onboarding-form-note small{color:#65778a;font-size:11px}.onboarding-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}.onboarding-form-grid label{display:grid;gap:5px;color:#435a77;font-size:11px;font-weight:900}.onboarding-form-grid .span-2{grid-column:1/-1}.onboarding-form-grid input,.onboarding-form-grid textarea{width:100%;box-sizing:border-box;border:1px solid #d2deea;border-radius:11px;background:#fff;color:#18375f;font:inherit;font-size:13px}.onboarding-form-grid input{height:44px;padding:0 11px}.onboarding-form-grid textarea{padding:10px}.onboarding-form-grid :disabled{background:#f2f5f7;color:#66768a}.onboarding-document-upload{margin-top:16px;padding:14px;border:1px solid #dce5ed;border-radius:16px;background:#f9fbfc}.onboarding-document-upload>div:first-child,.onboarding-upload-pickers{display:grid;grid-template-columns:1fr 1fr;gap:9px}.onboarding-file-state{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:9px;padding:10px;border-radius:12px;background:#fff}.onboarding-file-state>i{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:#f1f3f6;color:#7e8998}.onboarding-file-state.ready>i{background:#e4f4ed;color:#247558}.onboarding-file-state small,.onboarding-file-state strong{display:block}.onboarding-file-state small{color:#7b8798;font-size:9px}.onboarding-file-state strong{overflow:hidden;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.onboarding-file-state button{border:1px solid #cbd9e7;border-radius:8px;background:#f4f8fc;color:#28518a;font:inherit;font-size:10px;font-weight:900}.onboarding-upload-pickers{margin-top:10px}.onboarding-upload-pickers label{position:relative;display:flex;align-items:center;gap:10px;padding:11px;border:1px dashed #aebfd1;border-radius:12px;background:#fff;cursor:pointer}.onboarding-upload-pickers svg{width:24px;color:#2b5a91}.onboarding-upload-pickers strong,.onboarding-upload-pickers small{display:block}.onboarding-upload-pickers small{color:#79869a;font-size:9px}.onboarding-upload-pickers input{position:absolute;width:1px;height:1px;opacity:0}.onboarding-identity-form>footer{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.onboarding-manager-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(430px,.85fr);align-items:center;gap:24px;padding:27px 31px;border-radius:25px;background:#143663;color:#fff;box-shadow:0 20px 45px rgba(20,54,99,.16)}.onboarding-manager-hero h1{margin:6px 0;font-size:30px}.onboarding-manager-hero p{margin:0;color:#c8d8e9}.onboarding-start-form{display:grid;grid-template-columns:minmax(0,1fr) 180px 95px;align-items:center;gap:8px;padding:10px;border:1px solid #ffffff24;border-radius:15px;background:#ffffff14}.onboarding-start-form small,.onboarding-start-form strong{display:block}.onboarding-start-form small{color:#94d7ca;font-size:9px}.onboarding-start-form select,.onboarding-start-form button{height:42px;border:0;border-radius:10px;font:inherit}.onboarding-start-form select{min-width:0;padding:0 9px;background:#fff;color:#1b3c66}.onboarding-start-form button{background:#efb755;color:#17345b;font-size:11px;font-weight:950}.onboarding-start-form :disabled{opacity:.5}.onboarding-manager-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0}.onboarding-manager-stats article{display:flex;align-items:center;gap:11px;padding:14px;border:1px solid var(--ob-line);border-radius:16px;background:#fff}.onboarding-manager-stats article>i{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#eaf2f6;color:#24628b}.onboarding-manager-stats article.alert>i{background:#fff1e2;color:#ba711b}.onboarding-manager-stats svg{width:23px}.onboarding-manager-stats small,.onboarding-manager-stats strong{display:block}.onboarding-manager-stats small{color:#77869a;font-size:10px}.onboarding-manager-stats strong{font-size:18px}
.onboarding-manager-list{overflow:hidden}.onboarding-manager-list>header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid #e3e9ef}.onboarding-manager-list h2{margin:3px 0;font-size:21px}.onboarding-manager-list>header small{color:var(--ob-coral);font-weight:900}.onboarding-manager-list>header>span{padding:6px 9px;border-radius:9px;background:#edf3f7;font-size:11px;font-weight:900}.onboarding-manager-list>div>button{width:100%;display:grid;grid-template-columns:54px minmax(180px,1fr) minmax(180px,.8fr) 125px 90px;align-items:center;gap:12px;padding:13px 18px;border:0;border-bottom:1px solid #e8edf2;background:#fff;color:var(--ob-ink);text-align:right}.onboarding-manager-list>div>button:hover,.onboarding-manager-list>div>button.active{background:#f3f8f8}.onboarding-manager-list>div>button.active{box-shadow:inset -4px 0 var(--ob-teal)}.onboarding-manager-list button span>small,.onboarding-manager-list button span>strong,.onboarding-manager-list button span>em{display:block}.onboarding-manager-list button span>small{color:#7a899d;font-size:9px}.onboarding-manager-list button span>strong{font-size:14px}.onboarding-manager-list button span>em{color:#526b89;font-size:10px;font-style:normal}.onboarding-row-progress>span{height:6px;display:block;overflow:hidden;border-radius:9px;background:#e6edf2}.onboarding-row-progress>span>i{height:100%;display:block;background:var(--ob-teal)}.onboarding-row-progress>small{color:#758397;font-size:9px}.onboarding-manager-list button>b{justify-self:start;padding:5px 8px;border-radius:8px;background:#edf2f5;color:#69798f;font-size:9px}.onboarding-manager-list button>b.active{background:#e3f3ed;color:#217451}.onboarding-manager-list button>b.waiting{background:#fff2dd;color:#9a6715}.onboarding-manager-list button>b.complete{background:#e1f1fb;color:#246891}.onboarding-manager-list button>u{color:#66758b;font-size:9px;text-decoration:none}.onboarding-empty{padding:45px;text-align:center}.onboarding-empty>i{width:58px;height:58px;display:grid;place-items:center;margin:auto;border-radius:18px;background:#edf2f7;color:#365c89}.onboarding-empty h3{margin:12px 0 4px}.onboarding-empty p{margin:0;color:#758297}
.onboarding-management-detail{margin-top:14px;padding:20px}.onboarding-management-detail>header{display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid #e5eaf0}.onboarding-management-detail h2{margin:3px 0;font-size:20px}.onboarding-management-detail header p{margin:0;color:#75849a;font-size:11px}.onboarding-management-detail header button{min-height:40px;padding:0 12px;border:1px solid #aebfd5;border-radius:10px;background:#f4f7fb;color:#284b7e;font:inherit;font-size:11px;font-weight:900}.onboarding-management-days{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin-top:16px}.onboarding-management-days article{min-width:0;padding:10px;border:1px solid #e1e7ee;border-radius:12px;background:#f8fafb}.onboarding-management-days article>i{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:#e8edf3;color:#66768a;font-style:normal;font-weight:900}.onboarding-management-days article.done>i{background:#dff2e9;color:#217451}.onboarding-management-days article.active{border-color:#b4d8cf;background:#f0f8f6}.onboarding-management-days small,.onboarding-management-days strong,.onboarding-management-days b{display:block}.onboarding-management-days small{margin-top:8px;color:#8390a1;font-size:8px}.onboarding-management-days strong{overflow:hidden;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.onboarding-management-days b{margin-top:7px;color:#6e7d91;font-size:8px}.onboarding-activity-log{margin-top:18px;padding-top:16px;border-top:1px solid #e5eaf0}.onboarding-activity-log h3{margin:0 0 10px;font-size:15px}.onboarding-activity-log>div{display:grid;grid-template-columns:12px 1fr;gap:8px;padding:7px 0}.onboarding-activity-log>div>i{width:8px;height:8px;margin-top:7px;border-radius:50%;background:var(--ob-teal)}.onboarding-activity-log strong,.onboarding-activity-log small{display:block}.onboarding-activity-log strong{font-size:11px}.onboarding-activity-log small{color:#7d8999;font-size:9px}.onboarding-empty-page{min-height:430px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.onboarding-empty-page>i{width:78px;height:78px;display:grid;place-items:center;border-radius:24px;background:#e7f3f1;color:var(--ob-teal)}.onboarding-empty-page h2{margin:15px 0 5px}.onboarding-empty-page p{margin:0;color:#718097}.profile-identity-lock-note{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding:11px;border:1px solid #badaca;border-radius:12px;background:#eaf7f0;color:#245f49}.profile-identity-lock-note svg{width:22px}.profile-identity-lock-note strong,.profile-identity-lock-note small{display:block}.profile-identity-lock-note small{color:#60786d;font-size:10px}
@media(max-width:1050px){.onboarding-people-grid{grid-template-columns:repeat(2,1fr)}.onboarding-manager-hero{grid-template-columns:1fr}.onboarding-manager-stats{grid-template-columns:1fr 1fr}.onboarding-management-days{grid-template-columns:repeat(4,1fr)}.onboarding-manager-list>div>button{grid-template-columns:54px minmax(160px,1fr) minmax(150px,.8fr) 110px}.onboarding-manager-list button>u{display:none}}
@media(max-width:760px){.employee-onboarding-shell{width:calc(100% - 20px);padding-top:12px}.onboarding-hero{min-height:0;grid-template-columns:1fr;padding:25px 20px;border-radius:22px;text-align:center}.onboarding-hero-copy>div{justify-content:center}.onboarding-progress-ring{width:132px;height:132px}.onboarding-progress-ring:before{width:102px;height:102px}.onboarding-progress-ring strong{font-size:27px}.onboarding-status-strip{grid-template-columns:1fr 1fr}.onboarding-status-strip>div{padding:11px}.onboarding-workspace{grid-template-columns:1fr}.onboarding-timeline{display:flex;overflow-x:auto;gap:7px;padding:10px}.onboarding-timeline>header{display:none}.onboarding-timeline>button{min-width:165px;margin:0}.onboarding-content{padding:16px}.onboarding-day-detail>header{grid-template-columns:1fr 50px}.onboarding-day-detail>header>i{width:50px;height:50px}.onboarding-people-grid,.onboarding-form-grid,.onboarding-document-upload>div:first-child,.onboarding-upload-pickers{grid-template-columns:1fr}.onboarding-form-grid .span-2{grid-column:auto}.onboarding-day-detail>footer{align-items:stretch;flex-direction:column}.onboarding-identity-form>footer{display:grid}.onboarding-manager-hero{padding:21px 16px}.onboarding-start-form{grid-template-columns:1fr}.onboarding-manager-stats{grid-template-columns:1fr 1fr}.onboarding-manager-list>div>button{grid-template-columns:48px minmax(0,1fr) auto;padding:11px}.onboarding-manager-list .onboarding-manager-photo{width:48px;height:48px}.onboarding-row-progress,.onboarding-manager-list button>u{display:none}.onboarding-management-detail{padding:14px}.onboarding-management-detail>header{grid-template-columns:48px 1fr}.onboarding-management-detail header button{grid-column:1/-1}.onboarding-management-days{grid-template-columns:repeat(2,1fr)}}
@media(max-width:430px){.onboarding-manager-stats,.onboarding-status-strip{grid-template-columns:1fr}.onboarding-day-detail>header{grid-template-columns:1fr}.onboarding-day-detail>header>i{grid-row:1}.onboarding-hero h1{font-size:24px}}
.profile-identity-lock-note{grid-column:1/-1;display:flex;align-items:center;gap:12px;margin-bottom:14px;padding:13px 15px;border:1px solid #c9dfd8;border-radius:14px;background:#eef8f5;color:#183d58}.profile-identity-lock-note>svg{flex:0 0 25px;width:25px;color:#168378}.profile-identity-lock-note span,.profile-identity-lock-note strong,.profile-identity-lock-note small{display:block}.profile-identity-lock-note small{margin-top:3px;color:#63798b;font-size:11px;line-height:1.8}