/*!
 * Phones.
 *
 * The application was laid out for a desk. Every screen already collapses
 * into one column below the Bootstrap and Tailwind breakpoints, so nothing
 * here is about making a page fit -- it fits. It is about what a shopkeeper
 * standing at a counter with a phone actually gets for the height of their
 * screen: how much of it is spent on chrome before the first useful thing,
 * and how much scrolling stands between them and the second one.
 *
 * Presentation only, and loaded last so it can refine what the other sheets
 * set without any of them being edited. Every rule is inside a width query,
 * so nothing here can reach a desktop.
 *
 * Remove the single <link> in layouts/partials/css.blade.php to revert.
 */

/* ==================================================================
   The top bar
   ==================================================================
   Three rows on a phone: the sidebar button alone on the first, the
   language switch and account controls on the second, the notices
   ticker on the third -- 166px of a 844px screen, before the page
   begins.

   The controls fit beside the button with room to spare (32 + 265 of a
   390px screen). What pushed them down was the ticker, which is a flex
   item of the same row and wants 350px. Sent to a line of its own and
   the other two share the first, which is where they were always meant
   to be.
   ================================================================== */
@media (max-width: 767px) {
    .theme-header-bg > .tw-px-5 {
        padding-inline: 14px;
        padding-block: 10px;
    }

    .theme-header-bg > .tw-px-5 > .tw-flex {
        gap: 10px;
        align-items: center;
    }

    /* Full width, on its own line, under the controls. It keeps its
       place in the markup -- ordered here rather than moved, because
       on a desktop it belongs in the gap between the two clusters. */
    .theme-header-bg > .tw-px-5 > .tw-flex > .header-ticker {
        order: 3;
        flex: 1 0 100%;
        margin-top: 2px;
    }

    /* The little info icon that rides along with the ticker goes with
       it rather than sitting on the button row on its own. */
    .theme-header-bg > .tw-px-5 > .tw-flex > .fa-info-circle {
        order: 4;
    }

    /* Pushed to the far end of the first line, since the ticker that
       used to hold it there has left. */
    .theme-header-bg > .tw-px-5 > .tw-flex > .tw-justify-end {
        order: 2;
        margin-inline-start: auto;
    }
}

/* ==================================================================
   The till's top bar, on a phone
   ==================================================================
   The shop's mark, the product tiles and the menu sat huddled in the
   middle of the bar. The column they share is centred and only as wide
   as what is in it, so the auto margin the tiles button already carries
   -- the one meant to push it and the menu to the far end -- had
   nothing to push against.

   Given the bar's full width, the markup's own arrangement shows: the
   mark at the start, the two buttons at the end, where a thumb finds
   them. The welcome marquee under them is left exactly as it is.
   ================================================================== */
