/* mobile.css - phone fixes for onLocation Training: admin portal, student portal and the public pages (2026-10-24).
   Linked from the header and pageScripts files of the site, admin and studentPortal.
   Everything is inside a media query for narrow screens (under 768 px), so desktop and tablet looks are unchanged.
   Why: the pages use Bootstrap 4 rows with plain col-2, col-4, col-6 ... which keep their share of the width at EVERY size (a col-2 box is a
   sixth of a phone), and data tables wider than the screen push the whole page sideways. */
@media (max-width: 767.98px) {

    /* columns stack: one field per line, full width */
    .row > [class*="col-"],
    .form-row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* text size 16 px: iPhone Safari zooms into any smaller field when it is tapped */
    .form-control,
    .custom-select,
    select,
    textarea,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    input[type="password"],
    input[type="search"] {
        font-size: 16px;
    }

    /* tap targets of about 44 px */
    .btn,
    .btn-sm,
    .btn-lg {
        min-height: 44px;
        padding-top: .5rem;
        padding-bottom: .5rem;
    }
    .img-thumbnail {
        padding: .6rem;
    }
    .nav-link,
    .dropdown-item {
        padding-top: .6rem;
        padding-bottom: .6rem;
    }

    /* wide data tables scroll sideways inside the page instead of stretching it */
    table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table td,
    .table th {
        padding: .4rem;
    }

    /* pictures that were floated beside the text sit centred and smaller */
    img.float-right,
    img.float-left {
        float: none !important;
        display: block;
        margin: .5rem auto;
        max-width: 60%;
        height: auto;
    }

    /* the page itself never scrolls sideways */
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }
    .container,
    .container-fluid {
        padding-left: .75rem;
        padding-right: .75rem;
    }
}