/* mobile.css — responsive overrides for screens ≤ 768px.
   The desktop layout in snowball.css and the component inline styles is the
   default. These rules apply only on phones/narrow tablets. */

@media (max-width: 768px) {
  /* Body padding for the fixed bottom nav (+ safe-area on iPhone) */
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }

  /* Topbar simplifications */
  [data-mobile-hide-on-mobile] {
    display: none !important;
  }

  /* Reduce horizontal padding on screens since 32px feels cramped */
  .mt-screen-pad {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Make the top-level screen container squeeze in tighter */
  body > #root > div > div[data-screen-label] > div {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Tester challenge cards — single column */
  body > #root [style*="auto-fill"][style*="minmax(320px"] {
    grid-template-columns: 1fr !important;
  }

  /* Träningslogg day view: stack the 1.4fr/1fr split vertically */
  .mt-day-grid {
    grid-template-columns: 1fr !important;
  }

  /* Any grid container marked to stack on mobile (inline-styled grids that
     should become single-column under 768px). Overrides inline style via
     !important since we can't beat specificity otherwise. */
  [data-stack-on-mobile] {
    grid-template-columns: 1fr !important;
  }

  /* Reduce the body padding around screens so single-column content fills width */
  [data-screen-label] > div {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Hide power-user surfaces on mobile (Tabell, Program editor) */
  [data-mobile-hide="desktop-only"] {
    display: none !important;
  }
  [data-mobile-only="desktop-only-hint"] {
    display: block !important;
  }

  /* Modals take full width with small inset */
  .mt-modal {
    padding: 4vh 8px !important;
  }
}

/* The hint shown on mobile when a desktop-only surface is requested */
[data-mobile-only="desktop-only-hint"] {
  display: none;
}

/* Bottom nav — only visible on mobile via media query */
.mt-bottom-nav {
  display: none;
}
@media (max-width: 768px) {
  .mt-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: rgba(252, 252, 253, 0.95);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
    z-index: 40;
    padding: 4px 8px env(safe-area-inset-bottom, 8px);
    justify-content: space-around;
    align-items: stretch;
  }
}

.mt-bottom-nav button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
}
.mt-bottom-nav button[data-active="true"] {
  color: var(--signal);
}
.mt-bottom-nav button svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* Optional: hide tweaks panel toggle on mobile (we'll surface settings via the "Mer" tab) */
@media (max-width: 768px) {
  [data-tweaks-toggle] {
    display: none !important;
  }
}