@use "../abstracts/variables" as *;
@use "../abstracts/mixins" as *;

.initial-selectLayout-wrapper {
    position: fixed;
    top: 100px;
    left: 40px;
    z-index: 10;

    .regularDropdown-container {
        background: var(--background-color);
    }
}

.compareLayOut-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 2;
    height: 100vh;
    background: var(--background-color);
    backdrop-filter: blur(20px);
    display: flex;
    justify-content: center;
    align-items: center;
    animation: slideInFromRight 0.4s ease-out forwards;
    user-select: none;


    .selectLayout-wrapper {

        position: absolute;
        top: 100px;
        right: 40px;

        .regularDropdown-container {
            background: var(--background-color);
        }
    }

    .chooseLayout-container {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;

        .resizer {
            width: 32px;
            height: 32px;
            @include flex-center;
            padding: 6px;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translate(-50%, -50%);
            background: var(--background-color);
            backdrop-filter: blur(20px);
            box-shadow: $box-shadow-heavy;
            border-radius: 50%;
            cursor: ew-resize;
            transition: transform 0.1s ease;
            z-index: 10;



        }

        .chooseLayout-wrapper {
            background: var(--background-color);
            backdrop-filter: blur(20px);
            padding: 20px;
            border-radius: 8px;
            box-shadow: $box-shadow-medium;
            max-width: 80%;
            text-align: center;
            position: relative;

            .icon {
                width: 100%;
                margin-bottom: 15px;
                text-align: center;

                svg {

                    width: 100%;
                }

            }

            .value {
                margin-bottom: 15px;
                font-size: var(--font-size-small);
                font-weight: 500;
                color: var(--text-primary);
            }

            button {
                display: block;
                margin: 0 auto;
                padding: 8px 16px;
                background: var(--background-color-button);
                color: var(--icon-default-color-active);
                border: none;
                border-radius: 4px;
                cursor: pointer;
                transition: all 0.2s ease;

                &:hover {

                    transform: translateY(-1px);
                }



            }

            .displayLayouts-container {
                max-width: 170px;
                height: auto;
                background: var(--background-color);
                backdrop-filter: blur(20px);
                padding: 6px;
                border-radius: 8px;
                box-shadow: $box-shadow-medium;
                position: absolute;
                right: 0;
                top: 100%;
                transform: translate(50%, -10px);
                display: flex;
                flex-direction: column;
                gap: 6px;

                .header {
                    text-align: left;
                    padding-top: 6px;
                    padding-left: 6px;
                }

                .search-wrapper {
                    padding: 6px 0;

                    .search-container {
                        padding: 0;
                        border-radius: 6px;
                    }
                }

                .layouts-container {
                    .layout {

                        padding: 6px 0;
                    }

                    .layout-wrapper {
                        display: flex;
                        align-items: center;
                        gap: 6px;
                        cursor: pointer;
                        padding: 0 10px;
                        background: none;
                        width: 100%;

                        &:hover {
                            background-color: var(--highlight-text-color) !important;
                            border-radius: 4px;

                            .layout {
                                color: var(--text-button-color) !important;

                            }

                            svg {

                                path {

                                    fill: var(--text-button-color) !important;
                                }
                            }

                            .layout {

                                color: var(--background-color-accent);
                            }
                        }
                    }
                }
            }
        }
    }



}

