/* PES Manager — Tailwind + кастомные стили */
@import "tailwindcss";

/* Анимации (animate-in и т.д.) */
@layer utilities {
  .animate-in {
    animation-duration: 0.3s;
    animation-fill-mode: both;
  }
  .fade-in {
    animation-name: fadeIn;
  }
  .slide-in-from-bottom-2 {
    animation-name: slideInFromBottom2;
  }
  .slide-in-from-bottom-4 {
    animation-name: slideInFromBottom4;
  }
  .slide-in-from-top-4 {
    animation-name: slideInFromTop4;
  }
  .zoom-in-95 {
    animation-name: zoomIn95;
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInFromBottom2 {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInFromBottom4 {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInFromTop4 {
  from { opacity: 0; transform: translateY(-1rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes zoomIn95 {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* Нативные <select> — тёмная тема, кастомная стрелка, без системного стиля */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px 8px;
  padding-right: 2rem !important;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
select:hover {
  border-color: rgb(71 85 105); /* slate-600 */
}
select:focus {
  outline: none;
  border-color: rgb(37 99 235); /* blue-600 */
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
}
select::-ms-expand { display: none; }

/* Опции выпадающего списка — тёмный фон, светлый текст (работает в Chrome/Edge/Firefox) */
select option {
  background-color: rgb(2 6 23); /* slate-950 */
  color: rgb(226 232 240); /* slate-200 */
  font-weight: 700;
  padding: 8px 12px;
}
select option:checked,
select option:hover,
select option:focus {
  background: linear-gradient(rgb(37 99 235), rgb(37 99 235)); /* blue-600 */
  color: #fff;
}
select option:disabled {
  color: rgb(100 116 139); /* slate-500 */
}