/* Planning calendar and reusable task dialogs */

.scheduler_app {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    color: #00293a;
}

.scheduler_header_actions,
.scheduler_toolbar,
.scheduler_toolbar_buttons,
.scheduler_month_controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.scheduler_header {
    display: block;
    width: 100%;
}

.scheduler_header h1 {
    margin-top: 0;
}

.scheduler_header p {
    margin-bottom: 18px;
}

.scheduler_header_actions {
    flex-wrap: wrap;
    justify-content: flex-start;
}

.scheduler_header_actions .button {
    width: auto;
    min-width: 128px;
    min-height: 30px;
    height: 30px;
    padding-right: 10px;
    padding-left: 10px;
    color: #fff !important;
}

.scheduler_toolbar {
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 5px auto 10px;
    padding: 8px;
}

.scheduler_toolbar_buttons {
    flex-wrap: wrap;
}

.scheduler_toolbar h2 {
    margin: 0;
    color: #003f5b;
    font-size: 22px;
}

.scheduler_month_controls .button {
    width: auto;
    min-width: 38px;
    height: 30px;
    padding-right: 10px;
    padding-left: 10px;
    color: #fff !important;
}

.scheduler_calendar {
    overflow: hidden;
    border: 1px solid #01637b;
    border-bottom-width: 3px;
    background: #eefaff;
    box-shadow: 0 8px 22px rgba(0, 41, 58, 0.12);
}

.scheduler_weekdays,
.scheduler_days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.scheduler_weekdays {
    background: #01637b;
    color: #fff;
    font-weight: 800;
    text-align: center;
}

.scheduler_weekdays span {
    padding: 8px 4px;
}

.scheduler_day {
    position: relative;
    min-height: 118px;
    padding: 7px;
    border: 0;
    border-right: 1px solid #b6dce7;
    border-bottom: 1px solid #b6dce7;
    background: #f7fcff;
    color: #00293a;
    font: inherit;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
}

.scheduler_day:nth-child(7n) {
    border-right: 0;
}

.scheduler_day.outside {
    background: #dcebf0;
    color: #6f858d;
}

.scheduler_day.today {
    box-shadow: inset 0 0 0 3px #ff9800;
}

.scheduler_day:hover,
.scheduler_day:focus-visible {
    z-index: 1;
    outline: 2px solid #0181bb;
    outline-offset: -2px;
    background: #e5f8ff;
}

.scheduler_day_number {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: 800;
}

.scheduler_day_tasks {
    display: grid;
    gap: 3px;
}

.scheduler_task_chip {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 4px 6px;
    border: 0;
    border-left: 4px solid #0181bb;
    border-radius: 2px;
    background: #c8eefb;
    color: #00364b;
    font: inherit;
    font-size: 11px;
    line-height: 1.25;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: pointer;
}

.scheduler_task_chip.planned_recommendation {
    border-left-color: #ff9800;
    background: #ffe0b2;
    color: #512e00;
}

.scheduler_task_chip:hover,
.scheduler_task_chip:focus-visible {
    outline: 1px solid #016d96;
    outline-offset: -1px;
    background: #9fdef3;
    box-shadow: 0 2px 6px rgba(0, 41, 58, 0.26);
    transform: translateY(-1px);
}

.scheduler_task_chip.planned_recommendation:hover,
.scheduler_task_chip.planned_recommendation:focus-visible {
    outline-color: #b76500;
    background: #ffc978;
}

.scheduler_task_chip.failed {
    border-left-color: #b3261e;
    background: #ffd9d6;
    color: #67120c;
}

.scheduler_more {
    color: #005f7d;
    font-size: 11px;
    font-weight: 700;
}

.scheduler_status {
    margin-top: 10px;
    padding: 8px 10px;
    background: #c8eefb;
    border-left: 4px solid #0181bb;
}

.scheduler_status.error {
    border-left-color: #b3261e;
    background: #ffd9d6;
    color: #67120c;
}

.scheduler_no_item {
    margin: 0;
    padding: 8px;
    border: 1px dashed #9fc9d6;
    color: #496b76;
}

.scheduler_modal {
    position: fixed;
    inset: 0;
    z-index: 7000;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(0, 41, 58, 0.74);
}

.scheduler_task_panel {
    position: relative;
    box-sizing: border-box;
    width: min(680px, 100%);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    margin: 0;
    padding: 18px;
    border: 1px solid #a1d2e1;
    background: #eefaff;
    color: #00293a;
    box-shadow: 0 16px 38px rgba(0, 18, 26, 0.48);
}

.scheduler_task_panel h2 {
    margin: 0 42px 16px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #6ba8ba;
    color: #003f5b;
    text-align: left !important;
}

.scheduler_close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-bottom: 3px solid #006c9c;
    background: #0181bb;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
}

.scheduler_form_grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    box-sizing: border-box;
    width: 100%;
}

.scheduler_field {
    display: grid;
    align-content: start;
    gap: 6px;
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0;
    color: #00293a;
    font-size: 14px;
    font-weight: 700;
    text-align: left !important;
}

.scheduler_field.full {
    grid-column: 1 / -1;
}

.scheduler_field input:not([type="checkbox"]),
.scheduler_field textarea {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0;
    min-height: 34px;
    margin: 0;
    padding: 6px 9px;
    border: 1px solid #93b8c4;
    border-bottom-width: 2px;
    border-radius: 2px;
    background: #fff;
    color: #00293a;
    font: inherit;
    font-weight: 400;
}

