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

:root{

    --dsm-radius:16px;

    --dsm-gap:18px;

    --dsm-border:#e8edf3;

    --dsm-shadow:0 8px 24px rgba(0,0,0,.06);

    --dsm-shadow-hover:0 16px 36px rgba(0,0,0,.12);

    --dsm-transition:.25s ease;

}

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

.dsm-grid{

    display:grid;

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

    gap:var(--dsm-gap);

    width:100%;

}

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


.dsm-card{

    position:relative;
    overflow:hidden;

    background:#fff;

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

    border-radius:var(--dsm-radius);

    padding:18px;

    min-height:170px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}

.dsm-card:hover{

    transform:translateY(-5px);

    box-shadow:0 14px 30px rgba(0,0,0,.10);

}

.dsm-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

}

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

.dsm-card-content{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.dsm-card{
    transition:
        transform .25s ease,
        box-shadow .25s ease;
}
/*=========================================================
  HEADER
=========================================================*/

.dsm-header{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    margin-bottom:10px;

}

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

.dsm-icon{

    width:48px;

    height:48px;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    font-size:22px;

}

.dsm-icon i{

    line-height:1;

}

.dsm-icon{

    transition:transform .25s ease;

}

.dsm-card:hover .dsm-icon{

    transform:scale(1.08);

}

/*=========================================================
  NUMBER
=========================================================*/

.dsm-number{

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:38px;

    font-weight:700;

    line-height:1;

    letter-spacing:-.5px;

}

.dsm-prefix,
.dsm-suffix{

    font-size:18px;

    font-weight:600;

}

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

.dsm-stat-title{

    min-height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

}

/*=========================================================
  SUBTITLE
=========================================================*/

.dsm-subtitle{

    min-height:32px;

    display:flex;

    align-items:flex-start;

    justify-content:center;

}

/*=========================================================
  COLOR THEMES
=========================================================*/

.dsm-primary::before{background:#0d6efd;}
.dsm-success::before{background:#198754;}
.dsm-warning::before{background:#fd7e14;}
.dsm-danger::before{background:#dc3545;}
.dsm-info::before{background:#0dcaf0;}
.dsm-purple::before{background:#6f42c1;}

.dsm-primary .dsm-icon,
.dsm-primary .dsm-number{
    color:#0d6efd;
}

.dsm-success .dsm-icon,
.dsm-success .dsm-number{
    color:#198754;
}

.dsm-warning .dsm-icon,
.dsm-warning .dsm-number{
    color:#fd7e14;
}

.dsm-danger .dsm-icon,
.dsm-danger .dsm-number{
    color:#dc3545;
}

.dsm-info .dsm-icon,
.dsm-info .dsm-number{
    color:#0dcaf0;
}

.dsm-purple .dsm-icon,
.dsm-purple .dsm-number{
    color:#6f42c1;
}

.dsm-primary .dsm-icon{background:#eef5ff;}
.dsm-success .dsm-icon{background:#eefaf3;}
.dsm-warning .dsm-icon{background:#fff5ea;}
.dsm-danger .dsm-icon{background:#fff0f1;}
.dsm-info .dsm-icon{background:#ebfcff;}
.dsm-purple .dsm-icon{background:#f3eeff;}


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

@media (min-width:993px){

    .dsm-header{
        gap:20px;              /* Increase spacing between icon and number */
        margin-bottom:14px;
    }

    .dsm-icon{
        width:54px;
        height:54px;
        font-size:24px;
    }

    .dsm-number{
        font-size:42px;
    }

}

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

@media (max-width:992px){

    .dsm-grid{

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

        gap:16px;

    }

}

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

@media (max-width:576px){

    .dsm-grid{

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

        gap:12px;

    }

    .dsm-card{

        padding:14px;

        min-height:125px;

    }

    .dsm-header{

        gap:8px;

        margin-bottom:8px;

    }

    .dsm-icon{

        width:40px;

        height:40px;

        font-size:18px;

    }

    .dsm-number{

        font-size:28px;

    }

    .dsm-prefix,
    .dsm-suffix{

        font-size:14px;

    }

    .dsm-stat-title{

        font-size:14px;

    }

    .dsm-subtitle{

        font-size:11px;

        line-height:1.4;

    }

}