/*
 * Styles for the error message shown when JavaScript is disabled.
 *
 * Background: Flutter Web depends entirely on JavaScript to render. Without
 * JS the page stays blank and the user receives no feedback. This file is
 * loaded alongside the <noscript> block in index.html. Browsers render
 * <noscript> content only when JavaScript is disabled, so normal users are
 * not affected in any way.
 *
 * Language note: Dynamic language detection (navigator.language) is not
 * available in a <noscript> context because JS is unavailable. Flutter also
 * sets the lang attribute on <html> at runtime via JS, so CSS :lang()
 * selectors never match here. Both German and English are therefore shown
 * together, with English as the internationally understood fallback.
 */

/* Full-screen overlay that covers the empty Flutter canvas */
#noscript-overlay {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: #f5f5f5;
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
}

/* Centered info card */
#noscript-overlay .noscript-box {
  background: #ffffff;
  border-radius: 8px;
  padding: 40px 32px;
  max-width: 480px;
  width: 90%;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
  text-align: center;
}

/* App logo at the top of the card for brand recognition */
#noscript-overlay .noscript-logo {
  display: block;
  max-width: 160px;
  height: auto;
  margin: 0 auto 24px;
}

#noscript-overlay .noscript-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

#noscript-overlay h1 {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 8px;
}

#noscript-overlay p {
  font-size: 15px;
  color: #555;
  margin: 0 0 24px;
  line-height: 1.6;
}

/* Divider between the two language sections */
#noscript-overlay .noscript-divider {
  border: none;
  border-top: 1px solid #e0e0e0;
  margin: 24px 0;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  #noscript-overlay {
    background-color: #121212;
  }

  #noscript-overlay .noscript-box {
    background: #1e1e1e;
  }

  #noscript-overlay h1 {
    color: #f0f0f0;
  }

  #noscript-overlay p {
    color: #aaa;
  }

  #noscript-overlay .noscript-divider {
    border-color: #333;
  }
}