@import url('activities.css');
@import url('birthday.css');
@import url('content.css');
@import url('footer.css');
@import url('header.css');
@import url('logo.css');
@import url('main.css');
@import url('menu.css');
@import url('nav.css');
@import url('privacy.css');
@import url('sidebar.css');
@import url('tabs.css');
@import url('tabspage.css');
@import url('taskbar.css');
@import url('../shared/user.css');
@import url('../shared/toggle.css');
@import url('visitor.css');

#container {
width: calc(100% - 40px);
max-width: none;
margin: 20px 20px 0;
display: grid;
gap: 20px;
grid-template-areas:
"taskbar header"
"taskbar main"
"taskbar footer";
grid-template-columns: 220px 1fr;
grid-template-rows: auto 1fr auto;
}

/* Mobile */
@media (max-width: 768px) {
	
body { padding: 80px 20px 0 20px; }
	
#container {
width: 100%;
margin: 0 auto;
grid-template-areas:
"header"
"taskbar"
"main"
"sidebar"
"footer";
grid-template-columns: 1fr;
grid-template-rows: auto;
gap: 0; 
}

#container.fullscreen {
grid-template-areas:
"header"
"taskbar"
"main"
"sidebar"
"footer";
grid-template-columns: 1fr;
grid-template-rows: auto;
}

#container.fullscreen .profiles {
--numcolumns: 2;
}	

}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {

body { padding: 80px 20px 0 20px; }
	
#container {
width: 100%;
margin: 0 auto;
grid-template-areas:
"header"
"taskbar"
"main"
"sidebar"
"footer";
grid-template-columns: 1fr;
grid-template-rows: auto;
gap: 0; 
}

}
/* r502: de taakbalk blijft op desktop altijd op de normale breedte staan. */
@media (min-width: 1025px) {
    #container.taskbar-collapsible-page {
        grid-template-columns: 220px minmax(0, 1fr);
    }
}