/* =============================================================================
   The phone layer  (13 October 2026)
   -----------------------------------------------------------------------------
   Loaded last by the panel and admin skeletons, after every page's own sheet,
   because what it corrects is spread over all of them: inputs that make an
   iPhone zoom, buttons that run off the screen, desk tables that scrolled
   sideways for three screens on a phone, card headers whose text was squeezed
   into a column beside a button, and tab strips that gave no sign of the
   tabs past the edge. A page's own layout on a phone stays in its own sheet;
   this file holds only what every page shares. mobile.js is its companion.

   Phones are below 768px, as everywhere else in the portal (responsive.css).
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1 · Fields at 16px
   -----------------------------------------------------------------------------
   Safari on an iPhone zooms the page into any field whose text is smaller
   than 16px the moment it is tapped, and leaves it zoomed after: the page
   then pans sideways and every other element looks broken. Nearly every field
   in the portal is 12 to 14px (13 October 2026: 31 kinds on 40 pages). It
   applies to every touch screen and to everything below the desktop layout,
   because a phone held sideways is 667 to 932px wide and zooms all the same.
   The selector is heavy on purpose, to outrank the `!important` sizes in
   responsive.css and portal.css. */
@media (max-width: 991.98px), (hover: none) and (pointer: coarse) {
    :root body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]),
                   select, textarea, .select2-search__field) {
        font-size: 16px !important;
    }

    /* A select2 box is text, not a field, and does not zoom; it follows the
       fields so that a filter row does not mix 13px and 16px. */
    :root body .select2-container .select2-selection__rendered {
        font-size: 16px !important;
    }
}


/* -----------------------------------------------------------------------------
   2 · A button never runs off the screen
   -----------------------------------------------------------------------------
   Metronic's `.btn` and most of the portal's own buttons keep their label on
   one line. A long German label ("Mahnverfahren einleiten (Bezahlen
   111,54 €)") then pushed past the edge of the phone. On a phone a button is
   at most as wide as its row and its label wraps inside it. portal.css holds
   every `.btn` to one line with `!important` (section 6), hence this one. */
@media (max-width: 767.98px) {
    :root body :is(.btn, .ci-btn, .pb-btn, .pc-btn, .dz-btn, .uv-btn, .cw-btn, .cd-btn) {
        max-width: 100%;
        min-width: 0;
        white-space: normal !important;
        overflow-wrap: break-word;
    }
}


/* -----------------------------------------------------------------------------
   3 · Desk tables as a stack of rows
   -----------------------------------------------------------------------------
   The desk tables (`.ci-table` and its relatives) are 600 to 1000px wide and
   scrolled sideways inside a 340px card, so the amount, which is usually the
   last column, was off the screen. On a phone each row is a block: its first
   cell is the row's title, every other cell one line with the column's name
   on the left (`data-label`, from the table's header) and the value on the
   right. A cell's own markup is untouched: the name floats beside it, so a
   figure, a badge or a main line over a meta line reads as it does on a desk.

   mobile.js marks the tables this applies to (`data-pt-stack`) and names
   their cells. Tables that stack in their own way are not marked: the
   accounting cards, DATEV's, the eBO tables, the external records, the facts
   table and an invoice's lines. */
