const tableTheme = {
    // Base styles for the table
    // Uses border-separate so sticky cells keep their borders (border-collapse
    // paints borders on the table grid, which sticky cells float above)
    // Light: white background | Dark: neutral-900 background
    baseStyle: "w-full border-separate border-spacing-0 text-base " + "",
    // Variant styles
    // Each variant gets dark mode border colors and alternate row colors
    variants: {
        default: "border-[var(--color-border)] dark:border-[var(--color-neutral-700)] " +
            "[&_td]:px-3 [&_td]:py-2.5 [&_th]:px-3 [&_th]:py-2.5",
        striped: "border-[var(--color-border)] dark:border-[var(--color-neutral-700)] " +
            "[&>tbody>tr:nth-child(odd)]:bg-[var(--color-neutral-50)] dark:[&>tbody>tr:nth-child(odd)]:bg-[var(--color-neutral-800)] " +
            "[&_td]:px-3 [&_td]:py-2.5 [&_th]:px-3 [&_th]:py-2.5",
        bordered: "border-t border-l border-[var(--color-border)] dark:border-[var(--color-neutral-700)] " +
            "[&_td]:border-b [&_td]:border-r [&_th]:border-b [&_th]:border-r " +
            "[&_td]:border-[var(--color-border)] [&_th]:border-[var(--color-border)] " +
            "dark:[&_td]:border-[var(--color-neutral-700)] dark:[&_th]:border-[var(--color-neutral-700)] " +
            "[&_td]:px-3 [&_td]:py-2.5 [&_th]:px-3 [&_th]:py-2.5",
        compact: "border-[var(--color-border)] dark:border-[var(--color-neutral-700)] " +
            "[&_td]:px-3 [&_td]:py-1 [&_th]:px-3 [&_th]:py-1",
    },
    // Header styles
    // Light: primary text, light border | Dark: neutral-200 text, neutral-700 border
    headerStyle: "text-left font-semibold sticky top-0 border-b first:pl-4 last:pr-4 " +
        "text-[var(--color-text-secondary)]/80 text-base border-[var(--color-border)] ",
    // Cell styles — borders on cells (not rows) so sticky columns keep them
    // Light: primary text | Dark: neutral-300 text
    cellStyle: "border-b border-b-[var(--color-border)] first:pl-4 last:pr-4 " +
        "text-[var(--color-text-primary)] ",
    // Row styles — hover and layout only (borders moved to cells)
    // Light: neutral-50 hover | Dark: neutral-800 hover
    rowStyle: "group transition-all duration-300 relative " +
        "hover:bg-[var(--color-neutral-50)] " +
        "dark:hover:bg-[var(--color-background-tertiary)]",
    // Selected row styles — background is applied per-cell (in TableCell) so that
    // sticky/frozen columns repaint correctly. The row only carries the left indicator.
    selectedRowStyle: "shadow-[inset_3px_0_0_0_var(--color-primary)]",
    hoverRowStyle: "cursor-pointer",
    // Frozen column styles — borders are on the cell (via cellStyle) so they
    // travel with the sticky element. Only need vertical separator borders here.
    frozenColumnStyle: "sticky left-0 z-10",
    lastFrozenColumnStyle: "sticky right-0 z-10",
    frozenHeaderStyle: "sticky top-0 z-20 " +
        "shadow-lg shadow-[var(--color-neutral-200)]/50 " +
        "dark:shadow-[var(--color-neutral-900)]/50",
    // Utility controls - Column manager button
    // Light: white bg with light border | Dark: neutral-800 bg with neutral-600 border
    columnManagerButton: "inline-flex items-center gap-2 rounded-[calc(var(--radius-base)*0.75)] px-3 py-2 text-base font-medium " +
        "focus:outline-none focus:ring-2 focus:ring-[var(--color-primary-500)] focus:ring-offset-2 " +
        "dark:focus:ring-offset-[var(--color-neutral-900)] " +
        "bg-white border border-[var(--color-neutral-300)] text-[var(--color-text-primary)] hover:bg-[var(--color-neutral-50)] " +
        "dark:bg-[var(--color-neutral-800)] dark:border-[var(--color-neutral-600)] dark:text-[var(--color-neutral-200)] dark:hover:bg-[var(--color-neutral-700)]",
    columnManagerContainer: "mb-4 flex items-center justify-end gap-2",
};

export { tableTheme };
