/* =========================================================
   E2H — DASHBOARD QUICK WIDGETS
========================================================= */

.dashboard-quick-widget{
    position:relative;
    overflow:hidden;
    min-height:184px;
    padding:16px 20px;
    border:1px solid rgba(148,163,184,.20);
    border-radius:16px;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(56,189,248,.055),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            rgba(20,30,48,.98),
            rgba(10,17,31,.98)
        );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 12px 30px rgba(0,0,0,.12);
    transition:
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}

.dashboard-quick-widget:hover{
    transform:translateY(-2px);
    border-color:rgba(96,165,250,.30);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 16px 38px rgba(0,0,0,.20);
}


/* =========================================================
   HEADER
========================================================= */

.dashboard-quick-widget__header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.dashboard-quick-widget__identity{
    display:flex;
    align-items:center;
    gap:10px;

    color:#e5edf7;

    font-size:14px;
    font-weight:650;
}

.dashboard-quick-widget__icon{
    width:32px;
    height:32px;

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

    border-radius:9px;

    background:rgba(56,189,248,.08);
    border:1px solid rgba(56,189,248,.18);

    color:#38bdf8;
}

.dashboard-quick-widget__icon svg{
    width:17px;
    height:17px;
}

.dashboard-quick-widget__icon--mail{
    color:#38bdf8;
    background:rgba(56,189,248,.08);
    border-color:rgba(56,189,248,.20);
}

.dashboard-quick-widget__icon--savoir-faire{
    color:#a78bfa;
    background:rgba(167,139,250,.08);
    border-color:rgba(167,139,250,.20);
}


/* =========================================================
   STATUS
========================================================= */

.dashboard-quick-widget__status{
    display:flex;
    align-items:center;
    gap:6px;

    font-size:11px;
    font-weight:600;

    color:#7dd3fc;
}

.dashboard-quick-widget--savoir-faire
.dashboard-quick-widget__status{
    color:#86efac;
}

.dashboard-quick-widget__status-dot{
    width:6px;
    height:6px;

    border-radius:50%;

    background:#38bdf8;
    box-shadow:0 0 8px rgba(56,189,248,.65);
}

.dashboard-quick-widget--savoir-faire
.dashboard-quick-widget__status-dot{
    background:#4ade80;
    box-shadow:0 0 8px rgba(74,222,128,.65);
}


/* =========================================================
   BODY
========================================================= */

.dashboard-quick-widget__body{
    margin-top:12px;
}

.dashboard-quick-widget__value{
    color:#f8fafc;

    font-size:34px;
    line-height:1;

    font-weight:750;
    letter-spacing:-.04em;
}

.dashboard-quick-widget__label{
    margin-top:5px;

    color:#94a3b8;

    font-size:12px;
}


/* =========================================================
   METRICS
========================================================= */

.dashboard-quick-widget__metrics{
    display:flex;
    align-items:center;
    gap:20px;

    margin-top:12px;
}

.dashboard-quick-widget__metric{
    display:flex;
    align-items:center;
    gap:6px;

    color:#94a3b8;

    font-size:11px;
}

.dashboard-quick-widget__metric-icon{
    width:18px;
    height:18px;

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

    border-radius:5px;
}

.dashboard-quick-widget__metric-icon svg{
    width:12px;
    height:12px;
}

.dashboard-quick-widget__metric-icon--warning{
    color:#fbbf24;
    background:rgba(251,191,36,.08);
}

.dashboard-quick-widget__metric-icon--success{
    color:#4ade80;
    background:rgba(74,222,128,.08);
}

.dashboard-quick-widget__metric-icon--violet{
    color:#a78bfa;
    background:rgba(167,139,250,.08);
}


/* =========================================================
   FOOTER
========================================================= */

.dashboard-quick-widget__footer{
    position:absolute;
    left:20px;
    right:20px;
    bottom:14px;

    display:flex;
    align-items:center;
    gap:8px;
}

.dashboard-quick-widget__footer-line{
    flex:1;
    height:1px;

    background:linear-gradient(
        90deg,
        rgba(56,189,248,.35),
        rgba(56,189,248,.05)
    );
}

.dashboard-quick-widget--savoir-faire
.dashboard-quick-widget__footer-line{
    background:linear-gradient(
        90deg,
        rgba(167,139,250,.35),
        rgba(167,139,250,.05)
    );
}

.dashboard-quick-widget__footer-text{
    color:#64748b;

    font-size:9px;
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;

    text-transform:uppercase;
    letter-spacing:.10em;
}

.dashboard-quick-widget__footer-arrow{
    display:flex;

    color:#38bdf8;
}

.dashboard-quick-widget--savoir-faire
.dashboard-quick-widget__footer-arrow{
    color:#a78bfa;
}

.dashboard-quick-widget__footer-arrow svg{
    width:13px;
    height:13px;
}


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

@media(max-width:767px){

    .dashboard-quick-widget{
        min-height:175px;
    }

    .dashboard-quick-widget__metrics{
        gap:14px;
    }

}