/* Parcel ABC - Amazon Seller Services Custom Styles */

/* Navigation */
.nav-link {
    @apply text-gray-600 hover:text-primary px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200;
}

.mobile-nav-link {
    @apply text-gray-600 hover:text-primary block px-3 py-2 rounded-md text-base font-medium;
}

/* Buttons */
.btn-primary {
    @apply bg-primary hover:bg-gray-800 text-white font-semibold py-3 px-6 rounded-lg transition-all duration-200 transform hover:scale-105 shadow-md hover:shadow-lg;
}

.btn-secondary {
    @apply bg-secondary hover:bg-orange-600 text-white font-semibold py-3 px-6 rounded-lg transition-all duration-200 transform hover:scale-105 shadow-md hover:shadow-lg;
}

.btn-accent {
    @apply bg-accent hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg transition-all duration-200 transform hover:scale-105 shadow-md hover:shadow-lg;
}

.btn-outline {
    @apply border-2 border-white text-white hover:bg-white hover:text-primary font-semibold py-3 px-6 rounded-lg transition-all duration-200;
}

/* Service Cards */
.service-card {
    @apply bg-white p-8 rounded-lg shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2;
}

/* Stat Cards */
.stat-card {
    @apply bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-all duration-200;
}

/* Testimonial Cards */
.testimonial-card {
    @apply bg-white p-8 rounded-lg shadow-md hover:shadow-lg transition-all duration-200;
}

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

.form-input-light {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg text-gray-900 placeholder-gray-500 focus:ring-2 focus:ring-secondary focus:border-transparent outline-none transition-all duration-200;
}

/* Status Badges */
.status-badge {
    @apply px-2 py-1 text-xs font-semibold rounded-full;
}

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

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

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

/* Cost Breakdown Styling */
.cost-display {
    @apply bg-gradient-to-r from-accent to-primary text-white p-6 rounded-lg;
}

.cost-item {
    @apply flex justify-between items-center py-2 border-b border-white border-opacity-20 last:border-b-0;
}

.cost-total {
    @apply text-2xl font-bold pt-4 border-t border-white border-opacity-30;
}

/* Inventory Table Styling */
.inventory-table {
    @apply min-w-full divide-y divide-gray-200;
}

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

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

/* Loading Spinner */
.spinner {
    @apply inline-block w-5 h-5 border-2 border-current border-t-transparent rounded-full animate-spin;
}

/* Success/Error Messages */
.alert {
    @apply p-4 rounded-lg mb-4;
}

.alert-success {
    @apply bg-green-100 border border-green-400 text-green-700;
}

.alert-error {
    @apply bg-red-100 border border-red-400 text-red-700;
}

.alert-info {
    @apply bg-blue-100 border border-blue-400 text-blue-700;
}

/* Hover Effects */
.hover-lift {
    @apply transition-transform duration-200 hover:-translate-y-1;
}

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

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

.progress-success {
    @apply bg-green-500;
}

.progress-warning {
    @apply bg-yellow-500;
}

.progress-danger {
    @apply bg-red-500;
}

/* Amazon-specific Icons */
.amazon-icon {
    @apply text-secondary;
}

.fba-badge {
    @apply bg-secondary text-white px-2 py-1 rounded text-xs font-semibold;
}

/* Dashboard Metrics */
.metric-card {
    @apply bg-white rounded-lg shadow p-6 text-center;
}

.metric-value {
    @apply text-3xl font-bold mb-2;
}

.metric-label {
    @apply text-gray-600 text-sm;
}

.metric-change {
    @apply text-xs mt-1;
}

.metric-up {
    @apply text-green-600;
}

.metric-down {
    @apply text-red-600;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .service-card {
        @apply p-6;
    }
    
    .stat-card {
        @apply p-4;
    }
    
    .testimonial-card {
        @apply p-6;
    }
    
    .hero-title {
        @apply text-3xl;
    }
    
    .section-title {
        @apply text-2xl;
    }
    
    .metric-value {
        @apply text-2xl;
    }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Focus states for accessibility */
.form-input:focus,
.form-input-light:focus,
button:focus {
    outline: 2px solid #146EB4;
    outline-offset: 2px;
}

/* Animation delays for stagger effect */
.delay-100 {
    animation-delay: 0.1s;
}

.delay-200 {
    animation-delay: 0.2s;
}

.delay-300 {
    animation-delay: 0.3s;
}

.delay-400 {
    animation-delay: 0.4s;
}

/* FBA Calculator specific styles */
.calc-section {
    @apply border border-gray-200 rounded-lg p-4 mb-4;
}

.calc-header {
    @apply font-semibold text-gray-800 mb-3 pb-2 border-b border-gray-200;
}

.calc-input-group {
    @apply mb-4;
}

.calc-checkbox-group {
    @apply space-y-2 mt-2;
}

.calc-result {
    @apply bg-gray-50 border border-gray-200 rounded-lg p-4;
}

/* Inventory dashboard specific styles */
.dashboard-card {
    @apply bg-white rounded-lg shadow-sm border border-gray-200 p-6;
}

.dashboard-stat {
    @apply text-center p-4;
}

.dashboard-stat-value {
    @apply text-2xl font-bold text-gray-900;
}

.dashboard-stat-label {
    @apply text-sm text-gray-600 mt-1;
}

/* Table responsive styling */
.table-responsive {
    @apply overflow-x-auto;
}

@media (max-width: 640px) {
    .table-responsive table {
        font-size: 0.875rem;
    }
    
    .table-responsive th,
    .table-responsive td {
        @apply px-3 py-2;
    }
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-break {
        page-break-after: always;
    }
}

/* Additional utility classes */
.text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.bg-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23f1f5f9' fill-opacity='0.4'%3E%3Ccircle cx='7' cy='7' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Amazon brand colors integration */
.amazon-primary {
    color: #232F3E;
}

.amazon-secondary {
    color: #FF9900;
}

.amazon-accent {
    color: #146EB4;
}

.amazon-success {
    color: #067D62;
}

/* Interactive elements */
.interactive-hover {
    @apply transition-all duration-200 hover:bg-gray-50 hover:shadow-md cursor-pointer;
}

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

/* Special FBA-themed elements */
.fba-highlight {
    @apply bg-gradient-to-r from-secondary to-orange-600 text-white;
}

.seller-focus {
    @apply border-l-4 border-secondary pl-4;
}

/* Revenue and metrics styling */
.revenue-display {
    @apply text-4xl font-bold text-success;
}

.growth-indicator {
    @apply inline-flex items-center text-sm;
}

.growth-up {
    @apply text-green-600;
}

.growth-down {
    @apply text-red-600;
}