@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@import 'animations.css';
@import 'typography.css';

@import 'components/buttons.css';
@import 'components/cards.css';
@import 'components/tables.css';

body {
    min-height: 100vh;
    overflow: auto;
    scrollbar-gutter: stable both-edges;
}

@media (max-width: 1023px) {
    .grid-container {
        @apply grid-cols-1;
        gap: 2em 0em;
        grid-template-cols: minmax(80px, 1fr);
        grid-template-areas:
            "nav"
            "main";
    }

    .nav {
        @apply grid;
        grid-template-rows: minmax(80px, 1fr);
        grid-template-areas:
            "navh"
            "navc";
        grid-area: nav;
    }

    .navh {
        grid-area: navh;
    }

    .navc {
        @apply flex flex-col;
        grid-area: navc;
    }

    .main {
        @apply grid pb-8;
        grid-template-areas:
            "mainc";
        grid-area: main;
    }

    .mainh {
        @apply hidden;
        grid-area: mainh;
    }

    .mainc {
        grid-area: mainc;
    }
}

@media (min-width: 1024px) {
    .grid-container {
        @apply grid-cols-2;
        gap: 0em 3em;
        grid-template-columns: 300px 1fr;
        grid-template-areas:
            "nav main";
    }

    .nav {
        @apply grid grid-cols-1 grid-flow-row;
        gap: 2em 0em;
        grid-template-rows: 80px 1fr;
        grid-template-areas:
            "navh"
            "navc";
        grid-area: nav;
    }

    .navh {
        grid-area: navh;
    }

    .navc {
        grid-area: navc;
    }

    .main {
        @apply grid grid-cols-1 grid-flow-row pb-8;
        gap: 2em 0em;
        grid-template-rows: 80px 1fr;
        grid-template-areas:
            "mainh"
            "mainc";
        grid-area: main;
    }

    .mainh {
        @apply flex flex-row items-stretch justify-between;
        grid-area: mainh;
    }

    .mainc {
        @apply grid grid-cols-6 gap-8;
        grid-template-rows: min-content 1fr;
        grid-area: mainc;
    }
}