/* Workforce Manager v5.572 — Phase 1 CSS module (preserved): extracted baseline styles. */
:root{font-family:Inter,system-ui,-apple-system,sans-serif;color:#111827;background:#f8fafc}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}header{background:#111827;color:#fff;padding:15px 20px;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}header h1{margin:0;font-size:20px}.muted{color:#6b7280;font-size:12px}.light{opacity:.7;font-size:12px}main{max-width:1280px;margin:auto;padding:14px}.hidden{display:none!important}.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}.right{margin-left:auto}button{border:0;border-radius:9px;padding:9px 12px;font-weight:600;cursor:pointer}.primary{background:#111827;color:#fff}.secondary{background:#e5e7eb}.success{background:#dcfce7;color:#166534}.danger{background:#fee2e2;color:#991b1b}.accent{background:#ede9fe;color:#5b21b6}.card{background:#fff;border:1px solid #e5e7eb;border-radius:13px;padding:14px}.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-bottom:12px}.employee-kpis{grid-template-columns:repeat(3,minmax(0,260px))}.kpi strong{display:block;font-size:20px;margin-top:3px}.grid{overflow:auto;max-height:68vh;border:1px solid #e5e7eb;border-radius:10px}
.schedule{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;min-width:1120px;background:#fff}
.schedule th,.schedule td{padding:8px;text-align:left;vertical-align:top;border-right:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb;background:#fff}
.schedule th{font-size:11px;color:#6b7280;text-transform:uppercase;position:sticky;top:0;z-index:4;background:#f8fafc;height:52px}
.schedule th:first-child{left:0;z-index:6;width:180px;min-width:180px;max-width:180px;border-left:0}
.schedule td:first-child{position:sticky;left:0;z-index:3;width:180px;min-width:180px;max-width:180px;background:#fff}
.schedule th:not(:first-child),.schedule td:not(:first-child){width:134px;min-width:134px;max-width:134px}
.schedule tbody tr{height:118px}
.schedule tbody td{height:118px;min-height:118px;max-height:118px}
.dropcell{height:118px;min-height:118px;max-height:118px;overflow-y:auto}
.dropcell.dragover{outline:2px dashed #6b7280;outline-offset:-3px;background:#f9fafb}
.dropcell.unavailableCell,
.dropcell.leaveCell{
background:#fee2e2!important;
}
.dropcell.unavailableCell::after{
content:"Unavailable";
display:block;
margin-top:8px;
font-size:11px;
color:#b42318;
font-weight:700;
}
.dropcell.unavailableCell:has(.shift)::after{display:none}
.calendarLeaveLabel{
display:block;
margin:4px 0 6px;
padding:4px 6px;
border-radius:6px;
background:#fecaca;
color:#991b1b;
font-size:11px;
font-weight:700;
line-height:1.2;
}
.shift.warningShift{
background:#fee2e2!important;
border:2px solid #dc2626!important;
color:#7f1d1d!important;
}
.shift.warningShift .muted{color:#991b1b!important}
.shift{background:#f3f4f6;border:1px solid #d1d5db;border-radius:8px;padding:7px;margin:0 0 6px;cursor:pointer;min-height:48px}
.shift[draggable="true"]{cursor:grab}.shift.dragging{opacity:.45}
.schedule tr:last-child td{border-bottom:0}
.schedule th:last-child,.schedule td:last-child{border-right:0}.shift.open{background:#fff;border-style:dashed}.warning{background:#fff7ed;border:1px solid #fed7aa;padding:9px;border-radius:8px;margin:6px 0}.good{background:#f0fdf4;border:1px solid #bbf7d0;padding:9px;border-radius:8px}.login{max-width:420px;margin:70px auto}.login h2{margin-top:0}label{display:block;font-size:12px;font-weight:700;margin:10px 0 4px}input,select,textarea{width:100%;padding:10px;border:1px solid #d1d5db;border-radius:8px;font-size:16px}textarea{min-height:100px;resize:vertical}.tabs{display:flex;gap:5px;flex-wrap:wrap}.tab{background:#374151;color:white}.tab.active{background:white;color:#111827}.view{display:none}.view.active{display:block}.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mini{padding:10px;border:1px solid #e5e7eb;border-radius:9px;margin:7px 0}.badge{display:inline-block;border-radius:999px;background:#eef2ff;padding:3px 7px;font-size:11px}.leaveBalanceGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0 12px}
.leaveBalanceCard{border:1px solid #e5e7eb;border-radius:10px;padding:10px;background:#f8fafc}
.leaveBalanceCard strong{display:block;font-size:20px;margin:3px 0}
.leaveBalanceCard .muted{font-size:11px}
.employeeNameLink{border:0;background:none;padding:0;color:var(--qx-teal);font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.employeeDetailGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.employeeDetailBox{border:1px solid var(--qx-line);border-radius:10px;padding:10px;background:#fff}
.employeeDetailBox .muted{font-size:11px}
@media(max-width:650px){.employeeDetailGrid{grid-template-columns:1fr}}
@media(max-width:700px){.leaveBalanceGrid{grid-template-columns:1fr}}table.simple{width:100%;border-collapse:collapse}table.simple th,table.simple td{padding:9px;border-bottom:1px solid #e5e7eb;text-align:left}
dialog{border:0;border-radius:14px;padding:0;width:min(94vw,520px)}dialog::backdrop{background:rgba(0,0,0,.35)}form{padding:18px}.actions{display:flex;gap:8px;justify-content:flex-end;margin-top:15px}.row2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.tab{position:relative}
.tabBadge{
display:inline-flex;align-items:center;justify-content:center;
min-width:18px;height:18px;padding:0 5px;margin-left:6px;
border-radius:999px;background:#dc2626;color:#fff;
font-size:11px;font-weight:700;vertical-align:middle
}
.tabBadge.hidden{display:none}
.requestNotification{display:block;width:100%;text-align:left;border:1px solid #e5e7eb;background:#fff;border-radius:10px;padding:10px 12px;margin:8px 0;cursor:pointer}
.requestNotification.unread{border-left:4px solid #dc2626;background:#fff7f7}
.requestNotification .nTitle{font-weight:700}
.requestNotification .nMeta{font-size:12px;color:#64748b;margin-top:3px}
.requestNotification.read{opacity:.78}
.notificationTarget{outline:3px solid #818cf8!important;outline-offset:2px;animation:targetPulse 1.6s ease-out}
@keyframes targetPulse{0%{transform:scale(.99)}35%{transform:scale(1.01)}100%{transform:scale(1)}}
@media(max-width:850px){
.kpis{grid-template-columns:1fr 1fr}.two,.row2{grid-template-columns:1fr}main{padding:10px}
.grid{max-height:64vh}
.schedule{min-width:1040px}
.schedule th:first-child,.schedule td:first-child{width:145px;min-width:145px;max-width:145px}
.schedule th:not(:first-child),.schedule td:not(:first-child){width:128px;min-width:128px;max-width:128px}
}
.staffingSummary{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.staffingSummaryCard{background:#fff;border:1px solid var(--qx-line);border-radius:10px;padding:9px 12px;min-width:135px}
.staffingSummaryCard strong{display:block;font-size:18px}
.staffingWeek{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.staffingDay{background:#fff;border:1px solid var(--qx-line);border-radius:11px;min-width:0;overflow:hidden}
.staffingDayHead{display:flex;align-items:center;gap:6px;padding:9px 9px 8px;border-bottom:1px solid var(--qx-line);background:#f8fafc}
.staffingDayHead strong{font-size:13px}
.staffingDayHead button{margin-left:auto;padding:5px 7px;min-width:auto}
.staffingDayBody{padding:7px;min-height:72px}
.staffingBlock{border:1px solid var(--qx-line);border-radius:8px;padding:7px;margin-bottom:6px;background:#fff}
.staffingBlock:last-child{margin-bottom:0}
.staffingBlockTop{display:flex;align-items:flex-start;gap:5px}
.staffingBlockRole{font-weight:700;font-size:12px;min-width:0;overflow-wrap:anywhere}
.staffingBlockCount{margin-left:auto;white-space:nowrap;font-size:11px}
.staffingBlockTime{font-size:11px;color:var(--qx-muted);margin-top:2px}
.staffingBlockActions{display:flex;gap:4px;margin-top:6px}
.staffingBlockActions button{padding:4px 6px;font-size:10px}
.staffCountPicker{display:grid;grid-template-columns:44px 1fr 44px;gap:7px;align-items:center}
.staffCountPicker input{text-align:center}
@media(max-width:1050px){.staffingWeek{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:700px){.staffingWeek{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.staffingWeek{grid-template-columns:1fr}}
.availabilityTable th,.availabilityTable td{min-width:105px;vertical-align:top}
.availabilityTable th:first-child,.availabilityTable td:first-child{min-width:150px}
.availabilityTable .badge{white-space:nowrap;margin-bottom:3px}
.messageItem{padding:11px 12px;border:1px solid #e5e7eb;border-radius:10px;margin:8px 0;background:#fff}
.messageItem.unread{border-left:4px solid #2563eb;background:#eff6ff}
.messageMeta{font-size:12px;color:#6b7280;margin-bottom:5px}
.messageBody{white-space:pre-wrap;overflow-wrap:anywhere}
.profileGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.profileDirectory .mini strong{display:block}
.messenger{display:grid;grid-template-columns:280px 1fr;gap:12px;min-height:560px}
.chatPeople{border-right:1px solid #e5e7eb;padding-right:10px}
.chatPerson{width:100%;text-align:left;background:#fff;border:1px solid #e5e7eb;margin:5px 0}
.chatPerson.active{background:#eef2ff;border-color:#c7d2fe}
.newMessagePanel{margin:10px 0;padding:10px;border:1px solid #e5e7eb;border-radius:10px;background:#f8fafc}
.newMessageResult{width:100%;text-align:left;background:#fff;border:1px solid #e5e7eb;margin:5px 0}
.chatWindow{display:flex;flex-direction:column;min-height:520px}
.chatHeader{padding-bottom:10px;border-bottom:1px solid #e5e7eb}
.chatMessages{flex:1;overflow:auto;max-height:430px;padding:12px 2px}
.bubbleRow{display:flex;margin:7px 0}.bubbleRow.mine{justify-content:flex-end}
.bubble{max-width:78%;padding:9px 12px;border-radius:15px;background:#f3f4f6;white-space:pre-wrap;overflow-wrap:anywhere}
.bubbleRow.mine .bubble{background:#111827;color:#fff}
.bubbleTime{font-size:10px;opacity:.65;margin-top:4px}.readReceipt{font-size:10px;opacity:.72;margin-top:3px;text-align:right}
.chatComposer{display:flex;gap:8px;border-top:1px solid #e5e7eb;padding-top:10px}
.chatComposer textarea{min-height:48px;max-height:110px}
.announcementItem{padding:14px;border:1px solid #e5e7eb;border-radius:12px;margin:10px 0;background:#fff}
.announcementHeader{display:flex;gap:9px;align-items:center;margin-bottom:8px}
.avatarCircle{width:38px;height:38px;border-radius:50%;background:#e5e7eb;display:flex;align-items:center;justify-content:center;font-weight:700}
.announcementText{font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere;margin:9px 0 10px}
.announcementActions{display:flex;gap:8px;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb;padding:7px 0;margin-top:8px}
.announcementActions button{background:transparent;padding:6px 8px}
.replyList{margin-top:8px}
.replyItem{display:flex;gap:8px;margin:8px 0}
.replyBubble{background:#f3f4f6;border-radius:14px;padding:8px 11px;max-width:85%}
.replyBubble strong{display:block;font-size:12px}
.replyTime{font-size:10px;color:#6b7280;margin-top:3px}
.replyComposer{display:flex;gap:8px;margin-top:9px}
.replyComposer input{flex:1}
.showRepliesBtn{background:transparent!important;color:#374151;padding:4px 0!important;font-size:12px}
.contactCard{padding:10px;border:1px solid #e5e7eb;border-radius:10px;margin:7px 0}
@media(max-width:750px){.messenger{grid-template-columns:1fr;min-height:auto}.chatPeople{border-right:0;padding-right:0}.chatWindow{min-height:430px}}
@media(max-width:650px){.profileGrid{grid-template-columns:1fr}}
:root{
--qx-teal:#005b5f;
--qx-teal-2:#0d6f72;
--qx-mint:#e7f3f2;
--qx-bg:#f4f7f8;
--qx-panel:#ffffff;
--qx-line:#dfe7e8;
--qx-text:#173238;
--qx-muted:#6a7f83;
--qx-warn:#fff4d6;
--qx-danger:#b42318;
--qx-shadow:0 2px 10px rgba(20,52,58,.08);
}
body{background:var(--qx-bg);color:var(--qx-text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
#app{min-height:100vh;background:var(--qx-bg)}
header{
background:var(--qx-teal)!important;color:#fff!important;border:0!important;
padding:0 18px!important;min-height:64px;display:flex;align-items:center;gap:14px;
box-shadow:0 1px 0 rgba(0,0,0,.08);position:sticky;top:0;z-index:50
}
header h1{font-size:18px!important;margin:0!important;color:#fff}
header .light,#who{color:#d7ecec!important;font-size:12px}
header .tabs{display:flex;gap:2px;flex:1;overflow:auto;align-self:stretch}
header .tab{
border:0!important;background:transparent!important;color:#d7ecec!important;border-radius:0!important;
padding:0 14px!important;min-height:64px;font-weight:600;white-space:nowrap;position:relative
}
header .tab.active{color:#fff!important;background:rgba(255,255,255,.08)!important}
header .tab.active:after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:3px;background:#fff;border-radius:3px 3px 0 0}
header .secondary{background:transparent!important;color:#fff!important;border:1px solid rgba(255,255,255,.28)!important}
main{max-width:none!important;padding:14px 18px 28px!important}
.card{
background:var(--qx-panel)!important;border:1px solid var(--qx-line)!important;border-radius:6px!important;
box-shadow:var(--qx-shadow)!important
}
.toolbar{gap:8px!important}
button{border-radius:4px!important;font-weight:600!important}
button.primary,.primary{background:var(--qx-teal)!important;border-color:var(--qx-teal)!important;color:#fff!important}
button.primary:hover{background:var(--qx-teal-2)!important}
button.secondary,.secondary{background:#fff!important;border:1px solid #b9c8ca!important;color:var(--qx-text)!important}
button.accent,.accent{background:#f0f7f6!important;border:1px solid #9cc5c4!important;color:var(--qx-teal)!important}
input,select,textarea{border:1px solid #b9c8ca!important;border-radius:4px!important;background:#fff!important}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(13,111,114,.18)!important;border-color:var(--qx-teal-2)!important}
.badge{border-radius:999px!important;background:#edf4f4!important;color:#36565b!important;border:1px solid #d8e4e5!important}
.tabBadge{background:#ffd45b!important;color:#463600!important;min-width:18px!important;height:18px!important;border-radius:9px!important}
.grid{border-radius:4px!important;border:1px solid var(--qx-line)!important;background:#fff}
.schedule{background:#fff!important}
.schedule th{background:#f7f9f9!important;color:#50666a!important;font-size:12px!important;border-bottom:1px solid var(--qx-line)!important}
.schedule td{border-right:1px solid #edf1f1!important;border-bottom:1px solid #edf1f1!important}
.schedule td:first-child,.schedule th:first-child{background:#fbfcfc!important}
.dropcell{background:#fff}
.dropcell.unavailableCell{background:#f1f4f4!important}
.shift{
border-radius:3px!important;border-left:4px solid var(--qx-teal)!important;background:#edf7f6!important;
box-shadow:none!important;padding:6px 7px!important
}
.shift.warning,.warning{background:#fff3f2!important;border-left-color:#d92d20!important}
/* v5.170 — compact publication status for manager calendar */
.schedulePublishLegend{display:inline-flex;align-items:center;gap:10px;padding:0!important;border:0!important;background:transparent!important;color:var(--qx-muted)!important;font-size:11px;font-weight:600;white-space:nowrap}
.schedulePublishLegendItem{display:inline-flex;align-items:center;gap:5px}
.schedulePublishLegendDot{width:7px;height:7px;border-radius:50%;display:inline-block}
.schedulePublishLegendDot.published{background:#22a06b}
.schedulePublishLegendDot.draft{background:#aab6b8}
.schedulePublishLine{display:block;height:3px;border-radius:999px;margin:6px auto -1px;width:72%;min-width:24px;opacity:.95}
.schedulePublishLine.published{background:#22a06b}
.schedulePublishLine.unpublished{background:#c7d0d2}
body.theme-dark .schedulePublishLegendDot.published,body.theme-dark .schedulePublishLine.published{background:#53c795}
body.theme-dark .schedulePublishLegendDot.draft,body.theme-dark .schedulePublishLine.unpublished{background:#66757a}
/* Schedule status colors */
.shift.shiftAssigned{background:#ecfdf3!important;border-color:#86d5a5!important;border-left-color:#239b56!important}
.shift.shiftGivingAway{background:#fff8d8!important;border-color:#ead36a!important;border-left-color:#d4a900!important}
.shift.shiftPendingSwap{background:#eaf3ff!important;border-color:#8eb9ee!important;border-left-color:#3478c7!important}
.shift.shiftClaimedGrabbed{background:#fff0df!important;border-color:#efb06d!important;border-left-color:#e47a18!important}
.shift.shiftOpenNeutral{background:#fff!important;border-color:#c9d3d5!important;border-left-color:#9aa9ac!important;border-style:dashed!important}
.scheduleColorLegend{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:8px 0 12px;font-size:12px;color:var(--qx-muted)}
.scheduleColorLegend span{display:inline-flex;align-items:center;gap:5px}
.scheduleColorDot{width:11px;height:11px;border-radius:3px;border:1px solid rgba(0,0,0,.12);display:inline-block}
.scheduleColorDot.assigned{background:#ecfdf3}.scheduleColorDot.giveaway{background:#fff8d8}.scheduleColorDot.swap{background:#eaf3ff}.scheduleColorDot.claimed{background:#fff0df}
.scheduleToolbar{margin-bottom:10px}
.scheduleToolbar #week{white-space:nowrap}
#scheduleView>.card{padding-top:12px}
#scheduleView .scheduleColorLegend{margin-top:0}
.kpis{gap:10px!important}
.kpi{border-radius:6px!important;border:1px solid var(--qx-line)!important;background:#fff!important;box-shadow:none!important}
.kpi strong{color:var(--qx-text)!important}
.muted{color:var(--qx-muted)!important}
.mini{border-radius:5px!important;background:#fafcfc!important;border:1px solid var(--qx-line)!important}
.requestNotification{border-radius:5px!important}
.requestNotification.unread{border-left-color:var(--qx-teal)!important;background:#f1f8f7!important}
.messenger{grid-template-columns:300px 1fr!important}
.chatPeople{background:#fbfcfc;border-right:1px solid var(--qx-line)!important;padding:12px!important}
.chatPerson{
border:0!important;border-bottom:1px solid #edf1f1!important;border-radius:0!important;margin:0!important;
padding:12px 8px!important;background:transparent!important
}
.chatPerson:hover{background:#f1f6f6!important}
.chatPerson.active{background:#e7f3f2!important;border-left:3px solid var(--qx-teal)!important}
.chatWindow{padding:12px!important;background:#fff}
.chatHeader{background:#fff!important}
.bubble{border-radius:14px!important;background:#eef2f2!important}
.bubbleRow.mine .bubble{background:var(--qx-teal)!important;color:#fff!important}
.announcementItem{border-radius:6px!important;box-shadow:none!important;border:1px solid var(--qx-line)!important}
.avatarCircle{background:#dbeceb!important;color:var(--qx-teal)!important}
.replyBubble{background:#f2f5f5!important}
.profileGrid{gap:12px!important}
.contactCard{border-radius:5px!important;background:#fff!important}
dialog{border:0!important;border-radius:8px!important;box-shadow:0 24px 60px rgba(0,0,0,.2)!important}
dialog::backdrop{background:rgba(19,39,43,.35)!important}
@media(max-width:850px){
header{flex-wrap:wrap;padding:8px 10px!important}
header .tabs{order:3;width:100%;min-height:48px}
header .tab{min-height:48px;padding:0 10px!important}
main{padding:10px!important}
}
.headerSpacer{flex:1}
.menuToggle{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.08)!important;color:#fff!important;border:1px solid rgba(255,255,255,.28)!important;padding:9px 12px!important;border-radius:5px!important;position:relative}
.menuToggle:hover{background:rgba(255,255,255,.14)!important}
.menuBadge{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:#ffd45b;color:#463600;font-size:11px;font-weight:800}
.navBackdrop{position:fixed;inset:0;background:rgba(17,35,38,.34);z-index:89}
.sideNav{position:fixed;top:0;right:0;bottom:0;width:min(340px,88vw);background:#fff;z-index:90;box-shadow:-14px 0 35px rgba(18,44,48,.18);transform:translateX(105%);transition:transform .22s ease;display:flex;flex-direction:column}
.sideNav.open{transform:translateX(0)}
.sideNavHeader{display:flex;align-items:center;gap:10px;padding:18px;border-bottom:1px solid var(--qx-line);min-height:72px}
.sideNavHeader>div:first-child{flex:1}
.sideNavClose{width:38px;height:38px;padding:0!important;border:0!important;background:#f0f4f4!important;color:#29474c!important;font-size:28px!important;line-height:1!important}
.sideNav .tabs.sideTabs{display:flex!important;flex-direction:column!important;gap:2px!important;overflow:auto!important;align-self:stretch!important;padding:10px!important;min-height:0!important;flex:1!important}
.sideNav .tab{width:100%!important;min-height:48px!important;padding:0 12px!important;text-align:left!important;display:flex!important;align-items:center!important;gap:8px!important;border-radius:5px!important;color:#29474c!important;background:transparent!important;border:0!important;position:relative}
.sideNav .tab:hover{background:#f0f6f5!important}
.sideNav .tab.active{background:#e7f3f2!important;color:var(--qx-teal)!important}
.sideNav .tab.active:after{content:"";position:absolute!important;left:0!important;top:8px!important;bottom:8px!important;width:3px!important;height:auto!important;background:var(--qx-teal)!important;border-radius:0 3px 3px 0!important}
.sideNav .tab .tabBadge{margin-left:auto!important;position:static!important}
.sideNavFooter{border-top:1px solid var(--qx-line);padding:14px}
.sideUser{font-size:12px;color:var(--qx-muted);margin-bottom:10px;white-space:pre-line}
.sideLogout{width:100%}
body.navOpen{overflow:hidden}
@media(max-width:850px){header{flex-wrap:nowrap!important}.menuToggle span:not(.menuBadge){display:none}}
.legacyNavNotificationBtn{display:flex;align-items:center;gap:4px;min-height:38px;padding:7px 9px!important;background:#f0f6f5!important;color:var(--qx-teal)!important;border:1px solid #d5e4e3!important;border-radius:5px!important;white-space:nowrap}
.legacyNavNotificationBtn:hover{background:#e4f1f0!important}
.legacyNavLogout{min-height:38px;padding:7px 10px!important;white-space:nowrap}
.sideNavHeader{padding:14px!important}
.sideNavHeader>div:first-child{min-width:0}
@media(max-width:420px){
.sideNavHeader{gap:6px!important}
.legacyNavLogout{font-size:12px!important;padding:7px 8px!important}
.legacyNavNotificationBtn{padding:7px!important}
}
.notificationBellWrap{position:relative}
.notificationDropdown{
position:absolute;top:46px;right:0;width:min(390px,calc(100vw - 28px));max-height:520px;background:#fff;
border:1px solid var(--qx-line);border-radius:10px;box-shadow:0 18px 45px rgba(18,44,48,.22);
z-index:120;overflow:hidden;color:var(--qx-text)
}
.notificationDropdownHead{display:flex;align-items:center;padding:13px 14px;border-bottom:1px solid var(--qx-line);background:#fff}
.notificationDropdownHead strong{font-size:17px}
.notificationClearAll{margin-left:auto;background:transparent!important;border:0!important;color:var(--qx-muted)!important;padding:4px!important;font-size:11px;font-weight:600}
.notificationClearAll:hover{color:var(--qx-teal)!important;text-decoration:underline}
.notificationDropdownList{max-height:450px;overflow:auto;padding:6px}
.notificationDropdownFooter{display:flex;justify-content:center;border-top:1px solid var(--qx-line);background:#fff;padding:7px 10px}
.notificationSeeAll{background:transparent!important;border:0!important;color:var(--qx-teal)!important;padding:5px 10px!important;font-size:12px;font-weight:700}
.notificationDropItem{width:100%;display:flex;gap:10px;text-align:left;border:0!important;background:#fff!important;padding:10px!important;border-radius:7px!important;margin:1px 0!important}
.notificationDropItem:hover{background:#f1f6f6!important}
.notificationDropItem.unread{background:#edf7f6!important}
.notificationDropIcon{width:38px;height:38px;flex:0 0 38px;border-radius:50%;background:#dceceb;display:flex;align-items:center;justify-content:center;font-size:17px}
.notificationDropBody{min-width:0;flex:1}
.notificationDropTitle{font-size:13px;font-weight:700;line-height:1.25}
.notificationDropMeta{font-size:12px;color:var(--qx-muted);margin-top:3px;line-height:1.3}
.notificationDropUnread{width:8px;height:8px;border-radius:50%;background:var(--qx-teal);align-self:center;flex:0 0 8px}
.notificationEmpty{padding:24px 12px;text-align:center;color:var(--qx-muted);font-size:13px}
@media(max-width:520px){
.notificationDropdown{position:fixed;top:72px;right:10px;left:10px;width:auto;max-height:70vh}
.notificationDropdownList{max-height:calc(70vh - 94px)}
}
.topActions{display:flex;align-items:center;gap:8px}
.topNotificationBtn{
display:flex;align-items:center;gap:4px;min-height:38px;padding:7px 10px!important;
background:rgba(255,255,255,.08)!important;color:#fff!important;
border:1px solid rgba(255,255,255,.28)!important;border-radius:5px!important
}
.topNotificationBtn:hover{background:rgba(255,255,255,.14)!important}
.topLogout{
min-height:38px;padding:7px 12px!important;background:rgba(255,255,255,.08)!important;
color:#fff!important;border:1px solid rgba(255,255,255,.28)!important;border-radius:5px!important
}
.topLogout:hover{background:rgba(255,255,255,.14)!important}
.sideNav{
left:0!important;right:auto!important;
box-shadow:14px 0 35px rgba(18,44,48,.18)!important;
transform:translateX(-105%)!important
}
.sideNav.open{transform:translateX(0)!important}
.notificationDropdown{right:0!important;left:auto!important}
@media(max-width:850px){
.topActions{gap:6px}
.topLogout{padding:7px 9px!important}
}
@media(max-width:520px){
header{gap:8px!important}
header h1{font-size:15px!important}
.topLogout{font-size:12px!important}
.topNotificationBtn{padding:7px 8px!important}
}
#profileForm input:disabled,#profileForm textarea:disabled{
background:#f3f6f6!important;color:#536a6e!important;cursor:not-allowed
}
.editProfileBtn{white-space:nowrap}
.profilePhotoRow{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px}
.profilePhotoPreview{width:82px;height:82px;flex:0 0 82px;border-radius:50%;background:#e5efef;border:1px solid var(--qx-line);display:flex;align-items:center;justify-content:center;font-size:34px;overflow:hidden}
.profilePhotoPreview img{width:100%;height:100%;object-fit:cover}
.contactIdentity{display:flex;gap:10px;align-items:center}
.contactAvatar{width:44px;height:44px;flex:0 0 44px;border-radius:50%;background:#e5efef;display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:18px}
.contactAvatar img{width:100%;height:100%;object-fit:cover}
#employeeDlg{width:min(760px,94vw)}
.employeeContactSection{margin-top:14px}
.employeeContactSection textarea{min-height:72px}
.privateEmploymentSection{margin-top:16px;border:1px solid var(--qx-line);background:#f8fbfb}
.privateEmploymentSection input:disabled{font-weight:600;background:#fff!important;color:var(--qx-text)!important}
.defaultProfileSilhouette{width:100%;height:100%;display:block}
.photoEditorDlg{width:min(92vw,460px)}
.photoCropStage{width:min(78vw,340px);height:min(78vw,340px);max-width:340px;max-height:340px;margin:16px auto;overflow:hidden;border-radius:50%;position:relative;background:#e4e6eb;touch-action:none;cursor:grab;box-shadow:inset 0 0 0 2px rgba(0,0,0,.08)}
.photoCropStage:active{cursor:grabbing}
.photoCropStage img{position:absolute;left:50%;top:50%;max-width:none;max-height:none;user-select:none;-webkit-user-drag:none;pointer-events:none;transform-origin:center center}
.photoEditorDlg input[type="range"]{width:100%}
.dashboardGrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}
.dashboardHero{grid-column:span 12}.dashboardToday{grid-column:span 7}.dashboardHours{grid-column:span 5}.dashboardOpen{grid-column:span 5}.dashboardAnnouncements{grid-column:span 7}
.dashboardMetric{font-size:30px;font-weight:750;margin-top:6px}
.dashboardShiftItem,.dashboardOpenItem{padding:10px 0;border-bottom:1px solid var(--qx-line)}
.dashboardShiftItem:last-child,.dashboardOpenItem:last-child{border-bottom:0}
.dashboardCardTitle{margin:0;font-size:18px}
@media(max-width:850px){.dashboardToday,.dashboardHours,.dashboardOpen,.dashboardAnnouncements{grid-column:span 12}}
.contractFileRow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--qx-line)}
.contractFileRow:last-child{border-bottom:0}
.contractFileMeta{min-width:0;flex:1}
.contractFileName{font-weight:600;word-break:break-word}
.contractFileActions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.buttonLike{display:inline-flex;align-items:center;text-decoration:none;padding:7px 10px;border-radius:8px;border:1px solid var(--qx-line);background:#fff;color:var(--qx-text);font:inherit;cursor:pointer}
.workLocationDialog{width:min(720px,94vw)}
.locationSearchWrap{position:relative}
.locationResults{position:absolute;z-index:1005;left:0;right:0;top:100%;background:#fff;border:1px solid var(--qx-line);border-radius:8px;max-height:210px;overflow-y:auto;margin-top:4px}
.locationResult{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--qx-line);background:#fff;padding:10px;cursor:pointer;font:inherit}
.locationResult:last-child{border-bottom:0}
.locationResult:hover{background:#f4f8f8}
.workLocationMap{height:310px;border:1px solid var(--qx-line);border-radius:10px;overflow:hidden;margin-top:10px;background:#eef3f3}
.locationPickerStatus{margin-top:7px;min-height:18px}
@media(max-width:600px){.workLocationMap{height:260px}}
.sideNavIdentityRow{display:flex;align-items:center;gap:11px;min-width:0}
.sideNavIdentity{min-width:0;display:flex;flex-direction:column;gap:3px}
.sideNavAvatar{width:46px;height:46px;flex:0 0 46px;border-radius:50%;border:1px solid var(--qx-line);background:#e5efef;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0;font-size:22px;cursor:pointer}
.sideNavAvatar img{width:100%;height:100%;object-fit:cover;display:block}
#sideNavUserName{font-size:20px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.sideProfileLink{border:0;background:transparent;padding:0;color:var(--qx-accent);text-align:left;font:inherit;font-size:13px;cursor:pointer;width:max-content;min-height:auto}
.sideProfileLink:hover{text-decoration:underline}
.sideProfileLink:focus-visible{outline:2px solid var(--qx-accent);outline-offset:3px;border-radius:3px}
.pullRefreshIndicator{
position:fixed;
top:8px;
left:50%;
transform:translate(-50%,-70px);
z-index:3000;
min-width:132px;
padding:9px 14px;
border-radius:999px;
background:#ffffff;
border:1px solid #d7e0e2;
box-shadow:0 8px 24px rgba(0,0,0,.14);
font-size:12px;
font-weight:700;
text-align:center;
pointer-events:none;
opacity:0;
transition:transform .16s ease,opacity .16s ease;
}
.pullRefreshIndicator.visible{
opacity:1;
}
.pullRefreshIndicator.refreshing{
transform:translate(-50%,0)!important;
}
.pullRefreshSpinner{
display:inline-block;
margin-right:6px;
}
.pullRefreshIndicator.refreshing .pullRefreshSpinner{
animation:pullRefreshSpin .8s linear infinite;
}
@keyframes pullRefreshSpin{to{transform:rotate(360deg)}}
/* v5.469 Settings administration hub */
.settingsHubHead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}.settingsHubHead h2{margin:0 0 4px}.settingsHubGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.settingsHubCard{appearance:none;width:100%;min-height:88px;display:grid;grid-template-columns:42px 1fr 20px;align-items:center;gap:12px;text-align:left;background:var(--card,#fff);color:inherit;border:1px solid #e5e7eb;border-radius:14px;padding:16px;cursor:pointer;box-shadow:0 1px 2px rgba(15,23,42,.03)}.settingsHubCard:hover{border-color:#94a3b8;transform:translateY(-1px)}.settingsHubCard>span:nth-child(2){display:flex;flex-direction:column;gap:4px}.settingsHubCard small{color:#64748b;font-weight:500;line-height:1.35}.settingsHubCard>b{font-size:24px;color:#94a3b8;font-weight:500}.settingsHubIcon{width:38px;height:38px;border-radius:10px;background:#f1f5f9;display:grid;place-items:center;font-size:11px;font-weight:800;letter-spacing:.03em}.settingsHubDanger .settingsHubIcon{background:#fef2f2;color:#b91c1c}.settingsHubFoot{margin-top:14px;font-size:12px}.settingsHubDlg{width:min(720px,calc(100vw - 24px));max-height:min(820px,calc(100vh - 24px));padding:0;border:0;border-radius:16px;overflow:hidden}.settingsHubDlg::backdrop{background:rgba(15,23,42,.48)}.settingsModalHead,.settingsModalFoot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid #e5e7eb}.settingsModalHead h3{margin:2px 0 0}.settingsModalFoot{border-top:1px solid #e5e7eb;border-bottom:0;justify-content:flex-end}.settingsModalBody{padding:18px;overflow:auto;max-height:calc(100vh - 190px)}.settingsPanel{display:none}.settingsPanel.active{display:block}.settingsSection{border:1px solid #e5e7eb;border-radius:14px;padding:16px;margin-bottom:12px}.settingsSection h4{margin:0 0 14px}.fieldHelp{margin-top:6px;font-size:12px}.settingValueRow,.protectedRule{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid #e5e7eb}.settingValueRow:last-child,.protectedRule:last-child{border-bottom:0}.settingValueRow span,.protectedRule div{display:flex;flex-direction:column;gap:3px}.settingValueRow small,.protectedRule small{color:#64748b;font-weight:500}.protectedRule>span{flex:0 0 26px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#ecfdf5;color:#047857;font-weight:800}.protectedRule>div{flex:1}.protectedRule em{font-size:11px;font-style:normal;font-weight:700;color:#047857;background:#ecfdf5;padding:5px 8px;border-radius:999px;white-space:nowrap}.dangerPanel{border-color:#fecaca;background:#fffafa}.dangerPanel h4{color:#b91c1c}body.theme-dark .settingsHubCard,body.theme-dark .settingsSection{border-color:#475569;background:#1e293b}body.theme-dark .settingsHubIcon{background:#334155}body.theme-dark .settingsModalHead,body.theme-dark .settingsModalFoot,body.theme-dark .settingValueRow,body.theme-dark .protectedRule{border-color:#475569}body.theme-dark .settingsHubDlg{background:#0f172a;color:#e2e8f0}body.theme-dark .dangerPanel{background:#2a1720;border-color:#7f1d1d}@media(max-width:700px){.settingsHubGrid{grid-template-columns:1fr}.settingsHubCard{min-height:78px;padding:13px}.settingsHubDlg{width:calc(100vw - 12px);max-height:calc(100vh - 12px)}.settingsModalBody{padding:12px}.settingsSection{padding:14px}.protectedRule{align-items:flex-start;flex-wrap:wrap}.protectedRule em{margin-left:40px}}
/* v5.35 personal settings */
body.theme-dark{background:#111827;color:#e5e7eb}
body.theme-dark main{color:#e5e7eb}
body.theme-dark .card,body.theme-dark .mini,body.theme-dark .schedule,body.theme-dark .schedule td,
body.theme-dark .schedule td:first-child,body.theme-dark .staffingDay,body.theme-dark .staffingBlock,
body.theme-dark .notificationDropdown,body.theme-dark .notificationDropdownHead,body.theme-dark .notificationDropdownFooter,
body.theme-dark .notificationDropItem{background:#1f2937!important;color:#e5e7eb!important;border-color:#374151!important}
body.theme-dark .schedule th,body.theme-dark .staffingDayHead{background:#111827!important;color:#cbd5e1!important;border-color:#374151!important}
body.theme-dark input,body.theme-dark select,body.theme-dark textarea{background:#111827;color:#e5e7eb;border-color:#4b5563}
body.theme-dark .muted{color:#9ca3af!important}
body.theme-dark .secondary{background:#374151;color:#f9fafb}
body[data-accent="teal"]{--user-accent:#0f766e}body[data-accent="blue"]{--user-accent:#2563eb}
body[data-accent="purple"]{--user-accent:#7c3aed}body[data-accent="green"]{--user-accent:#15803d}
body[data-accent="orange"]{--user-accent:#c2410c}
body[data-accent] .primary{background:var(--user-accent)!important}
body[data-accent] .sideNav .tab.active{color:var(--user-accent)!important}
body[data-accent] .sideNav .tab.active:after{background:var(--user-accent)!important}
body.compact-ui .card{padding:10px}body.compact-ui main{padding:9px}body.compact-ui .toolbar{margin-bottom:8px}
.settingsGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.settingsSwitch{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #e5e7eb}
.settingsSwitch input{width:auto}.settingsSwitch:last-child{border-bottom:0}.settingsCard h3{margin-top:0}
@media(max-width:700px){.settingsGrid{grid-template-columns:1fr}}
/* v5.36 dark theme readability fixes */
body.theme-dark{background:#0f172a!important;color:#f8fafc!important}
body.theme-dark header{background:#0f4f49!important;color:#fff!important}
body.theme-dark main,body.theme-dark h1,body.theme-dark h2,body.theme-dark h3,
body.theme-dark strong,body.theme-dark label{color:#f8fafc}
body.theme-dark .card,body.theme-dark .mini,body.theme-dark .kpi,
body.theme-dark .staffingSummaryCard{background:#1e293b!important;color:#f8fafc!important;border-color:#475569!important}
body.theme-dark .muted,body.theme-dark .light{color:#cbd5e1!important;opacity:1!important}
body.theme-dark .grid{border-color:#475569!important;background:#0f172a!important}
body.theme-dark .schedule{background:#0f172a!important;color:#f8fafc!important}
body.theme-dark .schedule th{background:#1e293b!important;color:#f8fafc!important;border-color:#475569!important}
body.theme-dark .schedule td,
body.theme-dark .schedule td:first-child{background:#111c2e!important;color:#f8fafc!important;border-color:#334155!important}
body.theme-dark .schedule td:first-child strong{color:#fff!important}
body.theme-dark .schedule td:first-child .muted{color:#cbd5e1!important}
body.theme-dark .dropcell{color:#f8fafc!important}
body.theme-dark .shift{color:#172033!important}
body.theme-dark .shift .muted{color:#475569!important}
body.theme-dark .shift.shiftAssigned{background:#d9fbe8!important;color:#123524!important;border-color:#5cc58b!important}
body.theme-dark .shift.shiftAssigned .muted{color:#315b45!important}
body.theme-dark .shift.shiftGivingAway{background:#fff1a8!important;color:#473b00!important;border-color:#d4a900!important}
body.theme-dark .shift.shiftGivingAway .muted{color:#665700!important}
body.theme-dark .shift.shiftPendingSwap{background:#dbeafe!important;color:#163b69!important;border-color:#60a5fa!important}
body.theme-dark .shift.shiftPendingSwap .muted{color:#315d8e!important}
body.theme-dark .shift.shiftClaimedGrabbed{background:#ffdfbd!important;color:#5b2d00!important;border-color:#fb923c!important}
body.theme-dark .shift.shiftClaimedGrabbed .muted{color:#7c430c!important}
body.theme-dark .shift.shiftOpenNeutral{background:#f8fafc!important;color:#1e293b!important;border-color:#94a3b8!important}
body.theme-dark .shift.shiftOpenNeutral .muted{color:#475569!important}
body.theme-dark .shift.warningShift{background:#fee2e2!important;color:#7f1d1d!important}
body.theme-dark .shift.warningShift .muted{color:#991b1b!important}
body.theme-dark .dropcell.unavailableCell,body.theme-dark .dropcell.leaveCell{background:#4c1d24!important}
body.theme-dark .calendarLeaveLabel{background:#7f1d1d!important;color:#fff!important}
body.theme-dark input,body.theme-dark select,body.theme-dark textarea{
background:#0f172a!important;color:#f8fafc!important;border-color:#64748b!important
}
body.theme-dark input::placeholder,body.theme-dark textarea::placeholder{color:#94a3b8!important}
body.theme-dark .secondary{background:#334155!important;color:#f8fafc!important;border:1px solid #64748b!important}
body.theme-dark .warning{background:#422006!important;color:#ffedd5!important;border-color:#9a3412!important}
body.theme-dark .good{background:#052e16!important;color:#dcfce7!important;border-color:#166534!important}
body.theme-dark .badge{background:#334155!important;color:#f8fafc!important}
body.theme-dark .settingsSwitch{border-color:#475569!important}
body.theme-dark .notificationDropTitle,body.theme-dark .notificationDropBody{color:#f8fafc!important}
body.theme-dark .notificationDropItem.unread{background:#164e63!important}
body.theme-dark .sideNav{background:#111827!important;color:#f8fafc!important}
body.theme-dark .sideNav .tab{color:#e5e7eb!important}
body.theme-dark .sideNav .tab.active{background:#263548!important}
/* v5.37 dark theme high-contrast pass */
body.theme-dark .kpi strong,
body.theme-dark .dashboardMetric{
color:#ffffff!important;
opacity:1!important;
text-shadow:none!important;
}
body.theme-dark .kpi .muted{
color:#dbe4ee!important;
font-weight:600!important;
}
body.theme-dark .scheduleColorLegend{
color:#e2e8f0!important;
}
body.theme-dark .scheduleColorLegend *{
opacity:1!important;
}
/* Dark-mode shift cards use dark tinted surfaces + light text.
This avoids white text being placed on pale status backgrounds. */
body.theme-dark .shift,
body.theme-dark .shift strong,
body.theme-dark .shift span,
body.theme-dark .shift .muted{
opacity:1!important;
}
body.theme-dark .shift.shiftAssigned{
background:#123c2b!important;
color:#ffffff!important;
border-color:#34d399!important;
border-left-color:#34d399!important;
}
body.theme-dark .shift.shiftAssigned strong,
body.theme-dark .shift.shiftAssigned .muted{
color:#ffffff!important;
}
body.theme-dark .shift.shiftGivingAway{
background:#4b3d08!important;
color:#ffffff!important;
border-color:#facc15!important;
border-left-color:#facc15!important;
}
body.theme-dark .shift.shiftGivingAway strong,
body.theme-dark .shift.shiftGivingAway .muted{
color:#ffffff!important;
}
body.theme-dark .shift.shiftPendingSwap{
background:#15345d!important;
color:#ffffff!important;
border-color:#60a5fa!important;
border-left-color:#60a5fa!important;
}
body.theme-dark .shift.shiftPendingSwap strong,
body.theme-dark .shift.shiftPendingSwap .muted{
color:#ffffff!important;
}
body.theme-dark .shift.shiftClaimedGrabbed{
background:#5a2d0c!important;
color:#ffffff!important;
border-color:#fb923c!important;
border-left-color:#fb923c!important;
}
body.theme-dark .shift.shiftClaimedGrabbed strong,
body.theme-dark .shift.shiftClaimedGrabbed .muted{
color:#ffffff!important;
}
body.theme-dark .shift.shiftOpenNeutral{
background:#253347!important;
color:#ffffff!important;
border-color:#94a3b8!important;
border-left-color:#94a3b8!important;
}
body.theme-dark .shift.shiftOpenNeutral strong,
body.theme-dark .shift.shiftOpenNeutral .muted{
color:#ffffff!important;
}
/* Keep warning shifts readable even when the generic dark strong rule applies. */
body.theme-dark .shift.warningShift,
body.theme-dark .shift.warningShift strong,
body.theme-dark .shift.warningShift .muted{
color:#ffffff!important;
}
body.theme-dark .shift.warningShift{
background:#641e24!important;
border-color:#f87171!important;
}
/* Calendar row labels and dates */
body.theme-dark .schedule th,
body.theme-dark .schedule th *,
body.theme-dark .schedule td:first-child,
body.theme-dark .schedule td:first-child *{
color:#ffffff!important;
opacity:1!important;
}
/* Stronger contrast for budget/status values that may carry inline/helper classes */
body.theme-dark #kpis strong,
body.theme-dark #kpis .kpi strong,
body.theme-dark #kpis [class*="warning"],
body.theme-dark #kpis [class*="budget"]{
color:#ffffff!important;
opacity:1!important;
}
/* v5.66 production ad slots */
.wmAdSlot{display:none;margin-bottom:0;overflow:hidden}
.wmAdSlot.is-ready{display:block}
/* v5.398: reserve no vertical space until AdSense confirms a filled ad. */
.wmAdSlot.is-ready:not(.is-filled){height:0!important;min-height:0!important;padding:0!important;border:0!important;margin:0!important;overflow:hidden!important}
.wmAdSlot.is-ready:not(.is-filled) .wmAdFrame,.wmAdSlot.is-ready:not(.is-filled) ins.adsbygoogle{height:0!important;min-height:0!important;max-height:0!important;margin:0!important;padding:0!important;overflow:hidden!important}
.wmAdSlot.is-filled{margin-bottom:12px}
.wmAdSlot.is-filled .wmAdFrame{min-height:90px;display:flex;align-items:center;justify-content:center}
.wmAdSlot.is-filled ins.adsbygoogle{display:block;width:100%;min-height:90px}
@media(max-width:600px){.wmAdSlot.is-filled .wmAdFrame,.wmAdSlot.is-filled ins.adsbygoogle{min-height:60px}}
body.theme-dark .wmAdSlot{background:#1e293b!important;border-color:#475569!important}
/* v5.38 Plans layout */
.plansPage{max-width:1050px;margin:0 auto;padding:8px 0 28px}
.plansHeader{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:14px}
.plansHeader h2{margin:0 0 4px;font-size:28px}
.currentPlanCard{background:linear-gradient(135deg,#f8fafc,#eef6f5);border:1px solid #d7e5e3;border-radius:14px;padding:14px 16px;margin-bottom:22px}
.currentPlanLabel{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#64748b;margin-bottom:4px}
.currentPlanCard #currentPlanSummary h3{margin:0 0 4px;font-size:18px}
.planCards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
.planCard{position:relative;background:#fff;border:1px solid #dfe5e7;border-radius:18px;padding:22px;display:flex;flex-direction:column;min-height:430px;box-shadow:0 8px 22px rgba(15,23,42,.05)}
.planCard.featuredPlan{border:2px solid var(--user-accent,#0f766e);transform:translateY(-6px);box-shadow:0 14px 30px rgba(15,118,110,.12)}
.popularBadge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--user-accent,#0f766e);color:#fff;border-radius:999px;padding:5px 12px;font-size:11px;font-weight:800;white-space:nowrap}
.planCard h3{margin:0 0 14px;font-size:20px}
.planPrice{display:flex;align-items:baseline;gap:5px;min-height:55px}
.planPrice .currency{font-size:12px;font-weight:800;color:#64748b}
.planPrice strong{font-size:38px;line-height:1}
.planPrice .period{font-size:13px;color:#64748b}
.planPriceMeta{font-size:12px;color:#64748b;margin-top:6px}
.planFeatures{list-style:none;padding:0;margin:24px 0 20px;display:grid;gap:12px;flex:1}
.planFeatures li{position:relative;padding-left:23px;font-size:14px;line-height:1.35}
.planFeatures li:before{content:"✓";position:absolute;left:0;top:0;color:var(--user-accent,#0f766e);font-weight:900}
.planButton{width:100%;min-height:44px}
.plansFootnote{text-align:center;color:#64748b;font-size:12px;margin-top:18px}
/* Plans in dark mode */
body.theme-dark .currentPlanCard{background:#172235!important;border-color:#3b4d62!important}
body.theme-dark .currentPlanLabel,body.theme-dark .planPrice .currency,body.theme-dark .planPrice .period,
body.theme-dark .planPriceMeta,body.theme-dark .plansFootnote{color:#cbd5e1!important}
body.theme-dark .planCard{background:#1e293b!important;border-color:#475569!important;color:#f8fafc!important}
body.theme-dark .planCard.featuredPlan{border-color:var(--user-accent,#14b8a6)!important}
body.theme-dark .planFeatures li{color:#f1f5f9!important}
@media(max-width:850px){
.planCards{grid-template-columns:1fr;max-width:560px;margin:0 auto}
.planCard,.planCard.featuredPlan{min-height:auto;transform:none}
.featuredPlan{order:-1}
}
@media(max-width:520px){
.plansPage{padding-top:2px}
.plansHeader h2{font-size:24px}
.planCard{padding:18px}
.planPrice strong{font-size:34px}
}
/* v5.39 prevent text caret appearing on normal app content */
#app,#app *{
caret-color:transparent;
}
#app{
cursor:default;
}
#app input,
#app textarea,
#app [contenteditable="true"]{
caret-color:auto;
cursor:text;
user-select:text;
-webkit-user-select:text;
}
#app select{
caret-color:auto;
cursor:pointer;
}
#app button,
#app a,
#app .shift,
#app [role="button"]{
cursor:pointer;
}
#app .shift[draggable="true"]{
cursor:grab;
}
#app .shift[draggable="true"]:active{
cursor:grabbing;
}
/* v5.40 comprehensive dark-theme contrast audit */
body.theme-dark{
--qx-bg:#0f172a!important;
--qx-panel:#162033!important;
--qx-line:#405066!important;
--qx-text:#f8fafc!important;
--qx-muted:#cbd5e1!important;
--qx-mint:#1f3a3a!important;
background:var(--qx-bg)!important;
color:var(--qx-text)!important;
}
body.theme-dark #app{background:var(--qx-bg)!important;color:var(--qx-text)!important}
/* General text */
body.theme-dark p,
body.theme-dark span,
body.theme-dark div,
body.theme-dark td,
body.theme-dark th,
body.theme-dark li{
border-color:var(--qx-line);
}
body.theme-dark .muted,
body.theme-dark .light,
body.theme-dark .messageMeta,
body.theme-dark .replyTime,
body.theme-dark .notificationDropMeta,
body.theme-dark .sideUser,
body.theme-dark .staffingBlockTime{
color:var(--qx-muted)!important;
opacity:1!important;
}
/* Week/date/status toolbar */
body.theme-dark #week{
color:#ffffff!important;
background:#273449!important;
border:1px solid #52637a!important;
border-radius:6px;
padding:6px 10px;
line-height:1.2;
}
body.theme-dark #status{
color:#ffffff!important;
background:#475569!important;
border-color:#64748b!important;
}
body.theme-dark .scheduleToolbar{
color:#f8fafc!important;
}
body.theme-dark .scheduleToolbar .right{
color:#f8fafc!important;
}
/* Cards and panels */
body.theme-dark .card,
body.theme-dark .mini,
body.theme-dark .kpi,
body.theme-dark .employeeDetailBox,
body.theme-dark .leaveBalanceCard,
body.theme-dark .staffingSummaryCard,
body.theme-dark .staffingDay,
body.theme-dark .staffingBlock,
body.theme-dark .announcementItem,
body.theme-dark .messageItem,
body.theme-dark .newMessagePanel,
body.theme-dark .privateEmploymentSection,
body.theme-dark .contactCard{
background:#162033!important;
color:#f8fafc!important;
border-color:#405066!important;
}
body.theme-dark .kpi strong,
body.theme-dark .dashboardMetric,
body.theme-dark .leaveBalanceCard strong{
color:#ffffff!important;
}
/* Buttons and badges */
body.theme-dark button.secondary,
body.theme-dark .secondary,
body.theme-dark .buttonLike{
background:#273449!important;
color:#f8fafc!important;
border-color:#64748b!important;
}
body.theme-dark button.accent,
body.theme-dark .accent{
background:#173b3c!important;
color:#d5fffb!important;
border-color:#3d7778!important;
}
body.theme-dark button:disabled,
body.theme-dark .planChoose:disabled{
background:#334155!important;
color:#cbd5e1!important;
border-color:#475569!important;
opacity:1!important;
}
body.theme-dark .badge{
background:#334155!important;
color:#ffffff!important;
border-color:#64748b!important;
}
/* Forms */
body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea{
background:#0f172a!important;
color:#ffffff!important;
border-color:#64748b!important;
}
body.theme-dark input:disabled,
body.theme-dark select:disabled,
body.theme-dark textarea:disabled,
body.theme-dark .privateEmploymentSection input:disabled{
background:#263244!important;
color:#e2e8f0!important;
border-color:#52637a!important;
opacity:1!important;
}
body.theme-dark option{
background:#0f172a!important;
color:#ffffff!important;
}
/* Schedule/calendar */
body.theme-dark .grid{
background:#0d1524!important;
border-color:#405066!important;
}
body.theme-dark .schedule{
background:#0d1524!important;
}
body.theme-dark .schedule th,
body.theme-dark .schedule th:first-child{
background:#202c40!important;
color:#ffffff!important;
border-color:#405066!important;
}
body.theme-dark .schedule td,
body.theme-dark .schedule td:first-child,
body.theme-dark .dropcell{
background:#111b2c!important;
color:#ffffff!important;
border-color:#344359!important;
}
body.theme-dark .schedule td:first-child *,
body.theme-dark .schedule th *,
body.theme-dark .calendarLeaveLabel{
opacity:1!important;
}
body.theme-dark .scheduleColorLegend,
body.theme-dark .scheduleColorLegend span{
color:#e2e8f0!important;
}
body.theme-dark .scheduleColorDot{
border:1px solid #94a3b8!important;
}
/* Shift cards */
body.theme-dark .shift.shiftAssigned{
background:#123c2b!important;color:#fff!important;border-color:#34d399!important;border-left-color:#34d399!important
}
body.theme-dark .shift.shiftGivingAway{
background:#4b3d08!important;color:#fff!important;border-color:#facc15!important;border-left-color:#facc15!important
}
body.theme-dark .shift.shiftPendingSwap{
background:#15345d!important;color:#fff!important;border-color:#60a5fa!important;border-left-color:#60a5fa!important
}
body.theme-dark .shift.shiftClaimedGrabbed{
background:#5a2d0c!important;color:#fff!important;border-color:#fb923c!important;border-left-color:#fb923c!important
}
body.theme-dark .shift.shiftOpenNeutral{
background:#253347!important;color:#fff!important;border-color:#94a3b8!important;border-left-color:#94a3b8!important
}
body.theme-dark .shift,
body.theme-dark .shift *,
body.theme-dark .shift .muted{
color:#ffffff!important;
opacity:1!important;
}
body.theme-dark .shift.warningShift{
background:#641e24!important;
border-color:#f87171!important;
}
/* Availability, leave, warnings */
body.theme-dark .dropcell.unavailableCell,
body.theme-dark .dropcell.leaveCell{
background:#4b2028!important;
}
body.theme-dark .dropcell.unavailableCell::after{
color:#fecaca!important;
}
body.theme-dark .calendarLeaveLabel{
background:#7f1d1d!important;
color:#ffffff!important;
}
body.theme-dark .warning{
background:#44250b!important;
color:#ffedd5!important;
border-color:#c65d17!important;
}
body.theme-dark .good{
background:#12351f!important;
color:#dcfce7!important;
border-color:#2f855a!important;
}
/* Messages */
body.theme-dark .chatPeople,
body.theme-dark .chatWindow,
body.theme-dark .chatHeader{
background:#121d2e!important;
color:#f8fafc!important;
border-color:#405066!important;
}
body.theme-dark .chatPerson,
body.theme-dark .newMessageResult{
background:#1c293c!important;
color:#f8fafc!important;
border-color:#405066!important;
}
body.theme-dark .chatPerson:hover,
body.theme-dark .chatPerson.active{
background:#254055!important;
color:#ffffff!important;
}
body.theme-dark .bubble{
background:#26354a!important;
color:#ffffff!important;
}
body.theme-dark .bubbleRow.mine .bubble{
color:#ffffff!important;
}
body.theme-dark .replyBubble{
background:#26354a!important;
color:#ffffff!important;
}
body.theme-dark .showRepliesBtn{
color:#dbeafe!important;
}
body.theme-dark .avatarCircle{
background:#334155!important;
color:#ffffff!important;
}
/* Notifications */
body.theme-dark .requestNotification,
body.theme-dark .notificationDropdown,
body.theme-dark .notificationDropdownHead,
body.theme-dark .notificationDropdownFooter,
body.theme-dark .notificationDropItem{
background:#162033!important;
color:#f8fafc!important;
border-color:#405066!important;
}
body.theme-dark .requestNotification.unread,
body.theme-dark .notificationDropItem.unread{
background:#17384a!important;
}
body.theme-dark .notificationDropItem:hover{
background:#253449!important;
}
body.theme-dark .notificationDropIcon{
background:#334155!important;
color:#ffffff!important;
}
body.theme-dark .requestNotification .nMeta{
color:#cbd5e1!important;
}
/* Side navigation */
body.theme-dark .sideNav{
background:#121d2e!important;
color:#f8fafc!important;
}
body.theme-dark .sideNavHeader,
body.theme-dark .sideNavFooter{
border-color:#405066!important;
}
body.theme-dark .sideNav .tab{
color:#e2e8f0!important;
}
body.theme-dark .sideNav .tab:hover{
background:#223046!important;
}
body.theme-dark .sideNav .tab.active{
background:#284055!important;
}
body.theme-dark .sideNavClose{
background:#26354a!important;
color:#ffffff!important;
}
body.theme-dark .sideProfileLink,
body.theme-dark .employeeNameLink{
color:#8ddad5!important;
}
/* Location search / workplace */
body.theme-dark .locationResults,
body.theme-dark .locationResult{
background:#162033!important;
color:#f8fafc!important;
border-color:#405066!important;
}
body.theme-dark .locationResult:hover{
background:#253449!important;
}
body.theme-dark .workLocationMap{
background:#1c293c!important;
border-color:#405066!important;
}
/* Plans */
body.theme-dark .currentPlanCard{
background:#172235!important;
border-color:#3b4d62!important;
}
body.theme-dark .planCard{
background:#162033!important;
color:#f8fafc!important;
border-color:#475569!important;
}
body.theme-dark .planCard h3,
body.theme-dark .planPrice strong,
body.theme-dark .planFeatures li{
color:#ffffff!important;
}
body.theme-dark .planPrice .currency,
body.theme-dark .planPrice .period,
body.theme-dark .planPriceMeta,
body.theme-dark .plansFootnote,
body.theme-dark .currentPlanLabel{
color:#cbd5e1!important;
}
/* Dialogs */
body.theme-dark dialog{
background:#162033!important;
color:#f8fafc!important;
border:1px solid #405066!important;
}
body.theme-dark dialog::backdrop{
background:rgba(2,6,23,.72);
}
/* Table text and miscellaneous labels */
body.theme-dark table.simple,
body.theme-dark table.simple td,
body.theme-dark table.simple th{
color:#f8fafc!important;
border-color:#405066!important;
}
body.theme-dark a{
color:#8ddad5;
}
/* v5.42 dashboard budget row */
.dashboardBudget{
grid-column:span 6;
min-width:0;
min-height:92px;
display:flex;
flex-direction:column;
justify-content:center;
}
.dashboardBudget .dashboardCardTitle{
margin-bottom:8px;
}
.dashboardBudget .dashboardMetric{
white-space:normal;
overflow-wrap:anywhere;
}
@media(max-width:850px){
.dashboardBudget{grid-column:span 6}
}
@media(max-width:620px){
.dashboardBudget{grid-column:span 12}
}
/* v5.43 schedule ad placement */
#scheduleAdCard{width:100%;box-sizing:border-box}
.scheduleAdBody{padding:12px 8px;text-align:center;min-height:52px;display:flex;flex-direction:column;justify-content:center;gap:3px}
body.theme-dark #scheduleAdCard{background:#162033!important;border-color:#405066!important;color:#f8fafc!important}
/* v5.45 schedule ad visibility */
#scheduleAdCard{
width:100%;
min-height:92px;
box-sizing:border-box;
border:1px dashed #b7c5c7;
background:#f8fbfb;
}
.scheduleAdLabel{
font-size:10px;
font-weight:800;
letter-spacing:.12em;
color:#7a898b;
text-align:center;
padding-top:8px;
}
#scheduleAdCard .scheduleAdBody{
min-height:62px;
}
body.theme-dark #scheduleAdCard{
background:#162033!important;
border:1px dashed #64748b!important;
}
body.theme-dark #scheduleAdCard .scheduleAdLabel{
color:#cbd5e1!important;
}
/* v5.50 role-focused interfaces */
.rolePill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:4px 9px;font-size:12px;font-weight:700;background:var(--soft,#f3f6f6)}
.rolePill.manager{background:#edf7f5}
.rolePill.employee{background:#f3f5fb}
.roleDashboardHero{position:relative;overflow:hidden}
.roleDashboardHero::after{content:"";position:absolute;inset:0 0 0 auto;width:7px;background:currentColor;opacity:.35}
.roleDashboardHero.managerHero{border-left:4px solid #246b63}
.roleDashboardHero.employeeHero{border-left:4px solid #51628f}
.roleDashboardKicker{font-size:11px;text-transform:uppercase;letter-spacing:.09em;font-weight:800;margin-bottom:4px}
.roleQuickActions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.sideNavRole{margin-top:3px}
.sideSectionLabel{padding:14px 12px 5px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.sideTabs .tab{display:flex;align-items:center;gap:9px;text-align:left}
.sideTabs .tab .navIcon{width:18px;text-align:center;opacity:.82}
.employeePriorityCard{border-width:2px}
body.theme-dark .rolePill.manager,body.theme-dark .rolePill.employee{background:#243638}
@media(max-width:620px){
.roleQuickActions .secondary,.roleQuickActions .primary{flex:1 1 calc(50% - 8px)}
}
/* v5.51 continuous submenu */
.sideNav .tabs.sideTabs{
display:flex!important;
flex-direction:column!important;
flex-wrap:nowrap!important;
grid-template-columns:none!important;
columns:auto!important;
align-content:stretch!important;
}
.sideNav .tabs.sideTabs > *{
width:100%!important;
max-width:none!important;
flex:0 0 auto!important;
break-inside:avoid!important;
}
.sideNav .sideSectionLabel{
display:block!important;
grid-column:auto!important;
}
/* Auth buttons should never display a text caret/focus cursor. */
#loginSubmitBtn,#registerManagerBtn,#forgotPasswordBtn,
#registerManagerDlg button,#forgotPasswordDlg button,#resetPasswordDlg button{
caret-color:transparent;
user-select:none;
}
/* First-time Company setup */
.setupOverlay{position:fixed;inset:0;z-index:12000;background:rgba(10,35,34,.72);display:flex;align-items:center;justify-content:center;padding:18px}
.setupOverlay.hidden{display:none!important}
.setupWizard{width:min(720px,100%);max-height:92vh;overflow:auto;background:var(--card,#fff);border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.28);padding:28px}
.setupBrand{font-size:12px;font-weight:800;letter-spacing:.13em;color:#537270}
.setupWizard h1{margin:7px 0 8px;font-size:28px}
.setupProgress{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin:22px 0}
.setupProgress span{height:7px;border-radius:999px;background:#dce6e5}
.setupProgress span.done,.setupProgress span.active{background:#236b63}
.setupStep{display:none}.setupStep.active{display:block}
.setupChoice{border:1px solid var(--qx-line,#d9e2e2);border-radius:12px;padding:15px;margin-top:12px;background:var(--card,#fff)}
.setupWizard .actions{margin-top:24px}
.setupHours{display:grid;gap:8px;margin-top:12px}.setupHourRow{display:grid;grid-template-columns:110px 76px 1fr 18px 1fr;gap:8px;align-items:center;border:1px solid var(--qx-line,#d9e2e2);border-radius:10px;padding:9px}.setupHourRow input[type="time"]{min-width:0}.setupStaffList{display:grid;gap:8px;margin-top:12px}.setupStaffRow{display:grid;grid-template-columns:120px 1.3fr 105px 105px 78px auto;gap:7px;align-items:end;border:1px solid var(--qx-line,#d9e2e2);border-radius:10px;padding:9px}.setupStaffRow label{margin:0;font-size:11px}.setupStaffRow input,.setupStaffRow select{margin-top:3px}.setupSummaryGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.setupSummaryGrid .setupChoice{margin:0}@media(max-width:700px){.setupHourRow{grid-template-columns:84px 68px 1fr 14px 1fr}.setupStaffRow{grid-template-columns:1fr 1fr}.setupStaffRow .setupStaffRemove{grid-column:1/-1}.setupSummaryGrid{grid-template-columns:1fr}}
@media(max-width:620px){.setupWizard{padding:20px;border-radius:14px}.setupWizard h1{font-size:23px}}
/* v5.84 mobile-browser responsive experience */
@media (max-width:700px){
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{overflow-x:hidden;}
#app{width:100%;min-width:0;}
header{
min-height:56px!important;
padding:8px 10px!important;
gap:7px!important;
position:sticky!important;
top:0!important;
}
header h1{font-size:15px!important;line-height:1.15;max-width:42vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.menuToggle,.topNotificationBtn,.topLogout{min-height:42px!important;min-width:42px!important;}
.topLogout{font-size:0!important;padding:7px 10px!important;}
.topLogout::after{content:"Log out";font-size:12px;}
main{padding:10px 8px 24px!important;width:100%;overflow-x:hidden;}
.view{min-width:0;width:100%;}
.card{padding:12px!important;border-radius:10px!important;min-width:0;}
.mini{padding:11px!important;border-radius:8px!important;}
/* Mobile dashboards become a simple vertical feed. */
.dashboardGrid{display:block!important;}
.dashboardGrid>.card{margin-bottom:10px!important;}
.dashboardMetric{font-size:26px!important;}
.dashboardCardTitle{font-size:16px!important;}
.kpis,.employee-kpis{grid-template-columns:1fr 1fr!important;gap:8px!important;}
.kpi strong{font-size:18px!important;}
/* Toolbars are thumb-friendly and stop overflowing off-screen. */
.toolbar{display:flex!important;align-items:stretch!important;gap:7px!important;width:100%;}
.toolbar>*{max-width:100%;}
.toolbar .right{margin-left:0!important;}
.toolbar button,.toolbar .buttonLike{min-height:42px;}
.toolbar select,.toolbar input{min-height:42px;}
.roleQuickActions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;}
.roleQuickActions button{width:100%!important;min-height:44px;}
/* Forms use one column on phones with native-sized controls. */
.two,.row2,.employeeDetailGrid,.profileGrid,.settingsGrid,.setupSummaryGrid{grid-template-columns:1fr!important;}
input,select,textarea{font-size:16px!important;min-height:44px;}
textarea{min-height:100px;}
label{font-size:12px;}
.actions{position:sticky;bottom:0;background:inherit;padding-top:10px;flex-wrap:wrap;}
.actions button{flex:1 1 120px;min-height:44px;}
/* Schedule remains a true weekly schedule but becomes easier to pan on touch. */
.grid{
width:100%!important;
max-width:100%!important;
max-height:none!important;
overflow:auto!important;
-webkit-overflow-scrolling:touch;
overscroll-behavior-x:contain;
}
.schedule{min-width:900px!important;table-layout:fixed!important;}
.schedule th,.schedule td{padding:7px!important;}
.schedule th:first-child,.schedule td:first-child{
width:118px!important;min-width:118px!important;max-width:118px!important;
position:sticky!important;left:0!important;z-index:5!important;
}
.schedule th:first-child{z-index:7!important;}
.schedule th:not(:first-child),.schedule td:not(:first-child){width:112px!important;min-width:112px!important;max-width:112px!important;}
.shift{font-size:11px!important;padding:6px!important;}
/* Generic tables can scroll horizontally rather than shrinking unreadably. */
table.simple,.availabilityTable{min-width:680px;}
.card:has(table.simple),.card:has(.availabilityTable){overflow-x:auto;-webkit-overflow-scrolling:touch;}
/* Messages behave like a mobile inbox rather than a desktop split pane. */
.messenger{display:block!important;min-height:0!important;}
.chatPeople{border-right:0!important;padding:0!important;margin-bottom:10px!important;max-height:260px;overflow:auto;}
.chatWindow{min-height:420px!important;padding:8px!important;}
.chatMessages{max-height:52vh!important;}
.bubble{max-width:88%!important;}
.chatComposer{position:sticky;bottom:0;background:var(--qx-panel);padding:8px 0 2px!important;}
.chatComposer button{min-width:72px;min-height:44px;}
/* Plans become compact cards on mobile. */
.plansPage{padding:0 0 20px!important;}
.plansHeader{display:block!important;margin-bottom:10px!important;}
.plansHeader h2{font-size:22px!important;}
.currentPlanCard{margin-bottom:12px!important;border-radius:10px!important;padding:12px!important;}
.planCards{grid-template-columns:1fr!important;gap:12px!important;max-width:none!important;}
.planCard,.planCard.featuredPlan{padding:16px!important;min-height:0!important;border-radius:12px!important;transform:none!important;}
.planFeatures{margin:16px 0!important;gap:9px!important;}
.planPrice strong{font-size:32px!important;}
/* Dialogs feel like mobile sheets and avoid tiny desktop popups. */
dialog{
width:calc(100vw - 16px)!important;
max-width:none!important;
max-height:88dvh!important;
margin:auto 8px 8px!important;
border-radius:16px 16px 10px 10px!important;
overflow:auto!important;
}
dialog form{padding:14px!important;}
.workLocationDialog,.photoEditorDlg{width:calc(100vw - 16px)!important;}
.photoCropStage{width:min(82vw,340px)!important;height:min(82vw,340px)!important;}
/* Navigation drawer is a true mobile drawer. */
.sideNav{width:min(88vw,360px)!important;}
.sideNavHeader{min-height:64px!important;padding:12px!important;}
.sideNav .tab{min-height:50px!important;font-size:15px!important;}
#sideNavUserName{font-size:17px!important;max-width:52vw!important;}
.sideNavAvatar{width:42px!important;height:42px!important;flex-basis:42px!important;}
.notificationDropdown{top:60px!important;left:8px!important;right:8px!important;width:auto!important;max-height:72dvh!important;}
.notificationDropdownList{max-height:calc(72dvh - 94px)!important;}
.notificationDropItem{padding:11px 8px!important;}
/* Profile/contact rows fit narrow screens. */
.profilePhotoRow{align-items:center!important;}
.contractFileRow{align-items:flex-start!important;flex-direction:column!important;}
.contractFileActions{width:100%!important;justify-content:flex-start!important;}
.contractFileActions>*{flex:1 1 auto;}
.staffingWeek{grid-template-columns:1fr!important;}
.setupHourRow{grid-template-columns:1fr 1fr!important;}
.setupHourRow>*:first-child{grid-column:1/-1;}
.setupStaffRow{grid-template-columns:1fr!important;}
/* Keep ads and long content inside the phone viewport. */
img,canvas,iframe{max-width:100%;}
.wmAdSlot,#scheduleAdCard{max-width:100%;overflow:hidden;}
}
@media (max-width:430px){
header h1{max-width:34vw;font-size:14px!important;}
.kpis,.employee-kpis{grid-template-columns:1fr!important;}
.roleQuickActions{grid-template-columns:1fr!important;}
.toolbar button{flex:1 1 calc(50% - 7px);}
.toolbar .primary,.toolbar .danger{flex-basis:100%;}
.planCard{padding:14px!important;}
.dashboardMetric{font-size:24px!important;}
.notificationDropIcon{width:34px!important;height:34px!important;flex-basis:34px!important;}
}
/* v5.85 Quinyx-inspired mobile navigation and app shell */
.mobileBottomNav{display:none}
@media (max-width:700px){
body{padding-bottom:74px!important;background:#f4f7f7!important;}
main{padding-bottom:90px!important;}
header{background:#12393d!important;border-bottom:0!important;box-shadow:0 2px 12px rgba(15,45,49,.13)!important;}
header .menuToggle{display:none!important;}
header h1{font-size:17px!important;max-width:58vw!important;font-weight:750!important;letter-spacing:-.01em;}
.topLogout{display:none!important;}
.topNotificationBtn{border-radius:50%!important;background:rgba(255,255,255,.10)!important;color:#fff!important;}
.card{border-color:#e1e9e8!important;box-shadow:0 1px 3px rgba(25,53,56,.045)!important;}
.dashboardGrid>.card{border-radius:14px!important;}
.dashboardHero{background:linear-gradient(145deg,#12393d,#1c555b)!important;color:#fff!important;border:0!important;}
.dashboardHero .muted,.dashboardHero .roleDashboardKicker{color:rgba(255,255,255,.74)!important;}
.dashboardHero button{background:#fff!important;color:#12393d!important;}
.dashboardCardTitle{font-size:15px!important;margin:0 0 9px!important;}
.view>h2,.view>.toolbar>h2{font-size:20px!important;letter-spacing:-.015em;}
.mobileBottomNav{
display:grid;
grid-template-columns:repeat(5,1fr);
position:fixed;
left:0;right:0;bottom:0;
z-index:120;
min-height:68px;
padding:5px 4px max(5px,env(safe-area-inset-bottom));
background:rgba(255,255,255,.97);
border-top:1px solid #dfe8e7;
box-shadow:0 -5px 18px rgba(17,45,49,.08);
-webkit-backdrop-filter:blur(15px);
backdrop-filter:blur(15px);
}
.mobileBottomNav button{
appearance:none;border:0;background:transparent!important;color:#718285!important;
border-radius:10px!important;padding:5px 2px 3px!important;min-width:0!important;min-height:54px!important;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
font-size:10px!important;font-weight:700!important;line-height:1.05;
}
.mobileBottomNav button .mobileNavIcon{font-size:21px;line-height:1.1;font-weight:400;}
.mobileBottomNav button.active{color:#0f6e72!important;}
.mobileBottomNav button.active .mobileNavIcon{transform:translateY(-1px);}
.mobileBottomNav button.active::after{content:"";width:18px;height:3px;border-radius:3px;background:#0f6e72;position:absolute;margin-top:-50px;}
.mobileBottomNav button{position:relative;}
.mobileBottomNav .mobileNavBadge{position:absolute;top:2px;left:calc(50% + 8px);min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:#d63d3d;color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center;border:2px solid #fff;}
.mobileBottomNav .mobileNavBadge.hidden{display:none!important;}
/* Keep the drawer as the More menu on mobile. */
.sideNav{right:0!important;left:auto!important;width:min(90vw,370px)!important;border-radius:18px 0 0 18px;overflow:hidden;}
.sideNavHeader{background:#f7fafa!important;}
.sideSectionLabel{font-size:10px!important;letter-spacing:.09em!important;padding-top:13px!important;}
.sideNav .tab{border-radius:9px!important;margin:2px 8px!important;width:calc(100% - 16px)!important;}
/* More app-like section spacing. */
.toolbar{margin-bottom:10px!important;}
.view.active{animation:wmMobileFade .14s ease-out;}
@keyframes wmMobileFade{from{opacity:.72;transform:translateY(2px)}to{opacity:1;transform:none}}
/* Schedule toolbar gets a compact mobile top row while grid remains swipeable. */
#scheduleView .scheduleToolbar{background:#fff;border:1px solid #e1e9e8;border-radius:13px;padding:9px!important;position:sticky;top:62px;z-index:20;}
#scheduleView .grid{border-radius:13px!important;background:#fff;}
#scheduleView .schedule th{background:#f4f8f8!important;}
/* Request/message items read more like mobile list cards. */
#requestsView .card,#messagesView .card,#notificationsView .card{border-radius:14px!important;}
.messageRow,.requestRow,.notificationItem{border-radius:10px!important;}
}
@media (min-width:701px){.mobileBottomNav{display:none!important;}}
/* v5.86 mobile drawer + message composer fix */
@media (max-width:700px){
/* Override legacy left-drawer rules with a true right-side mobile sheet. */
#navBackdrop.navBackdrop{
position:fixed!important;
inset:0!important;
width:100vw!important;
height:100dvh!important;
background:rgba(8,26,29,.48)!important;
-webkit-backdrop-filter:blur(1.5px);
backdrop-filter:blur(1.5px);
z-index:148!important;
}
#sideNav.sideNav{
position:fixed!important;
top:0!important;
right:0!important;
bottom:0!important;
left:auto!important;
width:min(88vw,380px)!important;
min-width:min(88vw,380px)!important;
max-width:380px!important;
height:100dvh!important;
transform:translate3d(105%,0,0)!important;
transition:transform .22s ease!important;
z-index:150!important;
border-radius:18px 0 0 18px!important;
box-shadow:-16px 0 42px rgba(10,37,40,.28)!important;
overflow:hidden!important;
background:#fff!important;
}
#sideNav.sideNav.open{transform:translate3d(0,0,0)!important;}
#sideNav .sideNavHeader{
flex:0 0 auto!important;
padding:max(14px,env(safe-area-inset-top)) 14px 12px!important;
min-height:76px!important;
}
#sideNav .sideNavIdentityRow{min-width:0!important;flex:1 1 auto!important;}
#sideNav .sideNavIdentity{min-width:0!important;flex:1 1 auto!important;}
#sideNav #sideNavUserName{display:block!important;max-width:48vw!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
#sideNav .sideNavClose{flex:0 0 44px!important;width:44px!important;height:44px!important;min-width:44px!important;border-radius:12px!important;}
#sideNav .tabs.sideTabs{
padding:8px 10px 14px!important;
overflow-y:auto!important;
overflow-x:hidden!important;
-webkit-overflow-scrolling:touch!important;
}
#sideNav .sideSectionLabel{padding:14px 10px 5px!important;}
#sideNav .tab{
width:100%!important;
margin:2px 0!important;
min-height:50px!important;
padding:0 12px!important;
border-radius:11px!important;
flex:0 0 auto!important;
}
#sideNav .sideNavFooter{padding:12px 14px max(14px,env(safe-area-inset-bottom))!important;}
body.navOpen{overflow:hidden!important;touch-action:none;}
body.navOpen #sideNav{touch-action:pan-y;}
/* Keep the bottom navigation below the open drawer/backdrop. */
.mobileBottomNav{z-index:120!important;}
/* Mobile Messages: composer must stay fully inside the viewport. */
#messagesView .card{overflow:hidden!important;}
#messagesView .messenger,#messagesView .chatWindow{width:100%!important;min-width:0!important;max-width:100%!important;}
#messagesView .chatComposer{
display:flex!important;
width:100%!important;
max-width:100%!important;
gap:8px!important;
align-items:flex-end!important;
padding:8px 0 2px!important;
overflow:hidden!important;
}
#messagesView .chatComposer textarea{
flex:1 1 auto!important;
width:auto!important;
min-width:0!important;
max-width:100%!important;
min-height:48px!important;
margin:0!important;
}
#messagesView .chatComposer button{
flex:0 0 auto!important;
width:auto!important;
min-width:72px!important;
max-width:92px!important;
margin:0!important;
}
}
/* v5.109 — make the dedicated open-shifts schedule row unmistakable */
#body tr.openShiftsRow>td:first-child{background:#f8fafc;border-left:4px solid #94a3b8}
#body tr.openShiftsRow>td:first-child strong{font-size:14px}
.openShiftBadge{display:inline-block;margin-bottom:5px;padding:2px 7px;border:1px dashed #94a3b8;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;background:#f8fafc;color:#475569}
body.theme-dark #body tr.openShiftsRow>td:first-child{background:#1e293b!important;border-left-color:#94a3b8}
body.theme-dark .openShiftBadge{background:#e2e8f0;color:#334155;border-color:#94a3b8}
/* v5.188: keep Time clock week navigation together; print is a separate action. */
/* v5.189: Time clock week navigation is disabled until a manager selects an employee. */
#attendanceWeekNav{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
#attendanceWeekNav .attendanceWeekPager{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;min-width:0}
#attendanceWeekNav #attendanceWeekLabel{white-space:nowrap;text-align:center}
#attendanceWeekNav #attendancePrintSave{margin-left:auto}
#attendanceWeekNav .attendancePrintGroup{margin-left:auto;position:relative;display:flex;align-items:center}
#attendancePrintMenu{position:absolute;right:0;top:calc(100% + 8px);z-index:40;width:245px;padding:12px;background:var(--card,#fff);border:1px solid var(--border,#e5e7eb);border-radius:10px;box-shadow:0 12px 30px rgba(15,23,42,.14)}
#attendancePrintMenu[hidden]{display:none!important}
#attendancePrintMenu label{display:block;margin:0 0 6px;font-size:12px;font-weight:700}
#attendancePrintMonth{width:100%;margin:0 0 10px;padding:8px 10px}
#attendancePrintConfirm{width:100%}
@media(max-width:700px){#attendanceWeekNav .attendancePrintGroup{margin-left:0;width:100%;justify-content:flex-start}#attendancePrintMenu{left:0;right:auto;width:min(280px,calc(100vw - 40px))}}
@media (max-width:700px){
#attendanceWeekNav .attendanceWeekPager{width:100%;justify-content:space-between}
#attendanceWeekNav .attendanceWeekPager button{flex:0 1 auto}
#attendanceWeekNav #attendanceWeekLabel{white-space:normal;flex:1 1 auto}
#attendanceWeekNav #attendancePrintSave{margin-left:0;width:100%;flex:1 1 100%}
}
/* v5.197 — schedule always fits the visible screen; no calendar scrolling */
#scheduleView .grid{
width:100%!important;
max-width:100%!important;
height:var(--schedule-grid-height,68vh)!important;
max-height:var(--schedule-grid-height,68vh)!important;
overflow:hidden!important;
}
#scheduleView .schedule{
width:100%!important;
min-width:0!important;
max-width:100%!important;
table-layout:fixed!important;
font-size:var(--schedule-font-size,12px)!important;
}
#scheduleView .schedule th:first-child,
#scheduleView .schedule td:first-child{
width:var(--schedule-name-width,15%)!important;
min-width:0!important;
max-width:none!important;
}
#scheduleView .schedule th:not(:first-child),
#scheduleView .schedule td:not(:first-child){width:auto!important;min-width:0!important;max-width:none!important;}
#scheduleView .schedule thead tr,
#scheduleView .schedule thead th{
height:var(--schedule-header-height,42px)!important;
min-height:var(--schedule-header-height,42px)!important;
max-height:var(--schedule-header-height,42px)!important;
}
#scheduleView .schedule tbody tr,
#scheduleView .schedule tbody td,
#scheduleView .dropcell{
height:var(--schedule-row-height,72px)!important;
min-height:var(--schedule-row-height,72px)!important;
max-height:var(--schedule-row-height,72px)!important;
overflow:hidden!important;
}
#scheduleView .schedule th,#scheduleView .schedule td{
padding:var(--schedule-cell-pad,5px)!important;
line-height:var(--schedule-line-height,1.15)!important;
overflow:hidden!important;
overflow-wrap:anywhere;
}
#scheduleView .shift{
font-size:var(--schedule-shift-font-size,11px)!important;
padding:var(--schedule-shift-pad,4px)!important;
margin:var(--schedule-shift-margin,2px) 0!important;
line-height:var(--schedule-line-height,1.15)!important;
max-height:calc(var(--schedule-row-height,72px) - 4px)!important;
overflow:hidden!important;
}
#scheduleView .shift button{font-size:inherit!important;padding:2px 4px!important;min-height:0!important;}
#scheduleView .calendarLeaveLabel,#scheduleView .openShiftBadge{font-size:inherit!important;padding:1px 3px!important;}
@media(max-width:700px){
#scheduleView .grid,#scheduleView .scheduleWrap,#scheduleView .tableWrap{overflow:hidden!important;max-width:100%!important;}
#scheduleView .schedule{min-width:0!important;width:100%!important;}
}
/* v5.204 social-style announcements + messenger behavior */
.socialAvatar{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:0 0 40px;background:#e5e7eb;display:flex;align-items:center;justify-content:center;font-weight:700;overflow:hidden}
.socialAvatar.small{width:32px;height:32px;flex-basis:32px;font-size:12px}.socialAvatar img{width:100%;height:100%;object-fit:cover}
.announcementItem{border-radius:14px!important;padding:14px 16px!important}.announcementHeader{align-items:flex-start!important}.announcementText{font-size:15px!important;line-height:1.45!important;margin:10px 0 12px!important}
.announcementActions{justify-content:space-between!important}.announcementActions button{font-weight:600!important;flex:1}.replyItem{align-items:flex-start}.replyBubble{padding:8px 12px!important}.replyComposer{align-items:center}.replyComposer input{border-radius:20px!important;background:#f3f4f6!important;border:0!important;padding:10px 14px!important}.replyComposer button{border-radius:18px!important;padding:8px 14px!important}
#announcementForm{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:12px!important;margin-bottom:14px}#announcementBody{border-radius:18px!important;background:#f3f4f6!important;border:0!important;min-height:62px!important;padding:12px 14px!important}#announcementForm .actions{margin-top:8px!important}
#messagesView .card{padding:0!important;overflow:hidden}#messagesView .messenger{gap:0!important;min-height:620px!important}.chatPeople{padding:12px!important;background:#fff!important}.chatPerson{border:0!important;border-radius:10px!important;padding:9px!important;margin:2px 0!important;display:grid!important;grid-template-columns:42px 1fr auto;gap:9px;align-items:center}.chatPerson:hover,.chatPerson.active{background:#f0f2f5!important}.chatPerson .personText{min-width:0}.chatPerson .personName{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chatPerson .personPreview{font-size:12px;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chatWindow{background:#fff!important}.chatHeader{min-height:58px;padding:10px 14px!important;display:flex;align-items:center;gap:10px}.chatMessages{padding:16px 14px!important;max-height:500px!important}.bubbleRow{margin:3px 0!important}.bubble{border-radius:18px!important;padding:8px 12px!important;max-width:min(72%,520px)!important;background:#e4e6eb!important}.bubbleRow.mine .bubble{background:#0866ff!important;color:#fff!important}.bubbleTime{display:none}.bubbleRow:hover .bubbleTime{display:block}.readReceipt{font-size:10px!important}.chatComposer{padding:10px 12px!important;align-items:flex-end!important;background:#fff}.chatComposer textarea{border:0!important;border-radius:20px!important;background:#f0f2f5!important;min-height:40px!important;max-height:120px!important;padding:10px 14px!important;resize:none}.chatComposer button{border-radius:20px!important;min-width:64px}.newMessagePanel{border:0!important;background:#fff!important;padding:6px 0!important}.newMessageResult{border:0!important;border-radius:10px!important;padding:9px!important}.messageDayDivider{text-align:center;font-size:11px;color:#6b7280;margin:12px 0}.chatHeader .headerText{min-width:0}.chatHeader .headerName{font-weight:700}.chatHeader .headerRole{font-size:12px;color:#6b7280}
body.theme-dark #announcementForm,body.theme-dark #messagesView .chatPeople,body.theme-dark #messagesView .chatWindow,body.theme-dark .chatComposer{background:var(--qx-card)!important}body.theme-dark .chatPerson:hover,body.theme-dark .chatPerson.active,body.theme-dark .replyComposer input,body.theme-dark #announcementBody,body.theme-dark .chatComposer textarea{background:#24302f!important}body.theme-dark .bubble{background:#2f3b3a!important}
/* v5.222 manager mobile shift workflow */
body.wfm-mobile-browser #mobileShiftActionDlg .mobileShiftActionButtons{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;margin-top:12px!important}
body.wfm-mobile-browser #mobileShiftActionDlg .mobileShiftActionButtons button{width:100%!important;min-height:40px!important;margin:0!important;padding:8px 10px!important;font-size:13px!important}
body.wfm-mobile-browser #mobileShiftActionDlg .mobileShiftActionButtons .mobileMgrEdit{grid-column:1/-1}
body.wfm-mobile-browser #shiftDlg{width:min(94vw,430px)!important;max-height:92vh!important}
body.wfm-mobile-browser #shiftDlg form{padding:15px!important}
body.wfm-mobile-browser #shiftDlg .row2{gap:8px!important}
body.wfm-mobile-browser #shiftDlg label{margin-top:8px!important;font-size:12px!important}
body.wfm-mobile-browser #shiftDlg input,body.wfm-mobile-browser #shiftDlg select{min-height:40px!important;padding:7px 9px!important}
body.wfm-mobile-browser #shiftDlg .actions{gap:7px!important;margin-top:14px!important}
body.wfm-mobile-browser #shiftDlg .actions button{min-height:40px!important;padding:8px 11px!important;font-size:13px!important}
body.wfm-mobile-browser .mobileWeekDay.hasLeave .dot{background:#b42318!important;opacity:1!important}
body.wfm-mobile-browser .mobileWeekDay.hasLeave .dom{box-shadow:0 0 0 2px #fecaca inset}
body.theme-dark.wfm-mobile-browser .mobileWeekDay.hasLeave .dot{background:#f87171!important}
body.wfm-mobile-browser .mobileLeaveCard{border-style:solid!important;background:#fee2e2!important;border-color:#fecaca!important;color:#991b1b!important}
body.wfm-mobile-browser .mobileLeaveCard.approvedLeave,body.wfm-mobile-browser .mobileLeaveCard.pendingLeave{background:#fee2e2!important;border-color:#fecaca!important}
body.wfm-mobile-browser .mobileLeaveCard .mobileShiftStripe{background:#b42318!important;opacity:1!important}
body.wfm-mobile-browser .mobileLeaveCard .mobileShiftPerson,body.wfm-mobile-browser .mobileLeaveCard .mobileShiftTime{color:#991b1b!important}
body.wfm-mobile-browser .mobileLeaveCard .mobileShiftMeta,body.wfm-mobile-browser .mobileLeaveCard .mobileShiftMeta span{color:#b42318!important}
body.wfm-mobile-browser .mobileLeaveCard .mobileOpenBadge{background:#fecaca!important;color:#991b1b!important}
body.theme-dark.wfm-mobile-browser .mobileLeaveCard{background:#4b2028!important;border-color:#7f1d1d!important;color:#fff!important}
body.theme-dark.wfm-mobile-browser .mobileLeaveCard .mobileShiftStripe{background:#f87171!important}
body.theme-dark.wfm-mobile-browser .mobileLeaveCard .mobileShiftPerson,body.theme-dark.wfm-mobile-browser .mobileLeaveCard .mobileShiftTime,body.theme-dark.wfm-mobile-browser .mobileLeaveCard .mobileShiftMeta,body.theme-dark.wfm-mobile-browser .mobileLeaveCard .mobileShiftMeta span{color:#fff!important}
body.theme-dark.wfm-mobile-browser .mobileLeaveCard .mobileOpenBadge{background:#7f1d1d!important;color:#fff!important}
/* v5.245 compact professional pass + mobile dashboard header + social/chat enhancements */
.reactionPicker{position:fixed;z-index:99999;display:flex;gap:2px;padding:6px 8px;background:#fff;border:1px solid #dfe5e4;border-radius:24px;box-shadow:0 8px 28px #0003}.reactionPicker button{border:0;background:transparent;font-size:22px;padding:3px;line-height:1;transition:transform .12s}.reactionPicker button:hover{transform:scale(1.28)}
.whatsappComposer{display:flex!important;align-items:flex-end!important;gap:6px!important;padding:8px 10px!important}.chatComposeMain{flex:1;min-width:0}.chatAttachBtn,.chatSendBtn{border:0!important;box-shadow:none!important;width:38px!important;height:38px!important;min-width:38px!important;border-radius:50%!important;padding:0!important;font-size:21px}.chatAttachBtn{background:transparent!important;color:inherit!important}.privateAttachmentPreview{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;padding:5px 10px;margin-bottom:4px;background:#eef2f1;border-radius:10px}.privateAttachmentPreview button{border:0;background:transparent;padding:0 3px}.messageAttachment img{display:block;max-width:260px;max-height:280px;border-radius:10px;margin-bottom:5px}.fileAttachment{display:flex;align-items:center;gap:7px;color:inherit;text-decoration:none;padding:8px;background:#ffffff55;border-radius:9px;margin-bottom:5px;max-width:260px}.fileAttachment span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.view>.card{box-shadow:none!important}.view .card{border-radius:8px!important}.view h2{font-size:18px!important}.view h3{font-size:15px!important}.view .toolbar{gap:8px}.view table th,.view table td{padding-top:7px!important;padding-bottom:7px!important}.view label{font-size:12px}.view input,.view select,.view textarea{padding-top:8px;padding-bottom:8px}.view button{min-height:34px}.announcementItem{padding:10px 12px!important;margin:7px 0!important}.announcementText{margin:7px 0!important}.replyBubble{font-size:13px}.announcementActions{padding:4px 0!important}
body.theme-dark .reactionPicker{background:#263231;border-color:#40504f}body.theme-dark .privateAttachmentPreview{background:#263231}
@media(max-width:760px){body.wfm-mobile-browser #dashboardView .dashboardHero{background:transparent!important;border:0!important;border-radius:0!important;padding:2px 0 8px!important;margin:0!important;box-shadow:none!important}body.wfm-mobile-browser #dashboardView .dashboardHeroActions{margin-top:5px!important}body.wfm-mobile-browser #dashboardView .dashboardHero .roleDashboardKicker{font-size:10px!important}body.wfm-mobile-browser #dashboardView .dashboardHero h2{font-size:20px!important;margin:1px 0!important}.view{padding-top:8px!important}.view>.card{border-radius:8px!important;padding:10px!important}.view .card{margin-bottom:8px!important}.view h2{font-size:17px!important}.view h3{font-size:14px!important}.toolbar{margin-bottom:7px!important}.chatPeople{padding:8px!important}.chatHeader{min-height:48px!important;padding:7px 10px!important}.chatMessages{padding:10px!important}.bubble{max-width:84%!important}.messageAttachment img{max-width:220px}.announcementItem{border-radius:8px!important}.announcementReplyForm input{padding:8px 11px!important}.announcementReplyForm button{min-height:32px!important;padding:5px 10px!important}}
/* v5.246 message polish + attachment chooser */
#messagesView .chatPeople,#messagesView .chatWindow,#messagesView .chatComposer{background:var(--qx-card,#fff)!important}
#messagesView .chatPerson{grid-template-columns:42px minmax(0,1fr) auto!important}
#messagesView .chatPerson .personText{display:flex!important;flex-direction:column!important;align-items:flex-start!important;min-width:0!important}
#messagesView .chatPerson .personName,#messagesView .chatPerson .personPreview{display:block!important;width:100%!important;text-align:left!important}
#messagesView .chatPerson .personPreview{margin-top:2px!important}
#messagesView .bubble{background:var(--qx-panel,#eef2f1)!important;color:var(--text,#111827)!important}
#messagesView .bubbleRow.mine .bubble{background:var(--qx-teal,#0f766e)!important;color:#fff!important}
#messagesView .chatComposer textarea{background:var(--qx-panel,#f1f5f4)!important;color:var(--text,#111827)!important}
#messagesView .chatSendBtn{background:var(--qx-teal,#0f766e)!important;color:#fff!important}
#messagesView .chatAttachBtn{color:var(--qx-teal,#0f766e)!important}
.chatAttachWrap{position:relative;display:flex;align-items:center}.privateAttachMenu{position:absolute;left:0;bottom:46px;z-index:80;width:230px;padding:6px;background:var(--qx-card,#fff);border:1px solid var(--border,#e5e7eb);border-radius:12px;box-shadow:0 12px 34px rgba(15,23,42,.18)}
.privateAttachMenu button{display:grid!important;grid-template-columns:28px 1fr!important;gap:8px!important;align-items:center!important;width:100%!important;border:0!important;background:transparent!important;color:inherit!important;text-align:left!important;padding:9px!important;border-radius:9px!important;min-height:0!important}
.privateAttachMenu button:hover{background:var(--qx-panel,#f1f5f4)!important}.privateAttachMenu button span:first-child{font-size:18px}.privateAttachMenu strong,.privateAttachMenu small{display:block}.privateAttachMenu small{font-size:11px;color:var(--muted,#6b7280);margin-top:1px}
body.theme-dark #messagesView .chatPeople,body.theme-dark #messagesView .chatWindow,body.theme-dark #messagesView .chatComposer,body.theme-dark .privateAttachMenu{background:var(--qx-card)!important}
body.theme-dark #messagesView .bubble,body.theme-dark #messagesView .chatComposer textarea,body.theme-dark .privateAttachMenu button:hover{background:#24302f!important;color:#fff!important}
/* v5.247 reaction gesture + refreshed mobile messaging */
.reactionPicker{touch-action:none;user-select:none;-webkit-user-select:none;pointer-events:auto}.reactionPicker button{touch-action:none}.reactionPicker button.reactionHover,.reactionPicker button:hover{transform:translateY(-5px) scale(1.35);background:var(--qx-panel,#f1f5f4)!important;border-radius:50%!important}
.mobileChatBack{display:none;border:0!important;background:transparent!important;color:var(--qx-teal,#0f766e)!important;font-size:30px!important;line-height:1!important;padding:0 3px!important;min-width:28px!important;min-height:32px!important}
@media(max-width:760px){
body.wfm-mobile-browser #messagesView{padding:0 0 72px!important}
body.wfm-mobile-browser #messagesView>.card{border:0!important;background:transparent!important;padding:0!important;margin:0!important;border-radius:0!important}
body.wfm-mobile-browser #messagesView .messenger{display:block!important;min-height:0!important;background:transparent!important}
body.wfm-mobile-browser #messagesView .chatPeople{max-height:none!important;height:auto!important;border:0!important;border-radius:0!important;padding:6px 8px!important;background:transparent!important;overflow:visible!important}
body.wfm-mobile-browser #messagesView .chatPeople>.toolbar{position:sticky;top:0;z-index:4;background:var(--bg,#f6f8f7);padding:5px 0 7px!important;margin:0 0 3px!important}
body.wfm-mobile-browser #messagesView .chatPerson{grid-template-columns:40px minmax(0,1fr) auto!important;padding:7px 5px!important;margin:0!important;border-radius:8px!important;gap:8px!important}
body.wfm-mobile-browser #messagesView .socialAvatar{width:40px!important;height:40px!important}
body.wfm-mobile-browser #messagesView .personName{font-size:14px!important;line-height:1.2!important}
body.wfm-mobile-browser #messagesView .personPreview{font-size:11px!important;line-height:1.25!important;margin-top:2px!important}
body.wfm-mobile-browser #messagesView .chatWindow{display:none!important;position:relative;width:100%!important;min-height:calc(100dvh - 128px)!important;border:0!important;border-radius:0!important;background:var(--qx-card,#fff)!important}
body.wfm-mobile-browser #messagesView.mobileChatActive .chatPeople{display:none!important}
body.wfm-mobile-browser #messagesView.mobileChatActive .chatWindow{display:flex!important;flex-direction:column!important}
body.wfm-mobile-browser #messagesView .mobileChatBack{display:inline-flex!important;align-items:center!important;justify-content:center!important}
body.wfm-mobile-browser #messagesView .chatHeader{position:sticky;top:0;z-index:5;min-height:48px!important;padding:5px 8px!important;border-bottom:1px solid var(--border,#e5e7eb)!important;background:var(--qx-card,#fff)!important}
body.wfm-mobile-browser #messagesView .chatHeader .socialAvatar{width:34px!important;height:34px!important}
body.wfm-mobile-browser #messagesView .headerName{font-size:14px!important}.headerRole{font-size:10px!important}
body.wfm-mobile-browser #messagesView .chatMessages{flex:1!important;max-height:none!important;min-height:calc(100dvh - 245px)!important;padding:8px 9px 10px!important;overflow-y:auto!important;background:var(--bg,#f6f8f7)!important}
body.wfm-mobile-browser #messagesView .bubbleRow{margin:2px 0!important}
body.wfm-mobile-browser #messagesView .bubble{max-width:86%!important;border-radius:14px!important;padding:7px 9px!important;font-size:13px!important;line-height:1.3!important}
body.wfm-mobile-browser #messagesView .messageAttachment img{max-width:min(68vw,230px)!important;max-height:240px!important}
body.wfm-mobile-browser #messagesView .fileAttachment{max-width:68vw!important;padding:7px!important}
body.wfm-mobile-browser #messagesView .chatComposer{position:sticky!important;bottom:64px!important;z-index:6;display:flex!important;align-items:flex-end!important;gap:5px!important;padding:6px 7px max(6px,env(safe-area-inset-bottom))!important;border-top:1px solid var(--border,#dfe8e7)!important;background:var(--qx-card,#fff)!important}
body.wfm-mobile-browser #messagesView .chatComposeMain{background:var(--qx-panel,#eef3f2)!important;border:1px solid var(--border,#cfdad8)!important;border-radius:18px!important;padding:0 2px!important;overflow:hidden!important}
body.wfm-mobile-browser #messagesView .chatComposer textarea{width:100%!important;min-height:38px!important;max-height:88px!important;border:0!important;background:transparent!important;color:var(--text,#111827)!important;padding:9px 10px!important;border-radius:18px!important;box-shadow:none!important;outline:0!important}
body.wfm-mobile-browser #messagesView .chatComposer textarea:focus{box-shadow:inset 0 0 0 1px var(--qx-teal,#0f766e)!important}
body.wfm-mobile-browser #messagesView .chatAttachBtn,body.wfm-mobile-browser #messagesView .chatSendBtn{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;font-size:19px!important}
body.wfm-mobile-browser #messagesView .privateAttachmentPreview{margin:4px 5px 0!important;padding:4px 7px!important;background:var(--qx-card,#fff)!important;border:1px solid var(--border,#dfe8e7)!important}
body.wfm-mobile-browser #messagesView .privateAttachMenu{position:fixed!important;left:8px!important;right:8px!important;bottom:74px!important;width:auto!important;border-radius:14px!important;padding:7px!important}
}
body.theme-dark.wfm-mobile-browser #messagesView .chatPeople>.toolbar,body.theme-dark.wfm-mobile-browser #messagesView .chatMessages{background:var(--qx-bg,#17201f)!important}
body.theme-dark.wfm-mobile-browser #messagesView .chatComposeMain{background:#24302f!important;border-color:#40504f!important}
body.theme-dark.wfm-mobile-browser #messagesView .chatComposer textarea{background:transparent!important;color:#fff!important}
#menuToggle{min-width:38px!important;width:38px!important;padding:0!important;font-size:22px!important;justify-content:center!important}
@media(max-width:760px){.privateAttachMenu{position:fixed;left:10px;right:10px;bottom:76px;width:auto}.privateAttachMenu button{padding:11px!important}}
/* v5.248 reactions, icon-only attachments, desktop dashboard cleanup */
[data-reaction-target],.reactionPicker,.reactionPicker *{-webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important}
.reactionSummary{border:0!important;background:transparent!important;box-shadow:none!important;padding:2px 4px!important;min-height:0!important;font-size:12px!important;display:inline-flex!important;align-items:center!important;gap:3px!important;color:var(--muted,#667085)!important}
.reactionPeopleBackdrop{position:fixed;inset:0;z-index:100000;background:#0006;display:flex;align-items:center;justify-content:center;padding:18px}.reactionPeopleCard{width:min(360px,94vw);max-height:70vh;background:var(--qx-card,#fff);border:1px solid var(--border,#dfe8e7);border-radius:14px;box-shadow:0 18px 60px #0004;overflow:hidden}.reactionPeopleHead{display:flex;align-items:center;justify-content:space-between;padding:11px 13px;border-bottom:1px solid var(--border,#dfe8e7)}.reactionPeopleHead button{border:0!important;background:transparent!important;box-shadow:none!important;font-size:22px!important;padding:0 4px!important}.reactionPeopleList{padding:6px 10px;overflow:auto;max-height:55vh}.reactionPeopleList>div{display:flex;align-items:center;gap:9px;padding:8px 4px}.reactionPeopleList>div span{font-size:20px}
.privateAttachMenu{width:auto!important;display:flex!important;gap:5px!important;padding:6px!important}.privateAttachMenu.hidden{display:none!important}.privateAttachMenu button{display:flex!important;align-items:center!important;justify-content:center!important;width:42px!important;height:42px!important;padding:0!important;border-radius:50%!important}.privateAttachMenu button span:first-child{font-size:21px!important}
@media(min-width:761px){#dashboardView .roleDashboardGrid{gap:10px!important}#dashboardView .card{padding:12px 14px!important;border-radius:9px!important;box-shadow:none!important}#dashboardView .dashboardHero{padding:11px 14px!important;border:0!important;border-radius:0!important;border-bottom:1px solid var(--qx-line,#dfe8e7)!important;background:transparent!important}#dashboardView .dashboardHeroToolbar{gap:12px!important}#dashboardView .dashboardHero h2{font-size:19px!important}#dashboardView .dashboardCardTitle{font-size:13px!important;margin-bottom:7px!important}#dashboardView .dashboardMetric{font-size:20px!important}.dashboardScheduleCard{padding:8px 10px!important;border-radius:7px!important}.dashboardAnnouncements textarea{min-height:54px!important}}
@media(max-width:760px){body.wfm-mobile-browser .privateAttachMenu{left:10px!important;right:auto!important;bottom:70px!important;width:auto!important;display:flex!important;border-radius:24px!important;padding:5px!important}body.wfm-mobile-browser .privateAttachMenu.hidden{display:none!important}body.wfm-mobile-browser .privateAttachMenu button{width:40px!important;height:40px!important}}
/* v5.249 message attachment + dashboard header cleanup */
#dashboardView .dashboardHero,#dashboardView .roleDashboardHero,#dashboardView .managerHero,#dashboardView .employeeHero{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:2px 0 9px!important;margin:0!important;overflow:visible!important}
#dashboardView .roleDashboardHero::after{display:none!important}
#dashboardView .dashboardHeroActions,#dashboardView #dashboardQuickActions{display:none!important}
.attachClipIcon{width:23px;height:23px;display:inline-flex;align-items:center;justify-content:center;color:var(--qx-teal,#176a68)}
.attachClipIcon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.privateAttachMenu button:hover .attachClipIcon,.privateAttachMenu button:focus .attachClipIcon{transform:scale(1.05)}
@media(max-width:760px){body.wfm-mobile-browser #dashboardView .dashboardHero{padding:0 0 7px!important}.attachClipIcon,.attachClipIcon svg{width:22px;height:22px}}
/* v5.250 reaction drag + Messenger-style attachment previews */
[data-reaction-target]{touch-action:manipulation!important;-webkit-tap-highlight-color:transparent!important}
.reactionPicker{touch-action:none!important}
.privateAttachmentPreview{align-items:flex-start!important;position:relative!important;padding-right:32px!important}
.composerImagePreview,.composerFilePreview{display:flex;align-items:center;gap:8px;min-width:0}.composerImagePreview img{width:74px;height:74px;object-fit:cover;border-radius:9px;border:1px solid var(--border,#dfe8e7)}.composerAttachmentMeta{display:flex;flex-direction:column;min-width:0}.composerAttachmentMeta strong{font-size:12px;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.composerAttachmentMeta small{font-size:10px;color:var(--muted,#667085);margin-top:2px}.composerFileIcon{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:var(--qx-panel,#eef3f2);font-size:20px}.privateAttachmentPreview #removePrivateAttachment{position:absolute;top:5px;right:6px;font-size:18px!important;line-height:1!important}.messageAttachmentActions{display:flex;justify-content:flex-end;margin-top:2px}.messageAttachmentActions a{font-size:11px;font-weight:700;color:inherit;text-decoration:none;opacity:.8;padding:2px 4px}.messageAttachmentActions a:hover{text-decoration:underline}.messageImageOpen{display:block}.messageAttachment img{cursor:zoom-in}
@media(max-width:760px){body.wfm-mobile-browser #messagesView .composerImagePreview img{width:62px;height:62px}.composerAttachmentMeta strong{max-width:150px}.messageAttachmentActions a{font-size:10px}}
#operationsView .operationsTabs{gap:8px;margin:12px 0}#operationsView .opPanel{margin-top:12px}#operationsView .listRow{padding:12px 0;border-bottom:1px solid var(--border,#e5e7eb)}#operationsView .listRow:last-child{border-bottom:0}
/* wfm-v5512-operations-professional-ia
*/
#operationsView{max-width:1180px;margin:0 auto}#operationsView .operationsHeader{margin-bottom:12px}#operationsView .operationsPrimaryTabs,#operationsView .operationsSecondaryTabs{display:flex;gap:4px;padding:4px;background:var(--surface2,#f3f4f6);border:1px solid var(--border,#e5e7eb);border-radius:12px;margin:0 0 14px;overflow:auto}#operationsView .operationsPrimaryTabs button,#operationsView .operationsSecondaryTabs button{border:0;background:transparent;padding:9px 14px;border-radius:9px;font-weight:650;white-space:nowrap;color:inherit}#operationsView .operationsPrimaryTabs button.active,#operationsView .operationsSecondaryTabs button.active{background:var(--surface,#fff);box-shadow:0 1px 3px rgba(0,0,0,.10)}#operationsView .operationsSecondaryTabs.compact{display:inline-flex;margin:0 0 12px}#operationsView .opPanel{margin-top:0}#operationsView .opSection{margin-bottom:14px}#operationsView .sectionHead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}#operationsView .sectionHead h3{margin:0 0 3px}#operationsView .opSummary{display:flex;gap:18px;align-items:center;padding:12px 16px;margin-bottom:14px;border:1px solid var(--border,#e5e7eb);border-radius:12px;background:var(--surface,#fff);flex-wrap:wrap}#operationsView .opSummary strong{font-size:18px}#operationsView .attentionRow,#operationsView .taskRow,#operationsView .stockCard{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid var(--border,#e5e7eb)}#operationsView .attentionRow:last-child,#operationsView .taskRow:last-child,#operationsView .stockCard:last-child{border-bottom:0}#operationsView .opStatus{font-size:12px;font-weight:700;padding:4px 8px;border-radius:999px;background:var(--surface2,#f3f4f6)}#operationsView .opDanger{font-weight:700}#operationsView .stockMeta{display:flex;gap:10px;flex-wrap:wrap;margin-top:3px}#operationsView .opSubhead{margin:18px 0 6px}#operationsView .historyRow{display:grid;grid-template-columns:110px 1fr auto;gap:12px;padding:12px 0;border-bottom:1px solid var(--border,#e5e7eb)}@media(max-width:700px){#operationsView .operationsPrimaryTabs button{flex:1;padding:9px 10px}#operationsView .sectionHead{align-items:center}#operationsView .attentionRow,#operationsView .taskRow,#operationsView .stockCard{align-items:flex-start}#operationsView .historyRow{grid-template-columns:1fr}#operationsView .opSummary{gap:12px}#operationsView .opSummary span{font-size:13px}}
/* wfm-v5508-employee-cleaning-checklist */
.cleanEmployeeCard .cleanTaskList label{cursor:pointer}.cleanEmployeeCard input[type="checkbox"]{width:20px!important;height:20px!important;accent-color:currentColor}.cleanEmployeeCard button:disabled{opacity:.45;cursor:not-allowed}@media(max-width:700px){.cleanEmployeeCard .toolbar{align-items:flex-start}.cleanEmployeeCard .cleanTaskList label{padding:14px 2px;font-size:15px}}
/* wfm-v5509-cleaning-frequency-sections */
.cleanFrequencyTabs{display:flex;gap:8px;margin:14px 0 8px;flex-wrap:wrap}.cleanFrequencyTabs button.active{font-weight:800;box-shadow:inset 0 -2px currentColor}.cleanDayPicker{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}.cleanDayPicker label{display:flex;align-items:center;gap:5px;padding:7px 9px;border:1px solid var(--border,#ddd);border-radius:8px}.cleanDayPicker input{width:auto!important}.cleanTaskList label{display:flex;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid var(--border,#ddd)}.cleanTaskList input{width:20px!important;height:20px!important}@media(max-width:700px){.cleanFrequencyTabs{display:grid;grid-template-columns:repeat(3,1fr)}.cleanFrequencyTabs button{width:100%}.cleanDayPicker{display:grid;grid-template-columns:repeat(4,1fr)}.cleanDayPicker label{justify-content:center;padding:9px 4px}}
/* wfm-v5513-inventory-control */
.inventoryToolbar{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:14px 0}.inventoryToolbar input{max-width:340px}.inventoryKpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0 16px}.inventoryKpi{border:1px solid var(--border,#ddd);border-radius:12px;padding:12px}.inventoryKpi strong{display:block;font-size:20px}.stockCard{cursor:pointer}.stockCard:hover{border-color:var(--primary,#555)}.stockStatus{display:inline-flex;padding:3px 8px;border-radius:999px;font-size:12px;font-weight:700}.stockStatus.ok{background:#e8f5ec}.stockStatus.low{background:#fff3d6}.stockStatus.out{background:#fde7e7}.invDetailHero{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:10px 0 16px}.invMetric{border:1px solid var(--border,#ddd);border-radius:12px;padding:12px}.invActions{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.invHistoryRow{display:grid;grid-template-columns:140px 1fr auto;gap:12px;padding:10px 0;border-bottom:1px solid var(--border,#ddd)}@media(max-width:700px){.inventoryKpis,.invDetailHero{grid-template-columns:1fr 1fr}.inventoryToolbar input{max-width:none;width:100%}.invHistoryRow{grid-template-columns:1fr}}
/* wfm-v5522-integration-easy-ui */
/* wfm-v5523-hidden-text-and-integration-actions-fix */
.integrationSetup{overflow:hidden}.integrationSteps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:4px 0 18px}.integrationSteps span{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--border,#e5e7eb);border-radius:10px;font-size:12px}.integrationSteps b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#eef2f7}.integrationSection{margin-top:24px!important;padding-top:20px;border-top:1px solid var(--border,#e5e7eb)}.integrationCard button{width:100%;margin-top:4px}.integrationCard{min-width:0}.integrationRow{min-width:0}.integrationRow>*{min-width:0;overflow-wrap:anywhere}@media(max-width:700px){.integrationSteps{grid-template-columns:1fr}.integrationSection{align-items:stretch}.integrationSection>button{width:100%}}
/* v5.537 inline Inventory + Products */
.simpleOpsTable{border:1px solid var(--border,#e5e7eb);border-radius:10px;overflow:hidden;background:var(--surface,#fff)}.simpleOpsHead,.simpleOpsRow{display:grid;grid-template-columns:minmax(180px,1fr) 170px 120px 120px 54px;align-items:center;gap:0}.simpleOpsHead{background:var(--surface2,#f5f7f7);font-size:11px;font-weight:750;text-transform:uppercase;letter-spacing:.03em;color:var(--muted,#667);border-bottom:1px solid var(--border,#e5e7eb)}.simpleOpsHead span,.simpleOpsRow>div{padding:9px 12px}.simpleOpsRow{border-bottom:1px solid var(--border,#e5e7eb);min-height:44px}.simpleOpsRow:last-child{border-bottom:0}.simpleOpsRow input,.simpleOpsRow select{width:100%;min-height:34px;margin:0;padding:6px 8px;border:1px solid transparent;background:transparent;border-radius:7px;color:inherit}.simpleOpsRow input:hover,.simpleOpsRow select:hover,.simpleOpsRow input:focus,.simpleOpsRow select:focus{border-color:var(--border,#cbd8d8);background:var(--surface,#fff);outline:none}.simpleOpsRow .inlineActions{display:flex;align-items:center;gap:6px}.simpleOpsRow .inlineSaveState{font-size:11px;color:var(--muted,#667);white-space:nowrap}.simpleOpsRow .recipeLink{padding:6px 9px;min-height:32px}.simpleAddRow{margin-top:8px;border:0!important;background:transparent!important;box-shadow:none!important;padding:7px 3px!important;font-size:12px!important;font-weight:700!important;color:var(--primary,#315f63)!important}.simpleAddRow:hover{text-decoration:underline}.simpleOpsNew{background:var(--surface2,#f8faf9)}@media(max-width:700px){.simpleOpsHead,.simpleOpsRow{grid-template-columns:minmax(120px,1fr) 115px 75px 75px 42px}.simpleOpsHead span,.simpleOpsRow>div{padding:8px 7px}.simpleOpsRow input,.simpleOpsRow select{font-size:12px;padding:5px}.simpleOpsHead{font-size:9px}}
.simpleOpsHead.product,.simpleOpsRow.product{grid-template-columns:minmax(180px,1fr) 170px 150px 54px}.opsExportActions{display:flex;gap:8px;flex-wrap:wrap}.rowDelete{border:0!important;background:transparent!important;box-shadow:none!important;min-width:34px!important;padding:5px!important;font-size:17px!important;color:var(--danger,#a33)!important}@media(max-width:700px){.simpleOpsHead.product,.simpleOpsRow.product{grid-template-columns:minmax(120px,1fr) 100px 95px 42px}.opsExportActions button{font-size:11px;padding:6px 8px}}
/* wfm-v5566-temperature-corrective-workflow-split-history */
/* wfm-v5567-task-history-simple-tabs
wfm-v5568-task-history-click-fix */
.taskHistoryTypeTabs{display:flex;gap:6px;margin:0 0 10px}.taskHistoryTypeTabs button{border:1px solid var(--wfm-line,#dfe8e7);background:#fff;border-radius:9px;padding:8px 12px;font-weight:700}.taskHistoryTypeTabs button.active{background:var(--wfm-primary,#146c70);color:#fff;border-color:var(--wfm-primary,#146c70)}
.tempCorrectivePanel{margin-top:10px;padding:12px;border:1px solid #e7b85b;border-radius:12px;background:#fffaf0}.tempCorrectiveOptions{display:grid;gap:7px;margin:10px 0}.tempCorrectiveOptions label{display:flex;align-items:center;gap:8px}.tempRecheckWrap{margin-top:10px}.tempRecheckWrap input{max-width:150px}.tempAttention{font-weight:800;margin-bottom:5px}
/* wfm-v5596-integration-attention-center */
.integrationAttentionCard{border:1px solid var(--border,#ddd);border-radius:14px;padding:14px;margin:10px 0}.integrationAttentionItem{display:grid;grid-template-columns:minmax(180px,1fr) minmax(180px,260px) auto;gap:10px;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid var(--border,#ddd)}.integrationAttentionItem select{width:100%}@media(max-width:720px){.integrationAttentionItem{grid-template-columns:1fr}.integrationAttentionItem button,.integrationAttentionItem select{width:100%}}
/* wfm-v5613 order monitoring */
.integrationOrderKpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 14px}.integrationOrderKpis>div{border:1px solid var(--border,#e5e7eb);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:3px}.integrationOrderKpis strong{font-size:20px}.integrationOrderKpis span{font-size:12px;color:var(--muted,#6b7280)}@media(max-width:700px){.integrationOrderKpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* wfm-v5627-integrations-ux-reorganization */
.integrationHubNav{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 18px;padding-bottom:12px;border-bottom:1px solid var(--border,#e5e7eb)}
.integrationHubNav button{border:0;background:transparent;padding:9px 12px;border-radius:9px;font-weight:700;cursor:pointer}
.integrationHubNav button.active{background:var(--accent-soft,#e8f5f3);color:var(--accent,#087f73)}
.integrationAdvancedNotice{padding:14px 16px;border:1px solid var(--border,#e5e7eb);border-radius:12px;margin:8px 0 18px}
@media(max-width:700px){.integrationHubNav{display:grid;grid-template-columns:1fr 1fr}.integrationHubNav button{text-align:left}.integrationHubNav button:last-child{grid-column:1/-1}}
/* wfm-v5628-integration-activity-issues-monitor */
.integrationActivityKpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:12px 0 14px}.integrationActivityKpis>div{border:1px solid var(--border,#d9e1e7);border-radius:12px;padding:12px;background:var(--card,#fff);display:flex;flex-direction:column;gap:4px}.integrationActivityKpis strong{font-size:20px}.integrationActivityKpis span{font-size:12px;color:var(--muted,#667085)}@media(max-width:900px){.integrationActivityKpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* wfm-v5630-integration-provider-management-ux */
.providerManagementCard{display:flex;flex-direction:column;gap:10px}.providerManagementCard .integrationActions{margin-top:auto;display:flex;gap:8px}.providerManagementCard .integrationActions button{width:auto;flex:1}.providerManagementSummary,.providerManagerStatusGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.providerManagementSummary>div,.providerManagerStatusGrid>div,.providerManagerList>div{border:1px solid var(--border,#dfe7e7);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:3px}.providerManagementSummary span,.providerManagerStatusGrid span,.providerManagerList span{font-size:11px;color:var(--muted,#667085)}.providerManagementSummary strong,.providerManagerStatusGrid strong,.providerManagerList strong{font-size:13px}.providerManagementLast{margin-top:2px}.integrationBadge.active{background:#e5f5f2;color:var(--wm-teal,#006b66)}.integrationBadge.paused{background:#fff4d6;color:#8a5a00}.integrationBadge.attention{background:#fff0ed;color:#9a3412}.integrationBadge.inactive{background:#f4f4f5;color:#52525b}.providerManagerHero{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.providerManagerHero h3{margin:3px 0}.providerManagerTabs{display:flex;gap:6px;overflow:auto;margin:16px 0;border-bottom:1px solid var(--border,#dfe7e7);padding-bottom:8px}.providerManagerTabs button{border:0;background:transparent;border-radius:8px;padding:8px 10px;font-weight:700;white-space:nowrap}.providerManagerTabs button.active{background:var(--accent-soft,#e8f5f3);color:var(--accent,#087f73)}.providerManagerList{display:grid;gap:8px}.providerManagerPrimary{margin-top:12px}.providerManagerHint{margin-top:10px}.providerManager .integrationActions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.providerManager .integrationActions button{width:auto}@media(max-width:700px){.providerManagementSummary,.providerManagerStatusGrid{grid-template-columns:1fr 1fr}.providerManagementCard .integrationActions{flex-direction:column}.providerManagerHero{align-items:center}.providerManager .integrationActions button{width:100%}}
/* wfm-v5631-final-integration-ux-cleanup */
.providerManager{max-width:760px}.providerManagerHero{padding-bottom:4px}.providerManagerTabs{position:sticky;top:0;z-index:2;background:var(--surface,#fff)}.providerManagerStatusGrid>div{min-height:64px;justify-content:center}.providerManagerStatusGrid strong{line-height:1.25}.providerManagerHint{line-height:1.5}.providerManagementCard .integrationBadge{align-self:flex-start}.providerManagementCard .muted{line-height:1.4}@media(max-width:700px){.providerManager{max-width:100%}.providerManagerTabs{margin-left:-4px;margin-right:-4px}.providerManagerTabs button{min-height:40px}.providerManagerStatusGrid{grid-template-columns:1fr}.providerManagerStatusGrid>div{min-height:0}.providerManagerHero h3{font-size:18px}}
/* wfm-v5632-app-wide-accent */
body[data-accent]{--qx-accent:var(--user-accent);--accent:var(--user-accent);accent-color:var(--user-accent)}
body[data-accent] a:not(.dangerText),body[data-accent] .linkBtn:not(.dangerText),body[data-accent] .tab.active,body[data-accent] .sideProfileLink{color:var(--user-accent)!important}
body[data-accent] .primary,body[data-accent] button.accent,body[data-accent] .progressFill:not(.danger):not(.warning):not(.success){background-color:var(--user-accent)!important}
body[data-accent] input:focus,body[data-accent] select:focus,body[data-accent] textarea:focus{border-color:var(--user-accent)!important;outline-color:var(--user-accent)!important}
/* semantic success/warning/danger colors intentionally remain independent */
/* wfm-v5640-per-user-global-theme-engine */
body[data-accent]{--wm-teal:var(--user-accent);--wm-teal-dark:var(--user-accent-dark);--wm-teal-soft:var(--user-accent-soft);--qx-teal:var(--user-accent);--qx-accent:var(--user-accent);--qx-soft:var(--user-accent-soft);--accent:var(--user-accent);--accent-hover:var(--user-accent-dark);--accent-soft:var(--user-accent-soft);--accent-border:var(--user-accent-border);--header-bg:var(--user-accent);--nav-active:var(--user-accent-soft);--focus-ring:var(--user-accent-ring);accent-color:var(--user-accent)}
body[data-accent] #app>header{background:var(--header-bg)!important;color:#fff!important;border-color:transparent!important}
body[data-accent] #app>header h1,body[data-accent] #app>header #who,body[data-accent] #app>header .topNotificationBtn,body[data-accent] #app>header .topLogout,body[data-accent] #app>header .menuToggle{color:#fff!important}
body[data-accent] #app>header .topNotificationBtn:hover,body[data-accent] #app>header .topLogout:hover,body[data-accent] #app>header .menuToggle:hover{background:rgba(255,255,255,.12)!important}
body[data-accent] #sideNav .tab.active,body[data-accent] #mobileBottomNav .tab.active{color:var(--user-accent)!important;background:var(--user-accent-soft)!important}
body[data-accent] .primary,body[data-accent] button.accent,body[data-accent] .buttonLike.primary{background:var(--user-accent)!important;border-color:var(--user-accent)!important;color:#fff!important}
body[data-accent] .primary:hover:not(:disabled),body[data-accent] button.accent:hover:not(:disabled){background:var(--user-accent-dark)!important;border-color:var(--user-accent-dark)!important}
body[data-accent] a:not(.dangerText),body[data-accent] .linkBtn:not(.dangerText),body[data-accent] .textLink:not(.dangerText){color:var(--user-accent)!important}
body[data-accent] input:focus,body[data-accent] select:focus,body[data-accent] textarea:focus,body[data-accent] button:focus-visible{border-color:var(--user-accent)!important;outline-color:var(--user-accent)!important;box-shadow:0 0 0 3px var(--user-accent-ring)!important}
body[data-accent] .progressFill:not(.danger):not(.warning):not(.success),body[data-accent] .dashboardHoursFill,body[data-accent] .dashboardProgressFill{background:var(--user-accent)!important}
body[data-accent] #dashboardView .dashboardMiniKpi,body[data-accent] #dashboardView .dashboardHero,body[data-accent] #dashboardView .dashboardGrid>.card{border-color:var(--user-accent-border)!important}
body[data-accent] #dashboardView .dashboardSectionIcon,body[data-accent] #dashboardView .dashboardStaffAvatar{background:var(--user-accent-soft)!important;color:var(--user-accent)!important}
body[data-accent] .settingsDashIcon,body[data-accent] .integrationHubNav button.active,body[data-accent] .providerManagerTabs button.active{background:var(--user-accent-soft)!important;color:var(--user-accent)!important}
body[data-accent] .settingsDashboardCard:hover,body[data-accent] .card:focus-within{border-color:var(--user-accent-border)!important}
body[data-accent] .menuBadge{background:#fff!important;color:var(--user-accent)!important;border-color:#fff!important}
body[data-accent].theme-dark{--qx-soft:color-mix(in srgb,var(--user-accent) 22%,#172223);--accent-soft:color-mix(in srgb,var(--user-accent) 22%,#172223);--nav-active:color-mix(in srgb,var(--user-accent) 22%,#172223)}
/* Status semantics intentionally remain independent: danger/error/late, warning, success and attendance states are not recolored. */
/* wfm-v5641-full-application-theme-conversion
Decorative authenticated-app colors follow each user's Appearance accent.
Semantic status colors (success/warning/danger/late/approved/rejected) stay independent. */
body[data-accent]{
--theme-primary:var(--user-accent);
--theme-primary-hover:var(--user-accent-dark);
--theme-primary-soft:var(--user-accent-soft);
--theme-primary-border:var(--user-accent-border);
--theme-primary-ring:var(--user-accent-ring);
--theme-surface:color-mix(in srgb,var(--user-accent) 4%,#fff);
--theme-surface-strong:color-mix(in srgb,var(--user-accent) 8%,#fff);
}
body[data-accent] #app .tabs .tab.active,
body[data-accent] #app .sideTabs .tab.active,
body[data-accent] #app #sideNav .tab.active,
body[data-accent] #app #mobileBottomNav .tab.active{color:var(--theme-primary)!important;background:var(--theme-primary-soft)!important;border-color:var(--theme-primary-border)!important}
body[data-accent] #app .tabs .tab.active::after,
body[data-accent] #app .sideTabs .tab.active::after{background:var(--theme-primary)!important}
body[data-accent] #app .workLocationSelect svg,
body[data-accent] #app .workplaceSelector svg,
body[data-accent] #app .dashboardSectionLink,
body[data-accent] #app .employeeOpenShiftsViewAll,
body[data-accent] #app .employeeMyRequestsViewAll{color:var(--theme-primary)!important}
/* Dashboard: remove the legacy green/purple decorative palette. */
body[data-accent] #dashboardView .employeeWorkdayTriptych,
body[data-accent] #dashboardView .employeeActionSplit,
body[data-accent] #dashboardView .dashboardGrid>.card,
body[data-accent] #dashboardView .employeeTodayShiftCard,
body[data-accent] #dashboardView .employeeNextShiftCard,
body[data-accent] #dashboardView .employeeDashClock,
body[data-accent] #dashboardView .employeeOpenShifts,
body[data-accent] #dashboardView .employeeMyRequests{border-color:var(--theme-primary-border)!important}
body[data-accent] #dashboardView .employeeTodayShiftCard,
body[data-accent] #dashboardView .employeeDashClock,
body[data-accent] #dashboardView .employeeNextShiftCard{background:var(--theme-surface)!important}
body[data-accent] #dashboardView .employeeTodayShiftIcon,
body[data-accent] #dashboardView .employeeNextShiftIcon,
body[data-accent] #dashboardView .employeeDashClockIcon,
body[data-accent] #dashboardView .employeeOpenShiftsIcon,
body[data-accent] #dashboardView .employeeMyRequestsIcon,
body[data-accent] #dashboardView .dashboardSectionIcon,
body[data-accent] #dashboardView .employeeKpiIcon{background:var(--theme-primary-soft)!important;color:var(--theme-primary)!important;border-color:var(--theme-primary-border)!important}
body[data-accent] #dashboardView .employeeDashClockButton:not(.is-clocked-in):not(.danger):not(.warning),
body[data-accent] #dashboardView .employeeOpenShiftClaim:not(.is-pending),
body[data-accent] #dashboardView button.primary:not(.danger):not(.warning){background:var(--theme-primary)!important;border-color:var(--theme-primary)!important;color:#fff!important}
body[data-accent] #dashboardView .employeeDashClockButton:not(.is-clocked-in):not(.danger):not(.warning):hover,
body[data-accent] #dashboardView .employeeOpenShiftClaim:not(.is-pending):hover{background:var(--theme-primary-hover)!important;border-color:var(--theme-primary-hover)!important}
body[data-accent] #dashboardView .employeeShiftProgressFill,
body[data-accent] #dashboardView .taskProgressTrack>span,
body[data-accent] #dashboardView .dashboardProgressFill,
body[data-accent] #dashboardView .dashboardHoursFill{background:var(--theme-primary)!important}
body[data-accent] #dashboardView .employeeOpenShiftDateTile{background:var(--theme-primary-soft)!important;border-color:var(--theme-primary-border)!important}
body[data-accent] #dashboardView .employeeOpenShiftDateTile span,
body[data-accent] #dashboardView .employeeOpenShiftDateTile strong{color:var(--theme-primary)!important}
body[data-accent] #dashboardView .employeeMyRequestTypeIcon:not(.leave),
body[data-accent] #dashboardView .employeeMyRequestTypeIcon.claim,
body[data-accent] #dashboardView .employeeMyRequestTypeIcon.swap,
body[data-accent] #dashboardView .employeeMyRequestTypeIcon.giveaway{background:var(--theme-primary-soft)!important;color:var(--theme-primary)!important}
body[data-accent] #dashboardView .employeeKpiCard:not(.is-danger):not(.is-warning){border-color:var(--theme-primary-border)!important}
body[data-accent] #dashboardView .employeeKpiCard:not(.is-danger):not(.is-warning):hover{background:var(--theme-primary-soft)!important}
/* Authenticated modules use the same decorative theme family. */
body[data-accent] #app main .card:not(.danger):not(.warning):not(.success):focus-within{border-color:var(--theme-primary-border)!important}
body[data-accent] #app main .secondary.active,
body[data-accent] #app main .filterChip.active,
body[data-accent] #app main .segmented button.active,
body[data-accent] #app main [role="tab"][aria-selected="true"]{background:var(--theme-primary-soft)!important;color:var(--theme-primary)!important;border-color:var(--theme-primary-border)!important}
body[data-accent] #scheduleView .calendarDay.today:not(.danger):not(.warning),
body[data-accent] #scheduleView .calendarDay.selected:not(.danger):not(.warning){border-color:var(--theme-primary)!important;box-shadow:inset 0 0 0 1px var(--theme-primary)!important}
body[data-accent] #scheduleView .scheduleColorDot.assigned{background:var(--theme-primary-soft)!important;border-color:var(--theme-primary-border)!important}
body[data-accent] #settingsView .settingsDashIcon,
body[data-accent] #integrationsView .integrationHubNav button.active,
body[data-accent] #operationsView .operationsNav button.active{background:var(--theme-primary-soft)!important;color:var(--theme-primary)!important;border-color:var(--theme-primary-border)!important}
body[data-accent] #app input[type="checkbox"],body[data-accent] #app input[type="radio"]{accent-color:var(--theme-primary)!important}
/* Dark theme derives the same user's accent without turning surfaces white. */
body[data-accent].theme-dark{--theme-surface:color-mix(in srgb,var(--user-accent) 10%,#172224);--theme-surface-strong:color-mix(in srgb,var(--user-accent) 16%,#172224)}
body[data-accent].theme-dark #dashboardView .employeeTodayShiftCard,
body[data-accent].theme-dark #dashboardView .employeeDashClock,
body[data-accent].theme-dark #dashboardView .employeeNextShiftCard{background:var(--theme-surface)!important;border-color:var(--theme-primary-border)!important}
/* wfm-v56431-manager-dashboard-theme-completion */
body[data-accent] #dashboardView .dashboardManagerKpis .dashboardMiniKpi,body[data-accent] #dashboardView .dashboardBudget,body[data-accent] #dashboardView .dashboardTodayGlance,body[data-accent] #dashboardView .dashboardToday,body[data-accent] #dashboardView .dashboardOpen,body[data-accent] #dashboardView .dashboardAnnouncements,body[data-accent] #dashboardView .dashboardTaskCard{border-color:var(--theme-primary-border)!important}
body[data-accent] #dashboardView .dashboardManagerKpis .dashboardKpiIcon,body[data-accent] #dashboardView .dashboardTodayGlance .dashboardSectionIcon,body[data-accent] #dashboardView .dashboardToday .dashboardSectionIcon,body[data-accent] #dashboardView .dashboardOpen .dashboardSectionIcon,body[data-accent] #dashboardView .dashboardAnnouncements .dashboardSectionIcon,body[data-accent] #dashboardView .dashboardTaskCard .dashboardSectionIcon{background:var(--theme-primary-soft)!important;color:var(--theme-primary)!important;border-color:var(--theme-primary-border)!important}
body[data-accent] #dashboardView .dashboardManagerKpis .dashboardMiniProgress{background:var(--theme-primary-soft)!important}
body[data-accent] #dashboardView .dashboardManagerKpis .dashboardMiniProgress i,body[data-accent] #dashboardView .dashboardBudgetTrack>i,body[data-accent] #dashboardView .dashboardBudgetTrack>span{background:var(--theme-primary)!important}
body[data-accent] #dashboardView .dashboardWeekCurrent,body[data-accent] #dashboardView .dashboardWeekArrow{color:var(--theme-primary)!important;border-color:var(--theme-primary-border)!important}
body[data-accent] #dashboardView .dashboardWeekCurrent:hover,body[data-accent] #dashboardView .dashboardWeekArrow:hover{background:var(--theme-primary-soft)!important}
body[data-accent] #dashboardView .todayGlanceStat:not([data-glance-kind="late"]):hover{border-color:var(--theme-primary-border)!important;background:var(--theme-primary-soft)!important}
body[data-accent] #dashboardView .todayGlanceStat:not([data-glance-kind="late"]) strong{color:var(--theme-primary)!important}
body[data-accent] #dashboardView .dashboardSectionLink{color:var(--theme-primary)!important}
body[data-accent] #dashboardView .dashboardStaffAvatar,body[data-accent] #managerDashboardListDlg .dashboardStaffAvatar{background:var(--theme-primary-soft)!important;color:var(--theme-primary)!important;border-color:var(--theme-primary-border)!important}
body[data-accent] #managerDashboardListDlg .wmOpenShiftFill:not(.danger):not(.warning),body[data-accent] #managerDashboardListDlg button.primary:not(.danger):not(.warning){background:var(--theme-primary)!important;border-color:var(--theme-primary)!important;color:#fff!important}
body[data-accent] #dashboardView .wfmAttentionReview,body[data-accent] #managerDashboardListDlg .wfmAttentionReview{background:var(--theme-primary-soft)!important;color:var(--theme-primary)!important;border-color:var(--theme-primary-border)!important}
body[data-accent].theme-dark #dashboardView .dashboardManagerKpis .dashboardMiniProgress{background:color-mix(in srgb,var(--theme-primary) 18%,#172224)!important}
/* wfm-v5644-global-theme-localization-completion */
body[data-accent]{--qx-primary:var(--theme-primary)!important;--qx-teal:var(--theme-primary)!important;--wm-teal:var(--theme-primary)!important;--wfm-primary:var(--theme-primary)!important;--primary:var(--theme-primary)!important;--accent:var(--theme-primary)!important;--accent-soft:var(--theme-primary-soft)!important}
body[data-accent] #dashboardView .wmOpenShiftFill,body[data-accent] #dashboardView .dashboardFillShift{background:var(--theme-primary)!important;border-color:var(--theme-primary)!important;color:#fff!important}
body[data-accent] #dashboardView .dashboardSectionIcon:not(.danger):not(.warning):not(.success),body[data-accent] #dashboardView .dashboardAnnouncementIcon{background:var(--theme-primary-soft)!important;color:var(--theme-primary)!important;border-color:var(--theme-primary-border)!important}
body[data-accent] #dashboardView .dashboardSectionLink,body[data-accent] #dashboardView a:not(.danger):not(.warning){color:var(--theme-primary)!important}
body[data-accent] #dashboardView button.primary:not(.danger):not(.warning):not(.success),body[data-accent] #dashboardView .primary:not(.danger):not(.warning):not(.success){background:var(--theme-primary)!important;border-color:var(--theme-primary)!important;color:#fff!important}
body[data-accent] input[type="checkbox"],body[data-accent] input[type="radio"]{accent-color:var(--theme-primary)!important}
/* wfm-v56491-strict-view-isolation */
#app main>.view:not(.active),main>.view:not(.active){display:none!important}
#app main>.view.active,main>.view.active{display:block!important}
/* wfm-hide-app-scrollbars-v2
*
* Hide visual scrollbar / scroll indicators throughout
* Workforce Manager while preserving all scrolling,
* touch gestures and iOS momentum scrolling.
*/
html,
body,
* {
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
display: none !important;
}
/* wfm-mobile-drawer-footer-v5666
*
* Mobile drawer:
* - ends above fixed bottom navigation
* - middle menu area scrolls
* - Logout footer remains permanently visible
* - no visual scrollbar
*/
@media (max-width:700px){
body.wfm-mobile-browser #sideNav{
display:flex!important;
flex-direction:column!important;
position:fixed!important;
top:0!important;
bottom:62px!important; /* wfm-mobile-drawer-gap-v5667 */
height:auto!important;
max-height:none!important;
overflow:hidden!important;
box-sizing:border-box!important;
}
/*
* Drawer header never participates in scrolling.
*/
body.wfm-mobile-browser #sideNav .sideNavHeader{
flex:0 0 auto!important;
}
/*
* This is the ONLY vertically scrolling portion
* of the mobile drawer.
*/
body.wfm-mobile-browser #sideNav .tabs.sideTabs{
display:flex!important;
flex:1 1 0!important;
min-height:0!important;
overflow-x:hidden!important;
overflow-y:auto!important;
-webkit-overflow-scrolling:touch!important;
overscroll-behavior-y:contain!important;
touch-action:pan-y!important;
padding-bottom:12px!important;
scrollbar-width:none!important;
-ms-overflow-style:none!important;
}
body.wfm-mobile-browser
#sideNav
.tabs.sideTabs::-webkit-scrollbar{
width:0!important;
height:0!important;
display:none!important;
}
/*
* Fixed drawer footer.
*
* Because #sideNav itself is a flex column and has
* overflow:hidden, this footer cannot scroll away.
*/
body.wfm-mobile-browser #sideNav .sideNavFooter{
display:flex!important;
flex:0 0 auto!important;
width:100%!important;
min-height:64px!important;
box-sizing:border-box!important;
align-items:center!important;
justify-content:center!important;
padding:10px 14px!important;
margin:0!important;
overflow:hidden!important;
position:relative!important;
z-index:10!important;
background:var(--wfm-surface,#fff)!important;
border-top:
1px solid
var(--wfm-border,#dce7e6)!important;
}
/*
* Actual Logout button.
*/
body.wfm-mobile-browser
#sideNav
#mobileDrawerLogout{
display:flex!important;
visibility:visible!important;
opacity:1!important;
align-items:center!important;
justify-content:center!important;
position:relative!important;
width:100%!important;
max-width:none!important;
min-height:44px!important;
margin:0!important;
padding:10px 14px!important;
box-sizing:border-box!important;
flex:1 1 auto!important;
pointer-events:auto!important;
}
/*
* Keep footer available whenever the drawer itself
* is displayed/open, regardless of older rules.
*/
body.wfm-mobile-browser
#sideNav:not(.hidden)
.sideNavFooter{
display:flex!important;
}
body.wfm-mobile-browser
#sideNav:not(.hidden)
#mobileDrawerLogout{
display:flex!important;
}
/*
* Dark Appearance.
*/
body.wfm-mobile-browser.theme-dark
#sideNav
.sideNavFooter{
background:var(--wfm-surface,#172123)!important;
border-color:var(--wfm-border,#2b393b)!important;
}
}
/* wfm-mobile-drawer-footer-v5666-end */
/* wfm-mobile-header-logout-v5671
*
* Hide only the HEADER Logout on phone layouts.
*
* Specificity intentionally matches/exceeds the legacy
* inline #app>header .topLogout rule.
*
* #logout stays in the DOM so the More-drawer Logout
* can continue calling the existing logout handler.
*/
@media screen and (max-width:700px){
#app > header #logout.topLogout{
display:none!important;
visibility:hidden!important;
opacity:0!important;
pointer-events:none!important;
width:0!important;
min-width:0!important;
max-width:0!important;
height:0!important;
min-height:0!important;
padding:0!important;
margin:0!important;
border:0!important;
overflow:hidden!important;
flex:0 0 0!important;
}
}
/* wfm-mobile-header-logout-v5671-end */
/* wfm-mobile-drawer-layer-fix-v5672
* Keep the mobile More drawer above Messages composer and bottom navigation.
* Do not alter Messages composer geometry or scroll/keyboard behavior.
*/
@media screen and (max-width:700px){
#navBackdrop.navBackdrop{
z-index:998!important;
}
#sideNav.sideNav{
z-index:999!important;
}
#sideNav #mobileDrawerLogout{
position:relative!important;
z-index:1000!important;
pointer-events:auto!important;
}
}
/* wfm-mobile-drawer-layer-fix-v5672-end */
/* wfm-mobile-sidebar-top-layer-v5673
* More/sidebar is a true application-level overlay.
* It stays above Messages composer and mobile bottom navigation.
* Sidebar scrolls independently; Messages geometry remains untouched.
*/
@media screen and (max-width:700px){
#navBackdrop.navBackdrop{
position:fixed!important;
inset:0!important;
z-index:2147483645!important;
}
#sideNav.sideNav{
position:fixed!important;
top:0!important;
right:0!important;
bottom:0!important;
height:100dvh!important;
max-height:100dvh!important;
z-index:2147483646!important;
overflow:hidden!important;
isolation:isolate!important;
display:flex!important;
flex-direction:column!important;
}
#sideNav .sideNavHeader{
flex:0 0 auto!important;
}
#sideNav .sideNavBody{
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;
}
#sideNav .sideNavFooter{
position:relative!important;
flex:0 0 auto!important;
z-index:2!important;
background:inherit!important;
padding-bottom:max(14px,env(safe-area-inset-bottom))!important;
}
#sideNav #mobileDrawerLogout{
position:relative!important;
z-index:3!important;
display:flex!important;
visibility:visible!important;
opacity:1!important;
pointer-events:auto!important;
}
}
/* wfm-mobile-sidebar-top-layer-v5673-end */
/* wfm-mobile-nav-sidebar-level-v5674
* Mobile More sidebar and bottom navigation form one navigation layer.
* Sidebar stops above bottom nav.
* Bottom nav remains visible and usable while More is open.
* Messages composer remains underneath.
*/
@media screen and (max-width:700px){
:root{
--wfm-mobile-nav-height:74px;
}
#navBackdrop.navBackdrop{
position:fixed!important;
top:0!important;
right:0!important;
bottom:var(--wfm-mobile-nav-height)!important;
left:0!important;
z-index:2147483643!important;
}
#sideNav.sideNav{
position:fixed!important;
top:0!important;
right:0!important;
bottom:var(--wfm-mobile-nav-height)!important;
height:auto!important;
max-height:calc(100dvh - var(--wfm-mobile-nav-height))!important;
z-index:2147483644!important;
overflow:hidden!important;
isolation:isolate!important;
display:flex!important;
flex-direction:column!important;
}
#sideNav .sideNavHeader{
flex:0 0 auto!important;
}
#sideNav .sideNavBody{
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;
}
#sideNav .sideNavFooter{
position:relative!important;
flex:0 0 auto!important;
z-index:2!important;
background:inherit!important;
padding-bottom:12px!important;
}
#sideNav #mobileDrawerLogout{
position:relative!important;
z-index:3!important;
display:flex!important;
visibility:visible!important;
opacity:1!important;
pointer-events:auto!important;
}
.mobileBottomNav{
position:fixed!important;
left:0!important;
right:0!important;
bottom:0!important;
z-index:2147483645!important;
}
}
/* wfm-mobile-nav-sidebar-level-v5674-end */
/* wfm-mobile-sidebar-nav-same-level-v5675
* More sidebar + bottom navigation are one visual navigation layer.
* Bottom navigation remains bright, undimmed and interactive.
* Messages stays underneath.
*/
@media screen and (max-width:700px){
:root{
--wfm-mobile-nav-height:74px;
}
#navBackdrop.navBackdrop{
position:fixed!important;
top:0!important;
right:0!important;
bottom:var(--wfm-mobile-nav-height)!important;
left:0!important;
height:auto!important;
z-index:2147483643!important;
}
#sideNav.sideNav{
position:fixed!important;
top:0!important;
right:0!important;
bottom:var(--wfm-mobile-nav-height)!important;
height:auto!important;
max-height:calc(100dvh - var(--wfm-mobile-nav-height))!important;
z-index:2147483644!important;
}
.mobileBottomNav{
position:fixed!important;
left:0!important;
right:0!important;
bottom:0!important;
z-index:2147483645!important;
opacity:1!important;
filter:none!important;
visibility:visible!important;
pointer-events:auto!important;
isolation:isolate!important;
}
body:has(#sideNav.open) .mobileBottomNav,
body:has(#sideNav.is-open) .mobileBottomNav,
body:has(#sideNav.active) .mobileBottomNav{
opacity:1!important;
filter:none!important;
pointer-events:auto!important;
}
}
/* wfm-mobile-sidebar-nav-same-level-v5675-end */
/* ==========================================================
wfm-global-progress-accent-v5676
All NORMAL progress indicators follow account Appearance.
Semantic danger / warning / error states remain semantic.
Progress calculations, width and behavior are unchanged.
========================================================== */
body[data-accent]{
--wfm-progress-accent:var(--theme-primary,var(--user-accent));
}
/* Generic progress fills */
body[data-accent] .progressFill:not(.danger):not(.warning):not(.error):not(.success),
body[data-accent] .progress-fill:not(.danger):not(.warning):not(.error):not(.success){
background:var(--wfm-progress-accent)!important;
background-color:var(--wfm-progress-accent)!important;
}
/* Employee dashboard */
body[data-accent] #dashboardView .employeeShiftProgressFill,
body[data-accent].wfm-mobile-employee #dashboardView .employeeShiftProgressFill,
body[data-accent] #dashboardView .dashboardProgressFill,
body[data-accent] #dashboardView .dashboardHoursFill{
background:var(--wfm-progress-accent)!important;
background-color:var(--wfm-progress-accent)!important;
}
/* Employee + Manager Task Completion progress */
body[data-accent] #dashboardView .taskProgressTrack > span,
body[data-accent] #employeeTaskProgressBar,
body[data-accent] #managerTaskProgressBar{
background:var(--wfm-progress-accent)!important;
background-color:var(--wfm-progress-accent)!important;
}
/* Manager dashboard KPI progress */
body[data-accent] #dashboardView .dashboardMiniProgress > i,
body[data-accent] #dashboardView .dashboardMiniProgress > span,
body[data-accent] #dashboardView .dashboardBudgetTrack > i,
body[data-accent] #dashboardView .dashboardBudgetTrack > span{
background:var(--wfm-progress-accent)!important;
background-color:var(--wfm-progress-accent)!important;
}
/* Operations progress */
body[data-accent] #operationsView .opProgressTrack > span,
body[data-accent] #operationsDlg .opProgressTrack > span,
body[data-accent] .opProgressTrack > span{
background:var(--wfm-progress-accent)!important;
background-color:var(--wfm-progress-accent)!important;
}
/* Native HTML progress controls where used */
body[data-accent] progress{
accent-color:var(--wfm-progress-accent)!important;
}
body[data-accent] progress::-webkit-progress-value{
background-color:var(--wfm-progress-accent)!important;
}
body[data-accent] progress::-moz-progress-bar{
background-color:var(--wfm-progress-accent)!important;
}
/* Preserve semantic progress states */
body[data-accent] .progressFill.danger,
body[data-accent] .progressFill.error,
body[data-accent] .progress-fill.danger,
body[data-accent] .progress-fill.error{
background-color:var(--danger,#dc2626)!important;
}
body[data-accent] .progressFill.warning,
body[data-accent] .progress-fill.warning{
background-color:var(--warning,#d97706)!important;
}
/* wfm-global-progress-accent-v5676-end */
/* ==========================================================
wfm-progress-manager-match-v5677
Employee progress uses the SAME theme source as Manager.
One account accent -> one progress appearance.
Widths, percentages, calculations and timers unchanged.
========================================================== */
body[data-accent]{
--wfm-shared-progress-fill:var(--theme-primary,var(--user-accent));
--wfm-shared-progress-track:var(--theme-primary-soft,#e6eeee);
}
/* ---------- SHARED DASHBOARD PROGRESS FILLS ---------- */
body[data-accent] #dashboardView :is(
.employeeShiftProgressFill,
.dashboardProgressFill,
.dashboardHoursFill,
#employeeTaskProgressBar,
#managerTaskProgressBar,
.taskProgressTrack > span,
.dashboardMiniProgress > i,
.dashboardMiniProgress > span,
.dashboardBudgetTrack > i,
.dashboardBudgetTrack > span
){
background:var(--wfm-shared-progress-fill)!important;
background-color:var(--wfm-shared-progress-fill)!important;
}
/* ---------- EMPLOYEE SHIFT: MATCH MANAGER THEME ---------- */
body[data-accent] #dashboardView .employeeShiftProgressTrack,
body[data-accent].wfm-mobile-employee #dashboardView .employeeShiftProgressTrack{
background:var(--wfm-shared-progress-track)!important;
background-color:var(--wfm-shared-progress-track)!important;
}
body[data-accent] #dashboardView .employeeShiftProgressFill,
body[data-accent].wfm-mobile-employee #dashboardView .employeeShiftProgressFill,
body[data-accent].theme-dark.wfm-mobile-employee #dashboardView .employeeShiftProgressFill{
background:var(--wfm-shared-progress-fill)!important;
background-color:var(--wfm-shared-progress-fill)!important;
}
/* ---------- TASK COMPLETION: EMPLOYEE = MANAGER ---------- */
body[data-accent] #dashboardView #employeeTodayTasksCard .taskProgressTrack,
body[data-accent] #dashboardView #managerTaskProgressCard .taskProgressTrack{
background:var(--wfm-shared-progress-track)!important;
background-color:var(--wfm-shared-progress-track)!important;
}
body[data-accent] #dashboardView #employeeTaskProgressBar,
body[data-accent] #dashboardView #managerTaskProgressBar{
background:var(--wfm-shared-progress-fill)!important;
background-color:var(--wfm-shared-progress-fill)!important;
}
/* ---------- MANAGER KPI / BUDGET ---------- */
body[data-accent] #dashboardView .dashboardMiniProgress{
background:var(--wfm-shared-progress-track)!important;
}
body[data-accent] #dashboardView .dashboardMiniProgress > i,
body[data-accent] #dashboardView .dashboardBudgetTrack > span{
background:var(--wfm-shared-progress-fill)!important;
background-color:var(--wfm-shared-progress-fill)!important;
}
/* ---------- OPERATIONS ---------- */
body[data-accent] .opProgressTrack > span{
background:var(--wfm-shared-progress-fill)!important;
background-color:var(--wfm-shared-progress-fill)!important;
}
/* ---------- SEMANTIC EXCEPTIONS ---------- */
body[data-accent] #dashboardView .dashboardBudgetTrack.is-warning > span{
background:#c58b2b!important;
background-color:#c58b2b!important;
}
body[data-accent] #dashboardView .dashboardBudgetTrack.is-over > span{
background:var(--dash-danger,#dc2626)!important;
background-color:var(--dash-danger,#dc2626)!important;
}
body[data-accent] .progressFill.danger,
body[data-accent] .progressFill.error,
body[data-accent] .progress-fill.danger,
body[data-accent] .progress-fill.error{
background:var(--danger,#dc2626)!important;
}
body[data-accent] .progressFill.warning,
body[data-accent] .progress-fill.warning{
background:var(--warning,#d97706)!important;
}
/* wfm-progress-manager-match-v5677-end */
/* ==========================================================
wfm-employee-kpi-accent-v5678
Employee My overview KPI progress uses same account accent
as manager dashboard.
========================================================== */
/* Scheduled / Worked / Remaining progress tracks */
body[data-accent].wfm-mobile-employee #dashboardView
#dashboardEmployeeKpis .employeeKpiProgressTrack{
background:var(--theme-primary-soft)!important;
background-color:var(--theme-primary-soft)!important;
}
/* All three employee KPI progress fills */
body[data-accent].wfm-mobile-employee #dashboardView
#dashboardEmployeeKpis .employeeKpiProgressTrack > i,
body[data-accent].wfm-mobile-employee #dashboardView
#employeeKpiScheduledProgress,
body[data-accent].wfm-mobile-employee #dashboardView
#employeeKpiWorkedProgress,
body[data-accent].wfm-mobile-employee #dashboardView
#employeeKpiRemainingProgress{
background:var(--theme-primary)!important;
background-color:var(--theme-primary)!important;
}
/* Override old Remaining Hours special teal */
body[data-accent].wfm-mobile-employee #dashboardView
#dashboardEmployeeKpis .employeeKpiRemainingTrack > i{
background:var(--theme-primary)!important;
background-color:var(--theme-primary)!important;
}
/* KPI percentage numbers follow same manager accent */
body[data-accent].wfm-mobile-employee #dashboardView
#dashboardEmployeeKpis .employeeKpiProgressRow > em,
body[data-accent].wfm-mobile-employee #dashboardView
#employeeKpiScheduledPct,
body[data-accent].wfm-mobile-employee #dashboardView
#employeeKpiWorkedPct,
body[data-accent].wfm-mobile-employee #dashboardView
#employeeKpiRemainingPct{
color:var(--theme-primary)!important;
}
/* Desktop employee uses the same account accent too */
body[data-accent] #dashboardEmployeeKpis .employeeKpiProgressTrack{
background:var(--theme-primary-soft)!important;
}
body[data-accent] #dashboardEmployeeKpis .employeeKpiProgressTrack > i{
background:var(--theme-primary)!important;
background-color:var(--theme-primary)!important;
}
body[data-accent] #dashboardEmployeeKpis .employeeKpiProgressRow > em{
color:var(--theme-primary)!important;
}
/* wfm-employee-kpi-accent-v5678-end */