/*
==========================================================
FantasyFanzone Dashboard
Version: 4.0
==========================================================
*/

.ffz-dashboard{
    position:relative;

    padding:var(--ffz-section-padding) 0;
}

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

.ffz-dashboard__grid{
    display:grid;

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

    gap:var(--ffz-grid-gap);
}

.ffz-dashboard__grid > .ffz-card{
    height:100%;
}

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

.ffz-card--deadline .ffz-card__value{
    margin-bottom:8px;
}

/*======================================================
DEADLINE COUNTDOWN
======================================================*/

.ffz-dashboard__countdown{
    display:inline-flex;

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

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

    padding:6px 12px;

    border:1px solid
        rgba(124,58,237,.24);

    border-radius:999px;

    background:
        rgba(124,58,237,.12);

    color:var(--ffz-primary);

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

    font-variant-numeric:
        tabular-nums;

    letter-spacing:.03em;

    white-space:nowrap;

    transition:
        color var(--ffz-transition-normal),
        background-color var(--ffz-transition-normal),
        border-color var(--ffz-transition-normal);
}

/*======================================================
DEADLINE — LESS THAN 24 HOURS
======================================================*/

.ffz-card--deadline.is-deadline-close
.ffz-dashboard__countdown{
    background:
        rgba(245,158,11,.12);

    border-color:
        rgba(245,158,11,.28);

    color:var(--ffz-warning);
}

/*======================================================
DEADLINE — LESS THAN 3 HOURS
======================================================*/

.ffz-card--deadline.is-deadline-urgent
.ffz-dashboard__countdown{
    background:
        rgba(239,68,68,.12);

    border-color:
        rgba(239,68,68,.30);

    color:var(--ffz-danger);
}

/*======================================================
DEADLINE — EXPIRED
======================================================*/

.ffz-card--deadline.is-expired
.ffz-dashboard__countdown{
    background:
        rgba(148,163,184,.10);

    border-color:
        rgba(148,163,184,.20);

    color:var(--ffz-text-muted);
}

/*======================================================
LOADING
======================================================*/

.ffz-dashboard--loading{
    pointer-events:none;

    opacity:.75;
}

.ffz-dashboard--loading .ffz-card{
    animation:
        ffzDashboardPulse
        1.5s
        ease
        infinite;
}

@keyframes ffzDashboardPulse{

    0%,
    100%{
        opacity:.65;
    }

    50%{
        opacity:1;
    }

}

/*======================================================
TABLET
======================================================*/

@media(max-width:1200px){

    .ffz-dashboard__grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}

/*======================================================
MOBILE
======================================================*/

@media(max-width:768px){

    .ffz-dashboard__grid{
        grid-template-columns:1fr;

        gap:24px;
    }

    .ffz-dashboard__countdown{
        padding:6px 10px;

        font-size:12px;
    }

}

/*======================================================
SMALL PHONES
======================================================*/

@media(max-width:480px){

    .ffz-dashboard__countdown{
        white-space:normal;

        text-align:center;
    }

}

/*======================================================
REDUCED MOTION
======================================================*/

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

    .ffz-dashboard--loading .ffz-card{
        animation:none;
    }

    .ffz-dashboard__countdown{
        transition:none;
    }

}