/* Roster day alternation, conflict, palette, required, empty, and closed states. */

.roster-grid .day-row.day-alt-dark {
    background-color: var(--roster-day-a);
}

.roster-grid .day-row.day-alt-light {
    background-color: var(--roster-day-b);
}

.roster-day-rail-section.day-alt-dark,
.roster-grid .day-row.day-alt-dark {
    background-color: var(--roster-day-a);
}

.roster-day-rail-section.day-alt-light,
.roster-grid .day-row.day-alt-light {
    background-color: var(--roster-day-b);
}

.roster-grid .day-row.day-alt-dark .slot-closed-cell {
    background-color: color-mix(in srgb, var(--roster-empty) 58%, var(--roster-day-a));
}

.roster-grid .day-row.day-alt-light .slot-closed-cell {
    background-color: color-mix(in srgb, var(--roster-empty) 68%, var(--roster-day-b));
}

.roster-grid .day-row + .day-row > [role="gridcell"],
.roster-grid .roster-grid-day-section + .roster-grid-day-section .day-row:first-child > [role="gridcell"] {
    border-top-color: var(--app-border-strong);
}

.conflict-critical {
    --roster-conflict-bg: var(--roster-danger);
    --roster-conflict-bg-start: color-mix(in srgb, var(--roster-danger) 76%, var(--app-white-alpha-08));
    --roster-conflict-bg-hover: color-mix(in srgb, var(--roster-danger) 86%, var(--app-white-alpha-08));
    --roster-conflict-bg-hover-end: color-mix(in srgb, var(--roster-danger) 92%, var(--app-surface));
    --roster-conflict-text: var(--app-text);
    background-color: var(--roster-conflict-bg) !important;
    color: var(--roster-conflict-text) !important;
}

.conflict-preference {
    --roster-conflict-bg: var(--app-warning-conflict-bg);
    --roster-conflict-bg-start: color-mix(in srgb, var(--app-warning-conflict-bg) 78%, var(--app-warning));
    --roster-conflict-bg-hover: color-mix(in srgb, var(--app-warning-conflict-bg) 68%, var(--app-warning));
    --roster-conflict-bg-hover-end: color-mix(in srgb, var(--app-warning-conflict-bg) 90%, var(--app-surface));
    --roster-conflict-text: var(--app-warning-conflict-text);
    background-color: var(--roster-conflict-bg) !important;
    color: var(--roster-conflict-text) !important;
}

.conflict-ideal {
    --roster-conflict-bg: var(--app-info-conflict-bg);
    --roster-conflict-bg-start: color-mix(in srgb, var(--app-info-conflict-bg) 78%, var(--app-info));
    --roster-conflict-bg-hover: color-mix(in srgb, var(--app-info-conflict-bg) 68%, var(--app-info));
    --roster-conflict-bg-hover-end: color-mix(in srgb, var(--app-info-conflict-bg) 90%, var(--app-surface));
    --roster-conflict-text: var(--app-info-conflict-text);
    background-color: var(--roster-conflict-bg) !important;
    color: var(--roster-conflict-text) !important;
}

.roster-grid .slot-staff-cell.conflict-critical,
.roster-grid .slot-staff-cell.conflict-preference,
.roster-grid .slot-staff-cell.conflict-ideal {
    background-image: linear-gradient(180deg, var(--roster-conflict-bg-start), var(--roster-conflict-bg)) !important;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--app-white) 12%, transparent),
        inset 0 -1px 0 color-mix(in srgb, var(--app-bg) 22%, transparent);
    text-shadow: 0 1px 0 color-mix(in srgb, var(--app-bg) 38%, transparent);
}

@media (hover: hover) {
    .roster-grid .slot-staff-cell.conflict-critical:hover,
    .roster-grid .slot-staff-cell.conflict-preference:hover,
    .roster-grid .slot-staff-cell.conflict-ideal:hover,
    .roster-grid .slot-staff-cell.conflict-critical.is-roster-shift-group-highlighted,
    .roster-grid .slot-staff-cell.conflict-preference.is-roster-shift-group-highlighted,
    .roster-grid .slot-staff-cell.conflict-ideal.is-roster-shift-group-highlighted {
        background-image: linear-gradient(180deg, var(--roster-conflict-bg-hover), var(--roster-conflict-bg-hover-end)) !important;
    }
}

