.Dashboard {
    position: absolute;
    inset: 0;

    --areaPadding: 0; /* The padding for large dashboardArea blocks  */
    --sectionPadding: calc(var(--base-gap) * 1); /* The padding for content blocks inside dashboardArea blocks */
    --contentSectionPadding: calc(var(--base-gap) * 2); /* The padding for sections with final content */

    display: flex;

    & .dashboardArea { /* Main big dashboard blocks like sideBar and main */
        box-sizing: border-box;
    }

    & .dashboardSection { /* Content blocks inside dashboardArea blocks, like a menu or a search box */
        box-sizing: border-box;
    }

    & > .dashboardArea.sideBar {
        flex-basis: 250px;
        flex-shrink: 0;
        padding: var(--areaPadding);
        border-right: solid var(--color-base-faintest-2) 1px;

        display: flex;
        flex-direction: column;
        gap: var(--areaPadding);

        & > .dashboardSection.grow {
            flex-basis: 100%;
            &.Menu {
                justify-content: flex-start;
            }
        }
    }

    & .dashboardSection.account {
        padding: var(--sectionPadding);
    }

    & .dashboardSection.mainOptions {
        padding: var(--sectionPadding);
        border-top: solid var(--color-base-faintest-2) 1px;
    }

    & .dashboardArea.main {
        display: flex;
        width: 100%;
        flex-direction: column;
        height: 100%;

        & > .topBar {
            display: flex;
            gap: var(--base-gap);
            justify-content: space-between;
            width: 100%;
            padding: var(--contentSectionPadding);
            min-width: max-content;

            > .search {
                flex-grow: 1;
                max-width: 500px;
            }
        }

        & > .content {
            display: flex;
            align-items: stretch;
            height: 100%;

            overflow-y: auto;

            box-sizing: border-box;

            & > .dashboardSection.body {
                flex-basis: 100%;
                padding: var(--contentSectionPadding);
                padding-top: 0;

                height: max-content;

                display: flex;
                flex-direction: column;
                gap: var(--contentSectionPadding);
            }

            & > .dashboardSection.altBar {
                flex-basis: 350px;
                padding: var(--contentSectionPadding);
                padding-top: 0;

                height: max-content;

                display: flex;
                flex-direction: column;
                gap: var(--contentSectionPadding);
            }

        }
    }
}

.Dashboard > .dashboardArea.main > .content > .body .dashboardHeader {
    padding: 0 var(--sectionPadding);
    display: flex;
    justify-content: space-between;

    > .texts {
        & .title {
            font-size: var(--font-size-huge);
            line-height: 1.15em;
            font-weight: 500;
        }
    }
}

.Dashboard .dashboardSection.userMenu {
    display: flex;
    flex-direction: column;
    gap: var(--base-gap);

    & > .loggedUser {
        padding: calc(var(--base-gap) * .6) var(--base-gap);

        display: grid;
        grid-template-columns: auto min-content;
        grid-template-areas:
            "userName buttons"
            "clientName buttons";

        & > .userName {
            grid-area: userName;
        }

        & > .clientName {
            grid-area: clientName;
            color: var(--fgColorFaint);
            line-height: var(--font-line-height-short);
        }

        & > .Buttons {
            grid-area: buttons;
        }
    }
}