.header-day-text {
    font-size: 16px !important;
}

.b-timeaxis-cell {
    background-color: white;
}

.weekends-style {
    background-color: black !important;
    z-index: 1000 !important;
}

/* ========== Row Density Modes ========== */
/* ---------- Compact Density (44px) ---------- */
.density--compact .custom-scheduler--container,
.density--compact .custom-scheduler--housekeeping-container {
    padding: .2rem .4rem !important;
}

.custom-scheduler--wrapper--compact {
    flex-direction: row;
    align-items: center;
    gap: .5rem;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

    .custom-scheduler--wrapper--compact .custom--room-number--room-code {
        font-weight: 700;
        line-height: 1;
    }

    .custom-scheduler--wrapper--compact .custom--room-type {
        flex: 1 1 auto;
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.2;
    }

.scheduler-quantity--compact {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    font-size: .75rem;
    font-weight: 600;
}

    .scheduler-quantity--compact .fa-user {
        font-size: .6rem;
    }

.density--compact .custom-scheduler--housekeeping-wrapper {
    padding: .12rem .1rem;
    gap: .3rem;
}

.density--compact .housekeeping-title {
    font-size: .68rem;
}

.density--compact .reservation-pill__inner {
    min-height: 24px;
    padding: 2px 12px 2px 8px;
    gap: 6px;
}

.density--compact .b-sch-event.reservation-pill .reservation-pill__title {
    font-size: 12px;
}

.density--compact .reservation-pill__meta {
    display: none;
}

/* Title row: guest name + (compact-only) meal plan badge on the same line */
.reservation-pill__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
    width: 100%;
}

    .reservation-pill__title-row .reservation-pill__title {
        min-width: 0;
        flex: 1 1 auto;
    }

.reservation-pill__mealplan-top {
    display: none;
    flex: 0 0 auto;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.5;
    padding: 0 5px;
    border-radius: 2px;
    white-space: nowrap;
}

/* Only surface the inline badge in compact density, where the meta row (and
   its own meal-plan badge) is hidden entirely for space. */
.density--compact .reservation-pill__mealplan-top {
    display: inline-block;
}

.density--compact .reservation-pill__flag {
    width: 16px;
    height: 16px;
    min-width: 16px;
}

.density--compact .b-sch-resource-time-range {
    height: 25px !important;
    transform: translateY(3px);
}

/* ---------- Comfortable Density (84px) ---------- */
.density--comfortable .b-sch-event.reservation-pill .reservation-pill__title {
    font-size: 14px;
}

.density--comfortable .reservation-pill__inner {
    min-height: 44px;
    padding: 8px 16px 8px 12px;
}

.density--comfortable .reservation-pill__flag {
    width: 24px;
    height: 24px;
    min-width: 24px;
}

.density--comfortable .custom--room-number--room-code {
    font-size: 1.3rem;
}

.density--comfortable .b-sch-resource-time-range {
    height: 74px !important;
    transform: translateY(5px);
}

.b-time-ranges-header-canvas .b-sch-time-range {
    background: none;
    pointer-events: none !important;
}

