body {
}


/* The following styles were created to handle the new style on default page, 
    The new style is much more dynamic for different screen sizes and resolutions.
    It was created by CoPilot and adapted by me
*/

/* Filter bar at top (display controls) - responsive */
.filter-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
}
    .filter-bar .filter-text {
        font-size: 90%;
        background: white;
        /* padding-top: 0.3rem; */ 
        padding: 0.25rem 0.2rem;
    }

@media (max-width: 600px) {
    .filter-bar { flex-direction: column; gap: 0.35rem; }
    .filter-bar select { width: 100%; max-width: 320px; }
    .filter-bar .filter-text { padding: 0.15rem 0.25rem; }
}

/*=================================================================*/
/* Shared list/card styles used by Default.aspx and Various Manage pages that display grids */

/* Calendar note paragraph adjustments */
.calendar-note {
    margin-left: auto;
    margin-right: auto;
    font-size: 80%;
    line-height: 100%;
    text-align: center;
    margin-top: 10px;
    max-width: 900px;
    padding: 0 1rem;
    box-sizing: border-box;
}

.header-card {
    display: grid;
    gap: 0.5rem 1rem;
    padding: 4px 4px;
    font-weight: 700;
    align-items: center;
    margin: 0 auto;
    max-width: 1000px;
    background: #f0f0f0;
}

.hdr {
    padding: 4px 6px;
}

.col {
    padding: 4px 6px;
/*    grid-column: auto;
*/}


.events-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    margin: 0 auto;
    box-sizing: border-box;
    max-width: 1000px;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    background: #f9f9f9;
}
    /* Remove the bottom border on the last item to avoid double border with container */
    .events-grid .event-card:last-child {
        border-bottom: none;
    }

.event-card {
    background: transparent;
    border: none;
    padding: 8px 8px;
    width: 100%;
    box-sizing: border-box;
    display: grid;
    gap: 1rem;
    align-items: start;
    border-bottom: 1px solid #e6e6e6;
}

/* left column: event date and details */
/*.event-main {
    border-top: -4px;
}*/

.lvEvents {
    grid-template-columns: 1fr 220px;
}

.lvMembers
{
    grid-template-columns: 60px 200px 1fr 80px 80px 220px;
}

.lvPeople {
    grid-template-columns: 1fr 70px 50px 90px 70px 50px 80px 220px;
}

/* Used on Calendar and ManageEvent pages */
.event-date {
    font-weight: 700;
    margin-bottom: 0.2rem;
    color: #222;
    font-size: 1rem;
}

.event-details {
    margin-bottom: 0.2rem;
    font-size: 0.95rem;
    line-height: 1.35;
    color: #333;
}


/* Make the right column wider on these pages so buttons can show full text */
.event-side {
    /* right column: actions */
    height: 100%;
    /*display: flex;*/
    align-items: center;
    justify-content: flex-start;
    border-left: 1px solid #e6e6e6; /* separator between details and actions */
    padding-left: 12px; /* small gap from border to buttons */
    padding-top: 5px;
}
    /* Action buttons: two buttons per row where possible */
    .event-side .event-actions {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.35rem;
        justify-content: flex-start;
        align-items: center;
        align-content: flex-start;
    }

/* Default: two buttons per row */
.event-actions .button, .event-actions input.button, .event-actions button {
    box-sizing: border-box;
    padding: 0.35rem 0.6rem;
    margin: 0;
    line-height: 1.2;
    /*font-size: 0.9rem;*/
    text-align: center;
    white-space: normal;
    flex: 0 0 calc(50% - 0.35rem);
    max-width: calc(50% - 0.35rem);
}


/* Ensure download controls stay inline: make the downloads block occupy a full row
   so its internal label/select/button can sit on one line */
.event-actions > #divDownloads {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
    flex: 0 0 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.event-actions > #divDownloads .button,
.event-actions > #divDownloads input.button,
.event-actions > #divDownloads button,
.event-actions > #divDownloads select,
.event-actions > #divDownloads label {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    padding-right: 10px;
}

