/* WHC HR One — additions on top of the shared WHC app.css theme.
   Everything reuses the TimeTrack design tokens (:root vars in app.css). */

/* KPI scorecards */
.hro-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:14px}
.hro-kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 16px;display:flex;align-items:center;gap:12px}
.hro-kpi .ic{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff;background:var(--brand);flex-shrink:0}
.hro-kpi .kb{min-width:0;flex:1}
.hro-kpi .v{font-size:20px;font-weight:800;line-height:1.1}
.hro-kpi .l{font-size:11.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
/* leave scorecards — half-height, monochrome icon + number on one row, type below */
.hro-lvs{display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap:10px;margin-bottom:14px}
.hro-lv{background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:9px 12px 8px}
.hro-lv .top{display:flex;align-items:center;gap:9px}
.hro-lv .top i{font-size:15px;color:#33454c;width:18px;text-align:center}
.hro-lv .top .v{font-size:20px;font-weight:800;line-height:1;color:#0F1B1F}
.hro-lv .l{margin-top:3px;font-size:9.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.35px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hro-lv:hover{border-color:#cfe4e6}
.hro-kpi.warn .ic{background:var(--warn)} .hro-kpi.ok .ic{background:var(--success)}
.hro-kpi.purple .ic{background:#8B5CF6} .hro-kpi.blue .ic{background:#2563EB} .hro-kpi.red .ic{background:var(--danger)}

/* data tables */
.hro-tbl{width:100%;border-collapse:collapse;font-size:13px}
.hro-tbl th{background:#F4F8F9;color:var(--muted);text-transform:uppercase;font-size:10.5px;letter-spacing:.5px;text-align:left;padding:9px 10px;border-bottom:1px solid var(--border);position:sticky;top:0;white-space:nowrap}
.hro-tbl td{padding:9px 10px;border-bottom:1px solid var(--border);vertical-align:middle}
.hro-tbl tr:hover td{background:var(--brand-soft)}
.hro-tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.hro-scroll{overflow:auto;max-height:62vh;border:1px solid var(--border);border-radius:var(--radius-sm)}

/* status pills */
.hro-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap}
.hro-pill.pending{background:#F1F5F9;color:#475569}
.hro-pill.approved,.hro-pill.done,.hro-pill.active,.hro-pill.present{background:#F0FDF4;color:#166534}
.hro-pill.rejected,.hro-pill.absent,.hro-pill.inactive{background:#FEF2F2;color:#B91C1C}
.hro-pill.solved,.hro-pill.completed{background:#EFF6FF;color:#1D4ED8}
.hro-pill.cancelled,.hro-pill.withdrawn,.hro-pill.skipped{background:#F8FAFC;color:#94A3B8;text-decoration:line-through}
.hro-pill.leave,.hro-pill.holiday{background:#F5F3FF;color:#6D28D9}
.hro-pill.wfh,.hro-pill.notice{background:#FFF7ED;color:#C2410C}
.hro-pill.off{background:#F1F5F9;color:#94A3B8}

/* forms */
.hro-grid{display:grid;gap:12px}
.hro-grid.c2{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.hro-grid.c3{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.hro-f label{display:block;font-size:11px;color:var(--muted);font-weight:700;margin-bottom:5px;text-transform:uppercase;letter-spacing:.4px}
.hro-f input,.hro-f select,.hro-f textarea{width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:10px;outline:none;background:var(--surface);box-sizing:border-box}
.hro-f input:focus,.hro-f select:focus,.hro-f textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(61,192,200,.16)}

/* modal */
.hro-modal-wrap{position:fixed;inset:0;background:rgba(15,27,31,.45);display:flex;align-items:center;justify-content:center;z-index:200;padding:18px}
.hro-modal{background:var(--surface);border-radius:16px;box-shadow:var(--shadow-lg);width:100%;max-width:640px;max-height:88vh;display:flex;flex-direction:column}
.hro-modal.wide{max-width:900px}
.hro-modal .mh{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--border);font-weight:800;font-size:15px}
.hro-modal .mb{padding:16px 18px;overflow-y:auto}
.hro-modal .mf{padding:13px 18px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end}

/* toasts */
.hro-toasts{position:fixed;bottom:18px;right:18px;z-index:300;display:flex;flex-direction:column;gap:8px}
.hro-toast{background:#0F1B1F;color:#fff;padding:11px 15px;border-radius:11px;font-size:13px;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:9px;animation:hroIn .2s ease}
.hro-toast.err{background:#B91C1C}
@keyframes hroIn{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}

/* WHC app launcher — identical UI to TimeTrack's Organisation Apps panel */
#appsBtn{width:46px;height:46px;border-radius:14px;background:var(--surface);border:1px solid var(--border);display:inline-flex;align-items:center;justify-content:center;font-size:17px;color:#1c2a30;padding:0}
#appsBtn:hover{transform:none;box-shadow:0 0 0 4px rgba(61,192,200,.18);border-color:#cfe9eb}
.hro-apps{position:absolute;top:60px;right:20px;width:288px;max-width:calc(100vw - 32px);background:var(--surface);border-radius:18px;box-shadow:0 14px 40px rgba(15,27,31,.16);z-index:130;padding:16px 16px 18px}
.hro-apps .ah{font-weight:800;font-size:11px;color:#8a979c;text-transform:uppercase;letter-spacing:.9px;margin-bottom:14px}
.hro-apps .ag{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 10px}
.hro-apps .aa{display:flex;flex-direction:column;align-items:center;gap:0;text-decoration:none;color:var(--text)}
.hro-apps a.aa .ai{transition:transform .12s,box-shadow .12s}
.hro-apps a.aa:hover .ai{transform:translateY(-2px);box-shadow:0 8px 18px rgba(15,27,31,.12)}
.hro-apps .ai{width:50px;height:50px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:19px;margin-bottom:8px}
.hro-apps .an{font-size:12.5px;font-weight:700;text-align:center;line-height:1.2;color:#33454c}
.hro-apps .as{font-size:10.5px;color:#9aa7ac;margin-top:4px}

/* notifications panel */
.hro-notifs{position:absolute;top:58px;right:20px;width:340px;max-height:60vh;overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);z-index:120}
.hro-notifs .n{padding:11px 14px;border-bottom:1px solid var(--border);font-size:12.5px;cursor:pointer}
.hro-notifs .n.unread{background:var(--brand-soft)}
.hro-notifs .n .t{font-weight:700}
.hro-notifs .n .b{color:var(--muted);margin-top:2px}
.hro-notifs .n .d{color:var(--muted);font-size:10.5px;margin-top:3px}
.hro-badge-dot{position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;background:var(--danger)}

/* month attendance grid */
.hro-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.hro-cal .dh{font-size:10.5px;font-weight:800;color:var(--muted);text-transform:uppercase;text-align:center;padding:4px 0}
.hro-cal .d{background:var(--surface);border:1px solid var(--border);border-radius:10px;min-height:70px;padding:6px 7px;font-size:11px}
.hro-cal .d .dn{font-weight:800;font-size:12px}
.hro-cal .d.off{background:#F8FAFC;border-color:#E2E8F0}
.hro-cal .d.off .st{color:#94A3B8;font-weight:700}
.hro-cal .d.hol{background:#F5F3FF;border-color:#DDD6FE}
.hro-cal .d.hol .st{color:#7C3AED;font-weight:700}
.hro-cal .d.leave{background:#FFF7ED;border-color:#FED7AA}
.hro-cal .d.leave .st{color:#C2410C;font-weight:700}
.hro-cal .d.present{background:#F3FDF6;border-color:#BBF7D0}
.hro-cal .d.present .st{color:#4ADE80;font-weight:800}      /* light green */
.hro-cal .d.absent{background:#FFF6F6;border-color:#FECACA}
.hro-cal .d.absent .st{color:#F87171;font-weight:800}       /* light red */
.hro-cal .d.today{border-color:var(--brand);box-shadow:0 0 0 2px rgba(61,192,200,.25)}
.hro-cal .d .hrs{color:var(--brand-dark);font-weight:700;margin-top:2px}
.hro-cal .d .st{color:var(--muted)}
.hro-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:11px}
.hro-legend .lg{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-weight:600}
.hro-legend .lg::before{content:"";width:10px;height:10px;border-radius:3px;border:1px solid}
.hro-legend .present::before{background:#F3FDF6;border-color:#4ADE80}
.hro-legend .absent::before{background:#FFF6F6;border-color:#F87171}
.hro-legend .leave::before{background:#FFF7ED;border-color:#FB923C}
.hro-legend .hol::before{background:#F5F3FF;border-color:#A78BFA}
.hro-legend .off::before{background:#F8FAFC;border-color:#CBD5E1}

/* blocking progress overlay */
.hro-busy{position:fixed;inset:0;background:rgba(15,27,31,.55);backdrop-filter:blur(2px);z-index:500;display:flex;align-items:center;justify-content:center}
.hro-busy .bx{background:#fff;border-radius:16px;box-shadow:var(--shadow-lg);padding:26px 30px;width:340px;text-align:center}
.hro-busy .bt{font-weight:800;font-size:14.5px;margin-bottom:4px}
.hro-busy .bs{font-size:12.5px;color:var(--muted);min-height:18px}
.hro-busy .bar{height:8px;border-radius:99px;background:#EDF2F4;overflow:hidden;margin:14px 0 8px}
.hro-busy .bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-dark));width:0;transition:width .25s}
.hro-busy .bp{font-size:11px;color:var(--muted);font-weight:700}

/* day-attendance grid cells: empty = light red, filled = light green */
.att-cell{width:100%;padding:5px 6px;border-radius:8px;border:1px solid #FECACA;background:#FFF6F6;color:#B91C1C;font-size:12px;text-align:center}
.att-cell:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(61,192,200,.16)}
.att-cell.filled{border-color:#BBF7D0;background:#F3FDF6;color:#15803D;font-weight:600}
.att-cell.saved{box-shadow:0 0 0 3px rgba(22,163,74,.18)}
select.att-cell{text-align:left}
.att-cell::placeholder{color:#FCA5A5}

/* tabs */
.hro-tabs{display:flex;gap:6px;border-bottom:1px solid var(--border);margin-bottom:14px;flex-wrap:wrap}
.hro-tab{padding:8px 14px;border-radius:10px 10px 0 0;font-size:13px;font-weight:600;cursor:pointer;color:var(--muted);border:1px solid transparent;border-bottom:none}
.hro-tab.active{color:var(--brand-dark);background:var(--surface);border-color:var(--border);position:relative;top:1px}

/* section head */
.hro-sec{display:flex;align-items:center;gap:10px;margin:4px 0 12px}
.hro-sec h3{margin:0;font-size:15px;font-weight:800}
.hro-sec .spacer{flex:1}

/* checklists */
.hro-check{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:11px;margin-bottom:8px;background:var(--surface)}
.hro-check.done{opacity:.6}
.hro-check .cx{margin-top:2px}
.hro-check .t{font-size:13px;font-weight:600}
.hro-check .m{font-size:11px;color:var(--muted)}
.hro-prog{height:7px;border-radius:99px;background:#EDF2F4;overflow:hidden}
.hro-prog>i{display:block;height:100%;background:var(--brand)}

/* ===== My Milestone — WHC journey ===== */
.hro-mile-scene{position:relative;height:400px;border-radius:16px;overflow:hidden;border:1px solid var(--border)}
.hro-mile-scene.night{color:#e6edf5}
.mile-ground{position:absolute;left:0;right:0;bottom:0;height:88px}
.mile-clouds i{position:absolute;background:#fff;border-radius:99px;opacity:.92;box-shadow:24px 9px 0 -5px #fff,-22px 10px 0 -7px #fff}
.mile-clouds .c1{top:22px;width:88px;height:25px;animation:mCloud 40s linear infinite}
.mile-clouds .c2{top:58px;width:62px;height:19px;animation:mCloud 30s linear infinite;animation-delay:-11s}
.mile-clouds .c3{top:12px;width:110px;height:29px;animation:mCloud 52s linear infinite;animation-delay:-26s}
.night .mile-clouds i{opacity:.12}
@keyframes mCloud{from{left:104%}to{left:-18%}}
.mile-far{position:absolute;left:0;right:0;bottom:88px;height:150px;pointer-events:none}
.mile-far .lay{position:absolute;inset:0;animation:mScroll 30s linear infinite}
@keyframes mScroll{from{transform:translateX(0)}to{transform:translateX(-33.33%)}}
.mile-far .lay i{position:absolute;bottom:0;display:block}
/* plains */
.lay.plains .mnt{width:0;height:0;border-left:80px solid transparent;border-right:80px solid transparent;border-bottom:104px solid #cfe7e4}
.lay.plains .m1{left:6%}.lay.plains .m2{left:38%;transform:scale(.8);opacity:.8}
.lay.plains .tree{width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-bottom:46px solid #7fb08f}
.lay.plains .t1{left:66%}.lay.plains .t2{left:80%;transform:scale(.85)}
/* jungle */
.lay.jungle .tree{width:0;height:0;border-left:22px solid transparent;border-right:22px solid transparent;border-bottom:72px solid #4b8b5a}
.lay.jungle .t1{left:5%}.lay.jungle .t2{left:22%;transform:scale(.82)}.lay.jungle .t3{left:52%;transform:scale(1.08)}.lay.jungle .t4{left:74%;transform:scale(.9)}
.lay.jungle .animal{border-radius:40% 40% 30% 30%;background:#8a9aa5}
.lay.jungle .el{left:36%;width:52px;height:32px;box-shadow:-16px 6px 0 -6px #8a9aa5}
.lay.jungle .gi{left:64%;width:20px;height:56px;background:#d8a94f;border-radius:8px}
/* desert */
.lay.desert .dune{border-radius:50% 50% 0 0;background:#e3c489}
.lay.desert .d1{left:4%;width:220px;height:64px}.lay.desert .d2{left:48%;width:280px;height:80px;opacity:.85}
.lay.desert .cact{width:12px;height:40px;background:#6f9c62;border-radius:6px;box-shadow:12px -8px 0 -4px #6f9c62,-12px -12px 0 -4px #6f9c62}
.lay.desert .c1{left:30%}.lay.desert .c2{left:78%;transform:scale(.8)}
.lay.desert .camel{left:60%;width:44px;height:30px;background:#c99b5e;border-radius:45% 45% 25% 25%;box-shadow:14px -6px 0 -8px #c99b5e}
/* city */
.lay.city .bld{background:#b7c4d1;border-radius:3px 3px 0 0;box-shadow:inset 0 0 0 1px #a9b6c4}
.lay.city .b1{left:6%;width:44px;height:96px}.lay.city .b2{left:20%;width:34px;height:66px}
.lay.city .b3{left:62%;width:52px;height:110px}.lay.city .b4{left:80%;width:38px;height:74px}
.lay.city .burj{left:40%;width:0;height:0;border-left:20px solid transparent;border-right:20px solid transparent;border-bottom:150px solid #9fb0c1}
/* hills */
.lay.hills .hill{border-radius:50% 50% 0 0;background:#9dc48e}
.lay.hills .h1{left:2%;width:260px;height:96px}.lay.hills .h2{left:44%;width:300px;height:120px;opacity:.85}
.lay.hills .palm{width:8px;height:52px;background:#8a6b45;border-radius:4px}
.lay.hills .palm::after{content:"";position:absolute;top:-14px;left:-16px;width:40px;height:18px;background:#5f9c62;border-radius:50% 50% 40% 40%}
.lay.hills .p1{left:70%}.lay.hills .p2{left:86%;transform:scale(.85)}
/* night */
.lay.night .star{width:3px;height:3px;background:#fff;border-radius:50%;box-shadow:0 0 6px #fff;animation:twk 3s ease-in-out infinite}
.lay.night .s1{left:12%;bottom:120px}.lay.night .s2{left:34%;bottom:96px;animation-delay:-1s}
.lay.night .s3{left:58%;bottom:132px;animation-delay:-2s}.lay.night .s4{left:82%;bottom:104px;animation-delay:-1.5s}
.lay.night .moon{left:74%;bottom:112px;width:34px;height:34px;border-radius:50%;background:#f5f0d8;box-shadow:0 0 22px rgba(245,240,216,.55)}
@keyframes twk{0%,100%{opacity:.35}50%{opacity:1}}

/* the line */
.mile-track{position:absolute;left:0;right:0;bottom:64px;height:16px}
.mile-track .rail{position:absolute;left:0;right:0;top:3px;height:3px;background:linear-gradient(#9aa7ad,#7d8a90)}
.mile-track .rail.r2{top:11px}
.mile-track .sleepers{position:absolute;left:0;right:0;top:0;height:16px;background:repeating-linear-gradient(90deg,#a9b3b8 0 7px,transparent 7px 24px);animation:mSleep 1.1s linear infinite}
@keyframes mSleep{from{background-position:0 0}to{background-position:-24px 0}}

/* start station */
.mile-station{position:absolute;bottom:70px;z-index:2}

/* Indian-Railway style year boards — tall so they stay visible above the train */
.mile-board{position:absolute;bottom:70px;transform:translateX(-50%);z-index:5;text-align:center}
.mile-board .bd{background:#F5C400;border:2.5px solid #111;border-radius:3px;padding:5px 12px 6px;font-weight:900;font-size:14px;color:#111;
  letter-spacing:.5px;box-shadow:0 3px 8px rgba(0,0,0,.22);font-family:Inter,Arial,sans-serif;line-height:1.05;white-space:nowrap}
.mile-board .bd .sub{display:block;font-size:7.5px;letter-spacing:1.1px;margin-top:2px;font-weight:800}
.mile-board .post{position:relative;height:86px;display:flex;justify-content:center;gap:9px}
.mile-board .post i{display:block;width:4px;height:100%;background:linear-gradient(#f2f4f5,#c9d1d5);box-shadow:inset -1px 0 0 #aab4b9}
.mile-board.joined .bd{background:#F5C400;border-color:#111;box-shadow:0 0 0 3px rgba(245,196,0,.35),0 3px 8px rgba(0,0,0,.22)}
.mile-board.joined .bd .sub{color:#7a2e00}
.mile-board.now .bd{background:#fff;color:#0b6a70;border-color:#0b6a70}
.mile-board.now .bd .sub{color:#0b6a70}

/* traveller waiting, then hopping into the SMILE coach */
/* the traveller waits on the ground beside the track, then hops UP into the SMILE coach */
.mile-person{position:absolute;bottom:60px;z-index:6;transition:transform .8s cubic-bezier(.3,-0.45,.5,1),opacity .4s}
.mile-person.boarding{transform:translate(-13px,-20px) scale(.9)}
.mile-person.boarded{opacity:0;transform:translate(-19px,-24px) scale(.62)}
.mile-person .wave{transform-box:fill-box;transform-origin:0% 100%;animation:mWave 1.2s ease-in-out infinite}
@keyframes mWave{0%,100%{transform:rotate(0)}50%{transform:rotate(-30deg)}}


/* the train */
.mile-train{position:absolute;bottom:62px;z-index:3;filter:drop-shadow(0 7px 6px rgba(15,27,31,.2))}
.mile-train .wheel{animation:mWheel .62s linear infinite;transform-origin:0 0}
@keyframes mWheel{to{transform:rotate(360deg)}}
.mile-train .bob{animation:mBob 1s ease-in-out infinite}
.mile-train .bob2{animation:mBob 1s ease-in-out infinite;animation-delay:-.5s}
@keyframes mBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.2px)}}
.mile-train .pf{opacity:0;animation:mPuff 2.2s ease-out infinite}
.mile-train .p2{animation-delay:.55s}.mile-train .p3{animation-delay:1.1s}.mile-train .p4{animation-delay:1.65s}
@keyframes mPuff{0%{opacity:.95;transform:translate(0,0) scale(.45)}100%{opacity:0;transform:translate(-40px,-42px) scale(2)}}
.mile-train .wave{transform-box:fill-box;transform-origin:0% 100%;animation:mWave 1.3s ease-in-out infinite}
.mile-train .pxwave{transform-box:fill-box;transform-origin:0% 100%;animation:mWave 1.1s ease-in-out infinite}
.mile-train .pxwave:nth-of-type(2n){animation-duration:1.45s;animation-delay:-.4s}
.mile-train #newPax{transition:opacity .5s}
.hro-mile-foot{margin-top:14px;font-size:13.5px;line-height:1.6;background:var(--brand-soft);border-radius:12px;padding:12px 16px}

/* achievements */
.hro-ach{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:10px}
.hro-ach .ac{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--border);border-radius:12px;padding:11px 13px;background:var(--surface)}
.hro-ach .ac .ic{width:34px;height:34px;border-radius:10px;background:linear-gradient(140deg,#FDE68A,#F59E0B);color:#7c2d12;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hro-ach .ac .bd{flex:1;min-width:0}
.hro-ach .ac .t{font-size:13px;font-weight:700}
.hro-ach .ac .m{font-size:11.5px;color:var(--muted);margin-top:2px}
.hro-ach .ac .dt{font-size:10.5px;color:var(--brand-dark);font-weight:700;margin-top:3px}

@media (max-width:760px){
  .hro-mile-scene{height:320px}
  .mile-board .bd{font-size:11px;padding:3px 8px}
  .mile-board .post{height:60px}
  .mile-dest .d2{font-size:15px}
}

/* editable matrix cells */
.hro-cell-edit{width:56px;padding:5px;border:1px solid var(--border);border-radius:8px;text-align:center;font-variant-numeric:tabular-nums}
.hro-cell-edit:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(61,192,200,.16);outline:none}
.hro-cell-edit.saved{border-color:var(--success);background:#F0FDF4}
select.hro-cell-sel{padding:5px 6px;border:1px solid var(--border);border-radius:8px;background:var(--surface);font-size:12px;max-width:150px}

/* WHC employee ID card (My Profile) */
.hro-idcard{display:flex;background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden;min-height:230px}
.idc-left{width:215px;flex-shrink:0;background:linear-gradient(160deg,#2BA8B0,#3dc0c8 60%,#57cdd4);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:22px 14px;text-align:center;position:relative}
.idc-logo{width:46px;height:46px;margin-bottom:10px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.15))}
.idc-avatar{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.22);border:3px solid #fff;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;margin-bottom:9px}
.idc-name{font-size:16px;font-weight:800;line-height:1.2}
.idc-desig{font-size:11.5px;opacity:.9;margin-top:2px}
.idc-code{background:#fff;color:var(--brand-dark);font-weight:800;font-size:12px;border-radius:99px;padding:3px 13px;margin-top:8px;letter-spacing:.5px}
.idc-co{font-size:8.5px;letter-spacing:2px;opacity:.85;margin-top:10px;font-weight:700}
.idc-right{flex:1;padding:18px 22px;display:flex;flex-direction:column}
.idc-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:6px 26px;flex:1}
.idr{display:flex;flex-direction:column;padding:4.5px 0;border-bottom:1px dashed var(--border);font-size:12.5px}
.idr span{font-size:9.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.idr b{font-weight:600;color:var(--text)}
.idc-note{margin-top:12px;font-size:11.5px;color:var(--muted);background:var(--bg);border-radius:9px;padding:8px 12px}
@media (max-width:760px){.hro-idcard{flex-direction:column}.idc-left{width:100%}}

/* balance hover history tooltip */
.hro-tip{position:fixed;z-index:400;width:320px;background:#fff;border:1px solid var(--border);border-radius:13px;box-shadow:0 14px 40px rgba(15,27,31,.2);padding:12px 14px;font-size:12px;animation:hroIn .18s ease}
.hro-tip .th{font-weight:800;font-size:12.5px;margin-bottom:4px}
.hro-tip .ts{color:var(--muted);border-bottom:1px solid var(--border);padding-bottom:7px;margin-bottom:6px}
.hro-tip .tl{padding:5px 0;border-bottom:1px dashed var(--border);line-height:1.45;max-height:190px}
.hro-tip .tl:last-child{border-bottom:none}
.hro-tip .tl span{color:var(--muted);font-size:10.5px}

/* punch marker on calendar days */
.hro-cal .d.haspunch{cursor:pointer}
.hro-cal .d.haspunch:hover{border-color:var(--brand);box-shadow:0 0 0 2px rgba(61,192,200,.18)}
.hro-cal .d .dur{margin-top:2px;font-size:9.5px;font-weight:700;color:#0e7a80;background:var(--brand-soft);border-radius:6px;padding:1px 5px;display:inline-block}

/* policy preview */
.hro-policy-body{white-space:pre-wrap;font-size:13.5px;line-height:1.7;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:16px 18px;max-height:52vh;overflow:auto}
.hro-policy-body.rich{white-space:normal}

/* letter paper (WHC letterhead) */
.hro-letter{background:#fff;border:1px solid var(--border);border-radius:10px;padding:26px 30px 18px;max-height:56vh;overflow:auto;box-shadow:inset 0 0 0 1px #fff, var(--shadow)}
.hro-letter{position:relative}
.hro-letter .lt-head{margin-bottom:16px}
.hro-letter .lt-head img{height:46px}
/* watermark sits behind the text, centred on the sheet */
.hro-letter .lt-wm{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:0}
.hro-letter .lt-wm img{max-width:none}
.hro-letter .lt-head,.hro-letter .lt-body,.hro-letter .lt-sign,.hro-letter .lt-foot{position:relative;z-index:1}
/* e-signature block */
.hro-letter .lt-sign{margin-top:26px;page-break-inside:avoid}
.hro-letter .lt-sign img{height:52px;display:block;margin-bottom:2px}
.hro-letter .lt-sign .nm{font-size:12.5px;font-weight:700;color:#1a1a1a;border-top:1px solid #bbb;display:inline-block;padding-top:3px;min-width:150px}
.hro-letter .lt-sign .dg{font-size:11px;color:#666}
.hro-letter .lt-body{font-family:Calibri,Inter,Arial,sans-serif;font-size:13px;line-height:1.65;color:#1a1a1a}
.hro-letter .lt-body h1,.hro-letter .lt-body h2,.hro-letter .lt-body h3{color:#1c8a91;font-size:14px;margin:14px 0 5px}
.hro-letter .lt-body p{margin:7px 0;text-align:justify}
.hro-letter .lt-foot{margin-top:22px;border-top:2px solid var(--brand);padding-top:7px;font-size:10px;color:#777;text-align:center}

/* mini rich-text editor */
.hro-rte-bar{display:flex;flex-wrap:wrap;gap:3px;align-items:center;background:var(--bg);border:1px solid var(--border);border-bottom:none;border-radius:10px 10px 0 0;padding:6px 8px}
.rte-b{border:1px solid transparent;background:transparent;border-radius:7px;width:28px;height:26px;font-size:11.5px;color:#33454c;cursor:pointer}
.rte-b:hover{background:var(--brand-soft);border-color:var(--border)}
.rte-s{font-size:11px;padding:3px 5px;border:1px solid var(--border);border-radius:7px;background:#fff}
.rte-c{width:26px;height:26px;border:1px solid var(--border);border-radius:7px;background:#fff;padding:1px;cursor:pointer}
.hro-rte{border:1px solid var(--border);border-radius:0 0 10px 10px;padding:14px 16px;min-height:230px;max-height:46vh;overflow:auto;font-family:Calibri,Inter,Arial,sans-serif;font-size:13px;line-height:1.65;background:#fff;outline:none}
.hro-rte:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(61,192,200,.14)}
.hro-rte h3{color:#1c8a91;font-size:14px;margin:12px 0 4px}
.hro-rte p{margin:6px 0}

/* uniform My Profile cards with their own scrollers */
.hro-pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:14px}
.hro-pgrid > .card{margin:0;display:flex;flex-direction:column;height:250px}
.hro-pgrid > .card h3{flex-shrink:0}
.hro-pgrid .pg-body{flex:1;overflow-y:auto;min-height:0;padding-right:4px}
.hro-pgrid .pg-foot{flex-shrink:0;padding-top:9px}
.hro-pgrid .pg-body::-webkit-scrollbar{width:7px}
.hro-pgrid .pg-body::-webkit-scrollbar-thumb{background:#cfdadd;border-radius:5px}

/* mobile */
@media (max-width:860px){
  .sidebar{position:fixed;left:-260px;transition:left .2s;z-index:150}
  .sidebar.open{left:0}
  .topbar .mobile-burger{display:inline-flex}
  .hro-kpis{grid-template-columns:repeat(2,1fr)}
}

/* multi-select pick lists (policy audience) */
.hro-picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:4px 10px;max-height:190px;overflow:auto;border:1px solid var(--border);border-radius:10px;padding:9px 11px;background:var(--surface)}
.hro-picks .pk{display:flex;align-items:center;gap:7px;font-size:12.5px;padding:2px 0;cursor:pointer}
.hro-picks .pk:hover{color:var(--brand-dark)}

/* letterhead & e-signature cards (Lists & Departments → Letter templates) */
.hro-lhs{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:12px;margin-top:4px}
.hro-lhs .lh{border:1px solid var(--border);border-radius:12px;background:var(--surface);padding:9px;box-shadow:var(--shadow);transition:border-color .15s,box-shadow .15s}
.hro-lhs .lh:hover{border-color:var(--brand)}
.hro-lhs .lh.def{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-soft)}
.hro-lhs .lh .prev{position:relative;overflow:hidden;height:104px;background:#fff;border:1px solid var(--border);border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:10px 8px}
.hro-lhs .lh .prev.sig{justify-content:center}
.hro-lhs .lh .prev .wm{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:none}
.hro-lhs .lh .prev .lg{max-height:34px;max-width:86%;object-fit:contain;position:relative;z-index:1}
.hro-lhs .lh .prev.sig .lg{max-height:52px}
.hro-lhs .lh .prev .ft{position:absolute;left:6px;right:6px;bottom:5px;font-size:8px;color:#8a9499;text-align:center;border-top:1px solid var(--brand);padding-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hro-lhs .lh .nm{font-size:12.5px;font-weight:700;color:#22333a;margin:8px 2px 6px;line-height:1.35}
.hro-lhs .lh .ac{display:flex;gap:4px;flex-wrap:wrap}

/* inline notices */
.hro-note{font-size:12.5px;line-height:1.55;border:1px solid var(--border);border-left:4px solid var(--brand);border-radius:10px;background:var(--surface);padding:9px 12px;color:#33454c}
.hro-note.warn{border-left-color:#e2a03f;background:#fff9ef}
.hro-note.warn i{color:#d38a1c}

/* ---- Leave Request: clickable scorecards ---- */
.hro-kpi-btn{cursor:pointer;transition:transform .12s,box-shadow .12s,border-color .12s}
.hro-kpi-btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(15,27,31,.13);border-color:var(--brand)}
.hro-kpi-btn:active{transform:translateY(0)}
.hro-kpi-btn.on{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-soft)}
.hro-kpi-btn.on .l{color:var(--brand-dark)}

/* compact filter controls in a section bar */
.hro-mini{padding:6px 9px;border:1px solid var(--border);border-radius:9px;background:var(--surface);font-size:12.5px;outline:none;max-width:170px}
.hro-mini:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(61,192,200,.16)}

/* row "more" menu */
.hro-menu{position:fixed;z-index:210;min-width:210px;background:var(--surface);border:1px solid var(--border);
  border-radius:12px;box-shadow:0 14px 34px rgba(15,27,31,.18);padding:6px;font-size:13px}
.hro-menu .mi{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;cursor:pointer;color:#22333a}
.hro-menu .mi:hover{background:var(--brand-soft)}
.hro-menu .mi i{width:16px;text-align:center;color:#5b6b72}
.hro-menu .mi.danger{color:var(--danger)} .hro-menu .mi.danger i{color:var(--danger)}
.hro-menu .mi.danger:hover{background:#FEF2F2}

/* request timeline */
.hro-timeline{position:relative;padding-left:6px}
.hro-timeline:before{content:'';position:absolute;left:78px;top:6px;bottom:6px;width:2px;background:var(--border)}
.hro-timeline .tl-day{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);
  border-radius:999px;padding:4px 14px;font-weight:800;font-size:13px;margin:12px 0 8px;position:relative;z-index:1}
.hro-timeline .tl-day .dot{width:8px;height:8px;border-radius:50%;background:var(--success)}
.hro-timeline .tl-row{display:flex;align-items:center;gap:10px;padding:5px 0;position:relative;z-index:1}
.hro-timeline .tl-row .tm{flex:0 0 66px;text-align:center;font-size:11px;color:#8a9499;background:var(--surface);
  border:1px solid var(--border);border-radius:999px;padding:3px 0}
.hro-timeline .tl-row .av{width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;font-size:11px;
  font-weight:800;display:flex;align-items:center;justify-content:center;flex:0 0 30px}
.hro-timeline .tl-row .tx{font-size:13px;line-height:1.45}
.hro-timeline .tl-row .tx i{font-style:normal;color:#E08A1E;font-weight:700}

/* typed custom columns */
.hro-tbl a.cellink{color:#2563EB;text-decoration:none;font-weight:600}
.hro-tbl a.cellink:hover{text-decoration:underline}

/* ---- milestone: the leaver steps down, waves, then fades ---- */
.mile-leaver{opacity:0;transition:transform .8s cubic-bezier(.3,-0.35,.5,1),opacity .6s}
.mile-leaver.alighting{opacity:1;transform:translate(14px,0) scale(1)}
.mile-leaver.waving .wave{animation:mWave .9s ease-in-out infinite}
.mile-leaver.gone{opacity:0;transform:translate(26px,-4px) scale(.9)}

/* ---- red count badges: tab counters and the sidebar menu badge ---- */
.hro-tab .hro-count{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 6px;
  margin-left:6px;border-radius:999px;background:var(--danger);color:#fff;font-size:10.5px;font-weight:800;line-height:1;
  vertical-align:middle;box-shadow:0 1px 3px rgba(185,28,28,.35)}
.hro-tab.active .hro-count{background:var(--danger)}
.nav .item .nav-count{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;
  padding:0 6px;border-radius:999px;background:var(--danger);color:#fff;font-size:11px;font-weight:800;line-height:1;
  box-shadow:0 1px 4px rgba(185,28,28,.4);animation:navPulse 2.4s ease-in-out infinite}
@keyframes navPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
.nav .item.active .nav-count{background:#fff;color:var(--danger);box-shadow:none}
/* collapsed sidebar: shrink the badge to a dot in the corner of the icon */
.side-collapsed .nav .item .nav-count,.nav.mini .item .nav-count{position:absolute;top:4px;right:6px;min-width:16px;height:16px;
  padding:0 4px;font-size:9.5px;margin-left:0}
.nav .item{position:relative}

/* ---- two-step verification (login page) ---- */
.mfa-head{font-size:17px;font-weight:800;color:#12262c;display:flex;align-items:center;gap:9px;margin-bottom:6px}
.mfa-head i{color:var(--brand)}
.mfa-sub{font-size:13px;color:var(--muted);line-height:1.6;margin-bottom:14px}
.mfa-code{font-size:24px!important;letter-spacing:9px;text-align:center;font-weight:800;font-variant-numeric:tabular-nums}
.mfa-qr{display:flex;justify-content:center;margin:4px 0 10px}
.mfa-qr svg{border:1px solid var(--border);border-radius:12px;padding:8px;background:#fff}
.mfa-manual{font-size:11.5px;color:var(--muted);text-align:center;line-height:1.7;margin-bottom:12px}
.mfa-manual code{display:inline-block;margin-top:3px;font-size:13px;letter-spacing:1.5px;color:#12262c;
  background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:5px 10px;user-select:all}
/* recovery codes, shown once */
.hro-codes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:12px 0}
.hro-codes code{font-size:15px;font-weight:800;letter-spacing:2px;text-align:center;padding:9px 0;
  background:var(--bg);border:1px dashed var(--border);border-radius:9px;color:#12262c;user-select:all}
/* trusted devices list */
.hro-dev{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px}
.hro-dev .ic{width:34px;height:34px;border-radius:10px;background:var(--brand-soft);color:var(--brand-dark);
  display:flex;align-items:center;justify-content:center;flex:0 0 34px}
.hro-dev .bd{flex:1;min-width:0}
.hro-dev .t{font-weight:700}
.hro-dev .m{font-size:11.5px;color:var(--muted)}