/* ── Where breakpoint rules live ───────────────────────────────────────────
   Beside the component they modify, in this file. A separate responsive.css
   existed for a while as a staging area for a migration that never happened;
   it shipped as an empty request on every page load and was removed on
   2026-08-26. Keeping a media query next to the rules it overrides is what
   makes the cascade order obvious, so put new ones there rather than
   reviving a separate layer. */

/* Palette lives in base.css. Only layout dimensions are defined here. */
:root{--side:260px;--rail:76px;--head:72px}
html,body{min-height:100%;background:var(--page)}body.drawer-locked{overflow:hidden}.app.hidden{display:none!important}button,input,select,textarea{font:inherit}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(33,132,98,.24);outline-offset:2px}
.app{display:grid!important;grid-template-columns:var(--side) minmax(0,1fr);min-height:100vh;background:var(--page);transition:grid-template-columns .22s}.sidebar{position:fixed!important;inset:0 auto 0 0!important;width:var(--side)!important;height:100vh!important;z-index:80;overflow:hidden!important;display:flex;flex-direction:column;background:var(--navy)!important;box-shadow:none!important;transition:width .22s,transform .22s}.logo{height:72px;padding:0 18px!important;display:flex;flex-direction:column;justify-content:center;border-bottom:1px solid rgba(255,255,255,.1)!important;position:relative}.logo h2{font-size:18px!important}.logo p{color:#9FB3A9!important}.sidebar-toggle{position:absolute;right:12px;top:18px;width:36px;height:36px;border:0;border-radius:7px;color:#C3D4CB;background:transparent;cursor:pointer;display:grid;place-items:center}.sidebar-toggle:hover{background:rgba(255,255,255,.1);color:#fff}
#admin-nav,#emp-nav{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:8px 0 14px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}.nav-section{padding:16px 20px 6px!important;color:#93A9A0!important;font-size:11px!important;line-height:1;white-space:nowrap}.nav-item{position:relative;min-height:44px;margin:2px 10px!important;padding:0 12px!important;border:0!important;border-radius:7px!important;gap:12px!important;color:#D3E0D9!important;background:transparent!important;white-space:nowrap;transition:.16s!important}.nav-item:hover{background:rgba(255,255,255,.08)!important;color:#fff!important}.nav-item.active{background:var(--blue)!important;color:#fff!important;box-shadow:0 4px 12px rgba(0,0,0,.16)!important}.nav-icon{width:20px!important;height:20px!important;font-size:0!important;flex:0 0 20px}.nav-icon svg,.shell-icon{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}.nav-label{overflow:hidden;text-overflow:ellipsis}.nav-tooltip{display:none}.nav-parent .nav-label:after{content:"⌄";position:absolute;right:13px;color:#93A9A0}.nav-parent.submenu-open .nav-label:after{transform:rotate(180deg)}.submenu-item{min-height:38px;padding-left:44px!important;font-size:11.5px!important;color:#BCCCC4!important;max-height:0;opacity:0;margin-block:0!important;overflow:hidden;transition:.2s}.submenu-item.submenu-visible{max-height:42px;min-height:38px;opacity:1}.sidebar-fixed{border-top:1px solid rgba(255,255,255,.11);padding:8px 0;background:rgba(0,0,0,.08);flex:0 0 auto}.sidebar-fixed .nav-item{width:calc(100% - 20px)}.sb-user{margin-top:0!important;flex:0 0 auto!important;background:rgba(0,0,0,.08)!important;border-color:rgba(255,255,255,.1)!important}
.workspace{grid-column:2;min-width:0;display:flex;flex-direction:column;min-height:100vh}.app-header{height:var(--head);position:sticky;top:0;z-index:50;background:rgba(255,255,255,.98);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:18px;padding:0 28px}.mobile-menu{display:none;width:44px;height:44px;border:0;border-radius:8px;background:transparent;color:var(--ink);cursor:pointer}.header-heading{min-width:180px}.header-title{font-size:18px;font-weight:750;color:var(--ink);letter-spacing:-.25px}.breadcrumbs{font-size:11px;color:#5e746c;margin-top:3px}.breadcrumbs strong{color:var(--blue);font-weight:600}.global-search{margin-left:auto;position:relative;width:min(340px,30vw)}.global-search .shell-icon{position:absolute;left:12px;top:11px;color:#5B6E64}.global-search input{height:40px;padding:0 38px;border-color:#c7e3d9;border-radius:7px;background:#F7FAF8;font-size:12px}.search-key{position:absolute;right:8px;top:9px;padding:2px 5px;border:1px solid #c5e3d8;border-radius:4px;color:#627a71;font-size:11px}.quick-payroll{height:40px;white-space:nowrap}.header-icon{width:42px;height:42px;border:0;border-radius:8px;background:transparent;color:#476c5e;position:relative;display:grid;place-items:center;cursor:pointer}.header-icon:hover{background:#F1F6F3;color:var(--blue)}.notification-count{position:absolute;right:1px;top:2px;min-width:17px;height:17px;padding:0 3px;border-radius:9px;background:var(--danger);color:#fff;border:2px solid #fff;font-size:11px;font-weight:700;display:grid;place-items:center}.header-profile{display:flex;align-items:center;gap:9px}.header-profile .avatar{width:36px;height:36px}.header-name{font-size:12px;font-weight:700;color:var(--ink)}.header-role{font-size:11px;color:var(--muted);margin-top:2px}.main{padding:24px 28px 36px!important;overflow:visible!important}.main>.page-title,#page-content>.page-title{display:none!important}.mobile-overlay{position:fixed;inset:0;background:rgba(5,21,15,.6);z-index:70;opacity:0;visibility:hidden;transition:.2s}.mobile-overlay.open{opacity:1;visibility:visible}.drawer-close{display:none;position:absolute;right:12px;top:12px;width:36px;height:36px;border:0;border-radius:7px;color:#fff;background:rgba(255,255,255,.08)}.mobile-bottom{display:none}
.app.sidebar-collapsed{grid-template-columns:var(--rail) minmax(0,1fr)}.app.sidebar-collapsed .sidebar{width:var(--rail)!important}.app.sidebar-collapsed .logo h2,.app.sidebar-collapsed .logo p,.app.sidebar-collapsed .nav-section,.app.sidebar-collapsed .nav-label,.app.sidebar-collapsed .user-info{display:none}.app.sidebar-collapsed .logo:before{content:"P";width:34px;height:34px;border-radius:8px;background:#fff;color:var(--navy);display:grid;place-items:center;font-weight:800}.app.sidebar-collapsed .logo{align-items:center;padding:0!important}.app.sidebar-collapsed .sidebar-toggle{top:auto;right:20px;bottom:82px}.app.sidebar-collapsed .nav-item{justify-content:center}.app.sidebar-collapsed .submenu-item{display:none}.app.sidebar-collapsed .sb-user{justify-content:center;padding-inline:8px}.app.sidebar-collapsed .logout-btn{display:none}.app.sidebar-collapsed .nav-item:hover .nav-tooltip{display:block;position:fixed;left:84px;padding:7px 9px;border-radius:5px;background:#16261F;color:#fff;font-size:11px;z-index:120}
.dashboard-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}.dashboard-grid>*{min-width:0}.kpi-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.kpi-card{min-height:108px;padding:17px;background:#fff;border:1px solid var(--line);border-radius:9px;box-shadow:0 1px 3px rgba(19,38,30,.05);display:flex;gap:13px}.kpi-icon{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;flex:0 0 auto}.kpi-icon.blue{background:#218461}.kpi-icon.green{background:#148549}.kpi-icon.orange{background:#ac6214}.kpi-icon.slate{background:#457060}.kpi-label{font-size:11px;color:#5a7a6f;margin-bottom:7px}.kpi-value{font-size:22px;font-weight:750;color:var(--ink);letter-spacing:-.45px}.kpi-trend{font-size:11px;color:var(--success);margin-top:7px}.kpi-trend.warn{color:var(--warning)}
.panel{background:#fff;border:1px solid var(--line);border-radius:9px;box-shadow:0 1px 3px rgba(19,38,30,.05);min-width:0}.panel-head{min-height:54px;padding:0 16px;border-bottom:1px solid #dff0ea;display:flex;align-items:center;justify-content:space-between}.panel-title{font-size:14px;font-weight:700;color:var(--ink)}.panel-subtitle{font-size:11px;color:var(--muted);margin-top:2px}.panel-body{padding:16px}.payroll-chart{grid-column:span 8}.readiness-panel{grid-column:span 4;grid-row:span 2}.attendance-panel{grid-column:span 8}.recent-panel{grid-column:1/-1}.chart-wrap{height:248px;display:flex;flex-direction:column}.chart-legend{display:flex;gap:20px;font-size:11px;color:#5b7a6f;margin-bottom:14px}.legend-line{width:18px;height:2px;background:var(--blue);display:inline-block;margin-right:6px;vertical-align:middle}.legend-line.net{background:transparent;border-top:2px dashed #368268}.line-chart{flex:1;position:relative;border-left:1px solid #cfe8df;border-bottom:1px solid #cfe8df;background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(25% - 1px),#e2f1eb 25%);margin:0 7px 25px 30px}.line-chart svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.chart-labels{position:absolute;left:0;right:0;bottom:-22px;display:flex;justify-content:space-between;font-size:11px;color:#5a746b}.readiness-list{list-style:none}.readiness-row{min-height:47px;display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:8px;border-bottom:1px solid #e9f3ef}.readiness-row:last-child{border:0}.readiness-name{font-size:11px;color:#26493d}.readiness-note{font-size:11px;color:#5e736c;margin-top:2px}.status-dot{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-size:11px;color:#fff;background:var(--success)}.status-dot.warn{background:var(--warning)}.readiness-actions{padding-top:12px;display:grid;gap:8px}.readiness-actions .btn{width:100%}.attendance-content{display:flex;align-items:center;gap:28px}.donut{width:126px;height:126px;border-radius:50%;background:conic-gradient(#128043 0 82%,#f2a238 82% 90%,#c34444 90% 96%,#5e746c 96%);display:grid;place-items:center;flex:0 0 auto;position:relative}.donut:before{content:"";position:absolute;width:78px;height:78px;border-radius:50%;background:#fff}.donut-center{position:relative;text-align:center;color:var(--ink);font-size:17px;font-weight:750}.donut-center small{display:block;font-size:11px;color:#5e766d;font-weight:500}.attendance-legend{display:grid;grid-template-columns:auto auto;gap:12px 25px;font-size:11px;color:#36594c}.legend-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px}.legend-value{font-weight:700;color:var(--ink);margin-left:7px}.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}.panel table{min-width:680px}.panel th{height:42px}.panel td{height:48px}
@media(min-width:768px) and (max-width:1199px){.app{grid-template-columns:var(--rail) minmax(0,1fr)}.sidebar{width:var(--rail)!important}.logo h2,.logo p,.sidebar .nav-section,.sidebar .nav-label,.sidebar .user-info{display:none}.logo:before{content:"P";width:34px;height:34px;border-radius:8px;background:#fff;color:var(--navy);display:grid;place-items:center;font-weight:800}.logo{align-items:center;padding:0!important}.sidebar-toggle{top:auto;right:20px;bottom:82px}.sidebar .nav-item{justify-content:center}.sidebar .submenu-item{display:none}.sidebar .sb-user{justify-content:center;padding-inline:8px}.sidebar .nav-item:hover .nav-tooltip{display:block;position:fixed;left:84px;padding:7px 9px;border-radius:5px;background:#16261F;color:#fff;font-size:11px;z-index:120}.app.tablet-expanded{grid-template-columns:var(--side) minmax(0,1fr)}.app.tablet-expanded .sidebar{width:var(--side)!important}.app.tablet-expanded .logo h2,.app.tablet-expanded .logo p,.app.tablet-expanded .sidebar .nav-section,.app.tablet-expanded .sidebar .nav-label,.app.tablet-expanded .sidebar .user-info{display:block}.app.tablet-expanded .logo:before{display:none}.app.tablet-expanded .logo{align-items:flex-start;padding:0 18px!important}.app.tablet-expanded .sidebar-toggle{top:18px;right:12px;bottom:auto}.app.tablet-expanded .sidebar .nav-item{justify-content:flex-start}.app.tablet-expanded .sidebar .submenu-item{display:flex}.app-header{padding:0 20px}.global-search{width:42px;margin-left:auto}.global-search input,.search-key{display:none}.global-search .shell-icon{left:11px}.header-user-copy{display:none}.main{padding:20px!important}.kpi-grid{grid-template-columns:repeat(2,1fr)}.payroll-chart,.readiness-panel,.attendance-panel{grid-column:1/-1}.readiness-panel{grid-row:auto}}
@media(max-width:767px){:root{--head:60px}.app{display:block!important}.workspace{min-height:100vh}.sidebar{width:min(86vw,326px)!important;transform:translateX(-102%);z-index:90;box-shadow:12px 0 30px rgba(8,24,19,.22)!important}.sidebar.drawer-open{transform:translateX(0)}.logo{height:60px}.drawer-close{display:grid}.sidebar-toggle{display:none}#admin-nav,#emp-nav{display:block!important;padding:6px 0 12px}.sidebar .hidden{display:none!important}.nav-section{display:block!important}.sb-user{display:flex!important}.app-header{height:60px;padding:0 10px;gap:7px}.mobile-menu{display:grid;place-items:center}.header-heading{flex:1;min-width:0}.header-title{font-size:15px}.breadcrumbs,.global-search,.quick-payroll,.header-user-copy{display:none}.header-icon{width:40px}.header-profile{gap:0}.header-profile .avatar{width:32px;height:32px}.main{padding:16px 12px 86px!important}.kpi-grid{grid-template-columns:1fr;gap:10px}.kpi-card{min-height:96px}.dashboard-grid{gap:12px}.payroll-chart,.readiness-panel,.attendance-panel,.recent-panel{grid-column:1/-1}.readiness-panel{grid-row:auto}.chart-wrap{height:220px}.panel-body{padding:14px}.attendance-content{align-items:flex-start;overflow:auto;gap:20px}.donut{width:112px;height:112px}.donut:before{width:70px;height:70px}.attendance-legend{grid-template-columns:auto;gap:10px}.mobile-bottom{position:fixed;left:0;right:0;bottom:0;height:68px;z-index:60;background:#fff;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);box-shadow:0 -3px 14px rgba(19,38,30,.06)}.bottom-item{border:0;background:#fff;color:#55655e;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:11px;min-width:0}.bottom-item.active{color:var(--blue);font-weight:700}.bottom-item .shell-icon{width:20px;height:20px}.form-grid{grid-template-columns:1fr!important}.modal-overlay{padding:8px;align-items:flex-end}.modal{width:100%;max-width:none;max-height:94vh;border-radius:10px 10px 0 0;padding:18px 14px}.modal .btn{min-height:44px}.profile-meta{grid-template-columns:1fr}.profile-head>.btn{width:100%}.page-title>div,.page-title>button{width:100%}.btn{min-height:42px}.page-title .btn{width:100%}.toast{left:12px;right:12px;top:72px;text-align:center}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}}
.login-btn:disabled{opacity:.78;cursor:wait}.login-btn.loading{position:relative;color:transparent!important;pointer-events:none}.login-btn.loading:after{content:"";position:absolute;width:16px;height:16px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:ui-spin .7s linear infinite}
.directory-search{position:relative}.directory-search .search-clear{display:grid;place-items:center;width:26px;height:26px;flex:0 0 26px;padding:0;border:0;border-radius:50%;background:transparent;color:#597c6f;cursor:pointer}.directory-search .search-clear:hover{background:#e2f7ef;color:var(--ui-primary)}.directory-search .search-clear .shell-icon{width:14px;height:14px}.directory-search .search-clear[hidden]{display:none}
.directory-search input[type="search"]::-webkit-search-cancel-button{display:none}.directory-empty{align-items:center;flex-direction:column;gap:6px}.directory-empty strong{color:var(--ui-ink);font-size:13px}.directory-empty span{color:var(--ui-muted);font-size:11px}.directory-empty .btn{min-height:34px;margin-top:5px;font-size:12px}
.table-search-input{position:relative;display:flex;align-items:center;flex:1;min-width:180px;max-width:520px}.table-search-input input{width:100%;padding-right:42px!important}.table-search-input input[type="search"]::-webkit-search-cancel-button{display:none}.table-search-clear{position:absolute;right:7px;display:grid;place-items:center;width:27px;height:27px;padding:0;border:0;border-radius:50%;background:transparent;color:#597c6f;cursor:pointer}.table-search-clear:hover,.table-search-clear:focus-visible{background:#e2f7ef;color:var(--ui-primary)}.table-search-clear .shell-icon{width:14px;height:14px}.table-search-clear[hidden]{display:none}
.table-search-empty{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:25px 16px;border-top:1px solid var(--ui-border);color:var(--ui-muted);text-align:center}.table-search-empty[hidden]{display:none!important}.table-search-empty strong{font-size:12px;color:var(--ui-ink)}.table-search-empty span{font-size:11px}.table-search-empty .btn{min-height:34px;margin-top:4px;font-size:12px}
.toast{display:flex;align-items:center;gap:12px;max-width:min(440px,calc(100vw - 24px));padding:11px 12px 11px 15px}.toast-message{flex:1;min-width:0}.toast-dismiss{display:grid;place-items:center;width:25px;height:25px;flex:0 0 25px;border:0;border-radius:50%;background:transparent;color:currentColor;font-size:18px;line-height:1;cursor:pointer;opacity:.78}.toast-dismiss:hover,.toast-dismiss:focus-visible{background:rgba(255,255,255,.2);opacity:1}
.global-search{position:relative}.global-search input[type="search"]{padding-right:78px}.global-search input[type="search"]::-webkit-search-cancel-button{display:none}.global-search-clear{position:absolute;right:45px;top:8px;display:grid;place-items:center;width:26px;height:26px;padding:0;border:0;border-radius:50%;background:transparent;color:#597c6f;cursor:pointer}.global-search-clear:hover,.global-search-clear:focus-visible{background:#e2f7ef;color:var(--ui-primary)}.global-search-clear .shell-icon{width:14px;height:14px}.global-search-clear[hidden]{display:none}
.daily-tax-card{margin-top:18px;padding-top:16px;border-top:1px solid var(--ui-border)}.daily-tax-help{margin:0 0 12px;color:var(--ui-muted);font-size:11px;line-height:1.5}.tax-band-editor{margin-top:12px;border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm);overflow:hidden;background:#fff}.tax-band-editor-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:11px 13px;background:#F7FAF8;border-bottom:1px solid var(--ui-border)}.tax-band-editor-head strong{font-size:12px;color:var(--ui-ink)}.tax-band-editor-head span{font-size:11px;color:var(--ui-muted)}.tax-band-editor table{margin:0;border:0}.tax-band-editor th{height:34px;font-size:11px}.tax-band-editor td{padding:8px 10px;font-size:11px}.tax-band-editor input{min-height:34px;width:100%;max-width:230px}.tax-band-open{display:inline-flex;align-items:center;min-height:34px;color:var(--ui-muted);font-size:11px}@media(max-width:767px){.tax-band-editor .table-wrap{margin-inline:-4px}.tax-band-editor table{min-width:440px}.tax-band-editor-head{align-items:flex-start;flex-direction:column;gap:3px}}
.login-password-wrap{position:relative;display:flex;align-items:center}.password-toggle{position:absolute;right:8px;display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:6px;background:transparent;color:#597c6f;cursor:pointer}.password-toggle:hover,.password-toggle:focus-visible{background:#e2f7ef;color:var(--ui-primary)}.password-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.password-toggle.is-visible{color:var(--ui-primary)}
.login-field input[aria-invalid="true"]{border-color:#c54853!important;background:#fffafa;box-shadow:0 0 0 3px rgba(210,77,88,.1)!important}
.submenu-item:not(.submenu-visible){min-height:0!important}
@media(max-width:767px){#admin-nav.hidden,#emp-nav.hidden{display:none!important}}
@media(min-width:768px) and (max-width:1199px){.mobile-menu{display:grid;place-items:center}}

/* Branch workspace: consistent hierarchy, safe actions and responsive cards. */
.branch-page-header{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin:0 0 16px;padding:2px 0}.branch-page-header h1{margin:3px 0 2px;font-size:26px;letter-spacing:-.45px;color:var(--ui-ink)}.branch-page-header p{margin:0;color:var(--ui-muted);font-size:13px}.breadcrumbs-inline{color:var(--ui-subtle);font-size:11px}.breadcrumbs-inline strong{color:var(--ui-primary);font-weight:650}.branch-page-actions{display:flex;gap:8px;flex-wrap:wrap}.branch-instruction{display:flex;align-items:center;gap:11px;padding:12px 15px;margin-bottom:16px;border:1px solid #b1ebd5;border-left:4px solid var(--ui-primary);border-radius:var(--ui-radius-sm);background:#edfbf6;color:#1f543f}.branch-instruction>span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#cdf3e5;color:var(--ui-primary);font-weight:800;font-size:13px}.branch-instruction strong,.branch-instruction small{display:block}.branch-instruction strong{font-size:12px}.branch-instruction small{margin-top:2px;color:#56786b;font-size:11px}.branch-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.branch-card{position:relative;display:flex;flex-direction:column;min-width:0;min-height:242px;padding:18px;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.branch-card:hover,.branch-card:focus-visible{transform:translateY(-2px);border-color:#6fdbb1!important;box-shadow:0 10px 24px rgba(18,74,52,.1)!important}.branch-card.active{border-color:var(--ui-primary)!important;box-shadow:0 0 0 2px rgba(11,107,87,.12),0 10px 24px rgba(18,74,52,.1)!important}.branch-card:focus-visible{outline:3px solid rgba(11,107,87,.25);outline-offset:2px}.branch-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;min-width:0}.branch-card-title-wrap{min-width:0}.branch-card-title{margin:0;color:var(--ui-ink);font-size:17px;line-height:1.25;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:42px}.branch-location{display:block;max-width:100%;margin-top:6px;color:var(--ui-primary);font-size:11px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.branch-card-menu{position:relative;flex:0 0 auto}.branch-card-menu summary{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--ui-border-strong);border-radius:var(--ui-radius-sm);color:#527a6b;background:#fff;cursor:pointer;list-style:none;font-size:19px;line-height:1}.branch-card-menu summary::-webkit-details-marker{display:none}.branch-card-menu summary:hover{background:#eefaf6;color:var(--ui-primary)}.branch-card-menu-popover{position:absolute;right:0;top:40px;z-index:10;display:grid;min-width:145px;padding:5px;background:#fff;border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm);box-shadow:var(--ui-shadow-lg)}.branch-card-menu-popover button{border:0;background:#fff;padding:9px 10px;text-align:left;color:#28413A;font-size:12px;cursor:pointer;border-radius:5px}.branch-card-menu-popover button:hover{background:#eaf9f4}.branch-card-menu-popover .danger-action{color:var(--ui-danger)}.branch-card-meta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;margin-top:19px;padding-top:13px;border-top:1px solid #e9f3ef}.branch-card-meta span,.branch-card-meta strong{display:block}.branch-card-meta span,.branch-card-schedule span{color:var(--ui-subtle);font-size:11px}.branch-card-meta strong{margin-top:3px;color:#264e3e;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.branch-card-schedule{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px;margin-top:14px;color:#54786a;font-size:11px;line-height:1.55}.branch-card-schedule strong{color:#264e3e;font-size:11px}.schedule-divider{color:#a8c3b9;margin:0 2px}.branch-attendance-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}.branch-attendance-badges .badge{display:inline-flex;align-items:center;gap:4px;padding:5px 8px;font-size:11px;font-weight:650}.branch-attendance-badges .badge strong{font-size:11px}.branch-card-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:16px;color:var(--ui-primary);font-size:11px;font-weight:650}.branch-edit-btn{min-height:34px;padding:0 10px;font-size:11px}.branch-attendance-detail{margin-top:18px}.inactive-branches{margin-top:16px;padding:0 15px 15px}.inactive-branches summary{padding:15px 0;cursor:pointer;color:var(--ui-ink);font-size:13px;font-weight:700}.inactive-branches .table-wrap{border-top:1px solid var(--ui-border)}
@media(min-width:768px) and (max-width:1199px){.branch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.branch-page-header{align-items:flex-start}.branch-page-header h1{font-size:23px}}
@media(max-width:767px){.branch-page-header{display:block;margin-bottom:14px}.branch-page-header h1{font-size:22px}.branch-page-header p{font-size:12px}.branch-page-actions{margin-top:14px;display:grid;grid-template-columns:1fr 1fr}.branch-page-actions .btn{width:100%;padding:0 8px;font-size:12px}.branch-instruction{align-items:flex-start;margin-bottom:12px;padding:11px 12px}.branch-grid{grid-template-columns:1fr;gap:12px}.branch-card{min-height:236px;padding:16px}.branch-card-title{font-size:16px}.branch-card-footer{padding-top:14px}.branch-attendance-detail{margin-top:14px}.inactive-branches{padding-inline:12px}}
.mileage-rates-modal{width:min(920px,calc(100vw - 32px));max-width:none;padding:24px}.mileage-rates-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.mileage-rates-head h2{margin:0;color:var(--ui-ink);font-size:21px}.mileage-rates-head p{margin:6px 0 0;color:var(--ui-muted);font-size:12px;line-height:1.45}.mileage-rates-head-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}.mileage-rates-head-actions .close-btn{width:36px;height:36px;border-radius:6px}.mileage-rates-toolbar{display:flex;align-items:center;gap:9px;margin:18px 0 12px}.mileage-rates-search{display:flex;align-items:center;gap:8px;flex:1;max-width:390px;border:1px solid var(--ui-border-strong);border-radius:var(--ui-radius-sm);padding:0 11px;background:#fff}.mileage-rates-search:focus-within{border-color:var(--ui-primary);box-shadow:0 0 0 3px rgba(11,107,87,.1)}.mileage-rates-search span{color:#597c6f;font-size:19px}.mileage-rates-search input{min-height:40px;border:0!important;box-shadow:none!important;padding:0!important}.mileage-rates-toolbar select{width:170px;min-height:42px}.mileage-rates-count{margin-left:auto;color:var(--ui-muted);font-size:11px;white-space:nowrap}.mileage-rates-table-wrap{overflow:auto;border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm)}.mileage-rate-table{width:100%;min-width:0!important;table-layout:fixed}.mileage-rate-table th,.mileage-rate-table td{padding:11px 12px;font-size:11px}.mileage-rate-table th:nth-child(1){width:24%}.mileage-rate-table th:nth-child(2){width:16%}.mileage-rate-table th:nth-child(3){width:13%}.mileage-rate-table th:nth-child(4){width:20%}.mileage-rate-table th:nth-child(5){width:12%}.mileage-rate-table th:nth-child(6){width:15%}.mileage-rate-table td{overflow-wrap:anywhere}.mileage-rate-table td strong,.mileage-rate-table td small{display:block}.mileage-rate-table td small{margin-top:3px;color:var(--ui-subtle);font-size:11px}.mileage-rate-actions{display:flex;gap:6px;flex-wrap:wrap}.mileage-rate-actions .btn{min-height:32px;padding:0 9px;font-size:12px}.mileage-rate-form-modal{width:min(560px,calc(100vw - 32px));max-width:none}.mileage-rate-form-modal .form-help{margin:0 0 15px;color:var(--ui-muted);font-size:11px;line-height:1.45}.mileage-rate-form-modal .full-span{grid-column:1/-1}.mileage-rate-form-modal .required{color:var(--ui-danger)}.input-prefix{display:flex;align-items:center;border:1px solid var(--ui-border-strong);border-radius:var(--ui-radius-sm);overflow:hidden}.input-prefix span{padding-left:11px;color:var(--ui-muted);font-weight:650}.input-prefix input{border:0!important;box-shadow:none!important}.form-check{display:flex;align-items:center;gap:8px;margin:13px 0;color:#264e3e;font-size:12px}.form-check input{width:17px;height:17px;min-height:17px;accent-color:var(--ui-primary)}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
@media(max-width:767px){.mileage-rates-modal{width:calc(100vw - 16px);padding:18px 14px}.mileage-rates-head{gap:10px}.mileage-rates-head h2{font-size:18px}.mileage-rates-head p{font-size:11px}.mileage-rates-head-actions .btn{font-size:12px;padding:0 9px}.mileage-rates-head-actions .close-btn{width:32px}.mileage-rates-toolbar{display:grid;grid-template-columns:1fr 130px;margin-top:14px}.mileage-rates-search{grid-column:1/-1;max-width:none}.mileage-rates-count{margin-left:0}.mileage-rate-table th,.mileage-rate-table td{padding:10px 8px;font-size:11px}.mileage-rate-table th:nth-child(2),.mileage-rate-table td:nth-child(2){display:none}.mileage-rate-table th:nth-child(4),.mileage-rate-table td:nth-child(4){width:22%}.mileage-rate-table th:nth-child(6),.mileage-rate-table td:nth-child(6){width:23%}.mileage-rate-actions{display:grid;gap:5px}.mileage-rate-actions .btn{width:100%;min-height:34px}.mileage-rate-form-modal{width:calc(100vw - 16px)}.mileage-rate-form-modal .form-grid{grid-template-columns:1fr!important}.mileage-rate-form-modal .modal-actions .btn{flex:1}}

/* Enterprise UI foundation: a single, calm visual layer for every page. */
.shortage-page-intro{margin:0 0 12px;color:#55786c;font-size:13px}.shortage-page-links{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}.shortage-page-links .btn{min-width:145px}.shortage-workspace-card{box-shadow:var(--ui-shadow-lg)!important}.shortage-workspace-card [data-shortage-section]{transition:opacity .16s ease}.shortage-workspace-card [data-shortage-section][hidden]{display:none!important}
/* --ui-* names are aliased to the base.css palette; see the foundation block. */
html{background:var(--ui-bg)}body{background:var(--ui-bg);color:var(--ui-ink);line-height:1.45;-webkit-font-smoothing:antialiased}.app{background:var(--ui-bg)!important}.main{max-width:1600px;width:100%;margin:0 auto}
.qu-btn{min-height:48px;padding:9px 11px;border-color:var(--ui-border);border-radius:var(--ui-radius-sm)}
.app-header{border-bottom-color:var(--ui-border);box-shadow:0 1px 3px rgba(12,47,34,.03)}.header-title{font-size:19px}.breadcrumbs{font-size:11px}.global-search input{height:42px;background:#f8fdfc;border-color:var(--ui-border);border-radius:var(--ui-radius-sm)}.quick-payroll{height:42px;border-radius:var(--ui-radius-sm)}
.card,.stat-card,.panel,.employee-panel,.employee-identity,.employee-kpi,.portal-content-card{border-radius:var(--ui-radius)!important;border-color:var(--ui-border)!important;box-shadow:var(--ui-shadow)!important}.card-title,.panel-title,.employee-panel-title{color:var(--ui-ink)}.panel-head{min-height:60px}.panel-body{padding:18px}.ui-surface{min-width:0}
.btn{min-height:40px;padding:0 14px;border-radius:var(--ui-radius-sm);border-color:var(--ui-border-strong);font-weight:650;color:#28413A;background:#fff;transition:background .15s,border-color .15s,color .15s,box-shadow .15s}.btn:hover{background:#F4F8F6;border-color:#B4CCC2}.btn:focus-visible,.header-icon:focus-visible,.mobile-menu:focus-visible,.nav-item:focus-visible,.bottom-item:focus-visible{outline:3px solid rgba(11,107,87,.3);outline-offset:2px}.btn-primary{background:var(--ui-primary);border-color:var(--ui-primary);color:#fff}.btn-primary:hover{background:var(--ui-primary-dark);border-color:var(--ui-primary-dark);box-shadow:0 4px 10px rgba(11,107,87,.16)}.btn-success{background:var(--ui-success);border-color:var(--ui-success)}.btn-danger{background:var(--ui-danger);border-color:var(--ui-danger)}
input,select,textarea{min-height:42px;border-color:var(--ui-border-strong);border-radius:var(--ui-radius-sm);color:var(--ui-ink);background:#fff}textarea{padding-top:10px;min-height:84px}input:focus,select:focus,textarea:focus{border-color:var(--ui-primary);box-shadow:0 0 0 3px rgba(11,107,87,.1);outline:0}.form-group label{font-size:12px;color:#375e4f;font-weight:650}.form-group small{color:var(--ui-subtle);line-height:1.4}
.table-search-bar{padding:14px 16px;background:#f8fcfb;border-color:var(--ui-border)}.table-search-bar input{height:42px;max-width:420px}.table-search-count{font-size:12px;color:var(--ui-muted)}.table-wrap,.card>div[style*="overflow:auto"],.card>div[style*="overflow-x:auto"]{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}table{font-size:13px}th{height:44px;padding:11px 14px;color:#54786b;background:#F7FAF8;border-color:var(--ui-border);white-space:nowrap}td{padding:12px 14px;color:#214739;border-color:#e9f3ef;vertical-align:middle}tr:hover td{background:#f1fbf7}table td:first-child{font-weight:500}
.badge{min-height:22px;padding:2px 8px;border-radius:5px;font-weight:700}.badge-success{background:#e8f7ee;color:#147443}.badge-warn{background:#fff4df;color:#9b6009}.badge-danger{background:#fff0f1;color:#ae303a}.badge-accent{background:#E2F0EB;color:#1c7153}
.modal-overlay{background:rgba(8,31,23,.56);backdrop-filter:blur(2px)}.modal{border:1px solid var(--ui-border);border-radius:12px;box-shadow:var(--ui-shadow-lg);padding:22px}.modal-title{font-size:18px;color:var(--ui-ink);margin-bottom:18px}.close-btn{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--ui-radius-sm);color:#55786c}.close-btn:hover{background:#edf7f3;color:var(--ui-ink)}.toast{border-radius:var(--ui-radius-sm);font-weight:650;box-shadow:var(--ui-shadow-lg)}
.ui-loading-state,.ui-error-state{display:flex;align-items:center;justify-content:center;gap:11px;min-height:180px;padding:28px;color:var(--ui-muted);text-align:center}.ui-loading-state{flex-direction:column}.ui-spinner{width:24px;height:24px;border:3px solid #c1eedd;border-top-color:var(--ui-primary);border-radius:50%;animation:ui-spin .8s linear infinite}@keyframes ui-spin{to{transform:rotate(360deg)}}.ui-error-state{display:flex;flex-direction:column;border:1px solid #efc5c9;border-radius:var(--ui-radius);background:#fff7f7;color:var(--ui-danger);margin:8px 0}.ui-error-state strong{font-size:15px}.ui-error-state p{margin:0;color:#7e4b52;font-size:13px}.ui-error-state .btn{margin-top:4px}
.sidebar-fixed .nav-item{min-height:44px}.mobile-overlay{backdrop-filter:blur(1px)}
@media(min-width:1200px){.main{padding:28px 34px 44px!important}.dashboard-grid{gap:18px}.kpi-grid{gap:16px}.kpi-card{min-height:116px;padding:19px}.kpi-value{font-size:24px}.panel table{min-width:720px}}
@media(min-width:768px) and (max-width:1199px){.main{padding:22px 20px 36px!important}.app-header{padding-inline:18px}.kpi-card{min-height:108px}.dashboard-grid{gap:14px}.panel-head{min-height:56px}}
@media(max-width:767px){.main{padding:16px 12px 90px!important}.app-header{box-shadow:0 1px 4px rgba(12,47,34,.06)}.header-title{font-size:16px}.kpi-card{min-height:96px;padding:16px}.kpi-value{font-size:21px}.panel-head{min-height:56px;padding:0 14px}.panel-body{padding:14px}.panel table{min-width:640px}.table-search-bar{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}.table-search-bar input{max-width:none;width:100%}.table-search-count{margin-left:0}.form-group label{font-size:12px}.modal{padding:20px 14px}.modal-title{font-size:17px}.modal-overlay{padding:0}.modal .form-grid{gap:14px}.modal .btn{width:100%}.modal>div:last-child[style*="justify-content:flex-end"],.modal>div:last-child[style*="justify-content: flex-end"]{display:grid!important;grid-template-columns:1fr;gap:8px!important}.ui-error-state{margin:0;min-height:220px}}

/* Consistent feedback surfaces for data-heavy screens. */
.ui-loading-state,.ui-error-state,.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:180px;padding:30px 20px;border-radius:var(--ui-radius);text-align:center}
.ui-loading-state{border:1px solid var(--ui-border);background:linear-gradient(180deg,#fff,#F3F8F5);color:var(--ui-muted)}
.ui-loading-state .ui-spinner{width:30px;height:30px;border-width:3px}
.ui-loading-state strong,.ui-error-state strong,.empty-state strong{color:var(--ui-ink);font-size:14px}
.ui-loading-state p,.ui-error-state p,.empty-state p{max-width:500px;margin:0;color:var(--ui-muted);font-size:13px;line-height:1.5}
.ui-error-state{border:1px solid #efc5c9;background:linear-gradient(180deg,#fffafa,#fff5f5);color:var(--ui-danger);margin:8px 0}
.ui-error-state .btn{margin-top:4px}
.empty-state{border:1px dashed #b2e0cf;background:linear-gradient(180deg,#FBFDFC,#f1fcf8);color:var(--ui-muted)}
.empty-state:before{content:"";width:42px;height:4px;border-radius:99px;background:#8be2c0;box-shadow:0 8px 0 -2px #c8f1e2}
.toast{border-radius:11px;padding:13px 17px;box-shadow:0 10px 28px rgba(16,44,36,.18);backdrop-filter:blur(8px)}
.toast-success{background:#12824f}.toast-error{background:#c94751}
@media(max-width:767px){.ui-loading-state,.ui-error-state,.empty-state{min-height:150px;padding:24px 14px}.toast{left:12px;right:12px;top:72px;text-align:center}}

/* Form and table clarity: make required fields and row actions easy to scan. */
.form-group label.required::after,.form-label.required::after{content:" *";color:var(--ui-danger);font-weight:800}
.form-group input.is-invalid,.form-group select.is-invalid,.form-group textarea.is-invalid,
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#c0434c!important;background:#fff9f9!important;box-shadow:0 0 0 3px rgba(217,75,86,.1)!important}
.field-error,.form-error{display:block;margin-top:5px;color:#b23a44;font-size:11px;line-height:1.35}
.form-help,.form-group small{font-size:11px}
td .action-group,.table-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap}
td .action-group .btn,td .table-actions .btn{min-height:32px;padding:0 10px;font-size:12px}
table tbody tr{transition:background .14s ease,box-shadow .14s ease}
table tbody tr:nth-child(even) td{background:rgba(245,252,250,.52)}
table tbody tr:hover td{background:#eafaf4}
tbody tr:focus-within td{background:#e1f8ef}
table tbody tr:has(input[type="checkbox"]:checked) td{background:#e7f9f3}
@media(max-width:767px){td .action-group,td .table-actions{justify-content:flex-start}.field-error,.form-error{font-size:11px}}

/* Search and notification affordances. */
.global-search:focus-within{z-index:2}
.global-search:focus-within input{background:#fff;border-color:#35cc92;box-shadow:0 0 0 3px rgba(11,107,87,.11)}
.global-search input::placeholder{color:#5B6E64}
.notification-count[data-count="0"],.notification-count:empty{display:none}
.notification-centre-modal .modal-title{padding:16px 18px;margin:0;background:linear-gradient(180deg,#fff,#FBFDFC)}
.notification-centre-row.unread{border-left:3px solid var(--ui-primary);border-radius:6px;padding-left:11px}
.notification-centre-row:hover{background:#FBFDFC}
.notification-centre-list>.empty-state{margin:12px 0;border-radius:9px}
@media(max-width:600px){.notification-centre-modal .modal-title{padding:14px}.notification-centre-list{padding:4px 12px 12px}.notification-centre-row.unread{margin:0 -4px;padding-left:8px}}

/* Accessibility polish: predictable focus, contrast and reduced-motion support. */
:focus-visible{outline:3px solid rgba(11,107,87,.34);outline-offset:2px}
button:disabled,.btn:disabled{cursor:not-allowed;opacity:.58;box-shadow:none!important}
[aria-busy="true"]{cursor:progress}
.text-muted,.muted{color:#54786b}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.branch-card:hover{transform:none}}
@media(forced-colors:active){.btn,.header-icon,.nav-item,.bottom-item{border:1px solid ButtonText}.badge,.notification-count{border:1px solid ButtonText}.ui-error-state,.empty-state{border:1px solid CanvasText}}
.attendance-loading{display:flex;align-items:center;justify-content:center;gap:9px;min-height:140px;padding:22px;color:#55655e;background:#FBFDFC;border-top:1px dashed #c5e5d9;font-size:12px}
.attendance-loading::before{content:"";width:20px;height:20px;border:3px solid #c1eedd;border-top-color:var(--ui-primary);border-radius:50%;animation:ui-spin .8s linear infinite}
@media(prefers-reduced-motion:reduce){.attendance-loading::before{animation:none;border-top-color:#77b69e}}
.company-switch-list{gap:10px}
.company-switch-option{box-shadow:0 2px 7px rgba(16,44,36,.04);transition:border-color .15s,background .15s,box-shadow .15s,transform .15s}
.company-switch-option:hover:not(:disabled){box-shadow:0 7px 18px rgba(16,44,36,.09);transform:translateY(-1px)}
.company-switch-option.selected{box-shadow:0 0 0 3px rgba(11,107,87,.1)}
.company-switch-option.loading{position:relative;filter:saturate(.7)}
.company-switch-option.loading::after{content:"";width:16px;height:16px;margin-left:auto;border:2px solid #adebd3;border-top-color:var(--ui-primary);border-radius:50%;animation:ui-spin .8s linear infinite}
@media(max-width:767px){.company-switch-option{min-height:64px;padding:13px}.company-switch-arrow{font-size:20px}}

/* Employee self-service portal */
.app.employee-mode .global-search,.app.employee-mode .quick-payroll{display:none}.app.employee-mode .header-heading{margin-right:auto}
.employee-home{max-width:1180px;margin:0 auto}.employee-greeting{font-size:24px;line-height:1.2;font-weight:760;letter-spacing:-.45px;color:var(--ink);margin:0 0 18px}
.employee-identity{display:flex;align-items:center;gap:18px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:20px 22px;box-shadow:0 1px 3px rgba(19,38,30,.04);margin-bottom:16px}.employee-identity-avatar{width:64px;height:64px;border-radius:50%;background:#daf6ec;color:#0f3b2a;display:grid;place-items:center;font-size:21px;font-weight:760;flex:0 0 auto}.employee-identity-main{flex:1;min-width:0}.employee-identity-name{font-size:16px;font-weight:730;color:var(--ink)}.employee-identity-meta{font-size:11px;color:#486b5e;line-height:1.6;margin-top:4px}.employee-payday{min-width:180px;border-left:1px solid var(--line);padding-left:24px}.employee-payday-label{font-size:11px;color:var(--muted)}.employee-payday-value{font-size:13px;font-weight:700;color:var(--ink);margin-top:7px}.employee-payday-note{font-size:11px;color:var(--muted);margin-top:3px}
.employee-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}.employee-kpi{min-height:122px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:16px;box-shadow:0 1px 3px rgba(19,38,30,.04);position:relative}.employee-kpi-label{font-size:11px;color:#37584d;margin-bottom:15px}.employee-kpi-value{font-size:19px;font-weight:750;color:var(--ink);letter-spacing:-.25px}.employee-kpi-note{font-size:11px;color:var(--muted);margin-top:8px}.employee-kpi-icon{position:absolute;right:14px;bottom:14px;width:34px;height:34px;border-radius:7px;background:#E2F0EB;color:var(--blue);display:grid;place-items:center}.employee-kpi-icon.green{background:#eaf7e7;color:#25833e}.employee-kpi-icon.violet{background:#d4f4f2;color:#1e6662}
.employee-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.75fr);gap:16px}.employee-stack{display:grid;gap:16px}.employee-panel{background:#fff;border:1px solid var(--line);border-radius:9px;box-shadow:0 1px 3px rgba(19,38,30,.04);min-width:0}.employee-panel-head{min-height:56px;padding:0 16px;border-bottom:1px solid #e2f1eb;display:flex;align-items:center;justify-content:space-between;gap:12px}.employee-panel-title{font-size:14px;font-weight:720;color:var(--ink)}.employee-panel-date{font-size:11px;color:var(--muted)}.employee-panel-body{padding:16px}.payslip-totals{display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:18px}.pay-total{padding:0 18px;border-right:1px solid var(--line)}.pay-total:first-child{padding-left:0}.pay-total:last-child{border:0}.pay-total-label{font-size:11px;color:var(--muted)}.pay-total-value{font-size:15px;font-weight:730;color:var(--ink);margin-top:7px}.pay-total-value.net{color:var(--blue)}.pay-breakdown{border-top:1px solid #e9f3ef;padding-top:12px}.pay-line{display:flex;justify-content:space-between;gap:16px;padding:5px 0;font-size:11px;color:#37584d}.pay-line.total{font-weight:720;color:var(--ink);border-top:1px solid #e9f3ef;margin-top:6px;padding-top:10px}.employee-actions{display:flex;gap:10px;margin-top:14px}.employee-actions .btn{flex:1;min-height:42px}
.leave-progress-copy{display:flex;justify-content:space-between;font-size:11px;color:#37584d}.leave-progress{height:8px;background:#e1efea;border-radius:4px;overflow:hidden;margin:12px 0 18px}.leave-progress span{display:block;height:100%;background:var(--blue);border-radius:4px}.leave-detail{display:flex;justify-content:space-between;font-size:11px;color:#486b5e;padding:6px 0}.request-row{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:9px;align-items:start;padding:11px 0;border-bottom:1px solid #e9f3ef}.request-row:last-child{border:0}.request-marker{width:17px;height:17px;border-radius:50%;display:grid;place-items:center;background:#e7f6ec;color:var(--success);font-size:11px}.request-marker.pending{background:#E2F0EB;color:var(--blue)}.request-title{font-size:11px;font-weight:650;color:var(--ink)}.request-meta{font-size:11px;color:var(--muted);margin-top:3px}.request-status{font-size:11px;font-weight:700;color:var(--success)}.request-status.pending{color:var(--blue)}.company-notice-title{font-size:12px;font-weight:700;color:var(--ink);margin-bottom:8px}.company-notice-copy{font-size:11px;line-height:1.65;color:#486b5e}
.portal-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.portal-toolbar h1{font-size:22px;color:var(--ink);letter-spacing:-.35px}.portal-toolbar-actions{display:flex;gap:8px}.portal-content-card{background:#fff;border:1px solid var(--line);border-radius:9px;box-shadow:0 1px 3px rgba(19,38,30,.04);overflow:hidden}.portal-content-card .table-wrap{width:100%}.portal-payslip-wrap{display:grid;grid-template-columns:260px minmax(0,1fr);gap:16px}.portal-periods{background:#fff;border:1px solid var(--line);border-radius:9px;padding:16px;height:max-content}.portal-periods label{display:block;font-size:11px;font-weight:650;color:var(--muted);margin-bottom:7px}.portal-payslip-wrap .payslip{max-width:none;border-color:var(--line);box-shadow:0 1px 3px rgba(19,38,30,.04)}
@media(min-width:768px) and (max-width:1199px){.employee-kpis{grid-template-columns:repeat(2,1fr)}.employee-layout{grid-template-columns:1fr}.portal-payslip-wrap{grid-template-columns:220px minmax(0,1fr)}}
@media(max-width:767px){.app.employee-mode .header-title{font-size:15px}.employee-home{max-width:none}.employee-greeting{font-size:20px;margin-bottom:14px}.employee-identity{padding:16px;align-items:flex-start;flex-wrap:wrap}.employee-identity-avatar{width:52px;height:52px;font-size:18px}.employee-payday{width:100%;border-left:0;border-top:1px solid var(--line);padding:12px 0 0;display:grid;grid-template-columns:1fr auto;align-items:center}.employee-payday-note{grid-column:2}.employee-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.employee-kpi{min-height:114px;padding:14px}.employee-kpi-value{font-size:16px}.employee-layout{grid-template-columns:1fr;gap:12px}.payslip-totals{grid-template-columns:1fr 1fr}.pay-total{padding:0 12px}.pay-total:nth-child(3){grid-column:1/-1;border-right:0;border-top:1px solid var(--line);padding:12px 0 0;margin-top:12px}.employee-actions{flex-direction:column}.portal-toolbar{align-items:flex-start;flex-direction:column}.portal-toolbar h1{font-size:19px}.portal-toolbar-actions{width:100%}.portal-toolbar-actions .btn{flex:1}.portal-payslip-wrap{grid-template-columns:1fr}.portal-periods{padding:14px}.employee-panel-head{padding:0 14px}.employee-panel-body{padding:14px}}

/* Payroll review workspace */
.payroll-workspace{max-width:1500px;margin:0 auto;padding-bottom:82px}.payroll-workspace>.page-title{display:none!important}.payroll-run-head{background:#fff;border:1px solid var(--line);border-radius:9px;padding:16px 18px;margin-bottom:14px;box-shadow:0 1px 3px rgba(19,38,30,.04)}.payroll-run-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.payroll-run-title{font-size:18px;font-weight:760;color:var(--ink);letter-spacing:-.3px}.payroll-run-meta{font-size:11px;color:var(--muted);margin-top:5px}.payroll-run-actions{display:flex;gap:8px;align-items:center}.payroll-run-actions select{width:150px;height:40px}.payroll-run-actions .btn{height:40px;white-space:nowrap}
.payroll-steps{display:grid;grid-template-columns:repeat(5,1fr);margin-top:20px;position:relative}.payroll-steps:before{content:"";position:absolute;top:12px;left:10%;right:10%;height:1px;background:#bedcd1}.payroll-step{position:relative;text-align:center;color:#5B6E64;font-size:11px}.payroll-step-dot{position:relative;z-index:1;width:25px;height:25px;margin:0 auto 6px;border-radius:50%;border:1px solid #afcec3;background:#fff;display:grid;place-items:center;font-size:11px;font-weight:700}.payroll-step.active{color:var(--blue);font-weight:700}.payroll-step.active .payroll-step-dot{background:var(--blue);border-color:var(--blue);color:#fff}.payroll-step.done .payroll-step-dot{border-color:#78b795;color:var(--success)}.payroll-step small{display:block;font-size:11px;font-weight:500;margin-top:2px}
.payroll-totals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}.payroll-total{min-height:92px;padding:15px;background:#fff;border:1px solid var(--line);border-radius:9px;box-shadow:0 1px 3px rgba(19,38,30,.04);position:relative}.payroll-total-label{font-size:11px;color:var(--muted)}.payroll-total-value{font-size:17px;font-weight:750;color:var(--ink);margin-top:10px}.payroll-total-icon{position:absolute;right:14px;bottom:14px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#E2F0EB;color:var(--blue)}.payroll-total-icon.red{background:#fdecec;color:var(--danger)}.payroll-total-icon.green{background:#e9f7ee;color:var(--success)}.payroll-total-icon.violet{background:#d4f4f2;color:#1e6662}
.payroll-readiness{background:#fff;border:1px solid var(--line);border-radius:9px;margin-bottom:14px;box-shadow:0 1px 3px rgba(19,38,30,.04)}.payroll-readiness-head{min-height:52px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e1f1ea}.payroll-readiness-title{font-size:14px;font-weight:720;color:var(--ink)}.payroll-readiness-counts{display:flex;gap:16px;font-size:11px;font-weight:700}.count-blocker{color:var(--danger)}.count-warning{color:var(--warning)}.count-passed{color:var(--success)}.payroll-readiness-grid{display:grid;grid-template-columns:repeat(3,1fr);padding:4px 16px}.readiness-check{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:8px;align-items:center;min-height:58px;padding:8px;border-bottom:1px solid #e9f3ef}.readiness-check-icon{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:#e9f7ee;color:var(--success);font-size:11px}.readiness-check-icon.warn{background:#fff3df;color:var(--warning)}.readiness-check-icon.block{background:#fdecec;color:var(--danger)}.readiness-check-name{font-size:11px;font-weight:650;color:var(--ink)}.readiness-check-note{font-size:11px;color:var(--muted);margin-top:2px}.readiness-check-state{font-size:11px;font-weight:700;color:var(--success)}.readiness-check-state.warn{color:var(--warning)}.readiness-check-state.block{color:var(--danger)}
.payroll-review-section{background:#fff;border:1px solid var(--line);border-radius:9px;box-shadow:0 1px 3px rgba(19,38,30,.04);overflow:hidden}.payroll-review-heading{padding:14px 16px 0;font-size:14px;font-weight:720;color:var(--ink)}.payroll-workspace .payroll-review-bar{border:0;background:#fff;padding:12px 16px}.payroll-workspace .payroll-review-bar input,.payroll-workspace .payroll-review-bar select{height:38px}.payroll-workspace #salary-filter-summary{margin:0!important;border-radius:0!important;border-width:1px 0!important;border-left:0!important;background:#F3F8F5!important}.payroll-table-card{overflow:auto;max-height:640px}.payroll-table-card table{min-width:1420px}.payroll-table-card thead{position:sticky;top:0;z-index:2}.payroll-table-card th{height:44px}.payroll-table-card td{vertical-align:top}.payroll-mobile-action{position:fixed;left:calc(var(--side) + 28px);right:28px;bottom:10px;z-index:45;min-height:62px;border:1px solid #8ddfc0;border-radius:9px;background:rgba(255,255,255,.98);box-shadow:0 8px 28px rgba(12,49,36,.15);display:flex;align-items:center;justify-content:space-between;padding:9px 14px;gap:16px}.payroll-mobile-summary{font-size:11px;color:#37584d}.payroll-mobile-summary strong{display:block;color:var(--ink);margin-bottom:3px}.payroll-mobile-action .btn{min-width:210px}
.app.sidebar-collapsed .payroll-mobile-action{left:calc(var(--rail) + 28px)}
@media(min-width:768px) and (max-width:1199px){.payroll-totals{grid-template-columns:repeat(2,1fr)}.payroll-readiness-grid{grid-template-columns:1fr 1fr}.payroll-mobile-action{left:calc(var(--rail) + 20px);right:20px}.app.tablet-expanded .payroll-mobile-action{left:calc(var(--side) + 20px)}.payroll-table-card table{min-width:900px}.payroll-table-card th:nth-child(3),.payroll-table-card td:nth-child(3),.payroll-table-card th:nth-child(6),.payroll-table-card td:nth-child(6),.payroll-table-card th:nth-child(7),.payroll-table-card td:nth-child(7),.payroll-table-card th:nth-child(9),.payroll-table-card td:nth-child(9),.payroll-table-card th:nth-child(10),.payroll-table-card td:nth-child(10){display:none}}
@media(max-width:767px){.payroll-workspace{padding-bottom:140px}.payroll-run-head{padding:14px}.payroll-run-top{display:block}.payroll-run-title{font-size:17px}.payroll-run-actions{display:grid;grid-template-columns:1fr 1fr;margin-top:14px}.payroll-run-actions select{width:100%;grid-column:1/-1}.payroll-run-actions .btn{width:100%;padding-inline:8px}.payroll-steps{overflow-x:auto;grid-template-columns:repeat(5,80px);margin-inline:-6px;padding-bottom:4px}.payroll-steps:before{left:40px;right:auto;width:320px}.payroll-totals{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.payroll-total{min-height:108px;padding:13px}.payroll-total-value{font-size:14px;max-width:110px}.payroll-readiness-head{align-items:flex-start;flex-direction:column;justify-content:center;gap:5px;padding:10px 14px}.payroll-readiness-counts{gap:12px}.payroll-readiness-grid{grid-template-columns:1fr;padding:0 12px}.readiness-check{min-height:48px}.payroll-review-heading{padding:14px}.payroll-workspace .payroll-review-bar{display:grid;grid-template-columns:1fr 1fr;padding:0 14px 12px}.payroll-workspace .payroll-review-bar input{grid-column:1/-1;max-width:none!important}.payroll-workspace .payroll-review-bar select{max-width:none!important}.payroll-workspace .payroll-review-bar .btn{font-size:12px;padding:6px}.payroll-workspace #payroll-review-status{grid-column:1/-1;margin:0}.payroll-workspace #salary-visible-status{grid-column:1/-1}.payroll-table-card{max-height:none;overflow:visible;padding:0 12px 12px}.payroll-table-card table,.payroll-table-card thead,.payroll-table-card tbody,.payroll-table-card tr,.payroll-table-card td{display:block!important;min-width:0}.payroll-table-card thead{display:none!important}.payroll-table-card tr{position:relative;border:1px solid var(--line);border-radius:8px;margin:10px 0;padding:12px;background:#fff}.payroll-table-card td{border:0!important;padding:4px 0!important;height:auto!important}.payroll-table-card td:first-child{position:absolute;right:10px;top:10px}.payroll-table-card td:nth-child(2){padding-right:36px!important;font-size:13px}.payroll-table-card td:nth-child(3){display:block!important;font-size:11px;color:var(--muted)}.payroll-table-card td:nth-child(4):before{content:"Basic salary  ";color:var(--muted);font-size:11px}.payroll-table-card td:nth-child(5){font-size:11px;color:#486b5e}.payroll-table-card td:nth-child(6),.payroll-table-card td:nth-child(7),.payroll-table-card td:nth-child(9),.payroll-table-card td:nth-child(10){display:none!important}.payroll-table-card td:nth-child(8):before{content:"Gross  ";font-size:11px;color:var(--muted)}.payroll-table-card td:nth-child(11):before{content:"Deductions  ";font-size:11px;color:var(--muted)}.payroll-table-card td:nth-child(12):before{content:"Net pay  ";font-size:11px;color:var(--muted)}.payroll-table-card td:nth-child(8),.payroll-table-card td:nth-child(11),.payroll-table-card td:nth-child(12){display:inline-block!important;width:33%;font-size:11px}.payroll-table-card td:nth-child(13){margin-top:5px}.payroll-mobile-action{left:10px;right:10px;bottom:76px;min-height:66px;padding:8px 10px}.payroll-mobile-action .btn{min-width:145px;padding-inline:10px}.payroll-mobile-summary{font-size:11px}.salary-preview-row[style*="display: none"]{display:none!important}}

/* Salary Run visual system: compact, review-first layout matching the customer payroll workspace. */
.payroll-workspace{max-width:1540px;margin:0 auto;padding-bottom:92px}
.payroll-workspace>.payroll-module-tabs{display:none}
.payroll-workspace>.payroll-cycle-panel{display:none!important}
.payroll-run-head{border-radius:6px;padding:12px 14px;margin-bottom:10px;box-shadow:0 1px 2px rgba(11,46,33,.04)}
.payroll-run-top{align-items:center;gap:12px}
.payroll-run-title{font-size:17px;letter-spacing:-.2px}
.payroll-run-meta{font-size:11px;margin-top:4px}
.payroll-run-actions{gap:6px}
.payroll-run-actions select{height:34px;width:112px;font-size:12px}
.payroll-run-actions .btn{height:34px;min-height:34px;padding:0 10px;font-size:12px}
.payroll-steps{margin-top:13px}
.payroll-step{font-size:11px}
.payroll-step-dot{width:22px;height:22px;font-size:11px;margin-bottom:4px}
.payroll-step small{font-size:11px}
.payroll-totals{gap:8px;margin-bottom:10px}
.payroll-total{min-height:76px;padding:11px 12px;border-radius:6px}
.payroll-total-label{font-size:11px}
.payroll-total-value{font-size:13px;margin-top:7px}
.payroll-total-icon{right:10px;bottom:10px;width:28px;height:28px}
.payroll-total-icon .shell-icon{width:14px;height:14px}
.payroll-readiness{border-radius:6px;margin-bottom:10px}
.payroll-readiness-head{min-height:42px;padding:0 12px}
.payroll-readiness-title{font-size:12px}
.payroll-readiness-counts{gap:10px;font-size:11px}
.payroll-readiness-grid{padding:2px 12px}
.readiness-check{min-height:44px;padding:6px 4px;grid-template-columns:18px minmax(0,1fr) auto;gap:6px}
.readiness-check-icon{width:16px;height:16px;font-size:11px}
.readiness-check-name{font-size:11px}
.readiness-check-note{font-size:11px}
.readiness-check-state{font-size:11px}
.payroll-review-section{border-radius:6px}
.payroll-review-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px 0;font-size:12px}
.payroll-review-heading small{display:block;color:var(--muted);font-size:11px;font-weight:400;margin-top:3px}
.payroll-review-heading-actions{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.payroll-review-heading-actions .btn{min-height:28px;font-size:12px;padding:0 8px}
.payroll-workspace .payroll-review-bar{padding:8px 12px}
.payroll-workspace .payroll-review-bar input,.payroll-workspace .payroll-review-bar select{height:32px;font-size:11px}
.payroll-workspace .payroll-review-bar .btn{min-height:32px;font-size:12px;padding:0 8px}
.payroll-table-card{max-height:560px}
.payroll-table-card table{min-width:1120px}
.payroll-table-card th{height:34px;font-size:11px;padding:7px 8px}
.payroll-table-card td{font-size:11px;padding:8px!important}
.payroll-table-card td div[style]{font-size:11px!important}
.payroll-mobile-action{min-height:52px;left:calc(var(--side) + 16px);right:16px;bottom:8px;border-radius:6px;padding:7px 10px}
.payroll-mobile-summary{font-size:11px}.payroll-mobile-action .btn{min-width:155px;min-height:34px;font-size:12px}
@media(max-width:1199px){.payroll-workspace>.payroll-module-tabs{display:none}.payroll-mobile-action{left:calc(var(--rail) + 14px);right:14px}}
@media(max-width:767px){.payroll-workspace>.payroll-module-tabs{display:flex}.payroll-workspace>.payroll-cycle-panel{display:none!important}.payroll-run-actions select{width:100%}.payroll-review-heading{display:block}.payroll-review-heading-actions{justify-content:flex-start;margin-top:8px}.payroll-mobile-action{left:10px;right:10px;bottom:76px;min-height:64px}.payroll-mobile-action .btn{min-width:0}}
/* Employee directory and profile */
.employee-directory{max-width:1500px;margin:0 auto}.directory-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}.directory-heading .page-title{margin:0}.directory-heading p{margin:5px 0 0;color:#5B6E64;font-size:13px}.directory-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}.directory-stat{background:#fff;border:1px solid var(--line);border-radius:8px;padding:16px 18px;box-shadow:0 2px 8px rgba(16,53,40,.035)}.directory-stat span{display:block;color:#5a7c6f;font-size:11px;font-weight:650;text-transform:uppercase;letter-spacing:.035em}.directory-stat strong{display:block;color:#0c2b1f;font-size:25px;line-height:1.2;margin:7px 0 4px}.directory-stat small{color:#5B6E64;font-size:11px}.directory-stat small.positive{color:#18875d}.directory-panel{background:#fff;border:1px solid var(--line);border-radius:9px;overflow:hidden;box-shadow:0 4px 16px rgba(15,51,38,.045)}.directory-toolbar{display:grid;grid-template-columns:minmax(280px,1fr) 190px 170px;gap:10px;padding:15px 16px 11px}.directory-search{height:40px;display:flex;align-items:center;gap:9px;border:1px solid #c1ded4;border-radius:6px;padding:0 11px;background:#fff;color:#5e746c}.directory-search:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(11,107,87,.1)}.directory-search .shell-icon{width:17px;height:17px}.directory-search input{border:0!important;box-shadow:none!important;padding:0!important;height:auto!important;min-width:0}.directory-toolbar select{height:40px}.directory-results{padding:0 16px 11px;color:#5B6E64;font-size:11px}.employee-directory-table{overflow:auto;border-top:1px solid var(--line)}.employee-directory-table table{min-width:990px}.employee-directory-table th{height:38px;padding:0 13px;background:#f3faf8;font-size:11px;letter-spacing:.055em}.employee-directory-table td{padding:11px 13px;font-size:11px}.employee-directory-table tr:last-child td{border-bottom:0}.employee-name-cell small{display:block;margin-top:2px;max-width:210px;overflow:hidden;text-overflow:ellipsis;color:#5e746c;font-size:11px;font-weight:400}.employee-code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:#466b5e;font-size:11px}.icon-action{width:32px;height:32px;border:0;border-radius:5px;background:transparent;color:#466b5e;font-size:18px;cursor:pointer}.icon-action:hover,.icon-action:focus-visible{background:#e4f8f0;color:var(--blue)}.employee-mobile-list{display:none}.directory-empty{display:none;padding:36px;text-align:center;color:#5d7b70;border-top:1px solid var(--line)}.directory-empty.show{display:block}

.profile-breadcrumb{display:flex;align-items:center;gap:8px;margin:0 0 12px;color:#5B6E64;font-size:11px;white-space:nowrap;overflow:hidden}.profile-breadcrumb button{border:0;background:transparent;padding:5px 0;color:var(--blue);font:600 11px inherit;cursor:pointer}.profile-breadcrumb strong{color:#395f50;overflow:hidden;text-overflow:ellipsis}.employee-workspace{max-width:1500px;margin:0 auto;border-radius:9px!important;overflow:hidden}.employee-workspace .profile-head{padding:22px 24px;align-items:center;border-bottom:1px solid var(--line)}.profile-avatar-wrap{position:relative;flex:none}.employee-workspace .profile-avatar{width:70px;height:70px;font-size:21px;background:#1d7453;box-shadow:inset 0 0 0 3px rgba(255,255,255,.22)}.profile-presence{position:absolute;right:1px;bottom:2px;width:14px;height:14px;border-radius:50%;background:#158556;border:3px solid #fff}.profile-name-line{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.profile-name-line h1{margin:0}.profile-role{margin-top:5px;color:#52655D;font-size:13px}.profile-role span{color:#98b4a9;margin:0 3px}.employee-workspace .profile-code{margin-top:6px;color:#5c786e;font-size:11px;font-weight:550}.profile-actions{display:flex;gap:8px;margin-left:auto}.profile-alert{display:flex;align-items:center;gap:12px;margin:14px 24px 0;padding:11px 13px;border:1px solid #f2cd7c;border-radius:7px;background:#fffaf0;color:#755213}.profile-alert-icon{display:grid;place-items:center;width:22px;height:22px;flex:none;border:1px solid #dc9e22;border-radius:50%;font-weight:800;color:#986400}.profile-alert div{flex:1}.profile-alert strong{font-size:12px;color:#614511}.profile-alert p{margin:2px 0 0;font-size:11px;color:#936d21}.profile-alert .btn{background:#fff}.profile-snapshot{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:14px 24px 0;border:1px solid var(--line);border-radius:7px}.profile-snapshot>div{padding:12px 15px;border-right:1px solid var(--line)}.profile-snapshot>div:last-child{border-right:0}.profile-snapshot span{display:block;color:#5d786f;font-size:11px;text-transform:uppercase;letter-spacing:.05em}.profile-snapshot strong{display:block;margin-top:5px;color:#103226;font-size:14px}.employee-workspace .profile-tabs{margin-top:14px;padding:0 20px;border-top:1px solid var(--line);background:#f8fdfc}.employee-workspace .profile-tab{min-height:44px}.employee-workspace .profile-content{padding:20px 24px 25px}.employee-workspace .profile-toolbar h2{font-size:15px}.employee-workspace .detail-table{border-radius:6px;overflow:hidden}.employee-workspace .detail-table td{padding:12px 14px}.profile-mobile-actions{display:none}

@media(min-width:768px) and (max-width:1199px){.directory-summary{grid-template-columns:repeat(2,1fr)}.directory-toolbar{grid-template-columns:minmax(220px,1fr) 170px 155px}.employee-workspace .profile-head{align-items:flex-start}.profile-snapshot{grid-template-columns:repeat(2,1fr)}.profile-snapshot>div:nth-child(2){border-right:0}.profile-snapshot>div:nth-child(-n+2){border-bottom:1px solid var(--line)}}

@media(max-width:767px){.directory-heading{align-items:flex-start}.directory-heading p{font-size:12px}.directory-heading .btn{width:auto;white-space:nowrap}.directory-summary{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-left:-12px;margin-right:-12px;padding:0 12px 4px;gap:8px}.directory-stat{min-width:132px;padding:13px 14px;scroll-snap-align:start}.directory-stat strong{font-size:21px}.directory-panel{margin:0 -1px}.directory-toolbar{grid-template-columns:1fr 1fr;padding:12px}.directory-search{grid-column:1/-1;height:44px}.directory-toolbar select{height:44px;min-width:0;padding-left:9px;font-size:11px}.directory-results{padding:0 12px 10px}.employee-directory-table{display:none}.employee-mobile-list{display:grid;gap:8px;padding:0 10px 12px;border-top:1px solid var(--line)}.employee-mobile-card{width:100%;min-height:76px;display:flex;align-items:center;gap:10px;padding:11px 9px;border:1px solid var(--line);border-radius:7px;background:#fff;text-align:left;color:inherit}.employee-mobile-card:first-child{margin-top:10px}.employee-mobile-card .mini-avatar{width:42px;height:42px;flex:none}.employee-mobile-identity{flex:1;min-width:0}.employee-mobile-identity strong,.employee-mobile-identity small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.employee-mobile-identity strong{font-size:12px;color:#113226}.employee-mobile-identity small{margin-top:3px;color:#5B6E64;font-size:11px}.employee-mobile-card>.badge{align-self:flex-start}.profile-breadcrumb span:nth-of-type(n+2),.profile-breadcrumb strong{display:none}.employee-workspace{border-left:0!important;border-right:0!important;border-radius:0!important;margin:0 -12px}.employee-workspace .profile-head{padding:19px 14px 16px;display:grid;grid-template-columns:auto 1fr;text-align:left}.employee-workspace .profile-avatar{width:58px;height:58px;font-size:18px}.profile-name-line{gap:6px}.profile-name-line h1{font-size:18px}.profile-role{font-size:11px}.profile-actions{display:none}.profile-alert{margin:12px 12px 0;padding:11px}.profile-alert .btn{display:none}.profile-snapshot{grid-template-columns:repeat(2,1fr);margin:12px}.profile-snapshot>div{padding:11px;border-bottom:1px solid var(--line)}.profile-snapshot>div:nth-child(2){border-right:0}.profile-snapshot>div:nth-child(n+3){border-bottom:0}.employee-workspace .profile-tabs{margin-top:10px;padding:0 8px;scrollbar-width:none}.employee-workspace .profile-tab{padding:11px 10px;min-height:44px}.employee-workspace .profile-content{padding:16px 12px 82px}.employee-workspace .profile-toolbar{align-items:flex-start;gap:10px}.employee-workspace .profile-toolbar select{width:145px!important}.employee-workspace .detail-table{display:table;min-width:100%;table-layout:fixed}.employee-workspace .detail-table td:first-child{width:40%;padding:11px 9px;font-size:11px}.employee-workspace .detail-table td:last-child{padding:11px 9px;overflow-wrap:anywhere}.profile-mobile-actions{position:fixed;left:0;right:0;bottom:68px;z-index:45;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:9px 12px;background:rgba(255,255,255,.96);border-top:1px solid var(--line);box-shadow:0 -3px 12px rgba(14,47,35,.06)}.profile-mobile-actions .btn{width:100%}}
/* Attendance command center */
.attendance-page{max-width:1500px;margin:0 auto}.attendance-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:16px}.attendance-heading .page-title{margin:0}.attendance-heading p{margin:5px 0 0;color:#5B6E64;font-size:13px}.attendance-heading-actions{display:flex;gap:8px}.attendance-heading-actions input{width:170px;height:40px}.attendance-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px}.attendance-kpi{display:flex;align-items:center;gap:13px;min-height:88px;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:8px}.attendance-kpi-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:7px;background:#e5f8f1;color:#207f5b}.attendance-kpi-icon .shell-icon{width:21px;height:21px}.attendance-kpi-icon.green{background:#e9f8f2;color:#0f855e}.attendance-kpi-icon.amber{background:#fff5e7;color:#9f6008}.attendance-kpi-icon.red{background:#fff0f0;color:#c7474a}.attendance-kpi>div>span{display:block;color:#5a7c6f;font-size:11px}.attendance-kpi strong{display:block;color:#102f24;font-size:22px;line-height:1.2;margin-top:2px}.attendance-kpi small{color:#647a72;font-size:11px}.attendance-command-grid{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(260px,.8fr);gap:12px;margin-bottom:12px}.attendance-overview-panel,.attendance-alert-panel,.attendance-list-panel,.attendance-history-panel{background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 2px 10px rgba(15,51,38,.035)}.attendance-section-head{min-height:52px;padding:12px 15px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px}.attendance-section-head strong,.attendance-history-head strong{display:block;color:#133528;font-size:12px}.attendance-section-head>div>span,.attendance-history-head span{display:block;margin-top:3px;color:#5B6E64;font-size:11px}.device-sync{display:flex!important;align-items:center;gap:6px;color:#4d7565!important}.device-sync i{width:7px;height:7px;border-radius:50%;background:#17855b}.attendance-overview-body{display:grid;grid-template-columns:185px minmax(150px,.75fr) minmax(260px,1.25fr);gap:18px;align-items:center;padding:16px}.attendance-donut{width:132px;height:132px;margin:auto;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#168460 0 var(--attendance-pct),#e2f1eb var(--attendance-pct) 360deg);position:relative}.attendance-donut:before{content:"";position:absolute;inset:22px;border-radius:50%;background:#fff}.attendance-donut>div{position:relative;text-align:center}.attendance-donut strong{display:block;font-size:23px;color:#123427}.attendance-donut span{display:block;color:#5c746b;font-size:11px}.attendance-distribution{border-left:1px solid var(--line);padding-left:18px}.attendance-distribution>div{display:flex;align-items:center;justify-content:space-between;padding:7px 0;color:#507467;font-size:11px}.attendance-distribution span{display:flex;align-items:center;gap:7px}.attendance-distribution i{width:7px;height:7px;border-radius:50%}.attendance-distribution i.green{background:#168460}.attendance-distribution i.amber{background:#ee9d27}.attendance-distribution i.red{background:#c14b4f}.attendance-distribution i.blue{background:#227f5e}.attendance-distribution strong{color:#1f4235}.attendance-distribution small{margin-left:4px;color:#5e736b;font-weight:400}.branch-comparison{border-left:1px solid var(--line);padding-left:18px}.branch-comparison-title{margin-bottom:6px;color:#1b3c30;font-size:11px;font-weight:700}.branch-progress{display:grid;grid-template-columns:minmax(90px,1fr) 80px 34px;gap:8px;align-items:center;padding:6px 0}.branch-progress>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#476d5f;font-size:11px}.branch-progress span small{float:right;color:#667972}.branch-progress>div{height:5px;border-radius:5px;background:#e1efea;overflow:hidden}.branch-progress i{display:block;height:100%;background:#168460;border-radius:5px}.branch-progress>strong{font-size:11px;color:#476d5f;text-align:right}.attendance-alert-panel{padding-bottom:12px}.attendance-alert{width:calc(100% - 24px);min-height:64px;margin:10px 12px 0;padding:10px;display:flex;align-items:flex-start;gap:9px;border:1px solid #f0d49d;border-radius:7px;background:#fffaf1;text-align:left;color:#795417}.attendance-alert>span{width:20px;height:20px;display:grid;place-items:center;border:1px solid #9b6b15;border-radius:50%;font-weight:800}.attendance-alert>div{flex:1}.attendance-alert strong,.attendance-ready strong{display:block;color:#55401a;font-size:11px}.attendance-alert small,.attendance-ready small{display:block;margin-top:3px;color:#887048;font-size:11px;line-height:1.35}.attendance-alert b{color:#a46600}.attendance-ready{display:flex;gap:9px;margin:10px 12px 0;padding:10px;border:1px solid #95e4c6;border-radius:7px;background:#eafaf4}.attendance-ready>span{color:#20815c}.attendance-ready strong{color:#1f5941}.attendance-ready small{color:#456d5c}.attendance-filterbar{display:grid;grid-template-columns:minmax(220px,1fr) 175px 150px auto auto;gap:8px;padding:12px 14px 8px}.attendance-search{height:38px;display:flex;align-items:center;gap:8px;border:1px solid #c2ddd3;border-radius:6px;padding:0 10px}.attendance-search .shell-icon{width:16px;height:16px;color:#5B6E64}.attendance-search input{border:0!important;box-shadow:none!important;height:auto!important;padding:0!important}.attendance-filterbar select,.attendance-filterbar .btn{height:38px}.attendance-result-line{padding:0 14px 9px;color:#5a776d;font-size:11px}.attendance-live-desktop{overflow:auto;border-top:1px solid var(--line)}.attendance-live-desktop table{min-width:1030px}.attendance-live-desktop th{height:36px;padding:0 11px;background:#f3faf8;font-size:11px;letter-spacing:.04em}.attendance-live-desktop td{padding:9px 11px;font-size:11px}.attendance-person{display:flex;align-items:center;gap:9px}.attendance-person>span{width:31px;height:31px;display:grid;place-items:center;flex:none;border-radius:50%;background:#def7ed;color:#1f7b57;font-size:11px;font-weight:750}.attendance-person strong,.attendance-person small{display:block}.attendance-person strong{color:#15372a;font-size:11px}.attendance-person small{margin-top:2px;color:#5B6E64;font-size:11px}.attendance-late{color:#a76610;font-weight:700}.attendance-live-mobile{display:none}.attendance-history-panel{display:none;margin-top:12px;padding-bottom:14px}.attendance-history-panel.open{display:block}.attendance-history-head{padding:13px 15px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.attendance-history-filters{display:grid;grid-template-columns:repeat(6,minmax(120px,1fr));gap:9px;padding:13px}.attendance-history-panel #all-att-stats{padding:0 13px;margin-bottom:12px}.attendance-history-panel #all-att-table{padding:0 13px}.attendance-loading{padding:24px;text-align:center;color:#5e746c}.payroll-attendance-return{display:none;margin:0 13px 12px;padding:10px 12px;border-radius:7px;background:#e7f9f3;border:1px solid #bdefdb;font-size:11px;color:#205640}

/* Complete employee master form */
.employee-master-modal{width:min(900px,94vw)!important;height:min(760px,92vh);max-height:92vh!important;display:flex;flex-direction:column;overflow:hidden}.employee-master-modal>.modal-title{flex:none}.employee-master-modal>.form-grid{grid-template-columns:repeat(3,minmax(0,1fr));flex:1;min-height:0;max-height:none;overflow-y:auto;padding:4px 8px 12px 1px}.employee-master-modal>.form-grid:before{content:"Employee master information";grid-column:1/-1;padding:5px 0 4px;color:#14392b;font-size:12px;font-weight:750}.employee-master-modal .form-group label{font-size:11px}.employee-master-modal input,.employee-master-modal select{min-height:39px}.employee-master-modal>#ne-hikvision-wrap{flex:none;margin:8px 0!important;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:#F7FAF8}.employee-master-modal>div:last-child{flex:none;margin-top:4px!important;padding-top:10px;border-top:1px solid var(--line);background:#fff}

@media(min-width:768px) and (max-width:1199px){.attendance-command-grid{grid-template-columns:1fr}.attendance-overview-body{grid-template-columns:170px 1fr 1.3fr}.attendance-kpis{grid-template-columns:repeat(2,1fr)}.attendance-filterbar{grid-template-columns:minmax(220px,1fr) 160px 145px auto}.attendance-filterbar .btn:last-child{display:none}.attendance-history-filters{grid-template-columns:repeat(3,1fr)}}

@media(max-width:767px){.attendance-heading{align-items:flex-start}.attendance-heading p{font-size:11px;max-width:190px}.attendance-heading-actions{flex-direction:column;align-items:stretch}.attendance-heading-actions input{width:145px;height:40px}.attendance-heading-actions .btn{width:145px;white-space:nowrap}.attendance-kpis{grid-template-columns:repeat(2,1fr);gap:8px}.attendance-kpi{min-height:78px;padding:11px;gap:9px}.attendance-kpi-icon{width:34px;height:34px}.attendance-kpi strong{font-size:19px}.attendance-command-grid{grid-template-columns:1fr}.attendance-overview-body{grid-template-columns:110px 1fr;padding:13px;gap:12px}.attendance-donut{width:102px;height:102px}.attendance-donut:before{inset:17px}.attendance-donut strong{font-size:19px}.attendance-distribution{padding-left:12px}.branch-comparison{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);padding:12px 0 0}.attendance-alert-panel{display:none}.attendance-filterbar{grid-template-columns:1fr 1fr;padding:10px}.attendance-search{grid-column:1/-1;height:44px}.attendance-filterbar select{height:44px;min-width:0}.attendance-filterbar .btn{min-height:42px;height:auto;font-size:12px}.attendance-result-line{padding-left:10px}.attendance-live-desktop{display:none}.attendance-live-mobile{display:grid;gap:8px;padding:0 9px 10px;border-top:1px solid var(--line)}.attendance-mobile-card{border:1px solid var(--line);border-radius:7px;background:#fff;padding:11px}.attendance-mobile-card:first-child{margin-top:9px}.attendance-mobile-head{display:flex;justify-content:space-between;gap:8px}.attendance-mobile-times{display:grid;grid-template-columns:repeat(3,1fr);margin-top:11px;padding-top:10px;border-top:1px solid var(--line)}.attendance-mobile-times>div{border-right:1px solid var(--line);padding:0 8px}.attendance-mobile-times>div:first-child{padding-left:0}.attendance-mobile-times>div:last-child{border-right:0}.attendance-mobile-times span,.attendance-mobile-times strong{display:block}.attendance-mobile-times span{font-size:11px;color:#646F68}.attendance-mobile-times strong{margin-top:3px;font-size:11px;color:#1d3f32}.attendance-mobile-foot{display:flex;justify-content:space-between;margin-top:10px;color:#5c7a6f;font-size:11px}.attendance-history-panel{margin-left:-1px;margin-right:-1px}.attendance-history-filters{grid-template-columns:repeat(2,1fr);padding:10px}.attendance-history-panel #all-att-stats{display:flex;overflow:auto}.employee-master-modal{width:100%!important;max-height:94vh!important}.employee-master-modal>.form-grid{grid-template-columns:1fr;max-height:68vh}.employee-master-modal>.form-grid:before{grid-column:1}.employee-master-modal>div:last-child{position:sticky;bottom:0;background:#fff;padding-top:10px}.employee-master-modal>div:last-child .btn{flex:1}}

/* Keep the branch comparison compact when a company has many branches. */
.attendance-overview-body{align-items:start}
.branch-comparison{max-height:286px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}
.branch-comparison-title{position:sticky;top:0;z-index:1;padding:2px 4px 7px;margin:0 -4px 2px;background:#fff}
@media(max-width:767px){.branch-comparison{max-height:240px}}
/* Keep employee master actions visible while its fields scroll */
.employee-master-modal>#ne-hikvision-wrap{display:grid!important;grid-template-columns:95px minmax(220px,1fr) 210px;align-items:center;gap:5px 10px;margin:5px 0!important;padding:5px 9px!important;max-height:68px;overflow:hidden}.employee-master-modal>#ne-hikvision-wrap>label{margin:0!important}.employee-master-modal>#ne-hikvision-wrap>label input{width:16px!important;height:16px!important;min-height:16px!important}.employee-master-modal>#ne-hikvision-wrap>div{grid-column:2/-1}.employee-master-modal>div:last-child{padding-top:6px!important}
.employee-master-modal{position:relative;padding-bottom:70px!important}.employee-master-modal>div:last-child{position:absolute!important;left:18px;right:18px;bottom:16px;z-index:4;margin:0!important;padding:9px 0 0!important}
.employee-master-modal>.modal-title{position:sticky;top:0;z-index:5;min-height:54px;padding:0 4px 0 2px;border-bottom:1px solid #ddede7;background:#fff}
.employee-master-modal>.form-grid{scrollbar-gutter:stable;padding-right:10px}
.employee-master-modal>.form-grid .form-group{min-width:0;padding:2px 0}
.employee-master-modal>.form-grid .form-group label{display:flex;align-items:baseline;gap:4px;color:#365c4d;line-height:1.25}
.employee-master-modal>.form-grid .form-group small{display:block;color:#5B6E64;font-size:11px;line-height:1.35;margin-top:4px}
.employee-master-modal input:hover,.employee-master-modal select:hover{border-color:#75d4b0}
.employee-master-modal>div:last-child{box-shadow:0 -7px 14px rgba(16,53,40,.04)}
@media(max-width:767px){.employee-master-modal>#ne-hikvision-wrap{grid-template-columns:1fr;gap:5px;max-height:none;padding:9px!important}.employee-master-modal>#ne-hikvision-wrap>div{grid-column:1}.employee-master-modal>#ne-hikvision-wrap>label[style]{margin-top:4px!important}.employee-master-modal>.form-grid{padding-right:2px}.employee-master-modal>.modal-title{min-height:51px}}
/* Loans and advances */
.loan-page{max-width:1500px;margin:0 auto}.loan-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:16px}.loan-heading .page-title{margin:0}.loan-heading p{margin:5px 0 0;color:#5B6E64;font-size:13px}.loan-heading>div:last-child{display:flex;gap:8px}.loan-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px}.loan-kpi{min-height:88px;display:flex;align-items:center;gap:12px;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:8px}.loan-kpi>span{width:42px;height:42px;display:grid;place-items:center;border-radius:7px;background:#e5f8f1;color:#207f5b}.loan-kpi>span.green{background:#eaf8f2;color:#13815a}.loan-kpi>span.amber{background:#fff5e7;color:#9f6008}.loan-kpi>span.violet{background:#ddf7f4;color:#1f7b75}.loan-kpi .shell-icon{width:21px;height:21px}.loan-kpi small{display:block;color:#55655e;font-size:11px}.loan-kpi strong{display:block;margin-top:3px;color:#16281F;font-size:17px}.loan-kpi p{margin:3px 0 0;color:#647a72;font-size:11px}.loan-overview-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,.8fr);gap:12px;margin-bottom:12px}.loan-portfolio,.loan-alerts,.loan-list-panel{background:#fff;border:1px solid var(--line);border-radius:8px}.loan-panel-head{padding:13px 15px;border-bottom:1px solid var(--line)}.loan-panel-head strong,.loan-panel-head span{display:block}.loan-panel-head strong{color:#1B2E27;font-size:12px}.loan-panel-head span{margin-top:3px;color:#5B6E64;font-size:11px}.loan-portfolio-body{display:grid;grid-template-columns:170px 180px 1fr;align-items:center;gap:20px;padding:16px}.loan-ring{width:125px;height:125px;margin:auto;display:grid;place-items:center;border-radius:50%;background:conic-gradient(#15845e 0 var(--paid),#207e5c var(--paid) 360deg);position:relative}.loan-ring:before{content:"";position:absolute;inset:20px;border-radius:50%;background:#fff}.loan-ring>div{position:relative;text-align:center}.loan-ring strong{display:block;color:#133528;font-size:12px}.loan-ring span{font-size:11px;color:#5c746b}.loan-legend{border-left:1px solid var(--line);padding-left:17px}.loan-legend>div{padding:9px 0}.loan-legend span{display:flex;align-items:center;gap:6px;color:#567a6d;font-size:11px}.loan-legend i{width:7px;height:7px;border-radius:50%}.loan-legend i.active{background:#207e5c}.loan-legend i.paid{background:#15845e}.loan-legend strong{display:block;margin:3px 0 0 13px;color:#1c3f32;font-size:11px}.loan-type-breakdown{border-left:1px solid var(--line);padding-left:18px}.loan-type-breakdown>strong{font-size:11px;color:#1c3f32}.loan-type-breakdown>div{margin-top:10px}.loan-type-breakdown span{display:flex;justify-content:space-between;color:#507568;font-size:11px}.loan-type-breakdown small{color:#647a72}.loan-type-breakdown b{display:block;height:5px;margin-top:4px;border-radius:4px;background:#e1efea;overflow:hidden}.loan-type-breakdown i{display:block;height:100%;background:#207e5c}.loan-alerts{padding-bottom:12px}.loan-alerts button{width:calc(100% - 24px);min-height:74px;display:flex;gap:10px;margin:10px 12px 0;padding:11px;border:1px solid #efd49e;border-radius:7px;background:#fffaf1;text-align:left}.loan-alerts button.danger{border-color:#edc1c2;background:#fff5f5}.loan-alerts button>span{width:21px;height:21px;display:grid;place-items:center;border:1px solid #986814;border-radius:50%;color:#a36800;font-weight:800}.loan-alerts button>div{flex:1}.loan-alerts button strong,.loan-alerts button small{display:block}.loan-alerts button strong{color:#5b451f;font-size:12px}.loan-alerts button small{margin-top:4px;color:#7a6238;font-size:12px}.loan-filterbar{display:grid;grid-template-columns:minmax(260px,1fr) 180px 190px;gap:8px;padding:12px 14px 8px}.loan-filterbar label{height:39px;display:flex;align-items:center;gap:8px;border:1px solid #c2ddd3;border-radius:6px;padding:0 10px}.loan-filterbar label .shell-icon{width:16px;height:16px;color:#5B6E64}.loan-filterbar input{border:0!important;box-shadow:none!important;height:auto!important;padding:0!important}.loan-result{padding:0 14px 9px;color:#5b776d;font-size:11px}.loan-table{overflow:auto;border-top:1px solid var(--line)}.loan-table table{min-width:980px}.loan-table th{height:36px;padding:0 11px;background:#f3faf8;font-size:11px}.loan-table td{padding:10px 11px;font-size:11px}.loan-table tbody tr{cursor:pointer}.loan-person{display:flex;align-items:center;gap:9px}.loan-person>span{width:31px;height:31px;display:grid;place-items:center;border-radius:50%;background:#def7ed;color:#1f7b57;font-size:11px;font-weight:750}.loan-person strong,.loan-person small{display:block}.loan-person strong{color:#17392c;font-size:11px}.loan-person small{margin-top:2px;color:#5B6E64;font-size:11px}.loan-progress{display:inline-block;width:70px;height:5px;border-radius:5px;background:#dff0ea;overflow:hidden}.loan-progress i{display:block;height:100%;background:#0B6B57}.loan-table td>.loan-progress+small{margin-left:5px;color:#5d7b70}.loan-mobile-list,.loan-mobile-add{display:none}.loan-drawer-overlay{position:fixed;inset:0;z-index:94;background:rgba(7,27,19,.35);opacity:0;visibility:hidden;transition:.18s}.loan-drawer-overlay.open{opacity:1;visibility:visible}.loan-detail-drawer{position:fixed;top:0;right:0;bottom:0;width:min(390px,94vw);z-index:95;background:#fff;border-left:1px solid var(--line);box-shadow:-12px 0 30px rgba(8,30,22,.14);transform:translateX(103%);transition:transform .22s ease;overflow-y:auto;padding-bottom:78px}.loan-detail-drawer.open{transform:translateX(0)}.loan-detail-head{display:flex;justify-content:space-between;padding:18px;border-bottom:1px solid var(--line)}.loan-detail-head strong,.loan-detail-head span{display:block}.loan-detail-head strong{font-size:15px;color:#133528}.loan-detail-head span{margin-top:3px;font-size:11px;color:#5B6E64}.loan-detail-person{padding:14px}.loan-detail-person .loan-mobile-card{display:block}.loan-detail-summary{display:grid;grid-template-columns:1fr 1fr;margin:0 14px;border:1px solid var(--line);border-radius:7px}.loan-detail-summary>div{padding:12px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.loan-detail-summary>div:nth-child(2n){border-right:0}.loan-detail-summary>div:nth-child(n+3){border-bottom:0}.loan-detail-summary span,.loan-detail-summary strong{display:block}.loan-detail-summary span{color:#5B6E64;font-size:11px}.loan-detail-summary strong{margin-top:4px;color:#183a2d;font-size:11px}.loan-detail-section{margin:14px;padding:14px;border:1px solid var(--line);border-radius:7px}.loan-detail-section>strong{font-size:11px;color:#183a2d}.loan-detail-section p{margin:4px 0 10px;color:#5a756b;font-size:11px}.loan-progress.large{width:100%;height:7px}.loan-timeline{display:grid;grid-template-columns:22px 1fr;gap:7px 9px;margin-top:12px}.loan-timeline>span{width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:#e9f4f0;color:#61766e;font-size:11px}.loan-timeline>span.done{background:#e9f8f2;color:#12805a}.loan-timeline>span.pending{background:#fff3df;color:#a56608}.loan-timeline b,.loan-timeline small{display:block}.loan-timeline b{font-size:11px;color:#234538}.loan-timeline small{margin-top:2px;color:#5B6E64;font-size:11px}.loan-detail-actions{position:fixed;right:0;bottom:0;width:min(390px,94vw);display:flex;gap:8px;padding:12px 14px;background:#fff;border-top:1px solid var(--line)}.loan-detail-actions .btn{flex:1}.loan-mobile-card{width:100%;border:1px solid var(--line);border-radius:7px;background:#fff;padding:12px;text-align:left;color:inherit}.loan-mobile-head{display:flex;justify-content:space-between;gap:8px}.loan-mobile-values{display:grid;grid-template-columns:1fr 1fr;margin:12px 0 9px}.loan-mobile-values span,.loan-mobile-values strong{display:block}.loan-mobile-values span{color:#5B6E64;font-size:11px}.loan-mobile-values strong{margin-top:3px;color:#183b2e;font-size:11px}.loan-mobile-card>small{float:right;color:#5c786d;font-size:11px}
@media(max-width:1199px){.loan-overview-grid{grid-template-columns:1fr}.loan-kpis{grid-template-columns:repeat(2,1fr)}}@media(max-width:767px){.loan-heading{align-items:flex-start}.loan-heading p{font-size:11px}.loan-heading>div:last-child .btn:first-child{display:none}.loan-heading>div:last-child .btn-primary{white-space:nowrap}.loan-kpis{grid-template-columns:repeat(2,1fr);gap:8px}.loan-kpi{min-height:78px;padding:11px}.loan-kpi>span{width:34px;height:34px}.loan-kpi strong{font-size:13px}.loan-overview-grid{display:none}.loan-filterbar{grid-template-columns:1fr 1fr;padding:10px}.loan-filterbar label{grid-column:1/-1;height:44px}.loan-filterbar select{height:44px;min-width:0}.loan-table{display:none}.loan-mobile-list{display:grid;gap:8px;padding:0 9px 82px;border-top:1px solid var(--line)}.loan-mobile-list .loan-mobile-card:first-child{margin-top:9px}.loan-mobile-add{position:fixed;left:12px;right:12px;bottom:78px;z-index:44;display:block;width:calc(100% - 24px);height:46px;border:0;border-radius:7px;background:var(--blue);color:#fff;font:700 12px inherit;box-shadow:0 5px 16px rgba(11,107,87,.24)}.loan-detail-drawer{width:100%}.loan-detail-actions{width:100%;bottom:68px}.loan-detail-drawer{padding-bottom:138px}}

/* Employee and company compliance documents */
.document-page{max-width:1500px;margin:0 auto}.document-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:16px}.document-heading h1{margin:0;color:#16281F;font-size:24px;letter-spacing:-.45px}.document-heading p{margin:5px 0 0;color:#5B6E64;font-size:12px}.document-heading>div:last-child{display:flex;gap:8px}.document-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px}.document-kpi{min-height:88px;display:flex;align-items:center;gap:12px;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:8px}.document-kpi>span{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;flex:none}.document-kpi>span.blue{color:#0B6B57;background:#E2F0EB}.document-kpi>span.green{color:#0B6B57;background:#eaf8f1}.document-kpi>span.amber{color:#a96409;background:#fff4e2}.document-kpi>span.red{color:#c94649;background:#fff0f0}.document-kpi>span .shell-icon{width:20px;height:20px}.document-kpi small,.document-kpi strong,.document-kpi p{display:block}.document-kpi small{color:#55655e;font-size:11px}.document-kpi strong{margin-top:3px;color:#16281F;font-size:18px}.document-kpi p{margin:3px 0 0;color:#646F68;font-size:11px}.document-overview{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,1fr);gap:12px;margin-bottom:12px}.document-health,.document-urgent,.document-register{background:#fff;border:1px solid var(--line);border-radius:8px}.document-section-head{min-height:52px;padding:11px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.document-section-head strong,.document-section-head span{display:block}.document-section-head strong{color:#17392c;font-size:12px}.document-section-head span{margin-top:3px;color:#5B6E64;font-size:11px}.document-section-head>button{border:0;background:transparent;color:var(--blue);font-size:12px;cursor:pointer}.document-health-body{padding:20px 16px}.document-health-bar{height:42px;display:flex;overflow:hidden;border-radius:5px;background:#e2f1eb}.document-health-bar i{height:100%;display:grid;place-items:center;font-style:normal;min-width:0}.document-health-bar i.valid{background:#0B6B57}.document-health-bar i.soon{background:#ef9b24}.document-health-bar i.expired{background:#c3484d}.document-health-bar span{color:#fff;font-size:11px;font-weight:700}.document-health-legend{display:flex;gap:22px;margin-top:18px;color:#55796c;font-size:11px}.document-health-legend span{display:flex;align-items:center;gap:6px}.document-health-legend i{width:7px;height:7px;border-radius:2px}.document-health-legend i.valid{background:#0B6B57}.document-health-legend i.soon{background:#ef9b24}.document-health-legend i.expired{background:#c3484d}.document-health-legend b{color:#1d4033}.document-urgent-row{width:100%;min-height:43px;display:grid;grid-template-columns:8px minmax(120px,1fr) auto auto;align-items:center;gap:9px;padding:7px 13px;border:0;border-bottom:1px solid #e9f3ef;background:#fff;text-align:left;cursor:pointer}.document-urgent-row:last-child{border-bottom:0}.document-urgent-row:hover{background:#F3F8F5}.document-urgent-row>i{width:7px;height:7px;border-radius:50%}.document-urgent-row>i.expired{background:#c3484d}.document-urgent-row>i.soon{background:#ef9b24}.document-urgent-row span strong,.document-urgent-row span small{display:block}.document-urgent-row span strong{color:#1d4033;font-size:11px}.document-urgent-row span small{margin-top:2px;color:#647a72;font-size:11px}.document-urgent-row>b{padding:4px 7px;border:1px solid #94e4c5;border-radius:4px;color:#0B6B57;font-size:11px}.document-clear-state{padding:34px 18px;text-align:center;color:#5d7b70;font-size:11px}.document-filterbar{display:grid;grid-template-columns:minmax(230px,1fr) 160px 180px 160px auto;gap:8px;padding:12px 14px 8px}.document-filterbar label{height:38px;display:flex;align-items:center;gap:8px;padding:0 10px;border:1px solid #c2ddd3;border-radius:6px}.document-filterbar label .shell-icon{width:16px;height:16px;color:#5B6E64}.document-filterbar input{height:auto!important;padding:0!important;border:0!important;box-shadow:none!important}.document-filterbar select,.document-filterbar .btn{height:38px}.document-filter-button{display:flex;align-items:center;gap:6px}.document-filter-button .shell-icon{width:14px;height:14px}.document-result{padding:0 14px 9px;color:#5d7b70;font-size:11px}.document-result strong{color:#1d4033}.document-table{overflow:auto;border-top:1px solid var(--line)}.document-table table{min-width:1050px}.document-table th{height:36px;padding:0 11px;background:#f3faf8;font-size:11px;letter-spacing:.04em}.document-table td{padding:9px 11px;font-size:11px}.document-table tbody tr{cursor:pointer}.document-table tbody tr:hover{background:#F3F8F5}.document-table td>strong,.document-table td>small{display:block}.document-table td>strong{font-size:11px;color:#1d4033}.document-table td>small{margin-top:2px;color:#5f736c;font-size:11px}.document-person{display:flex;align-items:center;gap:9px}.document-person>span{width:31px;height:31px;display:grid;place-items:center;border-radius:50%;background:#def7ed;color:#1f7b57;font-size:11px;font-weight:750}.document-person strong,.document-person small{display:block}.document-person strong{font-size:11px;color:#183a2d}.document-person small{margin-top:2px;color:#646F68;font-size:11px}.document-time{white-space:nowrap;font-size:11px;font-weight:650}.document-time.danger{color:#d14343}.document-time.warning{color:#a1600a}.document-time.success{color:#178451}.document-time.neutral{color:#5B6E64}.document-file{display:flex;align-items:center;gap:4px;border:0;background:transparent;color:#0B6B57;font-size:11px;cursor:pointer}.document-file .shell-icon{width:14px;height:14px}.document-no-file{color:#99681e;font-size:11px}.document-more{width:32px;height:32px;border:0;border-radius:5px;background:transparent;color:#567a6d;cursor:pointer}.document-more:hover{background:#def7ed;color:#0B6B57}.document-mobile-list,.document-mobile-capture{display:none}.document-drawer-overlay{position:fixed;inset:0;z-index:94;background:rgba(7,27,19,.35);opacity:0;visibility:hidden;transition:.18s}.document-drawer-overlay.open{opacity:1;visibility:visible}.document-detail-drawer{position:fixed;top:0;right:0;bottom:0;width:min(390px,94vw);z-index:95;overflow-y:auto;padding-bottom:78px;background:#fff;border-left:1px solid var(--line);box-shadow:-12px 0 30px rgba(8,30,22,.14);transform:translateX(103%);transition:transform .22s}.document-detail-drawer.open{transform:translateX(0)}.document-detail-head{min-height:68px;display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--line)}.document-detail-head strong,.document-detail-head span{display:block}.document-detail-head strong{color:#133428;font-size:14px}.document-detail-head span{margin-top:3px;color:#5B6E64;font-size:11px}.document-detail-head button{width:36px;height:36px;border:0;background:transparent;font-size:20px;color:#59786c;cursor:pointer}.document-detail-status{padding:12px 16px 0}.document-detail-person{display:flex;align-items:center;gap:10px;padding:14px 16px}.document-detail-person>span{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:#def7ed;color:#1f7b57;font-size:11px;font-weight:750}.document-detail-person strong,.document-detail-person small{display:block}.document-detail-person strong{font-size:11px;color:#183a2d}.document-detail-person small{margin-top:3px;color:#5B6E64;font-size:11px}.document-detail-section{margin:0 14px 12px;padding:13px;border:1px solid var(--line);border-radius:7px}.document-detail-section>strong{display:block;margin-bottom:9px;color:#183a2d;font-size:11px}.document-detail-section>div:not(.document-attachment):not(.document-no-attachment){display:grid;grid-template-columns:1fr 1fr;padding:6px 0;border-bottom:1px solid #e9f3ef}.document-detail-section>div:last-child{border-bottom:0}.document-detail-section span,.document-detail-section p{color:#5B6E64;font-size:11px}.document-detail-section b{color:#264a3d;font-size:11px;font-weight:650}.document-detail-section p{margin:9px 0 3px}.document-attachment{display:flex;align-items:center;gap:8px;padding:9px;border:1px solid #d8ece4;border-radius:6px;background:#F7FAF8}.document-attachment .shell-icon{color:#c94649}.document-attachment span{flex:1}.document-attachment b,.document-attachment small{display:block}.document-attachment small{margin-top:2px}.document-attachment button{border:0;background:transparent;color:#0B6B57;font-size:12px;cursor:pointer}.document-no-attachment{padding:10px;border-radius:5px;background:#fff8eb;color:#9a6b22;font-size:11px}.document-detail-actions{position:fixed;right:0;bottom:0;width:min(390px,94vw);display:flex;gap:8px;padding:12px 14px;background:#fff;border-top:1px solid var(--line)}.document-detail-actions .btn{flex:1}.document-mobile-card{width:100%;padding:12px;border:1px solid var(--line);border-radius:7px;background:#fff;text-align:left;color:inherit}.document-mobile-card.expired{border-left:3px solid #c94649}.document-mobile-head{display:flex;justify-content:space-between;gap:8px}.document-mobile-head strong,.document-mobile-head small{display:block}.document-mobile-head strong{font-size:11px;color:#17392c}.document-mobile-head small{margin-top:2px;color:#646F68;font-size:11px}.document-mobile-type{margin-top:10px;color:#264a3d;font-size:11px}.document-mobile-type small{display:block;margin-top:2px;color:#5B6E64;font-size:11px}.document-mobile-foot{display:grid;grid-template-columns:1fr auto 10px;align-items:center;gap:7px;margin-top:10px;padding-top:9px;border-top:1px solid #e9f3ef}.document-mobile-foot>span{display:flex;align-items:center;gap:5px;color:#5c7a6f;font-size:11px}.document-mobile-foot .shell-icon{width:13px;height:13px}.document-mobile-foot>b{color:#5a786d}
@media(max-width:1199px){.document-kpis{grid-template-columns:repeat(2,1fr)}.document-overview{grid-template-columns:1fr}.document-filterbar{grid-template-columns:minmax(220px,1fr) 150px 170px auto}.document-filterbar #doc-branch-filter{display:none}}
@media(max-width:767px){.document-heading{align-items:flex-start}.document-heading h1{font-size:20px}.document-heading p{max-width:220px;font-size:11px;line-height:1.45}.document-heading>div:last-child .btn:first-child{display:none}.document-heading>div:last-child .btn-primary{white-space:nowrap}.document-kpis{grid-template-columns:repeat(2,1fr);gap:8px}.document-kpi{min-height:78px;padding:11px;gap:9px}.document-kpi>span{width:34px;height:34px}.document-kpi strong{font-size:16px}.document-overview{display:block}.document-urgent{display:none}.document-health-body{padding:14px 12px}.document-health-bar{height:28px}.document-health-legend{gap:12px;justify-content:space-between;margin-top:12px}.document-filterbar{grid-template-columns:1fr auto;padding:10px}.document-filterbar label{grid-column:1/-1;height:44px}.document-filterbar select{display:none}.document-filterbar .document-filter-button{height:42px}.document-result{padding-left:10px}.document-table{display:none}.document-mobile-list{display:grid;gap:8px;padding:0 9px 82px;border-top:1px solid var(--line)}.document-mobile-card:first-child{margin-top:9px}.document-mobile-capture{position:fixed;left:12px;right:12px;bottom:78px;z-index:44;display:block;width:calc(100% - 24px);height:46px;border:0;border-radius:7px;background:var(--blue);color:#fff;font:700 12px inherit;box-shadow:0 5px 16px rgba(11,107,87,.24)}.document-detail-drawer{width:100%;padding-bottom:138px}.document-detail-actions{width:100%;bottom:68px}}

/* Botswana labour rules command center */
.labour-page{max-width:1500px;margin:0 auto;padding-bottom:70px}.labour-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:16px}.labour-heading h1{margin:0;color:#16281F;font-size:24px;letter-spacing:-.45px}.labour-heading p{margin:5px 0 0;color:#5B6E64;font-size:12px}.labour-heading>div:last-child{display:flex;gap:8px}.labour-unsaved{display:inline-flex;align-items:center;gap:5px;margin-top:6px;color:#a56008;font-size:11px}.labour-unsaved:before{content:"";width:6px;height:6px;border-radius:50%;background:#a66613}.labour-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px}.labour-kpi{min-height:88px;display:flex;align-items:center;gap:12px;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:8px}.labour-kpi>span{width:42px;height:42px;display:grid;place-items:center;border-radius:8px;flex:none}.labour-kpi>span.green{color:#0B6B57;background:#eaf8f1}.labour-kpi>span.blue{color:#0B6B57;background:#E2F0EB}.labour-kpi>span.amber{color:#a96409;background:#fff4e2}.labour-kpi small,.labour-kpi strong,.labour-kpi p{display:block}.labour-kpi small{color:#55655e;font-size:11px}.labour-kpi strong{margin-top:3px;color:#16281F;font-size:16px}.labour-kpi p{margin:3px 0 0;color:#646F68;font-size:11px}.labour-tabs{position:sticky;top:72px;z-index:20;display:flex;overflow-x:auto;padding:0 12px;background:#fff;border:1px solid var(--line);border-radius:8px 8px 0 0;scrollbar-width:none}.labour-tabs button{min-height:46px;padding:0 14px;border:0;border-bottom:2px solid transparent;background:#fff;color:#52655D;font-size:12px;white-space:nowrap;cursor:pointer}.labour-tabs button.active{border-bottom-color:var(--blue);color:var(--blue);font-weight:700}.labour-tab-content{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,1fr);gap:12px;padding-top:12px}.labour-rule-banner{display:none!important}.labour-section-card{display:none!important;margin:0!important;border:1px solid var(--line)!important;border-radius:8px!important;box-shadow:0 1px 3px rgba(19,38,30,.04)!important}.labour-section-card.labour-section-visible{display:block!important}.labour-section-card[data-labour-section="overview"]:nth-child(2){grid-column:2}.labour-section-card[data-labour-section="overview"].labour-history-card{grid-column:1/-1}.labour-section-card[data-labour-section="working"],.labour-section-card[data-labour-section="paye"],.labour-section-card[data-labour-section="wages"],.labour-section-card[data-labour-section="holidays"],.labour-section-card[data-labour-section="history"]{grid-column:1/-1}.labour-section-card>.card-title:first-child{margin:-16px -16px 16px!important;padding:15px 16px;border-bottom:1px solid var(--line);color:#1B2E27;font-size:13px}.labour-section-card .form-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.labour-section-card .form-group{margin-bottom:0}.labour-section-card .form-group label{margin-bottom:6px;color:#3F5449;font-size:11px}.labour-section-card input,.labour-section-card select{height:40px;font-size:11px}.labour-section-card table{min-width:650px}.labour-section-card th{height:36px;font-size:11px}.labour-section-card td{padding:8px;font-size:11px}.labour-section-card[data-labour-section="overview"]:not(.labour-history-card) .badge{display:block;margin:0 0 7px!important;padding:9px 10px;white-space:normal;text-align:left;line-height:1.35}.labour-history-card{overflow-x:auto}.labour-sticky-actions{position:fixed;left:var(--side);right:0;bottom:0;z-index:45;min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 28px;background:#fff;border-top:1px solid var(--line);box-shadow:0 -3px 14px rgba(19,38,30,.05)}.app.sidebar-collapsed .labour-sticky-actions{left:var(--rail)}.labour-sticky-actions>span{display:flex;align-items:center;gap:7px;color:#55655e;font-size:12px}.labour-sticky-actions>span i{width:7px;height:7px;border-radius:50%;background:#0B6B57}.labour-sticky-actions.changed>span{color:#a16109}.labour-sticky-actions.changed>span i{background:#a66613}.labour-sticky-actions>div{display:flex;gap:8px}.labour-sticky-actions .btn{min-width:150px}
@media(min-width:768px) and (max-width:1199px){.labour-kpis{grid-template-columns:repeat(2,1fr)}.labour-tab-content{grid-template-columns:1fr}.labour-section-card[data-labour-section="overview"]:nth-child(2),.labour-section-card[data-labour-section="overview"].labour-history-card{grid-column:1}.labour-sticky-actions{left:var(--rail);padding-inline:20px}.app.tablet-expanded .labour-sticky-actions{left:var(--side)}}
@media(max-width:767px){.labour-page{padding-bottom:128px}.labour-heading{align-items:flex-start}.labour-heading h1{font-size:20px}.labour-heading p{max-width:210px;font-size:11px;line-height:1.45}.labour-heading>div:last-child{flex-direction:column}.labour-heading>div:last-child .btn{width:145px;white-space:nowrap}.labour-kpis{grid-template-columns:repeat(2,1fr);gap:8px}.labour-kpi{min-height:82px;padding:10px;gap:8px}.labour-kpi>span{width:34px;height:34px}.labour-kpi strong{font-size:13px}.labour-kpi p{font-size:11px}.labour-tabs{top:60px;margin-inline:-12px;border-radius:0;padding-left:6px}.labour-tabs button{min-height:44px;padding:0 12px}.labour-tab-content{grid-template-columns:1fr;gap:10px}.labour-section-card[data-labour-section="overview"]:nth-child(2),.labour-section-card[data-labour-section="overview"].labour-history-card{grid-column:1}.labour-section-card{padding:13px!important}.labour-section-card>.card-title:first-child{margin:-13px -13px 13px!important;padding:13px}.labour-section-card .form-grid{grid-template-columns:1fr!important}.labour-section-card table{min-width:620px}.labour-sticky-actions{left:0;bottom:68px;min-height:58px;padding:8px 12px}.labour-sticky-actions>span{display:none}.labour-sticky-actions>div{width:100%}.labour-sticky-actions .btn{flex:1;min-width:0;height:44px}.labour-sticky-actions .btn:first-child{display:none}}

/* Termination and final dues workflow */
.termination-page{max-width:1500px;margin:0 auto;padding-bottom:16px}.termination-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:12px}.termination-heading h1{margin:0;color:#16281F;font-size:24px;letter-spacing:-.45px}.termination-heading p{margin:5px 0 0;color:#5B6E64;font-size:12px}.termination-guidance{min-height:48px;display:flex;align-items:center;gap:10px;padding:9px 13px;margin-bottom:12px;border:1px solid #b1ebd5;border-radius:7px;background:#f1fbf7}.termination-guidance>span{width:21px;height:21px;display:grid;place-items:center;border-radius:50%;background:#0B6B57;color:#fff;font-size:11px;font-weight:800}.termination-guidance strong,.termination-guidance small{display:block}.termination-guidance strong{color:#204f3d;font-size:11px}.termination-guidance small{margin-top:2px;color:#4b6c5f;font-size:11px}.termination-steps{display:grid;grid-template-columns:auto 1fr auto 1fr auto;align-items:start;padding:4px 8% 12px}.termination-steps>div{text-align:center;color:#5e736c;min-width:110px}.termination-steps>div span{width:25px;height:25px;display:grid;place-items:center;margin:auto;border:1px solid #c9e4d9;border-radius:50%;background:#fff;font-size:11px}.termination-steps>div b{display:block;margin-top:5px;font-size:11px;font-weight:600}.termination-steps>div.active{color:#0B6B57}.termination-steps>div.active span{border-color:#0B6B57;background:#0B6B57;color:#fff}.termination-steps>i{height:1px;margin-top:12px;background:#cfe5dc}.termination-workspace{display:grid;grid-template-columns:minmax(310px,.8fr) minmax(0,1.7fr);gap:12px;margin-bottom:12px}.termination-form-panel,.termination-result-panel,.termination-history{background:#fff;border:1px solid var(--line);border-radius:8px}.termination-panel-head{min-height:55px;padding:11px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.termination-panel-head strong,.termination-panel-head span{display:block}.termination-panel-head strong{color:#17392c;font-size:11px}.termination-panel-head span{margin-top:3px;color:#5B6E64;font-size:11px}.termination-panel-head>b{color:#55655e;font-size:11px}.termination-form-body{padding:13px}.termination-form-body>.form-group{margin-bottom:10px}.termination-form-body label{font-size:11px}.termination-form-body input,.termination-form-body select{height:40px;font-size:11px}.termination-form-body .form-grid{grid-template-columns:1fr 1fr;gap:9px}.termination-form-body .termination-full{grid-column:1/-1}.termination-calculate{width:100%;height:42px;margin-top:3px}#termination-employee-summary{display:flex;align-items:center;gap:10px;margin:-1px 0 11px;padding:10px;border:1px solid #d9ece5;border-radius:6px;background:#F7FAF8}.termination-employee-avatar{width:37px;height:37px;display:grid;place-items:center;border-radius:50%;background:#c9f2e3;color:#25614a;font-size:11px;font-weight:750}#termination-employee-summary strong,#termination-employee-summary small{display:block}#termination-employee-summary strong{font-size:11px;color:#1b3e30}#termination-employee-summary small{margin-top:2px;color:#5d736b;font-size:11px}.termination-result-panel{min-width:0}.termination-empty-result{min-height:420px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;text-align:center}.termination-empty-result>span{width:50px;height:50px;display:grid;place-items:center;border-radius:10px;background:#E2F0EB;color:#0B6B57}.termination-empty-result strong{margin-top:12px;color:#1d4134;font-size:13px}.termination-empty-result p{max-width:330px;margin:6px 0 0;color:#5d776e;font-size:11px;line-height:1.5}.termination-result-head{min-height:55px;display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid var(--line)}.termination-result-head strong,.termination-result-head span{display:block}.termination-result-head strong{font-size:11px;color:#17392c}.termination-result-head div span{margin-top:3px;color:#5B6E64;font-size:11px}.termination-result-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:12px}.termination-result-kpis>div{min-height:92px;padding:10px;border:1px solid var(--line);border-radius:7px}.termination-result-kpis>div>span{width:28px;height:28px;display:grid;place-items:center;border-radius:6px}.termination-result-kpis>div>span.blue{color:#0B6B57;background:#E2F0EB}.termination-result-kpis>div>span.amber{color:#a96409;background:#fff4e2}.termination-result-kpis>div>span.green{color:#0B6B57;background:#eaf8f1}.termination-result-kpis>div>span.violet{color:#1e7a73;background:#d7f5f2}.termination-result-kpis .shell-icon{width:15px;height:15px}.termination-result-kpis small,.termination-result-kpis strong,.termination-result-kpis p{display:block}.termination-result-kpis small{margin-top:8px;color:#58776b;font-size:11px}.termination-result-kpis strong{margin-top:2px;color:#15372b;font-size:11px}.termination-result-kpis p{margin:2px 0 0;color:#646F68;font-size:11px}.termination-total{display:flex;align-items:center;justify-content:space-between;margin:0 12px 10px;padding:12px;border:1px solid #7adeb8;border-radius:6px;background:#eafaf4;color:#114431}.termination-total span{font-size:11px;font-weight:650}.termination-total strong{font-size:18px}.termination-review-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:9px;padding:0 12px 12px}.termination-review-grid>section{padding:11px;border:1px solid var(--line);border-radius:7px;min-width:0}.termination-review-grid>section>strong{font-size:11px;color:#1c3f31}.termination-breakdown{margin-top:8px}.termination-breakdown>div{display:grid;grid-template-columns:90px 1fr 80px;gap:6px;padding:7px 5px;border-bottom:1px solid #e9f3ef;color:#57776b;font-size:11px}.termination-breakdown>div:first-child{background:#f3faf8;color:#426659;font-weight:700}.termination-breakdown b{color:#1d4033;font-size:11px}.termination-breakdown b:last-child{text-align:right}.termination-checks{margin-top:8px}.termination-checks>div{display:grid;grid-template-columns:18px 1fr auto;align-items:center;gap:6px;padding:6px 0;border-bottom:1px solid #e9f3ef}.termination-checks i{width:16px;height:16px;display:grid;place-items:center;border-radius:50%;background:#e8f7f0;color:#0B6B57;font-size:11px;font-style:normal}.termination-checks i.warn{background:#fff3df;color:#a66509}.termination-checks b,.termination-checks small{display:block}.termination-checks b{font-size:11px;color:#234638}.termination-checks small{margin-top:2px;color:#5B6E64;font-size:11px}.termination-checks em{padding:3px 5px;border-radius:3px;background:#e8f7f0;color:#138149;font-size:11px;font-style:normal}.termination-advisory{display:grid;gap:4px;margin-top:9px;padding:8px;border:1px solid #f0d39a;border-radius:5px;background:#fff8eb}.termination-advisory b{color:#945e0b;font-size:11px}.termination-advisory span{color:#866c42;font-size:11px;line-height:1.4}.termination-result-actions{display:flex;justify-content:flex-end;gap:8px;padding:10px 12px;border-top:1px solid var(--line)}.termination-result-actions .btn{min-width:150px}.termination-history{overflow:hidden}.termination-history-table{overflow-x:auto}.termination-history-table table{min-width:1050px}.termination-history-table th{height:36px;font-size:11px}.termination-history-table td{padding:9px;font-size:11px}.termination-more{width:30px;height:30px;border:0;background:transparent;color:#55655e}.termination-history-cards,.termination-mobile-action{display:none}
@media(max-width:1199px){.termination-workspace{grid-template-columns:1fr}.termination-empty-result{min-height:280px}.termination-form-body .form-grid{grid-template-columns:repeat(3,1fr)}.termination-form-body .termination-full{grid-column:auto}.termination-review-grid{grid-template-columns:1fr 1fr}}
@media(max-width:767px){.termination-page{padding-bottom:74px}.termination-heading{align-items:flex-start}.termination-heading h1{font-size:20px}.termination-heading p{max-width:230px;font-size:11px;line-height:1.45}.termination-heading>.btn{display:none}.termination-guidance{align-items:flex-start}.termination-steps{padding:4px 0 12px}.termination-steps>div{min-width:84px}.termination-steps>div b{font-size:11px}.termination-workspace{grid-template-columns:1fr}.termination-form-body .form-grid{grid-template-columns:1fr}.termination-form-body .termination-full{grid-column:1}.termination-calculate{display:none}.termination-result-kpis{grid-template-columns:repeat(2,1fr)}.termination-total strong{font-size:16px}.termination-review-grid{grid-template-columns:1fr}.termination-breakdown>div{grid-template-columns:80px 1fr 72px}.termination-result-actions{display:none}.termination-history-table{display:none}.termination-history-cards{display:grid;gap:8px;padding:10px}.termination-history-mobile{padding:11px;border:1px solid var(--line);border-radius:7px}.termination-history-mobile>div{display:flex;justify-content:space-between}.termination-history-mobile strong{font-size:11px;color:#1a3d2f}.termination-history-mobile small,.termination-history-mobile b{display:block}.termination-history-mobile small{margin-top:4px;color:#5B6E64;font-size:11px}.termination-history-mobile b{margin-top:8px;color:#214537;font-size:11px}.termination-mobile-action{position:fixed;left:12px;right:12px;bottom:78px;z-index:45;display:block}.termination-mobile-action .btn{width:100%;height:46px;box-shadow:0 5px 16px rgba(11,107,87,.24)}}
/* User accounts & access control */
.access-page{max-width:1440px;margin:0 auto;padding-bottom:24px;color:#11261f}
.access-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:18px}.access-heading h1{font-size:23px;line-height:1.25;margin:0;color:#0b1b16;letter-spacing:-.35px}.access-heading p{font-size:12px;color:#4F6B60;margin:5px 0 0}.access-heading>div:last-child{display:flex;gap:8px}.access-heading .btn{display:inline-flex;align-items:center;gap:7px;min-height:38px}.access-heading svg{width:15px;height:15px}
.access-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}.access-kpi{display:flex;gap:13px;align-items:center;background:#fff;border:1px solid #DDE5E0;border-radius:8px;min-height:103px;padding:16px 17px;box-shadow:0 2px 8px rgba(19,38,30,.035)}.access-kpi>span{width:40px;height:40px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto}.access-kpi>span svg{width:21px;height:21px}.access-kpi>span.blue{color:#1e7757;background:#e7f9f3}.access-kpi>span.green{color:#0f6d38;background:#eefaf3}.access-kpi>span.purple{color:#1f6964;background:#e1f7f6}.access-kpi>span.amber{color:#ae6000;background:#fff7e8}.access-kpi small{display:block;color:#4F6B60;font-size:11px;margin-bottom:3px}.access-kpi strong{font-size:24px;line-height:1;color:#0b1b16}.access-kpi p{font-size:11px;color:#5e766d;margin:6px 0 0}.access-kpi:last-child p{color:#b45f00}
.access-overview{display:grid;grid-template-columns:1fr 1.15fr;gap:12px;margin-bottom:14px}.access-overview>section{background:#fff;border:1px solid #DDE5E0;border-radius:8px;min-height:226px;overflow:hidden}.access-panel-head{padding:15px 17px 12px;border-bottom:1px solid #dfeee9}.access-panel-head strong{display:block;font-size:13px;color:#11251e}.access-panel-head span{display:block;font-size:11px;color:#5e766d;margin-top:3px}.access-role-chart{display:grid;grid-template-columns:140px 1fr;align-items:center;padding:18px 20px;gap:18px}.access-donut{width:116px;aspect-ratio:1;border-radius:50%;background:conic-gradient(#1f7d5c 0 var(--a),#117894 var(--a) var(--b),#226764 var(--b) var(--c),#9ab9ae var(--c) 360deg);position:relative;margin:auto}.access-donut:after{content:"";position:absolute;inset:25px;border-radius:50%;background:#fff}.access-role-chart>div:last-child{display:grid;gap:8px}.access-role-chart button{display:grid;grid-template-columns:8px 1fr auto;gap:8px;align-items:center;border:0;background:none;padding:2px;color:#4c6a5f;text-align:left;font:inherit;font-size:12px;cursor:pointer}.access-role-chart button:hover span{color:#1e7757}.access-role-chart button i{width:7px;height:7px;border-radius:50%;background:#1f7d5c}.access-role-chart button i.r1{background:#117894}.access-role-chart button i.r2{background:#226764}.access-role-chart button i.r3{background:#9ab9ae}.access-role-chart button b{font-size:12px;color:#1f3b31}
.access-attention{padding:10px 14px}.access-attention>button{width:100%;display:grid;grid-template-columns:34px 1fr auto 12px;align-items:center;gap:10px;border:0;border-bottom:1px solid #e1efea;background:#fff;padding:10px 2px;text-align:left;cursor:pointer;color:#37574c}.access-attention>button:last-child{border-bottom:0}.access-attention>button:hover strong{color:#1e7757}.access-attention>button>span{width:30px;height:30px;border:1px solid #DCE6E0;border-radius:7px;display:grid;place-items:center}.access-attention svg{width:15px;height:15px}.access-attention strong{display:block;font-size:11px;color:#1f3b31}.access-attention small{display:block;font-size:11px;color:#647a72;margin-top:2px}.access-attention b{font-size:12px;color:#c14848}.access-attention i{font-style:normal;font-size:18px;color:#5e736b}
.access-register{background:#fff;border:1px solid #DDE5E0;border-radius:8px;overflow:hidden}.access-filters{display:grid;grid-template-columns:minmax(220px,2fr) repeat(3,minmax(130px,1fr)) auto;gap:8px;padding:13px 14px;border-bottom:1px solid #ddede7}.access-filters label{display:flex;align-items:center;border:1px solid #cbe5db;border-radius:6px;padding:0 10px;min-height:37px}.access-filters label:focus-within{border-color:#1e7757;box-shadow:0 0 0 3px rgba(30,119,87,.1)}.access-filters label svg{width:15px;height:15px;color:#58766c}.access-filters input{border:0;box-shadow:none!important;min-width:0;height:35px;padding-left:8px;font-size:11px}.access-filters select{height:37px;border-radius:6px;font-size:11px}.access-filters>button{border:0;background:none;color:#517366;font:inherit;font-size:12px;cursor:pointer;white-space:nowrap}.access-filters>button:hover{color:#1e7757}.access-result{font-size:11px;color:#5e766d;padding:8px 15px}.access-result strong{color:#203d32}.access-table{overflow-x:auto}.access-table table{min-width:900px}.access-table th{font-size:11px;color:#556e63;padding:10px 12px;background:#F7FAF8}.access-table td{padding:10px 12px;font-size:11px;vertical-align:middle}.access-table tr{cursor:pointer}.access-table tbody tr:hover{background:#edfbf6}.access-person{display:flex;align-items:center;gap:9px}.access-person>span,.access-avatar{width:32px;height:32px;border-radius:50%;background:#087f99;color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700;flex:0 0 auto}.access-person strong,.access-table td>strong{display:block;font-size:11px;color:#1c392e}.access-person small,.access-table td>small{display:block;font-size:11px;color:#5d736b;margin-top:2px}.access-muted{color:#5e736b}.access-role{display:inline-flex;align-items:center;min-height:21px;padding:2px 7px;border-radius:4px;font-size:11px;font-weight:600;border:1px solid}.access-role.admin{color:#1f6964;border-color:#8de3dd;background:#e1f7f7}.access-role.manager{color:#a35c00;border-color:#f2d6a2;background:#fff8eb}.access-role.hr{color:#08738c;border-color:#bde4ed;background:#effbfe}.access-role.employee{color:#52655D;border-color:#cee4dc;background:#f4f9f7}.access-status{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:#34574a}.access-status i{width:6px;height:6px;border-radius:50%;background:#14873e}.access-status.disabled{color:#a33a42}.access-status.disabled i{background:#ce3741}.access-more{width:34px;height:34px;border:0;background:none;border-radius:5px;color:#4e7164;cursor:pointer}.access-more:hover{background:#E2F0EB;color:#1e7757}.access-mobile-list,.access-mobile-add{display:none}
.access-drawer-overlay{position:fixed;inset:0;background:rgba(7,27,20,.34);z-index:1200;opacity:0;pointer-events:none;transition:opacity .2s}.access-drawer-overlay.open{opacity:1;pointer-events:auto}.access-drawer{position:fixed;right:0;top:0;bottom:0;width:370px;max-width:92vw;background:#fff;z-index:1201;box-shadow:-12px 0 38px rgba(12,49,35,.18);transform:translateX(102%);transition:transform .25s ease;overflow-y:auto}.access-drawer.open{transform:none}.access-drawer-head{height:58px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dbece6}.access-drawer-head strong{font-size:14px}.access-drawer-head button{border:0;background:none;font-size:23px;color:#45665a;cursor:pointer}.access-drawer-identity{display:flex;gap:13px;padding:20px 18px;border-bottom:1px solid #e1efea}.access-drawer-identity>span{width:48px;height:48px;border-radius:50%;background:#1f6964;color:#fff;display:grid;place-items:center;font-weight:700}.access-drawer-identity h2{font-size:17px;margin:1px 0 3px}.access-drawer-identity p{font-size:11px;color:#5c796e;margin:0 0 7px}.access-drawer section{padding:16px 18px 7px;border-bottom:1px solid #e1efea}.access-drawer h3{font-size:11px;margin:0 0 9px;color:#1c392e}.access-drawer dl{margin:0}.access-drawer dl>div{margin-bottom:11px}.access-drawer dt{font-size:11px;color:#637a71;margin-bottom:3px}.access-drawer dd{font-size:11px;color:#355549;margin:0;word-break:break-word}.access-drawer-actions{padding:18px;display:grid;gap:8px}.access-drawer-actions .btn{justify-content:center;min-height:39px}.access-drawer-actions .btn svg{width:14px}.access-danger{border-color:#b9555d!important;color:#bd2632!important;background:#fff!important}
.access-modal{width:620px}.access-modal-copy{font-size:11px;color:#58766c;margin:-12px 0 17px}.access-modal-note{display:flex;align-items:center;gap:8px;background:#edfbf6;border:1px solid #c3f0df;border-radius:6px;color:#456d5e;padding:10px;font-size:11px;margin-top:5px}.access-modal-note svg{width:15px;color:#1e7757}.access-modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.access-modal-actions .btn{min-width:100px}
@media(max-width:1199px){.access-overview{grid-template-columns:1fr}.access-filters{grid-template-columns:2fr repeat(3,1fr)}.access-filters>button{display:none}.access-kpi{padding:13px}.access-kpi>span{width:35px;height:35px}.access-kpi strong{font-size:21px}}
@media(max-width:767px){.access-page{padding:0 0 72px}.access-heading{margin:0 0 14px}.access-heading h1{font-size:19px}.access-heading p{font-size:11px;line-height:1.45}.access-heading>div:last-child .btn:first-child{display:none}.access-heading>div:last-child .btn-primary{display:none}.access-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.access-kpi{min-height:82px;padding:11px 10px;gap:9px}.access-kpi>span{width:32px;height:32px}.access-kpi>span svg{width:17px;height:17px}.access-kpi small{font-size:11px}.access-kpi strong{font-size:20px}.access-kpi p{font-size:11px;margin-top:4px}.access-overview{display:none}.access-register{border-radius:7px}.access-filters{display:grid;grid-template-columns:1fr 44px;padding:10px;gap:8px}.access-filters label{min-width:0}.access-filters select{display:none}.access-filters:after{content:"☷";display:grid;place-items:center;border:1px solid #cbe5db;border-radius:6px;color:#45695c;font-size:18px}.access-result{padding:6px 11px}.access-table{display:none}.access-mobile-list{display:grid;padding:0 9px 10px;gap:8px}.access-mobile-card{display:grid;grid-template-columns:38px minmax(0,1fr) auto 12px;gap:9px;align-items:start;text-align:left;border:1px solid #DDE5E0;background:#fff;border-radius:7px;min-height:104px;padding:11px 9px;color:#1d3b30;position:relative}.access-mobile-card:hover,.access-mobile-card:focus{border-color:#34cc95;background:#F3F8F5}.access-avatar{width:36px;height:36px;font-size:11px}.access-mobile-card>div>strong{display:block;font-size:11px}.access-mobile-card>div>small{display:block;font-size:11px;color:#5a776d;margin-top:3px;overflow:hidden;text-overflow:ellipsis}.access-mobile-card>div>em{display:block;font-size:11px;color:#5c7a6f;font-style:normal;margin:7px 0}.access-mobile-card>.access-role{margin-top:1px;max-width:105px;text-align:center;justify-content:center;line-height:1.25}.access-mobile-card>b{font-size:19px;color:#5e746c;padding-top:6px}.access-mobile-add{display:block;position:fixed;right:16px;bottom:73px;z-index:450;border:0;border-radius:24px;background:#1e7757;color:white;min-height:46px;padding:0 18px;font-weight:700;box-shadow:0 7px 20px rgba(30,119,87,.28)}.access-drawer{top:auto;width:100%;max-width:none;height:min(76vh,650px);border-radius:16px 16px 0 0;transform:translateY(102%)}.access-drawer.open{transform:none}.access-drawer-head{height:51px}.access-drawer-identity{padding:15px 17px}.access-drawer section{padding:13px 17px 4px}.access-drawer-actions{position:sticky;bottom:0;background:#fff;border-top:1px solid #dbece6;padding:12px 16px;grid-template-columns:1fr 1fr}.access-modal{width:100%;max-width:100%;height:100%;max-height:100%;border-radius:0;padding:18px}.access-modal .form-grid{grid-template-columns:1fr}.access-modal-actions{position:sticky;bottom:-18px;background:white;padding:12px 0 18px}.access-modal-actions .btn{flex:1;min-height:44px}}
/* Settings & master configuration */
.settings-page{max-width:1450px;margin:0 auto;padding-bottom:70px;color:#10261f}.settings-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:16px}.settings-heading h1{font-size:23px;letter-spacing:-.35px;line-height:1.25;margin:0;color:#0b1b16}.settings-heading p{font-size:12px;color:#4F6B60;margin:5px 0 0}.settings-heading>div:last-child{display:flex;gap:8px}.settings-heading .btn{min-height:40px}
.settings-org{display:grid;grid-template-columns:48px minmax(220px,1fr) auto minmax(300px,.9fr);align-items:center;gap:13px;background:#fff;border:1px solid #DDE5E0;border-radius:8px;padding:15px 17px;margin-bottom:14px;box-shadow:0 2px 8px rgba(19,38,30,.03)}.settings-org>span{width:42px;height:42px;border-radius:9px;background:#e7f9f3;color:#1e7757;display:grid;place-items:center}.settings-org>span svg{width:22px;height:22px}.settings-org>div>strong{display:block;font-size:15px}.settings-org>div>small{display:block;font-size:11px;color:#5e766d;margin-top:4px}.settings-org>em{font-style:normal;font-size:11px;font-weight:700;padding:4px 7px;border-radius:4px;background:#e9f8ef;color:#0f6d38}.settings-org dl{display:grid;grid-template-columns:1fr 1fr;margin:0;border-left:1px solid #ddede7}.settings-org dl>div{padding-left:28px}.settings-org dt{font-size:11px;color:#5c756c}.settings-org dd{font-size:17px;font-weight:700;margin:2px 0;color:#10271f}.settings-org dl button{border:0;background:0;color:#1e7757;font:inherit;font-size:12px;padding:0;cursor:pointer}
.settings-layout{display:grid;grid-template-columns:210px minmax(0,1fr) 235px;gap:13px;align-items:start}.settings-tabs{background:#fff;border:1px solid #DDE5E0;border-radius:8px;padding:8px;position:sticky;top:78px}.settings-tabs button{width:100%;display:flex;align-items:center;gap:10px;min-height:43px;border:0;border-left:3px solid transparent;border-radius:5px;background:transparent;color:#35564b;font:inherit;font-size:12px;text-align:left;padding:8px 10px;cursor:pointer}.settings-tabs button:hover{background:#F4F8F6;color:#1e7757}.settings-tabs button.active{background:#E2F0EB;border-left-color:#1e7757;color:#1e7757;font-weight:700}.settings-tabs svg{width:16px;height:16px;flex:0 0 auto}
.settings-form-card{background:#fff;border:1px solid #DDE5E0;border-radius:8px;min-height:560px;overflow:hidden}.settings-form-section{border-bottom:1px solid #ddede7}.settings-form-section:last-child{border-bottom:0}.settings-section-toggle{width:100%;display:flex;justify-content:space-between;align-items:center;border:0;background:#fff;padding:17px 18px;text-align:left;cursor:pointer}.settings-section-toggle strong{display:block;font-size:13px;color:#112820}.settings-section-toggle small{display:block;font-size:12px;color:#5f756d;margin-top:3px}.settings-section-toggle>b{font-size:16px;color:#58766c;transition:transform .2s}.settings-form-section:not(.open) .settings-section-toggle>b{transform:none}.settings-section-body{padding:0 18px 18px}.settings-form-section:not(.open) .settings-section-body{display:none}.settings-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 16px}.settings-form-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}.settings-form-card .form-group{margin:0}.settings-form-card .form-group label{font-size:11px;font-weight:600;color:#48695d;margin-bottom:6px}.settings-form-card .form-group label b{color:#d23b47}.settings-form-card input,.settings-form-card select,.settings-form-card textarea{border-color:#c9e3d9;border-radius:6px;font-size:11px;min-height:38px;color:#2a493e}.settings-form-card textarea{width:100%;padding:10px;resize:vertical}.settings-form-card input:focus,.settings-form-card select:focus,.settings-form-card textarea:focus{border-color:#1e7757;box-shadow:0 0 0 3px rgba(30,119,87,.1)}.settings-form-card input[readonly]{background:#f3f9f7;color:#607b70}.settings-form-card .form-group small{display:block;font-size:11px;color:#647a72;margin-top:5px;line-height:1.35}.settings-info-note{display:flex;align-items:flex-start;gap:8px;border:1px solid #c1efde;background:#edfbf6;border-radius:6px;color:#4a7162;padding:10px;font-size:11px;margin-top:14px}.settings-info-note svg{width:15px;color:#1e7757;flex:0 0 auto}.settings-choice-row{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #dfece7;padding:13px 0}.settings-choice-row strong{display:block;font-size:11px}.settings-choice-row small{display:block;font-size:11px;color:#5e766d;margin-top:3px}.settings-enabled{font-size:11px;font-weight:700;color:#0f6d38;background:#e9f8ef;border-radius:4px;padding:4px 7px}
.settings-aside{display:grid;gap:12px}.settings-aside section{background:#fff;border:1px solid #DDE5E0;border-radius:8px;padding:15px}.settings-aside h2{font-size:12px;margin:0 0 12px}.settings-check{display:flex;align-items:center;gap:9px;margin-bottom:11px}.settings-check i{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:800;background:#0f6d38;color:#fff}.settings-check.attention i{background:#fff4dc;color:#a75d00}.settings-check strong{display:block;font-size:11px}.settings-check small{display:block;font-size:11px;color:#5e746c;margin-top:2px}.settings-check.attention small{color:#ab6200}.settings-progress{height:4px;background:#e1efea;border-radius:4px;margin-top:15px;overflow:hidden}.settings-progress i{display:block;height:100%;background:#1e7757}.settings-aside p{font-size:11px;line-height:1.55;color:#5c7d71}.settings-aside .btn{width:100%;justify-content:center;margin-top:6px}
.settings-sticky{position:fixed;left:var(--sidebar-width,224px);right:0;bottom:0;z-index:400;min-height:61px;border-top:1px solid #DCE6E0;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:space-between;padding:9px 25px;box-shadow:0 -5px 18px rgba(19,38,30,.06)}.sidebar-collapsed .settings-sticky{left:var(--sidebar-collapsed,72px)}.settings-sticky>span{display:flex;align-items:center;gap:9px;color:#55655e}.settings-sticky>span i{width:9px;height:9px;border-radius:50%;background:#0B6B57}.settings-sticky>span b{font-size:11px}.settings-sticky.dirty>span i{background:#a3600b}.settings-sticky.dirty>span b{color:#a65a00}.settings-sticky>div{display:flex;gap:8px}.settings-sticky .btn{min-width:115px;justify-content:center}
@media(max-width:1199px){.settings-layout{grid-template-columns:180px minmax(0,1fr)}.settings-aside{grid-column:1/-1;grid-template-columns:1fr 1fr}.settings-form-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}.settings-sticky{left:72px}.tablet-expanded .settings-sticky{left:240px}}
@media(max-width:767px){.settings-page{padding-bottom:96px}.settings-heading{margin-bottom:12px}.settings-heading h1{font-size:19px}.settings-heading p{font-size:11px}.settings-heading>div:last-child{display:none}.settings-org{grid-template-columns:38px 1fr auto;padding:12px 11px;gap:9px}.settings-org>span{width:36px;height:36px}.settings-org>div>strong{font-size:13px}.settings-org dl{grid-column:1/-1;border-left:0;border-top:1px solid #dbece6;padding-top:10px}.settings-org dl>div{padding-left:9px}.settings-layout{display:block}.settings-tabs{position:static;display:flex;overflow-x:auto;border-radius:7px;margin-bottom:10px;padding:6px;gap:4px;scrollbar-width:none}.settings-tabs::-webkit-scrollbar{display:none}.settings-tabs button{min-width:82px;width:auto;min-height:58px;flex-direction:column;justify-content:center;gap:4px;text-align:center;padding:5px 8px;border-left:0;border-bottom:2px solid transparent;font-size:12px}.settings-tabs button.active{border-left:0;border-bottom-color:#1e7757}.settings-form-card{min-height:0}.settings-section-toggle{min-height:54px;padding:13px}.settings-section-toggle strong{font-size:12px}.settings-section-body{padding:0 13px 14px}.settings-form-grid,.settings-form-grid.four{grid-template-columns:1fr}.settings-form-card input,.settings-form-card select{min-height:44px;font-size:11px}.settings-form-card textarea{font-size:11px}.settings-aside{display:none}.settings-sticky{left:0;bottom:58px;min-height:62px;padding:8px 12px;display:block}.settings-sticky>span{display:none}.settings-sticky>div{width:100%}.settings-sticky .btn:first-child{display:none}.settings-sticky .btn-primary{width:100%;min-height:44px}.settings-choice-row{align-items:flex-start}.settings-choice-row .btn{min-height:42px}}

/* Settings interaction cues: make collapsible sections and status checks feel clickable. */
.settings-section-toggle{transition:background .16s ease,box-shadow .16s ease}
.settings-section-toggle:hover{background:#F3F8F5}
.settings-section-toggle:focus-visible{outline:3px solid rgba(30,119,87,.22);outline-offset:-3px}
.settings-section-toggle>b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#eaf7f3;font-size:13px}
.settings-form-section.open .settings-section-toggle>b{background:#E2F0EB;color:#1e7757}
.settings-aside section{transition:border-color .16s ease,box-shadow .16s ease}
.settings-aside section:hover{border-color:#92e0c3;box-shadow:0 6px 18px rgba(19,38,30,.06)}
.settings-check{padding:6px 7px;margin:0 -7px 5px;border-radius:6px;transition:background .16s ease}
.settings-check:hover{background:#f3fcf9}
.settings-check:last-of-type{margin-bottom:0}
.settings-org>em{white-space:nowrap}
@media(max-width:520px){.settings-org{grid-template-columns:36px minmax(0,1fr)}.settings-org>em{grid-column:2;justify-self:start}.settings-org dl{grid-column:1/-1}.settings-org dl>div{padding-left:4px}.settings-org dd{font-size:16px}}

/* Keep fixed action bars above browser safe areas on notched/mobile devices. */
.settings-sticky,.permission-sticky,.approval-sticky,.payroll-mobile-action,.profile-mobile-actions,.labour-sticky-actions{padding-bottom:max(9px,env(safe-area-inset-bottom))}
@media(max-width:767px){.settings-page,.permission-page,.approval-page,.labour-page,.payroll-control-page{padding-bottom:calc(96px + env(safe-area-inset-bottom))}.mobile-bottom{padding-bottom:env(safe-area-inset-bottom);height:calc(68px + env(safe-area-inset-bottom))}.profile-mobile-actions{bottom:calc(68px + env(safe-area-inset-bottom))}}

/* Quiet, predictable scrolling for long data screens and dialogs. */
html{scroll-behavior:smooth}
*{scrollbar-width:thin;scrollbar-color:#a1d0bf transparent}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:#a1d0bf;border:2px solid transparent;border-radius:99px;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:#74b49c;border-width:1px}

/* Mobile navigation clarity: active item gets a quiet indicator and touch feedback. */
@media(max-width:767px){
  .bottom-item{position:relative;min-height:58px;padding-top:3px;transition:color .16s ease,background .16s ease}
  .bottom-item:before{content:"";position:absolute;top:0;left:24%;right:24%;height:3px;border-radius:0 0 4px 4px;background:transparent;transition:background .16s ease,transform .16s ease}
  .bottom-item.active:before{background:var(--blue);transform:scaleX(1)}
  .bottom-item:not(.active):active{background:#f1fbf7}
  .bottom-item .shell-icon{transition:transform .16s ease}
  .bottom-item.active .shell-icon{transform:translateY(-1px)}
}

/* CSS-drawn submenu chevron avoids font/encoding differences across browsers. */
.nav-parent .nav-label:after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);top:17px;right:15px}
.nav-parent.submenu-open .nav-label:after{transform:rotate(225deg);top:20px}
.access-filters:after,.audit-filters:after{content:"";display:block;width:18px;height:14px;border:0!important;border-radius:0;background:linear-gradient(currentColor,currentColor) 0 1px/18px 1px no-repeat,linear-gradient(currentColor,currentColor) 4px 7px/14px 1px no-repeat,linear-gradient(currentColor,currentColor) 8px 13px/10px 1px no-repeat;font-size:0}

/* Toasts stay readable for long API messages and feel like a deliberate status surface. */
#toast.toast{max-width:min(440px,calc(100vw - 32px));line-height:1.4;border:1px solid rgba(255,255,255,.18);font-size:12px;letter-spacing:.01em}
#toast.toast-error{background:#b93842}
#toast.toast-success{background:#137c59}
@media(max-width:767px){#toast.toast{left:12px;right:12px;top:68px;max-width:none;text-align:left;padding:12px 14px}}

/* Shared mobile command-bar rhythm: search first, compact filters second, actions full-width. */
@media(max-width:767px){
  .directory-toolbar,.attendance-filterbar,.loan-filterbar,.device-log-toolbar,.connector-toolbar,
  .mapping-toolbar,.import-audit-toolbar,.enrollment-toolbar,.document-filterbar,.audit-filters,.access-filters{
    grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important;padding:10px!important;align-items:center
  }
  .directory-toolbar>*,.attendance-filterbar>*,.loan-filterbar>*,.device-log-toolbar>*,.connector-toolbar>*,
  .mapping-toolbar>*,.import-audit-toolbar>*,.enrollment-toolbar>*,.document-filterbar>*,.audit-filters>*,.access-filters>*{min-width:0}
  .directory-toolbar input,.attendance-filterbar input,.loan-filterbar input,.device-log-toolbar input,
  .connector-toolbar input,.mapping-toolbar input,.import-audit-toolbar input,.enrollment-toolbar input,
  .document-filterbar input,.audit-filters input,.access-filters input{font-size:12px}
  .directory-toolbar .btn,.attendance-filterbar .btn,.loan-filterbar .btn,.device-log-toolbar .btn,
  .connector-toolbar .btn,.mapping-toolbar .btn,.import-audit-toolbar .btn,.enrollment-toolbar .btn{min-height:40px;white-space:nowrap}
  .directory-toolbar select,.attendance-filterbar select,.loan-filterbar select,.device-log-toolbar select,
  .connector-toolbar select,.mapping-toolbar select,.import-audit-toolbar select,.enrollment-toolbar select{min-height:40px}
  .directory-results,.attendance-result-line,.loan-result,.access-result,.audit-result{padding-left:11px;padding-right:11px}
}
@media(min-width:768px){
  .directory-toolbar,.attendance-filterbar,.loan-filterbar,.device-log-toolbar,.connector-toolbar,
  .mapping-toolbar,.import-audit-toolbar,.enrollment-toolbar{align-items:center}
}

/* Give the signed-in context a clear, premium anchor in the top bar. */
.header-profile{min-width:178px;padding:4px 8px 4px 5px;border:1px solid #cbe7dd;border-radius:8px;background:#fff;transition:border-color .16s ease,box-shadow .16s ease}
.header-profile:hover{border-color:#85e1be;box-shadow:0 3px 10px rgba(16,65,47,.08)}
.header-profile .avatar{box-shadow:0 0 0 3px #e5f8f1}
.header-name,.header-role{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.header-role{line-height:1.3}
.header-icon:focus-visible,.header-profile:focus-within{outline:3px solid rgba(11,107,87,.2);outline-offset:2px}
@media(max-width:767px){.header-profile{min-width:0;padding:3px;border:0;background:transparent;box-shadow:none}.header-profile:hover{box-shadow:none}.header-profile .avatar{box-shadow:none}.header-profile:focus-within{outline:0}.header-name,.header-role{max-width:0}}
.header-profile{min-width:0;padding:5px 8px 5px 5px;border:1px solid transparent;border-radius:9px;transition:background .16s ease,border-color .16s ease}
.header-profile:hover{background:#f1fbf7;border-color:#ceebe0}
.header-profile .avatar{box-shadow:0 0 0 2px #fff,0 0 0 3px #b3e1d0}
.header-user-copy{min-width:0;max-width:190px}.header-name,.header-role{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.header-role{max-width:190px}
.header-icon:focus-visible{background:#e5f8f1;color:var(--blue)}
.notification-count{animation:notification-pop .22s ease-out}
@keyframes notification-pop{from{transform:scale(.7);opacity:.4}to{transform:scale(1);opacity:1}}
@media(max-width:767px){.header-profile{padding:3px;border-radius:8px}.header-profile .avatar{box-shadow:none}.notification-count{animation:none}}
.modal,.modal-overlay,.table-wrap,.table-search-bar,.sidebar,.settings-tabs,.labour-tabs{overscroll-behavior:contain}
.table-wrap{scrollbar-gutter:stable}
@media(max-width:767px){*::-webkit-scrollbar{width:5px;height:5px}.table-wrap{scrollbar-gutter:auto}}

/* Shared type scale keeps dense payroll screens readable without oversized text. */
.main h1,.main h2,.main h3,.main h4{color:var(--ui-ink);line-height:1.25;letter-spacing:-.2px}
.main h1{font-size:clamp(20px,2.1vw,28px)}
.main h2{font-size:clamp(16px,1.5vw,21px)}
.main h3{font-size:clamp(14px,1.15vw,17px)}
.main p{line-height:1.5}
.main label,.main th{letter-spacing:.015em}
.main th{font-weight:700;text-transform:uppercase;font-size:11px}
.main small{line-height:1.4}
@media(max-width:767px){.main h1{font-size:20px}.main h2{font-size:16px}.main h3{font-size:14px}.main th{font-size:11px}}
.badge{display:inline-flex;align-items:center;gap:5px;line-height:1.25;white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:currentColor;opacity:.8}
.badge-success::before{background:#0B6B57}.badge-warn::before{background:#9f6208}.badge-danger::before{background:#c9434d}.badge-accent::before{background:#0B6B57}
.badge-success,.badge-warn,.badge-danger,.badge-accent{border:1px solid transparent}
.badge-success{border-color:#bfe8cf}.badge-warn{border-color:#efd291}.badge-danger{border-color:#efc5c9}.badge-accent{border-color:#a1e8cd}
.btn.loading,.btn.is-loading{position:relative;pointer-events:none;color:transparent!important}
.btn.loading::after,.btn.is-loading::after{content:"";position:absolute;width:15px;height:15px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ui-spin .7s linear infinite;color:#0B6B57}
.btn-primary.loading::after,.btn-primary.is-loading::after{color:#fff}
@media(prefers-reduced-motion:reduce){.btn.loading::after,.btn.is-loading::after{animation:none;border-right-color:currentColor}}
.check-all,.select-all,.row-check,input[type="checkbox"]{accent-color:var(--ui-primary)}
input[type="checkbox"]{width:17px;height:17px;min-height:17px;margin:0;cursor:pointer;vertical-align:middle}
label:has(input[type="checkbox"]){cursor:pointer}
.selection-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 14px;border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm);background:#F3F8F5}
.selection-toolbar strong{color:var(--ui-ink);font-size:12px}.selection-toolbar small{color:var(--ui-muted);font-size:11px}
.selection-toolbar-actions{display:flex;gap:6px;flex-wrap:wrap}.selection-toolbar-actions .btn{min-height:32px;padding:0 10px;font-size:12px}
tr:has(input[type="checkbox"]:checked) td{background:#eafaf4!important}
@media(max-width:767px){.selection-toolbar{align-items:flex-start;flex-direction:column}.selection-toolbar-actions{width:100%}.selection-toolbar-actions .btn{flex:1;min-height:40px}}
.modal>.modal-actions{position:sticky;bottom:-22px;z-index:3;margin:18px -22px -22px;padding:12px 22px;background:rgba(255,255,255,.97);border-top:1px solid var(--ui-border);backdrop-filter:blur(8px)}
.modal>.modal-actions .btn{min-height:40px}
@media(max-width:767px){.modal>.modal-actions{bottom:-18px;margin:16px -14px -18px;padding:10px 14px}.modal>.modal-actions .btn{min-height:44px;flex:1}}
.card-title,.panel-title,.employee-panel-title{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;line-height:1.3}
.card-title>span,.panel-title>span{min-width:0}
.card-title button,.panel-title button,.card-title .btn,.panel-title .btn{flex:0 0 auto}
.card-title+ .form-grid,.panel-title+ .form-grid{margin-top:4px}
.card>hr,.panel>hr{border:0;border-top:1px solid var(--ui-border);margin:14px 0}
.settings-tabs button:focus-visible,.labour-tabs button:focus-visible,.profile-tab:focus-visible,.approval-workflow-selector>button:focus-visible{outline:3px solid rgba(11,107,87,.28);outline-offset:-2px}
.settings-tabs button,.labour-tabs button,.profile-tab{transition:color .15s,background .15s,border-color .15s}
.settings-tabs button:hover,.labour-tabs button:hover,.profile-tab:hover{background:#F3F8F5}
.settings-tabs button.active,.labour-tabs button.active,.profile-tab.active{font-weight:750}
.settings-tabs button.active::after,.labour-tabs button.active::after{content:"";display:block;height:2px;border-radius:99px;background:currentColor;margin-top:3px}
@media(max-width:767px){.settings-tabs button.active::after{margin-top:2px}.labour-tabs button.active::after{margin-top:2px}}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin:12px 0}
.stat-card{min-width:0;padding:14px 15px;background:linear-gradient(180deg,#fff,#FBFDFC);border:1px solid var(--ui-border);border-radius:var(--ui-radius);box-shadow:var(--ui-shadow)}
.stat-card .lbl,.stat-card label{display:block;color:var(--ui-muted);font-size:11px;font-weight:650;text-transform:uppercase;letter-spacing:.04em}
.stat-card .val,.stat-card strong{display:block;margin-top:6px;color:var(--ui-ink);font-size:20px;font-weight:760;line-height:1.15}
.stat-card small,.stat-card p{display:block;margin:4px 0 0;color:var(--ui-subtle);font-size:11px;line-height:1.4}
@media(max-width:767px){.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.stat-card{padding:12px}.stat-card .val,.stat-card strong{font-size:18px}}

/* Consistent page-level action bars for branch, company and report screens. */
.branch-page-toolbar,.company-page-toolbar{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:52px;
  margin:0 0 16px;
  padding:9px 11px;
  border:1px solid var(--ui-border);
  border-radius:var(--ui-radius);
  background:linear-gradient(180deg,#fff,#F3F8F5);
  box-shadow:var(--ui-shadow);
}
.branch-page-toolbar>span,.company-page-toolbar>span{
  color:var(--ui-muted)!important;
  font-size:11px!important;
  line-height:1.4;
}
.branch-page-toolbar .btn,.company-page-toolbar .btn{min-height:34px;white-space:nowrap}
.branch-page-toolbar .btn:first-of-type,.company-page-toolbar .btn:first-of-type{margin-left:auto}
@media(max-width:700px){
  .branch-page-toolbar,.company-page-toolbar{align-items:stretch;flex-wrap:wrap;padding:10px;gap:7px}
  .branch-page-toolbar>span,.company-page-toolbar>span{flex:1 0 100%;margin:0!important}
  .branch-page-toolbar .btn,.company-page-toolbar .btn{flex:1;min-height:42px;padding-inline:10px}
  .branch-page-toolbar .btn:first-of-type,.company-page-toolbar .btn:first-of-type{margin-left:0}
}
/* Audit log & security activity */
.audit-page{max-width:1450px;margin:0 auto;padding-bottom:28px;color:#10261f}.audit-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:16px}.audit-heading h1{font-size:23px;letter-spacing:-.35px;line-height:1.25;margin:0;color:#0b1b16}.audit-heading p{font-size:12px;color:#4F6B60;margin:5px 0 0}.audit-heading .btn{display:flex;align-items:center;gap:7px;min-height:38px}.audit-heading svg{width:15px}
.audit-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}.audit-kpi{display:flex;align-items:center;gap:12px;min-height:96px;background:#fff;border:1px solid #DDE5E0;border-radius:8px;padding:15px 16px;box-shadow:0 2px 8px rgba(19,38,30,.03)}.audit-kpi>span{width:39px;height:39px;border-radius:7px;display:grid;place-items:center}.audit-kpi>span svg{width:20px}.audit-kpi>span.blue{color:#1e7757;background:#E2F0EB}.audit-kpi>span.green{color:#17884c;background:#ecf9f1}.audit-kpi>span.purple{color:#6943b6;background:#f3effb}.audit-kpi>span.red{color:#c84444;background:#fff0f0}.audit-kpi small{display:block;font-size:11px;color:#5c776e}.audit-kpi strong{font-size:22px;display:block;line-height:1.1;margin-top:2px}.audit-kpi p{font-size:11px;color:#627970;margin:5px 0 0}
.audit-overview{display:grid;grid-template-columns:1.45fr 1fr;gap:12px;margin-bottom:14px}.audit-overview>section{background:#fff;border:1px solid #DDE5E0;border-radius:8px;overflow:hidden;min-height:208px}.audit-panel-head{padding:14px 16px;border-bottom:1px solid #dfece7}.audit-panel-head strong{display:block;font-size:12px}.audit-panel-head span{display:block;font-size:11px;color:#5e736c;margin-top:3px}.audit-bars{display:grid;gap:9px;padding:15px 17px}.audit-bars button{display:grid;grid-template-columns:135px 1fr;gap:12px;align-items:center;border:0;background:0;padding:0;font:inherit;cursor:pointer}.audit-bars button>span{display:flex;justify-content:space-between;color:#47695c;font-size:12px}.audit-bars button>span b{color:#203e34}.audit-bars button>i{height:7px;background:#e9f3ef;border-radius:4px;overflow:hidden}.audit-bars button>i em{display:block;height:100%;min-width:2px;background:#1e7757;border-radius:4px}.audit-bars button>i em.c1{background:#0f7d8d}.audit-bars button>i em.c2{background:#7447b8}.audit-bars button>i em.c3{background:#a76611}.audit-bars button>i em.c4{background:#627a71}.audit-critical{padding:7px 14px}.audit-critical>button{width:100%;display:grid;grid-template-columns:26px 1fr 10px;gap:9px;align-items:center;border:0;border-bottom:1px solid #e1eee9;background:#fff;padding:9px 0;text-align:left;cursor:pointer}.audit-critical>button:last-child{border-bottom:0}.audit-critical>button>i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#fff0f0;color:#c83e48;font-style:normal;font-weight:800}.audit-critical strong{display:block;font-size:11px}.audit-critical small{display:block;font-size:11px;color:#5e736c;margin-top:3px}.audit-critical>button>b{font-size:15px;color:#5e736c}.audit-clear{font-size:11px;color:#58766c;padding:18px}
.audit-register{background:#fff;border:1px solid #DDE5E0;border-radius:8px;overflow:hidden}.audit-filters{display:grid;grid-template-columns:minmax(220px,2fr) repeat(3,minmax(125px,1fr)) auto;gap:8px;padding:12px 14px;border-bottom:1px solid #dbece6}.audit-filters label{display:flex;align-items:center;min-height:37px;border:1px solid #cbe5db;border-radius:6px;padding:0 9px}.audit-filters label:focus-within{border-color:#1e7757;box-shadow:0 0 0 3px rgba(30,119,87,.1)}.audit-filters label svg{width:15px;color:#5c786e}.audit-filters input{border:0!important;box-shadow:none!important;height:35px;font-size:11px;padding-left:8px;min-width:0}.audit-filters select{height:37px;border-radius:6px;font-size:11px}.audit-filters>button{border:0;background:none;color:#5d7d72;font:inherit;font-size:12px;cursor:pointer}.audit-result{padding:8px 14px;font-size:11px;color:#5d736b}.audit-result strong{color:#27453a}.audit-table{overflow-x:auto}.audit-table table{min-width:950px}.audit-table th{background:#F7FAF8;padding:9px 11px;font-size:11px;color:#556e63}.audit-table td{padding:9px 11px;font-size:11px;vertical-align:middle}.audit-table tbody tr{cursor:pointer}.audit-table tbody tr:hover{background:#edfbf6}.audit-table td>strong{display:block;font-size:11px}.audit-table td>small{display:block;font-size:11px;color:#61786f;margin-top:2px;font-family:ui-monospace,monospace}.audit-user{display:flex;align-items:center;gap:8px}.audit-user>span{width:29px;height:29px;border-radius:50%;background:#0d3526;color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700}.audit-user strong{display:block;font-size:11px}.audit-user small{display:block;font-size:11px;color:#60786f;margin-top:2px}.audit-category{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:#3e6655}.audit-category i{width:8px;height:8px;border-radius:2px;background:#61756e}.audit-category.payroll i{background:#1b8648}.audit-category.attendance i{background:#0e7d8d}.audit-category.access i{background:#7045b5}.audit-category.configuration i{background:#a7630e}.audit-open{width:32px;height:32px;border:0;background:none;font-size:18px;color:#5a746b;cursor:pointer}.audit-mobile-list{display:none}
.audit-overlay{position:fixed;inset:0;background:rgba(7,27,19,.35);z-index:1200;opacity:0;pointer-events:none;transition:.2s}.audit-overlay.open{opacity:1;pointer-events:auto}.audit-drawer{position:fixed;right:0;top:0;bottom:0;width:370px;max-width:92vw;background:#fff;z-index:1201;box-shadow:-12px 0 38px rgba(12,49,35,.18);transform:translateX(102%);transition:transform .25s;overflow-y:auto}.audit-drawer.open{transform:none}.audit-drawer-head{height:58px;border-bottom:1px solid #dbece6;padding:0 18px;display:flex;align-items:center;justify-content:space-between}.audit-drawer-head strong{font-size:14px}.audit-drawer-head button{border:0;background:none;font-size:22px;color:#4d7063;cursor:pointer}.audit-event-id{padding:15px 18px;border-bottom:1px solid #e1eee9}.audit-event-id>span{display:block;font-size:11px;color:#5e736c}.audit-event-id>strong{display:inline-block;font-size:11px;margin-top:4px}.audit-event-id>button{float:right;border:0;background:none;color:#1e7757;font:inherit;font-size:12px;cursor:pointer}.audit-drawer section{padding:16px 18px;border-bottom:1px solid #e1eee9}.audit-drawer dl{margin:0}.audit-drawer dl>div{margin-bottom:13px}.audit-drawer dt{text-transform:capitalize;font-size:11px;color:#5e746c;margin-bottom:3px}.audit-drawer dd{font-size:11px;color:#2b4b3f;margin:0;word-break:break-word}.audit-drawer dd small{display:block;font-size:11px;color:#5e746c;margin-top:2px}.audit-drawer h3{font-size:11px;margin:0 0 12px}.audit-details-list>div{display:grid;grid-template-columns:110px 1fr;gap:8px;padding:8px 0;margin:0!important;border-bottom:1px solid #e9f3ef}.audit-details-list p{font-size:11px;color:#5c786e}.audit-immutable{display:flex;gap:10px;margin:16px 18px;padding:12px;border:1px solid #ceebe0;background:#f2fbf7;border-radius:6px}.audit-immutable svg{width:17px;color:#1e7757;flex:0 0 auto}.audit-immutable strong{font-size:11px}.audit-immutable p{font-size:11px;color:#57756a;line-height:1.5;margin:4px 0 0}
@media(max-width:1199px){.audit-overview{grid-template-columns:1fr}.audit-filters{grid-template-columns:2fr repeat(3,1fr)}.audit-filters>button{display:none}}
@media(max-width:767px){.audit-heading h1{font-size:19px}.audit-heading p{font-size:11px;line-height:1.4}.audit-heading .btn{width:44px;padding:0;justify-content:center;font-size:0}.audit-heading .btn svg{width:17px}.audit-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.audit-kpi{min-height:82px;padding:10px;gap:8px}.audit-kpi>span{width:31px;height:31px}.audit-kpi>span svg{width:16px}.audit-kpi small{font-size:11px}.audit-kpi strong{font-size:19px}.audit-kpi p{font-size:11px}.audit-overview{display:none}.audit-filters{grid-template-columns:1fr 44px;padding:9px}.audit-filters select,.audit-filters>button{display:none}.audit-filters:after{content:"☷";display:grid;place-items:center;border:1px solid #cbe5db;border-radius:6px;color:#45695c;font-size:18px}.audit-table{display:none}.audit-mobile-list{display:grid;padding:0 8px 10px;gap:8px}.audit-mobile-card{display:grid;grid-template-columns:76px 8px minmax(0,1fr) auto 10px;gap:7px;align-items:start;border:1px solid #DDE5E0;border-radius:7px;background:#fff;padding:11px 8px;min-height:91px;text-align:left;color:#1f3e32;position:relative}.audit-mobile-card time{font-size:11px;color:#5d7b70;line-height:1.4}.audit-timeline-dot{width:7px;height:7px;border-radius:50%;background:#61756e;margin-top:3px}.audit-timeline-dot.payroll{background:#1b8648}.audit-timeline-dot.attendance{background:#0e7d8d}.audit-timeline-dot.access{background:#7045b5}.audit-timeline-dot.configuration{background:#a7630e}.audit-mobile-card>div strong{display:block;font-size:11px}.audit-mobile-card>div small{display:block;font-size:11px;color:#5c786e;margin-top:4px}.audit-mobile-card>div em{display:block;font-size:11px;color:#5e736c;font-style:normal;margin-top:5px}.audit-mobile-card>.audit-category{margin-top:1px}.audit-mobile-card>b{font-size:16px;color:#5e736c}.audit-drawer{top:auto;width:100%;max-width:none;height:min(78vh,660px);border-radius:16px 16px 0 0;transform:translateY(102%)}.audit-drawer.open{transform:none}.audit-drawer-head{height:51px}.audit-drawer section{padding:13px 16px}.audit-event-id{padding:12px 16px}}
/* Roles & permissions */
.permission-page{max-width:1450px;margin:0 auto;padding-bottom:72px;color:#10261f}.permission-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:15px}.permission-heading h1{font-size:23px;line-height:1.25;letter-spacing:-.35px;margin:0;color:#0b1b16}.permission-heading p{font-size:12px;color:#4F6B60;margin:5px 0 0}.permission-heading>div:last-child{display:flex;gap:8px}.permission-heading .btn{min-height:38px}
.permission-role-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:13px}.permission-role-cards>button{display:grid;grid-template-columns:43px minmax(0,1fr) auto;gap:10px;align-items:start;text-align:left;min-height:96px;padding:13px;background:#fff;border:1px solid #DDE5E0;border-radius:8px;color:#1d3b30;font:inherit;cursor:pointer}.permission-role-cards>button:hover{border-color:#4dd2a1}.permission-role-cards>button.active{border-color:#1e7757;background:#F3F8F5;box-shadow:0 0 0 1px #1e7757}.permission-role-cards>button>span{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#E2F0EB;color:#1e7757}.permission-role-cards>button>span.manager{background:#eaf8f7;color:#097e77}.permission-role-cards>button>span.hr{background:#f3effb;color:#7045b5}.permission-role-cards>button>span.employee{background:#fff4e7;color:#a95b00}.permission-role-cards svg{width:20px}.permission-role-cards strong{display:block;font-size:11px;margin-top:2px}.permission-role-cards small{display:block;font-size:11px;color:#55655e;margin-top:4px}.permission-role-cards em{display:block;font-size:11px;color:#1e7757;font-style:normal;margin-top:8px}.permission-role-cards>button>b{width:17px;height:17px;border-radius:50%;display:grid;place-items:center;background:#1e7757;color:#fff;font-size:12px}
.permission-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:12px;align-items:start}.permission-role-detail{background:#fff;border:1px solid #DDE5E0;border-radius:8px;padding:18px;min-height:520px}.permission-role-icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#E2F0EB;color:#1e7757;margin-bottom:13px}.permission-role-icon.manager{background:#eaf8f7;color:#097e77}.permission-role-icon.hr{background:#f3effb;color:#7045b5}.permission-role-icon.employee{background:#fff4e7;color:#a95b00}.permission-role-icon svg{width:25px}.permission-role-detail h2{font-size:15px;margin:0}.permission-role-detail>p{font-size:11px;color:#5a776d;margin:4px 0 20px}.permission-role-detail h3{font-size:11px;margin:16px 0 6px;color:#234135}.permission-role-detail>div:not(.permission-role-icon){font-size:11px;line-height:1.55;color:#58796d}.permission-role-detail aside{display:flex;align-items:flex-start;gap:8px;margin-top:26px;padding:11px;border:1px solid #c1efde;background:#edfbf6;border-radius:6px;color:#3c6857}.permission-role-detail aside svg{width:15px;flex:0 0 auto}.permission-role-detail aside span{font-size:11px;line-height:1.5}
.permission-matrix{background:#fff;border:1px solid #DDE5E0;border-radius:8px;overflow:hidden;min-width:0}.permission-matrix-head{display:grid;grid-template-columns:minmax(230px,2fr) repeat(5,minmax(65px,.5fr));align-items:center;background:#F7FAF8;border-bottom:1px solid #DDE5E0;min-height:43px}.permission-matrix-head>div{font-size:11px;font-weight:700;padding:0 15px}.permission-matrix-head>span{text-align:center;font-size:11px;color:#5B6E64}.permission-module{display:grid;grid-template-columns:minmax(230px,2fr) repeat(5,minmax(65px,.5fr));border-bottom:1px solid #ddede7;min-height:50px}.permission-module:last-child{border-bottom:0}.permission-module-title{grid-column:1;display:flex;align-items:center;justify-content:space-between;gap:8px;border:0;background:#fff;text-align:left;padding:8px 13px;color:#1e3c31;font:inherit;cursor:pointer}.permission-module-title:hover{background:#f3fcf9}.permission-module-title>span{display:flex;align-items:center;gap:9px}.permission-module-title svg{width:16px;color:#54786b}.permission-module-title strong{display:block;font-size:11px}.permission-module-title small{display:block;font-size:11px;color:#5e746c;margin-top:2px}.permission-module-title>b{font-size:14px;color:#5a776d;display:none}.permission-module-controls{display:contents}.permission-module-controls label{display:flex;align-items:center;justify-content:center;position:relative;border-left:1px solid #e9f3ef;cursor:pointer;min-height:50px}.permission-module-controls input{width:16px;height:16px;accent-color:#1e7757;cursor:pointer}.permission-module-controls input:disabled{cursor:not-allowed}.permission-module-controls label>span{display:none}.permission-module-controls label>i{font-style:normal;font-size:11px;color:#5e746c;margin-left:4px}.permission-legend{display:flex;gap:23px;align-items:center;padding:12px 15px;background:#fafdfc;border-top:1px solid #dfece7}.permission-legend span{display:flex;align-items:center;gap:6px;font-size:11px;color:#5a786d}.permission-legend i{width:14px;height:14px;border:1px solid #afcdc1;border-radius:2px;font-style:normal;display:grid;place-items:center}.permission-legend i.allowed{background:#1e7757;border-color:#1e7757;color:#fff}.permission-legend i.locked{border:0;color:#59766c}
.permission-sticky{position:fixed;left:224px;right:0;bottom:0;z-index:400;min-height:62px;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-top:1px solid #DCE6E0;box-shadow:0 -5px 18px rgba(19,38,30,.06);display:flex;align-items:center;justify-content:space-between;padding:9px 25px}.sidebar-collapsed .permission-sticky{left:72px}.permission-sticky>span{display:flex;align-items:center;gap:9px}.permission-sticky>span i{width:9px;height:9px;border-radius:50%;background:#0B6B57}.permission-sticky>span b{font-size:11px;color:#5B6E64}.permission-sticky.dirty>span i{background:#a5630d}.permission-sticky.dirty>span b{color:#a55b00}.permission-sticky>div{display:flex;gap:8px}.permission-sticky .btn{min-width:120px;justify-content:center}.permission-save:disabled{opacity:.5;cursor:not-allowed}
@media(max-width:1199px){.permission-layout{grid-template-columns:190px minmax(0,1fr)}.permission-matrix-head{grid-template-columns:minmax(190px,2fr) repeat(5,minmax(55px,.5fr))}.permission-module{grid-template-columns:minmax(190px,2fr) repeat(5,minmax(55px,.5fr))}.permission-sticky{left:72px}.tablet-expanded .permission-sticky{left:240px}}
@media(max-width:767px){.permission-page{padding-bottom:92px}.permission-heading h1{font-size:19px}.permission-heading p{font-size:11px;line-height:1.4}.permission-heading>div:last-child{display:none}.permission-role-cards{display:flex;overflow-x:auto;gap:8px;padding-bottom:7px;scrollbar-width:none}.permission-role-cards::-webkit-scrollbar{display:none}.permission-role-cards>button{min-width:112px;width:112px;min-height:113px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 6px;gap:5px}.permission-role-cards>button>span{width:35px;height:35px}.permission-role-cards strong{font-size:11px}.permission-role-cards small{font-size:11px}.permission-role-cards em{display:none}.permission-role-cards>button>b{position:absolute;margin-left:79px}.permission-layout{display:block}.permission-role-detail{min-height:0;padding:14px;margin-bottom:10px;display:grid;grid-template-columns:43px 1fr;column-gap:10px}.permission-role-icon{width:40px;height:40px;grid-row:1/3;margin:0}.permission-role-detail h2{font-size:13px}.permission-role-detail>p{margin:2px 0 9px}.permission-role-detail h3,.permission-role-detail>div:not(.permission-role-icon){grid-column:1/-1}.permission-role-detail aside{grid-column:1/-1;margin-top:14px}.permission-matrix-head{display:none}.permission-matrix{background:transparent;border:0;overflow:visible}.permission-matrix-body{display:grid;gap:8px}.permission-module{display:block;min-height:0;border:1px solid #DDE5E0;border-radius:7px;background:#fff;overflow:hidden}.permission-module-title{width:100%;min-height:50px;padding:10px 12px}.permission-module-title>b{display:block}.permission-module:not(.open) .permission-module-controls{display:none}.permission-module.open .permission-module-controls{display:grid;grid-template-columns:1fr}.permission-module-controls label{min-height:46px;border-left:0;border-top:1px solid #e9f3ef;padding:0 13px;justify-content:space-between}.permission-module-controls label>span{display:block;font-size:11px;color:#4b6d60;order:-1}.permission-module-controls input{width:18px;height:18px}.permission-legend{display:none}.permission-sticky{left:0;bottom:58px;display:block;min-height:61px;padding:8px 12px}.permission-sticky>span{display:none}.permission-sticky>div{width:100%}.permission-sticky .btn:first-child{display:none}.permission-sticky .btn-primary{width:100%;min-height:44px}}

/* Approval workflows */
.approval-page{max-width:1450px;margin:0 auto;padding-bottom:78px;color:#10261f}.approval-heading{display:flex;justify-content:space-between;gap:18px;margin-bottom:17px}.approval-heading h1{font-size:23px;line-height:1.25;letter-spacing:-.35px;margin:0;color:#0b1b16}.approval-heading p{font-size:12px;color:#4F6B60;margin:5px 0 0}.approval-heading>div:last-child{display:flex;gap:8px}.approval-heading .btn{min-height:38px}
.approval-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:#fff;border:1px solid #DDE5E0;border-radius:8px;margin-bottom:14px}.approval-metrics>div{display:flex;align-items:center;gap:13px;min-height:92px;padding:14px 20px;border-right:1px solid #dbebe5}.approval-metrics>div:last-child{border-right:0}.approval-metrics>div>svg{width:42px;height:42px;padding:10px;border-radius:50%;background:#E2F0EB;color:#1e7757}.approval-metrics>div.amber>svg{background:#fff2e4;color:#b16008}.approval-metrics>div.green>svg{background:#eaf7ee;color:#138244}.approval-metrics small,.approval-metrics em{display:block;font-size:11px;font-style:normal;color:#5d7d72}.approval-metrics strong{display:block;font-size:21px;line-height:1.1;margin:3px 0}.approval-metrics em{color:#158245}.approval-metrics .amber em{color:#af5f05}
.approval-workspace{display:grid;grid-template-columns:230px minmax(0,1fr);gap:12px;align-items:start}.approval-workflow-selector,#approval-workflow-detail{background:#fff;border:1px solid #DDE5E0;border-radius:8px;overflow:hidden}.approval-workflow-selector h2{font-size:11px;margin:0;padding:14px 15px;border-bottom:1px solid #DDE5E0}.approval-workflow-selector>button{width:100%;min-height:64px;display:grid;grid-template-columns:22px minmax(0,1fr) 12px;align-items:center;gap:9px;padding:10px 13px;background:#fff;border:0;border-bottom:1px solid #e1eee9;text-align:left;color:#213f34;font:inherit;cursor:pointer}.approval-workflow-selector>button:hover{background:#f3fcf9}.approval-workflow-selector>button.active{background:#F3F8F5;color:#1e7757;box-shadow:inset 3px 0 #1e7757}.approval-workflow-selector svg{width:17px}.approval-workflow-selector strong{display:block;font-size:11px}.approval-workflow-selector small{display:block;font-size:11px;color:#5e786f;margin-top:4px}.approval-workflow-selector>button>b{font-size:17px;font-weight:400}
.approval-empty-workflows{padding:16px;color:#5d7d72;font-size:11px;line-height:1.5}.approval-empty-workflows p{margin:0 0 12px}.approval-empty-workflows .btn{width:100%;min-height:42px;white-space:normal}
.approval-inbox-tabs{display:flex;gap:8px;padding:0 16px 14px;flex-wrap:wrap}.approval-inbox-tabs .btn{min-height:38px}.approval-inbox-tabs .btn.active{background:#1e7757;color:#fff;border-color:#1e7757}
.approval-conditions{padding:16px;border-top:1px solid #d9ece5}.approval-conditions h3{margin:0 0 5px;font-size:12px}.approval-conditions p{margin:0 0 12px;color:#5B6E64;font-size:11px}.approval-condition-row{display:grid;grid-template-columns:minmax(0,1fr) 140px auto;gap:8px;margin-bottom:8px}.approval-condition-row input,.approval-condition-row select{min-height:36px;border:1px solid #c7e3d9;border-radius:6px;padding:0 9px;font:inherit;font-size:11px}.approval-condition-row .btn{min-height:36px}.approval-conditions>.btn{margin-top:4px}
.employee-change-queue{background:#fff;border:1px solid #DDE5E0;border-radius:8px;margin:14px 0;padding:15px}.employee-change-queue-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}.employee-change-queue-head h2{margin:0;font-size:14px;color:#1B2E27}.employee-change-queue-head p{margin:4px 0 0;font-size:11px;color:#5B6E64}.employee-change-queue-list{display:grid;gap:8px}.employee-change-row{display:grid;grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) auto;align-items:center;gap:12px;border:1px solid #E2E9E4;border-radius:7px;padding:10px 12px}.employee-change-person{display:flex;flex-direction:column;gap:4px}.employee-change-person strong{font-size:12px;color:#1B2E27}.employee-change-person small{font-size:11px;color:#5B6E64}.employee-change-fields{display:flex;gap:5px;flex-wrap:wrap}.employee-change-fields span{font-size:11px;text-transform:capitalize;background:#E2F0EB;color:#0B6B57;padding:4px 7px;border-radius:999px}.employee-change-actions{display:flex;gap:6px}.employee-change-actions .btn{font-size:12px;min-height:34px}
.approval-detail-head{padding:16px;border-bottom:1px solid #daeae4}.approval-name-row{display:flex;align-items:center;gap:10px}.approval-name-row h2{font-size:14px;margin:0}.approval-detail-head p{font-size:11px;margin:8px 0 0}.approval-detail-head p strong{margin-right:4px}.approval-active-switch{display:flex;align-items:center;gap:6px;font-size:11px;color:#158245}.approval-active-switch input{position:absolute;opacity:0}.approval-active-switch span{width:29px;height:17px;background:#a1c0b5;border-radius:10px;position:relative}.approval-active-switch span:after{content:"";position:absolute;width:13px;height:13px;left:2px;top:2px;border-radius:50%;background:#fff;transition:.18s}.approval-active-switch input:checked+span{background:#168145}.approval-active-switch input:checked+span:after{transform:translateX(12px)}
.approval-stage-panel{margin:0;padding:16px;border-bottom:1px solid #dbebe5}.approval-section-title{display:flex;align-items:center;gap:6px;margin-bottom:11px}.approval-section-title strong{font-size:11px}.approval-section-title span{font-size:11px;color:#5d7d72}.approval-stage{display:grid;grid-template-columns:1fr;border:1px solid #d2e8e0;border-radius:7px;margin-bottom:9px;background:#fff;position:relative}.approval-stage:before{content:"";position:absolute;left:51px;top:100%;height:10px;border-left:1px solid #a7d9c6}.approval-stage:last-child:before{display:none}.approval-stage-summary{display:grid;grid-template-columns:22px 25px 68px;align-items:center;gap:7px;position:absolute;left:8px;top:13px;background:none;border:0;text-align:left;color:#1c3b2f;font:inherit}.approval-stage-summary>.approval-drag{font-size:16px;color:#5c746b}.approval-stage-summary>b{width:22px;height:22px;border-radius:50%;background:#1e7757;color:#fff;display:grid;place-items:center;font-size:11px}.approval-stage-summary strong{display:block;font-size:11px}.approval-stage-summary small{display:block;font-size:11px;color:#5d7d72;margin-top:2px}.approval-stage-summary>i{display:none}
.approval-stage-fields{display:grid;grid-template-columns:140px minmax(120px,1fr) minmax(130px,1fr) 90px minmax(130px,1fr) 33px;gap:8px;align-items:end;padding:11px 10px 11px 12px}.approval-stage-fields label{font-size:11px;color:#395c4f}.approval-stage-fields label:first-child{grid-column:2}.approval-stage-fields select,.approval-stage-fields input{height:35px;margin-top:5px;font-size:11px;border-radius:5px}.approval-sla{display:flex;align-items:center;position:relative}.approval-sla input{padding-right:28px}.approval-sla span{position:absolute;right:8px;bottom:10px;font-size:11px;color:#5a7c6f}.approval-remove{width:32px;height:35px;border:0;background:#fff;color:#cc4747;display:grid;place-items:center}.approval-remove svg{width:15px}.approval-add-stage{display:flex;align-items:center;gap:6px;color:#1e7757;border-color:#65d8af}.approval-add-stage svg{width:14px}
.approval-policies{padding:15px 16px}.approval-policies h3{font-size:11px;margin:0 0 13px}.approval-policy-grid{display:grid;grid-template-columns:1fr 1.2fr 1.2fr;gap:18px}.approval-policy-grid>label{font-size:11px;color:#345549}.approval-policy-grid>label>span:first-child{display:block;margin-bottom:9px}.approval-policy-grid select{height:35px;font-size:11px}.approval-toggle{display:flex;align-items:center;gap:7px}.approval-toggle input{position:absolute;opacity:0}.approval-toggle i{width:31px;height:18px;border-radius:10px;background:#a1c0b5;position:relative}.approval-toggle i:after{content:"";position:absolute;width:14px;height:14px;left:2px;top:2px;border-radius:50%;background:#fff;transition:.18s}.approval-toggle input:checked+i{background:#1e7757}.approval-toggle input:checked+i:after{transform:translateX(13px)}.approval-toggle b{font-size:12px;font-weight:500;color:#556e63}
.approval-sticky{position:fixed;left:224px;right:0;bottom:0;z-index:400;min-height:65px;background:#fff9ed;border-top:1px solid #f0d7a9;display:flex;align-items:center;justify-content:space-between;padding:9px 25px;transform:translateY(100%);transition:.22s}.approval-sticky.dirty{transform:none}.sidebar-collapsed .approval-sticky{left:72px}.approval-sticky>span{display:flex;align-items:center;gap:10px}.approval-sticky>span>svg{width:19px;color:#ab6008}.approval-sticky strong,.approval-sticky small{display:block}.approval-sticky strong{font-size:11px}.approval-sticky small{font-size:11px;color:#55655e;margin-top:3px}.approval-sticky>div{display:flex;gap:8px}.approval-sticky .btn{min-width:120px}.approval-save:disabled{opacity:.5;cursor:not-allowed}
@media(max-width:1199px){.approval-workspace{grid-template-columns:195px minmax(0,1fr)}.approval-stage-summary{position:static;padding:10px;width:100%;grid-template-columns:18px 24px 1fr 12px}.approval-stage-summary>i{display:block}.approval-stage-fields{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 12px 12px}.approval-stage-fields label:first-child{grid-column:auto}.approval-remove{justify-self:end}.approval-sticky{left:72px}.tablet-expanded .approval-sticky{left:240px}}
@media(max-width:767px){.approval-page{padding-bottom:95px}.approval-heading h1{font-size:19px}.approval-heading p{font-size:11px;line-height:1.4}.approval-heading>div:last-child{display:none}.approval-metrics{display:none}.approval-workspace{display:block}.approval-workflow-selector{display:flex;overflow-x:auto;border:0;background:transparent;border-radius:0;gap:7px;margin:0 -12px 10px;padding:0 12px 6px;scrollbar-width:none}.approval-workflow-selector h2{display:none}.approval-workflow-selector>button{min-width:102px;width:102px;min-height:91px;display:flex;flex-direction:column;justify-content:center;text-align:center;border:1px solid #DDE5E0!important;border-radius:7px;padding:8px;background:#fff}.approval-workflow-selector>button.active{box-shadow:inset 0 0 0 1px #1e7757}.approval-workflow-selector>button>b,.approval-workflow-selector small{display:none}.approval-workflow-selector svg{width:20px}.approval-workflow-selector strong{font-size:11px}.approval-detail-head{padding:14px}.approval-name-row h2{font-size:14px}.approval-detail-head p{font-size:11px}.approval-stage-panel{padding:13px}.approval-stage-summary{min-height:54px;grid-template-columns:18px 24px 1fr 12px}.approval-stage-summary>.approval-drag{display:none}.approval-stage:not(.open) .approval-stage-fields{display:none}.approval-stage-fields{display:grid;grid-template-columns:1fr;padding:0 12px 12px;gap:10px}.approval-stage-fields label:first-child{grid-column:auto}.approval-stage-fields select,.approval-stage-fields input{height:44px;font-size:11px}.approval-sla span{bottom:15px}.approval-remove{width:44px;height:44px;justify-self:end}.approval-add-stage{width:100%;min-height:44px;justify-content:center}.approval-policy-grid{grid-template-columns:1fr;gap:14px}.approval-policy-grid select{height:44px}.approval-sticky{left:0;bottom:58px;min-height:61px;padding:8px 12px}.approval-sticky>span,.approval-sticky .btn:first-child{display:none}.approval-sticky>div{width:100%}.approval-sticky .btn-primary{width:100%;min-height:44px}.approval-sticky:not(.dirty){transform:none;background:#fff;border-top:1px solid #DCE6E0}.approval-sticky:not(.dirty) .approval-save{opacity:.55}}
@media(max-width:767px){.employee-change-queue{margin:10px 0;padding:12px}.employee-change-queue-head h2{font-size:12px}.employee-change-queue-head p{font-size:11px}.employee-change-row{grid-template-columns:1fr;gap:8px}.employee-change-actions{display:grid;grid-template-columns:1fr 1fr}.employee-change-actions .btn{min-height:44px}.employee-change-queue-head>.btn{min-height:44px}.employee-change-queue-tools{width:100%;display:grid;grid-template-columns:1fr 1fr 1fr}.employee-change-queue-tools .btn{min-height:44px}}
.employee-change-queue-tools{display:flex;gap:6px;flex-wrap:wrap}.employee-change-queue-tools .btn{font-size:12px;min-height:34px}.employee-change-queue-tools .btn.active{background:#0B6B57;color:#fff;border-color:#0B6B57}.employee-change-actions{align-items:center}.employee-change-actions small{font-size:12px;color:#5B6E64}
.approval-active-switch input,.approval-toggle input{width:1px!important;height:1px!important}
/* Approval stage form alignment */
@media(min-width:1200px){.approval-stage-fields{grid-template-columns:minmax(145px,1fr) minmax(205px,1.4fr) minmax(135px,.9fr) minmax(180px,1.2fr) 78px minmax(145px,1fr) 32px;gap:12px;align-items:start;padding:16px 14px 16px 198px}.approval-stage-fields label:first-child{grid-column:auto}.approval-stage-fields label{display:flex;min-width:0;flex-direction:column;gap:6px;font-size:11px;line-height:1.2}.approval-stage-fields select,.approval-stage-fields input{width:100%;height:40px;margin-top:0;font-size:11px}.approval-stage-fields .form-help{display:block;min-height:28px;font-size:11px;line-height:1.3;color:#5b7a6f}.approval-sla{height:40px}.approval-sla input{height:40px}.approval-sla span{bottom:12px;font-size:11px}.approval-remove{height:40px;margin-top:22px;align-self:start}}
@media(min-width:1200px) and (max-width:1350px){.approval-stage-fields{padding-left:178px;gap:8px;grid-template-columns:minmax(130px,1fr) minmax(185px,1.35fr) minmax(120px,.9fr) minmax(165px,1.15fr) 70px minmax(130px,1fr) 30px}}

/* Desktop workflow cards use a deliberate two-row form so every control remains readable. */
@media(min-width:1351px){
  .approval-stage-summary{width:190px;grid-template-columns:22px 25px minmax(0,1fr);}
  .approval-stage-fields{grid-template-columns:repeat(4,minmax(0,1fr));padding:16px 14px 16px 250px;gap:14px;align-items:start;}
  .approval-stage-fields label{min-width:0;}
  .approval-stage-fields label:nth-child(5){grid-column:1;}
  .approval-stage-fields label:nth-child(6){grid-column:2;}
  .approval-stage-fields .approval-remove{grid-column:4;grid-row:2;margin-top:22px;justify-self:end;}
}

/* Login and first-entry polish: focused, trustworthy and touch-friendly. */






.quick-users{margin-top:22px;padding-top:18px;border-top:1px solid #E6ECE8}.qu-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#617870}.qu-btn{min-height:48px;padding:9px 11px;border-color:#d6ece4;border-radius:10px;transition:.15s ease}.qu-btn:hover{background:#F3F8F5;border-color:#8de3c2;transform:translateY(-1px)}.qu-avatar{width:32px;height:32px;border-radius:9px;font-size:11px}
@media(max-width:680px){.qu-btn{min-height:52px}}

/* Dashboard usability pass: stronger hierarchy, clearer actions and compact
   responsive cards so the landing page stays scannable on every screen. */
.dashboard-grid{gap:20px}
.kpi-grid{gap:16px}
.kpi-card{position:relative;overflow:hidden;align-items:flex-start;padding:20px;border-radius:14px;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.kpi-card::after{content:"";position:absolute;right:-28px;bottom:-34px;width:105px;height:105px;border-radius:50%;background:rgba(11,107,87,.045);pointer-events:none}
.kpi-card:hover{transform:translateY(-2px);border-color:#99e6c8;box-shadow:0 10px 24px rgba(16,44,36,.1)}
.kpi-icon{width:44px;height:44px;border-radius:12px;box-shadow:0 5px 12px rgba(21,82,58,.12)}
.kpi-label{font-size:11px;font-weight:650;letter-spacing:.03em;text-transform:uppercase;color:#5a7b6f}
.kpi-value{font-size:25px;line-height:1.15;margin-top:2px}
.kpi-trend{font-size:11px;margin-top:8px}
.panel{border-radius:14px;box-shadow:0 6px 20px rgba(16,44,36,.055);overflow:hidden}
.panel-head{min-height:62px;padding:0 20px;background:linear-gradient(180deg,#fff,#FBFDFC)}
.panel-title{font-size:15px;letter-spacing:-.1px}
.panel-subtitle{font-size:11px;margin-top:4px}
.panel-body{padding:20px}
.readiness-row{min-height:54px;gap:10px}
.readiness-name{font-size:12px;font-weight:650}
.readiness-note{font-size:11px;line-height:1.35}
.readiness-actions{grid-template-columns:1fr 1fr;gap:10px}
.attendance-content{gap:34px}
.donut{box-shadow:inset 0 0 0 1px rgba(16,44,36,.05),0 6px 18px rgba(16,44,36,.08)}
.recent-panel .table-wrap{border-top:0}
.recent-panel .panel-body>div{padding:10px 0!important}
.recent-panel .panel-body>div:last-child{border-bottom:0!important}
@media(max-width:900px){.dashboard-grid{gap:14px}.kpi-grid{gap:12px}.panel-head{padding-inline:16px}.panel-body{padding:16px}}
@media(max-width:680px){.kpi-card{padding:16px;border-radius:12px}.kpi-icon{width:40px;height:40px}.kpi-value{font-size:22px}.readiness-actions{grid-template-columns:1fr}.panel-head{min-height:58px}.attendance-content{gap:18px}.recent-panel .panel-body>div{padding:9px 0!important}}

/* Navigation states: make expanded and collapsed modes feel intentional. */
.sidebar{transition:width .22s ease,transform .22s ease,box-shadow .22s ease}
.nav-section{user-select:none}
.nav-item{min-height:42px!important}
.nav-item .nav-icon{transition:transform .16s ease,color .16s ease}.nav-item:hover .nav-icon{transform:translateX(1px)}
.nav-item.active .nav-icon{filter:drop-shadow(0 2px 4px rgba(0,0,0,.16))}
.nav-parent{font-weight:650!important}.nav-parent .nav-label{padding-right:18px}
.nav-parent .nav-label:after{content:"";position:absolute;right:15px;top:50%;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;color:#93A9A0;transform:translateY(-65%) rotate(45deg);transition:transform .18s ease,color .18s ease}.nav-parent.submenu-open .nav-label:after{transform:translateY(-25%) rotate(225deg);color:#fff}
.header-profile{min-width:190px;max-width:280px;padding:6px 10px 6px 7px;border:1px solid #D7E0DA;border-radius:12px;background:#fff;cursor:pointer;text-align:left;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}.header-profile:hover{border-color:#A9CCBF;box-shadow:0 5px 14px rgba(16,44,36,.1);transform:translateY(-1px)}.header-profile .avatar{width:36px;height:36px;border-radius:11px;background:#E2F0EB;color:#0B6B57;font-weight:800}.header-profile-copy{min-width:0}.header-name{font-size:12px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-role{font-size:11px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-role:before{content:"";display:inline-block;width:6px;height:6px;margin:0 5px 1px 0;border-radius:50%;background:#0B6B57}
@media(max-width:1100px){.header-profile{min-width:44px;width:44px;padding:4px;border-radius:11px;justify-content:center}.header-profile .header-user-copy{display:none}}
@media(max-width:680px){.header-profile{min-width:40px;width:40px;height:40px;padding:2px}.header-profile .avatar{width:34px;height:34px}}
.mobile-bottom{height:72px;padding:6px 8px max(6px,env(safe-area-inset-bottom));gap:4px;background:rgba(255,255,255,.98);backdrop-filter:blur(12px);box-shadow:0 -5px 20px rgba(16,44,36,.1)}.bottom-item{position:relative;border-radius:10px;min-height:52px;padding:5px 3px;color:#5B6E64;font-weight:600;transition:background .16s ease,color .16s ease,transform .16s ease}.bottom-item:hover{background:#F3F8F5;color:#0B6B57}.bottom-item.active{background:#E2F0EB;color:#0B6B57}.bottom-item.active:before{content:"";position:absolute;top:-6px;left:50%;width:22px;height:3px;border-radius:99px;background:#0B6B57;transform:translateX(-50%)}.bottom-item .shell-icon{width:21px;height:21px}.bottom-item span{font-size:11px;line-height:1.1}
@media(max-width:680px){.mobile-bottom{display:grid!important}}
.table-wrap{border-radius:0 0 14px 14px}.table-wrap table thead th{position:sticky;top:0;z-index:2;background:#f3fcf9;box-shadow:0 1px 0 #d5ebe3}.table-wrap table tbody tr{transition:background .14s ease}.table-wrap table tbody tr:hover td{background:#edfbf6}.table-wrap table td:first-child{font-weight:550;color:#113c2c}.table-wrap table td:last-child .btn,.table-wrap table td:last-child button{min-height:32px;padding:5px 10px;font-size:12px;border-radius:8px}
.form-grid{gap:16px}.form-group{gap:6px}.form-group label{font-size:11px;font-weight:700;color:#46615A}.form-group input,.form-group select,.form-group textarea{transition:border-color .15s ease,box-shadow .15s ease;background:#FCFEFD}.form-group input:hover,.form-group select:hover,.form-group textarea:hover{border-color:#AFCCC1}.form-group small{line-height:1.4;color:#5B6E64}.modal{border:1px solid #D7E0DA;box-shadow:0 20px 60px rgba(6,32,26,.2)}.modal-title{color:#13211C;font-size:18px;font-weight:750;padding-bottom:12px;border-bottom:1px solid #E6ECE8}.modal-title .close-btn{width:34px;height:34px;border-radius:9px}.modal-title .close-btn:hover{background:#F1F6F3;color:#0B6B57}
.form-section{padding:16px;border:1px solid #cdece0;border-radius:12px;background:#FBFDFC;margin-bottom:14px}.form-section-title{font-size:13px;font-weight:750;color:#103b2a;margin-bottom:12px;padding-bottom:9px;border-bottom:1px solid #dcf2e9}
@media(max-width:680px){.table-wrap table thead th{position:static}.form-grid{gap:13px}.form-section{padding:13px;border-radius:10px}.modal-title{font-size:17px}.table-wrap table td:last-child .btn,.table-wrap table td:last-child button{min-height:38px}}
.submenu-item{border-left:2px solid transparent!important;margin-left:20px!important;margin-right:10px!important;padding-left:24px!important;color:#98dcc1!important}
.submenu-item.submenu-visible{background:rgba(255,255,255,.045)!important}.submenu-item.submenu-visible:hover{border-left-color:#31c58b!important;color:#fff!important}
.sidebar-fixed{padding-top:10px!important}.sidebar-fixed .nav-item{min-height:40px!important}
.sidebar-toggle{transition:background .16s ease,transform .22s ease}.sidebar-toggle:active{transform:scale(.94)}
.app.sidebar-collapsed .nav-item{margin-inline:8px!important}.app.sidebar-collapsed .nav-item:hover .nav-tooltip{box-shadow:0 8px 18px rgba(0,0,0,.2)}
@media(max-width:767px){.sidebar{box-shadow:12px 0 30px rgba(8,24,19,.22)!important}.nav-item{min-height:46px!important;margin-inline:8px!important}.submenu-item{margin-left:18px!important}.sidebar-fixed{padding-bottom:10px!important}}

/* Keep an expanded navigation group visually connected to its children. */
.nav-parent.submenu-open{background:rgba(255,255,255,.095)!important;color:#fff!important}
.nav-parent.submenu-open .nav-icon{color:#5ed7a7}
.submenu-item.submenu-visible{position:relative}
.submenu-item.submenu-visible:before{content:"";position:absolute;left:20px;top:0;bottom:0;border-left:1px solid rgba(51,203,141,.2);pointer-events:none}
@media(max-width:767px){.submenu-item.submenu-visible:before{left:18px}.nav-parent.submenu-open{box-shadow:inset 3px 0 0 #31c58b!important}}

/* Notification centre: clearer unread state and comfortable mobile actions. */
.notification-centre-modal{overflow:hidden;box-shadow:0 18px 50px rgba(10,39,28,.2)}
.notification-centre-modal .modal-title>span{font-weight:750;color:#0d3024}
.notification-centre-list{scrollbar-width:thin;scrollbar-color:#b1d9ca transparent}
.notification-centre-row{position:relative;transition:background .15s ease,transform .15s ease}
.notification-centre-row.unread:before{content:"";position:absolute;left:0;top:18px;width:7px;height:7px;border-radius:50%;background:var(--ui-primary);box-shadow:0 0 0 3px rgba(11,107,87,.12)}
.notification-centre-row .badge{flex:0 0 auto;min-width:54px;justify-content:center;text-transform:capitalize}
@media(max-width:600px){.notification-centre-modal{width:calc(100vw - 16px);max-height:92vh;border-radius:12px 12px 0 0}.notification-centre-list{padding:4px 12px 16px}.notification-centre-row{padding:13px 0}.notification-centre-actions .btn{min-height:38px;flex:1}.notification-centre-actions{gap:7px}.notification-centre-row.unread:before{top:19px}}

/* Consistent form focus language across every module. */
input:not([type="checkbox"]):not([type="radio"]):focus-visible,
select:focus-visible,textarea:focus-visible{outline:0;border-color:#21825d!important;box-shadow:0 0 0 3px rgba(35,139,99,.13)!important}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#c64750!important;background:#fff9f9}
input[aria-invalid="true"]:focus-visible,select[aria-invalid="true"]:focus-visible,textarea[aria-invalid="true"]:focus-visible{box-shadow:0 0 0 3px rgba(211,75,85,.14)!important}
label:has(input:disabled),label:has(select:disabled),label:has(textarea:disabled){cursor:not-allowed;opacity:.72}

/* Mobile navigation stays comfortable on small devices and with long translations. */
@media(max-width:680px){.mobile-bottom{grid-template-columns:repeat(5,minmax(0,1fr));min-height:68px}.bottom-item{min-width:0;min-height:52px;padding-inline:2px;touch-action:manipulation}.bottom-item span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bottom-item:active{transform:translateY(1px)}.bottom-item.active{box-shadow:0 2px 8px rgba(11,107,87,.1)}}

/* KPI cards share one subtle interaction language across operational screens. */
@media(hover:hover){.directory-stat,.attendance-kpi,.loan-kpi,.access-kpi,.document-kpi{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.directory-stat:hover,.attendance-kpi:hover,.loan-kpi:hover,.access-kpi:hover,.document-kpi:hover{transform:translateY(-2px);border-color:#94e3c5;box-shadow:0 9px 22px rgba(14,56,40,.09)}}
.directory-stat:focus-within,.attendance-kpi:focus-within,.loan-kpi:focus-within,.access-kpi:focus-within,.document-kpi:focus-within{border-color:#31c48c;box-shadow:0 0 0 3px rgba(35,139,99,.1)}
.skip-link{position:fixed;left:12px;top:10px;z-index:5000;transform:translateY(-180%);padding:10px 14px;border-radius:7px;background:#fff;color:#1e7757;border:2px solid #1e7757;box-shadow:0 8px 20px rgba(11,48,38,.2);font-size:12px;font-weight:750;text-decoration:none;transition:transform .16s ease}.skip-link:focus{transform:translateY(0);outline:0}
/* Decorated search fields own the focus ring on the wrapper, not the nested input. */
.directory-search input:focus-visible,.attendance-search input:focus-visible,.loan-filterbar label input:focus-visible,
.access-filters label input:focus-visible,.audit-filters label input:focus-visible,.device-log-toolbar label input:focus-visible,
.connector-toolbar label input:focus-visible,.mapping-toolbar label input:focus-visible,.import-audit-toolbar label input:focus-visible,
.enrollment-toolbar label input:focus-visible,.document-filterbar label input:focus-visible{border:0!important;box-shadow:none!important;outline:0!important}

/* Tables remain dense on desktop but advertise horizontal scrolling on narrow screens. */
.table-wrap,.table-scroll,.employee-directory-table,.attendance-live-desktop,.loan-table,.access-table,.audit-table{scrollbar-width:thin;scrollbar-color:#a7d0c0 transparent}
@media(max-width:767px){
  .table-wrap,.table-scroll,.employee-directory-table,.attendance-live-desktop,.loan-table,.access-table,.audit-table{position:relative}
  .table-wrap:after,.table-scroll:after,.employee-directory-table:after,.attendance-live-desktop:after,.loan-table:after,.access-table:after,.audit-table:after{content:"Swipe to view more";position:absolute;right:8px;top:6px;padding:3px 6px;border-radius:4px;background:rgba(13,54,39,.82);color:#fff;font-size:11px;letter-spacing:.02em;pointer-events:none;opacity:.82}
  .table-wrap:has(table:only-child),.table-scroll:has(table:only-child){overflow-x:auto}
}

@media(min-width:1200px) and (max-width:1350px){
  .approval-stage-summary{width:170px;}
  .approval-stage-fields{grid-template-columns:repeat(4,minmax(0,1fr));padding:16px 12px 16px 205px;gap:10px;}
  .approval-stage-fields label:nth-child(5){grid-column:1;}
  .approval-stage-fields label:nth-child(6){grid-column:2;}
  .approval-stage-fields .approval-remove{grid-column:4;grid-row:2;margin-top:22px;justify-self:end;}
}
@media(max-width:1199px){.approval-stage-fields{align-items:start;gap:12px;padding:0 14px 16px}.approval-stage-fields label{display:flex;min-width:0;flex-direction:column;gap:6px;font-size:11px;line-height:1.2}.approval-stage-fields select,.approval-stage-fields input{height:40px;margin-top:0;font-size:11px}.approval-stage-fields .form-help{min-height:0;font-size:11px;line-height:1.3}.approval-sla{height:40px}.approval-sla input{height:40px}.approval-sla span{bottom:12px;font-size:11px}.approval-remove{height:40px;margin-top:22px}}
@media(max-width:767px){.approval-stage-fields{gap:12px;padding:0 12px 14px}.approval-stage-fields label{font-size:11px}.approval-stage-fields select,.approval-stage-fields input{height:44px;font-size:12px}.approval-stage-fields .form-help{font-size:11px}.approval-sla,.approval-sla input{height:44px}.approval-sla span{bottom:14px;font-size:11px}.approval-remove{margin-top:0}}

/* Approval stage form alignment */
@media(min-width:1200px){
  .approval-stage-fields{grid-template-columns:minmax(145px,1fr) minmax(205px,1.4fr) minmax(135px,.9fr) minmax(180px,1.2fr) 78px minmax(145px,1fr) 32px;gap:12px;align-items:start;padding:16px 14px 16px 198px}
  .approval-stage-fields label:first-child{grid-column:auto}
  .approval-stage-fields label{display:flex;min-width:0;flex-direction:column;gap:6px;font-size:11px;line-height:1.2}
  .approval-stage-fields select,.approval-stage-fields input{width:100%;height:40px;margin-top:0;font-size:11px}
  .approval-stage-fields .form-help{display:block;min-height:28px;font-size:11px;line-height:1.3;color:#5b7a6f}
  .approval-sla{height:40px}.approval-sla input{height:40px}.approval-sla span{bottom:12px;font-size:11px}
  .approval-remove{height:40px;margin-top:22px;align-self:start}
}
@media(min-width:1200px) and (max-width:1350px){.approval-stage-fields{padding-left:178px;gap:8px;grid-template-columns:minmax(130px,1fr) minmax(185px,1.35fr) minmax(120px,.9fr) minmax(165px,1.15fr) 70px minmax(130px,1fr) 30px}}
@media(max-width:1199px){
  .approval-stage-fields{align-items:start;gap:12px;padding:0 14px 16px}
  .approval-stage-fields label{display:flex;min-width:0;flex-direction:column;gap:6px;font-size:11px;line-height:1.2}
  .approval-stage-fields select,.approval-stage-fields input{height:40px;margin-top:0;font-size:11px}
  .approval-stage-fields .form-help{min-height:0;font-size:11px;line-height:1.3}
  .approval-sla{height:40px}.approval-sla input{height:40px}.approval-sla span{bottom:12px;font-size:11px}.approval-remove{height:40px;margin-top:22px}
}
@media(max-width:767px){
  .approval-stage-fields{gap:12px;padding:0 12px 14px}
  .approval-stage-fields label{font-size:11px}.approval-stage-fields select,.approval-stage-fields input{height:44px;font-size:12px}
  .approval-stage-fields .form-help{font-size:11px}.approval-sla,.approval-sla input{height:44px}.approval-sla span{bottom:14px;font-size:11px}.approval-remove{margin-top:0}
}

/* Attendance devices command centre */
.attendance-devices-page{max-width:1450px;margin:0 auto;padding-bottom:72px;color:#10261f}.device-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:15px}.device-heading h1{font-size:23px;line-height:1.25;letter-spacing:-.35px;margin:0;color:#0b1b16}.device-heading p{font-size:12px;color:#4F6B60;margin:5px 0 0}.device-heading>div:last-child{display:flex;gap:8px}.device-heading .btn{min-height:38px;display:flex;align-items:center;gap:6px}.device-heading svg{width:15px}
.device-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin-bottom:13px}.device-kpis>div{display:flex;align-items:center;gap:12px;min-height:90px;background:#fff;border:1px solid #DDE5E0;border-radius:8px;padding:13px 15px}.device-kpis>div>span{width:40px;height:40px;border-radius:7px;display:grid;place-items:center}.device-kpis>div>span svg{width:21px}.device-kpis .green{background:#eaf8f0;color:#138345}.device-kpis .amber{background:#fff3e7;color:#ab5b06}.device-kpis .blue{background:#E2F0EB;color:#1e7757}.device-kpis .purple{background:#f2edfb;color:#7044ba}.device-kpis small{display:block;font-size:11px;color:#5c786e}.device-kpis strong{display:block;font-size:21px;line-height:1.1;margin:3px 0}.device-kpis p{font-size:11px;color:#60756e;margin:0}
.device-tabs{display:flex;border-bottom:1px solid #cee6dd;margin-bottom:13px;overflow-x:auto;scrollbar-width:none}.device-tabs::-webkit-scrollbar{display:none}.device-tab{min-width:92px;min-height:40px;border:0;border-bottom:2px solid transparent;background:none;color:#47695c;font:inherit;font-size:12px;cursor:pointer;white-space:nowrap}.device-tab.active{color:#1e7757;border-bottom-color:#1e7757;font-weight:700}.device-tab:hover{background:#eefaf6}
.device-overview-grid{display:grid;grid-template-columns:minmax(0,2.7fr) minmax(235px,1fr);gap:12px;align-items:start}.device-fleet-panel,.device-side>section,.connection-methods,.device-recommendation,.device-section,.device-health-panel{background:#fff;border:1px solid #DDE5E0;border-radius:8px;overflow:hidden}.device-panel-head{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;border-bottom:1px solid #dbebe5}.device-panel-head>div:first-child strong{display:block;font-size:12px}.device-panel-head>div:first-child span{display:block;font-size:11px;color:#5d736b;margin-top:3px}.device-filters{display:flex;align-items:center;gap:7px}.device-filters label{display:flex;align-items:center;width:190px;height:36px;border:1px solid #cbe5db;border-radius:6px;padding:0 9px}.device-filters label svg{width:14px;color:#5c786e}.device-filters input{height:34px;border:0!important;box-shadow:none!important;font-size:11px;padding-left:7px}.device-filters select{width:122px;height:36px;font-size:11px;border-radius:6px}.device-table-wrap{overflow-x:auto}.device-table{min-width:750px}.device-table th{font-size:11px;background:#F7FAF8;color:#5b7b70;padding:10px 12px}.device-table td{font-size:11px;padding:11px 12px;vertical-align:middle}.device-table td strong{font-size:11px}.device-table td small{display:block;font-size:11px;color:#5e746c;margin-top:3px}.device-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;background:#62776e}.device-dot.online,.device-activity i.online{background:#14854b}.device-dot.warning,.device-activity i.warning{background:#e89a17}.device-dot.import,.device-activity i.import{background:#207f5b}.device-health{display:inline-flex;align-items:center;min-height:23px;padding:0 8px;border-radius:5px;font-size:11px;border:1px solid}.device-health.online{background:#edf9f2;color:#16844a;border-color:#bee8cf}.device-health.warning{background:#fff7e9;color:#a36203;border-color:#f0d393}.device-health.import{background:#e5f8f1;color:#1e7655;border-color:#a1e7cc}.device-health.offline{background:#fff0f0;color:#bd3b45;border-color:#efc5c8}.device-action{min-height:29px;padding:4px 9px;font-size:12px}.device-mobile-list{display:none}
.device-side{display:grid;gap:12px}.device-side-head{display:flex;align-items:center;justify-content:space-between;padding:13px 14px;border-bottom:1px solid #dbebe5}.device-side-head strong{font-size:11px}.device-side-head span{min-width:19px;height:19px;border-radius:10px;background:#c04347;color:#fff;display:grid;place-items:center;font-size:11px}.device-alert{display:grid;grid-template-columns:25px 1fr;gap:9px;padding:12px 13px;border-bottom:1px solid #e1eee9}.device-alert>svg{width:19px;color:#a86208}.device-alert.mapping>svg{color:#7045b5}.device-alert strong{display:block;font-size:11px}.device-alert small{display:block;font-size:11px;color:#5c776e;line-height:1.45;margin:3px 0 7px}.device-alert button{min-height:28px;border:1px solid #4dd2a1;border-radius:5px;background:#fff;color:#1e7757;font:inherit;font-size:12px;padding:0 8px;cursor:pointer}.device-clear{padding:18px 14px;color:#16844a;font-size:11px}.device-activity{padding:7px 13px 11px}.device-activity>div{display:grid;grid-template-columns:8px 1fr;gap:8px;padding:7px 0}.device-activity i{width:7px;height:7px;border-radius:50%;background:#62776e;margin-top:3px}.device-activity strong,.device-activity small{display:block}.device-activity strong{font-size:11px}.device-activity small{font-size:11px;color:#5e736c;margin-top:3px}
.connection-methods{margin-top:12px;padding:13px 14px}.connection-methods h2{font-size:11px;margin:0 0 11px}.connection-methods>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}.connection-methods article{display:flex;gap:9px;padding:5px 14px;border-right:1px solid #daeae4}.connection-methods article:first-child{padding-left:0}.connection-methods article:last-child{border-right:0}.connection-methods article>svg{width:29px;height:29px;padding:7px;border-radius:50%;background:#E2F0EB;color:#1e7757;flex:0 0 auto}.connection-methods strong,.connection-methods small{display:block}.connection-methods strong{font-size:11px}.connection-methods small{font-size:11px;color:#5d7b70;line-height:1.45;margin-top:3px}
.device-recommendation{margin-top:12px}.device-recommendation summary{min-height:43px;display:flex;align-items:center;gap:7px;padding:0 14px;font-size:11px;font-weight:700;cursor:pointer}.device-recommendation summary span{font-size:11px;font-weight:500;color:#5d7b70;background:#edf4f2;border-radius:4px;padding:2px 5px}.device-recommendation-form{display:grid;grid-template-columns:repeat(3,minmax(140px,1fr)) 2fr;gap:9px;padding:12px 14px;border-top:1px solid #dbece6}.device-recommendation-form label{font-size:11px}.device-recommendation-form select{height:36px;margin-top:5px;font-size:11px}
.device-section,.device-health-panel{padding:15px}.device-section-head,.device-panel-title{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}.device-section-head h2{font-size:14px;margin:0}.device-section-head p{font-size:11px;color:#5d7b70;margin:4px 0 0}.device-section-head>div:last-child{display:flex;gap:8px}.device-panel-title strong{font-size:12px}.device-connector-form{display:grid;grid-template-columns:1fr 1fr auto;gap:9px;align-items:end;margin-bottom:14px}.device-connector-form label{font-size:11px}.device-connector-form input,.device-connector-form select{height:38px;margin-top:5px;font-size:11px}.device-mapping-filters{display:flex;gap:8px;align-items:center;margin-bottom:14px}.device-mapping-filters select,.device-mapping-filters input{height:38px;max-width:230px;font-size:11px}.device-mobile-action{display:none}
@media(max-width:1199px){.device-overview-grid{grid-template-columns:1fr}.device-side{grid-template-columns:1fr 1fr}.device-filters label{width:160px}.device-filters select{width:105px}.connection-methods>div{grid-template-columns:repeat(2,1fr);gap:9px}.connection-methods article{border:0}.device-recommendation-form{grid-template-columns:repeat(3,1fr)}.device-recommendation-form>div{grid-column:1/-1}}
@media(max-width:767px){.attendance-devices-page{padding-bottom:94px}.device-heading{display:block}.device-heading h1{font-size:19px}.device-heading p{font-size:11px;line-height:1.4}.device-heading>div:last-child{display:grid;grid-template-columns:1fr 1fr;margin-top:11px}.device-heading .btn{min-height:44px;justify-content:center}.device-heading .btn-primary{grid-column:1/-1;grid-row:1}.device-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.device-kpis>div{min-height:79px;padding:9px;gap:8px}.device-kpis>div>span{width:31px;height:31px}.device-kpis>div>span svg{width:16px}.device-kpis small{font-size:11px}.device-kpis strong{font-size:18px}.device-tabs{margin-left:-12px;margin-right:-12px;padding:0 12px}.device-tab{min-width:87px;min-height:44px}.device-overview-grid{display:block}.device-panel-head{display:block}.device-panel-head>div:first-child{margin-bottom:9px}.device-filters{display:grid;grid-template-columns:1fr 44px}.device-filters label{width:auto;height:44px}.device-filters select{display:none}.device-filters:after{content:"Filters";font-size:0;display:grid;place-items:center;width:44px;height:44px;border:1px solid #cbe5db;border-radius:6px;background:#fff;color:#476c5e}.device-table-wrap{display:none}.device-mobile-list{display:grid}.device-mobile-list article{padding:12px;border-bottom:1px solid #ddede7}.device-mobile-list article>div{display:grid;grid-template-columns:12px minmax(0,1fr) auto;align-items:center}.device-mobile-list article strong{font-size:11px}.device-mobile-list article p,.device-mobile-list article small{display:block;font-size:11px;color:#5b776d;margin:5px 0 0}.device-mobile-list article button{display:block;margin-left:auto;margin-top:6px;border:0;background:none;color:#1e7757;font:inherit;font-size:12px;min-height:28px}.device-side{display:block;margin-top:10px}.device-side>section+section{display:none}.connection-methods{display:none}.device-recommendation{margin-top:10px}.device-recommendation-form{grid-template-columns:1fr}.device-section{padding:12px}.device-section-head{display:block}.device-section-head>div:last-child{display:grid;margin-top:10px}.device-section-head .btn{min-height:44px}.device-connector-form{grid-template-columns:1fr}.device-connector-form input,.device-connector-form select,.device-connector-form .btn{height:44px}.device-mapping-filters{display:grid;grid-template-columns:1fr 44px}.device-mapping-filters select{max-width:none;height:44px}.device-mapping-filters input{display:none}.device-mapping-filters .btn{width:44px;height:44px;font-size:0}.device-mobile-action{position:fixed;left:0;right:0;bottom:58px;z-index:390;display:block;padding:8px 12px;background:#fff;border-top:1px solid #DCE6E0}.device-mobile-action .btn{width:100%;min-height:44px}.attendance-devices-page:has(.device-heading .btn-primary) .device-mobile-action{display:block}}
/* Keep the sidebar expansion control reachable while the navigation rail is collapsed.
   The previous bottom offset positioned the button outside the 72px logo area, where
   the sidebar's overflow clipping made it impossible to expand the menu again. */
@media (min-width:1200px){
  .app.sidebar-collapsed .logo{position:relative}
  .app.sidebar-collapsed .logo:before{
    position:absolute;
    top:20px;
    left:7px;
    width:30px;
    height:32px;
  }
  .app.sidebar-collapsed .sidebar-toggle{
    display:grid;
    top:20px;
    right:5px;
    bottom:auto;
    width:27px;
    height:32px;
    z-index:2;
  }
  .app.sidebar-collapsed .sidebar-toggle .shell-icon{width:17px;height:17px}
}

@media (min-width:768px) and (max-width:1199px){
  .logo:before{
    position:absolute;
    top:20px;
    left:7px;
    width:30px;
    height:32px;
  }
  .sidebar-toggle{
    display:grid;
    top:20px;
    right:5px;
    bottom:auto;
    width:27px;
    height:32px;
    z-index:2;
  }
  .sidebar-toggle .shell-icon{width:17px;height:17px}
  .app.tablet-expanded .logo:before{display:none}
  .app.tablet-expanded .sidebar-toggle{
    top:18px;
    right:12px;
    width:36px;
    height:36px;
  }
}

/* Attendance device add/edit workflow */
.attendance-device-modal{position:relative;width:min(720px,94vw);max-height:92vh;padding:0 0 64px;overflow-y:auto;display:flex;flex-direction:column;border-radius:10px;box-shadow:0 24px 70px rgba(12,43,31,.24)}
.attendance-device-modal>.modal-title{position:sticky;top:0;z-index:3;flex:none;margin:0;padding:18px 20px;border-bottom:1px solid #DDE5E0;background:#fff}
.attendance-device-modal>.modal-title>div span{display:block;font-size:16px;color:#0e291f}
.attendance-device-modal>.modal-title>div small{display:block;margin-top:4px;font-size:11px;font-weight:400;color:#5B6E64}
.attendance-device-modal .close-btn{width:36px;height:36px;border-radius:6px;font-size:22px}
.device-modal-section-title{display:flex;align-items:center;gap:10px;padding:14px 20px 7px;background:#fff}
.device-modal-section-title>span{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:#E2F0EB;color:#1e7757;font-size:11px;font-weight:800}
.device-modal-section-title strong,.device-modal-section-title small{display:block}
.device-modal-section-title strong{font-size:11px;color:#1c3b2f}
.device-modal-section-title small{font-size:11px;color:#5e766d;margin-top:2px}
.device-modal-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 13px;padding:5px 20px 12px}
.device-modal-span{grid-column:1/-1}
.attendance-device-modal .form-group label{font-size:11px;color:#426558;margin-bottom:5px}
.attendance-device-modal .form-group label b{color:#d14343}
.attendance-device-modal input,.attendance-device-modal select{height:39px;font-size:11px;border-radius:6px}
.device-connection-hint{display:flex;align-items:flex-start;gap:8px;margin:2px 20px 10px;padding:9px 11px;border:1px solid #c1efde;border-radius:6px;background:#f1fbf7;color:#457261;font-size:11px;line-height:1.45}
.device-connection-hint svg{width:15px;height:15px;color:#1e7757;flex:0 0 auto}
.device-connection-result{display:none;align-items:center;gap:9px;margin:0 20px 11px;padding:10px 11px;border:1px solid;border-radius:6px}
.device-connection-result.success,.device-connection-result.error,.device-connection-result.testing{display:flex}
.device-connection-result.success{background:#eff9f3;border-color:#bde5cc;color:#187a44}
.device-connection-result.error{background:#fff3f3;border-color:#efc7ca;color:#a9333b}
.device-connection-result.testing{background:#f1f9f5;border-color:#cbe2da;color:#486c5e}
.device-connection-result>svg{width:18px;height:18px;flex:0 0 auto}
.device-connection-result strong,.device-connection-result small{display:block}
.device-connection-result strong{font-size:11px}
.device-connection-result small{font-size:11px;margin-top:3px;color:inherit;opacity:.82}
.device-test-spinner{width:17px;height:17px;border-radius:50%;border:2px solid #b2cec3;border-top-color:#1e7757;animation:device-spin .7s linear infinite}
@keyframes device-spin{to{transform:rotate(360deg)}}
.device-modal-actions{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;justify-content:flex-end;gap:8px;padding:12px 20px;border-top:1px solid #DDE5E0;background:#F7FAF8}
.device-modal-actions .btn{min-width:100px;min-height:38px}
.device-test-btn{color:#1e7757;border-color:#4fd3a3;background:#fff}
@media(max-width:767px){
  .attendance-device-modal{width:100%;height:94vh;max-height:94vh;padding-bottom:116px;border-radius:12px 12px 0 0}
  .attendance-device-modal>.modal-title{padding:14px}
  .attendance-device-modal>.modal-title>div small{max-width:260px;line-height:1.4}
  .device-modal-section-title{padding:12px 14px 6px}
  .device-modal-grid{grid-template-columns:1fr;gap:10px;padding:5px 14px 11px}
  .device-modal-span{grid-column:auto}
  .attendance-device-modal input,.attendance-device-modal select{height:44px;font-size:11px}
  .device-connection-hint,.device-connection-result{margin-left:14px;margin-right:14px}
  .device-modal-actions{padding:10px 14px;display:grid;grid-template-columns:1fr 1fr}
  .device-modal-actions .btn{min-height:44px}
  .device-modal-actions .btn-primary{grid-column:1/-1;grid-row:1}
  .device-modal-actions .device-test-btn{grid-column:1/-1}
  .device-modal-actions .btn:first-child{display:none}
}
@media(prefers-reduced-motion:reduce){.device-test-spinner{animation:none}}

/* Attendance import review and exception resolution */
.import-audit-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-bottom:12px}.import-audit-summary>div{border:1px solid #DDE5E0;border-radius:7px;padding:11px 13px;background:#fff}.import-audit-summary small,.import-audit-summary strong{display:block}.import-audit-summary small{font-size:11px;color:#5B6E64}.import-audit-summary strong{font-size:19px;margin-top:4px;color:#143328}.import-audit-summary .attention{border-color:#efd7a8;background:#fffaf1}.import-audit-summary .attention strong{color:#a86506}
.import-audit-toolbar{display:flex;gap:8px;padding:10px 11px;border:1px solid #DDE5E0;border-bottom:0;border-radius:7px 7px 0 0;background:#F7FAF8}.import-audit-toolbar label{display:flex;align-items:center;flex:1;max-width:350px;height:36px;border:1px solid #cbe5db;border-radius:6px;background:#fff;padding:0 9px}.import-audit-toolbar label svg{width:14px;color:#5B6E64}.import-audit-toolbar input{height:34px;border:0!important;box-shadow:none!important;font-size:11px}.import-audit-toolbar select{width:150px;height:36px;font-size:11px}
.import-audit-table{overflow-x:auto;border:1px solid #DDE5E0;border-radius:0 0 7px 7px}.import-audit-table table{min-width:850px}.import-audit-table th{padding:10px 11px;background:#fff;font-size:11px}.import-audit-table td{padding:11px;font-size:11px;vertical-align:middle}.import-audit-table td strong,.import-audit-table td small{display:block}.import-audit-table td small{font-size:11px;color:#5d736b;margin-top:4px}.import-source{color:#1e7655;font-weight:700}.import-status{display:inline-flex;align-items:center;min-height:23px;padding:0 8px;border-radius:5px;border:1px solid;font-size:11px;white-space:nowrap}.import-status.success{color:#16844a;background:#edf9f2;border-color:#bee8cf}.import-status.warning{color:#a36203;background:#fff7e9;border-color:#efd18b}.import-status.mapping{color:#7044ba;background:#f5f1fc;border-color:#d7c9ee}.import-review-btn{min-height:29px;font-size:11px}.import-audit-mobile{display:none}
.import-detail-modal{width:min(690px,94vw);max-height:90vh;padding:0;overflow-y:auto;border-radius:10px}.import-detail-head{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;padding:17px 19px;border-bottom:1px solid #DDE5E0;background:#fff}.import-detail-head h2{font-size:16px;margin:8px 0 4px}.import-detail-head p{font-size:11px;color:#5B6E64;margin:0}.import-detail-message{display:flex;gap:10px;margin:15px 19px 11px;padding:11px 12px;border:1px solid;border-radius:7px}.import-detail-message svg{width:19px;flex:0 0 auto}.import-detail-message strong,.import-detail-message small{display:block}.import-detail-message strong{font-size:11px}.import-detail-message small{font-size:11px;line-height:1.45;margin-top:3px}.import-detail-message.success{background:#eff9f3;border-color:#bee5ce;color:#187a44}.import-detail-message.warning{background:#fff8eb;border-color:#ecd19b;color:#986009}.import-detail-message.mapping{background:#f7f3fc;border-color:#d9cbed;color:#6842a7}
.import-detail-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:0 19px 14px}.import-detail-metrics>div{border:1px solid #d8eae3;border-radius:6px;padding:9px}.import-detail-metrics small,.import-detail-metrics strong{display:block}.import-detail-metrics small{font-size:11px;color:#5B6E64}.import-detail-metrics strong{font-size:15px;margin-top:4px}.import-detail-section{padding:13px 19px;border-top:1px solid #ddece6}.import-detail-section h3{font-size:11px;margin:0 0 10px}.import-resolution-list>div{display:grid;grid-template-columns:19px 1fr auto;gap:9px;align-items:center;padding:10px 0;border-bottom:1px solid #e0ede8}.import-resolution-list>div:last-child{border-bottom:0}.import-resolution-list svg{width:17px}.import-resolution-list .ok svg{color:#17844d}.import-resolution-list .issue svg{color:#a16008}.import-resolution-list strong,.import-resolution-list small{display:block}.import-resolution-list strong{font-size:11px}.import-resolution-list small{font-size:11px;color:#5c776e;margin-top:3px}.import-resolution-list button{min-height:29px;border:1px solid #52d1a2;border-radius:5px;background:#fff;color:#1e7757;font:inherit;font-size:12px;padding:0 9px}.import-detail-note{margin:0 19px 13px;padding:10px 11px;border-radius:6px;background:#f5faf8}.import-detail-note strong{font-size:11px}.import-detail-note p{font-size:11px;color:#556e63;margin:4px 0 0}.import-detail-actions{position:sticky;bottom:0;display:flex;justify-content:flex-end;gap:8px;padding:12px 19px;border-top:1px solid #DDE5E0;background:#F7FAF8}.import-detail-actions .btn{min-width:110px}.import-detail-actions .btn-primary{min-width:140px}
@media(max-width:767px){.import-audit-summary{grid-template-columns:repeat(3,1fr);gap:6px}.import-audit-summary>div{padding:9px 7px}.import-audit-summary small{font-size:11px}.import-audit-summary strong{font-size:17px}.import-audit-toolbar{display:grid;grid-template-columns:1fr 44px;padding:9px}.import-audit-toolbar label{max-width:none;height:44px}.import-audit-toolbar select{width:44px;height:44px;font-size:0}.import-audit-table{display:none}.import-audit-mobile{display:grid;gap:8px}.import-audit-mobile article{border:1px solid #DDE5E0;border-radius:7px;padding:11px;background:#fff}.import-audit-mobile article>div{display:flex;justify-content:space-between;gap:8px}.import-audit-mobile article>div>strong{font-size:11px;min-width:0;overflow:hidden;text-overflow:ellipsis}.import-audit-mobile p,.import-audit-mobile small{display:block;font-size:11px;color:#5c796f;margin:6px 0 0}.import-audit-mobile button{display:flex;align-items:center;justify-content:flex-end;gap:4px;width:100%;min-height:38px;border:0;background:none;color:#1e7757;font:inherit;font-size:12px;margin-top:5px}.import-audit-mobile button svg{width:13px}.import-detail-modal{width:100%;height:94vh;max-height:94vh;border-radius:12px 12px 0 0}.import-detail-head{padding:14px}.import-detail-message{margin:12px 14px 9px}.import-detail-metrics{grid-template-columns:repeat(2,1fr);padding:0 14px 12px}.import-detail-section{padding:12px 14px}.import-resolution-list>div{grid-template-columns:18px 1fr}.import-resolution-list button{grid-column:2;width:100%;min-height:40px}.import-detail-note{margin:0 14px 12px}.import-detail-actions{padding:10px 14px}.import-detail-actions .btn{min-height:44px;flex:1}.import-detail-actions .btn-primary{min-width:0}}

/* Employee to attendance-device mapping queue */
.mapping-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:11px}.mapping-summary>div{border:1px solid #DDE5E0;border-radius:7px;padding:11px 13px;background:#fff}.mapping-summary small,.mapping-summary strong{display:block}.mapping-summary small{font-size:11px;color:#5B6E64}.mapping-summary strong{font-size:19px;margin-top:4px}.mapping-toolbar{display:flex;align-items:center;gap:13px;padding:10px 11px;border:1px solid #DDE5E0;border-bottom:0;border-radius:7px 7px 0 0;background:#F7FAF8}.mapping-toolbar label{display:flex;align-items:center;width:280px;height:36px;border:1px solid #cbe5db;border-radius:6px;background:#fff;padding:0 9px}.mapping-toolbar label svg{width:14px;color:#5B6E64}.mapping-toolbar input{height:34px;border:0!important;box-shadow:none!important;font-size:11px}.mapping-toolbar>span{font-size:11px;color:#5B6E64}.mapping-table{overflow-x:auto;border:1px solid #DDE5E0;border-radius:0 0 7px 7px}.mapping-table table{min-width:820px}.mapping-table th{padding:10px 11px;font-size:11px}.mapping-table td{padding:11px;font-size:11px;vertical-align:middle}.mapping-table td strong,.mapping-table td small{display:block}.mapping-table td small{font-size:11px;color:#5d736b;margin-top:3px}.mapping-suggestion{display:inline-flex;align-items:center;gap:6px;color:#16844a;background:#edf9f2;border:1px solid #bee8cf;border-radius:5px;padding:6px 8px}.mapping-suggestion svg{width:13px}.mapping-no-match{color:#a36203}.mapping-action{min-height:31px;font-size:12px}.mapping-clear{display:flex;flex-direction:column;align-items:center;padding:34px;color:#16844a}.mapping-clear svg{width:24px}.mapping-clear strong{font-size:11px;margin-top:8px}.mapping-clear span{font-size:11px;color:#5B6E64;margin-top:4px}
@media(max-width:767px){.mapping-summary{gap:6px}.mapping-summary>div{padding:9px 7px}.mapping-summary small{font-size:11px}.mapping-summary strong{font-size:17px}.mapping-toolbar{display:block}.mapping-toolbar label{width:100%;height:44px}.mapping-toolbar>span{display:block;line-height:1.45;margin-top:7px}.mapping-table{border-radius:0}.mapping-table table{min-width:720px}}

/* Attendance device alert centre */
.device-alert-trigger{position:relative}.device-alert-trigger.has-alerts{border-color:#e6b75f;background:#fff9ed;color:#945a08}.device-alert-trigger>span{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:10px;background:#c84349;color:#fff;font-size:11px}.device-view-alerts{width:100%;min-height:38px;border:0;border-top:1px solid #e1eee9;background:#F7FAF8;color:#1e7757;font:inherit;font-size:11px;font-weight:700;cursor:pointer}.device-alert.critical>svg{color:#c84349}.device-alert-modal{width:min(720px,94vw);max-height:88vh;padding:0;overflow:hidden;border-radius:10px;display:flex;flex-direction:column}.device-alert-modal-head{display:flex;align-items:flex-start;justify-content:space-between;padding:17px 19px;border-bottom:1px solid #DDE5E0}.device-alert-modal-head>div{display:flex;align-items:center;gap:10px}.device-alert-modal-head>div>span{display:grid;place-items:center;width:36px;height:36px;border-radius:7px;background:#fff4df;color:#a66305}.device-alert-modal-head svg{width:19px}.device-alert-modal-head h2{font-size:16px;margin:0}.device-alert-modal-head p{font-size:11px;color:#5B6E64;margin:4px 0 0}.device-alert-list{overflow-y:auto;padding:8px 19px 15px}.device-alert-list article{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:11px;align-items:center;padding:13px 0;border-bottom:1px solid #dfece7}.device-alert-list article>span{display:grid;place-items:center;width:34px;height:34px;border-radius:7px;background:#fff6e6;color:#a66305}.device-alert-list article.critical>span{background:#fff0f0;color:#bd3b45}.device-alert-list article.mapping>span{background:#f5f1fc;color:#7044ba}.device-alert-list article svg{width:18px}.device-alert-list strong,.device-alert-list small{display:block}.device-alert-list strong{font-size:11px}.device-alert-list p{font-size:11px;color:#4e7164;line-height:1.45;margin:4px 0}.device-alert-list small{font-size:11px;color:#62786f}.device-alert-list article>button{min-width:108px;min-height:34px;border:1px solid #52d1a2;border-radius:6px;background:#fff;color:#1e7757;font:inherit;font-size:12px;font-weight:700;cursor:pointer}.device-alert-empty{display:flex;flex-direction:column;align-items:center;padding:42px 16px;color:#17864b}.device-alert-empty svg{width:28px}.device-alert-empty strong{font-size:11px;margin-top:9px}.device-alert-empty span{font-size:11px;color:#5B6E64;margin-top:4px}.device-alert-modal-actions{display:flex;justify-content:flex-end;gap:8px;padding:12px 19px;border-top:1px solid #DDE5E0;background:#F7FAF8}.device-alert-modal-actions .btn{min-width:115px}
@media(max-width:767px){.device-heading>div:last-child{grid-template-columns:1fr 1fr}.device-heading .device-alert-trigger{grid-column:1/-1}.device-alert-modal{width:100%;height:min(90vh,760px);max-height:94vh;border-radius:12px 12px 0 0}.device-alert-modal-head{padding:14px}.device-alert-list{padding:5px 14px 12px}.device-alert-list article{grid-template-columns:34px minmax(0,1fr);padding:12px 0}.device-alert-list article>button{grid-column:2;width:100%;min-height:44px}.device-alert-modal-actions{padding:10px 14px}.device-alert-modal-actions .btn{flex:1;min-height:44px;min-width:0}}

/* Device sync schedule and diagnostics */
.device-schedule-fields{padding-bottom:16px!important}.device-diagnostics{background:#fff;border:1px solid #DDE5E0;border-radius:8px;overflow:hidden}.diagnostic-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;border-bottom:1px solid #DDE5E0}.diagnostic-head h2{font-size:14px;margin:0}.diagnostic-head p{font-size:11px;color:#5B6E64;margin:5px 0 0}.diagnostic-summary{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid #DDE5E0}.diagnostic-summary>div{padding:14px 18px;border-right:1px solid #deebe7}.diagnostic-summary>div:last-child{border-right:0}.diagnostic-summary small,.diagnostic-summary strong,.diagnostic-summary span{display:block}.diagnostic-summary small{font-size:11px;color:#5B6E64}.diagnostic-summary strong{font-size:20px;margin-top:4px}.diagnostic-summary span{font-size:11px;color:#62786f;margin-top:3px}.diagnostic-range{display:flex;align-items:end;gap:9px;padding:12px 18px;background:#F7FAF8;border-bottom:1px solid #DDE5E0}.diagnostic-range label{font-size:11px;font-weight:700}.diagnostic-range input{display:block;width:150px;height:36px;margin-top:4px;font-size:11px}.diagnostic-range>span{font-size:11px;color:#5B6E64;padding-bottom:10px}.diagnostic-device-list{padding:0 18px}.diagnostic-device-list>article{padding:15px 0;border-bottom:1px solid #deebe7}.diagnostic-device-list>article:last-child{border-bottom:0}.diagnostic-device-main{display:grid;grid-template-columns:15px minmax(0,1fr) auto;align-items:center}.diagnostic-device-main strong,.diagnostic-device-main small{display:block}.diagnostic-device-main strong{font-size:11px}.diagnostic-device-main small{font-size:11px;color:#5B6E64;margin-top:3px}.diagnostic-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:11px 0}.diagnostic-facts>div{padding:9px 10px;border:1px solid #d9e9e3;border-radius:6px;background:#f8fcfb}.diagnostic-facts small,.diagnostic-facts strong{display:block}.diagnostic-facts small{font-size:11px;color:#5B6E64}.diagnostic-facts strong{font-size:11px;margin-top:4px;word-break:break-word}.diagnostic-actions{display:flex;justify-content:flex-end;gap:7px}.diagnostic-actions .btn{min-height:32px;font-size:12px}.diagnostic-result{display:none;align-items:center;gap:8px;margin:0 0 10px;padding:9px 10px;border:1px solid;border-radius:6px;font-size:11px}.diagnostic-result.testing,.diagnostic-result.success,.diagnostic-result.error{display:flex}.diagnostic-result.testing{background:#edfbf6;border-color:#a4e8cf;color:#1c6e4e}.diagnostic-result.success{background:#eff9f3;border-color:#bee5ce;color:#187a44}.diagnostic-result.error{background:#fff1f1;border-color:#edc4c7;color:#ad353d}.diagnostic-result svg{width:17px}.diagnostic-result strong,.diagnostic-result small{display:block}.diagnostic-result small{margin-top:3px}
@media(max-width:767px){.diagnostic-head{display:block;padding:14px}.diagnostic-head .btn{width:100%;min-height:44px;margin-top:11px}.diagnostic-summary{grid-template-columns:repeat(3,1fr)}.diagnostic-summary>div{padding:11px 8px}.diagnostic-summary strong{font-size:18px}.diagnostic-range{display:grid;grid-template-columns:1fr 1fr;padding:12px 14px}.diagnostic-range input{width:100%;height:44px}.diagnostic-range>span{grid-column:1/-1;padding:0;line-height:1.4}.diagnostic-device-list{padding:0 14px}.diagnostic-facts{grid-template-columns:1fr}.diagnostic-actions{display:grid;grid-template-columns:1fr 1fr}.diagnostic-actions .btn{min-height:44px}.diagnostic-actions .btn-primary{grid-column:1/-1;grid-row:1}.device-schedule-fields{grid-template-columns:1fr 1fr!important}}

/* Attendance device activity audit */
.device-log-panel{background:#fff;border:1px solid #DDE5E0;border-radius:8px;overflow:hidden}.device-log-head{display:flex;align-items:center;justify-content:space-between;padding:15px 17px;border-bottom:1px solid #DDE5E0}.device-log-head h2{font-size:14px;margin:0}.device-log-head p{font-size:11px;color:#5B6E64;margin:5px 0 0}.device-log-summary{display:flex;gap:24px;padding:10px 17px;background:#F7FAF8;border-bottom:1px solid #DDE5E0}.device-log-summary span{font-size:11px;color:#5B6E64}.device-log-summary strong{font-size:11px;color:#133528;margin-right:4px}.device-log-toolbar{display:flex;gap:8px;padding:11px 12px;border-bottom:1px solid #DDE5E0}.device-log-toolbar label{display:flex;align-items:center;flex:1;max-width:380px;height:36px;border:1px solid #cbe5db;border-radius:6px;padding:0 9px}.device-log-toolbar label svg{width:14px;color:#5B6E64}.device-log-toolbar input{height:34px;border:0!important;box-shadow:none!important;font-size:11px}.device-log-toolbar select{width:145px;height:36px;font-size:11px}.device-log-table{overflow-x:auto}.device-log-table table{min-width:760px}.device-log-table th{font-size:11px;padding:10px 12px}.device-log-table td{font-size:11px;padding:11px 12px;vertical-align:middle}.device-log-table td strong,.device-log-table td small{display:block}.device-log-table td small{font-size:11px;color:#5d736b;margin-top:3px}.log-status{display:inline-flex;align-items:center;min-height:23px;padding:0 8px;border-radius:5px;border:1px solid;font-size:11px}.log-status.in{color:#16844a;background:#edf9f2;border-color:#bee8cf}.log-status.out{color:#1e7655;background:#e5f8f1;border-color:#a1e7cc}.log-status.neutral{color:#6e4aa4;background:#f5f1fc;border-color:#d7c9ee}.log-unmapped{color:#a36203}.device-log-cards{display:none}.device-log-empty{padding:24px;text-align:center;color:#5B6E64;font-size:11px}
@media(max-width:767px){.device-log-head{display:block;padding:14px}.device-log-head .btn{width:100%;min-height:44px;margin-top:10px}.device-log-summary{justify-content:space-between;gap:6px;padding:10px 14px}.device-log-toolbar{display:grid;grid-template-columns:1fr 1fr;padding:10px 14px}.device-log-toolbar label{grid-column:1/-1;max-width:none;height:44px}.device-log-toolbar select{width:100%;height:44px}.device-log-table{display:none}.device-log-cards{display:grid;padding:0 14px}.device-log-cards article{padding:12px 0;border-bottom:1px solid #deebe7}.device-log-cards article>div{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:9px;align-items:center}.log-direction{display:grid;place-items:center;width:34px;height:34px;border-radius:7px;background:#e5f8f1;color:#1e7655}.log-direction.in{background:#edf9f2;color:#16844a}.log-direction svg{width:17px}.device-log-cards strong,.device-log-cards small{display:block}.device-log-cards strong{font-size:11px}.device-log-cards small{font-size:11px;color:#5B6E64;margin-top:3px}.device-log-time{font-size:11px;color:#5B6E64}.device-log-cards p{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#5B6E64;margin:8px 0 0 43px}}

/* Branch connector monitoring */
.connector-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:12px 0}.connector-summary>div{display:flex;align-items:center;gap:11px;min-height:82px;padding:12px 14px;border:1px solid #DDE5E0;border-radius:7px;background:#fff}.connector-summary>div>span{display:grid;place-items:center;width:36px;height:36px;border-radius:7px}.connector-summary .blue{background:#e5f8f1;color:#1e7655}.connector-summary .green{background:#edf9f2;color:#16844a}.connector-summary .amber{background:#fff6e6;color:#a86506}.connector-summary svg{width:18px}.connector-summary small,.connector-summary strong,.connector-summary p{display:block;margin:0}.connector-summary small{font-size:11px;color:#5B6E64}.connector-summary strong{font-size:19px;margin-top:2px}.connector-summary p{font-size:11px;color:#62786f;margin-top:2px}.connector-summary .attention{border-color:#ebd1a1;background:#fffaf1}.connector-toolbar{display:flex;gap:8px;padding:10px 11px;border:1px solid #DDE5E0;border-bottom:0;border-radius:7px 7px 0 0;background:#F7FAF8}.connector-toolbar label{display:flex;align-items:center;flex:1;max-width:360px;height:36px;border:1px solid #cbe5db;border-radius:6px;background:#fff;padding:0 9px}.connector-toolbar label svg{width:14px;color:#5B6E64}.connector-toolbar input{height:34px;border:0!important;box-shadow:none!important;font-size:11px}.connector-toolbar select{width:155px;height:36px;font-size:11px}.connector-table{overflow-x:auto;border:1px solid #DDE5E0;border-radius:0 0 7px 7px}.connector-table table{min-width:900px}.connector-table th{font-size:11px;padding:10px 11px}.connector-table td{font-size:11px;padding:11px;vertical-align:middle}.connector-table td strong,.connector-table td small{display:block}.connector-table td small{font-size:11px;color:#5d736b;margin-top:3px}.connector-health{display:inline-flex;min-height:23px;align-items:center;padding:0 8px;border-radius:5px;border:1px solid;font-size:11px;white-space:nowrap}.connector-health.badge-success{color:#16844a;background:#edf9f2;border-color:#bee8cf}.connector-health.badge-accent{color:#1e7655;background:#e5f8f1;border-color:#a1e7cc}.connector-health.badge-warn{color:#a36203;background:#fff7e9;border-color:#efd18b}.connector-health.badge-danger{color:#bd3b45;background:#fff0f0;border-color:#efc5c8}.connector-action-copy{font-size:12px;color:#4e7164}.connector-action-copy.attention{color:#9d6208}.connector-action-copy.inactive{color:#a23a42}.connector-row-action{min-height:29px;font-size:12px;color:#a23a42}.connector-cards{display:none}.connector-filter-empty{padding:24px;text-align:center;color:#5B6E64;font-size:11px}
@media(max-width:767px){.connector-summary{grid-template-columns:repeat(3,1fr);gap:6px}.connector-summary>div{display:block;min-height:94px;padding:9px}.connector-summary>div>span{width:30px;height:30px;margin-bottom:6px}.connector-summary strong{font-size:17px}.connector-summary p{display:none}.connector-toolbar{display:grid;grid-template-columns:1fr 1fr;padding:9px}.connector-toolbar label{grid-column:1/-1;max-width:none;height:44px}.connector-toolbar select{width:100%;height:44px}.connector-toolbar .btn{height:44px}.connector-table{display:none}.connector-cards{display:grid;gap:8px;margin-top:10px}.connector-card{padding:12px;border:1px solid #DDE5E0;border-radius:7px;background:#fff}.connector-card-head{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:8px;align-items:center}.connector-status-dot{width:8px;height:8px;border-radius:50%;background:#e39a22}.connector-status-dot.badge-success,.connector-status-dot.badge-accent{background:#15854b}.connector-status-dot.badge-danger{background:#c0474d}.connector-card-head strong,.connector-card-head small{display:block}.connector-card-head strong{font-size:11px}.connector-card-head small{font-size:11px;color:#5B6E64;margin-top:3px}.connector-heartbeat{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:11px 0}.connector-heartbeat>div{padding:8px;border:1px solid #ddebe6;border-radius:6px}.connector-heartbeat small,.connector-heartbeat strong{display:block}.connector-heartbeat small{font-size:11px;color:#5B6E64}.connector-heartbeat strong{font-size:11px;margin-top:3px}.connector-guidance{display:flex;gap:7px;align-items:center;padding:8px;border-radius:6px;background:#fff8ea;color:#916009;font-size:11px}.connector-guidance.badge-success,.connector-guidance.badge-accent{background:#eff9f3;color:#187a44}.connector-guidance svg{width:15px}.connector-disable{width:100%;min-height:44px;margin-top:9px;border:1px solid #e0b9bc;border-radius:6px;background:#fff;color:#a23a42;font:inherit;font-size:11px}.connector-inactive{display:block;margin-top:9px;color:#a23a42;font-size:11px}}

/* Biometric enrollment readiness */
.biometric-enrollment-modal{width:min(980px,94vw);max-height:90vh;padding:0;overflow:hidden;display:flex;flex-direction:column}.biometric-enrollment-modal>.modal-title{padding:16px 18px;margin:0;border-bottom:1px solid #DDE5E0}.biometric-enrollment-modal>.modal-title>div span,.biometric-enrollment-modal>.modal-title>div small{display:block}.biometric-enrollment-modal>.modal-title>div span{font-size:15px}.biometric-enrollment-modal>.modal-title>div small{font-size:11px;color:#5B6E64;margin-top:4px;font-weight:400}.biometric-enrollment-modal #hik-enrollment-body{overflow-y:auto}.enrollment-summary{display:grid;grid-template-columns:repeat(3,1fr) 1.4fr;gap:8px;padding:14px 18px}.enrollment-summary>div:not(.enrollment-progress){display:flex;align-items:center;gap:9px;padding:10px;border:1px solid #DDE5E0;border-radius:7px}.enrollment-summary>div>span{display:grid;place-items:center;width:32px;height:32px;border-radius:6px}.enrollment-summary .blue{background:#e5f8f1;color:#1e7655}.enrollment-summary .amber{background:#fff6e6;color:#a86506}.enrollment-summary .green{background:#edf9f2;color:#16844a}.enrollment-summary svg{width:16px}.enrollment-summary small,.enrollment-summary strong{display:block}.enrollment-summary small{font-size:11px;color:#5B6E64}.enrollment-summary strong{font-size:17px;margin-top:2px}.enrollment-summary .attention{border-color:#ead09f;background:#fffaf1}.enrollment-progress{display:flex;flex-direction:column;justify-content:center;padding:10px 12px;border:1px solid #DDE5E0;border-radius:7px}.enrollment-progress>div{display:flex;justify-content:space-between}.enrollment-progress>span{display:block;width:100%;height:6px;margin-top:8px;border-radius:4px;background:#e0ede8;overflow:hidden}.enrollment-progress>span i{display:block;height:100%;background:#15854b}.enrollment-note{display:flex;gap:8px;align-items:center;margin:0 18px 12px;padding:9px 10px;border-radius:6px;background:#edfbf6;color:#457261;font-size:11px}.enrollment-note svg{width:16px;flex:none}.enrollment-toolbar{display:flex;align-items:center;gap:8px;padding:10px 18px;border-top:1px solid #dceae5;border-bottom:1px solid #dceae5;background:#F7FAF8}.enrollment-toolbar label{display:flex;align-items:center;flex:1;max-width:360px;height:36px;padding:0 9px;border:1px solid #cbe5db;border-radius:6px;background:#fff}.enrollment-toolbar label svg{width:14px;color:#5B6E64}.enrollment-toolbar input{height:34px;border:0!important;box-shadow:none!important;font-size:11px}.enrollment-toolbar select{width:155px;height:36px;font-size:11px}.enrollment-toolbar>span{margin-left:auto;font-size:11px;color:#5B6E64}.enrollment-table{max-height:480px;overflow:auto}.enrollment-table table{min-width:780px}.enrollment-table th{font-size:11px;padding:10px 12px}.enrollment-table td{font-size:11px;padding:11px 12px;vertical-align:middle}.enrollment-person{display:flex;align-items:center;gap:8px}.enrollment-person>span,.enrollment-avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#def7ed;color:#1e7655;font-size:11px;font-weight:750}.enrollment-person strong,.enrollment-person small{display:block}.enrollment-person small{font-size:11px;color:#5d736b;margin-top:2px}.enrollment-status{display:inline-flex;align-items:center;gap:5px;min-height:23px;padding:0 8px;border:1px solid;border-radius:5px;font-size:11px;white-space:nowrap}.enrollment-status i{width:6px;height:6px;border-radius:50%}.enrollment-status.pending{color:#a36203;background:#fff7e9;border-color:#efd18b}.enrollment-status.pending i{background:#e39a22}.enrollment-status.ready{color:#16844a;background:#edf9f2;border-color:#bee8cf}.enrollment-status.ready i{background:#15854b}.enrollment-mark{min-height:30px;font-size:11px;color:#1e7655}.enrollment-complete{font-size:11px;color:#16844a}.enrollment-cards{display:none}
@media(max-width:767px){.biometric-enrollment-modal{width:100%;height:94vh;max-height:94vh;border-radius:12px 12px 0 0}.biometric-enrollment-modal>.modal-title{padding:14px}.enrollment-summary{grid-template-columns:repeat(3,1fr);gap:6px;padding:10px 14px}.enrollment-summary>div:not(.enrollment-progress){display:block;padding:8px}.enrollment-summary>div>span{width:28px;height:28px;margin-bottom:5px}.enrollment-summary strong{font-size:16px}.enrollment-progress{grid-column:1/-1}.enrollment-note{margin:0 14px 10px;line-height:1.4}.enrollment-toolbar{display:grid;grid-template-columns:1fr auto;padding:9px 14px}.enrollment-toolbar label{grid-column:1/-1;max-width:none;height:44px}.enrollment-toolbar select{width:150px;height:44px}.enrollment-toolbar>span{margin:0}.enrollment-table{display:none}.enrollment-cards{display:grid;padding:0 14px}.enrollment-card{padding:12px 0;border-bottom:1px solid #deebe7}.enrollment-card>div{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:8px;align-items:center}.enrollment-avatar{width:34px;height:34px}.enrollment-card strong,.enrollment-card small{display:block}.enrollment-card strong{font-size:11px}.enrollment-card small{font-size:11px;color:#5B6E64;margin-top:3px}.enrollment-card p{font-size:11px;color:#5B6E64;margin:8px 0}.enrollment-card button{width:100%;min-height:44px;border:1px solid #52d1a2;border-radius:6px;background:#fff;color:#1e7655;font:inherit;font-size:12px}.enrollment-mobile-complete{display:flex;align-items:center;gap:6px;padding:9px;border-radius:6px;background:#eff9f3;color:#16844a;font-size:11px}.enrollment-mobile-complete svg{width:15px}}

/* Attendance payroll readiness */
.attendance-readiness{display:grid;gap:12px}.readiness-hero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:17px 19px;border:1px solid;border-radius:8px}.readiness-hero.ready{background:#f0f9f4;border-color:#bde4cc}.readiness-hero.attention{background:#fff9ee;border-color:#ead09b}.readiness-score{display:grid;place-items:center;width:78px;height:78px;border:7px solid #e4b45c;border-radius:50%;background:#fff}.readiness-hero.ready .readiness-score{border-color:#307e56}.readiness-score strong,.readiness-score span{display:block;text-align:center}.readiness-score strong{font-size:18px}.readiness-score span{font-size:11px;color:#5B6E64}.readiness-hero h2{font-size:15px;margin:0}.readiness-hero p{font-size:11px;color:#556e63;margin:5px 0 0}.readiness-check-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.readiness-check-grid article{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:11px;align-items:center;padding:13px 14px;border:1px solid #DDE5E0;border-radius:7px;background:#fff}.readiness-check-grid article>span{display:grid;place-items:center;width:36px;height:36px;border-radius:7px}.readiness-check-grid article.passed>span{background:#edf9f2;color:#16844a}.readiness-check-grid article.blocked{border-color:#ead09b;background:#fffaf2}.readiness-check-grid article.blocked>span{background:#fff1d9;color:#a86506}.readiness-check-grid svg{width:18px}.readiness-check-grid small,.readiness-check-grid strong,.readiness-check-grid p{display:block}.readiness-check-grid small{font-size:11px;color:#5d736b}.readiness-check-grid strong{font-size:11px;margin-top:2px}.readiness-check-grid p{font-size:11px;color:#5B6E64;margin:4px 0 0}.readiness-check-grid button{min-height:32px;border:1px solid #52d1a2;border-radius:6px;background:#fff;color:#1e7655;font:inherit;font-size:12px;padding:0 10px}.readiness-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;border:1px solid #DDE5E0;border-radius:7px;background:#fff}.readiness-footer>div{display:flex;align-items:center;gap:9px}.readiness-footer svg{width:18px;color:#1e7655}.readiness-footer strong,.readiness-footer small{display:block}.readiness-footer strong{font-size:11px}.readiness-footer small{font-size:11px;color:#5B6E64;margin-top:3px}
@media(max-width:767px){.readiness-hero{grid-template-columns:64px 1fr;padding:13px}.readiness-score{width:62px;height:62px;border-width:5px}.readiness-score strong{font-size:15px}.readiness-hero h2{font-size:12px;line-height:1.3}.readiness-hero p{font-size:11px;line-height:1.4}.readiness-hero>.btn{grid-column:1/-1;width:100%;min-height:44px}.readiness-check-grid{grid-template-columns:1fr}.readiness-check-grid article{grid-template-columns:36px minmax(0,1fr);padding:12px}.readiness-check-grid article>button{grid-column:2;width:100%;min-height:44px}.readiness-footer{display:block;padding:12px}.readiness-footer .btn{width:100%;min-height:44px;margin-top:10px}.readiness-footer small{line-height:1.4}}
.notification-centre-modal{width:min(760px,94vw);max-height:86vh;padding:0;display:flex;flex-direction:column}.notification-centre-modal .modal-title{display:flex;align-items:center;justify-content:space-between}.notification-centre-toolbar{display:flex;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);background:#F7FAF8}.notification-centre-toolbar input{flex:1}.notification-centre-toolbar select{width:150px}.notification-centre-list{overflow:auto;padding:4px 16px 14px}.notification-centre-row{display:flex;gap:10px;align-items:flex-start;padding:12px 0;border-bottom:1px solid #e9f3ef}.notification-centre-row.unread{background:#F3F8F5;margin:0 -8px;padding-left:8px;padding-right:8px}.notification-centre-copy{min-width:0;flex:1}.notification-centre-copy strong,.notification-centre-copy p,.notification-centre-copy small{display:block}.notification-centre-copy strong{font-size:12px;color:#183a2d}.notification-centre-copy p{margin:3px 0;color:#486b5e;font-size:11px;line-height:1.45}.notification-centre-copy small{color:#5B6E64;font-size:11px}.notification-centre-actions{display:flex;gap:5px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.notification-centre-actions .btn{font-size:12px;padding:6px 8px}@media(max-width:600px){.notification-centre-toolbar{flex-direction:column}.notification-centre-toolbar select{width:100%}.notification-centre-row{flex-wrap:wrap}.notification-centre-actions{width:100%;justify-content:flex-start}}
.notification-preferences-modal{width:min(860px,94vw);max-height:86vh;padding:0;overflow:auto}.notification-preferences-list{padding:10px 16px}.notification-preference-row{display:grid;grid-template-columns:minmax(180px,1fr) auto auto minmax(150px,220px) auto;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid #e9f3ef}.notification-preference-row strong,.notification-preference-row small{display:block}.notification-preference-row strong{font-size:12px;color:#183a2d}.notification-preference-row small{margin-top:3px;font-size:11px;color:#5B6E64}.notification-preference-row label{font-size:11px;color:#52655D;white-space:nowrap}.notification-preference-row input[type=checkbox]{accent-color:#0B6B57}@media(max-width:680px){.notification-preference-row{grid-template-columns:1fr 1fr;gap:8px}.notification-preference-row>div{grid-column:1/-1}.notification-preference-row [data-pref-roles]{grid-column:1/-1;width:100%}}

/* Salary Run task tabs */
.payroll-module-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px;padding:5px;border:1px solid #DDE5E0;border-radius:8px;background:#F7FAF8}
.payroll-module-tab{display:flex;align-items:center;gap:8px;min-height:38px;padding:0 13px;border:1px solid transparent;border-radius:6px;background:transparent;color:#52655D;font:inherit;font-size:12px;font-weight:650;cursor:pointer;white-space:nowrap}
.payroll-module-tab span{display:grid;place-items:center;width:22px;height:22px;border-radius:5px;background:#def2eb;color:#55655e;font-size:12px;font-weight:750}
.payroll-module-tab:hover{background:#e5f8f1;color:#1e7655}.payroll-module-tab.active{background:#0B6B57;color:#fff;box-shadow:0 2px 7px rgba(32,126,91,.2)}.payroll-module-tab.active span{background:rgba(255,255,255,.18);color:#fff}
/* Payroll run navigation: a calm, connected stepper with equal hit areas. */
.payroll-module-tabs{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;align-items:stretch;margin:0 0 18px;padding:8px;border:1px solid #cce8de;border-radius:10px;background:#fff;box-shadow:0 1px 2px rgba(11,44,33,.04)}
.payroll-module-tabs:before{content:"";position:absolute;left:9%;right:9%;top:50%;height:1px;background:#cce8de;z-index:0}
.payroll-module-tab{position:relative;z-index:1;justify-content:center;min-width:0;min-height:42px;padding:0 10px;border:1px solid transparent;border-radius:7px;background:#fff;color:#52655D;font-size:12px;font-weight:650;transition:background .15s ease,border-color .15s ease,color .15s ease}
.payroll-module-tab span{flex:0 0 auto;width:24px;height:24px;border:1px solid #D7E0DA;border-radius:7px;background:#edf7f3;color:#557a6c;font-size:12px}
.payroll-module-tab:hover{background:#f1fbf7;border-color:#a4e8cf;color:#1a6a4b}
.payroll-module-tab.active{background:#E2F0EB;border-color:#3fcf99;color:#1b6b4d;box-shadow:none}
.payroll-module-tab.active span{background:#0B6B57;border-color:#0B6B57;color:#fff}
.payroll-section[hidden]{display:none!important}
@media(max-width:767px){.payroll-module-tabs{display:flex;justify-content:flex-start;gap:4px;overflow-x:auto;scroll-snap-type:x proximity;padding:6px;margin-bottom:12px}.payroll-module-tabs:before{display:none}.payroll-module-tab{flex:0 0 auto;justify-content:flex-start;min-height:44px;padding:0 10px;font-size:12px;scroll-snap-align:start}.payroll-module-tab span{width:22px;height:22px;font-size:12px}.payroll-workspace .payroll-review-bar{display:grid;grid-template-columns:1fr 1fr;gap:7px}.payroll-workspace .payroll-review-bar input,.payroll-workspace .payroll-review-bar select{grid-column:1/-1;max-width:none!important;width:100%;min-height:44px}.payroll-workspace .payroll-review-bar .btn{min-height:44px}}

/* Employee portal task tabs */
.employee-home-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px;padding:5px;border:1px solid #DDE5E0;border-radius:8px;background:#F7FAF8}.employee-home-tab{display:flex;align-items:center;gap:8px;min-height:38px;padding:0 13px;border:1px solid transparent;border-radius:6px;background:transparent;color:#52655D;font:inherit;font-size:12px;font-weight:650;cursor:pointer}.employee-home-tab span{display:grid;place-items:center;width:22px;height:22px;border-radius:5px;background:#def2eb;color:#55655e;font-size:12px;font-weight:750}.employee-home-tab:hover{background:#e5f8f1;color:#1e7655}.employee-home-tab.active{background:#0B6B57;color:#fff;box-shadow:0 2px 7px rgba(32,126,91,.2)}.employee-home-tab.active span{background:rgba(255,255,255,.18);color:#fff}.employee-section[hidden],[data-employee-section][hidden]{display:none!important}
@media(max-width:767px){.employee-home-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:10px}.employee-home-tab{min-height:44px;padding:0 9px;font-size:12px}.employee-home-tab:last-child{grid-column:1/-1}.employee-home-tab span{width:20px;height:20px;font-size:12px}}
.leave-module-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px;padding:5px;border:1px solid #DDE5E0;border-radius:8px;background:#F7FAF8}.leave-module-tab{display:flex;align-items:center;gap:8px;min-height:38px;padding:0 13px;border:1px solid transparent;border-radius:6px;background:transparent;color:#52655D;font:inherit;font-size:12px;font-weight:650;cursor:pointer}.leave-module-tab span{display:grid;place-items:center;width:22px;height:22px;border-radius:5px;background:#def2eb;color:#55655e;font-size:12px;font-weight:750}.leave-module-tab.active{background:#0B6B57;color:#fff;box-shadow:0 2px 7px rgba(32,126,91,.2)}.leave-module-tab.active span{background:rgba(255,255,255,.18);color:#fff}[data-leave-section][hidden]{display:none!important}@media(max-width:767px){.leave-module-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px}.leave-module-tab{min-height:44px;padding:0 9px;font-size:12px}.leave-module-tab span{width:20px;height:20px;font-size:12px}}
.loan-module-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px;padding:5px;border:1px solid #DDE5E0;border-radius:8px;background:#F7FAF8}.loan-module-tab{display:flex;align-items:center;gap:8px;min-height:38px;padding:0 13px;border:1px solid transparent;border-radius:6px;background:transparent;color:#52655D;font:inherit;font-size:12px;font-weight:650;cursor:pointer}.loan-module-tab span{display:grid;place-items:center;width:22px;height:22px;border-radius:5px;background:#def2eb;color:#55655e;font-size:12px;font-weight:750}.loan-module-tab:hover{background:#e5f8f1;color:#1e7655}.loan-module-tab.active{background:#0B6B57;color:#fff;box-shadow:0 2px 7px rgba(32,126,91,.2)}.loan-module-tab.active span{background:rgba(255,255,255,.18);color:#fff}[data-loan-section][hidden]{display:none!important}@media(max-width:767px){.loan-module-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px}.loan-module-tab{min-height:44px;padding:0 9px;font-size:12px}.loan-module-tab span{width:20px;height:20px;font-size:12px}}
.report-module-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px;padding:5px;border:1px solid #DDE5E0;border-radius:8px;background:#F7FAF8}.report-module-tab{display:flex;align-items:center;gap:8px;min-height:38px;padding:0 13px;border:1px solid transparent;border-radius:6px;background:transparent;color:#52655D;font:inherit;font-size:12px;font-weight:650;cursor:pointer}.report-module-tab span{display:grid;place-items:center;width:22px;height:22px;border-radius:5px;background:#def2eb;color:#55655e;font-size:12px;font-weight:750}.report-module-tab:hover{background:#e5f8f1;color:#1e7655}.report-module-tab.active{background:#0B6B57;color:#fff;box-shadow:0 2px 7px rgba(32,126,91,.2)}.report-module-tab.active span{background:rgba(255,255,255,.18);color:#fff}[data-report-section][hidden]{display:none!important}@media(max-width:767px){.report-module-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px}.report-module-tab{min-height:44px;padding:0 9px;font-size:12px}.report-module-tab span{width:20px;height:20px;font-size:12px}}
.report-module-tabs + .card,#report-results>.card,.report-module-tabs ~ .card{border:1px solid #d2ece2;border-radius:10px;box-shadow:0 5px 18px rgba(13,54,39,.05);overflow:hidden}
.report-module-tabs + .card .card-title,#report-results>.card .card-title,.report-module-tabs ~ .card .card-title{display:flex;align-items:center;justify-content:space-between;min-height:48px;margin:0;padding:13px 16px;border-bottom:1px solid #e1f1ea;color:#0f3427;font-size:14px}
.report-module-tabs + .card .form-grid,.report-module-tabs ~ .card .form-grid{padding:14px 16px 0;gap:11px 13px}
.report-module-tabs + .card>.btn,.report-module-tabs ~ .card>.btn{margin-left:16px;margin-bottom:15px}
#report-results>.card .stats{padding:14px 16px 0;margin:0 0 12px}
#report-results>.card>div:last-child{border-top:1px solid #e9f3ef}
#report-results table,#leave-balance-results table{min-width:760px}
@media(max-width:767px){
  .report-module-tabs + .card .form-grid,.report-module-tabs ~ .card .form-grid{padding:12px 12px 0;gap:9px}
  .report-module-tabs + .card .form-group input,.report-module-tabs + .card .form-group select,.report-module-tabs ~ .card .form-group input,.report-module-tabs ~ .card .form-group select{min-height:44px}
  #report-results>.card .stats{padding:10px 12px 0}
  .report-module-tabs + .card>.btn,.report-module-tabs ~ .card>.btn{margin-left:12px}
}

/* Shared payslip document: browser Ctrl+P uses the same A4 structure as Print. */
.print-payslip{background:#fff;border:1px solid #c8e8dd;border-radius:12px;padding:22px 24px;max-width:860px;margin:0 auto;color:#252525;font-family:Arial,Helvetica,sans-serif;font-size:11px;line-height:1.32;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.payslip-brand-head{display:grid;grid-template-columns:42% 58%;align-items:start;min-height:126px}.payslip-group-logo,.payslip-group-fallback{width:148px;height:92px;display:flex;align-items:center;justify-content:center;overflow:hidden}.payslip-group-fallback{background:#e7f5f0;color:#154434;font-size:12px;font-weight:700;text-align:center;padding:8px}.payslip-group-fallback.has-logo{background:#fff;padding:0}.payslip-group-logo img,.payslip-brand-image{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}.payslip-identity{text-align:right;color:#333;line-height:1.3}.payslip-company-name{font-weight:700;color:#154434;font-size:18px;margin-top:2px}.payslip-rule{height:3px;background:#164636;margin:0 0 10px}.payslip-title{text-align:center;color:#154434;font-size:20px;font-weight:700;margin:0 0 10px}.payslip-employee-grid{display:grid;grid-template-columns:15% 18.333% 15% 18.333% 15% 18.334%;border:1px solid #9cd2c0;margin-bottom:10px}.payslip-employee-grid>div{min-height:30px;padding:6px 7px;border-right:1px solid #9cd2c0;border-bottom:1px solid #9cd2c0;min-width:0}.payslip-employee-grid>div:nth-child(6n){border-right:0}.payslip-employee-grid>div:nth-last-child(-n+6){border-bottom:0}.payslip-employee-grid .label{font-weight:700;color:#154434;background:#f1faf7}.payslip-tables{display:grid;grid-template-columns:1fr 1fr;gap:10px}.payslip-panel-title{background:#164636;color:#fff;font-size:14px;font-weight:700;padding:7px 9px}.payslip-data-table{width:100%;border-collapse:collapse}.payslip-data-table th,.payslip-data-table td{border:1px solid #a4d4c3;padding:6px 7px}.payslip-data-table th{background:#c7ebdf;color:#154434;text-align:left}.payslip-data-table th:nth-child(2),.payslip-data-table td:nth-child(2){text-align:center}.payslip-data-table th:last-child,.payslip-data-table td:last-child{text-align:right}.payslip-data-table .total-row{background:#c7ebdf;color:#154434;font-weight:700}.payslip-amt{white-space:nowrap}.payslip-net{display:flex;justify-content:space-between;align-items:center;background:#164636;color:#fff;font-size:18px;font-weight:700;padding:9px 12px;margin-top:10px}.payslip-note{margin-top:10px;line-height:1.35;color:#444;font-size:11px}.payslip-signature{margin:26px 0 0 auto;width:200px;text-align:center;color:#154434;font-size:11px}.payslip-signature .line{border-top:1px solid #6b6b6b;margin-bottom:6px}.payslip-foot{text-align:center;color:#6b6b6b;border-top:1px solid #cbe5dc;margin-top:24px;padding-top:8px;font-size:11px}.payslip-system-foot{margin-top:6px}
@media(max-width:800px){.print-payslip{padding:16px;border-radius:8px}.payslip-brand-head{min-height:150px}.payslip-employee-grid{grid-template-columns:22% 28% 22% 28%}.payslip-employee-grid>div{border-right:1px solid #9cd2c0}.payslip-tables{grid-template-columns:1fr}.payslip-net{font-size:18px}}
@media print{ @page{size:A4;margin:0} html,body{width:210mm!important;height:297mm!important;overflow:hidden!important;background:#fff!important} body *{visibility:hidden!important} #ps-content,#ps-content *,#mp-content,#mp-content *{visibility:visible!important} #ps-content,#mp-content{position:absolute!important;inset:0!important;width:210mm!important;height:297mm!important;margin:0!important;padding:0!important;overflow:hidden!important}.print-payslip{display:block!important;width:210mm!important;height:297mm!important;min-height:0!important;max-height:297mm!important;margin:0 auto!important;padding:8mm 9mm 6mm!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:hidden!important;font-size:11px!important;line-height:1.25!important;break-after:avoid!important;page-break-after:avoid!important}.print-payslip .payslip-brand-head{display:grid!important;grid-template-columns:42% 58%!important;min-height:27mm!important}.print-payslip .payslip-group-logo,.print-payslip .payslip-group-fallback{width:40mm!important;height:22mm!important}.print-payslip .payslip-company-name{font-size:15px!important}.print-payslip .payslip-rule{height:.9mm!important;margin:0 0 2.5mm!important}.print-payslip .payslip-title{font-size:16px!important;margin:0 0 2.5mm!important}.print-payslip .payslip-employee-grid{margin-bottom:2.5mm!important}.print-payslip .payslip-employee-grid>div{min-height:5.2mm!important;padding:1.1mm 1.4mm!important}.print-payslip .payslip-tables{display:grid!important;grid-template-columns:1fr 1fr!important;gap:2.5mm!important}.print-payslip .payslip-panel-title{font-size:12px!important;padding:1.6mm 2mm!important}.print-payslip .payslip-data-table th,.print-payslip .payslip-data-table td{padding:1.15mm 1.4mm!important}.print-payslip .payslip-net{background:#164636!important;color:#fff!important;font-size:14px!important;padding:2mm 3mm!important;margin-top:2.5mm!important}.print-payslip .payslip-note{font-size:11px!important;margin-top:2.5mm!important;line-height:1.28!important}.print-payslip .payslip-signature{font-size:11px!important;margin-top:5mm!important;width:48mm!important}.print-payslip .payslip-foot{font-size:11px!important;margin-top:4mm!important;padding-top:1.5mm!important}.print-payslip .payslip-system-foot{margin-top:1.5mm!important}.print-payslip details,.print-payslip button{display:none!important}}
.branding-modal{width:min(720px,94vw)}.branding-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0}.branding-card{display:grid;gap:8px;padding:14px;border:1px solid #DDE5E0;border-radius:8px;color:#183a2d;font-size:12px;font-weight:650}.branding-preview{display:grid;place-items:center;height:130px;border:1px dashed #9cd2c0;border-radius:7px;background:#F7FAF8;overflow:hidden}.branding-preview img{max-width:90%;max-height:110px;object-fit:contain}.branding-empty{color:#5B6E64;font-weight:400}.payslip-branding-section{margin-top:14px}@media(max-width:600px){.branding-grid{grid-template-columns:1fr}.branding-modal{width:96vw}.branding-preview{height:110px}}
.payslip-brand-image{max-width:100%;max-height:100%;object-fit:contain}.payslip-main-image{display:block;max-width:150px;max-height:70px;object-fit:contain;margin:0 0 4px auto}

/* Approval workflow: keep the stage summary and controls readable on desktop. */
@media (min-width: 1351px){
  .approval-stage-summary{width:190px;grid-template-columns:22px 25px minmax(0,1fr);}
  .approval-stage-fields{grid-template-columns:repeat(4,minmax(0,1fr));padding:16px 14px 16px 250px;gap:14px;align-items:start;}
  .approval-stage-fields label{min-width:0;}
  .approval-stage-fields label:nth-child(5){grid-column:1;}
  .approval-stage-fields label:nth-child(6){grid-column:2;}
  .approval-stage-fields .approval-remove{grid-column:4;grid-row:2;margin-top:22px;justify-self:end;}
}
@media (min-width: 1200px) and (max-width: 1350px){
  .approval-stage-summary{width:170px;grid-template-columns:22px 25px minmax(0,1fr);}
  .approval-stage-fields{grid-template-columns:repeat(4,minmax(0,1fr));padding:16px 12px 16px 205px;gap:10px;align-items:start;}
  .approval-stage-fields label{min-width:0;}
  .approval-stage-fields label:nth-child(5){grid-column:1;}
  .approval-stage-fields label:nth-child(6){grid-column:2;}
  .approval-stage-fields .approval-remove{grid-column:4;grid-row:2;margin-top:22px;justify-self:end;}
}
/* Branch-wise manual attendance */
.bulk-attendance-modal{max-width:760px}
.bulk-attendance-help{margin:-4px 0 18px;color:#52655D;line-height:1.5}
.bulk-attendance-note{min-height:18px;margin:-4px 0 12px;color:#52655D;font-size:12px}
.bulk-attendance-preview{padding:12px 14px;margin:4px 0 14px;border:1px solid #c9eadd;border-radius:8px;background:#F3F8F5;color:#23413A}
.bulk-attendance-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:16px}
.required{color:#c94a52}
@media(max-width:700px){.bulk-attendance-modal{width:calc(100vw - 24px);max-height:calc(100vh - 24px);overflow:auto}.bulk-attendance-actions .btn{flex:1;min-width:140px}}
/* Payslip branding and single-page print preview refinements */
.payslip-group-logo,.payslip-group-fallback{width:150px;height:120px;overflow:hidden}
.payslip-group-logo img{transform:scale(1.16)}
.payslip-main-image{max-width:180px;max-height:82px}
/* Payroll control workspaces: split audit/EFT/BURS/payslip/accounting modules into focused pages. */
.payroll-control-page {
  display: grid;
  gap: 16px;
  max-width: 100%;
}

.payroll-control-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 2px;
}

.payroll-control-hero .page-subtitle {
  margin-top: 6px;
  max-width: 760px;
}

.payroll-control-nav {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  padding: 10px;
  background: #fff;
  border: 1px solid #ceeae0;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(10,40,31, 0.04);
}

.payroll-control-tab {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid #ceeae0;
  border-radius: 10px;
  background: #F3F8F5;
  color: #103e2d;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.payroll-control-tab .shell-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.payroll-control-tab:hover {
  background: #e7f9f3;
  border-color: #6bdab1;
}

.payroll-control-tab:focus-visible {
  outline: 3px solid rgba(33,130,97, 0.28);
  outline-offset: 2px;
}

.payroll-control-tab.active {
  background: #1f7d5b;
  color: #fff;
  border-color: #1f7d5b;
  box-shadow: 0 8px 18px rgba(31,125,91, 0.22);
}

.payroll-control-selector {
  padding: 16px 18px;
}

.payroll-control-selector-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.payroll-control-field {
  display: grid;
  gap: 6px;
  flex: 1;
  min-width: 280px;
}

.payroll-control-field label {
  font-weight: 800;
  color: #0b2c20;
}

.payroll-control-field select {
  width: 100%;
  min-height: 44px;
}

.payroll-control-field small,
.payroll-control-help {
  font-size: 12px;
  color: #5a7a6f;
  line-height: 1.4;
}

.payroll-control-help {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid #d6eee5;
  border-radius: 10px;
  background: #f5fbf8;
}

.payroll-control-help .shell-icon {
  width: 16px;
  height: 16px;
  color: #1f7d5b;
  flex: 0 0 auto;
}

.payroll-control-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.payroll-run-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 12px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #ceeae0;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(10,40,31, 0.04);
}

.payroll-run-summary-main {
  display: grid;
  gap: 3px;
}

.payroll-run-summary-main strong {
  font-size: 17px;
  color: #0b2c20;
}

.payroll-run-summary-main small {
  font-size: 12px;
  color: #5b7d71;
}

.payroll-run-kicker {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  font-weight: 800;
  color: #1f7d5b;
}

@media (max-width: 1180px) {
  .payroll-control-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .payroll-control-hero,
  .payroll-control-selector-row,
  .payroll-run-summary {
    align-items: stretch;
    flex-direction: column;
  }

  .payroll-control-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .payroll-control-tab {
    justify-content: flex-start;
  }

  .payroll-control-actions {
    justify-content: stretch;
  }

  .payroll-control-actions .btn,
  .payroll-run-summary .btn {
    width: 100%;
    min-height: 44px;
  }

  .payroll-control-field {
    min-width: 0;
  }
}

@media (max-width: 460px) {
  .payroll-control-nav {
    grid-template-columns: 1fr;
  }
}

/* Approval workflow form polish: stable enterprise layout for stage configuration */
.approval-workspace {
  align-items: start;
}

#approval-workflow-detail,
.approval-detail-head,
.approval-stage-panel,
.approval-stage,
.approval-stage-fields {
  min-width: 0;
}

#approval-workflow-detail {
  overflow: hidden;
}

.approval-stage-panel {
  padding: 18px;
}

.approval-stage {
  display: grid !important;
  grid-template-columns: 178px minmax(0, 1fr) !important;
  overflow: hidden;
  border: 1px solid #ceeae0 !important;
  border-radius: 14px !important;
  background: #fff;
  box-shadow: 0 8px 20px rgba(11,44,32, 0.04);
}

.approval-stage::before {
  display: none !important;
}

.approval-stage-summary {
  position: static !important;
  width: auto !important;
  min-height: 100% !important;
  display: grid !important;
  grid-template-columns: 22px 34px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-content: start !important;
  align-items: center !important;
  padding: 18px 16px !important;
  border: 0 !important;
  border-right: 1px solid #d6eee5 !important;
  background: linear-gradient(180deg, #F3F8F5 0%, #F3F8F5 100%) !important;
  color: #0b2c20 !important;
  text-align: left !important;
}

.approval-stage-summary > i {
  display: none !important;
}

.approval-stage-summary > .approval-drag {
  color: #5d7a6f !important;
  font-size: 17px !important;
  letter-spacing: -4px;
}

.approval-stage-summary > b {
  width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;
  background: #1f7d5b !important;
  color: #fff !important;
  display: grid !important;
  place-items: center !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.approval-stage-summary strong {
  display: block;
  overflow: hidden;
  color: #0b2c20;
  font-size: 13px !important;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.approval-stage-summary small {
  display: block;
  margin-top: 4px !important;
  overflow: hidden;
  color: #5a7a6f !important;
  font-size: 11px !important;
  font-weight: 600;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.approval-stage-fields {
  display: grid !important;
  /* Four equal controls in the first row keep Approval rule from collapsing. */
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: start !important;
  padding: 18px !important;
}

.approval-stage-fields label,
.approval-stage-fields label:first-child {
  grid-column: auto !important;
}

.approval-stage-fields label {
  display: flex !important;
  min-width: 0;
  flex-direction: column;
  gap: 7px;
  color: #35594c;
  font-size: 11px !important;
  font-weight: 800;
  line-height: 1.25;
}

.approval-stage-fields select,
.approval-stage-fields input {
  width: 100% !important;
  height: 42px !important;
  margin: 0 !important;
  border: 1px solid #b3dfce !important;
  border-radius: 9px !important;
  background-color: #fff !important;
  color: #0b2c20 !important;
  font-size: 12px !important;
}

.approval-stage-fields select:focus,
.approval-stage-fields input:focus {
  border-color: #1f7d5b !important;
  box-shadow: 0 0 0 3px rgba(31,125,91, 0.12) !important;
  outline: 0;
}

.approval-stage-fields .form-help {
  display: block;
  min-height: 28px;
  color: #5b7a6f;
  font-size:11px !important;
  font-weight: 600;
  line-height: 1.35;
}

.approval-sla,
.approval-sla input {
  height: 42px !important;
}

.approval-sla span {
  right: 10px !important;
  bottom: 13px !important;
  color: #64756D !important;
  font-size:11px !important;
  font-weight: 700;
}

.approval-remove {
  width: 42px !important;
  height: 42px !important;
  margin: 22px 0 0 !important;
  border: 1px solid #f2c9c9 !important;
  border-radius: 9px !important;
  background: #fff7f7 !important;
  color: #c73535 !important;
}

/* Approval workflow form: keep the two-row field layout intentional. */
.approval-stage-fields > label:nth-child(1),
.approval-stage-fields > label:nth-child(2),
.approval-stage-fields > label:nth-child(3),
.approval-stage-fields > label:nth-child(4) {
  grid-column: span 1 !important;
}

.approval-stage-fields > label:nth-child(5),
.approval-stage-fields > label:nth-child(6) {
  grid-column: span 1 !important;
}

.approval-stage-fields > .approval-remove {
  grid-column: 4 !important;
  grid-row: 2 !important;
  justify-self: end;
  align-self: end;
}

.approval-stage-fields select {
  min-width: 0 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 30px;
}

.approval-stage-fields label {
  min-width: 0 !important;
}

.approval-remove:hover {
  background: #feecec !important;
}

@media (max-width: 1400px) {
  .approval-stage {
    grid-template-columns: 160px minmax(0, 1fr) !important;
  }

  .approval-stage-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .approval-stage-fields > label:nth-child(1),
  .approval-stage-fields > label:nth-child(2),
  .approval-stage-fields > label:nth-child(3),
  .approval-stage-fields > label:nth-child(4),
  .approval-stage-fields > label:nth-child(5),
  .approval-stage-fields > label:nth-child(6) {
    grid-column: span 1 !important;
  }

  .approval-stage-fields > .approval-remove {
    grid-column: 2 !important;
    grid-row: 4 !important;
  }
}

@media (max-width: 980px) {
  .approval-workspace {
    grid-template-columns: 1fr !important;
  }

  .approval-stage {
    grid-template-columns: 1fr !important;
  }

  .approval-stage-summary {
    min-height: 64px !important;
    border-right: 0 !important;
    border-bottom: 1px solid #d6eee5 !important;
  }

  .approval-stage-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .approval-stage-fields > .approval-remove {
    grid-column: 2 !important;
    grid-row: 4 !important;
    justify-self: end;
    margin-top: 0 !important;
  }
}

@media (max-width: 640px) {
  .approval-stage-panel {
    padding: 14px;
  }

  .approval-stage-fields {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 14px !important;
  }

  .approval-stage-fields select,
  .approval-stage-fields input,
  .approval-sla,
  .approval-sla input {
    height: 44px !important;
    font-size: 13px !important;
  }

  .approval-remove {
    width: 100% !important;
    height: 44px !important;
  }

  .approval-stage-fields > .approval-remove {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

.leave-request-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 14px 0 16px;
  padding: 16px 18px;
  border: 1px solid #c3ecdc;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(10,40,31, 0.05);
}

.leave-request-toolbar strong {
  display: block;
  color: #0a281d;
  font-size: 16px;
  line-height: 1.25;
}

.leave-request-toolbar span {
  display: block;
  margin-top: 4px;
  color: #53796c;
  font-size: 13px;
  line-height: 1.45;
}

.leave-request-toolbar .btn {
  min-height: 44px;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .leave-request-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .leave-request-toolbar .btn {
    width: 100%;
  }
}

.setup-company-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px;
  background: linear-gradient(135deg, #e7f9f3 0%, #F3F8F5 55%, #e6f6f1 100%);
}

.setup-company-card {
  width: min(760px, calc(100vw - 32px));
  background: #fff;
  border: 1px solid var(--border, #c7eadd);
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(10,40,30, 0.14);
  padding: 34px;
}

.setup-company-eyebrow {
  margin-bottom: 8px;
  color: #1d7454;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.setup-company-card h1 {
  margin: 0 0 8px;
  color: #0b2c20;
  font-size: 30px;
  line-height: 1.15;
}

.setup-company-card p {
  margin: 0 0 24px;
  color: #53766a;
  line-height: 1.55;
}

.setup-company-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.setup-company-grid label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: #0d3527;
  font-size: 13px;
  font-weight: 700;
}

.setup-company-grid .wide {
  grid-column: 1 / -1;
}

.setup-company-grid input,
.setup-company-grid textarea {
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid #b5e1d1;
  border-radius: 10px;
  background: #fff;
  color: #0b2c20;
  font: inherit;
}

.setup-company-grid textarea {
  resize: vertical;
}

.setup-defaults-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid #9ee7cd;
  border-radius: 12px;
  background: #e8f9f3;
  color: #175b42;
}

.setup-defaults-box strong {
  color: #114431;
}

.setup-defaults-box span {
  color: #437261;
  font-size: 13px;
}

.setup-company-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}

@media (max-width: 767px) {
  .setup-company-shell {
    padding: 18px;
  }

  .setup-company-card {
    width: 100%;
    padding: 24px 18px;
    border-radius: 14px;
  }

  .setup-company-card h1 {
    font-size: 24px;
  }

  .setup-company-grid {
    grid-template-columns: 1fr;
  }

  .setup-company-actions {
    flex-direction: column-reverse;
  }

  .setup-company-actions .btn {
    width: 100%;
    min-height: 44px;
  }
}

.payroll-readiness-head-main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
}

.payroll-readiness-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.payroll-readiness-detail-anchor {
  padding: 0 16px 14px;
}

.payroll-readiness-summary {
  margin: 10px 16px 0;
  padding: 13px 14px;
  border: 1px solid #f4d79d;
  border-radius: 12px;
  background: #fff9ed;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

/* One consistent search control across directory, attendance, payroll,
   devices, reports and modal toolbars. */
.payroll-search-input,
.attendance-search,
.directory-search,
.loan-filterbar label,
.device-filters label,
.device-log-toolbar label,
.connector-toolbar label,
.import-audit-toolbar label,
.access-filters label,
.audit-filters label,
.document-filterbar label,
.enrollment-toolbar label,
.mapping-toolbar label,
.help-search,
.mileage-rates-search {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 42px;
  min-width: 210px;
  flex: 1 1 240px;
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-sm);
  background: #fff;
  color: var(--ui-muted);
  transition: border-color .15s, box-shadow .15s;
}
.payroll-search-input:focus-within,
.attendance-search:focus-within,
.directory-search:focus-within,
.loan-filterbar label:focus-within,
.device-filters label:focus-within,
.device-log-toolbar label:focus-within,
.connector-toolbar label:focus-within,
.import-audit-toolbar label:focus-within,
.access-filters label:focus-within,
.audit-filters label:focus-within,
.document-filterbar label:focus-within,
.enrollment-toolbar label:focus-within,
.mapping-toolbar label:focus-within,
.help-search:focus-within,
.mileage-rates-search:focus-within { border-color: var(--ui-primary); box-shadow: 0 0 0 3px rgba(11,107,87,.11); }
.payroll-search-input>.shell-icon,
.attendance-search>.shell-icon,
.directory-search>.shell-icon,
.loan-filterbar label>.shell-icon,
.device-filters label>.shell-icon,
.device-log-toolbar label>.shell-icon,
.connector-toolbar label>.shell-icon,
.import-audit-toolbar label>.shell-icon,
.access-filters label>.shell-icon,
.audit-filters label>.shell-icon,
.document-filterbar label>.shell-icon,
.enrollment-toolbar label>.shell-icon,
.mapping-toolbar label>.shell-icon,
.help-search>.shell-icon,
.mileage-rates-search>.shell-icon { flex: 0 0 auto; width: 17px; height: 17px; margin-left: 12px; color: #597c6f; }
.payroll-search-input>input,
.attendance-search>input,
.directory-search>input,
.loan-filterbar label>input,
.device-filters label>input,
.device-log-toolbar label>input,
.connector-toolbar label>input,
.import-audit-toolbar label>input,
.access-filters label>input,
.audit-filters label>input,
.document-filterbar label>input,
.enrollment-toolbar label>input,
.mapping-toolbar label>input,
.help-search>input,
.mileage-rates-search>input { flex: 1 1 auto; width: 100%; min-width: 0; min-height: 40px; padding: 0 12px 0 9px; border: 0; outline: 0; box-shadow: none!important; background: transparent; }
.payroll-search-input>input::placeholder,
.attendance-search>input::placeholder,
.directory-search>input::placeholder { color: #5e766d; }
.payroll-review-bar>.payroll-search-input { max-width: 340px; }
@media(max-width:767px){.payroll-review-bar>.payroll-search-input{max-width:none;min-width:0}.payroll-search-input,.attendance-search,.directory-search,.loan-filterbar label,.device-filters label,.device-log-toolbar label,.connector-toolbar label,.import-audit-toolbar label,.access-filters label,.audit-filters label,.document-filterbar label,.enrollment-toolbar label,.mapping-toolbar label,.help-search,.mileage-rates-search{min-width:0;width:100%;flex-basis:100%}}

.payroll-readiness-summary.block {
  border-color: #f2bcc3;
  background: #fff8f8;
}

.payroll-readiness-summary-main {
  min-width: 0;
}

.payroll-readiness-summary-kicker {
  margin-bottom: 3px;
  color: #9a6a00;
  font-size:11px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.payroll-readiness-summary.block .payroll-readiness-summary-kicker {
  color: #b02a37;
}

.payroll-readiness-summary-title {
  color: #0a281e;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.payroll-readiness-summary-meta {
  margin-top: 4px;
  color: #52655D;
  font-size: 11px;
  line-height: 1.35;
}

.payroll-readiness-summary-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}

.payroll-readiness-clear {
  margin: 10px 16px 0;
  padding: 11px 12px;
  border: 1px solid #ccebd8;
  border-radius: 12px;
  background: #f0fbf5;
  color: #0b6b38;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
}

.payroll-readiness-details {
  margin-top: 12px;
  border: 1px solid #cbecdf;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.payroll-readiness-details.warn {
  border-color: #f4d79d;
  background: #fffaf0;
}

.payroll-readiness-details.block {
  border-color: #f2bcc3;
  background: #fff8f8;
}

.readiness-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(11,46,33, .08);
  background: rgba(255, 255, 255, .75);
}

.readiness-detail-title {
  font-size: 13px;
  font-weight: 800;
  color: #0a281e;
}

.readiness-detail-note {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.4;
  color: #537b6c;
}

.readiness-detail-list {
  display: grid;
}

.readiness-issue {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 12px 14px;
  border-top: 1px solid rgba(11,46,33, .08);
}

.readiness-issue:first-child {
  border-top: 0;
}

.readiness-issue-code {
  font-size: 12px;
  font-weight: 800;
  color: #0a281e;
}

.readiness-issue-message {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.45;
  color: #52655D;
}

.readiness-issue-more {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #9a6a00;
}

.readiness-issue-actions {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}

.readiness-check.has-detail {
  align-items: flex-start;
  min-height: 88px;
}

.readiness-check-body {
  min-width: 0;
}

.readiness-inline-detail {
  grid-column: 2 / 4;
  margin-top: 8px;
  padding: 9px 10px;
  border: 1px solid #f4d79d;
  border-radius: 10px;
  background: #fff9ed;
  color: #52655D;
  font-size: 11px;
  line-height: 1.38;
}

/* Keep the readiness overview compact; full messages/actions live in the
   dedicated blocker and warning panels below it. */
.payroll-readiness-grid .readiness-check.has-detail {
  min-height: 58px;
  align-items: center;
}
.payroll-readiness-grid .readiness-inline-detail {
  display: none;
}
.payroll-readiness-grid {
  grid-auto-rows: minmax(58px, auto);
}
.payroll-readiness-details {
  max-height: 460px;
  overflow: auto;
}
.payroll-readiness-summary {
  position: sticky;
  top: 0;
  z-index: 1;
}

.readiness-inline-detail.block {
  border-color: #f2bcc3;
  background: #fff8f8;
}

.readiness-inline-detail strong {
  display: block;
  margin-bottom: 2px;
  color: #0a281e;
  font-size: 11px;
}

.readiness-inline-detail span,
.readiness-inline-detail small {
  display: block;
}

.readiness-inline-detail small {
  margin-top: 4px;
  color: #9a6a00;
  font-weight: 750;
}

.readiness-inline-actions,
.payroll-warning-note-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.readiness-inline-actions .btn-xs {
  min-height: 30px;
  padding: 5px 9px;
  border-radius: 8px;
  font-size:12px;
}

.payroll-warning-note {
  margin: 10px 0 12px;
  padding: 12px 14px;
  border: 1px solid #f4d79d;
  border-radius: 12px;
  background: #fff9ed;
  color: #52655D;
}

.payroll-warning-note strong {
  display: block;
  color: #0a281e;
  font-size: 12px;
}

.payroll-warning-note span {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.4;
}

.payroll-warning-note-list {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.payroll-warning-note-list li {
  padding: 8px 10px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(154, 106, 0, .14);
}

@media (max-width: 767px) {
  .payroll-readiness-summary {
    margin: 10px 12px 0;
    flex-direction: column;
  }

  .payroll-readiness-summary-actions,
  .payroll-readiness-summary-actions .btn {
    width: 100%;
  }

  .payroll-readiness-head-actions,
  .payroll-readiness-head-actions .btn {
    width: 100%;
  }

  .payroll-readiness-head-actions .btn,
  .readiness-issue-actions .btn {
    min-height: 44px;
  }

  .readiness-detail-head,
  .readiness-issue {
    grid-template-columns: 1fr;
  }

  .readiness-detail-head {
    flex-direction: column;
  }

  .readiness-issue-actions .btn {
    width: 100%;
  }

  .readiness-inline-detail {
    grid-column: 1 / -1;
  }

  .readiness-inline-actions .btn,
  .payroll-warning-note-actions .btn {
    width: 100%;
    min-height: 44px;
  }
}
/* Employees: keep bulk actions together and make the toolbar responsive. */
.directory-heading{display:grid;grid-template-columns:minmax(240px,1fr) minmax(0,auto);align-items:end;gap:18px}
.employee-page-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px;max-width:100%}
.employee-page-actions .btn{white-space:nowrap;min-height:40px;padding-inline:14px}
@media(max-width:1100px){.directory-heading{grid-template-columns:1fr}.employee-page-actions{justify-content:flex-start}}
@media(max-width:767px){.employee-page-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}.employee-page-actions .btn{width:100%;padding-inline:9px;font-size:12px}.employee-page-actions .btn-primary{grid-column:1/-1}}

/* Salary Run follows the compact payroll header used on payslip/report exports. */
.salary-compact-header .app-header{height:58px;padding-inline:26px;gap:18px}
.salary-compact-header .header-heading{min-width:250px}
.salary-compact-header .header-title{display:none!important}
.salary-compact-header .breadcrumbs{margin-top:0;font-size:11px}
.salary-compact-header .global-search{width:min(325px,32vw)}
.salary-compact-header .quick-payroll{display:none!important}
.salary-compact-header .header-profile{min-height:40px;padding:3px 9px;border:1px solid #cbe7dd;border-radius:20px;background:#fff}
.salary-compact-header .header-profile .avatar{width:32px;height:32px}
.salary-compact-header .header-name{font-size:11px}
.salary-compact-header .header-role{font-size:11px}
@media(max-width:767px){.salary-compact-header .app-header{height:58px;padding-inline:12px;gap:8px}.salary-compact-header .header-heading{min-width:0}.salary-compact-header .global-search{width:auto;flex:1}.salary-compact-header .header-profile .header-user-copy{display:none}.salary-compact-header .header-profile{padding:3px}.salary-compact-header .header-profile .avatar{width:34px;height:34px}}

/* Payroll review: match the compact reference layout. */
.payroll-readiness-grid{gap:8px;padding:10px 12px;grid-template-columns:repeat(3,minmax(0,1fr))}
.payroll-readiness-grid .readiness-check{min-height:72px;padding:10px 11px;border:1px solid #d8ece4;border-radius:7px;background:#fff}
.payroll-readiness-grid .readiness-check.has-detail{min-height:72px}
.payroll-readiness-grid .readiness-check-name{font-size:11px}
.payroll-readiness-grid .readiness-check-note{font-size:11px;line-height:1.35}
.payroll-readiness-grid .readiness-check-state{font-size:11px;white-space:nowrap}
.payroll-readiness-grid .readiness-check-icon{width:22px;height:22px;font-size:11px}
.payroll-readiness-summary{margin:8px 12px 0;padding:11px 12px;border-radius:9px}
.payroll-readiness-summary-title{font-size:12px}
.payroll-readiness-summary-meta{font-size:11px}
.payroll-review-section{border-radius:9px}
.payroll-review-heading{padding:13px 14px 8px}
.payroll-review-heading strong{font-size:14px}
.payroll-review-heading small{font-size:11px}
.payroll-workspace .payroll-review-bar{gap:8px;padding:8px 14px 12px;align-items:center}
.payroll-workspace .payroll-review-bar .payroll-search-input{margin-top:0;min-height:38px;flex:1 1 260px}
.payroll-workspace .payroll-review-bar select{min-width:150px}
.payroll-search-input{border-color:#c1ded4;background:#fff;border-radius:7px}
.payroll-issue-list{max-width:150px;display:flex;align-items:center}
.payroll-issue-list .payroll-issue{display:inline-flex;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:700}
.payroll-table-card table{min-width:1040px}
.payroll-table-card th{font-size:11px;padding-inline:10px}
.payroll-table-card td{font-size:11px;padding:10px!important}
.payroll-table-card .salary-row-meta{font-size:11px}
@media(max-width:900px){.payroll-readiness-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){.payroll-readiness-grid{grid-template-columns:1fr;padding:8px}.payroll-readiness-grid .readiness-check{min-height:58px}.payroll-issue-list,.payroll-issue-list .payroll-issue{max-width:100px}.payroll-table-card table{min-width:0}}

/* Readiness detail: keep grouped validation results dense and scannable. */
.payroll-readiness-details{margin:8px 12px 0;max-height:350px;overflow:auto;border-radius:8px}
.payroll-readiness-head-actions{justify-content:flex-end;gap:8px;flex-wrap:wrap}
.payroll-readiness-head-actions #employee-readiness-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.readiness-detail-head{padding:9px 11px}
.readiness-detail-title{font-size:11px}
.readiness-detail-note{font-size:11px;line-height:1.3}
.readiness-issue{grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:8px 11px}
.readiness-issue-code{font-size:11px}
.readiness-issue-message{margin-top:2px;font-size:11px;line-height:1.3}
.readiness-issue-more{margin-top:2px;font-size:11px}
.readiness-issue-actions .btn{min-height:30px;padding:5px 9px;font-size:12px}
@media(max-width:767px){.payroll-readiness-details{margin-inline:8px;max-height:320px}.readiness-issue{grid-template-columns:1fr}.readiness-issue-actions{justify-content:flex-start}}

/* Export template controls: keep bank/accounting setup explicit and usable on small screens. */
.eft-template-panel{margin-top:12px;padding:14px 16px;border:1px solid #ccebdf;border-radius:12px;background:#F3F8F5}
.eft-template-row{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.eft-template-row label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:700;color:#254f3f;min-width:210px}
.eft-template-row select,.eft-template-row input,.accounting-export-profile{min-height:38px;min-width:210px;padding:8px 10px;border:1px solid #a5d9c6;border-radius:8px;background:#fff;color:#14261F}
.eft-template-panel .form-help{margin-top:8px;color:#4b6c5f;font-size:12px}
.accounting-export-profile{margin-left:6px;vertical-align:middle}
@media(max-width:640px){.eft-template-row label,.eft-template-row select,.eft-template-row input,.accounting-export-profile{width:100%;min-width:0}.eft-template-row .btn{width:100%}.accounting-export-profile{margin:6px 0}}

/* Getting-started checklist (first run, before the first finalized payroll) */
.onboard-card{padding:22px 24px}
.onboard-head{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:6px}
.onboard-head strong{font-size:15px;display:block}
.onboard-head span{font-size:12.5px;color:var(--ui-muted)}
.onboard-bar{flex:1;min-width:160px;max-width:320px;height:7px;background:var(--ui-bg);border-radius:4px;overflow:hidden}
.onboard-bar i{display:block;height:100%;background:var(--ui-primary);transition:width .3s ease}
@media(prefers-reduced-motion:reduce){.onboard-bar i{transition:none}}
.onboard-list{list-style:none;margin:14px 0 0;padding:0}
.onboard-step{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-top:1px solid var(--ui-border)}
.onboard-step .btn{flex-shrink:0;align-self:center}
.onboard-mark{flex-shrink:0;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:600;background:var(--ui-bg);color:var(--ui-muted);border:1px solid var(--ui-border)}
.onboard-done .onboard-mark{background:#e8f6ee;color:#14844b;border-color:#bfe3cf}
.onboard-partial .onboard-mark{background:#fdf3e2;color:#a86508;border-color:#eed6ac}
.onboard-body{flex:1;min-width:0}
.onboard-title{font-weight:600;font-size:14.5px;color:var(--ui-ink)}
.onboard-done .onboard-title{color:var(--ui-muted)}
.onboard-detail{font-size:13px;color:var(--ui-muted);margin-top:3px;line-height:1.5}
.onboard-optional{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ui-subtle);border:1px solid var(--ui-border);border-radius:3px;padding:1px 5px;margin-left:6px;font-weight:500}
@media(max-width:600px){.onboard-step{flex-wrap:wrap}.onboard-step .btn{width:100%;margin-top:4px}}

/* Employee modal: essentials stay open, the rest collapse until needed */
.emp-essentials-note{font-size:12.5px;color:var(--ui-muted);margin:0 0 12px}
.req{color:#bf3b45;font-weight:700}
.emp-section{border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm);margin-top:12px;background:var(--ui-surface)}
.emp-section>summary{cursor:pointer;padding:11px 14px;font-weight:600;font-size:13.5px;color:var(--ui-ink);list-style:none;display:flex;align-items:center;gap:8px}
.emp-section>summary::-webkit-details-marker{display:none}
.emp-section>summary::before{content:'>';display:inline-block;transition:transform .15s ease;color:var(--ui-muted);font-family:var(--mono,monospace)}
.emp-section[open]>summary::before{transform:rotate(90deg)}
.emp-section>summary:hover{background:var(--ui-bg)}
.emp-section>summary:focus-visible{outline:2px solid var(--ui-primary);outline-offset:-2px}
.emp-section>.form-grid{padding:4px 14px 14px}
/* A direct child of <details> with an explicit display value overrides the
   browser collapse, so hide the grid explicitly while the section is closed. */
.emp-section:not([open])>.form-grid{display:none}
#modal-add-emp [aria-invalid="true"]{border-color:#bf3b45;box-shadow:0 0 0 2px rgba(191,59,69,.12)}
@media(prefers-reduced-motion:reduce){.emp-section>summary::before{transition:none}}

/* Donut wedges are supplied per render from real attendance figures. */
.donut{background:var(--donut,conic-gradient(var(--rule) 0 100%))!important}

.chart-empty{display:flex;flex-direction:column;gap:4px;justify-content:center;align-items:center;height:100%;min-height:150px;text-align:center;padding:16px}
.chart-empty strong{font-size:14px;color:var(--ink-2)}
.chart-empty span{font-size:12px;color:var(--muted-ink);max-width:44ch;line-height:1.5}
.chart-peak{font-size:11px;color:var(--muted-ink);text-align:right;margin-top:4px;font-variant-numeric:tabular-nums}

/* Wide content must scroll inside its own container, never push the page.
   .table-scroll is used by newer screens; the rest are a safety net so a wide
   table can never introduce a horizontal scrollbar on the whole workspace. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.main,.workspace{overflow-x:hidden}
.panel,.card,.page-fragment{min-width:0}
.panel table,.card table,.page-fragment table{max-width:100%}


/* ── Control scale, enforced ───────────────────────────────────────────────
   Measured on the live pages before this block: buttons rendered at 28, 30,
   32, 34, 37, 38, 40, 42 and 44px on the same screens, and two rules had
   shrunk the payroll actions to 10px and 8px text to make a toolbar fit.
   Text that small is not a style choice, it is unreadable, so the toolbars
   wrap instead of shrinking.

   Buttons resolve to two sizes: 40px normally, 32px for the dense secondary
   rows. Tabs, accordion headers and card-sized options are different
   components and keep their own heights on purpose. */
@media (min-width:768px){
  .btn,
  main button.btn,
  .payroll-run-actions .btn,
  .readiness-issue-actions .btn,
  .leave-request-toolbar .btn,
  .employee-change-actions .btn,
  .employee-change-queue-tools .btn,
  .company-page-toolbar .btn,
  .audit-heading .btn,
  .modal .btn{
    height:auto;
    min-height:var(--control-h);
    font-size:var(--fs-sm);
    padding:0 16px;
  }
  .btn-sm,.btn-xs,
  .payroll-run-actions .btn-sm,
  .readiness-issue-actions .btn-sm,
  .payroll-review-heading-actions .btn,
  .payroll-mobile-review-actions .btn,
  .employee-change-actions .btn.btn-sm,
  .employee-change-queue-tools .btn{
    height:auto;
    min-height:var(--control-h-sm);
    font-size:var(--fs-xs);
    padding:0 12px;
  }
  /* The row wraps rather than starving its buttons of size. */
  .payroll-run-actions,
  .payroll-review-heading-actions,
  .readiness-issue-actions{ flex-wrap:wrap; row-gap:8px }
  .payroll-run-actions select{ height:var(--control-h); font-size:var(--fs-sm); width:auto; min-width:150px }

  /* Filter rows line up with the inputs beside them. */
  .access-filters label,
  .access-filters button,
  .access-filters input,
  .access-filters select{ min-height:var(--control-h) }
}

/* Touch targets stay at 44px on phones — that is a floor, not an inconsistency. */
@media (max-width:767px){
  .btn,.modal .btn{ min-height:44px; height:auto; font-size:var(--fs-sm) }
  .btn-sm,.btn-xs{ min-height:36px; height:auto; font-size:var(--fs-xs) }
}

/* ── Inline label + control pairs ──────────────────────────────────────────
   Several toolbars are a bare <div> of <label>Year <input></label> pairs.
   As inline boxes their line boxes collapsed into each other, so the label
   text sat on top of the neighbouring control. As inline-flex rows they line
   up and keep a real gap. */
main label:has(> input),
main label:has(> select),
.modal label:has(> input:not([type=checkbox]):not([type=radio])),
.modal label:has(> select){
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-right:12px;
  margin-bottom:6px;
  vertical-align:middle;
  white-space:nowrap;
}
main label > input:not([type=checkbox]):not([type=radio]),
main label > select,
.modal label > input:not([type=checkbox]):not([type=radio]),
.modal label > select{ width:auto }

/* Toolbars that are only a <div> of controls still read as a row. */
.card > div:has(> label:has(> input)):has(> button),
.card > div:has(> label:has(> select)):has(> button){
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
}


/* ── Text inputs, one height ───────────────────────────────────────────────
   Three component-scoped rules still set their own heights (38, 42 and 44px),
   so a select in Settings did not line up with the button next to it. Every
   text control is 40px on desktop, matching the default button exactly. */
@media (min-width:768px){
  .settings-form-card input:not([type=checkbox]):not([type=radio]):not([type=file]),
  .settings-form-card select,
  .settings-form-card textarea,
  .table-search-bar input,
  .payroll-control-bar select,
  .payroll-control-bar input,
  main .card select,
  main .card input:not([type=checkbox]):not([type=radio]):not([type=file]){
    min-height:var(--control-h);
    height:auto;
  }
  .settings-form-card textarea,
  main .card textarea{ min-height:calc(var(--control-h) * 2) }
}


/* ── Touch targets on phones ───────────────────────────────────────────────
   The payroll toolbars set their own heights with a more specific selector
   than .btn, so on a phone they were still rendering at 28-34px. A finger is
   about 44px wide; anything smaller is a mis-tap waiting to happen on the one
   screen where a mis-tap runs or blocks a payroll. These rows wrap instead. */
@media (max-width:767px){
  .btn,
  .modal .btn,
  .payroll-run-actions .btn,
  .payroll-review-heading-actions .btn,
  .payroll-mobile-review-actions .btn,
  .readiness-issue-actions .btn,
  .leave-request-toolbar .btn,
  .employee-change-actions .btn,
  .employee-change-queue-tools .btn,
  .diagnostic-actions .btn,
  .btn.btn.btn:not(.btn-sm):not(.btn-xs){
    height:auto;
    min-height:44px;
    font-size:var(--fs-sm);
    padding:0 14px;
  }
  /* Repeating the class raises specificity above any ".parent .btn-sm" rule
     without reaching for !important, so the floor holds everywhere rather
     than only in the toolbars listed above. */
  .btn-sm.btn-sm.btn-sm,.btn-xs.btn-xs.btn-xs{
    height:auto;
    min-height:40px;
    font-size:var(--fs-xs);
    padding:0 12px;
  }
  .payroll-run-actions,
  .payroll-review-heading-actions,
  .payroll-mobile-review-actions,
  .readiness-issue-actions{ flex-wrap:wrap; row-gap:8px }
  .payroll-run-actions select{ height:auto; min-height:44px; font-size:var(--fs-sm) }

  main input:not([type=checkbox]):not([type=radio]):not([type=file]),
  main select,
  .modal input:not([type=checkbox]):not([type=radio]):not([type=file]),
  .modal select{ height:auto; min-height:44px }
}


/* <small> compounds: nested inside an 11px container the browser's 0.8333em
   took payroll figures down to 9.2px. max() keeps the de-emphasis where there
   is room for it and stops at the 11px floor where there is not. */
main small,.modal small,.card small,td small,th small{ font-size:max(0.8333em,11px) }

/* ── Attendance mode chooser ───────────────────────────────────────────────
   Three options that change how people get paid, so each shows its
   consequence rather than hiding behind a dropdown label. */
.attendance-mode-choice{ display:grid; gap:10px; border:0; padding:0; margin:0 0 4px }
.attendance-mode-choice .mode-card{
  display:flex; align-items:flex-start; gap:12px;
  padding:14px 16px;
  border:1px solid var(--rule-strong);
  border-radius:var(--r-md);
  background:var(--surface);
  cursor:pointer;
  transition:border-color .12s ease, background .12s ease;
}
.attendance-mode-choice .mode-card:hover{ border-color:var(--primary); background:var(--surface-2) }
.attendance-mode-choice .mode-card.selected{
  border-color:var(--primary);
  background:var(--primary-wash);
  box-shadow:inset 0 0 0 1px var(--primary);
}
.attendance-mode-choice .mode-card input{ margin-top:2px; width:18px; height:18px; min-height:0; accent-color:var(--primary); flex:none }
.attendance-mode-choice .mode-card strong{ display:block; font-size:var(--fs-base); color:var(--ink) }
.attendance-mode-choice .mode-card small{ display:block; margin-top:3px; font-size:var(--fs-xs); color:var(--muted-ink); line-height:1.45 }
.attendance-mode-choice .mode-card:focus-within{ outline:2px solid var(--primary); outline-offset:2px }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

/* ── Section expand chevron ────────────────────────────────────────────────
   These toggles used to show a literal letter "v", flipped 180deg when open,
   which read as a typo rather than a control. A real chevron rotates between
   pointing down (closed) and up (open). */
.settings-section-toggle > b.section-chevron{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  flex:none;
  border-radius:50%;
  background:var(--surface-2);
  color:var(--muted-ink);
  font-size:0;                     /* nothing textual left to size */
  transition:transform .18s ease, background .18s ease, color .18s ease;
}
.settings-section-toggle > b.section-chevron .shell-icon{
  width:16px; height:16px;
  stroke:currentColor; fill:none;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.settings-form-section.open .settings-section-toggle > b.section-chevron{
  transform:rotate(180deg);
  background:var(--primary-wash);
  color:var(--primary);
}
.settings-section-toggle:hover > b.section-chevron{ background:var(--primary-wash); color:var(--primary) }

/* ── Scrolling tab strips ──────────────────────────────────────────────────
   These strips scroll horizontally, but their buttons were left shrinkable
   (flex:0 1 auto). Once the labels no longer fit, every button was squeezed to
   the same narrow width while its text stayed on one line and was never
   clipped, so each label ran straight over its neighbour — "Work &
   attendanceLeave defaults". Tabs keep their natural width and the strip
   scrolls instead. */
.settings-tabs button,
.labour-tabs button,
.payroll-module-tab,
.leave-module-tab,
.loan-module-tab,
.report-module-tab,
.employee-home-tab,
.payroll-control-tab,
.profile-tab{
  flex:0 0 auto;
  min-width:max-content;
}
/* Scrolling needs to be reachable: keep a usable thumb rather than hiding it. */
.settings-tabs,.labour-tabs,.payroll-module-tabs,.leave-module-tabs,
.loan-module-tabs,.report-module-tabs,.payroll-control-nav,.profile-tabs{
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}

/* ── Two-step sign-in ──────────────────────────────────────────────────────
   Sits inside the change-password dialog, since account security is one job
   rather than two scattered screens. */
.two-step-panel{
  margin-top:16px; padding:14px; border:1px solid var(--rule-strong);
  border-radius:var(--r-md); background:var(--surface-2);
}
.two-step-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px }
.two-step-loading{ font-size:var(--fs-xs); color:var(--muted-ink) }
.two-step-steps{ margin:10px 0 14px 18px; padding:0; font-size:var(--fs-sm); color:var(--ink-2); line-height:1.55 }
.two-step-steps li{ margin-bottom:8px }
/* The key is read off the screen and typed into a phone, so it is set in a
   monospace face, spaced, and selectable in one click. */
.two-step-key{
  display:block; margin-top:8px; padding:10px 12px;
  border:1px dashed var(--rule-strong); border-radius:var(--r-sm);
  background:var(--surface); color:var(--ink);
  font-family:var(--font-data); font-size:var(--fs-base); letter-spacing:.06em;
  user-select:all; word-break:break-all;
}
.recovery-code-list{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;
  margin:12px 0 16px; padding:14px; list-style:none;
  border:1px solid var(--rule-strong); border-radius:var(--r-md); background:var(--surface-2);
  font-family:var(--font-data); font-size:var(--fs-base); letter-spacing:.04em;
}
.recovery-code-list li{ user-select:all }
@media print{
  /* Printing the codes should give the codes, not the whole application. */
  body > *:not(#modal-recovery-codes){ display:none !important }
  #modal-recovery-codes{ position:static !important; background:none !important }
  #modal-recovery-codes .modal{ box-shadow:none !important; border:0 !important; max-width:none !important }
  #modal-recovery-codes .modal-actions{ display:none !important }
}
@media (max-width:520px){ .recovery-code-list{ grid-template-columns:1fr } }