[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;
  }
}

/* Public welcome layout refinement: keep the sign-in path clear on every viewport. */
.public-welcome-hero{align-items:stretch;min-height:390px}
.public-welcome-brand{min-width:0}
.public-welcome-copy{min-width:0}
.public-welcome-copy h2{letter-spacing:-.035em}
.public-welcome-actions{padding:14px 16px;border-radius:16px;background:rgba(236,245,250,.72)}
.public-welcome-security{max-width:240px}
@media(max-width:980px) and (min-width:821px){
  .public-welcome-shell{width:min(100% - 28px,900px)}
  .public-welcome-hero{grid-template-columns:minmax(235px,.72fr) minmax(0,1.28fr);gap:28px;padding:34px}
  .public-welcome-brand{padding-right:22px;gap:14px}
  .public-welcome-brand img{width:76px;height:76px}
  .public-welcome-copy h2{font-size:clamp(30px,4vw,40px)}
}
@media(max-width:820px){
  .public-welcome-hero{min-height:0}
  .public-welcome-brand{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center}
  .public-welcome-copy h2{letter-spacing:-.025em}
  .public-welcome-actions{gap:10px}
  .public-welcome-security{max-width:none}
}
@media(max-width:480px){
  .public-welcome-shell{width:calc(100% - 20px);padding-top:10px}
  .public-welcome-hero{gap:20px;padding:20px 16px;border-radius:20px}
  .public-welcome-brand{padding-bottom:18px}
  .public-welcome-brand img{width:62px;height:62px;padding:6px}
  .public-welcome-brand h1{font-size:clamp(28px,9vw,36px)}
  .public-welcome-brand p{font-size:14px}
  .public-welcome-copy>p{font-size:14px;line-height:1.55}
  .public-welcome-actions{margin-top:18px;padding:12px;background:rgba(236,245,250,.72)}
  .public-welcome-signin{min-height:50px}
  .public-welcome-features{gap:12px;margin:14px 0}
  .public-welcome-features article{padding:18px;border-radius:18px}
  .public-welcome-trust{padding:18px;margin-bottom:14px;border-radius:18px}
}

/* 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}}

/* Notification header menu: keep alerts in a contained panel instead of letting
   long notification text flow over the dashboard header. */
