@import '_content/GVS.Components/GVS.Components.yt3rumle5d.bundle.scp.css';

/* /Components/CompletedTasks/CompletedReactiveTaskTable.razor.rz.scp.css */
/* The status is named in the cell, not only coloured: a clean that finished and one that finished
   after being cancelled share the tick, so colour was the only thing telling them apart. */
.completed-reactive-status-cell[b-x85fgcxfrg] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

::deep .mud-table-hover .mud-table-container .mud-table-root .mud-table-body .mud-table-row[b-x85fgcxfrg] {
    cursor: pointer;
}
/* /Components/CompletedTasks/CompletedScheduledTaskTableRow.razor.rz.scp.css */
/* The status is named in the cell, not only coloured: the tick is the same shape for a clean that
   finished and one that finished after being cancelled, so colour was the only thing telling the
   statuses apart. The icon stays as the quick signal and the text carries the meaning. */
.completed-scheduled-status-cell[b-lgpqisxvg3] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* The ID opens the task details for keyboard users, but it should read as ordinary cell text
   rather than a button: the shared button is a size smaller, heavier, wider tracked and boxed,
   which makes the column look out of place next to the other cells. */
.completed-scheduled-id-cell[b-lgpqisxvg3]  button {
    min-width: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: none;
    border-radius: 0;
}

.completed-scheduled-id-cell[b-lgpqisxvg3]  button:hover {
    background-color: transparent;
    text-decoration: underline;
}
/* /Components/CompletedTasks/DebugCompletedReactiveTaskTable.razor.rz.scp.css */
/* The status is named in the cell, not only coloured: a clean that finished and one that finished
   after being cancelled share the tick, so colour was the only thing telling them apart. */
.completed-reactive-status-cell[b-hqwy9pdqr1] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

::deep .mud-table-hover .mud-table-container .mud-table-root .mud-table-body .mud-table-row[b-hqwy9pdqr1] {
    cursor: pointer;
}
/* /Components/Generic/Circle.razor.rz.scp.css */
[b-u9ooleh69f] .bordered > path:nth-child(2) {
    stroke: black;
}
/* /Components/Generic/GvsTreeComponent.razor.rz.scp.css */
[b-3ctpjqa83a] .count {
    color: var(--mud-palette-grey-default);
    margin-right: 10px;
}

[b-3ctpjqa83a] .width-100 > .mud-typography {
    width: 100%;
}

[b-3ctpjqa83a] .mud-checkbox > p {
    width: 100%;
}
/* /Components/Generic/TaskExpansionPanel.razor.rz.scp.css */
[b-e9julzda7x] .mud-expand-panel-header {
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-white);
    border-radius: var(--mud-default-borderradius);
}

[b-e9julzda7x] .mud-expand-panel {
    border-radius: var(--mud-default-borderradius) !important;
}

[b-e9julzda7x] .mud-expand-panel-content {
    overflow-x: hidden;
    padding-top: 8px !important;
}

[b-e9julzda7x] .dense > .mud-expand-panel-header {
    padding: 4px 12px !important;
    min-height: fit-content;
}

[b-e9julzda7x] .dense .mud-expand-panel-content {
    padding: 4px !important;
}
/* /Components/Kanban/KanbanTaskCard.razor.rz.scp.css */
.kanban-header[b-w4zep7uu1m] {
    position: relative;
}

.kanban-header-content[b-w4zep7uu1m] {
    top: 0px;
    padding: 5px;
    width: 100%;
    display: flex !important;
    border: 1px solid transparent;
}

[b-w4zep7uu1m] .light-card .kanban-header-content {
    border-color: black;
    color: #000 !important;
}

[b-w4zep7uu1m] .dark-card .kanban-header-content {
    color: #fff !important;
}

.kanban-body[b-w4zep7uu1m] {
    padding: 0px;
}

.kanban-body-content[b-w4zep7uu1m] {
    display: flex !important;
    border: 1px solid transparent;
    border-top: none;
    padding: 5px;
}

[b-w4zep7uu1m] .light-card .kanban-body-content {
    border-color: black;
}

[b-w4zep7uu1m] .word-break {
    word-break: break-all
}


.kanban-chip[b-w4zep7uu1m] {
    border: 1px solid white;
    border-radius: 15px;
    padding: 2px 8px;
}

.circle-count[b-w4zep7uu1m] {
    border-radius: 50%;
    border: 3px solid white;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 12px;
}
/* /Components/Licencing/LicenceMissingView.razor.rz.scp.css */
/* 4rem matches the py-16 the other full-viewport licence screens use, but a landscape phone has
   only about 250px between the two app bars, and a fixed 4rem there pushes the body and the
   closing instruction off the screen. Relax it on a short viewport so the whole message is the
   first thing the user sees rather than something they have to discover by scrolling. */
.licence-missing[b-3voa4x9ck8] {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

/* The icon is a child component, so its root svg never picks up this component's scope
   attribute - ::deep is required to reach it.

   Sized by the smallest of the three: the shared 200px convention on a desktop viewport, then a
   cap on each axis. The height cap is what keeps it off the message on a short viewport. */
.licence-missing-icon[b-3voa4x9ck8]  svg {
    width: min(200px, 60vw, 25vh);
    height: min(200px, 60vw, 25vh);
}

@media (max-height: 500px) {
    .licence-missing[b-3voa4x9ck8] {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

/* Below this there is no height left for both the padlock and the message. The icon is decorative
   and aria-hidden, so it is the part to drop: shrinking it far enough to fit would leave an
   illegible smudge and still crowd the text. */
@media (max-height: 420px) {
    .licence-missing-icon[b-3voa4x9ck8] {
        display: none;
    }
}
/* /Components/MainLayout/NavigationButtons.razor.rz.scp.css */
/* Spans the full app-bar height so the popover (top: 100%) drops flush from the
   bar's bottom edge with no gap between icon and menu. */
.nav-menu-wrapper[b-b8z92bh534] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--mud-appbar-height);
    padding: 0 4px;
}

/* Bottom (mobile) bar: the popover here is fixed-positioned, so the wrapper doesn't need to
   span the desktop app-bar height — that only made the icon overflow the shorter mobile bar.
   Size it to its icon so it sits centred like the sibling nav links. */
.nav-menu-wrapper-bottom[b-b8z92bh534] {
    height: auto;
}

/* Desktop popover — a DOM child of the wrapper shown purely via :hover; hovering a
   descendant keeps the parent's :hover state, so the menu cannot close while the
   pointer is over the icon or the menu. Anchored to the wrapper, not the viewport. */
.nav-menu-popover[b-b8z92bh534] {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--mud-palette-drawer-background);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 4px;
    min-width: 180px;
    z-index: 1400;
}

/* :has(:focus-visible) instead of :focus-within — keyboard focus keeps the menu
   open, but a mouse click on a link (which also focuses it) does not pin the menu
   open after navigating. */
.nav-menu-wrapper:hover > .nav-menu-popover[b-b8z92bh534],
.nav-menu-wrapper:has(:focus-visible) > .nav-menu-popover[b-b8z92bh534] {
    display: block;
}

.nav-menu-item[b-b8z92bh534] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 6px;
    text-decoration: none;
    color: #E0E0E0;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.1s;
}

.nav-menu-item:hover[b-b8z92bh534] {
    background: rgba(255, 255, 255, 0.08);
    text-decoration: none;
    color: #FFFFFF;
}

/* Bottom bar variant — click-toggled, rendered above the bar */
.nav-menu-popover-bottom[b-b8z92bh534] {
    display: block;
    position: fixed;
    top: auto;
    bottom: var(--mud-appbar-height);
    left: 50%;
    transform: translateX(-50%);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-menu-overlay[b-b8z92bh534] {
    position: fixed;
    inset: 0;
    z-index: 999;
}
/* /Components/MainLayout/NewTaskButtonComponent.razor.rz.scp.css */
[b-32kcjykxi7] .new-task-button {
    background-color: var(--mud-palette-white);
    color: var(--mud-palette-dark);
}

    [b-32kcjykxi7] .new-task-button:hover {
        background-color: #d6d6d6 !important;
    }

[b-32kcjykxi7] .new-task-button-container {
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-white);
    padding: 8px;
    cursor: pointer;
}

    [b-32kcjykxi7] .new-task-button-container:hover {
        background-color: var(--mud-palette-primary-darken);
    }
/* /Components/MainLayout/Sidebar/Offline/OfflineSiteSelectorSidebarComponent.razor.rz.scp.css */
[b-po0jgfxhc0] .mud-selected-item.mud-primary-hover.mud-primary-text {
    color: var(--mud-palette-white) !important;
    background-color: transparent !important
}

[b-po0jgfxhc0] .mud-selected-item .mud-icon-root {
    color: var(--mud-palette-primary) !important;
}
/* /Components/MainLayout/Sidebar/SelfTeamAssignerSidebarComponent.razor.rz.scp.css */
[b-8z62mjisk3] .mud-list-item-icon {
    color: var(--mud-palette-white) !important;
}
/* /Components/MainLayout/Sidebar/Sidebar.razor.rz.scp.css */
[b-0w0a54y0pf] .logo {
    width: 100% !important;
    object-fit: scale-down !important;
    height: 100% !important;
}

[b-0w0a54y0pf] .nav-list {
    height: calc(100% - var(--version-number-height));
    overflow-x: auto;
}

[b-0w0a54y0pf] .mud-expand-panel-header, [b-0w0a54y0pf] .mud-expand-panel {
    background-color: var(--mud-palette-drawer-background);
    color: var(--mud-palette-white);
}

[b-0w0a54y0pf] .team-container {
    border: 1px var(--mud-palette-drawer-background) solid;
    box-shadow: var(--mud-elevation-1);
    border-radius: var(--mud-default-borderradius);
    margin-bottom: 4px;
}

[b-0w0a54y0pf] .mud-list-subheader {
    color: var(--mud-palette-white);
    font-size: var(--mud-typography-h6-size);
    font-weight: var(--mud-typography-h6-weight);
    padding-top: 4px;
    padding-bottom: 4px;
}

[b-0w0a54y0pf] .mud-paper {
    color: var(--mud-palette-white);
    background-color: var(--mud-palette-drawer-background-lighter);
    overflow: auto;
}

[b-0w0a54y0pf] .mud-list-item-gutters, [b-0w0a54y0pf] .mud-list-subheader-gutters {
    padding-left: 8px;
    padding-right: 8px;
}

[b-0w0a54y0pf] .mud-list-item:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.sidebar-visually-hidden[b-0w0a54y0pf], [b-0w0a54y0pf] .sidebar-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

[b-0w0a54y0pf] .mud-list-item {
    --mud-palette-action-default-hover: var(--mud-palette-primary-hover);
    margin-bottom: 4px;
    padding-top: unset;
    padding-bottom: unset;
}

    [b-0w0a54y0pf] .mud-list-item > .mud-icon-root {
        color: var(--mud-palette-white);
    }

[b-0w0a54y0pf] .mud-selected-item {
    color: var(--mud-palette-white);
}

[b-0w0a54y0pf] .mud-list-item-text {
    overflow-wrap: break-word;
}

    [b-0w0a54y0pf] .mud-list-item-text > p {
        display: flex;
        align-items: center;
    }

[b-0w0a54y0pf] .mud-divider {
    margin-bottom: 4px;
}

[b-0w0a54y0pf] .mud-nested-list > .mud-list-item {
    padding-inline-end: 16px;
}

[b-0w0a54y0pf] .mud-list.mud-list-padding {
    padding: 2px 0px;
}

[b-0w0a54y0pf] .mud-expand-panel.mud-panel-expanded {
    height: 100%
}

    [b-0w0a54y0pf] .mud-expand-panel.mud-panel-expanded > .mud-collapse-container {
        height: calc(100% - 40px) !important;
    }

        [b-0w0a54y0pf] .mud-expand-panel.mud-panel-expanded > .mud-collapse-container > .mud-collapse-wrapper, [b-0w0a54y0pf] .mud-expand-panel.mud-panel-expanded > .mud-collapse-container > .mud-collapse-wrapper > .mud-collapse-wrapper-inner, [b-0w0a54y0pf] .mud-expand-panel.mud-panel-expanded > .mud-collapse-container > .mud-collapse-wrapper > .mud-collapse-wrapper-inner > .mud-expand-panel-content {
            height: 100%;
        }

hr[b-0w0a54y0pf] {
    width: 100%;
    border-bottom: 1px var(--mud-palette-dark-darken) solid;
}

@media (max-width: 600px) {
    [b-0w0a54y0pf] .mud-drawer-header {
        min-height: unset;
        max-height: var(--mud-appbar-height);
        padding-top: 9px;
        padding-bottom: 9px;
    }
}
/* /Components/MainLayout/Sidebar/SiteSelectorSidebarComponent.razor.rz.scp.css */
[b-ezdobcupmm] .mud-selected-item.mud-primary-hover.mud-primary-text {
    color: var(--mud-palette-white) !important;
    background-color: transparent !important
}

[b-ezdobcupmm] .mud-selected-item .mud-icon-root {
    color: var(--mud-palette-primary) !important;
}
/* /Components/MainLayout/TopAppBar.razor.rz.scp.css */
/* The avatar is the menu's activator, so it has to be a real button to be reachable by keyboard.
   These rules strip the browser's button chrome back to the bare avatar. The focus ring comes from
   app.css, which is where this product declares them. */
.avatar-menu-activator[b-kso4ornfwx] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    border-radius: 50%;
}
/* /Components/Roles/RoleTransferList.razor.rz.scp.css */
.transfer-panel[b-i5owshc8at] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.transfer-header[b-i5owshc8at] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.available-header[b-i5owshc8at] {
    background-color: var(--mud-palette-background-grey);
}

.selected-header[b-i5owshc8at] {
    background-color: var(--mud-palette-background-grey);
}

.role-count[b-i5owshc8at] {
    color: var(--mud-palette-text-secondary);
}

.search-box[b-i5owshc8at] {
    padding: 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.role-list[b-i5owshc8at] {
    padding: 4px 8px;
    display: flex;
    flex-direction: column;
}

@media (min-width: 960px) {
    .role-list[b-i5owshc8at] {
        max-height: min(400px, calc(100vh - 380px));
        overflow-y: auto;
    }
}

.selected-list[b-i5owshc8at] {
    padding: 8px;
}

.category-header[b-i5owshc8at] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 0 4px;
}

.category-reactive[b-i5owshc8at] {
    color: var(--mud-palette-primary);
}

