/* P406: real-phone adaptation.
 * base.html now emits <meta name="viewport" content="width=device-width, initial-scale=1">
 * in mobile mode only, so phones lay pages out at their CSS width (360-430px) instead of 980px.
 * Everything here is limited to mobile mode AND phone widths, so desktop pages and the
 * ?view=mobile preview inside a desktop browser (980px+) are not affected. */
@media (max-width: 767.98px) {
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

    /* iOS Safari zooms the page when a focused control is below 16px. */
    body[data-mobile-mode="true"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]),
    body[data-mobile-mode="true"] select,
    body[data-mobile-mode="true"] textarea {
        font-size: 16px !important;
    }

    /* Comfortable tap targets for stand-alone buttons (buttons inside table rows stay compact). */
    body[data-mobile-mode="true"] .btn:not(.btn-close):not(table .btn),
    body[data-mobile-mode="true"] .license-collapse-btn,
    body[data-mobile-mode="true"] .finance-section-toggle,
    body[data-mobile-mode="true"] .org-section-toggle,
    body[data-mobile-mode="true"] .acl-icon-btn {
        min-height: 36px;
    }
    body[data-mobile-mode="true"] .license-collapse-btn,
    body[data-mobile-mode="true"] .finance-section-toggle,
    body[data-mobile-mode="true"] .org-section-toggle,
    body[data-mobile-mode="true"] .acl-icon-btn {
        min-width: 36px;
    }

    /* Modals: never wider than the phone (tall dialogs keep Bootstrap's whole-modal scrolling). */
    body[data-mobile-mode="true"] .modal-dialog {
        max-width: calc(100vw - 16px);
        margin-left: auto;
        margin-right: auto;
    }

    /* Media never pushes the page sideways. */
    body[data-mobile-mode="true"] .main-wrap iframe,
    body[data-mobile-mode="true"] .main-wrap video {
        max-width: 100%;
    }

    /* Business-core period switch (日/周/月/3个月/6个月). */
    body[data-mobile-mode="true"] .bc-grain button { min-height: 36px; }

    /* Turnover alert thresholds: the 16px number boxes need room, so the three groups may wrap. */
    body[data-mobile-mode="true"] #turnoverRulesHint { flex-wrap: wrap !important; justify-content: flex-start !important; row-gap: 6px !important; column-gap: 10px !important; }
    body[data-mobile-mode="true"] #turnoverRulesHint .turnover-inline-group { font-size: 13px !important; gap: 3px !important; }
    body[data-mobile-mode="true"] #turnoverRulesHint .turnover-inline-number { width: 58px !important; min-width: 58px !important; min-height: 32px !important; }
}