/**
 * Mobile stylesheet for RinkMinder Schedule.
 * Optimizes layout and readability for screens 2340px wide or less.
 */

@media screen {
    html, body {
        width: 100vw;
        max-width: 100vw;
        margin: 0;
        padding: 0;
        font-size: 16px;
        background: #fff;
        color: #000;
        overflow-x: hidden;
    }

    body {
        display: block !important;
        align-items: initial !important;
        justify-content: initial !important;
    }

    .schedule {
        width: 100vw !important;
        min-width: 0;
        max-width: 100vw;
        height: auto;
        overflow-x: auto;
        overflow-y: visible;
        box-sizing: border-box;
        grid-template-columns:
            [time] minmax(40px, 1fr)
            [fac10] 2fr
            [fac11] 2fr
            [fac12] 2fr
            [shift1] 1fr
            [shift2] 1fr
            [shift3] 1fr
            [shift4] 1fr
            [shift5] 1fr;
        grid-auto-rows: minmax(24px, auto);
        font-size: 12px;
    }

    .header,
    .rink1header,
    .rink2header,
    .rink3header {
        font-size: 1.1em !important;
        padding: 2px 4px !important;
        text-align: center;
        background: #f0f0f0;
        /*position: static !important;*/
    }

    .time {
        font-size: 0.95em;
        padding: 2px 0;
        text-align: right;
    }

    .event, .event-maintenance {
        font-size: 0.95em;
        padding: 2px 2px;
        border-width: 1px;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        margin: 1px 0;
    }

    .shift, .lockerroomslabel {
        display: none !important; /* Hidden by default */
    }

    .event-title, .shiftbody {
        font-size: 1em;
        word-break: break-word;
    }

    .event-flex, .event-flex-left, .event-flex-right {
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

    #date-buttons, .dateBtnDiv {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-bottom: 8px;
        justify-content: flex-start;
        display: none !important; /* Hidden by default */
    }

    .dateButton {
        font-size: 1em;
        padding: 4px 8px;
        margin: 2px 0;
        border-radius: 4px;
        border: 1px solid #888;
        background: #fafafa;
    }

    #current-time-line {
        height: 2px;
        background: red;
        width: 100%;
        position: absolute;
        left: 0;
        z-index: 1000;
        pointer-events: none;
    }
}