.client-calendar-wrapper {
    margin: 20px;
    padding: 20px;
    min-height: 70vh;
}

/* =========================
   Theme variables
   ========================= */

:root {
    --form-bg: #f9fffb;
    --form-surface: #ffffff;
    --form-surface-muted: #f4f8f6;
    --form-border: #c8f5e9;
    --form-border-strong: #9fe5d1;
    --form-text: #044b3a;
    --form-text-soft: #5c7f74;
    --form-placeholder: #8ba79d;
    --form-focus: #0a7a5a;
    --form-focus-strong: #0f8761;
    --form-focus-ring: rgba(10, 122, 90, 0.14);
    --form-danger: #d9534f;
    --form-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
    --form-radius: 14px;
    --form-radius-sm: 10px;
    --calendar-text: #0f624d;
    --calendar-text-muted: #7d958c;
    --calendar-text-disabled: #bcc9c4;
    --calendar-hover-bg: #eefbf6;
    --calendar-today-bg: #e9faf4;
    --calendar-today-border: #9fe5d1;
    --calendar-header-text: #0f8761;
    --calendar-selected-bg: #0f8761;
    --calendar-selected-text: #ffffff;
}

.loader-indicator {
    color: #005840 !important;
}

/* =========================
   Group layout
   ========================= */
.custom-form-group {
    margin-bottom: 18px;
}

    .custom-form-group label {
        display: inline-block;
        margin-bottom: 8px;
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--form-text);
        letter-spacing: 0.01em;
    }

    .custom-form-group .custom-form-hint {
        margin: 7px 2px 0;
        font-size: 0.83rem;
        line-height: 1.45;
        color: var(--form-text-soft);
    }

.custom-filter-popup {
    width: 450px !important;
    max-width: 85vw !important;
    min-width: 320px !important;
}

/* =========================
   Reservation modal
   -------------------------
   The modal CHROME (window shell, green titlebar, close button, window-content
   padding) now lives in the citizen portal's own stylesheet
   (InnOne.PortalObcana.WebObcan/wwwroot/css/style.css) under the shared
   selector ".mio-portal-modal, .reservation-modal" so it is defined once and
   owned by Portal Občana. Only Reservly-specific styling (form fields, chips,
   scrollbars) and the white "service-info" titlebar variant remain below.
   ========================= */

/* =========================
   Service info modal — white titlebar with dark text
   (overrides the green .reservation-modal titlebar above; only for the
   "About the service" info modal, not the reservation edit modal)
   ========================= */
.reservation-modal.service-info-modal .k-window-titlebar {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border-bottom: 1px solid #e5f3ee !important;
}

.reservation-modal.service-info-modal .k-window-title {
    color: #1a1a1a !important;
}

.reservation-modal.service-info-modal .k-window-titlebar-actions .k-window-titlebar-action,
.reservation-modal.service-info-modal .k-window-titlebar-actions .k-window-titlebar-action.k-button,
.reservation-modal.service-info-modal .k-window-titlebar-actions .k-window-titlebar-action.k-button-flat,
.reservation-modal.service-info-modal .k-window-titlebar-actions .k-window-titlebar-action.k-icon-button,
.reservation-modal.service-info-modal .k-window-titlebar-actions .telerik-blazor.k-button.k-window-titlebar-action {
    border: none !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #1a1a1a !important;
}

    .reservation-modal.service-info-modal .k-window-titlebar-actions .k-window-titlebar-action:hover {
        background: #f4f8f6 !important;
        background-color: #f4f8f6 !important;
    }

.reservation-modal.service-info-modal .k-window-titlebar-action .k-button-icon,
.reservation-modal.service-info-modal .k-window-titlebar-action .k-icon,
.reservation-modal.service-info-modal .k-window-titlebar-action .k-svg-icon {
    color: #1a1a1a !important;
    fill: #1a1a1a !important;
}

    .reservation-modal.service-info-modal .k-window-titlebar-action .k-svg-icon svg,
    .reservation-modal.service-info-modal .k-window-titlebar-action .k-svg-icon path {
        fill: #1a1a1a !important;
        stroke: #1a1a1a !important;
    }

.mio-form-group {
    margin-bottom: 1.5rem !important;
    display: flex;
    flex-direction: column;
}

    .mio-form-group label {
        font-weight: 700 !important;
        font-size: 15px !important;
        color: #1a1a1a !important;
        margin-bottom: 6px !important;
        display: block;
    }

