/* MAIN */

/* BANNER */

#das-banner{
    margin:10px;
    padding:18px;
    border-radius:18px;

    background:linear-gradient(
    135deg,
    #1565c0,
    #42a5f5);

    color:#fff;

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

    box-shadow:
    0 8px 20px rgba(21,101,192,.25);
}

#das-banner small{
    font-size:11px;
}

#das-banner h2{
    margin:5px 0;
    font-size:28px;
}

#das-banner span{
    font-size:11px;
}

.das-banner-icon .material-icons{
    font-size:46px;
    opacity:.9;
}

/* CARDS */

#das-cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    padding:10px;
}

.das-card{
    background:#fff;

    border-radius:16px;

    padding:12px;

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

    text-align:center;
}

.das-card-icon{
    width:40px;
    height:40px;

    margin:auto auto 8px;

    border-radius:12px;

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

    color:#fff;
}

.das-sales{
    background:#43a047;
}

.das-purchase{
    background:#ef6c00;
}

.das-receivable{
    background:#8e24aa;
}

.das-received{
    background:#1565c0;
}

.das-customer{
    background:#00acc1;
}

.das-product{
    background:#d81b60;
}

.das-card span{
    display:block;
    font-size:10px;
    color:#777;
}

.das-card strong{
    font-size:15px;
    color:#222;
}

/* CHART */

.das-chart-box{
    background:#fff;

    margin:10px;

    padding:15px;

    border-radius:18px;

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

.das-chart-title{
    font-size:13px;
    font-weight:600;
    margin-bottom:15px;
}

.das-chart-placeholder{
    height:180px;

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

    background:#f5f7fb;

    border-radius:12px;

    font-size:12px;
    color:#888;
}

/* PROFIT */

#das-profit-card{
    background:
    linear-gradient(
    135deg,
    #22c55e,
    #16a34a);

    color:#fff;

    margin:10px;

    padding:18px;

    border-radius:18px;

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

#das-profit-card strong{
    display:block;
    margin-top:5px;
    font-size:22px;
}

#das-profit-card .material-icons{
    font-size:40px;
}

/* ORDERS */

#das-orders-wrap{
    display:grid;
    grid-template-columns:repeat(2,1fr);

    gap:10px;

    padding:10px;
}

.das-order-card{
    background:#fff;

    border-radius:16px;

    padding:16px;

    text-align:center;

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

.das-order-card .material-icons{
    font-size:28px;
    color:#1565c0;
}

.das-order-card h4{
    margin:8px 0;
    font-size:13px;
}

.das-order-card strong{
    font-size:20px;
}

/* MOBILE */

@media(max-width:420px){

    #das-cards{
        grid-template-columns:
        repeat(3,1fr);
    }

}