@media (max-width: 720px) {
    *, *::before, *::after {
        box-sizing: border-box;
    }

    html, body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Many “mobile broken” issues are caused by flex/grid children refusing to shrink */
    .rb-main, .rb-content, .rb-card, .page-shell {
        min-width: 0;
    }
}

@media (max-width: 720px) {
    .rb-top {
        flex-wrap: wrap;
        align-items: stretch;
        gap: 10px;
    }

    /* Make search go full width on its own row */
    .rb-search {
        order: 10;
        width: 100%;
        max-width: none;
    }

    /* Let right-side icons/user area wrap too */
    .rb-topright {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 720px) {
    .rb-shell {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 720px) {
    .rb-card.rb-card-calendar {
        padding: 12px;
        border-radius: 18px;
    }

        .rb-card.rb-card-calendar #calendar {
            height: 72vh; /* use a sane portion of screen */
            min-height: 420px; /* smaller minimum for phones */
        }
}

@media (max-width: 900px) {
    .dash-grid {
        grid-template-columns: 1fr !important;
    }

    .dash-actions {
        width: 100%;
        flex-wrap: wrap;
    }
}

@media (max-width: 720px) {
    .table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

        .table th, .table td {
            white-space: nowrap;
        }
}

@media (max-width: 720px) {
    /* Single-column layout */
    .rb-shell {
        grid-template-columns: 1fr !important;
    }

    /* Sidebar becomes a bottom bar */
    .rb-sidebar {
        display: block !important;
        position: fixed !important;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto !important;
        height: auto !important;
        width: 100% !important;
        z-index: 1000;
        border-right: 0 !important;
        border-top: 1px solid rgba(255,255,255,.10);
    }

    /* Nav switches from vertical to horizontal */
    .rb-sidenav {
        flex-direction: row !important;
        justify-content: space-around;
        align-items: center;
        gap: 8px !important;
        padding: 10px 10px !important;
    }

    /* Buttons fit better */
    .rb-sideitem {
        width: auto !important;
        min-width: 0;
        padding: 10px 10px !important;
        border-radius: 16px !important;
    }

    /* Captions often make it cramped — hide labels on phones */
    .rb-sidecaption {
        display: none !important;
    }

    /* Ensure content doesn’t sit behind the bottom bar */
    .rb-content {
        padding-bottom: 86px !important;
    }
}

/* =========================
   Mobile fixes for Admin pages:
   Audit, Audit Details, Invites, Events, Users
   ========================= */
@media (max-width: 720px) {

    /* Force admin-form to stack even if inline style sets columns */
    form.admin-form,
    form.admin-form[style] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* IMPORTANT: target Bootstrap inputs too */
    .admin-form .form-control,
    .admin-form .form-select,
    .admin-form input,
    .admin-form select,
    .admin-form textarea,
    .admin-form button {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Tables: force horizontal scroll instead of squishing */
    .table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Give the table a floor so it scrolls instead of compressing columns */
    .table {
        min-width: 720px;
    }

        /* If actions are buttons/forms in a cell, make them tap-friendly */
        .table td form {
            display: block !important;
            margin: 0 0 8px 0 !important;
        }

        .table td .btn {
            width: 100% !important;
        }

    /* Audit Details: wrap code blocks (pre) */
    pre.codeblock {
        white-space: pre-wrap !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        max-height: 60vh !important;
    }

    /* Grids: single column */
    .details-grid,
    .audit-json-grid {
        grid-template-columns: 1fr !important;
    }
}