/* =====================================================
   SHARED LAYOUT CONTAINER
===================================================== */

/*
    layout.html contains:

    - .topbar
    - .sidebar

    display: contents allows both elements
    to participate directly in the .app grid.
*/

#layout {

    display: contents;

}


/* =====================================================
   TOPBAR
===================================================== */

.topbar {

    grid-column: 1 / -1;

    grid-row: 1;

    min-width: 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 22px;

    background: var(--background);

    border-bottom: 1px solid var(--border);

}


/* =====================================================
   BRAND
===================================================== */

.brand {

    display: flex;

    align-items: center;

    gap: 10px;

}


.brand-icon {

    width: 28px;

    height: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

}


.brand-icon img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: contain;

}


.brand-name {

    color: var(--text);

    font-size: 16px;

    font-weight: 600;

    letter-spacing: 1.5px;

}


/* =====================================================
   OTHER SITES
===================================================== */

.other-sites {

    display: flex;

    align-items: center;

    gap: 20px;

}


.other-sites a {

    color: var(--muted);

    font-size: 14px;

    transition:

        color 0.2s ease;

}


.other-sites a:hover {

    color: var(--text);

}


/* =====================================================
   SIDEBAR
===================================================== */

.sidebar {

    grid-column: 1;

    grid-row: 2;

    min-width: 0;

    min-height: 0;

    padding: 22px 12px;

    overflow-y: auto;

    background: var(--background);

    border-right: 1px solid var(--border);

}


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

.main-navigation {

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.nav-item {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 10px;

    color: var(--muted);

    font-size: 14px;

    transition:

        color 0.2s ease,

        background 0.2s ease;

}


.nav-item:hover {

    color: var(--text);

    background: var(--panel-hover);

}


.nav-item.active {

    color: var(--text);

    background: var(--panel);

}


/* =====================================================
   CUSTOM NAV ICONS
===================================================== */

.nav-icon {

    width: 14px;

    height: 14px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 1px;

}


.nav-icon img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: contain;

    /*
        Converts the original icon into
        a muted grey tone.
    */

    filter:

        brightness(0)

        saturate(100%)

        invert(55%)

        sepia(0%)

        saturate(0%)

        hue-rotate(0deg)

        brightness(93%)

        contrast(88%);

}


.nav-item.active .nav-icon img {

    filter:

        brightness(0)

        saturate(100%)

        invert(93%)

        sepia(0%)

        saturate(0%)

        hue-rotate(0deg)

        brightness(100%)

        contrast(100%);

}


/* =====================================================
   SIDEBAR DIVIDER
===================================================== */

.sidebar-divider {

    height: 1px;

    margin: 22px 8px;

    background: var(--border);

}


/* =====================================================
   CURRENT COURSE
===================================================== */

.sidebar-label {

    padding: 0 10px;

    margin-bottom: 10px;

    color: var(--subtle);

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 1.4px;

}


.course-navigation {

    display: flex;

    flex-direction: column;

    gap: 2px;

}


.course-item {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 8px 10px;

    color: var(--muted);

    font-size: 14px;

    transition:

        color 0.2s ease;

}


.course-item:hover,
.course-item.active {

    color: var(--text);

}


.course-number {

    color: var(--subtle);

    font-size: 8px;

}


.course-item.active .course-number {

    color: var(--text);

}


/* =====================================================
   CURRENT COURSE ANIMATION
===================================================== */

.current-course {

    overflow: hidden;

    max-height: 300px;

    opacity: 1;

    transform: translateY(0);

    transition:

        max-height 0.45s ease,

        opacity 0.35s ease,

        transform 0.45s ease;

}


.current-course.course-navigation-hidden {

    max-height: 0;

    opacity: 0;

    transform: translateY(-20px);

    pointer-events: none;

}