[hidden]{display:none!important}
.holiday-drawer-open{overflow:hidden}.holiday-drawer-open .drawer-backdrop{opacity:1;visibility:visible}.holiday-drawer-open [data-holiday-drawer]{transform:none}.choice-group{border:1px solid var(--line);border-radius:10px;padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:8px}.choice-group legend{font-weight:700;padding:0 5px}.choice-group label{display:flex!important;align-items:center;gap:8px!important;padding:9px;border:1px solid var(--line);border-radius:8px}.choice-group input{width:auto!important;margin:0}.choice-group label:has(input:checked){background:#edf6fb;border-color:var(--blue)}
.apply-to-group{border:1px solid var(--line);border-radius:11px;padding:12px}.apply-to-group legend{font-weight:700;padding:0 5px}.apply-to-group>div{display:grid;grid-template-columns:1fr 1fr;gap:8px}.radio-card{display:flex!important;grid-template-columns:none!important;align-items:flex-start;gap:9px!important;padding:10px;border:1px solid var(--line);border-radius:9px;cursor:pointer}.radio-card:has(input:checked){border-color:var(--blue);background:#edf6fb;box-shadow:0 0 0 2px rgba(19,103,167,.1)}.radio-card input{width:auto!important;margin:3px 0 0}.radio-card span{display:grid}.radio-card small{font-weight:400;color:var(--muted)}.radio-card.disabled{opacity:.48;cursor:not-allowed}@media(max-width:520px){.apply-to-group>div{grid-template-columns:1fr}}
.shift-filters{display:grid;grid-template-columns:minmax(190px,.45fr) minmax(280px,1fr) minmax(220px,.55fr) auto;gap:12px;align-items:end;padding:16px;margin-bottom:18px}.shift-filters>label,.scope-chip{display:grid;gap:5px}.shift-filters label>span,.scope-chip>span{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}.shift-filters select{height:43px;border:1px solid var(--line);border-radius:9px;background:white;padding:0 11px;min-width:0}.shift-filters .search{width:100%}.scope-chip b{height:43px;display:flex;align-items:center;padding:0 12px;background:#edf6fb;border-radius:9px;color:var(--navy)}.shift-filters .record-count{align-self:center;white-space:nowrap}@media(max-width:1000px){.shift-filters{grid-template-columns:1fr 1fr}.shift-filters .record-count{grid-column:1/-1}}@media(max-width:620px){.shift-filters{grid-template-columns:1fr}}
.module-tabs{display:flex;gap:7px;overflow:auto;margin-bottom:18px;padding:5px;background:#e4ebef;border:1px solid #d4dfe5;border-radius:12px}.module-tabs a,.module-tabs span{padding:9px 13px;border-radius:8px;white-space:nowrap;font-weight:700;color:#536a78}.module-tabs a:hover{background:rgba(255,255,255,.65)}.module-tabs a.active{background:var(--navy);color:white}.module-tabs span{opacity:.58}.shift-drawer{width:min(620px,100%)}.shift-drawer-open{overflow:hidden}.shift-drawer-open .drawer-backdrop{opacity:1;visibility:visible}.shift-drawer-open .shift-drawer{transform:none}.days-field{border:1px solid var(--line);border-radius:10px;padding:12px}.days-field legend{font-weight:700;padding:0 5px}.days-field>div{display:grid;grid-template-columns:repeat(3,1fr);gap:2px 12px}.days-field .check-line{padding:4px 0}@media(max-width:520px){.days-field>div{grid-template-columns:1fr 1fr}}
:root{--navy:#092f4a;--blue:#1367a7;--ink:#172733;--muted:#6c7d88;--line:#dfe7eb;--bg:#f4f7f9;--white:#fff;--green:#178760;--amber:#b8760a;--red:#bd3d4b;--purple:#7256b8;--shadow:0 12px 30px rgba(23,50,66,.08)}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 'DM Sans',sans-serif}button,input{font:inherit}a{color:inherit;text-decoration:none}.app-shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;background:linear-gradient(180deg,#082e49,#0b3c5d);color:#dce9ef;padding:24px 16px;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:12px;padding:2px 9px 26px}.brand img{width:42px;height:42px;object-fit:contain;background:white;border-radius:12px;padding:5px}.brand span{display:flex;flex-direction:column}.brand b{font:800 17px 'Manrope'}.brand small,.sidebar-foot small{color:#9db7c6}.sidebar nav{display:grid;gap:5px}.sidebar nav a{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:9px;font-weight:600}.sidebar nav a:hover,.sidebar nav a.active{background:rgba(255,255,255,.13);color:white}.nav-icon{width:23px;text-align:center;font-size:18px}.sidebar-foot{margin-top:auto;border-top:1px solid rgba(255,255,255,.12);padding:18px 7px 0;display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center}.sidebar-foot div:nth-child(2){min-width:0;display:flex;flex-direction:column}.sidebar-foot b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}.sidebar-foot button{border:0;background:transparent;color:white;font-size:20px;cursor:pointer}.main{min-width:0}.topbar{height:88px;padding:0 32px;background:white;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px}.topbar h1{font:800 22px 'Manrope';margin:0}.topbar p{color:var(--muted);margin:2px 0 0}.top-actions{margin-left:auto}.icon-button,.menu-button{border:1px solid var(--line);background:white;border-radius:10px;width:40px;height:40px}.icon-button{position:relative}.icon-button span{position:absolute;width:7px;height:7px;background:#e55c5c;border-radius:50%;right:8px;top:7px}.menu-button{display:none}.page{padding:28px 32px 48px;max-width:1600px;margin:auto}.hero{background:linear-gradient(110deg,#0b3c5d,#1367a7);color:white;border-radius:18px;padding:28px 32px;display:flex;align-items:center;justify-content:space-between;gap:30px;box-shadow:var(--shadow);margin-bottom:22px;overflow:hidden;position:relative}.hero:after{content:'';position:absolute;width:230px;height:230px;border:45px solid rgba(255,255,255,.06);border-radius:50%;right:8%;top:-100px}.hero h2{font:800 27px 'Manrope';margin:5px 0}.hero p{margin:0;color:#c9dce8}.hero .button{z-index:1}.hero.compact{padding-block:22px}.eyebrow{font-size:11px;letter-spacing:.13em;font-weight:700;color:#78909d}.hero .eyebrow{color:#a9cce0}.button{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:9px;padding:11px 16px;font-weight:700;cursor:pointer}.button.primary{background:#f0ae2d;color:#2c2b26;box-shadow:0 5px 15px rgba(0,0,0,.12)}.button.secondary{background:white;border:1px solid var(--line)}button:disabled{opacity:.48;cursor:not-allowed}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}.stat-card{background:white;border-radius:14px;padding:18px 20px;border:1px solid var(--line);position:relative;overflow:hidden}.stat-card:after{content:'';position:absolute;inset:0 auto 0 0;width:4px;background:var(--blue)}.stat-card.green:after{background:var(--green)}.stat-card.amber:after{background:var(--amber)}.stat-card.purple:after{background:var(--purple)}.stat-card span,.stat-card small{display:block;color:var(--muted)}.stat-card strong{display:block;font:800 29px 'Manrope';margin:7px 0 2px}.content-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.span-2{grid-column:span 2}.panel{background:white;border:1px solid var(--line);border-radius:14px;box-shadow:0 6px 18px rgba(23,50,66,.035)}.panel-head{padding:20px 22px 15px;display:flex;align-items:center;justify-content:space-between;gap:16px}.panel-head h3{font:700 17px 'Manrope';margin:3px 0}.panel-head>a{color:var(--blue);font-weight:700}.request-list{padding:0 12px 12px}.request-row{display:grid;grid-template-columns:38px 1fr auto;gap:11px;align-items:center;padding:12px 10px;border-top:1px solid #edf1f3}.request-row div:nth-child(2),.person div:nth-child(2){display:flex;flex-direction:column}.request-row small,.person small,td>small{display:block;color:var(--muted)}.avatar{width:36px;height:36px;border-radius:10px;background:#e3a62b;color:#21313b;display:grid;place-items:center;font-weight:800}.avatar.soft{background:#e7f0f6;color:var(--blue)}.badge{display:inline-block;padding:4px 9px;border-radius:30px;font-size:11px;font-weight:700;text-transform:capitalize;background:#eef2f4;color:#657985}.badge.pending,.badge.draft,.badge.processing{background:#fff1d4;color:#9a6309}.badge.approved,.badge.posted,.badge.present{background:#dff5ec;color:#147152}.badge.rejected,.badge.cancelled{background:#fae2e5;color:#a62f3e}.quick-links{padding:0 18px 18px;display:grid;gap:9px}.quick-links a{border:1px solid var(--line);padding:13px;border-radius:10px;display:flex;flex-direction:column}.quick-links a:hover{border-color:#a7c8dd;background:#f8fbfd}.quick-links span{color:var(--muted);font-size:12px}.toolbar{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:18px}.search{display:flex;background:white;border:1px solid var(--line);border-radius:10px;overflow:hidden;width:min(470px,100%)}.search input{border:0;outline:0;padding:11px 13px;flex:1;min-width:0}.search button{border:0;background:var(--navy);color:white;padding:0 17px}.segmented{display:inline-flex;background:#e9eef1;border-radius:10px;padding:3px}.segmented button{border:0;background:transparent;padding:8px 13px;border-radius:8px;color:var(--muted);font-weight:600}.segmented button.active{background:white;color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.08)}.table-panel{overflow:hidden}.record-count{color:var(--muted)}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;white-space:nowrap}th{text-align:left;color:#6c7c86;background:#f8fafb;font-size:11px;text-transform:uppercase;letter-spacing:.06em;padding:11px 16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}td{padding:13px 16px;border-bottom:1px solid #edf1f3;vertical-align:middle}tbody tr:hover{background:#fbfdfe}.person{display:flex;align-items:center;gap:10px}.empty-mini{text-align:center;padding:35px;color:var(--muted)}.alert,.notice{padding:13px 16px;border-radius:9px;margin-bottom:18px}.alert.error{background:#fae6e8;color:#942b38;border:1px solid #f3c9ce}.alert.success{background:#e1f5ed;color:#126b4e;border:1px solid #bde5d6}.notice{background:#fff8e9;border:1px solid #efdba9;color:#76551b;margin-top:18px}.report-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.report-card{background:white;border:1px solid var(--line);border-radius:14px;padding:20px}.report-card>div{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:#e8f1f7;color:var(--blue);font-size:20px}.report-card h3{font:700 16px 'Manrope';margin:15px 0 5px}.report-card p{color:var(--muted);min-height:42px}.report-card button{border:0;background:transparent;color:var(--blue);font-weight:700;padding:0}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.setting-list{display:grid;padding:0 18px 18px}.setting-list a{display:flex;justify-content:space-between;padding:12px 4px;border-top:1px solid #edf1f3}.setting-list span{color:var(--blue)}.empty-state{text-align:center;padding:100px 20px}.empty-state>div{font:800 70px 'Manrope';color:#cad6dd}.auth-page{background:radial-gradient(circle at 15% 15%,#1b628d 0,#0b3b5c 38%,#06283e 100%);min-height:100vh;display:grid;place-items:center;padding:25px}.auth-shell{width:min(900px,100%);display:grid;grid-template-columns:1fr 1fr;background:white;border-radius:22px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.25)}.auth-brand{background:linear-gradient(145deg,#0c4265,#0b3250);color:white;padding:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.auth-brand img{max-width:200px;max-height:150px;object-fit:contain;filter:drop-shadow(0 8px 15px rgba(0,0,0,.25))}.auth-brand p{color:#bcd2df}.auth-card{padding:50px}.auth-card h1{font:800 28px 'Manrope';margin:0}.muted,.fine-print{color:var(--muted)}.form-stack{display:grid;gap:16px;margin-top:26px}.form-stack label{display:grid;gap:6px;font-weight:600}.form-stack input{width:100%;padding:11px 12px;border:1px solid #cdd9df;border-radius:9px;outline:0}.form-stack input:focus{border-color:var(--blue);box-shadow:0 0 0 3px #e0eef7}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.fine-print{font-size:11px;margin-top:24px}
@media(max-width:1100px){.stat-grid{grid-template-columns:repeat(2,1fr)}.report-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:800px){.app-shell{display:block}.sidebar{position:fixed;left:-260px;z-index:20;width:248px;transition:.2s}.menu-open .sidebar{left:0}.menu-button{display:block}.topbar{padding:0 18px}.page{padding:20px 16px}.content-grid,.settings-grid{grid-template-columns:1fr}.span-2{grid-column:auto}.hero{align-items:flex-start;flex-direction:column}.toolbar{align-items:stretch;flex-direction:column}.auth-shell{grid-template-columns:1fr}.auth-brand{padding:25px}.auth-brand img{max-height:85px}.auth-card{padding:32px}.report-grid{grid-template-columns:1fr}}@media(max-width:520px){.stat-grid{grid-template-columns:1fr}.field-row{grid-template-columns:1fr}.segmented{overflow:auto}.hero{padding:24px}.hero h2{font-size:23px}}
.form-stack select{width:100%;padding:11px 12px;border:1px solid #cdd9df;border-radius:9px;outline:0;background:white}.form-stack select:focus{border-color:var(--blue);box-shadow:0 0 0 3px #e0eef7}.user-setup-grid{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(310px,.8fr);gap:18px;align-items:start}.user-filter{padding:0 20px}.user-filter select{padding:10px 34px 10px 12px;border:1px solid var(--line);border-radius:9px;background:white}.account-panel{position:sticky;top:18px}.account-form{padding:0 22px 22px;margin-top:0}.account-form label small{font-weight:400;color:var(--muted)}.table-actions{display:flex;align-items:center;gap:10px}.table-actions form{margin:0}.text-action{border:0;background:transparent;padding:0;color:var(--blue);font-weight:700;cursor:pointer}.text-action.danger{color:var(--red)}
@media(max-width:1100px){.user-setup-grid{grid-template-columns:1fr}.account-panel{position:static}}
.user-setup-grid{display:block}.drawer-backdrop{position:fixed;inset:0;background:rgba(5,25,38,.48);z-index:70;opacity:0;visibility:hidden;transition:.2s}.account-drawer{position:fixed;z-index:71;right:0;top:0;width:min(480px,100%);height:100vh;background:white;box-shadow:-20px 0 50px rgba(5,25,38,.2);transform:translateX(105%);transition:transform .24s ease;overflow:auto}.user-drawer-open{overflow:hidden}.user-drawer-open .drawer-backdrop{opacity:1;visibility:visible}.user-drawer-open .account-drawer{transform:none}.drawer-head{position:sticky;top:0;z-index:2;background:white;border-bottom:1px solid var(--line);padding:20px 22px;display:flex;align-items:center;justify-content:space-between}.drawer-head h3{margin:3px 0;font:700 19px 'Manrope'}.drawer-close{width:38px;height:38px;border:1px solid var(--line);border-radius:10px;background:white;font-size:25px;line-height:1;cursor:pointer}.account-drawer .account-form{padding:22px}.employee-results{display:grid;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:-10px}.employee-results:empty{display:none}.employee-results button{border:0;border-bottom:1px solid var(--line);background:white;text-align:left;padding:10px 12px;display:flex;justify-content:space-between;gap:10px;cursor:pointer}.employee-results button:hover{background:#f1f7fa}.employee-results button:last-child{border-bottom:0}.employee-results small,.employee-results>div{color:var(--muted)}.employee-results>div{padding:12px}.selected-employee{padding:11px 12px;border-radius:9px;background:#edf6fb;color:var(--navy);font-weight:700}
.user-tabs{display:inline-flex;gap:6px;margin:0 0 20px;background:#e4ebef;padding:5px;border:1px solid #d4dfe5;border-radius:12px;max-width:100%}.user-tabs a{display:block;padding:10px 18px;border-radius:8px;color:#536a78;font-weight:800;white-space:nowrap}.user-tabs a:hover{background:rgba(255,255,255,.55)}.user-tabs a.active{background:var(--navy);color:white;box-shadow:0 3px 10px rgba(9,47,74,.2)}.check-row{display:flex!important;grid-template-columns:none!important;align-items:center;gap:10px!important;padding:12px;border:1px solid var(--line);border-radius:9px}.check-row input{width:auto!important;margin:0}.actions-cell{position:sticky;right:0;background:white;z-index:3;box-shadow:-7px 0 12px rgba(23,50,66,.04);width:70px;text-align:center}.action-menu{position:relative;display:inline-block}.action-menu-trigger{width:36px;height:34px;border:1px solid var(--line);border-radius:9px;background:white;color:var(--navy);font-size:22px;line-height:1;cursor:pointer}.action-menu-trigger:hover,.action-menu.open .action-menu-trigger{background:#eaf3f8;border-color:#aac8d9}.action-menu-popup{display:none;position:absolute;right:0;top:40px;z-index:30;width:190px;background:white;border:1px solid var(--line);border-radius:10px;padding:6px;box-shadow:0 15px 35px rgba(8,40,60,.18);text-align:left}.action-menu.open .action-menu-popup{display:grid}.action-menu-popup a,.action-menu-popup button,.action-menu-popup span{display:block;width:100%;padding:10px;border:0;border-radius:7px;background:white;text-align:left;font-weight:700;color:var(--ink);cursor:pointer}.action-menu-popup a:hover,.action-menu-popup button:hover{background:#edf5f9}.action-menu-popup button.danger{color:var(--red)}.action-menu-popup span{color:var(--muted);cursor:default}.action-menu-popup form{margin:0}
@media(max-width:600px){.user-tabs{display:grid;width:100%}.user-tabs a{text-align:center}.actions-cell{right:0}}
.employee-filters{display:grid;grid-template-columns:minmax(260px,1fr) minmax(170px,.35fr) minmax(210px,.5fr) auto;gap:12px;padding:16px;margin-bottom:18px}.employee-filters .search{width:100%}.employee-filters select{border:1px solid var(--line);border-radius:9px;background:white;padding:10px 12px;min-width:0}.read-only-pill{color:var(--navy)!important;cursor:default}@media(max-width:950px){.employee-filters{grid-template-columns:1fr 1fr}.employee-filters .search{grid-column:1/-1}}@media(max-width:620px){.employee-filters{grid-template-columns:1fr}}
.app-shell,.sidebar{transition:.22s ease}.menu-button{display:block;cursor:pointer}.sidebar-collapsed .app-shell{grid-template-columns:76px 1fr}.sidebar-collapsed .sidebar{padding-inline:10px}.sidebar-collapsed .brand{padding-inline:7px}.sidebar-collapsed .brand span,.sidebar-collapsed .nav-label,.sidebar-collapsed .sidebar-foot>div:nth-child(2),.sidebar-collapsed .sidebar-foot form{display:none}.sidebar-collapsed .sidebar nav a{justify-content:center;padding-inline:8px}.sidebar-collapsed .sidebar-foot{display:flex;justify-content:center}.actions-cell{left:0;right:auto}.actions-cell:has(.action-menu.open){z-index:50}.action-menu-popup{left:0;right:auto}.action-menu-popup .action-menu-trigger{display:none}@media(max-width:800px){.sidebar-collapsed .app-shell{display:block}.sidebar-collapsed .sidebar{width:248px;padding:24px 16px}.sidebar-collapsed .brand span,.sidebar-collapsed .nav-label,.sidebar-collapsed .sidebar-foot>div:nth-child(2),.sidebar-collapsed .sidebar-foot form{display:flex}}
.form-stack textarea{width:100%;padding:11px 12px;border:1px solid #cdd9df;border-radius:9px;resize:vertical;font:inherit}.check-line{display:flex!important;align-items:center;gap:9px;padding:8px 0}.check-line input{width:auto!important}.drawer-actions{display:flex;gap:10px;flex-wrap:wrap}.job-history{padding:0 22px 28px;display:grid;gap:10px}.history-card{border:1px solid var(--line);border-radius:10px;padding:12px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.history-card:nth-of-type(even){background:#f2f7fa}.history-card>div:first-child{display:grid;gap:2px}.history-card small{display:block;color:var(--muted)}.history-actions{display:flex;align-items:center;gap:9px}.history-actions a,.link-danger{border:0;background:transparent;padding:0;color:var(--blue);font-weight:700;cursor:pointer}.link-danger{color:var(--red)}.history-actions form{margin:0}tbody tr:nth-child(even),tbody tr:nth-child(even) .actions-cell{background:#f2f7fa}tbody tr:nth-child(odd),tbody tr:nth-child(odd) .actions-cell{background:#fff}tbody tr:hover,tbody tr:hover .actions-cell{background:#e9f3f8}.action-menu-popup a[href*="section=deductions"]{display:none!important}
.overtime-drawer-open{overflow:hidden}.overtime-drawer-open .drawer-backdrop{opacity:1;visibility:visible}.overtime-drawer-open [data-overtime-drawer]{transform:none}
body:has([data-overtime-drawer][aria-hidden="false"]){overflow:hidden}body:has([data-overtime-drawer][aria-hidden="false"]) .drawer-backdrop{opacity:1;visibility:visible}[data-overtime-drawer][aria-hidden="false"]{transform:none}
.page-segments{margin:0 0 18px}.page-segments a{display:inline-flex;padding:11px 16px;text-decoration:none;color:var(--muted);font-weight:700}.page-segments a.active{background:#0b3c5d;color:#fff;border-radius:10px}.leave-charges{border:1px solid #dce5eb;border-radius:12px;padding:14px}.leave-charges>p{color:var(--muted);font-size:13px}.leave-charge-row{display:grid;grid-template-columns:minmax(180px,1fr) 145px 145px 90px;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid #edf2f5}.leave-charge-row:last-child{border-bottom:0}body:has([data-leave-drawer][aria-hidden="false"]) [data-leave-drawer]{transform:none}body:has([data-leave-drawer][aria-hidden="false"]) [data-leave-drawer-close]{opacity:1;pointer-events:auto}@media(max-width:760px){.leave-charge-row{grid-template-columns:1fr 1fr}.leave-charge-row>label:first-child{grid-column:1/-1}}
.credit-input-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.button.small{padding:7px 9px;font-size:12px;margin:2px}
.leave-request-drawer{width:min(1080px,calc(100vw - 32px));max-width:1080px}
.leave-request-drawer .account-form{padding-bottom:40px}
.leave-request-drawer .leave-charges{display:grid;gap:10px;min-width:0}
.leave-request-drawer .leave-charge-row{grid-template-columns:minmax(220px,1.5fr) minmax(145px,1fr) minmax(145px,1fr) minmax(105px,.65fr);align-items:center}
.leave-charge-row>label:first-child small{display:block;margin:.25rem 0 0 1.7rem;color:var(--muted);font-weight:500}
.leave-charge-row.credit-unavailable{opacity:.52;background:#f3f6f8}
.leave-charge-row .half-day-option{white-space:nowrap;justify-self:start}
@media(max-width:850px){.leave-request-drawer{width:100vw;max-width:100vw}.leave-request-drawer .leave-charge-row{grid-template-columns:1fr 1fr}.leave-charge-row>label:first-child{grid-column:1/-1}}
.leave-charge-row [data-credit-remaining]{color:var(--green);font-weight:800}.leave-charge-row [data-credit-remaining].credit-negative{color:var(--red)}
.leave-list-table{table-layout:fixed;min-width:1080px}.leave-list-table th:nth-child(1){width:72px}.leave-list-table th:nth-child(2){width:250px}.leave-list-table th:nth-child(3){width:125px}.leave-list-table th:nth-child(4){width:190px}.leave-list-table th:nth-child(5){width:145px}.leave-list-table th:nth-child(6){width:75px}.leave-list-table th:nth-child(8){width:150px}.leave-list-table .employee-cell{white-space:normal}.leave-list-table .employee-cell b{display:block;overflow:hidden;text-overflow:ellipsis}.leave-list-table .reason-cell{overflow:hidden;text-overflow:ellipsis}.leave-list-table .leave-row.status-pending td{background:#fff9ec}.leave-list-table .leave-row.status-approved td{background:#eef9f4}.leave-list-table .leave-row.status-payroll td{background:#eef5f8}.leave-list-table .leave-row.status-pending .actions-cell{box-shadow:inset 4px 0 #e7a82a}.leave-list-table .leave-row.status-approved .actions-cell{box-shadow:inset 4px 0 var(--green)}.leave-list-table .leave-row.status-payroll .actions-cell{box-shadow:inset 4px 0 var(--blue)}
.comp-off-detail{display:grid;grid-template-columns:1.05fr .8fr .8fr 1.15fr 1.3fr auto;gap:10px;align-items:end;padding:12px;margin-bottom:10px;border:1px solid #dce7ee;border-radius:14px;background:#f8fbfd}.comp-off-detail label{margin:0}.comp-off-detail .mini{width:38px;height:42px}.comp-off-totals{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}.comp-off-totals span{padding:12px;border-radius:12px;background:#edf5f9;color:#60788a}.comp-off-totals b{display:block;color:#102c3e;font-size:1.15rem;margin-top:3px}.drawer-section-head{display:flex;align-items:end;justify-content:space-between;margin-top:10px}.drawer-section-head h4{margin:2px 0}.button.compact{padding:9px 12px}@media(max-width:900px){.comp-off-detail{grid-template-columns:1fr 1fr}.comp-off-totals{grid-template-columns:1fr}}

/* Payroll Worksheet — Delphi migration stage 1 */
.payroll-migration-gate{margin:16px 0}
.payroll-control-filters{display:grid;gap:16px}
.payroll-filter-row{display:grid;grid-template-columns:1.5fr 1fr 1.25fr .85fr .85fr;gap:12px}
.payroll-filter-row label{display:grid;gap:7px;font-weight:800}
.payroll-filter-search{display:flex;align-items:center;gap:12px}
.payroll-filter-search .search{flex:1}
.payroll-runs-table{min-width:1500px}
.payroll-runs-table .payroll-title-cell{min-width:320px;white-space:normal}
.payroll-title-cell small,.payroll-runs-table td small{display:block;margin-top:4px;color:var(--muted)}
.row-open-button{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border:1px solid #cddde6;border-radius:10px;background:#fff;color:var(--navy);font-weight:800;text-decoration:none}
.row-open-button:hover{background:#edf6fa}
.payroll-run-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px}
.payroll-run-heading{display:flex;align-items:flex-start;gap:14px}
.payroll-run-heading h3{margin:4px 0;font-size:24px}
.payroll-period-badge{display:flex;align-items:center;gap:8px;padding:12px 14px;border-radius:12px;background:#edf6fa;border:1px solid #d3e4ed;font-variant-numeric:tabular-nums}
.payroll-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 16px}
.payroll-summary-grid .summary-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px}
.payroll-summary-grid .summary-card span{display:block;color:var(--muted);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.payroll-summary-grid .summary-card b{display:block;margin-top:7px;font-size:22px}
.payroll-worksheet-table{min-width:2400px}
.payroll-worksheet-table .employee-cell{min-width:270px;white-space:normal}
.payroll-worksheet-table .money,.payroll-runs-table .money,.payroll-payslip-table .money{white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}
.payroll-modal-backdrop{position:fixed;inset:0;z-index:1300;background:rgba(5,35,53,.44);backdrop-filter:blur(2px)}
.payroll-detail-modal{position:fixed;z-index:1310;left:50%;top:50%;transform:translate(-50%,-50%);width:min(1480px,calc(100vw - 40px));height:min(820px,calc(100vh - 40px));background:#fff;border:1px solid #bcd2de;border-radius:16px;box-shadow:0 30px 90px rgba(5,35,53,.30);display:flex;flex-direction:column;overflow:hidden}
.payroll-payslip-modal{width:min(760px,calc(100vw - 40px))}
.payroll-modal-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 20px;background:#f7fafc;border-bottom:1px solid var(--line)}
.payroll-modal-head h3{margin:4px 0 0;font-size:23px}.payroll-modal-head p{margin:4px 0 0;color:var(--muted)}
.payroll-modal-table{flex:1;overflow:auto;border:0;border-radius:0}
.payroll-dtr-table{min-width:2100px}
.payroll-dtr-table thead th,.payroll-payslip-table thead th{position:sticky;top:0;z-index:2;background:#edf4f8}
.payslip-summary-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.payslip-summary-strip span{background:#fff;padding:13px 16px;color:var(--muted)}.payslip-summary-strip b{display:block;margin-top:4px;color:var(--ink);font-size:18px}
body:has(.payroll-detail-modal){overflow:hidden}
@media(max-width:1000px){.payroll-filter-row{grid-template-columns:1fr 1fr}.payroll-summary-grid{grid-template-columns:1fr 1fr}.payroll-run-header{align-items:flex-start;flex-direction:column}}
@media(max-width:620px){.payroll-filter-row,.payroll-summary-grid,.payslip-summary-strip{grid-template-columns:1fr}.payroll-detail-modal{width:100vw;height:100vh;border-radius:0}.payroll-filter-search{align-items:stretch;flex-direction:column}.payroll-run-heading{flex-direction:column}}

/* Payroll Worksheet — polished Delphi create/generate layout */
.payroll-hero{position:relative;overflow:hidden;background:linear-gradient(118deg,#0b496b 0%,#126b9a 58%,#1780b6 100%);color:#fff;border:0;box-shadow:0 18px 45px rgba(9,70,101,.18)}
.payroll-hero:before,.payroll-hero:after{content:"";position:absolute;border:28px solid rgba(255,255,255,.07);border-radius:50%}.payroll-hero:before{width:190px;height:190px;right:130px;top:-95px}.payroll-hero:after{width:280px;height:280px;right:-120px;bottom:-200px}.payroll-hero .eyebrow,.payroll-hero p{color:#d3eaf5}.payroll-hero h2{color:#fff}.payroll-hero-mark{position:relative;z-index:1;display:grid;justify-items:center;gap:4px;min-width:128px;padding:15px 18px;border:1px solid rgba(255,255,255,.22);border-radius:16px;background:rgba(255,255,255,.10);backdrop-filter:blur(8px)}.payroll-hero-mark span{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--gold);color:#082f46;font-size:27px;font-weight:900}.payroll-hero-mark small{font-weight:800;color:#fff}
.payroll-create-panel{padding:18px;overflow:visible}
.payroll-create-grid{display:grid;grid-template-columns:minmax(330px,1.15fr) minmax(230px,.8fr) minmax(360px,1.25fr) 150px;gap:16px;align-items:stretch}
.payroll-setup-card{border:1px solid var(--line);border-radius:14px;background:#fbfdfe;padding:16px;box-shadow:0 3px 10px rgba(22,61,82,.035)}
.payroll-left-stack,.date-stack,.org-stack{display:grid;gap:12px;align-content:start}
.payroll-type-box{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;border:0;padding:0;margin:0}
.payroll-type-box legend,.setup-card-title{display:block;width:100%;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 2px;padding:0}
.payroll-type-box label{display:flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#fff;font-weight:800;cursor:pointer}
.payroll-type-box label:has(input:checked){border-color:#8db7ce;background:#eaf5fa;color:var(--navy);box-shadow:inset 0 0 0 1px #b9d7e6}
.payroll-type-box .payroll-type-later{opacity:.55;cursor:not-allowed;position:relative}.payroll-type-later small{position:absolute;right:5px;top:-8px;padding:2px 5px;border-radius:8px;background:#e6edf1;color:#526b79;font-size:9px;text-transform:uppercase;letter-spacing:.05em}
.payroll-type-box input{width:auto;margin:0}
.payroll-create-grid label{display:grid;gap:6px;font-weight:800;color:var(--ink)}
.payroll-create-grid select,.payroll-create-grid input[type="date"],.payroll-create-grid input[type="text"],.payroll-create-grid input:not([type]){min-height:44px}
.payroll-business-unit{margin-top:4px}
.payroll-generate-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;border:1px solid var(--line);border-radius:14px;background:#f8fbfd;padding:14px}
.payroll-generate-card small{color:var(--muted);text-align:center;line-height:1.3}
.payroll-generate-button{width:96px;height:88px;border:0;border-radius:14px;background:transparent;color:var(--navy);font-weight:900;display:grid;place-items:center;align-content:center;gap:6px;cursor:pointer}
.payroll-generate-button:not(:disabled):hover{background:#eaf5fa}
.payroll-generate-button:disabled{opacity:.38;cursor:not-allowed}.generate-icon{width:38px;height:38px;border:3px solid currentColor;border-radius:50%;display:grid;place-items:center;font-size:16px;padding-left:2px}
.payroll-search-box{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(260px,1fr) minmax(180px,260px) auto;gap:12px;align-items:end;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:#f7fafc}
.payroll-search-box .section-cap{align-self:center;font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.payroll-search-box label{margin:0}
@media(max-width:1180px){.payroll-create-grid{grid-template-columns:1fr 1fr}.payroll-generate-card{min-height:150px}.payroll-search-box{grid-template-columns:1fr 1fr}.payroll-search-box .section-cap{grid-column:1/-1}}
@media(max-width:720px){.payroll-create-grid{grid-template-columns:1fr}.payroll-search-box{grid-template-columns:1fr}.payroll-type-box{grid-template-columns:1fr}.payroll-generate-card{min-height:auto}.payroll-hero-mark{display:none}}
.payroll-sheet-panel{padding:0;overflow:hidden}.payroll-sheet-title{height:34px;display:flex;align-items:center;justify-content:center;background:#35515f;color:#fff;font-size:13px}.payroll-sheet-wrap{border:0;border-radius:0;min-height:440px}
.payroll-worksheet-table{min-width:3100px}.payroll-worksheet-table th,.payroll-worksheet-table td{white-space:nowrap}.payroll-worksheet-table td:nth-child(6){min-width:260px}.payroll-worksheet-table td:nth-child(7){min-width:180px}
.payroll-no-cell{display:flex;align-items:center;gap:7px}.compact-action-trigger{width:30px!important;height:30px!important;min-width:30px!important}
@media(max-width:1250px){.payroll-create-grid{grid-template-columns:1fr 1fr 1fr}.payroll-search-box{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);padding:12px 0 0}}
@media(max-width:700px){.payroll-create-grid{grid-template-columns:1fr}.payroll-search-box{grid-column:auto}}

/* Payroll — existing saved payroll decision dialog */
.payroll-existing-backdrop{
    position:fixed;
    inset:0;
    z-index:1400;
    background:rgba(7,35,51,.42);
    backdrop-filter:blur(2px);
}
.payroll-existing-dialog{
    position:fixed;
    z-index:1410;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:min(620px,calc(100vw - 36px));
    display:grid;
    grid-template-columns:58px 1fr;
    gap:18px;
    padding:24px;
    border:1px solid #c5d8e2;
    border-radius:18px;
    background:#fff;
    box-shadow:0 30px 90px rgba(4,31,47,.30);
}
.saved-payroll-icon{
    width:52px;height:52px;border-radius:50%;
    display:grid;place-items:center;
    background:#fff3d7;color:#9a6500;
    font-size:26px;font-weight:900;
}
.saved-payroll-content h3{
    margin:4px 0 8px;
    font-size:25px;
}
.saved-payroll-content>p{
    margin:0 0 16px;
    color:var(--muted);
    line-height:1.55;
}
.saved-payroll-summary{
    display:grid;
    gap:8px;
    padding:13px 14px;
    margin-bottom:18px;
    border:1px solid var(--line);
    border-radius:12px;
    background:#f7fafc;
}
.saved-payroll-summary div{
    display:grid;
    grid-template-columns:90px 1fr;
    gap:10px;
}
.saved-payroll-summary span{
    color:var(--muted);
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.06em;
}
.saved-payroll-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}
.saved-payroll-actions form{margin:0}
.saved-payroll-actions .button.danger{
    background:#fff0ee;
    border-color:#efc3bd;
    color:#a12f22;
}
.saved-payroll-actions .button.danger:hover{
    background:#ffe3df;
}
body:has(.payroll-existing-dialog){overflow:hidden}
@media(max-width:620px){
    .payroll-existing-dialog{grid-template-columns:1fr}
    .saved-payroll-icon{width:44px;height:44px}
    .saved-payroll-actions{align-items:stretch;flex-direction:column}
    .saved-payroll-actions .button,
    .saved-payroll-actions form,
    .saved-payroll-actions form .button{width:100%}
}

/* Payroll Engine Stage 2A — preview status only */
.payroll-engine-stage{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    margin:14px 0;padding:14px 16px;border:1px solid #c9dfd7;border-radius:12px;
    background:#f0f9f5;
}
.payroll-engine-stage b{display:block;margin:3px 0;font-size:16px}
.payroll-engine-stage p{margin:0;color:var(--muted)}
.payroll-review-actions{position:sticky;bottom:0;z-index:20;display:flex;align-items:center;gap:16px;padding:16px 20px;background:rgba(247,250,252,.96);border:1px solid #d7e3ea;border-radius:14px;box-shadow:0 -8px 28px rgba(13,54,77,.1)}
.payroll-review-actions form{margin:0}.payroll-save-button{min-width:220px}.payroll-review-actions small{color:#637b89}.pending-calc{color:#9aabb4;text-align:center}


/* Payroll-only rounded edit and dropdown controls */
.payroll-page select,
.payroll-page input,
.payroll-page textarea,
.payroll-create select,
.payroll-create input,
.payroll-create textarea,
#payroll-create-form select,
#payroll-create-form input,
#payroll-create-form textarea,
.payroll-detail-modal select,
.payroll-detail-modal input,
.payroll-detail-modal textarea {
    border-radius: 10px;
}


/* Payroll save -> print lifecycle */
.payroll-review-button-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.payroll-review-button-row form{margin:0}
.payroll-print-button[disabled],.payroll-save-button[disabled]{cursor:not-allowed;opacity:.55}
@media print{
  @page{size:landscape;margin:8mm}
  body *{visibility:hidden!important}
  .payroll-print-target,.payroll-print-target *{visibility:visible!important}
  .payroll-print-target{position:absolute!important;left:0!important;top:0!important;width:100%!important;margin:0!important;padding:0!important;box-shadow:none!important;border:0!important;overflow:visible!important}
  .payroll-print-target .payroll-sheet-wrap{overflow:visible!important;max-height:none!important}
  .payroll-print-target .payroll-row-menu{display:none!important}
  .payroll-print-target table{width:100%!important;min-width:0!important;font-size:8px!important;border-collapse:collapse!important}
  .payroll-print-target th,.payroll-print-target td{padding:3px 4px!important;white-space:nowrap!important}
}


/* Management Dashboard analytics */
.dashboard-filter{display:flex;align-items:end;gap:14px;margin-bottom:18px;padding:16px 18px}.dashboard-filter label{min-width:220px;font-size:12px;font-weight:700;color:#334155}.dashboard-filter select{display:block;width:100%;margin-top:6px}
.dashboard-stat-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.stat-card.teal{border-top:3px solid #0f9f9a}.stat-card.rose{border-top:3px solid #d05a73}
.dashboard-chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:18px 0}.dashboard-chart-grid .span-2{grid-column:1/-1}.dashboard-chart{min-width:0;overflow:hidden}.chart-legend{display:flex;gap:16px;font-size:12px}.chart-legend span:before{content:"";display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px}.hire-dot:before{background:#279a75}.resign-dot:before{background:#d95f73}
.monthly-bars{height:205px;display:grid;grid-template-columns:repeat(12,1fr);gap:8px;align-items:end;padding:12px 8px 0;border-bottom:1px solid #dbe3ec}.month-group{text-align:center;min-width:0}.bar-pair{height:155px;display:flex;align-items:end;justify-content:center;gap:3px}.bar{display:block;width:12px;border-radius:4px 4px 0 0}.bar.hire,.hbar.hire{background:#279a75}.bar.resign,.hbar.resign{background:#d95f73}.month-group b{display:block;font-size:11px;margin-top:5px}.month-group small{font-size:9px;color:#64748b}
.horizontal-chart{display:grid;gap:12px}.hrow{display:grid;grid-template-columns:minmax(110px,1.2fr) 1fr 1fr;gap:8px;align-items:center;font-size:11px}.hrow>b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hrow>div{height:18px;background:#eef3f7;border-radius:4px;position:relative;overflow:hidden}.hbar{position:absolute;inset:0 auto 0 0;min-width:2px}.hrow span{position:absolute;right:5px;top:2px;font-size:10px;font-weight:800;z-index:1}
.cost-chart{display:grid;gap:9px}.cost-row{display:grid;grid-template-columns:minmax(180px,1.1fr) 3fr minmax(130px,.8fr);gap:12px;align-items:center}.cost-row>div:first-child b,.cost-row>div:first-child small{display:block}.cost-row>div:first-child small{color:#64748b;font-size:10px}.cost-track{height:22px;background:#edf2f7;border-radius:5px;overflow:hidden}.cost-track i{display:block;height:100%;background:#315f9b;border-radius:5px}.cost-row strong{text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:1100px){.dashboard-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-chart-grid{grid-template-columns:1fr}.dashboard-chart-grid .span-2{grid-column:auto}.cost-row{grid-template-columns:1fr}.cost-row strong{text-align:left}}

/* Dashboard KPI donuts */
.dashboard-donut-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:18px;
    margin:18px 0;
}
.donut-kpi{
    display:flex;
    align-items:center;
    gap:16px;
    min-width:0;
    padding:18px;
    border:1px solid #d8e2e9;
    border-radius:18px;
    background:#fff;
    box-shadow:0 8px 24px rgba(31,55,73,.04);
}
.donut-chart{
    --p:0;
    --donut-accent:#176da5;
    flex:0 0 auto;
    width:98px;
    height:98px;
    border-radius:50%;
    position:relative;
    display:grid;
    place-items:center;
    background:
      conic-gradient(
        var(--donut-accent) calc(var(--p) * 1%),
        #e8eef2 0
      );
}
.donut-chart::after{
    content:"";
    position:absolute;
    inset:10px;
    border-radius:50%;
    background:#fff;
}
.donut-hole{
    position:relative;
    z-index:1;
    display:grid;
    place-items:center;
    align-content:center;
    line-height:1;
}
.donut-hole strong{
    font-size:25px;
    font-weight:800;
    color:#152b3a;
    letter-spacing:-.03em;
}
.donut-hole em{
    margin-top:5px;
    font-size:10px;
    font-style:normal;
    font-weight:800;
    color:#6b8291;
}
.donut-copy{
    min-width:0;
    display:grid;
    gap:5px;
}
.donut-copy span{
    font-size:14px;
    font-weight:800;
    color:#243c4b;
    line-height:1.25;
}
.donut-copy small{
    color:#718694;
    line-height:1.35;
}
.donut-active{--donut-accent:#176da5}
.donut-present{--donut-accent:#23966f}
.donut-hired{--donut-accent:#119b9a}
.donut-resigned{--donut-accent:#d75970}
.donut-net{--donut-accent:#7354bd}
.donut-net.negative{--donut-accent:#d75970}

@media(max-width:1350px){
    .dashboard-donut-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
    .dashboard-donut-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
    .dashboard-donut-grid{grid-template-columns:1fr}
    .donut-kpi{justify-content:flex-start}
}

/* Employee drawer and authenticated-user portrait enhancements */
.account-drawer{width:min(680px,100%)}
.sidebar-foot .user-photo-avatar{position:relative;overflow:hidden}
.sidebar-foot .user-photo-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sidebar-foot .user-photo-avatar.has-photo span{visibility:hidden}
.module-chip-list{display:flex;flex-wrap:wrap;gap:6px}.module-chip{display:inline-flex;padding:5px 8px;border-radius:999px;background:#edf5f9;border:1px solid #d6e4eb;color:var(--navy);font-size:12px;font-weight:800}.external-module-fieldset{display:grid;gap:8px;border:1px solid var(--line);border-radius:10px;padding:12px}.external-module-fieldset legend{padding:0 6px;font-weight:800;color:var(--navy)}.readonly-notice{display:grid;gap:4px;padding:12px 14px;border-radius:10px;background:#f1f7fa;border:1px solid #cfe0e9;color:var(--navy)}.readonly-notice span{font-size:12px;color:var(--muted)}
.read-only-user .page form[method="post"]{display:none!important}.read-only-user .page [data-user-drawer-open],.read-only-user .page [data-employee-drawer-open],.read-only-user .page [data-holiday-drawer-open],.read-only-user .page [data-shift-drawer-open]{display:none!important}

/* Mobile dashboard filter containment — 2026-09-01 */
.dashboard-filter > label{min-width:0;max-width:100%}
.dashboard-filter select{min-width:0;max-width:100%}
@media(max-width:600px){
  .dashboard-filter{
    display:grid;
    grid-template-columns:minmax(0,1fr) 112px;
    align-items:end;
    gap:12px;
  }
  .dashboard-filter label{min-width:0;width:100%}
  .dashboard-filter select{width:100%;min-width:0;max-width:100%}
}
@media(max-width:380px){
  .dashboard-filter{grid-template-columns:1fr}
}

/* Dashboard filter — polished HRIS toolbar treatment, 2026-09-01 */
.dashboard-filter{
  display:grid;
  grid-template-columns:minmax(320px,1fr) minmax(150px,180px) auto;
  gap:14px;
  align-items:end;
  padding:18px 20px;
  margin-bottom:18px;
  border-radius:14px;
}
.dashboard-filter > label{
  display:grid;
  gap:7px;
  width:100%;
  min-width:0;
  max-width:none;
  margin:0;
  color:#334155;
  font-size:12px;
  font-weight:700;
}
.dashboard-filter select{
  display:block;
  width:100%;
  min-width:0;
  max-width:100%;
  height:52px;
  margin:0;
  padding:0 42px 0 16px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  color:var(--ink);
  font:500 14px/1.2 'DM Sans',sans-serif;
  outline:0;
}
.dashboard-filter select:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3px #e0eef7;
}
.dashboard-filter select:disabled{
  background:#f5f8fa;
  color:var(--muted);
  cursor:not-allowed;
}
.dashboard-filter .dashboard-filter-apply{
  min-width:136px;
  height:52px;
  padding:0 20px;
  border-radius:10px;
  white-space:nowrap;
  font-size:14px;
}
@media(max-width:800px){
  .dashboard-filter{
    grid-template-columns:minmax(0,1fr) minmax(118px,150px);
    gap:12px;
    padding:16px;
  }
  .dashboard-filter .dashboard-filter-apply{
    grid-column:1/-1;
    width:100%;
    min-width:0;
  }
}
@media(max-width:480px){
  .dashboard-filter{
    grid-template-columns:1fr;
  }
  .dashboard-filter .dashboard-filter-apply{
    grid-column:auto;
  }
}

/* Dashboard birthday watch — people-first horizontal timeline */
.birthday-panel{margin-bottom:18px;overflow:hidden}.birthday-watch-head{align-items:flex-start}.birthday-count{display:inline-grid;place-items:center;min-width:38px;height:38px;padding:0 11px;border-radius:999px;background:#fff3d6;color:#875f00;font-weight:900;border:1px solid #f2d78c}.birthday-carousel{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,260px);gap:14px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;padding:8px 2px 12px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}.birthday-card{scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;min-height:285px;padding:16px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 8px 24px rgba(25,54,75,.06);text-align:center;position:relative}.birthday-card.is-today{border-color:#e7bd4f;background:linear-gradient(180deg,#fffaf0 0,#fff 62%);box-shadow:0 0 0 2px rgba(231,189,79,.12),0 10px 28px rgba(25,54,75,.08)}.birthday-card.is-past{background:#fafcfd}.birthday-card-top{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}.birthday-date-chip,.birthday-timing{font-size:11px;font-weight:850}.birthday-date-chip{padding:5px 8px;border-radius:999px;background:#edf4f8;color:var(--navy)}.birthday-timing{color:#718392}.birthday-card.is-today .birthday-date-chip,.birthday-card.is-today .birthday-timing{background:#fff0bf;color:#775000}.birthday-photo{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:linear-gradient(135deg,#e5f4ef,#eef5fa);border:4px solid #fff;box-shadow:0 0 0 2px rgba(23,126,101,.16);font-size:20px;font-weight:900;color:var(--navy);margin:2px 0 10px}.birthday-card.is-today .birthday-photo{box-shadow:0 0 0 3px rgba(225,167,24,.38)}.birthday-photo img{display:none;width:100%;height:100%;object-fit:cover}.birthday-photo.has-photo span{display:none}.birthday-photo.has-photo img{display:block}.birthday-name{font-size:15px;color:var(--ink);line-height:1.25}.birthday-org,.birthday-unit{font-size:12px;color:var(--muted);line-height:1.35;margin-top:3px}.birthday-unit{font-weight:700;color:#577184}.birthday-tenure{width:100%;display:grid;gap:2px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line);text-align:left}.birthday-tenure b{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#78909f}.birthday-tenure span{font-size:12px;font-weight:800;color:var(--ink)}.birthday-tenure small{font-size:10px;color:var(--muted)}.birthday-swipe-hint{display:none;text-align:center;font-size:11px;color:var(--muted);padding-top:2px}@media(max-width:700px){.birthday-carousel{grid-auto-columns:82%;padding-right:18%}.birthday-swipe-hint{display:block}.birthday-card{min-height:300px}.birthday-watch-head{gap:10px}}@media(max-width:430px){.birthday-carousel{grid-auto-columns:88%;padding-right:12%}.birthday-panel{padding-left:16px;padding-right:16px}}

/* Payroll generation progress overlay — restored after Dashboard CSS update */
.payroll-processing-overlay[hidden]{display:none!important}
.payroll-processing-overlay{
  position:fixed;
  inset:0;
  z-index:12000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(8,40,58,.34);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
.payroll-processing-card{
  width:min(360px,calc(100vw - 40px));
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:30px 26px 26px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:22px;
  background:rgba(255,255,255,.97);
  box-shadow:0 24px 70px rgba(7,43,61,.24);
  color:#0c3145;
  text-align:center;
}
.payroll-processing-card strong{font-size:1.05rem;line-height:1.35}
.payroll-processing-card span{max-width:290px;color:#68808e;font-size:.9rem;line-height:1.45}
.payroll-processing-spinner{
  width:58px;
  height:58px;
  margin-bottom:4px;
  border:6px solid #e5f0f4;
  border-top-color:#0e789b;
  border-right-color:#20a8ad;
  border-radius:50%;
  animation:payroll-processing-spin .78s linear infinite;
}
html.payroll-is-processing,html.payroll-is-processing body{overflow:hidden}
@keyframes payroll-processing-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.payroll-processing-spinner{animation-duration:1.8s}}

/* HRIS central settings control center — 2026-09-01 */
.settings-hero{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:18px;padding:22px 24px}
.settings-hero h2{margin:4px 0 6px}.settings-hero p{margin:0;color:var(--muted);max-width:760px}
.settings-status{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}.settings-status span{display:grid;gap:2px;min-width:132px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#f8fbfc;font-size:11px;color:var(--muted)}.settings-status b{font-size:13px;color:var(--navy)}
.settings-control-grid{align-items:start}.settings-card{min-width:0}.settings-card .panel-head p{margin:5px 0 0;color:var(--muted);font-size:12px;line-height:1.45}
.settings-fields{display:grid;gap:12px;margin-top:12px}.settings-two-col{grid-template-columns:repeat(2,minmax(0,1fr))}.settings-fields label{display:grid;gap:6px;min-width:0;font-size:12px;font-weight:800;color:#334155}.settings-fields input:not([type=checkbox]),.settings-fields select{width:100%;min-width:0;height:46px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}.settings-fields input:focus,.settings-fields select:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px #e0eef7}.settings-fields input:disabled,.settings-fields select:disabled{background:#f4f6f8;color:#71808b}
.setting-note{margin-top:12px;padding:10px 12px;border-radius:10px;background:#f3f8fb;color:#5f7685;font-size:12px;line-height:1.45}.setting-note.protected{border-left:3px solid #6d8fa3}.settings-link-button{display:inline-flex;margin-top:12px}
.settings-unit-list{display:grid;gap:7px;margin-top:10px}.settings-unit-list>div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:#fbfcfd}.settings-unit-list b{font-size:13px;color:var(--ink)}.settings-unit-list small{font-size:10px;color:var(--muted);word-break:break-all;text-align:right}
.settings-runtime{display:grid;gap:0;margin:8px 0 0}.settings-runtime>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}.settings-runtime>div:last-child{border-bottom:0}.settings-runtime dt{font-size:12px;color:var(--muted)}.settings-runtime dd{margin:0;font-size:12px;font-weight:800;color:var(--navy);word-break:break-word}
.settings-savebar{position:sticky;bottom:14px;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:18px;padding:14px 16px;border:1px solid rgba(23,109,165,.2);border-radius:14px;background:rgba(255,255,255,.96);box-shadow:0 14px 34px rgba(16,56,78,.16);backdrop-filter:blur(8px)}.settings-savebar>div{display:grid;gap:2px}.settings-savebar b{font-size:13px;color:var(--navy)}.settings-savebar small{font-size:11px;color:var(--muted)}
@media(max-width:800px){.settings-hero{align-items:flex-start;flex-direction:column}.settings-status{justify-content:flex-start}.settings-two-col{grid-template-columns:1fr}.settings-savebar{bottom:8px}.settings-runtime>div{grid-template-columns:1fr;gap:3px}}
@media(max-width:480px){.settings-hero{padding:18px}.settings-status{width:100%}.settings-status span{flex:1;min-width:0}.settings-savebar{align-items:stretch;flex-direction:column}.settings-savebar .button{width:100%}}

/* Organization Structure settings */
.org-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:18px}.org-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}.org-panel{overflow:hidden}.org-list{display:grid;padding:0 14px 14px;gap:8px}.org-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);border-radius:10px;padding:11px 12px;background:#fbfcfd}.org-row>div:first-child{min-width:0;display:flex;flex-direction:column}.org-row b{white-space:normal}.org-row small{color:var(--muted);font-size:10px;word-break:break-word}.org-actions{display:flex;align-items:center;gap:9px;flex:0 0 auto}.org-actions a{color:var(--blue);font-weight:700}.org-actions form{margin:0}.danger-link{border:0;background:transparent;padding:0;color:var(--red);font-weight:700;cursor:pointer}.org-modal-backdrop{position:fixed;inset:0;background:rgba(5,24,38,.48);z-index:90}.org-modal{position:fixed;z-index:91;left:50%;top:50%;transform:translate(-50%,-50%);width:min(520px,calc(100vw - 28px));max-height:88vh;overflow:auto;box-shadow:0 24px 70px rgba(0,0,0,.24)}.org-edit-form{padding:0 22px 22px;margin-top:0}.org-edit-form select{width:100%;padding:11px 12px;border:1px solid #cdd9df;border-radius:9px;background:white}.org-modal .drawer-close{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;border:1px solid var(--line);font-size:22px}.org-edit-form .drawer-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}@media(max-width:1100px){.org-grid{grid-template-columns:1fr}.org-summary-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:650px){.org-summary-grid{grid-template-columns:1fr}.org-row{align-items:flex-start;flex-direction:column}.org-actions{width:100%;justify-content:flex-end}}

/* Statutory deduction table maintenance */
.statutory-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}.statutory-tabs a{padding:9px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--muted);font-size:12px;font-weight:800}.statutory-tabs a.active{background:#eaf4f8;color:var(--navy);border-color:#b7d7e5}.statutory-panel .panel-head p{margin:5px 0 0;color:var(--muted);font-size:12px}.statutory-table-wrap{overflow:auto}.statutory-table{min-width:760px}.statutory-table th{white-space:nowrap}.statutory-table td.money{text-align:right;font-variant-numeric:tabular-nums}.statutory-modal{width:min(620px,calc(100vw - 28px))}.statutory-modal .org-edit-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.statutory-modal .org-edit-form>label{display:grid;gap:6px}.statutory-modal .org-edit-form input{width:100%}.statutory-modal .setting-note,.statutory-modal .drawer-actions{grid-column:1/-1}@media(max-width:650px){.statutory-tabs{display:grid;grid-template-columns:1fr 1fr}.statutory-tabs a{text-align:center}.statutory-modal .org-edit-form{grid-template-columns:1fr}.statutory-modal .setting-note,.statutory-modal .drawer-actions{grid-column:1}}

/* Settings back navigation */
.settings-backbar{display:flex;align-items:center;justify-content:flex-start;margin:0 0 14px;position:relative;z-index:2}
.settings-back-button{display:inline-flex!important;align-items:center;gap:7px;min-height:40px;text-decoration:none;white-space:nowrap}
@media(max-width:640px){.settings-backbar{margin-bottom:10px}.settings-back-button{width:100%;justify-content:center}}

/* Global UI color themes: keep navigation and major page banners consistent. */
body[data-ui-theme="esc-blue"]{--navy:#092f4a;--blue:#1367a7;--theme-sidebar-start:#082e49;--theme-sidebar-end:#0b3c5d;--theme-hero-start:#0b3c5d;--theme-hero-mid:#126b9a;--theme-hero-end:#1780b6;--theme-soft:#e8f1f7}
body[data-ui-theme="deep-navy"]{--navy:#10283f;--blue:#315f8b;--theme-sidebar-start:#0d2034;--theme-sidebar-end:#163b5a;--theme-hero-start:#10283f;--theme-hero-mid:#234a6c;--theme-hero-end:#315f8b;--theme-soft:#e8eef4}
body[data-ui-theme="teal"]{--navy:#0b454b;--blue:#137d86;--theme-sidebar-start:#083c42;--theme-sidebar-end:#0b5c63;--theme-hero-start:#0b5057;--theme-hero-mid:#11717a;--theme-hero-end:#168b94;--theme-soft:#e5f3f3}
body[data-ui-theme="slate"]{--navy:#344656;--blue:#607b92;--theme-sidebar-start:#2d3d4b;--theme-sidebar-end:#465c70;--theme-hero-start:#3a4e60;--theme-hero-mid:#526b80;--theme-hero-end:#6a879e;--theme-soft:#edf1f4}
body[data-ui-theme="royal-purple"]{--navy:#3c225f;--blue:#7651a8;--theme-sidebar-start:#321a50;--theme-sidebar-end:#51307a;--theme-hero-start:#3b215d;--theme-hero-mid:#674294;--theme-hero-end:#8761b7;--theme-soft:#f0eaf7}
body[data-ui-theme="indigo"]{--navy:#283b73;--blue:#536fc2;--theme-sidebar-start:#202f5d;--theme-sidebar-end:#354c8c;--theme-hero-start:#27396f;--theme-hero-mid:#405aa0;--theme-hero-end:#617bd0;--theme-soft:#e9edf8}
body[data-ui-theme="emerald"]{--navy:#0d4c3d;--blue:#178266;--theme-sidebar-start:#0a3c31;--theme-sidebar-end:#0f624e;--theme-hero-start:#0d4a3b;--theme-hero-mid:#13705a;--theme-hero-end:#1a9273;--theme-soft:#e6f4ef}
body[data-ui-theme="forest"]{--navy:#24462f;--blue:#4f7b5d;--theme-sidebar-start:#1c3826;--theme-sidebar-end:#315a3d;--theme-hero-start:#24452e;--theme-hero-mid:#3f684a;--theme-hero-end:#5d8767;--theme-soft:#ebf2ed}
body[data-ui-theme="burgundy"]{--navy:#5b2132;--blue:#9a4058;--theme-sidebar-start:#491927;--theme-sidebar-end:#712a3d;--theme-hero-start:#592031;--theme-hero-mid:#803047;--theme-hero-end:#a74a62;--theme-soft:#f7e9ed}
body[data-ui-theme="graphite"]{--navy:#30363d;--blue:#59636e;--theme-sidebar-start:#252a30;--theme-sidebar-end:#3c444d;--theme-hero-start:#30363d;--theme-hero-mid:#464f59;--theme-hero-end:#626d78;--theme-soft:#eef0f2}
body[data-ui-theme="warm-brown"]{--navy:#5a3b2c;--blue:#94664e;--theme-sidebar-start:#493025;--theme-sidebar-end:#704b38;--theme-hero-start:#583a2b;--theme-hero-mid:#79523d;--theme-hero-end:#9c6d52;--theme-soft:#f5ede8}
body[data-ui-theme="rosewood"]{--navy:#542d36;--blue:#8a5662;--theme-sidebar-start:#43232b;--theme-sidebar-end:#663944;--theme-hero-start:#522c35;--theme-hero-mid:#71414d;--theme-hero-end:#945d69;--theme-soft:#f5ebed}
body:not([data-ui-theme]){--theme-sidebar-start:#082e49;--theme-sidebar-end:#0b3c5d;--theme-hero-start:#0b3c5d;--theme-hero-mid:#126b9a;--theme-hero-end:#1780b6;--theme-soft:#e8f1f7}

.sidebar{background:linear-gradient(180deg,var(--theme-sidebar-start),var(--theme-sidebar-end))}
.hero,.payroll-hero,.settings-hero{background:linear-gradient(118deg,var(--theme-hero-start) 0%,var(--theme-hero-mid) 58%,var(--theme-hero-end) 100%);color:#fff;border-color:transparent}
.settings-hero{position:relative;overflow:hidden;box-shadow:0 18px 45px rgba(9,70,101,.14)}
.settings-hero:after{content:"";position:absolute;width:230px;height:230px;border:45px solid rgba(255,255,255,.06);border-radius:50%;right:7%;top:-112px;pointer-events:none}
.settings-hero>div{position:relative;z-index:1}
.settings-hero .eyebrow{color:#b8d8e8}.settings-hero h2{color:#fff}.settings-hero p{color:#d6e7ef}
.settings-hero .settings-status span{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.20);color:#e7f1f6;backdrop-filter:blur(7px)}
.settings-hero .settings-status b{color:#fff}
.report-card>div,.avatar.soft{background:var(--theme-soft)}
.auth-page{background:linear-gradient(118deg,var(--theme-hero-start) 0%,var(--theme-hero-mid) 58%,var(--theme-hero-end) 100%)}
.auth-brand{background:linear-gradient(118deg,var(--theme-hero-start) 0%,var(--theme-hero-mid) 58%,var(--theme-hero-end) 100%)}
.theme-preview-row{display:flex;align-items:center;gap:9px;padding-top:2px}
.theme-swatch{display:inline-block;width:34px;height:34px;border-radius:9px;border:3px solid #fff;box-shadow:0 0 0 1px var(--line),0 4px 10px rgba(23,50,66,.08)}
.theme-swatch-blue{background:linear-gradient(135deg,#0b3c5d,#1780b6)}
.theme-swatch-navy{background:linear-gradient(135deg,#10283f,#315f8b)}
.theme-swatch-teal{background:linear-gradient(135deg,#0b5057,#168b94)}
.theme-swatch-slate{background:linear-gradient(135deg,#3a4e60,#6a879e)}

.theme-preview-row{flex-wrap:wrap}
.theme-swatch-purple{background:linear-gradient(135deg,#3b215d,#8761b7)}
.theme-swatch-indigo{background:linear-gradient(135deg,#27396f,#617bd0)}
.theme-swatch-emerald{background:linear-gradient(135deg,#0d4a3b,#1a9273)}
.theme-swatch-forest{background:linear-gradient(135deg,#24452e,#5d8767)}
.theme-swatch-burgundy{background:linear-gradient(135deg,#592031,#a74a62)}
.theme-swatch-graphite{background:linear-gradient(135deg,#30363d,#626d78)}
.theme-swatch-brown{background:linear-gradient(135deg,#583a2b,#9c6d52)}
.theme-swatch-rosewood{background:linear-gradient(135deg,#522c35,#945d69)}

/* Theme-aware interactive controls — 2026-09-01
   Selected tabs, enabled primary actions, and checked selectors inherit the global UI theme. */
.button.primary,
button.button.primary,
a.button.primary,
.dashboard-filter .dashboard-filter-apply,
.search button,
.module-tabs a.active{
  background:linear-gradient(118deg,var(--theme-hero-start) 0%,var(--theme-hero-mid) 58%,var(--theme-hero-end) 100%);
  color:#fff;
  border-color:transparent;
}
.button.primary:hover:not(:disabled),
button.button.primary:hover:not(:disabled),
a.button.primary:hover,
.dashboard-filter .dashboard-filter-apply:hover:not(:disabled),
.search button:hover,
.module-tabs a.active:hover{
  filter:brightness(1.06);
}
.button.primary:focus-visible,
button.button.primary:focus-visible,
a.button.primary:focus-visible,
.module-tabs a:focus-visible,
.statutory-tabs a:focus-visible{
  outline:3px solid color-mix(in srgb,var(--theme-hero-end) 28%,transparent);
  outline-offset:2px;
}

/* Top-level report/payroll module tabs. */
.module-tabs a.active{
  box-shadow:0 5px 14px color-mix(in srgb,var(--theme-hero-start) 24%,transparent);
}

/* Settings statutory tabs and other pill-style selected tabs. */
.statutory-tabs a.active{
  background:linear-gradient(118deg,var(--theme-hero-start),var(--theme-hero-end));
  color:#fff;
  border-color:transparent;
}

/* Segmented controls: selected option follows the theme instead of plain white. */
.segmented button.active{
  background:linear-gradient(118deg,var(--theme-hero-start),var(--theme-hero-end));
  color:#fff;
  box-shadow:0 3px 10px color-mix(in srgb,var(--theme-hero-start) 20%,transparent);
}

/* Payroll type selector: checked choice follows the theme. */
.payroll-type-box label:has(input:checked){
  border-color:var(--theme-hero-mid);
  background:var(--theme-soft);
  color:var(--navy);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--theme-hero-mid) 35%,transparent);
}
.payroll-type-box label:has(input:checked)::before{
  border-color:var(--theme-hero-mid);
}

/* Native controls use the selected theme where browsers support accent-color. */
input[type="radio"],
input[type="checkbox"],
progress{
  accent-color:var(--theme-hero-mid);
}

/* Keep disabled actions visibly disabled even though their base color is themed. */
.button.primary:disabled,
button.button.primary:disabled,
.dashboard-filter .dashboard-filter-apply:disabled{
  filter:saturate(.45);
  opacity:.48;
}

/* Mobile sidebar outside-tap close + global progress overlay — 2026-09-04 */
.mobile-sidebar-backdrop{display:none;border:0;padding:0;margin:0;background:transparent}
@media(max-width:800px){
  .sidebar{z-index:1002}
  .mobile-sidebar-backdrop{display:block;position:fixed;inset:0;z-index:1001;background:rgba(4,24,36,.42);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility .22s ease}
  .menu-open .mobile-sidebar-backdrop{opacity:1;visibility:visible;pointer-events:auto}
  .menu-open{overflow:hidden}
}
.app-loading-overlay[hidden]{display:none!important}
.app-loading-overlay{position:fixed;inset:0;z-index:14000;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(7,35,51,.30);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.app-loading-card{width:min(300px,calc(100vw - 40px));display:flex;flex-direction:column;align-items:center;gap:9px;padding:26px 22px;border:1px solid rgba(255,255,255,.72);border-radius:20px;background:rgba(255,255,255,.97);box-shadow:0 24px 70px rgba(7,43,61,.22);text-align:center;color:var(--navy)}
.app-loading-card strong{font-size:1rem}.app-loading-card span{color:var(--muted);font-size:.86rem}
.app-loading-donut{width:58px;height:58px;margin-bottom:3px;border:7px solid var(--theme-soft,#e5f0f4);border-top-color:var(--blue);border-right-color:var(--navy);border-radius:50%;animation:app-loading-spin .72s linear infinite}
html.app-is-loading,html.app-is-loading body{overflow:hidden}
@keyframes app-loading-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.app-loading-donut{animation-duration:1.8s}}

/* Mobile navigation polish + iOS-visible loading hand-off — 2026-09-04 */
@media(max-width:800px){
  .sidebar{
    left:0!important;
    transform:translate3d(-104%,0,0);
    transition:transform .28s cubic-bezier(.22,.75,.25,1)!important;
    will-change:transform;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }
  .menu-open .sidebar{
    left:0!important;
    transform:translate3d(0,0,0);
  }
  .mobile-sidebar-backdrop{
    transition:opacity .28s ease,visibility .28s ease!important;
  }

  html.mobile-module-loading .app-loading-overlay{
    z-index:1000;
    background:rgba(7,35,51,.20);
    backdrop-filter:blur(1px);
    -webkit-backdrop-filter:blur(1px);
  }
  html.mobile-module-loading body.menu-open .sidebar{z-index:1003}
  html.mobile-module-loading body.menu-open .mobile-sidebar-backdrop{z-index:1002}

  .app-loading-card{
    width:min(260px,calc(100vw - 48px));
    padding:20px 18px;
    border-radius:18px;
  }
  .app-loading-donut{
    width:52px;
    height:52px;
    border-width:6px;
  }
}

.app-loading-overlay{
  opacity:1;
  visibility:visible;
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
}

/* Dashboard payroll-cost tree + period donut series (2026-09-04) */
.cost-tree-row{border:0;border-radius:12px}.cost-tree-row[open]{background:#f8fbff;box-shadow:inset 0 0 0 1px #dbe7f4}.cost-tree-row>summary{list-style:none;cursor:pointer;padding:8px 10px;border-radius:10px;transition:background .18s ease}.cost-tree-row>summary::-webkit-details-marker{display:none}.cost-tree-row>summary:hover{background:#f4f8fc}.cost-tree-row[open]>summary{background:#eef5fc}.cost-tree-row .cost-row{grid-template-columns:minmax(180px,1.1fr) 3fr minmax(130px,.8fr) 28px}.cost-more{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font-size:22px;line-height:1;color:#315f9b;font-weight:800}.cost-tree-row[open] .cost-more{background:#dceaf8}.payroll-period-details{display:grid;gap:14px;padding:8px 12px 16px}.payroll-period-group{display:grid;grid-template-columns:minmax(145px,.7fr) 3fr;gap:14px;align-items:center;padding:12px 0;border-top:1px solid #e5edf5}.payroll-period-title b,.payroll-period-title small{display:block}.payroll-period-title small{color:#64748b;font-size:11px;margin-top:3px}.payroll-donut-series{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}.payroll-period-donut{width:96px;text-align:center;display:grid;justify-items:center;gap:3px}.payroll-mini-donut{--p:0;width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--theme-primary,#315f9b) calc(var(--p)*1%),#e5edf5 0);position:relative}.payroll-mini-donut:after{content:"";position:absolute;inset:8px;border-radius:50%;background:#fff}.payroll-mini-donut>div{position:relative;z-index:1;display:grid;place-items:center}.payroll-mini-donut strong{font-size:11px;line-height:1.05;font-variant-numeric:tabular-nums;color:#1f3550}.payroll-period-donut>b{font-size:12px}.payroll-period-donut>small{font-size:10px;color:#64748b}.payroll-period-donut>span{font-size:9px;color:#475569;font-variant-numeric:tabular-nums}.payroll-donut-empty{font-size:11px;color:#94a3b8;padding:10px 0}
@media(max-width:1100px){.cost-tree-row .cost-row{grid-template-columns:1fr 28px}.cost-tree-row .cost-row>div:first-child{grid-column:1}.cost-tree-row .cost-track{grid-column:1/-1}.cost-tree-row .cost-row>strong{grid-column:1}.cost-tree-row .cost-more{grid-column:2;grid-row:1}.payroll-period-group{grid-template-columns:1fr}.payroll-donut-series{flex-wrap:nowrap;overflow-x:auto;padding-bottom:5px;scrollbar-width:thin}}
@media(max-width:600px){.payroll-period-details{padding:6px 10px 14px}.payroll-donut-series{gap:10px}.payroll-period-donut{min-width:82px;width:82px}.payroll-mini-donut{width:66px;height:66px}.cost-tree-row>summary{padding:8px}.cost-tree-row .cost-row{gap:8px}}

/* Dashboard donut varied accent palette (2026-09-04)
   Deterministic visual variety: colors remain stable across refreshes. */
.dashboard-donut-grid .donut-kpi:nth-child(1) .donut-chart{--donut-accent:#1677ad}
.dashboard-donut-grid .donut-kpi:nth-child(2) .donut-chart{--donut-accent:#d49a28}
.dashboard-donut-grid .donut-kpi:nth-child(3) .donut-chart{--donut-accent:#159c91}
.dashboard-donut-grid .donut-kpi:nth-child(4) .donut-chart{--donut-accent:#d9546b}
.dashboard-donut-grid .donut-kpi:nth-child(5) .donut-chart{--donut-accent:#7354c7}
.dashboard-donut-grid .donut-chart{background:conic-gradient(var(--donut-accent,var(--theme-primary,#315f9b)) calc(var(--p)*1%),#e7eef3 0)!important}

/* Payroll period donuts: intentionally varied, but stable rather than changing on reload. */
.payroll-period-details .payroll-period-group:nth-child(1) .payroll-period-donut:nth-child(1) .payroll-mini-donut{--donut-accent:#2f67a7}
.payroll-period-details .payroll-period-group:nth-child(1) .payroll-period-donut:nth-child(2) .payroll-mini-donut{--donut-accent:#7354c7}
.payroll-period-details .payroll-period-group:nth-child(2) .payroll-period-donut:nth-child(1) .payroll-mini-donut{--donut-accent:#159c91}
.payroll-period-details .payroll-period-group:nth-child(2) .payroll-period-donut:nth-child(2) .payroll-mini-donut{--donut-accent:#d49a28}
.payroll-period-details .payroll-period-group:nth-child(3) .payroll-period-donut:nth-child(1) .payroll-mini-donut{--donut-accent:#2f67a7}
.payroll-period-details .payroll-period-group:nth-child(3) .payroll-period-donut:nth-child(2) .payroll-mini-donut{--donut-accent:#159c91}
.payroll-period-details .payroll-period-group:nth-child(3) .payroll-period-donut:nth-child(3) .payroll-mini-donut{--donut-accent:#7354c7}
.payroll-period-details .payroll-period-group:nth-child(3) .payroll-period-donut:nth-child(4) .payroll-mini-donut{--donut-accent:#d49a28}
.payroll-period-details .payroll-period-group:nth-child(3) .payroll-period-donut:nth-child(5) .payroll-mini-donut{--donut-accent:#d56f52}
.payroll-mini-donut{background:conic-gradient(var(--donut-accent,var(--theme-primary,#315f9b)) calc(var(--p)*1%),#e7eef3 0)}
.payroll-period-donut:nth-child(6n+1) .payroll-mini-donut{--donut-accent:#2f67a7}
.payroll-period-donut:nth-child(6n+2) .payroll-mini-donut{--donut-accent:#159c91}
.payroll-period-donut:nth-child(6n+3) .payroll-mini-donut{--donut-accent:#7354c7}
.payroll-period-donut:nth-child(6n+4) .payroll-mini-donut{--donut-accent:#d49a28}
.payroll-period-donut:nth-child(6n+5) .payroll-mini-donut{--donut-accent:#d56f52}
.payroll-period-donut:nth-child(6n) .payroll-mini-donut{--donut-accent:#3f8b63}

/* Mobile persistent app header — 2026-09-04
   Keep the current module title, notification action and drawer trigger reachable
   while the user scrolls long HRIS pages. */
@media(max-width:800px){
  .topbar{
    position:sticky;
    top:0;
    z-index:1000;
    background:rgba(255,255,255,.97);
    box-shadow:0 6px 18px rgba(23,50,66,.08);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
  }
  .menu-button{
    flex:0 0 44px;
    width:44px;
    height:44px;
    touch-action:manipulation;
  }
  .top-actions{
    flex:0 0 auto;
  }
  .sidebar{
    height:100dvh;
    max-height:100dvh;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
}

/* PWA install link above the logged-in user */
.sidebar-install-wrap{
    margin-top:auto;
    padding:0 14px 10px;
}
.sidebar-install-link{
    width:100%;
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:12px;
    background:rgba(255,255,255,.08);
    color:#fff;
    text-align:left;
    cursor:pointer;
    transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.sidebar-install-link:hover{
    background:rgba(255,255,255,.15);
    border-color:rgba(255,255,255,.28);
    transform:translateY(-1px);
}
.sidebar-install-link[hidden]{display:none!important}
.sidebar-install-icon{
    width:28px;
    height:28px;
    flex:0 0 28px;
    display:grid;
    place-items:center;
    border-radius:9px;
    background:rgba(255,255,255,.12);
    font-size:17px;
    font-weight:900;
}
.sidebar-install-link span:last-child{min-width:0}
.sidebar-install-link b,
.sidebar-install-link small{display:block}
.sidebar-install-link b{font-size:13px;line-height:1.2}
.sidebar-install-link small{margin-top:2px;color:rgba(255,255,255,.70);font-size:11px}
.sidebar-install-wrap + .sidebar-foot{margin-top:0}
@media(max-width:900px){
    .sidebar-install-wrap{padding-bottom:8px}
    .sidebar-install-link{min-height:48px}
}

/* Global HRIS dropdown standard — match Dashboard controls across every module */
.app-main select,
.main-content select,
.page-content select,
.content select,
.account-drawer select,
.modal select,
.drawer select,
.payroll-page select,
.payroll-create select,
#payroll-create-form select,
.payroll-detail-modal select {
  box-sizing:border-box;
  width:100%;
  min-width:0;
  max-width:100%;
  min-height:52px;
  margin:0;
  padding:0 42px 0 16px;
  border:1px solid var(--line);
  border-radius:10px;
  background-color:#fff;
  color:var(--ink);
  font:500 14px/1.2 'DM Sans',sans-serif;
  outline:0;
  accent-color:var(--theme-accent,var(--blue));
}
.app-main select:focus,
.main-content select:focus,
.page-content select:focus,
.content select:focus,
.account-drawer select:focus,
.modal select:focus,
.drawer select:focus,
.payroll-page select:focus,
.payroll-create select:focus,
#payroll-create-form select:focus,
.payroll-detail-modal select:focus {
  border-color:var(--theme-accent,var(--blue));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--theme-accent,var(--blue)) 14%,transparent);
}
.app-main select:disabled,
.main-content select:disabled,
.page-content select:disabled,
.content select:disabled,
.account-drawer select:disabled,
.modal select:disabled,
.drawer select:disabled,
.payroll-page select:disabled,
.payroll-create select:disabled,
#payroll-create-form select:disabled,
.payroll-detail-modal select:disabled {
  background-color:#f5f8fa;
  color:var(--muted);
  cursor:not-allowed;
}
@media(max-width:800px){
  .app-main select,
  .main-content select,
  .page-content select,
  .content select,
  .account-drawer select,
  .modal select,
  .drawer select,
  .payroll-page select,
  .payroll-create select,
  #payroll-create-form select,
  .payroll-detail-modal select {
    min-height:52px;
    font-size:16px; /* prevents iOS Safari zoom and matches Dashboard mobile controls */
  }
}

/* Dashboard payroll tree: statutory deductions/contributions by rank */
.payroll-rank-row-expanded{display:block}
.payroll-rank-identity{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:9px;border-bottom:1px solid var(--line,#dbe5ec)}
.payroll-rank-identity small{margin:0!important}
.payroll-rank-summary{display:grid;grid-template-columns:repeat(2,minmax(150px,1fr));gap:10px;margin-top:10px}
.payroll-rank-summary>div,.payroll-rank-statutory>div{background:rgba(246,249,251,.85);border:1px solid var(--line,#dbe5ec);border-radius:10px;padding:9px 10px}
.payroll-rank-summary small,.payroll-rank-statutory small{display:block;color:var(--muted,#60758a);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.payroll-rank-summary strong,.payroll-rank-statutory strong{display:block;margin-top:3px;font-size:13px;color:var(--ink,#142638)}
.payroll-rank-statutory{display:grid;grid-template-columns:repeat(7,minmax(105px,1fr));gap:8px;margin-top:8px}
@media(max-width:1100px){.payroll-rank-statutory{grid-template-columns:repeat(4,minmax(120px,1fr))}}
@media(max-width:700px){
  .payroll-rank-identity{display:block}
  .payroll-rank-identity small{margin-top:3px!important}
  .payroll-rank-summary{grid-template-columns:1fr 1fr}
  .payroll-rank-statutory{grid-template-columns:1fr 1fr}
}
@media(max-width:420px){.payroll-rank-summary{grid-template-columns:1fr}}

/* Dashboard payroll tree: compact per-rank financial table */
.payroll-rank-panel{min-width:0}
.payroll-rank-table-wrap{
  width:100%;
  overflow-x:auto;
  margin-top:12px;
  border:1px solid var(--line,#dbe5ec);
  border-radius:12px;
  background:#fff;
  -webkit-overflow-scrolling:touch;
}
.payroll-rank-table{
  width:100%;
  min-width:1320px;
  border-collapse:separate;
  border-spacing:0;
  font-size:12px;
  color:var(--ink,#142638);
}
.payroll-rank-table th,.payroll-rank-table td{
  padding:10px 12px;
  border-right:1px solid var(--line,#dbe5ec);
  border-bottom:1px solid var(--line,#dbe5ec);
  white-space:nowrap;
  vertical-align:middle;
}
.payroll-rank-table tr>*:last-child{border-right:0}
.payroll-rank-table thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:#f4f8fb;
  color:var(--muted,#60758a);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.035em;
}
.payroll-rank-table thead th:first-child,
.payroll-rank-table tbody th,
.payroll-rank-table tfoot th:first-child{
  position:sticky;
  left:0;
  z-index:3;
}
.payroll-rank-table thead th:first-child{z-index:4;background:#eef5f9}
.payroll-rank-table tbody th{background:#fff;text-align:left;font-weight:800}
.payroll-rank-table tbody tr:nth-child(even) td,
.payroll-rank-table tbody tr:nth-child(even) th{background:#fbfdfe}
.payroll-rank-table .num{text-align:right;font-variant-numeric:tabular-nums}
.payroll-rank-table .total-cost{font-weight:800;color:var(--theme-accent,var(--blue))}
.payroll-rank-table tfoot th,.payroll-rank-table tfoot td{
  background:#edf5f2;
  font-weight:900;
  border-bottom:0;
  border-top:2px solid color-mix(in srgb,var(--theme-accent,var(--blue)) 45%,var(--line,#dbe5ec));
}
.payroll-rank-table tfoot th:first-child{background:#e7f1ed}
@media(max-width:700px){
  .payroll-rank-table-wrap{margin-top:10px;border-radius:10px}
  .payroll-rank-table{min-width:1240px;font-size:11px}
  .payroll-rank-table th,.payroll-rank-table td{padding:9px 10px}
}

/* Dashboard payroll tree: PDF / print action */
.payroll-period-details{position:relative}
.payroll-detail-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 2px 12px;border-bottom:1px solid var(--line,#dbe5ec)}
.payroll-detail-print-title{min-width:0}
.payroll-detail-print-title b,.payroll-detail-print-title small{display:block}
.payroll-detail-print-title b{font-size:13px;color:var(--ink,#142638)}
.payroll-detail-print-title small{margin-top:2px;color:var(--muted,#60758a);font-size:11px}
.payroll-pdf-button{margin-left:auto;white-space:nowrap;min-height:38px;padding:8px 16px;border-color:#21a34a!important;color:#16823b!important;background:#fff!important;font-weight:800}
.payroll-pdf-button:hover{background:#f0fbf4!important;border-color:#16823b!important;color:#11682f!important}
@media(max-width:640px){
  .payroll-detail-toolbar{align-items:flex-start;padding:8px 0 10px}
  .payroll-detail-print-title small{font-size:10px}
  .payroll-pdf-button{min-height:36px;padding:7px 12px;font-size:12px}
}

/* Dashboard payroll rank table: keep Total visible at far right */
.payroll-rank-table .total-cost-col{
  position:sticky;
  right:0;
  z-index:3;
  min-width:132px;
  background:#f5faf7;
  box-shadow:-1px 0 0 var(--line,#dbe5ec),-7px 0 12px rgba(21,45,66,.05);
}
.payroll-rank-table thead .total-cost-col{
  z-index:5;
  background:#eaf4ef;
}
.payroll-rank-table tbody tr:nth-child(even) .total-cost-col{background:#f1f8f4}
.payroll-rank-table tfoot .total-cost-col{z-index:5;background:#dfeee8}
@media(max-width:700px){
  .payroll-rank-table .total-cost-col{min-width:118px}
}

/* 2026-09-04 Mobile fix: keep the per-rank payroll table inside its own horizontal swipe region. */
.cost-chart,
.cost-tree-row,
.payroll-period-details,
.payroll-rank-details,
.payroll-rank-panel{
  min-width:0;
  max-width:100%;
}
.payroll-rank-details{width:100%;}
.payroll-rank-table-wrap{
  display:block;
  width:100%;
  max-width:100%;
  overflow-x:scroll;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y;
  overscroll-behavior-x:contain;
  scrollbar-gutter:stable;
}
@media(max-width:700px){
  .payroll-rank-table-wrap{
    position:relative;
    cursor:grab;
  }
  .payroll-rank-table{
    width:max-content;
    min-width:1240px;
  }
  /* Sticky edge cells were intercepting the iOS drag gesture on a large part of the viewport. */
  .payroll-rank-table thead th:first-child,
  .payroll-rank-table tbody th,
  .payroll-rank-table tfoot th:first-child,
  .payroll-rank-table .total-cost-col{
    position:static;
  }
  .payroll-rank-table-wrap:after{
    content:'Swipe left/right to view all columns';
    position:sticky;
    left:10px;
    display:inline-block;
    margin:7px 10px 8px;
    padding:4px 8px;
    border-radius:999px;
    background:rgba(20,38,56,.72);
    color:#fff;
    font-size:10px;
    font-weight:700;
    pointer-events:none;
  }
}

/* 2026-09-06 Internal Messages */
.nav-message-badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:#ef5350;color:#fff;font-size:10px;font-weight:900;line-height:1}
.messages-hero{align-items:center}.messages-shell{display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr);min-height:620px;border:1px solid var(--line,#dbe5ec);border-radius:22px;background:#fff;overflow:hidden;box-shadow:0 14px 34px rgba(28,52,72,.06)}
.messages-list-panel{border-right:1px solid var(--line,#dbe5ec);background:#f8fbfd;min-width:0}.messages-list-head,.message-thread-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 20px;border-bottom:1px solid var(--line,#dbe5ec);background:#fff}.messages-list-head h3,.message-thread-head h3{margin:2px 0 0}.message-conversation-list{max-height:720px;overflow:auto}.message-conversation{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:11px;align-items:center;padding:13px 16px;color:inherit;text-decoration:none;border-bottom:1px solid #e8eef3;transition:.18s ease}.message-conversation:hover{background:#eef6fb}.message-conversation.active{background:color-mix(in srgb,var(--theme-accent,#147d64) 10%,white);box-shadow:inset 3px 0 0 var(--theme-accent,#147d64)}
.message-avatar{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:0 0 40px;background:linear-gradient(145deg,var(--theme-accent,#147d64),#2aa184);color:#fff;font-weight:900}.message-conversation-copy{min-width:0}.message-conversation-copy b,.message-conversation-copy small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.message-conversation-copy small{color:var(--muted,#6b8091);margin-top:3px}.message-conversation-meta{text-align:right;display:grid;justify-items:end;gap:5px}.message-conversation-meta small{font-size:10px;color:var(--muted,#7b8e9f);white-space:nowrap}.message-unread-badge{min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:var(--theme-accent,#147d64);color:#fff;font-size:10px;font-weight:900}
.message-thread-panel{display:flex;flex-direction:column;min-width:0;background:linear-gradient(180deg,#fbfdff,#f5f9fb)}.message-thread-head{flex:0 0 auto}.message-thread-head small{color:var(--muted,#71879a)}.message-thread{flex:1;min-height:420px;max-height:650px;overflow-y:auto;padding:22px 26px;scroll-behavior:smooth}.message-bubble-row{display:flex;margin:8px 0}.message-bubble-row.mine{justify-content:flex-end}.message-bubble{max-width:min(74%,680px);padding:10px 13px;border-radius:17px 17px 17px 5px;background:#fff;border:1px solid #dfe8ef;box-shadow:0 3px 10px rgba(25,50,70,.04)}.message-bubble-row.mine .message-bubble{border-radius:17px 17px 5px 17px;background:color-mix(in srgb,var(--theme-accent,#147d64) 13%,white);border-color:color-mix(in srgb,var(--theme-accent,#147d64) 28%,white)}.message-bubble p{margin:3px 0 5px;line-height:1.42;overflow-wrap:anywhere}.message-sender{display:block;font-size:11px;color:var(--theme-accent,#147d64);margin-bottom:3px}.message-bubble time{display:block;text-align:right;color:#788c9d;font-size:9px;margin-top:4px}.message-attachment{display:block;margin:7px 0 3px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.65);text-decoration:none;font-weight:700;color:var(--theme-accent,#147d64);overflow-wrap:anywhere}
.message-composer{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:9px;align-items:end;padding:13px 16px 10px;border-top:1px solid var(--line,#dbe5ec);background:#fff}.message-composer textarea{width:100%;min-height:44px;max-height:130px;resize:none;border:1px solid #d5e1e9;border-radius:16px;padding:11px 14px;font:inherit;background:#f9fbfc;outline:none}.message-composer textarea:focus{border-color:var(--theme-accent,#147d64);box-shadow:0 0 0 3px color-mix(in srgb,var(--theme-accent,#147d64) 12%,transparent)}.message-attach-button{width:44px;height:44px;border:1px solid #d5e1e9;border-radius:14px;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:20px}.message-attachment-help,.message-readonly-note{padding:0 18px 12px;background:#fff;color:var(--muted,#6f8496);font-size:10px}.message-readonly-note{padding:14px 18px;border-top:1px solid var(--line,#dbe5ec);font-weight:700}.message-empty-state{margin:auto;text-align:center;max-width:430px;padding:45px 24px}.message-empty-icon{width:72px;height:72px;margin:0 auto 14px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--theme-accent,#147d64) 10%,white);font-size:34px;color:var(--theme-accent,#147d64)}
.message-new-drawer,.message-members-drawer{width:min(520px,94vw);z-index:1301}.message-start-form{display:grid;gap:16px}.message-start-form>label{display:grid;gap:7px;font-weight:800}.message-recipient-grid{display:grid;gap:7px;max-height:420px;overflow:auto;border:1px solid #dbe5ec;border-radius:14px;padding:8px}.message-recipient-choice{display:flex;gap:10px;align-items:center;padding:9px;border-radius:10px;cursor:pointer}.message-recipient-choice:hover{background:#f2f7fa}.message-recipient-choice span{display:grid}.message-recipient-choice small{color:var(--muted,#728799);font-weight:500}.message-members-list{display:grid;gap:8px}.message-member{display:flex;align-items:center;gap:11px;padding:10px;border:1px solid #e1e9ef;border-radius:13px}.message-member span:last-child{display:grid}.message-member small{color:var(--muted,#728799)}
@media(max-width:860px){.messages-shell{display:block;min-height:0;border-radius:18px}.messages-list-panel{border-right:0;border-bottom:1px solid var(--line,#dbe5ec)}.message-conversation-list{max-height:260px}.message-thread{min-height:400px;max-height:58vh;padding:16px 13px}.message-bubble{max-width:86%}.messages-list-head{padding:14px}.message-thread-head{position:sticky;top:0;z-index:2;padding:13px 15px}.message-composer{position:sticky;bottom:0;z-index:2;padding:10px;grid-template-columns:42px minmax(0,1fr) auto}.message-composer button{min-height:44px;padding-left:14px;padding-right:14px}.messages-hero{gap:10px}}
@media(max-width:540px){.messages-hero{display:flex;align-items:flex-start}.messages-hero .primary{padding:9px 12px;font-size:12px}.message-conversation{grid-template-columns:38px minmax(0,1fr) auto;padding:10px 12px}.message-avatar{width:36px;height:36px;flex-basis:36px}.message-thread-head .message-members-button{font-size:11px;padding:7px 9px}.message-bubble{max-width:91%}.message-composer textarea{font-size:16px}}
.message-new-drawer,.message-members-drawer{position:fixed;right:0;top:0;height:100vh;background:#fff;box-shadow:-20px 0 50px rgba(5,25,38,.22);transform:translateX(105%);transition:transform .24s ease;overflow:auto}
.message-new-drawer.open,.message-members-drawer.open{transform:none}
[data-message-modal-backdrop]:not([hidden]){display:block;opacity:1;visibility:visible;z-index:1300}
.message-new-drawer .drawer-body,.message-members-drawer .drawer-body{padding:20px 22px 30px}

/* Messages refinement: employee photos + lightweight 5-second unread watcher */
.message-photo-avatar{position:relative;overflow:hidden}.message-photo-avatar>span{display:flex;width:100%;height:100%;align-items:center;justify-content:center}.message-photo-avatar>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}.message-photo-avatar.has-photo>img{display:block}.message-bubble-row.theirs{display:flex;align-items:flex-end;gap:8px}.message-bubble-avatar{width:32px;height:32px;flex-basis:32px;margin-bottom:2px}.message-envelope{position:relative;text-decoration:none}.message-envelope.has-unread{font-weight:900}.message-envelope-badge[hidden],.nav-message-badge[hidden]{display:none!important}

/* 2026-09-06 Messages: inline image viewer, attachment holder, and local send progress */
.message-selected-attachment{grid-column:2/4;margin:0 0 2px}.message-selected-attachment[hidden]{display:none!important}
.message-compose-image-preview,.message-compose-file-preview{position:relative;display:flex;align-items:center;gap:10px;width:min(360px,100%);padding:8px;border:1px solid #dce7ed;border-radius:14px;background:#f7fafc}
.message-compose-image-preview{width:112px;height:112px;padding:0;overflow:hidden;background:#eef4f7}.message-compose-image-preview img{width:100%;height:100%;object-fit:cover;display:block}.message-compose-image-preview span{position:absolute;left:0;right:0;bottom:0;padding:18px 7px 6px;background:linear-gradient(transparent,rgba(0,0,0,.68));color:#fff;font-size:9px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.message-compose-file-preview>span:nth-child(2){min-width:0;display:grid}.message-compose-file-preview b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message-compose-file-preview small{color:var(--muted,#718597)}.message-compose-file-icon{font-size:24px}
.message-compose-remove{position:absolute;top:5px;right:5px;width:25px;height:25px;border:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(15,31,43,.82);color:#fff;font-size:17px;cursor:pointer;z-index:2}
.message-image-card{display:block;width:min(300px,100%);margin:7px 0 3px;padding:0;border:0;border-radius:12px;overflow:hidden;background:#edf3f6;text-align:left;cursor:zoom-in}.message-image-card img{display:block;width:100%;max-height:280px;object-fit:cover}.message-image-card span{display:block;padding:6px 9px;font-size:10px;font-weight:700;color:var(--muted,#687e90);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.message-download-link{display:inline-flex;width:auto;padding:5px 8px;font-size:10px}
.message-image-viewer[hidden]{display:none!important}.message-image-viewer{position:fixed;inset:0;z-index:16000;display:flex;align-items:center;justify-content:center;padding:18px}.message-image-viewer-backdrop{position:absolute;inset:0;border:0;background:rgba(3,17,27,.78);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}.message-image-viewer-card{position:relative;z-index:1;width:min(980px,96vw);max-height:94vh;display:flex;flex-direction:column;border-radius:18px;background:#fff;overflow:hidden;box-shadow:0 25px 80px rgba(0,0,0,.35)}.message-image-viewer-head,.message-image-viewer-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:1px solid #e4ebef}.message-image-viewer-head strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message-image-viewer-foot{justify-content:flex-end;border-top:1px solid #e4ebef;border-bottom:0}.message-image-viewer-body{display:flex;align-items:center;justify-content:center;min-height:220px;overflow:auto;background:#111c23}.message-image-viewer-body img{display:block;max-width:100%;max-height:76vh;object-fit:contain}
.message-send-state{display:flex;align-items:center;gap:6px;min-width:120px;margin-top:6px;color:#718496;font-size:9px}.message-send-spinner{width:11px;height:11px;border:2px solid #cfdae1;border-top-color:var(--theme-accent,#147d64);border-radius:50%;animation:message-send-spin .7s linear infinite}.message-upload-progress{width:72px;height:4px;border-radius:99px;background:#dfe8ed;overflow:hidden}.message-upload-progress i{display:block;width:0;height:100%;background:var(--theme-accent,#147d64);transition:width .12s linear}.message-pending-row .message-bubble{opacity:.82}.message-send-failed .message-bubble{border-color:#e58b8b;background:#fff4f4}.message-send-failed .message-send-state{color:#b33b3b;font-weight:700}.message-pending-image{width:min(220px,55vw);border-radius:10px;overflow:hidden}.message-pending-image img{display:block;width:100%;max-height:220px;object-fit:cover}.message-pending-file{padding:8px 9px;border-radius:10px;background:rgba(255,255,255,.7);font-weight:700}.message-composer[data-sending="1"]{opacity:.96}.message-composer button:disabled{opacity:.6;cursor:wait}
@keyframes message-send-spin{to{transform:rotate(360deg)}}
@media(max-width:540px){.message-selected-attachment{grid-column:1/4}.message-compose-image-preview{width:96px;height:96px}.message-image-viewer{padding:8px}.message-image-viewer-card{width:100%;max-height:96vh;border-radius:14px}.message-image-viewer-body img{max-height:80vh}}
/* Messages refinement: searchable inbox, mobile inbox/thread navigation, live toast */
.message-conversation-search{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line,#dbe5ec);background:#fff}.message-conversation-search span{color:var(--muted,#6b8091);font-size:18px}.message-conversation-search input{width:100%;min-width:0;border:1px solid var(--line,#dbe5ec);border-radius:12px;padding:9px 11px;background:#f8fbfd;outline:none}.message-conversation-search input:focus{border-color:var(--theme-accent,#147d64);box-shadow:0 0 0 3px color-mix(in srgb,var(--theme-accent,#147d64) 12%,transparent)}
.message-mobile-back{display:none;width:36px;height:36px;border-radius:10px;align-items:center;justify-content:center;text-decoration:none;color:var(--theme-accent,#147d64);font-size:30px;line-height:1;border:1px solid var(--line,#dbe5ec);background:#fff;flex:0 0 auto}.message-live-toast{position:fixed;right:22px;top:78px;z-index:9999;min-width:260px;max-width:min(380px,calc(100vw - 32px));display:grid;gap:3px;text-align:left;border:1px solid color-mix(in srgb,var(--theme-accent,#147d64) 32%,#dbe5ec);border-radius:14px;padding:12px 14px;background:#fff;color:#183242;box-shadow:0 16px 38px rgba(20,45,65,.18);opacity:0;transform:translateY(-10px);pointer-events:none;transition:.2s ease}.message-live-toast.show{opacity:1;transform:none;pointer-events:auto}.message-live-toast b{color:var(--theme-accent,#147d64)}.message-live-toast span{font-size:12px;color:var(--muted,#6b8091);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:860px){.messages-shell.has-active-thread .messages-list-panel{display:none}.messages-shell:not(.has-active-thread) .message-thread-panel{display:none}.messages-shell.has-active-thread .message-mobile-back{display:inline-flex}.message-thread-head{justify-content:flex-start}.message-thread-head .message-members-button{margin-left:auto}.message-conversation-list{max-height:calc(100vh - 330px);min-height:360px}.message-live-toast{top:82px;right:12px;left:12px;max-width:none;min-width:0}}


/* 2026-09-06 Messages: browser-neutral New Message drawer.
   Same right-side drawer behavior on Windows Chrome, Android Chrome, iPhone Safari, and desktop Safari. */
.message-drawer-open{overflow:hidden!important}
.message-new-drawer,.message-members-drawer{
  position:fixed!important;
  z-index:1301!important;
  right:0!important;left:auto!important;top:0!important;bottom:auto!important;
  width:min(480px,100vw)!important;height:100dvh!important;max-height:none!important;
  background:#fff!important;border-radius:0!important;
  box-shadow:-20px 0 50px rgba(5,25,38,.22)!important;
  transform:translate3d(105%,0,0)!important;
  visibility:visible!important;pointer-events:none!important;
  transition:transform .24s ease!important;overflow:auto!important;
  -webkit-overflow-scrolling:touch;
}
.message-new-drawer.open,.message-members-drawer.open,
.message-new-drawer[aria-hidden="false"],.message-members-drawer[aria-hidden="false"]{
  transform:translate3d(0,0,0)!important;pointer-events:auto!important;
}
[data-message-modal-backdrop]:not([hidden]){display:block!important;opacity:1!important;visibility:visible!important;z-index:1300!important}
.message-new-link,[data-message-new]{touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer}
.message-new-drawer .drawer-head,.message-members-drawer .drawer-head{position:sticky;top:0;z-index:3;background:#fff}
@media(max-width:540px){
  .message-new-drawer,.message-members-drawer{width:min(420px,94vw)!important}
}

/* 2026-09-06 Messages: make the complete New Message control tappable. */
.message-new-link,[data-message-new]{
  position:relative!important;
  z-index:4!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
  -webkit-user-select:none;
  user-select:none;
}
.message-new-link::before,[data-message-new]::before{
  content:"";
  position:absolute;
  inset:-3px;
  pointer-events:auto;
}

/* Messages: edit, selection and deletion */
.message-thread-actions{margin-left:auto;display:flex;align-items:center;gap:8px;position:relative}.message-conversation-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:45;min-width:210px;background:#fff;border:1px solid var(--line,#dfe5ec);border-radius:12px;box-shadow:0 12px 32px rgba(15,23,42,.16);padding:6px}.message-conversation-menu button,.message-conversation-menu form button,.message-item-menu-panel button{width:100%;border:0;background:transparent;text-align:left;padding:9px 11px;border-radius:8px;cursor:pointer;color:inherit}.message-conversation-menu button:hover,.message-item-menu-panel button:hover{background:rgba(15,23,42,.06)}.danger-text{color:#b42318!important}.message-meta-line{display:flex;align-items:center;justify-content:flex-end;gap:5px;position:relative}.message-item-menu{border:0;background:transparent;padding:0 4px;cursor:pointer;opacity:.62}.message-item-menu-panel{position:absolute;right:0;bottom:22px;z-index:40;min-width:130px;background:#fff;color:#1f2937;border:1px solid #dfe5ec;border-radius:10px;box-shadow:0 10px 26px rgba(15,23,42,.16);padding:5px}.message-selection-bar{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;border-bottom:1px solid var(--line,#dfe5ec);background:var(--surface,#fff)}.message-selection-bar span{display:flex;gap:8px}.message-selection-bar button{border:0;background:transparent;padding:7px 9px;cursor:pointer}.message-select-check{display:none;flex:0 0 28px;width:28px;height:28px;border-radius:50%;border:2px solid #aeb8c5;background:#fff;color:transparent;align-items:center;justify-content:center;cursor:pointer}.message-thread.selection-mode .message-select-check{display:flex}.message-bubble-row.selected .message-select-check{background:var(--primary,#2563eb);border-color:var(--primary,#2563eb);color:#fff}.message-bubble-row.selected .message-bubble{outline:2px solid color-mix(in srgb,var(--primary,#2563eb) 45%,transparent)}.message-deleted-text{font-style:italic;opacity:.65}.message-bubble-row:has(.message-deleted-text) .message-item-menu{display:none}@media(max-width:720px){.message-members-button{display:none}.message-conversation-menu{position:fixed;right:12px;top:70px;left:auto}.message-thread-actions{gap:3px}.message-selection-bar{position:sticky;top:0;z-index:20}}

/* Messages mobile inbox access + viewport-aware message menu */
.message-item-menu-panel.open-down{bottom:auto;top:22px}
@media(max-width:860px){.message-mobile-back{width:auto;min-width:92px;height:40px;padding:0 10px;gap:6px;font-size:22px}.message-mobile-back b{font-size:14px;line-height:1;font-weight:700}.message-mobile-back em{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:color-mix(in srgb,var(--theme-accent,#147d64) 12%,white);color:var(--theme-accent,#147d64);font-size:11px;font-style:normal;font-weight:700}.message-thread-head>div:nth-child(2){min-width:0}.message-thread-head>div:nth-child(2) h3{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}

/* Messages: reliable chat-inbox access + unclipped message action menu */
.message-inbox-return{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-width:92px;height:40px;padding:0 10px;border:1px solid var(--line,#dbe5ec);
  border-radius:12px;background:#fff;color:var(--theme-accent,#147d64);
  text-decoration:none;font-weight:700;flex:0 0 auto;
}
.message-inbox-return>span{font-size:22px;line-height:1}
.message-inbox-return b{font-size:14px;line-height:1}
.message-inbox-return em{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:color-mix(in srgb,var(--theme-accent,#147d64) 12%,white);font-size:11px;font-style:normal;font-weight:800}
@media(min-width:861px){.message-inbox-return{display:none}}
@media(max-width:860px){
  .message-inbox-return{display:inline-flex!important}
  .message-thread-head{display:flex!important;align-items:center!important;gap:10px!important}
  .message-thread-head>div:nth-of-type(1){min-width:0;flex:1}
  .message-thread-actions{margin-left:auto!important}
}
.message-item-menu-panel.viewport-menu{
  position:fixed!important;z-index:10050!important;min-width:150px!important;max-width:calc(100vw - 20px)!important;
  margin:0!important;transform:none!important;overflow:visible!important;
  box-shadow:0 14px 34px rgba(15,23,42,.24)!important;
}
.message-item-menu-panel.viewport-menu[hidden]{display:none!important}


/* 2026-09-06 Messages: conversation-first inbox with browser-neutral slide drawer.
   The inbox remains the page; choosing a chat opens one conversation drawer. */
.messages-shell{
  grid-template-columns:minmax(0,1fr)!important;
  min-height:620px;
}
.messages-list-panel{
  display:block!important;
  width:100%!important;
  border-right:0!important;
}
.message-conversation-list{
  max-height:calc(100dvh - 360px)!important;
  min-height:420px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
.message-thread-backdrop{
  position:fixed;
  inset:0;
  z-index:1288;
  display:block;
  background:rgba(5,25,38,.34);
  backdrop-filter:blur(1px);
  -webkit-backdrop-filter:blur(1px);
}
.message-thread-panel{
  position:fixed!important;
  z-index:1289!important;
  top:0!important;
  right:0!important;
  bottom:auto!important;
  left:auto!important;
  width:min(760px,100vw)!important;
  height:100dvh!important;
  max-height:100dvh!important;
  background:linear-gradient(180deg,#fbfdff,#f5f9fb)!important;
  box-shadow:-24px 0 58px rgba(5,25,38,.24)!important;
  transform:translate3d(105%,0,0)!important;
  transition:transform .24s ease!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
  pointer-events:none;
}
.message-thread-panel.is-open{
  transform:translate3d(0,0,0)!important;
  pointer-events:auto;
}
.message-thread-head{
  position:sticky!important;
  top:0!important;
  z-index:8!important;
}
.message-thread-close{
  flex:0 0 auto;
  text-decoration:none;
  font-size:24px;
  line-height:1;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
}
.message-thread-panel .message-thread{
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  height:auto!important;
}
.message-thread-panel .message-composer{
  flex:0 0 auto;
}
.message-thread-panel .message-attachment-help,
.message-thread-panel .message-readonly-note{
  flex:0 0 auto;
}
/* conversation header menu must close naturally and remain inside the drawer */
.message-thread-panel .message-conversation-menu{
  z-index:1320!important;
}
@media(max-width:860px){
  .messages-shell.has-active-thread .messages-list-panel,
  .messages-shell:not(.has-active-thread) .messages-list-panel{
    display:block!important;
  }
  .messages-shell:not(.has-active-thread) .message-thread-panel,
  .messages-shell.has-active-thread .message-thread-panel{
    display:flex!important;
  }
  .message-conversation-list{
    max-height:calc(100dvh - 330px)!important;
    min-height:360px!important;
  }
  .message-thread-panel{
    width:min(560px,96vw)!important;
  }
  .message-thread-head{
    padding:14px 14px!important;
  }
}
@media(max-width:540px){
  .message-thread-panel{
    width:94vw!important;
  }
  .message-thread-backdrop{
    background:rgba(5,25,38,.28);
  }
  .message-thread-head .message-thread-actions{
    margin-left:auto;
  }
}

/* 2026-09-06 Messages: browser-neutral chat-opening feedback + reliable message menus */
.message-chat-opening{
  position:fixed;inset:0;z-index:1295;display:flex;align-items:center;justify-content:flex-end;
  background:rgba(5,25,38,.16);opacity:0;pointer-events:none;transition:opacity .12s ease;
}
.message-chat-opening.show{opacity:1}
.message-chat-opening-card{
  margin-right:min(26vw,360px);display:flex;align-items:center;gap:10px;padding:12px 16px;
  border:1px solid rgba(255,255,255,.65);border-radius:14px;background:rgba(255,255,255,.96);
  box-shadow:0 14px 34px rgba(15,23,42,.18);color:#244252;font-weight:700;
}
.message-chat-opening .message-send-spinner{width:18px;height:18px;border-width:3px}
.message-item-menu{
  display:inline-flex!important;align-items:center;justify-content:center;min-width:24px;min-height:24px;
  padding:0 5px!important;line-height:1;font-size:16px;color:#5e7485!important;opacity:.78!important;
  border-radius:8px;position:relative;z-index:2;
}
.message-item-menu:hover,.message-item-menu:focus{background:rgba(15,23,42,.07);opacity:1!important;outline:none}
.message-meta-line{min-height:24px}
.message-item-menu-panel.viewport-menu{display:block!important}
.message-item-menu-panel.viewport-menu[hidden]{display:none!important}
@media(max-width:860px){
  .message-chat-opening{justify-content:center;background:rgba(5,25,38,.12)}
  .message-chat-opening-card{margin:0;padding:11px 14px;border-radius:13px;font-size:13px}
  .message-item-menu{min-width:30px;min-height:30px;font-size:18px;padding:0 7px!important}
}

/* 2026-09-06 Messages: modern thread controls + inline editing */
.message-modern-participants{
  display:inline-flex!important;align-items:center;gap:7px!important;height:38px!important;padding:0 13px!important;
  border:1px solid color-mix(in srgb,var(--theme-accent,#147d64) 22%,#dce6eb)!important;
  border-radius:999px!important;background:color-mix(in srgb,var(--theme-accent,#147d64) 7%,white)!important;
  color:var(--theme-accent,#147d64)!important;font-weight:700!important;box-shadow:none!important;
  transition:background .15s ease,border-color .15s ease,transform .15s ease!important;
}
.message-modern-participants:hover,.message-modern-participants:focus{
  background:color-mix(in srgb,var(--theme-accent,#147d64) 13%,white)!important;
  border-color:color-mix(in srgb,var(--theme-accent,#147d64) 38%,#dce6eb)!important;outline:none!important;
}
.message-participants-icon{font-size:15px;line-height:1}
.message-send-button{
  width:44px!important;height:44px!important;min-width:44px!important;padding:0!important;border:0!important;border-radius:50%!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  background:var(--theme-accent,#147d64)!important;color:#fff!important;box-shadow:0 7px 18px color-mix(in srgb,var(--theme-accent,#147d64) 30%,transparent)!important;
  transition:transform .14s ease,box-shadow .14s ease,opacity .14s ease!important;
}
.message-send-button:hover:not(:disabled),.message-send-button:focus:not(:disabled){transform:translateY(-1px) scale(1.025);box-shadow:0 9px 22px color-mix(in srgb,var(--theme-accent,#147d64) 38%,transparent)!important;outline:none}
.message-send-button svg{width:21px;height:21px;fill:currentColor;transform:translateX(1px)}
.message-send-button.is-sending svg{animation:message-send-pulse .85s ease-in-out infinite alternate}
.message-send-button:disabled{opacity:.72!important;cursor:wait!important}
@keyframes message-send-pulse{to{transform:translateX(1px) scale(.82);opacity:.6}}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.message-inline-editor{margin-top:4px;min-width:min(340px,68vw)}
.message-inline-editor textarea{
  width:100%;min-height:72px;max-height:180px;resize:vertical;padding:10px 11px;border:1px solid color-mix(in srgb,var(--theme-accent,#147d64) 34%,#dce6eb);
  border-radius:12px;background:#fff;color:inherit;font:inherit;line-height:1.35;outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--theme-accent,#147d64) 9%,transparent)
}
.message-inline-edit-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;margin-top:7px}
.message-inline-edit-error{margin-right:auto;color:#b42318;font-size:11px;line-height:1.25;max-width:190px}
.message-inline-edit-actions button{border:0;border-radius:999px;padding:7px 12px;font-weight:700;cursor:pointer}
.message-edit-cancel{background:#eef3f6;color:#4c6270}
.message-edit-save{background:var(--theme-accent,#147d64);color:#fff;min-width:62px}
.message-edit-save.is-saving::after{content:'…'}
.message-edit-save:disabled{opacity:.65;cursor:wait}
@media(max-width:540px){
  .message-modern-participants{height:36px!important;padding:0 10px!important;font-size:12px!important}
  .message-participants-icon{display:none}
  .message-send-button{width:46px!important;height:46px!important;min-width:46px!important}
  .message-inline-editor{min-width:min(280px,64vw)}
}


/* 2026-09-06 Messages: up to 10 attachments per message without shrinking composer */
.message-composer{
  grid-template-columns:44px minmax(0,1fr) 44px!important;
  grid-template-areas:
    "preview preview preview"
    "attach editor send"!important;
  align-items:end!important;
}
.message-composer .message-attach-button{grid-area:attach}
.message-composer textarea{
  grid-area:editor;
  min-width:0!important;
  width:100%!important;
  min-height:44px!important;
  height:auto;
}
.message-composer .message-send-button{grid-area:send}
.message-selected-attachment{
  grid-area:preview!important;
  grid-column:1/-1!important;
  width:100%!important;
  min-width:0!important;
  margin:0 0 4px!important;
  max-height:220px;
  overflow:auto;
  padding:2px 1px;
}
.message-compose-preview-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(92px,112px));
  gap:8px;
  align-items:start;
}
.message-compose-preview-grid .message-compose-image-preview{
  width:100%!important;
  height:104px!important;
}
.message-compose-preview-grid .message-compose-file-preview{
  width:100%!important;
  min-height:104px;
  display:grid;
  align-content:center;
  justify-items:center;
  text-align:center;
  padding:10px 7px;
}
.message-compose-preview-grid .message-compose-file-preview>span:nth-child(2){
  width:100%;
}
.message-compose-preview-grid .message-compose-file-preview b{
  max-width:100%;
}
.message-compose-preview-count{
  margin-top:6px;
  font-size:10px;
  font-weight:700;
  color:var(--muted,#718597);
}
.message-attachment-gallery{
  display:grid;
  gap:7px;
  margin-top:6px;
}
.message-attachment-gallery.is-multiple{
  grid-template-columns:repeat(2,minmax(0,1fr));
  width:min(430px,100%);
}
.message-attachment-gallery-item{min-width:0}
.message-attachment-gallery.is-multiple .message-image-card{
  width:100%;
  margin:0;
}
.message-attachment-gallery.is-multiple .message-image-card img{
  aspect-ratio:1/1;
  height:auto;
  max-height:210px;
}
.message-attachment-gallery.is-multiple .message-download-link{
  margin-top:3px;
}
.message-pending-gallery{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:5px;
  width:min(330px,65vw);
}
.message-pending-gallery .message-pending-image{width:100%}
.message-pending-gallery .message-pending-image img{aspect-ratio:1/1;height:auto;max-height:160px}
@media(max-width:540px){
  .message-composer{
    grid-template-columns:44px minmax(0,1fr) 46px!important;
  }
  .message-selected-attachment{
    grid-column:1/-1!important;
    max-height:190px;
  }
  .message-compose-preview-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .message-compose-preview-grid .message-compose-image-preview{height:92px!important}
  .message-compose-preview-grid .message-compose-file-preview{min-height:92px}
  .message-attachment-gallery.is-multiple{width:min(330px,82vw)}
}


/* 2026-09-07 centered lively loading experience.
   Keeps the loader lightweight, but makes navigation feedback unmistakably central. */
.app-loading-overlay{
  position:fixed!important;
  inset:0!important;
  z-index:14000!important;
  height:auto!important;
  min-height:100dvh!important;
  padding:24px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:rgba(7,35,51,.18)!important;
  backdrop-filter:blur(3px)!important;
  -webkit-backdrop-filter:blur(3px)!important;
  pointer-events:none!important;
  overflow:hidden!important;
  opacity:1;
  visibility:visible;
}
.app-loading-overlay[hidden]{display:none!important}
.app-loading-overlay::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at center,rgba(255,255,255,.12) 0,rgba(255,255,255,0) 46%);
  animation:app-loading-breathe 1.6s ease-in-out infinite;
}
.app-loading-overlay .app-loading-card{
  position:relative!important;
  top:auto!important;
  right:auto!important;
  width:min(292px,calc(100vw - 42px))!important;
  min-width:0!important;
  max-width:292px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  padding:25px 24px 22px!important;
  border:1px solid rgba(255,255,255,.82)!important;
  border-radius:24px!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:0 22px 60px rgba(7,43,61,.20),0 2px 8px rgba(7,43,61,.08)!important;
  color:var(--navy,#17384c)!important;
  text-align:center!important;
  pointer-events:none!important;
  transform:translateZ(0);
  animation:app-loading-card-in .22s ease-out both;
}
.app-loading-overlay .app-loading-card::after{
  content:"";
  width:42px;
  height:4px;
  margin-top:2px;
  border-radius:99px;
  background:linear-gradient(90deg,transparent,var(--blue,#1677b8),transparent);
  background-size:200% 100%;
  animation:app-loading-shimmer 1s linear infinite;
  opacity:.85;
}
.app-loading-overlay .app-loading-card strong{
  font-size:.98rem!important;
  line-height:1.2!important;
  letter-spacing:.01em;
}
.app-loading-overlay .app-loading-card span{
  display:block!important;
  max-width:235px;
  color:var(--muted,#6d7f8c)!important;
  font-size:.78rem!important;
  line-height:1.35!important;
}
.app-loading-overlay .app-loading-donut{
  position:relative;
  width:62px!important;
  height:62px!important;
  margin:0 0 4px!important;
  border:0!important;
  border-radius:50%;
  background:conic-gradient(from 0deg,var(--blue,#1677b8),var(--navy,#17384c),var(--theme-accent,#159c91),var(--blue,#1677b8));
  box-shadow:0 0 0 7px rgba(22,119,184,.08),0 8px 22px rgba(22,119,184,.17);
  animation:app-loading-spin .9s linear infinite!important;
}
.app-loading-overlay .app-loading-donut::before{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:50%;
  background:rgba(255,255,255,.98);
}
.app-loading-overlay .app-loading-donut::after{
  content:"";
  position:absolute;
  width:9px;
  height:9px;
  top:2px;
  left:50%;
  margin-left:-4.5px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 10px rgba(255,255,255,.95);
}
html.app-is-loading,html.app-is-loading body{overflow:hidden}
@keyframes app-loading-card-in{
  from{opacity:0;transform:translateY(8px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes app-loading-breathe{
  0%,100%{opacity:.55;transform:scale(.96)}
  50%{opacity:1;transform:scale(1.04)}
}
@keyframes app-loading-shimmer{
  from{background-position:180% 0}
  to{background-position:-20% 0}
}
@media(max-width:800px){
  html.mobile-module-loading .app-loading-overlay{
    z-index:14000!important;
    height:auto!important;
    min-height:100dvh!important;
    background:rgba(7,35,51,.17)!important;
    backdrop-filter:blur(3px)!important;
    -webkit-backdrop-filter:blur(3px)!important;
  }
  .app-loading-overlay .app-loading-card{
    width:min(270px,calc(100vw - 38px))!important;
    padding:22px 20px 20px!important;
    border-radius:22px!important;
  }
  .app-loading-overlay .app-loading-donut{
    width:58px!important;
    height:58px!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .app-loading-overlay::before,
  .app-loading-overlay .app-loading-card,
  .app-loading-overlay .app-loading-card::after{animation:none!important}
  .app-loading-overlay .app-loading-donut{animation-duration:1.8s!important}
}

.employee-master-filters{grid-template-columns:minmax(260px,1fr) minmax(160px,.32fr) minmax(190px,.42fr) minmax(190px,.42fr) auto}
@media(max-width:1180px){.employee-master-filters{grid-template-columns:1fr 1fr 1fr}.employee-master-filters .search{grid-column:1/-1}}
@media(max-width:760px){.employee-master-filters{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.employee-master-filters{grid-template-columns:1fr}}


/* Work anniversary celebration cards */
.anniversary-panel{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 8% 0%,rgba(255,214,102,.16),transparent 24%),
    radial-gradient(circle at 92% 8%,rgba(53,181,160,.13),transparent 26%),
    var(--panel,#fff);
}
.anniversary-panel::before,
.anniversary-panel::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:0;
  width:90px;
  height:90px;
  opacity:.22;
  background-image:
    radial-gradient(circle at 12px 12px,#f4bd3a 0 3px,transparent 4px),
    radial-gradient(circle at 43px 25px,#33a78f 0 3px,transparent 4px),
    radial-gradient(circle at 70px 12px,#e88468 0 3px,transparent 4px),
    radial-gradient(circle at 25px 58px,#7d8fd8 0 3px,transparent 4px),
    radial-gradient(circle at 67px 68px,#f0a7b9 0 3px,transparent 4px);
}
.anniversary-panel::before{top:8px;left:8px;transform:rotate(-10deg)}
.anniversary-panel::after{right:12px;bottom:4px;transform:rotate(18deg)}
.anniversary-panel>*{position:relative;z-index:1}

.anniversary-watch-head h3{font-size:1.2rem}
.anniversary-watch-head .eyebrow{letter-spacing:.11em}
.anniversary-count{
  min-width:54px;
  background:linear-gradient(135deg,#fff4c9,#e9faf4);
  border-color:#ead182;
  box-shadow:0 5px 16px rgba(129,94,9,.12);
}

.anniversary-card{
  overflow:hidden;
  min-height:315px;
  border-color:rgba(223,186,79,.52);
  background:
    radial-gradient(circle at 100% 0%,rgba(248,201,75,.18),transparent 34%),
    radial-gradient(circle at 0% 100%,rgba(38,164,139,.12),transparent 34%),
    linear-gradient(180deg,#fffdf7 0%,#ffffff 68%);
  box-shadow:0 12px 28px rgba(28,61,80,.09);
  transform:translateY(0);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.anniversary-card::before{
  content:"🎉";
  position:absolute;
  top:46px;
  right:12px;
  font-size:22px;
  opacity:.28;
  transform:rotate(12deg);
}
.anniversary-card::after{
  content:"✨";
  position:absolute;
  top:88px;
  left:13px;
  font-size:15px;
  opacity:.32;
}
.anniversary-card:hover{
  transform:translateY(-4px);
  border-color:#d9b547;
  box-shadow:0 18px 38px rgba(28,61,80,.14);
}
.anniversary-card.is-today{
  border-color:#e5b72f;
  background:
    radial-gradient(circle at 50% -10%,rgba(255,216,93,.34),transparent 35%),
    linear-gradient(180deg,#fff8d9 0%,#fffdf5 54%,#fff 100%);
  box-shadow:0 0 0 3px rgba(232,186,52,.14),0 16px 38px rgba(142,104,4,.14);
}
.anniversary-date-chip{
  background:linear-gradient(135deg,#fff0b0,#fff8dc);
  color:#735600;
  border:1px solid rgba(205,161,38,.28);
}
.anniversary-timing{
  padding:5px 8px;
  border-radius:999px;
  background:#eef9f6;
  color:#14705d;
}
.anniversary-card.is-today .anniversary-timing{
  background:#fff0ad;
  color:#7a5700;
  font-weight:900;
}
.anniversary-photo{
  width:78px;
  height:78px;
  margin-top:5px;
  margin-bottom:13px;
  background:linear-gradient(145deg,#fff7d6,#e7f7f3);
  box-shadow:
    0 0 0 3px rgba(255,255,255,.95),
    0 0 0 6px rgba(220,178,51,.22),
    0 10px 24px rgba(33,91,84,.12);
}
.anniversary-card .birthday-name{font-size:16px}
.anniversary-card .birthday-org{margin-top:5px}
.anniversary-tenure{
  margin-top:auto;
  padding:13px 12px 4px;
  border-top:0;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(255,239,185,.62),rgba(231,248,243,.72));
  text-align:center;
}
.anniversary-tenure b{
  color:#8a6500;
  font-size:10px;
}
.anniversary-years{
  font-size:18px!important;
  line-height:1.15;
  font-weight:950!important;
  color:var(--navy)!important;
}
.anniversary-cheer{
  margin-top:3px;
  font-size:11px!important;
  font-weight:750!important;
  color:#377965!important;
}
.anniversary-tenure small{margin-top:3px}
.anniversary-swipe-hint{
  font-weight:700;
  color:#6d786e;
}
@media(max-width:700px){
  .anniversary-card{min-height:330px}
}
@media(prefers-reduced-motion:reduce){
  .anniversary-card{transition:none}
  .anniversary-card:hover{transform:none}
}


/* Mobile drawer accessibility fix — 2026-09-08
   Keep Time & Attendance/shared drawer headers above the persistent mobile topbar.
   This makes the close button permanently reachable on iPhone/Android while
   preserving the desktop drawer layout. */
@media(max-width:800px){
  .drawer-backdrop{
    z-index:1190!important;
  }

  .account-drawer{
    position:fixed!important;
    z-index:1200!important;
    top:0!important;
    right:0!important;
    bottom:auto!important;
    width:100%!important;
    max-width:100%!important;
    height:100dvh!important;
    max-height:100dvh!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }

  .account-drawer .drawer-head{
    position:sticky!important;
    top:0!important;
    z-index:6!important;
    min-height:68px;
    padding:calc(14px + env(safe-area-inset-top,0px)) 16px 14px!important;
    background:#fff!important;
    border-bottom:1px solid var(--line)!important;
    box-shadow:0 4px 14px rgba(23,50,66,.07);
  }

  .account-drawer .drawer-head > div{
    min-width:0;
    padding-right:10px;
  }

  .account-drawer .drawer-head h3{
    margin:2px 0 0!important;
    line-height:1.2;
  }

  .account-drawer .drawer-close{
    display:grid!important;
    place-items:center!important;
    flex:0 0 44px!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    margin:0!important;
    padding:0!important;
    font-size:28px!important;
    line-height:1!important;
    border-radius:12px!important;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }

  .account-drawer .account-form{
    padding:18px 16px calc(28px + env(safe-area-inset-bottom,0px))!important;
  }
}


/* Compensatory Off verified-source UI */
.comp-off-source-card{overflow:visible}
.comp-off-policy-note{margin:0 0 14px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--theme-accent,#0d6efd) 24%,#dce7ee);border-radius:14px;background:color-mix(in srgb,var(--theme-accent,#0d6efd) 6%,#fff);color:#4d6574;line-height:1.45}
.comp-off-policy-note strong{color:#173246}
.comp-off-detail{display:block;padding:14px;margin-bottom:12px;border:1px solid #dce7ee;border-radius:16px;background:#f8fbfd}
.comp-off-source-fields{display:grid;grid-template-columns:1fr 1.25fr 1.35fr .9fr auto auto;gap:10px;align-items:end}
.comp-off-source-fields label{margin:0;min-width:0}
.comp-off-source-fields .comp-off-check{min-height:42px;white-space:nowrap}
.comp-off-source-fields .mini{width:42px;height:42px;margin:0}
.credit-input{display:flex;align-items:center;border:1px solid #cfdce5;border-radius:12px;background:#fff;overflow:hidden}
.credit-input input{border:0!important;border-radius:0!important;min-width:0;box-shadow:none!important}
.credit-input span{padding:0 10px;color:#698091;font-size:.86rem;font-weight:700}
.comp-off-verification{margin-top:12px;padding:13px;border:1px dashed #cbd9e2;border-radius:14px;background:#fff;color:#6b7f8d}
.comp-off-verification.verified{border-style:solid;border-color:color-mix(in srgb,var(--theme-accent,#0d6efd) 32%,#cbd9e2);background:color-mix(in srgb,var(--theme-accent,#0d6efd) 4%,#fff)}
.comp-off-verification.verification-error{border-style:solid;border-color:#e8b9b9;background:#fff7f7;color:#8a3838}
.comp-off-verification.verification-loading{opacity:.78}
.verification-head{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:10px}.verification-head strong{color:#173246}.verification-head span{font-size:.86rem;font-weight:800;color:var(--theme-accent,#0d6efd)}
.verification-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.verification-grid span{padding:9px 10px;border-radius:10px;background:#f4f8fa;min-width:0}.verification-grid small{display:block;color:#738895;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em}.verification-grid b{display:block;margin-top:2px;color:#203b4d;font-size:.88rem;overflow-wrap:anywhere}
.verification-empty{line-height:1.45}.comp-off-verification p{margin:9px 0 0;font-size:.83rem}.comp-off-ovt-choice[hidden]{display:none!important}
@media(max-width:1100px){.comp-off-source-fields{grid-template-columns:1fr 1fr}.comp-off-source-fields .comp-off-check{width:100%}.verification-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.comp-off-source-fields{grid-template-columns:1fr}.comp-off-source-fields .mini{width:100%}.verification-head{align-items:flex-start;flex-direction:column;gap:4px}.verification-grid{grid-template-columns:1fr}.comp-off-policy-note{font-size:.9rem}}


/* Compensatory Off drawer/readability refinement — 2026-09-08 */
@media(min-width:801px){
  .account-drawer.comp-off-drawer{width:min(980px,calc(100vw - 44px));}
  .comp-off-source-fields{grid-template-columns:minmax(150px,.85fr) minmax(220px,1.25fr) minmax(220px,1.2fr) minmax(145px,.75fr) auto auto;}
}
@media(min-width:801px) and (max-width:1150px){
  .account-drawer.comp-off-drawer{width:min(900px,calc(100vw - 24px));}
  .comp-off-source-fields{grid-template-columns:1fr 1.25fr 1fr;}
  .comp-off-source-fields .comp-off-check{width:auto;}
}

/* Duty Slip search: keep mobile focus stable without altering the page layout. */
@media(max-width:800px){
  .employee-filters .search input[type=search]{font-size:16px;}
}

/* 2026-09-09 global shell optimization + smoother module/sub-module navigation. */
@view-transition{navigation:auto}
.sidebar{view-transition-name:hris-sidebar}.topbar{view-transition-name:hris-topbar}.page{view-transition-name:hris-page}
::view-transition-group(root){animation-duration:.18s}
::view-transition-old(hris-sidebar),::view-transition-new(hris-sidebar),::view-transition-old(hris-topbar),::view-transition-new(hris-topbar){animation:none}
::view-transition-old(hris-page){animation:hris-page-out .12s ease both}::view-transition-new(hris-page){animation:hris-page-in .20s ease both}
@keyframes hris-page-in{from{opacity:.2;transform:translateY(5px)}to{opacity:1;transform:none}}@keyframes hris-page-out{from{opacity:1}to{opacity:.72}}
html.app-navigation-pending body::before{content:"";position:fixed;z-index:15050;left:0;top:0;width:42%;height:3px;border-radius:0 99px 99px 0;background:linear-gradient(90deg,var(--theme-accent,var(--blue,#1367a7)),#fff,var(--theme-accent,var(--blue,#1367a7)));background-size:220% 100%;box-shadow:0 1px 8px color-mix(in srgb,var(--theme-accent,var(--blue,#1367a7)) 35%,transparent);animation:hris-nav-progress .72s ease-in-out infinite;pointer-events:none}
@keyframes hris-nav-progress{0%{transform:translateX(-105%);background-position:100% 0}65%{transform:translateX(135%);background-position:0 0}100%{transform:translateX(245%);background-position:-100% 0}}
@supports not (view-transition-name:hris-page){html.hris-page-enter .page{animation:hris-fallback-page-in .18s ease-out both}@keyframes hris-fallback-page-in{from{opacity:.35;transform:translateY(4px)}to{opacity:1;transform:none}}}
.drawer-backdrop{will-change:opacity;transition:opacity .18s ease,visibility .18s ease!important}.account-drawer,.shift-drawer,[data-overtime-drawer],[data-holiday-drawer]{will-change:transform;transition:transform .22s cubic-bezier(.22,.61,.36,1)!important}
@media(max-width:800px){.app-loading-overlay{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}html.hris-page-enter .page,html.app-navigation-pending body::before{animation:none!important}.drawer-backdrop,.account-drawer,.shift-drawer,[data-overtime-drawer],[data-holiday-drawer]{transition-duration:.01ms!important}}


/* Dashboard 365/366-day calendar palette cycle.
   Each Manila calendar date has a coordinated variation inside its monthly family. */

/* Calendar-cycle shell: make the daily change visible across the whole Dashboard
   without changing the user's global/personal HRIS navigation palette. */
.dashboard-daily-palette{
  border-radius:20px;
  background:
    radial-gradient(circle at 0 0,color-mix(in srgb,var(--dash-active) 6%,transparent),transparent 27%),
    radial-gradient(circle at 100% 18%,color-mix(in srgb,var(--dash-present) 5%,transparent),transparent 31%),
    linear-gradient(180deg,var(--dash-surface),transparent 420px);
}
.dashboard-daily-palette>.hero{
  background:linear-gradient(118deg,var(--dash-hero-start) 0%,var(--dash-hero-mid) 58%,var(--dash-hero-end) 100%)!important;
  box-shadow:0 15px 34px color-mix(in srgb,var(--dash-hero-start) 20%,transparent);
}
.dashboard-daily-palette>.hero:after{
  border-color:color-mix(in srgb,white 11%,transparent);
}
.dashboard-daily-palette .dashboard-filter,
.dashboard-daily-palette .donut-kpi,
.dashboard-daily-palette .dashboard-chart,
.dashboard-daily-palette .birthday-panel{
  box-shadow:0 8px 24px color-mix(in srgb,var(--dash-active) 7%,transparent);
}
.dashboard-daily-palette .donut-kpi{
  border-color:color-mix(in srgb,var(--dash-active) 12%,var(--line));
  background:linear-gradient(180deg,color-mix(in srgb,var(--dash-surface) 72%,white),white 72%);
}
.dashboard-daily-palette .donut-kpi:hover{
  border-color:color-mix(in srgb,var(--dash-active) 28%,var(--line));
}
.dashboard-daily-palette .dashboard-filter{
  background:linear-gradient(100deg,color-mix(in srgb,var(--dash-table-soft) 80%,white),white 70%);
}
.dashboard-daily-palette .dashboard-filter-apply{
  border-color:color-mix(in srgb,var(--dash-active) 22%,var(--line));
  color:color-mix(in srgb,var(--dash-active) 82%,#17313d);
}
.dashboard-daily-palette .dashboard-filter-apply:hover{
  background:color-mix(in srgb,var(--dash-active) 8%,white);
}
.dashboard-daily-palette .donut-active{--donut-accent:var(--dash-active)}
.dashboard-daily-palette .donut-present{--donut-accent:var(--dash-present)}
.dashboard-daily-palette .donut-hired{--donut-accent:var(--dash-hired)}
.dashboard-daily-palette .donut-resigned{--donut-accent:var(--dash-resigned)}
.dashboard-daily-palette .donut-net{--donut-accent:var(--dash-net)}
.dashboard-daily-palette .donut-net.negative{--donut-accent:var(--dash-resigned)}

.dashboard-daily-palette .hire-dot:before,
.dashboard-daily-palette .bar.hire,
.dashboard-daily-palette .hbar.hire{background:var(--dash-hired)!important}
.dashboard-daily-palette .resign-dot:before,
.dashboard-daily-palette .bar.resign,
.dashboard-daily-palette .hbar.resign{background:var(--dash-resigned)!important}

.dashboard-daily-palette .dashboard-chart,
.dashboard-daily-palette .dashboard-filter{
  border-color:color-mix(in srgb,var(--dash-active) 12%,var(--line));
}
.dashboard-daily-palette .dashboard-chart .panel-head{
  border-radius:12px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--dash-table-soft) 76%,white),white 72%);
}
.dashboard-daily-palette .cost-tree-row[open],
.dashboard-daily-palette .cost-tree-row>summary:hover{
  background:color-mix(in srgb,var(--dash-table-soft) 82%,white);
}
.dashboard-daily-palette .cost-tree-row[open]>summary{
  background:color-mix(in srgb,var(--dash-active) 8%,white);
}
.dashboard-daily-palette .cost-more{color:var(--dash-active)}
.dashboard-daily-palette .cost-tree-row[open] .cost-more{
  background:color-mix(in srgb,var(--dash-active) 13%,white);
}

.dashboard-daily-palette .birthday-panel:not(.anniversary-panel){
  background:
    radial-gradient(circle at 4% 0%,color-mix(in srgb,var(--dash-present) 12%,transparent),transparent 25%),
    radial-gradient(circle at 96% 8%,color-mix(in srgb,var(--dash-active) 9%,transparent),transparent 28%),
    var(--dash-birthday-soft);
}
.dashboard-daily-palette .birthday-panel:not(.anniversary-panel) .birthday-count{
  background:color-mix(in srgb,var(--dash-present) 10%,white);
  color:color-mix(in srgb,var(--dash-present) 76%,#263746);
  border-color:color-mix(in srgb,var(--dash-present) 28%,white);
}
.dashboard-daily-palette .birthday-card{
  border-color:color-mix(in srgb,var(--dash-present) 17%,var(--line));
  background:linear-gradient(180deg,color-mix(in srgb,var(--dash-birthday-soft) 70%,white),white 68%);
}
.dashboard-daily-palette .birthday-date-chip{
  background:color-mix(in srgb,var(--dash-active) 9%,white);
  color:color-mix(in srgb,var(--dash-active) 78%,#243c4b);
}
.dashboard-daily-palette .birthday-photo{
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--dash-present) 15%,white),
    color-mix(in srgb,var(--dash-active) 10%,white));
  box-shadow:0 0 0 2px color-mix(in srgb,var(--dash-present) 25%,transparent);
}
.dashboard-daily-palette .birthday-card.is-today{
  border-color:var(--dash-present);
  background:linear-gradient(180deg,color-mix(in srgb,var(--dash-present) 11%,white),white 65%);
}

.dashboard-daily-palette .anniversary-panel{
  background:
    radial-gradient(circle at 8% 0%,color-mix(in srgb,var(--dash-net) 12%,transparent),transparent 24%),
    radial-gradient(circle at 92% 8%,color-mix(in srgb,var(--dash-hired) 12%,transparent),transparent 26%),
    var(--dash-anniversary-soft);
}
.dashboard-daily-palette .anniversary-count{
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--dash-net) 10%,white),
    color-mix(in srgb,var(--dash-hired) 10%,white));
  border-color:color-mix(in srgb,var(--dash-net) 24%,white);
  color:color-mix(in srgb,var(--dash-net) 76%,#273846);
}
.dashboard-daily-palette .anniversary-card{
  border-color:color-mix(in srgb,var(--dash-net) 22%,var(--line));
  background:
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--dash-net) 13%,transparent),transparent 34%),
    radial-gradient(circle at 0% 100%,color-mix(in srgb,var(--dash-hired) 11%,transparent),transparent 34%),
    linear-gradient(180deg,color-mix(in srgb,var(--dash-anniversary-soft) 72%,white),white 70%);
}
.dashboard-daily-palette .anniversary-card:hover{border-color:var(--dash-net)}
.dashboard-daily-palette .anniversary-date-chip{
  background:color-mix(in srgb,var(--dash-net) 10%,white);
  color:color-mix(in srgb,var(--dash-net) 78%,#273846);
  border-color:color-mix(in srgb,var(--dash-net) 22%,transparent);
}

/* Detail dialogs follow the KPI they describe. */
.dashboard-daily-palette [data-present-today-dialog]{--theme-accent:var(--dash-present)}
.dashboard-daily-palette [data-movement-dialog="hired"]{--theme-accent:var(--dash-hired)}
.dashboard-daily-palette [data-movement-dialog="separated"]{--theme-accent:var(--dash-resigned)}

/* Payroll period donuts also participate in the day's coordinated set. */
.dashboard-daily-palette .payroll-period-donut:nth-child(5n+1) .payroll-mini-donut{--donut-accent:var(--dash-active)}
.dashboard-daily-palette .payroll-period-donut:nth-child(5n+2) .payroll-mini-donut{--donut-accent:var(--dash-hired)}
.dashboard-daily-palette .payroll-period-donut:nth-child(5n+3) .payroll-mini-donut{--donut-accent:var(--dash-net)}
.dashboard-daily-palette .payroll-period-donut:nth-child(5n+4) .payroll-mini-donut{--donut-accent:var(--dash-present)}
.dashboard-daily-palette .payroll-period-donut:nth-child(5n) .payroll-mini-donut{--donut-accent:var(--dash-resigned)}

/* Dashboard time greeting + one deterministic quotation per Manila hour. */
.dashboard-daily-palette .hero .dashboard-hourly-quote{
 display:block;margin:8px 0 0;max-width:900px;font-size:14px;line-height:1.5;
 color:rgba(255,255,255,.95)
}
.dashboard-daily-palette .hero .dashboard-hourly-quote b{
 font-weight:800;color:rgba(255,255,255,.76)
}
.dashboard-daily-palette .hero .dashboard-hero-context{
 display:block;margin-top:3px;font-size:11px;line-height:1.4;color:rgba(255,255,255,.62)
}
@media(max-width:700px){
 .dashboard-daily-palette .hero .dashboard-hourly-quote{font-size:13px}
}

/* Payroll > 13 Month — polished worksheet action panel */
.payroll-generate-card-thirteenth{
    min-width:0;
    padding:15px;
    gap:13px;
    justify-content:flex-start;
    align-items:stretch;
    background:linear-gradient(180deg,#fbfdff 0%,#f5f9fb 100%);
    border-color:#cfdee6;
    box-shadow:0 8px 24px rgba(20,65,88,.06);
}
.payroll-action-heading{display:grid;gap:2px;text-align:left;padding:1px 2px 0}
.payroll-action-heading .payroll-action-kicker{font-size:10px;font-weight:900;letter-spacing:.11em;text-transform:uppercase;color:#718996}
.payroll-action-heading strong{font-size:15px;line-height:1.2;color:var(--ink)}
.payroll-action-grid{display:grid;grid-template-columns:1fr;gap:9px}
.payroll-action-tile{
    appearance:none;
    width:100%;
    min-height:58px;
    display:grid;
    grid-template-columns:38px minmax(0,1fr);
    align-items:center;
    gap:10px;
    padding:9px 10px;
    margin:0;
    border:1px solid #d3e0e7;
    border-radius:12px;
    background:#fff;
    color:var(--ink);
    text-decoration:none;
    text-align:left;
    font:inherit;
    box-shadow:0 2px 7px rgba(18,58,79,.035);
    cursor:pointer;
    transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease;
}
.payroll-action-tile:not(:disabled):not(.disabled):hover{
    transform:translateY(-1px);
    border-color:#9fc1d2;
    box-shadow:0 7px 18px rgba(16,69,96,.10);
}
.payroll-action-tile:focus-visible{outline:3px solid rgba(28,125,174,.18);outline-offset:2px}
.payroll-action-icon{
    width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
    background:#edf6fa;color:#12668e;
}
.payroll-action-icon svg{width:21px;height:21px;display:block;fill:currentColor}
.payroll-action-copy{display:grid;gap:2px;min-width:0}
.payroll-action-copy b{font-size:13px;line-height:1.2;color:inherit}
.payroll-action-copy small{font-size:10.5px!important;line-height:1.2!important;color:#718996!important;text-align:left!important;font-weight:600}
.payroll-action-generate{border-color:#bbd6e3;background:linear-gradient(135deg,#f5fbfe,#ecf7fb);color:#0b5477}
.payroll-action-generate .payroll-action-icon{background:#0d668e;color:#fff;box-shadow:0 5px 12px rgba(13,102,142,.20)}
.payroll-action-print .payroll-action-icon{background:#fff4df;color:#9a6510}
.payroll-action-export .payroll-action-icon{background:#eaf7ef;color:#25784b}
.payroll-action-tile:disabled,.payroll-action-tile.disabled{
    opacity:.48;cursor:not-allowed;transform:none!important;box-shadow:none!important;filter:saturate(.72)
}
a.payroll-action-tile.disabled{pointer-events:none}
.payroll-action-status{
    display:flex;align-items:flex-start;justify-content:center;gap:7px;
    padding:9px 9px;border-radius:10px;font-size:10.5px;line-height:1.35;text-align:left;font-weight:700
}
.payroll-action-status-dot{flex:0 0 auto;width:7px;height:7px;margin-top:3px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px rgba(92,116,128,.08)}
.payroll-action-status.is-ready{color:#337252;background:#edf8f1;border:1px solid #d3ebdc}
.payroll-action-status.is-pending{color:#7c6a42;background:#fff8e9;border:1px solid #eee1bd}
@media(min-width:1181px){
    .payroll-create-grid{grid-template-columns:minmax(330px,1.1fr) minmax(230px,.8fr) minmax(340px,1.15fr) minmax(190px,.72fr)}
}
@media(max-width:1250px) and (min-width:721px){
    .payroll-generate-card-thirteenth{grid-column:1/-1}
    .payroll-generate-card-thirteenth .payroll-action-heading{text-align:center}
    .payroll-generate-card-thirteenth .payroll-action-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:720px){
    .payroll-generate-card-thirteenth{padding:14px}
    .payroll-action-grid{grid-template-columns:1fr}
}



/* Payroll top attendance submodules. Parent Payroll never reloads. */
.payroll-attendance-tabs{display:flex;gap:8px;overflow-x:auto;margin:14px 0 16px;padding:6px;border:1px solid var(--line,#d8e4e9);border-radius:14px;background:#edf3f6}
.payroll-attendance-tabs button{flex:0 0 auto;border:0;border-radius:10px;background:transparent;padding:11px 15px;font:inherit;font-size:13px;font-weight:800;color:#526a79;cursor:pointer;white-space:nowrap}
.payroll-attendance-tabs button:hover{background:rgba(255,255,255,.72);color:var(--ink,#263746)}
.payroll-attendance-tabs button.active{color:#fff;background:var(--theme-accent,#168f8a);box-shadow:0 5px 14px rgba(20,72,87,.15)}
.payroll-attendance-workspace{min-height:650px;margin-bottom:18px;border:1px solid var(--line,#d8e4e9);border-radius:15px;overflow:hidden;background:#fff}
.payroll-attendance-workspace[hidden],.payroll-attendance-pane[hidden]{display:none!important}
.payroll-attendance-pane{height:calc(100vh - 210px);min-height:650px}
.payroll-attendance-frame{display:block;width:100%;height:100%;border:0;background:#fff}
body.embedded-app{background:#fff;overflow:auto}
body.embedded-app .embedded-module-page{padding:16px 18px 24px;max-width:none;margin:0}
body.embedded-app .module-tabs{display:none!important}
body.embedded-app .hero{margin-top:0}
@media(max-width:800px){.payroll-attendance-tabs button{padding:10px 12px;font-size:12px}.payroll-attendance-pane{height:calc(100dvh - 170px);min-height:560px}body.embedded-app .embedded-module-page{padding:10px}}


/* Payroll-enforced embedded attendance mode.
   The parent Payroll iframe adds this class after every internal navigation,
   so Search/Add/Edit/Save cannot bring the duplicate HRIS shell back. */
body.payroll-embedded-attendance{
  background:#fff!important;
  overflow:auto!important;
}
body.payroll-embedded-attendance .sidebar,
body.payroll-embedded-attendance .topbar,
body.payroll-embedded-attendance .module-tabs{
  display:none!important;
}
body.payroll-embedded-attendance .app-shell{
  display:block!important;
  min-height:0!important;
}
body.payroll-embedded-attendance .main{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
}
body.payroll-embedded-attendance .main>.page,
body.payroll-embedded-attendance .page{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:16px 18px 24px!important;
  min-height:0!important;
}
body.payroll-embedded-attendance .hero{
  margin-top:0!important;
}
body.payroll-embedded-attendance .drawer-backdrop,
body.payroll-embedded-attendance .drawer{
  /* Drawers remain local to the embedded module, not the outer Payroll page. */
}
@media(max-width:800px){
  body.payroll-embedded-attendance .main>.page,
  body.payroll-embedded-attendance .page{padding:10px!important}
}


/* Compensatory Off — embedded filter dropdown polish */
body.payroll-embedded-attendance select,
body.embedded-app select{
  appearance:none;
  -webkit-appearance:none;
  min-height:46px;
  padding:0 42px 0 14px;
  border:1px solid #d6e2e8;
  border-radius:12px;
  background-color:#fff;
  background-image:
    linear-gradient(45deg,transparent 50%,#516a79 50%),
    linear-gradient(135deg,#516a79 50%,transparent 50%);
  background-position:
    calc(100% - 19px) 50%,
    calc(100% - 14px) 50%;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  color:var(--ink,#263746);
  font:inherit;
  font-size:14px;
  font-weight:600;
  line-height:1.2;
  box-shadow:0 1px 2px rgba(28,55,68,.03);
  transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease;
}
body.payroll-embedded-attendance select:hover,
body.embedded-app select:hover{
  border-color:color-mix(in srgb,var(--theme-accent,#168f8a) 42%,#d6e2e8);
  background-color:#fbfdfd;
}
body.payroll-embedded-attendance select:focus,
body.embedded-app select:focus{
  outline:none;
  border-color:var(--theme-accent,#168f8a);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--theme-accent,#168f8a) 14%,transparent);
}
body.payroll-embedded-attendance select:disabled,
body.embedded-app select:disabled{
  color:#98a8b2;
  background-color:#f3f6f8;
  cursor:not-allowed;
}

/* Keep filter selects visually aligned with adjacent search controls. */
body.payroll-embedded-attendance .filters select,
body.embedded-app .filters select,
body.payroll-embedded-attendance .filter-row select,
body.embedded-app .filter-row select{
  width:100%;
  max-width:100%;
}


/* Compensatory Off toolbar — actual standalone + embedded Business Unit dropdown */
.comp-off-toolbar{
  display:grid;
  grid-template-columns:minmax(320px,1fr) minmax(260px,360px);
  gap:12px;
  align-items:center;
  padding:14px 16px;
}
.comp-off-toolbar .search{
  margin:0;
  width:100%;
}
.comp-off-toolbar .search input{
  min-height:48px;
}
.comp-off-toolbar .search button{
  min-height:48px;
}
.comp-off-toolbar>select[name="unit"]{
  appearance:none!important;
  -webkit-appearance:none!important;
  width:100%!important;
  max-width:none!important;
  min-height:48px!important;
  margin:0!important;
  padding:0 44px 0 15px!important;
  border:1px solid #d6e2e8!important;
  border-radius:12px!important;
  background-color:#fff!important;
  background-image:
    linear-gradient(45deg,transparent 50%,#516a79 50%),
    linear-gradient(135deg,#516a79 50%,transparent 50%)!important;
  background-position:
    calc(100% - 20px) 50%,
    calc(100% - 15px) 50%!important;
  background-size:5px 5px,5px 5px!important;
  background-repeat:no-repeat!important;
  color:var(--ink,#263746)!important;
  font:inherit!important;
  font-size:14px!important;
  font-weight:600!important;
  line-height:1.2!important;
  box-shadow:0 1px 2px rgba(28,55,68,.04)!important;
  cursor:pointer;
  transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease;
}
.comp-off-toolbar>select[name="unit"]:hover{
  border-color:color-mix(in srgb,var(--theme-accent,#168f8a) 42%,#d6e2e8)!important;
  background-color:#fbfdfd!important;
}
.comp-off-toolbar>select[name="unit"]:focus{
  outline:none!important;
  border-color:var(--theme-accent,#168f8a)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--theme-accent,#168f8a) 14%,transparent)!important;
}
@media(max-width:850px){
  .comp-off-toolbar{
    grid-template-columns:1fr;
  }
}


/* Payroll embedded attendance: prevent sidebar/topbar flash before iframe load. */
html.embedded-html,
html.embedded-html body{
  background:#fff!important;
}
html.embedded-html .sidebar,
html.embedded-html .topbar,
html.embedded-html .module-tabs,
body.embedded-app .sidebar,
body.embedded-app .topbar,
body.embedded-app .module-tabs{
  display:none!important;
}
html.embedded-html .app-shell,
body.embedded-app .app-shell{
  display:block!important;
  min-height:0!important;
}
html.embedded-html .main,
body.embedded-app .main{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
}
.payroll-attendance-frame{
  transition:opacity .08s ease;
}


/* ============================================================
   2026-09-10 — Smooth right-side drawer motion
   Reference behavior: soft cart/drawer slide, GPU-composited, with a
   synchronized backdrop fade and no snap-open on server-rendered drawers.
   ============================================================ */
:root{
  --drawer-motion-duration:340ms;
  --drawer-motion-ease:cubic-bezier(.22,.78,.22,1);
  --drawer-backdrop-duration:260ms;
}

/* GPU-composited base state.  Keep a server-rendered aria-hidden="false"
   drawer OFF canvas until JavaScript applies the explicit open body class;
   this prevents the old :has(...) rules from making it appear instantly. */
.account-drawer,
[data-shift-drawer],
[data-holiday-drawer],
[data-overtime-drawer],
.message-new-drawer,
.message-members-drawer{
  transform:translate3d(102%,0,0) !important;
  opacity:.985;
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  contain:paint;
  transition:
    transform var(--drawer-motion-duration) var(--drawer-motion-ease),
    opacity var(--drawer-motion-duration) ease !important;
}

/* Explicit open states. */
body.user-drawer-open .account-drawer,
body.shift-drawer-open [data-shift-drawer],
body.holiday-drawer-open [data-holiday-drawer],
body.drawer-open [data-overtime-drawer],
body.overtime-drawer-open [data-overtime-drawer],
.message-new-drawer.open,
.message-members-drawer.open{
  transform:translate3d(0,0,0) !important;
  opacity:1;
}

/* The server may render aria-hidden=false for a route-loaded drawer.
   Do not allow aria state alone to bypass the entrance animation. */
body:not(.drawer-open):not(.overtime-drawer-open) [data-overtime-drawer][aria-hidden="false"],
body:not(.user-drawer-open) .account-drawer:not([data-shift-drawer]):not([data-holiday-drawer]):not([data-overtime-drawer]):not([data-credit-leave-drawer])[aria-hidden="false"],
body:not(.shift-drawer-open) [data-shift-drawer][aria-hidden="false"],
body:not(.holiday-drawer-open) [data-holiday-drawer][aria-hidden="false"],
body:not(.leave-credit-drawer-open) [data-credit-leave-drawer][aria-hidden="false"]{
  transform:translate3d(102%,0,0) !important;
}

/* Backdrop follows the drawer instead of popping in/out. */
.drawer-backdrop{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none;
  backdrop-filter:blur(0);
  -webkit-backdrop-filter:blur(0);
  will-change:opacity,backdrop-filter;
  transition:
    opacity var(--drawer-backdrop-duration) ease,
    backdrop-filter var(--drawer-backdrop-duration) ease,
    visibility 0s linear var(--drawer-backdrop-duration) !important;
}
body.user-drawer-open .drawer-backdrop,
body.shift-drawer-open .drawer-backdrop,
body.holiday-drawer-open .drawer-backdrop,
body.drawer-open .drawer-backdrop,
body.overtime-drawer-open .drawer-backdrop,
body.message-drawer-open [data-message-modal-backdrop]:not([hidden]){
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto;
  backdrop-filter:blur(1.5px);
  -webkit-backdrop-filter:blur(1.5px);
  transition:
    opacity var(--drawer-backdrop-duration) ease,
    backdrop-filter var(--drawer-backdrop-duration) ease,
    visibility 0s !important;
}

/* Message drawers previously opened from aria-hidden=false alone.
   Require .open so the first frame can remain off-canvas. */
.message-new-drawer[aria-hidden="false"]:not(.open),
.message-members-drawer[aria-hidden="false"]:not(.open){
  transform:translate3d(102%,0,0) !important;
  pointer-events:none !important;
}

/* Keep the close button visually responsive during animation. */
.drawer-close,
.message-new-drawer .icon-button,
.message-members-drawer .icon-button{
  transition:background-color .16s ease,border-color .16s ease,transform .16s ease;
}
.drawer-close:active,
.message-new-drawer .icon-button:active,
.message-members-drawer .icon-button:active{
  transform:scale(.94);
}

/* Respect the user's OS accessibility preference. */
@media (prefers-reduced-motion:reduce){
  .account-drawer,
  [data-shift-drawer],
  [data-holiday-drawer],
  [data-overtime-drawer],
  .message-new-drawer,
  .message-members-drawer,
  .drawer-backdrop{
    transition:none !important;
  }
}


/* 2026-09-10 — Specialized Add drawers + state-preserving Leave Apply */
body.leave-credit-drawer-open [data-credit-leave-drawer]{
  transform:translate3d(0,0,0) !important;
  opacity:1;
}
body.leave-credit-drawer-open [data-credit-leave-backdrop]{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto;
  backdrop-filter:blur(1.5px);
  -webkit-backdrop-filter:blur(1.5px);
  transition:
    opacity var(--drawer-backdrop-duration) ease,
    backdrop-filter var(--drawer-backdrop-duration) ease,
    visibility 0s !important;
}

/* "Apply for leave" is a client-side drawer action, not navigation. */
.action-menu-popup button.action-menu-link{
  appearance:none;
  -webkit-appearance:none;
  display:block;
  width:100%;
  border:0;
  background:transparent;
  padding:10px 12px;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.action-menu-popup button.action-menu-link:hover{
  background:rgba(15,23,42,.05);
}


/* Global deployment/request recovery notice */
.hris-recovery{
  position:fixed;
  z-index:20000;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:12px;
  width:min(680px,calc(100vw - 30px));
  padding:13px 13px 13px 17px;
  border:1px solid #d5e2e8;
  border-radius:14px;
  background:#fff;
  color:var(--ink,#263746);
  box-shadow:0 20px 60px rgba(15,40,53,.24);
}
.hris-recovery-copy{
  display:flex;
  flex:1;
  min-width:0;
  flex-direction:column;
  gap:2px;
}
.hris-recovery-copy b{font-size:13px}
.hris-recovery-copy span{font-size:11px;color:var(--muted,#718491)}
.hris-recovery button{
  flex:0 0 auto;
  border:0;
  border-radius:9px;
  padding:9px 14px;
  background:var(--theme-accent,#168f8a);
  color:#fff;
  font:inherit;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}
.hris-recovery .hris-recovery-close{
  padding:7px 10px;
  background:#eef3f5;
  color:#536b79;
  font-size:18px;
  line-height:1;
}
@media(max-width:640px){
  .hris-recovery{align-items:flex-start;flex-wrap:wrap}
  .hris-recovery-copy{flex-basis:calc(100% - 42px)}
}




/* Expandable workspace sidebar — 2026-09-11 */
.sidebar{width:auto;min-width:0;overflow:hidden}
.sidebar .sidebar-nav{display:flex;flex-direction:column;gap:5px;min-height:0;overflow-y:auto;overflow-x:hidden;padding:3px 7px 12px;scrollbar-width:thin}
.sidebar-nav-item,.sidebar-nav-group-toggle{position:relative;display:flex;align-items:center;width:100%;min-height:44px;gap:11px;padding:10px 12px;border:0;border-radius:10px;background:transparent;color:#d7e7ee;text-decoration:none;font:700 13px 'DM Sans',sans-serif;text-align:left;cursor:pointer;transition:background .16s ease,color .16s ease,transform .16s ease}
.sidebar-nav-item:hover,.sidebar-nav-group-toggle:hover{background:rgba(255,255,255,.09);color:#fff}
.sidebar-nav-item.active,.sidebar-nav-group.is-active>.sidebar-nav-group-toggle{background:rgba(255,255,255,.15);color:#fff;box-shadow:inset 3px 0 0 color-mix(in srgb,var(--theme-hero-end) 45%,#fff)}
.sidebar-nav .nav-icon{display:grid;place-items:center;width:22px;min-width:22px;font-size:17px;color:#d9edf5}
.sidebar-nav .nav-label{min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-nav .nav-chevron{margin-left:auto;font-size:14px;transition:transform .18s ease;opacity:.8}
.sidebar-nav-group.open>.sidebar-nav-group-toggle .nav-chevron{transform:rotate(180deg)}
.sidebar-nav-children{display:block;max-height:0;overflow:hidden;padding-left:17px;padding-top:0;padding-bottom:0;opacity:0;visibility:hidden;transition:max-height .26s ease,opacity .16s ease,padding .2s ease,visibility 0s linear .26s}
.sidebar-nav-group.open>.sidebar-nav-children{max-height:760px;padding-top:3px;padding-bottom:5px;opacity:1;visibility:visible;transition:max-height .32s ease,opacity .18s ease,padding .2s ease,visibility 0s}
.sidebar-nav-children a{display:flex;align-items:center;gap:9px;min-height:34px;margin:1px 0;padding:7px 10px;border-radius:8px;color:#bcd1da;text-decoration:none;font-size:11.5px;font-weight:650;white-space:nowrap}
.sidebar-nav-children a:hover{background:rgba(255,255,255,.08);color:#fff}
.sidebar-nav-children a.active{background:rgba(255,255,255,.12);color:#fff;font-weight:800}
.nav-child-dot{width:6px;height:6px;min-width:6px;border-radius:50%;background:currentColor;opacity:.55}
.sidebar-nav-children a.active .nav-child-dot{opacity:1;box-shadow:0 0 0 3px rgba(255,255,255,.10)}
.sidebar-nav .nav-message-badge{margin-left:auto}
.sidebar-install-wrap{margin-top:auto}

/* Collapsed desktop rail behaves like a true icon rail. Groups open as flyouts. */
.sidebar-collapsed .sidebar .sidebar-nav{overflow:visible;padding-inline:0}
.sidebar-collapsed .sidebar-nav-item,.sidebar-collapsed .sidebar-nav-group-toggle{justify-content:center;padding-inline:8px}
.sidebar-collapsed .sidebar-nav-group{position:relative}
.sidebar-collapsed .sidebar-nav-group .nav-chevron{display:none}
.sidebar-collapsed .sidebar-nav-group.open>.sidebar-nav-children{position:absolute;left:58px;top:0;z-index:250;width:238px;display:block;padding:8px;background:linear-gradient(180deg,var(--theme-sidebar-start),var(--theme-sidebar-end));border:1px solid rgba(255,255,255,.13);border-radius:12px;box-shadow:0 14px 35px rgba(6,29,42,.28)}
.sidebar-collapsed .sidebar-nav-group:not(.open)>.sidebar-nav-children{display:none}
.sidebar-collapsed .sidebar-nav-children a{font-size:12px}

/* Global theme picker is directly clickable and gives immediate visual feedback. */
.theme-swatch[data-theme-preview]{cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.theme-swatch[data-theme-preview]:hover{transform:translateY(-2px)}
.theme-swatch[data-theme-preview].selected{box-shadow:0 0 0 3px color-mix(in srgb,var(--theme-hero-end) 30%,transparent),0 5px 14px rgba(23,50,66,.12);transform:translateY(-2px)}

/* Active sidebar, tabs, buttons and focus rings remain synchronized to the live theme. */
.sidebar-nav-item.active,.sidebar-nav-group.is-active>.sidebar-nav-group-toggle{border-color:color-mix(in srgb,var(--theme-hero-end) 50%,transparent)}

@media(max-width:800px){
  .sidebar .sidebar-nav{padding-inline:4px}
  .sidebar-nav-children{padding-left:16px}
  .sidebar-collapsed .sidebar-nav-group.open>.sidebar-nav-children{position:static;width:auto;border:0;border-radius:0;box-shadow:none;background:transparent;padding-left:16px}
}

/* Light multitone workspace sidebar — 2026-09-11
   The application theme still drives the main UI; navigation uses a separate,
   calmer workspace palette so modules are visually distinct at a glance. */
.sidebar{
  background:linear-gradient(180deg,#edf4ff 0%,#e4edff 55%,#eef4ff 100%);
  color:#31445b;
  border-right:1px solid #cad9ef;
  box-shadow:8px 0 24px rgba(66,91,125,.055);
}
.sidebar .brand{margin:0 2px 14px;padding:7px 8px 14px;border-bottom:1px solid rgba(94,123,160,.16)}
.sidebar .brand img{background:#fff;box-shadow:0 5px 14px rgba(68,96,130,.12)}
.sidebar .brand b{color:#203750}
.sidebar .brand small,.sidebar-foot small{color:#72869e}
.sidebar .sidebar-nav{gap:6px;padding-inline:5px}

.sidebar-nav-item,.sidebar-nav-group{
  --nav-strong:#4f82c7;
  --nav-mid:#bfd8f8;
  --nav-soft:#e6f1ff;
  --nav-ink:#284868;
}
.sidebar-nav-item[data-nav-tone="sky"]{--nav-strong:#4c91d8;--nav-mid:#b9dafa;--nav-soft:#e8f4ff;--nav-ink:#285a89}
.sidebar-nav-item[data-nav-tone="mint"]{--nav-strong:#4f9e8d;--nav-mid:#bfe5dc;--nav-soft:#e8f7f3;--nav-ink:#286759}
.sidebar-nav-group[data-nav-tone="blue"]{--nav-strong:#4286cf;--nav-mid:#aecdF4;--nav-soft:#deecff;--nav-ink:#245b96}
.sidebar-nav-group[data-nav-tone="rose"]{--nav-strong:#d76069;--nav-mid:#f4bec3;--nav-soft:#ffe7e9;--nav-ink:#9f3841}
.sidebar-nav-item[data-nav-tone="amber"]{--nav-strong:#d99a25;--nav-mid:#f2d082;--nav-soft:#fff2c9;--nav-ink:#8a5c08}
.sidebar-nav-item[data-nav-tone="violet"]{--nav-strong:#8b70c4;--nav-mid:#d4c6f0;--nav-soft:#f0eafe;--nav-ink:#62499b}
.sidebar-nav-item[data-nav-tone="teal"]{--nav-strong:#3f9fa1;--nav-mid:#b8e1e2;--nav-soft:#e2f5f5;--nav-ink:#276d70}
.sidebar-nav-group[data-nav-tone="slate"]{--nav-strong:#71859d;--nav-mid:#cbd7e5;--nav-soft:#edf2f8;--nav-ink:#4b6078}

.sidebar-nav-item{
  min-height:42px;
  border:1px solid transparent;
  color:#455b72;
}
.sidebar-nav-item .nav-icon{color:var(--nav-strong)}
.sidebar-nav-item:hover{
  background:var(--nav-soft);
  border-color:color-mix(in srgb,var(--nav-mid) 72%,white);
  color:var(--nav-ink);
  transform:translateX(1px);
}
.sidebar-nav-item.active{
  background:linear-gradient(90deg,var(--nav-mid),var(--nav-soft));
  border-color:color-mix(in srgb,var(--nav-strong) 35%,white);
  color:var(--nav-ink);
  box-shadow:inset 3px 0 0 var(--nav-strong),0 3px 10px rgba(74,101,136,.07);
}
.sidebar-nav-item.active .nav-icon{color:var(--nav-ink)}

.sidebar-nav-group{
  overflow:hidden;
  border:1px solid transparent;
  border-radius:11px;
  transition:background .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.sidebar-nav-group>.sidebar-nav-group-toggle{
  min-height:42px;
  border-radius:10px;
  color:#455b72;
}
.sidebar-nav-group>.sidebar-nav-group-toggle .nav-icon{color:var(--nav-strong)}
.sidebar-nav-group>.sidebar-nav-group-toggle:hover{
  background:var(--nav-soft);
  color:var(--nav-ink);
}
.sidebar-nav-group.open,
.sidebar-nav-group.is-active{
  background:color-mix(in srgb,var(--nav-soft) 88%,white);
  border-color:color-mix(in srgb,var(--nav-mid) 74%,white);
  box-shadow:0 4px 12px rgba(74,101,136,.065);
}
.sidebar-nav-group.open>.sidebar-nav-group-toggle,
.sidebar-nav-group.is-active>.sidebar-nav-group-toggle{
  background:linear-gradient(90deg,var(--nav-mid),color-mix(in srgb,var(--nav-soft) 70%,white));
  color:var(--nav-ink);
  box-shadow:inset 3px 0 0 var(--nav-strong);
}
.sidebar-nav-group.open>.sidebar-nav-group-toggle .nav-icon,
.sidebar-nav-group.is-active>.sidebar-nav-group-toggle .nav-icon{color:var(--nav-ink)}
.sidebar-nav-group .nav-chevron{color:var(--nav-ink)}
.sidebar-nav-children{padding-right:6px}
.sidebar-nav-children a{
  margin:2px 0;
  color:#5d7187;
}
.sidebar-nav-children a:hover{
  background:rgba(255,255,255,.72);
  color:var(--nav-ink);
}
.sidebar-nav-children a.active{
  background:#fff;
  color:var(--nav-ink);
  box-shadow:inset 3px 0 0 var(--nav-strong),0 2px 7px rgba(74,101,136,.055);
}
.sidebar-nav-children a.active .nav-child-dot{color:var(--nav-strong);box-shadow:0 0 0 3px color-mix(in srgb,var(--nav-mid) 45%,transparent)}

.sidebar .sidebar-install-link{
  color:#526b84;
  border-color:#c7d8ee;
  background:rgba(255,255,255,.52);
}
.sidebar .sidebar-install-link:hover{background:#fff;color:#2f597e}
.sidebar-foot{border-top-color:rgba(94,123,160,.18)}
.sidebar-foot b{color:#31465d}
.sidebar-foot button{color:#59718b}
.sidebar-foot button:hover{color:#273e57;background:#fff}

/* The compact desktop rail keeps the same pale workspace character. */
.sidebar-collapsed .sidebar-nav-item.active,
.sidebar-collapsed .sidebar-nav-group.is-active>.sidebar-nav-group-toggle{box-shadow:inset 3px 0 0 var(--nav-strong)}
.sidebar-collapsed .sidebar-nav-group.open>.sidebar-nav-children{
  background:#f4f8ff;
  border-color:#cbd9ec;
  box-shadow:0 14px 35px rgba(52,75,105,.18);
}
.sidebar-collapsed .sidebar-nav-children a{color:#536980}
.sidebar-collapsed .sidebar-nav-children a:hover,
.sidebar-collapsed .sidebar-nav-children a.active{color:var(--nav-ink)}

@media(max-width:800px){
  .sidebar{box-shadow:14px 0 35px rgba(47,69,98,.17)}
  .sidebar-collapsed .sidebar-nav-group.open>.sidebar-nav-children{background:transparent;box-shadow:none}
}


/* Sidebar treelist completeness + high-contrast selection — 2026-09-11 */
.sidebar-nav-group.open{overflow:visible}
.sidebar-nav-group.open>.sidebar-nav-children{overflow:visible}
.sidebar-nav-children a.active{
  background:linear-gradient(90deg,color-mix(in srgb,var(--nav-mid) 82%,white),#fff 78%);
  color:#183b5d;
  font-weight:800;
  border:1px solid color-mix(in srgb,var(--nav-strong) 32%,white);
  box-shadow:inset 4px 0 0 var(--nav-strong),0 3px 9px rgba(44,72,105,.11);
}
.sidebar-nav-children a.active .nav-child-dot{
  width:8px;height:8px;min-width:8px;
  background:var(--nav-strong);
  opacity:1;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--nav-mid) 52%,transparent);
}
.sidebar-nav-item.active,
.sidebar-nav-group.is-active>.sidebar-nav-group-toggle{
  color:#173a5a;
  font-weight:800;
  border-color:color-mix(in srgb,var(--nav-strong) 42%,white);
  box-shadow:inset 4px 0 0 var(--nav-strong),0 4px 12px rgba(44,72,105,.10);
}
/* When a tree branch is contracted, only its main menu row remains. */
.sidebar-nav-group:not(.open)>.sidebar-nav-children{max-height:0!important;padding-top:0!important;padding-bottom:0!important;opacity:0!important;visibility:hidden!important;overflow:hidden!important}
@media(min-width:801px){
  /* Compact/icon rail never leaves floating child lists behind. */
  .sidebar-collapsed .sidebar-nav-group>.sidebar-nav-children{display:none!important}
}

/* Treelist branch collapse repair — 2026-09-11
   Contracted groups retain the full main-menu row (icon + title + chevron).
   Only child rows are hidden. This replaces the old max-height animation that
   could leave empty coloured bars or partial child remnants. */
.sidebar-nav-group{
  min-height:42px;
  overflow:visible;
}
.sidebar-nav-group>.sidebar-nav-group-toggle{
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  width:100%;
  min-height:42px;
  max-height:none!important;
  overflow:visible!important;
}
.sidebar-nav-group>.sidebar-nav-group-toggle .nav-icon,
.sidebar-nav-group>.sidebar-nav-group-toggle .nav-label,
.sidebar-nav-group>.sidebar-nav-group-toggle .nav-chevron{
  display:grid;
  visibility:visible!important;
  opacity:1;
}
.sidebar-nav-group>.sidebar-nav-group-toggle .nav-label{
  display:block;
}
.sidebar-nav-group>.sidebar-nav-group-toggle .nav-chevron{
  display:block;
}

/* Closed branch: keep the parent, remove only its child tree. */
.sidebar-nav-group:not(.open)>.sidebar-nav-children{
  display:none!important;
  max-height:none!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  opacity:1!important;
  visibility:visible!important;
  overflow:visible!important;
}

/* Open branch: show the complete child tree without clipping. */
.sidebar-nav-group.open>.sidebar-nav-children{
  display:block!important;
  max-height:none!important;
  height:auto!important;
  padding-top:3px!important;
  padding-bottom:5px!important;
  opacity:1!important;
  visibility:visible!important;
  overflow:visible!important;
}

/* Keep the main menu visually identifiable even while contracted. */
.sidebar-nav-group:not(.open)>.sidebar-nav-group-toggle{
  border-radius:10px;
  background:transparent;
  color:#455b72;
  box-shadow:none;
}
.sidebar-nav-group:not(.open).is-active>.sidebar-nav-group-toggle{
  background:linear-gradient(90deg,var(--nav-mid),color-mix(in srgb,var(--nav-soft) 70%,white));
  color:#173a5a;
  box-shadow:inset 4px 0 0 var(--nav-strong),0 4px 12px rgba(44,72,105,.10);
}

/* The full-width sidebar always shows titles. Only the dedicated compact
   desktop rail hides labels; tree contraction itself never hides them. */
body:not(.sidebar-collapsed) .sidebar-nav-group>.sidebar-nav-group-toggle .nav-label{
  display:block!important;
}
body:not(.sidebar-collapsed) .sidebar-nav-group>.sidebar-nav-group-toggle .nav-icon{
  display:grid!important;
}

@media(min-width:801px){
  /* In the optional compact icon rail, show main icons only and never children. */
  .sidebar-collapsed .sidebar-nav-group>.sidebar-nav-children{display:none!important}
}

/* Sidebar treelist flex-flow repair — 2026-09-11
   Expanded groups must keep their natural height. The navigation viewport
   scrolls when several branches are open instead of flex-shrinking groups
   and letting child rows overlap the following main-menu entries. */
.sidebar .sidebar-nav{
  overflow-y:auto!important;
  overflow-x:hidden!important;
  align-content:flex-start;
}
.sidebar .sidebar-nav>.sidebar-nav-item,
.sidebar .sidebar-nav>.sidebar-nav-group{
  flex:0 0 auto!important;
  min-height:0;
}
.sidebar .sidebar-nav>.sidebar-nav-group{
  height:auto!important;
}
.sidebar-nav-group.open>.sidebar-nav-children{
  position:static;
  width:auto;
}

/* Keep the dedicated compact desktop rail clean: only main-menu icons remain. */
@media(min-width:801px){
  .sidebar-collapsed .sidebar .sidebar-nav{
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
  .sidebar-collapsed .sidebar-nav-group>.sidebar-nav-children{
    display:none!important;
  }
}

/* ESC Blue Light Workspace — 2026-09-11
   Keeps the ESC Blue signature while making the sidebar and page surfaces lighter. */
body[data-ui-theme="esc-blue"],body:not([data-ui-theme]){
  --navy:#174f7a;
  --blue:#2478b8;
  --bg:#f5f9fd;
  --ink:#243b53;
  --muted:#6d8297;
  --line:#d8e6f2;
  --theme-sidebar-start:#edf5ff;
  --theme-sidebar-end:#e7f1fd;
  --theme-hero-start:#eaf5ff;
  --theme-hero-mid:#dceeff;
  --theme-hero-end:#cfe6fb;
  --theme-soft:#eef7ff;
  --theme-accent:#1e73b7;
}
body[data-ui-theme="esc-blue"],body:not([data-ui-theme]){background:#f5f9fd;color:#243b53}
body[data-ui-theme="esc-blue"] .sidebar,body:not([data-ui-theme]) .sidebar{
  background:linear-gradient(180deg,#eef6ff 0%,#e7f1fd 100%);
  color:#425f79;
  border-right:1px solid #cfdfef;
  box-shadow:8px 0 28px rgba(34,91,137,.045);
}
body[data-ui-theme="esc-blue"] .brand,body:not([data-ui-theme]) .brand{border-bottom-color:#d2e2f1}
body[data-ui-theme="esc-blue"] .brand b,body:not([data-ui-theme]) .brand b{color:#25445f}
body[data-ui-theme="esc-blue"] .brand small,
body[data-ui-theme="esc-blue"] .sidebar-foot small,
body:not([data-ui-theme]) .brand small,
body:not([data-ui-theme]) .sidebar-foot small{color:#7890a7}
body[data-ui-theme="esc-blue"] .sidebar-foot,body:not([data-ui-theme]) .sidebar-foot{border-top-color:#cfdfef}
body[data-ui-theme="esc-blue"] .sidebar-foot b,body:not([data-ui-theme]) .sidebar-foot b{color:#294760}
body[data-ui-theme="esc-blue"] .sidebar-foot button,body:not([data-ui-theme]) .sidebar-foot button{color:#55748e}
body[data-ui-theme="esc-blue"] .main,body:not([data-ui-theme]) .main{background:#f5f9fd}
body[data-ui-theme="esc-blue"] .topbar,body:not([data-ui-theme]) .topbar{
  background:rgba(255,255,255,.92);
  border-bottom-color:#d8e6f2;
  box-shadow:0 5px 18px rgba(37,84,123,.035);
}
body[data-ui-theme="esc-blue"] .page,body:not([data-ui-theme]) .page{background:transparent}
body[data-ui-theme="esc-blue"] .panel,
body[data-ui-theme="esc-blue"] .stat-card,
body[data-ui-theme="esc-blue"] .report-card,
body[data-ui-theme="esc-blue"] .table-panel,
body[data-ui-theme="esc-blue"] .settings-card,
body:not([data-ui-theme]) .panel,
body:not([data-ui-theme]) .stat-card,
body:not([data-ui-theme]) .report-card,
body:not([data-ui-theme]) .table-panel,
body:not([data-ui-theme]) .settings-card{
  background:#fff;
  border-color:#dce8f2;
  box-shadow:0 8px 24px rgba(41,87,125,.045);
}
body[data-ui-theme="esc-blue"] th,body:not([data-ui-theme]) th{background:#f4f9fd;color:#647c91}
body[data-ui-theme="esc-blue"] tbody tr:hover,body:not([data-ui-theme]) tbody tr:hover{background:#f7fbff}
body[data-ui-theme="esc-blue"] .hero,
body[data-ui-theme="esc-blue"] .payroll-hero,
body[data-ui-theme="esc-blue"] .settings-hero,
body:not([data-ui-theme]) .hero,
body:not([data-ui-theme]) .payroll-hero,
body:not([data-ui-theme]) .settings-hero{
  background:linear-gradient(118deg,#edf7ff 0%,#dfefff 58%,#d2e9fb 100%);
  color:#173f61;
  border:1px solid #c8dff1;
  box-shadow:0 14px 34px rgba(29,91,139,.075);
}
body[data-ui-theme="esc-blue"] .hero h2,
body[data-ui-theme="esc-blue"] .settings-hero h2,
body:not([data-ui-theme]) .hero h2,
body:not([data-ui-theme]) .settings-hero h2{color:#173f61}
body[data-ui-theme="esc-blue"] .hero p,
body[data-ui-theme="esc-blue"] .settings-hero p,
body:not([data-ui-theme]) .hero p,
body:not([data-ui-theme]) .settings-hero p{color:#59758d}
body[data-ui-theme="esc-blue"] .hero .eyebrow,
body[data-ui-theme="esc-blue"] .settings-hero .eyebrow,
body:not([data-ui-theme]) .hero .eyebrow,
body:not([data-ui-theme]) .settings-hero .eyebrow{color:#3779ab}
body[data-ui-theme="esc-blue"] .settings-hero .settings-status span,
body:not([data-ui-theme]) .settings-hero .settings-status span{
  background:rgba(255,255,255,.72);border-color:#c6dded;color:#4e6b82;backdrop-filter:none
}
body[data-ui-theme="esc-blue"] .settings-hero .settings-status b,
body:not([data-ui-theme]) .settings-hero .settings-status b{color:#174f7a}
body[data-ui-theme="esc-blue"] .button.primary,body:not([data-ui-theme]) .button.primary{
  background:#1e73b7;color:#fff;box-shadow:0 7px 18px rgba(30,115,183,.22)
}
body[data-ui-theme="esc-blue"] .button.primary:hover,body:not([data-ui-theme]) .button.primary:hover{background:#175f99}
body[data-ui-theme="esc-blue"] .button.secondary,body:not([data-ui-theme]) .button.secondary{background:#fff;border-color:#cfdfea;color:#35546d}
body[data-ui-theme="esc-blue"] .search button,body:not([data-ui-theme]) .search button{background:#1e73b7}
body[data-ui-theme="esc-blue"] input:focus,
body[data-ui-theme="esc-blue"] select:focus,
body[data-ui-theme="esc-blue"] textarea:focus,
body:not([data-ui-theme]) input:focus,
body:not([data-ui-theme]) select:focus,
body:not([data-ui-theme]) textarea:focus{
  border-color:#4a91c7;box-shadow:0 0 0 3px rgba(52,133,193,.12)
}
/* Keep multitone grouping subtle, but make ESC Blue the unmistakable active signature. */
body[data-ui-theme="esc-blue"] .sidebar-nav-item.active,
body[data-ui-theme="esc-blue"] .sidebar-nav-group.is-active>.sidebar-nav-group-toggle,
body:not([data-ui-theme]) .sidebar-nav-item.active,
body:not([data-ui-theme]) .sidebar-nav-group.is-active>.sidebar-nav-group-toggle{
  border-color:#8fc1e7;
  box-shadow:inset 4px 0 0 #2584c9,0 5px 14px rgba(37,132,201,.08);
}
body[data-ui-theme="esc-blue"] .sidebar-nav-children a.active,
body:not([data-ui-theme]) .sidebar-nav-children a.active{
  background:#dceeff!important;
  color:#155f99!important;
  border-color:#a9cfea!important;
  box-shadow:inset 4px 0 0 #2584c9,0 4px 12px rgba(37,132,201,.08)!important;
}

/* Coordinated palette theme system — 2026-09-11
   Themes are color groups, not a single hue. ESC Blue remains the brand anchor. */
body[data-ui-theme="esc-blue"],body:not([data-ui-theme]){
  --palette-primary:#2478b8;--palette-secondary:#23988e;--palette-tertiary:#7b68c7;--palette-warm:#d49a28;--palette-rose:#d85d72;
  --palette-bg:#f5f9fd;--palette-surface:#ffffff;--palette-surface-2:#eef6fd;--palette-sidebar:#eef6ff;--palette-sidebar-2:#e5f0fc;
  --palette-line:#d5e4f1;--palette-text:#253d55;--palette-muted:#6f8498;--palette-active:#dceeff;--palette-active-text:#174f7a;
  --navy:#174f7a;--blue:#2478b8;--green:#23988e;--amber:#d49a28;--red:#d85d72;--purple:#7b68c7;--bg:var(--palette-bg);--ink:var(--palette-text);--muted:var(--palette-muted);--line:var(--palette-line);
  --theme-accent:var(--palette-primary);--theme-soft:var(--palette-surface-2);--theme-sidebar-start:var(--palette-sidebar);--theme-sidebar-end:var(--palette-sidebar-2);
  --theme-hero-start:#eaf5ff;--theme-hero-mid:#dceeff;--theme-hero-end:#cae4f8;
}
body[data-ui-theme="ocean"]{
  --palette-primary:#167f95;--palette-secondary:#3aa99d;--palette-tertiary:#4f78bd;--palette-warm:#d6a23b;--palette-rose:#d86a78;
  --palette-bg:#f3fafb;--palette-surface:#ffffff;--palette-surface-2:#e9f7f7;--palette-sidebar:#edf9fb;--palette-sidebar-2:#e2f3f5;
  --palette-line:#d1e7e9;--palette-text:#24464c;--palette-muted:#69858b;--palette-active:#d9f0f3;--palette-active-text:#125b69;
  --navy:#245c6a;--blue:#167f95;--green:#3aa99d;--amber:#d6a23b;--red:#d86a78;--purple:#6477c6;--bg:var(--palette-bg);--ink:var(--palette-text);--muted:var(--palette-muted);--line:var(--palette-line);
  --theme-accent:var(--palette-primary);--theme-soft:var(--palette-surface-2);--theme-sidebar-start:var(--palette-sidebar);--theme-sidebar-end:var(--palette-sidebar-2);
  --theme-hero-start:#e7f7f9;--theme-hero-mid:#d7f0f2;--theme-hero-end:#c6e8eb;
}
body[data-ui-theme="indigo"]{
  --palette-primary:#596fd0;--palette-secondary:#418fa6;--palette-tertiary:#8a68c8;--palette-warm:#d4a045;--palette-rose:#d4657c;
  --palette-bg:#f7f8fd;--palette-surface:#ffffff;--palette-surface-2:#f0f2fc;--palette-sidebar:#f1f3fc;--palette-sidebar-2:#e9edfa;
  --palette-line:#dcdff1;--palette-text:#303b5a;--palette-muted:#747d99;--palette-active:#e5e9fb;--palette-active-text:#3f52a6;
  --navy:#40518f;--blue:#596fd0;--green:#418fa6;--amber:#d4a045;--red:#d4657c;--purple:#8a68c8;--bg:var(--palette-bg);--ink:var(--palette-text);--muted:var(--palette-muted);--line:var(--palette-line);
  --theme-accent:var(--palette-primary);--theme-soft:var(--palette-surface-2);--theme-sidebar-start:var(--palette-sidebar);--theme-sidebar-end:var(--palette-sidebar-2);
  --theme-hero-start:#f0f2ff;--theme-hero-mid:#e4e8fb;--theme-hero-end:#d8def8;
}
body[data-ui-theme="emerald"]{
  --palette-primary:#24866f;--palette-secondary:#2479a7;--palette-tertiary:#6e70bd;--palette-warm:#d1a043;--palette-rose:#d76872;
  --palette-bg:#f4faf7;--palette-surface:#ffffff;--palette-surface-2:#eaf6f1;--palette-sidebar:#eef8f3;--palette-sidebar-2:#e4f2eb;
  --palette-line:#d4e7dd;--palette-text:#29483e;--palette-muted:#70877f;--palette-active:#dcefe7;--palette-active-text:#1e6958;
  --navy:#2c6258;--blue:#2479a7;--green:#24866f;--amber:#d1a043;--red:#d76872;--purple:#6e70bd;--bg:var(--palette-bg);--ink:var(--palette-text);--muted:var(--palette-muted);--line:var(--palette-line);
  --theme-accent:var(--palette-primary);--theme-soft:var(--palette-surface-2);--theme-sidebar-start:var(--palette-sidebar);--theme-sidebar-end:var(--palette-sidebar-2);
  --theme-hero-start:#eaf8f2;--theme-hero-mid:#dcefe7;--theme-hero-end:#cde7dc;
}
body[data-ui-theme="executive"]{
  --palette-primary:#516b86;--palette-secondary:#2e8193;--palette-tertiary:#6872a8;--palette-warm:#c39245;--palette-rose:#c96772;
  --palette-bg:#f5f7f9;--palette-surface:#ffffff;--palette-surface-2:#edf1f5;--palette-sidebar:#eff3f7;--palette-sidebar-2:#e6ecf2;
  --palette-line:#d7e0e8;--palette-text:#2f4051;--palette-muted:#728293;--palette-active:#dfe8f0;--palette-active-text:#354f68;
  --navy:#354f68;--blue:#3b78a6;--green:#2e8193;--amber:#c39245;--red:#c96772;--purple:#6872a8;--bg:var(--palette-bg);--ink:var(--palette-text);--muted:var(--palette-muted);--line:var(--palette-line);
  --theme-accent:var(--palette-primary);--theme-soft:var(--palette-surface-2);--theme-sidebar-start:var(--palette-sidebar);--theme-sidebar-end:var(--palette-sidebar-2);
  --theme-hero-start:#edf3f7;--theme-hero-mid:#e1e9f0;--theme-hero-end:#d4e0e9;
}
body[data-ui-theme="warm"]{
  --palette-primary:#b87832;--palette-secondary:#3b8794;--palette-tertiary:#7968a8;--palette-warm:#d29a30;--palette-rose:#c96568;
  --palette-bg:#fbf8f3;--palette-surface:#ffffff;--palette-surface-2:#f7efe5;--palette-sidebar:#faf4eb;--palette-sidebar-2:#f3eadf;
  --palette-line:#eadfd2;--palette-text:#4e4238;--palette-muted:#8a7b6e;--palette-active:#f4e7d7;--palette-active-text:#80501f;
  --navy:#5d5147;--blue:#2f7898;--green:#3b8794;--amber:#d29a30;--red:#c96568;--purple:#7968a8;--bg:var(--palette-bg);--ink:var(--palette-text);--muted:var(--palette-muted);--line:var(--palette-line);
  --theme-accent:var(--palette-primary);--theme-soft:var(--palette-surface-2);--theme-sidebar-start:var(--palette-sidebar);--theme-sidebar-end:var(--palette-sidebar-2);
  --theme-hero-start:#fbf2e7;--theme-hero-mid:#f3e6d5;--theme-hero-end:#ead7c0;
}

/* Page surfaces follow the selected palette. */
body[data-ui-theme]{background:var(--palette-bg);color:var(--palette-text)}
body[data-ui-theme] .main{background:var(--palette-bg)}
body[data-ui-theme] .topbar{background:color-mix(in srgb,var(--palette-surface) 94%,var(--palette-surface-2));border-bottom-color:var(--palette-line);box-shadow:0 5px 18px color-mix(in srgb,var(--palette-primary) 5%,transparent)}
body[data-ui-theme] .panel,
body[data-ui-theme] .stat-card,
body[data-ui-theme] .report-card,
body[data-ui-theme] .table-panel,
body[data-ui-theme] .settings-card{background:var(--palette-surface);border-color:var(--palette-line);box-shadow:0 8px 24px color-mix(in srgb,var(--palette-primary) 5%,transparent)}
body[data-ui-theme] th{background:color-mix(in srgb,var(--palette-surface-2) 72%,white);color:color-mix(in srgb,var(--palette-muted) 92%,var(--palette-text))}
body[data-ui-theme] td{border-bottom-color:color-mix(in srgb,var(--palette-line) 68%,white)}
body[data-ui-theme] tbody tr:hover{background:color-mix(in srgb,var(--palette-surface-2) 55%,white)}
body[data-ui-theme] .hero,
body[data-ui-theme] .payroll-hero,
body[data-ui-theme] .settings-hero{background:linear-gradient(118deg,var(--theme-hero-start),var(--theme-hero-mid) 58%,var(--theme-hero-end));color:var(--palette-text);border:1px solid color-mix(in srgb,var(--palette-primary) 20%,var(--palette-line));box-shadow:0 14px 34px color-mix(in srgb,var(--palette-primary) 9%,transparent)}
body[data-ui-theme] .hero h2,body[data-ui-theme] .settings-hero h2{color:var(--palette-text)}
body[data-ui-theme] .hero p,body[data-ui-theme] .settings-hero p{color:var(--palette-muted)}
body[data-ui-theme] .hero .eyebrow,body[data-ui-theme] .settings-hero .eyebrow{color:color-mix(in srgb,var(--palette-primary) 82%,var(--palette-text))}
body[data-ui-theme] .button.primary,body[data-ui-theme] .search button{background:var(--palette-primary);color:#fff}
body[data-ui-theme] .button.primary:hover{background:color-mix(in srgb,var(--palette-primary) 86%,#172733)}
body[data-ui-theme] .button.secondary{background:var(--palette-surface);border-color:var(--palette-line);color:var(--palette-text)}
body[data-ui-theme] input:focus,body[data-ui-theme] select:focus,body[data-ui-theme] textarea:focus{border-color:var(--palette-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--palette-primary) 14%,transparent)}

/* The sidebar participates in the palette while remaining light and multi-tone. */
body[data-ui-theme] .sidebar{background:linear-gradient(180deg,var(--palette-sidebar),var(--palette-sidebar-2));color:var(--palette-text);border-right:1px solid var(--palette-line);box-shadow:8px 0 28px color-mix(in srgb,var(--palette-primary) 5%,transparent)}
body[data-ui-theme] .sidebar .brand{border-bottom-color:var(--palette-line)}
body[data-ui-theme] .sidebar .brand b,body[data-ui-theme] .sidebar-foot b{color:var(--palette-text)}
body[data-ui-theme] .sidebar .brand small,body[data-ui-theme] .sidebar-foot small{color:var(--palette-muted)}
body[data-ui-theme] .sidebar-foot{border-top-color:var(--palette-line)}
body[data-ui-theme] .sidebar-foot button{color:var(--palette-muted)}

body[data-ui-theme] .sidebar-nav-item[data-nav-tone="sky"]{--nav-strong:var(--palette-primary);--nav-mid:color-mix(in srgb,var(--palette-primary) 28%,white);--nav-soft:color-mix(in srgb,var(--palette-primary) 9%,white);--nav-ink:var(--palette-active-text)}
body[data-ui-theme] .sidebar-nav-item[data-nav-tone="mint"]{--nav-strong:var(--palette-secondary);--nav-mid:color-mix(in srgb,var(--palette-secondary) 25%,white);--nav-soft:color-mix(in srgb,var(--palette-secondary) 8%,white);--nav-ink:color-mix(in srgb,var(--palette-secondary) 70%,var(--palette-text))}
body[data-ui-theme] .sidebar-nav-group[data-nav-tone="blue"]{--nav-strong:var(--palette-primary);--nav-mid:color-mix(in srgb,var(--palette-primary) 26%,white);--nav-soft:color-mix(in srgb,var(--palette-primary) 8%,white);--nav-ink:var(--palette-active-text)}
body[data-ui-theme] .sidebar-nav-group[data-nav-tone="rose"]{--nav-strong:var(--palette-rose);--nav-mid:color-mix(in srgb,var(--palette-rose) 24%,white);--nav-soft:color-mix(in srgb,var(--palette-rose) 8%,white);--nav-ink:color-mix(in srgb,var(--palette-rose) 70%,var(--palette-text))}
body[data-ui-theme] .sidebar-nav-item[data-nav-tone="amber"],body[data-ui-theme] .sidebar-nav-group[data-nav-tone="amber"]{--nav-strong:var(--palette-warm);--nav-mid:color-mix(in srgb,var(--palette-warm) 27%,white);--nav-soft:color-mix(in srgb,var(--palette-warm) 9%,white);--nav-ink:color-mix(in srgb,var(--palette-warm) 68%,var(--palette-text))}
body[data-ui-theme] .sidebar-nav-item[data-nav-tone="violet"]{--nav-strong:var(--palette-tertiary);--nav-mid:color-mix(in srgb,var(--palette-tertiary) 25%,white);--nav-soft:color-mix(in srgb,var(--palette-tertiary) 8%,white);--nav-ink:color-mix(in srgb,var(--palette-tertiary) 72%,var(--palette-text))}
body[data-ui-theme] .sidebar-nav-item[data-nav-tone="teal"]{--nav-strong:var(--palette-secondary);--nav-mid:color-mix(in srgb,var(--palette-secondary) 25%,white);--nav-soft:color-mix(in srgb,var(--palette-secondary) 8%,white);--nav-ink:color-mix(in srgb,var(--palette-secondary) 72%,var(--palette-text))}
body[data-ui-theme] .sidebar-nav-group[data-nav-tone="slate"]{--nav-strong:color-mix(in srgb,var(--palette-primary) 52%,var(--palette-muted));--nav-mid:color-mix(in srgb,var(--palette-muted) 19%,white);--nav-soft:color-mix(in srgb,var(--palette-muted) 7%,white);--nav-ink:var(--palette-text)}

body[data-ui-theme] .sidebar-nav-item,body[data-ui-theme] .sidebar-nav-group>.sidebar-nav-group-toggle{color:color-mix(in srgb,var(--palette-text) 80%,var(--palette-muted))}
body[data-ui-theme] .sidebar-nav-item.active,
body[data-ui-theme] .sidebar-nav-group.is-active>.sidebar-nav-group-toggle,
body[data-ui-theme] .sidebar-nav-group.open>.sidebar-nav-group-toggle{
  background:linear-gradient(90deg,var(--nav-mid),color-mix(in srgb,var(--nav-soft) 70%,white))!important;
  color:var(--nav-ink)!important;
  border-color:color-mix(in srgb,var(--nav-strong) 38%,white)!important;
  box-shadow:inset 4px 0 0 var(--nav-strong),0 4px 12px color-mix(in srgb,var(--nav-strong) 10%,transparent)!important;
}
body[data-ui-theme] .sidebar-nav-item.active .nav-icon,
body[data-ui-theme] .sidebar-nav-group.is-active>.sidebar-nav-group-toggle .nav-icon,
body[data-ui-theme] .sidebar-nav-group.open>.sidebar-nav-group-toggle .nav-icon{color:var(--nav-ink)!important}
body[data-ui-theme] .sidebar-nav-children a{color:color-mix(in srgb,var(--palette-text) 72%,var(--palette-muted))}
body[data-ui-theme] .sidebar-nav-children a.active{
  background:linear-gradient(90deg,color-mix(in srgb,var(--nav-mid) 86%,white),white 84%)!important;
  color:var(--nav-ink)!important;
  border-color:color-mix(in srgb,var(--nav-strong) 34%,white)!important;
  box-shadow:inset 4px 0 0 var(--nav-strong),0 3px 10px color-mix(in srgb,var(--nav-strong) 11%,transparent)!important;
}
body[data-ui-theme] .sidebar-nav-children a.active .nav-child-dot{background:var(--nav-strong)!important;color:var(--nav-strong)!important;opacity:1!important}

/* Palette swatches show the group rather than a misleading single chip. */
.palette-preview-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:9px}
.palette-swatch{width:58px;height:36px;padding:4px;border:1px solid var(--palette-line,#dfe7eb);border-radius:10px;background:#fff;display:grid;grid-template-columns:repeat(4,1fr);gap:2px;cursor:pointer;box-shadow:0 4px 12px rgba(23,50,66,.06)}
.palette-swatch i{display:block;border-radius:4px}.palette-swatch.palette-esc i:nth-child(1){background:#2478b8}.palette-swatch.palette-esc i:nth-child(2){background:#23988e}.palette-swatch.palette-esc i:nth-child(3){background:#d49a28}.palette-swatch.palette-esc i:nth-child(4){background:#7b68c7}
.palette-swatch.palette-ocean i:nth-child(1){background:#167f95}.palette-swatch.palette-ocean i:nth-child(2){background:#3aa99d}.palette-swatch.palette-ocean i:nth-child(3){background:#4f78bd}.palette-swatch.palette-ocean i:nth-child(4){background:#d6a23b}
.palette-swatch.palette-indigo i:nth-child(1){background:#596fd0}.palette-swatch.palette-indigo i:nth-child(2){background:#418fa6}.palette-swatch.palette-indigo i:nth-child(3){background:#8a68c8}.palette-swatch.palette-indigo i:nth-child(4){background:#d4a045}
.palette-swatch.palette-emerald i:nth-child(1){background:#24866f}.palette-swatch.palette-emerald i:nth-child(2){background:#2479a7}.palette-swatch.palette-emerald i:nth-child(3){background:#d1a043}.palette-swatch.palette-emerald i:nth-child(4){background:#6e70bd}
.palette-swatch.palette-executive i:nth-child(1){background:#516b86}.palette-swatch.palette-executive i:nth-child(2){background:#2e8193}.palette-swatch.palette-executive i:nth-child(3){background:#c39245}.palette-swatch.palette-executive i:nth-child(4){background:#6872a8}
.palette-swatch.palette-warm i:nth-child(1){background:#b87832}.palette-swatch.palette-warm i:nth-child(2){background:#3b8794}.palette-swatch.palette-warm i:nth-child(3){background:#d29a30}.palette-swatch.palette-warm i:nth-child(4){background:#7968a8}
.palette-swatch.selected{outline:3px solid color-mix(in srgb,var(--palette-primary,#2478b8) 28%,transparent);outline-offset:2px;transform:translateY(-1px)}

/* ESC HRIS theme consistency cleanup — 2026-09-11
   Keep one light ESC Blue foundation across the application.
   Palette selection changes coordinated accents only; it never recolors the
   whole page canvas/sidebar/card system into a different hue. */
body[data-ui-theme],body:not([data-ui-theme]){
  --esc-signature:#2478b8;
  --esc-signature-dark:#174f7a;
  --esc-signature-soft:#dceeff;
  --esc-page:#f5f9fd;
  --esc-surface:#ffffff;
  --esc-surface-soft:#eef6fd;
  --esc-sidebar:#edf5ff;
  --esc-sidebar-end:#e6f0fc;
  --esc-line:#d5e4f1;
  --esc-text:#253d55;
  --esc-muted:#6f8498;
  --bg:var(--esc-page);
  --ink:var(--esc-text);
  --muted:var(--esc-muted);
  --line:var(--esc-line);
  --blue:var(--esc-signature);
  --navy:var(--esc-signature-dark);
  --theme-accent:var(--esc-signature);
  --theme-soft:var(--esc-surface-soft);
  --theme-sidebar-start:var(--esc-sidebar);
  --theme-sidebar-end:var(--esc-sidebar-end);
  --theme-hero-start:#eaf5ff;
  --theme-hero-mid:#dceeff;
  --theme-hero-end:#cfe7fa;
  background:var(--esc-page)!important;
  color:var(--esc-text);
}
body[data-ui-theme] .main,body:not([data-ui-theme]) .main{background:var(--esc-page)!important}
body[data-ui-theme] .topbar,body:not([data-ui-theme]) .topbar{
  background:rgba(255,255,255,.96)!important;
  border-bottom-color:var(--esc-line)!important;
  box-shadow:0 5px 18px rgba(36,120,184,.05)!important;
}
body[data-ui-theme] .sidebar,body:not([data-ui-theme]) .sidebar{
  background:linear-gradient(180deg,var(--esc-sidebar),var(--esc-sidebar-end))!important;
  color:var(--esc-text)!important;
  border-right-color:var(--esc-line)!important;
  box-shadow:8px 0 28px rgba(36,120,184,.05)!important;
}
body[data-ui-theme] .sidebar .brand,body:not([data-ui-theme]) .sidebar .brand,
body[data-ui-theme] .sidebar-foot,body:not([data-ui-theme]) .sidebar-foot{border-color:var(--esc-line)!important}
body[data-ui-theme] .sidebar .brand b,body[data-ui-theme] .sidebar-foot b,
body:not([data-ui-theme]) .sidebar .brand b,body:not([data-ui-theme]) .sidebar-foot b{color:var(--esc-text)!important}
body[data-ui-theme] .sidebar .brand small,body[data-ui-theme] .sidebar-foot small,
body:not([data-ui-theme]) .sidebar .brand small,body:not([data-ui-theme]) .sidebar-foot small{color:var(--esc-muted)!important}
body[data-ui-theme] .panel,body[data-ui-theme] .stat-card,body[data-ui-theme] .report-card,
body[data-ui-theme] .table-panel,body[data-ui-theme] .settings-card,
body:not([data-ui-theme]) .panel,body:not([data-ui-theme]) .stat-card,body:not([data-ui-theme]) .report-card,
body:not([data-ui-theme]) .table-panel,body:not([data-ui-theme]) .settings-card{
  background:var(--esc-surface)!important;
  border-color:var(--esc-line)!important;
  box-shadow:0 8px 24px rgba(36,120,184,.045)!important;
}
body[data-ui-theme] th,body:not([data-ui-theme]) th{background:#f4f9fd!important;color:#647c91!important}
body[data-ui-theme] td,body:not([data-ui-theme]) td{border-bottom-color:#e3edf5!important}
body[data-ui-theme] tbody tr:hover,body:not([data-ui-theme]) tbody tr:hover{background:#f7fbff!important}

/* Hero/header surfaces stay recognizably ESC Blue in every palette. */
body[data-ui-theme] .hero,body[data-ui-theme] .payroll-hero,body[data-ui-theme] .settings-hero,
body:not([data-ui-theme]) .hero,body:not([data-ui-theme]) .payroll-hero,body:not([data-ui-theme]) .settings-hero{
  background:linear-gradient(118deg,#eaf5ff,#dceeff 58%,#cfe7fa)!important;
  color:var(--esc-text)!important;
  border:1px solid #bfdaf0!important;
  box-shadow:0 14px 34px rgba(36,120,184,.09)!important;
}
body[data-ui-theme] .hero h2,body[data-ui-theme] .settings-hero h2,
body:not([data-ui-theme]) .hero h2,body:not([data-ui-theme]) .settings-hero h2{color:#173f61!important}
body[data-ui-theme] .hero p,body[data-ui-theme] .settings-hero p,
body:not([data-ui-theme]) .hero p,body:not([data-ui-theme]) .settings-hero p{color:#59758d!important}
body[data-ui-theme] .hero .eyebrow,body[data-ui-theme] .settings-hero .eyebrow,
body:not([data-ui-theme]) .hero .eyebrow,body:not([data-ui-theme]) .settings-hero .eyebrow{color:#3779ab!important}

/* Primary interaction stays ESC Blue. The selected palette contributes only
   secondary/group accents, which keeps branding and readability predictable. */
body[data-ui-theme] .button.primary,body[data-ui-theme] .search button,
body:not([data-ui-theme]) .button.primary,body:not([data-ui-theme]) .search button{background:var(--esc-signature)!important;color:#fff!important}
body[data-ui-theme] .button.primary:hover,body:not([data-ui-theme]) .button.primary:hover{background:#175f99!important}
body[data-ui-theme] input:focus,body[data-ui-theme] select:focus,body[data-ui-theme] textarea:focus,
body:not([data-ui-theme]) input:focus,body:not([data-ui-theme]) select:focus,body:not([data-ui-theme]) textarea:focus{
  border-color:var(--esc-signature)!important;box-shadow:0 0 0 3px rgba(36,120,184,.14)!important
}

/* Dashboard/direct active item is always clear and legible. */
body[data-ui-theme] .sidebar-nav-item[data-nav-tone="sky"],body:not([data-ui-theme]) .sidebar-nav-item[data-nav-tone="sky"]{
  --nav-strong:var(--esc-signature);--nav-mid:#cfe7fa;--nav-soft:#edf7ff;--nav-ink:#173f61;
}
body[data-ui-theme] .sidebar-nav-item.active,body:not([data-ui-theme]) .sidebar-nav-item.active{
  color:#173f61!important;
}

/* Palette-specific accent families only. Page/sidebar foundation above does not change. */
body[data-ui-theme="esc-blue"],body:not([data-ui-theme]){--palette-primary:#2478b8;--palette-secondary:#23988e;--palette-tertiary:#7b68c7;--palette-warm:#d49a28;--palette-rose:#d85d72}
body[data-ui-theme="ocean"]{--palette-primary:#2478b8;--palette-secondary:#2b9da3;--palette-tertiary:#5579bd;--palette-warm:#d3a143;--palette-rose:#cf6b7a}
body[data-ui-theme="indigo"]{--palette-primary:#2478b8;--palette-secondary:#4a8da6;--palette-tertiary:#706fd0;--palette-warm:#d0a14a;--palette-rose:#cf687d}
body[data-ui-theme="emerald"]{--palette-primary:#2478b8;--palette-secondary:#338c76;--palette-tertiary:#7178bd;--palette-warm:#cea248;--palette-rose:#d06b75}
body[data-ui-theme="executive"]{--palette-primary:#2478b8;--palette-secondary:#477f90;--palette-tertiary:#6d76a5;--palette-warm:#bd934f;--palette-rose:#c86f78}
body[data-ui-theme="warm"]{--palette-primary:#2478b8;--palette-secondary:#498895;--palette-tertiary:#7d6ea7;--palette-warm:#c58d37;--palette-rose:#c96d70}

/* Recompute module group tones from accent colors while keeping a common light base. */
body[data-ui-theme] .sidebar-nav-item[data-nav-tone="mint"],body:not([data-ui-theme]) .sidebar-nav-item[data-nav-tone="mint"]{--nav-strong:var(--palette-secondary);--nav-mid:color-mix(in srgb,var(--palette-secondary) 20%,white);--nav-soft:color-mix(in srgb,var(--palette-secondary) 6%,white);--nav-ink:#274d52}
body[data-ui-theme] .sidebar-nav-group[data-nav-tone="blue"],body:not([data-ui-theme]) .sidebar-nav-group[data-nav-tone="blue"]{--nav-strong:var(--esc-signature);--nav-mid:#cfe7fa;--nav-soft:#edf7ff;--nav-ink:#173f61}
body[data-ui-theme] .sidebar-nav-group[data-nav-tone="rose"],body:not([data-ui-theme]) .sidebar-nav-group[data-nav-tone="rose"]{--nav-strong:var(--palette-rose);--nav-mid:color-mix(in srgb,var(--palette-rose) 19%,white);--nav-soft:color-mix(in srgb,var(--palette-rose) 6%,white);--nav-ink:#70383f}
body[data-ui-theme] .sidebar-nav-item[data-nav-tone="amber"],body[data-ui-theme] .sidebar-nav-group[data-nav-tone="amber"],
body:not([data-ui-theme]) .sidebar-nav-item[data-nav-tone="amber"],body:not([data-ui-theme]) .sidebar-nav-group[data-nav-tone="amber"]{--nav-strong:var(--palette-warm);--nav-mid:color-mix(in srgb,var(--palette-warm) 20%,white);--nav-soft:color-mix(in srgb,var(--palette-warm) 6%,white);--nav-ink:#684c20}
body[data-ui-theme] .sidebar-nav-item[data-nav-tone="violet"],body:not([data-ui-theme]) .sidebar-nav-item[data-nav-tone="violet"]{--nav-strong:var(--palette-tertiary);--nav-mid:color-mix(in srgb,var(--palette-tertiary) 18%,white);--nav-soft:color-mix(in srgb,var(--palette-tertiary) 6%,white);--nav-ink:#49446f}
body[data-ui-theme] .sidebar-nav-item[data-nav-tone="teal"],body:not([data-ui-theme]) .sidebar-nav-item[data-nav-tone="teal"]{--nav-strong:var(--palette-secondary);--nav-mid:color-mix(in srgb,var(--palette-secondary) 18%,white);--nav-soft:color-mix(in srgb,var(--palette-secondary) 6%,white);--nav-ink:#27545a}
body[data-ui-theme] .sidebar-nav-group[data-nav-tone="slate"],body:not([data-ui-theme]) .sidebar-nav-group[data-nav-tone="slate"]{--nav-strong:#7994aa;--nav-mid:#e2ebf2;--nav-soft:#f5f8fb;--nav-ink:#344e63}

/* Opening a branch should not look the same as selecting a page. Parent branch
   gets a gentle tint; the active child carries the stronger selection cue. */
body[data-ui-theme] .sidebar-nav-group.open:not(.is-active)>.sidebar-nav-group-toggle,
body:not([data-ui-theme]) .sidebar-nav-group.open:not(.is-active)>.sidebar-nav-group-toggle{
  background:var(--nav-soft)!important;color:var(--nav-ink)!important;border-color:color-mix(in srgb,var(--nav-strong) 20%,white)!important;
  box-shadow:inset 3px 0 0 color-mix(in srgb,var(--nav-strong) 72%,white)!important;
}
body[data-ui-theme] .sidebar-nav-group.is-active>.sidebar-nav-group-toggle,
body:not([data-ui-theme]) .sidebar-nav-group.is-active>.sidebar-nav-group-toggle{
  background:linear-gradient(90deg,var(--nav-mid),var(--nav-soft))!important;color:var(--nav-ink)!important;
  border-color:color-mix(in srgb,var(--nav-strong) 34%,white)!important;box-shadow:inset 4px 0 0 var(--nav-strong),0 4px 12px color-mix(in srgb,var(--nav-strong) 8%,transparent)!important;
}
body[data-ui-theme] .sidebar-nav-children a.active,body:not([data-ui-theme]) .sidebar-nav-children a.active{
  background:color-mix(in srgb,var(--nav-mid) 72%,white)!important;color:var(--nav-ink)!important;
  border-color:color-mix(in srgb,var(--nav-strong) 32%,white)!important;box-shadow:inset 4px 0 0 var(--nav-strong),0 3px 9px color-mix(in srgb,var(--nav-strong) 9%,transparent)!important;
  font-weight:700!important;
}

/* Expanded Global HRIS Palette families — 2026-09-11 Part 2 */
body[data-ui-theme="walnut-brown"]{--palette-primary:#795548;--palette-secondary:#9a7868;--palette-tertiary:#8d6e63;--palette-warm:#c08a55;--palette-rose:#b56b68;--palette-bg:#faf7f5;--palette-surface:#fff;--palette-surface-2:#f4ece8;--palette-sidebar:#f2e9e4;--palette-sidebar-2:#e9ddd7;--palette-line:#e3d4cc;--palette-text:#4d3b34;--palette-muted:#88756c;--palette-active:#eadbd4;--palette-active-text:#68463b;--navy:#68463b;--blue:#795548;--green:#718d75;--amber:#c08a55;--red:#b56b68;--purple:#8d6e63;--bg:var(--palette-bg);--ink:var(--palette-text);--muted:var(--palette-muted);--line:var(--palette-line);--theme-accent:var(--palette-primary);--theme-soft:var(--palette-surface-2);--theme-sidebar-start:var(--palette-sidebar);--theme-sidebar-end:var(--palette-sidebar-2);--theme-hero-start:#f5ece7;--theme-hero-mid:#eadbd4;--theme-hero-end:#dfcbc1}
body[data-ui-theme="mocha-brown"]{--palette-primary:#8a6652;--palette-secondary:#a9826c;--palette-tertiary:#927268;--palette-warm:#c79a65;--palette-rose:#bb7370;--palette-bg:#fbf8f6;--palette-surface:#fff;--palette-surface-2:#f5eee9;--palette-sidebar:#f6eee9;--palette-sidebar-2:#ede2dc;--palette-line:#e6d8d0;--palette-text:#514239;--palette-muted:#8d7b70;--palette-active:#eee0d8;--palette-active-text:#73513f;--navy:#73513f;--blue:#8a6652;--green:#778f7c;--amber:#c79a65;--red:#bb7370;--purple:#927268;--bg:var(--palette-bg);--ink:var(--palette-text);--muted:var(--palette-muted);--line:var(--palette-line);--theme-accent:var(--palette-primary);--theme-soft:var(--palette-surface-2);--theme-sidebar-start:var(--palette-sidebar);--theme-sidebar-end:var(--palette-sidebar-2);--theme-hero-start:#f7efea;--theme-hero-mid:#eddfd7;--theme-hero-end:#e2cec3}
body[data-ui-theme="caramel-brown"]{--palette-primary:#b98245;--palette-secondary:#9b8064;--palette-tertiary:#9a786d;--palette-warm:#d4a25e;--palette-rose:#c77970;--palette-bg:#fcf9f4;--palette-surface:#fff;--palette-surface-2:#f8efe2;--palette-sidebar:#fbf2e5;--palette-sidebar-2:#f2e5d4;--palette-line:#eadbc8;--palette-text:#594838;--palette-muted:#927f6b;--palette-active:#f3e2cb;--palette-active-text:#845a2e;--navy:#6e5338;--blue:#b98245;--green:#7d9278;--amber:#d4a25e;--red:#c77970;--purple:#9a786d;--bg:var(--palette-bg);--ink:var(--palette-text);--muted:var(--palette-muted);--line:var(--palette-line);--theme-accent:var(--palette-primary);--theme-soft:var(--palette-surface-2);--theme-sidebar-start:var(--palette-sidebar);--theme-sidebar-end:var(--palette-sidebar-2);--theme-hero-start:#fbf2e5;--theme-hero-mid:#f2e3ce;--theme-hero-end:#e8d2b4}
body[data-ui-theme="sandstone-brown"]{--palette-primary:#a88968;--palette-secondary:#8f9b86;--palette-tertiary:#9c877e;--palette-warm:#c5a16f;--palette-rose:#bd8179;--palette-bg:#fbfaf7;--palette-surface:#fff;--palette-surface-2:#f4f0e9;--palette-sidebar:#f5f1e9;--palette-sidebar-2:#ece6dc;--palette-line:#e2dace;--palette-text:#504941;--palette-muted:#898077;--palette-active:#ebe3d8;--palette-active-text:#725e49;--navy:#66594c;--blue:#8c7965;--green:#82927d;--amber:#c5a16f;--red:#bd8179;--purple:#9c877e;--bg:var(--palette-bg);--ink:var(--palette-text);--muted:var(--palette-muted);--line:var(--palette-line);--theme-accent:var(--palette-primary);--theme-soft:var(--palette-surface-2);--theme-sidebar-start:var(--palette-sidebar);--theme-sidebar-end:var(--palette-sidebar-2);--theme-hero-start:#f6f1e9;--theme-hero-mid:#ece4d8;--theme-hero-end:#dfd4c5}
body[data-ui-theme="sky-blue"]{--palette-primary:#4d9ed8;--palette-secondary:#56b4b0;--palette-tertiary:#748dd0;--palette-warm:#d7a557;--palette-rose:#d87883;--palette-bg:#f5faff;--palette-surface:#fff;--palette-surface-2:#eaf5fd;--palette-sidebar:#edf7ff;--palette-sidebar-2:#e0f0fc;--palette-line:#d2e7f5;--palette-text:#29465c;--palette-muted:#71899b;--palette-active:#d9eefc;--palette-active-text:#2c76aa;--navy:#316b94;--blue:#4d9ed8;--green:#56a995;--amber:#d7a557;--red:#d87883;--purple:#748dd0;--bg:var(--palette-bg);--ink:var(--palette-text);--muted:var(--palette-muted);--line:var(--palette-line);--theme-accent:var(--palette-primary);--theme-soft:var(--palette-surface-2);--theme-sidebar-start:var(--palette-sidebar);--theme-sidebar-end:var(--palette-sidebar-2);--theme-hero-start:#eaf6ff;--theme-hero-mid:#d9edfb;--theme-hero-end:#c6e2f7}
body[data-ui-theme="powder-blue"]{--palette-primary:#6f9fc5;--palette-secondary:#78aaa4;--palette-tertiary:#858fc1;--palette-warm:#cda56c;--palette-rose:#cb7f88;--palette-bg:#f7fafd;--palette-surface:#fff;--palette-surface-2:#edf4f9;--palette-sidebar:#f0f6fb;--palette-sidebar-2:#e6eff6;--palette-line:#d8e4ed;--palette-text:#334b5e;--palette-muted:#788b9a;--palette-active:#dfebf4;--palette-active-text:#527b9c;--navy:#52718a;--blue:#6f9fc5;--green:#78a090;--amber:#cda56c;--red:#cb7f88;--purple:#858fc1;--bg:var(--palette-bg);--ink:var(--palette-text);--muted:var(--palette-muted);--line:var(--palette-line);--theme-accent:var(--palette-primary);--theme-soft:var(--palette-surface-2);--theme-sidebar-start:var(--palette-sidebar);--theme-sidebar-end:var(--palette-sidebar-2);--theme-hero-start:#eff6fb;--theme-hero-mid:#e1edf5;--theme-hero-end:#d2e2ee}
body[data-ui-theme="steel-blue"]{--palette-primary:#5f7f9d;--palette-secondary:#5f9696;--palette-tertiary:#747fa8;--palette-warm:#c3975d;--palette-rose:#c2737d;--palette-bg:#f6f8fa;--palette-surface:#fff;--palette-surface-2:#edf1f5;--palette-sidebar:#eef3f7;--palette-sidebar-2:#e3eaf0;--palette-line:#d5dfe7;--palette-text:#304354;--palette-muted:#748493;--palette-active:#dce6ee;--palette-active-text:#45637d;--navy:#45637d;--blue:#5f7f9d;--green:#5f8e82;--amber:#c3975d;--red:#c2737d;--purple:#747fa8;--bg:var(--palette-bg);--ink:var(--palette-text);--muted:var(--palette-muted);--line:var(--palette-line);--theme-accent:var(--palette-primary);--theme-soft:var(--palette-surface-2);--theme-sidebar-start:var(--palette-sidebar);--theme-sidebar-end:var(--palette-sidebar-2);--theme-hero-start:#edf3f7;--theme-hero-mid:#dfe8ef;--theme-hero-end:#d0dce6}
body[data-ui-theme="royal-blue"]{--palette-primary:#356ac3;--palette-secondary:#398d9a;--palette-tertiary:#6f68bd;--palette-warm:#d09d4d;--palette-rose:#ce6b7c;--palette-bg:#f5f8fe;--palette-surface:#fff;--palette-surface-2:#eaf0fb;--palette-sidebar:#edf2fc;--palette-sidebar-2:#e2eafb;--palette-line:#d3def2;--palette-text:#2b3d5d;--palette-muted:#71809a;--palette-active:#dce6fa;--palette-active-text:#2b57a0;--navy:#2b57a0;--blue:#356ac3;--green:#398d86;--amber:#d09d4d;--red:#ce6b7c;--purple:#6f68bd;--bg:var(--palette-bg);--ink:var(--palette-text);--muted:var(--palette-muted);--line:var(--palette-line);--theme-accent:var(--palette-primary);--theme-soft:var(--palette-surface-2);--theme-sidebar-start:var(--palette-sidebar);--theme-sidebar-end:var(--palette-sidebar-2);--theme-hero-start:#edf3ff;--theme-hero-mid:#dce7fb;--theme-hero-end:#cbdaf6}
body[data-ui-theme="navy-blue"]{--palette-primary:#345779;--palette-secondary:#3e7e88;--palette-tertiary:#606d9c;--palette-warm:#bd9152;--palette-rose:#b96575;--palette-bg:#f5f7f9;--palette-surface:#fff;--palette-surface-2:#eaf0f4;--palette-sidebar:#edf2f6;--palette-sidebar-2:#e1e8ee;--palette-line:#d2dde5;--palette-text:#293b4b;--palette-muted:#6f808e;--palette-active:#d9e4ec;--palette-active-text:#294b69;--navy:#294b69;--blue:#345779;--green:#477f79;--amber:#bd9152;--red:#b96575;--purple:#606d9c;--bg:var(--palette-bg);--ink:var(--palette-text);--muted:var(--palette-muted);--line:var(--palette-line);--theme-accent:var(--palette-primary);--theme-soft:var(--palette-surface-2);--theme-sidebar-start:var(--palette-sidebar);--theme-sidebar-end:var(--palette-sidebar-2);--theme-hero-start:#edf3f7;--theme-hero-mid:#dce7ee;--theme-hero-end:#cbd9e3}
body[data-ui-theme="mint-green"]{--palette-primary:#55a98c;--palette-secondary:#5e9eae;--palette-tertiary:#7d88bb;--palette-warm:#d0aa62;--palette-rose:#cf7c83;--palette-bg:#f5fbf8;--palette-surface:#fff;--palette-surface-2:#eaf7f1;--palette-sidebar:#eef9f4;--palette-sidebar-2:#e2f2ea;--palette-line:#d3e8dd;--palette-text:#2d4c40;--palette-muted:#718a80;--palette-active:#d9efe4;--palette-active-text:#367c66;--navy:#3d7060;--blue:#5e8fac;--green:#55a98c;--amber:#d0aa62;--red:#cf7c83;--purple:#7d88bb;--bg:var(--palette-bg);--ink:var(--palette-text);--muted:var(--palette-muted);--line:var(--palette-line);--theme-accent:var(--palette-primary);--theme-soft:var(--palette-surface-2);--theme-sidebar-start:var(--palette-sidebar);--theme-sidebar-end:var(--palette-sidebar-2);--theme-hero-start:#ecfaf4;--theme-hero-mid:#daf1e6;--theme-hero-end:#c9e8db}
body[data-ui-theme="sage-green"]{--palette-primary:#7d9f7c;--palette-secondary:#6f9e98;--palette-tertiary:#8989ad;--palette-warm:#c5a36d;--palette-rose:#c57e80;--palette-bg:#f8faf6;--palette-surface:#fff;--palette-surface-2:#f0f4ec;--palette-sidebar:#f2f6ef;--palette-sidebar-2:#e8eee4;--palette-line:#dce5d7;--palette-text:#3c4d3b;--palette-muted:#7d8979;--palette-active:#e3ebdf;--palette-active-text:#5d7c5c;--navy:#587057;--blue:#6f8e9f;--green:#7d9f7c;--amber:#c5a36d;--red:#c57e80;--purple:#8989ad;--bg:var(--palette-bg);--ink:var(--palette-text);--muted:var(--palette-muted);--line:var(--palette-line);--theme-accent:var(--palette-primary);--theme-soft:var(--palette-surface-2);--theme-sidebar-start:var(--palette-sidebar);--theme-sidebar-end:var(--palette-sidebar-2);--theme-hero-start:#f1f6ee;--theme-hero-mid:#e4ece0;--theme-hero-end:#d7e3d2}
body[data-ui-theme="pistachio-green"]{--palette-primary:#8eaa65;--palette-secondary:#70a18d;--palette-tertiary:#8b8db2;--palette-warm:#c9aa63;--palette-rose:#c9807f;--palette-bg:#fafbf5;--palette-surface:#fff;--palette-surface-2:#f2f6e8;--palette-sidebar:#f5f8ed;--palette-sidebar-2:#ebf1df;--palette-line:#e0e8d3;--palette-text:#46513a;--palette-muted:#838d75;--palette-active:#e7eed8;--palette-active-text:#6a823f;--navy:#64754a;--blue:#76909c;--green:#8eaa65;--amber:#c9aa63;--red:#c9807f;--purple:#8b8db2;--bg:var(--palette-bg);--ink:var(--palette-text);--muted:var(--palette-muted);--line:var(--palette-line);--theme-accent:var(--palette-primary);--theme-soft:var(--palette-surface-2);--theme-sidebar-start:var(--palette-sidebar);--theme-sidebar-end:var(--palette-sidebar-2);--theme-hero-start:#f5f8eb;--theme-hero-mid:#e8efd9;--theme-hero-end:#dce7c7}
body[data-ui-theme="seafoam-green"]{--palette-primary:#58a89d;--palette-secondary:#5c9fb3;--palette-tertiary:#7f8db7;--palette-warm:#cda665;--palette-rose:#ce7c83;--palette-bg:#f5fbfa;--palette-surface:#fff;--palette-surface-2:#e9f7f4;--palette-sidebar:#edf9f7;--palette-sidebar-2:#e1f2ef;--palette-line:#d1e8e3;--palette-text:#2d4c48;--palette-muted:#718a86;--palette-active:#d7efeb;--palette-active-text:#377d74;--navy:#3d706a;--blue:#5c91ad;--green:#58a89d;--amber:#cda665;--red:#ce7c83;--purple:#7f8db7;--bg:var(--palette-bg);--ink:var(--palette-text);--muted:var(--palette-muted);--line:var(--palette-line);--theme-accent:var(--palette-primary);--theme-soft:var(--palette-surface-2);--theme-sidebar-start:var(--palette-sidebar);--theme-sidebar-end:var(--palette-sidebar-2);--theme-hero-start:#ebfaf7;--theme-hero-mid:#d9f1ed;--theme-hero-end:#c7e8e2}
body[data-ui-theme="light-emerald"]{--palette-primary:#42a987;--palette-secondary:#559db0;--palette-tertiary:#788bb9;--palette-warm:#cfa75e;--palette-rose:#d07980;--palette-bg:#f4fbf8;--palette-surface:#fff;--palette-surface-2:#e8f7f0;--palette-sidebar:#ecfaf4;--palette-sidebar-2:#def3e9;--palette-line:#cee8dc;--palette-text:#294b3e;--palette-muted:#6e8980;--palette-active:#d4f0e3;--palette-active-text:#28785e;--navy:#356f5b;--blue:#5593ac;--green:#42a987;--amber:#cfa75e;--red:#d07980;--purple:#788bb9;--bg:var(--palette-bg);--ink:var(--palette-text);--muted:var(--palette-muted);--line:var(--palette-line);--theme-accent:var(--palette-primary);--theme-soft:var(--palette-surface-2);--theme-sidebar-start:var(--palette-sidebar);--theme-sidebar-end:var(--palette-sidebar-2);--theme-hero-start:#e9faf2;--theme-hero-mid:#d5f1e4;--theme-hero-end:#c1e8d6}

/* Four-chip previews for the expanded families. */
.palette-swatch.palette-walnut-brown i:nth-child(1){background:#795548}.palette-swatch.palette-walnut-brown i:nth-child(2){background:#9a7868}.palette-swatch.palette-walnut-brown i:nth-child(3){background:#c08a55}.palette-swatch.palette-walnut-brown i:nth-child(4){background:#8d6e63}
.palette-swatch.palette-mocha-brown i:nth-child(1){background:#8a6652}.palette-swatch.palette-mocha-brown i:nth-child(2){background:#a9826c}.palette-swatch.palette-mocha-brown i:nth-child(3){background:#c79a65}.palette-swatch.palette-mocha-brown i:nth-child(4){background:#927268}
.palette-swatch.palette-caramel-brown i:nth-child(1){background:#b98245}.palette-swatch.palette-caramel-brown i:nth-child(2){background:#9b8064}.palette-swatch.palette-caramel-brown i:nth-child(3){background:#d4a25e}.palette-swatch.palette-caramel-brown i:nth-child(4){background:#9a786d}
.palette-swatch.palette-sandstone-brown i:nth-child(1){background:#a88968}.palette-swatch.palette-sandstone-brown i:nth-child(2){background:#8f9b86}.palette-swatch.palette-sandstone-brown i:nth-child(3){background:#c5a16f}.palette-swatch.palette-sandstone-brown i:nth-child(4){background:#9c877e}
.palette-swatch.palette-sky-blue i:nth-child(1){background:#4d9ed8}.palette-swatch.palette-sky-blue i:nth-child(2){background:#56b4b0}.palette-swatch.palette-sky-blue i:nth-child(3){background:#d7a557}.palette-swatch.palette-sky-blue i:nth-child(4){background:#748dd0}
.palette-swatch.palette-powder-blue i:nth-child(1){background:#6f9fc5}.palette-swatch.palette-powder-blue i:nth-child(2){background:#78aaa4}.palette-swatch.palette-powder-blue i:nth-child(3){background:#cda56c}.palette-swatch.palette-powder-blue i:nth-child(4){background:#858fc1}
.palette-swatch.palette-steel-blue i:nth-child(1){background:#5f7f9d}.palette-swatch.palette-steel-blue i:nth-child(2){background:#5f9696}.palette-swatch.palette-steel-blue i:nth-child(3){background:#c3975d}.palette-swatch.palette-steel-blue i:nth-child(4){background:#747fa8}
.palette-swatch.palette-royal-blue i:nth-child(1){background:#356ac3}.palette-swatch.palette-royal-blue i:nth-child(2){background:#398d9a}.palette-swatch.palette-royal-blue i:nth-child(3){background:#d09d4d}.palette-swatch.palette-royal-blue i:nth-child(4){background:#6f68bd}
.palette-swatch.palette-navy-blue i:nth-child(1){background:#345779}.palette-swatch.palette-navy-blue i:nth-child(2){background:#3e7e88}.palette-swatch.palette-navy-blue i:nth-child(3){background:#bd9152}.palette-swatch.palette-navy-blue i:nth-child(4){background:#606d9c}
.palette-swatch.palette-mint-green i:nth-child(1){background:#55a98c}.palette-swatch.palette-mint-green i:nth-child(2){background:#5e9eae}.palette-swatch.palette-mint-green i:nth-child(3){background:#d0aa62}.palette-swatch.palette-mint-green i:nth-child(4){background:#7d88bb}
.palette-swatch.palette-sage-green i:nth-child(1){background:#7d9f7c}.palette-swatch.palette-sage-green i:nth-child(2){background:#6f9e98}.palette-swatch.palette-sage-green i:nth-child(3){background:#c5a36d}.palette-swatch.palette-sage-green i:nth-child(4){background:#8989ad}
.palette-swatch.palette-pistachio-green i:nth-child(1){background:#8eaa65}.palette-swatch.palette-pistachio-green i:nth-child(2){background:#70a18d}.palette-swatch.palette-pistachio-green i:nth-child(3){background:#c9aa63}.palette-swatch.palette-pistachio-green i:nth-child(4){background:#8b8db2}
.palette-swatch.palette-seafoam-green i:nth-child(1){background:#58a89d}.palette-swatch.palette-seafoam-green i:nth-child(2){background:#5c9fb3}.palette-swatch.palette-seafoam-green i:nth-child(3){background:#cda665}.palette-swatch.palette-seafoam-green i:nth-child(4){background:#7f8db7}
.palette-swatch.palette-light-emerald i:nth-child(1){background:#42a987}.palette-swatch.palette-light-emerald i:nth-child(2){background:#559db0}.palette-swatch.palette-light-emerald i:nth-child(3){background:#cfa75e}.palette-swatch.palette-light-emerald i:nth-child(4){background:#788bb9}

/* Global palette shell adoption fix — 2026-09-11 Part 2A
   The selected Global HRIS Palette now owns the complete application shell.
   This final layer intentionally supersedes the older light multitone/sidebar
   and ESC-signature locks that kept the navigation blue. */
body[data-ui-theme],body:not([data-ui-theme]){
  background:var(--palette-bg,var(--bg));
  color:var(--palette-text,var(--ink));
}
body[data-ui-theme] .main,body:not([data-ui-theme]) .main{
  background:var(--palette-bg,var(--bg))!important;
}
body[data-ui-theme] .sidebar,body:not([data-ui-theme]) .sidebar{
  background:linear-gradient(180deg,var(--theme-sidebar-start) 0%,var(--theme-sidebar-end) 100%)!important;
  color:var(--palette-text,var(--ink))!important;
  border-right-color:var(--palette-line,var(--line))!important;
  box-shadow:8px 0 24px color-mix(in srgb,var(--palette-primary) 8%,transparent)!important;
}
body[data-ui-theme] .sidebar .brand,body:not([data-ui-theme]) .sidebar .brand{
  border-bottom-color:color-mix(in srgb,var(--palette-primary) 18%,var(--palette-line))!important;
}
body[data-ui-theme] .sidebar .brand b,body:not([data-ui-theme]) .sidebar .brand b,
body[data-ui-theme] .sidebar-foot b,body:not([data-ui-theme]) .sidebar-foot b{
  color:var(--palette-text,var(--ink))!important;
}
body[data-ui-theme] .sidebar .brand small,body[data-ui-theme] .sidebar-foot small,
body:not([data-ui-theme]) .sidebar .brand small,body:not([data-ui-theme]) .sidebar-foot small{
  color:var(--palette-muted,var(--muted))!important;
}
body[data-ui-theme] .sidebar-foot,body:not([data-ui-theme]) .sidebar-foot{
  border-top-color:color-mix(in srgb,var(--palette-primary) 16%,var(--palette-line))!important;
}
body[data-ui-theme] .sidebar-foot button,body:not([data-ui-theme]) .sidebar-foot button{
  color:var(--palette-active-text,var(--palette-primary))!important;
}

/* Sidebar groups use shades from the selected family instead of fixed module colors. */
body[data-ui-theme] .sidebar-nav-item,body[data-ui-theme] .sidebar-nav-group,
body:not([data-ui-theme]) .sidebar-nav-item,body:not([data-ui-theme]) .sidebar-nav-group{
  --nav-strong:var(--palette-primary);
  --nav-mid:color-mix(in srgb,var(--palette-primary) 24%,var(--palette-surface));
  --nav-soft:color-mix(in srgb,var(--palette-primary) 9%,var(--palette-surface));
  --nav-ink:var(--palette-active-text,var(--palette-text));
}
body[data-ui-theme] .sidebar-nav-item[data-nav-tone],body[data-ui-theme] .sidebar-nav-group[data-nav-tone],
body:not([data-ui-theme]) .sidebar-nav-item[data-nav-tone],body:not([data-ui-theme]) .sidebar-nav-group[data-nav-tone]{
  --nav-strong:var(--palette-primary)!important;
  --nav-mid:color-mix(in srgb,var(--palette-primary) 24%,var(--palette-surface))!important;
  --nav-soft:color-mix(in srgb,var(--palette-primary) 9%,var(--palette-surface))!important;
  --nav-ink:var(--palette-active-text,var(--palette-text))!important;
}
body[data-ui-theme] .sidebar-nav-item,body[data-ui-theme] .sidebar-nav-group>.sidebar-nav-group-toggle,
body:not([data-ui-theme]) .sidebar-nav-item,body:not([data-ui-theme]) .sidebar-nav-group>.sidebar-nav-group-toggle{
  color:var(--palette-text,var(--ink))!important;
}
body[data-ui-theme] .sidebar-nav .nav-icon,body:not([data-ui-theme]) .sidebar-nav .nav-icon{
  color:var(--palette-primary)!important;
}
body[data-ui-theme] .sidebar-nav-item:hover,body[data-ui-theme] .sidebar-nav-group>.sidebar-nav-group-toggle:hover,
body:not([data-ui-theme]) .sidebar-nav-item:hover,body:not([data-ui-theme]) .sidebar-nav-group>.sidebar-nav-group-toggle:hover{
  background:var(--nav-soft)!important;color:var(--nav-ink)!important;
}
body[data-ui-theme] .sidebar-nav-item.active,body[data-ui-theme] .sidebar-nav-group.is-active>.sidebar-nav-group-toggle,
body:not([data-ui-theme]) .sidebar-nav-item.active,body:not([data-ui-theme]) .sidebar-nav-group.is-active>.sidebar-nav-group-toggle{
  background:linear-gradient(90deg,var(--nav-mid),var(--nav-soft))!important;
  color:var(--nav-ink)!important;
  border-color:color-mix(in srgb,var(--palette-primary) 36%,var(--palette-line))!important;
  box-shadow:inset 4px 0 0 var(--palette-primary),0 4px 12px color-mix(in srgb,var(--palette-primary) 10%,transparent)!important;
}
body[data-ui-theme] .sidebar-nav-children a,body:not([data-ui-theme]) .sidebar-nav-children a{
  color:color-mix(in srgb,var(--palette-text) 78%,var(--palette-muted))!important;
}
body[data-ui-theme] .sidebar-nav-children a:hover,body:not([data-ui-theme]) .sidebar-nav-children a:hover{
  background:var(--nav-soft)!important;color:var(--nav-ink)!important;
}
body[data-ui-theme] .sidebar-nav-children a.active,body:not([data-ui-theme]) .sidebar-nav-children a.active{
  background:var(--palette-active)!important;color:var(--palette-active-text)!important;
  border-color:color-mix(in srgb,var(--palette-primary) 32%,var(--palette-line))!important;
  box-shadow:inset 4px 0 0 var(--palette-primary),0 3px 9px color-mix(in srgb,var(--palette-primary) 9%,transparent)!important;
}

/* Header, workspace, heroes, cards and controls all follow the same palette. */
body[data-ui-theme] .topbar,body:not([data-ui-theme]) .topbar{
  background:color-mix(in srgb,var(--palette-surface) 82%,var(--palette-surface-2))!important;
  border-bottom-color:var(--palette-line)!important;
}
body[data-ui-theme] .topbar h1,body:not([data-ui-theme]) .topbar h1{color:var(--palette-text)!important}
body[data-ui-theme] .topbar p,body:not([data-ui-theme]) .topbar p{color:var(--palette-muted)!important}
body[data-ui-theme] .hero,body[data-ui-theme] .payroll-hero,body[data-ui-theme] .settings-hero,
body:not([data-ui-theme]) .hero,body:not([data-ui-theme]) .payroll-hero,body:not([data-ui-theme]) .settings-hero{
  background:linear-gradient(118deg,var(--theme-hero-start) 0%,var(--theme-hero-mid) 58%,var(--theme-hero-end) 100%)!important;
  color:var(--palette-text)!important;
  border-color:color-mix(in srgb,var(--palette-primary) 20%,var(--palette-line))!important;
  box-shadow:0 14px 34px color-mix(in srgb,var(--palette-primary) 9%,transparent)!important;
}
body[data-ui-theme] .hero h2,body[data-ui-theme] .settings-hero h2,
body:not([data-ui-theme]) .hero h2,body:not([data-ui-theme]) .settings-hero h2{color:var(--palette-text)!important}
body[data-ui-theme] .hero p,body[data-ui-theme] .settings-hero p,
body:not([data-ui-theme]) .hero p,body:not([data-ui-theme]) .settings-hero p{color:var(--palette-muted)!important}
body[data-ui-theme] .hero .eyebrow,body[data-ui-theme] .settings-hero .eyebrow,
body:not([data-ui-theme]) .hero .eyebrow,body:not([data-ui-theme]) .settings-hero .eyebrow{color:var(--palette-active-text)!important}
body[data-ui-theme] .panel,body[data-ui-theme] .stat-card,body[data-ui-theme] .report-card,
body[data-ui-theme] .table-panel,body[data-ui-theme] .settings-card,
body:not([data-ui-theme]) .panel,body:not([data-ui-theme]) .stat-card,body:not([data-ui-theme]) .report-card,
body:not([data-ui-theme]) .table-panel,body:not([data-ui-theme]) .settings-card{
  background:var(--palette-surface)!important;
  border-color:var(--palette-line)!important;
}
body[data-ui-theme] th,body:not([data-ui-theme]) th{
  background:var(--palette-surface-2)!important;color:var(--palette-muted)!important;
}
body[data-ui-theme] tbody tr:hover,body:not([data-ui-theme]) tbody tr:hover{
  background:color-mix(in srgb,var(--palette-primary) 4%,var(--palette-surface))!important;
}
body[data-ui-theme] .button.primary,body[data-ui-theme] .search button,
body:not([data-ui-theme]) .button.primary,body:not([data-ui-theme]) .search button{
  background:var(--palette-primary)!important;color:#fff!important;
}
body[data-ui-theme] .button.primary:hover,body:not([data-ui-theme]) .button.primary:hover{
  background:color-mix(in srgb,var(--palette-primary) 82%,#000)!important;
}
body[data-ui-theme] .button.secondary,body:not([data-ui-theme]) .button.secondary{
  background:var(--palette-surface)!important;border-color:var(--palette-line)!important;color:var(--palette-active-text)!important;
}
body[data-ui-theme] input:focus,body[data-ui-theme] select:focus,body[data-ui-theme] textarea:focus,
body:not([data-ui-theme]) input:focus,body:not([data-ui-theme]) select:focus,body:not([data-ui-theme]) textarea:focus{
  border-color:var(--palette-primary)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--palette-primary) 16%,transparent)!important;
}
body[data-ui-theme] .module-tabs a.active,body:not([data-ui-theme]) .module-tabs a.active,
body[data-ui-theme] .segmented button.active,body:not([data-ui-theme]) .segmented button.active{
  border-color:color-mix(in srgb,var(--palette-primary) 28%,var(--palette-line))!important;
  color:var(--palette-active-text)!important;
}

/* User-level palette preference (2026-09-11) */
.sidebar-user-meta{min-width:0;display:flex;flex-direction:column;position:relative}
.sidebar-account-link{display:block;font-size:12px;margin-top:4px;color:var(--palette-accent,var(--blue));font-weight:700}
.user-palette-picker{position:relative;margin-top:3px}
.user-palette-picker>summary{list-style:none;cursor:pointer;font-size:12px;font-weight:700;color:var(--palette-accent,var(--blue));width:max-content;max-width:100%}
.user-palette-picker>summary::-webkit-details-marker{display:none}
.user-palette-picker[open]>summary{color:var(--palette-text,var(--navy))}
.user-palette-form{position:absolute;left:0;bottom:calc(100% + 9px);z-index:120;width:250px;padding:14px;background:#fff;border:1px solid var(--palette-line,var(--line));border-radius:12px;box-shadow:0 18px 45px rgba(17,43,61,.18);display:grid;gap:9px;color:#26394b}
.user-palette-form:after{content:"";position:absolute;left:20px;bottom:-6px;width:11px;height:11px;background:#fff;border-right:1px solid var(--palette-line,var(--line));border-bottom:1px solid var(--palette-line,var(--line));transform:rotate(45deg)}
.user-palette-form label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:800;color:#64798c}
.user-palette-form select{width:100%;padding:9px 30px 9px 10px;border:1px solid var(--palette-line,var(--line));border-radius:9px;background:#fff;color:#26394b;font:600 12px 'DM Sans',sans-serif;outline:none}
.user-palette-form select:focus{border-color:var(--palette-accent,var(--blue));box-shadow:0 0 0 3px var(--palette-soft,#e6f1f7)}
.user-palette-form small{color:#73879a!important;font-size:11px;line-height:1.35}
.user-palette-form .button{width:100%;padding:9px 12px;font-size:12px}
.sidebar-logout-form{margin:0}
@media(max-width:800px){.user-palette-form{position:fixed;left:16px;right:16px;bottom:82px;width:auto;max-width:360px}.user-palette-form:after{display:none}}


/* Designation directory search toolbar — polished and palette-aware (2026-09-11) */
.designation-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin:22px 0 12px;padding:12px 14px;
  border:1px solid var(--palette-line,var(--line));border-radius:14px;
  background:color-mix(in srgb,var(--palette-surface,var(--white)) 92%,var(--palette-surface-2,#f4f8fb));
}
.designation-search{display:flex;align-items:center;gap:8px;min-width:0;flex:1;max-width:760px}
.designation-search{position:relative}
.designation-search-icon{
  position:absolute;left:14px;top:50%;width:16px;height:16px;
  transform:translateY(-50%);pointer-events:none;z-index:2;color:var(--palette-muted,var(--muted));
}
.designation-search-icon::before{
  content:"";position:absolute;left:0;top:0;width:9px;height:9px;
  border:2px solid currentColor;border-radius:50%;background:transparent;
}
.designation-search-icon::after{
  content:"";position:absolute;width:7px;height:2px;left:10px;top:11px;
  border-radius:2px;background:currentColor;transform:rotate(45deg);transform-origin:left center;
}
.designation-search input{
  flex:1;min-width:220px;height:44px;padding:0 15px 0 42px!important;
  border:1px solid var(--palette-line,var(--line))!important;border-radius:10px!important;
  background:var(--palette-surface,#fff)!important;color:var(--palette-text,var(--navy));
  font-size:14px;box-shadow:0 1px 2px rgba(16,45,65,.03);
}
.designation-search input::placeholder{color:color-mix(in srgb,var(--palette-muted,var(--muted)) 72%,transparent)}
.designation-search .button{height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 18px;border-radius:10px!important;white-space:nowrap}
.designation-search .button.primary{box-shadow:0 6px 14px color-mix(in srgb,var(--palette-primary,var(--blue)) 16%,transparent)}
.designation-search .button.secondary{box-shadow:none}
.designation-result-count{
  flex:0 0 auto;padding:7px 10px;border-radius:999px;
  background:var(--palette-soft,#eef5f8);color:var(--palette-active-text,var(--navy));
  font-size:12px;font-weight:800;white-space:nowrap
}
@media(max-width:760px){
  .designation-toolbar{align-items:stretch;flex-direction:column;padding:10px}
  .designation-search{max-width:none;flex-wrap:wrap}
  .designation-search input{min-width:0;width:100%;flex-basis:100%}
  .designation-search .button{flex:1}
  .designation-result-count{align-self:flex-start}
}

/* ESC HRIS authentication branding lock — 2026-09-11
   Login/logout screen must never inherit Global or per-user palettes. */
.auth-page{
  --auth-esc-navy:#06283e;
  --auth-esc-blue-dark:#0b3b5c;
  --auth-esc-blue:#1b628d;
  --auth-esc-panel-start:#0c4265;
  --auth-esc-panel-end:#0b3250;
  --auth-esc-gold:#f0ae2d;
  background:radial-gradient(circle at 15% 15%,var(--auth-esc-blue) 0,var(--auth-esc-blue-dark) 38%,var(--auth-esc-navy) 100%)!important;
}
.auth-page .auth-brand{
  background:linear-gradient(145deg,var(--auth-esc-panel-start),var(--auth-esc-panel-end))!important;
  color:#fff!important;
}
.auth-page .auth-brand p{color:#bcd2df!important}
.auth-page .auth-card .button.primary,
.auth-page .auth-card button[type="submit"]{
  background:var(--auth-esc-gold)!important;
  color:#2c2b26!important;
  border-color:var(--auth-esc-gold)!important;
}
.auth-page .auth-card input:focus{
  border-color:var(--auth-esc-blue)!important;
  box-shadow:0 0 0 3px rgba(27,98,141,.15)!important;
}


/* Dashboard hourly quotation readability.
   Keep quote typography consistent with the HRIS shell and maintain contrast
   across all 365 daily Dashboard color combinations. */
body .dashboard-daily-palette > .hero .dashboard-hourly-quote {
  display:block;
  margin:8px 0 0;
  max-width:900px;
  font-family:inherit;
  font-size:14px;
  font-style:normal;
  font-weight:500;
  line-height:1.5;
  letter-spacing:0;
  color:color-mix(in srgb,var(--palette-text,#173f61) 78%,#2b241d 22%) !important;
  text-shadow:none;
}
body .dashboard-daily-palette > .hero .dashboard-hourly-quote b {
  font-family:inherit;
  font-size:.96em;
  font-style:normal;
  font-weight:700;
  letter-spacing:0;
  color:color-mix(in srgb,var(--palette-text,#173f61) 88%,#1f1b17 12%) !important;
  opacity:1;
}
body .dashboard-daily-palette > .hero .dashboard-hero-context {
  color:color-mix(in srgb,var(--palette-muted,#59758d) 78%,#332c25 22%) !important;
}
@media(max-width:700px){
  body .dashboard-daily-palette > .hero .dashboard-hourly-quote{font-size:13px}
}


/* 2026-09-11: avoid repeating module titles in the shared topbar.
   Time & Attendance through Settings already provide a contextual hero heading. */
.topbar.topbar-context-only{height:72px}
.topbar.topbar-context-only .topbar-context{display:flex;align-items:center;min-width:0}
.topbar.topbar-context-only .topbar-date{margin:0;font-weight:600;letter-spacing:.01em}
@media(max-width:800px){
  .topbar.topbar-context-only{height:64px}
  .topbar.topbar-context-only .topbar-date{font-size:12px}
}

/* Sidebar fixed utility footer — 2026-09-11
   Navigation owns the scrollable middle area. Install/My Palette/account/logout
   stay visible at the bottom on desktop, PWA, and mobile drawer layouts. */
.sidebar{
  overflow:hidden!important;
  min-height:100vh;
  height:100vh;
  height:100dvh;
}
.sidebar>.brand{
  flex:0 0 auto;
}
.sidebar>.sidebar-nav{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
  padding-bottom:10px;
}
.sidebar-utility{
  flex:0 0 auto;
  position:relative;
  z-index:8;
  margin-top:8px;
  padding-top:10px;
  border-top:1px solid color-mix(in srgb,var(--palette-primary,var(--blue)) 16%,var(--palette-line,var(--line)));
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--theme-sidebar-end,#eef4ff) 90%,transparent),
    var(--theme-sidebar-end,#eef4ff) 38%);
}
.sidebar-utility .sidebar-install-wrap{
  margin:0;
  padding:0 7px 9px;
}
.sidebar-utility .sidebar-install-link{
  min-height:46px;
  padding:9px 10px;
  background:color-mix(in srgb,var(--palette-surface,#fff) 70%,transparent)!important;
  border-color:color-mix(in srgb,var(--palette-primary,var(--blue)) 24%,var(--palette-line,var(--line)))!important;
  color:var(--palette-text,var(--ink))!important;
  box-shadow:0 4px 12px color-mix(in srgb,var(--palette-primary,var(--blue)) 7%,transparent);
}
.sidebar-utility .sidebar-install-link:hover{
  background:var(--palette-surface,#fff)!important;
  color:var(--palette-active-text,var(--palette-primary,var(--blue)))!important;
}
.sidebar-utility .sidebar-install-icon{
  background:color-mix(in srgb,var(--palette-primary,var(--blue)) 14%,var(--palette-surface,#fff));
  color:var(--palette-active-text,var(--palette-primary,var(--blue)));
}
.sidebar-utility .sidebar-install-link small{
  color:var(--palette-muted,var(--muted))!important;
}
.sidebar-utility .sidebar-foot{
  margin:0!important;
  padding:10px 7px 2px!important;
  border-top:0!important;
  grid-template-columns:36px minmax(0,1fr) 32px;
  align-items:center;
}
.sidebar-utility .sidebar-user-meta{
  min-width:0;
}
.sidebar-utility .sidebar-logout-form button{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:9px;
}
.sidebar-utility .sidebar-logout-form button:hover{
  background:color-mix(in srgb,var(--palette-primary,var(--blue)) 10%,var(--palette-surface,#fff));
}
/* When the install prompt is unavailable/installed, hidden button consumes zero space. */
.sidebar-utility .sidebar-install-wrap:has(.sidebar-install-link[hidden]){
  display:none;
}
/* My Palette opens above the fixed footer and stays inside the viewport. */
.sidebar-utility .user-palette-form{
  bottom:calc(100% + 10px);
  max-height:min(420px,calc(100dvh - 110px));
  overflow:auto;
}

/* Compact desktop rail: utility area remains fixed and uncluttered. */
.sidebar-collapsed .sidebar-utility{
  padding-top:8px;
}
.sidebar-collapsed .sidebar-utility .sidebar-install-wrap{
  padding-inline:2px;
}
.sidebar-collapsed .sidebar-utility .sidebar-install-link{
  justify-content:center;
  padding:8px;
}
.sidebar-collapsed .sidebar-utility .sidebar-install-link>span:last-child,
.sidebar-collapsed .sidebar-utility .sidebar-user-meta{
  display:none;
}
.sidebar-collapsed .sidebar-utility .sidebar-foot{
  grid-template-columns:1fr;
  justify-items:center;
  gap:8px;
  padding-inline:2px!important;
}
.sidebar-collapsed .sidebar-utility .sidebar-logout-form{
  display:block;
}

@media(max-width:800px){
  .sidebar{
    height:100dvh!important;
    max-height:100dvh!important;
    overflow:hidden!important;
  }
  .sidebar>.sidebar-nav{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto!important;
    padding-bottom:12px;
  }
  .sidebar-utility{
    margin-top:4px;
    padding-bottom:max(6px,env(safe-area-inset-bottom));
  }
  .sidebar-utility .sidebar-install-link{min-height:48px}
  .sidebar-utility .user-palette-form{
    position:fixed;
    left:16px;
    right:16px;
    bottom:calc(92px + env(safe-area-inset-bottom));
    width:auto;
    max-width:360px;
    max-height:calc(100dvh - 130px);
  }
}

/* Avoid :has() dependency on older WebViews: the wrapper itself is harmless
   if the PWA button is hidden, but keep it visually collapsed there too. */
@supports not selector(:has(*)){
  .sidebar-utility .sidebar-install-wrap{padding-bottom:0}
  .sidebar-utility .sidebar-install-link:not([hidden]){margin-bottom:9px}
}

/* ============================================================
   2026-09-11 — GLOBAL MOBILE CRUD / DRAWER STANDARD
   Applies to every Add/Edit/View account drawer and CRUD modal.
   Goal: the close control and action buttons must remain reachable
   on iPhone/Android/PWA regardless of form length or app topbar.
   ============================================================ */
@media (max-width:800px){
  /* Any open CRUD drawer owns the mobile viewport. */
  body.user-drawer-open,
  body.shift-drawer-open,
  body.holiday-drawer-open,
  body.drawer-open,
  body.overtime-drawer-open,
  body.leave-credit-drawer-open,
  body.message-drawer-open{
    overflow:hidden!important;
  }

  /* Keep CRUD backdrops and drawers above the persistent HRIS header/sidebar. */
  .drawer-backdrop{
    position:fixed!important;
    inset:0!important;
    z-index:5990!important;
  }

  .account-drawer,
  [data-shift-drawer],
  [data-holiday-drawer],
  [data-overtime-drawer],
  [data-credit-leave-drawer]{
    position:fixed!important;
    z-index:6000!important;
    inset:0 0 0 auto!important;
    width:100vw!important;
    max-width:100vw!important;
    height:100vh!important;
    height:100dvh!important;
    max-height:100dvh!important;
    border-radius:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    background:var(--panel,#fff)!important;
  }

  /* The drawer title/close row never scrolls out of reach. */
  .account-drawer > .drawer-head,
  [data-shift-drawer] > .drawer-head,
  [data-holiday-drawer] > .drawer-head,
  [data-overtime-drawer] > .drawer-head,
  [data-credit-leave-drawer] > .drawer-head{
    position:sticky!important;
    top:0!important;
    z-index:30!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
    width:100%!important;
    min-height:72px!important;
    margin:0!important;
    padding:calc(12px + env(safe-area-inset-top,0px)) 14px 12px!important;
    box-sizing:border-box!important;
    background:color-mix(in srgb,var(--panel,#fff) 96%,var(--theme-soft,#eef5f8))!important;
    border-bottom:1px solid var(--line,#dce6eb)!important;
    box-shadow:0 5px 16px rgba(15,43,58,.10)!important;
    transform:translateZ(0);
  }

  .account-drawer > .drawer-head > div,
  [data-shift-drawer] > .drawer-head > div,
  [data-holiday-drawer] > .drawer-head > div,
  [data-overtime-drawer] > .drawer-head > div,
  [data-credit-leave-drawer] > .drawer-head > div{
    min-width:0!important;
    flex:1 1 auto!important;
  }

  .account-drawer > .drawer-head h3,
  [data-shift-drawer] > .drawer-head h3,
  [data-holiday-drawer] > .drawer-head h3,
  [data-overtime-drawer] > .drawer-head h3,
  [data-credit-leave-drawer] > .drawer-head h3{
    margin:2px 0 0!important;
    font-size:18px!important;
    line-height:1.18!important;
    overflow-wrap:anywhere;
  }

  /* X is deliberately large enough for a thumb and cannot be hidden by module CSS. */
  .account-drawer > .drawer-head .drawer-close,
  [data-shift-drawer] > .drawer-head .drawer-close,
  [data-holiday-drawer] > .drawer-head .drawer-close,
  [data-overtime-drawer] > .drawer-head .drawer-close,
  [data-credit-leave-drawer] > .drawer-head .drawer-close{
    display:grid!important;
    place-items:center!important;
    position:relative!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    flex:0 0 46px!important;
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    min-height:46px!important;
    margin:0!important;
    padding:0!important;
    border:1px solid color-mix(in srgb,var(--theme-primary,#2c7fb0) 28%,var(--line,#dce6eb))!important;
    border-radius:13px!important;
    background:#fff!important;
    color:var(--navy,#173246)!important;
    font-size:28px!important;
    font-weight:500!important;
    line-height:1!important;
    text-decoration:none!important;
    box-shadow:0 3px 10px rgba(15,43,58,.08)!important;
    touch-action:manipulation!important;
    -webkit-tap-highlight-color:transparent!important;
  }

  /* Give long forms comfortable mobile spacing and safe-area clearance. */
  .account-drawer > .account-form,
  [data-shift-drawer] > .account-form,
  [data-holiday-drawer] > .account-form,
  [data-overtime-drawer] > .account-form,
  [data-credit-leave-drawer] > .account-form{
    padding:18px 16px calc(92px + env(safe-area-inset-bottom,0px))!important;
  }

  /* Where a form exposes the standard action row, keep Save/Cancel reachable too. */
  .account-drawer .drawer-actions,
  [data-shift-drawer] .drawer-actions,
  [data-holiday-drawer] .drawer-actions,
  [data-overtime-drawer] .drawer-actions,
  [data-credit-leave-drawer] .drawer-actions{
    position:sticky!important;
    bottom:0!important;
    z-index:20!important;
    display:flex!important;
    gap:10px!important;
    margin:18px -16px calc(-92px - env(safe-area-inset-bottom,0px))!important;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))!important;
    background:color-mix(in srgb,var(--panel,#fff) 96%,var(--theme-soft,#eef5f8))!important;
    border-top:1px solid var(--line,#dce6eb)!important;
    box-shadow:0 -6px 18px rgba(15,43,58,.08)!important;
  }
  .account-drawer .drawer-actions .button,
  [data-shift-drawer] .drawer-actions .button,
  [data-holiday-drawer] .drawer-actions .button,
  [data-overtime-drawer] .drawer-actions .button,
  [data-credit-leave-drawer] .drawer-actions .button{
    min-height:44px!important;
  }

  /* Settings/master-data CRUD modals use the same always-visible close standard. */
  .org-modal-backdrop{
    z-index:6090!important;
  }
  .org-modal,
  .statutory-modal{
    z-index:6100!important;
    top:0!important;
    left:0!important;
    transform:none!important;
    width:100vw!important;
    max-width:100vw!important;
    height:100vh!important;
    height:100dvh!important;
    max-height:100dvh!important;
    margin:0!important;
    border-radius:0!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .org-modal > .panel-head,
  .statutory-modal > .panel-head{
    position:sticky!important;
    top:0!important;
    z-index:30!important;
    padding:calc(12px + env(safe-area-inset-top,0px)) 16px 12px!important;
    background:#fff!important;
    border-bottom:1px solid var(--line,#dce6eb)!important;
    box-shadow:0 5px 16px rgba(15,43,58,.10)!important;
  }
  .org-modal > .panel-head .drawer-close,
  .statutory-modal > .panel-head .drawer-close{
    display:grid!important;
    place-items:center!important;
    visibility:visible!important;
    opacity:1!important;
    flex:0 0 46px!important;
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    min-height:46px!important;
    margin:0!important;
    border-radius:13px!important;
    background:#fff!important;
    font-size:28px!important;
    line-height:1!important;
  }
  .org-modal .org-edit-form,
  .statutory-modal .org-edit-form{
    padding:18px 16px calc(88px + env(safe-area-inset-bottom,0px))!important;
  }
  .org-modal .org-edit-form .drawer-actions,
  .statutory-modal .org-edit-form .drawer-actions{
    position:sticky!important;
    bottom:0!important;
    z-index:20!important;
    margin:18px -16px calc(-88px - env(safe-area-inset-bottom,0px))!important;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))!important;
    background:#fff!important;
    border-top:1px solid var(--line,#dce6eb)!important;
    box-shadow:0 -6px 18px rgba(15,43,58,.08)!important;
  }

  /* Payroll/allowance CRUD dialogs: header must stay visible on phones as well. */
  .payroll-detail-modal{
    z-index:6200!important;
    width:100vw!important;
    max-width:100vw!important;
    height:100vh!important;
    height:100dvh!important;
    max-height:100dvh!important;
    border-radius:0!important;
  }
  .payroll-detail-modal > .payroll-modal-head,
  .shared-allowance-edit > .payroll-modal-head{
    position:sticky!important;
    top:0!important;
    z-index:30!important;
    padding:calc(12px + env(safe-area-inset-top,0px)) 14px 12px!important;
    background:#fff!important;
    box-shadow:0 5px 16px rgba(15,43,58,.10)!important;
  }

  /* Messaging drawers share the same mobile close-button accessibility rule. */
  .message-new-drawer,
  .message-members-drawer{
    z-index:6000!important;
    width:100vw!important;
    max-width:100vw!important;
    height:100vh!important;
    height:100dvh!important;
  }
  .message-new-drawer > .drawer-head,
  .message-members-drawer > .drawer-head{
    position:sticky!important;
    top:0!important;
    z-index:30!important;
    padding:calc(12px + env(safe-area-inset-top,0px)) 14px 12px!important;
    background:#fff!important;
    box-shadow:0 5px 16px rgba(15,43,58,.10)!important;
  }
  .message-new-drawer > .drawer-head .icon-button,
  .message-members-drawer > .drawer-head .icon-button{
    display:grid!important;
    place-items:center!important;
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    min-height:46px!important;
    font-size:27px!important;
  }
}

/* =============================================================
   EMPLOYEE MOBILE CRUD / DRAWER COMPLETION — 2026-09-11
   Explicit coverage for Add Employee, profile/background editors,
   education, benefits and all effective-dated job/salary histories.
   ============================================================= */
@media (max-width: 760px){
  .employee-crud-drawer{
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    padding:0!important;
  }

  .employee-crud-drawer > .drawer-head{
    flex:0 0 auto!important;
    position:sticky!important;
    top:0!important;
    z-index:50!important;
  }

  /* Every Employee editor below the header scrolls independently. */
  .employee-crud-drawer > .account-form,
  .employee-crud-drawer > .employee-basic-photo,
  .employee-crud-drawer > .form-stack.account-form,
  .employee-crud-drawer > .alert + .account-form,
  .employee-crud-drawer > .alert + .employee-basic-photo{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
  }

  .employee-crud-drawer > .employee-basic-photo{
    display:block!important;
    padding:18px 16px calc(96px + env(safe-area-inset-bottom,0px))!important;
  }
  .employee-crud-drawer > .employee-basic-photo > .account-form{
    padding:0!important;
    overflow:visible!important;
  }
  .employee-crud-drawer .employee-photo-card{
    max-width:none!important;
    margin-top:18px!important;
  }

  /* Add/Profile/Benefits/Education/Jobs/Salary actions stay reachable. */
  .employee-crud-drawer .drawer-actions,
  .employee-crud-drawer .education-actions{
    position:sticky!important;
    bottom:0!important;
    z-index:45!important;
    display:flex!important;
    flex-wrap:wrap!important;
    gap:10px!important;
    margin:18px -16px calc(-96px - env(safe-area-inset-bottom,0px))!important;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))!important;
    background:color-mix(in srgb,var(--panel,#fff) 96%,var(--theme-soft,#eef5f8))!important;
    border-top:1px solid var(--line,#dce6eb)!important;
    box-shadow:0 -6px 18px rgba(15,43,58,.10)!important;
  }
  .employee-crud-drawer .drawer-actions .button,
  .employee-crud-drawer .education-actions .button{
    flex:1 1 140px!important;
    min-height:46px!important;
    justify-content:center!important;
  }

  /* Job-history list follows the form naturally and remains inside the drawer. */
  .employee-crud-drawer .job-history{
    padding:0 16px calc(24px + env(safe-area-inset-bottom,0px))!important;
  }

  /* Close must remain visible over every Employee editor variant. */
  .employee-crud-drawer > .drawer-head .drawer-close{
    display:grid!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    z-index:60!important;
  }
}

/* Warm / light orange and yellow HRIS palettes */
body[data-ui-theme="peach"]{--palette-primary:#c9795f;--palette-secondary:#d99578;--palette-tertiary:#e4ad8f;--palette-warm:#e4ad8f;--palette-rose:#c98278;--palette-bg:#fff9f6;--palette-surface:#fff;--palette-surface-2:#fff0e9;--palette-sidebar:#f6ded4;--palette-sidebar-2:#ebc8ba;--palette-line:#f4d8cc;--palette-text:#5f4037;--palette-muted:#927268;--palette-active:#f6ddd3;--palette-active-text:#8f5546;--navy:#a95f50;--blue:#d99578;--green:#7fa77b;--amber:#e4ad8f;--red:#bd6b65;--purple:#9b7f9f;--bg:var(--palette-bg);--ink:var(--palette-text);--muted:var(--palette-muted);--line:var(--palette-line);--theme-accent:var(--palette-primary);--theme-soft:var(--palette-surface-2);--theme-sidebar-start:var(--palette-sidebar);--theme-sidebar-end:var(--palette-sidebar-2);--theme-hero-start:#fff3ed;--theme-hero-mid:#f6ded4;--theme-hero-end:#ebc8ba}
.palette-swatch.palette-peach i:nth-child(1){background:#c9795f}.palette-swatch.palette-peach i:nth-child(2){background:#d99578}.palette-swatch.palette-peach i:nth-child(3){background:#e4ad8f}.palette-swatch.palette-peach i:nth-child(4){background:#a95f50}
body[data-ui-theme="apricot"]{--palette-primary:#c98555;--palette-secondary:#dda06d;--palette-tertiary:#e8b27f;--palette-warm:#e8b27f;--palette-rose:#c98278;--palette-bg:#fffaf4;--palette-surface:#fff;--palette-surface-2:#fff1e3;--palette-sidebar:#f7e2cf;--palette-sidebar-2:#efd0b5;--palette-line:#f2dcc5;--palette-text:#624737;--palette-muted:#947765;--palette-active:#f5e1cd;--palette-active-text:#985f3e;--navy:#a96742;--blue:#dda06d;--green:#7fa77b;--amber:#e8b27f;--red:#bd6b65;--purple:#9b7f9f;--bg:var(--palette-bg);--ink:var(--palette-text);--muted:var(--palette-muted);--line:var(--palette-line);--theme-accent:var(--palette-primary);--theme-soft:var(--palette-surface-2);--theme-sidebar-start:var(--palette-sidebar);--theme-sidebar-end:var(--palette-sidebar-2);--theme-hero-start:#fff4e9;--theme-hero-mid:#f7e2cf;--theme-hero-end:#efd0b5}
.palette-swatch.palette-apricot i:nth-child(1){background:#c98555}.palette-swatch.palette-apricot i:nth-child(2){background:#dda06d}.palette-swatch.palette-apricot i:nth-child(3){background:#e8b27f}.palette-swatch.palette-apricot i:nth-child(4){background:#a96742}
body[data-ui-theme="soft-amber"]{--palette-primary:#b98238;--palette-secondary:#cf9d55;--palette-tertiary:#ddb46f;--palette-warm:#ddb46f;--palette-rose:#c98278;--palette-bg:#fffaf1;--palette-surface:#fff;--palette-surface-2:#fff2d9;--palette-sidebar:#f2e2c1;--palette-sidebar-2:#e7cc9e;--palette-line:#ead9b7;--palette-text:#59472f;--palette-muted:#88755a;--palette-active:#f4e4c2;--palette-active-text:#805a2c;--navy:#8f642e;--blue:#cf9d55;--green:#7fa77b;--amber:#ddb46f;--red:#bd6b65;--purple:#9b7f9f;--bg:var(--palette-bg);--ink:var(--palette-text);--muted:var(--palette-muted);--line:var(--palette-line);--theme-accent:var(--palette-primary);--theme-soft:var(--palette-surface-2);--theme-sidebar-start:var(--palette-sidebar);--theme-sidebar-end:var(--palette-sidebar-2);--theme-hero-start:#fff5df;--theme-hero-mid:#f2e2c1;--theme-hero-end:#e7cc9e}
.palette-swatch.palette-soft-amber i:nth-child(1){background:#b98238}.palette-swatch.palette-soft-amber i:nth-child(2){background:#cf9d55}.palette-swatch.palette-soft-amber i:nth-child(3){background:#ddb46f}.palette-swatch.palette-soft-amber i:nth-child(4){background:#8f642e}
body[data-ui-theme="light-terracotta"]{--palette-primary:#b96f58;--palette-secondary:#cc8973;--palette-tertiary:#d9a08b;--palette-warm:#d9a08b;--palette-rose:#c98278;--palette-bg:#fff9f6;--palette-surface:#fff;--palette-surface-2:#f9ece7;--palette-sidebar:#f2ddd5;--palette-sidebar-2:#e8c8bc;--palette-line:#ecd4ca;--palette-text:#5d4038;--palette-muted:#8d7067;--palette-active:#f3ddd4;--palette-active-text:#824d40;--navy:#915746;--blue:#cc8973;--green:#7fa77b;--amber:#d9a08b;--red:#bd6b65;--purple:#9b7f9f;--bg:var(--palette-bg);--ink:var(--palette-text);--muted:var(--palette-muted);--line:var(--palette-line);--theme-accent:var(--palette-primary);--theme-soft:var(--palette-surface-2);--theme-sidebar-start:var(--palette-sidebar);--theme-sidebar-end:var(--palette-sidebar-2);--theme-hero-start:#fff1ec;--theme-hero-mid:#f2ddd5;--theme-hero-end:#e8c8bc}
.palette-swatch.palette-light-terracotta i:nth-child(1){background:#b96f58}.palette-swatch.palette-light-terracotta i:nth-child(2){background:#cc8973}.palette-swatch.palette-light-terracotta i:nth-child(3){background:#d9a08b}.palette-swatch.palette-light-terracotta i:nth-child(4){background:#915746}
body[data-ui-theme="creamsicle"]{--palette-primary:#ce8550;--palette-secondary:#dfa06e;--palette-tertiary:#eab789;--palette-warm:#eab789;--palette-rose:#c98278;--palette-bg:#fffaf5;--palette-surface:#fff;--palette-surface-2:#fff0e5;--palette-sidebar:#f8e2d2;--palette-sidebar-2:#efceb7;--palette-line:#f3d9c5;--palette-text:#62483a;--palette-muted:#94776a;--palette-active:#f7e0cf;--palette-active-text:#985f3e;--navy:#a96740;--blue:#dfa06e;--green:#7fa77b;--amber:#eab789;--red:#bd6b65;--purple:#9b7f9f;--bg:var(--palette-bg);--ink:var(--palette-text);--muted:var(--palette-muted);--line:var(--palette-line);--theme-accent:var(--palette-primary);--theme-soft:var(--palette-surface-2);--theme-sidebar-start:var(--palette-sidebar);--theme-sidebar-end:var(--palette-sidebar-2);--theme-hero-start:#fff4eb;--theme-hero-mid:#f8e2d2;--theme-hero-end:#efceb7}
.palette-swatch.palette-creamsicle i:nth-child(1){background:#ce8550}.palette-swatch.palette-creamsicle i:nth-child(2){background:#dfa06e}.palette-swatch.palette-creamsicle i:nth-child(3){background:#eab789}.palette-swatch.palette-creamsicle i:nth-child(4){background:#a96740}
body[data-ui-theme="butter-yellow"]{--palette-primary:#aa8b3f;--palette-secondary:#c1a45b;--palette-tertiary:#d3bc79;--palette-warm:#d3bc79;--palette-rose:#c98278;--palette-bg:#fffdf4;--palette-surface:#fff;--palette-surface-2:#fff7d9;--palette-sidebar:#f1e8c1;--palette-sidebar-2:#e6dba7;--palette-line:#e8dfb8;--palette-text:#544b31;--palette-muted:#82775a;--palette-active:#f5edc8;--palette-active-text:#756128;--navy:#7e682f;--blue:#c1a45b;--green:#7fa77b;--amber:#d3bc79;--red:#bd6b65;--purple:#9b7f9f;--bg:var(--palette-bg);--ink:var(--palette-text);--muted:var(--palette-muted);--line:var(--palette-line);--theme-accent:var(--palette-primary);--theme-soft:var(--palette-surface-2);--theme-sidebar-start:var(--palette-sidebar);--theme-sidebar-end:var(--palette-sidebar-2);--theme-hero-start:#fff9e2;--theme-hero-mid:#f1e8c1;--theme-hero-end:#e6dba7}
.palette-swatch.palette-butter-yellow i:nth-child(1){background:#aa8b3f}.palette-swatch.palette-butter-yellow i:nth-child(2){background:#c1a45b}.palette-swatch.palette-butter-yellow i:nth-child(3){background:#d3bc79}.palette-swatch.palette-butter-yellow i:nth-child(4){background:#7e682f}
body[data-ui-theme="vanilla"]{--palette-primary:#a88d50;--palette-secondary:#bca568;--palette-tertiary:#cfbd87;--palette-warm:#cfbd87;--palette-rose:#c98278;--palette-bg:#fffdf7;--palette-surface:#fff;--palette-surface-2:#faf4df;--palette-sidebar:#efe6cd;--palette-sidebar-2:#e3d7b7;--palette-line:#e6ddc4;--palette-text:#554c39;--palette-muted:#82765e;--palette-active:#f3ebd3;--palette-active-text:#756234;--navy:#7d693b;--blue:#bca568;--green:#7fa77b;--amber:#cfbd87;--red:#bd6b65;--purple:#9b7f9f;--bg:var(--palette-bg);--ink:var(--palette-text);--muted:var(--palette-muted);--line:var(--palette-line);--theme-accent:var(--palette-primary);--theme-soft:var(--palette-surface-2);--theme-sidebar-start:var(--palette-sidebar);--theme-sidebar-end:var(--palette-sidebar-2);--theme-hero-start:#fff9e9;--theme-hero-mid:#efe6cd;--theme-hero-end:#e3d7b7}
.palette-swatch.palette-vanilla i:nth-child(1){background:#a88d50}.palette-swatch.palette-vanilla i:nth-child(2){background:#bca568}.palette-swatch.palette-vanilla i:nth-child(3){background:#cfbd87}.palette-swatch.palette-vanilla i:nth-child(4){background:#7d693b}
body[data-ui-theme="champagne-gold"]{--palette-primary:#aa8a4a;--palette-secondary:#c0a365;--palette-tertiary:#d0b77f;--palette-warm:#d0b77f;--palette-rose:#c98278;--palette-bg:#fffaf1;--palette-surface:#fff;--palette-surface-2:#f7edda;--palette-sidebar:#eee0c8;--palette-sidebar-2:#dfcba8;--palette-line:#e3d3b5;--palette-text:#584a34;--palette-muted:#85745a;--palette-active:#f1e3c8;--palette-active-text:#775e32;--navy:#806737;--blue:#c0a365;--green:#7fa77b;--amber:#d0b77f;--red:#bd6b65;--purple:#9b7f9f;--bg:var(--palette-bg);--ink:var(--palette-text);--muted:var(--palette-muted);--line:var(--palette-line);--theme-accent:var(--palette-primary);--theme-soft:var(--palette-surface-2);--theme-sidebar-start:var(--palette-sidebar);--theme-sidebar-end:var(--palette-sidebar-2);--theme-hero-start:#fff5e5;--theme-hero-mid:#eee0c8;--theme-hero-end:#dfcba8}
.palette-swatch.palette-champagne-gold i:nth-child(1){background:#aa8a4a}.palette-swatch.palette-champagne-gold i:nth-child(2){background:#c0a365}.palette-swatch.palette-champagne-gold i:nth-child(3){background:#d0b77f}.palette-swatch.palette-champagne-gold i:nth-child(4){background:#806737}
body[data-ui-theme="honey-cream"]{--palette-primary:#ad873b;--palette-secondary:#c59f57;--palette-tertiary:#d6b977;--palette-warm:#d6b977;--palette-rose:#c98278;--palette-bg:#fffaf0;--palette-surface:#fff;--palette-surface-2:#fff1d2;--palette-sidebar:#f1dfbb;--palette-sidebar-2:#e5c995;--palette-line:#e8d5a8;--palette-text:#58482e;--palette-muted:#877257;--palette-active:#f5e1b8;--palette-active-text:#775827;--navy:#80622d;--blue:#c59f57;--green:#7fa77b;--amber:#d6b977;--red:#bd6b65;--purple:#9b7f9f;--bg:var(--palette-bg);--ink:var(--palette-text);--muted:var(--palette-muted);--line:var(--palette-line);--theme-accent:var(--palette-primary);--theme-soft:var(--palette-surface-2);--theme-sidebar-start:var(--palette-sidebar);--theme-sidebar-end:var(--palette-sidebar-2);--theme-hero-start:#fff5dc;--theme-hero-mid:#f1dfbb;--theme-hero-end:#e5c995}
.palette-swatch.palette-honey-cream i:nth-child(1){background:#ad873b}.palette-swatch.palette-honey-cream i:nth-child(2){background:#c59f57}.palette-swatch.palette-honey-cream i:nth-child(3){background:#d6b977}.palette-swatch.palette-honey-cream i:nth-child(4){background:#80622d}
body[data-ui-theme="lemon-chiffon"]{--palette-primary:#a59a43;--palette-secondary:#bbb05b;--palette-tertiary:#cec477;--palette-warm:#cec477;--palette-rose:#c98278;--palette-bg:#fffef3;--palette-surface:#fff;--palette-surface-2:#fbf8d9;--palette-sidebar:#efebbd;--palette-sidebar-2:#e1da98;--palette-line:#e5e0ae;--palette-text:#505038;--palette-muted:#7d7a5d;--palette-active:#f3efc2;--palette-active-text:#6e6828;--navy:#78712f;--blue:#bbb05b;--green:#7fa77b;--amber:#cec477;--red:#bd6b65;--purple:#9b7f9f;--bg:var(--palette-bg);--ink:var(--palette-text);--muted:var(--palette-muted);--line:var(--palette-line);--theme-accent:var(--palette-primary);--theme-soft:var(--palette-surface-2);--theme-sidebar-start:var(--palette-sidebar);--theme-sidebar-end:var(--palette-sidebar-2);--theme-hero-start:#fffce2;--theme-hero-mid:#efebbd;--theme-hero-end:#e1da98}
.palette-swatch.palette-lemon-chiffon i:nth-child(1){background:#a59a43}.palette-swatch.palette-lemon-chiffon i:nth-child(2){background:#bbb05b}.palette-swatch.palette-lemon-chiffon i:nth-child(3){background:#cec477}.palette-swatch.palette-lemon-chiffon i:nth-child(4){background:#78712f}