@import "tailwindcss";

/* Mobile viewport height fixes */
:root {
  --background: #ffffff;
  --foreground: #171717;
  /* Set CSS custom properties for mobile viewport */
  --viewport-height: 100vh;
}

@supports (height: 100dvh) {
  :root {
    --viewport-height: 100dvh;
  }
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-inter);
  --font-mono: var(--font-inter);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

html {
  font-family: var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Ensure all elements inherit the Inter font */
* {
  font-family: inherit;
}

/* Ensure mobile Safari handles viewport correctly */
@media screen and (max-width: 768px) {
  html, body {
    height: -webkit-fill-available;
    height: 100dvh;
    height: var(--viewport-height);
  }
  
  /* Prevent bounce scrolling on iOS */
  body {
    overflow: hidden;
    touch-action: none;
  }
}

/* Custom class for SlouchDetector overlay visibility */
.overlays-ready {
  /* This class is used to show overlays when video is ready */
}

/* Green glow animation for ready to calibrate */
@keyframes greenGlow {
  0% { 
    box-shadow: 0 0 20px rgba(40, 167, 69, 0.6);
    transform: scale(1);
  }
  100% { 
    box-shadow: 0 0 30px rgba(40, 167, 69, 0.8);
    transform: scale(1.02);
  }
}

/* Yellow glow animation for calibration in progress */
@keyframes yellowGlow {
  0% { 
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.6);
    transform: scale(1);
  }
  100% { 
    box-shadow: 0 0 30px rgba(255, 193, 7, 0.8);
    transform: scale(1.02);
  }
}

/* Green glow for ready to calibrate */
.ready-to-calibrate {
  background: rgba(40, 167, 69, 0.8) !important;
  border-color: #28a745 !important;
  color: white !important;
  animation: greenGlow 2s ease-in-out infinite alternate;
  box-shadow: 0 0 20px rgba(40, 167, 69, 0.6) !important;
}

/* Yellow glow for calibration in progress */
.calibrating {
  background: rgba(255, 193, 7, 0.8) !important;
  border-color: #ffc107 !important;
  color: #000 !important;
  animation: yellowGlow 1.5s ease-in-out infinite alternate;
  box-shadow: 0 0 20px rgba(255, 193, 7, 0.6) !important;
}

/* Green glow for Track Posture button when ready */
.ready-to-track {
  background: rgba(40, 167, 69, 0.8) !important;
  border-color: #28a745 !important;
  color: white !important;
  animation: greenGlow 2s ease-in-out infinite alternate;
  box-shadow: 0 0 20px rgba(40, 167, 69, 0.6) !important;
}

/* Firefox-specific modal fixes */
@-moz-document url-prefix() {
  .firefox-modal-fix {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    z-index: 2147483647 !important; /* Maximum z-index for Firefox */
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    will-change: transform !important;
    /* Force Firefox to respect positioning */
    contain: layout style paint !important;
  }
}
