﻿#iris-general-info {
    --clr-primary: #afa2e3;
    --clr-secondary: #a2bbe3;
    --clr-accent: #a2c9e3;
    --clr-success: #a2e3de;
    --clr-error: #e3a2a2;
    --clr-dark: #2e274f;
    --clr-text-dark: rgb(16, 21, 41);
    --clr-text-success: #0f3330;
    --clr-text-error: #330f0f;
    --clr-chart-bg: #33454e;
    --clr-table-header: #546872;
    --clr-form-bg: #edeaef;
    --clr-table-bg: #eaedef;

    --shadow-primary: 0 0 0 4px #afa2e360;
    --shadow-secondary: 0 0 0 4px #a2bbe330;
    --shadow-accent: 0 0 0 4px #a2c9e360;
    --shadow-success: 0 0 0 4px #a2e3de60;
    --shadow-error: 0 0 0 4px #e3a2a260;


    --radius: .5rem;
    --padding-btn: 1rem 1.5rem;
    --transition: 0.5s;

    .resetAll {
        background: var(--clr-primary);
        box-shadow: var(--shadow-primary);
        color: var(--clr-dark);
        transform-origin: right;
    }

    .logResets {
        background: var(--clr-secondary);
        box-shadow: var(--shadow-secondary);
        color: var(--clr-dark);
    }

    button {
        outline: none;
        border: none;
        padding: var(--padding-btn);
        display: flex;
        transform: scale(0.9);
        transition: var(--transition);
        opacity: 0.8;
        border-radius: var(--radius);

        &:hover:not(.reseting):not(.done):not(.error) {
            transform: scale(1);
            opacity: 1;
        }

        &.reseting {
            background: var(--clr-accent) !important;
            box-shadow: var(--shadow-accent) !important;
            color: var(--clr-text-dark) !important;
        }

        &.done {
            background: var(--clr-success) !important;
            box-shadow: var(--shadow-success) !important;
            color: var(--clr-text-success) !important;
        }

        &.error {
            background: var(--clr-error) !important;
            box-shadow: var(--shadow-error) !important;
            color: var(--clr-text-error) !important;
        }
    }

    .form-control {
        width: fit-content !important;
        background: var(--clr-form-bg);
        border-radius: var(--radius);
    }

    > .charts-info {
        display: flex;
        gap: 1rem;
        margin-bottom: 1rem;

        > .charts {
            border-radius: var(--radius);
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            background: var(--clr-chart-bg);

            > .chart-wrapper {
                display: flex;
                justify-content: center;
                height: 100%;
                align-items: center;
            }

            > .chart-header {
                display: flex;
                width: 100%;
                align-items: center;
                justify-content: space-between;
                padding: 1rem 5rem;

                > .btn-reset-chart {
                    background: var(--clr-secondary);
                    box-shadow: var(--shadow-secondary);
                    aspect-ratio: 1 / 1;
                    border-radius: 2rem;
                    padding: 1rem;

                    &:hover {
                        background: var(--clr-success);
                        box-shadow: var(--shadow-success);
                    }
                }

                &.loading {
                    opacity: 0;
                }
            }
        }

        > .charts:first-of-type {
            max-width: 32vw;
        }
    }

    > .tables-info {
        > .table-header {
            display: flex;
            align-items: center;
            background: var(--clr-table-header);
            gap: 1rem;
            padding: 1.5rem 1rem;
            border-radius: var(--radius);
            margin-bottom: 1rem;
        }

        > .table-wrapper {
            display: grid;
            background: var(--clr-table-bg);
            padding: 1rem;
            border-radius: var(--radius);
        }

        .resetBtn {
            background: var(--clr-success);
            box-shadow: var(--shadow-success);
            color: var(--clr-text-success);
            margin: 0.5rem;
            padding: 0.5rem 2rem;
        }
    }
}
