@import url('../base.css');
@import url('data-input.css');
@import url('data-input.ui.css');
@import url('tabs-view.css');
@import url('tabs-view.ui.css');
@import url('feedback-components.css');

:root {
    --text-light-mode: #323232;
    --text-dark-mode: #e9e9e9;
    --bg-light-mode: #ffffff;
    --bg-dark-mode: #303030;
    --boxBg-dark: #A8813D; /* caa157 */
    --boxBorder-dark: #BE892D;
    --boxBorder: #DDA74A;
}

[data-ui-mode="dark"] * {

}

[data-ui-mode="light"] * {

}

[data-ui-mode="dark"] {
    background-color: var(--bg-dark-mode);
}

[data-ui-mode="light"] {
    background-color: var(--bg-light-mode);
}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    width: 100vw;
    /*height: 100vh;*/
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body, * {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 14px;
}

.app-frame-layer-0 {
    display: flex;
    flex-direction: column;
    /*justify-items: stretch;*/
    /*height: 100% !important;*/
    height: 630px;
    box-sizing: border-box;
    flex-grow: 1;
}

.app-frame {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    /*    height: 100% !important;*/
    height: 700px;
    box-sizing: border-box;
    flex-grow: 1;
    /*border: 2px dashed darkcyan;*/
    position: relative;
}

.side-menu-area {
    width: 240px;
    /*max-width: 30%;*/
    box-sizing: border-box;
    background-color: #FFEAC6;
    transition: width 0.3s;
    overflow: hidden;
    position: relative;

    &.closed {
        width: 0;
    }

    .heading {
        font-size: 1.2rem;
        font-weight: bold;
        padding: 8px;
        color: #202020;
    }

    .nav {
        margin-top: 24px;

        .menu-item {

            .menu-label {
                display: flex;
                align-items: center;
                gap: 4px;
                padding: 8px 8px 8px 16px;
                cursor: pointer;
                font-weight: 600;

                &:hover {
                    background-color: #f4d198;
                }

                > .menu-icon {
                    width: 20px;
                    height: 20px;
                    contain: content;
                }
            }

            .sub-menu {
                overflow: hidden;
                transition: height 0.2s, opacity 0.4s ease-out;

                > .menu-label {
                    padding: 5px 6px 5px 36px;
                    white-space: nowrap;
                    font-weight: normal;
                    font-size: 0.9em;
                }

                &.expanded {
                    opacity: 1;
                }

                &.collapsed {
                    opacity: 0;
                }
            }
        }
    }
}

.menu-hamburger-box {
    display: flex;
    place-items: center;
    place-content: center;
    width: 48px;
    height: 48px;
    cursor: pointer;
    user-select: none;

    > img {
        width: 16px;
        padding: 4px;
        border-radius: 4px;
        transition: background-color 0.2s;
    }

    &:hover {
        > img {
            border-radius: 4px;
            background-color: #FFEAC699;
        }
    }
}

.pg-frame-dashboard {
    flex-grow: 1;
    /*height: 100%;*/
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    position: relative;
    align-items: stretch;
    /*border: 2px dashed coral;*/
}

.dashboard-header {
    display: flex;
    padding: 8px 8px 8px 0;
    background-color: #F2B957;
    align-items: center;

    .sp {
        flex-grow: 1;
    }

    .end-group {
        display: flex;
        gap: 8px;
        align-items: center;
        margin-right: 48px;

        .nav {
            display: flex;
        }
    }
}

.pg-main {
    flex-grow: 1;
    position: relative;
    /*border: 2px dashed blue;*/
}

.footer {
    background-color: #8E6113;
    display: flex;
    padding: 24px;
}

.dashboard-pg-content {
    padding: 24px;
    box-sizing: border-box;
}

.account-menu-popup.dashboard {
    background-color: #C87F00 !important;

    .menu-item:not(:first-child) {
        border-top: 1px solid #8E6113;
    }
}

.data-input-pg {

}

[data-ui-mode="dark"] {
    /*.pg-landing {*/
    /*    * {*/
    /*        color: var(--text-dark-mode);*/
    /*    }*/
    /*}*/

    * {
        color: var(--text-dark-mode);
    }
}

[data-ui-mode="light"] {
    * {
        color: var(--text-light-mode);
    }
}