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

   Every rule sits inside a phone (max 767.98px) or tablet (max 991.98px) media query,
   so nothing changes from 992px 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;
    }

    /* Booking forms pin fields with style="width: 400px" (transfer / room notes, request
       number, flight fields); the inline width stays, the phone caps it. */
    :is(#aqua-mobile, html) :is(input, select, .form-control, .form-select, .searchable-select)[style*="width"] {
        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;
    }

    /* Nine 40px page links (« ‹ 1 2 3 … 1187 › ») are 360px; on a phone card that leaves
       the right edge. They wrap to a second line instead. */
    :is(#aqua-mobile, html) .pagination {
        flex-wrap: wrap;
        row-gap: .25rem;
    }

    :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;
    }

    /* Plain Bootstrap tables with five or more columns that nobody wrapped in a
       .table-responsive (e.g. the salary lines in the personnel editor, 410px in a 303px
       card) scroll inside themselves, as table.mGrid does above. SearchableSelect panels
       inside them use position: fixed, so the scroller does not clip them. */
    :is(#aqua-mobile, html) table.table:has(> thead > tr > :nth-child(5)):not(.table-responsive > table, .advanced-grid table, .grouped-data-grid table) {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }

    /* Editable rows (salary lines, price lines) squeezed their pickers to 4–5 characters
       ("TR OF", "US"); the table scrolls, so the fields keep a readable width. */
    :is(#aqua-mobile, html) table.table :is(select, .form-select, input.form-control:not([type=checkbox], [type=radio])) {
        min-width: 96px;
    }

    /* Horizontal forms right-align their labels next to the field (col-md-2 … text-end);
       on a phone the label sits above the field, where right-aligned reads as misplaced. */
    :is(#aqua-mobile, html) .col-form-label.text-end {
        text-align: left !important;
    }

    /* ── Page gutters ──────────────────────────────────────────────────────────
       Three side paddings stacked up (.content-wrapper 15px, the layout's .container-fluid
       and the page's own nested .container-fluid, 10.5px each): a card started 33px in
       and a 360px phone kept 294px for content. One gutter stays — the outer
       .container-fluid, which still backs the negative margins of any .row inside. */
    :is(#aqua-mobile, html) .content-wrapper {
        padding-inline: 0 !important;
    }

    :is(#aqua-mobile, html) .content-wrapper .container-fluid .container-fluid {
        padding-inline: 0 !important;
    }

    /* The page header carries a 7px side margin on some pages and none on others, so it
       sat narrower than the cards below it. */
    :is(#aqua-mobile, html) .aqua-page-breadcrumb {
        margin-inline: 0 !important;
    }

    /* Route breadcrumbs keep the desktop width: calc(100% - 1rem) that paired with the
       .5rem margins removed above, so they ended 1rem short of the cards and clipped
       their title on the right. */
    :is(#aqua-mobile, html) .aqua-route-breadcrumb {
        width: 100% !important;
    }

    /* The page title is nowrap and its box clips: a Russian title such as
       "Бронирования однодневных экскурсий" lost its last word on a phone. */
    :is(#aqua-mobile, html) .aqua-page-breadcrumb .aqua-breadcrumb-title,
    :is(#aqua-mobile, html) .aqua-page-breadcrumb .aqua-breadcrumb-title * {
        white-space: normal !important;
        overflow-wrap: break-word;
    }

    /* Result card headers put the title, count badges and buttons in nested one-line
       flex rows (hotel list: "Hotel check-in list · 7 reservations · 6 hotels" + Room/Pax
       badges, 34px past the card). Wrapping changes nothing for a row that fits. */
    :is(#aqua-mobile, html) .card-header .d-flex:not(.flex-column, .flex-nowrap) {
        flex-wrap: wrap;
        row-gap: .35rem;
    }
}

/* ── Tablets (and phones) ─────────────────────────────────────────────────────
   Below 992px the menu collapses and the layout loses its sidebar, but the desktop
   compact sizes still apply. Only layout fixes live here; touch sizes stay above. */
@media screen and (max-width: 991.98px) {

    /* A `.card-body.row` is both the padded box and the gutter row, so its negative
       gutter margins pull it outside the card (tour sales edit: 4px each side). Filter
       cards hold a .row straight inside a box padded less than the gutter, so every
       field stuck out 5px on the right (dynamic reservations). */
    :is(#aqua-mobile, html) .card-body.row,
    :is(#aqua-mobile, html) .filter-card > .row {
        margin-inline: 0;
    }

    /* Rows of buttons beside a field (Search / History / Clear in a col-md-4 d-flex) kept
       one line and pushed the last button out of the card. Wrapping changes nothing for a
       row that fits. */
    :is(#aqua-mobile, html) .d-flex:not(.flex-column):has(> .btn + .btn) {
        flex-wrap: wrap;
        row-gap: .25rem;
    }

    /* Label / amount lines in four-up summary cards ("Balance 34,000,000.00" in a
       col-md-3 at 820px): the amount drops under its label instead of leaving the card. */
    :is(#aqua-mobile, html) .card-body .d-flex.justify-content-between:not(.flex-column) {
        flex-wrap: wrap;
        column-gap: .5rem;
    }

    /* Descriptions pasted from Word (tour programmes) bring their own fixed-width tables
       (class MsoNormalTable, width="…"); they scroll inside the text, not the dialog. */
    :is(#aqua-mobile, html) :is(table.MsoNormalTable, .modal-body table[width], .modal-body table[style*="width"]) {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }

    /* Documents keep their fixed design width (invoice 840px; the tour voucher's .mypg
       template is 672px and does not reflow) and scroll inside their print box instead
       of widening the page. Screen only — print and PDF do not see this media query. */
    :is(#aqua-mobile, html) :is(.aqua-print-wrap, .invoice-print-wrap, .invoice-grp-print-wrap) {
        max-width: 100%;
        overflow-x: auto;
    }
}