/*BASE CARD STYLE*/
.card {
  --card-background-color: #ffffff;
  --card-border-radius: 0.75rem;
  --card-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
                     0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --card-box-shadow-hover: 0 15px 20px -5px rgba(0, 0, 0, 0.1),
                           0 8px 8px -5px rgba(0, 0, 0, 0.04);
  --card-hover-transform: translateY(-6px);
  --card-transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
  --card-overflow: hidden;

  background-color: var(--card-background-color);
  border-radius: var(--card-border-radius);
  overflow: var(--card-overflow);
  display: flex;
  flex-direction: column;
  box-shadow: var(--card-box-shadow);
  transition: var(--card-transition);
}

.card:hover {
  transform: var(--card-hover-transform);
  box-shadow: var(--card-box-shadow-hover);
}
/*-------------------------*/

/*CARD MODIFIERS*/
.staticCard {
  --card-hover-transform: none;
  --card-box-shadow-hover: var(--card-box-shadow);
}

/*-------------------------*/

/*STAT CARDS GRID*/
.cardGrid.statsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}
/*-------------------------*/

/*STAT CARD*/
.statCard {
  --card-border-radius: 8px;
  --card-overflow: visible;
  --card-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03);
  --card-box-shadow-hover: 0 10px 15px rgba(0, 0, 0, 0.08);
  --card-hover-transform: none;
  --card-transition: box-shadow 0.2s ease;
  align-items: center;
  justify-content: center;
  padding: 16px;
  min-height: 120px;
}
/*-------------------------*/

/*STATS CARD ICON CONTAINER*/
.statsCardIconContainer {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  margin-bottom: 0.5rem;
}

.statsCardIconContainer i {
  font-size: 1.25rem;
}
/*-------------------------*/