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

 /* Вы можете добавить эти keyframes в ваш main.css или application.css, если они не конфликтуют */
 @keyframes fade-in-down {
   from {
     opacity: 0;
     transform: translateY(-20px);
   }
   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 @keyframes fade-in {
   from {
     opacity: 0;
   }
   to {
     opacity: 1;
   }
 }

 .animate-fade-in-down {
   animation: fade-in-down 0.7s ease-out forwards;
 }

 .animate-fade-in {
  animation: fade-in 0.5s ease-out forwards;
  animation-delay: 0.3s; /* Задержка для плавного появления текста */
  opacity: 0; /* Начальное состояние */
}

/* Исправление для выпадающих списков на мобильных устройствах */
.operator-select-container {
  position: relative;
  isolation: isolate;
}

.mobile-select {
  position: relative !important;
  z-index: 1000;
}

@media (max-width: 768px) {
  .operator-select-container {
    overflow: visible !important;
    z-index: 1000;
  }

  .mobile-select,
  select {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    -webkit-appearance: menulist !important;
    -moz-appearance: menulist !important;
    appearance: menulist !important;
    background-color: white !important;
    z-index: 9999 !important;
    min-height: 44px !important;
    font-size: 16px !important; /* Предотвращает зум на iOS */
    padding: 10px 12px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  /* Обеспечиваем правильное позиционирование dropdown */
  .mobile-select:focus,
  select:focus {
    outline: 2px solid #3b82f6 !important;
    outline-offset: 2px !important;
    border-color: #3b82f6 !important;
  }

  /* Предотвращаем обрезание dropdown'а родительскими контейнерами */
  main, .bg-white, .rounded-lg, .shadow-lg {
    overflow: visible !important;
  }

  /* Специальные стили для iOS Safari */
  @supports (-webkit-overflow-scrolling: touch) {
    .mobile-select {
      -webkit-appearance: menulist !important;
      appearance: menulist !important;
    }
  }
}