/* ==========================================================
   FHL ENTERPRISE
   WORKSPACE LAYOUT
   Responsive Workspace System
   ========================================================== */


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

.fh-workspace{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
}


/* ==========================================================
   WORKSPACE BODY
   Desktop large
   ========================================================== */

.fh-workspace-body{
    display:grid;

    /*
     * Desktop:
     * left  = manager / roster
     * center = main competition content
     * right = secondary information
     */
    grid-template-columns:430px minmax(0,1fr) 260px;

    grid-template-areas:
        "left center right";

    gap:16px;

    align-items:start;

    width:100%;
    max-width:100%;

    box-sizing:border-box;
}


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

.fh-workspace-left,
.fh-workspace-center,
.fh-workspace-right{
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
}

.fh-workspace-left{
    grid-area:left;
}

.fh-workspace-center{
    grid-area:center;
}

.fh-workspace-right{
    grid-area:right;
}


/* ==========================================================
   EQUAL COLUMN HEIGHT
   Desktop 3-column. The left column sets the height; stats and
   results history scroll. See workspace-columns.js.
   ========================================================== */

.fh-workspace-body--balanced .fh-workspace-left,
.fh-workspace-body--balanced .fh-workspace-center,
.fh-workspace-body--balanced .fh-workspace-right{
    display:flex;
    flex-direction:column;
    min-height:0;
}

.fh-workspace-body--balanced .fh-workspace-left{
    overflow-y:auto;
}

.fh-workspace-body--balanced .fh-workspace-center,
.fh-workspace-body--balanced .fh-workspace-right{
    overflow:hidden;
}

.fh-workspace-body--balanced .fh-workspace-left > *,
.fh-workspace-body--balanced .fh-workspace-center > *,
.fh-workspace-body--balanced .fh-workspace-right > *{
    flex:0 0 auto;
}

.fh-workspace-body--balanced .fh-workspace-left > :last-child{
    flex:1 0 auto;
}

.fh-workspace-body--balanced .fh-workspace-center > .fhl-player-stats-widget{
    flex:1 1 auto;
    min-height:180px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.fh-workspace-body--balanced .fhl-player-stats-header{
    flex:0 0 auto;
}

.fh-workspace-body--balanced .fhl-player-stats-table{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
}

.fh-workspace-body--balanced .fhl-player-stats-head{
    position:sticky;
    top:0;
    z-index:1;
    background:#0d1218;
}

.fh-workspace-body--balanced .fh-workspace-right > .fhl-results-history-widget{
    flex:1 1 auto;
    min-height:120px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.fh-workspace-body--balanced .fhl-results-history-widget h3,
.fh-workspace-body--balanced .fhl-results-history-empty{
    flex:0 0 auto;
}

.fh-workspace-body--balanced .fhl-results-history-list{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
}

.fh-workspace-body--balanced .fhl-player-stats-table::-webkit-scrollbar,
.fh-workspace-body--balanced .fhl-results-history-list::-webkit-scrollbar{
    width:8px;
}

.fh-workspace-body--balanced .fhl-player-stats-table::-webkit-scrollbar-thumb,
.fh-workspace-body--balanced .fhl-results-history-list::-webkit-scrollbar-thumb{
    background:rgba(247,198,0,.35);
    border-radius:999px;
}


/* ==========================================================
   NOTEBOOK / DESKTOP COMPATTO
   1500px
   ========================================================== */

@media (max-width:1500px){

    .fh-workspace-body{
        grid-template-columns:300px minmax(0,1fr) 300px;
        gap:16px;
    }

}


/* ==========================================================
   TABLET LANDSCAPE / IPAD LANDSCAPE
   1200px
   ========================================================== */

@media (max-width:1200px){

    .fh-workspace-body{
        grid-template-columns:minmax(280px,0.85fr) minmax(0,1.5fr);

        grid-template-areas:
            "left center"
            "right right";

        gap:16px;
    }

}


/* ==========================================================
   TABLET PORTRAIT / SMALL TABLET
   900px
   ========================================================== */

@media (max-width:900px){

    .fh-workspace-body{
        grid-template-columns:minmax(0,1fr);

        grid-template-areas:
            "left"
            "center"
            "right";

        gap:16px;
    }

}


/* ==========================================================
   SMARTPHONE
   768px
   ========================================================== */

@media (max-width:768px){

    .fh-workspace-body{
        display:grid;

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

        grid-template-areas:
            "left"
            "center"
            "right";

        gap:14px;
    }

    .fh-workspace-left,
    .fh-workspace-center,
    .fh-workspace-right{
        width:100%;
        min-width:0;
        max-width:100%;
    }

}


/* ==========================================================
   SMALL SMARTPHONE
   480px
   ========================================================== */

@media (max-width:480px){

    .fh-workspace-body{
        gap:12px;
    }

}


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

.fh-workspace-footer{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
}


/* ==========================================================
   GLOBAL RESPONSIVE SAFETY
   ========================================================== */

.fh-workspace *,
.fh-workspace *::before,
.fh-workspace *::after{
    box-sizing:border-box;
}


/* Prevent accidental horizontal overflow caused by
   individual workspace children. */

.fh-workspace img,
.fh-workspace video,
.fh-workspace canvas{
    max-width:100%;
}


/* Long textual content must be allowed to shrink. */

.fh-workspace h1,
.fh-workspace h2,
.fh-workspace h3,
.fh-workspace h4,
.fh-workspace h5,
.fh-workspace h6,
.fh-workspace p{
    max-width:100%;
}