/**
 * ═══════════════════════════════════════════════════════════════════════════════════════════════════
 * DEAL MANAGER - CALENDAR RESPONSIVE STYLES
 * ═══════════════════════════════════════════════════════════════════════════════════════════════════
 * 
 * Responsive Anpassungen für die FullCalendar-Komponente.
 * 
 * BREAKPOINTS:
 * - Mobile: < 768px → Tagesansicht, kompakte Darstellung
 * - Tablet: 768-1023px → 3-Tages-Ansicht
 * - Laptop+: ≥ 1024px → Wochenansicht
 * 
 * Erstellt: 14.12.2025
 * ═══════════════════════════════════════════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   BASE CALENDAR STYLES
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

.calendar-container,
.fc-view-harness {
    width: 100%;
    overflow-x: hidden;
}

.fc {
    font-family: inherit;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   MOBILE CALENDAR (< 768px)
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

@media screen and (max-width: 767px) {
    /* Calendar Container */
    .calendar-container {
        padding: 8px;
    }
    
    /* Toolbar - Compact */
    .fc-toolbar {
        flex-direction: column;
        gap: 10px;
        padding: 8px 0;
    }
    
    .fc-toolbar-chunk {
        display: flex;
        justify-content: center;
    }
    
    /* Title */
    .fc-toolbar-title {
        font-size: 16px !important;
        text-align: center;
    }
    
    /* Buttons */
    .fc-button {
        padding: 8px 12px !important;
        font-size: 13px !important;
        min-height: 40px;
        border-radius: 8px !important;
    }
    
    .fc-button-group {
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
    }
    
    /* Day Header */
    .fc-col-header-cell {
        padding: 8px 4px !important;
    }
    
    .fc-col-header-cell-cushion {
        font-size: 12px;
        padding: 6px 4px;
    }
    
    /* Time Grid */
    .fc-timegrid-slot {
        height: 40px !important;
    }
    
    .fc-timegrid-slot-label {
        font-size: 11px;
        padding: 0 4px !important;
    }
    
    /* Events */
    .fc-event {
        font-size: 11px;
        padding: 2px 4px;
        border-radius: 4px;
    }
    
    .fc-event-title {
        font-size: 11px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .fc-event-time {
        font-size: 10px;
    }
    
    /* Day View - Full Width */
    .fc-timegrid-col {
        min-width: 100% !important;
    }
    
    /* Hide Week/Month buttons on mobile */
    .fc-timeGridWeek-button,
    .fc-dayGridMonth-button {
        display: none !important;
    }
    
    /* Scrollable Time Grid */
    .fc-scroller {
        overflow-x: hidden !important;
    }
    
    /* Now Indicator */
    .fc-timegrid-now-indicator-line {
        border-width: 2px;
    }
    
    /* All Day Section */
    .fc-daygrid-day-events {
        min-height: 30px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   TABLET CALENDAR (768px - 1023px)
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

@media screen and (min-width: 768px) and (max-width: 1023px) {
    /* Calendar Container */
    .calendar-container {
        padding: 12px;
    }
    
    /* Toolbar */
    .fc-toolbar {
        flex-wrap: wrap;
        gap: 12px;
    }
    
    /* Title */
    .fc-toolbar-title {
        font-size: 18px !important;
    }
    
    /* Buttons */
    .fc-button {
        padding: 10px 16px !important;
        font-size: 14px !important;
        min-height: 44px;
    }
    
    /* Day Header */
    .fc-col-header-cell-cushion {
        font-size: 13px;
        padding: 8px;
    }
    
    /* Time Grid */
    .fc-timegrid-slot {
        height: 45px !important;
    }
    
    .fc-timegrid-slot-label {
        font-size: 12px;
    }
    
    /* Events */
    .fc-event {
        font-size: 12px;
        padding: 3px 6px;
    }
    
    .fc-event-title {
        font-size: 12px;
    }
    
    .fc-event-time {
        font-size: 11px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   LAPTOP CALENDAR (1024px - 1439px)
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

@media screen and (min-width: 1024px) and (max-width: 1439px) {
    /* Calendar Container */
    .calendar-container {
        padding: 16px;
    }
    
    /* Title */
    .fc-toolbar-title {
        font-size: 20px !important;
    }
    
    /* Buttons */
    .fc-button {
        padding: 10px 18px !important;
        font-size: 14px !important;
    }
    
    /* Time Grid */
    .fc-timegrid-slot {
        height: 50px !important;
    }
    
    /* Events */
    .fc-event {
        font-size: 13px;
        padding: 4px 8px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   DESKTOP CALENDAR (≥ 1440px)
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

@media screen and (min-width: 1440px) {
    /* Calendar Container */
    .calendar-container {
        padding: 20px;
    }
    
    /* Title */
    .fc-toolbar-title {
        font-size: 22px !important;
    }
    
    /* Buttons */
    .fc-button {
        padding: 12px 20px !important;
        font-size: 15px !important;
    }
    
    /* Time Grid */
    .fc-timegrid-slot {
        height: 55px !important;
    }
    
    /* Events */
    .fc-event {
        font-size: 14px;
        padding: 5px 10px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   CALENDAR MODAL RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

/* Mobile: Full Screen Modal */
@media screen and (max-width: 767px) {
    .calendar-modal,
    #calendarModal .modal-dialog {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        margin: 0;
        border-radius: 0;
    }
    
    .calendar-modal .modal-header {
        padding: 16px;
        padding-top: calc(16px + env(safe-area-inset-top, 0px));
    }
    
    .calendar-modal .modal-body {
        padding: 12px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .calendar-modal .modal-footer {
        padding: 16px;
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }
}

/* Tablet+: Centered Modal */
@media screen and (min-width: 768px) {
    .calendar-modal,
    #calendarModal .modal-dialog {
        max-width: 90vw;
        max-height: 90vh;
        width: auto;
        height: auto;
        margin: auto;
        border-radius: 16px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   LANDSCAPE MODE
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

@media screen and (max-width: 767px) and (orientation: landscape) {
    /* Compact Toolbar */
    .fc-toolbar {
        padding: 4px 0;
        gap: 8px;
    }
    
    .fc-toolbar-title {
        font-size: 14px !important;
    }
    
    .fc-button {
        padding: 6px 10px !important;
        font-size: 12px !important;
        min-height: 36px;
    }
    
    /* Smaller Time Slots */
    .fc-timegrid-slot {
        height: 35px !important;
    }
    
    .fc-timegrid-slot-label {
        font-size: 10px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   TOUCH INTERACTIONS
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .fc-button {
        min-width: 44px;
        min-height: 44px;
    }
    
    /* Event touch target */
    .fc-event {
        min-height: 32px;
        cursor: pointer;
    }
    
    /* Active state for touch feedback */
    .fc-button:active {
        transform: scale(0.95);
        transition: transform 0.1s ease;
    }
    
    .fc-event:active {
        opacity: 0.8;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   PRINT STYLES
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

@media print {
    .fc-toolbar-chunk:has(.fc-button-group) {
        display: none;
    }
    
    .fc-event {
        page-break-inside: avoid;
    }
}