/* ========================================
   RESPONSIVE - Media Queries & Mobile Styles
   ======================================== */

/* Prevent calendar overlap - stack vertically when too narrow for 2 calendars side-by-side */
@media (max-width: 800px) {
    #calendar {
        flex-direction: column;
        gap: 25px;
        align-items: center;
    }

    .month {
        flex: 0 0 auto;
        max-width: 100%;
        width: 100%;
        min-width: unset;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        padding: 20px;
        border-radius: 20px;
    }

    .header h1 {
        font-size: 2.5em;
    }

    .header-nav {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-bottom: 20px;
        min-height: auto;
    }

    .header-nav-left {
        order: 2;
        width: 100%;
    }

    .header-nav-center {
        order: 1;
        width: 100%;
        margin-bottom: 10px;
    }

    .header-nav-center .header-logo-nav {
        max-width: 200px;
    }

    .header-nav-right {
        order: 3;
        width: 100%;
        text-align: center;
        align-items: center;
    }

    .header-nav-right .email-text {
        font-size: 0.9em;
    }

    .btn-back-header {
        width: 100%;
        justify-content: center;
    }

    .btn-switch-account {
        width: 100%;
    }

    .admin-controls {
        grid-template-columns: 1fr;
    }

    #calendar {
        flex-direction: column;
        gap: 25px;
    }

    .month {
        flex: 1 1 auto;
        max-width: 100%;
        min-width: unset;
    }

    .day {
        min-width: 45px;
        min-height: 45px;
    }

    .day-number {
        font-size: 15px;
    }

    .login-box {
        padding: 30px;
    }

    .user-controls {
        flex-direction: column;
        gap: 15px;
    }

    .user-controls .btn {
        width: 100%;
        max-width: 100%;
        flex: 1 1 auto;
    }

    .user-controls-two-btn {
        gap: 15px;
    }

    .user-controls-two-btn .btn {
        width: 100%;
        min-width: 0;
    }

    .legend {
        padding: 24px;
    }

    .legend-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        padding-bottom: 15px;
        margin-bottom: 20px;
    }

    .legend-header h3 {
        font-size: 1.5em;
    }

    .btn-instructions {
        width: 100%;
        justify-content: center;
        padding: 10px 20px;
        font-size: 14px;
    }

    .legend-items {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .legend-item {
        padding: 10px 14px;
    }

    .legend-item span {
        font-size: 1em;
    }

    .participants-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        padding-bottom: 15px;
        margin-bottom: 20px;
    }

    .participants-header h3 {
        font-size: 1.5em;
    }

    .participants-header .btn-instructions {
        width: 100%;
        justify-content: center;
        padding: 10px 20px;
        font-size: 14px;
    }

    .participants-status h3 {
        font-size: 1.4em;
    }

    .modal-content-large {
        width: 95%;
        padding: 30px 20px;
        max-width: 100%;
    }

    .modal-content-large .modal-header h3 {
        font-size: 1.8em;
    }

    .month-input {
        font-size: 16px;
        padding: 14px 18px;
    }

    .checkbox-group {
        padding: 18px;
    }

    .calendar-settings-content .btn {
        font-size: 16px;
        padding: 18px 32px;
    }

    .calendar-instruction-banner {
        margin: 30px 0 20px 0;
        padding: 20px 25px;
    }

    .calendar-instruction-text {
        font-size: 1.1em;
        letter-spacing: 0.3px;
    }

    .instruction-icon {
        font-size: 1.1em;
    }

    .change-date-range-container .btn {
        width: 100%;
        min-width: 0;
    }

    .participants-card-full-width {
        margin: 20px 0;
    }

    /* Year Picker Mobile Responsive */
    .modal-content-xlarge {
        padding: 30px 20px;
    }

    .year-picker-year {
        font-size: 2em;
    }

    .year-picker-controls {
        flex-direction: column;
        gap: 15px;
        padding: 20px;
    }

    .year-nav-btn {
        width: 100%;
        justify-content: center;
        padding: 12px 20px;
        font-size: 16px;
    }

    .year-picker-months {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .year-picker-month {
        padding: 20px 15px;
    }

    .month-number {
        font-size: 2em;
    }

    .month-name {
        font-size: 0.9em;
    }
}

/* Responsive adjustments for simplified homepage */
@media (max-width: 768px) {
    .home-card-simple {
        padding: 40px 30px;
    }

    .home-card-simple h2 {
        font-size: 2.2em;
    }

    .home-card-simple .subtitle {
        font-size: 1.1em;
        margin-bottom: 35px;
    }

    .button-container .btn {
        padding: 18px 30px;
        font-size: 16px;
    }
}

/* ========================================
   CALENDARS PAGE - SIDE-BY-SIDE LAYOUT
   ======================================== */

/* Responsive for Split View */
@media (max-width: 1024px) {
    .calendars-split-view {
        grid-template-columns: 1fr;
        max-height: none;
    }

    .section-divider {
        width: 100%;
        height: 3px;
        background: linear-gradient(90deg,
            transparent 0%,
            rgba(102, 126, 234, 0.5) 20%,
            rgba(159, 122, 234, 0.5) 50%,
            rgba(240, 147, 251, 0.5) 80%,
            transparent 100%);
    }

    .calendar-scrollable-grid {
        max-height: 400px;
    }

    .top-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .top-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .section-footer-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-top: auto;
        padding-top: 12px;
    }

    .section-footer-actions .btn {
        width: 100%;
    }

    .section-footer-actions #recycleBinBtn {
        margin-left: 0;
    }

    .section-header-with-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

    .section-header-with-actions > .btn:first-child,
    .section-header-with-actions > a:first-child,
    .section-header-with-actions > .btn:last-child,
    .section-header-with-actions > button:last-child {
        position: static;
    }

    .section-header-with-actions h1 {
        text-align: center;
    }

    .calendar-section-container {
        padding-bottom: 25px;
    }

    .section-title-fancy {
        font-size: 16px;
        padding: 14px 18px;
        gap: 12px;
        margin-bottom: 20px;
    }

    .title-icon {
        font-size: 22px;
    }
}

/* Extra small screens - prevent horizontal scrolling */
@media (max-width: 400px) {
    body {
        padding: 10px;
    }

    .container {
        padding: 15px;
        border-radius: 15px;
    }

    .modal-content-xlarge {
        padding: 20px 15px;
    }
}