/* Mobile styles - typically 768px and below */
@media screen and (max-width: 768px) {
    /* Mobile app-like container */
    .acuity-calendar-wrapper {
        margin: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Filter layout */
    .acuity-calendar-wrapper.has-filters .filter-buttons-row {
        flex-direction: column !important;
        gap: 15px;
    }

    /* Credits display */
    .acuity-calendar-wrapper.has-filters .acuity-credits-display {
        margin-top: 15px;
        padding-left: 0;
        border-left: none;
    }

    .acuity-calendar-wrapper .calendar-title {
        margin: 0 !important;
        margin-bottom: 1rem !important;
        margin-top: 1rem !important;
    }
    /* Calendar header toolbar */
    .fc .fc-toolbar.fc-header-toolbar {
        display: flex;
        flex-direction: column-reverse;
        gap: 0px !important;
        background: #4A2159;
        color: white;
        margin: 0;
        padding: 8px 10px !important;
    }

    .fc-daygrid-event-harness {
        margin-bottom: 10px !important;
        padding-left: 6px;
    
    }


    .fc .fc-toolbar-chunk {
        display: flex;
        justify-content: center;
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
    }

    .fc .fc-button-group {
        display: flex;
        gap: 5px;
    }

    .fc .fc-button {
        padding: 6px 8px !important;
        font-size: 13px !important;
    }

    .fc .fc-toolbar-title {
        font-size: 16px !important;
        color: #fff;
        margin: 0.5rem 0;
        color:#fff;
        margin: 7px 0;
    }

    /* Hide filters by default */
    .acuity-filters-section {
        display: none !important;
    }

    /* Show filters when active */
    .acuity-filters-section.active {
        display: block !important;
        padding: 15px;
        background: #fff;
        border-bottom: 1px solid #eee;
    }

    /* Smaller filter buttons */
    .acuity-calendar-wrapper.has-filters .acuity-filter-btn {
        padding: 6px 12px !important;
        font-size: 14px !important;
        min-height: 36px !important;
    }

    /* Calendar container */
    #acuity-calendar {
        background: #fff;
        height: calc(100vh - 60px); /* Full height minus header space */
    }

    /* FullCalendar container */
    .fc {
        height: 100% !important;
        background: #fff;
    }

    /* Navigation buttons */
    .fc .fc-button:focus {
        box-shadow: none !important;
    }

    /* Month View */
    .fc .fc-daygrid-day {
        min-height: 70px !important;
    }

    .fc .fc-daygrid-day-frame {
        height: 100%;
        min-height: 100%;
    }

    .fc .fc-daygrid-day-top {
        padding: 8px !important;
    }

    .fc .fc-daygrid-day-number {
        font-size: 14px !important;
        margin: 2px !important;
        font-weight: bold;
    }

    /* Events */
    .fc-daygrid-event {
        white-space: normal !important;
        margin: 1px 0 !important;
        padding: 0 !important;
    }

    .fc-daygrid-event .fc-event-title,
    .fc-daygrid-event .fc-event-time {
        font-size: 10px !important;
        line-height: 1.1 !important;
    }

    .fc-event-title {
        display: inline !important;
        padding: 0 !important;
    }

    /* List View */
    .fc-list-view {
        border: none !important;
    }

    .fc-list-day-cushion {
        background: #f5f5f5 !important;
        padding: 12px !important;
    }

    .fc-list-event {
        padding: 12px !important;
        border-bottom: 1px solid #eee !important;
    }

    .fc-list-event-time {
        font-weight: 500 !important;
    }

    /* View toggle buttons */
    .fc .fc-button-active {
        background: rgba(255, 255, 255, 0.2) !important;
    }

    /* Mobile filter toggle */
    .mobile-filter-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 12px;
        background: #4A2159;
        color: white;
        border: none;
        font-weight: 600;
        cursor: pointer;
    }

    /* Today highlight */
    .fc .fc-day-today {
        background: rgba(74, 33, 89, 0.05) !important;
    }

    /* More events popover */
    .fc-more-popover {
        border: none !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
        border-radius: 8px !important;
    }

    .fc-more-popover .fc-popover-header {
        background: #4A2159 !important;
        color: white !important;
        padding: 10px !important;
        border-radius: 8px 8px 0 0 !important;
    }


    /* Show more events button */
    .fc-daygrid-more-link {
        font-size: 11px !important;
        margin: 0 2px !important;
        padding: 2px !important;
        background: #f0f0f0;
        border-radius: 3px;
    }

    .fc-event-mobile {
        line-height: 10px !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .fc-event-time {
        padding: 0 !important;
    }
}