/*
 * Public beneficiary verification and schedule wizard.
 *
 * Desktop rules define the complete workflow here instead of leaking them through
 * the shared stylesheet. The responsive sections then adapt the same components
 * into a touch-friendly, single-column mobile experience.
 */
.page-container {
    --bs-primary: var(--brand-primary);
    --bs-primary-rgb: 101, 87, 165;
    position: relative;
    display: grid;
    min-height: 100vh;
    overflow-x: clip;
    isolation: isolate;
    padding: clamp(36px, 5vh, 64px) clamp(24px, 3vw, 44px);
    justify-items: center;
    align-items: start;
    background: linear-gradient(145deg, #f2f1f7 0%, #e9e8f0 48%, #f4f3f7 100%);
    perspective: 1400px;
}

.page-container::before,
.page-container::after {
    content: "";
    position: fixed;
    z-index: 0;
    width: min(42vw, 620px);
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(86px);
}

.page-container::before {
    top: -18%;
    left: -9%;
    background: rgba(101, 87, 165, .2);
}

.page-container::after {
    right: -7%;
    bottom: -22%;
    background: rgba(78, 157, 131, .16);
}

.page-container:has(#verification-section:not([hidden])) {
    place-items: center;
}

.search-card,
.schedule-card {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, .58);
    border-top-color: rgba(255, 255, 255, .96);
    border-radius: 22px;
    background: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .8),
        0 1px 1px rgba(50, 38, 94, .1),
        0 9px 20px rgba(63, 48, 116, .12),
        0 32px 68px rgba(63, 48, 116, .2);
}

.search-card {
    width: min(460px, 100%);
    transform: rotateX(1.35deg) translateZ(0);
    transform-origin: center;
}

.schedule-card {
    max-width: 1440px;
    padding: 44px;
}

/* Public schedule screens use a left-aligned identity mark at every step. */
.schedule-card .application-logo-link {
    margin-right: auto;
    margin-left: 0;
}

.page-container .btn-primary {
    --bs-btn-bg: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-bg: var(--brand-primary-dark);
    --bs-btn-hover-border-color: var(--brand-primary-dark);
    --bs-btn-active-bg: #40366f;
    --bs-btn-active-border-color: #40366f;
}

.search-card .application-logo-link {
    margin-right: auto;
    margin-left: auto;
}

.page-container .search-card .application-logo-link,
.page-container .search-card .application-logo-link > .app-logo {
    width: 88px;
    height: 77px;
}

/* Shared schedule header: application identity left, beneficiary account right. */
.schedule-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
    padding-bottom: 18px;
}