.category-scheduled[b-i5owshc8at] {
    color: var(--mud-palette-success);
}

.category-domestic[b-i5owshc8at] {
    color: var(--mud-palette-info);
}

.category-taskmanagement[b-i5owshc8at] {
    color: var(--mud-palette-warning);
}

.category-administration[b-i5owshc8at] {
    color: var(--mud-palette-error);
}

.role-item[b-i5owshc8at] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
    width: 100%;
}

.role-icon[b-i5owshc8at] {
    margin-top: 2px;
    flex-shrink: 0;
}

.role-info[b-i5owshc8at] {
    display: flex;
    flex-direction: column;
}

.role-description[b-i5owshc8at] {
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.2;
}

.role-available[b-i5owshc8at] {
    cursor: pointer;
}

.role-available:hover[b-i5owshc8at] {
    background-color: var(--mud-palette-action-default-hover);
}

.role-locked[b-i5owshc8at] {
    opacity: 0.4;
    cursor: not-allowed;
}

.selected-category[b-i5owshc8at] {
    margin-bottom: 12px;
}

.selected-category-label[b-i5owshc8at] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.selected-category-count[b-i5owshc8at] {
    font-size: 0.65rem;
    font-weight: 600;
    opacity: 0.6;
}

.selected-category-roles[b-i5owshc8at] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.selected-chip[b-i5owshc8at] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 16px;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-surface);
    transition: background-color 0.15s ease-out;
}

.selected-chip:hover[b-i5owshc8at] {
    background-color: var(--mud-palette-action-default-hover);
}

.selected-chip-name[b-i5owshc8at] {
    line-height: 1.3;
}

[b-i5owshc8at] .selected-chip-remove {
    padding: 2px !important;
    min-width: 0 !important;
    width: 20px !important;
    height: 20px !important;
}

.selected-chip-dependency-btn[b-i5owshc8at] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    cursor: pointer;
    border-radius: 50%;
    transition: background-color 0.15s ease-out;
}

.selected-chip-dependency-btn:hover[b-i5owshc8at] {
    background-color: var(--mud-palette-action-default-hover);
}

[b-i5owshc8at] .selected-chip-dependency {
    opacity: 0.5;
}

[b-i5owshc8at] .selected-chip-dependency .mud-icon-root {
    font-size: 1.1rem;
}

.chip-active-highlight[b-i5owshc8at] {
    border-color: var(--mud-palette-primary);
    background-color: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

[b-i5owshc8at] .chip-active-highlight .selected-chip-dependency {
    opacity: 1;
    color: var(--mud-palette-primary);
}

.chip-highlighted[b-i5owshc8at] {
    border-color: var(--mud-palette-primary);
    background-color: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
    box-shadow: 0 0 0 1px var(--mud-palette-primary);
}

.category-chip-reactive[b-i5owshc8at] {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 30%, transparent);
}

.category-chip-scheduled[b-i5owshc8at] {
    border-color: color-mix(in srgb, var(--mud-palette-success) 30%, transparent);
}

.category-chip-domestic[b-i5owshc8at] {
    border-color: color-mix(in srgb, var(--mud-palette-info) 30%, transparent);
}

.category-chip-taskmanagement[b-i5owshc8at] {
    border-color: color-mix(in srgb, var(--mud-palette-warning) 30%, transparent);
}

.category-chip-administration[b-i5owshc8at] {
    border-color: color-mix(in srgb, var(--mud-palette-error) 30%, transparent);
}

.empty-state[b-i5owshc8at] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 4px;
    margin-top: 8px;
    color: var(--mud-palette-text-secondary);
}

