/* ==========================================================
   ROCK YOUR TIME®
   NAVIGATION
   Shell Version 1.0
========================================================== */


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

.ryt-sidebar{

    position:fixed;

    top:0;

    left:0;

    bottom:0;

    width:280px;

    display:flex;

    flex-direction:column;

    background:#FFFFFF;

    border-right:1px solid rgba(15,91,128,.08);

    box-shadow:
        8px 0 30px rgba(0,0,0,.05);

    transition:
        width .30s ease,
        transform .30s ease;

    z-index:1000;

    overflow:hidden;

}


/* ==========================================================
   COLLAPSED
========================================================== */

.ryt-sidebar.collapsed{

    width:72px;

}

.ryt-sidebar.collapsed .brand-text,

.ryt-sidebar.collapsed .nav-item span,

.ryt-sidebar.collapsed .sidebar-status,

.ryt-sidebar.collapsed .sidebar-footer small{

    display:none;

}

.ryt-sidebar.collapsed .sidebar-brand{

    justify-content:center;

}

.ryt-sidebar.collapsed .nav-item{

    justify-content:center;

}


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

.sidebar-brand{

    display:flex;

    align-items:center;

    gap:18px;

    padding:28px 22px;

    border-bottom:1px solid rgba(15,91,128,.08);

}

.brand-icon{

    width:52px;

    height:52px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:16px;

    background:

        linear-gradient(
            145deg,
            #0D5B8C,
            #17A7C8
        );

    overflow:hidden;

}

.brand-icon img{

    width:34px;

    height:34px;

    object-fit:contain;

}

.brand-text h2{

    margin:0;

    font-size:1.15rem;

    color:var(--ryt-primary);

    font-weight:800;

}

.brand-text span{

    display:block;

    margin-top:4px;

    color:var(--ryt-text-light);

    font-size:.82rem;

}

.brand-text small{

    display:block;

    margin-top:6px;

    color:#18A4C7;

    font-weight:600;

}


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

.sidebar-nav{

    flex:1;

    display:flex;

    flex-direction:column;

    gap:6px;

    padding:24px 14px;

    overflow-y:auto;

}

.nav-item{

    display:flex;

    align-items:center;

    gap:16px;

    padding:14px 16px;

    border-radius:16px;

    text-decoration:none;

    color:#456278;

    font-weight:600;

    transition:.25s;

}

.nav-item i{

    width:22px;

    min-width:22px;

    font-size:22px;

    text-align:center;

    flex-shrink:0;

}

.nav-item:hover{

    background:#EEF7FC;

    color:var(--ryt-primary);

    transform:translateX(4px);

    text-decoration:none;

}

.nav-item.active{

    background:

        linear-gradient(
            145deg,
            #0D5B8C,
            #17A7C8
        );

    color:white;

}

.nav-item.active:hover{

    transform:none;

}

.nav-item small{

    display:block;

    margin-top:2px;

    font-size:.70rem;

    opacity:.70;

}


/* ==========================================================
   STATUS CARD
========================================================== */

.sidebar-status{

    padding:20px;

}

.status-card{

    padding:20px;

    border-radius:20px;

    background:

        linear-gradient(
            145deg,
            #F5FAFD,
            #FFFFFF
        );

    border:1px solid rgba(15,91,128,.08);

}

.status-title{

    text-transform:uppercase;

    font-size:.75rem;

    color:var(--ryt-text-light);

    letter-spacing:.08em;

}

.status-value{

    margin-top:8px;

    font-size:1.8rem;

    font-weight:800;

    color:var(--ryt-primary);

}

.status-caption{

    margin-top:4px;

    color:var(--ryt-text-light);

}


/* ==========================================================
   FOOTER
========================================================== */

.sidebar-footer{

    padding:22px;

    border-top:1px solid rgba(15,91,128,.08);

}

.sidebar-footer span{

    display:block;

    font-weight:700;

    color:var(--ryt-primary);

}

.sidebar-footer small{

    display:block;

    margin-top:4px;

    color:var(--ryt-text-light);

}

/* ==========================================================
   TOP BAR
========================================================== */

.ryt-topbar{

    position:sticky;

    top:0;

    z-index:900;

    height:74px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 28px;

    background:rgba(255,255,255,.94);

    backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(15,91,128,.08);

}

.topbar-left{

    display:flex;

    align-items:center;

    gap:20px;

}

.sidebar-toggle{

    width:44px;

    height:44px;

    border:none;

    border-radius:14px;

    background:#F4F8FB;

    color:var(--ryt-primary);

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.25s;

}

.sidebar-toggle:hover{

    background:#E8F2F8;

    transform:scale(1.05);

}

.page-information h1{

    margin:0;

    font-size:1.35rem;

    font-weight:700;

    color:var(--ryt-primary);

}

.page-information span{

    display:block;

    margin-top:4px;

    font-size:.82rem;

    color:var(--ryt-text-light);

}

.topbar-right{

    display:flex;

    align-items:center;

    gap:18px;

}

.topbar-icon{

    width:44px;

    height:44px;

    border:none;

    border-radius:14px;

    background:#F4F8FB;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.25s;

}

.topbar-icon:hover{

    background:#E8F2F8;

}

.topbar-user{

    display:flex;

    align-items:center;

    gap:14px;

}

.user-avatar{

    width:44px;

    height:44px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        145deg,
        #0D5B8C,
        #17A7C8
    );

    color:white;

    font-weight:700;

}

.user-information strong{

    display:block;

    color:var(--ryt-primary);

}

.user-information span{

    font-size:.82rem;

    color:var(--ryt-text-light);

}


/* ==========================================================
   DESKTOP
========================================================== */

@media (min-width:992px){

    .ryt-application{

        margin-left:280px;

        transition:margin-left .30s ease;

    }

    .ryt-sidebar.collapsed + .ryt-application{

        margin-left:72px;

    }

}


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

@media (max-width:991px){

    .ryt-sidebar{

        transform:translateX(-100%);

        width:300px;

    }

    .ryt-sidebar.open{

        transform:translateX(0);

    }

    .ryt-application{

        margin-left:0;

        width:100%;

    }

}


/* ==========================================================
   PHONE
========================================================== */

@media (max-width:768px){

    .ryt-topbar{

        padding:0 16px;

    }

    .page-information span{

        display:none;

    }

    .user-information{

        display:none;

    }

    .ryt-sidebar{

        width:280px;

    }

}


/* ==========================================================
   SMALL PHONE
========================================================== */

@media (max-width:480px){

    .ryt-sidebar{

        width:260px;

    }

    .page-information h1{

        font-size:1.05rem;

    }

}