/* ========================================
   FULLCALENDAR CUSTOM STYLES
   ======================================== */

/* FullCalendar Core CSS wird automatisch von der global build injiziert */
/* Hier nur Custom Styles und Tailwind-Fixes */

/* ========================================
   TAILWIND RESET FIX FÜR FULLCALENDAR
   ======================================== */

/* Tailwind's Preflight setzt border-width: 0 für alle Elemente.
   Das zerstört FullCalendar's Table-Borders.
   Wir müssen das SELEKTIV für Table-Elemente rückgängig machen. */

.fc table {
    border-collapse: collapse !important;
}

.fc th,
.fc td {
    border: 1px solid #ddd !important;
}

.fc .fc-scrollgrid {
    border: 1px solid #ddd !important;
}

.fc .fc-scrollgrid-section > * {
    border: 1px solid #ddd !important;
}

/* TimeGrid Divider */
.fc .fc-timegrid-divider {
    height: 2px !important;
}

.fc .fc-timegrid-axis {
    width: 60px !important;
}

.fc .fc-timegrid-slot-label {
    vertical-align: middle !important;
}

/* ========================================
   REWE THEME FÜR FULLCALENDAR
   ======================================== */

.fc {
    font-family: inherit;
}

/* Kalender Container auf volle Höhe */
[data-controller="calendar"] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

[data-calendar-target="calendar"] {
    flex: 1;
    min-height: 0;
}

/* ========================================
   ALLE VIEWS: Einfaches Layout
   ======================================== */

/* DayGrid (Monatsansicht): Volle Höhe nutzen */
.fc-dayGridMonth-view {
    height: 100% !important;
}

.fc-dayGridMonth-view .fc-view-harness {
    height: 100% !important;
}

.fc-dayGridMonth-view .fc-scrollgrid {
    height: 100% !important;
}

.fc-dayGridMonth-view .fc-scrollgrid-section-body {
    height: 100% !important;
}

.fc-dayGridMonth-view .fc-scrollgrid-section-body > td {
    height: 100% !important;
}

.fc-dayGridMonth-view .fc-scroller {
    height: 100% !important;
    overflow-y: auto !important;
}