@media (max-width: 960px) {
    .role-description[b-i5owshc8at] {
        display: none;
    }

    .empty-state[b-i5owshc8at] {
        min-height: 80px;
    }

    .selected-chip[b-i5owshc8at] {
        font-size: 0.75rem;
        padding: 3px 6px;
    }
}
/* /Components/Schedules/CleanTypeBadge.razor.rz.scp.css */
[b-b4ibkcgc4i] .clean-type-badge {
    background: var(--badge-background);
    color: var(--badge-foreground);
    border: 1px solid var(--badge-border);
    font-weight: 600;
    font-size: 10px;
    padding: 4px 12px !important;
    max-width: 100%;
    height: fit-content !important;
}

    [b-b4ibkcgc4i] .clean-type-badge .mud-chip-content {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    [b-b4ibkcgc4i] .clean-type-badge .mud-chip-icon {
        font-size: 14px !important;
        width: 14px;
        height: 14px;
        margin-right: 4px;
    }
/* /Components/Schedules/PriorityBadge.razor.rz.scp.css */
[b-1bufrxvnj9] .priority-badge {
    background: var(--badge-background);
    color: var(--badge-foreground);
    border: 1px solid var(--badge-border);
    font-weight: 600;
    font-size: 10px;
    padding: 4px 12px !important;
    max-width: 100%;
    height: fit-content !important;
}

    [b-1bufrxvnj9] .priority-badge .mud-chip-content {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
/* /Components/Tasks/Creating/QuickTaskView/RequestedTimeSelectComponent.razor.rz.scp.css */
[b-it16e6iiub] .mud-checkbox > span{
    padding:0px !important
}
[b-it16e6iiub] .mud-icon-button-size-small.mud-icon-button-edge-end {
    padding: 0px !important
}
/* /Components/Tasks/Scheduled/Calendar/CalendarSequenceToggle.razor.rz.scp.css */
.schedule-calendar-sequence-toggle[b-wkel9j391n] {
    display: flex;
    justify-content: center;
    padding: 4px 0;
    border-top: 1px solid var(--mud-palette-lines-default);
}
/* /Components/Tasks/Scheduled/Calendar/ScheduleCalendarDayView.razor.rz.scp.css */
/* The brand primary (#42ad2a) measures 2.90:1 against white, under the WCAG 2.2 AA 3:1 for
   focus rings and drop outlines, so those use the darker shade of it that dialog titles
   already use. See MYC-1626, MYC-1670. */

.schedule-calendar-day-dragover[b-oih2f3qhwa] {
    outline: 2px dashed #2e7d22;
    outline-offset: -2px;
    border-radius: 8px;
}

.schedule-calendar-slot-header[b-oih2f3qhwa] {
    background-color: var(--mud-palette-background-gray);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.schedule-calendar-day-task[b-oih2f3qhwa] {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.schedule-calendar-day-task:hover[b-oih2f3qhwa] {
    background-color: var(--mud-palette-background-gray);
}

.schedule-calendar-day-task:focus-visible[b-oih2f3qhwa] {
    outline: 2px solid #2e7d22;
    outline-offset: -2px;
}

.schedule-calendar-day-task[draggable="true"][b-oih2f3qhwa] {
    cursor: grab;
}

.schedule-calendar-day-task[draggable="true"]:active[b-oih2f3qhwa] {
    cursor: grabbing;
}

.schedule-calendar-day-task-status[b-oih2f3qhwa] {
    width: 4px;
    flex-shrink: 0;
}

.schedule-calendar-day-task-content[b-oih2f3qhwa] {
    flex: 1;
    padding: 8px 12px;
}

/* The cleaning type's colour is site-configured, so it cannot be relied on to meet the text
   minimum. It shows as a swatch beside the name instead, and the name is read in ordinary
   secondary text. */
.schedule-calendar-day-task-type-swatch[b-oih2f3qhwa] {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
    flex-shrink: 0;
}

.schedule-calendar-day-task-state[b-oih2f3qhwa] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.schedule-calendar-day-empty[b-oih2f3qhwa] {
    padding: 12px;
    text-align: center;
}

/* !important because MudBlazor's own button colour rules match at equal specificity and load
   after the scoped bundle — the same reason app.css overrides .mud-dialog-title this way. */
[b-oih2f3qhwa] .schedule-calendar-day-add {
    border-top: 1px solid var(--mud-palette-lines-default);
    border-radius: 0;
    color: #2e7d22 !important;
}

/* On a phone the task row's two horizontal stacks each fought for the same ~330px: a long task
   name wrapped over four lines while the room name wrapped beside it, and the meta line broke
   with its "-" separators stranded on their own lines. Below 600px the head stacks vertically and
   the meta line keeps its separators attached to what they separate. */
@media (max-width: 600px) {
    /* !important because MudBlazor's own .mud-stack-row sets flex-direction at equal specificity
       and loads after the scoped bundle — the same reason the button colours need it. */
    [b-oih2f3qhwa] .schedule-calendar-day-task-head {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 2px !important;
    }

    /* The spacer has no work to do once the stack is vertical, and would otherwise push the
       status away from the name it belongs to. */
    [b-oih2f3qhwa] .schedule-calendar-day-task-head > .mud-spacer {
        display: none;
    }

    [b-oih2f3qhwa] .schedule-calendar-day-task-meta {
        flex-wrap: wrap;
        row-gap: 2px;
    }

    .schedule-calendar-day-task-content[b-oih2f3qhwa] {
        padding: 8px 10px;
    }
}

/* A slot's tasks scroll within the slot card rather than pushing the rest of the day down the page.
   The cap is load-bearing rather than decorative: it is what makes the list a bounded scroll
   container, and Virtualize mounts every row when its scroll parent can grow without limit. It lives
   beside the component that depends on it for that reason. Sized against what sits above it rather
   than a flat fraction of the viewport, which on a short window leaves the page and the list both
   scrolling; the floor keeps several tasks visible. Matches the scheduled overview's scroll panel.
   MYC-1706. */
.schedule-calendar-day-task-list[b-oih2f3qhwa] {
    max-height: max(320px, calc(100vh - 320px));
    overflow-y: auto;
}

/* The list is focusable so it can be scrolled by keyboard, so it needs a focus indicator. */
.schedule-calendar-day-task-list:focus-visible[b-oih2f3qhwa] {
    outline: 2px solid #2e7d22;
    outline-offset: -2px;
}
/* /Components/Tasks/Scheduled/Calendar/ScheduleCalendarMonthView.razor.rz.scp.css */
/* The brand primary (#42ad2a) measures 2.90:1 against white, under the WCAG 2.2 AA 3:1 for
   the today marker, the focus ring and the drop outline, so those use the darker shade of it
   that dialog titles already use. See MYC-1626, MYC-1670. */

.schedule-calendar-month-grid[b-pqlhq7ytdz] {
    overflow: hidden;
}

.schedule-calendar-month-header-row[b-pqlhq7ytdz] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    background-color: var(--mud-palette-background-gray);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.schedule-calendar-month-header-cell[b-pqlhq7ytdz] {
    padding: 8px;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
}

/* minmax(0, 1fr) rather than 1fr: a plain 1fr never shrinks below its content, so a wide task
   count pushed the row past seven columns and clipped Sunday off the right edge. */
.schedule-calendar-month-week-row[b-pqlhq7ytdz] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

/* A real button, reset back to the cell it looks like. Buttons centre their content in both
   axes by default, which floated the day number into the middle of the cell — the column flex
   pins it to the top-left corner instead. */
.schedule-calendar-month-cell[b-pqlhq7ytdz] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    min-height: 80px;
    padding: 6px;
    border: none;
    border-right: 1px solid var(--mud-palette-lines-default);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

/* Today already wears a solid ring in the same green, so focus needs a shape of its own or a
   keyboard user cannot tell the two apart across 40-odd cells. */
.schedule-calendar-month-cell:focus-visible[b-pqlhq7ytdz] {
    outline: 3px solid var(--mud-palette-text-primary);
    outline-offset: -3px;
}

/* Strip the outer frame — keep only internal grid lines */
.schedule-calendar-month-cell:nth-child(7n)[b-pqlhq7ytdz] {
    border-right: none;
}

.schedule-calendar-month-week-row:last-child .schedule-calendar-month-cell[b-pqlhq7ytdz] {
    border-bottom: none;
}

.schedule-calendar-month-cell:hover[b-pqlhq7ytdz] {
    background-color: var(--mud-palette-background-gray);
}

/* Days from the neighbouring months are de-emphasised, but they are still focusable buttons
   with names, so they cannot be dimmed below the 4.5:1 their text needs. A blanket opacity
   took them to 2.44:1. This theme sets TextSecondary to the same black as TextPrimary, so the
   quieter tone has to be an explicit value — #5f5f5f holds 5.9:1 on the grey cell. */
.schedule-calendar-month-outside .schedule-calendar-month-day-number[b-pqlhq7ytdz] {
    color: #5f5f5f;
    font-weight: 400;
}

.schedule-calendar-month-outside[b-pqlhq7ytdz] {
    background-color: var(--mud-palette-background-gray);
}

.schedule-calendar-month-today[b-pqlhq7ytdz] {
    outline: 2px solid #2e7d22;
    outline-offset: -2px;
}

.schedule-calendar-month-dragover[b-pqlhq7ytdz] {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.12);
    outline: 2px dashed #2e7d22;
    outline-offset: -2px;
}

.schedule-calendar-month-day-number[b-pqlhq7ytdz] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    margin-bottom: 4px;
}

.schedule-calendar-month-dots[b-pqlhq7ytdz] {
    display: flex;
    gap: 3px;
    margin-bottom: 2px;
}

.schedule-calendar-dot[b-pqlhq7ytdz] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.schedule-calendar-month-count[b-pqlhq7ytdz] {
    font-size: 0.65rem;
}

/* The cell is a button, whose content model is phrasing content, so these are spans that have
   to be told to behave as blocks. */
.schedule-calendar-month-day-number[b-pqlhq7ytdz],
.schedule-calendar-month-dots[b-pqlhq7ytdz],
.schedule-calendar-month-count[b-pqlhq7ytdz],
.schedule-calendar-month-summary[b-pqlhq7ytdz] {
    display: block;
}

.schedule-calendar-month-count-short[b-pqlhq7ytdz] {
    display: none;
}

/* Compact month grid on phones: at ~50px per column "17 tasks" wrapped onto a second line, which
   made the busy row double height and pushed the grid under the bottom nav bar. The dots and the
   count share one line and nothing wraps; the cell's accessible name still reads the full
   "17 tasks, 17 pending". */
@media (max-width: 600px) {
    .schedule-calendar-month-cell[b-pqlhq7ytdz] {
        min-height: 56px;
        padding: 4px;
    }

    .schedule-calendar-month-header-cell[b-pqlhq7ytdz] {
        padding: 6px 2px;
        font-size: 0.65rem;
    }

    .schedule-calendar-month-day-number[b-pqlhq7ytdz] {
        font-size: 0.75rem;
        margin-bottom: 2px;
    }

    .schedule-calendar-month-dots[b-pqlhq7ytdz] {
        gap: 2px;
        margin-bottom: 0;
    }

    .schedule-calendar-dot[b-pqlhq7ytdz] {
        width: 6px;
        height: 6px;
    }

    /* Dots and count on one line, so a two-digit total cannot wrap. */
    .schedule-calendar-month-summary[b-pqlhq7ytdz] {
        display: flex;
        align-items: center;
        gap: 3px;
    }

    .schedule-calendar-month-count[b-pqlhq7ytdz] {
        display: none;
    }

    .schedule-calendar-month-count-short[b-pqlhq7ytdz] {
        display: block;
        font-size: 0.65rem;
        white-space: nowrap;
    }

    /* The count can still be wider than a ~50px column on a busy day; the cell clips it rather
       than letting it stretch the grid. The full total stays in the cell's accessible name. */
    .schedule-calendar-month-summary[b-pqlhq7ytdz] {
        max-width: 100%;
        overflow: hidden;
    }
}
/* /Components/Tasks/Scheduled/Calendar/ScheduleCalendarPendingCleanList.razor.rz.scp.css */
/* Every line of the virtualised list — these two headers and the clean row — is pinned to the same
   height, which is what makes the list's ItemSize exact. Margins would add to it, so the headers
   carry none and separate themselves with a border instead. Keep in step with _lineHeightPx in
   ScheduleCalendarPendingCleanList.razor.cs. MYC-1797. */
/* display: block with line-height doing the centring, NOT flex — text-overflow cannot apply to a
   flex container's anonymous text item, so as a flex box this cut the room name off mid-glyph
   with no ellipsis. One line of text, so line-height centres it. MYC-1797. */
[b-2ktar1cj8f] .pending-clean-group-header {
    display: block;
    box-sizing: border-box;
    height: 64px;
    line-height: 64px;
    margin: 0;
    padding: 0 4px;
    border-bottom: 2px solid var(--mud-palette-lines-default);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Room + cleaning-type sub-group header — a scheduled task covers one cleaning type */
[b-2ktar1cj8f] .pending-clean-type-header {
    box-sizing: border-box;
    height: 64px;
    margin: 0;
    padding: 0 4px 0 8px;
    border-bottom: 1px dashed var(--mud-palette-lines-default);
    overflow: hidden;
    flex-wrap: nowrap;
}

/* On a wrapper, not GvsCheckBox: a class passed to a child component never gets the scope attribute. */
.pending-clean-select-all[b-2ktar1cj8f] {
    flex-shrink: 0;
    padding-left: 4px;
}

.pending-clean-visually-hidden[b-2ktar1cj8f] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.pending-clean-filter-anchor[b-2ktar1cj8f] {
    position: relative;
    flex-shrink: 0;
}

.pending-clean-filter-popover[b-2ktar1cj8f] {
    width: 260px;
}

/* White on the brand primary is 2.90:1, under the WCAG 2.2 AA 4.5:1 minimum. The darker shade
   of the same green reaches 5.16:1. !important because MudBlazor's own button colour rules
   match at equal specificity and load after the scoped bundle. See MYC-1626, MYC-1670. */
[b-2ktar1cj8f] .pending-clean-schedule-button {
    background-color: #2e7d22 !important;
    color: var(--mud-palette-white) !important;
}

[b-2ktar1cj8f] .pending-clean-schedule-button:hover {
    background-color: #256119 !important;
}

/* Keeps the last line clear of the panel edge, and the content clear of the bulk bar. The room
   groups used to supply this with a 16px margin; uniform lines carry no margin. MYC-1797. */
.pending-clean-list-end[b-2ktar1cj8f] {
    height: 8px;
}

/* Bulk action bar, pinned to the bottom of the panel while a selection is active */
.pending-clean-bulk-bar[b-2ktar1cj8f] {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-top: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-surface);
}
/* /Components/Tasks/Scheduled/Calendar/ScheduleCalendarPendingCleanRow.razor.rz.scp.css */
/* Height is pinned, not padded to: the virtualised list maps scroll position to rows through a
   single item height (_lineHeightPx in ScheduleCalendarPendingCleanList.razor.cs), so a row of any
   other height desynchronises the scrollbar from the content. Keep the two in step. MYC-1797. */
.pending-clean-row[b-7rtbnoufet] {
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    height: 64px;
    padding: 0 4px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
}

/* Grab affordance for dragging a clean onto a calendar cell */
.pending-clean-row-draggable[b-7rtbnoufet] {
    cursor: grab;
}

.pending-clean-row-draggable:active[b-7rtbnoufet] {
    cursor: grabbing;
}

[b-7rtbnoufet] .pending-clean-drag-handle {
    flex-shrink: 0;
    color: var(--mud-palette-text-secondary);
}

/* Takes the slack, and clips rather than growing — the row's height is fixed, so anything that
   overflows has to be hidden instead of pushing the row taller.
   ::deep because GvsStack renders this div: a class passed to a child component never receives the
   scope attribute, so an unprefixed rule here compiles to a selector that matches nothing and the
   row silently overflows instead of truncating. */
[b-7rtbnoufet] .pending-clean-row-info {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

/* The frequency and the due date share the second line and must never wrap onto a third */
[b-7rtbnoufet] .pending-clean-row-meta {
    flex-wrap: nowrap;
    min-width: 0;
}

/* Truncates rather than wrapping, and carries the full name in a title */
[b-7rtbnoufet] .pending-clean-element {
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* The frequency is short and fixed, so it holds its width and lets the date give way instead */
[b-7rtbnoufet] .pending-clean-frequency {
    flex-shrink: 0;
    margin: 0;
}

/* Last to give way, and only on the narrowest panels — the full date is in the row's aria-label */
[b-7rtbnoufet] .pending-clean-due {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* /Components/Tasks/Scheduled/Calendar/ScheduleCalendarToolbar.razor.rz.scp.css */
/* The brand primary (#42ad2a) only reaches 2.90:1 against white, below the WCAG 2.2 AA 4.5:1
   minimum — both for the Today button's green text and for the white text on the filled New
   Task button. Both write in the darker shade of the same green (5.16:1) that dialog titles
   already use. See MYC-1626, MYC-1670.

   !important because MudBlazor's own .mud-button-* colour rules match at equal specificity and
   load after the scoped bundle — the same reason app.css overrides .mud-dialog-title this way. */
[b-woed50amn7] .schedule-calendar-today-button {
    color: #2e7d22 !important;
}

[b-woed50amn7] .schedule-calendar-add-task-button {
    background-color: #2e7d22 !important;
    color: var(--mud-palette-white) !important;
}

[b-woed50amn7] .schedule-calendar-add-task-button:hover {
    background-color: #256119 !important;
}

/* The toolbar wraps onto more rows rather than squeezing its buttons: at 320px the flex row
   was shrinking the Today button past its own label, clipping the text. */
[b-woed50amn7] .schedule-calendar-today-button,
[b-woed50amn7] .schedule-calendar-add-task-button {
    flex-shrink: 0;
}
/* /Components/Tasks/Scheduled/Calendar/ScheduleCalendarToSchedulePanel.razor.rz.scp.css */
.schedule-calendar-side-panel[b-6ico6gulyk] {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-left: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-surface);
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.schedule-calendar-side-header[b-6ico6gulyk] {
    padding: 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex-shrink: 0;
}

/* No bottom padding: the bulk bar sticks to the content edge, so any would show as a strip beneath
   it with rows visible through it. The list supplies its own bottom spacing instead, inside the
   scrolled content — see .pending-clean-list-end. MYC-1797. */
.schedule-calendar-side-body[b-6ico6gulyk] {
    padding: 8px 12px 0;
    overflow-y: auto;
    flex: 1;
}

/* The body is focusable so it can be scrolled by keyboard, so it needs a focus indicator. */
.schedule-calendar-side-body:focus-visible[b-6ico6gulyk] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

/* Stacked under the calendar on a tablet the panel has no sized parent to take its height from, so
   it is capped here. The body below has to stay a bounded scroll container: Virtualize mounts every
   item when its scroll parent can grow without limit. MYC-1706. */
@media (max-width: 960px) {
    .schedule-calendar-side-panel[b-6ico6gulyk] {
        height: auto;
        max-height: 60vh;
    }
}
/* /Components/Tasks/Scheduled/Calendar/ScheduleCalendarWeekView.razor.rz.scp.css */
/* The brand primary (#42ad2a) measures 2.90:1 against white — under the WCAG 2.2 AA 4.5:1
   for text and under the 3:1 for focus rings and drop outlines. Everything in this grid
   that carries meaning in green uses the darker shade of it (5.16:1) that dialog titles
   already use. See MYC-1626, MYC-1670. */

.schedule-calendar-week-grid[b-lwqzzyrtrb] {
    overflow-x: auto;
}

.schedule-calendar-week-grid table[b-lwqzzyrtrb] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.schedule-calendar-slot-col[b-lwqzzyrtrb] {
    width: var(--slot-col-width, 120px);
}

.schedule-calendar-day-header[b-lwqzzyrtrb] {
    text-align: center;
    padding: 8px 4px;
    border-bottom: 2px solid var(--mud-palette-lines-default);
}

.schedule-calendar-day-header.schedule-calendar-today[b-lwqzzyrtrb] {
    border-bottom-color: #2e7d22;
}

.schedule-calendar-day-name[b-lwqzzyrtrb] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
}

.schedule-calendar-day-number[b-lwqzzyrtrb] {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
}

.schedule-calendar-today-number[b-lwqzzyrtrb] {
    background-color: #2e7d22;
    color: white;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    line-height: 28px;
    margin: 0 auto;
}

/* Sequence names are free text, so this cell holds arbitrary content. It wraps at spaces only:
   overflow-wrap is left at its default so a long word is never broken across lines, and the
   column is sized to the longest word on show. See MYC-1626. */
.schedule-calendar-slot-label[b-lwqzzyrtrb] {
    padding: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    vertical-align: top;
    white-space: normal;
    word-break: normal;
    hyphens: none;
    overflow: hidden;
    border-right: 1px solid var(--mud-palette-lines-default);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* Only a name too wide for the capped column goes on one line: text-overflow needs inline
   overflow to act on, and with wrapping left on the word is just cut at the cell edge with no
   cue that anything is missing. The cell's title carries the whole name either way. */
.schedule-calendar-slot-label-clipped[b-lwqzzyrtrb] {
    white-space: nowrap;
    text-overflow: ellipsis;
}

.schedule-calendar-cell[b-lwqzzyrtrb] {
    border-right: 1px solid var(--mud-palette-lines-default);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding: 4px;
    vertical-align: top;
    min-height: 60px;
    cursor: pointer;
}

/* The add button stays quiet at rest so the cells don't shout, but it surfaces on hover and
   whenever it takes focus — a focusable control must never be invisible while focused. */
.schedule-calendar-cell-add[b-lwqzzyrtrb] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 28px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.schedule-calendar-cell:hover .schedule-calendar-cell-add[b-lwqzzyrtrb],
.schedule-calendar-cell-add:focus-visible[b-lwqzzyrtrb] {
    opacity: 1;
}

/* Touch devices have no hover, so the affordance has to be visible at rest there. */
@media (hover: none) {
    .schedule-calendar-cell-add[b-lwqzzyrtrb] {
        opacity: 0.5;
    }
}

[b-lwqzzyrtrb] .schedule-calendar-add-icon {
    color: var(--mud-palette-text-secondary);
}

/* Drop targets: a dashed outline shows exactly which cell a clean will land in */
.schedule-calendar-cell-dragover[b-lwqzzyrtrb] {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.12);
    outline: 2px dashed #2e7d22;
    outline-offset: -2px;
}

/* Strip the outer frame — keep only internal grid lines */
.schedule-calendar-week-grid td:last-child[b-lwqzzyrtrb] {
    border-right: none;
}

.schedule-calendar-week-grid tbody tr:last-child td[b-lwqzzyrtrb] {
    border-bottom: none;
}

.schedule-calendar-today-col[b-lwqzzyrtrb] {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.04);
}

/* A real button, reset back to the chip's own look. min-height keeps the target at 24px. */
.schedule-calendar-task-chip[b-lwqzzyrtrb] {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-height: 24px;
    padding: 2px 6px;
    margin-bottom: 4px;
    border: none;
    border-radius: 4px;
    border-left: 3px solid;
    background-color: #f0f0f0;
    font-family: inherit;
    font-size: 0.7rem;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.schedule-calendar-task-chip:hover[b-lwqzzyrtrb] {
    background-color: #e0e0e0;
}

.schedule-calendar-task-chip:focus-visible[b-lwqzzyrtrb],
.schedule-calendar-chip-more:focus-visible[b-lwqzzyrtrb] {
    outline: 2px solid #2e7d22;
    outline-offset: 1px;
}

.schedule-calendar-task-chip[draggable="true"][b-lwqzzyrtrb] {
    cursor: grab;
}

.schedule-calendar-task-chip[draggable="true"]:active[b-lwqzzyrtrb] {
    cursor: grabbing;
}

.schedule-calendar-chip-room[b-lwqzzyrtrb] {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Shrinks ahead of the task name so the cleaning type stays readable in narrow cells. */
.schedule-calendar-chip-type[b-lwqzzyrtrb] {
    flex: 0 3 auto;
    min-width: 0;
    font-size: 0.65rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--mud-palette-text-secondary);
}

/* A real button, reset back to the plain link it looks like. */
.schedule-calendar-chip-more[b-lwqzzyrtrb] {
    width: 100%;
    padding: 1px 6px;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 0.65rem;
    color: #2e7d22;
    cursor: pointer;
    text-align: center;
}

/* Compact week grid on phones: fit the full week without horizontal scrolling.
   Task chips collapse to small bars whose left edge keeps the cleaning-type colour. */
@media (max-width: 600px) {
    .schedule-calendar-slot-col[b-lwqzzyrtrb] {
        width: var(--slot-col-width-compact, 72px);
    }

    /* Seven day columns plus a label column wide enough for the longest sequence name do not
       both fit a 320px screen. The day headers are the first thing to become unreadable, so
       the grid keeps a legible minimum and scrolls inside its own container instead. */
    .schedule-calendar-week-grid table[b-lwqzzyrtrb] {
        min-width: calc(var(--slot-col-width-compact, 72px) + (7 * 34px));
    }

    .schedule-calendar-slot-label[b-lwqzzyrtrb] {
        padding: 4px 2px;
        font-size: 0.6rem;
    }

    .schedule-calendar-cell[b-lwqzzyrtrb] {
        padding: 2px;
    }

    .schedule-calendar-day-name[b-lwqzzyrtrb] {
        font-size: 0.6rem;
    }

    .schedule-calendar-day-number[b-lwqzzyrtrb] {
        font-size: 0.85rem;
    }

    .schedule-calendar-today-number[b-lwqzzyrtrb] {
        width: 22px;
        height: 22px;
        line-height: 22px;
    }

    .schedule-calendar-task-chip[b-lwqzzyrtrb] {
        min-height: 22px;
        padding: 4px 3px;
        gap: 0;
        font-size: 0.55rem;
        align-items: center;
    }

    .schedule-calendar-chip-room[b-lwqzzyrtrb] {
        font-size: 0.55rem;
    }

    /* Hide the room label on phones so the task name keeps the narrow cell width */
    .schedule-calendar-chip-type[b-lwqzzyrtrb] {
        display: none;
    }

    .schedule-calendar-chip-more[b-lwqzzyrtrb] {
        font-size: 0.55rem;
        padding: 0;
    }
}
/* /Components/Tasks/Scheduled/Mobile/MobileScheduledAreaHeader.razor.rz.scp.css */
/* Pinned to the top of the scroll so the ward the domestic is looking at is always named. The
   room heading pins directly beneath it and reads --mtl-area-h to know where that is; the two
   heights have to agree or the room heading overlaps this one. */
.mobile-area-header[b-kivqf38rrh] {
    position: sticky;
    top: var(--mah-top, 124px);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    /* min-height, with --mtl-area-h in rem: a fixed px height clipped this heading's own text at
       200% zoom, and the room heading -- which pins directly beneath using the same variable --
       then scales with it instead of drifting apart. */
    /* border-box so the two 1px rules count inside --mtl-area-h: without it the strip measures
       36px while the room heading pins at 34px, and the last 2px of it disappear underneath. */
    box-sizing: border-box;
    min-height: var(--mtl-area-h, 2.125rem);
    /* Cleared of the app bar when a jump chip scrolls to it. */
    scroll-margin-top: var(--mah-top, 124px);
    padding: 4px 12px;
    border-top: 1px solid var(--mud-palette-lines-default);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
}

/* Size and tracking come from Typo.overline; casing and line-height do not. MudBlazor's overline
   leaves text-transform alone, and its line-height would push this permanently-visible strip from
   34px to 42px -- which the room heading then pins underneath, because both offset off
   --mtl-area-h. ::deep because GvsText renders the element. */
[b-kivqf38rrh] .mah-name {
    min-width: 0;
    overflow: hidden;
    font-weight: 600;
    line-height: 1.4;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

[b-kivqf38rrh] .mah-count {
    flex: none;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ::deep because the class is handed to GvsButton, which renders the element -- scoped CSS does
   not reach it otherwise, and the button then renders at MudBlazor's default size and pushes this
   strip past the height the room heading offsets by.

   Small on a heading: the strip is on screen permanently, and every pixel of it is a pixel of the
   list a domestic cannot see. */
/* Filled rather than outlined: on a grey band an outlined button read as a label rather than a
   control. The surface colour comes from a11y-primary-surface in app.css; only the sizing is
   set here, because the strip is on screen permanently and every pixel of it is a pixel of the
   list a domestic cannot see. */
[b-kivqf38rrh] .mah-take-all.mud-button-root {
    flex: none;
    min-width: 0;
    min-height: 1.625rem;
    padding: 0 12px;
    color: #fff;
    text-transform: none;
    scroll-margin-top: calc(var(--mtl-stack, 160px) + 2.5rem);
}
/* /Components/Tasks/Scheduled/Mobile/MobileScheduledHeader.razor.rz.scp.css */
/* Full bleed, so the band runs the width of the screen rather than stopping inside
   GvsBasePageLayout's grid padding. The 24px inset then lines its text up with everything else
   on the page. */
.msh[b-mhk1jg6896] {
    /* Pinned directly under the app bar, above the area and room headings, which offset off its
       height. Fixed height, not a minimum: the bands below read --msh-h to know where it ends,
       and a header that grew would sit underneath them. Above the day band, which scrolls up
       across it when a collapsed day passes or the next day pushes the band out. */
    position: sticky;
    top: var(--msh-top, 56px);
    z-index: 4;
    box-sizing: border-box;
    height: var(--msh-h, 4.25rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 24px 14px;
    /* Not --mud-palette-primary: white on #42ad2a is 2.90:1. #2e7d22 is the shade app.css already
       settled on for brand green carrying text -- white on it is 5.16:1. */
    background: #2e7d22;
    color: #fff;
}

.msh-text[b-mhk1jg6896] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

[b-mhk1jg6896] .msh-title {
    overflow: hidden;
    color: #fff;
    font-weight: 600;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-mhk1jg6896] .msh-day {
    color: #fff;
    line-height: 1.4;
}

/* A solid pill rather than the translucent one the mockup used: white on a 22%-white wash over
   the band computes to about 3.3:1, which small text does not get away with. */
.msh-progress[b-mhk1jg6896] {
    flex: none;
    padding: 4px 12px;
    border-radius: 20px;
    background: #fff;
    color: #23611a;
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (max-width: 360px) {
    .msh[b-mhk1jg6896] {
        padding-right: 8px;
    }
}
/* /Components/Tasks/Scheduled/Mobile/MobileScheduledRoomHeader.razor.rz.scp.css */
/* Pinned directly beneath the area band. Both headings sit in their own section (see
   MobileScheduledTasksView.razor.css), so each is pushed out by the next as its own rows run out
   rather than stacking at a shared offset -- which is what left a taller heading's tail showing
   underneath a shorter one. */
.mobile-room-header[b-futt9ii29a] {
    position: sticky;
    top: var(--mrh-top, 160px);
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    /* Fixed, not a minimum, and matching the area band above it. The reactive bell is a
       Size.Small icon button (~37px), so rooms that had one stood 45px tall against 32px for the
       rest -- and a sticky heading that is taller than the one painting over it shows its tail
       underneath. Uniform height means they cover each other exactly. */
    box-sizing: border-box;
    height: 36px;
    padding: 4px 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

/* Layout only -- the scale comes from Typo. ::deep because GvsText renders the element. */
[b-futt9ii29a] .mrh-name {
    min-width: 0;
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mrh-slot[b-futt9ii29a] {
    flex: none;
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--mud-palette-dark);
    color: var(--mud-palette-dark-text);
    font-weight: 600;
    line-height: 1.5;
}

[b-futt9ii29a] .mrh-count {
    flex: none;
    margin-inline-start: auto;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* Sized to sit inside the band without stretching it. 28px keeps the bell clear of WCAG 2.5.8's
   24px floor; growing the permanently-pinned band to fit the button instead would cost 13px of
   the list on every screen. Colour is deliberately untouched -- see ReactiveCleanIndicator. */
.mobile-room-header[b-futt9ii29a]  .reactive-indicator {
    width: 28px;
    height: 28px;
    padding: 0;
}
/* /Components/Tasks/Scheduled/Mobile/MobileScheduledTaskCard.razor.rz.scp.css */
/* The row and its Assign button are siblings, not nested: a button may not contain another
   button. The row still owns almost all of the width, so opening a clean stays the easy tap. */
.mobile-task-row[b-sf0mwfaddi] {
    display: flex;
    align-items: stretch;
    width: 100%;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

.mobile-task-card[b-sf0mwfaddi] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    /* Comfortably past the 44px a gloved thumb needs, and past WCAG 2.5.8's 24px floor. */
    min-height: 60px;
    padding: 10px 10px 10px 12px;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    /* The app bar and both sticky headings are fixed, so a row scrolled into view by the keyboard
       came to rest underneath them (2.4.11). */
    scroll-margin-top: calc(var(--mtl-stack, 160px) + 2.5rem);
}

/* Touch has no hover, so the pressed state is the only feedback that a tap registered. */
.mobile-task-card:active[b-sf0mwfaddi] {
    background: var(--mud-palette-action-default-hover);
}

.mobile-task-card:focus-visible[b-sf0mwfaddi],
.mtc-assign:focus-visible[b-sf0mwfaddi] {
    outline: 2px solid var(--mud-palette-text-primary);
    outline-offset: -2px;
}

/* Not text-disabled (2.64:1): the row is deliberately kept reachable and "Taken by someone else"
   is the only place that state is written. */
.mtc-gone[b-sf0mwfaddi]  .mtc-meta {
    color: var(--mud-palette-text-secondary);
}

/* Just a fixed gutter so every row's text starts on the same vertical line. The glyph itself
   carries the product's standard status colour inline, exactly as it does everywhere else. */
.mtc-status[b-sf0mwfaddi] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    /* rem, not px: at 200% text the glyph grows too, and a fixed gutter put it over the type. */
    min-width: 2.125rem;
}

.mtc-main[b-sf0mwfaddi] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

/* Room and slot, reading as one unit. The slot uses the same dark badge as the room heading, so
   "S1" means the same thing wherever it appears. */
.mtc-where[b-sf0mwfaddi] {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-width: 0;
}

[b-sf0mwfaddi] .mtc-room {
    min-width: 0;
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mtc-slot[b-sf0mwfaddi] {
    flex: none;
    padding: 0 5px;
    border-radius: 3px;
    background: var(--mud-palette-dark);
    color: var(--mud-palette-dark-text);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.6;
}

/* CleanTypeBadge carries the cleaning type's own colour and icon, which is how the type is drawn
   on the desktop table and the calendar too. */
.mtc-type[b-sf0mwfaddi] {
    display: block;
    max-width: 100%;
    min-width: 0;
}

/* Allowed to wrap, unlike the type: this line carries the spelled-out status, which is what stops
   the glyph's colour being the only signal. Truncating it removed that at 200% text. */
[b-sf0mwfaddi] .mtc-meta {
    color: var(--mud-palette-text-secondary);
}

[b-sf0mwfaddi] .mtc-chevron {
    flex: none;
    color: var(--mud-palette-text-secondary);
}

/* Its own control, beside the row rather than on it, so looking at a clean and assigning it are
   never the same tap. Large and labelled -- the 30px unlabelled icon button it replaces is the
   defect this ticket exists to fix -- and set apart from the chevron, because two adjacent
   controls reading as one blob is the same confusion in a new place. */
.mtc-assign[b-sf0mwfaddi] {
    flex: none;
    align-self: center;
    min-width: 4.5rem;
    min-height: 2.25rem;
    margin-inline: 4px 12px;
    padding: 6px 14px;
    border: 0;
    border-radius: 16px;
    /* Not --mud-palette-primary: #42ad2a on white is 2.90:1. #2e7d22 is the shade app.css already
       settled on for brand green carrying text (5.16:1) -- see .a11y-primary-surface there. */
    background: #2e7d22;
    color: #fff;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    scroll-margin-top: calc(var(--mtl-stack, 160px) + 2.5rem);
}

.mtc-assign:active[b-sf0mwfaddi] {
    background: #24631a;
}

.mtc-assign-undo[b-sf0mwfaddi] {
    border: 1.5px solid #2e7d22;
    background: var(--mud-palette-surface);
    color: #2e7d22;
}

.mtc-assign[aria-disabled="true"][b-sf0mwfaddi] {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-secondary);
    cursor: default;
}

/* Not a control: the clean has gone to someone else, so there is nothing left to press. */
.mtc-pill[b-sf0mwfaddi] {
    flex: none;
    align-self: center;
    margin-inline-end: 12px;
    padding: 6px 13px;
    border-radius: 16px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.mtc-pill-gone[b-sf0mwfaddi] {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-secondary);
}
/* /Components/Tasks/Scheduled/Mobile/MobileScheduledTasksView.razor.rz.scp.css */
.mobile-quick-filters[b-qboxwbnipv] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.mobile-quick-filters[b-qboxwbnipv]::-webkit-scrollbar {
    display: none;
}

.mobile-quick-filters[b-qboxwbnipv]  .mud-chip {
    flex-shrink: 0;
    margin: 0;
}

/* The rule separates choosing which cleans to look at from narrowing them by slot -- two
   different jobs that read as one strip of chips without it. It runs the full width of the page
   rather than stopping inside GvsBasePageLayout's grid padding, so it reads as a division of the
   screen and not as an underline on the chips.

   The 24px inset then puts the chips on the same left edge as the page title above them; the
   grid's own padding had them 16px further in than everything else on the page. */
.mobile-view-tabs[b-qboxwbnipv] {
    padding: 12px 24px 14px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* MudBlazor gives chips their own margin, which pushed the first one off the title's edge. */
.mobile-view-tabs[b-qboxwbnipv]  .mud-chip {
    margin: 0;
}

/* At 320px the two mode chips plus the 40px filter button used to overrun this row and put the
   whole page into horizontal scroll (1.4.10). Going full bleed hands back the grid's 48px, which
   is more than the deficit, so the rows keep the title's inset at every width -- but the trailing
   side is trimmed at the narrowest sizes for margin, since nothing aligns to the right edge. */
@media (max-width: 360px) {
    .mobile-view-tabs[b-qboxwbnipv],
    .mobile-quick-filters[b-qboxwbnipv] {
        padding-right: 8px;
    }
}

/* The region is tabindex="-1", so it is never tab-reached -- it is only focused in code, to
   catch focus when the empty state's button removes itself. A pointer user who tapped that
   button does not need a ring on the whole list; a keyboard user does, hence :focus-visible. */
.mobile-task-list:focus[b-qboxwbnipv] {
    outline: none;
}

.mobile-task-list:focus-visible[b-qboxwbnipv] {
    outline: 2px solid var(--mud-palette-text-primary);
    outline-offset: -2px;
}

/* Both carry a live-region announcement -- the list's own, and the online/offline swap's focus
   target -- so they stay in the accessibility tree rather than being hidden with display: none. */
.visually-hidden[b-qboxwbnipv],
.mobile-scheduled-anchor[b-qboxwbnipv] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Hidden until tabbed to. Sits above the header and the bands rather than under them -- see
   --mtl-stack. */
.mobile-skip-to-end[b-qboxwbnipv] {
    position: absolute;
    left: -10000px;
    z-index: 5;

    /* A button, so the browser's own chrome comes off it. */
    border: 0;
    font: inherit;
    cursor: pointer;
}

.mobile-skip-to-end:focus[b-qboxwbnipv],
.mobile-skip-to-end:focus-visible[b-qboxwbnipv] {
    position: sticky;
    top: var(--mtl-top);
    left: auto;
    display: block;
    margin: 4px 16px;
    padding: 8px 12px;
    width: fit-content;
    border-radius: 4px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    outline: 2px solid var(--mud-palette-text-primary);
    outline-offset: -2px;
}

/* The stack of things pinned to the top of the screen, declared in one place because four
   elements have to agree on it: the fixed app bar, then the green header, then the area heading,
   then the room heading. Each offsets by the sum of everything above it, so a wrong figure here
   shows up as one band sitting underneath another.

   This element owns them because it is the only ancestor of both the header and the list -- the
   GvsStack it replaced is a child component, whose root never carries this component's scope. */
.mobile-scheduled[b-qboxwbnipv] {
    display: flex;
    flex-direction: column;

    /* The green header pins at the app bar's bottom edge, but at rest it starts 16px lower and
       leaves a white seam between the two. That 16px is what GvsBasePageLayout's grid adds above
       this view once its own heading is suppressed: the grid's 16px padding plus the item's 24px,
       less the grid's -24px margin. Pulled back so the band meets the app bar at every scroll
       position. */
    margin-top: -16px;

    /* Full bleed once, here, rather than on each child: GvsBasePageLayout's grid would otherwise
       leave the bands floating in a margin instead of banding the screen. Deliberately not the
       50%/50vw pair this replaced -- vw counts the scrollbar gutter and 50% does not, so the bands
       overhung the page by the gutter's width the moment the list grew long enough to scroll. */
    margin-inline: calc(-1 * var(--mtl-bleed));

    /* What the layout insets this view by: the container's 16px, the grid's own px-2, and the
       grid item's 24px, less the grid's -24px margin. */
    --mtl-bleed: 24px;

    /* Sizes come from :root in app.css, which scroll-padding-top on html shares. */
    --mtl-offline: 0px;
    --mtl-top: calc(var(--sched-bar-h, 56px) + var(--mtl-offline));
    --msh-h: var(--sched-header-h, 4.25rem);
    --mtl-area-h: var(--sched-area-h, 2.25rem);

    /* Zero unless a day band is actually rendered, so the bands below it keep their old offsets on
       a single-day list rather than resting under a gap where no band exists. */
    --mtl-day-h: 0px;

    /* Where each band comes to rest, and the full depth of the stack for scroll margins. */
    --msh-top: var(--mtl-top);
    --mday-top: calc(var(--mtl-top) + var(--msh-h));
    --mah-top: calc(var(--mtl-top) + var(--msh-h) + var(--mtl-day-h));
    --mrh-top: calc(var(--mtl-top) + var(--msh-h) + var(--mtl-day-h) + var(--mtl-area-h));
    --mtl-stack: calc(var(--mrh-top) + var(--mtl-room-h));
    --mtl-room-h: 2.25rem;
}

/* The band is the same box as the area heading, so it takes the same height out of the stack. */
.mobile-scheduled.mtl-multi-day[b-qboxwbnipv] {
    --mtl-day-h: var(--mtl-area-h);
}

.mobile-scheduled.mtl-offline[b-qboxwbnipv] {
    --mtl-offline: var(--offline-bar-height, 24px);
}

/* The stale-day warning sits between the app bar and the header, so pulling the header up would
   lay it over the warning's bottom edge. The warning's own margin is the gap. */
.mobile-scheduled.mtl-stale[b-qboxwbnipv] {
    margin-top: 0;
}

/* The bottom app bar is fixed too, so without this the last clean of the day sits under it. */
.mobile-task-list[b-qboxwbnipv] {
    padding-bottom: 56px;
}

/* The containing blocks the sticky headings travel inside. Without them every heading pinned at
   the same offset and stacked, and the tallest one's tail showed under whichever painted over it. */
.mobile-day-section[b-qboxwbnipv],
.mobile-area-section[b-qboxwbnipv],
.mobile-room-section[b-qboxwbnipv] {
    display: flow-root;
}

.mobile-task-rows[b-qboxwbnipv] {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A row outside the viewport costs no style, layout or paint. The placeholder is the row's
   measured height, in rem so it still matches at 200% text -- one shorter than the real row makes
   the document grow under the thumb for the whole first descent. Safe here: the sticky headings
   are in the sections above, not the rows. */
.mobile-task-rows > li[b-qboxwbnipv] {
    content-visibility: auto;
    contain-intrinsic-size: auto 6.125rem;
}

/* The list's footer, not a button parked under it: the hairline does the separating. */
.mobile-show-more-row[b-qboxwbnipv] {
    padding: 4px 16px 20px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.mobile-show-more-row[b-qboxwbnipv]  .mobile-show-more {
    padding: 10px 12px;
    min-height: 44px;
    border-radius: 8px;
    font-weight: 500;
    text-transform: none;
}

/* Sized to the chevron it replaces, so the label does not shift as the fetch starts. */
.mobile-show-more-row[b-qboxwbnipv]  .mobile-show-more-spinner {
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

/* Watched, not seen. Given a height: a zero-height box is not reliably reported as
   intersecting. */
.mobile-load-sentinel[b-qboxwbnipv] {
    height: 1px;
}

/* Only the very last row in the list drops its rule. This lived in the card's own stylesheet as
   .mobile-task-card:last-child, which matched every row -- each button is the sole child of its
   own <li> -- so no row had a separator at all. Scoped through the day section too, or the last
   row of every day would lose its separator rather than only the last row on screen. */
.mobile-task-list .mobile-day-section:last-of-type
.mobile-area-section:last-of-type
.mobile-room-section:last-of-type li:last-child[b-qboxwbnipv]  .mobile-task-row {
    border-bottom: none;
}

/* The day band's own rules live in ScheduledDayBand.razor.css: the element moved into
   that component, so a scoped rule here would no longer match it. The offsets it reads are
   declared on .mobile-scheduled above and inherit down to it. */


/* MudBlazor's orange warning text is under 4.5:1 on its own tint; Deep Orange 900 clears it, as on
   the task dialog's offline reasons. */
.mobile-stale-region[b-qboxwbnipv]  .mud-alert-text-warning .mud-alert-message {
    color: #BF360C;
}
/* /Components/Tasks/Scheduled/Overview/ScheduledOverviewMobileArea.razor.rz.scp.css */
/* The header is a real button so it is keyboard reachable, which means the browser's button
   styling has to be reset back to the surrounding paper. A button may only contain phrasing
   content, so it lays its own row out rather than wrapping a GvsStack's div. */
.live-mobile-area-header[b-jdgy1v3av5] {
    display: flex;
    /* Browsers centre a button's flex content; the header reads as a row, so it starts at the edge. */
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

/* Pushed to the right the way the GvsSpacer used to. ::deep because GvsText renders the span,
   so it carries no scope attribute of this component's own. */
.live-mobile-area-header[b-jdgy1v3av5]  .live-mobile-area-progress {
    margin-left: auto;
}

.live-mobile-area-header:active[b-jdgy1v3av5] {
    background-color: var(--mud-palette-background-gray);
}

.live-mobile-area-header:focus-visible[b-jdgy1v3av5] {
    outline: 2px solid var(--mud-palette-text-primary);
    outline-offset: -2px;
}

.live-mobile-seq[b-jdgy1v3av5] {
    padding: 8px 12px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.live-pill-row[b-jdgy1v3av5] {
    display: flex;
    gap: 4px;
    align-items: center;
}

/* Pills wrap onto new lines instead of scrolling sideways. */
.live-pill-row-wrap[b-jdgy1v3av5] {
    flex-wrap: wrap;
    overflow-x: visible;
}
/* /Components/Tasks/Scheduled/Overview/ScheduledOverviewPill.razor.rz.scp.css */
/* Status colours/patterns are mirrored by the legend swatches in
   ScheduledOverviewView.razor.css — keep the two in sync. */
.live-pill[b-wh23sv0ay3] {
    position: relative;
    width: 30px;
    height: 34px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    transition: transform 0.08s, box-shadow 0.08s;
}

.live-pill:hover[b-wh23sv0ay3] {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    z-index: 2;
}

/* The pills are keyboard reachable, so they need a focus ring that stays visible against every
   status background — an offset dark ring rather than the browser default over saturated fills. */
.live-pill:focus-visible[b-wh23sv0ay3] {
    outline: 2px solid var(--mud-palette-text-primary);
    outline-offset: 2px;
    z-index: 3;
}

/* Font-glyph advance widths differ per icon, so give every font icon a fixed, glyph-centred
   box (the Font Awesome fa-fw treatment) and cap its size — otherwise wide or side-heavy
   cleaning-type glyphs sit visibly off-centre and tight against the pill edges. MudIcon
   renders font icons as a span (SVG icons centre naturally and are left alone), and ::deep
   must hang off .live-pill, the scoped root element, for the rule to reach it. */
.live-pill[b-wh23sv0ay3]  span.mud-icon-root {
    font-size: 1.1rem;
    width: 1.25em;
    text-align: center;
}

.live-pill-completed[b-wh23sv0ay3] {
    background: var(--mud-palette-success-darken);
}

.live-pill-started[b-wh23sv0ay3] {
    background: var(--mud-palette-warning-darken);
}

/* Started's non-colour cue, and the only thing separating it from completed in greyscale, where
   the two fills are 1.26:1 apart. It is pinned to the tile's bottom edge rather than stacked
   under the glyph in a column flex: the pill is a fixed 34px that centres its content, so a
   column would raise the glyph by (gap + 2) / 2 and leave the amber tiles riding visibly above
   their neighbours in a dense row. Taking the bar out of flow keeps the glyph on the same centre
   line every other status uses, and anchoring it to the edge rather than trailing the icon is
   what stops it reading as a minus sign hanging off the letterform. Leaves ~3px of clearance
   below the glyph box, so the 34px height is the constraint any change here has to respect.
   Width spans the icon box so the bar reads as an underscore under the glyph rather than a short
   dash floating beneath it: 22px is the font-icon box the rule above pins (1.25em at 1.1rem);
   a cleaning type with no icon falls back to an SVG, which keeps MudBlazor's 20px Size.Small
   box and so sits 1px inside the bar on each side. */
.live-pill-started[b-wh23sv0ay3]::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 1px;
}

/* Paused and cancelled carry clearly visible patterns (stripes/crosshatch) so they read by
   texture as well as colour, and accepted is a solid deep purple — a literal because the
   theme has no third accent (secondary is black) — keeping it apart from paused's blue for
   colourblind users by both hue and the absence of stripes. */
.live-pill-paused[b-wh23sv0ay3] {
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 6px,
        rgba(255, 255, 255, 0.3) 6px,
        rgba(255, 255, 255, 0.3) 10px
    ),
    var(--mud-palette-info-darken);
}

.live-pill-cancelled[b-wh23sv0ay3] {
    background:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 4px,
            rgba(255, 255, 255, 0.22) 4px,
            rgba(255, 255, 255, 0.22) 8px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 4px,
            rgba(255, 255, 255, 0.22) 4px,
            rgba(255, 255, 255, 0.22) 8px
        ),
        var(--mud-palette-error-darken);
}

.live-pill-accepted[b-wh23sv0ay3] {
    background: #673AB7;
}

.live-pill-allocated[b-wh23sv0ay3] {
    background: var(--mud-palette-dark-lighten);
}

/* Unallocated is the one pill drawn on the page background rather than a fill, so its outline and
   glyph are the only things carrying it. #B5B5B5 reached 2.05:1 and #999 2.85:1 against white,
   both under the 3:1 WCAG 1.4.11 minimum for a control boundary; #767676 gives 4.54:1. */
.live-pill-unallocated[b-wh23sv0ay3] {
    background: transparent;
    border: 2px dashed #767676;
    color: #767676;
}
/* /Components/Tasks/Scheduled/Overview/ScheduledOverviewProgressRing.razor.rz.scp.css */
/* Arcs start at 12 o'clock rather than 3. */
.live-ring-svg[b-vwjvkfgx3k] {
    transform: rotate(-90deg);
    display: block;
    flex-shrink: 0;
}

/* Matched to .live-legend-swatch.live-pill-cancelled in ScheduledOverviewView.razor.css — keep the
   two in step, the ring and the key are read side by side. */
.live-ring-hatch-base[b-vwjvkfgx3k] {
    fill: var(--mud-palette-error-darken);
}

.live-ring-hatch-band[b-vwjvkfgx3k] {
    fill: rgba(255, 255, 255, 0.22);
}
/* /Components/Tasks/Scheduled/Overview/ScheduledOverviewTable.razor.rz.scp.css */
/* The table scrolls in its own panel rather than growing the page. A whole estate's worth of
   room-tasks cannot all be mounted at once, and virtualising the area rows needs a scroll
   container with a bounded height to measure against — an unbounded one reports the entire
   content as visible and mounts the lot. MYC-1702. */
.live-scroll-wrap[b-vko2h338r0] {
    overflow: auto;

    /* Sized against what sits above it — app bar, page heading, legend — rather than a flat
       fraction of the viewport, which on a 768px laptop pushed the panel's own scrollbars below
       the fold and left the page and the panel both scrolling. The floor keeps a few lanes
       visible in a short window. */
    max-height: max(320px, calc(100vh - 320px));
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
}

/* The wrapper is focusable so it can be scrolled by keyboard, so it needs a focus indicator. */
.live-scroll-wrap:focus-visible[b-vko2h338r0] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.live-table[b-vko2h338r0] {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    background: var(--mud-palette-surface);
}

.live-table th[b-vko2h338r0],
.live-table td[b-vko2h338r0] {
    padding: 8px 10px;
    font-size: 13px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    vertical-align: middle;
}

/* The panel scrolls, so the column header stays put above the rows. The background has to stay
   opaque or the rows show through it as they pass under — background-gray is, and is now spelt
   the way MudBlazor 9.x actually emits it. */
.live-table thead th[b-vko2h338r0] {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--mud-palette-background-gray);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mud-palette-text-secondary);
}

.row-padding[b-vko2h338r0] {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}

.live-sticky-left[b-vko2h338r0] {
    position: sticky;
    left: 0;
    z-index: 2;
    background: inherit;
}

.live-sticky-left-seq[b-vko2h338r0] {
    position: sticky;
    left: 180px;
    z-index: 2;
    background: inherit;
}

.live-sticky-right[b-vko2h338r0] {
    position: sticky;
    right: 0;
    z-index: 2;
    background: inherit;
}

/* Above both the sticky header band and the pinned body columns it crosses. */
.live-table thead th.live-sticky-left[b-vko2h338r0],
.live-table thead th.live-sticky-left-seq[b-vko2h338r0],
.live-table thead th.live-sticky-right[b-vko2h338r0] {
    z-index: 4;
}

.live-th-area[b-vko2h338r0] {
    width: 180px;
    min-width: 180px;
}

.live-th-seq[b-vko2h338r0] {
    width: 40px;
    min-width: 40px;
}

.live-th-pills[b-vko2h338r0] {
    min-width: 600px;
}

.live-th-pct[b-vko2h338r0] {
    width: 80px;
    min-width: 80px;
    text-align: right;
}

.live-td-area[b-vko2h338r0] {
    border-right: 1px solid var(--mud-palette-lines-default);
    border-bottom: none !important;
    vertical-align: top;
    padding-top: 12px !important;
    background: var(--mud-palette-surface);
}

.live-td-seq[b-vko2h338r0] {
    vertical-align: middle;
    background: var(--mud-palette-surface);
}

.live-last-seq td[b-vko2h338r0] {
    border-bottom: none;
}

.live-td-pct[b-vko2h338r0] {
    text-align: right;
    border-left: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

.live-td-pills[b-vko2h338r0] {
    padding: 4px 8px !important;
}

/* overflow-x: auto also clips vertical overflow, so the padding has to leave room for anything
   the pills paint outside their own box: the 1px hover lift and shadow, and the focus ring, which
   reaches 4px out (2px wide at 2px offset). Less than that on the top or sides cuts the ring off. */
.live-pill-row[b-vko2h338r0] {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    align-items: center;
    overflow-x: auto;
    padding: 4px 4px 6px;
}

/* The band between areas carries a single rule centred in the gap (the row border the last
   sequence row suppresses). Drawn as a gradient so one spacer row needs no bordered
   neighbours, and left transparent so it reads as a gap rather than a row. */
.live-area-spacer td[b-vko2h338r0] {
    height: 21px;
    padding: 0;
    border: none;
    background: linear-gradient(
        to bottom,
        transparent 10px,
        var(--mud-palette-lines-default) 10px,
        var(--mud-palette-lines-default) 11px,
        transparent 11px
    );
}

.live-area-spacer .live-area-spacer-mid[b-vko2h338r0] {
    border-left: 1px solid var(--mud-palette-lines-default);
    border-right: 1px solid var(--mud-palette-lines-default);
}

.live-area-key[b-vko2h338r0] {
    display: flex;
    flex-direction: column;
    margin-top: 4px;
}

/* ::deep: GvsText renders the element the clamp has to sit on. */
.live-area-name[b-vko2h338r0]  .mud-typography {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
/* /Components/Tasks/Scheduled/Overview/ScheduledOverviewTip.razor.rz.scp.css */
.live-tip[b-tqy02ycslj] {
    position: fixed;
    z-index: 9999;
    background: #1F1F1F;
    color: #fff;
    padding: 10px 12px;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    font-size: 12px;
    line-height: 1.4;
    max-width: 280px;
    pointer-events: none;
}

.live-tip-title[b-tqy02ycslj] {
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 2px;
}

.live-tip-meta[b-tqy02ycslj] {
    color: #BDBDBD;
    font-size: 11px;
}

.live-tip-row[b-tqy02ycslj] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.live-tip-badge[b-tqy02ycslj] {
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.04em;
}

.live-tip-badge-completed[b-tqy02ycslj] { background: #E5F2D8; color: #2F5E17; }
.live-tip-badge-started[b-tqy02ycslj] { background: #FBE9BE; color: #8A5A00; }
.live-tip-badge-paused[b-tqy02ycslj] { background: #D3E7F6; color: #1A5A8F; }
.live-tip-badge-cancelled[b-tqy02ycslj] { background: #FADBDB; color: #9B1818; }
.live-tip-badge-accepted[b-tqy02ycslj] { background: #E6DDF6; color: #5E35B1; }
.live-tip-badge-allocated[b-tqy02ycslj] { background: #E5E5E5; color: #444; }
.live-tip-badge-unallocated[b-tqy02ycslj] { background: #EFEFEF; color: #666; }

.live-tip-type[b-tqy02ycslj] {
    color: #BDBDBD;
    font-size: 11px;
}

.live-tip-detail[b-tqy02ycslj] {
    color: #BDBDBD;
    font-size: 11px;
    margin-top: 4px;
}

.live-tip-assignee[b-tqy02ycslj] {
    color: #BDBDBD;
    font-size: 11px;
    margin-top: 4px;
}

.live-tip-reactive[b-tqy02ycslj] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--mud-palette-warning);
    font-size: 11px;
    font-weight: 600;
    margin-top: 6px;
}

[b-tqy02ycslj] .live-tip-reactive .mud-icon-root {
    font-size: 14px;
}
/* /Components/Tasks/Scheduled/Overview/ScheduledOverviewView.razor.rz.scp.css */
/* The swatch status colours mirror the pill backgrounds in
   ScheduledOverviewPill.razor.css — keep the two in sync. */
.live-legend-swatch[b-z7x0zp9mmg] {
    position: relative;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.live-legend-swatch.live-pill-completed[b-z7x0zp9mmg] {
    background: var(--mud-palette-success-darken);
}

.live-legend-swatch.live-pill-started[b-z7x0zp9mmg] {
    background: var(--mud-palette-warning-darken);
}

/* Mirror the Started pill's white-bar marker so the legend keeps its non-colour cue, and mirror
   its placement too: the pill pins the bar to the tile's bottom edge rather than centring it, so
   a centred dash here would leave the key depicting something the tiles do not draw. Scaled to
   the 18px swatch at the pill's proportions - 12px of 18 against 22px of 30, 2px off the edge
   against 3px of 34. */
.live-legend-swatch.live-pill-started[b-z7x0zp9mmg]::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 2px;
    background: #fff;
    border-radius: 1px;
}

.live-legend-swatch.live-pill-paused[b-z7x0zp9mmg] {
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 6px,
        rgba(255, 255, 255, 0.3) 6px,
        rgba(255, 255, 255, 0.3) 10px
    ),
    var(--mud-palette-info-darken);
}

.live-legend-swatch.live-pill-cancelled[b-z7x0zp9mmg] {
    background:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 4px,
            rgba(255, 255, 255, 0.22) 4px,
            rgba(255, 255, 255, 0.22) 8px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 4px,
            rgba(255, 255, 255, 0.22) 4px,
            rgba(255, 255, 255, 0.22) 8px
        ),
        var(--mud-palette-error-darken);
}

.live-legend-swatch.live-pill-accepted[b-z7x0zp9mmg] {
    background: #673AB7;
}

.live-legend-swatch.live-pill-allocated[b-z7x0zp9mmg] {
    background: var(--mud-palette-dark-lighten);
}

.live-legend-swatch.live-pill-unallocated[b-z7x0zp9mmg] {
    background: transparent;
    border: 2px dashed #767676;
}

/* Breathing room under the collapsed status key so the swatches do not sit against the first area. */
.live-status-key[b-z7x0zp9mmg] {
    padding-bottom: 8px;
}
/* /Components/Tasks/Scheduled/ReactiveTaskSummaryRow.razor.rz.scp.css */
.reactive-summary-row[b-xbabs2dipz] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--mud-palette-divider);
    cursor: pointer;
}

.rsr-id[b-xbabs2dipz] {
    text-align: left;
}

.rsr-body[b-xbabs2dipz] {
    display: grid;
    grid-template-columns: 96px 140px 110px 120px 1fr;
    align-items: center;
    column-gap: 8px;
}

.rsr-time[b-xbabs2dipz] {
    white-space: nowrap;
}

.rsr-badges[b-xbabs2dipz] {
    display: contents;
}

.rsr-cell[b-xbabs2dipz] {
    min-width: 0;
    display: flex;
    align-items: center;
}

.rsr-cell[b-xbabs2dipz]  > div {
    width: 100%;
}

.rsr-cell[b-xbabs2dipz]  .mud-chip {
    width: 100%;
    justify-content: center;
}

.rsr-status[b-xbabs2dipz] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 16px;
}

.rsr-view[b-xbabs2dipz] {
    justify-self: end;
}

@media (max-width: 960px) {
    .rsr-body[b-xbabs2dipz] {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "time status"
            "badges badges"
            "view view";
        column-gap: 8px;
        row-gap: 8px;
    }

    .rsr-time[b-xbabs2dipz] {
        grid-area: time;
        font-weight: 600;
    }

    .rsr-status[b-xbabs2dipz] {
        grid-area: status;
        justify-self: end;
        margin-left: 0;
    }

    .rsr-badges[b-xbabs2dipz] {
        grid-area: badges;
        display: flex;
        gap: 8px;
    }

    .rsr-badges .rsr-cell[b-xbabs2dipz] {
        flex: 1;
    }

    .rsr-view[b-xbabs2dipz] {
        grid-area: view;
        justify-self: stretch;
    }

    .rsr-view[b-xbabs2dipz]  .mud-button-root {
        width: 100%;
    }
}
/* /Components/Tasks/Scheduled/ScheduledDayBand.razor.rz.scp.css */
/* One definition of what a day band looks like, for both the mobile list and the table. The
   element carries the band's own borders and fill rather than the cell around it, so the two
   surfaces cannot drift apart. */
.scheduled-day-band[b-f2r24h2zmf] {
    display: flex;
    align-items: center;

    /* Chromium centres a flex <button>'s content, which left the collapsed day's date sitting in
       the middle of the band while the expanded day's sat at the margin. */
    justify-content: flex-start;
    gap: 6px;
    width: 100%;

    /* Same box as the area heading below it, so the bands keep one rhythm down the list. */
    box-sizing: border-box;
    min-height: var(--mtl-area-h, 2.125rem);
    padding: 4px 12px;

    /* A brand tint rather than a dark band: two day bands can sit directly on top of one another
       when a carried day is collapsed, and two dark blocks read as one. The green separates the day
       level from the grey area band below it by hue instead of weight. Measured on white:
       text 17.25:1, borders and focus ring 3.50:1. */
    border-top: 1px solid var(--mud-palette-primary-darken);
    border-bottom: 1px solid var(--mud-palette-primary-darken);
    /* The tint is a 20%-alpha token, and a pinned band has to be opaque or the rows scroll through
       it. Painted over the surface colour rather than hardcoding the composite. */
    background: linear-gradient(var(--mud-palette-primary-hover), var(--mud-palette-primary-hover))
                var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    text-align: start;
}

/* The button's own chrome comes off; the band supplies the box. */
.scheduled-day-band-toggle[b-f2r24h2zmf] {
    border-inline: none;
    cursor: pointer;
    font-family: inherit;
}

.scheduled-day-band-toggle:focus-visible[b-f2r24h2zmf] {
    outline: 2px solid var(--mud-palette-primary-darken);
    outline-offset: -2px;
}

/* Pins above the area heading, which offsets below it by --mtl-day-h so the two cannot share a
   top and paint over each other. Each band travels inside its own day section, so one day's band
   is pushed out by the next rather than stacking on it. The offsets are declared on
   .mobile-scheduled and inherit down to here. Only the list pins the band itself; the table pins
   the cell it sits in -- see ScheduledTasksTable.razor.css. */
.scheduled-day-band-sticky[b-f2r24h2zmf] {
    position: sticky;
    top: var(--mday-top, 124px);
    z-index: 3;
}

/* The table's rows are taller than the list's, so its band keeps the roomier padding it had. */
.scheduled-day-band.sched-day-band[b-f2r24h2zmf] {
    padding: 8px 12px;
    gap: 8px;
}

/* A heading, not a control: it takes the toggle's chevron indent so it still lines up with the
   bands on a page that does span days. */
.scheduled-day-band.sched-day-band:not(.scheduled-day-band-toggle)[b-f2r24h2zmf] {
    padding-left: 32px;
}
/* /Components/Tasks/Scheduled/ScheduledTaskAssignPopoverList.razor.rz.scp.css */
/* Not a menu item — a caption above them, so it is exposed as presentation rather than as an
   option a keyboard user can land on. */
.sched-assign-heading[b-ha0a7i4vef] {
    padding: 8px 12px 4px;
    text-decoration: underline;
}

/* Only the waiting state lays out as a row: the loaded and empty captions stay as they were. */
.sched-assign-waiting[b-ha0a7i4vef] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sched-assign-failed[b-ha0a7i4vef] {
    padding: 8px 12px;
}
/* /Components/Tasks/Scheduled/ScheduledTaskDetails.razor.rz.scp.css */
.element-list[b-dmpzwm3q8t] {
    display: flex;
    flex-direction: column;
}

/* Spreads the panel title so the bulk tick control sits at the right edge of the header. */
.element-panel-title[b-dmpzwm3q8t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* The header carries the primary theme colour, so the checkbox must inherit the header's
   contrast text colour in every state; negative margins absorb the checkbox's own padding so
   it doesn't stretch the header. */
.element-select-all[b-dmpzwm3q8t] {
    margin: -10px 0;
}

.element-select-all[b-dmpzwm3q8t]  .mud-icon-root,
.element-select-all[b-dmpzwm3q8t]  .mud-checkbox .mud-button-root {
    color: var(--mud-palette-primary-text);
}

/* Small sub-header introducing a periodic (weekly / fortnightly) group */
.element-group-header[b-dmpzwm3q8t] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 2px 4px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Mobile (below md, where the sections stack): a standalone expansion panel otherwise
   shrinks to its content width, so short sections (Elements, History) get narrow headers while
   Details (full-width fields) looks wider. Force every section to the full dialog width, drop the
   grid gutters, and square off the card edges so each header spans edge to edge. */
@media (max-width: 959.98px) {
    .scheduled-details[b-dmpzwm3q8t]  .mud-grid {
        margin: 0;
        width: 100%;
    }

    .scheduled-details[b-dmpzwm3q8t]  .mud-grid > .mud-grid-item {
        padding-left: 0;
        padding-right: 0;
    }

    .scheduled-details[b-dmpzwm3q8t]  .mud-grid > .mud-grid-item > *,
    .scheduled-details[b-dmpzwm3q8t]  .mud-grid > .mud-grid-item .mud-expand-panel {
        width: 100%;
    }

    .scheduled-details[b-dmpzwm3q8t]  .mud-grid > .mud-grid-item .mud-expand-panel {
        border-radius: 0;
    }
}

/* MudBlazor paints a text-info alert's message at 3.46:1 on its own tint, under the 4.5:1 minimum.
   Material Blue 900 takes it to 7.35:1. Scoped here rather than in the shared palette, which leaves
   Info unset product-wide, matching the same fix in RoomReactiveTasksDialog.razor.css.
   Anchored on the region div, not on the alert's own class: GvsAlert renders its own root, which
   never receives this component's scope attribute, so a selector led by .element-tick-unavailable
   would compile to one that matches nothing. */
.element-tick-unavailable-region[b-dmpzwm3q8t]  .mud-alert-text-info .mud-alert-message {
    color: #0D47A1;
}

/* Same fault on the warning tint, where MudBlazor's orange message text is worse than the info
   blue. Deep Orange 900 clears 4.5:1 on it; Orange 900 does not, even on plain white. The notes
   region belongs to the shared notes panel, so it is reached through this component's root. */
.element-tick-unavailable-region[b-dmpzwm3q8t]  .mud-alert-text-warning .mud-alert-message,
.status-unavailable-region[b-dmpzwm3q8t]  .mud-alert-text-warning .mud-alert-message,
.scheduled-details[b-dmpzwm3q8t]  .notes-unavailable-alert .mud-alert-text-warning .mud-alert-message {
    color: #BF360C;
}
/* /Components/Tasks/Scheduled/ScheduledTaskElementRow.razor.rz.scp.css */
.element-row[b-7at16wfefy] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 1px 4px;
}

/* Ticking from a phone is the primary use case — give each row a full touch-sized hit area. */
@media (max-width: 959.98px) {
    .element-row[b-7at16wfefy] {
        min-height: 44px;
    }
}

/* /Components/Tasks/Scheduled/ScheduledTasksTable.razor.rz.scp.css */
/* Area header content */
.sched-area-cell[b-dr2w4l2ubq] {
    padding: 0 !important;
}

.sched-area-inner[b-dr2w4l2ubq] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    flex-wrap: wrap;
}

.sched-area-inner:hover[b-dr2w4l2ubq] {
    background: var(--mud-palette-background-gray);
}

.sched-area-info[b-dr2w4l2ubq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sched-group-toggle:focus-visible[b-dr2w4l2ubq] {
    outline: 2px solid var(--mud-palette-text-primary);
    outline-offset: -2px;
}

/* Room sub-header content, indented */
.sched-room-cell[b-dr2w4l2ubq] {
    padding: 0 !important;
}

.sched-room-inner[b-dr2w4l2ubq] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 40px;
}

.sched-room-inner:hover[b-dr2w4l2ubq] {
    background: var(--mud-palette-background-gray);
}

/* The collapse/expand control for an area or room. A button rather than a clickable cell so it can
   be reached and operated from the keyboard; the "Assign all" chip sits outside it, because a
   button may not contain another control. */
.sched-group-toggle[b-dr2w4l2ubq] {
    display: flex;
    align-items: center;
    gap: 10px;
    /* 2.5.8 asks for at least 24x24; the text alone leaves this row 22px tall. */
    min-height: 24px;
    flex-wrap: wrap;
    min-width: 0;
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.sched-visually-hidden[b-dr2w4l2ubq] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* The band itself draws the day's borders and fill -- see ScheduledDayBand.razor.css, which both
   this table and the mobile list render. The cell only clears the padding around it. */
.sched-day-cell[b-dr2w4l2ubq] {
    padding: 0;
}

/* The collapsed day's band sits above the header row rather than in the body, because its rows
   have left the query and a group header cannot render without them. */
.sched-day-collapsed[b-dr2w4l2ubq] {
    width: 100%;
    margin-bottom: 4px;
    border-radius: 4px;
}

/* The strip sits above the table rather than inside it, so a band keeps its place when the day it
   names is closed and its rows leave the query. */
.sched-day-strip[b-dr2w4l2ubq] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}

/* MudBlazor's orange warning text is under 4.5:1 on its own tint; Deep Orange 900 clears it, as on
   the task dialog's offline reasons. */
.sched-stale-region[b-dr2w4l2ubq]  .mud-alert-text-warning .mud-alert-message {
    color: #BF360C;
}

/* From md up the rows scroll inside a bounded box, so the column header (FixedHeader) and the day
   band beneath it stay on screen. The page's own scroll cannot pin them: the table's container is
   overflow auto, which makes it the sticky ancestor whether it scrolls or not. Below 961px
   Breakpoint.Sm hides the header row and stacks the rows as cards, so the list scrolls with the
   page as before rather than nesting a scroll box on a handset. */
@media (min-width: 961px) {
    .sched-table-scroll[b-dr2w4l2ubq] {
        --sched-head-h: 2.5rem;
    }

    /* The app bar, page heading, toolbar and pager take about 320px, as on the overview table. */
    .sched-table-scroll[b-dr2w4l2ubq]  .mud-table-container {
        max-height: max(320px, calc(100vh - 320px));

        /* A row reached by Tab is scrolled clear of the header and the band, not under them (2.4.11). */
        scroll-padding-top: calc(var(--sched-head-h) + 3rem);
    }

    /* A fixed height on one line, because the day band pins at this offset: a header that wrapped
       would grow over the band. */
    .sched-table-scroll[b-dr2w4l2ubq]  .mud-table-head .mud-table-cell {
        box-sizing: border-box;
        height: var(--sched-head-h);
        white-space: nowrap;
    }

    /* The cell rather than the band inside it, which could never leave its own cell. Below the
       header's z-index, so the header wins where the two meet. */
    .sched-day-cell[b-dr2w4l2ubq] {
        position: sticky;
        top: var(--sched-head-h);
        z-index: 1;
    }
}
/* /Components/Tasks/Scheduled/ScheduledTaskTableRow.razor.rz.scp.css */
/* The assignee cell. Clicking it opens the assign menu; .sched-assignee-action below is the same
   action for the keyboard. Sized to its content and centred in the cell, as it was inside the
   inline menu that used to wrap it. */
.sched-assignee-trigger[b-d8lb1ptavv] {
    position: relative;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    min-height: 24px;
    padding: 0 26px;
    box-sizing: border-box;
    cursor: pointer;
    background: none;
    border: 0;
    font: inherit;
    color: inherit;
    text-align: inherit;
}

.sched-assignee-action:focus-visible[b-d8lb1ptavv] {
    outline: 2px solid var(--mud-palette-text-primary);
    outline-offset: -2px;
}

.sched-assignee-trigger[b-d8lb1ptavv]  .mud-typography {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.sched-assignee-add[b-d8lb1ptavv] {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
}

/* The row itself is a bare <tr onclick> with no tab stop, so this is the keyboard path to a task's
   details. Styled to read as the plain ID text it replaces. */
.sched-open-task[b-d8lb1ptavv] {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.sched-open-task:focus-visible[b-d8lb1ptavv] {
    outline: 2px solid var(--mud-palette-text-primary);
    outline-offset: 2px;
}

/* The keyboard's way into the assign menu, laid over the cell so it needs no visual of its own.
   pointer-events: none keeps it clear of the hover tooltip that lists 2+ allocated domestics; the
   mouse is served by the cell's own click handler instead. */
.sched-assignee-action[b-d8lb1ptavv] {
    position: absolute;
    inset: 0;
    width: 100%;
    padding: 0;
    background: none;
    border: 0;
    pointer-events: none;
}

/* The row's assign menu is built only while open and has no activator of its own, so its root is
   laid over the trigger: the popover anchors to it, and drops from where it always did. Stretched,
   because MudMenu centres itself and a centred absolute box shrinks to nothing. */
.sched-assignee-trigger[b-d8lb1ptavv]  .sched-assignee-menu {
    inset: 0;
    align-self: stretch;
    pointer-events: none;
}
/* /Components/Tasks/TaskStatusTooltip.razor.rz.scp.css */
.task-status-tooltip-trigger[b-lnnr10q34j] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
/* /Components/Tasks/Viewing/Desktop/TaskAllocatedText.razor.rz.scp.css */
.allocated-count-trigger[b-8nzy402yp1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
}
/* /Components/Tasks/Viewing/Desktop/TaskUsersDetailsComponent.razor.rz.scp.css */
[b-p5ie2w2t48] .mud-input-control.mud-input-control-margin-dense .mud-input-text.mud-input-margin-dense {
    margin-top: 0px;
    margin-left: 8px;
    margin-right: 8px;
}
/* /Components/Tasks/Viewing/MinimalTaskHistoryComponent.razor.rz.scp.css */
[b-orciv3pubr] .mud-button-root:disabled {
    color: black !important;
}
/* /Components/Tasks/Viewing/Mobile/MobileTaskRow.razor.rz.scp.css */
[b-opewwivk9y] .swipe {
    transition: transform 0.4s;
}

[b-opewwivk9y] .task-item-container {
    position: relative;
}

[b-opewwivk9y] .task-actions-container {
    position: absolute;
    height: 100%;
    width: 100%;
}

[b-opewwivk9y] .task-details-container {
    position: relative;
}
/* /Components/Tasks/Viewing/Mobile/Offline/OfflineMobileTaskRow.razor.rz.scp.css */
[b-9elp0d4oc6] .swipe {
    transition: transform 0.4s;
}

[b-9elp0d4oc6] .task-item-container {
    position: relative;
}

[b-9elp0d4oc6] .task-actions-container {
    position: absolute;
    height: 100%;
    width: 100%;
}

[b-9elp0d4oc6] .task-details-container {
    position: relative;
}
/* /Components/Tasks/Viewing/Offline/OfflineTasksViewTable.razor.rz.scp.css */
[b-6stj6x4cpb] .mud-table-hover .mud-table-container .mud-table-root .mud-table-body .mud-table-row {
    cursor: pointer;
}
/* /Components/Tasks/Viewing/TaskHistoryComponent.razor.rz.scp.css */
[b-tsd8tnf8rh] .mud-button-root:disabled{
    color: black !important;
}

/* MudBlazor's default --mud-palette-error (#F44336) leaves white alert text at 3.68:1, below the
   4.5:1 AA minimum; Material Red 700 takes it to 4.98:1. Scoped to this alert rather than fixed
   in the theme, because changing the palette would restyle every error in the product. */
.history-unavailable-alert[b-tsd8tnf8rh]  .mud-alert-filled-error {
    background-color: #D32F2F;
}
/* /Components/Tasks/Viewing/TasksViewKanban.razor.rz.scp.css */
.circle-count[b-bci8jjufyh] {
    border-radius: 50%;
    border: 3px solid white;
    background-color: rgba(0, 0, 0, 0.15);
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    padding: 10px;
}

.site-header[b-bci8jjufyh] {
    border-top: solid 1px rgba(0, 0, 0, 0.15);
    border-bottom: solid 1px rgba(0, 0, 0, 0.15);
    border-right: solid 1px rgba(0, 0, 0, 0.15);
    border-left: solid 1px white;
    border-radius: 0 15px 15px 0;
    width: 100%;
    padding: 5px 10px;
}

.order-header[b-bci8jjufyh] {
    border-top: solid 1px rgba(0, 0, 0, 0.15);
    border-bottom: solid 1px rgba(0, 0, 0, 0.15);
    border-right: solid 1px rgba(0, 0, 0, 0.15);
    border-left: solid 1px rgba(0, 0, 0, 0.15);
    border-radius: 15px 15px 15px 15px;
    width: 30%;
    padding: 5px 15px;
    margin: 0px 10px;
}
/* /Components/Tasks/Viewing/TasksViewTable.razor.rz.scp.css */
[b-zc0c0gmxad] .mud-table-hover .mud-table-container .mud-table-root .mud-table-body .mud-table-row {
    cursor: pointer;
}
/* /Components/TrendManagement/TrendSettingComponent.razor.rz.scp.css */
[b-ywr9tsh3gz] .trend-setting-header {
    color: var(--mud-palette-white);
    background-color: var(--mud-palette-primary);
}

[b-ywr9tsh3gz] .trend-setting-save {
    width: fit-content;
}
/* /Dialogs/Locations/Rooms/RoomTransferList.razor.rz.scp.css */
.transfer-panel[b-bvbq7723yr] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.transfer-header[b-bvbq7723yr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* The title and the panel's action must be free to stack. Holding them on one line at xs
       pushed the action past the dialog edge and clipped its label, because the button is kept
       at its full width so the label never breaks mid-phrase. */
    flex-wrap: wrap;
    gap: 4px 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-background-grey);
}

.header-actions[b-bvbq7723yr] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.room-count[b-bvbq7723yr] {
    color: var(--mud-palette-text-secondary);
}

/* Keeps the header on one line beside the panel title rather than growing its height. */
[b-bvbq7723yr] .header-actions .mud-button {
    padding: 2px 8px;
    min-width: 0;
    white-space: nowrap;
    flex-shrink: 0;
}

.search-box[b-bvbq7723yr] {
    padding: 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.room-list[b-bvbq7723yr] {
    padding: 4px 8px;
    display: block;
    max-height: min(420px, 55vh);
    overflow-y: auto;
}

.selected-list[b-bvbq7723yr] {
    padding: 8px;
}

.area-header[b-bvbq7723yr] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 0 4px;
    /* The brand green measures 2.90:1 on white at this size, under the AA 4.5:1 minimum.
       #2e7d22 is 5.16:1 and is the shade MYC-1626 and MYC-1670 already settled on. */
    color: #2e7d22;
    display: flex;
    align-items: center;
    gap: 6px;
}

.area-count[b-bvbq7723yr] {
    font-size: 0.65rem;
    font-weight: 600;
    /* opacity composited this to 1.87:1 against white; the count is information, not decoration. */
    color: var(--mud-palette-text-primary);
}

[b-bvbq7723yr] .room-transfer-item {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
    width: 100%;
    cursor: pointer;
    transition: background-color 0.15s ease-out;
}

[b-bvbq7723yr] .room-transfer-item:hover {
    background-color: var(--mud-palette-action-default-hover);
}

[b-bvbq7723yr] .room-transfer-icon {
    margin-top: 2px;
    flex-shrink: 0;
}

[b-bvbq7723yr] .room-transfer-info {
    display: flex;
    flex-direction: column;
}

[b-bvbq7723yr] .room-transfer-name {
    line-height: 1.3;
}

[b-bvbq7723yr] .room-transfer-desc {
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.2;
}

.empty-state[b-bvbq7723yr] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 4px;
    margin-top: 8px;
    color: var(--mud-palette-text-secondary);
}

@media (max-width: 960px) {
    [b-bvbq7723yr] .room-transfer-desc {
        display: none;
    }

    .empty-state[b-bvbq7723yr] {
        min-height: 80px;
    }
}

.transfer-announcement[b-bvbq7723yr] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.room-list:focus-visible[b-bvbq7723yr] {
    outline: 2px solid var(--mud-palette-text-primary);
    outline-offset: -2px;
}

/* Focus stays on the list, so the active row is marked rather than focused. The outline matches
   the focus ring so the two read as one cursor, and the background carries it for anyone who
   cannot pick out a 2px line. */
[b-bvbq7723yr] .room-list:focus-visible .room-transfer-item[aria-selected="true"] {
    outline: 2px solid var(--mud-palette-text-primary);
    outline-offset: -2px;
    background-color: var(--mud-palette-action-default-hover);
}
/* /Dialogs/Roles/RoleGroupDialog.razor.rz.scp.css */
[b-ul2zk6ynow] .mud-dialog-content {
    overflow-y: hidden;
}

@media (max-width: 960px) {
    [b-ul2zk6ynow] .mud-dialog-content {
        overflow-y: auto;
    }

    [b-ul2zk6ynow] .mud-dialog-actions {
        margin-top: auto;
    }
}
/* /Dialogs/Tasks/Details/RoomReactiveTasksDialog.razor.rz.scp.css */
/* MudBlazor's default --mud-palette-error (#F44336) leaves white alert text at 3.68:1, below the
   4.5:1 AA minimum; Material Red 700 takes it to 4.98:1. Scoped to this alert rather than fixed
   in the theme, because changing the palette would restyle every error in the product. */
.reactive-load-alert[b-3lon3wbmfp]  .mud-alert-filled-error {
    background-color: #D32F2F;
}
/* /Dialogs/Tasks/Details/ScheduledTaskDetailsDialog.razor.rz.scp.css */
/* The actions sit inside the Escape handler's div, so the flex and gap MudBlazor puts on
   .mud-dialog-actions never reach them. Three extended FABs can outgrow a 320px handset, and the
   dialog hides horizontal overflow, so they wrap rather than being cut off. */
.scheduled-task-actions[b-szsltge97n] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}
/* /Dialogs/Tasks/Scheduled/EditScheduledTaskRoomBlock.razor.rz.scp.css */
/* A fieldset for grouping semantics, styled back to the flat look of the rest of the form. */
.edit-scheduled-task-room[b-hoy1j8qczl] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 8px 12px 12px;
    margin: 0;
    min-width: 0;
}

.edit-scheduled-task-room-legend[b-hoy1j8qczl] {
    padding: 0 4px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}
/* /Dialogs/Tasks/Scheduled/PendingCleansDialog.razor.rz.scp.css */
/* Takes over the cap and the scrolling from GvsDialogContentContainer so there is one scroll
   region, and it is the focusable one. The cap is load-bearing: Virtualize mounts every row when
   its scroll parent can grow without limit. MYC-1706. */
.pending-cleans-dialog-body[b-ixsoqbaqom] {
    max-height: 70vh;
    overflow-y: auto;
}

/* The body is focusable so it can be scrolled by keyboard, so it needs a focus indicator. */
.pending-cleans-dialog-body:focus-visible[b-ixsoqbaqom] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}
/* /PageLayouts/LocationsPageLayout.razor.rz.scp.css */
/* Below the sm breakpoint the header actions stack vertically (flex-column via
   utility classes); make each action fill the width so they read as a stacked list
   rather than left-aligned pills. The buttons/menu are rendered by child components,
   so ::deep is required to reach them. */
@media (max-width: 599.98px) {
    .location-header-actions[b-y0yvcxomva]  .mud-menu {
        display: block;
        width: 100%;
    }

    .location-header-actions[b-y0yvcxomva]  .mud-button-root {
        width: 100%;
    }
}
/* /Pages/Login/LoginPage.razor.rz.scp.css */
@font-face {
    font-family: 'Montserrat';
    font-weight: 400;
    font-style: normal;
    font-display: swap; /* Read next point */
    src: local('Montserrat-Regular'), url('../lib/fonts/Montserrat-Regular.woff') format('woff');
}

*[b-3tzrb7yclu] {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
}

[b-3tzrb7yclu] .mycleaning-logo {
    height: 85%;
}

[b-3tzrb7yclu] .login-container {
    background-color: white;
    width: 500px;
    border-radius: 10px;
    margin: 10% auto 0px auto;
    box-shadow: 8px 8px 65px black;
    overflow: hidden;
    animation-name: showLoginForm;
    animation-duration: 1.5s;
}

[b-3tzrb7yclu] .heading-container {
    width: 100%;
    height: 71px;
    background-color: var(--mud-palette-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

[b-3tzrb7yclu] .user-details {
    display: flex;
    align-items: center;
    background-color: lightgrey;
    position: relative;
    margin-bottom: 10px;
    padding-right: 10px;
}

[b-3tzrb7yclu] .user-details .mud-input-control {
    flex: 1;
}

[b-3tzrb7yclu] .icon {
    background-color: var(--mud-palette-primary);
    padding: 15px;
    font-size: 25px;
    color: white !important;
}

[b-3tzrb7yclu] .offline-bar {
    top: 0 !important;
}

@media only screen and (max-width: 545px) {
    [b-3tzrb7yclu] .login-container {
        width: 90%;
    }
}
/* /Pages/Reports/MatrixReport/MatrixReportPage.razor.rz.scp.css */
@media (max-width: 599.95px) {
    [b-zvcg1iqouk] .responsive-align {
        display: flex;
        align-items: flex-start;
    }
}

@media (min-width: 600px) {
    [b-zvcg1iqouk] .responsive-align {
        display: flex;
        align-items: flex-end;
    }
}
/* /Pages/Reports/TimeReports/TasksPerHourPerDayReport/TasksPerHourPerDayPage.razor.rz.scp.css */
@media (max-width: 599.95px) {
    [b-1ms9p8ucmp] .responsive-align {
        display: flex;
        align-items: flex-start;
    }
}

@media (min-width: 600px) {
    [b-1ms9p8ucmp] .responsive-align {
        display: flex;
        align-items: flex-end;
    }
}
/* /Pages/Reports/TrendReports/Custom/BusinessGroupTrendReport/BusinessGroupTrendReportPage.razor.rz.scp.css */
@media (max-width: 599.95px) {
    [b-7wg7y1emdd] .responsive-align {
        display: flex;
        align-items: flex-start;
    }
}

@media (min-width: 600px) {
    [b-7wg7y1emdd] .responsive-align {
        display: flex;
        align-items: flex-end;
    }
}
/* /Pages/Reports/TrendReports/Generic/TrendReportPage.razor.rz.scp.css */
@media (max-width: 599.95px) {
    [b-xh7wo5cnjz] .responsive-align {
        display: flex;
        align-items: flex-start;
    }
}

@media (min-width: 600px) {
    [b-xh7wo5cnjz] .responsive-align {
        display: flex;
        align-items: flex-end;
    }
}
/* /Pages/Settings/Licencing/LicencePage.razor.rz.scp.css */
[b-bz9o4n2td0] .mud-tab.mud-ripple {
    border-radius: var(--mud-default-borderradius);
}

[b-bz9o4n2td0] .mud-tab.mud-tab-active {
    color: var(--mud-palette-primary-text);
    background-color: var(--mud-palette-primary);
}

[b-bz9o4n2td0] .mud-tabs-toolbar {
    padding-bottom: 4px;
}

[b-bz9o4n2td0] .mud-tabs-toolbar-wrapper > .mud-tooltip-root {
    padding-right: 4px;
}

/* GvsLicenceCard paints its header with var(--mud-palette-primary) and ignores
   HeadingColour, so remap the palette variable per licence type: the Scheduled
   card uses the success colour while the Reactive card keeps the primary colour.
   The custom property cascades into the card component via normal inheritance. */
.licence-card-scheduled[b-bz9o4n2td0] {
    --mud-palette-primary: var(--mud-palette-success);
}

.licence-input[b-bz9o4n2td0] {
    width: 100%;
    max-width: 550px;
    margin-left: auto;
}

@media (max-width: 599px) {
    .licence-input[b-bz9o4n2td0] {
        margin-left: 0;
        max-width: 100%;
    }
}
/* /Pages/Settings/SiteSettings/SiteSettingsPage.razor.rz.scp.css */
[b-btrtxohi0c] .create-site-link {
    background-color: var(--mud-palette-secondary) !important;
    color: var(--mud-palette-white) !important;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px;
    border-radius: 8px;
}

    [b-btrtxohi0c] .create-site-link:hover {
        background-color: var(--mud-palette-dark) !important;
    }
/* /Pages/Settings/TaskOptions/TaskOptionsPage.razor.rz.scp.css */
[b-wyebet0c1o] .mud-tab.mud-ripple {
    border-radius: var(--mud-default-borderradius);
}

[b-wyebet0c1o] .mud-tab.mud-tab-active {
    color: var(--mud-palette-primary-text);
    background-color: var(--mud-palette-primary);
}

[b-wyebet0c1o] .mud-tabs-toolbar {
    padding-bottom: 4px;
}

[b-wyebet0c1o] .mud-tabs-tabbar-wrapper {
    gap: 8px;
}
/* /Pages/Settings/TrendManagement/TrendManagementPage.razor.rz.scp.css */
[b-4lufl269tw] .mud-tab.mud-ripple {
    border-radius: var(--mud-default-borderradius);
}

[b-4lufl269tw] .mud-tab.mud-tab-active {
    color: var(--mud-palette-primary-text);
    background-color: var(--mud-palette-primary);
}

[b-4lufl269tw] .mud-tabs-toolbar {
    padding-bottom: 4px;
}

[b-4lufl269tw] .mud-tabs-tabbar-wrapper {
    gap: 8px;
}
/* /Pages/Tasks/ScheduledOverviewPage.razor.rz.scp.css */
.live-progress-ring[b-zlnseur6g7] {
    position: relative;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
}

.live-progress-num[b-zlnseur6g7] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: var(--mud-palette-text-primary);
}

.live-progress-text[b-zlnseur6g7] {
    line-height: 1;
}

/* The three lines take their size and weight from the typography tokens, which carry line-heights
   of their own — 1.75 to 2.66 — that would treble the height of a block sized to sit beside a
   64px ring. Only the rhythm is overridden here. */
.live-progress-text[b-zlnseur6g7]  .mud-typography {
    line-height: 1;
}

.live-progress-text[b-zlnseur6g7]  .live-progress-count {
    font-weight: 700;
}

.live-progress-of[b-zlnseur6g7] {
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
}

/* Both tokens render a span, so the block display is what keeps these three on three lines and
   the margins from being inert. The overline token does not uppercase in this theme. */
.live-progress-text[b-zlnseur6g7]  .live-progress-label {
    display: block;
    margin-top: 4px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.live-progress-text[b-zlnseur6g7]  .live-progress-split {
    display: block;
    margin-top: 3px;
}
/* /Pages/Tasks/ScheduledTasksCalendarPage.razor.rz.scp.css */
[b-i1isof0epk] .schedule-calendar-card {
    overflow: hidden;
}

/* Desktop layout: calendar + right-docked "To Schedule" panel.
   The panel is fixed to the viewport edge (full height, flush right); the main
   area reserves space when it's open so the panel pushes rather than overlays. */
.schedule-calendar-main[b-i1isof0epk] {
    min-width: 0;
    transition: padding-right 0.2s ease;
}

.schedule-calendar-main-pushed[b-i1isof0epk] {
    padding-right: 356px;
}

.schedule-calendar-panel[b-i1isof0epk] {
    position: fixed;
    top: var(--mud-appbar-height, 64px);
    right: 0;
    bottom: 0;
    width: 340px;
    z-index: 1200;
}

/* Docked open/close handle, pinned to the panel edge */
.schedule-calendar-panel-toggle[b-i1isof0epk] {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 1201;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 26px;
    height: 72px;
    padding: 0;
    border: none;
    color: white;
    /* White on the brand primary is 2.90:1, under the 4.5:1 the pending count needs. The darker
       shade of the same green reaches 5.16:1. See MYC-1626, MYC-1670. */
    background-color: #2e7d22;
    border-radius: 8px 0 0 8px;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    transition: right 0.2s ease, background-color 0.15s ease;
}

.schedule-calendar-panel-toggle:hover[b-i1isof0epk] {
    background-color: #256119;
}

/* Brand-green text on white again — the phone's entry point into the same list.
   !important because MudBlazor's own button colour rules match at equal specificity and load
   after the scoped bundle. */
[b-i1isof0epk] .schedule-calendar-pending-button {
    color: #2e7d22 !important;
    border-color: #2e7d22 !important;
}

.schedule-calendar-panel-toggle-count[b-i1isof0epk] {
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

/* Tablets and phones have no room for a docked panel, so it stacks
   under the calendar at full width instead of overlaying it. */
@media (max-width: 960px) {
    .schedule-calendar-main-pushed[b-i1isof0epk] {
        padding-right: 0;
    }

    .schedule-calendar-panel[b-i1isof0epk] {
        position: static;
        width: 100%;
        margin-top: 16px;
    }
}

.schedule-calendar-legend[b-i1isof0epk] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 4px 12px 8px;
}

.schedule-calendar-legend-item[b-i1isof0epk] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.schedule-calendar-legend-swatch[b-i1isof0epk] {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
}

/* The view region only takes focus programmatically after a view switch, so it must not draw a
   ring as though the user had tabbed to it. */
.schedule-calendar-view:focus[b-i1isof0epk] {
    outline: none;
}
/* /Shared/MainLayout.razor.rz.scp.css */
[b-eezjzoollx] .nav-bar {
    height: 40px;
    bottom: 0;
    top: unset !important;
    background-color: var(--mud-palette-white) !important;
}
/* /Shared/NoPermissionsView.razor.rz.scp.css */
/* Matches LicenceMissingView: the same full-viewport message under the same two app bars, so the
   same landscape-phone problem applies - a fixed 4rem there pushes the closing instruction off
   the screen. */
.no-permissions[b-eiwvyl0r4n] {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

/* The icon is a child component, so its root svg never picks up this component's scope
   attribute - ::deep is required to reach it. */
.no-permissions-icon[b-eiwvyl0r4n]  svg {
    width: min(200px, 60vw, 25vh);
    height: min(200px, 60vw, 25vh);
}

@media (max-height: 500px) {
    .no-permissions[b-eiwvyl0r4n] {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

/* Below this there is no height left for both the icon and the message. The icon is decorative
   and aria-hidden, so it is the part to drop. */
@media (max-height: 420px) {
    .no-permissions-icon[b-eiwvyl0r4n] {
        display: none;
    }
}