.notification-top{position:relative;display:flex;align-items:center;gap:8px;z-index:20}
.notification-preview{position:absolute;top:calc(100% + 10px);right:0;width:min(390px,calc(100vw - 32px));max-height:min(440px,calc(100vh - 120px));overflow:auto;padding:10px;background:var(--white);border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 38px rgba(23,50,66,.18);z-index:50}
.notification-preview>b{display:block;padding:8px 10px 10px;color:var(--navy);font-size:12px}
.notification-preview>a{display:grid;gap:2px;padding:10px;border-top:1px solid #edf1f3;color:var(--ink);white-space:normal}
.notification-preview>a:hover{background:#f7fafc}
.notification-preview strong{font-size:12px;line-height:1.35}
.notification-preview small{color:var(--muted);font-size:11px;line-height:1.4}
.notification-preview .notification-view-all{color:var(--blue);font-weight:700;text-align:center}
.nav-message-badge{margin-left:auto;min-width:22px;padding:2px 6px;border-radius:99px;background:var(--navy);color:#fff;text-align:center;font-size:10px;line-height:1.4}


/* 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}

/* ========================================================================== 
   ESC HRIS public welcome / AdSense boundary
   Third-party advertising is intentionally confined to this public surface.
   ========================================================================== */
.public-welcome-page{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 12% 8%,rgba(217,236,250,.78),transparent 34%),
    radial-gradient(circle at 88% 16%,rgba(240,220,160,.26),transparent 32%),
    linear-gradient(180deg,#f5f9fc 0%,#edf4f8 58%,#f8fafb 100%);
  color:#17374a;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.public-welcome-shell{width:min(1180px,calc(100% - 36px));margin:0 auto;padding:38px 0 30px}
.public-welcome-hero{
  display:grid;grid-template-columns:minmax(280px,.78fr) minmax(420px,1.22fr);gap:46px;
  padding:46px;border:1px solid rgba(25,88,126,.15);border-radius:30px;
  background:rgba(255,255,255,.9);box-shadow:0 24px 70px rgba(29,66,91,.12);backdrop-filter:blur(12px)
}
.public-welcome-brand{display:flex;align-items:center;gap:20px;align-self:center;padding-right:30px;border-right:1px solid rgba(20,72,105,.11)}
.public-welcome-brand img{width:92px;height:92px;object-fit:contain;border-radius:22px;background:#fff;box-shadow:0 12px 30px rgba(23,55,74,.11);padding:8px}
.public-welcome-brand h1{margin:4px 0 2px;font-size:clamp(30px,4vw,46px);line-height:1;color:#143b58}
.public-welcome-brand p{margin:0;color:#6d8594;font-size:16px}
.public-welcome-eyebrow,.public-welcome-kicker{display:block;text-transform:uppercase;letter-spacing:.14em;font-weight:800;font-size:11px;color:#b58224}
.public-welcome-copy{display:flex;flex-direction:column;justify-content:center}
.public-welcome-copy h2{margin:8px 0 13px;max-width:720px;font-size:clamp(28px,3.2vw,44px);line-height:1.08;color:#17374a}
.public-welcome-copy>p{margin:0;max-width:760px;color:#627a89;font-size:16px;line-height:1.7}
.public-welcome-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:24px}
.public-welcome-signin{min-height:48px;padding:0 24px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;background:#176da4!important;border-color:#176da4!important;color:#fff!important;box-shadow:0 10px 22px rgba(23,109,164,.2)}
.public-welcome-security{font-size:12px;color:#748b99}
.public-welcome-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:22px 0}
.public-welcome-features article{position:relative;padding:24px;border-radius:22px;border:1px solid rgba(25,88,126,.12);background:rgba(255,255,255,.84);box-shadow:0 12px 32px rgba(29,66,91,.07)}
.public-feature-icon{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#e8f3f9;color:#176da4;font-weight:900;font-size:11px;margin-bottom:13px}
.public-welcome-features h3{margin:0 0 8px;color:#23495e;font-size:17px}
.public-welcome-features p{margin:0;color:#6d8290;line-height:1.55;font-size:13px}
.public-welcome-trust{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 24px;margin-bottom:22px;border-radius:20px;background:#123d58;color:#fff;box-shadow:0 14px 34px rgba(17,55,78,.16)}
.public-welcome-trust strong{display:block;font-size:15px;margin-bottom:3px}
.public-welcome-trust p{margin:0;color:rgba(255,255,255,.72);font-size:12px;line-height:1.5}
.public-welcome-trust a{color:#f4cf78;font-weight:800;text-decoration:none;white-space:nowrap}
.public-welcome-ad{padding:16px 18px 18px;border:1px solid rgba(25,88,126,.12);border-radius:20px;background:rgba(255,255,255,.88);box-shadow:0 12px 32px rgba(29,66,91,.06)}
.public-welcome-ad-label{text-align:center;margin-bottom:9px;color:#91a1aa;font-size:10px;text-transform:uppercase;letter-spacing:.14em;font-weight:700}
.public-welcome-ad-frame{width:100%;min-height:90px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.public-welcome-ad-frame>.adsbygoogle{width:100%;min-height:90px}
.public-welcome-footer{display:flex;justify-content:space-between;gap:16px;padding:18px 8px 0;color:#82939d;font-size:11px}
@media(max-width:820px){
  .public-welcome-shell{width:min(100% - 22px,700px);padding:16px 0 24px}
  .public-welcome-hero{grid-template-columns:1fr;gap:26px;padding:26px;border-radius:24px}
  .public-welcome-brand{border-right:0;border-bottom:1px solid rgba(20,72,105,.11);padding:0 0 24px}
  .public-welcome-brand img{width:72px;height:72px;border-radius:18px}
  .public-welcome-copy h2{font-size:30px}
  .public-welcome-features{grid-template-columns:1fr}
  .public-welcome-trust{align-items:flex-start;flex-direction:column}
  .public-welcome-ad{padding:12px 8px 14px}
  .public-welcome-ad-frame,.public-welcome-ad-frame>.adsbygoogle{min-height:70px}
  .public-welcome-footer{flex-direction:column;gap:4px;text-align:center}
}
@media(max-width:480px){
  .public-welcome-hero{padding:22px 18px}
  .public-welcome-brand{align-items:flex-start}
  .public-welcome-copy h2{font-size:27px}
  .public-welcome-actions{align-items:stretch;flex-direction:column}
  .public-welcome-signin{width:100%}
  .public-welcome-security{text-align:center}
}

/* Dashboard hero quote-card rotation: 30 Manila-day visual templates. */
.dashboard-daily-palette>.dashboard-hero-with-quote{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,390px);
  align-items:center;
  gap:30px;
}
.dashboard-hero-copy{min-width:0;position:relative;z-index:1}
.dashboard-quote-card{
  --quote-bg:rgba(255,255,255,.82);
  --quote-bg2:rgba(255,255,255,.58);
  --quote-ink:#4a3828;
  --quote-muted:#816849;
  --quote-accent:#ba7b26;
  --quote-border:rgba(124,83,31,.24);
  --quote-radius:18px;
  --quote-rotate:0deg;
  position:relative;
  z-index:2;
  min-height:148px;
  padding:18px 20px 16px 22px;
  border:1px solid var(--quote-border);
  border-radius:var(--quote-radius);
  background:linear-gradient(145deg,var(--quote-bg),var(--quote-bg2));
  color:var(--quote-ink)!important;
  box-shadow:0 12px 28px rgba(61,43,22,.12),inset 0 1px 0 rgba(255,255,255,.68);
  overflow:hidden;
  transform:rotate(var(--quote-rotate));
  backdrop-filter:blur(5px);
}
.dashboard-quote-card:before,
.dashboard-quote-card:after{content:"";position:absolute;pointer-events:none}
.dashboard-quote-card:before{
  width:120px;height:120px;border:18px solid color-mix(in srgb,var(--quote-accent) 16%,transparent);
  border-radius:50%;right:-46px;top:-54px;
}
.dashboard-quote-card:after{
  width:72px;height:4px;border-radius:10px;background:var(--quote-accent);left:22px;bottom:14px;opacity:.78;
}
.dashboard-quote-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;position:relative;z-index:2}
.dashboard-quote-card-head span,.dashboard-quote-card-head time{
  font:800 9px/1.2 'Manrope',sans-serif!important;letter-spacing:.14em;color:var(--quote-muted)!important;
}
.dashboard-quote-mark{position:absolute;left:14px;top:29px;font:800 68px/1 Georgia,serif;color:color-mix(in srgb,var(--quote-accent) 24%,transparent);z-index:0}
.dashboard-quote-card blockquote{position:relative;z-index:1;margin:0;padding:0 8px 12px 18px;border:0}
.dashboard-quote-card blockquote p{
  margin:0!important;color:var(--quote-ink)!important;font:700 14px/1.45 'Manrope',sans-serif!important;letter-spacing:-.01em;
}
.dashboard-quote-card blockquote footer{margin-top:8px;color:var(--quote-muted)!important;font:700 11px/1.3 'DM Sans',sans-serif!important}
.dashboard-quote-template-no{position:absolute;right:17px;bottom:10px;color:var(--quote-muted);font:800 8px/1 'Manrope',sans-serif;letter-spacing:.12em;opacity:.74;z-index:2}

/* Thirty restrained card templates. The variables alter surface, accent, geometry and tilt. */
.quote-card-template-01{--quote-bg:#fff8e9;--quote-bg2:#f3dfb6;--quote-ink:#513b27;--quote-muted:#816342;--quote-accent:#bd7d2b;--quote-border:#e4c487;--quote-radius:18px}
.quote-card-template-02{--quote-bg:#fdf4df;--quote-bg2:#edcf98;--quote-ink:#523a21;--quote-muted:#7a5a36;--quote-accent:#a86b21;--quote-border:#dfbd7d;--quote-radius:24px 12px 24px 12px}
.quote-card-template-03{--quote-bg:#fffaf0;--quote-bg2:#f5e5c3;--quote-ink:#43382c;--quote-muted:#74634e;--quote-accent:#c28a3d;--quote-border:#e7cea0;--quote-radius:12px}
.quote-card-template-04{--quote-bg:#faefd9;--quote-bg2:#ecd2a7;--quote-ink:#493421;--quote-muted:#76583c;--quote-accent:#a96d2c;--quote-border:#ddbb83;--quote-radius:26px;--quote-rotate:-.35deg}
.quote-card-template-05{--quote-bg:#fff6df;--quote-bg2:#f1d9a8;--quote-ink:#4b3928;--quote-muted:#756047;--quote-accent:#c58a30;--quote-border:#e5c58a;--quote-radius:10px 28px 10px 28px}
.quote-card-template-06{--quote-bg:#f8f0df;--quote-bg2:#e6d3ad;--quote-ink:#44382c;--quote-muted:#6f604c;--quote-accent:#9b743b;--quote-border:#d5bd91;--quote-radius:20px 20px 8px 20px}
.quote-card-template-07{--quote-bg:#fff9ea;--quote-bg2:#efddb7;--quote-ink:#4d3b29;--quote-muted:#80664a;--quote-accent:#b88436;--quote-border:#e2c898;--quote-radius:8px 22px 22px 22px}
.quote-card-template-08{--quote-bg:#fdf1d8;--quote-bg2:#e9c997;--quote-ink:#4e3420;--quote-muted:#77573b;--quote-accent:#b56d24;--quote-border:#ddb57a;--quote-radius:30px 14px 14px 14px;--quote-rotate:.25deg}
.quote-card-template-09{--quote-bg:#fff7e8;--quote-bg2:#f0d7aa;--quote-ink:#523d2d;--quote-muted:#7b614b;--quote-accent:#c17d36;--quote-border:#e2bf89;--quote-radius:16px 28px 16px 28px}
.quote-card-template-10{--quote-bg:#fbf2e2;--quote-bg2:#e9d4af;--quote-ink:#493b2e;--quote-muted:#73624d;--quote-accent:#9f7944;--quote-border:#d7c09b;--quote-radius:22px 8px 22px 8px}
.quote-card-template-11{--quote-bg:#fff9e8;--quote-bg2:#f4dfad;--quote-ink:#4a3824;--quote-muted:#775b3d;--quote-accent:#c5902d;--quote-border:#e5c984;--quote-radius:32px}
.quote-card-template-12{--quote-bg:#f9edd6;--quote-bg2:#e8ca98;--quote-ink:#4c3725;--quote-muted:#755942;--quote-accent:#ad722f;--quote-border:#d9b878;--quote-radius:14px 14px 30px 14px}
.quote-card-template-13{--quote-bg:#fff8ed;--quote-bg2:#f2dfbd;--quote-ink:#4d4031;--quote-muted:#786952;--quote-accent:#b68a4a;--quote-border:#e3ccaa;--quote-radius:18px 30px 18px 10px}
.quote-card-template-14{--quote-bg:#fdf3dc;--quote-bg2:#ebcf9f;--quote-ink:#503922;--quote-muted:#77593b;--quote-accent:#b87825;--quote-border:#dfbb7c;--quote-radius:9px;--quote-rotate:-.2deg}
.quote-card-template-15{--quote-bg:#fff9ec;--quote-bg2:#f0dbb2;--quote-ink:#493929;--quote-muted:#756049;--quote-accent:#b98c42;--quote-border:#e0c79e;--quote-radius:28px 28px 12px 12px}
.quote-card-template-16{--quote-bg:#fbf0dc;--quote-bg2:#e8cfaa;--quote-ink:#493a2d;--quote-muted:#705f4e;--quote-accent:#9f7540;--quote-border:#d6bd96;--quote-radius:12px 30px 30px 12px}
.quote-card-template-17{--quote-bg:#fff6e4;--quote-bg2:#efd5a2;--quote-ink:#513b25;--quote-muted:#7c5c3e;--quote-accent:#c17c2b;--quote-border:#e1bd82;--quote-radius:22px 22px 22px 7px}
.quote-card-template-18{--quote-bg:#fffaf0;--quote-bg2:#f3e1bd;--quote-ink:#463b2f;--quote-muted:#71634e;--quote-accent:#b48a48;--quote-border:#e0cda9;--quote-radius:30px 10px 30px 10px}
.quote-card-template-19{--quote-bg:#faefd8;--quote-bg2:#e5c89a;--quote-ink:#4c3624;--quote-muted:#74563d;--quote-accent:#aa6e2b;--quote-border:#d9b37b;--quote-radius:16px;--quote-rotate:.35deg}
.quote-card-template-20{--quote-bg:#fff7e7;--quote-bg2:#f1d8ad;--quote-ink:#4d3c2c;--quote-muted:#77624b;--quote-accent:#bd8439;--quote-border:#e2c18d;--quote-radius:8px 26px 8px 26px}
.quote-card-template-21{--quote-bg:#fcf2df;--quote-bg2:#ead2a9;--quote-ink:#493a2c;--quote-muted:#715f4a;--quote-accent:#a77b3d;--quote-border:#d9bf96;--quote-radius:24px 12px 12px 24px}
.quote-card-template-22{--quote-bg:#fff9eb;--quote-bg2:#f5dfaa;--quote-ink:#513b24;--quote-muted:#7b5d3d;--quote-accent:#c58c2e;--quote-border:#e7c77f;--quote-radius:34px 12px 34px 12px}
.quote-card-template-23{--quote-bg:#faf0dd;--quote-bg2:#e7cda4;--quote-ink:#48382b;--quote-muted:#6f5b47;--quote-accent:#9f7139;--quote-border:#d5b991;--quote-radius:12px 12px 26px 26px}
.quote-card-template-24{--quote-bg:#fff6e1;--quote-bg2:#efd29a;--quote-ink:#503720;--quote-muted:#79563a;--quote-accent:#bf7422;--quote-border:#dfb777;--quote-radius:28px 8px 8px 28px;--quote-rotate:-.3deg}
.quote-card-template-25{--quote-bg:#fffaf1;--quote-bg2:#f3e3c3;--quote-ink:#483c30;--quote-muted:#726451;--quote-accent:#b28b50;--quote-border:#e1cfaf;--quote-radius:20px}
.quote-card-template-26{--quote-bg:#fbefda;--quote-bg2:#e8c896;--quote-ink:#4e3621;--quote-muted:#76543a;--quote-accent:#ad6b25;--quote-border:#d9b276;--quote-radius:10px 32px 10px 10px}
.quote-card-template-27{--quote-bg:#fff8e8;--quote-bg2:#f1d9ac;--quote-ink:#4c3928;--quote-muted:#765e45;--quote-accent:#bb8235;--quote-border:#e2c18c;--quote-radius:26px 26px 26px 8px}
.quote-card-template-28{--quote-bg:#faf1e2;--quote-bg2:#e9d3b0;--quote-ink:#493c30;--quote-muted:#70604e;--quote-accent:#a27d47;--quote-border:#d7c09d;--quote-radius:8px 24px 24px 8px}
.quote-card-template-29{--quote-bg:#fff5df;--quote-bg2:#efcf98;--quote-ink:#50371f;--quote-muted:#785538;--quote-accent:#bd7523;--quote-border:#dfb575;--quote-radius:30px 14px 30px 14px;--quote-rotate:.2deg}
.quote-card-template-30{--quote-bg:#fff9ed;--quote-bg2:#f2ddb8;--quote-ink:#4a3b2c;--quote-muted:#73614a;--quote-accent:#b78642;--quote-border:#dfc79f;--quote-radius:18px 8px 28px 18px}

@media(max-width:900px){
  .dashboard-daily-palette>.dashboard-hero-with-quote{grid-template-columns:1fr;gap:18px}
  .dashboard-quote-card{width:min(100%,520px);transform:none}
}
@media(max-width:520px){
  .dashboard-quote-card{min-height:0;padding:16px 16px 15px 18px;border-radius:16px}
  .dashboard-quote-card blockquote p{font-size:13px!important}
  .dashboard-quote-template-no{display:none}
}

/* Quote card templates 31-48: complete the 48 half-hour daily visual cycle. */
.quote-card-template-31{--quote-bg:#fff7e2;--quote-bg2:#efd7aa;--quote-ink:#4d3926;--quote-muted:#795f45;--quote-accent:#bb8032;--quote-border:#e0c08a;--quote-radius:32px 12px 18px 12px}
.quote-card-template-32{--quote-bg:#fbefdb;--quote-bg2:#e7c99b;--quote-ink:#4b3523;--quote-muted:#73543b;--quote-accent:#a96b27;--quote-border:#d7b477;--quote-radius:12px 32px 12px 18px;--quote-rotate:-.18deg}
.quote-card-template-33{--quote-bg:#fffaf0;--quote-bg2:#f3e0b9;--quote-ink:#473b2e;--quote-muted:#72614c;--quote-accent:#b28a49;--quote-border:#e1cba3;--quote-radius:26px 10px 26px 26px}
.quote-card-template-34{--quote-bg:#fff4dc;--quote-bg2:#eccb91;--quote-ink:#50361f;--quote-muted:#7a5638;--quote-accent:#bd7220;--quote-border:#ddb171;--quote-radius:10px 26px 26px 26px}
.quote-card-template-35{--quote-bg:#faf2e4;--quote-bg2:#e9d3b4;--quote-ink:#493c31;--quote-muted:#70614f;--quote-accent:#a07a49;--quote-border:#d7c19f;--quote-radius:24px 24px 8px 24px}
.quote-card-template-36{--quote-bg:#fff8e6;--quote-bg2:#f0d8a6;--quote-ink:#4e3925;--quote-muted:#795c40;--quote-accent:#be8230;--quote-border:#e2bf83;--quote-radius:24px 8px 24px 24px}
.quote-card-template-37{--quote-bg:#fdf0d8;--quote-bg2:#e6c58f;--quote-ink:#4d3320;--quote-muted:#735139;--quote-accent:#aa6823;--quote-border:#d6ad70;--quote-radius:34px 10px 10px 34px;--quote-rotate:.18deg}
.quote-card-template-38{--quote-bg:#fff9ed;--quote-bg2:#f2dfb8;--quote-ink:#493d30;--quote-muted:#75654f;--quote-accent:#b68a44;--quote-border:#e1c99f;--quote-radius:10px 34px 34px 10px}
.quote-card-template-39{--quote-bg:#fbefd7;--quote-bg2:#e7c797;--quote-ink:#4b3422;--quote-muted:#73543b;--quote-accent:#ad6f29;--quote-border:#d8b273;--quote-radius:30px 18px 8px 18px}
.quote-card-template-40{--quote-bg:#fff6e7;--quote-bg2:#efd5aa;--quote-ink:#4c3b2c;--quote-muted:#776149;--quote-accent:#b98139;--quote-border:#dfbd89;--quote-radius:18px 30px 18px 8px}
.quote-card-template-41{--quote-bg:#fffaf2;--quote-bg2:#f4e3c6;--quote-ink:#463b31;--quote-muted:#716552;--quote-accent:#ae8952;--quote-border:#dfcdad;--quote-radius:28px 12px 28px 12px}
.quote-card-template-42{--quote-bg:#f9eed9;--quote-bg2:#e6c99d;--quote-ink:#493629;--quote-muted:#705845;--quote-accent:#9f7036;--quote-border:#d4b482;--quote-radius:12px 28px 12px 28px;--quote-rotate:-.22deg}
.quote-card-template-43{--quote-bg:#fff7e3;--quote-bg2:#efd39c;--quote-ink:#50371f;--quote-muted:#79563a;--quote-accent:#bf7725;--quote-border:#dfb676;--quote-radius:36px}
.quote-card-template-44{--quote-bg:#fbf2e2;--quote-bg2:#ead4b0;--quote-ink:#493b2f;--quote-muted:#71614f;--quote-accent:#a37b45;--quote-border:#d7bf98;--quote-radius:8px}
.quote-card-template-45{--quote-bg:#fff9e9;--quote-bg2:#f4dcaa;--quote-ink:#4c3824;--quote-muted:#775a3c;--quote-accent:#c18a2f;--quote-border:#e4c382;--quote-radius:30px 30px 12px 30px}
.quote-card-template-46{--quote-bg:#fdf0da;--quote-bg2:#e9c997;--quote-ink:#4c3420;--quote-muted:#75543a;--quote-accent:#b16d25;--quote-border:#d9af72;--quote-radius:30px 12px 30px 30px}
.quote-card-template-47{--quote-bg:#fff8ec;--quote-bg2:#f2deba;--quote-ink:#493c2f;--quote-muted:#74634d;--quote-accent:#b28749;--quote-border:#dfc79e;--quote-radius:14px 30px 30px 14px;--quote-rotate:.2deg}
.quote-card-template-48{--quote-bg:#fff4df;--quote-bg2:#eccd98;--quote-ink:#50361f;--quote-muted:#79563a;--quote-accent:#bd7422;--quote-border:#ddb474;--quote-radius:30px 14px 14px 30px}

/* ===== ESC HRIS Deep-Dive User Guide ===== */
.sidebar-guide-wrap{padding:0 0 10px}.sidebar-guide-link{width:100%;display:flex;align-items:center;gap:12px;border:1px solid color-mix(in srgb,var(--brand,#2478b8) 24%,#d8e0e8);background:color-mix(in srgb,var(--brand,#2478b8) 7%,#fff);border-radius:17px;padding:11px 13px;text-align:left;color:inherit;cursor:pointer}.sidebar-guide-icon{width:34px;height:34px;flex:0 0 34px;border:2px solid currentColor;border-radius:50%;display:grid;place-items:center;font-size:19px;font-weight:900}.sidebar-guide-link>span:last-child{display:grid;gap:2px}.sidebar-guide-link small{font-size:10px;opacity:.66;line-height:1.2}
.ugd-shell[hidden]{display:none!important}.ugd-shell{position:fixed;inset:0;z-index:16000}.ugd-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.58);backdrop-filter:blur(4px)}.ugd-dialog{position:absolute;inset:2.5vh 2.5vw;max-width:1560px;margin:auto;background:#f7f9fb;border:1px solid rgba(255,255,255,.4);border-radius:24px;box-shadow:0 35px 100px rgba(15,23,42,.32);overflow:hidden;display:grid;grid-template-rows:auto auto minmax(0,1fr)}
.ugd-head{padding:20px 25px 15px;display:flex;justify-content:space-between;gap:18px;align-items:flex-start;background:linear-gradient(135deg,color-mix(in srgb,var(--brand,#2478b8) 13%,#fff),#fff);border-bottom:1px solid #dde5ec}.ugd-head h2{margin:3px 0 4px;font:850 27px Manrope,DM Sans,sans-serif;color:#172f3d}.ugd-head p{margin:0;color:#64748b}.ugd-kicker{display:block;color:var(--brand,#2478b8);font-size:10px;font-weight:900;letter-spacing:.11em;text-transform:uppercase}.ugd-close{width:42px;height:42px;border:0;border-radius:50%;background:#fff;box-shadow:0 3px 12px rgba(15,23,42,.11);font-size:27px;cursor:pointer}
.ugd-searchbar{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:12px 18px 0}.ugd-searchbar input{height:44px;border:1px solid #d5dee7;border-radius:12px;background:#fff;padding:0 13px}.ugd-searchbar span{font-size:11px;font-weight:850;color:#64748b;white-space:nowrap}.ugd-body{display:grid;grid-template-columns:235px minmax(0,1fr);gap:12px;padding:12px 18px 18px;min-height:0}.ugd-nav{overflow:auto;background:#fff;border:1px solid #dde5ec;border-radius:15px;padding:8px;display:flex;flex-direction:column;gap:3px}.ugd-nav button{border:0;background:transparent;border-radius:9px;padding:9px 10px;text-align:left;font:750 12px DM Sans,sans-serif;color:#4b6170;cursor:pointer}.ugd-nav button:hover,.ugd-nav button.active{background:color-mix(in srgb,var(--brand,#2478b8) 10%,#fff);color:var(--brand,#2478b8)}
.ugd-content{overflow:auto;background:#fff;border:1px solid #dde5ec;border-radius:15px;padding:24px 27px;scroll-behavior:smooth}.ugd-content article{display:none;max-width:1080px;margin:0 auto}.ugd-content article.active{display:block}.ugd-content h3{margin:4px 0 7px;font:850 27px Manrope,DM Sans,sans-serif;color:#173141}.ugd-content h4{margin:25px 0 8px;font:850 17px Manrope,DM Sans,sans-serif;color:#203d4d}.ugd-content p{line-height:1.62;color:#4f6472}.ugd-beginner{max-width:1080px;margin:0 auto 18px;padding:13px 15px;display:grid;grid-template-columns:135px 1fr;gap:12px;border:1px solid #dbeafe;background:#eff6ff;border-radius:13px;color:#24435b;line-height:1.5}
.ugd-actions{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.ugd-show,.ugd-actual,.ugd-actions button,.ugd-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:39px;border:1px solid #d2dce5;border-radius:10px;padding:8px 12px;background:#fff;color:#405767;text-decoration:none;font-weight:850;font-size:12px;cursor:pointer}.ugd-show{background:color-mix(in srgb,var(--brand,#2478b8) 9%,#fff)!important;color:var(--brand,#2478b8)!important;border-color:color-mix(in srgb,var(--brand,#2478b8) 27%,#d2dce5)!important}
.ugd-demo[hidden]{display:none!important}.ugd-demo{margin:10px 0 23px;border:1px solid #d8e2ea;border-radius:17px;background:#fbfdff;overflow:hidden;box-shadow:0 10px 26px rgba(15,23,42,.06)}.ugd-demo>header{padding:14px 16px;display:flex;justify-content:space-between;gap:12px;background:#f7fafc;border-bottom:1px solid #e1e8ee}.ugd-demo>header div{display:grid;gap:2px}.ugd-demo>header small{font-size:9px;font-weight:900;letter-spacing:.1em;color:var(--brand,#2478b8)}.ugd-demo>header b{font:850 16px Manrope,sans-serif}.ugd-demo>header span{font-size:11px;color:#64748b}.ugd-demo>header button{width:34px;height:34px;border:0;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(15,23,42,.1);font-size:22px;cursor:pointer}
.ugd-fields{display:grid;gap:11px;padding:16px}.ugd-fields.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.ugd-fields.cols-1{grid-template-columns:1fr}.ugd-fields.embedded{padding:10px 0}.ugd-fields label{position:relative;display:grid;gap:5px;min-width:0;color:#334155;font-size:11px}.ugd-fields label>b{font-weight:850}.ugd-fields label i{position:absolute;right:7px;top:24px;z-index:2;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;background:var(--brand,#2478b8);color:#fff;font-style:normal;font-size:10px;font-weight:900}.ugd-fields .ugd-wide{grid-column:1/-1}.ugd-fields input,.ugd-fields select,.ugd-fields textarea{box-sizing:border-box;width:100%;min-height:39px;border:1px solid #d4dde6!important;border-radius:9px!important;background:#fff!important;color:#334155!important;padding:8px 35px 8px 10px!important;font:500 12px DM Sans,sans-serif!important}.ugd-fields textarea{min-height:67px;resize:none}.ugd-fields small{font-size:10px;font-weight:500;color:#718492;line-height:1.35}
.ugd-safe-save{margin:0 16px 16px;border:0;border-radius:10px;padding:10px 13px;background:var(--brand,#2478b8);color:#fff;font-weight:900;cursor:pointer}.ugd-safe-save:disabled{opacity:.7}.ugd-result{margin:0 16px 16px;padding:12px 13px;border:1px solid #bbf7d0;background:#f0fdf4;border-radius:11px;display:grid;grid-template-columns:155px 1fr;gap:10px;color:#365344;line-height:1.48}.ugd-result[hidden]{display:none!important}
.ugd-fyi,.ugd-warning{margin:12px 0;padding:13px 14px;border-radius:11px;display:grid;grid-template-columns:145px 1fr;gap:10px;line-height:1.5}.ugd-fyi{background:#f5f3ff;border:1px solid #ddd6fe;color:#4c4267}.ugd-warning{background:#fff7ed;border:1px solid #fed7aa;color:#6b4631}.ugd-warning>b{color:#b94713}.ugd-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.ugd-card-grid>div{padding:12px 13px;border:1px solid #e0e7ed;border-radius:11px;background:#fbfdff;display:grid;gap:4px}.ugd-card-grid span{font-size:11px;line-height:1.45;color:#637987}
.ugd-faq{display:grid;gap:7px}.ugd-faq details{border:1px solid #dfe7ed;border-radius:10px;background:#fff;padding:9px 12px}.ugd-faq summary{font-weight:850;color:#314e5f;cursor:pointer}.ugd-faq details div{padding:8px 1px 2px;color:#536a78;line-height:1.55;font-size:12px}
.ugd-demo-table{border:1px solid #dce4ea;border-radius:12px;overflow:visible}.ugd-tr{display:grid;grid-template-columns:1.5fr .8fr 1fr .6fr 64px;gap:7px;align-items:center;padding:9px 11px;border-bottom:1px solid #edf1f4}.ugd-tr:last-child{border-bottom:0}.ugd-tr>span{display:grid;min-width:0}.ugd-tr small{font-size:10px;color:#738692}.ugd-th{background:#f7fafc;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:#71818d}.ugd-row-demo{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;border:1px solid #dce4ea;border-radius:11px;padding:11px 12px;background:#fbfdff}.ugd-row-demo>div:first-child{display:grid}.ugd-row-demo small{color:#718492}
.ugd-menu-sample{position:relative}.ugd-kebab{width:34px;height:34px;border:1px solid #d7e0e7;border-radius:8px;background:#fff;font-size:20px;cursor:pointer}.ugd-kebab-pop{position:absolute;right:0;top:39px;z-index:20;width:280px;max-height:410px;overflow:auto;border:1px solid #d8e1e8;border-radius:12px;background:#fff;box-shadow:0 17px 42px rgba(15,23,42,.19);padding:8px}.ugd-kebab-pop[hidden]{display:none!important}.ugd-kebab-pop>b{display:block;padding:6px 8px;border-bottom:1px solid #edf1f4;margin-bottom:4px}.ugd-kebab-pop button{width:100%;border:0;background:transparent;text-align:left;border-radius:7px;padding:8px;color:#3f5665;cursor:default}.ugd-kebab-pop button:hover{background:#f2f6f8}
.ugd-column-cloud{display:flex;flex-wrap:wrap;gap:6px}.ugd-column-cloud span{padding:6px 8px;border:1px solid #dce5eb;border-radius:999px;background:#f8fafc;font-size:10px;font-weight:750;color:#526b7a}.ugd-subcard{margin:0 16px 16px;padding:12px 13px;border:1px solid #dde6ec;border-radius:11px;background:#fff}.ugd-subcard>b{display:block;margin-bottom:9px}.ugd-checks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.ugd-checks.cols{grid-template-columns:repeat(2,minmax(0,1fr))}.ugd-checks label{padding:8px;border:1px solid #e2e8ed;border-radius:8px;font-size:11px;background:#fff}.ugd-credit-row{display:grid;grid-template-columns:1.2fr repeat(4,1fr);gap:6px;font-size:10px}.ugd-credit-row span{padding:7px;border-radius:7px;background:#f5f8fa}.ugd-timecards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.ugd-timecards label{display:grid;grid-template-columns:auto 1fr;gap:5px;padding:8px;border:1px solid #e0e6eb;border-radius:9px}.ugd-timecards input[type=time]{grid-column:1/-1}.ugd-meter{height:8px;background:#e5edf1;border-radius:999px;overflow:hidden;margin-top:10px}.ugd-meter span{display:block;height:100%;background:var(--brand,#2478b8)}.ugd-split{display:grid;grid-template-columns:1fr 1fr;gap:8px}.ugd-split>div{display:grid;gap:3px;padding:10px;border-radius:9px;background:#f6f9fb}.ugd-split small{color:#708491}
.ugd-payflow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:0 16px 14px}.ugd-payflow button{min-height:78px;border:1px solid #dbe3e9;border-radius:10px;background:#fff;padding:9px;text-align:left;display:grid;grid-template-columns:26px 1fr;gap:2px 7px;align-items:start;color:#445d6b}.ugd-payflow button b{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:#e7edf1}.ugd-payflow button span{font-weight:850}.ugd-payflow button small{grid-column:1/-1;line-height:1.3}.ugd-payflow button:not(:disabled){cursor:pointer;border-color:color-mix(in srgb,var(--brand,#2478b8) 30%,#dbe3e9)}.ugd-payflow button.done{background:#f0fdf4;border-color:#bbf7d0}.ugd-payflow button.done b{background:#22c55e;color:#fff}.ugd-pay-preview{margin:0 16px 16px;min-height:68px;border:1px dashed #cad6df;border-radius:10px;display:grid;place-items:center;padding:11px;color:#6d8190;text-align:center}.ugd-pay-preview.ready{display:block;background:#fff}.ugd-pay-preview table{width:100%;border-collapse:collapse;font-size:10px}.ugd-pay-preview th,.ugd-pay-preview td{padding:7px;border-bottom:1px solid #edf1f4;text-align:left}
.ugd-empty{max-width:1080px;margin:auto;padding:35px;text-align:center;color:#718492}.ugd-actual{margin-top:13px}body.ugd-open{overflow:hidden}
@media(max-width:900px){.ugd-dialog{inset:1vh 1vw}.ugd-body{grid-template-columns:190px minmax(0,1fr)}.ugd-card-grid{grid-template-columns:1fr}.ugd-fields.cols-2{grid-template-columns:1fr}.ugd-fields .ugd-wide{grid-column:auto}.ugd-checks,.ugd-timecards{grid-template-columns:repeat(2,1fr)}.ugd-payflow{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.ugd-dialog{inset:0;border-radius:0}.ugd-head{padding:16px}.ugd-head h2{font-size:23px}.ugd-searchbar{padding:9px 10px 0}.ugd-body{grid-template-columns:1fr;padding:9px 10px 10px}.ugd-nav{flex-direction:row;overflow-x:auto;overflow-y:hidden}.ugd-nav button{white-space:nowrap}.ugd-content{padding:17px 13px}.ugd-beginner{grid-template-columns:1fr}.ugd-result,.ugd-fyi,.ugd-warning{grid-template-columns:1fr}.ugd-tr{grid-template-columns:1.5fr .7fr 52px}.ugd-tr>*:nth-child(2),.ugd-tr>*:nth-child(3){display:none}.ugd-tr>*:nth-child(4){display:block}.ugd-kebab-pop{width:min(280px,78vw)}.ugd-checks,.ugd-checks.cols,.ugd-timecards,.ugd-split,.ugd-payflow{grid-template-columns:1fr}.ugd-credit-row{grid-template-columns:1fr 1fr}}


/* ========================================================================
   Dashboard quote cards — 48 GENUINELY DISTINCT half-hour visual templates
   The PHP scheduler was already correct. These late overrides make the visual
   treatment itself unmistakably different from one half-hour slot to the next.
   ======================================================================== */

.dashboard-quote-card[class*="quote-card-template-"]{
  transform:none;
  transition:background .28s ease,border-color .28s ease,box-shadow .28s ease,color .28s ease;
}
.dashboard-quote-card[class*="quote-card-template-"]:before,
.dashboard-quote-card[class*="quote-card-template-"]:after{
  box-sizing:border-box;
}

/* 01 · Executive ivory — clean gold top rule */
.quote-card-template-01{
  --quote-ink:#433225;--quote-muted:#7a604a;--quote-accent:#b9853f;
  border-radius:18px;border:1px solid #e2cba9;border-top:5px solid #b9853f;
  background:linear-gradient(135deg,#fffdf7,#f6ead8);box-shadow:0 14px 30px rgba(95,67,39,.13);
}
.quote-card-template-01:before{width:94px;height:94px;right:-30px;top:-38px;border:1px solid #d2ad78;border-radius:50%;background:transparent}
.quote-card-template-01:after{left:22px;bottom:13px;width:68px;height:3px;background:#b9853f;border-radius:3px}

/* 02 · Ruled notebook — horizontal lines + margin */
.quote-card-template-02{
  --quote-ink:#344454;--quote-muted:#6d7f8d;--quote-accent:#d27d76;
  border-radius:8px;border:1px solid #cfd9df;padding-left:36px;
  background:
    linear-gradient(90deg,transparent 0 25px,#e6a29d 25px 27px,transparent 27px),
    repeating-linear-gradient(0deg,#fff 0 25px,#dce8ef 25px 26px);
  box-shadow:0 10px 24px rgba(53,76,92,.12);
}
.quote-card-template-02:before{display:none}
.quote-card-template-02:after{left:36px;bottom:14px;width:46px;height:3px;background:#d27d76}

/* 03 · Sticky note — angled with folded corner */
.quote-card-template-03{
  --quote-ink:#4d4628;--quote-muted:#766c3f;--quote-accent:#c1a52c;
  border-radius:4px;border:0;background:linear-gradient(145deg,#fff7a9,#f4e58b);
  transform:rotate(-.45deg);box-shadow:8px 11px 22px rgba(75,66,25,.18);
}
.quote-card-template-03:before{width:0;height:0;right:0;top:0;border-style:solid;border-width:0 0 34px 34px;border-color:transparent transparent #dfcd6c transparent;border-radius:0;background:transparent}
.quote-card-template-03:after{left:20px;bottom:12px;width:58px;height:2px;background:#a98f24}

/* 04 · Envelope — diagonal paper seams */
.quote-card-template-04{
  --quote-ink:#563e30;--quote-muted:#856d5d;--quote-accent:#b97752;
  border-radius:14px;border:1px solid #dfc6b4;
  background:
    linear-gradient(28deg,transparent 49.3%,rgba(174,119,83,.12) 50%,transparent 50.7%),
    linear-gradient(-28deg,transparent 49.3%,rgba(174,119,83,.12) 50%,transparent 50.7%),
    #fff7f0;
  box-shadow:0 12px 28px rgba(96,61,44,.11);
}
.quote-card-template-04:before{display:none}
.quote-card-template-04:after{left:0;bottom:0;width:100%;height:5px;border-radius:0;background:#b97752}

/* 05 · Newspaper editorial — serif, square, double rule */
.quote-card-template-05{
  --quote-ink:#292929;--quote-muted:#606060;--quote-accent:#292929;
  border-radius:2px;border:3px double #4a4a4a;background:#f8f5ed;box-shadow:5px 7px 0 #d8d3c8;
}
.quote-card-template-05 .dashboard-quote-card-head span,
.quote-card-template-05 .dashboard-quote-card-head time{font-family:Georgia,serif!important;letter-spacing:.09em!important}
.quote-card-template-05 blockquote p{font-family:Georgia,serif!important;font-weight:700!important}
.quote-card-template-05:before{display:none}
.quote-card-template-05:after{left:20px;bottom:14px;width:92px;height:1px;background:#292929;box-shadow:0 4px 0 #292929}

/* 06 · Typewriter sheet — monospaced/dashed */
.quote-card-template-06{
  --quote-ink:#34302c;--quote-muted:#77706a;--quote-accent:#8b8177;
  border-radius:3px;border:1px dashed #8f887f;background:#f4f0e8;
  box-shadow:0 10px 0 #ded8cf,0 13px 24px rgba(55,48,41,.12);
}
.quote-card-template-06 blockquote p,.quote-card-template-06 blockquote footer{font-family:"Courier New",monospace!important}
.quote-card-template-06:before{display:none}
.quote-card-template-06:after{left:20px;bottom:13px;width:80px;height:2px;background:repeating-linear-gradient(90deg,#746c64 0 6px,transparent 6px 10px)}

/* 07 · Blueprint — navy grid */
.quote-card-template-07{
  --quote-ink:#ecf8ff;--quote-muted:#a9d7ed;--quote-accent:#66d0ff;
  border-radius:10px;border:1px solid #75cbea;
  background:
    linear-gradient(rgba(113,196,227,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(113,196,227,.12) 1px,transparent 1px),
    #123c55;background-size:22px 22px;
  box-shadow:0 13px 30px rgba(7,44,66,.3);
}
.quote-card-template-07:before{width:90px;height:90px;right:-25px;top:-25px;border:1px dashed #68c8ec;border-radius:0;background:transparent;transform:rotate(45deg)}
.quote-card-template-07:after{left:22px;bottom:14px;width:70px;height:2px;background:#66d0ff}

/* 08 · Midnight executive — navy and brass */
.quote-card-template-08{
  --quote-ink:#fff4dc;--quote-muted:#d6c39b;--quote-accent:#d6a84e;
  border-radius:22px 8px 22px 8px;border:1px solid #bd9142;
  background:linear-gradient(140deg,#172338,#0b1220);box-shadow:0 16px 34px rgba(5,12,25,.34),inset 0 0 0 1px rgba(255,226,165,.08);
}
.quote-card-template-08:before{width:105px;height:105px;right:-48px;top:-52px;border:12px solid rgba(214,168,78,.18);border-radius:50%;background:transparent}
.quote-card-template-08:after{left:22px;bottom:13px;width:58px;height:4px;background:#d6a84e}

/* 09 · Sage botanical — soft green organic circles */
.quote-card-template-09{
  --quote-ink:#30493c;--quote-muted:#607c6b;--quote-accent:#779f7f;
  border-radius:28px;border:1px solid #bcd1bf;background:linear-gradient(135deg,#f4faf2,#dfeedd);
  box-shadow:0 13px 28px rgba(47,91,63,.12);
}
.quote-card-template-09:before{width:118px;height:82px;right:-34px;top:-20px;border:0;border-radius:70% 30% 70% 30%;background:rgba(93,139,99,.15);transform:rotate(-28deg)}
.quote-card-template-09:after{width:42px;height:42px;left:-12px;bottom:-12px;border-radius:70% 30% 70% 30%;background:rgba(93,139,99,.14);transform:rotate(34deg)}

/* 10 · Terracotta panel — bold left block */
.quote-card-template-10{
  --quote-ink:#52372d;--quote-muted:#845f50;--quote-accent:#b75f43;
  border-radius:12px;border:1px solid #dfb19f;border-left:12px solid #b75f43;
  background:linear-gradient(90deg,#fae8df,#fff8f3);box-shadow:0 12px 26px rgba(120,62,44,.13);
}
.quote-card-template-10:before{display:none}
.quote-card-template-10:after{left:auto;right:18px;bottom:13px;width:48px;height:5px;background:#b75f43}

/* 11 · Rose clay — pill geometry */
.quote-card-template-11{
  --quote-ink:#5a3942;--quote-muted:#8b6670;--quote-accent:#ba7183;
  border-radius:36px 14px 36px 14px;border:1px solid #e4bcc6;
  background:linear-gradient(135deg,#fff4f6,#f3d8de);box-shadow:0 14px 28px rgba(102,58,69,.13);
}
.quote-card-template-11:before{width:120px;height:42px;right:-18px;top:16px;border:0;border-radius:999px;background:rgba(186,113,131,.15);transform:rotate(-18deg)}
.quote-card-template-11:after{width:52px;height:8px;left:22px;bottom:12px;border-radius:999px;background:#ba7183}

/* 12 · Lavender glass */
.quote-card-template-12{
  --quote-ink:#493d62;--quote-muted:#72688d;--quote-accent:#8d78bd;
  border-radius:20px;border:1px solid rgba(143,122,188,.35);
  background:linear-gradient(135deg,rgba(250,247,255,.92),rgba(223,214,243,.73));
  box-shadow:0 16px 34px rgba(75,57,108,.13);backdrop-filter:blur(12px);
}
.quote-card-template-12:before{width:88px;height:88px;right:12px;top:-36px;border:0;border-radius:50%;background:rgba(146,121,198,.17);filter:blur(1px)}
.quote-card-template-12:after{width:66px;height:66px;left:-28px;bottom:-30px;border-radius:50%;background:rgba(182,157,225,.2)}

/* 13 · Aqua glass — bubbles */
.quote-card-template-13{
  --quote-ink:#264f56;--quote-muted:#4f7d84;--quote-accent:#3c9ea9;
  border-radius:18px;border:1px solid #a7d8dc;
  background:linear-gradient(145deg,rgba(245,255,255,.95),rgba(209,242,244,.78));
  box-shadow:0 14px 31px rgba(34,102,110,.12);
}
.quote-card-template-13:before{width:68px;height:68px;right:30px;top:-18px;border:8px solid rgba(65,157,168,.13);border-radius:50%;background:transparent}
.quote-card-template-13:after{width:26px;height:26px;left:25px;bottom:18px;border-radius:50%;background:rgba(65,157,168,.16);box-shadow:36px 8px 0 rgba(65,157,168,.11)}

/* 14 · Graphite monochrome */
.quote-card-template-14{
  --quote-ink:#f7f7f7;--quote-muted:#b9bec3;--quote-accent:#e9ecef;
  border-radius:6px;border:1px solid #5b6167;background:linear-gradient(145deg,#34383d,#1f2327);
  box-shadow:0 16px 30px rgba(21,24,27,.28);
}
.quote-card-template-14:before{display:none}
.quote-card-template-14:after{left:22px;bottom:14px;width:90px;height:2px;background:linear-gradient(90deg,#fff,transparent)}

/* 15 · Admission ticket — dashed + side notches */
.quote-card-template-15{
  --quote-ink:#4f402c;--quote-muted:#806e52;--quote-accent:#bc8a42;
  border-radius:10px;border:2px dashed #cfab77;background:#fff5df;box-shadow:0 11px 24px rgba(94,71,39,.12);
}
.quote-card-template-15:before{width:28px;height:28px;left:-16px;top:50%;margin-top:-14px;border:1px solid #cfab77;border-radius:50%;background:#f7f9fb}
.quote-card-template-15:after{width:28px;height:28px;left:auto;right:-16px;top:50%;bottom:auto;margin-top:-14px;border:1px solid #cfab77;border-radius:50%;background:#f7f9fb}

/* 16 · Book page — spine shadow */
.quote-card-template-16{
  --quote-ink:#453a2c;--quote-muted:#756854;--quote-accent:#9a7650;
  border-radius:4px 14px 14px 4px;border:1px solid #d9c9b2;border-left:8px solid #aa8c68;
  background:linear-gradient(90deg,#eee2d0 0,#fffaf0 8%,#fffaf0 100%);
  box-shadow:9px 10px 24px rgba(72,57,39,.12);
}
.quote-card-template-16 blockquote p{font-family:Georgia,serif!important}
.quote-card-template-16:before{width:1px;height:100%;left:14px;top:0;border:0;border-radius:0;background:rgba(124,91,55,.18)}
.quote-card-template-16:after{left:24px;bottom:12px;width:60px;height:2px;background:#9a7650}

/* 17 · Executive memo — colored header rail */
.quote-card-template-17{
  --quote-ink:#30495c;--quote-muted:#658196;--quote-accent:#3f789e;
  border-radius:12px;border:1px solid #b9cfdd;border-top:12px solid #3f789e;background:#f7fbfd;
  box-shadow:0 12px 27px rgba(41,84,112,.12);
}
.quote-card-template-17:before{display:none}
.quote-card-template-17:after{left:auto;right:18px;bottom:13px;width:70px;height:3px;background:#3f789e}

/* 18 · Timeline card — vertical line and dots */
.quote-card-template-18{
  --quote-ink:#37434b;--quote-muted:#6e7a82;--quote-accent:#738b98;
  border-radius:14px;border:1px solid #ced9df;padding-left:40px;background:#fbfcfd;
  box-shadow:0 12px 27px rgba(57,70,78,.1);
}
.quote-card-template-18:before{width:2px;height:calc(100% - 30px);left:22px;top:15px;border:0;border-radius:0;background:#9fb0b9}
.quote-card-template-18:after{width:10px;height:10px;left:18px;top:35px;bottom:auto;border-radius:50%;background:#738b98;box-shadow:0 52px 0 #738b98,0 104px 0 #738b98}

/* 19 · Art Deco — double frame and geometric corners */
.quote-card-template-19{
  --quote-ink:#3c2d22;--quote-muted:#765d48;--quote-accent:#b17a35;
  border-radius:3px;border:2px solid #b17a35;outline:1px solid rgba(177,122,53,.42);outline-offset:-8px;
  background:linear-gradient(135deg,#fff9ea,#ead6ad);box-shadow:0 15px 30px rgba(80,57,30,.15);
}
.quote-card-template-19:before{width:74px;height:74px;right:-24px;top:-24px;border:2px solid #b17a35;border-radius:0;background:transparent;transform:rotate(45deg)}
.quote-card-template-19:after{width:74px;height:74px;left:-34px;bottom:-34px;border:2px solid rgba(177,122,53,.6);border-radius:0;background:transparent;transform:rotate(45deg)}

/* 20 · Bauhaus — circle, square, primary accents */
.quote-card-template-20{
  --quote-ink:#32353a;--quote-muted:#656b73;--quote-accent:#d75f45;
  border-radius:18px 4px 18px 4px;border:2px solid #30363d;background:#fff8e9;
  box-shadow:8px 8px 0 #d8b53d;
}
.quote-card-template-20:before{width:72px;height:72px;right:22px;top:-24px;border:0;border-radius:50%;background:#d75f45;opacity:.8}
.quote-card-template-20:after{width:42px;height:42px;left:18px;bottom:-14px;border-radius:0;background:#3b6f9c;opacity:.8}

/* 21 · Minimalist left stripe */
.quote-card-template-21{
  --quote-ink:#273845;--quote-muted:#697b87;--quote-accent:#4e8ca7;
  border-radius:9px;border:1px solid #d9e2e7;border-left:7px solid #4e8ca7;background:#fff;
  box-shadow:0 10px 24px rgba(41,65,78,.09);
}
.quote-card-template-21:before{display:none}.quote-card-template-21:after{display:none}

/* 22 · Minimalist top stripe */
.quote-card-template-22{
  --quote-ink:#3b3f45;--quote-muted:#72777e;--quote-accent:#96755b;
  border-radius:9px;border:1px solid #e0e0dc;border-top:7px solid #96755b;background:#fffdf9;
  box-shadow:0 10px 24px rgba(65,57,50,.09);
}
.quote-card-template-22:before{display:none}.quote-card-template-22:after{right:18px;left:auto;bottom:12px;width:36px;height:3px;background:#96755b}

/* 23 · Centered quotation */
.quote-card-template-23{
  --quote-ink:#3b4157;--quote-muted:#747b91;--quote-accent:#6f7fb1;
  border-radius:25px;border:1px solid #cdd4e7;background:linear-gradient(180deg,#f9faff,#eef1fa);
  text-align:center;box-shadow:0 14px 28px rgba(56,66,100,.1);
}
.quote-card-template-23 .dashboard-quote-card-head{justify-content:center;gap:25px}
.quote-card-template-23 .dashboard-quote-mark{left:50%;top:34px;transform:translateX(-50%);font-size:74px}
.quote-card-template-23 blockquote{padding:24px 35px 18px;text-align:center}
.quote-card-template-23:before{display:none}
.quote-card-template-23:after{left:50%;transform:translateX(-50%);bottom:12px;width:64px;height:3px;background:#6f7fb1}

/* 24 · Right-aligned editorial */
.quote-card-template-24{
  --quote-ink:#443531;--quote-muted:#806a62;--quote-accent:#aa6e62;
  border-radius:5px 24px 5px 24px;border:1px solid #dfc4bc;background:#fff8f5;
  box-shadow:0 13px 27px rgba(95,58,48,.1);
}
.quote-card-template-24 .dashboard-quote-mark{left:auto;right:12px;top:30px}
.quote-card-template-24 blockquote{padding:0 22px 14px 52px;text-align:right}
.quote-card-template-24 .dashboard-quote-card-head{flex-direction:row-reverse}
.quote-card-template-24:before{display:none}
.quote-card-template-24:after{left:auto;right:22px;bottom:13px;width:64px;height:3px;background:#aa6e62}

/* 25 · Side-label card */
.quote-card-template-25{
  --quote-ink:#283f48;--quote-muted:#637b84;--quote-accent:#3a7e8b;
  border-radius:16px;border:1px solid #bcd4da;padding-left:54px;background:#eff9fa;
  box-shadow:0 12px 26px rgba(39,95,104,.1);
}
.quote-card-template-25:before{width:34px;height:100%;left:0;top:0;border:0;border-radius:0;background:#3a7e8b}
.quote-card-template-25:after{width:16px;height:16px;left:9px;top:18px;bottom:auto;border-radius:50%;background:#eff9fa;box-shadow:0 28px 0 #eff9fa,0 56px 0 #eff9fa}
.quote-card-template-25 .dashboard-quote-mark{left:44px}

/* 26 · Corner ribbon */
.quote-card-template-26{
  --quote-ink:#4b3527;--quote-muted:#7a624f;--quote-accent:#c07b3b;
  border-radius:14px;border:1px solid #e0c4a8;background:#fff9ef;box-shadow:0 13px 27px rgba(93,60,35,.11);
}
.quote-card-template-26:before{width:115px;height:28px;right:-31px;top:15px;border:0;border-radius:0;background:#c07b3b;transform:rotate(36deg)}
.quote-card-template-26:after{left:22px;bottom:13px;width:48px;height:3px;background:#c07b3b}

/* 27 · Double frame */
.quote-card-template-27{
  --quote-ink:#33463d;--quote-muted:#6b7d73;--quote-accent:#6f927f;
  border-radius:15px;border:5px double #8daa99;background:#f5faf6;box-shadow:0 11px 24px rgba(48,75,59,.1);
}
.quote-card-template-27:before{display:none}
.quote-card-template-27:after{left:22px;bottom:12px;width:56px;height:3px;background:#6f927f}

/* 28 · Dotted perimeter */
.quote-card-template-28{
  --quote-ink:#51423a;--quote-muted:#847169;--quote-accent:#a87c69;
  border-radius:18px;border:3px dotted #b7907f;background:#fff9f5;box-shadow:none;
}
.quote-card-template-28:before{display:none}
.quote-card-template-28:after{left:auto;right:20px;bottom:12px;width:48px;height:4px;border-radius:99px;background:#a87c69}

/* 29 · Dashed project card */
.quote-card-template-29{
  --quote-ink:#334457;--quote-muted:#65778a;--quote-accent:#5c7fa5;
  border-radius:3px;border:2px dashed #7893b0;background:#f5f8fb;box-shadow:6px 6px 0 #dfe8f0;
}
.quote-card-template-29:before{display:none}
.quote-card-template-29:after{left:22px;bottom:13px;width:76px;height:2px;background:repeating-linear-gradient(90deg,#5c7fa5 0 8px,transparent 8px 13px)}

/* 30 · Frosted glass card */
.quote-card-template-30{
  --quote-ink:#31474b;--quote-muted:#667d80;--quote-accent:#5f9da2;
  border-radius:24px;border:1px solid rgba(137,183,186,.52);
  background:linear-gradient(135deg,rgba(255,255,255,.80),rgba(224,243,244,.55));
  box-shadow:0 18px 35px rgba(44,100,105,.12);backdrop-filter:blur(18px) saturate(1.2);
}
.quote-card-template-30:before{width:140px;height:140px;right:-68px;top:-72px;border:0;border-radius:50%;background:rgba(76,163,171,.12);filter:blur(2px)}
.quote-card-template-30:after{width:88px;height:88px;left:-50px;bottom:-50px;border-radius:50%;background:rgba(76,163,171,.1)}

/* 31 · Horizontal banding */
.quote-card-template-31{
  --quote-ink:#4b3a2a;--quote-muted:#7c6855;--quote-accent:#a87641;
  border-radius:10px;border:1px solid #dec9af;
  background:repeating-linear-gradient(0deg,#fffaf2 0 31px,#f3e7d6 31px 34px);
  box-shadow:0 12px 26px rgba(78,60,42,.1);
}
.quote-card-template-31:before{display:none}
.quote-card-template-31:after{left:22px;bottom:12px;width:80px;height:4px;background:#a87641}

/* 32 · Diagonal bands */
.quote-card-template-32{
  --quote-ink:#384653;--quote-muted:#6a7884;--quote-accent:#6e8fa8;
  border-radius:17px;border:1px solid #cad8e2;
  background:repeating-linear-gradient(135deg,#f9fcfe 0 18px,#edf4f8 18px 36px);
  box-shadow:0 12px 26px rgba(53,77,94,.1);
}
.quote-card-template-32:before{display:none}
.quote-card-template-32:after{left:auto;right:20px;bottom:13px;width:64px;height:4px;background:#6e8fa8}

/* 33 · Precision grid */
.quote-card-template-33{
  --quote-ink:#2e4a50;--quote-muted:#5d777c;--quote-accent:#548f99;
  border-radius:8px;border:1px solid #bad3d7;
  background:
    linear-gradient(rgba(95,151,160,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(95,151,160,.12) 1px,transparent 1px),#f6fbfb;
  background-size:18px 18px;box-shadow:0 11px 25px rgba(47,93,100,.09);
}
.quote-card-template-33:before{display:none}
.quote-card-template-33:after{left:22px;bottom:12px;width:42px;height:42px;border:1px solid rgba(84,143,153,.45);background:transparent;border-radius:0}

/* 34 · Polka-dot field */
.quote-card-template-34{
  --quote-ink:#513847;--quote-muted:#7f6070;--quote-accent:#ad718d;
  border-radius:23px;border:1px solid #e0c0cf;
  background-color:#fff7fb;background-image:radial-gradient(#d8a8be 1.5px,transparent 1.5px);background-size:18px 18px;
  box-shadow:0 12px 27px rgba(95,53,73,.1);
}
.quote-card-template-34:before{display:none}
.quote-card-template-34:after{left:22px;bottom:13px;width:72px;height:5px;border-radius:99px;background:#ad718d}

/* 35 · Fine ruled editorial */
.quote-card-template-35{
  --quote-ink:#3d4750;--quote-muted:#737d85;--quote-accent:#7b8791;
  border-radius:4px;border:1px solid #d6dce0;
  background:repeating-linear-gradient(0deg,#fff 0 19px,#eef1f3 19px 20px);
  box-shadow:0 10px 23px rgba(48,55,61,.08);
}
.quote-card-template-35:before{display:none}
.quote-card-template-35:after{left:22px;bottom:12px;width:68px;height:2px;background:#7b8791}

/* 36 · Arched motif */
.quote-card-template-36{
  --quote-ink:#45382d;--quote-muted:#756353;--quote-accent:#ad8157;
  border-radius:34px 34px 10px 10px;border:1px solid #dcc3a9;background:linear-gradient(180deg,#fffaf3,#f2e3d1);
  box-shadow:0 14px 28px rgba(83,62,42,.11);
}
.quote-card-template-36:before{width:132px;height:100px;right:-18px;top:-45px;border:2px solid rgba(173,129,87,.45);border-radius:70px 70px 0 0;background:transparent}
.quote-card-template-36:after{left:22px;bottom:13px;width:52px;height:5px;border-radius:99px;background:#ad8157}

/* 37 · Concentric circles */
.quote-card-template-37{
  --quote-ink:#304350;--quote-muted:#607887;--quote-accent:#5c8aaa;
  border-radius:50px 14px 14px 14px;border:1px solid #b8cfde;background:#f4f9fc;
  box-shadow:0 13px 28px rgba(47,82,105,.1);
}
.quote-card-template-37:before{width:104px;height:104px;right:-38px;top:-42px;border:10px double rgba(92,138,170,.30);border-radius:50%;background:transparent}
.quote-card-template-37:after{width:62px;height:62px;right:-18px;left:auto;bottom:-24px;border:8px solid rgba(92,138,170,.18);border-radius:50%;background:transparent}

/* 38 · Corner block geometry */
.quote-card-template-38{
  --quote-ink:#413f36;--quote-muted:#737064;--quote-accent:#9d8b4f;
  border-radius:5px;border:1px solid #d8d0b4;background:#fffdf1;box-shadow:0 12px 25px rgba(74,69,47,.09);
}
.quote-card-template-38:before{width:44px;height:44px;right:0;top:0;border:0;border-radius:0;background:#9d8b4f}
.quote-card-template-38:after{width:44px;height:44px;left:0;bottom:0;border-radius:0;background:#d7c984}

/* 39 · Offset print shadow */
.quote-card-template-39{
  --quote-ink:#3d3d49;--quote-muted:#6e6e7c;--quote-accent:#756ea7;
  border-radius:9px;border:2px solid #58586e;background:#faf9ff;box-shadow:10px 10px 0 #c9c3e4;
}
.quote-card-template-39:before{display:none}
.quote-card-template-39:after{left:22px;bottom:12px;width:62px;height:3px;background:#756ea7}

/* 40 · Pinboard note */
.quote-card-template-40{
  --quote-ink:#4d422e;--quote-muted:#7c6e52;--quote-accent:#b68d43;
  border-radius:6px;border:1px solid #d2b779;background:#fff5c9;box-shadow:5px 8px 18px rgba(91,74,33,.17);
  transform:rotate(.35deg);
}
.quote-card-template-40:before{width:14px;height:14px;right:50%;top:8px;border:2px solid rgba(77,57,30,.28);border-radius:50%;background:#c99e4c;box-shadow:0 2px 4px rgba(0,0,0,.18)}
.quote-card-template-40:after{left:22px;bottom:12px;width:55px;height:2px;background:#a9853e}

/* 41 · Signature line */
.quote-card-template-41{
  --quote-ink:#253f4c;--quote-muted:#607a87;--quote-accent:#36708d;
  border-radius:15px;border:1px solid #c1d7e1;background:#f7fcff;box-shadow:0 11px 25px rgba(40,86,108,.09);
}
.quote-card-template-41:before{display:none}
.quote-card-template-41:after{left:auto;right:22px;bottom:18px;width:115px;height:1px;background:#36708d;box-shadow:-18px 5px 0 -0.3px #36708d;transform:rotate(-3deg)}

/* 42 · Index card with tab */
.quote-card-template-42{
  --quote-ink:#4a3d30;--quote-muted:#7a6958;--quote-accent:#b78a55;
  border-radius:5px;border:1px solid #d8c5af;border-top:7px solid #c89a64;background:#fffaf4;
  box-shadow:0 10px 0 #e8ddd0,0 13px 23px rgba(72,56,40,.09);
}
.quote-card-template-42:before{width:88px;height:22px;right:24px;top:-7px;border:0;border-radius:0 0 8px 8px;background:#b78a55}
.quote-card-template-42:after{left:22px;bottom:12px;width:60px;height:2px;background:#b78a55}

/* 43 · Briefing card — side status rail */
.quote-card-template-43{
  --quote-ink:#263d4b;--quote-muted:#5f7786;--quote-accent:#275e7c;
  border-radius:12px;border:1px solid #b9ceda;background:linear-gradient(90deg,#eaf4f8 0 18%,#ffffff 18%);
  box-shadow:0 12px 27px rgba(39,78,99,.1);padding-left:32px;
}
.quote-card-template-43:before{width:8px;height:70%;left:11px;top:15%;border:0;border-radius:99px;background:#275e7c}
.quote-card-template-43:after{width:8px;height:8px;left:11px;bottom:20px;border-radius:50%;background:#f5b95b;box-shadow:0 -22px 0 #74a5bb}

/* 44 · Brass plaque */
.quote-card-template-44{
  --quote-ink:#3a2d20;--quote-muted:#66523d;--quote-accent:#8d642d;
  border-radius:10px;border:5px ridge #bd955c;background:linear-gradient(135deg,#f7e6bd,#cda86f,#f5deb1);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),0 14px 29px rgba(74,53,26,.16);
}
.quote-card-template-44:before{width:9px;height:9px;right:12px;top:12px;border:0;border-radius:50%;background:#8d642d;box-shadow:-620px 0 0 #8d642d}
.quote-card-template-44:after{left:22px;bottom:13px;width:74px;height:4px;background:#8d642d}

/* 45 · Dark frosted cyan */
.quote-card-template-45{
  --quote-ink:#ecfeff;--quote-muted:#a7d7db;--quote-accent:#55d6dc;
  border-radius:20px;border:1px solid rgba(98,217,222,.45);
  background:linear-gradient(135deg,rgba(15,47,58,.96),rgba(8,28,37,.94));
  box-shadow:0 18px 35px rgba(4,20,27,.32),inset 0 1px 0 rgba(255,255,255,.08);
}
.quote-card-template-45:before{width:110px;height:110px;right:-40px;top:-50px;border:16px solid rgba(85,214,220,.12);border-radius:50%;background:transparent}
.quote-card-template-45:after{left:22px;bottom:13px;width:68px;height:3px;background:#55d6dc}

/* 46 · Mint geometry */
.quote-card-template-46{
  --quote-ink:#26493e;--quote-muted:#5f7f74;--quote-accent:#48a17f;
  border-radius:4px 28px 4px 28px;border:1px solid #afd8c6;background:#effbf5;
  box-shadow:0 13px 27px rgba(38,91,72,.1);
}
.quote-card-template-46:before{width:72px;height:72px;right:-16px;top:-16px;border:0;border-radius:0;background:#7bc5a8;transform:rotate(20deg);opacity:.28}
.quote-card-template-46:after{width:46px;height:46px;left:-12px;bottom:-12px;border-radius:50%;background:#48a17f;opacity:.20}

/* 47 · Sunrise gradient */
.quote-card-template-47{
  --quote-ink:#573b42;--quote-muted:#83666b;--quote-accent:#d87563;
  border-radius:28px;border:1px solid #efb9a3;
  background:linear-gradient(135deg,#fff4d8 0%,#ffd9b7 45%,#f2c6cf 100%);
  box-shadow:0 16px 32px rgba(124,72,72,.14);
}
.quote-card-template-47:before{width:118px;height:118px;right:-35px;top:-45px;border:0;border-radius:50%;background:radial-gradient(circle,#fff1a8 0 32%,rgba(255,226,137,.35) 33% 60%,transparent 61%)}
.quote-card-template-47:after{left:22px;bottom:13px;width:78px;height:4px;background:#d87563}

/* 48 · Midnight finale — black/gold */
.quote-card-template-48{
  --quote-ink:#fff6db;--quote-muted:#d9c79c;--quote-accent:#e0b45a;
  border-radius:6px;border:1px solid #b58a3d;outline:1px solid rgba(224,180,90,.35);outline-offset:-7px;
  background:linear-gradient(145deg,#161616,#29251c);box-shadow:0 18px 36px rgba(0,0,0,.38);
}
.quote-card-template-48:before{width:105px;height:105px;right:-42px;top:-48px;border:1px solid #e0b45a;border-radius:50%;background:transparent;box-shadow:0 0 0 11px rgba(224,180,90,.08),0 0 0 22px rgba(224,180,90,.05)}
.quote-card-template-48:after{left:22px;bottom:13px;width:88px;height:3px;background:linear-gradient(90deg,#e0b45a,transparent)}


/* =============================================================
   Messages — polished hero "New Message" button
   Keeps data-message-new behavior unchanged; presentation only.
   ============================================================= */
.messages-hero .message-new-hero-button{
  position:relative!important;
  z-index:5!important;
  isolation:isolate;
  display:inline-grid!important;
  grid-template-columns:42px minmax(0,auto) 22px;
  align-items:center!important;
  gap:11px!important;
  min-width:218px;
  min-height:58px;
  padding:8px 11px 8px 9px!important;
  border:1px solid color-mix(in srgb,var(--theme-hero-end,#1780b6) 42%,#fff)!important;
  border-radius:18px!important;
  background:
    linear-gradient(135deg,
      var(--theme-hero-start,#0b3c5d) 0%,
      var(--theme-hero-mid,#126b9a) 55%,
      var(--theme-hero-end,#1780b6) 100%)!important;
  color:#fff!important;
  box-shadow:
    0 12px 28px color-mix(in srgb,var(--theme-hero-start,#0b3c5d) 30%,transparent),
    inset 0 1px 0 rgba(255,255,255,.20)!important;
  overflow:hidden;
  text-align:left;
  transform:translateY(0);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease,
    border-color .18s ease!important;
}
.messages-hero .message-new-hero-button::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:3;
  border-radius:inherit;
  pointer-events:auto!important;
  background:
    linear-gradient(115deg,
      transparent 0 37%,
      rgba(255,255,255,.16) 45%,
      transparent 54% 100%);
  transform:translateX(-125%);
  transition:transform .48s ease;
}
.messages-hero .message-new-hero-button::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:92px;
  height:92px;
  right:-36px;
  top:-48px;
  border-radius:50%;
  border:16px solid rgba(255,255,255,.075);
  background:transparent;
  pointer-events:none;
}
.messages-hero .message-new-hero-button:hover:not(:disabled){
  transform:translateY(-2px);
  filter:saturate(1.06) brightness(1.04);
  box-shadow:
    0 16px 34px color-mix(in srgb,var(--theme-hero-start,#0b3c5d) 36%,transparent),
    inset 0 1px 0 rgba(255,255,255,.26)!important;
}
.messages-hero .message-new-hero-button:hover::before{
  transform:translateX(125%);
}
.messages-hero .message-new-hero-button:active{
  transform:translateY(0) scale(.985);
  box-shadow:
    0 8px 18px color-mix(in srgb,var(--theme-hero-start,#0b3c5d) 28%,transparent),
    inset 0 1px 0 rgba(255,255,255,.18)!important;
}
.messages-hero .message-new-hero-button:focus-visible{
  outline:3px solid color-mix(in srgb,var(--theme-hero-end,#1780b6) 38%,#fff)!important;
  outline-offset:4px;
}
.message-new-hero-icon{
  position:relative;
  z-index:2;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.message-new-hero-icon svg{
  width:23px;
  height:23px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.message-new-hero-copy{
  position:relative;
  z-index:2;
  min-width:0;
  display:grid;
  gap:1px;
}
.message-new-hero-copy b{
  font:800 14px/1.15 'Manrope','DM Sans',sans-serif;
  letter-spacing:.01em;
  color:#fff;
  white-space:nowrap;
}
.message-new-hero-copy small{
  font:600 10px/1.2 'DM Sans',sans-serif;
  color:rgba(255,255,255,.76);
  white-space:nowrap;
}
.message-new-hero-chevron{
  position:relative;
  z-index:2;
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  color:#fff;
  font:700 23px/1 Arial,sans-serif;
  transition:transform .18s ease,background .18s ease;
}
.messages-hero .message-new-hero-button:hover .message-new-hero-chevron{
  transform:translateX(2px);
  background:rgba(255,255,255,.20);
}

/* Hero button stays refined and compact on phones. */
@media(max-width:540px){
  .messages-hero .message-new-hero-button{
    min-width:0;
    min-height:50px;
    grid-template-columns:36px auto;
    gap:8px!important;
    padding:6px 10px 6px 7px!important;
    border-radius:15px!important;
  }
  .message-new-hero-icon{
    width:36px;
    height:36px;
    border-radius:11px;
  }
  .message-new-hero-icon svg{width:20px;height:20px}
  .message-new-hero-copy b{font-size:12px}
  .message-new-hero-copy small{display:none}
  .message-new-hero-chevron{display:none}
}
@media(prefers-reduced-motion:reduce){
  .messages-hero .message-new-hero-button,
  .messages-hero .message-new-hero-button::before,
  .message-new-hero-chevron{transition:none!important}
}


/* ===========================================================
   PWA / Background Web Push
   =========================================================== */
.sidebar-push-wrap{padding:0 0 10px}
.sidebar-push-link{width:100%;display:flex;align-items:center;gap:12px;border:1px solid color-mix(in srgb,var(--brand,#2478b8) 20%,#d8dee6);background:color-mix(in srgb,var(--brand,#2478b8) 5%,#fff);border-radius:18px;padding:11px 14px;text-align:left;color:inherit;cursor:pointer;transition:transform .16s ease,background .16s ease,border-color .16s ease}
.sidebar-push-link:hover{transform:translateY(-1px);background:color-mix(in srgb,var(--brand,#2478b8) 9%,#fff);border-color:color-mix(in srgb,var(--brand,#2478b8) 32%,#d8dee6)}
.sidebar-push-icon{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--brand,#2478b8) 12%,#fff);border:1px solid color-mix(in srgb,var(--brand,#2478b8) 30%,#fff);font-size:19px;font-weight:900}
.sidebar-push-link>span:last-child{display:grid}.sidebar-push-link small{font-size:10px;opacity:.67}

.push-notification-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.push-notification-status{margin-top:13px;padding:13px 15px;border:1px solid #dbe4ea;border-radius:13px;background:#f8fafc;display:grid;grid-template-columns:145px 1fr;gap:10px;line-height:1.45;color:#536976}
.push-notification-status.is-enabled{background:#f0fdf4;border-color:#bbf7d0;color:#365a43}
.push-notification-status.is-error{background:#fff7ed;border-color:#fed7aa;color:#744b34}
.push-help-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:12px}
.push-help-grid>div{padding:11px 12px;border:1px solid #e0e7ed;border-radius:11px;background:#fbfdff;display:grid;gap:4px}
.push-help-grid>div span{font-size:11px;line-height:1.45;color:#637987}

.pwa-push-prompt{position:fixed;z-index:18000;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(680px,calc(100vw - 28px));display:grid;grid-template-columns:44px 1fr auto auto;gap:10px;align-items:center;padding:12px 13px;border:1px solid color-mix(in srgb,var(--brand,#2478b8) 30%,#d6e0e7);border-radius:18px;background:rgba(255,255,255,.96);backdrop-filter:blur(18px);box-shadow:0 22px 55px rgba(15,23,42,.22)}
.pwa-push-prompt-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--brand,#2478b8) 12%,#fff);color:var(--brand,#2478b8);font-size:24px;font-weight:900}
.pwa-push-prompt-copy{display:grid;gap:2px}.pwa-push-prompt-copy b{font:800 13px Manrope,DM Sans,sans-serif}.pwa-push-prompt-copy span{font-size:11px;line-height:1.35;color:#607684}
.pwa-push-prompt button{white-space:nowrap}

@media(max-width:680px){
  .push-notification-actions{justify-content:flex-start}
  .push-notification-status{grid-template-columns:1fr}
  .push-help-grid{grid-template-columns:1fr}
  .pwa-push-prompt{grid-template-columns:40px 1fr;gap:8px}
  .pwa-push-prompt-icon{width:40px;height:40px}
  .pwa-push-prompt button{grid-column:auto;padding:8px 10px}
  .pwa-push-prompt button[data-push-prompt-enable]{grid-column:1/2}
  .pwa-push-prompt button[data-push-prompt-dismiss]{grid-column:2/3}
}


/* ======================================================================
   Dashboard Present Today — canonical two-tab UI
   These rules live in app.css intentionally (not the Dashboard print HTML).
   ====================================================================== */
.dashboard-daily-palette .dashboard-present-dialog{
  width:min(96vw,1680px)!important;
  max-width:1680px!important;
  max-height:min(90vh,900px)!important;
}

.dashboard-daily-palette .present-dialog-shell{
  max-height:min(90vh,900px)!important;
}

/* Theme-aware pill tabs; use the Dashboard's current daily palette. */
.dashboard-daily-palette .present-dialog-tabs{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  padding:10px 18px!important;
  background:color-mix(in srgb,var(--dash-surface,#fff) 92%,#fff)!important;
  border-top:0!important;
  border-bottom:1px solid color-mix(in srgb,var(--dash-present,#d49a28) 18%,#dfe7eb)!important;
}

.dashboard-daily-palette .present-dialog-tab{
  appearance:none!important;
  -webkit-appearance:none!important;
  min-height:38px!important;
  padding:8px 16px!important;
  border:1px solid color-mix(in srgb,var(--dash-present,#d49a28) 34%,#d7e2e8)!important;
  border-radius:999px!important;
  background:#fff!important;
  color:color-mix(in srgb,var(--dash-present,#d49a28) 72%,#304955)!important;
  box-shadow:none!important;
  font:800 12px/1.15 'Manrope','DM Sans',sans-serif!important;
  letter-spacing:.005em!important;
  cursor:pointer!important;
  transform:none!important;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease!important;
}

.dashboard-daily-palette .present-dialog-tab::after{
  content:none!important;
  display:none!important;
}

.dashboard-daily-palette .present-dialog-tab:hover{
  transform:translateY(-1px)!important;
  background:color-mix(in srgb,var(--dash-present,#d49a28) 8%,#fff)!important;
  box-shadow:0 5px 12px color-mix(in srgb,var(--dash-present,#d49a28) 12%,transparent)!important;
}

.dashboard-daily-palette .present-dialog-tab.is-active{
  color:#fff!important;
  border-color:var(--dash-present,#d49a28)!important;
  background:linear-gradient(
    135deg,
    var(--dash-present,#d49a28),
    color-mix(in srgb,var(--dash-present,#d49a28) 72%,var(--dash-hero-start,#6e7d32))
  )!important;
  box-shadow:
    0 7px 16px color-mix(in srgb,var(--dash-present,#d49a28) 22%,transparent),
    inset 0 1px 0 rgba(255,255,255,.24)!important;
}

.dashboard-daily-palette .present-dialog-tab:focus-visible{
  outline:3px solid color-mix(in srgb,var(--dash-present,#d49a28) 32%,#fff)!important;
  outline-offset:2px!important;
}

/* Payroll tab = table only after loading. */
.dashboard-daily-palette .present-payroll-workspace{
  position:relative!important;
  min-height:260px!important;
  padding:0!important;
  overflow:hidden!important;
  background:#fff!important;
}

.dashboard-daily-palette .present-rank-payroll{
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  overflow:hidden!important;
  background:#fff!important;
}

.dashboard-daily-palette .present-payroll-table-scroll,
.dashboard-daily-palette .payroll-rank-table-wrap{
  width:100%!important;
  max-width:100%!important;
  overflow-x:auto!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior-inline:contain!important;
  touch-action:pan-x pan-y!important;
  cursor:grab!important;
  scrollbar-gutter:stable both-edges!important;
}

.dashboard-daily-palette .present-payroll-table-scroll.is-dragging{
  cursor:grabbing!important;
  user-select:none!important;
}

.dashboard-daily-palette .payroll-rank-table{
  width:max(100%,1480px)!important;
  min-width:1480px!important;
  border-collapse:separate!important;
  border-spacing:0!important;
}

.dashboard-daily-palette .payroll-rank-table th,
.dashboard-daily-palette .payroll-rank-table td{
  white-space:nowrap!important;
  padding:12px 15px!important;
}

.dashboard-daily-palette .payroll-rank-table thead th{
  position:sticky!important;
  top:0!important;
  z-index:4!important;
  background:color-mix(in srgb,var(--dash-table-soft,#f5f8ed) 88%,#fff)!important;
}

@media(min-width:901px){
  .dashboard-daily-palette .payroll-rank-table thead th:first-child,
  .dashboard-daily-palette .payroll-rank-table tbody th,
  .dashboard-daily-palette .payroll-rank-table tfoot th:first-child{
    position:sticky!important;
    left:0!important;
    z-index:5!important;
    background:color-mix(in srgb,var(--dash-table-soft,#f5f8ed) 92%,#fff)!important;
  }

  .dashboard-daily-palette .payroll-rank-table .total-cost-col{
    position:sticky!important;
    right:0!important;
    z-index:5!important;
    background:#fff!important;
    box-shadow:-8px 0 12px rgba(25,45,55,.05)!important;
  }

  .dashboard-daily-palette .payroll-rank-table thead .total-cost-col{
    background:color-mix(in srgb,var(--dash-table-soft,#f5f8ed) 88%,#fff)!important;
  }

  .dashboard-daily-palette .payroll-rank-table tfoot .total-cost-col{
    background:color-mix(in srgb,var(--dash-table-soft,#f5f8ed) 92%,#fff)!important;
  }
}

/* Suppress the generic mobile swipe caption: user asked for table only. */
.dashboard-daily-palette .payroll-rank-table-wrap::after{
  display:none!important;
  content:none!important;
}

/* Centered progress while Payroll is computed/refiltered. */
.dashboard-daily-palette .present-payroll-loading[hidden]{
  display:none!important;
}

.dashboard-daily-palette .present-payroll-loading{
  position:absolute!important;
  inset:0!important;
  z-index:30!important;
  display:grid!important;
  place-items:center!important;
  background:rgba(255,255,255,.86)!important;
  backdrop-filter:blur(3px)!important;
}

.dashboard-daily-palette .present-payroll-loading-card{
  min-width:min(330px,calc(100% - 32px))!important;
  max-width:420px!important;
  padding:20px 24px!important;
  display:grid!important;
  justify-items:center!important;
  gap:8px!important;
  text-align:center!important;
  border:1px solid color-mix(in srgb,var(--dash-present,#d49a28) 28%,#dbe4ea)!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 18px 46px rgba(15,23,42,.14)!important;
}

.dashboard-daily-palette .present-payroll-loader-ring{
  width:42px!important;
  height:42px!important;
  border-radius:50%!important;
  border:4px solid color-mix(in srgb,var(--dash-present,#d49a28) 16%,#e5edf1)!important;
  border-top-color:var(--dash-present,#d49a28)!important;
  border-right-color:var(--dash-hero-mid,#8e9343)!important;
  animation:present-payroll-global-spin .75s linear infinite!important;
}

@keyframes present-payroll-global-spin{
  to{transform:rotate(360deg)}
}

@media(max-width:900px){
  .dashboard-daily-palette .dashboard-present-dialog{
    width:calc(100vw - 10px)!important;
    max-width:none!important;
    max-height:calc(100dvh - 12px)!important;
  }

  .dashboard-daily-palette .present-dialog-tabs{
    overflow-x:auto!important;
    padding:9px 11px!important;
  }

  .dashboard-daily-palette .present-dialog-tab{
    flex:0 0 auto!important;
    white-space:nowrap!important;
  }

  .dashboard-daily-palette .payroll-rank-table{
    width:1480px!important;
    min-width:1480px!important;
  }
}


/* ======================================================================
   Present Today / One Day Payroll — full-table fit + always-visible close
   ====================================================================== */

/* Use the available desktop viewport so the entire rank table can fit. */
.dashboard-daily-palette .dashboard-present-dialog{
  width:min(99vw,1920px)!important;
  max-width:min(99vw,1920px)!important;
}

.dashboard-daily-palette .present-dialog-shell{
  width:100%!important;
}

/* Close control lives in the tab strip, so it remains visible in Payroll. */
.dashboard-daily-palette .present-tabs-close{
  appearance:none!important;
  -webkit-appearance:none!important;
  margin-left:auto!important;
  flex:0 0 38px!important;
  width:38px!important;
  height:38px!important;
  display:grid!important;
  place-items:center!important;
  align-self:center!important;
  border:1px solid color-mix(in srgb,var(--dash-present,#d49a28) 30%,#d7e2e8)!important;
  border-radius:50%!important;
  background:#fff!important;
  color:color-mix(in srgb,var(--dash-present,#d49a28) 74%,#304955)!important;
  box-shadow:0 4px 12px rgba(38,55,64,.08)!important;
  font:900 22px/1 Arial,sans-serif!important;
  cursor:pointer!important;
  transition:transform .15s ease,background .15s ease,color .15s ease,box-shadow .15s ease!important;
}

.dashboard-daily-palette .present-tabs-close:hover{
  transform:translateY(-1px)!important;
  color:#fff!important;
  background:var(--dash-present,#d49a28)!important;
  box-shadow:0 7px 15px color-mix(in srgb,var(--dash-present,#d49a28) 20%,transparent)!important;
}

.dashboard-daily-palette .present-tabs-close:focus-visible{
  outline:3px solid color-mix(in srgb,var(--dash-present,#d49a28) 30%,#fff)!important;
  outline-offset:2px!important;
}

/*
 * Desktop: fit all columns, including Total, inside the dialog.
 * The table is deliberately compact but remains readable.
 */
@media(min-width:901px){
  .dashboard-daily-palette .present-payroll-table-scroll,
  .dashboard-daily-palette .payroll-rank-table-wrap{
    overflow-x:hidden!important;
  }

  .dashboard-daily-palette .payroll-rank-table{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    table-layout:fixed!important;
  }

  .dashboard-daily-palette .payroll-rank-table th,
  .dashboard-daily-palette .payroll-rank-table td{
    box-sizing:border-box!important;
    padding:11px 7px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:clamp(9px,.68vw,12px)!important;
  }

  .dashboard-daily-palette .payroll-rank-table thead th{
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    text-overflow:clip!important;
    line-height:1.14!important;
    font-size:clamp(8px,.58vw,10px)!important;
  }

  /* 100% total width across all 11 columns. */
  .dashboard-daily-palette .payroll-rank-table th:nth-child(1),
  .dashboard-daily-palette .payroll-rank-table td:nth-child(1){width:12%!important}
  .dashboard-daily-palette .payroll-rank-table th:nth-child(2),
  .dashboard-daily-palette .payroll-rank-table td:nth-child(2){width:8%!important}
  .dashboard-daily-palette .payroll-rank-table th:nth-child(3),
  .dashboard-daily-palette .payroll-rank-table td:nth-child(3){width:10%!important}
  .dashboard-daily-palette .payroll-rank-table th:nth-child(4),
  .dashboard-daily-palette .payroll-rank-table td:nth-child(4){width:8%!important}
  .dashboard-daily-palette .payroll-rank-table th:nth-child(5),
  .dashboard-daily-palette .payroll-rank-table td:nth-child(5){width:8%!important}
  .dashboard-daily-palette .payroll-rank-table th:nth-child(6),
  .dashboard-daily-palette .payroll-rank-table td:nth-child(6){width:8%!important}
  .dashboard-daily-palette .payroll-rank-table th:nth-child(7),
  .dashboard-daily-palette .payroll-rank-table td:nth-child(7){width:8%!important}
  .dashboard-daily-palette .payroll-rank-table th:nth-child(8),
  .dashboard-daily-palette .payroll-rank-table td:nth-child(8){width:8%!important}
  .dashboard-daily-palette .payroll-rank-table th:nth-child(9),
  .dashboard-daily-palette .payroll-rank-table td:nth-child(9){width:9%!important}
  .dashboard-daily-palette .payroll-rank-table th:nth-child(10),
  .dashboard-daily-palette .payroll-rank-table td:nth-child(10){width:9%!important}
  .dashboard-daily-palette .payroll-rank-table th:nth-child(11),
  .dashboard-daily-palette .payroll-rank-table td:nth-child(11){width:12%!important}

  /* No sticky overlap is needed when the whole desktop table fits. */
  .dashboard-daily-palette .payroll-rank-table thead th:first-child,
  .dashboard-daily-palette .payroll-rank-table tbody th,
  .dashboard-daily-palette .payroll-rank-table tfoot th:first-child,
  .dashboard-daily-palette .payroll-rank-table .total-cost-col{
    position:static!important;
    left:auto!important;
    right:auto!important;
    box-shadow:none!important;
  }
}

/* Smaller screens/PWA: retain left/right panning as the safe fallback. */
@media(max-width:900px){
  .dashboard-daily-palette .dashboard-present-dialog{
    width:calc(100vw - 6px)!important;
    max-width:calc(100vw - 6px)!important;
  }

  .dashboard-daily-palette .present-dialog-tabs{
    display:flex!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
  }

  .dashboard-daily-palette .present-tabs-close{
    position:sticky!important;
    right:0!important;
    z-index:8!important;
    margin-left:auto!important;
    background:#fff!important;
  }

  .dashboard-daily-palette .present-payroll-table-scroll,
  .dashboard-daily-palette .payroll-rank-table-wrap{
    overflow-x:auto!important;
    cursor:grab!important;
  }

  .dashboard-daily-palette .payroll-rank-table{
    width:1180px!important;
    min-width:1180px!important;
    max-width:none!important;
    table-layout:auto!important;
  }

  .dashboard-daily-palette .payroll-rank-table th,
  .dashboard-daily-palette .payroll-rank-table td{
    padding:10px 11px!important;
    font-size:10px!important;
    white-space:nowrap!important;
  }
}


/* ======================================================================
   Present Today — Employee tab vertical scroll / touch swipe fix
   The dialog shell must have an actual height (not max-height only), so the
   final grid row receives a finite viewport and its table wrapper can scroll.
   ====================================================================== */

.dashboard-daily-palette .dashboard-present-dialog{
  height:min(92vh,920px)!important;
  max-height:min(92vh,920px)!important;
}

.dashboard-daily-palette .present-dialog-shell{
  height:100%!important;
  max-height:100%!important;
  min-height:0!important;
  grid-template-rows:auto auto auto minmax(0,1fr)!important;
  overflow:hidden!important;
}

/* Both tab panels must occupy only the remaining grid row. */
.dashboard-daily-palette .present-tab-panel{
  min-height:0!important;
  height:100%!important;
  overflow:hidden!important;
}

.dashboard-daily-palette .present-tab-panel.is-active{
  min-height:0!important;
}

/* Employee tab = summary + independently scrollable records viewport. */
.dashboard-daily-palette .present-tab-panel[data-present-panel="employees"].is-active{
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr)!important;
  overflow:hidden!important;
}

.dashboard-daily-palette .present-tab-panel[data-present-panel="employees"] .present-dialog-summary{
  flex:0 0 auto!important;
}

/* This is the actual vertical scroll/swipe surface. */
.dashboard-daily-palette .present-tab-panel[data-present-panel="employees"] .present-dialog-table-wrap{
  min-height:0!important;
  height:100%!important;
  max-height:100%!important;
  overflow-x:auto!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior:contain!important;
  touch-action:pan-x pan-y!important;
  scrollbar-gutter:stable!important;
}

/* Keep column headings visible while the employee list scrolls. */
.dashboard-daily-palette .present-tab-panel[data-present-panel="employees"] .present-dialog-table thead th{
  position:sticky!important;
  top:0!important;
  z-index:6!important;
}

/* Avoid the table itself forcing the tab panel taller than the viewport. */
.dashboard-daily-palette .present-tab-panel[data-present-panel="employees"] .present-dialog-table{
  margin:0!important;
}

/* Tablet / PWA / phones: maximize the usable list area and preserve finger swipe. */
@media(max-width:900px){
  .dashboard-daily-palette .dashboard-present-dialog{
    height:calc(100dvh - 8px)!important;
    max-height:calc(100dvh - 8px)!important;
  }

  .dashboard-daily-palette .present-dialog-shell{
    height:100%!important;
    max-height:100%!important;
  }

  .dashboard-daily-palette .present-tab-panel[data-present-panel="employees"] .present-dialog-table-wrap{
    overflow-y:auto!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y pan-x!important;
  }
}

/* Very small phones: the card-style employee rows still scroll vertically. */
@media(max-width:650px){
  .dashboard-daily-palette .present-tab-panel[data-present-panel="employees"]{
    min-height:0!important;
  }

  .dashboard-daily-palette .present-tab-panel[data-present-panel="employees"] .present-dialog-table-wrap{
    padding-bottom:max(12px,env(safe-area-inset-bottom))!important;
  }
}


/* ======================================================================
   Present Today — mobile containment, aligned filters, always-visible close
   Fixes the Payroll tab widening the dialog to the rank table's min-content
   width. The table must scroll INSIDE its wrapper, never stretch the dialog.
   ====================================================================== */

/* Every level that contains the wide One Day Payroll table must be allowed
   to shrink to the dialog width. */
.dashboard-daily-palette .dashboard-present-dialog,
.dashboard-daily-palette .present-dialog-shell,
.dashboard-daily-palette .present-dialog-filters,
.dashboard-daily-palette .present-dialog-tabs,
.dashboard-daily-palette .present-tab-panel,
.dashboard-daily-palette .present-payroll-workspace,
.dashboard-daily-palette .present-rank-payroll,
.dashboard-daily-palette .present-payroll-table-scroll,
.dashboard-daily-palette .payroll-rank-table-wrap{
  box-sizing:border-box!important;
  min-width:0!important;
  max-width:100%!important;
}

/* The shell itself must never acquire the payroll table's 1180px min width. */
.dashboard-daily-palette .present-dialog-shell{
  width:100%!important;
  overflow:hidden!important;
}

.dashboard-daily-palette .present-tab-panel{
  width:100%!important;
  min-width:0!important;
}

.dashboard-daily-palette .present-payroll-workspace,
.dashboard-daily-palette .present-rank-payroll{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
}

/* The ONLY element allowed to pan horizontally in One Day Payroll. */
.dashboard-daily-palette .present-payroll-table-scroll,
.dashboard-daily-palette .payroll-rank-table-wrap{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  overflow-x:auto!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior-x:contain!important;
  touch-action:pan-x pan-y!important;
}

/* Keep filter controls anchored to the dialog rather than the payroll table. */
.dashboard-daily-palette .present-dialog-filters{
  width:100%!important;
  min-width:0!important;
}

.dashboard-daily-palette .present-dialog-filters label,
.dashboard-daily-palette .present-dialog-filters select,
.dashboard-daily-palette .present-filter-reset{
  box-sizing:border-box!important;
  min-width:0!important;
  max-width:100%!important;
}

/* Tab bar never scrolls sideways. The close control always remains visible
   on the same row regardless of which tab is active. */
.dashboard-daily-palette .present-dialog-tabs{
  position:relative!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  flex-wrap:nowrap!important;
}

.dashboard-daily-palette .present-tabs-close{
  position:static!important;
  right:auto!important;
  top:auto!important;
  flex:0 0 38px!important;
  margin-left:auto!important;
  transform:none!important;
  z-index:9!important;
}

.dashboard-daily-palette .present-tabs-close:hover{
  transform:translateY(-1px)!important;
}

/* Phones/PWA: BU + Department remain aligned side-by-side on BOTH tabs,
   Reset stays directly below both fields. */
@media(max-width:650px){
  .dashboard-daily-palette .present-dialog-filters{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    column-gap:9px!important;
    row-gap:9px!important;
    align-items:end!important;
    padding:10px 11px 9px!important;
    overflow:hidden!important;
  }

  .dashboard-daily-palette .present-dialog-filters label{
    width:100%!important;
    min-width:0!important;
    margin:0!important;
  }

  .dashboard-daily-palette .present-dialog-filters select{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:44px!important;
    margin:0!important;
  }

  .dashboard-daily-palette .present-filter-reset{
    grid-column:1 / -1!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
  }

  /* Compact enough that both tabs + X fit without horizontal scrolling. */
  .dashboard-daily-palette .present-dialog-tabs{
    display:flex!important;
    align-items:center!important;
    gap:6px!important;
    padding:9px 10px!important;
    overflow:hidden!important;
  }

  .dashboard-daily-palette .present-dialog-tab{
    flex:0 1 auto!important;
    min-width:0!important;
    min-height:40px!important;
    padding:8px 10px!important;
    font-size:10.5px!important;
    line-height:1.1!important;
    white-space:nowrap!important;
  }

  .dashboard-daily-palette .present-tabs-close{
    flex:0 0 38px!important;
    width:38px!important;
    min-width:38px!important;
    height:38px!important;
    margin-left:auto!important;
  }

  /* Wide payroll table remains scrollable, but cannot influence filters/tabs. */
  .dashboard-daily-palette .payroll-rank-table{
    width:1180px!important;
    min-width:1180px!important;
    max-width:none!important;
  }
}

/* Extra-small devices: preserve the same two-column filter geometry while
   trimming only spacing/text size rather than stacking one filter below another. */
@media(max-width:390px){
  .dashboard-daily-palette .present-dialog-filters{
    gap:7px!important;
    padding-left:9px!important;
    padding-right:9px!important;
  }

  .dashboard-daily-palette .present-dialog-filters label{
    font-size:8px!important;
  }

  .dashboard-daily-palette .present-dialog-filters select{
    padding-left:8px!important;
    padding-right:26px!important;
    font-size:10px!important;
  }

  .dashboard-daily-palette .present-dialog-tabs{
    gap:5px!important;
    padding-left:8px!important;
    padding-right:8px!important;
  }

  .dashboard-daily-palette .present-dialog-tab{
    padding-left:8px!important;
    padding-right:8px!important;
    font-size:10px!important;
  }

  .dashboard-daily-palette .present-tabs-close{
    flex-basis:36px!important;
    width:36px!important;
    min-width:36px!important;
    height:36px!important;
  }
}


/* ======================================================================
   One Day Payroll — monthly-accrual table geometry / Total-column sync
   ====================================================================== */
.dashboard-daily-palette .present-payroll-table-scroll .payroll-rank-table col.rank-col{width:170px}
.dashboard-daily-palette .present-payroll-table-scroll .payroll-rank-table col.employees-col{width:100px}
.dashboard-daily-palette .present-payroll-table-scroll .payroll-rank-table col.gross-col{width:120px}
.dashboard-daily-palette .present-payroll-table-scroll .payroll-rank-table col.wtax-col{width:100px}
.dashboard-daily-palette .present-payroll-table-scroll .payroll-rank-table col.sss-es-col{width:100px}
.dashboard-daily-palette .present-payroll-table-scroll .payroll-rank-table col.sss-er-col{width:100px}
.dashboard-daily-palette .present-payroll-table-scroll .payroll-rank-table col.hdmf-es-col{width:100px}
.dashboard-daily-palette .present-payroll-table-scroll .payroll-rank-table col.hdmf-er-col{width:100px}
.dashboard-daily-palette .present-payroll-table-scroll .payroll-rank-table col.ph-es-col{width:130px}
.dashboard-daily-palette .present-payroll-table-scroll .payroll-rank-table col.ph-er-col{width:130px}
.dashboard-daily-palette .present-payroll-table-scroll .payroll-rank-table col.total-col{width:140px}

/* In this dialog the Total column is never independently sticky. Keeping every
   cell in one table flow guarantees header/body/footer alignment while panning. */
.dashboard-daily-palette .present-payroll-table-scroll .total-cost-col{
  position:static!important;
  left:auto!important;
  right:auto!important;
  min-width:0!important;
  width:auto!important;
  box-shadow:none!important;
  text-align:right!important;
}

/* Desktop still fits the table into the wide dialog. */
@media(min-width:901px){
  .dashboard-daily-palette .present-payroll-table-scroll .payroll-rank-table{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    table-layout:fixed!important;
  }
}

/* Phone/PWA: one fixed synchronized grid, horizontally panned as a whole. */
@media(max-width:900px){
  .dashboard-daily-palette .present-payroll-table-scroll,
  .dashboard-daily-palette .payroll-rank-table-wrap{
    box-sizing:border-box!important;
    padding-right:12px!important;
    scroll-padding-right:12px!important;
    overflow-x:auto!important;
    overflow-y:auto!important;
  }

  .dashboard-daily-palette .present-payroll-table-scroll .payroll-rank-table{
    width:1290px!important;
    min-width:1290px!important;
    max-width:1290px!important;
    table-layout:fixed!important;
  }

  .dashboard-daily-palette .present-payroll-table-scroll .payroll-rank-table th,
  .dashboard-daily-palette .present-payroll-table-scroll .payroll-rank-table td{
    box-sizing:border-box!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  .dashboard-daily-palette .present-payroll-table-scroll .total-cost-col{
    padding-right:16px!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
}


/* ========================================================================
   Dashboard quote browser — browse all 48 half-hour cards for today's schedule
   ======================================================================== */
.dashboard-quote-card[data-dashboard-quote-card]{
  min-height:166px;
  padding-bottom:48px;
  outline:none;
  transition:background .28s ease,border-color .28s ease,box-shadow .28s ease,color .28s ease,transform .18s ease;
}
.dashboard-quote-card[data-dashboard-quote-card]:focus-visible{
  outline:3px solid color-mix(in srgb,var(--quote-accent,#b9853f) 58%,white);
  outline-offset:3px;
}
.dashboard-quote-card[data-dashboard-quote-card] blockquote{padding-bottom:3px}
.dashboard-quote-browser{
  position:absolute;
  right:13px;
  bottom:9px;
  z-index:8;
  display:flex;
  align-items:center;
  gap:5px;
  min-height:31px;
  padding:3px 4px;
  border:1px solid color-mix(in srgb,var(--quote-accent,#b9853f) 38%,transparent);
  border-radius:999px;
  background:color-mix(in srgb,#fff 82%,transparent);
  box-shadow:0 5px 14px rgba(30,30,30,.10);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.dashboard-quote-browser button{
  appearance:none;
  -webkit-appearance:none;
  width:28px;
  height:28px;
  min-width:28px;
  display:grid;
  place-items:center;
  margin:0;
  padding:0;
  border:0;
  border-radius:50%;
  background:color-mix(in srgb,var(--quote-accent,#b9853f) 13%,transparent);
  color:var(--quote-ink,#433225);
  font:900 19px/1 Manrope,DM Sans,sans-serif;
  cursor:pointer;
  transition:transform .14s ease,background .14s ease,opacity .14s ease;
}
.dashboard-quote-browser button:hover:not(:disabled){
  transform:translateY(-1px);
  background:color-mix(in srgb,var(--quote-accent,#b9853f) 25%,transparent);
}
.dashboard-quote-browser button:focus-visible{
  outline:2px solid var(--quote-accent,#b9853f);
  outline-offset:1px;
}
.dashboard-quote-browser .dashboard-quote-now{
  width:auto;
  min-width:38px;
  padding:0 7px;
  border-radius:999px;
  font-size:8px;
  letter-spacing:.09em;
}
.dashboard-quote-browser .dashboard-quote-now:disabled{
  opacity:.38;
  cursor:default;
}
.dashboard-quote-browser [data-dashboard-quote-counter]{
  min-width:63px;
  text-align:center;
  color:var(--quote-ink,#433225);
  font:900 8px/1 Manrope,DM Sans,sans-serif;
  letter-spacing:.08em;
  white-space:nowrap;
}
.dashboard-quote-card[data-quote-browsing="1"] .dashboard-quote-browser{
  border-color:color-mix(in srgb,var(--quote-accent,#b9853f) 66%,transparent);
  box-shadow:0 6px 18px color-mix(in srgb,var(--quote-accent,#b9853f) 15%,rgba(30,30,30,.10));
}
.dashboard-quote-card[data-quote-browsing="1"] .dashboard-quote-now:not(:disabled){
  background:var(--quote-accent,#b9853f);
  color:#fff;
}

@media(max-width:700px){
  .dashboard-quote-card[data-dashboard-quote-card]{min-height:176px;padding-bottom:52px}
  .dashboard-quote-card-head{align-items:flex-start}
  .dashboard-quote-card-head time{max-width:165px;text-align:right;line-height:1.35!important}
  .dashboard-quote-browser{right:10px;bottom:9px;gap:4px}
  .dashboard-quote-browser button{width:30px;height:30px;min-width:30px}
  .dashboard-quote-browser .dashboard-quote-now{min-width:40px}
  .dashboard-quote-browser [data-dashboard-quote-counter]{min-width:64px}
}

/* ======================================================================
   Messages — direct WebRTC audio / video calling
   ====================================================================== */
.message-call-quick-actions{display:flex;align-items:center;gap:7px;margin-left:auto}
.message-call-launch{width:40px;height:40px;border:1px solid color-mix(in srgb,var(--theme-accent,#167f70) 26%,#d9e5ea);background:color-mix(in srgb,var(--theme-accent,#167f70) 7%,#fff);color:var(--theme-accent,#167f70);border-radius:13px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.message-call-launch:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(22,62,75,.12);background:color-mix(in srgb,var(--theme-accent,#167f70) 13%,#fff)}
.message-call-launch:disabled{opacity:.55;cursor:wait;transform:none;box-shadow:none}
.message-call-launch svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.message-call-open{overflow:hidden!important}
.message-call-layer{position:fixed;inset:0;z-index:1800;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(3,15,22,.76);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.message-call-layer[hidden]{display:none!important}
.message-call-card{width:min(980px,96vw);height:min(720px,92dvh);min-height:520px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:#07151b;border:1px solid rgba(255,255,255,.14);border-radius:28px;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.48);color:#fff;position:relative}
.message-call-topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 22px;background:linear-gradient(180deg,rgba(8,29,37,.96),rgba(8,29,37,.72));border-bottom:1px solid rgba(255,255,255,.08);z-index:3}
.message-call-topbar>div{display:grid;gap:2px;min-width:0}.message-call-topbar .eyebrow{color:#8fcfc2;font-size:10px;letter-spacing:.13em}.message-call-topbar strong{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.message-call-state-pill{flex:0 0 auto;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);font-size:11px;font-weight:800;color:#dff8f3}
.message-call-stage{position:relative;min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 25%,rgba(33,126,112,.35),transparent 44%),linear-gradient(145deg,#0b2028,#061116 68%)}
.message-call-remote-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#061116;opacity:0;transition:opacity .22s ease}
.message-call-stage.has-remote-video .message-call-remote-video{opacity:1}
.message-call-audio-identity{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:28px}
.message-call-avatar{width:118px;height:118px;border-radius:50%;display:grid;place-items:center;font-size:38px;font-weight:950;letter-spacing:.02em;color:#f3fffc;background:linear-gradient(145deg,color-mix(in srgb,var(--theme-accent,#168878) 76%,#21404a),#16333d);border:4px solid rgba(255,255,255,.15);box-shadow:0 22px 48px rgba(0,0,0,.25),0 0 0 9px rgba(255,255,255,.035)}
.message-call-audio-identity strong{font-size:27px;max-width:80vw}.message-call-audio-identity small{font-size:13px;color:#c4d6da}.message-call-timer{font-variant-numeric:tabular-nums;font-size:13px;font-weight:850;color:#86d9ca;background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:6px 10px}
.message-call-local-video{position:absolute;right:18px;bottom:18px;z-index:4;width:min(220px,25vw);aspect-ratio:3/4;max-height:38%;object-fit:cover;border-radius:18px;background:#12242b;border:2px solid rgba(255,255,255,.22);box-shadow:0 12px 32px rgba(0,0,0,.32);transform:scaleX(-1)}
.message-call-local-video.camera-off{opacity:.28}
.message-call-connection-note{position:absolute;z-index:6;left:50%;bottom:18px;transform:translateX(-50%);max-width:min(680px,86%);padding:9px 13px;border-radius:12px;background:rgba(130,37,37,.88);border:1px solid rgba(255,255,255,.14);font-size:12px;text-align:center;color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.message-call-incoming-actions,.message-call-controls{display:flex;align-items:center;justify-content:center;gap:22px;padding:17px 20px max(17px,env(safe-area-inset-bottom));background:rgba(5,18,24,.96);border-top:1px solid rgba(255,255,255,.08);z-index:8}
.message-call-incoming-actions[hidden],.message-call-controls[hidden]{display:none!important}
.message-call-action,.message-call-control{border:0;background:transparent;color:#eaf6f4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:66px;cursor:pointer;font:inherit}
.message-call-action span,.message-call-control span{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);font-size:20px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);transition:transform .15s ease,background .15s ease}
.message-call-action small,.message-call-control small{font-size:10px;font-weight:800;color:#c8d8db}.message-call-action:hover span,.message-call-control:hover span{transform:translateY(-1px);background:rgba(255,255,255,.18)}
.message-call-action.accept span{background:#1e9f65;color:#fff}.message-call-action.decline span,.message-call-control.end span{background:#d94848;color:#fff}.message-call-control.is-off span{background:#f0a135;color:#fff}.message-call-action:disabled,.message-call-control:disabled{opacity:.55;cursor:wait}

@media(max-width:860px){
  .message-thread-head{gap:9px}.message-thread-head>div:nth-child(2){min-width:0;flex:1}.message-thread-head>div:nth-child(2) h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .message-thread-actions{gap:5px}.message-call-quick-actions{gap:5px}.message-call-launch{width:37px;height:37px;border-radius:12px}.message-call-launch svg{width:18px;height:18px}
  .message-modern-participants span:last-child{display:none}
  .message-call-layer{padding:0;background:#061116}
  .message-call-card{width:100vw;height:100dvh;min-height:100dvh;max-width:none;max-height:none;border:0;border-radius:0}
  .message-call-topbar{padding:calc(12px + env(safe-area-inset-top)) 14px 12px}.message-call-topbar strong{font-size:15px}.message-call-state-pill{font-size:10px;padding:6px 9px}
  .message-call-avatar{width:98px;height:98px;font-size:32px}.message-call-audio-identity strong{font-size:23px}
  .message-call-local-video{right:12px;bottom:12px;width:30vw;max-width:145px;max-height:31%;border-radius:15px}
  .message-call-incoming-actions,.message-call-controls{gap:12px;padding:13px 8px max(14px,env(safe-area-inset-bottom))}
  .message-call-action,.message-call-control{min-width:58px}.message-call-action span,.message-call-control span{width:48px;height:48px;font-size:18px}
}
@media(max-width:540px){
  .message-thread-actions{margin-left:auto}.message-modern-participants{display:none!important}.message-call-quick-actions{margin-left:0}
  .message-thread-head .message-conversation-menu-button{width:36px;height:36px}.message-call-launch{width:36px;height:36px}
  .message-call-topbar{gap:8px}.message-call-state-pill{max-width:42vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .message-call-local-video{width:32vw}.message-call-controls{gap:6px}.message-call-control{min-width:54px}.message-call-action{min-width:82px}
}
@media(prefers-reduced-motion:reduce){.message-call-launch,.message-call-remote-video,.message-call-action span,.message-call-control span{transition:none!important}}

/* ======================================================================
   Messages — presence + reply quoting (2026-09-17)
   ====================================================================== */
.message-avatar-with-presence{
  position:relative!important;
  overflow:visible!important;
}
.message-avatar-with-presence>img{
  border-radius:50%;
}
.message-presence-dot{
  display:inline-block;
  width:9px;
  height:9px;
  flex:0 0 9px;
  border-radius:50%;
  background:#a8b1b8;
  vertical-align:middle;
}
.message-avatar-with-presence>.message-presence-dot{
  position:absolute;
  right:-1px;
  bottom:-1px;
  z-index:4;
  width:10px;
  height:10px;
  border:2px solid #fff;
  box-sizing:content-box;
  box-shadow:0 0 0 1px rgba(24,48,62,.08);
}
.message-presence-dot.is-online{background:#23ad68}
.message-presence-dot.is-offline{background:#a8b1b8}
.message-peer-presence{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:2px;
  line-height:1.2;
}
.message-peer-presence .message-presence-dot{
  width:8px;
  height:8px;
  flex-basis:8px;
}
.message-peer-presence.is-online{color:#188a54!important}
.message-peer-presence.is-offline{color:var(--muted,#71879a)!important}
.message-recipient-choice small,.message-member small{
  display:flex;
  align-items:center;
  gap:6px;
}

.message-reply-quote{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  margin:2px 0 7px;
  padding:7px 9px;
  border:0;
  border-left:3px solid color-mix(in srgb,var(--theme-accent,#147d64) 72%,#fff);
  border-radius:8px;
  background:rgba(20,125,100,.07);
  color:inherit;
  text-align:left;
  cursor:pointer;
  font:inherit;
  overflow:hidden;
}
.message-bubble-row.mine .message-reply-quote{
  background:rgba(255,255,255,.55);
}
.message-reply-quote b{
  max-width:100%;
  color:var(--theme-accent,#147d64);
  font-size:10px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.message-reply-quote span{
  display:block;
  max-width:100%;
  color:#667b89;
  font-size:10px;
  line-height:1.3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.message-reply-quote:hover{
  background:color-mix(in srgb,var(--theme-accent,#147d64) 11%,white);
}
.message-reply-quote.is-pending{cursor:default;pointer-events:none}
.message-compose-reply{
  grid-area:reply;
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:0;
  padding:7px 9px 7px 11px;
  border-left:3px solid var(--theme-accent,#147d64);
  border-radius:9px;
  background:color-mix(in srgb,var(--theme-accent,#147d64) 7%,white);
}
.message-compose-reply[hidden]{display:none!important}
.message-compose-reply>div{display:grid;gap:2px;min-width:0}
.message-compose-reply small{color:var(--muted,#6f8496);font-size:9px}
.message-compose-reply [data-message-reply-preview]{
  display:block;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#536b7a;
  font-size:10px;
}
.message-compose-reply button{
  flex:0 0 auto;
  width:28px;
  height:28px;
  min-height:28px!important;
  padding:0!important;
  border:0;
  border-radius:50%;
  background:rgba(15,23,42,.06);
  color:#526873;
  cursor:pointer;
  font-size:18px;
  line-height:1;
}
.message-composer{
  grid-template-areas:
    "reply reply reply"
    "preview preview preview"
    "attach editor send"!important;
}
@keyframes message-reply-target-pulse{
  0%,100%{box-shadow:0 3px 10px rgba(25,50,70,.04)}
  28%,72%{box-shadow:0 0 0 3px color-mix(in srgb,var(--theme-accent,#147d64) 28%,transparent),0 7px 20px rgba(25,50,70,.10)}
}
.message-reply-target-flash .message-bubble{
  animation:message-reply-target-pulse 1.15s ease 1;
}
@media(max-width:540px){
  .message-reply-quote{padding:6px 8px;margin-bottom:6px}
  .message-compose-reply{padding:6px 8px}
}
@media(prefers-reduced-motion:reduce){
  .message-reply-target-flash .message-bubble{animation:none!important;outline:2px solid color-mix(in srgb,var(--theme-accent,#147d64) 36%,transparent)}
}

/* 2026-09-17 Messages mobile conversation drawer:
   keep the conversation header (including Audio/Video call actions) below the
   persistent HRIS topbar instead of allowing the app header to cover it. */
@media(max-width:800px){
  .message-thread-backdrop{
    top:88px!important;
    height:calc(100dvh - 88px)!important;
  }
  .message-thread-panel{
    top:88px!important;
    bottom:0!important;
    height:calc(100dvh - 88px)!important;
    max-height:calc(100dvh - 88px)!important;
  }
  .message-thread-panel .message-thread-head{
    position:relative!important;
    top:auto!important;
    flex:0 0 auto!important;
    z-index:12!important;
    background:rgba(255,255,255,.985)!important;
    box-shadow:0 3px 12px rgba(23,50,66,.06)!important;
  }
  .message-thread-panel .message-thread{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
  }
  .message-thread-panel .message-composer,
  .message-thread-panel .message-attachment-help{
    position:relative!important;
    bottom:auto!important;
    z-index:10!important;
    flex:0 0 auto!important;
  }
}

/* 2026-09-17 — modern installed-PWA launch + navigation loading experience */
.pwa-boot-screen{display:none}
@media (display-mode:standalone){
  html.pwa-booting,html.pwa-booting body{overflow:hidden}
  html.pwa-booting .pwa-boot-screen{display:flex}
  .pwa-boot-screen{
    position:fixed;inset:0;z-index:30000;align-items:center;justify-content:center;
    min-height:100dvh;padding:max(28px,env(safe-area-inset-top)) 24px max(28px,env(safe-area-inset-bottom));
    background:
      radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--theme-accent,#2478b8) 22%,transparent) 0,transparent 34%),
      linear-gradient(155deg,#071e2b 0%,#0a3245 46%,#081f2b 100%);
    color:#fff;opacity:1;visibility:visible;transition:opacity .28s ease,visibility .28s ease;
    isolation:isolate;
  }
  .pwa-boot-screen::before,.pwa-boot-screen::after{content:"";position:absolute;border-radius:999px;filter:blur(1px);opacity:.32;pointer-events:none}
  .pwa-boot-screen::before{width:58vw;height:58vw;max-width:520px;max-height:520px;left:-20vw;top:-16vw;background:radial-gradient(circle,rgba(73,188,184,.52),transparent 68%)}
  .pwa-boot-screen::after{width:50vw;height:50vw;max-width:460px;max-height:460px;right:-19vw;bottom:-18vw;background:radial-gradient(circle,rgba(51,126,193,.50),transparent 68%)}
  .pwa-boot-screen.is-ready{opacity:0;visibility:hidden;pointer-events:none}
  .pwa-boot-glow{position:absolute;width:min(70vw,520px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.10),rgba(255,255,255,0) 66%);animation:pwa-boot-glow 2.6s ease-in-out infinite}
  .pwa-boot-card{position:relative;z-index:1;width:min(360px,88vw);display:flex;flex-direction:column;align-items:center;text-align:center;animation:pwa-boot-card-in .36s ease-out both}
  .pwa-boot-logo{width:96px;height:96px;display:grid;place-items:center;padding:8px;border-radius:28px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.20);box-shadow:0 24px 70px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.20);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  .pwa-boot-logo img{display:block;width:80px;height:80px;border-radius:22px;object-fit:cover;filter:drop-shadow(0 7px 18px rgba(0,0,0,.22))}
  .pwa-boot-copy{display:flex;flex-direction:column;align-items:center;margin-top:24px}
  .pwa-boot-kicker{font:800 .67rem/1 Manrope,DM Sans,sans-serif;letter-spacing:.23em;color:#8fe1d7}
  .pwa-boot-copy strong{margin-top:8px;font:800 clamp(1.55rem,7vw,2rem)/1.08 Manrope,DM Sans,sans-serif;letter-spacing:-.025em;color:#fff}
  .pwa-boot-copy>span:last-child{margin-top:7px;font-size:.82rem;color:rgba(233,247,250,.72)}
  .pwa-boot-progress{position:relative;width:min(238px,72vw);height:4px;margin-top:28px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.12);box-shadow:inset 0 1px 2px rgba(0,0,0,.15)}
  .pwa-boot-progress i{position:absolute;inset:0 auto 0 0;width:44%;border-radius:inherit;background:linear-gradient(90deg,#77d8cb,#fff,#75b7ed);box-shadow:0 0 14px rgba(125,224,211,.55);animation:pwa-boot-progress 1.05s cubic-bezier(.45,0,.2,1) infinite}
  .pwa-boot-card small{margin-top:12px;font-size:.72rem;letter-spacing:.015em;color:rgba(233,247,250,.66)}
}

/* Modernize the existing in-app loader as well, especially inside installed PWA. */
.app-loading-overlay .app-loading-card{width:min(310px,calc(100vw - 40px))!important;max-width:310px!important;gap:8px!important;padding:24px 24px 22px!important;border-radius:26px!important;background:rgba(255,255,255,.965)!important;box-shadow:0 28px 78px rgba(7,43,61,.24),0 2px 10px rgba(7,43,61,.08)!important}
.app-loading-brand{width:62px;height:62px;display:grid;place-items:center;margin-bottom:4px;padding:6px;border-radius:19px;background:linear-gradient(145deg,rgba(36,120,184,.10),rgba(36,134,111,.12));border:1px solid rgba(36,120,184,.13);box-shadow:0 10px 28px rgba(21,87,122,.12)}
.app-loading-brand img{display:block;width:50px;height:50px;border-radius:15px;object-fit:cover}
.app-loading-overlay .app-loading-card strong{font-family:Manrope,DM Sans,sans-serif;font-size:1rem!important;font-weight:800;letter-spacing:-.01em}
.app-loading-overlay .app-loading-card span{font-size:.78rem!important;line-height:1.4!important}
.app-loading-progress{position:relative;width:100%;height:4px;margin-top:6px;border-radius:999px;overflow:hidden;background:#e8eef2}
.app-loading-progress i{position:absolute;inset:0 auto 0 0;width:38%;border-radius:inherit;background:linear-gradient(90deg,var(--theme-accent,#2478b8),#62c8bd,var(--theme-accent,#2478b8));box-shadow:0 0 10px color-mix(in srgb,var(--theme-accent,#2478b8) 28%,transparent);animation:app-modern-progress .95s cubic-bezier(.45,0,.2,1) infinite}
.app-loading-overlay .app-loading-donut{display:none!important}
.app-loading-overlay .app-loading-card::after{display:none!important}

@keyframes pwa-boot-card-in{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes pwa-boot-glow{0%,100%{opacity:.6;transform:scale(.94)}50%{opacity:1;transform:scale(1.04)}}
@keyframes pwa-boot-progress{0%{transform:translateX(-115%)}70%{transform:translateX(185%)}100%{transform:translateX(255%)}}
@keyframes app-modern-progress{0%{transform:translateX(-120%)}70%{transform:translateX(190%)}100%{transform:translateX(270%)}}
@media(max-width:800px){
  .app-loading-overlay .app-loading-card{width:min(286px,calc(100vw - 38px))!important;padding:22px 22px 20px!important}
  .app-loading-brand{width:58px;height:58px;border-radius:18px}.app-loading-brand img{width:46px;height:46px;border-radius:14px}
}
@media(prefers-reduced-motion:reduce){
  .pwa-boot-glow,.pwa-boot-card,.pwa-boot-progress i,.app-loading-progress i{animation:none!important}
  .pwa-boot-progress i,.app-loading-progress i{width:100%!important;transform:none!important}
}


/* 2026-09-17 — keep the modern loader, restore the animated donut indicator. */
@media (display-mode:standalone){
  .pwa-boot-progress{display:none!important}
  .pwa-boot-donut{
    position:relative;width:60px;height:60px;margin-top:27px;border-radius:50%;
    background:conic-gradient(from 0deg,#8fe1d7 0 18%,rgba(143,225,215,.16) 18% 40%,#fff 40% 48%,rgba(117,183,237,.22) 48% 72%,#75b7ed 72% 88%,rgba(255,255,255,.12) 88% 100%);
    box-shadow:0 0 0 7px rgba(143,225,215,.07),0 10px 30px rgba(0,0,0,.18);
    animation:pwa-donut-spin .88s linear infinite
  }
  .pwa-boot-donut::before{content:"";position:absolute;inset:8px;border-radius:50%;background:#071f2a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
  .pwa-boot-donut::after{content:"";position:absolute;width:9px;height:9px;border-radius:50%;left:4px;top:9px;background:#fff;box-shadow:0 0 12px rgba(255,255,255,.85)}
  .pwa-boot-card small{margin-top:14px}
}
.app-loading-progress{display:none!important}
.app-loading-overlay .app-loading-donut{
  display:block!important;position:relative!important;width:60px!important;height:60px!important;margin:7px auto 3px!important;
  border-radius:50%!important;background:conic-gradient(from 0deg,var(--theme-accent,#2478b8) 0 22%,rgba(36,120,184,.12) 22% 42%,#65cbbf 42% 58%,rgba(21,156,145,.16) 58% 76%,var(--navy,#17384c) 76% 90%,rgba(36,120,184,.12) 90% 100%)!important;
  box-shadow:0 0 0 7px rgba(22,119,184,.07),0 10px 26px rgba(22,119,184,.14)!important;
  animation:app-donut-spin .88s linear infinite!important
}
.app-loading-overlay .app-loading-donut::before{content:"";position:absolute;inset:8px;border-radius:50%;background:rgba(255,255,255,.99);box-shadow:inset 0 0 0 1px rgba(22,119,184,.06)}
.app-loading-overlay .app-loading-donut::after{content:"";position:absolute;width:9px;height:9px;border-radius:50%;left:4px;top:9px;background:#fff;box-shadow:0 0 10px rgba(255,255,255,.95)}
@keyframes pwa-donut-spin{to{transform:rotate(360deg)}}
@keyframes app-donut-spin{to{transform:rotate(360deg)}}
@media(max-width:800px){.app-loading-overlay .app-loading-donut{width:56px!important;height:56px!important}}
@media(prefers-reduced-motion:reduce){.pwa-boot-donut,.app-loading-overlay .app-loading-donut{animation-duration:1.8s!important}}

/* 2026-09-17 PWA loader/version sync: intentional hash bump. */

/* Employee directory filters: roomy multi-column layout */
.employee-master-filters{grid-template-columns:minmax(420px,1.8fr) minmax(130px,.45fr) minmax(180px,.7fr) minmax(180px,.7fr) minmax(180px,.7fr) auto;align-items:center}
.employee-master-filters .search{width:100%;min-width:0}
.employee-master-filters .search select{border:0;border-right:1px solid var(--line);border-radius:0;background:#f8fafb;padding:0 10px;max-width:155px}
.employee-master-filters .search input{min-width:180px}
@media(max-width:1280px){.employee-master-filters{grid-template-columns:1fr 1fr 1fr}.employee-master-filters .search{grid-column:1/-1}}
@media(max-width:700px){.employee-master-filters{grid-template-columns:1fr}.employee-master-filters .search{grid-column:auto}}
/* Payroll cost visual refresh */
.dashboard-chart:has(.cost-chart){overflow:hidden;background:linear-gradient(145deg,#fffdf8,#f7fbff)}
.dashboard-chart:has(.cost-chart)>.panel-head{padding:28px 28px 22px;background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(246,250,255,.92));border-bottom:1px solid #e5edf4}
.dashboard-chart:has(.cost-chart)>.panel-head h3{font-size:22px;color:#263f55;margin-top:6px}
.dashboard-chart:has(.cost-chart)>.panel-head .muted{max-width:760px;font-size:13px;line-height:1.55;margin-top:8px}
.dashboard-chart:has(.cost-chart) .cost-chart{padding:14px 18px 20px;gap:10px}
.dashboard-chart:has(.cost-chart) .cost-tree-row{border:1px solid #e5edf4;border-radius:16px;background:rgba(255,255,255,.9);box-shadow:0 5px 16px rgba(31,62,88,.04);transition:transform .18s ease,box-shadow .18s ease}
.dashboard-chart:has(.cost-chart) .cost-tree-row:hover{transform:translateY(-1px);box-shadow:0 9px 22px rgba(31,62,88,.08)}
.dashboard-chart:has(.cost-chart) .cost-tree-row>summary{padding:16px 18px;border-radius:16px}
.dashboard-chart:has(.cost-chart) .cost-row{grid-template-columns:minmax(220px,1.15fr) 3fr minmax(150px,.8fr) 34px;gap:18px}
.dashboard-chart:has(.cost-chart) .cost-row>div:first-child b{font-size:15px;color:#30485b;line-height:1.35}
.dashboard-chart:has(.cost-chart) .cost-row>div:first-child small{margin-top:4px;color:#7b91a0;font-size:11px}
.dashboard-chart:has(.cost-chart) .cost-track{height:16px;border-radius:999px;background:#eaf1f7;box-shadow:inset 0 1px 2px rgba(19,61,91,.06)}
.dashboard-chart:has(.cost-chart) .cost-track i{background:linear-gradient(90deg,#2b689f,#4b91c5);border-radius:999px;box-shadow:0 3px 8px rgba(43,104,159,.2)}
.dashboard-chart:has(.cost-chart) .cost-row strong{font-size:16px;color:#263f55}
.dashboard-chart:has(.cost-chart) .cost-more{color:#77a52b;font-size:24px}
@media(max-width:1100px){.dashboard-chart:has(.cost-chart) .cost-row{grid-template-columns:1fr 34px}.dashboard-chart:has(.cost-chart) .cost-track{grid-column:1/-1}}
.payroll-heatmap{margin:0 18px 18px;border:1px solid #e5edf4;border-radius:16px;background:#fff;overflow:hidden}.payroll-heatmap-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid #edf2f6}.payroll-heatmap-head b{display:block;color:#29465a;font-size:15px}.payroll-heatmap-head small,.payroll-heatmap-head span{display:block;color:#8194a1;font-size:11px;margin-top:3px}.payroll-heatmap-head span{margin:0}.payroll-heatmap-scroll{overflow:auto}.payroll-heatmap-grid{display:grid;grid-template-columns:minmax(190px,1.5fr) repeat(var(--heat-cols),minmax(92px,1fr));min-width:720px}.payroll-heatmap-grid>div{padding:12px 10px;border-right:1px solid #edf2f6;border-bottom:1px solid #edf2f6}.payroll-heatmap-corner,.payroll-heatmap-month{font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:#7b91a0;background:#f8fbfd}.payroll-heatmap-month{text-align:center}.payroll-heatmap-unit{font-size:12px;font-weight:700;color:#385366;background:#fff}.payroll-heatmap-cell{display:grid;place-items:center;min-height:43px;font-size:11px;font-weight:800;color:#17476a;background:color-mix(in srgb,#3f86b8 calc(var(--heat)*100%),#f3f7fa)}.payroll-heatmap-cell:hover{outline:2px solid #2d719f;outline-offset:-2px;position:relative;z-index:1}.payroll-detail-label{margin:8px 18px 4px;color:#385366;font-weight:800;font-size:13px}.payroll-detail-label small{font-weight:400;color:#8194a1;margin-left:6px}.dashboard-chart:has(.payroll-heatmap) .cost-chart{padding-top:0}

/* Notifications inbox presentation — 20260928.20 */
.notification-center{overflow:hidden}
.notification-center .panel-head{padding:24px 28px 18px;align-items:flex-end;border-bottom:1px solid var(--line,#e5edf3)}
.notification-center .panel-head h3{margin:5px 0 0;font-size:20px;color:var(--text,#273e57)}
.notification-list-page{display:grid;gap:0}
.notification-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;padding:22px 28px;border-bottom:1px solid #edf2f6;background:#fff;transition:background .18s ease}
.notification-card:last-child{border-bottom:0}
.notification-card:hover{background:#f8fbfd}
.notification-card.is-unread{border-left:4px solid var(--esc-signature,#2478b8);padding-left:24px;background:linear-gradient(90deg,#f3f9fd,#fff 34%)}
.notification-card-main{min-width:0}
.notification-card-title{display:flex;align-items:center;gap:9px;flex-wrap:wrap;color:#263e57;font-size:15px;line-height:1.35}
.notification-card-title b{font-weight:800}
.notification-card-main p{margin:9px 0 10px;max-width:920px;color:#60778c;font-size:13px;line-height:1.55}
.notification-card-main small{color:#8a9aaa;font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.notification-card-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;min-width:150px}
.notification-card-actions form{margin:0}
.notification-card-actions .button,.notification-card-actions button{min-height:36px;padding:8px 13px;border-radius:9px;font-size:12px;white-space:nowrap}
.notification-center .record-count{align-self:center;color:#8093a3;font-size:12px;font-weight:700}
@media(max-width:700px){.notification-center .panel-head{padding:20px 18px 15px}.notification-card{grid-template-columns:1fr;gap:14px;padding:18px}.notification-card.is-unread{padding-left:14px}.notification-card-actions{justify-content:flex-start;min-width:0}.notification-card-main p{font-size:12px}}

/* Polished leave filter input */
.find-filter{display:flex;align-items:center;gap:10px;min-width:0;color:var(--ink,#4d4638);font-weight:600}
.find-filter span{white-space:nowrap}
.find-filter input[type=search]{flex:1;min-width:220px;height:42px;border:1px solid var(--line,#d8cba8);border-radius:10px;padding:0 14px;background:#fff;color:var(--ink,#4d4638);font-size:16px;outline:none;box-shadow:inset 0 1px 2px rgba(30,50,70,.04)}
.find-filter input[type=search]:focus{border-color:#2b7fba;box-shadow:0 0 0 3px rgba(43,127,186,.14)}
@media(max-width:620px){.find-filter{align-items:stretch;flex-direction:column;gap:6px}.find-filter input[type=search]{min-width:0;width:100%}}

/* Duty Slip modern UI 20260929.16 */
.duty-slip-page .hero{background:linear-gradient(120deg,#0b3c5d,#1678b8);border-radius:22px;padding:34px 38px;box-shadow:0 18px 40px rgba(9,47,74,.16)}.duty-slip-page .hero h2{font-size:32px}.duty-slip-page .employee-filters{padding:18px;border-radius:16px;box-shadow:0 10px 26px rgba(23,50,66,.06)}.duty-slip-page .employee-filters .search{border-radius:12px}.duty-slip-page .employee-filters .search input{padding:13px 15px}.duty-slip-page .employee-filters .search button{background:#0b3c5d;border-radius:0 11px 11px 0}.duty-slip-page .table-panel{border-radius:18px;box-shadow:0 12px 30px rgba(23,50,66,.07)}.duty-slip-page .table-panel .panel-head{padding:24px 26px 18px}.duty-slip-page .duty-slip-table th{background:#eef5f9;padding:14px 17px}.duty-slip-page .duty-slip-table td{padding:15px 17px}.duty-slip-page .duty-slip-table tbody tr:hover{background:#edf7fc}