/* ==========================================================
   FHL - AUCTION WORKSPACE
   Layout principale
========================================================== */

.fh-auction-workspace{
    display:flex;
    flex-direction:column;
    gap:20px;
    width:100%;
}


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

.fh-auction-header{
    width:100%;
}


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

.fh-auction-layout{

    display:grid;

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

    gap:16px;

    align-items:start;

}


.fh-auction-sidebar-left,
.fh-auction-content,
.fh-auction-sidebar-right{

    min-width:0;

}

/* ==========================================================
   COLONNE
========================================================== */

.fh-auction-sidebar-left{

    display:flex;

    flex-direction:column;

    gap:20px;

}


.fh-auction-content{

    display:flex;

    flex-direction:column;

    gap:20px;

}


.fh-auction-sidebar-right{

    display:flex;

    flex-direction:column;

    gap:20px;

}


/* ==========================================================
   PLAYER AREA
========================================================== */

.fh-auction-player{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:20px;

    align-items:stretch;

}

.fh-auction-player-area{

    display:flex;

    flex-direction:column;

    gap:24px;

}

/* ==========================================================
   FILTER
========================================================== */

.fh-auction-filters{

    width:100%;

}


/* ==========================================================
   TABLE
========================================================== */

.fh-auction-table{

    width:100%;

}


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

.fh-auction-footer{

    margin-top:20px;

}


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

.fh-auction-workspace .fh-card{

    width:100%;

}



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

.fh-auction-runtime{
    display:flex;
    align-items:center;
    gap:60px;
}

.fh-auction-runtime-context{

    display:flex;

    gap:18px;

    margin-left:40px;

    flex:1;

}

.fh-auction-runtime-info{
    display:flex;
    align-items:center;
    gap:18px;
}

.fh-auction-runtime-logo img{
    width:64px;
    height:64px;
    object-fit:contain;
    display:block;
}

.fh-auction-runtime-title h2{
    margin:0;
    font-size:26px;
    font-weight:700;
}

.fh-auction-runtime-title p{
    margin:6px 0 0;
    opacity:.75;
    font-size:14px;
}

.fh-auction-runtime-context{
    display:flex;
    gap:15px;
}

.fh-runtime-box{
    min-width:120px;
    text-align:center;
}

.fh-runtime-box span{
    display:block;
    font-size:11px;
    text-transform:uppercase;
    opacity:.65;
}

.fh-runtime-box strong{
    display:block;
    margin-top:4px;
    font-size:15px;
}

.fh-player-table{
    width:100%;
}

.fh-player-table-header,
.fh-player-table-row{
    display:grid;
    grid-template-columns:
    60px 2fr 70px 120px 100px;
    gap:15px;
    align-items:center;
}

.fh-player-table-header{

    font-size:12px;
    text-transform:uppercase;
    opacity:.7;

}

.fh-player-table-row{

    padding:2px 0;

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

    min-height:72px;

}

/* ==========================================================
   PLAYER PHOTO
========================================================== */

.fh-player-photo{
    display:flex;
    justify-content:center;
    align-items:center;
}

.fh-player-photo svg{
    width:44px;
    height:auto;
    display:block;
}


/* ==========================================================
   OFFER BUTTON
========================================================== */

.fh-player-offer-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:96px;

    height:34px;

    border:1px solid #d6a400;

    border-radius:8px;

    background:transparent;

    color:#d6a400;

    font-size:13px;

    font-weight:700;

    letter-spacing:.5px;

    text-transform:uppercase;

    cursor:pointer;

    transition:all .20s ease;

}

.fh-player-offer-button:disabled {

    background: #b00020;
    color: #ffffff;

    border-color: #b00020;

    cursor: not-allowed;

    opacity: 1;

}

.fh-player-offer-button:hover{

    background:#d6a400;

    color:#101010;

}


.fh-player-offer-button:active{

    transform:scale(.97);

}

/* ==========================================================
   FILTER TABS
========================================================== */

.fh-filter-tabs{

    display:flex;

    align-items:center;

    gap:12px;

}


.fh-filter-tab{

    display:inline-flex;

    align-items:center;

    padding:8px 14px;

    border-radius:8px;

    color:#ffffff;

    text-decoration:none;

    transition:.2s ease;

}


.fh-filter-tab:hover{

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

}


.fh-filter-tab.active{

    background:rgba(214,164,0,.18);

    border:1px solid #d6a400;

    color:#ffffff;

}

.fh-auction-filters-widget {

    display:flex;

    align-items:center;

}


.fh-filter-tabs {

    display:flex;

    align-items:center;

    gap:20px;

    flex:1;

}


.fh-filter-search {

    display:flex;

    align-items:center;

    margin-left:auto;

}


.fh-filter-search form {

    display:flex;

    align-items:center;

    gap:8px;

}


/* ==========================================================
   PLAYER NAME
========================================================== */

.fh-player-name{

    display:flex;

    align-items:center;

    gap:4px;

    white-space:nowrap;

}


.fh-player-surname{

    color:#d6a400;

    font-size:17px;

    font-weight:700;

    letter-spacing:.3px;

    margin-bottom:4px;

}


.fh-player-firstname{

    color:#9f9f9f;

    font-size:15px;

    font-weight:500;

    margin-top:0;

}

/* ==========================================================
   PLAYER ROLE BADGE
========================================================== */

.fh-player-role{

    display:flex;

    justify-content:flex-start;

}


.fh-player-role-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:54px;

    height:30px;

    padding:0 12px;

    border-radius:8px;

    font-size:13px;

    font-weight:700;

    letter-spacing:.5px;

    border:1px solid transparent;

}


