/*
|--------------------------------------------------------------------------
| Herzschild Talk Version5.0 Build3
| navigation.css
|--------------------------------------------------------------------------
*/

/* ==========================================================================
   Rich Menu
========================================================================== */

.ht-rich-menu{

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    flex:0 0 auto;

    min-height:82px;

    background:#ffffff;

    border-top:1px solid rgba(0,0,0,.12);

}

.ht-menu-item{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:5px;

    min-width:0;

    padding:8px 4px;

    background:#ffffff !important;

    color:#303030;

    border-right:1px solid rgba(0,0,0,.10) !important;

    transition:background .2s ease,color .2s ease;

}

.ht-menu-item:last-child{

    border-right:0 !important;

}

.ht-menu-item:hover,
.ht-menu-item:focus-visible,
.ht-menu-item.is-active{

    background:#edf5ff !important;

    color:#526df6;

}

.ht-menu-item:focus-visible{

    outline:2px solid #526df6;

    outline-offset:-2px;

}

.ht-menu-icon{

    font-size:26px;

    line-height:1;

}

.ht-menu-label{

    overflow:hidden;

    max-width:100%;

    font-size:11px;

    font-weight:700;

    line-height:1.3;

    text-overflow:ellipsis;

    white-space:nowrap;

}

/* ==========================================================================
   Navigation View
========================================================================== */

.ht-navigation{

    display:flex;

    flex-direction:column;

    width:100%;

    height:100%;

    background:#f5f5f5;

}

/* ==========================================================================
   Navigation Header
========================================================================== */

.ht-navigation-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:16px 20px;

    background:#ffffff;

    border-bottom:1px solid #e5e5e5;

}

.ht-navigation-title{

    margin:0;

    font-size:18px;

    font-weight:700;

    color:#333333;

}

/* ==========================================================================
   Navigation Body
========================================================================== */

.ht-navigation-body{

    flex:1;

    overflow-y:auto;

    padding:20px;

}

/* ==========================================================================
   Menu Grid
========================================================================== */

.ht-navigation-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));

    gap:16px;

}

/* ==========================================================================
   Navigation Card
========================================================================== */

.ht-navigation-card{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:10px;

    min-height:120px;

    padding:20px;

    background:#ffffff;

    border:1px solid #e5e5e5;

    border-radius:16px;

    cursor:pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;

}

.ht-navigation-card:hover{

    transform:translateY(-2px);

    border-color:#06c755;

    box-shadow:0 4px 12px rgba(0,0,0,.10);

}

.ht-navigation-card:active{

    transform:scale(.98);

}

/* ==========================================================================
   Icon
========================================================================== */

.ht-navigation-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:56px;

    height:56px;

    border-radius:50%;

    background:#06c755;

    color:#ffffff;

    font-size:24px;

    font-weight:700;

}

/* ==========================================================================
   Label
========================================================================== */

.ht-navigation-label{

    text-align:center;

    font-size:15px;

    font-weight:600;

    color:#333333;

    line-height:1.5;

    word-break:break-word;

}

/* ==========================================================================
   Description
========================================================================== */

.ht-navigation-description{

    text-align:center;

    font-size:13px;

    color:#777777;

    line-height:1.6;

    word-break:break-word;

}

/* ==========================================================================
   Link List
========================================================================== */

.ht-navigation-links{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.ht-navigation-link{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:14px 18px;

    background:#ffffff;

    border:1px solid #e5e5e5;

    border-radius:12px;

    text-decoration:none;

    color:#333333;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;

}

.ht-navigation-link:hover{

    background:#f9fff9;

    border-color:#06c755;

    transform:translateX(4px);

}

.ht-navigation-link::after{

    content:"›";

    font-size:18px;

    color:#999999;

}

/* ==========================================================================
   Empty
========================================================================== */

.ht-navigation-empty{

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:240px;

    color:#999999;

    font-size:14px;

    text-align:center;

}

/* ==========================================================================
   Scrollbar
========================================================================== */

.ht-navigation-body::-webkit-scrollbar{

    width:6px;

}

.ht-navigation-body::-webkit-scrollbar-track{

    background:transparent;

}

.ht-navigation-body::-webkit-scrollbar-thumb{

    background:#cccccc;

    border-radius:999px;

}

.ht-navigation-body::-webkit-scrollbar-thumb:hover{

    background:#b5b5b5;

}

/* ==========================================================================
   Animation
========================================================================== */

.ht-navigation{

    animation:htNavigationFade .2s ease;

}

@keyframes htNavigationFade{

    from{

        opacity:0;

        transform:translateY(8px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}