/* ==========================================================================
   S96 — mobile / small-screen layer.

   Loaded LAST, after list-legibility.css, so it wins on source order rather
   than on !important. Everything here is inside a max-width media query:
   nothing in this file can change the desktop CRM, which is what the whole
   office uses all day. If a rule needs !important it is because the theme
   or DataTables sets the same property inline or with its own !important —
   each of those is commented where it appears.

   What this fixes, measured rather than guessed (see the audit in S96):
     - 124 of the 141 views containing a <table> never wrapped it in
       .table-responsive, so a wide list pushed the whole page sideways.
     - 139 views lay out on col-md-* only. Bootstrap 3 stacks those below
       992px on its own, so the grid was never the problem — but the
       hard-coded pixel widths inside those columns (width:1200px, 800px,
       760px, 700px, 600px...) were, because a fixed px width ignores the
       stack entirely.
     - DataTables' own chrome (length menu, filter box, pagination) is laid
       out for a desktop row and overflowed on its own.

   The frame itself is fine: style-responsive.css already slides #sidebar
   off-canvas and resets #main-content's 240px margin in both mobile bands.
   That is deliberately NOT re-implemented here.
   ========================================================================== */

@media (max-width: 767px) {

    /* ---------------------------------------------------------------
       1. Stop the page itself from scrolling sideways.

       This is the single most visible symptom: the header scrolls away
       from the content, and tapping a field pans the page. Anything
       genuinely too wide gets its own scroller in section 2 instead.
       --------------------------------------------------------------- */
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* The theme's fixed header is positioned left:0;right:0, so it is
       already fluid — but its inner row is not, and a long user name
       pushed it wide. Let it wrap instead. */
    .header .top-nav {
        max-width: 100%;
    }

    /* ---------------------------------------------------------------
       2. Tables.

       Rather than edit 124 views, give every table its own horizontal
       scroller. .jvs-scroll-x is added by mobile.js to any table that
       is not already inside a .table-responsive; the rule is written
       against both so a view that DOES wrap correctly behaves the same.

       -webkit-overflow-scrolling keeps the momentum flick on iOS.
       --------------------------------------------------------------- */
    .table-responsive,
    .jvs-scroll-x {
        width: 100%;
        margin-bottom: 15px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        border: 0;
    }

    /* A table inside a scroller must be allowed to keep its natural
       width — that is the point of the scroller. But it must never be
       FORCED wider than the screen when its content would fit, which is
       what a hard-coded width="1200" attribute does. */
    .jvs-scroll-x > table,
    .table-responsive > table {
        width: auto !important;   /* beats the width="" HTML attribute */
        min-width: 100%;
        max-width: none;
    }

    /* Cell padding is tuned for a mouse; reclaim some width. */
    .table > thead > tr > th,
    .table > tbody > tr > td {
        padding: 6px 8px;
        white-space: nowrap;
    }

    /* ---------------------------------------------------------------
       3. Hard-coded pixel widths.

       The offenders counted in the audit — 1200px, 800px, 760px, 700px,
       600px, 520px, 240px, 220px — are all set as inline style="" on
       divs, tables and images, so only !important can reach them. This
       is scoped to content areas so it cannot touch the sidebar (which
       depends on its 240px) or the theme's own chrome.
       --------------------------------------------------------------- */
    #main-content [style*="width"],
    .modal [style*="width"] {
        max-width: 100% !important;
    }

    /* ...but a table inside a scroller is the one place a wide element
       is legitimate, so give that back. Source order puts this after
       the rule above deliberately. */
    .jvs-scroll-x [style*="width"],
    .table-responsive [style*="width"] {
        max-width: none !important;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    /* ---------------------------------------------------------------
       4. DataTables chrome.

       The length menu and search box sit in a two-column row that only
       works at desktop width; the pagination runs off the edge.
       --------------------------------------------------------------- */
    .dataTables_wrapper {
        max-width: 100%;
    }

    .dataTables_length,
    .dataTables_filter {
        float: none !important;   /* theme floats these left/right */
        width: 100%;
        text-align: left;
        margin-bottom: 8px;
    }

    .dataTables_filter label,
    .dataTables_length label {
        width: 100%;
    }

    /* The search input is a bare inline input in this theme; make it
       usable with a thumb. 16px prevents iOS Safari zooming on focus. */
    .dataTables_filter input {
        width: 100% !important;
        max-width: 100%;
        font-size: 16px;
        height: 38px;
    }

    .dataTables_info,
    .dataTables_paginate {
        float: none !important;
        width: 100%;
        text-align: center;
        padding-top: 6px;
    }

    .dataTables_paginate .pagination {
        margin: 6px 0;
        flex-wrap: wrap;
    }

    /* ---------------------------------------------------------------
       5. Forms.

       53 views use .form-horizontal, whose labels are floated into a
       left column at every width in BS3 unless the grid says otherwise.
       On a phone that leaves a squeezed field beside a wrapped label.
       Stack them.
       --------------------------------------------------------------- */
    .form-horizontal .control-label {
        float: none;
        width: auto;
        text-align: left;
        padding-bottom: 4px;
    }

    .form-horizontal .form-group > div[class*="col-"] {
        width: 100%;
        margin-left: 0;
    }

    /* 16px is the threshold below which iOS Safari zooms the viewport on
       focus and never zooms back out — the classic "the form ate my
       screen" bug. Applies to selects and textareas too. */
    .form-control,
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    input[type="date"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px;
        max-width: 100%;
    }

    /* ---------------------------------------------------------------
       6. Touch targets.

       Anything a rep taps needs to be reachable with a thumb. 38px is
       a compromise: the WCAG target is 44px, but the CRM's list rows
       carry three or four action buttons side by side and 44 wraps them.
       --------------------------------------------------------------- */
    .btn {
        min-height: 34px;
        padding: 7px 12px;
    }

    /* A row of buttons in a table cell must not force the cell wide. */
    td .btn + .btn {
        margin-top: 3px;
    }

    /* ---------------------------------------------------------------
       7. Modals and panels.
       --------------------------------------------------------------- */
    .modal-dialog {
        width: auto;
        margin: 10px;
    }

    .modal-body {
        max-height: 70vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .panel-body,
    .panel-heading {
        padding: 10px;
    }

    /* The theme's page title row carries a right-floated breadcrumb that
       collides with the title on a narrow screen. */
    .page-header,
    .page-title {
        float: none;
        width: 100%;
    }

    .breadcrumb {
        float: none !important;
        padding-left: 0;
        margin-bottom: 8px;
    }
}

/* Very small phones (the 360px class of device the CRM is actually being
   opened on). Everything above still applies; these are additions. */
@media (max-width: 479px) {

    /* Stack the button groups that sit above a list — Add / Export /
       filter — instead of letting them run off the edge. */
    .btn-group > .btn {
        float: none;
        margin-bottom: 4px;
    }

    .table > thead > tr > th,
    .table > tbody > tr > td {
        padding: 5px 6px;
        font-size: 12px;
    }
}