:root{--ink:#17233c;--muted:#6e788b;--blue:#265cf5;--navy:#112e65;--line:#dce2ea;--soft:#f5f7fb;--red:#c53d4e}
*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{font-family:"DM Sans",sans-serif;color:var(--ink);background:#f7f8fb}.auth-shell{min-height:100vh;display:grid;grid-template-columns:minmax(420px,46%) 1fr;background:#fff}.auth-shell.single{grid-template-columns:1fr}.auth-shell.single .mobile-logo{display:flex}.brand-panel{position:relative;overflow:hidden;padding:52px 9%;color:#fff;background:linear-gradient(145deg,#0d3672 0%,#173c87 54%,#2861db 100%);display:flex;flex-direction:column}.brand-panel:after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1px);background-size:24px 24px;mask-image:linear-gradient(to bottom,transparent,black);pointer-events:none}.brand-top,.dash-brand,.mobile-logo{font:700 22px Manrope,sans-serif;display:flex;align-items:center;gap:12px;position:relative;z-index:1}.brand-mark{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.16);font-size:13px;color:#fff}.brand-mark svg{width:26px;fill:#fff}.brand-copy{margin:auto 0;position:relative;z-index:1;max-width:580px}.eyebrow{display:block;text-transform:uppercase;letter-spacing:.16em;font-size:11px;font-weight:700;color:#b9cdfc;margin-bottom:18px}.eyebrow.dark{color:var(--blue)}.brand-copy h1{font:800 clamp(38px,4.3vw,65px)/1.08 Manrope,sans-serif;letter-spacing:-.04em;margin:0 0 28px}.brand-copy p{font-size:18px;line-height:1.7;color:#d9e4ff;max-width:520px}.brand-stats{display:flex;gap:12%;position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.17);padding-top:28px}.brand-stats div{display:flex;flex-direction:column}.brand-stats strong{font:700 20px Manrope}.brand-stats span{font-size:12px;color:#b9cdfc;margin-top:4px}.orb{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.12)}.orb-one{width:340px;height:340px;right:-180px;top:15%}.orb-two{width:190px;height:190px;right:7%;top:24%;background:rgba(255,255,255,.035)}.form-panel{display:flex;align-items:center;justify-content:center;padding:24px;background:var(--soft)}.form-wrap{width:100%;max-width:460px;min-width:0;background:#fff;padding:36px 36px;border-radius:20px;border:1px solid rgba(16,24,40,.05);box-shadow:0 1px 2px rgba(16,24,40,.04),0 24px 48px -24px rgba(16,24,40,.2)}.form-wrap.compact{max-width:440px}.mobile-logo{display:none;color:var(--navy);margin-bottom:28px}.mobile-logo .brand-mark{background:var(--blue)}h2{font:800 35px/1.2 Manrope,sans-serif;letter-spacing:-.035em;margin:0 0 12px}.form-lead{color:var(--muted);font-size:15px;line-height:1.55;margin-bottom:36px}.field{margin-bottom:21px}.field label{display:block;font-weight:600;font-size:13px;margin-bottom:8px}.input-shell{height:53px;border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;padding:0 15px;transition:.2s;background:#fff}.input-shell:hover{border-color:#c3cbdb}.input-shell:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(38,92,245,.1)}.input-shell svg{width:20px;fill:#8791a4;margin-right:12px}.input-shell input{border:0;outline:0;flex:1;width:100%;font:500 14px "DM Sans";color:var(--ink);background:transparent}.input-shell input::placeholder{color:#a2a9b7}.password-toggle{border:0;background:none;color:var(--blue);font-size:12px;font-weight:700;padding:8px;border-radius:6px;cursor:pointer;transition:.15s}.password-toggle:hover{background:rgba(38,92,245,.08)}.field>span,.validation-summary{color:var(--red);font-size:12px;display:block;margin-top:5px}.validation-summary ul{padding-left:18px}.validation-summary:empty{display:none}.form-options{display:flex;justify-content:space-between;align-items:center;font-size:13px;margin:4px 0 27px}.check-label{display:flex;gap:9px;align-items:center;color:#4f596b;cursor:pointer}.check-label input{accent-color:var(--blue);width:16px;height:16px;cursor:pointer}.form-options a,.help-copy a,.back-link{color:var(--blue);font-weight:600;text-decoration:none;transition:.15s}.form-options a:hover,.help-copy a:hover{text-decoration:underline}.primary-button{width:100%;height:53px;border:0;border-radius:10px;background:var(--blue);color:#fff;font:700 14px "DM Sans";display:flex;align-items:center;justify-content:center;gap:12px;box-shadow:0 10px 25px rgba(38,92,245,.2);transition:.2s}.primary-button:hover{background:#174be0;transform:translateY(-1px);color:#fff}.primary-button span{font-size:20px}.button-link{text-decoration:none}.help-copy{text-align:center;color:var(--muted);font-size:13px;margin:28px 0}.security-copy{text-align:center;color:#9aa2b1;font-size:11px;margin-top:35px}.notice{padding:13px 15px;border-radius:9px;font-size:13px;margin-bottom:23px}.notice.success{background:#eaf9f2;color:#147351}.back-link{display:inline-block;margin-bottom:38px}.dev-box{background:#f0f4ff;border:1px solid #d7e1ff;padding:18px;border-radius:10px;margin:25px 0;display:flex;flex-direction:column;gap:5px;font-size:13px}.dev-box span{color:var(--muted)}.dev-box a{color:var(--blue);font-weight:700;text-decoration:none;margin-top:7px}.success-icon,.error-icon{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:24px;margin-bottom:30px}.success-icon{background:#e6f8ef;color:#17855d}.error-icon{background:#fff0f1;color:#c53d4e}.center-page{min-height:100vh;display:grid;place-items:center}.simple-card{background:#fff;padding:50px;border-radius:18px;box-shadow:0 20px 60px rgba(20,34,62,.08);max-width:460px;text-align:center}.simple-card .error-icon{margin:0 auto 25px}.simple-card p{color:var(--muted);margin-bottom:28px}.dashboard{min-height:100vh;background:#f4f6fa}.dashboard nav{height:76px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 6%}.dash-brand .brand-mark{background:rgba(255,255,255,.15)}.logout-button{border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;border-radius:8px;padding:9px 16px}.welcome-card{margin:8vh auto;background:#fff;border-radius:18px;padding:50px;max-width:850px;box-shadow:0 15px 50px rgba(20,34,62,.07)}.welcome-card h1{font:800 38px Manrope;margin:17px 0 8px}.welcome-card p{color:var(--muted)}.role-pill{background:#e8eeff;color:var(--blue);padding:7px 12px;border-radius:99px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em}.employee-meta{margin-top:35px;border-top:1px solid var(--line);padding-top:22px;display:flex;flex-direction:column;color:var(--muted);font-size:12px}.employee-meta strong{color:var(--ink);font-size:17px;margin-top:4px}
@media(max-width:900px){.auth-shell{grid-template-columns:minmax(0,1fr)}.brand-panel{display:none}.form-panel{min-height:100vh;padding:24px}.form-wrap{padding:32px 24px;border-radius:16px}.mobile-logo{display:flex}h2{font-size:30px}.welcome-card{margin:30px 20px;padding:30px}.dashboard nav{padding:0 20px}}

/* Authenticated HRMS workspace */
.app-frame{min-height:100vh;background:#f4f6f9}.app-sidebar{position:fixed;inset:0 auto 0 0;width:276px;background:#fff;border-right:1px solid #e3e7ee;display:flex;flex-direction:column;z-index:30}.sidebar-logo{height:78px;padding:0 22px;border-bottom:1px solid #e8ebf0;display:flex;align-items:center;gap:12px;font:700 20px Manrope}.sidebar-logo small,.dash-brand small,.mobile-logo small{font-size:11px;color:#6c7890}.hex-logo{width:40px;height:40px;border-radius:11px;background:linear-gradient(145deg,#265cf5,#6a35d5);color:#fff;display:grid;place-items:center;font-size:12px}.sidebar-logo>button{display:none;margin-left:auto;border:0;background:none;font-size:25px}.side-nav{padding:16px 14px;overflow:auto;flex:1}.side-nav a,.side-nav summary{color:#566176;text-decoration:none;font-weight:600;font-size:14px}.nav-main,.side-nav>details>summary{min-height:45px;padding:0 13px;display:flex;align-items:center;gap:11px;border-radius:9px;cursor:pointer}.side-nav>details>summary{justify-content:space-between}.side-nav summary::-webkit-details-marker{display:none}.side-nav summary::marker{content:""}.side-nav>details>summary>span{display:flex;align-items:center;gap:11px}.side-nav summary b{transition:.2s}.side-nav details[open]>summary b{transform:rotate(180deg)}.side-nav .active{background:#162740;color:#fff}.nav-icon{width:20px;text-align:center;font-size:17px}.nav-children{padding:5px 0 8px 40px}.nav-children>a,.nav-children>details>summary{display:flex;min-height:37px;align-items:center;gap:10px}.nav-children>details>summary{justify-content:space-between;padding-right:13px}.nav-children a:hover,.nav-level-three a:hover{color:var(--blue)}.nav-level-three{border-left:1px solid #dfe4eb;margin:0 0 6px 5px;padding:5px 0 5px 17px;display:flex;flex-direction:column;gap:11px}.nav-level-three a{font-size:12px;color:#7a8495}.nav-section{text-transform:uppercase;letter-spacing:.12em;font-weight:700;font-size:10px;color:#a1a9b7;margin:23px 13px 8px}.sidebar-user{border-top:1px solid #e8ebf0;padding:17px;display:flex;gap:10px;align-items:center}.user-avatar,.header-avatar{width:38px;height:38px;border-radius:50%;background:#e3eaff;color:var(--blue);display:grid;place-items:center;font-weight:800}.sidebar-user>span:last-child{display:flex;flex-direction:column;font-size:12px;min-width:0}.sidebar-user strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-user small{color:#8b94a5;margin-top:2px}.app-main{margin-left:276px;min-height:100vh}.app-header{height:78px;background:#fff;border-bottom:1px solid #e3e7ee;display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:20}.branch-switcher{border:1px solid #dfe4eb;border-radius:9px;padding:8px 13px;min-width:235px;display:flex;gap:10px;align-items:center}.branch-symbol{width:32px;height:32px;border-radius:8px;background:#eef2ff;color:var(--blue);display:grid;place-items:center}.branch-switcher>span:nth-child(2){display:flex;flex-direction:column;flex:1}.branch-switcher small{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:#8c95a5}.branch-switcher strong{font-size:13px}.header-actions{display:flex;align-items:center;gap:9px}.header-actions>button,.mobile-menu{width:39px;height:39px;border:1px solid #e0e5ec;border-radius:9px;background:#fff;font-size:18px;position:relative}.header-actions button i{position:absolute;width:6px;height:6px;border-radius:50%;background:#e24848;right:8px;top:7px}.header-divider{height:28px;width:1px;background:#e1e5eb;margin:0 5px}.header-actions form{margin:0}.header-logout{border:0!important;width:auto!important;font-size:12px!important;color:#657086;background:none!important}.mobile-menu{display:none}.app-content{padding:30px;max-width:1650px;margin:auto}.page-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:26px}.page-heading h1{font:800 29px Manrope;margin:3px 0 5px}.page-heading p,.panel-title p{margin:0;color:#8790a1;font-size:13px}.page-kicker{font-size:10px;color:var(--blue);text-transform:uppercase;letter-spacing:.13em;font-weight:800}.date-chip{background:#fff;border:1px solid #e0e5eb;border-radius:9px;padding:11px 15px;font-size:13px}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px}.metric-card{background:#fff;border:1px solid #e4e8ee;border-top:3px solid;border-radius:11px;padding:22px;display:flex;justify-content:space-between}.metric-card>div{display:flex;flex-direction:column}.metric-card small{font-size:13px;color:#697487}.metric-card strong{font:800 31px Manrope;margin:8px 0 10px}.metric-card span{font-size:11px;color:#8790a1}.metric-card b{color:#08a06b}.metric-card>i{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:20px}.metric-card.blue{border-top-color:#315fee}.metric-card.blue>i{background:#e9efff;color:#315fee}.metric-card.green{border-top-color:#12a878}.metric-card.green>i{background:#e4f8f1;color:#12a878}.metric-card.orange{border-top-color:#eb8c18}.metric-card.orange>i{background:#fff1df;color:#d97706}.metric-card.purple{border-top-color:#a247d0}.metric-card.purple>i{background:#f6eafb;color:#a247d0}.dashboard-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:17px;margin-top:17px}.panel{background:#fff;border:1px solid #e3e7ed;border-radius:11px;padding:23px}.panel-title{display:flex;justify-content:space-between;align-items:start;margin-bottom:22px}.panel-title h3{font:700 17px Manrope;margin:0 0 5px}.panel-title button{border:1px solid #e1e5eb;background:#fff;border-radius:7px;padding:8px 11px;font-size:11px}.panel-title a{font-size:12px;color:var(--blue);text-decoration:none;font-weight:700}.chart-wrap{height:230px;display:flex}.chart-y{display:flex;flex-direction:column;justify-content:space-between;color:#9aa2b1;font-size:10px;padding:0 10px 22px 0}.bar-chart{flex:1;display:flex;align-items:end;gap:6%;border-bottom:1px solid #e5e9ef;background:repeating-linear-gradient(to bottom,#fff 0,#fff 56px,#edf0f4 57px);padding:0 5%}.bar-item{height:100%;flex:1;display:flex;flex-direction:column;justify-content:end;align-items:center;gap:8px}.bar-track{height:calc(100% - 25px);width:100%;display:flex;align-items:end}.bar-track span{width:100%;display:block;background:linear-gradient(#416ef1,#2db38d);border-radius:5px 5px 0 0}.bar-item small{font-size:10px;color:#8b94a4}.chart-legend{display:flex;justify-content:center;gap:25px;margin-top:15px;font-size:10px;color:#7f899a}.chart-legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px}.legend-green{background:#2eb08e}.legend-soft{background:#e3e7ee}.access-list>div,.request-row{display:flex;align-items:center;padding:12px 0;border-bottom:1px solid #edf0f4;gap:11px}.access-list>div:last-child,.request-row:last-child{border:0}.dept-icon{width:35px;height:35px;border-radius:8px;background:#eef2ff;color:#315fee;display:grid;place-items:center;font-weight:800}.dept-copy,.request-row>span:nth-child(2){display:flex;flex-direction:column;flex:1}.dept-copy strong,.request-row strong{font-size:12px}.dept-copy small,.request-row small{font-size:10px;color:#9099a8;margin-top:3px}.access-badge{font-size:9px;text-transform:uppercase;font-weight:800;padding:5px 8px;border-radius:99px}.access-badge.write{background:#e4f8f1;color:#087e59}.access-badge.read{background:#e9efff;color:#315fee}.avatar{width:35px;height:35px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:800}.coral{background:#ffe5df;color:#bb4b36}.teal{background:#def7f4;color:#147b70}.violet{background:#f0e4ff;color:#7441a8}.request-row time{font-size:10px;color:#7e8797}.request-row>b{font-size:9px;border-radius:99px;padding:5px 7px}.pending{color:#b56e0c;background:#fff2dd}.approved{color:#087e59;background:#e4f8f1}.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.quick-grid a{border:1px solid #e4e8ee;border-radius:9px;padding:17px 12px;color:#4f5a6e;text-decoration:none;font-size:11px;font-weight:700;display:flex;align-items:center;gap:9px}.quick-grid i{width:30px;height:30px;border-radius:7px;background:#eef2ff;color:#315fee;display:grid;place-items:center;font-style:normal;font-size:16px}.permission-form-panel{margin-bottom:18px}.permission-form{display:grid;grid-template-columns:1.1fr 1.1fr .65fr auto auto;gap:13px;align-items:end}.permission-form label{font-size:11px;font-weight:700;color:#586377;display:flex;flex-direction:column;gap:7px}.permission-form select{height:42px;border:1px solid #dfe4eb;border-radius:8px;padding:0 10px;background:#fff;color:#25334a}.permission-form .primary-check{height:42px;flex-direction:row;align-items:center;white-space:nowrap}.primary-check input{accent-color:var(--blue)}.save-button{height:42px;border:0;border-radius:8px;background:var(--blue);color:#fff;padding:0 18px;font-weight:700;font-size:12px}.table-scroll{overflow:auto}.permission-table{border-collapse:collapse;width:100%;font-size:12px}.permission-table th{text-align:left;color:#8b94a4;text-transform:uppercase;letter-spacing:.07em;font-size:9px;border-bottom:1px solid #e6e9ef;padding:11px}.permission-table td{border-bottom:1px solid #edf0f4;padding:13px 11px;color:#5d687b}.permission-table td:first-child{display:flex;flex-direction:column}.permission-table td strong{color:#253149}.permission-table td small{font-size:9px;color:#959dab}.remove-button{border:0;background:#fff0f1;color:#bd4551;border-radius:6px;padding:6px 9px;font-size:10px}.sidebar-backdrop{display:none}
@media(max-width:1200px){.metric-grid{grid-template-columns:1fr 1fr}.permission-form{grid-template-columns:1fr 1fr}.save-button{width:180px}.dashboard-grid{grid-template-columns:1fr}}
@media(max-width:760px){.app-sidebar{transform:translateX(-100%);transition:.25s}.sidebar-open .app-sidebar{transform:none}.sidebar-open .sidebar-backdrop{display:block;position:fixed;inset:0;background:rgba(15,28,48,.45);z-index:25}.sidebar-logo>button{display:block}.app-main{margin-left:0}.mobile-menu{display:block}.app-header{padding:0 14px}.branch-switcher{min-width:0;border:0}.branch-switcher .branch-symbol,.branch-switcher>b{display:none}.header-actions>button,.header-divider,.header-logout{display:none}.app-content{padding:20px 15px}.page-heading{align-items:start}.date-chip{display:none}.metric-grid{grid-template-columns:1fr}.permission-form{grid-template-columns:1fr}.save-button{width:100%}.dashboard-grid{grid-template-columns:1fr}.quick-grid{grid-template-columns:1fr}.panel{padding:18px}}

/* Reference-density refinement */
.app-frame{font-family:Inter,Arial,sans-serif;font-size:13px;color:#243147}.app-sidebar{width:300px}.app-main{margin-left:300px}.sidebar-logo{height:72px;padding:0 20px;font-family:Inter,Arial,sans-serif;font-size:18px}.hex-logo{width:36px;height:36px;border-radius:9px;font-size:10px}.side-nav{padding:12px 13px}.side-nav a,.side-nav summary{font-size:12.5px;font-weight:500}.nav-main,.side-nav>details>summary{min-height:39px;padding:0 12px;border-radius:8px}.nav-icon{font-size:14px}.nav-children{padding-left:36px}.nav-children>a,.nav-children>details>summary{min-height:31px}.nav-level-three{gap:8px}.nav-level-three a{font-size:11px}.nav-section{margin-top:18px}.sidebar-user{padding:13px 16px}.user-avatar,.header-avatar{width:34px;height:34px}.app-header{height:72px;padding:0 18px}.branch-switcher{min-width:210px;padding:6px 10px}.branch-symbol{width:29px;height:29px}.branch-switcher strong{font-size:12px}.header-actions>button,.mobile-menu{width:36px;height:36px;font-size:16px}.app-content{padding:25px 18px}.page-heading{margin-bottom:22px}.page-heading h1{font-family:Inter,Arial,sans-serif;font-size:25px;line-height:1.25;letter-spacing:-.025em}.page-heading p,.panel-title p{font-size:11.5px}.page-kicker{font-size:9px}.date-chip{padding:9px 12px;font-size:11.5px}.metric-grid{gap:14px}.metric-card{padding:18px 20px;border-radius:9px;min-height:142px}.metric-card small{font-size:11.5px}.metric-card strong{font-family:Inter,Arial,sans-serif;font-size:27px;letter-spacing:-.03em;margin:7px 0 9px}.metric-card span{font-size:10px}.metric-card>i{width:43px;height:43px;font-size:17px}.dashboard-grid{gap:14px;margin-top:14px}.panel{border-radius:9px;padding:20px}.panel-title{margin-bottom:18px}.panel-title h3{font-family:Inter,Arial,sans-serif;font-size:15px}.chart-wrap{height:205px}.access-list>div,.request-row{padding:10px 0}.dept-icon,.avatar{width:32px;height:32px}.quick-grid a{padding:14px 11px;font-size:10.5px}.permission-form label,.permission-table{font-size:11px}
@media(max-width:1200px) and (min-width:761px){.app-sidebar{width:260px}.app-main{margin-left:260px}}
@media(max-width:760px){.app-main{margin-left:0}.app-content{padding:18px 13px}.page-heading h1{font-size:22px}.metric-card{min-height:125px}}

/* Desktop composition aligned to the supplied ERP reference */
@media(min-width:1201px){
  .app-frame{--side-width:clamp(300px,18.9vw,362px);padding:18px;min-height:100vh}
  .app-sidebar{left:18px;top:18px;bottom:18px;width:var(--side-width);height:auto;border:1px solid #dfe4ea;border-radius:10px;overflow:hidden;box-shadow:0 3px 12px rgba(24,38,61,.035)}
  .app-main{margin-left:calc(var(--side-width) + 18px)}
  .app-header{height:86px;top:18px;border:1px solid #dfe4ea;border-radius:10px;padding:0 18px;box-shadow:0 3px 12px rgba(24,38,61,.04)}
  .app-content{padding:38px 0 0}
}
.app-frame{background:#f5f6f8}.sidebar-logo{height:84px;padding:0 23px}.sidebar-logo strong{font-size:18px;letter-spacing:-.02em}.side-nav{padding:3px 23px 16px}.nav-main,.side-nav>details>summary{min-height:48px;padding:0 15px}.side-nav .active{box-shadow:none}.nav-children{padding:7px 0 9px 43px}.nav-children>a,.nav-children>details>summary{min-height:42px;font-size:13px}.nav-level-three{margin-top:1px;margin-bottom:7px;padding-top:6px;padding-bottom:6px;gap:13px}.nav-level-three a{font-size:12px}.nav-section{margin:22px 15px 7px}.sidebar-user{padding:15px 20px}.branch-switcher{height:56px;min-width:245px;padding:7px 12px}.branch-symbol{width:34px;height:34px}.app-content{max-width:none}.page-heading{min-height:58px;margin-bottom:24px;align-items:center}.page-heading h1{font-size:27px;margin-top:4px}.page-heading p{font-size:12px}.date-chip{padding:11px 16px;background:#fff}.metric-grid{gap:18px}.metric-card{min-height:170px;padding:25px 24px;border-top-width:4px}.metric-card small{font-size:13px}.metric-card strong{font-size:30px;margin:9px 0 14px}.metric-card span{font-size:11px}.metric-card>i{width:52px;height:52px;font-size:20px}.dashboard-grid{gap:18px;margin-top:18px;grid-template-columns:minmax(500px,1.15fr) minmax(340px,.85fr)}.panel{padding:24px;border-color:#dfe4ea}.panel-title{margin-bottom:23px}.panel-title h3{font-size:17px}.panel-title p{font-size:12px}.attendance-panel,.department-panel{min-height:350px}.leave-panel,.quick-panel{min-height:275px}.chart-wrap{height:235px}.access-list>div,.request-row{padding:13px 0}.quick-grid{gap:12px}.quick-grid a{min-height:65px;padding:15px}.permission-form-panel,.permission-table-panel{padding:25px}.permission-form{gap:16px}.permission-form select,.save-button{height:44px}
@media(max-width:1500px) and (min-width:1201px){.sidebar-logo{height:78px}.side-nav{padding-left:14px;padding-right:14px}.nav-main,.side-nav>details>summary{min-height:43px}.nav-children>a,.nav-children>details>summary{min-height:36px}.metric-card{min-height:154px;padding:21px}.metric-card strong{font-size:27px}.metric-card>i{width:46px;height:46px}.app-content{padding-top:30px}}

/* HexaPay uploaded theme adapted for HexaHr */
.hp-shell{--hp-navy:#131a33;--hp-navy2:#2a3564;--hp-bg:#f3f5fa;--hp-line:#e6e9f2;--hp-text:#171a2b;--hp-muted:#6b7189;--hp-teal:#0e7c74;--hp-amber:#c9820a;--hp-coral:#c8493f;--hp-violet:#5b4fd6;display:flex;min-height:100vh;background:var(--hp-bg);color:var(--hp-text);font:13px Inter,sans-serif}.hp-shell *{box-sizing:border-box}.hp-sidebar{width:248px;height:100vh;position:fixed;inset:0 auto 0 0;background:var(--hp-navy);color:#c7cbe0;padding:16px 12px;display:flex;flex-direction:column;z-index:50}.hp-brand{display:flex;align-items:center;gap:10px;padding:0 6px 14px;color:#fff}.hp-brand-mark{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,#0e7c74,#14b8a6);display:grid;place-items:center;font:800 11px Sora}.hp-brand>span:nth-child(2){display:flex;flex-direction:column}.hp-brand strong{font:700 17px Sora;letter-spacing:.1px}.hp-brand small{font-size:10px;color:#8a90b3;margin-top:1px}.hp-brand button{display:none;margin-left:auto;border:0;background:none;color:#fff;font-size:21px}.hp-nav{flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#2a3564 transparent}.hp-nav-section{margin-top:8px}.hp-nav-section>p{font:600 10px Sora;text-transform:uppercase;letter-spacing:.08em;color:#5c6289;padding:6px 12px;margin:0}.hp-nav-item{height:36px;display:flex;align-items:center;gap:10px;padding:0 11px;border-radius:8px;color:#aeb3d1!important;text-decoration:none;font-size:12px;font-weight:500;cursor:pointer;margin-bottom:2px;transition:.15s}.hp-nav-item>span:first-child{display:flex;align-items:center;gap:10px;flex:1}.hp-nav-item:hover{background:#1c2547;color:#fff!important}.hp-nav-item.active{background:var(--hp-navy2);color:#fff!important;box-shadow:inset 3px 0 #0e7c74}.hp-icon{width:17px;text-align:center;color:inherit}.hp-nav details summary{justify-content:space-between;list-style:none}.hp-nav details summary::-webkit-details-marker{display:none}.hp-nav details summary b{font-size:10px;transition:.15s}.hp-nav details[open] summary b{transform:rotate(180deg)}.hp-nav details summary em{margin-left:auto;background:var(--hp-coral);color:#fff;font-style:normal;font-size:9px;font-weight:700;padding:2px 6px;border-radius:20px}.hp-subnav{margin:2px 0 6px 27px;border-left:1px solid #313b61;padding-left:10px}.hp-subnav a{height:29px;display:flex;align-items:center;color:#858bad;text-decoration:none;font-size:10.5px;padding:0 8px;border-radius:6px}.hp-subnav a:hover{background:#1c2547;color:#fff}.hp-sidebar-footer{border-top:1px solid rgba(255,255,255,.08);padding:11px 8px 0;display:flex;align-items:center;gap:9px}.hp-user-avatar{width:32px;height:32px;border-radius:8px;background:var(--hp-violet,#5b4fd6);display:grid;place-items:center;color:#fff;font-size:11px;font-weight:700;flex:none}.hp-sidebar-footer>span:nth-child(2){display:flex;flex-direction:column;min-width:0;flex:1}.hp-sidebar-footer strong{font-size:11.5px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hp-sidebar-footer small{font-size:9.5px;color:#8a90b3}.hp-sidebar-footer form{margin:0}.hp-sidebar-footer button{border:0;background:none;color:#8a90b3;font-size:17px}.hp-main{margin-left:248px;width:calc(100% - 248px);height:100vh;display:flex;flex-direction:column;min-width:0}.hp-topbar{height:54px;flex:none;background:#fff;border-bottom:1px solid var(--hp-line,#e6e9f2);display:flex;align-items:center;padding:0 26px;gap:24px}.hp-page-title{display:flex;flex-direction:column;min-width:245px}.hp-page-title strong{font:700 17px Sora}.hp-page-title small{font-size:10px;color:#6b7189;margin-top:1px}.hp-search{height:35px;width:320px;margin-left:auto;background:#f3f5fa;border:1px solid #e6e9f2;border-radius:9px;display:flex;align-items:center;padding:0 11px;color:#6b7189;gap:8px}.hp-search input{border:0;outline:0;background:transparent;width:100%;font:11.5px Inter}.hp-top-actions{display:flex;align-items:center;gap:10px}.hp-top-actions button{width:34px;height:34px;border:1px solid #e6e9f2;border-radius:9px;background:#fff;color:#6b7189;position:relative}.hp-top-actions button i{position:absolute;right:6px;top:5px;width:6px;height:6px;border-radius:50%;background:#c8493f;border:1px solid #fff}.hp-menu-toggle{display:none}.hp-content{padding:14px 20px 16px;overflow:auto;flex:1}.hp-kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px}.hp-kpi{background:#fff;border:1px solid #e6e9f2;border-radius:12px;padding:12px 14px 11px;min-height:112px}.hp-kpi-top{display:flex;align-items:center;justify-content:space-between}.hp-kpi-top i{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-style:normal;font-size:14px}.hp-kpi-top i.teal{background:#e3f4f1;color:#0e7c74}.hp-kpi-top i.amber{background:#fbf0dd;color:#c9820a}.hp-kpi-top i.coral{background:#fbe9e7;color:#c8493f}.hp-kpi-top i.violet{background:#efedfb;color:#5b4fd6}.hp-kpi-top b{font-size:10.5px}.hp-kpi-top .up{color:#0e7c74}.hp-kpi-top .down{color:#c8493f}.hp-kpi>strong{font:700 21px Sora;display:block;margin-top:7px;font-variant-numeric:tabular-nums}.hp-kpi>span{font-size:11.5px;color:#6b7189;display:block;margin-top:2px}.hp-summary-row{display:grid;grid-template-columns:280px 1fr;gap:12px;margin-bottom:12px}.hp-card{background:#fff;border:1px solid #e6e9f2;border-radius:12px;padding:14px 16px;min-height:207px}.hp-card h2{font:700 12.5px Sora;margin:0 0 2px}.hp-card>p{font-size:10px;color:#6b7189;margin:0 0 9px}.hp-ring-wrap{display:flex;align-items:center;gap:16px}.hp-ring{width:90px;height:90px;position:relative;flex:none}.hp-ring svg{width:100%;height:100%;transform:rotate(-90deg)}.hp-ring circle{fill:none;stroke:#eef0f6;stroke-width:14}.hp-ring circle.progress{stroke:#0e7c74;stroke-dasharray:295;stroke-dashoffset:44;stroke-linecap:round}.hp-ring>span{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.hp-ring strong{font:700 17px Sora}.hp-ring small{font-size:8px;color:#6b7189}.hp-legend{display:flex;flex-direction:column;gap:9px;flex:1}.hp-legend>div{display:flex;justify-content:space-between;font-size:11px}.hp-legend span{display:flex;align-items:center;gap:6px}.hp-legend i,.hp-activity-list i{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none}.teal-dot{background:#0e7c74}.amber-dot{background:#c9820a}.coral-dot{background:#c8493f}.violet-dot{background:#5b4fd6}.gray-dot{background:#d8dbe6}.hp-activity-list>div{min-height:31px;border-bottom:1px solid #e6e9f2;display:flex;align-items:center;gap:9px;font-size:10.5px}.hp-activity-list>div:last-child{border:0}.hp-activity-list span{flex:1}.hp-activity-list time{font-size:9.5px;color:#6b7189;white-space:nowrap}.hp-table-card{background:#fff;border:1px solid #e6e9f2;border-radius:12px;overflow:hidden}.hp-table-head{height:56px;padding:0 16px;display:flex;align-items:center;justify-content:space-between}.hp-tabs{display:flex;background:#f3f5fa;padding:3px;border-radius:9px}.hp-tabs button,.hp-table-head>div:last-child button{border:0;background:transparent;border-radius:7px;padding:7px 13px;font:600 11px Inter;color:#6b7189}.hp-tabs button.active{background:#fff;color:#171a2b;box-shadow:0 1px 2px rgba(20,25,50,.08)}.hp-table-head>div:last-child{display:flex;gap:8px}.hp-table-head .hp-filter{border:1px solid #e6e9f2;background:#fff;color:#171a2b}.hp-table-head .hp-add{background:#131a33;color:#fff}.hp-table-scroll{overflow-x:auto}.hp-table-card table{width:100%;border-collapse:collapse;table-layout:fixed}.hp-table-card th{background:#fafbfd;text-align:left;font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:#6b7189;padding:7px 16px;border-block:1px solid #e6e9f2}.hp-table-card td{height:48px;padding:7px 16px;border-bottom:1px solid #e6e9f2;font-size:10.5px;color:#596078}.hp-employee{display:flex;align-items:center;gap:9px}.hp-employee>i{width:30px;height:30px;border-radius:7px;display:grid;place-items:center;font-style:normal;font-size:9.5px;font-weight:700;color:#fff}.hp-employee i.violet{background:#5b4fd6}.hp-employee i.amber{background:#c9820a}.hp-employee i.teal{background:#0e7c74}.hp-employee i.coral{background:#c8493f}.hp-employee i.navy{background:#2a3564}.hp-employee>span{display:flex;flex-direction:column}.hp-employee b{font-size:11.5px;color:#171a2b}.hp-employee small{font-size:9px;color:#6b7189}.hp-status{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:20px;font-size:10px;font-weight:700}.hp-status i{width:5px;height:5px;border-radius:50%}.hp-status.present{background:#e3f4f1;color:#0e7c74}.hp-status.present i{background:#0e7c74}.hp-status.leave{background:#fbf0dd;color:#c9820a}.hp-status.leave i{background:#c9820a}.hp-status.absent{background:#fbe9e7;color:#c8493f}.hp-status.absent i{background:#c8493f}.hp-table-card footer{height:43px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#6b7189}.hp-table-card footer div{display:flex;gap:4px}.hp-table-card footer button{width:25px;height:25px;border:1px solid #e6e9f2;border-radius:7px;background:#fff;font-size:10px}.hp-table-card footer button.active{background:#131a33;color:#fff;border-color:#131a33}.hp-backdrop{display:none}
@media(max-width:900px){.hp-sidebar{transform:translateX(-100%);transition:.2s}.sidebar-open .hp-sidebar{transform:none}.hp-brand button{display:block}.hp-main{margin-left:0;width:100%}.hp-menu-toggle{display:block;border:0;background:none;font-size:18px}.hp-topbar{padding:0 14px;gap:12px}.hp-page-title{min-width:0}.hp-search{display:none}.hp-top-actions{margin-left:auto}.sidebar-open .hp-backdrop{display:block;position:fixed;inset:0;background:rgba(10,15,35,.5);z-index:40}.hp-kpi-row{grid-template-columns:1fr 1fr}.hp-summary-row{grid-template-columns:1fr}.hp-table-card table{min-width:820px}}

/* Roster and attendance */
.hp-work-card{background:#fff;border:1px solid #e6e9f2;border-radius:12px;margin-bottom:14px;overflow:hidden}.hp-section-heading{min-height:64px;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #edf0f5}.hp-section-heading h2{font:700 15px Sora;margin:0;color:#171a2b}.hp-section-heading p{font-size:10.5px;color:#73798e;margin:3px 0 0}.hp-primary-link,.hp-table-link{color:#0e7c74;text-decoration:none;font-weight:700;font-size:11px}.hp-roster-form{padding:16px 18px;display:grid;grid-template-columns:2fr 1fr repeat(5,1fr);gap:12px;align-items:start}.hp-roster-form label,.hp-attendance-filters label{font-size:10px;font-weight:700;color:#4e556d;display:flex;flex-direction:column;gap:5px}.hp-roster-form input,.hp-roster-form select,.hp-attendance-filters input{height:36px;border:1px solid #dfe3ec;border-radius:7px;padding:0 10px;font:500 11px Inter;background:#fff}.hp-roster-form label span{color:#c8493f;font-size:9px;font-weight:500}.hp-roster-comment{grid-column:1/4}.hp-form-actions{grid-column:4/-1;display:flex;justify-content:flex-end;align-items:end;gap:8px;height:55px}.hp-form-actions button,.hp-attendance-filters button{border:0;border-radius:7px;background:#131a33;color:#fff;padding:10px 16px;font:700 10.5px Inter}.hp-form-actions a,.hp-attendance-filters a{color:#60677c;text-decoration:none;font-size:10.5px;padding:10px}.hp-validation-summary{margin:12px 18px 0;border-radius:7px;background:#fbe9e7;color:#a93a31;font-size:10.5px}.hp-validation-summary:empty{display:none}.hp-data-table{overflow-x:auto}.hp-data-table table{width:100%;border-collapse:collapse;min-width:980px}.hp-data-table th{background:#fafbfd;color:#73798e;text-transform:uppercase;letter-spacing:.04em;font-size:9px;padding:9px 13px;border-bottom:1px solid #e6e9f2}.hp-data-table td{padding:10px 13px;border-bottom:1px solid #edf0f5;font-size:10.5px;color:#555d74}.hp-data-table td strong,.hp-data-table td small{display:block}.hp-data-table td strong{color:#1c2033;font-size:11px}.hp-data-table td small{color:#858a9c;font-size:9px;margin-top:2px}.hp-attendance-filters{padding:13px 18px;display:grid;grid-template-columns:180px 180px minmax(220px,1fr) auto auto;gap:10px;align-items:end;border-bottom:1px solid #edf0f5}.hp-alert-success button{float:right;border:0;background:transparent;color:inherit;font-size:16px;line-height:1}.hp-list-footer{padding:12px 18px;font-size:10px;color:#73798e}.hp-empty{text-align:center!important;padding:30px!important;color:#858a9c!important}
@media(max-width:1200px){.hp-roster-form{grid-template-columns:repeat(4,1fr)}.hp-roster-comment{grid-column:1/3}.hp-form-actions{grid-column:3/-1}}@media(max-width:700px){.hp-roster-form,.hp-attendance-filters{grid-template-columns:1fr}.hp-roster-comment,.hp-form-actions{grid-column:auto}.hp-form-actions{height:auto}.hp-section-heading{align-items:flex-start;gap:10px}}

.hp-calendar-card .hp-section-heading{padding-block:12px}.hp-calendar-filters{display:flex;gap:10px;align-items:end}.hp-calendar-filters label{font-size:9px;font-weight:700;color:#697087;display:flex;flex-direction:column;gap:4px}.hp-calendar-filters select,.hp-calendar-filters input{height:34px;border:1px solid #dfe3ec;border-radius:7px;background:#fff;padding:0 9px;font:500 10.5px Inter}.hp-roster-help{margin:14px 16px 10px;padding:12px 14px;border-radius:8px;background:#e8f1ff;color:#315dbc;display:flex;gap:9px;font-size:11px}.hp-roster-legend{margin:0 16px 14px;padding:10px 12px;border:1px solid #edf0f5;border-radius:8px;display:flex;align-items:center;gap:22px;color:#536078;font-size:10.5px}.hp-roster-legend span{display:flex;align-items:center;gap:7px}.hp-roster-legend i{width:20px;height:20px;border:1px solid #dfe3ec;border-radius:4px;background:#fff}.hp-roster-legend i.off{background:#fee2e2;border-color:#fecaca}.hp-calendar-scroll{overflow:auto;margin:0 16px 16px;border:1px solid #e1e5ed;border-radius:9px}.hp-roster-calendar{width:100%;border-collapse:collapse;min-width:900px}.hp-roster-calendar th{height:42px;padding:8px 12px;background:#fafbfd;border-right:1px solid #e1e5ed;border-bottom:1px solid #e1e5ed;color:#29445e;font-size:10.5px;text-align:center}.hp-roster-calendar th:first-child,.hp-roster-calendar th:nth-child(2){text-align:left}.hp-roster-calendar th:first-child{width:240px}.hp-roster-calendar th:nth-child(2){width:160px}.hp-roster-calendar td{height:60px;border-right:1px solid #e1e5ed;border-bottom:1px solid #e1e5ed;text-align:center;padding:0}.hp-roster-calendar td:first-child,.hp-roster-calendar td:nth-child(2){padding:9px 12px;text-align:left}.hp-roster-calendar td strong,.hp-roster-calendar td small{display:block}.hp-roster-calendar td strong{font-size:11px;color:#283248}.hp-roster-calendar td small{font-size:9px;color:#7b8295;margin-top:3px}.hp-department-chip{display:inline-block;padding:5px 8px;border-radius:5px;background:#dbeafe;color:#2452ad;font-size:9.5px;font-weight:700}.hp-roster-calendar td.weekly-off{background:#fee2e2}.hp-roster-calendar td form,.hp-roster-calendar td button{width:100%;height:100%;margin:0}.hp-roster-calendar td button{border:0;background:transparent;color:#b42318;font-size:22px;font-weight:800}.hp-roster-calendar td.working-day button:hover{background:#f4f7fb}.hp-roster-calendar td.weekly-off button:hover{background:#fecaca}.hp-roster-calendar td.weekly-off>span{color:#b42318;font-size:22px;font-weight:800}.hp-shift-planner>summary{list-style:none;min-height:60px;padding:13px 18px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}.hp-shift-planner>summary::-webkit-details-marker{display:none}.hp-shift-planner>summary span,.hp-shift-planner>summary strong,.hp-shift-planner>summary small{display:block}.hp-shift-planner>summary strong{font:700 13px Sora}.hp-shift-planner>summary small{font-size:9.5px;color:#7b8295;margin-top:3px}.hp-shift-planner[open]>summary{border-bottom:1px solid #edf0f5}.hp-shift-planner[open]>summary b{transform:rotate(180deg)}
@media(max-width:800px){.hp-calendar-card .hp-section-heading{align-items:flex-start;flex-direction:column}.hp-calendar-filters{width:100%}.hp-calendar-filters label{flex:1}.hp-roster-legend{align-items:flex-start;flex-direction:column;gap:8px}}
.hp-roster-note{display:block;margin-top:3px;color:#8a6a24;font-size:9px;font-weight:600}
.hp-status.extra-working{background:#efedfb;color:#5b4fd6}.hp-status.extra-working i{background:#5b4fd6}
.hp-shortwork-tabs{display:flex;gap:4px;margin-bottom:12px;border-bottom:1px solid #e1e5ed}.hp-shortwork-tabs a{padding:11px 15px;text-decoration:none;color:#406078;font-size:12px;border-radius:7px 7px 0 0}.hp-shortwork-tabs a.active{background:#0e7c74;color:#fff}.hp-shortwork-form{padding:18px;display:grid;grid-template-columns:1fr 1fr 2fr;gap:14px;align-items:start}.hp-shortwork-form label{display:flex;flex-direction:column;gap:5px;font-size:10px;font-weight:700;color:#4e556d}.hp-shortwork-form input,.hp-shortwork-form textarea,.hp-review-actions input{border:1px solid #dfe3ec;border-radius:7px;padding:9px 10px;font:500 10.5px Inter}.hp-shortwork-form input{height:40px}.hp-shortwork-form textarea{resize:vertical;min-height:74px}.hp-shortwork-form label>small{font-size:9px;color:#7b8295;font-weight:500}.hp-shortwork-form label span{font-size:9px;color:#c8493f}.hp-shortwork-form>button,.hp-review-actions button{height:38px;border:0;border-radius:7px;background:#0e7c74;color:#fff;padding:0 14px;font:700 10px Inter;justify-self:start}.hp-shortwork-form>button{grid-column:1/-1}.hp-review-actions{display:flex;gap:5px}.hp-review-actions input{width:110px;height:30px}.hp-review-actions button{height:30px;padding:0 8px}.hp-review-actions button.reject{background:#c8493f}.hp-time-chip{background:#193f59;color:#fff;border-radius:4px;padding:3px 6px;font-size:9px;font-weight:700}.hp-minute-chip{background:#dbeafe;color:#315d9a;border-radius:4px;padding:3px 6px;font-size:9px;font-weight:700}@media(max-width:900px){.hp-shortwork-form{grid-template-columns:1fr 1fr}.hp-shortwork-form .reason{grid-column:1/-1}}
@media(max-width:520px){.hp-content{padding:12px}.hp-kpi-row{grid-template-columns:1fr}.hp-top-actions button{display:none}.hp-table-head{height:auto;padding:10px;gap:8px;align-items:flex-start}.hp-tabs{overflow-x:auto}.hp-tabs button{white-space:nowrap;padding:7px 9px}.hp-filter{display:none}.hp-summary-row{grid-template-columns:1fr}}

/* Branch-scoped employee form */
.hp-form-page{padding-bottom:30px}.hp-alert-success{background:#e3f4f1;border:1px solid #bce6df;color:#0e7c74;border-radius:9px;padding:11px 14px;margin-bottom:12px;font-weight:600}.hp-validation-summary{background:#fbe9e7;color:#a93830;border-radius:9px;margin-bottom:12px;font-size:11px}.hp-validation-summary:not(:empty){padding:10px 14px}.hp-validation-summary ul{margin:0;padding-left:16px}.hp-employee-form{max-width:1500px;margin:auto}.hp-form-card{background:#fff;border:1px solid #e6e9f2;border-radius:12px;margin-bottom:12px;padding:15px 17px}.hp-form-card>header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #edf0f5;padding-bottom:11px;margin-bottom:13px}.hp-form-card h2{font:700 13px Sora;margin:0 0 2px}.hp-form-card header p{font-size:10px;color:#6b7189;margin:0}.hp-form-card header>span{font-size:9px;color:#8b90a5}.hp-form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 16px}.hp-form-grid>label{display:flex;flex-direction:column;gap:5px;font-size:10.5px;font-weight:500;color:#333a51;min-width:0}.hp-form-grid label>span b{color:#c8493f}.hp-form-grid input:not([type=checkbox]),.hp-form-grid select{width:100%;height:36px;border:1px solid #dfe3ec;border-radius:7px;background:#fff;padding:0 10px;color:#242a3e;font:11px Inter;outline:none}.hp-form-grid select[multiple]{height:90px;padding:5px}.hp-form-grid input:focus,.hp-form-grid select:focus{border-color:#5b4fd6;box-shadow:0 0 0 2px rgba(91,79,214,.09)}.hp-form-grid input:disabled{background:#f4f5f8;color:#9197a8}.hp-form-grid .hp-file{padding:6px!important}.hp-form-grid label>small{font-size:8.5px;color:#737b91}.hp-form-grid label>small.field-validation-error{color:#c8493f}.span-2{grid-column:span 2}.hp-check-field{justify-content:center;flex-direction:row!important;align-items:center;align-self:end;height:36px;background:#f7f8fb;border-radius:7px}.hp-check-field input,.hp-inline-check input{accent-color:#0e7c74}.hp-inline-check{font-size:10px;color:#596078;display:flex;gap:6px;align-items:center}.hp-toggle-field{justify-content:center}.hp-toggle-field>input{width:1px;height:1px;opacity:0;position:absolute}.hp-toggle-field>i{width:34px;height:19px;border-radius:15px;background:#d8dce6;position:relative;transition:.2s}.hp-toggle-field>i:after{content:"";position:absolute;width:15px;height:15px;left:2px;top:2px;border-radius:50%;background:#fff;transition:.2s}.hp-toggle-field>input:checked+i{background:#0e7c74}.hp-toggle-field>input:checked+i:after{transform:translateX(15px)}.hp-password-choice{display:flex;gap:24px;margin-bottom:13px;font-size:11px}.hp-password-choice label{display:flex;gap:7px;align-items:center}.hp-password-choice input{accent-color:#0e7c74}.hp-relative-picker[hidden],.hp-form-grid[hidden]{display:none}.hp-form-actions{display:flex;justify-content:flex-end;gap:9px;position:sticky;bottom:0;background:rgba(243,245,250,.94);padding:10px 0}.hp-form-actions a,.hp-form-actions button{height:37px;border-radius:8px;padding:0 18px;display:flex;align-items:center;text-decoration:none;font:600 11px Inter}.hp-form-actions a{border:1px solid #dfe3ec;background:#fff;color:#596078}.hp-form-actions button{border:0;background:#131a33;color:#fff}.uppercase{text-transform:uppercase}
@media(max-width:1200px){.hp-form-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:800px){.hp-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.span-2{grid-column:span 2}}
@media(max-width:520px){.hp-form-grid{grid-template-columns:1fr}.span-2{grid-column:span 1}.hp-form-card{padding:13px}.hp-form-card>header{align-items:flex-start;gap:8px}.hp-inline-check{white-space:nowrap}.hp-password-choice{flex-direction:column;gap:9px}}

/* Employee directory and immutable profile */
.hp-directory-card{background:#fff;border:1px solid #e6e9f2;border-radius:12px;overflow:hidden}.hp-directory-filters{padding:14px 16px;display:grid;grid-template-columns:220px 220px 1fr auto auto;align-items:end;gap:12px;border-bottom:1px solid #e6e9f2}.hp-directory-filters label{display:flex;flex-direction:column;gap:5px;font-size:10px;color:#596078}.hp-directory-filters select,.hp-directory-filters input{height:35px;border:1px solid #dfe3ec;border-radius:7px;padding:0 9px;font:10.5px Inter;background:#fff}.hp-directory-filters button,.hp-directory-filters>a{height:35px;border:0;border-radius:7px;padding:0 13px;background:#131a33;color:#fff;font:600 10.5px Inter;display:flex;align-items:center;text-decoration:none}.hp-directory-filters>a{background:#0e7c74}.hp-directory-table{overflow-x:auto}.hp-directory-table table{width:100%;border-collapse:collapse;min-width:1050px}.hp-directory-table th{background:#2a3564;color:#fff;text-align:left;font-size:9px;text-transform:uppercase;letter-spacing:.04em;padding:9px 12px}.hp-directory-table td{padding:8px 12px;border-bottom:1px solid #e6e9f2;font-size:10px;color:#4f586f}.hp-directory-table tbody tr:nth-child(even){background:#fafbfd}.hp-directory-table .hp-employee img,.hp-profile-avatar img{width:30px;height:30px;border-radius:7px;object-fit:cover}.hp-row-actions{display:flex;gap:5px}.hp-row-actions a{padding:5px 9px;border-radius:6px;background:#efedfb;color:#5b4fd6;text-decoration:none;font-size:9px;font-weight:700}.hp-row-actions a.edit{background:#e3f4f1;color:#0e7c74}.hp-empty{text-align:center!important;padding:28px!important}.hp-list-footer{height:43px;display:flex;align-items:center;padding:0 15px;font-size:10px;color:#6b7189}.hp-profile-page{max-width:1450px;width:100%;margin:auto}.hp-profile-hero{background:#fff;border:1px solid #e6e9f2;border-radius:12px;padding:20px;display:flex;align-items:center;gap:16px;margin-bottom:12px}.hp-profile-avatar{width:72px;height:72px;border-radius:14px;background:#e3f4f1;color:#0e7c74;display:grid;place-items:center;overflow:hidden;flex:none}.hp-profile-avatar img{width:100%;height:100%;border-radius:0}.hp-profile-avatar span{font:700 28px Sora}.hp-profile-hero>div:nth-child(2){flex:1}.hp-profile-hero h1{font:700 20px Sora;margin:6px 0 3px}.hp-profile-hero p{font-size:11px;color:#6b7189;margin:0 0 2px}.hp-profile-hero small{font-size:9px;color:#8c92a5}.hp-profile-actions{display:flex;gap:8px}.hp-profile-actions a{border:1px solid #dfe3ec;border-radius:7px;padding:9px 12px;color:#4f586f;text-decoration:none;font-size:10px;font-weight:600}.hp-profile-actions a.primary{background:#131a33;color:#fff;border-color:#131a33}.hp-profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.hp-detail-card,.hp-journey{background:#fff;border:1px solid #e6e9f2;border-radius:12px;padding:16px}.hp-detail-card h2,.hp-journey h2{font:700 12.5px Sora;margin:0 0 13px}.hp-detail-card dl{display:grid;grid-template-columns:130px 1fr;margin:0;gap:9px 14px}.hp-detail-card dt{font-size:9.5px;color:#858ca0;font-weight:500}.hp-detail-card dd{font-size:10.5px;color:#292f43;margin:0}.hp-detail-card dl.wide{grid-template-columns:110px 1fr}.hp-journey{margin-top:12px}.hp-journey header{border-bottom:1px solid #e6e9f2;padding-bottom:11px}.hp-journey header h2{margin-bottom:2px}.hp-journey header p{font-size:9.5px;color:#6b7189;margin:0}.hp-timeline{padding:12px 3px 0}.hp-timeline article{display:flex;gap:12px;position:relative;padding-bottom:14px}.hp-timeline article>i{width:9px;height:9px;background:#0e7c74;border:2px solid #d8f1ed;border-radius:50%;margin-top:3px}.hp-timeline article>div{display:flex;flex-direction:column}.hp-timeline strong{font-size:10.5px}.hp-timeline span{font-size:9px;color:#6b7189;margin-top:2px}.hp-timeline details{margin-top:5px}.hp-timeline summary{font-size:9px;color:#5b4fd6;cursor:pointer}.hp-timeline pre{max-width:900px;white-space:pre-wrap;font:8.5px Inter;background:#f5f6fa;padding:8px;border-radius:6px}.warning-sound{border:1px solid #f0c2c6;background:#fff5f5;color:#b43f49;border-radius:7px;padding:7px 10px;margin-bottom:12px}
@media(max-width:1000px){.hp-directory-filters{grid-template-columns:1fr 1fr}.hp-profile-grid{grid-template-columns:1fr}}
@media(max-width:600px){.hp-directory-filters{grid-template-columns:1fr}.hp-profile-hero{align-items:flex-start;flex-wrap:wrap}.hp-profile-actions{width:100%;flex-wrap:wrap}.hp-detail-card dl{grid-template-columns:1fr}.hp-detail-card dt{margin-top:4px}}
.hp-form-grid label.is-required>span:after{content:" *";color:#c8493f}
.hp-alert-success,.hp-validation-summary{position:relative}.hp-alert-success>[data-dismiss],.hp-validation-summary>[data-dismiss]{position:absolute;right:8px;top:7px;border:0;background:transparent;color:inherit;font-size:17px;line-height:1}.hp-validation-summary{padding-right:35px!important}
.hp-resignation-form{padding:18px;display:grid;grid-template-columns:1fr 2fr;gap:14px}.hp-resignation-form>label{display:flex;flex-direction:column;gap:5px;font-size:10px;font-weight:700;color:#4e556d}.hp-resignation-form input[type=date],.hp-resignation-form textarea,.hp-exit-action input,.hp-exit-action textarea{border:1px solid #dfe3ec;border-radius:7px;padding:9px 10px;font:500 10.5px Inter}.hp-resignation-form .wide{grid-column:1/-1}.hp-policy-checks{background:#f8fafc;border:1px solid #e6e9f2;border-radius:8px;padding:13px;display:grid;gap:8px;font-size:10px;color:#4e556d}.hp-policy-checks label{display:flex;gap:7px;align-items:flex-start}.hp-policy-checks input{accent-color:#0e7c74}.hp-policy-checks span{color:#c8493f;font-size:9px}.hp-resignation-list{padding:14px}.hp-resignation-item{border:1px solid #e6e9f2;border-radius:10px;margin-bottom:12px;overflow:hidden}.hp-resignation-item>header{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:#fafbfd;border-bottom:1px solid #edf0f5}.hp-resignation-item header strong,.hp-resignation-item header small{display:block}.hp-resignation-item header strong{font-size:12px}.hp-resignation-item header small{font-size:9px;color:#7b8295;margin-top:2px}.hp-exit-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:12px 14px}.hp-exit-facts span{border-right:1px solid #edf0f5}.hp-exit-facts small,.hp-exit-facts b{display:block}.hp-exit-facts small{font-size:8.5px;color:#858ca0}.hp-exit-facts b{font-size:10.5px;margin-top:3px}.hp-exit-reason{padding:0 14px;font-size:10px;color:#596078}.hp-exit-action{border-top:1px solid #edf0f5;padding:12px 14px;display:flex;gap:8px;align-items:end}.hp-exit-action textarea{min-height:55px;flex:1}.hp-exit-action button,.hp-withdraw button{border:0;border-radius:6px;background:#0e7c74;color:#fff;padding:9px 12px;font:700 9.5px Inter}.hp-exit-action button.reject,.hp-withdraw button{background:#c8493f}.hp-review-grid{display:grid;grid-template-columns:1fr .6fr 1fr 1.5fr auto auto}.hp-review-grid label{font-size:9px;color:#596078;display:flex;flex-direction:column;gap:4px}.hp-clearance{display:grid;grid-template-columns:repeat(4,1fr) 1.5fr auto;font-size:9.5px}.hp-clearance label{display:flex;gap:5px;align-items:center}.hp-withdraw{padding:0 14px 12px;text-align:right}@media(max-width:900px){.hp-review-grid,.hp-clearance{grid-template-columns:1fr 1fr}.hp-exit-facts{grid-template-columns:1fr 1fr}}@media(max-width:520px){.hp-resignation-form,.hp-exit-facts,.hp-review-grid,.hp-clearance{grid-template-columns:1fr}.hp-resignation-form .wide{grid-column:auto}}
.hp-master-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:12px}.hp-series-row{display:grid;grid-template-columns:1.2fr .7fr .6fr .7fr .85fr auto;gap:9px;align-items:end;padding:10px 0;border-bottom:1px solid #edf0f5}.hp-series-row label{font-size:8px;color:#737b91}.hp-series-row input,.hp-add-master input{display:block;width:100%;height:32px;border:1px solid #dfe3ec;border-radius:6px;padding:0 8px;font:10px Inter;margin-top:3px}.hp-series-row code{height:32px;display:flex;align-items:center;background:#f3f5fa;padding:0 8px;border-radius:6px;font-size:9px}.hp-series-row button,.hp-add-master button,.hp-master-list button{height:32px;border:0;border-radius:6px;background:#131a33;color:#fff;font-size:9px;padding:0 10px}.hp-add-master{display:flex;gap:8px;margin-bottom:10px}.hp-master-list{max-height:480px;overflow:auto}.hp-master-list>div{display:flex;align-items:center;gap:8px;padding:8px;border-bottom:1px solid #edf0f5;font-size:10px}.hp-master-list>div>span{flex:1}.hp-master-list em{font-style:normal;font-size:8px;border-radius:20px;padding:3px 7px}.hp-master-list em.active{background:#e3f4f1;color:#0e7c74}.hp-master-list em.inactive{background:#fbe9e7;color:#c8493f}.hp-detail-tabs{margin-top:12px;display:flex;flex-direction:column;gap:7px}.hp-detail-tabs>details{background:#fff;border:1px solid #e6e9f2;border-radius:10px;overflow:hidden}.hp-detail-tabs>details>summary{height:48px;padding:0 15px;display:flex;align-items:center;gap:12px;font:600 11px Sora;cursor:pointer;list-style:none}.hp-detail-tabs>details>summary::-webkit-details-marker{display:none}.hp-detail-tabs>details>summary span{font:400 9px Inter;color:#858ca0;flex:1}.hp-detail-tabs>details>summary em{font:600 8px Inter;background:#fbf0dd;color:#c9820a;border-radius:20px;padding:4px 8px}.hp-tab-body{border-top:1px solid #edf0f5;padding:14px}.hp-data-row{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:12px}.hp-data-row span{display:flex;flex-direction:column;background:#f7f8fb;border-radius:7px;padding:9px}.hp-data-row small{font-size:8px;color:#858ca0}.hp-data-row b{font-size:10px;margin-top:3px}.hp-inline-form{display:grid;grid-template-columns:repeat(6,1fr) auto;gap:8px;align-items:center;padding-top:10px;border-top:1px dashed #dfe3ec}.hp-inline-form input,.hp-inline-form select{height:33px;border:1px solid #dfe3ec;border-radius:6px;padding:0 8px;font:9.5px Inter;min-width:0}.hp-inline-form label{font-size:9px;white-space:nowrap}.hp-inline-form button{height:33px;border:0;border-radius:6px;background:#131a33;color:#fff;font-size:9px;padding:0 11px}.hp-no-data{font-size:9.5px;color:#858ca0;margin:5px 0 12px}.hp-under-process{display:flex;align-items:center;gap:12px;background:#fbf7ed;border-radius:8px;padding:14px}.hp-under-process>i{width:36px;height:36px;border-radius:8px;background:#fbf0dd;color:#c9820a;display:grid;place-items:center;font-style:normal}.hp-under-process b{font-size:10.5px}.hp-under-process p{font-size:9px;color:#858ca0;margin:3px 0 0}.hp-family-list>div{display:flex;padding:8px 0;border-bottom:1px solid #edf0f5}.hp-family-list>div>span{display:flex;flex-direction:column;flex:1}.hp-family-list b{font-size:10px}.hp-family-list small{font-size:8.5px;color:#858ca0}.hp-family-list button{border:0;background:#fbe9e7;color:#c8493f;border-radius:5px;font-size:8px;padding:4px 8px}.hp-leave-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:12px}.hp-leave-grid article{background:#f7f8fb;border-radius:8px;padding:10px;display:flex;flex-direction:column}.hp-leave-grid strong{font-size:10px}.hp-leave-grid span{font-size:9px;color:#0e7c74;margin-top:2px}.hp-leave-grid progress{width:100%;height:6px;margin:8px 0}.hp-leave-grid small{font-size:8px;color:#858ca0}
@media(max-width:1100px){.hp-master-grid{grid-template-columns:1fr}.hp-series-row{grid-template-columns:1fr 1fr 1fr}.hp-data-row{grid-template-columns:repeat(3,1fr)}.hp-inline-form{grid-template-columns:repeat(3,1fr)}.hp-leave-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.hp-series-row,.hp-data-row,.hp-inline-form,.hp-leave-grid{grid-template-columns:1fr}.hp-detail-tabs>details>summary span{display:none}}
.hp-detail-tabs{display:block;background:#fff;border:1px solid #e6e9f2;border-radius:11px;overflow:hidden}.hp-tab-list{height:48px;display:flex;align-items:stretch;border-bottom:1px solid #e6e9f2;background:#fafbfd;padding:0 10px;gap:3px;overflow-x:auto}.hp-tab-list button{position:relative;border:0;background:transparent;padding:0 16px;color:#6b7189;font:600 10px Sora;white-space:nowrap}.hp-tab-list button:after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;background:#0e7c74;transform:scaleX(0);transition:transform .18s}.hp-tab-list button.active{color:#171a2b}.hp-tab-list button.active:after{transform:scaleX(1)}.hp-tab-list button em{font:600 7px Inter;background:#fbf0dd;color:#c9820a;border-radius:20px;padding:3px 6px;margin-left:5px}.hp-tab-panel{animation:hp-tab-in .18s ease}.hp-tab-panel[hidden]{display:none}.hp-tab-panel .hp-tab-body{border-top:0;min-height:100px}@keyframes hp-tab-in{from{opacity:.35;transform:translateY(3px)}to{opacity:1;transform:none}}@media(max-width:600px){.hp-tab-list{padding:0 4px}.hp-tab-list button{padding:0 11px;font-size:9px}.hp-tab-list button em{display:none}}
.hp-edit-warning{margin:14px 18px 0;padding:11px 13px;background:#fff7e6;border:1px solid #f3dfae;border-radius:7px;color:#8a641f;font-size:10.5px}.hp-attendance-edit-form{padding:18px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.hp-attendance-edit-form label{display:flex;flex-direction:column;gap:5px;font-size:10px;font-weight:700;color:#4e556d}.hp-attendance-edit-form input:not([type=checkbox]),.hp-attendance-edit-form select,.hp-attendance-edit-form textarea{border:1px solid #dfe3ec;border-radius:7px;padding:9px 10px;font:500 10.5px Inter}.hp-attendance-edit-form input:not([type=checkbox]),.hp-attendance-edit-form select{height:39px}.hp-attendance-edit-form textarea{resize:vertical}.hp-attendance-edit-form label span{font-size:9px;color:#c8493f}.hp-attendance-edit-form .wide{grid-column:span 2}.hp-attendance-edit-form .claim{justify-content:center;flex-direction:row;align-items:center}.hp-attendance-edit-form .required-reason textarea{border-color:#e6b6b1;background:#fffafa}.hp-attendance-edit-form .hp-form-actions{grid-column:1/-1;height:auto}@media(max-width:800px){.hp-attendance-edit-form{grid-template-columns:1fr 1fr}.hp-attendance-edit-form .wide{grid-column:1/-1}}
.hp-attendance-context{margin:14px 18px 0;padding:12px;background:#f8fafc;border:1px solid #e5e9f1;border-radius:8px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.hp-attendance-context span,.hp-attendance-context small,.hp-attendance-context strong{display:block}.hp-attendance-context small{font-size:9px;color:#7b8295}.hp-attendance-context strong{font-size:10.5px;margin-top:3px;color:#293247}@media(max-width:800px){.hp-attendance-context{grid-template-columns:1fr 1fr}}
.hp-adjusted-hours{color:#0e7c74;font-variant-numeric:tabular-nums;font-size:10.5px}
.hp-attendance-pagination{min-height:50px;padding:9px 16px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;border-top:1px solid #e6e9f2;font-size:10px;color:#73798e}.hp-attendance-pagination form{display:flex}.hp-attendance-pagination label{display:flex;align-items:center;gap:7px}.hp-attendance-pagination select{height:30px;border:1px solid #dfe3ec;border-radius:6px;background:#fff;padding:0 7px;font-size:10px}.hp-attendance-pagination nav{justify-self:end;display:flex;align-items:center;gap:8px}.hp-attendance-pagination nav a{padding:7px 10px;border:1px solid #dfe3ec;border-radius:6px;text-decoration:none;color:#0e7c74;font-weight:700}.hp-attendance-pagination nav a.disabled{pointer-events:none;color:#adb2c0;background:#f7f8fa}.hp-attendance-pagination nav b{font-weight:600;color:#596078}@media(max-width:700px){.hp-attendance-pagination{grid-template-columns:1fr;justify-items:start}.hp-attendance-pagination nav{justify-self:start}}
.hp-attendance-actions{display:flex;align-items:center;gap:7px}.hp-claim-link{padding:5px 8px;border-radius:5px;background:#131a33;color:#fff;text-decoration:none;font-size:9px;font-weight:700}.hp-claim-state{font-size:9px;color:#8a641f;font-weight:700}.hp-claim-info{margin:14px 18px 0;padding:13px;background:#f8fafc;border:1px solid #e5e9f1;border-radius:8px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.hp-claim-info small,.hp-claim-info strong{display:block}.hp-claim-info small{font-size:9px;color:#7b8295}.hp-claim-info strong{font-size:11px;margin-top:3px}.hp-claim-form{padding:18px;display:grid;grid-template-columns:1fr 1fr;gap:14px}.hp-claim-form label{display:flex;flex-direction:column;gap:5px;font-size:10px;font-weight:700;color:#4e556d}.hp-claim-form input,.hp-claim-form textarea{border:1px solid #dfe3ec;border-radius:7px;padding:9px 10px;font:500 10.5px Inter}.hp-claim-form input{height:39px}.hp-claim-form textarea{resize:vertical}.hp-claim-form label span{font-size:9px;color:#c8493f}.hp-claim-form .wide,.hp-claim-form .hp-form-actions{grid-column:1/-1}

/* VPeople Figma layout adaptation */
:root{--vp-navy:#0d172d;--vp-blue:#1768c5;--vp-canvas:#f4f5f7;--vp-border:#e3e5e9;--vp-text:#10182d}.hp-shell{background:var(--vp-canvas)}.vp-sidebar{width:248px;background:var(--vp-navy);border:0;color:#fff}.hp-main{margin-left:248px}.vp-brand{height:72px;padding:0 15px;gap:9px;border:0;background:#111b31}.vp-brand>span:not(.vp-logo-mark),.vp-brand small{display:none}.vp-brand strong{font:700 13px Sora;color:#f0b823}.vp-brand strong b{color:#fff}.vp-logo-mark{width:29px;height:29px;border:2px solid #c79511;border-radius:50%;display:grid;place-items:center;color:#4eb3b0;font:800 14px Sora}.vp-hamburger{display:block!important;border:0!important;background:transparent!important;color:#fff!important;font-size:15px!important;margin:0 3px 0 0!important}.vp-nav{padding:72px 0 12px}.vp-nav>.hp-nav-item,.vp-nav>details>summary{height:52px;border-radius:0;padding:0 16px;color:#f4f6fb;font:500 12px Sora;gap:13px}.vp-nav>.hp-nav-item.active{background:#164d92;color:#fff}.vp-nav details{margin:0}.vp-nav details>summary{justify-content:space-between}.vp-nav details>summary>span{display:flex;align-items:center;gap:13px}.vp-nav .hp-icon{width:19px;font-size:15px;color:#dce5f5}.vp-nav .hp-subnav{padding:3px 0 7px 48px;background:rgba(0,0,0,.12)}.vp-nav .hp-subnav a{min-height:31px;color:#aeb8ca;font-size:10px}.vp-user{background:#111b31;border-color:rgba(255,255,255,.08);padding:13px 15px}.vp-user strong{color:#fff}.vp-topbar{height:72px;background:#fff;border-bottom:1px solid #e9ebef;padding:0 16px 0 14px}.vp-welcome{display:flex;flex-direction:column}.vp-welcome small{font-size:8px;color:#4d5668}.vp-welcome strong{font:700 17px Sora;color:#11182a;margin-top:2px}.vp-welcome em{font-style:normal;color:#c8cbd2}.vp-top-actions{margin-left:auto;display:flex;gap:8px;align-items:center}.vp-top-actions>button{width:40px;height:40px;border:0;border-radius:6px;background:#fff;box-shadow:0 2px 9px rgba(16,24,40,.08);position:relative}.vp-top-actions select{height:40px;min-width:90px;border:0;border-radius:6px;background:#fff;box-shadow:0 2px 9px rgba(16,24,40,.08);padding:0 11px;font:500 10px Sora}.vp-dashboard{padding:10px;max-width:1700px;margin:auto}.vp-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-bottom:9px}.vp-kpis article{height:88px;background:#fff;border:1px solid var(--vp-border);border-radius:10px;padding:9px 10px;box-shadow:0 3px 8px rgba(16,24,40,.06)}.vp-kpis article>span{display:block;font-size:9px}.vp-kpis article>div{display:flex;align-items:center;gap:8px;margin:4px 0 2px}.vp-kpis article i{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;font-style:normal}.vp-kpis i.blue{background:#e9f2fb;color:#1768c5}.vp-kpis i.purple{background:#f0edff;color:#725bdc}.vp-kpis i.orange{background:#fff0e8;color:#ff8053}.vp-kpis i.green{background:#e9f8ee;color:#31a75b}.vp-kpis i.red{background:#ffedef;color:#f25562}.vp-kpis strong{font:500 20px Sora}.vp-kpis small,.vp-kpis a{display:block;margin-left:40px;font-size:6.5px;text-decoration:none}.vp-kpis .positive{color:#138b43}.vp-kpis .negative{color:#e34e4e}.vp-kpis article>a{color:#1768c5}.vp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.vp-widget{background:#fff;border:1px solid var(--vp-border);border-radius:8px;min-height:188px;padding:9px 11px;box-shadow:0 2px 6px rgba(16,24,40,.05);overflow:hidden}.vp-widget>header{height:28px;display:flex;align-items:flex-start;border-bottom:1px solid #d9dde3}.vp-widget h2{font:700 10px Sora;margin:0}.vp-widget header button,.vp-widget header a{margin-left:auto;border:0;background:#edf3f9;color:#26344b;border-radius:4px;padding:4px 7px;font:500 7px Sora;text-decoration:none}.vp-headcount{height:140px;display:flex;align-items:center;justify-content:center;gap:25px}.vp-donut{width:91px;height:91px;border-radius:50%;background:conic-gradient(#1768c5 0 68%,#37a6b6 68% 83%,#ff8a23 83% 91%,#10bce8 91% 96%,#7c55e7 96%);position:relative}.vp-donut:after{content:"";position:absolute;inset:15px;border-radius:50%;background:#fff}.vp-donut span{position:absolute;inset:0;z-index:1;display:grid;place-content:center;text-align:center}.vp-donut strong{font:700 15px Sora}.vp-donut small{font-size:7px}.vp-donut.attendance{background:conic-gradient(#1768c5 0 70%,#ff8a23 70% 87%,#37a6b6 87%)}.vp-headcount ul{list-style:none;padding:0;margin:0;width:54%}.vp-headcount li{display:flex;align-items:center;gap:6px;font-size:7.5px;margin:7px 0}.vp-headcount li>i{width:6px;height:6px;border-radius:50%}.vp-headcount li b{margin-left:auto;font-weight:500}.c1{background:#1768c5}.c2{background:#37a6b6}.c3{background:#ff8a23}.c4{background:#10bce8}.c5{background:#7c55e7}.vp-bars{padding:7px 0}.vp-bars>div{display:grid;grid-template-columns:85px 1fr 24px;align-items:center;gap:5px;margin:7px 0;font-size:7.5px}.vp-bars>div>i{height:6px;background:#eef0f4;border-radius:8px;overflow:hidden}.vp-bars>div>i b{display:block;height:100%;background:#1768c5;border-radius:8px}.vp-bars>div:nth-child(2) i b{background:#37a6b6}.vp-bars>div:nth-child(3) i b{background:#10bce8}.vp-bars>div:nth-child(4) i b{background:#7c55e7}.vp-bars>div:nth-child(5) i b{background:#4f76e8}.vp-bars>div:nth-child(6) i b{background:#20aa4d}.vp-bars strong{font-size:7px}.vp-approval-list,.vp-person-list{padding-top:4px}.vp-approval-list>div,.vp-person-list>div{display:flex;align-items:center;gap:6px;padding:4px 0}.vp-approval-list>div>i,.vp-person-list>div>i{width:28px;height:28px;border-radius:5px;background:#1768c5;color:#fff;display:grid;place-items:center;font:700 9px Sora;font-style:normal}.vp-approval-list span,.vp-person-list span{flex:1}.vp-approval-list b,.vp-approval-list small,.vp-person-list b,.vp-person-list small{display:block}.vp-approval-list b,.vp-person-list b{font-size:8px}.vp-approval-list small,.vp-person-list small{font-size:6.5px;color:#646d7d}.vp-approval-list button{width:22px;height:22px;border:0;border-radius:4px}.vp-approval-list .yes{background:#dff4e5;color:#159447}.vp-approval-list .no{background:#ffe7e9;color:#ef4c59}.vp-person-list em{font:500 7px Sora;color:#667085}.vp-recruit-stats{display:grid;grid-template-columns:repeat(4,1fr);padding:8px 0}.vp-recruit-stats span{text-align:center}.vp-recruit-stats b,.vp-recruit-stats small{display:block}.vp-recruit-stats b{font:500 11px Sora}.vp-recruit-stats small{font-size:6px}.vp-mini-chart{display:flex;align-items:center;gap:20px;padding:6px}.vp-mini-chart>i{width:76px;height:76px;border:14px solid #1768c5;border-right-color:#37a6b6;border-bottom-color:#ff8a23;border-radius:50%}.vp-mini-chart b,.vp-mini-chart small{display:block}.vp-mini-chart b{font-size:8px}.vp-mini-chart small{font-size:6.5px;color:#667085}.vp-timeline-card>b{font-size:7px}.vp-timeline-card>span{display:inline-block;width:80%;border-top:1px solid #84ace0;margin-left:10px}.vp-timeline-card>div{background:#eef2fa;border-radius:5px;padding:7px;margin-top:8px}.vp-timeline-card strong,.vp-timeline-card small{display:block;font-size:7px}.vp-timeline-card small{font-size:6px}.vp-positions>div{display:flex;align-items:center;gap:7px;padding:5px 0}.vp-positions time{width:38px;height:38px;background:#1768c5;color:#fff;border-radius:5px;display:grid;place-content:center;text-align:center;font:700 9px Sora}.vp-positions time small{display:block;font-size:6px}.vp-positions span{flex:1}.vp-positions b,.vp-positions small{display:block}.vp-positions b{font-size:8px}.vp-positions small{font-size:6.5px;color:#667085}.vp-positions a{text-decoration:none;background:#edf3ff;border-radius:5px;padding:6px;color:#1768c5}.vp-quick{display:grid;grid-template-columns:1fr 1fr;gap:9px 7px;padding-top:7px}.vp-quick a{display:flex;align-items:center;gap:7px;color:#11182a;text-decoration:none;font-size:8px;padding:4px;border-radius:5px}.vp-quick a:first-child{background:#eef2fa}.vp-quick i{width:24px;height:24px;border:1px solid #a8c7f2;border-radius:5px;display:grid;place-items:center;color:#1768c5;font-style:normal}.vp-widget p{font-size:8px;color:#667085}@media(max-width:1200px){.vp-kpis{grid-template-columns:repeat(3,1fr)}.vp-grid{grid-template-columns:1fr 1fr}}@media(max-width:800px){.vp-sidebar{width:248px}.hp-main{margin-left:0}.vp-grid{grid-template-columns:1fr}.vp-kpis{grid-template-columns:1fr 1fr}.vp-welcome em{display:none}}@media(max-width:500px){.vp-kpis{grid-template-columns:1fr}.vp-top-actions select{display:none}}
.hp-attendance-export-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.hp-attendance-export-actions>a{display:inline-flex;align-items:center;min-height:36px;padding:7px 12px;border:1px solid #cfd8e6;border-radius:8px;background:#fff;color:#33415c;text-decoration:none;font-size:12px;font-weight:700}.hp-attendance-export-actions>a.advanced{border-color:#117f76;background:#117f76;color:#fff}@media(max-width:700px){.hp-attendance-export-actions{width:100%}.hp-attendance-export-actions>a{flex:1;justify-content:center}}