/* =========================================================
   САЙТ — КАЛЕНДАРЬ
========================================================= */

.md-calendar {
    width: 100%;
}


/* =========================================================
   НАВИГАЦИЯ ПО МЕСЯЦАМ
========================================================= */

.calendar-month-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    min-width: 125px;

    padding: 10px 8px;

    border: 0;
    background: transparent;

    color: var(--md-text-color, #261d22);

    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;

    text-decoration: none;

    transition: none;
}

.calendar-month-nav:hover {
    color: var(--md-primary-color, #261d22);
    background: transparent;
}

.calendar-month-nav-arrow {
    font-size: 20px;
    line-height: 1;
}

.calendar-month-nav-symbol {
    display: inline-block;

    line-height: 1;

    transition: transform 0.18s ease;
}

.calendar-month-nav:hover .calendar-month-nav-symbol {
    transform: translateY(-4px) rotate(-6deg);
}


/* =========================================================
   ДНИ НЕДЕЛИ
========================================================= */

.md-calendar-weekdays {
    display: grid;

    grid-template-columns: repeat(7, minmax(0, 1fr));

    gap: var(--md-calendar-desktop-gap, 10px);

    margin-bottom: var(--md-calendar-desktop-gap, 10px);
}

.md-calendar-weekday {
    min-width: 0;

    padding: 8px 4px;

    text-align: center;

    color: var(--md-calendar-weekday-color, #8c7c83);

    font-size: var(--md-calendar-weekday-size, 12px);

    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


/* =========================================================
   СЕТКА МЕСЯЦА
========================================================= */

.md-calendar-grid {
    display: grid;

    grid-template-columns: repeat(7, minmax(0, 1fr));

    gap: var(--md-calendar-desktop-gap, 10px);
}

.md-calendar-empty {
    min-width: 0;

    min-height: var(--md-calendar-desktop-day-height, 275px);
}


/* =========================================================
   КАРТОЧКА ДНЯ
========================================================= */

.md-calendar-day {
    position: relative;

    display: flex;

    flex-direction: column;

    min-width: 0;

    min-height: var(--md-calendar-desktop-day-height, 275px);

    padding: var(--md-calendar-desktop-day-padding, 14px);

    background: transparent;

    border: var(--md-calendar-border-width, 1px) solid var(--md-calendar-border-color, #e8dde1);

    border-radius: var(--md-calendar-desktop-day-radius, 18px);

    overflow: hidden;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.md-calendar-day:hover {
    border-color: var(--md-calendar-border-color, #d9ccd1);
}

.md-calendar-day-today {
    border-color: var(--md-calendar-circle-bg, #261d22);

    box-shadow:
        inset
        0
        0
        0
        1px
        var(--md-calendar-circle-bg, #261d22);
}


/* =========================================================
   ДАТА
========================================================= */

.md-calendar-day-head {
    display: flex;

    align-items: center;

    justify-content: space-between;

    flex: 0 0 auto;

    min-height: var(--md-calendar-desktop-head-height, 46px);

    margin-bottom: var(--md-calendar-desktop-day-padding, 14px);
}

.md-calendar-day-number {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: var(--md-calendar-circle-size, 34px);
    min-width: var(--md-calendar-circle-size, 34px);
    height: var(--md-calendar-circle-size, 34px);

    padding: 0;

    border-radius: 50%;

    background: var(--md-calendar-circle-bg, #261d22);

    color: var(--md-calendar-circle-text, #fff);

    font-size: var(--md-calendar-circle-font, 17px);

    font-weight: 800;

    line-height: 1;
}

.md-calendar-weekday-inside {
    color: var(--md-calendar-weekday-color, #8c7c83);

    font-size: var(--md-calendar-weekday-size, 12px);

    font-weight: 800;

    line-height: 1;

    white-space: nowrap;
}

.md-calendar-weekend {
    color: var(--md-calendar-weekday-color, #a38f98);

    font-size: var(--md-calendar-weekday-size, 12px);
}


/* =========================================================
   НИЖНЯЯ ЧАСТЬ КАРТОЧКИ
========================================================= */

.md-calendar-day > .flex-grow-1 {
    flex: 1 1 auto !important;

    min-height: 0;
}


/* =========================================================
   ДЕНЬ БЕЗ СЛОТОВ
========================================================= */

.md-calendar-day > .bg-light {
    flex: 1 1 auto !important;

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 0;

    margin:
        0
        calc(var(--md-calendar-desktop-day-padding, 14px) * -1)
        calc(var(--md-calendar-desktop-day-padding, 14px) * -1)
        calc(var(--md-calendar-desktop-day-padding, 14px) * -1);

    background: var(--md-calendar-empty-bg, #f1edef) !important;

    color: var(--md-calendar-cross-color, #9f9299) !important;

    pointer-events: none;
}

.md-calendar-day > .bg-light > span {
    width: 100% !important;

    height: 100% !important;

    display: flex !important;

    align-items: center;

    justify-content: center;

    color: var(--md-calendar-cross-color, #9f9299);

    font-size: 52px !important;

    font-weight: 300;

    line-height: 1;
}


/* =========================================================
   СОСТОЯНИЕ ДНЯ
========================================================= */

.md-calendar-day-empty-state {
    flex: 1 1 auto;

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 0;

    margin:
        0
        calc(var(--md-calendar-desktop-day-padding, 14px) * -1)
        calc(var(--md-calendar-desktop-day-padding, 14px) * -1)
        calc(var(--md-calendar-desktop-day-padding, 14px) * -1);

    background: var(--md-calendar-overview-inactive-bg, var(--md-calendar-filled-bg, #eeeeee));

    color: var(--md-calendar-overview-inactive-text, var(--md-calendar-cross-color, #999999));

    pointer-events: none;
}

.md-calendar-day-cross {
    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--md-calendar-cross-color, #999999);

    font-size: 52px;

    font-weight: 300;

    line-height: 1;
}


/* =========================================================
   ДЕНЬ, ГДЕ ВСЕ ЗАПИСИ ЗАНЯТЫ
========================================================= */

.md-calendar-day-filled {
    position: relative;

    cursor: default;
}

.md-calendar-day-filled::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 20;

    background:
        rgba(
            238,
            238,
            238,
            0.58
        );

    pointer-events: none;
}

.md-calendar-day-filled > * {
    position: relative;

    z-index: 1;
}


/* =========================================================
   КЛИКАБЕЛЬНЫЙ ДЕНЬ
========================================================= */

.md-calendar-day[data-calendar-day-clickable="1"] {
    cursor: pointer;
}


/* =========================================================
   МАСТЕР
========================================================= */

.md-calendar-master {
    margin-top: 13px;

    padding-top: 12px;

    border-top:
        1px solid
        var(--md-border-color, #f0e7ea);
}

.md-calendar-master:first-child {
    margin-top: 0;

    padding-top: 0;

    border-top: 0;
}

.md-calendar-master-head {
    display: flex;

    align-items: center;

    gap: 9px;

    min-width: 0;

    margin-bottom: 9px;
}

.md-calendar-master-photo,
.md-calendar-master-placeholder {
    width: var(--md-calendar-master-photo-size, 38px);
    height: var(--md-calendar-master-photo-size, 38px);

    flex: 0 0 var(--md-calendar-master-photo-size, 38px);

    border-radius: 50%;
}

.md-calendar-master-photo {
    object-fit: cover;

    background: var(--md-calendar-free-bg, #f3ecef);
}

.md-calendar-master-placeholder {
    background: var(--md-calendar-free-bg, #f3ecef);
}

.md-calendar-master-name {
    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    color: var(--md-calendar-master-text-color, #ffffff);

    font-size: var(--md-calendar-master-font-size, 14px);

    font-weight: 800;
}


/* =========================================================
   ВРЕМЯ
========================================================= */

.md-calendar-times {
    display: grid;

    grid-template-columns: repeat(var(--md-calendar-desktop-time-columns, 2), minmax(0, 1fr));

    gap: 6px;

    min-width: 0;
}

.md-calendar-time {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: var(--md-calendar-desktop-time-height, 31px);

    padding: 6px 9px;

    border-radius: var(--md-calendar-time-radius, 9px);

    font-size: var(--md-calendar-time-font-size, 12px);

    line-height: 1;

    text-decoration: none;

    white-space: nowrap;

    transition:
        background 0.15s ease,
        color 0.15s ease;
}

.md-calendar-time-free {
    background: var(--md-calendar-free-bg, #f3ecef);

    color: var(--md-calendar-free-text-color, #261d22);
}

.md-calendar-time-free:hover {
    background: var(--md-calendar-circle-bg, #261d22);

    color: #fff;
}

.md-calendar-time-booked {
    background: var(--md-calendar-filled-bg, #f6f2f3);

    color: var(--md-calendar-cross-color, #a3979c);

    text-decoration: line-through;

    cursor: default;
}

.md-calendar-time-booked:hover {
    background: var(--md-calendar-filled-bg, #f6f2f3);

    color: var(--md-calendar-cross-color, #a3979c);
}


/* =========================================================
   ПУСТОЙ ДЕНЬ
========================================================= */

.md-calendar-day-empty {
    color: var(--md-secondary-color, #aa9da3);

    font-size: 12px;

    line-height: 1.4;
}


/* =========================================================
   ЛЕГЕНДА
========================================================= */

.md-calendar-legend {
    display: flex;

    justify-content: center;

    align-items: center;

    gap: 28px;

    margin-top: 24px;

    color: var(--md-secondary-color, #786970);

    font-size: 13px;
}

.md-calendar-legend-item {
    display: flex;

    align-items: center;

    gap: 7px;
}

.md-calendar-legend-free,
.md-calendar-legend-booked {
    width: 14px;
    height: 14px;

    display: inline-block;

    border-radius: 5px;
}

.md-calendar-legend-free {
    background: var(--md-calendar-free-bg, #f3ecef);
}

.md-calendar-legend-booked {
    position: relative;

    background: var(--md-calendar-filled-bg, #f6f2f3);
}

.md-calendar-legend-booked::after {
    content: "";

    position: absolute;

    left: 2px;
    right: 2px;
    top: 6px;

    height: 1px;

    background: var(--md-secondary-color, #a3979c);

    transform: rotate(-8deg);
}


/* =========================================================
   МОБИЛЬНЫЙ СПИСОК
========================================================= */

.md-calendar-mobile-list {
    display: none;
}

.md-calendar-mobile-overview-button {
    display: none;
}


/* =========================================================
   MOBILE DAY
========================================================= */

.md-calendar-mobile-day {
    cursor: default;
}

.md-calendar-mobile-day[data-calendar-mobile-day="1"] {
    cursor: pointer;
}

.md-calendar-mobile-day-filled {
    cursor: default !important;
}

.md-calendar-mobile-day-filled:hover {
    border-color: var(--md-border-color, #e8dde1) !important;
}

.md-calendar-mobile-day[data-calendar-mobile-day="1"]:hover {
    border-color: var(--md-secondary-color, #d9ccd1);
}


/* =========================================================
   MOBILE OVERVIEW
========================================================= */

.md-calendar-mobile-overview-grid {
    display: grid;

    grid-template-columns:
        repeat(
            7,
            minmax(0, 1fr)
        );

    gap: 5px;
}

.md-calendar-mobile-overview-weekday {
    padding:
        3px
        0
        7px;

    text-align: center;

    color: var(--md-secondary-color, #8c7c83);

    font-size: 11px;

    font-weight: 800;

    line-height: 1;
}

.md-calendar-mobile-overview-empty {
    min-height: 48px;
}


/* =========================================================
   СВОБОДНЫЙ ДЕНЬ
========================================================= */

.md-calendar-mobile-overview-day {
    display: block;

    width: 100%;

    min-width: 0;

    min-height: var(--md-calendar-overview-height, 52px);

    padding:
        6px
        4px;

    border: 0;

    border-radius: 8px;

    background: var(--md-calendar-overview-active-bg, var(--md-calendar-free-bg, #dcefdc));

    color: var(--md-calendar-overview-active-text, var(--md-calendar-free-text-color, #261d22));

    text-align: left;

    cursor: pointer;

    transition:
        background 0.15s ease,
        color 0.15s ease;
}

.md-calendar-mobile-overview-day:hover {
    background: var(--md-calendar-overview-active-hover-bg, var(--md-calendar-free-bg, #bfe3bf));

    color: var(--md-calendar-overview-active-text, var(--md-calendar-free-text-color, #261d22));
}


/* =========================================================
   ЗАНЯТЫЙ / ПРОШЕДШИЙ ДЕНЬ
========================================================= */

.md-calendar-mobile-overview-day-filled {
    background: var(--md-calendar-overview-inactive-bg, var(--md-calendar-filled-bg, #eeeeee));

    color: var(--md-calendar-overview-inactive-text, var(--md-calendar-cross-color, #999999));

    cursor: default;
}

.md-calendar-mobile-overview-day-filled:hover {
    background: var(--md-calendar-overview-inactive-bg, var(--md-calendar-filled-bg, #eeeeee));

    color: var(--md-calendar-overview-inactive-text, var(--md-calendar-cross-color, #999999));
}


/* =========================================================
   СЕГОДНЯ
========================================================= */

.md-calendar-mobile-overview-day-today {
    box-shadow:
        inset
        0
        0
        0
        2px
        var(--md-calendar-circle-bg, #261d22);
}


/* =========================================================
   ТЕКСТ В КЛЕТКЕ
========================================================= */

.md-calendar-mobile-overview-number {
    display: block;

    font-size: var(--md-calendar-overview-font, 15px);

    font-weight: 800;

    line-height: 1;
}

.md-calendar-mobile-overview-status {
    display: block;

    margin-top: 5px;

    font-size: 8px;

    line-height: 1.1;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* =========================================================
   МОДАЛЬНОЕ ОКНО ДНЯ
========================================================= */

.md-calendar-modal-day {
    color: var(--md-secondary-color, #786970);

    font-size: 14px;
}

.md-calendar-modal-master {
    padding: 15px 0;

    border-top:
        1px solid
        var(--md-border-color, #eee5e8);
}

.md-calendar-modal-master:first-child {
    border-top: 0;
}

.md-calendar-modal-master-head {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 12px;
}

.md-calendar-modal-photo,
.md-calendar-modal-photo-placeholder {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    border-radius: 50%;
}

.md-calendar-modal-photo {
    object-fit: cover;

    background: var(--md-calendar-free-bg, #f3ecef);
}

.md-calendar-modal-photo-placeholder {
    background: var(--md-calendar-free-bg, #f3ecef);
}

.md-calendar-modal-master-name {
    font-size: 15px;

    font-weight: 800;
}

.md-calendar-modal-times {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;
}

.md-calendar-modal-time {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 66px;

    min-height: 40px;

    padding:
        8px
        12px;

    border-radius: var(--md-calendar-time-radius, 9px);

    background: var(--md-calendar-free-bg, #f3ecef);

    color: var(--md-calendar-free-text-color, #261d22);

    text-decoration: none;

    font-size: var(--md-calendar-time-font-size, 14px);

    font-weight: 600;
}

.md-calendar-modal-time:hover {
    background: var(--md-calendar-circle-bg, #261d22);

    color: #fff;
}

.md-calendar-modal-time-booked {
    background: var(--md-calendar-filled-bg, #f6f2f3);

    color: var(--md-calendar-cross-color, #a3979c);

    text-decoration: line-through;

    cursor: default;
}

.md-calendar-modal-time-booked:hover {
    background: var(--md-calendar-filled-bg, #f6f2f3);

    color: var(--md-calendar-cross-color, #a3979c);
}


/* =========================================================
   ПЛАНШЕТ
   Bootstrap md:
   768–991.98px
========================================================= */

@media (
    min-width: 768px
) and (
    max-width: 991.98px
) {

    .md-calendar-weekdays,
    .md-calendar-grid {
        gap: var(--md-calendar-desktop-gap, 5px);
    }

    .md-calendar-day,
    .md-calendar-empty {
        min-height: var(--md-calendar-desktop-day-height, 190px);
    }

    .md-calendar-day {
        padding: var(--md-calendar-desktop-day-padding, 9px);

        border-radius: var(--md-calendar-desktop-day-radius, 12px);
    }

    .md-calendar-day-head {
        min-height: 28px;

        margin-bottom: 8px;
    }

    .md-calendar-day-number {
        width: var(--md-calendar-circle-size, 28px);

        min-width: var(--md-calendar-circle-size, 28px);

        height: var(--md-calendar-circle-size, 28px);

        font-size: var(--md-calendar-circle-font, 14px);
    }

    .md-calendar-weekday-inside {
        font-size: 9px;
    }

    .md-calendar-weekend {
        font-size: 9px;
    }

    .md-calendar-master {
        margin-top: 8px;

        padding-top: 8px;
    }

    .md-calendar-master-head {
        gap: var(--md-calendar-desktop-gap, 5px);

        margin-bottom: 6px;
    }

    .md-calendar-master-photo,
    .md-calendar-master-placeholder {
        width: 27px;

        height: 27px;

        flex-basis: 27px;
    }

    .md-calendar-master-name {
        font-size: 10px;
    }

    .md-calendar-times {
        gap: 3px;
    }

    .md-calendar-time {
        min-height: 25px;

        padding:
            4px
            5px;

        border-radius: 6px;

        font-size: 9px;
    }

    .md-calendar-day-empty {
        font-size: 9px;
    }

    .md-calendar-day > .bg-light {
        margin:
            0
            calc(var(--md-calendar-desktop-day-padding, 9px) * -1)
            calc(var(--md-calendar-desktop-day-padding, 9px) * -1)
            calc(var(--md-calendar-desktop-day-padding, 9px) * -1);
    }

    .md-calendar-day > .bg-light > span {
        font-size: 42px !important;
    }

    .md-calendar-day-empty-state {
        margin:
            0
            -9px
            -9px
            -9px;
    }

    .md-calendar-day-cross {
        font-size: 42px;
    }
}


/* =========================================================
   МОБИЛЬНЫЙ
   Bootstrap xs/sm:
   0–767.98px
========================================================= */

@media (
    max-width: 767.98px
) {

    .md-calendar
    > .d-flex.align-items-center.justify-content-between {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, auto)
            minmax(0, 1fr);

        align-items: center;

        width: 100%;

        min-width: 0;

        gap: 4px !important;
    }

    .md-calendar
    > .d-flex.align-items-center.justify-content-between
    > .flex-shrink-0 {
        min-width: 0;

        width: 100%;
    }

    .md-calendar
    > .d-flex.align-items-center.justify-content-between
    > .flex-shrink-0:first-child {
        display: flex;

        justify-content: flex-start;

        min-width: 0;
    }

    .md-calendar
    > .d-flex.align-items-center.justify-content-between
    > .flex-grow-1 {
        min-width: 0;

        width: 100%;
    }

    .md-calendar
    > .d-flex.align-items-center.justify-content-between
    > .flex-shrink-0:last-child {
        display: flex;

        justify-content: flex-end;

        min-width: 0;
    }

    .calendar-month-nav {
        min-width: 0;

        max-width: 100%;

        padding:
            8px
            2px;

        gap: 4px;

        font-size: 12px;

        line-height: 1.1;

        white-space: nowrap;
    }

    .calendar-month-nav-arrow {
        font-size: 17px;
    }

    .calendar-month-nav-symbol {
        font-size: 12px;
    }

    .md-calendar-weekdays,
    .md-calendar-grid {
        display: none;
    }

    .md-calendar-caption {
        white-space: nowrap;

        font-size: var(--md-calendar-circle-font, 14px);

        line-height: 1;
    }

    .md-calendar-mobile-overview-button {
        display: inline-flex;

        align-items: center;

        justify-content: center;

        white-space: nowrap;
    }

    .md-calendar-mobile-list {
        display: flex;

        flex-direction: column;

        gap: var(--md-calendar-mobile-gap, 12px);
    }

    .md-calendar-mobile-day {
        position: relative;

        min-height: 0;

        padding: var(--md-calendar-mobile-padding, 14px);

        background: transparent;

        border:
            var(--md-calendar-border-width, 1px) solid
            var(--md-calendar-border-color, #e8dde1);

        border-radius: var(--md-calendar-mobile-radius, 14px);

        overflow: hidden;
    }

    .md-calendar-mobile-day[data-calendar-mobile-day="1"] {
        cursor: pointer;
    }

    .md-calendar-mobile-day-filled {
        position: relative;

        background: var(--md-calendar-filled-bg, #eeeeee);

        color: var(--md-calendar-cross-color, #999999);

        cursor: default !important;
    }

    .md-calendar-mobile-day-filled::after {
        content: "";

        position: absolute;

        inset: 0;

        z-index: 20;

        background: rgba(238, 238, 238, 0.58);

        pointer-events: none;
    }

    .md-calendar-mobile-day-filled > * {
        position: relative;
        z-index: 1;
    }

    .md-calendar-mobile-day-filled:hover {
        border-color: var(--md-border-color, #e8dde1) !important;
    }

    .md-calendar-mobile-day-today {
        border-color: var(--md-primary-color, #261d22);

        box-shadow:
            inset
            0
            0
            0
            1px
            var(--md-primary-color, #261d22);
    }

    .md-calendar-mobile-day-head {
        display: flex;

        align-items: baseline;

        justify-content: space-between;

        gap: 10px;

        min-height: 34px;

        margin-bottom: var(--md-calendar-mobile-padding, 14px);

        padding-bottom: 10px;

        border-bottom:
            1px solid
            var(--md-border-color, #f0e7ea);
    }

    .md-calendar-mobile-day-title {
        display: flex;

        align-items: baseline;

        gap: 8px;

        min-width: 0;
    }

    .md-calendar-mobile-day-number {
        display: inline-flex;

        align-items: center;

        justify-content: center;

        width: var(--md-calendar-circle-size, 34px);

        min-width: var(--md-calendar-circle-size, 34px);

        height: var(--md-calendar-circle-size, 34px);

        border-radius: 50%;

        background: var(--md-calendar-circle-bg, #261d22);

        color: var(--md-calendar-circle-text, #fff);

        font-size: var(--md-calendar-circle-font, 17px);

        font-weight: 800;

        line-height: 1;
    }

    .md-calendar-mobile-weekday {
        color: var(--md-calendar-weekday-color, #261d22);

        font-size: var(--md-calendar-weekday-size, 17px);

        font-weight: 800;

        white-space: nowrap;
    }

    .md-calendar-mobile-today {
        color: var(--md-calendar-weekday-color, #786970);

        font-size: 12px;

        font-weight: 800;

        white-space: nowrap;
    }

    .md-calendar-mobile-master {
        margin-top: 0;

        padding-top: 0;

        border-top: 0;
    }

    .md-calendar-mobile-master
    + .md-calendar-mobile-master {
        margin-top: 13px;

        padding-top: 12px;

        border-top:
            1px solid
            var(--md-border-color, #f0e7ea);
    }

    .md-calendar-mobile-master-head {
        display: flex;

        align-items: center;

        gap: 9px;

        min-width: 0;

        margin-bottom: 9px;
    }

    .md-calendar-mobile-master-photo,
    .md-calendar-mobile-master-placeholder {
        width: var(--md-calendar-master-photo-size, 38px);

        height: var(--md-calendar-master-photo-size, 38px);

        flex: 0 0 var(--md-calendar-master-photo-size, 38px);

        border-radius: 50%;
    }

    .md-calendar-mobile-master-photo {
        object-fit: cover;

        background: var(--md-calendar-free-bg, #f3ecef);
    }

    .md-calendar-mobile-master-placeholder {
        background: var(--md-calendar-free-bg, #f3ecef);
    }

    .md-calendar-mobile-master-name {
        min-width: 0;

        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap;

        color: var(--md-calendar-master-text-color, #ffffff);

        font-size: var(--md-calendar-master-font-size, 14px);

        font-weight: 800;
    }

    .md-calendar-mobile-times {
        display: grid;

        grid-template-columns: repeat(var(--md-calendar-mobile-time-columns, 4), minmax(0, 1fr));

        align-items: stretch;

        gap: var(--md-calendar-mobile-gap, 6px);
    }

    .md-calendar-mobile-times
    .md-calendar-time {
        display: flex;

        align-items: center;

        justify-content: center;

        width: 100%;

        min-width: 0;

        min-height: var(--md-calendar-mobile-time-height, 42px);

        padding:
            8px
            10px;

        border-radius: var(--md-calendar-time-radius, 9px);

        font-size: var(--md-calendar-mobile-time-font, 16px) !important;

        line-height: 1.2;
    }

    .md-calendar-mobile-empty {
        color: var(--md-secondary-color, #aa9da3);

        font-size: 13px;

        line-height: 1.4;
    }

    #mdMonthOverviewModal
    .modal-dialog {
        width: auto;

        max-width:
            min(
                var(--md-modal-max-width, 720px),
                calc(100vw - 16px)
            );

        margin: 8px;
    }

    #mdMonthOverviewModal
    .modal-content {
        background-color: var(--md-modal-bg, #fff) !important;

        color: var(--md-text-color, #261d22);

        border-radius: var(--md-modal-radius, 0) !important;

        border-color: var(--md-input-border-color, #e8afbf) !important;
    }

    #mdMonthOverviewModal
    .modal-header {
        background-color: var(--md-modal-header-bg, #f8f9fa) !important;

        color: var(--md-text-color, #261d22);

        border-bottom-color: var(--md-input-border-color, #e8afbf) !important;
    }

    #mdMonthOverviewModal
    .modal-body {
        background-color: var(--md-modal-bg, #fff) !important;

        color: var(--md-text-color, #261d22);
    }

    #mdMonthOverviewModal
    .modal-footer {
        background-color: var(--md-modal-bg, #fff) !important;

        border-top-color: var(--md-input-border-color, #e8afbf) !important;
    }

    #mdMonthOverviewModal
    .modal-content.rounded-0 {
        border-radius: var(--md-modal-radius, 0) !important;
    }

    #mdMonthOverviewModal
    .modal-body {
        padding: 12px;
    }

    .md-calendar-mobile-overview-grid {
        gap: 4px;
    }

    .md-calendar-mobile-overview-weekday {
        padding:
            2px
            0
            7px;

        font-size: 11px;
    }

    .md-calendar-mobile-overview-empty {
        min-height: 48px;
    }

    .md-calendar-mobile-overview-day {
        min-height: var(--md-calendar-overview-height, 50px);

        padding:
            6px
            4px;

        border-radius: var(--md-calendar-time-radius, 8px);
    }

    .md-calendar-mobile-overview-number {
        font-size: var(--md-calendar-overview-font, 15px);
    }

    .md-calendar-mobile-overview-status {
        margin-top: 4px;

        font-size: 8px;
    }

    .md-calendar-legend {
        gap: 12px;

        margin-top: 14px;

        font-size: 10px;
    }

    .md-calendar-legend-free,
    .md-calendar-legend-booked {
        width: 11px;

        height: 11px;
    }
}

/* =========================================================
   ГЛОБАЛЬНЫЙ ДИЗАЙН МОДАЛЬНЫХ ОКОН КАЛЕНДАРЯ
========================================================= */

.md-calendar + .modal .modal-dialog,
.md-calendar ~ .modal .modal-dialog {
    max-width: var(--md-modal-max-width, 720px);
}

.md-calendar + .modal .modal-content,
.md-calendar ~ .modal .modal-content {
    background-color: var(--md-modal-bg, #fff) !important;
    color: var(--md-text-color, #261d22);
    border-radius: var(--md-modal-radius, 0) !important;
    border-color: var(--md-input-border-color, #e8afbf) !important;
}

/* =========================================================
   ЦВЕТНЫЕ СЛОИ ДНЕЙ
   Зеленый — тело карточки дня
   Красный — шапка с числом и днём недели
========================================================= */

.md-calendar .md-calendar-day,
.md-calendar .md-calendar-mobile-day {
    position: relative;
    isolation: isolate;
    background: transparent;
}

/* Зеленый фон тела */
.md-calendar .md-calendar-day::before,
.md-calendar .md-calendar-mobile-day::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: var(--md-calendar-day-bg, #198754);
    pointer-events: none;
}

/* Шапка — отдельный красный слой */
.md-calendar .md-calendar-day-head,
.md-calendar .md-calendar-mobile-day-head {
    position: relative;
    isolation: isolate;
}

.md-calendar .md-calendar-day-head::before {
    content: "";
    position: absolute;
    top: calc(var(--md-calendar-desktop-day-padding, 14px) * -1);
    right: calc(var(--md-calendar-desktop-day-padding, 14px) * -1);
    left: calc(var(--md-calendar-desktop-day-padding, 14px) * -1);
    bottom: -12px;
    z-index: -1;
    background: var(--md-calendar-head-bg, #dc3545);
    pointer-events: none;
}

/* На мобильном геометрия шапки немного другая */
@media (max-width: 767.98px) {
    .md-calendar .md-calendar-mobile-day::before {
        background: var(--md-calendar-mobile-bg, var(--md-calendar-day-bg, #198754));
    }

    .md-calendar .md-calendar-mobile-day-head::before {
        content: "";
        position: absolute;
        top: calc(var(--md-calendar-mobile-padding, 14px) * -1);
        right: calc(var(--md-calendar-mobile-padding, 14px) * -1);
        left: calc(var(--md-calendar-mobile-padding, 14px) * -1);
        bottom: -11px;
        z-index: -1;
        background: var(--md-calendar-head-bg, #dc3545);
        pointer-events: none;
    }
}

/* Контент дня выше фоновых слоёв */
.md-calendar .md-calendar-day-content,
.md-calendar .md-calendar-day-empty-state,
.md-calendar .md-calendar-mobile-master,
.md-calendar .md-calendar-mobile-empty {
    position: relative;
    z-index: 1;
}