.entity-dashboard {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-family: "Inter Tight", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;

    * {
        font-family: "Inter Tight", sans-serif;
        font-optical-sizing: auto;
        font-style: normal;
    }

    --Angular: conic-gradient(from 136deg at 50% 50%, #FFF 0deg, #FBFBFB 360deg);

    h1 {
        font-weight: 500;
    }



    .header span.subline {
        font-size: 10px;
        color: rgba(33, 33, 33, 0.50);
    }

    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .entity-dropdowns {
        display: flex;
        gap: 10px;
    }

    .entity-dropdown {
        position: relative;

        p {
            padding-bottom: 0px;
        }

        .btn {
            background: var(--tertiary-color);
            color: var(--tertiary-contrast-color);
            font-size: 14px;
            font-style: normal;
            font-weight: 700;
        }

        &.btn svg {
            margin-right: 0px;
        }

        .entity-dropdown-menu,
        .supplier-dropdown-menu {
            position: absolute;
            top: 100%;
            margin-top: 10px;
            right: 0;
            min-width: 250px;
            border-radius: 5px;
            display: none;
            z-index: 6;
            box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2);
            background: #fff;
        }

        .entity-dropdown-nav {
            padding: 10px;
            display: flex;
            flex-direction: column;
        }

        .dropdown-link {
            font-size: 15px;
            text-decoration: none;
            font-weight: 700;
            display: flex;
            flex-direction: column;
            border-radius: 5px;
            margin-bottom: 5px;

            &:last-child {
                margin-bottom: 0px;
            }

            &:hover {
                background: #EEE;

            }
        }

        .dropdown-li {
            padding: 5px 10px 5px 28px;

            &.home-dashboard {
                padding: 5px 10px 5px 5px;
                display: flex;
                gap: 10px;
                align-items: center;

                svg {
                    width: 13px;
                }

            }
        }
    }

    .dashboard-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: 150px, repeat(2, 1fr);
        grid-column-gap: 10px;
        grid-row-gap: 10px;
        margin-top: 20px;
    }

    @media (max-width: 1200px) {
        .dashboard-grid {
            grid-template-columns: 1fr;
        }

        .small-grid-box {
            grid-column: span 1;
        }

        .normal-grid-box {
            grid-column: span 1;
        }
    }

    .grid-box {
        background: var(--Angular);
        border-radius: 12px;
        padding: 15px;
        box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.05);
        min-height: 150px;
        display: flex;
        flex-direction: column;
        position: relative;
        width: 100%;

        &.maxed-height {
            height: 500px;
        }

        h2 {
            font-weight: 400;
            font-weight: 700;
            font-size: 16px;
        }

        .most-sold-container .btn {
            margin-top: 10px;
            height: 30px;
        }

        .box-content {
            margin-top: auto;
            width: 100%;

            p {
                padding-bottom: 0px;
            }

            &.top-aligned {
                margin-top: 10px;
            }
        }

        .key-value {
            font-size: 25px;
            width: 100%;
            border-bottom: 1px solid #EEE;
            padding-bottom: 0px;
            font-weight: 500;
        }

        .value-description {
            font-size: 12px;
            color: rgba(33, 33, 33, 0.50);
            font-weight: 300;
            margin-top: 5px;
        }

        .dashboard-icon {
            fill: #212121;
            position: absolute;
            top: 15px;
            right: 15px;
        }

        .graph-canvas {
            width: 100%;
            height: 100%;

        }

        .graph-description {
            font-size: 12px;
            color: rgba(33, 33, 33, 0.50);
            font-weight: 300;
            margin-top: 30px;
            border-top: 1px solid #EEE;
            padding-bottom: 0px;
            padding-top: 5px;
        }

        .title-text {
            position: absolute;
            top: 15px;
            right: 15px;
            font-weight: 700;
            font-size: 12px;
            color: rgba(33, 33, 33, 0.50);

            &.most-sold {
                display: flex;
                flex-direction: column;
                gap: 10px;
                align-items: flex-end;
            }
        }

        .most-sold-inputs {
            display: flex;
            gap: 10px;
            margin: 10px 0px;

        }

        .most-sold-reset {
            background: transparent;
            border: none;
            color: var(--primary-color);
            display: none;
            cursor: pointer;
        }

        .product-info {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            text-decoration: none;
            gap: 5px;
            border-bottom: 1px solid #EEE;
            padding: 5px 0px;

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

            .product-image {
                width: 40px;
                height: 40px;
                object-fit: contain;
                object-position: center;
            }

            .title-and-subline {
                display: flex;
                flex-direction: column;
                gap: 2px;
                font-size: 12px;
                font-weight: 500;

                p {
                    padding-bottom: 0px;
                }

                &.search-title {
                    flex-direction: row;
                    gap: 10px;
                }
            }

            .subline {
                font-size: 10px;
                color: rgba(33, 33, 33, 0.50);
            }

            .amount-bought {
                margin-left: auto;
                font-weight: 400;
                font-size: 12px;
                color: rgba(33, 33, 33, 0.50);
            }

        }
    }

    .small-grid-box {
        grid-column: span 2;
        justify-content: space-between;
    }

    .normal-grid-box {
        grid-column: span 3;
        position: relative;
    }

    .modal {
        display: none;

        .modal-close {
            height: 40px;
            min-width: 40px;
            padding: 0;
            font-size: 0;
            background-image: url(../images/close-icon.svg);
            background-size: 15px;
            background-repeat: no-repeat;
            background-position: center;
            border-radius: 100px;
            top: 10px;
            right: 10px;
            opacity: .8;
            background-color: transparent;
            border: 0px;
        }

        .modal-card {
            max-width: 800px;
            height: auto;
            max-height: none;
            flex: none;
        }

        h2 {
            font-size: 24px;
        }


        .modal-actions {
            display: flex;
            gap: 10px;
            margin-top: 20px;

            .btn {
                flex: 1;
            }

            .add-to-branch {
                border: none;
            }
        }

        .suppliers {
            display: flex;
            flex-direction: column;
            gap: 20px;

            h3 {
                font-size: 16px;
                font-weight: 500;
            }
        }

        .supplier-documentation-list {
            display: flex;
            flex-direction: column;
            padding-left: 20px;
        }

    }
}



.entity-dashboard-header {
    .logo-container {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;

        img {
            max-width: 100px;
        }
    }

    .dashboard-back-btn {
        position: absolute;
        left: 25px;
        display: flex;
        align-items: center;
        gap: 15px;

        svg {
            margin-right: 0px;
        }
    }
}

@media (max-width:768px) {
    .entity-dashboard-header.header-page-banner {
        background-color: var(--tertiary-color);

        .logo-container {
            padding: 15px 0px;

            img {
                max-width: 50px;
            }
        }
    }
}