@use "variables" as *;

// =============================================================================
// MODERN TABLE STYLES - Notion/TipTap inspired
// =============================================================================

table {
    border-collapse: separate;
    border-spacing: 0;
    margin: $spacing-4 0;
    table-layout: fixed;
    width: 100%;
    border: 1px solid $color-palette-gray-400;
    border-radius: $spacing-1;
    overflow: hidden;
    background: $white;

    // Base cell styling
    td,
    th {
        border: none;
        border-right: 1px solid $color-palette-gray-400;
        border-bottom: 1px solid $color-palette-gray-400;
        box-sizing: border-box;
        padding: $spacing-2 $spacing-4;
        position: relative;
        vertical-align: top;
        background: $white;
        transition: all 0.15s ease;

        // Remove borders from last column and row
        &:last-child {
            border-right: none;
        }

        // Clean content spacing
        > * {
            margin: 0;
        }

        // Better text alignment
        p {
            margin: 0;
            padding: 0;
            line-height: 1.4;
        }
    }

    // Header styling - modern and clean
    th {
        background: $color-palette-gray-200;
        font-weight: 600;
        font-size: $font-size-sm;
        color: $color-palette-gray-700;
        text-align: left;
        border-bottom: 1px solid $color-palette-gray-400;
        position: sticky;
        top: 0;
        z-index: 10;
    }
    // Remove bottom border from last row
    tr:last-child {
        td {
            border-bottom: none;
        }
    }

    // Hover effects for better UX
    tr:hover {
        td {
            background: $color-palette-gray-100;
        }

        th {
            background: $color-palette-gray-300;
        }
    }

    // Focus states
    td:focus,
    th:focus {
        outline: none;
        background: $color-palette-primary-op-10;
        box-shadow: inset 0 0 0 2px $color-palette-primary-300;
    }

    // Selection states - modern blue highlight
    .selectedCell {
        background: $color-palette-primary-op-20 !important;
        position: relative;

        &::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border: 1px solid $color-palette-primary;
            pointer-events: none;
            z-index: 1;
        }
    }

    // Modern resize handle
    .column-resize-handle {
        position: absolute;
        top: 0;
        right: -2px;
        bottom: 0;
        width: 4px;
        background: transparent;
        cursor: col-resize;
        z-index: 20;

        &:hover {
            background: $color-palette-primary-300;
        }
    }

    // Clean resize cursor
    .resize-cursor {
        cursor: col-resize;
    }

    // Modern cell menu indicator
    .dot-cell-arrow {
        position: absolute;
        display: none;
        top: $spacing-2;
        right: $spacing-xxs;
        width: $icon-md-box;
        height: $icon-md-box;
        background: $color-palette-gray-100;
        border: 1px solid $color-palette-gray-500;
        border-radius: $border-radius-sm;
        cursor: pointer;
        z-index: 15;
        transition: all 0.15s ease;

        &::before {
            content: "⋮";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: $font-size-lg;
            color: $color-palette-gray-600;
            line-height: 1;
        }

        &:hover {
            background: $color-palette-gray-200;
            border-color: $color-palette-gray-400;
        }
    }

    // Show menu on cell selection or focus
    .selectedCell,
    td.focus,
    th.focus {
        .dot-cell-arrow {
            display: block;
        }
    }
}
