/* =====================================================
   RESPONSIVE DESIGN FOUNDATION
   Purpose:
   - Establish global breakpoints
   - Support desktop, tablet, and mobile devices
   - Provide a single source of responsive behaviour
===================================================== */

/* =====================================================
   LAPTOPS
===================================================== */

html {
    box-sizing: border-box;
    border: 15px solid lime !important;
    min-height: 100vh;
}


@media (max-width: 1366px) {}

/* =====================================================
   TABLETS
===================================================== */

@media (max-width: 1024px) {

    /* Prevent tablet content clipping */
    /* Allow layouts to use available screen width */
    /* Improve iPad / Android tablet behaviour */
    .container {
        width: 100%;
        max-width: 100%;
    }
}

/* =====================================================
   LARGE PHONES
===================================================== */

@media (max-width: 768px) {

    /* Prevent accidental horizontal scrolling */
    /* Prevent off-screen content drift */
    body {
        overflow-x: hidden;
    }

    /* Prevent images and logos from overflowing on phones. */
    /* Prevent logo overflow */
    /* Prevent evidence/image overflow */
    /* Improve mobile rendering */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Prevent form controls from overflowing on phones. */
    /* Reporting Desk mobile readiness */
    /* Approval screen mobile readiness */
    /* Prevent controls from extending beyond screen width */
    input,
    select,
    textarea,
    button {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Better readability on phones */
    /* Consistent text scaling */
    /* Mobile text slightly easier to read */
    html {
        font-size: 15px;
    }

    /* Mobile Content Padding */
    /* Prevent content from touching screen edges on phones. */
    /* Improves readability */
    /* Improves touch interaction */
    /* Prevents content from appearing cramped */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Improve usability on phones and tablets by providing comfortable touch targets. */
    /* Better mobile usability */
    /* Better accessibility */
    /* Easier tapping */
    /* Easier tapping */
    button {
        min-height: 44px;
    }

    /* Lobby cards stack vertically on mobile */
    .grid {
        grid-template-columns: 1fr !important;
    }

    /* Allow navigation controls to move onto a second line */
    /*  Prevent button overflow */
    /*  Improve mobile usability */
    .row {

        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .topbar .actions {
        width: 100%;
    }

    .row a {
        display: inline-block;
        padding: 0.5rem 0;
    }

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

    .topbar nav a {
        font-size: 15px;
        padding: 6px 8px;
    }

}

/* =====================================================
   SMALL PHONES
===================================================== */

@media (max-width: 480px) {
    .role-grid {
        grid-template-columns: 1fr;
    }

    /* .section-title {
        font-size: 2.5rem;
        font-weight: 700;
        letter-spacing: 0.3px;
    } */

}