/* Shared mobile-friendliness overrides.
   Loaded after common.css so it can adjust shared rules;
   loaded before per-page CSS so pages can still override when needed. */

/* iOS Safari zooms the page when a focused form control has font-size < 16px.
   Bootstrap's form-control-sm is 14px, and several toolbars use it.
   Force 16px below the sm breakpoint to prevent the auto-zoom jump. */
@media (max-width: 575.98px) {
    input.form-control,
    input.form-control-sm,
    select.form-select,
    select.form-select-sm,
    textarea.form-control,
    textarea.form-control-sm {
        font-size: 16px;
    }
}

/* Give Bootstrap modals a little breathing room on phones so they don't
   crowd the viewport edges. Bootstrap default is 0.5rem at sm but adds
   to it at larger breakpoints; this just enforces a minimum. */
@media (max-width: 575.98px) {
    .modal-dialog {
        margin: 0.5rem;
    }
}

/* Bare bootstrap-icon elements used as click targets are too small to tap
   reliably on phones (~14-18px). Bump the hit area when they appear inside
   tables, toolbars, or asset overlays. Desktop is unaffected. */
@media (max-width: 767.98px) {
    .table td > .bi[data-id],
    .table td > .bi.bi-trash-fill,
    .table td > .bi.bi-sticky,
    .viewer-bottom-toolbar .btn-sm,
    .asset-favorite-toggle,
    .asset-trash-icon {
        min-width: 2.5rem;
        min-height: 2.5rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem;
    }
}

/* Utility: a toolbar row that wraps cleanly on phones while staying
   single-line on md+. Pages can drop this on a flex container to get
   consistent mobile wrap behavior. */
.toolbar-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-end;
}

@media (min-width: 768px) {
    .toolbar-wrap.toolbar-wrap--nowrap-md {
        flex-wrap: nowrap;
    }
}

/* When tables are wrapped in .table-responsive on phones, make sure the
   wrapper itself doesn't introduce extra horizontal page scroll. */
@media (max-width: 767.98px) {
    .table-responsive {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }
}

/* Drop double horizontal padding when a .container is nested inside
   the base.html <main class="container"> on small screens. */
@media (max-width: 767.98px) {
    main.container > .container,
    main.container > div > .container {
        padding-left: 0;
        padding-right: 0;
    }
}