/* Imports */

@import url("/notetaker/assets/css/components/filepath.css");
@import url("/notetaker/assets/css/components/mainedit.css");
@import url("/notetaker/assets/css/components/notespanel.css");
@import url("/notetaker/assets/css/components/pwa.css");
@import url("/notetaker/assets/css/components/sidebar.css");
@import url("/notetaker/assets/css/components/toolsbar.css");
@import url("/notetaker/assets/css/components/view.css");
@import url("/notetaker/assets/css/components/sharing.css");

body {
    overflow: hidden;
}

.material-symbols-outlined {
    color: var(--color-main-text);
}

/* Global CSS Preset */

.width-p100 {
    width: 100%;
}

.col-span-2 {
    grid-column: span 2;
}

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

    gap: 0.5rem;
}

/* Specific Value */

.application-root {
    position: fixed;
    top: 0;
    left: 0;

    display: grid;
    
    grid-template-columns: 1fr;
    grid-template-rows: 41px calc(100dvh - 41px);
    
    height: 100dvh;
    max-height: -webkit-fill-available;
    
    overflow: hidden;
}

.navigation-bar {
    z-index: 1;
    
    overflow: auto;
}

.navigation-bar div {
    display: flex;
    
    gap: 0;
}

.application-content {
    display: grid;
    
    grid-template-columns: max-content 1fr;
    
    width: 100vw;
}

.main-content {
    display: grid;
    
    grid-template-columns: 1fr;
    grid-template-rows: max-content max-content calc(100dvh - 41px - 41px - 41px);
    
    width: 100%;
}

@media print {
    @page {
        size: A4 portrait;
    }

    :root,
    :root.light,
    :root[theme="light"],
    :root.dark,
    :root[theme="dark"] {
        --background-html: rgb(255, 255, 255) no-repeat center center fixed;
        --background-body: transparent no-repeat center center fixed;

        --color-main-text: rgb(0, 0, 0);
        --color-alt-text: rgb(255, 255, 255);

        --color-red: rgb(255, 59, 48);
        --color-orange: rgb(255, 149, 0);
        --color-yellow: rgb(255, 204, 0);
        --color-green: rgb(52, 199, 89);
        --color-mint: rgb(0, 199, 190);
        --color-teal: rgb(48, 176, 199);
        --color-cyan: rgb(50, 173, 230);
        --color-blue: rgb(0, 122, 255);
        --color-indigo: rgb(88, 86, 214);
        --color-purple: rgb(175, 82, 222);
        --color-pink: rgb(255, 45, 85);
        --color-brown: rgb(162, 132, 94);

        --color-gray-1: rgb(142, 142, 147);
        --color-gray-2: rgb(174, 174, 178);
        --color-gray-3: rgb(199, 199, 204);
        --color-gray-4: rgb(209, 209, 214);
        --color-gray-5: rgb(229, 229, 234);
        --color-gray-6: rgb(242, 242, 247);

        --color-selection: rgba(0, 122, 255, 0.3);

        color-scheme: light;
    }

    .navigation-bar,
    .side-bar {
        display: none;
    }

    .editor-wrapper {
        max-width: none;
    }

    .main-edit {
        padding: 0;

        pointer-events: none;
    }

    .main-content {
        width: 100dvw;
    }

    * {
        height: max-content !important;
        min-height: none !important;
        max-height: none !important;
        overflow: initial !important;
    }
}