/* =========================================
   card.css
========================================= */

/* ==========================
    Card
========================== */

.card{

    background:#ffffff;

    border-radius:14px;

    padding:24px;

    box-shadow:
        0 4px 12px rgba(0,0,0,.05);

    transition:.2s;

}

.card:hover{

    transform:translateY(-2px);

    box-shadow:
        0 10px 24px rgba(0,0,0,.08);

}

/* ==========================
    Card Header
========================== */

.card-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:18px;

}

.card-title{

    font-size:14px;

    color:#64748b;

    font-weight:600;

}

.card-action{

    display:flex;

    gap:10px;

    align-items:center;

}

/* ==========================
    Card Body
========================== */

.card-body{

    display:flex;

    flex-direction:column;

}

/* ==========================
    Card Footer
========================== */

.card-footer{

    margin-top:20px;

    padding-top:16px;

    border-top:1px solid #e5e7eb;

}

/* ==========================
    Dashboard Number
========================== */

.card-value{

    font-size:34px;

    font-weight:700;

    color:#111827;

    line-height:1.2;

}

/* ==========================
    Dashboard Description
========================== */

.card-desc{

    margin-top:10px;

    color:#94a3b8;

    font-size:13px;

}

/* ==========================
    Dashboard Trend
========================== */

.card-trend{

    margin-top:14px;

    display:flex;

    align-items:center;

    gap:8px;

    font-size:13px;

}

.card-trend.up{

    color:#16a34a;

}

.card-trend.down{

    color:#dc2626;

}

/* ==========================
    Mini Card
========================== */

.card-mini{

    padding:16px;

    border-radius:10px;

}

/* ==========================
    Full Height
========================== */

.card-fill{

    height:100%;

}

/* ==========================
    Clickable
========================== */

.card-click{

    cursor:pointer;

}

.card-click:hover{

    border-color:#2563eb;

}