/*
 * NoSmoke mobile spacing standard (ns-* classes)
 *
 * Problem: Bootstrap `col-md-*` columns have no vertical gap when they stack
 * on small screens, so Syncfusion dropdowns, inputs and buttons end up flush
 * against each other in mobile view.
 *
 * Standard:
 *   - Use `ns-form-row` instead of `row` for filter/form rows. Columns get a
 *     bottom margin below the md breakpoint, so stacked fields get vertical
 *     spacing. The row's own bottom spacing is unchanged on desktop.
 *   - Use `ns-stack` on flex containers (`d-flex gap-*`) that hold buttons or
 *     inputs. Below the md breakpoint it becomes a vertical stack with a gap.
 *   - Use `ns-form-actions` on the column/container that holds action buttons
 *     to guarantee vertical separation from the inputs above on mobile.
 *   - `ns-mt` / `ns-mb` are simple mobile-only top/bottom spacers.
 *
 * All rules only apply below the Bootstrap `md` breakpoint (768px); desktop
 * layout is untouched. Works with the Syncfusion Bootstrap 5 theme since the
 * classes are applied to plain container divs.
 */

.form-label {
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    /* Vertical gap between stacked columns inside a form/filter row.
       Also collapse the row's own bottom margin so spacing stays uniform. */
    .ns-form-row {
        row-gap: 0.75rem;
        margin-bottom: 0 !important;
        padding-bottom: 1rem;
    }

    /* Flex rows (button groups, checkbox rows) become vertical stacks. */
    .ns-stack {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
    }

        /* Items that are right-aligned on desktop stretch full width. */
        .ns-stack > * {
            width: 100%;
            margin-left: 0 !important;
        }

    /* Guaranteed separation between action buttons and the inputs above. */
   /* .ns-form-actions {
        margin-top: 0.5rem;
    }*/

        .ns-form-actions > * + * {
            margin-top: 0.5rem;
        }

    /* Simple mobile-only spacers. */
    .ns-mt {
        margin-top: 0.75rem !important;
    }

    .ns-mb {
        margin-bottom: 0.75rem !important;
    }
}

/* Utility that also helps on desktop: consistent gap for inline button groups. */
.ns-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}