/*
 * ============================================================================
 * Kasi Mattress Admin
 * ----------------------------------------------------------------------------
 * File: assets/css/sidebar.css
 * Module: Admin Sidebar
 * Version: 1.0.0
 * ============================================================================
 *
 * PURPOSE
 *
 * Styles the administrator sidebar only.
 *
 * RESPONSIBILITIES
 *
 *     - Sidebar container
 *     - Navigation sections
 *     - Navigation links
 *     - Navigation icons
 *     - Active navigation state
 *     - Logged-in administrator footer
 *     - Mobile sidebar state
 *
 * DOES NOT STYLE
 *
 *     - Topbar
 *     - Main content
 *     - Dashboard
 *     - Tables
 *     - Forms
 *     - Individual modules
 *
 * Global variables belong to:
 *
 *     assets/css/admin.css
 *
 * ============================================================================
 */


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

.km-admin-sidebar {

    position: sticky;

    top: var(--km-topbar-height, 72px);

    width: var(--km-sidebar-width, 255px);

    height: calc(
        100vh - var(--km-topbar-height, 72px)
    );

    flex: 0 0 var(--km-sidebar-width, 255px);

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    border-right: 1px solid var(--km-border, #E4E9EE);

    background: var(--km-sidebar-bg, #FFFFFF);

    overflow-x: hidden;
    overflow-y: auto;

    -webkit-overflow-scrolling: touch;
}


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

.km-sidebar-navigation {

    width: 100%;

    padding: 24px 14px;
}


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

.km-sidebar-section {

    width: 100%;

    margin: 0 0 27px;
}


.km-sidebar-section:last-child {

    margin-bottom: 0;
}


/* ==========================================================================
   SECTION TITLE
   ========================================================================== */

.km-sidebar-section-title {

    display: block;

    margin: 0 12px 9px;

    color: #A0A8B3;

    font-size: 9px;
    font-weight: 700;

    line-height: 1.3;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


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

.km-sidebar-link {

    position: relative;

    width: 100%;
    min-height: 42px;

    display: flex;

    align-items: center;

    gap: 11px;

    margin: 2px 0;

    padding: 9px 11px;

    border: 0;
    border-radius: 8px;

    background: transparent;

    color: #596575;

    font: inherit;

    font-size: 12px;
    font-weight: 500;

    line-height: 1.4;

    text-align: left;

    text-decoration: none;

    cursor: pointer;

    transition:
        background-color 150ms ease,
        color 150ms ease;
}


/*
 * Remove browser/link underlines.
 */

.km-admin-sidebar a,
.km-admin-sidebar a:hover,
.km-admin-sidebar a:focus,
.km-admin-sidebar a:active {

    text-decoration: none;
}


/* Hover */

.km-sidebar-link:hover {

    background: #F2F6F9;

    color: var(--km-navy, #0F4C81);

    text-decoration: none;
}


/* Focus */

.km-sidebar-link:focus-visible {

    outline: 3px solid rgba(15, 76, 129, 0.13);

    outline-offset: 2px;

    text-decoration: none;
}


/* Active */

.km-sidebar-link-active {

    background: #EAF2F8;

    color: var(--km-navy, #0F4C81);

    font-weight: 600;

    text-decoration: none;
}


/*
 * Active indicator.
 */

.km-sidebar-link-active::before {

    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 3px;
    height: 20px;

    transform: translateY(-50%);

    border-radius: 0 3px 3px 0;

    background: var(--km-navy, #0F4C81);
}


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

.km-sidebar-icon {

    width: 19px;
    height: 19px;

    display: grid;

    place-items: center;

    flex: 0 0 19px;

    color: currentColor;
}


/* SVG */

.km-sidebar-icon svg {

    width: 17px;
    height: 17px;

    display: block;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* Icon fills where explicitly required */

.km-sidebar-icon svg[fill="currentColor"] {

    fill: currentColor;
}


/* ==========================================================================
   SIDEBAR LINK TEXT
   ========================================================================== */

.km-sidebar-link-text {

    min-width: 0;

    flex: 1;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
}


/* ==========================================================================
   OPTIONAL NAVIGATION BADGE
   ========================================================================== */

.km-sidebar-link-badge {

    min-width: 20px;
    min-height: 20px;

    display: inline-flex;

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

    flex: 0 0 auto;

    padding: 2px 6px;

    border-radius: 999px;

    background: #EDF3F8;

    color: var(--km-navy, #0F4C81);

    font-size: 9px;
    font-weight: 700;

    line-height: 1;
}


/* ==========================================================================
   SIDEBAR FOOTER / USER
   ========================================================================== */

.km-sidebar-user {

    width: 100%;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 17px;

    border-top: 1px solid var(--km-border, #E4E9EE);

    background: var(--km-sidebar-bg, #FFFFFF);
}


/* ==========================================================================
   SIDEBAR USER AVATAR
   ========================================================================== */

.km-sidebar-user-avatar {

    width: 34px;
    height: 34px;

    display: grid;

    place-items: center;

    flex: 0 0 34px;

    border-radius: 50%;

    background: #EAF1F7;

    color: var(--km-navy, #0F4C81);

    font-size: 11px;
    font-weight: 700;

    line-height: 1;

    user-select: none;
}


/* ==========================================================================
   SIDEBAR USER INFORMATION
   ========================================================================== */

.km-sidebar-user-info {

    min-width: 0;

    flex: 1;
}


.km-sidebar-user-info strong,
.km-sidebar-user-info span {

    display: block;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
}


.km-sidebar-user-info strong {

    color: var(--km-heading, #172231);

    font-size: 11px;
    font-weight: 600;

    line-height: 1.3;
}


.km-sidebar-user-info span {

    margin-top: 2px;

    color: var(--km-muted, #6B7280);

    font-size: 9px;
    font-weight: 400;

    line-height: 1.3;
}


/* ==========================================================================
   USER STATUS
   ========================================================================== */

.km-sidebar-user-status {

    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;

    background: #31A46C;

    box-shadow:
        0 0 0 3px rgba(49, 164, 108, 0.08);
}


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

.km-admin-sidebar {

    scrollbar-width: thin;

    scrollbar-color:
        #D9E0E6
        transparent;
}


.km-admin-sidebar::-webkit-scrollbar {

    width: 6px;
}


.km-admin-sidebar::-webkit-scrollbar-track {

    background: transparent;
}


.km-admin-sidebar::-webkit-scrollbar-thumb {

    border-radius: 999px;

    background: #D9E0E6;
}


.km-admin-sidebar::-webkit-scrollbar-thumb:hover {

    background: #C3CDD6;
}


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

@media (max-width: 1000px) {

    .km-admin-sidebar {

        width: var(--km-sidebar-width, 255px);

        flex-basis: var(--km-sidebar-width, 255px);
    }


    .km-sidebar-navigation {

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

}


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

@media (max-width: 800px) {

    .km-admin-sidebar {

        position: fixed;

        top: var(--km-topbar-height, 64px);

        left: 0;

        z-index: 90;

        width: 255px;

        height: calc(
            100vh - var(--km-topbar-height, 64px)
        );

        flex: none;

        transform: translateX(-100%);

        box-shadow:
            10px 0 30px rgba(15, 76, 129, 0.10);

        transition:
            transform 180ms ease;
    }


    /*
     * JavaScript adds this class when the
     * mobile navigation is opened.
     */

    .km-admin-sidebar.km-sidebar-open {

        transform: translateX(0);
    }


    .km-sidebar-navigation {

        padding-top: 20px;
    }


    .km-sidebar-user {

        padding: 15px 16px;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 520px) {

    .km-admin-sidebar {

        width: min(
            255px,
            calc(100vw - 35px)
        );
    }


    .km-sidebar-navigation {

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


    .km-sidebar-section {

        margin-bottom: 22px;
    }


    .km-sidebar-link {

        min-height: 44px;

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

}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .km-sidebar-link,
    .km-admin-sidebar {

        transition: none;
    }

}