/* Shared staff/customer schedule presentation. */
[data-booking-schedule-modes][hidden], [data-booking-schedule-modes]:not(:has([data-changemode="recurring"])) { display:none !important; }
.booking-schedule-card > .cb-card-body { container: booking-schedule / inline-size; }
.booking-standard-schedule-grid .booking-timing-segment { display:inline-flex; align-items:stretch; padding:.18rem; border:1px solid var(--bs-border-color,#dfe7f1); border-radius:.65rem; background:var(--cockpit-soft,#f5f7fc); }
.booking-standard-schedule-grid .booking-timing-choice { flex:1; min-width:5.6rem; min-height:2.45rem; padding:.5rem .8rem; border:0 !important; border-radius:.48rem !important; color:var(--bs-body-color,#3c4860) !important; background:transparent !important; font-weight:650; white-space:nowrap; }
.booking-standard-schedule-grid .booking-timing-choice.is-active { color:#fff !important; background:var(--cockpit-primary,#5865f2) !important; box-shadow:0 .25rem .7rem #5661f63d; }
.booking-standard-schedule-grid .booking-schedule-field { min-width:0; }
.booking-schedule-card .booking-picker-control { display:flex; flex-wrap:nowrap; height:2.875rem; background:var(--bs-body-bg,#fff); border:1px solid var(--bs-border-color,#d7dfea); }
.booking-schedule-card .booking-picker-control .form-control { flex:1 1 auto; width:1%; min-height:0; height:100%; border:0; border-radius:0 !important; }
.booking-schedule-card .booking-picker-trigger { display:flex; flex:0 0 2.65rem; align-items:center; justify-content:center; border:0; border-left:1px solid var(--bs-border-color,#d7dfea); }
.booking-schedule-card .booking-schedule-quick-action .btn { height:2.875rem; display:inline-flex; align-items:center; gap:.35rem; padding:.5rem .8rem; }
.booking-schedule-card #do_return.is-return-active { color:var(--bs-danger,#dc3545); border-color:var(--bs-danger,#dc3545); background:rgba(var(--bs-danger-rgb,220,53,69),.06); }
.booking-standard-schedule-grid [hidden] { display:none !important; }
.booking-picker-control {
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    border-radius: .58rem;
    background: var(--bs-body-bg);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.booking-picker-control:focus-within {
    border-color: rgba(105, 108, 255, .65);
    box-shadow: 0 0 0 .18rem rgba(105, 108, 255, .12);
}
.booking-picker-control .form-control {
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none !important;
    cursor: pointer;
    font-family: var(--bs-body-font-family, "IBM Plex Sans", sans-serif);
    font-size: .925rem;
    font-weight: 400;
    letter-spacing: normal;
}
.booking-picker-control .form-control:disabled { cursor: not-allowed; }
.booking-picker-trigger {
    justify-content: center;
    width: 2.65rem;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--bs-border-color);
    border-radius: 0;
    background: rgba(105, 108, 255, .08);
    color: var(--bs-primary);
    font-size: 1.05rem;
    transition: background-color .15s ease, color .15s ease;
}
.booking-time-control .booking-picker-trigger {
    background: rgba(113, 221, 55, .1);
    color: #4a9f21;
}
.booking-picker-trigger:hover,
.booking-picker-trigger:focus-visible {
    background: var(--bs-primary);
    color: #fff;
}
.booking-time-control .booking-picker-trigger:hover,
.booking-time-control .booking-picker-trigger:focus-visible {
    background: #5fba32;
    color: #fff;
}
.booking-picker-control:has(.form-control:disabled) .booking-picker-trigger {
    cursor: not-allowed;
    opacity: .55;
}

/* Preserve unavailable-slot logic in the legacy picker while modernising its UI. */
#ui-timepicker-div {
    z-index: 1095 !important;
    max-width: calc(100vw - 1rem);
    padding: .58rem;
    border: 1px solid rgba(113, 221, 55, .28);
    border-radius: .82rem;
    background: var(--bs-body-bg);
    box-shadow: 0 .75rem 2.25rem rgba(34, 48, 62, .2);
    color: var(--bs-body-color);
    font-family: var(--bs-body-font-family, "IBM Plex Sans", sans-serif);
}
#ui-timepicker-div .ui-timepicker-table {
    border: 0;
    background: transparent;
    color: inherit;
}
#ui-timepicker-div .ui-timepicker-table table { margin: .25rem 0 0; }
#ui-timepicker-div table.ui-timepicker { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
#ui-timepicker-div .ui-timepicker-hours,
#ui-timepicker-div .ui-timepicker-minutes {
    padding: .18rem;
    vertical-align: top;
}
#ui-timepicker-div .ui-timepicker-title {
    padding: .38rem .3rem;
    border: 0;
    border-radius: .48rem;
    background: rgba(113, 221, 55, .12);
    color: var(--bs-heading-color);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .01em;
}
#ui-timepicker-div .ui-timepicker-table td {
    width: auto;
    padding: .08rem;
}
#ui-timepicker-div .ui-timepicker-table td a,
#ui-timepicker-div .ui-timepicker-table td span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.05rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: .42rem;
    text-align: center;
}
#ui-timepicker-div .ui-timepicker-table td a {
    background: transparent;
    color: var(--bs-body-color);
    cursor: pointer;
    font-size: .875rem;
    font-weight: 500;
}
#ui-timepicker-div .ui-timepicker-table td a:hover,
#ui-timepicker-div .ui-timepicker-table td a:focus,
#ui-timepicker-div .ui-timepicker-table td a.ui-state-active {
    background: #5fba32;
    color: #fff;
    outline: 0;
}
#ui-timepicker-div .ui-timepicker-table td span {
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    opacity: .42;
}
#ui-timepicker-div .ui-timepicker-buttonpane {
    margin-top: .4rem;
    padding-top: .4rem;
    border-top: 1px solid var(--bs-border-color);
}
#ui-timepicker-div .ui-timepicker-buttonpane button {
    border: 1px solid var(--bs-border-color);
    border-radius: .45rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
}