.fc-dayGridMonth-view .fc-daygrid-body {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Tabelle auf volle Höhe */
.fc-dayGridMonth-view .fc-scrollgrid-sync-table {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* tbody als Flex-Container */
.fc-dayGridMonth-view .fc-daygrid-body tbody {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* ALLE Wochen gleich groß mit flex: 1 */
.fc-dayGridMonth-view .fc-daygrid-body tbody tr {
    flex: 1 !important;
    display: flex !important;
}

/* Tage innerhalb der Woche gleichmäßig verteilen */
.fc-dayGridMonth-view .fc-daygrid-body tbody tr td {
    flex: 1 !important;
}

/* Tage-Zellen strecken */
.fc-dayGridMonth-view .fc-daygrid-day-frame {
    height: 100% !important;
    min-height: 80px !important;
}

.fc-dayGridMonth-view .fc-daygrid-day {
    height: 100% !important;
}

/* TimeGrid (Wochen- und Tagesansicht): Volle Höhe für Container */
.fc-timeGridWeek-view,
.fc-timeGridDay-view {
    height: 100% !important;
}

.fc-timeGridWeek-view .fc-view-harness,
.fc-timeGridDay-view .fc-view-harness {
    height: 100% !important;
}

/* TimeGrid: Stunden-Slots */
.fc-timegrid-slot {
    height: 3em !important;
}

/* TimeGrid: Scrollbar für Stunden-Bereich - KEINE max-height, damit alle 24 Stunden sichtbar sind */
.fc-timegrid .fc-scroller-liquid-absolute {
    overflow-y: auto !important;  /* Scrollbar bei Bedarf */
}

/* REWE Button Styling */

.fc .fc-button-primary {
    background-color: #E30613;
    border-color: #E30613;
}

.fc .fc-button-primary:hover {
    background-color: #b8050f;
    border-color: #b8050f;
}

.fc .fc-button-primary:not(:disabled).fc-button-active {
    background-color: #b8050f;
    border-color: #b8050f;
}

.fc .fc-button-primary:focus {
    box-shadow: 0 0 0 0.2rem rgba(227, 6, 19, 0.25);
}

.fc-event {
    cursor: pointer;
    border-radius: 0.25rem;
}

.fc-daygrid-event {
    padding: 2px 4px;
}

.fc-h-event {
    border: none;
}

.fc-event-title {
    font-weight: 500;
}

.fc-toolbar-title {
    font-size: 1.5rem !important;
    font-weight: 600;
    color: #111827;
}

.fc-col-header-cell {
    background-color: #f9fafb;
    font-weight: 600;
    color: #374151;
}

.fc-daygrid-day-number {
    color: #6b7280;
    font-weight: 500;
}

.fc-day-today {
    background-color: #fef3f2 !important;
}

.fc-day-today .fc-daygrid-day-number {
    color: #E30613;
    font-weight: 700;
}

/* Durchgestrichene Darstellung für erledigte Todos */
.fc-event.todo-completed .fc-event-title,
.fc-event.todo-completed .fc-event-title-container {
    text-decoration: line-through;
    opacity: 0.6;
}

.fc-event.todo-completed .fc-list-event-title {
    text-decoration: line-through;
    opacity: 0.6;
}

/* Auch in der Monatsansicht */
.fc-daygrid-event.todo-completed .fc-event-title {
    text-decoration: line-through;
    opacity: 0.6;
}

/* ========================================
   MOBILE OPTIMIERUNGEN
   ======================================== */

@media (max-width: 767px) {
    /* Toolbar kompakter */
    .fc .fc-toolbar {
        padding: 0.5rem 0;
        gap: 0.5rem;
    }

    .fc .fc-toolbar-chunk {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    /* Titel kleiner und mehrzeilig erlauben */
    .fc-toolbar-title {
        font-size: 1.125rem !important;
        line-height: 1.3;
        text-align: center;
    }

    /* Buttons größer für Touch */
    .fc .fc-button {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
        min-width: 44px;
        min-height: 44px;
    }

    .fc .fc-button .fc-icon {
        font-size: 1.25rem;
    }

    /* View-Selector Button */
    .fc .fc-viewSelector-button {
        font-size: 1.25rem;
        padding: 0.5rem;
    }

    /* Tageszahlen größer */
    .fc-daygrid-day-number {
        font-size: 1rem !important;
        padding: 0.5rem;
    }

    /* Wochentage-Header */
    .fc-col-header-cell {
        padding: 0.5rem 0.25rem;
        font-size: 0.75rem;
    }

    /* Event-Titel größer */
    .fc-event-title {
        font-size: 0.875rem;
    }

    .fc-daygrid-event {
        padding: 0.25rem 0.5rem;
        margin-bottom: 2px;
    }

    /* Listen-Ansicht optimieren */
    .fc-list-event {
        padding: 0.75rem 0.5rem;
    }

    .fc-list-event-title {
        font-size: 0.875rem;
    }

    .fc-list-event-time {
        font-size: 0.75rem;
    }

    /* Tages-Zellen höher für bessere Touch-Targets */
    .fc-daygrid-day-frame {
        min-height: 60px !important;
    }

    /* TimeGrid: Kompaktere Darstellung */
    .fc-timegrid-slot {
        height: 2.5em !important;
    }

    .fc-timegrid-axis {
        width: 50px !important;
    }

    .fc-timegrid-slot-label {
        font-size: 0.75rem;
    }

    /* Padding reduzieren */
    .fc-view-harness {
        padding: 0;
    }

    /* More-Link größer */
    .fc-daygrid-more-link {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
}

/* Tablet-Optimierungen */
@media (min-width: 768px) and (max-width: 1023px) {
    .fc-toolbar-title {
        font-size: 1.25rem !important;
    }

    .fc .fc-button {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
}

/* Animation für View-Selector */
@keyframes slide-up {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

.animate-slide-up {
    animation: slide-up 0.3s ease-out;
}

/* ========================================
   TOUCH-OPTIMIERUNGEN
   ======================================== */

/* Größere Touch-Targets für alle interaktiven Elemente */
@media (max-width: 767px) {
    /* Checkboxen größer auf Mobile */
    input[type="checkbox"] {
        width: 1.25rem !important;
        height: 1.25rem !important;
    }

    /* Links und Buttons mit ausreichend Padding */
    a, button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Event-Klick-Bereich vergrößern */
    .fc-event {
        min-height: 32px;
        padding: 0.375rem 0.5rem !important;
    }

    /* Tages-Zellen klickbar machen */
    .fc-daygrid-day {
        cursor: pointer;
    }

    /* Hover-Effekte durch Active-States ersetzen */
    .fc-daygrid-day:active {
        background-color: rgba(227, 6, 19, 0.05);
    }

    .fc-event:active {
        opacity: 0.8;
        transform: scale(0.98);
    }

    /* FAB größer und besser positioniert */
    .fixed.bottom-6.right-6 {
        bottom: 1.5rem;
        right: 1.5rem;
        width: 3.5rem;
        height: 3.5rem;
    }
}

/* Drawer Touch-Optimierungen */
@media (max-width: 767px) {
    /* Drawer-Items größer */
    [data-calendar-sidebar-target="calendarItem"] {
        min-height: 56px;
    }

    /* Drawer-Buttons größer */
    [data-calendar-sidebar-target="drawer"] button {
        min-height: 44px;
        padding: 0.75rem 1rem;
    }

    /* Drawer-Labels größer */
    [data-calendar-sidebar-target="drawer"] label {
        min-height: 56px;
        padding: 0.75rem 1rem;
        cursor: pointer;
    }

    /* Drawer-Header größer */
    [data-calendar-sidebar-target="drawer"] h2,
    [data-calendar-sidebar-target="drawer"] h3 {
        font-size: 1rem;
        padding: 0.5rem 0;
    }
}