body {
}

@media (max-width: 599px) {
    /* Styles for mobile phones */
    .banner-container {
        max-height: 70px;
    }
}
@media (min-width: 600px) and (max-width: 767px) {
    /* Styles for small devices */
    .banner-container {
        max-height: 80px;
    }
}
@media (min-width: 768px) and (max-width: 1023px) {
    /* Styles for tablets and small laptops */
    .banner-container {
        max-height: 90px;
    }
}
@media (min-width: 1024px) and (max-width: 1439px) {
    /* Styles for laptops and desktops */
    .banner-container {
        max-height: 100px;
    }
}
@media (min-width: 1440px) {
    /* Styles for large desktops */
    .banner-container {
        max-height: 110px;
    }
}

/* ------------------------------------------------------------------ */
/* Mobile layout fixes for the event screens (Attendance / Entry Cards) */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
    /* The filter fields use fixed pixel widths for desktop (e.g. Featured Event = 150px), which on a
       phone clips long values (like a Marathi featured-event name) and pushes the page sideways.
       On small screens, stack every filter/search field full-width so each one gets the whole row.
       Covers all the event screens: Attendance, Entry Cards, Participant Report (comp-filter-options)
       and the Featured Event / Documents / Email Templates lists (app-grid-options-bar search). */
    .comp-filter-options,
    .app-grid-options-bar {
        width: 100%;
        gap: 8px;
        flex-wrap: wrap;
    }

    .comp-filter-options .input-container,
    .app-grid-options-bar .input-container,
    .input-container[style*="width"] {
        width: 100% !important;
        margin-bottom: 4px;
    }

    .comp-filter-options .app-select,
    .comp-filter-options .app-input,
    .app-grid-options-bar .app-select,
    .app-grid-options-bar .app-input,
    .input-container[style*="width"] .app-select,
    .input-container[style*="width"] .app-input {
        width: 100%;
    }

    /* Wide data tables scroll inside their own box (.table-responsive) instead of scrolling the whole
       page sideways. */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }

    /* Attendance / Entry Cards: on phones show only the essential columns (Photo, Name, UID, Status,
       Action). Secondary columns (School, Activity, Card No.) are tagged .hide-mobile and hidden here
       so the table fits without sideways scrolling. Desktop keeps every column. */
    .hide-mobile {
        display: none !important;
    }
}