/**
 * @package     Joomla.Site
 * @subpackage  mod_gcalendar_booking
 * @copyright   (C) 2026 IFS-ERP Dariusz Mysliwiec
 * @license     GNU General Public License version 2 or later
 */

/* Responsive Design - Phoca Premiere Mobile Experience */
@media (max-width: 768px) {
    .mod-gcalendar-container {
        padding: var(--gcal-spacing-md);
        border-radius: var(--gcal-border-radius-md);
    }

    .mod-gcalendar-container .fc-header-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: var(--gcal-spacing-md);
    }

    .mod-gcalendar-container .fc-toolbar-title {
        font-size: var(--gcal-font-size) !important;
        text-align: center;
    }

    .mod-gcalendar-container .fc-button-primary {
        padding: var(--gcal-spacing-sm) !important;
        font-size: var(--gcal-font-size-sm) !important;
    }

    .gcal-booking-wrapper {
        justify-content: center;
    }

    .gcal-book-btn {
        padding: var(--gcal-spacing-md) var(--gcal-spacing-lg);
        font-size: var(--gcal-font-size-sm);
    }

    .gcal-state-msg {
        padding: var(--gcal-spacing-xl);
        margin: var(--gcal-spacing-md) 0;
    }

    .gcal-debug {
        padding: var(--gcal-spacing-md);
        margin-bottom: var(--gcal-spacing-md);
    }

    /* Modal Mobile Styles */
    .gcal-booking-modal {
        width: 95%;
        max-width: none;
        margin: var(--gcal-spacing-md);
    }

    .gcal-modal-header {
        padding: var(--gcal-spacing-md);
    }

    .gcal-modal-header h3 {
        font-size: var(--gcal-font-size);
    }

    .gcal-modal-body {
        padding: var(--gcal-spacing-md);
    }

    .gcal-form-actions {
        flex-direction: column;
    }

    .gcal-form-actions .gcal-btn {
        width: 100%;
        justify-content: center;
    }

    .gcal-form-actions .gcal-btn-secondary {
        order: 1;
    }

    .gcal-form-actions .gcal-btn-primary {
        order: 0;
    }
}

@media (max-width: 480px) {
    .mod-gcalendar-wrapper {
        /* Prevent horizontal overflow */
        overflow-x: hidden;
    }

    .mod-gcalendar-container {
        padding: var(--gcal-spacing-sm);
        height: auto;
        min-height: 350px;
    }

    .mod-gcalendar-container .fc {
        font-size: var(--gcal-font-size-sm);
    }

    /* Calendar day cells - more touch-friendly */
    .mod-gcalendar-container .fc-daygrid-day {
        min-height: 40px;
        padding: 2px;
    }

    .mod-gcalendar-container .fc-daygrid-day-top {
        flex-direction: row;
    }

    .mod-gcalendar-container .fc-daygrid-day-number {
        font-size: 0.75rem;
        padding: 2px 4px;
    }

    /* Toolbar button groups */
    .mod-gcalendar-container .fc-button-group {
        flex-direction: column;
        gap: var(--gcal-spacing-xs) !important;
    }

    .mod-gcalendar-container .fc-button-primary {
        width: 100%;
        justify-content: center;
    }

    .mod-gcalendar-container .fc-toolbar-chunk {
        width: 100%;
    }

    .mod-gcalendar-container .fc-toolbar-chunk .fc-button {
        width: 100%;
    }

    /* More compact calendar grid on small screens */
    .mod-gcalendar-container .fc-scrollgrid {
        font-size: 0.75rem;
    }

    .mod-gcalendar-container .fc-col-header-cell-cushion {
        padding: var(--gcal-spacing-xs);
        font-size: 0.75rem;
    }

    /* Booking button full width */
    .gcal-book-btn {
        width: 100%;
        justify-content: center;
    }

    /* State messages smaller */
    .gcal-state-msg {
        padding: var(--gcal-spacing-md);
        font-size: var(--gcal-font-size-sm);
    }

    /* Debug info smaller */
    .gcal-debug {
        font-size: 0.75rem;
        padding: var(--gcal-spacing-sm);
    }

    /* Modal Full Screen on very small devices */
    .gcal-booking-modal {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        margin: 0;
        border-radius: 0;
    }

    .gcal-booking-modal::backdrop {
        background: rgba(15, 23, 42, 0.95);
    }

    .gcal-modal-content {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .gcal-modal-body {
        flex: 1;
        overflow-y: auto;
    }

    /* Form elements full width */
    .gcal-form-group input,
    .gcal-form-group textarea {
        font-size: 16px;
        /* Prevent iOS zoom on focus */
    }

    /* Close button larger for touch */
    .gcal-close-btn {
        width: 40px;
        height: 40px;
        font-size: 1.75rem;
    }

    /* Time message smaller */
    .gcal-time-msg {
        font-size: var(--gcal-font-size-sm);
        padding: var(--gcal-spacing-xs) var(--gcal-spacing-sm);
    }
}

/* Tablet specific styles (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    .mod-gcalendar-container {
        height: 450px;
    }

    .gcal-booking-modal {
        width: 85%;
    }

    .gcal-form-actions {
        gap: var(--gcal-spacing-sm);
    }

    .gcal-form-actions .gcal-btn {
        padding: 0.625rem 1.25rem;
    }
}

/* Touch-friendly improvements for all devices */
@media (hover: none) and (pointer: coarse) {

    /* Larger touch targets */
    .mod-gcalendar-container .fc-button-primary {
        min-height: 44px;
        padding: var(--gcal-spacing-sm) var(--gcal-spacing-md) !important;
    }

    .gcal-book-btn {
        min-height: 48px;
        padding: var(--gcal-spacing-md) var(--gcal-spacing-lg) !important;
    }

    .gcal-close-btn {
        min-width: 44px;
        min-height: 44px;
    }

    .gcal-form-group input,
    .gcal-form-group textarea {
        min-height: 48px;
    }

    .gcal-btn {
        min-height: 48px;
        padding: var(--gcal-spacing-md) var(--gcal-spacing-lg) !important;
    }

    /* Remove hover effects on touch devices, keep active states */
    .mod-gcalendar-container .fc-button-primary:hover {
        transform: none;
        box-shadow: var(--gcal-shadow-sm) !important;
    }

    .gcal-book-btn:hover {
        transform: none;
        box-shadow: 0 4px 16px rgba(102, 126, 234, 0.25);
    }

    .gcal-btn-primary:hover,
    .gcal-btn-secondary:hover {
        transform: none;
    }

    .mod-gcalendar-container .fc-event:hover {
        transform: none;
        box-shadow: var(--gcal-shadow-sm) !important;
    }

    /* Active states for touch */
    .mod-gcalendar-container .fc-button-primary:active {
        transform: scale(0.98);
    }

    .gcal-book-btn:active {
        transform: scale(0.98);
    }

    .gcal-btn:active {
        transform: scale(0.98);
    }

    /* Better scroll on mobile */
    .mod-gcalendar-wrapper {
        -webkit-overflow-scrolling: touch;
    }
}

/* Landscape orientation adjustments */
@media (orientation: landscape) and (max-height: 500px) {
    .gcal-booking-modal {
        max-height: 90vh;
        overflow-y: auto;
    }

    .gcal-modal-header {
        padding: var(--gcal-spacing-sm) var(--gcal-spacing-md);
    }

    .gcal-modal-body {
        padding: var(--gcal-spacing-md);
    }

    .gcal-form-group {
        margin-bottom: var(--gcal-spacing-sm);
    }

    .gcal-form-actions {
        margin-top: var(--gcal-spacing-md);
    }
}