/* Shared mobile layout rules. Fixed-width data stays inside scroll containers. */
#calendar_app {
    min-width: 0;
    max-width: 100%;
    font-family: inherit;
}

#calendar_app .month-calendar-area,
#calendar_app .day-details-area,
#calendar_app .mini-month-card {
    min-width: 0;
}

#calendar_app .month-grid,
#calendar_app .mini-days-header,
#calendar_app .mini-days-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

#calendar_app[dir="rtl"] .ki-left,
#calendar_app[dir="rtl"] .ki-right,
#calendar_app[dir="rtl"] .ki-black-left {
    transform: rotate(180deg);
}

#calendar_app .event-time {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: start;
}

[x-cloak] {
    display: none !important;
}

.live-video-panel {
    right: 380px !important;
    left: auto !important;
}

html[dir="rtl"] .live-video-panel {
    left: 380px !important;
    right: auto !important;
}

@media screen and (max-width: 1199.98px) {
    .live-video-panel {
        margin: .75rem !important;
        right: .75rem !important;
        left: auto !important;
        width: min(650px, calc(100vw - 3rem)) !important;
        max-height: calc(100vh - 3rem);
        max-height: calc(100dvh - 3rem);
    }

    html[dir="rtl"] .live-video-panel {
        left: .75rem !important;
        right: auto !important;
    }
}

@media screen and (max-width: 991.98px) {
    .app-content .card,
    .app-content .card-body,
    .app-content .dataTables_wrapper,
    .app-content [class*="col-"],
    .app-content .flex-grow-1 {
        min-width: 0;
        max-width: 100%;
    }

    .app-content .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .app-content .table-responsive .dataTable {
        min-width: 600px;
    }

    .app-content .card-header .form-control,
    .app-content .card-header .form-select:not(.select2-hidden-accessible),
    .app-content .card-header .select2-container {
        max-width: 100%;
    }

    .app-content .dataTables_paginate .pagination {
        flex-wrap: wrap;
        row-gap: .5rem;
    }

    .app-content .dataTables_length label,
    .app-content .dataTables_filter label {
        white-space: normal;
    }

    .app-content .dataTables_wrapper > .row {
        margin-inline: 0;
        row-gap: .75rem;
    }

    .app-content .table-responsive td,
    .app-content .table-responsive th {
        vertical-align: middle;
    }

    #calendar_app .month-view-container {
        grid-template-columns: minmax(0, 1fr);
    }

    #calendar_app .month-calendar-area {
        border-inline-end: 0;
        border-bottom: 1px solid rgba(0, 0, 0, .05);
    }

    #calendar_app .month-day {
        min-width: 0;
        min-height: 36px;
    }

    #calendar_app .selected-date-title,
    #calendar_app .event-name,
    #calendar_app .event-meta {
        overflow-wrap: anywhere;
    }
    .app-root,
    .app-page,
    .app-wrapper,
    .app-main,
    .app-main > .flex-column-fluid,
    .app-content,
    .app-content > .app-container,
    .auth-form-panel,
    .auth-form-wrapper {
        min-width: 0;
        max-width: 100%;
    }

    .app-page,
    .app-wrapper,
    .app-main,
    .app-content {
        width: 100%;
    }

    .app-content .card-header {
        gap: .75rem;
    }

    .app-content .card-header > .card-title {
        min-width: 0;
        max-width: 100%;
        flex-wrap: wrap;
        overflow-wrap: anywhere;
    }

    .app-content .card-toolbar {
        max-width: 100%;
        flex-wrap: wrap;
        gap: .5rem;
    }

    .mobile-list-filters {
        width: 100%;
        gap: .75rem;
    }

    .mobile-list-filters > div {
        flex: 1 1 180px;
        min-width: 0;
        max-width: 100%;
        margin-inline: 0 !important;
    }

    .mobile-list-filters .form-control,
    .mobile-list-filters .form-select:not(.select2-hidden-accessible),
    .mobile-list-filters .select2-container {
        width: 100% !important;
        max-width: 100%;
    }

    .app-content .table-responsive {
        max-width: 100%;
        min-width: 0;
    }

    .app-content .stepper.stepper-pills .stepper-nav {
        flex-direction: row;
        flex-wrap: nowrap;
        min-width: 0;
        max-width: 100%;
        overflow-x: auto;
        padding-bottom: .75rem;
    }

    .app-content .stepper-nav .stepper-item {
        flex-shrink: 0;
    }

    .app-content .stepper-nav .stepper-title {
        white-space: nowrap;
    }

    .public-event-shell .event-hero-media {
        min-height: 0;
        height: 220px !important;
    }

    .mobile-detail-table td {
        overflow-wrap: anywhere;
        min-width: 100px;
    }

    .app-content h1,
    .app-content h2,
    .app-content .card-label,
    .company-profile-shell h1,
    .public-event-shell h1 {
        overflow-wrap: anywhere;
    }

    .public-event-shell > .container .row,
    .company-profile-shell > .container .row {
        --bs-gutter-x: 1.5rem;
    }

    .public-event-shell .mobile-event-company-name {
        position: static !important;
        transform: none !important;
        margin-top: 0 !important;
        margin-bottom: 1rem;
        max-width: 100%;
        overflow-wrap: anywhere;
        text-align: center;
    }

    #kt_app_header_wrapper {
        min-width: 0;
    }

    #kt_app_sidebar_mobile_toggle,
    #kt_app_header_menu_toggle {
        min-width: 44px;
        min-height: 44px;
    }

    .auth-brand-link {
        max-width: 100%;
    }

    .auth-brand-logo {
        max-width: 100%;
        height: auto !important;
        max-height: 80px;
        object-fit: contain;
    }

    /* The admin lens remains available above the header's icon controls. */
    body:has(#user-lens-container) {
        --bs-app-header-height: 110px;
    }

    body:has(#user-lens-container) #kt_app_header {
        height: var(--bs-app-header-height);
    }

    #kt_app_header_wrapper:has(#user-lens-container) {
        flex: 1;
    }

    .app-navbar:has(#user-lens-container) {
        flex: 1;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-content: center;
        row-gap: .5rem;
        min-width: 0;
    }

    #user-lens-container {
        flex: 1 1 100%;
        width: 100% !important;
        min-width: 0;
        margin-inline: 0 !important;
    }

    .live-chat-tray {
        margin: .75rem !important;
    }

    .live-chat-panel {
        width: min(360px, calc(100vw - 1.5rem)) !important;
        max-height: calc(100vh - 6rem);
        max-height: calc(100dvh - 6rem);
    }

    .live-chat-panel .card-body {
        min-height: 0;
    }

}