@media (max-width: 767.98px) {
    table[data-pt-stack] {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        table-layout: auto;
    }

    table[data-pt-stack] > thead {
        display: none;
    }

    table[data-pt-stack] > :is(tbody, tfoot) {
        display: block;
    }

    /* `!important` against Metronic, which takes the inset off every first
       and last row of a `.table` (`.table tr:first-child`). */
    table[data-pt-stack] > :is(tbody, tfoot) > tr {
        position: relative;
        display: block;
        padding: 14px 18px !important;
        border-bottom: 1px solid var(--ci-line, rgb(var(--pt-text) / 0.08));
    }

    table[data-pt-stack] > tbody > tr:last-child {
        border-bottom: 0;
    }

    table[data-pt-stack] > tfoot > tr {
        background: var(--ci-soft, rgb(var(--pt-text) / 0.03));
    }

    /* A row the page hides (a closed detail row) stays hidden: the block
       display above would otherwise outrank the browser's [hidden]. */
    table[data-pt-stack] > :is(tbody, tfoot) > tr[hidden],
    table[data-pt-stack] > :is(tbody, tfoot) > tr > [hidden] {
        display: none !important;
    }

    /* Every cell: the column's name on the left, the value on the right. */
    table[data-pt-stack] > :is(tbody, tfoot) > tr > td {
        display: flow-root;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        padding: 3px 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        text-align: right !important;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    table[data-pt-stack] > :is(tbody, tfoot) > tr > td[data-label]::before {
        content: attr(data-label);
        float: left;
        max-width: 46%;
        margin-right: 12px;
        padding-top: 1px;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.45;
        letter-spacing: 0;
        text-transform: none;
        text-align: left;
        white-space: normal;
        color: var(--ci-muted, rgb(var(--pt-text) / 0.55));
        overflow-wrap: normal;
    }

    /* The row's title: its first cell (after a tick box, if there is one),
       full width, without a name. */
    table[data-pt-stack] > :is(tbody, tfoot) > tr > td:first-child:not(.ci-col-check):not(.dz-col-check),
    table[data-pt-stack] > :is(tbody, tfoot) > tr > td:is(.ci-col-check, .dz-col-check) + td {
        display: block;
        padding: 0 0 6px !important;
        text-align: left !important;
    }

    table[data-pt-stack] > :is(tbody, tfoot) > tr > td:first-child:not(.ci-col-check):not(.dz-col-check)::before,
    table[data-pt-stack] > :is(tbody, tfoot) > tr > td:is(.ci-col-check, .dz-col-check) + td::before {
        content: none;
    }

    /* The tick sits in the row's top right corner, beside the title. */
    table[data-pt-stack] > tbody > tr > td:is(.ci-col-check, .dz-col-check) {
        position: absolute;
        top: 14px;
        right: 18px;
        width: auto !important;
        padding: 0 !important;
    }

    table[data-pt-stack] > tbody > tr > td:is(.ci-col-check, .dz-col-check)::before {
        content: none;
    }

    table[data-pt-stack] > tbody > tr > td:is(.ci-col-check, .dz-col-check) + td {
        padding-right: 30px !important;
    }

    /* The actions close the row, left-aligned, wrapping. */
    table[data-pt-stack] > :is(tbody, tfoot) > tr > td:is(.ci-col-actions, .pb-actions-col, .dz-col-actions) {
        padding-top: 10px !important;
        text-align: left !important;
    }

    table[data-pt-stack] > :is(tbody, tfoot) > tr > td:is(.ci-col-actions, .pb-actions-col, .dz-col-actions)::before {
        content: none;
    }

    table[data-pt-stack] > :is(tbody, tfoot) > tr > td:is(.ci-col-actions, .pb-actions-col, .dz-col-actions) :is(.ci-actions, .ci-row-actions, .pb-row-actions, .ci-inline-form) {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    /* A cell spanning the row (an empty list, an opened detail) is the row. */
    table[data-pt-stack] > :is(tbody, tfoot) > tr > td[colspan] {
        display: block;
        padding: 0 !important;
        text-align: left !important;
    }

    table[data-pt-stack] > :is(tbody, tfoot) > tr > td[colspan]::before {
        content: none;
    }

    table[data-pt-stack] > :is(tbody, tfoot) > tr > td:empty {
        display: none;
    }

    /* An inline form in a row or under a table (a reason and its button)
       takes the row's width: its field was capped at 130px. */
    .ci .ci-inline-form {
        flex-wrap: wrap;
    }

    .ci .ci-inline-form input.ci-input,
    .ci .ci-inline-form input.ci-input.form-control {
        flex: 1 1 180px;
        max-width: none;
    }

    /* The wrap that scrolled the table sideways has nothing left to scroll. */
    :is(.ci-table-wrap, .pb-table-wrap, .dz-table-wrap, .fk-table-wrap):has(> table[data-pt-stack]) {
        overflow-x: visible;
    }
}


/* -----------------------------------------------------------------------------
   4 · Card headers stack
   -----------------------------------------------------------------------------
   A desk card's header is its title and note on the left and its actions on
   the right. On a phone that left the note a column 140px wide (the rate
   tables' daily check ran to 30 lines) beside a button. Below 768px the
   actions go under the text, at the left. */
@media (max-width: 767.98px) {
    .ci-card-head {
        flex-wrap: wrap;
        gap: 10px;
        padding: 16px 18px 12px;
    }

    .ci-card-head > :first-child {
        flex: 1 1 100%;
        min-width: 0;
    }

    .ci-card-head > .ci-head-actions,
    .ci-card-head > .ci-actions,
    .ci-card-head > .ci-badge,
    .ci-card-head > form {
        flex: 0 1 auto;
        margin-left: 0;
    }
}


/* -----------------------------------------------------------------------------
   5 · Strips that scroll sideways say so
   -----------------------------------------------------------------------------
   The claim tabs, the user page's tabs, the accounting tabs and the other
   strips that scroll sideways on a phone fade out at the side where there is
   more of them (`data-pt-more`, set by mobile.js). Before, a strip simply
   ended mid-word at the screen's edge. */
[data-pt-more="end"] {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
}

[data-pt-more="start"] {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent);
}

[data-pt-more="both"] {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
}

[data-pt-strip] {
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
}

@media (prefers-reduced-motion: reduce) {
    [data-pt-strip] {
        scroll-behavior: auto;
    }
}


/* -----------------------------------------------------------------------------
   6 · A list's filters fold away
   -----------------------------------------------------------------------------
   The claims list, the users, the logs, Abrechnung and a user's claims open
   with a filter form of up to eight fields. On a phone that was the whole
   first screen, and the first claim was a scroll away. Below 768px the fields
   fold behind a button beside the search (`filter_toggle` in
   partials/fields.html); the number on it says how many are set. The search
   and the list's own actions stay where they were. */
.pt-filter-toggle {
    display: none;
}

@media (max-width: 767.98px) {
    [data-pt-filters]:not([data-pt-filters-open]) [data-pt-filters-fold] {
        display: none !important;
    }

    [data-pt-filters] :is(.pc-search, .pu-search, .alog-search) {
        flex: 1 1 0;
        min-width: 0;
    }

    .pt-filter-toggle {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        gap: 7px;
        height: 46px;
        padding: 0 16px;
        border: 1px solid rgb(var(--pt-line) / 0.12);
        border-radius: var(--pt-r-pill);
        background: rgb(var(--pt-line) / 0.04);
        color: rgb(var(--pt-text));
        font-size: 13.5px;
        font-weight: 600;
        line-height: 1;
        cursor: pointer;
        transition: background-color 0.18s var(--pt-ease), border-color 0.18s var(--pt-ease),
                    color 0.18s var(--pt-ease);
    }

    .pt-filter-toggle i {
        font-size: 16px;
        color: inherit;
    }

    .pt-filter-toggle[aria-expanded="true"] {
        border-color: rgb(var(--pt-mint-rgb) / 0.55);
        background: rgb(var(--pt-mint-rgb) / 0.12);
        color: var(--pt-mint2);
    }

    .pt-filter-toggle-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: var(--pt-r-pill);
        background: var(--pt-mint2);
        color: #fff;
        font-size: 11.5px;
        font-variant-numeric: tabular-nums;
    }

    .pt-filter-toggle-count[hidden] {
        display: none;
    }
}


/* -----------------------------------------------------------------------------
   7 · A dialog's close button stays in its corner
   -----------------------------------------------------------------------------
   responsive.css lets a dialog's header wrap on a phone, and a title block
   with a line of explanation under it is wider than the row, so the close
   button dropped to a line of its own under the text. The title block takes
   the room that is left instead and the button keeps the top right corner. */
@media (max-width: 767.98px) {
    .modal-header > :first-child:not([data-bs-dismiss]):not(.btn-close) {
        flex: 1 1 0;
        min-width: 0;
    }

    .modal-header > :is([data-bs-dismiss], .btn-close) {
        flex: 0 0 auto;
        align-self: flex-start;
        margin-left: auto;
    }
}