/* SpecialtyP CRM - Admin Dashboard Styles */

/* Navigation */
.nav-link.active {
    background-color: rgba(59, 130, 246, 0.5);
}

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

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

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

.status-qualified {
    @apply bg-purple-100 text-purple-800;
}

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

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

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

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

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

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

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

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

.payment-paid {
    @apply bg-green-100 text-green-800;
}

.payment-failed {
    @apply bg-red-100 text-red-800;
}

/* Fulfillment status */
.fulfillment-unfulfilled {
    @apply bg-gray-100 text-gray-600;
}

.fulfillment-shipped {
    @apply bg-purple-100 text-purple-800;
}

.fulfillment-delivered {
    @apply bg-green-100 text-green-800;
}

/* Table */
.table-row-hover:hover {
    @apply bg-gray-50;
}

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

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

/* Funnel visualization */
.funnel-step {
    position: relative;
}

.funnel-arrow {
    padding: 0 10px;
}

/* Modal animations */
.modal-enter {
    animation: modalEnter 0.2s ease-out;
}

@keyframes modalEnter {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Toast notifications */
.toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 12px 24px;
    border-radius: 8px;
    color: white;
    font-weight: 500;
    z-index: 100;
    animation: slideIn 0.3s ease-out;
}

.toast-success {
    background-color: #10b981;
}

.toast-error {
    background-color: #ef4444;
}

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

/* Responsive adjustments */
@media (max-width: 768px) {
    #sidebar {
        width: 0;
        overflow: hidden;
        transition: width 0.3s ease;
    }

    #sidebar.open {
        width: 256px;
    }

    main {
        margin-left: 0 !important;
    }
}

/* Data table improvements */
table tbody tr {
    transition: background-color 0.15s ease;
}

table tbody tr:hover {
    background-color: #f9fafb;
}

/* Action buttons */
.action-btn {
    @apply p-2 rounded hover:bg-gray-100 transition;
}

.action-btn:hover {
    background-color: #f3f4f6;
}

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

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

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

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

/* Empty state */
.empty-state {
    text-align: center;
    padding: 40px;
    color: #6b7280;
}

.empty-state i {
    font-size: 48px;
    margin-bottom: 16px;
    color: #d1d5db;
}

/* Chart container */
canvas {
    max-height: 300px;
}