.booking-schedule-card > .card-body { container: booking-schedule / inline-size; }
.booking-standard-schedule-grid {
    --booking-schedule-field-columns: minmax(12rem, 1fr) minmax(8rem, 16rem);
    display: grid;
    grid-template-columns: max-content var(--booking-schedule-field-columns) max-content;
    gap: .65rem;
    align-items: end;
}
.booking-standard-schedule-grid .booking-schedule-timing { grid-column: 1; grid-row: 1; }
.booking-standard-schedule-grid .booking-later-fields {
    display: grid;
    grid-column: 2 / 4;
    grid-row: 1;
    grid-template-columns: var(--booking-schedule-field-columns);
    gap: .65rem;
    align-items: end;
}
.booking-standard-schedule-grid .booking-later-fields[hidden] { display: none !important; }
.booking-standard-schedule-grid .booking-schedule-quick-action {
    grid-column: 4;
    grid-row: 1;
    align-self: end;
    justify-self: start;
}
.booking-standard-schedule-grid .booking-schedule-quick-action .btn { width: auto; min-height: 2.875rem; white-space: nowrap; }
.booking-standard-schedule-grid .booking-return-panel {
    grid-column: 2 / 4;
    grid-row: 2;
    margin: 0;
    padding: 0;
    border: 0;
}
.booking-standard-schedule-grid .booking-return-fields {
    display: grid;
    grid-template-columns: var(--booking-schedule-field-columns);
    gap: .65rem;
    align-items: end;
}
.booking-form-page #do_return.is-return-active,
.booking-form-page #do_return.is-return-active:hover,
.booking-form-page #do_return.is-return-active:focus {
    color: var(--bs-danger) !important;
    border-color: var(--bs-danger) !important;
    background: rgba(var(--bs-danger-rgb), .06) !important;
}
:is(body[data-bs-theme="dark"], body.dark, html[data-bs-theme="dark"] body) .page-content .booking-form-page #do_return.is-return-active,
:is(body[data-bs-theme="dark"], body.dark, html[data-bs-theme="dark"] body) .page-content .booking-form-page #do_return.is-return-active:hover,
:is(body[data-bs-theme="dark"], body.dark, html[data-bs-theme="dark"] body) .page-content .booking-form-page #do_return.is-return-active:focus {
    color: #ffafbd !important;
    border-color: #bb798a !important;
    background: rgba(var(--bs-danger-rgb), .13) !important;
}
@container booking-schedule (min-width: 48.001rem) {
    .booking-standard-schedule-grid:has(.booking-later-fields[hidden]) .booking-schedule-quick-action { grid-column: 2; }
}
@container booking-schedule (max-width: 48rem) {
    .booking-standard-schedule-grid {
        --booking-schedule-field-columns: minmax(0, 1.45fr) minmax(6.75rem, .75fr);
        grid-template-columns: minmax(0, 1fr) max-content;
    }
    .booking-standard-schedule-grid .booking-schedule-timing { grid-column: 1; grid-row: 1; justify-self: start; }
    .booking-standard-schedule-grid .booking-schedule-quick-action { grid-column: 2; grid-row: 1; justify-self: end; }
    .booking-standard-schedule-grid .booking-later-fields {
        grid-column: 1 / 3;
        grid-row: 2;
        grid-template-columns: var(--booking-schedule-field-columns);
    }
    .booking-standard-schedule-grid .booking-return-panel { grid-column: 1 / 3; grid-row: 3; }
    .booking-standard-schedule-grid .booking-return-fields {
        grid-template-columns: var(--booking-schedule-field-columns);
    }
}
@container booking-schedule (max-width: 28rem) {
    .booking-standard-schedule-grid .booking-schedule-timing { grid-column: 1 / 3; grid-row: 1; justify-self: stretch; }
    .booking-standard-schedule-grid .booking-schedule-quick-action { grid-column: 1 / 3; grid-row: 3; justify-self: start; }
    .booking-standard-schedule-grid .booking-return-panel { grid-column: 1 / 3; grid-row: 4; }
}