@import './basics/vars.css';
@import './basics/base.css';
@import './basics/helpers.css';
@import './basics/layout.css';

@import './cmps/Home.css';
@import './cmps/UserMsg.css';
@import './cmps/AppHeader.css';
@import './cmps/AppsMenu.css';
@import './cmps/SideMenu.css';
@import './cmps/Settings.css';
@import './cmps/About.css';
@import './cmps/UserProfile.css';

@import './apps/note/NoteIndex.css';
@import './apps/note/NoteCreateBar.css';
@import './apps/note/NoteTodos.css';
@import './apps/note/ColorPickerModal.css';
@import './apps/note/NoteList.css';
@import './apps/note/NoteEditor.css';
@import './apps/note/NoteFilter.css';
@import './apps/note/NoteHeader.css';
@import './apps/note/NoteSideMenu.css';

@import './apps/mail/MailIndex.css';
@import './apps/mail/MailList.css';
@import './apps/mail/MailPreview.css';
@import './apps/mail/MailDetails.css';
@import './apps/mail/MailCompose.css';
@import './apps/mail/MailFilter.css';
@import './apps/mail/MailHeader.css';
@import './apps/mail/MailSideMenu.css';
@import './apps/mail/MailAdvancedSearch.css';

@import './basics/mq.css';

.root-cmp {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main-layout {
    display: flex;
    min-height: 100vh;
    transition: margin-left 0.3s;
}

.main-content {
    flex: 1;
    padding: 2em;
    min-height: 100vh;
    border-radius: 0 24px 24px 0;
    background: #fff;
    box-shadow: 0 2px 8px rgba(60, 64, 67, 0.08);
    background: #ffffff;
    transition: margin-left 0.3s;
}

.main-content {
    flex: 1;
    width: 100vw;
    background: #ffffff;
    transition: margin-left 0.3s;
}

@media (max-width: 700px) {
    .main-layout {
        position: relative;
    }

    .side-menu {
        position: absolute;
        left: 0;
        top: 0;
        height: 100vh;
        transform: translateX(-100%);
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s;
        z-index: 10;
    }

    .side-menu.open {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0;
    }

    .side-menu.open~.main-content {
        margin-left: 240px;
    }
}