/* ==================================================
   RHTC Venue Calendar
   ================================================== */

.calendar-container{
    display:flex;
    flex-direction:column;
    gap:20px;
}

/* Header */

.calendar-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:20px;
    margin-bottom:10px;
    padding-bottom:15px;
    border-bottom:2px solid var(--midnight-navy);
}

.calendar-header h2{
    margin:0;
    color:var(--midnight-navy);
    font-size:2rem;
}

/* Controls */

.calendar-controls{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    flex-wrap:nowrap;
}

.calendar-controls h3{
    margin:0;
    min-width:170px;
    text-align:center;
    color:var(--midnight-navy);
    font-size:1.6rem;
    font-weight:bold;
}

/* Buttons */

.calendar-controls button,
#saveEvent{

    background:var(--accent-pink);
    color:#fff;

    border:none;

    border-radius:6px;

    padding:10px 16px;

    cursor:pointer;

    font-weight:bold;

    transition:.2s;

}

.calendar-controls button:hover,
#saveEvent:hover{

    background:var(--midnight-navy);

}

#prevMonth,
#nextMonth{

    width:44px;
    height:44px;
    padding:0;
    font-size:1.2rem;

}

#todayBtn{

    height:44px;
    padding:0 18px;

}

/* Weekday Row */

.weekdays{

    display:grid;

    grid-template-columns:repeat(7,1fr);

    background:var(--midnight-navy);

    color:#fff;

    border-radius:8px 8px 0 0;

    overflow:hidden;

}

.weekdays div{

    padding:14px;

    text-align:center;

    font-weight:bold;

    border-right:1px solid rgba(255,255,255,.15);

}

.weekdays div:last-child{

    border-right:none;

}

/* Calendar Grid */

.calendar-grid{

    display:grid;

    grid-template-columns:repeat(7,1fr);

    border:1px solid #d8dce7;

    border-top:none;

    background:#fff;

}

.day{

    min-height:115px;

    border-top:1px solid #d8dce7;

    border-right:1px solid #d8dce7;

    padding:8px;

    cursor:pointer;

    transition:.2s;

    display:flex;

    flex-direction:column;

    gap:4px;

}

.day:nth-child(7n){

    border-right:none;

}

.day:hover{

    background:#f7f8ff;

}

.empty{

    background:#f2f2f2;

    cursor:default;

}

.day-number{

    color:var(--midnight-navy);

    font-weight:bold;

    font-size:1rem;

}

/* Today */

.today{

    background:#fff5f8;

    box-shadow:inset 0 0 0 2px var(--accent-pink);

}

/* Events */

.event{

    padding:5px 8px;

    border-radius:5px;

    color:#fff;

    font-size:.75rem;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}

.rhtc{

    background:var(--midnight-navy);

}

.external{

    background:#2b9c74;

}

.maintenance{

    background:#777;

}

.other{

    background:var(--accent-pink);

}

/* Modal */

.modal{

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.55);

    justify-content:center;

    align-items:center;

    z-index:9999;

}

.modal-content{

    width:450px;

    max-width:90%;

    background:#fff;

    border-radius:8px;

    padding:25px;

    position:relative;

    box-shadow:0 8px 30px rgba(0,0,0,.2);

}

.close{

    position:absolute;

    right:18px;

    top:12px;

    font-size:30px;

    cursor:pointer;

    color:var(--midnight-navy);

}

#selectedDate{

    margin-top:0;

    color:var(--midnight-navy);

}

#eventInput{

    width:100%;

    padding:10px;

    margin:15px 0;

    border:1px solid #ccc;

    border-radius:6px;

    font-size:1rem;

}

#eventList{

    margin-top:20px;

}

#eventList div{

    background:var(--light-blue);

    border-left:4px solid var(--accent-pink);

    padding:10px;

    margin-bottom:8px;

    border-radius:5px;

}

/* Mobile */

@media (max-width:900px){

    .calendar-header{

        flex-direction:column;

        align-items:flex-start;

    }

    .calendar-controls{

        width:100%;

        justify-content:space-between;

    }

}

@media (max-width:700px){

    .calendar-header h2{

        font-size:1.7rem;

    }

    .calendar-controls{

        display:grid;

        grid-template-columns:44px 1fr 44px;

        width:100%;

        gap:10px;

        align-items:center;

    }

    .calendar-controls h3{

        min-width:0;

        width:100%;

        font-size:1.3rem;

    }

    #todayBtn{

        grid-column:1 / -1;

        width:100%;

    }

    .weekdays div{

        font-size:.8rem;

        padding:10px 0;

    }

    .day{

        min-height:85px;

        padding:5px;

    }

    .day-number{

        font-size:.85rem;

    }

    .event{

        font-size:.65rem;

        padding:3px 5px;

    }

}

@media (max-width:500px){

    .calendar-grid{

        grid-auto-rows:75px;

    }

    .day{

        min-height:75px;

    }

    .event{

        display:none;

    }

}