/* Responsive fixes found by the browser audit (loaded last). */

/* Bootstrap's wide gutter (g-5 = 3rem) makes a row 12px wider than the page inside a .container on phones. */
@media (max-width: 991.98px) {
    .row.g-5 { --bs-gutter-x: 1.5rem; }
}

/* Filter / action button groups wrap instead of overflowing narrow columns. */
.filter-bar .d-flex.gap-2 { flex-wrap: wrap; }

/* Admin top bar: the user's e-mail and the log-out button wrap on narrow screens. */
.admin-topbar { flex-wrap: wrap; row-gap: .5rem; }
.admin-topbar .small { overflow-wrap: anywhere; }

/* Admin sidebar becomes a compact, horizontally scrolling tab bar below 992px instead of a tall list. */
@media (max-width: 991.98px) {
    .admin-sidebar { padding: .5rem .75rem; }
    .admin-brand { padding: .25rem .25rem .5rem; }
    .admin-brand small { display: inline; margin-left: .5rem; }
    .admin-nav { display: flex; gap: .25rem; overflow-x: auto; padding-bottom: .35rem; -webkit-overflow-scrolling: touch; }
    .admin-nav li { flex: 0 0 auto; }
    .admin-nav .nav-group { display: none; }
    .admin-nav a { white-space: nowrap; padding: .5rem .8rem; }
    .admin-content { padding: 1.25rem .9rem 2.5rem; }
    .admin-topbar { padding: .6rem .9rem; }
}

/* Comfortable touch targets for table actions on phones. */
@media (max-width: 575.98px) {
    .admin-table .btn-sm { padding: .4rem .65rem; }
    .admin-panel { padding: 1rem; }
    .stat-number { font-size: 1.6rem; }
    .page-header { padding: 2.25rem 0; }
}

/* ---------- Header logo and a compact footer ---------- */
.brand-logo { height: 54px; width: auto; max-width: 190px; }
@media (max-width: 575.98px) { .brand-logo { height: 44px; } }
/* The logo already carries the school name; the text beside it is shown only on very wide screens. */
@media (max-width: 1399.98px) { .site-header .brand-text { display: none; } }

.site-footer { padding: 2rem 0 .9rem; font-size: .92rem; line-height: 1.55; }
.footer-logo { display: inline-block; background: var(--color-surface); border-radius: 10px; padding: .4rem .7rem; margin-bottom: .75rem; }
.footer-logo img { display: block; height: 48px; width: auto; }
.footer-heading { margin-bottom: .4rem; }
.footer-links-cols { columns: 2; column-gap: 1.5rem; }
.footer-links-cols li { break-inside: avoid; padding: .08rem 0; }
.footer-copy { margin-top: 1.25rem; padding-top: .7rem; font-size: .8rem; }
@media (max-width: 575.98px) { .footer-links-cols { columns: 1; } }

/* Map: a fixed height so it can never grow over the footer (it used to be 100% of an auto-height column). */
.map-frame { display: block; width: 100%; height: 400px; min-height: 0; }
@media (max-width: 575.98px) { .map-frame { height: 300px; } }