/* eBay Sniper SaaS Custom Styles */

/* Tab styles */
.tab-btn {
    @apply py-2 px-1 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300;
}

.tab-btn.active {
    @apply border-blue-500 text-blue-600;
}

.tab-content {
    @apply min-h-96;
}

/* Snipe card styles */
.snipe-card {
    @apply bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow;
}

.snipe-card.won {
    @apply border-green-200 bg-green-50;
}

.snipe-card.lost {
    @apply border-red-200 bg-red-50;
}

.snipe-card.active {
    @apply border-blue-200 bg-blue-50;
}

.snipe-card.pending {
    @apply border-yellow-200 bg-yellow-50;
}

/* Status badges */
.status-badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.status-badge.pending {
    @apply bg-yellow-100 text-yellow-800;
}

.status-badge.active {
    @apply bg-blue-100 text-blue-800;
}

.status-badge.won {
    @apply bg-green-100 text-green-800;
}

.status-badge.lost {
    @apply bg-red-100 text-red-800;
}

.status-badge.cancelled {
    @apply bg-gray-100 text-gray-800;
}

/* Subscription tier badges */
.tier-badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.tier-badge.free {
    @apply bg-gray-100 text-gray-800;
}

.tier-badge.premium {
    @apply bg-yellow-100 text-yellow-800;
}

/* Loading animations */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Toast notifications */
.toast {
    @apply max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden;
}

.toast.success {
    @apply border-l-4 border-green-400;
}

.toast.error {
    @apply border-l-4 border-red-400;
}

.toast.warning {
    @apply border-l-4 border-yellow-400;
}

.toast.info {
    @apply border-l-4 border-blue-400;
}

/* Form styles */
.form-input {
    @apply block w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-blue-500 focus:border-blue-500;
}

.form-input:invalid {
    @apply border-red-300 focus:ring-red-500 focus:border-red-500;
}

/* Button styles */
.btn {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.btn-primary {
    @apply bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-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-sm {
    @apply px-3 py-1.5 text-xs;
}

.btn-lg {
    @apply px-6 py-3 text-base;
}

/* Animation classes */
.fade-in {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-in {
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

/* Countdown timer styles */
.countdown {
    @apply font-mono text-lg font-bold;
}

.countdown.warning {
    @apply text-yellow-600;
}

.countdown.danger {
    @apply text-red-600;
}

/* Progress bar */
.progress-bar {
    @apply w-full bg-gray-200 rounded-full h-2;
}

.progress-fill {
    @apply bg-blue-600 h-2 rounded-full transition-all duration-300;
}

/* Card hover effects */
.card-hover {
    @apply transition-all duration-200 hover:shadow-lg hover:-translate-y-1;
}

/* Text truncation */
.text-truncate {
    @apply truncate;
}

.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    @apply bg-gray-100 rounded-full;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    @apply bg-gray-400 rounded-full;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-500;
}