.roster-shift-card-field.conflict-critical {
    --roster-conflict-bg: var(--roster-danger);
    --roster-conflict-bg-start: color-mix(in srgb, var(--roster-danger) 76%, var(--app-white-alpha-08));
    --roster-conflict-bg-hover: color-mix(in srgb, var(--roster-danger) 86%, var(--app-white-alpha-08));
    --roster-conflict-bg-hover-end: color-mix(in srgb, var(--roster-danger) 92%, var(--app-surface));
    --roster-conflict-text: var(--app-text);
}

.roster-shift-card-field.conflict-preference {
    --roster-conflict-bg: var(--app-warning-conflict-bg);
    --roster-conflict-bg-start: color-mix(in srgb, var(--app-warning-conflict-bg) 78%, var(--app-warning));
    --roster-conflict-bg-hover: color-mix(in srgb, var(--app-warning-conflict-bg) 68%, var(--app-warning));
    --roster-conflict-bg-hover-end: color-mix(in srgb, var(--app-warning-conflict-bg) 90%, var(--app-surface));
    --roster-conflict-text: var(--app-warning-conflict-text);
}

.roster-shift-card-field.conflict-ideal {
    --roster-conflict-bg: var(--app-info-conflict-bg);
    --roster-conflict-bg-start: color-mix(in srgb, var(--app-info-conflict-bg) 78%, var(--app-info));
    --roster-conflict-bg-hover: color-mix(in srgb, var(--app-info-conflict-bg) 68%, var(--app-info));
    --roster-conflict-bg-hover-end: color-mix(in srgb, var(--app-info-conflict-bg) 90%, var(--app-surface));
    --roster-conflict-text: var(--app-info-conflict-text);
}

.roster-shift-card-field.conflict-critical,
.roster-shift-card-field.conflict-preference,
.roster-shift-card-field.conflict-ideal {
    background-color: var(--roster-conflict-bg) !important;
    background-image: linear-gradient(180deg, var(--roster-conflict-bg-start), var(--roster-conflict-bg)) !important;
    color: var(--roster-conflict-text) !important;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--app-white) 12%, transparent),
        inset 0 -1px 0 color-mix(in srgb, var(--app-bg) 22%, transparent);
    text-shadow: 0 1px 0 color-mix(in srgb, var(--app-bg) 38%, transparent);
    transition: box-shadow 140ms ease;
}

@media (hover: hover) {
    .roster-shift-card-field.conflict-critical:hover,
    .roster-shift-card-field.conflict-preference:hover,
    .roster-shift-card-field.conflict-ideal:hover {
        background-color: var(--roster-conflict-bg) !important;
        background-image: linear-gradient(180deg, var(--roster-conflict-bg-hover), var(--roster-conflict-bg-hover-end)) !important;
        box-shadow:
            inset 0 1px 0 color-mix(in srgb, var(--app-white) 16%, transparent),
            inset 0 -1px 0 color-mix(in srgb, var(--app-bg) 18%, transparent);
    }
}

