/* PigeeBack Custom Styles */

/* Custom CSS Variables */
:root {
    --primary-blue: #2563eb;
    --primary-purple: #7c3aed;
    --secondary-blue: #1d4ed8;
    --secondary-purple: #6d28d9;
    --accent-green: #059669;
    --accent-orange: #ea580c;
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --border-color: #e5e7eb;
}

/* Dark Mode Variables */
[data-theme="dark"] {
    --text-primary: #f9fafb;
    --text-secondary: #d1d5db;
    --bg-primary: #111827;
    --bg-secondary: #1f2937;
    --border-color: #374151;
}

/* Custom Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Animation Classes */
.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

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

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

/* Custom Gradients */
.bg-gradient-primary {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-purple) 100%);
}

.bg-gradient-secondary {
    background: linear-gradient(135deg, var(--secondary-blue) 0%, var(--secondary-purple) 100%);
}

.bg-gradient-accent {
    background: linear-gradient(135deg, var(--accent-green) 0%, var(--accent-orange) 100%);
}

/* Custom Shadows */
.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 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Custom Button Styles */
.btn-primary {
    @apply bg-gradient-to-r from-blue-600 to-purple-600 text-white px-6 py-3 rounded-lg font-semibold transition-all duration-300;
}

.btn-primary:hover {
    @apply from-blue-700 to-purple-700 shadow-lg transform -translate-y-1;
}

.btn-secondary {
    @apply border-2 border-blue-600 text-blue-600 px-6 py-3 rounded-lg font-semibold transition-all duration-300;
}

.btn-secondary:hover {
    @apply bg-blue-600 text-white shadow-lg transform -translate-y-1;
}

.btn-outline {
    @apply border-2 border-gray-300 text-gray-700 px-6 py-3 rounded-lg font-semibold transition-all duration-300;
}

.btn-outline:hover {
    @apply border-blue-600 text-blue-600 bg-blue-50;
}

/* Custom Card Styles */
.card {
    @apply bg-white rounded-xl shadow-soft border border-gray-200 transition-all duration-300;
}

.card:hover {
    @apply shadow-medium transform -translate-y-1;
}

.card-dark {
    @apply bg-gray-800 border-gray-700 text-white;
}

/* Custom Form Styles */
.form-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200;
}

.form-input:focus {
    @apply shadow-soft;
}

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

.form-error {
    @apply text-red-600 text-sm mt-1;
}

/* Custom Table Styles */
.table-container {
    @apply overflow-x-auto shadow-soft rounded-lg;
}

.table {
    @apply min-w-full divide-y divide-gray-200;
}

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

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

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

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

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

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

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

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

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

.badge-info {
    @apply bg-purple-100 text-purple-800;
}

/* Custom Loading Spinner */
.spinner {
    @apply animate-spin rounded-full border-2 border-gray-300 border-t-blue-600;
}

.spinner-sm {
    @apply w-4 h-4;
}

.spinner-md {
    @apply w-8 h-8;
}

.spinner-lg {
    @apply w-12 h-12;
}

.spinner-xl {
    @apply w-16 h-16;
}

/* Custom Sidebar Styles */
.sidebar {
    @apply fixed left-0 top-0 h-full w-64 bg-white shadow-lg transform transition-transform duration-300 z-40;
}

.sidebar-open {
    @apply translate-x-0;
}

.sidebar-closed {
    @apply -translate-x-full;
}

/* Custom Modal Styles */
.modal-overlay {
    @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50;
}

.modal {
    @apply bg-white rounded-xl shadow-strong max-w-md w-full mx-4 max-h-[90vh] overflow-y-auto;
}

.modal-header {
    @apply px-6 py-4 border-b border-gray-200;
}

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

.modal-footer {
    @apply px-6 py-4 border-t border-gray-200 flex justify-end space-x-3;
}

/* Custom Tooltip */
.tooltip {
    @apply relative;
}

.tooltip-text {
    @apply absolute z-10 px-3 py-2 text-sm text-white bg-gray-900 rounded-lg opacity-0 invisible transition-all duration-200;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
}

.tooltip:hover .tooltip-text {
    @apply opacity-100 visible;
}

/* 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;
}

/* Responsive Utilities */
@media (max-width: 640px) {
    .container {
        @apply px-4;
    }
    
    .card {
        @apply rounded-lg;
    }
    
    .btn-primary,
    .btn-secondary,
    .btn-outline {
        @apply px-4 py-2 text-sm;
    }
}

@media (max-width: 768px) {
    .sidebar {
        @apply w-full;
    }
}

/* Print Styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-only {
        display: block !important;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .border {
        border-width: 2px;
    }
    
    .shadow-soft,
    .shadow-medium,
    .shadow-strong {
        box-shadow: 0 0 0 2px currentColor;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}