.event-side .event-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.35rem;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
}

.event-actions .button {
    display: inline-block;
    flex: 0 1 auto;
    width: auto;
    white-space: normal;
    box-sizing: border-box;
    padding: 0.25rem 0.5rem;
    margin: 0;
    line-height: 1.2;
    font-size: 0.95rem;
    word-break: break-word;
    text-align: center;
    min-width: 6rem;
}



/* Page-specific tweaks */
/* Make Upload button on Default.aspx wider so its full text fits */
.btn-wide {
    width: calc(100% - 0.5rem) !important;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
}

/* Ensure gallery/upload buttons are not constrained by the generic .event-actions .button flex sizing
   when they need extra width. Make them take their intrinsic width unless on small screens. */
.event-actions .btn-wide{
    flex: 0 0 auto !important;
    max-width: none !important;
    width: calc(100% - 0.5rem) !important;
}


/*@media (max-width:420px) {

        flex-wrap: wrap;
    }
}*/

@media (max-width: 400px) {
    .event-actions .button, .event-actions input.button, .event-actions button {
        width: 100%;
        max-width: 6rem;
        flex: 0 0 100%;
    }
}

@media (max-width: 600px) {
    .filter-bar {
        flex-direction: column;
        gap: 0.35rem;
    }

        .filter-bar select {
            width: 100%;
            max-width: 320px;
        }

        .filter-bar .filter-text {
            padding: 0.15rem 0.25rem;
        }

    .calendar-note {
        font-size: 78%;
        padding: 0 0.5rem;
    }

}

/* Small screens: stack into single column and make buttons wrap two-per-row */
@media (max-width:800px) {
    .calendar-note {
        visibility: hidden;
        height: 0px;
    }

    p.filter-text {
        margin: 0px;
        line-height: 100%;
    }

    .event-main {
        display: block;
    }

    .event-card {
        padding: 10px 12px;
        gap: 0.25em;
        display: block;
    }

    .events-grid {
        padding: 0;
    }

    /* remove left border on small screens so it doesn't look odd when stacked */
    .event-side {
        display: block;
        margin-top: 8px;
        border-left: none;
        padding-left: 0;
        padding-top: 0px;
        justify-content: flex-start;
    }

        .event-side .event-actions {
            flex-direction: row;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

    .event-actions .button, .event-actions input.button, .event-actions button {
        flex: 0 1 48%;
        max-width: 6rem;
        padding: 0.45rem 0.5rem;
    }

    .event-actions .btn-wide {
        max-width: 12rem !important;
    }

    .event-actions > #divDownloads {
        flex-wrap: wrap;
    }

    /* collapse to single column */
    .lvEvents {
        grid-template-columns: 1fr; 
    }

    .lvMembers {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 1100px) {
    .btn-wide {
        font-size: 0.85rem;
        padding-left: 0.35rem;
        padding-right: 0.35rem;
        width: 100%;
    }
}

/* Responsive Stylesheet for the Detail pages*/
/* Main container: resizable and responsive */
.resizable-event-box {
    resize: none;
    /*resize: both; */
    /*overflow: auto; */ /* Required for resize to work */
    width: 100%;
    max-width: 900px;
    min-width: 450px;
    padding: 20px;
    border: 1px solid #ccc;
    background: #f9f9f9;
    display: grid;
    gap: 12px 20px;
    font-family: sans-serif;
}

.event-label {
    font-weight: 500;
    color: #666;
    align-self: start;
}

.event-value {
    color: #222;
    word-break: break-word; /* Prevents overflow of long text */
}

.button-container {
    grid-column: 1 / -1; /* Spans full width */
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

.hr-row {
    grid-column: 1 / -1; /* Spans full width */
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-top: 1px solid #eee;
    height: 1px;
}

/* Rows stack on mobile (screens under 600px) */
@media (max-width: 600px) {
    .resizable-event-box {
        grid-template-columns: 1fr;
        /*resize: none;*/ /* Disable manual resize on mobile for better UX */
    }
}