/*!
 * Sadim — bolt-on responsive layer
 * Loaded LAST in layout.phtml (after bootstrap-cerulean, bootstrap-responsive,
 * sadim-theme). Adds phone/tablet rules without touching view markup.
 *
 * Scope (May 2026):
 *   - shell:   #head, #page-wrap, #big_menu_presentation
 *   - grid:    Bootstrap 2 .row-fluid > .span* collapse
 *   - tables:  horizontal-scroll wrapper (paired with the JS shim in layout)
 *   - forms:   prevent inputs from blowing past viewport
 *   - toolbar: dataTables length / filter / pdf buttons stack cleanly
 *
 * Desktop (>= 769px) is untouched.
 */

/* ============================================================================
 * Table horizontal scroll — applies at every width (cheap, harmless when
 * the table already fits). The JS shim in layout.phtml wraps every
 * <table class="table"> in <div class="table-responsive">.
 * ========================================================================== */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 12px;
}
.table-responsive > table { margin-bottom: 0; }

/* ============================================================================
 * Tablet & phone (<= 768px)
 * ========================================================================== */
@media screen and (max-width: 768px) {

    /* Container: the inline `#page-wrap { width:91% }` in layout.phtml is too
       narrow on phones — widen and zero the side margin. */
    #page-wrap {
        width: 96% !important;
        margin: 0 auto !important;
        padding: 0 4px;
    }

    /* Top header */
    #head {
        padding: 10px 12px;
        gap: 10px;
        flex-wrap: wrap;
    }
    #head h2  { font-size: 15px; margin: 0; }
    #head img { max-height: 44px; width: auto; }

    /* Bootstrap 2 fluid grid — stack columns on small screens.
       bootstrap-responsive.css already does this for .row-fluid, but the app
       also uses plain .span* inside non-fluid wrappers in a few views. */
    .row > [class*="span"],
    .row-fluid > [class*="span"] {
        float: none !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-bottom: 8px;
    }

    /* Boxes / panels (clients, compteurs, mokhalassa list scaffolding) */
    .box           { margin-bottom: 12px; }
    .box-header    { padding: 8px 10px; }
    .box-header h2 { font-size: 16px; line-height: 1.4; }
    .box-header .btn,
    .box-header .addNew {
        display: inline-block;
        margin: 4px 0 0;
        font-size: 13px;
    }
    .box-content { padding: 8px; }

    /* dataTables toolbar (per-page selector / search) — let them stack */
    .dataTables_length,
    .dataTables_filter {
        float: none !important;
        text-align: right;
        margin-bottom: 6px;
    }
    .dataTables_length select,
    .dataTables_filter input { max-width: 100%; }

    /* Date-range filter inputs in list views (clients/lister etc.) — were
       inline width:130px; that's actually fine, but the wrapping label
       margins push them off-row on phones. Tighten. */
    label[style*="margin-left"] { margin: 4px 0 !important; display: inline-block; }

    /* Forms */
    input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="search"], textarea, select {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Breadcrumbs */
    .breadcrumb { font-size: 13px; padding: 6px 10px; }
    /* Compact buttons ONLY in dense toolbar zones (page-title strip + list
       filter/pdf bars). The login submit and other primary action buttons
       must keep their full size for tappability. */
    .box-header h2 .btn,
    .box-header h2 .addNew,
    .dataTables_wrapper .btn,
    .box-content > div > a.btn { padding: 6px 10px; font-size: 13px; }

    /* The big menu panel (utilities/big_menu.phtml).
       It's position:absolute width:85% by default — on phones make it flow
       and span the viewport so the buttons aren't crammed. */
    #big_menu_presentation {
        position: relative !important;
        width: 95% !important;
        margin: 10px auto !important;
        padding: 10px 6px;
    }
    #big_menu_presentation a.button {
        width: 46%;
        margin: 6px 1%;
        vertical-align: top;
    }
    #big_menu_presentation a.button img { max-width: 72px; height: auto; }

    /* Logout / print-pdf inline button-link strips (e.g. clients/lister) */
    .box-content > div[style*="margin: 5px 0"] a {
        display: inline-block;
        margin: 3px 2px !important;
        font-size: 12px;
    }
}

