/* V1369: compact presentation only. Existing data, actions and scrolling are retained. */

/* Notification setup: a small prompt with readable choices. */
html body #er1368-alert-dialog .er1368-alert-dialog[role="dialog"]{width:min(100%,410px)!important;max-width:410px!important;padding:19px 16px 15px!important;border-radius:14px!important}
html body #er1368-alert-dialog .er1368-kicker{font-size:8px!important;letter-spacing:.07em!important}
html body #er1368-alert-dialog .er1368-alert-dialog h2{font-size:21px!important;line-height:1.2!important;margin:9px 34px 12px 0!important;letter-spacing:-.02em!important}
html body .er1368-alert-card{padding:12px!important;margin:9px 0!important;border-radius:10px!important}
html body .er1368-alert-heading{gap:9px!important}
html body .er1368-bell{width:30px!important;height:30px!important;border-radius:8px!important}
html body .er1368-bell svg{width:16px!important;height:16px!important}
html body .er1368-alert-heading small{font-size:8px!important;letter-spacing:.07em!important}
html body .er1368-alert-heading h3{font-size:13px!important;line-height:1.3!important;margin:2px 0 0!important}
html body .er1368-alert-detail,html body .er1368-alert-caption{font-size:11px!important;line-height:1.45!important;margin:8px 0 10px!important}
html body .er1368-alert-actions{gap:6px!important;align-items:center!important}
html body .er1368-alert-actions button{min-height:38px!important;padding:8px 9px!important;font-size:11px!important;border-radius:7px!important}
html body .er1368-alert-close{top:9px!important;right:9px!important;width:32px!important;height:32px!important;font-size:21px!important}
html body .er1368-alert-later{min-height:36px!important;padding:8px 10px!important;border-radius:7px!important;font-size:11px!important}
html body .er1368-settings-guide{font-size:11px!important;line-height:1.5!important}
html body .er1368-settings-guide h3{font-size:12px!important;margin:12px 0 6px!important}
html body .er1368-settings-guide p{margin:8px 0 12px!important}