.mio-form-hint {
    font-size: 12px !important;
    color: #666666 !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    line-height: 1.4 !important;
}

.reservation-modal .k-input,
.reservation-modal .k-textbox,
.reservation-modal .k-textarea,
.reservation-modal .k-dropdownlist {
    border-radius: 8px !important;
    border-color: #d1eee5 !important;
    transition: all 0.2s ease-in-out !important;
    background-color: #ffffff !important;
}

.reservation-modal .k-input-md {
    min-height: 44px !important;
}

.reservation-modal .k-input-inner {
    padding: 10px 14px !important;
    font-size: 14px !important;
}

.reservation-modal .k-input-focus,
.reservation-modal .k-focus {
    border-color: #005840 !important;
    box-shadow: 0 0 0 3px rgba(0, 88, 64, 0.1) !important;
    background-color: #ffffff !important;
}

.reservation-modal .k-textarea {
    padding: 8px !important;
    min-height: 80px !important;
}

.mio-switch-row {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 0;
    margin-bottom: 1rem;
}

.mio-switch-row__label label {
    font-weight: 700 !important;
    margin-bottom: 0 !important;
    cursor: pointer;
}

.k-switch {
    border-radius: 20px !important;
}

.k-switch-on .k-switch-track {
    background-color: #005840 !important;
    border-color: #004030 !important;
}

.k-switch-off .k-switch-track {
    background-color: #d1eee5 !important;
    border-color: #c8f5e9 !important;
}

