/* Mobile / tablet tweaks for the admin (loaded after app.min.css).
   Only layout rules, nothing colour related, so it works with the dark theme too. */

@media (max-width: 991.98px) {
    /* Tighter page spacing on small screens */
    .page-content {
        padding: calc(70px + 16px) 8px 40px 8px;
    }
    .page-title-box {
        padding-bottom: 12px;
    }
    .page-title-box h4 {
        font-size: 15px;
    }
    .card-body {
        padding: 1rem;
    }

    /* Dim the page while the side menu is open (tapping it closes the menu) */
    body.sidebar-enable .main-content::before {
        content: "";
        position: fixed;
        top: 70px;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1000;
    }
    body.sidebar-enable .vertical-menu {
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
    }

    /* Tables: horizontal scroll instead of being cut off (wrapper added by mobile.js) */
    .table-responsive-mobile {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table-responsive-mobile > .table {
        margin-bottom: 0;
    }
    .table-responsive-mobile > .table th {
        white-space: nowrap;
    }
    .table-responsive-mobile > .table td {
        min-width: 90px;
        max-width: 70vw;
    }

    /* Tab bars scroll sideways instead of stacking into a tall block */
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .nav-tabs .nav-link {
        white-space: nowrap;
    }

    /* Button groups may wrap */
    .btn-group {
        flex-wrap: wrap;
    }

    /* Modals use the full width */
    .modal-dialog {
        margin: 0.5rem;
    }

    /* Mobile header search dropdown */
    .app-search-mobile {
        width: calc(100vw - 24px);
        max-width: 420px;
        padding: 12px;
    }
    .app-search-mobile .form-control,
    .app-search-mobile .form-select {
        font-size: 16px; /* prevents iOS zoom on focus */
    }
}

@media (max-width: 575.98px) {
    /* Avoid iOS auto-zoom when focusing inputs */
    .form-control,
    .form-select {
        font-size: 16px;
    }
}