/* Shift form: the date and times share a row; sections have a consistent rhythm. */
html body.modal-open.ww-app-visible[data-modal-type="shift"] #modalHost#modalHost .modal.er1368-shift{max-width:860px!important;width:min(860px,calc(100vw - 36px))!important;border-radius:14px!important}
html body.modal-open.ww-app-visible[data-modal-type="shift"] #modalHost#modalHost .er1368-shift .modal-head{min-height:60px!important;padding:12px 16px!important}
html body.modal-open.ww-app-visible[data-modal-type="shift"] #modalHost#modalHost .er1368-shift .modal-head:before{font-size:8px!important;left:16px!important;top:9px!important;letter-spacing:.09em!important}
html body.modal-open.ww-app-visible[data-modal-type="shift"] #modalHost#modalHost .er1368-shift .modal-head h2{font-size:18px!important;line-height:1.2!important;margin:9px 25px 0 0!important;letter-spacing:-.015em!important}
html body.modal-open.ww-app-visible[data-modal-type="shift"] #modalHost#modalHost .er1368-shift .modal-head .modal-x{width:32px!important;height:32px!important;min-width:32px!important;flex-basis:32px!important;border-radius:7px!important}
html body.modal-open.ww-app-visible[data-modal-type="shift"] #modalHost#modalHost .er1368-shift .modal-body{padding:12px!important}
html body.modal-open.ww-app-visible[data-modal-type="shift"] #modalHost#modalHost .er1368-shift .er1367-form-grid,
html body.modal-open.ww-app-visible[data-modal-type="shift"] #modalHost#modalHost .er1368-shift .er1367-form-column{gap:8px!important}
html body.modal-open.ww-app-visible[data-modal-type="shift"] #modalHost#modalHost .er1368-shift .er1367-form-column>.er932-section{padding:9px!important;border-radius:9px!important}
html body.modal-open.ww-app-visible[data-modal-type="shift"] #modalHost#modalHost .er1368-shift .er932-label{font-size:10px!important;letter-spacing:.035em!important;margin:0 0 7px!important;gap:5px!important}
html body.modal-open.ww-app-visible[data-modal-type="shift"] #modalHost#modalHost .er1368-shift .er932-label svg{width:12px!important;height:12px!important}
html body.modal-open.ww-app-visible[data-modal-type="shift"] #modalHost#modalHost .er1368-shift .er932-team-row{min-height:42px!important;padding:7px 8px!important;border-radius:7px!important;gap:7px!important}
html body.modal-open.ww-app-visible[data-modal-type="shift"] #modalHost#modalHost .er1368-shift .er932-team-row .names,
html body.modal-open.ww-app-visible[data-modal-type="shift"] #modalHost#modalHost .er1368-shift .er962-client-copy b{font-size:12px!important;line-height:1.25!important}
html body.modal-open.ww-app-visible[data-modal-type="shift"] #modalHost#modalHost .er1368-shift .er962-client-copy small{font-size:9px!important;line-height:1.25!important;margin-top:2px!important}
html body.modal-open.ww-app-visible[data-modal-type="shift"] #modalHost#modalHost .er1368-shift .er932-stack .av{width:25px!important;height:25px!important;min-width:25px!important;font-size:9px!important}
html body.modal-open.ww-app-visible[data-modal-type="shift"] #modalHost#modalHost .er1368-shift .er932-add-client-link{padding:5px 0 0!important;margin-top:4px!important;font-size:11px!important;line-height:1.3!important;min-height:23px!important}
html body.modal-open.ww-app-visible[data-modal-type="shift"] #modalHost#modalHost .er1368-shift .er1337-start-finish-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr)!important;gap:7px!important}
html body.modal-open.ww-app-visible[data-modal-type="shift"] #modalHost#modalHost .er1368-shift .er1337-start-finish-grid>.er1337-date-field{grid-column:auto!important}
html body.modal-open.ww-app-visible[data-modal-type="shift"] #modalHost#modalHost .er1368-shift .er932-field>label{font-size:9px!important;line-height:1.2!important;margin-bottom:5px!important;letter-spacing:0!important}
html body.modal-open.ww-app-visible[data-modal-type="shift"] #modalHost#modalHost .er1368-shift :is(.er1322-time-face,.er1028-date-button){height:38px!important;min-height:38px!important;border-radius:7px!important;padding:7px 8px!important;font-size:13px!important}
html body.modal-open.ww-app-visible[data-modal-type="shift"] #modalHost#modalHost .er1368-shift .er1028-date-button{gap:5px!important;white-space:nowrap!important}
html body.modal-open.ww-app-visible[data-modal-type="shift"] #modalHost#modalHost .er1368-shift .er1028-date-icon{width:12px!important;min-width:12px!important;height:12px!important}
html body.modal-open.ww-app-visible[data-modal-type="shift"] #modalHost#modalHost .er1368-shift .er1337-total-time{min-height:30px!important;padding:6px 8px!important;margin-top:7px!important;border-radius:7px!important}
html body.modal-open.ww-app-visible[data-modal-type="shift"] #modalHost#modalHost .er1368-shift .er1337-total-time span{font-size:10px!important}
html body.modal-open.ww-app-visible[data-modal-type="shift"] #modalHost#modalHost .er1368-shift .er1337-total-time strong{font-size:14px!important}
html body.modal-open.ww-app-visible[data-modal-type="shift"] #modalHost#modalHost .er1368-shift .er1023-roster-guard{min-height:0!important;margin:6px 0 0!important;padding:7px 8px!important;gap:7px!important;border-radius:7px!important}
html body.modal-open.ww-app-visible[data-modal-type="shift"] #modalHost#modalHost .er1368-shift .er1023-roster-guard strong{font-size:11px!important;line-height:1.25!important}
html body.modal-open.ww-app-visible[data-modal-type="shift"] #modalHost#modalHost .er1368-shift .er1023-roster-guard :is(small,p){font-size:9px!important;line-height:1.3!important;margin:2px 0 0!important}
html body.modal-open.ww-app-visible[data-modal-type="shift"] #modalHost#modalHost .er1368-shift .er1367-publish-row{margin-top:8px!important}
html body.modal-open.ww-app-visible[data-modal-type="shift"] #modalHost#modalHost .er1368-shift .er1367-publish{padding:8px 9px!important;grid-template-columns:68px minmax(0,1fr)!important;border-radius:8px!important}
html body.modal-open.ww-app-visible[data-modal-type="shift"] #modalHost#modalHost .er1368-shift .er1367-publish .er932-label{white-space:nowrap!important}
html body.modal-open.ww-app-visible[data-modal-type="shift"] #modalHost#modalHost .er1368-shift .er1367-publish .er932-label svg{display:none!important}
html body.modal-open.ww-app-visible[data-modal-type="shift"] #modalHost#modalHost .er1368-shift .er932-vis button{height:32px!important;min-height:32px!important;padding:5px 7px!important;font-size:10px!important;border-radius:6px!important}
html body.modal-open.ww-app-visible[data-modal-type="shift"] #modalHost#modalHost .er1368-shift .modal-foot{padding:9px 12px!important;gap:7px!important}
html body.modal-open.ww-app-visible[data-modal-type="shift"] #modalHost#modalHost .er1368-shift .modal-foot button{min-height:35px!important;padding:8px 12px!important;font-size:11px!important;border-radius:7px!important}
html body.modal-open.ww-app-visible[data-modal-type="shift"] #modalHost#modalHost .er1368-shift .modal-foot .er932-foot-save{min-width:140px!important}
html body .er1368-shift .er1368-shift-options{margin-top:8px!important;border-radius:8px!important}
html body .er1368-shift .er1368-shift-options>summary{min-height:45px!important;padding:9px 10px!important}
html body .er1368-shift-options summary strong{font-size:11px!important}
html body .er1368-shift-options summary small{font-size:9px!important;margin-top:3px!important;line-height:1.3!important}
html body .er1368-options-content{gap:8px!important;padding:0 9px 9px!important}
html body .er1368-shift .er1367-section-heading h3{font-size:12px!important}
html body .er1368-shift .er1367-section-heading p{font-size:9px!important;margin:4px 0 6px!important}
html body.modal-open.ww-app-visible[data-modal-type="shift"] #modalHost#modalHost .er1368-shift textarea#m_notes{height:70px!important;min-height:70px!important;padding:8px!important;font-size:13px!important;line-height:1.4!important}

