/*
 * Phone / small-tablet layer on top of main.css (Vali admin template, Bootstrap 4).
 * Everything is inside a max-width media query: desktop layout is untouched.
 */
@media (max-width: 767.98px) {

    /* header: the logo PNG is 4585px wide; without a width the flex item sizes to it and fills the screen */
    .app-header__logo {
        flex: 0 1 auto;
        width: 170px;
        padding: 0 8px;
        display: block;
    }
    .app-header__logo img {
        display: block;
        width: 100%;
        height: auto;
        max-height: 36px;
        object-fit: contain;
        object-position: left center;
    }
    .app-header .app-nav {
        margin-left: auto;
    }
    .app-header .app-nav__item {
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 0 10px;
    }

    /* less wasted space around the content */
    .app-content {
        padding: 12px;
    }
    .app-title {
        flex-wrap: wrap;
        padding: 12px;
        margin: -12px -12px 12px;
    }
    .tile {
        padding: 12px;
    }

    /* tables scroll inside themselves instead of widening the whole page */
    .app-content table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .app-content table th,
    .app-content table td {
        white-space: nowrap;
    }
    .app-content table td .btn {
        white-space: nowrap;
    }

    /* DataTables controls stack and use the full width */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        float: none;
        text-align: left;
        margin-bottom: 8px;
    }
    .dataTables_wrapper .dataTables_filter input {
        width: 100%;
        margin-left: 0;
    }

    /* touch-friendly controls; 16px stops iOS from zooming into inputs */
    .form-control,
    select.form-control,
    input[type="text"],
    input[type="number"],
    input[type="date"],
    input[type="search"],
    textarea {
        font-size: 16px;
        min-height: 42px;
    }
    .btn {
        min-height: 42px;
        white-space: normal;
    }
    .btn[style*="width:25%"],
    .btn[style*="width: 25%"] {
        width: 100% !important;
        margin-bottom: 8px;
    }

    /* icon links / buttons in table actions: bigger hit area */
    td a:not(.btn) > i.fa,
    td a:not(.btn) > i[class*="fa-"],
    .actions_btn a {
        display: inline-block;
        min-width: 40px;
        min-height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 18px;
    }
    .stock-convert {
        padding: 10px 16px;
        font-size: 16px;
    }

    /* tab strips and button toolbars */
    .nav-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .nav-tabs > li {
        flex: 0 0 auto;
        float: none;
    }
    .nav-tabs > li > a,
    .nav-tabs .nav-link {
        display: flex;
        align-items: center;
        min-height: 52px;
        padding: 12px 20px;
        font-size: 17px;
        margin-right: 6px;
    }
    .tab-pane .form-group.text-right {
        text-align: left;
    }
    .tab-pane .form-group.text-right .btn {
        display: block;
        width: 100%;
        margin: 0 0 8px;
    }
    .tab-pane .form-group.text-right > a:not(.btn) {
        display: block;
        padding: 8px 0;
    }
    .tab-pane .form-group.text-right br {
        display: none;
    }

    /* "cards": each table row becomes a block of "Label: value" lines (class m-cards, labels from mobile.js) */
    .app-content table.m-cards {
        display: block;
        overflow: visible;
    }
    .app-content table.m-cards thead {
        display: none;
    }
    .app-content table.m-cards tbody,
    .app-content table.m-cards tr {
        display: block;
        width: 100%;
    }
    .app-content table.m-cards tr {
        border: 1px solid #d5d9de;
        border-radius: 6px;
        background: #fff;
        margin-bottom: 12px;
        padding: 4px 12px;
    }
    .app-content table.m-cards td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 7px 0;
        border: 0;
        border-bottom: 1px solid #eef0f2;
        white-space: normal;
        text-align: right;
        word-break: break-word;
    }
    .app-content table.m-cards td:last-child {
        border-bottom: 0;
    }
    .app-content table.m-cards td::before {
        content: attr(data-label);
        flex: 0 0 38%;
        text-align: left;
        font-weight: 600;
        color: #5b6770;
    }
    .app-content table.m-cards td.m-empty {
        display: none;
    }
    .app-content table.m-cards td[colspan]::before {
        content: none;
    }
    .app-content table.m-cards td[colspan] {
        justify-content: center;
    }

    /* dialogs fit the screen and scroll inside */
    .modal-dialog {
        margin: 8px;
        max-width: none !important;
    }
    .modal-body {
        max-height: calc(100vh - 160px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .modal-footer .btn {
        flex: 1 1 auto;
    }

    /* long labels / forms never force sideways scrolling */
    .form-group label {
        word-break: break-word;
    }
    img {
        max-width: 100%;
        height: auto;
    }
}