@media (max-width: 767px) {
    body.lockscreen .pos-header > .tw-flex > div:first-child {
        align-self: stretch;
        width: 100%;
    }

    body.lockscreen .pos-header > .tw-flex > div:first-child > .tw-flex {
        gap: 8px;
        /* A shop with several locations has a picker in this row too.
           It wraps onto a line of its own rather than pushing the
           buttons off the edge of a narrow screen. */
        flex-wrap: wrap;
        row-gap: 8px;
    }
    body.lockscreen .pos-header > .tw-flex > div:first-child > .tw-flex > p,
    body.lockscreen .pos-header > .tw-flex > div:first-child > .tw-flex > div:not(.pos-brand) {
        order: 5;
    }
    body.lockscreen .pos-header > .tw-flex > div:first-child > .tw-flex > div:not(.pos-brand) {
        flex: 1 1 150px;
    }

    /* One height for all three, so they share a centre line. */
    body.lockscreen .pos-header .pos-brand {
        height: 40px;
        min-width: 40px;
    }

    /* The menu was a bare 24px glyph beside two 40px tiles, and becomes
       the third tile. The glyph grows rather than a frame being drawn
       around it, because the click handler is on the glyph itself:
       padding on the svg widens what can be tapped, where padding on its
       wrapper would only have framed a target smaller than it looks. */
    body.lockscreen .pos-header .hamburger {
        display: block;
        box-sizing: border-box;
        width: 40px;
        height: 40px;
        padding: 9px;
        margin: 0;
        border: 1px solid rgba(196, 162, 248, .35);
        border-radius: var(--pos-r-ctrl, 10px);
        background: rgba(255, 255, 255, .10);
        color: #FFFFFF;
        transition: transform .1s ease, background-color .15s ease;
    }
    body.lockscreen .pos-header .hamburger:active {
        transform: scale(.96);
        background: rgba(255, 255, 255, .18);
    }

    /* The menu it opens is a white panel on a phone (app.css), and two
       of its buttons were dressed for the dark bar instead. Go Back is a
       translucent white chip there, so on white it was white on white;
       it takes the violet the Calculator and Full Screen buttons beside
       it already wear. Recent Transactions asks for dark violet ink, but
       its label is a span, and the bar's pale span colour reached it
       first -- the label gets the colour the button meant. */
    body.lockscreen #pos_header_more_options > a.pos-go-back {
        background-color: var(--pos-accent, #7C3AED) !important;
        border-color: var(--pos-accent, #7C3AED) !important;
    }
    body.lockscreen #pos_header_more_options > #recent-transactions span {
        color: var(--pos-accent-dark, #5B21B6);
    }
}

/* ==================================================================
   Page headings
   ==================================================================
   Every list and form screen opens with a heading, and most of them
   set it at the desktop size with desktop margins. On a phone that is
   a third of the fold spent on a word the reader already knows -- they
   just tapped the menu item that says it.
   ================================================================== */
@media (max-width: 767px) {
    .content-header {
        padding: 12px 14px 0;
    }
    .content-header > h1,
    .content > .content-header h1 {
        font-size: 1.25rem;
        line-height: 1.3;
        margin: 0 0 2px;
    }
    .content-header small {
        font-size: 12px;
        display: block;
        margin-top: 2px;
    }

    /* Not on the till. Its .content carries 96px of bottom padding so
       the last row of the cart clears the fixed action bar, and this
       rule would take it away and hide the row behind the bar. */
    body:not(.lockscreen) .content {
        padding: 10px 14px 24px;
    }
}

/* ==================================================================
   Boxes and tables
   ==================================================================
   The list screens are all the same shape: a box, a row of filters,
   and a DataTable. The table itself already scrolls sideways inside
   its box; what does not fit is everything around it.
   ================================================================== */
@media (max-width: 767px) {
    .box {
        border-radius: 12px;
        margin-bottom: 14px;
    }
    .box-header,
    .box-body {
        padding: 12px;
    }
    .box-header > .box-title {
        font-size: 1rem;
    }

    /* The table's own controls stack rather than fighting for one row:
       "Show 10 entries" on the left and a search box on the right is a
       desktop arrangement, and at 390px it left the search field about
       eight characters wide. */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        float: none;
        width: 100%;
        text-align: start;
    }
    .dataTables_wrapper .dataTables_filter {
        margin-top: 8px;
    }
    .dataTables_wrapper .dataTables_filter input {
        width: 100%;
        margin-inline-start: 0;
        display: block;
        margin-top: 4px;
    }

    /* Paging on a phone: the numbers, and nothing to either side of
       them. "Showing 1 to 10 of 240 entries" is the first thing to go
       when the row has to wrap three times to say it. */
    .dataTables_wrapper .dataTables_paginate {
        float: none;
        text-align: center;
        padding-top: 8px;
    }
    .dataTables_wrapper .dataTables_info {
        float: none;
        text-align: center;
        font-size: 12px;
        padding-top: 6px;
    }

    /* A table wider than the screen scrolls within its own box. Without
       this the page itself scrolls sideways, which takes the heading
       and the buttons with it. */
    .table-responsive,
    .dataTables_wrapper {
        -webkit-overflow-scrolling: touch;
    }
}

/* ==================================================================
   Forms
   ==================================================================
   16px is not a style choice: iOS Safari zooms the whole page in when
   a field it is focusing is set smaller than that, and then leaves it
   zoomed. Every text field on every form screen gets it.
   ================================================================== */
@media (max-width: 767px) {
    .form-control,
    .select2-container .select2-selection--single,
    .select2-container .select2-search__field,
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="date"],
    textarea,
    select {
        font-size: 16px;
    }

    .form-group {
        margin-bottom: 12px;
    }

    /* Bootstrap 3's grid puts every field on its own row here already;
       this only closes the gutter it leaves at each edge. */
    .row {
        margin-inline: -8px;
    }
    .row > [class*="col-"] {
        padding-inline: 8px;
    }

    /* A form's buttons go full width and stack, in the order they are
       written -- the primary action first, where a thumb rests. */
    .modal-footer .btn,
    .box-footer .btn {
        width: 100%;
        margin: 0 0 8px;
    }
    .modal-footer .btn + .btn,
    .box-footer .btn + .btn {
        margin-inline-start: 0;
    }
}

/* ==================================================================
   Modals
   ==================================================================
   Bootstrap 3 gives a phone a 10px margin and lets the dialog grow as
   tall as it likes, so a long form scrolls the page behind the modal
   as well as the modal itself. A sheet anchored to the bottom of the
   screen scrolls in one place and puts its buttons under the thumb.
   ================================================================== */
