/* Phone-width adaptations shared by all four portals (MES-1228).

   Every rule sits inside the phone media query, so nothing changes from 768px up.
   The values here are floors for touch use, and the compact desktop sizes they replace
   are set with !important on selectors of every shape across the theme files and page
   CSS. Rather than out-guess each one, rules that must win are prefixed with
   `:is(#aqua-mobile, html)`: it matches <html> like a plain `html` would, but carries the
   specificity of the id (there is no element with that id — it only lifts specificity). */

@media screen and (max-width: 767.98px) {

    /* ── Text fields ──────────────────────────────────────────────────────────
       iOS Safari zooms the page in when a focused field's text is under 16px and does
       not zoom back out. Fixed compact heights would clip 16px text, so heights go back
       to content-driven, with a tappable minimum. */
    :is(#aqua-mobile, html) :is(input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file], [type=hidden], [type=button], [type=submit], [type=reset], [type=image]), select, textarea) {
        font-size: 16px !important;
    }

    /* Legacy forms hard-code textarea widths (e.g. style="width:400px"). */
    :is(#aqua-mobile, html) textarea[style*="width"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Every field, not only Bootstrap ones: legacy classes (e.g. .legacy-input) pin 22px. */
    :is(#aqua-mobile, html) :is(input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file], [type=hidden], [type=button], [type=submit], [type=reset], [type=image]), select) {
        height: auto !important;
        min-height: 40px !important;
        line-height: 1.4 !important;
    }

    /* ── Buttons ───────────────────────────────────────────────────────────── */
    :is(#aqua-mobile, html) .btn {
        min-height: 40px !important;
        min-width: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .35rem;
    }

    :is(#aqua-mobile, html) :is(.btn-sm, .btn-xs) {
        min-height: 36px !important;
        min-width: 36px;
    }

    /* Row actions inside tables: keep rows compact but hittable. */
    :is(#aqua-mobile, html) :is(table, .advanced-grid) .btn {
        min-height: 34px !important;
        min-width: 34px !important;
    }

    :is(#aqua-mobile, html) .btn-close {
        min-width: 40px;
        min-height: 40px;
        background-position: center;
    }

    /* Multi-select toggles are <button class="form-select">. */
    :is(#aqua-mobile, html) :is(button.form-select, .om-multiselect-toggle) {
        min-height: 40px !important;
        height: auto !important;
        font-size: 16px !important;
    }

    /* Grid header sort/filter icons stay small; their tap area does not. */
    :is(#aqua-mobile, html) :is(.advanced-grid-header-sort-btn, .advanced-grid-header-filter-badge) {
        min-width: 28px !important;
        min-height: 28px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    /* Plain <button>s that carry their own compact styling. */
    :is(#aqua-mobile, html) :is(.operator-extras-toggle, .fx-display-selector__item) {
        min-height: 40px !important;
    }

    /* Package / hotel search filter panels (admin and B2B searches share them). */
    :is(#aqua-mobile, html) :is(.package-filter-box-header > button, .package-filter-actions > button, .package-legend-toggle, .filter-box-toggle) {
        min-height: 32px !important;
        min-width: 32px;
    }

    /* Country / city pickers in the search headers (hotel, transfer, excursion, dynamic):
       a fixed-width row of label + 160px picker pairs, which does not fit a phone. */
    /* min-width: 0 at every level: the wrapper is itself a flex item of the card header
       and would otherwise refuse to shrink below its longest placeholder. */
    :is(#aqua-mobile, html) .inline-location-filters {
        flex-wrap: wrap !important;
        row-gap: .4rem !important;
        min-width: 0;
        max-width: 100%;
    }

    :is(#aqua-mobile, html) .inline-location-field {
        flex: 1 1 100%;
        min-width: 0;
    }

    :is(#aqua-mobile, html) .inline-location-field .searchable-select {
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0 !important;
    }

    :is(#aqua-mobile, html) :is(.rfp-grip, .board-drag) {
        min-width: 28px !important;
        min-height: 32px !important;
    }

    /* Dashboard card colour swatches. */
    :is(#aqua-mobile, html) .board-card button[class^="tone-"] {
        width: 28px !important;
        height: 28px !important;
    }

    /* Dashboard calendar days (25px), API traffic filters (25px) and the reservation
       history's text buttons (16px). */
    :is(#aqua-mobile, html) .board-calendar button {
        min-height: 36px !important;
    }

    :is(#aqua-mobile, html) :is(.traffic-segmented button, .traffic-scope-chip, .rez-history-v2__link-button) {
        min-height: 32px !important;
    }

    /* The "×" on a multi-select chip is a 9×13px glyph. */
    :is(#aqua-mobile, html) .om-multiselect-chip-remove {
        min-width: 24px;
        min-height: 24px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    /* ── Bottom bar ────────────────────────────────────────────────────────────
       26px tall with 11px text and eight items: the account button wraps to two lines
       and spills out of the bar. On a phone it grows to 40px, the vendor link gives up
       its room, the account label truncates, and every control gets a 32px target. */
    :is(#aqua-mobile, html) #site-bottom-bar {
        height: 40px !important;
        padding: 0 6px !important;
    }

    :is(#aqua-mobile, html) #site-bottom-bar .beyazlink {
        display: none !important;
    }

    /* The flag and the count carry the meaning; their words stay for screen readers. */
    :is(#aqua-mobile, html) #site-bottom-bar :is(.lang-name, .online-users-label) {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        clip-path: inset(50%) !important;
        white-space: nowrap !important;
    }

    /* The desktop rule caps this side at 34% and cuts the online count mid-word. */
    :is(#aqua-mobile, html) #site-bottom-bar .footer-left {
        max-width: none !important;
        overflow: visible !important;
    }

    :is(#aqua-mobile, html) #site-bottom-bar .impersonation-account-trigger {
        display: inline-block !important;
        max-width: 34vw !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        vertical-align: middle !important;
        line-height: 32px !important;
    }

    :is(#aqua-mobile, html) #site-bottom-bar :is(button, a, .footer-item) {
        min-height: 32px;
        min-width: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* ── Checkboxes and radios ─────────────────────────────────────────────── */
    /* Not toggle switches: those are pills, and a fixed square would flatten them.
       Classless inputs (legacy-ported lists and tables, e.g. the 211 vehicle checkboxes on
       transfer reservations) and the theme's 13px list and grid checkboxes get the same
       size. Custom toggles hide their input with position: absolute, so it cannot move. */
    :is(#aqua-mobile, html) .form-check-input:not(.form-switch .form-check-input),
    :is(#aqua-mobile, html) .custom-control-input:is([type=checkbox], [type=radio]),
    :is(#aqua-mobile, html) :is(.voucher-action-bar, .invoice-action-bar, .invoice-grp-action-bar) input:is([type=checkbox], [type=radio]),
    :is(#aqua-mobile, html) .package-check-option input:is([type=checkbox], [type=radio]),
    :is(#aqua-mobile, html) input:is([type=checkbox], [type=radio]):is(:not([class]), [class=""]),
    :is(#aqua-mobile, html) :is(.checkbox-list-container, .checkbox-list, .advanced-grid) input[type=checkbox]:not(.form-switch .form-check-input) {
        width: 20px !important;
        height: 20px !important;
        flex-shrink: 0;
    }

    /* Inline beside its text a classless box sits on the baseline; at 20px it sticks up. */
    :is(#aqua-mobile, html) input:is([type=checkbox], [type=radio]):is(:not([class]), [class=""]) {
        vertical-align: middle;
    }

    :is(#aqua-mobile, html) .package-check-option {
        min-height: 36px;
        display: flex !important;
        align-items: center;
        gap: .5rem;
    }

    /* The input moves into the flex flow, so Bootstrap's float offset (left padding plus
       negative margin) goes; inline checks stay inline. */
    :is(#aqua-mobile, html) .form-check {
        min-height: 32px;
        display: flex;
        align-items: center;
        gap: .4rem;
        padding-left: 0;
    }

    :is(#aqua-mobile, html) .form-check-inline {
        display: inline-flex;
    }

    :is(#aqua-mobile, html) .form-check .form-check-input {
        margin: 0;
        float: none;
    }

    :is(#aqua-mobile, html) .form-check-label {
        padding-block: 6px;
    }

    /* ── Dropdown lists ────────────────────────────────────────────────────── */
    :is(#aqua-mobile, html) .searchable-select-display {
        min-height: 40px !important;
        font-size: 16px !important;
    }

    :is(#aqua-mobile, html) .searchable-select-item {
        padding: 10px 12px !important;
        min-height: 40px;
        line-height: 20px !important;
        font-size: 15px !important;
        white-space: normal;
    }

    :is(#aqua-mobile, html) .om-multiselect-menu .form-check {
        min-height: 40px;
    }

    :is(#aqua-mobile, html) .dropdown-menu .dropdown-item {
        padding-block: 10px !important;
        min-height: 40px;
    }

    /* ── Tabs and pagination ───────────────────────────────────────────────── */
    :is(#aqua-mobile, html) :is(.nav-tabs, .nav-pills) .nav-link {
        min-height: 40px;
        display: flex;
        align-items: center;
    }

    :is(#aqua-mobile, html) .pagination .page-link {
        min-width: 40px;
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* ── Rows that must wrap rather than widen the page ────────────────────── */
    :is(#aqua-mobile, html) :is(.d-flex:has(> .form-check-inline), .btn-toolbar, .btn-group:not(.btn-group-vertical)) {
        flex-wrap: wrap;
        row-gap: .25rem;
    }

    /* Long checkbox labels ("When checked, this rule ...") were nowrap on some pages. */
    :is(#aqua-mobile, html) .form-check-label {
        white-space: normal !important;
    }

    :is(#aqua-mobile, html) .form-check-inline {
        margin-right: .75rem;
    }

    /* ── Document pages (voucher, invoice, grouped invoice) ──────────────────
       Table-built action bars with fixed-width label cells and inline input widths,
       and a fixed 840px print box. The document itself adapts in its FORMAT/*.css. */
    /* Only the bar's own layout table stacks; nested tables keep their columns. Blazor
       builds Razor tables without the implicit <tbody>, so both paths are listed. */
    :is(#aqua-mobile, html) :is(.voucher-action-bar, .invoice-action-bar, .invoice-grp-action-bar) > table,
    :is(#aqua-mobile, html) :is(.voucher-action-bar, .invoice-action-bar, .invoice-grp-action-bar) > table > tbody,
    :is(#aqua-mobile, html) :is(.voucher-action-bar, .invoice-action-bar, .invoice-grp-action-bar) > table > tr,
    :is(#aqua-mobile, html) :is(.voucher-action-bar, .invoice-action-bar, .invoice-grp-action-bar) > table > tbody > tr,
    :is(#aqua-mobile, html) :is(.voucher-action-bar, .invoice-action-bar, .invoice-grp-action-bar) > table > tr > td,
    :is(#aqua-mobile, html) :is(.voucher-action-bar, .invoice-action-bar, .invoice-grp-action-bar) > table > tbody > tr > td {
        display: block;
        width: auto !important;
        text-align: left !important;
    }

    :is(#aqua-mobile, html) :is(.voucher-action-bar, .invoice-action-bar, .invoice-grp-action-bar) > table > tr > td > :is(input:not([type=checkbox], [type=radio]), select),
    :is(#aqua-mobile, html) :is(.voucher-action-bar, .invoice-action-bar, .invoice-grp-action-bar) > table > tbody > tr > td > :is(input:not([type=checkbox], [type=radio]), select) {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* The proforma calculator is a real table (PP x multiplier x nights + ...): it keeps
       its columns and scrolls inside itself. */
    :is(#aqua-mobile, html) .invoice-mini-table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }

    :is(#aqua-mobile, html) .legacy-btn {
        min-height: 36px !important;
        margin: 0 4px 4px 0;
    }

    :is(#aqua-mobile, html) :is(.invoice-print-wrap, .invoice-grp-print-wrap) {
        width: auto !important;
        max-width: 100%;
        min-height: 0 !important;
        padding: 6px !important;
    }

    /* Bootstrap's scroller has no position, so absolutely positioned descendants
       (.visually-hidden button labels) escape its clipping and widen the page. */
    :is(#aqua-mobile, html) .table-responsive {
        position: relative;
    }

    /* Legacy table-built forms (mGrid) with three or more columns scroll inside
       themselves; one- and two-column layout tables keep stretching. */
    :is(#aqua-mobile, html) table.mGrid:has(tr > :nth-child(3)) {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }

    /* A `.card-body.row` is both the padded box and the gutter row, so its negative
       gutter margins pull it outside the card. */
    :is(#aqua-mobile, html) .card-body.row {
        margin-inline: 0;
    }
}