/**
 * ============================================================
 * Journal Statistics Plugin
 * Version : 2.1
 * OJS      : 3.3.x
 * Modern Dashboard UI
 * ============================================================
 */

/* ============================================================
   ROOT
============================================================ */

:root{

    --js-primary:#0d6efd;
    --js-success:#198754;
    --js-warning:#fd7e14;
    --js-danger:#dc3545;
    --js-info:#0dcaf0;
    --js-purple:#6f42c1;
    --js-dark:#212529;

    --js-bg:#f8fafc;

    --js-border:#edf2f7;

    --js-shadow:
        0 8px 24px rgba(0,0,0,.05);

    --js-shadow-hover:
        0 25px 55px rgba(0,0,0,.14)

}

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

.js-statistics{

    margin:60px auto;

    padding:10px 0;

}

.js-statistics-header{

    text-align:center;

    margin-bottom:45px;

}

.js-statistics-header h2{

    margin:0;

    font-size:34px;

    font-weight:700;

    color:#222;

}

.js-statistics-header p{

    margin-top:10px;

    font-size:16px;

    color:#6c757d;

}

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

.js-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:24px;

}

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

.js-card{

    position:relative;

    overflow:hidden;

    background:#ffffff;

    border-radius:18px;

    border:1px solid var(--js-border);

    min-height:215px;

    padding:35px 25px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    box-shadow:var(--js-shadow);

    transition:all .30s ease;

}

.js-card:hover{

transform:
translateY(-10px)
scale(1.02);

}

/* ============================================================
   TOP ACCENT
============================================================ */

.js-card-accent{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:linear-gradient(
        90deg,
        var(--js-primary),
        #56a8ff
    );

}

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

.js-icon{

    font-size:54px;

    line-height:1;

    margin-bottom:18px;

    transition:all .30s ease;

}

.js-card:hover .js-icon{

    transform:scale(1.12) rotate(-6deg);

}
/* ============================================================
   VALUE
============================================================ */

.js-value{

    font-size:38px;

    font-weight:700;

    color:var(--js-primary);

    line-height:1;

    margin-bottom:14px;

}

/* ============================================================
   LABEL
============================================================ */

.js-label{

    font-size:17px;

    font-weight:500;

    color:#555;

}

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

.js-card-articles .js-card-accent{

    background:#0d6efd;

}

.js-card-issues .js-card-accent{

    background:#198754;

}

.js-card-authors .js-card-accent{

    background:#6f42c1;

}

.js-card-institutions .js-card-accent{

    background:#fd7e14;

}

.js-card-countries .js-card-accent{

    background:#0dcaf0;

}

.js-card-reviewers .js-card-accent{

    background:#dc3545;

}

.js-card-editors .js-card-accent{

    background:#6c757d;

}

.js-card-downloads .js-card-accent{

    background:#198754;

}

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

@media screen and (max-width:992px){

    .js-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

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

@media screen and (max-width:576px){

    .js-grid{

        grid-template-columns:1fr;

    }

    .js-statistics-header h2{

        font-size:28px;

    }

    .js-card{

        min-height:190px;

    }

    .js-icon{

        font-size:46px;

    }

    .js-value{

        font-size:32px;

    }

}
/* ======================================================
   Animation
======================================================*/

.js-card{

    opacity:0;

}

.js-card.loaded{

    opacity:1;

}

.counter{

    font-variant-numeric:tabular-nums;

}