/*
 * CollisionSuite — Global Button Sizing
 * Variant D from /dev/buttons/ (chosen 2026-06-10)
 *
 * Two rules, loaded in base.html after Bootstrap + typography.css:
 *
 * 1. Buttons never word-wrap. Bootstrap 5 ships .btn with
 *    white-space: normal, which turns long labels into two-line buttons
 *    sitting next to one-line neighbors. Whole buttons reflow instead
 *    (give the toolbar flex-wrap); in tables, labels must be short or
 *    responsive (see the markup convention in CLAUDE.md) — never wrapped.
 *
 * 2. Compact contexts are normalized to btn-sm metrics regardless of the
 *    size class the template author wrote, so sizing drift self-heals:
 *      - .page-actions  → the action row in a page/section header
 *      - .card-header   → card header action buttons
 *      - td             → table-row action buttons
 *    Deliberate exceptions opt out with .btn-lg (kept, e.g. the towing
 *    mobile workflow's full-width step buttons) or .btn-keep-size.
 *
 * Markup half of the convention (btn-group for related actions, icon +
 * <span class="d-none d-md-inline"> responsive labels, short verbs) lives
 * in CLAUDE.md under "Page Header Actions".
 */

.btn {
    white-space: nowrap;
}

.page-actions .btn:not(.btn-lg):not(.btn-keep-size),
.card-header .btn:not(.btn-lg):not(.btn-keep-size),
td .btn:not(.btn-lg):not(.btn-keep-size) {
    --bs-btn-padding-y: 0.25rem;
    --bs-btn-padding-x: 0.5rem;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-border-radius: var(--bs-border-radius-sm);
}

/*
 * Form-action footer (#326). The form-actions component
 * (components/form_actions.html) pins its Save/Cancel bar to the bottom of the
 * screen on full-page (non-modal) forms — a persistent action bar. It is FIXED
 * (not sticky) so it stays put regardless of form length or card nesting; a
 * subtle tertiary-bg shade + top border + soft lift make it read as an action
 * bar rather than page content.
 *   All sizes: fixed to the bottom of the content area.
 *   Desktop (>=992px): offset past the 200px fixed sidebar; buttons right-aligned.
 *   Phone (<768px): full-bleed with stretched buttons; padding clears the
 *     iPhone home indicator (needs viewport-fit=cover, set in base.html). The
 *     visualViewport handler in base.html lifts it above the keyboard.
 * Only .form-action-bar is targeted, NOT every .page-actions, so page/section
 * header action rows are unaffected.
 */
.form-action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;                 /* matches .fixed-top; below toasts (1090) */
    margin: 0;
    padding: 0.75rem 1rem;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    background-color: var(--bs-tertiary-bg);    /* subtle theme-aware shade */
    border-top: 1px solid var(--bs-border-color);
    box-shadow: 0 -0.25rem 0.85rem rgba(0, 0, 0, 0.08);
    transition: transform 0.15s ease-out;       /* follow the keyboard smoothly */
}

/* In-flow spacer reserves the bar's height at the form's end so the last field
   is never hidden behind the fixed bar (on every size, since it's fixed). */
.form-action-bar-spacer {
    display: block;
    height: calc(4.75rem + env(safe-area-inset-bottom, 0px));
}

/* Desktop: clear the 200px fixed sidebar so the bar spans only the content. */
@media (min-width: 992px) {
    .form-action-bar { left: 200px; }
}

/* Phone: full-bleed; buttons stretch to fill the bar for thumb reach. */
@media (max-width: 767.98px) {
    .form-action-bar { justify-content: stretch; }
    .form-action-bar > .btn,
    .form-action-bar > .btn-group { flex: 1 1 0; min-width: 0; }
}