/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Smooth Turbo page transitions */
@media (prefers-reduced-motion: no-preference) {
  :root {
    view-transition-name: none;
  }
}

/* Prevent flash of white during page transitions */
html {
  background-color: #0f172a;
  overflow-x: hidden;
}

/* Prevent horizontal scrolling and wobble on mobile */
body {
  overflow-x: hidden;
  width: 100%;
  position: relative;
}

/* Smooth fade transition for Turbo navigation */
.turbo-progress-bar {
  background-color: #6366f1;
  height: 3px;
}

/* Prevent layout shift during transitions */
main {
  min-height: 50vh;
  overflow-x: hidden;
}

/* Ensure all containers don't overflow */
.container,
.max-w-6xl,
.max-w-5xl,
.max-w-4xl,
.max-w-3xl,
.max-w-2xl,
.max-w-xl {
  max-width: 100%;
  overflow-x: hidden;
}

/* Fix table overflow on mobile */
@media (max-width: 768px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Prevent text from causing overflow */
  * {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Ensure images don't overflow */
  img {
    max-width: 100%;
    height: auto;
  }
}

.flashcard-scene {
  perspective: 1200px;
}

.flashcard {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s ease, height 0.3s ease;
}

.flashcard-face {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  backface-visibility: hidden;
  background-color: #0f172a;
  border-radius: 0.75rem;
  padding: 1.25rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

.flashcard-back {
  transform: rotateY(180deg);
}

.flashcard.is-flipped {
  transform: rotateY(180deg);
}