/* Custom styles for Bin Store Brands CRM */

/* Animation for alerts */
.alert {
    animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Loading spinner */
.spinner {
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3b82f6;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Custom button styles */
.btn-primary {
    @apply bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
}

.btn-secondary {
    @apply bg-gray-600 hover:bg-gray-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
}

.btn-success {
    @apply bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
}

.btn-warning {
    @apply bg-yellow-600 hover:bg-yellow-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
}

.btn-danger {
    @apply bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
}

/* Table styles */
.table-container {
    @apply overflow-x-auto shadow ring-1 ring-black ring-opacity-5 md:rounded-lg;
}

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

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

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

.table tr:nth-child(even) {
    @apply bg-gray-50;
}

/* Form styles */
.form-group {
    @apply mb-4;
}

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

.form-input {
    @apply appearance-none block w-full px-3 py-2 border border-gray-300 rounded-lg placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
}

.form-select {
    @apply block w-full px-3 py-2 border border-gray-300 rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
}

.form-checkbox {
    @apply h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded;
}

/* Modal styles */
.modal {
    @apply fixed inset-0 z-50 overflow-y-auto;
}

.modal-overlay {
    @apply fixed inset-0 bg-black bg-opacity-50;
}

.modal-container {
    @apply flex min-h-screen items-center justify-center p-4;
}

.modal-content {
    @apply bg-white rounded-lg shadow-xl max-w-lg w-full p-6;
}

/* Card styles */
.card {
    @apply bg-white overflow-hidden shadow rounded-lg;
}

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

.card-body {
    @apply px-4 py-5 sm:p-6;
}

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

/* 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-gray {
    @apply bg-gray-100 text-gray-800;
}

/* Responsive utilities */
@media (max-width: 640px) {
    .mobile-hide {
        display: none;
    }
    
    .table th,
    .table td {
        @apply px-3 py-2;
    }
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
    .dark-mode {
        @apply bg-gray-900 text-white;
    }
    
    .dark-mode .card {
        @apply bg-gray-800;
    }
    
    .dark-mode .form-input,
    .dark-mode .form-select {
        @apply bg-gray-700 border-gray-600 text-white;
    }
}

/* Barcode scanner styles */
.scanner-container {
    @apply relative w-full max-w-sm mx-auto;
}

.scanner-video {
    @apply w-full rounded-lg;
}

.scanner-overlay {
    @apply absolute inset-0 border-2 border-blue-500 rounded-lg pointer-events-none;
}

.scanner-line {
    @apply absolute left-0 right-0 h-0.5 bg-red-500;
    animation: scanner-sweep 2s linear infinite;
}

@keyframes scanner-sweep {
    0% { top: 0; }
    50% { top: 50%; }
    100% { top: 100%; }
}

/* Chart container */
.chart-container {
    @apply relative h-64 md:h-80;
}

/* Bulk operations toolbar */
.bulk-toolbar {
    @apply fixed bottom-4 left-4 right-4 bg-blue-600 text-white p-4 rounded-lg shadow-lg z-40;
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
}

.bulk-toolbar.active {
    transform: translateY(0);
}

/* Low stock alert banner */
.low-stock-banner {
    @apply bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6;
}

/* Filter panel */
.filter-panel {
    @apply bg-white border border-gray-200 rounded-lg p-4 mb-6;
    transition: all 0.3s ease-in-out;
    max-height: 0;
    overflow: hidden;
}

.filter-panel.active {
    max-height: 500px;
}

/* Status indicators */
.status-in-stock {
    @apply bg-green-100 text-green-800;
}

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

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