/**
 * Layout: header, topbar, filters bar, safe-area, responsive
 */

@media (min-width: 769px) {
    #weekViewContainer .border.border-slate-200 { min-width: 1000px; }
    #weekDaysHeader > div, #weekEventsGrid > div { min-width: 140px; }
}

@media (max-width: 640px) {
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
        position: relative;
    }

    header {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    header > div {
        max-width: 100% !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    main {
        max-width: 100% !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }

    #filtersBar {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .event-card { padding: 1rem !important; }
    .event-card .w-14 { width: 3rem !important; height: 3rem !important; }
    .event-card .h-14 { height: 3rem !important; }
    .event-card .text-base { font-size: 0.9rem !important; }
    .event-card .flex-col.gap-2 {
        flex-direction: row !important;
        width: 100%;
        justify-content: flex-end;
        margin-top: 1rem;
    }
    .event-card .w-11 { width: 2.5rem !important; height: 2.5rem !important; }
    .event-card .h-11 { height: 2.5rem !important; }

    #calendarGrid {
        min-width: 700px !important;
        grid-template-columns: repeat(7, minmax(100px, 1fr)) !important;
    }
    #monthViewContainer {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    #calendarGrid > div {
        min-height: 100px !important;
        min-width: 100px !important;
        padding: 5px !important;
        overflow: visible !important;
    }
    #calendarGrid .text-xs { font-size: 0.72rem !important; }
    #calendarGrid .space-y-1 { gap: 3px !important; }
    #calendarGrid .space-y-1 > div[data-event-id] {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        padding: 5px 6px !important;
        min-height: 36px !important;
        border-radius: 4px !important;
        font-size: 0.65rem !important;
        line-height: 1.25 !important;
        border: 1px solid rgba(0,0,0,0.12) !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    #calendarGrid .max-h-\[120px\] {
        max-height: 160px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .event-card > div.flex.items-start.justify-between {
        flex-direction: column !important;
    }
    .event-card .flex.items-center.gap-4.mb-4 {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }
    .event-card .flex.items-center.gap-2.mb-2 { flex-wrap: wrap; }

    #listView, #calendarView, #eventsContainer {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* listView scroll: già definito in cima al file per tutti i viewport */

    * {
        max-width: 100%;
        box-sizing: border-box;
    }
    .max-w-7xl { max-width: 100% !important; }

    #mainHeader > div {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }
    #filtersBar .flex.flex-col { gap: 0.5rem !important; }

    #filtersBar select,
    #filtersBar input[type="date"],
    #filtersBar input[type="text"] {
        width: 100% !important;
    }
    #filtersBar button[id^="quickFilter"] { min-width: 0 !important; }

    #weekViewContainer .border.border-slate-200 {
        min-width: max-content !important;
        width: max-content !important;
    }
    #weekDaysHeader > div,
    #weekEventsGrid > div {
        position: relative !important;
        min-width: 140px !important;
        flex: 0 0 140px !important;
        width: 140px !important;
        font-size: 0.7rem !important;
        padding: 0.5rem 0.35rem !important;
        overflow: visible !important;
    }
    #weekDaysHeader .text-xl { font-size: 1rem !important; }
    #weekDaysHeader .text-sm { font-size: 0.65rem !important; }
    /* width/left/position impostati in JS con !important; qui nessun width/min-width/position */
    #weekEventsGrid [data-event-id] {
        overflow: hidden !important;
        box-sizing: border-box !important;
        padding: 6px 8px !important;
        font-size: 0.68rem !important;
        line-height: 1.25 !important;
        border: 1px solid rgba(0,0,0,0.12) !important;
        border-radius: 4px !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.08) !important;
        min-height: 52px !important;
    }
    #weekEventsGrid [data-event-id] > div {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        max-width: 100% !important;
    }
    #weekViewContainer .w-14 { min-width: 2.25rem !important; width: 2.25rem !important; }
    #weekViewContainer .w-20 { min-width: 2.25rem !important; width: 2.25rem !important; }

    #dayEventsContainer [data-event-id] {
        overflow: hidden !important;
        min-width: 140px !important;
        border: 1px solid rgba(0,0,0,0.12) !important;
        border-radius: 6px !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
    }

    button, .modern-button, [onclick] {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 0.65rem 0.75rem !important;
    }
    #mainHeader button, #mainHeader .modern-button {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 0.5rem !important;
    }
    #filtersBar button, #filtersBar select, #filtersBar input {
        min-height: 44px !important;
        padding: 0.65rem 0.75rem !important;
        font-size: 0.9375rem !important;
    }
    .event-card {
        padding: 1rem !important;
        font-size: 0.9375rem !important;
    }
    .event-card .text-base { font-size: 1rem !important; }
    .event-card .text-sm { font-size: 0.9375rem !important; }
    .event-card .text-xs { font-size: 0.875rem !important; }
}

@media (max-width: 896px) and (max-height: 500px) and (orientation: landscape) {
    #calendarGrid {
        min-width: 100% !important;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    }
    #calendarGrid > div {
        min-width: 0 !important;
        min-height: 72px !important;
        padding: 3px !important;
    }
    #calendarGrid .space-y-1 > div[data-event-id] {
        min-height: 28px !important;
        padding: 3px 4px !important;
        font-size: 0.55rem !important;
    }
    #calendarGrid .max-h-\[120px\] { max-height: 90px !important; }
    #weekDaysHeader > div,
    #weekEventsGrid > div {
        position: relative !important;
        min-width: 80px !important;
        flex: 0 0 80px !important;
        width: 80px !important;
        padding: 0.25rem 0.2rem !important;
        font-size: 0.6rem !important;
    }
    #weekEventsGrid [data-event-id] {
        padding: 4px 5px !important;
        font-size: 0.55rem !important;
        min-height: 40px !important;
    }
    #weekViewContainer .border.border-slate-200 { min-width: 100% !important; }
}

@media (min-width: 641px) and (max-width: 768px) {
    #mainHeader > div {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
}