/* ==========================================================
   LAYOUT
========================================================== */

#layout{

    display:grid;

    grid-template-columns:260px 1fr;

    height:100vh;

}

#content{

    overflow-y:auto;

}

/* campo de batalha em tela cheia: o menu lateral some */

#layout.game-fullscreen{

    grid-template-columns:1fr;

}

#layout.game-fullscreen #sidebar{

    display:none;

}

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

#sidebar{

    background:#161616;

    border-right:1px solid rgba(212,175,55,.15);

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    padding:25px;

}

.sidebar-header{

    text-align:center;

}

.sidebar-header h1{

    font-family:"Cinzel",serif;

    color:var(--gold);

    letter-spacing:3px;

    font-size:2rem;

}

.sidebar-header span{

    color:var(--text-secondary);

    font-size:.9rem;

}

/* ==========================================================
   USUÁRIO LOGADO
========================================================== */

.sidebar-user{

    display:flex;
    align-items:center;
    gap:12px;
    margin-top:22px;
    padding:14px;
    background:var(--panel-light);
    border:1px solid var(--border);
    border-radius:12px;

}

.sidebar-user-avatar{

    width:38px;
    height:38px;
    flex-shrink:0;
    border-radius:50%;
    background:linear-gradient(135deg,var(--gold),var(--purple));
    color:#111;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;

}

.sidebar-user-info{

    display:flex;
    flex-direction:column;
    min-width:0;

}

.sidebar-user-name{

    font-weight:600;
    font-size:.9rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;

}

.sidebar-user-role{

    font-size:.75rem;
    color:var(--text-secondary);

}

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

.sidebar-menu{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin-top:40px;

}

.sidebar-item{

    background:none;

    border:none;

    color:var(--text);

    text-align:left;

    padding:14px 18px;

    border-left:4px solid transparent;

    cursor:pointer;

    transition:.2s;

    display:flex;

    align-items:center;

    gap:12px;

}

.sidebar-item:hover{

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

}

.sidebar-item.active{

    border-left-color:var(--gold);

    color:var(--gold);

}

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

.sidebar-footer button{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

}

/* ==========================================================
   RESPONSIVO (telas estreitas viram barra superior)
========================================================== */

@media (max-width:860px){

    #layout{

        grid-template-columns:1fr;

        grid-template-rows:auto 1fr;

        height:auto;

        min-height:100vh;

    }

    #sidebar{

        flex-direction:row;

        align-items:center;

        gap:16px;

        padding:12px 16px;

        overflow-x:auto;

    }

    .sidebar-header{

        text-align:left;

        flex-shrink:0;

    }

    .sidebar-header h1{

        font-size:1.3rem;

    }

    .sidebar-header span{

        display:none;

    }

    .sidebar-user{

        margin-top:0;

        flex-shrink:0;

        padding:8px 12px;

    }

    .sidebar-user-info{

        display:none;

    }

    .sidebar-menu{

        flex-direction:row;

        margin-top:0;

        gap:4px;

        flex:1;

    }

    .sidebar-item{

        border-left:none;

        border-bottom:3px solid transparent;

        white-space:nowrap;

        padding:10px 12px;

    }

    .sidebar-item.active{

        border-left-color:transparent;

        border-bottom-color:var(--gold);

    }

    .sidebar-item .label{

        display:none;

    }

    .sidebar-footer{

        flex-shrink:0;

    }

    .sidebar-footer button{

        width:auto;

        padding:10px 14px;

    }

    .sidebar-footer button .label{

        display:none;

    }

    #content{

        overflow-y:visible;

    }

}

@media (max-width:600px){

    .content-page{

        padding:22px 18px;

    }

}