.roster-grid-frame[data-roster-warnings="hidden"] .slot-staff-cell.conflict-critical,
.roster-grid-frame[data-roster-warnings="hidden"] .slot-staff-cell.conflict-preference,
.roster-grid-frame[data-roster-warnings="hidden"] .slot-staff-cell.conflict-ideal,
.roster-grid-frame[data-roster-warnings="hidden"] .roster-shift-card-field.conflict-critical,
.roster-grid-frame[data-roster-warnings="hidden"] .roster-shift-card-field.conflict-preference,
.roster-grid-frame[data-roster-warnings="hidden"] .roster-shift-card-field.conflict-ideal,
.roster-grid-frame[data-roster-warnings="hidden"] .roster-shift-card-field.conflict-critical:hover,
.roster-grid-frame[data-roster-warnings="hidden"] .roster-shift-card-field.conflict-preference:hover,
.roster-grid-frame[data-roster-warnings="hidden"] .roster-shift-card-field.conflict-ideal:hover {
    background-color: transparent !important;
    background-image: none !important;
    color: inherit !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.roster-shift-card-field.conflict-critical .slot-cell-static,
.roster-shift-card-field.conflict-preference .slot-cell-static,
.roster-shift-card-field.conflict-ideal .slot-cell-static {
    background-color: inherit !important;
    color: inherit !important;
}

.roster-shift-card.is-roster-staff-slot-highlighted .roster-shift-card-field,
.roster-shift-card.is-roster-staff-slot-highlighted-start .roster-shift-card-field,
.roster-shift-card.is-roster-staff-slot-highlighted-end .roster-shift-card-field {
    background-color: transparent !important;
    color: var(--app-text) !important;
}

.roster-grid .slot-time-cell[data-roster-shift-colour^="palette-"],
.roster-grid .slot-staff-cell[data-roster-shift-colour^="palette-"],
.roster-grid .slot-shift-type-cell[data-roster-shift-colour^="palette-"]:not(.is-shift-type-empty) {
    position: relative;
}

.roster-grid .slot-time-cell[data-roster-shift-colour^="palette-"]::before,
.roster-grid .slot-staff-cell[data-roster-shift-colour^="palette-"]::before,
.roster-grid .slot-shift-type-cell[data-roster-shift-colour^="palette-"]:not(.is-shift-type-empty)::before {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 3;
    top: 0;
    right: -1px;
    bottom: 0;
    left: -1px;
    border-top: var(--roster-shift-border-width) solid var(--roster-shift-type-colour);
    border-bottom: var(--roster-shift-border-width) solid var(--roster-shift-type-colour);
}

.roster-grid .slot-time-cell[data-roster-shift-colour^="palette-"]:not(.slot-end-time-cell)::before {
    left: 0;
    border-left: var(--roster-shift-border-width) solid var(--roster-shift-type-colour);
}

.roster-grid .roster-block-end[data-roster-shift-colour^="palette-"]:not(.is-shift-type-empty)::before {
    right: 0;
    border-right: var(--roster-shift-border-width) solid var(--roster-shift-type-colour);
}

.roster-grid .roster-grid-day-section:last-child .day-row:last-child .slot-time-cell[data-roster-shift-colour^="palette-"]::before,
.roster-grid .roster-grid-day-section:last-child .day-row:last-child .slot-staff-cell[data-roster-shift-colour^="palette-"]::before,
.roster-grid .roster-grid-day-section:last-child .day-row:last-child .slot-shift-type-cell[data-roster-shift-colour^="palette-"]:not(.is-shift-type-empty)::before {
    bottom: 1px;
}

.roster-grid .roster-grid-day-section:last-child .day-row:last-child > .roster-block-end:last-child[data-roster-shift-colour^="palette-"]:not(.is-shift-type-empty)::before {
    right: 0;
    border-bottom-right-radius: var(--roster-shift-edge-corner-radius);
}

.roster-grid .slot-shift-type-cell.is-shift-type-required {
    position: relative;
}

.roster-grid .slot-shift-type-cell.is-shift-type-required::after {
    content: "!";
    position: absolute;
    top: 0.16rem;
    right: 0.2rem;
    z-index: 3;
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--app-warning) 78%, var(--app-surface));
    color: var(--app-panel-bg);
    font-size: 0.54rem;
    font-weight: 900;
    line-height: 0.72rem;
    text-align: center;
}

.roster-grid .slot-empty-cell {
    height: var(--roster-grid-row-height);
    min-height: var(--roster-grid-row-height);
}

.roster-grid .slot-closed-cell {
    height: var(--roster-grid-row-height);
    min-height: var(--roster-grid-row-height);
}