/* ==========================================================================
   mobile.css - Global mobile view enhancements for ReportSOL (AdminLTE 3)
   Loaded on every page via class/layout.php (getStyleExtra).
   Goal: make all menus/pages usable on phones without editing each page.
   Scope: only affects screens <= 767.98px (Bootstrap md breakpoint) unless noted.
   ========================================================================== */

/* --- 1. Prevent horizontal page overflow globally ------------------------ */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* --- 2. Wide DataTables / tables: horizontal scroll instead of page break - */
/* mobile.js wraps every table in .rs-table-scroll; this styles that wrapper */
.rs-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* smooth momentum scroll on iOS */
}
.rs-table-scroll > table {
    min-width: 100%;
}

/* ==========================================================================
   Phone-only rules
   ========================================================================== */
@media (max-width: 767.98px) {

    /* --- Content padding: tighter so more width is usable --- */
    .content-wrapper,
    .content {
        overflow-x: hidden;
    }
    .content > .container-fluid,
    section.content > .container-fluid {
        padding-left: 8px;
        padding-right: 8px;
    }
    .card-body {
        padding: 0.75rem;
    }

    /* --- Page header: stack title and breadcrumb, reduce size --- */
    .content-header h1 {
        font-size: 1.4rem;
    }
    .content-header .breadcrumb {
        float: none !important;
        margin-top: 4px;
        padding: 4px 0;
        background: transparent;
        font-size: 0.8rem;
    }
    .content-header .col-sm-6 {
        max-width: 100%;
        flex: 0 0 100%;
    }

    /* --- Filter cards: force each field to full width & spacing --- */
    /* Many pages use col-sm-* which only stacks below 576px. On phones we
       want them stacked and comfortable across the whole md range too. */
    .card-body .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .form-group {
        margin-bottom: 0.75rem;
    }

    /* --- Buttons in card footers: full width, stacked, no float --- */
    .card-footer .btn,
    .card-footer button {
        float: none !important;
        display: block;
        width: 100%;
        margin: 0 0 8px 0 !important;
    }
    .card-footer .btn:last-child,
    .card-footer button:last-child {
        margin-bottom: 0 !important;
    }

    /* --- DataTables controls: stack length menu, search, buttons --- */
    .dataTables_wrapper .row {
        margin-left: 0;
        margin-right: 0;
    }
    .dataTables_wrapper .col-md-6,
    .dataTables_wrapper .col-sm-12,
    .dataTables_wrapper .col-md-5,
    .dataTables_wrapper .col-md-7 {
        flex: 0 0 100%;
        max-width: 100%;
        text-align: left !important;
        margin-bottom: 6px;
    }
    .dataTables_wrapper .dataTables_filter {
        float: none;
        text-align: left;
    }
    .dataTables_wrapper .dataTables_filter input {
        width: 100%;
        margin-left: 0;
        display: block;
        margin-top: 4px;
    }
    .dataTables_wrapper .dataTables_length select {
        min-width: 70px;
    }
    .dataTables_wrapper .dataTables_paginate {
        float: none;
        text-align: center;
        padding-top: 8px;
    }
    .dataTables_wrapper .dataTables_info {
        padding-top: 4px;
    }

    /* DataTables export buttons (Copy/CSV/Excel/PDF/Print) wrap nicely */
    .dt-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-bottom: 8px;
    }
    .dt-buttons .btn {
        flex: 1 1 auto;
        font-size: 0.8rem;
        padding: 0.3rem 0.4rem;
    }

    /* Slightly smaller table text so more columns fit before scroll */
    table.dataTable,
    .table {
        font-size: 0.82rem;
    }
    .table th,
    .table td {
        padding: 0.4rem 0.5rem;
        white-space: nowrap; /* let .rs-table-scroll scroll instead of squishing */
    }

    /* --- Dashboard small-boxes / info-boxes spacing --- */
    .small-box h3 {
        font-size: 1.6rem;
    }
    .info-box {
        margin-bottom: 10px;
    }

    /* --- Modals: near full-width on phones --- */
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }

    /* --- Select2 widgets full width --- */
    .select2-container {
        width: 100% !important;
    }

    /* --- Login page card fits phone --- */
    .login-box,
    .register-box {
        width: 100%;
        margin-top: 0;
    }
    .login-box .card,
    .register-box .card {
        margin: 0 8px;
    }
}

/* --- Small phones (<=400px): trim further --- */
@media (max-width: 400px) {
    .content-header h1 {
        font-size: 1.2rem;
    }
    .dt-buttons .btn {
        font-size: 0.72rem;
    }
    table.dataTable,
    .table {
        font-size: 0.78rem;
    }
}