/* ===== ROCKSTONES SRM - TAILWIND CSS CUSTOM STYLES ===== */
/* Дополнительные стили для Tailwind CSS */

/* ===== CUSTOM ANIMATIONS ===== */
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-in-right {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scale-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-fade-in {
    animation: fade-in 0.6s ease-out;
}

.animate-slide-in-right {
    animation: slide-in-right 0.6s ease-out;
}

.animate-scale-in {
    animation: scale-in 0.4s ease-out;
}

/* ===== CUSTOM COMPONENTS ===== */

/* Карточки с улучшенными эффектами */
.card {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 transition-all duration-200 hover:shadow-md hover:scale-105;
}

.card-header {
    @apply px-6 py-4 border-b border-gray-200 dark:border-gray-700;
}

.card-body {
    @apply px-6 py-4;
}

.card-footer {
    @apply px-6 py-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700;
}

/* Статистические карточки */
.stat-card {
    @apply bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 transition-all duration-200 hover:shadow-lg hover:scale-105;
}

.stat-icon {
    @apply w-12 h-12 rounded-lg flex items-center justify-center text-2xl mb-4;
}

.stat-number {
    @apply text-3xl font-bold text-gray-900 dark:text-white;
}

.stat-label {
    @apply text-sm text-gray-500 dark:text-gray-400 mt-1;
}

/* Кнопки действий */
.action-card {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6 text-center transition-all duration-200 hover:shadow-md hover:scale-105 cursor-pointer;
}

.action-icon {
    @apply text-3xl mb-3;
}

.action-title {
    @apply text-lg font-semibold text-gray-900 dark:text-white mb-2;
}

.action-desc {
    @apply text-sm text-gray-500 dark:text-gray-400;
}

/* Улучшенные кнопки */
.btn {
    @apply inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.btn-primary {
    @apply bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500;
}

.btn-secondary {
    @apply bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500;
}

.btn-success {
    @apply bg-green-600 text-white hover:bg-green-700 focus:ring-green-500;
}

.btn-danger {
    @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
}

.btn-outline {
    @apply border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:ring-primary-500;
}

/* Формы */
.form-group {
    @apply mb-4;
}

.form-label {
    @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2;
}

.form-control {
    @apply block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white;
}

.form-control:focus {
    @apply ring-2 ring-primary-500 border-primary-500;
}

/* Таблицы */
.table {
    @apply min-w-full divide-y divide-gray-200 dark:divide-gray-700;
}

.table thead {
    @apply bg-gray-50 dark:bg-gray-800;
}

.table th {
    @apply px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider;
}

.table td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white;
}

.table tbody tr {
    @apply bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-150;
}

/* Уведомления */
.notification {
    @apply rounded-md p-4 border-l-4;
}

.notification.success {
    @apply bg-green-50 dark:bg-green-900 border-green-400 text-green-700 dark:text-green-200;
}

.notification.error {
    @apply bg-red-50 dark:bg-red-900 border-red-400 text-red-700 dark:text-red-200;
}

.notification.warning {
    @apply bg-yellow-50 dark:bg-yellow-900 border-yellow-400 text-yellow-700 dark:text-yellow-200;
}

.notification.info {
    @apply bg-blue-50 dark:bg-blue-900 border-blue-400 text-blue-700 dark:text-blue-200;
}

/* Статусы */
.status {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.status-success {
    @apply bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200;
}

.status-warning {
    @apply bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200;
}

.status-danger {
    @apply bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200;
}

.status-info {
    @apply bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200;
}

.status-gray {
    @apply bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200;
}

/* Дашборд сетка */
.dashboard-grid {
    @apply grid gap-6 grid-cols-1 lg:grid-cols-2 xl:grid-cols-3;
}

.stats-grid {
    @apply grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4;
}

.actions-grid {
    @apply grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4;
}

/* Операции */
.operation-item {
    @apply flex justify-between items-center p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:shadow-md transition-all duration-200;
}

.operation-info {
    @apply flex-1;
}

.operation-date {
    @apply text-xs text-gray-500 dark:text-gray-400 block mt-1;
}

.operation-amount {
    @apply font-semibold text-green-600 dark:text-green-400;
}

/* Навигация */
.nav-link {
    @apply transition-colors duration-200;
}

.nav-link:hover {
    @apply text-primary-600 dark:text-primary-400;
}

/* Адаптивность */
@media (max-width: 640px) {
    .stats-grid {
        @apply grid-cols-1;
    }
    
    .actions-grid {
        @apply grid-cols-1;
    }
    
    .dashboard-grid {
        @apply grid-cols-1;
    }
    
    .operation-item {
        @apply flex-col items-start space-y-2;
    }
}

/* Темная тема улучшения */
.dark .card {
    @apply shadow-lg;
}

.dark .stat-card {
    @apply shadow-lg;
}

.dark .action-card {
    @apply shadow-lg;
}

/* Плавные переходы для всех интерактивных элементов */
* {
    @apply transition-colors duration-200;
}

/* Улучшенный фокус */
.focus-ring {
    @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800;
}

/* Загрузка */
.loading {
    @apply animate-pulse;
}

/* Скрытие скроллбара */
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Градиенты */
.gradient-primary {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
}

.gradient-secondary {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
}

.gradient-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.gradient-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

/* Тени */
.shadow-soft {
    box-shadow: 0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04);
}

.shadow-medium {
    box-shadow: 0 4px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.shadow-strong {
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.15), 0 2px 10px -2px rgba(0, 0, 0, 0.05);
}

/* Курс валют */
.exchange-rate-value {
    transition: all 0.3s ease;
}

.exchange-rate-value.updating {
    animation: pulse 1s ease-in-out;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }
}