/* Desktop payroll: more rows on screen, with all inline fields retained. */
@media(min-width:1024px){
 html body #app .content:has(.er1366-payroll-clock){padding-top:16px!important;padding-bottom:16px!important}
 html body #page:has(.er1366-payroll-clock){padding-top:0!important;padding-bottom:0!important}
 html body #page .er1366-payroll-clock{gap:10px!important;font-size:12px!important}
 html body #page .er1366-payroll-clock .er1365-hero{min-height:0!important;padding:11px 14px!important;border-radius:10px!important;gap:10px!important}
 html body #page .er1366-payroll-clock .er1365-hero>div:first-child{display:grid!important;gap:3px!important}
 html body #page .er1366-payroll-clock .er1365-hero h2{font-size:20px!important;line-height:1.2!important;margin:3px 0 0!important;letter-spacing:-.02em!important}
 html body #page .er1366-payroll-clock .er1365-eyebrow{font-size:8px!important;line-height:1.2!important;letter-spacing:.08em!important}
 html body #page .er1366-payroll-clock .er1365-hero p{font-size:10px!important;line-height:1.3!important;margin:4px 0 0!important}
 html body #page .er1366-payroll-clock .er1365-hero :is(h2,p){margin:0!important}
 html body #page .er1366-payroll-clock .er1365-person{padding:2px 0!important;min-height:0!important;gap:9px!important}
 html body #page .er1366-payroll-clock .er1365-avatar{width:34px!important;height:34px!important;font-size:11px!important;border-radius:9px!important}
 html body #page .er1366-payroll-clock .er1365-person-select>span{font-size:9px!important;line-height:1.2!important;margin-bottom:2px!important}
 html body #page .er1366-payroll-clock .er1365-person-select select{font-size:14px!important;min-height:28px!important;height:28px!important;padding:3px 24px 3px 0!important}
 html body #page .er1366-payroll-clock .er1366-pay-totals{gap:8px!important}
 html body #page .er1366-payroll-clock .er1366-pay-totals>div{padding:9px 12px!important;gap:3px!important;border-top-width:3px!important;border-radius:9px!important}
 html body #page .er1366-payroll-clock .er1366-pay-totals span{font-size:10px!important;line-height:1.2!important}
 html body #page .er1366-payroll-clock .er1366-pay-totals strong{font-size:19px!important;line-height:1.15!important}
 html body #page .er1366-payroll-clock .er1366-pay-totals small{font-size:9px!important;line-height:1.25!important}
 html body #page .er1366-payroll-clock .er1366-table-heading h3{font-size:13px!important}
 html body #page .er1366-payroll-clock .er1366-table-heading p{font-size:10px!important;line-height:1.3!important;margin:3px 0 0!important}
 html body #page .er1366-payroll-clock .er1365-btn{min-height:30px!important;padding:6px 9px!important;font-size:10px!important;border-radius:7px!important}
 html body #page .er1366-payroll-clock .er1365-btn.icon{width:30px!important;min-width:30px!important;height:30px!important;padding:5px!important}
 html body #page .er1366-payroll-clock .er1366-pay-table :is(th,td){padding:7px 6px!important}
 html body #page .er1366-payroll-clock .er1366-pay-table th{font-size:9px!important;line-height:1.3!important;padding-top:9px!important;padding-bottom:9px!important}
 html body #page .er1366-payroll-clock .er1366-pay-row :is(input,select){height:30px!important;min-height:30px!important;padding:5px 6px!important;border-radius:6px!important;font-size:11px!important;line-height:1.2!important}
 html body #page .er1366-payroll-clock .er1367-notes-cell textarea{height:48px!important;min-height:48px!important;padding:6px 7px!important;font-size:10px!important;line-height:1.4!important;border-radius:6px!important;resize:vertical!important}
 html body #page .er1366-payroll-clock .er1366-pay-table td>small{font-size:9px!important;line-height:1.25!important;margin-top:4px!important}
 html body #page .er1366-payroll-clock .er1366-row-hours{font-size:14px!important;line-height:1.25!important}
 html body #page .er1366-payroll-clock .er1366-save-state{font-size:8px!important;line-height:1.25!important;margin-top:4px!important}
 html body #page .er1366-payroll-clock .er1366-day-cell .er1365-btn{min-height:23px!important;font-size:9px!important;margin-top:4px!important;padding:3px 5px!important}
 html body #page .er1366-payroll-clock .er1368-pay-legend{font-size:10px!important;gap:11px!important}
 html body #page .er1366-payroll-clock .er1368-pay-legend small{font-size:9px!important}
}

