/*
 * 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.
 */

/* Tooltip System */
[data-tooltip]:not([class*="absolute"]):not([class*="fixed"]):not([class*="relative"]) {
  position: relative;
}

[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  z-index: 9999;
}

[data-tooltip]::after {
  content: "";
  position: absolute;
  border: 0.25rem solid transparent;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  z-index: 9999;
}

[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
  opacity: 1;
}

/* Top positioning (default) */
[data-tooltip-position="top"]::before {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-0.5rem);
  margin-bottom: 0.25rem;
}

[data-tooltip-position="top"]::after {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-top-color: rgba(0, 0, 0, 0.9);
}

/* Bottom positioning */
[data-tooltip-position="bottom"]::before {
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(0.5rem);
  margin-top: 0.25rem;
}

[data-tooltip-position="bottom"]::after {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-bottom-color: rgba(0, 0, 0, 0.9);
}

/* Left positioning */
[data-tooltip-position="left"]::before {
  right: 100%;
  top: 50%;
  transform: translateY(-50%) translateX(-0.5rem);
  margin-right: 0.25rem;
}

[data-tooltip-position="left"]::after {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-left-color: rgba(0, 0, 0, 0.9);
}

/* Right positioning */
[data-tooltip-position="right"]::before {
  left: 100%;
  top: 50%;
  transform: translateY(-50%) translateX(0.5rem);
  margin-left: 0.25rem;
}

[data-tooltip-position="right"]::after {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-right-color: rgba(0, 0, 0, 0.9);
}

/* Hide number input spinners */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Torch flame ambient effects for login page */
:root {
  --torch-intensity: 0.7; /* Adjust this value: 0.5 = subtle, 1.0 = normal, 1.5 = intense */
}

@keyframes torch-flicker-left {
  0%, 100% {
    box-shadow:
      -100px 0 250px 100px rgba(255, 140, 0, calc(0.5 * var(--torch-intensity))),
      -100px 0 180px 70px rgba(255, 100, 0, calc(0.4 * var(--torch-intensity))),
      -100px 0 120px 50px rgba(255, 80, 0, calc(0.35 * var(--torch-intensity)));
  }
  25% {
    box-shadow:
      -100px 0 280px 110px rgba(255, 140, 0, calc(0.55 * var(--torch-intensity))),
      -100px 0 200px 80px rgba(255, 100, 0, calc(0.45 * var(--torch-intensity))),
      -100px 0 140px 60px rgba(255, 80, 0, calc(0.4 * var(--torch-intensity)));
  }
  50% {
    box-shadow:
      -100px 0 230px 95px rgba(255, 140, 0, calc(0.48 * var(--torch-intensity))),
      -100px 0 170px 65px rgba(255, 100, 0, calc(0.38 * var(--torch-intensity))),
      -100px 0 110px 45px rgba(255, 80, 0, calc(0.33 * var(--torch-intensity)));
  }
  75% {
    box-shadow:
      -100px 0 270px 105px rgba(255, 140, 0, calc(0.53 * var(--torch-intensity))),
      -100px 0 190px 75px rgba(255, 100, 0, calc(0.43 * var(--torch-intensity))),
      -100px 0 130px 55px rgba(255, 80, 0, calc(0.38 * var(--torch-intensity)));
  }
}

@keyframes torch-flicker-right {
  0%, 100% {
    box-shadow:
      100px 0 250px 100px rgba(255, 140, 0, calc(0.5 * var(--torch-intensity))),
      100px 0 180px 70px rgba(255, 100, 0, calc(0.4 * var(--torch-intensity))),
      100px 0 120px 50px rgba(255, 80, 0, calc(0.35 * var(--torch-intensity)));
  }
  25% {
    box-shadow:
      100px 0 270px 105px rgba(255, 140, 0, calc(0.53 * var(--torch-intensity))),
      100px 0 190px 75px rgba(255, 100, 0, calc(0.43 * var(--torch-intensity))),
      100px 0 130px 55px rgba(255, 80, 0, calc(0.38 * var(--torch-intensity)));
  }
  50% {
    box-shadow:
      100px 0 240px 97px rgba(255, 140, 0, calc(0.51 * var(--torch-intensity))),
      100px 0 175px 68px rgba(255, 100, 0, calc(0.41 * var(--torch-intensity))),
      100px 0 115px 48px rgba(255, 80, 0, calc(0.36 * var(--torch-intensity)));
  }
  75% {
    box-shadow:
      100px 0 230px 93px rgba(255, 140, 0, calc(0.49 * var(--torch-intensity))),
      100px 0 165px 63px rgba(255, 100, 0, calc(0.39 * var(--torch-intensity))),
      100px 0 105px 43px rgba(255, 80, 0, calc(0.34 * var(--torch-intensity)));
  }
}

/* Random wind flicker effect - irregular intensity changes */
@keyframes wind-flicker-left {
  0% { opacity: 0.92; }
  3% { opacity: 0.88; }
  8% { opacity: 0.95; }
  12% { opacity: 0.91; }
  18% { opacity: 0.86; }
  23% { opacity: 0.93; }
  29% { opacity: 0.89; }
  34% { opacity: 0.94; }
  41% { opacity: 0.87; }
  47% { opacity: 0.96; }
  53% { opacity: 0.90; }
  59% { opacity: 0.85; }
  64% { opacity: 0.92; }
  71% { opacity: 0.88; }
  77% { opacity: 0.94; }
  83% { opacity: 0.91; }
  89% { opacity: 0.87; }
  95% { opacity: 0.93; }
  100% { opacity: 0.92; }
}

@keyframes wind-flicker-right {
  0% { opacity: 0.90; }
  5% { opacity: 0.94; }
  11% { opacity: 0.87; }
  16% { opacity: 0.92; }
  22% { opacity: 0.88; }
  28% { opacity: 0.95; }
  35% { opacity: 0.91; }
  42% { opacity: 0.86; }
  48% { opacity: 0.93; }
  55% { opacity: 0.89; }
  61% { opacity: 0.94; }
  68% { opacity: 0.87; }
  74% { opacity: 0.91; }
  81% { opacity: 0.89; }
  87% { opacity: 0.95; }
  93% { opacity: 0.88; }
  100% { opacity: 0.90; }
}

.torch-ambient-left {
  animation: torch-flicker-left 4s ease-in-out infinite;
  pointer-events: none;
}

.torch-ambient-right {
  animation: torch-flicker-right 3.5s ease-in-out infinite;
  pointer-events: none;
}

.torch-ambient-left.torch-wind-flicker {
  animation-name: torch-flicker-left, wind-flicker-left;
  animation-duration: 4s, 2.3s;
  animation-timing-function: ease-in-out, ease-in-out;
  animation-iteration-count: infinite, infinite;
}

.torch-ambient-right.torch-wind-flicker {
  animation-name: torch-flicker-right, wind-flicker-right;
  animation-duration: 3.5s, 2.7s;
  animation-timing-function: ease-in-out, ease-in-out;
  animation-iteration-count: infinite, infinite;
}