/*!
 * responsive.css - responsiveness layer for forms, data entry and tables.
 * Loaded after styles.css (Bootstrap 3.3.4 + AdminLTE), so it only corrects
 * what the base theme leaves broken on small screens. Additive by design:
 * nothing here changes the desktop layout.
 */

/* ---------------------------------------------------------------------------
   1. Form controls
   ------------------------------------------------------------------------ */

/* Inputs must never push their column wider than the screen. */
.form-control,
.input-group,
.select2-container,
textarea {
    max-width: 100%;
}

textarea {
    resize: vertical;   /* horizontal resize breaks narrow layouts */
}

/* Bootstrap 3 predates border-box on some widgets; make sizing predictable. */
.form-control,
.input-group-addon,
.btn {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    /* iOS/Android zoom into any field whose text is under 16px. Keeping the
       rendered size at 16px stops the page jumping on focus. */
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="search"],
    input[type="date"],
    select,
    textarea,
    .form-control {
        font-size: 16px;
    }

    /* Stacked labels read better than cramped inline ones. */
    .form-horizontal .control-label {
        text-align: left;
        margin-bottom: 4px;
    }

    /* An input group with a long addon overflows; let it use the full row. */
    .input-group {
        width: 100%;
    }
}

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

/* Bootstrap 3.3 scrolls .table-responsive at every width, but without
   momentum scrolling on touch devices. */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
    /* Wide data tables stay readable by scrolling rather than squashing. */
    .table-responsive > .table > thead > tr > th,
    .table-responsive > .table > tbody > tr > td {
        white-space: nowrap;
    }

    /* Row action buttons keep a usable tap target. */
    .table .btn-group > .btn.btn-xs {
        padding: 5px 8px;
    }
}

/* Long values (emails, notes, references) must wrap instead of stretching
   the table past the viewport. */
.table td,
.box-body {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ---------------------------------------------------------------------------
   3. DataTables chrome
   ------------------------------------------------------------------------ */

@media (max-width: 767px) {
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate,
    .dataTables_wrapper .dt-buttons {
        float: none !important;
        text-align: left;
        width: 100%;
        margin-bottom: 8px;
    }

    .dataTables_wrapper .dataTables_filter input {
        width: 100%;
        margin-left: 0;
    }

    /* The export/column buttons wrap instead of running off the edge. */
    .dt-buttons .btn {
        margin-bottom: 4px;
    }
}

/* ---------------------------------------------------------------------------
   4. Dialogs and overlays
   ------------------------------------------------------------------------ */

@media (max-width: 767px) {
    .modal-dialog {
        margin: 10px;
    }

    .modal-body {
        padding: 12px;
    }

    /* Stacked, full width footer buttons are easier to hit than a tight row. */
    .modal-footer .btn {
        display: block;
        width: 100%;
        margin: 0 0 6px 0;
    }

    .modal-footer .btn + .btn {
        margin-left: 0;
    }

    /* select2 and datepicker popups must fit the screen. */
    .select2-drop,
    .bootstrap-datetimepicker-widget {
        max-width: 96vw;
    }
}

/* ---------------------------------------------------------------------------
   5. Page chrome
   ------------------------------------------------------------------------ */

@media (max-width: 767px) {
    /* Box headers often hold a title plus buttons; let them stack. */
    .box-header > .box-title {
        display: block;
        float: none;
        margin-bottom: 6px;
    }

    .box-header > .btn,
    .box-header > .box-tools {
        position: static;
        float: none;
        display: inline-block;
        margin-bottom: 6px;
    }

    .content-header > h1 {
        font-size: 20px;
    }

    .content-header > .breadcrumb {
        position: static;
        float: none;
        margin-top: 6px;
        padding-left: 0;
        background: transparent;
    }

    /* Nothing in the page body should force a sideways scroll of the page. */
    .content-wrapper,
    .box-body {
        max-width: 100%;
    }
}

/* Touch devices: give small controls a real tap target (WCAG 2.5.5). */
@media (pointer: coarse) {
    .btn-xs,
    .btn-sm {
        min-height: 32px;
    }

    a.tip,
    .btn-group > .btn {
        touch-action: manipulation;   /* removes the 300ms tap delay */
    }
}

/* ---------------------------------------------------------------------------
   6. POS register screen
   The till loads this file on top of custom.css, which already tunes the POS
   grid for small screens. These rules only cover what that tuning leaves out.
   ------------------------------------------------------------------------ */

@media (max-width: 767px) {
    /* The cart columns are sized around compact fields, so the 16px rule in
       section 1 would push quantity and price out of the row. The cart is
       driven by the on-screen keypad rather than the device keyboard, so the
       iOS focus-zoom that rule prevents does not apply here. */
    #posTable input,
    #posTable select,
    #posTable .form-control {
        font-size: 13px;
    }

    /* A table dropped straight into a modal has no .table-responsive wrapper
       to scroll it (register details, payment notes, gift card view). */
    .modal-body > table.table,
    .modal-body > form > table.table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}