/*
====================================================

    FLOWMANAGER

    APP LAYOUT

====================================================
*/


/* ====================================================
   APP
==================================================== */

.fm-app {

    display:
        grid;

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

    width:
        100%;

    height:
        100vh;

    min-height:
        0;

    overflow:
        hidden;

    background:
        var(--fm-background,
            #F5F6FA);

}


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

.fm-sidebar {

    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

    min-height:
        0;

    height:
        100vh;

    box-sizing:
        border-box;

    background:
        #1F2937;

    color:
        #FFFFFF;

    padding:
        20px;

    overflow:
        hidden;

}


/* ====================================================
   LOGO
==================================================== */

.fm-logo {

    flex-shrink:
        0;

    padding-bottom:
        24px;

    margin-bottom:
        24px;

    border-bottom:
        1px solid rgba(255,
            255,
            255,
            0.15);

}


.fm-logo h2 {

    margin:
        0;

    color:
        #FFFFFF;

    font-size:
        26px;

    font-weight:
        700;

    line-height:
        1.2;

}


.fm-logo span {

    display:
        block;

    margin-top:
        6px;

    color:
        rgba(255,
            255,
            255,
            0.70);

    font-size:
        13px;

}


/* ====================================================
   MENÚ
==================================================== */

.fm-menu {

    display:
        flex;

    flex-direction:
        column;

    flex:
        1 1 auto;

    min-height:
        0;

    gap:
        8px;

    overflow-y:
        auto;

    overflow-x:
        hidden;

    padding-right:
        4px;

}


/* ====================================================
   SCROLLBAR MENÚ
==================================================== */

.fm-menu::-webkit-scrollbar {

    width:
        6px;

}


.fm-menu::-webkit-scrollbar-track {

    background:
        transparent;

}


.fm-menu::-webkit-scrollbar-thumb {

    background:
        rgba(255,
            255,
            255,
            0.18);

    border-radius:
        999px;

}


.fm-menu::-webkit-scrollbar-thumb:hover {

    background:
        rgba(255,
            255,
            255,
            0.28);

}


/* ====================================================
   BOTONES DEL MENÚ
==================================================== */

.fm-menu-item {

    width:
        100%;

    flex-shrink:
        0;

    border:
        none;

    border-radius:
        10px;

    background:
        transparent;

    color:
        #FFFFFF;

    cursor:
        pointer;

    padding:
        14px 16px;

    text-align:
        left;

    font-size:
        15px;

    line-height:
        1.3;

    transition:
        background 0.2s ease,
        transform 0.2s ease;

}


.fm-menu-item:hover {

    background:
        rgba(255,
            255,
            255,
            0.10);

}


.fm-menu-item.active {

    background:
        #A36361;

}


/* ====================================================
   BOTONES OCULTOS
==================================================== */

.fm-menu-item[hidden] {

    display:
        none !important;

}


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

.fm-sidebar-footer {

    flex-shrink:
        0;

    margin-top:
        auto;

    padding-top:
        16px;

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

    background:
        #1F2937;

}


/* ====================================================
   LOGOUT
==================================================== */

.fm-logout-button {

    width:
        100%;

}


.fm-logout-button:hover {

    background:
        rgba(255,
            255,
            255,
            0.10);

}


/* ====================================================
   MAIN
==================================================== */

.fm-main {

    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

    min-height:
        0;

    height:
        100vh;

    overflow:
        hidden;

}


/* ====================================================
   TOPBAR
==================================================== */

.fm-topbar {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    flex-shrink:
        0;

    height:
        70px;

    min-height:
        70px;

    box-sizing:
        border-box;

    padding:
        0 30px;

    background:
        #FFFFFF;

    border-bottom:
        1px solid #E5E7EB;

}


.fm-topbar h1 {

    margin:
        0;

    color:
        #1F2937;

    font-size:
        24px;

    font-weight:
        700;

}


/* ====================================================
   USUARIO TOPBAR
==================================================== */

.fm-topbar-user {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    min-width:
        0;

}


.fm-topbar-user-avatar {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;

    width:
        40px;

    height:
        40px;

    border-radius:
        50%;

    background:
        #A36361;

    color:
        #FFFFFF;

    font-size:
        14px;

    font-weight:
        600;

}


.fm-topbar-user-info {

    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

}


.fm-topbar-user-info strong {

    color:
        #1F2937;

    font-size:
        14px;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


.fm-topbar-user-info span {

    margin-top:
        2px;

    color:
        #6B7280;

    font-size:
        12px;

}


/* ====================================================
   WORKSPACE
==================================================== */

.fm-workspace {

    flex:
        1 1 auto;

    min-width:
        0;

    min-height:
        0;

    overflow-y:
        auto;

    overflow-x:
        hidden;

    box-sizing:
        border-box;

    padding:
        30px;

    background:
        #F5F6FA;

    scroll-behavior:
        auto;

}


/* ====================================================
   SCROLLBAR WORKSPACE
==================================================== */

.fm-workspace::-webkit-scrollbar {

    width:
        8px;

}


.fm-workspace::-webkit-scrollbar-track {

    background:
        transparent;

}


.fm-workspace::-webkit-scrollbar-thumb {

    background:
        rgba(31,
            41,
            55,
            0.22);

    border-radius:
        999px;

}


.fm-workspace::-webkit-scrollbar-thumb:hover {

    background:
        rgba(31,
            41,
            55,
            0.32);

}


/* ====================================================
   CONTENEDORES DE MÓDULOS
==================================================== */

.fm-workspace>* {

    min-width:
        0;

}


/* ====================================================
   HOME
==================================================== */

.fm-home {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        center;

    min-height:
        100%;

    text-align:
        center;

}


.fm-home h2 {

    margin-bottom:
        15px;

    color:
        #1F2937;

    font-size:
        34px;

}


.fm-home p {

    color:
        #6B7280;

    font-size:
        18px;

}


/* ====================================================
   RESPONSIVE
==================================================== */

@media (max-width: 900px) {

    .fm-app {

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

    }


    .fm-sidebar {

        padding:
            16px;

    }


    .fm-workspace {

        padding:
            20px;

    }

}


@media (max-width: 700px) {

    .fm-app {

        display:
            block;

        width:
            100%;

        min-height:
            100vh;

        height:
            auto;

        overflow:
            visible;

    }


    .fm-sidebar {

        display:
            none;

    }


    .fm-main {

        width:
            100%;

        min-height:
            100vh;

        height:
            auto;

        overflow:
            visible;

    }


    .fm-workspace {

        min-height:
            calc(100vh - 70px);

        overflow-y:
            auto;

        padding:
            16px;

    }

}