/**
 * Table Layout Styles for Product Display
 * 
 * This file contains styles specific to the table layout.
 * The main wcps-styles.scss is loaded as default for all layouts.
 * 
 * @package Product_Display
 */

// Table layout specific styles will be added here
// Currently empty - styles will be moved from wcps-styles.scss as needed
// Breakpoints
$breakpoint-xs: 480px;
$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;

/* -------------- WCPS layout TABLE wcps-layout-table -------------- */
// Feature Matrix  
.wcps-container {
    background: var(--wcps-container-background, #ffffff3b);
    padding: var(--wcps-container-padding, 25px);
    margin: var(--wcps-container-margin, 0px);

    // Feature Matrix  
    &.wcps-layout-table {
        margin: 30px 0;
        position: relative;

        .wcps-products-container {
            background: var(--wcps-container-background, #ffffff3b);
            padding: var(--wcps-container-padding, 25px);
            margin: var(--wcps-container-margin, 0px);
        }


    }
}


// Navigation arrows styling
.next,
.prev {
    font-size: 18px;
    font-weight: 600;
    min-width: 44px;

    &:hover {
        background: var(--wcps-product-title, #0170B9);
        color: #ffffff;
        border-color: var(--wcps-product-title, #0170B9);
    }
}

// Disabled state
.disabled {
    opacity: 0.4;
    cursor: not-allowed;

    &:hover {
        transform: none;
        box-shadow: none;
        background: #ffffff;
        color: #475569;
        border-color: #e2e8f0;
    }
}

// Dots for truncated pagination
.dots {
    color: #94a3b8;
    cursor: default;
    border: none;
    background: transparent;

    &:hover {
        background: transparent;
        color: #94a3b8;
        transform: none;
        box-shadow: none;
        border: none;
    }
}


// Responsive design
@media (max-width: 768px) {
    .wcps-pagination {
        margin: 20px 0;

        ul {
            gap: 6px;
        }

        a,
        span {
            min-width: 40px;
            height: 40px;
            padding: 0 10px;
            font-size: 14px;
        }
    }
}

@media (max-width: 480px) {
    .wcps-pagination {
        margin: 16px 0;

        ul {
            gap: 4px;
        }

        a,
        span {
            min-width: 36px;
            height: 36px;
            padding: 0 8px;
            font-size: 13px;
        }
    }
}

// Focus states for accessibility
.wcps-pagination {

    a:focus,
    span:focus {
        outline: 2px solid var(--wcps-product-title, #0170B9);
        outline-offset: 2px;
    }
}

// Optional: Add subtle animation to page numbers
.wcps-pagination {

    a,
    span {
        &:not(.current):not(.disabled):hover {
            animation: pulse 0.3s ease;
        }
    }
}

@keyframes pulse {
    0% {
        transform: scale(1) translateY(-1px);
    }

    50% {
        transform: scale(1.05) translateY(-1px);
    }

    100% {
        transform: scale(1) translateY(-1px);
    }
}

// Pagination end 

// Responsive grid columns
.wcps-grid {
    display: grid;
    grid-template-columns: repeat(var(--wcps-columns, 4), minmax(0, 1fr));
    gap: var(--wcps-grid-gap, 20px);
    width: var(--wcps-grid-width, 100%);

    @media (max-width: 992px) {
        grid-template-columns: repeat(min(3, var(--wcps-columns)), 1fr);
    }

    @media (max-width: 768px) {
        grid-template-columns: repeat(min(2, var(--wcps-columns)), 1fr);
    }

    @media (max-width: 480px) {
        grid-template-columns: 1fr;
    }
}

// Mobile optimizations with horizontal scrolling
@media (max-width: 991px) {
    .wcps-table-container {

        // Custom scrollbar for better UX
        &::-webkit-scrollbar {
            height: 6px;
        }

        &::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 3px;
        }

        &::-webkit-scrollbar-thumb {
            background: var(--wcps-product-title);
            border-radius: 3px;
        }

        // Table adjustments for better mobile view
        .wcps-table {
            td.wcps-product-title-col {
                .wcps-product-excerpt {
                    -webkit-line-clamp: 1; // Show only one line on smaller screens
                }
            }

            td.wcps-product-actions-col {
                .wcps-product-actions {
                    a {
                        padding: 6px 10px;

                        .wcps-text {
                            display: none; // Hide text on buttons for smaller screens
                        }

                        .wcps-icon {
                            margin-right: 0;
                        }
                    }
                }
            }
        }
    }
}

// For extremely small screens, allow vertical scrolling with fixed header
@media (max-width: 480px) {
    .wcps-table-controls {
        flex-direction: column;
        align-items: flex-start;

        .dataTables_filter,
        .dataTables_length {
            width: 100%;
            margin-bottom: 10px;

            input,
            select {
                max-width: 100%;
            }
        }
    }
}