/* ==========================================================
   FHL ENTERPRISE
   ROSTER WIDGET
   ========================================================== */


/* ==========================================================
   ROSTER CONTAINER
   ========================================================== */

.fhl-roster-widget{
    width:100%;
    max-width:100%;

    background:#111820;
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;

    overflow:hidden;
    box-sizing:border-box;
}


/* ==========================================================
   HEADER
   ========================================================== */

.fhl-roster-widget .fhl-widget-header{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;

    padding:18px 22px;

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

    box-sizing:border-box;
}

.fhl-roster-widget .fhl-widget-title{
    margin:0;

    color:#ffffff;
    font-size:22px;
    font-weight:700;
    line-height:1.2;

    min-width:0;
}

.fhl-roster-widget .fhl-widget-subtitle{
    margin-top:4px;

    color:#93a3b8;
    font-size:13px;
    line-height:1.3;
}


/* ==========================================================
   CONTENT
   ========================================================== */

.fhl-roster-content{
    width:100%;
    max-width:100%;

    padding:18px 22px;

    box-sizing:border-box;
}


/* ==========================================================
   ROLE SECTIONS
   ========================================================== */

.fhl-roster-section{
    width:100%;
    max-width:100%;

    margin-bottom:22px;

    box-sizing:border-box;
}

.fhl-roster-section:last-child{
    margin-bottom:0;
}

.fhl-roster-section-header h4{
    display:flex;
    align-items:center;
    gap:6px;

    margin:0 0 14px;

    color:#ffd54a;
    font-size:14px;
    font-weight:700;
    line-height:1.2;
}

.fhl-roster-section-header h4 span{
    color:#ffffff;
    font-weight:600;
}


/* ==========================================================
   EMPTY STATE
   ========================================================== */

.fhl-roster-empty{
    padding:14px;

    border:1px dashed rgba(255,255,255,.12);
    border-radius:8px;

    color:#93a3b8;
    font-size:13px;

    text-align:center;

    box-sizing:border-box;
}


/* ==========================================================
   LEGACY / SIMPLE PLAYER LIST
   ========================================================== */

.fhl-roster-list{
    display:flex;
    flex-direction:column;
    gap:8px;

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

.fhl-roster-player{
    width:100%;
    max-width:100%;

    padding:10px 12px;

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

    border:1px solid rgba(255,255,255,.08);
    border-radius:8px;

    color:#ffffff;
    font-size:14px;
    font-weight:600;

    box-sizing:border-box;
}


/* ==========================================================
   PLAYER GRID
   ========================================================== */

.fhl-roster-grid{
    display:grid;

    gap:10px;

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

    box-sizing:border-box;
}


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

.fhl-roster-grid-POR{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.fhl-roster-grid-DIF{
    grid-template-columns:repeat(4,minmax(0,1fr));
}

.fhl-roster-grid-CEN{
    grid-template-columns:repeat(4,minmax(0,1fr));
}

.fhl-roster-grid-ATT{
    grid-template-columns:repeat(3,minmax(0,1fr));
}


/* ==========================================================
   PLAYER CARD
   ========================================================== */

.fhl-player-card{
    width:100%;
    min-width:0;
    max-width:100%;

    min-height:176px;

    padding:12px 8px;

    background:#0d151d;

    border:1px solid rgba(255,255,255,.10);
    border-radius:10px;

    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:flex-start;

    gap:0;

    box-sizing:border-box;
}


/* ==========================================================
   PLAYER AVATAR
   ========================================================== */

.fhl-player-avatar{
    width:70px;
    height:96px;

    min-width:70px;
    min-height:96px;

    margin-bottom:10px;

    overflow:hidden;

    box-sizing:border-box;
}

.fhl-player-avatar img,
.fhl-player-avatar svg{
    display:block;

    width:100%;
    height:100%;

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

    object-fit:cover;
}

.fhl-player-placeholder{
    width:100%;
    height:100%;

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


/* ==========================================================
   PLAYER INFO
   ========================================================== */

.fhl-player-info{
    width:100%;
    max-width:100%;

    min-width:0;

    text-align:center;

    box-sizing:border-box;
}

.fhl-player-name{
    width:100%;
    max-width:100%;

    color:#ffffff;

    font-size:13px;
    font-weight:700;
    line-height:1.2;

    overflow-wrap:anywhere;
    word-break:normal;
}

.fhl-player-role{
    color:#ffd54a;

    font-size:11px;
    line-height:1.2;

    margin-top:4px;
}

.fhl-player-value{
    color:#93a3b8;

    font-size:12px;
    line-height:1.2;

    margin-top:6px;
}


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

@media (max-width:1500px){

    /*
     * La colonna sinistra passa a circa 300px.
     * Quattro card diventano troppo strette per un avatar
     * da 70px. Riduciamo quindi DIF/CEN a 3 colonne.
     */

    .fhl-roster-grid-DIF,
    .fhl-roster-grid-CEN{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

}


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

@media (max-width:1200px){

    /*
     * La Workspace cambia struttura e la colonna sinistra
     * diventa più stretta.
     *
     * Due colonne garantiscono spazio reale per:
     * avatar + nome + ruolo + valore.
     */

    .fhl-roster-grid-POR,
    .fhl-roster-grid-DIF,
    .fhl-roster-grid-CEN,
    .fhl-roster-grid-ATT{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .fhl-roster-content{
        padding:16px;
    }

}


/* ==========================================================
   TABLET PORTRAIT
   <= 900px
   ========================================================== */

@media (max-width:900px){

    .fhl-roster-widget .fhl-widget-header{
        padding:16px;
    }

    .fhl-roster-content{
        padding:16px;
    }

    .fhl-roster-section{
        margin-bottom:18px;
    }

}


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

@media (max-width:768px){

    .fhl-roster-widget .fhl-widget-header{
        padding:14px;
    }

    .fhl-roster-widget .fhl-widget-title{
        font-size:20px;
    }

    .fhl-roster-content{
        padding:14px;
    }

    .fhl-roster-grid{
        gap:8px;
    }

    .fhl-player-card{
        min-height:145px;
        padding:10px 6px;
    }

    .fhl-player-avatar{
        width:64px;
        height:88px;

        min-width:64px;
        min-height:88px;

        margin-bottom:8px;
    }

    .fhl-player-name{
        font-size:12px;
    }

    .fhl-player-role{
        font-size:11px;
    }

    .fhl-player-value{
        font-size:11px;
    }

}


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

@media (max-width:480px){

    .fhl-roster-content{
        padding:12px;
    }

    .fhl-roster-grid{
        gap:7px;
    }

    .fhl-player-card{
        min-height:138px;
        padding:9px 5px;
    }

    .fhl-player-avatar{
        width:60px;
        height:82px;

        min-width:60px;
        min-height:82px;
    }

}


/* ==========================================================
   VERY SMALL SMARTPHONE
   <= 360px
   ========================================================== */

@media (max-width:360px){

    .fhl-roster-grid{
        gap:6px;
    }

    .fhl-player-card{
        min-height:132px;
        padding:8px 4px;
    }

    .fhl-player-avatar{
        width:56px;
        height:76px;

        min-width:56px;
        min-height:76px;

        margin-bottom:7px;
    }

    .fhl-player-name{
        font-size:11px;
    }

    .fhl-player-role,
    .fhl-player-value{
        font-size:10px;
    }

}