/* Calendar DatePicker shared by desktop and employee mobile screens. */
.xcx-calendar-range-host{width:min(372px,calc(100vw - 24px))!important;max-width:calc(100vw - 24px)!important;max-height:calc(100vh - 16px)!important;overflow-y:auto!important}
.xcx-calendar-shell{display:block;min-width:0;width:100%;box-sizing:border-box}
.xcx-calendar-selection{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;margin-bottom:10px}
.xcx-calendar-selection>span{color:#8ba1b6;font-size:12px}
.xcx-calendar-selection button{display:flex;min-width:0;flex-direction:column;gap:2px;padding:7px 10px;border:1px solid #d5e5f0;border-radius:8px;background:#f7fbfe;color:#294059;text-align:left;cursor:pointer}
.xcx-calendar-selection button.is-active{border-color:#3887e8;background:#e8f4ff;box-shadow:0 0 0 2px #d7eaff}
.xcx-calendar-selection button span{font-size:10px;color:#69839b}
.xcx-calendar-selection button strong{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.xcx-calendar{padding:10px;border:1px solid #d8e9f3;border-radius:13px;background:linear-gradient(180deg,#d9f1fd 0%,#edf8ff 100%);color:#34485b;box-sizing:border-box}
.xcx-calendar-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 4px 8px}
.xcx-calendar-head strong{font-size:15px;font-weight:750;letter-spacing:.2px}
.xcx-calendar-head button{display:grid;width:31px;height:31px;place-items:center;padding:0;border:0;border-radius:8px;background:transparent;color:#7799b2;font-size:25px;line-height:1;cursor:pointer}
.xcx-calendar-head button:hover,.xcx-calendar-head button:focus-visible{background:#c6e6fa;color:#2567a7;outline:none}
.xcx-calendar-week,.xcx-calendar-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.xcx-calendar-week span{text-align:center;color:#4f6b82;font-size:11px;font-weight:700;padding:3px 0 6px}
.xcx-calendar-day{display:flex;position:relative;min-width:0;min-height:45px;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:2px 0;border:0;border-radius:9px;background:transparent;color:#30475a;cursor:pointer;line-height:1.15}
.xcx-calendar-day b{font-size:14px;font-weight:650;font-variant-numeric:tabular-nums}
.xcx-calendar-day small{max-width:100%;overflow:hidden;color:#869eae;font-size:9px;white-space:nowrap}
.xcx-calendar-day:nth-child(7n+1),.xcx-calendar-day:nth-child(7n){color:#77869b}
.xcx-calendar-day.is-outside{opacity:.42}
.xcx-calendar-day.is-in-range{border-radius:0;background:#c7e5ff}
.xcx-calendar-day.is-today:not(.is-selected) b{color:#1877dd;font-weight:800}
.xcx-calendar-day.is-holiday:not(.is-selected) small{color:#da7f74}
.xcx-calendar-day.is-selected{background:#1677f0;color:#fff;box-shadow:0 3px 9px #2471d24d}
.xcx-calendar-day.is-selected small{color:#eaf5ff}
.xcx-calendar-day:hover:not(.is-selected),.xcx-calendar-day:focus-visible:not(.is-selected){background:#c4e5fb;outline:none}
.xcx-calendar-day:disabled{opacity:.3;cursor:not-allowed}
.xcx-range-card-panel .xcx-range-card-heading,.xcx-range-card-panel .xcx-range-fields{display:none!important}
.xcx-range-card-panel .xcx-calendar-shell{order:0}
.xcx-range-card-panel .xcx-range-presets{order:1}
.xcx-range-card-panel .xcx-range-error{order:2}
.xcx-range-card-panel .xcx-range-card-actions{order:3}
.commission-date-popover>.xcx-calendar-shell{display:block!important;width:100%;margin:0!important}
.commission-date-popover.xcx-calendar-range-host{display:flex!important;flex-direction:column;align-items:stretch;gap:8px}
.commission-date-popover.xcx-calendar-range-host[hidden]{display:none!important}
.commission-date-popover>strong{display:none!important}
.commission-date-popover>div:has(#commission-start){display:none!important}
.commission-date-popover>.xcx-calendar-shell+.commission-date-presets{margin-top:8px}
.date-filter-panel>.xcx-calendar-shell{order:0}
.date-filter-dropdown .date-filter-panel.xcx-calendar-range-host{width:min(356px,calc(100vw - 48px))!important}
/* The data tab's trigger can sit at the left edge; anchor its calendar to the
   viewport so a right-aligned absolute panel cannot disappear off-screen. */
@media(max-width:760px){
  .date-filter-dropdown .date-filter-panel.xcx-calendar-range-host{
    position:fixed!important;
    top:50%!important;
    left:12px!important;
    right:12px!important;
    width:auto!important;
    max-width:372px!important;
    max-height:calc(100dvh - 24px)!important;
    margin:auto!important;
    box-sizing:border-box!important;
    transform:translateY(-50%)!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    z-index:2147482000!important;
  }
}
.date-filter-panel>.quick-date-buttons{order:1!important;margin:8px 0 0!important}
.date-filter-panel .mobile-date-filter{order:2!important;display:flex!important;align-items:center;justify-content:flex-end;gap:8px;margin:8px 0 0!important}
.date-filter-panel .mobile-date-filter label,.date-filter-panel .mobile-date-filter i{display:none!important}
.date-filter-panel .mobile-date-filter button{grid-row:auto!important;grid-column:auto!important;min-width:75px}
.xcx-single-calendar-panel{z-index:2147482001;width:min(328px,calc(100vw - 16px));padding:7px;border:1px solid #bfd5e7;border-radius:14px;background:#fff;box-shadow:0 16px 40px #1c355244;box-sizing:border-box}
.xcx-calendar-input{cursor:pointer}
.xcx-calendar-input::-webkit-calendar-picker-indicator{display:none!important}
@media(max-width:420px){.xcx-calendar-range-host{width:calc(100vw - 24px)!important}.xcx-calendar-day{min-height:43px}.xcx-calendar-selection button{padding:6px 7px}.xcx-single-calendar-panel{left:8px!important}}