/* Custom CSS for RefPack System */

/* Custom Properties */
:root {
    --primary-color: #3B82F6;
    --secondary-color: #1E40AF;
    --success-color: #10B981;
    --warning-color: #F59E0B;
    --danger-color: #EF4444;
    --dark-color: #1F2937;
    --light-color: #F9FAFB;
}

/* Base Styles */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #F3F4F6;
}

/* Custom Button Styles */
.btn-primary {
    @apply bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors;
}

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

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

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

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

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

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

.card-body {
    @apply p-6;
}

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

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

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

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

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

.form-textarea {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
}

/* Alert Styles */
.alert {
    @apply px-4 py-3 rounded-md mb-4;
}

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

.alert-warning {
    @apply bg-yellow-100 border border-yellow-400 text-yellow-700;
}

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

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

/* Table Styles */
.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:hover {
    @apply bg-gray-50;
}

/* Badge Styles */
.badge {
    @apply inline-flex px-2 py-1 text-xs font-semibold rounded-full;
}

.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-gray-100 text-gray-800;
}

/* Navigation Styles */
.nav-link {
    @apply flex items-center px-4 py-2 text-sm font-medium text-gray-600 rounded-md hover:text-gray-900 hover:bg-gray-50;
}

.nav-link.active {
    @apply bg-blue-100 text-blue-900;
}

/* Sidebar Styles */
.sidebar {
    @apply fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-lg transform transition-transform duration-300 ease-in-out;
}

.sidebar-header {
    @apply flex items-center justify-between px-6 py-4 border-b border-gray-200;
}

.sidebar-nav {
    @apply px-4 py-6 space-y-2;
}

/* Dashboard Stats */
.stat-card {
    @apply bg-white rounded-lg shadow p-6;
}

.stat-icon {
    @apply p-2 rounded-lg;
}

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

.stat-label {
    @apply text-sm font-medium text-gray-600;
}

/* Loading Spinner */
.spinner {
    @apply animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600;
}

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

.fade-in {
    animation: fadeIn 0.3s ease-out;
}

/* Responsive Utilities */
@media (max-width: 768px) {
    .sidebar {
        @apply -translate-x-full;
    }
    
    .sidebar.open {
        @apply translate-x-0;
    }
}

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

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

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

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Focus Styles */
.focus-ring:focus {
    @apply outline-none ring-2 ring-blue-500 ring-offset-2;
}

/* Custom Utilities */
.text-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bg-gradient-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.bg-gradient-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.bg-gradient-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.bg-gradient-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

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

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

.modal-content {
    @apply relative bg-white rounded-lg mx-auto my-8 max-w-lg shadow-xl;
}

.modal-header {
    @apply flex items-center justify-between p-6 border-b border-gray-200;
}

.modal-body {
    @apply p-6;
}

.modal-footer {
    @apply flex items-center justify-end p-6 border-t border-gray-200 space-x-3;
}

/* Tooltip */
.tooltip {
    @apply relative inline-block;
}

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

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

/* Dropdown */
.dropdown {
    @apply relative inline-block;
}

.dropdown-content {
    @apply hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-50;
}

.dropdown:hover .dropdown-content {
    @apply block;
}

.dropdown-item {
    @apply block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100;
}

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

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

/* Custom Checkbox */
.custom-checkbox {
    @apply appearance-none h-4 w-4 text-blue-600 border border-gray-300 rounded focus:ring-blue-500;
}

.custom-checkbox:checked {
    @apply bg-blue-600 border-blue-600;
}

/* Custom Radio */
.custom-radio {
    @apply appearance-none h-4 w-4 text-blue-600 border border-gray-300 rounded-full focus:ring-blue-500;
}

.custom-radio:checked {
    @apply bg-blue-600 border-blue-600;
}

/* File Upload */
.file-upload {
    @apply relative;
}

.file-upload input[type="file"] {
    @apply absolute inset-0 w-full h-full opacity-0 cursor-pointer;
}

.file-upload-label {
    @apply flex items-center justify-center w-full h-32 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:border-gray-400;
}

/* Search Box */
.search-box {
    @apply relative;
}

.search-input {
    @apply w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
}

.search-icon {
    @apply absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400;
}

/* Notification Badge */
.notification-badge {
    @apply absolute -top-1 -right-1 h-5 w-5 bg-red-500 text-white text-xs rounded-full flex items-center justify-center;
}

/* Status Indicator */
.status-indicator {
    @apply inline-block w-2 h-2 rounded-full;
}

.status-online {
    @apply bg-green-500;
}

.status-offline {
    @apply bg-gray-400;
}

.status-busy {
    @apply bg-red-500;
}

/* Custom Toggle */
.toggle {
    @apply relative inline-flex h-6 w-11 items-center rounded-full transition-colors;
}

.toggle-checked {
    @apply bg-blue-600;
}

.toggle-unchecked {
    @apply bg-gray-200;
}

.toggle-thumb {
    @apply inline-block h-4 w-4 transform rounded-full bg-white transition-transform;
}

.toggle-checked .toggle-thumb {
    @apply translate-x-6;
}

.toggle-unchecked .toggle-thumb {
    @apply translate-x-1;
}