div:has(.data-table) {
    overflow-x: auto;
    border-radius: var(--radius-medium);
    display: flow-root;
}
.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--layer-surface);
    border-radius: var(--radius-medium);
    overflow: hidden;
    &-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        border-radius: var(--radius-medium);
        margin-block: var(--size-3);
        /* Enhanced shadow indicators for scroll */
        background:
            linear-gradient(
                to right,
                var(--layer-surface) 30%,
                rgba(255, 255, 255, 0)
            ),
            linear-gradient(
                    to left,
                    var(--layer-surface) 30%,
                    rgba(255, 255, 255, 0)
                )
                100% 0;
        background-size:
            50px 100%,
            50px 100%;
        background-repeat: no-repeat;
        background-attachment: local, local;

        /* Prevent container from overflowing on mobile */
        max-width: 100%;
        position: relative;

        /* Optional: Add subtle scrollbar styling */
        &::-webkit-scrollbar {
            height: 6px;
        }

        &::-webkit-scrollbar-track {
            background: var(--layer-surface);
        }

        &::-webkit-scrollbar-thumb {
            background: var(--outline-variant);
            border-radius: var(--radius-full);
        }
    }
    thead {
        min-height: 56px;
        background: var(--layer-surface-container);
        th {
            color: var(--on-surface-variant);
            font-size: var(--font-size-body-medium);
            font-weight: var(--font-weight-5);
            line-height: var(--font-lineheight-2);
            text-align: left;
            padding: var(--size-3) var(--size-4);
            white-space: nowrap;
            position: relative;

            /* Optional sort indicator space */
            &.sortable {
                padding-right: var(--size-6);
            }
            &.txt-align-end {
                text-align: end;
            }
        }
    }
    tbody {
        tr {
            border-bottom: 1px solid var(--outline-variant);
            transition: background-color 0.2s var(--ease-standard);

            &:last-child {
                border-bottom: none;
            }

            /* Row states */
            &:hover {
                background: color-mix(
                    in srgb,
                    var(--on-surface) 8%,
                    transparent
                );
            }

            &:active {
                background: color-mix(
                    in srgb,
                    var(--on-surface) 12%,
                    transparent
                );
            }

            &.selected {
                background: var(--layer-surface-container);
            }
        }
        tr:nth-child(even) {
            background-color: rgba(128, 128, 131, 0.1); /* #808083 with opacity */
        }

        td {
            padding: var(--size-3) var(--size-4);
            color: var(--on-surface);
            font-size: var(--font-size-body-medium);
            line-height: var(--font-lineheight-2);
            height: 52px; /* MD3 standard row height */
        }
    }
    &.density-compact {
        thead {
            height: 48px;
        }

        tbody td {
            height: 44px;
            padding: var(--size-2) var(--size-4);
        }
    }
}

@media (max-width: 39.9375em) {
    .data-table {
        /* Ensure minimum content width */
        min-width: max-content;

        thead th,
        tbody td {
            white-space: nowrap;
            padding-inline: var(--size-2);
        }

        &.density-compact {
            tbody td {
                padding-inline: var(--size-1);
            }
        }
    }
}
.list {
    padding: var(--size-2) 0;
    background: var(--layer-surface);

    &-item {
        display: flex;
        align-items: center;
        position: relative;
        padding: var(--size-2) var(--size-4);
        gap: var(--size-4);
        transition: background-color 0.2s var(--ease-standard);

        /* Height variants based on lines */
        &--one-line {
            min-height: 56px; /* MD3 one-line height */
        }

        &--two-line {
            min-height: 72px; /* MD3 two-line height */
        }

        &--three-line {
            min-height: 88px; /* MD3 three-line height */
            align-items: flex-start;
            padding-block: var(--size-3);
        }

        /* List item sections */
        &__leading {
            flex-shrink: 0;
            width: 24px;
            height: 24px;
            color: var(--on-surface-variant);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        &__content {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: var(--size-1);
        }

        &__headline {
            font-size: var(--font-size-body-large);
            line-height: var(--font-lineheight-2);
            color: var(--on-surface);
            font-weight: var(--font-weight-4);
        }

        &__supporting-text {
            font-size: var(--font-size-body-medium);
            line-height: var(--font-lineheight-2);
            color: var(--on-surface-variant);
        }

        &__trailing {
            flex-shrink: 0;
            color: var(--on-surface-variant);
        }

        /* States */
        &:hover {
            background: color-mix(in srgb, var(--on-surface) 8%, transparent);
            cursor: pointer;
        }

        &:active {
            background: color-mix(in srgb, var(--on-surface) 12%, transparent);
        }

        &:focus-visible {
            outline: none;
            background: color-mix(in srgb, var(--on-surface) 12%, transparent);
        }

        &.selected {
            background: var(--layer-surface-container);
        }
    }

    /* Divider */
    &-divider {
        height: 1px;
        background: var(--outline-variant);
        margin: var(--size-2) var(--size-4);
    }
}