/* ==========================================================================
   NAVIGATION
   ========================================================================== */

.md-top-app-bar, .top-app-bar {
    position: fixed; top: 0; left: 0; right: 0; height: 64px;
    background-color: var(--md-sys-color-surface); z-index: 100;
    display: flex; align-items: center; padding: 0 20px;
}
.top-app-bar h1, .top-app-bar h2, .top-app-bar h3 {
    margin: 0;
}

.header-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 12px;
    transition: background-color 0.2s;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
}
.header-logo:hover {
    background-color: currentcolor;
    color: var(--md-sys-color-on-surface); /* Contextual color will be used */
}
/* Use pseudo element for opacity control to match rail items interaction */
.header-logo {
    position: relative;
    overflow: hidden;
}
.header-logo::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: currentcolor;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
    border-radius: 50%;
}
.header-logo:hover::before {
    opacity: var(--md-sys-state-hover);
}
.header-logo:hover {
    background-color: transparent !important; /* Override previous naive hover */
}
.header-logo img {
    height: 32px;
    width: 32px;
    object-fit: contain;
}
.md-nav-rail, .nav-rail {
    position: fixed; top: 0; left: 0; bottom: 0; width: 80px;
    background-color: var(--md-sys-color-surface); border-right: 1px solid var(--md-sys-color-outline-variant);
    display: flex; flex-direction: column; align-items: center; padding-top: 0px; z-index: 90;
    overflow: hidden; /* Prevent rail itself from scrolling */
}

/* --- NAV SCROLL CONTAINER --- */
.nav-scroll-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    padding-bottom: 8px;
    /* Masking for better visual scrolling behind fixed elements? Optional. */
}
.nav-scroll-container::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}
.md-drawer, .md-drawer-overlay {
    position: fixed; transition: 0.3s;
}
.md-drawer {
    left: 0; top: 0; bottom: 0; width: 300px;
    background: var(--md-sys-color-surface-container);
    transform: translateX(-100%); z-index: 201; padding: 12px;
    border-top-right-radius: 16px; border-bottom-right-radius: 16px;
}
.md-drawer.open { transform: translateX(0); }
.md-drawer-overlay { inset: 0; background: rgba(0,0,0,0.5); z-index: 200; opacity: 0; pointer-events: none; }
.md-drawer-overlay.open { opacity: 1; pointer-events: auto; }

/* --- RAIL ITEMS --- */
.md-rail-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 80px; height: 56px; margin-bottom: 12px;
    color: var(--md-sys-color-on-surface-variant);
    text-decoration: none; transition: 0.2s;
    cursor: pointer; position: relative;
    border-radius: 16px;
}
.md-rail-item .icon-container {
    width: 56px; height: 32px;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    transition: 0.2s; margin-bottom: 4px;
    position: relative; overflow: hidden;
}
.md-rail-item .icon-container::before {
    content: ""; position: absolute; inset: 0; background-color: currentcolor; opacity: 0;
    transition: opacity 200ms; pointer-events: none;
}
.md-rail-item:hover .icon-container::before { opacity: var(--md-sys-state-hover); }

.md-rail-item.active .icon-container { 
    background-color: var(--md-sys-color-secondary-container); 
    color: var(--md-sys-color-on-secondary-container); 
}
.md-rail-item.active { color: var(--md-sys-color-on-surface); background-color: transparent; }

.md-rail-item .label { font-size: 12px; font-weight: 500; text-align: center; }
.md-rail-item .material-symbols-rounded { font-size: 24px; }

/* --- DRAWER ITEMS --- */
.drawer-item { 
    display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 16px 0 24px;
    border-radius: 28px; color: var(--md-sys-color-on-surface-variant); text-decoration: none;
    margin: 0 12px 4px 12px; font-weight: 500;
    position: relative; overflow: hidden;
}
.drawer-item::before {
    content: ""; position: absolute; inset: 0; background-color: currentcolor; opacity: 0;
    transition: opacity 200ms; pointer-events: none;
}
.drawer-item:hover::before { opacity: var(--md-sys-state-hover); }
.drawer-item.active { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }

/* --- MOBILE NAV TOGGLE --- */
.top-app-bar .menu-trigger { 
    display: none; 
    margin-right: 8px; /* Standard spacing from leading icon to next element */
}

@media (max-width: 720px) {
    .top-app-bar { padding: 0 16px; }
    .md-nav-rail { display: none; }
    .top-app-bar .menu-trigger { display: inline-flex !important; }
    .top-app-bar .header-logo { margin-right: 8px; } /* Tighten logo spacing on mobile */
    #mobileThemeToggle { display: inline-flex !important; }
}