/* PORTIERE */

.fh-role-por{

    background:rgba(52,152,219,.12);

    border-color:#3498db;

    color:#3498db;

}


/* DIFENSORE */

.fh-role-dif{

    background:rgba(46,204,113,.12);

    border-color:#2ecc71;

    color:#2ecc71;

}


/* CENTROCAMPISTA */

.fh-role-cen{

    background:rgba(243,156,18,.12);

    border-color:#f39c12;

    color:#f39c12;

}


/* ATTACCANTE */

.fh-role-att{

    background:rgba(231,76,60,.12);

    border-color:#e74c3c;

    color:#e74c3c;

}

/* ==========================================================
   PLAYER VALUE
========================================================== */

.fh-player-value{

    display:flex;

    align-items:center;

    justify-content:center;

    color:#ffffff;

    font-size:22px;

    font-weight:700;

    letter-spacing:.3px;

    line-height:1;

}

/* ==========================================================
   OFFER PANEL
========================================================== */

.fh-offer-panel{

    display:flex;

    flex-direction:column;

    height:100%;

}


.fh-offer-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:18px 20px;

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

}


.fh-offer-header h3{

    margin:0;

    color:#ffffff;

    font-size:15px;

    font-weight:700;

    letter-spacing:.6px;

    text-transform:uppercase;

}


.fh-offer-body{

    display:flex;

    flex-direction:column;

    gap:16px;

    padding:20px;

}

/* ==========================================================
   OFFER PANEL BOXES
========================================================== */

.fh-offer-box{

    display:flex;

    flex-direction:column;

    gap:10px;

    padding:16px;

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

    border-radius:10px;

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

}


.fh-offer-title{

    color:#9d9d9d;

    font-size:12px;

    font-weight:600;

    letter-spacing:.5px;

    text-transform:uppercase;

}


.fh-offer-value{

    color:#ffffff;

    font-size:30px;

    font-weight:700;

}

/* ==========================================================
   OFFER PANEL LAYOUT
========================================================== */

.fh-offer-layout{

    display:grid;

    grid-template-columns:220px 1fr 280px;

    gap:24px;

    align-items:start;

    padding-top:20px;

}


.fh-offer-left{

    display:flex;

    justify-content:center;

    align-items:flex-start;

}

.fh-offer-avatar{

    width:220px;

}

.fh-offer-avatar svg{

    display:block;

    width:100%;

    height:auto;

}

.fh-offer-center{

    display:flex;

    flex-direction:column;

    gap:6px;

}

/* ==========================================================
   OFFER PLAYER
========================================================== */

.fh-offer-surname{

    color:#d6a400;

    font-size:17px;

    font-weight:700;

    letter-spacing:.3px;

    line-height:1.1;

    margin:0;

}

.fh-offer-firstname{

    margin-top:2px;

    color:#b8b8b8;

    font-size:15px;

    font-weight:500;

    line-height:1.1;

}

.fh-offer-role{

    display:flex;

    justify-content:flex-start;

    margin-top:6px;
    margin-bottom:24px;

}

.fh-offer-role-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:54px;

    height:30px;

    padding:0 12px;

    border-radius:8px;

    font-size:13px;

    font-weight:700;

    letter-spacing:.5px;

    border:1px solid transparent;

}

.fh-offer-right{

    display:flex;

    flex-direction:column;

    gap:18px;

}

/* ==========================================================
   OFFER METRICS
========================================================== */

.fh-offer-metrics{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin-top:8px;

}

.fh-offer-metric{

    padding:10px 12px;

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

    border-radius:10px;

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

}

.fh-offer-metric-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.fh-offer-metric-header span{

    color:#9c9c9c;

    font-size:11px;

    font-weight:700;

    letter-spacing:.8px;

    text-transform:uppercase;

}

.fh-offer-metric-header strong{

    color:#ffffff;

    font-size:16px;

    font-weight:700;

}

.fh-offer-metric-bar{

    margin-top:8px;

    width:100%;

    height:6px;

    border-radius:6px;

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

    overflow:hidden;

}

.fh-offer-metric-fill{

    height:100%;

    border-radius:6px;

}

.fh-offer-metric-fill-technical{

    background:#2ecc71;

}

.fh-offer-metric-fill-experience{

    background:#d6a400;

}









/* ==========================================================
   OFFER CARD
========================================================== */

.fh-offer-card{

    display:flex;

    flex-direction:column;

    gap:22px;

    padding:24px;

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

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

    border-radius:12px;

}


.fh-offer-card-title{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:4px;

}

.fh-offer-card-title small{

    font-size:10px;

    letter-spacing:1px;

    text-transform:uppercase;

    color:#8d8d8d;

    font-weight:700;

}

.fh-offer-card-title span{

    font-size:26px;

    font-weight:700;

    color:#d6a400;

}


.fh-offer-controls{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:18px;

}


.fh-offer-current{

    flex:1;

    text-align:center;

    color:#d6a400;

    font-size:42px;

    font-weight:700;

    line-height:1;

}

.fh-offer-minus,
.fh-offer-plus{

    width:46px;

    height:46px;

    border:none;

    border-radius:10px;

    background:#2b2b2b;

    color:#ffffff;

    font-size:28px;

    cursor:pointer;

    transition:.20s;

}


.fh-offer-minus:hover,
.fh-offer-plus:hover{

    background:#d6a400;

    color:#111;

}

.fh-offer-minus:disabled,
.fh-offer-plus:disabled{

    opacity:.45;

    cursor:not-allowed;

    pointer-events:none;

    background:#2b2b2b;

    color:#7a7a7a;

}

