/**
 * Responsive Table Component Styles
 *
 * NOTE: This file is DEPRECATED in favor of the centralized styles in static/css/input.css
 * The responsive table component now uses Tailwind @apply with OKLCH theme tokens.
 * This file is kept for backwards compatibility only.
 *
 * New approach:
 * - All responsive table styles are defined in static/css/input.css @layer components
 * - Uses Tailwind utility classes with @apply for consistency
 * - Leverages OKLCH color tokens from theme configuration
 * - Single source of truth for responsive table behavior
 *
 * Migration path:
 * - Ensure all templates use "responsive-table" class on <table> elements
 * - Add column count class: "responsive-table-9" for 9 columns, etc.
 * - Remove any custom CSS blocks in templates that duplicate responsive table styles
 */

/* Hide x-cloak elements (Alpine.js) */
[x-cloak] {
    display: none !important;
}

/* All other responsive table styles are now in static/css/input.css */

/**
 * Column-specific grid positioning
 * These classes are added dynamically based on total column count
 * or can be manually specified in the template
 */

/* 6-column layout (3 left, 3 right, action below) */
.responsive-table.cols-6 tr:not(:has(td[colspan])) {
    grid-template-areas:
        'cell1 cell4'
        'cell2 cell5'
        'cell3 cell6'
        'cell7 cell7';
}

.responsive-table.cols-6 tr > td:nth-child(1) { grid-area: cell1; }
.responsive-table.cols-6 tr > td:nth-child(2) { grid-area: cell2; }
.responsive-table.cols-6 tr > td:nth-child(3) { grid-area: cell3; }
.responsive-table.cols-6 tr > td:nth-child(4) { grid-area: cell4; }
.responsive-table.cols-6 tr > td:nth-child(5) { grid-area: cell5; }
.responsive-table.cols-6 tr > td:nth-child(6) { grid-area: cell6; }
.responsive-table.cols-6 tr > td:nth-child(7) { grid-area: cell7; }

/* 7-column layout (user full-width, then 2x2 grid, action below) - for users table */
.responsive-table.cols-7 tr:not(:has(td[colspan])) {
    grid-template-areas:
        'cell1 cell1'
        'cell2 cell3'
        'cell4 cell5'
        'cell6 cell6'
        'cell7 cell7';
}

.responsive-table.cols-7 tr > td:nth-child(1) { grid-area: cell1; }
.responsive-table.cols-7 tr > td:nth-child(2) { grid-area: cell2; }
.responsive-table.cols-7 tr > td:nth-child(3) { grid-area: cell3; }
.responsive-table.cols-7 tr > td:nth-child(4) { grid-area: cell4; }
.responsive-table.cols-7 tr > td:nth-child(5) { grid-area: cell5; }
.responsive-table.cols-7 tr > td:nth-child(6) { grid-area: cell6; }
.responsive-table.cols-7 tr > td:nth-child(7) { grid-area: cell7; }

/* Hide mobile icon and label for first cell (User) in cols-7 layout */
/* Avatar in the cell content acts as the icon */
.responsive-table.cols-7 tr > td:nth-child(1) .mobile-icon,
.responsive-table.cols-7 tr > td:nth-child(1) .mobile-label {
    display: none !important;
}

/* 8-column layout (4 left, 4 right, action below) */
.responsive-table.cols-8 tr:not(:has(td[colspan])) {
    grid-template-areas:
        'cell1 cell5'
        'cell2 cell6'
        'cell3 cell7'
        'cell4 cell8'
        'cell9 cell9';
}

.responsive-table.cols-8 tr > td:nth-child(1) { grid-area: cell1; }
.responsive-table.cols-8 tr > td:nth-child(2) { grid-area: cell2; }
.responsive-table.cols-8 tr > td:nth-child(3) { grid-area: cell3; }
.responsive-table.cols-8 tr > td:nth-child(4) { grid-area: cell4; }
.responsive-table.cols-8 tr > td:nth-child(5) { grid-area: cell5; }
.responsive-table.cols-8 tr > td:nth-child(6) { grid-area: cell6; }
.responsive-table.cols-8 tr > td:nth-child(7) { grid-area: cell7; }
.responsive-table.cols-8 tr > td:nth-child(8) { grid-area: cell8; }
.responsive-table.cols-8 tr > td:nth-child(9) { grid-area: cell9; }

/* 9-column layout (4 left, 4 right, action below) - 8 data columns + 1 action */
.responsive-table.cols-9 tr:not(:has(td[colspan])) {
    grid-template-areas:
        'cell1 cell5'
        'cell2 cell6'
        'cell3 cell7'
        'cell4 cell8'
        'cell9 cell9';
}

.responsive-table.cols-9 tr > td:nth-child(1) { grid-area: cell1; }
.responsive-table.cols-9 tr > td:nth-child(2) { grid-area: cell2; }
.responsive-table.cols-9 tr > td:nth-child(3) { grid-area: cell3; }
.responsive-table.cols-9 tr > td:nth-child(4) { grid-area: cell4; }
.responsive-table.cols-9 tr > td:nth-child(5) { grid-area: cell5; }
.responsive-table.cols-9 tr > td:nth-child(6) { grid-area: cell6; }
.responsive-table.cols-9 tr > td:nth-child(7) { grid-area: cell7; }
.responsive-table.cols-9 tr > td:nth-child(8) { grid-area: cell8; }
.responsive-table.cols-9 tr > td:nth-child(9) { grid-area: cell9; }