/*
 * Page-wide rules for the portal, loaded by header.tag on every page. Served
 * from the CDN with a 60s cache and left out of the service worker cache, so an
 * edit is live a minute after scripts/deploy-static.sh without a WAR release.
 */

/*
 * iOS only (nothing else supports -webkit-touch-callout), so the controls keep
 * their design size elsewhere.
 */
@supports (-webkit-touch-callout: none) {
    /*
     * The native date field (DateField on touch screens) is drawn by iOS as a
     * centred button 39px tall; without its appearance it is a text line like
     * the others, and the min-height keeps an empty one from collapsing. The
     * button also gave it its natural width, which a field without one of its
     * own (the Dal/Al pair of the list filter popover) is sized by.
     */
    input[type="date"] {
        -webkit-appearance: none;
        appearance: none;
        min-height: 22px;
        min-width: 6.5em;
    }
    input[type="date"]::-webkit-date-and-time-value {
        text-align: left;
        margin: 0;
        min-height: 22px;
    }

    /*
     * iOS zooms the page in whenever a focused field is smaller than 16px, and
     * antd sizes its fields at 14px. !important because antd reaches the inner
     * input of passwords, affixed inputs, selects, number inputs and pickers
     * through more specific selectors (font-size: inherit from a 14px wrapper).
     * The line-height is pinned because the control height comes from the line
     * box: at 16px each of them grew by 2-3px; the large sizes already use 16px
     * and keep their own. A searchable select shows its value and placeholder
     * outside the input, so they follow it to 16px or the text would change
     * size as the customer starts typing.
     */
    @media (max-width: 760px) {
        input, textarea, select {
            font-size: 16px !important;
        }
        .ant-input:not(.ant-input-lg),
        .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-lg) > input,
        .ant-input-number:not(.ant-input-number-lg) .ant-input-number-input,
        .ant-picker:not(.ant-picker-large) .ant-picker-input > input,
        .ant-select-selection-search-input {
            line-height: 22px;
        }
        .ant-select-show-search .ant-select-selection-item,
        .ant-select-show-search .ant-select-selection-placeholder {
            font-size: 16px;
        }
        /*
         * The text around an input (a unit, a currency, the placeholder the date
         * field draws in its prefix) follows it to 16px instead of the wrapper's
         * 14px, with the same pinned line box so the control keeps its height.
         */
        .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-lg) {
            font-size: 16px;
            line-height: 22px;
        }
    }
}