.fh-offer-minus:disabled:hover,
.fh-offer-plus:disabled:hover{

    background:#2b2b2b;

    color:#7a7a7a;

}

/* ==========================================================
   PLAYER PAGINATION
========================================================== */

.fh-player-pagination{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;

    margin-top:24px;
    padding-top:10px;

}

.fh-player-pagination a,
.fh-player-pagination span{

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

    min-width:38px;
    height:38px;

    padding:0 12px;

    border-radius:10px;

    text-decoration:none;

    font-size:14px;
    font-weight:600;

}

.fh-player-pagination a{

    background:#2d2d2d;
    color:#cfcfcf;

    transition:.20s;

}

.fh-player-pagination a:hover{

    background:#444;

    color:#fff;

}

.fh-player-pagination a.active{

    background:#d6a400;

    color:#111;

}

.fh-pagination-dots{

    color:#8d8d8d;

    min-width:auto;

    padding:0 4px;

}

.fh-pagination-arrow{

    color:#d6a400;

    font-size:18px;

    font-weight:700;

    line-height:1;

}

.fhl-confirm-offer-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    padding:14px 28px;
    min-width:220px;

    background:linear-gradient(180deg,#ffd84d 0%, #f5c542 100%);
    color:#1c1c1c;

    border:none;
    border-radius:14px;

    font-size:15px;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;

    cursor:pointer;
    transition:all .25s ease;

    box-shadow:
        0 6px 18px rgba(245,197,66,.35),
        inset 0 1px 0 rgba(255,255,255,.45);
}

.fhl-confirm-offer-btn i{
    font-size:18px;
}

.fhl-confirm-offer-btn:hover{
    transform:translateY(-2px);
    box-shadow:
        0 10px 24px rgba(245,197,66,.45),
        inset 0 1px 0 rgba(255,255,255,.6);
    background:linear-gradient(180deg,#ffe36f 0%, #f7cb45 100%);
}

.fhl-confirm-offer-btn:active{
    transform:translateY(1px);
    box-shadow:
        0 3px 10px rgba(245,197,66,.25),
        inset 0 2px 6px rgba(0,0,0,.15);
}

.fhl-confirm-offer-btn:disabled{
    opacity:.55;
    cursor:not-allowed;
    transform:none;
    box-shadow:none;
}

/* ==========================================================
   AUCTION STATUS
========================================================== */

.fh-auction-status-header{

    display:flex;

    justify-content:center;

    margin-bottom:18px;

}

.fh-auction-status-header h3{

    margin:0;

}

.fh-auction-status-body{

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;

}

.fh-auction-status-section{

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;

    width:100%;

    padding:0 0 18px;

    margin-bottom:18px;

    border-bottom:1px solid rgba(214,164,0,.45);

}

.fh-auction-status-section:last-of-type{

    border-bottom:none;

    margin-bottom:0;

    padding-bottom:0;

}

.fh-auction-status-section-countdown{

    border-bottom:none;

    margin-bottom:10px;

    padding-bottom:0;

}

.fh-auction-status-row{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;

}

.fh-auction-status-dot{

    width:10px;
    height:10px;

    border-radius:50%;

    background:#39d353;

    flex-shrink:0;

}

.fh-auction-status-row strong{

    color:#ffffff;

    font-size:18px;

    font-weight:700;

    letter-spacing:.4px;

    line-height:1.2;

}

.fh-auction-label{

    color:#8f8f8f;

    font-size:18px;
font-weight:600;
letter-spacing:0;
text-transform:none;

}

.fh-auction-status-section strong{

    color:#ffffff;

    font-size:22px;

    font-weight:700;

    line-height:1.2;

}

.fh-auction-countdown{

    display:block;

    margin-top:4px;

    color:#ffffff;

    font-size:38px;

    font-weight:700;

    letter-spacing:.5px;

    line-height:1;

}

.fh-auction-progress{

    width:100%;
    height:6px;

    margin-top:4px;

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

    border-radius:999px;

    overflow:hidden;

}

.fh-auction-progress-bar{

    width:0;

    height:100%;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        #d6a400 0%,
        #ffd84d 100%
    );

    transition:width 1s linear;

}



.fh-auction-datetime{

    display:flex;

    align-items:center;

    gap:8px;

}

.fh-auction-date{

    color:#ffffff;

    font-size:18px;

    font-weight:700;

}

.fh-auction-time{

    color:#d6a400;

    font-size:18px;

    font-weight:700;

}

/* ==========================================================
   ACTIVE OFFERS WIDGET
========================================================== */

.fh-active-offers-widget{
    padding:20px;
}


.fh-active-offers-body{
    display:flex;
    flex-direction:column;
    gap:20px;
}


.fh-active-offers-role{
    border:2px solid #d6ff00;
    border-radius:14px;
    padding:12px;
}


.fh-active-role-header{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:6px;
    white-space:nowrap;
}


.fh-active-role-header strong{
    font-size:24px;
    color:#ffffff;
}


.fh-active-role-header span{
    font-size:12px;
    font-weight:700;
    color:#ffffff;
}


.fh-active-offer-player{
    display:flex;
    align-items:flex-start;
    gap:8px;
    padding:4px 0;
}

.fh-active-player-info{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    flex:1;
}


.fh-active-player-actions{
    display:flex;
    justify-content:flex-start;
    gap:5px;
    margin-top:6px;
}

.fh-active-player-actions button{
    padding:3px 6px;
    border-radius:5px;
    font-size:9px;
    font-weight:700;
    cursor:pointer;
    background:transparent;
}

.fh-active-edit-offer-btn{
    border:1px solid #d9a900;
    color:#d9a900;
}

