/* Premium SaaS-styled UI (dark sidebar) */
body { background: #f4f6f8; font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; }
.sp-dashboard { display:flex; min-height:100vh;}
.sp-sidebar { width:240px; background:#0f1724; color:#d1d5db; padding:20px 12px; position:absolute; height:200vh; }
.sp-logo { max-width:36px; border-radius:6px; margin-right:8px; vertical-align:middle; }
.sp-brand { display:flex; align-items:center; gap:8px; font-weight:700; color:#fff; margin-bottom:18px; }
.sp-nav { list-style:none; padding:0; margin:0; }
.sp-nav li { margin-bottom:6px; }
.sp-nav a { color:#cbd5e1; display:flex; gap:10px; align-items:center; padding:10px 12px; border-radius:8px; text-decoration:none; }
.sp-nav a i { width:20px; text-align:center; }
.sp-nav a:hover, .sp-nav .active a { background:linear-gradient(90deg,#111827,#0b1220); color:#fff; }
.sp-main { margin-left:260px; flex:1; padding:28px; }
.sp-topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.sp-card { box-shadow: 0 6px 18px rgba(15,23,42,0.08); border:none; border-radius:10px; }
.sp-section .card { border-radius:10px; box-shadow: 0 8px 30px rgba(18,22,30,0.06); }


/* ONE LINE STATS ROW */
.sp-stats-row {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 20px;
    width: 100%;
    margin-bottom: 25px;
}

/* EACH STAT BOX */
.sp-stat-box {
    flex: 1;
    background: #f5f7fb;
    padding: 25px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* TITLE */
.sp-stat-box h4 {
    margin: 0;
    font-size: 18px;
    color: #333;
}

/* NUMBER */
.sp-stat-box span {
    display: block;
    margin-top: 10px;
    font-size: 28px;
    font-weight: bold;
    color: #111;
}

/* MOBILE (optional) */
@media (max-width: 768px) {
    .sp-stats-row {
        flex-direction: column;
    }
}