.compare-result-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: fixed;
    bottom: 40px;
    width: 100%;
    min-height: 200px;
    z-index: 10;
    background: var(--background-color-secondary);
    backdrop-filter: blur(20px);
    padding: 18px 8px;

    .header {
        width: fit-content;
        background-color: var(--background-color-solid);
        color: var(--background-color-accent);
        padding: 6px 10px;
        border-radius: 6px;
    }

    .compare-result-wrapper {
        display: flex;
        gap: 12px;

        .comparisionCard {
            position: relative;
            flex: 1;
            width: auto;
            max-height: 200px;
            background: var(--background-color);
            outline: 1px solid var(--border-color);
            outline-offset: -1px;
            border-radius: 12px;
            padding: 8px 12px;
            overflow: hidden;
        }

        .performanceResult-wrapper {
            min-width: 328px;
            flex: 0;
            position: relative;
            padding-right: 65px;

            .header {

                display: flex;
                gap: 12px;
                align-items: center;
            }

            .metrics-container {
                display: flex;
                gap: 12px;
                height: 100%;

                .metrics-left {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    height: 100%;

                    .metric {
                        .metric-label {
                            display: flex;
                            align-items: center;
                            gap: 6px;

                            span {
                                display: flex;
                            }
                        }

                        .metric-value {
                            padding-top: 6px;
                            font-size: var(--font-size-xlarge);
                            color: var(--background-color-accent);
                            font-weight: 600;
                        }
                    }

                    .label {
                        padding-bottom: 68px;
                    }
                }

                .metrics-right {
                    height: fit-content;
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    grid-template-rows: repeat(2, 1fr);

                    gap: 2px;
                    overflow: visible;

                    margin: auto 0;

                    .metric-wrapper {
                        position: relative;
                        width: 64px;
                        height: 50px;
                        overflow: visible; // allow content like labels to overflow

                        &:nth-child(1) {
                            &::after {

                                content: "";
                                position: absolute;

                                top: -100%;
                                left: 50%;
                                width: 100%; // Required for visible shape
                                height: 40px;
                                background-color: #B7B7C6;

                                // Custom polygon shape (adjust if needed)
                                clip-path: polygon(96% 52%, 96% 54%, 45% 53%, 3% 100%, 0 100%, 42% 52%);


                                z-index: 0; // Behind any inner content
                            }
                        }

                        // Optional: content above the shape
                        >* {
                            position: relative;
                            z-index: 1;
                        }
                    }


                    .metric-label {
                        position: absolute;
                        top: 0px;
                        left: 0%;
                        white-space: nowrap;

                        transform: translate(-50%, -50%);

                        font-size: 10px;
                        z-index: 1;
                    }

                    .metric-wrapper {

                        &:nth-child(1) {
                            .metric-label {
                                top: -57%;
                                left: 220%;
                            }
                        }

                        &:nth-child(2) {
                            .metric-label {
                                white-space: normal;
                                width: 50px;
                                // top: -50%;
                                left: 230%;
                            }
                        }
                    }

                    .metric {
                        width: 100%;
                        height: 100%;
                        position: relative;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        &::after {
                            content: "";
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;

                            background: var(--background-color, wheat);
                            clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
                            filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
                            //                         backdrop-filter: blur(20px);
                            // filter: drop-shadow(30px 10px 4px #4444dd);
                            z-index: 0;
                        }

                        // Content stays above the shape
                        >* {
                            position: relative;
                            z-index: 1;
                        }
                    }


                    .metric-wrapper:nth-child(2) {
                        grid-column-start: 1;
                        grid-row-start: 2;
                    }

                    .metric-wrapper:nth-child(3) {
                        grid-row: span 2 / span 2;
                        grid-column-start: 2;
                        grid-row-start: 1;
                        margin-top: 40%;
                        left: -16px;
                        position: relative;
                    }
                }


            }

            .simulation-tag {

                background: var(--background-color-button);

                color: var(--icon-default-color-active);
                position: absolute;
                bottom: 0;
                right: 0;
                padding: 10px 5px;
                border-radius: 12px 0 0 0;
            }
        }

    }
}




@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}


// body.compare-layout-open {
//     main {
//         padding-right: 10px;

//         transition: padding 0.3s ease;
//     }
// }

.energy-usage {
    position: relative;

    .energy-usage-wrapper {
        h4 {
            font-weight: 600;
        }

        .value {
            padding-top: 25px;
            font-size: var(--font-size-xxxlarge);
            color: var(--background-color-accent);
        }
    }

    .simulation-details {
        position: absolute;
        bottom: 12px;
        right: 12px;

        .simulation-wrapper {
            display: flex;
            align-items: center;
            gap: 6px;

            .icon {
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background-color: var(--background-color-accent);
            }
        }
    }

    .chart {
        height: 100%;
        width: 90%;
        position: absolute;
        top: 10px;
        left: 0;
        margin-bottom: 20px;
        padding: 20px;
    }
}

.throughPutCard-container {

    .layers-wrapper {
        padding: 20px 10px;
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: space-between;

        .layer-wrapper {
            display: flex;
            flex-direction: column;

            &:last-child {
                justify-content: end;
            }
        }
    }

    .chart {
        height: 90%;
        position: absolute;
        bottom: 0;
        left: 0;
    }
}

.cycle-time-container {
    .cycle-main {
        display: flex;
        justify-content: space-between;
        height: 100%;

        .layers-wrapper {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .layers {
                display: flex;
                flex-direction: column;
                gap: 4px;

                .layer-name {
                    color: var(--background-color-accent);
                }

                .layer-time {
                    font-size: var(--font-size-large);
                }

                .layer-profit {
                    color: #14CA44;
                    text-align: end;

                    span {
                        color: #14CA44;
                    }
                }
            }
        }
    }
}

.overallDowntime-container {
    .totalDownTime-wrapper {
        display: flex;
        height: auto;
        width: 100%;
        justify-content: space-between;

        .totalDownTime {
            width: 70%;
            background: var(--background-color-secondary);
            backdrop-filter: blur(20px);
            border-radius: 12px;

            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
            padding: 8px 10px;
            margin: 44px 0;

            .totalDownTime-right {
                display: flex;
                flex-direction: column;
                gap: 6px;
            }

            .totalDownTime-left {
                display: flex;
                align-items: center;
                gap: 6px;

                .value {
                    font-size: var(--font-size-xlarge);
                    color: var(--background-color-button);
                }
            }
        }

        .chart {
            height: auto;
            width: 30%;
            width: 20px;
            position: relative;
            perspective: 800px;
            /* Enables 3D viewing */


            .vertical-chart {
                height: 100%;
                display: flex;
                flex-direction: column-reverse;
                gap: 6px;

                .layout2 {
                    transform-style: preserve-3d;
                    transform: rotateX(15deg);
                    /* 3D tilt */
                    height: 20%;
                    background-color: #F3A60D;
                }

                .layout1 {
                    height: 80%;
                    background-color: #6F42C1;
                }
            }
        }
    }
}

.overallScrapRate {
    .overallScrapRate-wrapper {
        display: flex;

        .overallScrapRate-value {
            width: 50%;
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin: 40px 0;

            .overallScrapRate-key {

                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        .chart {
            width: 50%;
            position: relative;
        }
    }
}