/* DataTable — responsive column hiding & loading states */

/* Responsive breakpoints — hide columns on smaller screens */
@media (max-width: 639px)  { [data-datatable] .dt-hide-sm { display: none !important; } }
@media (max-width: 767px)  { [data-datatable] .dt-hide-md { display: none !important; } }
@media (max-width: 1023px) { [data-datatable] .dt-hide-lg { display: none !important; } }
@media (max-width: 1279px) { [data-datatable] .dt-hide-xl { display: none !important; } }

/* Sort header active state */
[data-datatable] th[data-dt-sort].sort-asc,
[data-datatable] th[data-dt-sort].sort-desc {
    color: #81bc00;
}

/* Pagination button styles */
[data-datatable] [data-dt-pagination] button {
    min-width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    color: #6b7280;
    background: white;
    border: 1px solid #e5e7eb;
    transition: all 150ms;
}
[data-datatable] [data-dt-pagination] button:hover:not(:disabled) {
    border-color: #81bc00;
    color: #81bc00;
}
[data-datatable] [data-dt-pagination] button.active {
    background: #81bc00;
    color: white;
    border-color: #81bc00;
}
[data-datatable] [data-dt-pagination] button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Filter chip styles */
[data-datatable] .dt-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.65rem;
    font-weight: 500;
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}
[data-datatable] .dt-chip button {
    opacity: 0.6;
    cursor: pointer;
    transition: opacity 150ms;
}
[data-datatable] .dt-chip button:hover {
    opacity: 1;
}

/* Loading skeleton rows */
[data-datatable] .dt-skeleton td {
    position: relative;
    overflow: hidden;
}
[data-datatable] .dt-skeleton td::after {
    content: '';
    position: absolute;
    inset: 0.5rem;
    border-radius: 0.25rem;
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: dt-shimmer 1.5s ease-in-out infinite;
}
@keyframes dt-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Print */
@media print {
    [data-datatable] [data-dt-search],
    [data-datatable] [data-dt-filter],
    [data-datatable] [data-dt-col-btn],
    [data-datatable] [data-dt-reset],
    [data-datatable] [data-dt-pagination],
    [data-datatable] [data-dt-chips] {
        display: none !important;
    }
}