/*
Phase 2 §72 ("Mobile UX", added 2026-08-23). Build-order item 58's
"Responsive QA" pass already established the Bootstrap-grid/no-horizontal-
scroll baseline (base.html's viewport meta tag, .table-responsive on every
data table) — this file is the small, targeted rest SPECS.md §38's "mobil
vollständig nutzbar" still needs on the three highest-interaction-load
pages §72 names: component_edit.html, package_preview.html,
topics/dashboard.html. No new UI framework (AdminLTE belongs to the
Symfony side of this repo, not Pressroom — see docs/modules/pressroom/
INTEGRATION.md) — plain utility classes applied from those templates.
*/

/* WCAG 2.5.5 target size (44x44 CSS px) — Bootstrap's own .btn/.btn-sm
   padding falls short of this on a touch screen. Applied selectively to
   the POST-action buttons on the three pages above, not globally: a
   blanket app-wide button-size change is real scope §72 doesn't ask for
   (it names specific pages, not "every button in the app"). */
.btn-touch {
    flex-shrink: 0; /* min-width would otherwise let flex squeeze it below its label */
    min-height: 44px;
    min-width: 44px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* component_edit.html's lock-/autosave-status bar: stays visible while
   scrolling a long textarea on a phone instead of scrolling out of view
   the moment the editor scrolls past it. */
.sticky-status {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #fff;
}

/* topics/dashboard.html's five sections use Bootstrap's real .accordion
   component (data-bs-toggle="collapse", its JS bundle already loaded in
   base.html) so a phone can open one section's table at a time instead of
   scrolling through all five. At/above md, §72 wants them back to plain
   always-visible sections rather than a click-to-expand accordion — rather
   than duplicate the section markup per breakpoint, this forces every
   .accordion-collapse open and turns the toggle button into an inert
   heading there, while `.collapse`/`.show` (Bootstrap's own classes) still
   drive the real open/close behavior below md. */
@media (min-width: 768px) {
    .dashboard-accordion .accordion-collapse {
        display: block !important;
    }
    .dashboard-accordion .accordion-button {
        cursor: default;
        pointer-events: none;
        background-color: transparent;
        box-shadow: none;
    }
    .dashboard-accordion .accordion-button::after {
        display: none;
    }
}