/* ============================================================
   OPTIMUSCLE — View System (single source of truth)
   ============================================================
   Règles strictes : une seule view affichée à la fois.
============================================================ */

/* ===== TOUTES les pages sont CACHÉES par défaut ===== */
.page {
  display: none !important;
}

.page.active {
  display: block !important;
  padding: 0 0 24px;
  animation: fade .4s ease;
}

/* ===== Filtre par data-view ===== */

/* Quand on n'est PAS en dashboard, aucune page de dashboard ne peut s'afficher */
body:not([data-view="dashboard"]) #page-home,
body:not([data-view="dashboard"]) #page-history,
body:not([data-view="dashboard"]) #page-badges,
body:not([data-view="dashboard"]) #page-profile,
body:not([data-view="dashboard"]) #page-workout {
  display: none !important;
}

/* Quand on n'est PAS en onboarding, page-onboarding est cachée */
body:not([data-view="onboarding"]) #page-onboarding {
  display: none !important;
}

/* ===== VIEW LANDING (avant login) ===== */
#view-landing {
  display: none;
}
body[data-view="landing"] #view-landing {
  display: block !important;
}
body:not([data-view="landing"]) #view-landing {
  display: none !important;
}

/* ===== LOGIN page ===== */
#page-login {
  /* Visible par défaut (caché par .hidden) */
}
#page-login.hidden {
  display: none !important;
}
body:not([data-view="login"]) #page-login {
  display: none !important;
}

/* ===== HEADER, TABS, SETTINGS : visibles UNIQUEMENT sur dashboard ===== */
body:not([data-view="dashboard"]) #app-header,
body:not([data-view="dashboard"]) #tabs,
body:not([data-view="dashboard"]) #settings-btn,
body:not([data-view="dashboard"]) #user-avatar-wrap {
  display: none !important;
}

/* En dashboard, tabs cachées si subpage=workout */
body[data-view="dashboard"][data-subpage="workout"] #tabs {
  display: none !important;
}



/* Aussi sur tablet/desktop, le body reste full pour la landing */
@media (min-width: 600px) {
  body[data-view="landing"] {
    max-width: 100% !important;
  }
}


/* ============================================================
   LANDING : full-width AGGRESSIF (override TOUT)
   ============================================================ */
html:has(body[data-view="landing"]),
html:has(body[data-view="landing"]) body {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body[data-view="landing"] {
  max-width: 100vw !important;
  width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  background: var(--bg) !important;
}

/* Fallback pour navigateurs sans :has() */
@supports not selector(:has(*)) {
  body[data-view="landing"] {
    max-width: 100vw !important;
    width: 100vw !important;
  }
}

/* Tablette/desktop : pareil, FULL WIDTH */
@media (min-width: 600px) {
  body[data-view="landing"] {
    max-width: 100vw !important;
    width: 100vw !important;
  }
}

@media (min-width: 1024px) {
  body[data-view="landing"] {
    max-width: 100vw !important;
    width: 100vw !important;
    padding-left: 0 !important;
  }
}