.b-time-ranges-body-canvas .b-sch-time-range.weekend-range {
    background: color-mix(in hsl, var(--ep-primary) 20%, #fff 15%) !important;
}

.b-time-ranges-body-canvas .b-sch-time-range.current-day-range {
    background: color-mix(in hsl, oklch(76.5% 0.177 163.223) 22%, #fff 18%) !important;
}

html.dark-mode .b-time-ranges-body-canvas .b-sch-time-range.current-day-range {
    background: color-mix(in hsl, oklch(76.5% 0.177 163.223) 22%, #fff 18%) !important;
}

div[data-id*="88888"] {
    background: color-mix(in hsl, var(--ep-primary) 20%, #fff 15%) !important;
    transform: translateY(52px);
}


.header-day-month-text {
    font-size: 14px !important;
    background-color: white !important;
}

/* Custom Styling for Presentational Purpose */
#b-schedulerpro-1 {
    display: flex;
}

.custom--month {
    border: 1px solid var(--ep-primary) !important;
    color: var(--ep-primary) !important;
    font-weight: 600 !important;
    border-radius: 3px;
}

html.dark-mode .custom--month {
    color: var(--textStrong) !important;
    border: 1px solid var(--textStrong) !important;
}

button:has(.custom-icon--scheduler) {
    background: var(--ep-primary);
    color: #fff;
    border-radius: 3px;
}

.custom--date-picker .b-icon-calendar {
    color: var(--ep-primary) !important;
}

.b-numberfield:not(.b-disabled):hover .b-field-inner, .b-textareafield:not(.b-disabled):hover .b-field-inner, .b-textfield:not(.b-disabled):hover .b-field-inner {
    border-color: var(--ep-primary) !important;
    color: var(--ep-primary) !important;
}

.custom--date-picker .b-datefield.b-open .b-fieldtrigger {
    color: var(--ep-primary) !important;
}

.b-grid-cell.test {
    font-weight: 600;
}


.b-sch-header-timeaxis-cell.header-day-month-text {
    font-weight: 500;
}

.b-widget.b-container.b-panel.b-gridbase.b-timelinebase.b-lazyloadview.b-schedulerbase {
}

.b-sch-event.b-sch-event-resizable-true.b-has-content {
    box-shadow: 2px 2px 6px rgba(0,0,0,0.4);
    border-radius: 5px;
    font-weight: 700;
}

.search-match-control {
    background: var(--ep-primary);
    color: #fff;
    font-weight: 700;
}

.b-sch-event.roomplan-search-match-focused {
    outline: 2px solid var(--ep-primary);
}

.reservation-object .b-sch-event-content {
    transition: all .3s ease;
    align-items: flex-start;
    justify-content: center;
}

    .reservation-object .b-sch-event-content:hover {
        transform: scale(1.05)
    }


.b-grid-row.b-selected {
    background: color-mix(in hsl, var(--ep-primary) 7%, #aaa 7%) !important;
}

.b-grid-row:hover .b-grid-cell {
    background: #E4E3EE !important;
}

.b-grid-header-container .b-sch-timeaxiscolumn .b-sch-header-timeaxis-cell:hover {
    background: var(--ep-secondary) !important;
}

.b-grid-header {
    min-height: 90px;
}

.availability .b-grid-header {
    min-height: 135px;
}

.custom-scheduler--container,
.custom-scheduler--housekeeping-container {
    width: 100%;
    background: var(--panelBG);
    padding: .5rem !important
}

.custom-scheduler--wrapper {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: flex-start;
}

    .custom-scheduler--wrapper .custom-room--container {
        display: flex;
        flex-direction: column;
        gap: .25rem;
        padding-left: 5px;
    }

        .custom-scheduler--wrapper .custom-room--container .custom--room-number {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.8rem;
        }

.custom--room-number--room-code {
    font-size: 1.2rem;
    font-weight: 700;
}

.custom-scheduler--wrapper .custom-room--container .custom--room-type {
    font-size: 1rem;
    line-height: 1.2;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.scheduler-quantity--container {
    display: flex;
    align-items: center;
    gap: 1rem;
}

    .scheduler-quantity--container .scheduler-custom-icon {
        font-size: .8rem;
    }

    .scheduler-quantity--container .scheduler-quantity {
        font-size: 1rem;
    }

.arrival--icon {
    font-size: .8rem;
    color: green !important;
}

.departure--icon {
    font-size: .8rem;
    color: red !important;
}

.custom-scheduler--housekeeping-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    margin: 0 auto;
    text-align: center;
    padding: .3rem .15rem;
    gap: .5rem;
    border-radius: 3px;
}


    .custom-scheduler--housekeeping-wrapper .housekeeping-title {
        line-height: 1;
        font-size: .8rem;
        border-radius: 50px;
        font-weight: 600;
        width: 100%;
        overflow: clip;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

.non-allocated-reservation {
    box-shadow: none !important;
    background: transparent !important;
    color: var(--ep-primary) !important;
    font-weight: 600;
    font-size: 1.4rem !important;
    width: 100%;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

    .non-allocated-reservation .b-sch-event-content {
        box-shadow: none !important;
        border: 1px dashed var(--ep-primary) !important;
        background: color-mix(in hsl, var(--ep-primary)20%, #fff 9%) !important;
        color: var(--ep-primary) !important;
        font-weight: 600;
        font-size: 1.05rem !important;
        width: 80%;
        margin: 0 auto;
        padding-inline: 1.25rem;
        height: 70%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 5px;
    }

html.dark-mode .non-allocated-reservation .b-sch-event-content {
    box-shadow: none !important;
    border: 1px dashed var(--textStrong) !important;
    background: color-mix(in hsl, var(--ep-primary)20%, #fff 9%) !important;
    color: var(--textStrong) !important;
    border-radius: 5px;
}


html.dark-mode .non-allocated-reservation {
    box-shadow: none !important;
    color: #fff !important;
    font-weight: 600;
    font-size: 1.4rem !important;
}

.b-sch-event-wrap:has(.non-allocated-reservation) {
    padding: 2px;
}

.custom-scheduler--action {
    padding: 6px 12px;
    text-align: center;
    border-radius: 3px;
    background: var(--bodyBG) !important;
    background: var(--ep-secondary) !important;
    background: #212121 !important;
    color: #fff;
    cursor: pointer;
    transition: all .2s ease !important;
}

html.dark-mode .custom-scheduler--action {
    background: #fff !important;
    color: #111;
}

.custom--tooltip__on-hover {
    display: flex !important;
    flex-direction: column;
    gap: .15rem;
    z-index: 10000 !important;
    transform: translateY(8px);
}

    .custom--tooltip__on-hover dt {
        gap: 1.5rem;
        display: flex;
        padding: 2px 8px;
        justify-content: space-between;
        border-radius: 2px;
    }

    .custom--tooltip__on-hover span:nth-of-type(1) {
        font-weight: 400 !important;
    }

.b-grid-row.b-hover,
.b-gridbase:not(.b-moving-splitter) .b-grid-subgrid:not(.b-hide-row-hover) .b-grid-row:not(.b-group-row).b-hover {
    background: color-mix(in hsl, var(--ep-primary) 32%, #fff 9%) !important;
}

.tooltip-date--container {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.date-label {
    font-size: 1rem;
    font-weight: 400;
    display: flex;
    gap: .25rem;
    align-items: center;
}

.date-value {
    font-size: 1rem;
    font-weight: 700;
}


/* Popup Styling  */
.reservation-card * {
    margin: 0;
}

.reservation-card {
    border-radius: 5px;
    display: grid;
    color: var(--textDefault);
}


.reservation-card__header {
    background: #fff;
    display: flex;
    gap: 2rem;
    justify-content: space-between;
    padding: 1rem;
    border-radius: 3px;
}

.reservation-card--main-title {
    padding: 1rem 0;
    font-size: 1.25rem;
    color: var(--textStrong);
}

.reservation-card__guest-title {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: #6b7280;
    margin-bottom: 0.25rem;
}

.reservation-card__guest-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--textStrong);
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reservation-card__guest-contact {
    color: #6b7280;
    font-size: 0.9rem;
}

.reservation-card__tabs {
    display: flex;
    gap: 1rem;
    padding: 1rem 0 0 0;
}

.reservation-card__tab-button {
    border: none;
    background: none;
    padding: 0.5rem 2.4rem;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
}

    .reservation-card__tab-button[aria-selected="true"] {
        color: var(--textStrong);
        background: #fff;
        border: 1px solid #dadada;
        border-bottom: none;
        font-weight: 600;
        transform: translateY(1px);
    }


.reservation-card__itinerary--content {
    border: 1px solid #dadada;
    background: #fff;
    padding: 1rem;
}

.reservation-card__itinerary {
    padding: 1rem 0;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 0.75rem;
}

.reservation-card__itinerary-item {
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: .25rem;
}

    .reservation-card__itinerary-item .label {
        font-size: 0.7rem;
        letter-spacing: 0.03em;
        color: #6b7280;
        text-transform: uppercase;
        margin: 0;
    }

    .reservation-card__itinerary-item .nights,
    .reservation-card__itinerary-item .departure-date,
    .reservation-card__itinerary-item .arrival-date {
        font-size: .85rem;
        font-weight: 600;
        padding: 1px 4px;
        border-radius: 2px;
    }

    .reservation-card__itinerary-item .arrival-date {
        background: #409a5740;
        color: #49ad62;
        display: flex;
    }

    .reservation-card__itinerary-item .departure-date {
        background: #ef4e4e40;
        color: #e75959;
        display: flex;
    }

.reservation-card__details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1.25rem;
}

.reservation-card__details-grid--item {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.reservation-card__detail-label {
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    color: #6b7280;
    text-transform: uppercase;
    margin: 0;
}

.reservation-card__detail-value {
    font-size: 1rem;
    line-height: 1;
    margin: 0;
    text-transform: capitalize;
    font-weight: 500;
    color: var(--textStrong);
}

.reservation-card__notes {
    border: 1px dashed #d1d5db;
    border-radius: 3px;
    margin: 1rem 0;
    padding: .5rem;
    background: #fff;
    min-height: 50px;
    max-height: 120px;
    overflow-y: scroll;
}

.reservation-card__balances {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .25rem;
    justify-content: space-between;
    padding: 1rem 0;
}

.reservation-card__btn {
    border: none;
    border-radius: 3px;
    padding: 0.5rem .75rem;
    font-weight: 600;
    text-transform: capitalize;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    align-items: center;
    font-size: .8rem;
    text-align: center;
}

    .reservation-card__btn span:nth-of-type(2) {
        font-size: 1.2rem;
        font-weight: 600;
    }

    .reservation-card__btn.reservation-card__btn--guest-balance {
        background: #4FBD8C30;
        color: #333333;
    }

    .reservation-card__btn.reservation-card__btn--company-balance {
        background: #FFA20030;
        color: #333333;
    }

.reservation-card__btn--travel-agency-balance {
    background: #006D7730;
    color: #333333;
}


.custom-grid-non-allocated-item .b-sch-event {
    width: 100%;
    height: 200px !important;
}

.custom-grid-non-allocated-item.b-sch-event-wrap {
    width: 100%;
    display: flex !important;
    height: 100%;
    justify-content: flex-start;
}


.b-grid-row:has(.custom--non-allocated__item) {
    height: 200px !important;
}

.custom--non-allocated__item--status {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
}

    .custom--non-allocated__item--status span:nth-of-type(1) {
        padding: .25rem 0;
        margin-top: 5px;
    }

    .custom--non-allocated__item--status span:nth-of-type(2) {
        background: var(--ep-primary);
        border-radius: 2px;
        padding: .25rem .5rem;
        margin-top: 5px;
    }

.custom--non-allocated__item--room-type {
    display: flex;
    flex-direction: column;
}

.custom--non-allocated__item--date {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    font-weight: 600;
}

    .custom--non-allocated__item--date span:nth-of-type(1) {
        background: #93ded350;
        color: #fff;
    }

    .custom--non-allocated__item--date span:nth-of-type(2) {
        background: #ee929260;
        color: #fff;
    }

.custom--non-allocated__item--name {
    font-size: 1rem;
    letter-spacing: 0.03em;
}

.b-sch-event-content {
    display: flex;
    flex-direction: column;
}

.roomplan-container {
    height: 100% !important;
    width: 100%;
    display: flex;
}

.roomplan-reservation-overlay,
.roomplan-filters-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    pointer-events: auto;
    background: transparent;
}

.roomplan-reservation-panel,
.roomplan-filters-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(520px, 100vw);
    height: 100%;
    overflow: hidden;
    pointer-events: auto;
    background: var(--mainBG, #fff);
    box-shadow: -8px 0 24px rgba(15, 23, 42, 0.18);
    display: flex;
    flex-direction: column;
}

.roomplan-reservation-panel > .reservation-drawer-container,
.roomplan-filters-panel > .roomplan-filters-content {
    flex: 1 1 auto;
    min-height: 0;
}

.roomplan-filters-panel {
    width: min(400px, 100vw);
}

.roomplan-filters-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

.roomplan-local-drawer-header {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 40px;
    margin-bottom: 16px;
    padding: 0 60px 0 20px;
    border-bottom: 1px solid color-mix(in srgb, var(--ep-primary) 25%, transparent);
}

.roomplan-local-drawer-header h2 {
    margin: 0;
    color: var(--textStrong);
    font-size: 18px;
    font-weight: 700;
}

.roomplan-local-drawer-header .roomplan-reservation-close {
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    margin: 0;
}

.roomplan-reservation-close {
    position: absolute;
    top: 12px;
    right: 16px;
    z-index: 1;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--textStrong);
    cursor: pointer;
}

.roomplan-reservation-close:hover {
    background: color-mix(in hsl, var(--ep-primary) 15%, transparent);
    color: var(--ep-primary);
}

.roomplan-reservation-panel .reservation-drawer-container {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--ep-primary) 55%, transparent) transparent;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
}

.roomplan-reservation-panel .reservation-drawer-container::-webkit-scrollbar {
    width: 10px;
}

.roomplan-reservation-panel .reservation-drawer-container::-webkit-scrollbar-track {
    background: transparent;
}

.roomplan-reservation-panel .reservation-drawer-container::-webkit-scrollbar-thumb {
    min-height: 32px;
    border: 3px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
    background-color: color-mix(in srgb, var(--ep-primary) 55%, transparent);
}

.roomplan-reservation-panel .reservation-drawer-container::-webkit-scrollbar-thumb:hover {
    background-color: var(--ep-primary);
}

html.dark-mode .roomplan-reservation-panel,
html.dark-mode .roomplan-filters-panel {
    background: var(--mainBG, #1f2937);
}

.reservation-card__detail-value-list {
    margin: 0;
    padding-left: 1.2rem;
    list-style-type: disc;
}

    .reservation-card__detail-value-list .reservation-card__detail-value {
        margin: 0;
    }

.roomplan-container > .b-container {
    height: 100%;
    width: 100%;
    display: flex;
}

/*Experimental CSS for scheduler*/

.b-sch-event-wrap:has(.non-allocated-reservation) div {
    font-size: 1.2rem;
    border-radius: 7px;
    /*   right:4px;*/
    bottom: 6px;
    transform: scale(.9);
    display: flex;
    align-items: center;
    justify-content: center;
}

.b-box-center.b-toolbar-content {
    gap: .15rem !important;
}

    .b-box-center.b-toolbar-content > button {
        border-radius: 3px !important;
    }

html.dark-mode .b-vbox.b-box-center.b-panel-body-wrap.b-scheduler-pro-body-wrap {
    background: var(--sidebarBG);
}


html.dark-mode .b-box-center.b-toolbar-content.b-content-element.b-box-container.b-hbox.b-overflow {
    /*    background: var(--ep-primary) !important;*/
    color: var(--textStrong) !important;
}

.b-sch-header-row.b-sch-header-row-0.b-sch-header-row-main.b-sticky-header {
    background: var(--ep-primary);
}

.custom-scheduler--container {
    /*    border-top: 1px dashed var(--ep-secondary) !important;*/
}

html.dark-mode .custom-scheduler--container {
    border-top: 1px dashed #fafafa60 !important;
}

    .custom-scheduler--container:has(.custom-scheduler--action),
    html.dark-mode .custom-scheduler--container:has(.custom-scheduler--action) {
        border-top: 1px dashed transparent !important;
    }

.b-grid-row:has(.custom-scheduler--container):hover .custom-scheduler--container {
    background: var(--ep-secondary) !important;
    color: #fff !important;
}

.b-hover .custom-scheduler--container {
    background: color-mix(in hsl, var(--ep-secondary) 95%, #000 20%) !important;
    background: var(--ep-primary) !important;
    color: #fff;
}

.b-grid-row.b-hover {
    background: var(--ep-primary) !important;
}

/*.b-grid-row:hover .b-grid-cell{
    background: var(--ep-secondary) !important;
}*/

.b-grid-row:hover .custom-scheduler--container {
    background: var(--ep-secondary) !important;
}

html.dark-mode .custom-scheduler--housekeeping-container {
    color: #fff !important;
}

.custom-scheduler--housekeeping-container {
    color: var(--textStrong);
}

.b-grid-cell.b-template-cell:has(.custom--event-drag__container) {
    border-left: 4px solid var(--ep-primary);
    border-top: 1px dashed var(--ep-primary);
    margin-block: 0px;
    cursor: grab;
}

.custom--event-drag__container {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.custom--event-drag__container--primary-guest {
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .5rem;
}

    .custom--event-drag__container--primary-guest .fa-user {
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(37, 99, 235, 0.08);
        color: #2563eb;
        font-size: 13px;
    }


.custom--event-drag__container--start-date {
    font-size: .8rem;
    transform: translateX(3px);
    display: flex;
    align-items: center;
    gap: .75rem;
}

button[data-allocate-btn] {
    width: 44px;
    height: 44px;
    border: 1px solid transparent;
    border-radius: 50%;
    background: #fff;
    color: #2563eb;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    transition: all 0.25s ease;
}

html.dark-mode button[data-allocate-btn] {
    border: 1px solid #fff;
    background: transparent;
    color: #fff;
}

button[data-allocate-btn]:hover {
    transform: scale(1.04);
    background: var(--ep-primary);
    color: #fff;
    box-shadow: 0 12px 30px rgba(37, 99, 235, 0.35);
}


.custom--event-drag__container--date-container {
    width: fit-content;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.15);
    color: #2563eb;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1px;
}

html.dark-mode .custom--event-drag__container--date-container {
    width: fit-content;
    padding: 4px 10px;
    border-radius: 999px;
    background: #ffffff10;
    border: 1px solid rgba(37, 99, 235, 0.15);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
}


.meal-plan--name {
    padding: 2px 4px;
    border-radius: 2px;
    color: #fff;
}


.total-pax {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 2px 4px;
    border-radius: 2px;
    /*    background: #eef2ff;*/
    border: 1px solid #eef2ff;
    font-weight: 600;
    color: var(--textDefault);
}



.b-grid-row:hover .b-grid-cell,
.b-grid-row:active .b-grid-cell {
    background: color-mix(in hsl, var(--ep-primary) 35%, #fff 90%) !important;
}

.b-grid-row:hover .custom-scheduler--container {
    background: color-mix(in hsl, var(--ep-primary) 95%, #fff 20%) !important;
}

.b-grid-row:hover .custom-scheduler--housekeeping-container {
    background: color-mix(in hsl, var(--ep-primary) 5%, #fff 80%) !important;
}

html.dark-mode .b-grid-row:hover .custom-scheduler--housekeeping-container {
    background: color-mix(in hsl, var(--ep-primary) 20%, #000 60%) !important;
}



.b-grid-row:hover .b-grid-cell {
    background: color-mix(in hsl, var(--ep-primary) 15%, #fff 80%) !important;
}

html.dark-mode .b-grid-row:hover .b-grid-cell {
    background: color-mix(in hsl, var(--ep-primary) 25%, #000 60%) !important;
}




.custom--event-drag__container--primary-guest span:first-child {
    color: var(--ep-primary);
    font-size: 1.05rem;
}

.custom-scheduler--wrapper__in-out--container {
    display: flex;
    gap: 2px;
}

.custom-scheduler--wrapper__in,
.custom-scheduler--wrapper__out {
    font-size: .7rem;
    padding: 2px 4px;
    font-weight: 600;
    border-radius: 3px;
    color: #fff;
}

.custom-scheduler--wrapper__in {
    background: #00bd7d;
}

.custom-scheduler--wrapper__out {
    background: #F4656C;
}

.reservation-card__detail-value-list .reservation-card__detail-value {
    margin: 0;
}

.b-grid-body-container::-webkit-scrollbar {
    background: var(--ep-primary);
    background: #fff;
}


html.dark-mode .b-grid-body-container::-webkit-scrollbar {
    background: var(--bodyBG);
    background: var(--mainBG);
}

.b-grid-body-container::-webkit-scrollbar-thumb {
    background: #fff;
    width: 2px !important;
}

.b-grid-body-container::-webkit-scrollbar {
    width: 12px;
}

.b-grid-body-container::-webkit-scrollbar-thumb {
    background: var(--ep-primary);
    border-radius: 10px;
    border: 3px solid #fff;
    cursor: grab;
}

html.dark-mode .b-grid-body-container::-webkit-scrollbar-thumb {
    background: var(--ep-primary);
    border: 3px solid var(--mainBG);
    cursor: grab;
}


.b-sch-resource-time-range {
    --stripe-size: 55px;
    --stripe-angle: -45deg;
    transition: outline 0.2s ease, border-radius 0.2s ease;
}

.b-sch-resource-time-range {
    --stripe-size: 15px;
    --stripe-angle: -45deg;
    --stripe-color: 0, 0, 0;
    --stripe-opacity-strong: 0.12;
    --stripe-opacity-soft: 0.04;
    transition: all .3s ease;
    border-radius: 5px;
    transform: translateY(4px);
    height: 53px !important;
}


    .b-sch-resource-time-range .b-sch-event-content {
        font-weight: bold;
    }

    .b-sch-resource-time-range.out-of-order-range {
        --stripe-color: 220, 38, 38;
        background: repeating-linear-gradient( var(--stripe-angle), rgba(var(--stripe-color), 0.15) 0, rgba(var(--stripe-color), 0.15) var(--stripe-size), rgba(var(--stripe-color), 0.05) var(--stripe-size), rgba(var(--stripe-color), 0.05) calc(var(--stripe-size) * 2) ) !important;
        color: #991b1b;
        border: 1px solid rgba(220, 38, 38, 0.4);
    }

    .b-sch-resource-time-range.out-of-order-range {
        --stripe-color: 220, 38, 38;
        background: repeating-linear-gradient( var(--stripe-angle), rgba(var(--stripe-color), 0.15) 0, rgba(var(--stripe-color), 0.15) var(--stripe-size), rgba(var(--stripe-color), 0.05) var(--stripe-size), rgba(var(--stripe-color), 0.05) calc(var(--stripe-size) * 2) ) !important;
        color: #991b1b;
        border: 1px solid rgba(220, 38, 38, 0.4);
    }

        .b-sch-resource-time-range.out-of-order-range:hover {
            border: 1px dashed rgba(220, 38, 38, 1);
        }

    .b-sch-resource-time-range.out-of-service-range {
        --stripe-color: 245, 158, 11;
        background: repeating-linear-gradient( var(--stripe-angle), rgba(var(--stripe-color), 0.15) 0, rgba(var(--stripe-color), 0.15) var(--stripe-size), rgba(var(--stripe-color), 0.05) var(--stripe-size), rgba(var(--stripe-color), 0.05) calc(var(--stripe-size) * 2) ) !important;
        color: #b45309;
        border: 1px solid rgba(245, 158, 11, 0.4);
    }

        .b-sch-resource-time-range.out-of-service-range:hover {
            border: 1px dashed rgba(245, 158, 11, 1);
        }


    .b-sch-resource-time-range.allocated-range {
        --stripe-color: 59, 130, 246;
        background: repeating-linear-gradient( var(--stripe-angle), rgba(var(--stripe-color), 0.15) 0, rgba(var(--stripe-color), 0.15) var(--stripe-size), rgba(var(--stripe-color), 0.05) var(--stripe-size), rgba(var(--stripe-color), 0.05) calc(var(--stripe-size) * 2) ) !important;
        background-color: rgba(59, 130, 246, 0.08);
        color: #1d4ed8;
        border: 1px solid rgba(59, 130, 246, 0.4);
    }

        .b-sch-resource-time-range.allocated-range:hover {
            border: 1px dashed #1d4ed8;
        }

html.dark-mode .b-sch-resource-time-range.out-of-order-range,
html.dark-mode .b-sch-resource-time-range.out-of-service-range,
html.dark-mode .b-sch-resource-time-range.allocated-range {
    color: #ffffff95;
}

.custom--btn-action * {
    transition: all .3s;
}

.custom--btn-action button {
    width: 100%;
    display: flex;
    padding-block: 22px;
    padding-inline: 6px;
    justify-content: flex-start;
    background: transparent;
    color: var(--textStrong);
    font-weight: 600;
    border: 1px solid #aaaaaa80;
}

html.dark-mode .custom--btn-action button {
    border: 1px solid #dddddd60;
}



.custom--btn-action button .k-icon.k-font-icon {
    color: var(--ep-primary);
    width: 36px;
    height: 36px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    color:#fff;
}


.ep-layout.flex-container.direction-column.flex-item-1:has(.custom--btn-action button) {
    gap: .25rem
}



/*Modernized Scheduler*/

.reservation-pill.b-sch-event,
.reservation-object.b-sch-event {
    border: none;
    border-radius: 5px;
    overflow: hidden !important;
    box-shadow: 2px 2px 4px rgba(0,0,0,.22);
}

.reservation-pill__inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    min-height: 34px;
    padding: 6px 14px 6px 10px;
    overflow: hidden;
    width: 100%;
}


    .reservation-pill__inner::after {
        content: '';
        position: absolute;
        top: 50%;
        right: -10px;
        width: 20px;
        height: 20px;
        background: inherit;
        transform: translateY(-50%) rotate(45deg);
        border-radius: 4px;
    }


.reservation-pill__flag {
    margin: 0;
    width: 20px;
    height: 20px;
    min-width: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0,0,0,.12);
    font-size: 11px;
    overflow: hidden;
}


    .reservation-pill__flag img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: left top;
    }

.reservation-pill__body {
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.15;
    overflow: hidden;
}

.b-sch-event.reservation-pill .reservation-pill__title {
    display: block;
    color: var(--textStrong);
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
    font-weight: 700;
}


.reservation-pill__compact {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: inherit;
}

.reservation-pill--phantom .reservation-pill__inner {
    background: rgba(199, 216, 238, .9);
}


.non-allocated-reservation .reservation-pill__single {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-weight: 700;
}

.b-sch-event.reservation-pill.reservation-pill--nano .reservation-pill__inner {
    justify-content: center;
    align-items: center;
    padding: 0;
}

.reservation-pill__circle {
    min-width: 28px;
    width: 28px;
    height: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--textStrong);
    font-size: 11px;
    font-weight: 700;
    gap: 0;
}

.pax-analysis__nano {
    display: flex;
    align-items: center !important;
    gap: .1rem;
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    padding: 2px;
    border-radius: 2px;
    color: var(--textDefault);
}

    .pax-analysis__nano .fa-regular.fa-user {
        line-height: 1;
        font-size: 8px;
    }


.pax-analysis__initials {
    display: inline-block;
    line-height: 1;
}

.b-sch-event.reservation-pill {
    min-width: 48px !important;
}

    .b-sch-event.reservation-pill.reservation-pill--nano .reservation-pill__initials {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 700;
        line-height: 1;
        text-align: center;
        letter-spacing: 0;
        margin: 0;
        padding: 0;
    }

    .b-sch-event.reservation-pill.reservation-pill--ultraNano .reservation-pill__inner {
        justify-content: center;
        align-items: center;
        padding: 0;
    }

    .b-sch-event.reservation-pill.reservation-pill--ultraNano .reservation-pill__initials {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0;
        text-align: center;
        margin: 0;
        padding: 0;
    }

    .b-sch-event.reservation-pill.reservation-pill--compact .reservation-pill__inner {
        gap: 0;
        padding: 6px 8px;
    }



/*Custom Date Container*/

.b-sch-header-row.b-sch-header-row-0.b-sch-header-row-main.b-sticky-header {
    background: transparent !important;
    padding: 0 !important;
    height: 27px !important;
}

.b-horizontal-time-axis {
    display: grid !important;
    grid-template-rows: auto 1fr;
}

.availability .b-horizontal-time-axis {
    grid-template-rows: auto 1fr 0.3fr 0.3fr 0.33fr;
}

.b-sch-header-time-axis-cell.b-align-start {
    z-index: 100 !important;
    background: transparent !important;
    color: var(--textStrong) !important;
}

    .b-sch-header-time-axis-cell.b-align-start .b-sch-header-text {
        font-weight: 700;
        color: var(--ep-primary) !important;
    }

html.dark-mode .b-sch-header-time-axis-cell.b-align-start .b-sch-header-text {
    color: var(--textStrong) !important;
}

.b-sch-header-row.b-sch-header-row-1 {
    height: 100%;
    overflow: visible !important;
}

.scheduler--custom-date__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    width: 95%;
    height: 90%;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    padding: .45rem;
    border-radius: 5px;
    background: var(--panelBG) !important;
    position: fixed;
    z-index: 100000000 !important;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--panelBG) !important;
    border: 1px solid var(--ep-primary);
    color: var(--textStrong) !important;
}

html.dark-mode .scheduler--custom-date__container {
    border: 1px solid #ffffff80;
}



    .scheduler--custom-date__container[data-set-day='Sat'],
    .scheduler--custom-date__container[data-set-day='Sun'],
    html.dark-mode .scheduler--custom-date__container[data-set-day='Sat'],
    html.dark-mode .scheduler--custom-date__container[data-set-day='Sun'] {
        border: 1px solid var(--ep-secondary) !important;
        background: var(--ep-primary) !important;
        color: #fafafa !important;
    }


.scheduler--custom-date__container.is-active {
    border: 1px solid #005f5a;
    background: #009689 !important;
    color: #fafafa !important;
}

html.dark-mode .scheduler--custom-date__container.is-active {
    border: 1px solid #009689;
    background: #005f5a !important;
    color: #fafafa !important;
}

.scheduler--custom-date__container * {
    line-height: 1;
}

.scheduler--custom-date__container .day {
}

.scheduler--custom-date__container .day-date {
    font-size: 1.8rem !important;
    font-weight: 700;
    line-height: 1;
}

.font-large .scheduler--custom-date__container .day-date {
    font-size: 1.55rem !important;
    line-height: 1.1;
}


.scheduler--custom-date__container .month {
    font-weight: 600;
    /*    color: var(--ep-primary);*/
}

html.dark-mode .scheduler--custom-date__container .month {
    color: var(--textStrong);
}



/* Custom reservation styling */

#b-schedulerpro-1 {
    width: 100% !important;
}

.b-sch-header-row.b-sch-header-row-0.b-sch-header-row-main {
    z-index: 100000000 !important;
}

.reservation-pill__meta {
    padding-block: 3px;
    font-size: 11px;
    color: var(--textDefault);
    font-weight: 400;
    opacity: .85;
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.reservation--source-container {
    width: 13px;
    margin-right: 5px;
}

.custom--source__img {
    width: 100%;
    height: 100%;
}

.pax--full .fa-regular.fa-user {
    font-size: .7rem !important;
}


.source-name--full,
.pax--full {
    margin-right: .75rem;
}


.booking-card__meal-plan__container .reservation--meal-plan {
    color: #fff;
    padding: 0px 6px;
    font-weight: 600;
    border-radius: 2px;
}


.pax--full .fa-solid.fa-user,
.pax--full .fa-solid.fa-child {
    font-size: .65rem !important;
}

.pax--full {
    gap: 0rem;
    display: flex;
    align-items: center;
    font-weight: 700;
}


.date--full {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

    .date--full .fa-regular.fa-calendar {
        color: var(--textDefault);
    }


.start-date--full {
    background: #93DED315;
    color: #40C4B0;
    font-weight: 700;
    padding: 1px 2px;
    border-radius: 2px;
}

.end-date--full {
    background: #EE929215;
    color: #E76565;
    font-weight: 700;
    border-radius: 2px;
    padding: 1px 2px;
}





/*Custom tooltip*/

.booking-card {
    --bg: #f4f4f7;
    --card-bg: rgba(255, 255, 255, 0.82);
    --text-dark: #13154b;
    --text-light: #7b7da8;
    --primary: #6b4eff;
    --primary-soft: #f1ebff;
    --success: #25b39e;
    --success-soft: #e9faf7;
    --pink: #e84c9a;
    --pink-soft: #ffe9f4;
    --border: rgba(90, 96, 140, 0.12);
    position: relative;
    overflow: visible;
    height: auto;
    width: 100%;
}

.booking-card__header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.booking-card__name--container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.booking-card__guest-name {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    color: var(--textStrong);
    width: 205px;
    text-overflow: ellipsis;
    overflow: clip;
    white-space: nowrap;
}

.booking-card__booking-id {
    margin-top: .2rem;
    font-size: .9rem;
    font-weight: 700;
    color: var(--ep-primary);
}

html.dark-mode .booking-card__booking-id {
    color: var(--textDefault);
}

.booking-card__status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .4rem .8rem;
    border-radius: 999px;
    background: var(--status-bg, #e84c9a20);
    color: var(--textDefault);
    font-size: .8rem;
    font-weight: 700;
}


.booking-card__stay-dates {
    border: 1px solid #ddd;
    border-radius: 7px;
    padding: 1.4rem .7rem .25rem .7rem;
    gap: .5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.booking-card__date-container {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.booking-card--arrival-datetime, .booking-card--departure-datetime {
    display: flex;
    justify-content: space-between;
    gap: .15rem;
}

.booking-card--arrival-datetime__date,
.booking-card--departure-datetime__date {
    font-size: .9rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: .15rem;
    color: var(--textStrong);
}

.booking-card--arrival-datetime__time,
.booking-card--departure-datetime__time {
    font-size: .85rem;
    font-weight: 500;
    color: var(--textDefault);
}

.booking-card--arrival-datetime i, .booking-card--departure-datetime i {
    color: var(--ep-primary);
}

.booking-card__stay-details {
    display: flex;
    position: absolute;
    top: 0;
    transform: translateY(-50%)
}

.booking-card__nights {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .7rem;
    border-radius: 3px;
    background: var(--ep-primary);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
}

.booking-card_body {
    margin-top: .5rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.booking-card__room-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.booking-card__room-type,
.booking-card__meal-plan {
    display: flex;
    align-items: center;
    gap: .6rem;
}

    .booking-card__room-type span,
    .booking-card__meal-plan span {
        font-size: 1rem;
        font-weight: 700;
    }



    .booking-card__room-type span {
        color: var(--ep-primary);
    }

html.dark-mode .booking-card__room-type span {
    color: var(--textStrong);
}

.booking-card__meal-plan span {
    background: var(--ep-primary);
    color: #fff;
    padding: .25rem .5rem;
    border-radius: 3px;
    font-size: .8rem;
}

.booking-card__meal-plan {
    border-left: 1px solid #ddd;
}


.booking-card--guest-stats__source {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .booking-card--guest-stats__source div {
        transform: scale(1.6);
    }


.booking-card__guest-stats {
    display: flex;
    justify-content: flex-start !important;
    padding: 0 !important;
    line-height: 1;
    margin: 0;
    gap: 1rem;
    list-style: none;
}

.booking-card__guest-stat {
    display: flex;
    align-items: flex-end;
    margin: .5rem 0 !important;
    gap: .25rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ep-primary);
}



.booking-card__information {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    /*    background: linear-gradient( 135deg, rgba(236, 255, 252, 0.95), rgba(245, 247, 255, 0.95) );*/
    border-radius: 7px;
    overflow: hidden;
    border: 1px solid #ddd;
    margin-top: .5rem;
}

.booking-card__info-group {
    padding: .35rem 1rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
}

    .booking-card__info-group:first-child {
        border-right: 1px solid #ddd;
    }

.booking-card__info-title {
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
    color: #3f9da0;
}

.booking-card__info-text {
    line-height: 1;
    font-size: .9rem;
    font-weight: 700;
    color: var(--textStrong);
    text-overflow: ellipsis;
    overflow: hidden;
    margin: 0;
    white-space: nowrap;
    width: 100%;
}

.booking-card__footer {
    margin-top: .5rem;
}

.booking-card__pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-radius: 7px;
    overflow: hidden;
    border: 1px solid #ddd;
}

html.dark-mode .booking-card__pricing-grid {
    border: 1px solid #ddd;
}

.booking-card__price-item {
    padding: .5rem;
    text-align: center;
    position: relative;
    display: flex;
    gap: 0;
    flex-direction: column;
    justify-content: space-between;
}

    .booking-card__price-item:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 18px;
        right: 0;
        width: 1px;
        height: calc(100% - 36px);
        background: #ddd;
    }

.booking-card__price-title {
    font-size: .78rem;
    font-weight: 700;
    color: var(--textDefault);
}


.booking-card__price-value {
    font-size: .9rem;
    margin: 0 !important;
    font-weight: 700;
    letter-spacing: -1px;
    color: var(--textStrong);
}

.booking-card__price-value--highlight {
    color: var(--ep-primary);
}


/*Custom Month toolbar*/
.custom--month {
    padding: .5rem;
}




button.b-button:has(.custom-icon--scheduler--reverse) {
    display: flex;
    flex-direction: row-reverse;
}

button.b-button:has(.current-hotel-date) {
    margin-right: 0.5rem;
}

.roomplan-datefield{
    width: 130px;
}

button.b-button:has(.custom-month--btn) {
    background: transparent;
    color: var(--textDefault);
    /*    border: 1px solid var(--textDefault);*/
}

    button.b-button:has(.custom-month--btn):hover {
        background: transparent;
        color: var(--textDefault);
        border: 1px solid var(--ep-primary);
    }

.b-sch-resource-time-range.drag-highlight--available {
    background-color: rgba(34, 197, 94, 0.18);
    border-left: 3px solid rgba(34, 197, 94, 0.75);
    pointer-events: none;
}

.b-sch-resource-time-range.drag-highlight--occupied {
    background-color: rgba(239, 68, 68, 0.13);
    border-left: 3px solid rgba(239, 68, 68, 0.55);
    pointer-events: none;
}

.b-sch-resource-time-range.drag-highlight--available-other-type {
    background-color: rgb(255, 171, 54, 0.2);
    border-left: 3px solid rgba(255, 171, 54, 0.7);
    pointer-events: none;
}

.b-sch-resource-time-range.drag-highlight--exact-fit {
    background-color: rgba(21, 128, 61, 0.32);
    border-left: 3px solid rgba(21, 128, 61, 1);
    pointer-events: none;
}

.custom--availability-object,
.custom--availability-object .b-sch-event,
.custom--availability-object .b-sch-event-content {
    overflow: visible !important;
}

.custom--availability-object .b-sch-event-content {
    align-items: center;
    justify-content: center !important;
    width: 100%;
    height: 100%;
    text-align: center;
}

.custom--availability-percentage-wrap {
    --b-sch-event-padding-inline: 0;
}

.custom--availability-percentage-wrap .b-sch-event-content {
    padding-inline: 0 !important;
}

.custom--availability-object .availability-percentage-value {
    display: inline-block;
    min-width: max-content;
    white-space: nowrap;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    transform: none;
    transform-origin: center;
}

.custom--availability-percentage-wrap .b-sch-event-narrow .availability-percentage-value {
    font-size: 0.75rem;
    transform: none;
}

.custom--parent-cell > .b-time-axis-cell {
    background-color: rgba(0, 0, 0, 0.1) !important;
}



html.dark-mode button:has(.custom-theme-modifier),
html.dark-mode div:has(.custom-theme-modifier) {
    border-color: var(--textStrong);
    color: var(--textStrong);
}

html.dark-mode button.b-pressed:has(.custom-theme-modifier) {
    background: color-mix(in hsl, var(--ep-primary) 50%, #000 28%);
}

#availability-chart-container .b-grid-splitter:not(.b-disabled):not(.b-hover) .b-grid-splitter-inner {
    opacity: 1 !important;
    background: transparent !important;
}

#availability-chart-container .b-grid-splitter:not(.b-disabled) .b-grid-splitter-buttons {
    opacity: 1 !important;
    scale: 1 !important;
    font-size: 1em;
}

.reservation-pill__badges {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 4px;
}

.reservation-pill__badge {
    font-size: 11px;
    opacity: 0.85;
}

.reservation-pill__badge--pin {
    color: #dc3545;
}

.reservation-pill__badge--late {
    color: #fd7e14;
}

.reservation-pill__badge--diff {
    color: #ffc107;
}

/* ------------------------------------------------------------------
   Search & Book
   Availability bars painted by SearchAndBookController, the picked-date
   band (TimeRange 77777) and the day-header highlight. Bar and dates
   share one palette so they read as the same gesture.
   ------------------------------------------------------------------ */

:root {
    /* Beige. Fill only - too light to carry text, so ink and edge drop to the same
       hue at low lightness. */
    --sb-picked: #F5F5DC;
    --sb-picked-ink: #4A4A2E;
    --sb-picked-edge: #A3A374;
    /* Availability bar - beige needs more opacity than orange did to read at all. */
    --sb-available-fill: rgba(245, 245, 220, 0.85);
    --sb-available-border: rgba(138, 138, 92, 0.65);
    --sb-available-text: #5C5C39;
    /* Exact fit stays green - a different signal, so a different hue. */
    --sb-exact-fill: rgba(16, 160, 106, 0.35);
    --sb-exact-border: #10a06a;
    --sb-exact-text: #086b46;
}

.dark-mode {
    --sb-picked: #D6D6B0;
    --sb-picked-ink: #2A2A18;
    --sb-picked-edge: #EDEDCF;
    --sb-available-fill: rgba(214, 214, 176, 0.22);
    --sb-available-border: rgba(237, 237, 207, 0.6);
    --sb-available-text: #EDEDCF;
    --sb-exact-fill: rgba(45, 205, 140, 0.28);
    --sb-exact-border: #2dcd8c;
    --sb-exact-text: #93f0c8;
}

/* ------------------------------------------------- picked dates (77777) */

.b-time-ranges-body-canvas .b-sch-time-range.picked-range {
    background: color-mix(in hsl, var(--sb-picked) 20%, #fff 16%) !important;
    border-left: 2px solid var(--sb-picked);
    border-right: 2px solid var(--sb-picked);
    z-index: 0;
}

html.dark-mode .b-time-ranges-body-canvas .b-sch-time-range.picked-range {
    background: color-mix(in hsl, var(--sb-picked) 22%, #000 40%) !important;
}

/* Day header cells. Placed after the weekend / is-active rules so it wins
   at equal specificity. */
.scheduler--custom-date__container.is-picked,
.scheduler--custom-date__container.is-picked[data-set-day='Sat'],
.scheduler--custom-date__container.is-picked[data-set-day='Sun'],
html.dark-mode .scheduler--custom-date__container.is-picked,
html.dark-mode .scheduler--custom-date__container.is-picked[data-set-day='Sat'],
html.dark-mode .scheduler--custom-date__container.is-picked[data-set-day='Sun'] {
    background: var(--sb-picked) !important;
    border: 1px solid var(--sb-picked-edge) !important;
    color: var(--sb-picked-ink) !important;
}

/* ---------------------------------------------------- availability bar */

.b-sch-resource-time-range.search-book-range {
    background: var(--sb-available-fill);
    border: 1px solid var(--sb-available-border);
    border-radius: 6px;
    color: var(--sb-available-text);
    cursor: pointer;
    z-index: 3;
    transition: filter 0.12s ease, box-shadow 0.12s ease;
}

    .b-sch-resource-time-range.search-book-range:not(.search-book-range--exact):hover {
        filter: brightness(1.06);
        box-shadow: 0 0 0 2px var(--sb-available-border);
    }

.b-sch-resource-time-range.search-book-range--exact:hover {
    filter: brightness(1.06);
    box-shadow: 0 0 0 2px var(--sb-exact-border);
}

.b-sch-resource-time-range.search-book-range .b-sch-event-content {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: 2px;
    white-space: nowrap;
    overflow: hidden;
}

.b-sch-resource-time-range.search-book-range--single .b-sch-event-content {
    font-size: 11px;
    letter-spacing: -0.2px;
}

.b-sch-resource-time-range.search-book-range--exact {
    background: var(--sb-exact-fill);
    border: 2px solid var(--sb-exact-border);
    z-index: 4;
}

    .b-sch-resource-time-range.search-book-range--exact .b-sch-event-content {
        color: var(--sb-exact-text);
        font-weight: 800;
    }

@keyframes sb-exact-breathe {
    0%, 100% {
        opacity: 0;
    }

    50% {
        opacity: 0.35;
    }
}

.b-sch-resource-time-range.search-book-range--exact:hover::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--sb-exact-border);
    animation: sb-exact-breathe 2.4s ease-in-out infinite;
    pointer-events: none;
}

/* --------------------------------------------------- the drag selection */

/* Bryntum's own selection canvases are hidden - the 77777 band is what the
   user actually sees. */
.b-time-ranges-header-canvas.b-selected-time-span-canvas,
.b-time-ranges-body-canvas.b-selected-time-span-canvas,
.b-timeaxis-header-container .b-sch-timerange {
    display: none !important;
}

.b-sch-timeselection,
.b-timeselection,
.b-sch-timeaxis-cell.b-selected {
    background-color: color-mix(in hsl, var(--sb-picked) 12%, transparent);
    border-left: 2px solid var(--sb-picked);
    border-right: 2px solid var(--sb-picked);
}

    /* Make the header X of the selection an obvious affordance. */
    .b-sch-timeselection .b-icon-remove,
    .b-timeselection .b-icon-remove {
        cursor: pointer;
        opacity: 0.85;
    }

        .b-sch-timeselection .b-icon-remove:hover,
        .b-timeselection .b-icon-remove:hover {
            opacity: 1;
        }

/* ------------------------------------------- calm everything else down */

.sb-active .b-sch-event-wrap {
    opacity: 0.25;
    filter: grayscale(0.6);
    transition: opacity 0.15s ease, filter 0.15s ease;
}

    .sb-active .b-sch-event-wrap:hover {
        opacity: 1;
        filter: none;
    }

.sb-active .b-sch-resource-time-range:not(.search-book-range) {
    opacity: 0.3;
}

/* ------------------------------------------------------------ the chip */

/* Centred against the toolbar rather than flex-positioned: the trailing '->' fill
   that pins the right-hand buttons would otherwise split the free space three ways
   and leave the chip at the one-third mark. */
button.b-button.search-book-chip {
    margin-inline: 1rem;
    background: var(--sb-picked);
    color: var(--sb-picked-ink);
    border: 1px solid var(--sb-picked-edge);
    border-radius: 3px;
    font-weight: 700;
    flex-direction: row-reverse;
    gap: .4rem;
}

    button.b-button.search-book-chip:hover {
        background: color-mix(in hsl, var(--sb-picked) 85%, #000 15%);
    }

/* ========== Reservation Status Line ========== */
.reservation-pill__inner {
    position: relative;
}

.reservation-pill__status-line {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    pointer-events: none;
}

/* ------- Availability ------- */

:root {
    --rp-low-bg: rgba(47, 158, 121, 0.16);
    --rp-mid-bg: rgba(216, 161, 58, 0.2);
    --rp-high-bg: rgba(217, 122, 43, 0.22);
    --rp-full-bg: rgba(201, 80, 63, 0.24);
    --rp-low-fg: #17785c;
    --rp-mid-fg: #8f6412;
    --rp-high-fg: #9d4f19;
    --rp-full-fg: #a03a2c;
    --rp-neutral-fg: #334155;
    --rp-surface: rgba(148, 163, 184, 0.12);
}

html.dark-mode {
    --rp-low-bg: rgba(79, 191, 154, 0.18);
    --rp-mid-bg: rgba(224, 180, 92, 0.2);
    --rp-high-bg: rgba(227, 144, 85, 0.22);
    --rp-full-bg: rgba(224, 112, 95, 0.24);
    --rp-low-fg: #6fd6b3;
    --rp-mid-fg: #edc879;
    --rp-high-fg: #f0a877;
    --rp-full-fg: #f08a7a;
    --rp-neutral-fg: #cbd5e1;
    --rp-surface: rgba(148, 163, 184, 0.18);
}

.rp-availability-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 12px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    border-left: 1px solid rgba(148, 163, 184, 0.25);
    color: var(--rp-neutral-fg, #334155) !important;
}

.rp-availability-pct {
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    text-align: center;
    cursor: default;
}

    .rp-availability-pct.is-low {
        background: var(--rp-low-bg, rgba(47, 158, 121, 0.16));
        color: var(--rp-low-fg, #17785c) !important;
    }

    .rp-availability-pct.is-mid {
        background: var(--rp-mid-bg, rgba(216, 161, 58, 0.2));
        color: var(--rp-mid-fg, #8f6412) !important;
    }

    .rp-availability-pct.is-high {
        background: var(--rp-high-bg, rgba(217, 122, 43, 0.22));
        color: var(--rp-high-fg, #9d4f19) !important;
    }

    .rp-availability-pct.is-full {
        background: var(--rp-full-bg, rgba(201, 80, 63, 0.24));
        color: var(--rp-full-fg, #a03a2c) !important;
    }


.rp-non-allocated-header:hover {
    background: color-mix(in hsl, var(--ep-primary) 28%, #fff 72%) !important;
}

html.dark-mode .rp-non-allocated-header:hover {
    background: color-mix(in hsl, var(--ep-primary) 34%, #000 66%) !important;
}

.rp-availability-counts {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: -0.2px;
    cursor: default;
}

.rp-non-allocated-header {
    box-sizing: border-box;
    background: color-mix(in hsl, var(--ep-primary) 16%, #fff 84%) !important;
    border: 1px dashed var(--ep-primary) !important;
    color: var(--ep-primary) !important;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}

.rp-non-allocated-header.is-empty {
    opacity: 0.35;
}

html.dark-mode .rp-non-allocated-header {
    background: color-mix(in hsl, var(--ep-primary) 22%, #000 78%) !important;
}

    .rp-availability-counts.is-low {
        color: var(--rp-low-fg, #17785c) !important;
    }

    .rp-availability-counts.is-mid {
        color: var(--rp-mid-fg, #8f6412) !important;
    }

    .rp-availability-counts.is-high {
        color: var(--rp-high-fg, #9d4f19) !important;
    }

    .rp-availability-counts.is-full {
        color: var(--rp-full-fg, #a03a2c) !important;
    }

.density--compact .rp-availability-pct {
    font-size: 0.8rem;
}

.rp-group-availability {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    padding: 1px 4px;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: var(--rp-surface, rgba(148, 163, 184, 0.12));
    color: var(--rp-neutral-fg, #334155) !important;
}

    .rp-group-availability.is-low {
        color: var(--rp-low-fg, #17785c) !important;
    }

    .rp-group-availability.is-mid {
        color: var(--rp-mid-fg, #8f6412) !important;
    }

    .rp-group-availability.is-high {
        color: var(--rp-high-fg, #9d4f19) !important;
    }

    .rp-group-availability.is-full {
        color: var(--rp-full-fg, #a03a2c) !important;
        background: var(--rp-full-bg, rgba(201, 80, 63, 0.24));
    }

/* --- Bottom panel ---------------------------------------------------- */

.b-grid-footer,
.b-time-axis-summary-value {
    font-variant-numeric: tabular-nums;
    padding: 0;
}

.b-time-axis-tick {
    border-left: 1px solid rgba(148, 163, 184, 0.25);
}

.b-time-axis-summary-value {
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.b-time-axis-summary-value:last-child {
    border-bottom: none;
}

.b-time-axis-summary-value:nth-child(3) {
    border-bottom: 2px solid rgba(148, 163, 184, 0.4);
}

.b-grid-footers-locked {
    border-right: 1px solid rgba(148, 163, 184, 0.35);
}

.b-time-axis-tick:hover .b-time-axis-summary-value {
    background: color-mix(in hsl, var(--ep-primary) 22%, #fff 88%) !important;
}

.rp-row-hover {
    background: color-mix(in hsl, var(--ep-primary) 24%, #fff 86%) !important;
}

html.dark-mode .b-time-axis-tick:hover .b-time-axis-summary-value,
html.dark-mode .rp-row-hover {
    background: color-mix(in hsl, var(--ep-primary) 20%, #000 60%) !important;
}

.rp-summary-label {
    display: block;
    padding-inline: .6rem;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    color: var(--rp-neutral-fg, #334155) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.b-grid-summary-value.b-no-label {
    height: 100%;
}

.rp-summary-label-stack {
    display: flex;
    flex-direction: column;
    height: 100%;
}

    .rp-summary-label-stack .rp-summary-label {
        flex: 1 1 0;
        display: flex;
        align-items: center;
        min-height: 0;
        border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    }

        .rp-summary-label-stack .rp-summary-label:last-child {
            border-bottom: none;
        }

        .rp-summary-label-stack .rp-summary-label:nth-child(3) {
            border-bottom: 2px solid rgba(148, 163, 184, 0.4);
        }

.rp-summary-value {
    display: block;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--rp-neutral-fg, #334155) !important;
}

.rp-summary-value--strong {
    font-weight: 800;
    font-size: 0.9rem;
}

.rp-summary-value.is-zero {
    opacity: 0.28;
    font-weight: 500;
}

.rp-summary-value.is-low {
    color: var(--rp-low-fg, #17785c) !important;
}

.rp-summary-value.is-mid {
    color: var(--rp-mid-fg, #8f6412) !important;
}

.rp-summary-value.is-high {
    color: var(--rp-high-fg, #9d4f19) !important;
}

.rp-summary-value.is-full {
    color: var(--rp-full-fg, #a03a2c) !important;
}

.rp-summary-value--arrival {
    color: #2f6feb !important;
}

.rp-summary-value--departure {
    color: #7c6bd4 !important;
}

.rp-availability-hidden .b-timeaxissubgrid-footer,
.rp-availability-hidden .b-grid-footer-container {
    display: none;
}

.rp-summary-label--type,
.rp-summary-value--type {
    font-size: 0.9rem;
    font-weight: 500;
    opacity: 0.85;
}

.rp-summary-label__room-type-color {
    flex: 0 0 .45rem;
    align-self: stretch;
    margin: .15rem .45rem .15rem 0;
    border-radius: 2px;
}

.rp-summary-label__room-type-name {
    overflow: hidden;
    text-overflow: ellipsis;
}

.rp-summary-label__room-count {
    flex: 0 0 auto;
    margin-left: .3rem;
    font-weight: 700;
}

.b-grid-footer.hide-summary-footer {
    display: none !important;
}

.b-grid-footer.availability-summary-footer {
    padding: .5em 0;
}

.b-summary-wrap.b-grid-group-summary {
    display: none !important;
}