@import "colors";
@import "font-sizes";

// Shared variables
@card-border-radius: 8px;
@card-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

// Card grid layout
.wpsi-data-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

// Individual card styling
.wpsi-data-card {
  background: white;
  border-radius: @card-border-radius;
  padding: 15px 20px;
  box-shadow: @card-shadow;
  transition: transform 0.2s ease;

  &:hover {
    transform: translateY(-2px);
  }

  // Card types@wr
  &.success {
    border-left: 4px solid @color-success;
  }

  &.warning {
    border-left: 4px solid @color-error;
  }

}

// Totals container
.wpsi-totals-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  position: fixed;
  bottom: 20px;
  gap: 5px;

  .wpsi-totals-label {
    font-weight: 400;
  }

  .wpsi-totals-value {
    font-size: 1.1em;
    font-weight: 600;
  }
}

// No data message
.wpsi-no-data {
  text-align: center;
  padding: 20px;
  color: @text-color;
  font-style: italic;
}