@media (max-width: 767px) {
    .modal-dialog {
        margin: 0;
        width: 100%;
        max-width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        max-height: 94vh;
        display: flex;
        flex-direction: column;
    }
    .modal-content {
        border-radius: 16px 16px 0 0;
        border: 0;
        max-height: 94vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        min-height: 0;
    }

    /* Nearly every modal in this application opens a form immediately
       inside .modal-content, so the header, body and footer are the
       form's children and not the flex column's. The column then has a
       single item -- the form -- which takes its full content height,
       and .modal-body's overflow rule below applies to an element that
       is not a flex item and so never shrinks. The form overflowed the
       94vh box, .modal-content clipped it, and the fields past the fold
       could not be reached at all: on the till's Add a new contact,
       choosing Installment Customer reveals the guarantor fields and
       puts Save out of reach entirely.

       Making the form a flex column of its own, filling the content
       box, puts the three sections back on the flex column where the
       rules below expect them. Modals written without a form keep
       working: their sections are already .modal-content's children. */
    .modal-content > form {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }
    .modal-header {
        flex: 0 0 auto;
        padding: 14px 16px;
    }
    .modal-body {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 14px 16px;
        /* A flex item's min-height is auto, which means "do not shrink
           below the content" -- the one line that turns a scrollable
           panel back into an overflowing one. */
        min-height: 0;
    }
    .modal-footer {
        flex: 0 0 auto;
        padding: 12px 16px;
    }
}

/* ==================================================================
   The till's action bar
   ==================================================================
   Below 640px the bar stacks into three rows: the three buttons that
   close a sale, then the arrow and Credit Sale, then the clock and the
   register tools at the foot. The markup has the clock row second --
   it is one row with the sale buttons from md up -- so the order here
   is set rather than written: Credit Sale closes a sale too, and
   belongs next to the buttons that do, with the reference strip
   underneath all of them.

   It stays three rows, and the three are right: the buttons that close
   a sale, the ones that put it aside, and the till's own instruments.
   Packing them onto two was tried and is not available -- app.css
   already gives .pos-footer-secondary `width: 100% !important` on a
   phone so its buttons spread across the whole bar, which is a
   deliberate and good arrangement for a thumb, and undoing it to save
   40px would trade a real target for a small number.

   So the rows are made shorter instead: the clock and the register
   tools are a reference strip, not a place to aim, and they were as
   tall as the buttons above and below them.
   ================================================================== */
@media (max-width: 639px) {
    body.lockscreen .pos-form-actions > div {
        gap: 6px;
        padding: 7px 10px;
        min-height: 0;
    }

    body.lockscreen .pos-footer-ends {
        gap: 8px;
    }

    body.lockscreen .pos-form-actions .pos-footer-secondary {
        order: 1;
    }
    body.lockscreen .pos-form-actions .pos-footer-ends {
        order: 2;
    }

    body.lockscreen .pos-form-actions .pos-clock {
        height: 32px;
    }
}

/* The icons on the bar, on a phone.

   The register tools and the arrow were meant to be squares -- 34px in
   pos-modern.css -- but that file also lifts every button on the bar to
   a 44px minimum height on a touch screen, so on a phone they came out
   34 wide and 44 tall: a row of upright bars, not tiles. Each now gets
   one size in both directions, with the minimum stated alongside it so
   the touch rule cannot stretch it again.

   Credit Sale set its tick above its label, the only button on the bar
   that did, which made it read as a different kind of thing from the
   three above it. It sits beside the label now -- except when Draft,
   Quotation and Suspend are folded out and share the row with it, where
   there is only room for all four stacked the way those three are. */
@media (max-width: 767px) {
    body.lockscreen .pos-footer-tools {
        gap: 8px;
    }
    body.lockscreen .pos-form-actions .pos-tool {
        width: 40px;
        height: 40px;
        min-height: 40px;
        border-radius: 12px;
    }

    body.lockscreen .pos-form-actions .pos-more__toggle {
        width: 44px;
        height: 44px;
        min-height: 44px;
        border-radius: 12px;
    }

    body.lockscreen .pos-form-actions .pos-footer-secondary > .pos-express-finalize {
        flex-direction: row;
        gap: 8px;
    }
    body.lockscreen .pos-form-actions .pos-footer-secondary > .pos-express-finalize i {
        margin-bottom: 0;
    }
    body.lockscreen .pos-form-actions .pos-more.is-open ~ .pos-express-finalize {
        flex-direction: column;
        gap: 2px;
    }
}

/* ==================================================================
   Export buttons
   ==================================================================
   Every list screen carries the same five: CSV, Excel, Print, column
   visibility and PDF. At the desktop size they take two rows and 56px
   of a phone screen, above a table that has not loaded yet.

   Kept, not hidden -- a shopkeeper who wants a spreadsheet of today's
   sales on their phone should be able to get one -- but set at the
   size of what they are: the things on this screen you use least.
   ================================================================== */
@media (max-width: 767px) {
    .dt-buttons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px;
        margin-bottom: 6px;
    }
    .dt-buttons .dt-button,
    .dt-buttons .btn {
        margin: 0;
        padding: 5px 9px;
        font-size: 11px;
        line-height: 1.3;
    }
}