/* Ensure the whole layout is flex-based */
.layout {
    display: flex;
    height: 100vh;
    width: 100vw;
}

.sidebar {
    width: 210px;
    height: 100vh;
    background: #333;
    color: white;
    padding: 3px;
    transition: width 0.3s;
    overflow: hidden;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sidebar.collapsed {
    width: 50px;
}

.content {
    flex-grow: 1;
    padding: 5px;
    width: 100%;
    overflow: hidden;
}

#toggleSidebar {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    position: relative;
    margin-bottom: 0px;
    align-self: flex-start;
    padding: 10px;
}

#menuItems {
    list-style: none;
    padding: 0;
    margin-top: 10px;
    width: 100%;

}

#menuItems li {
    padding: 0px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: auto;
}

#menuItems a {
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    width: 100%;
    white-space: nowrap;
    justify-content: flex-start;
    padding-left: 10px;
}

/* The text is 24px high, so when collapsed the icon of 18px decides the height,
and the row shrinks 6px. Add padding to compensate. Couldnt figure how to make it
dynamic */
#menuItems i {
    font-size: 18px;
    width: 24px;
    text-align: left;
    margin-left: 0;
    padding-bottom: 3px;
    padding-top: 3px;
}

/* Hide text when collapsed */
.sidebar.collapsed .menu-text {
    display: none;
}

/* Custom right-click menu styles */
.context-menu {
    position: absolute;
    display: none;
    background: white;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    list-style: none;
    padding: 5px 0;
    white-space: nowrap;
    width: max-content;
}

.context-menu li {
    padding: 8px 16px;
    cursor: pointer;
    position: relative;
}
.context-menu li:hover {
    background: #f0f0f0;
}
.context-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    background: white;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
    width: max-content;

}
.context-menu li:hover > ul {
    display: block;
}
.selected {
    font-weight: bold;
}

canvas {
    width: 100%;
    height: 100%;
    display: block;  /* Removes inline spacing issues */
    image-rendering: smooth; /* Ensures smooth upscaling */
}


/* End of right click menu styles */