/* CARDS */
.cards{
  padding:20px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
}

.card{
  background:var(--white);
  padding:20px;
  border-radius:var(--radius);
  box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.card h3{
  font-size:14px;
  color:var(--gray);
}

.card p{
  font-size:26px;
  font-weight:600;
  margin-top:8px;
}

/* BUTTONS */
.btn{
  padding:12px 18px;
  border:none;
  border-radius:12px;
  cursor:pointer;
  font-weight:500;
  text-decoration:none;
  display:inline-block;
}

.btn-primary{ background:var(--primary); color:#fff; }
.btn-success{ background:var(--success); color:#fff; }
.btn-warning{ background:var(--warning); color:#fff; }
.btn-danger{ background:var(--danger); color:#fff; }

/* TABLE */
.table-box{
  background:var(--white);
  margin:20px;
  padding:20px;
  border-radius:var(--radius);
  overflow-x:auto;
}

table{
  width:100%;
  border-collapse:collapse;
}

th,td{
  padding:14px;
  border-bottom:1px solid #eee;
  font-size:14px;
}

th{
  background:#eef2ff;
  text-align:left;
}