body { padding-bottom: 40px; }

/* ============================================================
   Touch Mode (Phase 1 - shell navigation behavior only)
   Activated by localStorage 'merpTouchMode'='touch', applied as
   <html data-merp-touch="on"> by the early script in _incHeader.cfm.
   ALL rules are scoped under [data-merp-touch="on"] so Standard Mode
   (attribute absent) is never visually affected. Touch CSS lives only
   in this file. merp- prefix per Master Prompt; Bootstrap-utility-first.
   ============================================================ */

/* Expose the existing navbar hamburger/offcanvas at all viewport sizes
   (in Standard Mode the navbar keeps its d-lg-none mobile-only behavior). */
[data-merp-touch="on"] .merp-mobile-hamburger { display: inline-flex !important; }

/* NOTE: Touch Mode does NOT hide the left sidebar. It forces the EXISTING
   collapsed-sidebar state via the shell's own class-based collapse system
   (.merp-sidebar.collapsed + .merp-main.sidebar-hidden + .merp-sidebar-reopen.visible),
   driven by _incHeader.cfm (pre-paint attribute) and _incShell_LeftRight.cfm
   (runtime classes when merpTouchMode==='touch'). The slim reopen rail stays
   visible and usable, so the left-nav affordance is always present. No sidebar
   hide/margin rules belong here. */

/* Touch contextual bar (Back / Section Home / All mERP), rendered by the
   shell but hidden until Touch Mode is on. Larger tap targets. */
.merp-touch-ctxbar { display: none; }
[data-merp-touch="on"] .merp-touch-ctxbar {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  padding: .5rem .75rem;
  margin-bottom: 1rem;
  background: var(--merp-clr-sidebar-bg, #f8f9fb);
  border: 1px solid var(--merp-clr-sidebar-border, #e9ecef);
  border-radius: .5rem;
}
[data-merp-touch="on"] .merp-touch-ctxbar .btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
[data-merp-touch="on"] .merp-touch-chip {
  font-size: .75rem;
  font-weight: 600;
  color: #6c757d;
  background: rgba(108, 117, 125, .12);
  border-radius: 1rem;
  padding: .25rem .6rem;
  margin-left: auto;
}

/* Dark-mode token alignment for the Touch contextual bar */
[data-merp-theme="dark"][data-merp-touch="on"] .merp-touch-ctxbar,
[data-merp-theme="dark"] [data-merp-touch="on"] .merp-touch-ctxbar {
  background: #1e2128;
  border-color: #2d3039;
}
[data-merp-theme="dark"] .merp-touch-chip {
  color: #9ca3af;
  background: rgba(255, 255, 255, .08);
}