/* ============================================================================
 * Phone (<= 480px)
 * ========================================================================== */
@media screen and (max-width: 480px) {
    html, body { font-size: 14px; }

    #page-wrap { width: 100% !important; padding: 0 6px; }

    #head        { padding: 8px 10px; gap: 8px; }
    #head h2     { font-size: 13px; }
    #head img    { max-height: 36px; }

    /* Menu toggle button (#visMenu) — was 2.2em padding 9px 12px; tighten */
    #visMenu     { font-size: 1.4em !important; padding: 6px 10px !important; }

    #big_menu_presentation a.button     { width: 47%; margin: 4px 1%; font-size: 12px; }
    #big_menu_presentation a.button img { max-width: 56px; }

    .breadcrumb { font-size: 12px; }
    .box-header h2 .btn,
    .box-header h2 .addNew,
    .dataTables_wrapper .btn,
    .box-content > div > a.btn { padding: 5px 8px; font-size: 12px; }

    /* Inline width:130px date inputs in filter toolbars look better full-width here */
    input[type="date"][style*="width: 130px"] { width: 100% !important; }
}

/* ============================================================================
 * Login page (its own <head>, separate from the main layout)
 * Base sizes set in sadim-theme.css; this layer scales for small viewports.
 * ========================================================================== */
@media screen and (max-width: 768px) {
    /* Bootstrap 2's .container-fluid is content-box by default, so its 20px
       side padding adds to width:100% -> the whole layout overflows the
       viewport on phones. Force border-box on the login subtree. */
    .container-fluid,
    .container-fluid .row-fluid,
    .container-fluid .row-fluid > [class*="span"],
    .login-box,
    .login-box * { box-sizing: border-box; }

    .container-fluid       { padding: 0 10px; }
    .login-header          { padding: 16px 0 10px; text-align: center; }

    /* width:100% + max-width keeps the well never wider than the viewport
       (was: max-width:480px alone, which overflowed at 375px). */
    .well.login-box {
        width: 100% !important;
        max-width: 480px;
        margin: 8px auto !important;
        padding: 22px 18px;
        float: none !important;
    }

    /* Inputs: 16px font prevents iOS Safari from auto-zooming on focus.
       The trio of overrides below addresses Bootstrap 2 baseline quirks:
         1. .input-large { width: 210px } + flex item min-width:auto
            means flex:1 cannot shrink the input on narrow viewports.
            Fix: min-width: 0 on the input.
         2. .input-prepend .add-on has margin-left/right: -1px to overlap
            siblings in inline-block layout — in flex that creates a 2px
            shift/overlap. Fix: margin: 0 !important.
         3. .add-on inherits height:18px / line-height:18px from Bootstrap;
            with our taller min-height the icon glues to the top corner.
            Fix: make .add-on a flex container that centers its child icon. */
    .login-box .input-prepend {
        display: flex;
        width: 100%;
        margin-bottom: 12px;
        align-items: stretch;
    }
    .login-box .input-prepend .add-on {
        flex: 0 0 auto;
        margin: 0 !important;
        padding: 12px 14px;
        min-height: 46px;
        height: auto;
        font-size: 16px;
        line-height: 1.4;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .login-box .input-prepend input[type="text"],
    .login-box .input-prepend input[type="password"] {
        flex: 1 1 0;
        width: auto !important;
        min-width: 0;
        margin: 0 !important;
        padding: 12px 14px;
        min-height: 46px;
        height: auto;
        font-size: 16px;
        line-height: 1.4;
        box-sizing: border-box;
    }

    /* Submit button: full-width, tappable. */
    .login-box p.center.span5 { width: auto !important; margin: 10px 0 0; }
    .login-box .btn-primary   { width: 100%; padding: 14px 18px; font-size: 16px; }

    .login-box .alert { font-size: 14px; padding: 10px 12px; }
}

@media screen and (max-width: 480px) {
    .well.login-box   { padding: 18px 14px; }
    .login-header     { padding: 12px 0 8px; }
}