/* Enhanced Table Styling for Better UX */

/* Scrollable table container */
.table-container {
    @apply overflow-x-auto border border-gray-200 rounded-lg shadow-sm;
}

/* Scrollable table with max height */
.table-container-scrollable {
    @apply overflow-x-auto border border-gray-200 rounded-lg shadow-sm;
    @apply max-h-96 overflow-y-auto;
}

/* Sticky table header */
.table-sticky-header thead {
    @apply sticky top-0 z-10;
}

/* Table cell with text truncation */
.table-cell-truncate {
    @apply max-w-xs;
}

.table-cell-truncate .truncate-content {
    @apply line-clamp-2;
}

/* Scroll hint for tables */
.scroll-hint {
    @apply text-xs text-gray-500 text-center py-2 bg-gray-50 border-t flex items-center justify-center;
}

.scroll-hint.horizontal::before {
    content: "↔";
    @apply mr-1;
}

.scroll-hint.vertical::before {
    content: "↕";
    @apply mr-1;
}

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

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

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

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

/* Firefox scrollbar */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

/* Loading animation for tables */
.table-loading {
    @apply animate-pulse;
}

.table-loading td {
    @apply bg-gray-200 text-transparent;
}

/* Responsive table utilities */
@media (max-width: 640px) {
    .table-container {
        @apply -mx-4 rounded-none border-l-0 border-r-0;
    }
    
    .table-mobile-stack {
        @apply block;
    }
    
    .table-mobile-stack thead {
        @apply sr-only;
    }
    
    .table-mobile-stack tr {
        @apply block border-b-2 border-gray-200 mb-2 pb-2;
    }
    
    .table-mobile-stack td {
        @apply block text-right py-1 px-2;
    }
    
    .table-mobile-stack td::before {
        content: attr(data-label) ": ";
        @apply float-left font-medium text-gray-600;
    }
}

/* Empty state styling */
.table-empty-state {
    @apply text-center py-10 text-gray-500;
}

.table-empty-state .icon {
    @apply text-4xl mb-3 text-gray-300;
}

.table-empty-state .message {
    @apply text-lg font-medium mb-2;
}

.table-empty-state .description {
    @apply text-sm;
}

.table-empty-state .action {
    @apply mt-4 inline-block text-blue-600 hover:underline;
}