/**
 * Admin Panel Styles
 * Custom styles for admin interface (complementing Tailwind CDN)
 */

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

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

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

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

/* Admin table enhancements */
.admin-table {
    @apply w-full text-sm text-left;
}

.admin-table th {
    @apply px-6 py-3 bg-gray-50 font-semibold text-gray-700 uppercase tracking-wider;
}

.admin-table td {
    @apply px-6 py-4 whitespace-nowrap;
}

.admin-table tbody tr {
    @apply border-b border-gray-200 hover:bg-gray-50 transition-colors;
}

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

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

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

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

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

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

/* Button styles */
.btn {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors;
}

.btn-primary {
    @apply text-white bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500;
}

.btn-secondary {
    @apply text-gray-700 bg-white hover:bg-gray-50 border-gray-300 focus:ring-indigo-500;
}

.btn-danger {
    @apply text-white bg-red-600 hover:bg-red-700 focus:ring-red-500;
}

.btn-success {
    @apply text-white bg-green-600 hover:bg-green-700 focus:ring-green-500;
}

.btn-sm {
    @apply px-3 py-1.5 text-xs;
}

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

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

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

.card-title {
    @apply text-lg font-semibold text-gray-900;
}

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

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

.stat-label {
    @apply text-sm font-medium text-gray-500 uppercase tracking-wider;
}

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

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

.form-control {
    @apply mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm;
}

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

/* Alert styles */
.alert {
    @apply p-4 rounded-md mb-4;
}

.alert-success {
    @apply bg-green-50 text-green-800 border border-green-200;
}

.alert-danger {
    @apply bg-red-50 text-red-800 border border-red-200;
}

.alert-warning {
    @apply bg-yellow-50 text-yellow-800 border border-yellow-200;
}

.alert-info {
    @apply bg-blue-50 text-blue-800 border border-blue-200;
}

/* Sidebar navigation */
.sidebar-nav {
    @apply space-y-1;
}

.sidebar-nav-item {
    @apply flex items-center px-4 py-2 text-sm font-medium rounded-md transition-colors;
}

.sidebar-nav-item:hover {
    @apply bg-gray-100;
}

.sidebar-nav-item.active {
    @apply bg-indigo-100 text-indigo-700;
}

/* Pagination styles (for KnpPaginator) */
.pagination {
    @apply flex items-center justify-center space-x-1;
}

.pagination a,
.pagination span {
    @apply px-3 py-2 text-sm font-medium rounded-md;
}

.pagination a {
    @apply text-gray-700 bg-white border border-gray-300 hover:bg-gray-50;
}

.pagination .current {
    @apply text-white bg-indigo-600 border-indigo-600;
}

.pagination .disabled {
    @apply text-gray-400 bg-gray-100 border-gray-200 cursor-not-allowed;
}

/* Tab styles */
.nav-tabs {
    @apply flex border-b border-gray-200;
}

.nav-tabs .nav-item {
    @apply -mb-px;
}

.nav-tabs .nav-link {
    @apply block px-6 py-3 text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 border-b-2 border-transparent;
}

.nav-tabs .nav-link.active {
    @apply text-indigo-600 border-indigo-600;
}

/* Timeline styles */
.timeline {
    @apply relative pl-8;
}

.timeline::before {
    content: '';
    @apply absolute left-2 top-0 bottom-0 w-0.5 bg-gray-200;
}

.timeline-item {
    @apply relative mb-6;
}

.timeline-marker {
    @apply absolute left-[-30px] w-4 h-4 rounded-full bg-white border-2 border-indigo-500;
}

.timeline-content {
    @apply bg-white rounded-lg shadow p-4;
}

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

/* Responsive utilities */
@media (max-width: 768px) {
    .admin-table {
        @apply text-xs;
    }

    .admin-table th,
    .admin-table td {
        @apply px-3 py-2;
    }
}