/* ================================================================
   mobile-layout.css — shared "phone-shaped viewport" recipes for every
   VISION sub-app. Keyed off html.mobile-layout (a vh/vw ratio check
   mirrored onto <html> by mobile-layout.js — see isMobileViewport()),
   not a @media query, so JS and CSS always agree on what "mobile" means.
   Load this after each page's own inline <style> block so these rules
   win ties by source order (they also win on specificity thanks to the
   html.mobile-layout ancestor class either way).

   Every selector below targets element ids that only exist on one page
   each (#panel/#notesSidebar/#memberSidebar/#weekSidebar etc. are each
   unique across the whole suite), so this one file self-scopes per page
   with no risk of a rule accidentally matching on the wrong app.
   ================================================================ */

/* ---- Horizon: #panel/#bulkPanel/#checklistPanel/#metrucksPanel go from a right-side
   slide-in to a bottom sheet ---- */
html.mobile-layout #panel,
html.mobile-layout #bulkPanel,
html.mobile-layout #checklistPanel,
html.mobile-layout #metrucksPanel,
html.mobile-layout #areasPanel{
  position:fixed;
  top:auto; right:0; left:0; bottom:0;
  height:auto;
  /* capped at whichever is smaller: 85% of viewport, or the actual space below Horizon's
     topbar (--topbar-h, set by mobile-layout.js's updateTopbarHeightVar() — the topbar wraps to
     3-4 rows on mobile, so a flat 85vh assumed far more headroom than a fully-wrapped topbar
     (brand + nav + filters + quick-add, each on their own row) actually leaves, letting the sheet
     slide up over the still-visible quick-add field instead of stopping below it) */
  max-height:min(85vh, calc(100dvh - var(--topbar-h, 60px) - 12px));
  width:100%;
  border-left:none;
  border-top:1px solid var(--border);
  border-radius:16px 16px 0 0;
  transform:translateY(100%);
  transition:transform .22s ease;
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
html.mobile-layout #panel.open,
html.mobile-layout #bulkPanel.open,
html.mobile-layout #checklistPanel.open,
html.mobile-layout #metrucksPanel.open,
html.mobile-layout #areasPanel.open{
  transform:translateY(0);
}
.drawer-handle{
  display:none;
  width:36px; height:4px; border-radius:999px;
  background:var(--border);
  margin:0 auto 12px;
}
html.mobile-layout .drawer-handle{ display:block; touch-action:none; }

/* tap-outside-to-dismiss backdrop for the bottom sheets above — the desktop right-side
   slide-in panels never had one (no need to dismiss by tapping the still-visible hive), but a
   full-width bottom sheet covering most of the screen does */
#drawerBackdrop{
  display:none;
  position:fixed; inset:0; z-index:9;
  background:rgba(0,0,0,.45);
  opacity:0; pointer-events:none;
  transition:opacity .22s ease;
}
html.mobile-layout #drawerBackdrop{ display:block; }
html.mobile-layout #drawerBackdrop.open{ opacity:1; pointer-events:auto; }

/* ---- Luminate/Pupil/Refract: list + detail panes collapse to one column, toggled by the
   .mobile-detail-active class showMobileDetail()/showMobileList() (mobile-layout.js) apply to
   #main — each page's existing "open this item" function calls showMobileDetail() where it
   already reveals content, mirroring the guarded-optional-call convention this codebase
   already uses (e.g. `if(typeof refreshMetrucksView === 'function')`). ---- */
html.mobile-layout #main{ position:relative; overflow:hidden; }
html.mobile-layout #notesSidebar,
html.mobile-layout #memberSidebar,
html.mobile-layout #weekSidebar{
  width:100%; height:100%;
  position:absolute; inset:0;
  z-index:1;
}
html.mobile-layout #editorPane,
html.mobile-layout #detailPane,
html.mobile-layout #entryPane{
  position:absolute; inset:0;
  z-index:2;
  transform:translateX(100%);
  transition:transform .22s ease;
  background:var(--bg-panel);
}
html.mobile-layout #main.mobile-detail-active #editorPane,
html.mobile-layout #main.mobile-detail-active #detailPane,
html.mobile-layout #main.mobile-detail-active #entryPane{
  transform:translateX(0);
}
.mobile-back-btn{ display:none; }
html.mobile-layout .mobile-back-btn{
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:none;
  color:var(--text-muted);
  font-family:var(--font);
  font-size:13px; font-weight:600;
  cursor:pointer;
  padding:4px 0 14px;
}
html.mobile-layout .mobile-back-btn:hover{ color:var(--text-primary); }
