/**
 * Mobile action button SIZING only — named action classes (no global button tag).
 * Do NOT set display:* !important (breaks display:none Ajax triggers).
 * Colors / radius / hover: Skin Manager via buttons.css. Breakpoint: max-width 991.98px.
 */

@media screen and (max-width: 991.98px) {
    /* Keep hidden Ajax / utility triggers hidden */
    html body button.button[style*="display:none"],
    html body button.button[style*="display: none"],
    html body button.gridbutton[style*="display:none"],
    html body button.gridbutton[style*="display: none"],
    html body button.filterbutton[style*="display:none"],
    html body button.filterbutton[style*="display: none"],
    html body button.job-header-action-btn[style*="display:none"],
    html body button.job-header-action-btn[style*="display: none"],
    html body button.smallbutton[style*="display:none"],
    html body button.smallbutton[style*="display: none"] {
        display: none !important;
    }

    /* Standard action buttons — sizing only (shape/colors unchanged) */
    html body .button:not(.tab):not(.email-cta):not(.success-message):not(.error-message),
    html body .filterbutton,
    html body .button-white,
    html body .gridbutton:not(.job-summary-status-stamp-undo),
    html body .smallbutton:not(.job-summary-status-stamp-undo),
    html body .button-small:not(.job-summary-status-stamp-undo),
    html body .storeitem-btn,
    html body .job-header-action-btn,
    html body a.job-header-action-btn,
    html body button.button:not(.tab),
    html body button.filterbutton,
    html body button.gridbutton:not(.job-summary-status-stamp-undo),
    html body button.smallbutton:not(.job-summary-status-stamp-undo),
    html body button.job-header-action-btn,
    html body label.job-header-action-btn,
    html body .data-action-btn,
    html body .button-link,
    html body .buttonlink:not(.btt),
    html body .send-btn,
    html body a.button:not(.tab):not(.email-cta),
    html body .ff-btn:not(.ff-btn-desktop-sm):not(.ff-btn-desktop-md):not(.ff-btn-desktop-lg),
    html body .ds-btn:not(.ff-btn-desktop-sm):not(.ff-btn-desktop-md):not(.ff-btn-desktop-lg),
    html body .btn:not(.btn-link):not(.btn-close):not(.close):not(.navbar-toggler):not(.dropdown-toggle-split),
    html body button.btn:not(.btn-link):not(.btn-close):not(.close):not(.navbar-toggler),
    html body a.btn:not(.btn-link):not(.btn-close),
    html body .btn-secondary:not(.btn-link):not(.btn-close),
    html body .modal-footer .btn:not(.btn-link):not(.btn-close),
    html body .modal-footer .button,
    html body .calendar-filter-toggle,
    html body .calendar-select-date-btn,
    html body .calendar-date-nav .calendar-this-period,
    html body .calendar-nav-arrow {
        box-sizing: border-box !important;
        min-height: var(--ds-btn-min-height-mobile, 26px) !important;
        height: auto !important;
        padding: var(--ds-btn-padding-mobile-y, 2px) var(--ds-btn-padding-mobile-x, 6px) !important;
        font-size: var(--ds-btn-font-size-mobile, 11px) !important;
        line-height: 1.15 !important;
        min-width: 0 !important;
        max-width: 100% !important;
        width: auto !important;
        flex: 0 1 auto !important;
        white-space: nowrap;
    }

    html body .calendar-date-nav-controls .calendar-nav-arrow {
        width: var(--ds-btn-min-height-mobile, 26px) !important;
        min-width: var(--ds-btn-min-height-mobile, 26px) !important;
        height: var(--ds-btn-min-height-mobile, 26px) !important;
        min-height: var(--ds-btn-min-height-mobile, 26px) !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    html body .calendar-date-nav-controls .calendar-this-period.button,
    html body .calendar-date-nav-controls .calendar-this-period {
        min-height: var(--ds-btn-min-height-mobile, 26px) !important;
        height: var(--ds-btn-min-height-mobile, 26px) !important;
        padding: 0 var(--ds-btn-padding-mobile-x, 6px) !important;
        margin: 0 !important;
        font-size: var(--ds-btn-font-size-mobile, 11px) !important;
        line-height: 1.15 !important;
        display: inline-flex !important;
        align-items: center !important;
        align-self: center !important;
    }

    html body button.blockschedule-edit-icon,
    html body .blockschedule-edit-icon,
    html body a.calendar-schedule-settings-btn,
    html body .calendar-schedule-settings-btn {
        min-width: var(--ds-btn-mobile-sm-height, 24px) !important;
        width: var(--ds-btn-mobile-sm-height, 24px) !important;
        max-width: var(--ds-btn-mobile-sm-height, 24px) !important;
        min-height: var(--ds-btn-mobile-sm-height, 24px) !important;
        height: var(--ds-btn-mobile-sm-height, 24px) !important;
        padding: 0 !important;
        flex: 0 0 auto !important;
    }

    /* Compact grid / table / inline action tier */
    html body .gridbutton:not(.job-summary-status-stamp-undo),
    html body .smallbutton:not(.job-summary-status-stamp-undo),
    html body .button-small:not(.job-summary-status-stamp-undo),
    html body .button-link,
    html body button.gridbutton:not(.job-summary-status-stamp-undo),
    html body button.smallbutton:not(.job-summary-status-stamp-undo),
    html body .storeitem-btn {
        min-height: var(--ds-btn-mobile-sm-height, 24px) !important;
        padding: var(--ds-btn-mobile-sm-padding-y, 1px) var(--ds-btn-mobile-sm-padding-x, 6px) !important;
        font-size: var(--ds-btn-mobile-sm-font-size, 10px) !important;
    }

    /* Dropdown action toggles (Actions menus, etc.) */
    html body .btn-group > .button.dropdown-toggle,
    html body .btn-group > .gridbutton.dropdown-toggle,
    html body .btn-group > .job-header-action-btn.dropdown-toggle,
    html body .btn-group > .filterbutton.dropdown-toggle,
    html body .btn-group > .btn.dropdown-toggle:not(.btn-link),
    html body .job-header-action-btn.dropdown-toggle,
    html body .button.dropdown-toggle:not(.tab),
    html body .gridbutton.dropdown-toggle:not(.job-summary-status-stamp-undo),
    html body .filterbutton.dropdown-toggle,
    html body .btn.dropdown-toggle:not(.btn-link):not(.btn-close):not(.navbar-toggler):not(.dropdown-toggle-split) {
        min-height: var(--ds-btn-min-height-mobile, 26px) !important;
        padding: var(--ds-btn-padding-mobile-y, 2px) calc(var(--ds-btn-padding-mobile-x, 6px) + 3px) var(--ds-btn-padding-mobile-y, 2px) var(--ds-btn-padding-mobile-x, 6px) !important;
        font-size: var(--ds-btn-font-size-mobile, 11px) !important;
        line-height: 1.15 !important;
        width: auto !important;
    }

    html body .job-header-action-btn.dropdown-toggle::after,
    html body .button.dropdown-toggle::after,
    html body .gridbutton.dropdown-toggle::after,
    html body .btn.dropdown-toggle:not(.btn-link)::after {
        margin-left: 0.2em;
        vertical-align: 0.05em;
    }

    /* Action rows use flex gap — do not stack per-button margins */
    html body .ds-action-row > .button,
    html body .ds-action-row > button.button,
    html body .ds-action-row > .job-header-action-btn,
    html body .ds-action-row > .filterbutton,
    html body .ds-action-row > .gridbutton,
    html body .ds-action-row > .send-btn,
    html body .ds-action-row > .btn:not(.btn-link),
    html body .buttons > .button,
    html body .buttons > button.button,
    html body .buttons > .job-header-action-btn,
    html body .buttons > .filterbutton,
    html body .buttons > .gridbutton,
    html body .buttons > .send-btn,
    html body .buttons > .btn:not(.btn-link),
    html body .button-row > .button,
    html body .button-row > .btn,
    html body .button-row > .send-btn,
    html body .job-summary-customer-modal-btn-row > .button,
    html body .job-summary-customer-modal-btn-row > button,
    html body .job-summary-header-actions > .button,
    html body .job-summary-header-actions > .job-header-action-btn,
    html body .appointment-side-panel__header-actions > .button,
    html body .appointment-side-panel__header-actions > button.button,
    html body .appointment-side-panel__header-actions > a.button,
    html body .appointment-side-panel__header-actions > .btn-group,
    html body .appointment-side-panel__header-actions > .btn-group > .button.dropdown-toggle {
        margin: 0 !important;
    }

    html body .appointment-side-panel__header-actions.ds-action-row {
        justify-content: center !important;
        align-content: center !important;
    }

    html body .d-flex.flex-wrap > .button,
    html body .d-flex.flex-wrap > button.button,
    html body .d-flex.flex-wrap > .job-header-action-btn,
    html body .d-flex.flex-wrap > .filterbutton,
    html body .d-flex.flex-wrap > .gridbutton,
    html body .d-flex.flex-wrap > .send-btn,
    html body .d-flex.flex-wrap > .btn:not(.btn-link),
    html body .white-bg .d-flex.flex-wrap > .button,
    html body .white-bg .d-flex.flex-wrap > .job-header-action-btn {
        margin: 0 !important;
    }

    html body .job-summary-header-toolbar .job-header-action-btn,
    html body .job-summary-header-toolbar .btn-group > .job-header-action-btn {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
    }

    html body .center.white-bg .d-flex > .button,
    html body .center.white-bg .d-flex > .job-header-action-btn {
        width: auto !important;
        flex: 0 1 auto !important;
    }

    /* Full-width mobile CTAs — preserve intentional stretch */
    html body .ff-btn-mobile-full,
    html body .ds-btn--full-width-mobile,
    html body .ds-btn-bar--sticky-mobile .ds-btn,
    html body .ds-btn-bar--sticky-mobile .button,
    html body .payment-container .button.btn-secondary {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }
}