.k-switch-thumb {
    background-color: #ffffff !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}

.k-switch:focus .k-switch-track,
.k-switch.k-focus .k-switch-track {
    box-shadow: 0 0 0 3px rgba(0, 88, 64, 0.15) !important;
}

.k-validation-message {
    font-size: 12px !important;
    font-weight: 600 !important;
    margin-top: 4px !important;
    color: #d9534f !important;
}

.k-invalid {
    border-color: #d9534f !important;
}

.k-form-buttons {
    padding-top: 20px !important;
    border-top: 1px solid #f1f1f1;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* .reservation-modal primary/flat button styling moved to the citizen portal's
   style.css (shared ".mio-portal-modal, .reservation-modal" chrome). */

/* body */
.reservation-modal .k-window-content,
.reservation-modal .k-window-content.k-content {
    overflow: auto !important;
    border-radius: 0 0 18px 18px !important;
    padding-right: 16px !important;
    padding-bottom: 16px !important;
}

/* form spacing */
.reservation-modal form {
    margin: 0 !important;
}

.mio-stepper-compact {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #d1eee5 !important;
    background-color: #ffffff !important;
    border-radius: var(--form-radius) !important;
    height: 50px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.mio-stepper-compact__content {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.mio-stepper-compact__value {
    font-weight: 700;
    color: #005840 !important;
    font-size: 0.97rem;
}

.mio-stepper-compact__rate {
    font-size: 12px;
    color: #8ba79d;
}

.mio-stepper-compact .k-button {
    height: 100% !important;
    background: transparent !important;
    box-shadow: none !important;
    width: 44px !important;
    min-height: 100% !important;
    border-radius: 0 !important;
    color: #005840 !important;
    border: none !important;
    transition: background-color 0.2s;
}

    .mio-stepper-compact .k-button:first-child,
    .mio-stepper-compact .k-button:last-child {
        border-right: none !important;
        border-left: none !important;
    }

    .mio-stepper-compact .k-button:hover:not(.k-state-disabled) {
        background-color: #f1faf7 !important;
        color: #004030 !important;
    }

    .mio-stepper-compact .k-button.k-state-disabled {
        opacity: 0.3;
        color: #8ba79d !important;
    }

.reservation-modal .k-chip {
    background-color: rgba(0, 88, 64, 0.05) !important;
    border: 1px solid rgba(0, 88, 64, 0.15) !important;
    color: #005840 !important;
    border-radius: 8px !important;
    padding: 4px 10px !important;
    margin: 3px !important;
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
}

.reservation-modal .k-chip-label,
.reservation-modal .k-chip-text {
    font-weight: 600 !important;
    font-size: 13px !important;
    line-height: 1 !important;
}

.reservation-modal .k-chip-remove-action {
    background-color: transparent !important; 
    color: #005840 !important; 
    border-radius: 6px !important;
    width: 20px !important;
    height: 20px !important;
    margin-left: 8px !important;
    opacity: 0.5 !important;
    transition: all 0.2s ease !important;
}

    .reservation-modal .k-chip-remove-action:hover {
        background-color: rgba(176, 42, 55, 0.1) !important; 
        color: #b02a37 !important;
        opacity: 1 !important;
        transform: scale(1.1);
    }

    .reservation-modal .k-chip-remove-action .k-icon,
    .reservation-modal .k-chip-remove-action .k-svg-icon {
        width: 12px !important;
        height: 12px !important;
    }

.reservation-modal .k-multiselect .k-input-inner {
    padding: 6px 8px !important;
}

.reservation-modal .k-chip:focus,
.reservation-modal .k-chip.k-focus {
    box-shadow: 0 0 0 2px rgba(0, 88, 64, 0.1) !important;
    border-color: #005840 !important;
}

/* =========================
   Telerik inputs
   ========================= */

.custom-form-group .k-input,
.custom-form-group .k-picker,
.custom-form-group .k-dropdownlist,
.custom-form-group .k-multiselect,
.custom-form-group .k-numerictextbox,
.custom-form-group .k-textbox,
.custom-form-group .k-textarea,
.custom-form-group .k-dateinput,
.custom-form-group .k-input-inner,
.custom-form-group .k-chip-list,
.custom-form-group .k-combobox {
    font-size: 0.97rem;
}

.custom-form-group .k-input,
.custom-form-group .k-picker,
.custom-form-group .k-dropdownlist,
.custom-form-group .k-multiselect,
.custom-form-group .k-numerictextbox,
.custom-form-group .k-textbox,
.custom-form-group .k-textarea {
    width: 100%;
    min-height: 50px;
    border-radius: var(--form-radius) !important;
    border: 1px solid var(--form-border) !important;
    background: var(--form-surface) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.custom-form-group .k-textarea {
    min-height: 92px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.custom-form-group .k-input-inner,
.custom-form-group input.k-input-inner,
.custom-form-group textarea.k-input-inner {
    color: var(--form-text) !important;
    background: transparent !important;
    padding: 12px 14px !important;
}

    .custom-form-group .k-input-inner::placeholder,
    .custom-form-group input::placeholder,
    .custom-form-group textarea::placeholder {
        color: var(--form-placeholder) !important;
    }

.custom-form-group .k-input:hover,
.custom-form-group .k-picker:hover,
.custom-form-group .k-dropdownlist:hover,
.custom-form-group .k-multiselect:hover,
.custom-form-group .k-numerictextbox:hover,
.custom-form-group .k-textbox:hover,
.custom-form-group .k-textarea:hover {
    border-color: var(--form-border-strong) !important;
}

.custom-form-group .k-focus,
.custom-form-group .k-picker:focus-within,
.custom-form-group .k-dropdownlist:focus-within,
.custom-form-group .k-multiselect:focus-within,
.custom-form-group .k-numerictextbox:focus-within,
.custom-form-group .k-textbox:focus-within,
.custom-form-group .k-textarea:focus-within {
    border-color: var(--form-focus) !important;
    box-shadow: 0 0 0 4px var(--form-focus-ring) !important;
    outline: none !important;
}

.custom-form-group .k-input-button,
.custom-form-group .k-select,
.custom-form-group .k-picker .k-button {
    border: none !important;
    background: transparent !important;
    color: var(--form-focus) !important;
    box-shadow: none !important;
}

.custom-form-group .k-chip {
    border-radius: 999px !important;
    background: #e9faf4 !important;
    color: var(--form-text) !important;
    border: 1px solid var(--form-border) !important;
    padding-inline: 8px !important;
    min-height: 38px !important;
}

/* =========================
   Disabled and readonly
   ========================= */

.custom-form-group .k-disabled,
.custom-form-group .k-disabled .k-input-inner,
.custom-form-group .k-readonly,
.custom-form-group .k-readonly .k-input-inner {
    background: #efefef !important;
    color: #6f8a81 !important;
    opacity: 1 !important;
    cursor: default !important;
}

.custom-form-group .k-dropdownlist.k-disabled .k-input-button,
.custom-form-group .k-picker.k-disabled .k-input-button,
.custom-form-group .k-combobox.k-disabled .k-input-button {
    display: none !important;
}

.custom-form-group .k-numerictextbox.k-disabled .k-input-spinner,
.custom-form-group .k-numerictextbox.k-disabled .k-spinner,
.custom-form-group .k-numerictextbox.k-disabled .k-spin-button {
    display: none !important;
}

.custom-form-group .k-dropdownlist.k-disabled .k-input-inner,
.custom-form-group .k-picker.k-disabled .k-input-inner,
.custom-form-group .k-combobox.k-disabled .k-input-inner,
.custom-form-group .k-numerictextbox.k-disabled .k-input-inner {
    padding-right: 14px !important;
}

/* =========================
   Validation
   ========================= */

.custom-form-group .k-invalid,
.custom-form-group .k-invalid.k-input,
.custom-form-group .k-invalid.k-picker,
.custom-form-group .k-invalid.k-dropdownlist,
.custom-form-group .k-invalid.k-multiselect,
.custom-form-group .k-invalid.k-numerictextbox,
.custom-form-group .k-invalid.k-textbox,
.custom-form-group .k-invalid.k-textarea {
    border-color: #f0a3a0 !important;
    box-shadow: 0 0 0 4px rgba(217, 83, 79, 0.12) !important;
}

.custom-form-group .k-form-error,
.custom-form-group .k-validation-message {
    margin-top: 6px;
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--form-danger) !important;
}

/* =========================
   Switch row
   ========================= */

.custom-switch-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 6px 16px !important;
    margin: 4px 0 12px !important;
    min-height: 40px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f9fffb 100%);
    border: 1px solid var(--form-border);
    border-radius: var(--form-radius);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.custom-switch-label {
    flex: 1;
    min-width: 0;
}

    .custom-switch-label label {
        display: inline-block;
        margin-bottom: 4px;
        font-size: 14px !important;
        line-height: 1.2 !important;
        font-weight: 700;
        color: var(--form-text);
    }

    .custom-switch-label .custom-form-hint {
        margin: 0;
        font-size: 0.83rem;
        line-height: 1.45;
        color: var(--form-text-soft);
    }

.custom-switch-row .k-switch {
    margin-top: 2px;
    flex: 0 0 auto;
}

.custom-switch-row .k-switch-track {
    border-color: var(--form-border-strong) !important;
    background: #dff7ee !important;
}

.custom-switch-row .k-switch-on .k-switch-track {
    background: var(--form-focus) !important;
    border-color: var(--form-focus) !important;
}

.custom-switch-row .k-switch-thumb {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

/* =========================
   Admin note
   ========================= */

.service-note-snapshot {
    padding: 14px 16px;
    border-radius: var(--form-radius);
    border: 1px solid #eadfba;
    background: linear-gradient(180deg, #fffdf5 0%, #fffaf0 100%);
    color: #5a4a1b;
    line-height: 1.55;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
}

    .service-note-snapshot p:last-child {
        margin-bottom: 0;
    }

/* =========================
   Buttons
   ========================= */

.k-button {
    min-height: 42px;
    padding: 0 16px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.08s ease;
    box-shadow: none !important;
}

.k-button-primary,
.k-button-solid-primary,
.telerik-blazor.k-button.k-button-primary,
.telerik-blazor.k-button.k-button-solid-primary {
    background-color: #005840 !important;
    border-color: #044b3a !important;
    color: #ffffff !important;
}

    .k-button-primary:hover,
    .k-button-solid-primary:hover,
    .telerik-blazor.k-button.k-button-primary:hover,
    .telerik-blazor.k-button.k-button-solid-primary:hover {
        background-color: #007357 !important;
        border-color: #005840 !important;
        color: #ffffff !important;
        box-shadow: 0 6px 18px rgba(0, 88, 64, 0.22) !important;
    }

    .k-button-primary:focus,
    .k-button-primary.k-focus,
    .k-button-solid-primary:focus,
    .k-button-solid-primary.k-focus,
    .telerik-blazor.k-button.k-button-primary:focus,
    .telerik-blazor.k-button.k-button-primary.k-focus,
    .telerik-blazor.k-button.k-button-solid-primary:focus,
    .telerik-blazor.k-button.k-button-solid-primary.k-focus {
        box-shadow: 0 0 0 4px rgba(0, 88, 64, 0.18) !important;
    }

.k-button-flat,
.k-button-flat-base,
.telerik-blazor.k-button.k-button-flat,
.telerik-blazor.k-button.k-button-flat-base {
    background-color: #ffffff !important;
    border: 1px solid #c8f5e9 !important;
    color: #044b3a !important;
}

    .k-button-flat:hover,
    .k-button-flat-base:hover,
    .telerik-blazor.k-button.k-button-flat:hover,
    .telerik-blazor.k-button.k-button-flat-base:hover {
        background-color: #f3fbf7 !important;
        border-color: #9fe5d1 !important;
        color: #044b3a !important;
    }

    .k-button-flat:focus,
    .k-button-flat.k-focus,
    .k-button-flat-base:focus,
    .k-button-flat-base.k-focus,
    .telerik-blazor.k-button.k-button-flat:focus,
    .telerik-blazor.k-button.k-button-flat.k-focus,
    .telerik-blazor.k-button.k-button-flat-base:focus,
    .telerik-blazor.k-button.k-button-flat-base.k-focus {
        box-shadow: 0 0 0 4px rgba(10, 122, 90, 0.12) !important;
    }

.k-button:active {
    transform: translateY(1px);
}

.k-button .k-button-icon,
.k-button .k-svg-icon {
    margin-right: 6px;
}

.k-input-spinner.k-spin-button {
    display: none !important;
}

/* =========================
   Dropdown popups
   ========================= */
.k-list-container,
.k-popup.k-list-container {
    border-radius: 14px !important;
    border: 1px solid #c8f5e9 !important;
    background: #ffffff !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12) !important;
    overflow: hidden !important;
}

    .k-list-container .k-list-content,
    .k-popup.k-list-container .k-list-content,
    .k-list-container .k-list-ul,
    .k-popup.k-list-container .k-list-ul {
        padding: 6px !important;
        background: #ffffff !important;
    }

    .k-list-container .k-list-item,
    .k-list-container .k-list-optionlabel,
    .k-popup.k-list-container .k-list-item,
    .k-popup.k-list-container .k-list-optionlabel {
        min-height: 42px !important;
        padding: 10px 12px !important;
        border-radius: 10px !important;
        color: #044b3a !important;
        transition: background-color 0.15s ease, color 0.15s ease;
    }

        .k-list-container .k-list-item:hover,
        .k-list-container .k-list-optionlabel:hover,
        .k-popup.k-list-container .k-list-item:hover,
        .k-popup.k-list-container .k-list-optionlabel:hover {
            background: #eefbf6 !important;
            color: #044b3a !important;
        }

    .k-list-container .k-selected,
    .k-list-container .k-selected:hover,
    .k-popup.k-list-container .k-selected,
    .k-popup.k-list-container .k-selected:hover {
        background: #0a7a5a !important;
        color: #ffffff !important;
    }

    .k-list-container .k-focus,
    .k-popup.k-list-container .k-focus {
        background: #e6f7f1 !important;
        color: #044b3a !important;
        box-shadow: inset 0 0 0 1px #9fe5d1 !important;
    }

.k-list-filter,
.k-searchbox {
    padding: 8px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #edf5f2 !important;
}

    .k-list-filter .k-input,
    .k-searchbox .k-input {
        border-radius: 10px !important;
        border: 1px solid #c8f5e9 !important;
        box-shadow: none !important;
    }

.k-no-data,
.k-nodata {
    padding: 12px 14px !important;
    color: #6b8c81 !important;
}

/* =========================
   Date and datetime popup
   ========================= */

.k-datetime-container,
.k-calendar-container {
    border-radius: 20px !important;
    border: 1px solid #c8f5e9 !important;
    background: #ffffff !important;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12) !important;
    overflow: hidden !important;
}

    .k-datetime-container .k-datetime-wrap,
    .k-calendar-container .k-calendar {
        box-sizing: border-box !important;
        background: #ffffff !important;
    }

    /* =========================
   Date and time tabs
   ========================= */

    .k-datetime-container .k-datetime-buttongroup .k-button-group {
        width: 100% !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 0 10px 0 !important;
        border: 1px solid #d7ddd9 !important;
        border-radius: 14px !important;
        background: #f3f4f3 !important;
        overflow: hidden !important;
        box-shadow: none !important;
    }

    .k-datetime-container .k-datetime-buttongroup .k-button,
    .k-datetime-container .k-datetime-buttongroup .k-button.k-button-solid-base {
        min-height: 38px !important;
        height: 38px !important;
        padding: 0 14px !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #4b4b4b !important;
        font-weight: 700 !important;
        box-shadow: none !important;
        outline: none !important;
        background-image: none !important;
    }

        .k-datetime-container .k-datetime-buttongroup .k-button.k-selected,
        .k-datetime-container .k-datetime-buttongroup .k-button[aria-pressed="true"] {
            background: var(--form-focus-strong) !important;
            color: #ffffff !important;
            box-shadow: none !important;
            outline: none !important;
            border: none !important;
            background-image: none !important;
            position: relative;
            z-index: 1;
        }

            .k-datetime-container .k-datetime-buttongroup .k-button::before,
            .k-datetime-container .k-datetime-buttongroup .k-button::after,
            .k-datetime-container .k-datetime-buttongroup .k-button.k-selected::before,
            .k-datetime-container .k-datetime-buttongroup .k-button.k-selected::after {
                display: none !important;
                content: none !important;
            }

    /* =========================
   Calendar navigation
   ========================= */

    .k-datetime-container .k-calendar-header,
    .k-calendar-container .k-calendar-header {
        padding: 8px 8px 10px 8px !important;
        background: transparent !important;
        border-bottom: none !important;
        box-sizing: border-box !important;
    }

    .k-datetime-container .k-calendar-nav-prev,
    .k-datetime-container .k-calendar-nav-next,
    .k-calendar-container .k-calendar-nav-prev,
    .k-calendar-container .k-calendar-nav-next {
        padding: 0 !important;
        margin: 3px !important;
    }

    .k-datetime-container .k-calendar-header .k-button,
    .k-datetime-container .k-calendar-header .k-nav-fast,
    .k-datetime-container .k-calendar-header .k-nav-prev,
    .k-datetime-container .k-calendar-header .k-nav-next,
    .k-calendar-container .k-calendar-header .k-button,
    .k-calendar-container .k-calendar-header .k-nav-fast,
    .k-calendar-container .k-calendar-header .k-nav-prev,
    .k-calendar-container .k-calendar-header .k-nav-next {
        min-width: 36px !important;
        min-height: 36px !important;
        height: 36px !important;
        border-radius: 12px !important;
        border: 1px solid #bfeadf !important;
        background: #ffffff !important;
        color: var(--form-text) !important;
        box-shadow: none !important;
        font-weight: 700 !important;
    }

        .k-datetime-container .k-calendar-header .k-button:hover,
        .k-datetime-container .k-calendar-header .k-nav-fast:hover,
        .k-datetime-container .k-calendar-header .k-nav-prev:hover,
        .k-datetime-container .k-calendar-header .k-nav-next:hover,
        .k-calendar-container .k-calendar-header .k-button:hover,
        .k-calendar-container .k-calendar-header .k-nav-fast:hover,
        .k-calendar-container .k-calendar-header .k-nav-prev:hover,
        .k-calendar-container .k-calendar-header .k-nav-next:hover {
            background: #eefbf6 !important;
            border-color: #9fe5d1 !important;
        }

    .k-datetime-container .k-calendar-header .k-button-text,
    .k-datetime-container .k-calendar-header .k-nav-fast,
    .k-calendar-container .k-calendar-header .k-button-text,
    .k-calendar-container .k-calendar-header .k-nav-fast {
        color: var(--calendar-header-text) !important;
        font-weight: 800 !important;
        font-size: 0.95rem !important;
    }

    /* Header text and buttons in green */
    .k-datetime-container .k-calendar-header .k-button,
    .k-datetime-container .k-calendar-header .k-nav-fast,
    .k-calendar-container .k-calendar-header .k-button,
    .k-calendar-container .k-calendar-header .k-nav-fast {
        color: var(--form-focus-strong) !important;
    }

    /* Center arrow icons properly */
    .k-datetime-container .k-calendar-header .k-nav-prev,
    .k-datetime-container .k-calendar-header .k-nav-next,
    .k-calendar-container .k-calendar-header .k-nav-prev,
    .k-calendar-container .k-calendar-header .k-nav-next {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
    }

    /* Remove icon offset in calendar navigation buttons */
    .k-datetime-container .k-calendar-header .k-button .k-button-icon,
    .k-datetime-container .k-calendar-header .k-button .k-svg-icon,
    .k-calendar-container .k-calendar-header .k-button .k-button-icon,
    .k-calendar-container .k-calendar-header .k-button .k-svg-icon {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    /* =========================
   Calendar day styles
   ========================= */

    .k-datetime-container .k-calendar,
    .k-calendar-container .k-calendar {
        width: 100% !important;
        font-size: 0.92rem !important;
    }

    .k-datetime-container .k-calendar-th,
    .k-datetime-container .k-calendar-thead th,
    .k-calendar-container .k-calendar-th,
    .k-calendar-container .k-calendar-thead th {
        color: var(--calendar-text-muted) !important;
        font-size: 0.74rem !important;
        font-weight: 700 !important;
        padding-bottom: 4px !important;
        text-transform: uppercase;
    }

    .k-datetime-container .k-calendar-td,
    .k-calendar-container .k-calendar-td {
        padding: 2px !important;
    }

        .k-datetime-container .k-calendar-td .k-link,
        .k-calendar-container .k-calendar-td .k-link {
            width: 34px !important;
            height: 34px !important;
            line-height: 34px !important;
            border-radius: 10px !important;
            font-size: 0.95rem !important;
            font-weight: 600 !important;
            color: var(--calendar-text) !important;
            background: transparent !important;
            box-shadow: none !important;
            transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
        }

            .k-datetime-container .k-calendar-td .k-link:hover,
            .k-calendar-container .k-calendar-td .k-link:hover {
                background: var(--calendar-hover-bg) !important;
                color: var(--calendar-text) !important;
            }

        .k-datetime-container .k-calendar-td.k-today .k-link,
        .k-calendar-container .k-calendar-td.k-today .k-link {
            background: var(--calendar-today-bg) !important;
            color: var(--form-focus-strong) !important;
            box-shadow: inset 0 0 0 1px var(--calendar-today-border) !important;
        }

        .k-datetime-container .k-calendar-td.k-selected .k-link,
        .k-datetime-container .k-calendar-td.k-selected .k-link:hover,
        .k-calendar-container .k-calendar-td.k-selected .k-link,
        .k-calendar-container .k-calendar-td.k-selected .k-link:hover {
            background: var(--calendar-selected-bg) !important;
            color: var(--calendar-selected-text) !important;
            box-shadow: none !important;
        }

        .k-datetime-container .k-calendar-td.k-other-month .k-link,
        .k-datetime-container .k-calendar-td.k-out-of-range .k-link,
        .k-calendar-container .k-calendar-td.k-other-month .k-link,
        .k-calendar-container .k-calendar-td.k-out-of-range .k-link {
            color: var(--calendar-text-disabled) !important;
        }

        .k-datetime-container .k-calendar-td.k-disabled .k-link,
        .k-datetime-container .k-calendar-td[aria-disabled="true"] .k-link,
        .k-calendar-container .k-calendar-td.k-disabled .k-link,
        .k-calendar-container .k-calendar-td[aria-disabled="true"] .k-link {
            color: #d0d9d5 !important;
            background: transparent !important;
            cursor: not-allowed !important;
        }

    /* =========================
   Time view
   ========================= */

    .k-datetime-container .k-time-header {
        min-height: 32px !important;
        padding: 0 8px 8px 8px !important;
        background: transparent !important;
        border-bottom: none !important;
        color: #4b4b4b !important;
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
    }

    .k-datetime-container .k-time-list,
    .k-datetime-container .k-time-list-content,
    .k-datetime-container .k-time-selector {
        width: 100% !important;
        min-width: 0 !important;
        background: #ffffff !important;
    }

        .k-datetime-container .k-time-list .k-item,
        .k-datetime-container .k-time-selector .k-item {
            min-height: 34px !important;
            height: 34px !important;
            line-height: 34px !important;
            padding: 0 8px !important;
            border-radius: 10px !important;
            font-size: 0.95rem !important;
            color: #044b3a !important;
        }

            .k-datetime-container .k-time-list .k-item:hover,
            .k-datetime-container .k-time-selector .k-item:hover {
                background: #eefbf6 !important;
            }

        .k-datetime-container .k-time-list .k-selected,
        .k-datetime-container .k-time-selector .k-selected {
            background: var(--form-focus-strong) !important;
            color: #ffffff !important;
        }

    /* Add inner spacing for the time header */
    .k-datetime-container .k-time-header,
    .k-calendar-container .k-time-header {
        padding: 0 10px 8px 10px !important;
        box-sizing: border-box !important;
    }

        /* Push the "Now" button slightly away from the right edge */
        .k-datetime-container .k-time-header .k-time-now,
        .k-calendar-container .k-time-header .k-time-now {
            margin-right: 8px !important;
        }

    /* =========================
   Popup footer
   ========================= */

    .k-datetime-container .k-datetime-footer,
    .k-datetime-container .k-actions.k-actions-horizontal,
    .k-calendar-container .k-actions.k-actions-horizontal {
        display: flex !important;
        gap: 8px !important;
        padding: 12px 8px 8px 8px !important;
        background: transparent !important;
        border-top: none !important;
        box-sizing: border-box !important;
    }

        .k-datetime-container .k-datetime-footer .k-button,
        .k-datetime-container .k-actions.k-actions-horizontal .k-button,
        .k-calendar-container .k-actions.k-actions-horizontal .k-button {
            flex: 1 1 0;
            min-height: 40px !important;
            height: 40px !important;
            border-radius: 14px !important;
            font-weight: 700 !important;
            box-shadow: none !important;
        }

            .k-datetime-container .k-datetime-footer .k-button.k-primary,
            .k-datetime-container .k-actions.k-actions-horizontal .k-button.k-primary,
            .k-calendar-container .k-actions.k-actions-horizontal .k-button.k-primary,
            .k-datetime-container .k-datetime-footer .k-button-solid-primary,
            .k-datetime-container .k-actions.k-actions-horizontal .k-button-solid-primary,
            .k-calendar-container .k-actions.k-actions-horizontal .k-button-solid-primary {
                background: #005840 !important;
                border: 1px solid #044b3a !important;
                color: #ffffff !important;
            }

            .k-datetime-container .k-datetime-footer .k-button:not(.k-button-primary):not(.k-button-solid-primary),
            .k-datetime-container .k-actions.k-actions-horizontal .k-button:not(.k-button-primary):not(.k-button-solid-primary),
            .k-calendar-container .k-actions.k-actions-horizontal .k-button:not(.k-button-primary):not(.k-button-solid-primary) {
                background: #f7fbf9 !important;
                border: 1px solid #bfeadf !important;
                color: #044b3a !important;
            }

/* =========================
   Small visual polish
   ========================= */

.custom-form-group > label::after {
    content: "";
}

.custom-form-group .k-clear-value {
    color: #7f9d92 !important;
}

    .custom-form-group .k-clear-value:hover {
        color: var(--form-focus) !important;
    }

/* =========================
   Reservation modal scrollbar
   ========================= */

.reservation-modal .k-window-content,
.reservation-modal .k-window-content.k-content {
    overflow: auto !important;
}

    .reservation-modal .k-window-content::-webkit-scrollbar {
        width: 10px !important;
        height: 10px !important;
        display: block !important;
    }

    .reservation-modal .k-window-content::-webkit-scrollbar-button {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        background: transparent !important;
    }

    .reservation-modal .k-window-content::-webkit-scrollbar-track {
        background: #eaf7f1 !important;
        border-radius: 999px !important;
        margin: 0 !important;
        border: none !important;
    }

    .reservation-modal .k-window-content::-webkit-scrollbar-thumb {
        background: #0a7a5a !important;
        border-radius: 999px !important;
        border: 2px solid #eaf7f1 !important;
        background-clip: padding-box !important;
    }

        .reservation-modal .k-window-content::-webkit-scrollbar-thumb:hover {
            background: #08684c !important;
        }

/* =========================
   Responsive
   ========================= */

@media (max-width: 768px) {
    .client-calendar-wrapper {
        margin: 65px 10px;
        padding: 0px;
    }

    .custom-form-group {
        margin-bottom: 16px;
    }

        .custom-form-group label,
        .custom-switch-label label {
            font-size: 0.92rem;
        }

        .custom-form-group .custom-form-hint,
        .custom-switch-label .custom-form-hint {
            font-size: 0.8rem;
        }

    .custom-switch-row {
        padding: 12px 14px;
        gap: 12px;
    }

    .custom-form-group .k-input,
    .custom-form-group .k-picker,
    .custom-form-group .k-dropdownlist,
    .custom-form-group .k-multiselect,
    .custom-form-group .k-numerictextbox,
    .custom-form-group .k-textbox,
    .custom-form-group .k-textarea {
        min-height: 48px;
    }
}