.fh-active-cancel-offer-btn{
    border:1px solid #d00000;
    color:#ffffff;
}

.fh-active-player-info strong{
    display:block;
    color:#d6a400;
    font-size:13px;
    line-height:14px;
}


.fh-active-player-info small{
    display:block;
    margin-top:2px;
    color:#ffffff;
    font-size:12px;
    line-height:14px;
}

/* ACTIVE OFFERS AVATAR */

.fh-active-player-avatar{
    width:45px;
    height:58px;
    flex-shrink:0;
    overflow:hidden;
}


.fh-active-player-avatar svg{
    width:100%;
    height:100%;
    display:block;
}

/* ==========================================================
   BUDGET PANEL
   ========================================================== */

.fh-budget-panel{
    width:100%;
    box-sizing:border-box;
    padding:18px;
    color:#ffffff;
}


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

.fh-budget-header{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:22px;
    padding:14px 16px;
    background:linear-gradient(
        135deg,
        rgba(13,22,31,.98),
        rgba(4,10,16,.98)
    );
    border:1px solid rgba(255,255,255,.08);
    border-radius:10px;
    box-shadow:
        0 8px 24px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.03);
}

.fh-budget-header-icon{
    width:42px;
    height:42px;
    flex-shrink:0;

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

    border-radius:8px;

    background:rgba(125,63,255,.14);
    color:#9d5cff;

    font-size:21px;

    box-shadow:
        0 0 18px rgba(125,63,255,.16);
}

.fh-budget-header-content{
    min-width:0;
}

.fh-budget-header-content h2{
    margin:0;

    color:#ffffff;

    font-size:22px;
    line-height:1.05;
    font-weight:800;

    letter-spacing:.3px;
}