/* Mobile messages: shorter list rows and quiet, compact bubbles. */
@media(max-width:1023px){
 html body.ww-chat-active:not(.chat-thread-open) #app #page .cv-row{min-height:70px!important;padding:9px 10px!important;margin-bottom:6px!important;border-radius:9px!important;gap:10px!important}
 html body.ww-chat-active #app #page .cv-row .cv-av{width:36px!important;min-width:36px!important;flex:0 0 36px!important}
 html body.ww-chat-active #app #page .cv-row .cv-av>.avatar{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;border-radius:10px!important;font-size:12px!important}
 html body.ww-chat-active #app #page .cv-row .cv-av svg{width:19px!important;height:19px!important}
 html body.ww-chat-active #app #page .cv-name{font-size:13px!important;line-height:1.25!important}
 html body.ww-chat-active #app #page :is(.cv-sub,.cv-preview,.cv-person-hint){font-size:11px!important;line-height:1.3!important;min-height:0!important}
 html body.ww-chat-active #app #page .cv-last{font-size:11px!important;line-height:1.3!important;font-weight:450!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
 html body.ww-chat-active #app #page .cv-unread .cv-last{font-weight:600!important}
 html body.ww-chat-active #app #page .cv-time{font-size:9px!important}
 html body.ww-chat-active #app #page .cv-head{height:30px!important;min-height:30px!important;margin-top:8px!important;margin-bottom:7px!important}
 html body.ww-chat-active #app #page .cv-head-label{font-size:13px!important}
 html body.ww-chat-active #app #page .cv-new{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;border-radius:9px!important}
 html body.ww-chat-active #app #page .er1020-chat-filters{padding-top:8px!important;padding-bottom:9px!important;margin-top:0!important;margin-bottom:0!important;gap:6px!important}
 html body.ww-chat-active #app #page .er1020-chat-filters{min-height:30px!important;height:auto!important;padding-top:5px!important;padding-bottom:5px!important}
 html body.ww-chat-active #app #page .er1020-chat-filter{min-height:30px!important;padding:5px 10px!important;font-size:10px!important}
 html body.ww-chat-active #app #page :is(.cv-section-label,.cv-people-label,.er1020-msg-section){font-size:9px!important;margin-top:8px!important;margin-bottom:6px!important;padding-top:0!important}
 html body.ww-chat-active #app #page .er1020-msg-section{padding:0 2px!important;min-height:14px!important;line-height:14px!important}
 html body.ww-chat-active.chat-thread-open #app #page .chat-thread .chat-thread-head{min-height:56px!important;padding:calc(8px + var(--er1328-safe-top,env(safe-area-inset-top,0px))) 10px 8px!important;gap:9px!important}
 html body.ww-chat-active.chat-thread-open #app #page .chat-thread .cth-back{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;border-radius:9px!important}
 html body.ww-chat-active.chat-thread-open #app #page .chat-thread .cth-card>.avatar{width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;border-radius:10px!important}
 html body.ww-chat-active.chat-thread-open #app #page .chat-thread .cth-card .cth-name{font-size:14px!important;line-height:1.2!important}
 html body.ww-chat-active.chat-thread-open #app #page .chat-thread .cth-card .cth-sub{font-size:10px!important;line-height:1.2!important}
 html body.ww-chat-active.chat-thread-open #app #page .chat-thread .chat-scroll#chatScroll{padding:10px 9px!important;gap:6px!important}
 html body.ww-chat-active.chat-thread-open #app #page .chat-thread .chat-date-separator{margin:4px 0 9px!important;font-size:9px!important}
 html body.ww-chat-active.chat-thread-open #app #page .chat-thread .msg{gap:6px!important;margin-top:0!important;margin-bottom:6px!important}
 html body.ww-chat-active.chat-thread-open #app #page .chat-thread .msg .bubble{padding:7px 9px 6px!important;border-radius:12px!important;box-shadow:none!important}
 html body.ww-chat-active.chat-thread-open #app #page .chat-thread .b-text{font-size:14px!important;line-height:1.35!important}
 html body.ww-chat-active.chat-thread-open #app #page .chat-thread .b-author{font-size:10px!important;line-height:1.25!important;margin-bottom:3px!important}
 html body.ww-chat-active.chat-thread-open #app #page .chat-thread .b-meta{margin-top:3px!important;gap:4px!important}
 html body.ww-chat-active.chat-thread-open #app #page .chat-thread .b-meta :is(time,.msg-status){font-size:9px!important;line-height:1.2!important}
 html body.ww-chat-active.chat-thread-open #app #page .chat-thread .msg-av{width:26px!important;min-width:26px!important}
 html body.ww-chat-active.chat-thread-open #app #page .chat-thread .msg-av .avatar{width:26px!important;height:26px!important;min-width:26px!important;min-height:26px!important;border-radius:8px!important;font-size:9px!important}
 html body.ww-chat-active.chat-thread-open #app #page .chat-thread .chat-composer{min-height:57px!important;padding:7px 9px calc(7px + var(--er1328-safe-bottom,env(safe-area-inset-bottom,0px)))!important;gap:7px!important}
}
@media(max-width:760px){
 html body.modal-open.ww-app-visible[data-modal-type="shift"] #modalHost#modalHost .modal.er1368-shift{width:100%!important;max-width:100%!important;border-radius:0!important}
 html body.modal-open.ww-app-visible[data-modal-type="shift"] #modalHost#modalHost .er1368-shift .modal-head{min-height:61px!important;padding:calc(12px + var(--er1328-safe-top,env(safe-area-inset-top,0px))) 13px 12px!important}
 html body.modal-open.ww-app-visible[data-modal-type="shift"] #modalHost#modalHost .er1368-shift .modal-head:before{left:13px!important;top:calc(8px + var(--er1328-safe-top,env(safe-area-inset-top,0px)))!important}
 html body.modal-open.ww-app-visible[data-modal-type="shift"] #modalHost#modalHost .er1368-shift .modal-foot{padding:8px 10px calc(8px + var(--er1328-safe-bottom,env(safe-area-inset-bottom,0px)))!important}
 html body.modal-open.ww-app-visible[data-modal-type="shift"] #modalHost#modalHost .er1368-shift .modal-foot button{min-height:40px!important}
 html body.modal-open.ww-app-visible[data-modal-type="shift"] #modalHost#modalHost .er1368-shift .modal-body{padding:9px!important}
 html body.modal-open.ww-app-visible[data-modal-type="shift"] #modalHost#modalHost .er1368-shift :is(.er1322-time-face,.er1028-date-button){height:42px!important;min-height:42px!important;font-size:14px!important;padding:8px 6px!important}
 html body.modal-open.ww-app-visible[data-modal-type="shift"] #modalHost#modalHost .er1368-shift textarea#m_notes{font-size:16px!important}
 html body .er1368-alert-actions button,html body .er1368-alert-later{min-height:40px!important}
}
@media(max-width:360px){
 html body.modal-open.ww-app-visible[data-modal-type="shift"] #modalHost#modalHost .er1368-shift .er1337-start-finish-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
 html body.modal-open.ww-app-visible[data-modal-type="shift"] #modalHost#modalHost .er1368-shift .er1337-start-finish-grid>.er1337-date-field{grid-column:1/-1!important}
}