/* =========================================================
   NAVBAR COMPONENT
   ========================================================= */


/* =========================================================
   BASE RESET
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


/* =========================================================
   NAVBAR COMPONENT CONTAINER
   ========================================================= */

/*
   #navbar is the component container.

   The actual header and sidebar are fixed, so this
   container acts as the space reserved for them.

   Desktop:
   - Reserves 64px of vertical space for the header.

   Mobile:
   - Reserves 56px of vertical space for the header.
*/

#navbar {
    display: block;

    width: 100%;
    height: 64px;
}


/* =========================================================
   HEADER
   ========================================================= */

.header {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 64px;

    background-color: #ffffff;

    border-bottom: 1px solid #e5e7eb;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 5%;

    padding: 0 24px;

    z-index: 1000;
}


/* =========================================================
   LOGO
   ========================================================= */

.logo-icon {
    background: url('/LogoSmall.svg') center/cover no-repeat;

    width: 100px;
    height: 40px;

    background-size: 100% 80%;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;
}


/* =========================================================
   SEARCH
   ========================================================= */

.search-container {
    position: relative;

    width: 100%;

    max-width: 448px;
}

.search-icon {
    position: absolute;

    top: 50%;
    left: 12px;

    transform: translateY(-50%);

    width: 16px;
    height: 16px;

    color: #9ca3af;

    pointer-events: none;
}

.search-input {
    width: 100%;

    padding: 8px 16px 8px 36px;

    background-color: #f3f4f6;

    border: 1px solid transparent;

    border-radius: 9999px;

    font-size: 0.875rem;

    outline: none;

    transition:
        background-color 0.2s,
        border-color 0.2s,
        box-shadow 0.2s;
}

.search-input:focus {
    background-color: #ffffff;

    border-color: #c4b5fd;

    box-shadow:
        0 0 0 3px rgba(124, 58, 237, 0.1);
}


/* =========================================================
   HEADER ICON BUTTON
   ========================================================= */

.icon-btn {
    background: none;

    border: none;

    color: #4b5563;

    padding: 8px;

    border-radius: 9999px;

    cursor: pointer;

    display: flex;

    align-items: center;
    justify-content: center;

    transition:
        background-color 0.2s,
        color 0.2s;
}

.icon-btn:hover {
    background-color: #f3f4f6;

    color: #111827;
}


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

/*
   Desktop sidebar:

   - Fixed to the left side.
   - Starts underneath the fixed header.
   - Extends to the bottom of the screen.
*/

.sidebar {
    position: fixed;

    top: 64px;
    left: 0;
    bottom: 0;

    width: 64px;

    height: auto;

    background-color: #ffffff;

    border-right: 1px solid #e5e7eb;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: space-between;

    padding: 24px 0;

    z-index: 999;
}


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

.sidebar-menu {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 20px;
}


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

.nav-btn {
    width: auto;
    height: auto;

    background: none;

    border: none;

    color: #6b7280;

    cursor: pointer;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 8px;

    border-radius: 9999px;

    text-decoration: none;

    transition:
        color 0.2s,
        background-color 0.2s;
}

.nav-btn:hover {
    color: #111827;
}

.active-sidebar {
    background-color: #6d28d9;

    color: #ffffff;
}


/* =========================================================
   PAGE CONTENT SPACE
   ========================================================= */

/*
   IMPORTANT:

   These rules are still part of the NAVBAR stylesheet.

   They allow the navbar to reserve the space that its
   fixed elements occupy.

   This means individual pages do NOT need to add:

       margin-left: 64px;
       padding-top: 64px;

   themselves.
*/

.main-content {
    width: calc(100% - 64px);

    min-width: 0;

    margin-left: 64px;

    padding-top: 0;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 768px) {

    /*
       Slightly smaller desktop-style sidebar.
    */

    #navbar {
        height: 64px;
    }

    .sidebar {
        width: 56px;
    }

    .main-content {
        width: calc(100% - 56px);

        margin-left: 56px;
    }

    .logo-icon {
        width: 4.5rem;
    }

    .search-container {
        flex: 1;

        max-width: none;
    }
}


/* =========================================================
   MOBILE PHONES
   ========================================================= */

@media (max-width: 600px) {

    /*
       -----------------------------------------------------
       COMPONENT SPACE
       -----------------------------------------------------

       Header = 56px
       Bottom navigation = 62px
    */

    #navbar {
        height: 56px;
    }


    /* -----------------------------------------------------
       HEADER
       ----------------------------------------------------- */

    .header {
        top: 0;
        left: 0;

        width: 100%;
        height: 56px;

        padding: 0 12px;

        gap: 12px;
    }


    /* -----------------------------------------------------
       LOGO
       ----------------------------------------------------- */

    .logo-icon {
        width: 80px;
        height: 36px;

        flex-shrink: 0;
    }


    /* -----------------------------------------------------
       SEARCH
       ----------------------------------------------------- */

    .search-container {
        flex: 1;

        width: auto;

        min-width: 0;

        max-width: none;
    }

    .search-input {
        min-height: 38px;

        font-size: 0.8125rem;

        padding:
            8px
            12px
            8px
            32px;
    }

    .search-icon {
        left: 10px;

        width: 15px;
        height: 15px;
    }


    /* -----------------------------------------------------
       SIDEBAR → BOTTOM NAVIGATION
       ----------------------------------------------------- */

    .sidebar {
        position: fixed;

        top: auto;
        left: 0;
        right: 0;
        bottom: 0;

        width: 100%;

        height: 62px;
        min-height: 62px;

        padding: 0 8px;

        background-color: #ffffff;

        border-right: none;

        border-top: 1px solid #e5e7eb;

        display: flex;

        flex-direction: row;

        align-items: center;

        justify-content: center;

        overflow: hidden;

        z-index: 999;
    }


    /* -----------------------------------------------------
       BOTTOM NAV MENU
       ----------------------------------------------------- */

    .sidebar-menu {
        width: 100%;

        height: 100%;

        display: flex;

        flex-direction: row;

        align-items: center;

        justify-content: space-around;

        gap: 4px;

        padding: 0;
    }


    /* -----------------------------------------------------
       NAVIGATION BUTTONS
       ----------------------------------------------------- */

    .nav-btn {
        width: 44px;
        height: 44px;

        min-width: 44px;
        min-height: 44px;

        flex: 1 1 0;

        max-width: 60px;

        flex-shrink: 1;

        padding: 8px;

        display: flex;

        align-items: center;
        justify-content: center;
    }


    /* -----------------------------------------------------
       PAGE CONTENT

       Reserve space for the fixed bottom navigation.
       ----------------------------------------------------- */

    .main-content {
        width: 100%;

        margin-left: 0;

        padding-bottom: 62px;
    }
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

    /*
       Bottom navigation becomes slightly shorter.
    */

    #navbar {
        height: 56px;
    }

    .sidebar {
        height: 58px;

        min-height: 58px;

        padding-left: 4px;
        padding-right: 4px;
    }

    .sidebar-menu {
        gap: 2px;
    }

    .nav-btn {
        width: 38px;
        height: 38px;

        min-width: 38px;
        min-height: 38px;

        padding: 6px;
    }

    .main-content {
        padding-bottom: 58px;
    }

    .logo-icon {
        width: 70px;
    }

    .search-input {
        font-size: 0.75rem;
    }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.nav-btn:focus-visible,
.icon-btn:focus-visible,
.search-input:focus-visible {
    outline: 2px solid #7C3AED;

    outline-offset: 2px;
}