/* DashSphere - Custom Styles */

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

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

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Dark mode scrollbar */
.dark ::-webkit-scrollbar-track {
    background: #1e293b;
}

.dark ::-webkit-scrollbar-thumb {
    background: #475569;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* Smooth transitions */
* {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Custom focus styles */
.focus-ring:focus {
    outline: 2px solid #4f46e5;
    outline-offset: 2px;
}

/* Chart container styles */
.chart-container {
    position: relative;
    height: 300px;
    width: 100%;
}

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

.btn-secondary {
    @apply bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-900 dark: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;
}

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

/* Status badge styles */
.badge-active {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400;
}

.badge-pending {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400;
}

.badge-banned {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400;
}

/* 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 dark:divide-gray-700;
}

.table-header {
    @apply bg-gray-50 dark:bg-gray-800;
}

.table-header-cell {
    @apply px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider;
}

.table-body {
    @apply bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700;
}

.table-row {
    @apply hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors duration-150;
}

.table-cell {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300;
}

/* Form styles */
.form-input {
    @apply block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white bg-white;
}

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

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

/* Modal styles */
.modal-overlay {
    @apply fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50;
}

.modal-content {
    @apply relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800;
}

/* Toast styles */
.toast {
    @apply fixed top-4 right-4 z-50 p-4 rounded-lg shadow-lg max-w-sm;
}

.toast-success {
    @apply bg-green-500 text-white;
}

.toast-error {
    @apply bg-red-500 text-white;
}

.toast-info {
    @apply bg-blue-500 text-white;
}

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

/* Sidebar animation */
.sidebar-enter {
    @apply transform -translate-x-full;
}

.sidebar-enter-active {
    @apply transform translate-x-0 transition-transform duration-300 ease-out;
}

.sidebar-exit {
    @apply transform translate-x-0;
}

.sidebar-exit-active {
    @apply transform -translate-x-full transition-transform duration-300 ease-in;
}

/* Responsive utilities */
@media (max-width: 640px) {
    .mobile-hidden {
        display: none;
    }
}

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

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

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

/* Chart tooltip styles */
.chart-tooltip {
    @apply bg-gray-900 text-white px-2 py-1 rounded text-sm;
}

/* Custom select styles */
.select-custom {
    @apply block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-white;
}

/* Pagination styles */
.pagination {
    @apply flex items-center justify-between px-4 py-3 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 sm:px-6;
}

.pagination-info {
    @apply text-sm text-gray-700 dark:text-gray-300;
}

.pagination-nav {
    @apply flex-1 flex justify-between sm:hidden;
}

.pagination-button {
    @apply relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700;
}

.pagination-button:disabled {
    @apply opacity-50 cursor-not-allowed;
}

/* Search input styles */
.search-input {
    @apply block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md leading-5 bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:placeholder-gray-400 dark:focus:placeholder-gray-500 focus:ring-1 focus:ring-primary-500 focus:border-primary-500;
}

/* Dropdown styles */
.dropdown {
    @apply absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 z-50;
}

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

/* Breadcrumb styles */
.breadcrumb {
    @apply flex items-center space-x-2 text-sm text-gray-500 dark:text-gray-400;
}

.breadcrumb-item {
    @apply hover:text-gray-700 dark:hover:text-gray-300;
}

.breadcrumb-separator {
    @apply text-gray-400 dark:text-gray-500;
}

/* Stats card gradient backgrounds */
.stats-card-primary {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
}

.stats-card-success {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
}

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

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

/* Custom chart colors for dark mode */
.dark .chart-container canvas {
    filter: invert(0.9) hue-rotate(180deg);
}

/* Responsive sidebar */
@media (max-width: 1024px) {
    .sidebar-mobile {
        @apply fixed inset-y-0 left-0 z-50 w-64 bg-white dark:bg-gray-800 shadow-lg transform transition-transform duration-300;
    }
}

/* Custom focus visible for better accessibility */
.focus-visible:focus {
    outline: 2px solid #4f46e5;
    outline-offset: 2px;
}

/* Custom selection color */
::selection {
    background-color: #4f46e5;
    color: white;
}

/* Custom placeholder animation */
.placeholder-animate {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .5;
    }
}