.scheduler_field textarea {
    min-height: 108px;
    resize: vertical;
}

.scheduler_notify_row {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    box-sizing: border-box;
    width: 100% !important;
    padding: 8px;
    border: 1px solid #b4d6df;
    background: #dff5fc;
    color: #00293a !important;
    font-weight: 700;
    text-align: left !important;
}

.scheduler_notify_hint {
    grid-column: 1 / -1;
    margin-top: -6px;
    color: #496b76;
}

.scheduler_notify_row input[type="checkbox"] {
    flex: 0 0 16px;
    width: 16px !important;
    height: 16px;
    margin: 0;
    padding: 0;
}

.scheduler_notify_row input[type="number"] {
    flex: 0 0 78px;
    width: 78px !important;
    min-height: 30px;
    margin: 0;
}

.scheduler_item_link {
    grid-column: 1 / -1;
    display: grid;
    gap: 8px;
}

.scheduler_link_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.scheduler_link_header .button {
    width: auto;
    min-width: 118px;
}

.scheduler_item_preview,
.scheduler_picker_item {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 8px;
    border: 1px solid #9fc9d6;
    background: #dff5fc;
}

.scheduler_item_preview_icon,
.scheduler_picker_icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    overflow: hidden;
    background: #afddea;
    color: #005f7d;
    font-size: 18px;
}

.scheduler_preview_media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 160ms ease;
}

.scheduler_preview_media.loaded img {
    opacity: 1;
}

.scheduler_preview_media.loaded .scheduler_preview_fallback {
    visibility: hidden;
}

.scheduler_preview_media.failed img {
    display: none;
}

.scheduler_item_preview strong,
.scheduler_item_preview small,
.scheduler_picker_item strong,
.scheduler_picker_item small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scheduler_item_preview small,
.scheduler_picker_item small {
    color: #496b76;
    font-weight: 400;
}

.scheduler_remove_link {
    width: 30px;
    height: 30px;
    padding: 0;
}

.scheduler_form_actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin: 16px -18px -18px;
    padding: 10px 18px;
    position: sticky;
    bottom: -18px;
    background: #eefaff;
    border-top: 1px solid #a1d2e1;
}

.scheduler_form_actions .button {
    width: auto;
    min-width: 94px;
    color: #fff !important;
}

.scheduler_form_actions .scheduler_cancel {
    background: #d97816;
    border-bottom-color: #9b4c05;
}

.scheduler_form_actions .scheduler_save {
    background: #168f45;
    border-bottom-color: #0b5f2b;
}

.scheduler_form_actions .scheduler_cancel:hover,
.scheduler_form_actions .scheduler_cancel:focus-visible {
    background: #b85f09;
    border-bottom-color: #713500;
}

.scheduler_form_actions .scheduler_save:hover,
.scheduler_form_actions .scheduler_save:focus-visible {
    background: #0f7336;
    border-bottom-color: #07441f;
}

.scheduler_delete {
    margin-right: auto;
    background: #b3261e !important;
    border-bottom-color: #72120d !important;
}

.scheduler_form_error {
    grid-column: 1 / -1;
    padding: 7px 9px;
    border-left: 4px solid #b3261e;
    background: #ffd9d6;
    color: #67120c;
}

.scheduler_picker {
    position: absolute;
    z-index: 5;
    inset: 64px 18px 70px;
    display: flex;
    flex-direction: column;
    min-height: 240px;
    padding: 12px;
    border: 1px solid #619aae;
    background: #eefaff;
    box-shadow: 0 12px 30px rgba(0, 41, 58, 0.3);
}

.scheduler_task_panel.picker_open::before {
    content: "";
    position: absolute;
    z-index: 4;
    inset: 0;
    background: rgba(0, 28, 40, 0.48);
}

.scheduler_picker_header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.scheduler_picker_header input {
    flex: 1;
    min-width: 0;
    min-height: 34px;
    padding: 5px 8px;
}

.scheduler_picker_header .button {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    padding-right: 12px;
    padding-left: 12px;
    color: #fff !important;
}

.scheduler_picker_list {
    flex: 1;
    display: grid;
    align-content: start;
    gap: 6px;
    min-height: 0;
    overflow-y: auto;
}

.scheduler_picker_item {
    grid-template-columns: 54px minmax(0, 1fr) auto;
    width: 100%;
    color: #00293a;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.scheduler_picker_icon {
    width: 52px;
    height: 52px;
}

.scheduler_picker_item:hover,
.scheduler_picker_item:focus-visible {
    outline: 2px solid #0181bb;
    background: #c8eefb;
}

.inventory_recommendation_menu {
    position: fixed;
    z-index: 7500;
    display: grid;
    min-width: 190px;
    padding: 5px;
    border: 1px solid #528ea2;
    background: #eefaff;
    box-shadow: 0 10px 26px rgba(0, 41, 58, 0.35);
}

.inventory_recommendation_menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 34px;
    padding: 6px 9px;
    border: 0;
    background: transparent;
    color: #00384f;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.inventory_recommendation_menu button:hover,
.inventory_recommendation_menu button:focus-visible {
    background: #c8eefb;
}

.inventory_planned_recommendations {
    border-top-color: rgba(255, 179, 71, 0.42);
}

.inventory_recommendation_item.inventory_planned_item {
    border-color: rgba(255, 179, 71, 0.7);
    background: rgba(91, 53, 5, 0.5);
}

.inventory_recommendation_item.inventory_planned_item em {
    color: #ffd89f;
}