/* Fallback / pre-React layout styles. Moved out of index.html so the CSP
 * can drop 'unsafe-inline' from style-src in production. */

html, body {
  background-color: #f9fafb;
  color: #000;
  margin: 0;
  padding: 0;
  min-height: 100dvh;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  /* Enable smooth touch scrolling on iOS */
  -webkit-overflow-scrolling: touch;
  /* Prevent text size adjustment */
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Dark theme pages should set this class on the html element */
html.dark-theme,
html.dark-theme body {
  background-color: #141414 !important;
  color: #ffffff;
}

#root {
  min-height: 100dvh;
  position: relative;
  overflow-x: hidden;
}

/* Basic layout styles to ensure visibility */
.fallback-content {
  padding: 20px;
  text-align: center;
  display: none;
}

/* Only show fallback if main content fails to load */
body:not(:has(#root > *)) .fallback-content {
  display: block;
}