@media screen and (max-width: 575.98px) {
    .app-content .card > .card-header,
    .app-content .card > .card-body,
    .app-content .card > .card-footer {
        padding-inline: 1rem;
    }

    .mobile-list-filters > div {
        flex-basis: 100%;
        width: 100% !important;
    }

    .app-content .card-toolbar > .d-flex {
        flex-wrap: wrap;
        gap: .5rem;
    }

    .app-content .card-header > .card-title,
    .app-content .card-header > .card-toolbar {
        width: 100%;
        margin-inline: 0;
    }

    .app-content .card-header .form-control,
    .app-content .card-header .form-select:not(.select2-hidden-accessible) {
        width: 100% !important;
    }

    #kt_app_toolbar_container {
        flex-wrap: wrap;
        gap: .5rem;
    }

    .app-content .nav.nav-tabs,
    .app-content .nav.nav-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        max-width: 100%;
    }

    .app-content .nav.nav-tabs > .nav-item,
    .app-content .nav.nav-pills > .nav-item {
        flex-shrink: 0;
    }

    .auth-footer-links a {
        padding-inline: .25rem !important;
    }

    /* Prevent iOS from zooming the page when a small form control is focused. */
    .form-control,
    .form-select {
        font-size: 16px;
    }

    .modal-dialog .modal-body {
        padding-inline: 1rem !important;
    }

    .modal-dialog .modal-footer {
        gap: .5rem;
    }

    .modal-dialog img,
    .modal-dialog video {
        max-width: 100%;
    }

    #qr-preview-image {
        max-width: 100% !important;
    }

    #calendar_app .calendar-header,
    #calendar_app .year-view-grid,
    #calendar_app .month-calendar-area,
    #calendar_app .day-details-area {
        padding: 1rem;
    }

    #calendar_app .month-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: .25rem;
    }

    .mobile-profile-heading {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    #calendar_app .calendar-header > .d-flex {
        flex-wrap: wrap;
        min-width: 0;
        max-width: 100%;
    }

    #calendar_app .month-calendar-area > .d-flex {
        flex-wrap: wrap;
        gap: .75rem;
    }

    .mobile-subscription-card > .flex-grow-1 {
        flex-basis: calc(100% - 100px);
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .mobile-subscription-card > .border-start {
        width: 100%;
        align-items: flex-start !important;
        margin-inline: 0 !important;
        padding-inline-start: 0 !important;
        border-inline-start: 0 !important;
    }
}