/*
 * Global mobile responsiveness fixes for Zypp LMS
 * Loaded on every page via partials/head-css.php (after theme CSS).
 * Pairs with assets/js/responsive-fixes.js which wraps bare tables
 * in .table-responsive so wide tables scroll instead of breaking layout.
 */

/* Never allow the whole page to scroll sideways */
html,
body {
    overflow-x: hidden;
}

/* Media should shrink with its container */
img,
video,
canvas,
iframe,
embed,
object {
    max-width: 100%;
}

img {
    height: auto;
}

/* Charts must not overflow their card */
.apex-charts,
.apex-charts svg,
.apexcharts-canvas {
    max-width: 100% !important;
}

/* Smooth horizontal scrolling for tables on touch devices */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

/* ---------- Tablets and below ---------- */
@media (max-width: 991.98px) {

    .page-title-box {
        flex-wrap: wrap;
        gap: .5rem;
    }

    /* Header rows with title + buttons: wrap instead of overflowing */
    .card-header .d-flex,
    .card-header .hstack {
        flex-wrap: wrap;
        gap: .5rem;
    }
}

/* ---------- Phones ---------- */
@media (max-width: 767.98px) {

    .container-fluid {
        padding-left: .75rem;
        padding-right: .75rem;
    }

    .card-header,
    .card-body {
        padding: .875rem;
    }

    /* Breadcrumbs eat too much space on phones */
    .page-title-box .breadcrumb {
        display: none;
    }

    /* Toolbars / filter rows wrap */
    .card-body > .d-flex,
    .btn-toolbar,
    .btn-group-toolbar,
    .hstack {
        flex-wrap: wrap;
        gap: .5rem;
    }

    /* Modals use (almost) the full width */
    .modal-dialog {
        max-width: calc(100vw - 1rem);
        margin: .5rem auto;
    }

    .modal-body {
        max-height: calc(100vh - 12rem);
        overflow-y: auto;
    }

    /* 16px inputs stop iOS Safari from auto-zooming on focus */
    input.form-control,
    select.form-select,
    textarea.form-control {
        font-size: 16px;
    }

    /* Slightly tighter headings */
    .page-title-box h4 {
        font-size: 1.05rem;
    }

    /* Pagination and long button rows wrap */
    .pagination {
        flex-wrap: wrap;
    }

    /* Full-width action buttons in modal footers stack nicely */
    .modal-footer {
        flex-wrap: wrap;
        gap: .5rem;
    }

    /* Nav tabs scroll horizontally instead of stacking oddly */
    .nav-tabs,
    .nav-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        scrollbar-width: none;
    }

    .nav-tabs::-webkit-scrollbar,
    .nav-pills::-webkit-scrollbar {
        display: none;
    }

    .nav-tabs .nav-item,
    .nav-pills .nav-item {
        flex-shrink: 0;
    }
}

/* ---------- Small phones ---------- */
@media (max-width: 575.98px) {

    .card-header,
    .card-body {
        padding: .75rem;
    }

    /* Search boxes and filter inputs take the full row */
    .card-header .search-box,
    .card-body .search-box {
        width: 100% !important;
    }

    /* Footer text centers */
    .footer .row [class*="col-"] {
        text-align: center;
    }
}