/* RYAL-2818: Tooltips (ALICE) Remove once tooltips fixed */
.new-table-wrapper {
    .tooltip-content {
        display: none;
    }
}


.cell-btn-tran-device {
    /* Opposite of .btn-tran-device */

    i,
    svg {
        display: inline;
    }

    span {
        display: none;
    }

    @media screen and (max-width: 768px) {
        min-width: unset;
        max-width: unset;
        max-height: unset;
        min-height: unset;

        i,
        svg {
            /*display: none;*/
        }

        span {
            display: inline;
        }
    }
}

.table-counter {
    display: flex;
    justify-content: space-between;
    min-height: 2rem;
}

/* New Table CSS */
.new-table-wrapper {
    /* Wraps title table row and table rows */
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    .new-table-row {
        /* Default table row styling */
        align-items: center;
        background-color: var(--off-white);
        border-radius: 0.25rem;
        display: flex;
        gap: 0;
        padding: 0.25rem 0.5rem;

        &:hover {
            background-color: var(--lightest-gray);
        }

        &.article-card:has(:not(input[type="checkbox"]:checked)) {
            border-left: transparent 0.25rem solid;
        }

        &.article-card:has(input[type="checkbox"]:checked) {
            background: linear-gradient(90deg,
                    color-mix(in srgb, var(--theme-color), white 90%) 10%,
                    color-mix(in srgb, var(--theme-color), white 93%) 40%,
                    color-mix(in srgb, var(--theme-color), white 96%) 100%);
            border-left:
                color-mix(in srgb, var(--theme-color), white 10%) 0.25rem solid;
        }

        &.table-header-row {
            /* Table Header Row */
            align-items: center;
            background-color: var(--light-gray);
            border-radius: var(--border-radius);
            padding: 0 1.25rem 0 1rem;
            height: 2.5rem;

            .table-cell {
                align-items: center;

                .cell-text {
                    font-size: 0.875rem;
                    font-weight: 600;
                }

                .cell-text-s {
                    font-size: 0.8rem;
                }
            }
        }

        &.table-header-row--full-height {
            height: 4rem;
        }

        /* Mobile Table */

        .cell-device-wrapper-x,
        .cell-device-wrapper-y {
            display: contents
        }

        .table-cell {
            /* Default cell styling */
            align-self: stretch;
            display: flex;
            padding: 0.25rem;
            width: 100%;

            &.cell-email {
                /* This is to allow space for resend email confirmation button */
                max-width: 9rem;
                min-width: 9rem;
            }

            &.cell-checkbox-icon {
                margin-left: -0.5rem;
                margin-right: 0.5rem;
            }

            &>turbo-frame {
                width: 100%;
            }

            h5.cell-device-header {
                display: none;
            }

            .attribute {
                width: 100%;
            }

            .cell-text-main {
                font-weight: 600;
            }

            .cell-text,
            .cell-text-main {
                line-height: 1.5rem;
                height: fit-content;
                width: 100%;
            }

            .cell-text-s {
                font-size: 0.875rem;
                line-height: 1rem;
                width: 100%;
            }

            p.cell-text.no-data,
            p.cell-text-s.no-data {
                color: var(--ink-gray);
            }

            &.cell-stack {
                /* Rows inside a single table cell */
                display: inline-flex;
                flex-direction: column;
                gap: 0;

                &.cell-list {
                    gap: 0.25rem;

                    .cell-list-item {
                        display: flex;
                        justify-content: space-between;
                        gap: 0.25rem;
                        width: 100%;

                        h5 {
                            min-width: 5rem;
                        }

                        &>* {
                            white-space: nowrap;
                            width: fit-content;
                        }

                        &:not(:last-child) {
                            border-bottom: 1px solid var(--light-gray);
                            padding-bottom: 0.5rem;
                        }
                    }
                }
            }

            &.cell-border-right {
                /* Adds a border to the right of the cell */
                border-right: 1px solid var(--light-gray);
                padding-right: calc(0.5rem - 1px);
            }

            &.cell-border-left {
                /* Adds a border to the left of the cell */
                border-left: 1px solid var(--light-gray);
            }

      &.cell-actions {
        margin: auto 0;
        padding: 0;
      }

            &.cell-badges {
                flex-direction: row;
                flex-wrap: wrap;
                gap: 0.5rem;
                justify-content: flex-start;
            }

            &.cell-actions-list {
                flex-direction: column;
                gap: 0.25rem;
                margin: auto 0;
            }
        }

        /* Dynamic Cell Styling */

        .cell-xs {
            max-width: 2rem;
            min-width: 2rem;
        }

        .cell-s {
            max-width: 4rem;
            min-width: 4rem;
        }


        .cell-sm {
            max-width: 6rem;
            min-width: 6rem;
        }

        .cell-m {
            max-width: 7.5rem;
            min-width: 7.5rem;
        }

        .cell-l {
            max-width: 10rem;
            min-width: 10rem;
        }

        .cell-xl {
            max-width: 12.5rem;
            min-width: 12.5rem;
        }

        .cell-xxl {
            max-width: 14rem;
            min-width: 14rem;
        }

        .cell-xxxl {
            max-width: 18.5rem;
            min-width: 18.5rem;
        }

        .cell-auto {
            /* Only one column should be auto */
            flex-grow: 1;
            min-width: 10rem;
        }

        .cell-x-scroll,
        .cell-x-scroll-header {
            display: flex;
            flex-direction: row;
            flex-grow: 1;
            gap: 0.25rem;
            padding: 0;
            overflow-x: scroll;
            overflow-y: hidden;

            &.cell-x-scroll::-webkit-scrollbar-thumb {
                /* Hide scrollbar for table rows except header row */
                /*background-color: transparent;*/
                /*scrollbar-color:transparent transparent;*/

                /*scrollbar-color: var(--thumbBG) var(--scrollbarBG);*/
            }

            &>* {
                flex: 1;
            }
        }

        .cell-left>* {
            text-align: left;
        }

        .cell-center>* {
            text-align: center;
        }

        .cell-right>* {
            text-align: right;
        }

        .cell-justify-center {
            justify-content: center;
        }

        .cell-justify-end {
            justify-content: flex-end;
        }

        .cell-align-center {
            align-items: center;
        }
    }

    .table-rows-wrapper {
        /* Wraps all rows (except table header row) */
        background-color: var(--light-gray);
        border: 1px solid var(--light-gray);
        border-radius: var(--border-radius);
        box-shadow: inset -1px 1px 4px rgba(128, 128, 128, 0.25);
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        max-height: 50vh;
        overflow-y: scroll;
        padding: 0.25rem;
    }

    .table-rows-wrapper--full-height {
        max-height: 100%;
    }

    @media screen and (max-width: 768px) {

        /* var(--screen-md) */
        /*display: flex;*/
        /*flex-direction: column;*/
        /*gap: 0.5rem;*/
        .new-table-row {
            /* Default table row styling */
            /*align-items: center;*/
            /*background-color: var(--off-white);*/
            /*border-radius: 0.25rem;*/
            /*display: flex;*/
            flex-direction: column;
            gap: 0.5rem;
            /*padding: 0.25rem 0.5rem;*/

            &:hover {
                /*background-color: var(--lightest-gray);*/
            }

            &.table-header-row {
                /* Table Header Row */
                display: none;
                /*align-items: center;*/
                /*background-color: var(--light-gray);*/
                /*border-radius: var(--border-radius);*/
                /*padding: 0 1.25rem 0 1rem;*/
                /*height: 2.5rem;*/

                .table-cell {
                    /*align-items: center;*/

                    .cell-text {
                        /*font-size: 0.875rem;*/
                        /*font-weight: 600;*/
                    }
                }
            }

            .cell-device-wrapper-x,
            .cell-device-wrapper-y {
                display: flex;
                width: 100%;
            }

            .cell-device-wrapper-y {
                flex-direction: column;
                padding-left: 1rem;
            }

            .table-cell {
                /* Default cell styling */
                /*align-self: stretch;*/
                /*display: flex;*/
                flex-direction: column;
                /*padding: 0.25rem;*/
                /*width: 100%;*/

                &>turbo-frame {
                    /*width: 100%;*/
                }

                &:has(h5.cell-device-header) {
                    padding-bottom: calc(0.5rem - 1px);
                    border-bottom: 1px solid var(--light-gray);

                    p.cell-text-s {
                        padding-left: 1rem;
                        text-align: left;
                    }
                }

                h5.cell-device-header {
                    display: inline-flex;
                    margin-bottom: 0.5rem;
                    width: 100%;

                    &+.cell-device-wrapper-y {
                        padding-bottom: calc(0.5rem - 1px);
                        border-bottom: 1px solid var(--light-gray);
                    }
                }

                .attribute {
                    /*width: 100%;*/
                }

                .cell-text-main {
                    /*font-weight: 600;*/
                }

                .cell-text,
                .cell-text-main {
                    /*line-height: 1.5rem;*/
                    /*height: fit-content;*/
                    /*width: 100%;*/
                }

                .cell-text-s {
                    /*font-size: 0.875rem;*/
                    /*line-height: 1rem;*/
                    /*width: 100%;*/
                }

                p.cell-text.no-data,
                p.cell-text-s.no-data {
                    /*color: var(--ink-gray);*/
                }

                &.cell-stack {
                    /* Rows inside a single table cell */
                    /*display: inline-flex;*/
                    /*flex-direction: column;*/
                    /*gap: 0;*/

                    &:has(.cell-device-header) {
                        /*flex-direction: row;*/
                    }

                    &.cell-list {
                        /*gap: 0.25rem;*/

                        .cell-list-item {
                            /*display: flex;*/
                            /*justify-content: space-between;*/
                            /*gap: 0.25rem;*/
                            /*width: 100%;*/

                            h5 {
                                /*min-width: 5rem;*/
                            }

                            &>* {
                                /*white-space: nowrap;*/
                                /*width: fit-content;*/
                            }

                            &:not(:last-child) {
                                /*border-bottom: 1px solid var(--light-gray);*/
                                /*padding-bottom: 0.5rem;*/
                            }
                        }
                    }
                }

                &.cell-border-right {
                    /* Adds a border to the right of the cell */
                    border-right: unset;
                    padding-right: 0;
                    /*border-bottom: 1px solid var(--light-gray);*/
                    /*padding-bottom: calc(0.5rem - 1px);*/
                }

                &.cell-actions {
                    /*margin: auto 0;*/
                }

                &.cell-actions-list {
                    flex-direction: row;
                    justify-content: space-around;
                    gap: 1rem;
                    /*margin: auto 0;*/
                }
            }

            /* Dynamic Cell Styling */

            .cell-xs {
                max-width: unset;
                min-width: unset;
            }

            .cell-s {
                max-width: unset;
                min-width: unset;
            }


            .cell-sm {
                max-width: unset;
                min-width: unset;
            }

            .cell-m:not(.cell-device-fit) {
                max-width: unset;
                min-width: unset;
            }

            .cell-l:not(.cell-device-fit) {
                max-width: unset;
                min-width: unset;
            }

            .cell-xl {
                max-width: unset;
                min-width: unset;
            }

            .cell-xxl {
                max-width: unset;
                min-width: unset;
            }

            .cell-auto {
                /* Only one column should be auto */
                /*flex-grow: 1;*/
                /*min-width: 10rem;*/
            }

            .cell-x-scroll,
            .cell-x-scroll-header {
                /*display: flex;*/
                /*flex-direction: row;*/
                /*flex-grow: 1;*/
                gap: 0;
                /*padding: 0;*/
                /*overflow-x: hidden;*/
                /*overflow-y: scroll;*/

                &:has(.permission-field) {
                    /*specific to users table*/
                    flex-direction: row;

                    .table-cell {
                        border-bottom: unset;
                    }
                }

                &.cell-x-scroll::-webkit-scrollbar-thumb {
                    /* Hide scrollbar for table rows except header row */
                    /*background-color: transparent;*/
                }

                &>* {
                    /*flex: 1;*/
                }
            }

            .cell-left>* {
                /*text-align: left;*/
            }

            .cell-center>* {
                /*text-align: center;*/
            }

            .cell-right>* {
                /*text-align: right;*/
            }

            .cell-justify-center {
                /*justify-content: center;*/
            }

            .cell-align-center {
                /*align-items: center;*/
            }
        }

        .table-rows-wrapper {
            /* Wraps all rows (except table header row) */
            /*background-color: var(--light-gray);*/
            /*border: 1px solid var(--light-gray);*/
            /*border-radius: var(--border-radius);*/
            /*box-shadow: inset -1px 1px 4px rgba(128, 128, 128, 0.25);*/
            /*display: flex;*/
            /*flex-direction: column;*/
            /*gap: 0.25rem;*/
            /*max-height: 50vh;*/
            /*overflow-y: scroll;*/
            /*padding: 0.25rem;*/
        }
    }
}

.table-simple {
    .table__row {
        align-items: center;
        display: flex;
        flex-direction: row;
        gap: 0.25rem;
        min-height: 3rem;

        &:not(:last-child) {
            border-bottom: 1px solid var(--light-gray);
        }

        .table__cell {
            align-items: center;
            display: inline-flex;
            flex: 1 1 0px;
            height: 100%;
            min-height: inherit;

            &:not(.table__cell-header__x),
            &:not(.table__cell-header__y) {
                border-left: 1px solid var(--light-gray);
                padding-left: calc(0.5rem - 1px);
            }

            &.table__cell-header__x:first-child {
                /* x-axis */
                margin-left: calc(var(--container-xs) + 0.25rem);
            }

            &.table__cell-header__y {
                /* y-axis */
                min-width: var(--container-xs);
            }
        }

        &:has(.table__cell-header__x) {
            background-color: var(--theme-color);

            .table__cell-header__x>* {
                color: var(--theme-complementary-color);
            }
        }
    }
}