/* Table Container */
.table-container {
    @apply relative w-full bg-white rounded-lg shadow-md overflow-hidden flex flex-col;
    height: calc(100vh - 120px);
    max-height: 900px;
    min-height: 400px;
}

/* Search Bar */
.search-wrapper {
    @apply w-full bg-white p-4 border-b border-gray-200 flex-shrink-0;
}

.search-input {
    @apply w-full px-4 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
    height: 40px;
}

/* Table Styles */
.table-wrapper {
    @apply flex-1 overflow-auto relative;
    height: calc(100% - 72px);
}

.data-table {
    @apply w-full border-collapse;
    min-width: max-content;
}

/* Header */
.data-table thead {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #f8fafc;
}

.data-table th {
    @apply px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider whitespace-nowrap border-b border-gray-200;
    background: #f8fafc;
}

/* Body */
.data-table tbody tr {
    @apply hover:bg-gray-50 transition-colors duration-150;
}

.data-table tbody tr:nth-child(even) {
    @apply bg-gray-50/50;
}

.data-table td {
    @apply px-4 py-2 text-sm text-gray-700 border-b border-gray-200 max-w-[200px] truncate;
    background: inherit;
}

/* Specific Column Styles */
.data-table td.truncate-cell {
    @apply relative group;
}

.data-table td.truncate-cell:hover::after {
    content: attr(data-tooltip);
    @apply absolute left-0 -top-10 bg-gray-800 text-white px-2 py-1 rounded text-xs whitespace-normal z-50 w-max max-w-xs;
}

/* Actions Column */
.data-table th:last-child {
    position: sticky;
    right: 0;
    z-index: 30;
    background: #f8fafc;
}

.data-table td:last-child {
    position: sticky;
    right: 0;
    z-index: 10;
    @apply px-4 text-right;
    background: #ffffff;
}

.data-table tr:nth-child(even) td:last-child {
    background: rgba(249, 250, 251, 0.5);
}

.data-table tr:hover td:last-child {
    background: #f8fafc;
}

.action-button {
    @apply inline-flex items-center justify-center w-8 h-8 mx-1 text-gray-600 rounded-full hover:bg-gray-100 transition-colors duration-150;
}

/* Scrollbar Styles */
.table-wrapper::-webkit-scrollbar {
    @apply w-2 h-2;
}

.table-wrapper::-webkit-scrollbar-track {
    @apply bg-gray-100 rounded-full;
}

.table-wrapper::-webkit-scrollbar-thumb {
    @apply bg-gray-300 rounded-full hover:bg-gray-400;
}

/* Responsive adjustments */
@media (max-height: 768px) {
    .table-container {
        height: calc(100vh - 100px);
        min-height: 300px;
    }
}

@media (min-height: 1080px) {
    .table-container {
        height: calc(100vh - 140px);
    }
}

/* Screen width responsiveness */
@media (min-width: 1920px) {
    .table-container {
        max-width: 1800px;
        margin: 0 auto;
    }
    
    .data-table td {
        @apply py-3;
    }
}

@media (max-width: 1366px) {
    .table-container {
        height: calc(100vh - 100px);
    }
    
    .search-wrapper {
        @apply p-3;
    }
    
    .data-table td,
    .data-table th {
        @apply px-3 py-2;
    }
}