.schedule-topbar .application-logo-link { margin-bottom: 0; }
.user-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    border: 0;
    color: #173e59;
    background: transparent;
    box-shadow: none;
}
.user-menu-toggle:hover,
.user-menu-toggle:focus,
.user-menu-toggle.show,
.user-menu-toggle:active { border: 0; color: #173e59; background: transparent; box-shadow: none; }
.user-menu-toggle:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.user-menu-toggle > .bi-person-circle { color: var(--brand-secondary); font-size: 28px; }
.user-menu-toggle > span { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.user-menu .dropdown-menu {
    min-width: 220px;
    padding: 6px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(31, 41, 55, .12);
}
.user-menu .dropdown-item {
    display: flex;
    width: 100%;
    height: auto;
    min-height: 44px;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    padding: 10px 16px;
    border: 0;
    border-radius: 0;
    color: #374151;
    background: transparent;
    text-align: left;
    white-space: nowrap;
}
.user-menu .dropdown-item > .bi { color: var(--brand-primary); font-size: 16px; }
.user-menu .dropdown-item:hover,
.user-menu .dropdown-item:focus { color: #374151; background: #f3f4f6; }

.verification-header {
    margin-bottom: 30px;
}

.verification-header p {
    margin: 0;
    color: #657286;
    line-height: 1.65;
}

.privacy-note {
    margin: 22px 0 0;
    color: #657286;
    font-size: 12px;
    text-align: center;
}

.schedule-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.schedule-header p {
    margin: 6px 0 0;
    color: #657286;
}

.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
}

.header-actions > span {
    color: #657286;
    font-size: 13px;
    font-weight: 700;
}

/* Wizard navigation and selection cards. */
.wizard-card {
    width: min(1360px, 100%);
    margin-inline: auto;
}

.wizard-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
    min-height: 680px;
    border: 1px solid var(--bs-border-color);
    border-radius: 16px;
    background: var(--bs-body-bg);
    box-shadow: var(--bs-box-shadow-sm);
}

/* Desktop progress rail; the form keeps the existing validated workflow. */
.wizard-sidebar {
    padding: 28px 20px;
    border-radius: 16px 0 0 16px;
    color: #fff;
    background: linear-gradient(155deg, #514684, #302654);
}

.wizard-sidebar h2 { margin: 0 0 16px; font-size: 24px; color: inherit; }
.wizard-sidebar p { color: #e0f2fa; font-size: 15px; line-height: 1.65; }
.wizard-sidebar #wizard-step-status { font-size: 18px; font-weight: 700; color: #fff; }

@media (min-width: 901px) {
    .wizard-sidebar #wizard-step-status { margin: 0 0 14px; }
    .wizard-sidebar #wizard-step-description {
        height: 118px;
        margin: 0;
    }
}
.wizard-layout > form {
    display: grid;
    grid-template-areas: "panel" "result" "actions";
    grid-template-rows: 1fr auto auto;
    min-width: 0;
    padding: 24px;
}

.page-container .application-logo-link > .app-logo {
    width: 100px;
    height: 88px;
}

/* Overlay steps in one grid cell: the largest defines a stable shared size.
 * Hidden steps stay inert and invisible, avoiding fixed-height clipping or scroll. */
.wizard-layout .wizard-panel {
    grid-area: panel;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.wizard-layout .wizard-panel[hidden] {
    display: block !important;
    visibility: hidden;
    pointer-events: none;
}
.wizard-layout .wizard-panel[data-step="4"] { position: relative; }
.wizard-layout #wizard-result {
    grid-area: auto;
}
.wizard-layout #wizard-result[hidden] { display: none !important; }
.wizard-layout .wizard-actions { grid-area: actions; border: 0; border-top: 1px solid var(--bs-border-color); border-radius: 0; padding: 16px 0 0; }

.wizard-progress {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 22px 0;
    padding: 0;
    list-style: none;
}

.wizard-progress li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px;
    border-radius: 9px;
    color: #71808a;
    background: #eef3f6;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

.wizard-progress li > span {
    display: inline-grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border: 1px solid #b7c9d4;
    border-radius: 50%;
    background: #fff;
    font-size: 12px;
}

.wizard-progress li.active > span,
.wizard-progress li.complete > span {
    border-color: var(--brand-primary);
    color: #fff;
    background: var(--brand-primary);
}

.wizard-progress li.complete {
    color: #28637e;
    background: #edf7fa;
}

/* Scoped rail styles replace horizontal pills on larger screens. */
.wizard-sidebar .wizard-progress {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 28px 0 0 24px;
}
.wizard-sidebar .wizard-progress li {
    position: relative;
    justify-content: flex-start;
    min-height: 74px;
    padding: 15px 0;
    gap: 12px;
    background: transparent;
    color: #d0e6f2;
    border-radius: 10px;
    font-size: 15px;
    text-align: left;
    transition: color .2s, background-color .2s, transform .2s;
}
.wizard-sidebar .wizard-progress li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 14px;
    top: 49px;
    bottom: -25px;
    width: 1px;
    background: rgba(255,255,255,.35);
}
.wizard-sidebar .wizard-progress li > span { flex-shrink: 0; position: relative; z-index: 1; width: 30px; height: 30px; background: #40366f; border-color: #bcb5da; color: #fff; font-size: 13px; }
.wizard-sidebar .wizard-progress li.active,
.wizard-sidebar .wizard-progress li.complete { color: #fff; }
.wizard-sidebar .wizard-progress li.active > span,
.wizard-sidebar .wizard-progress li.complete > span { color: var(--brand-primary-dark); background: #fff; border-color: #fff; }
.wizard-sidebar .wizard-progress li.active { font-weight: 700; }
.wizard-sidebar .wizard-progress li.active {
    transform: translateX(5px);
}
.wizard-sidebar .wizard-progress li.complete {
    cursor: pointer;
}
.wizard-sidebar .wizard-progress li.complete:hover,
.wizard-sidebar .wizard-progress li.complete:focus-visible {
    color: #fff;
    background: rgba(255,255,255,.11);
    transform: translateX(5px);
}
.wizard-sidebar .wizard-progress li.complete > span {
    display: grid;
    place-items: center;
    font-size: 0;
}
.wizard-sidebar .wizard-progress li.complete > span::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 11px;
    border: solid #4e9d83;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -58%) rotate(45deg);
}

/* Phones show the same progress above the form without consuming input width. */
@media (max-width: 900px) {
    .wizard-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .wizard-sidebar { padding: 18px; border-radius: 16px 16px 0 0; }
    .wizard-sidebar > p:not(#wizard-step-status) { display: none; }
    .wizard-sidebar h2 { font-size: 17px; margin-bottom: 6px; }
    .wizard-sidebar #wizard-step-status { margin: 0; font-size: 14px; }
    .wizard-sidebar .wizard-progress { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 14px 0 0; }
    .wizard-sidebar .wizard-progress li { flex-direction: column; justify-content: center; padding: 4px 0; gap: 7px; min-height: 0; font-size: 11px; text-align: center; }
    .wizard-sidebar .wizard-progress li::after { display: none; }
    .settings-preview #settings-preview-content { grid-template-columns: 1fr; }
}

.wizard-panel {
    min-height: 300px;
}

/* Bootstrap owns control appearance; these variable-based adapters scope
 * shared element rules without changing unrelated public pages. */
.page-container .btn {
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
    border-radius: var(--bs-btn-border-radius);
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    font-size: var(--bs-btn-font-size);
    font-weight: 400;
}
.page-container .btn:hover { color: var(--bs-btn-hover-color); background-color: var(--bs-btn-hover-bg); border-color: var(--bs-btn-hover-border-color); }
.page-container .btn:disabled { color: var(--bs-btn-disabled-color); background-color: var(--bs-btn-disabled-bg); border-color: var(--bs-btn-disabled-border-color); }
.page-container .form-check-input { padding: 0; background-color: var(--bs-body-bg); }
.page-container .form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); }
.page-container .form-select { border-radius: var(--bs-border-radius); color: var(--bs-body-color); background-color: var(--bs-body-bg); }
.page-container .form-control { border-radius: var(--bs-border-radius); border-color: var(--bs-border-color); color: var(--bs-body-color); background-color: var(--bs-body-bg); }
.page-container .form-control:focus,
.page-container .form-select:focus { border-color: #86b7fe; box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25); }

.choice-section + .choice-section {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #dce6ed;
}

.choice-section h2 {
    margin-top: 0;
}

.step-introduction { margin: 0 0 24px; color: #657286; }
.step-introduction-spacer { visibility: hidden; }
.settings-step-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.settings-step-layout .choice-section h3 { margin: 0; color: #173e59; font-size: 18px; }
.coverage-date-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    margin-top: 14px;
    padding: 18px;
    border: 1px solid #d5e1e9;
    border-radius: 14px;
    background: #fff;
}
.coverage-date-card > .bi { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 12px; color: var(--brand-primary); background: color-mix(in srgb, var(--brand-primary) 9%, #fff); font-size: 22px; }
.coverage-date-card > div { display: grid; gap: 7px; }
.coverage-date-card label { color: #173e59; font-weight: 700; }
.coverage-date-card input { max-width: 300px; }
.coverage-date-card small { color: #657286; line-height: 1.45; }
.settings-preview {
    width: 100%;
    margin-top: 24px;
    padding: 22px;
    border: 1px solid color-mix(in srgb, var(--brand-primary), transparent 70%);
    border-radius: 14px;
    background: color-mix(in srgb, var(--brand-primary) 7%, #fff);
}
.settings-preview > .bi { color: var(--brand-secondary); font-size: 24px; }
.settings-preview h3 { display: inline; margin-left: 8px; color: #173e59; font-size: 18px; }
.settings-preview #settings-preview-content { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: 18px; margin-top: 22px; }
.settings-preview #settings-preview-content > div { display: grid; gap: 5px; }
.settings-preview span { color: #657286; font-size: 12px; }
.settings-preview strong { color: #173e59; line-height: 1.45; text-transform: capitalize; }
.settings-step-layout #mode-selection { margin-top: 0; padding-top: 24px; }
.progressive-section:not([hidden]) { animation: reveal-settings-section .35s ease-out both; }
.settings-step-layout #mode-selection:not([hidden]) { animation-delay: .5s; }
@keyframes reveal-settings-section {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.mode-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.mode-card {
    position: relative;
    display: flex;
    min-height: 112px;
    align-items: flex-start;
    gap: 10px;
    padding: 17px;
    border: 1px solid #cbd9e3;
    border-radius: 11px;
    background: #fff;
    cursor: pointer;
}

.mode-card:has(input:checked) {
    border-color: var(--brand-primary);
    background: var(--brand-primary-subtle);
    box-shadow: 0 0 0 3px rgba(101, 87, 165, .18);
}

.mode-card .mode-icon { flex: 0 0 auto; color: var(--brand-secondary); font-size: 24px; line-height: 1; }
.mode-card .selected-check { position: absolute; top: -10px; right: -10px; display: none; width: 28px; height: 28px; place-items: center; border: 3px solid #fff; border-radius: 50%; color: #fff; background: var(--brand-primary); box-shadow: 0 2px 8px rgba(81, 70, 132, .25); }
.mode-card:has(input:checked) .selected-check { display: grid; }

.mode-card input {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
}

.mode-card span {
    color: #657286;
    font-size: 13px;
    line-height: 1.45;
}

.mode-card strong {
    display: block;
    margin-bottom: 4px;
    color: #173e59;
    font-size: 15px;
}

.coverage-options .mode-card {
    min-height: 96px;
}

.compact-modes {
    width: 100%;
    max-width: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 22px;
}

.compact-modes .mode-card {
    width: 100%;
    min-height: 112px;
    align-items: flex-start;
}

.compact-modes .mode-card input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
}

.weekday-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.weekday-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid #ccd9e2;
    border-radius: 9px;
    background: #fff;
    transform: translateY(20px);
}

.weekday-check input {
    width: 17px;
    height: 17px;
    margin: 0;
}

.wizard-panel #wizard-weekdays {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
}

.wizard-panel #wizard-weekdays .weekday-check {
    display: flex;
    min-width: 0;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px;
}

.wizard-panel #wizard-weekdays .weekday-check input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
}

/* Work-time editor. */
.template-shifts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 16px 20px;
    margin-top: 22px;
    padding: 18px;
    border: 0;
    border-radius: 12px;
    background: #fff;
    transform: translateY(30px);
}

/* Reserve the optional shift space so toggling split hours does not move the page. */
.template-shifts > .shift-card { grid-column: 1; grid-row: 1; margin-top: 0; }
.template-shifts > .check-control { grid-column: 2; grid-row: 1; align-self: center; white-space: normal; }
.template-shifts > #base-second { grid-column: 1; grid-row: 2; min-height: 152px; }
.template-shifts > #base-second[hidden] { display: block !important; visibility: hidden; pointer-events: none; }
.submission-success { margin: 24px auto 0; max-width: 760px; padding: 32px; text-align: center; }
.submission-success > i { display: block; color: #198754; font-size: 56px; margin-bottom: 16px; }
.submission-success h2 { color: #146c43; font-size: 24px; }
.submission-success-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 22px; }
.page-container .submission-text-link {
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    padding: 2px;
    border: 0;
    border-radius: 0;
    color: #5b4891;
    background: transparent;
    box-shadow: none;
    outline: none;
    appearance: none;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: underline;
    text-decoration-color: rgba(91, 72, 145, .35);
    text-underline-offset: 3px;
}
.page-container .submission-text-link:hover,
.page-container .submission-text-link:focus,
.page-container .submission-text-link:focus-visible {
    border: 0;
    color: #3f876f;
    background: transparent;
    box-shadow: none;
    outline: none;
    text-decoration-color: currentColor;
}
.submission-action-separator { color: #9aa6ad; }
.submitted-schedule-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    padding: 16px;
    place-items: center;
    background: rgba(20, 28, 40, .62);
    backdrop-filter: blur(2px);
}
.submitted-schedule-backdrop[hidden],
.submitted-schedule-modal[hidden] { display: none; }
.submitted-schedule-modal {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    width: min(980px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    padding: 22px;
    border: 1px solid #7eafc4;
    border-radius: 14px;
    color: #263846;
    background: #f7fbfd;
    box-shadow: 0 22px 70px rgba(13, 49, 70, .32);
    animation: submitted-modal-in .2s ease-out;
}
.submitted-schedule-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.submitted-schedule-heading div { display: grid; gap: 2px; }
.submitted-schedule-heading span { color: #4e9d83; font-size: 12px; font-weight: 700; }
.submitted-schedule-heading h2 { margin: 0; color: #173e59; font-size: 23px; }
.submitted-schedule-heading strong { color: #60727e; font-size: 13px; font-weight: 700; }
.submitted-schedule-legend { justify-content: flex-start; margin-bottom: 10px; }
.submitted-schedule-calendar { min-height: 0; margin-top: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.submitted-schedule-calendar .calendar-month { min-height: 100%; }
.submitted-schedule-calendar .calendar-day { cursor: default; }
body.submitted-schedule-open { overflow: hidden; }
@keyframes submitted-modal-in {
    from { opacity: 0; transform: translateY(8px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.shift-card {
    display: grid;
    gap: 10px;
    margin-top: 14px;
    padding: 16px;
    border: 1px solid #d7e4ec;
    border-radius: 12px;
    background: #f8fbfc;
}

.time-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.time-fields label,
.field-stack {
    display: grid;
    gap: 7px;
    color: #29495d;
    font-size: 13px;
    font-weight: 700;
}

.time-fields select,
.field-stack select {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}

.check-control {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.check-control input {
    width: 18px;
    height: 18px;
    margin: 0;
}

/* Calendar overview and day states. */
.calendar-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
}

.completion-count { color: inherit; font-weight: 700; }

.compact-calendar {
    display: block;
    margin-top: 16px;
}

.calendar-month {
    padding: 16px;
    border: 1px solid #d8e4ec;
    border-radius: 12px;
    background: #fff;
}

.calendar-month h3 {
    margin: 0 0 12px;
    color: #173e59;
    text-transform: capitalize;
}

.calendar-weekdays,
.calendar-month-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(42px, 1fr));
    gap: 6px;
}

.calendar-weekdays {
    margin-bottom: 6px;
    color: #71808a;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.calendar-blank {
    min-height: 64px;
}

.calendar-day {
    position: relative;
    display: grid;
    min-height: clamp(64px, 8vh, 92px);
    place-content: center;
    gap: 4px;
    border: 1px solid #ccdbe3;
    color: #405563;
    background: #f8fbfc;
}

.calendar-month.weeks-6 .calendar-day,
.calendar-month.weeks-6 .calendar-blank {
    min-height: clamp(52px, 6.3vh, 70px);
}

.calendar-day small {
    line-height: 1.35;
}

.calendar-day small,
.calendar-day span {
    font-size: 10px;
    font-weight: 700;
}

.calendar-day.hours {
    border-color: #9acfb9;
    color: #2f6f5a;
    background: #edf8f3;
}

.calendar-day.off {
    border-color: #a9d1e1;
    color: #35677c;
    background: #eef7fb;
}

.calendar-day.available {
    border-color: #9acfb9;
    color: #2f6f5a;
    background: #edf8f3;
}

.calendar-day.unavailable {
    border-color: #dca49f;
    color: #8b302a;
    background: #fbeeed;
}

.calendar-day.modified {
    border-color: #a99bd1;
    box-shadow: inset 0 0 0 2px rgba(101, 87, 165, .18);
}

.calendar-day.modified::after {
    content: "";
    position: absolute;
    top: 6px;
    right: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6557a5;
}

.calendar-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
    margin-bottom: 10px;
    color: #60727e;
    font-size: 12px;
}

.calendar-legend span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.calendar-legend i {
    width: 12px;
    height: 12px;
    border: 1px solid #ccdbe3;
    border-radius: 3px;
    background: #f8fbfc;
}

.calendar-legend i.hours {
    border-color: #9acfb9;
    background: #edf8f3;
}

.calendar-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
}
.calendar-meta-row .calendar-legend { justify-content: flex-start; margin-bottom: 0; }

.calendar-legend i.off {
    border-color: #a9d1e1;
    background: #eef7fb;
}

.calendar-legend i.available {
    border-color: #9acfb9;
    background: #edf8f3;
}

.calendar-legend i.modified {
    border-color: #a99bd1;
    background: #fff;
    box-shadow: inset 0 0 0 2px rgba(101, 87, 165, .18);
}

.calendar-legend i.unavailable {
    border-color: #dca49f;
    background: #fbeeed;
}

.month-navigation {
    display: grid;
    grid-template-columns: 170px 1fr 170px;
    grid-template-areas: "previous title next";
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.month-navigation h3 {
    grid-area: title;
    margin: 0;
    text-align: center;
}

.month-navigation button {
    width: 100%;
    min-height: 42px;
}

.month-navigation button:first-child {
    grid-area: previous;
}

.month-navigation button:last-child {
    grid-area: next;
}

.calendar-day-mobile-date {
    display: none;
}

/* Modal-like editor and wizard actions. */
.day-editor {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 50;
    width: min(720px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    margin: 0;
    padding: 22px;
    overflow: auto;
    border: 1px solid #7eafc4;
    border-radius: 14px;
    background: #f7fbfd;
    box-shadow: 0 22px 70px rgba(13, 49, 70, .28);
    transform: translate(-50%, -50%);
}

.day-editor label {
    display: grid;
    gap: 7px;
}

.day-editor select {
    min-width: 150px;
}

.editor-heading {
    position: sticky;
    top: -22px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -22px -22px 14px;
    padding: 18px 22px 12px;
    background: #f7fbfd;
}

.editor-heading h3 {
    margin: 0;
}

.editor-close {
    display: grid;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    place-items: center;
    border-radius: 50%;
    color: #15445f;
    background: #e4f0f5;
    font-size: 27px;
    line-height: 1;
}

.editor-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.editor-actions button {
    width: 100%;
    min-height: 48px;
}

.wizard-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.wizard-summary > .summary-section {
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 18px;
    border: 1px solid #e1e7eb;
    border-radius: 12px;
    background: #fafbfc;
}

.summary-section > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #e6eaed; }
.summary-section > header > div { display: flex; align-items: center; gap: 8px; min-width: 0; }
.summary-section > header .bi { color: var(--brand-secondary); }
.summary-section h3 { margin: 0; color: #302654; font-size: 16px; }
.summary-section dl { display: grid; gap: 10px; margin: 0; }
.summary-section dl > div { display: grid; gap: 2px; }
.summary-section dt { color: #71808a; font-size: 11px; font-weight: 400; }
.summary-section dd { margin: 0; color: #263846; font-size: 13px; font-weight: 700; line-height: 1.4; }

/* Step 2: fast defaults and an immediate, compact weekly result preview. */
.template-shifts {
    grid-template-columns: minmax(360px, .9fr) minmax(420px, 1.1fr);
}

.base-shift-editor {
    display: grid;
    align-content: start;
    gap: 12px;
}

.template-shifts > .base-shift-editor { grid-column: 1; grid-row: 1; }
.template-shifts > .weekly-preview { grid-column: 2; grid-row: 1; }
.template-shifts > .shift-card,
.template-shifts > .check-control,
.template-shifts > #base-second { grid-column: auto; grid-row: auto; }

.time-presets {
    display: grid;
    height: clamp(370px, 42vh, 440px);
    grid-template-rows: auto repeat(6, minmax(50px, 1fr));
    gap: 0;
    overflow: hidden;
    border: 1px solid #d7e4ec;
    border-radius: 12px;
    background: #f4f3f9;
}
.time-presets h3 { margin: 0; padding: 16px; color: #173e59; font-size: 18px; }
.page-container .time-preset {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    width: 100%;
    height: auto;
    min-height: 58px;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    border: 0;
    border-top: 1px solid #e1e9ee;
    border-radius: 0;
    color: #493879;
    background: transparent;
    font-weight: 700;
    text-align: left;
}
.time-preset strong { min-width: 0; }
.preset-icon { margin-right: 5px; color: var(--brand-secondary); font-size: 17px; vertical-align: -1px; }
.time-preset small { color: #6c7d88; font-size: 12px; font-weight: 700; text-align: right; }
.preset-radio { box-sizing: border-box; width: 20px; height: 20px; border: 2px solid #9cabb6; border-radius: 50%; background: #fff; }
.page-container .time-preset:hover { color: #493879; background: rgba(91, 72, 145, .07); }
.page-container .time-preset.active,
.page-container .time-preset.active:hover {
    color: #173e59;
    background: var(--brand-primary-subtle);
    box-shadow: inset 3px 0 0 var(--brand-primary), inset 0 0 0 1px var(--brand-primary);
}
.time-preset.active small { color: #5f6680; }
.time-preset.active .preset-radio { border-color: var(--brand-primary); background: var(--brand-primary); box-shadow: 0 0 0 3px rgba(101, 87, 165, .22); }
.time-preset.active .preset-radio::after { content: ""; display: block; width: 8px; height: 8px; margin: 4px; border-radius: 50%; background: #fff; }
.time-preset.active .preset-icon { color: var(--brand-secondary); }

.split-default { align-items: flex-start; white-space: normal; }
.split-default span { display: grid; gap: 3px; }
.split-default small { color: #6c7d88; font-weight: 400; line-height: 1.35; }
.field-error { margin: 0; color: #b42318; font-size: 13px; font-weight: 700; }

.custom-time-editor,
.weekly-preview {
    min-width: 0;
    height: clamp(370px, 42vh, 440px);
    padding: 16px;
    border: 1px solid rgba(91, 72, 145, .2);
    border-radius: 12px;
    background: #f4f3f9;
}
.custom-time-editor { display: grid; align-content: start; gap: 12px; }
.weekly-preview { display: flex; flex-direction: column; }
.custom-time-editor[hidden] { display: none; }
.time-presets:not([hidden]),
.custom-time-editor:not([hidden]),
.weekly-preview:not([hidden]) { animation: reveal-schedule-panel .35s ease-out both; }
@keyframes reveal-schedule-panel {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .time-presets:not([hidden]),
    .custom-time-editor:not([hidden]),
    .weekly-preview:not([hidden]) { animation: none; }
}
.custom-time-editor .shift-card { margin-top: 0; background: #f4f3f9; }
.page-container .back-to-presets {
    justify-self: start;
    width: auto;
    height: auto;
    min-height: 38px;
    padding: 7px 0;
    border: 0;
    color: #5b4891;
    background: transparent;
    font-size: 13px;
}
.page-container .back-to-presets:hover { color: #40366f; background: transparent; text-decoration: underline; }
.weekly-preview > div:first-child { display: flex; align-items: center; gap: 8px; color: #493879; }
.weekly-preview h3 { margin: 0; font-size: 17px; }
.weekly-preview-note { margin: 7px 0 0; color: #6c7d88; font-size: 12px; }
#weekly-preview-strip { display: grid; flex: 1; align-content: space-evenly; gap: 9px; margin-top: 16px; }
.weekly-preview-day { display: grid; grid-template-columns: 40px minmax(70px, 1fr) minmax(120px, auto); align-items: center; gap: 10px; }
.weekly-preview-day small { color: #536674; text-align: right; }
.weekly-bar { height: 12px; border-radius: 999px; background: #e5f2f7; }
.weekly-preview-day.work .weekly-bar { background: #78bea0; }
.page-container .weekly-exceptions-note {
    width: auto;
    height: auto;
    min-height: 38px;
    margin: 14px 0 0;
    padding: 10px 0 0;
    border: 0;
    border-top: 1px solid rgba(91, 72, 145, .14);
    border-radius: 0;
    color: #5b4891;
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    text-align: left;
}
.page-container .weekly-exceptions-note:hover { color: #40366f; background: transparent; text-decoration: underline; }
.weekly-calendar-guidance { margin: 14px 0 0; padding: 12px; border-radius: 9px; color: #536674; background: rgba(255,255,255,.62); font-size: 12px; line-height: 1.45; }
.weekly-calendar-guidance .bi { margin-right: 5px; color: var(--brand-secondary); }

/* Step 3: compact actions and an overlay drawer keep the calendar height stable. */
.calendar-tools { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 6px; }
.page-container .calendar-tools > .calendar-changes-toggle,
.page-container .calendar-tools > .calendar-tool-button,
.page-container .calendar-tools > .calendar-icon-button {
    display: inline-flex;
    width: auto;
    height: 31px;
    min-height: 31px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 3px 8px;
    border: 1px solid transparent;
    border-radius: 5px;
    color: #667782;
    background-color: transparent;
    font-size: 12px;
    font-weight: 700;
}
.page-container .calendar-tools > .calendar-changes-toggle:not(:disabled):hover,
.page-container .calendar-tools > .calendar-tool-button:hover,
.page-container .calendar-tools > .calendar-icon-button:not(:disabled):hover {
    border-color: rgba(78, 157, 131, .42);
    color: #3f876f;
    background-color: rgba(78, 157, 131, .08);
}
.page-container .calendar-tools > .calendar-changes-toggle:disabled,
.page-container .calendar-tools > .calendar-icon-button:disabled { color: #9aa3aa; border-color: transparent; background-color: transparent; cursor: default; }
.page-container .calendar-tools > .calendar-icon-button { width: 31px; padding: 0; font-size: 14px; }
.page-container #calendar-multi-toggle.active { color: #493879; border-color: #a99bd1; background-color: transparent; box-shadow: none; }
.calendar-legend label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.calendar-legend input { width: 15px; height: 15px; margin: 0; }
.page-container .calendar-legend input:checked {
    border-color: #4e9d83;
    background-color: #4e9d83;
}
.page-container .calendar-legend input:focus {
    border-color: #4e9d83;
    box-shadow: 0 0 0 3px rgba(78, 157, 131, .18);
}
.calendar-legend .calendar-legend-modified { margin-left: 4px; padding-left: 12px; border-left: 1px solid #ddd8eb; color: #493879; font-weight: 700; }
.calendar-day.is-filtered-out { opacity: .14; filter: grayscale(1); }
.calendar-select-box {
    position: absolute;
    top: 6px;
    left: 6px;
    display: none;
    width: 20px;
    height: 20px;
    place-items: center;
    border: 2px solid #9baab4;
    border-radius: 5px;
    color: transparent;
    background: #fff;
    font-size: 13px;
}
.calendar-day.selection-mode .calendar-select-box { display: grid; }
.calendar-day.selection-mode.calendar-selected { outline: 3px solid rgba(101, 87, 165, .48); outline-offset: -3px; }
.calendar-day.calendar-selected .calendar-select-box { border-color: var(--brand-primary); color: #fff; background: var(--brand-primary); }
.calendar-selection-bar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    z-index: 1050;
    display: flex;
    width: min(620px, calc(100vw - 32px));
    min-height: 64px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 12px 10px 20px;
    border: 1px solid rgba(91, 72, 145, .3);
    border-radius: 14px;
    color: #302654;
    background: #fff;
    box-shadow: 0 16px 42px rgba(35, 28, 72, .24);
    transform: translateX(-50%);
}
.calendar-selection-bar[hidden] { display: none; }
.calendar-selection-bar > div { display: flex; gap: 8px; }
.calendar-selection-bar .btn { min-height: 42px; }
.changes-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1070;
    background: rgba(28, 24, 43, .3);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity .26s ease;
}
.changes-drawer-backdrop.is-open { opacity: 1; }
.changes-drawer-backdrop[hidden],
.changes-drawer[hidden] { display: none; }
.changes-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1080;
    display: grid;
    width: min(410px, 100vw);
    height: 100dvh;
    grid-template-rows: auto minmax(0, 1fr);
    border-left: 1px solid #ddd8eb;
    background: #fff;
    box-shadow: -18px 0 50px rgba(35, 28, 72, .2);
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.22, .8, .25, 1);
    will-change: transform;
}
.changes-drawer.is-open { transform: translateX(0); }
.changes-drawer > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 20px 18px;
    border-bottom: 1px solid #ebe8f2;
}
.changes-drawer > header span { color: #71808a; font-size: 12px; }
.changes-drawer > header h3 { margin: 3px 0 0; color: #302654; font-size: 20px; }
.page-container .changes-drawer .changes-drawer-close {
    display: grid;
    width: 31px;
    height: 31px;
    min-height: 31px;
    padding: 0;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 5px;
    color: #667782;
    background-color: transparent;
    font-size: 19px;
}
.page-container .changes-drawer .changes-drawer-close:hover {
    border-color: rgba(78, 157, 131, .42);
    color: #3f876f;
    background-color: rgba(78, 157, 131, .08);
}
.calendar-change-list { min-height: 0; padding: 8px 20px 24px; overflow-y: auto; }
.calendar-change-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; border-bottom: 1px solid #ece9f2; }
.calendar-change-row > div { display: grid; gap: 4px; min-width: 0; }
.calendar-change-row strong { color: #263846; font-size: 13px; }
.calendar-change-row span { color: #667782; font-size: 12px; line-height: 1.4; }
.calendar-change-row span .bi { margin-inline: 3px; color: #8b7abb; }
.page-container .changes-drawer .calendar-change-undo {
    display: grid;
    flex: 0 0 31px;
    width: 31px;
    height: 31px;
    min-height: 31px;
    padding: 0;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 5px;
    color: #667782;
    background-color: transparent;
    font-size: 14px;
}
.page-container .changes-drawer .calendar-change-undo:hover {
    border-color: rgba(78, 157, 131, .42);
    color: #3f876f;
    background-color: rgba(78, 157, 131, .08);
}
body.changes-drawer-open { overflow: hidden; }
.bulk-editor-help { padding: 10px 12px; border-radius: 8px; color: #493879; background: rgba(91, 72, 145, .09); font-weight: 700; }

/* Step 4: one meaningful action per section and a bounded inline schedule preview. */
.page-container .wizard-summary .summary-edit {
    display: inline-flex;
    width: auto;
    height: 24px;
    min-height: 24px;
    align-items: center;
    justify-self: start;
    gap: 5px;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #5b4891;
    background-color: transparent;
    box-shadow: none;
    font-size: 12px;
    font-weight: 700;
}
.page-container .wizard-summary .summary-edit:hover {
    color: #3f876f;
    background-color: transparent;
    text-decoration: underline;
}
.page-container .final-schedule-trigger {
    display: flex;
    width: 100%;
    height: 44px;
    min-height: 44px;
    align-items: center;
    gap: 9px;
    margin-top: 14px;
    padding: 0 14px;
    border: 1px solid #d8d3e8;
    border-radius: 9px;
    color: #493879;
    background-color: transparent;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
}
.page-container .final-schedule-trigger span { flex: 1; }
.page-container .final-schedule-trigger:hover { border-color: rgba(78, 157, 131, .5); color: #3f876f; background-color: rgba(78, 157, 131, .06); }
.final-schedule-chevron { transition: transform .2s ease; }
.final-schedule-trigger.expanded .final-schedule-chevron { transform: rotate(180deg); }
.final-schedule-inline {
    position: absolute;
    top: var(--final-schedule-top, 0);
    right: 0;
    left: 0;
    z-index: 3;
    display: grid;
    box-sizing: border-box;
    height: var(--final-schedule-height, 320px);
    min-height: 0;
    max-height: 0;
    align-content: start;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: #fff;
    opacity: 0;
    overflow: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    transform: translateY(-5px);
    transition: max-height .3s cubic-bezier(.22, .8, .25, 1), padding .3s ease, border-color .2s ease, opacity .22s ease, transform .3s ease;
}
.final-schedule-inline[hidden] { display: none; }
.final-schedule-inline.expanded {
    max-height: var(--final-schedule-height, 320px);
    padding: 10px;
    border-color: #d8e4ec;
    opacity: 1;
    overflow-y: auto;
    transform: translateY(0);
}
.final-schedule-row { display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: 12px; padding: 11px 12px; border: 1px solid #e3e7ea; border-left-width: 4px; border-radius: 8px; background: #fafaf7; }
.final-schedule-row span { color: #60727e; font-size: 12px; }
.final-schedule-row strong { color: #263846; font-size: 12px; text-align: right; }
.final-schedule-row.hours { border-left-color: #9acfb9; background: #edf8f3; }
.final-schedule-row.off { border-left-color: #a9d1e1; background: #eef7fb; }
.final-schedule-row.unavailable { border-left-color: #dca49f; background: #fbeeed; }
.final-schedule-row.modified { border-left-color: #6557a5; box-shadow: inset 0 0 0 1px rgba(101, 87, 165, .15); }

@media (max-width: 900px) {
    .submitted-schedule-backdrop { padding: 8px; }
    .submitted-schedule-modal { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); padding: 14px; }
    .submitted-schedule-heading h2 { font-size: 20px; }
    .template-shifts { grid-template-columns: 1fr; }
    .template-shifts > .weekly-preview { grid-column: 1; grid-row: 2; }
    .time-presets,
    .custom-time-editor,
    .weekly-preview { height: auto; min-height: 0; }
    .weekly-preview-day { grid-template-columns: 34px 1fr; }
    .weekly-preview-day small { grid-column: 1 / -1; text-align: left; }
    .calendar-heading { align-items: start; }
    .calendar-meta-row { align-items: flex-start; }
    .calendar-tools { flex-wrap: wrap; }
}

@media (max-width: 640px) {
    .calendar-heading { display: grid; }
    .calendar-meta-row { flex-direction: column; gap: 8px; }
    .calendar-tools { width: 100%; justify-content: flex-end; }
    .calendar-tool-button span { display: none; }
    .page-container .calendar-tools > .calendar-tool-button { width: 31px; padding: 0; font-size: 14px; }
    .changes-drawer { top: auto; bottom: 0; width: 100%; height: min(72dvh, 620px); border-top: 1px solid #ddd8eb; border-left: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -18px 50px rgba(35, 28, 72, .2); transform: translateY(100%); }
    .changes-drawer.is-open { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .changes-drawer,
    .changes-drawer-backdrop,
    .final-schedule-chevron,
    .final-schedule-inline { transition: none; }
    .submitted-schedule-modal { animation: none; }
}

@media (min-width: 901px) {
    .page-container:has(#schedule-section:not([hidden])) { padding-block: clamp(24px, 3vh, 40px); }
    .schedule-card { padding: 24px 32px; }
    .schedule-topbar { margin-bottom: 12px; padding-bottom: 10px; }
}

@media (min-width: 901px) and (max-height: 850px) {
    .page-container:has(#schedule-section:not([hidden])) { padding: 8px 18px; }
    .schedule-card { padding: 16px 28px; }
    .schedule-topbar { margin-bottom: 8px; padding-bottom: 6px; }
    .schedule-topbar .application-logo-link,
    .schedule-topbar .application-logo-link > .app-logo { width: 76px; height: 67px; }
    .wizard-layout { min-height: 600px; }
    .wizard-layout > form { padding: 18px; }
    .template-shifts { margin-top: 12px; padding: 12px; }
    .time-presets,
    .custom-time-editor,
    .weekly-preview { height: 350px; }
    .page-container .time-preset { min-height: 48px; padding-block: 8px; }
    .custom-time-editor { gap: 8px; padding: 12px; }
    .custom-time-editor .shift-card { gap: 8px; padding: 10px 12px; }
    .custom-time-editor .time-fields select { height: 44px; }
    .weekly-calendar-guidance { margin-top: 8px; padding: 8px 10px; }
}

.wizard-actions {
    position: sticky;
    bottom: 0;
    z-index: 4;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px 180px;
    grid-template-areas: "status back forward";
    justify-content: end;
    gap: 10px;
    margin-top: 18px;
    padding: 14px;
    border: 1px solid #d8e4ec;
    border-radius: 12px;
    background: rgba(255, 255, 255, .96);
}

.draft-status { grid-area: status; display: inline-flex; align-items: center; gap: 8px; color: #657286; font-size: 12px; }
.draft-status .bi { color: var(--brand-secondary); font-size: 16px; }
.draft-status.is-saving .bi { animation: draft-status-pulse .8s ease-in-out infinite alternate; }
.draft-status.is-error { color: #b42318; }
@keyframes draft-status-pulse { to { opacity: .35; } }

.wizard-actions > button {
    box-sizing: border-box;
    width: 180px;
    min-width: 180px;
    height: 48px;
    min-height: 48px;
    padding: 0 16px;
}

.wizard-actions #wizard-back {
    grid-area: back;
}

.wizard-actions #wizard-next,
.wizard-actions #wizard-submit {
    grid-area: forward;
}

@media (max-width: 720px) and (min-width: 641px) {
    .calendar-weekdays,
    .calendar-month-grid {
        grid-template-columns: repeat(7, minmax(34px, 1fr));
        gap: 4px;
    }

    .calendar-day {
        min-height: 58px;
        padding: 5px;
    }

    .compact-modes,
    .wizard-summary {
        grid-template-columns: 1fr;
    }

    .wizard-panel #wizard-weekdays {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .wizard-progress li {
        padding: 8px 3px;
        font-size: 11px;
    }

    .wizard-panel {
        padding: 18px;
    }

    .wizard-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wizard-actions > button {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 640px) {
    html {
        scroll-behavior: smooth;
    }

    body {
        min-width: 0;
        background: #f5f8fa;
    }

    body.editor-open {
        overflow: hidden;
    }

    .calendar-selection-bar {
        bottom: 12px;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 12px;
        text-align: center;
    }

    .calendar-selection-bar > div {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .calendar-selection-bar .btn {
        width: 100%;
        min-width: 0;
    }

    .page-container {
        display: block;
        min-height: 100dvh;
        padding: 0;
    }

    .schedule-card {
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        min-height: 100dvh;
        margin: 0;
        padding: 20px 16px calc(96px + env(safe-area-inset-bottom));
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .page-container:has(#verification-section:not([hidden])) {
        display: grid;
        place-items: center;
        padding: 24px;
    }

    .search-card {
        box-sizing: border-box;
        width: min(460px, 100%);
        min-height: 0;
        margin: 0;
        padding: 30px 22px;
        border: 1px solid rgba(255, 255, 255, .64);
        border-top-color: rgba(255, 255, 255, .96);
        border-radius: 22px;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .8),
            0 1px 1px rgba(50, 38, 94, .1),
            0 8px 18px rgba(63, 48, 116, .12),
            0 26px 58px rgba(63, 48, 116, .18);
        transform: none;
    }

    .search-form input,
    .search-form button,
    .wizard-card input,
    .wizard-card select,
    .wizard-card button {
        font-size: 16px;
    }

    .search-form input,
    .search-form button {
        min-height: 52px;
    }

    .wizard-header p {
        margin-bottom: 0;
        font-size: 13px;
    }

    .schedule-topbar { gap: 12px; }
    .schedule-topbar .application-logo-link,
    .schedule-topbar .application-logo-link > .app-logo { width: 64px; height: 56px; }
    .user-menu-toggle { max-width: min(250px, 68vw); padding-inline: 8px; }
    .user-menu-toggle > span { max-width: 170px; }

    .wizard-progress {
        position: sticky;
        top: 0;
        z-index: 8;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 3px;
        margin: 16px -16px;
        padding: 8px 12px;
        border-block: 1px solid #dae6ec;
        background: rgba(255, 255, 255, .96);
        backdrop-filter: blur(8px);
    }

    .wizard-progress li {
        flex-direction: column;
        gap: 3px;
        min-width: 0;
        padding: 6px 2px;
        overflow: hidden;
        font-size: 10px;
        white-space: nowrap;
    }

    .wizard-progress li > span {
        width: 25px;
        height: 25px;
    }

    .wizard-progress:has(li:nth-child(3):last-child) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .wizard-panel {
        min-height: 0;
        padding: 18px 14px;
        border-radius: 14px;
    }

    .wizard-panel h2 {
        font-size: 20px;
    }

    .choice-section + .choice-section {
        margin-top: 26px;
    }

    .compact-modes,
    .wizard-summary {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .compact-modes .mode-card,
    .coverage-options .mode-card {
        box-sizing: border-box;
        min-height: 86px;
        padding: 15px;
        align-items: center;
    }

    .compact-modes .mode-card input {
        width: 22px;
        height: 22px;
    }

    .compact-modes .mode-card span {
        font-size: 14px;
        line-height: 1.45;
    }

    .compact-modes .mode-card strong {
        font-size: 16px;
    }

    .wizard-panel #wizard-weekdays {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 7px;
    }

    .wizard-panel #wizard-weekdays .weekday-check {
        min-height: 50px;
        padding: 7px 4px;
        font-size: 14px;
    }

    .template-shifts {
        margin-top: 18px;
    }

    .shift-card {
        padding: 14px;
    }

    .time-fields {
        gap: 9px;
    }

    .time-fields select,
    .field-stack select {
        height: 52px;
    }

    .check-control {
        min-height: 50px;
        padding: 12px;
    }

    .check-control input {
        width: 22px;
        height: 22px;
    }

    .calendar-heading {
        display: grid;
        gap: 8px;
    }

    .completion-count {
        justify-self: start;
    }

    .calendar-month {
        padding: 11px;
    }

    .month-navigation {
        grid-template-columns: 44px 1fr 44px;
        gap: 7px;
    }

    .month-navigation h3 {
        grid-column: 2;
        grid-row: auto;
        align-self: center;
        margin: 0;
        text-align: center;
        font-size: 17px;
    }

    .month-navigation button {
        position: relative;
        width: 44px;
        min-width: 44px;
        height: 44px;
        padding: 0;
        overflow: hidden;
        font-size: 0;
        white-space: nowrap;
    }

    .month-navigation button:first-child {
        grid-column: 1;
    }

    .month-navigation button:last-child {
        grid-column: 3;
    }

    .month-navigation button:first-child::after,
    .month-navigation button:last-child::after {
        display: grid;
        width: 44px;
        height: 44px;
        place-items: center;
        color: #075780;
        font-size: 24px;
    }

    .month-navigation button:first-child::after {
        content: "‹";
    }

    .month-navigation button:last-child::after {
        content: "›";
    }

    .calendar-weekdays,
    .calendar-blank {
        display: none;
    }

    .calendar-month-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 7px;
        margin-top: 10px;
    }

    .calendar-month.weeks-4 .calendar-day,
    .calendar-month.weeks-5 .calendar-day,
    .calendar-month.weeks-6 .calendar-day,
    .calendar-day {
        display: grid;
        grid-template-columns: minmax(108px, 42%) 1fr;
        min-height: 56px;
        padding: 10px 12px;
        align-items: center;
        gap: 10px;
        text-align: left;
    }

    .calendar-day-mobile-date {
        display: block;
        font-size: 14px;
        font-weight: 700;
        text-transform: capitalize;
    }

    .calendar-day-number {
        display: none;
    }

    .calendar-day small {
        font-size: 13px;
        line-height: 1.35;
        text-align: right;
    }

    .calendar-legend {
        gap: 8px 12px;
        font-size: 12px;
    }

    .day-editor {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        max-height: 88dvh;
        padding: 18px 16px calc(20px + env(safe-area-inset-bottom));
        border: 0;
        border-top: 1px solid #8fb8ca;
        border-radius: 22px 22px 0 0;
        transform: none;
    }

    .day-editor::before {
        content: "";
        display: block;
        width: 44px;
        height: 4px;
        margin: -8px auto 10px;
        border-radius: 999px;
        background: #b6cbd5;
    }

    .editor-heading {
        top: -18px;
        margin: -18px -16px 12px;
        padding: 12px 16px;
    }

    .editor-actions {
        position: sticky;
        bottom: calc(-20px - env(safe-area-inset-bottom));
        grid-template-columns: 1fr 1.4fr;
        margin: 18px -16px calc(-20px - env(safe-area-inset-bottom));
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        background: #fff;
    }

    .editor-actions button {
        min-width: 0;
        min-height: 52px;
    }

    .wizard-actions {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin: 0;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        border-width: 1px 0 0;
        border-radius: 0;
        box-shadow: 0 -8px 24px rgba(24, 58, 77, .08);
    }

    .wizard-actions > button {
        width: 100%;
        min-width: 0;
        min-height: 52px;
    }

    .wizard-actions:has(#wizard-back[hidden]) {
        grid-template-columns: 1fr;
    }

    .wizard-actions:has(#wizard-back[hidden]) #wizard-next,
    .wizard-actions:has(#wizard-back[hidden]) #wizard-submit {
        grid-column: 1;
    }

    .wizard-summary div {
        padding: 14px;
    }
}

@media (max-width: 370px) {
    .wizard-panel #wizard-weekdays {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .draft-status { display: none; }
    .settings-preview #settings-preview-content { grid-template-columns: 1fr; }
}

/* A complete month grid, like the admin calendar, without an inner scroll area. */
.calendar-panel, .compact-calendar, .calendar-month { min-width: 0; max-height: none; overflow: visible; }
.calendar-weekdays, .calendar-month-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar-day { min-width: 0; height: auto; overflow-wrap: anywhere; }
@media (max-width: 640px) {
    .calendar-month .calendar-weekdays { display: grid; }
    .calendar-month .calendar-blank { display: block; min-height: 60px; }
    .calendar-month .calendar-month-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
    .calendar-month .calendar-day { display: flex; flex-direction: column; min-height: 60px; padding: 5px 2px; gap: 3px; text-align: center; }
    .calendar-month .calendar-day-mobile-date { display: none; }
    .calendar-month .calendar-day-number { display: block; font-size: 13px; }
    .calendar-month .calendar-day small { font-size: 9px; line-height: 1.25; text-align: center; }
    .template-shifts { grid-template-columns: minmax(0, 1fr); }
    .template-shifts > .check-control { grid-column: 1; grid-row: 2; }
    .template-shifts > #base-second { grid-column: 1; grid-row: 3; }
    .wizard-sidebar .wizard-progress { position: static; border: 0; background: transparent; backdrop-filter: none; padding: 0; }
}

/* Public confirmation and recovery follow the existing cards and button styles. */
.schedule-confirm-dialog{width:min(460px,calc(100% - 32px));border:1px solid var(--border-color,#d9e3eb);border-radius:18px;padding:24px;color:var(--text-color,#19394e);background:var(--card-bg,#fff);box-shadow:0 20px 60px rgba(50,36,95,.2)}
.schedule-confirm-dialog::backdrop{background:rgba(20,30,45,.38);backdrop-filter:blur(3px)}
.schedule-confirm-dialog h2{font-size:20px;margin:0 0 12px}.schedule-confirm-dialog p{line-height:1.6}.schedule-confirm-actions{display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap;margin-top:20px}
.schedule-persistence-feedback{margin:16px 24px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}.schedule-persistence-feedback p{margin:0;flex-basis:100%}.schedule-persistence-feedback[hidden]{display:none}