/* MED-5 — Mobile responsiveness for fixed-width sidebars (220–316 px).
 *
 * Loaded by every sidebar-bearing page (dashboard, accounting, myspace,
 * well_analytics, analytics, organization, admin). On viewports ≤ 768 px
 * the sidebar collapses into a full-width strip at the top of the page so
 * the main content area is no longer squashed below ~140 px wide.
 *
 * Implementation notes:
 *  - !important is required because every page defines its sidebar width
 *    inline inside its own <style> block (no shared CSS class).
 *  - We touch only the layout/sidebar selectors; per-page colors, fonts,
 *    paddings, etc. are left intact.
 */

@media (max-width: 768px) {

  /* ── 1. Stack layout containers vertically ─────────────────────────── */
  .layout,
  .ms-layout,
  .wa-layout,
  .an-layout,
  .ct-body {
    flex-direction: column !important;
  }

  /* ── 2. Sidebar elements become a full-width strip ─────────────────── */
  .sidebar,
  .ms-sidebar,
  .wa-sidebar,
  .an-sidebar,
  .ct-list-panel,
  .re-sidebar {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    max-height: 45vh;
    min-height: 0 !important;
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--border, #e2e8f0) !important;
    flex-shrink: 0;
  }

  /* ── 3. Reset main-content offset when sidebar was position:fixed ──── */
  /* (accounting.html applies `.main { margin-left: var(--sidebar-w) }`) */
  .layout > .main,
  .ms-main,
  .wa-main {
    margin-left: 0 !important;
  }

  /* ── 4. Admin: the editor uses a plain `d-flex` wrapper, no class.
   *    Force the re-sidebar above its sibling main panel.            ── */
  .re-sidebar {
    order: -1;
  }
  .re-sidebar + * {
    width: 100% !important;
    min-width: 0 !important;
  }
}