@import '_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';

/* [PRE-RENDER RENDER] */
body {
    font-size: 0.75em;
    margin: 0;
    padding: 0;
    height: 100vh;
    font-family: var(--body-font);
    font-size: var(--type-ramp-base-font-size);
    line-height: var(--type-ramp-base-line-height);
    font-weight: var(--font-weight);
    color: var(--neutral-foreground-rest);
    background: var(--neutral-fill-layer-rest);
}

/* MAIN LAYOUT */
.layout {
    height: 100dvh !important;
}

    .layout > header.header {
        background-color: var(--neutral-layer-2);
        color: var(--neutral-foreground-rest);
    }

    .layout > div.mid-content {
        flex: 1;
        flex-grow: 1;
    }

        .layout > div.mid-content .fluent-appbar {
            background-color: var(--neutral-layer-2);
        }

        .layout > div.mid-content .body-content {
            padding: 0.25em 1em;
            height: calc(100dvh - 52px) !important;
            position: relative;
/*            background-color: red;*/
        }

            .layout > div.mid-content .body-content .main-content {
/*                background-color: red;*/
                max-width: 1200px;
                margin: auto;
            }

    .layout > footer {
        padding: 0.5em 1em;
        background-color: var(--neutral-layer-2);
    }

/* AUTH LAYOUT */


#auth.layout .body-content {
    display: flex;
    align-items: center !important;
    justify-content: center;
}

    #auth.layout .body-content > fluent-card {
        height: max-content;
        width: max-content;
/*        box-shadow: none;*/
    }

#auth.layout > footer {
    background-color: transparent;
    text-align: center;
    align-self: center;
}

/* USER AVATAR */
.user-avatar-popover {
    background-color: var(--neutral-layer-2) !important;
    border-radius: calc(var(--layer-corner-radius) * 1px);
    min-width: 20em;
    box-shadow: var(--elevation-shadow-card-rest) !important;
}

    .user-avatar-popover .fluent-popover-content {
        padding-bottom: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

        .user-avatar-popover .fluent-popover-content div[part="body"],
        .user-avatar-popover .fluent-popover-content div[part="header"] {
            padding: 0 1em !important;
        }

            .user-avatar-popover .fluent-popover-content div[part="footer"] .avatar-menu-btn:last-child {
                border-radius: 0 0 calc(var(--layer-corner-radius) * 1px) calc(var(--layer-corner-radius) * 1px) !important;
            }

.user-avatar-menu {
    display: flex;
    flex-direction: row;
    gap: 1em;
}

.user-avatar-menu > .avatar-pic {
    background-color: red;
    width: 86px;
    height: max-content;
}


.grid-table {
    padding: 1em 0;
}

.grid-table-item {
    background-color: var(--neutral-layer-1) !important;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: calc(var(--layer-corner-radius) * 1px);
}

/* DATA GRID OVERRIDE */
.fluent-data-grid tr:hover > td {
    background-color: var(--neutral-fill-hover);
}