/* --- Sidebar --- */
aside {
    width: 12.5vw;
    background: #181818;
    padding: 10px 10px;
    position: fixed;
    left: -100vw; /* Hidden by default */
    height: calc(100dvh - 60px);
    transition: left 0.3s ease;
    overflow-y: auto;
    z-index: 300;
}

/* Optional scrollbar styling */
aside::-webkit-scrollbar {
    width: 6px;
}

aside::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 3px;
}

aside.active {
    left: 0; /* Slide over content */
}

aside ul {
    list-style: none;
}

aside ul li {
    padding: 10px;
    border-radius: 4px;
    transition: background 0.2s;
}

aside ul li:hover {
    background: #333;
}

aside ul li a {
    display: flex;              /* make icon + text align nicely */
    align-items: center;        /* vertical centering */
    gap: 15px;                   /* space between icon and text */
    width: 100%;                   /* Ensures full width click area */
    height: 100%;
    color: inherit;                /* Inherit text color */
    text-decoration: none;         /* Remove underline */
    border-radius: 4px;
    transition: background 0.2s;
}

aside ul li a i {
    width: 18px;                /* consistent icon width */
    text-align: center;         /* centers narrow icons */
    font-size: 16px;            /* icon size */
}

aside hr {
    margin-top: 10px;
    margin-bottom: 10px;
    height: 1px;           /* thickness of the line */
    border: none;          /* remove default border */
    background-color: #444; /* color of the line */
}

#sidebar .hidden-text {
  margin: 0; /* optional: remove default p tag margin */
}

#sidebar .hidden-text a {
  display: block;           /* makes the whole area clickable */
  opacity: 0;               /* invisible but still clickable */
  padding: 10px;            /* clickable area size */
  color: inherit;           /* keeps color consistent */
  text-decoration: none;
}

#sidebar .copyright {
  font-size: 12px;
  color: #888;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 0px;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    aside {
        width: 60vw;
    }
    aside {
        height: calc(100dvh - 50px);
    }
}