/* ==========================================================================
   Menu do atleta no celular (hambúrguer + menu lateral deslizante)
   Vale para as telas com .dashboard-wrapper > .sidebar (home, personal data,
   anamnesis, fitmatch). Carregado pelo _pwa_head.html; o JS (athlete-nav.js)
   marca <html> com .sc-has-athlete-nav só quando essa barra existe na página,
   então nas demais páginas nada disto tem efeito. Desktop (> 768px) intocado.
   ========================================================================== */
.sc-mtop, .sc-nav-backdrop, .sc-nav-close { display: none; }

@media (max-width: 768px) {
  html.sc-has-athlete-nav .sc-mtop {
    display: flex; align-items: center; gap: 12px;
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    height: calc(56px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 14px 0;
    box-sizing: border-box;
    background: rgba(10, 10, 10, .94);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-bottom: 1px solid #222;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }
  .sc-burger, .sc-nav-close {
    width: 42px; height: 42px; flex: none; border-radius: 12px;
    border: 1px solid #2a2a2a; background: #141414; color: #fff;
    display: grid; place-items: center; cursor: pointer; padding: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .sc-burger:active, .sc-nav-close:active { transform: scale(.96); }
  .sc-burger:focus-visible, .sc-nav-close:focus-visible { outline: 2px solid #c1ff72; outline-offset: 2px; }
  .sc-mtop-title {
    flex: 1; min-width: 0; font-weight: 700; font-size: 1rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .sc-mtop-brand { font-size: .72rem; letter-spacing: .14em; color: #c1ff72; font-weight: 700; white-space: nowrap; }

  /* o conteúdo começa abaixo da barra fixa e rola normalmente */
  html.sc-has-athlete-nav .dashboard-wrapper {
    padding-top: calc(56px + env(safe-area-inset-top, 0px)) !important;
  }

  /* barra lateral vira gaveta que desliza da esquerda */
  html.sc-has-athlete-nav .dashboard-wrapper > .sidebar {
    position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important;
    width: min(290px, 84vw) !important; height: 100dvh !important; max-height: none !important;
    z-index: 1002 !important; margin: 0 !important; box-sizing: border-box;
    padding-top: calc(64px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    border-right: 1px solid #222 !important; border-bottom: 0 !important;
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(-105%); visibility: hidden;
    transition: transform .26s cubic-bezier(.22, .8, .24, 1), visibility 0s linear .26s;
  }
  html.sc-nav-open .dashboard-wrapper > .sidebar {
    transform: none; visibility: visible;
    transition: transform .26s cubic-bezier(.22, .8, .24, 1);
    box-shadow: 14px 0 40px rgba(0, 0, 0, .55);
  }
  html.sc-has-athlete-nav .dashboard-wrapper > .sidebar .sidebar-link { padding-top: 14px; padding-bottom: 14px; }

  html.sc-has-athlete-nav .sc-nav-close {
    display: grid; position: absolute;
    top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px;
  }
  html.sc-has-athlete-nav .sc-nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 1001;
    background: rgba(0, 0, 0, .55); opacity: 0; pointer-events: none;
    transition: opacity .26s;
  }
  html.sc-nav-open .sc-nav-backdrop { opacity: 1; pointer-events: auto; }
  /* ---- conteúdo das telas do atleta cabendo na largura do celular ----
     (ex.: o formulário da Anamnesis usava colunas de no mínimo 400px, mais largas que
     a tela; padding de 2.5rem também apertava tudo). Vale para as 4 telas. */
  html.sc-has-athlete-nav .dashboard-wrapper > .main-content {
    min-width: 0 !important; max-width: 100% !important; box-sizing: border-box;
    padding: 1.25rem 1rem 2rem !important;
  }
  html.sc-has-athlete-nav .dashboard-wrapper .form-container,
  html.sc-has-athlete-nav .dashboard-wrapper .workout-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html.sc-has-athlete-nav .dashboard-wrapper .anamnesis-card,
  html.sc-has-athlete-nav .dashboard-wrapper .workout-card {
    min-width: 0; padding: 1.25rem !important; box-sizing: border-box;
  }
  html.sc-has-athlete-nav .dashboard-wrapper .form-control { max-width: 100%; box-sizing: border-box; }
  html.sc-has-athlete-nav .dashboard-wrapper img,
  html.sc-has-athlete-nav .dashboard-wrapper video { max-width: 100%; }

  /* trava o fundo só enquanto o menu está aberto */
  html.sc-nav-open, html.sc-nav-open body { overflow: hidden !important; }
}

@media (prefers-reduced-motion: reduce) {
  html.sc-has-athlete-nav .dashboard-wrapper > .sidebar, .sc-nav-backdrop { transition: none !important; }
}