/* ===== ROCKSTONES CRM - 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-card rounded-lg shadow-sm border border-line transition-all duration-200 hover:shadow-md hover:scale-105;
}

.card-header {
    @apply px-6 py-4 border-b border-line;
}

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

.card-footer {
    @apply px-6 py-4 border-t border-line bg-page;
}

/* Статистические карточки */
.stat-card {
    @apply bg-card rounded-xl shadow-sm border border-line 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-ink;
}

.stat-label {
    @apply text-sm text-muted mt-1;
}

/* Кнопки действий */
.action-card {
    @apply bg-card rounded-lg shadow-sm border border-line 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-ink mb-2;
}

.action-desc {
    @apply text-sm text-muted;
}

/* Улучшенные кнопки */
.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-brand text-card hover:bg-ink focus:ring-brand;
}

.btn-secondary {
    @apply bg-transparent text-ink border border-line hover:bg-page focus:ring-brand;
}

.btn-success {
    @apply bg-brand text-card hover:bg-ink focus:ring-brand;
}

.btn-danger {
    @apply bg-brand text-card hover:bg-ink focus:ring-brand;
}

.btn-outline {
    @apply border border-line text-ink bg-transparent hover:bg-page focus:ring-brand;
}

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

.form-label {
    @apply block text-sm font-medium text-ink mb-2;
}

.form-control {
    @apply block w-full px-3 py-2 border border-line rounded-md shadow-sm bg-card text-ink placeholder-muted focus:outline-none focus:ring-brand focus:border-brand;
}

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

/* Таблицы */
.table {
    @apply min-w-full divide-y divide-line;
}

.table thead {
    @apply bg-page;
}

.table th {
    @apply px-6 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider;
}

.table td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-ink;
}

.table tbody tr {
    @apply bg-card hover:bg-page transition-colors duration-150;
}

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

.notification.success {
    @apply bg-page border-brand text-ink;
}

.notification.error {
    @apply bg-page border-ink text-ink;
}

.notification.warning {
    @apply bg-page border-muted text-ink;
}

.notification.info {
    @apply bg-page border-line text-ink;
}

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

.status-success {
    @apply bg-line text-ink;
}

.status-warning {
    @apply bg-line text-ink;
}

.status-danger {
    @apply bg-ink text-card;
}

.status-info {
    @apply bg-line text-ink;
}

.status-gray {
    @apply bg-page text-ink;
}

/* Дашборд сетка */
.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-card rounded-lg border border-line hover:shadow-md transition-all duration-200;
}

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

.operation-date {
    @apply text-xs text-muted block mt-1;
}

.operation-amount {
    @apply font-semibold text-ink;
}

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

.nav-link:hover {
    @apply text-brand;
}

/* Адаптивность */
@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;
    }
}

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

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

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

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

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

/* Плашки-акценты: градиентов нет, но каждая несёт свой смысловой цвет,
   иначе успех и ошибка выглядят одинаково. */
.gradient-primary {
    background: var(--accent);
    color: var(--card);
}

.gradient-secondary {
    background: var(--brand);
    color: var(--card);
}

.gradient-success {
    background: var(--success);
    color: var(--card);
}

.gradient-danger {
    background: var(--danger);
    color: var(--card);
}

/* Тени: очень мягкие и холодные, из палитры */
.shadow-soft {
    box-shadow: var(--shadow-sm);
}

.shadow-medium {
    box-shadow: var(--shadow);
}

.shadow-strong {
    box-shadow: var(--shadow-lg);
}

/* Курс валют */
.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);
    }
}