/*!************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/components/hr-employees-approved/hr-employees-approved.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************/
.emp-page{min-height:100vh;background:linear-gradient(135deg,#f8fbff 0%,#fff 42%,#f5f9ff 100%);color:#0d1838;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;padding:0 24px 18px;box-sizing:border-box;overflow-x:hidden}.emp-page *{box-sizing:border-box}
.emp-topbar{height:64px;display:flex;align-items:center;justify-content:flex-end;gap:28px}.emp-global-search{width:475px;height:40px;border:1px solid #d1dceb;border-radius:9px;background:#fff;display:flex;align-items:center;gap:10px;padding:0 11px;color:#5c7499;box-shadow:0 4px 14px rgba(38,72,118,.08)}.emp-global-search input{border:0;outline:0;flex:1;font-size:12px;background:transparent;color:#344d76}.emp-global-search input::placeholder{color:#7b8dad}.emp-global-search kbd{font:600 10px/1 ui-sans-serif;background:#f2f5f9;border:1px solid #d8e1ed;border-radius:5px;padding:5px 7px;color:#5f7292}.emp-top-actions{display:flex;align-items:center;gap:11px;font-size:11px;color:#26395e}.emp-top-actions>span:first-child{display:flex;align-items:center;gap:7px}.emp-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#096cf2;color:#fff;font-weight:800}.emp-admin{display:flex;flex-direction:column;line-height:1.05}.emp-admin b{font-size:11px}.emp-admin small{font-size:9px;color:#7081a0;margin-top:4px}.notify{position:relative;display:grid;place-items:center}.notify i{position:absolute;right:-5px;top:-5px;width:13px;height:13px;border-radius:50%;display:grid;place-items:center;background:#ff294f;color:#fff;font-size:8px;font-style:normal}
.emp-head{display:flex;align-items:flex-end;justify-content:space-between;padding:0 0 17px}.emp-crumb{font-size:13px;color:#066bf7;margin:0 0 12px}.emp-crumb span{color:#9db0cd;padding:0 7px}.emp-head h1{margin:0;font-size:31px;line-height:1;font-weight:800;letter-spacing:-.5px}.emp-head p{margin:10px 0 0;font-size:13px;color:#6c82a6}.emp-head-actions{display:flex;align-items:center;gap:11px}.btn{height:41px;border:1px solid #d8e3f0;background:#fff;border-radius:8px;padding:0 14px;display:flex;align-items:center;gap:8px;color:#20365d;font-size:11px;font-weight:700;box-shadow:0 2px 7px rgba(40,73,116,.04);text-decoration:none}.btn.primary{background:#086cf3;color:#fff;border-color:#086cf3;padding-left:18px}.btn .split{height:100%;margin-left:6px;padding-left:12px;border-left:1px solid rgba(255,255,255,.35);display:flex;align-items:center}.btn.square{width:41px;padding:0;justify-content:center;font-size:18px}
.emp-metrics{display:grid;grid-template-columns:1.05fr 1.05fr 1.05fr 1.05fr 1.4fr;gap:14px;margin-bottom:14px}.emp-metrics article{height:109px;border:1px solid #dbe5f2;background:#fff;border-radius:12px;display:flex;align-items:center;gap:14px;padding:14px 16px;box-shadow:0 3px 12px rgba(32,68,115,.035)}.ic{width:61px;height:61px;border-radius:11px;display:grid;place-items:center;flex:0 0 61px}.ic.blue{background:#edf4ff;color:#086cf3}.ic.green{background:#eaf9f1;color:#08a759}.ic.amber{background:#fff4e7;color:#f19a00}.ic.red{background:#fff0f3;color:#ff214d}.ic.purple{background:#f3ebff;color:#7524ef}.mc{flex:1;min-width:0}.mc>span{display:block;font-size:11px;font-weight:800;margin-bottom:4px}.mv{display:flex;align-items:center;gap:10px;min-height:35px}.mv>b{font-size:29px;line-height:1;font-weight:800}.mv em{font-style:normal;font-size:11px;font-weight:800;color:#0aa659;background:#e9f8ef;padding:5px 8px;border-radius:13px}.mc small{display:block;font-size:10px;color:#7185a7;margin-top:3px;white-space:nowrap}.emp-ring{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;margin-left:auto;background:conic-gradient(#e9eef5 0 100%);position:relative}.emp-ring:before{content:"";position:absolute;inset:7px;border-radius:50%;background:#fff}.emp-ring.green{background:conic-gradient(#27aaa1 0 100%)}.emp-ring b{position:relative;font-size:11px}.arrow-circle{width:48px;height:48px;border-radius:50%;background:#edf4ff;color:#086cf3;display:grid;place-items:center;margin-left:auto}
.emp-layout{display:grid;grid-template-columns:minmax(0,1fr) 352px;gap:14px}.emp-directory{border:1px solid #dbe5f2;background:#fff;border-radius:12px;overflow:hidden;min-width:0;box-shadow:0 3px 12px rgba(32,68,115,.035)}.dir-head{height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 15px;border-bottom:1px solid #e5ecf5}.dir-title{display:flex;align-items:center;gap:12px}.dir-icon{width:31px;height:31px;display:grid;place-items:center;color:#086cf3}.dir-title h2{margin:0;font-size:18px}.dir-title small{font-size:9.5px;color:#7488a8}.dir-actions{display:flex;gap:9px}.dir-actions button{height:36px;border:1px solid #d7e2ef;background:#fff;border-radius:8px;padding:0 13px;display:flex;align-items:center;gap:8px;font-size:10px;font-weight:700;color:#294167}.dir-actions .more{width:38px;padding:0;justify-content:center}
.filters{height:59px;display:grid;grid-template-columns:minmax(300px,1.6fr) .65fr .62fr .85fr 92px;gap:9px;align-items:center;padding:0 15px;border-bottom:1px solid #e5ecf5}.table-search{height:38px;border:1px solid #d7e2ef;border-radius:8px;display:flex;align-items:center;gap:9px;padding:0 12px;color:#7890b0}.table-search input{border:0;outline:0;min-width:0;flex:1;font-size:10.5px}.filters select,.filter-btn{height:38px;border:1px solid #d7e2ef;border-radius:8px;background:#fff;color:#31486d;font-size:10px;padding:0 11px}.filter-btn{display:flex;align-items:center;justify-content:center;gap:7px;color:#086cf3;font-weight:700}
.emp-table{font-size:9.8px}.tr{display:grid;grid-template-columns:28px 1.55fr .72fr .92fr 1.45fr 1fr .72fr .85fr 50px;align-items:center;gap:7px;padding:0 14px;min-height:48px;border-bottom:1px solid #e8eef6;color:#24385f}.tr.th{min-height:34px;background:#fbfcfe;font-size:9px;font-weight:800;color:#22355b}.tr input[type="checkbox"]{width:13px;height:13px}.person-cell{display:flex;align-items:center;gap:10px;min-width:0}.person-cell>i{width:33px;height:33px;border-radius:8px;background:linear-gradient(135deg,#4c91ff,#2f68e8);color:#fff;font-style:normal;display:grid;place-items:center;font-weight:800;flex:0 0 33px}.person-cell>span{display:flex;flex-direction:column;min-width:0}.person-cell b{font-size:10px;white-space:nowrap}.person-cell small{font-size:8.5px;color:#7287a8;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.active{display:inline-flex;align-items:center;gap:4px;border-radius:12px;background:#e8f8ef;color:#079f55;padding:5px 8px;font-style:normal;font-size:9px;font-weight:700}.row-more{width:31px;height:30px;border:1px solid #d9e3ef;background:#fff;border-radius:8px;color:#62799a}.dir-foot{height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 15px;font-size:10px;color:#344b70}.dir-foot select{height:32px;border:1px solid #d8e2ef;border-radius:7px;margin:0 6px;padding:0 8px}.dir-foot>div:last-child{display:flex;align-items:center;gap:7px}.dir-foot button{width:31px;height:31px;border:0;border-radius:7px;background:#f4f7fb;color:#425a7e}.dir-foot button.on{background:#086cf3;color:#fff}
.emp-side{display:flex;flex-direction:column;gap:12px}.side-card{border:1px solid #dbe5f2;background:#fff;border-radius:12px;padding:13px 14px;box-shadow:0 3px 12px rgba(32,68,115,.035)}.side-card header{display:flex;align-items:center;justify-content:space-between}.side-card h3{margin:0;display:flex;align-items:center;gap:8px;font-size:15px}.side-card header a{font-size:10px;color:#086cf3;text-decoration:none;font-weight:700}.workforce{height:183px}.work-row{display:flex;align-items:center;height:142px}.emp-donut{width:128px;height:128px;border-radius:50%;background:conic-gradient(#4396f1 0 35.7%,#40c98d 35.7% 64.3%,#ffad2e 64.3% 85.7%,#8a50e9 85.7% 92.85%,#f44778 92.85% 100%);display:grid;place-items:center;position:relative;flex:0 0 128px}.emp-donut:after{content:"";position:absolute;inset:25px;background:#fff;border-radius:50%}.emp-donut>div{position:relative;z-index:1;text-align:center}.emp-donut b{display:block;font-size:21px}.emp-donut small{font-size:9px;color:#7185a7}.legend{flex:1;padding-left:15px}.legend p{margin:7px 0;display:grid;grid-template-columns:10px 1fr 14px;gap:7px;align-items:center;font-size:9.5px;color:#30476c}.legend i{width:9px;height:9px;border-radius:50%}.legend .d1{background:#4396f1}.legend .d2{background:#0ca0b1}.legend .d3{background:#ffad2e}.legend .d4{background:#8628ea}.legend .d5{background:#f44778}.legend b{text-align:right}
.quick{height:146px}.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:13px}.quick-grid a,.quick-grid button{height:42px;border:0;border-radius:8px;display:flex;align-items:center;gap:8px;padding:0 12px;text-decoration:none;font-size:10px;font-weight:700}.quick-grid .blue{background:#edf4ff;color:#086cf3}.quick-grid .green{background:#eaf9f1;color:#079f55}.quick-grid .amber{background:#fff5e9;color:#e78800}.quick-grid .purple{background:#f4ecff;color:#7227eb}
.hires{height:150px}.hire{height:35px;display:grid;grid-template-columns:31px 1fr auto 12px;gap:8px;align-items:center;border-bottom:1px solid #edf1f6}.hire:last-child{border-bottom:0}.hire>i{width:29px;height:29px;border-radius:8px;background:linear-gradient(135deg,#4c91ff,#2f68e8);color:#fff;font-style:normal;display:grid;place-items:center;font-size:9px;font-weight:800}.hire>span{display:flex;flex-direction:column}.hire b{font-size:9px}.hire small{font-size:8px;color:#6e82a4}.hire time{font-size:8px;color:#5f7394}.hire em{color:#08a458;font-style:normal;font-size:9px}
.expiring{height:105px}.empty-doc{height:65px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#7185a7}.empty-doc b{font-size:9px;margin-top:2px}.empty-doc span{font-size:8px;margin-top:2px}
@media(max-width:1350px){.emp-layout{grid-template-columns:minmax(0,1fr) 320px}.emp-metrics{gap:10px}.emp-metrics article{padding:12px}.filters{grid-template-columns:minmax(240px,1.4fr) .7fr .65fr .85fr 80px}.tr{grid-template-columns:25px 1.45fr .7fr .85fr 1.25fr .9fr .7fr .8fr 42px;gap:5px}}
@media(max-width:1100px){.emp-topbar{justify-content:space-between}.emp-head{align-items:flex-start;gap:15px}.emp-head-actions{flex-wrap:wrap;justify-content:flex-end}.emp-metrics{grid-template-columns:repeat(2,1fr)}.emp-metrics article:last-child{grid-column:span 2}.emp-layout{grid-template-columns:1fr}.emp-side{display:grid;grid-template-columns:repeat(2,1fr)}}

/* === HR-EMPLOYEES-APPROVED-GEOMETRY-V2 BEGIN === */
@media (min-width:1200px){

  /*
    Geometry calibrated against the two user screenshots:
    current site vs approved design.
  */

  body main.emp-page{
    padding-left:30px !important;
    padding-right:33px !important;
    padding-bottom:18px !important;
  }

  /* Approved top/header vertical rhythm */
  body main.emp-page .emp-topbar{
    height:50px !important;
    position:relative !important;
    justify-content:flex-end !important;
  }

  body main.emp-page .emp-global-search{
    position:absolute !important;
    top:4px !important;
    width:478px !important;
    max-width:478px !important;
    height:34px !important;
    margin:0 !important;
    padding:0 11px !important;
    border:1px solid #d1dceb !important;
    border-radius:9px !important;
    background:#fff !important;
    box-shadow:0 4px 14px rgba(38,72,118,.08) !important;
    z-index:50 !important;
  }

  body main.emp-page .emp-global-search input,
  body main.emp-page .emp-global-search input:focus,
  body main.emp-page .emp-global-search input:focus-visible{
    height:100% !important;
    min-height:0 !important;
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    background:transparent !important;
    padding:0 !important;
    margin:0 !important;
  }

  body main.emp-page .emp-head{
    position:relative !important;
    padding:7px 0 4px !important;
    align-items:flex-start !important;
  }

  body main.emp-page .emp-head-actions{
    position:absolute !important;
    right:0 !important;
    top:25px !important;
    display:flex !important;
    align-items:center !important;
    gap:11px !important;
  }

  body main.emp-page .emp-head h1{
    font-size:31px !important;
    line-height:1 !important;
    font-weight:800 !important;
    letter-spacing:-.5px !important;
  }

  body main.emp-page .emp-head p{
    margin-top:10px !important;
    font-size:13px !important;
  }

  body main.emp-page .emp-metrics{
    gap:14px !important;
    margin-bottom:19px !important;
  }

  body main.emp-page .emp-metrics article{
    height:107px !important;
    min-height:107px !important;
    padding:14px 16px !important;
    gap:14px !important;
  }

  /* Main grid and exact right column width from approved image */
  body main.emp-page .emp-layout{
    grid-template-columns:minmax(0,1fr) 352px !important;
    gap:14px !important;
  }

  /* Employee Directory: approved total height and row rhythm */
  body main.emp-page .dir-head{
    height:60px !important;
    padding:0 15px !important;
  }

  body main.emp-page .filters{
    height:57px !important;
    grid-template-columns:minmax(400px,1.6fr) .65fr .62fr .85fr 92px !important;
    gap:9px !important;
    padding:0 15px !important;
  }

  body main.emp-page label.table-search{
    height:38px !important;
    min-height:38px !important;
    border:1px solid #d7e2ef !important;
    border-radius:8px !important;
    background:#fff !important;
    box-shadow:none !important;
    outline:0 !important;
    overflow:hidden !important;
  }

  body main.emp-page label.table-search input,
  body main.emp-page label.table-search input:hover,
  body main.emp-page label.table-search input:focus,
  body main.emp-page label.table-search input:focus-visible{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    border:0 !important;
    border-width:0 !important;
    border-radius:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    background:transparent !important;
    background-image:none !important;
    padding:0 !important;
    margin:0 !important;
    appearance:none !important;
    -webkit-appearance:none !important;
  }

  body main.emp-page .tr{
    min-height:47px !important;
  }

  body main.emp-page .tr.th{
    min-height:34px !important;
  }

  body main.emp-page .dir-foot{
    height:52px !important;
  }

  /* Right panels: measured from approved screenshot */
  body main.emp-page .workforce{
    height:181px !important;
  }

  body main.emp-page .work-row{
    height:140px !important;
  }

  body main.emp-page .quick{
    height:144px !important;
  }

  body main.emp-page .hires{
    height:142px !important;
  }

  body main.emp-page .hire{
    height:33px !important;
  }

  body main.emp-page .expiring{
    height:101px !important;
  }

  body main.emp-page .side-card h3{
    font-size:15px !important;
    font-weight:800 !important;
  }

  body main.emp-page .side-card h3 svg{
    width:20px !important;
    height:20px !important;
    color:#086cf3 !important;
    stroke:#086cf3 !important;
  }
}
/* === HR-EMPLOYEES-APPROVED-GEOMETRY-V2 END === */

/* === HR-EMPLOYEES-APPROVED-TYPOGRAPHY-V1 BEGIN === */
@media (min-width:1200px){

  /* Top bar */
  body main.emp-page .emp-global-search input{
    font-size:13px !important;
    font-weight:500 !important;
  }

  body main.emp-page .emp-global-search kbd{
    font-size:10.5px !important;
  }

  body main.emp-page .emp-top-actions{
    font-size:12px !important;
  }

  body main.emp-page .emp-admin b{
    font-size:12px !important;
  }

  body main.emp-page .emp-admin small{
    font-size:10px !important;
  }

  /* Page heading */
  body main.emp-page .emp-crumb{
    font-size:14px !important;
  }

  body main.emp-page .emp-head h1{
    font-size:32px !important;
  }

  body main.emp-page .emp-head p{
    font-size:14px !important;
  }

  body main.emp-page .btn{
    font-size:12px !important;
  }

  /* KPI */
  body main.emp-page .mc>span{
    font-size:12px !important;
    font-weight:800 !important;
  }

  body main.emp-page .mv>b{
    font-size:31px !important;
  }

  body main.emp-page .mc small{
    font-size:11px !important;
  }

  body main.emp-page .mv em{
    font-size:11px !important;
  }

  body main.emp-page .emp-ring b{
    font-size:11.5px !important;
  }

  /* Directory header and filters */
  body main.emp-page .dir-title h2{
    font-size:20px !important;
  }

  body main.emp-page .dir-title small{
    font-size:10.5px !important;
  }

  body main.emp-page .dir-actions button{
    font-size:11px !important;
  }

  body main.emp-page label.table-search input{
    font-size:11.5px !important;
  }

  body main.emp-page .filters select,
  body main.emp-page .filter-btn{
    font-size:11px !important;
  }

  /* Employee table */
  body main.emp-page .emp-table{
    font-size:10.8px !important;
  }

  body main.emp-page .tr.th{
    font-size:10px !important;
  }

  body main.emp-page .person-cell b{
    font-size:11px !important;
  }

  body main.emp-page .person-cell small{
    font-size:9.2px !important;
  }

  body main.emp-page .active{
    font-size:9.8px !important;
  }

  body main.emp-page .dir-foot{
    font-size:11px !important;
  }

  /* Right column */
  body main.emp-page .side-card h3,
  body main.emp-page .side-card h3 span{
    font-size:16px !important;
    font-weight:800 !important;
  }

  body main.emp-page .side-card header a{
    font-size:11px !important;
  }

  body main.emp-page .emp-donut b{
    font-size:22px !important;
  }

  body main.emp-page .emp-donut small{
    font-size:9.5px !important;
  }

  body main.emp-page .legend p{
    font-size:10.5px !important;
  }

  body main.emp-page .quick-grid a,
  body main.emp-page .quick-grid button{
    font-size:11px !important;
  }

  body main.emp-page .hire b{
    font-size:10px !important;
  }

  body main.emp-page .hire small{
    font-size:9px !important;
  }

  body main.emp-page .hire time{
    font-size:9px !important;
  }

  body main.emp-page .empty-doc b{
    font-size:10px !important;
  }

  body main.emp-page .empty-doc span{
    font-size:9px !important;
  }
}
/* === HR-EMPLOYEES-APPROVED-TYPOGRAPHY-V1 END === */

/* === HR-EMPLOYEES-RECENT-HIRES-FIX-V1 BEGIN === */
@media (min-width:1200px){

  /* Approved screenshot authority: Recent Hires card */
  body main.emp-page .hires{
    height:150px !important;
    min-height:150px !important;
    padding:13px 14px !important;
    overflow:hidden !important;
  }

  body main.emp-page .hires header{
    min-height:23px !important;
    margin-bottom:3px !important;
  }

  body main.emp-page .hires .hire{
    height:35px !important;
    min-height:35px !important;
    grid-template-columns:31px 1fr auto 12px !important;
    gap:8px !important;
    align-items:center !important;
  }

  body main.emp-page .hires .hire > i{
    width:29px !important;
    height:29px !important;
    min-width:29px !important;
  }

  body main.emp-page .hires .hire b{
    font-size:10px !important;
    line-height:1.15 !important;
  }

  body main.emp-page .hires .hire small{
    font-size:9px !important;
    line-height:1.12 !important;
  }

  body main.emp-page .hires .hire time{
    font-size:9px !important;
    white-space:nowrap !important;
  }

  body main.emp-page .hires .hire em{
    font-size:9px !important;
  }
}
/* === HR-EMPLOYEES-RECENT-HIRES-FIX-V1 END === */

/* === HR-EMPLOYEES-TOP-SEARCH-CENTER-V1 BEGIN === */
@media (min-width:1200px){
  body main.emp-page .emp-global-search{
    position:fixed !important;
    left:50% !important;
    right:auto !important;
    inset-inline-start:auto !important;
    inset-inline-end:auto !important;
    top:4px !important;
    transform:translateX(-50%) !important;
    width:478px !important;
    max-width:478px !important;
    height:34px !important;
    margin:0 !important;
    z-index:1000 !important;
  }
}
/* === HR-EMPLOYEES-TOP-SEARCH-CENTER-V1 END === */

/* === HR-EMPLOYEES-TOP-SEARCH-CENTER-V1.1 BEGIN === */
@media (min-width:1200px){
  body main.emp-page .emp-global-search{
    position:fixed !important;
    left:50vw !important;
    right:auto !important;
    top:4px !important;
    transform:translateX(-50%) !important;
    width:478px !important;
    max-width:478px !important;
    height:34px !important;
    margin:0 !important;
    z-index:2000 !important;
  }
}
/* === HR-EMPLOYEES-TOP-SEARCH-CENTER-V1.1 END === */