/* Mobile form ergonomics. Keep native fields separate from DevExpress editors. */
@media (max-width: 640px) {
    html[lang] body[data-dfms-mobile-inputs] :is(input, select, textarea):not(:where(
        [type="hidden"], [type="checkbox"], [type="radio"], [type="file"],
        [type="range"], [type="color"], [type="button"], [type="submit"],
        [type="reset"], [type="image"]
    )):not(:where(.dxbl-text-edit input, .dxbl-text-edit textarea)) {
        box-sizing: border-box;
        inline-size: 100%;
        min-inline-size: 0;
        max-inline-size: 100%;
        min-block-size: 44px;
        block-size: auto;
        padding-block: .625rem;
        padding-inline: .75rem;
        font-size: max(16px, 1rem);
        line-height: 1.5;
        scroll-margin-block: 5rem;
    }

    html[lang] body[data-dfms-mobile-inputs] :is(input, select, textarea):not(:where(
        [type="hidden"], [type="checkbox"], [type="radio"], [type="file"],
        [type="range"], [type="color"], [type="button"], [type="submit"],
        [type="reset"], [type="image"]
    )):not(:where(.dxbl-text-edit input, .dxbl-text-edit textarea)):focus {
        outline: 2px solid var(--dfms-primary);
        outline-offset: 2px;
        box-shadow: var(--dfms-focus-ring);
    }

    html[lang] body[data-dfms-mobile-inputs] :is(input, textarea)[readonly]:not(:disabled):not(:where(.dxbl-text-edit input, .dxbl-text-edit textarea)) {
        background: var(--dfms-surface-muted);
        color: var(--dfms-text);
        opacity: 1;
    }

    html[lang] body[data-dfms-mobile-inputs] :is(input, select, textarea):is([aria-invalid="true"], .invalid):not(:where(.dxbl-text-edit input, .dxbl-text-edit textarea)) {
        border-color: var(--dfms-danger-text);
    }

    html[lang] body[data-dfms-mobile-inputs] textarea:not(:where(.dxbl-text-edit textarea)) {
        min-block-size: 88px;
        max-block-size: min(14rem, 40dvh);
        overflow-y: auto;
        overflow-wrap: anywhere;
        white-space: pre-wrap;
        resize: vertical;
    }

    html[lang] body[data-dfms-mobile-inputs] input[type="date"]::-webkit-date-and-time-value {
        min-inline-size: 0;
        text-align: start;
    }

    /* These are the application's editor hosts, including portalled tree filters. */
    html[lang] body[data-dfms-mobile-inputs] :is(
        .main-content, .archive-dx-popup, .home-advanced-search-popup,
        .archive-dialog-department-picker__popover, .archive-catalog-department-dropdown
    ) .dxbl-text-edit {
        --dxbl-text-edit-font-size: max(16px, 1rem);
        --dxbl-text-edit-line-height: 1.5;
        --dxbl-text-edit-padding-x: .75rem;
        --dxbl-text-edit-padding-y: .625rem;
        --dxbl-text-edit-first-child-padding-x: .75rem;
        --dxbl-text-edit-following-child-padding-x: .75rem;
        box-sizing: border-box;
        min-inline-size: 0;
        max-inline-size: 100%;
        min-block-size: 44px;
        scroll-margin-block: 5rem;
    }

    html[lang] body[data-dfms-mobile-inputs] :is(
        .main-content, .archive-dx-popup, .home-advanced-search-popup,
        .archive-dialog-department-picker__popover, .archive-catalog-department-dropdown
    ) .dxbl-text-edit :is(.dxbl-text-edit-input, textarea) {
        box-sizing: border-box;
        min-inline-size: 0;
        max-inline-size: 100%;
        font-size: max(16px, 1rem);
        line-height: 1.5;
    }

    html[lang] body[data-dfms-mobile-inputs] :is(
        .main-content, .archive-dx-popup, .home-advanced-search-popup,
        .archive-dialog-department-picker__popover, .archive-catalog-department-dropdown
    ) .dxbl-text-edit textarea {
        min-block-size: 88px;
        max-block-size: min(14rem, 40dvh);
        overflow-y: auto;
        overflow-wrap: anywhere;
    }

    html[lang] body[data-dfms-mobile-inputs] :is(
        .main-content, .archive-dx-popup, .home-advanced-search-popup,
        .archive-dialog-department-picker__popover, .archive-catalog-department-dropdown
    ) .dxbl-text-edit:focus-within {
        border-color: var(--dfms-primary);
        box-shadow: var(--dfms-focus-ring);
    }

    html[lang] body[data-dfms-mobile-inputs] :is(
        .main-content, .archive-dx-popup, .home-advanced-search-popup,
        .archive-dialog-department-picker__popover, .archive-catalog-department-dropdown
    ) .dxbl-text-edit.invalid {
        border-color: var(--dfms-danger-text);
    }

    html[lang] body[data-dfms-mobile-inputs] :is(
        .main-content, .archive-dx-popup, .home-advanced-search-popup,
        .archive-dialog-department-picker__popover, .archive-catalog-department-dropdown
    ) .dxbl-text-edit.dxbl-readonly:not(.dxbl-disabled) {
        --dxbl-text-edit-readonly-bg: var(--dfms-surface-muted);
        --dxbl-text-edit-readonly-color: var(--dfms-text);
    }

    html[lang] body[data-dfms-mobile-inputs] :is(
        .main-content, .archive-dx-popup, .home-advanced-search-popup,
        .archive-dialog-department-picker__popover, .archive-catalog-department-dropdown
    ) .dxbl-text-edit :is(.dxbl-edit-btn-clear, .dxbl-edit-btn-dropdown, .dxbl-spin-btn-inc, .dxbl-spin-btn-dec) {
        flex-shrink: 0;
        min-inline-size: 44px;
        min-block-size: 44px;
        block-size: auto;
    }

    /* Side-by-side spin buttons each retain a full touch target without an 88px field. */
    html[lang] body[data-dfms-mobile-inputs] :is(.main-content, .archive-dx-popup, .home-advanced-search-popup) .dxbl-text-edit > .dxbl-btn-group-vertical {
        flex-direction: row;
        inline-size: auto;
        align-self: stretch;
    }

    html[lang] body[data-dfms-mobile-inputs] :is(
        .home-header-search, .chatbot-composer, .dfms-chat__search,
        .dfms-chat__composer-actions, .users-search, .departments-search,
        .archive-popup__footer, .advanced-search__actions,
        .received-books__filters, .received-books__attachments-tools,
        .archive-book-editor__actions, .archive-book-editor__suggestions,
        .archive-book-editor__attachments, .archive-date-editor,
        .archive-attachments-upload,
        .users-modal > footer, .department-dialog > footer
    ) :is(button, .dxbl-btn),
    html[lang] body[data-dfms-mobile-inputs] form button[type="submit"],
    html[lang] body[data-dfms-mobile-inputs] :is(.login-submit, .first-user-submit, .archive-file-picker) {
        min-inline-size: 44px;
        min-block-size: 44px;
        block-size: auto;
        flex-shrink: 0;
    }

    html[lang] body[data-dfms-mobile-inputs] :is(
        .remember-me, .users-options label, .email-settings__toggles .dxbl-checkbox,
        .archive-book-editor__settings .dxbl-checkbox, .advanced-search__switch,
        .archive-popup__body .dxbl-checkbox, .pending-books__mine
    ) {
        min-block-size: 44px;
    }

    html[lang] body[data-dfms-mobile-inputs] :is(
        .form-grid, .users-form-grid, .department-dialog__body,
        .advanced-search__form, .email-settings__fields, .email-settings__server-fields
    ) label > span:not(:where(.sr-only, .visually-hidden)),
    html[lang] body[data-dfms-mobile-inputs] :is(.archive-field, .archive-file-field, .archive-book-editor__field, .advanced-search__field, .users-department-field) > span {
        font-size: max(14px, .875rem);
        overflow-wrap: anywhere;
    }

    html[lang] body[data-dfms-mobile-inputs] :is(.field-error, .validation-message, .validation-errors, .home-header-search__error) {
        min-inline-size: 0;
        max-inline-size: 100%;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    html[lang] body[data-dfms-mobile-inputs] .home-header-search__controls {
        grid-template-columns: minmax(0, 1fr) 4.75rem auto;
    }

    html[lang] body[data-dfms-mobile-inputs] :is(
        .archive-popup__footer, .archive-book-editor__actions,
        .archive-date-editor > div:last-child, .users-modal > footer,
        .department-dialog > footer
    ) {
        flex-wrap: wrap;
    }

    html[lang] body[data-dfms-mobile-inputs] .home-header-search__query input {
        padding-inline-start: 2.25rem;
    }

    html[lang] body[data-dfms-mobile-inputs] .home-header-search button {
        inline-size: auto;
    }

    html[lang] body[data-dfms-mobile-inputs] :is(
        .form-grid, .users-form-grid, .department-dialog__body,
        .email-settings__fields, .email-settings__server-fields
    ) label {
        min-inline-size: 0;
    }

    html[lang] body[data-dfms-mobile-inputs] .dfms-chat {
        display: flex;
        flex-direction: column;
        min-block-size: 0;
    }

    html[lang] body[data-dfms-mobile-inputs] .dfms-chat__messages {
        flex: 1 1 auto;
        min-block-size: 0;
    }

    html[lang] body[data-dfms-mobile-inputs] :is(.dfms-chat__header, .dfms-chat__search, .dfms-chat__mode, .dfms-chat__composer, .chatbot-composer) {
        flex-shrink: 0;
    }

    html[lang] body[data-dfms-mobile-inputs] .dfms-chat__input-wrap textarea {
        min-block-size: 64px;
        max-block-size: min(110px, 30dvh);
        padding-block-end: 1.5rem;
    }

    html[lang] body[data-dfms-mobile-inputs] .chatbot-composer form {
        min-inline-size: 0;
    }

    html[lang] body[data-dfms-mobile-inputs] .chatbot-messages {
        min-block-size: 0;
    }

    /* A short viewport can scroll the form rather than clipping its lower controls. */
    @media (max-height: 480px) {
        html[lang] body[data-dfms-mobile-inputs] .dfms-chat {
            max-block-size: none;
        }
    }
}