/*
 * Customers area on phones.
 *
 * Linked after the theme stylesheet and after rtl_layer (see the theme functions.php), and
 * every rule sits inside the phone breakpoint, so tablets and desktops are untouched. Rules
 * use flex order and logical properties where a side matters, so they follow the document
 * direction instead of assuming right to left.
 */
@media (max-width: 767px) {

    /* ---------------------------------------------------------------- navbar */

    /* Brand at the start, menu button at the end, both on one centred line. Floats put
       them on opposite sides depending on which stylesheet won, which is why the login
       page and the logged in pages disagreed. */
    body.customers .navbar.header .navbar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 60px;
    }

    body.customers .navbar.header .navbar-header::before,
    body.customers .navbar.header .navbar-header::after {
        display: none;
    }

    body.customers .navbar.header .navbar-brand {
        float: none;
        order: 0;
        display: flex;
        align-items: center;
        height: auto;
        max-width: 70%;
        margin: 0 !important;
        padding: 10px 15px;
    }

    body.customers .navbar.header .navbar-brand img {
        max-height: 40px;
        width: auto;
    }

    body.customers .navbar.header .navbar-toggle {
        float: none;
        order: 1;
        margin: 0 10px;
        padding: 10px;
        border: 0;
        border-radius: 8px;
    }

    body.customers .navbar.header .navbar-toggle .icon-bar {
        width: 24px;
        height: 3px;
        border-radius: 2px;
        background-color: #334155;
    }

    body.customers .navbar.header .navbar-toggle:hover,
    body.customers .navbar.header .navbar-toggle:focus {
        background-color: #f1f5f9;
    }

    /* Opened menu: full width rows that are easy to tap, text at the start side. */
    body.customers .navbar.header .navbar-collapse {
        max-height: none;
        border-top: 1px solid #e5e7eb;
        box-shadow: none;
    }

    body.customers .navbar.header .navbar-nav {
        float: none !important;
        margin: 0 -15px;
    }

    body.customers .navbar.header .navbar-nav > li {
        float: none;
        border-bottom: 1px solid #f1f5f9;
    }

    body.customers .navbar.header .navbar-nav > li > a {
        display: block;
        padding: 13px 20px;
        font-size: 15px;
        line-height: 1.5;
        text-align: start;
    }

    body.customers .navbar.header .navbar-nav > li.active > a {
        font-weight: 600;
        background-color: #f1f5f9;
    }

    /* The profile dropdown hangs off a bare avatar. In the phone menu show its links
       directly as ordinary rows instead of a second popup. */
    body.customers .navbar.header .customers-nav-item-profile > .dropdown-toggle {
        display: none;
    }

    body.customers .navbar.header .customers-nav-item-profile > .dropdown-menu {
        position: static;
        display: block;
        float: none;
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        border-top: 4px solid #f1f5f9;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        animation: none;
    }

    body.customers .navbar.header .customers-nav-item-profile > .dropdown-menu > li > a {
        padding: 13px 20px;
        font-size: 15px;
        text-align: start;
        white-space: normal;
        border-bottom: 1px solid #f1f5f9;
    }

    body.customers .navbar.header .customers-nav-item-profile > .dropdown-menu > li:last-child > a {
        border-bottom: 0;
    }

    body.customers .navbar.header .customers-nav-item-profile > .dropdown-menu .divider {
        display: none;
    }

    /* ---------------------------------------------------------- summary tiles */

    /* Project and ticket summaries: two compact tiles per row instead of five tall
       cards stacked one under the other. */
    body.customers dl.tw-grid.tw-grid-cols-1 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    body.customers dl.tw-grid.tw-grid-cols-1 > :last-child:nth-child(odd) {
        grid-column: span 2;
    }

    body.customers dl.tw-grid.tw-grid-cols-1 > * > div {
        padding: 10px 12px;
    }

    body.customers dl.tw-grid.tw-grid-cols-1 dd {
        margin-top: 2px;
    }

    body.customers dl.tw-grid.tw-grid-cols-1 dd > div {
        font-size: 20px;
    }

    /* --------------------------------------------------------- table toolbars */

    /* Page size and search on one line: the search box takes the room that is left
       instead of the two overlapping each other. */
    body.customers .dataTables_wrapper > .row:has(.dataTables_filter) {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0 0 12px;
    }

    body.customers .dataTables_wrapper > .row:has(.dataTables_filter)::before,
    body.customers .dataTables_wrapper > .row:has(.dataTables_filter)::after {
        display: none;
    }

    body.customers .dataTables_wrapper > .row:has(.dataTables_filter) > [class*="col-"] {
        float: none;
        width: auto;
        padding: 0;
    }

    body.customers .dataTables_wrapper > .row:has(.dataTables_filter) > [class*="col-"]:has(.dataTables_filter) {
        flex: 1 1 auto;
        min-width: 0;
    }

    body.customers .dataTables_wrapper .dataTables_length,
    body.customers .dataTables_wrapper .dataTables_filter {
        position: static;
        float: none;
        margin: 0;
        text-align: start;
    }

    body.customers .dataTables_wrapper .dataTables_length label,
    body.customers .dataTables_wrapper .dataTables_filter label {
        display: block;
        width: 100%;
        margin: 0;
    }

    body.customers .dataTables_wrapper .dataTables_length select {
        width: auto;
        height: 38px;
        margin: 0;
    }

    body.customers .dataTables_wrapper .dataTables_filter .input-group {
        display: table;
        width: 100%;
    }

    body.customers .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
        height: 38px;
        margin: 0 !important;
    }

    body.customers .dataTables_wrapper .dataTables_filter .input-group-addon {
        width: 38px;
    }

    body.customers .dataTables_wrapper .dataTables_info,
    body.customers .dataTables_wrapper .dataTables_paginate {
        float: none;
        text-align: center;
    }

    /* ------------------------------------------------------------ table cards */

    /* Wide tables become one card per row: each cell on its own line with the column
       name beside it (the script copies the header text into data-title). Without this
       the amount and status columns were cut off the side of the screen. */
    body.customers .table-responsive:has(> .table-mobile-cards) {
        overflow: visible;
        border: 0;
        margin-bottom: 0;
    }

    body.customers table.table-mobile-cards,
    body.customers table.table-mobile-cards > tbody,
    body.customers table.table-mobile-cards > tbody > tr,
    body.customers table.table-mobile-cards > tbody > tr > td {
        display: block;
        width: 100% !important;
    }

    body.customers table.table-mobile-cards {
        border: 0;
        margin-bottom: 8px;
    }

    body.customers table.table-mobile-cards > thead {
        display: none;
    }

    body.customers table.table-mobile-cards > tbody > tr {
        margin-bottom: 10px;
        padding: 4px 14px;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    }

    body.customers table.table-mobile-cards > tbody > tr > td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        min-height: 0;
        padding: 9px 0 !important;
        border: 0 !important;
        border-bottom: 1px dashed #eef0f3 !important;
        text-align: end !important;
        overflow-wrap: anywhere;
        background: transparent !important;
    }

    body.customers table.table-mobile-cards > tbody > tr > td:last-child {
        border-bottom: 0 !important;
    }

    body.customers table.table-mobile-cards > tbody > tr > td::before {
        content: attr(data-title);
        flex: 0 0 auto;
        max-width: 45%;
        font-size: 13px;
        font-weight: 600;
        color: #64748b;
        text-align: start;
    }

    body.customers table.table-mobile-cards > tbody > tr > td.td-empty {
        display: none;
    }

    /* The first cell of a list (number, name or subject) is the card title. */
    body.customers table.dt-table.table-mobile-cards > tbody > tr > td:first-child {
        display: block;
        font-size: 15px;
        font-weight: 600;
        text-align: start !important;
    }

    body.customers table.dt-table.table-mobile-cards > tbody > tr > td:first-child::before {
        display: none;
    }

    body.customers table.table-mobile-cards > tbody > tr > td.dataTables_empty {
        display: block;
        text-align: center !important;
    }

    body.customers table.table-mobile-cards > tbody > tr > td.dataTables_empty::before {
        display: none;
    }

    body.customers table.table-mobile-cards > tbody > tr > td .label {
        white-space: normal;
    }

    /* Row tick boxes and action menus keep their natural size. */
    body.customers table.table-mobile-cards > tbody > tr > td input[type="checkbox"] {
        margin: 0;
    }

    /* --------------------------------------------------------------- calendar */

    /* Month title on its own line above the buttons instead of squeezed between them. */
    body.customers .fc .fc-toolbar.fc-header-toolbar {
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 12px;
    }

    body.customers .fc .fc-toolbar-chunk:nth-child(2) {
        order: -1;
        width: 100%;
        text-align: center;
    }

    body.customers .fc .fc-toolbar-title {
        font-size: 17px;
    }

    body.customers .fc .fc-toolbar-chunk:first-child {
        display: flex;
        gap: 6px;
    }

    body.customers .fc .fc-button {
        padding: 6px 10px;
        font-size: 13px;
    }

    body.customers .fc .fc-today-button {
        margin: 0 !important;
    }

    /* ------------------------------------------------------------ misc pieces */

    /* Knowledge base search: magnifier at the start of the box, next to where the
       question is typed, not under the button. */
    body.customers #kb-search-form .kb-search-input {
        padding-left: 12px;
        padding-right: 12px;
        padding-inline-start: 40px;
    }

    body.customers #kb-search-form .kb-search-icon {
        left: auto;
        right: auto;
        inset-inline-start: 4px;
        z-index: 3;
    }

    /* Panels use a little less side padding so content gets the width. */
    body.customers .panel_s .panel-body {
        padding: 15px;
    }

    /* Page headings with a button beside them wrap instead of colliding. */
    body.customers .section-heading,
    body.customers .tw-flex.tw-justify-between {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Wide charts, images and embedded content never push the page sideways. */
    body.customers #wrapper img,
    body.customers #wrapper canvas,
    body.customers #wrapper iframe,
    body.customers #wrapper video {
        max-width: 100%;
    }

    body.customers #wrapper {
        overflow-x: hidden;
    }
}