/* Presentation only: keep financial calculations and printed documents intact. */
@media screen {
:root{--ink:#243b46;--muted:#657b85;--navy:#173e49;--line:#e0e9e8;--green-2:#238461;--soft:#f4f7f7}
html,body{font-family:"Segoe UI",Tahoma,Arial,sans-serif;background:#f4f7f7;line-height:1.65}
button,input,select,textarea{font-family:inherit}
.app-shell{grid-template-columns:232px minmax(0,1fr);grid-template-rows:72px minmax(0,1fr);height:100dvh;min-height:0;overflow:hidden}
.portal-header{min-height:72px;padding:6px 24px;gap:18px;grid-template-columns:minmax(220px,1fr) minmax(250px,2fr) 100px;background:#17699f;border-bottom:1px solid #105788;box-shadow:0 2px 8px #123f7310}
.portal-header h1{font-size:21px;font-weight:700;white-space:normal;line-height:1.4}
.portal-header .brand img{width:58px;height:58px}
.user-box{font-size:11px;line-height:1.5;min-width:0;direction:rtl;align-items:flex-end}
.user-box strong{font-size:11px;font-weight:500}.user-links{gap:9px;margin-bottom:2px}.header-link{font-size:11px;text-decoration:none;min-height:24px}.header-link:hover{text-decoration:underline}
#nav{padding:20px 12px;background:#fff;border-inline-end:1px solid var(--line);box-shadow:none;overscroll-behavior:contain}
#nav>button{width:100%;min-height:43px;margin:4px 0;padding:8px 12px;border:0;border-radius:8px;background:transparent;color:#48616a;font-size:14px;font-weight:600;box-shadow:none;justify-content:flex-start;text-align:start}
#nav>button:before{width:24px;min-width:24px;height:24px;margin-left:9px;border-radius:6px;background:#eef4f2;color:#54836f;font-size:16px}
#nav>button:hover{transform:none;background:#f0f6f3;color:#176e53}
#nav>button.active{background:#e5f3ec;color:#126247;box-shadow:inset -3px 0 #238461}
#nav>button.active:before{background:#cee8db;color:#126247}
#nav .nav-home-link{color:#6a7c82!important;font-size:12px!important;padding:0 12px!important;margin:0 0 16px!important}
.nav-submenu{margin:4px 10px 12px 0;padding:3px 8px;border:0;border-inline-start:1px solid #d5e4dc;border-radius:0;background:transparent;box-shadow:none}
#nav .nav-submenu button{min-height:38px;font-size:12px;padding:7px 9px;color:#5b727b}
#nav .nav-submenu button:before{content:"";width:5px;min-width:5px;height:5px;background:#acbfb5;margin-left:10px}
#nav .nav-submenu button.active{background:#eaf5ef;color:#126247;box-shadow:none}
main{padding:26px 28px;background:#f4f7f7;scrollbar-gutter:stable;overscroll-behavior:contain}
.page{max-width:1640px;margin-inline:auto}.page-head{gap:16px;margin-bottom:22px;align-items:center}.page-head h2{font-size:24px;line-height:1.4;letter-spacing:-.3px}.page-head p{font-size:13px;margin-top:5px;color:var(--muted)}
.panel{padding:20px;margin-bottom:20px;border:1px solid var(--line);border-radius:12px;box-shadow:0 2px 5px #294c3b04}
.panel h3{font-size:16px;font-weight:650;margin-bottom:16px}.compact-head h3{margin-bottom:0}
.kpis{gap:16px;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:22px}.kpis>*{padding:20px;border-radius:12px;border:1px solid var(--line);border-top:3px solid #4b9e7e;box-shadow:0 2px 5px #294c3b04;color:#647982;font-size:13px}.kpis strong{display:block;color:#173e49;font-size:28px;font-weight:700;line-height:1.6;font-variant-numeric:tabular-nums}.kpis p{margin:0}
label{font-size:13px;font-weight:600;gap:7px;color:#49616b;margin-bottom:12px;min-width:0}
input,select,textarea{min-height:42px;border:1px solid #cad9d6;border-radius:8px;padding:9px 12px;background:#fff;font-size:14px;line-height:1.5;color:#243b46}
input:focus,select:focus,textarea:focus{border-color:#238461;box-shadow:0 0 0 3px #23846118}
input::placeholder,textarea::placeholder{color:#7f9299;font-size:13px}input:disabled,select:disabled,textarea:disabled{background:#eff3f3;color:#798b92;cursor:not-allowed}
input[type=checkbox],input[type=radio]{width:18px;min-height:18px;height:18px;padding:0;accent-color:#238461;flex:none}
input[type=date],input[type=time],input[type=month],input[type=number],input[type=email]{direction:ltr;text-align:start;font-variant-numeric:tabular-nums}
button,.file-button{min-height:40px;padding:8px 14px;border-radius:8px;border-color:#cad9d6;background:#fff;color:#3f5863;font-size:13px;font-weight:600;box-shadow:none;line-height:1.5;transition:background .15s,border-color .15s}
button:hover,.file-button:hover{background:#f0f6f3;border-color:#91b5a3}.primary{background:#197451;border-color:#197451;color:#fff;box-shadow:0 2px 3px #16513d10}.primary:hover{background:#115d40;border-color:#115d40}
button:focus-visible,.file-button:focus-within,a:focus-visible,.table-wrap:focus-visible{outline:3px solid #3a997e;outline-offset:3px}button:disabled{opacity:.55;cursor:not-allowed}
.file-button input{pointer-events:auto;width:100%;height:100%;inset:0;cursor:pointer}.page-actions{align-items:center}.page-actions .file-button{margin-bottom:0}#nav .nav-home-link::before{display:none}
.form-row,.dialog-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.dialog-grid .wide{grid-column:1/-1}
.filters,.payroll-tools{gap:12px}.filters{margin-bottom:16px}.filters>label,.payroll-tools>label{min-width:170px;flex:0 1 230px;margin-bottom:0}.filters>input,.filters>select{width:auto;max-width:100%;flex:1 1 180px}.filters>button{flex-shrink:0}
#employeeSearch{max-width:440px;margin-bottom:18px}
.table-wrap{border:1px solid var(--line);border-radius:9px;overscroll-behavior-inline:contain;scrollbar-width:thin}
main table,dialog table{line-height:1.55}main th,dialog th{background:#f0f5f3;color:#526b72;padding:13px 14px;font-size:12px;font-weight:700;border-bottom:1px solid #d8e4df}
main td,dialog td{padding:13px 14px;font-size:13px;border-color:#e8eeeb;font-variant-numeric:tabular-nums;vertical-align:middle}
main tbody tr:nth-child(even),dialog tbody tr:nth-child(even){background:#fcfdfd}main tbody tr:hover,dialog tbody tr:hover{background:#f1f7f4}main tbody tr:last-child td{border-bottom:0}
td button{min-height:32px;padding:5px 10px;font-size:12px;margin:2px}td select,td input{min-height:36px;min-width:115px;padding:6px 9px}
td[colspan]{white-space:normal;text-align:center;padding:30px 16px;color:#70848d}
.report-summary,.email-results-summary{background:#edf5f1;border:1px solid #d7e9df;color:#366352;font-size:13px;line-height:1.9;border-radius:8px;padding:12px 16px;margin:14px 0}
.attendance-warning{border:1px solid #ecdbad;background:#fff9e9;border-radius:8px;font-size:13px}.waiver-actions{display:flex;gap:6px;flex-wrap:wrap}
dialog{padding:26px;border:1px solid #dce7e2;border-top:3px solid #238461;border-radius:14px;box-shadow:0 24px 90px #163a3b30;max-height:90dvh;color:var(--ink)}dialog::backdrop{background:#173b4466;backdrop-filter:blur(3px)}dialog h3{font-size:20px;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:20px}
.dialog-actions{justify-content:flex-end;border-top:1px solid var(--line);padding-top:16px;margin-top:16px;gap:10px}.dialog-actions button{min-width:90px}.permission-grid{overflow-x:auto}.permission-grid input{min-height:18px}
.login-card{border-top:3px solid #238461;border-radius:16px;box-shadow:0 16px 55px #294c3b12}.login-card>img{width:125px;height:125px}.login-card .primary{width:100%}.login-card h1{font-size:22px}
.welcome-page.active{min-height:100%;margin:0;padding:24px;flex-direction:column;gap:12px;background:transparent}.welcome-page img{width:min(250px,60vw);max-height:30vh;filter:none}.welcome-page h2{font-size:24px;margin:0;color:#173e49}.welcome-page p{margin:0;color:#6b8087;font-size:14px;text-align:center}
.mobile-nav-toggle{display:none}.backup-actions p{flex-basis:100%;color:#657b85;font-size:13px}.managed-items{margin-top:15px}
@media(min-width:761px) and (max-width:1150px){.app-shell{grid-template-columns:205px minmax(0,1fr)}main{padding:22px 18px}.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.form-row,.dialog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.page-head{align-items:flex-start;flex-wrap:wrap}.portal-header h1{font-size:18px}}
@media(max-width:760px){.app-shell{display:flex;flex-direction:column;height:auto;min-height:100dvh;overflow:visible}.portal-header{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:4px 12px;padding:10px 16px;min-height:74px;direction:rtl}.portal-header h1{grid-column:1;grid-row:1;font-size:16px;text-align:right}.portal-header .brand{grid-column:2;grid-row:1/3}.portal-header .brand img{width:44px;height:44px}.user-box{grid-column:1;grid-row:2;align-items:flex-start;font-size:10px}.user-box strong{font-size:10px}.user-links{gap:8px}.header-link{font-size:11px}.mobile-nav-toggle{display:flex;margin:10px 14px;align-self:flex-start;color:#176e53;gap:8px}.mobile-nav-toggle::before{content:'☰';font-size:17px}#nav{display:none;margin:0 14px 12px;padding:12px;border:1px solid var(--line);border-radius:10px;max-height:65dvh;overflow:auto}#nav.mobile-open{display:block}main{padding:12px 14px 24px;overflow:visible;scrollbar-gutter:auto}.page-head{gap:14px;margin-bottom:18px;align-items:stretch}.page-head h2{font-size:22px}.page-actions{gap:8px}.page-actions>*{flex:1 1 130px}.panel{padding:15px;border-radius:10px}.kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.kpis>*{padding:14px;font-size:12px}.kpis strong{font-size:23px}.form-row,.dialog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.filters>label,.payroll-tools>label{min-width:0;flex:1 1 150px}.filters>button,.payroll-tools>button{flex:1 1 130px}dialog{width:calc(100% - 20px);padding:18px;max-height:92dvh}.inline-add{flex-wrap:wrap}.inline-add input{flex:1 1 180px}.welcome-page.active{min-height:55vh}.welcome-page h2{font-size:20px}main th,main td{padding:11px}.permission-grid{grid-template-columns:minmax(95px,1fr) repeat(3,49px)}.permission-grid>div{font-size:11px;padding:7px 3px}}
@media(max-width:440px){.form-row,.dialog-grid{grid-template-columns:minmax(0,1fr)}.page-actions>*{flex-basis:100%}.dialog-actions{flex-wrap:wrap}.user-links{gap:6px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}
}

@media print{.mobile-nav-toggle{display:none!important}}
/* v110: centered compact header, employee-first mobile attendance and semantic actions. */
@media screen{
.portal-header{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}
.portal-header .brand img{width:72px;height:72px}
.mobile-clock-employee{margin:0 0 10px;font-size:17px;font-weight:700;text-align:right}
#mobileAttendance .page-head{border-bottom:0;padding-bottom:0;margin-bottom:10px}
.employee-home-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 12px}
.employee-home-actions button{min-height:54px;font-size:16px;font-weight:750;border-radius:10px}
.action-clock-in{background:#238461!important;border-color:#238461!important;color:#fff!important}
.action-clock-in:hover{background:#176b4e!important}
.action-clock-out{background:#bd4842!important;border-color:#bd4842!important;color:#fff!important}
.action-clock-out:hover{background:#9e342e!important}
.action-site-leave{background:#d99a24!important;border-color:#d99a24!important;color:#fff!important}
.action-site-leave:hover{background:#b57a12!important}
.action-leave-request{background:#347bb5!important;border-color:#347bb5!important;color:#fff!important}
.action-leave-request:hover{background:#245f91!important}
.action-approve{background:#238461!important;border-color:#238461!important;color:#fff!important}
.action-reject{background:#bd4842!important;border-color:#bd4842!important;color:#fff!important}
}
@media(max-width:760px){
.portal-header{grid-template-columns:minmax(0,1fr) 56px;grid-template-rows:auto auto;min-height:90px;gap:5px 10px}
.portal-header h1{grid-column:1/-1;grid-row:1;text-align:center;font-size:17px;padding-inline:48px}
.portal-header .brand{grid-column:2;grid-row:1/3;z-index:1}
.portal-header .brand img{width:56px;height:56px}
.user-box{grid-column:1;grid-row:2}
}
@media(max-width:440px){.employee-home-actions{gap:8px}.employee-home-actions button{min-height:50px;font-size:15px}.mobile-clock-employee{font-size:15px}}
/* v88: top navigation, purposeful action colors and balanced fields. */
@media screen {
:root{--navy:#173f72;--line:#dce6ef;--muted:#657a91}
.app-shell{grid-template-columns:minmax(0,1fr);grid-template-rows:76px auto minmax(0,1fr)}
.portal-header{grid-column:1;grid-row:1;min-height:76px;background:linear-gradient(110deg,#185e94,#237eb5);border-bottom:1px solid #145584}
.header-link{background:#ffffff18;border:1px solid #ffffff45;border-radius:6px;padding:4px 10px;min-height:29px;font-size:12px}.header-link:hover{background:#ffffff30;text-decoration:none}.user-links>span{display:none}
#nav{grid-column:1;grid-row:2;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 24px;background:#fff;border:0;border-bottom:1px solid #d9e5ef;overflow:visible}
#nav>button{flex:0 1 auto;width:auto;margin:0;min-height:42px;padding:9px 16px;background:#edf4fc;border:1px solid #d8e6f5;color:#245d92;border-radius:8px;font-weight:700;box-shadow:0 2px 3px #284d7910}
#nav>button::before{display:none}#nav>button:hover{background:#deedfa;color:#174d7e}#nav>button.active{background:#17699f;color:#fff;border-color:#17699f;box-shadow:0 3px 9px #17699f25}
#nav>button.nav-group-toggle{gap:12px;background:#e8f5f0;color:#24694e;border-color:#c9e4d9}#nav>button.nav-group-toggle[aria-expanded=true]{background:#217c5c;color:#fff;border-color:#217c5c}
#nav .nav-home-link{flex:0 1 auto;width:auto!important;padding:8px 12px!important;margin:0!important;min-height:42px!important;border:1px solid #d8e6f5!important;border-radius:8px!important;background:#f4f7fb!important;color:#49647e!important}
.nav-submenu{order:2;flex:1 0 100%;margin:2px 0 0;padding:10px;background:#f3f7fb;border:1px solid #dfe9f3;border-radius:9px;box-shadow:none}.nav-submenu.open{display:flex;flex-wrap:wrap;gap:8px}
#nav .nav-submenu button{width:auto;min-height:38px;margin:0;padding:8px 14px;background:#fff;border:1px solid #dce6ef;color:#3d5874}#nav .nav-submenu button:before{display:none}#nav .nav-submenu button.active{background:#17699f;color:white;border-color:#17699f}
main{grid-column:1;grid-row:3;padding:24px 30px;background:linear-gradient(180deg,#eef4fa,#f6f8fb 320px)}
.page{max-width:1600px}.page-head{border-bottom:1px solid #dae5ef;padding-bottom:18px}.page-head h2{color:#173f72;font-size:25px}.panel{border-color:#dce6ef;box-shadow:0 4px 16px #24476506;border-radius:13px}.panel h3{color:#214b75}
.kpis>*{border-top-color:#3686bd;background:linear-gradient(145deg,#fff,#f6faff)}.kpis>:nth-child(2){border-top-color:#26957b}.kpis>:nth-child(3){border-top-color:#b58b36}.kpis>:nth-child(4){border-top-color:#8171b8}.kpis strong{color:#173f72}
button,.file-button{background:#eef4fa;border-color:#cbddec;color:#255b87;min-height:40px;font-weight:650}.primary{background:#197b58;border-color:#197b58;color:#fff}.primary:hover{background:#126547}
button.ui-print{background:#edf0fc;border-color:#d7dcf3;color:#54529a}button.ui-export,.file-button{background:#e7f5f2;border-color:#bcded5;color:#246e60}button.ui-edit{background:#fff5df;border-color:#e8d5a6;color:#876114}button.ui-danger{background:#fceeed;border-color:#ebc7c2;color:#a63d34}button.ui-print:hover{background:#dfe4f8}button.ui-export:hover,.file-button:hover{background:#d4ece5}button.ui-edit:hover{background:#f9e9c3}button.ui-danger:hover{background:#f8dcd8}
.form-row{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px 20px}.form-row>label{max-width:380px;width:100%;align-self:start}.form-row>button{justify-self:start;min-width:140px}.dialog-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 20px}.dialog-grid label{line-height:1.65}.dialog-grid label.ui-field-wide{grid-column:span 2}
input,select,textarea{border-color:#cbd9e6;border-radius:8px;min-width:0;max-width:100%;font-size:14px}input:focus,select:focus,textarea:focus{border-color:#3285b8;box-shadow:0 0 0 3px #3285b81a}.filters{align-items:flex-end;gap:12px}.filters>label,.payroll-tools>label{flex:0 1 230px}.filters label:has(input[type=month]),.filters label:has(input[type=date]){flex-basis:180px}.filters label:has(select){min-width:190px}.filters label:has(input[type=time]){flex-basis:145px}.filters>button{margin-bottom:0}.panel>.filters{padding-bottom:16px;border-bottom:1px solid #e3ebf2}
main th,dialog th{background:#eaf2f9;color:#28577e;font-size:13px}main td,dialog td{font-size:14px}main tbody tr:nth-child(even){background:#f8fbfe}main tbody tr:hover{background:#eff6fc}td button{white-space:nowrap}.report-summary{background:#edf4fb;border-color:#d3e3f2;color:#315e83}dialog{border-top-color:#237eb5;width:min(1040px,95vw)}dialog h3{color:#173f72}.dialog-actions{background:#fff}.table-wrap{background:#fff}.table-wrap:focus-visible{outline-color:#3285b8}
@media(max-width:1100px) and (min-width:761px){.app-shell{grid-template-columns:minmax(0,1fr)}#nav{padding:10px 18px;gap:6px}#nav>button{font-size:13px;padding:8px 12px}.form-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.app-shell{display:flex}.portal-header{min-height:90px}.header-link{font-size:10px;padding:3px 7px;min-height:26px}.mobile-nav-toggle{background:#17699f;color:#fff;border-color:#17699f;margin-bottom:6px}#nav{display:none;max-height:60dvh;overflow:auto;margin:6px 14px 10px;padding:10px;border:1px solid #d8e5ef}#nav.mobile-open{display:flex}#nav>button,#nav .nav-home-link{flex:1 1 135px;width:auto!important;justify-content:center}.nav-submenu{order:0}.nav-submenu.open{display:flex}#nav .nav-submenu button{flex:1 1 160px}main{padding:16px 14px 24px}.page-head h2{font-size:22px}.form-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.form-row>label{max-width:none}.dialog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.filters>label,.payroll-tools>label,.filters label:has(select){min-width:0;flex:1 1 155px}dialog{width:calc(100% - 20px)}.page-actions>*{flex:1 1 145px}.panel{padding:15px}.header-link:hover{color:#fff}}
@media(max-width:440px){.form-row,.dialog-grid{grid-template-columns:minmax(0,1fr)}.dialog-grid label.ui-field-wide{grid-column:auto}.form-row>button{width:100%;justify-self:stretch}.page-actions>*{flex:1 1 135px}}
}
@media screen{[hidden]{display:none!important}}
@media screen{.dialog-grid{row-gap:12px}.dialog-grid label{margin-bottom:4px}.form-row label{margin-bottom:6px}#nav>button.active:hover{background:#145d90;color:#fff}}
/* v89: compact responsive workspace and anchored dropdown navigation. */
@media screen{
.page{max-width:none;width:100%}main{padding:16px 20px}.page-head{padding-bottom:12px;margin-bottom:14px;gap:12px}.page-head h2{font-size:23px}.page-head p{margin-top:3px}.panel{padding:14px;margin-bottom:12px}.panel h3{margin-bottom:10px}.kpis{gap:12px;margin-bottom:14px}.kpis>*{padding:13px 16px}.kpis strong{font-size:26px}
.form-row{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px 14px}.form-row>label{max-width:none}.form-row label,.dialog-grid label{margin-bottom:3px;gap:4px}.dialog-grid{gap:10px 14px}input,select,textarea{min-height:38px;padding:7px 10px}textarea{min-height:66px}.filters{gap:10px;margin-bottom:10px}.panel>.filters{padding-bottom:10px}.report-summary{padding:9px 12px;margin:10px 0}main th,dialog th,main td,dialog td{padding:9px 11px}.dialog-actions{padding-top:12px;margin-top:12px}dialog{padding:18px 22px}dialog h3{padding-bottom:10px;margin-bottom:14px}#employeeSearch{margin-bottom:12px}#nav{padding-block:9px;gap:7px}
#nav .nav-submenu{position:fixed;z-index:1000;inset:auto;flex:none;order:0;width:280px;max-width:calc(100vw - 24px);margin:0;padding:8px;background:#fff;border:1px solid #d4e2ef;border-radius:14px;box-shadow:0 16px 40px #153c6b24;overflow-y:auto;overscroll-behavior:contain}
#nav .nav-submenu.open{display:flex;flex-direction:column;flex-wrap:nowrap;gap:2px;align-items:stretch}
#nav .nav-submenu button{flex:none;width:100%;min-height:43px;margin:0;padding:10px 16px;border:0;border-radius:8px;background:#fff;color:#173f72;font-size:15px;font-weight:650;text-align:right;justify-content:flex-start;white-space:normal}
#nav .nav-submenu button:hover{background:#edf5fc;color:#155c93}#nav .nav-submenu button.active{background:#e6f1fb;color:#145b90;box-shadow:inset -3px 0 #237eb5}
@media(min-width:1600px){main{padding-inline:24px}.form-row{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}
@media(max-width:760px){main{padding:12px}.panel{padding:12px}.form-row{grid-template-columns:repeat(2,minmax(0,1fr))}.page-head h2{font-size:21px}.kpis{gap:9px}.kpis>*{padding:12px}#nav .nav-submenu button{flex:none;min-height:44px}dialog{padding:16px}.page-actions{gap:7px}}
@media(max-width:440px){.form-row{grid-template-columns:minmax(0,1fr)}}
}
@media screen{
#employees table{table-layout:fixed;width:100%}#employees th,#employees td{white-space:normal;overflow-wrap:anywhere;padding:8px 6px;font-size:13px}
#employees th:nth-child(1){width:5%}#employees th:nth-child(2){width:19%}#employees th:nth-child(3){width:16%}#employees th:nth-child(4){width:8%}#employees th:nth-child(5){width:10%}#employees th:nth-child(6){width:7%}#employees th:nth-child(7){width:8%}#employees th:nth-child(8){width:9%}#employees th:nth-child(9){width:8%}#employees th:nth-child(10){width:10%}
#employees td button{min-width:0;padding:5px 7px;white-space:normal;margin:2px;font-size:12px}#employees .row-actions{display:flex;flex-wrap:wrap;gap:4px}#employees td small{display:block;overflow-wrap:anywhere}
.attendance-edit-row{background:#edf7ff!important}.attendance-edit-row input,.attendance-edit-row select{min-width:80px;width:100%;font-size:12px}.attendance-edit-row input[type=date]{min-width:135px}.attendance-edit-row input[type=time]{min-width:105px}.attendance-edit-row .row-actions{display:flex;gap:4px}
@media(max-width:760px){#employees table{min-width:850px}}
}

#nav .sidebar-brand{display:none}.portal-title-mobile{display:inline}.portal-title-desktop,.portal-subtitle{display:none}
/* Desktop attendance dashboard, based on the approved Hebron Land reference. */
@media screen and (min-width:1151px){
 :root{--ink:#173651;--muted:#6e8296;--navy:#103f73;--line:#dfe8ef;--green-2:#168d67}
 html,body{height:100%;overflow:hidden;background:#eef3f8}
 .app-shell{grid-template-columns:255px minmax(0,1fr);grid-template-rows:82px minmax(0,1fr);height:100dvh;min-height:0;overflow:hidden;background:#eef3f8}
 .portal-header{grid-column:2;grid-row:1;min-width:0;width:auto;height:82px;min-height:82px;margin:0;padding:7px 24px;gap:20px;grid-template-columns:minmax(230px,1fr) minmax(0,2fr);direction:ltr;background:linear-gradient(115deg,#0b5794 0%,#087cae 65%,#13a278 100%);border:0;box-shadow:none;position:relative;overflow:hidden}
 .portal-header:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(142deg,transparent 0 29%,#ffffff0d 29.1% 44%,transparent 44.1%),linear-gradient(155deg,transparent 0 55%,#ffffff0c 55.1% 72%,transparent 72.1%);}
 .portal-header h1{position:relative;z-index:1;justify-self:end;margin:0;text-align:right;color:#fff;font-size:22px;font-weight:800;line-height:1.35}.portal-title-desktop{display:inline}.portal-title-mobile{display:none}.portal-header .portal-subtitle{display:block;margin:2px 0 0;color:#fff;font-size:12px;font-weight:500;line-height:1.3;opacity:.86}
 .portal-header .brand{display:none}.user-box{position:relative;z-index:1;justify-self:start;align-items:flex-start;max-width:100%;font-size:12px;line-height:1.4}.user-links{gap:8px;margin:0 0 3px;flex-wrap:wrap}.header-link{font-size:12px;text-decoration:none;padding:4px 9px;border:1px solid #ffffff55;border-radius:8px;background:#ffffff16}.header-link:hover{background:#ffffff2b}.user-box strong{font-size:13px}
 #nav{grid-column:1;grid-row:1/-1;min-height:0;padding:0 14px 18px;background:linear-gradient(180deg,#073f79 0%,#06366e 68%,#064e83 100%);border:0;box-shadow:none;overscroll-behavior:contain}
 #nav .sidebar-brand{height:82px;display:flex;align-items:center;gap:10px;margin:0 -14px 16px;padding:7px 14px;background:#073b77;border-bottom:1px solid #ffffff18;color:#fff}
 .sidebar-brand img{display:block;width:43px;height:66px;object-fit:contain;flex:0 0 auto}.sidebar-brand div{display:flex;flex-direction:column;gap:2px;min-width:0}.sidebar-brand strong{font-size:13px;white-space:nowrap}.sidebar-brand small{font-size:11px;color:#c0d4e5;direction:ltr;text-align:right}
 #nav .nav-home-link{display:none!important}
 #nav>button:not(.nav-home-link){width:100%;min-height:52px;margin:5px 0;padding:8px 12px;display:flex;justify-content:flex-start;text-align:right;border:0;border-radius:8px;background:transparent;color:#e6f0f7;font-size:14px;font-weight:600;box-shadow:none}
 #nav>button:not(.nav-home-link):before{content:"";width:23px;min-width:23px;height:23px;margin:0 0 0 12px;border-radius:0;background:transparent;color:#d4e5f3;font-size:17px}
 #nav>button[data-page="dashboard"]:before{content:"⌂"}#nav>button[data-page="employees"]:before{content:"♙"}#nav>button.nav-group-toggle:before{content:"◷"}#nav>button:nth-of-type(5):before{content:"▥"}#nav>button:nth-of-type(6):before{content:"▦"}#nav>button:nth-of-type(7):before{content:"₪"}#nav>button[data-page="users"]:before{content:"♧"}#nav>button[data-page="backup"]:before{content:"▣"}
 #nav>button:not(.nav-home-link):hover{transform:none;background:#ffffff12;color:#fff}
 #nav>button:not(.nav-home-link).active{background:linear-gradient(100deg,#079d85,#21b276);color:#fff;box-shadow:none}
 #nav>button.nav-group-toggle:after{content:"⌄";margin-right:auto;color:#b8d3e2;font-size:14px}#nav>button.nav-group-toggle[aria-expanded="true"]:after{transform:rotate(180deg)}#nav>button.nav-group-toggle span{display:none}
 #nav .nav-submenu{margin:0 12px 6px 0;padding:4px 6px;border:0;border-right:1px solid #ffffff2b;border-radius:0;background:transparent;box-shadow:none}
 #nav .nav-submenu button{width:100%;min-height:36px;margin:1px 0;padding:6px 8px;background:transparent;color:#c8dbe7;font-size:12px;font-weight:500;box-shadow:none}
 #nav .nav-submenu button:before{content:"";width:5px;min-width:5px;height:5px;margin-left:9px;background:#8eb6c9;border-radius:50%}
 #nav .nav-submenu button:hover,#nav .nav-submenu button.active{background:#ffffff13;color:#fff;box-shadow:none}
 main{grid-column:2;grid-row:2;min-width:0;min-height:0;padding:20px 24px;background:#eef3f8;scrollbar-gutter:stable;overscroll-behavior:contain}
 .page.dashboard-page{max-width:none;width:100%;margin:0;padding:0}
 .dashboard-heading{display:none;align-items:center;justify-content:space-between;gap:16px;margin:0 0 17px}.dashboard-heading h2{margin:0;color:#123f73;font-size:24px;font-weight:800;line-height:1.35}.dashboard-heading p{margin:3px 0 0;color:#617c92;font-size:13px}.dashboard-date{padding:8px 13px;border:1px solid #d8e4ed;border-radius:8px;background:#fff;color:#3e5a70;font-size:12px;white-space:nowrap}
 .dashboard-kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 18px}.dashboard-kpi{min-height:150px;padding:17px 18px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;border:1px solid #e5ecf2;border-radius:11px;background:#fff;box-shadow:0 4px 11px #1136500d;direction:ltr}.dashboard-kpi-icon{width:68px;height:68px;display:grid;place-items:center;flex:0 0 68px;border-radius:50%;font-size:31px;font-weight:700}.dashboard-kpi-copy{display:flex;flex-direction:column;align-items:flex-end;min-width:0;text-align:right;direction:rtl}.dashboard-kpi-copy>span{color:#174368;font-size:14px;font-weight:800}.dashboard-kpi-copy strong{margin-top:1px;color:#173651;font-size:29px;line-height:1.25;font-variant-numeric:tabular-nums}.dashboard-kpi-copy small{margin-top:5px;color:#6e8296;font-size:11px}.dashboard-kpi-copy em{margin-top:5px;font-size:11px;font-style:normal}.dashboard-kpi.blue .dashboard-kpi-icon{background:#e8f2fc;color:#117abe}.dashboard-kpi.blue em{color:#1680bb}.dashboard-kpi.green .dashboard-kpi-icon{background:#e5f5ed;color:#169466}.dashboard-kpi.green em{color:#168d67}.dashboard-kpi.amber .dashboard-kpi-icon{background:#fff5df;color:#d79b00}.dashboard-kpi.amber em{color:#c38b00}.dashboard-kpi.red .dashboard-kpi-icon{background:#fdebea;color:#d94c42}.dashboard-kpi.red em{color:#d94c42}
 .dashboard-middle{display:grid;grid-template-columns:minmax(500px,2fr) minmax(250px,1fr);gap:16px;margin-bottom:18px;direction:rtl;align-items:stretch}.dashboard-card{min-width:0;padding:17px;border:1px solid #e4ebf1;border-radius:11px;background:#fff;box-shadow:0 4px 11px #1136500d}.dashboard-middle>.dashboard-card{min-height:280px}.dashboard-card h3{margin:0;color:#163f64;font-size:16px;font-weight:800}.dashboard-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.dashboard-card-head p{margin:4px 0 0;color:#8293a1;font-size:11px}.dashboard-week-chip{padding:5px 9px;border-radius:7px;background:#f2f6f9;color:#60778a;font-size:10px;white-space:nowrap}
.dashboard-online-card{margin-top:14px}.online-users-count{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:18px;background:#e5f5ed;color:#13845f;font-size:12px;font-weight:800;white-space:nowrap}.online-users-count:before{content:"";width:8px;height:8px;border-radius:50%;background:#15966c;box-shadow:0 0 0 3px #15966c20}.online-user-list{display:flex;flex-wrap:wrap;gap:9px;margin-top:15px}.online-user-item{min-width:180px;flex:1 1 180px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 13px;border:1px solid #e5edf3;border-radius:9px;background:#f9fbfd}.online-user-copy{min-width:0;display:flex;flex-direction:column;gap:4px}.online-user-copy strong{overflow:hidden;color:#173f67;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.online-user-copy small{color:#71869a;font-size:10px}.online-user-role{padding:4px 8px;border-radius:12px;background:#eaf2f9;color:#426782;font-size:10px;white-space:nowrap}.online-users-empty{padding:8px;color:#8293a1;font-size:12px}
 .dashboard-clock-icon{width:51px;height:51px;display:grid;place-items:center;margin:0 auto 7px;border:3px solid #147db5;border-radius:50%;color:#147db5;font-size:31px;line-height:1}.dashboard-quick-card{text-align:center}.dashboard-quick-card h3{font-size:14px}.dashboard-quick-card>strong{display:block;margin:4px 0;color:#173f73;font-size:30px;font-variant-numeric:tabular-nums;line-height:1.2}.dashboard-quick-card>p{margin:0 0 11px;color:#71869a;font-size:11px}.dashboard-quick-card>button{width:100%;min-height:38px;margin:0 0 7px;border-radius:7px;font-size:13px}.dashboard-quick-card .dashboard-checkin{border-color:#159c69;background:#159c69;color:#fff}.dashboard-quick-card .dashboard-checkin:hover{background:#108657}.dashboard-quick-card .dashboard-checkout{border-color:#1880b8;background:#fff;color:#1176a9}.dashboard-quick-card .dashboard-requests-link{min-height:25px;margin:0;padding:3px;border:0;background:transparent;color:#c18117;font-size:11px}.dashboard-requests-link b{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-right:4px;padding:0 5px;border-radius:10px;background:#fff3dc;color:#a86d0d}
 .dashboard-ratio-card h3{text-align:right}.ratio-content{display:flex;align-items:center;justify-content:center;gap:18px;height:214px}.ratio-ring{width:175px;height:175px;position:relative;flex:0 0 175px}.ratio-ring svg{width:100%;height:100%}.ratio-ring circle{fill:none;stroke-width:17}.ratio-ring .ratio-track{stroke:#e9eff3}.ratio-ring .ratio-progress{stroke:#15966c;stroke-linecap:round}.ratio-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.ratio-center strong{color:#153f67;font-size:26px;line-height:1.15}.ratio-center span{margin-top:5px;color:#73879a;font-size:11px}.ratio-legend{min-width:76px;display:flex;flex-direction:column;gap:15px}.ratio-legend>div{display:grid;grid-template-columns:9px minmax(35px,1fr) 25px;align-items:center;gap:6px;color:#536d81;font-size:11px}.ratio-legend i,.chart-legend i{width:8px;height:8px;border-radius:50%;display:inline-block}.ratio-legend i.present,.chart-legend i.present{background:#15966c}.ratio-legend i.late,.chart-legend i.late{background:#e6a900}.ratio-legend i.absent,.chart-legend i.absent{background:#df4e42}.ratio-legend i.leave{background:#7455ba}.ratio-legend b{color:#173651;font-variant-numeric:tabular-nums}
 .dashboard-chart{margin-top:9px}.chart-legend{height:23px;display:flex;align-items:center;justify-content:flex-start;gap:18px;padding-right:42px;color:#63798b;font-size:10px}.chart-legend span{display:flex;align-items:center;gap:6px}.dashboard-chart svg{display:block;width:100%;height:194px;overflow:visible}.chart-grid line{stroke:#e9eef3;stroke-width:1}.chart-y-labels,.chart-x-labels{fill:#74889a;font-family:Arial,Tahoma,sans-serif;font-size:10px}.chart-x-labels{text-anchor:middle}
 .dashboard-bottom{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;direction:rtl;align-items:stretch}.dashboard-bottom>.dashboard-card{min-height:362px}.dashboard-view-all{min-height:31px;white-space:nowrap}.dashboard-attendance-list .dashboard-card-head{margin-bottom:13px}.dashboard-attendance-list .table-wrap{border:0;border-radius:0;overflow:auto}.dashboard-attendance-list table{width:100%;min-width:720px;table-layout:auto}.dashboard-attendance-list th,.dashboard-attendance-list td{padding:10px 8px;text-align:right;font-size:11px}.dashboard-attendance-list th{background:#eff4f8;color:#536e82}.dashboard-attendance-list td[dir="ltr"]{text-align:center}.dashboard-status{display:inline-flex;align-items:center;justify-content:center;min-width:55px;padding:4px 8px;border-radius:13px;font-size:10px;font-weight:700}.dashboard-status.present,.dashboard-status.done{background:#e5f4ec;color:#15865f}.dashboard-status.late{background:#fff4db;color:#b57d00}.dashboard-status.absent{background:#fde9e8;color:#c7463c}.dashboard-status.leave{background:#eaf2f9;color:#436d8d}.dashboard-empty{text-align:center!important;color:#8797a4!important;padding:32px!important}.dashboard-alerts:empty{display:none}.dashboard-alerts{display:flex;gap:10px;margin-top:14px;color:#72580d;font-size:12px}.dashboard-alerts>div{padding:9px 13px;border:1px solid #f0e0b4;border-radius:8px;background:#fff9e9}.dashboard-alerts button{min-height:auto;padding:0;border:0;background:transparent;color:#126f9d;text-decoration:underline;font-size:12px}
}

/* v120: branded sidebar masthead. */
@media screen and (min-width:1151px){
 #nav .sidebar-brand{position:relative;height:96px;display:flex;align-items:center;gap:13px;margin:0 -14px 15px;padding:11px 15px;background:linear-gradient(118deg,#07528f 0%,#087eaa 58%,#139b75 100%);border:0;border-bottom:3px solid #27ad80;color:#fff;box-shadow:0 7px 20px #032b552b}
 #nav .sidebar-brand img{width:58px;height:68px;padding:3px;object-fit:contain;border:1px solid #ffffff4a;border-radius:12px;background:#ffffff12;filter:drop-shadow(0 2px 4px #002a4e30)}
 #nav .sidebar-brand div{display:flex;flex-direction:column;gap:4px;min-width:0}
 #nav .sidebar-brand strong{font-size:13px;font-weight:800;letter-spacing:.1px;white-space:normal;line-height:1.5}
 #nav .sidebar-brand small{color:#d3f1e6;font-size:10px;letter-spacing:.4px;direction:ltr;text-align:right}
}
@media screen and (min-width:761px) and (max-width:1150px){.dashboard-middle{grid-template-columns:1fr}.dashboard-week-card{grid-column:auto}.dashboard-bottom{grid-template-columns:1fr}.dashboard-bottom>.dashboard-card{min-height:unset}.dashboard-employee-summary{order:0}.dashboard-attendance-list{order:1}}

/* v116: remove quick attendance widget and keep sidebar submenus in normal flow. */
@media screen and (min-width:1151px){
 #nav{display:block;height:100dvh;overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable}
 #nav .sidebar-brand{height:76px;margin-bottom:8px}
 #nav>button:not(.nav-home-link){min-height:44px;margin:3px 0;padding:7px 10px;line-height:1.4;white-space:normal}
 #nav .nav-submenu{position:static;width:auto;min-height:0;max-height:none;height:auto;margin:0 12px 5px 0;padding:3px 6px;overflow:visible}
 #nav .nav-submenu.open{display:block!important;position:static;height:auto!important;min-height:0;max-height:none;overflow:visible;z-index:auto}
 #nav .nav-submenu button{position:static;display:flex;min-height:33px;height:auto;line-height:1.4;white-space:normal;overflow-wrap:anywhere}
 main{padding:14px 18px}
 .dashboard-kpis{gap:11px;margin-bottom:13px}.dashboard-kpi{min-height:132px;padding:14px 15px}
 .dashboard-middle{gap:12px;margin-bottom:13px}.dashboard-middle>.dashboard-card{min-height:260px;padding:14px}
 .dashboard-bottom{gap:12px}.dashboard-bottom>.dashboard-card{min-height:340px;padding:14px}
}

@media screen and (min-width:1151px){#nav .sidebar-brand{height:96px;margin-bottom:15px}}

/* v128: desktop sidebar branded like the supplied reference. */
@media screen and (min-width:1151px){
 #nav{padding:0 12px 18px;background:#0b3d76;border:0;box-shadow:none}
 #nav .sidebar-brand{height:104px;display:flex;align-items:center;gap:10px;margin:0 -12px 15px;padding:10px 14px;background:#0a3c75;border-bottom:1px solid #ffffff1c;box-shadow:none}
 #nav .sidebar-brand img{width:55px;height:58px;flex:0 0 55px;padding:0;object-fit:contain;border:0;border-radius:0;background:transparent;filter:none}
 #nav .sidebar-brand div{display:flex;flex:1;flex-direction:column;gap:3px;min-width:0;text-align:right}
 #nav .sidebar-brand strong{color:#f5f9fc;font-size:12px;font-weight:800;line-height:1.5;white-space:normal}
 #nav .sidebar-brand small{color:#d2e1ef;font-size:10px;direction:ltr;text-align:right}
 #nav .desktop-sidebar-toggle{width:36px;min-width:36px;height:36px;min-height:36px;margin:0 0 0 auto;padding:0;border:0;border-radius:8px;background:transparent;color:#f1f7fb;font-size:21px;box-shadow:none}
 #nav .desktop-sidebar-toggle:hover{background:#ffffff17;color:white}
 #nav>button:not(.nav-home-link){min-height:60px;margin:6px 0;padding:9px 12px;gap:0;border:0;border-radius:8px;background:transparent;color:#edf4fa;font-size:14px;font-weight:600;box-shadow:none}
 #nav>button:not(.nav-home-link):before{width:30px;min-width:30px;height:30px;margin:0 0 0 12px;border-radius:0;background:transparent;color:#d7e7f5;font-size:22px;line-height:1}
 #nav>button[data-page="dashboard"]:before{content:"⌂";font-size:26px}
 #nav>button[data-page="employees"]:before{content:"♙";font-size:25px}
 #nav>#navAttendanceToggle:before{content:"◷";font-size:25px}
 #nav>#navReportsToggle:before{content:"▥";font-size:24px}
 #nav>#navSettingsToggle:before{content:"⚙";font-size:23px}
 #nav>#navLeavesToggle,#nav>#navLeavesToggle+.nav-submenu,
 #nav>#navPayrollToggle,#nav>#navPayrollToggle+.nav-submenu,
 #nav>button[data-page="users"],#nav>button[data-page="backup"]{display:none!important}
 #nav>button.nav-group-toggle[aria-expanded="true"]{color:#fff;background:#ffffff10}
 #nav>button:not(.nav-home-link):hover{background:#ffffff12;color:#fff}
 #nav>button[data-page="dashboard"].active{background:linear-gradient(105deg,#087fc1 0%,#2dbd66 100%);color:white;box-shadow:0 5px 13px #031e4130}
 #nav>button.active:not([data-page="dashboard"]){color:#fff;background:#ffffff12}
 #nav>button.nav-group-toggle:after{color:#c5dceb}
 #nav .nav-submenu{border-color:#ffffff2b}
 #nav .nav-submenu button{min-height:39px;color:#d1e1ee;font-size:12px}
 #nav .nav-submenu button:before{background:#71a6c5}
 .app-shell.sidebar-collapsed{grid-template-columns:78px minmax(0,1fr)}
 .app-shell.sidebar-collapsed #nav{padding-right:8px;padding-left:8px}
 .app-shell.sidebar-collapsed #nav .sidebar-brand{justify-content:center;height:84px;margin-right:-8px;margin-left:-8px;padding:7px;gap:2px;flex-wrap:wrap}
 .app-shell.sidebar-collapsed #nav .sidebar-brand img{width:43px;height:43px;flex-basis:43px}
 .app-shell.sidebar-collapsed #nav .sidebar-brand div{display:none}
 .app-shell.sidebar-collapsed #nav .desktop-sidebar-toggle{width:30px;min-width:30px;height:28px;min-height:28px;margin:0;padding:0;font-size:18px}
 .app-shell.sidebar-collapsed #nav>button:not(.nav-home-link){justify-content:center;padding:8px 3px;font-size:0}
 .app-shell.sidebar-collapsed #nav>button:not(.nav-home-link):before{margin:0;font-size:24px}
 .app-shell.sidebar-collapsed #nav>button.nav-group-toggle:after{display:none}
 .app-shell.sidebar-collapsed #nav .nav-submenu{position:fixed!important;z-index:1000;width:280px!important;max-width:calc(100vw - 100px);margin:0;padding:8px;background:#0b3d76;border:1px solid #ffffff2b;border-radius:10px;box-shadow:0 12px 30px #08274a55}
 .app-shell.sidebar-collapsed #nav .nav-submenu.open{display:flex!important;flex-direction:column;gap:3px}
 .app-shell.sidebar-collapsed #nav .nav-submenu button{justify-content:flex-start;font-size:12px}
}
@media screen and (min-width:761px) and (max-width:1150px){#nav>#navSettingsToggle,#nav>#navSettingsToggle+.nav-submenu{display:none!important}}

/* v129: replace the desktop sidebar with the horizontal navigation reference. */
@media screen and (min-width:1151px){
 .app-shell{grid-template-columns:minmax(0,1fr);grid-template-rows:114px 84px minmax(0,1fr);height:100dvh;min-height:0;overflow:hidden}
 .portal-header{grid-column:1;grid-row:1;height:114px;min-height:114px;padding:8px 24px;gap:14px;grid-template-columns:minmax(240px,1fr) minmax(0,2fr) 100px;direction:ltr;background:#176fa5;border-bottom:1px solid #105788;box-shadow:none}
 .portal-header .user-box{grid-column:1;grid-row:1;justify-self:start;align-self:center;direction:ltr;align-items:flex-start;font-size:14px;line-height:1.35}
 .portal-header h1{grid-column:2;grid-row:1;justify-self:center;text-align:center;font-size:30px;font-weight:700;white-space:nowrap}
 .portal-header .brand{display:block;grid-column:3;grid-row:1;justify-self:end;align-self:center;position:relative;z-index:1}
 .portal-header .brand img{width:72px;height:88px;object-fit:contain}
 .user-links{gap:10px;margin:0 0 5px;flex-wrap:wrap}
 .header-link{font-size:14px;padding:6px 12px;min-height:36px}
 #nav{grid-column:1;grid-row:2;display:flex!important;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:10px;width:100%;height:84px;min-height:84px;margin:0;padding:10px 24px;background:#fff;border:0;border-bottom:1px solid #dce6ee;box-shadow:none;overflow:visible;overscroll-behavior:visible}
 #nav .sidebar-brand{display:none!important}
 #nav .desktop-sidebar-toggle{display:none!important}
 #nav .nav-home-link{display:inline-flex!important;flex:0 1 auto;width:auto!important;min-height:64px!important;margin:0!important;padding:10px 16px!important;align-items:center;justify-content:center;border:1px solid #dbe6f0!important;border-radius:11px!important;background:#f4f7fa!important;color:#58728d!important;font-size:16px!important;font-weight:700;white-space:nowrap}
 #nav>button:not(.nav-home-link){display:inline-flex!important;flex:0 1 auto;width:auto;min-width:0;min-height:64px;margin:0;padding:10px 16px;align-items:center;justify-content:center;gap:9px;border:1px solid #d4e3f1;border-radius:11px;background:#edf4fc;color:#235e91;font-size:17px;font-weight:700;line-height:1.3;white-space:nowrap;box-shadow:0 2px 5px #183b5910}
 #nav>button:not(.nav-home-link):before{display:none!important;content:none!important}
 #nav>button.nav-group-toggle{background:#eaf5f1;color:#17684d;border-color:#cce4da}
 #nav>button.nav-group-toggle:after{content:"›";display:inline-block;margin:0 0 0 2px;color:currentColor;font-size:22px;line-height:1;transform:none}
 #nav>button.nav-group-toggle[aria-expanded="true"]{background:#d9eee6;color:#145c45;border-color:#b8ddce}
 #nav>button.nav-group-toggle span{display:none!important}
 #nav>button[data-page="dashboard"].active{background:#edf4fc;color:#235e91;border-color:#d4e3f1;box-shadow:0 2px 5px #183b5910}
 #nav>button.active:not([data-page="dashboard"]){background:#e2f1eb;color:#17684d;border-color:#c4e2d5}
 #nav>button:not(.nav-home-link):hover{background:#deebf7;color:#174d7e;transform:translateY(-1px)}
 #nav>button.nav-group-toggle:hover{background:#def0e8;color:#145c45}
 #nav>#navLeavesToggle,#nav>#navPayrollToggle,#nav>button[data-page="users"],#nav>button[data-page="backup"]{display:inline-flex!important}
 #nav>#navLeavesToggle+.nav-submenu,#nav>#navPayrollToggle+.nav-submenu{display:none!important}
 #nav>#navLeavesToggle+.nav-submenu.open,#nav>#navPayrollToggle+.nav-submenu.open{display:flex!important}
 #nav>#navSettingsToggle,#nav>#navSettingsToggle+.nav-submenu{display:none!important}
 #nav .nav-submenu{position:fixed;z-index:1000;inset:auto;flex:none;width:280px;max-width:calc(100vw - 24px);max-height:70vh;margin:0;padding:8px;background:#fff;border:1px solid #d4e2ef;border-radius:12px;box-shadow:0 16px 40px #153c6b24;overflow-y:auto;overscroll-behavior:contain}
 #nav .nav-submenu.open{display:flex!important;flex-direction:column;flex-wrap:nowrap;gap:2px;align-items:stretch}
 #nav .nav-submenu button{display:flex;flex:none;width:100%;min-height:42px;margin:0;padding:9px 14px;justify-content:flex-start;border:0;border-radius:8px;background:#fff;color:#173f72;font-size:14px;font-weight:600;text-align:right;white-space:normal}
 #nav .nav-submenu button:before{display:none!important}
 #nav .nav-submenu button:hover,#nav .nav-submenu button.active{background:#edf5fc;color:#155c93}
 main{grid-column:1;grid-row:3;min-width:0;min-height:0;padding:18px 24px;overflow:auto}
}
@media screen and (min-width:1151px) and (max-width:1490px){
 #nav{justify-content:flex-start;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
 #nav>button:not(.nav-home-link){flex:0 0 auto}
 #nav>.nav-home-link{flex:0 0 auto}
}

/* v130: blue navigation strip with distinctive colored section buttons. */
@media screen and (min-width:1151px){
 #nav{height:94px;min-height:94px;padding:12px 24px;background:linear-gradient(105deg,#075493 0%,#0878b2 58%,#126ca5 100%);border-bottom:3px solid #064c80;gap:10px}
 #nav>.nav-home-link{min-height:60px!important;background:#fff!important;border-color:#d8e7f4!important;color:#153e68!important}
 #nav>button:not(.nav-home-link){min-height:60px;padding:9px 15px;color:#fff;border-color:transparent;box-shadow:0 4px 10px #062a4b25}
 #nav>button[data-page="dashboard"]{background:#194c82;border-color:#2c689f}
 #nav>button[data-page="employees"]{background:#1178bd;border-color:#2790cf}
 #nav>#navAttendanceToggle{background:#087f9d;border-color:#1593b0}
 #nav>#navReportsToggle{background:#0d659f;border-color:#207db8}
 #nav>#navLeavesToggle{background:#5f4bc1;border-color:#7867d2}
 #nav>#navPayrollToggle{background:#18709d;border-color:#2783b0}
 #nav>button[data-page="users"]{background:#2678b6;border-color:#3989c7}
 #nav>button[data-page="backup"]{background:#155b91;border-color:#2972a8}
 #nav>button[data-page="dashboard"].active,#nav>button.active:not(.nav-home-link){color:#fff}
 #nav>button[data-page="dashboard"].active{background:#194c82;border-color:#2c689f;box-shadow:0 4px 10px #062a4b25}
 #nav>button.nav-group-toggle:after{color:#dceeff}
 #nav>button:not(.nav-home-link):hover{filter:brightness(1.12);color:#fff;transform:translateY(-1px)}
 #nav>button.nav-group-toggle[aria-expanded="true"]{filter:brightness(1.12);color:#fff}
}

/* v131: carry the blue navigation palette into the compact phone menu too. */
@media screen and (max-width:760px){
 #nav.mobile-open{background:linear-gradient(150deg,#075493,#0878b2);border:1px solid #0a5f97;border-radius:14px;box-shadow:0 8px 24px #073b6330}
 #nav.mobile-open>button:not(.nav-home-link){min-height:48px;border-radius:10px;color:#fff;box-shadow:0 3px 9px #062a4b28}
 #nav.mobile-open>.nav-home-link{background:#fff!important;color:#153e68!important}
 #nav.mobile-open>button[data-page="dashboard"]{background:#194c82;border-color:#2c689f}
 #nav.mobile-open>button[data-page="employees"]{background:#1178bd;border-color:#2790cf}
 #nav.mobile-open>#navAttendanceToggle{background:#087f9d;border-color:#1593b0}
 #nav.mobile-open>#navReportsToggle{background:#0d659f;border-color:#207db8}
 #nav.mobile-open>#navLeavesToggle{background:#5f4bc1;border-color:#7867d2}
 #nav.mobile-open>#navPayrollToggle{background:#18709d;border-color:#2783b0}
 #nav.mobile-open>button[data-page="users"]{background:#2678b6;border-color:#3989c7}
 #nav.mobile-open>button[data-page="backup"]{background:#155b91;border-color:#2972a8}
 #nav.mobile-open>button.nav-group-toggle[aria-expanded="true"]{filter:brightness(1.12)}
 #nav.mobile-open .nav-submenu{background:#fff;border-color:#d4e2ef}
 #nav.mobile-open .nav-submenu button{background:#fff;color:#173f72}
 #nav.mobile-open .nav-submenu button.active{background:#e7f2fc;color:#155c93}
}

/* v132: keep dropdowns out of the navigation flow and tighten the desktop shell. */
@media screen and (min-width:1151px){
 .app-shell{grid-template-rows:102px 74px minmax(0,1fr)}
 .portal-header{height:102px;min-height:102px;padding:6px 22px}
 .portal-header h1{font-size:27px}
 #nav{height:74px;min-height:74px;padding:8px 18px;gap:8px}
 #nav>.nav-home-link{display:none!important}
 #nav>button:not(.nav-home-link){min-height:52px;padding:7px 12px;font-size:15px;border-radius:9px}
 #nav .nav-submenu{position:fixed!important;display:none!important;inset:auto;max-height:min(65vh,520px);height:auto!important;min-height:0!important;margin:0;padding:7px;overflow-y:auto}
 #nav .nav-submenu.open{position:fixed!important;display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;height:auto!important;min-height:0!important;max-height:min(65vh,520px)!important;overflow-y:auto!important;z-index:1200}
 #nav .nav-submenu button{position:static!important;display:flex!important;flex:none!important;width:100%!important;min-height:40px;height:auto!important;margin:0;padding:8px 12px;white-space:normal}
 main{padding:12px 18px}
}
@media screen and (max-width:760px){#nav .nav-home-link{display:none!important}}

/* v134: adapt the computer layout to laptop and large monitor widths. */
@media screen and (min-width:1491px){
 main{padding:clamp(14px,1.25vw,28px) clamp(18px,1.6vw,36px)}
 .page{max-width:1900px}
 .portal-header{padding-inline:clamp(20px,1.6vw,34px)}
 #nav{padding-inline:clamp(18px,1.5vw,32px)}
 .kpis{gap:clamp(12px,1vw,20px)}
}
@media screen and (min-width:1151px) and (max-width:1490px){
 .app-shell{grid-template-rows:clamp(82px,7vw,102px) auto minmax(0,1fr)}
 .portal-header{height:auto;min-height:clamp(82px,7vw,102px);padding:6px clamp(14px,1.5vw,22px);gap:10px;grid-template-columns:minmax(190px,1fr) minmax(0,2fr) 76px}
 .portal-header h1{font-size:clamp(20px,1.8vw,27px)}
 .portal-header .brand img{width:clamp(54px,5vw,72px);height:clamp(62px,6vw,88px)}
 .header-link{font-size:clamp(11px,.95vw,14px);padding:5px 9px}
 #nav{height:auto;min-height:68px;flex-wrap:wrap;justify-content:center;gap:7px;padding:8px 14px;overflow:visible}
 #nav>button:not(.nav-home-link){flex:1 1 100px;min-width:92px;min-height:48px;padding:6px 8px;font-size:clamp(12px,1vw,15px);white-space:normal;line-height:1.2}
 #nav .nav-home-link{display:none!important}
 #nav .nav-submenu{position:fixed!important;display:none!important;inset:auto;max-height:min(65vh,520px);height:auto!important;min-height:0!important;margin:0;padding:7px;overflow-y:auto}
 #nav .nav-submenu.open{position:fixed!important;display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;height:auto!important;min-height:0!important;max-height:min(65vh,520px)!important;overflow-y:auto!important;z-index:1200}
 #nav .nav-submenu button{display:flex!important;flex:none!important;width:100%!important;min-height:40px;height:auto!important;margin:0;padding:8px 12px}
 main{padding:clamp(10px,1vw,16px) clamp(12px,1.3vw,20px)}
 .kpis{gap:clamp(8px,.85vw,12px)}
 .dashboard-middle,.dashboard-bottom{gap:clamp(8px,.85vw,12px)}
}
@media screen and (min-width:761px) and (max-width:1150px){
 .app-shell{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);height:100dvh;min-height:0;overflow:hidden}
 .portal-header{grid-column:1;grid-row:1;min-height:clamp(76px,9vw,98px);padding:7px clamp(12px,2vw,22px);gap:10px;grid-template-columns:minmax(165px,1fr) minmax(0,2fr) 64px}
 .portal-header h1{font-size:clamp(17px,2vw,23px);line-height:1.25}
 .portal-header .brand img{width:clamp(44px,6vw,62px);height:clamp(48px,7vw,68px)}
 .user-box{font-size:11px}.user-links{gap:5px}.header-link{font-size:10px;padding:4px 6px;min-height:30px}
 #nav{grid-column:1;grid-row:2;display:flex!important;flex-wrap:wrap;justify-content:center;align-content:center;gap:6px;min-height:0;height:auto;margin:0;padding:8px 12px;background:linear-gradient(105deg,#075493,#0878b2 58%,#126ca5);border-bottom:3px solid #064c80;overflow:visible}
 #nav .nav-home-link{display:none!important}
 #nav>button:not(.nav-home-link){flex:1 1 115px;min-width:100px;min-height:45px;padding:6px 8px;border-radius:9px;color:#fff;font-size:clamp(12px,1.35vw,15px);white-space:normal;line-height:1.2}
 #nav>button[data-page="dashboard"]{background:#194c82;border-color:#2c689f}
 #nav>button[data-page="employees"]{background:#1178bd;border-color:#2790cf}
 #nav>#navAttendanceToggle{background:#087f9d;border-color:#1593b0}
 #nav>#navReportsToggle{background:#0d659f;border-color:#207db8}
 #nav>#navLeavesToggle{background:#5f4bc1;border-color:#7867d2}
 #nav>#navPayrollToggle{background:#18709d;border-color:#2783b0}
 #nav>button[data-page="users"]{background:#2678b6;border-color:#3989c7}
 #nav>button[data-page="backup"]{background:#155b91;border-color:#2972a8}
 #nav .nav-submenu{position:fixed!important;display:none!important;inset:auto;max-height:min(65vh,520px);height:auto!important;min-height:0!important;margin:0;padding:7px;overflow-y:auto}
 #nav .nav-submenu.open{position:fixed!important;display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;height:auto!important;min-height:0!important;max-height:min(65vh,520px)!important;overflow-y:auto!important;z-index:1200}
 #nav .nav-submenu button{display:flex!important;flex:none!important;width:100%!important;min-height:40px;height:auto!important;margin:0;padding:8px 12px}
 main{grid-column:1;grid-row:3;min-height:0;padding:12px 14px;overflow:auto}
 .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:11px}
 .dashboard-middle{grid-template-columns:minmax(0,1.5fr) minmax(250px,1fr);gap:10px;margin-bottom:11px}
 .dashboard-bottom{grid-template-columns:minmax(0,1fr);gap:10px}
 .dashboard-bottom>.dashboard-card{min-height:unset}
 .page-head{gap:10px;margin-bottom:11px}
 .panel{padding:12px;margin-bottom:10px}
 .table-wrap{max-width:100%;overflow-x:auto}
}
@media screen and (min-width:761px) and (max-width:900px){
 .portal-header{grid-template-columns:minmax(140px,1fr) minmax(0,1.4fr) 52px}
 .portal-header h1{font-size:17px}
 .portal-header .brand img{width:46px;height:50px}
 .dashboard-middle{grid-template-columns:minmax(0,1fr)}
 .dashboard-ratio-card{grid-row:auto}
 .form-row{grid-template-columns:repeat(2,minmax(0,1fr))}
 .dialog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* v136: let recent attendance take the weekly chart's dashboard space. */
@media screen and (min-width:1151px){
 #dashboard .dashboard-middle{grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:clamp(10px,1vw,16px);margin-bottom:10px;align-items:stretch}
 #dashboard .dashboard-middle>.dashboard-attendance-list{display:flex;flex-direction:column;min-height:clamp(320px,calc(100dvh - 460px),560px);padding:clamp(12px,1.1vw,18px)}
 #dashboard .dashboard-middle>.dashboard-ratio-card{min-height:clamp(280px,calc(100dvh - 500px),520px)}
 #dashboard .dashboard-attendance-list .dashboard-card-head{align-items:center;margin-bottom:8px}
 #dashboard .dashboard-attendance-list .table-wrap{flex:1;min-height:0;max-height:calc(100dvh - 540px);overflow:auto}
 #dashboard .dashboard-attendance-list table{min-width:680px}
 #dashboard .dashboard-attendance-list th,#dashboard .dashboard-attendance-list td{padding:clamp(6px,.65vw,10px) clamp(5px,.55vw,8px)}
 #dashboard .dashboard-ratio-card .ratio-content{height:calc(100% - 28px);min-height:220px}
}
@media screen and (min-width:761px) and (max-width:1150px){
 #dashboard .dashboard-middle>.dashboard-attendance-list{min-height:340px}
 #dashboard .dashboard-attendance-list .table-wrap{max-height:48vh;overflow:auto}
}
@media screen and (min-width:761px) and (max-height:850px){
 #dashboard .dashboard-heading{margin-bottom:8px}
 #dashboard .dashboard-kpis{margin-bottom:9px}
 #dashboard .dashboard-kpi{min-height:100px;padding:10px 12px}
 #dashboard .dashboard-kpi-icon{width:42px;height:42px;font-size:24px}
 #dashboard .dashboard-kpi-copy strong{font-size:24px}
 #dashboard .dashboard-middle>.dashboard-attendance-list{min-height:clamp(280px,calc(100dvh - 430px),390px)}
 #dashboard .dashboard-middle>.dashboard-ratio-card{min-height:280px;padding:12px}
 #dashboard .dashboard-ratio-card .ratio-content{min-height:210px}
 #dashboard .dashboard-attendance-list th,#dashboard .dashboard-attendance-list td{padding:5px 6px}
 main{padding-top:8px!important;padding-bottom:8px!important}
}


/* v143: clickable attendance coordinates for Google Maps. */
.attendance-map-links{display:inline-flex;flex-wrap:nowrap;vertical-align:middle;align-items:center;gap:4px;margin:0 6px;direction:ltr;white-space:nowrap}
.attendance-map-link{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:25px;padding:3px 8px;border:1px solid #c9e0f1;border-radius:7px;background:#f1f8fd;color:#0877b8;font-size:11px;font-weight:750;line-height:1;text-decoration:none;white-space:nowrap}
.attendance-map-link svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.attendance-map-link:hover{border-color:#0877b8;background:#e7f3fb;color:#075f95}
.attendance-map-link.attendance-map-icon-only{width:25px;min-width:25px;height:25px;min-height:25px;padding:4px;border-radius:50%;gap:0}
.attendance-map-link.attendance-map-icon-only svg{width:15px;height:15px}
.employee-geo-toggle{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid #dce8f2;border-radius:9px;background:#f7fafc}
.employee-geo-toggle input{width:18px;height:18px;min-height:18px;flex:0 0 18px;padding:0;accent-color:#0877b8}
.required-password-dialog{width:min(460px,calc(100% - 28px));padding:26px;border:1px solid #d7e4ef;border-radius:18px;box-shadow:0 24px 70px #0b294244;color:#173d5c}
.required-password-dialog::backdrop{background:#0b2942b8;backdrop-filter:blur(3px)}
.required-password-dialog form{display:grid;gap:12px}
.required-password-dialog h2{margin:0;color:#0e5484;font-size:22px}
.required-password-dialog p{margin:0 0 5px;color:#60758a;line-height:1.7}
.required-password-dialog label{font-weight:700}
.required-password-dialog input{width:100%;min-height:44px;padding:9px 12px;border:1px solid #cbd9e5;border-radius:9px}
.required-password-dialog .dialog-actions{display:flex;justify-content:space-between;gap:10px;margin-top:7px}
.dashboard-kpi.violet .dashboard-kpi-icon{background:#f0ebfc;color:#7455ba}
.dashboard-kpi.violet .dashboard-kpi-copy em{color:#7455ba}
@media screen and (min-width:1151px){#dashboard .dashboard-kpis{grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(7px,.7vw,12px)}#dashboard .dashboard-kpi{gap:7px;padding-inline:9px}#dashboard .dashboard-kpi-icon{width:40px;height:40px;flex-basis:40px}#dashboard .dashboard-kpi-copy>span{font-size:12px}#dashboard .dashboard-kpi-copy strong{font-size:22px}}
.attendance-row-actions{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.attendance-row-actions{flex-wrap:nowrap;justify-content:center;white-space:nowrap}
.attendance-row-actions>button{flex:0 0 auto;min-width:0;min-height:30px;padding:4px 9px;font-size:12px;white-space:nowrap}
.attendance-row-actions .attendance-overtime-toggle{min-height:30px;padding:5px 8px;border:1px solid #edc7c3;border-radius:7px;background:#fff3f1;color:#b42318;font-size:11px;font-weight:750;white-space:nowrap}
.attendance-row-actions .attendance-overtime-toggle:hover{background:#ffe7e4}
.attendance-row-actions .attendance-overtime-toggle.is-cancelled{border-color:#c8dced;background:#eef6fc;color:#1c6798}
/* v145: enlarge dashboard attendance list and improve row readability. */
@media screen and (min-width:1151px){
 #dashboard .dashboard-middle>.dashboard-attendance-list{min-height:clamp(400px,calc(100dvh - 290px),760px)!important}
 #dashboard .dashboard-attendance-list .table-wrap{display:block;flex:1 1 auto;min-height:280px!important;height:auto!important;max-height:none!important;overflow:auto!important}
 #dashboard .dashboard-attendance-list th,#dashboard .dashboard-attendance-list td{padding:11px 10px!important;font-size:13px!important;line-height:1.6}
 #dashboard .dashboard-attendance-list .dashboard-card-head h3{font-size:19px}
 #dashboard .dashboard-attendance-list .dashboard-card-head p{font-size:13px}
 #dashboard .dashboard-attendance-list .dashboard-view-all{min-height:42px;padding:8px 16px;font-size:14px}
 #dashboard .dashboard-attendance-list .attendance-map-link{font-size:12px}
}
/* v146: larger attendance list in the Android/mobile WebView dashboard. */
@media screen and (max-width:760px){
 #dashboard .dashboard-middle{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important;margin:0 0 12px!important}
 #dashboard .dashboard-middle>.dashboard-attendance-list{display:flex;flex-direction:column;min-width:0;min-height:0!important;padding:14px!important}
 #dashboard .dashboard-attendance-list .dashboard-card-head{align-items:center;gap:8px;margin-bottom:10px}
 #dashboard .dashboard-attendance-list .dashboard-card-head h3{font-size:17px;line-height:1.5}
 #dashboard .dashboard-attendance-list .dashboard-card-head p{font-size:12px}
 #dashboard .dashboard-attendance-list .dashboard-view-all{min-height:38px;padding:6px 10px;font-size:12px}
 #dashboard .dashboard-attendance-list .table-wrap{display:block;flex:0 0 auto;width:100%;min-height:250px;max-height:65dvh;overflow:auto!important;-webkit-overflow-scrolling:touch}
 #dashboard .dashboard-attendance-list table{width:100%;min-width:740px}
 #dashboard .dashboard-attendance-list th,#dashboard .dashboard-attendance-list td{padding:11px 9px!important;font-size:13px!important;line-height:1.6}
 #dashboard .dashboard-attendance-list .attendance-map-link{font-size:11px}
 #dashboard .dashboard-middle>.dashboard-ratio-card{min-width:0;min-height:220px;padding:14px}
}

/* v159: compact dashboard statistic cards on computer and tablet layouts. */
@media screen and (min-width:761px){
 #dashboard .dashboard-kpi{min-height:92px;padding:7px 12px;align-items:center}
 #dashboard .dashboard-kpi-icon{width:46px;height:46px;flex-basis:46px;font-size:24px}
 #dashboard .dashboard-kpi-icon svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
 #dashboard .dashboard-kpi-copy>span{font-size:13px}
 #dashboard .dashboard-kpi-copy strong{font-size:24px;line-height:1.05}
 #dashboard .dashboard-kpi-copy small,#dashboard .dashboard-kpi-copy em{margin-top:2px;font-size:9px;line-height:1.35}
}

@media screen and (min-width:761px){
 .portal-header .current-user-name{display:block;margin:0 0 2px;color:#fff;font-size:12px;font-weight:700;line-height:1.35;text-align:left}
 .portal-header .user-links{margin-top:0}
}

/* v163: let the dashboard's five recent attendance rows determine the card height. */
#dashboard .dashboard-middle>.dashboard-attendance-list{min-height:0!important;height:auto!important}
#dashboard .dashboard-attendance-list .table-wrap{flex:0 0 auto!important;min-height:0!important;height:auto!important;max-height:none!important}
#dashboard .dashboard-attendance-list .dashboard-card-head{margin-bottom:6px}
#dashboard .dashboard-attendance-list th,#dashboard .dashboard-attendance-list td{padding:6px 8px!important}
@media screen and (max-width:760px){
 #dashboard .dashboard-attendance-list .table-wrap{min-height:0!important;max-height:none!important}
}
/* v164: show the employee's name and make header actions easy to read and press. */
.portal-header .current-user-name{font-size:20px!important;font-weight:800!important;line-height:1.4!important}
.portal-header .header-link{font-size:16px!important;font-weight:750;min-height:42px;padding:8px 14px}
.portal-header .user-links{gap:10px}
@media(max-width:760px){
 .portal-header .current-user-name{font-size:17px!important}
 .portal-header .header-link{font-size:14px!important;min-height:40px;padding:7px 11px}
}
/* v165: hide account actions in a compact menu opened from the employee name. */
.portal-header .user-box{position:relative;align-items:flex-start;z-index:20}
.portal-header .current-user-name{display:inline-flex!important;align-items:center;gap:8px;margin:0!important;padding:2px 0;border:0;background:transparent;color:#fff;font:inherit;font-size:20px!important;font-weight:800!important;line-height:1.4!important;cursor:pointer}
.portal-header .current-user-name:hover{text-decoration:underline;text-underline-offset:4px}
.portal-header .user-menu-caret{font-size:.75em;opacity:.85;transition:transform .15s ease}
.portal-header .current-user-name[aria-expanded="true"] .user-menu-caret{transform:rotate(180deg)}
.portal-header .user-links{position:absolute;top:calc(100% + 8px);inset-inline-start:0;display:flex;flex-direction:column;align-items:stretch;gap:4px;min-width:220px;margin:0;padding:8px;border:1px solid #d5e3ef;border-radius:12px;background:#fff;box-shadow:0 12px 32px #092f4b35}
.portal-header .user-links[hidden]{display:none!important}
.portal-header .user-links .header-link{justify-content:flex-start;width:100%;min-height:42px;padding:8px 12px;border:0;border-radius:8px;background:#f1f7fb;color:#174d77;text-align:right;text-decoration:none;font-size:15px!important;font-weight:700}
.portal-header .user-links .header-link:hover{background:#e2f0fa}
@media(max-width:760px){
 .portal-header .current-user-name{font-size:17px!important}
 .portal-header .user-links{inset-inline-start:auto;inset-inline-end:0;min-width:min(240px,calc(100vw - 32px))}
}
/* v166: keep the account dropdown above navigation and page controls. */
.portal-header{position:relative!important;z-index:100!important;overflow:visible!important}
.portal-header .user-box{z-index:101!important}
.portal-header .user-links{z-index:102!important}

/* v175: distinct, high-contrast navigation colors with no blue-toned menu buttons. */
#nav>button:not(.nav-home-link){border:1px solid transparent!important;color:#fff!important;font-weight:800!important;box-shadow:0 3px 9px #17212b22!important;transition:filter .15s ease,transform .15s ease,box-shadow .15s ease}
#nav>button:not(.nav-home-link):before{background:#ffffff26!important;color:#fff!important}
#nav>button.nav-home-link{background:#374151!important;border:1px solid #374151!important;color:#fff!important}
#nav>button[data-page="dashboard"]{background:#475569!important;border-color:#475569!important}
#nav>button[data-page="employees"]{background:#15803d!important;border-color:#15803d!important}
#nav>button#navAttendanceToggle{background:#c2410c!important;border-color:#c2410c!important}
#nav>button#navReportsToggle{background:#7e22ce!important;border-color:#7e22ce!important}
#nav>button#navLeavesToggle{background:#be123c!important;border-color:#be123c!important}
#nav>button#navPayrollToggle{background:#0f766e!important;border-color:#0f766e!important}
#nav>button#navUsersToggle{background:#a21caf!important;border-color:#a21caf!important}
#nav>button[data-page="backup"]{background:#4b5563!important;border-color:#4b5563!important}
#nav>button#navSettingsToggle{background:#a16207!important;border-color:#a16207!important}
#nav>button:not(.nav-home-link):hover,#nav>button:not(.nav-home-link):focus-visible{filter:brightness(1.13);transform:translateY(-1px)}
#nav>button:not(.nav-home-link).active{filter:brightness(.9);box-shadow:inset 0 0 0 2px #ffffffc9,0 4px 11px #17212b33!important}
#nav>button.nav-group-toggle[aria-expanded="true"]{filter:brightness(.88)}
#nav>button:focus-visible,#nav .nav-submenu button:focus-visible{outline:3px solid #facc15!important;outline-offset:2px!important}
#nav .nav-submenu button{border:1px solid #e5e7eb!important;background:#fff!important;color:#374151!important;font-weight:700}
#nav .nav-submenu button:hover{background:#f3f4f6!important;color:#111827!important}
#nav #navAttendanceMenu button.active{background:#c2410c!important;border-color:#c2410c!important;color:#fff!important;box-shadow:inset -3px 0 #fed7aa!important}
#nav #navReportsMenu button.active{background:#7e22ce!important;border-color:#7e22ce!important;color:#fff!important;box-shadow:inset -3px 0 #e9d5ff!important}
#nav #navLeavesMenu button.active{background:#be123c!important;border-color:#be123c!important;color:#fff!important;box-shadow:inset -3px 0 #fecdd3!important}
#nav #navPayrollMenu button.active{background:#0f766e!important;border-color:#0f766e!important;color:#fff!important;box-shadow:inset -3px 0 #99f6e4!important}
#nav #navUsersMenu button.active{background:#a21caf!important;border-color:#a21caf!important;color:#fff!important;box-shadow:inset -3px 0 #f5d0fe!important}
#nav #navSettingsMenu button.active{background:#a16207!important;border-color:#a16207!important;color:#fff!important;box-shadow:inset -3px 0 #fde68a!important}
#nav #navAttendanceMenu button:not(.active){background:#fff7ed!important;border-color:#fed7aa!important;color:#9a3412!important}
#nav #navReportsMenu button:not(.active){background:#faf5ff!important;border-color:#e9d5ff!important;color:#6b21a8!important}
#nav #navLeavesMenu button:not(.active){background:#fff1f2!important;border-color:#fecdd3!important;color:#9f1239!important}
#nav #navPayrollMenu button:not(.active){background:#f0fdfa!important;border-color:#99f6e4!important;color:#115e59!important}
#nav #navUsersMenu button:not(.active){background:#fdf4ff!important;border-color:#f5d0fe!important;color:#86198f!important}
#nav #navSettingsMenu button:not(.active){background:#fffbeb!important;border-color:#fde68a!important;color:#854d0e!important}

.remember-credentials{display:flex!important;align-items:center;gap:9px;font-size:14px}.remember-credentials input{width:18px;height:18px;accent-color:#0878b2}.remember-credentials[hidden]{display:none!important}
#mobilePunchReasonDialog textarea{width:100%;min-height:110px}