/* =========================================================
   DEWPOINT OWNER SIDEBAR
   Modular visual layer
   ========================================================= */


/* ---------------------------------------------------------
   MAIN OWNER RAIL
   --------------------------------------------------------- */

.owner-rail{

    width:264px;

    min-height:100vh;

    padding:
        22px
        16px
        16px;

    box-sizing:border-box;

    display:flex;
    flex-direction:column;

}


/*
 * Existing owner identity block is replaced
 * by the new account footer.
 */
.owner-rail > .venue{

    display:none;

}


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

.owner-nav-groups{

    flex:
        1
        1
        auto;

    min-height:0;

    display:flex;
    flex-direction:column;

    gap:17px;

    margin-top:20px;

    padding:
        0
        3px
        12px;

    overflow-y:auto;

}


.owner-nav-group{

    display:flex;
    flex-direction:column;

    gap:5px;

}


.owner-nav-label{

    display:block;

    margin:
        3px
        0
        5px;

    padding:
        0
        12px;

    font-size:10px;

    line-height:1.2;

    font-weight:800;

    letter-spacing:.13em;

    opacity:.48;

}


.owner-nav-items{

    display:flex;
    flex-direction:column;

    gap:4px;

}


.owner-nav-items button{

    width:100%;

    min-height:43px;

    display:flex;
    align-items:center;

    gap:11px;

    padding:
        10px
        12px;

    border:0;

    border-radius:11px;

    background:transparent;

    color:inherit;

    text-align:left;

    font:inherit;

    cursor:pointer;

    transition:
        background .16s ease,
        transform .16s ease,
        box-shadow .16s ease;

}


.owner-nav-items button:hover{

    transform:
        translateX(2px);

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

}


.owner-nav-items button i{

    width:25px;
    min-width:25px;

    height:25px;

    display:grid;

    place-items:center;

    border-radius:8px;

    font-style:normal;

    font-size:16px;

    line-height:1;

    opacity:.72;

}


.owner-nav-items button span{

    min-width:0;

    overflow:hidden;

    white-space:nowrap;

    text-overflow:ellipsis;

}


.owner-nav-items button.active{

    font-weight:750;

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

    box-shadow:
        inset
        3px
        0
        0
        rgba(255,255,255,.88);

}


.owner-nav-items button.active i{

    opacity:1;

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

}


/* ---------------------------------------------------------
   OWNER ACCOUNT FOOTER
   --------------------------------------------------------- */

.owner-account-footer{

    flex:
        0
        0
        auto;

    margin-top:auto;

    padding-top:14px;

    border-top:
        1px solid
        rgba(255,255,255,.11);

}


.owner-account-card{

    width:100%;

    display:grid;

    grid-template-columns:
        38px
        minmax(0,1fr)
        20px;

    gap:10px;

    align-items:center;

    padding:10px;

    border:0;

    border-radius:13px;

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

    color:inherit;

    font:inherit;

    text-align:left;

    cursor:pointer;

}


.owner-account-card:hover{

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

}


.owner-account-avatar{

    width:38px;

    min-width:38px;

    height:38px;

    display:grid;

    place-items:center;

    overflow:hidden;

    border-radius:50%;

    background-size:cover;

    background-position:center;

    font-size:12px;

    font-weight:800;

}


.owner-account-copy{

    min-width:0;

    display:flex;

    flex-direction:column;

    gap:2px;

}


.owner-account-copy b{

    font-size:12px;

    line-height:1.25;

    overflow:hidden;

    white-space:nowrap;

    text-overflow:ellipsis;

}


.owner-account-copy small{

    font-size:10px;

    line-height:1.25;

    opacity:.58;

    overflow:hidden;

    white-space:nowrap;

    text-overflow:ellipsis;

}


.owner-account-arrow{

    text-align:center;

    font-size:15px;

    opacity:.55;

}


.owner-account-signout{

    width:100%;

    margin-top:7px;

    padding:
        9px
        11px;

    border:0;

    border-radius:9px;

    background:transparent;

    color:inherit;

    font:inherit;

    font-size:12px;

    text-align:left;

    opacity:.66;

    cursor:pointer;

}


.owner-account-signout:hover{

    opacity:1;

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

}


/* ---------------------------------------------------------
   SCROLLBAR
   --------------------------------------------------------- */

.owner-nav-groups{

    scrollbar-width:thin;

}


.owner-nav-groups::-webkit-scrollbar{

    width:5px;

}


.owner-nav-groups::-webkit-scrollbar-thumb{

    border-radius:99px;

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

}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width:1180px){

    .owner-rail{

        width:238px;

    }

}


/*
 * Existing Dewpoint mobile drawer continues
 * to control mobile navigation.
 */
@media (max-width:768px){

    .owner-rail{

        width:auto;

    }

}