/**
 * Mobile Layout — global layout fixes on top of the React bundle + injected scripts
 *  1. Bottom nav: horizontally scrollable (17 items never fit on a phone)
 *  2. Injected nav links look like the React nav buttons (icon above label)
 *  3. Group card action rows wrap instead of pushing buttons off-screen
 * Floating buttons are positioned by /static/js/fab-dock.js
 */

:root {
  --mgs-nav-h: calc(64px + env(safe-area-inset-bottom, 0px));
  --mgs-fab-gap: 12px;
}

/* ═══════════ 1. Bottom navigation ═══════════ */
#root nav {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  gap: 2px;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
}
#root nav::-webkit-scrollbar { display: none; }

#root nav > button,
#root nav > a {
  flex: 1 0 auto !important;
  min-width: 60px;
  scroll-snap-align: start;
  -webkit-tap-highlight-color: transparent;
}

/* Edge fade hints that more items exist (toggled by fab-dock.js) */
#root nav.mgs-nav-more-right {
  -webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
          mask-image: linear-gradient(to right, #000 85%, transparent);
}
#root nav.mgs-nav-more-left {
  -webkit-mask-image: linear-gradient(to left, #000 85%, transparent);
          mask-image: linear-gradient(to left, #000 85%, transparent);
}
#root nav.mgs-nav-more-left.mgs-nav-more-right {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

/* ═══════════ 2. Injected nav links (Dashboard, Rotation, Leaves, ...) ═══════════ */
#root nav > a[data-mgsnav] {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 4px 8px !important;
  color: var(--text-gray, #9ca3af) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  font-family: inherit !important;
  text-decoration: none !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  white-space: nowrap;
}
#root nav > a[data-mgsnav] .mgs-nav-ic { font-size: 20px; line-height: 1.2; }
#root nav > a[data-mgsnav].mgs-nav-active {
  color: var(--primary, #10B981) !important;
  font-weight: 700 !important;
}

/* ═══════════ 3. Content rows on narrow screens ═══════════ */
#root main select,
#root main input,
#root main textarea {
  max-width: 100%;
  min-width: 0;
}

@media (max-width: 520px) {
  /* Group card: [assign guide select][Ed][+📋][📋+][🗑] → select on its own line
     (.mgs-wrap-row is tagged by fab-dock.js: rows of a <select> followed by buttons) */
  #root main .mgs-wrap-row { flex-wrap: wrap !important; }
  #root main .mgs-wrap-row > select { flex: 1 1 100% !important; }
  #root main .mgs-wrap-row > button { flex: 1 1 0 !important; min-height: 36px; }
}

/* Keep the last card clear of the floating buttons */
#root main { padding-bottom: 72px !important; }

/* ═══════════ 4. Quick-actions dock (fab-dock.js) ═══════════ */
#mgs-dock-toggle {
  position: fixed;
  left: 14px;
  bottom: calc(var(--mgs-nav-h) + var(--mgs-fab-gap) + 60px);
  z-index: 9510;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid #334155;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  color: #e5e7eb;
  font-size: 20px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.45);
  transition: transform .15s, background .2s;
  -webkit-tap-highlight-color: transparent;
}
#mgs-dock-toggle.mgs-visible { display: flex; }
#mgs-dock-toggle:active { transform: scale(.9); }
body.mgs-dock-open #mgs-dock-toggle {
  background: linear-gradient(135deg, #075E54, #128C7E);
  border-color: #25D366;
}

#mgs-dock-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9505;
  background: rgba(0,0,0,.45);
  display: none;
}
body.mgs-dock-open #mgs-dock-backdrop { display: block; }

#mgs-dock {
  position: fixed;
  left: 14px;
  bottom: calc(var(--mgs-nav-h) + var(--mgs-fab-gap) + 118px);
  z-index: 9510;
  min-width: 190px;
  max-width: calc(100vw - 28px);
  max-height: calc(100vh - var(--mgs-nav-h) - 160px);
  overflow-y: auto;
  padding: 6px;
  border-radius: 16px;
  background: #141a24;
  border: 1px solid #263244;
  box-shadow: 0 10px 34px rgba(0,0,0,.6);
  display: none;
  flex-direction: column;
  gap: 4px;
  font-family: Inter, -apple-system, sans-serif;
}
body.mgs-dock-open #mgs-dock { display: flex; }

/* Buttons adopted into the dock become menu rows */
#mgs-dock > [id^="ep-btn-"] {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  width: auto !important;
  height: auto !important;
  min-height: 44px;
  margin: 0 !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #e5e7eb !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  z-index: auto !important;
  cursor: pointer;
}
#mgs-dock > [id^="ep-btn-"]:not([style*="display: none"]) { display: flex !important; }
#mgs-dock > [id^="ep-btn-"]:active,
#mgs-dock > [id^="ep-btn-"]:hover { background: rgba(255,255,255,.06) !important; }
#mgs-dock > [id^="ep-btn-"] .ep-hist-icon { font-size: 18px; width: 22px; text-align: center; }
#mgs-dock > [id^="ep-btn-"] .ep-hist-label { display: inline !important; color: inherit !important; font-size: inherit !important; }
#mgs-dock .mgs-dock-label { font-size: 13px; }