@tailwind base;
@tailwind components;
@tailwind utilities;

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

.field_with_errors label {
    @apply text-red-500;
}

.field_with_errors input {
    @apply border-red-500 text-red-500;
}

[data-controller=navigation] .list-group-item.active {
    @apply dark:bg-gray-600 bg-gray-100;
}

#error_explanation {
    padding: 1rem; /* Отступы внутри блока */
    margin-bottom: 1rem; /* Отступ снизу */
    border-radius: 0.5rem; /* Закругленные углы */
    background-color: #fef2f2; /* Светлый красный фон */
    color: #b91c1c; /* Тёмный красный текст */
    font-size: 0.875rem; /* Размер текста (sm в TailwindCSS) */
}

#error_explanation h2 {
    font-weight: 500; /* Полужирный шрифт */
    margin-bottom: 0.5rem; /* Отступ снизу */
    color: #991b1b; /* Красный текст для заголовка */
}

#error_explanation ul {
    padding-left: 1.25rem; /* Отступ для списка */
    list-style-type: disc; /* Точки перед элементами списка */
}

#error_explanation ul li {
    margin-bottom: 0.25rem; /* Отступ между пунктами */
}

/* Темная тема */
.dark #error_explanation {
    background-color: #7f1d1d; /* Тёмный красный фон */
    color: #fee2e2; /* Светлый красный текст */
}

.dark #error_explanation h2 {
    color: #fca5a5; /* Светлый красный текст для заголовка */
}

.dark #error_explanation ul li {
    color: #fecaca; /* Светлый текст для пунктов списка */
}

.pagy.nav {
    @apply flex justify-center items-center space-x-2 mt-4 text-sm font-medium text-gray-700 dark:text-gray-400;
}

.pagy.nav a {
    @apply inline-flex items-center justify-center px-3 h-8 text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white;
}

.pagy.nav a.current {
    @apply z-10 text-blue-600 border border-blue-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white;
}

.pagy.nav a[aria-disabled="true"] {
    @apply text-gray-300 bg-gray-100 cursor-default dark:bg-gray-700 dark:text-gray-500;
}

.pagy.nav a.gap {
    @apply cursor-default;
}

.autocomplete ul li.active {
    @apply bg-blue-500 text-white;
}