.fh-budget-header-content span{
    display:block;

    margin-top:5px;

    color:#a7adb5;

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


/* ==========================================================
   DONUT
   ========================================================== */

.fh-budget-donut-section{
    display:flex;
    justify-content:center;

    margin-bottom:20px;
}

.fh-budget-donut{

    --fh-budget-blue:25%;
    --fh-budget-red:25%;
    --fh-budget-green:50%;

    position:relative;

    width:250px;
    aspect-ratio:1 / 1;

    border-radius:50%;

    background:
        conic-gradient(
            #287be8 0 var(--fh-budget-blue),
            #ef3434 var(--fh-budget-blue)
                calc(
                    var(--fh-budget-blue) +
                    var(--fh-budget-red)
                ),
            #4caf50
                calc(
                    var(--fh-budget-blue) +
                    var(--fh-budget-red)
                )
                100%
        );

    box-shadow:
        0 0 22px rgba(40,123,232,.08);

    display:flex;
    align-items:center;
    justify-content:center;
}

.fh-budget-donut::before{
    content:"";

    position:absolute;
    inset:12px;

    border-radius:50%;

    background:
        radial-gradient(
            circle at center,
            #071018 0%,
            #050b11 72%,
            #03070b 100%
        );

    box-shadow:
        inset 0 0 20px rgba(0,0,0,.65);
}

.fh-budget-donut-inner{
    position:relative;
    z-index:2;

    width:72%;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    text-align:center;
}

.fh-budget-donut-inner strong{
    display:block;

    color:#ffffff;

    font-size:30px;
    line-height:1.05;
    font-weight:800;

    letter-spacing:-.5px;
}

.fh-budget-donut-inner span{
    margin-top:7px;

    color:#4caf50;

    font-size:12px;
    font-weight:800;

    letter-spacing:.5px;
}

.fh-budget-donut-inner small{
    margin-top:7px;

    color:#c6cbd1;

    font-size:12px;
    font-weight:500;
}


/* ==========================================================
   BUDGET SUMMARY
   ========================================================== */

.fh-budget-summary{
    margin-bottom:20px;

    padding:4px 12px;

    background:
        linear-gradient(
            180deg,
            rgba(5,12,18,.96),
            rgba(4,9,14,.96)
        );

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

    box-shadow:
        0 8px 20px rgba(0,0,0,.22);
}

.fh-budget-summary-row{
    min-height:43px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:10px;

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

.fh-budget-summary-row:last-child{
    border-bottom:none;
}

.fh-budget-summary-label{
    display:flex;
    align-items:center;

    gap:9px;

    min-width:0;

    color:#e7e9ec;

    font-size:12px;
    font-weight:600;
}

.fh-budget-summary-label i{
    width:17px;

    text-align:center;

    font-size:13px;
}

.fh-budget-summary-row:nth-child(1)
.fh-budget-summary-label i{
    color:#287be8;
}

.fh-budget-summary-row:nth-child(2)
.fh-budget-summary-label i{
    color:#ef3434;
}

.fh-budget-summary-row:nth-child(3)
.fh-budget-summary-label i{
    color:#4caf50;
}

.fh-budget-summary-row strong{
    flex-shrink:0;

    font-size:14px;
    font-weight:800;
}

.fh-budget-summary-row:nth-child(1) strong{
    color:#287be8;
}

.fh-budget-summary-row:nth-child(2) strong{
    color:#ef3434;
}

.fh-budget-summary-row:nth-child(3) strong{
    color:#4caf50;
}


/* ==========================================================
   SECTION TITLE
   ========================================================== */

.fh-budget-section-title{
    display:flex;
    align-items:center;
    gap:9px;

    margin:20px 0 12px;
    padding:9px 12px;

    background:
        linear-gradient(
            135deg,
            rgba(8,16,24,.98),
            rgba(3,8,13,.98)
        );

    border-left:3px solid #9d5cff;

    color:#ffffff;

    font-size:13px;
    font-weight:800;

    letter-spacing:.2px;
}

.fh-budget-section-title i{
    color:#9d5cff;

    font-size:13px;
}


/* ==========================================================
   AUCTION SUMMARY
   ========================================================== */

.fh-budget-auction-summary{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.fh-budget-stat-card{
    min-height:96px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    padding:14px;

    box-sizing:border-box;

    background:
        linear-gradient(
            145deg,
            rgba(5,15,24,.98),
            rgba(3,9,15,.98)
        );

    border:1px solid rgba(40,123,232,.20);
    border-radius:10px;

    box-shadow:
        0 8px 20px rgba(0,0,0,.22);
}

.fh-budget-stat-card i{
    margin-bottom:7px;

    color:#287be8;

    font-size:20px;

    filter:
        drop-shadow(
            0 0 7px rgba(40,123,232,.30)
        );
}

.fh-budget-stat-card strong{
    color:#ffffff;

    font-size:25px;
    line-height:1;
    font-weight:800;
}

.fh-budget-stat-card span{
    margin-top:7px;

    color:#aeb4bc;

    font-size:11px;
    font-weight:700;

    letter-spacing:.2px;
}


/* ==========================================================
   ROLE SECTION
   ========================================================== */

.fh-budget-roles{
    display:flex;
    flex-direction:column;
    gap:7px;
}

.fh-budget-role{
    position:relative;

    padding:9px;

    background:
        linear-gradient(
            145deg,
            rgba(5,14,22,.98),
            rgba(3,9,14,.98)
        );

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

    overflow:hidden;

    transition:
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.fh-budget-role:hover{
    transform:translateY(-1px);
}

.fh-budget-role-main{
    display:grid;

    grid-template-columns:
        30px
        minmax(0,1fr)
        30px
        auto
        72px
        auto;

    align-items:center;

    gap:7px;
}


/* ==========================================================
   ROLE ICON
   ========================================================== */

.fh-budget-role-icon{
    width:30px;
    height:30px;

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

    border-radius:7px;

    font-size:13px;
}

.fh-budget-role-name{
    min-width:0;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    font-size:10px;
    font-weight:800;

    letter-spacing:.15px;
}


/* ==========================================================
   ROLE DONUT
   ========================================================== */

.fh-budget-role-chart{
    position:relative;

    width:28px;
    height:28px;

    flex-shrink:0;

    border-radius:50%;

    background:
        conic-gradient(
            currentColor 0 35%,
            rgba(255,255,255,.08) 35% 100%
        );
}

.fh-budget-role-chart::after{
    content:"";

    position:absolute;

    inset:5px;

    border-radius:50%;

    background:#071018;
}


/* ==========================================================
   ROLE VALUE
   ========================================================== */

.fh-budget-role-value{
    display:flex;
    flex-direction:column;

    min-width:45px;
}

.fh-budget-role-value strong{
    color:#ffffff;

    font-size:13px;
    line-height:1.05;
    font-weight:800;

    white-space:nowrap;
}

.fh-budget-role-value span{
    margin-top:3px;

    color:#8e969f;

    font-size:8px;
    line-height:1;
}


/* ==========================================================
   ROLE PROGRESS
   ========================================================== */

.fh-budget-role-progress{
    width:72px;
    height:6px;

    overflow:hidden;

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

    border-radius:999px;
}

.fh-budget-role-progress-bar{
    width:35%;
    height:100%;

    border-radius:999px;

    background:currentColor;

    transition:width .3s ease;
}


/* ==========================================================
   ROLE COUNT
   ========================================================== */

.fh-budget-role-count{
    display:flex;
    align-items:baseline;

    white-space:nowrap;

    font-size:10px;
}

.fh-budget-role-count strong{
    font-size:11px;
    font-weight:800;
}

.fh-budget-role-count span{
    color:#727a83;
}


/* ==========================================================
   PORTIERI
   ========================================================== */

.fh-budget-role-por{
    border-color:rgba(40,123,232,.24);
    color:#287be8;
}

.fh-budget-role-por
.fh-budget-role-icon{
    background:rgba(40,123,232,.13);
    color:#287be8;
}

.fh-budget-role-por
.fh-budget-role-name,
.fh-budget-role-count strong{
    color:#287be8;
}


/* ==========================================================
   DIFENSORI
   ========================================================== */

.fh-budget-role-dif{
    border-color:rgba(76,175,80,.24);
    color:#4caf50;
}

.fh-budget-role-dif
.fh-budget-role-icon{
    background:rgba(76,175,80,.13);
    color:#4caf50;
}

.fh-budget-role-dif
.fh-budget-role-name,
.fh-budget-role-dif
.fh-budget-role-count strong{
    color:#4caf50;
}


/* ==========================================================
   CENTROCAMPISTI
   ========================================================== */

.fh-budget-role-cen{
    border-color:rgba(255,170,35,.24);
    color:#ffaa23;
}

.fh-budget-role-cen
.fh-budget-role-icon{
    background:rgba(255,170,35,.13);
    color:#ffaa23;
}

.fh-budget-role-cen
.fh-budget-role-name,
.fh-budget-role-cen
.fh-budget-role-count strong{
    color:#ffaa23;
}


/* ==========================================================
   ATTACCANTI
   ========================================================== */

.fh-budget-role-att{
    border-color:rgba(239,52,52,.24);
    color:#ef3434;
}

.fh-budget-role-att
.fh-budget-role-icon{
    background:rgba(239,52,52,.13);
    color:#ef3434;
}

.fh-budget-role-att
.fh-budget-role-name,
.fh-budget-role-att
.fh-budget-role-count strong{
    color:#ef3434;
}


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

.fh-budget-footer{
    display:flex;
    align-items:flex-start;

    gap:9px;

    margin-top:20px;
    padding:10px 12px;

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

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

    color:#9ba2aa;

    font-size:10px;
    line-height:1.35;
}

.fh-budget-footer i{
    flex-shrink:0;

    margin-top:1px;

    color:#8c949d;
}


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

@media (max-width:1500px){

    .fh-budget-panel{
        padding:14px;
    }

    .fh-budget-donut{
        width:220px;
    }

    .fh-budget-role-main{
        grid-template-columns:
            28px
            minmax(0,1fr)
            28px
            auto
            60px
            auto;
    }

    .fh-budget-role-progress{
        width:60px;
    }

}


@media (max-width:900px){

    .fh-budget-panel{
        padding:18px;
    }

    .fh-budget-donut{
        width:240px;
    }

    .fh-budget-role-main{
        grid-template-columns:
            30px
            minmax(0,1fr)
            30px
            auto
            minmax(60px,80px)
            auto;
    }

}


@media (max-width:520px){

    .fh-budget-header-content h2{
        font-size:19px;
    }

    .fh-budget-header-content span{
        font-size:11px;
    }

    .fh-budget-donut{
        width:210px;
    }

    .fh-budget-donut-inner strong{
        font-size:27px;
    }

    .fh-budget-role-main{
        grid-template-columns:
            28px
            minmax(0,1fr)
            28px
            auto;
    }

    .fh-budget-role-progress{
        display:none;
    }

}
/* ==========================================================
   FHL AUCTION WORKSPACE
   RESPONSIVE DEFINITIVO
   ----------------------------------------------------------
   Solo presentazione:
   - nessuna modifica alla logica PHP
   - nessuna modifica a JavaScript
   - nessuna modifica a URL / GET / AJAX
   ========================================================== */

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

.fh-auction-workspace{
    width:100%;
    min-width:0;
    overflow-x:hidden;
}

/* ----------------------------------------------------------
   DESKTOP COMPATTO
   ---------------------------------------------------------- */

@media (max-width:1500px){

    .fh-auction-layout{
        grid-template-columns:minmax(220px,260px) minmax(0,1fr) minmax(240px,280px);
        gap:14px;
    }

    .fh-auction-runtime{
        gap:28px;
    }

    .fh-auction-runtime-context{
        margin-left:0;
        gap:10px;
        flex-wrap:wrap;
    }

    .fh-runtime-box{
        min-width:105px;
    }

    .fh-offer-layout{
        grid-template-columns:180px minmax(0,1fr) 240px;
        gap:18px;
    }

    .fh-offer-avatar{
        width:180px;
    }

    .fh-filter-tabs{
        gap:10px;
        flex-wrap:wrap;
    }

    .fh-filter-search{
        min-width:180px;
    }
}

/* ----------------------------------------------------------
   TABLET LANDSCAPE / IPAD LANDSCAPE
   ---------------------------------------------------------- */

@media (max-width:1199px){

    .fh-auction-layout{
        grid-template-columns:minmax(190px,230px) minmax(0,1fr);
        gap:14px;
    }

    .fh-auction-sidebar-right{
        grid-column:1 / -1;
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:14px;
    }

    .fh-auction-sidebar-left,
    .fh-auction-content{
        min-width:0;
    }

    .fh-auction-runtime{
        align-items:flex-start;
        gap:20px;
        flex-wrap:wrap;
    }

    .fh-auction-runtime-info{
        min-width:0;
    }

    .fh-auction-runtime-context{
        flex:1 1 100%;
        margin-left:0;
        gap:8px;
    }

    .fh-runtime-box{
        flex:1 1 0;
        min-width:90px;
    }

    .fh-auction-player{
        grid-template-columns:minmax(0,1fr);
    }

    .fh-offer-layout{
        grid-template-columns:160px minmax(0,1fr);
        gap:18px;
    }

    .fh-offer-left{
        grid-row:span 2;
    }

    .fh-offer-avatar{
        width:160px;
    }

    .fh-offer-right{
        grid-column:2;
    }

    .fh-filter-tabs{
        flex-wrap:wrap;
    }

    .fh-filter-search{
        margin-left:0;
        flex:1 1 220px;
    }

    .fh-filter-search form{
        width:100%;
    }

    .fh-filter-search input{
        width:100%;
        min-width:0;
    }

    .fh-active-role-header{
        white-space:normal;
        flex-wrap:wrap;
    }

    .fh-budget-donut{
        width:min(220px,100%);
        max-width:100%;
    }

    .fh-budget-role-main{
        grid-template-columns:
            28px
            minmax(0,1fr)
            28px
            auto
            minmax(55px,70px)
            auto;
    }

    .fh-budget-role-progress{
        width:55px;
    }
}

/* ----------------------------------------------------------
   TABLET PORTRAIT / IPAD PORTRAIT
   ---------------------------------------------------------- */

@media (max-width:899px){

    .fh-auction-layout{
        grid-template-columns:minmax(0,1fr);
        gap:14px;
    }

    .fh-auction-sidebar-left,
    .fh-auction-content,
    .fh-auction-sidebar-right{
        grid-column:auto;
        width:100%;
    }

    .fh-auction-sidebar-right{
        display:flex;
        flex-direction:column;
    }

    .fh-auction-runtime{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:16px;
    }

    .fh-auction-runtime-info{
        gap:14px;
    }

    .fh-auction-runtime-logo img{
        width:56px;
        height:56px;
    }

    .fh-auction-runtime-title h2{
        font-size:22px;
    }

    .fh-auction-runtime-context{
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        width:100%;
        margin-left:0;
        gap:8px;
    }

    .fh-runtime-box{
        min-width:0;
        padding:8px 6px;
        border:1px solid rgba(255,255,255,.06);
        border-radius:8px;
        background:rgba(255,255,255,.02);
    }

    .fh-runtime-box strong{
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .fh-filter-tabs{
        width:100%;
        gap:7px;
    }

    .fh-filter-tab{
        flex:0 0 auto;
        padding:7px 10px;
        font-size:12px;
    }

    .fh-filter-search{
        flex:1 1 100%;
        width:100%;
    }

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

    .fh-offer-left{
        grid-row:auto;
        justify-content:center;
    }

    .fh-offer-avatar{
        width:min(180px,100%);
    }

    .fh-offer-center,
    .fh-offer-right{
        grid-column:auto;
        min-width:0;
    }

    .fh-offer-card{
        padding:18px;
    }

    .fh-offer-current{
        font-size:36px;
    }

    .fh-auction-status-body{
        gap:14px;
    }

    .fh-auction-countdown{
        font-size:32px;
    }

    .fh-active-offers-widget{
        padding:16px;
    }

    .fh-active-role-header{
        white-space:normal;
    }

    .fh-active-player-actions{
        flex-wrap:wrap;
    }

    .fh-budget-panel{
        padding:16px;
    }

    .fh-budget-donut{
        width:230px;
    }

    .fh-budget-role-main{
        grid-template-columns:
            30px
            minmax(0,1fr)
            30px
            auto
            minmax(60px,80px)
            auto;
    }

    .fh-budget-role-progress{
        width:60px;
    }
}

/* ----------------------------------------------------------
   SMARTPHONE
   ---------------------------------------------------------- */

@media (max-width:767px){

    .fh-auction-workspace{
        gap:14px;
    }

    .fh-auction-layout{
        gap:12px;
    }

    .fh-auction-sidebar-left,
    .fh-auction-content,
    .fh-auction-sidebar-right{
        gap:12px;
    }

    .fh-auction-runtime{
        gap:12px;
    }

    .fh-auction-runtime-info{
        align-items:center;
        gap:12px;
    }

    .fh-auction-runtime-logo img{
        width:48px;
        height:48px;
    }

    .fh-auction-runtime-title h2{
        font-size:19px;
    }

    .fh-auction-runtime-title p{
        font-size:12px;
    }

    .fh-auction-runtime-context{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:7px;
    }

    .fh-runtime-box{
        padding:7px 6px;
    }

    .fh-runtime-box span{
        font-size:9px;
    }

    .fh-runtime-box strong{
        font-size:12px;
    }

    /* Filtri */

    .fh-auction-filters-widget{
        display:block;
    }

    .fh-filter-tabs{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:6px;
    }

    .fh-filter-tab{
        width:100%;
        justify-content:center;
        min-height:38px;
        padding:7px 6px;
        font-size:11px;
        text-align:center;
    }

    .fh-filter-search{
        margin-top:8px;
    }

    .fh-filter-search form{
        gap:6px;
    }

    /* Tabella giocatori */

    .fh-player-table{
        width:100%;
        min-width:0;
        overflow:hidden;
    }

    .fh-player-table-header,
    .fh-player-table-row{
        grid-template-columns:
            44px
            minmax(0,1fr)
            52px
            70px
            70px;
        gap:6px;
    }

    .fh-player-table-header{
        font-size:9px;
    }

    .fh-player-table-row{
        min-height:64px;
        padding:5px 0;
    }

    .fh-player-photo svg{
        width:38px;
    }

    .fh-player-name{
        min-width:0;
        white-space:normal;
        flex-direction:column;
        align-items:flex-start;
        gap:1px;
        overflow:hidden;
    }

    .fh-player-surname{
        max-width:100%;
        font-size:14px;
        line-height:1.05;
        margin-bottom:0;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .fh-player-firstname{
        max-width:100%;
        font-size:12px;
        line-height:1.05;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .fh-player-role-badge{
        min-width:44px;
        height:27px;
        padding:0 6px;
        font-size:10px;
    }

    .fh-player-value{
        font-size:17px;
    }

    .fh-player-offer-button{
        width:100%;
        height:32px;
        padding:0 5px;
        font-size:10px;
        letter-spacing:.2px;
    }

    .fh-player-pagination{
        flex-wrap:wrap;
        gap:5px;
        margin-top:16px;
    }

    .fh-player-pagination a,
    .fh-player-pagination span{
        min-width:34px;
        height:34px;
        padding:0 8px;
        font-size:12px;
    }

    /* Offer */

    .fh-offer-header{
        padding:14px 16px;
    }

    .fh-offer-body{
        padding:14px;
        gap:12px;
    }

    .fh-offer-layout{
        padding-top:8px;
        gap:12px;
    }

    .fh-offer-avatar{
        width:140px;
    }

    .fh-offer-surname{
        font-size:16px;
    }

    .fh-offer-firstname{
        font-size:13px;
    }

    .fh-offer-role{
        margin-bottom:14px;
    }

    .fh-offer-metrics{
        gap:7px;
    }

    .fh-offer-metric{
        padding:9px 10px;
    }

    .fh-offer-card{
        gap:16px;
        padding:14px;
    }

    .fh-offer-card-title span{
        font-size:22px;
    }

    .fh-offer-controls{
        gap:10px;
    }

    .fh-offer-current{
        font-size:32px;
    }

    .fh-offer-minus,
    .fh-offer-plus{
        width:42px;
        height:42px;
        font-size:24px;
    }

    .fhl-confirm-offer-btn{
        width:100%;
        min-width:0;
        padding:12px 16px;
        font-size:13px;
    }

    /* Stato asta */

    .fh-auction-status-header{
        margin-bottom:12px;
    }

    .fh-auction-status-row{
        flex-wrap:wrap;
    }

    .fh-auction-status-row strong,
    .fh-auction-status-section strong{
        font-size:17px;
    }

    .fh-auction-label{
        font-size:14px;
    }

    .fh-auction-countdown{
        font-size:29px;
    }

    .fh-auction-datetime{
        flex-wrap:wrap;
        justify-content:center;
    }

    .fh-auction-date,
    .fh-auction-time{
        font-size:15px;
    }

    /* Offerte attive */

    .fh-active-offers-widget{
        padding:12px;
    }

    .fh-active-offers-body{
        gap:12px;
    }

    .fh-active-offers-role{
        padding:10px;
        border-radius:10px;
    }

    .fh-active-role-header{
        gap:8px;
        margin-bottom:8px;
    }

    .fh-active-role-header strong{
        font-size:19px;
    }

    .fh-active-role-header span{
        font-size:10px;
    }

    .fh-active-offer-player{
        align-items:center;
        gap:7px;
    }

    .fh-active-player-avatar{
        width:38px;
        height:50px;
    }

    .fh-active-player-info strong{
        font-size:12px;
        line-height:13px;
    }

    .fh-active-player-info small{
        font-size:11px;
        line-height:13px;
    }

    .fh-active-player-actions button{
        min-height:28px;
        padding:4px 7px;
        font-size:9px;
    }

    /* Budget */

    .fh-budget-panel{
        padding:12px;
    }

    .fh-budget-header{
        margin-bottom:14px;
        padding:11px 12px;
        gap:10px;
    }

    .fh-budget-header-icon{
        width:36px;
        height:36px;
        font-size:18px;
    }

    .fh-budget-header-content h2{
        font-size:18px;
    }

    .fh-budget-header-content span{
        font-size:10px;
    }

    .fh-budget-donut{
        width:min(210px,100%);
    }

    .fh-budget-donut-inner strong{
        font-size:26px;
    }

    .fh-budget-summary{
        margin-bottom:14px;
        padding:2px 10px;
    }

    .fh-budget-summary-row{
        min-height:40px;
    }

    .fh-budget-summary-label{
        font-size:11px;
    }

    .fh-budget-summary-row strong{
        font-size:13px;
    }

    .fh-budget-section-title{
        margin:14px 0 9px;
        padding:8px 10px;
        font-size:12px;
    }

    .fh-budget-stat-card{
        min-height:82px;
        padding:10px;
    }

    .fh-budget-stat-card strong{
        font-size:21px;
    }

    .fh-budget-role{
        padding:8px;
    }

    .fh-budget-role-main{
        grid-template-columns:
            28px
            minmax(0,1fr)
            28px
            auto;
        gap:6px;
    }

    .fh-budget-role-progress{
        display:none;
    }

    .fh-budget-role-name{
        font-size:9px;
    }

    .fh-budget-role-value{
        min-width:40px;
    }

    .fh-budget-role-value strong{
        font-size:12px;
    }

    .fh-budget-role-count{
        font-size:9px;
    }

    .fh-budget-role-count strong{
        font-size:10px;
    }

    .fh-budget-footer{
        margin-top:14px;
        padding:9px 10px;
        font-size:9px;
    }
}

/* ----------------------------------------------------------
   SMARTPHONE PICCOLO
   ---------------------------------------------------------- */

@media (max-width:480px){

    .fh-auction-runtime-context{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .fh-runtime-box strong{
        font-size:11px;
    }

    .fh-filter-tabs{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .fh-player-table-header,
    .fh-player-table-row{
        grid-template-columns:
            38px
            minmax(0,1fr)
            46px
            62px
            66px;
        gap:5px;
    }

    .fh-player-photo svg{
        width:34px;
    }

    .fh-player-surname{
        font-size:13px;
    }

    .fh-player-firstname{
        font-size:11px;
    }

    .fh-player-role-badge{
        min-width:40px;
        height:25px;
        padding:0 4px;
        font-size:9px;
    }

    .fh-player-value{
        font-size:15px;
    }

    .fh-player-offer-button{
        height:30px;
        font-size:9px;
    }

    .fh-offer-avatar{
        width:120px;
    }

    .fh-offer-current{
        font-size:28px;
    }

    .fh-offer-minus,
    .fh-offer-plus{
        width:38px;
        height:38px;
        font-size:22px;
    }

    .fh-auction-countdown{
        font-size:26px;
    }

    .fh-budget-donut{
        width:190px;
    }

    .fh-budget-donut-inner strong{
        font-size:24px;
    }

    .fh-budget-role-icon{
        width:28px;
        height:28px;
    }
}

/* ----------------------------------------------------------
   ACCESSIBILITÀ / INPUT TOUCH
   ---------------------------------------------------------- */

@media (hover:none){

    .fh-player-offer-button:hover,
    .fh-offer-minus:hover,
    .fh-offer-plus:hover,
    .fhl-confirm-offer-btn:hover{
        transform:none;
    }
}

@media (prefers-reduced-motion:reduce){

    .fh-auction-workspace *,
    .fh-auction-workspace *::before,
    .fh-auction-workspace *::after{
        scroll-behavior:auto !important;
        transition-duration:0.01ms !important;
        animation-duration:0.01ms !important;
        animation-iteration-count:1 !important;
    }
}