.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 240px;
    background: #15171b;
    border-right: 1px solid #2a2d33;
    display: flex;
    flex-direction: column;
    z-index: 2000;
}
.sidebar-brand {
    display: block;
    height: 72px;
    padding: 0 16px;
    font-weight: 600;
    border-bottom: 1px solid #2a2d33;
    line-height: 0; /* remove inline-gap around images */
    overflow: hidden; /* clip scaled image */
}
.sidebar-brand .sidebar-brand-text { display: none; }
.sidebar-logo { height: 100%; width: auto; display: block; transform: scale(2.4); transform-origin: left center; }
.sidebar-nav {
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sidebar-link {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    color: #e5e7eb;
    text-decoration: none;
}
.sidebar-link:hover { background: #1d1f23; }
.sidebar-link.active { background: #1f2b45; border-left: 3px solid #6c8cff; padding-left: 9px; }

.sidebar-footer {
    margin-top: auto;
    padding: 12px 8px;
    border-top: 1px solid #2a2d33;
}
.sidebar-actions { display: flex; flex-direction: column; gap: 6px; }

/* Layout shift when sidebar is present */
/* Use margin-left instead of padding-left to avoid horizontal overflow */
body.with-sidebar .main-content { margin-left: 240px; padding-left: 24px; padding-top: 104px; width: calc(100% - 240px); }
body.with-sidebar #footer-placeholder { margin-left: 240px; padding-left: 24px; width: calc(100% - 240px); }
body.with-sidebar .content-container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* Mobile */
@media (max-width: 900px) {
    .sidebar { transform: translateX(-100%); transition: transform .2s ease; }
    .sidebar.open { transform: translateX(0); }
    body.with-sidebar .main-content, body.with-sidebar #footer-placeholder { padding-left: 0; margin-left: 0; width: 100%; }
    .sidebar { width: 80%; max-width: 300px; }
    /* prevent content shift under sidebar */
    .main-content, #footer-placeholder { overflow-x: hidden; }
}