:root {
    color-scheme: dark;
}

body {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.nav-link {
    border-radius: .5rem;
    padding: .55rem .75rem;
    color: #94a3b8;
    transition: color .15s ease, background-color .15s ease;
}

.nav-link:hover,
.nav-link.active {
    color: #a7f3d0;
    background: rgba(16, 185, 129, .14);
}

.app-grid {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 280px;
    min-height: 720px;
}

.notes-list {
    max-height: 780px;
    overflow-y: auto;
}

.graph-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
}

.legend-dot {
    display: inline-block;
    width: .55rem;
    height: .55rem;
    margin-right: .3rem;
    border-radius: 999px;
}

textarea,
input,
select {
    color-scheme: dark;
}

@media (max-width: 1024px) {
    .app-grid {
        grid-template-columns: 210px minmax(0, 1fr);
    }

    .app-grid > aside:last-child {
        grid-column: 1 / -1;
    }

    .graph-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .app-grid {
        display: block;
    }

    .notes-list {
        max-height: 260px;
    }
}